:root{
    --ink:#1C2321;
    --ink-soft:#4B5450;
    --bg:#EEF0EE;
    --panel:#FFFFFF;
    --line:#DBE1DD;
    --line-soft:#EAEDEA;
    --accent:#1F6F5C;
    --accent-dark:#17564A;
    --accent-soft:#DEEEEA;
    --muted:#767F7B;
    --sidebar-bg:#161B19;
    --sidebar-ink:#C9D0CC;
    --sidebar-ink-dim:#7C8783;
    --sidebar-line:#2A312E;
    --sidebar-active-bg:#20302B;
    --mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --display: 'Roboto Slab', ui-serif, Georgia, serif;
    --shadow: 0 1px 2px rgba(20,28,25,.04), 0 6px 16px -8px rgba(20,28,25,.10);
  }
  html[data-theme="dark"]{
    --ink:#E8ECEA;
    --ink-soft:#B7C0BB;
    --bg:#262d2b;
    --panel:#1C2223;
    --line:#333B39;
    --line-soft:#262D2B;
    --accent:#3FA98A;
    --accent-dark:#2E8069;
    --accent-soft:#1E3A33;
    --muted:#818B86;
    --sidebar-bg:#0F1312;
    --sidebar-line:#232B28;
    --sidebar-active-bg:#1B2D27;
    --shadow: 0 1px 2px rgba(0,0,0,.24), 0 6px 16px -8px rgba(0,0,0,.4);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    line-height:1.45;
    height:100%;
    display:flex;
    overflow:hidden;
    visibility:hidden;
  }

  /* ---------- Sidebar ---------- */
  aside.sidebar{
    width:230px;
    flex-shrink:0;
    background:var(--sidebar-bg);
    color:var(--sidebar-ink);
    display:flex;
    flex-direction:column;
    padding:20px 14px 28px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 8px 20px;
    margin-bottom:16px;
    border-bottom:1px solid var(--sidebar-line);
  }
  .brand .mark{
    width:30px; height:30px;
    border-radius:7px;
    background:transparent;
    color:#08110E;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--display);
    font-weight:700;
    font-size:14px;
    flex-shrink:0;
    overflow:hidden;
  }
  .brand .mark img{
    width:100%; height:100%;
    object-fit:contain;
    display:block;
  }
  .brand .name{
    font-family:'Orbitron', sans-serif;
    font-weight:700;
    font-size:14px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#5ac397;
    line-height:1.25;
    text-shadow:0 0 10px rgba(90,195,151,.65);
  }
  .brand .name small{
    display:block;
    font-family:var(--sans);
    font-weight:500;
    font-size:10.5px;
    color:var(--sidebar-ink-dim);
    margin-top:1px;
  }

  .navlabel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:10px;
    font-weight:700;
    color:#5ac397;
    opacity:.55;
    padding:0 10px;
    margin:6px 0 8px;
    font-family:'Share Tech Mono', monospace;
    letter-spacing:.18em;
  }
  .navlabel-text::before{ content:'// '; }
  .sidebar-collapse-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    flex-shrink:0;
    background:transparent;
    border:1px solid rgba(90,195,151,.3);
    border-radius:3px;
    color:#5ac397;
    font-size:9px;
    cursor:pointer;
    opacity:1;
    transition:all .15s ease;
  }
  .sidebar-collapse-btn:hover{
    background:rgba(90,195,151,.15);
    border-color:rgba(90,195,151,.6);
    color:#8ff0c8;
  }
  .sidebar-collapse-btn i{ transition:transform .2s ease; }

  /* ---------- Collapsed sidebar (icons only) ---------- */
  aside.sidebar.sidebar-collapsed{
    width:64px;
    padding:20px 10px 28px;
  }
  .sidebar-collapsed .brand{
    justify-content:center;
    padding:0 0 20px;
  }
  .sidebar-collapsed .brand .name{ display:none; }
  .sidebar-collapsed .navlabel{
    justify-content:center;
    padding:0;
  }
  .sidebar-collapsed .navlabel-text{ display:none; }
  .sidebar-collapsed .sidebar-collapse-btn i{ transform:rotate(180deg); }
  .sidebar-collapsed nav.toolnav button{
    justify-content:center;
    gap:0;
    padding:9px 0;
  }
  .sidebar-collapsed nav.toolnav button .label,
  .sidebar-collapsed nav.toolnav button .kbd,
  .sidebar-collapsed nav.toolnav button .draghandle,
  .sidebar-collapsed nav.toolnav button .favstar{
    display:none;
  }
  .sidebar-collapsed .sidebar-foot button{
    justify-content:center;
    gap:0;
    padding:9px 0;
  }
  .sidebar-collapsed .sidebar-foot button .label{ display:none; }
  .sidebar-collapsed .sidebar-foot .foot-row{
    flex-direction:column;
  }

  nav.toolnav{ display:flex; flex-direction:column; gap:5px; }
  nav.toolnav button{
    display:flex;
    align-items:center;
    gap:11px;
    width:100%;
    text-align:left;
    font-family:'Share Tech Mono', monospace;
    font-size:11.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    background:rgba(90,195,151,.03);
    color:#8fb8ab;
    border:1px solid rgba(90,195,151,.18);
    border-radius:4px;
    padding:9px 10px;
    cursor:pointer;
    transition:all .15s ease;
  }
  nav.toolnav button .glyph{
    width:20px; text-align:center; font-size:14px; flex-shrink:0;
    color:#5ac397;
  }
  nav.toolnav button .label{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .draghandle{
    width:12px;
    text-align:center;
    font-size:12px;
    color:rgba(90,195,151,.4);
    flex-shrink:0;
    cursor:grab;
    opacity:0;
    transition:opacity .1s ease;
  }
  nav.toolnav button:hover .draghandle{ opacity:1; }
  nav.toolnav button.dragging{ opacity:.4; cursor:grabbing; }
  nav.toolnav button.drag-over-top{ box-shadow:inset 0 2px 0 #5ac397; }
  nav.toolnav button.drag-over-bottom{ box-shadow:inset 0 -2px 0 #5ac397; }
  nav.toolnav button .kbd{
    margin-left:auto;
    font-family:'Share Tech Mono', monospace;
    font-size:9.5px;
    font-weight:600;
    color:rgba(90,195,151,.65);
    background:rgba(0,0,0,.4);
    border:1px solid rgba(90,195,151,.3);
    border-radius:3px;
    padding:2px 5px;
    flex-shrink:0;
  }
  nav.toolnav button.active .kbd{ color:#0a0d0e; background:rgba(10,13,14,.25); border-color:rgba(10,13,14,.3); }
  nav.toolnav button:hover{
    background:rgba(90,195,151,.1);
    border-color:rgba(90,195,151,.55);
    color:#fff;
    box-shadow:0 0 12px rgba(90,195,151,.18);
  }
  nav.toolnav button:hover .glyph{ color:#8ff0c8; }
  nav.toolnav button.active{
    background:#5ac397;
    color:#0a0d0e;
    border-color:#5ac397;
    box-shadow:0 0 16px rgba(90,195,151,.45), inset 0 0 10px rgba(0,0,0,.08);
  }
  nav.toolnav button.active .glyph{ color:#0a0d0e; }
  nav.toolnav button.active .draghandle{ color:rgba(10,13,14,.5); }
  nav.toolnav button.tool-pop{ animation:toolPop .28s ease; }
  @keyframes toolPop{
    0%{ transform:scale(1); }
    40%{ transform:scale(.95); }
    100%{ transform:scale(1); }
  }

  .sidebar-foot{
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid var(--sidebar-line);
  }
  .sidebar-foot button{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    background:transparent;
    border:1px solid var(--sidebar-line);
    color:var(--sidebar-ink);
    border-radius:8px;
    padding:9px 10px;
    font-family:var(--sans);
    font-size:12.5px;
    font-weight:550;
    cursor:pointer;
  }
  .sidebar-foot button:hover{ background:var(--sidebar-line); color:#fff; }
  .sidebar-foot .foot-row{
    display:flex;
    gap:6px;
  }
  .sidebar-foot .foot-row button{
    flex:1 1 0;
    min-width:0;
  }
  .sidebar-foot .foot-row button .label{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* ---------- Main column ---------- */
  .maincol{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  header.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 24px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
    flex-shrink:0;
  }
  .crumb{
    font-size:12px;
    color:var(--muted);
    font-family:var(--mono);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .crumb .current{ color:var(--ink); font-weight:600; }
  .topbar-right{ display:flex; align-items:center; gap:10px; }
  .statuspill{
    display:flex; align-items:center; gap:6px;
    font-size:11.5px;
    font-weight:600;
    color:var(--ink-soft);
    background:var(--line-soft);
    border:1px solid var(--line);
    border-radius:20px;
    padding:5px 11px 5px 9px;
  }
  .statuspill .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--accent);
  }
  .statuspill .dot.idle{ background:var(--muted); }
  .topbar-clock{
    display:flex;
    align-items:center;
    gap:10px;
    height:32px;
    padding:0 14px;
    background:#0a0d0e;
    border:1px solid #1c2b25;
    border-radius:20px;
    font-family:'Share Tech Mono', monospace;
    letter-spacing:.05em;
  }
  .topbar-clock .topbar-clock-rec{
    display:flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700;
    color:#ff2a2a;
    letter-spacing:.1em;
  }
  .topbar-clock .rec-dot{
    width:7px; height:7px; border-radius:50%;
    background:#ff2a2a;
    box-shadow:0 0 6px #ff2a2a;
    animation:cctvPulse 1.1s ease-in-out infinite;
  }
  .topbar-clock .clock-time{
    font-size:16px;
    font-weight:700;
    color:#5ac397;
    text-shadow:0 0 8px rgba(90,195,151,.55);
  }
  .topbar-clock .clock-date{
    font-size:12px;
    font-weight:600;
    color:#5ac397;
    opacity:.6;
    white-space:nowrap;
  }
  .clockpill{
    display:flex; align-items:center; gap:8px;
    font-size:11.5px;
    font-weight:600;
    color:var(--ink-soft);
    background:var(--line-soft);
    border:1px solid var(--line);
    border-radius:20px;
    padding:5px 11px;
    font-family:var(--mono);
    white-space:nowrap;
  }
  .clockpill .clock-date{ color:var(--muted); font-weight:500; }
  .clockpill .clock-time{ color:var(--ink); font-weight:700; letter-spacing:.02em; }

  content-area, .content-area{ flex:1; min-height:0; display:flex; position:relative; }

  .focusbtn{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; padding:0;
    border-radius:8px;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--ink-soft);
    font-size:15px;
    line-height:1;
    cursor:pointer;
  }
  .focusbtn:hover{ background:var(--line-soft); color:var(--ink); }
  .focusbtn:disabled{ opacity:.4; cursor:default; }
  .focusbtn:disabled:hover{ background:var(--panel); color:var(--ink-soft); }

  /* Focus mode: hide sidebar + topbar, iframe fills the viewport */
  body.focus-mode .sidebar{ display:none; }
  body.focus-mode header.topbar{ display:none; }
  body.focus-mode .restore-cluster{ display:block; }

  .restore-cluster{
    display:none;
    position:fixed;
    top:10px; left:10px;
    width:30px; height:30px;
    z-index:2000;
  }
  .restorebtn{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center; justify-content:center;
    width:30px; height:30px;
    border-radius:8px;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--ink-soft);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    box-shadow:var(--shadow);
    opacity:.55;
    transition:opacity .12s ease;
  }
  .restore-cluster:hover .restorebtn{ opacity:1; color:var(--ink); }

  /* Favorite tools fan out from the restore button and stay visible in focus mode */
  .fav-fan{ position:absolute; inset:0; }
  .fav-fan-btn{
    position:absolute;
    top:0; left:0;
    width:26px; height:26px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--sidebar-bg);
    border:1px solid var(--sidebar-line);
    color:var(--sidebar-ink);
    font-size:13px;
    box-shadow:var(--shadow);
    cursor:pointer;
    opacity:.5;
    pointer-events:auto;
    transform:translate(var(--dx), var(--dy)) scale(1);
    transition:transform .15s ease, background .12s ease, color .12s ease, opacity .12s ease;
    z-index:1;
  }
  .fav-fan-btn:hover{
    opacity:1;
    background:var(--sidebar-active-bg);
    color:#fff;
    transform:translate(var(--dx), var(--dy)) scale(1.16);
  }

  /* Star toggle on each sidebar tool button to mark it as a focus-mode favorite */
  nav.toolnav button .favstar{
    flex-shrink:0;
    font-size:12px;
    margin-left:4px;
    opacity:0;
    color:var(--sidebar-ink-dim);
    cursor:pointer;
    transition:opacity .12s ease, color .12s ease, transform .12s ease;
  }
  nav.toolnav button:hover .favstar{ opacity:1; }
  nav.toolnav button .favstar.active{ opacity:1; color:#F0B740; }
  nav.toolnav button .favstar:hover{ transform:scale(1.18); }

  .toast-container{
    position:fixed;
    bottom:22px; right:22px;
    z-index:6000;
    display:flex;
    flex-direction:column-reverse;
    gap:10px;
    pointer-events:none;
    max-width:min(340px, calc(100vw - 40px));
  }
  .toast{
    background:linear-gradient(135deg, rgba(20,26,27,.97) 0%, rgba(13,16,17,.95) 100%);
    border:1px solid rgba(90,195,151,.3);
    border-left:3px solid #5ac397;
    color:#e8ecea;
    padding:11px 15px;
    border-radius:4px;
    box-shadow:inset 0 0 24px rgba(90,195,151,.04), 0 14px 30px -14px rgba(0,0,0,.7), 0 0 18px rgba(90,195,151,.1);
    font-family:'Share Tech Mono', monospace;
    font-size:12.5px;
    line-height:1.5;
    opacity:0;
    transform:translateX(24px);
    transition:opacity .25s ease, transform .25s ease;
    pointer-events:auto;
    cursor:pointer;
  }
  .toast.show{ opacity:1; transform:translateX(0); }
  .toast.hide{ opacity:0; transform:translateX(24px); }

  .empty-state{
    margin:auto;
    text-align:center;
    color:var(--muted);
    max-width:42ch;
  }
  .empty-state .glyph{ font-size:30px; margin-bottom:12px; }
  .empty-state h2{
    font-family:var(--display);
    font-size:16px;
    color:var(--ink);
    margin:0 0 6px;
  }
  .empty-state p{ font-size:13px; margin:0; }

  iframe.tool-frame{
    flex:1;
    width:100%;
    height:100%;
    border:none;
    display:none;
    background:var(--panel);
  }
  iframe.tool-frame.active{ display:block; animation:frameIn .25s ease; }
  /* Split view no longer reparents iframes into the pane (that forces a
     browser reload every time). Instead the iframe stays put in .content-area
     and gets visually placed over the pane with fixed positioning, synced in
     JS via syncFramePosition()/repositionSplitFrames(). */
  iframe.tool-frame.split-hosted{
    display:block;
    position:absolute;
    z-index:20;
    border:none;
  }
  @keyframes frameIn{
    from{ opacity:0; transform:translateY(4px); }
    to{ opacity:1; transform:translateY(0); }
  }

  #splitToggle.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }
  #splitToggle.active:hover{ background:var(--accent-dark); color:#fff; }

  /* ---------- Split view: two tools side by side ---------- */
  .split-container{
    display:none;
    flex:1;
    min-height:0;
    width:100%;
    align-items:stretch;
    gap:0;
  }
  .split-container.show{ display:flex; }
  .content-area.split-active .empty-state{ display:none !important; }

  .split-pane{
    flex:1 1 50%;
    min-width:160px;
    min-height:0;
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    background:var(--panel);
  }
  .split-pane.focused{
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent);
  }
  .split-pane-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:6px 8px 6px 12px;
    background:var(--line-soft);
    border-bottom:1px solid var(--line);
    font-family:var(--mono);
    font-size:11.5px;
    font-weight:600;
    color:var(--ink-soft);
    flex-shrink:0;
    cursor:pointer;
    user-select:none;
  }
  .split-pane.focused .split-pane-head{ color:var(--accent); }
  .split-pane-label{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .split-pane-close{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px; height:20px;
    background:transparent;
    border:none;
    border-radius:5px;
    color:var(--muted);
    font-size:12px;
    line-height:1;
    cursor:pointer;
  }
  .split-pane-close:hover{ background:var(--line); color:var(--ink); }
  .split-pane-head .split-pane-label{ margin-right:auto; }
  .split-pane-swap{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px; height:20px;
    background:transparent;
    border:none;
    border-radius:5px;
    color:var(--muted);
    font-size:13px;
    line-height:1;
    cursor:pointer;
  }
  .split-pane-swap:hover{ background:var(--line); color:var(--accent); }
  .split-pane-swap:disabled{ opacity:.35; cursor:default; }
  .split-pane-swap:disabled:hover{ background:transparent; color:var(--muted); }
  .split-pane-body{
    flex:1;
    min-height:0;
    display:flex;
    position:relative;
  }
  .split-pane-body .tool-frame{
    display:block !important;
    position:static;
    flex:1;
    width:100%;
    height:100%;
  }
  .split-pane-empty{
    margin:auto;
    text-align:center;
    color:var(--muted);
    font-size:12.5px;
    line-height:1.5;
    padding:20px;
    max-width:24ch;
  }
  .split-resizer{
    width:9px;
    flex-shrink:0;
    cursor:col-resize;
    position:relative;
  }
  .split-resizer::after{
    content:'';
    position:absolute;
    top:0; bottom:0; left:50%;
    width:2px;
    margin-left:-1px;
    background:var(--line);
    border-radius:2px;
    transition:background .12s ease;
  }
  .split-resizer:hover::after, .split-resizer.dragging::after{ background:var(--accent); }
  /* While the handle is being dragged, the hosted iframes must not receive
     the pointer: a move landing over one (they sit at z-index:20, in their
     own document) would stop this page from seeing further mousemove events,
     which made the middle of the long split line feel stuck and jumpy.
     The frames are siblings of .split-container inside .content-area, so the
     flag lives on .content-area. */
  .content-area.resizing .tool-frame.split-hosted{ pointer-events:none; }
  .content-area.resizing .split-resizer{ z-index:30; }

  /* ---------- Tool-switch loading overlay (CCTV command-center theme) ---------- */
  .tool-loading{
    position:absolute; inset:0; z-index:50;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,12,13,.88);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease;
  }
  .tool-loading.show{
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .tool-loading-card{
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:14px;
    padding:28px 34px;
    background:linear-gradient(135deg, rgba(16,21,22,.96) 0%, rgba(10,12,13,.94) 100%);
    border:1px solid rgba(90,195,151,.4);
    box-shadow:inset 0 0 30px rgba(90,195,151,.05), 0 20px 40px rgba(0,0,0,.6), 0 0 50px rgba(90,195,151,.12);
    clip-path:polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    overflow:hidden;
    animation:transitionPop .22s ease;
  }
  .tool-loading-label{
    font-family:'Share Tech Mono', monospace;
    font-size:12.5px;
    letter-spacing:.03em;
    color:#5ac397;
    text-shadow:0 0 8px rgba(90,195,151,.5);
    text-align:center;
  }

  /* ---------- Login overlay (CCTV command-center theme) ---------- */
  .login-overlay{
    --cyber-cyan:#5ac397;
    --cyber-blue:#2d5f49;
    --cyber-green:#6ae2b0;
    --cyber-red:#efa147;
    --cyber-alert:#ff2a2a;
    --cyber-bg:#0a0d0e;
    position:fixed;
    inset:0;
    z-index:3000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--cyber-bg);
    padding:24px;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    overflow:hidden;
    perspective:1000px;
  }
  body.auth-locked .login-overlay{ opacity:1; pointer-events:auto; cursor:none; }
  /* While the boot screen is covering the page, snap the login card instantly
     instead of letting it cross-fade with the boot screen's own fade-out. */
  body.booting .login-overlay{ transition:none; }
  body.booting .sidebar,
  body.booting .maincol{ animation:none; }
  body.auth-locked .sidebar,
  body.auth-locked .maincol,
  body.auth-locked .restore-cluster{ display:none; }

  .cctv-backdrop{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 20% 30%, rgba(90,195,151,.08), transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(45,95,73,.12), transparent 50%),
      repeating-linear-gradient(0deg, rgba(90,195,151,.03) 0px, rgba(90,195,151,.03) 1px, transparent 1px, transparent 3px),
      #0a0d0e;
    z-index:0;
  }
  .cctv-scanline-overlay{
    position:absolute; inset:0;
    background:linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.25) 50%),
               linear-gradient(90deg, rgba(255,0,0,.03), rgba(0,255,0,.01), rgba(0,0,255,.03));
    background-size:100% 4px, 6px 100%;
    z-index:2;
    pointer-events:none;
    opacity:.4;
  }
  .cctv-vignette{
    position:absolute; inset:0;
    box-shadow:inset 0 0 180px rgba(0,0,0,.85);
    z-index:2;
    pointer-events:none;
  }
  .cctv-grid-lines{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(90,195,151,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(90,195,151,.06) 1px, transparent 1px);
    background-size:48px 48px;
    z-index:1;
    opacity:.5;
  }

  .cctv-hud{
    position:absolute;
    z-index:4;
    pointer-events:none;
    font-family:'Share Tech Mono', monospace;
    color:var(--cyber-cyan);
    letter-spacing:.12em;
    opacity:.92;
    text-shadow:0 0 8px rgba(90,195,151,.5);
  }
  .cctv-hud-tl{ top:22px; left:24px; font-size:12px; }
  .cctv-hud-tl .cctv-rec{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .cctv-rec-dot{
    width:9px; height:9px; border-radius:50%;
    background:var(--cyber-alert);
    box-shadow:0 0 10px var(--cyber-alert);
    animation:cctvPulse 1.1s ease-in-out infinite;
  }
  .cctv-rec-label{ color:var(--cyber-alert); font-weight:700; font-size:13px; }
  .cctv-hud-sub{ font-size:10.5px; opacity:.75; }
  .cctv-hud-tr{ top:22px; right:24px; font-size:12px; text-align:right; }
  .cctv-hud-time{ font-size:15px; font-weight:700; color:#fff; }
  .cctv-hud-date{ font-size:11px; opacity:.85; }
  @keyframes cctvPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

  #custom-cursor{
    position:fixed;
    top:0; left:0;
    width:34px; height:34px;
    border:1px solid rgba(90,195,151,.6);
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:3600;
    display:flex; align-items:center; justify-content:center;
  }
  #custom-cursor::before, #custom-cursor::after{
    content:'';
    position:absolute;
    background:var(--cyber-cyan);
  }
  #custom-cursor::before{ width:2px; height:9px; }
  #custom-cursor::after{ width:9px; height:2px; }
  #custom-cursor.hovering{
    width:56px; height:56px;
    border-color:var(--cyber-green, #6ae2b0);
    background-color:rgba(106,226,176,.05);
  }

  /* Live feed backdrop + optics modes */
  .cctv-live-backdrop{
    position:absolute; inset:0;
    background-image:url('../images/background.png');
    background-size:cover;
    background-position:center;
    opacity:.3;
    filter:grayscale(20%) contrast(110%) brightness(45%);
    z-index:1;
    transition:filter .3s ease, opacity .3s ease;
  }
  .cctv-live-backdrop.mode-nvg{ filter:sepia(100%) hue-rotate(90deg) saturate(300%) contrast(160%) brightness(65%) !important; opacity:.5 !important; }
  .cctv-live-backdrop.mode-thermal{ filter:invert(100%) hue-rotate(180deg) saturate(250%) contrast(200%) !important; opacity:.4 !important; }
  .cctv-live-backdrop.mode-hi-contrast{ filter:grayscale(100%) contrast(300%) brightness(55%) !important; opacity:.35 !important; }
  body.login-lockdown .cctv-live-backdrop{
    filter:sepia(100%) hue-rotate(300deg) saturate(500%) contrast(200%) brightness(45%) !important;
  }

  /* Camera quadrant grid */
  .cctv-cam-grid{
    position:absolute; inset:0;
    z-index:3;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
  }
  .cctv-cam-quadrant{
    position:relative;
    padding:16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid transparent;
    transition:all .2s ease;
  }
  .cctv-cam-quadrant:hover{
    border-color:rgba(90,195,151,.3);
    background-color:rgba(90,195,151,.04);
    box-shadow:inset 0 0 35px rgba(90,195,151,.2);
  }
  .cctv-cam-caption{
    opacity:0;
    transition:opacity .2s ease;
    font-family:'Share Tech Mono', monospace;
    font-size:11px;
    color:var(--cyber-cyan, #5ac397);
    background:rgba(0,0,0,.82);
    padding:8px;
    border:1px solid rgba(90,195,151,.4);
    width:fit-content;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .cctv-cam-quadrant:hover .cctv-cam-caption{ opacity:1; }
  .cctv-cam-caption .cctv-cam-title{ font-weight:700; }
  .cctv-cam-caption .cctv-cam-hint{ font-size:9px; color:var(--cyber-green, #6ae2b0); }
  .ptz-row{ display:flex; align-items:center; gap:4px; margin-top:2px; padding-top:4px; border-top:1px solid rgba(90,195,151,.2); }
  .ptz-btn{
    background:rgba(10,13,14,.85);
    border:1px solid rgba(90,195,151,.5);
    color:var(--cyber-cyan, #5ac397);
    padding:2px 6px;
    font-size:9px;
    cursor:pointer;
    transition:all .15s ease;
  }
  .ptz-btn:hover{ background:var(--cyber-cyan, #5ac397); color:#0a0d0e; box-shadow:0 0 10px #5ac397; }
  .cctv-cam-pos{
    align-self:flex-end;
    font-family:'Share Tech Mono', monospace;
    font-size:10px;
    color:rgba(90,195,151,.5);
    opacity:0;
    transition:opacity .2s ease;
  }
  .cctv-cam-quadrant:hover .cctv-cam-pos{ opacity:1; }

  /* Motion tracking boxes */
  .cctv-motion-box-container{ position:absolute; inset:0; z-index:4; pointer-events:none; }
  .cctv-motion-box{
    position:absolute;
    border:1px dashed var(--cyber-green, #6ae2b0);
    background:rgba(106,226,176,.08);
    cursor:pointer;
    transition:all .3s ease;
    pointer-events:auto;
    font-family:'Share Tech Mono', monospace;
    font-size:9px;
    color:var(--cyber-green, #6ae2b0);
    padding:4px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .cctv-motion-box:hover{ border-style:solid; background:rgba(106,226,176,.25); box-shadow:0 0 15px #6ae2b0; }
  .cctv-motion-box .cctv-motion-flag{ color:var(--cyber-alert, #efa147); font-weight:700; font-size:8px; }

  /* Target analysis modal */
  .cctv-target-modal{
    position:fixed; inset:0; z-index:3700;
    background:rgba(0,0,0,.8);
    display:none; align-items:center; justify-content:center;
  }
  .cctv-target-modal.show{ display:flex; }
  .cctv-target-card{
    background:#000;
    border:1px solid var(--cyber-cyan, #5ac397);
    padding:22px;
    max-width:340px; width:90%;
    font-family:'Share Tech Mono', monospace;
    font-size:12px;
    color:var(--cyber-cyan, #5ac397);
    display:flex; flex-direction:column; gap:14px;
    box-shadow:0 0 30px rgba(90,195,151,.3);
  }
  .cctv-target-card .cctv-target-head{
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid rgba(90,195,151,.4); padding-bottom:8px;
  }
  .cctv-target-card .cctv-target-head span.title{ font-weight:700; font-size:13px; color:#fff; }
  .cctv-target-close{ background:none; border:none; color:var(--cyber-alert, #efa147); font-weight:700; font-size:15px; cursor:pointer; }
  .cctv-target-close:hover{ color:#fff; }
  .cctv-target-card .row{ display:flex; justify-content:space-between; }
  .cctv-target-note{ border:1px solid rgba(90,195,151,.3); background:rgba(90,195,151,.05); padding:8px; font-size:10px; }
  .cctv-target-ack{
    width:100%; background:var(--cyber-cyan, #5ac397); color:#0a0d0e;
    border:none; padding:9px; font-weight:700; cursor:pointer; font-family:'Orbitron', sans-serif;
    letter-spacing:.05em; text-transform:uppercase; font-size:11px;
  }
  .cctv-target-ack:hover{ background:var(--cyber-green, #6ae2b0); }

  /* System log drawer */
  .cctv-drawer-toggle{
    position:absolute; left:0; top:50%; transform:translateY(-50%);
    z-index:5;
    background:rgba(0,0,0,.85);
    border:1px solid rgba(90,195,151,.5); border-left:none;
    color:var(--cyber-cyan, #5ac397);
    padding:8px 6px;
    font-family:'Share Tech Mono', monospace;
    font-size:10px;
    cursor:pointer;
    writing-mode:vertical-rl;
    transition:all .15s ease;
  }
  .cctv-drawer-toggle:hover{ background:var(--cyber-cyan, #5ac397); color:#0a0d0e; }
  .cctv-drawer{
    position:absolute; left:0; top:0; bottom:0; width:280px;
    background:rgba(0,0,0,.96);
    border-right:1px solid rgba(90,195,151,.4);
    z-index:6;
    padding:16px;
    font-family:'Share Tech Mono', monospace;
    font-size:11px;
    display:flex; flex-direction:column; justify-content:space-between;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:8px 0 30px rgba(0,0,0,.6);
  }
  .cctv-drawer.open{ transform:translateX(0); }
  .cctv-drawer-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(90,195,151,.3); padding-bottom:8px; margin-bottom:12px; }
  .cctv-drawer-head span{ color:var(--cyber-green, #6ae2b0); font-weight:700; font-size:12px; }
  .cctv-drawer-close{ background:none; border:none; color:var(--cyber-alert, #efa147); font-weight:700; cursor:pointer; font-size:13px; }
  .cctv-drawer-filters{ display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap; }
  .cctv-drawer-filters button{
    background:rgba(90,195,151,.15); border:1px solid rgba(90,195,151,.4); color:var(--cyber-cyan, #5ac397);
    font-size:9px; padding:3px 7px; cursor:pointer; font-family:'Share Tech Mono', monospace;
  }
  .cctv-drawer-filters button:hover{ background:rgba(90,195,151,.35); }
  .cctv-drawer-filters button.alert-filter{ background:rgba(255,42,42,.12); border-color:rgba(255,42,42,.4); color:var(--cyber-alert, #efa147); }
  .cctv-drawer-log-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
  .cctv-drawer-log-list .log-line{ border-left:2px solid var(--cyber-cyan, #5ac397); padding-left:8px; }
  .cctv-drawer-log-list .log-line.log-alert{ border-left-color:var(--cyber-alert, #efa147); }
  .cctv-drawer-log-list .log-time{ color:rgba(90,195,151,.5); margin-right:4px; }
  .cctv-drawer-purge{
    margin-top:12px; padding-top:12px; border-top:1px solid rgba(90,195,151,.3);
  }
  .cctv-drawer-purge button{
    width:100%; background:rgba(255,42,42,.12); color:var(--cyber-alert, #efa147);
    border:1px solid rgba(255,42,42,.5); padding:7px; font-weight:700; cursor:pointer;
    font-family:'Share Tech Mono', monospace; font-size:10px;
  }
  .cctv-drawer-purge button:hover{ background:var(--cyber-alert, #efa147); color:#0a0d0e; }

  /* Optics + lockdown toolbar */
  .cctv-toolbar{
    position:absolute; left:24px; bottom:24px; z-index:5;
    display:flex; gap:6px; align-items:center; flex-wrap:wrap;
    background:rgba(0,0,0,.88);
    border:1px solid rgba(90,195,151,.4);
    padding:8px;
    font-family:'Share Tech Mono', monospace; font-size:10px;
  }
  .cctv-toolbar-label{ color:var(--cyber-cyan, #5ac397); font-weight:700; margin-right:2px; }
  .cctv-toolbar button{
    padding:5px 8px; background:rgba(90,195,151,.15); color:var(--cyber-cyan, #5ac397);
    border:1px solid var(--cyber-cyan, #5ac397); cursor:pointer; transition:.15s;
    font-family:'Share Tech Mono', monospace; font-size:10px;
  }
  .cctv-toolbar button:hover, .cctv-toolbar button.active{ background:var(--cyber-cyan, #5ac397); color:#0a0d0e; }
  .cctv-toolbar-sep{ width:1px; height:18px; background:rgba(90,195,151,.3); margin:0 2px; }
  #loginLockdownBtn{
    padding:6px 10px; background:rgba(255,42,42,.15); color:var(--cyber-alert, #efa147);
    border:1px solid var(--cyber-alert, #efa147); font-weight:700; cursor:pointer;
    animation:cctvPulse 1.4s ease-in-out infinite;
  }
  #loginLockdownBtn:hover{ background:var(--cyber-alert, #efa147); color:#0a0d0e; }
  #loginLockdownBtn.active{ background:var(--cyber-alert, #efa147); color:#0a0d0e; animation:none; }

  /* Audio waveform widget */
  .cctv-waveform{
    position:absolute; right:24px; bottom:24px; z-index:5;
    background:rgba(0,0,0,.88);
    border:1px solid rgba(90,195,151,.4);
    padding:8px; width:190px;
    font-family:'Share Tech Mono', monospace; font-size:10px;
    color:rgba(90,195,151,.7);
  }
  .cctv-waveform-head{ display:flex; justify-content:space-between; margin-bottom:4px; }
  .cctv-waveform canvas{ width:100%; display:block; background:rgba(0,0,0,.5); border:1px solid rgba(90,195,151,.2); }

  /* CLI input row inside terminal */
  .cctv-cli-row{
    display:flex; align-items:center; gap:6px;
    border-top:1px solid rgba(90,195,151,.3);
    margin-top:4px; padding-top:4px;
  }
  .cctv-cli-row span{ color:var(--cyber-green, #6ae2b0); font-size:10px; font-weight:700; }
  .cctv-cli-input{
    background:transparent; border:none; outline:none; color:#fff; width:100%;
    font-family:'Share Tech Mono', monospace; font-size:11px;
  }

  @keyframes appReveal{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }
  body:not(.auth-locked) .sidebar,
  body:not(.auth-locked) .maincol{
    animation:appReveal .35s ease both;
  }

  /* ---------- Boot loading screen (shown while the initial session check runs) ---------- */
  #bootScreen{
    position:fixed;
    inset:0;
    z-index:9000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:#0a0d0e;
    visibility:visible;
    opacity:1;
    transition:opacity .25s ease;
    overflow:hidden;
  }
  #bootScreen.hide{
    opacity:0;
    pointer-events:none;
  }
  #bootScreen .boot-scan{
    position:absolute; left:0; width:100%; height:2px;
    background:#5ac397;
    box-shadow:0 0 15px #5ac397, 0 0 30px #5ac397;
    opacity:.35;
    animation:cctvScan 4s linear infinite;
    pointer-events:none;
  }
  #bootScreen .boot-corner{ position:absolute; width:26px; height:26px; border-color:rgba(90,195,151,.35); }
  #bootScreen .boot-corner.tl{ top:26px; left:26px; border-top:2px solid; border-left:2px solid; }
  #bootScreen .boot-corner.tr{ top:26px; right:26px; border-top:2px solid; border-right:2px solid; }
  #bootScreen .boot-corner.bl{ bottom:26px; left:26px; border-bottom:2px solid; border-left:2px solid; }
  #bootScreen .boot-corner.br{ bottom:26px; right:26px; border-bottom:2px solid; border-right:2px solid; }
  #bootScreen .boot-ring{
    position:relative;
    width:56px; height:56px;
    margin-bottom:4px;
  }
  #bootScreen .boot-ring::before{
    content:'';
    position:absolute; inset:0;
    border-radius:50%;
    border:3px dashed rgba(90,195,151,.4);
    animation:cctvSpin 3s linear infinite;
  }
  #bootScreen .boot-ring::after{
    content:'';
    position:absolute; inset:18px;
    border-radius:50%;
    background:#5ac397;
    box-shadow:0 0 12px #5ac397, 0 0 24px rgba(90,195,151,.6);
    animation:bootPulse 1.4s ease-in-out infinite;
  }
  @keyframes bootPulse{ 0%,100%{ opacity:.5; transform:scale(.82); } 50%{ opacity:1; transform:scale(1); } }
  #bootScreen .boot-label{
    font-family:'Orbitron', sans-serif;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:rgba(90,195,151,.55);
  }
  #bootScreen .boot-text{
    font-family:'Share Tech Mono', monospace;
    font-size:12.5px;
    color:#5ac397;
    text-shadow:0 0 8px rgba(90,195,151,.5);
    max-width:320px;
    text-align:center;
    padding:0 20px;
  }
  @keyframes bootBlink{ 50%{ opacity:0; } }

  /* ---------- Transition overlay (login / logout loading) ---------- */
  .transition-overlay{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(10,12,13,.82);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .transition-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .transition-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:32px 38px;
    background:linear-gradient(135deg, rgba(16,21,22,.96) 0%, rgba(10,12,13,.94) 100%);
    border:1px solid rgba(90,195,151,.4);
    box-shadow:inset 0 0 30px rgba(90,195,151,.05), 0 25px 50px rgba(0,0,0,.85), 0 0 60px rgba(90,195,151,.15);
    clip-path:polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    overflow:hidden;
    animation:transitionPop .22s ease;
  }
  @keyframes transitionPop{
    from{ opacity:0; transform:scale(.94); }
    to{ opacity:1; transform:scale(1); }
  }
  .transition-spinner{
    position:relative;
    width:38px; height:38px;
  }
  .transition-spinner::before{
    content:'';
    position:absolute; inset:0;
    border-radius:50%;
    border:3px dashed rgba(90,195,151,.4);
    animation:cctvSpin 3s linear infinite;
  }
  .transition-spinner::after{
    content:'';
    position:absolute; inset:12px;
    border-radius:50%;
    background:#5ac397;
    box-shadow:0 0 12px #5ac397, 0 0 24px rgba(90,195,151,.6);
    animation:bootPulse 1.4s ease-in-out infinite;
  }
  .transition-text{
    font-family:'Share Tech Mono', monospace;
    font-size:13px;
    letter-spacing:.03em;
    color:#5ac397;
    text-shadow:0 0 8px rgba(90,195,151,.5);
    text-align:center;
    max-width:280px;
  }

  /* Shared multi-line status text (used inside .boot-text / .transition-text) */
  .status-line{
    display:block;
  }
  .status-line + .status-line{
    margin-top:8px;
  }
  .status-line-count{
    font-size:1.3em;
    font-weight:700;
    letter-spacing:.06em;
  }
  .status-line-sub{
    font-size:.82em;
    color:rgba(90,195,151,.65);
    text-shadow:none;
  }
  .status-cursor{
    display:inline-block;
    width:.5em;
    height:1em;
    margin-left:.15em;
    vertical-align:-.15em;
    background:currentColor;
    box-shadow:0 0 6px currentColor, 0 0 12px currentColor;
    animation:bootBlink 1s step-end infinite;
  }

  #panel-wrapper{
    position:relative;
    z-index:10;
    width:100%;
    max-width:380px;
    transform-style:preserve-3d;
    transition:transform .1s ease-out;
  }
  .login-card{
    position:relative;
    width:100%;
    padding:30px 26px 24px;
    background:linear-gradient(135deg, rgba(16,21,22,.96) 0%, rgba(10,12,13,.94) 100%);
    backdrop-filter:blur(14px);
    border:1px solid rgba(90,195,151,.4);
    box-shadow:inset 0 0 30px rgba(90,195,151,.05), 0 25px 50px rgba(0,0,0,.85), 0 0 60px rgba(90,195,151,.15);
    clip-path:polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    transform:translateZ(20px);
    overflow:hidden;
  }
  .cctv-panel-scanner{
    position:absolute;
    left:0; width:100%; height:2px;
    background:var(--cyber-cyan, #5ac397);
    box-shadow:0 0 15px #5ac397, 0 0 30px #5ac397;
    opacity:.4;
    z-index:20;
    pointer-events:none;
    animation:cctvScan 4s linear infinite;
  }
  @keyframes cctvScan{ 0%{ top:-10%; } 100%{ top:110%; } }
  .cctv-corner{ position:absolute; width:22px; height:22px; border-color:#5ac397; opacity:.5; margin:11px; }
  .cctv-corner-tl{ top:0; left:0; border-top:2px solid; border-left:2px solid; }
  .cctv-corner-tr{ top:0; right:0; border-top:2px solid; border-right:2px solid; }
  .cctv-corner-bl{ bottom:0; left:0; border-bottom:2px solid; border-left:2px solid; }
  .cctv-corner-br{ bottom:0; right:0; border-bottom:2px solid; border-right:2px solid; }

  .login-card .brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    height:auto;
    padding:0 0 16px;
    margin-bottom:18px;
    border-bottom:none;
    position:relative;
    z-index:5;
  }
  .login-card .brand .eye-wrap{
    position:relative;
    width:84px; height:84px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .eye-ring-outer{
    position:absolute; inset:0;
    border:4px dashed rgba(90,195,151,.4);
    border-radius:50%;
    animation:cctvSpin 8s linear infinite;
  }
  .eye-ring-inner{
    position:absolute; inset:10px;
    border:2px solid rgba(45,95,73,.6);
    border-radius:50%;
    animation:cctvSpinReverse 12s linear infinite;
  }
  @keyframes cctvSpin{ to{ transform:rotate(360deg); } }
  @keyframes cctvSpinReverse{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } }
  .eye-core{
    position:relative;
    width:52px; height:52px;
    border-radius:50%;
    background:var(--cyber-bg, #0a0d0e);
    border:2px solid #5ac397;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 15px rgba(90,195,151,.5);
  }
  .eye-core svg{
    width:34px; height:34px;
    color:#5ac397;
    text-shadow:0 0 10px rgba(90,195,151,.6);
    filter:drop-shadow(0 0 6px rgba(90,195,151,.6));
  }
  #login-camera-lens{ transition:transform .1s ease-out; }
  .login-card .brand .name{
    font-family:'Orbitron', sans-serif;
    font-weight:700;
    font-size:19px;
    color:#fff;
    line-height:1.25;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-align:center;
    text-shadow:0 0 10px rgba(90,195,151,.6);
  }
  .login-card .brand .name small{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:10px;
    color:rgba(90,195,151,.9);
    letter-spacing:.25em;
    text-transform:uppercase;
    margin-top:6px;
  }
  .login-card .brand .name small::before,
  .login-card .brand .name small::after{
    content:'';
    width:28px; height:1px;
    background:rgba(90,195,151,.6);
  }

  .cctv-terminal{
    position:relative;
    z-index:20;
    background:rgba(0,0,0,.8);
    border:1px solid rgba(90,195,151,.4);
    padding:10px 10px 8px;
    height:72px;
    overflow:hidden;
    font-family:'Share Tech Mono', monospace;
    font-size:12px;
    margin-bottom:14px;
  }
  .cctv-terminal-tag{
    position:absolute; top:0; right:0;
    background:#5ac397; color:#0a0d0e;
    padding:2px 8px; font-weight:700; font-size:9px;
    letter-spacing:.05em;
  }
  .cctv-terminal-output{
    color:rgba(90,195,151,.9);
    display:flex; flex-direction:column; gap:2px;
    overflow-y:auto; height:100%; padding-right:2px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .cctv-terminal-output::-webkit-scrollbar{ display:none; width:0; height:0; }
  .cctv-terminal-output .err{ color:#ff2a2a; }
  .cctv-terminal-output .ok{ color:#6ae2b0; font-weight:700; }

  .login-card-head{ margin-bottom:16px; position:relative; z-index:10; }
  .login-card-head h2{
    font-family:'Orbitron', sans-serif;
    font-weight:700;
    font-size:16px;
    color:#fff;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin:0 0 4px;
  }
  .login-card-head p{
    font-size:12px;
    font-family:'Share Tech Mono', monospace;
    color:rgba(90,195,151,.65);
    margin:0;
  }
  .login-card label.floating-label{
    position:absolute;
    left:16px; top:50%;
    transform:translateY(-50%);
    font-family:'Orbitron', sans-serif;
    font-size:.82rem;
    color:rgba(90,195,151,.6);
    text-transform:uppercase;
    letter-spacing:.12em;
    pointer-events:none;
    transition:all .3s cubic-bezier(.4,0,.2,1);
    margin:0;
    font-weight:400;
  }
  .login-card .field{ margin-bottom:14px; position:relative; z-index:10; }
  .input-wrap{ position:relative; }
  .input-icon{ display:none; }
  .login-card input{
    width:100%;
    font-family:'Share Tech Mono', monospace;
    font-size:.9rem;
    padding:12px 14px;
    border-radius:0;
    border:1px solid rgba(90,195,151,.35);
    background:rgba(10,12,13,.9);
    color:#fff;
    outline:none;
    transition:all .3s ease;
  }
  .login-card input::placeholder{ color:transparent; }
  .login-card input:focus{
    border-color:#5ac397;
    box-shadow:0 0 15px rgba(90,195,151,.3), inset 0 0 10px rgba(90,195,151,.15);
  }
  .login-card input:focus ~ .floating-label,
  .login-card input:not(:placeholder-shown) ~ .floating-label,
  .login-card input.has-value ~ .floating-label{
    top:0; left:12px;
    font-size:.68rem;
    color:#5ac397;
    background:var(--cyber-bg, #0a0d0e);
    padding:0 4px;
    border-left:1px solid #5ac397;
    border-right:1px solid #5ac397;
  }
  /* Chrome/Safari fill inputs via autofill without firing input events or
     reliably updating :placeholder-shown, so the label never shrinks on its
     own. This keyframe is a no-op animation used purely as a hook: it starts
     playing the instant the browser marks the field :-webkit-autofill, and
     script.js listens for that to add .has-value above. */
  @keyframes loginAutofillDetect{ from{} to{} }
  .login-card input:-webkit-autofill{
    animation-name:loginAutofillDetect;
    animation-duration:.01s;
  }
  #loginPass{ padding-right:42px; }
  .pw-toggle{
    position:absolute;
    right:6px; top:50%;
    transform:translateY(-50%);
    width:32px; height:32px;
    border:none;
    background:transparent;
    color:rgba(90,195,151,.7);
    font-size:15px;
    cursor:pointer;
    border-radius:0;
    display:flex; align-items:center; justify-content:center;
    z-index:11;
  }
  .pw-toggle:hover{ background:rgba(90,195,151,.15); color:#fff; }
  .login-card .loginbtn{
    position:relative;
    width:100%;
    margin-top:4px;
    padding:13px;
    border:1px solid #5ac397;
    border-radius:0;
    background:rgba(90,195,151,.15);
    color:#5ac397;
    font-family:'Orbitron', sans-serif;
    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.13em;
    cursor:pointer;
    transition:all .2s ease;
    z-index:10;
  }
  .login-card .loginbtn:hover{ background:#5ac397; color:#0a0d0e; box-shadow:0 0 20px #5ac397; }
  .login-card .loginbtn:disabled{ opacity:.75; cursor:default; }
  .login-card .loginbtn:disabled::after{
    content:'';
    position:absolute;
    right:16px; top:50%;
    width:15px; height:15px;
    margin-top:-7.5px;
    border-radius:50%;
    border:2px solid rgba(90,195,151,.4);
    border-top-color:#5ac397;
    animation:pwspin .7s linear infinite;
  }
  @keyframes pwspin{ to{ transform:rotate(360deg); } }
  .login-card .login-error{
    display:none;
    align-items:flex-start;
    gap:8px;
    font-size:12px;
    font-family:'Share Tech Mono', monospace;
    line-height:1.4;
    color:#ff8a8a;
    background:rgba(255,42,42,.1);
    border:1px solid rgba(255,42,42,.4);
    border-radius:0;
    padding:8px 10px;
    margin:-2px 0 12px;
    position:relative; z-index:10;
  }
  .login-card .login-error.show{ display:flex; }
  .login-card .login-error::before{ content:'⚠'; font-size:13px; line-height:1.4; color:#ff2a2a; }
  .login-foot-note{
    text-align:center;
    font-size:11.5px;
    font-family:'Share Tech Mono', monospace;
    letter-spacing:.05em;
    color:rgba(90,195,151,.5);
    margin-top:18px;
    position:relative; z-index:10;
  }

  .sidebar-foot button.active{
    background:var(--sidebar-active-bg);
    color:#fff;
    box-shadow:inset 2px 0 0 var(--accent);
    border-color:var(--sidebar-active-bg);
  }

  /* ---------- Storage settings modal ---------- */
  .settings-overlay{
    position:fixed;
    inset:0;
    z-index:4000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:color-mix(in srgb, var(--ink) 45%, transparent);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    padding:24px;
    transition:opacity .18s ease;
  }
  .settings-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .settings-card{
    width:100%;
    max-width:420px;
    max-height:min(600px, 90vh);
    display:flex;
    flex-direction:column;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 10px 40px -10px rgba(0,0,0,.35);
    overflow:hidden;
  }
  .settings-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:18px 20px 14px;
    border-bottom:1px solid var(--line);
    flex-shrink:0;
  }
  .settings-card-head h2{
    margin:0 0 4px;
    font-family:var(--display);
    font-size:16px;
    font-weight:700;
    color:var(--ink);
  }
  .settings-card-head p{
    margin:0;
    font-size:12px;
    color:var(--muted);
    line-height:1.45;
  }
  .settings-close{
    background:transparent;
    border:none;
    color:var(--muted);
    font-size:16px;
    line-height:1;
    cursor:pointer;
    padding:4px;
    border-radius:6px;
    flex-shrink:0;
  }
  .settings-close:hover{ background:var(--line-soft); color:var(--ink); }
  .settings-card-body{
    overflow-y:auto;
    padding:14px 20px;
    flex:1 1 auto;
  }
  .gdrive-backup{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px 10px 12px;
    margin-bottom:10px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--line-soft);
  }
  .gdrive-backup-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .gdrive-backup-title{
    font-size:12.5px;
    font-weight:650;
    color:var(--ink);
  }
  .gdrive-backup-status{
    font-family:var(--mono);
    font-size:10px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:55%;
  }
  .gdrive-backup-row{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .gdrive-field{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .gdrive-field-label{
    font-size:10px;
    font-weight:650;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .gdrive-backup-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .gdrive-backup-actions .settings-btn{
    width:100%;
    padding:8px 10px;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .gdrive-select{
    width:100%;
    min-width:0;
    font-family:var(--sans);
    font-size:12px;
    padding:7px 8px;
    border-radius:6px;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--ink);
  }
  .gdrive-select:disabled{ opacity:.6; }
  .gdrive-manual{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-top:4px;
    padding-top:8px;
    border-top:1px solid var(--line);
  }
  .gdrive-note{
    font-size:10.5px;
    line-height:1.4;
    color:var(--muted);
  }
  .settings-select-all{
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 10px;
    margin-bottom:8px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--line-soft);
    cursor:pointer;
    font-size:12.5px;
    font-weight:650;
    color:var(--ink);
  }
  .storage-tool-list{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .storage-tool-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:13px;
    color:var(--ink);
  }
  .storage-tool-row:hover{ background:var(--line-soft); }
  .storage-tool-row input[type="checkbox"],
  .settings-select-all input[type="checkbox"]{
    width:15px; height:15px; flex-shrink:0; accent-color:var(--accent);
    cursor:pointer;
  }
  .storage-tool-row .glyph{ width:18px; text-align:center; flex-shrink:0; }
  .storage-tool-row .label{ flex:1 1 auto; min-width:0; }
  .storage-tool-row .keycount{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--muted);
    background:var(--line-soft);
    border:1px solid var(--line);
    border-radius:20px;
    padding:2px 8px;
    flex-shrink:0;
    white-space:nowrap;
  }
  .storage-tool-row-wrap{ border-radius:8px; }
  .storage-expand{
    flex-shrink:0;
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:10px;
    cursor:pointer;
    border-radius:4px;
    padding:0;
    transition:transform .12s ease;
  }
  .storage-expand:hover{ background:var(--line); color:var(--ink); }
  .storage-expand:disabled{ visibility:hidden; cursor:default; }
  .storage-expand.open{ transform:rotate(90deg); }
  .storage-key-list{
    display:none;
    flex-direction:column;
    gap:2px;
    margin:2px 0 6px 42px;
    padding-left:10px;
    border-left:1px solid var(--line);
  }
  .storage-key-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 8px;
    border-radius:6px;
  }
  .storage-key-row:hover{ background:var(--line-soft); }
  .storage-key-row .key-name{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-family:var(--mono);
    font-size:11px;
    color:var(--ink-soft);
  }
  .storage-key-row .key-size{
    font-family:var(--mono);
    font-size:10px;
    color:var(--muted);
    flex-shrink:0;
  }
  .storage-key-row .key-del{
    flex-shrink:0;
    width:18px; height:18px;
    display:flex; align-items:center; justify-content:center;
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:11px;
    cursor:pointer;
    border-radius:4px;
    padding:0;
  }
  .storage-key-row .key-del:hover{ background:#C4362A; color:#fff; }
  .storage-key-empty{
    font-size:11px;
    color:var(--muted);
    font-style:italic;
    padding:5px 8px;
  }
  .settings-card-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 20px 18px;
    border-top:1px solid var(--line);
    flex-shrink:0;
  }
  .settings-note{
    font-size:11px;
    color:var(--muted);
  }
  .settings-actions{ display:flex; gap:8px; }
  .settings-btn{
    font-family:var(--sans);
    font-size:12.5px;
    font-weight:650;
    border-radius:8px;
    padding:8px 14px;
    cursor:pointer;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--ink);
  }
  .settings-btn:hover{ background:var(--line-soft); }
  .settings-btn.danger{
    background:#C4362A;
    border-color:#C4362A;
    color:#fff;
  }
  .settings-btn.danger:hover{ background:#A82D22; }
  .settings-btn.danger:disabled{
    opacity:.5;
    cursor:default;
    background:#C4362A;
  }
  .settings-btn.danger.confirming{ background:#A82D22; }
  .settings-btn.primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }
  .settings-btn.primary:hover{ background:var(--accent-dark); }
  .settings-btn:disabled{ opacity:.45; cursor:default; }

  /* ---------- Confirm dialog ---------- */
  .confirm-overlay{
    position:fixed;
    inset:0;
    z-index:4200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:color-mix(in srgb, var(--ink) 55%, transparent);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .16s ease;
  }
  .confirm-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .confirm-card{
    width:100%;
    max-width:400px;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 20px 50px -12px rgba(0,0,0,.45);
    overflow:hidden;
    transform:translateY(8px) scale(.98);
    transition:transform .16s ease;
  }
  .confirm-overlay.show .confirm-card{ transform:none; }
  .confirm-card-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 18px 12px;
    border-bottom:1px solid var(--line);
    flex-shrink:0;
  }
  .confirm-card-head h2{
    margin:0;
    flex:1 1 auto;
    min-width:0;
    font-family:var(--display);
    font-size:15px;
    font-weight:700;
    color:var(--ink);
  }
  .confirm-icon{
    flex-shrink:0;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    font-size:14px;
    color:var(--accent);
    background:var(--accent-soft);
  }
  .confirm-overlay.is-danger .confirm-icon{
    color:#C4362A;
    background:rgba(196,54,42,.12);
  }
  .confirm-card-body{
    padding:14px 18px 16px;
    overflow-y:auto;
    flex:1 1 auto;
  }
  .confirm-message{
    margin:0;
    font-size:13px;
    line-height:1.5;
    color:var(--ink);
  }
  .confirm-detail{
    display:none;
    margin-top:10px;
    padding:9px 11px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--line-soft);
    font-size:11.5px;
    line-height:1.5;
    color:var(--muted);
  }
  .confirm-detail.show{ display:block; }
  .confirm-card-foot{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:12px 18px 16px;
    border-top:1px solid var(--line);
    flex-shrink:0;
  }
  .confirm-card-foot .settings-btn{ min-width:96px; text-align:center; }

  /* ---------- AdminLTE-inspired hub skin ---------- */
  :root{
    --ink:#1C2321;
    --ink-soft:#4B5450;
    --bg:#EEF0EE;
    --panel:#FFFFFF;
    --line:#DBE1DD;
    --line-soft:#EAEDEA;
    --accent:#1F6F5C;
    --accent-dark:#17564A;
    --accent-soft:#DEEEEA;
    --muted:#767F7B;
    --sidebar-bg:#161B19;
    --sidebar-ink:#C9D0CC;
    --sidebar-ink-dim:#7C8783;
    --sidebar-line:#2A312E;
    --sidebar-active-bg:#20302B;
    --shadow:0 1px 2px rgba(20,28,25,.04),0 6px 16px -8px rgba(20,28,25,.10);
  }
  html[data-theme="dark"]{
    --ink:#E8ECEA;
    --ink-soft:#B7C0BB;
    --bg:#262d2b;
    --panel:#1C2223;
    --line:#333B39;
    --line-soft:#262D2B;
    --muted:#818B86;
    --sidebar-bg:#0F1312;
    --sidebar-active-bg:#1B2D27;
    --accent-soft:#1E3A33;
  }
  body{background:var(--bg);color:var(--ink);}
  aside.sidebar{width:250px;background:var(--sidebar-bg);padding:0 10px 24px;box-shadow:2px 0 8px rgba(0,0,0,.12);}
  .brand{height:57px;padding:0 10px;margin:0;border-bottom:1px solid var(--sidebar-line);}
  .brand .mark{width:32px;height:32px;border-radius:4px;}
  .brand .name{font-family:'Orbitron', sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5ac397;text-shadow:0 0 10px rgba(90,195,151,.65);}
  .brand .name small{font-family:var(--sans);font-size:10px;}
  .navlabel{padding:18px 10px 7px;}
  .sidebar-foot{padding-top:12px;border-top:1px solid var(--sidebar-line);}
  .sidebar-foot button{border-color:transparent;border-radius:8px;color:var(--sidebar-ink);}
  .sidebar-foot button:hover{background:rgba(255,255,255,.08);color:#fff;}
  .maincol{background:var(--bg);}
  header.topbar{height:57px;padding:0 22px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04);}
  .crumb{font-family:var(--sans);font-size:14px;}
  .crumb .current{font-weight:600;}
  .statuspill{border-radius:20px;background:var(--bg);padding:6px 10px;}
  .focusbtn,.restorebtn{border-radius:8px;box-shadow:none;}
  .content-area{background:var(--bg);}
  .empty-state{padding:34px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);}
  iframe.tool-frame{background:var(--bg);}
  .login-overlay{background:var(--bg);}
  .login-card{border-radius:12px;border-top:3px solid var(--accent);box-shadow:0 .5rem 1rem rgba(0,0,0,.12);}
  .restorebtn{background:var(--sidebar-bg);color:#fff;border-color:transparent;}
  .fav-fan-btn{background:var(--sidebar-bg);border-color:var(--sidebar-line);}
  @media (max-width:760px){
    aside.sidebar{width:214px;}
    header.topbar{padding:0 14px;}
    .statuspill{display:none;}
    .topbar-clock{display:none;}
  }

  /* ---------- Hub chrome restyled to match login page / tool-button theme ---------- */
  .sidebar-foot button{
    font-family:'Share Tech Mono', monospace;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    background:rgba(90,195,151,.03);
    border:1px solid rgba(90,195,151,.18);
    color:#8fb8ab;
    border-radius:4px;
    transition:all .15s ease;
  }
  .sidebar-foot button .glyph{ color:#5ac397; width:16px; text-align:center; flex-shrink:0; }
  .sidebar-foot button:hover{
    background:rgba(90,195,151,.1);
    border-color:rgba(90,195,151,.55);
    color:#fff;
    box-shadow:0 0 12px rgba(90,195,151,.18);
  }
  .sidebar-foot button:hover .glyph{ color:#8ff0c8; }

  .crumb{
    font-family:'Share Tech Mono', monospace;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(90,195,151,.55);
  }
  .crumb .current{
    color:#5ac397;
    font-weight:700;
    text-shadow:0 0 8px rgba(90,195,151,.5);
  }

  .statuspill{
    font-family:'Share Tech Mono', monospace;
    font-size:16px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#5ac397;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(90,195,151,.3);
    border-radius:4px;
    height:32px;
    padding:0 14px;
    gap:10px;
  }
  .statuspill .dot{ background:#5ac397; box-shadow:0 0 6px #5ac397; }
  .statuspill .dot.idle{ background:#5a6560; box-shadow:none; }

  .topbar-clock{ border-radius:4px; border:1px solid rgba(90,195,151,.3); }

  .focusbtn{
    background:rgba(0,0,0,.4);
    border:1px solid rgba(90,195,151,.3);
    color:#5ac397;
    border-radius:4px;
    transition:all .15s ease;
  }
  .focusbtn:hover{
    background:rgba(90,195,151,.15);
    border-color:#5ac397;
    color:#fff;
    box-shadow:0 0 12px rgba(90,195,151,.35);
  }
  .focusbtn:disabled{ opacity:.35; color:rgba(90,195,151,.3); }
  .focusbtn:disabled:hover{ background:rgba(0,0,0,.4); box-shadow:none; color:rgba(90,195,151,.3); }

  .empty-state{
    background:linear-gradient(135deg, rgba(16,21,22,.96) 0%, rgba(10,12,13,.94) 100%);
    border:1px solid rgba(90,195,151,.4);
    box-shadow:inset 0 0 30px rgba(90,195,151,.05), 0 0 40px rgba(90,195,151,.1);
    clip-path:polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    padding:36px 42px;
  }
  .empty-state .glyph{ color:#5ac397; text-shadow:0 0 10px rgba(90,195,151,.5); }
  .empty-state h2{
    font-family:'Orbitron', sans-serif;
    font-weight:700;
    font-size:15px;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-shadow:0 0 10px rgba(90,195,151,.6);
  }
  .empty-state p{
    font-family:'Share Tech Mono', monospace;
    font-size:12px;
    color:rgba(90,195,151,.65);
  }

  /* ---------- Storage settings modal restyled to match hub theme ---------- */
  .settings-overlay{ background:rgba(5,7,7,.7); }
  .settings-card{
    background:linear-gradient(135deg, rgba(16,21,22,.98) 0%, rgba(10,12,13,.97) 100%);
    border:1px solid rgba(90,195,151,.4);
    border-radius:0;
    clip-path:polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    box-shadow:inset 0 0 30px rgba(90,195,151,.05), 0 25px 50px rgba(0,0,0,.85), 0 0 40px rgba(90,195,151,.12);
  }
  .settings-card-head{ border-bottom:1px solid rgba(90,195,151,.25); }
  .settings-card-head h2{
    font-family:'Orbitron', sans-serif;
    font-weight:700;
    font-size:14px;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.08em;
    text-shadow:0 0 8px rgba(90,195,151,.6);
  }
  .settings-card-head p{
    font-family:'Share Tech Mono', monospace;
    font-size:11px;
    color:rgba(90,195,151,.6);
  }
  .settings-close{ color:rgba(90,195,151,.7); border-radius:4px; }
  .settings-close:hover{ background:rgba(90,195,151,.15); color:#fff; }

  .gdrive-backup{
    background:rgba(90,195,151,.03);
    border:1px solid rgba(90,195,151,.18);
    border-radius:4px;
  }
  .gdrive-backup-title{
    font-family:'Orbitron', sans-serif;
    font-size:10.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#5ac397;
  }
  .gdrive-backup-status{ font-family:'Share Tech Mono', monospace; color:rgba(90,195,151,.6); }
  .gdrive-select{
    font-family:'Share Tech Mono', monospace;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(90,195,151,.3);
    border-radius:3px;
    color:#c9d0cc;
  }
  .gdrive-note{ font-family:'Share Tech Mono', monospace; color:rgba(90,195,151,.45); }
  .gdrive-field-label{
    font-family:'Share Tech Mono', monospace;
    font-size:9.5px;
    letter-spacing:.08em;
    color:rgba(90,195,151,.55);
  }

  .settings-select-all{
    font-family:'Share Tech Mono', monospace;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
    background:rgba(90,195,151,.03);
    border:1px solid rgba(90,195,151,.18);
    border-radius:4px;
    color:#8fb8ab;
  }
  .settings-select-all:hover{ border-color:rgba(90,195,151,.5); }
  .storage-tool-row input[type="checkbox"],
  .settings-select-all input[type="checkbox"]{ accent-color:#5ac397; }

  .storage-tool-row{
    font-family:'Share Tech Mono', monospace;
    font-size:12px;
    color:#c9d0cc;
    border:1px solid transparent;
    border-radius:4px;
  }
  .storage-tool-row:hover{ background:rgba(90,195,151,.08); border-color:rgba(90,195,151,.3); }
  .storage-tool-row .glyph{ color:#5ac397; }
  .storage-tool-row .keycount{
    font-family:'Share Tech Mono', monospace;
    color:rgba(90,195,151,.75);
    background:rgba(0,0,0,.4);
    border:1px solid rgba(90,195,151,.3);
    border-radius:3px;
  }
  .storage-expand{ color:rgba(90,195,151,.6); border-radius:3px; }
  .storage-expand:hover{ background:rgba(90,195,151,.15); color:#fff; }
  .storage-key-list{ border-left:1px solid rgba(90,195,151,.25); }
  .storage-key-row{ border-radius:3px; }
  .storage-key-row:hover{ background:rgba(90,195,151,.08); }
  .storage-key-row .key-name{ font-family:'Share Tech Mono', monospace; color:#8fb8ab; }
  .storage-key-row .key-size{ font-family:'Share Tech Mono', monospace; color:rgba(90,195,151,.5); }
  .storage-key-row .key-del{ color:rgba(90,195,151,.5); border-radius:3px; }
  .storage-key-row .key-del:hover{ background:#ff2a2a; color:#0a0d0e; }
  .storage-key-empty{ font-family:'Share Tech Mono', monospace; color:rgba(90,195,151,.45); font-style:normal; }

  .settings-card-foot{ border-top:1px solid rgba(90,195,151,.25); }
  .settings-note{ font-family:'Share Tech Mono', monospace; color:rgba(90,195,151,.55); }
  .settings-btn{
    font-family:'Orbitron', sans-serif;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    border-radius:0;
    border:1px solid rgba(90,195,151,.4);
    background:rgba(90,195,151,.08);
    color:#5ac397;
  }
  .settings-btn:hover{ background:rgba(90,195,151,.18); box-shadow:0 0 12px rgba(90,195,151,.3); }
  .settings-btn.danger{
    background:rgba(255,42,42,.12);
    border-color:rgba(255,42,42,.5);
    color:#ff8a8a;
  }
  .settings-btn.danger:hover{ background:#ff2a2a; color:#0a0d0e; box-shadow:0 0 14px #ff2a2a; }
  .settings-btn.danger:disabled{ opacity:.4; background:rgba(255,42,42,.12); box-shadow:none; color:#ff8a8a; }
  .settings-btn.danger.confirming{ background:#ff2a2a; color:#0a0d0e; }
  .settings-btn.primary{
    background:rgba(90,195,151,.2);
    border-color:rgba(90,195,151,.7);
    color:#9ff0cd;
  }
  .settings-btn.primary:hover{ background:#5ac397; color:#0a0d0e; box-shadow:0 0 14px rgba(90,195,151,.5); }

  /* ---------- Confirm dialog restyled to match hub theme ---------- */
  .confirm-overlay{ background:rgba(5,7,7,.78); }
  .confirm-card{
    background:linear-gradient(135deg, rgba(16,21,22,.98) 0%, rgba(10,12,13,.97) 100%);
    border:1px solid rgba(90,195,151,.4);
    border-radius:0;
    clip-path:polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    box-shadow:inset 0 0 30px rgba(90,195,151,.05), 0 25px 50px rgba(0,0,0,.85), 0 0 40px rgba(90,195,151,.12);
  }
  .confirm-card-head{ border-bottom:1px solid rgba(90,195,151,.25); }
  .confirm-card-head h2{
    font-family:'Orbitron', sans-serif;
    font-weight:700;
    font-size:13px;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.08em;
    text-shadow:0 0 8px rgba(90,195,151,.6);
  }
  .confirm-icon{
    border-radius:3px;
    color:#5ac397;
    background:rgba(90,195,151,.12);
    border:1px solid rgba(90,195,151,.35);
  }
  .confirm-overlay.is-danger .confirm-icon{
    color:#ff8a8a;
    background:rgba(255,42,42,.12);
    border-color:rgba(255,42,42,.45);
  }
  .confirm-message{
    font-family:'Share Tech Mono', monospace;
    font-size:12px;
    color:#c9d0cc;
  }
  .confirm-detail{
    font-family:'Share Tech Mono', monospace;
    border:1px solid rgba(90,195,151,.22);
    background:rgba(90,195,151,.05);
    border-radius:3px;
    color:rgba(90,195,151,.7);
  }
  .confirm-card-foot{ border-top:1px solid rgba(90,195,151,.25); }

  /* ---------- Scrollbar ---------- */
  body {
    --sb-track-color: #232E33;
    --sb-thumb-color: #6BAF8D;
    --sb-size: 7px;
  }
  *::-webkit-scrollbar {
    width: var(--sb-size);
    height: var(--sb-size);
  }
  *::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
  }
  *::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
  }
  @supports not selector(::-webkit-scrollbar) {
    * {
      scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
  }
  /* ---------- Gallery (restyled to match hub/sheet terminal theme) ---------- */
  .gallery-badge{
    position:absolute;
    top:-4px; right:-4px;
    min-width:16px; height:16px;
    padding:0 3px;
    border-radius:8px;
    background:#5ac397;
    color:#0a0d0e;
    font-family:'Share Tech Mono', monospace;
    font-size:9px;
    font-weight:700;
    line-height:16px;
    text-align:center;
    box-shadow:0 0 8px rgba(90,195,151,.5);
  }
  #galleryToggle{ position:relative; }

  .gallery-card{
    max-width:720px;
    max-height:min(680px, 90vh);
  }
  .gallery-toolbar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:12px;
  }
  .gallery-toolbar .settings-btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
  .gallery-paste-hint{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:'Share Tech Mono', monospace;
    font-size:11px;
    color:rgba(90,195,151,.6);
    flex:1 1 auto;
    min-width:160px;
  }
  .gallery-count{
    font-family:'Share Tech Mono', monospace;
    font-size:11px;
    color:rgba(90,195,151,.6);
    white-space:nowrap;
  }
  .gallery-dropzone{
    position:relative;
    border:1px dashed rgba(90,195,151,.3);
    border-radius:4px;
    padding:12px;
    min-height:160px;
    transition:border-color .15s ease, background .15s ease;
  }
  .gallery-dropzone.drag-over{
    border-color:#5ac397;
    background:rgba(90,195,151,.08);
  }
  .gallery-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:34px 10px;
    color:rgba(90,195,151,.55);
    text-align:center;
  }
  .gallery-empty-glyph{ font-size:28px; color:#5ac397; text-shadow:0 0 10px rgba(90,195,151,.5); }
  .gallery-empty p{ margin:0; font-family:'Share Tech Mono', monospace; font-size:12px; line-height:1.55; }
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
    gap:10px;
  }
  .gallery-item{
    position:relative;
    aspect-ratio:1;
    border-radius:4px;
    overflow:hidden;
    border:1px solid rgba(90,195,151,.25);
    background:rgba(0,0,0,.3);
    cursor:grab;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .gallery-item:hover{ border-color:rgba(90,195,151,.55); box-shadow:0 0 12px rgba(90,195,151,.18); }
  .gallery-item img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .gallery-item-name{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:4px 6px;
    background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
    color:#c9d0cc;
    font-family:'Share Tech Mono', monospace;
    font-size:10px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:0;
    transition:opacity .15s ease;
    pointer-events:none;
  }
  .gallery-item-del{
    position:absolute;
    top:5px; right:5px;
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    border-radius:3px;
    border:1px solid rgba(90,195,151,.35);
    background:rgba(0,0,0,.6);
    color:#5ac397;
    font-size:11px;
    cursor:pointer;
    opacity:0;
    transition:opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .gallery-item-del:hover{ background:#ff2a2a; color:#0a0d0e; border-color:#ff2a2a; box-shadow:0 0 10px #ff2a2a; }
  .gallery-item:hover .gallery-item-name,
  .gallery-item:hover .gallery-item-del{ opacity:1; }

  .gallery-item.dragging{ opacity:.35; cursor:grabbing; }
  .gallery-item.drag-over{
    outline:2px solid #5ac397;
    outline-offset:-2px;
    box-shadow:0 0 14px rgba(90,195,151,.4);
  }

  .gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:4600;
    display:flex;
    flex-direction:column;
    background:rgba(5,7,7,.9);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  .gallery-lightbox.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .gallery-lightbox-stage{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 70px 24px;
  }
  .gallery-lightbox-img{
    max-width:100%;
    max-height:100%;
    border-radius:4px;
    border:1px solid rgba(90,195,151,.3);
    box-shadow:0 20px 60px -10px rgba(0,0,0,.7), 0 0 40px rgba(90,195,151,.1);
    object-fit:contain;
  }
  .gallery-lightbox-close{
    position:absolute;
    top:18px; right:22px;
    width:36px; height:36px;
    border-radius:4px;
    border:1px solid rgba(90,195,151,.4);
    background:rgba(0,0,0,.5);
    color:#5ac397;
    font-size:15px;
    cursor:pointer;
    transition:all .15s ease;
    z-index:2;
  }
  .gallery-lightbox-close:hover{ background:rgba(90,195,151,.15); border-color:#5ac397; color:#fff; box-shadow:0 0 12px rgba(90,195,151,.35); }
  .gallery-lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px; height:44px;
    border-radius:4px;
    border:1px solid rgba(90,195,151,.35);
    background:rgba(0,0,0,.5);
    color:#5ac397;
    font-size:18px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s ease;
    flex-shrink:0;
  }
  .gallery-lightbox-nav:hover{ background:rgba(90,195,151,.15); border-color:#5ac397; color:#fff; box-shadow:0 0 12px rgba(90,195,151,.35); }
  .gallery-lightbox-nav.prev{ left:22px; }
  .gallery-lightbox-nav.next{ right:22px; }
  .gallery-lightbox-bottom{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg, rgba(16,21,22,.97) 0%, rgba(10,12,13,.98) 100%);
    border-top:1px solid rgba(90,195,151,.25);
  }
  .gallery-lightbox-filmstrip{
    display:flex;
    gap:8px;
    padding:12px 22px 2px;
    overflow-x:auto;
  }
  .gallery-lightbox-filmstrip-item{
    flex:0 0 auto;
    width:56px; height:56px;
    border-radius:4px;
    overflow:hidden;
    border:1px solid rgba(90,195,151,.25);
    cursor:pointer;
    opacity:.5;
    background:rgba(0,0,0,.4);
    transition:opacity .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .gallery-lightbox-filmstrip-item img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .gallery-lightbox-filmstrip-item:hover{ opacity:.85; border-color:rgba(90,195,151,.5); }
  .gallery-lightbox-filmstrip-item.active{
    opacity:1;
    border-color:#5ac397;
    box-shadow:0 0 10px rgba(90,195,151,.4);
  }
  .gallery-lightbox-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding:12px 22px 16px;
  }
  .gallery-lightbox-name{
    font-family:'Share Tech Mono', monospace;
    font-size:12px;
    color:rgba(90,195,151,.75);
    letter-spacing:.02em;
  }
  .gallery-lightbox-actions{ display:flex; gap:8px; }
  .gallery-lightbox-actions .settings-btn{ display:inline-flex; align-items:center; gap:6px; }

  @media (max-width:520px){
    .gallery-lightbox-nav.prev{ left:6px; }
    .gallery-lightbox-nav.next{ right:6px; }
    .gallery-lightbox-bar{ flex-direction:column; align-items:stretch; }
    .gallery-lightbox-actions{ justify-content:center; }
    .gallery-lightbox-filmstrip-item{ width:44px; height:44px; }
  }/* ============================================================
     Mobile mode (<=760px)
     - Sidebar becomes a collapsible dropdown bar at the top
     - Split view is disabled (toggle hidden)
     - Gallery is disabled (toggle hidden, overlay never opens)
     ============================================================ */
  /* Empty-state hint: desktop wording by default */
  .empty-state .empty-hint-mobile{ display:none; }

  @media (max-width:760px){
    /* Stack the hub vertically: top bar above, main column below */
    body{ flex-direction:column; }

    /* --- Sidebar -> top dropdown bar --- */
    aside.sidebar{
      width:100%;
      flex-shrink:0;
      max-height:100vh;
      padding:0;
      box-shadow:0 2px 10px rgba(0,0,0,.22);
      overflow-y:auto;
      z-index:30;
    }
    /* Neutralise the desktop icon-rail collapse while on mobile: the bar is
       always full width, and the .mobile-sidebar-open class alone controls
       whether the tool list is expanded. */
    aside.sidebar.sidebar-collapsed{ width:100%; padding:0; }
    aside.sidebar.sidebar-collapsed .brand{ justify-content:flex-start; }
    aside.sidebar.sidebar-collapsed .brand .name{ display:block; }
    aside.sidebar.sidebar-collapsed .navlabel{ justify-content:space-between; }
    aside.sidebar.sidebar-collapsed .navlabel-text{ display:inline; }
    aside.sidebar.sidebar-collapsed nav.toolnav button{
      justify-content:flex-start;
    }
    aside.sidebar.sidebar-collapsed nav.toolnav button .label,
    aside.sidebar.sidebar-collapsed nav.toolnav button .kbd,
    aside.sidebar.sidebar-collapsed .sidebar-foot button .label{
      display:inline;
    }
    aside.sidebar.sidebar-collapsed .sidebar-foot button{ justify-content:flex-start; }

    /* Brand row acts as the dropdown header */
    aside.sidebar .brand{
      height:auto;
      min-height:52px;
      padding:10px 14px;
      margin:0;
      border-bottom:1px solid var(--sidebar-line);
      position:sticky;
      top:0;
      background:var(--sidebar-bg);
      z-index:2;
    }

    /* The existing chevron becomes the open/close control for the dropdown */
    aside.sidebar .navlabel{
      padding:10px 14px;
      margin:0;
      border-bottom:1px solid var(--sidebar-line);
      position:sticky;
      top:52px;
      background:var(--sidebar-bg);
      z-index:2;
    }
    aside.sidebar .sidebar-collapse-btn{
      width:26px;
      height:26px;
      font-size:12px;
    }
    /* The mobile toggle uses its own up/down chevrons, so cancel the
       desktop 180° flip applied by .sidebar-collapsed. */
    aside.sidebar.sidebar-collapsed .sidebar-collapse-btn i{ transform:none; }

    /* Collapsed (default on mobile): only the header rows are visible.
       The hub adds .mobile-sidebar-open via JS to expand the tool list. */
    aside.sidebar:not(.mobile-sidebar-open) nav.toolnav,
    aside.sidebar:not(.mobile-sidebar-open) .sidebar-foot{
      display:none;
    }

    /* Dropdown list: full-width, wrapping grid of tools */
    aside.sidebar nav.toolnav{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:6px;
      padding:10px 12px 6px;
      max-height:none;
      overflow:visible;
    }
    aside.sidebar nav.toolnav button{
      width:100%;
      justify-content:flex-start;
    }
    /* The drag handle is meaningless on touch; hide it */
    aside.sidebar nav.toolnav button .draghandle{ display:none; }

    aside.sidebar .sidebar-foot{
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:10px 12px 16px;
      margin-top:0;
      border-top:1px solid var(--sidebar-line);
    }
    aside.sidebar .sidebar-foot button{
      width:100%;
      justify-content:flex-start;
    }

    /* --- Disable split view on mobile --- */
    #splitToggle{ display:none !important; }
    .split-container,
    .split-resizer{ display:none !important; }
    .content-area.split-active .empty-state{ display:flex !important; }

    /* --- Disable gallery + lightbox on mobile --- */
    #galleryToggle{ display:none !important; }
    .gallery-overlay,
    .gallery-lightbox{ display:none !important; }

    /* Top bar: let the remaining controls wrap instead of overflowing */
    header.topbar{
      flex-wrap:wrap;
      gap:8px;
      height:auto;
      min-height:48px;
      padding:8px 12px;
    }
    .topbar-right{ flex-wrap:wrap; gap:6px; }
    .crumb{ flex:1 1 100%; }

    /* Swap the empty-state hint wording for mobile */
    .empty-state .empty-hint-desktop{ display:none; }
    .empty-state .empty-hint-mobile{ display:inline; }
  }

  /* On very small phones keep the tool grid single-column */
  @media (max-width:430px){
    aside.sidebar nav.toolnav{ grid-template-columns:1fr; }
  }
  /* ---------- Universal search (Ctrl+K command palette) ---------- */
.hubsearch-overlay{
  position:fixed; inset:0; z-index:4200;
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 20px 40px;
  background:rgba(5,7,7,.72);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, visibility .16s ease;
}
.hubsearch-overlay.show{ opacity:1; visibility:visible; pointer-events:auto; }
.hubsearch-card{
  width:100%; max-width:620px; max-height:70vh;
  display:flex; flex-direction:column;
  background:linear-gradient(135deg, rgba(16,21,22,.98) 0%, rgba(10,12,13,.97) 100%);
  border:1px solid rgba(90,195,151,.4); border-radius:12px;
  box-shadow:inset 0 0 30px rgba(90,195,151,.05), 0 25px 50px rgba(0,0,0,.85), 0 0 40px rgba(90,195,151,.12);
  overflow:hidden;
}
.hubsearch-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid rgba(90,195,151,.25);
}
.hubsearch-head-icon{ color:#5ac397; font-size:15px; flex-shrink:0; }
.hubsearch-input{
  flex:1 1 auto; min-width:0; background:transparent; border:none; outline:none;
  color:#dfe8e4; font-family:'Inter', sans-serif; font-size:15px;
}
.hubsearch-input::placeholder{ color:rgba(90,195,151,.45); }
.hubsearch-close{
  flex-shrink:0; background:rgba(0,0,0,.4); border:1px solid rgba(90,195,151,.3);
  color:rgba(90,195,151,.7); font-family:'Share Tech Mono', monospace; font-size:10px;
  letter-spacing:.08em; padding:3px 8px; border-radius:5px; cursor:pointer;
}
.hubsearch-close:hover{ color:#5ac397; border-color:#5ac397; }

.hubsearch-list{ overflow-y:auto; padding:6px 0; flex:1 1 auto; }
.hubsearch-group{
  padding:10px 14px 5px;
  font-family:'Share Tech Mono', monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(90,195,151,.5);
}
.hubsearch-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; cursor:pointer; border-left:2px solid transparent;
}
.hubsearch-row-icon{ color:rgba(90,195,151,.6); font-size:13px; width:16px; text-align:center; flex-shrink:0; }
.hubsearch-row-main{ display:flex; align-items:baseline; gap:8px; min-width:0; flex:1 1 auto; }
.hubsearch-row-label{ color:#dfe8e4; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hubsearch-row-label mark{ background:rgba(90,195,151,.22); color:#8fe3c0; border-radius:2px; padding:0 1px; }
.hubsearch-row-hint{ margin-left:auto; flex-shrink:0; font-family:'Share Tech Mono', monospace; font-size:10.5px; color:rgba(90,195,151,.5); }
.hubsearch-row.is-active{ background:rgba(90,195,151,.12); border-left-color:#5ac397; }
.hubsearch-row.is-active .hubsearch-row-icon{ color:#5ac397; }
.hubsearch-empty{ padding:26px 16px; text-align:center; font-family:'Share Tech Mono', monospace; font-size:12px; color:rgba(90,195,151,.5); }
.hubsearch-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 14px; border-top:1px solid rgba(90,195,151,.25);
  font-family:'Share Tech Mono', monospace; font-size:10.5px; color:rgba(90,195,151,.5);
}

/* Header entry point */
.hubsearch-pill{
  display:flex; align-items:center; gap:7px;
  height:32px; padding:0 10px; border-radius:8px;
  background:rgba(0,0,0,.4); border:1px solid rgba(90,195,151,.3);
  color:#8fb8ab; font-family:'Inter', sans-serif; font-size:12.5px;
  cursor:pointer; transition:all .15s ease;
}
.hubsearch-pill:hover{ background:rgba(90,195,151,.15); border-color:#5ac397; color:#dfe8e4; }
.hubsearch-pill-kbd{
  font-family:'Share Tech Mono', monospace; font-size:10px; letter-spacing:.06em;
  color:rgba(90,195,151,.55); border:1px solid rgba(90,195,151,.25);
  border-radius:4px; padding:1px 5px;
}

/* Never show over the login screen. */
body.auth-locked .hubsearch-overlay{ display:none; }

@media (max-width:760px){
  .hubsearch-pill-label, .hubsearch-pill-kbd{ display:none; }
  .hubsearch-pill{ width:32px; padding:0; justify-content:center; }
  .hubsearch-overlay{ padding:8vh 12px 24px; }
  .hubsearch-card{ max-height:78vh; }
  .hubsearch-foot-hint{ display:none; }
}