*{box-sizing:border-box}
:root{font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#202a35;background:#eef3f7}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:30px 16px;background:linear-gradient(140deg,#e8eef3,#f5f8fa 58%,#e9f0f5)}
.page{width:min(1120px,100%)}
.card{background:#fff;border-radius:26px;padding:38px 42px 42px;min-height:480px;box-shadow:0 16px 50px #263e5514}
.brand{display:flex;align-items:center;gap:12px;color:#526477;font-weight:650;font-size:14px}
.brand-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#2468c8;color:#fff;font-size:22px;font-weight:800}
.layout{display:grid;grid-template-columns:1fr minmax(340px,440px);gap:58px;align-items:center;padding:38px 0 8px}
h1{font-size:clamp(30px,4vw,42px);letter-spacing:-1px;margin:0 0 18px;font-weight:650}
.intro p{max-width:500px;color:#526170;line-height:1.85;font-size:15px}
.intro .muted{font-size:13px;color:#8995a1}
.verify{min-height:310px;border:1px solid #e0e7ed;border-radius:18px;background:#fbfcfd;padding:24px;box-shadow:0 5px 18px #22374c0d}
.verify-head{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.checkmark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#2164c5;background:#e8f1ff;font-weight:800}
h2{font-size:16px;margin:0 0 4px}
#status{font-size:12px;color:#7a8794;margin:0}
.welcome{padding:20px 2px}
.welcome p,.hint{font-size:14px;color:#647384;line-height:1.7}
.primary,.secondary{border:0;border-radius:999px;min-height:44px;padding:11px 22px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:background .15s,transform .15s}
.primary{background:#1769d2;color:white;box-shadow:0 5px 12px #1769d22e}
.primary:hover{background:#105bbd;transform:translateY(-1px)}
.primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.secondary{background:#edf2f6;color:#435365}
.prompt{font-size:15px;margin:10px 0 4px}
.hint{font-size:12px;margin:0 0 12px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{aspect-ratio:1;border:2px solid #e1e7ed;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:clamp(26px,3vw,36px);cursor:pointer;transition:.15s}
.tile:hover{border-color:#8bb5eb;transform:translateY(-1px)}
.tile[aria-pressed=true]{border-color:#1769d2;background:#eaf3ff;box-shadow:inset 0 0 0 1px #1769d2}
.actions{display:flex;justify-content:space-between;gap:10px;margin-top:15px}
.success{text-align:center;padding:20px 4px 4px;animation:fade .25s ease-out}
.success-icon{display:grid;place-items:center;margin:auto auto 10px;width:48px;height:48px;border-radius:50%;background:#e4f6ec;color:#16804a;font-size:25px}
.success h3{margin:0 0 8px;font-size:20px}
.success p{font-size:13px;color:#667586;line-height:1.6}
.success small{display:block;color:#98702e;margin-top:14px;line-height:1.5}
[hidden]{display:none!important}
footer{display:flex;justify-content:space-between;align-items:center;padding:20px 12px;color:#83909d;font-size:12px}
footer nav{display:flex;gap:24px}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:#2868b9;text-decoration:underline}
select{border:0;background:transparent;color:#667586;padding:8px;font:inherit}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:760px){body{padding:14px 10px;place-items:start center}.card{padding:24px 18px;border-radius:21px}.layout{grid-template-columns:1fr;gap:20px;padding-top:28px}.verify{padding:18px;min-height:300px}footer{padding:17px 3px;gap:12px;align-items:flex-start}footer nav{gap:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.restart{display:block;margin:12px auto 0;min-width:132px}
.failure-icon{background:#fff1e8!important;color:#b45309!important}