/* ═══════════════════════════════════════════════════════════════════════
   CELESYS DESIGN SYSTEM — r61.0
   Aladdin-grade, light theme, medium density.

   This file is ADDITIVE. It defines new tokens and component classes
   that future screens (Active Trading v2, Deep DD v2, etc.) consume.
   It does NOT modify or override any existing styles. Safe to deploy.

   Philosophy:
     1. White background, navy primary, monospace numerics
     2. Medium density — 12px base, 8px padding, breathable but dense
     3. Information hierarchy via type weight + color, not size
     4. Color is data — green/red/amber are reserved for data signals
     5. Borders are 1px and grey — never decorative

   Token namespacing:  --cs-* (Celesys System)
   Class namespacing:  cs-* (Celesys component)
   Existing var(--bg), var(--text), etc. left UNTOUCHED for legacy code.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS — single source of truth ─────────────────────────── */
:root {
  /* Surfaces — Aladdin neutrals */
  --cs-bg:           #f5f7fa;       /* page background, slight cool grey */
  --cs-surface:      #ffffff;       /* primary panel surface */
  --cs-surface-alt:  #f8fafc;       /* zebra striping, table headers */
  --cs-surface-hover:#f1f5f9;       /* row hover */

  /* Borders — quiet, structural only */
  --cs-border:       #e2e8f0;       /* default panel/divider */
  --cs-border-strong:#cbd5e1;       /* table headers, focus */
  --cs-border-focus: #1A3A78;       /* active states */

  /* Text — 4-tier hierarchy */
  --cs-text:         #0f172a;       /* primary content */
  --cs-text-2:       #334155;       /* secondary, body */
  --cs-text-3:       #64748b;       /* labels, captions */
  --cs-text-4:       #94a3b8;       /* placeholder, muted */

  /* Brand — institutional navy */
  --cs-navy:         #1A3A78;       /* primary actions, headers */
  --cs-navy-hover:   #142e5c;
  --cs-navy-soft:    #eef2f9;       /* selected backgrounds */
  --cs-navy-text:    #0f2548;       /* navy text on white */

  /* Data signals — never decorative */
  --cs-pos:          #047857;       /* gains, beats, green flags */
  --cs-pos-soft:     #d1fae5;
  --cs-pos-bg:       #ecfdf5;
  --cs-neg:          #b91c1c;       /* losses, misses, red flags */
  --cs-neg-soft:     #fee2e2;
  --cs-neg-bg:       #fef2f2;
  --cs-warn:         #b45309;       /* caution, partial data */
  --cs-warn-soft:    #fef3c7;
  --cs-warn-bg:      #fffbeb;
  --cs-info:         #1e40af;       /* informational */
  --cs-info-soft:    #dbeafe;
  --cs-info-bg:      #eff6ff;
  --cs-neutral:      #475569;       /* no signal */
  --cs-neutral-soft: #e2e8f0;

  /* Type — institutional pairing */
  --cs-font-text:    'Inter', -apple-system, system-ui, sans-serif;
  --cs-font-mono:    'IBM Plex Mono', 'Roboto Mono', ui-monospace, monospace;

  /* Type scale — medium density: 11/12/13/14/16 only */
  --cs-fs-micro:     10px;          /* status badges, captions */
  --cs-fs-small:     11px;          /* labels, metadata */
  --cs-fs-body:      12px;          /* default body, table cells */
  --cs-fs-data:      13px;          /* numeric values */
  --cs-fs-heading:   14px;          /* panel headers */
  --cs-fs-hero:      18px;          /* big numbers (verdicts) */
  --cs-fs-display:   24px;          /* hero values only */

  /* Weight scale */
  --cs-fw-regular:   400;
  --cs-fw-medium:    500;
  --cs-fw-semi:      600;
  --cs-fw-bold:      700;
  --cs-fw-black:     800;

  /* Spacing — 4px base grid */
  --cs-sp-1:  4px;
  --cs-sp-2:  8px;
  --cs-sp-3:  12px;
  --cs-sp-4:  16px;
  --cs-sp-5:  20px;
  --cs-sp-6:  24px;
  --cs-sp-8:  32px;

  /* Radius — flat, institutional */
  --cs-r-1: 3px;       /* badges, chips */
  --cs-r-2: 4px;       /* buttons, inputs */
  --cs-r-3: 6px;       /* panels, cards */
  --cs-r-4: 8px;       /* large surfaces */

  /* Elevation — subtle, no drop shadows on flat panels */
  --cs-elev-0: none;
  --cs-elev-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --cs-elev-2: 0 2px 6px rgba(15, 23, 42, 0.06);

  /* Layout */
  --cs-header-h:     40px;
  --cs-subheader-h:  32px;
  --cs-tabbar-h:     36px;
  --cs-row-h:        32px;          /* compact data rows */
  --cs-row-h-tight:  28px;          /* dense scanner rows */
}

