/* Auth pages theme bridge — /login, /registration, /recovery.
   Must be loaded after the page's legacy inline auth CSS. */
.login-shell{
  --auth-page-glow:rgba(0,113,227,.075);
  --auth-card:#f5f5f7;
  --auth-card-border:rgba(60,60,67,.14);
  --auth-card-shadow:0 28px 80px rgba(0,0,0,.10);
  --auth-form:#f5f5f7;
  --auth-form-image-overlay:linear-gradient(90deg,rgba(247,247,249,.92) 0%,rgba(247,247,249,.82) 45%,rgba(247,247,249,.90) 100%);
  --auth-form-image-opacity:.22;
  --auth-form-image-filter:blur(58px) saturate(105%) brightness(1.08);
  --auth-form-overlay:radial-gradient(420px 260px at 82% 12%,rgba(0,113,227,.09),transparent 68%),linear-gradient(180deg,rgba(255,255,255,.18),rgba(245,245,247,.46));
  --auth-panel:rgba(255,255,255,.76);
  --auth-panel-2:rgba(255,255,255,.62);
  --auth-line:rgba(60,60,67,.14);
  --auth-line-soft:rgba(60,60,67,.10);
  --auth-text:#1d1d1f;
  --auth-secondary:rgba(60,60,67,.72);
  --auth-tertiary:rgba(60,60,67,.52);
  --auth-field:rgba(255,255,255,.86);
  --auth-field-focus:#fff;
  --auth-feature-bg:rgba(255,255,255,.66);
  --auth-feature-icon:rgba(0,113,227,.08);
  --auth-secondary-button:rgba(255,255,255,.74);
  --auth-secondary-button-hover:#fff;
  --auth-contrast-button:#1d1d1f;
  --auth-contrast-button-text:#fff;
  --auth-blue:#0071e3;
  --auth-blue-hover:#0077ed;
  --auth-blue-link:#0066cc;
  color:var(--auth-text);
}

.dark .login-shell{
  --auth-page-glow:rgba(0,113,227,.09);
  --auth-card:#050608;
  --auth-card-border:rgba(255,255,255,.075);
  --auth-card-shadow:0 32px 80px rgba(0,0,0,.30);
  --auth-form:#08090c;
  --auth-form-image-overlay:linear-gradient(90deg,rgba(5,6,8,.86) 0%,rgba(5,6,8,.72) 40%,rgba(5,6,8,.82) 100%);
  --auth-form-image-opacity:.58;
  --auth-form-image-filter:blur(54px) saturate(118%) brightness(.72);
  --auth-form-overlay:radial-gradient(420px 260px at 82% 12%,rgba(69,156,255,.12),transparent 68%),linear-gradient(180deg,rgba(7,8,11,.22),rgba(7,8,11,.58));
  --auth-panel:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.042));
  --auth-panel-2:rgba(255,255,255,.055);
  --auth-line:rgba(255,255,255,.12);
  --auth-line-soft:rgba(255,255,255,.10);
  --auth-text:#f5f5f7;
  --auth-secondary:rgba(245,245,247,.66);
  --auth-tertiary:rgba(245,245,247,.50);
  --auth-field:rgba(255,255,255,.055);
  --auth-field-focus:rgba(255,255,255,.075);
  --auth-feature-bg:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.038));
  --auth-feature-icon:rgba(255,255,255,.055);
  --auth-secondary-button:rgba(255,255,255,.055);
  --auth-secondary-button-hover:rgba(255,255,255,.085);
  --auth-contrast-button:#f5f5f7;
  --auth-contrast-button-text:#1d1d1f;
  --auth-blue-link:#2997ff;
}

.login-shell::before{
  background:radial-gradient(ellipse at center,var(--auth-page-glow) 0%,rgba(0,113,227,.025) 38%,transparent 72%)!important;
}

.login-card{
  border-color:var(--auth-card-border)!important;
  background:var(--auth-card)!important;
  box-shadow:var(--auth-card-shadow)!important;
}

.login-form,
.dark .login-form{
  color:var(--auth-text)!important;
  background:var(--auth-form)!important;
}
.login-form::before{
  background:var(--auth-form-image-overlay),url(../../../../../../img/fon.jpg) center / cover no-repeat!important;
  opacity:var(--auth-form-image-opacity)!important;
  filter:var(--auth-form-image-filter)!important;
}
.login-form::after{background:var(--auth-form-overlay)!important;}

