:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, Arial; --bg:#08111f; --panel:#0f1c2f; --line:#223653; --text:#eef5ff; --muted:#92a8c5; --accent:#42b8ff; --good:#55d58b; --warn:#ffba55; }
*{box-sizing:border-box} body{margin:0;background:linear-gradient(145deg,#07101d,#0b1628);color:var(--text)}
header{display:flex;justify-content:space-between;gap:20px;padding:34px 5vw 24px;border-bottom:1px solid var(--line)} h1{margin:.2rem 0;font-size:2.2rem} p{color:var(--muted);max-width:760px}.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.08em}.identity{background:#0d2038;border:1px solid var(--line);padding:14px 18px;border-radius:14px;color:var(--muted);min-width:210px}.identity strong{color:var(--text)}
main{padding:24px 5vw 60px}.pipeline{display:grid;grid-template-columns:repeat(8,minmax(110px,1fr));gap:8px;overflow:auto;margin-bottom:20px}.step{min-height:78px;padding:12px;border:1px solid var(--line);background:#0b1729;border-radius:12px;font-weight:650}.step small{display:block;margin-top:8px;color:var(--muted)}.step.done{border-color:#2f8059}.step.active{border-color:var(--accent);box-shadow:0 0 0 1px #42b8ff33 inset}
.grid{display:grid;grid-template-columns:1.6fr .8fr;gap:16px}.panel{background:linear-gradient(180deg,#0e1b2e,#0c1829);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel h2{margin:0 0 14px;font-size:1.05rem}.pill{font-size:.76rem;padding:5px 9px;border-radius:999px;background:#173e2c;color:#82e4aa;border:1px solid #2e6f50}.pill.warn{background:#3a2b13;color:#ffd38c;border-color:#684c21}.muted{color:var(--muted);font-size:.86rem}
.meta{display:flex;gap:8px;flex-wrap:wrap}.tag{padding:4px 8px;background:#10243d;border-radius:8px;color:#b8d0eb;font-size:.78rem}.variants{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px}.variant{background:#0a1525;border:1px solid var(--line);padding:14px;border-radius:12px}.variant h3{font-size:.95rem;margin:0 0 8px}.variant pre{white-space:pre-wrap;font:inherit;font-size:.88rem;color:#c9d8ea;line-height:1.45}.targets{display:flex;gap:10px;flex-wrap:wrap}.target{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0a1525}.target.off{opacity:.42}button{border:0;border-radius:10px;background:#1c78b7;color:white;font-weight:700;padding:10px 12px;cursor:pointer}button:hover{filter:brightness(1.12)}
@media(max-width:900px){.grid{grid-template-columns:1fr}.variants{grid-template-columns:1fr}header{flex-direction:column}.pipeline{grid-template-columns:repeat(8,150px)}}
.step[data-step="7"]{cursor:not-allowed}.step[data-step="7"].enabled{cursor:pointer}.step[data-step="7"].enabled:hover{filter:brightness(1.12)}button:disabled{opacity:.72;cursor:default;filter:none}