/* ─── 2. RESET WITHIN cs-app ROOTS ───────────────────────────────── */
.cs-app {
  font-family: var(--cs-font-text);
  font-size: var(--cs-fs-body);
  color: var(--cs-text);
  background: var(--cs-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cs-app *, .cs-app *::before, .cs-app *::after { box-sizing: border-box; }

/* ─── 3. LAYOUT PRIMITIVES — fixed grids, no scroll ──────────────── */

/* Workspace = full-screen container, fixed grid, never overflows */
.cs-workspace {
  display: grid;
  grid-template-rows: var(--cs-header-h) var(--cs-subheader-h) var(--cs-tabbar-h) 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Canvas = the swappable area below tabs (fills remaining height) */
.cs-canvas {
  display: grid;
  grid-template-columns: 360px 1fr;     /* fixed left rail, flexible right */
  gap: 0;
  background: var(--cs-bg);
  overflow: hidden;
  min-height: 0;
}

/* Left rail = persistent across tabs (top trades, monitor, mini-scanner) */
.cs-rail {
  background: var(--cs-surface);
  border-right: 1px solid var(--cs-border);
  display: grid;
  grid-template-rows: auto auto 1fr;     /* trades / monitor / mini-scanner */
  min-height: 0;
  overflow: hidden;
}

/* Right pane = swaps based on active tab, internal grid */
.cs-pane {
  display: grid;
  background: var(--cs-bg);
  min-height: 0;
  overflow: hidden;
  padding: var(--cs-sp-2);
  gap: var(--cs-sp-2);
}
/* Pane variants: */
.cs-pane--trades   { grid-template-rows: auto 1fr auto; }      /* selected detail / chain / voice */
.cs-pane--earnings { grid-template-rows: auto 1fr; }
.cs-pane--scanner  { grid-template-rows: 1fr; }
.cs-pane--analytics{ grid-template: repeat(2, 1fr) / repeat(3, 1fr); } /* 2x3 grid */
.cs-pane--risk     { grid-template-rows: auto auto 1fr; }


/* ─── 4. CHROME COMPONENTS — header, subheader, tabbar ──────────── */

.cs-header {
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-border);
  display: flex;
  align-items: center;
  padding: 0 var(--cs-sp-3);
  gap: var(--cs-sp-3);
  font-family: var(--cs-font-mono);
  font-size: var(--cs-fs-small);
  letter-spacing: 0.4px;
  color: var(--cs-text-2);
}
.cs-header__brand {
  font-weight: var(--cs-fw-black);
  color: var(--cs-navy-text);
  font-size: var(--cs-fs-body);
  letter-spacing: 0.5px;
}
.cs-header__divider {
  width: 1px; height: 18px; background: var(--cs-border);
}
.cs-header__spacer { flex: 1; }

.cs-subheader {
  background: var(--cs-surface-alt);
  border-bottom: 1px solid var(--cs-border);
  display: flex;
  align-items: center;
  padding: 0 var(--cs-sp-3);
  gap: var(--cs-sp-2);
  font-size: var(--cs-fs-small);
  color: var(--cs-text-3);
}

.cs-tabbar {
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-border);
  display: flex;
  align-items: stretch;
  padding: 0 var(--cs-sp-2);
}
.cs-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--cs-sp-3);
  font-size: var(--cs-fs-body);
  font-weight: var(--cs-fw-medium);
  color: var(--cs-text-3);
  border: 0;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: var(--cs-font-text);
  letter-spacing: 0.2px;
  transition: color 100ms, border-color 100ms;
}
.cs-tab:hover { color: var(--cs-text); }
.cs-tab.is-active {
  color: var(--cs-navy);
  border-bottom-color: var(--cs-navy);
  font-weight: var(--cs-fw-semi);
}
.cs-tab__hint {
  font-family: var(--cs-font-mono);
  font-size: 9px;
  font-weight: var(--cs-fw-bold);
  color: var(--cs-text-4);
  background: var(--cs-bg);
  padding: 1px 5px;
  border-radius: var(--cs-r-1);
  border: 1px solid var(--cs-border);
}
.cs-tab.is-active .cs-tab__hint {
  color: var(--cs-navy);
  background: var(--cs-navy-soft);
  border-color: var(--cs-navy);
}