.login-form-inner{
  border-color:var(--auth-line)!important;
  background:var(--auth-panel)!important;
  color:var(--auth-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 22px 60px rgba(0,0,0,.10)!important;
}
.dark .login-form-inner{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 70px rgba(0,0,0,.20)!important;}

#loginTitle,
.login-form h1,
.login-form h2,
.login-form h3{color:var(--auth-text)!important;}
#loginSubtitle{color:var(--auth-secondary)!important;}
/* Text colors must never override interactive controls. The previous broad
   .font-semibold selector also recolored button labels and produced black-on-black
   buttons in the light theme. Scope typography to non-interactive copy only. */
.login-form :is(div,p,span,label).text-sm.font-semibold,
.login-form :is(div,p,span,label).font-semibold:not(.text-white):not(.text-rose-800):not(.text-rose-200):not(.text-emerald-900):not(.text-emerald-200):not(.text-amber-900):not(.text-amber-100){color:var(--auth-text)!important;}
.login-form :is(div,p,span,label).text-xs:not(.text-white):not(.text-rose-800):not(.text-rose-200):not(.text-emerald-900):not(.text-emerald-100):not(.text-amber-900):not(.text-amber-800):not(.text-amber-100):not(.text-amber-200):not(.text-sky-600):not(.text-sky-700):not(.text-sky-300):not(.text-sky-400):not(.text-blue-600){color:var(--auth-tertiary)!important;}

/* Legal/disclaimer copy: explicit contrast in both themes. */
#loginLegalText,
#regStepConfirm > p.text-xs{color:var(--auth-secondary)!important;}
#loginLegalText a,
#regStepConfirm > p.text-xs a{color:var(--auth-blue-link)!important;}

.login-form input[type="text"],
.login-form input[type="tel"],
.login-form input[type="password"],
.login-form input[type="email"],
.login-form input[type="number"],
.login-form select,
.login-form textarea{
  border-color:var(--auth-line)!important;
  background:var(--auth-field)!important;
  color:var(--auth-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  color-scheme:light;
}
.dark .login-form input[type="text"],
.dark .login-form input[type="tel"],
.dark .login-form input[type="password"],
.dark .login-form input[type="email"],
.dark .login-form input[type="number"],
.dark .login-form select,
.dark .login-form textarea{color-scheme:dark;}
.login-form input::placeholder,
.login-form textarea::placeholder{color:var(--auth-tertiary)!important;opacity:1;}
.login-form input:focus,
.login-form select:focus,
.login-form textarea:focus{
  border-color:rgba(0,113,227,.58)!important;
  background:var(--auth-field-focus)!important;
  box-shadow:0 0 0 4px rgba(0,113,227,.12)!important;
}
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--auth-text)!important;
  caret-color:var(--auth-text)!important;
  -webkit-box-shadow:0 0 0 1000px var(--auth-field) inset!important;
  transition:background-color 9999s ease-out 0s;
}

/* Neutral cards used by login 2FA, registration and recovery steps. */
#twoFactorBlock > div,
#recoveryCodeBlock,
#recoveryPhraseBlock,
#recoveryPasswordBlock,
#regStepConfirm > div:first-child,
#regStepCode > div:first-child,
#iCallBox > div.rounded-2xl,
#iCallBox > div.mt-3.rounded-2xl,
#recoveryCaptchaBlock{
  border-color:var(--auth-line)!important;
  background:var(--auth-panel-2)!important;
  color:var(--auth-text)!important;
}

#twoFactorMethods button,
#btnBackToPhone,
#btnBackToConfirm,
#btnResendCode,
#regBtn,
#recoverBtn,
.login-form a.inline-flex,
#recoveryCallBtn,
#recoveryVerifyBtn,
#recoveryVerifyPhraseBtn,
#btnCodeContinue,
#btnICallCheck{
  border-color:var(--auth-line)!important;
}

#twoFactorMethods button,
#btnBackToPhone,
#btnBackToConfirm,
#btnResendCode,
#regBtn,
#recoverBtn,
.login-form a.inline-flex{
  background:var(--auth-secondary-button)!important;
  color:var(--auth-text)!important;
}
#twoFactorMethods button:hover,
#btnBackToPhone:hover,
#btnBackToConfirm:hover,
#btnResendCode:hover,
#regBtn:hover,
#recoverBtn:hover,
.login-form a.inline-flex:hover{background:var(--auth-secondary-button-hover)!important;}

