:root { --bg:#0f1115; --fg:#e8eaf0; --mut:#9aa3b2; --card:#181b22; --acc:#f7931a; --bad:#ff6b6b; }
@media (prefers-color-scheme: light) { :root { --bg:#f6f7f9; --fg:#14171c; --mut:#5b6472; --card:#fff; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,sans-serif; }
main { max-width:640px; margin:0 auto; padding:24px 16px 64px; }
h1 { margin:0 0 4px; }
#net { color:var(--acc); font-weight:600; min-height:1.5em; }
button { background:var(--acc); color:#111; border:0; border-radius:8px; padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
button.ghost { background:transparent; color:var(--fg); border:1px solid var(--mut); }
.row { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.lot { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:10px; padding:12px 16px; margin:8px 0; }
.lot b { flex:1; } .lot span { color:var(--mut); }
#status { min-height:1.5em; margin:16px 0; } #status.bad { color:var(--bad); }
input { width:100%; padding:10px; margin:4px 0 12px; border-radius:8px; border:1px solid var(--mut); background:var(--card); color:var(--fg); font:inherit; }
label { color:var(--mut); font-size:14px; }
pre { background:var(--card); padding:12px; border-radius:8px; overflow:auto; white-space:pre-wrap; word-break:break-all; font-size:12px; }
small { color:var(--mut); display:block; margin-top:32px; }
a { color:var(--acc); }

.note { background:var(--card); border-left:4px solid var(--acc); padding:12px 16px; border-radius:8px; margin:16px 0; font-size:15px; color:var(--mut); }
.note p { margin:6px 0; }
.how { color:var(--mut); padding-left:20px; } .how li { margin:6px 0; }
.price-tok { font-size:13px; color:var(--mut); display:block; }
h2 { font-size:18px; margin:28px 0 8px; }

input[type=radio] { width:auto; display:inline-block; margin:0 8px 0 0; vertical-align:middle; }