/* Fonts loaded from index.html (non-blocking parallel fetch; keeps this file synchronous-parse friendly). */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#06080d;
  --surface:#0b0e14;
  --surface2:#12161e;
  --border:#242c38;
  --text:#dfe6ee;
  --text2:#697586;
  /* Calmer teal/slate “control room” accents — readable for long Viewer sessions */
  --accent:#5eb3c9;
  --accent-strong:#4695b5;
  --accent2:#8b849c;
  --neon:rgba(94,179,201,.065);
  --green:#3cb878;
  --red:#e85d75;
  --orange:#daa04a;
  --radius:8px;
  /* Viewer — frost (lighter blur / sat = cheaper GPU composites; tweak globally) */
  --v-blur-xs:8px;
  --v-blur-sm:9px;
  --v-blur-md:10px;
  --v-blur-md2:12px;
  --v-blur-lg:13px;
  --v-blur-lg2:15px;
  --v-sat-low:106%;
  --v-sat-mid:114%;
  --v-sat-base:114%;
  --v-sat-primary:118%;
  --v-sat-on:120%;
  --v-sat-hover:118%;
  --v-sat-strong:120%;
  --v-ease:cubic-bezier(0.22,1,0.36,1);
  --v-transition-btn:border-color .2s var(--v-ease),background .2s var(--v-ease),color .2s var(--v-ease),box-shadow .2s var(--v-ease),transform .14s var(--v-ease);
}
html{
  height:100%;
  height:100dvh;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-family:'JetBrains Mono','Fira Code','Cascadia Code',ui-monospace,system-ui,sans-serif;
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -30%,rgba(94,179,201,.038),transparent 50%),
    radial-gradient(ellipse 80% 50% at 100% 50%,rgba(90,112,148,.035),transparent 45%);
  color:var(--text);
  height:100%;
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
}
/* Hidden looped panel ambient (see #panelBgPrayer in index.html) */
.panel-prayer-audio{
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:4px;
  opacity:0;
  pointer-events:none;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.18) 2px,rgba(0,0,0,.18) 4px);
  opacity:.09;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9997;
  background:linear-gradient(90deg,rgba(120,140,165,.015) 1px,transparent 1px);
  background-size:4px 100%;
  opacity:.07;
}
#app{
  display:flex;
  height:100%;
  height:100dvh;
  position:relative;
  z-index:1;
  min-width:0;
  width:100%;
}
#sidebar{
  width:220px;
  background:linear-gradient(180deg,var(--surface) 0%,#06080c 100%);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:14px 0 16px;
  padding-top:max(14px,env(safe-area-inset-top,0px));
  padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
  flex-shrink:0;
  box-shadow:4px 0 24px rgba(0,0,0,.4);
  overflow-x:hidden;
  overflow-y:auto;
  min-height:0;
  max-height:100%;
  max-height:100dvh;
  -webkit-overflow-scrolling:touch;
}
.sidebar-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin:0;
  padding:0;
  flex-shrink:0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(165deg,rgba(38,50,66,.7) 0%,rgba(16,20,28,.9) 100%);
  color:var(--text);
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.sidebar-toggle:hover{
  border-color:rgba(94,179,201,.35);
  color:var(--accent);
}
.sidebar-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(94,179,201,.45);
}
.sidebar-toggle-bars{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:18px;
}
.sidebar-toggle-bars span{
  display:block;
  height:2px;
  width:100%;
  border-radius:1px;
  background:currentColor;
  transition:transform .2s ease,opacity .2s ease;
}
body.sidebar-open .sidebar-toggle-bars span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
body.sidebar-open .sidebar-toggle-bars span:nth-child(2){opacity:0}
body.sidebar-open .sidebar-toggle-bars span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}
.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:1090;
  background:rgba(2,4,8,.62);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sidebar-backdrop[hidden]{display:none!important}
.brand{padding:0 14px 20px;border-bottom:1px solid var(--border);margin-bottom:8px}
.brand-mark{display:flex;justify-content:center;margin-bottom:10px}
.brand-logo{width:56px;height:56px;display:block;filter:drop-shadow(0 0 10px rgba(94,179,201,.22))}
.logo-ring{animation:logo-pulse 3s ease-in-out infinite;transform-origin:32px 32px}
.logo-pupil{animation:logo-blink 4s ease-in-out infinite}
.logo-bar-a{animation:bar-slide 2.8s ease-in-out infinite}
.logo-bar-b{animation:bar-slide 3.2s ease-in-out infinite reverse}
.logo-cross{animation:cross-fade 5s ease-in-out infinite}
@keyframes logo-pulse{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.03)}
}
@keyframes logo-blink{
  0%,92%,100%{opacity:1}
  94%{opacity:.35}
  96%{opacity:1}
}
@keyframes bar-slide{
  0%,100%{transform:translateX(0);opacity:.45}
  50%{transform:translateX(3px);opacity:.75}
}
@keyframes cross-fade{
  0%,100%{opacity:.35}
  50%{opacity:.65}
}
.brand-text{text-align:center}
.brand-title{
  display:block;
  font-size:17px;
  font-weight:800;
  letter-spacing:.35em;
  text-indent:.35em;
  color:var(--accent-strong);
  text-shadow:0 0 14px rgba(94,179,201,.28),2px 0 rgba(139,132,156,.85);
  line-height:1.2;
}
.brand-subtitle{
  display:block;
  font-size:22px;
  font-weight:900;
  letter-spacing:.5em;
  text-indent:.5em;
  margin-top:2px;
  background:linear-gradient(90deg,#6ec4d9,#93d4c4 45%,#9a92b8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:none;
}
/* Subdued: no pulsating halo on subtitle (easier on eyes during long Viewer use) */
@keyframes sub-glow{
  from{opacity:1}
  to{opacity:1}
}
.brand-tag{
  display:block;
  font-size:9px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text2);
  margin-top:8px;
  opacity:.85;
}
.glitch{
  position:relative;
  animation:glitch-skew 4s infinite linear alternate-reverse;
}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0;top:0;width:100%;overflow:hidden;
}
.glitch::before{
  left:2px;text-shadow:-1px 0 #a898b8;clip-path:inset(0 0 55% 0);
  animation:glitch-a 2.8s infinite linear alternate-reverse;
}
.glitch::after{
  left:-2px;text-shadow:1px 0 #5eb3c9;clip-path:inset(35% 0 0 0);
  animation:glitch-b 3.1s infinite linear alternate-reverse;
}
@keyframes glitch-skew{
  0%,86%,100%{transform:skew(0deg)}
  87%{transform:skew(-0.6deg)}
  88%{transform:skew(0.4deg)}
  89%{transform:skew(0deg)}
}
@keyframes glitch-a{
  0%,100%{transform:translate(0);opacity:.85}
  33%{transform:translate(-2px,-1px);opacity:.9}
  66%{transform:translate(1px,1px);opacity:.75}
}
@keyframes glitch-b{
  0%,100%{transform:translate(0);opacity:.8}
  25%{transform:translate(2px,-1px)}
  75%{transform:translate(-1px,2px)}
}
.nav-item{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:10px 20px;color:var(--text2);text-decoration:none;font-size:13px;transition:all .15s;letter-spacing:.04em;border-left:2px solid transparent}
.nav-item:hover{color:var(--accent);background:var(--neon)}
.nav-item.active{color:var(--accent);background:rgba(94,179,201,.06);border-left-color:var(--accent-strong);text-shadow:none}
.nav-ico{
  width:16px;
  height:16px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.72;
  color:rgba(126,210,228,.88);
  transition:opacity .15s ease, color .15s ease, filter .15s ease;
}
.nav-item:hover .nav-ico,
.nav-item.active .nav-ico{
  opacity:1;
  color:rgba(168,232,245,1);
  filter:drop-shadow(0 0 5px rgba(94,179,201,.28));
}
.nav-item-label{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .nav-count-badge{margin-left:auto}
.nav-count-badge{
  flex-shrink:0;
  min-width:1.35rem;
  height:1.35rem;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  line-height:1;
  color:#fff;
  background:#e11d48;
  box-shadow:0 0 0 1px rgba(225,29,72,.35),0 2px 8px rgba(225,29,72,.35);
  animation:nav-count-pop .28s ease-out;
}
.nav-count-badge[hidden]{display:none!important}
@keyframes nav-count-pop{
  0%{transform:scale(.72);opacity:.4}
  70%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}
/* Role-gated nav: author `display` would otherwise beat the HTML [hidden] attribute */
.nav-item[hidden],
.nav-item.nav-item--role-hidden{
  display:none!important;
}
#content{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  min-height:0;
}
#topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  padding-left:max(12px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:max(10px,env(safe-area-inset-top,0px));
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(180deg,rgba(94,179,201,.035) 0%,transparent 55%),
    linear-gradient(90deg,var(--surface),#0c1018);
  box-shadow:0 1px 0 rgba(94,179,201,.04);
  min-height:52px;
  flex-shrink:0;
}
#topbar h1{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-shadow:none;margin:0;flex-shrink:0}
.topbar-leading{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  flex:1;
  min-width:0;
  position:relative;
  z-index:2;
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  position:relative;
  z-index:5;
}
#btnLogout{
  position:relative;
  z-index:6;
  pointer-events:auto;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.topbar-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mercury-mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:5px 14px 5px 10px;
  border-radius:2px;
  border:1px solid rgba(148,163,184,.14);
  background:
    linear-gradient(165deg,rgba(18,24,34,.92) 0%,rgba(10,14,20,.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 1px 0 rgba(0,0,0,.35);
  /* Decorative only — never steal clicks from Log out / status */
  pointer-events:none;
  user-select:none;
}
.mercury-ver{
  font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(148,163,184,.72);
  padding:3px 7px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:1px;
  background:rgba(0,0,0,.28);
  line-height:1;
}
.mercury-rule{
  width:1px;
  height:14px;
  background:linear-gradient(180deg,transparent,rgba(148,163,184,.45),transparent);
  flex-shrink:0;
}
.mercury-name{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:13px;
  font-weight:650;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1;
  background:linear-gradient(100deg,#e8eef5 0%,#9fb4c8 42%,#5eb3c9 78%,#c5d4e0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
@media (max-width:720px){
  .mercury-mark{padding:4px 10px 4px 8px;gap:8px}
  .mercury-name{font-size:11px;letter-spacing:.16em}
  .mercury-ver{font-size:9px;letter-spacing:.14em;padding:2px 5px}
}
.topbar-a11y-wrap{display:flex;align-items:center}
.a11y-tracker-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 14px 5px 9px;margin:0;border-radius:999px;
  font-family:inherit;
  font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(165deg,rgba(38,50,66,.65) 0%,rgba(16,20,28,.85) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 12px rgba(0,0,0,.28);
  color:rgba(224,231,239,.82);
  transition:border-color .18s ease,box-shadow .18s ease,color .18s ease,opacity .18s ease;
}
.a11y-tracker-pill:disabled{
  opacity:.52;
  cursor:not-allowed;
  pointer-events:none;
  filter:grayscale(.15);
}
.a11y-tracker-pill:not(:disabled):hover{
  border-color:rgba(94,179,201,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 20px rgba(94,179,201,.08);
}
.a11y-tracker-pill:not(:disabled):active{transform:scale(.985)}
.a11y-tracker-body{
  display:inline-flex;align-items:center;gap:7px;
}
.a11y-tracker-name{
  font-size:9px;letter-spacing:.16em;
  color:rgba(224,231,239,.58);
  font-weight:600;
}
.a11y-tracker-state{
  font-size:11px;font-weight:800;letter-spacing:.12em;
  min-width:1.75em;text-align:center;
}
.a11y-tracker-led{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:rgba(110,120,135,.55);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
.a11y-tracker-pill.a11y-tracker--on{
  border-color:rgba(110,196,207,.48);
  color:#c8f4fa;
}
.a11y-tracker-pill.a11y-tracker--on .a11y-tracker-led{
  background:radial-gradient(circle at 32% 32%,#b8f6ff,#42a8b8);
  box-shadow:0 0 12px rgba(110,196,207,.5);
}
.a11y-tracker-pill.a11y-tracker--off{
  border-color:rgba(232,145,115,.4);
  color:#f2cdc0;
}
.a11y-tracker-pill.a11y-tracker--off .a11y-tracker-led{
  background:rgba(195,95,75,.55);
  box-shadow:none;
}
.a11y-tracker-pill.a11y-tracker--na .a11y-tracker-led{
  background:rgba(100,105,118,.4);
}
.btn-logout{border-color:rgba(255,68,102,.35);color:var(--red);background:rgba(255,68,102,.08)}
.btn-logout:hover{border-color:var(--red);color:#fff;background:rgba(255,68,102,.22)}
.status-badge{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:500}
.status-badge.online{background:rgba(34,197,94,.15);color:var(--green)}
.status-badge.connecting{background:rgba(218,160,74,.15);color:var(--orange)}
.status-badge.offline{background:rgba(239,68,68,.15);color:var(--red)}
.view{display:none;flex:1;overflow:auto;padding:20px}
.view.active{display:flex;flex-direction:column}
.view[hidden],
.view.active[hidden]{
  display:none!important;
}
#viewerView.view.active{
  padding:0;
  overflow:hidden;
  min-height:0;
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
}
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.agents-toolbar{margin-bottom:14px}
.agent-search-input{display:block;width:100%;max-width:420px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text);font-size:13px}
.agent-search-input::placeholder{color:var(--text2);opacity:.85}
.agent-grid-empty{color:var(--text2);padding:56px 24px;text-align:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase;grid-column:1/-1;border:1px dashed var(--border);border-radius:12px;background:rgba(0,0,0,.2)}
.agent-recovery-code-box{margin:12px 0;padding:14px 16px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid var(--border);font-size:14px;word-break:break-all;user-select:all}
.agent-recovery-code-box code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--text)}
.agent-recovery-copy-status{color:#8fd4a4!important}
.agent-recovery-input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.agent-set-pin-old-wrap{margin-bottom:0}
.agent-card{
  position:relative;
  background:linear-gradient(155deg,rgba(12,16,24,.98) 0%,var(--surface) 42%,rgba(6,8,12,.99) 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:0;
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,border-color .2s ease;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 1px 0 rgba(255,255,255,.04) inset,
    0 14px 42px rgba(0,0,0,.42);
  overflow:hidden;
}
.agent-card:hover{
  transform:translateY(-3px);
  border-color:rgba(94,179,201,.28);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 1px 0 rgba(255,255,255,.06) inset,
    0 20px 56px rgba(0,0,0,.5),
    0 0 40px rgba(94,179,201,.06);
}
.agent-card.selected{
  border-color:rgba(94,179,201,.4);
  box-shadow:
    0 0 0 1px rgba(94,179,201,.12) inset,
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 52px rgba(0,0,0,.48),
    0 0 48px rgba(94,179,201,.1);
}
.agent-card-media{padding:14px 14px 0}
.agent-card-preview-frame{
  position:relative;
  margin:0 auto;
  max-width:140px;
  aspect-ratio:9/19.5;
  border-radius:18px;
  background:linear-gradient(165deg,#050608 0%,#121820 50%,#0a0c10 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 3px rgba(0,0,0,.55),
    0 12px 32px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.agent-card-preview-frame::before{
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:36%;
  height:14px;
  background:#000;
  border-radius:0 0 10px 10px;
  z-index:4;
  opacity:.85;
}
.agent-card-preview-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  /* No transition: rapid src swaps were re-triggering a fade every poll/frame (visible glitch). */
  transition:none;
  z-index:2;
}
.agent-card-preview-img.is-visible{opacity:1}
.agent-card-preview-frame--dim .agent-card-preview-img{filter:brightness(.35) contrast(3) saturate(2)}
.agent-card-preview-placeholder{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px;
  background:linear-gradient(160deg,rgba(94,179,201,.04) 0%,transparent 45%,rgba(160,140,175,.05) 100%);
  transition:opacity .3s ease;
}
.agent-card--previewing .agent-card-preview-placeholder{opacity:0;pointer-events:none}
.agent-card-preview-glyph{
  width:36px;
  height:56px;
  border-radius:8px;
  border:2px solid rgba(94,179,201,.22);
  box-shadow:0 0 20px rgba(94,179,201,.08),inset 0 0 12px rgba(94,179,201,.06);
  position:relative;
}
.agent-card-preview-glyph::after{
  content:"";
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:3px;
  border-radius:2px;
  background:rgba(255,255,255,.12);
}
.agent-card--online .agent-card-preview-glyph{
  border-color:rgba(94,179,201,.35);
  animation:agent-glyph-pulse 2.8s ease-in-out infinite;
}
@keyframes agent-glyph-pulse{
  0%,100%{box-shadow:0 0 16px rgba(94,179,201,.1),inset 0 0 10px rgba(94,179,201,.05)}
  50%{box-shadow:0 0 28px rgba(94,179,201,.2),inset 0 0 14px rgba(94,179,201,.1)}
}
.agent-card--offline .agent-card-preview-glyph{
  border-color:rgba(255,68,102,.25);
  opacity:.45;
  animation:none;
}
.agent-card-preview-label{
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text2);
  text-align:center;
  line-height:1.45;
  max-width:100%;
}
.agent-card--offline .agent-card-preview-label{color:rgba(255,100,120,.55)}
.agent-card--keyguard-on .agent-card-conn-sub{color:rgba(255,200,120,.85)}
.agent-card-live-pill{
  position:absolute;
  top:8px;
  right:8px;
  z-index:5;
  font-size:8px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:20px;
  color:#0d141c;
  background:linear-gradient(120deg,#6aa8bc,#5a93a8);
  box-shadow:0 1px 6px rgba(8,16,22,.35);
}
.agent-card-ribbon{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  margin-bottom:4px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.05);
}
.agent-conn-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 12px currentColor;
}
.agent-conn-dot--on{
  background:var(--green);
  color:var(--green);
  animation:conn-dot-breathe 2.2s ease-in-out infinite;
}
@keyframes conn-dot-breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.75;transform:scale(.92)}
}
.agent-conn-dot--off{
  background:var(--red);
  color:var(--red);
  opacity:.65;
}
.agent-card-ribbon-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.agent-card-conn-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text);
}
.agent-card-conn-sub{font-size:10px;color:var(--text2);letter-spacing:.06em}
.agent-card--offline .agent-card-conn-label{color:rgba(255,120,130,.85)}
.agent-health{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 14px 12px;
  padding:10px 11px;
  border-radius:10px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.05);
}
.agent-health-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.agent-health-caption{
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text2);
}
.agent-health-score{
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:rgba(168,232,245,.95);
  letter-spacing:.04em;
}
.agent-health-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.agent-health-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 7px 3px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:650;
  letter-spacing:.04em;
  border:1px solid transparent;
  line-height:1.2;
}
.agent-health-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.agent-health-chip--ok{
  color:rgba(180,245,210,.95);
  background:rgba(46,160,110,.14);
  border-color:rgba(46,160,110,.28);
}
.agent-health-chip--ok .agent-health-dot{
  background:var(--green);
  box-shadow:0 0 8px rgba(46,160,110,.55);
}
.agent-health-chip--off{
  color:rgba(224,231,239,.45);
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
}
.agent-health-chip--off .agent-health-dot{
  background:rgba(255,255,255,.22);
}
.agent-card--offline .agent-health{opacity:.88}
.viewer-offline-banner{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-shrink:0;
  margin:10px 12px 0;
  padding:11px 14px;
  border-radius:10px;
  border:1px solid rgba(255,120,130,.28);
  background:linear-gradient(135deg,rgba(80,18,28,.55),rgba(28,12,18,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  z-index:5;
}
.viewer-offline-banner[hidden]{display:none!important}
#viewerView > #viewerContainer{flex:1;min-height:0}
.viewer-offline-banner-dot{
  width:9px;height:9px;border-radius:50%;margin-top:4px;flex-shrink:0;
  background:var(--red);box-shadow:0 0 10px rgba(255,80,100,.55);
  animation:conn-dot-breathe 1.6s ease-in-out infinite;
}
.viewer-offline-banner-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.viewer-offline-banner-title{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,180,190,.95);
}
.viewer-offline-banner-text{font-size:12px;line-height:1.45;color:rgba(224,231,239,.82)}
.builder-history-panel{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);
}
.builder-history-head{margin-bottom:12px}
.builder-history-title{
  margin:0 0 4px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text);
}
.builder-history-hint{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--text2);
}
.builder-history-empty{
  margin:0;
  font-size:12px;
  color:var(--text2);
}
.builder-history-empty[hidden]{display:none!important}
.builder-history-list{display:flex;flex-direction:column;gap:8px}
.builder-history-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.22);
}
.builder-history-meta{flex:1;min-width:160px}
.builder-history-name{display:block;font-size:13px;font-weight:650;color:var(--text)}
.builder-history-sub{display:block;margin-top:2px;font-size:11px;color:var(--text2);word-break:break-all}
.builder-history-actions{display:flex;flex-wrap:wrap;gap:6px}
.builder-history-logo-reuse{
  margin:8px 0 0;
  font-size:11px;
  color:rgba(168,232,245,.9);
}
.builder-history-logo-reuse[hidden]{display:none!important}
.agent-card .agent-header{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  margin:0 14px 10px;
  padding-top:4px;
  gap:10px;
  position:relative;
  z-index:4;
}
.agent-header-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.agent-name-line{
  font-weight:650;
  font-size:14px;
  line-height:1.28;
  color:var(--text);
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.agent-id-sub{
  font-size:10px;
  opacity:.78;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.agent-header-tools{
  display:flex;
  align-items:flex-start;
  gap:6px;
  flex-shrink:0;
  margin-left:auto;
}
.agent-menu-btn{
  width:34px;
  height:34px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.22);
  color:var(--text2);
  cursor:pointer;
  font-size:20px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  transition:border-color .15s,background .15s,color .15s;
}
.agent-menu-btn:hover{
  border-color:rgba(94,179,201,.38);
  color:var(--accent);
  background:rgba(94,179,201,.09);
}
.agent-card--pin-protected .agent-menu-btn{
  border-color:rgba(212,176,104,.3);
}
.agent-card-menu-portal{
  position:fixed;
  z-index:99990;
  min-width:208px;
  max-width:calc(100vw - 16px);
  box-sizing:border-box;
  padding:6px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(165deg,rgba(18,22,30,.99),rgba(8,10,14,.99));
  box-shadow:0 20px 52px rgba(0,0,0,.58),0 0 0 1px rgba(0,0,0,.45) inset;
}
.agent-card-menu-portal[hidden]{display:none!important}
.agent-card-menu-item{
  display:block;
  width:100%;
  text-align:left;
  margin:0;
  padding:10px 12px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .12s;
}
.agent-card-menu-item:hover{background:rgba(94,179,201,.12)}
.agent-card-menu-item.vbtn{display:inline-flex;width:100%;align-items:center;gap:8px}
.agent-card-menu-item--danger{color:#f0a0a8}
.agent-card-menu-item--danger:hover{background:rgba(255,68,102,.14)}
.agent-pref-modal .modal-dialog.modal-agent-pref{max-width:420px}
.agent-pref-head h2{margin:0;font-size:1.12rem;font-weight:700}
.agent-pref-body{padding-top:6px}
.agent-pref-sub{margin:0 0 10px;font-size:12px;color:var(--text2);line-height:1.45;word-break:break-all}
.agent-pref-label{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin:14px 0 6px}
.agent-pref-input{width:100%}
.agent-pref-hint{margin:8px 0 0;font-size:11px;color:var(--text2);opacity:.88;line-height:1.45}
.agent-pref-err{margin:10px 0 0;font-size:12px;color:#f0a0a8}
.agent-pref-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;flex-wrap:wrap}
.agent-meta-id{font-size:11px;opacity:.82;margin-top:4px;word-break:break-all}
.agent-card .agent-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:30px;
  height:21px;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.32);
}
.agent-flag-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.32);
}
.agent-flag-fallback{font-size:19px;line-height:1;display:inline-flex}
.agent-loc-flag{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  flex-shrink:0;
  margin-right:6px;
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
}
.agent-loc-flag-img{
  display:block;
  width:24px;
  height:auto;
  max-height:15px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.28);
}
.agent-loc-flag-emoji{font-size:14px;line-height:1;display:inline-flex}
.agent-loc-flag--nomap{
  margin-right:4px;
  border-radius:0;
  box-shadow:none;
  font-size:14px;
  line-height:1;
}
.agent-loc-text{min-width:0}
.agent-meta-loc{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin:4px 0;line-height:1.45}
.agent-open-tab{background:rgba(0,0,0,.25);border:1px solid var(--border);color:var(--text2);border-radius:8px;padding:4px 9px;cursor:pointer;font-size:13px;line-height:1;flex-shrink:0;transition:border-color .15s,color .15s}
.agent-open-tab:hover{border-color:var(--accent);color:var(--accent);background:rgba(94,179,201,.06)}
.agent-card .agent-device{font-weight:500;color:var(--text)}
.agent-card .agent-loc{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;min-height:1.35em}
.mono{font-family:ui-monospace,monospace;font-size:11px}
.agent-card .agent-status{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(34,197,94,.4)}
.agent-card .agent-status.offline{background:var(--red);box-shadow:0 0 8px rgba(255,68,102,.35)}
.agent-card .agent-detail{font-size:11px;color:var(--text2);margin-top:3px;padding:0 14px 14px}

