@layer components {
  .cx-modal-backdrop[hidden] { display: none !important; }

  .cx-modal-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    z-index: 1000;}

  .cx-modal {
    overflow-y: auto;
    overflow-x: hidden;}
}

@layer components {
  .cx-modal-header, .cx-modal-footer, .cx-modal-body { padding:var(--cx-space-5); }
  .cx-modal-header { display:flex; align-items:center; justify-content:space-between; gap:var(--cx-space-3);}
  .cx-modal-sm { width:min(480px,100%); }
  .cx-modal-lg { width:min(980px,100%); }
  .cx-modal-xl { width:min(1180px,100%); }
  .cx-confirm { display:grid; gap:var(--cx-space-4); }
  .cx-drawer-backdrop[hidden] { display:none !important; }
  .cx-drawer-backdrop { position:fixed; inset:0; z-index:1050; display:flex; justify-content:flex-end; background:rgba(7,26,29,.35); }
  .cx-drawer { inline-size:min(560px,100%); block-size:100%; overflow:auto; background:var(--cx-surface); box-shadow:var(--cx-shadow-card); }
  .cx-drawer-header, .cx-drawer-body, .cx-drawer-footer { padding:var(--cx-space-5); }
  .cx-drawer-header { display:flex; align-items:center; justify-content:space-between; gap:var(--cx-space-3); border-block-end:1px solid var(--cx-border); }
  .cx-drawer-footer { border-block-start:1px solid var(--cx-border); }
}

@layer components {
  .cx-modal-header { position:sticky; top:0; z-index:2;}
  .cx-modal-footer { position:sticky; bottom:0; z-index:2; display:flex; align-items:center; justify-content:flex-end; gap:.75rem; flex-wrap:wrap;}
  .cx-modal-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--cx-space-4); margin-block-end:var(--cx-space-4); }
  .cx-modal-table-area { display:grid; gap:var(--cx-space-4); min-width:0; }
  .cx-modal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--cx-space-3); flex-wrap:wrap; }
  .cx-confirm-danger .cx-modal-header, .cx-confirm[data-semantic="danger"] .cx-modal-header { border-block-end-color:var(--cx-sem-loss-line); }
  .cx-confirm-danger h2, .cx-confirm[data-semantic="danger"] h2 { color:var(--cx-sem-loss); }
  @media (max-width:720px) {
    .cx-modal-backdrop { padding:.65rem; align-items:stretch; }
    .cx-modal, .cx-modal-lg, .cx-modal-xl { width:100%; max-height:calc(100vh - 1.3rem); border-radius:var(--cx-radius-lg); }
    .cx-modal-footer .cx-btn { flex:1 1 auto; }
  }
}


