/* ============================================================
   KOLOPLUS AUTH — canonical cleanup v1
   Scope: login / register / forgot / reset only
   ============================================================ */

.kp-auth-page {
  --kp-auth-bg-1: var(--k-surface-1, #1a1714);
  --kp-auth-bg-2: var(--k-surface-2, #241f1b);
  --kp-auth-card-bg: var(--k-bg-card, #2a2420);
  --kp-auth-card-bg-soft: color-mix(in srgb, var(--kp-auth-card-bg) 92%, transparent);
  --kp-auth-elevated: var(--k-bg-elevated, #332c27);
  --kp-auth-input-bg: var(--k-bg-canvas, #1e1a16);
  --kp-auth-border: var(--kp-border-default, rgba(255,235,210,.12));
  --kp-auth-border-strong: var(--kp-border-strong, rgba(255,235,210,.2));
  --kp-auth-text: var(--kp-text-primary, #f5ece3);
  --kp-auth-text-2: var(--kp-text-secondary, #c4b5a4);
  --kp-auth-text-3: var(--kp-text-tertiary, #8a7d70);
  --kp-auth-brand: var(--k-primary, var(--kp-accent-current, var(--kp-brand, #c87a52)));
  --kp-auth-brand-soft: color-mix(in srgb, var(--kp-auth-brand) 18%, transparent);
  --kp-auth-success: var(--kp-success, #7d9a78);
  --kp-auth-success-soft: color-mix(in srgb, var(--kp-auth-success) 16%, transparent);
  --kp-auth-warning: var(--kp-warning, #c4a97a);
  --kp-auth-warning-soft: color-mix(in srgb, var(--kp-auth-warning) 16%, transparent);
  --kp-auth-error: var(--kp-error, #b06b5a);
  --kp-auth-error-soft: color-mix(in srgb, var(--kp-auth-error) 16%, transparent);
  position: relative;
  min-height: calc(100vh - 32px);
  padding: clamp(18px, 4vw, 36px) clamp(14px, 3vw, 24px) max(28px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--kp-auth-brand) 14%, transparent) 0, transparent 36%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--kp-auth-success) 10%, transparent) 0, transparent 34%),
    linear-gradient(160deg, var(--kp-auth-bg-2) 0%, var(--kp-auth-bg-1) 100%);
}

.kp-auth-page::before,
.kp-auth-page::after {
  content: '';
  position: absolute;
  inset: auto;
  border-radius: 999px;
  filter: blur(12px);
  pointer-events: none;
  opacity: .7;
}
.kp-auth-page::before { width: 220px; height: 220px; top: -72px; right: -48px; background: color-mix(in srgb, var(--kp-auth-brand) 12%, transparent); }
.kp-auth-page::after { width: 180px; height: 180px; bottom: -58px; left: -34px; background: color-mix(in srgb, var(--kp-auth-success) 10%, transparent); }

[data-theme="light"] .kp-auth-page {
  --kp-auth-bg-1: var(--k-surface-1, #f5efe8);
  --kp-auth-bg-2: var(--k-surface-2, #f0e6db);
  --kp-auth-card-bg: var(--k-bg-card, rgba(255,255,255,.88));
  --kp-auth-card-bg-soft: rgba(255,255,255,.82);
  --kp-auth-elevated: rgba(255,255,255,.96);
  --kp-auth-input-bg: rgba(255,255,255,.94);
  --kp-auth-border: rgba(120, 88, 62, .14);
  --kp-auth-border-strong: rgba(120, 88, 62, .22);
  --kp-auth-text: #2b2018;
  --kp-auth-text-2: #6d5848;
  --kp-auth-text-3: #8c7768;
}

.kp-auth-shell {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 520px);
  gap: clamp(18px, 4vw, 40px);
  align-items: stretch;
}
.kp-auth-shell--compact,
.kp-auth-shell--flow-refresh,
.kp-auth-shell--register-refresh { max-width: 1040px; }

.kp-auth-panel,
.kp-auth-card,
.kp-auth-aside { min-width: 0; }

.kp-auth-aside,
.kp-auth-card {
  border: 1px solid var(--kp-auth-border);
  border-radius: 26px;
  background: var(--kp-auth-card-bg);
  box-shadow: 0 18px 48px rgba(0,0,0,.14);
  backdrop-filter: blur(12px);
}
[data-theme="light"] .kp-auth-aside,
[data-theme="light"] .kp-auth-card { box-shadow: 0 18px 42px rgba(90, 62, 40, .08); }

.kp-auth-aside {
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--kp-auth-brand) 7%, transparent), transparent 60%),
    var(--kp-auth-card-bg-soft);
}

.kp-auth-brandmark {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--kp-auth-brand) 32%, var(--kp-auth-border));
  background: color-mix(in srgb, var(--kp-auth-brand) 12%, transparent);
  color: var(--kp-auth-text);
  font: 800 1rem/1 var(--kp-font-display, 'Unbounded', sans-serif);
}

.kp-auth-eyebrow {
  color: var(--kp-auth-text-3);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
}
.kp-auth-display {
  margin: 0;
  color: var(--kp-auth-text);
  font: 700 clamp(1.7rem, 3vw, 2.35rem)/1.08 var(--kp-font-display, 'Unbounded', sans-serif);
}
.kp-auth-lead {
  margin: 0;
  color: var(--kp-auth-text-2);
  font-size: 1rem;
  line-height: 1.55;
}

.kp-auth-helper-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
}
.kp-auth-helper-card {
  min-width: 0;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid var(--kp-auth-border);
  background: color-mix(in srgb, var(--kp-auth-card-bg) 85%, transparent);
  color: var(--kp-auth-text-2);
}

.kp-auth-panel { display: flex; min-width: 0; }
.kp-auth-card {
  width: 100%;
  min-width: 0;
  padding: clamp(20px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kp-auth-card__topline {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kp-auth-brand), color-mix(in srgb, var(--kp-auth-brand) 22%, transparent));
}
.kp-auth-card__header { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.kp-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.kp-auth-tab {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--kp-auth-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--kp-auth-input-bg) 85%, transparent);
  color: var(--kp-auth-text-2);
  font: 600 .95rem/1.2 var(--kp-font-body, 'DM Sans', sans-serif);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.kp-auth-tab.is-active {
  border-color: color-mix(in srgb, var(--kp-auth-brand) 50%, var(--kp-auth-border));
  background: color-mix(in srgb, var(--kp-auth-brand) 14%, transparent);
  color: var(--kp-auth-text);
}

.kp-auth-alert {
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid var(--kp-auth-border);
  color: var(--kp-auth-text-2);
  background: color-mix(in srgb, var(--kp-auth-card-bg) 86%, transparent);
}
.kp-auth-alert--warning { border-color: color-mix(in srgb, var(--kp-auth-warning) 36%, var(--kp-auth-border)); background: var(--kp-auth-warning-soft); }
.kp-auth-alert--success { border-color: color-mix(in srgb, var(--kp-auth-success) 36%, var(--kp-auth-border)); background: var(--kp-auth-success-soft); }
.kp-auth-alert--error { border-color: color-mix(in srgb, var(--kp-auth-error) 38%, var(--kp-auth-border)); background: var(--kp-auth-error-soft); }

.kp-auth-oauth--stacked { display: flex; flex-direction: column; gap: 12px; }
.kp-auth-oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--kp-auth-border);
  background: var(--kp-auth-elevated);
  color: var(--kp-auth-text);
  text-decoration: none;
  font-weight: 700;
}
.kp-auth-login-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--kp-auth-text-3);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.kp-auth-login-or::before,
.kp-auth-login-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--kp-auth-border); }

