:root{
  --blue-900:#1B2A7A; --blue-800:#2B3A98; --blue-600:#1E66B6; --blue-100:#E8EEF9; --blue-50:#F3F6FC;
  --red:#EE2B2B; --orange:#F7821E;
  --ink:#16213E; --muted:#5B6785; --line:#DDE3F0; --bg:#F4F6FB; --white:#fff;
  --ok:#1E9E5A; --warn:#F7821E; --bad:#D92D2D;
  --grad:linear-gradient(135deg,#2B3A98 0%,#1E66B6 100%);
  --grad-accent:linear-gradient(90deg,#EE2B2B,#F7821E);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
.topbar{background:var(--grad);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px;position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad-accent)}
.topbar img{width:46px;height:46px;border-radius:10px;object-fit:cover;background:#fff1}
.topbar h1{font-size:17px;margin:0;font-weight:700;letter-spacing:.2px}
.topbar small{display:block;opacity:.85;font-size:12px;font-weight:500}
.topbar .spacer{flex:1}
.wrap{max-width:520px;margin:0 auto;padding:18px 16px 40px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 6px 24px rgba(27,42,122,.07)}
label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.4px}
input,select{width:100%;padding:13px 14px;font-size:16px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-family:inherit;outline:none;transition:border .15s,box-shadow .15s}
input:focus,select:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(30,102,182,.15)}
.btn{appearance:none;border:0;border-radius:10px;padding:13px 18px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .05s,opacity .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(30,102,182,.3)}
.btn-accent{background:var(--grad-accent);color:#fff;box-shadow:0 6px 16px rgba(238,43,43,.28)}
.btn-ghost{background:#fff;color:var(--blue-800);border:1.5px solid var(--line)}
.btn-sm{padding:8px 12px;font-size:13px;border-radius:8px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.pill.ok{background:#E3F6EB;color:#14773F}
.pill.late{background:#FFEFD9;color:#B35A00}
.pill.bad{background:#FDE5E5;color:#B42020}
.pill.info{background:var(--blue-100);color:var(--blue-800)}
.pill.mute{background:#EEF0F5;color:#5B6785}
.hide{display:none!important}
table{border-collapse:collapse;width:100%}
th{background:var(--blue-900);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.4px;text-align:left;padding:10px 10px;white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:14px;white-space:nowrap}
tbody tr:nth-child(even){background:var(--blue-50)}
.num{text-align:right;font-variant-numeric:tabular-nums}