/* style.css — Splitify v3.1 */

/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {
  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* Spacing (4px grid) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Font families */
  --font-display: 'DM Serif Display', 'Georgia', serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;
}

/* ============================================
   LIGHT MODE — Splitify Navy & Orange
   ============================================ */
:root, [data-theme="light"] {
  --color-bg:             #F5F5F2;
  --color-surface:        #FAFAF8;
  --color-surface-2:      #FFFFFF;
  --color-surface-offset: #EDECEA;
  --color-surface-offset-2: #E5E3E0;
  --color-surface-dynamic: #DDD9D2;
  --color-divider:        #D1CEC8;
  --color-border:         #C4C0B8;

  --color-text:           #1B3A5C;
  --color-text-muted:     #506478;
  --color-text-faint:     #9CA3AF;
  --color-text-inverse:   #FAFAFA;

  --color-primary:        #1B3A5C;
  --color-primary-hover:  #244D77;
  --color-primary-active: #0F2640;
  --color-primary-highlight: #D4E0EE;

  --color-accent:         #F5841F;
  --color-accent-hover:   #E07518;
  --color-accent-active:  #C86610;
  --color-accent-highlight: #FDE8D2;

  --color-success:        #2D7A3E;
  --color-success-hover:  #1E5F2B;
  --color-success-active: #14451F;
  --color-success-highlight: #D4EDD8;

  --color-error:          #B33A3A;
  --color-error-hover:    #8E2828;
  --color-error-active:   #6B1D1D;
  --color-error-highlight: #F0D4D4;

  --color-warning:        #E8920A;
  --color-warning-hover:  #CC7E00;
  --color-warning-active: #A86800;
  --color-warning-highlight: #FFF3DD;

  --color-info:           #2B6CB0;
  --color-info-hover:     #1E5290;
  --color-info-active:    #143A68;
  --color-info-highlight: #D0E0F0;

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 250 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.02 250 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.02 250 / 0.12);
}

/* ============================================
   DARK MODE
   ============================================ */
[data-theme="dark"] {
  --color-bg:             #0F1520;
  --color-surface:        #161D2C;
  --color-surface-2:      #1C2538;
  --color-surface-offset: #141B28;
  --color-surface-offset-2: #1A2235;
  --color-surface-dynamic: #243044;
  --color-divider:        #2A3550;
  --color-border:         #354060;

  --color-text:           #E0DDD8;
  --color-text-muted:     #8A90A0;
  --color-text-faint:     #555C70;
  --color-text-inverse:   #0F1520;

  --color-primary:        #7B9BD4;
  --color-primary-hover:  #5A80C2;
  --color-primary-active: #4068A8;
  --color-primary-highlight: #1E2A40;

  --color-accent:         #F5A050;
  --color-accent-hover:   #F5841F;
  --color-accent-active:  #E07518;
  --color-accent-highlight: #2A2010;

  --color-success:        #5EAA6E;
  --color-success-hover:  #408F50;
  --color-success-active: #2D7A3E;
  --color-success-highlight: #1A2A1E;

  --color-error:          #D06060;
  --color-error-hover:    #C04848;
  --color-error-active:   #A83838;
  --color-error-highlight: #2A1818;

  --color-warning:        #E89E44;
  --color-warning-hover:  #D08530;
  --color-warning-active: #B87020;
  --color-warning-highlight: #2A2010;

  --color-info:           #5A9AD8;
  --color-info-hover:     #4080C0;
  --color-info-active:    #3068A0;
  --color-info-highlight: #182030;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0F1520; --color-surface: #161D2C; --color-surface-2: #1C2538;
    --color-surface-offset: #141B28; --color-surface-offset-2: #1A2235;
    --color-surface-dynamic: #243044; --color-divider: #2A3550; --color-border: #354060;
    --color-text: #E0DDD8; --color-text-muted: #8A90A0; --color-text-faint: #555C70;
    --color-text-inverse: #0F1520;
    --color-primary: #7B9BD4; --color-primary-hover: #5A80C2; --color-primary-active: #4068A8;
    --color-primary-highlight: #1E2A40;
    --color-accent: #D4BA6A; --color-accent-hover: #E0C97A; --color-accent-active: #C8A951;
    --color-accent-highlight: #2A2518;
    --color-success: #5EAA6E; --color-success-hover: #408F50; --color-success-active: #2D7A3E;
    --color-success-highlight: #1A2A1E;
    --color-error: #D06060; --color-error-hover: #C04848; --color-error-active: #A83838;
    --color-error-highlight: #2A1818;
    --color-warning: #E89E44; --color-warning-hover: #D08530; --color-warning-active: #B87020;
    --color-warning-highlight: #2A2010;
    --color-info: #5A9AD8; --color-info-hover: #4080C0; --color-info-active: #3068A0;
    --color-info-highlight: #182030;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
  }
}

