/* A11Y Audit 2026 visual system. Loaded after the legacy styles as a reversible layer. */
:root {
  color-scheme: light;
  --ui-bg: #edf2f7;
  --ui-bg-strong: #e4ebf3;
  --ui-surface: rgba(255, 255, 255, 0.9);
  --ui-surface-solid: #ffffff;
  --ui-surface-muted: rgba(246, 249, 252, 0.92);
  --ui-text: #121a2a;
  --ui-muted: #52627a;
  --ui-border: rgba(66, 84, 112, 0.2);
  --ui-border-strong: rgba(52, 73, 108, 0.34);
  --ui-primary: #075fd8;
  --ui-primary-hover: #004aa9;
  --ui-primary-soft: #e7f0ff;
  --ui-teal: #087e70;
  --ui-teal-soft: #dff5ef;
  --ui-amber: #9a6200;
  --ui-amber-soft: #fff2ce;
  --ui-danger: #b42318;
  --ui-danger-soft: #fee9e7;
  --ui-success: #087a55;
  --ui-success-soft: #def4e9;
  --ui-nav: rgba(22, 29, 42, 0.94);
  --ui-shadow: 0 18px 45px rgba(36, 50, 74, 0.12);
  --ui-shadow-soft: 0 8px 22px rgba(36, 50, 74, 0.08);
  --ui-radius: 8px;
  --ui-control: 46px;
  --ui-content: 1500px;
}

* {
  scrollbar-color: #8292aa transparent;
}

html {
  background: var(--ui-bg);
}

body.app-2026 {
  min-width: 320px;
  color: var(--ui-text);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(115deg, rgba(7, 95, 216, 0.06), transparent 38%),
    linear-gradient(245deg, rgba(8, 126, 112, 0.06), transparent 34%),
    var(--ui-bg) !important;
}

body.app-2026 h1,
body.app-2026 h2,
body.app-2026 h3,
body.app-2026 h4,
body.app-2026 h5,
body.app-2026 h6 {
  color: var(--ui-text);
  font-family: "Space Grotesk", "Manrope", system-ui, sans-serif;
  letter-spacing: 0;
}

body.app-2026 p,
body.app-2026 li,
body.app-2026 td,
body.app-2026 label,
body.app-2026 small {
  line-height: 1.55;
}

body.app-2026 a {
  color: #0057b8;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.app-2026 a:hover {
  color: #003f88;
  text-decoration-thickness: 2px;
}

body.app-2026 :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #f3b61f !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

body.app-2026 .wizard-step-head h3:focus-visible {
  width: fit-content;
  border-radius: 4px;
  outline: 3px solid #f3b61f !important;
  outline-offset: 3px !important;
}

body.app-2026 .app-main {
  width: min(var(--ui-content), calc(100% - 32px));
  max-width: none;
}

body.app-2026 .site-nav {
  position: sticky;
  top: 0;
  z-index: 1040;
  min-height: 68px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--ui-nav) !important;
  box-shadow: 0 10px 28px rgba(10, 16, 27, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

body.app-2026 .site-nav .container-fluid {
  width: min(var(--ui-content), calc(100% - 32px));
}

body.app-2026 .site-nav .navbar-brand {
  color: #ffffff !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

body.app-2026 .site-nav .nav-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid transparent;
  border-radius: var(--ui-radius);
  color: #e9eef7 !important;
  text-decoration: none;
}

body.app-2026 .site-nav .nav-link:hover,
body.app-2026 .site-nav .nav-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff !important;
}

body.app-2026 .site-nav .nav-link.active {
  border-color: rgba(132, 181, 255, 0.58);
  background: rgba(112, 164, 244, 0.18);
  box-shadow: inset 0 -2px 0 #75b2ff;
  color: #ffffff !important;
}

body.app-2026 .site-nav .btn.btn-secondary {
  width: 42px;
  height: 42px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--ui-radius) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.app-2026 .navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.28);
  border-radius: var(--ui-radius);
}

body.app-2026 :where(.home-audit-layout, .page-hero, .section-surface, .surface-card, .audit-form-shell,
  .contrast-unified-panel, .wizard-result-panel, .audit-result-card) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
}

body.app-2026 .home-audit-layout::before,
body.app-2026 .audit-workspace::before,
body.app-2026 .page-hero::before,
body.app-2026 .section-surface::before {
  display: none;
}

body.page-home .app-main-home {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  padding: 0;
}

body.page-home .home-audit-layout {
  grid-template-columns: minmax(280px, 0.29fr) minmax(0, 0.71fr);
  min-height: calc(100dvh - 100px);
  overflow: clip;
}

body.page-home .intro-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr);
  gap: 1rem;
  overflow: hidden;
  padding: clamp(1.2rem, 2vw, 1.8rem);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  color: #eef4ff;
  background:
    linear-gradient(165deg, rgba(31, 41, 58, 0.98), rgba(17, 29, 43, 0.98)),
    #17202e;
}

body.page-home .intro-panel h1 {
  margin-bottom: 0.75rem;
  color: #ffffff;
  font-size: clamp(2rem, 3.1vw, 3.35rem);
  line-height: 0.98;
}

body.page-home .intro-panel .lead {
  color: #d7e1f0;
  font-size: 0.97rem;
  line-height: 1.62;
}

body.page-home .intro-panel a {
  color: #9cc8ff;
}

body.page-home .intro-actions {
  display: contents;
}

body.page-home .hero-link-strip {
  display: grid;
  gap: 0.55rem;
}

body.page-home .hero-support-copy {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ui-radius);
  color: #eaf1fb;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body.page-home .intro-image-card {
  min-height: 0;
  margin: 0 calc(clamp(1.2rem, 2vw, 1.8rem) * -1) calc(clamp(1.2rem, 2vw, 1.8rem) * -1);
  border: 0;
  border-radius: 0;
  background: #edf2ff;
}

body.page-home .intro-image-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg, #17202e 0%, rgba(23, 32, 46, 0) 100%);
}

body.page-home .intro-image-card img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center 40%;
}

body.page-home .audit-workspace {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.6rem);
  background: rgba(249, 251, 254, 0.9) !important;
  box-shadow: none;
}

body.page-home .audit-form-header {
  margin-bottom: 0.75rem;
}

body.page-home .audit-form-header h2 {
  font-size: clamp(1.55rem, 2vw, 2.15rem);
}

