*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg0:#0a0a0a;--bg1:#111;--bg2:#1a1a1a;--bg3:#141414;--bgH:#1e1e1e;
--bd:#262626;--bd2:#333;--t1:#ededed;--t2:#888;--t3:#555;
--ac:#3b82f6;--acH:#2563eb;--acL:rgba(59,130,246,.1);
--ok:#22c55e;--wn:#eab308;--er:#ef4444;
--sw:220px;--r:8px;--rs:6px;--tr:.2s ease;
}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg0);color:var(--t1);line-height:1.6;overflow:hidden}
.app{display:flex;height:100vh}
.sb{width:var(--sw);min-width:var(--sw);background:var(--bg1);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow-y:auto;transition:transform var(--tr);z-index:100}
.sb-h{padding:20px 16px 12px;border-bottom:1px solid var(--bd)}
.sb-h h1{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}
.sb-h .sub{font-size:11px;color:var(--t3);margin-top:2px}
.sb-n{padding:8px;flex:1}
.ni{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--rs);color:var(--t2);cursor:pointer;font-size:13px;transition:all var(--tr);margin-bottom:2px;user-select:none}
.ni:hover{background:var(--bgH);color:var(--t1)}
.ni.act{background:var(--acL);color:var(--ac);font-weight:500}
.ni .e{font-size:16px;width:22px;text-align:center}
.mn{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.ph{padding:24px 32px 16px;border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:10;background:var(--bg0)}
.ph h2{font-size:20px;font-weight:600}
.ph p{font-size:13px;color:var(--t2);margin-top:4px}
.pc{padding:24px 32px;flex:1}
.cd{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r);padding:20px;margin-bottom:16px}
.cd-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cd-t{font-size:14px;font-weight:600}
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.sc{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r);padding:20px}
.sc-l{font-size:12px;color:var(--t2);margin-bottom:8px}
.sc-v{font-size:28px;font-weight:700}
.blue{color:var(--ac)}.green{color:var(--ok)}.yellow{color:var(--wn)}.red{color:var(--er)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--bd)}
th{font-weight:500;color:var(--t2);font-size:12px;text-transform:uppercase;letter-spacing:.5px;background:var(--bg2)}
tr:nth-child(even){background:rgba(255,255,255,.02)}
tr:hover{background:var(--bgH)}
.bt{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--rs);border:1px solid var(--bd);background:var(--bg2);color:var(--t1);font-size:13px;cursor:pointer;transition:all var(--tr);white-space:nowrap}
.bt:hover{background:var(--bgH);border-color:var(--bd2)}
.bt-p{background:var(--ac);border-color:var(--ac);color:#fff}
.bt-p:hover{background:var(--acH)}
.bt-d{background:transparent;border-color:var(--er);color:var(--er)}
.bt-d:hover{background:rgba(239,68,68,.1)}
.bt-s{padding:5px 10px;font-size:12px}
.bg{display:flex;gap:8px;flex-wrap:wrap}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:12px;color:var(--t2);margin-bottom:6px;font-weight:500}
input,select,textarea{width:100%;padding:8px 12px;border-radius:var(--rs);border:1px solid var(--bd);background:var(--bg0);color:var(--t1);font-size:13px;outline:none;transition:border-color var(--tr)}
input:focus,select:focus,textarea:focus{border-color:var(--ac)}
textarea{resize:vertical;min-height:60px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot.g{background:var(--ok)}.dot.r{background:var(--er)}.dot.y{background:var(--wn)}.dot.gr{background:var(--t3)}
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:500}
.b-ok{background:rgba(34,197,94,.15);color:var(--ok)}.b-er{background:rgba(239,68,68,.15);color:var(--er)}
.b-wn{background:rgba(234,179,8,.15);color:var(--wn)}.b-in{background:rgba(59,130,246,.15);color:var(--ac)}
.mo{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.md{background:var(--bg1);border:1px solid var(--bd);border-radius:12px;padding:24px;width:90%;max-width:560px;max-height:80vh;overflow-y:auto}
.md h3{margin-bottom:16px;font-size:16px}
.md-a{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.tc{position:fixed;top:16px;right:16px;z-index:300;display:flex;flex-direction:column;gap:8px}
.ts{padding:10px 16px;border-radius:var(--rs);font-size:13px;animation:sIn .3s ease;max-width:360px}
.ts-ok{background:rgba(34,197,94,.15);border:1px solid var(--ok);color:var(--ok)}
.ts-er{background:rgba(239,68,68,.15);border:1px solid var(--er);color:var(--er)}
.ts-in{background:rgba(59,130,246,.15);border:1px solid var(--ac);color:var(--ac)}
@keyframes sIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.bc{display:flex;flex-direction:column;gap:10px}
.br{display:flex;align-items:center;gap:12px}
.bl{width:120px;font-size:12px;color:var(--t2);text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis}
.bt-track{flex:1;height:24px;background:var(--bg2);border-radius:4px;overflow:hidden}
.bt-fill{height:100%;border-radius:4px;background:var(--ac);transition:width .5s ease;display:flex;align-items:center;padding-left:8px;font-size:11px;color:#fff}
.bv{font-size:12px;color:var(--t2);width:50px;flex-shrink:0}
.cc{display:flex;flex-direction:column;height:calc(100vh - 120px)}
/* Tab bar for chat */
.chat-tabs{display:flex;border-bottom:2px solid var(--bd);margin-bottom:12px}
.chat-tab{padding:10px 24px;font-size:14px;font-weight:600;cursor:pointer;border:none;background:none;color:var(--t3);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--tr)}
.chat-tab:hover{color:var(--t2)}
.chat-tab.active{color:var(--ac);border-bottom-color:var(--ac);background:var(--acL)}
.ct{display:flex;gap:12px;align-items:center;padding:0 0 12px;flex-wrap:wrap}
.ct select,.ct input{width:auto}
.cm{flex:1;overflow-y:auto;padding:16px 0;display:flex;flex-direction:column;gap:12px}
.msg{max-width:75%;padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:var(--ac);color:#fff;border-bottom-right-radius:4px}
.msg.assistant{align-self:flex-start;background:var(--bg2);border-bottom-left-radius:4px}
.msg-m{font-size:11px;color:var(--t3);margin-top:6px}
.ci{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--bd)}
.ci textarea{flex:1;min-height:44px;max-height:120px}
.pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-bottom:24px}
.pool-card{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r);padding:16px;cursor:pointer;transition:border-color var(--tr)}
.pool-card:hover{border-color:var(--ac)}
.pool-card.active{border-color:var(--ac)}
.pool-name{font-size:16px;font-weight:600;margin-bottom:8px}
.pool-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;font-size:12px;color:var(--t2)}
.pool-key{font-family:'SF Mono','Fira Code',monospace;font-size:12px;color:var(--t3);margin-top:4px}
.pt-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;background:rgba(59,130,246,.15);color:var(--ac)}
.st-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500}
.st-badge.free{background:rgba(34,197,94,.15);color:var(--ok)}
.st-badge.paid{background:rgba(234,179,8,.15);color:var(--wn)}
.mt{display:none;position:fixed;top:12px;left:12px;z-index:150;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rs);padding:8px 12px;color:var(--t1);cursor:pointer;font-size:18px}
@media(max-width:768px){
  .mt{display:block}
  .sb{position:fixed;left:0;top:0;height:100%;transform:translateX(-100%)}
  .sb.open{transform:translateX(0)}
  .pc{padding:16px}.ph{padding:16px;padding-top:48px}
  .sg{grid-template-columns:repeat(2,1fr)}
  .pool-grid{grid-template-columns:1fr}
}
/* Nav section */
.ns{margin-bottom:4px}
.ns-h{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;user-select:none}
.ns-h:hover{color:var(--t2)}
.ns-arrow{font-size:10px;transition:transform .2s}
.ns.collapsed .ns-arrow{transform:rotate(-90deg)}
.ns.collapsed .ns-items{display:none}
.ns-items{padding:0}
.ns+.ns{margin-top:8px;border-top:1px solid var(--bd);padding-top:8px}
.empty{text-align:center;padding:48px 20px;color:var(--t3)}
.empty .e{font-size:48px;margin-bottom:12px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.g2{grid-template-columns:1fr}}
.ld{text-align:center;padding:40px;color:var(--t3)}
.mono{font-family:'SF Mono','Fira Code',monospace;font-size:12px}
.pb{background:var(--bg2);border-radius:4px;height:22px;margin:4px 0;overflow:hidden;position:relative}
.pb-i{height:100%;border-radius:4px;color:#fff;font-size:12px;line-height:22px;text-align:center;white-space:nowrap;transition:width .5s}
/* Chat streaming cursor & status */
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.msg-status{font-size:12px;padding:4px 8px;border-radius:4px;margin:4px 0;display:inline-block}
.msg-status.thinking{color:#fbbf24;background:rgba(251,191,36,.1);animation:pulse-think 1.5s ease-in-out infinite}
.msg-status.connecting{color:#60a5fa;background:rgba(96,165,250,.1);animation:pulse-think 1.2s ease-in-out infinite}
.msg-status.streaming{color:#34d399;background:rgba(52,211,153,.1)}
.msg-status.processing{color:#a78bfa;background:rgba(167,139,250,.1);animation:pulse-think 1s ease-in-out infinite}
.msg-status.error{color:#f87171;background:rgba(248,113,113,.1)}
@keyframes pulse-think{0%,100%{opacity:1}50%{opacity:.5}}