/* Keep primary actions blue in both themes. */
#loginSubmitBtn,
#regContinue,
#recoverySubmitBtn,
#recoveryChangePwdBtn,
#recoveryVerifyBtn,
#recoveryVerifyPhraseBtn,
#recoveryCallBtn,
#btnCodeContinue,
#btnICallCheck{
  background:var(--auth-blue)!important;
  color:#fff!important;
  border-color:transparent!important;
}
#loginSubmitBtn:hover,
#regContinue:hover,
#recoverySubmitBtn:hover,
#recoveryChangePwdBtn:hover,
#recoveryVerifyBtn:hover,
#recoveryVerifyPhraseBtn:hover,
#recoveryCallBtn:hover,
#btnCodeContinue:hover,
#btnICallCheck:hover{background:var(--auth-blue-hover)!important;}

/* Registration actions that intentionally use non-blue system colors. */
#btnICall{
  background:#34c759!important;
  color:#fff!important;
  border-color:transparent!important;
}
#btnICall:hover{background:#30b653!important;}
#btnCallMe{
  background:var(--auth-contrast-button)!important;
  color:var(--auth-contrast-button-text)!important;
  border-color:transparent!important;
}
#btnCallMe:hover{filter:brightness(.96);}
#btnForeignContinue,
#regCreateAccountBtn{
  background:var(--auth-blue)!important;
  color:#fff!important;
  border-color:transparent!important;
}
#btnForeignContinue:hover,
#regCreateAccountBtn:hover{background:var(--auth-blue-hover)!important;}

/* Any explicitly white-labelled action must stay readable. */
.login-form button.text-white,
.login-form a.text-white{color:#fff!important;}
.dark .login-form button.dark\:text-slate-900,
.dark .login-form button.dark\:text-black{color:#1d1d1f!important;}

.login-form a.text-blue-600,
.login-form a.text-sky-600,
.login-form button.text-sky-600,
.login-form button.text-sky-700{color:var(--auth-blue-link)!important;}

/* Captcha/media surfaces. */
#captchaImg,
#resendCaptchaImg,
#recoveryCaptchaImg{
  border-color:var(--auth-line)!important;
  background:#fff!important;
}

/* Registration gender pills. */
#regStepData label:has(input[type="radio"]){
  border-color:var(--auth-line)!important;
  background:var(--auth-secondary-button)!important;
  color:var(--auth-text)!important;
}
#regStepData label:has(input[type="radio"]):hover{background:var(--auth-secondary-button-hover)!important;}

/* Semantic messages keep their own meaning in both themes. */
#regError,#recoveryError,#loginError{color:#b42318!important;}
#regOk,#recoveryCallInfo{color:#067647!important;}
.dark #regError,.dark #recoveryError,.dark #loginError{color:#fecaca!important;}
.dark #regOk,.dark #recoveryCallInfo{color:#d1fae5!important;}
#resendCaptchaBox{color:#92400e!important;}
.dark #resendCaptchaBox{color:#fde68a!important;}

/* The feature strip belongs to the form surface, so it also follows theme. */
.login-feature-strip{
  border-color:var(--auth-line-soft)!important;
  background:var(--auth-feature-bg)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.login-feature-item{color:var(--auth-secondary)!important;}
.login-feature-item + .login-feature-item::before{background:var(--auth-line-soft)!important;}
.login-feature-icon{
  color:var(--auth-blue-link)!important;
  border-color:var(--auth-line-soft)!important;
  background:var(--auth-feature-icon)!important;
}
.login-feature-title{color:var(--auth-secondary)!important;}
.login-handwritten{color:var(--auth-blue-link)!important;opacity:.76;}

/* Promo side intentionally remains photographic/dark in either site theme. */
.login-promo,
.dark .login-promo{background:#090b0f!important;}
.login-promo .login-feature-title,
.login-promo-mobile-overlay .login-feature-title{color:#f8fafc!important;}
.login-promo-mobile-overlay small{color:rgba(255,255,255,.62)!important;}

/* Mobile: don't force the old dark card/form colors. */
@media (max-width:767px){
  .login-card{background:var(--auth-card)!important;}
  .login-form{background:var(--auth-form)!important;}
  .login-form-inner{background:var(--auth-panel)!important;}
}

@media (prefers-reduced-transparency:reduce){
  .login-form-inner,.login-feature-strip{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}