/* ─── 5. PANEL — the workhorse component ─────────────────────────── */

.cs-panel {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-3);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cs-panel__head {
  height: 28px;
  flex: 0 0 28px;
  background: var(--cs-surface-alt);
  border-bottom: 1px solid var(--cs-border);
  display: flex;
  align-items: center;
  padding: 0 var(--cs-sp-3);
  gap: var(--cs-sp-2);
  font-size: var(--cs-fs-small);
  font-weight: var(--cs-fw-bold);
  color: var(--cs-text-2);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.cs-panel__head__spacer { flex: 1; }
.cs-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;       /* internal scroll only */
  padding: var(--cs-sp-3);
}
.cs-panel__body--flush { padding: 0; }   /* for tables that want to fill */

/* ─── 6. DATA ROW — compact line item ────────────────────────────── */

.cs-row {
  display: grid;
  align-items: center;
  height: var(--cs-row-h);
  padding: 0 var(--cs-sp-3);
  border-bottom: 1px solid var(--cs-border);
  font-size: var(--cs-fs-body);
  cursor: pointer;
  transition: background 80ms;
}
.cs-row:hover { background: var(--cs-surface-hover); }
.cs-row.is-selected {
  background: var(--cs-navy-soft);
  border-left: 2px solid var(--cs-navy);
  padding-left: 10px;       /* compensate for border */
}
.cs-row--tight { height: var(--cs-row-h-tight); padding: 0 var(--cs-sp-2); }

.cs-row__sym {
  font-family: var(--cs-font-mono);
  font-weight: var(--cs-fw-bold);
  color: var(--cs-text);
  font-size: var(--cs-fs-body);
}
.cs-row__num {
  font-family: var(--cs-font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--cs-fs-data);
}

/* ─── 7. BADGES & CHIPS ─────────────────────────────────────────── */

.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: var(--cs-fw-bold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: var(--cs-r-1);
  font-family: var(--cs-font-mono);
  border: 1px solid transparent;
  white-space: nowrap;
}
.cs-badge--neutral { background: var(--cs-neutral-soft); color: var(--cs-neutral); }
.cs-badge--pos     { background: var(--cs-pos-bg); color: var(--cs-pos); border-color: var(--cs-pos-soft); }
.cs-badge--neg     { background: var(--cs-neg-bg); color: var(--cs-neg); border-color: var(--cs-neg-soft); }
.cs-badge--warn    { background: var(--cs-warn-bg); color: var(--cs-warn); border-color: var(--cs-warn-soft); }
.cs-badge--info    { background: var(--cs-info-bg); color: var(--cs-info); border-color: var(--cs-info-soft); }

.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: var(--cs-fs-small);
  font-weight: var(--cs-fw-semi);
  border-radius: var(--cs-r-1);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface);
  cursor: pointer;
  font-family: var(--cs-font-mono);
  color: var(--cs-text-3);
  letter-spacing: 0.4px;
  transition: all 100ms;
}
.cs-chip:hover { color: var(--cs-text); border-color: var(--cs-border-strong); }
.cs-chip.is-active {
  color: var(--cs-navy);
  background: var(--cs-navy-soft);
  border-color: var(--cs-navy);
}
.cs-chip__count {
  font-size: 9px;
  font-weight: var(--cs-fw-bold);
  background: var(--cs-bg);
  padding: 1px 5px;
  border-radius: var(--cs-r-1);
  min-width: 20px;
  text-align: center;
  color: var(--cs-text-4);
}
.cs-chip.is-active .cs-chip__count {
  background: var(--cs-surface);
  color: var(--cs-navy);
}

/* ─── 8. TABLE — institutional grid ─────────────────────────────── */

