:root{
  --bg:#0a0e17; --bg2:#0d1220; --panel:#111828; --panel2:#0e1420;
  --border:#1e2940; --border2:#2b3a56; --text:#e6ecf7; --muted:#8ea3c2; --dim:#63758f;
  --cyan:#22d3ee; --blue:#3b82f6; --indigo:#818cf8; --violet:#a78bfa;
  --green:#22c55e; --yellow:#facc15; --orange:#fb923c; --red:#ef4444; --pink:#f472b6;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --sans:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;
  background:linear-gradient(180deg,#0c1220,#090d18);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand .mk{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:21px;
  background:linear-gradient(135deg,#22d3ee,#6366f1);box-shadow:0 0 22px rgba(59,130,246,.45)}
.brand b{font-size:17px;background:linear-gradient(90deg,#67e8f9,#a5b4fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .sub{font-size:10.5px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase}
.models{display:flex;gap:8px;flex-wrap:wrap}
.mchip{font-size:11px;color:#a9bcda;background:#0f1a2c;border:1px solid var(--border);padding:5px 11px;border-radius:999px}
.mchip b{color:#cfe0f5;font-family:var(--mono)}
.mchip.local{color:#86efac;background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3)}

.layout{display:grid;grid-template-columns:320px 1fr;gap:0;align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}}

/* config sidebar */
.cfg{position:sticky;top:65px;height:calc(100vh - 65px);overflow:auto;padding:16px;border-right:1px solid var(--border);background:#0b1019}
.cfg::-webkit-scrollbar{width:8px}.cfg::-webkit-scrollbar-thumb{background:#1c2740;border-radius:8px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 15px;margin-bottom:14px}
.card h3{margin:0 0 12px;font-size:12.5px;color:#bcd0ec;text-transform:uppercase;letter-spacing:.6px;
  display:flex;align-items:center;gap:8px}
.card label{display:block;font-size:11px;color:var(--muted);margin:8px 0 4px;font-weight:600}
select,input[type=text],input[type=number],input[type=file],textarea{width:100%;background:#080d16;color:var(--text);
  border:1px solid var(--border2);border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit;outline:none}
select:focus,input:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
textarea{font-family:var(--mono);font-size:12px;line-height:1.5;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:11px;color:var(--dim);margin-top:6px;line-height:1.45}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tab{flex:1;background:#0f1a2c;border:1px solid var(--border);color:#bcd0ec;padding:8px;border-radius:9px;font-size:12px;cursor:pointer;font-weight:600}
.tab.active{background:linear-gradient(180deg,rgba(34,211,238,.18),rgba(129,140,248,.1));border-color:rgba(34,211,238,.4);color:#fff}
.switch{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#c3d0e4;cursor:pointer;text-transform:none;font-weight:500}
.switch input{width:auto}
.btn{width:100%;background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;border:0;padding:11px;border-radius:10px;
  font-size:13.5px;font-weight:700;cursor:pointer;margin-top:10px;transition:.15s}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:linear-gradient(135deg,#22d3ee,#6366f1);margin:0;width:auto;flex:0 0 auto;padding:13px 30px}
.btn.busy{opacity:.7;pointer-events:none}

/* work area */
.work{padding:18px 22px 60px;min-height:calc(100vh - 65px)}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:16px;overflow:hidden}
.ph{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
.ph h2{margin:0;font-size:14px;color:#dbe6f5;display:flex;align-items:center;gap:8px}
.pb{padding:14px 16px}
.chip{font-size:11px;color:var(--muted);background:#0f1a2c;border:1px solid var(--border);padding:3px 10px;border-radius:999px}

.askrow{display:flex;gap:10px}
.askrow input{flex:1;font-size:15px;padding:13px 15px}

/* chunks */
.chunks{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.chunk{display:flex;gap:10px;background:#0c1524;border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:12.5px}
.chunk .n{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;color:#67e8f9;background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.25);border-radius:6px;padding:2px 7px;height:fit-content}
.chunk .tx{flex:1;color:#c7d6ea;line-height:1.5;white-space:pre-wrap;max-height:66px;overflow:hidden}
.chunk .ln{flex:0 0 auto;font-size:10px;color:var(--dim);font-family:var(--mono)}

/* result pipeline */
.step{background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:16px;overflow:hidden}
.step-h{padding:11px 16px;border-bottom:1px solid var(--border);font-size:13px;color:#cfdbec;font-weight:700;
  display:flex;align-items:center;gap:9px}
.step-h .num{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#22d3ee,#6366f1);
  display:grid;place-items:center;font-size:11px;color:#04121a;font-weight:800}
.step-b{padding:14px 16px}
.passage{background:#0c1524;border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:9px;
  padding:10px 12px;margin-bottom:8px;font-size:12.5px}
.passage .meta{display:flex;gap:10px;align-items:center;margin-bottom:6px;font-size:11px}
.passage .rank{font-family:var(--mono);color:#94a3b8}
.score{font-family:var(--mono);font-weight:700;padding:1px 8px;border-radius:6px;font-size:11px}
.score.sim{background:rgba(34,211,238,.14);color:#67e8f9}
.score.rr{background:rgba(167,139,250,.16);color:#c4b5fd}
.passage .txt{color:#c7d6ea;line-height:1.55;white-space:pre-wrap;max-height:90px;overflow:auto}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.twocol{grid-template-columns:1fr}}
.colh{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-weight:700}
.rrrow{display:flex;align-items:center;gap:8px;background:#0c1524;border:1px solid var(--border);border-radius:8px;padding:7px 10px;margin-bottom:6px;font-size:12px}
.rrrank{font-family:var(--mono);font-size:10px;color:#67e8f9;flex:0 0 26px}
.rrtx{flex:1;color:#b6c6de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moved{color:var(--green)}.moved.down{color:var(--orange)}

.ctxbox{background:#05080f;border:1px solid var(--border);border-radius:10px;padding:13px;font-family:var(--mono);
  font-size:11.5px;color:#9fb3d4;line-height:1.6;white-space:pre-wrap;max-height:260px;overflow:auto}
.answer{font-size:14.5px;line-height:1.7;color:#e6eef8;white-space:pre-wrap}
.confbar{display:flex;align-items:center;gap:12px;margin-top:12px}
.confmeter{flex:1;height:10px;background:#0a1122;border-radius:6px;overflow:hidden}
.confmeter i{display:block;height:100%;border-radius:6px}
.confnum{font-family:var(--mono);font-weight:800;font-size:15px}
.confreason{font-size:12px;color:var(--muted);margin-top:6px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.vs{grid-template-columns:1fr}}
.vsbox{background:#0c1524;border:1px solid var(--border);border-radius:10px;padding:12px}
.vsbox.rag{border-top:3px solid var(--green)} .vsbox.plain{border-top:3px solid var(--dim)}
.vsbox h4{margin:0 0 8px;font-size:12px;color:#cfdbec}
.vsbox .t{font-size:13px;line-height:1.6;color:#c7d6ea;white-space:pre-wrap;max-height:220px;overflow:auto}

.exp{width:100%;border-collapse:collapse;font-size:12.5px}
.exp th,.exp td{padding:9px 11px;border-bottom:1px solid var(--border);text-align:left}
.exp th{color:#a9bcda;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px}
.exp td.mono{font-family:var(--mono);font-size:11.5px;color:#9fb3d4}
.badge{font-family:var(--mono);font-weight:700;padding:1px 8px;border-radius:6px;font-size:11px}

.welcome{text-align:center;padding:60px 20px;color:var(--muted)}
.welcome .big{font-size:52px;margin-bottom:16px}
.welcome h2{color:#dbe6f5;margin:0 0 10px}
.welcome p{font-size:13.5px;line-height:1.7;max-width:520px;margin:0 auto}
.thinking{display:flex;align-items:center;gap:10px;color:var(--cyan);font-size:13px;padding:8px 0}
.thinking .d span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin:0 2px;animation:b 1.2s infinite}
.thinking .d span:nth-child(2){animation-delay:.15s}.thinking .d span:nth-child(3){animation-delay:.3s}
@keyframes b{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-5px);opacity:1}}
.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5;border-radius:10px;padding:12px 14px;font-size:13px}