:root { --bg:#0f1115; --card:#181b22; --line:#2a2f3a; --text:#e6e8ee; --muted:#8b93a5; --accent:#4f8cff; --danger:#e5484d; --ok:#30a46c; }
@media (prefers-color-scheme: light) { :root { --bg:#f5f6f8; --card:#fff; --line:#dde0e7; --text:#1b1f27; --muted:#667085; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); }
h1 { font-size:18px; margin:0; } h2 { font-size:16px; margin:0; }
main { max-width:860px; margin:0 auto; padding:16px; display:grid; gap:12px; }
main.wide { max-width:none; display:flex; flex-direction:column; height:calc(100dvh - 57px); }
main.wide > * { flex:none; } main.wide > .log-list { flex:1 1 auto; }
.filters { flex-wrap:nowrap; } .filters select { width:auto; flex:none; } .filters input { flex:1; min-width:0; }
.grid { display:grid; gap:8px; }
.card.nested { background:var(--bg); padding:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; display:grid; gap:8px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .between { justify-content:space-between; }
.form label { display:grid; gap:2px; } .form label span { color:var(--muted); font-size:13px; }
input, select { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:8px; font:inherit; width:100%; }
button { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:7px 12px; font:inherit; cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; } button.danger { color:var(--danger); }
.copy { display:flex; gap:8px; align-items:center; min-width:0; } .copy .k { width:70px; color:var(--muted); flex:none; }
.copy code { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--bg); padding:3px 6px; border-radius:4px; }
.muted { color:var(--muted); margin:0; } .status { margin:0; color:var(--muted); } .status.error { color:var(--danger); }
.badge { font-size:12px; padding:2px 8px; border-radius:99px; border:1px solid var(--line); color:var(--muted); }
.badge.idle { color:var(--ok); } .badge.error { color:var(--danger); } .badge.syncing { color:var(--accent); }
.status { white-space: pre-line; }
.log { margin:0; padding:.6rem; max-height:22rem; overflow:auto; font:12px/1.4 ui-monospace,Menlo,monospace; white-space:pre-wrap; word-break:break-all; background:#0003; border-radius:6px; }
.log[hidden] { display:none; }
a { color:var(--accent); text-decoration:none; } h1 a { color:var(--text); }
a.btn { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:7px 12px; display:inline-block; }
a.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tab { background:none; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--muted); padding:8px 12px; white-space:nowrap; }
.tab.active { color:var(--text); border-bottom-color:var(--accent); }
.tab-panel { display:grid; gap:10px; padding-top:8px; } .tab-panel[hidden] { display:none; }

.log-list { background:#0003; border:1px solid var(--line); border-radius:6px; flex:1 1 auto; min-height:0; overflow:auto; font:12px/1.5 ui-monospace,Menlo,monospace; }
.log-row { padding:2px 8px; border-bottom:1px solid var(--line); cursor:pointer; word-break:break-word; }
.log-row:hover { background:#ffffff08; } .log-time { color:var(--muted); margin-right:8px; }
.log-lvl { display:inline-block; width:44px; text-transform:uppercase; font-weight:600; font-size:11px; }
.lvl-info .log-lvl { color:var(--accent); } .lvl-warn .log-lvl { color:#f5a524; } .lvl-error .log-lvl, .lvl-fatal .log-lvl { color:var(--danger); }
.lvl-trace, .lvl-debug { opacity:.7; } .lvl-error { background:#e5484d14; }
.chip { display:inline-block; margin-left:6px; padding:0 6px; border-radius:99px; border:1px solid var(--line); color:var(--muted); font-size:11px; }
.chip.portal { color:var(--text); } .log-detail { margin:4px 0; padding:6px; white-space:pre-wrap; background:var(--bg); border-radius:4px; cursor:text; }
.log-detail[hidden] { display:none; }

.categories { display:grid; gap:10px; }
.cat-section { display:grid; gap:8px; } .cat-section > summary { cursor:pointer; display:flex; gap:10px; align-items:center; padding:4px 0; }
.cat-bulk { margin-left:auto; display:flex; gap:6px; } .cat-bulk button { padding:2px 8px; font-size:.85em; }
.pill { flex:none; font-size:.8em; padding:1px 8px; border-radius:99px; background:#ffffff14; color:var(--muted); font-variant-numeric:tabular-nums; }
.cat-row .mv { opacity:0; } .cat-row:hover .mv, .cat-row:focus-within .mv { opacity:1; }
.cat-row:nth-child(even) { background:#ffffff05; }
.cat-list { border:1px solid var(--line); border-radius:8px; max-height:min(60vh,520px); overflow:auto; }
.cat-row { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.cat-row:last-child { border-bottom:0; } .cat-row:hover { background:#ffffff0a; } 
.cat-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-row.off .cat-name { color:var(--muted); text-decoration:line-through; }
.grip { flex:none; cursor:grab; color:var(--muted); user-select:none; letter-spacing:-2px; padding:0 2px; }
.mv { flex:none; padding:0 6px; line-height:1.4; background:transparent; border:1px solid var(--line); color:var(--muted); }
.mv:hover { color:inherit; }
.split-toggle[aria-pressed="true"] { opacity:1; color:var(--ok); border-color:var(--ok); }
.cat-row.dragging { opacity:.4; }
.switch { flex:none; width:34px; height:20px; padding:0; border-radius:99px; background:var(--line); border:0; position:relative; transition:background .15s; }
.switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; }
.switch[aria-checked="true"] { background:var(--ok); } .switch[aria-checked="true"]::after { transform:translateX(14px); }

.split { position:relative; display:inline-flex; } .split > button:first-child { border-radius:6px 0 0 6px; } .split .caret { border-radius:0 6px 6px 0; border-left:0; padding:7px 9px; }
.split .menu { position:absolute; top:100%; left:0; margin-top:4px; z-index:10; display:flex; flex-direction:column; min-width:100%; background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.split .menu[hidden] { display:none; } .split .menu button { border:0; border-radius:0; text-align:left; white-space:nowrap; }

footer#version { padding:16px; text-align:center; font-size:11px; color:var(--muted); opacity:.6; }

.member-list { display:grid; gap:6px; }
.form label.member { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg); border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.form label.member:hover { border-color:var(--accent); } .form label.member:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.member input { width:auto; margin:0; accent-color:var(--accent); flex:none; }
.form .member .member-text { flex:1; min-width:0; display:grid; gap:2px; } .form .member .member-hint { color:var(--muted); font-size:13px; }
.form .member .member-name { flex:1; min-width:0; color:var(--text); font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }