@layer components {
  .cx-card,
  .cx-kpi,
  .cx-page-header,
  .cx-semantic-card {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xl);
    background: var(--cx-panel-bg);
    box-shadow: var(--cx-shadow-soft);
    overflow: hidden;
  }

  .cx-card-header,
  .cx-card-body,
  .cx-card-footer { padding: var(--cx-space-5); }

  .cx-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cx-space-3);
    border-block-end: 1px solid var(--cx-border);
    background: color-mix(in srgb, var(--cx-surface) 74%, transparent);
  }

  .cx-page-header {
    padding: var(--cx-space-5);
    color: #fff;
    background:
      radial-gradient(circle at 12% 12%, rgba(255,255,255,.18), transparent 13rem),
      linear-gradient(135deg, var(--cx-brand-primary), var(--cx-brand-secondary) 62%, var(--cx-brand-accent));
  }
  .cx-page-header::after {
    content: '';
    position: absolute;
    inset-inline-end: -4rem;
    inset-block-end: -6rem;
    inline-size: 22rem;
    block-size: 13rem;
    border: 12px solid rgba(255,255,255,.18);
    border-inline-start-color: transparent;
    border-block-start-color: rgba(216,59,190,.28);
    border-radius: 999px;
    transform: rotate(-10deg);
    pointer-events: none;
  }
  .cx-page-header > * { position: relative; z-index: 1; }
  .cx-page-header h1 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.4rem); letter-spacing: -.02em; color: #fff; }
  .cx-page-header .cx-page-eyebrow,
  .cx-page-header .cx-help { color: #fff; }
  .cx-page-header .cx-help { opacity: .78; }
  .cx-page-eyebrow { display: inline-flex; margin-block-end: .35rem; color: var(--cx-brand-strong); font-size: .82rem; font-weight: 950; letter-spacing: .02em; }

  .cx-kpi {
    display: grid;
    gap: .42rem;
    min-height: 132px;
    padding: var(--cx-space-5);
    border-radius: var(--cx-radius-lg);
  }
  .cx-kpi::before {
    content: '';
    position: absolute;
    inset-inline-end: .95rem;
    inset-block-start: .82rem;
    inline-size: 3rem;
    block-size: 3rem;
    border: 3px solid color-mix(in srgb, var(--cx-sem-color, var(--cx-brand-strong)) 20%, transparent);
    border-inline-start-color: transparent;
    border-block-end-color: color-mix(in srgb, var(--cx-brand-accent) 34%, transparent);
    border-radius: 999px;
    transform: rotate(-28deg);
    opacity: .42;
    pointer-events: none;
    z-index: 0;
  }
  .cx-kpi::after,
  .cx-card[data-semantic]::before,
  .cx-semantic-card::before {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    inset-block: 0;
    inline-size: 4px;
    background: linear-gradient(180deg, var(--cx-sem-color, var(--cx-brand-strong)), var(--cx-brand-accent));
    opacity: .82;
  }
  .cx-kpi > * { position: relative; z-index: 1; }
  [data-theme="dark"] .cx-kpi::before { opacity: .34; }

  .cx-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .cx-kpi-icon {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cx-sem-color, var(--cx-brand-strong)) 14%, var(--cx-surface));
    color: var(--cx-sem-color, var(--cx-brand-strong));
    border: 1px solid color-mix(in srgb, var(--cx-sem-color, var(--cx-brand-strong)) 20%, transparent);
    font-weight: 950;
  }
  .cx-kpi-value,
  .cx-metric-value { color: var(--cx-sem-color, var(--cx-brand-strong)); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 950; line-height: 1.1; }
  .cx-kpi-label,
  .cx-metric-label { color: var(--cx-muted); font-weight: 850; font-size: .92rem; }
  .cx-kpi .cx-help { color: var(--cx-muted); line-height: 1.55; }
  .cx-kpi[data-semantic],
  .cx-card[data-semantic] {
    border-color: var(--cx-sem-line, var(--cx-border));
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--cx-sem-soft, var(--cx-brand-soft)) 64%, transparent), transparent 58%),
      var(--cx-panel-bg);
  }

  .cx-kpi[data-semantic="revenue"], .cx-card[data-semantic="revenue"] { --cx-sem-color: var(--cx-sem-revenue); --cx-sem-soft: var(--cx-sem-revenue-soft); --cx-sem-line: var(--cx-sem-revenue-line); }
  .cx-kpi[data-semantic="profit"], .cx-card[data-semantic="profit"] { --cx-sem-color: var(--cx-sem-profit); --cx-sem-soft: var(--cx-sem-profit-soft); --cx-sem-line: var(--cx-sem-profit-line); }
  .cx-kpi[data-semantic="loss"], .cx-card[data-semantic="loss"], .cx-kpi[data-semantic="danger"], .cx-card[data-semantic="danger"] { --cx-sem-color: var(--cx-sem-loss); --cx-sem-soft: var(--cx-sem-loss-soft); --cx-sem-line: var(--cx-sem-loss-line); }
  .cx-kpi[data-semantic="cost"], .cx-card[data-semantic="cost"] { --cx-sem-color: var(--cx-sem-cost); --cx-sem-soft: var(--cx-sem-cost-soft); --cx-sem-line: var(--cx-sem-cost-line); }
  .cx-kpi[data-semantic="expense"], .cx-card[data-semantic="expense"] { --cx-sem-color: var(--cx-sem-expense); --cx-sem-soft: var(--cx-sem-expense-soft); --cx-sem-line: var(--cx-sem-expense-line); }
  .cx-kpi[data-semantic="inventory"], .cx-card[data-semantic="inventory"] { --cx-sem-color: var(--cx-sem-inventory); --cx-sem-soft: var(--cx-sem-inventory-soft); --cx-sem-line: var(--cx-sem-inventory-line); }
  .cx-kpi[data-semantic="production"], .cx-card[data-semantic="production"] { --cx-sem-color: var(--cx-sem-production); --cx-sem-soft: var(--cx-sem-production-soft); --cx-sem-line: var(--cx-sem-production-line); }
  .cx-kpi[data-semantic="forecast"], .cx-card[data-semantic="forecast"] { --cx-sem-color: var(--cx-sem-forecast); --cx-sem-soft: var(--cx-sem-forecast-soft); --cx-sem-line: var(--cx-sem-forecast-line); }
  .cx-kpi[data-semantic="settlement"], .cx-card[data-semantic="settlement"] { --cx-sem-color: var(--cx-sem-settlement); --cx-sem-soft: var(--cx-sem-settlement-soft); --cx-sem-line: var(--cx-sem-settlement-line); }
  .cx-kpi[data-semantic="pending"], .cx-card[data-semantic="pending"], .cx-kpi[data-semantic="warning"], .cx-card[data-semantic="warning"] { --cx-sem-color: var(--cx-sem-pending); --cx-sem-soft: var(--cx-sem-pending-soft); --cx-sem-line: var(--cx-sem-pending-line); }

  .cx-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--cx-space-4); }
  .cx-empty-state,
  .cx-state-box { display: grid; place-items: center; gap: .75rem; min-height: 140px; text-align: center; }
  .cx-empty-inline { padding: 1rem; color: var(--cx-muted); text-align: center; }

  .cx-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: var(--cx-brand-soft);
    color: var(--cx-brand-strong);
    font-weight: 900;
    font-size: .85rem;
  }
  .cx-status-pill[data-state="ok"] { background: rgba(22, 138, 74, .13); color: var(--cx-success); }
  .cx-status-pill[data-state="warn"] { background: rgba(183, 121, 31, .15); color: var(--cx-warning); }
  .cx-status-pill[data-state="bad"] { background: rgba(180, 35, 24, .13); color: var(--cx-danger); }
  .cx-status-pill[data-state="revenue"] { background: var(--cx-sem-revenue-soft); color: var(--cx-sem-revenue); }
  .cx-status-pill[data-state="profit"] { background: var(--cx-sem-profit-soft); color: var(--cx-sem-profit); }
  .cx-status-pill[data-state="loss"], .cx-status-pill[data-state="danger"] { background: var(--cx-sem-loss-soft); color: var(--cx-sem-loss); }
  .cx-status-pill[data-state="cost"] { background: var(--cx-sem-cost-soft); color: var(--cx-sem-cost); }
  .cx-status-pill[data-state="expense"] { background: var(--cx-sem-expense-soft); color: var(--cx-sem-expense); }
  .cx-status-pill[data-state="inventory"] { background: var(--cx-sem-inventory-soft); color: var(--cx-sem-inventory); }
  .cx-status-pill[data-state="production"] { background: var(--cx-sem-production-soft); color: var(--cx-sem-production); }
  .cx-status-pill[data-state="forecast"] { background: var(--cx-sem-forecast-soft); color: var(--cx-sem-forecast); }
  .cx-status-pill[data-state="settlement"] { background: var(--cx-sem-settlement-soft); color: var(--cx-sem-settlement); }
  .cx-status-pill[data-state="pending"] { background: var(--cx-sem-pending-soft); color: var(--cx-sem-pending); }
}