:root {
  color-scheme: light dark;
  --bg: #f4f6fb; --panel: #ffffff; --surface: #edf1f7; --line: #d4dae5;
  --text: #152033; --muted: #657189; --accent: #087f69; --danger: #b42338;
  --shadow: 0 12px 36px rgba(25, 35, 55, .08);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0e1219; --panel:#171d27; --surface:#222b38; --line:#303a49; --text:#eef3f8; --muted:#a5b0c0; --accent:#61d3b4; --danger:#ff8994; --shadow:none; }
}
[data-theme="light"] { color-scheme:light; --bg:#f4f6fb; --panel:#fff; --surface:#edf1f7; --line:#d4dae5; --text:#152033; --muted:#657189; --accent:#087f69; --danger:#b42338; --shadow:0 12px 36px rgba(25,35,55,.08); }
[data-theme="dark"] { color-scheme:dark; --bg:#0e1219; --panel:#171d27; --surface:#222b38; --line:#303a49; --text:#eef3f8; --muted:#a5b0c0; --accent:#61d3b4; --danger:#ff8994; --shadow:none; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif; }
a { color:var(--accent); }
button,input,select,textarea { font:inherit; }
button,input,select,textarea { border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); padding:10px 12px; }
button { cursor:pointer; font-weight:650; }
button.primary { background:var(--accent); color:#fff; border-color:transparent; }
button.danger { color:var(--danger); }
button:disabled { opacity:.55; cursor:wait; }
:where(button,input,select,textarea,a):focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent); outline-offset:2px; }
.shell { width:min(1180px,calc(100% - 28px)); margin:24px auto 48px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.topbar h1 { margin:0; font-size:23px; }
.tools,.row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.stack { display:grid; gap:12px; }
.muted { color:var(--muted); }
.error { color:var(--danger); }
[hidden] { display:none!important; }
label { display:grid; gap:5px; }
textarea { width:100%; min-height:92px; resize:vertical; }
table { width:100%; border-collapse:collapse; }
th,td { border-bottom:1px solid var(--line); padding:9px 7px; text-align:left; vertical-align:top; }
.table-wrap { overflow:auto; }
.badge { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:2px 8px; color:var(--muted); font-size:12px; }
.metric { background:var(--surface); padding:12px; border-radius:12px; }
.metric strong { display:block; font-size:20px; }
.login { max-width:480px; margin:10vh auto; }
.transcript { min-height:42vh; max-height:64vh; overflow:auto; display:grid; gap:10px; padding:4px; }
.message { max-width:86%; white-space:pre-wrap; overflow-wrap:anywhere; border-radius:14px; padding:11px 13px; background:var(--surface); }
.message.user { justify-self:end; background:color-mix(in srgb,var(--accent) 18%,var(--surface)); }
.message.assistant { justify-self:start; }
.composer { margin-top:14px; }
nav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
nav a { text-decoration:none; border:1px solid var(--line); padding:7px 10px; border-radius:9px; }
section h2 { margin:0 0 12px; font-size:17px; }
@media (max-width:680px) { .topbar { align-items:flex-start; flex-direction:column; } .message { max-width:96%; } .shell { width:min(100% - 20px,1180px); } }