:root { --bg:#f7f7f8; --fg:#1d1d1f; --muted:#6b6b72; --card:#fff; --line:#e3e3e8; --accent:#2f5bd3; --ok:#18794e; --bad:#c62a2f; --warn:#9a6700; }
@media (prefers-color-scheme: dark) { :root { --bg:#141416; --fg:#ececf0; --muted:#9a9aa3; --card:#1d1d21; --line:#2e2e34; --accent:#7c9cff; --ok:#4cc38a; --bad:#ff6b6b; --warn:#e3b341; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--fg); }
header.top { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:.75rem 1.25rem; border-bottom:1px solid var(--line); background:var(--card); }
header nav { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.brand { font-weight:700; color:var(--fg); text-decoration:none; }
main { max-width:1000px; margin:0 auto; padding:1.25rem 1rem 4rem; }
a { color:var(--accent); }
h1 small, h2 small { font-weight:400; font-size:.6em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem 1.25rem; margin:0 0 1rem; }
.card.narrow { max-width:520px; }
.card.highlight { border-color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.box { display:flex; flex-direction:column; gap:.2rem; color:var(--fg); text-decoration:none; }
.box:hover { border-color:var(--accent); }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem 1rem; }
label { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.75rem; font-weight:500; }
small, .muted { color:var(--muted); font-weight:400; }
input, select, textarea { font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); width:100%; }
fieldset { border:1px solid var(--line); border-radius:8px; margin:0 0 1rem; }
button, .button { font:inherit; display:inline-block; padding:.5rem .9rem; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; }
button.secondary, .button.secondary { background:transparent; color:var(--accent); }
button.danger { background:transparent; color:var(--bad); border-color:var(--bad); }
button.link { background:none; border:none; padding:0; color:var(--accent); text-decoration:underline; }
button.link.danger { color:var(--bad); }
form.inline { display:inline; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.presets { display:flex; gap:.5rem; flex-wrap:wrap; }
.flash { padding:.75rem 1rem; border-radius:8px; margin:0 0 1rem; border:1px solid var(--line); background:var(--card); }
.flash.ok { border-color:var(--ok); } .flash.error { border-color:var(--bad); } .flash.warn { border-color:var(--warn); }
.ok { color:var(--ok); } .bad { color:var(--bad); }
table { width:100%; border-collapse:collapse; margin-bottom:1rem; display:block; overflow-x:auto; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em; }
.copyrow { display:flex; gap:.5rem; } .copyrow input { font-family:ui-monospace, monospace; font-size:.85em; }
ul.folders { columns:2; padding-left:1.1rem; }