:root { --bg:#f4f6f8; --fg:#14181f; --muted:#667085; --card:#fff; --accent:#0098ea; --border:#d9dee5; --err:#c62828; --ok:#1b7f3b; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#000000; --fg:#eef1f5; --muted:#9aa4b2; --card:#16191f; --border:#272c35; --err:#ff6b6b; --ok:#4cc77a; }
}
* { box-sizing: border-box; }
body { margin:0; padding:16px; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.topbar { max-width:480px; height:44px; margin:0 auto; display:flex; align-items:center; justify-content:flex-end; }
#ton-connect { visibility:hidden; }
#ton-connect.connected { visibility:visible; }
.card { max-width:480px; margin:12px auto 24px; padding:20px; background:var(--card); border:1px solid var(--border); border-radius:16px; }
h1 { font-size:1.35rem; margin:0 0 8px; }
.muted { color:var(--muted); margin:0 0 20px; }
label, .label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px; }
.row { display:flex; gap:8px; align-items:stretch; }
input { flex:1; min-width:0; padding:12px; font-size:16px; color:var(--fg); background:var(--bg); border:1px solid var(--border); border-radius:10px; }
button { padding:12px 16px; font-size:16px; font-weight:600; color:#fff; background:var(--accent); border:0; border-radius:10px; cursor:pointer; }
button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
button:disabled { opacity:.5; cursor:default; }
#send-btn { width:100%; }
section { margin-top:20px; }
code { flex:1; padding:12px; background:var(--bg); border:1px solid var(--border); border-radius:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note { color:var(--muted); font-size:.9rem; }
#status { min-height:1.4em; margin:16px 0 0; }
#status.error { color:var(--err); }
#status.ok { color:var(--ok); font-weight:600; }