.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cs-fs-body);
}
.cs-table thead th {
  position: sticky;
  top: 0;
  background: var(--cs-surface-alt);
  border-bottom: 1px solid var(--cs-border-strong);
  padding: 6px var(--cs-sp-2);
  font-size: var(--cs-fs-small);
  font-weight: var(--cs-fw-bold);
  color: var(--cs-text-3);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: left;
  z-index: 1;
}
.cs-table thead th.cs-num { text-align: right; }
.cs-table tbody td {
  padding: 6px var(--cs-sp-2);
  border-bottom: 1px solid var(--cs-border);
  height: var(--cs-row-h-tight);
  vertical-align: middle;
}
.cs-table tbody tr:hover { background: var(--cs-surface-hover); }
.cs-table tbody tr.is-self { background: var(--cs-warn-bg); }
.cs-table tbody tr.is-self td { font-weight: var(--cs-fw-semi); }
.cs-table .cs-num {
  font-family: var(--cs-font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cs-table .cs-best { color: var(--cs-pos); font-weight: var(--cs-fw-bold); }

/* ─── 9. STAT — labeled numeric value ────────────────────────────── */

.cs-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--cs-sp-2) var(--cs-sp-3);
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-2);
  min-width: 0;
}
.cs-stat__label {
  font-size: var(--cs-fs-micro);
  font-weight: var(--cs-fw-bold);
  color: var(--cs-text-3);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.cs-stat__value {
  font-family: var(--cs-font-mono);
  font-size: var(--cs-fs-data);
  font-weight: var(--cs-fw-bold);
  color: var(--cs-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.cs-stat__sub {
  font-size: 9px;
  color: var(--cs-text-3);
  font-family: var(--cs-font-mono);
}
.cs-stat--lg .cs-stat__value { font-size: var(--cs-fs-hero); }
.cs-stat--xl .cs-stat__value { font-size: var(--cs-fs-display); }
.cs-stat--pos .cs-stat__value { color: var(--cs-pos); }
.cs-stat--neg .cs-stat__value { color: var(--cs-neg); }

/* ─── 10. BUTTONS — institutional, compact ──────────────────────── */

.cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 26px;
  font-size: var(--cs-fs-body);
  font-weight: var(--cs-fw-semi);
  font-family: var(--cs-font-text);
  border-radius: var(--cs-r-2);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface);
  color: var(--cs-text);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 100ms;
}
.cs-btn:hover { border-color: var(--cs-border-strong); background: var(--cs-surface-alt); }
.cs-btn:active { background: var(--cs-surface-hover); }
.cs-btn--primary {
  background: var(--cs-navy);
  color: #fff;
  border-color: var(--cs-navy);
}
.cs-btn--primary:hover { background: var(--cs-navy-hover); border-color: var(--cs-navy-hover); }
.cs-btn--pos {
  background: var(--cs-pos);
  color: #fff;
  border-color: var(--cs-pos);
}
.cs-btn--pos:hover { background: #036b4d; }
.cs-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cs-text-3);
}
.cs-btn--ghost:hover { background: var(--cs-surface-hover); color: var(--cs-text); }
.cs-btn--sm { height: 22px; padding: 0 8px; font-size: var(--cs-fs-small); }

/* ─── 11. UTILITIES ─────────────────────────────────────────────── */

.cs-mono { font-family: var(--cs-font-mono); font-variant-numeric: tabular-nums; }
.cs-text-pos { color: var(--cs-pos); }
.cs-text-neg { color: var(--cs-neg); }
.cs-text-warn { color: var(--cs-warn); }
.cs-text-info { color: var(--cs-info); }
.cs-text-3 { color: var(--cs-text-3); }
.cs-text-mute { color: var(--cs-text-4); }
.cs-divider { width: 1px; height: 16px; background: var(--cs-border); flex-shrink: 0; }
.cs-divider--h { width: 100%; height: 1px; background: var(--cs-border); }

.cs-flex { display: flex; }
.cs-flex--center { display: flex; align-items: center; }
.cs-flex--gap-2 { gap: var(--cs-sp-2); }
.cs-flex--gap-3 { gap: var(--cs-sp-3); }
.cs-flex--col { flex-direction: column; }
.cs-flex--1 { flex: 1; min-width: 0; }
.cs-grid--2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-sp-2); }
.cs-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cs-sp-2); }
.cs-grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cs-sp-2); }

/* ─── 12. STATE — empty, loading, error ──────────────────────────── */

