:root { --bg:#f5f6f8; --fg:#1b1f24; --card:#fff; --line:#d9dee4; --mut:#66707c; --acc:#2563eb; --ok:#1a7f37; --bad:#c62828; --warn:#b45309; --okbg:#e6f4ea; --badbg:#fdecea; --warnbg:#fff4e0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#14171b; --fg:#e8ebef; --card:#1e2227; --line:#343a42; --mut:#9aa4af; --acc:#60a5fa; --ok:#4ade80; --bad:#f87171; --warn:#fbbf24; --okbg:#10301b; --badbg:#3a1616; --warnbg:#3a2a10; } }
:root[data-theme="dark"] { --bg:#14171b; --fg:#e8ebef; --card:#1e2227; --line:#343a42; --mut:#9aa4af; --acc:#60a5fa; --ok:#4ade80; --bad:#f87171; --warn:#fbbf24; --okbg:#10301b; --badbg:#3a1616; --warnbg:#3a2a10; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.45 system-ui, sans-serif; }
h1 { font-size:18px; margin:0; } h2 { font-size:16px; margin:0 0 12px; } h3 { font-size:14px; margin:0 0 6px; }
.center { min-height:100vh; display:grid; place-items:center; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; }
.narrow { width:100%; max-width:360px; display:grid; gap:12px; }
header { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.grow { flex:1; }
nav { display:flex; gap:4px; padding:8px 16px 0; overflow-x:auto; }
nav button { background:none; border:0; border-bottom:2px solid transparent; padding:8px 12px; color:var(--mut); cursor:pointer; font:inherit; }
nav button.on { color:var(--fg); border-color:var(--acc); font-weight:600; }
main { padding:16px; max-width:1100px; margin:0 auto; }
button { font:inherit; padding:7px 14px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; }
button.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
button.ghost { background:transparent; }
button.danger { color:var(--bad); }
button.sm { padding:3px 9px; font-size:13px; }
button:disabled { opacity:.5; cursor:default; }
input, select { font:inherit; width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
input[type=checkbox] { width:auto; }
label { display:grid; gap:3px; font-size:13px; color:var(--mut); }
label.inline { display:flex; gap:8px; align-items:center; color:var(--fg); font-size:14px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .end { justify-content:flex-end; margin-top:14px; }
.bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:8px; flex-wrap:wrap; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
th { color:var(--mut); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
tr:last-child td { border-bottom:0; }
.wrap { overflow-x:auto; }
.badge { display:inline-block; padding:1px 8px; border-radius:99px; font-size:12px; background:var(--line); color:var(--fg); }
.badge.ok { background:var(--okbg); color:var(--ok); } .badge.bad { background:var(--badbg); color:var(--bad); } .badge.warn { background:var(--warnbg); color:var(--warn); }
.err { color:var(--bad); margin:6px 0 0; min-height:1em; font-size:13px; }
.msg { padding:8px 12px; border-radius:6px; background:var(--okbg); color:var(--ok); } .msg.bad { background:var(--badbg); color:var(--bad); }
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
.link { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:3px 0; font-size:14px; }
.mut { color:var(--mut); font-size:13px; }
dialog { border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); width:min(640px, calc(100vw - 24px)); padding:16px; }
dialog::backdrop { background:rgba(0,0,0,.45); }
#dlgBody { display:grid; gap:10px; }
.members { display:grid; gap:6px; max-height:240px; overflow:auto; border:1px solid var(--line); border-radius:6px; padding:8px; }
.members .m { display:grid; grid-template-columns:1fr 90px; gap:8px; align-items:center; }
pre { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px; overflow:auto; font-size:12px; }
code { font-family:ui-monospace, monospace; }
audio { height: 32px; max-width: 220px; }
input[type=file] { padding: 6px; }
.dest { flex-wrap:nowrap; margin:4px 0; } .dest select { flex:1; min-width:0; } .dest .d-digit { flex:0 0 64px; }