/* Kostara responsive authentication layout — desktop, tablet and mobile */
:root{--auth-blue:#2188e8;--auth-ink:#26394f;--auth-muted:#8b9aae}
.auth-page, .auth-page *{box-sizing:border-box}
.auth-page{overflow-x:hidden!important}
.auth-main{width:100%!important;max-width:none!important}
.login-shell{width:100%;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);background:#fff;overflow:hidden}
.login-showcase{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:100vh;min-height:100svh;padding:clamp(28px,4vw,64px) clamp(28px,6.2vw,100px);overflow:hidden;background:linear-gradient(135deg,#176eb8 0%,#258be0 60%,#63b4f2 100%);color:#fff}
.login-showcase:before,.login-showcase:after{content:"";position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.14);border-radius:50%;width:clamp(270px,40vw,620px);height:clamp(270px,40vw,620px);right:-15%;bottom:-28%}
.login-showcase:after{width:clamp(190px,29vw,420px);height:clamp(190px,29vw,420px);right:-7%;bottom:-18%}
.login-brand{display:flex;align-items:center;gap:12px;position:relative;z-index:1;color:#fff;text-decoration:none}
.login-brand-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:13px;background:rgba(255,255,255,.19);font-size:19px;color:#fff}
.login-brand span:last-child{display:flex;flex-direction:column;gap:3px}.login-brand strong{font-size:21px;font-weight:800;letter-spacing:-.5px}.login-brand small{font-size:8px;letter-spacing:1.5px;font-weight:800;color:rgba(255,255,255,.74)}
.login-showcase-copy{position:relative;z-index:1;width:min(100%,640px);margin:auto 0;padding:56px 0}
.login-kicker{display:inline-block;font-size:10px;letter-spacing:1.7px;line-height:1.5;font-weight:800;color:#5aa5e7}
.login-showcase .login-kicker{color:#c4e7ff}
.login-showcase h1{max-width:650px;font-size:clamp(36px,4.2vw,66px);letter-spacing:-2.2px;line-height:1.08;margin:18px 0 20px;font-weight:800}
.login-showcase h1 em{font-style:normal;color:#d4eeff}
.login-showcase-copy p{max-width:440px;line-height:1.8;font-size:clamp(13px,1.05vw,15px);color:rgba(255,255,255,.83);margin:0}
.login-showcase-foot{position:relative;z-index:1;font-size:11px;color:rgba(255,255,255,.78);display:flex;align-items:center;gap:10px}
.login-panel{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:100vh;min-height:100svh;padding:clamp(32px,5vw,76px) clamp(26px,6.3vw,100px);background:#fff}
.login-form-wrap{width:100%;max-width:440px;margin:auto}
.login-mobile-brand{display:none}
.login-form-wrap h2{font-size:clamp(25px,2.1vw,32px);letter-spacing:-1px;color:var(--auth-ink);margin:10px 0 9px;font-weight:800;line-height:1.2}
.login-subtitle{font-size:13px;line-height:1.6;color:#8b9aae;margin:0 0 30px}
.login-form-modern{display:flex;flex-direction:column;gap:10px;width:100%}
.login-form-modern>label{font-size:12px;font-weight:700;color:#5e7087;margin-top:8px}
.login-input-wrap{width:100%;min-height:52px;border:1px solid #e1e8f0;border-radius:10px;background:#fbfcfe;display:flex;align-items:center;gap:12px;padding:0 15px;color:#9ba8b7;transition:border-color .18s,box-shadow .18s,background .18s}
.login-input-wrap:focus-within{border-color:#8abceb;background:#fff;box-shadow:0 0 0 4px rgba(33,136,232,.09)}
.login-input-wrap>i{font-size:15px;flex:0 0 16px}
.login-input-wrap input{display:block;min-width:0;width:100%;height:50px;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;margin:0!important;font-size:13px;color:#34475e}
.login-input-wrap input::placeholder{color:#b2bdc9}
.login-input-wrap button{width:34px;height:34px;flex:0 0 34px;border:0;background:transparent;color:#8c9bad;cursor:pointer;border-radius:7px;padding:0}
.login-input-wrap button:hover{background:#edf5fd;color:var(--auth-blue)}
.login-submit{width:100%;min-height:52px;margin-top:16px;border:0;border-radius:10px;background:linear-gradient(110deg,#2187dc,#3c9be8);color:#fff;font-size:13px;font-weight:800;display:flex;justify-content:center;align-items:center;gap:13px;cursor:pointer;box-shadow:0 9px 20px rgba(33,136,232,.18);transition:transform .16s,filter .16s}
.login-submit:hover{filter:brightness(.97);transform:translateY(-1px)}
.login-submit:focus-visible,.login-input-wrap button:focus-visible{outline:3px solid rgba(33,136,232,.25);outline-offset:2px}
.login-security{display:flex;justify-content:center;align-items:center;gap:7px;margin:20px 0 0;color:#a0adbc;font-size:11px;text-align:center}
.login-copyright{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:20px;right:20px;text-align:center;color:#a3afbd;font-size:10px}
.login-error{padding:12px 14px;border-radius:9px;background:#fff0f1;border:1px solid #f6dadd;color:#bd4351;font-size:12px;margin:0 0 14px;display:flex;gap:9px;line-height:1.5}
.login-error i{margin-top:2px;flex:0 0 auto}
/* Tablet: keep the brand as a full-width header and give the form enough room. */
@media (min-width:641px) and (max-width:1023px){
 .login-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
 .login-showcase{min-height:0;padding:25px clamp(24px,6vw,60px)}
 .login-showcase-copy{padding:30px 0 22px;margin:0;max-width:720px}
 .login-showcase h1{font-size:clamp(28px,4.2vw,42px);max-width:600px;margin:10px 0}
 .login-showcase-copy p{font-size:13px;max-width:560px}
 .login-showcase-foot{display:none}
 .login-panel{min-height:0;padding:44px 24px 72px}
 .login-form-wrap{max-width:480px}
 .login-mobile-brand{display:none}
 .login-copyright{bottom:18px}
}
/* Mobile: compact top brand area, centered form, no horizontal overflow. */
@media (max-width:640px){
 .login-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
 .login-showcase{min-height:0;height:auto;padding:22px 22px 24px;flex:0 0 auto}
 .login-showcase:before,.login-showcase:after{width:220px;height:220px;right:-90px;bottom:-150px}
 .login-brand{gap:10px}.login-brand-icon{width:39px;height:39px;flex-basis:39px;border-radius:11px;font-size:17px}
 .login-brand strong{font-size:19px}
 .login-showcase-copy{display:none}
 .login-showcase-foot{display:none}
 .login-panel{min-height:0;flex:1 1 auto;padding:clamp(32px,8vh,58px) 22px calc(76px + env(safe-area-inset-bottom));justify-content:flex-start}
 .login-form-wrap{max-width:440px;margin:0 auto}
 .login-mobile-brand{display:none}
 .login-form-wrap h2{font-size:26px}
 .login-subtitle{font-size:12px;margin-bottom:22px}
 .login-form-modern>label{font-size:12px}
 .login-input-wrap{min-height:50px}.login-input-wrap input{height:48px;font-size:16px}
 .login-submit{min-height:50px;font-size:13px}
 .login-security{font-size:10px;margin-top:18px}
 .login-copyright{bottom:max(16px,env(safe-area-inset-bottom))}
}
@media (max-height:620px) and (min-width:1024px){.login-showcase,.login-panel{min-height:620px}.login-showcase-copy{padding:25px 0}.login-showcase h1{font-size:38px;margin:12px 0}.login-subtitle{margin-bottom:18px}}

/* Viewport-aligned login layout (overrides any inherited .container rules). */
.auth-page .login-shell { position:relative!important; left:50%!important; transform:translateX(-50%)!important; width:100vw!important; max-width:100vw!important; min-width:320px!important; margin:0!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.auth-page .login-showcase, .auth-page .login-panel { min-width:0; }
.auth-page .login-form-wrap { width:min(100%,440px); }
@media (min-width:1024px) {
  .auth-page .login-shell { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .auth-page .login-showcase { padding-left:clamp(32px,7vw,112px); padding-right:clamp(28px,5vw,78px); }
  .auth-page .login-panel { padding-left:clamp(28px,5vw,80px); padding-right:clamp(28px,7vw,112px); }
}
@media (min-width:641px) and (max-width:1023px) {
  .auth-page .login-shell { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .auth-page .login-showcase { min-height:0; padding:24px clamp(24px,7vw,72px) 26px; }
  .auth-page .login-showcase-copy { padding:26px 0 12px; max-width:720px; }
  .auth-page .login-showcase h1 { font-size:clamp(30px,5vw,46px); }
  .auth-page .login-panel { min-height:0; padding:42px 24px 70px; }
  .auth-page .login-form-wrap { max-width:500px; }
}
@media (max-width:640px) {
  .auth-page .login-shell { display:flex; flex-direction:column; min-height:100svh; }
  .auth-page .login-showcase { padding:19px 20px; min-height:0; }
  .auth-page .login-panel { flex:1 0 auto; justify-content:flex-start; padding:38px 22px calc(70px + env(safe-area-inset-bottom)); }
  .auth-page .login-form-wrap { max-width:460px; }
  .auth-page .login-form-wrap h2 { font-size:clamp(24px,6vw,28px); }
}


/* Final viewport and responsive rules. These override legacy container styles. */
html, body.auth-page { margin:0!important; padding:0!important; width:100%!important; min-width:320px!important; }
body.auth-page { min-height:100vh; min-height:100svh; overflow-x:hidden!important; }
body.auth-page > main.auth-main { display:block!important; width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important; position:static!important; left:auto!important; transform:none!important; }
.auth-page .login-shell { display:grid!important; width:100%!important; max-width:none!important; min-width:0!important; min-height:100vh; min-height:100svh; margin:0!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; }
.auth-page .login-showcase, .auth-page .login-panel { min-width:0!important; width:auto!important; }
.auth-page .login-panel { padding-left:clamp(24px,5vw,88px)!important; padding-right:clamp(24px,5vw,88px)!important; }
.auth-page .login-form-wrap { width:100%!important; max-width:440px!important; }
.auth-page .login-copyright { position:absolute; }
@media (min-width:641px) and (max-width:1023px) {
  .auth-page .login-shell { display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto 1fr!important; }
  .auth-page .login-showcase { min-height:auto!important; padding:24px clamp(28px,7vw,72px) 26px!important; }
  .auth-page .login-showcase-copy { margin:20px 0 0!important; padding:18px 0 4px!important; max-width:720px!important; }
  .auth-page .login-showcase h1 { max-width:680px!important; font-size:clamp(30px,4vw,44px)!important; }
  .auth-page .login-panel { min-height:0!important; padding:48px 24px 76px!important; }
  .auth-page .login-form-wrap { max-width:520px!important; }
}
@media (max-width:640px) {
  .auth-page .login-shell { display:flex!important; flex-direction:column!important; min-height:100vh; min-height:100svh; }
  .auth-page .login-showcase { flex:0 0 auto!important; min-height:0!important; height:auto!important; padding:18px 20px 20px!important; }
  .auth-page .login-brand-icon { width:40px!important; height:40px!important; flex-basis:40px!important; }
  .auth-page .login-showcase-copy, .auth-page .login-showcase-foot { display:none!important; }
  .auth-page .login-panel { flex:1 0 auto!important; min-height:0!important; justify-content:flex-start!important; align-items:stretch!important; padding:clamp(34px,8vh,58px) 22px calc(76px + env(safe-area-inset-bottom))!important; }
  .auth-page .login-form-wrap { max-width:460px!important; margin:0 auto!important; }
  .auth-page .login-form-wrap h2 { font-size:clamp(24px,6vw,28px)!important; }
  .auth-page .login-subtitle { margin-bottom:22px!important; }
  .auth-page .login-input-wrap { min-height:52px!important; }
  .auth-page .login-input-wrap input { height:50px!important; font-size:16px!important; }
  .auth-page .login-submit { min-height:52px!important; }
  .auth-page .login-copyright { bottom:max(14px,env(safe-area-inset-bottom))!important; }
}