@layer components {
  .fp-button,
  .fp-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: var(--fp-radius-md);
    padding: .65rem .9rem;
    color: var(--fp-color-text-inverse);
    background: var(--fp-color-brand-primary);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
  }

  .fp-button--secondary {
    border-color: var(--fp-color-border-subtle);
    color: var(--fp-color-text-primary);
    background: var(--fp-color-bg-surface-raised);
  }

  .fp-button--ghost {
    border-color: transparent;
    color: var(--fp-color-brand-primary-strong);
    background: transparent;
  }

  .fp-button--danger {
    color: #220203;
    background: var(--fp-color-status-danger);
  }

  .fp-button--sm {
    min-height: 2.25rem;
    padding: .45rem .65rem;
    font-size: var(--fp-text-sm);
  }

  .fp-button[aria-disabled="true"],
  .fp-button:disabled {
    opacity: .56;
    cursor: not-allowed;
  }

  .fp-panel,
  .fp-card {
    border: 1px solid var(--fp-color-border-subtle);
    border-radius: var(--fp-radius-lg);
    background: linear-gradient(180deg, var(--fp-color-bg-surface), color-mix(in srgb, var(--fp-color-bg-surface) 82%, #000));
    color: var(--fp-color-text-primary);
  }

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

  .fp-card {
    padding: var(--fp-space-4);
  }

  .fp-summary-card {
    display: grid;
    gap: var(--fp-space-1);
    min-height: 7rem;
    padding: var(--fp-space-4);
    border: 1px solid var(--fp-color-border-subtle);
    border-radius: var(--fp-radius-lg);
    background: var(--fp-color-bg-surface-raised);
  }

  .fp-summary-card__label {
    color: var(--fp-color-brand-accent);
    font-size: var(--fp-text-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .fp-summary-card__value {
    color: var(--fp-color-text-primary);
    font-size: var(--fp-text-2xl);
    font-weight: 900;
    line-height: 1;
  }

  .fp-badge,
  .fp-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: max-content;
    border: 1px solid var(--fp-color-border-subtle);
    border-radius: var(--fp-radius-sm);
    padding: .2rem .45rem;
    font-size: var(--fp-text-xs);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .fp-status--success { color: var(--fp-color-status-success); }
  .fp-status--warning { color: var(--fp-color-status-warning); }
  .fp-status--danger { color: var(--fp-color-status-danger); }
  .fp-status--info { color: var(--fp-color-status-info); }
  .fp-status--neutral { color: var(--fp-color-status-neutral); }

  .fp-toolbar,
  .fp-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fp-space-3);
  }

  .fp-action-bar--sticky {
    position: sticky;
    bottom: var(--fp-space-4);
    z-index: 2;
  }

  .fp-action-bar {
    justify-content: flex-end;
    padding: var(--fp-space-3);
    border: 1px solid var(--fp-color-border-subtle);
    border-radius: var(--fp-radius-lg);
    background: color-mix(in srgb, var(--fp-color-bg-surface-raised) 88%, #000);
  }

  .fp-form-field {
    display: grid;
    gap: var(--fp-space-2);
  }

  .fp-form-field__label {
    color: var(--fp-color-text-primary);
    font-size: var(--fp-text-sm);
    font-weight: 800;
  }

  .fp-form-field__help,
  .fp-form-field__error {
    font-size: var(--fp-text-sm);
  }

  .fp-form-field__error {
    color: var(--fp-color-status-danger);
  }

  .fp-input,
  .fp-select,
  .fp-textarea,
  .fp-score-input {
    width: 100%;
  }

  .fp-score-input {
    max-width: 5rem;
    text-align: center;
    font-size: var(--fp-text-lg);
    font-weight: 900;
  }

  .fp-check,
  .fp-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
  }

  .fp-data-grid {
    width: 100%;
    min-width: 760px;
    background: var(--fp-color-bg-surface);
  }

  .fp-data-grid th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--fp-color-bg-surface-raised) 90%, #000);
  }

  .fp-data-grid td,
  .fp-data-grid th {
    padding: .65rem .75rem;
  }

  .fp-data-grid tr:hover td {
    background: rgba(255, 255, 255, .035);
  }

  .fp-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fp-space-2);
    margin-bottom: var(--fp-space-4);
  }

  .fp-tab {
    border: 1px solid var(--fp-color-border-subtle);
    border-radius: var(--fp-radius-md);
    background: var(--fp-color-bg-surface-raised);
    color: var(--fp-color-text-primary);
    padding: .55rem .75rem;
  }

  .fp-tab[aria-selected="true"] {
    background: var(--fp-color-brand-primary);
    color: var(--fp-color-text-inverse);
  }

  .fp-dialog,
  .fp-drawer {
    border: 1px solid var(--fp-color-border-subtle);
    border-radius: var(--fp-radius-lg);
    background: var(--fp-color-bg-surface-raised);
    color: var(--fp-color-text-primary);
    box-shadow: var(--fp-shadow-soft);
  }

  .fp-dialog::backdrop {
    background: rgba(0, 0, 0, .64);
    backdrop-filter: blur(8px);
  }

  .fp-empty-state {
    display: grid;
    place-items: start;
    gap: var(--fp-space-3);
    padding: var(--fp-space-6);
    border: 1px dashed var(--fp-color-border-strong);
    border-radius: var(--fp-radius-lg);
  }

  .fp-match-card {
    display: grid;
    gap: var(--fp-space-3);
    padding: var(--fp-space-4);
    border: 1px solid var(--fp-color-border-subtle);
    border-radius: var(--fp-radius-lg);
    background: var(--fp-color-bg-surface);
  }

  .fp-match-card__teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--fp-space-3);
  }

  .fp-team {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    min-width: 0;
  }

  .fp-team__name {
    overflow-wrap: anywhere;
    font-weight: 800;
  }

  .fp-toast {
    border: 1px solid var(--fp-color-border-subtle);
    border-radius: var(--fp-radius-lg);
    background: var(--fp-color-bg-surface-raised);
    color: var(--fp-color-text-primary);
    padding: var(--fp-space-3) var(--fp-space-4);
  }

  .fp-nav-item {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    border-radius: var(--fp-radius-md);
    padding: .55rem .7rem;
    color: var(--fp-color-text-primary);
    text-decoration: none;
  }

  .fp-nav-item[aria-current="page"] {
    background: var(--fp-color-brand-primary);
    color: var(--fp-color-text-inverse);
  }

  @media (max-width: 640px) {
    .fp-responsive-table thead {
      display: none;
    }

    .fp-responsive-table,
    .fp-responsive-table tbody,
    .fp-responsive-table tr,
    .fp-responsive-table td {
      display: block;
      width: 100%;
    }

    .fp-responsive-table tr {
      padding: var(--fp-space-3);
      border-bottom: 1px solid var(--fp-color-border-subtle);
    }

    .fp-responsive-table td {
      display: grid;
      grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr);
      gap: var(--fp-space-3);
      border-bottom: 0;
      padding: .45rem 0;
    }

    .fp-responsive-table td::before {
      content: attr(data-label);
      color: var(--fp-color-brand-accent);
      font-size: var(--fp-text-xs);
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
  }
}