body.page-home .audit-form-shell {
  min-height: min(670px, calc(100dvh - 178px));
  margin: 0 !important;
  padding: clamp(0.75rem, 1.4vw, 1.15rem);
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: var(--ui-shadow-soft);
}

body.app-2026 .section-kicker {
  color: #43536c;
  letter-spacing: 0.06em;
}

body.app-2026 .wizard-progress ol {
  gap: 0.45rem;
}

body.app-2026 .wizard-progress li {
  min-height: 48px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, 0.7);
}

body.app-2026 .wizard-progress li span {
  color: #064fae;
  background: #e7f0ff;
}

body.app-2026 .wizard-progress li.is-active {
  border-color: #6ca6f5;
  background: #eaf2ff;
  box-shadow: inset 0 -3px 0 var(--ui-primary);
}

body.app-2026 .wizard-progress li.is-active span,
body.app-2026 .wizard-progress li.is-complete span {
  color: #ffffff;
  background: var(--ui-primary);
}

body.app-2026 .wizard-progress-track {
  height: 7px;
  background: #e5ebf3;
}

body.app-2026 .wizard-progress-track span {
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-teal));
}

body.app-2026 .wizard-status {
  color: var(--ui-muted);
}

body.app-2026 :where(.wizard-step-note, .engine-explainer-card, .wizard-help-card, .audit-review-card,
  .wizard-toggle-list .form-check, .contrast-input-card, .contrast-preview-card, .contrast-guidance-card) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface-muted) !important;
  box-shadow: none !important;
}

body.app-2026 .engine-explainer-card {
  border-left: 4px solid var(--ui-teal) !important;
}

body.app-2026 .wizard-choice label {
  min-height: 112px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: none;
}

body.app-2026 .wizard-choice input:checked + label {
  border-color: #5b99ec;
  background: #eaf2ff;
  box-shadow: inset 4px 0 0 var(--ui-primary);
}

body.app-2026 .form-control,
body.app-2026 .form-select {
  min-height: var(--ui-control);
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-text);
  background-color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: inset 0 1px 2px rgba(26, 37, 55, 0.05) !important;
}

body.app-2026 .form-control:hover,
body.app-2026 .form-select:hover {
  border-color: #7292bd !important;
}

body.app-2026 .btn {
  min-height: 44px;
  border-radius: var(--ui-radius) !important;
  padding: 0.62rem 1rem;
  font-weight: 800;
  letter-spacing: 0;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.app-2026 .btn-primary {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(7, 95, 216, 0.2);
}

body.app-2026 .btn-primary:hover {
  border-color: var(--ui-primary-hover) !important;
  background: var(--ui-primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

body.app-2026 .btn-outline-primary,
body.app-2026 .btn-outline-primary.btn-glass {
  border-color: #3979cc !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #064fae !important;
  box-shadow: 0 7px 16px rgba(44, 69, 105, 0.08);
}

body.app-2026 .btn-outline-primary:hover,
body.app-2026 .btn-outline-primary.btn-glass:hover {
  border-color: #064fae !important;
  background: #e6f0ff !important;
  color: #003f8f !important;
}

body.app-2026 .btn:disabled {
  border-color: #aeb9c8 !important;
  background: #e5e9ef !important;
  color: #59677b !important;
  opacity: 1;
  box-shadow: none;
}

body.app-2026 .btn-glass {
  border-radius: var(--ui-radius) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body.app-2026 .wizard-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ui-border);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body.app-2026 .wizard-result-panel {
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border-top: 4px solid var(--ui-teal) !important;
  background:
    linear-gradient(135deg, rgba(223, 245, 239, 0.7), rgba(231, 240, 255, 0.55)),
    rgba(255, 255, 255, 0.9) !important;
}

body.app-2026 .wizard-result-head {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(360px, 1.28fr);
  align-items: start;
  gap: 0.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ui-border);
}

body.app-2026 .wizard-result-head h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
}

body.app-2026 .wizard-result-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.42rem;
  width: 100%;
  max-width: none;
}

body.app-2026 .wizard-result-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
}

body.app-2026 .wizard-result-summary > div {
  min-width: 0;
}

body.app-2026 .wizard-result-emoji {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, 0.72);
  font-size: 1.25rem;
  line-height: 1;
}

body.app-2026 .wizard-result-actions {
  display: contents;
}

body.app-2026 .wizard-result-action {
  min-height: 44px;
  padding: 0.42rem 0.7rem;
  border-radius: var(--ui-radius) !important;
  font-size: 0.76rem;
  line-height: 1.15;
  white-space: nowrap;
}

body.app-2026 .wizard-result-action > span[aria-hidden="true"] {
  font-size: 0.9rem;
  line-height: 1;
}

body.app-2026 .wizard-result-metrics {
  gap: 0.75rem;
}

body.app-2026 .wizard-result-metrics > div {
  min-height: 92px;
  display: grid;
  align-content: center;
  padding: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--ui-shadow-soft);
}

body.app-2026 .wizard-result-metrics > div > span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

body.app-2026 .result-metric-emoji {
  display: inline-block;
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1;
}

body.app-2026 .wizard-result-metrics strong {
  font-size: 1.45rem;
}

body.app-2026 .lighthouse-score-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.app-2026 .lighthouse-score-card {
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 0.82;
  border-top: 4px solid var(--score-color, var(--ui-teal)) !important;
}

body.app-2026 .lighthouse-score-card.score-good { --score-color: var(--ui-success); }
body.app-2026 .lighthouse-score-card.score-average { --score-color: var(--ui-amber); }
body.app-2026 .lighthouse-score-card.score-poor { --score-color: var(--ui-danger); }

body.app-2026 .lighthouse-score-card .score-ring {
  background: conic-gradient(var(--score-color, var(--ui-teal)) var(--score), #e2e8f0 0);
}

body.app-2026 .manual-audit-callout {
  border: 1px solid #e8c66d !important;
  border-radius: var(--ui-radius) !important;
  color: #614300 !important;
  background: var(--ui-amber-soft) !important;
}

body.app-2026 .audit-result-card {
  margin-top: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
}

body.app-2026 .accordion-item,
body.app-2026 .accordion-button {
  border-color: var(--ui-border) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--ui-text) !important;
}

body.app-2026 .audit-running {
  min-height: 310px;
  grid-template-columns: minmax(180px, 0.36fr) minmax(0, 0.64fr);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, 0.72);
}