@layer components {
  .cx-smart-detail-modal {
    width: min(1280px, 100%);
    max-height: min(90vh, 920px);
  }
  .cx-smart-detail-backdrop { z-index: 1200; }
  .cx-smart-detail { display:grid; gap:var(--cx-space-5); min-width:0; }
  .cx-smart-detail-subtitle { margin:0; color:var(--cx-muted); font-weight:800; line-height:1.7; }
  .cx-smart-detail-summary .cx-grid { margin:0; }
  .cx-smart-detail-toolbar {
    justify-content:space-between;
    flex-wrap:wrap;
    padding:var(--cx-space-3);
    border:1px solid var(--cx-border);
    border-radius:var(--cx-radius-lg);}
  .cx-smart-detail-toolbar-start { display:flex; align-items:center; gap:var(--cx-space-3); flex-wrap:wrap;}
  .cx-smart-detail-table-area { display:grid; gap:0; min-width:0; }
  .cx-smart-detail-table-area .cx-table-wrap { max-height:min(52vh,560px); }
  .cx-smart-detail-table-area .cx-table th { top:0; }
  .cx-smart-detail-pagination {
    display:flex;
    align-items:center;
    gap:var(--cx-space-3);
    flex-wrap:wrap;
    padding:var(--cx-space-4);
    border:1px solid var(--cx-border);
    border-block-start:0;
    border-radius:0 0 var(--cx-radius-lg) var(--cx-radius-lg);}
  .cx-smart-detail-modal[data-semantic="profit"] .cx-modal-header { border-block-end-color:var(--cx-sem-profit-line); }
  .cx-smart-detail-modal[data-semantic="loss"], .cx-smart-detail-modal[data-semantic="danger"] { --cx-row-hover-border:var(--cx-sem-loss); }
  .cx-smart-detail-modal[data-semantic="cost"] { --cx-row-hover-border:var(--cx-sem-cost); }
  .cx-smart-detail-modal[data-semantic="inventory"] { --cx-row-hover-border:var(--cx-sem-inventory); }
  .cx-smart-detail-modal[data-semantic="forecast"] { --cx-row-hover-border:var(--cx-sem-forecast); }
  .cx-smart-detail-modal[data-semantic="settlement"] { --cx-row-hover-border:var(--cx-sem-settlement); }
  [data-smart-detail] { cursor:pointer; }
  [data-smart-detail]:focus-visible { outline:3px solid var(--cx-focus); outline-offset:3px; }
  @media (max-width: 1024px) {
    .cx-smart-detail-modal { width:calc(100vw - 1.5rem); max-height:calc(100vh - 1.5rem); }
    .cx-smart-detail-table-area .cx-table-wrap { max-height:50vh; }
  }
  @media (max-width: 720px) {
    .cx-smart-detail-backdrop { padding:.5rem; align-items:stretch; }
    .cx-smart-detail-modal { width:100%; height:calc(100vh - 1rem); max-height:calc(100vh - 1rem); border-radius:var(--cx-radius-lg); }
    .cx-smart-detail-modal .cx-modal-header,
    .cx-smart-detail-modal .cx-modal-body,
    .cx-smart-detail-modal .cx-modal-footer { padding:var(--cx-space-4); }
    .cx-smart-detail-toolbar { align-items:stretch; }
    .cx-smart-detail-toolbar-start, .cx-smart-detail-actions, .cx-smart-detail-search { width:100%; flex-basis:100%; }
    .cx-smart-detail-actions .cx-btn { flex:1 1 auto; }
    .cx-smart-detail-table-area .cx-table-wrap { max-height:46vh; }
    .cx-smart-detail-pagination { justify-content:center; }
    .cx-smart-detail-pagination .cx-pagination-info { width:100%; text-align:center; margin:0; }
    .cx-smart-detail-pagination .cx-field { flex:1 1 100%; }
  }
}

@layer components {
  .cx-smart-detail-modal .cx-modal-header {
    min-height: 76px;
    align-items: center;
  }
  .cx-smart-detail-modal .cx-modal-header h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.65rem); }
  .cx-smart-detail-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: center;
    gap: var(--cx-space-3);
    background: var(--cx-table-toolbar-bg);
    backdrop-filter: blur(14px);
  }
  .cx-smart-detail-toolbar-start { min-width: 0; flex: initial; width: 100%; }
  .cx-smart-detail-search { min-width: min(520px, 100%); flex: 1 1 520px; }
  .cx-smart-detail-search .cx-input { min-height: 46px; font-weight: 800; }
  .cx-smart-detail-actions { justify-content: flex-end; flex-wrap: nowrap; }
  .cx-smart-detail-pagination {
    background: var(--cx-table-toolbar-bg);
    backdrop-filter: blur(14px);
    justify-content: space-between;
  }
  .cx-smart-detail-page-size {
    display: inline-grid;
    grid-template-columns: auto minmax(84px, 104px);
    align-items: center;
    gap: .55rem;
    margin-inline-start: auto;
  }
  .cx-pagination-buttons { display: inline-flex; align-items: center; gap: .55rem; }
  .cx-smart-detail-table-area .cx-table-empty { min-height: 110px; }
  .cx-search-clear[hidden] { display: none !important; }
  @media (max-width: 820px) {
    .cx-smart-detail-toolbar { grid-template-columns: 1fr; }
    .cx-smart-detail-actions { justify-content: stretch; flex-wrap: wrap; }
    .cx-smart-detail-actions .cx-btn { flex: 1 1 auto; }
    .cx-smart-detail-pagination { justify-content: center; }
    .cx-smart-detail-page-size { margin-inline-start: 0; }
    .cx-pagination-buttons { width: 100%; justify-content: center; }
  }
}

