:root{
  --bg:#0b0c0f; --panel:#14161c; --panel2:#181b22; --line:#262a33; --line2:#30353f;
  --ink:#e9ebf0; --muted:#969cab; --faint:#646b78;
  --gold:#c9a24a; --green:#46b98a; --red:#e0596a; --amber:#d7a13c; --blue:#5b9bd5;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
#root{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
.serif{font-family:Newsreader,Georgia,"Times New Roman",serif}
a{color:inherit}
.tnum{font-variant-numeric:tabular-nums}

/* sidebar */
.side{position:sticky; top:0; height:100vh; border-right:1px solid var(--line);
  background:linear-gradient(180deg,#0e1014,#0b0c0f); padding:22px 18px; display:flex; flex-direction:column}
.brand{font-family:Newsreader,Georgia,serif; font-size:19px; line-height:1.2; letter-spacing:.2px}
.brand b{color:var(--gold); font-weight:600}
.eyebrow{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.nav{margin-top:26px; display:flex; flex-direction:column; gap:2px}
.nav a{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px;
  color:var(--muted); text-decoration:none; font-size:13.5px; transition:.12s}
.nav a:hover{background:var(--panel); color:var(--ink)}
.nav a.active{background:var(--panel2); color:var(--ink); box-shadow:inset 2px 0 0 var(--gold)}
.nav .dot{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.side-foot{margin-top:auto; font-size:11px; color:var(--faint); border-top:1px solid var(--line); padding-top:14px}
.mini{margin-top:22px; border-top:1px solid var(--line); padding-top:16px}
.mini h4{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:0 0 10px}
.mini-row{display:flex; align-items:center; justify-content:space-between; padding:4px 0; font-size:12.5px; color:var(--muted)}
.mini-row .nm{display:flex; align-items:center; gap:7px}

/* main */
.main{padding:30px 38px 70px; max-width:1280px}
.top{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:26px}
.top h1{font-family:Newsreader,Georgia,serif; font-weight:550; font-size:27px; margin:0; letter-spacing:.2px}
.top .sub{color:var(--muted); font-size:13px; margin-top:4px}
.legend{display:flex; gap:16px; font-size:11.5px; color:var(--muted); align-items:center}
.legend .k{display:flex; align-items:center; gap:6px}

/* status dots/pills */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; padding:3px 9px; border-radius:20px; border:1px solid var(--line2)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.up .dot,.s-green{background:var(--green)} .down .dot,.s-red{background:var(--red)}
.s-amber{background:var(--amber)} .s-gray{background:var(--faint)} .s-blue{background:var(--blue)}
.up{color:var(--green)} .down{color:var(--red)}

/* sections + cards */
.sec{margin:30px 0 0}
.sec-h{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 13px}
.sec-h h2{font-size:13px; letter-spacing:.04em; margin:0; font-weight:600}
.sec-h .note{font-size:11.5px; color:var(--faint)}
.grid{display:grid; gap:14px}
.g5{grid-template-columns:repeat(5,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.g5,.g4{grid-template-columns:repeat(2,1fr)} .g3,.g2{grid-template-columns:1fr}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 17px}
.card.flush{padding:0; overflow:hidden}
.card-h{display:flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:11px}
.card-h .src{margin-left:auto; font-size:9.5px; letter-spacing:.1em; padding:2px 7px; border-radius:20px; border:1px solid var(--line2)}
.src.live{color:var(--green); border-color:rgba(70,185,138,.4)}
.src.ph{color:var(--faint)}

/* KPI tile */
.kpi .big{font-size:30px; font-weight:600; letter-spacing:-.5px; line-height:1.05; margin:2px 0}
.kpi .lab{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.kpi .sub{font-size:11.5px; color:var(--muted); margin-top:6px}
.ph-val{color:var(--faint); font-weight:500}

/* tables */
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:600; padding:11px 16px; border-bottom:1px solid var(--line)}
td{padding:11px 16px; border-bottom:1px solid var(--line); color:var(--ink)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel2)}
td.r,th.r{text-align:right}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12px}

/* bars */
.bar{height:7px; background:var(--panel2); border-radius:5px; overflow:hidden}
.bar > i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),#e0c074)}
.bar.g > i{background:linear-gradient(90deg,var(--green),#6fd3a8)}

/* checklist */
.chk{display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--line); align-items:flex-start}
.chk:last-child{border:none}
.chk .ic{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;margin-top:1px}
.chk .ic.ok{background:rgba(70,185,138,.16); color:var(--green)}
.chk .ic.no{background:rgba(224,89,106,.14); color:var(--red)}
.chk .det{font-size:12px; color:var(--muted)}

/* action items */
.action{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line)}
.action:last-child{border:none}
.action .tag{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:6px; height:fit-content; white-space:nowrap}
.tag.legal{background:rgba(91,155,213,.15); color:var(--blue)}
.tag.eng{background:rgba(215,161,60,.15); color:var(--amber)}
.tag.admin{background:rgba(201,162,74,.15); color:var(--gold)}
.action .txt{font-size:13.5px}
.action .meta{font-size:11.5px; color:var(--faint); margin-top:3px}

.notebox{background:var(--panel2); border:1px solid var(--line); border-left:2px solid var(--gold); border-radius:8px; padding:13px 15px; font-size:12.5px; color:var(--muted); line-height:1.6}
.notebox b{color:var(--ink)}
.banner{background:rgba(215,161,60,.08); border:1px solid rgba(215,161,60,.3); border-radius:8px; padding:11px 15px; font-size:12.5px; color:#e7cf9b; margin-bottom:18px}

/* entity cards */
.ent{display:grid; grid-template-columns:1fr; gap:0}
.ent .row{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px}
.ent .row:last-child{border:none}
.ent .row .k{color:var(--faint); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; flex:none; width:142px}
.ent .row .v{text-align:right}
.chips{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end}
.chip{font-size:11px; padding:2px 9px; border-radius:20px; border:1px solid var(--line2); color:var(--muted)}
.ph-tag{color:var(--amber)}

/* gate */
#gate{position:fixed; inset:0; background:#080a0d; z-index:99; display:grid; place-items:center}
#gate .box{width:340px; text-align:center; padding:34px 30px; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
#gate .brand{font-size:22px; margin-bottom:6px}
#gate p{color:var(--muted); font-size:12.5px; margin:0 0 20px}
#gate input{width:100%; padding:11px 13px; background:var(--bg); border:1px solid var(--line2); border-radius:8px; color:var(--ink); font-size:14px; text-align:center; letter-spacing:.05em}
#gate button{width:100%; margin-top:11px; padding:11px; background:var(--gold); color:#1a1407; border:none; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer}
#gate .err{color:var(--red); font-size:12px; min-height:16px; margin-top:10px}
#gate .fine{color:var(--faint); font-size:10.5px; margin-top:18px; line-height:1.5}

/* responsive — phones */
@media(max-width:820px){
  #root{display:block}
  .side{position:static; height:auto; flex-direction:column; border-right:none;
    border-bottom:1px solid var(--line); padding:16px 16px}
  .nav{flex-direction:row; flex-wrap:wrap; margin-top:14px; gap:6px}
  .nav a{padding:7px 11px}
  .mini{margin-top:14px; padding-top:12px}
  .side-foot{margin-top:14px}
  .main{padding:20px 15px 64px; max-width:100%}
  .top{flex-direction:column; align-items:flex-start; gap:10px}
  .top h1{font-size:23px}
  table{font-size:12.5px}
  th,td{padding:9px 11px}
}