:root{--bg:#f6f7f9;--panel:#fff;--text:#1d2129;--muted:#6b7280;--line:#e3e6ea;--accent:#2563eb;--accent-soft:#e8efff;
--bad:#b42318;--bad-soft:#fdecea;--warn:#a15c00;--warn-soft:#fff4e0;--ok:#05603a;--ok-soft:#e6f6ee;--admin-soft:#fff8d6;--radius:10px;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.45;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#121417;--panel:#1b1e23;--text:#e6e8eb;--muted:#9aa1ab;--line:#2c3138;--accent:#6b9bff;--accent-soft:#1f2b45;
--bad:#ff8a80;--bad-soft:#3a1d1b;--warn:#ffc266;--warn-soft:#3a2c14;--ok:#7ad6a5;--ok-soft:#173327;--admin-soft:#38321a}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
header{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
header .bar{max-width:1240px;margin:0 auto;padding:0 16px;min-height:56px;display:flex;align-items:center;gap:16px}
.brand{font-weight:700;color:var(--text);white-space:nowrap}
nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}nav::-webkit-scrollbar{display:none}
nav a{padding:7px 11px;border-radius:8px;color:var(--text);white-space:nowrap}nav a:hover{background:var(--bg);text-decoration:none}
nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
header .me{white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){header .bar{flex-wrap:wrap;gap:4px 12px;padding:8px 16px 6px}header nav{order:3;flex-basis:100%;margin:0 -6px}header .me{margin-left:auto}}
main{max-width:1240px;margin:0 auto;padding:16px}main.narrow{max-width:460px;padding-top:12vh}
h1{font-size:22px;margin:4px 0 14px}h2{font-size:16px;margin:0 0 10px}
section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}
.muted{color:var(--muted);font-weight:400}.hint{color:var(--muted);font-size:13px;margin:4px 0 10px}.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.flash{padding:10px 12px;border-radius:8px;background:var(--ok-soft);color:var(--ok)}.flash.err{background:var(--bad-soft);color:var(--bad)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px}.card .k{color:var(--muted);font-size:13px}
.card .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}.card .sub{color:var(--muted);font-size:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px}.grid2 section{margin:0}
.bars{display:grid;gap:4px}.bar{display:grid;grid-template-columns:44px 1fr 48px;gap:8px;align-items:center;font-size:13px;font-variant-numeric:tabular-nums}
.bar .b{background:var(--bg);border-radius:4px;height:12px;overflow:hidden}.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}.bar .n{text-align:right}
.list{list-style:none;margin:0;padding:0}.list li{padding:8px 0;border-bottom:1px solid var(--line)}.list li:last-child{border-bottom:0}
.list.small li{padding:4px 0;font-size:13px}.row1{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.preview{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.role{font-weight:600}.role.assistant{color:var(--accent)}.role.admin{color:var(--warn)}
.badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;background:var(--accent-soft);color:var(--accent);font-weight:600}
.badge.bad{background:var(--bad-soft);color:var(--bad)}.badge.warn{background:var(--warn-soft);color:var(--warn)}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600}tr.dim td{opacity:.55}
/* controls: one height for inputs, selects and buttons so rows line up */
input,select,textarea,button{font:inherit;color:inherit;margin:0}
input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:8px}
input,select{height:38px;padding:0 10px;min-width:0}select{padding-right:6px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
input[type=checkbox]{height:auto;width:auto;accent-color:var(--accent)}
textarea{width:100%;resize:vertical;padding:9px 10px;display:block}
button{height:38px;padding:0 14px;background:var(--panel);border:1px solid var(--line);border-radius:8px;cursor:pointer;white-space:nowrap;
display:inline-flex;align-items:center;justify-content:center;flex:none}
button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{filter:brightness(1.08)}
button.danger{color:var(--bad)}button.danger:hover{border-color:var(--bad)}button.small{height:30px;padding:0 10px;font-size:13px}
button.link{height:auto;background:none;border:0;color:var(--accent);padding:0}button.link:hover{text-decoration:underline}
/* form layouts */
form{margin:0 0 10px}form:last-child{margin-bottom:0}
.inline,.search,.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline>input,.inline>select,.search>input{flex:1 1 160px}.inline>input.num{flex:0 0 100px}.inline>select{flex:0 1 auto}
aside .inline>input:not(.num){flex-basis:60px}
.inline>.grow,.grow{flex:1 1 220px}.search{margin-bottom:14px}.search>select{flex:0 1 auto}
.btnrow{margin-top:2px}.btnrow>form{margin:0}
.stack{display:grid;gap:10px}.stack>button,.stack>.btnrow{justify-self:start}
.fl{font-size:13px;font-weight:600;margin:12px 0 6px}.fl:first-child{margin-top:0}
.right{margin-left:auto}.logout{margin:0}
.userpage{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:14px}.userpage aside section{margin-bottom:14px}
@media (max-width:900px){.userpage{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
.chat{max-height:68vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px;margin-bottom:10px}
.msg{max-width:86%;padding:8px 11px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.msg .meta{font-size:12px;color:var(--muted);margin-bottom:3px}.msg .text{white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user{align-self:flex-start}.msg.assistant{align-self:flex-end;background:var(--accent-soft);border-color:transparent}
.msg.admin{align-self:flex-end;background:var(--admin-soft);border-color:transparent}
.msg.hit{align-self:center;background:var(--bad-soft);border-color:transparent;max-width:94%}.msg.hit .meta{color:var(--bad)}
.sep{align-self:stretch;text-align:center;font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:4px}
.send{display:grid;gap:8px}.send>button{justify-self:end}.result{margin-top:10px;padding:10px 12px;border-radius:8px}.result.ok{background:var(--ok-soft)}.result.bad{background:var(--bad-soft)}
.pager{display:flex;gap:14px;align-items:center}pre{white-space:pre-wrap;background:var(--bg);padding:10px;border-radius:8px}
code{background:var(--bg);padding:1px 5px;border-radius:5px}details{margin-top:10px}
@media (max-width:600px){main{padding:12px 16px}.msg{max-width:96%}}
label{display:grid;gap:5px;font-size:14px}label>input,label>select,.stack>input,.stack>select{width:100%}
label.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.bare .stack>button{justify-self:stretch}
[hidden]{display:none!important}button.wide{width:100%;padding:11px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:16px 0}.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
table.cats td{vertical-align:middle}table.cats td:last-child{white-space:nowrap}.flash.warn{background:var(--warn-soft);color:var(--warn)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}header .me{color:var(--muted);font-size:14px}header .me.on{color:var(--accent)}
.qr{display:block;width:220px;height:220px;background:#fff;border-radius:8px;padding:6px;margin:8px 0}
.codes{font-family:ui-monospace,Consolas,monospace;font-size:16px;line-height:1.8;max-width:260px}
.copy{user-select:all;overflow-wrap:anywhere;background:var(--bg);padding:6px 8px;border-radius:6px}
.switch{margin:0}.switch select{font-weight:700;background:var(--bg);max-width:230px;border-color:transparent}.switch select:hover{border-color:var(--line)}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;align-items:end}button.link.danger{color:var(--bad)}
.pieces{margin:10px 0 0;padding-left:22px}.pieces li{margin-bottom:10px}.pieces .text{white-space:pre-wrap;font-size:13px}
pre.copy{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}
.narrowform{max-width:420px}.actions{display:flex;gap:6px;flex-wrap:wrap}.actions form{margin:0}.invite{border-color:var(--accent)}