/* Viewer layout: toolbar strip (col 1) | live screen (col 2) | ops sidebar far right (col 3) */
#viewerContainer{
  display:grid;
  grid-template-columns:minmax(300px,max-content) minmax(0,1fr) minmax(232px,26vw);
  grid-template-rows:1fr;
  flex:1;
  width:100%;
  max-width:100%;
  gap:0;
  height:100%;
  min-height:0;
  overflow:hidden;
  align-items:stretch;
}

.stream-controls-wrap{
  display:flex;
  flex-direction:row;
  flex-shrink:0;
  align-items:stretch;
  min-width:0;
  min-height:0;
  border-right:1px solid var(--border);
}

/* Remote input column (inside toolbar strip) */
.lock-keyboard-bar{
  width:172px;min-width:168px;max-width:200px;
  background:linear-gradient(180deg,#0c1018 0%,var(--surface) 100%);
  border-right:1px solid var(--border);
  padding:10px 10px 12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0
}
.lock-keyboard-bar .ctrl-title{margin-top:0}
.lock-kb-help{font-size:9px;line-height:1.4;color:var(--text2);margin:0;padding:0 1px}
.lock-kb-help strong{color:var(--accent);font-weight:600}
.lock-kb-hint{font-size:9px;line-height:1.35;color:var(--orange);letter-spacing:.04em;margin:0;padding:0 2px}
.lock-kb-input{
  width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);
  padding:8px 10px;border-radius:var(--radius);font-size:12px;font-family:inherit
}
.lock-kb-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px rgba(94,179,201,.2)}
.lock-kb-check{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text2);cursor:pointer;user-select:none}
.lock-kb-check input{accent-color:var(--accent)}
.lock-kb-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lock-kb-num{width:72px;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:5px 8px;border-radius:6px;font-size:11px}
.lock-kb-send{width:100%}
.lock-kb-mini{display:flex;gap:6px}
.lock-kb-mini .btn{flex:1}

.pattern-unlock-block{margin-top:4px;padding-top:8px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.pattern-unlock-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--accent);letter-spacing:.06em}
.pattern-pad{
  position:relative;width:100%;max-width:136px;aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;
  border-radius:10px;background:rgba(0,0,0,.22);outline:none;box-shadow:inset 0 0 0 1px var(--border)
}
.pattern-pad:focus-visible{box-shadow:inset 0 0 0 1px var(--border),0 0 0 2px rgba(94,179,201,.35)}
.pattern-pad--full{cursor:default}
.pattern-pad--full .pattern-dot:not(.pattern-dot--used){opacity:.45}
.pattern-lines-svg{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible
}
.pattern-poly{
  stroke:rgba(94,179,201,.92);stroke-width:3.2;filter:url(#patternGlow);opacity:.95;vector-effect:non-scaling-stroke
}
.pattern-rubber{
  stroke:rgba(160,140,175,.75);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:4 3;opacity:.9
}
.pattern-grid{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:0;width:100%;height:100%;padding:6px;box-sizing:border-box
}
.pattern-dot{
  position:relative;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;
  cursor:pointer;border-radius:50%;min-width:0;min-height:0;transition:transform .12s ease
}
.pattern-dot-core{
  width:11px;height:11px;border-radius:50%;background:var(--surface2);border:2px solid rgba(94,179,201,.35);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);transition:background .15s,border-color .15s,transform .15s,box-shadow .15s
}
.pattern-dot:hover .pattern-dot-core{border-color:rgba(94,179,201,.65);transform:scale(1.08)}
.pattern-dot:active{transform:scale(.94)}
.pattern-dot--used .pattern-dot-core{
  background:rgba(94,179,201,.25);border-color:rgba(94,179,201,.85);
  box-shadow:0 0 10px rgba(94,179,201,.35),inset 0 0 6px rgba(94,179,201,.15)
}
.pattern-dot--last .pattern-dot-core{
  background:rgba(160,140,175,.35);border-color:rgba(160,140,175,.9);
  box-shadow:0 0 12px rgba(160,140,175,.45)
}
.pattern-seq{font-size:10px;color:var(--text2);font-family:ui-monospace,monospace;min-height:16px;word-break:break-all;line-height:1.35}
.pattern-actions{display:flex;gap:5px;align-items:stretch}
.pattern-actions--row .btn{flex:1;font-size:9px;padding:6px 4px;white-space:nowrap}
.pattern-actions .btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.pattern-hint{font-size:8px;line-height:1.4;color:var(--text2);margin:0;padding:0 1px}
.pattern-hint--warn{color:var(--orange);opacity:.9}
.pattern-saved-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.pattern-saved-row .btn{flex:1;min-width:0;font-size:9px;padding:6px 4px}
.pattern-saved-apply{font-weight:600}
.pattern-saved-status{font-size:9px;color:var(--green);font-family:ui-monospace,monospace;margin:0;line-height:1.3}
.pattern-lock-hint{font-size:8px;line-height:1.35;color:var(--accent);margin:0;padding:0 1px;opacity:.95}

/* Stream + display controls (middle of toolbar strip) */
#streamControls{
  width:150px;min-width:142px;flex:1;
  background:var(--surface);
  padding:12px 10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0
}
.ctrl-title{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--accent);letter-spacing:1px;margin-top:4px}
.ctrl-label{font-size:11px;color:var(--text2);margin-top:2px}
.ctrl-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}
.ctrl-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}
.ctrl-val{font-size:11px;color:var(--text2);font-family:monospace}
.ctrl-sep{height:1px;background:var(--border);margin:4px 0}
.ctrl-stats{font-size:11px;color:var(--green);font-family:monospace;margin-top:auto}

/* Screen — phone-like presentation */
#screenContainer{
  grid-column:2;
  grid-row:1;
  background:radial-gradient(ellipse at center,#0a0c12 0%,#060810 70%,#040608 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:0;
  padding:clamp(8px,1.5vh,16px);
}
#screenImg{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:none;
  image-rendering:auto;
  will-change:contents;
  touch-action:none;
  border-radius:clamp(6px,1vw,14px);
  box-shadow:0 4px 24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  /* Lift OLED / dark IME and launcher thumbnails so ops can see structure without clipping highlights */
  filter:brightness(1.1) contrast(1.06) saturate(1.05);
}
#noAgent{color:var(--text2);font-size:14px}
#navButtons{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:14px;z-index:10}
.nav-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:rgba(20,20,30,.85);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;backdrop-filter:blur(8px)}
.nav-btn:hover{background:var(--accent);border-color:var(--accent)}

/* Right sidebar — explicit column 3, hug the right edge of the viewer */
#viewerSidebar{
  grid-column:3;
  grid-row:1;
  justify-self:stretch;
  background:var(--surface);border-left:1px solid var(--border);
  display:flex;flex-direction:column;padding:12px;gap:8px;overflow-y:auto;min-width:232px;min-height:0
}

/* Toolbar strip — first grid column only */
#viewerContainer > .stream-controls-wrap{grid-column:1;grid-row:1;min-width:0}

@media (max-width:1100px){
  #viewerContainer{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:minmax(180px,38vh) minmax(0,1fr);
  }
  #viewerContainer > .stream-controls-wrap{
    grid-column:1/-1;
    grid-row:1;
    max-height:38vh;
    overflow:auto;
  }
  #screenContainer{grid-column:1;grid-row:2;min-height:200px}
  #viewerSidebar{
    grid-column:2;
    grid-row:2;
    border-left:1px solid var(--border);
    min-width:0;
  }
}
@media (max-width:720px){
  #viewerContainer{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(200px,45vh) auto;
  }
  #viewerContainer > .stream-controls-wrap{
    grid-column:1;
    grid-row:1;
    max-height:none;
    flex-wrap:wrap;
  }
  #screenContainer{grid-column:1;grid-row:2;min-height:220px}
  #viewerSidebar{
    grid-column:1;
    grid-row:3;
    border-left:none;
    border-top:1px solid var(--border);
    max-height:min(40vh,360px);
  }
}
#agentMeta{font-size:12px;color:var(--text2)}
#agentMeta .agent-meta-device{font-size:13px;color:var(--text);font-weight:500;margin:4px 0}
#viewerActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
#viewerActions .btn{text-align:left}

/* Panel-wide action icons — crisp line symbols before labels */
.btn.vbtn,
.payloads-filter-btn.vbtn,
.agent-card-menu-item.vbtn{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  text-align:left;
}
#viewerView #streamControls .btn.vbtn{
  width:100%;
}
.vico{
  width:15px;
  height:15px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:rgba(126,210,228,.95);
  opacity:.95;
  filter:drop-shadow(0 0 4px rgba(94,179,201,.18));
  transition:color .15s ease, opacity .15s ease, filter .15s ease;
}
.btn:hover .vico,
.payloads-filter-btn:hover .vico,
.agent-card-menu-item:hover .vico{
  color:rgba(168,232,245,1);
  opacity:1;
  filter:drop-shadow(0 0 6px rgba(94,179,201,.32));
}
.btn.btn-primary .vico,
.btn.btn-toggle.active .vico,
.payloads-filter-btn.active .vico{
  color:rgba(186,240,250,1);
}
.btn.btn-danger .vico,
.agent-card-menu-item--danger .vico{
  color:rgba(255,170,170,.95);
}
.btn:disabled .vico,
.btn[disabled] .vico{
  filter:none;
  opacity:.55;
}
.vbtn-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.2;
}
#btnScreenStream .vico,
#btnStopScreen .vico{
  fill:currentColor;
  stroke:none;
}
.cryptor-process-btn.vbtn,
.cryptor-download-btn.vbtn,
.builder-submit.vbtn,
.builder-download-btn.vbtn{
  justify-content:center;
}
#viewerActions .ctrl-title,
#viewerActions .viewer-actions-help{grid-column:1/-1}
#viewerActions .viewer-actions-help{font-size:12px;margin:0 0 8px;line-height:1.45;color:var(--text2)}
#viewerActions .ctrl-sep{grid-column:1/-1}
/*
 * Sidebar actions — one disabled look for all (same as Deactivate admin when inactive).
 * Must beat #viewerView .btn:hover or granted-permission buttons still look clickable.
 */
#viewerView #viewerActions .btn:disabled,
#viewerView #viewerActions .btn[disabled]{
  opacity:.45 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
  filter:grayscale(.35);
  border-color:rgba(255,255,255,.05) !important;
  color:rgba(224,231,239,.5) !important;
  background:
    linear-gradient(165deg,
      rgba(30,40,52,.52) 0%,
      rgba(18,24,32,.58) 100%) !important;
  backdrop-filter:blur(var(--v-blur-xs)) saturate(.88) !important;
  -webkit-backdrop-filter:blur(var(--v-blur-xs)) saturate(.88) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.32),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 0 0 1px rgba(94,179,201,.06) !important;
}
#viewerView #viewerActions .btn:disabled:hover,
#viewerView #viewerActions .btn[disabled]:hover,
#viewerView #viewerActions .btn:disabled:focus-visible,
#viewerView #viewerActions .btn[disabled]:focus-visible{
  opacity:.45 !important;
  filter:grayscale(.35) !important;
  border-color:rgba(255,255,255,.05) !important;
  color:rgba(224,231,239,.5) !important;
  background:
    linear-gradient(165deg,
      rgba(30,40,52,.52) 0%,
      rgba(18,24,32,.58) 100%) !important;
  backdrop-filter:blur(var(--v-blur-xs)) saturate(.88) !important;
  -webkit-backdrop-filter:blur(var(--v-blur-xs)) saturate(.88) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.32),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 0 0 1px rgba(94,179,201,.06) !important;
}

#viewerActions #btnSelfUninstall,
#viewerActions #btnHideApp,
#viewerActions #btnShowApp{grid-column:1/-1}

/* Viewer — frosted glass ops surface (muted, high-end console / productivity) */
#viewerView .btn{
  position:relative;
  background:
    linear-gradient(165deg,
      rgba(46,62,82,.38) 0%,
      rgba(22,30,42,.52) 45%,
      rgba(14,18,26,.58) 100%);
  backdrop-filter:blur(var(--v-blur-md)) saturate(var(--v-sat-base));
  -webkit-backdrop-filter:blur(var(--v-blur-md)) saturate(var(--v-sat-base));
  border:1px solid rgba(255,255,255,.078);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.095),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 4px rgba(0,0,0,.38),
    0 0 0 1px rgba(94,179,201,.078);
  color:rgba(224,231,239,.93);
  font-weight:500;
  letter-spacing:.025em;
  transition:var(--v-transition-btn);
}
#viewerView .btn:hover{
  background:
    linear-gradient(165deg,
      rgba(58,76,96,.42) 0%,
      rgba(32,44,58,.55) 50%,
      rgba(20,26,34,.62) 100%);
  backdrop-filter:blur(var(--v-blur-md2)) saturate(var(--v-sat-hover));
  -webkit-backdrop-filter:blur(var(--v-blur-md2)) saturate(var(--v-sat-hover));
  border-color:rgba(255,255,255,.112);
  color:var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 2px 8px rgba(0,0,0,.42),
    0 0 0 1px rgba(94,179,201,.22);
}
#viewerView .btn:active{
  transform:translateY(0);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(94,179,201,.14);
}
#viewerView .btn:focus-visible{
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.095),
    0 0 0 2px rgba(94,179,201,.42),
    0 2px 10px rgba(0,0,0,.38);
}

#viewerView .btn.btn-primary{
  background:
    linear-gradient(165deg,
      rgba(90,154,174,.74) 0%,
      rgba(52,108,132,.82) 40%,
      rgba(38,84,104,.88) 100%) !important;
  backdrop-filter:blur(var(--v-blur-xs)) saturate(var(--v-sat-primary)) !important;
  -webkit-backdrop-filter:blur(var(--v-blur-xs)) saturate(var(--v-sat-primary)) !important;
  border:1px solid rgba(206,238,246,.38) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    inset 0 -1px 1px rgba(10,42,54,.42),
    0 1px 4px rgba(0,26,42,.52),
    0 0 0 1px rgba(94,179,201,.35) !important;
  color:#050a0e !important;
  font-weight:600;
  letter-spacing:.035em;
  text-shadow:0 1px 0 rgba(255,255,255,.06);
}
#viewerView .btn.btn-primary:hover{
  background:
    linear-gradient(165deg,
      rgba(102,168,188,.82) 0%,
      rgba(58,120,146,.88) 50%,
      rgba(42,94,118,.93) 100%) !important;
  border-color:rgba(220,244,252,.52) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -1px 1px rgba(12,48,62,.42),
    0 2px 10px rgba(0,38,62,.52),
    0 0 0 1px rgba(142,206,226,.43) !important;
  color:#040708 !important;
}

#viewerView .btn.btn-danger{
  background:
    linear-gradient(165deg,
      rgba(198,74,94,.62) 0%,
      rgba(142,48,62,.74) 50%,
      rgba(118,42,54,.82) 100%) !important;
  backdrop-filter:blur(var(--v-blur-sm)) saturate(var(--v-sat-low)) !important;
  -webkit-backdrop-filter:blur(var(--v-blur-sm)) saturate(var(--v-sat-low)) !important;
  border:1px solid rgba(255,210,218,.34) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.2),
    inset 0 -1px 1px rgba(62,24,34,.52),
    0 1px 6px rgba(48,14,26,.54),
    0 0 0 1px rgba(226,132,154,.38) !important;
  color:rgba(255,250,251,.98) !important;
  text-shadow:0 -1px 1px rgba(0,0,0,.35);
}
#viewerView .btn.btn-danger:hover{
  background:
    linear-gradient(165deg,
      rgba(214,94,114,.74) 0%,
      rgba(162,62,82,.82) 50%,
      rgba(138,54,70,.89) 100%) !important;
  border-color:rgba(255,230,238,.52) !important;
  opacity:1 !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.26),
    0 2px 10px rgba(56,28,38,.62),
    0 0 0 1px rgba(246,154,174,.52) !important;
}

#viewerView .btn.btn-toggle:not(.active){
  background:
    linear-gradient(165deg,
      rgba(40,54,72,.44) 0%,
      rgba(22,30,42,.54) 100%) !important;
  backdrop-filter:blur(var(--v-blur-sm)) saturate(var(--v-sat-mid)) !important;
  -webkit-backdrop-filter:blur(var(--v-blur-sm)) saturate(var(--v-sat-mid)) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 0 0 1px rgba(94,179,201,.068) !important;
  color:var(--text2) !important;
  font-weight:500;
}
#viewerView .btn.btn-toggle:not(.active):hover{
  border-color:rgba(255,255,255,.1) !important;
  color:var(--text) !important;
  background:
    linear-gradient(165deg,
      rgba(56,74,94,.52) 0%,
      rgba(34,42,54,.62) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(94,179,201,.26) !important;
}
#viewerView .btn.btn-toggle.active{
  background:
    linear-gradient(165deg,
      rgba(72,144,164,.54) 0%,
      rgba(52,118,138,.62) 50%,
      rgba(40,94,118,.74) 100%) !important;
  backdrop-filter:blur(var(--v-blur-xs)) saturate(var(--v-sat-on)) !important;
  -webkit-backdrop-filter:blur(var(--v-blur-xs)) saturate(var(--v-sat-on)) !important;
  border:1px solid rgba(194,238,248,.42) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.26),
    inset 0 -1px 2px rgba(12,62,74,.52),
    0 0 0 1px rgba(120,206,226,.52) !important;
  color:#daf4f9 !important;
  font-weight:600;
}
#viewerView .btn.btn-toggle.active:hover{
  background:
    linear-gradient(165deg,
      rgba(86,164,182,.62) 0%,
      rgba(62,136,158,.74) 100%) !important;
  border-color:rgba(224,246,254,.53) !important;
  color:#effcfe !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.3),
    0 2px 8px rgba(20,108,138,.52),
    0 0 0 1px rgba(154,226,246,.62) !important;
}

/* Floating navigation — thicker frost over live screen */
#viewerView .nav-btn{
  background:
    radial-gradient(ellipse at 38% -10%,rgba(120,172,188,.52) 0%,transparent 55%),
    linear-gradient(165deg,rgba(28,42,54,.62) 0%,rgba(16,28,42,.74) 100%);
  backdrop-filter:blur(var(--v-blur-lg)) saturate(var(--v-sat-base));
  -webkit-backdrop-filter:blur(var(--v-blur-lg)) saturate(var(--v-sat-base));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 2px rgba(0,28,54,.62),
    0 2px 14px rgba(0,14,42,.72),
    0 0 0 1px rgba(94,179,201,.42);
  color:rgba(230,237,246,.93);
}
#viewerView .nav-btn:hover{
  background:
    radial-gradient(ellipse at 38% -10%,rgba(140,198,218,.62) 0%,transparent 55%),
    linear-gradient(165deg,rgba(46,94,126,.74) 0%,rgba(28,70,106,.76) 100%);
  backdrop-filter:blur(var(--v-blur-lg2)) saturate(var(--v-sat-strong));
  -webkit-backdrop-filter:blur(var(--v-blur-lg2)) saturate(var(--v-sat-strong));
  border-color:rgba(255,255,255,.2);
  color:#f8fbfd;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 3px 16px rgba(8,104,154,.72),
    0 0 0 1px rgba(154,226,246,.72);
}

#viewerView .ctrl-slider{
  border-radius:3px;
  background:
    linear-gradient(180deg,rgba(94,179,201,.16),rgba(32,54,74,.72));
  box-shadow:inset 0 1px 2px rgba(0,12,42,.74);
}
#viewerView .ctrl-slider::-webkit-slider-thumb{
  width:14px;height:14px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.72) 0%,rgba(148,216,226,.94) 40%,rgba(94,169,184,.94) 100%);
  box-shadow:
    0 2px 6px rgba(0,20,62,.74),
    inset 0 -1px 2px rgba(0,74,126,.72),
    0 0 0 1px rgba(94,179,201,.72);
}
#viewerView .ctrl-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.72) 0%,rgba(148,216,226,.94) 40%,rgba(94,169,184,.94) 100%);
  box-shadow:
    0 2px 6px rgba(0,20,62,.74),
    inset 0 -1px 2px rgba(0,74,126,.72),
    0 0 0 1px rgba(94,179,201,.72);
  cursor:pointer;
}

/* Viewer — accessibility: honour less motion / less transparency */
@media (prefers-reduced-motion:reduce){
  #viewerView .btn,
  #viewerView .nav-btn,
  #viewerView .ctrl-slider{
    transition-duration:.01ms!important;
  }
}
@media (prefers-reduced-transparency:reduce){
  #viewerView .btn,
  #viewerView .btn:hover,
  #viewerView .btn.btn-primary,
  #viewerView .btn.btn-primary:hover,
  #viewerView .btn.btn-danger,
  #viewerView .btn.btn-danger:hover,
  #viewerView .btn.btn-toggle:not(.active),
  #viewerView .btn.btn-toggle:not(.active):hover,
  #viewerView .btn.btn-toggle.active,
  #viewerView .btn.btn-toggle.active:hover,
  #viewerView .nav-btn,
  #viewerView .nav-btn:hover{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  #viewerView .btn{
    background:linear-gradient(165deg,#222c3a 0%,#171e2a 48%,#12171f 100%);
  }
  #viewerView .btn:hover{
    background:linear-gradient(165deg,#2a3545 0%,#1e2835 52%,#181f2a 100%);
  }
  #viewerView .btn.btn-primary{
    background:linear-gradient(165deg,#4f7f92 0%,#3a6478 42%,#2d5163 100%)!important;
  }
  #viewerView .btn.btn-primary:hover{
    background:linear-gradient(165deg,#5a8fa4 0%,#446e84 48%,#365a70 100%)!important;
  }
  #viewerView .btn.btn-danger{
    background:linear-gradient(165deg,#a84a5c 0%,#823c4a 50%,#6b3342 100%)!important;
  }
  #viewerView .btn.btn-danger:hover{
    background:linear-gradient(165deg,#b85a6c 0%,#924a5a 50%,#7a3d4c 100%)!important;
  }
  #viewerView .btn.btn-toggle:not(.active){
    background:linear-gradient(165deg,#1e2834 0%,#171d28 100%)!important;
  }
  #viewerView .btn.btn-toggle:not(.active):hover{
    background:linear-gradient(165deg,#283444 0%,#202830 100%)!important;
  }
  #viewerView .btn.btn-toggle.active{
    background:linear-gradient(165deg,#3a6f80 0%,#305a6a 50%,#284858 100%)!important;
  }
  #viewerView .btn.btn-toggle.active:hover{
    background:linear-gradient(165deg,#457d8e 0%,#386675 50%,#2e5564 100%)!important;
  }
  #viewerView .nav-btn{
    background:
      radial-gradient(ellipse at 38% -10%,rgba(100,148,164,.45) 0%,transparent 55%),
      linear-gradient(165deg,#223142 0%,#192230 100%);
  }
  #viewerView .nav-btn:hover{
    background:
      radial-gradient(ellipse at 38% -10%,rgba(120,172,196,.5) 0%,transparent 55%),
      linear-gradient(165deg,#2c4a62 0%,#22364a 100%);
  }
  #viewerView .ctrl-slider{
    background:linear-gradient(180deg,rgba(70,120,138,.45),#1a2432);
  }
  #viewerView .ctrl-slider::-webkit-slider-thumb{
    background:linear-gradient(180deg,#9cc8d4,#5a9cb0);
    box-shadow:0 1px 3px rgba(0,0,0,.5);
  }
  #viewerView .ctrl-slider::-moz-range-thumb{
    background:linear-gradient(180deg,#9cc8d4,#5a9cb0);
    box-shadow:0 1px 3px rgba(0,0,0,.5);
  }
}

