:root {
  --auth-bg: color-mix(in srgb,var(--surface-muted) 84%,var(--surface));
  --auth-card: var(--surface-raised);
  --auth-inner: color-mix(in srgb,var(--surface-muted) 72%,var(--surface));
  --auth-border: color-mix(in srgb,var(--border) 74%,transparent);
  --auth-accent: var(--primary);
  --auth-radius: 24px;
  --auth-control-radius: 12px;
}

:root[data-theme="dark"] {
  --auth-bg: #000201;
  --auth-card: #030806;
  --auth-inner: #08120d;
  --auth-border: color-mix(in srgb,#9aff24 12%,#26322b 88%);
  --auth-accent: #83ff18;
}

body {
  min-height: 100dvh;
  background: radial-gradient(circle at 50% -12%,rgb(75 151 28 / 11%),transparent 36%),var(--auth-bg) !important;
  color: var(--text) !important;
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

.page {
  min-height: 100dvh;
  background: transparent !important;
}

.page > header,
.page > .header,
body > header {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.logo img,
body > header img {
  width: min(260px,62vw) !important;
  height: auto !important;
  max-height: 82px !important;
  object-fit: contain;
}

:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] body > header img {
  content: url("/images/moras-logo-dark.png");
}

.page main,
body > main.card {
  width: min(540px,calc(100% - 32px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

:is(.login-card,.card,body > main.card) {
  padding: clamp(28px,4vw,44px) !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: var(--auth-radius) !important;
  background: var(--auth-card) !important;
  color: var(--text) !important;
  box-shadow: 0 32px 82px rgb(0 0 0 / 48%) !important;
}

:is(.login-card,.card,body > main.card) h1 {
  margin: 0 0 10px !important;
  color: var(--text) !important;
  font-size: clamp(2.15rem,4vw,3rem) !important;
  font-weight: 720 !important;
  letter-spacing: -.045em;
  line-height: 1.05;
}

:is(.subtitle,.footer-text,.details,.back,.login-link,.register-link) {
  color: var(--text-muted) !important;
  line-height: 1.55;
}

form label {
  color: color-mix(in srgb,var(--text-muted) 84%,var(--text)) !important;
  font-weight: 650 !important;
}

:is(input,select,textarea) {
  width: 100%;
  min-height: 50px !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: var(--auth-control-radius) !important;
  background: var(--auth-inner) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

:is(input,select,textarea):focus {
  border-color: color-mix(in srgb,var(--auth-accent) 68%,var(--auth-border)) !important;
  outline: 2px solid color-mix(in srgb,var(--auth-accent) 28%,transparent) !important;
  outline-offset: 2px;
}

:is(button,.button,.login-button) {
  min-height: 48px !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: var(--auth-control-radius) !important;
  background: var(--auth-inner) !important;
  color: var(--text) !important;
  font: inherit;
  font-weight: 680 !important;
  text-decoration: none;
  transition: transform 150ms ease,border-color 150ms ease,background-color 150ms ease,box-shadow 150ms ease;
}

:is(button,.button,.login-button):hover {
  border-color: color-mix(in srgb,var(--auth-accent) 44%,var(--auth-border)) !important;
  background: color-mix(in srgb,var(--primary-soft) 24%,var(--auth-inner)) !important;
  transform: translateY(-1px);
}

:is(button[type="submit"],button.primary,.button.primary,.login-button) {
  border-color: color-mix(in srgb,var(--auth-accent) 70%,transparent) !important;
  background: linear-gradient(135deg,#38a916,#176d0c) !important;
  color: #f7fff3 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%),0 0 24px rgb(100 255 24 / 18%);
}

a {
  color: var(--auth-accent) !important;
}

.message {
  border: 1px solid var(--auth-border) !important;
  border-radius: var(--auth-control-radius) !important;
  background: var(--auth-inner) !important;
}

.message:empty {
  border: 0 !important;
  background: transparent !important;
}

.actions {
  gap: 10px;
}

@media (max-width: 600px) {
  :root {
    --auth-radius: 20px;
  }

  :is(.login-card,.card,body > main.card) {
    padding: 26px 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(button,.button,.login-button) {
    transition: none;
  }
}