:root{
  --bg:#F2F4F3;
  --surface:#FFFFFF;
  --ink:#151E27;
  --ink-soft:#5B6772;
  --ink-faint:#8B95A0;
  --red:#D12031;
  --red-dark:#8B1420;
  --red-tint:#FBE7E9;
  --green:#1F7A4D;
  --green-tint:#E5F3EA;
  --amber:#B5730E;
  --amber-tint:#FBF0DE;
  --line:#E2E6E4;
  --line-strong:#CBD1CE;
  --radius:10px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.shell{display:flex; min-height:100vh;}

.sidebar{
  width:260px; flex-shrink:0; background:var(--ink); color:#EDEFEF;
  padding:24px 18px; display:flex; flex-direction:column; gap:22px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  width:32px; height:32px; border-radius:8px; background:var(--red);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff;
}
.brand-text{font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:0.2px;}
.brand-sub{font-size:11px; color:#9AA5AC; font-family:var(--font-mono); margin-top:1px;}

.tree{display:flex; flex-direction:column; gap:2px; font-size:13px;}
.tree-node{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:7px; color:#C6CCCF; text-decoration:none;}
.tree-node:hover{background:rgba(255,255,255,0.06);}
.tree-node.active{background:rgba(209,32,49,0.18); color:#fff;}
.tree-node .dot{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
.tree-lvl-ad .dot{background:var(--red);}
.tree-lvl-sdc{padding-left:20px; font-size:12.5px; color:#9AA5AC;}
.tree-lvl-dc{padding-left:34px; font-size:12px; color:#87909B;}
.tree-lvl-ch{padding-left:48px; font-size:12.5px;}
.tree-lvl-ch .dot{background:#5B6772;}
.tree-lvl-ch.status-good .dot{background:var(--green);}
.tree-lvl-ch.status-watch .dot{background:var(--amber);}

.sidebar-foot{margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,0.08); font-size:11.5px; color:#7E8890;}
.sidebar-foot a{color:#C6CCCF; text-decoration:underline;}

.main{flex:1; min-width:0; padding:28px 36px 60px;}
.topbar{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.topbar h1{font-family:var(--font-display); font-weight:600; font-size:22px; margin:0;}
.topbar .who{font-size:12.5px; color:var(--ink-soft);}
.topbar .who a{color:var(--red-dark); text-decoration:none;}

.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; margin-bottom:26px;}
.kpi-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;}
.kpi-label{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px;}
.kpi-value{font-family:var(--font-display); font-weight:600; font-size:24px;}
.kpi-value .unit{font-family:var(--font-body); font-size:13px; color:var(--ink-soft); font-weight:400; margin-left:2px;}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:20px; overflow:hidden;}
.panel-head{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
.panel-head h2{font-family:var(--font-display); font-weight:600; font-size:15px; margin:0;}
.panel-body{padding:18px 20px;}

table.chapters{width:100%; border-collapse:collapse; font-size:13px;}
table.chapters th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.3px; color:var(--ink-soft); font-weight:500; padding:10px 20px; border-bottom:1px solid var(--line);}
table.chapters td{padding:12px 20px; border-bottom:1px solid var(--line);}
table.chapters tr:last-child td{border-bottom:none;}
table.chapters tr.row-clickable{cursor:pointer;}
table.chapters tr.row-clickable:hover{background:#FAFAF9;}
.chapter-name{font-weight:600;}
.chapter-name a{text-decoration:none; color:inherit;}
.chapter-dc{font-size:12px; color:var(--ink-soft);}
.num{font-family:var(--font-mono); font-size:13px;}
.badge{display:inline-block; font-size:10.5px; font-family:var(--font-mono); padding:2px 8px; border-radius:20px; font-weight:500;}
.badge-good{background:var(--green-tint); color:var(--green);}
.badge-watch{background:var(--amber-tint); color:var(--amber);}
.badge-live{background:var(--red-tint); color:var(--red-dark);}
.badge-sample{background:#EEEFEE; color:var(--ink-soft);}

.pulse-svg{display:block;}

.detail-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px;}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr;}}

.chart-wrap{position:relative; height:220px;}

.roster-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.roster-table th{text-align:left; font-size:10.5px; text-transform:uppercase; color:var(--ink-soft); font-weight:500; padding:8px 6px; border-bottom:1px solid var(--line);}
.roster-table td{padding:7px 6px; border-bottom:1px solid var(--line);}
.roster-table tr:last-child td{border-bottom:none;}
.roster-scroll{max-height:280px; overflow-y:auto;}
.join-badge{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft);}
.join-badge.new{color:var(--green); font-weight:500;}
.status-resigned{color:var(--ink-faint); font-style:italic;}

.empty-note{font-size:12.5px; color:var(--ink-soft); padding:6px 0 0;}
.sample-note{background:#F7F3EA; border:1px solid #E9DFC7; border-radius:8px; padding:12px 14px; font-size:12.5px; color:#6B5A2E;}

.subdomain-note{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint);}

/* Forms (login, upload) */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg);}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:32px; width:100%; max-width:360px;}
.auth-card h1{font-family:var(--font-display); font-size:19px; margin:0 0 4px;}
.auth-card p.sub{font-size:12.5px; color:var(--ink-soft); margin:0 0 22px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:5px;}
.field input, .field select{
  width:100%; padding:9px 11px; border:1px solid var(--line-strong); border-radius:7px;
  font-family:var(--font-body); font-size:13.5px; background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus{outline:2px solid var(--red); outline-offset:1px; border-color:var(--red);}
.btn{
  display:inline-block; background:var(--red); color:#fff; border:none; border-radius:7px;
  padding:10px 18px; font-family:var(--font-body); font-size:13.5px; font-weight:500; cursor:pointer;
}
.btn:hover{background:var(--red-dark);}
.btn:disabled{background:var(--ink-faint); cursor:not-allowed;}
.btn-block{width:100%;}
.form-error{background:var(--red-tint); color:var(--red-dark); border-radius:7px; padding:9px 12px; font-size:12.5px; margin-bottom:14px;}
.form-success{background:var(--green-tint); color:var(--green); border-radius:7px; padding:9px 12px; font-size:12.5px; margin-bottom:14px;}