/* ============================================
   LAYOUT
   ============================================ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 64px;
}
@media (min-width: 768px) {
  .app-header { padding: var(--space-3) var(--space-8); }
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-header__logo {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
  flex-shrink: 0;
}

.app-header__logo-img {
  height: 44px;
  width: auto;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  object-fit: contain;
}
@media (min-width: 768px) {
  .app-header__logo-img { height: 52px; }
}

.app-header__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .app-header__title { font-size: var(--text-lg); }
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-header__link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--transition-interactive), background var(--transition-interactive);
  display: none;
}
.app-header__link:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
@media (min-width: 768px) {
  .app-header__link { display: inline-flex; align-items: center; gap: var(--space-2); }
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background var(--transition-interactive), color var(--transition-interactive);
}
.theme-toggle:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

/* Main content area */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wizard-container {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
  width: 100%;
}
@media (min-width: 768px) {
  .wizard-container {
    padding: var(--space-12) var(--space-4);
    max-width: 720px;
  }
}

/* ============================================
   PROGRESS RING & BAR
   ============================================ */
.progress-section {
  padding: var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  display: none;
}
.progress-section.active {
  display: block;
}

.progress-inner {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.progress-ring-container {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}

.progress-ring {
  transform: rotate(-90deg);
  width: 52px;
  height: 52px;
}

.progress-ring__bg {
  fill: none;
  stroke: var(--color-surface-offset);
  stroke-width: 3;
}

.progress-ring__fill {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 500ms var(--ease-out);
}

.progress-ring__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
}

.progress-bar-track {
  flex: 1;
  height: 4px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width 500ms var(--ease-out);
}

.progress-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-width: fit-content;
  display: none;
}
@media (min-width: 768px) {
  .progress-label { display: block; }
}

/* ============================================
   STEP INDICATOR (Large animated ring)
   ============================================ */
.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-8);
}

.step-ring-container {
  position: relative;
  width: 88px;
  height: 88px;
  margin-bottom: var(--space-4);
}

.step-ring {
  width: 88px;
  height: 88px;
  transform: rotate(-90deg);
}

.step-ring__bg {
  fill: none;
  stroke: var(--color-surface-offset);
  stroke-width: 3;
}

.step-ring__fill {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 800ms var(--ease-out);
}

.step-ring__number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
}

.step-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-align: center;
  margin-bottom: var(--space-2);
}

.step-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 50ch;
}

/* ============================================
   WIZARD STEPS
   ============================================ */
.wizard-step {
  display: none;
  animation: fadeIn 300ms var(--ease-out) both;
}
.wizard-step.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Used by sub-components (not wizard-step, to avoid clip-path blocking input) */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    clip-path: inset(4% 0 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fadeSlideOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ============================================
   LANDING / INTRO (STEP 0)
   ============================================ */
.landing-hero {
  text-align: center;
  padding: var(--space-8) 0 var(--space-6);
}

.landing-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-accent-highlight);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 500;
  margin-bottom: var(--space-6);
  letter-spacing: 0.02em;
}
[data-theme="dark"] .landing-hero__badge {
  background: var(--color-accent-highlight);
  color: var(--color-accent);
}

.landing-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  line-height: 1.1;
}

.landing-hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.landing-hero__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-inline: auto;
}

/* Track cards */
.track-cards {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 600px) {
  .track-cards { grid-template-columns: repeat(3, 1fr); }
}

.track-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: left;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 180px;
}
.track-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.track-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.track-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.track-card__icon--a { background: var(--color-primary-highlight); color: var(--color-primary); }
.track-card__icon--b { background: var(--color-info-highlight); color: var(--color-info); }
.track-card__icon--c { background: var(--color-accent-highlight); color: var(--color-accent); }
.track-card__icon--d { background: rgba(168, 85, 247, 0.1); color: #a855f7; }

.track-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.2;
}

.track-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
}

.track-card__arrow {
  color: var(--color-accent);
  align-self: flex-end;
  transition: transform var(--transition-interactive);
}
.track-card:hover .track-card__arrow {
  transform: translateX(4px);
}

/* Disclaimer */
.disclaimer {
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  line-height: 1.6;
}

/* ============================================
   QUESTION COMPONENTS
   ============================================ */
.question-block {
  margin-bottom: var(--space-8);
}

.question-label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  line-height: 1.3;
}

/* Option buttons (Ja/Nee style) */
.option-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.option-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text);
  text-align: left;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), box-shadow var(--transition-interactive);
  min-height: 52px;
  cursor: pointer;
  width: 100%;
}
.option-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.option-btn.selected {
  border-color: var(--color-accent);
  background: var(--color-accent-highlight);
  font-weight: 500;
}
.option-btn:active {
  background: var(--color-surface-offset);
}

.option-btn__radio {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.option-btn.selected .option-btn__radio {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
.option-btn.selected .option-btn__radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: white;
}

/* Dropdown / Select */
.select-wrapper {
  position: relative;
}

.custom-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-10);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--text-base);
  color: var(--color-text);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
  min-height: 52px;
}
.custom-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
  outline: none;
}

