/* Login-only styles matched to fasadkabul.com/login, 24 September 2026. */
:root{color-scheme:light;--brand-display:"Plus Jakarta Sans",Manrope,"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font:16px/1.5 var(--brand-display);letter-spacing:.005em}main{margin:0;padding:0;width:100%;max-width:none}a{text-decoration:none}button{cursor:pointer;border:0;font-weight:650}input{font-family:inherit;outline:none;font-weight:400;line-height:1.4}button:focus-visible,a:focus-visible{outline:2px solid var(--login-accent);outline-offset:3px}.login-brand-copy h1{letter-spacing:-.055em}.login-brand-copy h1 em{font-style:normal}.login-brand-copy p{margin:1em 0}.login-proof b{display:block;font-size:24px;margin-bottom:5px}.login-form-wrap h2{letter-spacing:-.05em}.login-submit{width:100%;padding:10px 16px}.login-submit:disabled{opacity:.65;cursor:wait}.auth-toolbar>button{display:grid;place-items:center;padding:0}.auth-toolbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}.password-eye{border:0;background:transparent;color:#60747d;padding:8px;width:38px;height:38px}.password-eye svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.skip-link{position:fixed;top:-80px;left:16px;z-index:20;padding:10px;background:white;color:#15231f}.skip-link:focus{top:12px}
body:has(.login-v18){
  --login-bg:#071011;
  --login-overlay:linear-gradient(90deg,rgba(3,11,14,.53) 0%,rgba(5,15,17,.18) 48%,rgba(3,10,12,.38) 100%);
  --login-panel:rgba(7,16,17,.18);
  --login-border:rgba(235,244,241,.78);
  --login-text:#f3f7f5;
  --login-text-muted:#a9bab5;
  --login-input:rgba(25,40,42,.38);
  --login-input-border:rgba(224,238,234,.30);
  --login-accent:#55d3b8;
  --login-shadow:0 24px 70px rgba(0,0,0,.16);
  min-height:100dvh!important;background:var(--login-bg)!important;
}
html[data-theme="light"] body:has(.login-v18){
  --login-bg:#dce5e3;
  --login-overlay:linear-gradient(90deg,rgba(229,237,235,.42) 0%,rgba(232,239,237,.16) 48%,rgba(220,229,226,.38) 100%);
  --login-panel:rgba(246,248,245,.42);
  --login-border:rgba(255,255,255,.72);
  --login-text:#15231f;
  --login-text-muted:#536760;
  --login-input:rgba(255,255,255,.46);
  --login-input-border:rgba(24,57,49,.20);
  --login-accent:#087e69;
  --login-shadow:0 28px 80px rgba(18,48,40,.18);
}
body .login-v18{
  position:relative!important;isolation:isolate!important;display:block!important;
  width:100%!important;min-height:100dvh!important;overflow:hidden!important;
  background-color:var(--login-bg)!important;
  background-image:var(--login-overlay),url('/static/brand/login-project-bell-wide-v2.png')!important;
  background-repeat:no-repeat!important;background-size:cover!important;background-position:center 52%!important;
  color:var(--login-text)!important;
}
body .login-v18:before{
  content:"FASAD\A STROY"!important;position:absolute!important;z-index:0!important;
  left:5.5vw!important;top:9vh!important;white-space:pre!important;
  color:color-mix(in srgb,var(--login-text) 5%,transparent)!important;
  font:700 clamp(92px,12vw,190px)/.76 var(--brand-display)!important;
  letter-spacing:-.085em!important;pointer-events:none!important;
}
body .login-brand-panel{
  position:absolute!important;z-index:1!important;inset:0!important;display:flex!important;
  flex-direction:column!important;justify-content:space-between!important;
  padding:clamp(34px,5vh,62px) 5.6vw clamp(36px,6vh,62px)!important;
  background:none!important;animation:none!important;pointer-events:none!important;
}
body .login-brand-panel:before,body .login-brand-panel:after{display:none!important}
body .login-brand-panel>img{display:none!important}
body .login-brand-copy{width:min(49vw,720px)!important;margin-top:auto!important;margin-bottom:clamp(30px,6vh,78px)!important}
body .login-brand-copy small,body .login-form-wrap>small{color:var(--login-accent)!important;font-size:10px!important;font-weight:700!important;letter-spacing:.2em!important}
body .login-brand-copy h1{margin:18px 0 22px!important;color:var(--login-text)!important;font-size:clamp(48px,4.6vw,76px)!important;line-height:1.04!important;font-weight:300!important}
body .login-brand-copy h1 em{color:var(--login-accent)!important}
body .login-brand-copy p{max-width:590px!important;color:var(--login-text-muted)!important;font-size:16px!important;line-height:1.55!important}
body .login-proof{display:grid!important;grid-template-columns:repeat(3,minmax(0,210px))!important;gap:12px!important;width:min(49vw,670px)!important}
body .login-proof span{padding:18px 20px!important;border:1px solid var(--login-border)!important;border-radius:10px!important;background:color-mix(in srgb,var(--login-panel) 62%,transparent)!important;color:var(--login-text-muted)!important;backdrop-filter:blur(10px)!important}
body .login-proof b{color:var(--login-text)!important}
body .login-form-panel{
  position:absolute!important;z-index:3!important;top:50%!important;right:clamp(38px,6vw,116px)!important;
  display:block!important;width:clamp(420px,32vw,500px)!important;min-height:0!important;
  padding:0!important;background:transparent!important;color:var(--login-text)!important;
  transform:translateY(-50%)!important;
}
body .login-form-wrap{
  width:100%!important;padding:42px 42px 36px!important;box-sizing:border-box!important;
  border:1px solid var(--login-border)!important;border-radius:22px!important;
  background:var(--login-panel)!important;color:var(--login-text)!important;
  box-shadow:var(--login-shadow)!important;backdrop-filter:blur(5px) saturate(104%)!important;
  -webkit-backdrop-filter:blur(5px) saturate(104%)!important;
}

/* The reference uses an outline panel, not a dark card: let the facade show through. */
body .login-v18 .login-form-wrap{
  background-color:transparent!important;
  background-image:linear-gradient(135deg,rgba(5,16,18,.09),rgba(5,14,16,.025))!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 20px 55px rgba(0,0,0,.10)!important;
}
html[data-theme="light"] body .login-v18 .login-form-wrap{
  background-color:transparent!important;
  background-image:linear-gradient(135deg,rgba(247,250,248,.24),rgba(247,250,248,.07))!important;
  box-shadow:0 20px 55px rgba(22,49,42,.08)!important;
}

@media(min-width:701px){
  body .login-v18 .login-form-wrap{
    background:rgba(4,14,16,.27)!important;background-image:none!important;
    background-attachment:initial!important;
    backdrop-filter:blur(2px) saturate(102%)!important;
    -webkit-backdrop-filter:blur(2px) saturate(102%)!important;
  }
  html[data-theme="light"] body .login-v18 .login-form-wrap{
    background:rgba(244,248,245,.38)!important;background-image:none!important;
  }
}
body .login-form-wrap h2{margin:13px 0 12px!important;color:var(--login-text)!important;font-size:clamp(34px,3vw,45px)!important;line-height:1.08!important;font-weight:350!important}
body .login-form-wrap h2:after{content:none!important}
body .login-form-wrap h2 span{display:inline!important}
body .login-form-wrap>p{display:block!important;margin:0 0 28px!important;color:var(--login-text-muted)!important;font-size:14px!important;line-height:1.5!important}
body .login-form-wrap label{display:block!important;margin:0 0 16px!important;color:var(--login-text)!important;font-size:13px!important;font-weight:600!important;line-height:1.4!important}
body .login-form-wrap input{
  width:100%!important;min-height:54px!important;margin-top:8px!important;padding:0 16px!important;
  box-sizing:border-box!important;border:1px solid var(--login-input-border)!important;border-radius:10px!important;
  background:var(--login-input)!important;color:var(--login-text)!important;font-size:15px!important;
}
body .login-form-wrap input::placeholder{color:color-mix(in srgb,var(--login-text-muted) 78%,transparent)!important}
body .login-form-wrap input:focus{border-color:var(--login-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--login-accent) 18%,transparent)!important}
body .login-options{margin:-2px 0 20px!important}
body .login-options a,body .signup-line a{color:var(--login-accent)!important;font-size:12px!important;font-weight:650!important}
body .login-submit{min-height:54px!important;border-radius:10px!important;background:linear-gradient(105deg,#087f6d,#159b83)!important;color:#fff!important;font-size:15px!important;font-weight:750!important}
body .login-form-wrap .signup-line{display:flex!important;justify-content:center!important;gap:8px!important;margin-top:22px!important;color:var(--login-text-muted)!important;font-size:12px!important}
body .auth-toolbar{position:absolute!important;z-index:5!important;top:22px!important;right:24px!important;bottom:auto!important;left:auto!important;display:flex!important;gap:8px!important}
body .auth-toolbar>button,body .language-switch{
  border:1px solid var(--login-border)!important;border-radius:10px!important;
  background:var(--login-panel)!important;color:var(--login-text)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}
body .auth-toolbar>button{width:44px!important;height:44px!important}
body .language-switch{height:44px!important;padding:4px!important}
body .language-switch button{min-width:38px!important;min-height:34px!important;color:var(--login-text-muted)!important}
body .language-switch .active{background:var(--login-text)!important;color:var(--login-bg)!important}

@media(max-width:1100px) and (min-width:701px){
  body .login-brand-copy{width:45vw!important}
  body .login-brand-copy h1{font-size:44px!important}
  body .login-proof{display:none!important}
  body .login-form-panel{right:34px!important;width:410px!important}
  body .login-form-wrap{padding:36px 34px 32px!important}
}

@media(max-width:700px){
  body:has(.login-v18){overflow-x:hidden!important;overflow-y:auto!important}
  body:has(.login-v18) main{min-height:100dvh!important}
  body .login-v18{
    display:flex!important;align-items:center!important;justify-content:center!important;
    min-height:100dvh!important;height:auto!important;padding:max(76px,calc(env(safe-area-inset-top) + 62px)) 14px max(28px,env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;overflow:visible!important;
    background-image:linear-gradient(180deg,rgba(3,11,14,.28),rgba(4,13,15,.46) 52%,rgba(4,12,13,.62)),url('/static/brand/login-project-bell-wide-v2.png')!important;
    background-position:47% center!important;background-size:cover!important;
  }
  html[data-theme="light"] body .login-v18{
    background-image:linear-gradient(180deg,rgba(238,244,241,.22),rgba(229,237,233,.34) 55%,rgba(224,233,229,.50)),url('/static/brand/login-project-bell-wide-v2.png')!important;
  }
  body .login-v18:before{display:none!important}
  body .login-v18:after{
    content:"FASAD STROY"!important;display:block!important;position:absolute!important;
    z-index:4!important;left:16px!important;top:max(24px,env(safe-area-inset-top))!important;
    color:var(--login-text)!important;font:650 14px/1 var(--brand-display)!important;
    letter-spacing:.13em!important;pointer-events:none!important;
  }
  body .login-brand-panel{display:none!important}
  body .login-form-panel{
    position:relative!important;inset:auto!important;display:block!important;
    width:min(100%,430px)!important;margin:0 auto!important;padding:0!important;
    transform:none!important;background:transparent!important;
  }
  body .login-form-wrap{
    width:100%!important;padding:23px 22px 21px!important;border-radius:18px!important;
    background:var(--login-panel)!important;box-shadow:var(--login-shadow)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  body .login-form-wrap>small{display:block!important;font-size:9px!important}
  body .login-form-wrap h2{margin:10px 0 9px!important;font-size:32px!important;line-height:1.08!important}
  body .login-form-wrap h2 span{display:inline!important}
  body .login-form-wrap>p{display:block!important;margin:0 0 19px!important;font-size:13px!important;line-height:1.45!important}
  body .login-form-wrap label{margin-bottom:12px!important;font-size:12px!important}
  body .login-form-wrap input{min-height:50px!important;margin-top:6px!important;font-size:16px!important}
  body .login-options{margin:-1px 0 14px!important}
  body .login-submit{min-height:52px!important}
  body .login-form-wrap .signup-line{display:flex!important;margin-top:16px!important;font-size:12px!important}
  body .auth-toolbar{
    position:absolute!important;top:max(14px,env(safe-area-inset-top))!important;right:12px!important;
    bottom:auto!important;left:auto!important;width:auto!important;gap:6px!important;
  }
  body .auth-toolbar>button{width:42px!important;height:42px!important}
  body .language-switch{height:42px!important}
  body .language-switch button{min-width:34px!important;min-height:32px!important;padding-inline:5px!important}
}

@media(max-width:360px){
  body .login-v18{padding-inline:12px!important}
  body .login-v18:after{font-size:12px!important;letter-spacing:.1em!important}
  body .login-form-wrap{padding:20px 17px 18px!important}
  body .login-form-wrap h2{font-size:29px!important}
  body .login-form-wrap>p{font-size:12px!important}
  body .language-switch button{min-width:30px!important}
}

@media(max-height:700px) and (max-width:700px){
  body .login-v18{align-items:flex-start!important;padding-top:max(68px,calc(env(safe-area-inset-top) + 56px))!important}
  body .login-form-wrap{padding-block:18px!important}
  body .login-form-wrap h2{font-size:28px!important}
  body .login-form-wrap>p{margin-bottom:14px!important}
  body .login-form-wrap input{min-height:46px!important}
  body .login-submit{min-height:48px!important}
}

@media(prefers-reduced-motion:reduce){body .login-v18,body .login-brand-panel{animation:none!important}}

body .login-form-wrap .password-field,body .register-glass-page .password-field,body .recovery-glass-page .password-field{position:relative!important;display:block!important;margin-top:8px!important}
body .login-form-wrap .password-field input,body .register-glass-page .password-field input,body .recovery-glass-page .password-field input{margin-top:0!important;padding-right:54px!important}
body .login-form-wrap .password-eye,body .register-glass-page .password-eye,body .recovery-glass-page .password-eye{position:absolute!important;top:50%!important;right:8px!important;transform:translateY(-50%)!important;margin:0!important}

/* Persistent login preference without storing the password. */
body .login-options{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}
body .remember-login span>small{display:block;margin-top:2px;color:#829690!important;font-size:8px!important;font-weight:500!important;line-height:1.25!important}
html[data-theme="light"] body .remember-login span>small{color:#60766f!important}
body .login-options .remember-login{display:inline-flex!important;align-items:center!important;gap:8px!important;margin:0!important;color:#b9c7c2!important;font-size:11px!important;font-weight:600!important;cursor:pointer!important}
body .login-options .remember-login input{appearance:none!important;-webkit-appearance:none!important;display:grid!important;place-items:center!important;width:17px!important;height:17px!important;min-height:17px!important;margin:0!important;padding:0!important;border:1px solid rgba(213,230,224,.42)!important;border-radius:4px!important;background:rgba(14,28,28,.48)!important;cursor:pointer!important}
body .login-options .remember-login input:checked{border-color:#55d3b8!important;background:#168f79!important}body .login-options .remember-login input:checked:after{content:"✓"!important;color:#fff!important;font:800 12px/1 sans-serif!important}
html[data-theme="light"] body .login-options .remember-login{color:#38584f!important}html[data-theme="light"] body .login-options .remember-login input{background:rgba(255,255,255,.58)!important;border-color:rgba(24,57,49,.30)!important}html[data-theme="light"] body .login-options .remember-login input:checked{background:#168f79!important;border-color:#168f79!important}


html[data-theme="light"] .login-form-wrap input:not([type=checkbox]){background:#fff!important;color:#15231f!important;border-color:#cbd6d1!important}
html[data-theme="light"] .auth-toolbar>button{background:#fff!important;color:#172620!important;border-color:rgba(15,31,27,.14)!important}
#auth-error[hidden],[hidden]{display:none!important}#auth-error,.auth-message{font-size:13px!important;padding:10px 12px;border:1px solid #bd5548;border-radius:8px;background:#fff3f0;color:#75251e!important;margin:12px 0!important}
.auth-help{max-width:440px;width:calc(100% - 32px);padding:28px;border:1px solid var(--login-border);border-radius:18px;background:#f4f8f5;color:#15231f;box-shadow:0 24px 70px #0004}.auth-help::backdrop{background:#07101188;backdrop-filter:blur(4px)}.auth-help h2{margin:0 0 12px;font-size:24px}.auth-help p{font-size:14px;line-height:1.6}.auth-help button{padding:12px 20px;border-radius:8px;background:#087f6d;color:white}
@media(min-width:701px) and (max-height:640px){body .login-v18{min-height:650px!important}}

/* Mobile crop and glass treatment from the Kabul login reference. */
@media(max-width:700px){
  body .login-v18{background-position:0 0,62% center!important}
  html[data-theme="light"] body .login-form-wrap{background:linear-gradient(135deg,rgba(247,250,248,.24),rgba(247,250,248,.07))!important;border-color:rgba(16,45,38,.16)!important;box-shadow:0 20px 55px rgba(22,49,42,.08)!important}
}
html[data-theme="light"] body .login-form-wrap input:not([type=checkbox]):focus{border-color:var(--login-accent)!important}