:root { --fg:#1d2330; --muted:#5b6475; --bg:#f6f7f9; --card:#fff; --line:#dde1e7; --accent:#2457d6; --ok:#1d7a3d; --bad:#b42318; --wait:#946200; }
@media (prefers-color-scheme: dark) { :root { --fg:#e6e9ef; --muted:#9aa3b2; --bg:#14171c; --card:#1c2027; --line:#2c323c; --accent:#7aa2ff; --ok:#5ccf86; --bad:#ff7b72; --wait:#e3b341; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding:.75rem 16px; background:var(--card); border-bottom:1px solid var(--line); }
header nav { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.brand { font-weight:700; color:var(--fg); text-decoration:none; }
a { color:var(--accent); }
main { max-width:960px; margin:0 auto; padding:1.25rem 16px 3rem; }
table { width:100%; border-collapse:collapse; background:var(--card); margin:.5rem 0 1rem; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.mono, code, textarea { font-family: ui-monospace, monospace; font-size:13px; overflow-wrap:anywhere; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; background:var(--card); padding:1rem; border:1px solid var(--line); border-radius:8px; }
.grid label { display:flex; flex-direction:column; gap:.25rem; font-weight:600; }
.grid .wide { grid-column:1 / -1; }
small, .hint { color:var(--muted); font-weight:400; }
input, select, textarea { font:inherit; padding:.45rem .5rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); width:100%; }
button, .button { display:inline-block; font:inherit; font-weight:600; padding:.5rem 1rem; border:0; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; }
button.link { background:none; color:var(--accent); padding:0; font-weight:400; }
button.danger { background:var(--bad); }
form.inline { display:inline; }
.inline-form { display:flex; flex-wrap:wrap; gap:.5rem; max-width:560px; }
.inline-form input { flex:1 1 240px; }
.badge { display:inline-block; font-size:12px; font-weight:600; padding:.1rem .45rem; border-radius:999px; border:1px solid currentColor; }
.ok { color:var(--ok); } .bad { color:var(--bad); } .wait { color:var(--wait); }
.flash { padding:.6rem .8rem; border-left:4px solid var(--ok); background:var(--card); }
.error { padding:.6rem .8rem; border-left:4px solid var(--bad); background:var(--card); overflow-wrap:anywhere; }
.box { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; margin:1rem 0; }
.center { text-align:center; margin-top:15vh; }
@media (max-width: 640px) { table, thead, tbody, tr, td, th { display:block; } thead { display:none; } td { border:0; padding:.25rem .6rem; } tr { border-bottom:1px solid var(--line); padding:.5rem 0; } }
.cancel { margin-left:1rem; }