:root { --bg:#f4f6fa; --card:#fff; --ink:#1b2430; --dim:#6a7686; --line:#dbe1ea; --blue:#1f4e9a; --good:#1a7f45; --bad:#c0392b; }
@media (prefers-color-scheme: dark) { :root { --bg:#12161c; --card:#1b212a; --ink:#e8ecf2; --dim:#93a0b1; --line:#2c3541; --blue:#6aa1ff; --good:#4cc277; --bad:#ff7b6b; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
.hidden { display:none !important; }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
header { display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; flex-wrap:wrap; }
header strong { color:var(--blue); }
nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
nav button { background:none; border:0; padding:7px 12px; border-radius:8px; cursor:pointer; color:var(--dim); font:inherit; }
nav button.on { background:var(--bg); color:var(--ink); font-weight:600; }
main { max-width:900px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
.card.narrow { width:100%; max-width:380px; } .narrow2 { max-width:480px; }
h1 { margin:0 0 4px; font-size:22px; color:var(--blue); } h2 { margin:0 0 10px; font-size:17px; }
.dim { color:var(--dim); font-size:13px; } .ok { color:var(--good); } .err { color:var(--bad); }
input, textarea, select { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; }
label { display:block; font-size:13px; color:var(--dim); margin:8px 0; }
label input, label select { margin-top:4px; color:var(--ink); }
label.row { display:flex; gap:8px; align-items:center; color:var(--ink); } label.row input { width:auto; margin:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 14px; }
button { font:inherit; padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; margin-top:8px; }
button.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
button.link { border:0; background:none; color:var(--blue); padding:0 4px; margin:0; text-decoration:underline; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.chip { padding:3px 10px; border-radius:99px; font-size:13px; border:1px solid var(--line); } .chip.good { color:var(--good); } .chip.bad { color:var(--bad); }
.act { padding:5px 0; border-bottom:1px solid var(--line); font-size:13px; word-break:break-word; } .act.error { color:var(--bad); } .act.ignorado { color:var(--dim); }
.frow { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; font-size:14px; }
.frow a { color:var(--blue); } code { background:var(--bg); padding:1px 5px; border-radius:4px; } hr { border:0; border-top:1px solid var(--line); margin:16px 0; }