/* Shared authentication theme. Brand colors are owned by brand-tokens.css. */
body.kk-auth {
  --auth-background: var(--sp-night);
  --auth-surface: var(--sp-panel);
  --auth-text: var(--sp-white);
  --auth-muted: var(--sp-muted-on-dark);
  --auth-border: var(--sp-line-on-dark);
  background: var(--auth-background);
  color: var(--auth-text);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--sp-body);
}
body.kk-auth .auth-story,
body.kk-auth .auth-main { min-width: 0; background: var(--auth-background); }
body.kk-auth .auth-story { border-color: var(--auth-border); padding: clamp(28px, 4vw, 64px); justify-content: flex-start; }
body.kk-auth .auth-story > div { padding: 60px 0; }
body.kk-auth .auth-story > small { margin-top: auto; }
body.kk-auth .auth-story > a { display: block; width: 300px; max-width: 100%; }
body.kk-auth .auth-story img { display: block; width: 100% !important; max-width: 100%; height: auto; mix-blend-mode: lighten; }
body.kk-auth .auth-story h1,
body.kk-auth .auth-form h2 { font-family: var(--sp-heading); overflow-wrap: anywhere; }
body.kk-auth .auth-story h1 em,
body.kk-auth .eyebrow,
body.kk-auth .auth-features svg { color: var(--sp-accent); }
body.kk-auth p,
body.kk-auth small,
body.kk-auth .check,
body.kk-auth .auth-features > span { color: var(--auth-muted); }
body.kk-auth .auth-main { padding: 100px clamp(24px, 4vw, 64px) 48px; }
body.kk-auth .auth-form { width: 100%; max-width: 500px; }
body.kk-auth .auth-form > p { font-size: 14px; }
body.kk-auth .auth-form label { font-size: 14px; }
body.kk-auth .auth-form a { color: var(--sp-accent); text-decoration: underline; text-underline-offset: 4px; }
body.kk-auth .auth-form a:hover { color: var(--auth-text); }
body.kk-auth input:not([type=checkbox]) {
  background: var(--auth-surface) !important;
  color: var(--auth-text) !important;
  -webkit-text-fill-color: var(--auth-text) !important;
  border-color: var(--auth-border);
  caret-color: var(--sp-accent);
  font-size: 16px;
  min-height: 48px;
}
body.kk-auth input::placeholder { color: var(--auth-muted); opacity: 1; -webkit-text-fill-color: var(--auth-muted); }
body.kk-auth input:not([type=checkbox]):focus { border-color: var(--sp-accent); }
body.kk-auth input:is(:autofill, :-webkit-autofill) { box-shadow: inset 0 0 0 1000px var(--auth-surface); }
body.kk-auth input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--sp-action); }
body.kk-auth .primary { min-height: 52px; background: var(--sp-action); border-color: var(--sp-action); color: var(--auth-text) !important; }
body.kk-auth .primary:hover { background: var(--sp-action-hover); border-color: var(--sp-accent); }
body.kk-auth .primary:active { transform: translateY(1px); }
body.kk-auth a:focus-visible,
body.kk-auth button:focus-visible,
body.kk-auth input:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 3px; }
body.kk-auth .password-wrap button,
body.kk-auth .register-control button { color: var(--sp-accent); min-width: 64px; min-height: 44px; right: 4px; top: 2px; bottom: 2px; cursor: pointer; font-size: 12px; }
body.kk-auth .password-wrap button:hover,
body.kk-auth .register-control button:hover { color: var(--auth-text); background: var(--sp-action); border-radius: 4px; }
body.kk-auth .password-wrap input,
body.kk-auth .register-control input[type=password],
body.kk-auth .register-control input[data-password-visible] { padding-right: 78px; }
body.kk-auth .notice { font-size: 14px; overflow-wrap: anywhere; }
body.kk-auth .notice[hidden] { display: none !important; }
body.kk-auth .auth-links { font-size: 14px; gap: 8px 20px; }
body.kk-auth .auth-links a { display: inline-flex; align-items: center; min-height: 44px; }
body.kk-auth .auth-foot { border-color: var(--auth-border); font-size: 12px; }
body.kk-auth .back-link,
body.kk-auth .auth-lang { position: absolute; top: 28px; min-height: 44px; display: inline-flex; align-items: center; color: var(--auth-muted); font-size: 13px; }
body.kk-auth .back-link { left: clamp(24px, 4vw, 64px); right: auto; }
body.kk-auth .auth-lang { left: auto; right: clamp(24px, 4vw, 64px); }
.registration-page .register-control { position: relative; }
.registration-page .register-help { display: block; min-height: 18px; margin: 6px 0 16px; font-size: 12px; line-height: 1.5; }
.registration-page #registration-form > label:not(.check) { margin: 0 0 8px; }
.registration-page .check { align-items: flex-start; line-height: 1.6; }
body.kk-auth [aria-invalid=true] { border-color: #ff9caa !important; }
.register-progress { min-height: 24px; font-size: 13px; }
@media (max-width: 900px) {
  body.kk-auth { display: block; }
  body.kk-auth .auth-story { min-height: 0; padding: 24px; border-right: 0; border-bottom: 1px solid var(--auth-border); }
  body.kk-auth .auth-story > a { width: 240px; margin: 0 auto; }
  body.kk-auth .auth-story > div,
  body.kk-auth .auth-story > small { display: none; }
  body.kk-auth .auth-main { padding: 92px 24px 32px; }
  body.kk-auth .auth-form h2 { font-size: clamp(24px, 5vw, 30px); }
  body.kk-auth .back-link { left: 24px; top: 20px; }
  body.kk-auth .auth-lang { right: 24px; top: 20px; }
}
@media (max-width: 360px) {
  body.kk-auth .auth-story { padding: 20px; }
  body.kk-auth .auth-main { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) { body.kk-auth *, body.kk-auth *::before, body.kk-auth *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { body.kk-auth .auth-story img { mix-blend-mode: normal; } body.kk-auth .primary { border: 1px solid ButtonText; } }



/* Mobile-first account entry: shared card and route navigation. */
body.kk-auth { --auth-card: var(--sp-ink); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.kk-auth .auth-story { position: relative; padding: 48px clamp(28px, 5vw, 80px); }
body.kk-auth .auth-story > div { padding: 64px 0 40px; }
body.kk-auth .auth-story h1 { font-size: clamp(36px, 3.7vw, 60px); letter-spacing: -2px; }
body.kk-auth .auth-story p { font-size: 16px; line-height: 1.8; }
body.kk-auth .auth-story > div::after { content: ''; display: block; width: 72px; height: 4px; border-radius: 2px; margin-top: 32px; background: var(--sp-accent); }
body.kk-auth .auth-features { border-top: 1px solid var(--auth-border); padding-top: 24px; }
body.kk-auth .auth-features > span { font-size: 14px; }
body.kk-auth .auth-main { justify-content: flex-start; padding: 116px clamp(24px, 3.5vw, 56px) 48px; }
body.kk-auth .auth-form { margin: 0 auto; padding: clamp(24px, 2.5vw, 36px); background: var(--auth-card); border: 1px solid var(--auth-border); border-radius: 20px; box-shadow: 0 20px 64px #00000020; }
body.kk-auth .auth-form > .eyebrow { font-size: 10px; letter-spacing: 1.4px; margin-bottom: 12px; }
body.kk-auth .auth-form h2 { font-size: clamp(27px, 2.4vw, 34px); letter-spacing: -1px; line-height: 1.25; }
body.kk-auth .auth-form > p { line-height: 1.7; margin-bottom: 28px; }
body.kk-auth .auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; margin-bottom: 30px; border: 1px solid var(--auth-border); border-radius: 12px; background: var(--auth-background); }
body.kk-auth .auth-switch a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 12px; color: var(--auth-muted); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; border-radius: 8px; }
body.kk-auth .auth-switch a[aria-current=page] { background: var(--auth-surface); border-color: var(--auth-border); color: var(--sp-accent); box-shadow: 0 2px 6px #00000020; }
body.kk-auth .auth-switch a:hover { color: var(--auth-text); border-color: var(--sp-accent); }
body.kk-auth input:not([type=checkbox]) { min-height: 54px; border-radius: 10px; padding: 13px 14px; scroll-margin-block: 24px; }
body.kk-auth input:not([type=checkbox]):focus { box-shadow: 0 0 0 3px #85dfd018; }
body.kk-auth .password-wrap input,
body.kk-auth .register-control input[type=password],
body.kk-auth .register-control input[data-password-visible] { padding-right: 80px; }
body.kk-auth .password-wrap button,
body.kk-auth .register-control button { top: 5px; bottom: 5px; right: 5px; border-radius: 7px; }
body.kk-auth .check { min-height: 44px; align-items: flex-start; font-size: 13px; line-height: 1.7; margin: 8px 0 18px; }
body.kk-auth .check input { margin-top: 2px; }
body.kk-auth .primary { min-height: 54px; border-radius: 10px; font-size: 15px; box-shadow: none; }
body.kk-auth .auth-links { margin: 16px 0; padding-top: 8px; }
body.kk-auth .auth-foot { line-height: 1.6; }
.registration-page .register-help { margin-bottom: 14px; }
.registration-page .register-help:empty { min-height: 0; margin: 0 0 18px; }
.registration-page .register-progress { margin-bottom: 0; }
@media (max-width: 900px) {
  body.kk-auth { display: block; }
  body.kk-auth .auth-story { padding: 22px 24px 18px; border: 0; }
  body.kk-auth .auth-story > a { width: 204px; }
  body.kk-auth .auth-main { padding: 62px 24px max(28px, env(safe-area-inset-bottom)); }
  body.kk-auth .auth-form { max-width: 520px; padding: 28px; }
  body.kk-auth .back-link { left: max(24px, env(safe-area-inset-left)); top: 0; }
  body.kk-auth .auth-lang { right: max(24px, env(safe-area-inset-right)); top: 0; }
}
@media (max-width: 540px) {
  body.kk-auth .auth-story { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: 14px; }
  body.kk-auth .auth-story > a { width: 180px; }
  body.kk-auth .auth-main { padding: 58px max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  body.kk-auth .auth-form { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body.kk-auth .auth-switch { margin-bottom: 26px; }
  body.kk-auth .auth-form h2 { font-size: 28px; }
  body.kk-auth .auth-form > p { margin-bottom: 24px; }
  body.kk-auth .auth-form label { font-size: 14px; }
  body.kk-auth .back-link { left: 20px; font-size: 12px; }
  body.kk-auth .auth-lang { right: 20px; }
}
@media (forced-colors: active) { body.kk-auth .auth-switch a[aria-current=page] { border: 2px solid Highlight; } }
/* Keep reveal controls inside their fields at every viewport. */
body.kk-auth .register-control button { position: absolute; }

/* Cyber motion layer: decorative only, all forms remain server-owned. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: auth-page-out .16s ease both; }
::view-transition-new(root) { animation: auth-page-in .28s ease both; }
body.kk-auth { isolation: isolate; }
.auth-code-rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .16; pointer-events: none; }
body.kk-auth .auth-story,
body.kk-auth .auth-main { background: transparent; }
body.kk-auth .auth-story { background: linear-gradient(135deg, #0a2132dd, #0a213288); }
body.kk-auth .auth-visual { width: 100%; max-width: 460px; margin-top: 30px; }
body.kk-auth .auth-visual picture { display: block; }
body.kk-auth .auth-visual img { width: 100%; height: auto; border-radius: 12px; }
body.kk-auth .auth-motion-toggle { display: block; margin: 6px 0 0 auto; padding: 8px 12px; min-height: 44px; border: 1px solid var(--auth-border); border-radius: 8px; color: var(--auth-muted); font-size: 12px; cursor: pointer; }
body.kk-auth .auth-motion-toggle[hidden] { display: none; }
body.kk-auth .auth-motion-toggle:hover { color: var(--sp-accent); border-color: var(--sp-accent); }
body.kk-auth .auth-story > div { padding-top: 32px; }
body.kk-auth .auth-form { background: #102c40f5; animation: auth-card-in .55s cubic-bezier(.2,.7,.2,1) both; }
body.kk-auth .auth-form form > label,
body.kk-auth .auth-form .register-control,
body.kk-auth .auth-form form > .primary { animation: auth-field-in .45s ease both; }
body.kk-auth .auth-form form > :nth-child(2) { animation-delay: .06s; }
body.kk-auth .auth-form form > :nth-child(3) { animation-delay: .09s; }
body.kk-auth .auth-form form > :nth-child(4) { animation-delay: .12s; }
body.kk-auth .auth-form form > :nth-child(n+5) { animation-delay: .16s; }
body.kk-auth input:not([type=checkbox]) { transition: border-color .18s, box-shadow .18s, background-color .18s; }
body.kk-auth .auth-switch a,
body.kk-auth .primary { transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s; }
body.kk-auth .primary:hover { box-shadow: 0 0 24px #85dfd020; }
body.kk-auth .primary[aria-busy=true] { background-image: linear-gradient(110deg, transparent 30%, #85dfd030 50%, transparent 70%); background-size: 200% 100%; animation: auth-submit 1.5s linear infinite; }
body.auth-motion-paused *, body.auth-motion-paused *::before, body.auth-motion-paused *::after { animation: none !important; transition: none !important; }
body.auth-motion-paused .auth-code-rain { visibility: hidden; }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes auth-field-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes auth-submit { to { background-position: -200% 0; } }
@keyframes auth-page-out { to { opacity: 0; } }
@keyframes auth-page-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  body.kk-auth .auth-visual { max-width: 340px; margin: 12px auto 0; }
  body.kk-auth .auth-motion-toggle { margin: 0 auto; min-height: 44px; padding: 4px 12px; border-color: transparent; }
  .auth-code-rain { opacity: .1; }
}
@media (max-width: 540px) {
  body.kk-auth .auth-story > a { width: 150px; }
  body.kk-auth .auth-visual { max-width: 300px; margin-top: 8px; }
  body.kk-auth .auth-story { padding-bottom: 0; }
  body.kk-auth .auth-form { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  body.kk-auth *, body.kk-auth *::before, body.kk-auth *::after { animation: none !important; transition: none !important; }
  .auth-code-rain { display: none; }
}
@media (forced-colors: active) { .auth-code-rain { display: none; } }