:root { color-scheme: light dark; --bg:#f4faff; --card:#fff; --inset:#f2f8fd; --border:#d6e7f5; --text:#2c4a63; --strong:#10304a; --muted:#66819a; --accent:#1774cc; --soft:#dbeeff; --error:#ac2329; }
@media(prefers-color-scheme:dark) { :root { --bg:#0e1824; --card:#15222f; --inset:#111c28; --border:#294058; --text:#c2d3e2; --strong:#e8f2fb; --muted:#8aa1b6; --accent:#247cd0; --soft:#12324f; --error:#ff989b; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,sans-serif; }
main { max-width:760px; margin:auto; padding:24px 16px 48px; }
header { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.logo { background:linear-gradient(135deg,#5fd0ff,#2f86ff); color:white; border-radius:15px; font-size:32px; padding:0 14px; }
h1 { font-size:24px; margin:0; color:var(--strong); }
h1 small { color:var(--muted); font-size:16px; font-weight:400; }
h2 { font-size:17px; margin:0 0 12px; color:var(--strong); }
p { margin:8px 0; }
.sub,small { color:var(--muted); font-size:13px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:16px; }
label { display:block; margin:12px 0; font-size:14px; }
input,textarea,select { display:block; width:100%; color:var(--strong); background:var(--inset); border:1px solid var(--border); padding:10px 12px; border-radius:8px; font:inherit; margin-top:5px; }
textarea { resize:vertical; }
input:focus,textarea:focus,select:focus { outline:2px solid var(--accent); }
button,.button { display:inline-block; border:0; border-radius:8px; background:var(--accent); color:white; padding:10px 14px; font:600 14px/1.4 system-ui,sans-serif; cursor:pointer; text-decoration:none; }
button:disabled { opacity:.45; cursor:default; }
button.soft,.button.soft { color:var(--text); background:var(--soft); }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0; }
.list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.item { border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--inset); overflow-wrap:anywhere; }
.item strong { color:var(--strong); }
.item .row { margin:6px 0; }
.grow { flex:1; }
.mono { font-family:ui-monospace,monospace; overflow-wrap:anywhere; }
.empty { color:var(--muted); font-size:14px; text-align:center; }
.online { color:#299b4b; }
.offline { color:var(--muted); }
.drop { border:2px dashed var(--border); background:var(--inset); border-radius:10px; text-align:center; padding:24px 12px; cursor:pointer; margin:12px 0; }
.drop.over { border-color:var(--accent); background:var(--soft); }
progress { width:100%; height:12px; accent-color:var(--accent); }
pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:220px; overflow:auto; font:inherit; }
#notice { padding:14px; background:var(--soft); border:1px solid var(--border); border-radius:10px; margin-bottom:16px; overflow-wrap:anywhere; }
#notice.error { color:var(--error); }
#activity { padding-left:20px; max-height:280px; overflow:auto; font-size:13px; }
footer { text-align:center; color:var(--muted); font-size:12px; }
summary { cursor:pointer; color:var(--strong); }
[hidden] { display:none !important; }