.select-arrow {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* Numeric input */
.numeric-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.numeric-input {
  flex: 1;
  max-width: 180px;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
  min-height: 52px;
}
.numeric-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
  outline: none;
}
.numeric-input.valid { border-color: var(--color-success); }
.numeric-input.invalid { border-color: var(--color-error); }

.numeric-suffix {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-weight: 500;
}

.numeric-feedback {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.numeric-feedback.ok { color: var(--color-success); }
.numeric-feedback.bad { color: var(--color-error); }

/* Info tooltip */
.info-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-info);
  background: none;
  border: none;
  cursor: pointer;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-interactive);
}
.info-toggle:hover {
  background: var(--color-info-highlight);
}

.info-panel {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-info-highlight);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
}
.info-panel.open {
  display: block;
  animation: fadeSlideIn 300ms var(--ease-out) both;
}

.info-panel h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.info-panel ul {
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}
.info-panel li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* Neighborhood status indicator */
.neighborhood-status {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
}
.neighborhood-status.green { color: var(--color-success); }
.neighborhood-status.red { color: var(--color-error); }
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.status-dot.green { background: var(--color-success); }
.status-dot.red { background: var(--color-error); }

/* ============================================
   NAVIGATION BUTTONS
   ============================================ */
.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--transition-interactive), color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
  min-height: 48px;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-surface-offset);
  border-color: var(--color-text-muted);
}

.btn-accent {
  background: var(--color-accent);
  color: #1B2A4A;
}
.btn-accent:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  padding: var(--space-3) var(--space-4);
}
.btn-ghost:hover {
  background: var(--color-primary-highlight);
}

/* ============================================
   RESULT PAGE
   ============================================ */
.result-section {
  animation: fadeSlideIn 500ms var(--ease-out) both;
}

/* Verdict badge */
.verdict-container {
  text-align: center;
  margin-bottom: var(--space-8);
}

.verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-2xl);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
}
.verdict-badge--green {
  background: var(--color-success-highlight);
  color: var(--color-success);
  border: 2px solid var(--color-success);
}
.verdict-badge--red {
  background: var(--color-error-highlight);
  color: var(--color-error);
  border: 2px solid var(--color-error);
}
.verdict-badge--orange {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
  border: 2px solid var(--color-warning);
}
.verdict-badge--blue {
  background: var(--color-info-highlight);
  color: var(--color-info);
  border: 2px solid var(--color-info);
}

.verdict-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Result blocks */
.result-block {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.result-block__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.result-block__title svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

/* Checklist items */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.checklist-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.checklist-icon.check { color: var(--color-success); }
.checklist-icon.cross { color: var(--color-error); }
.checklist-icon.warn { color: var(--color-warning); }
.checklist-icon.info { color: var(--color-info); }

/* Warning card */
.warning-card {
  background: var(--color-warning-highlight);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.warning-card svg { flex-shrink: 0; color: var(--color-warning); margin-top: 2px; }

/* Info card */
.info-card {
  background: var(--color-info-highlight);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.info-card svg { flex-shrink: 0; color: var(--color-info); margin-top: 2px; }

/* Cost table */
.cost-table {
  width: 100%;
  font-size: var(--text-sm);
}
.cost-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-divider);
}
.cost-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.cost-table td:last-child {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}
.cost-table tr:last-child td {
  font-weight: 700;
  border-bottom: none;
  border-top: 2px solid var(--color-divider);
}

/* Timeline */
.timeline-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 4px;
}
.timeline-line {
  width: 2px;
  flex-shrink: 0;
  margin-left: 5px;
  background: var(--color-divider);
}
.timeline-content h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.timeline-content p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Legal reference */
.legal-ref {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  display: inline-block;
  margin-bottom: var(--space-2);
  margin-right: var(--space-2);
}

/* Next steps */
.next-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.next-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
}
.next-step__number {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
}

/* ============================================
   STOP RESULT (immediate block)
   ============================================ */
.stop-result {
  text-align: center;
  padding: var(--space-8) 0;
}

.stop-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-6);
  background: var(--color-error-highlight);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-error);
}

.stop-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-error);
  margin-bottom: var(--space-4);
}

.stop-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* Samenvoegen immediate result */
.info-result {
  text-align: center;
  padding: var(--space-8) 0;
}

.info-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-6);
  background: var(--color-success-highlight);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-success);
}

.info-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-success);
  margin-bottom: var(--space-4);
}

.info-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 55ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* ============================================
   APP FOOTER
   ============================================ */
.app-footer {
  margin-top: auto;
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--color-divider);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.8;
}
.app-footer a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-divider);
  text-underline-offset: 3px;
  transition: color var(--transition-interactive);
}
.app-footer a:hover {
  color: var(--color-text);
}