.cs-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cs-sp-6);
  color: var(--cs-text-3);
  font-size: var(--cs-fs-small);
  text-align: center;
  gap: var(--cs-sp-2);
}
.cs-state__icon {
  font-size: 18px;
  color: var(--cs-text-4);
}
.cs-state__title {
  font-size: var(--cs-fs-body);
  font-weight: var(--cs-fw-semi);
  color: var(--cs-text-2);
}
.cs-state__hint {
  font-size: var(--cs-fs-small);
  color: var(--cs-text-3);
  max-width: 320px;
  line-height: 1.4;
}

/* ─── 13. SCROLLBARS — match Aladdin discretion ─────────────────── */

.cs-app *::-webkit-scrollbar { width: 6px; height: 6px; }
.cs-app *::-webkit-scrollbar-track { background: transparent; }
.cs-app *::-webkit-scrollbar-thumb {
  background: var(--cs-border-strong);
  border-radius: 3px;
}
.cs-app *::-webkit-scrollbar-thumb:hover { background: var(--cs-text-4); }

/* ─── 14. FOCUS — keyboard navigation ───────────────────────────── */

.cs-app button:focus-visible,
.cs-app .cs-tab:focus-visible,
.cs-app .cs-chip:focus-visible {
  outline: 2px solid var(--cs-navy);
  outline-offset: 1px;
}

/* ─── 15. RESPONSIVE — collapse to single column on narrow screens ─ */

@media (max-width: 900px) {
  .cs-canvas { grid-template-columns: 1fr; }
  .cs-rail { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   r61.9 — Deep DD Report (Aladdin-grade compact layout)
   ═══════════════════════════════════════════════════════════════════ */

/* Outer workspace — fixed grid, no full-page scroll */
.cs-dd-workspace {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--cs-sp-3);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--cs-sp-2) var(--cs-sp-3);
  min-height: calc(100vh - 200px);
}
@media (max-width: 900px) {
  .cs-dd-workspace { grid-template-columns: 1fr; }
  .cs-dd-nav { display: none; }
}