body.app-2026 .audit-loading-visual {
  border-radius: var(--ui-radius);
  background: #e7effb;
}

body.app-2026 .audit-loading-progress {
  background: #dfe6ef;
}

body.app-2026 .audit-loading-progress span {
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-teal), var(--ui-primary));
}

body.page-subpage .app-main {
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
}

body.page-subpage .page-hero {
  margin-bottom: 1.25rem !important;
  padding: clamp(1.2rem, 3vw, 2rem);
  border-top: 4px solid var(--ui-primary) !important;
}

body.page-subpage .page-hero h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

body.page-subpage .page-hero img {
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-soft);
}

body.page-subpage .section-surface {
  padding: clamp(1rem, 2.4vw, 1.7rem);
}

body.app-2026 .card {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius) !important;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--ui-shadow-soft);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

body.app-2026 .card:hover {
  border-color: var(--ui-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow);
}

body.app-2026 .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.15rem;
}

body.app-2026 .card-body .btn {
  margin-top: auto;
}

body.app-2026 .metrics-banner {
  max-width: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  border: 1px solid #a8d8ca;
  border-radius: var(--ui-radius);
  color: #075e50;
  background: var(--ui-teal-soft);
}

body.page-statistics .page-hero .row {
  display: grid;
  grid-template-columns: minmax(170px, 0.22fr) minmax(0, 0.78fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: center;
}

body.page-statistics .page-hero .row > *,
body.page-about .about-hero .row > * {
  width: 100%;
}

body.page-statistics .page-hero img {
  width: min(190px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1;
  object-fit: cover;
}

.public-stats-grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.45fr) minmax(540px, 2.55fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.public-stat-card {
  min-height: 112px;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--ui-shadow-soft);
}

.public-stat-card span,
.public-stat-card strong {
  display: block;
}

.public-stat-card span {
  color: var(--ui-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.public-stat-card strong {
  margin-top: 0.35rem;
  overflow-wrap: anywhere;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
}

.public-stat-card--compact {
  min-height: 0;
  padding: 0.9rem;
}

.public-stat-card--compact strong {
  font-size: clamp(1.65rem, 2vw, 2.25rem);
}

.public-stat-card--ranking {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
}

.public-stat-card .common-violations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.public-stat-card .common-violation-badge {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: start;
  min-width: 0;
  min-height: 3.85rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid #b9d4dd;
  border-radius: 10px;
  color: #173f50;
  background: #edf7fa;
}

.public-stat-card .common-violation-rank {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #08627a;
  font-size: 0.72rem;
  font-weight: 800;
}

.public-stat-card .common-violation-copy {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.public-stat-card .common-violation-name {
  display: block;
  min-width: 0;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
  overflow-wrap: anywhere;
}

.public-stat-card .common-violation-description {
  display: -webkit-box;
  overflow: hidden;
  color: #526b77;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.public-stat-card .common-violation-count {
  display: inline-grid;
  min-width: 1.8rem;
  height: 1.55rem;
  margin: 0;
  padding-inline: 0.35rem;
  place-items: center;
  border-radius: 999px;
  color: #234600;
  background: #dff0bd;
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  overflow-wrap: normal;
}

.public-stat-card .common-violations-empty {
  grid-column: 1 / -1;
  color: var(--ui-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

body.dark-mode.page-statistics .common-violation-badge {
  border-color: #456d7c;
  color: #ecf8fb;
  background: #193e4c;
}

body.dark-mode.page-statistics .common-violation-rank {
  color: #062c38;
  background: #9bdcf0;
}

body.dark-mode.page-statistics .common-violation-count {
  color: #f2ffd7;
  background: #435e1e;
}

body.dark-mode.page-statistics .common-violation-description {
  color: #b9d4de;
}

body.app-2026 .table-surface {
  overflow: hidden;
}

body.app-2026 .table-surface .card-body {
  display: block;
  padding: 0;
}

body.app-2026 .table {
  margin: 0;
  color: var(--ui-text);
}

body.app-2026 .table > :not(caption) > * > * {
  padding: 0.85rem 1rem;
  border-color: var(--ui-border);
  background: transparent;
}

body.app-2026 .table thead th {
  color: #384860;
  background: #edf3fa;
}

body.app-2026 .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(235, 241, 248, 0.62);
}

body.page-about .about-hero .row {
  display: grid;
  grid-template-columns: minmax(190px, 0.24fr) minmax(0, 0.76fr);
  gap: clamp(1rem, 3vw, 2.2rem);
}

body.page-about .about-hero img {
  width: min(210px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--ui-radius) !important;
}

body.page-about .about-hero .text-center,
body.page-statistics .page-hero .text-center {
  display: grid;
  place-items: center;
}

body.page-contrast .contrast-unified-panel {
  min-height: calc(100dvh - 112px);
  padding: 0.85rem;
  border-top: 4px solid var(--ui-primary) !important;
}

body.page-contrast :where(.contrast-tool-panel, .contrast-workbench, .contrast-result-card, .contrast-hero-visual) {
  border-radius: var(--ui-radius) !important;
}

body.page-contrast .contrast-result-card {
  border-left: 4px solid var(--ui-primary);
}

body.page-contrast .contrast-score-group .badge.bg-success {
  background: var(--ui-success) !important;
}

body.page-contrast .contrast-score-group .badge.bg-danger {
  background: var(--ui-danger) !important;
}

body.page-contrast .contrast-preview-box {
  border-radius: var(--ui-radius);
}

body.page-contrast .app-main-dashboard {
  width: min(1480px, calc(100% - 28px));
  padding-inline: 0;
}

body.page-contrast .contrast-unified-panel {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  min-height: auto;
  padding: clamp(0.8rem, 1.4vw, 1.2rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(242, 247, 253, 0.9)),
    var(--ui-surface-solid);
}

body.page-contrast .contrast-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0.2rem 0.75rem;
  border-bottom: 1px solid var(--ui-border);
}

body.page-contrast .contrast-page-header h1 {
  margin: 0.1rem 0 0.2rem;
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  line-height: 1.1;
}

body.page-contrast .contrast-page-header p {
  margin: 0;
  color: var(--ui-muted);
}

body.page-contrast .contrast-page-purpose {
  max-width: 32ch;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--ui-teal);
  background: rgba(18, 145, 128, 0.07);
  font-size: 0.8rem;
}

body.page-contrast .contrast-unified-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.55fr);
  gap: 0.8rem;
  align-items: stretch;
}

body.page-contrast .contrast-workbench,
body.page-contrast .contrast-result-card,
body.page-contrast .contrast-guidance-card {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: none;
}

body.page-contrast .contrast-workbench {
  display: grid;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-content: start;
  padding: clamp(0.8rem, 1.3vw, 1.05rem);
  background: rgba(255, 255, 255, 0.72);
}

body.page-contrast .contrast-workbench-head {
  margin-bottom: 0.65rem;
}

body.page-contrast .contrast-workbench-intro h2,
body.page-contrast .contrast-preview-section-head h2 {
  margin: 0.1rem 0 0;
  font-size: 1.08rem;
}

body.page-contrast .contrast-workbench-intro p,
body.page-contrast .contrast-preview-section-head p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 0.78rem;
}