/* ============================================
   ABOUT MODAL
   ============================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: oklch(0.15 0.02 250 / 0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal-overlay.open {
  display: flex;
  animation: fadeIn 200ms var(--ease-out);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  animation: modalIn 300ms var(--ease-out);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}
.modal__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.modal__body p {
  margin-bottom: var(--space-4);
}
.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  transition: background var(--transition-interactive);
}
.modal__close:hover {
  background: var(--color-surface-offset);
}

/* ============================================
   REGIME TOGGLE
   ============================================ */
.regime-toggle-container {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.regime-toggle {
  display: inline-flex;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
  margin-bottom: var(--space-3);
}

.regime-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition-interactive), color var(--transition-interactive), box-shadow var(--transition-interactive);
  min-height: 40px;
  white-space: nowrap;
}
.regime-btn:hover {
  color: var(--color-text);
  background: var(--color-surface-offset-2);
}
.regime-btn.active {
  background: var(--color-surface-2);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.regime-btn.active[data-regime="toekomstig"] {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}
.regime-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.regime-toggle__caption {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  max-width: 48ch;
  margin-inline: auto;
  line-height: 1.5;
}

/* ============================================
   DRAFT BANNER
   ============================================ */
.draft-banner {
  background: var(--color-warning-highlight);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}
.draft-banner svg {
  flex-shrink: 0;
  color: var(--color-warning);
  margin-top: 1px;
}
.draft-banner--landing {
  text-align: left;
  margin-top: var(--space-4);
  max-width: 56ch;
  margin-inline: auto;
}

/* Header regime indicator */
.header-regime-indicator {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-warning-highlight);
  color: var(--color-warning);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.header-regime-indicator.visible {
  display: inline-flex;
}
.header-regime-indicator svg {
  width: 12px;
  height: 12px;
}

/* Verdict regime tag */
.verdict-regime-tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-warning);
  color: white;
  margin-left: var(--space-2);
}

/* Compare hint */
.compare-hint {
  text-align: center;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Landing badge draft state */
.landing-hero__badge--draft {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}

/* ============================================
   ENERGY LABELS
   ============================================ */
.energy-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  color: white;
  line-height: 1;
}
.energy-label--a { background: #1E8C45; }
.energy-label--b { background: #3FAD2B; }
.energy-label--c { background: #C8D100; color: #333; }
.energy-label--d { background: #FFBD00; color: #333; }
.energy-label--e { background: #F25C2A; }

/* Cell highlight for comparison table */
.cell-active {
  color: var(--color-success);
  font-weight: 500;
}

/* ============================================
   SELECT GROUP HEADINGS
   ============================================ */
optgroup {
  font-weight: 600;
  font-size: var(--text-sm);
}

/* ============================================
   v3.0 — ADDRESS SEARCH / AUTOCOMPLETE
   ============================================ */
.address-search-section {
  text-align: center;
  margin-bottom: var(--space-8);
}

.address-search-wrapper {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
  text-align: left;
  z-index: 5;
}

.address-input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  padding-left: var(--space-12);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  font-size: var(--text-base);
  font-size: 16px; /* Prevent iOS zoom on focus */
  color: var(--color-text);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
  min-height: 56px;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  cursor: text;
  /* Ensure clickable in iframes */
  position: relative;
  z-index: 2;
}
.address-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-highlight);
  outline: none;
}
.address-input::placeholder {
  color: var(--color-text-faint);
}

.address-search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  pointer-events: none;
}

.address-spinner {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-divider);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
  animation: spin 600ms linear infinite;
  display: none;
}
.address-spinner.active { display: block; }

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
.autocomplete-dropdown.open { display: block; }

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-interactive);
  font-size: var(--text-sm);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.highlighted {
  background: var(--color-primary-highlight);
}
.autocomplete-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}
.autocomplete-item__text {
  flex: 1;
  min-width: 0;
}
.autocomplete-item__main {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-item__sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Funda-style type-specific icon colors */
.autocomplete-item__icon--buurt,
.autocomplete-item__icon--wijk {
  background: oklch(0.92 0.04 140);
  color: oklch(0.45 0.12 140);
}
.autocomplete-item__icon--weg {
  background: oklch(0.92 0.04 240);
  color: oklch(0.45 0.12 240);
}
.autocomplete-item__icon--postcode {
  background: oklch(0.92 0.04 300);
  color: oklch(0.45 0.12 300);
}

/* Arrow badge for drill-down items */
.autocomplete-item__badge {
  flex-shrink: 0;
  color: var(--color-text-faint);
  opacity: 0.5;
  transition: opacity var(--transition-interactive);
}
.autocomplete-item:hover .autocomplete-item__badge {
  opacity: 1;
  color: var(--color-primary);
}

/* Highlighted text from PDOK (bold matches) */
.autocomplete-item__main b {
  font-weight: 700;
  color: var(--color-primary);
}

/* Back button for expand/drill-down mode */
.suggest-back-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-interactive);
  user-select: none;
}
.suggest-back-btn:hover {
  background: var(--color-primary-highlight);
}
.suggest-back-btn svg {
  flex-shrink: 0;
}