/* Phase 31C — Costix modal and smart-detail visual consistency */
@layer components {
  .cx-modal {
    backdrop-filter: none;}
  .cx-modal-header,
  .cx-modal-footer {
    background: var(--cx-glass-strong);
    border-color: var(--cx-border);
  }
  .cx-modal-header h2 { color: var(--cx-text); }
  .cx-smart-detail-toolbar,
  .cx-smart-detail-pagination {
    background: var(--cx-table-toolbar-bg);
    border-color: var(--cx-border);
    backdrop-filter: none;
  }
  .cx-smart-detail-table-area .cx-table-wrap { background: var(--cx-surface); }
  .cx-smart-detail-page-size .cx-select,
  .cx-pagination-size .cx-select,
  .cx-pagination-size select {
    background: var(--cx-control-bg);
    border-color: var(--cx-control-border);
    color: var(--cx-text);
    border-radius: var(--cx-radius-md);
  }
}

/* Phase 35AM — Global modal layout standardization
   Modal ownership rules:
   - .cx-modal is always a three-row shell: header / body / footer.
   - Body is the only default scroll area.
   - Size classes control dimensions only; feature CSS must not force generic modal body grids.
   - Detail modals use .cx-modal-detail and .cx-modal-detail-layout for large table-heavy screens. */
