:root{
  --red:#f5293a; --red-600:#e01524; --red-700:#b30f1c; --red-050:#1c0a0c; --red-100:#2a0d10; --red-glow:rgba(245,41,58,.26);
  --ink:#ffffff; --ink-2:#e7e7e7; --mut:#a2a2a2; --mut-2:#6c6c6c;
  --bg:#0a0a0a; --bg-2:#0e0e0e; --card:#121212; --card-2:#171717; --surface-2:#171717; --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.18);
  --ok:#7bd88f; --ok-bg:#10240f; --warn:#ffbb52; --warn-bg:#241a06; --danger:#ff6a73; --danger-bg:#260e10; --info:#7fb2ff; --info-bg:#0d1a30;
  --r-sm:6px; --r-md:9px; --r-lg:13px; --r-xl:16px; --r-pill:100px;
  --font:'Manrope',system-ui,sans-serif; --font-display:'Sora','Manrope',system-ui,sans-serif; --font-label:'Jost',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.06}
h1{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.03em}h2{font-size:22px}h3{font-size:16px}
.muted{color:var(--mut)}.small{font-size:12px}.mono{font-family:var(--font-mono)}
.kicker{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.2em;font-weight:500;font-size:12px;color:var(--red)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,36px)}

/* logo (real Splendor S mark, recolored red) */
.logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em;color:#fff}
.logo svg{display:block;flex:none}
.logo b{color:var(--red)}

/* buttons — pill */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-weight:600;font-size:14px;letter-spacing:.01em;border:1px solid var(--line-2);background:transparent;color:#fff;border-radius:var(--r-pill);padding:10px 18px;cursor:pointer;transition:.24s}
.btn:hover{border-color:#fff;text-decoration:none}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 22px var(--red-glow)}
.btn.primary:hover{background:var(--red-600);border-color:var(--red-600)}
.btn.ghost{border-color:transparent;color:var(--mut)}
.btn.sm{padding:7px 14px;font-size:13px}
.btn.block{width:100%;justify-content:center}

/* cards / kpis — border-first elevation */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.card.pad{padding:20px}
.grid{display:grid;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.kpi .k{font-family:var(--font-label);font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.12em;font-weight:500}
.kpi .v{font-family:var(--font-display);font-size:28px;font-weight:800;margin-top:8px;letter-spacing:-.02em;color:#fff}
.kpi .v small{font-size:13px;color:var(--mut);font-weight:500;font-family:var(--font)}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}
.tbl{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink-2)}
th{font-family:var(--font-label);font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;font-weight:500;background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}

/* badges — pill */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-label);font-size:11px;font-weight:500;letter-spacing:.04em;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.badge.danger{background:var(--danger-bg);color:var(--danger);border-color:transparent}.badge.info{background:var(--info-bg);color:var(--info);border-color:transparent}

/* forms */
label{display:block;font-family:var(--font-label);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-2);margin:0 0 6px}
input,select,textarea{width:100%;font:15px var(--font);color:#fff;background:#0e0e0e;border:1px solid var(--line-2);border-radius:var(--r-md);padding:10px 13px}
input::placeholder,textarea::placeholder{color:var(--mut-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-050)}
select option{background:var(--card);color:#fff}
.field{margin-bottom:15px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* app shell */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:#0c0c0c;border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.side .logo{padding:6px 8px 18px}
.side a.nav{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-md);color:var(--mut);font-weight:500;margin-bottom:2px}
.side a.nav:hover{background:var(--surface-2);color:#fff;text-decoration:none}
.side a.nav.active{background:var(--red-100);color:var(--red);font-weight:600}
.side .sec{font-family:var(--font-label);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--mut-2);font-weight:500;margin:18px 11px 8px}
.main{padding:0}
.topbar{display:flex;align-items:center;gap:14px;padding:16px 28px;border-bottom:1px solid var(--line);background:#0c0c0c;position:sticky;top:0;z-index:50}
.content{padding:26px 28px;max-width:1140px}
.spacer{flex:1}
@media(max-width:760px){.shell{grid-template-columns:1fr}.side{display:none}}