:root { color-scheme: light dark; --fg:#1d1d1f; --bg:#f6f6f7; --card:#fff; --line:#d9d9de; --muted:#6b6b73; --accent:#3346c2; --danger:#c2333d;
  --green:#1f8a4c; --green-bg:#e3f4ea; --amber:#9a6200; --amber-bg:#fdf1d8; --red:#c2333d; --red-bg:#fbe4e6; --grey-bg:#ececef; }
@media (prefers-color-scheme: dark) { :root { --fg:#ececf0; --bg:#141416; --card:#1d1d21; --line:#33333a; --muted:#9a9aa3; --accent:#8e9bff; --danger:#ff7a83;
  --green:#6fd59a; --green-bg:#173826; --amber:#f2c063; --amber-bg:#3a2d10; --red:#ff7a83; --red-bg:#3d1a1e; --grey-bg:#2a2a30; } }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; font:15px/1.55 -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif; color:var(--fg); background:var(--bg); -webkit-text-size-adjust:100%; }
header { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top, 0px)); border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:5; }
.brand { white-space:nowrap; }
nav { display:flex; gap:4px 14px; align-items:center; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
nav a { color:var(--muted); text-decoration:none; white-space:nowrap; padding:6px 0; }
nav a.active { color:var(--fg); font-weight:600; border-bottom:2px solid var(--accent); }
main { padding:16px; padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); max-width:1240px; margin:0 auto; }
h1 { font-size:22px; margin:8px 0 12px; }
h2 { font-size:17px; margin:0 0 8px; }
section { margin-bottom:20px; }
a { color:var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; display:grid; gap:12px; max-width:560px; }
.card.narrow { max-width:380px; margin:24px auto; }
.card.wide { max-width:none; }
.lead { font-size:16px; margin:0; }
label { display:grid; gap:4px; }
label.check { display:flex; gap:8px; align-items:center; }
label.small { font-size:12px; color:var(--muted); }
small, .hint, .empty, .muted { color:var(--muted); }
.hint { margin:4px 0 12px; }
input.short { width:96px; }
input[type=text], input[type=number], input[type=password] { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); min-height:40px; }
button { font:inherit; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); cursor:pointer; min-height:40px; }
button.small { padding:4px 10px; min-height:32px; font-size:13px; }
button[type=submit] { background:var(--accent); border-color:var(--accent); color:#fff; justify-self:start; }
button.danger { color:var(--danger); border-color:var(--danger); }
button.link { border:none; background:none; color:var(--muted); padding:0; min-height:0; }
button:disabled { opacity:.5; cursor:default; }
form.inline { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:10px; background:var(--card); }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap; }
tr:last-child td { border-bottom:none; }
th { font-weight:600; font-size:13px; }
.th-hint { display:block; font-weight:400; font-size:11px; white-space:normal; min-width:7em; max-width:12em; }
.cell-note { display:block; font-size:12px; color:var(--muted); white-space:normal; max-width:16em; }
.details { white-space:normal; word-break:break-all; display:inline-block; max-width:480px; }
.actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size:12px; }
.flash { padding:8px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); }
.flash.error { border-color:var(--danger); color:var(--danger); }
.more { margin-top:8px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-top:16px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.tile-label { color:var(--muted); font-size:13px; }
.tile-value { font-size:28px; font-weight:600; line-height:1.2; margin-top:4px; }
.tile-note { color:var(--muted); font-size:12px; margin-top:2px; }
.badge, .pill, .source { display:inline-block; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:600; white-space:nowrap; background:var(--grey-bg); color:var(--muted); }
.badge.green, .pill.ok { background:var(--green-bg); color:var(--green); }
.badge.amber, .pill.warn { background:var(--amber-bg); color:var(--amber); }
.badge.red, .pill.bad { background:var(--red-bg); color:var(--red); }
.pill { font-weight:500; }
.pill.muted { background:none; padding:0; }
.health.green { border-left:4px solid var(--green); }
.health.amber { border-left:4px solid var(--amber); }
.health.red { border-left:4px solid var(--red); }
.source.admin { background:var(--amber-bg); color:var(--amber); }
.source.killFile { background:var(--red-bg); color:var(--red); }
.switches { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:16px; }
.switch { max-width:none; align-content:start; }
.switch p { margin:0; }
.switch-head { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
.switch-head h2 { margin:0; }
.switch-value { font-size:16px; }
.warning { color:var(--amber); background:var(--amber-bg); border-radius:8px; padding:8px 10px; }
.switch-form { display:grid; gap:10px; border-top:1px solid var(--line); padding-top:12px; }
.choices { display:flex; flex-wrap:wrap; gap:8px 16px; }
.choice { display:flex; gap:6px; align-items:center; min-height:36px; }
.models { margin:0; padding-left:1.4em; display:grid; gap:6px; width:100%; }
.models li { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.order { display:flex; gap:4px; }
.confirm { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; display:grid; gap:8px; }
.confirm p { margin:0; }
.transcript { position:fixed; inset:auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px; max-height:70vh; overflow:auto; z-index:10; box-shadow:0 8px 32px rgba(0,0,0,.25); max-width:760px; margin:0 auto; }
.transcript-head { display:flex; justify-content:space-between; align-items:center; }
.line { padding:6px 0; border-bottom:1px solid var(--line); }
.line .who { font-size:12px; color:var(--muted); }
.line.user .who { color:var(--accent); }
.transcript-list { max-height:none; gap:0; }
.transcript-list .line:last-child { border-bottom:none; }
.expandable { white-space:normal; word-break:break-word; }
@media (max-width: 600px) {
  main { padding:12px; }
  h1 { font-size:20px; }
  .tile-value { font-size:24px; }
}