/* Left sticky sidebar nav */
.cs-dd-nav {
  position: sticky;
  top: 80px;
  height: fit-content;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-3);
  padding: var(--cs-sp-2);
}
.cs-dd-nav__title {
  font-size: 9px;
  font-weight: var(--cs-fw-bold);
  color: var(--cs-text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: var(--cs-sp-2) var(--cs-sp-2) var(--cs-sp-1);
  font-family: var(--cs-font-mono);
  border-bottom: 1px solid var(--cs-border);
  margin-bottom: var(--cs-sp-1);
}
.cs-dd-nav__item {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  padding: 6px 10px;
  font-size: 11px;
  color: var(--cs-text-2);
  text-decoration: none;
  border-radius: var(--cs-r-1);
  cursor: pointer;
  transition: background 80ms;
  border-left: 2px solid transparent;
  font-weight: var(--cs-fw-medium);
  font-family: var(--cs-font-text);
}
.cs-dd-nav__item:hover {
  background: var(--cs-surface-hover);
  color: var(--cs-text);
}
.cs-dd-nav__item.is-active {
  background: var(--cs-navy-soft);
  color: var(--cs-navy);
  border-left-color: var(--cs-navy);
  font-weight: var(--cs-fw-semi);
}
.cs-dd-nav__num {
  font-family: var(--cs-font-mono);
  font-size: 9px;
  color: var(--cs-text-4);
  min-width: 16px;
  text-align: right;
  font-weight: var(--cs-fw-bold);
}
.cs-dd-nav__item.is-active .cs-dd-nav__num { color: var(--cs-navy); }

/* Right pane — scrolls internally */
.cs-dd-pane { min-width: 0; }

/* Verdict strip — compact (was huge gradient) */
.cs-dd-verdict {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-3);
  padding: var(--cs-sp-3) var(--cs-sp-4);
  margin-bottom: var(--cs-sp-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--cs-sp-4);
  align-items: center;
}
.cs-dd-verdict__badge {
  width: 56px; height: 56px;
  background: var(--cs-navy);
  color: #fff;
  border-radius: var(--cs-r-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cs-font-mono);
  font-weight: var(--cs-fw-black);
  font-size: 14px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.cs-dd-verdict__main { min-width: 0; }
.cs-dd-verdict__sym {
  font-family: var(--cs-font-mono);
  font-size: 22px;
  font-weight: var(--cs-fw-black);
  color: var(--cs-text);
  letter-spacing: 1px;
  line-height: 1;
}
.cs-dd-verdict__name {
  font-size: 12px;
  color: var(--cs-text-2);
  margin-top: 4px;
  font-weight: var(--cs-fw-medium);
}
.cs-dd-verdict__meta {
  font-size: 10px;
  color: var(--cs-text-3);
  margin-top: 2px;
  font-family: var(--cs-font-mono);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.cs-dd-verdict__score-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.cs-dd-verdict__score {
  font-family: var(--cs-font-mono);
  font-size: 32px;
  font-weight: var(--cs-fw-black);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cs-dd-verdict__score--pos { color: var(--cs-pos); }
.cs-dd-verdict__score--neg { color: var(--cs-neg); }
.cs-dd-verdict__score--warn { color: var(--cs-warn); }
.cs-dd-verdict__score-max {
  font-size: 14px;
  color: var(--cs-text-3);
  font-weight: var(--cs-fw-medium);
}
.cs-dd-verdict__pill {
  font-size: 10px;
  font-weight: var(--cs-fw-bold);
  font-family: var(--cs-font-mono);
  padding: 3px 10px;
  border-radius: var(--cs-r-1);
  letter-spacing: 0.6px;
}
.cs-dd-verdict__pill--pos { background: var(--cs-pos-bg); color: var(--cs-pos); border: 1px solid var(--cs-pos-soft); }
.cs-dd-verdict__pill--neg { background: var(--cs-neg-bg); color: var(--cs-neg); border: 1px solid var(--cs-neg-soft); }
.cs-dd-verdict__pill--warn { background: var(--cs-warn-bg); color: var(--cs-warn); border: 1px solid var(--cs-warn-soft); }

/* Quick stats strip below verdict */
.cs-dd-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-3);
  margin-bottom: var(--cs-sp-3);
  overflow: hidden;
}
.cs-dd-stats__cell {
  padding: 10px 14px;
  border-right: 1px solid var(--cs-border);
}
.cs-dd-stats__cell:last-child { border-right: none; }
.cs-dd-stats__label {
  font-size: 9px;
  font-weight: var(--cs-fw-bold);
  color: var(--cs-text-3);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-family: var(--cs-font-mono);
}
.cs-dd-stats__val {
  font-size: 14px;
  font-weight: var(--cs-fw-bold);
  color: var(--cs-text);
  font-family: var(--cs-font-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  line-height: 1.2;
}
.cs-dd-stats__sub {
  font-size: 9px;
  color: var(--cs-text-3);
  margin-top: 1px;
  font-family: var(--cs-font-mono);
}

/* Section panels — used to wrap each report section */
.cs-dd-section {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-3);
  margin-bottom: var(--cs-sp-3);
  overflow: hidden;
  scroll-margin-top: 90px;  /* for sticky-nav anchors */
}
.cs-dd-section__head {
  background: var(--cs-surface-alt);
  border-bottom: 1px solid var(--cs-border);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  height: 32px;
}
.cs-dd-section__num {
  font-family: var(--cs-font-mono);
  font-size: 9px;
  font-weight: var(--cs-fw-bold);
  color: var(--cs-navy);
  background: var(--cs-navy-soft);
  padding: 1px 6px;
  border-radius: var(--cs-r-1);
  border: 1px solid var(--cs-navy);
  letter-spacing: 0.4px;
}
.cs-dd-section__title {
  font-size: 12px;
  font-weight: var(--cs-fw-bold);
  color: var(--cs-text);
  letter-spacing: 0.4px;
  font-family: var(--cs-font-text);
  flex: 1;
  text-transform: uppercase;
}
.cs-dd-section__badge {
  font-size: 8px;
  font-weight: var(--cs-fw-bold);
  font-family: var(--cs-font-mono);
  padding: 2px 6px;
  border-radius: var(--cs-r-1);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.cs-dd-section__body { padding: 14px; }

/* Compact action bar */
.cs-dd-actions {
  display: flex;
  gap: var(--cs-sp-2);
  margin-bottom: var(--cs-sp-3);
}
.cs-dd-actions__btn {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: var(--cs-fw-semi);
  border-radius: var(--cs-r-2);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface);
  color: var(--cs-text);
  cursor: pointer;
  font-family: var(--cs-font-text);
  transition: all 100ms;
}
.cs-dd-actions__btn:hover {
  border-color: var(--cs-navy);
  color: var(--cs-navy);
}
.cs-dd-actions__btn--primary {
  background: var(--cs-navy);
  color: #fff;
  border-color: var(--cs-navy);
}
.cs-dd-actions__btn--primary:hover {
  background: var(--cs-navy-hover);
  color: #fff;
  border-color: var(--cs-navy-hover);
}

/* Override the existing layman block to fit the new design */
.cs-dd-section .cs-layman-host {
  margin-top: -4px;
  margin-bottom: var(--cs-sp-3);
}

/* The OLD report (legacy) — when not using the new shell, hide it gracefully */
.cs-dd-report-legacy { display: none; }

/* When new layout is active, hide the OLD verdict header that comes from renderReport */
.cs-dd-shell-active [data-legacy-verdict] { display: none !important; }
.cs-dd-shell-active [data-legacy-action-bar] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
 * r63.72.31 — Deep DD Report Design System
 * Modern institutional B2B finance — shadcn/ui + Refactoring UI principles
 * Used to unify all DD report cards under one shell
 * ═════════════════════════════════════════════════════════════════════════ */

/* Design tokens (DD-scoped) */
:root {
  --csdd-radius:        12px;
  --csdd-radius-sm:     8px;
  --csdd-radius-pill:   999px;
  --csdd-pad:           18px 22px;
  --csdd-pad-sm:        14px 16px;
  --csdd-gap:           14px;
  --csdd-shadow:        0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --csdd-surface:       #ffffff;
  --csdd-surface-2:     #f8fafc;
  --csdd-surface-3:     #f1f5f9;
  --csdd-border:        #e2e8f0;
  --csdd-text:          #0f172a;
  --csdd-text-2:        #334155;
  --csdd-text-3:        #64748b;
  --csdd-text-4:        #94a3b8;
  --csdd-text-5:        #cbd5e1;
  --csdd-accent:        #1a3a78;
  --csdd-accent-2:      #2563eb;
  --csdd-accent-bg:     #eff6ff;
  --csdd-success:       #059669;
  --csdd-success-bg:    #ecfdf5;
  --csdd-warn:          #d97706;
  --csdd-warn-bg:       #fffbeb;
  --csdd-danger:        #dc2626;
  --csdd-danger-bg:     #fef2f2;
  --csdd-font-display:  'Sora', 'Inter', system-ui, sans-serif;
  --csdd-font-mono:     'IBM Plex Mono', 'JetBrains Mono', monospace;
}

/* Container */
.csdd-root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--csdd-text);
}

