: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; }
.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; }