#outputPanel{
  flex:1;
  overflow:auto;
  min-height:100px;
  contain:paint;
}
#shellOutput{font-family:'Cascadia Code','Fira Code',monospace;font-size:11px;color:var(--text2);white-space:pre-wrap;word-break:break-all}

/* Buttons */
.btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:7px 12px;border-radius:var(--radius);cursor:pointer;font-size:12px;transition:all .15s;text-align:center}
.btn:hover{border-color:var(--accent);background:rgba(94,179,201,.1)}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-primary{background:var(--accent-strong)!important;color:#0c1118!important;border-color:var(--accent-strong)!important}
.btn-primary:hover{background:#4a7f96!important;border-color:#4a7f96!important}
.btn-danger{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important}
.btn-danger:hover{opacity:.85}
.btn-toggle{position:relative}
.btn-toggle.active{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
.btn-toggle:not(.active){background:var(--surface2);color:var(--text2)}

.setting-group{margin:16px 0}
.setting-group label{display:block;font-size:13px;color:var(--text2);margin-bottom:6px}
.setting-group input{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:var(--radius);width:100%;max-width:400px;font-size:13px}

.file-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Full-screen file manager modal — production chrome */
.fm-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,3vw,28px);
  box-sizing:border-box;
}
.fm-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(6px);
}
.fm-dialog-shell.fm-dialog{
  position:relative;
  width:min(1020px,96vw);
  max-height:min(900px,94vh);
  display:flex;
  flex-direction:column;
  border-radius:16px;
  border:1px solid rgba(94,179,201,.12);
  background:linear-gradient(165deg,var(--surface) 0%,#080c14 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4) inset,
    0 28px 100px rgba(0,0,0,.62);
  overflow:hidden;
}

.fm-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px 18px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%);
  flex-shrink:0;
}
.fm-head-copy{min-width:0}
.fm-dialog-title{
  margin:0;
  font-size:clamp(18px,2.8cqmin,21px);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--text);
  line-height:1.25;
}
.fm-dialog-tagline{
  margin:6px 0 0;
  font-size:13px;
  font-weight:500;
  color:var(--text2);
  line-height:1.45;
  max-width:36rem;
}
.fm-dialog-sub{
  font-size:12px;
  color:var(--text2);
  margin-top:10px;
  margin-bottom:0;
  max-width:40rem;
  line-height:1.55;
}
.fm-dialog-sub code{font-size:.95em;background:rgba(0,0,0,.28);padding:1px 6px;border-radius:4px}

.fm-close{
  width:40px;
  height:40px;
  border:none;
  border-radius:11px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  border:1px solid var(--border);
  flex-shrink:0;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}
.fm-close:hover{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  transform:scale(1.04);
}

.fm-dialog-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:14px 16px 14px;
  overflow:hidden;
}