body.page-contrast .contrast-form {
  gap: 0.55rem;
}

body.page-contrast .contrast-color-row {
  position: relative;
}

body.page-contrast .contrast-input-card,
body.page-contrast .contrast-preview-card {
  padding: 0.72rem;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface-muted);
}

body.page-contrast .contrast-input-card h3,
body.page-contrast .contrast-preview-card h3 {
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
}

body.page-contrast .contrast-input-group {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
}

body.page-contrast .contrast-input-group .form-control-color {
  width: 58px;
  min-width: 58px;
  min-height: 46px;
  padding: 0.28rem;
  border-radius: var(--ui-radius) 0 0 var(--ui-radius) !important;
}

body.page-contrast .contrast-input-group .form-control:not(.form-control-color) {
  width: 100% !important;
  min-width: 0;
  min-height: 46px;
  flex: none;
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 600;
}

body.page-contrast .contrast-swap-row {
  display: flex;
  justify-content: center;
  min-height: 34px;
  margin-block: -0.15rem;
}

body.page-contrast .contrast-swap-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.38rem 0.72rem;
  border-radius: 999px !important;
  background: var(--ui-surface-solid);
  font-size: 0.8rem;
}

body.page-contrast .contrast-swap-btn span[aria-hidden="true"] {
  font-size: 1.05rem;
  line-height: 1;
}

body.page-contrast .contrast-preview-section {
  padding-top: 0.65rem;
  border-top: 1px solid var(--ui-border);
}

body.page-contrast .contrast-preview-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

body.page-contrast .contrast-preview-head {
  margin-bottom: 0.4rem;
}

body.page-contrast .contrast-preview-box {
  min-height: 112px;
  padding: 0.8rem;
  border: 1px solid var(--ui-border-strong);
  box-shadow: none;
}

body.page-contrast .contrast-preview-box-large {
  font-size: 1.4rem;
}

body.page-contrast .contrast-result-column {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-rows: auto 1fr;
  gap: 0.8rem;
  min-width: 0;
}

body.page-contrast .contrast-result-card {
  padding: 1rem;
  border-left: 4px solid #78afff !important;
  background: #142238;
  color: #f5f8fc;
}

body.page-contrast .contrast-result-card > .contrast-input-kicker {
  margin-bottom: 0.45rem;
  color: #9bc6ff !important;
}

body.page-contrast .contrast-result-card h2 {
  margin: 0;
  font-size: 0.9rem;
  color: #d9e4f2 !important;
}

body.page-contrast .contrast-ratio-value {
  margin: 0.2rem 0 0.35rem;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  letter-spacing: 0;
  color: #ffffff !important;
}

body.page-contrast .contrast-overall-rating {
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  color: #d9e4f2 !important;
}

body.page-contrast .contrast-result-note {
  margin: 0 0 0.8rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.78rem;
  color: #cbd7e8 !important;
}

body.page-contrast .contrast-score-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

body.page-contrast .contrast-score-group h3 {
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
}

body.page-contrast .contrast-badge-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

body.page-contrast .contrast-result-card .badge {
  display: block;
  padding: 0.55rem 0.4rem;
  border-radius: 4px;
  font-size: 0.72rem;
  white-space: normal;
}

body.page-contrast .contrast-guidance-card {
  align-self: stretch;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.6);
}

body.page-contrast .contrast-guidance-kicker {
  margin-bottom: 0.55rem;
}

body.page-contrast .contrast-threshold-list {
  display: grid;
  gap: 0;
  margin: 0;
}

body.page-contrast .contrast-threshold-list > div {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--ui-border);
}

body.page-contrast .contrast-threshold-list dt,
body.page-contrast .contrast-threshold-list dd {
  margin: 0;
  font-size: 0.78rem;
}

body.page-contrast .contrast-threshold-list dd {
  color: var(--ui-muted);
}

