/* ═══════════════════════════════════════════════════════════════
   demo.css — Interactive demo components for index.html
   Covers: Design System catalog (tab nav + component cards)
           Regulatory Compliance Architecture board
   All classes are self-contained; no token overrides in main.css.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Shared utilities ─────────────────────────────────────────── */
.mono {
  font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
}
.up   { color: #00d4aa; }
.down { color: #ff6b6b; }
.dim  { color: rgba(255,255,255,0.35); }

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM CATALOG — Tab Navigation
   ═══════════════════════════════════════════════════════════════ */

.ds-tab-nav {
  display: flex;
  gap: 4px;
  margin: 48px 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
  scrollbar-width: none;
}
.ds-tab-nav::-webkit-scrollbar { display: none; }

.ds-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  margin-bottom: -1px;
}
.ds-tab:hover { color: rgba(255,255,255,0.75); }
.ds-tab.active {
  color: #d4af37;
  border-bottom-color: #d4af37;
}

.ds-tab-icon { font-size: 0.9em; opacity: 0.7; }

.ds-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
}
.ds-tab.active .ds-tab-count {
  background: rgba(212,175,55,0.15);
  color: #d4af37;
}

/* ─── Component Panel ────────────────────────────────────────── */
.ds-comp-panel { margin-top: 32px; }

.ds-comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.ds-comp-grid--5col { grid-template-columns: repeat(5, 1fr); }
.ds-comp-grid--3col { grid-template-columns: repeat(3, 1fr); }

/* ─── Component Card ─────────────────────────────────────────── */
.ds-comp-card {
  background: #131720;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.ds-comp-card:hover {
  border-color: rgba(212,175,55,0.3);
  transform: translateY(-2px);
}

.ds-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ds-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.03em;
}
.ds-card-tag {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}
.tag-financial {
  background: rgba(0,212,170,0.12);
  color: #00d4aa;
  border: 1px solid rgba(0,212,170,0.2);
}
.tag-compliance {
  background: rgba(212,175,55,0.12);
  color: #d4af37;
  border: 1px solid rgba(212,175,55,0.2);
}

.ds-card-body {
  padding: 14px 16px;
  min-height: 110px;
}
.ds-card-context {
  padding: 8px 16px 12px;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ─── Theme Divider (between dark/light rows) ────────────────── */
.ds-theme-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 8px;
  margin: 4px 0;
}
.ds-theme-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.ds-theme-divider-label {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
}

