:root{--bg:#0b0b0b;--card:#161616;--line:#2a2a2a;--text:#f5f5f4;--mute:#a3a3a3;--accent:#fff;--danger:#ef4444;--ok:#22c55e}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
main{max-width:440px;margin:0 auto;padding:48px 16px 64px}
main.wide{max-width:720px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.brand img{width:44px;height:44px;border-radius:10px;background:#fff}
.brand b{font:700 20px/1.1 Outfit,Inter,sans-serif;letter-spacing:.2px}
.brand small{display:block;color:var(--mute);font-weight:500;font-size:13px}
h1{font:700 22px/1.25 Outfit,Inter,sans-serif;margin:0 0 6px}
h2{font:600 16px/1.3 Outfit,Inter,sans-serif;margin:0 0 12px}
p.sub{color:var(--mute);margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
label{display:block;font-size:13px;color:var(--mute);margin:12px 0 6px}
input,select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#0f0f0f;color:var(--text);font:inherit}
input:focus,select:focus{outline:2px solid #fff;outline-offset:1px}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;padding:12px 16px;border-radius:10px;border:1px solid #fff;background:#fff;color:#000;font:600 15px Inter,sans-serif;cursor:pointer;text-decoration:none}
button.ghost,.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.row>*{flex:1 1 160px}
.row button{width:auto;flex:0 0 auto}
.tabs{display:flex;gap:6px;margin-bottom:6px}
.tabs button{margin:0;width:auto;flex:1;background:transparent;color:var(--mute);border-color:var(--line)}
.tabs button.on{background:#fff;color:#000;border-color:#fff}
.msg{margin-top:14px;font-size:14px;color:var(--mute);min-height:1.2em;word-break:break-word}
.msg.err{color:var(--danger)} .msg.ok{color:var(--ok)}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--mute);font-weight:500}
td button{margin:0;width:auto;padding:6px 10px;font-size:13px}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;border:1px solid var(--line);font-size:12px;color:var(--mute)}
a{color:#fff}
.links{margin-top:22px;display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
.links a{color:var(--mute)}
code.copy{display:block;padding:10px;border-radius:8px;background:#0f0f0f;border:1px solid var(--line);font-size:12px;word-break:break-all;margin-top:8px}