:root {
  color-scheme: dark;

  /* AV DS semantic token boundary. Component styles below use these tokens only. */
  --surface-base: #071014;
  --surface-subtle: #0d1c21;
  --surface-raised: #10262c;
  --surface-muted: #16333b;
  --surface-header: rgba(7, 16, 20, 0.92);
  --surface-header-transparent: rgba(7, 16, 20, 0);
  --surface-control: rgba(255, 255, 255, 0.06);
  --surface-control-strong: rgba(255, 255, 255, 0.1);
  --surface-card-subtle: rgba(255, 255, 255, 0.04);
  --surface-media-overlay: rgba(7, 16, 20, 0.78);
  --surface-brand-subtle: rgba(208, 173, 87, 0.12);
  --surface-brand-muted: rgba(208, 173, 87, 0.14);
  --surface-warning-subtle: rgba(208, 173, 87, 0.18);
  --surface-success-subtle: rgba(115, 198, 140, 0.18);
  --surface-danger-subtle: rgba(217, 119, 101, 0.12);
  --surface-accent-subtle: rgba(111, 183, 201, 0.1);
  --surface-accent-muted: rgba(111, 183, 201, 0.12);
  --surface-accent-panel: rgba(111, 183, 201, 0.14);
  --surface-accent-panel-strong: rgba(111, 183, 201, 0.18);
  --surface-hero-overlay-x-strong: rgba(7, 16, 20, 0.9);
  --surface-hero-overlay-x-mid: rgba(7, 16, 20, 0.58);
  --surface-hero-overlay-x-soft: rgba(7, 16, 20, 0.08);
  --surface-hero-overlay-y-strong: rgba(7, 16, 20, 0.9);
  --surface-hero-overlay-y-clear: rgba(7, 16, 20, 0);
  --surface-hero-mobile-x-strong: rgba(7, 16, 20, 0.92);
  --surface-hero-mobile-x-mid: rgba(7, 16, 20, 0.48);
  --surface-hero-mobile-y-strong: rgba(7, 16, 20, 0.92);
  --surface-hero-mobile-y-soft: rgba(7, 16, 20, 0.08);
  --color-text-primary: #f3f7f2;
  --color-text-secondary: #afc0bd;
  --color-text-muted: #78908e;
  --color-text-on-accent: #071014;
  --color-text-inverse: #ffffff;
  --color-text-on-hero: #f3f7f2;
  --color-text-on-hero-muted: rgba(243, 247, 242, 0.91);
  --color-accent-primary: #d0ad57;
  --color-accent-secondary: #6fb7c9;
  --color-status-success: #73c68c;
  --color-status-danger: #d97765;
  --border-subtle: rgba(220, 235, 229, 0.16);
  --border-on-media: rgba(255, 255, 255, 0.3);
  --border-brand-subtle: color-mix(in srgb, var(--color-accent-primary), transparent 45%);
  --border-control-subtle: color-mix(in srgb, var(--color-text-primary), transparent 72%);
  --border-accent-medium: color-mix(in srgb, var(--color-accent-secondary), transparent 38%);
  --border-accent-strong: color-mix(in srgb, var(--color-accent-secondary), transparent 36%);
  --border-danger-subtle: color-mix(in srgb, var(--color-status-danger), transparent 45%);
  --surface-raised-soft: color-mix(in srgb, var(--surface-raised), transparent 8%);
  --graphic-qr-block: #ffffff;
  --shadow-elevation-lg: 0 24px 80px rgba(0, 0, 0, 0.34);
  --radius: 18px;
  --radius-sm: 10px;
  --max: 1180px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
}

[data-theme="light"] {
  color-scheme: light;
  --surface-base: #f8fbf8;
  --surface-subtle: #edf5f2;
  --surface-raised: #ffffff;
  --surface-muted: #e7f0ed;
  --surface-header: rgba(248, 251, 248, 0.92);
  --surface-header-transparent: rgba(248, 251, 248, 0);
  --color-text-primary: #102026;
  --color-text-secondary: #516567;
  --color-text-muted: #7a8b8d;
  --border-subtle: rgba(16, 32, 38, 0.14);
  --shadow-elevation-lg: 0 24px 80px rgba(17, 45, 52, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-base);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  line-height: 1.55;
}

body.no-scroll {
  overflow: hidden;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 18px;
  top: -80px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  font-weight: 800;
  transition: top 180ms ease;
}

