.validation-rule-sets {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  padding-bottom: 350px;

  .validation-rule-sets-header,
  .validation-rule-set-window-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-rule-sets-filters,
  .validation-rules-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }

  .validation-rule-set-rows {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .validation-rule-set-row {
    align-items: center;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-xs);
    display: flex;
    gap: var(--spacing-lg);
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    text-decoration: none;
  }

  .validation-rule-set-row-main {
    align-items: center;
    display: flex;
    gap: var(--spacing-lg);
    min-width: 0;
  }

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

  .validation-rule-set-count,
  .validation-rules-count,
  .validation-rule-chip,
  .validation-rule-badge,
  .validation-rule-set-state {
    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;
  }

  .validation-rule-set-count,
  .validation-rules-count,
  .validation-rule-chip {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
  }

  .validation-rule-set-state.draft {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
  }

  .validation-rule-set-state.active {
    background: var(--color-bg-success-primary);
    color: var(--color-text-success-primary);
  }

  .validation-rule-set-state.retired {
    background: var(--color-bg-disabled);
    color: var(--color-text-disabled-alt);
  }

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

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

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

  .validation-rule-set-window-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }

  .validation-rule-set-window-actions {
    align-items: center;
    display: flex;
    gap: var(--spacing-md);
  }

  .validation-rule-set-rename {
    align-items: center;
    display: flex;
    flex: 1;
    gap: var(--spacing-md);
    min-width: 0;
  }

  .validation-rule-set-rename-input {
    flex: 1 1 240px;
    font-size: var(--font-size-page-title);
    font-weight: var(--weight-medium);
  }

  .validation-rule-set-back {
    color: var(--color-text-link-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-medium);
  }

  .validation-rule-set-reference {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-xs);
    padding: var(--spacing-lg);
  }

  .validation-rule-set-reference-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }

  .validation-rule-set-reference-hint {
    color: var(--color-text-quaternary);
    font-size: var(--font-size-xs);
    margin: var(--spacing-md) 0 0;
  }

  .validation-rule-set-new-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-xs);
    padding: var(--spacing-xl);
  }

  .validation-rules-list {
    display: block;
  }

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

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

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

  .validation-rule-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
  }

  .validation-rule-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-xs);
    display: block;
    padding: var(--spacing-xl);
  }

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

  .validation-rule-card-title {
    min-width: 0;

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

  .validation-rule-chips,
  .validation-rule-card-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }

  .validation-rule-warning {
    background: var(--color-bg-warning-primary);
    border: 1px solid var(--color-border-warning_subtle);
    border-radius: var(--border-radius-xs);
    color: var(--color-text-warning-primary);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .validation-rule-logic {
    align-items: center;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-xs);
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);

    span {
      color: var(--color-text-quaternary);
      font-size: var(--font-size-xs);
      font-weight: var(--weight-bold);
    }

    strong {
      color: var(--color-text-primary);
      font-size: var(--font-size-sm);
      font-weight: var(--weight-semi-bold);
    }
  }

  .validation-rule-message {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-lg);
  }

  .validation-rule-edit-frame {
    display: block;
  }

  .validation-rule-edit {
    border-top: 1px solid var(--color-border-tertiary);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
  }

  .validation-rule-edit-header {
    align-items: center;
    display: flex;
    gap: var(--spacing-md);
    justify-content: space-between;
    margin-bottom: var(--spacing-md);

    h4 {
      color: var(--color-text-primary);
      font-size: var(--font-size-md);
      margin: 0;
    }

    a {
      color: var(--color-text-link-primary);
      font-size: var(--font-size-sm);
    }
  }

  .validation-rule-new {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-xs);
    padding: var(--spacing-xl);

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

  .validation-rule-form-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-bottom: var(--spacing-lg);
  }

  @media (min-width: 768px) {
    .validation-rule-form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .validation-rule-field,
  .validation-rule-kind-note {
    margin-bottom: var(--spacing-lg);
  }

  .validation-rule-kind-description {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-sm) 0 0;
  }

  .validation-rule-kind-note {
    background: var(--color-bg-info-primary);
    border: 1px solid var(--color-border-info_subtle);
    border-radius: var(--border-radius-xs);
    color: var(--color-text-info-primary);
    font-size: var(--font-size-sm);
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .validation-rule-condition-row {
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-xs);
    padding: var(--spacing-lg);
  }

  .validation-rule-condition-row + .validation-rule-condition-row {
    margin-top: var(--spacing-lg);
  }

  .validation-rule-condition-row-actions {
    display: flex;
    justify-content: flex-end;
  }

  .validation-rule-add-condition {
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-md);
  }
}