:root{--bg:#F5F8F6;--surface:#FFFFFF;--sunk:#E9F0EC;--line:#D3DFD8;--fg:#14231C;--muted:#4F6359;--brand:#0B6B4C;--brand-ink:#FFFFFF;--signal:#B86E00;--ok:#1E7B4A;--bad:#B3261E;
  --f-display:"Space Grotesk","Be Vietnam Pro",system-ui,sans-serif;--f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace}
@media (prefers-color-scheme: dark){:root{--bg:#0C1511;--surface:#132019;--sunk:#0F1B15;--line:#25382E;--fg:#E3EEE8;--muted:#9DB3A7;--brand:#3FC48E;--brand-ink:#06140E;--signal:#F2B13C;--ok:#4FD08B;--bad:#FF7A70;color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;padding:24px max(16px,env(safe-area-inset-left,0px)) 64px max(16px,env(safe-area-inset-right,0px))}
main{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--f-display);line-height:1.2;margin:0}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.muted{color:var(--muted)} .small{font-size:.88rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:14px}
.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:9px 14px;border-radius:8px;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mode{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.mode:has(input:checked){border-color:var(--brand);background:var(--sunk)}
.mode input{accent-color:var(--brand);width:18px;height:18px;margin-top:3px;grid-row:span 2}
.mode b{font-family:var(--f-display)}
textarea{font:inherit;font-family:var(--f-mono);font-size:.88rem;width:100%;min-height:160px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
.msg{padding:10px 12px;border-radius:8px;border:1px solid currentColor;font-size:.92rem}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--bad)}
.tag{display:inline-block;font-family:var(--f-mono);font-size:.82rem;padding:3px 8px;border-radius:6px;background:var(--sunk)}
table{border-collapse:collapse;width:100%;font-size:.88rem}
td,th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl{overflow-x:auto}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}