:root { color-scheme: light dark; --bg:#f6f7f9; --panel:#fff; --text:#16181d; --muted:#687083; --line:#d9dee8; --accent:#0f766e; --accent-hover:#0b5d57; --code:#111827; }
@media (prefers-color-scheme: dark) { :root { --bg:#101318; --panel:#171b22; --text:#f1f4f8; --muted:#a5adbb; --line:#303744; --accent:#0f766e; --accent-hover:#0b5d57; --code:#0b0f15; } }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { width:min(820px,calc(100% - 32px)); margin:auto; padding:32px 0; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
h1 { margin:0; font-size:24px; }
p { margin:4px 0 0; color:var(--muted); font-size:14px; }
form,.list { display:grid; gap:16px; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.list { margin-top:16px; }
label { display:grid; gap:6px; font-size:13px; color:var(--muted); }
input,select,textarea { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--text); font:inherit; }
textarea { resize:vertical; background:var(--code); color:#e5e7eb; font:13px/1.5 ui-monospace,Consolas,monospace; }
input[readonly] { color:var(--muted); }
.remember { display:flex; align-items:center; gap:8px; color:var(--text); }
.remember input { width:auto; margin:0; accent-color:var(--accent); }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hint { margin:-9px 0 0; font-size:12px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
button,.button { display:inline-block; padding:9px 13px; border:1px solid transparent; border-radius:6px; background:var(--accent); color:#fff; font:inherit; font-weight:650; text-decoration:none; cursor:pointer; white-space:nowrap; }
button:hover,.button:hover { background:var(--accent-hover); }
button:disabled { opacity:.55; cursor:wait; }
button.secondary,.button.secondary { background:transparent; border-color:var(--line); color:var(--text); }
button.secondary:hover,.button.secondary:hover { background:var(--line); }
.status { min-height:22px; color:var(--accent); font-size:13px; }
.status.error { color:#b42318; }
.preset-form { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; }
.preset { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.preset:last-child { border-bottom:0; }
.note { font-weight:650; }
.value { color:var(--muted); font:13px ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
@media (max-width:680px) { .topbar,.two-columns,.preset-form { display:grid; grid-template-columns:1fr; } .preset { grid-template-columns:1fr auto; } }