:root{
  --bg:#0b0f17; --bg2:#111827; --panel:#151d2c; --panel2:#1a2436;
  --line:#26324a; --text:#e5ecf6; --muted:#8b9bb4; --accent:#5eb1ff;
  --accent2:#7ef0c3; --warn:#ffce56; --bad:#ff6b7a; --ok:#5ede8f;
  --chip-a:#2ecc71; --chip-b:#5eb1ff; --chip-c:#ffce56;
  --mono:"JetBrains Mono","SF Mono",Consolas,monospace;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#16233c 0%,var(--bg) 55%);color:var(--text);font:16px/1.6 var(--sans);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
#topbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1.4rem;background:rgba(11,15,23,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{color:var(--text);font-size:1.05rem}
.brand .muted{color:var(--muted);font-weight:400}
#topbar nav{display:flex;gap:1.1rem;flex-wrap:wrap}
#topbar nav a{color:var(--muted);font-size:.95rem}
#topbar nav a.active,#topbar nav a:hover{color:var(--text);text-decoration:none}
main{flex:1;width:min(1180px,96vw);margin:0 auto;padding:1.4rem 0 3rem}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;padding:.8rem 1.4rem;text-align:center}
.loading{color:var(--muted);padding:4rem;text-align:center}
h1{font-size:2rem;line-height:1.25;margin:.4em 0}
h2{font-size:1.35rem;margin:1.6em 0 .5em;border-bottom:1px solid var(--line);padding-bottom:.25em}
.hero{padding:3rem 0 1rem}
.hero h1{font-size:2.6rem;max-width:900px}
.hero .sub{color:var(--muted);max-width:760px;font-size:1.1rem}
.hero .cta{margin-top:1.4rem;display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.55rem 1.1rem;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;font-size:.95rem;transition:.15s}
.btn:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#1d4ed8,#2563eb);border-color:#2563eb}
.grid{display:grid;gap:1rem}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;transition:.15s}
.card:hover{border-color:#33445f}
.card h3{margin:.2em 0 .4em;font-size:1.08rem}
.card .muted,.muted{color:var(--muted)}
.kpis{display:flex;gap:1.6rem;flex-wrap:wrap;margin:1.2rem 0}
.kpi b{display:block;font-size:1.7rem;color:var(--accent2)}
.kpi span{color:var(--muted);font-size:.85rem}
/* pipeline viz */
.pipe{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:1.4rem .2rem;position:relative}
.pstage{min-width:170px;flex:1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;margin-right:2.2rem;position:relative;cursor:pointer;transition:.15s}
.pstage:hover,.pstage.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pstage:last-child{margin-right:0}
.pstage:not(:last-child):after{content:"➜";position:absolute;right:-1.85rem;top:42%;color:var(--muted);font-size:1.2rem}
.pstage .pid{font:700 .8rem var(--mono);color:var(--accent)}
.pstage .pt{font-weight:600;margin:.15rem 0}
.pstage .pm{font-size:.78rem;color:var(--muted)}
.pstage .loop{position:absolute;top:-.7rem;right:.6rem;font-size:.72rem;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:.05rem .5rem;color:var(--warn)}
.pstage .gate{position:absolute;bottom:-.7rem;left:.6rem;font-size:.72rem;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:.05rem .5rem;color:var(--accent2)}
.pstage.done{border-left:4px solid var(--ok)}
.pstage.gatewait{border-left:4px solid var(--warn)}
.pstage.idle{opacity:.55}
.pdetail{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;margin-top:.4rem}
/* chips */
.chip{display:inline-block;font:600 .72rem var(--mono);padding:.1rem .55rem;border-radius:20px;margin-right:.3rem;white-space:nowrap}
.chip.A{background:rgba(46,204,113,.15);color:var(--chip-a);border:1px solid rgba(46,204,113,.4)}
.chip.B{background:rgba(94,177,255,.15);color:var(--chip-b);border:1px solid rgba(94,177,255,.4)}
.chip.C{background:rgba(255,206,86,.12);color:var(--chip-c);border:1px solid rgba(255,206,86,.35)}
.chip.blocker{background:rgba(255,107,122,.15);color:var(--bad);border:1px solid rgba(255,107,122,.45)}
.chip.major{background:rgba(255,152,86,.14);color:#ffab70;border:1px solid rgba(255,152,86,.4)}
.chip.minor{background:rgba(139,155,180,.14);color:var(--muted);border:1px solid var(--line)}
.chip.crit{background:rgba(255,107,122,.12);color:var(--bad);border:1px solid rgba(255,107,122,.35)}
.chip.st{background:var(--bg2);color:var(--muted);border:1px solid var(--line)}
.chip.ok{background:rgba(94,222,143,.13);color:var(--ok);border:1px solid rgba(94,222,143,.4)}
.chip.gate{background:rgba(255,206,86,.13);color:var(--warn);border:1px solid rgba(255,206,86,.4)}
/* project page */
.crumbs{color:var(--muted);font-size:.85rem;margin-bottom:.6rem}
.stepper{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0 1.4rem}
.step{border:1px solid var(--line);border-radius:10px;padding:.4rem .8rem;font-size:.85rem;background:var(--panel)}
.step.done{border-color:rgba(94,222,143,.5)}
.step.done:before{content:"✓ ";color:var(--ok)}
.step.gate:before{content:"⏸ ";color:var(--warn)}
.step.idle{opacity:.5}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin:1.2rem 0 .9rem;flex-wrap:wrap}
.tab{padding:.45rem .9rem;border-radius:10px 10px 0 0;cursor:pointer;color:var(--muted);border:1px solid transparent;font-size:.93rem}
.tab.active{color:var(--text);background:var(--panel);border-color:var(--line);border-bottom-color:var(--panel)}
.filelist{display:grid;gap:.4rem}
.filelist a{display:flex;justify-content:space-between;gap:.6rem;padding:.5rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-size:.92rem}
.filelist a:hover{border-color:var(--accent);text-decoration:none}
.filelist .fp{font:0.78rem var(--mono);color:var(--muted);white-space:nowrap}
.stagegroup{margin-bottom:1.2rem}
.stagegroup h3{margin:.6rem 0 .5rem;font-size:1rem;color:var(--accent)}
/* registry table */
.tools{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 1rem;align-items:center}
select,input[type=text],textarea{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;font:.9rem var(--sans)}
table.reg{width:100%;border-collapse:collapse;font-size:.86rem}
table.reg th{position:sticky;top:52px;text-align:left;background:var(--bg2);padding:.45rem .6rem;border-bottom:1px solid var(--line);color:var(--muted);font-weight:600;cursor:pointer}
table.reg td{padding:.45rem .6rem;border-bottom:1px solid #1d2941;vertical-align:top}
table.reg tr.rowhead{cursor:pointer}
table.reg tr.rowhead:hover td{background:#182238}
table.reg tr.expand td{background:var(--panel2);font-size:.84rem}
.rid{font:700 .8rem var(--mono);color:var(--accent2);white-space:nowrap}
.exp-grid{display:grid;grid-template-columns:9rem 1fr;gap:.15rem .8rem}
.exp-grid dt{color:var(--muted)}
.exp-grid dd{margin:0}
/* md viewer */
.mdview{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.8rem;overflow-x:auto}
.mdview h1{font-size:1.5rem}.mdview h2{font-size:1.2rem}
.mdview table{border-collapse:collapse;font-size:.86rem;margin:.8rem 0}
.mdview th,.mdview td{border:1px solid var(--line);padding:.35rem .6rem;text-align:left}
.mdview th{background:var(--bg2)}
.mdview code{background:var(--bg2);padding:.1em .35em;border-radius:5px;font:.85em var(--mono)}
.mdview pre{background:var(--bg2);padding:.8rem 1rem;border-radius:10px;overflow-x:auto}
.mdview pre code{background:none;padding:0}
.mdview blockquote{border-left:3px solid var(--accent);margin:.6rem 0;padding:.2rem 1rem;color:var(--muted);background:rgba(94,177,255,.05)}
/* decisions */
.decision{border-left:4px solid var(--warn)}
.decision textarea{width:100%;min-height:70px;margin:.5rem 0}
.dec-copied{color:var(--ok);font-size:.85rem;margin-left:.6rem}
.classbar{display:flex;height:10px;border-radius:6px;overflow:hidden;margin:.4rem 0;border:1px solid var(--line)}
.classbar div{height:100%}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1rem 0}
.role-ic{font-size:1.6rem}
details.principle{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6rem 1rem;margin:.5rem 0}
details.principle summary{cursor:pointer;font-weight:600}
.badge-run{font:.75rem var(--mono);color:var(--muted)}
@media (max-width:760px){.hero h1{font-size:1.7rem}.pstage{min-width:150px}}