:root{--bg:#f6f7f9;--card:#fff;--text:#16202a;--muted:#5b6773;--accent:#1f6feb;--gold:#9a6700;--border:#d8dee4;--code:#0f1720;--codetext:#d6e2ee;--ok:#1a7f37;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1319;--card:#161d25;--text:#e6edf3;--muted:#92a0ad;--accent:#4c9aff;--gold:#e3b341;--border:#2a3441;--code:#0a0e13;--ok:#3fb950}}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:880px;margin:0 auto;padding:20px 16px}
h1{font-size:1.5rem;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 12px}
.crumb{font-size:.8rem;margin:0 0 8px}.crumb a,footer a,.how a{color:var(--accent)}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
textarea{font:.85rem ui-monospace,Menlo,Consolas,monospace;min-height:120px}
.opts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}.opts>div{flex:1 1 150px}
.chk{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--text)}.chk input{width:auto}
button,.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
button.alt{background:transparent;color:var(--accent);border:1px solid var(--border)}
button.link{background:none;border:0;color:#9ecbff;text-decoration:underline;padding:0;font-weight:400;font-size:.8rem}
.btns{margin:12px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.msg{margin:10px 0 0;font-size:.9rem;color:var(--muted)}.msg.err{color:#d1242f}
.chip{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin:0 0 14px}
.chip b{color:var(--gold)}.chip.pro b{color:var(--ok)}.chip button{padding:4px 10px;font-size:.78rem}
.out{border-radius:8px;background:var(--code);overflow:hidden}
pre{margin:0;padding:14px;color:var(--codetext);font-size:.8rem;overflow-x:auto;white-space:pre}
.locked{filter:blur(5px);user-select:none;pointer-events:none}
.gate{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;color:#fff;text-align:center;background:rgba(10,14,19,.92)}
.acts{display:flex;gap:8px;padding:10px;border-top:1px solid #2a3441}.acts button{padding:6px 12px;font-size:.8rem;color:#9ecbff}
.how h2{font-size:1.05rem;margin:0 0 6px}.how p{margin:0 0 8px;font-size:.92rem}
.note{font-size:.8rem;color:var(--muted)}
nav.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}nav.tabs a{padding:8px 14px;border:1px solid var(--border);border-radius:999px;color:var(--text);text-decoration:none;background:var(--card);font-size:.9rem}nav.tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tile{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;color:var(--text);text-decoration:none}.tile b{display:block;margin-bottom:4px}.tile span{font-size:.82rem;color:var(--muted)}
footer{border-top:1px solid var(--border);padding:16px 0;color:var(--muted);font-size:.9rem}