:root{--font-sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--bg-page:#0b1f1c;--bg-panel:#0f2a26;--bg-card:#0f2a26eb;--bg-inset:#ffffff0a;--line:#beebe124;--line-strong:#beebe14d;--teal:#4ab3a2;--teal-dim:#4ab3a22e;--orange:#ff9800;--ok:#3ccf8e;--fail:#ff4d40;--text:#e7f2ef;--text-muted:#e7f2efad;--text-dim:#e7f2ef73}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-sans);background:var(--bg-page);color:var(--text);font-size:13px;overflow:hidden}.app{grid-template-columns:30% 70%;height:100vh;display:grid}.panel{background:var(--bg-panel);border-right:1px solid var(--line);padding:20px 22px 32px;overflow-y:auto}.panel-header{margin-bottom:18px}.eyebrow{font-family:var(--font-mono);letter-spacing:.14em;color:var(--teal);margin-bottom:6px;font-size:11px}.panel-header h1{margin-bottom:8px;font-size:19px;font-weight:600;line-height:1.25}.panel-section{border-top:1px solid var(--line);flex-direction:column;gap:10px;padding:14px 0 16px;display:flex}.panel-section h2{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:500}.slider-row,.select-row{flex-direction:column;gap:4px;display:flex}.slider-head{justify-content:space-between;gap:8px;display:flex}.slider-label{color:var(--text)}.slider-value{font-family:var(--font-mono);color:var(--teal);white-space:nowrap}.slider-note{color:var(--text-dim);font-size:11px}.module-row.is-clash .slider-label,.module-row.is-clash .slider-note{color:var(--fail)}input[type=range]{width:100%;accent-color:var(--teal)}select{background:var(--bg-inset);width:100%;color:var(--text);border:1px solid var(--line-strong);font:inherit;border-radius:0;padding:6px 8px}select option{background:var(--bg-panel)}.toggle{color:var(--text-muted);cursor:pointer;align-items:center;gap:8px;display:flex}.toggle input{accent-color:var(--teal)}.btn{border:1px solid var(--line-strong);color:var(--text);font:500 13px var(--font-sans);cursor:pointer;text-align:left;background:0 0;border-radius:0;padding:9px 12px}.btn:hover{border-color:var(--teal)}.btn-primary{background:var(--orange);border-color:var(--orange);color:#1b1206;font-weight:600}.btn-primary:hover{background:#ffad33;border-color:#ffad33}.hint{color:var(--text-dim);font-size:12px;line-height:1.45}.mono{font-family:var(--font-mono)}.report{background:var(--bg-inset);border-left:2px solid var(--teal);color:var(--text-muted);flex-direction:column;gap:4px;padding:8px 10px;line-height:1.4;display:flex}.report-fail{border-left-color:var(--fail);color:var(--fail)}.main{flex-direction:column;min-width:0;min-height:0;display:flex}.viewport{background:radial-gradient(at 50% 40%,#16403a 0%,#0d2622 55%,#081613 100%);flex:1;min-height:0;position:relative}.viewport-canvas{touch-action:none;outline:none;width:100%;height:100%;position:absolute;inset:0}.viewport-legend{color:var(--text-muted);pointer-events:none;gap:16px;font-size:11px;display:flex;position:absolute;bottom:12px;left:14px}.dot{vertical-align:middle;border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}.dot-cog{background:var(--orange)}.dot-centre{background:#fff}.dashboard{background:var(--line);border-top:1px solid var(--line);flex:none;grid-template-columns:1fr 1.35fr 1.1fr 1.15fr;gap:1px;display:grid}.card{background:var(--bg-card);flex-direction:column;gap:8px;min-width:0;padding:12px 14px 14px;display:flex}.card h3{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:500}.big-number{font-family:var(--font-mono);font-size:28px;font-weight:500;line-height:1}.big-number span{color:var(--text-muted);font-size:14px}.meta{color:var(--text-dim);font-size:11px;line-height:1.4}.meter{background:var(--bg-inset);height:4px}.meter>div{background:var(--teal);height:100%}.meter-fail>div{background:var(--fail)}.kv{border-collapse:collapse;width:100%;font-size:12px}.kv td{vertical-align:top;color:var(--text-muted);padding:2px 0}.kv td:first-child{color:var(--text-dim);white-space:nowrap;padding-right:10px}.kv td+td{font-family:var(--font-mono);font-size:11.5px}.kv thead td{color:var(--text-dim);font-family:var(--font-sans);font-size:11px}.kv-strong td{color:var(--text)}.inline-select{padding:4px 6px;font-size:12px}.axis-row{font-family:var(--font-mono);grid-template-columns:16px 82px 1fr 56px;align-items:center;gap:8px;display:grid}.axis-name{color:var(--text-muted)}.axis-value{font-size:14px}.axis-limit{color:var(--text-dim);text-align:right;font-size:10.5px}.axis-bar{background:var(--bg-inset);height:6px;position:relative}.axis-fill{background:var(--teal);transition:width .2s;position:absolute;top:0;bottom:0;left:0}.axis-target{background:var(--line-strong);width:1px;position:absolute;top:-3px;bottom:-3px}.axis-row.is-over .axis-value{color:var(--fail)}.axis-row.is-over .axis-fill{background:var(--fail)}.badge{border:1px solid;padding:7px 9px;font-size:12px;font-weight:500;line-height:1.4}.badge-ok{color:var(--ok);background:#3ccf8e14;border-color:#3ccf8e73}.badge-neutral{color:var(--text-muted);border-color:var(--line-strong)}.badge-fail{color:#fff;border-color:var(--fail);background:#ff4d4038;animation:1s steps(2,jump-none) infinite flash}@keyframes flash{0%{background:#ff4d408c}to{background:#ff4d401f}}@media (width<=1100px){.dashboard{grid-template-columns:1fr 1fr}}