.skip-link:focus-visible {
  top: 18px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px max(24px, calc((100vw - var(--max)) / 2));
  background: linear-gradient(to bottom, var(--surface-header), var(--surface-header-transparent));
  transition: background 180ms ease, border-color 180ms ease;
}

.site-header.scrolled {
  background: var(--surface-header);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(14px);
}

[data-theme="light"] .site-header {
  background: linear-gradient(to bottom, var(--surface-header), var(--surface-header-transparent));
}

[data-theme="light"] .site-header.scrolled {
  background: var(--surface-header);
}

.brand,
.header-actions,
.desktop-nav,
.language-switch,
.mobile-menu {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
  min-width: 210px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--border-brand-subtle);
  border-radius: 50%;
  background: var(--surface-brand-subtle);
  color: var(--color-accent-primary);
}

.brand-mark svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.brand strong,
.site-footer strong {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.brand small,
.site-footer span {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.desktop-nav {
  gap: 28px;
}

.desktop-nav a,
.site-footer a {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  font-weight: 650;
  transition: color 160ms ease;
}

.desktop-nav a:hover,
.site-footer a:hover {
  color: var(--color-text-primary);
}

.header-actions {
  gap: 12px;
}

.language-switch {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--surface-control);
}

.language-switch button {
  min-width: 36px;
  min-height: 30px;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 750;
}

.language-switch button.active {
  background: var(--surface-muted);
  color: var(--color-text-primary);
}

.mobile-language-switch {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}

.mobile-language-switch button {
  min-height: 38px;
  flex: 1;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 850;
}

.mobile-language-switch button.active {
  background: var(--surface-muted);
  color: var(--color-text-primary);
}

.theme-button,
.menu-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--surface-control);
  color: var(--color-text-primary);
}

.theme-button svg,
.menu-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.header-cta,
.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
}

.header-cta,
.primary-button {
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
}

.header-cta {
  padding: 0 18px;
  font-size: 0.88rem;
}

.primary-button {
  padding: 0 22px;
}

.primary-button.compact {
  width: 100%;
}

.secondary-button {
  border: 1px solid var(--border-control-subtle);
  padding: 0 22px;
  color: var(--color-text-primary);
  background: var(--surface-control);
}

.menu-button {
  display: none;
}

.mobile-menu {
  position: fixed;
  z-index: 99;
  top: 78px;
  right: 18px;
  left: 18px;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-elevation-lg);
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu a {
  padding: 12px 8px;
  color: var(--color-text-secondary);
  font-weight: 750;
}

.hero {
  position: relative;
  display: grid;
  min-height: 92vh;
  overflow: hidden;
  background: var(--surface-base);
}

.hero-image,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
}

.hero-shade {
  background:
    linear-gradient(90deg, var(--surface-hero-overlay-x-strong) 0%, var(--surface-hero-overlay-x-mid) 45%, var(--surface-hero-overlay-x-soft) 100%),
    linear-gradient(0deg, var(--surface-hero-overlay-x-strong) 0%, var(--surface-header-transparent) 34%);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  grid-template-columns: minmax(0, 700px) minmax(280px, 360px);
  gap: 52px;
  align-items: end;
  margin: 0 auto;
  padding: 170px 0 88px;
}

.hero-copy h1 {
  margin: 0;
  color: var(--color-text-on-hero);
  font-family: var(--font-display);
  font-size: 5.8rem;
  line-height: 0.92;
  font-weight: 700;
}

.hero-copy p {
  max-width: 650px;
  margin: 26px 0 0;
  color: var(--color-text-on-hero-muted);
  font-size: 1.2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-panel,
.dog-card,
.breeding-console,
.passport-visual {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-raised-soft);
  box-shadow: var(--shadow-elevation-lg);
}

.hero-panel {
  padding: 24px;
  backdrop-filter: blur(16px);
}

.panel-topline {
  color: var(--color-accent-primary);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-panel > strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.05;
}

.hero-panel-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-top: 24px;
  color: var(--color-text-secondary);
}

.hero-panel-grid b {
  color: var(--color-text-primary);
}

.mini-progress,
.meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-control-strong);
}

.mini-progress {
  margin-top: 24px;
}

.mini-progress span,
.meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent-primary);
  transition: width 280ms ease;
}