body.page-contrast .contrast-large-text-note {
  margin: 0.5rem 0 0;
  color: var(--ui-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

body.dark-mode.page-contrast .contrast-unified-panel {
  background: var(--ui-surface) !important;
}

body.dark-mode.page-contrast .contrast-workbench,
body.dark-mode.page-contrast .contrast-guidance-card,
body.dark-mode.page-contrast .contrast-input-card,
body.dark-mode.page-contrast .contrast-preview-card,
body.dark-mode.page-contrast .contrast-swap-btn {
  background: var(--ui-surface-muted) !important;
  border-color: var(--ui-border) !important;
}

body.dark-mode.page-contrast .contrast-result-card {
  background: #101b2c !important;
}

@media (max-width: 900px) {
  body.page-contrast .contrast-unified-layout {
    grid-template-columns: 1fr;
  }

  body.page-contrast .contrast-workbench,
  body.page-contrast .contrast-result-column {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.page-contrast .contrast-result-column {
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
    grid-template-rows: auto;
  }
}

@media (max-width: 640px) {
  body.page-contrast .app-main-dashboard {
    width: min(100% - 16px, 620px);
    margin-top: 0.6rem !important;
  }

  body.page-contrast .contrast-unified-panel {
    padding: 0.65rem;
  }

  body.page-contrast .contrast-page-header,
  body.page-contrast .contrast-preview-section-head {
    display: block;
  }

  body.page-contrast .contrast-page-purpose {
    margin-top: 0.65rem;
    max-width: none;
  }

  body.page-contrast .contrast-result-column {
    grid-template-columns: 1fr;
  }

  body.page-contrast .contrast-preview-section-head > p {
    margin-top: 0.2rem;
  }

  body.page-contrast .contrast-badge-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 901px) {
  body.page-contrast {
    height: 100dvh;
    overflow: hidden;
  }

  body.page-contrast .site-footer-modern {
    display: none;
  }

  body.page-contrast .app-main-dashboard {
    height: calc(100dvh - 77px);
    margin: 0 auto !important;
    padding-block: 10px 12px;
  }

  body.page-contrast .contrast-unified-panel {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    margin: 0 !important;
    gap: 0.62rem;
    padding: 0.72rem 0.82rem;
    overflow: hidden;
  }

  body.page-contrast .contrast-page-header {
    min-height: 64px;
    padding: 0 0.15rem 0.52rem;
  }

  body.page-contrast .contrast-page-header h1 {
    margin-block: 0.05rem 0.12rem;
    font-size: clamp(1.55rem, 2vw, 1.9rem);
  }

  body.page-contrast .contrast-page-header > div > p:last-child {
    font-size: 0.78rem;
  }

  body.page-contrast .contrast-page-purpose {
    padding: 0.42rem 0.58rem;
    font-size: 0.72rem;
  }

  body.page-contrast .contrast-unified-layout {
    min-height: 0;
    height: 100%;
    gap: 0.68rem;
  }

  body.page-contrast .contrast-workbench {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    padding: 0.68rem 0.78rem;
    overflow: hidden;
  }

  body.page-contrast .contrast-workbench-head {
    margin-bottom: 0.38rem;
  }

  body.page-contrast .contrast-workbench-intro h2,
  body.page-contrast .contrast-preview-section-head h2 {
    font-size: 0.98rem;
  }

  body.page-contrast .contrast-workbench-intro p,
  body.page-contrast .contrast-preview-section-head p {
    font-size: 0.68rem;
  }

  body.page-contrast .contrast-form {
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    gap: 0.34rem;
  }

  body.page-contrast .contrast-input-card,
  body.page-contrast .contrast-preview-card {
    padding: 0.56rem 0.62rem;
  }

  body.page-contrast .contrast-input-card h3,
  body.page-contrast .contrast-preview-card h3 {
    margin-bottom: 0.34rem;
    font-size: 0.8rem;
  }

  body.page-contrast .contrast-input-kicker,
  body.page-contrast .contrast-guidance-kicker {
    font-size: 0.58rem;
  }

  body.page-contrast .contrast-input-group .form-control-color,
  body.page-contrast .contrast-input-group .form-control:not(.form-control-color) {
    min-height: 44px;
  }

  body.page-contrast .contrast-swap-row {
    min-height: 40px;
    margin-block: -0.08rem;
  }

  body.page-contrast .contrast-swap-btn {
    min-height: 44px;
    padding-block: 0.3rem;
  }

  body.page-contrast .contrast-preview-section {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    padding-top: 0.42rem;
  }

  body.page-contrast .contrast-preview-section-head {
    margin-bottom: 0.34rem;
  }

  body.page-contrast .contrast-preview-section > .row,
  body.page-contrast .contrast-preview-section > .row > [class*="col-"] {
    min-height: 0;
    height: 100%;
  }

  body.page-contrast .contrast-preview-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }

  body.page-contrast .contrast-preview-head {
    margin-bottom: 0.2rem;
  }

  body.page-contrast .contrast-preview-box {
    min-height: 76px;
    height: 100%;
    padding: 0.55rem;
  }

  body.page-contrast .contrast-result-column {
    grid-template-rows: minmax(0, 1.55fr) minmax(0, 0.8fr);
    min-height: 0;
    height: 100%;
    gap: 0.68rem;
  }

  body.page-contrast .contrast-result-card {
    min-height: 0;
    padding: 0.72rem 0.8rem;
  }

  body.page-contrast .contrast-result-card > .contrast-input-kicker {
    margin-bottom: 0.28rem;
  }

  body.page-contrast .contrast-result-card h2 {
    font-size: 0.8rem;
  }

  body.page-contrast .contrast-ratio-value {
    margin-block: 0.12rem 0.22rem;
    font-size: clamp(2.25rem, 3.5vw, 3rem);
  }

  body.page-contrast .contrast-overall-rating {
    margin-bottom: 0.22rem;
    font-size: 0.76rem;
  }

  body.page-contrast .contrast-result-note {
    margin-bottom: 0.5rem;
    padding-bottom: 0.46rem;
    font-size: 0.68rem;
  }

  body.page-contrast .contrast-score-grid {
    gap: 0.46rem;
  }

  body.page-contrast .contrast-score-group h3 {
    margin-bottom: 0.28rem;
    font-size: 0.72rem;
  }

  body.page-contrast .contrast-result-card .badge {
    padding: 0.42rem 0.3rem;
    font-size: 0.64rem;
  }

  body.page-contrast .contrast-guidance-card {
    min-height: 0;
    padding: 0.65rem 0.72rem;
    overflow: hidden;
  }

  body.page-contrast .contrast-guidance-kicker {
    margin-bottom: 0.32rem;
  }

  body.page-contrast .contrast-threshold-list > div {
    padding: 0.36rem 0;
  }

  body.page-contrast .contrast-threshold-list dt,
  body.page-contrast .contrast-threshold-list dd {
    font-size: 0.68rem;
  }

  body.page-contrast .contrast-large-text-note {
    margin-top: 0.3rem;
    font-size: 0.62rem;
  }
}

body.app-2026 .site-footer-modern {
  margin-top: 1.5rem !important;
  padding: 1.35rem 0 !important;
  background: #151d2b !important;
}

body.app-2026 .site-footer-modern .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
}

body.app-2026 .site-footer-modern p {
  margin: 0;
}

body.app-2026 .cookie-consent {
  position: fixed;
  inset: auto 16px 16px auto !important;
  width: min(460px, calc(100% - 32px));
  padding: 0.65rem !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--ui-radius);
  background: rgba(18, 26, 40, 0.96) !important;
  box-shadow: 0 18px 50px rgba(7, 12, 22, 0.34);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body.app-2026.cookie-consent-visible {
  padding-bottom: 112px;
}

body.app-2026 .cookie-consent > .d-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 0.75rem;
}

