:root{--bg:#f6f7f9;--fg:#15171a;--card:#fff;--mut:#6b7280;--acc:#2563eb;--bd:#dfe3e8;--no:#dc2626}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e1013;--fg:#eceef1;--card:#181b20;--mut:#9aa3af;--bd:#2a2f37}}
:root[data-theme=dark]{--bg:#0e1013;--fg:#eceef1;--card:#181b20;--mut:#9aa3af;--bd:#2a2f37}
*{box-sizing:border-box}body{margin:0;font:16px/1.4 system-ui,sans-serif;background:var(--bg);color:var(--fg)}
.wrap{max-width:640px;margin:auto;padding:12px}header{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
h1{font-size:1.2rem;margin:8px 0}h2{font-size:1.05rem;margin:0 0 6px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px;margin:10px 0}.card.live{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
input,textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--fg);margin:4px 0}
button{font:inherit;padding:10px 14px;border:0;border-radius:8px;background:var(--acc);color:#fff;cursor:pointer}
button.ghost{background:transparent;color:var(--fg);border:1px solid var(--bd)}button.no{background:var(--no)}button:disabled{opacity:.5}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}.pill{font-size:.75rem;padding:2px 8px;border-radius:99px;background:var(--bd);color:var(--mut)}
.seg{display:flex;gap:8px}.seg button{flex:1}.seg button:not(.on){background:transparent;color:var(--fg);border:1px solid var(--bd)}
.lk{display:block;font-size:.8rem;color:var(--mut);margin-top:6px}.big{font-size:1.4rem;margin:0 0 6px}.mut{color:var(--mut)}