.address-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) auto;
  max-width: 480px;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}
.address-divider::before,
.address-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}

.btn-skip-address {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-divider);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.btn-skip-address:hover {
  color: var(--color-text);
  border-color: var(--color-border);
  background: var(--color-surface-offset);
}

/* ============================================
   v3.0 — WONINGPASPOORT CARD
   ============================================ */
.woningpaspoort {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
  animation: fadeSlideIn 400ms var(--ease-out) both;
}

/* Pandoverzicht — multi-unit kaart */
.pand-overzicht {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
  animation: fadeSlideIn 400ms var(--ease-out) both;
  animation-delay: 100ms;
}
.pand-overzicht__header {
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--color-primary) 0%, #2a4f7a 100%);
  color: var(--color-text-inverse);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.pand-overzicht__header h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
}
.pand-overzicht__body {
  padding: var(--space-4) var(--space-5);
}
.pand-unit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.pand-unit-th {
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-border);
}
.pand-unit-th--right {
  text-align: right;
}
.pand-unit-cell {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}
.pand-unit-cell--right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pand-unit-row--current {
  background: rgba(245, 132, 31, 0.06);
}
.pand-unit-row--current td {
  font-weight: 500;
}
.pand-overzicht__advies {
  margin-top: var(--space-4);
}

.woningpaspoort__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.woningpaspoort__header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.woningpaspoort__header h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-inverse);
  line-height: 1.2;
}

[data-theme="dark"] .woningpaspoort__header {
  background: var(--color-surface-dynamic);
}
[data-theme="dark"] .woningpaspoort__header h3,
[data-theme="dark"] .woningpaspoort__header {
  color: var(--color-text);
}

.woningpaspoort__body {
  padding: var(--space-5);
}

