@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); }
}

/* phase40a compact global KPI/detail variants */
@layer components {
  .cx-kpi-compact-grid .cx-kpi,
  .cx-kpi.cx-kpi-compact {
    min-height: 96px;
    padding: var(--cx-space-3);
    gap: .28rem;
    cursor: pointer;
  }
  .cx-kpi-compact-grid .cx-kpi::before,
  .cx-kpi.cx-kpi-compact::before {
    inline-size: 2.15rem;
    block-size: 2.15rem;
    inset-inline-end: .7rem;
    inset-block-start: .62rem;
    border-width: 2px;
  }
  .cx-kpi-compact-grid .cx-kpi-value,
  .cx-kpi.cx-kpi-compact .cx-kpi-value {
    font-size: clamp(1.12rem, 2vw, 1.62rem);
  }
  .cx-kpi-compact-grid .cx-kpi-label,
  .cx-kpi.cx-kpi-compact .cx-kpi-label {
    font-size: .82rem;
  }
  .cx-kpi-compact-grid .cx-kpi-icon,
  .cx-kpi.cx-kpi-compact .cx-kpi-icon {
    inline-size: 1.85rem;
    block-size: 1.85rem;
    font-size: .86rem;
  }
}


/* B-Design-1 — Card contract variants.
   These variants standardize visual language only; card click/drilldown behavior remains owned by JS routes. */
@layer components {
  .cx-card,
  .cx-kpi,
  .cx-page-header,
  .cx-semantic-card {
    border-color: var(--cx-card-border);
    background: var(--cx-card-bg);
    box-shadow: var(--cx-card-shadow);
  }

  .cx-card--panel { padding: var(--cx-space-5); border-radius: var(--cx-card-radius); }
  .cx-card--metric { padding: var(--cx-space-5); border-radius: var(--cx-card-radius-compact); }
  .cx-card--compact { padding: var(--cx-space-3); border-radius: var(--cx-radius-lg); }
  .cx-card--summary { padding: var(--cx-space-4); display: grid; gap: var(--cx-space-2); }
  .cx-card--details { padding: var(--cx-space-5); min-width: 0; }

  .cx-card--interactive,
  .cx-card[data-interactive="true"],
  .cx-semantic-card[data-interactive="true"] {
    cursor: pointer;
    transition: transform var(--cx-motion-base), box-shadow var(--cx-motion-base), border-color var(--cx-motion-base), background var(--cx-motion-base);
  }
  .cx-card--interactive:hover,
  .cx-card[data-interactive="true"]:hover,
  .cx-semantic-card[data-interactive="true"]:hover {
    transform: translateY(var(--cx-motion-lift-y));
    box-shadow: var(--cx-card-shadow-hover);
    border-color: var(--cx-border-strong);
  }

  .cx-card--success { --cx-sem-color: var(--cx-sem-profit); --cx-sem-soft: var(--cx-sem-profit-soft); --cx-sem-line: var(--cx-sem-profit-line); border-color: var(--cx-sem-line); }
  .cx-card--danger { --cx-sem-color: var(--cx-sem-loss); --cx-sem-soft: var(--cx-sem-loss-soft); --cx-sem-line: var(--cx-sem-loss-line); border-color: var(--cx-sem-line); }
  .cx-card--warning { --cx-sem-color: var(--cx-sem-pending); --cx-sem-soft: var(--cx-sem-pending-soft); --cx-sem-line: var(--cx-sem-pending-line); border-color: var(--cx-sem-line); }
  .cx-card--info { --cx-sem-color: var(--cx-sem-revenue); --cx-sem-soft: var(--cx-sem-revenue-soft); --cx-sem-line: var(--cx-sem-revenue-line); border-color: var(--cx-sem-line); }

  .cx-section-card { border: 1px solid var(--cx-card-border); border-radius: var(--cx-card-radius); background: var(--cx-card-bg); box-shadow: var(--cx-card-shadow); }
}