.kp-auth-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kp-auth-step { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kp-auth-grid,
.kp-auth-grid--2,
.kp-auth-actions { display: grid; gap: 14px; }
.kp-auth-grid--2,
.kp-auth-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kp-auth-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kp-auth-label,
.kp-auth-label-row { color: var(--kp-auth-text); font-weight: 700; }
.kp-auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kp-auth-inline-link { color: var(--kp-auth-brand); text-decoration: none; font-size: .92rem; }
.kp-auth-help { color: var(--kp-auth-text-3); font-size: .88rem; line-height: 1.45; }

.kp-auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.kp-auth-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .75;
  pointer-events: none;
}
.kp-auth-input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid var(--kp-auth-border);
  background: var(--kp-auth-input-bg);
  color: var(--kp-auth-text);
  box-sizing: border-box;
}
.kp-auth-input--icon { padding-left: 44px; }
.kp-auth-input--with-toggle { padding-right: 48px; }
.kp-auth-input::placeholder { color: var(--kp-auth-text-3); }
.kp-auth-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--kp-auth-brand) 42%, var(--kp-auth-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-auth-brand) 16%, transparent);
}
.kp-auth-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--kp-auth-text-2);
}

.kp-auth-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--kp-auth-text-2);
  font-size: .94rem;
  line-height: 1.45;
}
.kp-auth-check input { margin-top: 3px; }

