* { box-sizing: border-box; }

html { font-family: var(--font-family-base); background: var(--bg-primary); }

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--text-primary);
  background:
    radial-gradient(circle at 12% 14%, var(--accent-atmosphere), transparent 24rem),
    radial-gradient(circle at 88% 8%, var(--primary-atmosphere), transparent 28rem),
    linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
}

a { color: inherit; }

:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--primary-focus);
  outline-offset: 3px;
}

[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--primary-focus);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  color: var(--text-on-primary);
  background: var(--text-primary);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.auth-page {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  overflow-x: hidden;
}

.auth-shell {
  display: grid;
  width: min(calc(100% - var(--space-6)), 1080px);
  margin: auto;
  padding-block: var(--space-6);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: var(--space-5);
  border: 1px solid var(--border-translucent);
  border-radius: var(--radius-card);
  background: var(--surface-overlay);
  box-shadow: var(--shadow);
}

.theme-toggle {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  background: var(--surface-raised);
  cursor: pointer;
}

.theme-toggle:focus-visible { outline: 3px solid var(--primary-focus); outline-offset: 3px; }

.brand {
  display: inline-flex;
  min-height: var(--control-min-height);
  align-items: center;
  gap: var(--space-2);
  color: var(--primary);
  font-size: var(--font-size-brand);
  line-height: var(--line-height-brand);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 36px;
  height: 36px;
  flex: none;
  overflow: hidden;
  color: transparent;
  background: url("/static/brand/mark-on-light.png?v=d1199f82421438cf") center / contain no-repeat;
}

[data-theme="dark"] .brand-mark {
  background-image: url("/static/brand/mark-on-dark.png?v=be37f80e3d55750e");
}

.auth-copy { margin-block: var(--space-6) var(--space-5); }
.eyebrow { margin: 0 0 var(--space-2); color: var(--primary); font-size: var(--font-size-small); line-height: var(--line-height-small); font-weight: var(--font-weight-bold); }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: var(--font-size-h1); line-height: var(--line-height-h1); }
.supporting-copy { margin: var(--space-3) 0 0; color: var(--text-secondary); }
.auth-form { display: grid; gap: var(--space-4); }
.otp-input { text-align: center; font-size: var(--font-size-h2); line-height: var(--line-height-h2); font-weight: var(--font-weight-bold); letter-spacing: .4em; }
.field-hint, .form-status, .privacy-note { margin: 0; color: var(--text-secondary); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.form-error { margin: var(--space-4) 0 0; color: var(--danger); font-size: var(--font-size-label); line-height: var(--line-height-label); }
.privacy-note { margin-block-start: var(--space-5); text-align: center; }

.back-link:focus-visible, .brand:focus-visible { outline: 3px solid var(--primary-focus); outline-offset: 3px; }
.back-link { display: block; margin-block-start: var(--space-6); color: var(--primary); font-size: var(--font-size-label); line-height: var(--line-height-label); font-weight: var(--font-weight-bold); text-decoration: none; }
.directional-icon { display: inline-block; }
:dir(rtl) .directional-icon { transform: scaleX(-1); }

.auth-aside { display: none; }
.auth-footer { padding: var(--space-4); color: var(--text-secondary); font-size: var(--font-size-small); line-height: var(--line-height-small); text-align: center; }
.public-legal-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.public-legal-links a { display: inline-flex; min-width: var(--control-min-height); min-height: var(--control-min-height); align-items: center; justify-content: center; padding-inline: var(--space-1); color: var(--text-secondary); text-underline-offset: 3px; }
.public-error-page { display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; overflow-x: hidden; }
.public-error-header { display: flex; width: min(calc(100% - var(--space-6)), var(--content-page-max)); align-items: center; justify-content: space-between; gap: var(--space-3); margin-inline: auto; padding-block: var(--space-4); }
.public-error-main { display: grid; width: min(calc(100% - var(--space-6)), 680px); place-items: center; margin-inline: auto; padding-block: var(--space-6); }
.public-error-card { display: grid; width: 100%; justify-items: center; gap: var(--space-5); padding: var(--space-6); text-align: center; }
.public-error-card h1,
.public-error-card p,
.public-error-fragment h2,
.public-error-fragment p { margin: 0; }
.public-error-code { display: grid; min-width: 80px; min-height: 52px; place-items: center; border-radius: var(--radius-pill); color: var(--primary); background: var(--primary-atmosphere); font-size: var(--font-size-h2); line-height: var(--line-height-h2); font-weight: var(--font-weight-bold); }
.public-error-reference { color: var(--text-secondary); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.public-error-reference code { overflow-wrap: anywhere; }
.public-error-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); padding: var(--space-4); color: var(--text-secondary); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.public-error-fragment { display: grid; width: 100%; justify-items: start; gap: var(--space-3); }

@media (min-width: 768px) {
  .auth-card { padding: var(--space-6); }
}

@media (min-width: 960px) {
  .auth-shell { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: stretch; }
  .auth-card { margin-inline: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
  .auth-aside {
    position: relative;
    display: grid;
    align-content: center;
    overflow: hidden;
    padding: var(--space-8);
    border: 1px solid var(--border);
    border-inline-start: 0;
    border-start-end-radius: var(--radius-card);
    border-end-end-radius: var(--radius-card);
    color: var(--text-primary);
    background: linear-gradient(145deg, var(--surface-aside-start), var(--surface-aside-end));
    box-shadow: var(--shadow);
  }
  .auth-aside h2 { position: relative; max-width: 14ch; margin: 0; font-size: var(--font-size-h2); line-height: var(--line-height-h2); }
  .auth-aside ul { position: relative; display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
  .auth-aside li { display: flex; gap: var(--space-2); align-items: center; }
  .auth-aside li span { color: var(--success); font-weight: var(--font-weight-bold); }
  .aside-orb { position: absolute; inset: -140px -120px auto auto; width: 360px; height: 360px; border-radius: 50%; background: var(--accent-aside); filter: blur(2px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}