.intro-strip {
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: -34px auto 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--border-subtle);
  box-shadow: var(--shadow-elevation-lg);
  position: relative;
  z-index: 2;
}

.intro-strip div {
  padding: 22px;
  background: var(--surface-raised);
}

.intro-strip strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
}

.intro-strip span {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.section {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 96px 0;
}

.section-heading {
  max-width: 780px;
  margin: 0 auto 44px;
  text-align: center;
}

.section-heading.align-left {
  margin-left: 0;
  text-align: left;
}

.section-heading p,
.passport-copy p {
  margin: 0 0 12px;
  color: var(--color-accent-secondary);
  font-size: 0.8rem;
  font-weight: 850;
  text-transform: uppercase;
}

.section-heading h2,
.passport-copy h2,
.launch-section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.04;
}

.section-heading span,
.passport-copy span,
.launch-section p {
  display: block;
  margin-top: 18px;
  color: var(--color-text-secondary);
  font-size: 1.05rem;
}

.registry-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 26px;
}

.dog-selector {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dog-selector button {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
}

.dog-selector button.active {
  background: var(--surface-raised);
  border-color: var(--border-accent-medium);
}

.dog-selector img {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  object-fit: cover;
}

.dog-selector small,
.dog-card-header p {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.84rem;
}

.dog-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  overflow: hidden;
}

.dog-photo-frame {
  position: relative;
  min-height: 470px;
  background: var(--surface-subtle);
}

.dog-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-card {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 5px;
  min-width: 144px;
  padding: 14px;
  border: 1px solid var(--border-on-media);
  border-radius: 14px;
  background: var(--surface-media-overlay);
  color: var(--color-text-inverse);
  backdrop-filter: blur(12px);
}

.qr-card span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, var(--graphic-qr-block) 50%, transparent 50%),
    linear-gradient(var(--graphic-qr-block) 50%, transparent 50%);
  background-size: 10px 10px;
  color: var(--color-text-on-accent);
  font-size: 0.7rem;
  font-weight: 900;
}

.dog-card-body {
  padding: 30px;
}

.dog-card-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.dog-card-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.2rem;
}

.profile-link,
.route-back {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  color: var(--color-accent-secondary);
  font-size: 0.86rem;
  font-weight: 800;
}

.profile-link {
  margin-top: 10px;
}

.dog-card-header > strong {
  color: var(--color-accent-primary);
  font-family: var(--font-display);
  font-size: 2.5rem;
}

.verification-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.verification-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-card-subtle);
}

.verification-dot {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-success-subtle);
  color: var(--color-status-success);
}

.verification-row.pending .verification-dot {
  background: var(--surface-warning-subtle);
  color: var(--color-accent-primary);
}

.verification-row small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-secondary);
}

.verification-row b:last-child {
  color: var(--color-text-muted);
  font-size: 0.84rem;
}

.intelligence-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 42px;
  align-items: start;
}

.breeding-console {
  padding: 26px;
}

.pair-panel {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  font-weight: 780;
}

select {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 16px;
  background: var(--surface-subtle);
  color: var(--color-text-primary);
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.risk-grid article,
.recommendation {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface-card-subtle);
  padding: 18px;
}

.risk-grid span {
  color: var(--color-text-secondary);
  font-size: 0.84rem;
}

.risk-grid strong {
  display: block;
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-size: 1.9rem;
}

.meter i {
  background: var(--color-accent-primary);
}

.meter.blue i {
  background: var(--color-accent-secondary);
}

.meter.green i {
  background: var(--color-status-success);
}

.recommendation {
  margin-top: 14px;
}

.recommendation h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
}

.recommendation p {
  margin: 10px 0 0;
  color: var(--color-text-secondary);
}

.passport-section {
  width: 100%;
  background: var(--surface-subtle);
}

.passport-card {
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  grid-template-columns: 1fr 420px;
  gap: 52px;
  align-items: center;
  margin: 0 auto;
}

.passport-copy h2,
.launch-section h2 {
  max-width: 700px;
}

.passport-visual {
  padding: 26px;
  background:
    linear-gradient(135deg, var(--surface-accent-panel-strong), transparent 42%),
    var(--surface-raised);
}

.passport-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.passport-logo {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 16px;
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
}

.passport-header span {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.86rem;
}

.passport-header strong {
  display: block;
}

.passport-qr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  width: 180px;
  margin: 32px 0;
}

.passport-qr span {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--color-text-primary);
}