@layer components {
  .cx-modal-backdrop {
    place-items: center;
    align-items: center;
    justify-items: center;
    padding: clamp(.75rem, 2vw, 1.5rem);
    overflow: hidden;
  }

  .cx-modal {
    --cx-modal-width: 760px;
    --cx-modal-max-height: min(86vh, 820px);
    width: min(var(--cx-modal-width), calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: var(--cx-modal-max-height);
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: clamp(18px, 2vw, 28px);
  }

  .cx-modal-sm { --cx-modal-width: 480px; --cx-modal-max-height: min(78vh, 640px); }
  .cx-modal-md { --cx-modal-width: 760px; --cx-modal-max-height: min(82vh, 760px); }
  .cx-modal-lg { --cx-modal-width: 980px; --cx-modal-max-height: min(86vh, 820px); }
  .cx-modal-xl { --cx-modal-width: 1180px; --cx-modal-max-height: min(88vh, 860px); }

  .cx-modal-header,
  .cx-modal-footer {
    min-width: 0;
    flex: 0 0 auto;
  }

  .cx-modal-header {
    min-height: 68px;
  }

  .cx-modal-header h2 {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  .cx-modal-body {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .cx-modal-body > * {
    max-width: 100%;
  }

  .cx-modal-detail {
    --cx-modal-width: 1440px;
    --cx-modal-max-height: min(90vh, 920px);
    height: var(--cx-modal-max-height);
    max-height: var(--cx-modal-max-height);
  }

  .cx-modal-detail.cx-modal-xl,
  .cx-modal-xl.cx-modal-detail {
    --cx-modal-width: 1440px;
  }

  .cx-modal-detail .cx-modal-body {
    overflow: hidden;
    background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
  }

  .cx-modal-detail-layout {
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--cx-space-4);
  }

  .cx-modal-detail-hero {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: var(--cx-space-4);
    align-items: stretch;
  }

  .cx-modal-detail-table-card {
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .cx-modal-detail-table-card > .cx-card-body {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }

  .cx-modal-detail-table-card .cx-table-wrap {
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow: auto;
  }

  .cx-modal-detail-table-card .cx-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  @media (max-width: 1024px) {
    .cx-modal,
    .cx-modal-lg,
    .cx-modal-xl,
    .cx-modal-detail {
      width: calc(100vw - 1rem);
      max-width: calc(100vw - 1rem);
    }
    .cx-modal-detail-hero { grid-template-columns: 1fr; }
  }

  @media (max-width: 720px) {
    .cx-modal-backdrop { padding: .5rem; align-items: stretch; }
    .cx-modal,
    .cx-modal-lg,
    .cx-modal-xl,
    .cx-modal-detail {
      width: 100%;
      max-width: 100%;
      height: calc(100vh - 1rem);
      max-height: calc(100vh - 1rem);
      border-radius: var(--cx-radius-lg);
    }
    .cx-modal-header,
    .cx-modal-body,
    .cx-modal-footer { padding: var(--cx-space-4); }
    .cx-modal-detail-layout { grid-template-rows: auto auto minmax(0, 1fr); gap: var(--cx-space-3); }
  }
}

/* phase40a compact global drawer variant */
@layer components {
  .cx-drawer.cx-drawer-compact { inline-size: min(520px, 100%); }
  .cx-drawer.cx-drawer-compact .cx-drawer-header,
  .cx-drawer.cx-drawer-compact .cx-drawer-body,
  .cx-drawer.cx-drawer-compact .cx-drawer-footer { padding: var(--cx-space-4); }
  .cx-drawer.cx-drawer-compact .cx-drawer-header h2 { font-size: 1.08rem; }
}

/* phase42 Global Insight Modal V2 */
@layer components {
  .cx-insight-modal-v2,
  .financial-center-detail-modal,
  .cost-control-detail-modal {
    width: min(1180px, calc(100vw - 2rem));
    max-height: min(90vh, 920px);
  }
  .cx-modal-title-stack { display:grid; gap:.32rem; min-width:0; }
  .cx-modal-title-stack h2 { margin:0; color:var(--cx-text);}
  .cx-modal-title-stack p { margin:0; color:var(--cx-muted); font-weight:800; line-height:1.7; }
  .cx-modal-meta { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
  .cx-modal-badge {
    display:inline-flex; align-items:center; gap:.35rem; min-height:1.6rem; padding:.22rem .58rem;
    border:1px solid var(--cx-border); border-radius:999px; font-weight:950; font-size:.76rem;}
  .cx-modal-badge[data-state="profit"], .cx-modal-badge[data-state="ok"] { color:var(--cx-sem-profit); background:var(--cx-sem-profit-soft); border-color:color-mix(in srgb, var(--cx-sem-profit) 24%, var(--cx-border)); }
  .cx-modal-badge[data-state="danger"], .cx-modal-badge[data-state="loss"] { color:var(--cx-sem-loss); background:var(--cx-sem-loss-soft); border-color:color-mix(in srgb, var(--cx-sem-loss) 28%, var(--cx-border)); }
  .cx-modal-badge[data-state="warning"], .cx-modal-badge[data-state="cost"] { color:var(--cx-sem-cost); background:var(--cx-sem-cost-soft); border-color:color-mix(in srgb, var(--cx-sem-cost) 28%, var(--cx-border)); }
  .cx-modal-summary-strip {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:.75rem;
    padding:var(--cx-space-4); border:1px solid var(--cx-border); border-radius:var(--cx-radius-xl); margin-block-end:var(--cx-space-4);}
  .cx-modal-summary-chip { display:grid; gap:.2rem; padding:.75rem; border-radius:var(--cx-radius-lg); border:1px solid rgba(132,93,190,.13);}
  .cx-modal-summary-chip span { color:var(--cx-muted); font-weight:900; font-size:.78rem; }
  .cx-modal-summary-chip strong { color:var(--cx-text); font-size:1rem; font-weight:1000; overflow-wrap:anywhere; }
  .cx-modal-summary-chip small { color:var(--cx-muted); font-weight:800; }
  .cx-modal-summary-chip[data-state="profit"] { box-shadow:inset 4px 0 0 var(--cx-sem-profit); }
  .cx-modal-summary-chip[data-state="danger"], .cx-modal-summary-chip[data-state="loss"] { box-shadow:inset 4px 0 0 var(--cx-sem-loss); }
  .cx-modal-summary-chip[data-state="warning"], .cx-modal-summary-chip[data-state="cost"] { box-shadow:inset 4px 0 0 var(--cx-sem-cost); }
  .cx-insight-layout { display:grid; gap:var(--cx-space-4); padding:var(--cx-space-5); }
  .cx-insight-block {
    display:grid; gap:.45rem; padding:var(--cx-space-4); border:1px solid var(--cx-border); border-radius:var(--cx-radius-xl);}
  .cx-insight-block h3 { margin:0; color:var(--cx-text); font-size:1rem; }
  .cx-insight-block p { margin:0; color:var(--cx-muted); line-height:1.8; font-weight:800; }
  .cx-insight-block code { display:inline-flex; width:max-content; max-width:100%; padding:.45rem .7rem; border-radius:.75rem; background:rgba(99,70,159,.08); color:var(--cx-brand-strong); font-weight:950; white-space:normal; }
  .cx-insight-block[data-state="profit"] { border-color:color-mix(in srgb, var(--cx-sem-profit) 24%, var(--cx-border)); background:var(--cx-sem-profit-soft); }
  .cx-insight-block[data-state="danger"] { border-color:color-mix(in srgb, var(--cx-sem-loss) 24%, var(--cx-border)); background:var(--cx-sem-loss-soft); }
  .cx-insight-block[data-state="cost"], .cx-insight-block[data-state="warning"] { border-color:color-mix(in srgb, var(--cx-sem-cost) 24%, var(--cx-border)); background:var(--cx-sem-cost-soft); }
  .cx-insight-section { display:grid; gap:var(--cx-space-3); min-width:0; }
  .cx-insight-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--cx-space-3); flex-wrap:wrap; }
  .cx-insight-section-head h3 { margin:0; color:var(--cx-text); font-size:1.05rem; }
  .cx-insight-section-head p { margin:0; color:var(--cx-muted); font-weight:800; }
  .cx-insight-modal-v2 .cx-modal-body,
  .financial-center-detail-modal .cx-modal-body,
  .cost-control-detail-modal .cx-modal-body { padding:0; overflow:auto; }
  @media (max-width:720px) {
    .cx-insight-layout { padding:var(--cx-space-3); }
    .cx-modal-summary-strip { grid-template-columns:1fr; padding:var(--cx-space-3); }
    .cx-insight-section-head { align-items:flex-start; }
  }
}

/* Phase47H — Global insight modal polish. Applies to Global Modal owner only. */
@layer components {
  .cx-modal-backdrop {
    background:
      radial-gradient(circle at 18% 12%, rgba(132, 93, 190, .28), transparent 34%),
      rgba(13, 9, 32, .66);
  }

  .cx-modal {
    border: 1px solid color-mix(in srgb, var(--cx-brand) 18%, var(--cx-border));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--cx-surface) 92%, var(--cx-brand-soft)), var(--cx-surface));
    box-shadow: 0 30px 80px rgba(18, 10, 38, .24);
  }

  .cx-modal-header {
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--cx-brand-soft) 42%, var(--cx-surface)),
        color-mix(in srgb, var(--cx-surface) 94%, var(--cx-brand-soft)));
    border-block-end: 1px solid color-mix(in srgb, var(--cx-brand) 16%, var(--cx-border));
  }

  .cx-modal-footer {
    background: color-mix(in srgb, var(--cx-surface) 88%, var(--cx-brand-soft));
    border-block-start: 1px solid color-mix(in srgb, var(--cx-brand) 12%, var(--cx-border));
  }

  .cx-modal-title-stack h2 {
    font-size: clamp(1.18rem, 1.7vw, 1.7rem);
    letter-spacing: -.01em;
  }

  .cx-modal-badge {
    background: color-mix(in srgb, var(--cx-surface) 76%, var(--cx-brand-soft));
    border-color: color-mix(in srgb, var(--cx-brand) 18%, var(--cx-border));
    color: var(--cx-brand-strong);
  }

  .cx-modal-summary-strip {
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--cx-surface) 88%, var(--cx-brand-soft)),
        color-mix(in srgb, var(--cx-surface) 96%, var(--cx-sem-profit-soft)));
    border-color: color-mix(in srgb, var(--cx-brand) 14%, var(--cx-border));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32);
  }

  .cx-modal-summary-chip {
    background: color-mix(in srgb, var(--cx-surface) 88%, transparent);
    border-color: color-mix(in srgb, var(--cx-brand) 12%, var(--cx-border));
  }

  .cx-insight-layout {
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--cx-brand-soft) 24%, transparent), transparent 36%),
      color-mix(in srgb, var(--cx-surface) 96%, var(--cx-brand-soft));
  }

  .cx-insight-block,
  .cx-insight-section {
    border-radius: var(--cx-radius-xl);
  }

  .cx-insight-block {
    background: color-mix(in srgb, var(--cx-surface) 88%, var(--cx-brand-soft));
  }

  .cost-control-detail-modal .cx-modal-body,
  .financial-center-detail-modal .cx-modal-body,
  .cx-insight-modal-v2 .cx-modal-body {
    background: color-mix(in srgb, var(--cx-surface) 95%, var(--cx-brand-soft));
  }

  .cost-control-detail-modal .cx-table-wrap,
  .financial-center-detail-modal .cx-table-wrap,
  .cx-insight-modal-v2 .cx-table-wrap {
    max-height: min(48vh, 520px);
  }

  [data-theme="dark"] .cx-modal,
  .theme-dark .cx-modal,
  html[data-theme="dark"] .cx-modal {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--cx-surface) 84%, #181026),
      color-mix(in srgb, var(--cx-surface) 78%, #0d0917));
    box-shadow: 0 34px 90px rgba(0,0,0,.45);
  }

  [data-theme="dark"] .cx-modal-header,
  .theme-dark .cx-modal-header,
  html[data-theme="dark"] .cx-modal-header,
  [data-theme="dark"] .cx-modal-footer,
  .theme-dark .cx-modal-footer,
  html[data-theme="dark"] .cx-modal-footer {
    background: color-mix(in srgb, var(--cx-surface) 84%, #161026);
  }
}

