/* ===================================================================
   HatchConnect - dashboard
   =================================================================== */
:root{
  --bg:#0b0f17;
  --bg2:#0e1420;
  --panel:#121a28;
  --panel2:#16202f;
  --panel3:#1b2739;
  --line:#233047;
  --line2:#2c3c56;
  --txt:#e8edf5;
  --txt2:#9fb0c9;
  --txt3:#6b7c98;
  --accent:#4f8cff;
  --accent2:#2b5bd4;
  --accent-glow:rgba(79,140,255,.35);
  --green:#31d07a;
  --green-glow:rgba(49,208,122,.35);
  --amber:#f5b544;
  --sleep:#8aa0ff;
  --red:#ff5d6c;
  --red-dim:#c8394a;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --shadow-sm:0 4px 18px rgba(0,0,0,.30);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
button{font-family:inherit}
svg.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:9px 15px;border-radius:var(--radius-sm);border:1px solid var(--line2);
  background:var(--panel3);color:var(--txt);font-weight:600;font-size:13px;
  cursor:pointer;transition:transform .12s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
  white-space:nowrap;
}
.btn:hover{background:#20304a;border-color:#38507a;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff;box-shadow:0 4px 16px var(--accent-glow)}
.btn.primary:hover{box-shadow:0 6px 22px var(--accent-glow);filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--line2)}
.btn.ghost:hover{background:var(--panel3)}
.btn.danger{background:transparent;border-color:rgba(255,93,108,.4);color:var(--red)}
.btn.danger:hover{background:rgba(255,93,108,.12);border-color:var(--red)}
.btn.small{padding:6px 11px;font-size:12px;border-radius:8px}
.btn.icon{padding:9px;width:38px}
.btn.block{width:100%}

/* ===================================================================
   AUTH
   =================================================================== */
