@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");
:root{--bg:#F7F7F9;--text:#0F172A;--muted:#6B7280;--primary:#2433A8;--primary-press:#1f2a8a;--yellow:#FACC15;--radius:6px}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{min-height:100%;display:flex;flex-direction:column}
.header{padding:48px 20px 24px;text-align:center}
.logo{display: flex; justify-content: center; align-items: center;font-size: 22pt; color: rgb(11, 30, 77)}
.brand{margin-top:10px;font-weight:600;font-size:18px;letter-spacing:.2px}
.main{flex:1;padding:0 20px}
.h1{margin:0;text-align:center;font-size:22px;line-height:1.35;font-weight:600}
.p{margin:8px auto 0;max-width:20rem;text-align:center;color:var(--muted);font-size:14px;line-height:1.4}
.section{margin-top:24px}
.section h2{margin:0 0 12px;text-align:center;font-weight:600}
.form{margin:12px auto 0;max-width:28rem; padding-top:20px;}
/* Register page title */
.title-xl{margin:28px 0 12px;text-align:left;font-size:28px;line-height:1.25;font-weight:700}
/* Field blocks */
.field{margin-top:18px}
.label{display:block;margin:0 0 10px;font-size:12px;line-height:1.2;color:#111827}
.input{width:100%;border:1px solid #E5E7EB;background:#f3f3f3;border-radius:var(--radius);padding:12px 16px;font-size:15px;color:#111827;outline:none;transition:.15s}
.title-center{margin:28px 0 12px;text-align:center;font-size:28px;line-height:1.25;font-weight:400}
.input-soft{background:#F3F4F6;border-color:#E5E7EB}
.input:focus{box-shadow:0 0 0 2px rgba(36,51,168,.25);border-color:#C7D2FE}
.input-wrap{position:relative}
.eye-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#9CA3AF;background:none;border:0;padding:4px;cursor:pointer}
.hint{margin:10px 2px 0;color:#4B5563;font-size:10px;line-height:1.5}
.btn{width:100%;height:48px;border:none;border-radius:8px;background:var(--primary);color:#fff;font-weight:400;font-size:14px;box-shadow:0 6px 16px rgba(31,53,160,.25);cursor:pointer;transition:background .15s}
.btn:active{background:var(--primary-press)}
.cta{margin-top:12px;text-align:center;color:#475569;font-size:14px}
.form .btn{margin-top:20px}
.cta a{color:var(--primary);text-decoration:none;font-weight:500}
.footer{height:32px}
/* Safe areas */
@supports(padding:max(0px)){.header{padding-top:max(48px,env(safe-area-inset-top))}.main{padding-bottom:max(0px,env(safe-area-inset-bottom))}}

/* PIN screen */
.pin-header{padding-top:56px;text-align:center}
.pin-logo{width:56px;height:56px;border-radius:16px;overflow:hidden;margin:0 auto 14px;position:relative;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.pin-logo .y{position:absolute;inset:0;background:var(--yellow)}
.pin-logo .b{position:absolute;right:0;top:0;width:50%;height:100%;background:var(--primary);border-top-left-radius:16px;border-bottom-left-radius:16px}
.pin-legend{margin-top:26px;color:#4B5563;font-size:12px;line-height:1.35}
.rule{height:1px;background:#E5E7EB;margin:0 0 22px 0}
.code{display:flex;justify-content:space-between; align-items: center; gap:5px; margin:0 auto 28px; flex-wrap: nowrap;}
.code input{width:50px;height:43px;border-radius:5px;border:1px solid #E5E7EB;background:#fff;text-align:center;font-size:24px;font-weight:600;outline:none}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:520px;margin:0 auto 20px;padding:0 20px}
.key{height:65px;border:none;border-radius:8px;background:var(--primary);color:#0b0b0b;font-size:24px;font-weight:400;box-shadow:0 6px 16px rgba(31,53,160,.25)}
.key:active{filter:brightness(.92)}
.key--muted{color:#111827; font-size:22px}
.key--action{background:var(--primary);color:#000;font-size:45px}

/* Summary page */
.topbar{display:flex;align-items:center;gap:10px;padding:16px 20px}
.card{margin:18px 0 0;border:1px solid #c2c2c2;background:#F8FAFC;border-radius:10px;padding:18px}
.card p{margin:8px 2px;color:#919191;font-size:14px}
.btn-fixed{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));display:block;text-align:center;line-height:48px}

/* process screen */
.wait-body{margin:0;background:#1b2a76;color:#fff}
.wait-wrap{min-height:100vh;padding:18px 16px 28px;display:flex;flex-direction:column}
.wait-top{padding-top:max(12px,env(safe-area-inset-top));text-align:center}
.wait-app{font-size:28px;font-weight:700;letter-spacing:.3px}
.wait-brand{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:18px}
.wait-brand .mark{width:26px;height:26px;border-radius:6px;background:#fff;box-shadow:inset 2px 0 0 0 #ff0000;}
.wait-brand .brand-text{font-size:22px;font-weight:700}
.panel{flex:1;margin:22px 8px;border:2px solid rgba(255,255,255,.85);border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}
.bubble{width:min(76vw,360px);height:min(76vw,360px);background:#fff;border-radius:9999px;display:grid;place-items:center;position:relative;animation:pop 700ms ease-out}
.tick{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:12px;height:12px;background:#FACC15;border-radius:2px}
.bubble-text{color:#1b2a76;text-align:center;font-size:18px;line-height:1.5;font-weight:600}
.progress{position:absolute;left:24px;right:24px;bottom:22px;height:6px;background:rgba(255,255,255,.25);border-radius:999px;overflow:hidden}
.progress .bar{position:absolute;left:0;top:0;bottom:0;width:32%;background:linear-gradient(90deg,#FACC15,#ffd54d);border-radius:999px;animation:run 1600ms infinite ease-in-out}
@keyframes run{0%{transform:translateX(-110%)}50%{transform:translateX(50%)}100%{transform:translateX(210%)}}
@keyframes pop{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1);opacity:1}}