:root{--bg:#0a0f16;--bg-panel:#0e1520;--bg-panel-2:#121a27;--line:#1d2836;--text:#d7e1ee;--text-dim:#8394a9;--accent:#22d3ee;--accent-2:#3b82f6;--warn:#f59e0b;--bad:#ef4444;--good:#10b981;--mono:"JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px}.app{flex-direction:column;height:100vh;display:flex}.header{border-bottom:1px solid var(--line);background:linear-gradient(#0d1420,#0a0f16);align-items:center;gap:16px;padding:10px 16px;display:flex}.brand{font-family:var(--mono);letter-spacing:.12em;color:var(--accent);font-size:15px;font-weight:700}.brand .dim{color:var(--text-dim);font-weight:400}.chip{font-family:var(--mono);border:1px solid var(--line);color:var(--text-dim);white-space:nowrap;border-radius:10px;padding:3px 10px;font-size:11px}.chip.real{color:var(--good);border-color:#10b98166}.chip.fallback{color:var(--warn);border-color:#f59e0b66}.chip.bad{color:var(--bad);border-color:#ef444466}.spacer{flex:1}.toolbar{border-bottom:1px solid var(--line);background:var(--bg-panel);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;display:flex}select,button{font-family:var(--mono);background:var(--bg-panel-2);color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:6px 10px;font-size:12px}button:hover{border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}button.danger:hover{border-color:var(--bad);color:var(--bad)}button.primary{border-color:var(--accent);color:var(--accent)}button.primary:hover{background:#22d3ee1f}.hint{color:var(--text-dim);font-size:11px;font-family:var(--mono)}.main{flex:1;grid-template-columns:1.7fr 1fr;gap:0;min-height:0;display:grid}.col{flex-direction:column;min-height:0;display:flex;overflow:hidden}.col:last-child{scrollbar-width:thin;scrollbar-color:var(--line) transparent;overflow-y:auto}.col:last-child::-webkit-scrollbar{width:8px}.col:last-child::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}.col:last-child::-webkit-scrollbar-track{background:0 0}.graph-col{border-right:1px solid var(--line)}.panel{border-bottom:1px solid var(--line);padding:10px 14px}.panel:last-child{border-bottom:none}.panel h3{letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-size:11px;font-family:var(--mono);margin:0 0 8px}.graph-canvas{background:#070b11;flex:1;min-height:0;position:relative}.metrics{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.metric{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}.metric .k{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;font-size:10px}.metric .v{font-family:var(--mono);margin-top:2px;font-size:17px}.metric .v.good{color:var(--good)}.metric .v.bad{color:var(--bad)}.metric .v.warn{color:var(--warn)}.metric .unit{color:var(--text-dim);margin-left:3px;font-size:10px}.compare{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:12px}.compare th,.compare td{text-align:right;border-bottom:1px solid var(--line);padding:4px 8px}.compare th:first-child,.compare td:first-child{text-align:left;color:var(--text-dim);font-family:var(--sans);font-size:11px}.compare .worse{color:var(--bad)}.compare .better{color:var(--good)}.compare .same{color:var(--text-dim)}.timeline{font-family:var(--mono);flex:1;padding:8px 14px;font-size:11px;overflow-y:auto}.tl-event{border-bottom:1px dashed #1d283699;gap:10px;padding:4px 0;display:flex}.tl-time{color:var(--text-dim);white-space:nowrap}.tl-stage{color:var(--accent-2);white-space:nowrap;min-width:140px}.tl-stage.ai{color:var(--warn)}.tl-msg{color:var(--text)}.tl-badge.real{color:var(--good)}.tl-badge.fallback{color:var(--warn)}.trace{font-family:var(--mono);font-size:12px;line-height:1.55}.trace .step{border-left:2px solid var(--accent-2);background:var(--bg-panel-2);border-radius:4px;margin:6px 0;padding:6px 8px}.trace .rejected{border-left-color:var(--bad)}.trace .ok{border-left-color:var(--good)}.trace .whisper{color:var(--text-dim);font-size:11px}.ai-quote{border-left:2px solid var(--warn);background:#f59e0b0f;border-radius:4px;margin:8px 0;padding:8px 10px}.ai-quote .src{color:var(--warn);letter-spacing:.08em;text-transform:uppercase;font-size:10px}.verdict{font-family:var(--mono);border-radius:8px;margin:8px 0;padding:8px 12px}.verdict.ok{color:var(--good);background:#10b98114;border:1px solid #10b98159}.verdict.fail{color:var(--bad);background:#ef444414;border:1px solid #ef444459}.loading{color:var(--text-dim);font-family:var(--mono);padding:20px}.error-banner{color:var(--bad);font-family:var(--mono);background:#ef44441a;padding:10px 16px;font-size:12px}