:root { --bg:#04121c; --panel:#0a2233; --line:#1d4560; --text:#d8f3ff; --muted:#7fa6bd; --pri:#4fd8ff; --acc:#ffb547; --ok:#54f2a6; --warn:#ff6b5a;
  --mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at top, #0b2a40, var(--bg) 60%) fixed; color:var(--text); font:15px/1.5 system-ui, sans-serif; min-height:100vh; }
main { max-width:560px; margin:0 auto; padding:28px 16px 60px; }
h1 { font-size:1.5rem; letter-spacing:.05em; margin:0; } h1 em { color:var(--pri); font-style:normal; font-weight:400; }
.lead { color:var(--muted); margin:4px 0 20px; }
.box { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; margin:0 0 14px; }
.box h2 { font-size:1.1rem; margin:0 0 10px; }
.tabs { display:flex; gap:6px; margin:0 0 14px; }
.tabs button { flex:1; background:transparent; color:var(--muted); border:1px solid var(--line); }
.tabs button.on { color:var(--text); border-color:var(--pri); background:#0d2e44; }
p { margin:6px 0; } .muted { color:var(--muted); font-size:.88rem; }
label { display:block; font-size:.85rem; color:var(--muted); margin:12px 0 4px; }
input, textarea { width:100%; background:#06192a; color:var(--text); border:1px solid var(--line); border-radius:9px; padding:10px 11px; font:inherit; }
input:focus, textarea:focus { outline:2px solid var(--pri); border-color:transparent; }
.at { position:relative; } .at::before { content:"@"; position:absolute; left:11px; top:10px; color:var(--muted); } .at input { padding-left:26px; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
button { background:var(--pri); color:#032; border:0; border-radius:9px; padding:11px 16px; font:inherit; font-weight:600; cursor:pointer; }
button.alt { background:transparent; color:var(--pri); border:1px solid var(--pri); }
button.link { background:none; color:var(--muted); padding:4px 0; font-weight:400; text-decoration:underline; }
button:disabled { opacity:.45; cursor:not-allowed; }
.words { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:10px 0; counter-reset:w; }
.words span { background:#06192a; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-family:var(--mono); counter-increment:w; }
.words span::before { content:counter(w) ". "; color:var(--muted); }
.addr { font-family:var(--mono); word-break:break-all; background:#06192a; border:1px dashed var(--line); border-radius:8px; padding:8px 10px; font-size:.85rem; }
.msg { margin-top:10px; font-size:.9rem; } .msg.err { color:var(--warn); } .msg.ok { color:var(--ok); } .msg.wait { color:var(--acc); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.92rem; } .kv b { color:var(--muted); font-weight:500; }
.name { font-size:1.8rem; font-weight:700; color:var(--ok); margin:4px 0; } .name.want { color:var(--acc); }
.warnbox { border-color:var(--acc); } .warnbox h2 { color:var(--acc); }
footer { margin-top:26px; text-align:center; }