:root{--bg:#f6f7f9;--panel:#fff;--line:#e3e6ea;--text:#1d2530;--muted:#66717f;--brand:#1f5eff;--brand-soft:#e8eeff;
--server:#1e8a5a;--server-soft:#e4f5ec;--openai:#1f5eff;--openai-soft:#e8eeff;--ollama:#7a3fe0;--ollama-soft:#efe8fb;
--warn:#b45309;--warn-soft:#fff4e5;--err:#c0392b;--radius:10px;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--brand)}button{font:inherit;cursor:pointer}
.muted{color:var(--muted)}.mono{font-family:var(--mono);font-size:12px}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;background:#eef1f5;color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--server-soft);color:var(--server)}.pill.bad{background:#fde8e6;color:var(--err)}
.badge{display:inline-block;padding:1px 8px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.2px;text-transform:uppercase}
.badge.server{background:var(--server-soft);color:var(--server)}.badge.openai{background:var(--openai-soft);color:var(--openai)}.badge.ollama{background:var(--ollama-soft);color:var(--ollama)}
header.top{display:flex;align-items:center;gap:20px;padding:0 20px;height:56px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:17px}.brand span{color:var(--brand);font-weight:500}
nav#tabs{display:flex;gap:4px;flex:1}nav#tabs button{background:none;border:0;padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:500}
nav#tabs button.active{background:var(--brand-soft);color:var(--brand)}nav#tabs button:hover{color:var(--text)}
header .right{display:flex;align-items:center;gap:10px}
button.ghost{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--muted)}
button.primary{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:9px 16px;font-weight:600}
button.primary:disabled{opacity:.5;cursor:default}
button.small{padding:4px 10px;font-size:12px;border-radius:6px}
button.danger{color:var(--err);border-color:#f3c9c4}
main{max-width:1400px;margin:0 auto;padding:20px}
.tab{display:none}.tab.active{display:block}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
h2{font-size:18px;margin:0 0 12px}h3{font-size:15px;margin:18px 0 8px}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-weight:600;font-size:12px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
input[type=text],input[type=number],input[type=password],select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);width:100%}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* chat */
.chat-layout{display:grid;grid-template-columns:320px 1fr;gap:16px;min-height:calc(100vh - 100px)}
.sidebar{display:flex;flex-direction:column;gap:12px}
.mode-card{display:block;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:#fff}
.mode-card.active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.mode-card .t{font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:6px}.mode-card .d{color:var(--muted);font-size:12px;margin-top:2px}
.mode-card input{display:none}
.chat{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-height:70vh}
.messages{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.msg{max-width:860px}.msg.user{align-self:flex-end;background:var(--brand-soft);padding:10px 14px;border-radius:12px 12px 2px 12px}
.msg.assistant{align-self:stretch}
.msg .body{white-space:normal}.msg .body p{margin:0 0 8px}.msg .body ul{margin:0 0 8px 18px;padding:0}
.ref{font-family:var(--mono);font-size:11px;background:#eef1f5;padding:1px 5px;border-radius:4px;color:#334}
.steps{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;font-size:12px}
.step{display:flex;gap:8px;align-items:baseline;color:var(--muted)}.step .ms{font-family:var(--mono);min-width:56px;text-align:right}
.step .badge{min-width:58px;text-align:center}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
details{margin-top:8px}summary{cursor:pointer;color:var(--muted);font-size:12px}
.src{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0;font-size:12px;background:#fafbfc}
.src .h{font-weight:600;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.src pre{white-space:pre-wrap;margin:6px 0 0;font:12px/1.4 var(--mono);color:#445}
.trace{font-size:12px}.trace .step{margin:4px 0}.trace .detail{color:var(--text)}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.composer textarea{resize:none;height:44px}
.err{color:var(--err);background:#fde8e6;padding:8px 10px;border-radius:8px;font-size:13px}
.notice{background:var(--warn-soft);color:var(--warn);padding:8px 12px;border-radius:8px;font-size:13px}
/* compare */
.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;margin-top:12px}
.compare-card .body{font-size:13px;max-height:360px;overflow:auto}
.kpi{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}.kpi div{font-size:12px;color:var(--muted)}.kpi b{display:block;font-size:15px;color:var(--text)}
/* how */
.how-mode{margin-bottom:18px}.flow{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.flow .fs{display:grid;grid-template-columns:24px 80px 1fr;gap:10px;align-items:start;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fafbfc}
.flow .n{width:22px;height:22px;border-radius:50%;background:#eef1f5;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.flow .fs.openai{border-left:3px solid var(--openai)}.flow .fs.server{border-left:3px solid var(--server)}.flow .fs.ollama{border-left:3px solid var(--ollama)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.two ul{margin:4px 0 0 18px;padding:0}
.box{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fafbfc}
.box.leaves{border-color:#c9d6ff}.box.stays{border-color:#bfe6d2}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.proscons ul{margin:4px 0 0 18px;padding:0}
/* docs */
.drop{border:2px dashed var(--line);border-radius:10px;padding:18px;text-align:center;color:var(--muted)}
/* eval */
.progress{height:8px;background:#eef1f5;border-radius:4px;overflow:hidden}.progress i{display:block;height:100%;background:var(--brand);width:0}
.hit{color:var(--server);font-weight:600}.miss{color:var(--err);font-weight:600}
/* login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;width:360px;display:flex;flex-direction:column;gap:12px}
.login-card h1{margin:0;font-size:22px}.login-card h1 span{color:var(--brand);font-weight:500}
@media (max-width:900px){.chat-layout{grid-template-columns:1fr}.two,.proscons{grid-template-columns:1fr}}