:root { --bg:#fff; --fg:#1a1a1a; --muted:#5a5a5a; --line:#d8d8d8; --card:#f6f6f6; --accent:#1f5fbf; --warn-bg:#fff6e0; --warn-line:#d9a400; --bad:#b3261e; --good:#1b7a3a; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161a; --fg:#e8e8e8; --muted:#a0a4aa; --line:#33373d; --card:#1d2025; --accent:#7fb0ff; --warn-bg:#2a2412; --warn-line:#a98300; --bad:#ff8a80; --good:#6fd08c; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 1.6rem; line-height:1.25; margin: .4em 0 .5em; }
h2 { font-size: 1.2rem; margin: 1.6em 0 .4em; }
a { color: var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin:14px 0; }
.warn { background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:8px; padding:12px 16px; margin:14px 0; }
.muted { color:var(--muted); font-size:.92rem; }
button, select, input[type=text] { font:inherit; padding:8px 12px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--fg); }
button { cursor:pointer; background:var(--accent); color:#fff; border-color:var(--accent); }
@media (prefers-color-scheme: dark) { button { color:#0b1220; } }
button.secondary { background:transparent; color:var(--accent); }
button:disabled { opacity:.5; cursor:default; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.drop { border:2px dashed var(--line); border-radius:8px; padding:24px 12px; text-align:center; color:var(--muted); }
.drop.over { border-color:var(--accent); color:var(--fg); }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th, td { text-align:left; padding:6px 6px; border-bottom:1px solid var(--line); vertical-align:top; word-break:break-word; }
code, .mono { font-family: ui-monospace, Consolas, monospace; font-size:.85em; word-break:break-all; }
.ok { color:var(--good); } .bad { color:var(--bad); }
input.grow { flex:1; min-width:200px; }
.scroll-x { overflow-x:auto; }
nav { font-size:.92rem; margin-bottom: 8px; }
ol li, ul li { margin: .3em 0; }