.auth-view{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
.auth-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(700px 500px at 20% 10%,rgba(79,140,255,.16),transparent 60%),
    radial-gradient(600px 500px at 85% 90%,rgba(43,91,212,.18),transparent 60%),
    var(--bg);
}
.auth-bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);
}
.auth-card{
  position:relative;width:min(400px,92vw);padding:38px 34px 30px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.auth-logo{display:grid;place-items:center;margin-bottom:14px;filter:drop-shadow(0 6px 16px var(--accent-glow))}
.auth-title{margin:0;text-align:center;font-size:23px;letter-spacing:.2px}
.auth-sub{margin:6px 0 24px;text-align:center;color:var(--txt2);font-size:13px}
.field{display:block;margin-bottom:14px}
.field span{display:block;margin-bottom:6px;color:var(--txt2);font-size:12px;font-weight:600}
.field input{
  width:100%;padding:11px 13px;border-radius:var(--radius-sm);
  background:var(--bg2);border:1px solid var(--line2);color:var(--txt);font-size:14px;
  transition:border-color .16s,box-shadow .16s;
}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.block.primary{margin-top:6px;padding:12px}
.err{color:var(--red);font-size:13px;margin-top:12px;text-align:center;min-height:16px}

/* ===================================================================
   APP SHELL
   =================================================================== */
.app-shell{display:grid;grid-template-columns:248px 1fr;height:100vh;overflow:hidden}
/* solo pop-out window: hide the sidebar so one device fills the window */
body.solo .app-shell{grid-template-columns:1fr}
body.solo .sidebar{display:none}

/* ---------- sidebar ---------- */
.sidebar{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-right:1px solid var(--line);padding:18px 14px;gap:8px;
}
.side-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;font-size:17px;font-weight:600}
.side-brand b{color:var(--accent);font-weight:700}
.side-brand svg{filter:drop-shadow(0 3px 8px var(--accent-glow))}
.side-nav{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 12px;border:none;border-radius:var(--radius-sm);
  background:transparent;color:var(--txt2);font-size:14px;font-weight:600;cursor:pointer;
  transition:background .16s,color .16s;position:relative;
}
.nav-item .ic{width:19px;height:19px}
.nav-item:hover{background:var(--panel);color:var(--txt)}
.nav-item.active{background:linear-gradient(135deg,rgba(79,140,255,.18),rgba(79,140,255,.06));color:#fff}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:4px;height:22px;border-radius:0 4px 4px 0;background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.side-user{display:flex;align-items:center;gap:10px;padding:4px}
.avatar{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 3px 10px var(--accent-glow)}
.su-name{font-weight:600;font-size:13px}
.su-role{color:var(--txt3);font-size:11px;text-transform:capitalize}

/* ---------- main ---------- */
.main{overflow-y:auto;padding:26px 30px 40px;position:relative}
.page{animation:fadeUp .32s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-title{margin:0;font-size:24px;letter-spacing:.2px}
.page-sub{margin:4px 0 0;color:var(--txt2);font-size:13px}
.page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:0 12px;transition:border-color .16s,box-shadow .16s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.search .ic{color:var(--txt3);width:16px;height:16px}
.search input{background:none;border:none;color:var(--txt);padding:9px 0;font-size:13px;width:180px}
.search input:focus{outline:none}

/* ---------- stat cards ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:transform .16s,border-color .16s}
.stat:hover{transform:translateY(-2px);border-color:var(--line2)}
.stat-top{display:flex;align-items:center;justify-content:space-between}
.stat-label{color:var(--txt2);font-size:12px;font-weight:600}
.stat-ic{font-size:10px}
.stat-ic.total{color:var(--accent)}
.stat-ic.online{color:var(--green)}
.stat-ic.busy{color:var(--amber)}
.stat-ic.offline{color:var(--txt3)}
.stat-ic.sleep{color:var(--sleep)}
.stat-num{font-size:30px;font-weight:700;margin-top:8px;letter-spacing:.5px}

.stats.stats-3{grid-template-columns:repeat(3,1fr)}
.stats.stats-4{grid-template-columns:repeat(4,1fr)}
.stats.stats-auto{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat-svg{width:17px;height:17px;color:var(--txt3)}
.stat-svg.dl{color:var(--accent)}
.stat-svg.in{color:var(--green)}
.stat-svg.cv{color:#c08cff}
.stat-svg.un{color:var(--red)}
.stat-ic.uninstalled{color:var(--red)}
.stat-foot{color:var(--txt3);font-size:11px;margin-top:4px}
.stat-num.flash{animation:flashNum .6s ease}
@keyframes flashNum{0%{color:var(--accent);transform:scale(1.12)}100%{color:var(--txt);transform:scale(1)}}
.sub-h{font-size:13px;color:var(--txt2);font-weight:700;margin:22px 0 12px;text-transform:uppercase;letter-spacing:.5px}

/* per-link metric chips */
.link-stats{display:flex;gap:8px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--panel3);border:1px solid var(--line2);color:var(--txt2)}
.chip svg{width:12px;height:12px}
.chip.dl svg{color:var(--accent)}
.chip.in svg{color:var(--green)}
.chip b{color:var(--txt)}

/* ---------- segmented filter ---------- */
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:3px;margin-bottom:18px;gap:2px}
.seg-btn{border:none;background:transparent;color:var(--txt2);font-weight:600;font-size:12px;padding:6px 14px;border-radius:8px;cursor:pointer;transition:background .16s,color .16s}
.seg-btn:hover{color:var(--txt)}
.seg-btn.active{background:var(--panel3);color:#fff;box-shadow:var(--shadow-sm)}

/* ---------- device grid ---------- */
.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
/* ScreenConnect-style dense list */
.device-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.device-row{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);cursor:default;transition:background .12s}
.device-row:last-child{border-bottom:none}
.device-row:hover{background:var(--panel2)}
.device-row.enter{animation:fadeUp .25s ease both}
.dr-os{width:22px;height:22px;flex:none;color:var(--txt2);display:grid;place-items:center}
.dr-os svg{width:18px;height:18px}
.device-row.online .dr-os{color:#4fa3ff}
.dr-status{flex:none;display:grid;place-items:center;width:14px}
.dr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dr-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-sub{font-size:11.5px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-presence{font-size:11px;font-weight:600;flex:none}
.dr-seen{font-size:11.5px;color:var(--txt3);flex:none;width:96px;text-align:right}
.dr-actions{flex:none;display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .12s}
.device-row:hover .dr-actions,.device-row.busy .dr-actions{opacity:1}
.dr-busy{font-size:11px;color:var(--amber);font-weight:600}
.btn.xs{padding:3px 12px;font-size:12px}
.icon-btn.dr-more{width:28px;height:28px;padding:0}
.icon-btn.dr-more svg{width:16px;height:16px}
/* solo/app "connecting" cover - hides the dashboard blink before auto-attach */
#solo-loader{position:fixed;inset:0;z-index:9999;background:#0b1017;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .25s ease}
#solo-loader.gone{opacity:0;pointer-events:none}
#solo-loader .sl-spin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:#2f6bff;animation:sl-rot .8s linear infinite}
#solo-loader .sl-txt{color:#93a7c4;font-size:14px;letter-spacing:.02em}
@keyframes sl-rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#solo-loader .sl-spin{animation:none}}

/* Backstage hub */
.bs-modal{width:min(600px,94vw)}
.bs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.bs-title{font-family:inherit;font-size:19px;font-weight:700;display:flex;align-items:center;gap:10px}
.bs-badge{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--accent-soft,rgba(79,140,255,.15));color:var(--accent)}
.bs-sub{color:var(--txt2);font-size:13px;margin-top:5px}
.bs-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.bs-tile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:16px 15px;border:1px solid var(--line2);border-radius:12px;background:var(--panel3);color:var(--txt);cursor:pointer;transition:border-color .12s,background .12s,transform .12s}
.bs-tile:hover{border-color:var(--accent);background:var(--panel2);transform:translateY(-2px)}
.bs-ic{display:inline-flex;color:var(--accent)}
.bs-ic svg{width:22px;height:22px}
.bs-tt{font-weight:600;font-size:14px}
.bs-td{font-size:12px;color:var(--txt2);line-height:1.45}
.bs-note{margin:18px 0 0;font-size:12.5px;color:var(--txt2);line-height:1.5}
@media (max-width:560px){.bs-grid{grid-template-columns:1fr}}
.dr-lock{display:inline-flex;align-items:center;color:var(--accent);flex:0 0 auto}
.dr-lock svg{width:15px;height:15px}
.dr-lock.released{color:#f0c674}
.device-row.uninstalled{opacity:.6}
.device-row.asleep{opacity:.85}
@media(max-width:640px){.dr-seen{display:none}}
/* right-click context menu */
.ctx-menu{position:fixed;z-index:200;min-width:196px;background:var(--panel3);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);padding:5px;animation:pop .12s ease both}
.ctx-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 11px;border:none;background:none;color:var(--txt);font-size:13px;font-weight:500;border-radius:7px;cursor:pointer;text-align:left}
.ctx-item svg{width:16px;height:16px;color:var(--txt2);flex:none}
.ctx-item:hover{background:var(--panel2)}
.ctx-item.primary{color:var(--accent);font-weight:700}
.ctx-item.danger{color:var(--red)}
.ctx-item.danger:hover{background:rgba(255,93,108,.12)}
.ctx-item.danger svg{color:var(--red)}
.ctx-sep{height:1px;background:var(--line);margin:5px 4px}
/* build installer dialog */
.build-modal{width:min(520px,94vw)}
.build-help{color:var(--txt2);font-size:13px;line-height:1.5;margin:6px 0 16px}
.build-grid{display:grid;grid-template-columns:110px 1fr;gap:10px 12px;align-items:center}
.build-grid label{color:var(--txt2);font-size:13px}
.build-grid input,.build-grid select{background:var(--panel3);border:1px solid var(--line2);border-radius:8px;color:var(--txt);padding:8px 11px;font-size:13px;width:100%}
.build-grid input:focus,.build-grid select:focus{outline:none;border-color:var(--accent)}
.build-result{margin-top:16px;padding:14px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);display:flex;flex-direction:column;gap:10px}
.build-link-row{display:flex;gap:8px}
.build-link-row input{flex:1;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;color:var(--txt);padding:8px 11px;font-size:12px;font-family:ui-monospace,monospace}
#build-download{text-align:center;text-decoration:none}
/* install-method chooser */
.build-method-label{display:block;color:var(--txt2);font-size:13px;margin:16px 0 8px}
.build-methods{display:flex;flex-direction:column;gap:10px}
.method-card{display:flex;gap:11px;align-items:flex-start;padding:12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel3);cursor:pointer;transition:border-color .12s,background .12s}
.method-card:hover{border-color:var(--line2)}
.method-card.selected{border-color:var(--accent);background:var(--panel2)}
.method-card input{margin-top:3px;accent-color:var(--accent);flex:0 0 auto}
.method-body{flex:1}
.method-title{color:var(--txt);font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.method-tag{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
.method-tag.ok{color:#7ee0a8;background:rgba(126,224,168,.13)}
.method-tag.warn{color:#f0c674;background:rgba(240,198,116,.14)}
.method-desc{color:var(--txt2);font-size:12px;line-height:1.5;margin:5px 0 0}
/* session-bar extras */
.quality-seg{display:inline-flex}
.quality-seg .q-btn{min-width:26px;padding:4px 8px;font-size:12px}
.zoom-ctl{display:inline-flex;align-items:center;gap:2px}
#zoom-lbl{font-size:11px;color:var(--txt2);min-width:34px;text-align:center}
#annot-btn.on{color:var(--accent);border-color:var(--accent)}
#annot-canvas{grid-area:1/1;z-index:4;border-radius:8px;max-width:100%;max-height:100%;cursor:crosshair}
/* ScreenConnect-style CENTERED icon toolbar + wide hover dropdown panels */
.sc-bar{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:67}
.sc-tabs{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2px}
.sc-tab{width:42px;height:34px;display:grid;place-items:center;border:none;background:none;color:var(--txt2);border-radius:8px 8px 0 0;cursor:pointer;transition:background .12s,color .12s}
.sc-tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-tab:hover{color:var(--txt)}
.sc-tab.active{background:var(--panel3);color:#fff}
.sc-panels{position:absolute;top:47px;left:0;right:0;z-index:66;display:flex;justify-content:center;pointer-events:none}
.sc-panel{pointer-events:auto;display:flex;background:var(--panel3);border:1px solid var(--line2);border-top:none;border-radius:0 0 14px 14px;box-shadow:0 18px 44px rgba(0,0,0,.55);overflow:hidden;animation:pop .12s ease both;max-width:96vw}
.sc-col{padding:12px 14px;border-right:1px solid var(--line)}
.sc-col:last-child{border-right:none}
.sc-col-t{font-size:12px;font-weight:700;color:var(--txt);margin-bottom:10px;white-space:nowrap}
.sc-colbody{display:flex;flex-direction:column;gap:10px}
.sc-tiles{display:flex;gap:8px;flex-wrap:wrap;max-width:232px}
.sc-tile{width:106px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--txt);cursor:pointer;padding:8px 6px;text-align:center;transition:background .12s,border-color .12s}
.sc-tile:hover{background:var(--panel);border-color:var(--line2)}
.sc-tile-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--txt2)}
.sc-tile-l{font-size:11.5px;line-height:1.2;color:var(--txt2)}
.sc-tile.q-btn.active,.sc-tile.on{border-color:var(--accent)}
.sc-tile.q-btn.active .sc-tile-l,.sc-tile.on .sc-tile-l{color:#fff}
.sc-tile.q-btn.active .sc-tile-ic svg{color:var(--accent)}
.sc-tile.toggle .sc-tile-sw{width:36px;height:20px;border-radius:20px;background:var(--panel3);border:1px solid var(--line2);position:relative;flex:none}
.sc-tile.toggle .sc-tile-sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--txt2);transition:transform .16s,background .16s}
.sc-tile.toggle.on .sc-tile-sw{background:var(--accent);border-color:var(--accent)}
.sc-tile.toggle.on .sc-tile-sw::after{transform:translateX(16px);background:#fff}
.sc-tile.recording{border-color:var(--red)}
.sc-tile.recording .sc-tile-ic svg{color:var(--red)}
.sc-tile.soon{opacity:.5}
.sc-tile.soon::after{content:"SOON";position:absolute;top:5px;right:6px;font-size:7.5px;font-weight:800;letter-spacing:.4px;color:var(--txt3);border:1px solid var(--line2);border-radius:4px;padding:1px 3px}
.sc-tile{position:relative}
.sc-hint{font-size:11.5px;color:var(--txt3)}
.sc-hint.sc-wide{margin-top:8px;max-width:220px;display:block}
.mini-select{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;color:var(--txt);padding:7px 10px;font-size:13px}
/* credential vault */
.cred-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 14px;max-height:260px;overflow:auto}
.cred-row{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.cred-row .cn{flex:1;min-width:0}
.cred-row .cn b{font-size:13px}
.cred-row .cn span{display:block;font-size:11.5px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cred-add{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px}
.cred-add input{background:var(--panel3);border:1px solid var(--line2);border-radius:8px;color:var(--txt);padding:8px 10px;font-size:13px}
.cred-add input:focus{outline:none;border-color:var(--accent)}
@media(max-width:600px){.cred-add{grid-template-columns:1fr 1fr}}
.device{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  transition:transform .16s,border-color .16s,box-shadow .16s;
  position:relative;overflow:hidden;
}
/* Cards update in place (see renderDevices reconcile) so they never flash on a
   presence/stats push; only newly-added cards animate in. */
.device.enter{animation:fadeUp .3s ease both}
.device:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow)}
.device.online::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:.55}
/* hardware inventory */
.inv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.hw-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.hw-sec{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.hw-sec-t{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--txt3);margin-bottom:10px;font-weight:700}
.hw-row{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:5px 0;border-top:1px solid var(--line);font-size:13px}
.hw-row:first-of-type{border-top:none}
.hw-k{color:var(--txt3)}
.hw-v{color:var(--txt);word-break:break-word}
/* drag-drop to screen */
.drop-hint{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(5,7,12,.72);backdrop-filter:blur(2px);pointer-events:none}
.drop-hint div{border:2px dashed var(--accent);border-radius:14px;padding:22px 30px;font-weight:700;color:#dfe8ff;background:rgba(79,140,255,.12)}
/* files search + search-results */
.files-search{background:var(--panel3);border:1px solid var(--line2);border-radius:8px;color:var(--txt);padding:6px 10px;font-size:13px;width:190px}
.files-search:focus{outline:none;border-color:var(--accent)}
.fpath-cell{color:var(--txt3);font-size:11px}
/* clipboard image */
.clip-img{max-width:100%;max-height:260px;border-radius:8px;border:1px solid var(--line2);margin-top:6px}
.clip-img-label{color:var(--txt3);font-size:12px;margin-top:10px}
/* deploy */
.dep-pane{display:flex;flex-direction:column;gap:12px;max-width:640px}
.dep-row{display:flex;align-items:center;gap:12px}
.dep-args{background:var(--panel3);border:1px solid var(--line2);border-radius:8px;color:var(--txt);padding:9px 12px;font-size:13px}
.dep-args:focus{outline:none;border-color:var(--accent)}
.dep-elev{display:flex;align-items:center;gap:8px;color:var(--txt2);font-size:13px}
.dep-out{background:#05070c;border:1px solid var(--line);border-radius:8px;padding:12px;min-height:70px;max-height:240px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--txt);white-space:pre-wrap;margin:0}
/* recording indicator */
#rec-btn.recording{color:var(--red);border-color:rgba(255,93,108,.5);background:rgba(255,93,108,.12)}
#rec-btn.recording::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:1px;animation:pulse 1.4s infinite}
.dev-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card-settings{margin-left:auto;align-self:flex-start;position:relative}
.icon-btn.top{flex:0 0 auto}
.card-menu{position:absolute;top:40px;right:0;z-index:20;min-width:150px;background:var(--panel3);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);padding:5px;animation:pop .16s ease both}
.card-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:none;background:none;color:var(--txt);font-size:13px;font-weight:600;border-radius:7px;cursor:pointer;text-align:left}
.card-menu button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-menu button:hover{background:var(--panel2)}
.card-menu button.danger{color:var(--red)}
.card-menu button.danger:hover{background:rgba(255,93,108,.12)}
.power-menu{min-width:190px}
.pm-ka{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;font-size:13px;font-weight:600;cursor:pointer}
.pm-div{height:1px;background:var(--line);margin:5px 0}
.power-menu .pw{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:none;background:none;color:var(--txt);font-size:13px;font-weight:600;border-radius:7px;cursor:pointer;text-align:left}
.power-menu .pw:hover{background:var(--panel2)}
.power-menu .pw.warn{color:var(--amber)}
.power-menu .pw.danger{color:var(--red)}
.power-menu .pw.warn:hover{background:rgba(245,181,68,.12)}
.power-menu .pw.danger:hover{background:rgba(255,93,108,.12)}
.presence{font-size:11px;font-weight:600}
.presence.active{color:var(--green)}
.presence.idle{color:var(--amber)}
.presence.locked{color:var(--txt3)}
.dev-badge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:var(--panel3);border:1px solid var(--line2);position:relative}
.dev-badge svg{width:22px;height:22px;color:var(--txt2)}
.device.online .dev-badge{border-color:rgba(49,208,122,.4)}
.device.online .dev-badge svg{color:var(--green)}
.dev-id{min-width:0;flex:1}
.dev-name{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-top:3px}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.st-online .status-dot{background:var(--green);box-shadow:0 0 0 0 var(--green-glow);animation:pulse 2s infinite}
.st-online{color:var(--green)}
.st-busy .status-dot{background:var(--amber);box-shadow:0 0 8px rgba(245,181,68,.6)}
.st-busy{color:var(--amber)}
.st-offline .status-dot{background:var(--txt3)}
.st-offline{color:var(--txt3)}
.st-uninstalled .status-dot{background:var(--red)}
.st-uninstalled{color:var(--red)}
.st-sleep .status-dot{background:var(--sleep);animation:breathe 2.6s ease-in-out infinite}
.st-sleep{color:var(--sleep)}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
.device.asleep{opacity:.85}
.device.asleep .dev-badge{border-color:rgba(138,160,255,.4)}
.device.asleep .dev-badge svg{color:var(--sleep)}
.device.uninstalled{opacity:.72}
.device.uninstalled .dev-badge{border-color:rgba(255,93,108,.35)}
.device.uninstalled .dev-badge svg{color:var(--red)}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--green-glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dev-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:14px 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dm{min-width:0}
.dm-k{color:var(--txt3);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.dm-v{color:var(--txt);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-actions{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.dev-actions .connect{flex:1 1 90px}
.icon-btn{width:36px;flex:0 0 auto !important;padding:0 !important;display:grid;place-items:center}

/* ---------- empty states ---------- */
.empty{text-align:center;padding:56px 20px;color:var(--txt2);animation:fadeUp .3s ease both}
.empty-ic{margin-bottom:10px}
.empty-ic svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.banner svg.ic,.ctl-warn svg.ic{width:16px;height:16px;vertical-align:-3px;margin-right:5px;flex:none}
.empty h3{margin:0 0 6px;color:var(--txt);font-size:17px}
.empty p{margin:0 auto 18px;max-width:360px;font-size:13px;line-height:1.5}

/* ---------- banners / hints ---------- */
.banner{padding:12px 16px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:16px}
.banner.warn{background:rgba(245,181,68,.1);border:1px solid rgba(245,181,68,.3);color:#ffd98a}
.banner.info{background:rgba(79,140,255,.1);border:1px solid rgba(79,140,255,.3);color:#bcd2ff}
.banner.info code{background:rgba(0,0,0,.3);padding:1px 6px;border-radius:5px;font-size:12px}
.hint{color:var(--txt2);font-size:12.5px;min-height:16px;margin-bottom:12px}

/* ---------- enrollment links ---------- */
.link-list{display:flex;flex-direction:column;gap:12px}
.linkrow{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  animation:fadeUp .3s ease both;transition:border-color .16s}
.linkrow:hover{border-color:var(--line2)}
.linkrow.revoked{opacity:.5}
.link-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--panel3);border:1px solid var(--line2);flex-shrink:0}
.link-ic svg{width:20px;height:20px;color:var(--accent)}
.link-body{flex:1;min-width:0}
.link-label{font-weight:700;font-size:14px}
.link-url{color:var(--txt2);font-size:12px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.link-actions{display:flex;gap:8px;flex-shrink:0}
.tag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;background:var(--panel3);color:var(--txt3)}
.tag.revoked{background:rgba(255,93,108,.14);color:var(--red)}

/* ---------- accounts ---------- */
.acct-list{display:flex;flex-direction:column;gap:10px}
.acctrow{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;animation:fadeUp .3s ease both}
.acct-av{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#6a5cff,#4f8cff)}
.acct-name{font-weight:700}
.acct-sub{color:var(--txt3);font-size:12px;margin-top:2px}
.cred-card{background:linear-gradient(135deg,rgba(79,140,255,.14),rgba(43,91,212,.06));border:1px solid rgba(79,140,255,.35);border-radius:var(--radius);padding:18px;margin-bottom:16px;animation:pop .35s ease both}
.cred-card h4{margin:0 0 12px;font-size:14px}
.cred-grid{display:grid;grid-template-columns:auto 1fr auto;gap:10px 14px;align-items:center}
.cred-grid .ck{color:var(--txt2);font-size:12px;font-weight:600}
.cred-grid .cv{font-family:ui-monospace,Consolas,monospace;font-size:14px;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:8px 12px}
.cred-note{color:var(--txt2);font-size:12px;margin-top:12px}

/* ---------- alerts ---------- */
.alerts-conn{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:18px;max-width:620px;margin-bottom:8px}
.alerts-conn .field{margin-bottom:12px}
.alerts-help{margin-top:6px;color:var(--txt2);font-size:12.5px}
.alerts-help summary{cursor:pointer;color:var(--accent);font-weight:600}
.alerts-help ol{margin:10px 0 0;padding-left:18px;line-height:1.7}
.alerts-help code,.hint code,.banner.info code{background:rgba(0,0,0,.3);padding:1px 6px;border-radius:5px;font-size:12px}
.alerts-rules{display:flex;flex-direction:column;gap:12px;max-width:760px}
.alert-rule{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.ar-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ar-name{font-weight:700;display:flex;align-items:center;gap:8px}
.ar-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--panel3);color:var(--txt2)}
.ar-tpl{width:100%;margin-top:10px;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;color:var(--txt);padding:10px;font-size:12.5px;font-family:ui-monospace,Consolas,monospace;resize:vertical;min-height:56px}
.ar-tpl:focus{outline:none;border-color:var(--accent)}
.ar-tpl[disabled]{opacity:.5}

/* ---------- settings ---------- */
.settings-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);max-width:560px;overflow:hidden}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:none}
.set-k{color:var(--txt2);font-weight:600;font-size:13px}
.set-v{font-weight:600}

