/* Kinoportal redesign — Stage 7: authentication */
:root{
  --auth-bg:#050812;
  --auth-panel:rgba(14,20,35,.88);
  --auth-panel-solid:#0f1728;
  --auth-border:rgba(148,163,184,.18);
  --auth-text:#f8fafc;
  --auth-muted:#9aa9bd;
  --auth-primary:#7c3aed;
  --auth-blue:#2563eb;
  --auth-cyan:#22d3ee;
  --auth-danger:#fb7185;
  --auth-success:#4ade80;
  --auth-shadow:0 34px 90px rgba(0,0,0,.46);
}
html[data-theme="light"]{
  --auth-bg:#eef2ff;
  --auth-panel:rgba(255,255,255,.9);
  --auth-panel-solid:#fff;
  --auth-border:rgba(15,23,42,.11);
  --auth-text:#10182b;
  --auth-muted:#64748b;
  --auth-shadow:0 30px 70px rgba(67,56,202,.14);
}
body.kp-auth-body,
body:has(.login-main),
body:has(.register-main),
body:has(.kp-auth-page),
body:has(.verification-card){
  background:
    radial-gradient(circle at 12% 18%,rgba(124,58,237,.24),transparent 30%),
    radial-gradient(circle at 88% 22%,rgba(34,211,238,.16),transparent 29%),
    linear-gradient(145deg,var(--auth-bg),#090d19 62%,#050812);
  color:var(--auth-text);
}
html[data-theme="light"] body.kp-auth-body,
html[data-theme="light"] body:has(.login-main),
html[data-theme="light"] body:has(.register-main),
html[data-theme="light"] body:has(.kp-auth-page),
html[data-theme="light"] body:has(.verification-card){
  background:
    radial-gradient(circle at 12% 18%,rgba(124,58,237,.13),transparent 30%),
    radial-gradient(circle at 88% 22%,rgba(34,211,238,.12),transparent 29%),
    linear-gradient(145deg,#f7f8ff,#edf3ff);
}
.login-main,.register-main,.kp-auth-page,body.kp-auth-body main{
  position:relative;
  min-height:calc(100vh - 150px);
  padding:clamp(22px,5vw,72px) clamp(14px,3vw,32px);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.login-main::before,.register-main::before,.kp-auth-page::before,body.kp-auth-body main::before{
  content:"";
  position:absolute;
  width:520px;height:520px;
  right:-180px;top:-210px;
  border-radius:50%;
  background:conic-gradient(from 60deg,rgba(124,58,237,.28),rgba(34,211,238,.18),transparent 64%);
  filter:blur(18px);
  pointer-events:none;
}
.auth-layout,.kp-auth-shell{
  position:relative;
  z-index:1;
  width:min(1120px,100%);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.78fr);
  overflow:hidden;
  border:1px solid var(--auth-border);
  border-radius:32px;
  background:var(--auth-panel);
  box-shadow:var(--auth-shadow);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.auth-showcase,.kp-auth-hero{
  position:relative;
  min-height:610px;
  padding:clamp(34px,5vw,68px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(4,7,16,.12),rgba(4,7,16,.9)),
    radial-gradient(circle at 70% 18%,rgba(34,211,238,.34),transparent 27%),
    linear-gradient(135deg,#31116d 0%,#122957 45%,#07111f 100%);
}
.auth-showcase::before,.kp-auth-hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
.auth-showcase::after,.kp-auth-hero::after{
  content:"▶";
  position:absolute;
  top:62px;right:70px;z-index:-1;
  width:160px;height:160px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:44px;
  background:linear-gradient(145deg,rgba(124,58,237,.75),rgba(37,99,235,.72));
  color:rgba(255,255,255,.9);
  font-size:58px;
  box-shadow:0 26px 70px rgba(37,99,235,.35),inset 0 1px 0 rgba(255,255,255,.2);
  transform:rotate(-7deg);
}
.auth-showcase__badge,.kp-auth-badge{
  width:max-content;
  margin-bottom:22px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:#bff7ff;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.auth-showcase h2,.kp-auth-title{
  max-width:650px;
  margin:0 0 18px;
  color:#fff!important;
  font-size:clamp(2.5rem,5vw,5.2rem)!important;
  font-weight:900;
  line-height:.94!important;
  letter-spacing:-.055em!important;
}
.auth-showcase p,.kp-auth-subtitle{
  max-width:610px;
  margin:0;
  color:rgba(255,255,255,.74)!important;
  font-size:clamp(.98rem,1.4vw,1.12rem);
  line-height:1.72;
}
.auth-feature-list,.kp-auth-list{
  margin:28px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  list-style:none;
}
.auth-feature-list li,.kp-auth-list li{
  min-width:0;
  padding:13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
  font-size:.82rem;
  line-height:1.45;
}
.kp-auth-icon{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;margin-bottom:8px!important;border-radius:9px!important;background:linear-gradient(135deg,#7c3aed,#22d3ee)!important;color:#fff!important;font-size:.75rem!important;font-weight:900!important}
.login-container,.register-container,.kp-auth-panel,body.kp-auth-body .card,body.kp-auth-body .verification-card{
  width:auto;
  max-width:none;
  margin:0;
  padding:clamp(30px,5vw,62px);
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--auth-text);
}
.login-title,.register-title,.kp-auth-panel-title,body.kp-auth-body h1{
  margin:0 0 9px!important;
  color:var(--auth-text)!important;
  font-size:clamp(2rem,4vw,3.15rem)!important;
  font-weight:900!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  text-align:left!important;
}
.auth-form-intro,.kp-auth-panel-text,body.kp-auth-body .desc{
  margin:0 0 26px!important;
  color:var(--auth-muted)!important;
  line-height:1.62!important;
}
.login-form,.register-form,.kp-auth-form,body.kp-auth-body .form{display:grid;gap:17px}
.login-form .form-group,.register-form .form-group,.kp-auth-field,body.kp-auth-body .form-group{display:grid;gap:8px;margin:0}
.login-form label,.register-form label,.kp-auth-label,body.kp-auth-body label{
  color:var(--auth-text)!important;
  font-size:.8rem!important;
  font-weight:800!important;
  letter-spacing:.03em;
}
.login-form input,.register-form input,.kp-auth-input,body.kp-auth-body input[type="email"],body.kp-auth-body input[type="password"],body.kp-auth-body input[type="text"]{
  width:100%;
  min-height:54px;
  padding:0 16px!important;
  border:1px solid var(--auth-border)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.055)!important;
  color:var(--auth-text)!important;
  font:inherit;
  box-sizing:border-box;
  outline:none;
  box-shadow:none!important;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
html[data-theme="light"] .login-form input,html[data-theme="light"] .register-form input,html[data-theme="light"] .kp-auth-input,html[data-theme="light"] body.kp-auth-body input{background:rgba(248,250,252,.92)!important}
.login-form input:focus,.register-form input:focus,.kp-auth-input:focus,body.kp-auth-body input:focus{
  border-color:rgba(34,211,238,.72)!important;
  background:rgba(34,211,238,.055)!important;
  box-shadow:0 0 0 4px rgba(34,211,238,.1)!important;
}
.login-form input::placeholder,.register-form input::placeholder,.kp-auth-input::placeholder{color:#718198!important}
.form-hint,.kp-auth-hint,body.kp-auth-body .hint{color:var(--auth-muted)!important;font-size:.75rem!important;line-height:1.45}
.password-input-wrap{position:relative}.toggle-pass{right:9px!important;width:40px;height:40px;padding:0!important;border:1px solid var(--auth-border)!important;border-radius:12px!important;background:rgba(255,255,255,.06)!important;color:var(--auth-text)!important}
.login-button,.register-button,.kp-auth-submit,body.kp-auth-body .button:not(.secondary){
  width:100%;
  min-height:54px;
  padding:0 20px!important;
  display:inline-flex;align-items:center;justify-content:center;
  border:0!important;
  border-radius:15px!important;
  background:linear-gradient(115deg,var(--auth-primary),var(--auth-blue) 58%,#0786bd)!important;
  color:#fff!important;
  font:inherit;
  font-size:.95rem!important;
  font-weight:900!important;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(76,29,149,.28)!important;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.login-button:hover,.register-button:hover,.kp-auth-submit:hover,body.kp-auth-body .button:not(.secondary):hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 20px 42px rgba(37,99,235,.32)!important}
.forgot-password{margin:3px 0 0!important;text-align:center}.forgot-password a,.kp-auth-link--primary{color:#66def1!important;font-weight:800!important;text-decoration:none!important}.forgot-password a:hover,.kp-auth-link:hover{text-decoration:underline!important}
.auth-account-links{margin-top:22px;padding-top:20px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--auth-border);color:var(--auth-muted);font-size:.86rem}.auth-account-links a{color:var(--auth-text);font-weight:800;text-decoration:none}
.kp-auth-links,body.kp-auth-body .buttons{display:flex!important;justify-content:center!important;gap:10px!important;flex-wrap:wrap!important;margin-top:22px!important}.kp-auth-link,body.kp-auth-body .button.secondary{min-height:42px;padding:0 14px!important;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--auth-border)!important;border-radius:12px!important;background:rgba(255,255,255,.045)!important;color:var(--auth-text)!important;text-decoration:none!important;font-weight:800!important}
.alert,.kp-auth-error,body.kp-auth-body .status{padding:12px 14px!important;border:1px solid var(--auth-border)!important;border-radius:14px!important;background:rgba(255,255,255,.05)!important;color:var(--auth-text)!important;box-shadow:none!important}.alert.error,.kp-auth-error,body.kp-auth-body .status.err{border-color:rgba(251,113,133,.35)!important;background:rgba(251,113,133,.1)!important;color:#fecdd3!important}.alert.success,body.kp-auth-body .status.ok{border-color:rgba(74,222,128,.32)!important;background:rgba(74,222,128,.09)!important;color:#bbf7d0!important}
.honeypot{display:none!important}
@media(max-width:860px){
  .auth-layout,.kp-auth-shell{grid-template-columns:1fr;max-width:620px;border-radius:25px}
  .auth-showcase,.kp-auth-hero{min-height:270px;padding:32px;justify-content:flex-end}
  .auth-showcase::after,.kp-auth-hero::after{width:96px;height:96px;top:28px;right:32px;border-radius:28px;font-size:34px}
  .auth-showcase h2,.kp-auth-title{max-width:470px;font-size:clamp(2.15rem,10vw,3.45rem)!important}
  .auth-feature-list,.kp-auth-list{display:none}
  .login-container,.register-container,.kp-auth-panel,body.kp-auth-body .card,body.kp-auth-body .verification-card{padding:30px 24px 34px}
}
@media(max-width:520px){
  .login-main,.register-main,.kp-auth-page,body.kp-auth-body main{padding:12px}
  .auth-layout,.kp-auth-shell{border-radius:21px}
  .auth-showcase,.kp-auth-hero{min-height:215px;padding:24px}
  .auth-showcase::after,.kp-auth-hero::after{width:76px;height:76px;top:20px;right:22px;border-radius:22px;font-size:27px}
  .auth-showcase p,.kp-auth-subtitle{font-size:.88rem;line-height:1.55}
  .login-container,.register-container,.kp-auth-panel,body.kp-auth-body .card,body.kp-auth-body .verification-card{padding:25px 18px 28px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}

/* compatibility with the existing recovery pages */
.kp-auth-shell{display:block}
.kp-auth-card{width:100%;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(380px,.78fr)!important;gap:0!important;overflow:hidden;border:1px solid var(--auth-border);border-radius:32px;background:var(--auth-panel);box-shadow:var(--auth-shadow);backdrop-filter:blur(22px)}
.kp-auth-card>.kp-auth-hero,.kp-auth-card>.kp-auth-panel{border:0!important;border-radius:0!important;box-shadow:none!important}
body.kp-auth-body main>.card,body.kp-auth-body main>.verification-card{width:min(560px,100%)!important;min-height:auto!important;padding:clamp(28px,5vw,52px)!important;border:1px solid var(--auth-border)!important;border-radius:26px!important;background:var(--auth-panel)!important;box-shadow:var(--auth-shadow)!important;backdrop-filter:blur(22px)!important}
body.kp-auth-body main>.card .row{display:flex;gap:10px;flex-wrap:wrap}body.kp-auth-body main>.card .row>*{flex:1 1 180px}
@media(max-width:860px){.kp-auth-card{grid-template-columns:1fr!important;border-radius:25px}.kp-auth-card>.kp-auth-hero{min-height:270px!important}.kp-auth-card>.kp-auth-panel{min-height:auto!important}}
@media(max-width:520px){.kp-auth-card{border-radius:21px}.kp-auth-card>.kp-auth-hero{min-height:215px!important}}