:root { --brand:#1f3a5f; --line:#dee2e6; --muted:#6c757d; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:#212529; background:#f6f7f9; }
header { background:var(--brand); color:#fff; padding:14px 24px; display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; }
header b { font-size:20px; } header .muted { color:#cfd8e3; }
main { max-width:960px; margin:22px auto; padding:0 16px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:16px; }
h2 { margin:0 0 8px; font-size:17px; } .muted { color:var(--muted); } .hidden { display:none !important; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.btn { background:var(--brand); color:#fff; border:1px solid var(--brand); border-radius:6px; padding:8px 14px; cursor:pointer; font:inherit; display:inline-block; }
.btn.secondary { background:#fff; color:var(--brand); } .btn.small { padding:4px 10px; font-size:13px; }
.btn.file input { display:none; }
label { font-size:14px; } label input[type=text], label select { font:inherit; padding:6px 8px; border:1px solid #ced4da; border-radius:6px; margin-left:4px; }
.fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px 14px; margin:10px 0; }
.fields label { display:flex; flex-direction:column; font-weight:600; font-size:13px; }
.fields input, .fields textarea, .fields select { font:inherit; font-weight:400; padding:6px 8px; border:1px solid #ced4da; border-radius:6px; margin-top:3px; }
.tabs { display:flex; gap:6px; margin-bottom:10px; } .tab { background:#fff; border:1px solid var(--line); border-radius:6px; padding:6px 12px; cursor:pointer; font:inherit; }
.tab.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.info { min-height:1.4em; } .info.err { color:#b02a37; } .info.ok { color:#0f5132; }
.chip { display:inline-block; margin:2px 4px 2px 0; padding:4px 10px; border:1px solid var(--brand); color:var(--brand); border-radius:14px; cursor:pointer; font-size:13px; background:#fff; }
code { background:#f1f3f5; padding:1px 5px; border-radius:4px; } pre { background:#f1f3f5; padding:12px; border-radius:8px; overflow:auto; font-size:12.5px; }
.result { display:flex; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid #f0f1f3; } .result a { color:var(--brand); }
footer { text-align:center; padding:20px; font-size:13px; }