:root{
  --page:#07101c;
  --surface:#0c1625;
  --surface-2:#111d2e;
  --surface-3:#16243a;
  --line:#20314a;
  --line-soft:#17263a;
  --text:#f4f7fb;
  --muted:#8393aa;
  --muted-2:#5f718a;
  --blue:#4f8cff;
  --blue-strong:#2f70f5;
  --cyan:#36c5f0;
  --green:#3dd598;
  --amber:#f8b84e;
  --red:#f26b7a;
  --shadow:0 24px 60px rgba(0,0,0,.28);
}

body:not(.authMode){
  min-height:100vh;
  background:
    radial-gradient(circle at 85% -10%,rgba(38,105,224,.16),transparent 30%),
    linear-gradient(145deg,#07101c 0%,#08111d 52%,#091422 100%);
  color:var(--text);
}

body:not(.authMode) main{
  display:grid;
  grid-template-columns:244px minmax(0,1fr);
  align-items:start;
  width:100%;
  min-height:100vh;
  padding:0;
  gap:0;
}

.appSidebar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  flex-direction:column;
  width:244px;
  height:100vh;
  padding:24px 16px 18px;
  border-right:1px solid rgba(105,135,177,.16);
  background:linear-gradient(180deg,rgba(13,25,41,.98),rgba(8,17,29,.98));
  box-shadow:18px 0 48px rgba(0,0,0,.12);
}

.appSidebar[hidden]+.appSurface{grid-column:1/-1}
.appSurface{min-width:0;padding:0 28px 28px}

