/* ============================================================
   ATLAS UI KIT  ·  v2.0  (current, complete)
   Dark gold-accent design system — every component is here (login,
   tables, modals, context menus, toasts, search & filter bars,
   upload cards, pagination, chips, badges, the mobile gate, and the
   How-To doc styles).

   USE IT:
     <link rel="stylesheet" href="styles.css">
   or paste the whole thing inside a <style> tag for a single-file app.
   Class names are shared across the apps in this family, so markup
   copied between them works unchanged.

   RECOLOUR EVERYTHING from the :root token block below. The --*-rgb
   triplets are REQUIRED — they power every rgba() tint. If you change
   --accent, also change --accent-dim and --accent-rgb to match.

   ── THE ONE RULE THAT WILL BITE YOU ─────────────────────────
   There is deliberately NO global `svg{}` rule. Every icon is sized
   by its CONTEXT (.btn svg, .tbtn svg, table.list td.nm svg, and so
   on). An inline <svg> dropped into a container with no matching rule
   collapses to zero width and VANISHES. If you invent a new container
   that holds an icon, add a sizing rule for it.
   ────────────────────────────────────────────────────────────
   Sections below, in order:
     1  Tokens
     2  Base + mobile gate
     3  Login
     4  Buttons & inputs
     5  App shell (topbar / toolbar / sidebar / panes)
     6  Tables (.tablewrap, table.list, key/value)
     7  Search & filter bars
     8  Chips, badges, status pills
     9  Cards, meters, empty states
     10 Grid / icon view
     11 Modals, context menus, toasts, confirm dialogs
     12 Upload manager (progress cards) + pagination
     13 How-To / docs page
   ============================================================ */

  :root{
    --bg:#0d0f14; --panel:#141821; --panel2:#1b2030; --panel3:#222838; --line:#2a3142; --input:#0c0f17;
    --accent:#c8a96e; --accent-dim:#9c8052; --text:#e8eaf0; --muted:#8b93a7;
    --ok:#3ddc97; --warn:#e6b455; --danger:#e0594b; --sel:#2f4bd0;
    --accent-rgb:200,169,110; --ok-rgb:61,220,151; --danger-rgb:224,89,75; --warn-rgb:230,180,85;
    --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
  button{font-family:var(--sans);cursor:pointer;border:none;border-radius:8px;font-weight:700;color:var(--text)}
  input{font-family:var(--sans)}
  .hidden{display:none!important}
  /* Mobile gate — desktop-recommended message */
  #mobileGate{display:none}
  @media (max-width:820px){
    #mobileGate{display:flex;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;
      padding:26px;background:radial-gradient(1200px 600px at 50% -10%,rgba(var(--accent-rgb),.10),transparent 60%),var(--bg)}
    /* hide the actual app on small screens */
    #splash,#login,#app{display:none!important}
    .mg-card{max-width:400px;width:100%;text-align:center;background:var(--panel);border:1px solid var(--line);
      border-radius:18px;padding:34px 26px 30px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
    .mg-card .brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;letter-spacing:-.3px;margin-bottom:22px}
    .mg-card .brand .mk{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
      background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:#0d0f14;font-weight:900;font-size:24px}
    .mg-card .brand span{color:var(--accent)}
    .mg-card .brand small{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);font-weight:600;text-transform:uppercase;margin-top:2px}
    .mg-ic{width:66px;height:66px;margin:4px auto 16px;border-radius:16px;display:grid;place-items:center;
      background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.22);color:var(--accent)}
    .mg-ic svg{width:34px;height:34px}
    .mg-card h2{margin:0 0 10px;font-size:20px;font-weight:800;color:var(--text)}
    .mg-card p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--muted)}
    .mg-card .mg-sub{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:#c7cdda}
    .mg-card .mg-sub b{color:var(--accent)}
  }
  body.busy, body.busy *{cursor:progress !important}
  .muted{color:var(--muted)}
  .yellow{color:var(--accent)}
  .gray{color:var(--muted)}

  /* ---------- login (Dispatchr-exact) ---------- */
  .login-stage{min-height:100vh;display:grid;place-items:center;padding:30px;background:radial-gradient(900px 500px at 50% -10%,rgba(var(--accent-rgb),.08),transparent 60%),var(--bg)}
  .login-card{width:100%;max-width:440px}
  .login-card .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.3px;justify-content:center;font-size:24px;margin-bottom:6px}
  .login-card .brand .mk{width:38px;height:38px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:#0d0f14;font-weight:900;font-size:24px}
  .login-card .brand span{color:var(--accent)}
  .login-card .brand small{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);font-weight:600;text-transform:uppercase;margin-top:1px}
  .login-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:26px}
  .login-ver{text-align:center;color:var(--muted);font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-top:18px}
  .panelcard{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:22px;display:flex;flex-direction:column;gap:15px}
  .fld{display:block}
  .fld .lbl{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:600}
  .login-card input{width:100%;background:#0c0f17;border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:var(--sans);font-size:13px;padding:10px 11px}
  .login-card input:focus{outline:none;border-color:var(--accent)}
  .login-card .btn{border-radius:8px;padding:10px 16px;width:auto;font-size:13px;letter-spacing:.2px}
  .setmsg{font-size:12px;font-weight:600;border-radius:8px;padding:9px 12px}
  .setmsg:empty{display:none}
  .setmsg.ok{background:rgba(var(--ok-rgb),.1);color:var(--ok);border:1px solid rgba(var(--ok-rgb),.3)}
  .setmsg.err{background:rgba(var(--danger-rgb),.1);color:#ef8478;border:1px solid rgba(var(--danger-rgb),.3)}
  /* app-wide inputs/buttons (unchanged) */
  input.txt{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:9px;color:var(--text);padding:11px 12px;font-size:14px}
  input.txt:focus{outline:none;border-color:var(--accent-dim)}
  .pwwrap{position:relative;display:block}
  .pwwrap input{padding-right:44px}
  .pweye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;color:#9ca3af;transition:color .15s}
  .pweye:hover{color:#c9a961}
  .pweye svg{width:20px;height:20px}
  .btn{background:var(--accent);color:#0d0f14;padding:10px 16px;border-radius:9px;width:100%;font-size:13px;letter-spacing:.2px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .btn svg{width:16px;height:16px;flex:none}
  .btn:hover{filter:brightness(1.07)}
  .btn:disabled{opacity:.5;cursor:not-allowed}
  .btn.small{width:auto;padding:8px 14px;font-size:13px}
  .btn.ghost{background:var(--panel3);color:var(--text)}
  .btn.danger{background:var(--danger);color:#fff}
  .err{color:var(--danger);font-size:13px;margin-top:12px;min-height:18px}

  /* ---------- app shell / topbar (Dispatchr-exact) ---------- */
  #app{display:none;height:100vh;flex-direction:column}
  .topbar{height:58px;display:flex;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid var(--line);background:var(--panel);flex:0 0 58px}
  .topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.3px;font-size:18px}
  .topbar .brand .mk{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:#0d0f14;font-weight:900;font-size:18px}
  .topbar .brand span{color:var(--accent)}
  .topbar .brand small{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);font-weight:600;text-transform:uppercase;margin-top:1px}
  .spacer{flex:1}
  .whoami{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
  .whoami b{color:var(--text);font-weight:700}
  .role-badge{font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:700;border-radius:999px;padding:4px 10px;border:1px solid var(--line)}
  .role-admin{color:var(--accent);border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.08)}
  .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text);padding:9px 14px;font-size:12px;font-weight:600;border-radius:8px}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
  .btn-ghost.del-btn:hover{border-color:rgba(var(--danger-rgb),.5);color:#ef8478}
  .btn-sm{padding:6px 11px;font-size:12px}
  .pill{display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--accent-dim);color:var(--accent);padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle}

  /* toolbar */
  .toolbar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
  .tbtn{display:flex;align-items:center;gap:7px;background:var(--panel3);border:1px solid var(--line);padding:7px 12px;border-radius:8px;font-size:13px}
  .tbtn:hover{border-color:var(--accent-dim)}
  .tbtn svg{width:16px;height:16px}
  .viewseg{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel3)}
  .viewseg .vseg{background:transparent;border:none;padding:7px 13px;color:var(--muted);display:inline-flex;align-items:center;cursor:pointer}
  .viewseg .vseg+.vseg{border-left:1px solid var(--line)}
  .viewseg .vseg svg{width:16px;height:16px}
  .viewseg .vseg.on{background:rgba(var(--accent-rgb),.16);color:var(--accent)}
  .tbtn.danger{color:#ffb4ab}
  .tbtn[disabled]{opacity:.4;cursor:default}
  .tspacer{flex:1}
  .crumbs{font-size:13px;color:var(--muted)}
  .crumbs b{color:var(--text)}

  /* body split */
  .split{flex:1;display:flex;min-height:0}
  aside.side{width:230px;flex:none;border-right:1px solid var(--line);background:var(--panel);overflow-y:auto;padding:16px 12px}
  .grouplabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:9px 22px;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;user-select:none;background:rgba(var(--accent-rgb),.08);margin:8px -12px 4px}
  .grouplabel:hover{background:rgba(var(--accent-rgb),.12)}
  .grouplabel.co .conm{cursor:pointer;color:var(--accent);flex:1}
  .grouplabel.co .conm:hover{text-decoration:underline}
  .grouplabel.co .cocount{font-size:10px;color:var(--muted);background:var(--panel3);border-radius:999px;padding:1px 7px;margin-right:6px}
  .tablewrap thead th.tr{text-align:right}
  .nmcell{display:inline-flex;align-items:center;gap:9px}
  .nmcell svg{width:18px;height:18px;flex:0 0 18px}
  .grouplabel .caret{transition:transform .12s;margin-left:auto}
  .grouplabel.collapsed .caret{transform:rotate(-90deg)}
  .rename-inp{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--accent-dim);border-radius:6px;color:var(--text);padding:3px 6px;font-size:13px;font-family:inherit}
  .frow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;position:relative}
  .frow:hover{background:var(--panel2)}
  .frow.active{background:var(--panel3)}
  .frow .fcaret{width:14px;color:var(--muted);flex:0 0 14px;text-align:center;font-size:11px}
  .frow.flat{padding-left:10px}
  .frow .ficon{width:18px;height:18px;flex:0 0 18px}
  .frow .fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .frow .dots{opacity:.55;flex:0 0 auto;width:24px;height:22px;padding:0;border-radius:6px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .frow .dots svg{width:18px;height:18px}
  .frow:hover .dots{opacity:1}
  /* Finder column view */
  .colview{display:flex;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-height:340px}
  .col{min-width:236px;width:236px;flex:0 0 auto;border-right:1px solid var(--line);padding:8px;overflow-y:auto;max-height:62vh}
  .col:last-child{border-right:none}
  .colitem{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:13px;user-select:none}
  .colitem:hover{background:var(--panel2)}
  .colitem.on{background:rgba(var(--accent-rgb),.12)}
  .colitem.sel{background:rgba(var(--accent-rgb),.18);outline:1px solid var(--accent-dim)}
  .colitem .ci-ic{width:16px;height:16px;flex:0 0 16px;display:inline-flex}
  .colitem .ci-ic svg{width:16px;height:16px}
  .colitem .ci-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .colitem .ci-nm.yellow{color:var(--accent)}
  .colitem .ci-nm.gray{color:var(--muted)}
  .colitem .ci-ar{color:var(--muted);flex:0 0 auto;font-size:15px;line-height:1}
  .colempty{color:var(--muted);font-size:12px;padding:12px 10px}
  .marquee{position:fixed;border:1px solid var(--accent-dim);background:rgba(var(--accent-rgb),.14);z-index:200;pointer-events:none;border-radius:2px}
  .dragging{opacity:.45}
  .dropok{outline:2px solid var(--accent)!important;outline-offset:-2px;background:rgba(var(--accent-rgb),.12)!important;border-radius:8px}
  .frow .dots:hover{background:var(--panel3);color:var(--text)}
  .childwrap{margin-left:16px}

  /* right pane */
  main.content{flex:1;overflow:auto;position:relative}
  .dropzone{min-height:100%;padding:28px 32px;max-width:100%;overflow-x:hidden}
  .dropzone.drag{outline:2px dashed var(--accent);outline-offset:-12px;background:rgba(200,169,110,.05)}
  .pane-h{display:flex;align-items:center;gap:10px;margin-bottom:4px}
  .pane-h h2{margin:0;font-size:18px}
  .pane-sub{color:var(--muted);font-size:12px;margin-bottom:16px}
  /* Dispatchr-exact page structure */
  .pagehead{display:flex;align-items:flex-end;gap:14px;margin-bottom:20px}
  .pagehead h1{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:0}
  .pagehead .sub{color:var(--muted);font-size:13px;margin-top:2px}
  .sec-h{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:700;margin:26px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
  /* Google Drive connection card (copied from Dispatchr's .connbox) */
  .connbox{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:16px 18px;max-width:760px}
  .connbox .dot{width:11px;height:11px;border-radius:50%;flex:none}
  .connbox .grow{flex:1}
  .connbox .t{font-size:14px;font-weight:800}
  .connbox .s{font-size:12px;color:var(--muted)}
  .helptxt{font-size:11px;color:var(--muted);margin-top:4px}
  .bar{height:6px;border-radius:999px;background:#0c0f17;overflow:hidden}
  .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#2fb87f)}

  /* icons view */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;align-content:start}
  .item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:10px;cursor:default;text-align:center;border:1px solid transparent}
  .item:hover{background:var(--panel2)}
  .item.sel{background:rgba(47,75,208,.28);border-color:var(--sel)}
  .item .big{width:52px;height:52px;display:grid;place-items:center}
  .item .big svg{width:52px;height:52px}
  .item .lbl{font-size:12px;word-break:break-word;max-width:100%}

  /* list view */
  table.list{width:100%;border-collapse:collapse;font-size:13px}
  table.list th{text-align:left;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:12px 14px;background:var(--panel2);border-bottom:1px solid var(--line);white-space:nowrap}
  table.list td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
  table.list tbody tr:last-child td{border-bottom:none}
  table.list tr{cursor:default}
  table.list tr:hover td{background:var(--panel2)}
  table.list tr.sel td{background:rgba(47,75,208,.24)}
  table.list td.nm{display:flex;align-items:center;gap:9px}
  table.list td.nm svg{width:18px;height:18px;flex:0 0 18px}
  .trashtbl td .ficon{display:inline-flex;vertical-align:middle;margin-right:2px}
  .trashtbl td .ficon svg{width:18px;height:18px;flex:0 0 18px}

  .emptypane{color:var(--muted);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:55vh;gap:6px}
  .emptypane .big{width:46px;height:46px;opacity:.5}
  .emptypane .big svg{width:46px;height:46px}

  /* context menu */
  .ctx{position:fixed;z-index:80;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px;min-width:190px;box-shadow:0 12px 34px rgba(0,0,0,.5)}
  .ctx button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border-radius:7px;padding:8px 10px;text-align:left;font-weight:500;font-size:13px}
  .ctx button:hover{background:var(--panel3)}
  .ctx button.del{color:#ffb4ab}
  .ctx button[disabled]{opacity:.4;cursor:default}
  .ctx .sep{height:1px;background:var(--line);margin:5px 2px}
  .ctx svg{width:15px;height:15px;flex:0 0 15px}

  /* modal */
  .scrim{position:fixed;inset:0;background:rgba(4,6,10,.6);z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
  .modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:100%;max-width:480px;max-height:86vh;overflow:auto;padding:24px}
  .modal h3{margin:0 0 4px}
  .modal .msub{color:var(--muted);font-size:13px;margin-bottom:16px}
  .modal .row{display:flex;gap:10px;margin-top:18px}
  .checkrow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer}
  .checkrow:hover{background:var(--panel2)}
  .checkrow input{width:16px;height:16px;accent-color:var(--accent)}
  .checkrow .co{color:var(--muted);font-size:12px;margin-left:auto}

  /* team table */
  table.team{width:100%;border-collapse:collapse;font-size:13px}
  table.team th{text-align:left;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:12px 14px;background:var(--panel2);border-bottom:1px solid var(--line);white-space:nowrap}
  table.team td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
  table.team tbody tr:last-child td{border-bottom:none}
  .rolechip{font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:700;border-radius:999px;padding:4px 10px;border:1px solid var(--line);color:#8db4ff;border-color:rgba(141,180,255,.35);background:rgba(141,180,255,.08)}
  .rolechip.admin{color:var(--accent);border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.08)}
  .iconbtn{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--muted);display:inline-grid;place-items:center;cursor:pointer}
  .iconbtn:hover{color:var(--text);border-color:var(--accent-dim)}
  .iconbtn.del:hover{color:#ef8478;border-color:rgba(var(--danger-rgb),.5)}
  .iconbtn svg{width:15px;height:15px}
  .actcell{display:flex;gap:6px;justify-content:flex-end}
  /* editable users table (Dispatchr-exact) */
  .tablewrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
  .tablewrap table{width:100%;border-collapse:collapse;font-size:13px}
  .tablewrap thead th{text-align:left;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:12px 14px;background:var(--panel2);border-bottom:1px solid var(--line);white-space:nowrap}
  .tablewrap thead th.tc{text-align:center}
  .tablewrap thead th.sortable{cursor:pointer;user-select:none}
  .tablewrap tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
  .tablewrap tbody tr:last-child td{border-bottom:none}
  .tablewrap td.actcol{width:1%;white-space:nowrap}
  .sortarrow{color:var(--accent);font-weight:700}
  .mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:.3px}
  .gold{color:var(--accent);font-weight:700}
  .nowrap{white-space:nowrap}
  .inline-inp{width:100%;min-width:80px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:6px 8px;font-size:13px;font-family:inherit}
  select.inline-inp{cursor:pointer}
  select.inline-inp option{background:var(--panel2);color:var(--text)}
  .chip{font-size:10px;font-weight:700;letter-spacing:.4px;border-radius:999px;padding:4px 9px;border:1px solid var(--line);color:var(--muted);display:inline-block}
  .chip.ok{color:var(--ok);border-color:rgba(var(--ok-rgb),.3);background:rgba(var(--ok-rgb),.08)}
  .chip.warn{color:var(--warn);border-color:rgba(230,180,85,.35);background:rgba(230,180,85,.08)}
  .chip.bad{color:#ef8478;border-color:rgba(var(--danger-rgb),.35);background:rgba(var(--danger-rgb),.08)}
  /* icons inside the connection card need explicit sizing (no global svg rule) */
  .connbox .ficon{width:22px;height:22px;flex:0 0 22px;display:inline-flex;align-items:center;justify-content:center}
  .connbox .ficon svg{width:22px;height:22px;flex:0 0 22px}
  /* note block inside a confirmation dialog */
  .cfnote{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:11px 13px;margin:2px 0 0;font-size:12.5px;color:#c7cdda;line-height:1.55}
  .cfnote b{color:var(--text)}
  /* inline "name already taken" message inside a modal */
  .nameerr{display:none;margin-top:10px;background:rgba(var(--danger-rgb),.08);border:1px solid rgba(var(--danger-rgb),.3);border-radius:9px;padding:11px 13px;font-size:12.5px;color:#ef8478;line-height:1.5}
  .nameerr.on{display:block}
  .nameerr .btn{color:var(--text)}
  /* ---- in-folder filter bar ---- */
  .filterbar{display:flex;align-items:center;gap:9px;margin:2px 0 14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:7px 11px}
  .filterbar .filtericon{display:inline-flex;color:var(--muted);flex:0 0 16px}
  .filterbar .filtericon svg{width:16px;height:16px}
  .filterinp{flex:1;background:transparent;border:none;color:var(--text);font-family:inherit;font-size:14px;padding:3px 0}
  .filterinp:focus{outline:none}
  .filterclear{background:transparent;border:none;color:var(--muted);cursor:pointer;display:inline-flex;padding:2px;border-radius:5px}
  .filterclear:hover{color:var(--text);background:var(--panel3)}
  .filterclear svg{width:15px;height:15px}
  .filterbar .filterall{flex:0 0 auto}
  /* ---- global search modal ---- */
  .scrim .modal.searchmodal{max-width:640px}
  .searchhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .segwrap{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
  .segbtn{display:inline-flex;align-items:center;gap:6px;background:var(--panel3);border:none;color:var(--muted);padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer}
  .segbtn+.segbtn{border-left:1px solid var(--line)}
  .segbtn.on{background:rgba(var(--accent-rgb),.16);color:var(--accent)}
  .segbtn svg{width:14px;height:14px}
  .searchrow{display:flex;align-items:center;gap:9px;margin:6px 0 4px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 8px 6px 12px}
  .searchrow .filtericon{color:var(--muted);display:inline-flex;flex:0 0 18px}
  .searchrow .filtericon svg{width:18px;height:18px}
  .searchrow .txt{flex:1;background:transparent;border:none;padding:8px 0}
  .searchrow .txt:focus{outline:none;border:none}
  .interpbar{display:flex;align-items:center;gap:8px;margin:10px 0 2px;font-size:12px;color:var(--accent);background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.25);border-radius:8px;padding:8px 11px}
  .interpbar.muted{color:var(--muted);background:var(--panel2);border-color:var(--line)}
  .interpbar svg{width:15px;height:15px;flex:0 0 15px}
  .srcount{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:14px 2px 8px;font-weight:700}
  .srtbl td.nm{display:flex;align-items:center;gap:11px}
  .srtbl td.nm svg{width:18px;height:18px;flex:0 0 18px}
  .srpath{font-size:11.5px;color:var(--muted);margin-top:1px}
  #gsBody .tablewrap{max-height:46vh;overflow:auto}
  /* ---- shared-with line under Created by ---- */
  .sharedline{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:-6px}
  .sharedlbl{color:var(--muted)}
  .sharechip{display:inline-block;font-size:11.5px;font-weight:600;color:var(--accent);background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.28);border-radius:999px;padding:2px 9px}
  .sharemanage{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600;border-radius:7px;padding:2px 9px;cursor:pointer;margin-left:2px}
  .sharemanage:hover{border-color:var(--accent);color:var(--accent)}
  /* ---- shared badge on sidebar folder icon ---- */
  .ficonwrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
  .sharedbadge{position:absolute;right:-5px;bottom:-4px;width:13px;height:13px;border-radius:50%;background:var(--panel);display:inline-flex;align-items:center;justify-content:center;color:var(--accent);box-shadow:0 0 0 1.5px var(--bg)}
  .frow.active .sharedbadge{background:var(--panel3)}
  .sharedbadge svg{width:10px;height:10px;flex:0 0 10px}
  .empty{border:1px dashed var(--line);border-radius:12px;padding:42px;text-align:center;color:var(--muted)}
  .empty .big{font-size:15px;color:var(--text);font-weight:700;margin-bottom:4px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
  table.kvtable{width:100%;border-collapse:collapse;font-size:13px}
  table.kvtable td{padding:12px 14px;border-bottom:1px solid var(--line)}
  table.kvtable tr:last-child td{border-bottom:none}
  table.kvtable td.k{color:var(--muted);width:180px;white-space:nowrap}
  table.kvtable td.v{color:var(--text);font-weight:700}

  /* storage meter */
  .meter{height:16px;background:rgba(230,180,85,.32);border-radius:999px;overflow:hidden;margin:12px 0}
  .meter .fill{height:100%;background:linear-gradient(90deg,#35c98a,#5fd39b);border-radius:999px;transition:width .4s}
  .meter .fill.warn{background:var(--warn)} .meter .fill.crit{background:var(--danger)}

  .hpill{font-size:12px;font-weight:700;border-radius:999px;padding:6px 13px;border:1px solid var(--line);color:var(--muted);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
  .hpill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
  .hpill.on{color:var(--ok);border-color:rgba(var(--ok-rgb),.35);background:rgba(var(--ok-rgb),.08)}
  .hpill.off{color:#ef8478;border-color:rgba(var(--danger-rgb),.35);background:rgba(var(--danger-rgb),.08)}
  .dcard{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:6px}
  .dcard .dstate{font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:8px}
  .dcard.ok{border-color:rgba(61,220,151,.35)} .dcard.ok .dstate{color:var(--ok)}
  .dcard.warn{border-color:rgba(230,180,85,.4)} .dcard.warn .dstate{color:var(--warn)}
  .dcard.bad{border-color:rgba(224,89,75,.4)} .dcard.bad .dstate{color:#ff8f84}
  .dcard button{margin-top:12px}
  .kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(42,49,66,.5);font-size:13px}
  .kv .k{color:var(--muted)}

  /* howto */
  .howto{max-width:860px;padding-bottom:40px}
  .howto h2{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);font-weight:800;margin:34px 0 4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .howto h2:first-child{margin-top:0}
  .howto h3{margin:20px 0 6px;font-size:15px;color:var(--text)}
  .howto p{color:#c7cdda;line-height:1.65;margin:6px 0}
  .howto ul{margin:8px 0 8px 18px;padding:0;color:#c7cdda;line-height:1.7}
  .howto ol{margin:8px 0 14px 22px;padding:0;color:#c7cdda;line-height:1.75}
  .howto ol li{margin:6px 0;padding-left:4px}
  .howto ol li::marker{color:var(--accent);font-weight:700}
  .howto .task{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 18px;margin:12px 0}
  .howto .task h3{margin:0 0 2px;font-size:15px;color:var(--accent)}
  .howto .task .tsub{font-size:12px;color:var(--muted);margin-bottom:4px}
  .howto li{margin:4px 0}
  .howto code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:12px;color:var(--accent)}
  .howto kbd{background:var(--panel3);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:11.5px;color:var(--text);font-weight:700}
  .howto .note{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:12px 14px;margin:12px 0}
  .howto .warn{border-left-color:var(--danger)}
  .howto table{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .howto th{text-align:left;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 12px;background:var(--panel2);border-bottom:1px solid var(--line)}
  .howto td{padding:10px 12px;border-bottom:1px solid var(--line);color:#c7cdda;vertical-align:top}
  .howto tr:last-child td{border-bottom:none}

  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel3);border:1px solid var(--line);color:var(--text);padding:11px 18px;border-radius:10px;z-index:120;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
  /* upload progress — stays on screen for the whole upload */
  .upmgr{position:fixed;right:22px;bottom:22px;z-index:130;display:flex;flex-direction:column;gap:10px;width:min(380px,92vw)}
  .upcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.55)}
  .upcard.done{border-color:rgba(var(--ok-rgb),.4)}
  .upcard.err{border-color:rgba(var(--danger-rgb),.4)}
  .upcard .uhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
  .upcard .ulabel{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .upcard .upct{font-size:12px;font-weight:800;color:var(--accent);flex:0 0 auto;font-variant-numeric:tabular-nums}
  .upcard.done .upct{color:var(--ok)}
  .upcard.err .upct{color:#ef8478}
  .upcard .ubar{height:8px;border-radius:999px;background:#0c0f17;overflow:hidden}
  .upcard .ubar i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-dim));transition:width .18s ease}
  .upcard.done .ubar i{background:var(--ok)}
  .upcard .usub{margin-top:8px;font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:10px;align-items:center}
  .upcancel{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600;border-radius:6px;padding:2px 8px;cursor:pointer;flex:0 0 auto}
  .upcancel:hover{color:var(--text);border-color:var(--accent-dim)}
  /* table pagination controls */
  .pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
  .pgbtn{background:var(--panel3);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:600;border-radius:8px;padding:7px 13px;cursor:pointer}
  .pgbtn:hover:not([disabled]){border-color:var(--accent-dim)}
  .pgbtn[disabled]{opacity:.4;cursor:default}
  .pginfo{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .uprog{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);width:min(430px,92vw);
    background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;z-index:130;
    box-shadow:0 12px 40px rgba(0,0,0,.55)}
  .uprog .uhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
  .uprog .ulabel{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .uprog .upct{font-size:13px;font-weight:800;color:var(--accent);flex:0 0 auto;font-variant-numeric:tabular-nums}
  .uprog .ubar{height:8px;border-radius:999px;background:#0c0f17;overflow:hidden}
  .uprog .ubar i{display:block;height:100%;width:0%;border-radius:999px;
    background:linear-gradient(90deg,var(--accent),var(--accent-dim));transition:width .18s ease}
  .uprog .usub{margin-top:8px;font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
  .spin{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
  @keyframes sp{to{transform:rotate(360deg)}}

/* ============================================================
   ICON SIZING REGISTRY (reminder)
   Contexts already sized above: .btn svg · .tbtn svg · .iconbtn svg
   · .pweye svg · .viewseg .vseg svg · .ctx svg · .frow .ficon(+svg)
   · .frow .dots svg · .nmcell svg · table.list td.nm svg
   · .trashtbl td .ficon svg · .connbox .ficon svg · .item .big svg
   · .emptypane .big svg · .mg-ic svg · .sharedbadge svg
   For any NEW icon container, add one of these:
   ============================================================ */
.icon16 svg{width:16px;height:16px;flex:0 0 16px}
.icon18 svg{width:18px;height:18px;flex:0 0 18px}
.icon24 svg{width:24px;height:24px;flex:0 0 24px}