:root{
  /* ─────────────────────────────────────────────────────────────────────
     SURFACES — a real elevation ladder.
     Dark side is slate (blue undertone), not black. Light side is warm
     off-white, not pure white. The jump between them is 16:1, not 21:1.
     ───────────────────────────────────────────────────────────────────── */
  --canvas:#12151A;      /* app background */
  --chrome:#1A1E25;      /* top bar, left rail */
  --chrome-2:#242932;    /* hover on chrome */
  --chrome-line:#2A2F38;

  --panel:#FBFAF7;       /* content surface — warm paper */
  --panel-2:#F3F1EC;     /* zebra / hover / column headers */
  --head:#3A3630;        /* section header band — lighter so the panel edge reads */
  --head-line:#4A453D;
  --head-ink:#D4B563;    /* gold on dark reads bright and clean */
  --inset:#F6F3EC;       /* inputs: warm recess, subtle */
  --panel-line:#E4DFD5;
  --panel-line-2:#CFC8BA;

  /* TEXT — on light panels */
  --t1:#1C1F24;
  --t2:#565C66;
  --t3:#666B73;

  /* TEXT — on dark chrome */
  --d1:#EDEFF3;
  --d2:#98A1B0;
  --d3:#6A7382;

  /* ACCENTS
     Gold = brand + active state only. Slate-blue = actions.
     Splitting these is what keeps gold meaningful. */
  --gold:#D4B563;
  --gold-soft:rgba(212,181,99,.13);
  --gold-ink:#7D6416;

  --head:#3A3630;        /* section header band — lighter so the panel edge reads */
  --head-line:#4A453D;
  --head-ink:#D4B563;    /* gold on dark reads bright and clean */

  --tile-gold:#F0EBDD;  --tile-gold-fg:#6B5A2A;  --tile-gold-line:#DED5BE;
  --tile-gold-v:#2A2415;
  --tile-good:#E4F0E4;  --tile-good-line:#C3DEC6;  --tile-good-v:#1B5E2A;  --tile-good-fg:#2F6B3B;
  --tile-bad:#F7E4E1;   --tile-bad-line:#EBC6C0;   --tile-bad-v:#9A2D22;   --tile-bad-fg:#8A3A30;

  --act:#3D6FD1;         /* primary action */
  --act-hi:#4C80E8;
  --act-soft:#E8EFFC;
  --act-ink:#27509E;

  /* extra categorical accent — used for "pending"/tag-style pills where
     ok/warn/bad don't fit */
  --purple:#7D6FBE;  --purple-bg:#EFEBFA;  --purple-line:#D6CCEF;  --purple-ink:#5B4D9E;

  /* STATUS — muted, not neon */
  --ok:#1B7A45;   --ok-bg:#E4F2E9;   --ok-line:#B6D9C4;
  --warn:#8A5B0A; --warn-bg:#FAF0DE; --warn-line:#E5D0A0;
  --bad:#AC2020;  --bad-bg:#FAE9E9;  --bad-line:#EBBFBF;

  --r:7px;
  --r-lg:11px;
  --lift:0 1px 2px rgba(0,0,0,.20), 0 6px 16px -4px rgba(0,0,0,.22);
  --inset-shadow:inset 0 1px 2px rgba(33,31,28,.10);
}

/* ══════════════════════════════════════════════════════════════════════
   TRS SHARED SHELL — every class here is prefixed .trs- deliberately.
   Modules keep their own .nav/.btn/.pill/etc; these never collide with
   them. Injected by TRS.renderTopBar() from trs-shared.js.
   ══════════════════════════════════════════════════════════════════════ */
#trsTop{position:sticky;top:0;z-index:500;font-family:'Inter',system-ui,sans-serif}
.trs-top{
  height:52px;background:var(--chrome);border-bottom:1px solid var(--chrome-line);
  display:flex;align-items:center;padding:0 18px;gap:24px;
}
.trs-logo{font-size:14px;font-weight:600;letter-spacing:.14em;color:#fff;white-space:nowrap}
.trs-logo b{color:var(--gold);font-weight:600}
.trs-modules{display:flex;align-items:center;height:100%;gap:2px}
.trs-mod{
  display:flex;align-items:center;height:100%;padding:0 15px;
  color:var(--d2);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;position:relative;
  transition:color .14s;text-decoration:none;
}
.trs-mod:hover{color:var(--d1)}
.trs-mod.is-active{color:#fff;font-weight:500}
.trs-mod.is-active::after{
  content:'';position:absolute;left:10px;right:10px;bottom:0;height:2px;
  background:var(--gold);border-radius:2px 2px 0 0;
}
.trs-top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.trs-pill{
  display:inline-flex;align-items:center;gap:7px;height:27px;padding:0 11px;border-radius:14px;
  font-size:12px;background:rgba(255,255,255,.06);color:var(--d2);
  border:1px solid rgba(255,255,255,.07);white-space:nowrap;
}
.trs-pill .trs-dot{width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.16)}
.trs-pill.is-busy .trs-dot{background:var(--gold);box-shadow:0 0 0 3px rgba(212,181,99,.18)}
.trs-pill.is-off .trs-dot{background:var(--bad);box-shadow:0 0 0 3px rgba(172,32,32,.16)}
.trs-storage{font-size:10px;color:var(--d3)}
.trs-storage.is-warn{color:var(--warn)}
.trs-storage.is-bad{color:var(--bad)}
.trs-who{font-size:12px;color:var(--d2);cursor:pointer;text-decoration:underline dotted}
.trs-who:hover{color:var(--d1)}

#trsLoginGate{
  position:fixed;inset:0;background:var(--canvas);z-index:900;
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',system-ui,sans-serif;
}
.trs-login-box{
  width:320px;background:var(--chrome);border:1px solid var(--chrome-line);
  border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--lift);
}
.trs-login-box .trs-fg{margin-bottom:14px}
.trs-login-box label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--d2);margin-bottom:6px}
.trs-login-box input{
  width:100%;height:36px;border-radius:var(--r);border:1px solid var(--chrome-line);
  background:var(--chrome-2);color:var(--d1);padding:0 11px;font-size:14px;
  font-family:inherit;outline:none;box-sizing:border-box;
}
.trs-login-box input:focus{border-color:var(--gold)}
.trs-login-btn{
  width:100%;margin-top:4px;height:36px;border-radius:var(--r);
  background:var(--gold);border:1px solid var(--gold);color:#2A2415;
  font-weight:600;font-size:13px;letter-spacing:.03em;cursor:pointer;font-family:inherit;
}
.trs-login-btn:hover{background:#E3C878;border-color:#E3C878}
.trs-login-note{font-size:11px;color:var(--d3);margin-top:12px;line-height:1.5}
.trs-login-err{font-size:11px;color:var(--bad);margin-top:8px;min-height:14px}