@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--ink:#182230;--muted:#697586;--line:#dce2e9;--orange:#f36f21;--orange-dark:#d95810;--navy:#122239}
*{box-sizing:border-box}body.auth-page{margin:0;min-height:100vh;background:#f4f6f9;color:var(--ink);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px, .92fr) 1.08fr}.auth-story{position:relative;overflow:hidden;display:flex;align-items:stretch;color:#fff;background:linear-gradient(150deg,rgba(11,26,44,.9),rgba(18,34,57,.76)),url('../img/login-bg.jpeg') center/cover no-repeat}.auth-story:after{content:"";position:absolute;width:440px;height:440px;border:1px solid rgba(255,255,255,.11);border-radius:50%;right:-210px;bottom:-190px;box-shadow:0 0 0 50px rgba(255,255,255,.025),0 0 0 100px rgba(255,255,255,.02)}.story-content{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;padding:48px clamp(32px,6vw,88px)}.story-brand img{width:158px;max-height:56px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}.story-copy{max-width:490px;margin:auto 0}.story-kicker,.auth-eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em}.story-kicker{color:#ffb27f}.story-copy h1{font:800 clamp(34px,4vw,54px)/1.12 Manrope,sans-serif;letter-spacing:-.04em;margin:20px 0 18px}.story-copy p{max-width:430px;color:rgba(255,255,255,.76);font-size:16px;line-height:1.75;margin:0}.story-footer{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.7);font-size:13px}.story-dot{width:8px;height:8px;border-radius:50%;background:#73d7a4;box-shadow:0 0 0 4px rgba(115,215,164,.14)}.auth-main{display:flex;align-items:center;justify-content:center;padding:48px clamp(24px,6vw,88px)}.auth-card{width:min(100%,470px);padding:44px 46px 28px;background:#fff;border:1px solid #e8ebef;border-radius:18px;box-shadow:0 18px 55px rgba(26,39,58,.08)}.mobile-brand{display:none}.mobile-brand img{width:145px;max-height:48px;object-fit:contain}.auth-heading{margin-bottom:30px}.auth-eyebrow{color:var(--orange);font-size:10px}.auth-heading h2{margin:10px 0 8px;font:800 30px/1.2 Manrope,sans-serif;letter-spacing:-.035em;color:var(--ink)}.auth-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}.auth-form label{display:block;margin-bottom:8px;color:#344054;font-size:13px;font-weight:600}.auth-form .form-control{height:50px;border:1px solid var(--line);border-radius:9px;padding:12px 14px;color:var(--ink);font-size:14px;box-shadow:none;transition:border-color .18s,box-shadow .18s}.auth-form .form-control::placeholder{color:#a0a9b5}.auth-form .form-control:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(243,111,33,.13)}.auth-form .form-control[readonly]{background:#f7f8fa;color:#667085}.auth-field{margin-bottom:19px}.auth-submit{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border:0;border-radius:9px;background:var(--orange);color:#fff;font-size:14px;font-weight:700;transition:background .18s,transform .18s}.auth-submit:hover,.auth-submit:focus{background:var(--orange-dark);color:#fff}.auth-submit:active{transform:translateY(1px)}.auth-link{color:var(--orange-dark);font-weight:600;text-decoration:none}.auth-link:hover{text-decoration:underline;color:#bd4810}.auth-links{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:17px;font-size:13px}.auth-switch{text-align:center;margin:24px 0 0;color:var(--muted);font-size:13px}.auth-switch a{margin-left:4px}.auth-bottom{border-top:1px solid #edf0f3;margin-top:28px;padding-top:18px;text-align:center;color:#98a2b3;font-size:11px}.auth-alert{border-radius:8px;padding:11px 13px;margin:16px 0 0;font-size:13px;line-height:1.5}.auth-alert ul{padding-left:18px;margin:0}.auth-alert li+li{margin-top:3px}.auth-alert p{margin:0}.auth-alert-success{color:#176b43;background:#eaf8f0;border:1px solid #ccebd9}.otp-input{height:64px!important;text-align:center;letter-spacing:.48em;font-size:25px!important;font-weight:700;padding-left:calc(14px + .48em)!important}.otp-hint{text-align:center;color:var(--muted);font-size:13px;margin:-8px 0 22px}.otp-actions{text-align:center;margin-top:19px;color:var(--muted);font-size:13px}.otp-actions a{margin-left:4px}.auth-back{display:block;text-align:center;margin-top:22px;font-size:13px}.auth-help{margin-top:14px;color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:900px){.auth-shell{grid-template-columns: minmax(280px,.8fr) 1.2fr}.story-content{padding:36px}.auth-main{padding:36px}.auth-card{padding:38px 34px 25px}}
@media(max-width:680px){body.auth-page{background:#fff}.auth-shell{display:block;min-height:100vh}.auth-story{display:none}.auth-main{min-height:100vh;align-items:flex-start;padding:32px 20px}.auth-card{width:100%;max-width:480px;margin:auto;padding:22px 4px 20px;border:0;border-radius:0;box-shadow:none}.mobile-brand{display:inline-block;margin:0 0 34px}.auth-heading{margin-bottom:26px}.auth-heading h2{font-size:27px}.auth-bottom{margin-top:30px}.auth-form .form-control{height:52px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
/* Mobile layout: keep the form contained in a clear, comfortably padded card. */
@media(max-width:680px){
    body.auth-page{background:#f3f5f8}
    .auth-main{min-height:100svh;align-items:flex-start;justify-content:center;padding:clamp(18px,5vh,40px) 16px}
    .auth-card{width:100%;max-width:440px;margin:auto;padding:26px 22px 22px;background:#fff;border:1px solid #e7ebf0;border-radius:16px;box-shadow:0 10px 32px rgba(26,39,58,.07)}
    .mobile-brand{display:flex;justify-content:center;margin:0 0 26px}
    .mobile-brand img{width:138px;max-height:46px}
    .auth-heading{margin-bottom:24px}
    .auth-heading h2{font-size:26px;line-height:1.22}
    .auth-heading p{font-size:14px}
    .auth-form label{font-size:13px}
    .auth-form .form-control{height:50px;font-size:16px}
    .otp-input{height:60px!important;font-size:24px!important}
    .auth-field{margin-bottom:17px}
    .auth-submit{min-height:50px}
    .auth-bottom{margin-top:24px;padding-top:15px}
    .auth-switch{line-height:1.6}
}
@media(max-width:380px){
    .auth-main{padding:14px 12px}
    .auth-card{padding:22px 17px 18px;border-radius:14px}
    .mobile-brand{margin-bottom:22px}
    .auth-heading h2{font-size:24px}
    .auth-links,.otp-actions{font-size:12px}
}