.kp-auth-strength {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.kp-auth-strength__bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kp-auth-text-3) 24%, transparent);
}
.kp-auth-progress-rail {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kp-auth-text-3) 16%, transparent);
}
.kp-auth-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--kp-auth-brand), color-mix(in srgb, var(--kp-auth-brand) 55%, white));
}
.kp-auth-progress-caption { color: var(--kp-auth-text-3); font-size: .85rem; }

.kp-auth-submit,
.kp-auth-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 800;
  font-size: .96rem;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.kp-auth-submit {
  border: 1px solid color-mix(in srgb, var(--kp-auth-brand) 48%, var(--kp-auth-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--kp-auth-brand) 90%, white 10%), var(--kp-auth-brand));
  color: #fff;
}
.kp-auth-secondary {
  border: 1px solid var(--kp-auth-border);
  background: color-mix(in srgb, var(--kp-auth-input-bg) 86%, transparent);
  color: var(--kp-auth-text);
}
.kp-auth-submit:hover,
.kp-auth-secondary:hover,
.kp-auth-tab:hover,
.kp-auth-oauth-btn:hover { transform: translateY(-1px); }
.kp-auth-submit__spinner { display: none; }
.kp-auth-footer-note { color: var(--kp-auth-text-3); font-size: .9rem; text-align: center; }

.kp-auth-page .cf-turnstile,
.kp-auth-page .captcha,
.kp-auth-page [data-captcha] { width: 100%; max-width: 100%; overflow-x: auto; }

@media (max-width: 960px) {
  .kp-auth-shell,
  .kp-auth-shell--compact,
  .kp-auth-shell--flow-refresh,
  .kp-auth-shell--register-refresh {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
  }
  .kp-auth-aside { order: 2; }
  .kp-auth-panel { order: 1; }
}

@media (max-width: 720px) {
  .kp-auth-page { min-height: auto; padding-inline: 12px; }
  .kp-auth-card,
  .kp-auth-aside { border-radius: 22px; }
  .kp-auth-card { padding: 18px 16px; }
  .kp-auth-aside { padding: 18px 16px; gap: 12px; }
  .kp-auth-display { font-size: 1.55rem; }
  .kp-auth-lead { font-size: .95rem; }
  .kp-auth-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-auth-tab { padding: 11px 10px; font-size: .88rem; }
  .kp-auth-grid--2,
  .kp-auth-actions { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .kp-auth-page { padding-inline: 10px; }
  .kp-auth-card,
  .kp-auth-aside { border-radius: 18px; }
  .kp-auth-brandmark { width: 46px; height: 46px; border-radius: 14px; }
  .kp-auth-input,
  .kp-auth-submit,
  .kp-auth-secondary,
  .kp-auth-oauth-btn { min-height: 48px; }
  .kp-auth-tab { font-size: .84rem; }
}