:root { color-scheme: light; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; color: #211a32; background: #f5f2fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(circle at 90% 0, #e7ddff 0, transparent 38%), linear-gradient(160deg,#faf9fd,#f2eef9); }
.verify-shell { width: min(100% - 32px, 520px); margin: 0 auto; padding: max(24px,env(safe-area-inset-top)) 0 max(32px,env(safe-area-inset-bottom)); }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: white; font-weight: 900; background: linear-gradient(145deg,#906fff,#5b36d7); box-shadow: 0 14px 35px #6340c83a; }
.brand div { display: grid; gap: 3px; }
.brand b { font-size: 17px; }
.brand small { color: #847b92; }
.card { padding: 28px 24px; border: 1px solid #ffffffc9; border-radius: 28px; background: #ffffffeb; box-shadow: 0 28px 70px #38285a18; backdrop-filter: blur(16px); }
.hidden { display: none !important; }
.eyebrow { color: #7552df; font-size: 11px; letter-spacing: .14em; font-weight: 900; }
h1 { margin: 10px 0; font-size: clamp(25px,7vw,34px); line-height: 1.18; letter-spacing: -.035em; }
p { color: #766d82; line-height: 1.75; }
form { display: grid; gap: 14px; margin-top: 22px; }
label { display: grid; gap: 8px; color: #4f465d; font-size: 13px; font-weight: 750; }
input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid #ded8e9; border-radius: 15px; background: white; color: #211a32; font: inherit; font-size: 17px; outline: 0; }
input:focus { border-color: #7654df; box-shadow: 0 0 0 4px #7350dd19; }
button { min-height: 52px; border: 0; border-radius: 15px; color: white; background: linear-gradient(135deg,#7956e7,#5a34cf); font: inherit; font-weight: 850; box-shadow: 0 12px 28px #5d37ce31; }
button:disabled { opacity: .55; }
.secondary { width: 100%; margin-top: 12px; color: #6644cf; background: #f1edfb; box-shadow: none; }
.status-row { display: flex; align-items: center; gap: 12px; }
.status-row > div { display: grid; gap: 3px; }
.status-row small { color: #938b9e; }
.status-dot { width: 13px; height: 13px; border-radius: 50%; background: #e6a63b; box-shadow: 0 0 0 7px #fff2d8; }
.status-dot.ok { background: #23a574; box-shadow: 0 0 0 7px #e4f7f0; }
.status-dot.fail { background: #d55858; box-shadow: 0 0 0 7px #feeaea; }
.qr-panel { display: grid; justify-items: center; gap: 10px; margin: 20px 0; padding: 18px; border-radius: 20px; background: #f7f4fc; }
.qr-panel img { width: min(64vw,240px); aspect-ratio: 1; image-rendering: pixelated; border: 10px solid white; border-radius: 12px; }
.qr-panel figcaption { color: #766d82; font-size: 12px; text-align: center; line-height: 1.6; }
.browser-panel { display: grid; gap: 10px; margin: 20px 0; padding: 10px; border-radius: 20px; background: #211a32; }
.browser-panel img { display: block; width: 100%; border-radius: 12px; background: white; }
.browser-panel figcaption { color: #ded7ed; font-size: 11px; text-align: center; line-height: 1.6; }
.code-form small { color: #948b9f; font-size: 11px; line-height: 1.65; }
.error { min-height: 18px; margin: 12px 0 0; color: #b03e4e; font-size: 12px; }
footer { padding: 20px; color: #9b93a5; text-align: center; font-size: 11px; }