:root{
  --bg:#0f1117;--s:#1a1d27;--s2:#232733;--b:#2e3345;--t:#e4e4e7;--t2:#8b8fa3;
  --g:#22c55e;--r:#ef4444;--a:#f59e0b;--bl:#3b82f6;--p:#a78bfa;--c:#06b6d4;--rd:8px;
  --font:-apple-system,BlinkMacSystemFont,'SF Mono','Fira Code',monospace
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--t);font-size:13px;line-height:1.6}
a{color:var(--bl);text-decoration:none}a:hover{text-decoration:underline}

/* Header */
header{padding:20px 32px;border-bottom:1px solid var(--b);background:var(--s);display:flex;justify-content:space-between;align-items:center}
header h1{font-size:15px;font-weight:700;letter-spacing:1px}
header .meta{color:var(--t2);font-size:11px;text-align:right}

/* Nav */
nav{background:var(--s);border-bottom:1px solid var(--b);padding:8px 32px;display:flex;gap:6px;flex-wrap:wrap;position:sticky;top:0;z-index:50}
nav a{color:var(--t2);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:6px 12px;border-radius:4px;white-space:nowrap}
nav a:hover,nav a.active{color:var(--t);background:var(--s2);text-decoration:none}
nav a.active{color:var(--c);border:1px solid var(--c)}

/* Container */
.container{max-width:1500px;margin:0 auto;padding:24px 32px}
h2{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--t2);margin:24px 0 12px}
h2:first-child{margin-top:0}

/* Grid */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}

/* Panel */
.p{background:var(--s);border:1px solid var(--b);border-radius:var(--rd);padding:16px}
.p h3{font-size:12px;font-weight:600;margin-bottom:8px}
.p .desc{color:var(--t2);font-size:11px;margin-bottom:8px}
.p.full{grid-column:1/-1}

/* Stat */
.stat{text-align:center;padding:14px 8px}
.stat .v{font-size:22px;font-weight:700;color:var(--c);font-variant-numeric:tabular-nums}
.stat .l{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* Table */
table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
th{text-align:left;font-size:10px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--b)}
td{padding:6px 8px;border-bottom:1px solid rgba(46,51,69,.4);vertical-align:top;font-variant-numeric:tabular-nums}
th.r,td.r{text-align:right}
tr:hover td{background:rgba(46,51,69,.3)}

/* Row */
.row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(46,51,69,.4);font-size:12px;align-items:center}
.row:last-child{border-bottom:none}
.row .k{font-weight:500}.row .val{color:var(--c);font-variant-numeric:tabular-nums;font-weight:500}

/* Tags */
.tag{display:inline-block;font-size:9px;padding:2px 7px;border-radius:3px;font-weight:600}
.tag.live{background:rgba(34,197,94,.15);color:var(--g)}
.tag.rdy{background:rgba(6,182,212,.15);color:var(--c)}
.tag.pend{background:rgba(245,158,11,.15);color:var(--a)}
.tag.fut{background:rgba(139,143,163,.1);color:var(--t2)}
.tag.pub{background:rgba(34,197,94,.15);color:var(--g)}
.tag.key{background:rgba(167,139,250,.15);color:var(--p)}

/* Check */
.chk{display:flex;gap:7px;padding:4px 0;border-bottom:1px solid rgba(46,51,69,.3);font-size:12px}
.chk:last-child{border-bottom:none}
.cm{width:15px;height:15px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;margin-top:2px}
.cm.d{background:rgba(34,197,94,.2);color:var(--g)}
.cm.t{background:rgba(245,158,11,.2);color:var(--a)}
.cm.f{background:rgba(139,143,163,.1);color:var(--t2)}

/* Flow diagram */
.flow{background:var(--s);border:1px solid var(--b);border-radius:var(--rd);padding:18px;overflow-x:auto;margin-bottom:14px}
.fr{display:flex;align-items:center;gap:0;margin-bottom:8px;min-width:700px}
.fr:last-child{margin-bottom:0}
.nd{background:var(--s2);border:1px solid var(--b);border-radius:5px;padding:7px 11px;white-space:nowrap;flex-shrink:0}
.nd.lv{border-color:var(--g)}.nd.lv::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--g);margin-right:5px;vertical-align:middle}
.nd.pn{border-color:var(--a)}.nd.pn::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--a);margin-right:5px;vertical-align:middle}
.nd .lb{font-weight:600;font-size:11px}.nd .dt{color:var(--t2);font-size:10px}
.aw{color:var(--t2);padding:0 5px;flex-shrink:0;font-size:12px}

/* Process flow (vertical) */
.proc{position:relative;padding-left:24px;margin:8px 0}
.proc::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--b)}
.proc .step{position:relative;padding:6px 0 6px 16px;font-size:12px}
.proc .step::before{content:'';position:absolute;left:-20px;top:10px;width:10px;height:10px;border-radius:50%;border:2px solid var(--c);background:var(--bg)}
.proc .step.done::before{background:var(--g);border-color:var(--g)}
.proc .step .nm{font-weight:600;color:var(--c)}
.proc .step .info{color:var(--t2);font-size:11px}

/* Bar chart (CSS) */
.bar-row{display:flex;align-items:center;margin:4px 0}
.bar-lbl{width:80px;font-size:11px;font-weight:500;flex-shrink:0;text-align:right;padding-right:8px}
.bar-track{flex:1;height:18px;background:var(--s2);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width .6s}
.bar-fill.bl{background:var(--bl)}.bar-fill.gn{background:var(--g)}.bar-fill.am{background:var(--a)}.bar-fill.cy{background:var(--c)}.bar-fill.pr{background:var(--p)}
.bar-val{width:90px;font-size:11px;font-weight:500;padding-left:8px;font-variant-numeric:tabular-nums}

/* Breadcrumb */
.bread{font-size:11px;color:var(--t2);margin-bottom:16px}
.bread a{color:var(--t2)}

/* Code */
code{background:var(--s2);padding:1px 5px;border-radius:3px;font-size:11px;font-family:var(--font)}
pre{background:var(--s2);padding:12px;border-radius:6px;overflow-x:auto;font-size:11px;line-height:1.7;border:1px solid var(--b);margin:8px 0}

/* Search */
.search{width:100%;padding:8px 12px;background:var(--s2);border:1px solid var(--b);border-radius:6px;color:var(--t);font-family:var(--font);font-size:12px;margin-bottom:16px}
.search:focus{outline:none;border-color:var(--c)}

.p{overflow-x:auto}
header{flex-wrap:wrap}
details{margin-bottom:14px}
details summary{cursor:pointer;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--t2);padding:8px 0;list-style:none}
details summary::before{content:'▸ ';color:var(--c)}
details[open] summary::before{content:'▾ '}
details summary:hover{color:var(--t)}
.search-count{font-size:11px;color:var(--t2);margin:-12px 0 12px;display:none}
@media(max-width:1000px){.g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr}nav{gap:4px}nav a{font-size:9px;padding:4px 8px}}
@media print{nav,.search{display:none}body{background:white;color:black}.p{border:1px solid #ccc}.nd{border:1px solid #999}header{background:white;border-color:#ccc}}