body.app-2026 .cookie-consent p {
  margin: 0 !important;
  color: #ffffff;
  font-size: 0.82rem;
  line-height: 1.4;
}

body.app-2026 .cookie-consent strong {
  display: block;
  margin-bottom: 0.15rem;
  color: #ffffff;
}

body.app-2026 .cookie-consent-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.45rem;
}

body.app-2026 .cookie-consent-actions .btn {
  flex: 0 0 auto;
}

body.app-admin-stats .shell {
  width: min(var(--ui-content), calc(100% - 32px));
  padding: 24px 0 40px;
}

body.app-admin-stats :where(.hero, .panel, .login-card, .kpi-card) {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
}

body.app-admin-stats .hero {
  align-items: center;
  border-top: 4px solid var(--ui-primary);
  box-shadow: var(--ui-shadow);
}

body.app-admin-stats .hero h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
}

body.app-admin-stats .hero > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 0.9rem;
  border: 1px solid #3979cc;
  border-radius: var(--ui-radius);
  color: #064fae;
  background: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  text-decoration: none;
}

body.app-admin-stats .login-card {
  border-left: 4px solid var(--ui-teal);
}

body.app-admin-stats input,
body.app-admin-stats button {
  min-height: 46px;
  border-radius: var(--ui-radius);
}

body.app-admin-stats button {
  background: var(--ui-primary);
  box-shadow: 0 8px 18px rgba(7, 95, 216, 0.2);
}

body.app-admin-stats button:hover {
  background: var(--ui-primary-hover);
}

body.app-admin-stats .dashboard {
  gap: 14px;
}

body.app-admin-stats :where(.kpi-grid, .grid-2, .grid-3) {
  gap: 14px;
}

body.app-admin-stats .kpi-card {
  min-height: 154px;
  display: grid;
  align-content: center;
  border-top: 4px solid var(--ui-primary);
}

body.app-admin-stats .kpi-card:nth-child(2) { border-top-color: var(--ui-teal); }
body.app-admin-stats .kpi-card:nth-child(3) { border-top-color: var(--ui-amber); }
body.app-admin-stats .kpi-card:nth-child(4) { border-top-color: #6f56b3; }

body.app-admin-stats .kpi-card::after {
  display: none;
}

body.app-admin-stats .kpi-value {
  color: var(--ui-text);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
}

body.app-admin-stats .kpi-note,
body.app-admin-stats .kpi-label,
body.app-admin-stats .lead,
body.app-admin-stats .status,
body.app-admin-stats .bar-row,
body.app-admin-stats .activity-item {
  color: var(--ui-muted);
}

body.app-admin-stats :where(.metric-item, .activity-item, .empty) {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-muted);
}

body.app-admin-stats .table-wrap {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
}

body.app-admin-stats table {
  color: var(--ui-text);
  background: var(--ui-surface-solid);
}

body.app-admin-stats th {
  color: #3f4e64;
  background: #edf3fa;
}

body.app-admin-stats th,
body.app-admin-stats td {
  border-color: var(--ui-border);
}

body.page-checklist .checklist-navbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  min-height: 68px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--ui-nav) !important;
  box-shadow: 0 10px 28px rgba(10, 16, 27, 0.18);
}

body.page-checklist .checklist-navbar .nav-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--ui-radius);
  color: #e9eef7 !important;
}