/* ===================================================================
   CONTROL OVERLAY
   =================================================================== */
.control-view{position:fixed;inset:0;background:#05070c;z-index:60;display:flex;flex-direction:column;animation:fadeIn .2s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.session-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
.sess-dot{width:9px;height:9px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.sess-name{font-weight:700}
.spacer{flex:1}
.mini-select{background:var(--panel3);color:var(--txt);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600}
.ctl-warn{background:rgba(255,93,108,.15);border:1px solid rgba(255,93,108,.4);color:#ffb3bb;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:8px;max-width:420px}
.rtc-mode{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--panel3);color:var(--txt2);border:1px solid var(--line2)}
.rtc-mode.hd{background:rgba(49,208,122,.15);border-color:rgba(49,208,122,.4);color:var(--green)}
.rtc-mode.sd{background:rgba(245,181,68,.12);border-color:rgba(245,181,68,.35);color:var(--amber)}
.session-bar .btn.on{background:rgba(79,140,255,.25);border-color:var(--accent);color:#fff}
.screen-wrap{flex:1;display:grid;place-items:center;overflow:auto;padding:14px;position:relative}
#screen{background:#000;border-radius:8px;box-shadow:var(--shadow);max-width:100%;max-height:100%;grid-area:1/1;z-index:2}
/* The WebRTC <video> is a decode-only source: its frames are painted onto the
   canvas (some GPU/driver combos decode+advance the element but never composite
   it to screen). Kept 2px & invisible so it stays live without being shown. */
#rtc-video{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
/* Synthetic cursor: only shown while the remote is blanked. It follows the
   technician's pointer, and the real browser cursor is hidden over the canvas so
   there's exactly one clean pointer in the view. */
#synth-cursor{position:absolute;left:0;top:0;z-index:3;pointer-events:none;display:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
#screen-wrap.blank #synth-cursor{display:block}
#screen-wrap.blank #screen{cursor:none}
/* toggle switch */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.switch input{display:none}
.switch .track{width:38px;height:22px;border-radius:20px;background:var(--panel3);border:1px solid var(--line2);position:relative;transition:background .18s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--txt2);transition:transform .18s,background .18s}
.switch input:checked+.track{background:rgba(79,140,255,.4);border-color:var(--accent)}
.switch input:checked+.track::after{transform:translateX(16px);background:#fff}
.sw-label{font-size:12px;font-weight:600;color:var(--txt2)}

/* ---------- terminal ---------- */
.term-dot{width:9px;height:9px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.term-host{color:var(--txt3);font-size:12px;font-family:ui-monospace,Consolas,monospace}
.term-hint{padding:8px 16px;background:rgba(79,140,255,.08);border-bottom:1px solid var(--line);color:var(--txt2);font-size:12px}
.term-wrap{flex:1;overflow:auto;background:#05070c;padding:14px 16px}
.term-out{margin:0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:1.5;color:#d3f7e0}
.term-input-row{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bg2);border-top:1px solid var(--line)}
.term-prompt{color:var(--green);font-family:ui-monospace,Consolas,monospace;font-weight:700;font-size:15px}
.term-input{flex:1;background:none;border:none;color:var(--txt);font-family:ui-monospace,Consolas,monospace;font-size:13px;padding:6px 0}
.term-input:focus{outline:none}

/* ---------- file browser ---------- */
.files-path{padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--line);font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--txt2);overflow-x:auto;white-space:nowrap}
.crumb{color:var(--accent);cursor:pointer}
.crumb:hover{text-decoration:underline}
.crumb-sep{color:var(--txt3);margin:0 4px}
.files-progress{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
.fp-bar{flex:1;height:6px;background:var(--panel3);border-radius:6px;overflow:hidden}
.fp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .15s}
#fp-text{font-size:12px;color:var(--txt2);white-space:nowrap}
.files-wrap{flex:1;overflow:auto;background:#080c14}
.files-table{width:100%;border-collapse:collapse;font-size:13px}
.files-table thead th{position:sticky;top:0;background:var(--bg2);text-align:left;padding:10px 16px;color:var(--txt3);font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line)}
.files-table td{padding:9px 16px;border-bottom:1px solid rgba(35,48,71,.5)}
.col-size,.col-mod{width:150px;color:var(--txt2)}
.col-act{width:90px;text-align:right}
.frow:hover{background:var(--panel)}
.fname{display:flex;align-items:center;gap:10px}
.fname svg{width:18px;height:18px;flex-shrink:0}
.fname.dir{color:var(--txt);cursor:pointer;font-weight:600}
.fname.dir svg{color:var(--amber)}
.fname.file svg{color:var(--txt3)}
.fname.dir:hover{color:var(--accent)}
.fact{display:inline-flex;gap:4px;justify-content:flex-end}
.fact button{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center}
.fact button svg{width:16px;height:16px}
.fact button:hover{background:var(--panel3);color:var(--txt)}
.fact button.del:hover{color:var(--red)}
.files-empty{text-align:center;padding:40px;color:var(--txt3)}

/* ---------- system overlay ---------- */
.sys-tabs{margin:0}
.sys-wrap{flex:1;overflow:auto;background:#080c14;padding:18px}
.mon-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:0 auto}
.mon-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.mon-wide{grid-column:1 / -1}
.mon-top{display:flex;align-items:center;justify-content:space-between;color:var(--txt2);font-weight:600;font-size:13px;margin-bottom:10px}
.mon-big{font-size:26px;font-weight:700;color:var(--txt)}
.spark{width:100%;height:48px;display:block}
.spark polyline{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
#mem-line{stroke:var(--green)}
.mon-sub{color:var(--txt3);font-size:12px;margin-top:8px}
.mon-disks{display:flex;flex-direction:column;gap:12px}
.disk{}
.disk-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--txt2);margin-bottom:5px}
.disk-bar{height:8px;background:var(--panel3);border-radius:6px;overflow:hidden}
.disk-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.disk-bar i.hot{background:linear-gradient(90deg,var(--amber),var(--red))}
.proc-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
.proc-search{flex:1;background:var(--panel);border:1px solid var(--line2);border-radius:8px;color:var(--txt);padding:8px 12px;font-size:13px}
.proc-search:focus{outline:none;border-color:var(--accent)}
.switch.small .track{width:34px;height:20px}
.switch.small .track::after{width:14px;height:14px}
.switch.small input:checked+.track::after{transform:translateX(14px)}
.clip-pane{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.clip-row{display:flex;gap:10px}
.clip-text{width:100%;min-height:280px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-sm);color:var(--txt);padding:14px;font-family:ui-monospace,Consolas,monospace;font-size:13px;resize:vertical}
.clip-text:focus{outline:none;border-color:var(--accent)}
.power-pane{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.power-keepawake{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.pk-title{font-weight:700;font-size:14px}
.pk-sub{color:var(--txt3);font-size:12px;margin-top:4px}
.power-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.power-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;border-radius:var(--radius);border:1px solid var(--line2);background:var(--panel3);color:var(--txt);font-weight:600;font-size:13px;cursor:pointer;transition:transform .12s,border-color .16s,background .16s}
.power-btn:hover{transform:translateY(-2px);background:#20304a;border-color:#38507a}
.power-btn .pb-ic{font-size:24px}
.power-btn.warn:hover{border-color:var(--amber);background:rgba(245,181,68,.12)}
.power-btn.danger:hover{border-color:var(--red);background:rgba(255,93,108,.12)}

/* ===================================================================
   TOASTS
   =================================================================== */
.toasts{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:10px;z-index:100}
.toast{
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-sm);
  background:var(--panel3);border:1px solid var(--line2);box-shadow:var(--shadow);
  font-size:13px;font-weight:600;min-width:220px;max-width:340px;
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2) both;
}
.toast.out{animation:toastOut .25s ease forwards}
.toast.ok{border-color:rgba(49,208,122,.4)}
.toast.ok .tdot{background:var(--green)}
.toast.err{border-color:rgba(255,93,108,.4)}
.toast.err .tdot{background:var(--red)}
.toast .tdot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(4,7,12,.7);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:90;animation:fadeIn .18s ease both}
.modal{width:min(400px,92vw);max-height:90vh;overflow-y:auto;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);animation:pop .3s ease both}
.modal h3{margin:0 0 6px;font-size:18px}
.modal p{margin:0 0 18px;color:var(--txt2);font-size:13px;line-height:1.5}
.modal .field{margin-bottom:14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .app-shell{grid-template-columns:70px 1fr}
  .side-brand span,.nav-item span,.su-meta,.side-foot .btn{display:none}
  .nav-item{justify-content:center}
  .side-user{justify-content:center}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .main{padding:18px 16px 30px}
  .device-grid{grid-template-columns:1fr}
}

/* quick-launch: open an app / URL on the remote as the logged-in user */
.ql-wrap{position:relative}
.ql-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:200px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 36px rgba(0,0,0,.5);padding:6px}
.ql-item{display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:var(--txt);font-size:13px;cursor:pointer}
.ql-item:hover{background:var(--panel3)}
.ql-sep{height:1px;background:var(--line);margin:5px 4px}