/* A shared frame brings the ADWorld identity and the sign-in form together. */
.page-login{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:#eaf0f7}
.page-login #main{flex:1;display:flex;align-items:center;padding-block:42px;background:radial-gradient(ellipse at 16% 25%,#d7e4f680,transparent 52%)}
.login-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);gap:0;max-width:1080px;min-height:608px;padding:0;background:white;border:1px solid #d1dcea;border-radius:12px;overflow:hidden;box-shadow:0 16px 48px #18314c0c,0 2px 8px #18314c06}
.login-context{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:32px 40px;background:#0d1c31;color:#edf5ff;overflow:hidden}
.login-context:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 76% 50%,#245d9e3d,transparent 64%),linear-gradient(145deg,#152c4540,transparent 60%);pointer-events:none}
.login-context:after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#9ecfff08 1px,transparent 1px),linear-gradient(90deg,#9ecfff08 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(135deg,transparent 25%,#000 90%);pointer-events:none}
.login-brand{display:flex;align-items:center;gap:14px;min-height:44px;margin-bottom:24px}
.login-brand img{width:128px;height:26px;object-fit:contain;flex-shrink:0}
.login-brand>span{padding-left:14px;border-left:1px solid #35506d;font-family:var(--font-latin);font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.03em;color:#dfebfa}
.login-intro .eyebrow{font-size:10px;letter-spacing:.15em;color:#8daed3}
.login-context h1{margin:14px 0 0;font-family:var(--font-display);font-weight:400;font-synthesis:none;font-size:48px;line-height:1.4;letter-spacing:.035em;color:#f0f6ff}
.login-art{--login-play:paused;position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:265px;margin:20px -26px 0;pointer-events:none}
.login-art[data-running="true"]{--login-play:running}
.login-scene{width:100%;height:285px;overflow:visible}
.login-form-wrap{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:38px 46px;background:#fff}
.login-form-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}
.login-form-wrap h2{margin:0;font-size:28px;letter-spacing:-.02em}
.login-backlink{display:inline-flex;align-items:center;min-height:44px;font-size:11px;color:#5c6f87;text-underline-offset:4px}
.login-backlink:hover{color:var(--blue);text-decoration:underline}
.login-form-wrap form>label{display:block;font-size:12px;font-weight:600;margin:22px 0 9px}
.login-form-wrap form>label:first-child{margin-top:0}
.login-form-wrap .form-message:empty{min-height:0;margin-top:0}
.login-form-wrap .login-submit{margin-top:24px;min-height:50px}
.login-form-wrap .form-footnote{margin-top:17px}
.login-form-wrap .form-support{margin-top:20px}
@media(max-width:1100px){.login-layout{min-height:584px}.login-context{padding:28px 32px}.login-context h1{font-size:43px}.login-form-wrap{padding:34px}.login-scene{height:265px}}
@media(max-width:850px) and (min-width:768px){.login-context{padding:25px}.login-form-wrap{padding:28px}.login-context h1{font-size:37px}.login-art{margin-inline:-20px}}
@media(max-width:767px){
  .page-login #main{padding-block:20px}
  .login-layout{display:block;min-height:0;border-radius:9px}
  .login-context{display:block;padding:18px 24px 22px}
  .login-brand{margin-bottom:15px;position:relative;z-index:1;gap:12px}
  .login-brand img{width:112px;height:23px}
  .login-brand>span{font-size:18px;padding-left:12px}
  .login-intro{position:relative;z-index:1}
  .login-intro .eyebrow{font-size:9px}
  .login-context h1{font-size:clamp(23px,6.8vw,31px);margin-top:10px;line-height:1.35}
  .login-context h1 br{display:none}
  .login-art{position:absolute;right:-60px;top:27px;width:280px;min-height:0;height:170px;margin:0;opacity:.46;mask-image:linear-gradient(90deg,transparent,#000 55%)}
  .login-scene{height:170px}
  .login-flow-two{display:none}
  .login-form-wrap{padding:27px 24px 22px}
  .login-form-heading{margin-bottom:22px;gap:12px}
  .login-form-wrap h2{font-size:25px}
  .login-form-wrap form>label{margin-top:19px}
  .login-form-wrap .login-submit{margin-top:23px}
  .login-form-wrap .form-support{margin-top:16px}
}
@media(max-width:374px){.login-context{padding-inline:20px}.login-form-wrap{padding:25px 18px 18px}}

/* The verification step stays inside the SMS card; all answer data is server-side. */
.verification{--position:0%;margin-top:16px;padding:12px 16px;background:#101e33;border:1px solid #36557e;border-radius:6px;color:#dae8fc;animation:verification-enter .2s ease-out}
.verification-heading{display:flex;justify-content:space-between;align-items:center;min-height:28px;gap:8px}
.verification-heading .mono{color:#95b8e7;font-size:10px;letter-spacing:.14em}
.verification-close{display:flex;align-items:center;justify-content:center;background:none;border:0;color:#afc5e2;font-size:22px;width:44px;height:44px;margin:-10px -10px -10px 0}
.verification-close:hover{color:white}
.verification-title{font-size:13px;font-weight:600;color:#e3eeff;margin:6px 0 4px;line-height:1.6}
.verification-instruction{font-size:11px;line-height:1.8;color:#a9bedb;margin-bottom:8px}
.verification-map{position:relative;margin-inline:22px;overflow:hidden;border-block:1px solid #2d4566}
.verification-map img{display:block;width:100%;height:auto;max-height:76px;object-fit:cover;object-position:center}
.verification-map img:not([src]){visibility:hidden}
.verification-cursor{position:absolute;left:var(--position);top:7%;bottom:0;border-left:1px solid #b9d9ff;pointer-events:none;filter:drop-shadow(0 0 3px #8ebeff30)}
.verification-cursor:before{content:"";position:absolute;left:-4px;top:0;width:7px;height:7px;border:1px solid #b9d9ff;background:#1c3a61;transform:rotate(45deg)}
.verification-track{position:relative;margin-top:9px;height:52px;background:#0b1525;border:1px solid #344d70;border-radius:5px;touch-action:none;user-select:none}
.verification-lane{position:absolute;inset:0 22px}
.verification-fill{position:absolute;inset:0 auto 0 0;width:var(--position);background:#254f885e;border-right:1px solid #4986d5}
.verification-handle{position:absolute;left:var(--position);top:3px;transform:translateX(-50%);width:44px;height:44px;background:#2867ee;border:1px solid #77a7ff;border-radius:4px;color:white;z-index:2;cursor:grab;padding:0;display:grid;place-items:center;box-shadow:0 2px 10px #0002;touch-action:none}
.verification-handle .ui-icon{width:20px;height:20px;stroke-width:1.8}
.verification-handle:disabled{opacity:.55;cursor:not-allowed}
.verification-handle[data-dragging="true"]{cursor:grabbing;background:#3673f4}
.verification-track-label{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#91aaca;font-size:11px;letter-spacing:.04em;transition:opacity .15s}
.verification[data-state="dragging"] .verification-track-label,.verification[data-state="verifying"] .verification-track-label{opacity:0}
.verification[data-state="failed"] .verification-handle,.verification[data-state="failed"] .verification-fill,.verification[data-state="failed"] .verification-cursor{transition:left .2s ease-out,width .2s ease-out}
.verification[data-state="failed"]{border-color:#a37975}
.verification[data-state="passed"],.verification[data-state="sent"]{border-color:#649ce5}
.verification[data-state="passed"] .verification-track{animation:verification-link .6s ease-out}
.verification[data-state="passed"] .verification-fill{width:100%;background:#2563eb70}
.verification[data-state="sent"] .verification-interactive{display:none}
.verification[data-state="sent"] .verification-title:before{content:"✓";color:#88beff;padding-right:8px}
.verification[data-state="loading"] .verification-map,.verification[data-state="expired"] .verification-map{opacity:.4}
.verification[data-state="loading"] .verification-track-label{visibility:hidden}
.verification-log{display:flex;align-items:center;gap:7px;min-height:20px;margin-top:10px;padding-top:0;font:9px/1.5 Consolas,monospace;letter-spacing:.045em;color:#98bce9}
.verification-log-dot{width:4px;height:4px;border-radius:50%;background:#7da9e7;flex-shrink:0}
.verification-alternative{display:flex;gap:9px;margin-top:12px}
.verification-alternative button{min-height:44px;min-width:44px;background:#1b3354;border:1px solid #526f98;border-radius:4px;color:#e6f1ff;padding:6px 12px;font-size:13px}
.verification-alternative button:nth-child(2){flex:1}
.verification-alternative button:hover{background:#264770}
.verification-help{font-size:11px;color:#acc0dc;line-height:1.8;margin-top:10px}
.verification button:focus-visible{outline:2px solid #aacdff;outline-offset:3px}
.verification[aria-busy="true"] .verification-handle{cursor:wait}
.verification[aria-busy="true"] .verification-track-label{opacity:0}
@keyframes verification-enter{from{opacity:.7;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes verification-link{0%{border-color:#344d70}40%{border-color:#9ac7ff;box-shadow:0 0 14px #598ded28}100%{border-color:#5384c2}}
@media(max-width:1023px){.verification-map img{max-height:64px}}
@media(max-width:767px){.verification{padding:11px 12px;margin-top:14px}.verification-title{font-size:13px}.verification-instruction{font-size:11px}.verification-map{margin-inline:22px}.verification-map img{max-height:64px}.verification-track-label{font-size:10px}.verification-alternative{gap:7px}}
@media(prefers-reduced-motion:reduce){.verification,.verification *{animation:none!important;transition:none!important;scroll-behavior:auto}}

.verification-heading>.mono{margin-right:auto}
.verification-refresh{min-height:44px;margin-block:-8px;padding:0 3px;border:0;background:none;color:#b5cbed;font-size:10px;white-space:nowrap}
.verification-refresh:hover:not(:disabled){color:#fff}
.verification-close{flex-shrink:0}