* { box-sizing: border-box; }
.keyolhu-login { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 12% 35%, #e9f5fc, transparent 55%), radial-gradient(ellipse at 95% 85%, #f1eaf7, transparent 50%), #f8fafc; color: #243d55; font-family: "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.keyolhu-login a { text-decoration: none; }
.keyolhu-login button, .keyolhu-login input { font: inherit; }
.keyolhu-login button { cursor: pointer; }
.keyolhu-login [hidden] { display: none !important; }
.login-header { width: min(1200px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; gap: 16px; }
.login-header img { object-fit: contain; }
.login-home-link { color: #61738a; font-size: 13px; font-weight: 600; }
.login-home-link span { margin-right: 7px; }
.login-home-link:hover { color: #863b96; }
.login-main { display: flex; align-items: center; flex: 1; width: 100%; padding: 28px 32px 40px; }
.login-shell { display: grid; grid-template-columns: 1fr 1fr; max-width: 1050px; width: 100%; margin: 0 auto; background: white; border: 1px solid #e2e8f1; border-radius: 24px; box-shadow: 0 18px 65px rgba(57,70,110,.09); overflow: hidden; }
.login-welcome { display: flex; flex-direction: column; justify-content: center; padding: 48px 42px; background: linear-gradient(135deg, #338ec8, #5e65ac 58%, #863b96); color: white; }
.login-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: .15em; color: #7e5192; }
.login-welcome .login-eyebrow { color: #edf4ff; }
.login-welcome h2 { font-size: 34px; font-weight: 700; line-height: 1.25; letter-spacing: -.035em; margin: 18px 0; }
.login-welcome p { font-size: 14px; line-height: 1.8; color: #f0f4ff; margin: 0; max-width: 340px; }
.login-illustration { display: block; width: 100%; height: 205px; object-fit: contain; margin: 24px 0; padding: 12px; border-radius: 16px; background: #f3faff; border: 1px solid rgba(255,255,255,.4); }
.login-welcome-caption { font-size: 11px; line-height: 1.6; color: #edf4ff; }
.login-card { padding: 48px 40px; align-self: center; }
.login-intro h1 { margin: 12px 0 10px; color: #243d55; font-size: 27px; line-height: 1.3; letter-spacing: -.03em; }
.login-intro p { font-size: 14px; color: #6a798d; line-height: 1.6; margin: 0; }
.login-tabs { display: flex; gap: 5px; padding: 5px; margin: 28px 0; background: #f1f4f9; border: 1px solid #e8edf4; border-radius: 12px; }
.login-tabs button { display: flex; align-items: center; justify-content: center; flex: 1; gap: 8px; min-width: 0; padding: 12px 8px; border: 1px solid transparent; border-radius: 8px; color: #67778e; background: transparent; font-size: 13px; font-weight: 600; }
.login-tabs svg { width: 19px; height: 19px; flex-shrink: 0; }
.login-tabs button[aria-selected="true"] { background: white; color: #745095; border-color: #e6deee; box-shadow: 0 2px 6px #2638530a; }
.login-tabs button:hover { color: #863b96; }
.login-panel-intro h2 { font-size: 16px; margin: 0 0 8px; }
.login-panel-intro p { font-size: 13px; line-height: 1.7; margin: 0 0 24px; color: #6a798d; }
.login-primary { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; border-radius: 10px; padding: 14px 18px; margin-top: 12px; background: linear-gradient(105deg, #2c98d4, #6464ac 55%, #863b96); color: white; font-size: 14px; font-weight: 600; min-height: 48px; box-shadow: 0 4px 12px #675f9a20; }
.login-primary:hover { filter: brightness(.95); }
.login-provider-note { text-align: center; color: #6a798d; font-size: 12px; line-height: 1.7; margin: 18px 0 0; }
.login-field { margin-bottom: 18px; }
.login-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.login-field input { width: 100%; border: 1px solid #d9e2ed; border-radius: 9px; min-height: 46px; padding: 12px 14px; background: #fcfdff; color: #243d55; font-size: 14px; }
.login-field input::placeholder { color: #8391a2; }
.login-label-row { display: flex; justify-content: space-between; gap: 12px; }
.login-label-row a { font-size: 11px; color: #805092; }
.login-register { border-top: 1px solid #edf0f5; padding-top: 20px; margin-top: 24px; color: #6a798d; font-size: 12px; line-height: 1.8; text-align: center; }
.login-register a { color: #805092; font-weight: 600; }
.login-card a:hover { text-decoration: underline; }
.login-footer { padding: 0 24px 24px; color: #728096; text-align: center; font-size: 11px; line-height: 1.8; }
.login-validation.validation-summary-valid { display: none; }
.login-validation.validation-summary-errors, .login-unavailable { color: #a13946; background: #fff3f4; border-radius: 9px; padding: 12px 16px; font-size: 13px; line-height: 1.6; margin-bottom: 20px; }
.login-validation ul { margin: 0; padding-left: 16px; }
.login-field-error { display: block; margin-top: 6px; font-size: 12px; color: #a13946; }
.keyolhu-login :focus-visible { outline: 3px solid #9e8cbf; outline-offset: 3px; }
@media (max-width: 850px) { .login-shell { max-width: 520px; grid-template-columns: 1fr; } .login-welcome { padding: 28px 32px; } .login-welcome h2 { font-size: 25px; margin: 12px 0; } .login-illustration, .login-welcome-caption { display: none; } .login-card { padding: 32px; } .login-main { padding: 12px 24px 32px; } }
@media (max-width: 767px) { .login-welcome h2 { display: none; } }
@media (max-width: 420px) { .login-header { padding: 18px 20px; } .login-main { padding: 8px 16px 28px; } .login-card, .login-welcome { padding: 26px 22px; } .login-intro h1 { font-size: 24px; } .login-tabs { margin: 24px 0; } .login-tabs button { font-size: 12px; } .login-home-link { font-size: 12px; } }

.account-task-form { margin-top:26px; }
.account-help { margin:24px 0;padding:18px;background:#f4f7fc;border-radius:10px;font-size:13px;line-height:1.8;overflow-wrap:anywhere; }
.account-help h2 { font-size:15px;margin:0 0 8px; }.account-help p { margin:0; }.account-help a { color:#805492; }
.account-otp { padding:0;border:0;margin:0; }.account-otp legend { font-size:12px;font-weight:600;margin-bottom:12px; }
.account-otp-inputs { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px; }
.account-otp .otp-box { width:100%;min-width:0;height:48px;border:1px solid #d9e2ed;border-radius:8px;text-align:center;font-size:22px;background:#fcfdff;color:#29445d; }
.account-expiry { font-size:12px;color:#718197;margin:16px 0; }