/* The phone forms (Telegram Mini Apps): Telegram's theme colours when opened there, the device's light / dark otherwise */
:root {
  --bg: #ffffff; --bg2: #f2f4f7; --tx: #111827; --mu: #6b7280; --ln: #e5e7eb;
  --ac: #2563eb; --act: #ffffff; --bad: #b91c1c; --badbg: #fee2e2; --ok: #047857;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #111827; --bg2: #1f2937; --tx: #f3f4f6; --mu: #9ca3af; --ln: #374151; --ac: #3b82f6; --badbg: #450a0a; --bad: #fca5a5; --ok: #6ee7b7; }
}
:root[data-theme="dark"] { --bg: #111827; --bg2: #1f2937; --tx: #f3f4f6; --mu: #9ca3af; --ln: #374151; --ac: #3b82f6; --badbg: #450a0a; --bad: #fca5a5; --ok: #6ee7b7; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tx); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; }
body { padding-bottom: 96px; }
.pv { background: #fef3c7; color: #92400e; text-align: center; padding: 6px 16px; font-size: 14px; }
.hd { padding: 14px 16px 8px; border-bottom: 1px solid var(--ln); }
.co { color: var(--mu); font-size: 13px; }
h1 { font-size: 19px; margin: 2px 0; }
.sub { font-size: 14px; color: var(--mu); }
main { max-width: 640px; margin: 0 auto; padding: 8px 16px; }
.hint { font-size: 13px; color: var(--mu); margin: 4px 0 10px; }
.q { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--ln); border-radius: 10px; background: var(--bg2); color: var(--tx); }
.list { list-style: none; margin: 10px 0 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ln); }
.list li.bad input { border-color: var(--bad); background: var(--badbg); }
.nm { flex: 1; min-width: 0; }
.nm b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.nm small { color: var(--mu); }
.nm .e { color: var(--bad); font-size: 12px; }
.list input { width: 110px; flex: none; padding: 10px; font: inherit; font-size: 18px; text-align: center; direction: ltr; border: 1px solid var(--ln); border-radius: 10px; background: var(--bg2); color: var(--tx); }
.list input:focus, .q:focus { outline: 2px solid var(--ac); outline-offset: 1px; }
.ft { position: fixed; inset: auto 0 0 0; background: var(--bg); border-top: 1px solid var(--ln); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: center; }
.sum { flex: 1; display: flex; flex-direction: column; font-size: 13px; color: var(--mu); }
.sum b { font-size: 18px; color: var(--tx); }
.btn { font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 12px 18px; background: var(--ac); color: var(--act); cursor: pointer; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.g { background: var(--bg2); color: var(--tx); }
dialog { border: 0; border-radius: 14px; padding: 18px; width: min(92vw, 420px); background: var(--bg); color: var(--tx); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog h2 { margin: 0 0 8px; font-size: 18px; }
.dlb { display: flex; gap: 10px; margin-top: 14px; }
.dlb .btn { flex: 1; }
.msg { text-align: center; color: var(--mu); padding: 16px; }
.msg.err { color: var(--bad); }
@media (min-width: 700px) { .ft { justify-content: center; } .ft .sum { flex: 0 1 460px; } }