*{box-sizing:border-box}
body{font-family:Arial,sans-serif;margin:0;color:#111;background:#fff}
.app-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #aaa;padding:16px 24px}
.app-header h1{margin:0 0 12px 0}
nav{display:flex;gap:8px;flex-wrap:wrap}
main{padding:24px}
input,button,select{padding:7px;font-size:14px}
button{cursor:pointer}
.hidden{display:none}
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:24px;align-items:start}
.home-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:start}
.home-grid .panel:nth-child(3){grid-column:1 / -1}
.panel{border:1px solid #ccc;border-radius:6px;padding:16px;background:#fafafa}
.row{margin-bottom:12px}
.row label{display:block;font-weight:bold;margin-bottom:4px}
.row input{width:100%}
.row input[type=checkbox]{width:auto}
.filterbar{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}
.filterbar input{min-width:260px}
table{border-collapse:collapse;width:100%}
td,th{border:1px solid #ccc;padding:8px;vertical-align:middle}
th{background:#f3f3f3;position:sticky;top:0;z-index:1}
tr.device-row,tr.group-row{cursor:pointer}
tr.device-row:hover,tr.group-row:hover{background:#eef5ff}
tr.selected{background:#dcecff}
.table-scroll{overflow:auto;border:1px solid #ddd;background:#fff}
.device-table-scroll{max-height:calc(100vh - 235px)}
.group-table-scroll{max-height:calc(100vh - 235px)}
.membership-scroll{max-height:220px;margin-top:10px}
.icon{width:36px;height:36px;object-fit:contain}
.preview{display:flex;gap:12px;align-items:center;min-height:56px}
.preview img{width:48px;height:48px;object-fit:contain;border:1px solid #ddd;background:#fff;padding:4px}
.status{display:none;margin-top:10px;padding:8px;border-radius:4px}
.ok{display:block;background:#e8f7e8;border:1px solid #8fc98f}
.err{display:block;background:#fdeaea;border:1px solid #d88}
.muted{color:#666;font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.swatch{display:inline-block;width:28px;height:16px;border:1px solid #888;vertical-align:middle;margin-right:6px}
select{max-width:100%}
details{margin:4px 0}
@media(max-width:1100px){
  .page-grid,.home-grid{grid-template-columns:1fr}
  .device-table-scroll,.group-table-scroll{max-height:420px}
}

#editUserGroups{max-height:220px;overflow:auto;border:1px solid #ddd;background:#fff;padding:8px}

#editUserGroups,#editUserMasterGroups{max-height:220px;overflow:auto;border:1px solid #ddd;background:#fff;padding:8px}

.detail-top-actions{position:sticky;top:86px;z-index:2;background:#fafafa;border-bottom:1px solid #ddd;padding-bottom:10px}

.header-user{font-size:13px;color:#444;margin-bottom:8px}
button[disabled],input[disabled],select[disabled]{opacity:.65;cursor:not-allowed}