.akf-auth-page .akf-app-main {
  min-height: auto;
  display: grid;
  place-items: center;
  padding: calc(var(--akf-header-height) + 24px) 16px 14px;
}

.akf-auth-wrap {
  width: min(100%, 520px);
}

.akf-auth-card {
  position: relative;
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid var(--akf-border);
  border-radius: var(--akf-radius-lg);
  color: var(--akf-text);
  background: color-mix(in srgb, var(--akf-surface) 96%, transparent);
  box-shadow: var(--akf-shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.akf-auth-home,
.akf-auth-actions a,
.akf-auth-register a {
  color: var(--akf-link);
}

.akf-auth-home {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--akf-border);
  border-radius: var(--akf-radius-sm);
  text-decoration: none;
  background: var(--akf-surface-soft);
}

.akf-auth-home svg,
.akf-auth-alert svg,
.akf-auth-input > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.akf-auth-card h1 {
  margin: 18px 0 0;
  color: var(--akf-text);
  font-size: clamp(1.25rem, 4vw, 1.7rem);
  line-height: 1.25;
  text-align: center;
}

.akf-auth-subtitle {
  margin: 8px 0 24px;
  color: var(--akf-muted);
  text-align: center;
}

.akf-auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid var(--akf-border);
  border-radius: var(--akf-radius-sm);
  background: var(--akf-surface-soft);
}

.akf-auth-alert.is-danger {
  border-color: color-mix(in srgb, var(--akf-danger) 55%, var(--akf-border));
  color: var(--akf-danger);
}

.akf-auth-alert.is-warning {
  border-color: color-mix(in srgb, var(--akf-warning) 55%, var(--akf-border));
  color: var(--akf-warning);
}

.akf-auth-field {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
  color: var(--akf-text);
  font-weight: 650;
}

.akf-auth-input {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--akf-border);
  border-radius: 12px;
  color: var(--akf-muted);
  background: var(--akf-input-bg);
}

.akf-auth-input:focus-within {
  border-color: var(--akf-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akf-focus) 20%, transparent);
}

.akf-auth-input input {
  min-width: 0;
  width: 100%;
  height: 48px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--akf-text);
  background: transparent;
}

.akf-auth-input input::placeholder {
  color: var(--akf-muted);
  opacity: .88;
}

.akf-auth-input input[aria-invalid="true"] {
  color: var(--akf-danger);
}

.akf-password-toggle {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--akf-border);
  border-radius: 10px;
  color: var(--akf-text);
  background: var(--akf-surface-soft);
  cursor: pointer;
}

.akf-password-toggle svg {
  width: 18px;
  height: 18px;
}

.akf-auth-robot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--akf-border);
  border-radius: 12px;
  color: var(--akf-text);
  background: var(--akf-surface-soft);
}

.akf-auth-robot input {
  width: 18px;
  height: 18px;
  accent-color: var(--akf-gold);
}

.akf-auth-hint {
  display: block;
  margin: 7px 0 18px;
  color: var(--akf-muted);
}

.akf-auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.akf-auth-actions a,
.akf-auth-register a {
  font-weight: 850;
}

.akf-auth-submit {
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(120deg, #0d5f9f 0%, #1687ce 52%, #0d6fb5 100%);
  box-shadow:
    0 14px 30px rgba(23, 119, 184, .22),
    0 1px 0 rgba(255, 255, 255, .22) inset;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.akf-auth-submit:hover,
.akf-auth-submit:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 18px 36px rgba(23, 119, 184, .3),
    0 1px 0 rgba(255, 255, 255, .28) inset;
}

.akf-auth-register {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--akf-border);
  color: var(--akf-muted);
  text-align: center;
}

.akf-auth-honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html[data-theme="akf-dark"] body.akf-auth-page.azkf-app-background {
  --azkf-bg-base: #030a13;
  --azkf-bg-end: #091624;
  --azkf-glow-primary: rgba(42, 151, 224, .28);
  --azkf-glow-secondary: rgba(25, 198, 218, .15);
  --azkf-glow-neutral: rgba(216, 183, 106, .09);
  --azkf-glass-border: rgba(157, 211, 246, .17);
  --akf-surface: rgba(8, 22, 37, .88);
  --akf-surface-soft: rgba(133, 200, 244, .065);
  --akf-surface-hover: rgba(133, 200, 244, .12);
  --akf-border: rgba(157, 211, 246, .17);
  --akf-input-bg: rgba(2, 11, 22, .7);
  --akf-shadow: 0 34px 90px rgba(0, 0, 0, .52);
  background-image:
    radial-gradient(900px 580px at -7% -8%, rgba(41, 154, 226, .31), transparent 66%),
    radial-gradient(780px 500px at 106% 14%, rgba(21, 188, 213, .16), transparent 68%),
    radial-gradient(620px 380px at 48% 108%, rgba(216, 183, 106, .08), transparent 74%),
    linear-gradient(155deg, #030913 0%, #081522 52%, #050d17 100%) !important;
}

html[data-theme="akf-dark"] body.akf-auth-page.azkf-app-background .akf-app-shell::before {
  background:
    radial-gradient(circle at 8% 24%, rgba(126, 205, 255, .27) 0 1px, transparent 2px),
    radial-gradient(circle at 21% 71%, rgba(126, 205, 255, .2) 0 1px, transparent 2px),
    radial-gradient(circle at 47% 31%, rgba(126, 205, 255, .22) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 78%, rgba(126, 205, 255, .19) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 23%, rgba(126, 205, 255, .24) 0 1px, transparent 2px),
    radial-gradient(540px 330px at 16% 14%, rgba(34, 145, 219, .12), transparent 72%),
    radial-gradient(480px 320px at 84% 66%, rgba(16, 185, 211, .08), transparent 74%);
  opacity: .82;
}

html[data-theme="akf-dark"] body.akf-auth-page .akf-app-topbar {
  border-bottom-color: rgba(157, 211, 246, .13);
  background: linear-gradient(180deg, rgba(4, 12, 22, .91), rgba(7, 18, 31, .82));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .28);
}