/* Phase47I — Cost insight modal action and colored detail cards */
@layer components {
  .cx-insight-modal-v2[data-semantic="danger"] .cx-modal-header,
  .cost-control-detail-modal[data-semantic="danger"] .cx-modal-header,
  .cx-insight-modal-v2[data-semantic="loss"] .cx-modal-header,
  .cost-control-detail-modal[data-semantic="loss"] .cx-modal-header {
    background: linear-gradient(135deg, var(--cx-sem-loss-soft), color-mix(in srgb, var(--cx-surface) 86%, var(--cx-sem-loss-soft)));
    border-color: color-mix(in srgb, var(--cx-sem-loss) 24%, var(--cx-border));
  }

  .cx-insight-modal-v2[data-semantic="warning"] .cx-modal-header,
  .cost-control-detail-modal[data-semantic="warning"] .cx-modal-header,
  .cx-insight-modal-v2[data-semantic="cost"] .cx-modal-header,
  .cost-control-detail-modal[data-semantic="cost"] .cx-modal-header {
    background: linear-gradient(135deg, var(--cx-sem-cost-soft), color-mix(in srgb, var(--cx-surface) 86%, var(--cx-sem-cost-soft)));
    border-color: color-mix(in srgb, var(--cx-sem-cost) 24%, var(--cx-border));
  }

  .cx-insight-modal-v2[data-semantic="profit"] .cx-modal-header,
  .cost-control-detail-modal[data-semantic="profit"] .cx-modal-header,
  .cx-insight-modal-v2[data-semantic="ok"] .cx-modal-header,
  .cost-control-detail-modal[data-semantic="ok"] .cx-modal-header {
    background: linear-gradient(135deg, var(--cx-sem-profit-soft), color-mix(in srgb, var(--cx-surface) 86%, var(--cx-sem-profit-soft)));
    border-color: color-mix(in srgb, var(--cx-sem-profit) 24%, var(--cx-border));
  }

  .cx-insight-actions {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:.7rem;
    flex-wrap:wrap;
    padding: var(--cx-space-3) var(--cx-space-4);
    border:1px solid color-mix(in srgb, var(--cx-brand) 16%, var(--cx-border));
    border-radius: var(--cx-radius-xl);
    background: color-mix(in srgb, var(--cx-surface) 88%, var(--cx-brand-soft));
  }

  .cx-insight-detail-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap:.75rem;
  }

  .cx-insight-detail-item {
    display:grid;
    gap:.25rem;
    padding:.85rem .95rem;
    border:1px solid color-mix(in srgb, var(--cx-brand) 12%, var(--cx-border));
    border-radius: var(--cx-radius-lg);
    background: color-mix(in srgb, var(--cx-surface) 90%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  }

  .cx-insight-detail-item span {
    color: var(--cx-muted);
    font-size:.78rem;
    font-weight:950;
  }

  .cx-insight-detail-item strong {
    color: var(--cx-text);
    font-size:1.02rem;
    font-weight:1000;
    overflow-wrap:anywhere;
  }
}

/* Phase47J — Keep insight modal action area clear and human-readable */
@layer components {
  .cx-insight-modal-v2 .cx-insight-actions {
    justify-content: flex-start;
  }
  .cx-insight-modal-v2 .cx-insight-detail-item strong .cx-cell-missing {
    color: var(--cx-sem-cost);
    font-weight: 1000;
  }
}