:root{
    /* cool light theme from helmrock.com — white/grey paper, #1610b3 banner blue, teal accent, Raleway */
    --paper:#f6f7f9; --paper-2:#ffffff; --paper-3:#eef0f3; --paper-4:#e3e6eb;
    --ink:#262a31; --ink-soft:#3b4048; --muted:#6c727b; --dim:#9aa0a8;
    --line:rgba(38,42,49,.10); --line-2:rgba(38,42,49,.16);
    --brand:#1610b3; --brand-deep:#0e0a85; --brand-soft:#e4e3f7; --brand-glow:rgba(22,16,179,.13);
    --teal:#0f9b92; --teal-deep:#0c7d76; --teal-soft:#d4eeeb;
    --amber:#bd861f; --amber-soft:#f3e4c2;
    --brick:#c0392b; --brick-soft:#f5d9d4;
    --steel:#5b6b8c; --steel-soft:#dde2ec;
    --charcoal:#23272d;
    /* aliases — existing component rules reference these names */
    --bronze:var(--brand); --bronze-deep:var(--brand-deep); --bronze-soft:var(--brand-soft); --bronze-glow:var(--brand-glow);
    --evergreen:var(--teal); --evergreen-soft:var(--teal-soft);
    --mono:'IBM Plex Mono',ui-monospace,monospace;
    --sans:'Raleway',system-ui,sans-serif;
    --rail:250px;
    --shadow:0 1px 2px rgba(38,42,49,.05),0 6px 22px rgba(38,42,49,.06);
    --shadow-lg:0 2px 4px rgba(38,42,49,.06),0 18px 44px rgba(38,42,49,.10);
    --r:6px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans); background:var(--paper); color:var(--ink);
    font-size:13.5px; line-height:1.55; min-height:100vh; overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(1100px 700px at 88% -10%, var(--bronze-glow), transparent 60%),
      radial-gradient(800px 560px at -6% 108%, var(--evergreen-soft), transparent 60%);
  }
  body::after{ /* faint paper grain */
    content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
  }
  ::selection{background:var(--bronze);color:#fff}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--paper-4);border-radius:8px;border:3px solid var(--paper)}
  ::-webkit-scrollbar-thumb:hover{background:#dcd5c2}
  a{color:inherit;text-decoration:none}
  code{font-family:var(--mono)}
  .mono-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}

  .shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}

  /* ===== rail ===== */
  .rail{
    border-right:1px solid var(--line);background:linear-gradient(180deg,#fffefb,var(--paper));
    display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  }
  .brand{padding:22px 22px 18px;border-bottom:1px solid var(--line)}
  .brand .logo{display:flex;align-items:center;gap:12px}
  .brand .mark{width:38px;height:38px;flex:none;display:grid;place-items:center;
    background:var(--paper-2);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow)}
  .brand .mark img{width:26px;height:26px;display:block}
  .brand .name{font-family:var(--sans);font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1}
  .brand .sub{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--bronze-deep);text-transform:uppercase;margin-top:5px}

  nav{padding:14px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
  .nav-head{padding:14px 10px 8px}
  .navitem{display:flex;align-items:center;gap:12px;padding:11px 12px;cursor:pointer;position:relative;
    color:var(--muted);transition:.18s ease;border-radius:var(--r)}
  .navitem .idx{font-family:var(--mono);font-size:10px;color:var(--dim);width:18px}
  .navitem .lbl{font-size:13px;letter-spacing:.01em;font-weight:600}
  .navitem:hover{color:var(--ink);background:var(--paper-3)}
  .navitem.active{color:var(--ink);background:#fff;box-shadow:var(--shadow)}
  .navitem.active::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;background:var(--bronze);border-radius:3px}
  .navitem.active .idx{color:var(--bronze)}
  .rail-foot{padding:16px 22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1.8}
  .rail-foot b{color:var(--evergreen);font-weight:600}

  /* ===== main ===== */
  main{min-width:0;display:flex;flex-direction:column}
  .topbar{height:62px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
    padding:0 30px;position:sticky;top:0;z-index:50;background:rgba(250,248,241,.82);backdrop-filter:blur(14px) saturate(1.1)}
  .crumb{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .crumb .cur{color:var(--ink)}
  .topright{display:flex;align-items:center;gap:24px}
  .seq{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
  .seq .v{color:var(--bronze-deep);font-weight:600}
  .regs{display:flex;gap:9px}
  .led{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .led .dot{width:7px;height:7px;border-radius:50%;background:var(--evergreen);box-shadow:0 0 0 3px var(--evergreen-soft);animation:pulse 2.4s infinite}
  .clock{font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}

  .canvas{padding:32px 30px 64px;max-width:1340px;width:100%}
  .view{display:none;animation:fadeup .5s ease both}
  .view.show{display:block}

  .pagehead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;gap:20px;flex-wrap:wrap}
  .pagehead h1{font-family:var(--sans);font-weight:800;font-size:33px;letter-spacing:-.02em;line-height:1.05}
  .pagehead h1 .accent{color:var(--bronze)}
  .pagehead p{color:var(--muted);font-size:13px;margin-top:9px;max-width:60ch;line-height:1.6}
  .pagehead code{font-size:12px;background:var(--paper-3);padding:1px 6px;border-radius:4px;color:var(--bronze-deep)}

  /* ===== kpi row ===== */
  .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:26px}
  .kpi{border:1px solid var(--line);background:var(--paper-2);padding:17px;border-radius:var(--r);box-shadow:var(--shadow);position:relative;overflow:hidden}
  .kpi .k-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
  .kpi .k-val{font-family:var(--sans);font-weight:800;font-size:30px;margin-top:13px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .kpi .k-val.sm{font-size:24px}
  .kpi .k-sub{font-size:11px;color:var(--dim);margin-top:7px}
  .kpi .k-sub .up{color:var(--evergreen);font-weight:600}
  .kpi.glow{background:linear-gradient(160deg,#fff,#eef0fb);border-color:var(--brand-soft)}
  .kpi.glow .k-val{color:var(--bronze-deep)}

  .grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:18px}
  .grid2.rev{grid-template-columns:1fr 1.55fr}
  .panel{border:1px solid var(--line);background:var(--paper-2);border-radius:var(--r);box-shadow:var(--shadow);position:relative}
  .panel-h{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
  .panel-h h3{font-size:13px;letter-spacing:0;font-weight:700;color:var(--ink)}
  .panel-h .tag{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--dim);text-transform:uppercase}
  .panel-b{padding:18px}

  /* ===== signal flow ===== */
  .flowwrap{padding:8px 0 0}
  .flow{width:100%;height:320px;display:block}
  .flow text{font-family:var(--mono);fill:var(--muted)}
  .node-box{fill:#fff;stroke:var(--line-2);stroke-width:1.2}
  .node-box.hot{fill:#eef0fb;stroke:var(--brand)}
  .node-title{fill:var(--ink);font-size:11px;font-weight:600;letter-spacing:.02em}
  .node-meta{fill:var(--dim);font-size:9px;letter-spacing:.04em}
  .wire{fill:none;stroke:var(--line-2);stroke-width:1.4}
  .pulse{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:6 220}
  .pulse.ok{stroke:var(--evergreen);animation:flow 2.5s linear infinite}
  .pulse.amb{stroke:var(--bronze);animation:flow 3s linear infinite}
  .pulse.bad{stroke:var(--brick);animation:flow 3.5s linear infinite}
  .legend{display:flex;gap:18px;padding:13px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
  .legend span{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;color:var(--muted)}
  .legend i{width:16px;height:3px;display:inline-block;border-radius:3px}

  .regrow{display:flex;flex-direction:column;gap:10px}
  .regcard{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:13px 15px;display:flex;align-items:center;justify-content:space-between}
  .regcard .rc-l{display:flex;align-items:center;gap:12px}
  .regcard .rc-code{font-family:var(--sans);font-weight:800;font-size:16px;letter-spacing:.02em;color:var(--ink)}
  .regcard .rc-meta{font-size:11px;color:var(--dim)}
  .checks{display:flex;gap:4px}
  .check{width:7px;height:18px;background:var(--evergreen);border-radius:2px;opacity:.85}
  .ver{font-family:var(--mono);font-size:10px;color:var(--bronze-deep);border:1px solid var(--bronze-soft);background:#fff;padding:3px 7px;border-radius:4px}

  table{width:100%;border-collapse:collapse}
  th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);font-weight:500}
  td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink);vertical-align:middle}
  tr:last-child td{border-bottom:none}
  tbody tr{transition:.15s}
  tbody tr:hover{background:var(--paper)}
  .addr{color:var(--muted)}
  .qid{font-family:var(--mono);color:var(--dim);font-size:11px}
  .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:20px;font-weight:500;border:1px solid transparent}
  .chip::before{content:"";width:6px;height:6px;border-radius:50%}
  .chip.sent{color:var(--evergreen);background:var(--evergreen-soft)} .chip.sent::before{background:var(--evergreen)}
  .chip.bounced{color:var(--brick);background:var(--brick-soft)} .chip.bounced::before{background:var(--brick)}
  .chip.deferred{color:var(--amber);background:var(--amber-soft)} .chip.deferred::before{background:var(--amber)}
  .chip.exo{color:var(--steel);background:var(--steel-soft)} .chip.exo::before{background:var(--steel)}
  .chip.sg{color:var(--bronze-deep);background:var(--bronze-soft)} .chip.sg::before{background:var(--bronze)}

  .tenants{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}

  /* ===== configurator ===== */
  .cfg{display:grid;grid-template-columns:1fr 470px;gap:18px;align-items:start}
  .formcol{display:flex;flex-direction:column;gap:18px}
  fieldset{border:1px solid var(--line);background:var(--paper-2);border-radius:var(--r);box-shadow:var(--shadow);padding:0}
  legend{margin-left:16px;padding:0 9px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-deep);font-weight:500}
  .fs-body{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field.full{grid-column:1/-1}
  label{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  input,select,textarea{font-family:var(--mono);font-size:12.5px;background:var(--paper);border:1px solid var(--line-2);color:var(--ink);padding:10px 12px;outline:none;transition:.15s;width:100%;border-radius:5px}
  input:focus,select:focus,textarea:focus{border-color:var(--bronze);background:#fff;box-shadow:0 0 0 3px var(--bronze-glow)}
  select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .hint{font-size:10.5px;color:var(--dim);line-height:1.5}
  .pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
  .pill{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line-2);padding:6px 10px;font-family:var(--mono);font-size:11px;border-radius:20px}
  .pill button{background:none;border:none;color:var(--dim);cursor:pointer;font-family:var(--mono);font-size:14px;line-height:1}
  .pill button:hover{color:var(--brick)}
  .pill.managed{border-color:var(--evergreen);color:var(--evergreen);background:var(--evergreen-soft)}
  .addbar{display:flex;gap:8px;margin-top:4px}
  .addbar input{flex:1}
  .btn{font-family:var(--sans);font-size:12px;letter-spacing:.01em;padding:11px 18px;border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink);cursor:pointer;transition:.18s;font-weight:600;border-radius:5px}
  .btn:hover{border-color:var(--ink);box-shadow:var(--shadow)}
  .btn.dark{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
  .btn.dark:hover{background:#000}
  .btn.amber{background:var(--bronze);color:#fff;border-color:var(--bronze)}
  .btn.amber:hover{background:var(--bronze-deep);box-shadow:var(--shadow-lg)}
  .btn.sm{padding:8px 13px;font-size:11px}

  .previewcol{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px}
  .term{border:1px solid var(--line-2);background:#fbfcfe;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
  .term-h{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--paper-3)}
  .term-h .dots{display:flex;gap:6px}
  .term-h .dots i{width:9px;height:9px;border-radius:50%}
  .term-h .dots i:first-child{background:var(--brick)} .term-h .dots i:nth-child(2){background:var(--amber)} .term-h .dots i:nth-child(3){background:var(--evergreen)}
  .term-h .tt{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted)}
  .term pre{padding:16px;font-family:var(--mono);font-size:11.5px;line-height:1.75;color:var(--ink-soft);overflow:auto;max-height:430px;white-space:pre;tab-size:2}
  .yk{color:var(--steel);font-weight:500} .yv{color:var(--bronze-deep)} .ys{color:var(--evergreen)} .yc{color:var(--dim);font-style:italic} .yenv{color:var(--brick)}
  .runout{border:1px solid var(--line);background:var(--paper-2);border-radius:var(--r);box-shadow:var(--shadow);min-height:96px;overflow:hidden}
  .runout .ro-h{padding:11px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .runout pre{padding:14px;font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--ink-soft);white-space:pre-wrap}
  .runout .ln{color:var(--bronze)}

  .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
  .vcard{border:1px solid var(--line);background:var(--paper-2);border-radius:var(--r);box-shadow:var(--shadow)}
  .vcard .vc-h{padding:15px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
  .vcard .vc-h .nm{font-size:13.5px;font-weight:700}
  .vcard .vc-b{padding:16px}
  .badge{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border:1px solid;font-weight:500;border-radius:20px}
  .badge.pass{color:var(--evergreen);border-color:var(--evergreen);background:var(--evergreen-soft)}
  .badge.pend{color:var(--amber);border-color:var(--amber);background:var(--amber-soft)}
  .dns{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:11px 13px;margin-top:10px;font-family:var(--mono);font-size:10.5px;display:flex;justify-content:space-between;align-items:center;gap:10px}
  .dns .l{overflow:hidden}
  .dns .t{color:var(--dim);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
  .dns .h{color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .copy{flex:none;background:var(--paper-2);border:1px solid var(--line-2);color:var(--muted);cursor:pointer;font-family:var(--mono);font-size:9px;padding:5px 9px;letter-spacing:.05em;text-transform:uppercase;border-radius:4px}
  .copy:hover{color:var(--ink);border-color:var(--ink)}
  .copy.done{color:var(--evergreen);border-color:var(--evergreen)}

  .authrow{display:flex;gap:10px}
  .authrow .a{flex:1;text-align:center;border:1px solid var(--line);border-radius:var(--r);padding:13px 6px;background:var(--paper-2);box-shadow:var(--shadow)}
  .authrow .a .n{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
  .authrow .a .s{font-family:var(--sans);font-weight:800;font-size:15px;margin-top:6px;color:var(--evergreen)}

  .mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
  .gauge{display:flex;align-items:center;gap:20px}
  .gauge .g-val{font-family:var(--sans);font-weight:800;font-size:38px;color:var(--evergreen);letter-spacing:-.02em}
  .gauge .g-lbl{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
  .barlist{display:flex;flex-direction:column;gap:14px}
  .barrow{display:grid;grid-template-columns:140px 1fr 56px;align-items:center;gap:12px;font-size:12px}
  .barrow .bn{color:var(--muted);font-family:var(--mono);font-size:11px}
  .bartrack{height:8px;background:var(--paper-3);border-radius:8px;overflow:hidden}
  .barfill{height:100%;background:linear-gradient(90deg,var(--brand),#4a45c9);width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1);border-radius:8px}
  .barfill.mint{background:linear-gradient(90deg,var(--teal),#3fc1b6)}
  .barrow .bv{text-align:right;color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
  .matrix td .chip{min-width:62px;justify-content:center}

  .footnote{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  @keyframes flow{from{stroke-dashoffset:226}to{stroke-dashoffset:0}}
  @keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  .stagger>*{opacity:0;animation:fadeup .55s ease forwards}
  .stagger>*:nth-child(1){animation-delay:.04s}.stagger>*:nth-child(2){animation-delay:.10s}
  .stagger>*:nth-child(3){animation-delay:.16s}.stagger>*:nth-child(4){animation-delay:.22s}
  .stagger>*:nth-child(5){animation-delay:.28s}.stagger>*:nth-child(6){animation-delay:.34s}

  @media(max-width:1100px){
    .kpis{grid-template-columns:repeat(3,1fr)}.grid2,.grid2.rev{grid-template-columns:1fr}
    .cfg{grid-template-columns:1fr}.previewcol{position:static}.tenants,.vgrid{grid-template-columns:1fr}
    .mgrid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:780px){body{--rail:0px}.shell{grid-template-columns:1fr}.rail{display:none}.kpis,.mgrid{grid-template-columns:1fr 1fr}}

  /* ===================== AUTH GATE ===================== */
  .auth{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:1.05fr 1fr;background:var(--paper)}
  .auth.hidden{display:none}
  .auth-brand{position:relative;background:linear-gradient(155deg,var(--brand),#0a0668);color:#fff;padding:46px 52px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
  .auth-brand::after{content:"";position:absolute;inset:0;opacity:.5;background:radial-gradient(620px 420px at 82% 8%,rgba(120,114,235,.5),transparent 60%);pointer-events:none}
  .auth-brand svg.topo{position:absolute;left:0;right:0;bottom:-2px;width:100%;opacity:.22;z-index:0}
  .ab-top{display:flex;align-items:center;gap:14px;position:relative;z-index:2}
  .ab-mark{width:48px;height:48px;display:grid;place-items:center;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);border-radius:12px}
  .ab-mark img{width:31px;height:31px;filter:brightness(0) invert(1)}
  .ab-name{font-family:var(--sans);font-weight:800;font-size:20px;line-height:1}
  .ab-org{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:5px}
  .ab-mid{position:relative;z-index:2;max-width:32ch}
  .ab-mid h2{font-family:var(--sans);font-weight:300;font-size:33px;line-height:1.18;letter-spacing:-.01em}
  .ab-mid h2 b{font-weight:700}
  .ab-points{position:relative;z-index:2;display:flex;flex-direction:column;gap:15px}
  .ab-point{display:flex;gap:13px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.94);font-weight:500}
  .ab-point .ic{width:24px;height:24px;flex:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:7px;display:grid;place-items:center;font-size:12px}
  .ab-point small{display:block;color:rgba(255,255,255,.62);font-size:11.5px;margin-top:2px;font-weight:400}

  .auth-main{display:flex;align-items:center;justify-content:center;padding:40px;overflow:auto}
  .auth-card{width:100%;max-width:430px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:34px 32px}
  .ascreen{display:none;animation:fadeup .45s ease both}
  .ascreen.show{display:block}
  .a-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:8px;margin-bottom:15px}
  .a-eyebrow .lk{width:14px;height:14px;display:inline-block}
  .auth-card h1{font-family:var(--sans);font-weight:800;font-size:22px;letter-spacing:-.01em;margin-bottom:7px;color:var(--ink)}
  .auth-card .asub{color:var(--muted);font-size:13px;margin-bottom:24px;line-height:1.55}
  .afield{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
  .afield label{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .btn.block{width:100%;justify-content:center;text-align:center;display:flex;padding:13px;font-size:13px}
  .adiv{display:flex;align-items:center;gap:12px;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin:20px 0}
  .adiv::before,.adiv::after{content:"";height:1px;background:var(--line);flex:1}
  .passkey{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid var(--line-2);background:#fff;padding:13px;border-radius:6px;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:13px;color:var(--ink);transition:.18s}
  .passkey:hover{border-color:var(--brand);color:var(--brand);box-shadow:var(--shadow)}
  .passkey svg{width:18px;height:18px}
  .afoot{margin-top:22px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.6}
  .afoot a,.alink{color:var(--brand);font-weight:600;cursor:pointer}
  .afoot a:hover,.alink:hover{text-decoration:underline}
  .secnote{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.04em}
  .secnote b{color:var(--muted);font-weight:500}
  .code{display:flex;gap:9px;justify-content:center;margin:8px 0 6px}
  .code input{width:46px;height:55px;text-align:center;font-family:var(--mono);font-size:22px;border:1px solid var(--line-2);border-radius:9px;background:var(--paper);color:var(--ink);padding:0}
  .code input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow);background:#fff}
  .vchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--teal);background:var(--teal-soft);border:1px solid var(--teal);padding:3px 9px;border-radius:20px}
  .readonly{background:var(--paper-3);color:var(--ink-soft);display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border:1px solid var(--line);border-radius:5px;font-family:var(--mono);font-size:12.5px}
  .strength{height:5px;border-radius:5px;background:var(--paper-3);overflow:hidden;margin-top:7px}
  .strength i{display:block;height:100%;width:0;background:var(--brick);transition:width .3s,background .3s}
  .enroll{border:1px solid var(--line);border-radius:8px;padding:15px;margin-bottom:15px;background:var(--paper)}
  .enroll .et{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;margin-bottom:10px}
  .enroll .et .ix{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-deep)}
  .qrrow{display:flex;gap:14px;align-items:center}
  .qr{width:104px;height:104px;flex:none;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px}
  .qr svg{width:100%;height:100%;display:block}
  .spinner{width:38px;height:38px;border:3px solid var(--paper-3);border-top-color:var(--brand);border-radius:50%;animation:spin .9s linear infinite;margin:0 auto 16px}
  @keyframes spin{to{transform:rotate(360deg)}}
  .vbig{width:58px;height:58px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;font-size:28px;margin:0 auto 16px}
  .center{text-align:center}
  .auth-demo{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:210;display:flex;gap:5px;align-items:center;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:30px;padding:6px 8px;box-shadow:var(--shadow-lg)}
  .auth-demo .lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-right:4px}
  .auth-demo button{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;border:none;background:transparent;color:var(--muted);padding:6px 10px;border-radius:20px;cursor:pointer;transition:.15s}
  .auth-demo button:hover{color:var(--ink)}
  .auth-demo button.on{background:var(--brand);color:#fff}
  .auth.hidden ~ .auth-demo{display:none}
  @media(max-width:860px){.auth{grid-template-columns:1fr}.auth-brand{display:none}}

/* Self-hosted fonts (CSP default-src 'self' blocks Google Fonts). If a woff2 is
   absent the stack falls back to system-ui / monospace — UI stays usable. */
@font-face{font-family:'Raleway';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/fonts/raleway.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono.woff2') format('woff2')}

/* ===== auth card (sign-in / accept / enroll) ===== */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:32px}
.auth-card .brandrow{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.auth-card .brandrow img{width:34px;height:34px}
.auth-card .lede{color:var(--muted);font-size:13px;margin:6px 0 22px}
.auth-card .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.auth-card .field label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.auth-card .field input{font-family:var(--sans);font-size:14px;padding:11px 12px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--paper);color:var(--ink)}
.auth-card .field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.auth-card .btn{font-family:var(--sans);font-weight:700;font-size:14px;padding:11px 16px;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;width:100%}
.auth-card .btn.primary{background:var(--brand);color:#fff}
.auth-card .btn.primary:hover{background:var(--brand-deep)}
.auth-card .btn.ghost{background:var(--paper-2);border-color:var(--line-2);color:var(--ink)}
.auth-card .btn+.btn{margin-top:10px}
.err{color:var(--brick);font-size:12.5px;margin:4px 0 12px;min-height:1em}
.note{color:var(--muted);font-size:12px;margin-top:14px}
.codes{font-family:var(--mono);font-size:13px;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin:12px 0}
.auth-card .qr{display:grid;place-items:center;margin:14px 0}
.auth-card .qr svg{width:188px;height:188px}
.auth-card .secret{font-family:var(--mono);font-size:12px;word-break:break-all;background:var(--paper-3);
  padding:8px 10px;border-radius:var(--r);color:var(--brand-deep)}
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{flex:1;text-align:center;padding:8px;border:1px solid var(--line-2);border-radius:var(--r);
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted)}
.tab.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-deep)}

/* signed-in stub: active-session rows (global; not auth-card scoped) */
.sessrow{font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--paper-3);
  border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;margin-bottom:6px;word-break:break-word}

/* Phase-2 chart sizing (charts are self-built SVG; classes from charts.js) */
.chart-svg{width:100%;height:180px;display:block}
.donut-svg{flex:none}
/* a small "reveal" affordance + region health dot states */
.reveal-btn{font-family:var(--mono);font-size:10px;color:var(--brand-deep);cursor:pointer;background:none;border:none;padding:0 0 0 6px}
.dot-fresh{background:var(--teal)}
.dot-stale{background:var(--brick)}
.refreshbar{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-family:var(--mono);font-size:11px;color:var(--muted)}