.passport-qr span:nth-child(3n) {
  opacity: 0.35;
}

.event-log {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-log li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle);
}

.event-log span {
  color: var(--color-text-secondary);
  text-align: right;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--border-subtle);
}

.timeline article {
  min-height: 260px;
  padding: 24px;
  background: var(--surface-raised);
}

.timeline article.done,
.timeline article.active {
  background:
    linear-gradient(180deg, var(--surface-accent-panel), transparent),
    var(--surface-raised);
}

.timeline span {
  color: var(--color-accent-primary);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
}

.timeline h3 {
  min-height: 58px;
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.08;
}

.timeline p {
  margin: 16px 0 0;
  color: var(--color-text-secondary);
}

.section-actions {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.launch-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  border-top: 1px solid var(--border-subtle);
}

.launch-section p {
  max-width: 760px;
}

.route-view[hidden] {
  display: none;
}

.route-view {
  width: min(var(--max), calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 128px 0 96px;
}

.route-shell {
  display: grid;
  gap: 26px;
}

.route-back {
  color: var(--color-text-secondary);
}

.route-hero {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, var(--surface-accent-panel), transparent 42%),
    var(--surface-raised);
  box-shadow: var(--shadow-elevation-lg);
  overflow: hidden;
}

.route-hero-image {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.route-hero-copy {
  padding: 34px 34px 28px 0;
}

.section-label {
  margin: 0 0 12px;
  color: var(--color-accent-secondary);
  font-size: 0.8rem;
  font-weight: 850;
  text-transform: uppercase;
}

.route-hero-copy h1,
.passport-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 0.98;
}

.route-meta {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--color-text-secondary);
  font-size: 1.05rem;
}

.route-stat-grid {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0 28px 28px 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--border-subtle);
}

.route-stat-grid div {
  min-width: 0;
  padding: 18px;
  background: var(--surface-card-subtle);
}

.route-stat-grid span {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
}

.route-stat-grid strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.05;
}

.route-stat-grid small {
  display: block;
  margin-top: 8px;
  color: var(--color-text-secondary);
  font-size: 0.76rem;
}

.route-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
  gap: 18px;
}

.route-panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 24px;
}

.route-panel h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.route-panel p {
  margin: 10px 0 0;
  color: var(--color-text-secondary);
}

.route-passport-card {
  width: 100%;
  padding: 36px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  box-shadow: var(--shadow-elevation-lg);
}

.admin-heading {
  max-width: 820px;
}

.admin-heading h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 0.98;
}

.admin-heading > p:last-child {
  margin: 18px 0 0;
  color: var(--color-text-secondary);
  font-size: 1.06rem;
}

.admin-stat-grid {
  grid-column: auto;
  width: 100%;
  margin: 0;
}

.admin-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.admin-queue-panel h2,
.admin-evidence-panel h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.admin-queue {
  display: grid;
  gap: 12px;
}

.admin-queue-button {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
}

.admin-queue-button.active {
  border-color: var(--border-accent-strong);
  background: var(--surface-accent-subtle);
}

.admin-queue-button small {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

.admin-queue-top,
.admin-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-queue-top small,
.admin-pill,
.admin-status {
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--surface-brand-muted);
  color: var(--color-accent-primary);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-status {
  background: var(--surface-accent-muted);
  color: var(--color-accent-secondary);
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
}

.admin-evidence-panel {
  display: grid;
  align-content: start;
  gap: 18px;
}

.admin-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--border-subtle);
}

.admin-meta-grid div {
  min-width: 0;
  padding: 14px;
  background: var(--surface-card-subtle);
}

.admin-meta-grid span {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.admin-meta-grid strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.admin-note-label {
  color: var(--color-text-secondary);
}

.admin-note {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface-subtle);
  color: var(--color-text-primary);
  font: inherit;
  line-height: 1.45;
}

.reviewer-key-panel {
  display: grid;
  gap: 18px;
}

.reviewer-key-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
}

.reviewer-key-panel > p {
  margin: 0;
  color: var(--color-text-secondary);
}

.reviewer-key-form {
  display: grid;
  gap: 16px;
}

.reviewer-key-label {
  display: grid;
  gap: 8px;
  color: var(--color-text-secondary);
  font-weight: 800;
}

.reviewer-key-input {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface-subtle);
  color: var(--color-text-primary);
  font: inherit;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-actions .primary-button,
