:root{--blue:#0076ff;--ink:#09245d;--muted:#6687b7;--line:#cfe8ff;--cyan:#08c5e8;font-family:"DM Sans","Segoe UI",sans-serif;color:var(--ink);font-size:14px}
*{box-sizing:border-box}
body{margin:0}
button,input,select{font:inherit}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f6ad39;outline-offset:4px}
[hidden]{display:none!important}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;left:15px;top:15px;background:white;padding:12px;z-index:50}
.customer-auth{min-height:100vh;display:flex;flex-direction:column;position:relative;isolation:isolate;background:radial-gradient(ellipse at 18% 4%,#fff 0,transparent 44%),radial-gradient(ellipse at 92% 30%,#e6faff 0,transparent 50%),linear-gradient(135deg,#def4ff,#c7efff 50%,#d6f4ff);overflow-x:clip}
.customer-auth:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 5% 58%,#40b8d028,transparent 32%),radial-gradient(ellipse at 95% 70%,#2e91dc25,transparent 32%);pointer-events:none}
.auth-topbar{width:min(1200px,90%);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0;position:relative;z-index:2}
.home-link{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;color:#4176ab}
.portal-language-switcher{display:flex;align-items:center;gap:9px;color:#3768a1;font-size:11px}
.portal-language-switcher select{background:#ffffffb8;border:1px solid #c4e4ff;border-radius:9px;color:#2461a1;padding:7px 10px;font-size:11px}
.auth-layout{width:min(510px,92%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;padding:18px 0 28px;position:relative;z-index:1}
.auth-card{border:1px solid #ffffffee;border-radius:25px;padding:33px 32px 23px;background:linear-gradient(135deg,#fffffff7,#ffffffec);box-shadow:0 18px 50px #138cc71c,0 2px 7px #368acc12,inset 0 0 25px #e5f6ff55;animation:card-arrive .6s ease both;min-width:0}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:24px;width:fit-content;margin-inline:auto}
.auth-brand:hover{text-decoration:none}
.brand-mark{width:49px;height:49px;display:grid;place-items:center;position:relative;isolation:isolate;border-radius:12px 5px 12px 5px;background:linear-gradient(135deg,#75dcfa,#00bced 53%,#0085ee);box-shadow:inset -9px -4px 0 #026ee42b;color:white;font-size:34px}
.brand-mark:before{content:"";position:absolute;z-index:-1;width:34px;height:34px;top:-5px;left:8px;background:#0879ff;transform:rotate(45deg);border-radius:6px}
.auth-brand strong{display:block;font-family:Manrope,"DM Sans",sans-serif;letter-spacing:-1.2px;font-size:28px;font-weight:800;line-height:1.2;color:#0070f8}
.auth-brand small{display:block;color:#628ac0;font-size:15px;margin-top:3px;letter-spacing:-.2px}
.auth-heading h1{font-family:Manrope,"DM Sans",sans-serif;color:#081f58;font-size:35px;font-weight:800;letter-spacing:-1.2px;line-height:1.2;margin:0 0 5px}
.auth-heading>p{font-size:16px;line-height:1.5;color:#7191bc;margin:0;max-width:390px}
.auth-form{margin-top:20px}
.method-fieldset{padding:0;border:0;margin:0 0 21px;min-width:0}
.method-toggle{display:grid;grid-template-columns:1fr 1fr;background:#edf7ff;border:1px solid var(--line);border-radius:22px;padding:2px;position:relative}
.method-toggle input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.method-toggle label{display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;border-radius:20px;padding:15px 8px;font-size:12px;font-weight:700;line-height:1.25;min-height:51px;color:#527cb2;transition:background .2s,color .2s,box-shadow .2s;text-align:center}
.method-toggle label i{font-size:19px}
.method-toggle input:checked+label{color:white;background:linear-gradient(110deg,#147aff,#05beeb);box-shadow:0 4px 10px #049fe333}
.method-toggle input:focus-visible+label{outline:3px solid #f6ad39;outline-offset:2px}
.field{margin-bottom:17px}
.field>label{display:block;font-size:13px;font-weight:700;color:#1b4d91;margin-bottom:8px}
.input-wrap{display:flex;align-items:center;gap:13px;padding:0 13px 0 15px;background:#fbfdff;border:1.5px solid var(--line);border-radius:13px;transition:border-color .2s,box-shadow .2s;min-height:49px}
.input-wrap:focus-within{border-color:#43aaff;box-shadow:0 0 0 3px #0088ff0f}
.input-wrap>i{color:#729acb;font-size:21px;width:20px;text-align:center;flex-shrink:0}
.input-wrap input{background:transparent;border:0;outline:none!important;color:#1b427b;min-width:0;width:100%;height:47px;padding:10px 0;font-size:12px}
.input-wrap input::placeholder{color:#8ca9d0;opacity:1}
.field>small{display:block;margin:7px 1px 0;color:#839ab9;font-size:10px}
.input-wrap.has-error{border-color:#ef8f99}
.field-error{color:#a52b41;font-size:11px;margin:7px 0 0}
.auth-alert{border:1px solid #ffd9aa;border-radius:10px;padding:11px 13px;font-size:12px;line-height:1.5;margin:14px 0;background:#fff8ed;color:#895823}
.auth-alert.error{background:#fff1f3;color:#a12d43;border-color:#ffd2d9}
.auth-alert ul{margin:0;padding-left:18px}
.auth-notice{display:flex;gap:10px;align-items:center;border:1px solid #bee6ff;background:#eff9ff;border-radius:11px;padding:10px 12px;margin-top:16px;font-size:11px;color:#37698f;line-height:1.6}
.auth-notice>i{font-size:16px;color:#009fe3}
.auth-notice strong{color:#075ba8;letter-spacing:1px}
.password-reveal{border:0;background:none;padding:9px 3px;color:#6b93c5;font-size:17px;line-height:1;flex-shrink:0;border-radius:4px}
.password-reveal:hover{color:var(--blue)}
.auth-form:has(#m-otp:checked) .pw-field{display:none}
.form-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-1px;margin-bottom:18px}
.form-options>span{display:flex;align-items:center;gap:7px;color:#6a8bb5;font-size:11px}
.form-options>span i{color:#32a0eb}
.form-options button{border:0;background:none;padding:3px 0;color:#0783ff;font-size:11px;font-weight:600}
.form-options button:hover{text-decoration:underline}
.auth-form:has(#m-otp:checked) #forgot-password{display:none}
.recovery-help{padding:11px 13px;border-radius:10px;background:#f0faff;font-size:12px;line-height:1.6;color:#44749c;margin:0 0 16px}
.auth-submit{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;padding:13px 15px;border:1px solid #21baff66;border-radius:20px;min-height:50px;background:linear-gradient(110deg,#1274fa,#0fc9e6);color:white;box-shadow:0 7px 14px #189bdd24;font-size:17px;font-weight:600;transition:transform .2s,box-shadow .2s}
.auth-submit:hover{transform:translateY(-2px);box-shadow:0 10px 20px #189bdd35}
.auth-submit>i{font-size:20px}
.auth-submit:disabled{cursor:wait;opacity:.75;transform:none}
.auth-submit.is-loading>i{animation:loading-pulse .8s ease infinite alternate}
.auth-divider{display:flex;align-items:center;gap:14px;color:#93accc;font-size:10px;margin:21px 0 16px}
.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#dbeaf8}
.register-link,.resend-link{margin:0;text-align:center;font-size:11px;color:#7893b4;line-height:1.7}
.register-link a,.resend-link a{font-weight:700;color:#0078fa}
.register-link i{font-size:10px;margin-left:4px}
.card-security{display:flex;align-items:center;justify-content:center;gap:7px;border-top:1px solid #e5eff8;padding-top:15px;margin-top:20px;font-size:9px;color:#8da2bc;line-height:1.5;text-align:center}
.card-security i{font-size:10px;color:#6eadd7}
.auth-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;width:min(1100px,90%);margin:0 auto;padding:20px 0 18px;color:#658ab0;font-size:10px}
.auth-footer>span b{font-size:7px;margin:0 7px;color:#92b5d5}
.auth-footer nav{display:flex;gap:17px}
.auth-footer nav a{color:#5980ad}
.auth-footer small{flex-basis:100%;text-align:center;font-size:9px;color:#7398ba;margin-top:-12px}
.background-wave{position:absolute;bottom:0;left:0;width:100%;height:200px;z-index:-1;pointer-events:none}
.verification-icon{display:grid;place-items:center;width:56px;height:56px;background:#e9f7ff;color:#0086ff;border:1px solid #d0edff;border-radius:18px;font-size:27px;margin-bottom:15px}
.auth-heading .mobile-confirmation{font-size:13px;margin-top:14px;color:#6484ac}
.mobile-confirmation strong{color:#2468a3;font-weight:600}
.input-wrap .otp-input{letter-spacing:9px;font-size:22px;font-weight:600;height:57px}
.resend-link{margin-top:21px}
.back-link{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:17px;font-size:11px;color:#6091bb}
@keyframes card-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes loading-pulse{from{opacity:.3;transform:translateX(-3px)}to{opacity:1;transform:translateX(3px)}}
@media(min-width:1500px){.auth-card{padding:36px 34px 26px}.auth-heading h1{font-size:39px}.auth-heading>p{font-size:17px}}
@media(max-width:1050px){.auth-card{padding:28px 26px 22px}.auth-brand strong{font-size:25px}.auth-brand small{font-size:13px}.auth-heading h1{font-size:32px}.auth-heading>p{font-size:14px}}
@media(max-width:800px){.auth-layout{padding-top:12px}.auth-topbar{padding:17px 0 15px}.auth-card{padding:30px}.auth-brand{margin-bottom:24px}.auth-brand strong{font-size:28px}.auth-brand small{font-size:14px}.auth-heading h1{font-size:35px}.auth-heading>p{font-size:16px}.auth-footer{gap:14px;padding:22px 0 17px}.auth-footer small{margin-top:0}.background-wave{height:170px}}
@media(max-width:450px){.auth-topbar{width:91%;padding-top:14px;gap:10px}.home-link{font-size:10px;gap:7px}.portal-language-switcher{gap:6px;font-size:10px}.portal-language-switcher label{display:none}.portal-language-switcher select{font-size:10px;padding:6px}.auth-layout{width:92%;padding:8px 0 12px}.auth-card{padding:27px 21px 21px;border-radius:21px}.auth-brand{gap:11px;margin-bottom:25px}.brand-mark{width:39px;height:39px;font-size:27px}.brand-mark:before{width:27px;height:27px;left:6px;top:-4px}.auth-brand strong{font-size:23px;letter-spacing:-.9px}.auth-brand small{font-size:11px}.auth-heading h1{font-size:30px;letter-spacing:-1px}.auth-heading>p{font-size:14px}.auth-form{margin-top:20px}.method-toggle label{font-size:10px;gap:8px;padding:12px 6px;min-height:46px}.method-toggle label i{font-size:15px}.method-toggle{border-radius:18px}.method-toggle label{border-radius:16px}.field>label{font-size:12px}.input-wrap{padding-left:12px;gap:10px;border-radius:11px}.input-wrap input{font-size:11px;height:47px}.input-wrap>i{font-size:18px}.form-options{margin-bottom:17px}.form-options>span,.form-options button{font-size:10px}.auth-submit{font-size:16px;min-height:48px;border-radius:17px}.register-link,.resend-link{font-size:10px}.auth-notice{font-size:10px;padding:9px 10px;gap:8px}.card-security{font-size:8px;gap:5px;padding-top:14px;margin-top:18px}.auth-footer{font-size:9px;gap:12px;width:90%;padding-top:15px}.auth-footer>span b{margin:0 4px}.auth-footer small{font-size:8px}.verification-icon{width:47px;height:47px;border-radius:14px;font-size:23px}.input-wrap .otp-input{font-size:21px;letter-spacing:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}