/* Sticky section nav */
.csdd-stickynav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--csdd-border);
  margin: 0 -4px 18px -4px;
  padding: 10px 8px;
}
.csdd-stickynav__inner {
  display: flex; gap: 4px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.csdd-stickynav__inner::-webkit-scrollbar { display: none; }
.csdd-stickynav__item {
  padding: 6px 12px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--csdd-text-3);
  text-transform: uppercase; font-family: var(--csdd-font-display);
  border-radius: 6px; cursor: pointer; border: none;
  background: transparent; white-space: nowrap; transition: all 0.15s;
}
.csdd-stickynav__item:hover { background: var(--csdd-surface-2); color: var(--csdd-text); }
.csdd-stickynav__item--active { background: var(--csdd-accent); color: #fff; }

/* Section header */
.csdd-section { padding: 14px 0 4px 0; scroll-margin-top: 70px; }
.csdd-section__head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--csdd-border);
}
.csdd-section__roman {
  font-family: var(--csdd-font-display);
  font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--csdd-text-4);
}
.csdd-section__title {
  font-family: var(--csdd-font-display);
  font-size: 13px; font-weight: 800;
  color: var(--csdd-text); letter-spacing: 0.3px;
}
.csdd-section__sub {
  font-size: 11px; color: var(--csdd-text-3);
  margin-left: auto; font-style: italic;
}