.admin-actions .secondary-button,
.danger-button {
  min-width: 150px;
  padding: 0 18px;
}

.danger-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-danger-subtle);
  border-radius: 999px;
  background: var(--surface-danger-subtle);
  color: var(--color-text-primary);
  font-weight: 800;
  line-height: 1;
}

.admin-event-log {
  margin: 0;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  color: var(--color-text-secondary);
}

.admin-dog-panel {
  display: grid;
  gap: 18px;
}

.admin-dog-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  object-fit: cover;
}

.data-room-cycle {
  display: grid;
  gap: 8px;
  background:
    linear-gradient(135deg, var(--surface-brand-muted), transparent 44%),
    var(--surface-raised);
}

.data-room-cycle span,
.data-room-cycle small {
  color: var(--color-text-secondary);
}

.data-room-cycle strong {
  font-family: var(--font-display);
  font-size: 2rem;
}

.data-room-stats {
  grid-column: auto;
  width: 100%;
  margin: 0;
}

.data-room-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 0.9fr;
  gap: 18px;
  align-items: start;
}

.data-room-panel {
  min-width: 0;
}

.data-room-list {
  display: grid;
  gap: 12px;
}

.data-room-row {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-card-subtle);
}

.data-room-row span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.data-room-row small,
.data-room-row > span:last-child {
  color: var(--color-text-secondary);
}

.data-room-row em {
  flex: 0 0 auto;
  max-width: 150px;
  color: var(--color-accent-primary);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
  text-align: right;
  text-transform: uppercase;
}

.site-footer {
  display: flex;
  width: min(var(--max), calc(100% - 48px));
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  padding: 34px 0 48px;
  border-top: 1px solid var(--border-subtle);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

@media (max-width: 980px) {
  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-button {
    display: grid;
  }

  .hero-content,
  .registry-layout,
  .dog-card,
  .route-hero,
  .route-grid,
  .route-stat-grid,
  .admin-layout,
  .admin-detail-grid,
  .data-room-grid,
  .intelligence-section,
  .passport-card {
    grid-template-columns: 1fr;
  }

  .hero-content {
    align-items: end;
    padding-top: 140px;
  }

  .route-hero-copy {
    padding: 28px;
  }

  .route-stat-grid {
    grid-column: auto;
    margin: 0 28px 28px;
  }

  .admin-stat-grid,
  .data-room-stats {
    margin: 0;
  }

  .data-room-row {
    flex-direction: column;
  }

  .data-room-row em {
    max-width: none;
    text-align: left;
  }

  .hero-copy h1 {
    font-size: 4.2rem;
  }

  .intro-strip,
  .risk-grid,
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .pair-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .site-header {
    padding-inline: 18px;
  }

  .brand {
    min-width: 0;
  }

  .brand small,
  .language-switch {
    display: none;
  }

  .hero-content,
  .section,
  .intro-strip,
  .passport-card,
  .route-view,
  .site-footer {
    width: min(100% - 32px, var(--max));
  }

  .route-view {
    padding-top: 112px;
  }

  .route-hero-copy h1,
  .passport-copy h1,
  .admin-heading h1 {
    font-size: 2.7rem;
  }

  .admin-meta-grid {
    grid-template-columns: 1fr;
  }

  .route-passport-card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .hero-content {
    padding-bottom: 56px;
  }

  .hero-shade {
    background:
      linear-gradient(90deg, var(--surface-header) 0%, var(--surface-hero-mobile-x-mid) 100%),
      linear-gradient(0deg, var(--surface-header) 0%, var(--surface-hero-overlay-x-soft) 55%);
  }

  .hero-copy h1 {
    font-size: 3.2rem;
  }

  .hero-copy p {
    font-size: 1.05rem;
  }

  .section {
    padding: 68px 0;
  }

  .section-heading h2,
  .passport-copy h2,
  .launch-section h2 {
    font-size: 2.2rem;
  }

  .intro-strip,
  .risk-grid,
  .timeline {
    grid-template-columns: 1fr;
  }

  .dog-photo-frame {
    min-height: 360px;
  }

  .dog-card-body,
  .breeding-console,
  .passport-visual {
    padding: 20px;
  }

  .dog-card-header,
  .event-log li,
  .launch-section,
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .verification-row {
    grid-template-columns: 28px 1fr;
  }

  .verification-row b:last-child {
    grid-column: 2;
  }
}

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