@layer components {
  .card {
    background:
      linear-gradient(to right, var(--bg-primary) 40%, transparent) left center,
      linear-gradient(to left, var(--bg-primary) 40%, transparent) right center,
      radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center,
      radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center,
      var(--bg-primary);
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    margin-bottom: var(--space-5);
  }

  @media (max-width: 640px) {
    .card > table { min-width: 560px; }
  }

  .card-body {
    padding: var(--space-5);
    overflow-wrap: break-word;
  }
  .card-body > :last-child { margin-bottom: 0; }

  .card > table th,
  .card > table td { padding-left: var(--space-5); padding-right: var(--space-5); }

  .tile {
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
  }

  .panel {
    background: var(--bg-primary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .metrics-grid dt, .usage-label { font-size: 11px; color: var(--text-secondary); }
  .metrics-grid dd, .usage-value {
    margin: var(--space-1) 0 0;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  .usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }
  .usage-item {
    display: flex;
    flex-direction: column;
  }

  .usage-note { color: var(--text-tertiary); }
  .usage-value {
    flex: 1;
    font-size: 22px;
  }
  .usage-limit {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-tertiary);
  }
  .usage-item.is-high { border-color: color-mix(in srgb, var(--chart-3) 45%, var(--border)); }
  .usage-item.is-full {
    border-color: color-mix(in srgb, var(--down) 45%, var(--border));
    background: color-mix(in srgb, var(--down) 5%, var(--bg-secondary));
  }
  .usage-item.is-full .usage-value { color: var(--down); }

  .usage-track {
    height: 6px;
    margin-top: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--border);
    overflow: hidden;
  }
  .usage-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width var(--speed) var(--ease-out);
  }
  .usage-fill.is-high { background: var(--chart-3); }
  .usage-fill.is-full { background: var(--down); }

  .billing-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    margin-bottom: var(--space-4);
  }
  .billing-selection { margin: calc(var(--space-2) * -1) 0 var(--space-4); }
  .choice-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }
  .plan-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
  }
  @supports (grid-template-rows: subgrid) {
    .plan-card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;
      row-gap: 0;
    }
    .plan-cta { align-self: end; }
  }
  .plan-card.is-current {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-sm);
  }
  .plan-card.is-selected {
    border-color: color-mix(in srgb, var(--accent) 65%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-sm);
  }

  .plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .plan-name { font-size: 13.5px; font-weight: 500; }
  .plan-tagline {
    margin: var(--space-1) 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
  }

  .plan-price {
    margin: var(--space-3) 0 var(--space-4);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .plan-period {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-tertiary);
  }

  .plan-features {
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0 0;
    border-top: 0.5px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
  }
  .plan-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-2) 0;
  }
  .plan-features .tabler-icon {
    flex: none;
    margin-top: 3px;
    color: var(--up);
  }
  .plan-note { color: var(--text-tertiary); }

  .plan-cta { margin-top: auto; padding-top: var(--space-4); }
  .plan-cta form.button_to { display: block; }
  .plan-cta .btn { width: 100%; }
  .plan-cta-note {
    margin: 0;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
  }

  .project-cards {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
  }
  .project-cards > li { margin: 0; }
  .project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-4) var(--space-5);
  }
  .project-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .project-card-head .pill { flex: none; }
  .project-card-name { margin: 0; font-size: 14px; }
  .project-card-pulse { grid-template-columns: minmax(0, 1fr); }
  .project-card-pulse dd {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .project-card-pulse dt[title] { cursor: help; }
  .project-card-meta {
    margin: var(--space-2) 0 0;
    font-size: 12.5px;
  }
  .project-card-setup-cta { margin: var(--space-3) 0 0; }
  .project-card-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
  }

  .setup-guide { margin: var(--space-5) 0 var(--space-6); }
  .setup-guide-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .setup-guide-header h3,
  .setup-guide-header p { margin: 0; }
  .setup-guide-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .setup-guide-step {
    display: flex;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4) var(--space-5);
  }
  .setup-guide-step + .setup-guide-step { border-top: 0.5px solid var(--border); }
  .setup-guide-step.is-current {
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-primary));
  }
  .setup-guide-marker {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
  }
  .setup-guide-step.is-done .setup-guide-marker {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
  }
  .setup-guide-step.is-current .setup-guide-marker {
    border-color: var(--accent);
    color: var(--accent);
  }
  .setup-guide-copy { min-width: 0; }
  .setup-guide-title { margin: 0; font-weight: 500; }
  .setup-guide-step.is-done .setup-guide-title { color: var(--text-secondary); }
  .setup-guide-description {
    margin: var(--space-1) 0 0;
    font-size: 12.5px;
    max-width: 68ch;
  }
  .setup-guide-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
  }

  .billing-portal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-4) var(--space-5);
  }
  .billing-portal-hint {
    flex: 1 1 320px;
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
  }
  .billing-portal form.button_to { flex: none; }
}