body.page-checklist :where(.hero, .panel, .metric, .criterion) {
  border-radius: var(--ui-radius) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

body.page-checklist .hero {
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

body.page-checklist .metric::before,
body.page-checklist .metric::after {
  border-radius: 0;
}

body.page-checklist .criterion {
  background: var(--ui-surface-solid);
}

body.page-checklist :where(button, input, select, textarea, .primary-action, .secondary-action) {
  min-height: 44px;
  border-radius: var(--ui-radius) !important;
}

body.dark-mode.app-2026 {
  color-scheme: dark;
  --ui-bg: #0e1520;
  --ui-bg-strong: #111b29;
  --ui-surface: rgba(20, 30, 44, 0.9);
  --ui-surface-solid: #172235;
  --ui-surface-muted: rgba(26, 38, 55, 0.9);
  --ui-text: #f1f5fb;
  --ui-muted: #b9c5d6;
  --ui-border: rgba(177, 197, 225, 0.2);
  --ui-border-strong: rgba(177, 197, 225, 0.38);
  --ui-primary: #78afff;
  --ui-primary-hover: #9ac3ff;
  background:
    linear-gradient(115deg, rgba(73, 127, 211, 0.12), transparent 36%),
    linear-gradient(245deg, rgba(33, 151, 135, 0.1), transparent 32%),
    var(--ui-bg) !important;
}

body.dark-mode.app-2026 a {
  color: #9bc6ff;
}

body.dark-mode.app-2026 a:hover {
  color: #c2dcff;
}

body.dark-mode.app-2026 :where(.audit-workspace, .audit-form-shell, .page-hero, .section-surface,
  .surface-card, .card, .wizard-result-panel, .audit-result-card, .contrast-unified-panel) {
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}

body.dark-mode.app-2026 :where(.wizard-progress li, .wizard-step-note, .engine-explainer-card,
  .wizard-help-card, .audit-review-card, .wizard-toggle-list .form-check, .wizard-result-metrics > div,
  .contrast-input-card, .contrast-preview-card, .contrast-guidance-card, .public-stat-card) {
  color: var(--ui-text) !important;
  background: var(--ui-surface-muted) !important;
  border-color: var(--ui-border) !important;
}

body.dark-mode.app-2026 .wizard-progress li.is-active,
body.dark-mode.app-2026 .wizard-choice input:checked + label {
  background: #1c3c67 !important;
  border-color: #78afff !important;
}

body.dark-mode.app-2026 .wizard-result-emoji {
  border-color: var(--ui-border);
  background: #1c2a3f;
}

body.dark-mode.app-2026 .wizard-choice label,
body.dark-mode.app-2026 .form-control,
body.dark-mode.app-2026 .form-select,
body.dark-mode.app-2026 .accordion-item,
body.dark-mode.app-2026 .accordion-button {
  color: var(--ui-text) !important;
  background: #172235 !important;
  border-color: var(--ui-border-strong) !important;
}

body.dark-mode.app-2026 .wizard-actions {
  background: rgba(20, 30, 44, 0.94);
}

body.dark-mode.app-2026 .btn-primary {
  border-color: #78afff !important;
  background: #1765c7 !important;
  color: #ffffff !important;
}

body.dark-mode.app-2026 .btn-outline-primary,
body.dark-mode.app-2026 .btn-outline-primary.btn-glass {
  border-color: #78afff !important;
  background: rgba(120, 175, 255, 0.08) !important;
  color: #c5ddff !important;
}

body.dark-mode.app-2026 .manual-audit-callout {
  border-color: #8d722a !important;
  color: #ffe9a7 !important;
  background: #362c12 !important;
}

body.dark-mode.app-2026 .table {
  color: var(--ui-text);
}

body.dark-mode.app-2026 .table thead th,
body.dark-mode.app-2026 .table-striped > tbody > tr:nth-of-type(odd) > * {
  color: var(--ui-text);
  background: #1b293d;
}

body.dark-mode.app-admin-stats :where(.hero, .panel, .login-card, .kpi-card, .metric-item, .activity-item, .empty) {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
}

body.dark-mode.app-admin-stats :where(input, table) {
  color: var(--ui-text);
  background: #172235;
  border-color: var(--ui-border-strong);
}

@media (max-width: 1100px) {
  body.page-home .home-audit-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: visible;
  }

  body.page-home .intro-panel {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
    grid-template-rows: auto auto;
    align-items: end;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  body.page-home .intro-copy,
  body.page-home .hero-link-strip {
    grid-column: 1;
  }

  body.page-home .intro-image-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: 300px;
    margin: calc(clamp(1.2rem, 2vw, 1.8rem) * -1);
    margin-left: 0;
  }

  body.page-home .audit-form-shell {
    min-height: 620px;
  }

  body.app-2026 .wizard-result-toolbar {
    max-width: none;
  }

  body.app-2026 .lighthouse-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body.app-2026 .app-main,
  body.app-2026 .site-nav .container-fluid {
    width: calc(100% - 16px);
  }

  body.app-2026 .site-nav {
    min-height: 62px;
  }

  body.app-2026 .navbar-collapse {
    margin-top: 0.65rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--ui-radius);
    background: #1c2535;
  }

  body.app-2026 .site-nav .nav-link {
    width: 100%;
  }

  body.page-home .intro-panel {
    display: block;
    padding: 0.9rem;
  }

  body.page-home .intro-panel h1 {
    margin-bottom: 0.45rem;
    font-size: 1.85rem;
  }

  body.page-home .intro-panel .lead {
    margin-bottom: 0;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  body.page-home .hero-link-strip {
    gap: 0.45rem;
    margin-top: 0.7rem;
  }

  body.page-home .hero-support-copy {
    padding: 0.58rem 0.68rem;
    font-size: 0.78rem;
  }

  body.page-home .intro-image-card {
    display: none;
  }

  body.page-home .audit-workspace {
    padding: 1rem 0.6rem 0.6rem;
  }

  body.page-home .audit-form-shell {
    min-height: 0;
    padding: 0.65rem;
  }

  body.app-2026 .wizard-progress ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.app-2026 .wizard-progress li {
    min-height: 58px;
    padding: 0.45rem 0.35rem;
  }

  body.app-2026 .wizard-progress li strong {
    font-size: 0.76rem;
  }

  body.app-2026 .wizard-actions {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  body.app-2026 .wizard-actions .btn {
    width: 100%;
  }

  body.app-2026 .wizard-result-head,
  body.app-2026 .wizard-result-restart {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  body.app-2026 .wizard-result-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  body.app-2026 .wizard-result-actions {
    display: contents;
  }

  body.app-2026 .wizard-result-toolbar .btn,
  body.app-2026 .wizard-result-actions .btn,
  body.app-2026 .wizard-result-start-again {
    width: 100%;
  }

  body.app-2026 .wizard-result-metrics,
  body.app-2026 .lighthouse-score-grid,
  .public-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .public-stat-card--ranking {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  body.app-2026 .lighthouse-score-card {
    aspect-ratio: auto;
    min-height: 170px;
  }

  body.app-2026 .audit-running {
    grid-template-columns: 1fr;
  }

  body.page-subpage .page-hero .row,
  body.page-statistics .page-hero .row,
  body.page-about .about-hero .row {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.page-subpage .page-hero img {
    width: min(180px, 100%) !important;
  }

  body.app-2026 .site-footer-modern .container {
    display: grid;
    gap: 0.45rem;
  }

  body.app-2026 .cookie-consent {
    inset: auto 8px 8px 8px !important;
    width: auto;
  }

  body.app-2026.cookie-consent-visible {
    padding-bottom: 188px;
  }

  body.app-2026 .cookie-consent > .d-flex {
    align-items: stretch !important;
    flex-direction: column;
  }

  body.app-2026 .cookie-consent p {
    font-size: 0.76rem;
    text-align: left;
  }

  body.app-2026 .cookie-consent-actions {
    width: 100%;
  }

  body.app-2026 .cookie-consent-actions .btn {
    flex: 1 1 0;
    padding-inline: 0.7rem;
  }

  body.app-admin-stats .shell {
    width: calc(100% - 16px);
    padding-top: 12px;
  }

  body.app-admin-stats .hero {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 1rem;
  }

  body.app-admin-stats .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  body.app-2026 .wizard-result-metrics,
  .public-stats-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .public-stat-card--ranking {
    grid-column: auto;
    grid-row: auto;
  }

  .public-stat-card .common-violations {
    grid-template-columns: 1fr;
  }

  .public-stat-card .common-violation-description {
    display: block;
    overflow: visible;
  }

  body.app-2026 .lighthouse-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-2026 .lighthouse-score-card {
    min-height: 132px;
    padding: 0.7rem;
  }

  body.app-2026 .lighthouse-score-card .score-ring {
    width: 72px;
    height: 72px;
  }

  body.app-2026 .wizard-actions {
    grid-template-columns: 1fr;
  }

  body.app-admin-stats .kpi-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 720px) and (min-width: 1101px) {
  body.page-home .home-audit-layout {
    min-height: 0;
  }

  body.page-home .audit-form-shell {
    min-height: 540px;
  }

  body.page-home .intro-image-card img {
    min-height: 220px;
  }
}

/* Desktop command-centre layout: the complete audit flow fits in one viewport. */
@media (min-width: 1101px) {
  body.page-home {
    height: 100dvh;
  }

  body.page-home:not(.has-audit-result) {
    overflow: hidden;
  }

  body.page-home .site-nav {
    min-height: 62px;
  }

  body.page-home .app-main-home {
    height: calc(100dvh - 94px);
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  body.page-home .home-audit-layout {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(300px, 0.285fr) minmax(0, 0.715fr);
    border-top: 3px solid var(--ui-primary) !important;
    box-shadow: 0 22px 54px rgba(28, 43, 67, 0.16);
  }

  body.page-home .intro-panel {
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0.72rem;
    padding: 1rem 1.15rem;
    background:
      linear-gradient(150deg, rgba(28, 42, 61, 0.98), rgba(15, 28, 42, 0.99)),
      #142033;
  }

  body.page-home .intro-panel h1 {
    max-width: 9ch;
    margin-bottom: 0.55rem;
    font-size: clamp(2.1rem, 2.6vw, 2.8rem);
    line-height: 1;
  }

  body.page-home .intro-panel .lead {
    margin-bottom: 0;
    font-size: 0.86rem;
    line-height: 1.48;
  }

  body.page-home .hero-link-strip {
    gap: 0.42rem;
  }

  body.page-home .hero-support-copy {
    min-height: 40px;
    padding: 0.5rem 0.62rem;
    font-size: 0.76rem;
    background: rgba(255, 255, 255, 0.075);
  }

  body.page-home .intro-image-card {
    margin: 0 -1.15rem -1rem;
    border-top: 2px solid rgba(46, 196, 172, 0.48);
  }

  body.page-home .intro-image-card img {
    min-height: 0;
    object-position: center 42%;
  }

  body.page-home .audit-workspace {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0.82rem 0.95rem;
    background: rgba(246, 249, 253, 0.72) !important;
  }

  body.page-home .audit-form-header {
    margin-bottom: 0.48rem;
  }

  body.page-home .audit-form-header > div {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
  }

  body.page-home .audit-form-header .section-kicker {
    width: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.28rem 0.48rem;
    border: 1px solid #b9cce5;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    font-size: 0.64rem;
  }

  body.page-home .audit-form-header h2 {
    margin: 0;
    font-size: clamp(1.45rem, 1.75vw, 1.9rem);
  }

  body.page-home .audit-form-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0.62rem;
    border-top: 3px solid var(--ui-teal) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 12px 28px rgba(31, 48, 72, 0.09);
  }

  body.page-home .audit-wizard {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 0.4rem;
  }

  body.page-home .wizard-progress {
    gap: 0.28rem;
  }

  body.page-home .wizard-progress ol {
    gap: 0.32rem;
  }

  body.page-home .wizard-progress li {
    min-height: 42px;
    padding: 0.32rem 0.45rem;
    border-radius: 6px;
    font-size: 0.82rem;
  }

  body.page-home .wizard-progress li span {
    width: 23px;
    min-width: 23px;
    height: 23px;
    font-size: 0.76rem;
  }

  body.page-home .wizard-progress-track {
    height: 5px;
  }

  body.page-home .wizard-step {
    min-height: 0;
    overflow: auto;
    align-content: start;
    gap: 0.45rem;
    padding: 0.18rem 0.42rem 0.18rem 0.72rem;
    border-left: 3px solid var(--ui-teal);
    scrollbar-gutter: stable;
  }

  body.page-home .wizard-step-head h3 {
    font-size: clamp(1.08rem, 1.2vw, 1.3rem);
  }

  body.page-home .wizard-step-head p:last-child {
    font-size: 0.82rem;
  }

  body.page-home .wizard-field-stack {
    gap: 0.48rem;
  }

  body.page-home .wizard-step-note {
    grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.68rem;
    font-size: 0.78rem;
  }

  body.page-home .wizard-choice label {
    min-height: 94px;
    padding-top: 0.68rem;
    padding-bottom: 0.68rem;
    border-radius: 6px;
  }

  body.page-home .engine-explainer-card,
  body.page-home .wizard-help-card,
  body.page-home .audit-review-card,
  body.page-home .wizard-toggle-list .form-check {
    border-radius: 6px !important;
  }

  body.page-home .wizard-actions {
    position: static;
    min-height: 50px;
    margin-top: 0;
    padding-top: 0.42rem;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.page-home .wizard-actions .btn {
    min-width: 112px;
    min-height: 42px;
    padding-block: 0.48rem;
  }

  body.page-home .wizard-result-panel {
    max-height: 100%;
    overflow: auto;
    gap: 0.58rem;
    padding: 0.68rem;
  }

  body.page-home .wizard-result-head {
    gap: 0.62rem;
    padding-bottom: 0.52rem;
  }

  body.page-home .wizard-result-head h3 {
    margin-bottom: 0.12rem;
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  }

  body.page-home .wizard-result-head p:not(.section-kicker) {
    font-size: 0.76rem;
    line-height: 1.4;
  }

  body.page-home .wizard-result-emoji {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
  }

  body.page-home .wizard-result-toolbar {
    gap: 0.36rem;
  }

  body.page-home .wizard-result-action {
    min-height: 44px;
    padding: 0.38rem 0.62rem;
    font-size: 0.72rem;
  }

  body.page-home .wizard-result-metrics > div {
    min-height: 66px;
    padding: 0.55rem 0.62rem;
  }

  body.page-home .wizard-result-metrics strong {
    font-size: 1.18rem;
  }

  body.page-home .lighthouse-score-card {
    min-height: 132px;
    aspect-ratio: auto;
    padding: 0.72rem;
  }

  body.page-home .manual-audit-callout {
    padding: 0.44rem 0.56rem;
  }

  body.page-home .wizard-result-restart {
    padding-top: 0.08rem;
  }

  body.page-home .wizard-result-start-again {
    min-width: 148px;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    font-size: 0.76rem;
  }

  body.page-home .site-footer-modern {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.app-2026 :where(.site-nav, .home-audit-layout, .page-hero, .section-surface, .surface-card,
    .audit-form-shell, .wizard-result-panel, .cookie-consent) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--ui-surface-solid) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-2026 *,
  body.app-2026 *::before,
  body.app-2026 *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  body.app-2026 :where(.home-audit-layout, .page-hero, .section-surface, .surface-card, .audit-form-shell,
    .wizard-progress li, .wizard-choice label, .wizard-result-panel, .card, .btn) {
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }
}