:root { --bg:#f6f7f9; --fg:#1a1d21; --card:#fff; --line:#d9dde3; --accent:#2457d6; --ok:#137a3b; --err:#b3261e; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111417; --fg:#e8eaed; --card:#1b1f24; --line:#2e343b; --accent:#7aa2ff; --ok:#5fd08a; --err:#ff8a80; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,sans-serif; }
main { max-width:920px; margin:0 auto; padding:24px 16px 64px; }
section { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
h1 { font-size:1.3rem; } h2 { font-size:1.1rem; margin-top:1.5rem; } h3 { font-size:1rem; margin-top:1.5rem; }
label { display:block; margin:.5rem 0; font-size:.9rem; }
input { width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; }
button { padding:.6rem 1rem; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; }
button.ghost { background:transparent; color:var(--accent); border:1px solid var(--line); }
button.danger { background:transparent; color:var(--err); border:1px solid var(--line); padding:.3rem .6rem; }
.bar { display:flex; justify-content:space-between; align-items:center; }
.hint { color:color-mix(in srgb, var(--fg) 60%, transparent); font-size:.9rem; margin:.2rem 0 .5rem; }
.msg { min-height:1.4em; color:var(--err); } .msg.ok { color:var(--ok); }
.status { padding:.6rem .8rem; border-radius:8px; border:1px solid var(--line); word-break:break-all; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; padding:.5rem; border-bottom:1px solid var(--line); vertical-align:top; word-break:break-all; }
.badge { display:inline-block; padding:0 .5rem; border-radius:99px; background:var(--ok); color:#fff; font-size:.75rem; margin-left:.4rem; }
.grid { display:grid; gap:.6rem; grid-template-columns:1fr 1fr; align-items:end; }
.save-bar { position:sticky; bottom:0; display:flex; gap:1rem; align-items:center; padding:12px 0; background:var(--card); margin-top:1.5rem; }
@media (max-width:600px) { .grid { grid-template-columns:1fr; } }