:root{
  --navy:#0C2879; --navy-deep:#0A1F5C;
  --brand:#0C2879;
  --magenta:#CC3366; --magenta-deep:#a3284f;
  --gold:#FFCA53; --gold-deep:#a97b12;
  --link:#3f6ff0;
  --bg:#f3f6fb; --panel:#ffffff; --panel-2:#f6f8fc;
  --ink:#22262c; --ink-2:#657081;
  --line:#e3e8f1; --line-2:#eef2f8;
  --ok:#1f7a54; --good:#2f6aa8; --warn:#b0741a; --bad:#c03a2f;
  --rail:#0C2879; --rail-deep:#0A1F5C; --rail-ink:#b9c4e6; --rail-active:rgba(255,255,255,.10);
  --shadow:0 1px 0 rgba(12,40,121,.04), 0 20px 44px -28px rgba(12,40,121,.28);
  --disp:"Manrope",system-ui,Segoe UI,Roboto,Arial,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --brand:#7f9bf3; --magenta:#e277a0; --gold:#ffd06a;
  --bg:#0a0f1e; --panel:#111a30; --panel-2:#0d1526;
  --ink:#e7ecf6; --ink-2:#94a1bb;
  --line:#202b48; --line-2:#1a2440;
  --ok:#3faa79; --good:#6ea0d8; --warn:#e0a24c; --bad:#e0736c;
  --rail:#0a1330; --rail-deep:#070d22; --rail-ink:#9fabce; --rail-active:rgba(255,255,255,.08);
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 24px 50px -30px rgba(0,0,0,.75);
}}
:root[data-theme="dark"]{
  --brand:#7f9bf3; --magenta:#e277a0; --gold:#ffd06a;
  --bg:#0a0f1e; --panel:#111a30; --panel-2:#0d1526;
  --ink:#e7ecf6; --ink-2:#94a1bb;
  --line:#202b48; --line-2:#1a2440;
  --ok:#3faa79; --good:#6ea0d8; --warn:#e0a24c; --bad:#e0736c;
  --rail:#0a1330; --rail-deep:#070d22; --rail-ink:#9fabce; --rail-active:rgba(255,255,255,.08);
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 24px 50px -30px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--magenta);color:#fff}
h1,h2,h3{font-family:var(--disp);margin:0;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(1.4rem,1.05rem + 1.4vw,1.9rem)}
h2{font-size:1rem;font-weight:700}
h3{font-size:.8rem;font-weight:700}
a{color:var(--link);text-decoration:none}
.eyebrow{font:700 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.k{font-family:var(--mono);font-size:.82rem;background:color-mix(in srgb,var(--magenta) 12%,transparent);color:var(--magenta);padding:1px 6px;border-radius:5px}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media (max-width:860px){.login{grid-template-columns:1fr}.login .promo{display:none}}
.login .promo{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 55%,#0a1852 100%);color:#fff;padding:56px 54px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login .promo .rings{position:absolute;inset:-20% -30% auto auto;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle at 60% 40%, rgba(255,202,83,.16), transparent 60%)}
.login .promo h2{font-size:2rem;line-height:1.15;max-width:16ch;color:#fff}
.login .promo p{color:#c7d0ee;max-width:42ch}
.login .promo .kpis{display:flex;gap:26px;margin-top:26px}
.login .promo .kpis div{font:600 .8rem/1.3 var(--mono);color:#aab6e4}
.login .promo .kpis b{display:block;font:800 1.5rem/1 var(--disp);color:#fff;margin-bottom:4px}
.login .form{background:var(--panel);display:flex;align-items:center;justify-content:center;padding:40px}
.login .card{width:100%;max-width:380px}
.login .card img.logo{height:42px;width:auto;margin-bottom:24px}
.login .card .lead{color:var(--ink-2);margin:0 0 20px}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
@media (max-width:900px){.shell{grid-template-columns:64px 1fr}}
aside{background:linear-gradient(180deg,var(--rail),var(--rail-deep));color:var(--rail-ink);display:flex;flex-direction:column;gap:2px;padding:16px 12px;position:sticky;top:0;height:100vh}
aside .brandbox{background:#fff;border-radius:11px;padding:11px 12px;margin:2px 4px 12px;display:flex;align-items:center;justify-content:center}
aside .brandbox img{height:24px;width:auto;display:block}
@media (max-width:900px){aside .brandbox{padding:8px 4px}aside .brandbox img{height:18px}}
aside .grp{font:700 .58rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#6f7fae;padding:15px 12px 6px}
aside a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--rail-ink);font-size:.9rem;font-weight:500;position:relative;text-decoration:none}
aside a svg{flex:none;opacity:.9}
aside a:hover{background:var(--rail-active);color:#fff}
aside a.active{background:var(--rail-active);color:#fff}
aside a.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--gold)}
@media (max-width:900px){aside .label,aside .grp{display:none}aside a{justify-content:center;padding:11px 0}}
aside .foot{margin-top:auto;font:500 .7rem/1.4 var(--mono);color:#6f7fae;padding:10px 12px}

main{min-width:0}
.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 26px;border-bottom:1px solid var(--line);background:var(--panel)}
.topbar img.tlogo{height:24px;width:auto}
@media (max-width:900px){.topbar img.tlogo{display:none}}
.topbar .clock{font:500 .8rem/1 var(--mono);color:var(--ink-2)}
.topbar .sp{flex:1}
.tgl{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:6px 9px;cursor:pointer;font:inherit;text-decoration:none}
.signout{border:0;background:transparent;color:var(--ink-2);font:600 .78rem/1 var(--sans);cursor:pointer;text-decoration:none}

.wrap{padding:24px 26px 72px;max-width:1180px}
.pagehead{margin-bottom:16px}
.pagehead p.sub{color:var(--ink-2);margin:6px 0 0;font-size:.9rem;max-width:66ch}
.bar-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}

.pswitch{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.pswitch a{border-right:1px solid var(--line);background:var(--panel);color:var(--ink-2);font:600 .78rem/1 var(--mono);letter-spacing:.04em;padding:8px 15px;text-decoration:none}
.pswitch a:last-child{border-right:0}
.pswitch a.on{background:var(--magenta);color:#fff}

.teamtabs{display:inline-flex;gap:8px}
.teamtabs a{border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:999px;font:600 .8rem/1 var(--sans);padding:7px 15px;text-decoration:none}
.teamtabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
:root[data-theme="dark"] .teamtabs a.on{background:var(--brand);border-color:var(--brand);color:#0a0f1e}

.readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:16px 0}
@media (max-width:900px){.readouts{grid-template-columns:1fr}}
.gauge{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.gauge .cap{font:700 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.gauge .val{font:600 2.4rem/1 var(--mono);letter-spacing:-.02em;margin:12px 0 6px;font-variant-numeric:tabular-nums;color:var(--brand)}
.gauge .foot{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--ink-2)}
.gauge.hero{background:linear-gradient(180deg,color-mix(in srgb,var(--magenta) 8%,var(--panel)),var(--panel));border-color:color-mix(in srgb,var(--magenta) 40%,var(--line))}
.bar{height:6px;border-radius:6px;background:var(--line-2);overflow:hidden;flex:1;min-width:70px}
.bar i{display:block;height:100%;border-radius:6px}

.grid{display:grid;gap:15px}
.plate{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.plate .ph{display:flex;align-items:baseline;gap:12px;padding:14px 17px;border-bottom:1px solid var(--line-2)}
.plate .ph .tag{margin-left:auto}
.plate .pb{padding:6px 17px 14px;overflow-x:auto}

table{border-collapse:collapse;width:100%}
th,td{padding:9px 9px;border-bottom:1px solid var(--line-2);text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.85rem;white-space:nowrap}
th:first-child,td:first-child{text-align:left;font-family:var(--sans);white-space:normal}
th{font:700 .63rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
td.name{font-weight:500;font-family:var(--sans)}
tr.tot td{border-top:2px solid var(--line);font-weight:700;color:var(--ink)}

.chip{display:inline-block;font:700 .64rem/1 var(--mono);letter-spacing:.05em;padding:3px 7px;border:1px solid var(--line);border-radius:6px;color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 .74rem/1 var(--mono);padding:4px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-excellent{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.p-good{color:var(--good);background:color-mix(in srgb,var(--good) 13%,transparent)}
.p-below{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.p-weak{color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,transparent)}
.p-no_target{color:var(--ink-2);background:var(--line-2)}

form.stack{display:grid;gap:12px;max-width:440px}
label{display:grid;gap:6px;font:600 .72rem/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
label.plain{text-transform:none;font-family:var(--sans);letter-spacing:0;color:var(--ink);font-weight:500}
input,select{font:400 .95rem/1 var(--sans);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--ink);width:100%}
input:focus,select:focus{outline:2px solid var(--magenta);outline-offset:1px}
input:disabled{color:var(--ink-2)}
input[type=checkbox]{width:auto}
button.primary{font:700 .9rem/1 var(--sans);padding:11px 18px;border-radius:10px;border:1px solid var(--magenta);background:var(--magenta);color:#fff;cursor:pointer;justify-self:start}
button.navy{font:700 .9rem/1 var(--sans);padding:11px 18px;border-radius:10px;border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;width:100%}
button.ghost,a.ghost{font:600 .78rem/1 var(--sans);padding:7px 11px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.rinline{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}

.flash{padding:10px 14px;border-radius:10px;font:500 .84rem/1.3 var(--mono);margin-bottom:14px;border:1px solid var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.flash.error{border-color:var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}

.legend{display:flex;gap:16px;font:600 .72rem/1 var(--mono);color:var(--ink-2);padding:8px 0 2px}
.legend i{display:inline-block;width:15px;height:0;border-top:2px solid currentColor;vertical-align:middle;margin-right:6px}
svg.spark{display:block;width:100%;height:70px}

[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){.screen{animation:fade .18s ease}}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- phones ---- */
@media (max-width:640px){
  .wrap{padding:16px 12px 60px}
  .topbar{padding:10px 12px;gap:8px}
  .topbar .clock{font-size:.72rem}
  form.stack{max-width:none}
  form.stack input[type=number],form.stack input[type=text],form.stack input:not([type]),form.stack select{
    font-size:16px;padding:13px 12px}            /* 16px stops iOS zoom; taller = thumb-friendly */
  form.stack button.primary,form.stack button.navy{width:100%;padding:14px}
  .readouts{gap:10px;margin:12px 0}
  .gauge .val{font-size:2rem}
  .plate .pb{padding:6px 12px 12px}
  .bar-actions{gap:8px}
  .pswitch a{padding:9px 12px}
  th,td{padding:8px 7px;font-size:.8rem}
}