/* ─── Light Theme Card ───────────────────────────────────────── */
.ds-comp-card.ds-card-light {
  background: #f5f7fc;
  border-color: rgba(13,17,40,0.09);
  box-shadow: 0 1px 4px rgba(13,17,40,0.07);
}
.ds-comp-card.ds-card-light:hover {
  border-color: rgba(13,17,40,0.18);
  box-shadow: 0 4px 12px rgba(13,17,40,0.1);
  transform: translateY(-2px);
}
.ds-comp-card.ds-card-light .ds-card-header {
  border-bottom-color: rgba(13,17,40,0.07);
}
.ds-comp-card.ds-card-light .ds-card-name  { color: rgba(13,17,40,0.85); }
.ds-comp-card.ds-card-light .ds-card-context {
  color: rgba(13,17,40,0.38);
  border-top-color: rgba(13,17,40,0.06);
}
.ds-card-light .up   { color: #0a7a58; }
.ds-card-light .down { color: #c9202e; }

/* ─── Stats Bar ──────────────────────────────────────────────── */
.ds-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
  margin: 40px 0 32px;
}
.ds-stat {
  background: #0c0f1a;
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: #d4af37;
  font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ds-stat-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Density badge ──────────────────────────────────────────── */
.ds-density-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
}
.ds-density-badge.hd  { background: rgba(0,212,170,0.12);  color: #00d4aa; border: 1px solid rgba(0,212,170,0.25); }
.ds-density-badge.md  { background: rgba(212,175,55,0.12); color: #d4af37; border: 1px solid rgba(212,175,55,0.25); }
.ds-density-badge.ld  { background: rgba(0,217,255,0.12);  color: #00d9ff; border: 1px solid rgba(0,217,255,0.25); }
.ds-density-badge.acc { background: rgba(162,89,255,0.12); color: #a259ff; border: 1px solid rgba(162,89,255,0.25); }
.ds-density-badge.i18n{ background: rgba(255,167,38,0.12); color: #ffa726; border: 1px solid rgba(255,167,38,0.25); }
.ds-density-badge.print  { background: rgba(80,80,80,0.08);   color: #555;    border: 1px solid rgba(80,80,80,0.15); }
.ds-density-badge.mobile { background: rgba(200,80,0,0.08);   color: #c85000; border: 1px solid rgba(200,80,0,0.15); }

.ds-card-light .ds-density-badge.hd   { background: rgba(10,122,88,0.1);  color: #0a7a58; border-color: rgba(10,122,88,0.22); }
.ds-card-light .ds-density-badge.md   { background: rgba(139,105,20,0.1); color: #8b6914; border-color: rgba(139,105,20,0.22); }
.ds-card-light .ds-density-badge.ld   { background: rgba(0,100,200,0.1);  color: #0064c8; border-color: rgba(0,100,200,0.22); }

.ds-density-context { font-size: 0.65rem; color: rgba(255,255,255,0.3); font-family: 'SF Mono', monospace; }
.ds-card-light .ds-density-context { color: rgba(13,17,40,0.38); }

/* ─── Density Note (bottom of density panel) ─────────────────── */
.ds-density-note {
  color: rgba(255,255,255,0.45);
  font-size: 0.8rem;
  line-height: 1.7;
  text-align: center;
  max-width: 680px;
  margin: 24px auto 0;
}

/* ─── Density Mode Rows ──────────────────────────────────────── */
.dmode-row {
  display: grid;
  grid-template-columns: 56px 1fr 46px;
  gap: 4px;
  align-items: center;
}
.dmode-row.dense      { padding: 2px 0; font-size: 0.65rem; }
.dmode-row.medium     { padding: 5px 0; font-size: 0.72rem; }
.dmode-row.loose      { padding: 10px 0; font-size: 0.78rem; }
.dmode-row.accessible { padding: 7px 0; font-size: 0.82rem; font-weight: 600; }
.dmode-row.mobile-touch {
  border-radius: 6px;
  margin-bottom: 4px;
  padding: 8px 6px;
  background: rgba(13,17,40,0.03);
}
.ds-card-light .dmode-row.accessible { border-bottom: 1px solid rgba(13,17,40,0.06); }

.dmode-sym  { font-weight: 600; color: rgba(255,255,255,0.75); font-size: 0.65em; letter-spacing: 0.04em; }
.dmode-val  { text-align: right; font-family: 'SF Mono', monospace; }
.dmode-chg  { text-align: right; font-family: 'SF Mono', monospace; font-size: 0.85em; }

.dmode-val.up  { color: #00d4aa; }
.dmode-val.down{ color: #ff6b6b; }
.dmode-chg.up  { color: #00d4aa; }
.dmode-chg.down{ color: #ff6b6b; }

.ds-card-light .dmode-sym  { color: rgba(13,17,40,0.75); }
.ds-card-light .dmode-val  { color: rgba(13,17,40,0.8); }
.ds-card-light .dmode-chg  { color: rgba(13,17,40,0.5); }
.ds-card-light .dmode-val.up  { color: #0a7a58; }
.ds-card-light .dmode-val.down{ color: #c9202e; }
.ds-card-light .dmode-chg.up  { color: #0a7a58; }
.ds-card-light .dmode-chg.down{ color: #c9202e; }

/* Context label inside density cards */
.dmode-ctx {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.35);
  margin-bottom: 6px;
  letter-spacing: 0.06em;
}
.ds-card-light .dmode-ctx { color: rgba(13,17,40,0.4); }

/* CJK / i18n symbol variant */
.dmode-sym--cjk { font-size: 0.58rem; font-family: sans-serif; letter-spacing: 0; }
.dmode-row--muted { opacity: 0.75; }

/* i18n source note */
.dmode-i18n-note {
  margin-top: 6px;
  font-size: 0.58rem;
  color: rgba(255,255,255,0.3);
  font-family: 'SF Mono', monospace;
}

/* Print preview mini-widget */
.mini-print-preview {
  border: 1px solid rgba(13,17,40,0.1);
  border-radius: 4px;
  padding: 8px 10px;
}
.mini-print-preview__header {
  font-size: 0.58rem;
  color: rgba(13,17,40,0.4);
  margin-bottom: 4px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(13,17,40,0.08);
  padding-bottom: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   FINANCIAL MINI-COMPONENTS — Dark Theme
   ═══════════════════════════════════════════════════════════════ */

/* Price Display */
.mini-price-display { font-family: 'SF Mono', 'Monaco', 'Courier New', monospace; }
.mpd-instrument { font-size: 0.72rem; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; margin-bottom: 8px; font-family: var(--font-body); font-weight: 600; }
.mpd-prices { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mpd-side   { display: flex; flex-direction: column; gap: 2px; }
.mpd-label  { font-size: 0.6rem; color: rgba(255,255,255,0.35); letter-spacing: 0.1em; }
.mpd-price  { font-size: 1.15rem; font-weight: 700; }
.mpd-price.buy  { color: #00d4aa; }
.mpd-price.sell { color: #ff6b6b; }
.mpd-spread { padding: 2px 6px; background: rgba(255,255,255,0.06); border-radius: 3px; font-size: 0.65rem; color: rgba(255,255,255,0.4); margin: 0 2px; }
.mpd-change { font-size: 0.68rem; }
.mpd-change.up { color: #00d4aa; }

/* Order Entry */
.mini-order-entry { font-size: 0.75rem; }
.moe-type-tabs { display: flex; gap: 0; margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.moe-type-tabs span { flex: 1; padding: 4px 0; text-align: center; color: rgba(255,255,255,0.4); font-size: 0.65rem; cursor: pointer; border-right: 1px solid rgba(255,255,255,0.08); transition: all 0.15s; }
.moe-type-tabs span:last-child { border-right: none; }
.moe-type-tabs span.active { background: rgba(212,175,55,0.15); color: #d4af37; font-weight: 600; }
.moe-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.moe-label { color: rgba(255,255,255,0.4); font-size: 0.68rem; }
.moe-val   { color: rgba(255,255,255,0.75); font-size: 0.72rem; }
.moe-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.moe-sell, .moe-buy { padding: 7px 4px; border: none; border-radius: 4px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; text-align: center; line-height: 1.4; }
.moe-sell { background: rgba(255,107,107,0.18); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.3); }
.moe-buy  { background: rgba(0,212,170,0.18);  color: #00d4aa; border: 1px solid rgba(0,212,170,0.3);  }

/* P&L Display */
.mini-pnl { font-size: 0.75rem; }
.mpnl-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.mpnl-label { color: rgba(255,255,255,0.45); }
.mpnl-val   { font-family: 'SF Mono', monospace; font-size: 0.78rem; }
.mpnl-val.up  { color: #00d4aa; }
.mpnl-val.down{ color: #ff6b6b; }
.mpnl-divider { border-top: 1px solid rgba(255,255,255,0.12); margin: 4px 0; }
.mpnl-total .mpnl-label { color: rgba(255,255,255,0.65); font-weight: 600; }
.mpnl-total .mpnl-val   { font-weight: 700; font-size: 0.88rem; }

/* Watchlist Row */
.mini-watchlist { font-size: 0.73rem; }
.mwl-row { display: grid; grid-template-columns: 58px 1fr 62px 44px; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 4px; margin-bottom: 2px; }
.mwl-row.selected { background: rgba(255,255,255,0.05); }
.mwl-sym   { font-weight: 600; color: rgba(255,255,255,0.8); font-size: 0.68rem; letter-spacing: 0.04em; }
.mwl-spark { color: rgba(255,255,255,0.35); font-size: 0.72rem; letter-spacing: -1px; }
.mwl-price { font-family: 'SF Mono', monospace; text-align: right; font-size: 0.72rem; }
.mwl-price.up  { color: #00d4aa; }
.mwl-price.down{ color: #ff6b6b; }
.mwl-chg   { font-family: 'SF Mono', monospace; text-align: right; font-size: 0.65rem; }
.mwl-chg.up  { color: #00d4aa; }
.mwl-chg.down{ color: #ff6b6b; }
.mwl-price--neutral { color: rgba(255,255,255,0.55); }
.mwl-chg--neutral   { color: rgba(255,255,255,0.35); }

/* Depth Indicator */
.mini-depth { font-size: 0.7rem; font-family: 'SF Mono', monospace; }
.mdepth-header { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; padding: 2px 4px 4px; color: rgba(255,255,255,0.3); font-size: 0.6rem; letter-spacing: 0.08em; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 3px; }
.mdepth-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; padding: 2px 4px; }
.mdepth-row .up  { color: #00d4aa; }
.mdepth-row .down{ color: #ff6b6b; }
.mdepth-bar-row { display: flex; height: 4px; border-radius: 2px; overflow: hidden; margin-top: 6px; gap: 2px; }
.mdepth-bid-bar { background: rgba(0,212,170,0.35); border-radius: 2px 0 0 2px; }
.mdepth-ask-bar { background: rgba(255,107,107,0.35); flex: 1; border-radius: 0 2px 2px 0; }

/* ═══════════════════════════════════════════════════════════════
   FINANCIAL MINI-COMPONENTS — Light Theme
   ═══════════════════════════════════════════════════════════════ */

/* Trade Ticket (light) */
.mini-ticket { font-size: 0.73rem; }
.mticket-status { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 3px; display: inline-block; margin-bottom: 8px; }
.mticket-status.filled { background: rgba(0,212,170,0.12); color: #00d4aa; border: 1px solid rgba(0,212,170,0.25); }
.mticket-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.mticket-row span:first-child { color: rgba(255,255,255,0.4); }
.mticket-row span:last-child  { font-family: 'SF Mono', monospace; }
.mticket-row.dim span { color: rgba(255,255,255,0.2); font-size: 0.65rem; }
.buy-label { color: #00d4aa; font-weight: 700; }

.ds-card-light .mticket-status.filled { background: rgba(10,122,88,0.1); color: #0a7a58; border-color: rgba(10,122,88,0.25); }
.ds-card-light .mticket-row span:first-child { color: rgba(13,17,40,0.45); }
.ds-card-light .mticket-row span:last-child  { color: rgba(13,17,40,0.8); }
.ds-card-light .mticket-row.dim span { color: rgba(13,17,40,0.25); }
.ds-card-light .buy-label { color: #0a7a58; }

/* Position Card (light) */
.mini-position { font-size: 0.75rem; }
.mpos-header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mpos-sym     { font-weight: 700; font-size: 0.88rem; color: rgba(13,17,40,0.85); letter-spacing: 0.04em; }
.mpos-dir     { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; padding: 2px 8px; border-radius: 3px; }
.mpos-dir.long{ background: rgba(10,122,88,0.1); color: #0a7a58; border: 1px solid rgba(10,122,88,0.25); }
.mpos-row     { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(13,17,40,0.05); }
.mpos-label   { color: rgba(13,17,40,0.45); font-size: 0.68rem; }
.mpos-val     { font-family: 'SF Mono', monospace; font-size: 0.75rem; color: rgba(13,17,40,0.8); }
.mpos-val.up  { color: #0a7a58; font-weight: 700; }
.mpos-pnl-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 3px; }
.mpos-pnl-label{ color: rgba(13,17,40,0.6); font-weight: 600; font-size: 0.72rem; }
.mpos-bar-wrap { height: 3px; background: rgba(13,17,40,0.07); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.mpos-bar-fill { height: 100%; background: #0a7a58; border-radius: 2px; opacity: 0.7; }

/* Sparkline Chart (light) */
.mini-sparkline { font-size: 0.75rem; }
.mspark-header  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.mspark-sym     { font-weight: 700; font-size: 0.82rem; color: rgba(13,17,40,0.85); letter-spacing: 0.06em; }
.mspark-price   { font-family: 'SF Mono', monospace; font-size: 0.88rem; font-weight: 700; color: #0a7a58; }
.mspark-svg     { width: 100%; height: 52px; display: block; margin: 0 0 5px; }
.mspark-footer  { display: flex; justify-content: space-between; align-items: center; font-size: 0.65rem; }
.mspark-chg     { color: #0a7a58; font-family: 'SF Mono', monospace; }
.mspark-period  { color: rgba(13,17,40,0.35); font-size: 0.6rem; letter-spacing: 0.06em; border: 1px solid rgba(13,17,40,0.1); padding: 1px 6px; border-radius: 3px; }

/* Market Heatmap (light) */
.mini-heatmap { font-size: 0.72rem; }
.mhm-title    { font-size: 0.68rem; font-weight: 600; color: rgba(13,17,40,0.55); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.mhm-grid     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.mhm-cell     { padding: 7px 4px; border-radius: 4px; text-align: center; font-size: 0.62rem; font-weight: 700; line-height: 1.4; font-family: 'SF Mono', monospace; cursor: default; transition: opacity 0.15s; }
.mhm-cell:hover { opacity: 0.85; }
.mhm-cell.strong-up  { background: #0a7a58; color: #fff; }
.mhm-cell.up         { background: rgba(10,122,88,0.18);  color: #0a7a58; }
.mhm-cell.slight-up  { background: rgba(10,122,88,0.08);  color: rgba(10,122,88,0.8); }
.mhm-cell.neutral    { background: rgba(13,17,40,0.06);  color: rgba(13,17,40,0.5); }
.mhm-cell.slight-down{ background: rgba(201,32,46,0.08); color: rgba(201,32,46,0.8); }
.mhm-cell.strong-down{ background: #c9202e; color: #fff; }

/* Portfolio Summary (light) */
.mini-portfolio  { font-size: 0.75rem; }
.mpf-account-label { font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 700; color: rgba(13,17,40,0.4); text-transform: uppercase; margin-bottom: 6px; }
.mpf-total-row   { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 8px; border-bottom: 1px solid rgba(13,17,40,0.07); margin-bottom: 6px; }
.mpf-total-label { color: rgba(13,17,40,0.55); font-size: 0.7rem; }
.mpf-total-val   { font-family: 'SF Mono', monospace; font-size: 0.95rem; font-weight: 700; color: rgba(13,17,40,0.85); }
.mpf-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(13,17,40,0.04); font-size: 0.7rem; }
.mpf-row span:first-child { color: rgba(13,17,40,0.5); }
.mpf-row span:last-child  { font-family: 'SF Mono', monospace; color: rgba(13,17,40,0.75); }
.mpf-row span.up          { color: #0a7a58; font-weight: 600; }
.mpf-margin-wrap { height: 3px; background: rgba(13,17,40,0.07); border-radius: 2px; overflow: hidden; margin-top: 7px; }
.mpf-margin-fill { height: 100%; background: linear-gradient(90deg, #0a7a58, #d4a017); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   COMPLIANCE MINI-COMPONENTS — Dark Theme
   ═══════════════════════════════════════════════════════════════ */

/* KYC Stepper */
.mini-kyc { font-size: 0.72rem; }
.mkyc-steps { display: flex; align-items: center; margin-bottom: 10px; }
.mkyc-step  { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.mkyc-step span { font-size: 0.58rem; color: rgba(255,255,255,0.4); white-space: nowrap; }
.mkyc-step.done span, .mkyc-step.active span { color: rgba(255,255,255,0.7); }
.mkyc-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; border: 1.5px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); }
.mkyc-dot.done   { background: rgba(0,212,170,0.15);  border-color: #00d4aa; color: #00d4aa; }
.mkyc-dot.active { background: rgba(212,175,55,0.15); border-color: #d4af37; color: #d4af37; }
.mkyc-connector  { flex: 1; height: 1.5px; background: rgba(255,255,255,0.1); margin: 0 3px; margin-bottom: 14px; }
.mkyc-connector.done   { background: #00d4aa; opacity: 0.5; }
.mkyc-connector.active { background: rgba(212,175,55,0.4); }
.mkyc-progress { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.mkyc-progress-fill { height: 100%; background: #00d4aa; border-radius: 2px; opacity: 0.7; }
.mkyc-note { font-size: 0.62rem; color: rgba(255,255,255,0.35); text-align: right; }

.ds-card-light .mkyc-dot  { border-color: rgba(13,17,40,0.15); color: rgba(13,17,40,0.35); background: rgba(13,17,40,0.03); }
.ds-card-light .mkyc-dot.done   { background: rgba(10,122,88,0.1); border-color: #0a7a58; color: #0a7a58; }
.ds-card-light .mkyc-dot.active { background: rgba(139,105,20,0.1); border-color: #8b6914; color: #8b6914; }
.ds-card-light .mkyc-step span  { color: rgba(13,17,40,0.4); }
.ds-card-light .mkyc-step.done span, .ds-card-light .mkyc-step.active span { color: rgba(13,17,40,0.72); }
.ds-card-light .mkyc-connector  { background: rgba(13,17,40,0.1); }
.ds-card-light .mkyc-connector.done   { background: #0a7a58; opacity: 0.45; }
.ds-card-light .mkyc-connector.active { background: rgba(139,105,20,0.4); }
.ds-card-light .mkyc-progress      { background: rgba(13,17,40,0.07); }
.ds-card-light .mkyc-progress-fill { background: #0a7a58; }
.ds-card-light .mkyc-note { color: rgba(13,17,40,0.4); }

/* Risk Warning */
.mini-risk-warning { display: flex; gap: 10px; padding: 10px; background: rgba(255,107,107,0.06); border: 1px solid rgba(255,107,107,0.2); border-radius: 6px; }
.mrw-icon    { font-size: 1.1rem; color: #ff6b6b; flex-shrink: 0; margin-top: 1px; }
.mrw-content { flex: 1; }
.mrw-title   { font-size: 0.68rem; font-weight: 700; color: #ff6b6b; margin-bottom: 4px; letter-spacing: 0.04em; }
.mrw-body    { font-size: 0.62rem; color: rgba(255,255,255,0.55); line-height: 1.5; }
.mrw-source  { font-size: 0.58rem; color: rgba(255,107,107,0.5); margin-top: 5px; font-family: 'SF Mono', monospace; }

.ds-card-light .mini-risk-warning { background: rgba(201,32,46,0.05); border-color: rgba(201,32,46,0.2); }
.ds-card-light .mrw-icon   { color: #c9202e; }
.ds-card-light .mrw-title  { color: #c9202e; }
.ds-card-light .mrw-body   { color: rgba(13,17,40,0.6); }
.ds-card-light .mrw-source { color: rgba(201,32,46,0.5); }

/* Session Timeout */
.mini-session { display: flex; align-items: center; justify-content: center; }
.mst-modal { background: #1a1e2d; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 14px; text-align: center; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.mst-title { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.8); margin-bottom: 6px; letter-spacing: 0.04em; }
.mst-timer { font-size: 1.8rem; font-weight: 700; font-family: 'SF Mono', monospace; color: #d4af37; margin: 4px 0 8px; letter-spacing: 0.1em; }
.mst-body  { font-size: 0.62rem; color: rgba(255,255,255,0.4); margin-bottom: 10px; line-height: 1.5; }
.mst-actions { display: flex; gap: 6px; justify-content: center; }
.mst-extend, .mst-logout { padding: 5px 10px; border-radius: 4px; font-size: 0.62rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); }
.mst-extend { background: rgba(212,175,55,0.15); color: #d4af37; }
.mst-logout { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.45); }

.ds-card-light .mst-modal  { background: #fff; border-color: rgba(13,17,40,0.12); box-shadow: 0 8px 32px rgba(13,17,40,0.12); }
.ds-card-light .mst-title  { color: rgba(13,17,40,0.8); }
.ds-card-light .mst-timer  { color: #8b6914; }
.ds-card-light .mst-body   { color: rgba(13,17,40,0.5); }
.ds-card-light .mst-extend { background: rgba(139,105,20,0.12); color: #8b6914; border-color: rgba(139,105,20,0.25); }
.ds-card-light .mst-logout { background: rgba(13,17,40,0.04); color: rgba(13,17,40,0.45); border-color: rgba(13,17,40,0.1); }

/* Consent Flow */
.mini-consent { font-size: 0.72rem; }
.mcf-title { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.75); margin-bottom: 8px; }
.mcf-item  { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.mcf-check { display: flex; align-items: center; padding-top: 1px; flex-shrink: 0; }
.mcf-check input[type="checkbox"] { width: 13px; height: 13px; accent-color: #00d4aa; cursor: default; }
.mcf-text  { color: rgba(255,255,255,0.6); font-size: 0.68rem; line-height: 1.4; }
.mcf-req   { color: rgba(255,255,255,0.3); font-size: 0.6rem; }
.mcf-source{ font-size: 0.58rem; color: rgba(212,175,55,0.45); margin-top: 6px; font-family: 'SF Mono', monospace; }

.ds-card-light .mcf-title  { color: rgba(13,17,40,0.75); }
.ds-card-light .mcf-text   { color: rgba(13,17,40,0.6); }
.ds-card-light .mcf-req    { color: rgba(13,17,40,0.35); }
.ds-card-light .mcf-source { color: rgba(139,105,20,0.6); }
.ds-card-light .mcf-item   { border-bottom-color: rgba(13,17,40,0.05); }
.ds-card-light .mcf-check input[type="checkbox"] { accent-color: #0a7a58; }

/* Suitability Assessment */
.mini-suitability { font-size: 0.72rem; }
.msui-q { color: rgba(255,255,255,0.65); margin-bottom: 8px; line-height: 1.4; font-size: 0.7rem; }
.msui-options { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.msui-opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.07); cursor: pointer; color: rgba(255,255,255,0.5); font-size: 0.68rem; transition: all 0.15s; }
.msui-opt.selected { background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.3); color: rgba(255,255,255,0.8); }
.msui-opt input { accent-color: #d4af37; }
.msui-source { font-size: 0.58rem; color: rgba(212,175,55,0.45); font-family: 'SF Mono', monospace; }

.ds-card-light .msui-q  { color: rgba(13,17,40,0.65); }
.ds-card-light .msui-opt { border-color: rgba(13,17,40,0.08); color: rgba(13,17,40,0.5); }
.ds-card-light .msui-opt.selected { background: rgba(139,105,20,0.08); border-color: rgba(139,105,20,0.3); color: rgba(13,17,40,0.8); }
.ds-card-light .msui-source { color: rgba(139,105,20,0.55); }

/* ═══════════════════════════════════════════════════════════════
   COMPLIANCE MINI-COMPONENTS — Light Theme
   ═══════════════════════════════════════════════════════════════ */

/* Disclosure Banner (light) */
.mdisc-bar  { display: flex; gap: 8px; padding: 8px 10px; background: rgba(0,217,255,0.05); border: 1px solid rgba(0,217,255,0.12); border-radius: 5px; margin-bottom: 6px; }
.mdisc-icon { color: #00d9ff; font-size: 0.9rem; flex-shrink: 0; margin-top: 1px; }
.mdisc-text { font-size: 0.62rem; color: rgba(255,255,255,0.45); line-height: 1.5; }
.mdisc-reg  { font-size: 0.58rem; color: rgba(0,217,255,0.4); font-family: 'SF Mono', monospace; text-align: right; }

.ds-card-light .mdisc-bar  { background: rgba(0,100,200,0.05); border-color: rgba(0,100,200,0.12); }
.ds-card-light .mdisc-icon { color: #0064c8; }
.ds-card-light .mdisc-text { color: rgba(13,17,40,0.55); }
.ds-card-light .mdisc-reg  { color: rgba(0,100,200,0.45); }

/* Best Execution Report (light) */
.mini-bex { font-size: 0.62rem; }
.mini-bex__header {
  padding: 8px 10px;
  background: rgba(100,149,237,0.06);
  border-radius: 5px 5px 0 0;
  border: 1px solid rgba(100,149,237,0.2);
  border-bottom: none;
}
.mini-bex__label {
  font-size: 0.53rem;
  letter-spacing: 0.1em;
  color: rgba(100,149,237,0.65);
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.mini-bex__kv-row { display: flex; gap: 14px; flex-wrap: wrap; }
.mini-bex__kv  { display: flex; flex-direction: column; gap: 2px; }
.mini-bex__key { color: rgba(0,0,0,0.38); font-size: 0.52rem; }
.mini-bex__val { color: rgba(0,0,0,0.82); font-weight: 700; font-size: 0.68rem; }
.mini-bex__policy {
  padding: 7px 10px;
  background: #f4f7fc;
  border: 1px solid rgba(100,149,237,0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mini-bex__policy-label { color: rgba(0,0,0,0.5); font-size: 0.60rem; }
.mini-bex__policy-status { color: #00966e; font-weight: 700; font-size: 0.60rem; }
.mini-bex__footer {
  padding: 6px 10px;
  background: #f0f2f8;
  border: 1px solid rgba(100,149,237,0.2);
  border-top: none;
  border-radius: 0 0 5px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mini-bex__footer-label { color: rgba(0,0,0,0.4); font-size: 0.55rem; }
.mini-bex__footer-value { color: rgba(100,149,237,0.75); font-weight: 600; font-size: 0.55rem; }
.mini-bex__source { margin-top: 6px; font-size: 0.54rem; color: rgba(100,149,237,0.6); font-family: 'Courier New', monospace; }

/* Document Upload (light) */
.mini-doc-upload { font-size: 0.73rem; }
.mdu-zone  { border: 1.5px dashed rgba(13,17,40,0.2); border-radius: 6px; padding: 12px 8px; text-align: center; margin-bottom: 8px; background: rgba(13,17,40,0.02); }
.mdu-icon  { font-size: 1.2rem; color: rgba(13,17,40,0.3); margin-bottom: 4px; }
.mdu-label { font-size: 0.68rem; color: rgba(13,17,40,0.5); margin-bottom: 2px; }
.mdu-sub   { font-size: 0.6rem; color: rgba(13,17,40,0.35); }
.mdu-types { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.mdu-type-badge { font-size: 0.58rem; padding: 2px 7px; border-radius: 3px; font-weight: 600; letter-spacing: 0.04em; }
.mdu-type-badge.ok      { background: rgba(10,122,88,0.1);  color: #0a7a58; border: 1px solid rgba(10,122,88,0.2); }
.mdu-type-badge.pending { background: rgba(139,105,20,0.1); color: #8b6914; border: 1px solid rgba(139,105,20,0.2); }
.mdu-reg-note { font-size: 0.58rem; color: rgba(13,17,40,0.38); font-family: 'SF Mono', monospace; }

/* 2FA Verification (light) */
.mini-twofa  { font-size: 0.73rem; }
.mtfa-prompt { color: rgba(13,17,40,0.6); font-size: 0.7rem; line-height: 1.4; margin-bottom: 10px; }
.mtfa-prompt strong { color: rgba(13,17,40,0.8); }
.mtfa-code-row { display: flex; gap: 5px; justify-content: center; margin-bottom: 8px; }
.mtfa-digit { width: 26px; height: 30px; border: 1.5px solid rgba(13,17,40,0.15); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: 'SF Mono', monospace; font-size: 0.88rem; font-weight: 700; color: rgba(13,17,40,0.85); background: #fff; }
.mtfa-digit.active { border-color: #8b6914; background: rgba(139,105,20,0.05); }
.mtfa-digit.empty  { color: transparent; }
.mtfa-timer  { text-align: center; font-size: 0.62rem; color: rgba(13,17,40,0.4); margin-bottom: 6px; }
.mtfa-resend { text-align: center; font-size: 0.62rem; color: #0064c8; cursor: pointer; }
.mtfa-reg    { font-size: 0.58rem; color: rgba(139,105,20,0.55); font-family: 'SF Mono', monospace; text-align: center; }

/* Account Restriction (light) */
.mini-acct-restrict { font-size: 0.73rem; }
.mar-banner { display: flex; gap: 8px; padding: 8px 10px; background: rgba(201,32,46,0.05); border: 1px solid rgba(201,32,46,0.18); border-radius: 0 5px 5px 0; margin-bottom: 8px; }
.mar-icon   { color: #c9202e; font-size: 0.9rem; flex-shrink: 0; }
.mar-title  { font-size: 0.72rem; font-weight: 700; color: #c9202e; margin-bottom: 2px; }
.mar-body   { font-size: 0.65rem; color: rgba(13,17,40,0.55); line-height: 1.4; }
.mar-actions{ display: flex; gap: 6px; }
.mar-btn { padding: 4px 10px; border-radius: 4px; font-size: 0.62rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(13,17,40,0.12); }
.mar-btn.primary { background: rgba(13,17,40,0.06); color: rgba(13,17,40,0.65); }
.mar-btn.support { background: rgba(0,100,200,0.08); color: #0064c8; border-color: rgba(0,100,200,0.2); }
.mar-reg { font-size: 0.58rem; color: rgba(13,17,40,0.35); font-family: 'SF Mono', monospace; margin-top: 6px; }

/* Regulatory Acceptance (light) */
.mini-reg-accept { font-size: 0.73rem; }
.mra-modal { background: #fff; border: 1px solid rgba(13,17,40,0.1); border-radius: 8px; padding: 12px; box-shadow: 0 4px 16px rgba(13,17,40,0.08); }
.mra-title { font-size: 0.75rem; font-weight: 700; color: rgba(13,17,40,0.85); margin-bottom: 6px; }
.mra-body  { font-size: 0.62rem; color: rgba(13,17,40,0.5); line-height: 1.5; margin-bottom: 8px; border-bottom: 1px solid rgba(13,17,40,0.06); padding-bottom: 8px; }
.mra-check-row { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.mra-check-row input[type="checkbox"] { accent-color: #0a7a58; margin-top: 1px; flex-shrink: 0; }
.mra-check-text { font-size: 0.65rem; color: rgba(13,17,40,0.65); line-height: 1.4; }
.mra-actions { display: flex; gap: 5px; }
.mra-accept  { flex: 1; padding: 5px 8px; border-radius: 4px; font-size: 0.62rem; font-weight: 700; background: #0a7a58; color: #fff; border: none; cursor: pointer; letter-spacing: 0.04em; }
.mra-decline { padding: 5px 10px; border-radius: 4px; font-size: 0.62rem; background: rgba(13,17,40,0.04); color: rgba(13,17,40,0.45); border: 1px solid rgba(13,17,40,0.1); cursor: pointer; }
.mra-reg { font-size: 0.58rem; color: rgba(139,105,20,0.55); font-family: 'SF Mono', monospace; text-align: center; margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════
   REGULATORY COMPLIANCE ARCHITECTURE — Interactive Board
   ═══════════════════════════════════════════════════════════════ */

.rc-section-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.rc-section-title {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}
.rc-section-subtitle {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}

.rc-board {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(100,149,237,0.22);
  background: #030308;
  font-family: 'Courier New', Courier, monospace;
}

.rc-board__header {
  padding: 10px 20px;
  background: rgba(100,149,237,0.06);
  border-bottom: 1px solid rgba(100,149,237,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.rc-board__headline {
  font-size: 0.68rem;
  color: #7aabff;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.rc-board__meta {
  display: flex;
  gap: 14px;
  align-items: center;
}
.rc-board__meta-item {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.65);
}
.rc-board__meta-item strong { color: #00d4aa; font-weight: 700; }
.rc-board__clock { font-size: 0.65rem; color: rgba(100,149,237,0.8); }

.rc-board__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 280px;
}
.rc-board__col {
  padding: 16px 18px;
  border-right: 1px solid rgba(100,149,237,0.12);
}
.rc-board__col:last-child { border-right: none; }

.rc-board__col-title {
  font-size: 0.62rem;
  color: #7aabff;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 14px;
}
.rc-board__col-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(100,149,237,0.08);
}

.rc-board__col-subtitle {
  font-size: 0.60rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.rc-board__footer {
  padding: 8px 20px;
  border-top: 1px solid rgba(100,149,237,0.1);
  background: rgba(0,0,0,0.25);
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.64rem;
}
.rc-board__footer-label { color: rgba(255,255,255,0.5); }
.rc-board__footer-value { font-weight: 700; }
.rc-board__footer-value--ok   { color: #00d4aa; }
.rc-board__footer-value--blue { color: #7aabff; }
.rc-board__footer-sep { color: rgba(255,255,255,0.2); }

/* Gate badges row */
.rc-gates { display: flex; gap: 5px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .ds-comp-grid--5col { grid-template-columns: repeat(3, 1fr); }
  .ds-comp-grid--3col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px) {
  .rc-board__grid { grid-template-columns: 1fr; }
  .rc-board__col  { border-right: none; border-bottom: 1px solid rgba(100,149,237,0.1); }
  .rc-board__col:last-child { border-bottom: none; }
}

@media (max-width: 640px) {
  .ds-comp-grid         { grid-template-columns: 1fr; }
  .ds-comp-grid--5col   { grid-template-columns: repeat(2, 1fr); }
  .ds-comp-grid--3col   { grid-template-columns: repeat(2, 1fr); }
  .ds-stats-bar         { grid-template-columns: repeat(2, 1fr); }
  .ds-tab-label         { display: none; }
  .ds-tab               { padding: 10px 14px; }
}

@media (max-width: 480px) {
  .ds-stats-bar       { grid-template-columns: 1fr 1fr; }
  .ds-comp-grid--5col { grid-template-columns: 1fr; }
}