.validation-debug {
  .validation-debug-header {
    align-items: flex-start;
    display: flex;
    gap: var(--spacing-xl);
    justify-content: space-between;

    h1 {
      color: var(--color-text-primary);
      font-size: var(--font-size-page-title);
      margin: 0 0 var(--spacing-xs);
    }

    p {
      color: var(--color-text-quaternary);
      font-size: var(--font-size-sm);
      margin: 0;
    }
  }

  .validation-debug-back {
    color: var(--color-text-link-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
  }

  .validation-debug-panel {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-xs);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);

    h2 {
      color: var(--color-text-primary);
      font-size: var(--font-size-lg);
      margin: 0;
    }

    h3 {
      color: var(--color-text-tertiary);
      font-size: var(--font-size-xs);
      font-weight: var(--weight-semi-bold);
      letter-spacing: 0.04em;
      margin: 0;
      text-transform: uppercase;
    }
  }

  .validation-debug-note {
    color: var(--color-text-quaternary);
    font-size: var(--font-size-sm);
    margin: 0;
  }

  .validation-debug-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .validation-debug-surveys {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
    list-style: none;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 0;
  }

  .validation-debug-survey {
    align-items: center;
    display: flex;
    gap: var(--spacing-sm);
  }

  .validation-debug-survey-open {
    color: var(--color-text-link-primary);
    flex: none;
    font-size: var(--font-size-xs);
    font-weight: var(--weight-medium);
    padding: var(--spacing-xs) var(--spacing-md);
    text-decoration: none;
    white-space: nowrap;
  }

  .validation-debug-survey-link {
    border: 1px solid transparent;
    flex: 1;
    min-width: 0;
    border-radius: var(--border-radius-xs);
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-sm);
    gap: var(--spacing-xxs);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;

    &.active {
      background: var(--color-bg-brand-primary);
      border-color: var(--color-border-brand);
      color: var(--color-text-brand-primary);
    }
  }

  .validation-debug-survey-main {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .validation-debug-survey-date {
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
  }

  .validation-debug-survey-meta {
    color: var(--color-text-quaternary);
    font-size: var(--font-size-xs);
  }

  .validation-debug-badge {
    align-items: center;
    border-radius: var(--border-radius-xs);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--weight-semi-bold);
    min-height: 24px;
    padding: var(--spacing-xs) var(--spacing-md);
    white-space: nowrap;

    &.resolve {
      background: var(--color-bg-error-primary);
      color: var(--color-text-error-primary);
    }

    &.review {
      background: var(--color-bg-warning-primary);
      color: var(--color-text-warning-primary);
    }

    &.note_required {
      background: var(--color-bg-info-primary);
      color: var(--color-text-info-primary);
    }

    &.fits {
      background: var(--color-bg-success-primary);
      color: var(--color-text-success-primary);
    }

    &.unfit {
      background: var(--color-bg-error-primary);
      color: var(--color-text-error-primary);
    }

    &.completed {
      background: var(--color-bg-success-primary);
      color: var(--color-text-success-primary);
    }

    &.ready {
      background: var(--color-bg-info-primary);
      color: var(--color-text-info-primary);
    }

    &.in_progress {
      background: var(--color-bg-warning-primary);
      color: var(--color-text-warning-primary);
    }

    &.not_started {
      background: var(--color-bg-tertiary);
      color: var(--color-text-tertiary);
    }
  }

  .validation-debug-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .validation-debug-count {
    align-items: center;
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-xs);
    color: var(--color-text-tertiary);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--weight-semi-bold);
    gap: var(--spacing-xs);
    min-height: 24px;
    padding: var(--spacing-xs) var(--spacing-md);
  }

  .validation-debug-unavailable {
    background: var(--color-bg-error-primary);
    border: 1px solid var(--color-border-error);
    border-radius: var(--border-radius-xs);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg);

    h3 {
      color: var(--color-text-error-primary);
    }

    p {
      color: var(--color-text-error-primary);
      font-size: var(--font-size-sm);
      margin: 0;
      word-break: break-word;
    }
  }

  .validation-debug-rule {
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
  }

  .validation-debug-key {
    font-family: monospace;
    font-size: var(--font-size-xs);
  }

  .validation-debug-answer {
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
  }
}