:root { color-scheme:dark; --bg:#08090d; --surface:#11121a; --text:#f7f7fb; --muted:#b0b1bf; --line:#343644; --accent:#8262ff; --focus:#bcaaff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; background:radial-gradient(ellipse at 50% 0,rgba(114,82,222,.15),transparent 56%),var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; font-size:16px; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; }
[hidden] { display:none !important; }
.beta-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:clamp(20px,4vw,40px) clamp(16px,5vw,64px); }
.beta-brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.beta-brand img { width:36px; height:50px; object-fit:contain; }
.beta-brand span { display:grid; gap:5px; font-size:clamp(17px,2.8vw,25px); font-weight:800; letter-spacing:.18em; }
.beta-brand small { font-size:8px; font-weight:700; letter-spacing:.3em; color:#c5c6d2; }
.beta-language { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); }
.beta-language select { min-width:118px; min-height:44px; max-width:170px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--surface); }
.beta-card { width:min(590px,calc(100% - 32px)); margin:clamp(14px,5vh,56px) auto 44px; padding:clamp(24px,5vw,42px); border:1px solid var(--line); border-radius:22px; background:rgba(17,18,26,.97); box-shadow:0 24px 80px #0005; }
.beta-eyebrow { margin:0 0 15px; color:#b4a1ff; font-size:11px; font-weight:800; letter-spacing:.16em; }
h1 { margin:0 0 14px; font-size:clamp(28px,5vw,37px); line-height:1.14; letter-spacing:-.035em; overflow-wrap:break-word; }
h1:focus { outline:none; }
.beta-intro { margin:0; font-size:15px; line-height:1.6; color:var(--muted); }
.beta-status { margin:0; color:#d9cdff; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.beta-status:not(:empty) { margin-top:18px; padding:12px 14px; border:1px solid #514373; border-radius:10px; background:#292238; }
.beta-status.is-error { color:#ffd0d9; border-color:#734250; background:#322128; }
.beta-form { display:grid; gap:17px; margin-top:25px; }
.beta-field { display:grid; gap:8px; min-width:0; }
.beta-field > span,.beta-field > label { font-size:14px; font-weight:600; color:#dedee7; }
.beta-field input,.beta-field select { width:100%; min-width:0; min-height:50px; padding:12px 13px; border:1px solid #414451; border-radius:10px; background:#090a10; color:var(--text); }
.beta-field input::placeholder { color:#737684; opacity:1; }
.beta-field small,.beta-help { font-size:13px; line-height:1.55; color:var(--muted); }
.beta-help { margin:15px 0 0; }
.beta-primary,.beta-secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:49px; padding:12px 17px; border:1px solid transparent; border-radius:10px; font-size:15px; font-weight:700; line-height:1.35; text-align:center; white-space:normal; }
.beta-primary { background:#7c5cff; color:#fff; }
.beta-primary:hover { background:#8a6eff; }
.beta-secondary { color:#e0d8ff; background:#242030; border-color:#55486d; }
.beta-secondary:hover { background:#30273e; }
.beta-form > .beta-primary { width:100%; margin-top:3px; }
.beta-links { display:flex; flex-wrap:wrap; gap:9px 20px; margin-top:22px; }
.text-button { padding:7px 0; border:0; background:transparent; color:#cdbfff; font-size:13px; line-height:1.4; text-decoration:underline; text-underline-offset:4px; text-align:left; }
.beta-identity { margin-top:22px; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:#171823; overflow-wrap:anywhere; }
.beta-identity span { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; }
.beta-identity strong { font-size:15px; }
.beta-account-check,.beta-saved-check { display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.5; color:#dedee7; }
.beta-account-check input,.beta-saved-check input { flex:0 0 20px; width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); }
.beta-qr { display:block; width:min(230px,100%); aspect-ratio:1; padding:12px; margin:24px auto 20px; background:#fff; border-radius:12px; object-fit:contain; }
.beta-secret { margin-top:20px; }
.beta-secret input { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:14px; letter-spacing:.03em; }
.beta-otp { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.26em; font-size:24px; text-align:center; }
.beta-codes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:24px 0 20px; padding:0; list-style:none; }
.beta-codes li { padding:10px 8px; border:1px solid var(--line); border-radius:8px; background:#090a10; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.beta-code-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.beta-saved-check { margin-block:22px 15px; }
.beta-code-continue { width:100%; }
.beta-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; align-items:center; margin-top:31px; padding-top:18px; border-top:1px solid var(--line); }
.beta-footer p { margin:0; color:#9598a7; font-size:12px; line-height:1.5; }
.beta-footer .text-button { padding:2px 0; }
:is(button,a,input,select):focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.beta-card[aria-busy=true] button:disabled { cursor:wait; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:480px) { .beta-header { align-items:flex-start; gap:12px; } .beta-brand { gap:8px; } .beta-brand img { width:29px; height:41px; } .beta-brand span { font-size:16px; letter-spacing:.11em; } .beta-brand small { font-size:6.5px; } .beta-language > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .beta-language select { min-width:104px; max-width:123px; padding:9px 8px; font-size:12px; } .beta-card { margin-top:16px; padding:25px 23px; border-radius:17px; } .beta-codes { grid-template-columns:1fr; } .beta-code-actions { display:grid; } .beta-qr { width:210px; } }
@media (prefers-reduced-motion:no-preference) { button { transition:background .15s ease; } }