.woningpaspoort__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.woningpaspoort__label {
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.woningpaspoort__value {
  color: var(--color-text);
  font-weight: 400;
}

.woningpaspoort__sub {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}

.woningpaspoort__sub-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.woningpaspoort__sub-content {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Risk badges */
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.risk-badge--low {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.risk-badge--medium {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.risk-badge--high {
  background: var(--color-error-highlight);
  color: var(--color-error);
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.status-badge--green {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.status-badge--orange {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.status-badge--red {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.status-badge--blue {
  background: rgba(27, 58, 92, 0.1);
  color: var(--splitify-navy);
}
.status-badge--grey {
  background: rgba(128, 128, 128, 0.12);
  color: var(--color-text-muted);
}

/* Bekendmaking list */
.bekendmaking-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* WKPB items */
.wkpb-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.wkpb-alert {
  background: rgba(220, 53, 69, 0.08);
  border-left: 3px solid var(--color-error);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.wkpb-item {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background: rgba(0,0,0,0.01);
  transition: border-color var(--transition-interactive);
}
.wkpb-item--handhaving {
  border-color: rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.03);
}
.wkpb-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.wkpb-item__icon {
  flex-shrink: 0;
  font-size: var(--text-sm);
}
.wkpb-item__code {
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.wkpb-item--handhaving .wkpb-item__code {
  background: rgba(220, 53, 69, 0.12);
  color: var(--color-error);
}
.wkpb-item__label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.wkpb-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-1);
  font-size: 0.65rem;
  color: var(--color-text-faint);
}
.wkpb-item__warning {
  margin-top: var(--space-1);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-error);
}

/* Dark mode WKPB */
[data-theme="dark"] .wkpb-item {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
[data-theme="dark"] .wkpb-item--handhaving {
  border-color: rgba(220, 53, 69, 0.35);
  background: rgba(220, 53, 69, 0.06);
}
[data-theme="dark"] .wkpb-item__code {
  background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .wkpb-item--handhaving .wkpb-item__code {
  background: rgba(220, 53, 69, 0.2);
}
[data-theme="dark"] .wkpb-alert {
  background: rgba(220, 53, 69, 0.12);
}

.bekendmaking-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.bekendmaking-item a {
  color: var(--color-info);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-interactive);
}
.bekendmaking-item a:hover {
  text-decoration-color: var(--color-info);
}

/* Legalisatie banner */
.legalisatie-banner {
  background: var(--color-warning-highlight);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.legalisatie-banner__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}

.legalisatie-banner__desc {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.legalisatie-scenarios {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.legalisatie-scenarios.open { display: block; }

.legalisatie-scenarios ol {
  padding-left: var(--space-5);
  margin-top: var(--space-2);
}
.legalisatie-scenarios li {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.legalisatie-scenarios li strong {
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* Auto-filled indicator */
.autofill-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: 500;
  margin-left: var(--space-2);
}

/* Skeleton loader */
.skeleton {
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--color-surface-offset-2), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton-line {
  height: 16px;
  margin-bottom: var(--space-2);
}
.skeleton-line--short { width: 60%; }
.skeleton-line--medium { width: 80%; }
.skeleton-line--long { width: 100%; }
.skeleton-block {
  height: 80px;
  margin-bottom: var(--space-3);
}

/* Loading card */
.loading-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

/* Timestamp */
.check-timestamp {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  margin-top: var(--space-4);
  font-variant-numeric: tabular-nums;
}

/* Print button */
.btn-print {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.btn-print:hover {
  background: var(--color-surface-offset-2);
  color: var(--color-text);
}

/* ============================================
   v3.1 — DRAFT BANNER NEW LAW VARIANT
   ============================================ */
.draft-banner--newlaw {
  background: var(--color-info-highlight);
  border-color: var(--color-info);
}
.draft-banner--newlaw svg {
  color: var(--color-info);
}

/* ============================================
   v3.1 — SITUATIEBEPALING MODULE
   ============================================ */
.situatie-block {
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
  animation: fadeSlideIn 400ms var(--ease-out) both;
  border: 2px solid var(--color-border);
}
.situatie-block--groen {
  border-color: var(--color-success);
}
.situatie-block--oranje {
  border-color: var(--color-warning);
}
.situatie-block--rood {
  border-color: var(--color-error);
}

.situatie-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-3);
}
.situatie-block--groen .situatie-header { background: var(--color-success-highlight); }
.situatie-block--oranje .situatie-header { background: var(--color-warning-highlight); }
.situatie-block--rood .situatie-header { background: var(--color-error-highlight); }

.situatie-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
}
.situatie-badge--groen { color: var(--color-success); }
.situatie-badge--oranje { color: var(--color-warning); }
.situatie-badge--rood { color: var(--color-error); }
.situatie-badge svg { flex-shrink: 0; }

.situatie-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.situatie-body {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
}

.situatie-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.situatie-item:last-child {
  border-bottom: none;
}

.situatie-item__label {
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
  min-width: 100px;
}

.situatie-item__value {
  color: var(--color-text);
  text-align: right;
  flex: 1;
}
.situatie-item--green .situatie-item__value { color: var(--color-success); font-weight: 500; }
.situatie-item--orange .situatie-item__value { color: var(--color-warning); font-weight: 500; }
.situatie-item--red .situatie-item__value { color: var(--color-error); font-weight: 500; }

.situatie-recs {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.situatie-recs strong {
  color: var(--color-text);
  font-size: var(--text-sm);
}
.situatie-recs ol {
  padding-left: var(--space-5);
  margin-top: var(--space-2);
}
.situatie-recs li {
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .situatie-item {
    flex-direction: column;
    gap: var(--space-1);
  }
  .situatie-item__value {
    text-align: left;
  }
}

/* ============================================
   v3.1 — RUIMTELIJKE PLANNEN BLOCK
   ============================================ */
.rp-block {
  margin-top: var(--space-4);
}

.rp-plan-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.rp-plan-item {
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
}
.rp-plan-item strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.rp-plan-meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.btn-rp-viewer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-info);
  background: var(--color-info-highlight);
  border: 1px solid var(--color-info);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.btn-rp-viewer:hover {
  background: var(--color-info);
  color: white;
}

/* ============================================
   v3.1 — WKPB KADASTER BRONDOCUMENT BLOCK
   ============================================ */
.kadaster-block {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-accent-highlight) 0%, var(--color-surface) 100%);
}

.kadaster-block__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.kadaster-block__header svg {
  color: var(--color-accent);
  flex-shrink: 0;
}
.kadaster-block__header h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text);
}

.kadaster-block__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.kadaster-block__costs {
  margin-bottom: var(--space-3);
}

.kadaster-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-divider);
}
.kadaster-cost-row:last-child {
  border-bottom: none;
}
.kadaster-cost-row--total {
  font-weight: 600;
  color: var(--color-text);
}

.kadaster-cost-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.kadaster-block__service {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.btn-kadaster-order {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #1B2A4A;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  border: none;
  cursor: pointer;
  transition: all var(--transition-interactive);
  box-shadow: 0 2px 8px oklch(from var(--color-accent) l c h / 0.3);
  min-height: 48px;
}
.btn-kadaster-order:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px oklch(from var(--color-accent) l c h / 0.4);
}
.btn-kadaster-order:active {
  transform: translateY(0);
}
.btn-kadaster-order svg {
  flex-shrink: 0;
}

[data-theme="dark"] .kadaster-block {
  background: linear-gradient(135deg, var(--color-accent-highlight) 0%, var(--color-surface-2) 100%);
}
[data-theme="dark"] .btn-kadaster-order {
  color: #0F1520;
}

/* ============================================
   PRINT STYLESHEET
   ============================================ */
@media print {
  .app-header,
  .progress-section,
  .app-footer,
  .theme-toggle,
  .btn,
  .btn-print,
  .compare-hint,
  .disclaimer,
  .modal-overlay,
  .regime-toggle-container,
  .draft-banner--landing,
  .info-toggle,
  .address-search-section,
  .btn-skip-address { display: none !important; }

  body { background: white; color: #1B2A4A; }
  .wizard-container { max-width: 100%; padding: 0; }
  .result-block { border: 1px solid #ccc; break-inside: avoid; }
  .woningpaspoort { break-inside: avoid; }
  .situatie-block { break-inside: avoid; }
  .kadaster-block { break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .woningpaspoort__header { background: #1B2A4A !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .verdict-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .risk-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .status-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #1B2A4A;
  }
  .print-header h1 {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 24px;
    color: #1B2A4A;
  }
  .print-header p {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
  }
}

.print-header { display: none; }

/* ============================================
   AUTOMATISERING: PARKEERDRUK, ENERGIELABEL,
   MONUMENT, STADSGEZICHT
   ============================================ */

/* Energielabel badge (large, in woningpaspoort / question steps) */
.energielabel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  color: white;
  line-height: 1;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Energielabel card (in question step) */
.energielabel-card {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.energielabel-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.energielabel-card__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.energielabel-card__link {
  font-size: var(--text-xs);
  color: var(--color-info);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.energielabel-card__link:hover {
  text-decoration: underline;
}

/* Parkeerdruk bar */
.parkeerdruk-bar-wrapper {
  position: relative;
  width: 100%;
}
.parkeerdruk-bar {
  height: 10px;
  background: var(--color-surface-offset-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.parkeerdruk-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 600ms var(--ease-out);
}
.parkeerdruk-bar__fill--green  { background: var(--color-success); }
.parkeerdruk-bar__fill--orange { background: var(--color-warning); }
.parkeerdruk-bar__fill--red    { background: var(--color-error); }

.parkeerdruk-bar__threshold {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  background: var(--color-primary);
  opacity: 0.5;
  border-radius: 1px;
}

/* Parkeerdruk card (in question step) */
.parkeerdruk-card {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.parkeerdruk-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.parkeerdruk-card__buurt {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.parkeerdruk-badge {
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.parkeerdruk-badge--green  { background: var(--color-success-highlight); color: var(--color-success); }
.parkeerdruk-badge--orange { background: var(--color-warning-highlight); color: var(--color-warning); }
.parkeerdruk-badge--red    { background: var(--color-error-highlight); color: var(--color-error); }
.parkeerdruk-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Monument card (in question step) */
.monument-card {
  background: var(--color-warning-highlight);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.monument-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}
.monument-card__content {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.monument-card__link {
  font-size: var(--text-xs);
  color: var(--color-info);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.monument-card__link:hover {
  text-decoration: underline;
}

/* Methodology panel */
.methodology-panel {
  background: var(--color-surface-offset);
  border-color: var(--color-border);
}
.methodology-panel h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.methodology-panel p {
  margin-bottom: var(--space-2);
}

/* Autofill badge (enhanced — ensure it wraps well) */
.autofill-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.7rem;
  color: var(--color-success);
  font-weight: 500;
  margin-left: var(--space-2);
  background: var(--color-success-highlight);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.autofill-badge svg {
  width: 12px;
  height: 12px;
}

/* Dark mode adjustments */
[data-theme="dark"] .parkeerdruk-card,
[data-theme="dark"] .energielabel-card {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
[data-theme="dark"] .monument-card {
  background: var(--color-warning-highlight);
}
[data-theme="dark"] .methodology-panel {
  background: var(--color-surface-2);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 600px) {
  .track-cards { grid-template-columns: 1fr; }
  .landing-hero__title { font-size: var(--text-xl); }
  .verdict-badge { padding: var(--space-3) var(--space-5); font-size: var(--text-base); }
  .wizard-nav { flex-direction: row; }
  .result-block { padding: var(--space-4); }
  .modal { padding: var(--space-5); margin: var(--space-4); }
  .regime-toggle { flex-direction: column; border-radius: var(--radius-lg); }
  .regime-btn { border-radius: var(--radius-md); justify-content: center; padding: var(--space-3) var(--space-4); }
  .verdict-regime-tag { display: block; margin-left: 0; margin-top: var(--space-2); }
  .cost-table th:nth-child(2), .cost-table th:nth-child(3),
  .cost-table td:nth-child(2), .cost-table td:nth-child(3) { font-size: var(--text-xs); }
  .woningpaspoort__grid { grid-template-columns: 1fr; gap: var(--space-1); }
  .woningpaspoort__label { font-size: var(--text-xs); }
  .address-input { padding-left: var(--space-10); font-size: var(--text-sm); }
}

/* ============================================
   OMGEKEERD ZOEKEN — REVERSE SEARCH
   ============================================ */

/* Landing page alternatives row */
.landing-alternatives {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.btn-alt-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent-highlight);
  color: var(--color-primary);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background var(--transition-interactive), border-color var(--transition-interactive);
  text-decoration: none;
}
.btn-alt-action:hover {
  background: var(--color-accent);
  color: #fff;
}
.btn-alt-action svg { flex-shrink: 0; }

/* Header reverse search button highlight */
#reverse-search-btn {
  color: var(--color-accent);
  font-weight: 600;
}
#reverse-search-btn:hover {
  color: var(--color-accent-hover);
}

/* ---- Main reverse search layout ---- */
.rs-header {
  margin-bottom: var(--space-6);
}

.rs-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-4);
  transition: color var(--transition-interactive);
}
.rs-back-btn:hover { color: var(--color-primary); }
.rs-back-btn svg { flex-shrink: 0; }

.rs-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}
.rs-title svg { color: var(--color-accent); }

.rs-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Filter panel ---- */
.rs-filters {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.rs-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.rs-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rs-filter-group--range {
  /* range groups can span if needed */
}

.rs-filter-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rs-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
  box-sizing: border-box;
}
.rs-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.rs-select { font-size: var(--text-sm); }

.rs-range-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.rs-input--half {
  width: 0;
  flex: 1;
}
.rs-range-sep {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.rs-filters__actions {
  display: flex;
  justify-content: flex-end;
}

.rs-search-btn {
  min-width: 140px;
  gap: var(--space-2);
}
.rs-search-btn svg { flex-shrink: 0; }

/* ---- Results ---- */
.rs-results {
  min-height: 120px;
}

.rs-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.rs-results-count {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.btn-rs-export {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive);
}
.btn-rs-export:hover {
  background: var(--color-accent-highlight);
  border-color: var(--color-accent);
  color: var(--color-primary);
}
.btn-rs-export svg { flex-shrink: 0; }

/* ---- Table ---- */
.rs-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.rs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.rs-table__th {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-interactive);
}
.rs-table__th:hover { background: var(--color-surface-offset-2); }
.rs-table__th--num { text-align: right; }
.rs-table__th--status { white-space: nowrap; }
.rs-table__th--action { width: 36px; }
.rs-table__th--adres { min-width: 200px; }

.rs-sort-icon {
  display: inline-block;
  margin-left: var(--space-1);
  font-style: normal;
}
.rs-sort-icon--active { color: var(--color-primary); }
.rs-sort-icon--neutral { color: var(--color-text-faint); }

.rs-table__row {
  cursor: pointer;
  transition: background var(--transition-interactive);
  border-bottom: 1px solid var(--color-divider);
}
.rs-table__row:last-child { border-bottom: none; }
.rs-table__row:hover { background: var(--color-accent-highlight); }

.rs-table__cell {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  color: var(--color-text);
}
.rs-table__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.rs-table__cell--status { white-space: nowrap; }
.rs-table__cell--action {
  text-align: center;
  color: var(--color-text-faint);
}
.rs-table__row:hover .rs-table__cell--action { color: var(--color-primary); }
.rs-table__cell--adres { min-width: 200px; }

.rs-adres {
  display: block;
  font-weight: 600;
  color: var(--color-text);
}
.rs-postcode {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.rs-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rs-open-link svg { width: 16px; height: 16px; }

/* Status badge inside table */
.rs-status-badge {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* ---- Pagination ---- */
.rs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.rs-page-btn { min-width: 110px; }
.rs-page-indicator {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ---- Loading ---- */
.rs-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-4);
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.rs-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: rs-spin 0.7s linear infinite;
}
@keyframes rs-spin {
  to { transform: rotate(360deg); }
}

/* ---- Empty / Error states ---- */
.rs-empty-state, .rs-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  gap: var(--space-3);
  color: var(--color-text-muted);
}
.rs-empty-state svg, .rs-error svg {
  width: 40px;
  height: 40px;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.rs-empty-state h3, .rs-error h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin: 0;
}
.rs-empty-state p, .rs-error p {
  font-size: var(--text-sm);
  max-width: 480px;
  margin: 0;
}
.rs-error svg { color: var(--color-warning); }

/* ---- Dark mode adjustments ---- */
[data-theme="dark"] .rs-filters {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme="dark"] .rs-table__th {
  background: var(--color-surface-offset);
}
[data-theme="dark"] .rs-table__row:hover {
  background: var(--color-accent-highlight);
}
[data-theme="dark"] .rs-input {
  background: var(--color-surface-2);
}
[data-theme="dark"] .rs-status-badge {
  background: var(--color-surface-offset);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .rs-filters__grid {
    grid-template-columns: 1fr;
  }
  .rs-results-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .rs-table__th--status, .rs-table__cell--status { display: none; }
  .rs-pagination { gap: var(--space-2); }
  .rs-page-btn { min-width: 80px; font-size: var(--text-xs); }
  .landing-alternatives { flex-direction: column; align-items: center; }
}