:root { color-scheme: light; --accent:#8f294a; --accent-soft:#f8e9ee; --ink:#251a1e; --muted:#76676d; --line:#eadce1; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--tg-theme-bg-color,#fff); color:var(--tg-theme-text-color,var(--ink)); font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.app { max-width:620px; margin:0 auto; padding:24px 18px 34px; }
.eyebrow { margin:0 0 4px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.08em; }
h1 { margin:0; font-size:28px; line-height:1.12; }
.hint { margin:10px 0 20px; color:var(--muted); }
.scanner { position:relative; overflow:hidden; min-height:250px; border-radius:18px; background:#1b1517; box-shadow:0 6px 20px #3c14221e; }
video { width:100%; height:100%; min-height:250px; display:block; object-fit:cover; }
.frame { position:absolute; inset:21% 8%; border:3px solid #fff; border-radius:12px; box-shadow:0 0 0 999px #0005; pointer-events:none; }
.status { position:absolute; inset:auto 12px 10px; margin:0; padding:8px 10px; border-radius:9px; background:#000a; color:white; font-size:13px; text-align:center; }
button { border:0; border-radius:12px; min-height:48px; padding:10px 16px; font:700 16px inherit; cursor:pointer; }
.primary { width:100%; margin-top:14px; background:var(--accent); color:#fff; }
.primary:disabled, #send:disabled { opacity:.55; cursor:wait; }
.divider { display:flex; align-items:center; gap:10px; margin:20px 0; color:var(--muted); font-size:13px; }
.divider::before,.divider::after { content:""; height:1px; flex:1; background:var(--line); }
label { display:block; margin-bottom:7px; font-weight:700; }
.manual { display:flex; gap:8px; }
input { min-width:0; flex:1; height:48px; border:1px solid var(--line); border-radius:12px; padding:0 13px; color:inherit; background:transparent; font:16px inherit; }
#send { background:var(--accent-soft); color:var(--accent); }
.small { margin:12px 0 0; color:var(--muted); font-size:12px; }