/* Mirror 1 header palette, sized for the responsive login. */
body{background:radial-gradient(circle at 12% 16%,rgba(56,189,248,.22),transparent 28%),radial-gradient(circle at 88% 18%,rgba(37,99,235,.28),transparent 30%),radial-gradient(circle at 55% 92%,rgba(14,165,233,.16),transparent 36%),linear-gradient(135deg,#020617 0%,#061a44 38%,#082b68 72%,#020617 100%);color:#eef5ff}
.wrap{padding:40px 20px;min-height:100svh}
.card{width:min(720px,100%);padding:36px;border:2px solid rgba(125,211,252,.50);border-radius:28px;background:linear-gradient(135deg,rgba(8,31,78,.84),rgba(11,63,145,.58) 52%,rgba(56,189,248,.20));box-shadow:0 20px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);overflow:visible}
.card:before{display:none}
.title{justify-content:center;text-align:center;color:#bae6fd;font-size:26px;line-height:1.2;gap:14px;letter-spacing:-.7px;margin:0;font-weight:750;text-shadow:none}
.title img{height:42px;width:auto}
.subtitle{color:#f6d365;background:linear-gradient(90deg,#b7791f 0%,#f6d365 42%,#facc15 62%,#d69e2e 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 16px rgba(246,211,101,.30));font-size:clamp(32px,7.5vw,58px);font-weight:800;text-align:center;line-height:1.15;letter-spacing:-1px;hyphens:auto;margin:24px 0 36px;padding-left:0;overflow-wrap:anywhere}
.login-label{display:block;text-align:center;color:#c0d2e8;font-size:13px;font-weight:600;letter-spacing:.2px;margin:0 0 9px}
.input{width:100%;height:54px!important;border:1px solid #96bce838!important;border-radius:14px!important;background:#061b37!important;box-shadow:inset 0 2px 5px #0001!important;font-size:16px!important;padding:0 16px!important;color:#f2f7ff!important}
.input::placeholder{color:#7793b3}
.input:focus-visible{outline:3px solid #64b5ff80;outline-offset:3px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:14px;font-size:16px;font-weight:650;letter-spacing:.1px;color:#f2f7ff;background:linear-gradient(135deg,#0b3f91,#082b68);border:1px solid #77b8ff70;box-shadow:0 8px 22px #00132d44;transition:background .2s,transform .2s,box-shadow .2s;cursor:pointer}
.btn:hover{filter:none;box-shadow:0 10px 26px #00132966;background:linear-gradient(120deg,#2679d5,#3395e5);transform:translateY(-1px)}
.btn:disabled{cursor:default;opacity:.65;transform:none}
.btn:focus-visible,.login-home:focus-visible{outline:3px solid #64b5ff;outline-offset:4px}
.btn .icon{width:20px;height:20px;flex:none;fill:currentColor}
.login-divider{display:flex;align-items:center;gap:16px;color:#819dbc;font-size:13px;margin:24px 0}
.login-divider:before,.login-divider:after{content:"";height:1px;background:#9bbade25;flex:1}
.app-login-button{width:100%;background:#17395f;border-color:#97bfe23b;box-shadow:inset 0 1px 0 #ffffff09}
.app-login-button:hover{background:#214b77}
#app-login-panel{text-align:center;margin-top:24px;padding:22px 18px 16px;border:1px solid #8fb9e92c;border-radius:20px;background:#061c3970;animation:login-reveal .25s ease-out}
.qr-surface{display:none;width:fit-content;margin:0 auto 20px;padding:6px;background:white;border-radius:16px;box-shadow:0 8px 22px #0003}
.has-qr .qr-surface{display:block}
#app-login-qr{display:block;width:min(224px,100%);height:auto;max-width:100%;border-radius:10px}
#app-login-qr[hidden],#app-login-panel[hidden]{display:none}
.qr-verification{padding:14px 12px;border-radius:12px;border:1px solid #88b9e425;background:#123256;max-width:260px;margin:auto}
.qr-verification .login-label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:6px;color:#92afd0}
#app-login-number{font:600 30px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;color:#f6d365;letter-spacing:6px;padding-left:6px}
#app-login-status{font-size:13px;line-height:1.6;color:#a9c0dc;margin:16px 0 0;text-wrap:balance}
.login-home{display:flex;align-items:center;justify-content:center;gap:8px;margin:28px 0 0;color:#9db7d6;font-size:14px;min-height:36px;transition:color .2s}
.login-home:hover{color:white}
@keyframes login-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:380px){.wrap{padding:20px 12px}.card{padding:26px 20px;border-radius:22px}.title{font-size:23px}.subtitle{margin-bottom:26px}#app-login-panel{padding:18px 12px}.qr-surface{max-width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.login-form,.app-login-section,.login-divider,.login-home{width:100%;max-width:400px;margin-left:auto;margin-right:auto}.input{text-align:center}

/* Keep the QR's quiet zone square and its image centred at every viewport. */
.qr-surface{width:min(260px,100%);aspect-ratio:1;padding:12px;box-sizing:border-box;margin-inline:auto;align-items:center;justify-content:center}
.has-qr .qr-surface{display:flex}
#app-login-qr{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;margin:0 auto;border-radius:0;flex:none}