@layer components {
  /* ─── Card ─────────────────────────────────────────────────────────────── */
  .da-card {
    background: var(--da-surface);
    border: 1px solid var(--da-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
  }
  .da-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 12px; }
  .da-card-title { font-family: var(--da-font-display); font-size: 14px; font-weight: 700; color: var(--da-text); }
  /* Generic sub-header / section heading inside a card or panel — match h-* with display font */
  .da-section-title, .da-panel-title { font-family: var(--da-font-display); font-weight: 700; color: var(--da-text); }

  /* ─── KPI ──────────────────────────────────────────────────────────────── */
  .da-kpi {
    background: var(--da-surface);
    border: 1px solid var(--da-border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .15s ease;
  }
  .da-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
    border-color: var(--da-slate-300);
  }
  .da-kpi .lbl {
    font-size: 11px;
    color: var(--da-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .da-kpi .dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 999px;
    vertical-align: middle;
  }
  .da-kpi .val {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    color: var(--da-text);
    line-height: 1.2;
  }
  .da-kpi .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 11px;
    gap: 6px;
  }
  .da-kpi .delta-up { color: #059669; font-weight: 700; font-variant-numeric: tabular-nums; }
  .da-kpi .delta-dn { color: #e11d48; font-weight: 700; font-variant-numeric: tabular-nums; }
  :root[data-theme="dark"] .da-kpi .delta-up { color: #34d399; }
  :root[data-theme="dark"] .da-kpi .delta-dn { color: #fb7185; }
  .da-kpi .spark { flex-shrink: 0; opacity: 0.9; }

  @keyframes da-kpi-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .da-kpi-grid > .da-kpi { animation: da-kpi-in 400ms cubic-bezier(.2,.8,.2,1) backwards; }
  .da-kpi-grid > .da-kpi:nth-child(1) { animation-delay: 0ms; }
  .da-kpi-grid > .da-kpi:nth-child(2) { animation-delay: 60ms; }
  .da-kpi-grid > .da-kpi:nth-child(3) { animation-delay: 120ms; }
  .da-kpi-grid > .da-kpi:nth-child(4) { animation-delay: 180ms; }
  .da-kpi-grid > .da-kpi:nth-child(5) { animation-delay: 240ms; }
  .da-kpi-grid > .da-kpi:nth-child(6) { animation-delay: 300ms; }

  /* ─── Button ───────────────────────────────────────────────────────────── */
  .da-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
    line-height: 1;
    white-space: nowrap;
  }
  .da-btn, .da-btn:hover, .da-btn:focus, .da-btn:visited { text-decoration: none !important; }
  .da-btn-primary { background: var(--da-primary); color: #fff; border-color: var(--da-primary); }
  .da-btn-primary:hover { background: #0d9488; border-color: #0d9488; }
  .da-btn-secondary { background: var(--da-surface); color: var(--da-text); border-color: var(--da-border); }
  .da-btn-secondary:hover { border-color: var(--da-slate-300); background: var(--da-surface-muted); }
  .da-btn-ghost { background: transparent; color: var(--da-text-muted); }
  .da-btn-ghost:hover { background: var(--da-surface-muted); color: var(--da-text); }
  .da-btn-danger { background: #f43f5e; color: #fff; border-color: #f43f5e; }
  .da-btn-danger:hover { background: #e11d48; border-color: #e11d48; }
  .da-btn-sm { padding: 6px 10px; font-size: 11px; border-radius: 8px; }
  .da-btn:focus-visible { outline: 2px solid var(--da-primary); outline-offset: 2px; }
  .da-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

  a.da-badge, a.da-badge:hover { text-decoration: none !important; }
  .da-tbl a, .da-tbl a:hover { text-decoration: none; }

  /* ─── Chip (filter bar) ───────────────────────────────────────────────── */
  .da-chip {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--da-surface-muted);
    border: 1px solid var(--da-border);
    font-size: 12px;
    font-weight: 500;
    color: var(--da-slate-700);
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    user-select: none;
  }
  :root[data-theme="dark"] .da-chip { color: var(--da-text); }
  .da-chip:hover { border-color: var(--da-slate-300); }
  .da-chip.active { background: var(--da-primary); color: #fff; border-color: var(--da-primary); }
  .da-chip .x { opacity: 0.8; margin-left: 2px; }

  /* ─── Tabs (pill group) ────────────────────────────────────────────────── */
  .da-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--da-surface-muted);
    border-radius: 10px;
  }
  .da-tab {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--da-slate-600);
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
  }
  :root[data-theme="dark"] .da-tab { color: var(--da-text-muted); }
  .da-tab:hover { color: var(--da-text); }
  .da-tab.active { background: var(--da-surface); color: var(--da-text); box-shadow: 0 1px 2px rgba(15,23,42,.06); }

  /* ─── Badge ────────────────────────────────────────────────────────────── */
  .da-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
  }
  .da-badge-success { background: var(--da-chip-success-bg); color: var(--da-chip-success-fg); }
  .da-badge-danger  { background: var(--da-chip-danger-bg);  color: var(--da-chip-danger-fg); }
  .da-badge-warning { background: var(--da-chip-warning-bg); color: var(--da-chip-warning-fg); }
  .da-badge-info    { background: var(--da-chip-info-bg);    color: var(--da-chip-info-fg); }
  .da-badge-ioh     { background: var(--da-chip-ioh-bg);     color: var(--da-chip-ioh-fg); }
  .da-badge-im3     { background: var(--da-chip-im3-bg);     color: var(--da-chip-im3-fg); }
  .da-badge-3id     { background: var(--da-chip-3id-bg);     color: var(--da-chip-3id-fg); }

  /* ─── Ranking rows (Top 5) ─────────────────────────────────────────────── */
  .da-rank { font-size: 12px; display: flex; flex-direction: column; }
  .da-rank .da-rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--da-border);
    color: var(--da-text);
  }
  .da-rank a.da-rank-row, .da-rank a.da-rank-row:hover { text-decoration: none; color: var(--da-text); }
  .da-rank a.da-rank-row:hover { color: var(--da-primary); }
  .da-rank .da-rank-row:last-child { border-bottom: none; }
  .da-rank .da-rank-idx { color: var(--da-text-muted); font-weight: 700; width: 14px; flex-shrink: 0; }
  .da-rank .da-rank-n { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .da-rank .da-rank-v { font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; }
  .da-rank .da-rank-pill { padding: 1px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; flex-shrink: 0; display: inline-block; }

  /* ─── Chart area helper ────────────────────────────────────────────────── */
  .da-chart-area {
    height: 200px;
    background: linear-gradient(180deg, rgba(15,23,42,0.02), transparent);
    border-radius: 8px;
    position: relative;
  }
  :root[data-theme="dark"] .da-chart-area { background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }

  /* ─── Chart card (DA.chart factory) ────────────────────────────────────── */
  .da-chart-card {
    background: var(--da-surface);
    border: 1px solid var(--da-border);
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.03);
    position: relative;
    overflow: hidden;
    transition: box-shadow 180ms ease, transform 180ms ease;
  }
  .da-chart-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--da-brand-ioh, #25BDAD), var(--da-brand-im3, #FFCB08), var(--da-brand-3id, #C6168D));
    opacity: 0.7;
  }
  .da-chart-card:hover { box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 10px 28px rgba(15,23,42,.06); }

  .da-chart-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    margin-bottom: 12px; flex-wrap: wrap;
  }
  .da-chart-titles { min-width: 0; }
  .da-chart-title {
    font-size: 15px; font-weight: 700; color: var(--da-text);
    letter-spacing: -0.01em; margin-bottom: 2px; line-height: 1.2;
  }
  .da-chart-sub {
    font-size: 12px; color: var(--da-text-muted); font-weight: 500;
  }
  .da-chart-actions { display: flex; gap: 6px; align-items: center; }

  .da-chart-legend {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    max-width: 100%;
  }
  .da-chart-leg-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--da-surface-muted);
    border: 1px solid var(--da-border);
    font-size: 11px; font-weight: 600; color: var(--da-text);
    cursor: pointer; transition: background 140ms, opacity 140ms;
  }
  .da-chart-leg-item:hover { background: var(--da-bg-alt, #f1f5f9); }
  .da-chart-leg-item.off { opacity: 0.4; text-decoration: line-through; }
  .da-chart-leg-sw {
    width: 10px; height: 10px; border-radius: 999px;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 0%, transparent);
    flex-shrink: 0;
  }

  .da-chart-body {
    position: relative;
    height: 260px;
    margin: 0 -4px;
  }
  .da-chart-body.compact { height: 200px; }
  .da-chart-body.tall    { height: 320px; }

  .da-chart-insight {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 9px 12px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--da-primary) 8%, transparent),
      color-mix(in srgb, var(--da-primary) 2%, transparent));
    border: 1px solid color-mix(in srgb, var(--da-primary) 14%, transparent);
    border-radius: 10px;
    font-size: 12px; color: var(--da-text); line-height: 1.5;
  }
  .da-chart-insight i { color: var(--da-primary); font-size: 16px; flex-shrink: 0; }
  .da-chart-insight b { font-weight: 700; color: var(--da-primary); }
  .da-chart-insight:empty { display: none; }

  :root[data-theme="dark"] .da-chart-insight {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--da-primary) 18%, transparent),
      color-mix(in srgb, var(--da-primary) 6%, transparent));
  }

  /* ─── Legend ───────────────────────────────────────────────────────────── */
  .da-legend { display: flex; gap: 10px; font-size: 11px; }
  .da-legend span { display: flex; align-items: center; gap: 4px; color: var(--da-text-muted); }
  .da-legend .l-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }

  /* ─── Table ────────────────────────────────────────────────────────────── */
  .da-tbl-wrap {
    background: var(--da-surface);
    border: 1px solid var(--da-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
  }
  .da-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
  .da-tbl th {
    background: var(--da-surface-muted);
    color: var(--da-slate-600);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--da-border);
    white-space: nowrap;
  }
  :root[data-theme="dark"] .da-tbl th { color: var(--da-text-muted); }
  .da-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--da-border); color: var(--da-text); }
  .da-tbl tbody tr:last-child td { border-bottom: none; }
  .da-tbl tbody tr:hover td { background: var(--da-surface-muted); }
  .da-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

  /* DataTables integration */
  .dataTables_wrapper {
    font-family: var(--da-font-sans);
    font-size: 13px;
    color: var(--da-text);
    padding: 10px 12px;
  }
  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_info {
    color: var(--da-text-muted);
    font-size: 11px;
    font-weight: 500;
  }
  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    background: var(--da-surface);
    border: 1px solid var(--da-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--da-text);
    margin-left: 6px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .dataTables_wrapper .dataTables_filter input:focus,
  .dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--da-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--da-primary) 15%, transparent);
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 10px !important;
    margin: 0 1px;
    border-radius: 6px !important;
    border: none !important;
    background: transparent !important;
    color: var(--da-text-muted) !important;
    font-size: 11px;
    font-weight: 600;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--da-surface-muted) !important;
    color: var(--da-text) !important;
    border: none !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--da-primary) !important;
    color: #fff !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.35; cursor: not-allowed; }
  .dataTables_wrapper table.dataTable thead th {
    background: var(--da-surface-muted) !important;
    color: var(--da-slate-600) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--da-border);
  }
  :root[data-theme="dark"] .dataTables_wrapper table.dataTable thead th { color: var(--da-text-muted) !important; }
  .dataTables_wrapper table.dataTable tbody tr { transition: background .15s ease; }
  .dataTables_wrapper table.dataTable tbody tr:hover { background: var(--da-surface-muted) !important; }
  .dataTables_wrapper table.dataTable tbody td { border-bottom: 1px solid var(--da-border); color: var(--da-text); }
  .dataTables_wrapper table.dataTable.no-footer { border-bottom: none; }

  /* ─── Form ─────────────────────────────────────────────────────────────── */
  .da-input, .da-select, .da-textarea {
    background: var(--da-surface);
    border: 1px solid var(--da-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--da-text);
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
  }
  .da-input:focus, .da-select:focus, .da-textarea:focus {
    outline: none;
    border-color: var(--da-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--da-primary) 15%, transparent);
  }
  /* Option list (native dropdown popup). Firefox honors these fully;
     Chrome/Safari will respect color-scheme from html[data-theme]. */
  select option {
    background-color: var(--da-surface);
    color: var(--da-text);
  }
  .da-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--da-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* ─── Skeleton ─────────────────────────────────────────────────────────── */
  @keyframes da-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
  .da-skel {
    background: linear-gradient(90deg, var(--da-surface-muted) 0%, var(--da-border) 50%, var(--da-surface-muted) 100%);
    background-size: 200% 100%;
    animation: da-shimmer 1.6s linear infinite;
    border-radius: 6px;
  }

  /* ─── Modal ────────────────────────────────────────────────────────────── */
  .da-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    z-index: 1040;
    opacity: 0; pointer-events: none;
    transition: opacity .26s ease;
  }
  .da-modal-backdrop.open { opacity: 1; pointer-events: auto; }
  .da-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, calc(-50% + 8px));
    background: var(--da-surface);
    border: 1px solid var(--da-border);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(15,23,42,.08), 0 4px 8px rgba(15,23,42,.05);
    max-width: 90vw;
    z-index: 1050;
    opacity: 0; pointer-events: none;
    transition: opacity .26s ease, transform .26s ease;
  }
  .da-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }

  /* ─── Toast ────────────────────────────────────────────────────────────── */
  .da-toast-region { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
  .da-toast {
    pointer-events: auto;
    background: var(--da-surface);
    border: 1px solid var(--da-border);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
    font-size: 13px;
    min-width: 240px;
    animation: da-toast-in .26s ease backwards;
  }
  @keyframes da-toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  .da-toast.success { border-left: 3px solid #10b981; }
  .da-toast.error   { border-left: 3px solid #f43f5e; }
  .da-toast.info    { border-left: 3px solid #0ea5e9; }

  /* ─── Tab panels ───────────────────────────────────────────────────────── */
  .da-tab-panel { animation: da-fade-in .26s ease; }
  @keyframes da-fade-in { from { opacity: 0; } to { opacity: 1; } }

  /* ─── Stockbit-style density: range chips ──────────────────────────── */
  .da-fb-range {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: var(--da-surface-muted);
    border: 1px solid var(--da-border);
    margin-left: 8px;
  }
  .da-fb-range-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--da-text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background 120ms, color 120ms;
  }
  .da-fb-range-btn:hover { color: var(--da-text); }
  .da-fb-range-btn.active {
    background: var(--da-primary);
    color: #fff;
  }

  /* ─── Sparkline ────────────────────────────────────────────────────── */
  .da-sbx-spark {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
  }

  /* ─── Delta pill (compact) ─────────────────────────────────────────── */
  .da-sbx-delta {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .da-sbx-delta.up { color: #059669; background: color-mix(in srgb, #059669 12%, transparent); }
  .da-sbx-delta.dn { color: #dc2626; background: color-mix(in srgb, #dc2626 12%, transparent); }
  :root[data-theme="dark"] .da-sbx-delta.up { color: #34d399; background: color-mix(in srgb, #34d399 16%, transparent); }
  :root[data-theme="dark"] .da-sbx-delta.dn { color: #fb7185; background: color-mix(in srgb, #fb7185 16%, transparent); }

  /* ─── Dense cell (in tables) ───────────────────────────────────────── */
  .da-sbx-dense-cell {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-variant-numeric: tabular-nums;
  }
  .da-sbx-dense-cell .v { font-weight: 600; }

  /* ─── Ticker bar ───────────────────────────────────────────────────── */
  .da-sbx-ticker {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding: 10px 4px;
    background: var(--da-surface);
    border: 1px solid var(--da-border);
    border-radius: 12px;
    margin-bottom: 16px;
  }
  .da-sbx-ticker::-webkit-scrollbar { height: 6px; }
  .da-sbx-ticker-item {
    flex-shrink: 0;
    min-width: 160px;
    padding: 8px 14px;
    border-right: 1px solid var(--da-border);
  }
  .da-sbx-ticker-item:last-child { border-right: 0; }
  .da-sbx-ticker-item .label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--da-text-muted);
    margin-bottom: 3px;
  }
  .da-sbx-ticker-item .row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 2px;
  }
  .da-sbx-ticker-item .value {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--da-text);
    letter-spacing: -0.01em;
  }
  .da-sbx-ticker-item .delta { min-height: 14px; }

  /* ─── KPI dense variant ────────────────────────────────────────────── */
  .da-kpi.dense {
    padding: 12px 14px;
  }
  .da-kpi.dense .lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--da-text-muted);
    margin-bottom: 4px;
  }
  .da-kpi.dense .val-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .da-kpi.dense .val {
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .da-kpi.dense .spark-row { min-height: 18px; }

  /* ─── Table dense + sparkline column ──────────────────────────────── */
  .da-tbl-dense td { padding: 6px 10px; font-size: 12.5px; }
  .da-tbl-dense .num { font-variant-numeric: tabular-nums; }
  .da-tbl-spark { width: 70px; text-align: right; }

  /* ─── Mobile: hide sparklines on narrow viewports ─────────────────── */
  @media (max-width: 640px) {
    .da-sbx-spark,
    .da-tbl-spark,
    .da-kpi.dense .spark-row { display: none; }
    .da-sbx-ticker-item { min-width: 140px; }
  }

  /* ─── Dual delta pill label ────────────────────────────────────────── */
  .da-sbx-delta sub {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 3px;
    vertical-align: baseline;
    position: relative;
    top: -1px;
  }
  .da-sbx-delta + .da-sbx-delta { margin-left: 6px; }

  /* ─── As-of override chip (page head) ───────────────────────────────── */
  .da-asof-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--da-text-muted);
    background: var(--da-surface-muted);
    border: 1px solid var(--da-border);
    border-radius: 999px;
    margin-left: 10px;
    vertical-align: middle;
  }
  .da-asof-chip-lbl { text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
  .da-asof-chip-val { color: var(--da-text); font-weight: 700; font-variant-numeric: tabular-nums; }
  .da-asof-chip.override { border-color: var(--da-primary); color: var(--da-primary); background: color-mix(in srgb, var(--da-primary) 6%, transparent); }
  .da-asof-chip button {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    padding: 2px 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
  }
  .da-asof-chip button:hover { background: var(--da-surface); }

  /* ─── Compare module ───────────────────────────────────────────────── */
  .da-cmp-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .da-cmp-side {
    padding: 14px;
    border: 2px solid var(--da-border);
    border-radius: 12px;
    background: var(--da-surface);
  }
  .da-cmp-side.side-a { border-color: color-mix(in srgb, #4338ca 40%, var(--da-border)); }
  .da-cmp-side.side-b { border-color: color-mix(in srgb, #7c3aed 40%, var(--da-border)); }
  .da-cmp-side-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--da-text);
    margin-bottom: 10px;
  }
  .da-cmp-side-title .dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
  .da-cmp-side.side-a .da-cmp-side-title .dot { background: #4338ca; }
  .da-cmp-side.side-b .da-cmp-side-title .dot { background: #7c3aed; }
  .da-cmp-filter-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; font-size: 12px; }
  .da-cmp-filter-row label { min-width: 56px; font-weight: 600; color: var(--da-text-muted); }
  .da-cmp-filter-row select { flex: 1; padding: 4px 8px; border: 1px solid var(--da-border); border-radius: 6px; font-size: 12px; background: var(--da-card-bg, #fff); color: var(--da-text); }

  .da-cmp-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

  .da-cmp-grid {
    width: 100%;
    border: 1px solid var(--da-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .da-cmp-grid table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .da-cmp-grid th {
    background: var(--da-surface-muted);
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--da-text-muted);
  }
  .da-cmp-grid td { padding: 10px 14px; border-top: 1px solid var(--da-border); font-variant-numeric: tabular-nums; }
  .da-cmp-grid tr:hover td { background: color-mix(in srgb, var(--da-primary) 3%, transparent); }
  .da-cmp-grid .a-val { color: #4338ca; font-weight: 700; }
  .da-cmp-grid .b-val { color: #7c3aed; font-weight: 700; }
  .da-cmp-grid .winner { font-weight: 700; font-size: 12px; }
  .da-cmp-grid .winner.a { color: #4338ca; }
  .da-cmp-grid .winner.b { color: #7c3aed; }

  @media (max-width: 640px) {
    .da-cmp-filters { grid-template-columns: 1fr; }
    .da-sbx-delta sub { display: none; }
    .da-sbx-delta + .da-sbx-delta { display: none; }
  }

  /* ─── T3: severity-tinted insight banner ──────────────────────────── */
  .da-chart-insight.severity-danger {
    background: linear-gradient(90deg, color-mix(in srgb, #dc2626 14%, transparent), color-mix(in srgb, #dc2626 4%, transparent));
    border-color: color-mix(in srgb, #dc2626 24%, transparent);
  }
  .da-chart-insight.severity-danger i,
  .da-chart-insight.severity-danger b { color: #dc2626; }

  .da-chart-insight.severity-warning {
    background: linear-gradient(90deg, color-mix(in srgb, #d97706 14%, transparent), color-mix(in srgb, #d97706 4%, transparent));
    border-color: color-mix(in srgb, #d97706 24%, transparent);
  }
  .da-chart-insight.severity-warning i,
  .da-chart-insight.severity-warning b { color: #d97706; }

  .da-chart-insight.severity-success {
    background: linear-gradient(90deg, color-mix(in srgb, #059669 14%, transparent), color-mix(in srgb, #059669 4%, transparent));
    border-color: color-mix(in srgb, #059669 24%, transparent);
  }
  .da-chart-insight.severity-success i,
  .da-chart-insight.severity-success b { color: #059669; }

  /* ─── T5: Freshness badge (topbar) ───────────────────────────────── */
  .da-freshness-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--da-text-muted);
    background: var(--da-surface-muted);
    border: 1px solid var(--da-border);
    border-radius: 999px;
    cursor: default;
    transition: color 120ms, background 120ms, border-color 120ms;
  }
  .da-freshness-badge .da-freshness-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: #94a3b8;
    flex-shrink: 0;
  }
  .da-freshness-badge.fresh  { color: #059669; border-color: color-mix(in srgb, #059669 30%, var(--da-border)); background: color-mix(in srgb, #059669 6%, var(--da-surface-muted)); }
  .da-freshness-badge.fresh  .da-freshness-dot { background: #059669; box-shadow: 0 0 0 3px color-mix(in srgb, #059669 30%, transparent); animation: da-freshness-pulse 2s infinite; }
  .da-freshness-badge.stale  { color: #d97706; border-color: color-mix(in srgb, #d97706 30%, var(--da-border)); background: color-mix(in srgb, #d97706 8%, var(--da-surface-muted)); }
  .da-freshness-badge.stale  .da-freshness-dot { background: #d97706; }
  .da-freshness-badge.error  { color: #dc2626; border-color: color-mix(in srgb, #dc2626 30%, var(--da-border)); background: color-mix(in srgb, #dc2626 8%, var(--da-surface-muted)); }
  .da-freshness-badge.error  .da-freshness-dot { background: #dc2626; }
  @keyframes da-freshness-pulse {
    0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, #059669 30%, transparent); }
    50%     { box-shadow: 0 0 0 5px color-mix(in srgb, #059669 10%, transparent); }
  }
  @media (max-width: 640px) { .da-freshness-badge .da-freshness-txt { display: none; } }

  /* ─── Watchlist inline toggle button ─────────────────────────────── */
  .da-watch-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--da-border);
    background: var(--da-surface);
    color: var(--da-text-muted);
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms, transform 100ms;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .da-watch-btn:hover {
    background: var(--da-surface-muted);
    border-color: var(--da-primary);
    color: var(--da-primary);
  }
  .da-watch-btn:active { transform: scale(0.94); }
  .da-watch-btn.on {
    background: color-mix(in srgb, #f59e0b 15%, var(--da-surface));
    border-color: #f59e0b;
    color: #b45309;
  }
  :root[data-theme="dark"] .da-watch-btn.on { color: #fbbf24; }
  .da-watch-btn i { font-size: 14px; }

  /* ─── T4: Breadcrumbs ─────────────────────────────────────────────── */
  .da-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--da-text-muted);
    margin-left: 8px;
  }
  .da-breadcrumbs-item {
    color: var(--da-text-muted);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 120ms, color 120ms;
  }
  a.da-breadcrumbs-item:hover {
    background: var(--da-surface-muted);
    color: var(--da-text);
  }
  .da-breadcrumbs-item.current {
    color: var(--da-text);
    font-weight: 700;
    cursor: default;
  }
  .da-breadcrumbs-sep {
    color: var(--da-border);
    font-weight: 300;
    user-select: none;
  }

  /* ─── T3: mini-insight pill (below sparklines) ────────────────────── */
  .da-sbx-mini {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .da-sbx-mini.flat    { color: #6b7280; background: color-mix(in srgb, #6b7280 10%, transparent); }
  .da-sbx-mini.up      { color: #059669; background: color-mix(in srgb, #059669 10%, transparent); }
  .da-sbx-mini.strong  { color: #047857; background: color-mix(in srgb, #047857 14%, transparent); }
  .da-sbx-mini.dn      { color: #dc2626; background: color-mix(in srgb, #dc2626 10%, transparent); }
  .da-sbx-mini.drop    { color: #991b1b; background: color-mix(in srgb, #991b1b 14%, transparent); }
  .da-sbx-mini.neutral { color: #6b7280; background: transparent; font-style: italic; }
  :root[data-theme="dark"] .da-sbx-mini.up     { color: #34d399; }
  :root[data-theme="dark"] .da-sbx-mini.strong { color: #6ee7b7; }
  :root[data-theme="dark"] .da-sbx-mini.dn     { color: #fb7185; }
  :root[data-theme="dark"] .da-sbx-mini.drop   { color: #fca5a5; }

  /* ═══════════════════════════════════════════════════════════════════
     MOBILE IMPROVEMENTS (≤ 768px)
     ═══════════════════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    /* Wide tables — ensure horizontal scroll is smooth on touch */
    .da-tbl-wrap { -webkit-overflow-scrolling: touch; border-radius: 10px; }
    .da-tbl { font-size: 12px; }
    .da-tbl th { padding: 8px 10px; font-size: 10px; }
    .da-tbl td { padding: 8px 10px; }

    /* KPI cards — tighter */
    .da-kpi { padding: 12px; }
    .da-kpi .val { font-size: 20px; }
    .da-kpi.dense { padding: 10px 12px; }
    .da-kpi.dense .val { font-size: 18px; }

    /* Chart cards — title/legend wrap cleanly */
    .da-chart-card { padding: 14px; }
    .da-chart-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .da-chart-legend { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .da-chart-leg-item { flex-shrink: 0; }
    .da-chart-body { height: 220px; }
    .da-chart-body.tall { height: 280px; }
    .da-chart-title { font-size: 14px; }
    .da-chart-sub { font-size: 11px; }

    /* Ticker — tighter cells */
    .da-sbx-ticker { padding: 8px 4px; margin-bottom: 12px; }
    .da-sbx-ticker-item { min-width: 130px; padding: 6px 10px; }
    .da-sbx-ticker-item .value { font-size: 15px; }

    /* Ranking rows (Top 5) - more compact */
    .da-rank .da-rank-row { padding: 6px 0; font-size: 12px; }

    /* Card padding */
    .da-card { padding: 12px; border-radius: 10px; }
    .da-card-head { margin-bottom: 8px; }
    .da-card-title { font-size: 13px; }

    /* Compare module filters stack; ticker hides YoY pill */
    .da-cmp-actions { gap: 6px; }
    .da-cmp-actions .da-btn { flex: 1 1 calc(50% - 3px); min-width: 0; justify-content: center; }
    .da-cmp-actions .da-btn:last-child { flex-basis: 100%; }

    /* Watchlist + Monthly Report tables — keep horizontal scroll responsive */
    .pr-tbl-wrap, .da-tbl-wrap { margin: 0 -12px; padding: 0 12px; }

    /* Topbar freshness badge — icon-only on narrow */
    .da-freshness-badge { padding: 4px 8px; }

    /* Breadcrumbs slot in topbar — hide separator when only current */
    .da-breadcrumbs { font-size: 11px; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     SMALL PHONE (≤ 480px)
     ═══════════════════════════════════════════════════════════════════ */
  @media (max-width: 480px) {
    .da-kpi-grid.da-grid-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
    .da-kpi { padding: 10px; }
    .da-kpi .val { font-size: 18px; }
    .da-kpi.dense .val { font-size: 16px; }
    .da-kpi.dense .lbl { font-size: 9px; }

    .da-sbx-ticker-item { min-width: 120px; padding: 6px 8px; }
    .da-sbx-ticker-item .value { font-size: 14px; }

    .da-chart-body { height: 200px; }
    .da-chart-body.tall { height: 240px; }
    .da-chart-card { padding: 10px; }

    /* DataTable footer controls stack */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
      float: none !important;
      text-align: left !important;
      margin: 6px 0 !important;
    }

    /* Hide breadcrumbs slot entirely on smallest screens (page title enough) */
    #daCrumbsSlot { display: none !important; }

    /* Tabs — allow horizontal scroll rather than wrap */
    .da-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .da-tabs::-webkit-scrollbar { display: none; }
    .da-tabs .da-tab { flex-shrink: 0; }

    /* Watch button — slightly larger tap target */
    .da-watch-btn { width: 32px; height: 32px; }
    .da-watch-btn i { font-size: 16px; }
  }
}