html[data-theme="akf-dark"] body.akf-auth-page .akf-app-brand__mark--wordmark {
  border-color: rgba(216, 183, 106, .36);
  background:
    radial-gradient(circle at 12% 50%, rgba(41, 154, 226, .16), transparent 38%),
    linear-gradient(135deg, #071a31, #0a2746);
  box-shadow:
    0 0 0 4px rgba(216, 183, 106, .06),
    0 12px 32px rgba(0, 0, 0, .3);
}

html[data-theme="akf-dark"] .akf-auth-card {
  overflow: hidden;
  border-color: rgba(157, 211, 246, .2);
  background:
    linear-gradient(145deg, rgba(15, 37, 59, .93), rgba(5, 16, 29, .94));
  box-shadow:
    0 38px 90px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255, 255, 255, .025) inset,
    0 18px 48px rgba(26, 125, 191, .09);
  -webkit-backdrop-filter: blur(24px) saturate(1.28);
  backdrop-filter: blur(24px) saturate(1.28);
}

html[data-theme="akf-dark"] .akf-auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #58b9f3 24%, #d8b76a 50%, #20c1d5 76%, transparent);
  opacity: .86;
}

html[data-theme="akf-dark"] .akf-auth-home {
  border-color: rgba(140, 203, 244, .17);
  color: #b8ddf7;
  background: rgba(116, 187, 233, .065);
}

html[data-theme="akf-dark"] .akf-auth-home:hover,
html[data-theme="akf-dark"] .akf-auth-home:focus-visible {
  border-color: rgba(110, 195, 247, .42);
  color: #eef8ff;
  background: rgba(84, 171, 226, .13);
}

html[data-theme="akf-dark"] .akf-auth-card h1 {
  color: #f7fbff;
  letter-spacing: -.025em;
  text-shadow: 0 8px 28px rgba(63, 166, 229, .12);
}

html[data-theme="akf-dark"] .akf-auth-subtitle,
html[data-theme="akf-dark"] .akf-auth-hint,
html[data-theme="akf-dark"] .akf-auth-register {
  color: #aebfd0;
}

html[data-theme="akf-dark"] .akf-auth-input,
html[data-theme="akf-dark"] .akf-auth-robot {
  border-color: rgba(151, 205, 240, .16);
  background: rgba(2, 11, 22, .62);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025) inset;
}

html[data-theme="akf-dark"] .akf-auth-input:hover {
  border-color: rgba(126, 201, 247, .29);
}

html[data-theme="akf-dark"] .akf-auth-input:focus-within {
  border-color: #55afe7;
  background: rgba(3, 15, 28, .86);
  box-shadow:
    0 0 0 4px rgba(75, 174, 235, .12),
    0 12px 28px rgba(0, 0, 0, .17);
}

html[data-theme="akf-dark"] .akf-password-toggle {
  border-color: rgba(151, 205, 240, .15);
  color: #c7d9e8;
  background: rgba(127, 194, 237, .06);
}

html[data-theme="akf-dark"] .akf-password-toggle:hover,
html[data-theme="akf-dark"] .akf-password-toggle:focus-visible {
  border-color: rgba(126, 201, 247, .36);
  color: #fff;
  background: rgba(91, 181, 237, .14);
}

html[data-theme="akf-dark"] .akf-auth-submit {
  color: #fff;
  background:
    linear-gradient(120deg, #075a98 0%, #2498dc 50%, #0e70b6 100%);
  box-shadow:
    0 16px 36px rgba(14, 127, 196, .3),
    0 1px 0 rgba(255, 255, 255, .25) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

html[data-theme="akf-dark"] .akf-auth-submit:hover,
html[data-theme="akf-dark"] .akf-auth-submit:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 20px 42px rgba(24, 151, 220, .38),
    0 1px 0 rgba(255, 255, 255, .32) inset;
}

html[data-theme="akf-dark"] .akf-auth-register {
  border-top-color: rgba(151, 205, 240, .14);
}

body.akf-auth-page .akf-app-footer {
  padding: 0 16px 14px;
}

body.akf-auth-page .akf-footer-social {
  gap: 8px;
  margin-bottom: 7px;
}

body.akf-auth-page .akf-footer-social a {
  width: 40px;
  height: 40px;
}

html[data-theme="light"] .akf-auth-card,
html[data-theme="light"] .akf-auth-input,
html[data-theme="light"] .akf-auth-robot {
  color: var(--akf-text);
  background: var(--akf-surface);
}


html[data-theme="light"] :is(
  .akf-auth-home,
  .akf-auth-alert,
  .akf-auth-input,
  .akf-password-toggle,
  .akf-auth-submit
) svg,
html[data-theme="light"] :is(
  .akf-auth-home,
  .akf-auth-alert,
  .akf-auth-input,
  .akf-password-toggle,
  .akf-auth-submit
) svg * {
  color: #111;
  stroke: currentColor !important;
}

@media (max-width: 520px) {
  .akf-auth-page .akf-app-main {
    padding: calc(var(--akf-header-height) + 16px) 12px 12px;
  }

  .akf-auth-card {
    padding: 20px;
  }

  .akf-auth-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .akf-auth-submit {
    width: 100%;
  }
}

@media print {
  .akf-auth-page {
    background: #fff !important;
  }
}