/* Self-hosted fonts — served same-origin, satisfying the strict CSP. */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("/fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); }

/* DM-Platform interface — light editorial system.
   Canvas: warm off-white. Ink: charcoal, never pure black. Structure comes
   from 1px hairlines, not shadows. Color is reserved for meaning. */

:root {
  /* v3 identity: deep navy ink, saturated sky + green, stronger hairlines */
  --canvas: #FBFBFA;
  --surface: #FFFFFF;
  --ink: #111111;
  --ink-soft: #2F3437;
  --muted: #787774;
  --hairline: #EAEAEA;
  --hairline-soft: rgba(0, 0, 0, 0.06);
  --accent: #111111;
  --pale-red-bg: #FDEBEC;  --pale-red-fg: #9F2F2D;
  --pale-blue-bg: #E1F3FE; --pale-blue-fg: #1F6C9F;
  --pale-green-bg: #EDF3EC;--pale-green-fg: #346538;
  --pale-yellow-bg: #FBF3DB;--pale-yellow-fg: #956400;
  --sans: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- shell ---- */
.topbar {
  display: flex; align-items: center; gap: 22px;
  padding: 0 28px; height: 60px;
  background: #0A2540; color: #F0F9FF;
  position: sticky; top: 0; z-index: 10;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, #38BDF8, #22C55E) 1;
}
.topbar img.logo { width: 30px; height: 30px; display: block; }
.brand { font-family: "Archivo", var(--sans); font-size: 17px; letter-spacing: .12em;
         color: #fff; font-weight: 800; }
.nav { display: flex; gap: 4px; }
.nav a {
  color: rgba(240,249,255,.66); text-decoration: none; font-size: 14px;
  padding: 7px 13px; border-radius: 8px; font-weight: 500;
}
.nav a:hover { color: #fff; background: rgba(56,189,248,.14); }
.nav a.active { color: #0A2540; background: #38BDF8; font-weight: 600; }
.topbar .spacer { flex: 1; }
.whoami { font-size: 13px; color: rgba(240,249,255,.6); }
.whoami b { color: #fff; font-weight: 500; }
.topbar .btn.ghost { border-color: rgba(240,249,255,.35); color: #F0F9FF; }
.topbar .btn.ghost:hover { background: rgba(240,249,255,.12); }

.page { max-width: 1080px; margin: 0 auto; padding: 40px 32px 80px; }
.page h1 {
  font-family: var(--serif); font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
  margin: 0 0 6px;
}
.page .sub { color: var(--muted); font-size: 14px; margin: 0 0 28px; }

/* ---- cards & tables ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 24px;
}
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stat .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
               color: var(--muted); margin-bottom: 6px; }
.stat .value { font-family: var(--mono); font-size: clamp(22px, 3.4vw, 30px); font-weight: 600;
               color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Wide tables scroll inside their card instead of pushing the page apart. */
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); font-weight: 500;
  padding: 10px 12px; border-bottom: 1px solid var(--hairline);
}
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--hairline-soft); vertical-align: top;
                overflow-wrap: anywhere; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.rowlink { cursor: pointer; }
table.data tr.rowlink:hover td { background: #FAFAF8; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 13px; }

/* ---- badges ---- */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 9999px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.badge.green  { background: var(--pale-green-bg);  color: var(--pale-green-fg); }
.badge.blue   { background: var(--pale-blue-bg);   color: var(--pale-blue-fg); }
.badge.yellow { background: var(--pale-yellow-bg); color: var(--pale-yellow-fg); }
.badge.red    { background: var(--pale-red-bg);    color: var(--pale-red-fg); }
.badge.gray   { background: #F1F0EE;               color: var(--muted); }

/* ---- forms & buttons ---- */
label.field { display: block; font-size: 13px; color: var(--ink-soft); margin: 14px 0 4px; font-weight: 500; }
input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%; padding: 9px 12px; font-size: 14px; font-family: var(--sans);
  border: 1px solid var(--hairline); border-radius: 6px;
  background: var(--surface); color: var(--ink);
}
input:focus, select:focus { outline: 2px solid #D7D5D1; outline-offset: 0; border-color: #C9C7C3; }
select { appearance: auto; }

.btn {
  display: inline-block; border: 0; border-radius: 6px; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: var(--sans);
  padding: 10px 18px; background: var(--accent); color: #FFFFFF;
  transition: background 120ms ease, transform 80ms ease;
}
.btn:hover { background: #333333; }
.btn:active { transform: scale(0.98); }
.btn:disabled { background: #C9C7C3; cursor: default; }
.btn.ghost {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--hairline);
}
.btn.ghost:hover { background: var(--canvas); }
.btn.small { padding: 6px 12px; font-size: 13px; }

.err { color: var(--pale-red-fg); font-size: 13px; min-height: 1.3em; margin-top: 10px; }
.ok-note { color: var(--pale-green-fg); font-size: 13px; }

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: flex-start;
              justify-content: center; padding-top: 14vh; }
.login-card { width: min(400px, 92vw); }
.login-card .brand { font-size: 22px; display: block; margin-bottom: 4px; }
.login-card .tag { color: var(--muted); font-size: 13px; margin-bottom: 22px; }

/* ---- import wizard ---- */
.steps { display: flex; gap: 8px; margin-bottom: 24px; font-size: 13px; }
.steps span { padding: 4px 12px; border-radius: 9999px; background: #F1F0EE; color: var(--muted); }
.steps span.on { background: var(--ink); color: #fff; }
.dropzone {
  border: 1px dashed #C9C7C3; border-radius: 12px; background: var(--surface);
  padding: 44px 24px; text-align: center; color: var(--muted); cursor: pointer;
}
.dropzone.drag { border-color: var(--ink); color: var(--ink); }
.dropzone b { color: var(--ink-soft); }
.maprow select { min-width: 190px; width: auto; }
.samples { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.fill { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.progressbar { height: 6px; border-radius: 3px; background: #F1F0EE; overflow: hidden; }
.progressbar div { height: 100%; background: var(--ink); transition: width 400ms ease; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } .topbar { padding: 0 16px; } .page { padding: 24px 16px 60px; } }

kbd {
  font-family: var(--mono); font-size: 12px; background: #F7F6F3;
  border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 6px;
}
.divider { border: 0; border-top: 1px solid var(--hairline); margin: 24px 0; }
.right { text-align: right; }
.mt { margin-top: 20px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---- quarantine raw-row rendering ---- */
.kvwrap { display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: 640px; }
.kv { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.kv b { color: var(--muted); font-weight: 500; font-family: var(--sans); }
.kv span { font-family: var(--mono); color: var(--ink-soft); }
td.rowno { white-space: nowrap; width: 1%; }
td.reasoncell { white-space: nowrap; width: 1%; }

/* ---- responsive shell ---- */
@media (max-width: 900px) {
  .kvwrap { max-width: none; }
}
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px 16px; }
  .whoami { display: none; }
  .page h1 { font-size: 23px; }
  .steps span { padding: 4px 9px; }
  table.data { font-size: 13px; }
  table.data th, table.data td { padding: 8px 8px; }
}

/* row-count picker + pager */
.rowsbar { display:flex; align-items:center; gap:10px; padding:12px 16px;
           border-top:1px solid var(--hairline); flex-wrap:wrap; }
.rowsbar select { width:auto; padding:5px 8px; font-size:13px; }
.colgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
           gap:6px 16px; margin-top:10px; }
.colgrid label { display:flex; align-items:center; gap:7px; font-size:13.5px; cursor:pointer; }

/* ══════════ login page v2 — Prime BPO network card ══════════
   Full-screen navy field with animated data routes; one white card.
   Palette: white, sky #38BDF8, navy #0A2540, green #22C55E. */
@keyframes lpRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lpWipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lpDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-64px,0); } }
@keyframes lpDataX { 0% { left: -22%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 104%; opacity: 0; } }
@keyframes lpDataY { 0% { top: -18%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 104%; opacity: 0; } }
@keyframes lpNode { 0%,100% { opacity: .18; transform: scale(1); } 50% { opacity: 1; transform: scale(1.6); } }
@keyframes lpGlow { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes lpCardIn { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lpShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); }
                     40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes lpPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.lp-root { position: relative; min-height: 100vh; min-height: 100dvh; background: #0A2540; color: #fff;
           display: flex; align-items: center; justify-content: center;
           padding: clamp(84px, 13vh, 130px) clamp(16px, 4vw, 48px) clamp(28px, 5vh, 72px);
           overflow: hidden; overflow-y: auto; font-family: "Inter", var(--sans); }
.lp-grid { position: absolute; inset: -80px; pointer-events: none;
  background-image: linear-gradient(to right, rgba(56,189,248,.07) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(56,189,248,.07) 1px, transparent 1px);
  background-size: 64px 64px; }
.lp-grid.g { background-image: linear-gradient(to right, rgba(34,197,94,.05) 1px, transparent 1px),
                               linear-gradient(to bottom, rgba(34,197,94,.05) 1px, transparent 1px);
             animation: lpDrift 9s linear infinite; }
.lp-net { position: absolute; inset: 0; pointer-events: none; }
.lp-h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(56,189,248,.10); }
.lp-h span { position: absolute; top: -1px; height: 3px; border-radius: 2px; animation: lpDataX linear infinite; }
.lp-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(56,189,248,.08); }
.lp-v span { position: absolute; left: -1px; width: 3px; border-radius: 2px; animation: lpDataY linear infinite; }
.lp-node { position: absolute; width: 5px; height: 5px; border-radius: 1px; animation: lpNode ease-in-out infinite; }
.lp-glow { position: absolute; width: min(70vw, 900px); height: min(70vw, 900px); border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.18), rgba(56,189,248,.04) 55%, transparent 72%);
  animation: lpGlow 7s ease-in-out infinite; pointer-events: none; }
.lp-top { position: absolute; top: clamp(18px, 3.6vh, 40px); left: clamp(18px, 4vw, 52px);
          right: clamp(18px, 4vw, 52px); display: flex; align-items: center;
          justify-content: space-between; gap: 20px; }
.lp-brandbar { display: flex; align-items: center; gap: 14px; animation: lpRise .6s cubic-bezier(.2,.8,.2,1) both; }
.lp-brandbar img { width: clamp(38px, 4.6vh, 48px); height: clamp(38px, 4.6vh, 48px); display: block; }
.lp-brand { font-family: "Archivo", var(--sans); font-weight: 800;
            font-size: clamp(19px, 2.6vh, 24px); letter-spacing: .16em; }
.lp-tag { font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.45);
          border-left: 1px solid rgba(255,255,255,.25); padding-left: 12px; }
.lp-secure { display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .16em;
             color: rgba(255,255,255,.6); animation: lpRise .6s cubic-bezier(.2,.8,.2,1) .1s both; }
.lp-secure i { width: 6px; height: 6px; background: #22C55E; flex: none; animation: lpPulse 1.8s ease-in-out infinite; }
.lp-card { position: relative; width: 100%; max-width: 470px; background: #fff; color: #0A2540;
           padding: clamp(24px, 4vh, 40px) clamp(20px, 3.4vw, 40px);
           box-shadow: 0 30px 80px rgba(3,15,28,.55);
           animation: lpCardIn .7s cubic-bezier(.2,.8,.2,1) both; }
.lp-rail { position: absolute; top: 0; left: 0; right: 0; height: 3px;
           background: linear-gradient(to right, #38BDF8, #22C55E);
           transform-origin: left; animation: lpWipe .7s cubic-bezier(.2,.8,.2,1) .25s both; }
.lp-eyebrow { font-size: 10px; letter-spacing: .2em; color: #0369A1;
              animation: lpRise .5s cubic-bezier(.2,.8,.2,1) .12s both; }
.lp-h2 { margin: 12px 0 0; font-family: "Archivo", var(--sans); font-size: clamp(25px, 3.4vh, 30px);
         font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
         animation: lpRise .5s cubic-bezier(.2,.8,.2,1) .18s both; }
.lp-note { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: rgba(10,37,64,.62);
           animation: lpRise .5s cubic-bezier(.2,.8,.2,1) .24s both; }
.lp-div { height: 2px; background: rgba(10,37,64,.22); margin: 22px 0 18px; transform-origin: left;
          animation: lpWipe .6s cubic-bezier(.2,.8,.2,1) .3s both; }
.lp-field { margin-top: 15px; animation: lpRise .5s cubic-bezier(.2,.8,.2,1) both; }
.lp-field label { display: block; font-size: 12px; margin-bottom: 5px; color: rgba(10,37,64,.7); }
.lp-input { width: 100%; min-height: 46px; padding: 8px 12px; font: inherit; font-size: 15px;
            color: #0A2540; caret-color: #38BDF8; background: #F4F8FB;
            border: 1px solid rgba(10,37,64,.25); border-radius: 8px; }
.lp-input:hover { border-color: rgba(10,37,64,.45); }
.lp-input:focus { outline: 2px solid #38BDF8; outline-offset: 0; border-color: #38BDF8; }
.lp-pwwrap { position: relative; display: flex; }
.lp-reveal { position: absolute; right: 4px; top: 4px; bottom: 4px; border: 0; background: transparent;
             color: #0369A1; font-size: 11px; letter-spacing: .1em; cursor: pointer; padding: 0 10px;
             font-family: var(--sans); font-weight: 600; border-radius: 6px; }
.lp-reveal:hover { background: rgba(56,189,248,.12); }
.lp-error { background: #0A2540; color: #fff; padding: 12px 14px; margin-bottom: 16px;
            display: flex; gap: 10px; align-items: flex-start; border-left: 3px solid #38BDF8;
            animation: lpShake .45s ease-in-out both; }
.lp-error b { font-size: 11px; letter-spacing: .12em; display: block; font-weight: 600; }
.lp-error span { font-size: 12px; margin-top: 4px; display: block; color: rgba(255,255,255,.75); }
.lp-submit { display: flex; align-items: center; min-height: 50px; margin-top: 22px; width: 100%;
             font-family: "Archivo", var(--sans); font-weight: 800; font-size: 14px; letter-spacing: .08em;
             color: #fff; background: #0A2540; border: 0; border-radius: 8px; cursor: pointer;
             padding: 0 18px; animation: lpRise .5s cubic-bezier(.2,.8,.2,1) .5s both; }
.lp-submit:hover { background: #123C63; }
.lp-submit:disabled { background: #64748B; cursor: default; }
.lp-submit .arrow { margin-left: auto; }
.lp-progress { height: 3px; background: #DBE4EC; position: relative; overflow: hidden; }
.lp-progress div { position: absolute; inset: 0 auto 0 0; background: #38BDF8;
                   transition: width .35s cubic-bezier(.2,.8,.2,1); width: 0; }
.lp-status { font-size: 11px; letter-spacing: .12em; color: rgba(10,37,64,.55);
             min-height: 15px; margin-top: 9px; font-family: var(--mono); }
.lp-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
           font-size: 11px; color: rgba(10,37,64,.5); margin-top: 22px; padding-top: 13px;
           border-top: 2px solid rgba(10,37,64,.16); }
.lp-clock { font-family: var(--mono); }
@media (max-width: 560px) {
  .lp-tag, .lp-secure { display: none; }
  .lp-root { padding-top: 76px; }
}
@media (max-height: 640px) {
  .lp-root { align-items: flex-start; }
}

/* ---- hero stat cards (dashboard) ---- */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.hero .card { border-top: 3px solid #38BDF8; }
.hero .card.g { border-top-color: #22C55E; }
.hero .card.n { border-top-color: #0A2540; }
.hero .value { font-family: "Archivo", var(--sans); font-weight: 800;
               font-size: clamp(26px, 3.6vw, 34px); color: var(--ink); line-height: 1.05; }

/* ---- process log panel ---- */
.logpanel { background: #0A2540; color: #C8E8FA; border-radius: 12px;
            font-family: var(--mono); font-size: 12px; line-height: 1.7;
            padding: 16px 18px; max-height: 320px; overflow-y: auto; }
.logpanel div { white-space: pre-wrap; word-break: break-word; }
.logpanel .cap { color: #7DD3FC; letter-spacing: .14em; font-size: 10px;
                 font-family: var(--sans); margin-bottom: 8px; }

/* ---- big progress bars ---- */
.pbar { height: 10px; border-radius: 5px; background: #E8EEF3; overflow: hidden; }
.pbar div { height: 100%; background: linear-gradient(to right, #38BDF8, #22C55E);
            transition: width 500ms cubic-bezier(.2,.8,.2,1); }
.pbar.small { height: 6px; }
.pmeta { display: flex; justify-content: space-between; font-size: 12px;
         color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ══════════ v3 additions ══════════ */
.brandsub { font-size: 10px; letter-spacing: .22em; color: rgba(240,249,255,.55);
            border-left: 1px solid rgba(240,249,255,.3); padding-left: 12px; }
.topbar { height: 64px; }
.topbar img.logo { width: 34px; height: 34px; }
h1 { font-family: "Archivo", var(--sans); font-weight: 800; letter-spacing: -.01em; }

.tabs { display: flex; gap: 6px; margin: 4px 0 0; }
.tab { border: 1px solid var(--hairline); background: var(--surface); color: var(--muted);
       padding: 8px 16px; border-radius: 999px; font: inherit; font-size: 13.5px;
       font-weight: 600; cursor: pointer; }
.tab:hover { color: var(--ink); border-color: #94A3B8; }
.tab.active { background: #0B1F3A; border-color: #0B1F3A; color: #fff; }

.overlay { position: fixed; inset: 0; background: rgba(11,31,58,.55); z-index: 60;
           display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
         box-shadow: 0 30px 80px rgba(3,15,28,.4); }

.mfa-secret { font-family: var(--mono); font-size: 17px; letter-spacing: .12em;
              background: #0B1F3A; color: #7DD3FC; padding: 12px 14px; border-radius: 8px;
              word-break: break-all; margin-top: 4px; user-select: all; }

.badge.green { background: #DCFCE7; color: #14532D; border: 1px solid #16A34A; }
.badge.red { background: #FEE2E2; color: #7F1D1D; border: 1px solid #DC2626; }
.badge.yellow { background: #FEF9C3; color: #713F12; border: 1px solid #CA8A04; }
.badge.blue { background: #E0F2FE; color: #0C4A6E; border: 1px solid #0284C7; }
.badge.gray { background: #E2E8F0; color: #1E293B; border: 1px solid #94A3B8; }

.btn { background: #0B1F3A; }
.btn:hover { background: #162E54; }
.btn.ghost { background: transparent; border: 1px solid #64748B; color: #0B1F3A; }
.hero .card { border: 1px solid var(--hairline); }

.mfa-qr { background: #fff; border: 2px solid #0B1F3A; border-radius: 10px;
          padding: 10px; width: 190px; height: 190px; margin-top: 4px;
          display: flex; align-items: center; justify-content: center; }
.mfa-qr svg { width: 100%; height: 100%; display: block; }

/* ══════════ table system v2: structured, no overlap, clean ══════════ */
.tablewrap { overflow-x: auto; border-radius: inherit; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; }
table.data th, table.data td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px; line-height: 1.45;
}
table.data th {
  position: sticky; top: 0; z-index: 2;
  background: #F1F5F9; color: #334155;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 2px solid #CBD5E1;
}
table.data th:first-child, table.data td:first-child { padding-left: 18px; }
table.data th:last-child, table.data td:last-child { padding-right: 18px; }
table.data tbody tr:nth-child(even) { background: #F8FAFC; }
table.data tbody tr:hover { background: #EFF6FF; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data td.mono { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
table.data td .badge { white-space: nowrap; }
td.when { white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--muted); }
/* long values: clipped with the full text on hover, never spilling */
.clip { display: inline-block; max-width: 300px; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.clip.w-s { max-width: 160px; } .clip.w-m { max-width: 240px; } .clip.w-l { max-width: 420px; }
.rowsbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           padding: 12px 18px; border-top: 1px solid var(--hairline);
           background: #F8FAFC; border-radius: 0 0 12px 12px; }

/* ════════════════════ v4 — sidebar shell + clean system ════════════════════ */
:root {
  --navy: #0B1F3A; --navy-3: #1A3B69; --sky: #0EA5E9; --sky-soft: #E0F2FE;
  --green: #16A34A; --green-soft: #DCFCE7; --amber-soft: #FEF3C7; --red-soft: #FEE2E2;
  --canvas: #F3F6FA; --hairline: #DDE5EE; --hair-2: #C6D2E0;
  --rail: 248px; --rail-min: 68px;
  --shadow: 0 1px 2px rgba(11,31,58,.05), 0 4px 16px rgba(11,31,58,.05);
}
body { background: var(--canvas); }
.app { display: flex; min-height: 100vh; }
.rail { width: var(--rail); flex: none; background: var(--navy); color: #E7F3FC;
        display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
        transition: width .22s cubic-bezier(.2,.8,.2,1); overflow: hidden; z-index: 30; }
.app.min .rail { width: var(--rail-min); }
.rail-head { display: flex; align-items: center; gap: 12px; padding: 16px 15px;
             border-bottom: 1px solid rgba(231,243,252,.14); min-height: 66px; }
.rail-head img { width: 34px; height: 34px; flex: none; }
.rbrand { min-width: 0; }
.rbrand b { display: block; font: 800 15px/1.15 "Archivo", var(--sans); letter-spacing: .1em;
            white-space: nowrap; color: #fff; }
.rbrand span { display: block; font-size: 10px; letter-spacing: .2em;
               color: rgba(231,243,252,.55); white-space: nowrap; }
.app.min .rbrand { display: none; }
.railnav { flex: 1; padding: 10px 10px; overflow-y: auto; overflow-x: hidden; }
.ngroup { font-size: 10px; letter-spacing: .18em; color: rgba(231,243,252,.4);
          padding: 13px 10px 5px; white-space: nowrap; }
.app.min .ngroup { visibility: hidden; height: 8px; padding: 6px 0 0; }
.railnav a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 2px 0;
             color: rgba(231,243,252,.78); text-decoration: none; border-radius: 9px;
             font-weight: 500; font-size: 14px; white-space: nowrap; }
.railnav a svg { width: 19px; height: 19px; flex: none; }
.railnav a:hover { background: rgba(14,165,233,.14); color: #fff; }
.railnav a.on { background: var(--sky); color: #062338; font-weight: 700; }
.app.min .railnav a { justify-content: center; padding: 11px 0; }
.app.min .railnav a .lbl { display: none; }
.rail-foot { padding: 11px 14px; border-top: 1px solid rgba(231,243,252,.14);
             font-size: 12px; color: rgba(231,243,252,.6); white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.app.min .rail-foot { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 60px;
          background: #fff; color: var(--ink); border-bottom: 1px solid var(--hairline);
          border-image: none; position: sticky; top: 0; z-index: 20; }
.burger { width: 38px; height: 38px; border: 1px solid var(--hair-2); background: #fff;
          border-radius: 9px; cursor: pointer; display: grid; place-items: center; flex: none; }
.burger:hover { background: var(--sky-soft); border-color: var(--sky); }
.burger svg { width: 18px; height: 18px; color: var(--navy); }
.crumb { font: 800 17px/1 "Archivo", var(--sans); color: var(--ink); white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis; }
.livechip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
            color: var(--muted); border: 1px solid var(--hairline); border-radius: 999px;
            padding: 6px 12px; background: #fff; white-space: nowrap; }
.livechip i { width: 7px; height: 7px; border-radius: 50%; background: var(--green);
              animation: lpPulse 1.8s ease-in-out infinite; }
.content { padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }
.topbar .btn.ghost { border-color: var(--hair-2); color: var(--navy); }
.topbar .btn.ghost:hover { background: var(--sky-soft); }
.whoami { display: none; }

h1 { font-family: "Archivo", var(--sans); font-weight: 800;
     font-size: clamp(21px, 2.4vw, 26px); letter-spacing: -.01em; }
.card { border-radius: 12px; border: 1px solid var(--hairline); box-shadow: var(--shadow); }
.btn { border-radius: 9px; background: var(--navy); }
.btn:hover { background: var(--navy-3); }
.btn.ghost { background: #fff; border: 1px solid var(--hair-2); color: var(--navy); }
.btn.ghost:hover { border-color: var(--sky); color: var(--sky); background: #fff; }
.badge { border: 0 !important; border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.badge.green { background: var(--green-soft); color: #14532D; }
.badge.blue  { background: var(--sky-soft); color: #075985; }
.badge.yellow{ background: var(--amber-soft); color: #78350F; }
.badge.red   { background: var(--red-soft); color: #7F1D1D; }
.badge.gray  { background: #EAEFF5; color: #334155; }
table.data th { background: #F6F9FC; color: #46586F; font-size: 10.5px;
                border-bottom: 2px solid var(--hair-2); }
table.data tbody tr:nth-child(even) { background: transparent; }
table.data tbody tr:hover { background: var(--sky-soft); }
table.data td.fit, table.data th.fit { width: 1%; white-space: nowrap; }
table.data td.num, table.data th.num { width: 1%; }
table.data td.when { width: 1%; }
.pbar > div { background: linear-gradient(90deg, var(--sky), var(--green)); border-radius: 6px; }
.logpanel { border-radius: 10px; }
.hero { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.hero .card { border-top-width: 3px; }
.tab.active { background: var(--navy); border-color: var(--navy); }

/* ── running-task rows on the dashboard ── */
.taskrow { display: flex; align-items: center; gap: 14px; padding: 10px 0;
           border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.taskrow:last-child { border-bottom: 0; }
.taskrow .tname { font-weight: 700; min-width: 120px; }
.taskrow .tbar { flex: 1 1 220px; min-width: 160px; }
.taskrow .tmeta { font-size: 12.5px; color: var(--muted); white-space: nowrap;
                  font-variant-numeric: tabular-nums; }

/* ── responsive: nothing hides, everything reflows ── */
@media (max-width: 1100px) { .content { padding: 18px; } }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .cardgrid, .hero { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .livechip { display: none; }
}
@media (max-width: 780px) {
  .rail { position: fixed; left: 0; height: 100vh; box-shadow: 0 0 60px rgba(3,15,28,.5); }
  .app.min .rail { width: 0; }
  .content { padding: 14px 12px; }
  .topbar { padding: 0 12px; }
  .modal { max-width: 96vw; }
}

/* ══════════ v4.1 — scroll architecture + rail + KPI fixes ══════════ */
html, body { height: 100%; overflow: hidden; }          /* the page never scrolls… */
.app { height: 100vh; min-height: 0; }
.rail { position: relative; height: 100vh; top: auto; }
.main { height: 100vh; overflow-y: auto; overflow-x: hidden; }   /* …the main pane does */
.topbar { position: sticky; top: 0; }
.railnav { scrollbar-width: none; -ms-overflow-style: none; }     /* scrollable, no bar */
.railnav::-webkit-scrollbar { display: none; width: 0; height: 0; }
.railnav a { padding: 8px 10px; margin: 1px 0; }
.ngroup { padding: 11px 10px 4px; }
.rail-head { min-height: 62px; padding: 13px 15px; }
/* KPI cards: numbers never overflow their card */
.hero { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.hero .stat .value, .kpi .val {
  font-size: clamp(20px, 1.8vw, 27px); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.15;
}
.hero .stat .label, .kpi .lbl { white-space: normal; }
.card { min-width: 0; }
.content > * { min-width: 0; }
/* login page keeps its own full-page scroll */

/* ══════════ login v3 — split layout, animated map (lg-* = its own cascade) ══════════ */
.lg-root { position: fixed; inset: 0; background: #071A33; color: #E6F0FA; overflow: hidden; }
.lg-grid { display: grid; grid-template-columns: 1.1fr 1fr; width: 100%; height: 100%;
           max-width: 1440px; margin: 0 auto; }
.lg-left { position: relative; padding: clamp(18px, 3vw, 48px); display: flex; flex-direction: column;
           gap: clamp(10px, 1.6vh, 18px); overflow: hidden; min-height: 0; background:
           radial-gradient(1200px 600px at 20% 110%, rgba(37,99,235,.18), transparent 60%), #071A33; }
.lg-lines { position: absolute; inset: 0; pointer-events: none; opacity: .35;
            background-image: linear-gradient(rgba(56,189,248,.08) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(56,189,248,.08) 1px, transparent 1px);
            background-size: 48px 48px; }
.lg-brand { display: flex; align-items: center; gap: 14px; position: relative; flex: none; }
.lg-brand img { width: clamp(40px, 5vh, 56px); height: clamp(40px, 5vh, 56px); }
.lg-brand-name { font: 800 clamp(20px, 3vh, 26px)/1 "Archivo", var(--sans); letter-spacing: .06em; color: #fff; }
.lg-brand-name span { color: #22C55E; }
.lg-brand-sub { font-size: 10.5px; letter-spacing: .22em; color: #9FB8D3; margin-top: 5px; }
.lg-headline { font: 800 clamp(24px, 4.6vh, 44px)/1.12 "Archivo", var(--sans); color: #fff;
               position: relative; flex: none; }
.lg-headline .b { color: #38BDF8; } .lg-headline .g { color: #22C55E; }
.lg-lead { color: #B7C9DD; max-width: 44ch; font-size: clamp(13px, 1.9vh, 15px); margin: 0; position: relative; flex: none; }
.lg-stage { position: relative; flex: 1 1 auto; min-height: 120px; }
.lg-mapwrap { position: absolute; inset: 0; }
.lp-map { width: 100%; height: 100%; }
.lp-route { fill: none; stroke: #38BDF8; stroke-width: 1.6; stroke-dasharray: 6 8; opacity: .8;
            animation: lpDash 6s linear infinite; }
@keyframes lpDash { to { stroke-dashoffset: -140; } }
.lp-pulse { animation: lpPulseR 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes lpPulseR { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.lg-tile { position: absolute; right: 6%; bottom: 4%; width: clamp(140px, 22vh, 200px); padding: 12px;
           background: rgba(15,35,64,.92); border: 1px solid rgba(56,189,248,.25); border-radius: 12px;
           box-shadow: 0 30px 60px rgba(0,0,0,.45); transform: rotate(-8deg);
           animation: lpFloat 6s ease-in-out infinite; }
@keyframes lpFloat { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-8px); } }
.lp-donut { animation: lpSpin 8s linear infinite; transform-origin: 30px 34px; }
@keyframes lpSpin { to { transform: rotate(270deg); } }
.lp-bars rect { transform-origin: bottom; animation: lpGrow 3s ease-in-out infinite alternate; }
.lp-bars rect:nth-child(2) { animation-delay: .4s; } .lp-bars rect:nth-child(3) { animation-delay: .8s; } .lp-bars rect:nth-child(4) { animation-delay: 1.2s; }
@keyframes lpGrow { from { transform: scaleY(.6); } to { transform: scaleY(1); } }
.lg-secure { display: flex; align-items: center; gap: 12px; padding: clamp(8px, 1.4vh, 14px) 16px; width: fit-content; flex: none;
             background: rgba(15,35,64,.8); border: 1px solid rgba(56,189,248,.2); border-radius: 12px; position: relative; }
.lg-secure svg { width: 30px; height: 30px; }
.lg-secure b { display: block; color: #22C55E; font-size: 13.5px; }
.lg-secure span { font-size: 12.5px; color: #B7C9DD; }

.lg-right { display: flex; align-items: center; justify-content: center; padding: clamp(12px, 2.5vh, 40px);
            overflow-y: auto; min-height: 0; }
.lg-right .lp-card { position: relative; width: 100%; max-width: 520px; background: #fff; color: var(--ink);
           border-radius: 16px; padding: clamp(16px, 2.6vh, 34px) clamp(18px, 3vw, 40px);
           box-shadow: 0 40px 100px rgba(0,0,0,.45); display: flex; flex-direction: column;
           gap: clamp(6px, 1.3vh, 12px); margin: auto 0; max-height: none; overflow: visible; }
.lp-avatar { width: clamp(48px, 8vh, 68px); height: clamp(48px, 8vh, 68px); border-radius: 50%; background: #EEF4FF;
             margin: 0 auto 2px; display: grid; place-items: center; }
.lp-avatar svg { width: 60%; height: 60%; }
.lg-right .lp-eyebrow { text-align: center; }
.lg-right .lp-h2 { text-align: center; font-size: clamp(20px, 3.2vh, 28px); margin: 0; }
.lg-right .lp-note { text-align: center; margin: 0 auto 4px; max-width: 42ch; font-size: clamp(12px, 1.7vh, 14px); }
.lg-right .lp-field label { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.lp-lab-x { font-weight: 400; color: var(--muted); font-size: 12px; }
.lp-inbox { position: relative; display: flex; align-items: center; }
.lp-ic { position: absolute; left: 12px; width: 18px; height: 18px; color: #7A8CA5; pointer-events: none; }
.lp-ic svg { width: 18px; height: 18px; }
.lp-inbox .lp-input { padding: clamp(9px, 1.5vh, 13px) 12px clamp(9px, 1.5vh, 13px) 40px; width: 100%; background: #fff; border: 1px solid #CBD5E1; }
.lp-inbox .lp-input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.lp-inbox .lp-reveal { right: 12px; color: #2563EB; }
.lp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.lp-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lp-link { color: #2563EB; text-decoration: none; font-weight: 600; }
.lg-right .lp-submit { padding: clamp(11px, 1.8vh, 15px) 18px; }
.lp-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.lp-or::before, .lp-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.lp-sso { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
          padding: clamp(9px, 1.5vh, 12px); border: 1.5px solid #2563EB; color: #2563EB; background: #fff; border-radius: 9px;
          font: 700 14px var(--sans); cursor: pointer; }
.lp-sso svg { width: 20px; height: 20px; }
.lp-sso:hover { background: #EEF4FF; }
.lp-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap;
           border-top: 1px solid var(--hairline); padding-top: 10px; font-size: 12px; color: var(--muted); }
.lp-clock { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* short viewports: compact the card rather than clip it */
@media (max-height: 820px) { .lp-avatar, .lg-right .lp-note { display: none; } }
@media (max-height: 700px) { .lp-or, .lp-sso { display: none; } .lg-lead { display: none; } }
/* narrow viewports: stack, and let the whole page scroll */
@media (max-width: 980px) {
  .lg-root { position: relative; height: auto; min-height: 100vh; overflow-y: auto; }
  .lg-grid { grid-template-columns: 1fr; height: auto; }
  .lg-left { padding-bottom: 8px; }
  .lg-stage { min-height: 200px; flex: none; }
  .lg-tile { display: none; }
  .lg-right { overflow: visible; }
  .lp-avatar, .lg-right .lp-note, .lp-or, .lp-sso, .lg-lead { display: block; }
  .lp-or { display: flex; } .lp-sso { display: flex; }
}
@media (max-width: 600px) {
  .lg-stage, .lg-secure, .lg-lead { display: none; }
  .lg-headline { font-size: 26px; }
  .lg-right { padding: 12px; }
  .lg-right .lp-card { padding: 18px 16px; border-radius: 12px; }
}
/* ══════════ v4.2 — inputs, search, checks, charts, inline edit ══════════ */
.inp { font: inherit; font-size: 13.5px; padding: 9px 12px; border: 1px solid var(--hair-2);
       border-radius: 8px; background: #fff; color: var(--ink); min-width: 0; }
.inp:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.inp.search { width: 100%; max-width: 440px; padding-left: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'><circle cx='10' cy='10' r='6'/><path d='m20 20-5.5-5.5'/></svg>");
  background-repeat: no-repeat; background-position: 10px center; background-size: 16px; }
.searchbar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.tabs { margin-bottom: 14px; flex-wrap: wrap; }
.card .lp-input { max-width: 100%; }
.checks { display: flex; flex-direction: column; gap: 6px; }
.checkrow { display: flex; align-items: center; gap: 10px; font-size: 13px; min-height: 26px; }
.checkrow .badge { min-width: 46px; justify-content: center; }
.cardgrid .card.rowlink { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.cardgrid .card.rowlink:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(11,31,58,.12); }
.cardgrid .card.picked { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(14,165,233,.18); }
td.editable { cursor: text; }
td.editable:hover { background: #FFFBEB; box-shadow: inset 0 0 0 1px #F59E0B; }
td.editable.saved { background: #DCFCE7; transition: background 1s; }
.inp.cell { width: 100%; min-width: 90px; padding: 5px 8px; font-size: 13px; }
.cardtitle { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
.donutwrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donutbox { position: relative; width: 160px; height: 160px; flex: none; }
.donut { width: 160px; height: 160px; }
.donutmid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
            justify-content: center; pointer-events: none; }
.donutmid b { font: 800 22px/1 "Archivo", var(--sans); }
.donutmid span { font-size: 11px; color: var(--muted); margin-top: 3px; }
.legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.legend.row { flex-direction: row; flex-wrap: wrap; gap: 16px; margin-bottom: 6px; }
.legrow { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legrow i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.leglbl { color: var(--ink); }
.legval { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linechart { width: 100%; height: auto; }
.linechart .ax { font-size: 10px; fill: #64748B; }
.linewrap { width: 100%; }

/* ══════════ v4.3 — light sidebar + reference dashboard ══════════ */
.rail { background: #FFFFFF; color: var(--ink); border-right: 1px solid var(--hairline); }
.rail-head { border-bottom: 0; padding: 18px 16px 10px; }
.rbrand b { color: var(--ink); font-size: 16px; }
.rbrand b::after { content: ""; }
.rbrand span { color: #5B6B82; font-weight: 600; letter-spacing: .16em; }
.ngroup { color: #64748B; font-weight: 700; letter-spacing: .14em; padding: 16px 12px 6px; }
.railnav a { color: #24354F; font-weight: 600; padding: 10px 12px; margin: 2px 0; }
.railnav a svg { color: #5B6B82; }
.railnav a:hover { background: #EEF4FF; color: var(--ink); }
.railnav a:hover svg { color: var(--navy); }
.railnav a.on { background: #0B1F3A; color: #fff; }
.railnav a.on svg { color: #fff; }
.rail-foot { display: block; border-top: 0; padding: 12px; }
.app.min .rail-foot { display: none; }
.userblock { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--hairline);
             border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.uavatar { width: 36px; height: 36px; border-radius: 50%; background: #EEF4FF; color: #2563EB; display: grid; place-items: center; flex: none; }
.uavatar svg { width: 20px; height: 20px; }
.uinfo { min-width: 0; flex: 1; }
.uinfo b { display: block; font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uinfo span { display: block; font-size: 11.5px; color: #5B6B82; }
.uchev { color: #64748B; width: 16px; height: 16px; flex: none; }
.uchev svg { width: 16px; height: 16px; }
.topbar { height: 64px; }
.crumb { font-size: 20px; }
.livechip { border-color: var(--hairline); color: #2E3F57; padding: 8px 14px; font-weight: 600; }
.signout { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 9px 14px; }
.signout svg { width: 16px; height: 16px; }
.hero.kpi { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.hero.kpi .card.stat { display: flex; gap: 14px; align-items: flex-start; padding: 18px;
                       border-top-width: 1px; border-bottom: 3px solid #2563EB; }
.hero.kpi .card.stat.g { border-bottom-color: #22C55E; }
.hero.kpi .card.stat.n { border-bottom-color: #0B1F3A; }
.hero.kpi .card.stat.p { border-bottom-color: #7C3AED; }
.kico { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
        background: #EEF4FF; color: #2563EB; }
.kico svg { width: 24px; height: 24px; }
.kico.g { background: #DCFCE7; color: #16A34A; }
.kico.n { background: #E0F2FE; color: #0369A1; }
.kico.p { background: #EDE9FE; color: #6D28D9; }
.kbody { min-width: 0; }
.hero.kpi .label { font-size: 11px; letter-spacing: .1em; color: #5B6B82; font-weight: 700; }
.hero.kpi .value { font-size: clamp(22px, 1.9vw, 28px); margin: 4px 0 2px; }
.hero.kpi .hint { font-size: 12px; color: #5B6B82; }
.bottomrow { align-items: start; }
.bottomrow .card { height: 100%; }
@media (max-width: 1180px) { .bottomrow { grid-template-columns: 1fr; } }

/* charts row: two cards side by side, stacking on narrow screens */
.chartsrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .chartsrow { grid-template-columns: 1fr; } }
.bottomrow { display: block; }

/* ══════════ v4.4 — dark reference header, aligned with the rail head ══════════ */
:root { --tb-h: 76px; }
.topbar { height: var(--tb-h); background: linear-gradient(180deg, #0B1F3A, #0A1B33); color: #E6F0FA;
          border-bottom: 1px solid rgba(231,243,252,.08); gap: 12px; padding: 0 22px; }
.burger { width: 44px; height: 44px; border-radius: 12px; border: 0; color: #fff;
          background: linear-gradient(135deg, #2563EB, #1D4ED8); box-shadow: 0 6px 18px rgba(37,99,235,.35); }
.burger:hover { filter: brightness(1.1); background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.burger svg { color: #fff; width: 20px; height: 20px; }
.tb-title { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: 6px; }
.tb-ico { width: 30px; height: 30px; color: #38BDF8; flex: none; }
.tb-ico svg { width: 30px; height: 30px; }
.topbar .crumb { color: #fff; font-size: 24px; }
.tb-searchwrap { position: relative; flex: 0 1 460px; min-width: 160px; margin-left: 18px; }
.tb-searchwrap svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #7A8CA5; pointer-events: none; }
.tb-search { width: 100%; height: 46px; padding: 0 14px 0 44px; border-radius: 12px; border: 1px solid rgba(231,243,252,.12);
             background: rgba(231,243,252,.08); color: #fff; font: inherit; font-size: 14px; }
.tb-search::placeholder { color: #8FA3BB; }
.tb-search:focus { outline: none; border-color: #38BDF8; background: rgba(231,243,252,.12); box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
.tb-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; white-space: nowrap;
           background: rgba(231,243,252,.06); border: 1px solid rgba(231,243,252,.1); color: #C9D8EA; font-size: 13.5px; font-weight: 700;
           text-decoration: none; }
.tb-chip.live { color: #22C55E; background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); }
.tb-chip.live i { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; animation: lpPulse 1.8s ease-in-out infinite; }
.tb-chip.dialers svg { width: 17px; height: 17px; color: #8FA3BB; }
.tb-chip.dialers.ok { color: #7DD3FC; border-color: rgba(56,189,248,.3); background: rgba(56,189,248,.08); }
.tb-chip.dialers.ok svg { color: #38BDF8; }
.tb-chip.dialers:hover { filter: brightness(1.15); }
.tb-sep { width: 1px; height: 30px; background: rgba(231,243,252,.12); margin: 0 2px; }
.tb-icon { position: relative; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(231,243,252,.12);
           background: rgba(231,243,252,.06); color: #E6F0FA; cursor: pointer; display: grid; place-items: center; flex: none; }
.tb-icon:hover { background: rgba(231,243,252,.12); }
.tb-icon svg { width: 20px; height: 20px; }
.tb-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
            background: #2563EB; color: #fff; font: 700 11px/20px var(--sans); display: none; place-items: center; border: 2px solid #0B1F3A; }
.tb-user { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px; border-radius: 12px; min-width: 0; }
.tb-user:hover { background: rgba(231,243,252,.06); }
.tb-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #2563EB, #38BDF8); color: #fff;
             display: grid; place-items: center; font: 800 14px var(--sans); flex: none; }
.tb-uinfo { display: flex; flex-direction: column; min-width: 0; }
.tb-uinfo b { color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.tb-uinfo span { color: #8FA3BB; font-size: 12.5px; white-space: nowrap; }
.tb-chev { color: #8FA3BB; width: 16px; height: 16px; }
.tb-chev svg { width: 16px; height: 16px; }
.tb-signout { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; border: 0;
              background: #060F1F; color: #fff; font: 700 14px var(--sans); cursor: pointer; white-space: nowrap; }
.tb-signout:hover { background: #10203A; }
.tb-signout svg { width: 18px; height: 18px; }
.helprow { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.helprow:last-child { border-bottom: 0; }

/* the rail head lines up with the header: same height, bigger logo */
.rail-head { min-height: var(--tb-h); height: var(--tb-h); padding: 0 16px; border-bottom: 1px solid var(--hairline); gap: 12px; }
.rail-head img { width: 46px; height: 46px; }
.rbrand b { font-size: 17px; }
.rbrand span { font-size: 10.5px; }
.app.min .rail-head { justify-content: center; padding: 0; }
.rail-foot { padding: 10px 14px; text-align: center; }

/* responsive header */
@media (max-width: 1280px) { .tb-searchwrap { flex-basis: 300px; } .tb-uinfo { display: none; } .tb-chev { display: none; } }
@media (max-width: 1100px) { .tb-chip.live { display: none; } .tb-signout span { display: none; } .tb-signout { padding: 0 12px; } }
@media (max-width: 900px) { .tb-searchwrap { display: none; } .tb-sep { display: none; } .tb-icon.help { display: none; } .livechip { display: none; } }
@media (max-width: 780px) { .tb-chip.dialers .l { display: none; } .topbar { padding: 0 10px; gap: 8px; } .topbar .crumb { font-size: 18px; } .tb-ico { display: none; } }

/* v4.5 — taller header, matched exactly to the brand head; no search/profile */
:root { --tb-h: 88px; }
.topbar, .rail-head { height: var(--tb-h); min-height: var(--tb-h); }
.topbar { position: sticky; top: 0; }
.topbar .crumb { overflow: visible; text-overflow: clip; white-space: nowrap; font-size: 24px; }
.tb-title { flex: none; }
.rail-head img { width: 52px; height: 52px; }
.rbrand b { font-size: 18px; }
.tb-searchwrap, .tb-user { display: none; }

/* v4.6 — the header spans the full width: the brand head is the same navy band */
.rail-head { background: linear-gradient(180deg, #0B1F3A, #0A1B33); border-bottom: 1px solid rgba(231,243,252,.08);
             margin-right: -1px; /* covers the rail's right border so the band is continuous */ }
.rbrand b { color: #fff; }
.rbrand span { color: #8FA3BB; }
.rail-head img { filter: drop-shadow(0 0 0 transparent); }
.app.min .rail-head { padding: 0; }

/* ══════════ v4.7 — ONE header bar across the full width; brand inside it ══════════ */
.app { display: flex; flex-direction: column; height: 100vh; }
.topbar { position: relative; top: auto; flex: none; width: 100%; height: var(--tb-h); padding: 0 22px 0 0; gap: 12px; }
.hd-brand { display: flex; align-items: center; gap: 12px; width: var(--rail); flex: none; height: 100%;
            padding: 0 16px; border-right: 1px solid rgba(231,243,252,.1); margin-right: 14px;
            transition: width .22s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.hd-brand img { width: 52px; height: 52px; flex: none; }
.app.min .hd-brand { width: var(--rail-min); padding: 0; justify-content: center; }
.app.min .hd-brand .rbrand { display: none; }
.app-body { display: flex; flex: 1; min-height: 0; }
.rail { position: relative; height: 100%; top: auto; }
.railnav { padding-top: 14px; }
.main { height: 100%; }
.rail-head { display: none; }
@media (max-width: 780px) {
  .rail { position: fixed; top: var(--tb-h); left: 0; height: calc(100vh - var(--tb-h)); }
  .hd-brand { width: var(--rail-min); padding: 0; justify-content: center; margin-right: 6px; }
  .hd-brand .rbrand { display: none; }
}

.dspick { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto;
          border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.dsopt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }

/* logo shown as-is (white artwork) on a rounded white tile */
.hd-brand img { border-radius: 10px; background: #fff; padding: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.lg-brand img { width: 64px; height: 64px; border-radius: 12px; background: #fff; padding: 4px; }

/* logo exactly as supplied: no tile, no border, no shadow */
.hd-brand img, .lg-brand img { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
.hd-brand img { width: 56px; height: 56px; }

.storagegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 18px; }
.storagegrid b { display: block; font: 800 20px/1.1 "Archivo", var(--sans); }
.storagegrid span { font-size: 12.5px; color: var(--muted); }

.kvrow { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 13.5px; }
.kvrow:last-child { border-bottom: 0; }
.kvrow b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.roomline { padding: 12px 14px; background: #F0FDF4; border: 1px solid #16A34A; border-radius: 10px; }

.nodebox { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.nodebox:last-child { border-bottom: 0; }