/* Card */
.csdd-card {
  background: var(--csdd-surface);
  border: 1px solid var(--csdd-border);
  border-radius: var(--csdd-radius);
  padding: var(--csdd-pad);
  margin-bottom: var(--csdd-gap);
  box-shadow: var(--csdd-shadow);
}
.csdd-card--compact { padding: var(--csdd-pad-sm); }
.csdd-card--hero {
  background: linear-gradient(135deg, var(--csdd-accent) 0%, var(--csdd-accent-2) 100%);
  border: none; color: #fff;
}
.csdd-card--hero .csdd-card__title,
.csdd-card--hero .csdd-card__eyebrow { color: rgba(255,255,255,0.95); }

.csdd-card__head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.csdd-card__eyebrow {
  font-family: var(--csdd-font-display);
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  color: var(--csdd-text-4); text-transform: uppercase;
}
.csdd-card__title {
  font-family: var(--csdd-font-display);
  font-size: 14px; font-weight: 700;
  color: var(--csdd-text); letter-spacing: 0.2px;
}
.csdd-card__meta { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* Badges */
.csdd-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--csdd-radius-pill);
  font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
  font-family: var(--csdd-font-display);
  text-transform: uppercase; white-space: nowrap;
}
.csdd-badge--solid   { color: #fff; }
.csdd-badge--ghost   { background: var(--csdd-surface-3); color: var(--csdd-text-3); }
.csdd-badge--success { background: var(--csdd-success-bg); color: var(--csdd-success); }
.csdd-badge--warn    { background: var(--csdd-warn-bg);    color: var(--csdd-warn);    }
.csdd-badge--danger  { background: var(--csdd-danger-bg);  color: var(--csdd-danger);  }
.csdd-badge--info    { background: var(--csdd-accent-bg);  color: var(--csdd-accent);  }
.csdd-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Layman 360° box */
.csdd-layman {
  background: var(--csdd-surface-2);
  border-left: 3px solid var(--csdd-accent);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px; margin-top: 12px;
}
.csdd-layman__label {
  font-family: var(--csdd-font-display);
  font-size: 9px; font-weight: 800; letter-spacing: 0.8px;
  color: var(--csdd-accent); text-transform: uppercase; margin-bottom: 4px;
}
.csdd-layman__body { font-size: 12px; color: var(--csdd-text-2); line-height: 1.6; }
.csdd-layman__target { font-size: 10px; color: var(--csdd-text-3); margin-top: 8px; font-family: var(--csdd-font-mono); }
.csdd-layman__target strong { color: var(--csdd-accent); }

/* Metric tiles */
.csdd-metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.csdd-metric {
  background: var(--csdd-surface-2);
  border: 1px solid var(--csdd-border);
  border-radius: 8px; padding: 10px 12px;
}
.csdd-metric__label {
  font-family: var(--csdd-font-display);
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--csdd-text-3); text-transform: uppercase; margin-bottom: 4px;
}
.csdd-metric__value {
  font-family: var(--csdd-font-mono);
  font-size: 22px; font-weight: 800; color: var(--csdd-text); line-height: 1.1;
}
.csdd-metric__sub { font-size: 10px; color: var(--csdd-text-3); margin-top: 3px; }

/* Score bar */
.csdd-scorebar { height: 5px; background: var(--csdd-border); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.csdd-scorebar__fill { height: 100%; border-radius: 3px; transition: width 0.4s; }

/* 2-col row */
.csdd-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--csdd-gap); margin-bottom: var(--csdd-gap); }
@media (max-width: 768px) { .csdd-row-2col { grid-template-columns: 1fr; } }

/* Methodology footnote */
.csdd-footnote {
  font-size: 10px; color: var(--csdd-text-4); line-height: 1.5;
  font-style: italic; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--csdd-border);
}

/* Loading state */
.csdd-loading { padding: 28px 20px; text-align: center; color: var(--csdd-text-4); font-size: 11px; }

/* Table */
.csdd-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.csdd-table thead { background: var(--csdd-surface-2); border-bottom: 1px solid var(--csdd-border); }
.csdd-table th {
  padding: 9px 12px; text-align: left;
  font-family: var(--csdd-font-display); font-size: 9px; font-weight: 800;
  letter-spacing: 0.6px; color: var(--csdd-text-3);
  text-transform: uppercase; white-space: nowrap;
}
.csdd-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background 0.1s; }
.csdd-table tbody tr:hover { background: var(--csdd-accent-bg); }
.csdd-table td { padding: 8px 12px; vertical-align: middle; color: var(--csdd-text-2); }