/* B-Design-2 — Cards Unification.
   Shared cards become easier to adjust later through card/window/table tokens only.
   Click/drilldown behavior stays owned by route logic. */
@layer components {
  .cx-card,
  .cx-semantic-card,
  .cx-kpi {
    border-radius: var(--cx-card-radius);
    transition: border-color var(--cx-motion-base), box-shadow var(--cx-motion-base), background var(--cx-motion-base), transform var(--cx-motion-base);
  }

  .cx-card-header,
  .cx-card-body,
  .cx-card-footer {
    min-width: 0;
  }

  .cx-card-header {
    padding: var(--cx-card-header-padding);
    gap: var(--cx-space-3);
    background: var(--cx-card-header-bg);
    border-block-end-color: var(--cx-card-header-border);
  }
  .cx-card-header > div:first-child {
    min-width: 0;
    display: grid;
    gap: .35rem;
  }
  .cx-card-header h2,
  .cx-card-header h3,
  .cx-card-header h4 {
    margin: 0;
    color: var(--cx-text-main);
    font-size: clamp(1rem, 1.65vw, 1.2rem);
    font-weight: 950;
    line-height: 1.35;
  }
  .cx-card-header .cx-help,
  .cx-card-header p {
    margin: 0;
    color: var(--cx-text-soft);
  }
  .cx-card-body {
    padding: var(--cx-card-body-padding);
    display: grid;
    gap: var(--cx-card-body-gap);
  }
  .cx-card-footer {
    padding: var(--cx-card-footer-padding);
    border-block-start: 1px solid var(--cx-card-header-border);
    background: color-mix(in srgb, var(--cx-surface-card) 88%, var(--cx-brand-soft));
  }

  .cx-card--panel,
  .cx-card:not([class*="cx-card--"]) {
    border-radius: var(--cx-card-radius);
  }
  .cx-card--metric,
  .cx-kpi {
    min-height: var(--cx-card-metric-min-height);
    border-radius: var(--cx-card-radius-compact);
  }
  .cx-card--summary {
    background: color-mix(in srgb, var(--cx-brand-soft) 28%, var(--cx-card-bg));
  }
  .cx-card--details {
    background: color-mix(in srgb, var(--cx-surface-card) 90%, var(--cx-brand-soft));
  }

  .cx-card--interactive:focus-visible,
  .cx-card[data-interactive="true"]:focus-visible,
  .cx-semantic-card[data-interactive="true"]:focus-visible,
  .cx-kpi:focus-visible {
    outline: none;
    box-shadow: var(--cx-focus-ring), var(--cx-card-shadow-hover);
    border-color: var(--cx-card-interactive-outline);
  }

  .cx-kpi {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--cx-sem-soft, var(--cx-brand-soft)) 46%, transparent), transparent 58%),
      var(--cx-card-bg);
  }
  .cx-kpi-head {
    min-width: 0;
  }
  .cx-kpi-label,
  .cx-metric-label {
    color: var(--cx-text-soft);
  }
  .cx-kpi-value,
  .cx-metric-value {
    letter-spacing: -.02em;
  }
  .cx-kpi .cx-status-pill {
    justify-self: start;
  }

  .cx-card-body > .cx-table-wrap:first-child,
  .cx-card-body > .cx-smart-table-wrap:first-child {
    margin-block-start: calc(var(--cx-space-2) * -1);
  }
}


/* B-Design-Recovery-1 — Card layout recovery.
   Shared card bodies must not force every page layout into grid. Variants can opt in. */
@layer components {
  .cx-card-body {
    display: block;
  }

  .cx-card--panel > .cx-card-body,
  .cx-card--details > .cx-card-body,
  .cx-modal .cx-card--details > .cx-card-body {
    display: grid;
    gap: var(--cx-card-body-gap);
  }

  .cx-card--summary {
    display: grid;
    gap: var(--cx-space-2);
  }
}