.fm-sheet{
  border-radius:12px;
  border:1px solid var(--border);
  padding:12px 14px;
  background:rgba(6,10,18,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  flex-shrink:0;
}
.fm-sheet--toolbar{margin-bottom:10px;background:rgba(94,179,201,.04)}
.fm-sheet--path{margin-bottom:6px;padding-bottom:10px}

.fm-toolbar-groups{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px 20px;
  width:100%;
}
.fm-tool-cluster{display:flex;flex-direction:column;gap:8px;min-width:0}
.fm-tool-cluster--end{margin-inline-start:auto}
.fm-cluster-label{
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#8aa9b8;
}
.fm-cluster-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.fm-path-label{
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8aa9b8;
  margin-bottom:8px;
}
.fm-path-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  width:100%;
}
.fm-path-input{
  flex:1;
  min-width:200px;
  background:rgba(4,8,14,.85);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 13px;
  border-radius:10px;
  font-family:'Cascadia Code','Fira Code',ui-monospace,monospace;
  font-size:12px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.fm-path-input:focus{
  outline:none;
  border-color:rgba(94,179,201,.55);
  box-shadow:0 0 0 3px rgba(94,179,201,.14);
}
.fm-go-btn{font-weight:600!important;padding-inline:18px!important}
.fm-path-display{
  margin-top:8px;
  font-size:11px;
  color:var(--green);
  font-family:ui-monospace,monospace;
  min-height:18px;
  word-break:break-all;
}

.fm-transfer-status{
  flex-shrink:0;
  padding:4px 4px 6px;
  font-size:11px;
  color:var(--accent);
  font-family:ui-monospace,monospace;
  min-height:18px;
}
.fm-error{
  flex-shrink:0;
  padding:0 6px 6px;
  font-size:12px;
  color:var(--red);
  display:none;
  line-height:1.45;
}
.fm-error.show{display:block}
.fm-error-actions{
  flex-shrink:0;
  padding:0 4px 8px;
  display:none;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.fm-error-actions.show{display:flex}
.fm-error-actions .btn{font-size:12px;align-self:flex-start}
.fm-hint{font-size:12px;color:var(--text2);line-height:1.45;margin:0 0 4px;max-width:100%}

.fm-list-chrome{
  flex:1;
  min-height:160px;
  display:flex;
  flex-direction:column;
  margin-top:4px;
  border-radius:12px;
  border:1px solid var(--border);
  overflow:hidden;
  background:rgba(4,8,14,.72);
  box-shadow:inset 0 2px 12px rgba(0,0,0,.35);
}
.fm-list-caption{
  flex-shrink:0;
  padding:9px 14px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8aa9b8;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
}
.fm-list-modal{
  flex:1;
  min-height:0;
  overflow:auto;
  margin:0;
  border:none;
  border-radius:0;
  max-height:none;
  scrollbar-color:rgba(94,179,201,.35) transparent;
}

.fm-row{
  padding:11px 14px 11px 12px;
  font-size:13px;
  font-family:'Cascadia Code','Fira Code',ui-monospace,monospace;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04);
  display:grid;
  grid-template-columns:38px 1fr auto auto;
  gap:10px 12px;
  align-items:center;
  transition:background .1s ease;
}
.fm-row:last-child{border-bottom:none}
.fm-row:hover{background:rgba(94,179,201,.09)}
.fm-row.selected{
  background:rgba(94,179,201,.14);
  border-inline-start:3px solid var(--accent);
  padding-inline-start:9px;
}
.fm-ico{width:22px;height:22px;flex-shrink:0;display:block}
.fm-ico-folder{color:#d4b05c}
.fm-row:hover .fm-ico-folder,.fm-row.selected .fm-ico-folder{color:#f0cf7a}
.fm-ico-file{color:var(--text2)}
.fm-row:hover .fm-ico-file,.fm-row.selected .fm-ico-file{color:var(--accent)}
.fm-row .nm{word-break:break-all;min-width:0}
.fm-row .meta{color:var(--text2);font-size:12px;text-align:right}
.fm-row .fm-mod{font-size:11px;color:var(--text2);white-space:nowrap}

.fm-dialog-foot{
  flex-shrink:0;
  padding:14px 18px 18px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,rgba(94,179,201,.055),rgba(10,14,22,.94));
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fm-foot-kicker{
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8aa9b8;
}
.fm-foot-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  width:100%;
}
.fm-foot-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.fm-input{
  flex:1;
  background:rgba(4,8,14,.85);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  font-size:12px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.fm-input:focus{
  outline:none;
  border-color:rgba(94,179,201,.45);
  box-shadow:0 0 0 3px rgba(94,179,201,.12);
}
.fm-input-wide{min-width:200px}

.fm-ctx-menu{
  position:fixed;
  z-index:10001;
  min-width:196px;
  background:linear-gradient(180deg,var(--surface) 0%,#0b101a 100%);
  border:1px solid rgba(94,179,201,.15);
  border-radius:11px;
  box-shadow:0 16px 55px rgba(0,0,0,.52);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.fm-ctx-item{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:13px;
  cursor:pointer;
  border-radius:8px;
  font-family:inherit;
  transition:background .12s ease;
}
.fm-ctx-item:hover{background:rgba(94,179,201,.16)}
.fm-ctx-item.fm-ctx-danger{color:var(--red)}
.fm-ctx-item.fm-ctx-danger:hover{background:rgba(239,68,68,.14)}

@media (max-width:560px){
  .fm-tool-cluster,.fm-tool-cluster--end{width:100%}
  .fm-tool-cluster--end{margin-inline-start:0!important}
  .fm-foot-row{flex-direction:column;align-items:stretch}
  .fm-foot-buttons{width:100%;justify-content:stretch}
  .fm-foot-buttons .btn{flex:1;text-align:center;min-width:0}
}

/* ── Generic Modal Overlay ─────────────────────── */
/* Above body::before (9998) / ::after (9997) scanlines — was 2000 and modals looked “empty” */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10020;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center}
.modal-dialog{background:var(--bg2,#1e1e2e);border:1px solid var(--border,#333);border-radius:10px;width:90vw;max-width:800px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.modal-dialog.modal-lg{max-width:900px}
.modal-dialog.modal-hide-screen{max-width:520px}
.hide-screen-body{padding:16px 20px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.modal-dialog.modal-audio-profile{max-width:420px}
.audio-profile-body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.audio-profile-lead{margin:0;font-size:12.5px;line-height:1.45;color:var(--text2)}
.audio-profile-list{display:flex;flex-direction:column;gap:8px}
.audio-profile-item{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:12px 14px;border-radius:10px;
}
.audio-profile-item .vico{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.audio-profile-item-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.audio-profile-item-text strong{font-size:13.5px;font-weight:650}
.audio-profile-item-text small{font-size:11.5px;line-height:1.35;color:var(--text2);font-weight:450}
.hide-screen-lead{margin:0;font-size:13px;color:var(--text2,#9a9ab0);line-height:1.45}
.hide-screen-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text1,#e0e0e0)}
.hide-screen-modes{border:1px solid var(--border,#333);border-radius:8px;padding:10px 12px;margin:0;display:flex;flex-direction:column;gap:8px}
.hide-screen-modes legend{padding:0 4px;font-size:12px;color:var(--text2,#9a9ab0)}
.hide-screen-radio{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.hide-screen-pane[hidden]{display:none!important}
.hide-screen-text{min-height:110px;resize:vertical;font-family:inherit}
.hide-screen-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border,#333)}

/* Location: near-fullscreen map */
.modal-overlay--loc{align-items:stretch;justify-content:center;padding:clamp(8px,2vh,20px);box-sizing:border-box}
.modal-dialog.modal-loc{
  width:min(98vw,1680px);
  max-width:1680px;
  height:min(94vh,1020px);
  max-height:94vh;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.modal-dialog.modal-loc .modal-body.loc-modal-body{
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:14px 18px 18px;
}
.modal-dialog.modal-loc .loc-toolbar{margin-bottom:8px;flex-shrink:0}
.modal-dialog.modal-loc .loc-meta{margin-bottom:8px;flex-shrink:0;font-size:13px}
.modal-dialog.modal-loc .loc-error{flex-shrink:0}
.modal-dialog.modal-loc .loc-map-wrap{
  flex:1 1 auto;
  min-height:min(480px,45vh);
  height:calc(94vh - 168px);
  max-height:none;
}
.modal-dialog.modal-loc #locMap.loc-map,.modal-dialog.modal-loc .loc-map-wrap #locMap{min-height:360px}
.modal-dialog.modal-loc .modal-head h2{font-size:18px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border,#333)}
.modal-head h2{margin:0;font-size:16px;color:var(--text1,#e0e0e0)}
.modal-close{background:none;border:none;color:var(--text2,#888);font-size:22px;cursor:pointer;padding:0 4px}
.modal-close:hover{color:var(--text1,#e0e0e0)}
.modal-body{padding:16px 20px;overflow-y:auto;flex:1}
.modal-pre{background:var(--bg1,#111);border:1px solid var(--border,#333);border-radius:6px;padding:12px;font-family:monospace;font-size:12px;color:var(--text1,#ccc);white-space:pre-wrap;word-break:break-all;max-height:50vh;overflow-y:auto;min-height:200px}
.modal-list{max-height:55vh;overflow-y:auto;border:1px solid var(--border,#333);border-radius:6px;background:var(--bg1,#111)}
/* Device accounts modal — grid table, exports, probe */
.accounts-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:10px}
.accounts-sort-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text2,#9a9aaa)}
.accounts-sort-select{padding:4px 8px;font-size:12px;min-width:160px}
.accounts-meta-line{margin:0;font-variant-numeric:tabular-nums}
.accounts-export-status{font-size:11px;color:var(--text2,#888);min-width:80px}
.accounts-export-status--ok{color:#86efac}
.accounts-export-status--bad{color:#fca5a5}
.accounts-stats-alert{font-size:12px;line-height:1.45;margin:0 0 10px;padding:8px 10px;border-radius:6px;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);color:#fcd34d}
.accounts-probe{margin:0 0 10px;border:1px solid var(--border,#333);border-radius:6px;background:rgba(0,0,0,.2);padding:0 10px}
.accounts-probe summary{cursor:pointer;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text2,#888);padding:8px 0;list-style-position:outside}
.accounts-probe-pre{margin:0 0 10px;padding:10px 12px;border-radius:6px;background:#0a0a10;border:1px solid var(--border,#2a2a36);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1.45;color:#b8c4d8;white-space:pre-wrap;word-break:break-word;max-height:28vh;overflow:auto}
.accounts-search-input{width:100%;margin-bottom:8px;box-sizing:border-box}
.accounts-modal-list{display:flex;flex-direction:column;max-height:min(52vh,520px);padding:0}
.accounts-head-row{display:grid;grid-template-columns:minmax(96px,1.15fr) minmax(80px,1fr) minmax(72px,0.9fr) minmax(88px,1fr) 48px;gap:8px;align-items:center;padding:6px 12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text2,#888);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.2));border-bottom:1px solid var(--border,#333);position:sticky;top:0;z-index:2}
.accounts-head-row--auth{grid-template-columns:minmax(100px,1.2fr) minmax(88px,1fr) minmax(120px,1.4fr) minmax(52px,0.7fr)}
.accounts-data-row{display:grid;grid-template-columns:minmax(96px,1.15fr) minmax(80px,1fr) minmax(72px,0.9fr) minmax(88px,1fr) 48px;gap:8px;align-items:start;padding:8px 12px;border-bottom:1px solid var(--border,#222);font-size:12px;color:var(--text1,#ccc)}
.accounts-data-row:last-child{border-bottom:none}
.accounts-data-row:hover{background:rgba(255,255,255,.04)}
.accounts-col-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1.35;color:var(--text2,#9a9aaa);word-break:break-all}
.accounts-col-host{font-size:11px;color:var(--text2,#9a9aaa);line-height:1.35}
.accounts-col-ver{font-size:10px;color:var(--text2,#666)}
.accounts-col-actions{text-align:right}
.accounts-data-row .btn.btn-xs{padding:3px 8px;font-size:10px}
.accounts-auth-section{margin-top:12px}
.accounts-auth-title{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;margin:0 0 6px}
.accounts-auth-list-inner{max-height:min(28vh,280px);border:1px solid var(--border,#333);border-radius:6px;background:var(--bg1,#111)}
.accounts-auth-row{display:grid;grid-template-columns:minmax(100px,1.2fr) minmax(88px,1fr) minmax(120px,1.4fr) minmax(52px,0.7fr);gap:8px;align-items:start;padding:8px 12px;border-bottom:1px solid var(--border,#222);font-size:12px}
.accounts-auth-row:last-child{border-bottom:none}
.accounts-auth-row:hover{background:rgba(255,255,255,.03)}
.modal-input{background:var(--bg1,#111);border:1px solid var(--border,#333);border-radius:4px;color:var(--text1,#ccc);padding:6px 10px;font-size:13px}
.modal-input:focus{outline:none;border-color:var(--accent,#4a9eff)}

/* ── Clipper modal (viewer) ───────────────────── */
.clipper-modal-overlay{background:rgba(6,8,14,.78);backdrop-filter:blur(6px)}
.modal-dialog.clipper-modal{
  max-width:min(1040px,96vw);
  max-height:92vh;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(74,158,255,.06) inset;
}
.clipper-modal-head{align-items:flex-start;gap:12px}
.clipper-head-text{min-width:0}
.clipper-subtitle{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--text2,#9a9aaa);max-width:52ch}
.clipper-status-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:10px 20px;border-bottom:1px solid var(--border,#333);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
}
.clipper-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;border:1px solid transparent;
  font-variant-numeric:tabular-nums;
}
.clipper-badge--muted{background:rgba(255,255,255,.04);color:var(--text2,#9a9aaa);border-color:rgba(255,255,255,.06)}
.clipper-badge--loading{background:rgba(96,165,250,.08);color:#93c5fd;border-color:rgba(96,165,250,.25)}
.clipper-badge--ok{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.28)}
.clipper-badge--bad{background:rgba(248,113,113,.12);color:#fca5a5;border-color:rgba(248,113,113,.28)}
.clipper-badge--attention{background:rgba(251,191,36,.1);color:#fcd34d;border-color:rgba(251,191,36,.25)}
.clipper-btn-refresh{margin-left:auto}
.btn-xs{font-size:11px;padding:5px 12px;border-radius:8px}
.clipper-modal-body{padding:0 20px 18px}
.clipper-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;
}
@media (max-width:900px){
  .clipper-grid{grid-template-columns:1fr}
}
.clipper-card{
  background:var(--bg1,#12121a);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:12px;min-height:0;
}
.clipper-card--replace{border-color:rgba(74,158,255,.12)}
.clipper-card-head{margin-bottom:2px}
.clipper-card-title{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--text1,#ececf1);letter-spacing:.01em}
.clipper-card-desc{margin:0;font-size:12px;line-height:1.5;color:var(--text2,#9a9aaa)}
.clipper-toggle,.clipper-toggle--strong{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:13px;color:var(--text1,#ddd);line-height:1.35;
}
.clipper-toggle input,.clipper-toggle--strong input{margin-top:3px;accent-color:var(--accent,#4a9eff)}
.clipper-toggle--strong{font-weight:500}
.clipper-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.clipper-inject-panel{
  margin-top:4px;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(74,158,255,.2);
  background:linear-gradient(145deg,rgba(74,158,255,.08),rgba(0,0,0,.15));
}
.clipper-inject-title{margin:0 0 6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent,#7ab8ff)}
.clipper-inject-desc{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--text2,#9a9aaa)}
.clipper-inject-textarea{width:100%;box-sizing:border-box;min-height:72px;resize:vertical;font-size:12px;line-height:1.4}
.clipper-inject-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.clipper-live-panel{
  margin-top:4px;border-top:1px solid rgba(255,255,255,.06);
  padding-top:12px;display:flex;flex-direction:column;gap:8px;min-height:0;flex:1;
}
.clipper-live-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.clipper-live-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text2,#888);font-weight:600}
.clipper-live-log{
  flex:1;min-height:120px;max-height:220px;overflow:auto;margin:0;
  padding:10px 12px;border-radius:8px;
  background:#0a0a10;border:1px solid var(--border,#2a2a36);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:1.45;
  color:#c8d0e0;white-space:pre-wrap;word-break:break-word;
}
.clipper-live-footnote{margin:0;font-size:11px;color:var(--text2,#666);line-height:1.4}
.clipper-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.clipper-field{display:flex;flex-direction:column;gap:4px}
.clipper-field label{font-size:11px;color:var(--text2,#9a9aaa);font-weight:500}
.clipper-field--full{grid-column:1/-1}
.clipper-input-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.clipper-replace-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:4px}
.clipper-inline-status{font-size:12px;color:var(--text2,#888);min-height:1.2em}
.clipper-inline-status--ok{color:#86efac}
.clipper-inline-status--bad{color:#fca5a5}

/* Modal list rows */
.ml-row{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border,#222);gap:10px;font-size:13px;color:var(--text1,#ccc)}
.ml-row:last-child{border-bottom:none}
.ml-row:hover{background:rgba(255,255,255,.04)}
.ml-row .ml-primary{flex:1;font-weight:500}
.ml-row .ml-secondary{color:var(--text2,#888);font-size:12px}
.ml-row .ml-badge{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.ml-badge.incoming{background:#1a3a2a;color:#4ade80}
.ml-badge.outgoing{background:#1a2a3a;color:#60a5fa}
.ml-badge.missed{background:#3a1a1a;color:#f87171}
.ml-badge.sent{background:#1a2a3a;color:#60a5fa}
.ml-badge.inbox{background:#1a3a2a;color:#4ade80}
.ml-row .ml-actions{display:flex;gap:4px}
.ml-row .ml-actions .btn{padding:2px 8px;font-size:11px}

/* System info (key / value rows) */
.sysinfo-kv .ml-row{align-items:flex-start}
.sysinfo-kv .sysinfo-k{flex:0 0 min(42%,200px);color:var(--text2);font-size:12px;line-height:1.4}
.sysinfo-kv .sysinfo-v{flex:1;font-weight:500;word-break:break-word;font-size:13px;line-height:1.4;color:var(--text1,#ccc)}

/* Location modal — Leaflet */
.loc-modal-body{display:flex;flex-direction:column;min-height:0}
.loc-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;align-items:center}
.loc-external-btns{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
a.loc-external-link{text-decoration:none}
.loc-meta{font-size:12px;color:var(--text2);margin:0 0 10px;line-height:1.45;word-break:break-word}
.loc-error{color:var(--orange);font-size:13px;margin:0 0 12px;line-height:1.4}
.loc-map-wrap{flex:1;min-height:280px;height:52vh;border:1px solid var(--border,#333);border-radius:8px;overflow:hidden;position:relative;background:#0d0d10}
#locMap.loc-map,.loc-map-wrap #locMap{height:100%;width:100%;min-height:260px;z-index:1}
.leaflet-container{background:#1a1a1e;font-family:inherit}
.modal-dialog .leaflet-bar,.modal-dialog .leaflet-control-layers{background:var(--bg2,#1e1e2e);color:var(--text1,#e0e0e0);border:1px solid var(--border,#333)}
.modal-dialog .leaflet-bar a,.modal-dialog .leaflet-control-layers-toggle{background-color:var(--bg2,#1e1e2e);color:var(--text1,#e0e0e0);border-bottom-color:var(--border,#333)}
.modal-dialog .leaflet-bar a:hover{background:var(--surface,#2a2a38);color:var(--text1,#fff)}
.modal-dialog .leaflet-control-layers-list{color:var(--text1,#ccc)}
.modal-dialog .leaflet-popup-content-wrapper,.modal-dialog .leaflet-popup-tip{background:var(--bg2,#1e1e2e);color:var(--text1,#e0e0e0);border:1px solid var(--border,#444)}
.modal-dialog .leaflet-popup-close-button{color:var(--text2,#888)}

/* Live microphone modal */
.audio-modal-body{text-align:center;max-width:520px;margin:0 auto}
.audio-intro{color:var(--text2);margin:0 0 14px;line-height:1.5;font-size:13px;text-align:left}
.audio-meter-wrap{margin:0 auto 6px;max-width:360px;text-align:left}
.audio-meter-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);margin-bottom:4px}
.audio-meter-track{height:8px;border-radius:4px;background:var(--bg1,#111);border:1px solid var(--border,#333);overflow:hidden}
.audio-meter-fill{height:100%;width:0%;max-width:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent,#5eb3c9),#4ade80);transition:width .06s ease-out}

/* SMS compose */
.sms-compose input{font-size:13px}

/* Builder — premium production layout */
.builder-view.view{
  padding:clamp(18px,3vw,28px) clamp(16px,3vw,32px) 40px;
  overflow:auto;
  container-type:inline-size;
}
.builder-page{
  max-width:1100px;
  margin:0 auto;
  width:100%;
}
.builder-page-head{
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
  max-width:100%;
}
.builder-page-head h2{
  margin:0 0 6px;
  font-size:clamp(21px,3.8cqmin,26px);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--text);
}
.builder-tagline{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--text2);
  font-weight:500;
  max-width:42rem;
}
.builder-form{display:flex;flex-direction:column;gap:0;max-width:none;width:100%}
.builder-form-grid{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2.5vw,22px);
}
.builder-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,18px);align-items:stretch}
@media (max-width:900px){.builder-layout{grid-template-columns:1fr}}

.builder-dual-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,18px);
  align-items:stretch;
}
@media (max-width:900px){
  .builder-dual-row{grid-template-columns:1fr}
}

.builder-card{
  background:linear-gradient(165deg,var(--surface) 0%,rgba(14,18,26,.94) 100%);
  border:1px solid var(--border);
  border-radius:14px;
  padding:0;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.045) inset,
    0 12px 40px rgba(0,0,0,.32);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.builder-card:focus-within{
  border-color:rgba(94,179,201,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 16px 48px rgba(0,0,0,.38);
}
.builder-card--stretch{width:100%}
.builder-card--onboarding{
  margin-top: clamp(14px,2vw,18px);
}
.builder-onboarding-mode{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:10px 0 12px;
}
.builder-onboarding-textarea{
  min-height:180px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  line-height:1.45;
  resize:vertical;
  white-space:pre;
}
.builder-onboarding-custom[hidden]{display:none !important;}

.builder-card--modules{
  border-color:rgba(94,179,201,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 10px 36px rgba(0,0,0,.28),
    0 0 0 1px rgba(94,179,201,.06);
}
.builder-card-title{
  margin:0;
  padding:14px 20px 12px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#8aa9b8;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%);
}
.builder-card-body{
  padding:16px 20px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.builder-modules-intro{
  margin:0;
  padding:8px 20px 6px;
  font-size:12px;
  line-height:1.5;
  color:var(--text2);
  max-width:56rem;
}
.builder-modules-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  padding:18px 20px 0;
}
.builder-modules-head .builder-modules-title{
  margin:0!important;
  font-size:14px!important;
}
.builder-rec-pill{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(60,184,120,.14);
  color:var(--green);
  border:1px solid rgba(60,184,120,.32);
  line-height:1.2;
  flex-shrink:0;
}
.builder-rec-pill--optional{
  background:rgba(218,160,74,.1);
  color:var(--orange);
  border-color:rgba(218,160,74,.28);
}
.builder-operator-section-lead{
  margin:12px 0 8px;
  font-size:11px;
  line-height:1.45;
  color:var(--text2);
  max-width:48rem;
}
.builder-operator-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
@media (max-width:820px){
  .builder-operator-row{grid-template-columns:1fr}
}
.builder-card--operator{
  margin-top:0;
  min-width:0;
}
.builder-operator-card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  padding:16px 20px 0;
}
.builder-operator-card-title{
  margin:0!important;
  font-size:13px!important;
  letter-spacing:.04em;
}
.builder-operator-card-body{
  padding-top:8px!important;
  gap:10px!important;
}
.builder-operator-hint{
  margin:0!important;
  font-size:11px!important;
  line-height:1.45;
}
.builder-card--modules .builder-feat-matrix{
  padding-top:12px;
}

/* Settings — premium workspace layout */
.settings-view.view{
  padding:clamp(18px,3vw,28px) clamp(16px,3vw,32px) 40px;
  overflow:auto;
  container-type:inline-size;
}
.settings-page{
  max-width:980px;
  margin:0 auto;
  width:100%;
}
.settings-page-head{
  margin-bottom:clamp(20px,3vw,26px);
  padding-bottom:clamp(16px,2.5vw,20px);
  border-bottom:1px solid var(--border);
}
.settings-page-head h2{
  margin:0 0 8px;
  font-size:clamp(22px,3.6cqmin,27px);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--text);
}
.settings-tagline{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--text2);
  font-weight:500;
  max-width:42rem;
}
.settings-layout{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,22px);
  align-items:start;
}
@media (max-width:900px){
  .settings-layout{grid-template-columns:1fr}
}
.settings-card{
  background:linear-gradient(165deg,var(--surface) 0%,rgba(14,18,26,.94) 100%);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.045) inset,
    0 12px 40px rgba(0,0,0,.32);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.settings-card:focus-within{
  border-color:rgba(94,179,201,.2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 14px 44px rgba(0,0,0,.38);
}
.settings-card--lang{
  border-color:rgba(94,179,201,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 10px 38px rgba(0,0,0,.28),
    0 0 0 1px rgba(94,179,201,.05);
}
.settings-card-title{
  margin:0;
  padding:14px 20px 12px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#8aa9b8;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%);
}
.settings-card-body{padding:18px 20px 20px}
.settings-card-body--audio{padding-bottom:22px}
.settings-lang-grid{
  direction:ltr;
  unicode-bidi:isolate;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(152px,1fr));
  gap:10px;
}
.settings-lang-tile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  min-height:58px;
  border-radius:11px;
  border:1px solid var(--border);
  background:linear-gradient(145deg,rgba(18,22,30,.92) 0%,rgba(8,10,15,.82) 100%);
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .14s ease,background .18s ease;
  box-shadow:0 2px 0 rgba(255,255,255,.022) inset;
}
.settings-lang-tile:hover{
  border-color:rgba(94,179,201,.34);
  box-shadow:0 2px 0 rgba(255,255,255,.03) inset,0 8px 22px rgba(0,0,0,.34);
}
.settings-lang-tile:focus-visible{
  outline:none;
  border-color:rgba(94,179,201,.55);
  box-shadow:0 0 0 3px rgba(94,179,201,.13);
}
.settings-lang-tile--active{
  border-color:rgba(94,179,201,.5);
  background:linear-gradient(145deg,rgba(28,52,58,.38) 0%,rgba(10,14,20,.95) 100%);
  box-shadow:
    0 1px 0 rgba(94,179,201,.07) inset,
    0 10px 28px rgba(0,0,0,.36),
    0 0 0 1px rgba(94,179,201,.09);
}
.settings-lang-flag-outer{
  flex-shrink:0;
  width:38px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:5px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 2px 8px rgba(0,0,0,.42);
}
.settings-lang-flag-img{
  display:block;
  width:38px;
  height:auto;
  max-height:26px;
  object-fit:cover;
  border-radius:4px;
  border:1px solid rgba(0,0,0,.35);
}
.settings-lang-flag-outer--emoji{
  font-size:24px;
  line-height:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.32));
  border-radius:6px;
  box-shadow:none;
  width:auto;
  min-width:28px;
  height:auto;
  padding:0 2px;
}
.settings-lang-meta{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}
.settings-lang-name{
  font-size:13px;
  font-weight:600;
  line-height:1.25;
  color:var(--text);
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.settings-lang-tile[data-rtl-name="1"] .settings-lang-name{direction:rtl}
.settings-lang-code{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6f8898;
}
.settings-lang-tile--active .settings-lang-code{color:#7ebdcf}
.settings-lang-native{
  margin-top:14px;
  width:100%;
  max-width:280px;
  padding:9px 12px;
  font-size:12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:rgba(6,8,14,.55);
  color:var(--text);
  cursor:pointer;
}
.settings-audio-toggle{
  display:flex;
  align-items:flex-start;
  gap:14px;
  cursor:pointer;
  padding:4px 2px 0;
  margin:0;
  position:relative;
}
.settings-toggle-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
  opacity:0;
}
.settings-toggle-track{
  position:relative;
  flex-shrink:0;
  width:48px;
  height:26px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.settings-toggle-thumb{
  position:absolute;
  top:2px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:linear-gradient(165deg,#d8dfe8 0%,#9aa8b8 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:transform .22s cubic-bezier(0.22,1,0.36,1),background .2s ease;
}
.settings-toggle-input:checked + .settings-toggle-track{
  border-color:rgba(94,179,201,.4);
  background:linear-gradient(90deg,rgba(62,138,166,.54) 0%,rgba(94,179,201,.35) 100%);
  box-shadow:0 0 16px rgba(94,179,201,.22);
}
.settings-toggle-input:checked + .settings-toggle-track .settings-toggle-thumb{
  transform:translateX(21px);
  background:linear-gradient(165deg,#f2fafd 0%,#8ec9db 92%);
}
.settings-toggle-input:focus-visible + .settings-toggle-track{
  box-shadow:0 0 0 3px rgba(94,179,201,.2);
}
.settings-audio-copy{flex:1;min-width:0}
.settings-audio-title{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  letter-spacing:-.015em;
  margin-bottom:6px;
}
.settings-audio-desc{
  display:block;
  font-size:12px;
  line-height:1.52;
  color:var(--text2);
  font-weight:400;
}

/* Icons-only mode — hide option / nav labels (Settings → Show option names) */
html.panel-icons-only .vbtn-label,
html.panel-icons-only .nav-item-label{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}
html.panel-icons-only .btn.vbtn,
html.panel-icons-only .payloads-filter-btn.vbtn,
html.panel-icons-only .agent-card-menu-item.vbtn{
  justify-content:center;
  gap:0;
  position:relative;
}
html.panel-icons-only #viewerActions .btn.vbtn{
  min-height:36px;
  padding-left:8px;
  padding-right:8px;
}
html.panel-icons-only #streamControls .btn.vbtn,
html.panel-icons-only .lock-keyboard-bar .btn.vbtn{
  justify-content:center;
}
html.panel-icons-only .nav-item{
  position:relative;
  gap:8px;
}
html.panel-icons-only .nav-ico{
  opacity:1;
}
html.panel-icons-only .cred-auto-unlock-btn.vbtn{
  gap:2px;
}
html.panel-icons-only .vico{
  width:16px;
  height:16px;
}

.settings-card--mfa{
  border:1px solid rgba(130,210,232,.18);
  background:linear-gradient(160deg,rgba(94,179,201,.08) 0%,rgba(6,8,14,.5) 50%)
}
.settings-card-body--mfa{padding-top:16px}
.settings-mfa-tagline{font-size:12px;color:var(--text2);line-height:1.5;margin:0 0 14px}
.settings-mfa-status{font-size:12px;font-weight:600;margin:0 0 12px;letter-spacing:.04em;text-transform:uppercase;color:#7ebdcf}
.settings-mfa-status--on{color:#9deac9}
.settings-mfa-panel{margin-top:8px}
.settings-mfa-hint{font-size:12px;color:var(--text2);margin:0 0 14px;line-height:1.45}
.settings-mfa-qr-wrap{
  display:inline-flex;padding:12px;background:#fff;border-radius:12px;margin-bottom:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.35)
}
.settings-mfa-qr{display:block;width:200px;height:200px}
.settings-mfa-secret-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text2);margin:8px 0 6px}
.settings-mfa-secret{display:block;font-size:13px;padding:10px 12px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid var(--border);word-break:break-all;margin-bottom:14px}
.settings-mfa-otp-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);margin:10px 0 6px}
.settings-mfa-otp{max-width:200px;font-size:18px;letter-spacing:.2em}
.settings-mfa-err{font-size:12px;color:#f0a0a8;margin:10px 0 0}
.settings-mfa-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.settings-mfa-on{font-size:13px;color:var(--text2);line-height:1.5;margin:0 0 14px}
.settings-mfa-hint--tight{margin:0 0 10px}
.settings-mfa-enroll-pw{margin:14px 0 4px;padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid rgba(130,210,232,.14)}
.settings-mfa-pw{max-width:320px;font-size:14px;margin-bottom:10px}
.settings-mfa-legacy-banner{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 16px;
  padding:14px 16px;margin-bottom:16px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,196,90,.12) 0%,rgba(6,8,14,.55) 100%);
  border:1px solid rgba(255,196,90,.22)
}
.settings-mfa-legacy-copy{flex:1;min-width:200px;margin:0;font-size:12px;line-height:1.55;color:var(--text2)}
.settings-mfa-toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-top:4px;border-top:1px solid rgba(255,255,255,.06)
}
.settings-mfa-modal-lead{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--text2)}
.agent-pref-title{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.login-mfa-heading{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(215,225,238,.88)}
.login-mfa-lead{margin:0 0 16px;font-size:13px;line-height:1.45;color:rgba(215,225,238,.72)}
.login-input--mfa{letter-spacing:.35em;font-weight:700;font-size:17px;text-align:center}
.login-mfa-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;justify-content:stretch}
.login-mfa-actions .btn{flex:1;min-width:120px}
.login-mfa-remember{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;font-size:12px;line-height:1.45;color:rgba(215,225,238,.76);cursor:pointer}
.login-mfa-remember input[type=checkbox]{margin-top:2px;flex-shrink:0;accent-color:#00ffc8}

.builder-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.builder-inline .modal-input{flex:1;min-width:160px}
.builder-inline .btn{margin-bottom:1px}
.builder-row{display:flex;flex-direction:column;gap:7px}
.builder-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.builder-row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:640px){.builder-row-3{grid-template-columns:1fr}}
.builder-row label,
.builder-cell label{font-size:12px;font-weight:600;color:var(--text2);letter-spacing:.01em}
.builder-field{
  padding:10px 12px!important;
  border-radius:9px!important;
  border:1px solid var(--border)!important;
  background:rgba(6,8,14,.35)!important;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.builder-field:focus{
  outline:none;
  border-color:rgba(94,179,201,.45)!important;
  box-shadow:0 0 0 3px rgba(94,179,201,.12);
}
.builder-field-hint{font-size:11px;color:var(--text2);margin:2px 0 0;line-height:1.45;opacity:.92}
.builder-file-input{font-size:12px;color:var(--text2);cursor:pointer;width:100%;max-width:100%;padding:6px 0}

.builder-feat-matrix{
  padding:16px 20px 20px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 22px;
  background:rgba(0,0,0,.18);
  border-top:1px solid rgba(255,255,255,.04);
}
@media (max-width:960px){.builder-feat-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.builder-feat-matrix{grid-template-columns:1fr}}

.builder-feat-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.builder-feat-group-label{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#94aebd;
  margin:0 0 6px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(148,174,189,.28);
}
.builder-feat-matrix .bf-check-wide{border-top:none;padding-top:2px;margin-top:4px}

.bf-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  cursor:pointer;
  line-height:1.4;
  padding:8px 10px;
  margin:0;
  border-radius:10px;
  border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease;
}
.bf-check:hover{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
}
.bf-check-wide{width:100%}
.bf-check input{
  margin-top:3px;
  accent-color:var(--accent);
  flex-shrink:0;
}

.builder-card--telegram{
  margin-top:10px;
  max-width:min(100%,480px);
  align-self:start;
}
.builder-operator-row .builder-card--telegram{
  margin-top:0;
  max-width:none;
  align-self:stretch;
}
.builder-telegram-head{
  margin-bottom:2px;
}
.builder-telegram-head .builder-operator-card-head{
  padding-bottom:4px;
}
.builder-telegram-title{
  font-size:13px!important;
  letter-spacing:.04em;
  margin:0!important;
}
.builder-telegram-body{
  padding-top:4px;
}
.builder-telegram-lead{
  margin:0 0 10px;
  padding:0 20px;
  font-size:11px;
  line-height:1.45;
  color:var(--text2);
  max-width:42rem;
}
.builder-telegram-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
  align-items:start;
}
@media (max-width:700px){
  .builder-telegram-grid{grid-template-columns:1fr}
}
.builder-telegram-field .builder-field--compact{
  padding:8px 10px!important;
  font-size:12px!important;
}
.builder-telegram-enable{
  margin-bottom:10px;
  padding:6px 8px!important;
}
.builder-telegram-token-hint{
  margin-top:4px!important;
  font-size:10px;
  line-height:1.35;
}
.builder-telegram-status{
  margin:8px 0 0;
  font-size:11px;
  line-height:1.4;
  color:var(--accent,#5eb3c9);
}
.builder-telegram-status--err{color:#f07178}
.builder-telegram-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  align-items:center;
}
.builder-telegram-actions .btn{
  min-width:0;
}

.builder-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 20px;
  margin-top:4px;
  padding:18px 20px;
  border-radius:14px;
  border:1px solid rgba(94,179,201,.15);
  background:linear-gradient(135deg,rgba(94,179,201,.08) 0%,rgba(6,8,14,.4) 55%,rgba(6,8,14,.55) 100%);
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}
@media (max-width:560px){
  .builder-actions{flex-direction:column;align-items:stretch}
  .builder-submit{width:100%}
}
.builder-actions-note{
  margin:0;
  flex:1;
  min-width:min(100%,220px);
  font-size:12px;
  line-height:1.45;
  color:var(--text2);
}
.builder-submit{
  min-width:min(240px,100%);
  padding:12px 28px!important;
  font-weight:700!important;
  font-size:13px!important;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:10px!important;
  box-shadow:0 4px 20px rgba(94,179,201,.25);
}

.builder-crypto-panel{width:100%;margin-top:6px;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface2);box-shadow:0 4px 20px rgba(0,0,0,.25)}
.builder-crypto-config-title{font-size:13px;font-weight:600;color:var(--text);margin:0 0 4px;letter-spacing:.02em}
.builder-crypto-intro{font-size:11px;color:var(--text2);margin:0 0 12px;line-height:1.45;max-width:52em}
.builder-crypto-field-grid{display:flex;flex-direction:column;gap:10px}
.builder-crypto-hint{margin-top:10px !important}

.builder-output-panel{
  margin-top:clamp(20px,3vw,28px);
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
.builder-loading{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:14px;
  margin:0;
  padding:16px 18px;
  background:linear-gradient(165deg,var(--surface) 0%,rgba(10,14,20,.95) 100%);
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--text2);
  font-size:13px;
  width:100%;
  box-sizing:border-box;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.builder-loading[hidden]{display:none!important}
.builder-spinner{
  flex-shrink:0;
  width:24px;
  height:24px;
  margin-top:2px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:bf-spin 0.85s linear infinite;
}
.builder-progress-block{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}
.builder-progress-track{
  height:11px;
  background:rgba(0,0,0,.35);
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.builder-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent),#6ec8e0);
  border-radius:7px;
  transition:width 0.25s ease;
}
.builder-progress-track.bf-progress-busy .builder-progress-fill{
  background:linear-gradient(90deg,var(--accent),#9ee4ff,var(--accent));
  background-size:180% 100%;
  animation:bf-bar-shimmer 2s ease-in-out infinite;
}
@keyframes bf-bar-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.builder-percent-label{font-weight:700;color:var(--text);font-size:13px}
.builder-loading-hint{
  flex-basis:100%;
  margin:0;
  padding-left:38px;
  font-size:12px;
  line-height:1.45;
  color:var(--text2);
  opacity:.9;
}
@media (max-width:480px){
  .builder-loading-hint{padding-left:0}
}
@keyframes bf-spin{to{transform:rotate(360deg)}}

#builderView .builder-download-btn{
  margin:0;
  display:none;
  align-self:flex-start;
  padding:11px 22px!important;
  font-weight:700!important;
  border-radius:10px!important;
}

/* Payloads — artifact library (IndexedDB) */
.payloads-page{
  max-width:1180px;
  margin:0 auto;
  padding:0 1.35rem 3rem;
}
.payloads-hero{
  position:relative;
  margin:0 -0.35rem 1.5rem;
  padding:1.75rem 1.5rem 1.65rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg,rgba(94,179,201,.1) 0%,transparent 42%),
    linear-gradient(225deg,rgba(152,143,168,.08) 0%,transparent 38%),
    rgba(6,9,14,.72);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 24px 56px rgba(0,0,0,.35);
  overflow:hidden;
}
.payloads-hero-glow{
  position:absolute;
  inset:-40% 20% auto -20%;
  height:120%;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(94,179,201,.16),transparent 70%);
  pointer-events:none;
  opacity:.9;
}
.payloads-hero-inner{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem 2rem;
  z-index:1;
}
.payloads-hero-copy{flex:1;min-width:min(100%,280px);max-width:46rem}
.payloads-kicker{
  margin:0 0 .35rem;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent,#5eb3c9);
  opacity:.95;
}
.payloads-hero-title{
  margin:0;
  font-size:clamp(1.45rem,2.6vw,1.85rem);
  font-weight:750;
  letter-spacing:-.03em;
  line-height:1.15;
}
.payloads-tagline{
  margin:.55rem 0 0;
  font-size:.92rem;
  line-height:1.5;
  color:var(--text2);
  opacity:.9;
}
.payloads-hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.payloads-stat{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:5.5rem;
  padding:.65rem .95rem;
  border-radius:12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
}
.payloads-stat--accent{
  border-color:rgba(94,179,201,.2);
  background:linear-gradient(180deg,rgba(94,179,201,.08),rgba(0,0,0,.18));
}
.payloads-stat--violet{
  border-color:rgba(152,143,168,.25);
  background:linear-gradient(180deg,rgba(152,143,168,.09),rgba(0,0,0,.18));
}
.payloads-stat-val{
  font-size:1.35rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  line-height:1.1;
}
.payloads-stat-label{
  margin-top:.2rem;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text2);
  opacity:.85;
}
.payloads-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
  margin-bottom:1.15rem;
}
.payloads-filter{
  display:inline-flex;
  padding:4px;
  border-radius:12px;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.07);
}
.payloads-filter-btn{
  margin:0;
  padding:.45rem .95rem;
  border:none;
  border-radius:9px;
  background:transparent;
  color:var(--text2);
  font-size:12px;
  font-weight:650;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.payloads-filter-btn:hover{
  color:var(--text);
  background:rgba(255,255,255,.05);
}
.payloads-filter-btn.active{
  color:var(--text);
  background:rgba(94,179,201,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.payloads-clear-all{
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.1)!important;
  background:rgba(0,0,0,.15)!important;
}
.payloads-clear-all:hover{
  border-color:rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.06)!important;
}
.payloads-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.1rem;
}
.payload-card{
  position:relative;
  display:flex;
  gap:1.05rem;
  padding:1.15rem 1.2rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,11,18,.58);
  box-shadow:0 10px 32px rgba(0,0,0,.28);
  transition:transform .18s ease,border-color .18s ease,box-shadow .22s ease;
}
.payload-card:hover{
  transform:translateY(-2px);
  border-color:rgba(94,179,201,.22);
  box-shadow:0 16px 40px rgba(0,0,0,.34),0 0 0 1px rgba(94,179,201,.08);
}
.payload-card--dropper:hover{
  border-color:rgba(152,143,168,.28);
  box-shadow:0 16px 40px rgba(0,0,0,.34),0 0 0 1px rgba(152,143,168,.1);
}
.payload-card-visual{
  flex-shrink:0;
  width:76px;
  height:76px;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(145deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.02) 100%),
    linear-gradient(145deg,rgba(94,179,201,.12),rgba(20,24,32,.94));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 4px 16px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.payload-card--dropper .payload-card-visual{
  background:
    linear-gradient(145deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 100%),
    linear-gradient(145deg,rgba(152,143,168,.14),rgba(20,24,32,.94));
}
.payload-card-logo-wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px;
  box-sizing:border-box;
}
.payload-card-logo{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center;
  display:block;
  border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.payload-card-logo-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.52;
  color:var(--text2);
}
.payload-card-logo-fallback::after{content:"apk"}
.payload-card--dropper .payload-card-logo-fallback::after{content:"drop"}
.payload-card-body{min-width:0;flex:1}
.payload-card-title-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem .6rem;
  margin-bottom:.32rem;
}
.payload-card-title{
  margin:0;
  font-size:1.04rem;
  font-weight:750;
  line-height:1.25;
  word-break:break-word;
}
.payload-kind{
  flex-shrink:0;
  max-width:100%;
  padding:.2rem .5rem;
  border-radius:6px;
  font-size:10px;
  font-weight:750;
  letter-spacing:.02em;
  line-height:1.2;
  text-transform:none;
  white-space:normal;
  background:rgba(94,179,201,.15);
  color:#9ee4ff;
  border:1px solid rgba(94,179,201,.28);
}
.payload-kind--dropper{
  background:rgba(152,143,168,.16);
  color:#d4cfe0;
  border-color:rgba(152,143,168,.32);
}
.payload-card-meta{
  margin:0;
  font-size:11px;
  line-height:1.4;
  color:var(--text2);
  opacity:.9;
  word-break:break-word;
}
.payload-card-inner{
  margin:.35rem 0 0;
  font-size:10px;
  line-height:1.35;
  color:var(--text2);
  opacity:.78;
}
.payload-card-date{
  margin:.4rem 0 .12rem;
  font-size:12px;
  font-weight:500;
  color:var(--text2);
  opacity:.92;
}
.payload-card-size{
  margin:0 0 .7rem;
  font-size:11px;
  font-weight:500;
  opacity:.72;
}
.payload-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.payload-card-actions .btn-primary{
  font-weight:650;
}
.payloads-empty,
.payloads-empty--filter{
  text-align:center;
  padding:2.75rem 1.35rem;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.14);
  background:rgba(0,0,0,.14);
  color:var(--text2);
  line-height:1.55;
  margin:0 0 1.1rem;
  max-width:44rem;
  margin-left:auto;
  margin-right:auto;
}
.payloads-empty--filter{
  border-style:solid;
  border-color:rgba(94,179,201,.15);
  background:rgba(94,179,201,.04);
}
@media (max-width:640px){
  .payloads-hero-inner{flex-direction:column;align-items:stretch}
  .payloads-hero-stats{width:100%;justify-content:space-between}
  .payloads-toolbar{flex-direction:column;align-items:stretch}
  .payloads-filter{width:100%;justify-content:stretch}
  .payloads-filter-btn{flex:1;text-align:center}
}

.builder-log-shell{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:rgba(6,8,14,.5);
  box-shadow:0 10px 36px rgba(0,0,0,.3);
}
.builder-log-head{
  padding:10px 16px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8aa9b8;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
}
.builder-log-shell .builder-log{
  margin:0;
  border:none;
  border-radius:0;
  max-height:min(45vh,440px);
  padding:14px 16px 16px;
  background:rgba(0,0,0,.2);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
  line-height:1.45;
}

/* Login — Three.js viral network backdrop + tactical HUD */
body.login-body{
  min-height:100vh;
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(94,179,201,.09) 0%, transparent 45%),
    radial-gradient(ellipse 85% 60% at 100% 100%, rgba(212,176,104,.045) 0%, transparent 50%),
    linear-gradient(180deg, #05080c 0%, #070a12 42%, #040608 100%);
  color:var(--text);
}
/* WebGL libs missing or GPU blocked */
body.login-three-missing .login-backdrop__webgl{
  display:none!important;
}
.login-backdrop-three--paused .login-backdrop__webgl{
  display:none!important;
}
.login-backdrop-three--paused .login-backdrop--three .login-backdrop__tone{
  opacity:1;
  background:
    radial-gradient(ellipse 100% 80% at 50% 20%,rgba(94,179,201,.08) 0%,transparent 52%),
    linear-gradient(165deg, rgba(32,58,66,.5) 0%, transparent 42%, rgba(0,0,0,.48) 100%);
}
body.login-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 4px);
  opacity:.09;
}
body.login-body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
  background-size:5px 100%;
  opacity:.06;
}
/* Tactical HUD — C4ISR-style density: classification band + primary row + KV grid */
.login-tactical-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  padding:0;
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  background:linear-gradient(92deg,rgba(10,12,20,.92) 0%,rgba(14,18,28,.96) 52%,rgba(8,10,16,.92) 100%);
  border-bottom:1px solid rgba(94,179,201,.09);
  box-shadow:
    0 1px 0 rgba(94,179,201,.08),
    0 12px 32px rgba(0,0,0,.42);
  font-size:9px;
  line-height:1.35;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text2);
}
.login-tactical-bar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  max-width:min(1200px,100%);
  margin:0 auto;
  padding:6px 14px 4px;
}
.login-tactical-kv{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  margin:0;
  padding:0;
  border-top:1px solid var(--border);
  font-size:8px;
  letter-spacing:.04em;
  color:var(--text2);
  background:rgba(0,0,0,.2);
}
.login-tactical-kv__cell{
  display:grid;
  grid-template-columns:minmax(0,52px) 1fr;
  gap:6px;
  align-items:baseline;
  padding:5px 10px 6px;
  border-right:1px solid var(--border);
  min-height:2.1em;
}
.login-tactical-kv__cell:nth-child(2n){border-right:none}
.login-tactical-kv__cell:nth-child(-n+2){border-bottom:1px solid var(--border)}
.login-tactical-kv__k{
  color:var(--text2);
  opacity:.75;
  font-weight:600;
}
.login-tactical-kv__v{
  color:var(--text);
  font-variant-numeric:tabular-nums;
  opacity:.88;
  word-break:break-word;
  font-size:7px;
  letter-spacing:.02em;
}
@media (max-width:900px){
  .login-tactical-kv{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .login-tactical-kv{grid-template-columns:1fr}
  .login-tactical-kv__cell{
    border-right:none;
  }
  .login-tactical-kv__cell:nth-child(-n+2){
    border-bottom:0;
  }
  .login-tactical-kv__cell:not(:last-child){
    border-bottom:1px solid var(--border);
  }
}
.login-tactical-title{flex:1 1 auto;text-align:left;color:var(--text);font-weight:700;letter-spacing:.14em;font-size:10px}
.login-tactical-linktag{
  font-size:7px;
  color:var(--text2);
  border:1px solid var(--border);
  padding:1px 5px 0;
  border-radius:1px;
  background:rgba(0,0,0,.25);
}
.login-tactical-meta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;color:var(--text2)}
.login-tactical-time{
  font-variant-numeric:tabular-nums;
  min-width:11.5em;
  text-align:right;
  color:var(--accent);
  text-shadow:0 0 12px var(--neon);
}
.login-tactical-grid{text-align:center}
.login-tactical-led{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:2px;
  background:rgba(94,179,201,.12);
  box-shadow:0 0 0 1px rgba(94,179,201,.25),inset 0 0 4px rgba(0,0,0,.5);
  flex-shrink:0;
  animation:login-led-breathe 3.2s ease-in-out infinite;
}
@keyframes login-led-breathe{
  0%,100%{opacity:.7;box-shadow:0 0 0 1px rgba(94,179,201,.2),inset 0 0 4px rgba(0,0,0,.5)}
  50%{opacity:1;box-shadow:0 0 8px rgba(94,179,201,.3),0 0 0 1px var(--accent),inset 0 0 2px rgba(0,0,0,.4)}
}
@media (max-width:640px){
  .login-tactical-title{flex-basis:100%}
  .login-tactical-bar__row{flex-wrap:wrap}
  .login-tactical-meta{align-self:flex-end}
}
/* Bottom audit / OPSEC strip — fixed, same discipline as top */
.login-mil-footer{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:19;
  padding:5px 12px 6px;
  background:linear-gradient(0deg,var(--surface) 0%,#0a0c10 100%);
  border-top:1px solid var(--border);
  font-size:8px;
  line-height:1.35;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text2);
  box-shadow:0 -1px 0 rgba(94,179,201,.04);
}
.login-mil-footer__inner{
  max-width:min(1200px,100%);
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.login-mil-footer__tick{color:var(--accent);font-size:8px;opacity:.9;text-shadow:0 0 8px var(--neon)}
.login-backdrop{
  position:fixed;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  background:#020408;
}
.login-backdrop__webgl{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  display:block;
  opacity:1;
  mix-blend-mode:screen;
  filter:brightness(1.14) contrast(1.1) saturate(1.22);
}
.login-backdrop__tone{
  z-index:1;
  position:absolute;
  inset:0;
  background:
    linear-gradient(168deg, rgba(120,210,232,.09) 0%, transparent 46%, rgba(0,0,0,.16) 100%),
    radial-gradient(ellipse 88% 76% at 50% 38%, rgba(255,252,245,.04) 0%, transparent 62%),
    radial-gradient(ellipse 90% 82% at 50% 42%, transparent 0%, rgba(0,8,14,.18) 100%);
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.login-backdrop__vignette{
  z-index:2;
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 84% 76% at 50% 40%,transparent 0%,rgba(0,0,0,.26) 68%,rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 88px rgba(0,0,0,.28);
  pointer-events:none;
}
.login-backdrop__noise{
  z-index:3;
  position:absolute;
  inset:0;
  opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:login-film-noise .25s steps(2) infinite;
}
@keyframes login-film-noise{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-.1%,.07%)}
}
@media (prefers-reduced-motion:reduce){
  .login-backdrop__webgl{display:none!important}
  .login-backdrop__noise{animation:none}
  .login-card-aura{animation:none}
  .login-tactical-led{animation:none}
  body.login-body .logo-ring,
  body.login-body .logo-pupil,
  body.login-body .logo-bar-a,
  body.login-body .logo-bar-b,
  body.login-body .logo-cross{animation:none}
  body.login-body .brand-subtitle{animation:none}
  body.login-body .login-submit--premium.btn-primary::before{animation:none!important}
}
@keyframes login-aura-premium{
  0%,100%{transform:translate(0,0) scale(1);opacity:.58}
  50%{transform:translate(7px,-10px) scale(1.045);opacity:.74}
}
@keyframes login-btn-lux-sheen{
  0%,62%{transform:translateX(-160%) skewX(-14deg);opacity:0}
  68%{opacity:.75}
  82%{transform:translateX(240%) skewX(-14deg);opacity:0}
  100%{opacity:0}
}
.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:98px 22px 56px;
  position:relative;
  z-index:4;
}
.login-card-aura{
  position:absolute;
  width:min(560px,94vw);
  height:min(580px,88vh);
  max-height:calc(100vh - 120px);
  border-radius:28px;
  background:
    radial-gradient(ellipse 68% 52% at 48% 38%,rgba(130,220,242,.36) 0%,rgba(94,179,201,.12) 38%,transparent 68%),
    radial-gradient(ellipse 50% 48% at 72% 62%,rgba(212,190,120,.16) 0%,transparent 55%);
  filter:blur(56px);
  opacity:.62;
  pointer-events:none;
  z-index:0;
  animation:login-aura-premium 11s ease-in-out infinite;
}
.login-card--premium .login-card__glass{
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(152deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 22%,transparent 48%,rgba(255,255,255,.03) 78%,rgba(255,255,255,.08) 100%),
    linear-gradient(0deg,rgba(255,255,255,.07) 0%,transparent 14%,transparent 86%,rgba(0,0,0,.12) 100%);
  mix-blend-mode:overlay;
  opacity:.55;
}
.login-card--premium .login-card__bevel{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(152deg,rgba(255,255,255,.16) 0%,transparent 22%,transparent 78%,rgba(0,0,0,.22) 100%);
  opacity:.38;
}
.login-card--premium{
  width:100%;
  max-width:484px;
  position:relative;
  z-index:1;
  background:
    linear-gradient(190deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 12%,transparent 38%),
    linear-gradient(162deg,rgba(22,32,48,.28) 0%,rgba(12,18,32,.22) 48%,rgba(6,10,20,.32) 100%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  padding:0;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22) inset,
    0 1px 0 rgba(255,255,255,.22) inset,
    0 2px 0 rgba(212,190,120,.1) inset,
    0 -1px 0 rgba(0,0,0,.15) inset,
    0 48px 100px rgba(0,6,24,.45),
    0 24px 48px rgba(0,12,40,.35),
    0 0 120px rgba(94,179,201,.12),
    0 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(36px) saturate(1.55) brightness(1.05);
  -webkit-backdrop-filter:blur(36px) saturate(1.55) brightness(1.05);
  transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .4s ease,border-color .3s ease,backdrop-filter .4s ease;
}
.login-card--premium::before{
  content:"";
  position:absolute;
  top:0;
  left:6%;
  right:6%;
  height:2px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,transparent 0%,rgba(120,210,232,.95) 22%,rgba(232,210,150,.95) 50%,rgba(120,210,232,.95) 78%,transparent 100%);
  opacity:.95;
  z-index:6;
  box-shadow:0 0 24px rgba(120,210,232,.45);
}
.login-card--premium::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:21px;
  pointer-events:none;
  z-index:5;
  border:1px solid rgba(255,255,255,.06);
  mask-image:linear-gradient(180deg,#000 0%,transparent 8%,transparent 92%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 8%,transparent 92%,#000 100%);
}
.login-card--premium:hover{
  transform:translateY(-3px);
  border-color:rgba(130,210,232,.34);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18) inset,
    0 1px 0 rgba(255,255,255,.26) inset,
    0 2px 0 rgba(212,190,120,.12) inset,
    0 56px 120px rgba(0,8,32,.5),
    0 32px 64px rgba(0,16,48,.38),
    0 0 140px rgba(94,179,201,.2),
    0 0 1px rgba(255,255,255,.18);
}
.login-card:focus-within,
.login-card--premium:focus-within{
  outline:none;
  border-color:rgba(130,210,232,.45);
  box-shadow:
    0 0 0 1px rgba(94,179,201,.12) inset,
    0 1px 0 rgba(255,255,255,.24) inset,
    0 44px 96px rgba(0,8,30,.48),
    0 0 72px rgba(94,179,201,.16),
    0 0 1px rgba(130,210,232,.6);
}
.login-corners{position:absolute;inset:0;z-index:4;pointer-events:none}
.login-corners__q{
  position:absolute;
  width:22px;
  height:22px;
  border:1px solid rgba(232,210,150,.35);
  box-shadow:0 0 12px rgba(94,179,201,.12);
}
.login-corners__q:nth-child(1){top:14px;left:14px;border-right:0;border-bottom:0}
.login-corners__q:nth-child(2){top:14px;right:14px;border-left:0;border-bottom:0}
.login-corners__q:nth-child(3){bottom:14px;left:14px;border-right:0;border-top:0}
.login-corners__q:nth-child(4){bottom:14px;right:14px;border-left:0;border-top:0}
.brand-login{
  padding:28px 34px 24px;
  margin:10px 0 0;
  position:relative;
  z-index:3;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-login .brand-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.brand-tagline-login{
  display:block;
  margin-top:3px;
  font-size:9px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(226,232,245,.72);
  font-weight:600;
  font-family:ui-serif,Georgia,"Times New Roman",Times,serif;
}
/* Brand — premium halo */
body.login-body .brand-title{
  font-size:clamp(1.2rem,2.7vw,1.46rem);
  text-indent:0;
  padding-left:.12em;
  color:var(--accent-strong);
  text-shadow:
    0 0 26px rgba(94,179,201,.42),
    0 2px 0 rgba(0,0,0,.5),
    2px 0 rgba(139,132,156,.52);
  letter-spacing:.38em;
}
body.login-body .brand-subtitle{
  margin-top:4px;
  padding-left:0;
  text-indent:0!important;
  letter-spacing:.32em!important;
  font-size:clamp(2rem,7vw,2.75rem)!important;
  font-weight:700!important;
  line-height:1.05!important;
  background:linear-gradient(148deg,#8ee8fa 0%,#b4f0e4 38%,#e8d8a8 88%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:none;
  animation:none;
  text-shadow:none;
}
body.login-body .brand-logo{
  filter:drop-shadow(0 0 18px rgba(94,179,201,.52));
}
body.login-body .logo-ring{animation:logo-pulse 4.5s ease-in-out infinite}
body.login-body .logo-pupil{animation:logo-blink 4s ease-in-out infinite}
body.login-body .logo-bar-a{animation:bar-slide 3.2s ease-in-out infinite}
body.login-body .logo-bar-b{animation:bar-slide 3.5s ease-in-out infinite reverse}
body.login-body .logo-cross{animation:cross-fade 5.5s ease-in-out infinite}
.login-form{
  display:flex;
  flex-direction:column;
  gap:20px;
  position:relative;
  z-index:3;
  padding:24px 34px 36px;
}
.login-form__fieldgroup{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.login-label{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 12px;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(215,225,238,.76);
  margin:0;
  font-weight:700;
}
body.login-body .mono{
  font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace;
}
.login-input{
  box-sizing:border-box;
  width:100%;
  padding:15px 18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(185deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 40%,transparent 100%),rgba(255,255,255,.035);
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  backdrop-filter:blur(8px) saturate(1.1);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
  transition:border-color .25s ease,box-shadow .3s ease,background .28s ease,transform .22s ease;
}
.login-input::placeholder{
  color:rgba(164,174,192,.54);
}
.login-input:hover{
  border-color:rgba(130,210,232,.38);
  background:linear-gradient(185deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 45%,transparent 100%),rgba(255,255,255,.048);
}
.login-input:focus{
  outline:none;
  border-color:rgba(130,225,238,.62);
  background:linear-gradient(185deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 100%),rgba(6,14,26,.42);
  box-shadow:
    0 0 0 1px rgba(94,179,201,.42),
    0 14px 40px rgba(0,22,52,.38),
    0 0 36px rgba(94,179,201,.1);
}
.login-err{
  color:var(--red);
  font-size:13px;
  margin:0 2px;
  line-height:1.45;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(248,113,113,.08);
  border:1px solid rgba(248,113,113,.28);
}
body.login-body .login-submit--premium.btn-primary{
  margin-top:2px!important;
  padding:15px 22px!important;
  font-weight:700!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
  width:100%!important;
  border-radius:12px!important;
  font-size:11px!important;
  border:none!important;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:linear-gradient(168deg,#6bc4dd 0%,#519bb0 42%,#3e7688 100%)!important;
  color:rgba(252,253,254,.98)!important;
  text-shadow:0 1px 3px rgba(0,14,26,.46)!important;
  border-color:transparent!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 14px 32px rgba(46,154,178,.42),
    0 18px 48px rgba(0,24,48,.52)!important;
}
body.login-body .login-submit--premium.btn-primary::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(105deg,transparent 0%,transparent 40%,rgba(255,255,255,.52) 50%,transparent 60%,transparent 100%)!important;
  width:52%!important;
  animation:login-btn-lux-sheen 9s cubic-bezier(.4,0,.2,1) infinite!important;
  pointer-events:none!important;
}
body.login-body .login-submit--premium.btn-primary:hover:not(:disabled){
  filter:brightness(1.07)!important;
  background:linear-gradient(168deg,#75cee4 0%,#56a6bb 42%,#468090 100%)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.26) inset,
    0 18px 40px rgba(52,168,188,.46),
    0 22px 56px rgba(0,28,54,.54)!important;
}
body.login-body .login-submit.btn.btn-primary:disabled{
  opacity:.42;
  cursor:not-allowed;
  filter:saturate(.72);
}
.login-submit{margin-top:0;width:100%}

/* RTL (Arabic): mirror shell; viewer grid uses logical properties where possible */
html[dir="rtl"] #app{flex-direction:row-reverse}
html[dir="rtl"] #sidebar{
  border-right:none;
  border-left:1px solid var(--border);
  box-shadow:-4px 0 24px rgba(0,0,0,.4);
}
html[dir="rtl"] .nav-item{
  border-left:none!important;
  border-right:2px solid transparent;
  padding:10px 20px;
}
html[dir="rtl"] .nav-item[hidden],
html[dir="rtl"] .nav-item.nav-item--role-hidden{
  display:none!important;
}
html[dir="rtl"] .nav-item.active{border-right-color:var(--accent)}
html[dir="rtl"] #topbar{
  flex-direction:row-reverse;
}
html[dir="rtl"] .topbar-leading{
  flex-direction:row-reverse;
}
html[dir="rtl"] .topbar-actions{
  flex-direction:row-reverse;
}
html[dir="rtl"] .fm-path-line,
html[dir="rtl"] .fm-foot-row,
html[dir="rtl"] .fm-cluster-btns,
html[dir="rtl"] .fm-toolbar-groups,
html[dir="rtl"] .fm-foot-buttons{
  flex-direction:row-reverse;
}
html[dir="rtl"] .fm-tool-cluster--end{
  margin-inline-start:0;
  margin-inline-end:auto;
}

/* Remote browser — full-viewport stream with ultra-compact toolbar */
.browser-modal-overlay.modal-overlay{
  align-items:stretch;
  justify-content:stretch;
  padding:0!important;
  inset:0;
  width:100%;
  min-width:100%;
  max-width:100%;
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  box-sizing:border-box;
  overflow:hidden;
}
.modal-dialog.modal-browser{
  width:100%;
  max-width:100%;
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  display:flex;
  flex-direction:column;
  border-radius:0;
  border:none;
  box-shadow:none;
  background:#050508;
  flex:1;
  min-height:0;
}
.browser-modal-body.modal-body{
  flex:1 1 0!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}
.browser-chrome.browser-layout-phone{
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
  border-radius:0;
}
/* ── Control deck: single dense strip for max stream area ── */
.browser-control-deck{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:3px 8px 2px;
  background:linear-gradient(180deg,#0e1018 0%,#0a0c12 100%);
  border-bottom:1px solid rgba(94,179,201,.12);
  box-shadow:0 1px 6px rgba(0,0,0,.4);
}
.browser-deck-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-bottom:2px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.browser-inline-title{
  margin:0;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent,#5eb3c9);
}
.browser-inline-close.modal-close{
  padding:2px 8px;
  font-size:1.15rem;
  line-height:1;
  color:var(--red,#ff4466);
}
.browser-inline-close.modal-close:hover{color:#fff}
.browser-deck-url-row{
  display:flex;
  align-items:center;
  gap:5px;
  margin:2px 0 1px;
}
.browser-tab-chip-wrap{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:5px;
  min-width:0;
  max-width:180px;
  padding:2px 6px;
  border-radius:4px;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.08);
  flex-shrink:1;
}
.browser-tab-chip-k{
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:rgba(94,179,201,.5);
  line-height:1;
  flex-shrink:0;
}
.browser-tab-chip-v{
  font-size:10px;
  font-weight:500;
  color:rgba(255,255,255,.8);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
  min-width:0;
}
.browser-omnibox--grow{
  flex:1;
  min-width:0;
  min-height:28px;
  padding:0 6px;
  border-radius:4px;
}
.browser-deck-actions-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3px 5px;
  margin-bottom:0;
}
.browser-deck-actions-row .browser-key-toggle{
  margin-left:auto;
}
.browser-deck-actions-row .browser-key-capture-btn{
  margin-left:0;
}
.browser-chrome[data-agent-view="desktop"]{
  box-shadow:inset 0 0 0 1px rgba(168,85,247,.12);
}
.browser-chrome[data-agent-view="desktop"] .browser-tab-chip-wrap{
  border-color:rgba(168,85,247,.28);
}
.browser-chrome[data-agent-view="desktop"] .browser-tab-chip-k{
  color:rgba(168,85,247,.65);
}
.browser-omnibox{
  flex:1;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:0 8px;
  min-height:30px;
  border-radius:6px;
  background:rgba(10,12,18,.95);
  border:1px solid rgba(255,255,255,.12);
}
.browser-omnibox:focus-within{
  border-color:rgba(94,179,201,.35);
  box-shadow:0 0 0 1px rgba(94,179,201,.1);
}
.browser-sec-icon{
  flex-shrink:0;
  width:7px;height:7px;border-radius:50%;
  border:2px solid rgba(94,179,201,.5);
}
.browser-url-field{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  color:var(--text1,#e8e8ee);
  font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  outline:none;
}
.browser-url-field::placeholder{color:rgba(255,255,255,.3)}
.browser-go-btn{flex-shrink:0;padding:0 12px;border-radius:4px;font-weight:600;font-size:11px;min-height:28px;align-self:stretch}
.browser-nav-cluster{display:inline-flex;gap:2px;flex-shrink:0}
.browser-icon-btn{
  min-width:30px;height:28px;
  padding:0 5px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:var(--text1,#e4e4ec);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s,border-color .12s;
}
.browser-icon-btn:hover{background:rgba(94,179,201,.12);border-color:rgba(94,179,201,.28);color:#5eb3c9}
.browser-mode-seg{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  border-radius:4px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.3);
}
.browser-mode-seg .browser-mode-label{
  padding:0 4px 0 5px;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text2);
  margin:0;
}
.browser-seg-btn{
  padding:3px 7px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.5);
  font-size:10px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s,color .12s;
}
.browser-seg-btn:hover{color:rgba(255,255,255,.85)}
.browser-seg-btn.active{
  background:rgba(94,179,201,.18);
  color:#5eb3c9;
}
.browser-fps-label{
  font-size:10px;
  color:var(--text2);
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.browser-fps-input{
  width:36px;
  padding:2px 3px;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  color:var(--text1);
  font-family:inherit;
  font-size:10px;
}
.browser-session-btns{display:inline-flex;gap:3px;flex-shrink:0}
.browser-session-btns .btn-sm{padding:3px 8px;font-size:10px}
.browser-details{
  font-size:9px;
  color:var(--text2);
  margin:0;
  padding:0;
  border:none;
}
.browser-details summary{
  cursor:pointer;
  padding:1px 0;
  user-select:none;
  color:rgba(255,255,255,.35);
  list-style:none;
  font-size:9px;
}
.browser-details summary::-webkit-details-marker{display:none}
.browser-details summary::before{content:"▸ ";font-size:8px}
.browser-details[open] summary::before{content:"▾ "}
.browser-details summary:hover{color:rgba(94,179,201,.8)}
.browser-details[open] summary{margin-bottom:1px}
.browser-net-meta,.browser-page-echo{
  font-size:9px;
  color:var(--text2);
  margin:0 0 2px;
  white-space:pre-wrap;
  word-break:break-all;
  max-height:36px;
  overflow:auto;
  padding:3px 6px;
  border-radius:3px;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.05);
}
.browser-key-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,.82);
  cursor:pointer;
  user-select:none;
}
.browser-key-toggle input{accent-color:#5eb3c9}
.browser-key-capture-btn{
  padding:3px 8px;
  border-radius:4px;
  border:1px solid rgba(94,179,201,.35);
  background:rgba(94,179,201,.12);
  color:#5eb3c9;
  font-size:10px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
}
.browser-key-capture-btn:hover{background:rgba(94,179,201,.2)}
.browser-key-capture-btn:focus{outline:2px solid rgba(94,179,201,.45);outline-offset:1px}
.browser-need-agent{
  margin:0 0 2px;
  font-size:10px;
  padding:4px 6px;
  color:var(--orange,#ffb020);
  background:rgba(255,176,32,.06);
  border-radius:3px;
}
.browser-text-input-row{
  display:flex;
  align-items:center;
  gap:4px;
  margin:2px 0 0;
  padding:2px 0;
}
.browser-text-field{
  flex:1;
  min-width:0;
  padding:5px 8px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.4);
  color:#f1f5f9;
  font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.browser-text-field:focus{
  border-color:rgba(94,179,201,.45);
  box-shadow:0 0 0 1px rgba(94,179,201,.12);
}
.browser-text-field::placeholder{color:rgba(255,255,255,.25);font-size:11px}
.browser-text-send{flex-shrink:0;font-weight:600}
.browser-text-fill{flex-shrink:0}
.browser-status-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:0;
}
.browser-status-text{
  font-size:9px;
  font-weight:500;
  color:rgba(94,179,201,.6);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}
.browser-status-text--err{color:rgba(255,68,102,.8)}
.browser-click-ripple{
  position:absolute;
  width:28px;
  height:28px;
  margin:-14px 0 0 -14px;
  border-radius:50%;
  border:2px solid rgba(94,179,201,.7);
  background:rgba(94,179,201,.15);
  pointer-events:none;
  z-index:5;
  animation:browser-ripple .45s ease-out forwards;
}
@keyframes browser-ripple{
  0%{transform:scale(.5);opacity:1}
  100%{transform:scale(2.2);opacity:0}
}
/* Stream viewport: maximum area — fills all space below toolbar */
.browser-phone-stage{
  flex:1 1 0;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background:#000;
  overflow:hidden;
}
.browser-viewport-shell{
  flex:1 1 0;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:0;
  margin:0;
  overflow:hidden;
}
.browser-frame-wrap{
  position:relative;
  flex:1 1 0;
  width:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  background:#000;
  box-shadow:none;
  outline:none;
}
.browser-frame-wrap:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(94,179,201,.35);
}
.browser-frame-wrap.has-frame{background:#000}
.browser-remote-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  display:block;
  cursor:crosshair;
  background:#000;
  image-rendering:auto;
}
.browser-frame-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.3);
  pointer-events:none;
  background:radial-gradient(ellipse at center,#0c0e14 0%,#050508 70%);
}
.browser-frame-wrap.has-frame .browser-frame-empty{display:none}
.browser-frame-stats{
  position:absolute;
  bottom:6px;
  right:8px;
  z-index:3;
  pointer-events:none;
  font-size:10px;
  font-weight:600;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:rgba(94,179,201,.7);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  padding:3px 7px;
  border-radius:4px;
  background:rgba(0,0,0,.55);
}
@media (max-width:560px){
  .browser-deck-url-row{
    flex-wrap:wrap;
  }
  .browser-tab-chip-wrap{
    max-width:none;
    flex-basis:100%;
  }
  .browser-go-btn{min-height:28px}
  .browser-control-deck{padding:2px 4px 1px}
}

/* Remote camera — full viewport, ultra-compact controls */
.cam-modal-overlay{
  padding:0!important;
  align-items:stretch;
  justify-content:stretch;
}
.modal-cam{
  width:100%;
  max-width:100%;
  height:100vh;
  height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:#050508;
  border:none;
  box-shadow:none;
  border-radius:0;
  overflow:hidden;
}
.cam-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-bottom:1px solid rgba(94,179,201,.1);
  padding:6px 12px;
  flex-shrink:0;
  background:linear-gradient(180deg,#0e1018,#0a0c12);
  box-shadow:0 1px 6px rgba(0,0,0,.4);
}
.cam-head-left{display:flex;align-items:center;gap:10px;min-width:0}
.cam-modal-head h2{margin:0;font-size:0.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent,#5eb3c9)}
.cam-status-line{
  margin:0;
  font-size:10px;
  color:var(--text2);
  line-height:1;
  white-space:nowrap;
}
.cam-head-controls{display:flex;gap:4px;align-items:center;flex-shrink:0}
.cam-head-controls .btn-sm{padding:3px 10px;font-size:10px}
.cam-modal-body{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0!important;
  min-height:0;
  flex:1;
}
.cam-viewport-shell{
  flex:1 1 0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#000;
  overflow:hidden;
}
.cam-frame-wrap{
  flex:1 1 0;
  width:100%;
  min-height:0;
  overflow:hidden;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.cam-remote-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:none;
  image-rendering:auto;
  touch-action:none;
}
.cam-frame-wrap.has-frame .cam-frame-empty{display:none}
.cam-frame-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.3);
  pointer-events:none;
}
.cam-frame-stats{
  position:absolute;
  bottom:8px;
  right:10px;
  z-index:3;
  pointer-events:none;
  font-size:10px;
  font-weight:600;
  font-family:ui-monospace,monospace;
  color:rgba(94,179,201,.7);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  padding:3px 7px;
  border-radius:4px;
  background:rgba(0,0,0,.55);
}
.cam-frame-stats{
  position:absolute;
  bottom:8px;
  right:10px;
  z-index:3;
  pointer-events:none;
  font-size:10px;
  font-weight:600;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:rgba(94,179,201,.7);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  padding:3px 7px;
  border-radius:4px;
  background:rgba(0,0,0,.55);
}
.cam-toolbar{
  flex-shrink:0;
  padding:6px 12px 8px;
  background:linear-gradient(0deg,#0a0c12,#0e1018);
  border-top:1px solid rgba(94,179,201,.08);
}
.cam-toolbar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
  .cam-toolbar-row--sliders{
    flex-direction:row;
    align-items:center;
  gap:8px;
}
.cam-slider-label{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  color:var(--text2);
  min-width:0;
  white-space:nowrap;
}
.cam-val{
  font-weight:600;
  color:var(--accent,#5eb3c9);
  min-width:1.2em;
  font-size:10px;
}
.cam-range{
  width:100%;
  max-width:180px;
  accent-color:var(--accent,#5eb3c9);
}
@media (max-width:520px){
  .cam-toolbar-row--sliders{flex-wrap:wrap}
  .cam-range{max-width:100%}
}

/* Screen desk — tall phone-shaped VNC mirror + text sidebar (no wasted wide bezel) */
.modal-screen-reader-overlay{
  padding:clamp(8px,1.5vw,16px)!important;
  align-items:center;
  justify-content:center;
  overscroll-behavior:contain;
}
.modal-screen-reader{
  /* Galaxy S25 class: logical 1080×2340 (19.5:9 FHD+) — bezel column tracks device width */
  --sr-phone-col:min(520px,min(94vw,calc((100dvh - 120px) * 1080 / 2340)));
  width:min(1280px,calc(100vw - clamp(16px,3vw,32px)));
  max-width:100%;
  box-sizing:border-box;
  max-height:calc(100dvh - clamp(16px,3vh,32px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  height:calc(100dvh - clamp(16px,3vh,32px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  min-height:min(620px,min(92dvh,calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px)));
  display:flex;
  flex-direction:column;
  border-radius:clamp(10px,1.4vw,14px);
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 24px 56px rgba(0,0,0,.55), inset 0 1px 0 rgba(148,163,184,.08);
  background:linear-gradient(180deg,#1a2333 0%,#121924 52%,#0e1420 100%);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
@media (max-height:640px) and (min-width:720px){
  .modal-screen-reader{
    min-height:min(520px,calc(100dvh - 16px));
    height:calc(100dvh - clamp(8px,2vh,20px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  }
}
.sr-head{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(8px,1.5vw,14px);
  padding:clamp(8px,1.35vh,14px) clamp(12px,2vw,18px);
  border-bottom:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,rgba(30,41,59,.55) 0%,rgba(15,23,42,.72) 100%);
}
.sr-head-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.sr-title{
  margin:0;
  font-size:clamp(0.95rem,0.34rem + 1vw,1.06rem);
  font-weight:600;
  letter-spacing:-.02em;
  color:#f1f5f9;
}
.sr-badge{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(56,189,248,.12);
  color:#bae6fd;
  border:1px solid rgba(56,189,248,.35);
}
.sr-live-led{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(148,163,184,.45);
  box-shadow:0 0 0 2px rgba(0,0,0,.35);
  transition:background .2s,box-shadow .2s;
}
.sr-live-led--on{
  background:#34d399;
  box-shadow:0 0 0 2px rgba(0,0,0,.3);
}
@media (prefers-reduced-motion: no-preference){
  .sr-live-led--polling{
    animation:sr-led-breath 1.1s ease-in-out infinite;
  }
}
@keyframes sr-led-breath{
  0%,100%{ opacity:1; filter:brightness(1); }
  50%{ opacity:.52; filter:brightness(0.88); }
}
.sr-body{
  padding:clamp(8px,1.2vh,12px) clamp(8px,1.6vw,14px) clamp(10px,1.4vh,14px)!important;
  display:flex;
  flex-direction:column;
  gap:0;
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
}
.sr-grid{
  display:grid;
  grid-template-columns:minmax(0, var(--sr-phone-col)) minmax(260px, 1fr);
  gap:clamp(14px,2vw,22px);
  min-height:0;
  flex:1 1 0;
  align-items:stretch;
  height:100%;
}
@media (max-width:1100px) and (min-width:901px){
  .sr-grid{
    grid-template-columns:minmax(0, min(468px, 44vw)) minmax(240px, 1fr);
    gap:14px;
  }
}
@media (max-width:900px){
  .sr-grid{
    grid-template-columns:1fr;
    /* Wireframe column gets flexible height; text tools compact below */
    grid-template-rows:minmax(0,1fr) auto;
    gap:clamp(8px,2vw,12px);
    flex:1 1 0;
    min-height:0;
    height:100%;
  }
}
@media (max-height:520px) and (min-width:700px){
  .sr-grid{
    grid-template-columns:minmax(0,min(440px,40vw)) minmax(200px, 1fr);
    grid-template-rows:1fr;
    gap:10px;
  }
  .sr-body{padding-top:6px!important;padding-bottom:8px!important}
}
.sr-col{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
}
.sr-col--ctrl{
  flex:1 1 0;
  min-height:0;
  gap:5px;
}
.sr-col--ctrl .sr-touch-pad{
  flex:1 1 0;
}
.sr-col--read{
  flex:0 1 auto;
  min-height:0;
  overflow:auto;
}
@media (min-width:901px){
  .sr-col--read{
    flex:1 1 0;
    min-height:0;
  }
}
.sr-nav{
  flex-shrink:0;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.sr-nav-btn{
  flex:1;
  min-width:0;
  font-weight:600;
  font-size:clamp(11px,2.6vw,13px);
  min-height:40px;
}
@media (max-width:480px){
  .sr-nav-btn{min-height:44px;font-size:13px}
}
.sr-touch-pad{
  --sr-map-w:1080;
  --sr-map-h:2340;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 0;
  min-height:clamp(460px, min(84dvh, calc(96dvh - 150px)), 980px);
  width:100%;
  max-width:100%;
  margin-inline:0;
  padding:clamp(8px,2cqmin,16px) clamp(10px,2.2cqmin,18px);
  box-sizing:border-box;
  border-radius:14px;
  border:1px solid #111;
  box-shadow:
    inset 0 0 0 2px #000000,
    0 12px 40px rgba(0,0,0,.92);
  container-type:size;
  container-name:srtpad;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    #000000;
  background-size:28px 28px, 28px 28px, auto;
  overflow:hidden;
  isolation:isolate;
}
.sr-screen-mirror{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(100cqw, calc(100cqh * var(--sr-map-w) / var(--sr-map-h)));
  height:min(100cqh, calc(100cqw * var(--sr-map-h) / var(--sr-map-w)));
  max-width:100%;
  max-height:100%;
  box-sizing:border-box;
  border-radius:4px;
  overflow:visible;
}
.sr-mirror-stack{
  position:relative;
  flex-shrink:0;
  overflow:hidden;
  border-radius:3px;
  background:#000000;
  box-shadow:
    inset 0 0 0 1px #000000,
    0 0 0 1px #161616,
    0 6px 28px rgba(0,0,0,.55);
}
.sr-desk-live{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  object-position:center;
  z-index:0;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  display:block;
  filter:brightness(1.09) contrast(1.06) saturate(1.04);
}
.sr-desk-fallback{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(10px,3cqmin,16px);
  font-size:clamp(10px,2.4cqmin,12px);
  font-weight:500;
  line-height:1.4;
  color:rgba(248,250,252,.36);
  letter-spacing:.01em;
  pointer-events:none;
  background:radial-gradient(ellipse 80% 55% at 50% 42%, #0a0a0a 0%, #000000 88%);
}
.sr-mirror-stack--has-stream .sr-desk-fallback{
  display:none;
}
.sr-touch-pad::before{
  content:"";
  display:block!important;
  position:absolute;
  top:clamp(6px,2cqmin,12px);
  left:50%;
  transform:translateX(-50%);
  width:min(118px,32%);
  height:clamp(22px,4.8cqmin,30px);
  border-radius:999px;
  background:#030303;
  border:1px solid #272727;
  z-index:4;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.sr-touch-pad::after{
  content:"";
  display:block!important;
  position:absolute;
  right:clamp(7px,1.8cqmin,11px);
  top:20%;
  bottom:20%;
  width:4px;
  border-radius:4px;
  background:linear-gradient(180deg,#1a1a1a,#0a0a0a);
  z-index:4;
  pointer-events:none;
  box-shadow:inset -1px 0 0 #000;
}
@media (max-width:900px){
  .modal-screen-reader{
    --sr-phone-col:min(480px, 92vw);
  }
  .sr-touch-pad{
    flex:1 1 0;
    min-height:clamp(400px, min(72dvh, calc(88dvh - 120px)), 900px);
    width:100%;
    max-width:min(480px, 100%);
    margin-inline:auto;
  }
  .sr-col--ctrl .sr-touch-pad{
    max-width:min(480px, 100%);
  }
}
@media (max-width:480px){
  .modal-screen-reader-overlay{
    padding-top:max(4px,env(safe-area-inset-top,0px))!important;
    padding-bottom:max(4px,env(safe-area-inset-bottom,0px))!important;
    padding-left:max(4px,env(safe-area-inset-left,0px))!important;
    padding-right:max(4px,env(safe-area-inset-right,0px))!important;
    align-items:stretch;
  }
  .modal-screen-reader{
    width:100%;
    max-width:100%;
    border-radius:10px;
    height:calc(100dvh - max(8px,env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px),12px));
    max-height:100dvh;
    min-height:min(520px,calc(100dvh - max(8px,env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px),12px)));
  }
  .sr-touch-pad{
    min-height:clamp(360px,min(58dvh, calc(84dvh - 100px)), 800px);
    border-radius:12px;
  }
}
@media (max-height:500px){
  .sr-touch-pad{
    min-height:min(260px, 48dvh);
  }
}
.sr-hits-layer{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:normal;
}
.sr-skel-win{
  position:absolute;
  box-sizing:border-box;
  border:1px solid #1a1a1a;
  background:rgba(0,0,0,.9);
  border-radius:4px;
  box-shadow:inset 0 0 0 1px #000000;
  backdrop-filter:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/** Fallback only (no accessibility hits yet): faint window hull, no caption bar. */
.sr-skel-win--minimal{
  border:1px dashed rgba(255,255,255,.16);
  background:transparent;
  box-shadow:none;
}
.sr-skel-win-cap{
  flex-shrink:0;
  padding:3px 8px 5px;
  font-weight:600;
  font-size:clamp(7.5px, min(2.05cqw, 1.1cqh), 10.5px);
  line-height:1.25;
  letter-spacing:.07em;
  text-transform:uppercase;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#ffffff;
  background:#000000;
  border-bottom:1px solid #262626;
  pointer-events:none;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  text-shadow:none;
}
.sr-hit{
  position:absolute;
  box-sizing:border-box;
  border:1px solid #202020;
  border-radius:4px;
  background:rgba(0,0,0,.92);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  min-width:9px;
  min-height:7px;
  padding:0;
  container-type:size;
  container-name:srhit;
  contain:paint;
  box-shadow:inset 0 0 0 1px #000000;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.sr-hit:hover{
  border-color:#3d3d3d;
  background:rgba(0,0,0,.96);
  box-shadow:inset 0 0 0 1px #0a0a0a;
}
.sr-hit--text:hover{
  border-color:#ffffff;
  background:rgba(0,0,0,.93);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.sr-hit--field{
  border:2px solid #dc2626;
  border-color:#ef4444;
  background:rgba(0,0,0,.82);
  box-shadow:inset 0 0 0 1px rgba(239,68,68,.38), inset 0 0 24px rgba(127,29,29,.35);
}
.sr-hit--field:hover{
  border-color:#f87171;
  box-shadow:inset 0 0 0 1px rgba(252,165,165,.45), inset 0 0 28px rgba(153,27,27,.42);
}
.sr-hit--click{
  border:1px solid #1c1c1c;
  background:rgba(0,0,0,.94);
  box-shadow:inset 0 0 0 1px #000000;
}
.sr-hit--text{
  border:1px solid rgba(255,255,255,.58);
  background:rgba(0,0,0,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 0 12px rgba(0,0,0,.4);
}
.sr-hit--icon{
  border:1px dashed #242424;
  background:rgba(0,0,0,.94);
}
.sr-hit--control{
  border:1px dashed #242424;
  background:rgba(0,0,0,.94);
}
.sr-hit-cap{
  flex-shrink:0;
  align-self:stretch;
  width:100%;
  box-sizing:border-box;
  padding:3px 6px 5px;
  font-size:clamp(8px,min(3.35cqw,2.72cqh),13px);
  line-height:1.3;
  font-weight:600;
  letter-spacing:.02em;
  color:#ffffff;
  background:#000000;
  border-bottom:1px solid #2a2a2a;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  text-align:left;
  pointer-events:none;
  text-shadow:none;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.sr-hit--field .sr-hit-cap{
  color:#ffffff;
  font-weight:600;
  font-size:clamp(8.75px,min(3.72cqw,2.95cqh),14px);
  -webkit-line-clamp:4;
  line-clamp:4;
  font-family:ui-monospace,SFMono-Regular,Consolas,"Segoe UI Mono",monospace;
  border-bottom:1px solid rgba(239,68,68,.92);
  background:linear-gradient(180deg,#0a0000 0%,#000000 100%);
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
}
.sr-hit--click .sr-hit-cap{
  color:#ffffff;
  font-weight:600;
  text-align:center;
  -webkit-line-clamp:2;
  line-clamp:2;
  border-bottom:1px solid #2e2e2e;
  background:#000000;
}
.sr-hit--text .sr-hit-cap{
  color:#fafafa;
  font-weight:600;
  font-size:clamp(8.5px,min(3.45cqw,2.82cqh),13.75px);
  text-align:left;
  font-variant-numeric:normal;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.015em;
  -webkit-line-clamp:4;
  line-clamp:4;
  border-bottom:1px solid rgba(255,255,255,.45);
  background:#020202;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-shadow:0 1px 1px rgba(0,0,0,.92), 0 0 1px rgba(0,0,0,.8);
}
.sr-hit--icon .sr-hit-cap{
  color:#ffffff;
  text-align:center;
  font-weight:600;
  font-size:clamp(7.75px,min(3.08cqw,2.42cqh),11.75px);
  -webkit-line-clamp:2;
  line-clamp:2;
  border-bottom:1px solid #2e2e2e;
  background:#000000;
}
.sr-hit--control .sr-hit-cap{
  color:#ffffff;
  text-align:center;
  font-size:clamp(7.65px,min(3.08cqw,2.38cqh),11.75px);
  font-weight:600;
  -webkit-line-clamp:2;
  line-clamp:2;
  border-bottom:1px solid #2e2e2e;
  background:#000000;
}
@supports (font-size:1cqw){
  .sr-hit-cap{
    font-size:clamp(8px,min(3.28cqw,2.74cqh),13px);
  }
  }
@container srhit (max-height:22px){
  .sr-hit-cap{
    -webkit-line-clamp:1;
    line-clamp:1;
    padding:1px 4px 2px;
    font-size:clamp(7.25px,min(40cqw,30cqh),10.5px);
    font-weight:600;
  }
}
@container srhit (min-height:52px){
  .sr-hit-cap{
    -webkit-line-clamp:4;
    line-clamp:4;
    font-size:clamp(9px,min(3.7cqw,2.45cqh),13px);
    padding:5px 8px 6px;
    line-height:1.26;
  }
}
.sr-touch-hud{
  position:absolute;
  right:max(4px, env(safe-area-inset-right, 0px));
  bottom:max(4px, env(safe-area-inset-bottom, 0px));
  z-index:4;
  pointer-events:none;
  padding:6px 10px;
  border-radius:6px;
  background:#000000;
  border:1px solid #2a2a2a;
  font-weight:600;
  font-size:clamp(11px,2.2vw,14px);
  line-height:1.25;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#ffffff;
  letter-spacing:.02em;
  min-width:88px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
@supports (font-size:1cqw){
  .sr-touch-hud{
    right:max(6px,env(safe-area-inset-right,0px));
    bottom:max(6px,env(safe-area-inset-bottom,0px));
    padding:clamp(5px,1.2cqmin,8px) clamp(8px,2.5cqw,12px);
    font-size:clamp(10px,min(3.2cqw,2.8cqh),14px);
    min-width:min(100px,22cqw);
  }
}
.sr-touch-layer{
  position:absolute;
  inset:0;
  z-index:3;
  cursor:crosshair;
  outline:none;
  touch-action:none;
}
.sr-touch-layer:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.34);
}

.sr-cb{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  font-weight:500;
  color:#cbd5e1;
  cursor:pointer;
  user-select:none;
}
.sr-cb input{accent-color:#38bdf8}
.sr-toolbar{
  flex-shrink:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(6px,1.4vw,12px);
}
@media (max-width:520px){
  .sr-toolbar{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }
  .sr-toolbar .sr-live-label{
    grid-column:1/-1;
  }
  .sr-toolbar .sr-select{
    min-width:0;
    width:100%;
  }
  .sr-toolbar .btn{
    width:100%;
    justify-self:stretch;
  }
}
.sr-live-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:500;
  color:#e2e8f0;
  letter-spacing:.01em;
  cursor:pointer;
  user-select:none;
}
.sr-live-label input{accent-color:#38bdf8}
.sr-select{
  font-size:12px;
  font-weight:500;
  padding:6px 10px;
  border-radius:6px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(15,23,42,.85);
  color:#bae6fd;
}
.sr-select:focus{
  outline:none;
  border-color:rgba(56,189,248,.72);
  box-shadow:0 0 0 2px rgba(56,189,248,.22);
}
.sr-meta-row{
  flex-shrink:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:clamp(6px,1.2vw,12px);
  flex-wrap:wrap;
  font-size:clamp(10.5px,0.28rem + 1vw,12px);
}
@media (max-width:380px){
  .sr-meta-row{
    flex-direction:column;
    align-items:flex-start;
  }
}
.sr-meta{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  color:#94a3b8;
  font-size:12px;
  font-weight:400;
  letter-spacing:.015em;
  font-variant-numeric:tabular-nums;
}
.sr-status{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11.5px;
  font-weight:600;
  color:#86efac;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.screen-reader-out{
  width:100%;
  flex:1 1 0;
  min-height:min(160px,22dvh);
  max-height:min(72dvh,720px);
  resize:vertical;
  box-sizing:border-box;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(11,18,32,.96);
  color:#e2e8f0;
  font-size:clamp(12px,2.1vw,14.5px);
  line-height:1.52;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:400;
  letter-spacing:.02em;
  white-space:pre-wrap;
  word-break:break-word;
  tab-size:4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.screen-reader-out:focus{
  outline:none;
  border-color:rgba(56,189,248,.55);
  box-shadow:0 0 0 2px rgba(56,189,248,.14);
}
@media (max-width:900px){
  .screen-reader-out{
    min-height:clamp(140px,28dvh,300px);
    max-height:clamp(180px,36dvh,480px);
    font-size:clamp(12.5px,2.8vw,15px);
  }
}
@media (pointer:coarse){
  .sr-cb,.sr-live-label{
    min-height:44px;
    padding-block:4px;
    align-items:center;
  }
  .sr-cb input,.sr-live-label input{
    width:18px;
    height:18px;
    flex-shrink:0;
  }
  .screen-reader-out{
    font-size:clamp(14px,3.8vw,17px);
    line-height:1.5;
    padding:14px;
  }
  .sr-select{
    font-size:16px;
    min-height:44px;
    padding:8px 12px;
    background:rgba(15,23,42,.9);
    color:#bae6fd;
    border:2px solid rgba(56,189,248,.35);
  }
  .sr-type-panel{
    padding:10px 10px 12px;
    margin-top:8px;
  }
  .sr-type-label{
    font-size:11px;
    color:#94a3b8;
  }
  .sr-type-line,
  .sr-compose-ta{
    font-size:16px!important;
    min-height:48px;
    padding:12px 14px;
    border-width:2px;
  }
  .sr-type-actions .btn{
    min-height:44px;
    font-size:14px;
  }
}
@media (max-height:520px){
  .screen-reader-out{
    min-height:clamp(120px,22dvh,220px);
    max-height:clamp(140px,30dvh,320px);
  }
}

/* Screen desk — PC keyboard only: compact fields, mirror prioritized */
.sr-type-panel{
  flex-shrink:0;
  flex-grow:0;
  margin-top:4px;
  padding:10px 10px 12px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,.22);
  background:linear-gradient(180deg,rgba(23,34,53,.95) 0%,rgba(15,23,42,.98) 100%);
  box-shadow:inset 0 1px 0 rgba(148,163,184,.06);
  display:flex;
  flex-direction:column;
  gap:5px;
}
.sr-type-panel-head{
  display:flex;
  flex-direction:column;
  gap:1px;
  margin-bottom:0;
}
.sr-type-panel-title{
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#bae6fd;
}
.sr-type-panel-sub{
  font-size:10px;
  line-height:1.35;
  color:#94a3b8;
  font-weight:400;
  opacity:.95;
}
.sr-type-label{
  font-size:9px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(148,163,184,.88);
  margin-top:2px;
}
.sr-type-line,
.sr-compose-ta{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:8px;
  border:2px solid rgba(94,179,201,.42);
  background:rgba(9,13,23,.94);
  color:#f1f5f9;
  font-size:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  line-height:1.45;
  caret-color:#5eb3c9;
  -webkit-text-fill-color:#f1f5f9;
  opacity:1;
  -webkit-appearance:none;
  appearance:none;
}

.sr-type-line{
  resize:none;
  min-height:48px;
  max-height:none;
}
.sr-compose-ta{
  resize:vertical;
  min-height:88px;
  max-height:min(28dvh,200px);
  field-sizing:content;
}
@supports not (field-sizing: content){
  .sr-compose-ta{
    min-height:96px;
  }
}
.sr-type-line:focus,
.sr-compose-ta:focus{
  outline:none;
  border-color:rgba(56,189,248,.78);
  background:rgba(17,26,43,.96);
  box-shadow:0 0 0 3px rgba(56,189,248,.18);
}
.sr-type-line::placeholder,
.sr-compose-ta::placeholder{
  color:rgba(148,163,184,.55);
  opacity:1;
}
.sr-type-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  margin-top:2px;
}
.sr-type-actions .btn{
  padding:4px 10px;
  font-size:11px;
  min-height:30px;
}
@media (max-width:520px){
  .sr-type-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .sr-type-actions .btn{width:100%}
}

/* Keylogger desk — dual pane + embedded accessibility reader */
.keylog-overlay{
  padding:clamp(8px,2vw,20px)!important;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  overflow:auto;
}
.modal-dialog.keylog-modal{
  width:min(1120px,calc(100vw - 32px))!important;
  max-width:min(1120px,calc(100vw - 32px))!important;
  /* Definite height so flex children (.keylog-body / .keylog-desk) don’t collapse to 0 */
  height:min(88dvh,calc(100dvh - 48px));
  min-height:min(420px,85dvh);
  max-height:calc(100dvh - 24px);
  display:flex;
  flex-direction:column;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(165deg,#10141c 0%,#0a0c12 100%);
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  overflow:hidden;
  box-sizing:border-box;
}
.keylog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.25);
  flex-shrink:0;
}
.keylog-head-titles h2{
  margin:0 0 4px;
  font-size:1.05rem;
  font-weight:600;
  color:#f1f5f9;
  letter-spacing:-.02em;
}
.keylog-head-sub{
  display:block;
  font-size:11px;
  color:#94a3b8;
  line-height:1.35;
  max-width:52ch;
}
.keylog-body{
  padding:10px 12px 14px!important;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.keylog-toolbar{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.keylog-toolbar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.keylog-toolbar-row--secondary{
  align-items:center;
  padding-top:2px;
  border-top:1px solid rgba(255,255,255,.06);
}
.keylog-status{
  margin-left:auto;
  font-size:11px;
  font-weight:500;
  color:#64748b;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  max-width:min(100%,280px);
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.keylog-desk{
  flex:1 1 0;
  min-height:180px;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}
@media (max-width:820px){
  .keylog-desk{
    grid-template-columns:1fr;
    grid-template-rows:minmax(200px,1fr) minmax(180px,1fr);
  }
}
.keylog-pane{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  min-width:0;
}
.keylog-pane-head{
  flex-shrink:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#64748b;
}
.keylog-pre{
  flex:1 1 0;
  min-height:200px;
  max-height:min(56dvh,520px);
  margin:0;
  padding:10px 12px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.4);
  color:#e2e8f0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
  tab-size:4;
}
.keylog-reader-ta{
  flex:1 1 0;
  min-height:160px;
  max-height:min(56dvh,520px);
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:6px;
  border:1px solid rgba(56,189,248,.2);
  background:rgba(2,8,16,.55);
  color:#f1f5f9;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;
  line-height:1.45;
  resize:vertical;
}
.keylog-reader-meta{
  flex-shrink:0;
  font-size:10.5px;
  color:#94a3b8;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  min-height:1.2em;
}

.cred-unlock-panel{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:8px 8px 6px;
  border-radius:var(--radius);
  border:1px solid rgba(94,179,201,.12);
  background:rgba(94,179,201,.03);
}
.cred-auto-unlock-btn{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:8px 10px 7px!important;
  font-size:12px!important;
  border-radius:6px!important;
}
#viewerView .cred-auto-unlock-btn.vbtn{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
}
#viewerView .cred-auto-unlock-btn .vico{margin-bottom:1px}
.cred-auto-unlock-label{
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:11px;
}
.cred-auto-unlock-secret{
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  color:#021;
  min-height:1em;
  word-break:break-all;
}
.cred-auto-unlock-btn:disabled .cred-auto-unlock-secret{opacity:.5}
.cred-auto-unlock-btn--empty .cred-auto-unlock-secret{display:none}
.cred-forget-btn{width:100%;font-size:10px!important;padding:3px 6px!important;opacity:.7}
.cred-forget-btn:hover{opacity:1}
.bio-block-panel{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.bio-block-status{
  font-size:9px;
  font-family:ui-monospace,monospace;
  color:var(--green);
  min-height:1em;
}
.bio-block-status--on{color:var(--orange);font-weight:600}
.bio-block-status--err{color:var(--red)}
.cred-unlock-live{
  font-size:9px;
  font-family:ui-monospace,monospace;
  color:var(--orange);
  line-height:1.35;
  padding:1px 0;
  min-height:1em;
}
.cred-unlock-status{
  font-size:9px;
  color:var(--green);
  font-family:ui-monospace,monospace;
}

/* ── Cryptor (premium workspace + watermark) ── */
.cryptor-view.view{
  padding:clamp(18px,3vw,28px) clamp(16px,3vw,32px) 40px;
  overflow:auto;
  container-type:inline-size;
}
.cryptor-page{
  max-width:1040px;
  margin:0 auto;
  width:100%;
}
.cryptor-page-head{
  margin-bottom:clamp(18px,2.5vw,22px);
  padding-bottom:clamp(14px,2vw,18px);
  border-bottom:1px solid var(--border);
  max-width:100%;
}
.cryptor-head-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 14px;
}
.cryptor-page-head h2{
  margin:0;
  font-size:clamp(21px,3.8cqmin,27px);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--text);
}
.cryptor-soon-pill{
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(94,179,201,.32);
  background:linear-gradient(165deg,rgba(94,179,201,.14) 0%,rgba(94,179,201,.04) 100%);
  color:#93c8d8;
  box-shadow:0 0 20px rgba(94,179,201,.12);
}
.cryptor-tagline{
  margin:10px 0 0;
  max-width:52rem;
  font-size:13px;
  line-height:1.55;
  color:var(--text2);
  font-weight:500;
}
.cryptor-workspace{
  position:relative;
  isolation:isolate;
  min-height:clamp(420px,54vh,660px);
}
.cryptor-layout--soon-blocked{
  pointer-events:none;
  user-select:none;
  filter:blur(11px) saturate(0.92);
  opacity:.34;
  transform:scale(0.993);
  transition:filter .45s ease,opacity .45s ease;
}
.cryptor-soon-gate{
  position:absolute;
  inset:0;
  z-index:16;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,5vw,44px);
  background:
    radial-gradient(ellipse 72% 62% at 50% 42%,rgba(6,12,20,.12) 0%,rgba(6,8,12,.88) 62%,rgba(4,6,10,.94) 100%);
  pointer-events:auto;
}
.cryptor-soon-a11y{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  clip:rect(0,0,0,0);
  border:0;
  white-space:nowrap;
}
.cryptor-soon-gate-inner{
  position:relative;
  text-align:center;
  max-width:min(96cqw,920px);
  z-index:1;
}
.cryptor-soon-hero-wrap{
  position:relative;
  z-index:4;
  display:inline-block;
  padding:0 .08em 0.12em;
}
.cryptor-soon-hero{
  position:relative;
  z-index:2;
  margin:0;
  font-family:"Space Grotesk","JetBrains Mono",ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(3.1rem,17vw,10.5rem);
  font-weight:800;
  line-height:0.92;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:transparent;
  background:linear-gradient(
    115deg,
    #8ec9db 0%,
    #eaf6fa 18%,
    #5eb3c9 42%,
    #b8e8f2 58%,
    #4695b5 82%,
    #7ec4d6 100%
  );
  background-size:220% 120%;
  background-clip:text;
  -webkit-background-clip:text;
  animation:cryptorSoonFloat 4.2s ease-in-out infinite,cryptorSoonShimmer 7s linear infinite;
  filter:drop-shadow(0 0 42px rgba(94,179,201,.5)) drop-shadow(0 24px 56px rgba(0,0,0,.55));
}
.cryptor-soon-hero-glow{
  position:absolute;
  z-index:1;
  border-radius:50%;
  filter:blur(36px);
  opacity:.55;
  pointer-events:none;
  animation:cryptorSoonPulse 3.2s ease-in-out infinite;
}
.cryptor-soon-hero-glow--a{
  inset:-20% -35% 10% -35%;
  background:radial-gradient(circle,rgba(94,179,201,.45) 0%,transparent 72%);
  animation-delay:.2s;
}
.cryptor-soon-hero-glow--b{
  inset:10% -40% -35% -40%;
  background:radial-gradient(circle,rgba(120,170,220,.35) 0%,transparent 68%);
  animation-delay:1.1s;
  animation-duration:3.8s;
}
.cryptor-soon-sub{
  position:relative;
  z-index:3;
  margin:clamp(18px,3.5vw,32px) auto 0;
  max-width:28rem;
  font-size:clamp(12px,2.5cqw,14px);
  line-height:1.55;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(180,210,222,.62);
}
.cryptor-soon-scan-line{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:140%;
  max-width:min(1200px,140vw);
  height:2px;
  z-index:0;
  background:linear-gradient(90deg,transparent,rgba(94,179,201,.25),rgba(255,255,255,.12),rgba(94,179,201,.25),transparent);
  animation:cryptorSoonScan 5.5s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
@keyframes cryptorSoonFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes cryptorSoonShimmer{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}
@keyframes cryptorSoonPulse{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:.72;transform:scale(1.08)}
}
@keyframes cryptorSoonScan{
  0%,100%{opacity:0;transform:translate(-50%,calc(-50% + 52px)) rotate(-2deg)}
  15%{opacity:1}
  50%{transform:translate(-50%,calc(-50% - 38px)) rotate(1.5deg)}
  85%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .cryptor-soon-hero,
  .cryptor-soon-hero-glow,
  .cryptor-soon-scan-line{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
  }
  .cryptor-layout--soon-blocked{
    filter:blur(9px);
    transition:none;
  }
}
.cryptor-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(276px,342px);
  gap:clamp(16px,2.2vw,22px);
  align-items:start;
}
.cryptor-main{min-width:0}
.cryptor-aside{display:flex;flex-direction:column;gap:14px}
.cryptor-surface{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(165deg,var(--surface) 0%,rgba(14,18,26,.94) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.045) inset,
    0 12px 40px rgba(0,0,0,.3);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.cryptor-surface--pipeline{
  border-color:rgba(94,179,201,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 14px 42px rgba(0,0,0,.32),
    0 0 0 1px rgba(94,179,201,.05);
}
.cryptor-surface--opts{
  border-color:rgba(94,179,201,.1);
}
.cryptor-surface--facts{
  border-color:var(--border);
}
.cryptor-surface:focus-within{
  border-color:rgba(94,179,201,.22);
}
.cryptor-surface-title{
  margin:0;
  padding:13px 18px 11px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#8aa9b8;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%);
}
.cryptor-surface-body{
  padding:16px 18px 18px;
}
.cryptor-surface-body--stack{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2cqmin,18px);
}
.cryptor-prose{
  font-size:12px;
  line-height:1.55;
  color:var(--text2);
}
.cryptor-prose code{
  font-size:11px;
  padding:2px 5px;
  border-radius:4px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
  color:#b8cdd8;
}
.cryptor-prose strong{color:var(--text)}
@media (max-width:900px){
  .cryptor-layout{grid-template-columns:1fr}
}
/* Shared upload / pipeline controls (Cryptor main + Dropper reuse .cryptor-*) */
.cryptor-card{
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cryptor-upload-zone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:clamp(148px,22cqmin,198px);
  padding:clamp(28px,4cqmin,40px) 22px;
  border:1px dashed rgba(94,179,201,.22);
  border-radius:calc(var(--radius) + 4px);
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%,rgba(94,179,201,.06),transparent 55%),
    rgba(8,11,17,.72);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.cryptor-upload-zone:hover,
.cryptor-upload-zone.drag-over{
  border-color:rgba(94,179,201,.52);
  box-shadow:0 0 0 1px rgba(94,179,201,.1),0 14px 40px rgba(0,0,0,.35);
  background:
    radial-gradient(ellipse 120% 90% at 50% -10%,rgba(94,179,201,.09),transparent 50%),
    rgba(12,17,26,.82);
}
.cryptor-upload-icon{color:var(--accent);opacity:.55}
.cryptor-upload-text{
  color:var(--text);
  font-size:14px;
  font-weight:600;
  margin:0;
  text-align:center;
}
.cryptor-upload-hint{
  color:var(--text2);
  font-size:11px;
  margin:0;
  text-align:center;
}
.cryptor-file-info{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 2px);
  background:rgba(8,11,17,.82);
}
.cryptor-file-name{
  flex:1;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cryptor-file-size{
  font-size:11px;
  color:var(--text2);
  white-space:nowrap;
}
.cryptor-file-remove{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;
  padding:0!important;
  border-radius:50%!important;
  opacity:.65;
}
.cryptor-file-remove:hover{opacity:1}
.cryptor-options{
  border:none;
  border-radius:calc(var(--radius) + 2px);
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 18px;
}
.cryptor-options--aside{
  grid-template-columns:1fr;
  gap:8px;
  padding:0;
  background:transparent;
}
.cryptor-opt{
  align-items:flex-start!important;
  padding:8px 10px!important;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.04);
  background:rgba(0,0,0,.16);
}
.cryptor-opt:hover{border-color:rgba(94,179,201,.14)}
.cryptor-options legend{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8aa9b8;
  padding:0 0 12px;
  margin:0;
  float:none;
  width:100%;
}
.cryptor-footnote{
  grid-column:1/-1;
  font-size:11px!important;
  color:var(--text2)!important;
  margin:8px 0 0!important;
  line-height:1.48!important;
  padding-top:12px!important;
  border-top:1px solid rgba(255,255,255,.05);
}
.cryptor-options--aside .cryptor-footnote{
  border-top:none;
  padding-top:6px!important;
  padding-left:10px!important;
  border-left:2px solid rgba(94,179,201,.2);
}
.cryptor-process-btn{
  width:100%;
  padding:13px 20px!important;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
}
.cryptor-process-btn:disabled{opacity:.42;cursor:not-allowed}
.cryptor-download-btn{width:100%}
.cryptor-progress{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cryptor-progress-track{
  height:7px;
  border-radius:4px;
  background:rgba(0,0,0,.35);
  border:1px solid var(--border);
  overflow:hidden;
}
.cryptor-progress-fill{
  height:100%;
  width:0%;
  border-radius:3px;
  background:linear-gradient(90deg,var(--accent-strong,#4695b5),var(--accent,#5eb3c9));
  transition:width .28s cubic-bezier(0.22,1,0.36,1);
}
.cryptor-progress-text{
  font-size:11px;
  color:var(--text2);
  font-family:ui-monospace,monospace;
  letter-spacing:.02em;
}
.cryptor-result{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border:1px solid rgba(94,179,201,.26);
  border-radius:calc(var(--radius) + 4px);
  background:
    linear-gradient(165deg,rgba(94,179,201,.1) 0%,rgba(94,179,201,.025) 100%);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
/* `[hidden]` must win over `display:flex` — otherwise “ready” + download stay visible before/after build. */
.cryptor-result[hidden]{
  display:none!important;
}
.cryptor-result-header{
  display:flex;
  align-items:center;
  gap:10px;
}
.cryptor-result-title{
  font-size:14px;
  font-weight:700;
  color:var(--accent);
}
.cryptor-result-stats{
  font-size:11px;
  color:var(--text2);
  line-height:1.55;
  font-family:ui-monospace,monospace;
}
.cryptor-error{
  padding:12px 16px;
  border:1px solid var(--red);
  border-radius:calc(var(--radius) + 2px);
  background:rgba(255,80,80,.07);
  color:var(--red);
  font-size:12px;
  font-family:ui-monospace,monospace;
  white-space:pre-wrap;
  word-break:break-word;
}
.cryptor-log{
  max-height:220px;
  overflow:auto;
  font-size:11px;
  border-radius:calc(var(--radius) + 2px);
  border:1px solid var(--border);
  background:rgba(0,0,0,.25);
}

/* ── Dropper (aligned with Cryptor / Settings surfaces) ── */
.dropper-view.view{
  padding:clamp(18px,3vw,28px) clamp(16px,3vw,32px) 40px;
  overflow:auto;
  container-type:inline-size;
}
.dropper-page{
  max-width:1040px;
  margin:0 auto;
  width:100%;
}
.dropper-page-head{
  margin-bottom:clamp(18px,2.5vw,22px);
  padding-bottom:clamp(14px,2vw,18px);
  border-bottom:1px solid var(--border);
  max-width:100%;
}
.dropper-page-head h2{
  margin:0 0 6px;
  font-size:clamp(21px,3.8cqmin,27px);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--text);
}
.dropper-tagline{
  margin:8px 0 0;
  max-width:48rem;
  font-size:13px;
  line-height:1.5;
  color:var(--text2);
  font-weight:500;
}
.dropper-workspace{width:100%}
.dropper-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(276px,342px);
  gap:clamp(16px,2.2vw,22px);
  align-items:start;
}
.dropper-col--main{min-width:0}
.dropper-flow-surface{width:100%}
.dropper-flow-body{min-height:0}
.dropper-aside-stack{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2vw,18px);
}
.dropper-config-surface{width:100%}
.dropper-config-body{
  display:flex;
  flex-direction:column;
  gap:11px;
}
.dropper-upload-zone{
  min-height:clamp(148px,22cqmin,200px);
  padding:clamp(30px,5cqmin,42px) 22px;
}
.dropper-label{
  display:block;
  margin:0;
  font-size:12px;
  font-weight:600;
  color:var(--text);
  line-height:1.35;
}
.dropper-input-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:stretch;
}
.dropper-input.dropper-input{
  flex:1 1 140px;
  min-width:0;
  padding:10px 12px!important;
}
.dropper-input-btn.dropper-input-btn{
  flex:0 0 auto;
  white-space:nowrap;
}
.dropper-file-input{
  display:block;
  width:100%;
  max-width:100%;
  font-size:12px;
  color:var(--text2);
  cursor:pointer;
  padding:4px 0;
}
.dropper-logo-clear.dropper-logo-clear{
  margin-top:2px;
  align-self:flex-start;
}
.dropper-logo-preview-wrap:not([hidden]){
  display:flex;
  align-items:center;
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
}
.dropper-logo-preview-img{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:22%;
  box-shadow:0 8px 24px rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
.dropper-screen-surface .builder-field-hint{
  margin:0 0 4px;
  font-size:12px;
  line-height:1.45;
  color:var(--text2);
}
.dropper-screen-mode{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dropper-screen-custom[hidden]{display:none !important;}
.dropper-screen-custom textarea{
  min-height:180px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  line-height:1.4;
}
.builder-html-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.builder-html-actions .modal-input,
.builder-html-actions input[type="file"]{
  flex:1 1 160px;
  min-width:0;
}
.builder-html-actions .btn{
  flex:0 0 auto;
  white-space:nowrap;
}
.builder-html-preview-row .builder-html-actions{margin-top:4px}

/* Custom HTML preview modal */
.html-preview-overlay{
  align-items:stretch;
  justify-content:center;
  padding:clamp(10px,2vh,18px);
  box-sizing:border-box;
  z-index:10040;
}
.modal-dialog.modal-html-preview{
  width:min(1120px,96vw);
  max-width:1120px;
  max-height:94vh;
  display:flex;
  flex-direction:column;
}
.html-preview-head{
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.html-preview-head-text{flex:1 1 220px;min-width:0}
.html-preview-sub{
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--text2,#9aa3b5);
}
.html-preview-head-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.html-preview-lang-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11px;
  color:var(--text2);
}
.html-preview-lang{
  min-width:120px;
  padding:6px 8px;
}
.html-preview-body{
  padding:12px 16px 16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.html-preview-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px,260px);
  gap:16px;
  min-height:0;
  flex:1;
  align-items:stretch;
}
.html-preview-phone{
  position:relative;
  margin:0 auto;
  width:min(390px,100%);
  height:min(720px,72vh);
  border-radius:28px;
  border:1px solid rgba(255,255,255,.14);
  background:#0b1220;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  overflow:hidden;
}
.html-preview-notch{
  position:absolute;
  top:8px;left:50%;
  transform:translateX(-50%);
  width:108px;height:10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  z-index:2;
  pointer-events:none;
}
.html-preview-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}
.html-preview-aside{
  display:flex;
  flex-direction:column;
  min-height:0;
  gap:8px;
}
.html-preview-aside-title{
  margin:0;
  font-size:12px;
  font-weight:650;
  color:var(--text1,#e8eef8);
}
.html-preview-log{
  flex:1;
  min-height:160px;
  max-height:min(520px,60vh);
  margin:0;
  overflow:auto;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border,#333);
  background:rgba(0,0,0,.28);
  color:#cbd5e1;
  font-size:11.5px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}
@media (max-width:860px){
  .html-preview-stage{grid-template-columns:1fr}
  .html-preview-phone{height:min(620px,58vh)}
  .html-preview-log{max-height:180px}
}
@media (max-width:900px){
  .dropper-layout{
    grid-template-columns:1fr;
    gap:20px;
  }
}

/* Viewer — calmer section labels */
#streamControls .ctrl-title,
#viewerSidebar .ctrl-title,
.lock-keyboard-bar > .ctrl-title,
.pattern-unlock-label{
  color:#8aa9b8!important;
}
/* Users + License — match Payloads control-room density */
.users-page,.license-page{
  max-width:1180px;
  margin:0 auto;
  padding:0 1.35rem 3rem;
}

/* Glitch Spy V2 Venus — product updates (Users + License / sub-admins) */
.venus-updates{
  margin-top:1.55rem;
  padding:1.35rem 1.3rem 1.4rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(145deg,rgba(56,189,248,.07) 0%,transparent 42%),
    linear-gradient(320deg,rgba(34,197,94,.05) 0%,transparent 40%),
    rgba(7,10,16,.78);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 20px 48px rgba(0,0,0,.28);
}
.venus-updates-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem 1.5rem;
  margin-bottom:1.15rem;
  padding-bottom:1.05rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.venus-brand{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  min-width:min(100%,260px);
}
.venus-brand-mark{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  color:#061018;
  background:linear-gradient(145deg,#7dd3fc,#0ea5e9 55%,#0369a1);
  box-shadow:0 10px 24px rgba(14,165,233,.28);
}
.venus-brand-copy{min-width:0}
.venus-kicker{
  margin:0 0 .2rem;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(125,211,252,.9);
}
.venus-title{
  margin:0;
  font-size:clamp(1.15rem,2vw,1.35rem);
  font-weight:750;
  letter-spacing:-.02em;
  color:var(--text,#f1f5f9);
}
.venus-loading{
  margin:.45rem 0 0;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:12.5px;
  font-weight:600;
  color:#94a3b8;
  letter-spacing:.01em;
}
.venus-loading-pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.45);
  animation:venusPulse 1.6s ease-out infinite;
}
@keyframes venusPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5);opacity:1}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0);opacity:1}
}
.venus-lead{
  margin:0;
  flex:1 1 220px;
  max-width:36rem;
  font-size:13.5px;
  line-height:1.55;
  color:var(--text2,#9aa3b5);
}
.venus-updates-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.venus-update-card{
  padding:1rem 1.05rem 1.05rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.22);
}
.venus-update-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
  margin-bottom:.55rem;
}
.venus-update-badge{
  display:inline-flex;
  align-items:center;
  padding:.18rem .55rem;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#082f49;
  background:linear-gradient(180deg,#bae6fd,#7dd3fc);
}
.venus-update-area{
  font-size:11px;
  font-weight:650;
  color:#64748b;
  letter-spacing:.02em;
}
.venus-update-title{
  margin:0 0 .4rem;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--text,#e8eef8);
  line-height:1.3;
}
.venus-update-body{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--text2,#9aa3b5);
}
@media (max-width:820px){
  .venus-updates-grid{grid-template-columns:1fr}
  .venus-updates-head{flex-direction:column}
}
.users-hero,.license-hero{
  position:relative;
  margin:0 -0.35rem 1.35rem;
  padding:1.65rem 1.45rem 1.55rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg,rgba(94,179,201,.1) 0%,transparent 42%),
    linear-gradient(225deg,rgba(152,143,168,.08) 0%,transparent 38%),
    rgba(6,9,14,.72);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 24px 56px rgba(0,0,0,.35);
  overflow:hidden;
}
.users-hero-glow,.license-hero-glow{
  position:absolute;
  inset:-40% 20% auto -20%;
  height:120%;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(94,179,201,.16),transparent 70%);
  pointer-events:none;
}
.license-hero-glow{
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(60,184,120,.14),transparent 70%);
}
.users-hero-inner,.license-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.35rem 2rem;
}
.users-hero-copy,.license-hero-copy{flex:1;min-width:min(100%,280px);max-width:46rem}
.users-kicker,.license-kicker{
  margin:0 0 .35rem;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.users-hero-title,.license-hero-title{
  margin:0;
  font-size:clamp(1.4rem,2.5vw,1.8rem);
  font-weight:750;
  letter-spacing:-.03em;
  line-height:1.15;
}
.users-tagline,.license-tagline{
  margin:.55rem 0 0;
  font-size:.92rem;
  line-height:1.5;
  color:var(--text2);
}
.users-hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}
.users-stat{
  display:flex;
  flex-direction:column;
  min-width:5.25rem;
  padding:.6rem .9rem;
  border-radius:12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
}
.users-stat--accent{
  border-color:rgba(60,184,120,.28);
  background:linear-gradient(180deg,rgba(60,184,120,.1),rgba(0,0,0,.18));
}
.users-stat--warn{
  border-color:rgba(232,93,117,.28);
  background:linear-gradient(180deg,rgba(232,93,117,.1),rgba(0,0,0,.18));
}
.users-stat--violet{
  border-color:rgba(94,179,201,.22);
  background:linear-gradient(180deg,rgba(94,179,201,.09),rgba(0,0,0,.18));
}
.users-stat-val{
  font-size:1.3rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  line-height:1.1;
}
.users-stat-label{
  margin-top:.2rem;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text2);
}
.license-hero-status{text-align:right;min-width:12rem}
.license-pill{
  display:inline-block;
  padding:.28rem .75rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  background:rgba(60,184,120,.16);
  color:#9de0b8;
  border:1px solid rgba(60,184,120,.28);
}
.license-pill--locked{
  background:rgba(232,93,117,.16);
  color:#f0a8a8;
  border-color:rgba(232,93,117,.3);
}
.license-account{
  margin:.55rem 0 0;
  font-size:.82rem;
  color:var(--text2);
}
.users-layout{
  display:grid;
  grid-template-columns:minmax(280px,360px) 1fr;
  gap:1.15rem;
  align-items:start;
}
.users-layout-side{
  display:flex;
  flex-direction:column;
  gap:1.15rem;
  min-width:0;
}
.users-mail-body{
  resize:vertical;
  min-height:7rem;
  font-family:inherit;
  line-height:1.45;
}
/* Live Admin → user notices (right side) */
.panel-mail-stack{
  position:fixed;
  top:18px;
  right:18px;
  z-index:9200;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:min(380px, calc(100vw - 36px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  pointer-events:none;
}
.panel-mail-stack:not([hidden]){pointer-events:auto}
.panel-mail-card{
  pointer-events:auto;
  position:relative;
  padding:1rem 1.1rem 1.05rem;
  border-radius:14px;
  border:1px solid rgba(94,179,201,.28);
  background:
    linear-gradient(160deg,rgba(94,179,201,.12) 0%,transparent 42%),
    rgba(8,11,16,.94);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 40px rgba(0,0,0,.45);
  animation:panelMailIn .38s cubic-bezier(.22,1,.36,1);
}
.panel-mail-card.is-leaving{
  animation:panelMailOut .28s ease forwards;
}
@keyframes panelMailIn{
  from{opacity:0;transform:translateX(28px) scale(.96)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes panelMailOut{
  to{opacity:0;transform:translateX(24px) scale(.96)}
}
.panel-mail-kicker{
  margin:0 0 .35rem;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.panel-mail-title{
  margin:0 2rem .45rem 0;
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.25;
}
.panel-mail-body{
  margin:0;
  font-size:.88rem;
  line-height:1.5;
  color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
}
.panel-mail-close{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(0,0,0,.28);
  color:var(--text2);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
}
.panel-mail-close:hover{
  color:var(--text);
  border-color:rgba(94,179,201,.35);
}
@media (max-width:720px){
  .panel-mail-stack{
    top:auto;
    bottom:14px;
    right:12px;
    left:12px;
    width:auto;
  }
}
@media (max-width:980px){
  .users-layout{grid-template-columns:1fr}
  .license-hero-status{text-align:left}
}
.users-panel,.license-card{
  background:rgba(11,14,20,.82);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:1.15rem 1.2rem 1.25rem;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
}
.users-panel-head{margin-bottom:.85rem}
.users-panel-title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.01em;
}
.users-panel-hint{
  margin:.3rem 0 0;
  font-size:.78rem;
  line-height:1.4;
  color:var(--text2);
}
.users-form{display:flex;flex-direction:column;gap:.85rem}
.users-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem .7rem;
}
.users-field{display:flex;flex-direction:column;gap:.35rem}
.users-field--wide{grid-column:1 / -1}
.users-label{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text2);
}
.users-input{width:100%}
.users-form-actions{display:flex;justify-content:flex-start}
.users-err{
  color:#f0a0a0;
  font-size:.82rem;
  margin:0;
}
.users-ok{
  color:#9de0b8;
  font-size:.82rem;
  margin:0;
}
.users-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:.85rem;
}
.users-table-wrap{
  overflow:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.18);
}
.users-table{
  width:100%;
  border-collapse:collapse;
  font-size:.86rem;
}
.users-table th,.users-table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  text-align:left;
  vertical-align:middle;
}
.users-table tbody tr:last-child td{border-bottom:none}
.users-table tbody tr:hover{background:rgba(94,179,201,.04)}
.users-table th{
  color:var(--text2);
  font-weight:700;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:rgba(0,0,0,.2);
  position:sticky;
  top:0;
}
.users-user-cell strong{font-weight:700}
.users-user-cell .mono{font-size:.75rem;color:var(--text2)}
.users-days-cell{
  font-variant-numeric:tabular-nums;
  font-weight:700;
}
.users-conns-cell{
  font-variant-numeric:tabular-nums;
}
.users-actions{display:flex;flex-wrap:wrap;gap:6px}
.users-actions .btn{font-size:.72rem;padding:.28rem .55rem}
.users-status{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.users-status--active{background:rgba(60,184,120,.16);color:#9de0b8;border:1px solid rgba(60,184,120,.25)}
.users-status--locked{background:rgba(232,93,117,.16);color:#f0a8a8;border:1px solid rgba(232,93,117,.28)}
.users-status--admin{background:rgba(94,179,201,.14);color:#9ed3e0;border:1px solid rgba(94,179,201,.25)}
.users-empty{
  margin:0;
  padding:1.5rem 1rem;
  text-align:center;
  color:var(--text2);
  font-size:.88rem;
}
.license-grid{
  display:grid;
  grid-template-columns:1.55fr 1fr 1fr;
  gap:1rem;
}
@media (max-width:900px){.license-grid{grid-template-columns:1fr}}
.license-card--time{
  position:relative;
  overflow:hidden;
  border-color:rgba(94,179,201,.22);
  background:
    linear-gradient(165deg,rgba(94,179,201,.09) 0%,transparent 48%),
    linear-gradient(0deg,rgba(0,0,0,.2),transparent 40%),
    rgba(11,14,20,.88);
}
.license-card--time::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,179,201,.45),transparent);
  opacity:.7;
  pointer-events:none;
}
.license-time-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:1rem;
}
.license-card-title{
  margin:0;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text2);
}
.license-live{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.22rem .55rem;
  border-radius:999px;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.14em;
  color:#9ed3e0;
  background:rgba(94,179,201,.1);
  border:1px solid rgba(94,179,201,.28);
}
.license-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(94,179,201,.55);
  animation:licenseLivePulse 1.6s ease-out infinite;
}
.license-live--warn .license-live-dot{
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(218,160,74,.5);
}
.license-live--crit{
  color:#f0a8a8;
  background:rgba(232,93,117,.1);
  border-color:rgba(232,93,117,.3);
}
.license-live--crit .license-live-dot{
  background:var(--red);
  box-shadow:0 0 0 0 rgba(232,93,117,.5);
  animation:licenseLivePulseCrit 1s ease-out infinite;
}
@keyframes licenseLivePulse{
  0%{box-shadow:0 0 0 0 rgba(94,179,201,.5)}
  70%{box-shadow:0 0 0 8px rgba(94,179,201,0)}
  100%{box-shadow:0 0 0 0 rgba(94,179,201,0)}
}
@keyframes licenseLivePulseCrit{
  0%{box-shadow:0 0 0 0 rgba(232,93,117,.55);opacity:1}
  70%{box-shadow:0 0 0 9px rgba(232,93,117,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(232,93,117,0);opacity:1}
}
.license-chrono{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.35rem .45rem;
  margin:0 0 1.05rem;
  flex-wrap:nowrap;
}
.license-unit{
  flex:1;
  min-width:0;
  text-align:center;
}
.license-unit-digits{
  display:flex;
  justify-content:center;
  gap:4px;
}
.license-digit{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.55rem;
  height:2.55rem;
  padding:0 .15rem;
  border-radius:8px;
  font-size:clamp(1.35rem,2.8vw,1.85rem);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--text);
  background:
    linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 48%,rgba(0,0,0,.28) 52%,rgba(0,0,0,.18) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 8px 18px rgba(0,0,0,.28);
  overflow:hidden;
}
.license-unit--sec .license-digit{
  border-color:rgba(94,179,201,.28);
  color:#b7e4ef;
}
.license-digit.is-tick{
  animation:licenseDigitTick .42s cubic-bezier(.22,1,.36,1);
}
@keyframes licenseDigitTick{
  0%{transform:translateY(-38%);opacity:.35;filter:blur(1px)}
  55%{transform:translateY(4%);opacity:1;filter:blur(0)}
  100%{transform:translateY(0);opacity:1}
}
.license-unit-label{
  display:block;
  margin-top:.45rem;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text2);
  opacity:.9;
}
.license-chrono-sep{
  align-self:center;
  margin-top:-.85rem;
  font-size:1.35rem;
  font-weight:700;
  color:rgba(158,211,224,.55);
  line-height:1;
  user-select:none;
}
.license-chrono-sep--pulse{
  animation:licenseSepBlink 1s steps(1,end) infinite;
}
@keyframes licenseSepBlink{
  0%,49%{opacity:1}
  50%,100%{opacity:.28}
}
.license-countdown-fallback{
  font-size:1.5rem;
  font-weight:700;
  margin:0 0 .85rem;
}
.license-card--time.is-urgent .license-digit{
  border-color:rgba(218,160,74,.35);
  color:#f0d2a0;
}
.license-card--time.is-critical .license-digit{
  border-color:rgba(232,93,117,.4);
  color:#f0b0b8;
}
.license-card--time.is-critical .license-chrono-sep{color:rgba(232,93,117,.55)}
.license-countdown{
  font-size:clamp(1.55rem,3vw,2.05rem);
  font-weight:800;
  margin:0 0 .75rem;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.license-countdown--sm{font-size:clamp(1.35rem,2.4vw,1.7rem)}
.license-progress{
  position:relative;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  margin:0 0 .9rem;
}
.license-progress-bar{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent-strong),var(--accent));
  box-shadow:0 0 12px rgba(94,179,201,.35);
  transition:width .85s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.license-progress-bar::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  background-size:200% 100%;
  animation:licenseBarSheen 2.4s linear infinite;
}
@keyframes licenseBarSheen{
  0%{background-position:120% 0}
  100%{background-position:-120% 0}
}
.license-progress-bar--low{
  background:linear-gradient(90deg,#c45a3a,var(--orange));
  box-shadow:0 0 12px rgba(218,160,74,.35);
}
.license-progress-bar--crit{
  background:linear-gradient(90deg,#a03040,var(--red));
  box-shadow:0 0 14px rgba(232,93,117,.4);
  animation:licenseBarCrit 1.1s ease-in-out infinite alternate;
}
@keyframes licenseBarCrit{
  from{filter:brightness(1)}
  to{filter:brightness(1.18)}
}
.license-meta{
  margin:0;
  font-size:.82rem;
  line-height:1.45;
  color:var(--text2);
}
@media (max-width:560px){
  .license-digit{
    min-width:1.25rem;
    height:2.15rem;
    font-size:1.2rem;
  }
  .license-chrono-sep{font-size:1.05rem;margin-top:-.65rem}
}
.agent-owner-tag{
  display:inline-block;
  margin-left:8px;
  padding:1px 8px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.03em;
  background:rgba(94,179,201,.16);
  color:#9ed3e0;
  vertical-align:middle;
}
@media (max-width:720px){
  .users-form-grid{grid-template-columns:1fr}
  .users-field--wide{grid-column:auto}
  .users-hero-stats{width:100%}
  .users-stat{flex:1;min-width:4.5rem}
}

/* ═══════════════════════════════════════════════════════════
   Mobile / narrow shell — drawer nav + touch-friendly layout
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .sidebar-toggle{display:inline-flex}

  #sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:1100;
    width:min(288px,88vw);
    max-height:none;
    height:100%;
    height:100dvh;
    transform:translateX(-105%);
    transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease;
    box-shadow:none;
    border-right:1px solid rgba(255,255,255,.08);
    padding-left:env(safe-area-inset-left,0px);
  }
  body.sidebar-open #sidebar{
    transform:translateX(0);
    box-shadow:12px 0 40px rgba(0,0,0,.55);
  }
  .sidebar-backdrop:not([hidden]){
    display:block;
  }
  #app{overflow:hidden}

  #topbar{
    gap:8px;
    padding:8px 10px;
    padding-left:max(8px,env(safe-area-inset-left,0px));
    padding-right:max(10px,env(safe-area-inset-right,0px));
    min-height:48px;
  }
  #topbar h1{
    font-size:13px;
    letter-spacing:.08em;
    max-width:42vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .topbar-leading{gap:8px;flex-wrap:nowrap}
  .topbar-center{display:none}
  .topbar-a11y-wrap{display:none}
  .topbar-actions{gap:6px}
  .status-badge{
    font-size:10px;
    padding:4px 8px;
    max-width:7.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #btnLogout .vbtn-label{display:none}
  #btnLogout{
    width:40px;
    height:40px;
    padding:0;
    justify-content:center;
    align-items:center;
  }
  #btnLogout .vico{margin:0}

  .view{
    padding:12px 12px 20px;
    padding-left:max(12px,env(safe-area-inset-left,0px));
    padding-right:max(12px,env(safe-area-inset-right,0px));
    padding-bottom:max(20px,env(safe-area-inset-bottom,0px));
    -webkit-overflow-scrolling:touch;
  }
  #viewerView.view.active{
    padding:0;
  }

  .agent-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .agent-search-input{
    max-width:none;
    font-size:16px; /* iOS: avoid zoom-on-focus */
    min-height:44px;
  }
  .agent-health-chips{flex-wrap:wrap}
  .agent-card .agent-header-tools .agent-menu-btn,
  .agent-card .agent-header-tools .agent-open-tab{
    min-width:40px;
    min-height:40px;
  }

  .builder-page,
  .payloads-page,
  .users-page,
  .license-page,
  .cryptor-page,
  .dropper-page,
  .settings-page{
    padding-left:0;
    padding-right:0;
    max-width:100%;
  }
  .builder-view.view{
    padding:12px 12px 28px;
  }
  .builder-history-row{
    flex-direction:column;
    align-items:stretch;
  }
  .builder-history-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .builder-history-actions .btn{flex:1;min-width:0;justify-content:center}
  .builder-actions{
    position:sticky;
    bottom:0;
    z-index:5;
    margin:0 -4px;
    padding:10px 4px calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,transparent,rgba(6,8,13,.92) 28%,rgba(6,8,13,.98));
  }
  .builder-submit{
    width:100%;
    min-height:48px;
    justify-content:center;
  }
  .builder-telegram-actions{
    flex-wrap:wrap;
  }
  .builder-telegram-actions .btn{flex:1;min-width:7rem;justify-content:center}
  .builder-inline{flex-wrap:wrap}
  .builder-inline .modal-input{min-width:0;width:100%}
  .modal-input.builder-field,
  .users-input,
  .setting-group input,
  textarea.builder-field{
    font-size:16px;
  }

  .payloads-hero{padding:1.15rem 1rem 1.1rem;margin:0 0 1rem}
  .payloads-hero-stats{width:100%}
  .payloads-filter{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:4px}
  .payloads-filter-btn{flex:0 0 auto}
  .payloads-grid{grid-template-columns:1fr}
  .payload-card-actions{flex-wrap:wrap}
  .payload-card-actions .btn{flex:1;min-width:calc(50% - 6px);justify-content:center}

  .users-hero,.license-hero{padding:1.1rem 1rem}
  .users-table{font-size:.8rem}
  .users-table th,.users-table td{padding:10px 8px}
  .users-row-actions{flex-wrap:wrap}

  #viewerContainer > .stream-controls-wrap{
    max-height:min(42vh,320px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  #viewerView #streamControls .btn.vbtn,
  #viewerView #viewerActions .btn{
    min-height:42px;
  }
  #viewerSidebar{
    max-height:none;
    padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
  }
  .viewer-offline-banner{
    margin:8px 8px 0;
    padding:10px 12px;
  }

  .modal-dialog{
    width:min(96vw,800px);
    max-height:min(92dvh,88vh);
    margin:max(8px,env(safe-area-inset-top,0px)) auto max(8px,env(safe-area-inset-bottom,0px));
  }
  .modal-overlay{
    padding:max(8px,env(safe-area-inset-top,0px)) 8px max(8px,env(safe-area-inset-bottom,0px));
    align-items:flex-start;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .btn,.nav-item,.payloads-filter-btn{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .nav-item{
    min-height:46px;
    padding:12px 18px;
  }

  html.panel-icons-only .nav-item-label{
    position:static !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    clip:auto !important;
    white-space:nowrap;
  }
  html.panel-icons-only .nav-item{
    gap:10px;
  }
}

@media (max-width:560px){
  #topbar h1{max-width:36vw;letter-spacing:.06em;font-size:12px}
  .status-badge{display:inline-flex;font-size:10px;padding:2px 8px;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .agent-card-ribbon-text{gap:1px}
  .builder-loading{
    flex-direction:column;
    align-items:stretch;
  }
  .builder-progress-block{min-width:0}
  .cryptor-drop-zone{padding:1.25rem 1rem}
  .settings-mfa-legacy-copy{min-width:0}
  .clipper-head{flex-direction:column;align-items:stretch}
  .settings-lang-grid{grid-template-columns:1fr}
  .settings-lang-native{max-width:none;font-size:16px}
}

@media (max-width:380px){
  #sidebar{width:min(100vw - 28px,288px)}
  .mercury-mark{display:none}
  .payload-card-actions .btn{min-width:100%}
}

/* Prefer fine pointer desktop: keep toggle hidden even if width is narrow in split view quirks */
@media (min-width:901px){
  .sidebar-toggle{display:none!important}
  .sidebar-backdrop{display:none!important}
  body.sidebar-open #sidebar{
    transform:none;
    box-shadow:4px 0 24px rgba(0,0,0,.4);
  }
}

/* RTL: drawer opens from the right on mobile */
@media (max-width:900px){
  html[dir="rtl"] #sidebar{
    left:auto;
    right:0;
    transform:translateX(105%);
    border-right:none;
    border-left:1px solid rgba(255,255,255,.08);
    padding-left:0;
    padding-right:env(safe-area-inset-right,0px);
  }
  html[dir="rtl"] body.sidebar-open #sidebar{
    transform:translateX(0);
    box-shadow:-12px 0 40px rgba(0,0,0,.55);
  }
  html[dir="rtl"] #topbar{
    flex-direction:row;
  }
  html[dir="rtl"] .topbar-leading{
    flex-direction:row;
  }
}