.sidebarBrand{display:flex;align-items:center;gap:12px;padding:0 8px 27px}
.sidebarBrand .mark,.mobileBrand .mark{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(145deg,#6aa5ff,#376df0 70%);
  box-shadow:0 8px 22px rgba(53,111,238,.35),inset 0 1px rgba(255,255,255,.32);
  font-size:16px;
}
.sidebarBrand div{display:grid;gap:2px;min-width:0}
.sidebarBrand b{font-size:16px;font-weight:650;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebarBrand small{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}

.appSidebar nav{display:grid;gap:7px}
.appSidebar nav a{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;
  border:1px solid transparent;border-radius:11px;color:#8394ad;text-decoration:none;
  font-size:12px;font-weight:560;transition:.16s ease;
}
.appSidebar nav a:hover{color:#dce8fb;background:#142238;border-color:#203552}
.appSidebar nav a.active{color:#fff;background:linear-gradient(100deg,rgba(54,111,235,.32),rgba(40,85,184,.12));border-color:rgba(88,143,255,.3);box-shadow:inset 3px 0 #5793ff}
.appSidebar svg,.inventoryTools svg,.metricIcon svg,.managementIcon svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.sidebarFoot{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding:13px 12px;
  border:1px solid #1c3049;border-radius:12px;background:rgba(17,31,49,.7)
}
.sidebarPulse{position:relative;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(61,213,152,.65)}
.sidebarPulse:after{content:"";position:absolute;inset:-5px;border:1px solid rgba(61,213,152,.28);border-radius:50%}
.sidebarFoot div{display:grid;gap:2px}.sidebarFoot b{font-size:10px;font-weight:600}.sidebarFoot small{font-size:9px;color:var(--muted-2)}

body:not(.authMode) header{
  position:sticky;top:0;z-index:30;
  min-height:72px;margin:0 -28px 22px;padding:0 28px;
  border-bottom:1px solid rgba(91,121,162,.15);
  background:rgba(7,16,28,.78);backdrop-filter:blur(18px) saturate(1.25);
}
.mobileBrand{display:none!important}.topbarContext{display:grid!important;gap:2px}
.topbarContext small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
body:not(.authMode) header .topbarContext b{font-size:15px;font-weight:590;color:#dfe9f8}
#status{
  display:inline-flex;align-items:center;min-height:29px;padding:0 11px 0 25px;
  border:1px solid #284a42;border-radius:999px;background:#102822;color:#76e3ba!important;
  font-size:10px;font-weight:600;position:relative
}
#status:before{content:"";position:absolute;left:10px;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}

body:not(.authMode) button{
  min-height:36px;border:1px solid transparent;border-radius:9px;padding:8px 13px;
  background:linear-gradient(180deg,#5c91ff,#3c73ed);box-shadow:0 5px 15px rgba(42,91,194,.18);
  font-size:11px;font-weight:650;letter-spacing:.005em;transition:transform .14s ease,filter .14s ease,border-color .14s ease,background .14s ease
}
body:not(.authMode) button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
body:not(.authMode) button:active:not(:disabled){transform:translateY(0)}
body:not(.authMode) button.secondary{border-color:#2a3c56;background:#17263a;color:#c6d4e8;box-shadow:none}
body:not(.authMode) button.danger{border-color:#56303a;background:#341d27;color:#ffacb9;box-shadow:none}
body:not(.authMode) input,body:not(.authMode) select{
  border:1px solid #283b56;background:#0b1523;color:#eaf1fa;box-shadow:inset 0 1px 2px rgba(0,0,0,.16)
}

.sessionControls{
  min-height:56px;padding:9px 10px 9px 17px;border:1px solid #203451;border-radius:13px;
  background:linear-gradient(100deg,rgba(17,32,51,.94),rgba(11,24,40,.94));box-shadow:0 12px 30px rgba(0,0,0,.15)
}
.sessionControls b{position:relative;padding-left:17px;font-size:12px!important;color:#c8d5e7}
.sessionControls b:before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;transform:translateY(-50%);border-radius:50%;background:#65758c;box-shadow:0 0 0 4px rgba(101,117,140,.12)}
.sessionControls button{min-height:34px!important}

.inventory{padding:0;background:transparent}
.inventoryHead{align-items:end;min-height:76px;margin:0 0 15px;padding:0;border:0}
.inventoryHead>div:first-child{display:grid;gap:2px}
.sectionEyebrow{font-size:9px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:#659cff}
.inventoryHead b{font-size:27px!important;font-weight:630!important;letter-spacing:-.035em!important}
.inventoryHead small{font-size:11px!important;color:var(--muted)}
.inventoryTools{gap:8px}
.searchBox{position:relative;width:260px;max-width:38vw;color:#667993}
.searchBox svg{position:absolute;left:12px;top:50%;z-index:2;width:16px;height:16px;transform:translateY(-50%)}
.inventoryTools .searchBox input{width:100%;height:38px;margin:0;padding:8px 12px 8px 36px;border-radius:9px;font-size:11px}
.refreshButton{display:inline-flex;align-items:center;gap:7px;height:38px!important;padding:7px 12px!important}
.refreshButton svg{width:15px;height:15px}

.fleetSummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:17px}
.fleetSummary article{
  display:flex;align-items:center;gap:12px;min-width:0;min-height:104px;padding:16px;
  border:1px solid #1e3049;border-radius:14px;
  background:linear-gradient(145deg,rgba(19,34,54,.93),rgba(11,23,39,.93));
  box-shadow:0 14px 34px rgba(0,0,0,.12);overflow:hidden;position:relative
}
.fleetSummary article:after{content:"";position:absolute;right:-24px;bottom:-30px;width:90px;height:90px;border-radius:50%;background:rgba(68,126,241,.05)}
.metricIcon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px}
.metricIcon svg{width:20px;height:20px}.metricIcon.total{color:#7cabff;background:#173261}.metricIcon.online{color:#62e3b2;background:#123a31}.metricIcon.offline{color:#a7b4c8;background:#253246}.metricIcon.groups{color:#c7a7ff;background:#302351}
.fleetSummary article>div{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:1px 8px;min-width:0}
.fleetSummary small{grid-column:1/-1;color:#8797ad;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.fleetSummary strong{font-size:25px;font-weight:650;line-height:1.15;letter-spacing:-.04em}
.fleetSummary article div span{align-self:center;color:#60728b;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.deviceSectionHead{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:8px;padding:0 2px}
.deviceSectionHead>div{display:grid;gap:2px}.deviceSectionHead b{font-size:13px;font-weight:600}.deviceSectionHead small{font-size:10px;color:var(--muted-2)}
#fleetHealthLabel{padding:5px 9px;border:1px solid #283c58;border-radius:999px;background:#101d2e;color:#7890af;font-size:9px;font-weight:580}
#fleetHealthLabel.healthy{border-color:#245b4c;background:#102922;color:#65ddb1}

.userDeviceSection{margin-top:9px;border-color:#1f324c;border-radius:12px;background:#0a1421;box-shadow:0 10px 26px rgba(0,0,0,.1)}
.userDeviceSection>summary{min-height:52px;padding:9px 13px;background:linear-gradient(90deg,#142238,#111d2f);border:0}
.accountRoleIcon{border-radius:9px!important}.userDeviceName{font-weight:590}.userDeviceContent{border-color:#1c2c43}

.groupBlock{margin-top:8px;border:1px solid #1c2e46!important;border-radius:12px!important;background:#0a1421!important;box-shadow:0 10px 30px rgba(0,0,0,.11)}
.groupBlock>summary{min-height:53px;padding:9px 12px!important;border-bottom-color:#1b2b42!important;background:linear-gradient(90deg,#121f32,#0f1b2c)!important}
.groupBlock>summary:before{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#1c2e49;color:#8da9d1;font-size:10px}
.groupBlock>summary b{font-size:12px!important;font-weight:600!important;color:#dfe8f5}
.groupBlock>summary small{font-size:9px!important;color:#71839d}
.groupActions{gap:6px}.groupActions select{height:32px;margin:0;border-radius:8px;padding:5px 26px 5px 8px;font-size:10px}
.groupActions button{min-height:32px!important;padding:6px 9px!important;border-radius:8px!important;font-size:9px!important}

.deviceGrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;gap:7px!important;padding:8px!important}
.deviceTile{border:1px solid #1b2c43!important;border-radius:10px!important;background:linear-gradient(145deg,#111d2e,#0d1928)!important;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.deviceTile:hover{border-color:#31527e!important;box-shadow:0 13px 28px rgba(0,0,0,.17);transform:translateY(-1px)}
.deviceToggle{min-height:66px!important;padding:10px 12px!important;border-left:0!important;gap:11px!important}
.deviceToggle:hover{background:rgba(40,73,112,.16)!important}
.deviceToggle strong{font-size:12px!important;font-weight:580!important;color:#e6edf7}
.deviceToggle small{margin-top:3px!important;font-size:9px!important}.deviceToggle small.onlineText{color:#51dca7!important}
.computerIcon{transform:scale(.72)!important;margin:-2px -4px -2px -2px!important;color:#6d7b90}
.computerIcon.online{color:#5794ff!important;background:rgba(42,102,216,.13)!important;box-shadow:0 0 18px rgba(55,125,255,.3)!important}
.deviceArrow{font-size:20px!important;color:#58708f!important}
.deviceDetails{padding:9px!important;border-color:#1c2d43!important;background:rgba(7,15,25,.35)}
.renameDevice{margin-bottom:7px}.renameDevice input{height:34px!important}.tileActions{gap:6px!important}
.tileActions button{min-height:33px!important;padding:6px!important;border-radius:7px!important;font-size:9px!important}
.guestPanel.compact{border-color:#1c2e45;background:#09131f}.guestRow{border-color:#1d2d42}

.stage{border-color:#1e3149;border-radius:14px;background:linear-gradient(145deg,#060b12,#08101a);box-shadow:var(--shadow)}
#empty:before{content:"";position:absolute;width:44px;height:36px;margin-top:-68px;border:2px solid #263a56;border-radius:7px;box-shadow:0 0 35px rgba(72,128,232,.1)}
#empty{color:#566980;font-size:11px;letter-spacing:.02em}
footer{color:#52657d;font-size:10px}

.managementPanel{margin-top:2px;border-color:#1e3049;border-radius:13px;background:linear-gradient(145deg,#0d1928,#0a1421);box-shadow:0 12px 32px rgba(0,0,0,.1)}
.managementPanel>summary{min-height:58px;padding:10px 14px;gap:12px;color:#d9e3f1;list-style:none}
.managementPanel>summary::-webkit-details-marker{display:none}.managementPanel>summary:after{content:"+";margin-left:auto;color:#7890b0;font-size:20px;font-weight:300}.managementPanel[open]>summary:after{content:"–"}
.managementIcon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid #2a4265;border-radius:10px;background:#14243a;color:#72a2ef}
.managementIcon svg{width:17px;height:17px}.managementTitle{display:grid;gap:2px}.managementTitle b{font-size:12px;font-weight:600}.managementTitle small{color:#697d98;font-size:9px}
.managementBody{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 10px 10px}
.compactAdmin,.compactUserList{min-width:0;border:1px solid #1c2d44;border-radius:10px;background:#0c1725}
.compactAdmin{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(140px,1fr) auto;align-items:end;gap:9px;padding:11px}
.compactAdmin>div{grid-column:1/-1;flex:auto}.compactAdmin>div b,.compactUserList>b{font-size:11px;font-weight:600}.compactAdmin>div small{font-size:9px!important;color:#6c7d94}
.compactAdmin label{max-width:none!important;font-size:9px}.compactAdmin input{height:34px;padding:7px 9px}.compactAdmin button{min-height:34px!important}
.brandingSettings,.accountSecurity,.userCreation,.compactUserList{grid-column:1/-1}.brandingSettings{grid-template-columns:repeat(2,minmax(180px,1fr)) auto}.accountSecurity,.userCreation{grid-template-columns:repeat(3,minmax(150px,1fr)) auto}
.compactUserList{padding:12px}.userAccountRow{border-color:#1c2b40}

.removeDialog{border-color:#2d425f;border-radius:16px;background:#101c2b;box-shadow:0 35px 100px rgba(0,0,0,.58)}
.removeDialog::backdrop{background:rgba(2,7,13,.8);backdrop-filter:blur(5px)}
.removeDialog h2{font-size:18px;letter-spacing:-.02em}.removeDialog p{font-size:12px;line-height:1.55}

@media(min-width:1500px){
  .appSurface{padding-inline:36px}.fleetSummary{gap:13px}.deviceGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:1120px){
  body:not(.authMode) main{grid-template-columns:78px minmax(0,1fr)}
  .appSidebar{width:78px;padding:22px 11px}.sidebarBrand{justify-content:center;padding-inline:0}.sidebarBrand>div,.appSidebar nav a span,.sidebarFoot div{display:none}.appSidebar nav a{justify-content:center;padding:0}.sidebarFoot{justify-content:center;padding:13px 0}
  .fleetSummary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .managementBody{grid-template-columns:1fr}.compactAdmin,.brandingSettings,.accountSecurity,.userCreation{grid-column:1;grid-template-columns:1fr 1fr}.compactAdmin button{grid-column:1/-1}.compactUserList{grid-column:1}
}

@media(max-width:900px){
  body:not(.authMode) main{display:block}.appSidebar{display:none!important}.appSurface{padding:0 12px 18px}
  body:not(.authMode) header{position:relative;min-height:58px;margin:0 -12px 10px;padding:0 12px}
  .mobileBrand{display:flex!important}.topbarContext{display:none!important}
  .mobileBrand b{font-size:14px!important}
  .fleetSummary{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.fleetSummary article{min-height:86px;padding:12px}.metricIcon{flex-basis:34px;width:34px;height:34px}.fleetSummary strong{font-size:21px}.fleetSummary article div span{display:none}
  .inventoryHead{align-items:stretch;margin-bottom:11px}.inventoryHead b{font-size:23px!important}.inventoryTools{display:grid;grid-template-columns:minmax(0,1fr) auto}.searchBox{width:auto;max-width:none}.inventoryTools .searchBox input{height:42px;font-size:16px}.refreshButton{height:42px!important}.refreshButton span{display:none}
  .deviceSectionHead{align-items:center}.deviceSectionHead small{display:none}
  .groupBlock>summary{display:grid!important}.groupActions button{font-size:10px!important}
  .managementBody{grid-template-columns:1fr}.compactAdmin,.brandingSettings,.accountSecurity,.userCreation{grid-template-columns:1fr}.compactAdmin button{grid-column:1}.compactUserList{grid-column:1}
}

@media(max-width:520px){
  .appSurface{padding-inline:9px}body:not(.authMode) header{margin-inline:-9px;padding-inline:9px}.fleetSummary{grid-template-columns:1fr 1fr}.fleetSummary article{gap:8px;min-height:76px;padding:10px}.metricIcon{flex-basis:30px;width:30px;height:30px;border-radius:9px}.metricIcon svg{width:16px;height:16px}.fleetSummary small{font-size:8px}.fleetSummary strong{font-size:19px}
  .inventoryHead{display:grid!important}.inventoryHead>div:first-child{margin-bottom:5px}.deviceSectionHead{margin-top:2px}.deviceGrid{grid-template-columns:1fr!important}.groupActions{grid-template-columns:1fr 1fr!important}
  .groupActions select{grid-column:1/-1}.managementPanel>summary{padding:9px 11px}.managementTitle small{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media(prefers-reduced-motion:reduce){.deviceTile,button,.appSidebar nav a{transition:none!important}}