/* WorldSignal — Binance-style dark theme */
:root {
  --bg-primary: #0b0e11;
  --bg-card: #161a1e;
  --bg-card2: #1e2329;
  --border: #2b3139;
  --text-primary: #eaecef;
  --text-secondary: #848e9c;
  --text-muted: #5e6673;
  --accent: #f0b90b;       /* Binance yellow */
  --green: #0ecb81;
  --red: #f6465d;
  --yellow: #f0b90b;
  --blue: #1890ff;
  --orange: #ff8c00;
  --font: 'Inter', 'SF Pro Text', system-ui, sans-serif;
  --radius: 6px;

  /* ── Global Risk Zone Colors (single source of truth) ──────
     CRITICAL → red  |  ELEVATED → blue  |  NORMAL → yellow
     Use these vars everywhere: UI, badges, status bars.
     ─────────────────────────────────────────────────────── */
  --zone-critical: #f6465d;   /* red  — high danger */
  --zone-elevated: #2e86ff;   /* blue — elevated risk */
  --zone-normal: #f0b90b;   /* yellow — baseline (Binance accent) */

  /* ── Design System Tokens ────────────────────────── */
  --ws-gap-section: 6px;     /* gap between major sections — uniform ~1.5mm */
  --ws-gap-inner: 12px;      /* gap inside section between items */
  --ws-pad-section: 16px;    /* section padding */
  --ws-pad-card: 12px 14px;  /* card padding */
  --ws-radius-section: 8px;  /* section border-radius */
  --ws-radius-card: 6px;     /* card border-radius */
  --ws-radius-badge: 3px;    /* badge border-radius */
  --ws-font-title: 12px;     /* section title */
  --ws-font-label: 10px;     /* field labels */
  --ws-font-value: 13px;     /* data values */
  --ws-font-meta: 9px;       /* meta/footer text */
  --ws-border-section: 1px solid var(--border);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Unified Section System ─────────────────────────── */
/* Apply .ws-section to any major panel for consistent spacing */
.ws-section {
  margin-bottom: var(--ws-gap-section);
  background: var(--bg-card);
  border: var(--ws-border-section);
  border-radius: var(--ws-radius-section);
  padding: var(--ws-pad-section);
}
.ws-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--ws-gap-inner);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ws-section-title {
  font-size: var(--ws-font-title);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Base body — all pages */
body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
}

/* Market page only: navbar at top, then page-body-layout fills remaining height */
body.page-market {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Auth-switch wrapper must be transparent to the flex layout */
body.page-market #ws-dashboard {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Two-column body: Left col (LM + content) | Right col (News) */
.page-body-layout {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}

/* Left column: Live Market panel + scrollable content */
.page-left-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Resize handle between left col and news sidebar */
.news-resize-handle {
  width: 5px;
  flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  transition: background 0.15s;
}
.news-resize-handle:hover,
.news-resize-handle.dragging {
  background: var(--accent);
}
.news-resize-grip {
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.15s;
}
.news-resize-handle:hover .news-resize-grip,
.news-resize-handle.dragging .news-resize-grip {
  background: var(--accent);
}
@media (max-width: 900px) {
  .news-resize-handle { display: none; }
}

/* Right column: News sidebar — persistent, full height */
.page-right-news {
  width: 340px;
  min-width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--bg-card);
}
.page-right-news .news-sidebar-hd {
  flex-shrink: 0;
  padding: 12px 12px 10px;
}
.page-right-news .news-feed-inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 12px 12px;
}
@media (max-width: 900px) {
  .page-body-layout { flex-direction: column; }
  .page-right-news  { width: 100% !important; border-left: none; border-top: 1px solid var(--border); max-height: 400px; }
}

/* Scrollable area below Live Market (inside page-left-col) */
#market-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  position: relative;
  z-index: 1;            /* above .app-footer (z-index:0) so sticky news links stay clickable */
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────── */
.navbar {
  background: rgba(9,9,11,.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(231,193,18,.08);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;   /* never shrink in body.page-market flex column */
}
.navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(240,185,11,.25) 30%, rgba(14,203,129,.18) 70%, transparent 100%);
  pointer-events: none;
}
.navbar-brand {
  font-weight: 800;
  font-size: 20px;
  color: #E7C112;
  letter-spacing: -0.6px;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(240,185,11,.2));
  transition: filter .2s;
}
.navbar-brand:hover .brand-logo,
.n-logo:hover .brand-logo,
.ln-brand:hover .brand-logo {
  filter: drop-shadow(0 0 8px rgba(240,185,11,.4));
}
/* Auth page centered logo */
.auth-brand-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(240,185,11,.25));
}
/* Footer / small nav logo */
.brand-logo-sm {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(240,185,11,.15));
  vertical-align: middle;
}
/* Landing nav logo (n-logo) */
.n-logo .brand-logo {
  width: 38px;
  height: 38px;
}
/* 404 page floating logo */
.err-brand-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(240,185,11,.35));
}
.navbar-links { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0; flex-wrap: nowrap; }
.navbar-link {
  padding: 8px 14px;
  border-radius: 8px;
  color: #9A9080;
  cursor: pointer;
  font-weight: 500;
  transition: background .18s, color .18s, box-shadow .18s;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  letter-spacing: normal;
}
.navbar-link:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
  border-bottom-color: rgba(231,193,18,.5);
}
.navbar-link.active {
  color: #fff;
  background: rgba(255,255,255,.05);
  font-weight: 500;
  border-bottom: 2px solid rgba(231,193,18,.6);
}
.navbar-link.active::after {
  display: none;
}
/* Nav link icon (inline SVG) */
.navbar-link-icon {
  width: 14px; height: 14px; flex-shrink: 0;
  opacity: .5; transition: opacity .15s;
  vertical-align: -2px; margin-right: 5px;
}
.navbar-link:hover .navbar-link-icon,
.navbar-link.active .navbar-link-icon { opacity: .9; }
/* Nav separator dot */
.navbar-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.12); align-self: center;
  margin: 0 4px; flex-shrink: 0;
}
.lang-picker {
  display: flex;
  gap: 4px;
}
.lang-btn {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all .15s;
}
.lang-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.container { max-width: 1400px; margin: 0 auto; padding: 16px 20px; }

/* ── Status bar ──────────────────────── */
.status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--ws-gap-section);
  font-size: 12px;
  color: var(--text-secondary);
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.red { background: var(--red); }
.status-dot.yellow { background: var(--yellow); animation: pulse 1.5s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Ticker table ────────────────────── */
.section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}
.ticker-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.ticker-table {
  width: 100%;
  border-collapse: collapse;
}
.ticker-table th {
  background: var(--bg-card2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.ticker-table th:first-child { text-align: left; }
.ticker-table td {
  padding: 11px 14px;
  text-align: right;
  border-bottom: 1px solid rgba(43,49,57,0.5);
  font-size: 13px;
}
.ticker-table td:first-child { text-align: left; }
.ticker-table tr:last-child td { border-bottom: none; }
.ticker-table tr:hover td { background: rgba(255,255,255,0.02); }

.asset-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.asset-logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-card2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
}
.asset-symbol { font-weight: 600; }
.asset-name { color: var(--text-muted); font-size: 11px; }

.price-up { color: var(--green); }
.price-down { color: var(--red); }
.price-neutral { color: var(--text-primary); }

/* ── Risk zone card ──────────────────── */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.risk-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.risk-card-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.risk-card-value {
  font-size: 22px;
  font-weight: 700;
}
.risk-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
/* Zone text colors — global color policy */
.zone-NORMAL  { color: var(--zone-normal); }
.zone-ELEVATED  { color: var(--zone-elevated); }
.zone-CRITICAL  { color: var(--zone-critical); }
.zone-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Zone badge backgrounds — global color policy */
.zone-badge.NORMAL  { background: rgba(240,185,11,0.15);  color: var(--zone-normal); }
.zone-badge.ELEVATED  { background: rgba(46,134,255,0.15);  color: var(--zone-elevated); }
.zone-badge.CRITICAL  { background: rgba(246,70,93,0.15);   color: var(--zone-critical); }

/* ── Analysis button + progress ─────── */
.analysis-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--ws-gap-section);
  flex-wrap: wrap;
}
.btn-analysis {
  padding: 9px 20px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.btn-analysis:hover { opacity: 0.88; }
.btn-analysis:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Progress pipeline (full-width second row) ── */
.progress-pipeline {
  width: 100%;
  order: 99;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}
.progress-pipeline.active {
  display: flex;
}
.progress-wrap {
  width: 100%;
  background: rgba(43,49,57,.35);
  border-radius: 20px;
  height: 7px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.04);
}
.progress-bar {
  height: 100%;
  border-radius: 20px;
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
  width: 0%;
  position: relative;
  /* Default gold — JS overrides with symbol gradient */
  background: linear-gradient(90deg, #f0b90b, #f7d060, #f0b90b);
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  box-shadow: 0 0 10px rgba(240,185,11,.3);
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 20px; height: 100%;
  border-radius: 20px;
  background: rgba(255,255,255,.35);
  filter: blur(3px);
  animation: progressPulse 1.2s ease-in-out infinite;
}
@keyframes progressShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes progressPulse {
  0%, 100% { opacity: .2; }
  50%      { opacity: .9; }
}

/* ── Step dots pipeline ── */
.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 2px;
}
.prog-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.prog-step-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(94,102,115,.4);
  border: 1.5px solid rgba(94,102,115,.3);
  transition: all .3s ease;
  flex-shrink: 0;
}
.prog-step.completed .prog-step-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(240,185,11,.4);
}
.prog-step.active .prog-step-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(240,185,11,.5);
  animation: stepPulse 1s ease-in-out infinite;
}
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(240,185,11,.3); transform: scale(1); }
  50%      { box-shadow: 0 0 12px rgba(240,185,11,.6); transform: scale(1.25); }
}
.prog-step-label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,.2);
  text-align: center;
  letter-spacing: .3px;
  font-family: var(--mono, monospace);
  transition: color .3s;
  line-height: 1.2;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prog-step.completed .prog-step-label { color: rgba(255,255,255,.5); }
.prog-step.active .prog-step-label { color: var(--accent); font-weight: 700; }

/* ── Progress label (inline in top row) ── */
.progress-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  font-family: var(--mono, monospace);
  letter-spacing: .3px;
}
.progress-label:empty { display: none; }
.progress-label.active {
  color: var(--accent);
}

/* ── Signals table ───────────────────── */
.signals-table {
  width: 100%;
  border-collapse: collapse;
}
.signals-table th {
  background: var(--bg-card2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.signals-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(43,49,57,0.5);
}
.signals-table tr:last-child td { border-bottom: none; }
.direction-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.direction-badge.LONG    { background: rgba(24,144,255,0.15);  color: var(--blue); }
.direction-badge.SHORT   { background: rgba(246,70,93,0.15);   color: var(--red); }
.direction-badge.HOLD    { background: rgba(240,185,11,0.15);  color: var(--yellow); }
.direction-badge.NEUTRAL { background: rgba(240,185,11,0.15);  color: var(--yellow); }
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}
.status-badge.ACTIONABLE { background: rgba(14,203,129,0.2); color: var(--green); }
.status-badge.WATCH       { background: rgba(240,185,11,0.2);  color: var(--yellow); }
.status-badge.HOLD        { background: rgba(132,142,156,0.1); color: var(--text-muted); }
.status-badge.BLOCKED     { background: rgba(246,70,93,0.15);  color: var(--red); }

/* ── Gates ───────────────────────────── */
.gate { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.gate-PASS { color: var(--green); }
.gate-FAIL { color: var(--red); }
.gate-SKIP { color: var(--text-muted); }

/* ── News cards ──────────────────────── */
.news-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.news-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px;
  position: relative;
  backdrop-filter: blur(12px);
  transition: background .2s, box-shadow .2s, transform .2s, border-color .2s;
  transform-style: preserve-3d;
  will-change: transform;
  /* stagger entrance animation */
  opacity: 0;
  animation: niCardUp .4s cubic-bezier(.23,1,.32,1) forwards;
  animation-delay: var(--ni-delay, 0ms);
}
.news-card:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(212,168,67,.15);
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(212,168,67,.06);
}
/* Asset-colored cards override border-left via inline --nc-color custom prop */
.news-card--high { border-left: 3px solid var(--nc-color, var(--red, #f6465d)); }
.news-card--med  { border-left: 3px solid var(--nc-color, var(--accent, #eab308)); }
.news-card--low  { border-left: 3px solid var(--nc-color, rgba(255,255,255,.08)); }
/* Per-asset hover glow */
.news-card[style*="--nc-color"]:hover {
  background: color-mix(in srgb, var(--nc-color) 4%, transparent);
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px color-mix(in srgb, var(--nc-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--nc-color) 15%, transparent);
}
/* Asset identity strip — shows before headline */
.news-asset-identity {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 4px;
}
.news-asset-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px var(--nc-color, transparent);
}
.news-asset-sym {
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
  font-family: var(--mono, monospace);
  color: var(--nc-color, var(--text-primary));
}

/* Section headers for hierarchical grouping */
.news-section-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px; margin-top: 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: sticky; top: 0; z-index: 2;
  backdrop-filter: blur(12px);
}
/* restore bg for sticky — paint behind gradient text */
.news-section-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-card, #111215);
  z-index: -1;
}
.news-section-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.news-section-dot--high {
  background: var(--red, #f6465d);
  box-shadow: 0 0 6px rgba(246,70,93,.4);
  animation: niDotPulse 2s ease-in-out infinite;
}
.news-section-dot--med  { background: var(--accent, #eab308); box-shadow: 0 0 6px rgba(234,179,8,.4); }
.news-section-dot--low  { background: var(--text-muted, #6b7280); }
.news-section-count {
  margin-left: auto; font-size: 10px; font-weight: 700;
  color: var(--text-muted); background: rgba(255,255,255,.05);
  padding: 2px 8px; border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid rgba(255,255,255,.06);
  /* restore normal text color for count */
  -webkit-text-fill-color: var(--text-muted);
}

/* Meta row: badges + source + time */
.news-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* Headline */
.news-headline { margin-bottom: 5px; }
.news-headline-link {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.4;
  transition: color .15s;
}
.news-headline-link:hover { color: #F0D78C; }

/* Priority score bar — gold gradient with glow trail */
.news-score-bar {
  display: flex; align-items: center; gap: 5px; flex: 1; min-width: 80px; max-width: 160px;
}
.news-score-label {
  font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .3px; flex-shrink: 0;
}
.news-score-track {
  flex: 1; height: 4px; background: rgba(255,255,255,.05); border-radius: 3px; overflow: hidden;
  position: relative;
}
.news-score-fill {
  height: 100%; border-radius: 3px; position: relative;
  animation: niBarGrow .6s cubic-bezier(.23,1,.32,1) forwards;
  transform-origin: left;
}
.news-score-fill::after {
  content: '';
  position: absolute; top: -1px; right: -2px;
  width: 8px; height: calc(100% + 2px);
  border-radius: 3px;
  background: rgba(255,255,255,.4);
  filter: blur(2px);
  animation: niGlowTrail 1.5s ease-in-out infinite;
}
.news-score-fill--high { background: linear-gradient(90deg, var(--nc-color, #ef4444), var(--nc-color, #f87171)); }
.news-score-fill--med  { background: linear-gradient(90deg, var(--nc-color, #D4A843), var(--nc-color, #F0D78C)); }
.news-score-fill--low  { background: linear-gradient(90deg, var(--nc-color, #6b7280), var(--nc-color, #9ca3af)); }
.news-score-val {
  font-size: 11px; font-weight: 800; min-width: 20px; text-align: right; flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
}

/* Chips row */
.news-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.news-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  background: rgba(148,163,184,.08); color: var(--text-muted);
  border: 1px solid rgba(148,163,184,.1);
}
.news-chip--novel    { background: rgba(52,211,153,.1); color: #34d399; border-color: rgba(52,211,153,.2); }
.news-chip--risk     { background: rgba(246,70,93,.1);  color: #f6465d; border-color: rgba(246,70,93,.2); }
.news-chip--opp      { background: rgba(14,203,129,.1); color: #0ecb81; border-color: rgba(14,203,129,.2); }
.news-chip--priced   { background: rgba(148,163,184,.08); color: #94a3b8; }
.news-chip--conf     { background: rgba(96,165,250,.1); color: #60a5fa; border-color: rgba(96,165,250,.2); }
.news-chip--weak     { background: rgba(251,191,36,.08); color: #fbbf24; border-color: rgba(251,191,36,.15); }
.news-chip--partial  { background: rgba(148,163,184,.06); color: #94a3b8; border-color: rgba(148,163,184,.1); }
.news-chip--srcwarn  { background: rgba(246,70,93,.06); color: #f6465d; border-color: rgba(246,70,93,.12); }

/* Story state badge */
.news-story-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px;
}
.news-story-badge--breaking  { background: rgba(246,70,93,.12); color: #f6465d; }
.news-story-badge--confirmed { background: rgba(14,203,129,.1); color: #0ecb81; }
.news-story-badge--contested { background: rgba(251,191,36,.1); color: #fbbf24; }
.news-story-badge--fading    { background: rgba(148,163,184,.08); color: #94a3b8; }

/* Sentiment micro-indicator */
.news-sent {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 600;
}
.news-sent--bullish { color: #0ecb81; }
.news-sent--bearish { color: #f6465d; }
.news-sent--neutral { color: var(--text-muted); }

/* Cluster count badge */
.news-cluster-badge {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 600;
  background: rgba(96,165,250,.08); color: #60a5fa;
  border: 1px solid rgba(96,165,250,.15);
}

/* Card bottom row (score bar + chips inline) */
.news-card-bottom {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  flex-wrap: wrap;
}

/* Compact impact (single line, expandable on hover) */
.news-impact-compact {
  font-size: 10px; color: var(--text-muted); line-height: 1.4;
  margin-top: 6px; padding: 5px 8px;
  background: color-mix(in srgb, var(--nc-color, var(--accent)) 4%, transparent);
  border-left: 2px solid var(--nc-color, var(--accent));
  border-radius: 0 3px 3px 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; transition: all .2s;
  cursor: default;
}
.news-impact-compact:hover {
  -webkit-line-clamp: unset;
  background: rgba(240,185,11,0.06);
}

/* Intelligence class mini-label */
.news-intel-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .3px; padding: 1px 5px; border-radius: 2px;
}
.news-intel-label--risk     { background: rgba(246,70,93,.1); color: #f6465d; }
.news-intel-label--opp      { background: rgba(14,203,129,.1); color: #0ecb81; }
.news-intel-label--context   { background: rgba(148,163,184,.06); color: var(--text-muted); }

/* What supports / what weakens */
.news-expl-row {
  display: flex; gap: 8px; margin-top: 4px; font-size: 10px; color: var(--text-muted);
}
.news-expl-supports { color: #0ecb81; }
.news-expl-weakens  { color: #f6465d; }

/* Impact separator */
.news-impact-sep {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
  opacity: 0.5;
}

/* Legacy source-line — keep for backward compat */
.news-source-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.news-source-badge {
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: transparent;
  color: var(--text-muted);
  flex-shrink: 0;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255,255,255,.1);
  font-family: 'JetBrains Mono', monospace;
}
.news-link {
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
.news-link a { color: var(--text-muted); }
.news-link a:hover { color: var(--accent); }
.news-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 8px 0 4px;
}
.news-section-label.impact-lbl { color: var(--accent); }
.news-summary {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-impact-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.news-impact {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  padding: 8px 10px;
  background: rgba(240,185,11,0.05);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
}
/* Keep old .news-card-header + .news-cat-badge for compatibility */
.news-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.news-cat-badge {
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-card2);
  color: var(--text-secondary);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.news-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.4;
}
.news-title a { color: inherit; }
.news-title a:hover { color: var(--accent); text-decoration: none; }
.news-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.news-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag {
  padding: 2px 6px;
  background: var(--bg-card2);
  border-radius: 3px;
  font-size: 10px;
  color: var(--text-muted);
}

/* ── Layout grid ─────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
}
@media (max-width: 1000px) {
  .two-col { grid-template-columns: 1fr; }
  .news-sidebar { position: static; max-height: none; }
}

/* ── News Sidebar (sticky within #market-scroll) ── */
.news-sidebar {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 52px - var(--lm-total-h, 270px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.news-sidebar-hd {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 8px;
  border-bottom: none;
  margin-bottom: 0;
  flex-shrink: 0;
  position: relative;
}
.news-sidebar-hd::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,.2) 30%, rgba(212,168,67,.2) 70%, transparent);
}
.news-hd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.news-hd-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.news-hd-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.news-hd-icon {
  color: #D4A843;
  flex-shrink: 0;
  opacity: .85;
  filter: drop-shadow(0 0 3px rgba(212,168,67,.3));
}
.news-hd-title {
  font-size: 15px;
  font-weight: 700;
  color: #f0b90b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
/* ── News Rescan Progress Bar ─────────────────────────── */
.news-rescan-progress {
  padding: 6px 0 2px;
}
.news-rescan-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.news-rescan-stage {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-rescan-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
}
.news-rescan-track {
  width: 100%;
  background: rgba(43,49,57,.35);
  border-radius: 20px;
  height: 7px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.04);
}
.news-rescan-fill {
  height: 100%;
  border-radius: 20px;
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
  width: 0%;
  position: relative;
  background: linear-gradient(90deg, #F7931A 0%, #627EEA 33%, #9945FF 67%, #f0b90b 100%, #F7931A);
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  box-shadow: 0 0 10px rgba(240,185,11,.3);
}
.news-rescan-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 20px; height: 100%;
  border-radius: 20px;
  background: rgba(255,255,255,.35);
  filter: blur(3px);
  animation: progressPulse 1.2s ease-in-out infinite;
}

/* Filter toggle button */
.news-filter-toggle {
  padding-top: 6px;
}
.news-filter-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-muted);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(6px);
}
.news-filter-btn:hover { color: var(--text-primary); border-color: rgba(212,168,67,.3); background: rgba(212,168,67,.04); }
.news-filter-btn.open { color: #D4A843; border-color: rgba(212,168,67,.4); background: rgba(212,168,67,.06); }
.news-filter-btn.open .news-filter-chevron { transform: rotate(180deg); }
.news-filter-chevron { transition: transform .2s; margin-left: auto; }
/* Live pulse dot + article count */
.news-hd-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}
.news-live-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green, #22c55e);
  box-shadow: 0 0 6px rgba(34,197,94,.5);
  animation: niPulse 2s ease-in-out infinite;
}
@keyframes niPulse {
  0%,100% { opacity: 1; box-shadow: 0 0 4px rgba(34,197,94,.4); }
  50%     { opacity: .5; box-shadow: 0 0 8px rgba(34,197,94,.7); }
}
.news-hd-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.news-feed-inner {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
}

/* ── Card wrapper ────────────────────── */
.card {
  background: var(--bg-card);
  border: var(--ws-border-section);
  border-radius: var(--ws-radius-section);
  overflow: hidden;
}
.card-header {
  padding: var(--ws-pad-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.card-body { padding: 16px; }

/* ── Explanation text ────────────────── */
.explanation {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 10px 12px;
  background: var(--bg-card2);
  border-radius: var(--radius);
  margin-top: 8px;
}

/* ── Spinner ─────────────────────────── */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ─────────────────────── */
.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 32px;
  font-size: 13px;
}
.empty-state.compact { padding: 12px; }

/* ── Toast ───────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
}
.toast {
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  animation: slideIn .2s ease;
  max-width: 300px;
}
.toast.success { background: rgba(14,203,129,0.15); border: 1px solid var(--green); color: var(--green); }
.toast.error   { background: rgba(246,70,93,0.15);  border: 1px solid var(--red);   color: var(--red); }
.toast.info    { background: rgba(24,144,255,0.15); border: 1px solid var(--blue);  color: var(--blue); }
@keyframes slideIn { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }

/* ── Settings page ───────────────────── */
.settings-layout { max-width: 760px; margin: 0 auto; padding: 20px; }
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  transition: border-color .15s;
}
.form-input:focus { outline: none; border-color: var(--accent); }
.form-input::placeholder { color: var(--text-muted); }
.form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* Calibration sliders */
.cal-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  margin-top: 8px;
}
.cal-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 4px rgba(240,185,11,.4);
}
.cal-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-card);
}
/* ── Risk zone rows (Card 2 Risk Criteria) ───────────────────────── */
.risk-zone-rows { display: flex; flex-direction: column; gap: 8px; }
.risk-zone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card2);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.risk-zone-chk {
  width: 15px; height: 15px;
  cursor: pointer; flex-shrink: 0;
  accent-color: var(--accent);
}
.risk-zone-dot {
  width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}
.risk-zone-label {
  font-size: 11px; font-weight: 700;
  width: 58px; flex-shrink: 0;
  letter-spacing: 0.6px;
  color: var(--text-primary);
}
.risk-range-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.risk-num {
  width: 64px !important;
  text-align: center;
  padding: 5px 6px !important;
}
input.risk-num[readonly] {
  color: var(--text-muted);
  cursor: default;
  background: var(--bg-primary);
}
.risk-sep { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.risk-pct { color: var(--text-muted); font-size: 12px; }
.risk-opt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.risk-opt-row input[type="checkbox"] {
  width: 15px; height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ── Recipient chips ──────────────────────────────────────────────── */
.chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 38px;
  padding: 6px 8px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 6px;
  align-items: flex-start;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  max-width: 240px;
  overflow: hidden;
}
.chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-del {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
  transition: color .15s;
}
.chip-del:hover { color: var(--red); }
.chips-empty {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
  align-self: center;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label {
  font-size: 13px;
  color: var(--text-primary);
}
.toggle-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.toggle {
  width: 36px; height: 20px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background .15s;
  flex-shrink: 0;
}
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform .15s;
}
.toggle.on::after { transform: translateX(16px); }

.save-indicator {
  font-size: 11px;
  color: var(--green);
  display: none;
}
.save-indicator.show { display: inline; }

.threshold-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* ── Asset checkboxes ────────────────── */
.assets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.asset-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s;
}
.asset-check.checked {
  border-color: var(--accent);
  background: rgba(240,185,11,0.08);
}
.asset-check input { display: none; }

/* ── Footer ──────────────────────────── */
.app-footer {
  text-align: center;
  padding: 20px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 0;            /* below #market-scroll (z-index:1) */
  pointer-events: none;  /* never intercept clicks from scroll content above */
  margin-top: 32px;
}

/* ── Settings v2 — 6-card grid ───────── */
.settings-grid {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 760px) {
  .settings-grid { grid-template-columns: 1fr; }
}
.settings-card-wide {
  grid-column: 1 / -1;
}
.save-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .2s;
}
.save-badge.show { opacity: 1; }
.save-badge.saved  { background: rgba(14,203,129,0.15); color: var(--green); }
.save-badge.error  { background: rgba(246,70,93,0.15);  color: var(--red); }

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  margin-top: 8px;
  flex-wrap: wrap;
  max-width: 900px;
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
}
.section-header h1 {
  font-size: 18px;
  font-weight: 700;
}
.section-header .header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Password field wrapper (shared across all forms) ─────────────── */
.pwd-wrap {
  position: relative;
}
.pwd-wrap input { padding-right: 40px; }
.pwd-toggle {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 38px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  border-radius: 0 8px 8px 0;
}
.pwd-toggle:hover { color: var(--text-primary); }
.pwd-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 0 8px 8px 0;
}
.pwd-toggle svg { display: block; pointer-events: none; }

/* ═══════════════════════════════════════════════════════
   LIVE MARKET PANEL (Market page only — resizable split)
   ═══════════════════════════════════════════════════════ */

/* ── Wrapper contains panel + resize-handle ───────── */
#lm-panel-wrap {
  /* normal flow — pushes content down */
  width: 100%;
  font-size: 12px;
  font-family: var(--font);
}

/* ── Panel: ctrl-bar + resizable content ─────────── */
.lm-panel {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* ── Ctrl bar (always visible, 40px) ─────────────── */
.lm-ctrl-bar {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  gap: 0;
  overflow: hidden;
}

.lm-ctrl-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lm-ctrl-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  overflow-x: auto;
  flex-shrink: 1;
}
.lm-ctrl-right::-webkit-scrollbar { display: none; }

/* Title */
.lm-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: -.2px;
}

/* Exchange badge */
.lm-exchange-badge {
  background: rgba(240,185,11,.12);
  color: var(--accent);
  border: 1px solid rgba(240,185,11,.3);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  letter-spacing: .3px;
}

/* Status dot */
.lm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--text-muted);
}
.lm-dot.green  { background: var(--green);  box-shadow: 0 0 5px var(--green); }
.lm-dot.yellow { background: var(--yellow); box-shadow: 0 0 5px var(--yellow); }
.lm-dot.red    { background: var(--red);    box-shadow: 0 0 5px var(--red); }

/* Status text */
.lm-status-text { font-size: 11px; white-space: nowrap; color: var(--text-secondary); }
.lm-status-text.lm-conn-green  { color: var(--green); }
.lm-status-text.lm-conn-yellow { color: var(--yellow); }
.lm-status-text.lm-conn-red    { color: var(--red); }

.lm-lag      { color: var(--text-muted); font-size: 10px; }
.lm-meta-txt { color: var(--text-muted); font-size: 10px; white-space: nowrap; }

/* Separator */
.lm-sep { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }

/* Label */
.lm-label { color: var(--text-muted); font-size: 11px; white-space: nowrap; cursor: pointer; }

/* Checkbox */
.lm-check { accent-color: var(--accent); width: 13px; height: 13px; cursor: pointer; }

/* Rate select */
.lm-select {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 3px;
  font-size: 11px;
  padding: 2px 4px;
  cursor: pointer;
}
.lm-select:focus { outline: none; border-color: var(--accent); }

/* Symbols input */
.lm-sym-input {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 3px;
  font-size: 11px;
  padding: 3px 6px;
  width: 195px;
}
.lm-sym-input:focus { outline: none; border-color: var(--accent); }

/* Ctrl buttons */
.lm-btn {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 3px;
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.lm-btn:hover { background: var(--bg-primary); border-color: var(--accent); color: var(--text-primary); }

/* Gold Binance-style accent button */
.lm-btn-gold {
  background: linear-gradient(135deg, rgba(240,185,11,0.15), rgba(240,185,11,0.08));
  border: 1px solid rgba(240,185,11,0.45);
  color: #F0B90B;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow: 0 0 6px rgba(240,185,11,0.2);
}
.lm-btn-gold:hover {
  background: linear-gradient(135deg, rgba(240,185,11,0.3), rgba(240,185,11,0.15));
  border-color: #F0B90B;
  color: #FFD54F;
  box-shadow: 0 0 8px rgba(240,185,11,0.25);
}

/* Collapse chevron */
.lm-chevron-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1;
  transition: color .12s;
}
.lm-chevron-btn:hover { color: var(--text-primary); }

/* ── Content area (height set by JS) ─────────────── */
.lm-content {
  overflow-y: auto;
  overflow-x: hidden;
  /* height is set inline by JS */
}
.lm-content::-webkit-scrollbar { width: 5px; }
.lm-content::-webkit-scrollbar-track { background: var(--bg-primary); }
.lm-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Resize handle ────────────────────────────────── */
.lm-resize-handle {
  height: 6px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
  user-select: none;
  position: relative;
}
.lm-resize-handle:hover { background: var(--bg-card2); }
.lm-resize-handle:hover .lm-resize-grip { background: var(--accent); }

.lm-resize-grip {
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background .12s;
  pointer-events: none;
}

/* ── Table view ───────────────────────────────────── */
.lm-table-view {
  overflow-x: auto;
  height: 100%;
}
.lm-table-view::-webkit-scrollbar { height: 4px; }
.lm-table-view::-webkit-scrollbar-track { background: var(--bg-primary); }
.lm-table-view::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.lm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.lm-th {
  padding: 8px 12px;
  text-align: right;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.lm-th-l { text-align: left; }

.lm-row {
  border-bottom: 1px solid rgba(43,49,57,.4);
  transition: background .08s;
}
.lm-row:hover { background: rgba(255,255,255,.02); }
.lm-row-stale   { opacity: .72; }
.lm-row-missing { opacity: .42; }

.lm-td {
  padding: 8px 12px;
  text-align: right;
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: 12px;
}
.lm-td-sym {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}

/* Coin logo circle */
.lm-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: -.5px;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  box-shadow: 0 0 6px color-mix(in srgb, currentColor 30%, transparent);
}
.lm-logo-md {
  width: 36px;
  height: 36px;
  font-size: 10px;
}

/* Symbol info */
.lm-sym-info { display: flex; flex-direction: column; gap: 1px; }
.lm-sym-lbl  { font-weight: 700; color: var(--text-primary); font-size: 12px; }
.lm-sym-name { color: var(--text-muted); font-size: 10px; }

/* Price cell */
.lm-price {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
}
.lm-num  { color: var(--text-muted); font-size: 11px; }
.lm-age  { color: var(--text-muted); font-size: 10px; }
.lm-dash { color: var(--text-muted); }

/* Up / Down colours */
.lm-up { color: var(--green); font-weight: 600; }
.lm-dn { color: var(--red);   font-weight: 600; }

/* Price flash animation */
@keyframes lm-flash-up { 0%,100% { background: transparent; } 30% { background: rgba(14,203,129,.18); } }
@keyframes lm-flash-dn { 0%,100% { background: transparent; } 30% { background: rgba(246,70,93,.18);  } }
.lm-flash-up { animation: lm-flash-up .5s ease; }
.lm-flash-dn { animation: lm-flash-dn .5s ease; }

/* Empty state */
.lm-empty   { text-align: center; color: var(--text-muted); padding: 18px; }
.lm-loading { color: var(--text-muted); font-style: italic; }

/* Source badge */
.lm-src {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.lm-src-ws   { color: var(--green);      background: rgba(14,203,129,.12); }
.lm-src-rest { color: var(--yellow);     background: rgba(240,185,11,.12); }
.lm-src-none { color: var(--text-muted); background: var(--bg-card2); }

/* ── Cards view ───────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   LIVE MARKET CARDS — W1 Premium Trading Terminal
   ═══════════════════════════════════════════════════════════ */
.lm-cards-view {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 16px 12px;
  height: 100%;
}
.lm-cards-view::-webkit-scrollbar { height: 4px; }
.lm-cards-view::-webkit-scrollbar-track { background: var(--bg-primary); }
.lm-cards-view::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.lm-cards-wrap { display: flex; gap: 10px; align-items: stretch; }

/* ── Card: W1 glassmorphism ── */
.lm-card {
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 14px 16px 12px;
  min-width: 220px;
  max-width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform 280ms cubic-bezier(.25,.46,.45,.94),
              background 280ms, border-color 280ms, box-shadow 280ms;
  animation: lm-cardUp 500ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--lm-delay, 0) * 80ms);
  will-change: transform;
}
@keyframes lm-cardUp {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.lm-card:hover {
  background: rgba(255,255,255,.035);
  border-color: rgba(212,168,67,.15);
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(212,168,67,.06);
}
/* Gold shimmer outline on hover */
.lm-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(212,168,67,.35) 25%,
    rgba(240,215,140,.5) 50%, rgba(212,168,67,.35) 75%, transparent 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 2;
}
.lm-card:hover::after {
  opacity: 1;
  animation: db2-shimmer 2s linear infinite;
}
.lm-q-stale   { opacity: .72; }
.lm-q-missing { opacity: .42; }

/* ── Coin-color accent strip (left border glow) ── */
.lm-card::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--card-coin, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--card-coin, var(--accent)) 40%, transparent);
  opacity: .6;
  transition: opacity .3s;
}
.lm-card:hover::before { opacity: 1; }

/* ── Header ── */
.lm-card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.lm-card-info { flex: 1; min-width: 0; }
.lm-card-sym  { font-weight: 700; font-size: 14px; color: #eaecef; }
.lm-card-quote{ color: #848e9c; font-size: 12px; font-weight: 400; }
.lm-card-name { font-size: 11px; color: #848e9c; letter-spacing: .2px; }

/* ── Price zone ── */
.lm-card-price-zone {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.lm-card-price-left { flex: 1; }
.lm-card-price {
  font-size: 24px;
  font-weight: 600;
  color: #eaecef;
  letter-spacing: -.3px;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.lm-card-chg {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 3px;
}
.lm-card-chg.lm-up { background: rgba(14,203,129,.12); color: #0ecb81; }
.lm-card-chg.lm-dn { background: rgba(246,70,93,.12);  color: #f6465d; }

/* ── Confidence ring (SVG gauge) ── */
.lm-conf-ring {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.lm-conf-ring svg { width: 48px; height: 48px; }
.lm-conf-ring-track {
  fill: none;
  stroke: rgba(255,255,255,.06);
  stroke-width: 3;
}
.lm-conf-ring-arc {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray .8s cubic-bezier(.25,.46,.45,.94),
              stroke .4s;
}
.lm-conf-ring-arc.lm-conf-high { stroke: #0ecb81; filter: drop-shadow(0 0 4px rgba(14,203,129,.4)); }
.lm-conf-ring-arc.lm-conf-mid  { stroke: #f0b90b; filter: drop-shadow(0 0 4px rgba(240,185,11,.4)); }
.lm-conf-ring-arc.lm-conf-low  { stroke: #f6465d; filter: drop-shadow(0 0 4px rgba(246,70,93,.4)); }
.lm-conf-ring-pct {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.lm-conf-ring-pct.lm-conf-high { color: #0ecb81; }
.lm-conf-ring-pct.lm-conf-mid  { color: #f0b90b; }
.lm-conf-ring-pct.lm-conf-low  { color: #f6465d; }

/* ── Signal badge (in header) ── */
.lm-card .lm-sig-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Brief text ── */
.lm-card-brief {
  font-size: 11px;
  color: #848e9c;
  line-height: 1.45;
  padding: 6px 10px;
  background: rgba(255,255,255,.02);
  border-radius: 8px;
  border-left: 2px solid rgba(212,168,67,.2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Reason pills ── */
.lm-card-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.lm-reason-pill {
  font-size: 10px;
  color: #848e9c;
  background: rgba(255,255,255,.05);
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ── Data grid (2x2 compact) ── */
.lm-card-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(43,49,57,.6);
  margin-top: auto;
}
.lm-card-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lm-card-lbl {
  color: #848e9c;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}
.lm-card-val {
  color: #b7bdc6;
  font-size: 12px;
  font-weight: 500;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Footer: Live + Source ── */
.lm-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.lm-card-upd {
  color: #848e9c;
  font-size: 9px;
}

/* ── Keep old row styles for backwards compat ── */
.lm-card-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   MARKET INTELLIGENCE STRIP — Phase 1 Widgets
   Fear & Greed · Top Movers · ML Probabilities · Forecast
   ══════════════════════════════════════════════════════════════ */
.section-title-bar,
.mi-strip-header,
.ais-strip-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.35);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 2px;
}
.section-title-bar {
  margin-bottom: 8px;
  padding: 0 0 6px;
  color: var(--accent, #f0b90b);
  font-size: 12px;
}
/* Scenarios + System Health — separated panels */
.db-scenarios-panel,
.db-health-panel-wrap {
  background: rgba(22,26,30,.6);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 10px 12px 8px;
  margin-bottom: var(--ws-gap-section);
  position: relative;
}
.db-scenarios-panel::before,
.db-health-panel-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.mi-strip-header { grid-column: 1 / -1; }
.ais-strip-header { grid-column: 1 / -1; margin-bottom: 4px; }
.mi-strip-wrapper,
.ai-insights-strip-wrapper {
  background: linear-gradient(135deg, rgba(13,15,20,.95) 0%, rgba(19,21,28,.9) 100%);
  border: 1px solid rgba(42,45,58,.6);
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin-bottom: var(--ws-gap-section);
  position: relative;
  overflow: hidden;
  animation: tierA-fadeUp 500ms cubic-bezier(.25,.46,.45,.94) forwards;
}
.mi-strip-wrapper::before,
.ai-insights-strip-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
}
/* ─── MI Strip Grid ─── */
.mi-strip {
  display: grid;
  grid-template-columns: 170px 1fr 1fr 1fr;
  gap: 10px;
  margin: 10px 0 0;
  min-height: 90px;
}

/* ─── MI Widget (W1 Glassmorphism Card) ─── */
.mi-widget {
  position: relative;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  cursor: default;
  overflow: hidden;
  animation: mi-cardUp 600ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--mi-delay, 0) * 80ms);
  transition: transform 350ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 350ms cubic-bezier(.25,.46,.45,.94),
              border-color 350ms cubic-bezier(.25,.46,.45,.94);
}
@keyframes mi-cardUp {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.mi-widget:hover {
  border-color: rgba(212,168,67,.18);
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(212,168,67,.06);
}

/* ─── Shimmer overlay (ping-pong) ─── */
.mi-card-shimmer {
  position: absolute;
  top: 0; left: -100%; width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,67,.04) 25%, rgba(212,168,67,.08) 50%, rgba(212,168,67,.04) 75%, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 0;
}
.mi-widget:hover .mi-card-shimmer {
  opacity: 1;
  animation: mi-shimmerSlide 2s ease-in-out infinite alternate;
}
@keyframes mi-shimmerSlide {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(30%); }
}

/* ─── Widget Header (icon + title + badge) ─── */
.mi-card-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.mi-card-icon {
  width: 28px; height: 28px; min-width: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: #F0B90B;
}
.mi-card-icon svg { position: relative; z-index: 1; }
.mi-icon-glow {
  position: absolute; inset: -2px; border-radius: 10px;
  opacity: .5; z-index: 0;
  animation: mi-glowPulse 3s ease-in-out infinite;
}
@keyframes mi-glowPulse { 0%,100% { opacity: .4; } 50% { opacity: .7; } }

/* Per-icon glow colors */
.mi-icon-activity .mi-icon-glow { box-shadow: 0 0 10px rgba(240,185,11,.35); }
.mi-icon-trending .mi-icon-glow { box-shadow: 0 0 10px rgba(14,203,129,.35); }
.mi-icon-cpu .mi-icon-glow      { box-shadow: 0 0 10px rgba(99,102,241,.35); }
.mi-icon-target .mi-icon-glow   { box-shadow: 0 0 10px rgba(59,130,246,.35); }

/* Icon micro-animations */
.mi-icon-activity svg { animation: mi-pulse 2.5s ease-in-out infinite; }
@keyframes mi-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.mi-icon-trending svg { animation: mi-bounce 3s ease-in-out infinite; }
@keyframes mi-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.mi-icon-cpu svg { animation: mi-spin 8s linear infinite; }
.mi-icon-target svg { animation: mi-crosshair 3s ease-in-out infinite; }
@keyframes mi-crosshair { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

.mi-card-hd-text { flex: 1; min-width: 0; }
.mi-widget-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2px;
  line-height: 1.2;
}
.mi-widget-hint {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,.25);
  letter-spacing: .1px;
  margin-bottom: 0;
  line-height: 1.3;
}
.mi-card-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
  white-space: nowrap;
  animation: mi-badgePop 400ms cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(var(--mi-delay, 0) * 80ms + 300ms);
  font-variant-numeric: tabular-nums;
}
@keyframes mi-badgePop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ─── Fear & Greed Gauge (W1) ─── */
.mi-fg { align-items: center; }
.mi-fg .mi-card-header { justify-content: center; }
.mi-fg-gauge { text-align: center; position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mi-fg-svg { width: 110px; height: 62px; filter: drop-shadow(0 0 8px rgba(240,185,11,.15)); }
.mi-fg-svg path[opacity] { transition: opacity 600ms; }
.mi-fg-svg:hover path[opacity] { opacity: 1 !important; }
#mi-fg-needle {
  transition: transform 800ms cubic-bezier(.25,.46,.45,.94);
  filter: drop-shadow(0 0 4px rgba(255,255,255,.4));
}
.mi-fg-value {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 30px; font-weight: 800; line-height: 1;
  margin-top: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px currentColor;
}
.mi-fg-label {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; margin-top: 3px;
}
.mi-fg-extreme-fear { color: #f6465d; }
.mi-fg-fear { color: #e8833a; }
.mi-fg-neutral { color: #f0b90b; }
.mi-fg-greed { color: #b6d44f; }
.mi-fg-extreme-greed { color: #0ecb81; }

/* ─── Top Movers (W1) ─── */
.mi-movers-list {
  display: flex; flex-direction: column; gap: 3px; overflow: hidden; flex: 1;
  position: relative; z-index: 1;
}
.mi-mover-row {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  padding: 3px 6px;
  border-radius: 6px;
  transition: all 200ms;
  animation: mi-rowSlide 400ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--row-i, 0) * 60ms + 200ms);
}
@keyframes mi-rowSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mi-mover-row:hover {
  background: rgba(255,255,255,.04);
  transform: translateX(3px);
}
.mi-mover-sym {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700; min-width: 36px; color: var(--text-primary, #eaecef);
  font-size: 11px;
}
.mi-mover-bar {
  flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.04);
  overflow: hidden; position: relative;
}
.mi-mover-fill {
  height: 100%; border-radius: 3px; position: relative;
  animation: mi-barGrow .6s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes mi-barGrow { from { width: 0% !important; } }
.mi-mover-fill.up { background: linear-gradient(90deg, rgba(14,203,129,.5), #0ecb81); }
.mi-mover-fill.dn { background: linear-gradient(90deg, rgba(246,70,93,.5), #f6465d); }
.mi-mover-glow {
  position: absolute; right: -1px; top: -1px; bottom: -1px; width: 6px;
  border-radius: 3px;
  animation: mi-glowTrail 1.5s ease-in-out infinite alternate;
}
@keyframes mi-glowTrail { 0% { opacity: .4; } 100% { opacity: .9; } }
.mi-mover-fill.up .mi-mover-glow { background: radial-gradient(circle, rgba(14,203,129,.8), transparent); }
.mi-mover-fill.dn .mi-mover-glow { background: radial-gradient(circle, rgba(246,70,93,.8), transparent); }
.mi-mover-pct {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; min-width: 52px; text-align: right;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.mi-mover-pct.up { color: #0ecb81; }
.mi-mover-pct.dn { color: #f6465d; }
.mi-mover-empty { color: var(--text-muted); font-size: 11px; font-style: italic; }

/* ─── ML Probabilities (W1) ─── */
.mi-proba-list {
  display: flex; flex-direction: column; gap: 5px; flex: 1; overflow: hidden;
  position: relative; z-index: 1;
}
.mi-proba-row {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  animation: mi-rowSlide 400ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--row-i, 0) * 60ms + 200ms);
}
.mi-proba-sym {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700; min-width: 32px; font-size: 11px; color: var(--text-primary);
}
.mi-proba-bar {
  flex: 1; height: 14px; border-radius: 5px; display: flex; overflow: hidden;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.mi-proba-seg {
  height: 100%;
  animation: mi-barGrow .6s cubic-bezier(.25,.46,.45,.94) forwards;
  animation-delay: calc(var(--seg-delay, 0));
}
.mi-proba-seg.up   { background: linear-gradient(90deg, rgba(14,203,129,.6), #0ecb81); }
.mi-proba-seg.flat { background: rgba(132,142,156,.4); }
.mi-proba-seg.down { background: linear-gradient(90deg, #f6465d, rgba(246,70,93,.6)); }
.mi-proba-labels {
  display: flex; gap: 4px; font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.mi-proba-labels span { white-space: nowrap; }

/* ─── Price Forecast (W1) ─── */
.mi-forecast-list {
  display: flex; flex-direction: column; gap: 4px; flex: 1; overflow: hidden;
  position: relative; z-index: 1;
}
.mi-fc-row {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: all 200ms;
  animation: mi-rowSlide 400ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--row-i, 0) * 60ms + 200ms);
}
.mi-fc-row:hover {
  background: rgba(255,255,255,.04);
  transform: translateX(3px);
}
.mi-fc-sym {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700; min-width: 32px; color: var(--text-primary);
  font-size: 11px;
}
.mi-fc-target {
  font-family: 'JetBrains Mono', monospace; color: var(--text-primary);
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.mi-fc-ci {
  font-size: 10px; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.mi-fc-dir {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  margin-left: auto;
  animation: mi-badgePop 400ms cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(var(--row-i, 0) * 60ms + 400ms);
}
.mi-fc-dir.up   { background: rgba(14,203,129,.12); color: #0ecb81; border: 1px solid rgba(14,203,129,.15); }
.mi-fc-dir.dn   { background: rgba(246,70,93,.12); color: #f6465d; border: 1px solid rgba(246,70,93,.15); }
.mi-fc-dir.flat { background: rgba(132,142,156,.12); color: #848e9c; border: 1px solid rgba(132,142,156,.1); }

/* ─── MI Responsive ─── */
@media (max-width: 900px) {
  .mi-strip { grid-template-columns: 1fr 1fr; }
  .mi-fg { grid-column: 1 / -1; flex-direction: row; gap: 16px; }
  .mi-fg .mi-card-header { margin-bottom: 0; }
}
@media (max-width: 540px) {
  .mi-strip { grid-template-columns: 1fr; }
  .mi-fg { flex-direction: column; }
}

/* ─── MI Section Title Override ─── */
.mi-strip-wrapper .mkt-section-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #F0B90B !important;
  letter-spacing: .6px !important;
  -webkit-text-fill-color: #F0B90B !important;
}

/* ── Signal overlay badges (table + cards) ─────────────────── */
.lm-sig-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.lm-sig-long  { background: rgba(14,203,129,.12); color: #0ecb81; }
.lm-sig-short { background: rgba(246,70,93,.12);  color: #f6465d; }
.lm-sig-hold  { background: rgba(132,142,156,.12); color: #848e9c; }

.lm-status-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: 9px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.lm-st-action  { background: rgba(14,203,129,.12); color: #0ecb81; }
.lm-st-watch   { background: rgba(240,185,11,.12); color: #f0b90b; }
.lm-st-hold    { background: rgba(132,142,156,.12); color: #848e9c; }
.lm-st-blocked { background: rgba(246,70,93,.12);  color: #f6465d; }

.lm-th-signal { min-width: 70px; text-align: center; }

/* Signal row in card view */
.lm-card-signal-row {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 0;
}
.lm-card-conf {
  font-size: 10px; color: var(--text-muted); font-family: var(--font-mono);
}

/* ── Confidence bar (visual meter) ────── */
.lm-conf-wrap {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 2px; padding: 0 2px;
}
.lm-conf-label {
  font-size: 9px; color: var(--text-muted); white-space: nowrap;
  min-width: 68px;
}
.lm-conf-bar {
  flex: 1; height: 5px; background: rgba(255,255,255,.06);
  border-radius: 3px; overflow: hidden; min-width: 40px;
}
.lm-conf-fill {
  height: 100%; border-radius: 3px;
  transition: width .6s ease, background .4s;
}
.lm-conf-fill.lm-conf-high { background: linear-gradient(90deg, #0ecb81, #2edfa2); }
.lm-conf-fill.lm-conf-mid  { background: linear-gradient(90deg, #f0b90b, #f5d245); }
.lm-conf-fill.lm-conf-low  { background: linear-gradient(90deg, #f6465d, #ff6b7a); }
.lm-conf-pct {
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  min-width: 28px; text-align: right;
}
.lm-conf-pct.lm-conf-high { color: #0ecb81; }
.lm-conf-pct.lm-conf-mid  { color: #f0b90b; }
.lm-conf-pct.lm-conf-low  { color: #f6465d; }
.lm-conf-grade {
  font-size: 9px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; white-space: nowrap;
}
.lm-conf-grade.lm-conf-high { color: #0ecb81; }
.lm-conf-grade.lm-conf-mid  { color: #f0b90b; }
.lm-conf-grade.lm-conf-low  { color: #f6465d; }

/* ── Table row signal accent (left border highlight) ────── */
.lm-row.lm-row-long {
  border-left: 3px solid #0ecb81;
  background: rgba(14,203,129,.03);
}
.lm-row.lm-row-short {
  border-left: 3px solid #f6465d;
  background: rgba(246,70,93,.03);
}

/* ── Table confidence color ────── */
.lm-tbl-conf {
  font-weight: 700; font-family: var(--font-mono); font-size: 11px;
}
.lm-tbl-conf.lm-conf-high { color: #0ecb81; }
.lm-tbl-conf.lm-conf-mid  { color: #f0b90b; }
.lm-tbl-conf.lm-conf-low  { color: #f6465d; }

/* ── Spread quality colors ────── */
.lm-spread-tight  { color: #0ecb81; font-weight: 600; }
.lm-spread-normal { color: #f0b90b; }
.lm-spread-wide   { color: #f6465d; font-weight: 600; }
.lm-spread-unit {
  color: var(--text-muted); font-size: 9px;
  cursor: help; border-bottom: 1px dotted rgba(132,142,156,.4);
}

/* ── Spread quality dot (CSS, replaces emoji) ── */
.lm-spread-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}
.lm-dot-green  { background: #0ecb81; }
.lm-dot-yellow { background: #f0b90b; }
.lm-dot-red    { background: #f6465d; }

/* ── Live indicator ────── */
.lm-live-dot {
  display: inline-block; width: 6px; height: 6px;
  background: #0ecb81; border-radius: 50%;
  margin-right: 3px; vertical-align: middle;
  animation: lm-pulse 1.5s ease-in-out infinite;
}
@keyframes lm-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(14,203,129,.5); }
  50%      { opacity: .6; box-shadow: 0 0 0 4px rgba(14,203,129,0); }
}

/* Brief headline in card */
.lm-card-brief {
  font-size: 10px; color: rgba(255,255,255,.75); line-height: 1.4;
  margin: 2px 0 4px; padding: 4px 8px;
  background: rgba(255,255,255,.03); border-radius: 6px;
  border-left: 2px solid rgba(240,185,11,.25);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ═══════════════════════════════════════════════════════════
   CRITICAL STATUS UI  (Market page — Blocks 1-3 + signal gates)
   ═══════════════════════════════════════════════════════════ */

/* Wrapper */
#critical-wrap { margin-bottom: var(--ws-gap-section); }

/* ── Block 1: Market Status Bar ───────────────────────────── */
.krit-statusbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(22,26,30,.95) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--ws-gap-section);
  font-size: 12px;
}

/* Zone badge */
.krit-zone-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
/* krit-zone badge — follows global color policy */
.krit-zone-bg-NORMAL {
  background: rgba(240,185,11,0.12);
  color: var(--zone-normal);
  box-shadow: 0 0 8px rgba(240,185,11,.1);
}
.krit-zone-bg-ELEVATED {
  background: rgba(46,134,255,0.12);
  color: var(--zone-elevated);
  box-shadow: 0 0 8px rgba(46,134,255,.1);
}
.krit-zone-bg-CRITICAL {
  background: rgba(246,70,93,0.15);
  color: var(--zone-critical);
  box-shadow: 0 0 12px rgba(246,70,93,.15);
  animation: kritPulse 2s ease-in-out infinite;
}
@keyframes kritPulse {
  0%,100% { box-shadow: 0 0 8px rgba(246,70,93,.1); }
  50%     { box-shadow: 0 0 16px rgba(246,70,93,.25); }
}
.krit-zone-bg-NONE   { background: var(--bg-card2);        color: var(--text-muted); }

/* Bar inline elements */
.krit-sep     { color: rgba(255,255,255,.08); font-size: 14px; user-select: none; }
.krit-lbl     { color: var(--text-muted); font-size: 10px; font-weight: 600; white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; }
.krit-val     { color: var(--text-primary); font-size: 12px; font-weight: 700; white-space: nowrap; }
.krit-delta   { font-size: 11px; white-space: nowrap; font-weight: 600; }
.krit-updated { margin-left: auto; font-size: 10px; color: var(--text-muted); white-space: nowrap; font-family: var(--mono, monospace); }

/* ── Blocks 2 + 3: side-by-side panels ────────────────────── */
.krit-panels-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px) {
  .krit-panels-row { grid-template-columns: 1fr; }
}

.krit-panel {
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(22,26,30,.7) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .2s;
}
.krit-panel:hover {
  border-color: rgba(234,179,8,.12);
}
.krit-panel-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}

/* ── Run Settings Strip ── */
#run-settings-strip {
  padding: 5px 10px !important;
  margin-bottom: 0;
  background: rgba(22,26,30,.3);
  border: 1px solid rgba(43,49,57,.15);
}
.rs-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rs-icon {
  font-size: 12px;
  opacity: .35;
  line-height: 1;
}
.rs-label {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: .5;
  font-weight: 500;
}
.rs-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-family: var(--mono, monospace);
}
.rs-badge--default {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.rs-badge--custom {
  color: #f0b90b;
  background: rgba(240,185,11,.08);
  border: 1px solid rgba(240,185,11,.15);
}
.rs-hash {
  font-size: 9px;
  font-family: var(--mono, monospace);
  color: rgba(255,255,255,.2);
  letter-spacing: .5px;
  cursor: default;
}
.rs-hash:hover {
  color: rgba(255,255,255,.45);
}
.rs-view-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  opacity: .7;
  transition: opacity .15s;
  font-family: inherit;
}
.rs-view-btn:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── Block 2: Driver progress bars ────────────────────────── */
.krit-bars { display: flex; flex-direction: column; gap: 6px; }

.krit-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  transition: background .15s;
  border-radius: 3px;
}
.krit-bar-row:hover {
  background: rgba(255,255,255,.02);
}
.krit-bar-lbl {
  width: 90px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.krit-bar-track {
  flex: 1;
  height: 4px;
  background: var(--bg-card2);
  border-radius: 2px;
  overflow: hidden;
  border: none;
}
.krit-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.krit-fill-blue   { background: linear-gradient(90deg, rgba(46,134,255,.6), var(--blue)); }
.krit-fill-orange { background: linear-gradient(90deg, rgba(255,165,0,.6), var(--orange)); }
.krit-fill-yellow { background: linear-gradient(90deg, rgba(234,179,8,.6), var(--yellow)); }
.krit-fill-accent { background: linear-gradient(90deg, rgba(234,179,8,.6), var(--accent)); }
.krit-bar-num {
  width: 42px;
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Block 3: Confirmation panel ──────────────────────────── */
.krit-confirm-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.krit-confirm-pct-col {
  flex-shrink: 0;
  text-align: center;
  min-width: 60px;
}
.krit-confirm-pct {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
}
.krit-confirm-sub {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
  white-space: nowrap;
}
.krit-checklist {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.krit-check-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.krit-check-icon {
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.krit-check-icon.ok  { color: var(--green); }
.krit-check-icon.nok { color: var(--red); }
.krit-check-lbl      { color: var(--text-secondary); flex: 1; }
.krit-check-detail   { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.krit-check-na       { color: var(--text-muted); font-size: 11px; font-style: italic; }

/* ── Block 4: Gate chips in signals table ─────────────────── */
.krit-gates-cell { white-space: nowrap; }
.krit-gate-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 3px;
  white-space: nowrap;
}
.krit-gate-PASS { background: rgba(14,203,129,0.15); color: var(--green); }
.krit-gate-FAIL { background: rgba(246,70,93,0.15);  color: var(--red); }
.krit-gate-SKIP { background: rgba(94,102,115,0.12); color: var(--text-muted); }
.krit-gate-NONE { background: var(--bg-card2);       color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════
   MARKET DASHBOARD LAYOUT
   Row A (full-width): Signals
   Row B (2-col): Left analysis + Right news
   ═══════════════════════════════════════════════════════════ */

/* ── Signals section (Row A) ──────────────────────────────── */
/* ── Main 2-column grid (left content + right news) ────────── */
.mkt-main-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 600px) {
  .mkt-main-grid { grid-template-columns: 1fr; }
  .mkt-news-col { position: static !important; max-height: none !important; }
}

/* ── Left content column ──────────────────────────────────── */
.mkt-left-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ── Analysis row (old mkt-bottom-row) ───────────────────── */
.mkt-analysis-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mkt-signals-section {
  margin-bottom: var(--ws-gap-section);
  background: rgba(22,26,30,.6);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 10px 12px 8px;
  position: relative;
}
.mkt-signals-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
  border-radius: 12px 12px 0 0;
}
.mkt-section-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.mkt-section-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #F0B90B;
  text-transform: uppercase;
  letter-spacing: .8px;
  text-shadow: 0 0 12px rgba(212,168,67,.15);
  flex-shrink: 0;
  white-space: nowrap;
}
.mkt-section-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #8B8D97;
  letter-spacing: .2px;
  margin-left: 4px;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Row B: 2-column grid ──────────────────────────────────── */
.mkt-bottom-row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 600px) {
  .mkt-bottom-row        { grid-template-columns: 1fr; }
  .mkt-news-col          { position: static !important; max-height: none !important; }
}

/* ── Left column ───────────────────────────────────────────── */
.mkt-left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;          /* prevent overflow in grid */
}

/* Reset margin-bottom on #critical-wrap — flex gap handles spacing */
#critical-wrap { margin-bottom: 0; }

/* Risk cards — unified block wrapper */
#risk-cards {
  margin-bottom: var(--ws-gap-section);
  background: rgba(22,26,30,.6);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 10px 12px 8px;
  position: relative;
}
#risk-cards::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.2), transparent 70%);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}

/* ── News column (sticky right panel) ─────────────────────── */
.mkt-news-col {
  position: sticky;
  top: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 52px);
  /* z-index removed: #market-scroll (z-index:1) handles footer elevation;
     no need to elevate news col above sibling content (breaks Details btn). */
}

/* ══════════════════════════════════════════════════════════════════
   Phase 6 — Analysis Insights Strip, Live Market overlays, Modal
   ══════════════════════════════════════════════════════════════════ */

/* ── Analysis Insights Strip ──────────────────────────────────── */
.analysis-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.astrip-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.astrip-lbl { color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
.sentiment-bar-track {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  width: 120px;
  background: var(--bg-card2);
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.sbar-green { background: linear-gradient(90deg, #0ecb81, #22c55e); transition: flex-basis 0.6s ease; }
.sbar-muted { background: rgba(107,114,128,.4);                     transition: flex-basis 0.6s ease; }
.sbar-red   { background: linear-gradient(90deg, #ef4444, #f6465d); transition: flex-basis 0.6s ease; }
.astrip-green { color: var(--green);        font-weight: 600; font-size: 11px; }
.astrip-red   { color: var(--red);          font-weight: 600; font-size: 11px; }
.astrip-muted { color: var(--text-muted);   font-size: 11px; }
.astrip-sep   { color: var(--border); }
.astrip-divider { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }

/* ── Scenario Pills ───────────────────────────────────────────── */
.astrip-scenarios { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scenario-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: default;
  white-space: nowrap;
}
.pill-bull { background: rgba(14,203,129,0.15); color: var(--green); }
.pill-bear { background: rgba(246,70,93,0.15);  color: var(--red); }
.pill-neu  { background: rgba(132,142,156,0.15); color: var(--text-secondary); }

/* ── Live Market: Analysis overlays on cards ──────────────────── */
.lm-card-analysis {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.lm-sig-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.lm-sig-long  { background: rgba(14,203,129,0.15); color: var(--green); }
.lm-sig-short { background: rgba(246,70,93,0.15);  color: var(--red); }
.lm-sig-hold  { background: rgba(132,142,156,0.15); color: var(--text-secondary); }

.lm-rl-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
}
.lm-rl-buy  { background: rgba(14,203,129,0.12);  color: var(--green); }
.lm-rl-sell { background: rgba(246,70,93,0.12);   color: var(--red); }
.lm-rl-hold { background: rgba(240,185,11,0.12);  color: var(--yellow); }

.lm-muted { color: var(--text-muted); font-size: 10px; }

/* Chart button on cards */
.lm-chart-btn {
  width: 100%;
  padding: 5px 0;
  margin-top: 4px;
  background: rgba(240,185,11,0.07);
  border: 1px solid rgba(240,185,11,0.25);
  border-radius: 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lm-chart-btn:hover {
  background: rgba(240,185,11,0.15);
  border-color: rgba(240,185,11,0.5);
}

/* Chart button on table rows */
.lm-chart-btn-sm {
  padding: 2px 8px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.lm-chart-btn-sm:hover { background: var(--border); }

/* Table center column */
.lm-th-center { text-align: center !important; }
.lm-td-center { text-align: center !important; }

/* ── Forecast Chart Modal (right-side drawer) ─────────────────── */
.forecast-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 300;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.forecast-modal {
  width: 380px;
  max-width: 100vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideInRight 0.2s ease-out;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Modal header */
.forecast-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fmod-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.fmod-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
  line-height: 1;
}
.fmod-close:hover { background: var(--bg-card2); color: var(--text-primary); }

/* Modal body */
.fmod-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Section card */
.fmod-section {
  background: var(--bg-card2);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.fmod-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

/* TASK-034-FIX-1: Signal Overview grid */
.fmod-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
}
.fmod-ov-item { }
.fmod-ov-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}
.fmod-ov-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.fmod-rl-unavail {
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  cursor: help;
}

/* RL row */
.fmod-rl-row   { display: flex; align-items: center; gap: 12px; }
.fmod-rl-badge {
  padding: 5px 16px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.fmod-rl-BUY  { background: rgba(14,203,129,0.15); color: var(--green); }
.fmod-rl-SELL { background: rgba(246,70,93,0.15);  color: var(--red); }
.fmod-rl-HOLD { background: rgba(240,185,11,0.15); color: var(--yellow); }
.fmod-rl-conf { color: var(--text-secondary); font-size: 12px; }

/* Price bar chart */
.fmod-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  padding: 8px 0;
  background: var(--bg-primary);
  border-radius: 4px;
  margin-bottom: 8px;
  min-height: 100px;
}
.fmod-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fmod-bar {
  width: 36px;
  border-radius: 3px 3px 0 0;
  min-height: 8px;
  transition: height 0.3s ease;
}
.fmod-bar-low  { background: rgba(240,185,11,0.25); }
.fmod-bar-mean { background: var(--accent); }
.fmod-bar-high { background: rgba(240,185,11,0.25); }
.fmod-bar-lbl  { font-size: 10px; color: var(--text-muted); }
.fmod-bar-val  { font-size: 11px; font-weight: 600; color: var(--text-primary); font-family: monospace; }
.fmod-meta     { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.fmod-na       { font-size: 11px; color: var(--text-muted); font-style: italic; }

/* Volatility grid */
.fmod-vol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 6px;
}
.fmod-vol-lbl { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.fmod-vol-val { font-size: 18px; font-weight: 700; color: var(--accent); font-family: monospace; }

/* Similar cases */
.fmod-cases { display: flex; flex-direction: column; gap: 6px; }
.fmod-case {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 11px;
  transition: all 0.2s;
}
.fmod-case:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--accent);
}
.fmod-case-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fmod-case-num {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  min-width: 24px;
}
.fmod-case-sim {
  color: var(--text-secondary);
  flex: 1;
}
.fmod-case-sim strong {
  color: var(--accent);
  font-weight: 700;
}
.fmod-case-confidence {
  font-weight: 600;
  font-size: 10px;
}
.fmod-case-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 10px;
  color: var(--text-secondary);
}
.fmod-meta-item {
  white-space: nowrap;
}
.fmod-case-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fmod-case-outcome,
.fmod-case-ret {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fmod-outcome-label {
  color: var(--text-muted);
  font-size: 10px;
}
.fmod-outcome {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
}
.fmod-outcome-up { background: rgba(14, 203, 129, 0.15); color: var(--green); }
.fmod-outcome-down { background: rgba(246, 70, 93, 0.15); color: var(--red); }
.fmod-outcome-flat { background: rgba(132, 142, 156, 0.15); color: var(--text-secondary); }
.fmod-outcome-bullish { background: rgba(14,203,129,0.15); color: var(--green); }
.fmod-outcome-bearish { background: rgba(246,70,93,0.15);  color: var(--red); }
.fmod-outcome-neutral { background: rgba(132,142,156,0.15); color: var(--text-secondary); }
.fmod-case-ret-val {
  font-weight: 700;
  font-family: monospace;
  font-size: 12px;
}
.fmod-pos { color: var(--green); }
.fmod-neg { color: var(--red); }
.fmod-case-note {
  color: var(--text-secondary);
  font-size: 11px;
  padding: 8px 10px;
  margin-top: 6px;
  background: rgba(132, 142, 156, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  line-height: 1.4;
}
.fmod-case-note strong {
  color: var(--accent);
  font-weight: 600;
}
.fmod-note-text {
  color: var(--text-primary);
}
.fmod-cases-stats {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.fmod-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.fmod-stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  text-align: center;
  transition: all 0.2s;
}

.fmod-stat-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
}

.fmod-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fmod-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.fmod-stat-value.fmod-pos {
  color: var(--green);
}

.fmod-stat-value.fmod-neg {
  color: var(--red);
}

.fmod-stat-mini {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Advice Button and Panel ─────────────────────────────────────────── */
.fmod-advice-btn {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.fmod-advice-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

.fmod-advice-btn:active {
  transform: scale(0.98);
}

/* ══════════════════════════════════════════════════════════════════
   Phase 6 — ML Intelligence Panel + Sentiment/Scenarios Detail
   ══════════════════════════════════════════════════════════════════ */

/* ── ML Intelligence section header ───────────────────────────── */
.ml-panel-section {
  margin-bottom: var(--ws-gap-section);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle, #2a2e35);
  border-radius: var(--ws-radius-section);
  padding: var(--ws-pad-section);
}
.ml-panel-sub {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── ML asset cards horizontal scroll ──────────────────────────── */
.ml-panel-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.ml-asset-card {
  flex: 0 0 300px;
  background: #1e2329;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scroll-snap-align: start;
  transition: border-color .15s, box-shadow .15s;
}
.ml-asset-card:hover {
  border-color: rgba(240,185,11,.3);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* Card header */
.ml-card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ml-card-sym {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
}
.ml-chart-btn {
  margin-left: auto;
  padding: 3px 10px;
  background: rgba(240,185,11,0.08);
  border: 1px solid rgba(240,185,11,0.25);
  border-radius: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.ml-chart-btn:hover {
  background: rgba(240,185,11,0.18);
  border-color: rgba(240,185,11,0.5);
}

/* Direction badge in ML card */
.sig-dir-badge {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.sig-dir-long  { background: rgba(14,203,129,0.15); color: var(--green); }
.sig-dir-short { background: rgba(246,70,93,0.15);  color: var(--red); }
.sig-dir-hold  { background: rgba(132,142,156,0.15); color: var(--text-secondary); }

/* Row sections inside card */
.ml-row-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid rgba(43,49,57,0.6);
  flex-wrap: wrap;
}
/* Major sub-sections get stronger visual separation */
.ml-forecast-row,
.db-signal-brief,
.db-micro-row,
.analog-evidence-row {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 2px solid rgba(240,185,11,0.08);
}
.ml-row-lbl {
  font-size: 10px;
  color: var(--text-muted);
  width: 65px;
  flex-shrink: 0;
  white-space: nowrap;
}
.ml-conf    { font-size: 11px; color: var(--text-secondary); }
.ml-sep     { color: var(--border); font-size: 10px; }
.ml-vol-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: monospace;
}
.ml-vol-sub { font-size: 9px; color: var(--text-muted); }

/* ARIMA forecast row */
.ml-forecast-row {
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.ml-forecast-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.ml-forecast-horizon { font-size: 9px; color: var(--text-muted); }
.ml-price-range {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: monospace;
}
.ml-price-lo   { color: var(--text-muted); }
.ml-price-mean { color: var(--accent); font-weight: 700; font-size: 12px; }
.ml-price-hi   { color: var(--text-muted); }
.ml-price-arrow { color: var(--border); font-size: 9px; }
.ml-price-ci-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.ml-price-ci-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(240,185,11,0.3), var(--accent), rgba(240,185,11,0.3));
  width: 100%;
  border-radius: 2px;
}

/* Similar cases in ML card */
.ml-cases-count { font-size: 11px; color: var(--text-secondary); }
.ml-cases-sep   { color: var(--border); font-size: 10px; }
.ml-cases-best  {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.ml-na-inline { font-size: 10px; color: var(--text-muted); font-style: italic; }
.ml-na-tag {
  display: inline-block; font-size: 10px; color: var(--text-muted);
  background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 3px; padding: 1px 6px; font-style: italic; cursor: help;
}
.ml-src-tag { font-size: 9px; color: var(--text-muted); font-style: italic; }

/* NA rows */
.ml-na-row {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}

/* Status in ML card */
.ml-status-val {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}
.ml-status-zone {
  font-size: 10px;
  color: var(--text-muted);
}
.ml-ml-conf {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Footer in ML card */
.ml-footer {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  font-size: 9px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.ml-footer-item strong {
  color: var(--text-secondary);
}

/* ── RL badge in signals table ───────────────────────────────── */
.sig-rl-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.rl-buy  { background: rgba(14,203,129,0.15); color: var(--green); }
.rl-sell { background: rgba(246,70,93,0.15);  color: var(--red); }
.rl-hold { background: rgba(240,185,11,0.12); color: var(--yellow); }

/* ── SGD Health badge (debug overlay) ───────────────────────── */
.sgd-health-badge { font: 11px/1.4 monospace; padding: 6px 12px; border-radius: 4px; margin-bottom: 8px; }
.sgd-health-ok       { background: rgba(0,200,83,0.10); border: 1px solid rgba(0,200,83,0.3); color: #00c853; }
.sgd-health-warn     { background: rgba(255,193,7,0.10); border: 1px solid rgba(255,193,7,0.3); color: #ffc107; }
.sgd-health-degraded { background: rgba(255,82,82,0.10); border: 1px solid rgba(255,82,82,0.3); color: #ff5252; }
.sgd-health-unknown  { background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.12); color: var(--text-muted); }

/* ── Bar fill color helpers ───────────────────────────────────── */
.krit-fill-green { background: var(--green); }
.krit-fill-red   { background: var(--red); }
.krit-fill-muted { background: var(--text-muted); opacity: 0.6; }

/* ── Sentiment detail card ───────────────────────────────────── */
.sent-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sent-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sent-bar-lbl {
  width: 60px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-secondary);
}
.sent-lbl-pos { color: var(--green) !important; }
.sent-lbl-neg { color: var(--red) !important; }
.sent-pct {
  width: 34px;
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.sent-count {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 36px;
}
.sent-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.sent-footer-item strong { color: var(--text-secondary); }
.sent-footer-dot { color: var(--border); }

/* ── Scenarios detail card ───────────────────────────────────── */
.scen-list { display: flex; flex-direction: column; gap: 10px; }
.scen-item {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.scen-item:last-child { border-bottom: none; padding-bottom: 0; }
.scen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.scen-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.scen-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: monospace;
}
.scen-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 3px;
}
.scen-drivers, .scen-triggers {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.scen-sub-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.scen-driver-chip {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(240, 185, 11, 0.15);
  color: var(--accent);
}
.scen-trigger-chip {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(14, 203, 129, 0.12);
  color: var(--green);
}

/* ══════════════════════════════════════════════════════════════════
   Regime V2 + Factor Analysis
   ══════════════════════════════════════════════════════════════════ */

.regime-v2-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.regime-v2-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}
.regime-risk-off  { background: rgba(246,70,93,0.18); color: var(--red); }
.regime-mixed     { background: rgba(240,185,11,0.18); color: var(--accent); }
.regime-crypto-bid { background: rgba(14,203,129,0.18); color: var(--green); }
.regime-v2-conf {
  font-size: 11px;
  color: var(--text-muted);
}
.regime-v2-bar-wrap {
  height: 4px;
  background: var(--surface);
  border-radius: 2px;
  margin-bottom: 8px;
}
.regime-v2-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.6s ease;
}
.regime-v2-drivers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.regime-v2-drivers-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.regime-v2-driver-chip {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}

/* Factor bars */
.factor-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.factor-bar-label {
  width: 85px;
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.factor-bar-track {
  flex: 1;
  height: 8px;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
}
.factor-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}
.factor-bar-value {
  width: 28px;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════════
   Forecast Modal — Signal Overview Section
   ══════════════════════════════════════════════════════════════════ */

.fmod-signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

.fmod-signal-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fmod-signal-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fmod-signal-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.fmod-signal-LONG   { background: rgba(14,203,129,0.15); color: var(--green); }
.fmod-signal-SHORT  { background: rgba(246,70,93,0.15);  color: var(--red); }
.fmod-signal-ACTIONABLE { background: rgba(14,203,129,0.12); color: var(--green); }
.fmod-signal-BLOCKED    { background: rgba(246,70,93,0.12);  color: var(--red); }
.fmod-signal-WATCH      { background: rgba(240,185,11,0.12); color: var(--yellow); }
.fmod-signal-HOLD       { background: rgba(132,142,156,0.12); color: var(--text-secondary); }
.fmod-signal-NORMAL { background: rgba(14,203,129,0.12); color: var(--green); }
.fmod-signal-ELEVATED { background: rgba(46,134,255,0.12); color: var(--blue); }
.fmod-signal-CRITICAL { background: rgba(246,70,93,0.12); color: var(--red); }

.fmod-signal-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.fmod-gates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.fmod-gate-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.fmod-gate-name {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fmod-gate-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.fmod-gate-pass   { background: rgba(14,203,129,0.15); color: var(--green); }
.fmod-gate-skip   { background: rgba(132,142,156,0.12); color: var(--text-secondary); }
.fmod-gate-fail   { background: rgba(246,70,93,0.15);  color: var(--red); }

.fmod-summary-banner {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
}

.fmod-summary-text {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
  font-weight: 500;
}

.fmod-explanation {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.4;
  padding: 8px;
  background: rgba(94,102,115,0.08);
  border-radius: 4px;
  margin-top: 8px;
}

/* ── Attribution Badge (main page) ──────────────────── */
.attribution-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-secondary);
  margin-left: auto;
  white-space: nowrap;
}
.attribution-badge.warning {
  border-color: rgba(255, 165, 0, .3);
  background: rgba(255, 165, 0, 0.05);
}
.attribution-badge .attr-preset {
  font-size: 10px;
  font-weight: 700;
  color: #f0b90b;
  padding: 2px 8px;
  background: rgba(240,185,11,.08);
  border-radius: 4px;
  text-transform: capitalize;
}
.attribution-badge .attr-chip {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  padding: 2px 6px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
}
.attribution-badge .attr-chip.attr-clash-warn {
  color: var(--orange);
  font-weight: 700;
  background: rgba(255,165,0,.08);
}
@media (max-width: 700px) {
  .attribution-badge { display: none; }
}

/* ── Calibration Debug Panel ───────────────────────── */
.calibration-debug {
  margin: 6px 0 8px 0;
  font-size: 12px;
}
.cal-debug-details {
  background: var(--bg2, #1a1a2e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 8px;
  overflow: hidden;
}
.cal-debug-summary {
  padding: 7px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text2, #aaa);
  font-size: 11px;
  letter-spacing: .03em;
  user-select: none;
  list-style: none;
}
.cal-debug-summary::-webkit-details-marker { display: none; }
.cal-debug-summary:hover { color: var(--text, #ddd); }
.cal-debug-icon { opacity: .6; }
.cal-debug-badge {
  margin-left: auto;
  background: var(--accent, #5865f2);
  color: #fff;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cal-debug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1px;
  background: var(--border, #2a2a4a);
  border-top: 1px solid var(--border, #2a2a4a);
}
.cal-debug-item {
  background: var(--bg2, #1a1a2e);
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-debug-full {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.cal-debug-label {
  color: var(--text2, #888);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cal-debug-value {
  color: var(--text, #ddd);
  font-weight: 600;
  font-size: 12px;
}

/* ── Attribution Settings Card ──────────────────────── */
.attr-card { margin-top: 0; }
.attr-preset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.attr-preset-select {
  flex: 1;
  max-width: 200px;
  padding: 7px 10px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 4px;
  font-size: 12px;
}
.attr-apply-btn {
  padding: 7px 16px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.attr-apply-btn:hover { opacity: 0.85; }
.attr-advanced-toggle {
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  text-decoration: underline;
}
.attr-advanced-panel {
  display: none;
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.attr-advanced-panel.open { display: block; }
.attr-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.attr-field label {
  flex: 0 0 180px;
  font-size: 12px;
  color: var(--text-secondary);
}
.attr-field input,
.attr-field select {
  flex: 1;
  max-width: 160px;
  padding: 6px 8px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 4px;
  font-size: 12px;
}
.attr-field .tooltip-icon {
  color: var(--text-muted);
  font-size: 11px;
  cursor: help;
  position: relative;
}
.attr-field .tooltip-icon:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}
/* Segmented control for mode */
.attr-segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.attr-segmented button {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 500;
  border: none;
  background: var(--bg-card2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.attr-segmented button.active {
  background: var(--accent);
  color: #000;
}
/* Toggle */
.attr-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--text-muted);
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.attr-toggle.on { background: var(--green); }
.attr-toggle::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left .2s;
}
.attr-toggle.on::after { left: 18px; }
/* Preview section */
.attr-preview {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.attr-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.attr-preview-btn {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
}
.attr-preview-btn:hover { background: rgba(240,185,11,.1); }
.attr-preview-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.attr-preview-cell {
  padding: 8px;
  background: var(--bg-card2);
  border-radius: 4px;
  text-align: center;
}
.attr-preview-cell .preview-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.attr-preview-cell .preview-value {
  font-size: 16px;
  font-weight: 600;
}
.attr-preview-cell .preview-value.positive { color: var(--green); }
.attr-preview-cell .preview-value.negative { color: var(--red); }
.attr-meta-line {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   UNIFIED DESIGN SYSTEM — Buttons, Badges, Utilities
   ══════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
}
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-primary {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.btn-primary:hover { opacity: .85; }
.btn-secondary {
  background: var(--bg-card2);
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-secondary:hover { color: var(--text-primary); border-color: var(--accent); }
.btn-danger {
  background: rgba(246,70,93,.12);
  color: var(--red);
  border-color: rgba(246,70,93,.3);
}
.btn-danger:hover { background: rgba(246,70,93,.2); border-color: var(--red); }
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-card2); color: var(--text-primary); }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-lg { padding: 10px 24px; font-size: 14px; }
.btn-icon {
  padding: 6px;
  min-width: 30px;
  min-height: 30px;
}

/* ── Unified Badges ──────────────────────────────────────────── */
.ubadge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.ubadge-success { background: rgba(14,203,129,.15); color: var(--green); }
.ubadge-warning { background: rgba(240,185,11,.15); color: var(--yellow); }
.ubadge-danger  { background: rgba(246,70,93,.15);  color: var(--red); }
.ubadge-info    { background: rgba(24,144,255,.15);  color: var(--blue); }
.ubadge-muted   { background: rgba(132,142,156,.12); color: var(--text-muted); }
.ubadge-accent  { background: rgba(240,185,11,.15); color: var(--accent); }

/* ── Utility classes ─────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.ml-auto { margin-left: auto; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 11px; }
.text-xs { font-size: 10px; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.w-full { width: 100%; }
.hidden { display: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Color utilities */
.text-accent   { color: var(--accent); }
.text-green    { color: var(--green); }
.text-yellow   { color: var(--yellow); }
.text-red      { color: var(--red); }
.text-primary  { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }

/* Zone background utilities */
.bg-zone-normal { background: var(--zone-normal); }
.bg-zone-elevated { background: var(--zone-elevated); }
.bg-zone-critical { background: var(--zone-critical); }

/* Flex / layout utilities */
.flex-1        { flex: 1; }
.flex-wrap     { flex-wrap: wrap; }
.grid-col-all  { grid-column: 1 / -1; }
.min-w-34      { min-width: 34px; }
.min-w-40      { min-width: 40px; }
.text-right    { text-align: right; }
.pt6-pb6       { padding-top: 6px; padding-bottom: 6px; }
.p-card-sm     { padding: 14px 18px; }
.p-pag         { padding: 10px 16px; }
.flex-gap8-mt14  { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.flex-gap12-mt6  { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.flex-ac-gap10-mb16 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

/* Code / monospace textarea */
.code-textarea {
  width: 100%; min-height: 200px;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary);
  font-family: 'Courier New', monospace; font-size: 11px;
  line-height: 1.6; padding: 12px; resize: vertical;
  box-sizing: border-box; outline: none;
}

/* Width utilities */
.max-w-100 { max-width: 100px; }
.max-w-130 { max-width: 130px; }
.max-w-160 { max-width: 160px; }
.max-w-180 { max-width: 180px; }
.max-w-200 { max-width: 200px; }
.max-w-220 { max-width: 220px; }
.max-w-240 { max-width: 240px; }
.max-w-280 { max-width: 280px; }
.max-w-400 { max-width: 400px; }
.max-w-560 { max-width: 560px; }
.w-80  { width: 80px; }
.w-130 { width: 130px; }
.w-560 { width: 560px; }
.min-w-180 { min-width: 180px; }

/* Grid */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Typography */
.text-11           { font-size: 11px; }
.text-12           { font-size: 12px; }
.text-12-muted     { font-size: 12px; color: var(--text-muted); }
.text-12-secondary { font-size: 12px; color: var(--text-secondary); }
.text-12-accent    { font-size: 12px; color: var(--accent); }

/* Spacing */
.mb-4       { margin-bottom: 16px; }
.p-0        { padding: 0; }
.p-1        { padding: 4px 6px; }
.pb-0       { padding-bottom: 0; }
.cursor-ptr { cursor: pointer; }
.opacity-60 { opacity: .6; }

/* Shared small input style */
.input-sm {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  padding: 4px 8px;
}

/* Semantic badge variants */
.badge-success { background: rgba(14,203,129,.18);  color: var(--green); }
.badge-warning { background: rgba(240,185,11,.18);  color: var(--accent); }
.badge-danger  { background: rgba(246,70,93,.18);   color: var(--red); }
.badge-info    { background: rgba(24,144,255,.18);  color: #1890ff; }

/* Empty placeholder with centering */
.empty-center {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════
   NEWS LIBRARY — Sidebar layout + extracted styles
   ══════════════════════════════════════════════════════════════════ */

/* ── NL Sidebar layout ───────────────────────────────────────── */
.nl-page-layout {
  display: flex;
  height: calc(100vh - 52px);
  overflow: hidden;
}
.nl-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  overflow-y: auto;
}
.nl-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0 16px 12px;
}
.nl-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.nl-nav-item:hover {
  background: var(--bg-card2);
  color: var(--text-primary);
  text-decoration: none;
}
.nl-nav-item.active {
  background: rgba(240,185,11,.06);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.nl-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.nl-nav-count {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(240,185,11,0.15);
  color: var(--accent);
  font-weight: 600;
}
/* ── Auto-update badge & toast ─────────────────────────────── */
.nl-new-badge {
  margin-left: 4px;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  animation: nl-badge-pulse 1.5s ease-in-out 3;
}
@keyframes nl-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.nl-auto-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface-2, #1a1a2e);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  z-index: 10000;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.nl-auto-toast.visible {
  opacity: 1;
  transform: translateY(0);
}
.nl-sidebar-spacer {
  flex: 1;
  min-height: 16px;
}
.nl-back-link {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
}
.nl-back-link:hover {
  color: var(--accent) !important;
}
.nl-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-width: 0;
}
.nl-section {
  display: none;
  max-width: 1200px;
}
.nl-section.active { display: block; }
.nl-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.nl-section-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
  margin-top: -8px;
}

/* ── NL error banner ─────────────────────────────────────────── */
.nl-error-banner {
  background: rgba(246,70,93,.1);
  border-bottom: 1px solid rgba(246,70,93,.3);
  color: var(--red);
  padding: 8px 20px;
  font-size: 12px;
}

/* ── NL: Add source form ─────────────────────────────────────── */
.nl-add-form {
  display: grid;
  grid-template-columns: 1fr 120px 90px 100px;
  gap: 8px;
  align-items: end;
}
.nl-add-form-row2 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}
.nl-json-mapping {
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-card2);
  border-radius: 4px;
  border: 1px solid var(--border);
}
.nl-json-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* ── NL: Tags Library v2 ─────────────────────────────────────── */
.tl-overview { display: flex; gap: 24px; align-items: center; padding: 4px 0; }
.tl-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tl-stat-val { font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.tl-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.tl-cat-badge {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.tl-cat-badge[data-cat="macro"]    { background: rgba(52,152,219,0.15); color: #3498db; }
.tl-cat-badge[data-cat="geo"]      { background: rgba(231,76,60,0.15);  color: #e74c3c; }
.tl-cat-badge[data-cat="crypto"]   { background: rgba(240,185,11,0.15); color: var(--accent); }
.tl-cat-badge[data-cat="security"] { background: rgba(155,89,182,0.15); color: #9b59b6; }
.tl-tag-title { font-weight: 600; color: var(--text-primary); font-size: 12px; }
.tl-tag-slug { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.tl-result-count { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.tl-kw-count { font-size: 10px; font-weight: 400; margin-left: 4px; color: var(--text-muted); }
/* Drawer overlay */
.tl-drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 199;
}
.tl-drawer-overlay.open { display: block; }
/* Drawer panel */
.tl-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px;
  background: var(--bg-card); border-left: 1px solid var(--border);
  z-index: 200; transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.tl-drawer.open { transform: translateX(0); }
.tl-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-card2);
}
.tl-drawer-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.tl-drawer-close {
  background: none; border: none; color: var(--text-muted); font-size: 18px;
  cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all .15s;
}
.tl-drawer-close:hover { background: var(--bg-card); color: var(--text-primary); }
.tl-drawer-body { padding: 16px; overflow-y: auto; flex: 1; }
.tl-kw-textarea {
  width: 100%; height: 110px; background: var(--bg-card2);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 10px; font-size: 12px;
  font-family: 'SF Mono', 'Consolas', 'Fira Code', monospace;
  color: var(--text-primary); resize: vertical; outline: none;
  transition: border-color .15s;
}
.tl-kw-textarea:focus { border-color: var(--accent); }

/* TASK-132-FIX-4: Dynamic language blocks */
.tl-lang-block {
  border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 10px; overflow: hidden;
  transition: border-color .15s;
}
.tl-lang-block:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.tl-lang-block-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
}
.tl-lang-block-label {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px;
}
.tl-lang-flag { font-size: 14px; }
.tl-lang-code { text-transform: uppercase; color: var(--text-muted); font-size: 10px; letter-spacing: .5px; }
.tl-lang-block-actions { display: flex; align-items: center; gap: 6px; }
.tl-lang-remove-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 3px; transition: all .15s;
}
.tl-lang-remove-btn:hover { background: rgba(239,68,68,.15); color: #f87171; }
.tl-lang-block .tl-kw-textarea { border: none; border-radius: 0; margin: 0; }
.tl-add-lang-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.tl-add-lang-sel { width: 160px; font-size: 12px; }
.tl-lang-coverage {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 11px; color: var(--text-muted);
}
.tl-lang-coverage-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px; font-weight: 600;
  font-size: 10px; letter-spacing: .3px;
}
.tl-lang-coverage-badge.full { background: rgba(34,197,94,.12); color: #22c55e; }
.tl-lang-coverage-badge.partial { background: rgba(245,158,11,.12); color: #f59e0b; }
.tl-lang-coverage-missing {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
}
.tl-lang-missing-chip {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(239,68,68,.1); color: #f87171;
}

/* ── User Keywords form (nl-keywords section) ─── */
.ukw-form-grid { display: flex; flex-direction: column; gap: 12px; }
.ukw-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ukw-field { display: flex; flex-direction: column; gap: 4px; }
.ukw-field-tag { flex: 1; min-width: 200px; }
.ukw-field-phrase { flex: 2; min-width: 200px; }
.ukw-field-lang { min-width: 140px; }
.ukw-field-match { min-width: 120px; }
.ukw-field-neg { min-width: 90px; }
.ukw-field-btn { min-width: 100px; }
.ukw-label {
  font-size: 11px; font-weight: 500; color: var(--text-secondary);
  text-transform: none; letter-spacing: 0; line-height: 1;
  display: flex; align-items: center; gap: 4px;
}
.ukw-info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--text-tertiary, #6b7280);
  font-size: 9px; font-weight: 700; font-style: normal; font-family: serif;
  color: var(--text-tertiary, #6b7280); cursor: help;
  transition: all .15s; flex-shrink: 0;
}
.ukw-info:hover {
  color: var(--accent); border-color: var(--accent);
  background: rgba(234,179,8,.1);
}
.ukw-info:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: #1e1e2f; color: #e2e8f0; border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 400;
  font-family: var(--font-sans, system-ui, sans-serif);
  white-space: nowrap; z-index: 100; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.ukw-info:hover::before {
  content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--border);
  z-index: 101;
}
.ukw-neg-toggle {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  height: 38px; /* match form-input height */
  padding: 0 8px;
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; color: var(--text-secondary);
  transition: border-color .15s;
}
.ukw-neg-toggle:hover { border-color: var(--accent); }
.ukw-neg-toggle input[type="checkbox"] { accent-color: #ef4444; }
.ukw-neg-label { white-space: nowrap; }
.ukw-add-btn {
  height: 38px; padding: 0 18px;
  background: var(--accent); color: #1a1a2e; border: none; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.ukw-add-btn:hover { background: #f7c948; transform: translateY(-1px); }
.ukw-add-btn:active { transform: translateY(0); }
.ukw-feedback { font-size: 12px; color: #f87171; margin-top: 4px; display: block; min-height: 16px; }

/* User Keywords table enhancements */
.ukw-table th { text-transform: none !important; font-size: 12px; font-weight: 500; }
.ukw-empty-state {
  padding: 40px 20px; text-align: center; color: var(--text-secondary);
}
.ukw-empty-icon {
  font-size: 32px; width: 56px; height: 56px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(234,179,8,.08); color: var(--accent);
  border: 2px dashed rgba(234,179,8,.25);
}
.ukw-empty-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.ukw-empty-hint { font-size: 12px; color: var(--text-tertiary, #6b7280); }

/* User Keywords table cell badges */
.ukw-phrase-cell { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.ukw-tag-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  background: rgba(96,165,250,.12); color: #60a5fa;
}
.ukw-lang-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
  background: rgba(234,179,8,.1); color: #eab308;
}
.ukw-match-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: 11px; background: rgba(148,163,184,.1); color: #94a3b8;
}
.ukw-neg-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700;
  background: rgba(239,68,68,.12); color: #ef4444;
}
.ukw-del-btn {
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-secondary); cursor: pointer; font-size: 13px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ukw-del-btn:hover { background: rgba(239,68,68,.1); color: #ef4444; border-color: rgba(239,68,68,.3); }

.tl-preview-list { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.tl-preview-item {
  padding: 6px 0; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-secondary);
}
.tl-preview-item:last-child { border-bottom: none; }
.tl-preview-item a { color: var(--accent); text-decoration: none; }
.tl-preview-item a:hover { text-decoration: underline; }
.tl-preview-score {
  display: inline-block; min-width: 28px; text-align: right;
  font-weight: 600; color: var(--text-primary); margin-right: 6px;
}
@media (max-width: 600px) {
  .tl-drawer { width: 100%; }
  .tl-overview { gap: 16px; flex-wrap: wrap; }
}

/* ── NL: Tag chips (edit modal) ──────────────────────────────── */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.tag-chip.active { background: var(--accent); color: #000; border-color: var(--accent); }
.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card2);
  cursor: text;
}
.tag-input-wrap:focus-within { border-color: var(--accent); }
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(240,185,11,0.15);
  color: var(--accent);
  border: 1px solid rgba(240,185,11,0.3);
}
.tag-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  background: rgba(240,185,11,0.3);
  color: var(--accent);
  cursor: pointer;
  border: none;
  padding: 0;
  font-weight: 700;
}
.tag-pill-remove:hover { background: var(--accent); color: #000; }
.tag-text-input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 11px;
  min-width: 80px;
  flex: 1;
}

/* ── NL: Sources table ───────────────────────────────────────── */
.sources-table-wrap { overflow-x: auto; border-radius: var(--radius); }
.sources-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 1000px;
}
.sources-table th {
  padding: 8px 10px;
  background: var(--bg-card2);
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.sources-table th:hover { color: var(--text-primary); }
.sources-table th .sort-icon { margin-left: 4px; opacity: 0.4; }
.sources-table th.sort-asc .sort-icon::after { content: " ↑"; opacity: 1; }
.sources-table th.sort-desc .sort-icon::after { content: " ↓"; opacity: 1; }
.sources-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.sources-table tr:hover td { background: rgba(255,255,255,.03); }
.sources-table tr.selected td { background: rgba(240,185,11,.05); }

/* NL status badges */
.nl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.nl-badge-candidate { background: rgba(24,144,255,.2); color: #1890ff; }
.nl-badge-trusted   { background: rgba(14,203,129,.2); color: var(--green); }
.nl-badge-blocked   { background: rgba(246,70,93,.2);  color: var(--red); }
.nl-badge-rss    { background: rgba(255,140,0,.15);   color: var(--orange); }
.nl-badge-json   { background: rgba(24,144,255,.15);  color: #1890ff; }
.nl-badge-html   { background: rgba(148,104,255,.15); color: #9468ff; }
.nl-badge-auto   { background: rgba(132,142,156,.12); color: var(--text-secondary); }
.nl-badge-user   { background: rgba(240,185,11,.18); color: var(--yellow); border: 1px solid rgba(240,185,11,.35); }
.nl-badge-auto-disc { background: rgba(132,142,156,.12); color: var(--text-muted); border: 1px solid rgba(132,142,156,.25); }

/* NL health dots */
.nl-health-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.nl-health-ok   { background: var(--green); }
.nl-health-fail { background: var(--red); }
.nl-health-null { background: var(--text-muted); }

/* NL toggle */
.nl-tgl {
  width: 30px;
  height: 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--bg-card2);
  position: relative;
  padding: 0;
  flex-shrink: 0;
  transition: background .2s;
}
.nl-tgl::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all .2s;
}
.nl-tgl.on { background: var(--green); border-color: var(--green); }
.nl-tgl.on::after { left: 16px; background: #fff; }

/* NL action buttons */
.nl-act-btn {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.nl-act-btn:hover { color: var(--text-primary); background: var(--bg-card2); }
.nl-act-btn.danger:hover { color: var(--red); border-color: var(--red); }
.nl-act-btn.promote:hover { color: var(--green); border-color: var(--green); }
.nl-act-btn.test-btn:hover { color: var(--accent); border-color: var(--accent); }

/* NL pagination */
.nl-pagination { display: flex; gap: 6px; align-items: center; padding: 10px 0; }
.nl-page-btn {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.nl-page-btn:hover, .nl-page-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.nl-page-btn:disabled { opacity: .35; cursor: not-allowed; }

/* NL diagnostics */
.nl-diag-panel {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.nl-diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.nl-diag-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 3px;
}
.nl-diag-value { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.nl-diag-value.green  { color: var(--green); }
.nl-diag-value.red    { color: var(--red); }
.nl-diag-value.yellow { color: var(--yellow); }
.nl-sample-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 12px; }
.nl-sample-table th { padding: 6px 8px; background: var(--bg-card); color: var(--text-muted); font-weight: 600; text-align: left; }
.nl-sample-table td { padding: 5px 8px; border-bottom: 1px solid rgba(43,49,57,.7); }
.nl-sample-pass { color: var(--green); font-weight: 700; }
.nl-sample-fail { color: var(--red); font-weight: 700; }

/* NL filter bar */
.nl-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.nl-filter-bar input,
.nl-filter-bar select {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  outline: none;
}
.nl-filter-bar input:focus,
.nl-filter-bar select:focus { border-color: var(--accent); }

/* NL modals */
.nl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nl-modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 520px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}
.nl-modal-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.nl-modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* NL import report */
.nl-import-report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
/* NL schema example */
.nl-schema-box {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  position: relative;
  margin-bottom: 8px;
}
.nl-schema-box pre {
  margin: 0;
  overflow-x: auto;
  max-height: 160px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-secondary);
  font-family: 'Courier New', monospace;
}
/* NL spinner */
.nl-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
/* Column drag highlight */
.col-drag-over { background: rgba(240,185,11,.12) !important; }

/* ── NL backward-compat classes (used by news_library.js) ────── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.badge-candidate { background: rgba(24,144,255,.2); color: #1890ff; }
.badge-trusted   { background: rgba(14,203,129,.2); color: var(--green); }
.badge-blocked   { background: rgba(246,70,93,.2);  color: var(--red); }
.badge-rss    { background: rgba(255,140,0,.15);   color: var(--orange); }
.badge-json   { background: rgba(24,144,255,.15);  color: #1890ff; }
.badge-html   { background: rgba(148,104,255,.15); color: #9468ff; }
.badge-auto   { background: rgba(132,142,156,.12); color: var(--text-secondary); }
.badge-user      { background: rgba(240,185,11,.18); color: var(--yellow); border: 1px solid rgba(240,185,11,.35); }
.badge-auto-disc { background: rgba(132,142,156,.12); color: var(--text-muted); border: 1px solid rgba(132,142,156,.25); }
.health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.health-ok   { background: var(--green); }
.health-fail { background: var(--red); }
.health-null { background: var(--text-muted); }
.tgl {
  width: 30px; height: 16px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer;
  background: var(--bg-card2); position: relative; padding: 0; flex-shrink: 0; transition: background .2s;
}
.tgl::after {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); transition: all .2s;
}
.tgl.on { background: var(--green); border-color: var(--green); }
.tgl.on::after { left: 16px; background: #fff; }
.act-btn {
  padding: 3px 8px; border-radius: 3px; font-size: 10px; font-weight: 600;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: all .15s;
}
.act-btn:hover { color: var(--text-primary); background: var(--bg-card2); }
.act-btn.danger:hover { color: var(--red); border-color: var(--red); }
.act-btn.promote:hover { color: var(--green); border-color: var(--green); }
.act-btn.test-btn:hover { color: var(--accent); border-color: var(--accent); }
.act-btn.schema-copy { position: absolute; right: 6px; top: 6px; font-size: 9px; }

/* Progress bar (diagnostics) */
.nl-progress-track { background: var(--bg-card2); border-radius: 4px; height: 6px; overflow: hidden; }
.nl-progress-fill  { height: 100%; background: var(--accent); border-radius: 4px; width: 0; transition: width .3s; }

/* Pagination with horizontal padding */
.pagination-padded { padding: 10px 16px; }
.pagination { display: flex; gap: 6px; align-items: center; padding: 10px 0; }
.page-btn {
  padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-card2); color: var(--text-secondary);
  cursor: pointer; transition: all .15s;
}
.page-btn:hover, .page-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }
.diag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.diag-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.diag-value { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.diag-value.green  { color: var(--green); }
.diag-value.red    { color: var(--red); }
.diag-value.yellow { color: var(--yellow); }
.sample-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 12px; }
.sample-table th { padding: 6px 8px; background: var(--bg-card); color: var(--text-muted); font-weight: 600; text-align: left; }
.sample-table td { padding: 5px 8px; border-bottom: 1px solid rgba(43,49,57,.7); }
.sample-pass { color: var(--green); font-weight: 700; }
.sample-fail { color: var(--red); font-weight: 700; }

/* ══════════════════════════════════════════════════════
   NEWS LIBRARY — ENHANCED UI (Binance + Apple style)
   ══════════════════════════════════════════════════════ */

/* ── Section Info Banners ── */
.nl-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(240,185,11,0.06) 0%, rgba(240,185,11,0.02) 100%);
  border: 1px solid rgba(240,185,11,0.12);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  animation: nl-fadeSlideIn 0.4s ease-out;
}
.nl-info-banner-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(240,185,11,0.1);
  color: var(--accent);
  font-size: 16px;
}
.nl-info-banner-text {
  flex: 1;
}
.nl-info-banner-text strong {
  color: var(--text-primary);
  font-weight: 600;
}
.nl-info-banner-text a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.nl-info-banner-text a:hover {
  text-decoration: underline;
}

/* ── Stat Cards Row ── */
.nl-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  animation: nl-fadeSlideIn 0.5s ease-out;
}
.nl-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.2s ease;
}
.nl-stat-card:hover {
  border-color: rgba(240,185,11,0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.nl-stat-card-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 2px;
}
.nl-stat-card-icon.green { background: rgba(14,203,129,0.12); color: #0ecb81; }
.nl-stat-card-icon.gold { background: rgba(240,185,11,0.12); color: var(--accent); }
.nl-stat-card-icon.blue { background: rgba(24,144,255,0.12); color: #1890ff; }
.nl-stat-card-icon.red { background: rgba(246,70,93,0.12); color: #f6465d; }
.nl-stat-card-icon.purple { background: rgba(155,89,182,0.12); color: #9b59b6; }

.nl-stat-card-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.nl-stat-card-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ── Animations ── */
@keyframes nl-fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nl-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes nl-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Card entrance animations ── */
.sp-section .sp-card,
.sp-section .nl-src-card {
  animation: nl-fadeSlideIn 0.35s ease-out;
}
.sp-section .sp-card:nth-child(2) { animation-delay: 0.05s; }
.sp-section .sp-card:nth-child(3) { animation-delay: 0.10s; }
.sp-section .sp-card:nth-child(4) { animation-delay: 0.15s; }

/* ── Table row animations ── */
.sources-table tbody tr {
  animation: nl-fadeIn 0.25s ease-out;
  animation-fill-mode: both;
}
.sources-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.sources-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
.sources-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.sources-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
.sources-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
.sources-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
.sources-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
.sources-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
.sources-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
.sources-table tbody tr:nth-child(10) { animation-delay: 0.20s; }

/* ── Enhanced status badges with subtle pulse ── */
.nl-badge-trusted {
  position: relative;
}
.nl-badge-trusted::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: nl-pulse 2s ease-in-out infinite;
}

/* ── Health indicator enhanced ── */
.nl-health-dot.nl-health-ok {
  box-shadow: 0 0 4px rgba(14,203,129,0.4);
}
.nl-health-dot.nl-health-fail {
  box-shadow: 0 0 4px rgba(246,70,93,0.4);
}

/* ── Toggle enhanced ── */
.nl-tgl {
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.nl-tgl.on {
  box-shadow: 0 0 6px rgba(14,203,129,0.3);
}
.nl-tgl:hover {
  border-color: var(--accent);
}

/* ── Source origin badge enhanced ── */
.nl-badge-user {
  position: relative;
  overflow: hidden;
}
.nl-badge-user::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: nl-shimmer 3s ease-in-out infinite;
}

/* ── Tag pills enhanced ── */
.nl-tag-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: lowercase;
  transition: all 0.15s ease;
  cursor: default;
}
.nl-tag-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.nl-tag-pill[data-tag="geo"]    { background: rgba(231,76,60,0.12); color: #e74c3c; }
.nl-tag-pill[data-tag="macro"]  { background: rgba(52,152,219,0.12); color: #3498db; }
.nl-tag-pill[data-tag="crypto"] { background: rgba(240,185,11,0.12); color: var(--accent); }
.nl-tag-pill[data-tag="security"] { background: rgba(155,89,182,0.12); color: #9b59b6; }

/* ── Add source form card enhanced ── */
.nl-add-form-card {
  border: 1px dashed rgba(240,185,11,0.25);
  background: linear-gradient(135deg, rgba(240,185,11,0.03) 0%, transparent 100%);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}
.nl-add-form-card:hover,
.nl-add-form-card:focus-within {
  border-color: rgba(240,185,11,0.45);
}

/* ── Section separator with label ── */
.nl-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.nl-section-divider::before,
.nl-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.nl-section-divider::after {
  background: linear-gradient(90deg, transparent, var(--border));
}

/* ── Quick action buttons (Apple-style) ── */
.nl-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.nl-quick-action:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(240,185,11,0.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.nl-quick-action svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* ── Import/Export section enhanced ── */
.nl-import-drop-zone {
  border: 2px dashed rgba(240,185,11,0.2);
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  transition: all 0.25s ease;
  background: rgba(240,185,11,0.02);
}
.nl-import-drop-zone:hover,
.nl-import-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(240,185,11,0.06);
}
.nl-import-drop-icon {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.6;
}
.nl-import-drop-text {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.nl-import-drop-hint {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Diagnostics result cards ── */
.nl-diag-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  transition: all 0.15s ease;
  animation: nl-fadeSlideIn 0.3s ease-out;
}
.nl-diag-result:hover {
  background: rgba(255,255,255,0.02);
}
.nl-diag-result.pass {
  border-left: 3px solid var(--green);
}
.nl-diag-result.fail {
  border-left: 3px solid var(--red);
}
.nl-diag-domain {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
  flex: 1;
}
.nl-diag-status {
  font-size: 11px;
  font-weight: 600;
}
.nl-diag-status.pass { color: var(--green); }
.nl-diag-status.fail { color: var(--red); }
.nl-diag-time {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'SF Mono', monospace;
}

/* ── Floating help tooltips (Apple-style) ── */
.nl-help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--text-tertiary, #555);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary, #555);
  cursor: help;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: 4px;
}
.nl-help-tip:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(240,185,11,0.1);
}
.nl-help-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: #1a1a2e;
  color: #e2e8f0;
  border: 1px solid rgba(240,185,11,0.2);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 400;
  font-family: var(--font-sans, system-ui);
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  line-height: 1.4;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.nl-help-tip:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── Progress bar enhanced ── */
.nl-progress-track {
  position: relative;
  overflow: hidden;
}
.nl-progress-fill {
  position: relative;
}
.nl-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: nl-shimmer 1.5s ease-in-out infinite;
  background-size: 200% 100%;
}

/* ── Empty state enhanced ── */
.nl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  text-align: center;
  animation: nl-fadeIn 0.5s ease-out;
}
.nl-empty-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(240,185,11,0.08);
  color: var(--accent);
  font-size: 24px;
  margin-bottom: 14px;
  border: 2px dashed rgba(240,185,11,0.2);
}
.nl-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.nl-empty-desc {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   DIAGNOSTICS — Binance-style professional panel
   ══════════════════════════════════════════════════════════════════ */

/* ── Status banner ─────────────────────────────────────── */
.diag-banner {
  display: flex; align-items: stretch; justify-content: space-between;
  flex-wrap: wrap; gap: 0;
  border-radius: 8px; margin-bottom: 16px;
  border: 1px solid; overflow: hidden;
}
.diag-ok   { background: rgba(14,203,129,.05);  border-color: rgba(14,203,129,.2); }
.diag-fail { background: rgba(246,70,93,.05);   border-color: rgba(246,70,93,.2);  }

/* Colored left accent stripe (Binance-style) */
.diag-banner::before {
  content: "";
  display: block;
  width: 4px;
  flex-shrink: 0;
  border-radius: 8px 0 0 8px;
}
.diag-ok::before   { background: var(--green); }
.diag-fail::before { background: var(--red); }

.diag-banner-left  { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex: 1; }
.diag-banner-right { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-left: 1px solid rgba(255,255,255,.05); }

.diag-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 5px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
}
.diag-ok   .diag-status-badge { background: rgba(14,203,129,.15); color: var(--green); }
.diag-fail .diag-status-badge { background: rgba(246,70,93,.15);  color: var(--red);   }

.diag-banner-chips { display: flex; align-items: center; gap: 6px; }
.diag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary);
}
.diag-chip.green  { color: var(--green);  border-color: rgba(14,203,129,.3); background: rgba(14,203,129,.08); }
.diag-chip.yellow { color: var(--yellow); border-color: rgba(240,185,11,.3);  background: rgba(240,185,11,.08); }
.diag-chip.red    { color: var(--red);    border-color: rgba(246,70,93,.3);   background: rgba(246,70,93,.08);  }

/* Legacy classes for backward compat */
.diag-banner-http    { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.diag-banner-latency { font-size: 12px; font-weight: 600; }
.diag-banner-latency.green  { color: var(--green); }
.diag-banner-latency.yellow { color: var(--yellow); }
.diag-banner-latency.red    { color: var(--red); }
.diag-source-link { font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 600; }
.diag-source-link:hover { text-decoration: underline; }
.diag-banner-feed { font-size: 11px; color: var(--text-muted); font-style: italic; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diag-banner-time { font-size: 11px; color: var(--text-muted); }

/* ── Section labels ────────────────────────────────────── */
.diag-section-label {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .7px; text-transform: uppercase;
  margin: 18px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.diag-section-label::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ── Stats grid (3-col layout) ─────────────────────────── */
.diag-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.diag-stat-card {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s;
}
.diag-stat-card:hover { border-color: rgba(240,185,11,.25); }
.diag-stat-label {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.diag-stat-value {
  font-size: 20px; font-weight: 700; color: var(--text-primary);
  line-height: 1; letter-spacing: -.3px;
}
.diag-stat-value.green  { color: var(--green); }
.diag-stat-value.red    { color: var(--red); }
.diag-stat-value.yellow { color: var(--yellow); }
.diag-stat-value.muted  { color: var(--text-muted); }

/* ── Pass rate bar (prominent) ─────────────────────────── */
.diag-pass-bar-wrap {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px 14px;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: 8px;
}
.diag-pass-bar-label { font-size: 11px; font-weight: 600; color: var(--text-muted); min-width: 70px; }
.diag-pass-bar-track {
  flex: 1; height: 8px; background: rgba(255,255,255,.06);
  border-radius: 4px; overflow: hidden;
}
.diag-pass-bar-fill {
  height: 100%; border-radius: 4px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
/* Fill color set by JS via --bar-color or by pass rate class */
.diag-pass-bar-fill.green  { background: var(--green); box-shadow: 0 0 6px rgba(14,203,129,.3); }
.diag-pass-bar-fill.yellow { background: var(--yellow); }
.diag-pass-bar-fill.red    { background: var(--red); }
.diag-pass-bar-pct  { font-size: 13px; font-weight: 700; min-width: 38px; text-align: right; }
.diag-pass-bar-pct.green  { color: var(--green); }
.diag-pass-bar-pct.yellow { color: var(--yellow); }
.diag-pass-bar-pct.red    { color: var(--red); }

/* ── Zero-articles warning ─────────────────────────────── */
.diag-zero-warn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-radius: 8px; margin-top: 12px;
  background: rgba(240,185,11,.07); border: 1px solid rgba(240,185,11,.25);
}
.diag-zero-warn-icon { color: var(--yellow); font-size: 16px; flex-shrink: 0; line-height: 1.3; }
.diag-zero-warn-text { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.diag-zero-warn-text strong { color: var(--yellow); }

/* ── Rejection chips ───────────────────────────────────── */
.diag-rej-list  { display: flex; flex-wrap: wrap; gap: 6px; }
.diag-rej-item  {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: rgba(246,70,93,.07); border: 1px solid rgba(246,70,93,.2);
  border-radius: 5px; font-size: 11px; color: var(--text-secondary);
  font-weight: 500;
}
.diag-rej-item .rej-count { color: var(--red); font-weight: 700; }
.diag-rej-item b { color: var(--red); }

/* ── Error box ─────────────────────────────────────────── */
.diag-error-box {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 8px; margin-top: 12px;
  background: rgba(246,70,93,.08); border: 1px solid rgba(246,70,93,.25);
}
.diag-error-icon { color: var(--red); font-weight: 700; font-size: 16px; flex-shrink: 0; line-height: 1.3; }
.diag-error-text { font-size: 12px; color: var(--red); word-break: break-word; font-family: 'JetBrains Mono', 'Fira Code', monospace; line-height: 1.5; }

/* ── Loading spinner ───────────────────────────────────── */
.diag-loading {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 16px; color: var(--text-muted); font-size: 13px;
}
.diag-loading .spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Field mapping row ─────────────────────────────────── */
.diag-mapping-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 10px 12px; background: var(--bg-card2);
  border: 1px solid var(--border); border-radius: 6px;
}
.diag-mapping-field { font-size: 11px; color: var(--text-muted); }
.diag-mapping-field b { color: var(--text-primary); }

/* ── Sample articles table ─────────────────────────────── */
.diag-sample-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; border-radius: 8px; overflow: hidden; }
.diag-sample-table thead { background: var(--bg-card); }
.diag-sample-table th {
  padding: 8px 10px; color: var(--text-muted);
  font-weight: 600; text-align: left; font-size: 10px;
  text-transform: uppercase; letter-spacing: .4px;
}
.diag-sample-table tr:hover td { background: rgba(240,185,11,.03); }
.diag-sample-table td {
  padding: 7px 10px; border-bottom: 1px solid rgba(43,49,57,.6);
  vertical-align: middle;
}
.diag-sample-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.diag-sample-pass  { background: rgba(14,203,129,.15); color: var(--green); }
.diag-sample-fail  { background: rgba(246,70,93,.15);  color: var(--red);   }
.diag-sample-url   { color: var(--text-secondary); text-decoration: none; word-break: break-all; font-size: 11px; line-height: 1.4; }
.diag-sample-url:hover { color: var(--accent); }

.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filter-bar input, .filter-bar select {
  background: var(--bg-card2); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 4px; padding: 5px 8px; font-size: 12px; outline: none;
}
.filter-bar input:focus, .filter-bar select:focus { border-color: var(--accent); }
.toolbar { display: flex; gap: 8px; align-items: center; }
.toolbar-btn {
  padding: 5px 12px; border-radius: 4px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-card2); color: var(--text-secondary);
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.toolbar-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.toolbar-btn.primary { background: var(--accent); color: #000; border-color: var(--accent); }
.toolbar-btn.primary:hover { opacity: .85; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border);
        border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
}
.modal-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ── Rate-Limit / Trial Gate Modal ────────────────────────────── */
.rl-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  animation: rlFadeIn .25s ease;
}
@keyframes rlFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rl-modal-overlay.hidden { display: none; }
.rl-modal {
  background: linear-gradient(160deg, var(--bg-card) 0%, rgba(30,34,38,.98) 100%);
  border: 1px solid rgba(240,185,11,.15);
  border-radius: 14px;
  padding: 32px 28px 24px;
  width: 420px; max-width: 92vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(240,185,11,.06);
  animation: rlSlideUp .3s ease;
}
@keyframes rlSlideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rl-modal-icon {
  font-size: 44px;
  margin-bottom: 12px;
  display: block;
}
.rl-modal-title {
  font-size: 17px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.rl-modal-desc {
  font-size: 13px; line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.rl-modal-countdown {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(240,185,11,.08);
  border: 1px solid rgba(240,185,11,.15);
  border-radius: 8px;
  padding: 10px 20px;
  margin-bottom: 20px;
}
.rl-modal-countdown-val {
  font-size: 28px; font-weight: 800;
  font-family: var(--mono, monospace);
  color: var(--accent);
  letter-spacing: 1px;
}
.rl-modal-countdown-unit {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.rl-modal-actions {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 4px;
}
.rl-modal-upgrade {
  padding: 10px 24px;
  background: linear-gradient(135deg, #f0b90b, #f7d060);
  color: #000; font-weight: 700; font-size: 13px;
  border: none; border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  display: flex; align-items: center; gap: 6px;
}
.rl-modal-upgrade:hover { filter: brightness(1.1); transform: translateY(-1px); }
.rl-modal-upgrade img { width: 16px; height: 16px; }
.rl-modal-close {
  padding: 10px 20px;
  background: rgba(43,49,57,.5);
  color: var(--text-secondary); font-weight: 600; font-size: 13px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.rl-modal-close:hover { border-color: rgba(255,255,255,.12); color: var(--text-primary); }
.rl-modal-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  margin-bottom: 18px;
  padding: 10px 16px;
  background: rgba(43,49,57,.3);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
}
.rl-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1; min-width: 0;
}
.rl-stat-val {
  font-size: 15px; font-weight: 800;
  color: var(--text-primary);
  font-family: var(--mono, monospace);
}
.rl-stat-val.rl-stat-warn {
  color: #ef4444;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 4px;
  padding: 2px 8px;
}
.rl-stat-lbl {
  font-size: 10px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.rl-stat-sep {
  width: 1px; height: 28px;
  background: rgba(255,255,255,.06);
  margin: 0 12px;
  flex-shrink: 0;
}
.rl-modal-tip {
  margin-top: 16px;
  font-size: 11px; color: var(--text-muted);
  line-height: 1.4;
}

.import-report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.import-report-cell .diag-label { font-size: 10px; }
.import-report-cell .diag-value { font-size: 18px; }
.import-details-box { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.import-detail-line { font-size: 11px; margin-top: 4px; line-height: 1.4; }
.import-detail-url { text-decoration: underline; text-decoration-style: dotted; cursor: help; }
.schema-box {
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 10px; position: relative; margin-bottom: 8px;
}
.schema-box pre {
  margin: 0; overflow-x: auto; max-height: 160px;
  font-size: 10px; line-height: 1.45; color: var(--text-secondary);
  font-family: 'Courier New', monospace;
}
.add-form { display: grid; grid-template-columns: 1fr 120px 90px 100px; gap: 8px; align-items: end; }
.add-form-row2 { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }

/* ── Dashboard inline style replacements ─────────────────────── */
.ws-meta-text {
  color: var(--text-muted);
  font-size: 11px;
}
.ws-last-update {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}
.rescan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.rescan-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(234,179,8,.06);
  box-shadow: 0 0 12px rgba(234,179,8,.1);
}
.rescan-btn.rescan-spinning {
  pointer-events: none;
  animation: rescan-spin 0.7s linear infinite;
}
.rescan-btn.rescan-spinning svg {
  opacity: .6;
}
.rescan-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--text-muted);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rescan-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes rescan-spin { to { transform: rotate(360deg); } }

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

/* ── Tablet (≤ 768px) ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Navbar */
  .navbar { padding: 0 12px; gap: 12px; }
  .navbar-brand { font-size: 14px; }
  .navbar-link { padding: 5px 8px; font-size: 12px; }

  /* Settings sidebar */
  .sp-sidebar { display: none !important; }
  .sp-sidebar.mobile-open { display: flex !important; position: fixed; top: 52px; left: 0; bottom: 0; z-index: 150; box-shadow: 4px 0 20px rgba(0,0,0,.5); }
  .sp-main { padding: 16px; }
  .sp-hamburger { display: flex !important; }

  /* News Library sidebar */
  .nl-sidebar { display: none; }
  .nl-sidebar.mobile-open { display: flex; position: fixed; top: 52px; left: 0; bottom: 0; z-index: 150; box-shadow: 4px 0 20px rgba(0,0,0,.5); }
  .nl-hamburger { display: flex !important; }
  .nl-main { padding: 12px; }

  /* Dashboard */
  .mkt-main-grid { grid-template-columns: 1fr; }
  .mkt-news-col { position: static !important; max-height: none !important; }
  .krit-panels-row { grid-template-columns: 1fr; }
  .risk-grid { grid-template-columns: 1fr 1fr; }
  .ml-panel-cards { grid-template-columns: 1fr; }

  /* Live Market */
  .lm-ctrl-right { gap: 4px; }
  .lm-table { min-width: 600px; }

  /* Tables horizontal scroll */
  .sources-table-wrap { -webkit-overflow-scrolling: touch; }
  .ticker-table-wrap { overflow-x: auto; }

  /* NL add form */
  .nl-add-form { grid-template-columns: 1fr 1fr; }
  .nl-json-grid { grid-template-columns: 1fr 1fr; }
  .nl-filter-bar { gap: 6px; }
}

/* ── Phone (≤ 480px) ─────────────────────────────────────────── */
@media (max-width: 480px) {
  body { font-size: 12px; }
  .navbar { height: 46px; gap: 8px; padding: 0 8px; }
  .navbar-brand { font-size: 13px; }
  .brand-logo { width: 28px; height: 28px; }
  .navbar-link { padding: 4px 8px; font-size: 12px; }
  .lang-btn { padding: 3px 6px; font-size: 10px; }

  .container { padding: 8px 10px; }
  .risk-grid { grid-template-columns: 1fr; }
  .threshold-row { grid-template-columns: 1fr; }

  /* Forecast modal full screen */
  .forecast-modal { width: 100vw; }

  /* NL add form stacks */
  .nl-add-form { grid-template-columns: 1fr; }
  .nl-json-grid { grid-template-columns: 1fr; }

  /* Settings cards stack */
  .settings-grid { grid-template-columns: 1fr; padding: 12px; }

  /* Analysis strip wraps */
  .analysis-strip { padding: 6px 10px; gap: 8px; }
  .sentiment-bar-track { width: 60px; }
}

/* ── Hamburger button (hidden by default, shown on mobile) ──── */
.sp-hamburger,
.nl-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  transition: all .15s;
  flex-shrink: 0;
}
.sp-hamburger:hover,
.nl-hamburger:hover { color: var(--text-primary); border-color: var(--accent); }

/* ── Mobile overlay for sidebar ──────────────────────────────── */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: 52px;
  background: rgba(0,0,0,.5);
  z-index: 149;
}
.mobile-overlay.active { display: block; }

/* ════════════════════════════════════════════════════════════════
   NEWS ASSET PILLS — per-crypto colored badges
   ════════════════════════════════════════════════════════════════ */
.news-asset-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  border: 1px solid transparent;
  flex-shrink: 0;
  line-height: 1.5;
  font-family: var(--mono, monospace);
}

/* ════════════════════════════════════════════════════════════════
   NEWS SIGNAL BOX — collapsible accordion
   ════════════════════════════════════════════════════════════════ */
.news-signal-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.news-signal-toggle:hover { color: var(--text-primary); }
.news-sb-arrow {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.news-signal-box .news-signal-body {
  display: none;
  margin-top: 6px;
}
.news-signal-box.news-sb-open .news-signal-body {
  display: block;
}
.news-signal-box.news-sb-open .news-sb-arrow {
  transform: rotate(180deg);
}

/* ════════════════════════════════════════════════════════════════
   NEWS PRIORITY SCORE — badges, tags, tabs
   ════════════════════════════════════════════════════════════════ */

/* ── Priority badges — gradient pills ─────────────────────────── */
.news-prio-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  line-height: 1.4;
}
.news-prio-high {
  background: linear-gradient(135deg, rgba(239,68,68,.2), rgba(246,70,93,.3));
  color: #f87171;
  border: 1px solid rgba(239,68,68,.25);
}
.news-prio-med {
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(240,185,11,.25));
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,.2);
}
.news-prio-low {
  background: linear-gradient(135deg, rgba(96,165,250,.1), rgba(59,130,246,.15));
  color: #93c5fd;
  border: 1px solid rgba(96,165,250,.15);
}

/* ── Primary tag pill ────────────────────────────────────────── */
.news-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: transparent;
  color: #D4A843;
  border: 1px solid rgba(212,168,67,.25);
  flex-shrink: 0;
  text-transform: lowercase;
  line-height: 1.4;
}

/* ── Source confidence star ──────────────────────────────────── */
.news-src-star {
  font-size: 10px;
  color: var(--accent);
  flex-shrink: 0;
  font-weight: 600;
}

/* ── Time ago ────────────────────────────────────────────────── */
.news-time-ago {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Why explainability line ─────────────────────────────────── */
/* TASK-NEWS-EXPLAINABILITY-VISIBLE: removed display:none — always visible */
.news-why-line {
  font-size: 10px;
  color: var(--accent);
  margin-bottom: 4px;
  line-height: 1.35;
  font-style: italic;
  opacity: .85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-why-line--placeholder {
  opacity: 0.5;
}

/* ── News tab bar ────────────────────────────────────────────── */
.news-tab-bar {
  display: flex;
  gap: 0;
  align-items: center;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}
.news-tab-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .2s;
  line-height: 1.4;
  font-family: inherit;
  letter-spacing: .02em;
  white-space: nowrap;
}
.news-tab-btn:hover {
  color: var(--text-primary);
}
.news-tab-btn.active {
  background: rgba(234,179,8,.1);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.15), inset 0 0 0 1px rgba(234,179,8,.15);
}

/* ── News Sort & Filter Controls ─────────────────────────────── */
.news-controls {
  display: none; flex-direction: column;
  gap: 5px;
  padding-top: 6px;
  margin-top: 4px;
  overflow: hidden;
  transition: all .2s;
}
.news-controls.open {
  display: flex;
}
.news-ctrl-row {
  display: flex; gap: 5px; align-items: center;
  flex-wrap: nowrap;
}
.news-ctrl-row .news-sort-select { flex: 1; min-width: 0; }

/* ── Search with icon ────────────────────────────────────────── */
.news-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.news-search-icon {
  position: absolute;
  left: 8px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color .15s;
}
.news-search-wrap:focus-within .news-search-icon {
  color: var(--accent);
}
.news-search-input {
  flex: 1; width: 100%; padding: 6px 8px 6px 26px;
  font-size: 11px; font-family: inherit;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.news-search-input::placeholder { color: var(--text-muted); }
.news-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(234,179,8,.08);
}

/* Signal explanation block inside card — glassmorphism */
.news-signal-box {
  margin-top: 6px; padding: 6px 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 2px solid var(--nc-color, rgba(212,168,67,.4));
  border-radius: 0 8px 8px 0;
  font-size: 10px; line-height: 1.45;
  backdrop-filter: blur(8px);
}
.news-signal-title {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text-muted); margin-bottom: 4px;
}
.news-signal-reason {
  color: var(--text-secondary); margin-bottom: 3px;
}
.news-signal-linkage {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.news-signal-link {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 600;
  background: rgba(148,163,184,.06); color: var(--text-muted);
  border: 1px solid rgba(148,163,184,.08);
}
.news-signal-link--risk { background: rgba(246,70,93,.06); color: #f6465d; border-color: rgba(246,70,93,.1); }
.news-signal-link--opp  { background: rgba(14,203,129,.06); color: #0ecb81; border-color: rgba(14,203,129,.1); }
.news-signal-link--dir  { background: rgba(96,165,250,.06); color: #60a5fa; border-color: rgba(96,165,250,.1); }
.news-signal-supports { color: #0ecb81; margin-bottom: 2px; }
.news-signal-weakens  { color: #f6465d; margin-bottom: 2px; }
.news-signal-item { padding: 1px 0; line-height: 1.35; }
.news-signal-state { color: var(--text-muted); font-weight: 400; }
.news-signal-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.news-signal-act { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.news-signal-act--high { background: rgba(246,70,93,.12); color: #f6465d; }
.news-signal-act--medium { background: rgba(234,179,8,.12); color: #eab308; }
.news-signal-act--low { background: rgba(100,116,139,.12); color: #94a3b8; }
.news-signal-meas { font-size: 9px; padding: 1px 5px; border-radius: 3px; background: rgba(100,116,139,.08); color: var(--text-muted); }
.news-signal-warning { font-size: 10px; padding: 2px 6px; border-radius: 3px; margin-bottom: 3px; }
.news-signal-warning--contra { background: rgba(246,70,93,.08); color: #f6465d; border-left: 2px solid #f6465d; }
.news-signal-warning--lowconf { background: rgba(234,179,8,.08); color: #eab308; border-left: 2px solid #eab308; }
.news-card-warn { font-size: 11px; margin-left: 2px; }
.news-card-warn--contra { color: #f6465d; }
.news-card-warn--lowconf { color: #eab308; }

/* Load more button */
.news-load-more {
  display: block; width: 100%; padding: 10px 0; margin-top: 6px;
  text-align: center; font-size: 11px; font-weight: 600;
  font-family: inherit; color: #D4A843;
  background: rgba(255,255,255,.03); border: 1px solid rgba(212,168,67,.15);
  border-radius: 8px; cursor: pointer; transition: all .2s;
  backdrop-filter: blur(6px);
}
.news-load-more:hover { background: rgba(212,168,67,.06); border-color: rgba(212,168,67,.3); box-shadow: 0 0 10px rgba(212,168,67,.1); }

/* News stats bar */
.news-stats-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 10px; color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 6px;
}
.news-stats-count {
  font-weight: 700; color: #D4A843;
  font-family: 'JetBrains Mono', monospace;
}
.news-sort-select {
  padding: 5px 22px 5px 8px;
  font-size: 10px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  transition: border-color .15s;
}
.news-sort-select:hover {
  border-color: var(--accent);
}
.news-sort-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(234,179,8,.08);
}

/* ── Priority pill toggles ─────────────────────────────────── */
.news-prio-pills {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0;
}
.news-prio-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
  border: 1px solid transparent;
}
.news-prio-pill .news-filter-check {
  display: none; /* hide native checkbox */
}
/* HIGH pill */
.news-prio-pill--high {
  background: rgba(246,70,93,.15);
  color: var(--red);
  border-color: rgba(246,70,93,.2);
}
.news-prio-pill--high:has(.news-filter-check:not(:checked)) {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
  opacity: .5;
}
/* MED pill */
.news-prio-pill--med {
  background: rgba(234,179,8,.15);
  color: var(--accent);
  border-color: rgba(234,179,8,.2);
}
.news-prio-pill--med:has(.news-filter-check:not(:checked)) {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
  opacity: .5;
}
/* LOW pill */
.news-prio-pill--low {
  background: rgba(94,102,115,.12);
  color: var(--text-muted);
  border-color: rgba(94,102,115,.15);
}
.news-prio-pill--low:has(.news-filter-check:not(:checked)) {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
  opacity: .35;
}
/* Hover states for pills */
.news-prio-pill:hover { filter: brightness(1.2); }

/* Legacy compat for old filter group */
.news-filter-group {
  display: flex;
  gap: 4px;
  align-items: center;
}
.news-filter-label {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.news-filter-check {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--accent);
}
.news-filter-text {
  font-weight: 500;
}
.news-filter-text.news-prio-high {
  color: var(--red);
}
.news-filter-text.news-prio-med {
  color: var(--yellow);
}
.news-filter-text.news-prio-low {
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════
   NI — News Intelligence Animations & Microinteractions
   ════════════════════════════════════════════════════════════════ */

/* Card entrance — staggered per card */
@keyframes niCardUp {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Gold shimmer border overlay on hover (same as db2 pattern) */
.news-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,168,67,.35) 25%,
    rgba(240,215,140,.5) 50%,
    rgba(212,168,67,.35) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.news-card:hover::after {
  opacity: 1;
  animation: db2-shimmer 2s linear infinite;
}

/* Priority dot pulse (MUST SEE NOW) */
@keyframes niDotPulse {
  0%,100% { box-shadow: 0 0 4px rgba(246,70,93,.4); transform: scale(1); }
  50%     { box-shadow: 0 0 10px rgba(246,70,93,.7); transform: scale(1.15); }
}

/* Relevance bar grow animation */
@keyframes niBarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Glow trail on leading edge of bar */
@keyframes niGlowTrail {
  0%,100% { opacity: .4; }
  50%     { opacity: .9; }
}

/* Badge pop entrance */
@keyframes niBadgePop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.news-prio-badge {
  animation: niBadgePop .3s cubic-bezier(.23,1,.32,1) forwards;
}

/* ── NI Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .page-right-news {
    min-width: 280px;
    max-height: 400px;
    overflow-y: auto;
  }
  .news-grid {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }
  .news-card {
    min-width: 280px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ════════════════════════════════════════════════════════════════
   NC2 — News Card v2 "Signal Row" Design System
   ════════════════════════════════════════════════════════════════ */

/* ── Card base ─────────────────────────────────────────────────── */
.nc2 {
  display: flex;
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  animation: db2-cardUp .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--ni-delay, 0ms);
  transform-style: preserve-3d;
}
.nc2:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(212,168,67,.15);
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(212,168,67,.06);
}
/* Per-asset hover glow */
.nc2[style*="--nc-color"]:hover {
  background: color-mix(in srgb, var(--nc-color) 4%, transparent);
  border-color: color-mix(in srgb, var(--nc-color) 15%, transparent);
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px color-mix(in srgb, var(--nc-color) 10%, transparent);
}
/* Shimmer border overlay (db2 pattern) */
.nc2::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 12px; padding: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,67,.35) 25%, rgba(240,215,140,.5) 50%, rgba(212,168,67,.35) 75%, transparent 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.nc2:hover::after { opacity: 1; animation: db2-shimmer 2s linear infinite; }

/* ── Priority background tints ─────────────────────────────────── */
.nc2--HIGH { background: rgba(246,70,93,.02); }
.nc2--MED  { background: rgba(240,185,11,.015); }

/* ── Heat strip (4px left edge) ────────────────────────────────── */
.nc2-heat {
  width: 4px; flex-shrink: 0;
  border-radius: 12px 0 0 12px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 8px 0;
  position: relative;
}
.nc2-heat--HIGH {
  background: linear-gradient(180deg, #f6465d, #ef4444, #f97316);
  box-shadow: 0 0 8px rgba(246,70,93,.3);
  animation: nc2HeatPulse 2s ease-in-out infinite;
}
.nc2-heat--MED {
  background: linear-gradient(180deg, #D4A843, #eab308);
}
.nc2-heat--LOW {
  background: rgba(255,255,255,.06);
}
@keyframes nc2HeatPulse {
  0%,100% { box-shadow: 0 0 4px rgba(246,70,93,.2); }
  50%     { box-shadow: 0 0 12px rgba(246,70,93,.5); }
}
/* Micro-icons on heat strip */
.nc2-heat-icon {
  width: 4px; height: 4px; font-size: 0;
  border-radius: 50%; flex-shrink: 0;
}
.nc2-heat-icon--break { background: #fff; animation: niDotPulse 1.5s ease-in-out infinite; }
.nc2-heat-icon--contra { background: #fbbf24; }
.nc2-heat-icon--lowconf { background: rgba(255,255,255,.3); }

/* ── Card body ─────────────────────────────────────────────────── */
.nc2-body {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
}

/* ── Line 0: Signal line (WHY this matters — above headline) ───── */
.nc2-signal-line {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 0 2px;
}
.nc2-signal-icon { font-size: 10px; flex-shrink: 0; }
.nc2-signal-label {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; flex-shrink: 0;
}
.nc2-signal-text {
  font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.nc2-signal-line--risk  { color: #f87171; }
.nc2-signal-line--risk .nc2-signal-label { color: #f6465d; }
.nc2-signal-line--opp   { color: #34d399; }
.nc2-signal-line--opp .nc2-signal-label { color: #0ecb81; }
.nc2-signal-line--ctx   { color: var(--text-muted); }
.nc2-signal-line--ctx .nc2-signal-label { color: #848e9c; }

/* ── Snippet (2-line summary) ───────────────────────────────────── */
.nc2-snippet {
  font-size: 11px; color: var(--text-secondary); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 1px 0;
}

/* ── Line 1: Scan line ─────────────────────────────────────────── */
.nc2-scan {
  display: flex; align-items: center; gap: 6px;
  min-height: 18px;
}
.nc2-asset-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px var(--nc-color, transparent);
}
.nc2-asset-label {
  font-size: 10px; font-weight: 800; font-family: 'JetBrains Mono', monospace;
  color: var(--nc-color, var(--text-muted));
  max-width: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .25s ease, opacity .25s ease;
  opacity: 0;
}
.nc2:hover .nc2-asset-label { max-width: 50px; opacity: 1; }
.nc2-title {
  flex: 1; min-width: 0;
  font-size: 12px; line-height: 1.35;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .15s;
}
.nc2-title:hover { color: #F0D78C; }
.nc2--HIGH .nc2-title { font-weight: 700; }
.nc2--MED .nc2-title  { font-weight: 600; }
.nc2--LOW .nc2-title  { font-weight: 500; color: var(--text-secondary); }
.nc2-time {
  font-size: 9px; font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted); flex-shrink: 0; white-space: nowrap;
}
.nc2-sent { font-size: 9px; flex-shrink: 0; line-height: 1; }
.nc2-sent--bullish { color: #0ecb81; }
.nc2-sent--bearish { color: #f6465d; }
.nc2-sent--neutral { color: var(--text-muted); }

/* ── Line 2: Data line ─────────────────────────────────────────── */
.nc2-data {
  display: flex; align-items: center; gap: 5px;
  min-height: 16px;
  cursor: pointer;
}
.nc2-score {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0; width: 70px;
}
.nc2-score-track {
  flex: 1; height: 3px; background: rgba(255,255,255,.05);
  border-radius: 2px; overflow: hidden;
}
.nc2-score-fill {
  height: 100%; border-radius: 2px;
  animation: niBarGrow .6s cubic-bezier(.23,1,.32,1) forwards;
  transform-origin: left;
}
.nc2-score-fill--HIGH { background: linear-gradient(90deg, #ef4444, #f97316); }
.nc2-score-fill--MED  { background: linear-gradient(90deg, #D4A843, #F0D78C); }
.nc2-score-fill--LOW  { background: linear-gradient(90deg, #6b7280, #9ca3af); }
.nc2-score-val {
  font-size: 10px; font-weight: 800; font-family: 'JetBrains Mono', monospace;
  min-width: 18px; text-align: right;
  opacity: 0; transition: opacity .2s;
}
.nc2:hover .nc2-score-val { opacity: 1; }
.nc2-tag {
  font-size: 9px; font-weight: 600; color: #D4A843;
  border: 1px solid rgba(212,168,67,.25); border-radius: 4px;
  padding: 0 5px; white-space: nowrap; line-height: 1.6;
}
.nc2-chip {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  padding: 0 5px; border-radius: 3px; white-space: nowrap; line-height: 1.6;
  background: rgba(148,163,184,.08); color: var(--text-muted);
  border: 1px solid rgba(148,163,184,.1);
}
.nc2-chip--novel   { background: rgba(52,211,153,.1); color: #34d399; border-color: rgba(52,211,153,.2); }
.nc2-chip--risk    { background: rgba(246,70,93,.1); color: #f6465d; border-color: rgba(246,70,93,.2); }
.nc2-chip--opp     { background: rgba(14,203,129,.1); color: #0ecb81; border-color: rgba(14,203,129,.2); }
.nc2-chip--priced  { background: rgba(148,163,184,.08); color: #94a3b8; }
.nc2-chip--conf    { background: rgba(96,165,250,.1); color: #60a5fa; border-color: rgba(96,165,250,.2); }
.nc2-chip--weak    { background: rgba(251,191,36,.08); color: #fbbf24; border-color: rgba(251,191,36,.15); }
.nc2-chip--partial { background: rgba(148,163,184,.06); color: #94a3b8; border-color: rgba(148,163,184,.1); }
.nc2-chip--srcwarn { background: rgba(246,70,93,.06); color: #f6465d; border-color: rgba(246,70,93,.12); }
.nc2-src {
  font-size: 9px; font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted); white-space: nowrap;
  max-width: 80px; overflow: hidden; text-overflow: ellipsis;
}
.nc2-cluster {
  font-size: 9px; font-weight: 700; color: #60a5fa;
  white-space: nowrap;
}
.nc2-star { font-size: 9px; color: var(--accent); flex-shrink: 0; opacity: 0; transition: opacity .2s; }
.nc2:hover .nc2-star { opacity: 1; }
.nc2-expand {
  margin-left: auto; flex-shrink: 0;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px; cursor: pointer; color: var(--text-muted);
  transition: all .2s; padding: 0;
}
.nc2-expand:hover { border-color: rgba(212,168,67,.3); color: #D4A843; }
.nc2-chevron { transition: transform .25s ease; transform: rotate(180deg); }
.nc2--closed .nc2-chevron { transform: rotate(0deg); }

/* ── Line 3: Why line (conditional) ────────────────────────────── */
.nc2-why {
  font-size: 10px; font-style: italic; color: var(--accent); opacity: .7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.35;
}

/* ── Expand detail panel ───────────────────────────────────────── */
.nc2-detail {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s cubic-bezier(.22,1,.36,1);
}
.nc2--closed .nc2-detail { grid-template-rows: 0fr; }
.nc2-detail-inner {
  overflow: hidden;
  padding: 0;
  transition: padding .3s;
}
.nc2-detail-inner {
  padding: 8px 0 0;
  border-top: 1px solid rgba(255,255,255,.04);
}
.nc2--closed .nc2-detail-inner {
  padding: 0;
  border-top: none;
}
.nc2-summary {
  font-size: 11px; color: var(--text-secondary); line-height: 1.45;
  margin-bottom: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,.02);
  border-radius: 6px;
  border-left: 2px solid rgba(255,255,255,.06);
}
.nc2-signal-hd {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
  padding: 5px 8px;
  background: rgba(255,255,255,.02);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.04);
}
.nc2-intel {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; padding: 2px 6px; border-radius: 4px;
}
.nc2-intel--risk { background: rgba(246,70,93,.1); color: #f6465d; }
.nc2-intel--opp  { background: rgba(14,203,129,.1); color: #0ecb81; }
.nc2-intel--ctx  { background: rgba(148,163,184,.06); color: var(--text-muted); }
.nc2-act {
  font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
}
.nc2-act--high   { background: rgba(246,70,93,.12); color: #f6465d; }
.nc2-act--medium { background: rgba(234,179,8,.12); color: #eab308; }
.nc2-act--low    { background: rgba(100,116,139,.12); color: #94a3b8; }
.nc2-state { font-size: 9px; color: var(--text-muted); }
.nc2-warn {
  font-size: 10px; padding: 3px 6px; border-radius: 4px; margin-bottom: 3px;
}
.nc2-warn--contra  { background: rgba(246,70,93,.08); color: #f6465d; border-left: 2px solid #f6465d; }
.nc2-warn--lowconf { background: rgba(234,179,8,.08); color: #eab308; border-left: 2px solid #eab308; }
.nc2-reason {
  font-size: 10px; color: var(--text-secondary); line-height: 1.4; margin-bottom: 4px;
}
.nc2-supports, .nc2-weakens {
  font-size: 10px; line-height: 1.4; margin-bottom: 4px;
  padding: 6px 8px; border-radius: 6px;
}
.nc2-supports {
  border-left: 3px solid #0ecb81;
  background: rgba(14,203,129,.04); color: #34d399;
}
.nc2-weakens {
  border-left: 3px solid #f6465d;
  background: rgba(246,70,93,.04); color: #f87171;
}
.nc2-block-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; opacity: .7; margin-bottom: 3px;
}
.nc2-supports .nc2-item, .nc2-weakens .nc2-item {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,.02);
}
.nc2-supports .nc2-item:last-child, .nc2-weakens .nc2-item:last-child {
  border-bottom: none;
}
.nc2-linkage { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.nc2-link {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 600;
  background: rgba(148,163,184,.06); color: var(--text-muted);
  border: 1px solid rgba(148,163,184,.08);
}
.nc2-link--risk { background: rgba(246,70,93,.06); color: #f6465d; border-color: rgba(246,70,93,.1); }
.nc2-link--opp  { background: rgba(14,203,129,.06); color: #0ecb81; border-color: rgba(14,203,129,.1); }
.nc2-link--dir  { background: rgba(96,165,250,.06); color: #60a5fa; border-color: rgba(96,165,250,.1); }
.nc2-impact {
  font-size: 10px; color: var(--text-secondary); line-height: 1.4;
  padding: 6px 8px; margin-top: 4px;
  border-left: 3px solid rgba(212,168,67,.5); border-radius: 6px;
  background: rgba(212,168,67,.04);
}
.nc2-detail-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.04);
  font-size: 9px; color: var(--text-muted);
}
.nc2-detail-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; color: #D4A843;
}

/* ── NC2 Section headers ───────────────────────────────────────── */
.nc2-section {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 6px; margin-top: 4px;
  position: sticky; top: 0; z-index: 2;
  background: rgba(0,0,0,.7); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212,168,67,.1);
}
.nc2-section::after {
  content: ''; position: absolute; bottom: 0; left: 10px; right: 30%;
  height: 1px;
  background: linear-gradient(90deg, rgba(212,168,67,.2), transparent);
}
.nc2-section-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.nc2-section-dot--high { background: #f6465d; box-shadow: 0 0 8px rgba(246,70,93,.4); animation: niDotPulse 2s ease-in-out infinite; }
.nc2-section-dot--med  { background: #eab308; box-shadow: 0 0 6px rgba(234,179,8,.3); }
.nc2-section-dot--low  { background: var(--text-muted); }
.nc2-section-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nc2-section-count {
  margin-left: auto; font-size: 9px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted); background: rgba(255,255,255,.05);
  padding: 1px 7px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
}

/* ── NC2 Merged tab bar ────────────────────────────────────────── */
.nc2-tabs {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; padding: 2px; flex-wrap: nowrap;
}
.nc2-tab {
  padding: 4px 10px; font-size: 10px; font-weight: 600;
  border: none; border-radius: 6px; background: transparent;
  color: var(--text-muted); cursor: pointer; transition: all .2s;
  font-family: inherit; white-space: nowrap; line-height: 1.4;
}
.nc2-tab:hover { color: var(--text-primary); }
.nc2-tab.active {
  background: rgba(212,168,67,.12); color: #D4A843;
  box-shadow: 0 1px 4px rgba(0,0,0,.15), inset 0 0 0 1px rgba(212,168,67,.15);
}
.nc2-tab-sep {
  width: 1px; height: 16px; background: rgba(255,255,255,.08);
  margin: 0 2px; flex-shrink: 0;
}

/* ── NC2 Filter row (always visible) ───────────────────────────── */
.nc2-filters {
  display: flex; align-items: center; gap: 4px; padding-top: 6px;
  flex-wrap: nowrap;
}
.nc2-filters .news-sort-select { flex: 0 0 auto; max-width: 110px; font-size: 9px; padding: 4px 18px 4px 6px; }
.nc2-filters .news-prio-pills { gap: 2px; }
.nc2-filters .news-prio-pill { padding: 2px 6px; font-size: 8px; border-radius: 8px; }
.nc2-search-icon {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  background: none; border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px; cursor: pointer; color: var(--text-muted);
  transition: all .2s; padding: 0;
}
.nc2-search-icon:hover { border-color: rgba(212,168,67,.3); color: #D4A843; }
.nc2-search-wrap {
  display: flex; align-items: center; flex: 0;
  transition: flex .25s ease;
  overflow: hidden;
}
.nc2-search-wrap.nc2-search-open { flex: 1; }
.nc2-search-wrap .news-search-input {
  font-size: 10px; padding: 4px 6px 4px 24px; border-radius: 6px;
}

/* ── NC2 Rescan — Apple pill button with label ─────────────────── */
.nc2-rescan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, rgba(212,168,67,.12), rgba(240,215,140,.08));
  backdrop-filter: blur(8px);
  color: #D4A843;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}
.nc2-rescan::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 20px; padding: 1px;
  background: linear-gradient(135deg, rgba(212,168,67,.3), rgba(240,215,140,.15), rgba(212,168,67,.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.nc2-rescan:hover {
  background: linear-gradient(135deg, rgba(212,168,67,.2), rgba(240,215,140,.12));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212,168,67,.15), 0 2px 8px rgba(0,0,0,.2);
}
.nc2-rescan:active { transform: translateY(0) scale(.97); }
.nc2-rescan svg {
  flex-shrink: 0;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.nc2-rescan:hover svg { transform: rotate(-90deg); }

/* ── NC2 Stats strip — visual breakdown bar ────────────────────── */
.nc2-stats-strip {
  padding: 6px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  margin-bottom: 6px;
}
.nc2-stats-counts {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.nc2-stats-total {
  font-size: 12px; font-weight: 800; color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}
.nc2-stats-of {
  font-size: 10px; font-weight: 500; color: var(--text-muted);
}
.nc2-stats-pill {
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .3px;
}
.nc2-stats-pill--risk { background: rgba(246,70,93,.1); color: #f87171; }
.nc2-stats-pill--opp  { background: rgba(14,203,129,.1); color: #34d399; }
.nc2-stats-pill--ctx  { background: rgba(148,163,184,.06); color: #94a3b8; }
.nc2-stats-bar {
  display: flex; height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(255,255,255,.03);
}
.nc2-stats-seg { height: 100%; min-width: 2px; transition: width .4s ease; }
.nc2-stats-seg--risk { background: linear-gradient(90deg, #ef4444, #f87171); }
.nc2-stats-seg--opp  { background: linear-gradient(90deg, #0ecb81, #34d399); }
.nc2-stats-seg--ctx  { background: rgba(148,163,184,.2); }

/* ── NC2 Hint line ─────────────────────────────────────────────── */
.nc2-hint {
  font-size: 9px; font-style: italic; color: var(--text-muted);
  opacity: .5; padding-top: 4px; line-height: 1.3;
}

/* ── NC2 Documentation panel ───────────────────────────────────── */
.nc2-docs {
  flex-shrink: 0; padding: 0 12px 8px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.nc2-docs-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 0; font-size: 10px; font-weight: 700;
  color: #D4A843; cursor: pointer; list-style: none;
  text-transform: uppercase; letter-spacing: .6px;
  user-select: none;
}
.nc2-docs-toggle::-webkit-details-marker { display: none; }
.nc2-docs-toggle::before {
  content: ''; display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  transition: transform .2s;
}
.nc2-docs[open] .nc2-docs-toggle::before { transform: rotate(90deg); }
.nc2-docs-body {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 8px;
}
.nc2-docs-section p {
  font-size: 10px; color: var(--text-secondary); line-height: 1.5;
  margin: 0;
}
.nc2-docs-hd {
  font-size: 10px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 3px;
}

/* News sidebar subtitle placement */
.news-sidebar-hd .mkt-section-desc {
  display: block; padding-top: 2px;
  font-size: 11px !important;
}

/* ════════════════════════════════════════════════════════════════
   NEWS LIBRARY — card count badges
   ════════════════════════════════════════════════════════════════ */
.nl-card-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(240,185,11,0.12);
  color: var(--accent);
  border: 1px solid rgba(240,185,11,0.25);
  margin-left: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   NL SOURCES CARD — Binance style
   ════════════════════════════════════════════════════════════════ */
.nl-src-card { overflow: hidden; }
.nl-src-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.nl-src-title-row { display: flex; align-items: center; gap: 10px; }
.nl-src-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  margin: 0;
}
.nl-src-count {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
  background: rgba(240,185,11,0.10); color: var(--accent);
  border: 1px solid rgba(240,185,11,0.20);
}
.nl-src-actions { display: flex; gap: 4px; }
.nl-ghost-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--text-muted);
  font-size: 11px; font-weight: 500; cursor: pointer;
  transition: all .15s;
}
.nl-ghost-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(240,185,11,0.05); }
.nl-ghost-btn svg { opacity: 0.6; }
.nl-ghost-btn:hover svg { opacity: 1; stroke: var(--accent); }
.nl-ghost-btn.accent { border-color: var(--accent); color: var(--accent); background: rgba(240,185,11,0.05); }

/* Filter row */
.nl-filter-row {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  flex-wrap: wrap;
}
.nl-search-wrap {
  position: relative; flex: 1; min-width: 140px; max-width: 220px;
}
.nl-search-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  opacity: 0.4; pointer-events: none;
}
.nl-search-input {
  width: 100%; padding: 6px 8px 6px 28px;
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-primary); font-size: 12px;
  transition: border-color .15s;
}
.nl-search-input:focus { border-color: var(--accent); outline: none; }
.nl-search-input::placeholder { color: var(--text-muted); font-size: 11px; }
.nl-filter-sel {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card2); color: var(--text-secondary);
  font-size: 11px; cursor: pointer; min-width: 80px;
  transition: border-color .15s;
}
.nl-filter-sel:focus { border-color: var(--accent); outline: none; }
.nl-filter-sel-sm { min-width: 50px; }

/* Tags card — Binance style */
.nl-tags-card .sp-card-header { border-bottom: 1px solid var(--border); }
.nl-tags-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.nl-tags-title-row { display: flex; align-items: center; gap: 10px; }
.nl-tags-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  margin: 0;
}
.nl-tags-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
}
.nl-tags-input-row .tl-input {
  flex: 1; padding: 7px 12px;
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-primary); font-size: 12px;
}
.nl-tags-input-row .tl-input:focus { border-color: var(--accent); outline: none; }
.nl-tags-pills-area {
  padding: 16px;
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 500px; overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════
   SETTINGS SIDEBAR — submenu (accordion)
   ════════════════════════════════════════════════════════════════ */
.sp-nav-parent {
  position: relative;
}
.sp-nav-chevron {
  width: 12px;
  height: 12px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .2s ease;
  opacity: 0.6;
}
.sp-nav-parent.expanded .sp-nav-chevron {
  transform: rotate(180deg);
}

.sp-subnav {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
  margin-bottom: 4px;
}
.sp-subnav.open {
  display: flex;
}

.sp-subnav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 24px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .15s, color .15s;
  cursor: pointer;
}
.sp-subnav-item:hover {
  background: var(--bg-card2);
  color: var(--text-primary);
}
.sp-subnav-item.active {
  background: rgba(240,185,11,0.08);
  color: var(--accent);
  font-weight: 600;
}
.sp-subnav-item.active .sp-nav-icon {
  opacity: 1;
  color: var(--accent);
}
.sp-subnav-item .sp-nav-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}
.sp-subnav-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  background: rgba(240,185,11,0.15);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ── News fallback note (Top tab, no HIGH/MED articles) ──── */
.news-fallback-note {
  padding: 8px 0 10px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.news-fallback-note::before {
  content: "ℹ";
  font-size: 12px;
  color: var(--accent);
  opacity: 0.7;
}

/* Hide tag library version badge */
#tl-version-badge {
  display: none;
}

/* ── User Authentication UI ──────────────────────────────── */
.navbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}

.navbar-email {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

#navbar-auth-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Navbar buttons base */
.navbar-user .btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}

.btn-primary {
    background: var(--accent);
    color: #0B0F1A;
    border-color: var(--accent);
}

.btn-primary:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-card2);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-card2);
}

/* ── Navbar Language Select ──────────────────────────────── */
.navbar-lang {
    display: none !important;
}

.navbar-lang select {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 28px 6px 10px;
    font-size: 12px;
    font-family: var(--font);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.15s;
}

.navbar-lang select:hover,
.navbar-lang select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── User Menu (logged in) ──────────────────────────────── */
.user-menu {
    position: relative;
    align-items: center;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 5px 10px 5px 6px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.user-menu-trigger:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(240,185,11,.18);
    box-shadow: 0 0 12px rgba(240,185,11,.04);
}

.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #0B0F1A;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    overflow: hidden;
}

.user-menu-email {
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-chevron {
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: rgba(18,22,28,.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 1px rgba(240,185,11,.08);
    padding: 6px;
    z-index: 200;
    animation: fadeInDown 0.15s ease;
}

.user-dropdown.open {
    display: flex;
    flex-direction: column;
}

.user-dropdown.open ~ .user-menu-trigger .user-menu-chevron,
.user-menu-trigger[aria-expanded="true"] .user-menu-chevron {
    transform: rotate(180deg);
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.user-dropdown-item:hover {
    background: var(--bg-card2);
    color: var(--text-primary);
}

.user-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.user-dropdown-signout {
    color: var(--red);
}

.user-dropdown-signout:hover {
    background: rgba(246, 70, 93, 0.08);
    color: var(--red);
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .user-menu-email { display: none; }
    #navbar-auth-btns .btn-ghost { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Trade Setup — Form, Metrics, Home block, Journal
   ═══════════════════════════════════════════════════════════ */

/* ── Form ─────────────────────────────────────────────────── */
.ts-form { padding: 18px 0; position: relative; }
/* Header — 4-zone layout: left | center | actions | right */
.ts-form-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.04);
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; }
.ts-form-header-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ts-form-title { font-weight: 700; font-size: 12px; color: var(--text-muted);
  letter-spacing: 0.3px; white-space: nowrap; text-transform: uppercase; }
.ts-form-symbol { font-weight: 700; font-size: 15px; color: var(--accent); text-shadow: 0 0 8px rgba(240,185,11,.15);
  letter-spacing: 0.3px; }
.ts-form-hold-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 8px;
  background: rgba(240,185,11,0.15); color: var(--accent); text-transform: uppercase;
  letter-spacing: 0.5px; }
.ts-form-header-center { margin-left: auto; flex-shrink: 0; }
.ts-form-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ts-form-header-actions .ts-btn-save { width: auto; padding: 6px 16px; font-size: 11px;
  border-radius: 4px; }
.ts-form-header-actions .ts-btn-copy { background: rgba(255,255,255,0.06); color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.1); padding: 6px 12px; font-size: 11px;
  border-radius: 4px; white-space: nowrap; }
.ts-form-header-actions .ts-btn-copy:hover { background: rgba(255,255,255,0.1);
  color: var(--text-primary); border-color: rgba(255,255,255,0.15); }
.ts-form-header-right { display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; flex-shrink: 0; }
.ts-form-header-right .pb-mode-toggle { margin-bottom: 0; }
.ts-form-header-right .pb-reset-btn { font-size: 10px; padding: 4px 10px; }

.ts-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.ts-sl-tp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.ts-field { display: flex; flex-direction: column; gap: 6px; }
.ts-field label { font-size: 11px; font-weight: 700; color: var(--text-secondary);
  letter-spacing: .4px; }
.ts-input { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--text-primary);
  font-family: inherit; outline: none; transition: all .2s; width: 100%;
  box-sizing: border-box; font-variant-numeric: tabular-nums; font-weight: 600; }
.ts-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(240,185,11,.12), 0 0 12px rgba(240,185,11,.08); }
.ts-input-sm { max-width: 130px; }
.ts-textarea { resize: vertical; min-height: 48px; font-size: 12px; }
.ts-input-row { display: flex; align-items: center; gap: 4px; }
.ts-use-price { background: rgba(240,185,11,.08); border: 1px solid rgba(240,185,11,.2);
  border-radius: 8px; color: var(--accent); cursor: pointer; padding: 8px 10px;
  font-size: 15px; line-height: 1; transition: all .2s; min-width: 38px;
  display: flex; align-items: center; justify-content: center; }
.ts-use-price:hover { background: rgba(240,185,11,.2); border-color: var(--accent);
  box-shadow: 0 0 8px rgba(240,185,11,.15); }

/* SL/TP field sections — Binance-style accent bars + glow */
.ts-field[data-field="sl"],
.ts-field[data-field="tp"] { margin: 0; position: relative;
  border-radius: 10px; background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.04); padding: 14px 16px 14px 20px; }
.ts-field[data-field="sl"]::before,
.ts-field[data-field="tp"]::before { content: ''; position: absolute;
  top: 0; left: 0; width: 3px; height: 100%; border-radius: 3px 0 0 3px; }
.ts-field[data-field="sl"] { border-color: rgba(246,70,93,.12); }
.ts-field[data-field="sl"]::before { background: var(--red); box-shadow: 0 0 8px rgba(246,70,93,.3); }
.ts-field[data-field="sl"]:hover { border-color: rgba(246,70,93,.25); }
.ts-field[data-field="tp"] { border-color: rgba(14,203,129,.12); }
.ts-field[data-field="tp"]::before { background: var(--green); box-shadow: 0 0 8px rgba(14,203,129,.3); }
.ts-field[data-field="tp"]:hover { border-color: rgba(14,203,129,.25); }

/* Quick % buttons — pill chips with hover glow */
.ts-quick-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.ts-pct-btn { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; color: var(--text-secondary); cursor: pointer; padding: 4px 12px;
  font-size: 11px; font-weight: 600; white-space: nowrap; transition: all .2s; }
.ts-pct-btn:hover { background: rgba(240,185,11,.12); color: var(--accent);
  border-color: rgba(240,185,11,.25); box-shadow: 0 0 6px rgba(240,185,11,.1); }
.ts-pct-btn:active { transform: scale(.95); }

/* Direction toggle — Binance prominent buttons */
.ts-dir-toggle { display: flex; gap: 6px; }
.ts-dir-btn { flex: 1; padding: 10px 14px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; background: rgba(0,0,0,.2); color: var(--text-muted);
  cursor: pointer; font-weight: 700; font-size: 14px; transition: all .2s;
  text-transform: uppercase; letter-spacing: .5px; }
.ts-dir-btn:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.ts-dir-active.ts-long {
  background: linear-gradient(135deg, rgba(14,203,129,.15), rgba(14,203,129,.06));
  border-color: rgba(14,203,129,.3);
  color: var(--green); box-shadow: 0 0 16px rgba(14,203,129,.12); }
.ts-dir-active.ts-short {
  background: linear-gradient(135deg, rgba(246,70,93,.15), rgba(246,70,93,.06));
  border-color: rgba(246,70,93,.3);
  color: var(--red); box-shadow: 0 0 16px rgba(246,70,93,.12); }

/* ── Metrics — Binance card style ──────────────────────────────── */
.ts-metrics { margin-top: 14px; padding: 16px 18px;
  background: linear-gradient(135deg, rgba(24,144,255,.04), rgba(0,0,0,.15));
  border-radius: 10px; border: 1px solid rgba(24,144,255,.08); }
.ts-metrics-title { font-size: 10px; font-weight: 700; color: var(--accent);
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: .6px;
  text-shadow: 0 0 8px rgba(240,185,11,.1); }
.ts-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ts-metric { text-align: center; padding: 10px 8px; background: rgba(0,0,0,.15);
  border-radius: 8px; border: 1px solid rgba(255,255,255,.03); }
.ts-metric-label { font-size: 9px; color: var(--text-muted); display: block;
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.ts-metric-val { font-size: 15px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; }
.ts-rr-big { grid-column: 1 / -1; padding: 14px 8px 10px; margin-top: 6px;
  border-top: 1px solid rgba(240,185,11,.08);
  background: linear-gradient(135deg, rgba(240,185,11,.04), rgba(0,0,0,.1));
  border-radius: 8px; }
.ts-rr-big .ts-metric-val { font-size: 24px; letter-spacing: .5px; }
.ts-good { color: var(--green) !important; text-shadow: 0 0 8px rgba(14,203,129,.2); }
.ts-ok { color: var(--accent) !important; text-shadow: 0 0 8px rgba(240,185,11,.15); }
.ts-bad { color: var(--red) !important; text-shadow: 0 0 8px rgba(246,70,93,.2); }

/* ── Feasibility ──────────────────────────────────────────── */
.ts-feasibility { margin-top: 12px; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: rgba(0,0,0,.15); border-radius: 10px;
  border: 1px solid rgba(255,255,255,.04); }
.ts-feasibility-badge { font-size: 10px; font-weight: 700; padding: 3px 12px;
  border-radius: 10px; text-transform: uppercase; letter-spacing: .4px;
  border: 1px solid transparent; }
.ts-feas-high {
  background: linear-gradient(135deg, rgba(14,203,129,.15), rgba(14,203,129,.05));
  color: var(--green); border-color: rgba(14,203,129,.15); }
.ts-feas-medium { background: rgba(240,185,11,0.15); color: #f5a623; }
.ts-feas-low { background: rgba(246,70,93,0.12); color: var(--red); }
.ts-feasibility-hint { font-size: 10px; color: var(--text-muted); }
.ts-feas-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ts-feas-dot.ts-feas-high { background: var(--green); }
.ts-feas-dot.ts-feas-medium { background: #f5a623; }
.ts-feas-dot.ts-feas-low { background: var(--red); }

/* ── Extras (account size, position sizing) — Binance grid ── */
.ts-extras { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  margin-top: 16px; padding: 14px 16px; background: rgba(0,0,0,.15);
  border-radius: 10px; border: 1px solid rgba(255,255,255,.04); }
.ts-field-sm { display: flex; flex-direction: column; gap: 6px; }
.ts-field-sm label { font-size: 10px; color: var(--text-muted);
  letter-spacing: .4px; font-weight: 700; text-transform: uppercase; }

/* ── Actions / Error ──────────────────────────────────────── */
.ts-actions { margin-top: 14px; }
.ts-btn { padding: 7px 14px; border-radius: 8px; border: none; font-weight: 600;
  font-size: 11px; cursor: pointer; transition: all 0.15s; letter-spacing: 0.2px; }
.ts-btn-defaults { background: rgba(255,255,255,.03); color: var(--text-muted);
  border: 1px solid rgba(255,255,255,.08); padding: 6px 14px; font-size: 10px;
  font-weight: 600; border-radius: 8px; white-space: nowrap; }
.ts-btn-defaults:hover { background: rgba(255,255,255,.08); color: var(--text-primary);
  border-color: rgba(255,255,255,.15); }
.ts-btn-save { background: var(--accent); color: #0B0F1A; width: 100%;
  box-shadow: 0 2px 12px rgba(240,185,11,.25);
  font-size: 12px; padding: 9px 18px; border-radius: 8px; font-weight: 700; }
.ts-btn-save:hover { filter: brightness(1.1); box-shadow: 0 4px 16px rgba(240,185,11,.3); }
.ts-btn-save:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.ts-error { color: var(--red); font-size: 11px; padding: 6px 0; }
.ts-success { text-align: center; padding: 20px 0; }

/* ── Home: My Trade Setups block ──────────────────────────── */
.ts-home-section { margin-bottom: 16px; }
.ts-journal-link { font-size: 11px; color: var(--accent); text-decoration: none; margin-left: auto; }
.ts-journal-link:hover { text-decoration: underline; }
.ts-home-block { min-height: 40px; }
.ts-home-empty { text-align: center; color: var(--text-muted); font-size: 12px; padding: 16px; }
.ts-home-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ts-home-card { background: var(--bg-card, rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 12px 14px; cursor: default; transition: all 0.2s; }
.ts-home-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(240,185,11,0.08); }
.ts-home-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ts-home-symbol { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.ts-home-rr { font-size: 13px; font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; }
.ts-home-prices { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; }
.ts-home-arrow { color: var(--text-muted); }
.ts-home-sl { font-size: 11px; }
.ts-home-viewall { display: block; text-align: center; padding: 10px; font-size: 12px;
  color: var(--accent); text-decoration: none; margin-top: 8px; font-weight: 600; }
.ts-home-viewall:hover { text-decoration: underline; }

/* Direction badges */
.ts-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.6px; }
.ts-badge-long { background: linear-gradient(135deg, rgba(14,203,129,.15), rgba(14,203,129,.06)); color: var(--green); border: 1px solid rgba(14,203,129,.15);
  border: 1px solid rgba(14,203,129,0.2); }
.ts-badge-short { background: linear-gradient(135deg, rgba(246,70,93,.12), rgba(246,70,93,.04)); color: var(--red); border: 1px solid rgba(246,70,93,.12);
  border: 1px solid rgba(246,70,93,0.2); }
.ts-badge-hold { background: linear-gradient(135deg, rgba(240,185,11,.12), rgba(240,185,11,.04)); color: var(--accent); border: 1px solid rgba(240,185,11,.12);
  border: 1px solid rgba(240,185,11,0.2); }

/* ── Journal page ─────────────────────────────────────────── */
.ts-journal-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.ts-journal-filters select, .ts-journal-filters input {
  background: var(--bg-card, rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px; padding: 6px 10px; font-size: 12px; color: var(--text-primary); }
.ts-journal-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ts-journal-table th { text-align: left; padding: 8px 10px; font-size: 11px;
  color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.06); font-weight: 500; }
.ts-journal-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-primary); }
.ts-journal-table tr:hover td { background: rgba(255,255,255,0.02); }
.ts-journal-actions { display: flex; gap: 4px; }
.ts-journal-actions button { background: none; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px; padding: 2px 6px; font-size: 10px; cursor: pointer; color: var(--text-secondary); }
.ts-journal-actions button:hover { background: rgba(255,255,255,0.05); }
.ts-journal-actions .ts-btn-del { color: var(--red); border-color: rgba(255,60,60,0.2); }
.ts-journal-actions .ts-btn-del:hover { background: rgba(255,60,60,0.1); }

/* ── Risk Calculator extended styles ──────────────────── */
.ts-style-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 12px 16px; background: rgba(0,0,0,.15); border-radius: 10px;
  border: 1px solid rgba(255,255,255,.04); flex-wrap: wrap; }
/* (buttons moved to .ts-form-header-actions) */
.ts-field-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-field-inline label { font-size: 11px; color: var(--text-secondary); margin: 0;
  font-weight: 700; letter-spacing: .3px; }
.ts-field-inline select { max-width: 160px; background: rgba(0,0,0,.25);
  border: 1px solid rgba(240,185,11,.12); border-radius: 8px; padding: 8px 14px;
  font-size: 14px; font-weight: 600; color: var(--text-primary); transition: all .2s; }
.ts-field-inline select:focus { border-color: var(--accent); box-shadow: 0 0 8px rgba(240,185,11,.1); }
.ts-style-horizon { font-size: 10px; color: var(--text-muted); background: rgba(240,185,11,0.1);
  padding: 3px 8px; border-radius: 4px; font-weight: 600; }

.ts-source-label { font-size: 9px; color: var(--accent); background: rgba(240,185,11,0.1);
  padding: 2px 6px; border-radius: 4px; margin-left: 4px; font-weight: 600;
  vertical-align: middle; letter-spacing: 0.3px; }
.ts-field[data-field="sl"] .ts-source-label { color: var(--red); background: rgba(246,70,93,0.1); }
.ts-field[data-field="tp"] .ts-source-label { color: var(--green); background: rgba(14,203,129,0.1); }

.ts-auto-btn { background: rgba(24,144,255,0.1); color: var(--blue, #1890ff);
  border: 1px solid rgba(24,144,255,0.25); border-radius: 12px; padding: 3px 10px;
  font-size: 10px; font-weight: 700; cursor: pointer; transition: all 0.15s;
  letter-spacing: 0.3px; }
.ts-auto-btn:hover { background: rgba(24,144,255,0.2); border-color: var(--blue, #1890ff); }

.ts-advanced-section { margin: 12px 0; }
.ts-toggle-btn { background: none; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
  padding: 6px 12px; font-size: 11px; color: var(--text-secondary); cursor: pointer;
  width: 100%; text-align: left; transition: all 0.2s; font-weight: 600; }
.ts-toggle-btn:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.ts-advanced { border: 1px solid rgba(255,255,255,0.06); border-radius: 8px;
  padding: 12px; margin-top: 8px; background: rgba(255,255,255,0.02); }
.ts-field-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ts-field-row .ts-field-sm { flex: 1; min-width: 100px; }
.ts-net-metrics { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; margin-top: 10px; }

.ts-warnings { margin: 10px 0; }
.ts-warnings-title { font-size: 10px; color: var(--text-muted); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.ts-warn-badge { display: inline-flex; align-items: center; font-size: 10px;
  padding: 3px 10px; border-radius: 4px; margin-right: 4px; margin-bottom: 4px;
  font-weight: 600; background: rgba(246,70,93,0.08); color: var(--red);
  border: 1px solid rgba(246,70,93,0.15); }

.ts-trailing-hint { font-size: 11px; color: var(--green); background: rgba(14,203,129,0.06);
  border: 1px solid rgba(14,203,129,0.12); border-radius: 6px; padding: 8px 12px; margin-top: 10px; }

.ts-btn-copy { background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 18px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
  font-weight: 600; white-space: nowrap; }
.ts-btn-copy:hover { background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18); color: var(--text-primary); }
.ts-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* P/L in journal */
.ts-pnl-positive { color: var(--green); font-weight: 600; }
.ts-pnl-negative { color: var(--red); font-weight: 600; }
.ts-source-flag { font-size: 9px; color: var(--text-muted); background: rgba(255,255,255,0.05);
  padding: 1px 4px; border-radius: 2px; }

/* ── Trade Setup Summary Card (Home) — Compact Signal View ── */
.ts-summary-card { background: var(--bg-card, #161a1e);
  border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 12px;
  padding: 18px 22px; margin-bottom: 12px; position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.ts-summary-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ts-summary-symbol { font-weight: 700; font-size: 18px; color: var(--text-primary);
  letter-spacing: 0.5px; }
.ts-summary-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 14px; }
.ts-summary-price-item { display: flex; flex-direction: column; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 16px;
  text-align: center; transition: border-color 0.2s; position: relative; overflow: hidden; }
.ts-summary-price-item::before { content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 3px; }
.ts-summary-price-item.ts-summary-sl { border-color: rgba(246,70,93,0.2); }
.ts-summary-price-item.ts-summary-sl::before { background: var(--red); }
.ts-summary-price-item.ts-summary-tp { border-color: rgba(14,203,129,0.2); }
.ts-summary-price-item.ts-summary-tp::before { background: var(--green); }
.ts-summary-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.6px; margin-bottom: 6px; font-weight: 700; }
.ts-summary-val { font-size: 18px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; }
.ts-summary-sl .ts-summary-val { color: var(--red); }
.ts-summary-tp .ts-summary-val { color: var(--green); }
.ts-summary-metrics { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 0; }
.ts-summary-metric { font-size: 12px; color: var(--text-secondary); display: flex;
  align-items: center; gap: 4px; }
.ts-summary-metric strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ts-summary-metric.ts-good strong { color: var(--green); }
.ts-summary-metric.ts-ok strong { color: var(--accent); }
.ts-summary-metric.ts-bad strong { color: var(--red); }
/* R/R metric — prominent display */
.ts-summary-metric.ts-rr-main { font-size: 15px; padding: 4px 12px;
  background: rgba(255,255,255,0.03); border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06); }
.ts-summary-metric.ts-rr-main strong { font-size: 16px; }

.ts-summary-card.ts-summary-empty { text-align: center; padding: 28px; }
.ts-summary-empty-msg { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.ts-btn-create-inline { background: var(--accent); color: #000; border: none;
  border-radius: 8px; padding: 10px 24px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; letter-spacing: 0.3px; }
.ts-btn-create-inline:hover { filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(240,185,11,0.2); }

/* ══ Plan Builder — Redesigned ═════════════════════════════════════════ */
.pb-section { margin-bottom: var(--ws-gap-section); }
.pb-container { min-height: 40px; }

/* Empty state */
.pb-empty-state { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 40px 20px;
  border: 1px dashed rgba(240,185,11,0.2); border-radius: 12px;
  color: var(--text-muted); background: rgba(240,185,11,0.02); }
.pb-empty-icon { font-size: 32px; opacity: 0.7; }
.pb-empty-msg { font-size: 13px; font-weight: 500; }

/* Warning banner (symbol fallback, HOLD status) */
.pb-warning-banner { display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 8px; border-radius: 6px;
  background: rgba(240,185,11,0.08); border: 1px solid rgba(240,185,11,0.2);
  color: var(--accent); font-size: 12px; font-weight: 500; line-height: 1.4; }
.pb-warning-icon { font-size: 16px; flex-shrink: 0; }

/* HOLD overlay — blocks Save/order actions */
.pb-hold-overlay { padding: 16px; margin-top: 12px; border-radius: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  text-align: center; }
.pb-hold-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.pb-hold-badge { display: inline-block; padding: 4px 12px; border-radius: 4px;
  background: rgba(240,185,11,0.15); color: var(--accent); font-weight: 700;
  font-size: 14px; letter-spacing: 0.6px; margin-bottom: 8px; }

/* Main card — Binance-style gradient */
.pb-card { background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%);
  border: 1px solid rgba(240,185,11,.1);
  border-radius: 10px; padding: 16px 18px; position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
  overflow: hidden; }
.pb-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(240,185,11,.25) 50%, transparent 100%); }

/* Header row */
.pb-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.05); flex-wrap: wrap; }
.pb-header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pb-symbol-name { font-size: 18px; font-weight: 700; color: var(--text-primary);
  letter-spacing: 0.5px; }

/* Level cards inline in header (AUTO mode) — Binance-style accent bars */
.pb-header-levels { display: flex; gap: 10px; flex: 1; min-width: 0; align-items: stretch; }
.pb-header-levels .pb-level-item { flex: 1; min-width: 90px; padding: 12px 14px 10px 16px;
  position: relative; overflow: hidden; background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.05); border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px; transition: all .2s ease; }
.pb-header-levels .pb-level-item:hover { border-color: rgba(240,185,11,.15); }
.pb-header-levels .pb-level-item::before { content: ''; position: absolute;
  top: 0; left: 0; width: 3px; height: 100%; background: rgba(240,185,11,.3); }
.pb-header-levels .pb-level-sl { border-color: rgba(246,70,93,.15); }
.pb-header-levels .pb-level-sl::before { background: var(--red); box-shadow: 0 0 8px rgba(246,70,93,.3); }
.pb-header-levels .pb-level-tp { border-color: rgba(14,203,129,.15); }
.pb-header-levels .pb-level-tp::before { background: var(--green); box-shadow: 0 0 8px rgba(14,203,129,.3); }
.pb-header-levels .pb-level-label { font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .6px; }
.pb-header-levels .pb-level-val { font-size: 18px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.pb-header-levels .pb-level-sl .pb-level-val { color: var(--red); text-shadow: 0 0 10px rgba(246,70,93,.2); }
.pb-header-levels .pb-level-tp .pb-level-val { color: var(--green); text-shadow: 0 0 10px rgba(14,203,129,.2); }
.pb-header-levels .pb-level-source { font-size: 9px; font-weight: 700; letter-spacing: .3px; }
.pb-header-levels .pb-level-source-sl { color: var(--red); }
.pb-header-levels .pb-level-source-tp { color: var(--green); }

/* Symbol select */
.pb-select { background: rgba(0,0,0,.25);
  border: 1px solid rgba(240,185,11,.15);
  border-radius: 8px; color: var(--accent); font-size: 16px; font-weight: 700;
  padding: 8px 14px; cursor: pointer; transition: all .2s ease; }
.pb-select:hover { border-color: rgba(240,185,11,.3); box-shadow: 0 0 8px rgba(240,185,11,.1); }
.pb-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 12px rgba(240,185,11,.15); }

/* Mode toggle — Binance tab design */
.pb-mode-toggle { display: inline-flex; gap: 0; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
  background: rgba(0,0,0,.15); }
.pb-mode-btn { display: flex; flex-direction: column; align-items: center; gap: 0;
  background: transparent; border: none;
  padding: 5px 12px; cursor: pointer; color: #5e6673; transition: all .15s;
  position: relative; min-width: 60px; }
.pb-mode-btn:first-child { border-right: 1px solid rgba(255,255,255,.04); }
.pb-mode-btn:hover { background: rgba(255,255,255,.04); }
.pb-mode-active { background: #f0b90b !important; color: #0b0e11 !important; }
.pb-mode-active .pb-mode-label { color: #0b0e11; font-weight: 700; }
.pb-mode-active .pb-mode-sub { color: rgba(11,14,17,.55); }
/* Inside pb3-card: use gold accent for active */
.pb3-card .pb-mode-active {
  background: #f0b90b !important;
}
.pb-mode-label { font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; }
.pb-mode-sub { font-size: 7px; color: #5e6673; font-weight: 500; letter-spacing: 0.2px; }

/* Direction area */
.pb-direction { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pb-symbol-label { font-size: 16px; font-weight: 700; color: var(--text-primary); }

/* Levels grid (standalone) */
.pb-levels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 14px; }
.pb-level-item { background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px; padding: 12px 14px 10px 16px; display: flex; flex-direction: column;
  gap: 5px; position: relative; overflow: hidden; transition: all .2s ease; }
.pb-level-item:hover { border-color: rgba(240,185,11,.12); }
.pb-level-item::before { content: ''; position: absolute; top: 0; left: 0;
  width: 3px; height: 100%; background: var(--border); }
.pb-level-sl { border-color: rgba(246,70,93,0.2); }
.pb-level-sl::before { background: var(--red) !important; }
.pb-level-tp { border-color: rgba(14,203,129,0.2); }
.pb-level-tp::before { background: var(--green) !important; }
.pb-level-label { font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.6px; }
.pb-level-val { font-size: 18px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; }
.pb-level-sl .pb-level-val { color: var(--red); }
.pb-level-tp .pb-level-val { color: var(--green); }
.pb-level-source { font-size: 9px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--text-muted); padding: 1px 6px; background: rgba(255,255,255,0.04);
  border-radius: 3px; display: inline-block; width: fit-content; }
.pb-level-source-sl { color: var(--red); background: rgba(246,70,93,0.06); }
.pb-level-source-tp { color: var(--green); background: rgba(14,203,129,0.06); }

/* Metrics row (AUTO mode) — Binance chip style */
.pb-metrics-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pb-metric { font-size: 12px; color: var(--text-secondary); padding: 8px 14px;
  background: rgba(0,0,0,.15); border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04); }
.pb-metric strong { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 700; }
.pb-metric-rr { font-size: 14px; padding: 8px 16px;
  background: linear-gradient(135deg, rgba(240,185,11,.08), rgba(240,185,11,.02));
  border-color: rgba(240,185,11,.15); }
.pb-metric-rr strong { font-size: 16px; color: var(--accent); text-shadow: 0 0 8px rgba(240,185,11,.2); }
/* Inline metrics (AUTO mode) */
.pb-metrics-inline { display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  padding: 14px 0 8px; font-size: 13px; color: var(--text-secondary); }
.pb-metrics-inline strong { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 700; }
.pb-metrics-inline .pb-rr-highlight { color: var(--accent); font-weight: 700; }
.pb-metrics-inline .pb-rr-highlight strong { color: var(--accent); text-shadow: 0 0 8px rgba(240,185,11,.2); }

/* Reasons panel */
.pb-reasons { background: linear-gradient(135deg, rgba(240,185,11,.05), rgba(0,0,0,.15));
  border-left: 3px solid var(--accent);
  border: 1px solid rgba(240,185,11,.1); border-left-width: 3px;
  border-radius: 0 10px 10px 0; padding: 12px 16px; margin-bottom: 16px; }
.pb-reasons-title { font-size: 11px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(240,185,11,.15); }
.pb-reasons-list { list-style: none; padding: 0; margin: 0; font-size: 12px;
  color: var(--text-secondary); }
.pb-reasons-list li { margin-bottom: 4px; padding-left: 2px; line-height: 1.5; }

/* Actions */
.pb-actions { display: flex; flex-direction: column; gap: 10px; }
.pb-save-btn { width: 100%; background: var(--accent); color: #000 !important;
  font-weight: 700; font-size: 14px; padding: 13px 18px; border: none;
  border-radius: 10px; cursor: pointer; letter-spacing: .4px;
  transition: all .2s; text-transform: none;
  box-shadow: 0 2px 12px rgba(240,185,11,.25); }
.pb-save-btn:hover { filter: brightness(1.1);
  box-shadow: 0 4px 20px rgba(240,185,11,.35); transform: translateY(-1px); }
.pb-actions-secondary { display: flex; gap: 8px; }
.pb-actions-secondary .ts-btn { flex: 1; font-size: 12px; border-radius: 6px; }
.pb-switch-manual { background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  color: var(--text-secondary); font-size: 12px; border-radius: 6px; }
.pb-switch-manual:hover { border-color: var(--accent); color: var(--accent); }

/* Manual mode */
.pb-manual-wrap { }
.pb-manual-header { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.pb-reset-btn { background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  color: var(--text-secondary); font-size: 13px; padding: 10px 22px;
  border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 600;
  white-space: nowrap; }
.pb-reset-btn:hover { border-color: var(--accent); color: var(--accent); }

.pb-incomplete { text-align: center; padding: 24px; color: var(--text-muted); font-size: 13px; }

/* ── Plan Builder status/subtitle area ─────────────────── */
.pb-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pb-status-badge { font-size: 10px; font-weight: 700; padding: 3px 10px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.pb-status-actionable { background: rgba(14,203,129,0.15); color: var(--green); }
.pb-status-watch { background: rgba(240,185,11,0.15); color: var(--accent); }
.pb-status-blocked { background: rgba(246,70,93,0.12); color: var(--red); }
.pb-status-hold { background: rgba(132,142,156,0.1); color: var(--text-muted); }

@media (max-width: 640px) {
  .ts-form-grid { grid-template-columns: 1fr; }
  .ts-sl-tp-row { grid-template-columns: 1fr; }
  .ts-form-header { flex-wrap: wrap; }
  .ts-form-header-center { margin-left: 0; width: 100%; order: 5; margin-top: 6px; }
  .ts-form-header-actions { width: 100%; order: 4; margin-top: 6px; }
  .ts-form-header-right { width: 100%; justify-content: flex-end; margin-top: 6px; order: 3; }
  .ts-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .ts-home-list { grid-template-columns: 1fr; }
  .ts-field-row { flex-direction: column; }
  .ts-actions { flex-direction: column; }
  .ts-summary-prices { grid-template-columns: 1fr; }
  .pb-levels-grid { grid-template-columns: 1fr; }
  .pb-header { flex-direction: column; align-items: flex-start; }
  .pb-header-levels { width: 100%; }
  .pb-actions-secondary { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════════
   ML Debug Overlay
   ══════════════════════════════════════════════════════════════════════ */
.ml-debug-details {
  background: var(--bg-card, #1a1a2e);
  border: 1px dashed var(--border, #333);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
}
.ml-debug-summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #888);
  user-select: none;
}
.ml-debug-summary:hover { color: var(--accent, #f59e0b); }
.ml-debug-content {
  padding: 8px 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.ml-debug-card {
  flex: 0 0 320px;
  font-size: 11px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  padding: 8px 10px;
}
.ml-debug-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary, #eee);
}
.ml-debug-table {
  width: 100%;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  border-collapse: collapse;
}
.ml-debug-table td {
  padding: 2px 6px;
  border-bottom: 1px solid var(--border, #222);
  color: var(--text-secondary, #888);
}
.ml-debug-table td:first-child {
  color: var(--text-primary, #ccc);
  font-weight: 500;
  white-space: nowrap;
}
.ml-debug-table td:nth-child(3) {
  font-size: 9px;
  color: var(--text-secondary, #666);
}
.ml-quality-badge {
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
}

/* ── Engine Status Strip ──────────────────────────────── */
.engine-status-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
}
.eng-strip-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 4px;
  white-space: nowrap;
}
.eng-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.eng-chip-on  { background: rgba(14,203,129,0.15); color: var(--green); }
.eng-chip-off { background: rgba(246,70,93,0.12);  color: var(--red); }
.eng-chip-val { font-weight: 700; }
.eng-chip-progress {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(240,185,11,0.18);
  color: var(--yellow);
  margin-left: 2px;
}
.eng-strip-modal {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* ── Model Quality Mini-Panel ─────────────────────────── */
.model-quality-panel { margin-bottom: 8px; }
.mq-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.mq-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: 8px 12px;
}
.mq-card-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.mq-sym { font-weight: 700; font-size: 13px; color: var(--text-primary); }
.mq-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}
.mq-ok       { background: rgba(14,203,129,0.15); color: var(--green); }
.mq-warn     { background: rgba(240,185,11,0.15); color: var(--yellow); }
.mq-degraded { background: rgba(246,70,93,0.15);  color: var(--red); }
.mq-nodata   { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.mq-card-nodata { opacity: 0.75; }
.mq-metrics { display: flex; gap: 12px; }
.mq-metric { display: flex; flex-direction: column; }
.mq-metric-lbl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
.mq-metric-val { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.mq-footer { font-size: 9px; color: var(--text-muted); margin-top: 4px; }
.quality-warn-icon { color: var(--yellow); font-size: 12px; margin-left: 4px; cursor: help; }

/* ── v0.3: Data Coverage panel in modal ────────────── */
.fmod-coverage-section { border-top: 1px dashed var(--border, #2a2e35); padding-top: 8px; }
.fmod-cov-toggle { display: flex; align-items: center; gap: 6px; user-select: none; }
.fmod-cov-arrow { font-size: 9px; color: var(--text-muted); transition: transform 0.2s; }
.fmod-coverage-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.fmod-cov-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.fmod-cov-lbl { font-size: 10px; text-transform: uppercase; color: var(--text-muted); min-width: 100px; }
.fmod-cov-val { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.fmod-cov-sub { font-size: 10px; color: var(--text-muted); width: 100%; padding-left: 106px; }
.cov-ok  { color: var(--green); }
.cov-deg { color: var(--yellow); }
.cov-ins { color: var(--red); }

/* ── v0.3: Analysis Empty State ─────────────────────── */
.analysis-empty-state {
  text-align: center;
  padding: 48px 24px;
  margin-bottom: 16px;
  background: var(--bg-card, #161a1e);
  border: 1px dashed var(--border, #2a2e35);
  border-radius: var(--radius, 6px);
}
.analysis-empty-state .empty-state-icon { font-size: 48px; margin-bottom: 12px; }
.analysis-empty-state h3 { color: var(--text-primary); margin: 0 0 8px; font-size: 18px; }
.analysis-empty-state p { color: var(--text-muted); margin: 0; font-size: 14px; max-width: 480px; margin: 0 auto; }

/* ── v0.6: Case Analysis ────────────────────────────── */
.ca-strip { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.ca-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;
  background: var(--card-bg); border: 1px solid var(--border);
}
.ca-chip-lbl { color: var(--text-muted); font-weight: 400; }
.ca-risk-low  { color: rgba(14,203,129,1); border-color: rgba(14,203,129,0.3); }
.ca-risk-med  { color: rgba(240,185,11,1); border-color: rgba(240,185,11,0.3); }
.ca-risk-high { color: rgba(246,70,93,1);  border-color: rgba(246,70,93,0.3); }
.ca-consensus-strong { color: rgba(14,203,129,1); }
.ca-consensus-weak   { color: rgba(240,185,11,1); }
.ca-regime-matched    { color: rgba(14,203,129,1); }
.ca-regime-mismatched { color: rgba(246,70,93,1); }
.ca-regime-neutral    { color: var(--text-muted); }
.ca-match-score { font-weight: 700; font-size: 11px; }
.ca-downgrade-banner {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 4px; font-size: 10px;
  background: rgba(246,70,93,0.08); border: 1px solid rgba(246,70,93,0.2);
  color: rgba(246,70,93,1); margin: 4px 0;
}
/* Modal case analysis panel */
.fmod-case-analysis { margin: 10px 0; padding: 8px 12px; background: var(--card-bg); border-radius: 6px; border: 1px solid var(--border); }
.fmod-ca-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 6px; }
.fmod-ca-item { text-align: center; }
.fmod-ca-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.fmod-ca-value { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 2px; }
.fmod-ca-sub { font-size: 9px; color: var(--text-muted); }
.fmod-ca-reasons { margin-top: 6px; font-size: 10px; color: var(--text-muted); }
.fmod-ca-reasons span { display: inline-block; margin-right: 8px; }

/* ── Safe Mode Banner ────────────────────────────────── */
.safe-mode-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 8px;
  background: rgba(246,70,93,0.12);
  border: 1px solid rgba(246,70,93,0.35);
  border-radius: var(--radius, 6px);
  color: var(--red, #f6465d);
  font-size: 12px;
}
.safe-mode-banner.hidden { display: none; }
.safe-mode-icon { font-size: 16px; }
.safe-mode-desc { color: var(--text-secondary); margin-left: auto; font-size: 11px; }

/* ── Trading Readiness Strip ─────────────────────────── */
.trading-readiness-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  font-size: 12px;
  flex-wrap: wrap;
}
.readiness-label { font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.readiness-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.readiness-badge.ready     { background: rgba(14,203,129,0.15); color: var(--green, #0ecb81); }
.readiness-badge.caution   { background: rgba(243,186,47,0.15); color: #f3ba2f; }
.readiness-badge.not-ready { background: rgba(246,70,93,0.12);  color: var(--red, #f6465d); }
.readiness-score { font-size: 11px; color: var(--text-muted); }
.readiness-why-btn { cursor: pointer; }
.readiness-why-panel {
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--bg-surface, #1e2329);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}
.readiness-why-panel table { width: 100%; border-collapse: collapse; }
.readiness-why-panel th { text-align: left; padding: 2px 6px; color: var(--text-muted); font-weight: 600; font-size: 10px; }
.readiness-why-panel td { padding: 2px 6px; }

/* ── Safety Disclaimer ───────────────────────────────── */
.safety-disclaimer {
  padding: 10px 14px;
  margin-top: var(--ws-gap-section);
  background: rgba(132,142,156,0.08);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}
.disclaimer-icon { font-size: 13px; margin-right: 4px; }

/* ── Guardrail Tags ──────────────────────────────────── */
.guardrail-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  margin: 2px 2px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 600;
  background: rgba(132,142,156,.07);
  color: #b7bdc6;
  letter-spacing: .3px;
  cursor: help;
  border: 1px solid rgba(132,142,156,.08);
  transition: all .2s ease;
}
.guardrail-tag:hover { border-color: rgba(255,255,255,.1); }
.guardrail-tag.db-guard-red {
  background: linear-gradient(135deg, rgba(246,70,93,.1), rgba(246,70,93,.04));
  color: var(--red, #f6465d);
  border-color: rgba(246,70,93,.12);
}
.guardrail-tag.db-guard-yellow {
  background: linear-gradient(135deg, rgba(240,185,11,.1), rgba(240,185,11,.04));
  color: var(--gold, #f0b90b);
  border-color: rgba(240,185,11,.1);
}

/* ── Signals Blocked/Watch Banner ──────────────────── */
.sig-banner { margin-top: 8px; }
.sig-banner-inner {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.sig-banner-blocked {
  background: rgba(246,70,93,0.10);
  border-left: 3px solid var(--red, #f6465d);
}
.sig-banner-watch {
  background: rgba(243,186,47,0.10);
  border-left: 3px solid var(--yellow, #f3ba2f);
}
.sig-banner-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.sig-banner-reasons { margin-bottom: 6px; color: var(--text-secondary); }
.sig-fix-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--accent);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.sig-fix-btn:hover { background: rgba(255,255,255,0.05); }
.sig-fix-popover {
  display: none;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}
.sig-fix-popover.open { display: block; }
.sig-fix-popover ul { margin: 0; padding-left: 18px; }
.sig-fix-popover li { margin-bottom: 4px; }

/* ── Risk Mode Radios (Settings) ─────────────────────── */
.risk-mode-radios { display: flex; flex-direction: column; gap: 8px; }
.risk-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  cursor: pointer;
  transition: border-color 0.15s;
}
.risk-mode-option:hover { border-color: var(--accent, #f0b90b); }
.risk-mode-option input[type="radio"] { margin-top: 3px; accent-color: var(--accent, #f0b90b); }
.risk-mode-option input[type="radio"]:checked ~ .risk-mode-name { color: var(--accent, #f0b90b); }
.risk-mode-name { font-weight: 600; font-size: 13px; color: var(--text-primary); display: block; }
.risk-mode-desc { font-size: 11px; color: var(--text-muted); display: block; margin-top: 2px; }

/* ══════════════════════════════════════════════════════
   GLOBAL HELP SYSTEM — ws-help component
   Usage: <span class="ws-help" data-help="help_key_name">ⓘ</span>
   Tooltip text is set by JS from I18N.t(data-help).
   ══════════════════════════════════════════════════════ */
.ws-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px solid var(--border, #2a2e35);
  border-radius: 50%;
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.65;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.ws-help:hover {
  opacity: 1;
  color: var(--accent, #f0b90b);
  border-color: var(--accent, #f0b90b);
}
/* Tooltip bubble — pure CSS via ::after, content from data-tip */
.ws-help::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card, #1a1e24);
  border: 1px solid var(--border, #2a2e35);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  min-width: 180px;
  max-width: 320px;
  width: max-content;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  text-align: left;
}
/* Arrow below bubble */
.ws-help::before {
  content: '';
  display: none;
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--border, #2a2e35);
  z-index: 10000;
  pointer-events: none;
}
.ws-help:hover::after,
.ws-help:hover::before { display: block; }
/* Right-edge guard: if near right side, shift left */
.ws-help.ws-help-left::after { left: auto; right: -8px; transform: none; }
.ws-help.ws-help-left::before { left: auto; right: 2px; transform: none; }

/* Settings Documentation block (collapsible) */
.sp-docs-block {
  margin-top: 12px;
  background: linear-gradient(135deg, rgba(240,185,11,.03) 0%, rgba(14,203,129,.03) 100%);
  border: 1px solid rgba(240,185,11,.1);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.sp-docs-block:hover {
  border-color: rgba(240,185,11,.2);
  box-shadow: 0 2px 12px rgba(240,185,11,.06);
}
.sp-docs-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  user-select: none;
  background: linear-gradient(135deg, rgba(240,185,11,.06) 0%, rgba(14,203,129,.04) 100%);
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 12px 18px;
  width: 100%;
  text-align: left;
  transition: all .25s;
  letter-spacing: .02em;
}
.sp-docs-body.open ~ .sp-docs-toggle,
.sp-docs-toggle:has(+ .sp-docs-body.open) {
  border-bottom: 1px solid rgba(240,185,11,.08);
}
.sp-docs-toggle:hover {
  color: var(--accent);
  background: linear-gradient(135deg, rgba(240,185,11,.1) 0%, rgba(14,203,129,.06) 100%);
}
.sp-docs-block.open .sp-docs-toggle {
  border-bottom: 1px solid rgba(240,185,11,.08);
}
.sp-docs-chevron {
  font-size: 10px;
  transition: transform .2s;
  color: #F0B90B;
}
.sp-docs-block.open .sp-docs-chevron {
  transform: rotate(90deg);
}
.sp-docs-icon {
  display: flex;
  align-items: center;
}
.sp-docs-arrow {
  font-size: 9px;
  transition: transform 0.2s;
  color: var(--accent);
}
.sp-docs-body {
  display: none;
  margin-top: 0;
  padding: 14px 18px;
  background: none;
  border-radius: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}
.sp-docs-body.open,
.sp-docs-block.open .sp-docs-body { display: block; }
.sp-docs-body p { margin: 0 0 8px; }
.sp-docs-body p:last-child { margin-bottom: 0; }
.sp-docs-body strong { color: var(--text-primary); font-weight: 600; }

/* Docs rich cards (inside sp-docs-body) */
.sp-docs-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sp-docs-intro svg { flex-shrink: 0; margin-top: 2px; }
.sp-docs-intro strong { color: var(--accent); }
.sp-docs-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-docs-param {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background .2s, transform .2s;
  animation: sp-fade-up .3s ease both;
}
.sp-docs-param:nth-child(1) { animation-delay: 0ms; }
.sp-docs-param:nth-child(2) { animation-delay: 40ms; }
.sp-docs-param:nth-child(3) { animation-delay: 80ms; }
.sp-docs-param:nth-child(4) { animation-delay: 120ms; }
.sp-docs-param:nth-child(5) { animation-delay: 160ms; }
.sp-docs-param:nth-child(6) { animation-delay: 200ms; }
.sp-docs-param:nth-child(7) { animation-delay: 240ms; }
.sp-docs-param:hover {
  background: rgba(255,255,255,.03);
  transform: translateX(3px);
}
.sp-docs-param-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.sp-docs-param-header strong {
  color: var(--text-primary);
  font-weight: 600;
}
.sp-docs-param-header svg { flex-shrink: 0; }
.sp-docs-param > span {
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 22px;
  line-height: 1.4;
}
.sp-docs-param-accent {
  background: rgba(14,203,129,.04);
  border-left: 2px solid rgba(14,203,129,.3);
}
.sp-docs-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(14,203,129,.04);
  border: 1px solid rgba(14,203,129,.1);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.sp-docs-note svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   Learning Status Panel (.ls-*)
   Compact collapsible panel showing self-learning data coverage.
   ═══════════════════════════════════════════════════════════════ */
.ls-panel {
  background: var(--bg-card, #161a1e);
  border: 1px solid var(--border, #2a2e35);
  border-radius: 8px;
  margin-top: 8px;
}
.ls-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.ls-toggle:hover { color: var(--text-primary); }
.ls-arrow { font-size: 9px; transition: transform 0.2s; }
.ls-body { display: none; padding: 0 14px 12px; }
.ls-body.open { display: block; }

.ls-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 8px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ls-grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 2px 10px;
  font-size: 11px;
  margin-bottom: 6px;
}
.ls-label { color: var(--text-muted); font-weight: 500; }
.ls-val   { color: var(--text-secondary); }
.ls-val strong { color: var(--text-primary); font-weight: 600; }
.ls-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.ls-badge-ok   { background: rgba(14,203,129,0.15); color: var(--green, #0ecb81); }
.ls-badge-warn { background: rgba(243,186,47,0.15); color: #f3ba2f; }
.ls-badge-deg  { background: rgba(246,70,93,0.15);  color: var(--red, #f6465d); }
.ls-badge-ins  { background: rgba(255,255,255,0.06); color: var(--text-muted); }

.ls-jobs-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 2px 10px;
  font-size: 11px;
}
.ls-job-name { color: var(--text-muted); font-family: monospace; font-size: 10px; }
.ls-job-next { color: var(--text-secondary); font-size: 10px; }
.ls-generated {
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
}

/* Learning KPI summary — 3 key numbers */
.ls-kpi-summary {
  display: flex;
  gap: 12px;
  margin: 8px 0;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.ls-kpi-num {
  flex: 1;
  text-align: center;
}
.ls-kpi-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.ls-kpi-lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.ls-kpi-na {
  color: var(--text-muted);
  font-size: 9px;
  font-style: italic;
}
.ls-warn {
  font-size: 11px;
  color: #f3ba2f;
  padding: 4px 0;
}
.ls-detail {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
}
.ws-help-inline {
  font-size: 9px;
  color: var(--text-muted);
  cursor: help;
  opacity: 0.6;
}

/* Learning KPI table — per-symbol metrics */
.ls-kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin-top: 4px;
}
.ls-kpi-table thead th {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: right;
  padding: 4px 6px 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ls-kpi-table thead th:first-child { text-align: left; }
.ls-kpi-table tbody td {
  padding: 3px 6px 3px 0;
  text-align: right;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.02);
}
.ls-kpi-table tbody td:first-child { text-align: left; }
.ls-kpi-sym {
  font-weight: 600;
  color: var(--text-primary);
}
.ls-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 4px 0;
}
/* KPI CI-too-wide warning icon */
.ls-kpi-warn-icon {
  color: #f3ba2f;
  cursor: help;
  font-size: 11px;
}
/* KPI block reasons summary */
.ls-kpi-reasons {
  font-size: 10px;
  color: var(--text-muted);
  padding: 4px 0 2px;
  line-height: 1.5;
}
.ls-kpi-reasons-label {
  color: #f3ba2f;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════
   3-TIER HOME LAYOUT v0.8
   A) Decision Bar — always visible
   B) Action Zone — Signals + Plan Builder + News grid
   C) Diagnostics — collapsed by default
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   TIER A: SYSTEM STATUS — Binance Premium
   ══════════════════════════════════════════════════════════════ */
.tier-decision {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--ws-gap-section);
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, rgba(13,15,20,.95) 0%, rgba(19,21,28,.9) 100%);
  border: 1px solid rgba(42,45,58,.6);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: tierA-fadeUp 600ms cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes tierA-fadeUp {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
/* Empty state */
.ta-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  gap: 8px;
}
.ta-empty-icon {
  font-size: 36px;
  opacity: .3;
  margin-bottom: 4px;
}
.ta-empty-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.ta-empty-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #8B8D97;
  max-width: 320px;
  line-height: 1.4;
}
.ta-empty-btn {
  margin-top: 8px;
  padding: 8px 24px;
  background: linear-gradient(135deg, #D4A843 0%, #B8922E 100%);
  color: #0b0e11;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms;
}
.ta-empty-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212,168,67,.3);
}
/* W1 top gold accent line */
.tier-decision::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
}
/* W1 glassmorphism sub-cards inside tier-decision */
.tier-decision .trading-readiness-strip,
.tier-decision .engine-status-strip,
.tier-decision .data-freshness-strip,
.tier-decision .signal-summary-strip,
.tier-decision .data-sources-strip {
  padding: 10px 12px;
  margin-bottom: 0;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
  transition: border-color 300ms, box-shadow 300ms;
}
.tier-decision .trading-readiness-strip:hover,
.tier-decision .engine-status-strip:hover,
.tier-decision .data-freshness-strip:hover,
.tier-decision .signal-summary-strip:hover,
.tier-decision .data-sources-strip:hover {
  border-color: rgba(212,168,67,.15);
  box-shadow: 0 6px 20px rgba(0,0,0,.2), 0 0 0 1px rgba(212,168,67,.05);
}
.tier-decision .trading-readiness-strip {
  font-size: 11px;
  gap: 8px;
}
.tier-decision .engine-status-strip {
  gap: 6px;
}
.tier-decision .safe-mode-banner {
  padding: 6px 10px;
  margin-bottom: 0;
  font-size: 11px;
}
.tier-decision .analysis-strip {
  padding: 6px 10px;
  margin-bottom: 0;
}
/* W1 stagger entrance with blur */
.tier-decision > *:nth-child(2) { animation-delay: 60ms; }
.tier-decision > *:nth-child(3) { animation-delay: 120ms; }
.tier-decision > *:nth-child(4) { animation-delay: 180ms; }
.tier-decision > *:nth-child(5) { animation-delay: 240ms; }
.tier-decision > *:nth-child(6) { animation-delay: 300ms; }
.tier-decision > *:nth-child(7) { animation-delay: 360ms; }
.tier-decision > *:nth-child(8) { animation-delay: 420ms; }
.tier-decision > *:nth-child(9) { animation-delay: 480ms; }
.tier-decision > *:nth-child(n+2) {
  animation: tierA-fadeUp 500ms cubic-bezier(.22,1,.36,1) both;
}
/* W1 section title */
.tier-decision .mkt-section-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #F0B90B !important;
  letter-spacing: .6px !important;
  -webkit-text-fill-color: #F0B90B !important;
}

/* (home-layout removed — replaced by page-body-layout / page-right-news) */

/* ── Tier B: Action Zone ───────────────────────────── */
.tier-action { margin-bottom: var(--ws-gap-section); }
.tier-b-grid {
  display: block;
}
.tier-b-main {
  display: flex;
  flex-direction: column;
  gap: var(--ws-gap-section);
  min-width: 0;
}

/* ── Tier C: Diagnostics (collapsed) ────────────────── */
.tier-diagnostics {
  margin-bottom: var(--ws-gap-section);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.tier-c-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: left;
  transition: color 0.15s;
}
.tier-c-toggle:hover { color: var(--text-primary); }
.tier-c-arrow {
  font-size: 9px;
  transition: transform 0.2s;
  display: inline-block;
}
.tier-c-arrow.open { transform: rotate(90deg); }
.tier-c-hint {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}
.tier-c-body {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--ws-gap-section);
}

/* ── Compact overrides (reduce clutter) ─────────────── */
.btn-analysis {
  padding: 7px 16px;
  font-size: 12px;
}
.analysis-bar {
  margin-bottom: 10px;
  gap: 8px;
}
.risk-card {
  padding: 10px 12px;
}
.risk-card-value {
  font-size: 18px;
}
.risk-card-label {
  font-size: 10px;
  margin-bottom: 4px;
}
.krit-panel {
  padding: 8px 10px;
}
.krit-panel-title {
  font-size: 9px;
  margin-bottom: 6px;
}
/* unified via tokens — no overrides needed */
.signals-table th {
  padding: 6px 10px;
  font-size: 10px;
}
.signals-table td {
  padding: 7px 10px;
}

/* ── Readiness compact ──────────────────────────────── */
.sp-btn-xs {
  padding: 1px 6px;
  font-size: 9px;
  border-radius: 3px;
}

/* (mkt-news-col moved out of tier-b-grid → see .mkt-news-section above) */

/* ══════════════════════════════════════════════════════════
   SYMBOLS SECTION — v3 (Binance UI / Apple Icons)
   ══════════════════════════════════════════════════════════ */

/* ── Hero banner extras ── */
.sym-hero-banner { position: relative; overflow: hidden; }
.sym-hero-icon { width: 42px !important; height: 42px !important; border-radius: 12px !important; }

@keyframes sym-hero-scan {
  0%   { transform: translateX(-100%) skewX(-12deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(500%) skewX(-12deg); opacity: 0; }
}
.sym-hero-scan {
  position: absolute; top: 0; left: 0; width: 60px; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(240,185,11,.06) 50%, transparent 100%);
  animation: sym-hero-scan 5s ease-in-out infinite;
  pointer-events: none;
}

/* ── How it works grid ── */
.sym-how-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 6px;
}
@media (max-width: 800px) { .sym-how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sym-how-grid { grid-template-columns: 1fr; } }
.sym-how-card {
  background: rgba(20,27,34,.5); border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .2s, transform .2s;
}
.sym-how-card:hover { border-color: rgba(255,255,255,.1); transform: translateY(-1px); }
.sym-how-icon {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sym-how-title { font-size: 12px; font-weight: 700; color: #eaecef; }
.sym-how-desc { font-size: 11px; color: #848e9c; line-height: 1.55; }

/* Reset button */
.sym-reset-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }

/* Card body */
.sym-card-body { display: flex; flex-direction: column; gap: 18px; }

/* ── Progress block ── */
.sym-progress-block { }
.sym-progress-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.sym-progress-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.sym-progress-label svg { color: var(--text-muted); flex-shrink: 0; }
.sym-count-badge {
  font-size: 12px; font-weight: 700; font-family: var(--mono, monospace);
  color: var(--accent, #F0B90B);
  background: rgba(240,185,11,.1); border: 1px solid rgba(240,185,11,.2);
  padding: 2px 10px; border-radius: 6px; letter-spacing: .5px;
}
.sym-progress-track {
  height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden;
}
.sym-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #F0B90B 0%, #0ECB81 100%);
  border-radius: 2px; transition: width .4s cubic-bezier(.4,0,.2,1);
  min-width: 4px;
}
.sym-progress-hint {
  margin-top: 7px; font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.sym-autosave-badge {
  display: inline-flex; align-items: center; gap: 3px;
  color: #0ECB81; font-weight: 600;
}

/* ── Search ── */
.sym-search-wrap { position: relative; }
.sym-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; flex-shrink: 0;
}
.sym-search-input {
  width: 100%; padding: 10px 14px 10px 40px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; color: var(--text-primary); font-size: 13px;
  outline: none; transition: border-color .2s, box-shadow .2s;
  font-family: var(--sans); box-sizing: border-box;
}
.sym-search-input:focus {
  border-color: rgba(240,185,11,.35);
  box-shadow: 0 0 0 3px rgba(240,185,11,.07);
}
.sym-search-input::placeholder { color: var(--text-muted); }

/* ── Presets ── */
.sym-presets-block { }
.sym-presets-header {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
.sym-presets-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-muted);
}
.sym-presets-hint { font-size: 11px; color: rgba(255,255,255,.2); }
.sym-presets-row { display: flex; flex-wrap: wrap; gap: 7px; }
.sym-preset-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: var(--text-muted); cursor: pointer; transition: all .2s;
}
.sym-preset-btn:hover {
  border-color: rgba(240,185,11,.3); color: var(--text-primary);
  background: rgba(240,185,11,.06);
}
.sym-preset-btn.active {
  background: rgba(240,185,11,.12); border-color: rgba(240,185,11,.45);
  color: var(--accent, #F0B90B);
}
.sym-preset-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.sym-preset-count {
  font-size: 10px; font-weight: 700; padding: 0px 5px; border-radius: 4px;
  background: rgba(255,255,255,.08); color: var(--text-muted); line-height: 1.6;
}
.sym-preset-btn.active .sym-preset-count {
  background: rgba(240,185,11,.2); color: var(--accent);
}

/* ── Presets tip ── */
.sym-presets-tip {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 8px;
  font-size: 11px; color: #5c6370; line-height: 1.5;
}
.sym-presets-tip svg { flex-shrink: 0; margin-top: 1px; }

/* ── Grid header ── */
.sym-grid-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.sym-grid-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-muted);
}
.sym-grid-hint { font-size: 11px; color: rgba(255,255,255,.2); }

/* ── Progress v3 ── */
.sym-progress-v3 {
  background: rgba(14,203,129,.03);
  border: 1px solid rgba(14,203,129,.08);
  border-radius: 12px; padding: 16px 18px;
}
.sym-pv3-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.sym-pv3-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; color: #eaecef; letter-spacing: .1px;
}
.sym-pv3-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #0ecb81;
  box-shadow: 0 0 8px rgba(14,203,129,.6);
  animation: sym-dot-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes sym-dot-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 6px rgba(14,203,129,.5); }
  50%       { transform: scale(1.2); box-shadow: 0 0 14px rgba(14,203,129,.9), 0 0 24px rgba(14,203,129,.3); }
}
/* Large counter */
.sym-count-badge {
  font-size: 15px !important; font-weight: 800 !important;
  letter-spacing: .8px !important;
  padding: 4px 14px !important; border-radius: 8px !important;
  color: #F0B90B !important;
  background: rgba(240,185,11,.12) !important;
  border: 1px solid rgba(240,185,11,.28) !important;
  box-shadow: 0 0 12px rgba(240,185,11,.12) !important;
  font-family: var(--mono, monospace) !important;
}
.sym-pv3-counter { display: flex; align-items: center; gap: 8px; }

/* Animated progress bar */
@keyframes sym-fill-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.sym-progress-track-v3 {
  height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.sym-progress-track-v3 .sym-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #F0B90B 0%, #0ecb81 50%, #F0B90B 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  animation: sym-fill-shimmer 3s linear infinite;
  box-shadow: 0 0 8px rgba(14,203,129,.4), 0 0 16px rgba(240,185,11,.15);
  min-width: 6px;
}
.sym-pv3-footer {
  margin-top: 10px; display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--text-muted); flex-wrap: wrap;
}
.sym-pv3-hint { color: #5c6370; }

/* ── Search v3 ── */
.sym-search-wrap { position: relative; }
.sym-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; transition: color .2s;
}
.sym-search-wrap:focus-within .sym-search-icon { color: #F0B90B; }
.sym-search-input {
  width: 100%; padding: 11px 14px 11px 42px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px; color: #eaecef; font-size: 13px; font-weight: 400;
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
  font-family: var(--sans); box-sizing: border-box;
}
.sym-search-input:focus {
  border-color: rgba(240,185,11,.4);
  background: rgba(240,185,11,.02);
  box-shadow: 0 0 0 3px rgba(240,185,11,.08), inset 0 1px 4px rgba(0,0,0,.2);
}
.sym-search-input::placeholder { color: rgba(132,142,156,.6); }

/* ── Presets v3 ── */
.sym-presets-label {
  font-size: 10px !important; font-weight: 800 !important;
  letter-spacing: 1px !important; color: #848e9c !important;
}
.sym-preset-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  color: #848e9c; cursor: pointer;
  transition: all .18s cubic-bezier(.4,0,.2,1);
}
.sym-preset-btn:hover {
  border-color: rgba(240,185,11,.35); color: #eaecef;
  background: rgba(240,185,11,.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.sym-preset-btn.active {
  background: rgba(240,185,11,.12); border-color: rgba(240,185,11,.5);
  color: #F0B90B;
  box-shadow: 0 0 0 1px rgba(240,185,11,.15), 0 4px 16px rgba(240,185,11,.1);
}
.sym-preset-btn.active .sym-preset-count {
  background: rgba(240,185,11,.25) !important; color: #F0B90B !important;
}

/* ── Chips v3 ── */
.sym-chip {
  transition: all .18s cubic-bezier(.4,0,.2,1) !important;
}
.sym-chip:hover:not(.locked) {
  border-color: rgba(240,185,11,.25) !important;
  background: rgba(240,185,11,.04) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
}
.sym-chip.selected {
  background: rgba(240,185,11,.06) !important;
  border-color: rgba(240,185,11,.45) !important;
  box-shadow: 0 0 0 1px rgba(240,185,11,.12), 0 2px 12px rgba(240,185,11,.08) !important;
}
.sym-chip.selected:hover {
  border-color: rgba(240,185,11,.65) !important;
  box-shadow: 0 0 0 1px rgba(240,185,11,.2), 0 4px 16px rgba(240,185,11,.12) !important;
}
/* Chip top accent line only on selected */
.sym-chip::before { opacity: 0; }
.sym-chip.selected::before {
  opacity: 1;
  background: linear-gradient(90deg, #F0B90B 0%, #0ecb81 100%) !important;
  background-size: 100% 100% !important;
  animation: none !important;
  height: 2px !important;
}

/* ── Symbol chips — card grid ── */
.sym-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
.sym-chip {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  cursor: pointer; transition: all .18s; user-select: none;
  overflow: hidden;
}
.sym-chip::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #F0B90B, #0ECB81, #F0B90B);
  background-size: 200% 100%;
  opacity: 0; transition: opacity .2s;
}
.sym-chip:hover { border-color: rgba(255,255,255,.18); transform: translateY(-1px); background: rgba(255,255,255,.05); }
.sym-chip.selected {
  border-color: rgba(240,185,11,.4); background: rgba(240,185,11,.07);
}
.sym-chip.selected::before { opacity: 1; animation: sym-border-flow 3s linear infinite; }
.sym-chip-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: contain;
}
.sym-chip-info { flex: 1; min-width: 0; }
.sym-chip-label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--text-primary); font-family: var(--mono, monospace);
  letter-spacing: .2px;
}
.sym-chip-name {
  display: block; font-size: 10px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.sym-chip-check {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: rgba(240,185,11,.12); border: 1.5px solid rgba(240,185,11,.25);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s; margin-left: auto;
}
.sym-chip.selected .sym-chip-check { opacity: 1; }
.sym-chip.hidden-by-search { display: none; }

/* Locked symbols (beyond tier limit) */
.sym-chip.locked {
  opacity: 0.45;
  filter: grayscale(0.3);
  cursor: not-allowed;
  pointer-events: auto;
  position: relative;
}
.sym-chip.locked:hover { transform: none; border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.03); }
.sym-chip.locked .sym-chip-label { color: #848e9c; }
.sym-chip-lock {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(240,185,11,.08); border: 1.5px solid rgba(240,185,11,.2);
  display: flex; align-items: center; justify-content: center;
  margin-left: auto; color: #F0B90B; flex-shrink: 0;
}
.sym-upgrade-divider {
  grid-column: 1 / -1; display: flex; align-items: center;
  gap: 12px; padding: 8px 0; margin: 4px 0;
}
.sym-upgrade-divider-line { flex: 1; height: 1px; background: rgba(240,185,11,.15); }
.sym-upgrade-divider-content {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #848e9c; white-space: nowrap;
}
.sym-upgrade-divider-content strong { color: #F0B90B; }
.sym-upgrade-link {
  font-size: 11px; font-weight: 600; color: #F0B90B; text-decoration: none;
  padding: 3px 8px; border: 1px solid rgba(240,185,11,.3); border-radius: 5px;
}
.sym-upgrade-link:hover { background: rgba(240,185,11,.08); }
.sym-lock-tooltip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: rgba(20,27,34,.95); border: 1px solid rgba(240,185,11,.3);
  border-radius: 6px; padding: 5px 10px; font-size: 11px; color: #eaecef;
  white-space: nowrap; pointer-events: none; z-index: 100;
}

@keyframes sym-border-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
/* Active symbols strip on Home */
.active-symbols-strip {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px;
  font-size: 11px; color: var(--text-muted);
}
.active-symbols-strip a, .sym-edit-btn { color: var(--accent); text-decoration: none; font-weight: 500; background: none; border: 1px solid var(--accent); border-radius: 3px; padding: 1px 8px; cursor: pointer; font-size: 11px; }
.active-symbols-strip a:hover, .sym-edit-btn:hover { background: rgba(240,185,11,0.1); }
.active-symbols-list { color: var(--text-secondary); font-weight: 500; }
/* Inline symbol picker dropdown */
/* ── Symbol Picker Dropdown (Binance-style) ── */
.sym-picker-dropdown { position: fixed; z-index: 9999; background: #181a20; border: 1px solid #2b2f36; border-radius: 8px; padding: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; min-width: 460px; box-shadow: 0 12px 40px rgba(0,0,0,0.8); }
.sym-picker-dropdown.hidden { display: none !important; }
/* Chip-style symbol items (matches Settings page) */
.sym-pick-chip { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; color: #848e9c; white-space: nowrap; transition: all 0.15s; border: 1px solid #2b2f36; background: #1e2026; }
.sym-pick-chip:hover { background: #2b2f36; color: #eaecef; border-color: #474d57; }
.sym-pick-chip.selected { background: rgba(240,185,11,0.08); color: #f0b90b; border-color: rgba(240,185,11,0.4); }
.sym-pick-check { display: none; font-size: 11px; font-weight: 700; color: #f0b90b; flex-shrink: 0; }
.sym-pick-chip.selected .sym-pick-check { display: inline; }
.sym-pick-icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.sym-pick-label { font-weight: 600; color: #eaecef; font-size: 12px; }
.sym-pick-chip.selected .sym-pick-label { color: #f0b90b; }
.sym-pick-name { font-size: 11px; color: #5e6673; }
.sym-pick-chip.selected .sym-pick-name { color: rgba(240,185,11,0.5); }
.sym-pick-presets { grid-column: 1 / -1; display: flex; gap: 6px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid #2b2f36; }
.sym-preset-chip { background: #2b2f36; color: #848e9c; border: none; border-radius: 4px; padding: 4px 12px; font-size: 11px; font-weight: 500; cursor: pointer; text-transform: uppercase; letter-spacing: 0.3px; transition: all 0.15s; }
.sym-preset-chip:hover { background: #f0b90b; color: #181a20; }
.sym-preset-chip.active { background: #f0b90b; color: #181a20; font-weight: 700; }
.sym-pick-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid #2b2f36; margin-top: 4px; }
.sym-pick-save { background: #f0b90b; color: #181a20; border: none; border-radius: 4px; padding: 6px 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.sym-pick-save:hover { background: #d4a20a; }
.sym-pick-cancel { background: transparent; color: #848e9c; border: 1px solid #2b2f36; border-radius: 4px; padding: 6px 20px; font-size: 12px; cursor: pointer; transition: all 0.15s; }
.sym-pick-cancel:hover { border-color: #848e9c; color: #eaecef; }
.active-symbols-strip { position: relative; }

/* Library diagnostics warning strip */
.library-diagnostics-strip {
  padding: 8px 12px; margin: 4px 10px;
  font-size: 12px; line-height: 1.7;
  color: var(--warning, #f0ad4e); background: rgba(240,173,78,.08);
  border: 1px solid rgba(240,173,78,.2); border-radius: 6px;
}
.library-diagnostics-strip a { color: var(--accent); text-decoration: underline; font-weight: 500; }
.library-diagnostics-strip .btn-link { background: none; border: none; color: var(--accent); text-decoration: underline; font-weight: 500; cursor: pointer; font-size: inherit; padding: 0; }
.news-gate-banner { padding: 6px 10px; background: rgba(255,80,80,.1); border: 1px solid rgba(255,80,80,.3); border-radius: 4px; color: #ff6b6b; margin-bottom: 4px; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════
   DECISION BRIEF PANEL
   ══════════════════════════════════════════════════════════════════════════ */
.decision-brief-panel {
  margin: 0 0 var(--ws-gap-section);
  background: var(--bg-card);
  border: var(--ws-border-section);
  border-radius: var(--ws-radius-section);
  padding: var(--ws-pad-section);
}
.decision-brief-panel.hidden { display: none; }

/* Header row */
.db-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
/* ── Header v2: two-row layout ── */
.db-header-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.db-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.db-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.db-conf-ring {
  position: relative;
  width: 36px; height: 36px;
  flex-shrink: 0;
}
.db-conf-ring svg { display: block; }
.db-conf-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
}
.db-meta-labels { display: flex; flex-direction: column; gap: 2px; }
.db-meta-row { display: flex; align-items: center; gap: 6px; }
.db-meta-lbl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: .4px; }
.db-meta-val-accent { font-size: 13px; font-weight: 700; color: var(--accent); }
.db-meta-stmt { font-size: 10px; color: var(--text-muted); max-width: 220px; line-height: 1.3; }

/* ── Risk meter bar ── */
.db-risk-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.db-risk-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 200px;
}
.db-risk-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.db-risk-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}
.db-rz-bar-normal { background: var(--green); }
.db-rz-bar-elevated { background: var(--accent); }
.db-rz-bar-critical { background: var(--red); }

/* ── Opportunity card ── */
.db-opp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card2);
}
.db-opp-card.db-opp-none {
  opacity: .7;
}
.db-opp-card.db-opp-strong {
  border-color: rgba(14,203,129,0.3);
  background: rgba(14,203,129,0.05);
}
.db-opp-card.db-opp-emerging {
  border-color: rgba(240,185,11,0.3);
  background: rgba(240,185,11,0.05);
}
.db-opp-icon {
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.db-opp-card.db-opp-strong .db-opp-icon { color: var(--green); }
.db-opp-card.db-opp-emerging .db-opp-icon { color: var(--accent); }
.db-opp-content { flex: 1; min-width: 0; }
.db-opp-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  display: block;
}
.db-opp-card .db-opp-text {
  font-size: 11px;
  color: var(--text-primary);
  white-space: normal;
  max-width: none;
  overflow: visible;
}
.db-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}
.db-action-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.db-action-actionable { background: rgba(14,203,129,0.18); color: var(--green); border: 1px solid rgba(14,203,129,0.35); }
.db-action-watch      { background: rgba(240,185,11,0.15); color: var(--accent); border: 1px solid rgba(240,185,11,0.3); }
.db-action-hold       { background: rgba(132,142,156,0.15); color: var(--text-secondary); border: 1px solid rgba(132,142,156,0.25); }
.db-action-blocked    { background: rgba(246,70,93,0.15); color: var(--red); border: 1px solid rgba(246,70,93,0.3); }

.db-rec-action {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}
.db-direction {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
}
.db-dir-long  { background: rgba(14,203,129,0.12); color: var(--green); }
.db-dir-short { background: rgba(246,70,93,0.12);  color: var(--red); }
.db-dir-neutral, .db-dir-hold { background: rgba(132,142,156,0.12); color: var(--text-secondary); }

.db-conviction-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.db-conviction-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.db-conviction-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.db-conf-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.db-conf-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.db-conf-stmt {
  font-size: 10px;
  color: var(--text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Advice cards row */
.db-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.db-advice-card {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card2);
}
.db-advice-hd {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.db-advice-now .db-advice-hd  { color: var(--green); }
.db-advice-wait .db-advice-hd { color: var(--accent); }
.db-advice-not .db-advice-hd  { color: var(--red); }
.db-advice-now  { border-left: 3px solid var(--green); }
.db-advice-wait { border-left: 3px solid var(--accent); }
.db-advice-not  { border-left: 3px solid var(--red); }
.db-advice-body {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
}

/* Factors row */
.db-factors-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.db-factors-hd {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.db-factors-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.db-factor-item {
  font-size: 12px;
  padding: 3px 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-primary);
}
.db-factor-check { color: var(--green); font-weight: 700; flex-shrink: 0; }
.db-factor-x     { color: var(--red); font-weight: 700; flex-shrink: 0; }

/* Bottom row: risk + opportunity */
.db-bottom-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.db-risk-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.db-risk-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}
.db-risk-score {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.db-risk-max { font-size: 10px; color: var(--text-muted); }
.db-risk-zone {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}
.db-rz-critical { background: rgba(246,70,93,0.15); color: var(--red); }
.db-rz-elevated { background: rgba(46,134,255,0.15); color: var(--blue); }
.db-rz-normal { background: rgba(240,185,11,0.12); color: var(--accent); }
.db-risk-delta { font-size: 11px; color: var(--text-muted); }
.db-threats {
  font-size: 10px;
  color: var(--orange);
  cursor: help;
}
.db-abstain {
  font-size: 10px;
  color: var(--red);
  cursor: help;
}

/* Opportunity summary */
.db-opp-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-left: auto;
}
.db-opp-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(240,185,11,0.12);
  color: var(--accent);
  border: 1px solid rgba(240,185,11,0.25);
}
.db-opp-text {
  color: var(--text-secondary);
  font-size: 11px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-opp-confirms {
  font-size: 10px;
  color: var(--green);
  cursor: help;
}
.db-opp-invalidates {
  font-size: 10px;
  color: var(--orange);
  cursor: help;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIGNAL BRIEF (inside ML cards)
   ══════════════════════════════════════════════════════════════════════════ */
.db-signal-brief {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 6px !important;
}
.db-sb-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}
.db-opp-strong   { background: rgba(14,203,129,0.15); color: var(--green); }
.db-opp-emerging { background: rgba(240,185,11,0.12); color: var(--accent); }
.db-opp-none     { background: rgba(132,142,156,0.1);  color: var(--text-muted); }

.db-sb-bias, .db-sb-trad {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(132,142,156,0.08);
}
.db-sb-expl {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.db-sb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 10px;
}
.db-sb-list-hd {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
}
.db-sb-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
}
.db-sb-chip-confirm  { background: rgba(14,203,129,0.1); color: var(--green); }
.db-sb-chip-invalid  { background: rgba(255,140,0,0.1); color: var(--orange); }
.db-sb-chip-degraded { background: rgba(246,70,93,0.1); color: var(--red); }

/* ══════════════════════════════════════════════════════════════════════════
   MICROSTRUCTURE ROW (inside ML cards)
   ══════════════════════════════════════════════════════════════════════════ */
.db-micro-state {
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}
.db-micro-healthy  { background: rgba(14,203,129,0.12); color: var(--green); }
.db-micro-stressed { background: rgba(240,185,11,0.12); color: var(--accent); }
.db-micro-illiquid { background: rgba(246,70,93,0.12); color: var(--red); }
.db-micro-unknown  { background: rgba(132,142,156,0.1); color: var(--text-muted); }

.db-micro-metric {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   SCENARIO PROBABILITY BARS (compact strip in Tier A)
   ══════════════════════════════════════════════════════════════════════════ */
.scen-bar-track {
  display: inline-block;
  width: 40px;
  height: 4px;
  background: rgba(132,142,156,0.15);
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
  overflow: hidden;
}
.scen-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.scen-bar-bull { background: var(--green); }
.scen-bar-bear { background: var(--red); }
.scen-bar-neu  { background: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE: Decision Brief
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .db-cards-row { grid-template-columns: 1fr; }
  .db-factors-row { grid-template-columns: 1fr; }
  .db-bottom-row { flex-direction: column; align-items: flex-start; }
  .db-opp-summary { margin-left: 0; }
  .db-header { flex-wrap: wrap; }
  .db-conviction-wrap { margin-left: 0; }
  .mb-strip { flex-direction: column; gap: 4px; }
  .db-scen-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1. MARKET BRIEF PANEL — compact horizontal strip
   ══════════════════════════════════════════════════════════════════════════ */
.market-brief-panel {
  margin: 0 0 var(--ws-gap-section);
  background: linear-gradient(135deg, rgba(13,15,20,.95) 0%, rgba(19,21,28,.9) 100%);
  border: 1px solid rgba(42,45,58,.6);
  border-radius: 14px;
  padding: 14px 16px 12px;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  animation: tierA-fadeUp 600ms cubic-bezier(.22,1,.36,1) forwards;
}
.market-brief-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
}
.market-brief-panel .mkt-section-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #F0B90B !important;
  letter-spacing: .6px !important;
  -webkit-text-fill-color: #F0B90B !important;
}
.market-brief-panel.hidden { display: none; }
.mb-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
}
.mb-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 120px;
  padding: 10px 14px;
  position: relative;
  transition: background .2s;
}
.mb-item:hover {
  background: rgba(255,255,255,.02);
}
/* Color-coded top accent per section */
.mb-item:nth-child(1) { border-top: 2px solid rgba(246,70,93,.5); } /* Regime - red */
.mb-item:nth-child(3) { border-top: 2px solid rgba(234,179,8,.5); } /* Risk - gold */
.mb-item:nth-child(5) { border-top: 2px solid rgba(34,197,94,.5); } /* Opportunities - green */
.mb-item:nth-child(7) { border-top: 2px solid rgba(100,149,237,.5); } /* Position - blue */
.mb-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
/* Color-coded labels */
.mb-item:nth-child(1) .mb-label { color: rgba(246,70,93,.7); }
.mb-item:nth-child(3) .mb-label { color: rgba(234,179,8,.7); }
.mb-item:nth-child(5) .mb-label { color: rgba(34,197,94,.7); }
.mb-item:nth-child(7) .mb-label { color: rgba(100,149,237,.7); }
.mb-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
.mb-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. DECISION DRIFT PANEL
   ══════════════════════════════════════════════════════════════════════════ */
.decision-drift-panel {
  margin: 0 0 var(--ws-gap-section);
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%);
  border: 1px solid rgba(240,185,11,.12);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 1px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.03);
}
.decision-drift-panel.hidden { display: none; }
/* Legacy drift styles (kept for compat) */
.drift-header { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.drift-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary); }

/* ── Decision Drift v3 — Binance-style ── */
.dd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.dd-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.dd-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #F0B90B;
  text-shadow: 0 0 8px rgba(240,185,11,.08);
}
.dd-net {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  letter-spacing: .2px;
}
.dd-net-up  {
  background: linear-gradient(135deg, rgba(14,203,129,.18), rgba(14,203,129,.08));
  color: var(--green); border-color: rgba(14,203,129,.2);
  box-shadow: 0 0 8px rgba(14,203,129,.12);
}
.dd-net-dn  {
  background: linear-gradient(135deg, rgba(246,70,93,.18), rgba(246,70,93,.08));
  color: var(--red); border-color: rgba(246,70,93,.2);
  box-shadow: 0 0 8px rgba(246,70,93,.12);
}
.dd-net-flat {
  background: rgba(132,142,156,.08);
  color: var(--text-muted); border-color: rgba(132,142,156,.1);
}
.dd-regime-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(246,70,93,.15);
  color: var(--red);
  border: 1px solid rgba(246,70,93,.3);
  animation: dd-pulse 2s ease-in-out infinite;
}
@keyframes dd-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .7; }
}

/* ── Gauges ── */
.dd-gauges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.dd-gauge {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dd-gauge-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-muted);
  min-width: 70px;
}
.dd-gauge-bar {
  flex: 1;
}
.dd-gauge-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.03);
}
.dd-gauge-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.dd-fill-up  {
  background: linear-gradient(90deg, rgba(14,203,129,.2), var(--green));
  box-shadow: 0 0 10px rgba(14,203,129,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.dd-fill-dn  {
  background: linear-gradient(90deg, rgba(246,70,93,.2), var(--red));
  box-shadow: 0 0 10px rgba(246,70,93,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.dd-fill-flat {
  background: linear-gradient(90deg, rgba(132,142,156,.15), rgba(132,142,156,.4));
}
.dd-gauge-center {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255,255,255,.12);
}
.dd-gauge-val {
  font-size: 12px;
  font-weight: 700;
  min-width: 44px;
  text-align: right;
  letter-spacing: -.2px;
}
.dd-val-up  { color: var(--green); text-shadow: 0 0 8px rgba(14,203,129,.3); }
.dd-val-dn  { color: var(--red); text-shadow: 0 0 8px rgba(246,70,93,.3); }
.dd-val-flat { color: var(--text-muted); }

/* ── Changes list ── */
.dd-changes {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.dd-changes-hd {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.dd-change {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 3px 0;
}
.dd-change-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 5px;
}
.dd-change-up .dd-change-dot  { background: var(--green); box-shadow: 0 0 6px rgba(14,203,129,.5), 0 0 12px rgba(14,203,129,.15); }
.dd-change-dn .dd-change-dot  { background: var(--red); box-shadow: 0 0 6px rgba(246,70,93,.5), 0 0 12px rgba(246,70,93,.15); }
.dd-change-chg .dd-change-dot { background: var(--accent); box-shadow: 0 0 6px rgba(240,185,11,.4), 0 0 12px rgba(240,185,11,.12); }
.dd-sym-add { color: var(--green); font-weight: 600; }
.dd-sym-rm  { color: var(--red); font-weight: 600; opacity: .8; }

.dd-footer {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.04);
  opacity: .65;
}

/* ── Decision Drift: Compact (stable) mode ── */
.dd-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
}

/* Left: pulsing green dot + "Conditions stable" */
.dd-compact-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dd-compact-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(14,203,129,.5), 0 0 12px rgba(14,203,129,.2);
  animation: dd-compact-breathe 2.5s ease-in-out infinite;
}
@keyframes dd-compact-breathe {
  0%,100% { box-shadow: 0 0 6px rgba(14,203,129,.5), 0 0 12px rgba(14,203,129,.2); }
  50% { box-shadow: 0 0 8px rgba(14,203,129,.7), 0 0 18px rgba(14,203,129,.35); }
}
.dd-compact-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .2px;
}

/* Right: metric rings */
.dd-compact-metrics {
  display: flex;
  align-items: center;
  gap: 18px;
}
.dd-compact-metric {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dd-ring {
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}
.dd-ring circle:last-child {
  transition: stroke-dasharray .6s ease;
}
.dd-compact-metric-inner {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dd-compact-metric-val {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.2px;
}
.dd-compact-metric-lbl {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. ATTENTION & CROWDING — sub-values in engine chip
   ══════════════════════════════════════════════════════════════════════════ */
.ac-sub {
  font-size: 9px;
  color: var(--text-muted);
  margin-left: 4px;
}
.ac-trend-yes { color: var(--green); }
.ac-trend-no  { color: var(--red); }

/* ══════════════════════════════════════════════════════════════════════════
   4. DECISION BRIEF SCENARIOS ENHANCEMENT
   ══════════════════════════════════════════════════════════════════════════ */
.db-scenarios-ext {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.db-ext-hd {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.db-scen-hint {
  font-size: 9px;
  color: rgba(255,255,255,.30);
  margin-bottom: 8px;
  line-height: 1.3;
}
.db-scen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.db-scen-card {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
}
.db-scen-primary { border-left: 3px solid var(--green); }
.db-scen-alt     { border-left: 3px solid var(--accent); }
.db-scen-notrade { border-left: 3px solid var(--red); }
.db-scen-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-scen-type {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
}
.db-scen-bullish { background: rgba(14,203,129,0.12); color: var(--green); }
.db-scen-bearish { background: rgba(246,70,93,0.12); color: var(--red); }
.db-scen-neutral { background: rgba(132,142,156,0.1); color: var(--text-muted); }
.db-scen-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-left: auto;
}
.db-scen-desc {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.db-scen-drivers, .db-scen-triggers {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}
.db-scen-driver, .db-scen-trigger {
  display: inline-block;
  padding: 1px 5px;
  margin: 1px 2px;
  background: rgba(132,142,156,0.08);
  border-radius: 2px;
  font-size: 10px;
  color: var(--text-secondary);
}
.db-scen-invalid {
  font-size: 10px;
  color: var(--orange);
  margin-top: 4px;
}
.db-scen-guidance {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-style: italic;
}

/* Guardrails */
.db-guardrails-ext {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.db-ext-sub-hd {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.db-guard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.db-guard-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  background: rgba(132,142,156,0.10);
  color: #b7bdc6;
  border: 1px solid rgba(132,142,156,0.20);
  cursor: help;
}
.db-guard-chip.db-guard-red {
  background: rgba(246,70,93,0.10);
  color: var(--red);
  border-color: rgba(246,70,93,0.20);
}
.db-guard-chip.db-guard-yellow {
  background: rgba(240,185,11,0.10);
  color: var(--gold);
  border-color: rgba(240,185,11,0.20);
}

/* Risk lines */
.db-risks-ext {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.db-risk-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
  font-size: 11px;
}
.db-risk-line-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 80px;
  flex-shrink: 0;
}
.db-risk-line-val {
  color: var(--text-secondary);
}
.db-risk-line-warn {
  color: var(--orange);
}

/* ── System Health Panel ──────────────────────── */
.db-health-panel {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(30,35,41,0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.db-health-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.db-health-summary {
  font-size: 9px;
  color: rgba(255,255,255,.30);
  margin-bottom: 10px;
  line-height: 1.3;
}
.db-health-row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.db-health-row:last-child { border-bottom: none; padding-bottom: 0; }
.db-health-row:first-of-type { padding-top: 0; }
.db-health-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  font-weight: 700;
}
.db-health-icon-green { background: rgba(14,203,129,0.1); color: var(--green); }
.db-health-icon-amber { background: rgba(240,185,11,0.1); color: var(--accent); }
.db-health-icon-red { background: rgba(246,70,93,0.1); color: var(--red); }
.db-health-content { flex: 1; min-width: 0; }
.db-health-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.db-health-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.db-health-status {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 1px 6px;
  border-radius: 3px;
}
.db-health-status-green { background: rgba(14,203,129,0.1); color: var(--green); }
.db-health-status-amber { background: rgba(240,185,11,0.1); color: var(--accent); }
.db-health-status-red { background: rgba(246,70,93,0.1); color: var(--red); }
.db-health-detail {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* KPI progress bar (reused) */
.db-kpi-progress {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.db-kpi-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #fcd535);
  border-radius: 2px;
  transition: width .5s ease;
  min-width: 2px;
}
/* Per-symbol details — per-crypto brand colors via inline style */
.db-health-sym-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 0;
}
.db-health-sym {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  padding: 3px 0;
}
.db-health-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  /* inline style overrides with brand color + glow */
}
.db-health-dot-ok { background: var(--green); }
.db-health-dot-warn { background: var(--accent); }
.db-health-dot-nodata { background: var(--text-muted); opacity: .4; }
.db-health-sym-name {
  font-weight: 700;
  color: var(--text-primary);
  min-width: 36px;
  font-size: 11px;
  font-family: var(--mono, monospace);
  letter-spacing: .3px;
  /* inline style overrides with brand color */
}
.db-health-sym-detail {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.4;
}
.db-health-hint {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.4;
  opacity: .65;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* Stale symbols warning banner */
.db-health-stale-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(234,179,8,.08);
  border: 1px solid rgba(234,179,8,.25);
  border-radius: 6px;
  font-size: 11px;
  color: #eab308;
  line-height: 1.4;
}
.db-health-stale-icon {
  font-size: 14px;
  flex-shrink: 0;
}

/* Stale symbols notice — banner at top of Decision Brief when symbols mismatch */
.db-stale-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(234,179,8,.06);
  border: 1px solid rgba(234,179,8,.2);
  border-radius: 8px;
}
.db-stale-notice-icon {
  font-size: 18px;
  color: var(--accent, #eab308);
  flex-shrink: 0;
}
.db-stale-notice-text {
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
  line-height: 1.5;
}
.db-stale-notice-text b {
  color: var(--text-primary, #e5e7eb);
}

/* ══════════════════════════════════════════════════════════════════════════
   5. EVENT INTELLIGENCE — alert card
   ══════════════════════════════════════════════════════════════════════════ */
.event-intelligence-panel {
  margin: 0 0 var(--ws-gap-section);
}
.event-intelligence-panel.hidden { display: none; }
.ei-card {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 14px 16px;
  border-left: 3px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
  position: relative;
  overflow: hidden;
}
/* Subtle top accent glow */
.ei-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(240,185,11,.3) 50%, transparent 100%);
}
.ei-border-red    { border-left-color: var(--red); }
.ei-border-red::before { background: linear-gradient(90deg, transparent 0%, rgba(246,70,93,.4) 50%, transparent 100%); }
.ei-border-yellow { border-left-color: var(--accent); }
.ei-border-muted  { border-left-color: rgba(132,142,156,.4); }
.ei-border-muted::before { background: linear-gradient(90deg, transparent 0%, rgba(132,142,156,.2) 50%, transparent 100%); }
.ei-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ei-header-icon {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(240,185,11,.3));
}
.ei-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(240,185,11,.15);
}
.ei-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.ei-type {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(132,142,156,0.1);
  color: var(--text-primary);
}
.ei-surprise {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}
.ei-surprise-high, .ei-surprise-extreme {
  background: rgba(246,70,93,0.12);
  color: var(--red);
}
.ei-surprise-moderate {
  background: rgba(240,185,11,0.12);
  color: var(--accent);
}
.ei-surprise-low, .ei-surprise-unknown {
  background: rgba(132,142,156,0.1);
  color: var(--text-muted);
}
.ei-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ei-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.ei-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 70px;
}
.ei-val {
  color: var(--text-secondary);
}
.ei-guidance {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
  font-style: italic;
}
/* §3.9.7 Event Intelligence — full panel */
.ei-type-badge {
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(246,70,93,.15), rgba(246,70,93,.08));
  color: var(--red); text-transform: uppercase; letter-spacing: .5px;
  border: 1px solid rgba(246,70,93,.2);
  box-shadow: 0 0 8px rgba(246,70,93,.1);
}
/* Type-specific badge colors */
.ei-type-badge[data-type="economic"],
.ei-card[data-event-type="economic"] .ei-type-badge {
  background: linear-gradient(135deg, rgba(14,203,129,.15), rgba(14,203,129,.08));
  color: var(--green); border-color: rgba(14,203,129,.2);
  box-shadow: 0 0 8px rgba(14,203,129,.1);
}
.ei-ts {
  font-size: 10px; color: var(--text-muted); margin-left: auto;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}
.ei-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; padding: 3px 10px;
  border-radius: 12px; text-transform: capitalize;
  border: 1px solid transparent;
  transition: all .2s ease;
}
.ei-badge--ok {
  background: linear-gradient(135deg, rgba(14,203,129,.15), rgba(14,203,129,.06));
  color: var(--green); border-color: rgba(14,203,129,.15);
  box-shadow: 0 0 6px rgba(14,203,129,.08);
}
.ei-badge--warn {
  background: linear-gradient(135deg, rgba(240,185,11,.15), rgba(240,185,11,.06));
  color: var(--accent); border-color: rgba(240,185,11,.15);
  box-shadow: 0 0 6px rgba(240,185,11,.08);
}
.ei-badge--danger {
  background: linear-gradient(135deg, rgba(246,70,93,.15), rgba(246,70,93,.06));
  color: var(--red); border-color: rgba(246,70,93,.15);
  box-shadow: 0 0 6px rgba(246,70,93,.08);
}
.ei-badge--unknown {
  background: rgba(132,142,156,.06);
  color: var(--text-muted); border-color: rgba(132,142,156,.1);
}

.ei-expect-actual {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border-radius: 8px; background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.03);
  margin: 8px 0;
}
.ei-ea-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 4px 8px; border-radius: 6px;
  background: rgba(255,255,255,.02);
}
.ei-ea-lbl { font-size: 8px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); font-weight: 700; }
.ei-ea-val { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.ei-ea-arrow { font-size: 16px; color: var(--accent); opacity: .6; }

.ei-digestion {
  margin: 10px 0; padding: 0;
}
.ei-dig-pipeline {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.ei-dig-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.04);
  flex: 1;
  min-width: 0;
  transition: all .25s ease;
}
.ei-dig-stage:hover { border-color: rgba(240,185,11,.15); }
.ei-dig-stage-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
  background: rgba(132,142,156,.1);
  color: var(--text-muted);
  border: 1.5px solid rgba(132,142,156,.2);
}
.ei-dig--ok .ei-dig-stage-icon {
  background: rgba(14,203,129,.12); color: var(--green);
  border-color: rgba(14,203,129,.3);
  box-shadow: 0 0 8px rgba(14,203,129,.2);
}
.ei-dig--danger .ei-dig-stage-icon {
  background: rgba(246,70,93,.12); color: var(--red);
  border-color: rgba(246,70,93,.3);
  box-shadow: 0 0 8px rgba(246,70,93,.2);
}
.ei-dig--warn .ei-dig-stage-icon {
  background: rgba(240,185,11,.12); color: var(--accent);
  border-color: rgba(240,185,11,.3);
  box-shadow: 0 0 8px rgba(240,185,11,.15);
}
.ei-dig--pending .ei-dig-stage-icon {
  background: rgba(132,142,156,.06);
  border-style: dashed;
}
.ei-dig-stage-info {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.ei-dig-connector {
  display: flex; align-items: center; justify-content: center;
  width: 20px; flex-shrink: 0;
  color: rgba(240,185,11,.4); font-size: 18px; font-weight: 700;
  text-shadow: 0 0 6px rgba(240,185,11,.15);
}
.ei-dig-lbl {
  font-size: 8px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted); font-weight: 700; white-space: nowrap;
}
.ei-dig-extra {
  margin-top: 8px; display: flex; align-items: center; gap: 8px;
}

.ei-scores-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; padding: 10px;
  background: rgba(0,0,0,.2); border-radius: 8px;
  border: 1px solid rgba(255,255,255,.03);
}
.ei-score {
  display: flex; flex-direction: column; gap: 2px; min-width: 90px;
  padding: 4px 8px; border-radius: 6px;
  background: rgba(255,255,255,.02);
}
.ei-score-lbl { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.ei-score-val { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: -.3px; }

.ei-windows {
  margin: 10px 0; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.ei-win-hd {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.ei-win-hd::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), transparent);
}
.ei-win-count { font-weight: 500; font-size: 10px; color: var(--text-muted); opacity: .6; }

/* Timeline layout — nodes + connecting lines */
.ei-win-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 10px;
  padding: 4px 0;
}
.ei-wt-node {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex: 0 0 auto; min-width: 60px;
}
.ei-wt-dot {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  border: 2px solid rgba(132,142,156,.2);
  background: rgba(132,142,156,.06);
  color: var(--text-muted);
  transition: all .3s ease;
}
.ei-wt--active .ei-wt-dot {
  background: rgba(14,203,129,.12); color: var(--green);
  border-color: rgba(14,203,129,.4);
  box-shadow: 0 0 10px rgba(14,203,129,.3), 0 0 20px rgba(14,203,129,.1);
}
.ei-wt--waiting .ei-wt-dot {
  border-style: dashed; opacity: .55;
  background: rgba(132,142,156,.08);
}
.ei-wt-name {
  font-size: 9px; font-weight: 600; text-transform: capitalize;
  color: var(--text-secondary); white-space: nowrap; text-align: center;
}
.ei-wt--waiting .ei-wt-name { color: var(--text-muted); opacity: .55; }
.ei-wt-hours {
  font-size: 8px; color: var(--text-muted); opacity: .45;
  font-variant-numeric: tabular-nums;
}
.ei-wt-line-wrap {
  display: flex; align-items: center;
  flex: 1; padding-top: 12px; /* align with center of dot */
  min-width: 12px;
}
.ei-wt-line {
  width: 100%; height: 2px;
  background: rgba(132,142,156,.18);
  border-radius: 1px;
}
.ei-wt-line--done {
  background: linear-gradient(90deg, var(--green), rgba(14,203,129,.3));
  box-shadow: 0 0 4px rgba(14,203,129,.25);
  height: 2.5px;
}

/* Progress bar under timeline */
.ei-win-progress {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  margin-top: 6px;
}
.ei-win-progress-bar {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--green), rgba(14,203,129,.4));
  box-shadow: 0 0 6px rgba(14,203,129,.3);
  transition: width .5s ease;
}

/* Keep old win-grid as fallback */
.ei-win-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ei-win-item {
  display: flex; gap: 6px; align-items: center; font-size: 10px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(0,0,0,.15); color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,.03);
}
.ei-win-item.ei-win-na { opacity: 0.4; }
.ei-win-name { text-transform: capitalize; font-weight: 600; color: var(--text-secondary); }
.ei-win-hours { color: var(--text-muted); font-size: 9px; opacity: .6; }
.ei-win-status { font-weight: 700; font-size: 11px; }

.ei-notes {
  margin-top: 10px; border-top: 1px solid rgba(255,255,255,.04);
  padding-top: 10px;
}
.ei-notes-header {
  display: flex; align-items: center; gap: 8px;
}
.ei-evidence-lbl {
  font-size: 9px; color: var(--text-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.ei-evq-badge {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  text-transform: capitalize; letter-spacing: .3px;
}
.ei-evq--strong {
  background: linear-gradient(135deg, rgba(14,203,129,.15), rgba(14,203,129,.06));
  color: var(--green); border: 1px solid rgba(14,203,129,.2);
}
.ei-evq--moderate {
  background: linear-gradient(135deg, rgba(240,185,11,.12), rgba(240,185,11,.05));
  color: var(--accent); border: 1px solid rgba(240,185,11,.15);
}
.ei-evq--weak {
  background: rgba(132,142,156,.06);
  color: var(--text-muted); border: 1px solid rgba(132,142,156,.1);
}
.ei-notes-toggle {
  font-size: 10px; color: var(--accent); background: none; border: none; cursor: pointer;
  margin-left: auto; font-weight: 600; letter-spacing: .2px;
  padding: 2px 8px; border-radius: 6px;
  transition: all .2s ease;
}
.ei-notes-toggle:hover {
  color: #fcd535; background: rgba(240,185,11,.08);
  text-shadow: 0 0 8px rgba(240,185,11,.3);
}
.ei-notes-body {
  font-size: 11px; color: var(--text-secondary); line-height: 1.6; margin-top: 8px;
  padding: 10px 12px; background: rgba(0,0,0,.2); border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
  border-left: 2px solid rgba(240,185,11,.15);
}

/* §3.9.4: Forward Guidance Policy Dimensions */
.ei-guidance-dims {
  margin-top: 10px; padding: 10px 12px;
  background: linear-gradient(135deg, rgba(240,185,11,.04), rgba(0,0,0,.15));
  border-radius: 8px;
  border-left: 2px solid var(--accent);
  border: 1px solid rgba(240,185,11,.1);
  border-left-width: 3px;
}
.ei-dim-header {
  font-size: 10px; font-weight: 700; color: var(--accent); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .6px;
  text-shadow: 0 0 10px rgba(240,185,11,.15);
}
.ei-dim-grid {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;
}
.ei-dim-card {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: rgba(0,0,0,.2); border-radius: 6px;
  font-size: 11px; border: 1px solid rgba(255,255,255,.03);
}
.ei-dim-name {
  color: var(--text-muted); text-transform: capitalize; min-width: 60px; font-weight: 500;
}
.ei-dim-score {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
}
.ei-conflict-flags {
  margin-top: 6px; padding: 4px 8px; background: rgba(255,82,82,0.08);
  border: 1px solid rgba(255,82,82,0.2); border-radius: 4px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ei-conflict-icon { font-size: 12px; }
.ei-conflict-text { font-size: 11px; color: #ff8a80; }
.ei-row {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  padding: 2px 0;
}
.ei-lbl { color: var(--text-muted); min-width: 100px; }

/* ══════════════════════════════════════════════════════════════════════════
   6. RISK SUMMARY ENHANCEMENT
   ══════════════════════════════════════════════════════════════════════════ */
.risk-summary-ext {
  grid-column: 1 / -1;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.rse-section {
  margin-bottom: 6px;
}
.rse-section:last-child { margin-bottom: 0; }
.rse-hd {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.rse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.rse-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
}
.rse-chip-threat  { background: rgba(246,70,93,0.1); color: var(--red); }
.rse-chip-abstain { background: rgba(240,185,11,0.1); color: var(--accent); }
.rse-chip-flag    { background: rgba(132,142,156,0.08); color: var(--text-muted); }

/* Extra risk bars */
.krit-fill-red   { background: var(--red); }
.krit-fill-green { background: var(--green); }

/* ══════════════════════════════════════════════════════════════════════════
   7. FACTORS DETAILS EXPANSION
   ══════════════════════════════════════════════════════════════════════════ */
.factor-detail-panel {
  padding: 8px 12px;
  margin: 4px 0;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 4px;
  animation: fadeSlide 0.15s ease;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fd-sub-hd {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  margin: 4px 0 2px;
}
.fd-item {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
  font-size: 11px;
}
.fd-key { color: var(--text-muted); }
.fd-val { color: var(--text-secondary); font-weight: 500; }
.factor-bar-row { transition: background 0.1s; }
.factor-bar-row:hover { background: rgba(240,185,11,0.04); }

/* ══════════════════════════════════════════════════════════════════════════
   8. CONFIDENCE TRUTH FULL DETAIL
   ══════════════════════════════════════════════════════════════════════════ */
.ct-detail-panel {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  animation: fadeSlide 0.15s ease;
  width: 100%;
}
.ct-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  font-size: 11px;
}
.ct-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 60px;
}
.ct-val { color: var(--text-secondary); }
.ct-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.ct-list-hd {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ct-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
}
.ct-chip-deg   { background: rgba(240,185,11,0.1); color: var(--accent); }
.ct-chip-block { background: rgba(246,70,93,0.1); color: var(--red); }
.ct-notes { margin-top: 6px; }
.ct-note {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  padding: 1px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. MICROSTRUCTURE FULL EXPANSION
   ══════════════════════════════════════════════════════════════════════════ */
.micro-full-ext {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  animation: fadeSlide 0.15s ease;
}
.micro-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}
.micro-full-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.micro-full-lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.micro-full-val {
  font-size: 13px;
  font-weight: 700;
}
.micro-v-low  { color: var(--green); }
.micro-v-mid  { color: var(--accent); }
.micro-v-high { color: var(--red); }
.micro-full-confirm {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.micro-confirm-val { font-weight: 600; }
.micro-confirm-bullish { color: var(--green); }
.micro-confirm-bearish { color: var(--red); }
.micro-confirm-neutral { color: var(--text-secondary); }
.micro-full-notes { margin-top: 4px; }
.micro-full-note {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════════
   10. ANALOG EVIDENCE ROW
   ══════════════════════════════════════════════════════════════════════════ */
.analog-evidence-row {
  flex-wrap: wrap;
}
.ae-meta {
  font-size: 10px;
  color: var(--text-muted);
}
.ae-best {
  font-size: 10px;
  color: var(--text-secondary);
}
.ae-outcome {
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(132,142,156,0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BINANCE PRO REDESIGN — Comprehensive Market Page Overhaul
   Appended: 2026-03-22
   Scope: Market dashboard only. News/NL classes untouched.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Root refinements ────────────────────────────────────────────────────── */
:root {
  --bg-card: #1e2329;
  --bg-card2: #252930;
  --border: #2b3139;
  --radius: 8px;
  --bg-surface: #181c21;
}

body.page-market {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* ── Navbar — matches landing standard ─────────────────────────────────────── */

/* ── Container — tighter padding ─────────────────────────────────────────── */
body.page-market .container {
  padding: 10px 14px;
}

/* ── Status bar — minimal ────────────────────────────────────────────────── */
.status-bar {
  padding: 5px 10px;
  margin-bottom: var(--ws-gap-section);
  border-radius: 4px;
  background: rgba(30,35,41,0.6);
  border: none;
  font-size: 11px;
  gap: 10px;
}
.status-dot { width: 6px; height: 6px; }

/* ── Analysis bar — compact ──────────────────────────────────────────────── */
.analysis-bar {
  margin-bottom: var(--ws-gap-section);
  gap: 8px;
  padding: 0;
}
.btn-analysis {
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.progress-wrap {
  height: 4px;
  border-radius: 2px;
}
.progress-bar {
  border-radius: 2px;
}
.progress-label {
  font-size: 11px;
}

/* ── Analysis Empty State — cleaner ──────────────────────────────────────── */
.analysis-empty-state {
  padding: 36px 20px;
  background: transparent;
  border: 1px dashed rgba(43,49,57,0.5);
  margin-bottom: var(--ws-gap-section);
}
.analysis-empty-state h3 { font-size: 16px; }
.analysis-empty-state p { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TIER A — Decision Bar: Compact status strips
   ═══════════════════════════════════════════════════════════════════════════ */
.tier-decision {
  gap: 3px;
  margin-bottom: var(--ws-gap-section);
  padding: 6px 0;
  border-bottom: 1px solid rgba(240,185,11,.06);
}

/* Active symbols strip */
.active-symbols-strip {
  padding: 5px 10px;
  font-size: 11px;
  gap: 8px;
}
.active-symbols-list { font-size: 11px; font-weight: 700; color: var(--text-primary); letter-spacing: .3px; }

/* Trading readiness — Binance strip */
.trading-readiness-strip {
  padding: 5px 10px;
  margin-bottom: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 11px;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.readiness-label { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.readiness-badge {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid transparent;
}
.readiness-badge.READY {
  background: linear-gradient(135deg, rgba(14,203,129,.12), rgba(14,203,129,.04));
  border-color: rgba(14,203,129,.15);
}
.readiness-score { font-size: 11px; font-weight: 600; }

/* Engine status chips — compact with glow */
.engine-status-strip {
  padding: 4px 10px;
  margin-bottom: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  flex-wrap: wrap;
}
.eng-strip-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}
.eng-chip {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid transparent;
}
.eng-chip-on { border-color: rgba(14,203,129,.12); }
.eng-chip-off { border-color: rgba(246,70,93,.1); }

/* Safe mode banner — tighter */
.safe-mode-banner {
  padding: 4px 10px;
  margin-bottom: 0;
  font-size: 11px;
  border-radius: 4px;
}

/* Sentiment bar — thinner, cleaner */
.analysis-strip {
  padding: 4px 10px;
  margin-bottom: 0;
  background: transparent;
  border-bottom: 1px solid rgba(43,49,57,0.3);
  border-radius: 0;
  font-size: 11px;
  gap: 10px;
}
.sentiment-bar-track {
  height: 4px;
  border-radius: 2px;
  width: 80px;
}
.astrip-lbl {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.astrip-green, .astrip-red, .astrip-muted { font-size: 10px; }
.astrip-divider { height: 12px; }

/* Scenario pills — more compact */
.scenario-pill {
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARKET BRIEF PANEL — clean horizontal KV strip
   ═══════════════════════════════════════════════════════════════════════════ */
.market-brief-panel {
  margin: 0 0 var(--ws-gap-section);
  padding: 10px 12px;
  background: rgba(22,26,30,.6);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.03);
  position: relative;
}
.market-brief-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.mb-kv-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.mb-kv-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mb-kv-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(240,185,11,.1);
}
.mb-kv-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DECISION BRIEF PANEL — professional advisory layout
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Decision Brief Panel — Premium Redesign ──────────────────────── */
.decision-brief-panel {
  margin: 0 0 var(--ws-gap-section);
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(26,30,35,.98) 50%, rgba(30,34,38,.95) 100%);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 10px 12px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
  position: relative;
  overflow: hidden;
}
/* W1 top gold accent line */
.decision-brief-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.db-header {
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.db-title {
  font-size: 12px;
  letter-spacing: .8px;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(240,185,11,.12);
}
.db-action-badge {
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  border: 1px solid transparent;
}
/* Action badge glow effects */
.db-action-actionable {
  box-shadow: 0 0 12px rgba(14,203,129,.15), inset 0 1px 0 rgba(255,255,255,.05);
}
.db-action-watch {
  box-shadow: 0 0 12px rgba(240,185,11,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.db-action-hold {
  box-shadow: 0 0 8px rgba(132,142,156,.08), inset 0 1px 0 rgba(255,255,255,.03);
}
.db-action-blocked {
  box-shadow: 0 0 12px rgba(246,70,93,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.db-direction {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
}
.db-conviction-val { font-size: 13px; font-weight: 700; }
.db-conf-pct { font-size: 13px; font-weight: 700; }
.db-conf-stmt { font-size: 10px; }

/* Advice cards — glass-morphism with colored tint */
.db-cards-row {
  gap: 8px;
  margin-bottom: 12px;
}
.db-advice-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.04);
  transition: all .25s ease;
  border-left: 3px solid transparent;
}
.db-advice-card:hover {
  border-color: rgba(255,255,255,.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.db-advice-now {
  border-left-color: #0ecb81;
  background: linear-gradient(135deg, rgba(14,203,129,.04) 0%, rgba(0,0,0,.18) 100%);
}
.db-advice-wait {
  border-left-color: #f0b90b;
  background: linear-gradient(135deg, rgba(240,185,11,.03) 0%, rgba(0,0,0,.18) 100%);
}
.db-advice-not {
  border-left-color: #f6465d;
  background: linear-gradient(135deg, rgba(246,70,93,.03) 0%, rgba(0,0,0,.18) 100%);
}
.db-advice-hd {
  font-size: 9px;
  letter-spacing: .8px;
  margin-bottom: 6px;
  font-weight: 700;
}
.db-advice-body {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Factors — with colored backgrounds */
.db-factors-row {
  gap: 10px;
  margin-bottom: 8px;
}
.db-factors-hd {
  font-size: 9px;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.db-factor-item {
  font-size: 11px;
  padding: 3px 0;
  color: var(--text-secondary);
}

/* Bottom row */
.db-bottom-row {
  padding-top: 6px;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DECISION DRIFT, EVENT INTELLIGENCE, ATTENTION/CROWDING panels
   ═══════════════════════════════════════════════════════════════════════════ */
.decision-drift-panel,
.event-intelligence-panel {
  margin: 0 0 var(--ws-gap-section);
  background: #1e2329;
  border: 1px solid rgba(43,49,57,0.5);
  border-radius: 6px;
  padding: 10px 14px;
  position: relative;
  overflow: hidden;
}
.decision-drift-panel::before,
.event-intelligence-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
}
.decision-drift-panel.hidden,
.event-intelligence-panel.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   TIER B — Signals Table: Clean Binance-style
   ═══════════════════════════════════════════════════════════════════════════ */
/* spacing unified via design tokens */

/* ── Signals table — Binance-style ── */
.mkt-signals-section > .card {
  background: linear-gradient(135deg, rgba(22,26,30,.8) 0%, rgba(30,34,38,.7) 100%);
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.02);
}
.signals-table th {
  background: rgba(0,0,0,.25);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(240,185,11,.08);
  letter-spacing: .7px;
  text-transform: uppercase;
}
.signals-table td {
  padding: 10px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  color: var(--text-secondary);
  vertical-align: top;
}
.signals-table tr:last-child td { border-bottom: none; }
/* Branded row — left accent + hover glow */
.signals-table tbody tr {
  position: relative;
  transition: all .2s;
}
.signals-table tbody tr td:first-child {
  border-left: 3px solid var(--brand, transparent);
  padding-left: 10px;
}
.signals-table tr:hover td { background: var(--brand-10, rgba(240,185,11,.02)); }
/* Symbol name in brand color */
.sig-sym-name {
  color: var(--brand, var(--text-primary));
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  text-shadow: 0 0 8px var(--brand-20, transparent);
}

/* Direction badges — glowing pills */
.direction-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid transparent;
}
.direction-badge.LONG {
  background: linear-gradient(135deg, rgba(14,203,129,.15), rgba(14,203,129,.06));
  color: var(--green); border-color: rgba(14,203,129,.2);
  box-shadow: 0 0 6px rgba(14,203,129,.1);
}
.direction-badge.SHORT {
  background: linear-gradient(135deg, rgba(246,70,93,.15), rgba(246,70,93,.06));
  color: var(--red); border-color: rgba(246,70,93,.2);
  box-shadow: 0 0 6px rgba(246,70,93,.1);
}
.direction-badge.HOLD {
  background: linear-gradient(135deg, rgba(240,185,11,.12), rgba(240,185,11,.04));
  color: var(--accent); border-color: rgba(240,185,11,.15);
}
.direction-badge.NEUTRAL {
  background: rgba(132,142,156,.06);
  color: var(--text-muted); border-color: rgba(132,142,156,.1);
}

/* Status badges — color-coded pills */
.status-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  border: 1px solid transparent;
}
.status-badge.ACTIONABLE {
  background: linear-gradient(135deg, rgba(14,203,129,.18), rgba(14,203,129,.06));
  color: var(--green); border-color: rgba(14,203,129,.2);
  box-shadow: 0 0 8px rgba(14,203,129,.12);
}
.status-badge.WATCH {
  background: linear-gradient(135deg, rgba(240,185,11,.15), rgba(240,185,11,.05));
  color: var(--accent); border-color: rgba(240,185,11,.15);
}
.status-badge.HOLD {
  background: rgba(132,142,156,.06);
  color: var(--text-muted); border-color: rgba(132,142,156,.08);
}
.status-badge.BLOCKED {
  background: linear-gradient(135deg, rgba(246,70,93,.15), rgba(246,70,93,.05));
  color: var(--red); border-color: rgba(246,70,93,.15);
}

/* Gate chips — compact with color */
.krit-gate-chip {
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  margin-right: 2px;
  border: 1px solid transparent;
}
.krit-gate-chip.krit-gate-PASS {
  background: rgba(14,203,129,.08); color: var(--green);
  border-color: rgba(14,203,129,.15);
}
.krit-gate-chip.krit-gate-FAIL {
  background: rgba(246,70,93,.08); color: var(--red);
  border-color: rgba(246,70,93,.15);
}
.krit-gate-chip.krit-gate-SKIP {
  background: rgba(132,142,156,.05); color: var(--text-muted);
  border-color: rgba(132,142,156,.08); opacity: .6;
}

/* Zone badges — glow effect */
.zone-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid transparent;
}
.zone-badge.NORMAL {
  background: linear-gradient(135deg, rgba(14,203,129,.1), rgba(14,203,129,.04));
  color: var(--green); border-color: rgba(14,203,129,.15);
}
.zone-badge.ELEVATED {
  background: linear-gradient(135deg, rgba(240,185,11,.12), rgba(240,185,11,.04));
  color: var(--accent); border-color: rgba(240,185,11,.15);
}
.zone-badge.CRITICAL {
  background: linear-gradient(135deg, rgba(246,70,93,.12), rgba(246,70,93,.04));
  color: var(--red); border-color: rgba(246,70,93,.15);
  box-shadow: 0 0 6px rgba(246,70,93,.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ML INTELLIGENCE CARDS — cleaner layout
   ═══════════════════════════════════════════════════════════════════════════ */
/* ml-panel-section — uses main definition */
.ml-panel-sub { font-size: 9px; }

.ml-panel-cards {
  gap: 8px;
  padding-bottom: 6px;
}
.ml-asset-card:hover {
  border-color: rgba(240,185,11,0.3);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.ml-card-hd { margin-bottom: 8px; }
.ml-card-sym { font-size: 14px; }
.ml-chart-btn {
  padding: 2px 8px;
  font-size: 9px;
  border-radius: 3px;
}
/* ml-row-section — uses main definition */
.ml-row-lbl {
  font-size: 9px;
  width: 55px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ml-forecast-row { padding: 5px 0; }
.ml-price-range { font-size: 10px; gap: 4px; }
.ml-price-ci-bar { height: 2px; margin-top: 4px; }
.ml-footer {
  font-size: 8px;
  padding-top: 6px;
  margin-top: 6px;
}

/* Sig direction badge in ML card */
.sig-dir-badge {
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER C — Diagnostics: Consistent card style
   ═══════════════════════════════════════════════════════════════════════════ */
.tier-diagnostics {
  margin-bottom: var(--ws-gap-section);
  background: #1e2329;
  border: 1px solid rgba(43,49,57,0.5);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.tier-diagnostics::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
}
.tier-c-toggle {
  padding: 7px 12px;
  font-size: 10px;
  letter-spacing: 0.8px;
}
.tier-c-hint { font-size: 9px; }
/* tier-c-body — uses main definition */

/* CRITICAL Status Bar — compact Binance-style */
.krit-statusbar {
  padding: 5px 10px;
  margin-bottom: var(--ws-gap-section);
  border-radius: 4px;
  background: #181c21;
  border: none;
  font-size: 11px;
  gap: 6px;
}
.krit-zone-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.krit-sep { font-size: 10px; color: rgba(43,49,57,0.7); }
.krit-lbl { font-size: 10px; font-weight: 500; }
.krit-val { font-size: 11px; font-weight: 600; }
.krit-delta { font-size: 10px; }
.krit-updated { font-size: 9px; }

/* CRITICAL Panels — consistent */
.krit-panels-row { gap: 8px; }
.krit-panel {
  background: #1e2329;
  border: 1px solid rgba(43,49,57,0.5);
  border-radius: 6px;
  padding: 8px 10px;
}
.krit-panel-hd {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(43,49,57,0.3);
}
.krit-panel-title {
  font-size: 9px;
  margin-bottom: 6px;
  letter-spacing: 0.8px;
}

/* Risk driver bars — thinner */
.krit-bar-track {
  height: 3px;
  border: none;
  background: rgba(43,49,57,0.6);
}
.krit-bar-fill { border-radius: 2px; }
.krit-bar-lbl { font-size: 10px; width: 80px; }
.krit-bar-num { font-size: 10px; width: 36px; }
.krit-bars { gap: 5px; }

/* Gate confirmation — compact */
.krit-confirm-pct { font-size: 24px; }
.krit-confirm-sub { font-size: 8px; }
.krit-check-row { font-size: 10px; gap: 5px; }
.krit-check-icon { font-size: 10px; width: 12px; }
.krit-check-detail { font-size: 9px; }

/* Risk cards — compact Binance-style */
.risk-grid { gap: 8px; margin-bottom: 0; }
.risk-card {
  background: #1e2329;
  border: 1px solid rgba(43,49,57,0.5);
  border-radius: 6px;
  padding: 8px 10px;
}
.risk-card-label {
  font-size: 9px;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}
.risk-card-value { font-size: 16px; font-weight: 700; }
.risk-card-sub { font-size: 10px; }

/* Factor bars — compact */
.factor-bar-row { padding: 3px 0; }
.factor-bar-label { font-size: 10px; width: 75px; }
.factor-bar-track { height: 4px; background: rgba(43,49,57,0.6); border-radius: 2px; }
.factor-bar-value { font-size: 10px; width: 24px; }

/* Regime card */
.regime-v2-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.regime-v2-conf { font-size: 10px; }
.regime-v2-bar-wrap { height: 3px; margin-bottom: 6px; }
.regime-v2-driver-chip { font-size: 8px; padding: 1px 5px; border-radius: 3px; }
.regime-v2-drivers-label { font-size: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LIVE MARKET PANEL — tighter Binance look
   ═══════════════════════════════════════════════════════════════════════════ */
.lm-panel {
  background: #181c21;
  border-bottom: 1px solid rgba(43,49,57,0.5);
}
.lm-ctrl-bar {
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(43,49,57,0.4);
}
.lm-title { font-size: 12px; }
.lm-exchange-badge {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 2px;
}
.lm-th {
  padding: 6px 10px;
  font-size: 9px;
  letter-spacing: 0.6px;
  background: #0b0e11;
}
.lm-td { padding: 6px 10px; font-size: 11px; }
.lm-row { border-bottom: 1px solid rgba(43,49,57,0.3); }
.lm-price { font-size: 12px; }

/* Cards view — W1 overrides */
.lm-card-price { font-size: 24px; }
.lm-resize-handle { height: 4px; border-bottom: 1px solid rgba(43,49,57,0.3); }
.lm-resize-grip { width: 28px; height: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORECAST CHART MODAL — subtle refinements
   ═══════════════════════════════════════════════════════════════════════════ */
.forecast-modal {
  background: #181c21;
  border-left: 1px solid rgba(43,49,57,0.5);
}
.forecast-modal-hd {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(43,49,57,0.5);
}
.fmod-title { font-size: 13px; }
.fmod-body { padding: 10px 12px; gap: 8px; }
.fmod-section {
  background: #1e2329;
  border-radius: 6px;
  padding: 8px 10px;
}
.fmod-section-title {
  font-size: 9px;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODEL QUALITY PANEL — compact cards
   ═══════════════════════════════════════════════════════════════════════════ */
.mq-cards-grid { gap: 6px; }
.mq-card {
  background: #1e2329;
  border: 1px solid rgba(43,49,57,0.5);
  border-radius: 6px;
  padding: 6px 10px;
}
.mq-sym { font-size: 12px; }
.mq-status { font-size: 9px; padding: 1px 5px; border-radius: 8px; }
.mq-metric-lbl { font-size: 8px; }
.mq-metric-val { font-size: 11px; }
.mq-footer { font-size: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CALIBRATION DEBUG — Binance-style details
   ═══════════════════════════════════════════════════════════════════════════ */
.calibration-debug { font-size: 11px; }
.cal-debug-details {
  background: #1e2329;
  border: 1px solid rgba(43,49,57,0.5);
  border-radius: 6px;
}
.cal-debug-summary { font-size: 10px; padding: 6px 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SAFETY DISCLAIMER — subtle
   ═══════════════════════════════════════════════════════════════════════════ */
.safety-disclaimer {
  padding: 8px 12px;
  margin-top: var(--ws-gap-section);
  background: rgba(43,49,57,0.2);
  border: none;
  border-radius: 4px;
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — minimal
   ═══════════════════════════════════════════════════════════════════════════ */
.app-footer {
  padding: 10px 16px;
  font-size: 11px;
  color: #5e6673;
  border-top: 1px solid rgba(43,49,57,0.4);
  margin-top: 8px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR — Binance-style thin dark scrollbar
   ═══════════════════════════════════════════════════════════════════════════ */
#market-scroll::-webkit-scrollbar { width: 4px; }
#market-scroll::-webkit-scrollbar-track { background: transparent; }
#market-scroll::-webkit-scrollbar-thumb { background: rgba(43,49,57,0.6); border-radius: 2px; }
#market-scroll::-webkit-scrollbar-thumb:hover { background: rgba(43,49,57,0.9); }

/* ═══════════════════════════════════════════════════════════════════════════
   GENERAL CARD & PANEL OVERRIDES — uniform Binance feel
   ═══════════════════════════════════════════════════════════════════════════ */
.card-header {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(43,49,57,0.4);
}
.card-title {
  font-size: 10px;
  letter-spacing: 0.8px;
}
.card-body { padding: 10px 12px; }

/* Help icons — more subtle */
.ws-help {
  width: 13px;
  height: 13px;
  font-size: 9px;
  opacity: 0.45;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPLANATION TEXT — subtle, compact
   ═══════════════════════════════════════════════════════════════════════════ */
.explanation {
  font-size: 11px;
  padding: 7px 10px;
  border-radius: 4px;
  background: rgba(37,41,48,0.6);
  margin-top: 6px;
  line-height: 1.5;
}

/* Empty state */
.empty-state {
  padding: 20px;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ATTRIBUTION BADGE — cleaner
   ═══════════════════════════════════════════════════════════════════════════ */
.attribution-badge {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(37,41,48,0.6);
  border: 1px solid rgba(43,49,57,0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RUNS HISTORY PANEL — compact
   ═══════════════════════════════════════════════════════════════════════════ */
#runs-history-panel {
  background: #1e2329;
  border: 1px solid rgba(43,49,57,0.5);
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAN BUILDER — within market page context
   ═══════════════════════════════════════════════════════════════════════════ */
.pb-section {
  margin-bottom: var(--ws-gap-section);
  background: #0b0e11;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 4px;
  padding: 10px 12px 8px;
  position: relative;
  overflow: hidden;
}
.pb-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(240,185,11,.3);
}
.pb-card {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid rgba(240,185,11,.08) !important;
  border-radius: 12px !important;
  padding: 12px 16px 10px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03) !important;
  position: relative;
  overflow: hidden;
}
.pb-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(240,185,11,.25) 50%, transparent 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIGNAL BRIEF — Learning Status Panel
   ═══════════════════════════════════════════════════════════════════════════ */
.ls-panel {
  background: #1e2329;
  border: 1px solid rgba(43,49,57,0.5);
  border-radius: 6px;
}
.ls-toggle { font-size: 11px; padding: 8px 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SENTIMENT & SCENARIO DETAIL CARDS — consistent
   ═══════════════════════════════════════════════════════════════════════════ */
.sent-bars { gap: 5px; margin-bottom: 8px; }
.sent-bar-lbl { font-size: 10px; width: 55px; }
.sent-pct { font-size: 10px; width: 30px; }
.sent-count { font-size: 9px; }
.sent-footer { font-size: 9px; padding-top: 6px; }

.scen-list { gap: 8px; }
.scen-name { font-size: 11px; }
.scen-pct { font-size: 12px; }
.scen-desc { font-size: 9px; }
.scen-driver-chip, .scen-trigger-chip { font-size: 8px; padding: 1px 5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LIBRARY DIAGNOSTICS STRIP — cleaner
   ═══════════════════════════════════════════════════════════════════════════ */
.library-diagnostics-strip {
  padding: 6px 10px;
  margin: 2px 0;
  font-size: 11px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RL BADGES — Binance-style compact
   ═══════════════════════════════════════════════════════════════════════════ */
.sig-rl-badge {
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SGD HEALTH — compact badge
   ═══════════════════════════════════════════════════════════════════════════ */
.sgd-health-badge {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES for the Binance redesign
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .db-cards-row { grid-template-columns: 1fr; }
  .db-factors-row { grid-template-columns: 1fr; }
  body.page-market .container { padding: 6px 8px; }
  .tier-c-body { padding: 4px 8px 8px; }
  .krit-statusbar { flex-wrap: wrap; gap: 4px; }
  .ml-asset-card { flex: 0 0 240px; }
}

@media (max-width: 480px) {
  .krit-statusbar { padding: 4px 8px; font-size: 10px; }
  .krit-zone-badge { font-size: 9px; padding: 1px 6px; }
  .ml-asset-card { flex: 0 0 220px; }
  .db-advice-body { font-size: 10px; }
  .lm-ctrl-bar { height: 32px; padding: 0 8px; }
  .lm-title { font-size: 11px; }
}

/* ── NL Tools — Overview Banner ────────────────── */
.nlt-overview {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(240,185,11,.04), rgba(14,203,129,.02));
  border: 1px solid rgba(240,185,11,.1);
  border-radius: 12px;
  margin-bottom: 20px;
  animation: sp-fade-up .4s ease-out both;
}
.nlt-overview-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(240,185,11,.08);
  border: 1px solid rgba(240,185,11,.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nlt-overview-text { flex: 1; }
.nlt-overview-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 4px;
}
.nlt-overview-desc {
  font-size: 12px; color: var(--text-muted); line-height: 1.55;
}

/* ── NL Tools — Card Grid ─────────────────────── */
.nl-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.nlt-card {
  display: flex;
  flex-direction: column;
  padding: 20px 18px 16px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
  animation: sp-fade-up .45s ease-out both;
}
.nlt-card:nth-child(1) { animation-delay: 0s; }
.nlt-card:nth-child(2) { animation-delay: .1s; }
.nlt-card:nth-child(3) { animation-delay: .2s; }
.nlt-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
}
.nlt-card:hover {
  transform: translateY(-3px);
}
.nlt-card--export {
  background: linear-gradient(160deg, rgba(14,203,129,.06) 0%, rgba(14,203,129,.015) 100%);
  border: 1px solid rgba(14,203,129,.12);
}
.nlt-card--export::before { background: linear-gradient(90deg, transparent, #0ecb81, transparent); }
.nlt-card--export:hover {
  border-color: rgba(14,203,129,.35);
  box-shadow: 0 8px 32px rgba(14,203,129,.08);
}
.nlt-card--import {
  background: linear-gradient(160deg, rgba(240,185,11,.06) 0%, rgba(240,185,11,.015) 100%);
  border: 1px solid rgba(240,185,11,.12);
}
.nlt-card--import::before { background: linear-gradient(90deg, transparent, #f0b90b, transparent); }
.nlt-card--import:hover {
  border-color: rgba(240,185,11,.35);
  box-shadow: 0 8px 32px rgba(240,185,11,.06);
}
.nlt-card--diag {
  background: linear-gradient(160deg, rgba(113,128,255,.06) 0%, rgba(113,128,255,.015) 100%);
  border: 1px solid rgba(113,128,255,.12);
}
.nlt-card--diag::before { background: linear-gradient(90deg, transparent, #7180ff, transparent); }
.nlt-card--diag:hover {
  border-color: rgba(113,128,255,.35);
  box-shadow: 0 8px 32px rgba(113,128,255,.08);
}

/* Card internals */
.nlt-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.nlt-card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
.nlt-card:hover .nlt-card-icon { transform: scale(1.08); }
.nlt-card-icon--export { background: rgba(14,203,129,.1); border: 1px solid rgba(14,203,129,.15); }
.nlt-card-icon--import { background: rgba(240,185,11,.1); border: 1px solid rgba(240,185,11,.15); }
.nlt-card-icon--diag   { background: rgba(113,128,255,.1); border: 1px solid rgba(113,128,255,.15); }
.nlt-card-badge {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; padding: 3px 8px; border-radius: 6px;
}
.nlt-card-badge--export { background: rgba(14,203,129,.1); color: #0ecb81; }
.nlt-card-badge--import { background: rgba(240,185,11,.1); color: #f0b90b; }
.nlt-card-badge--diag   { background: rgba(113,128,255,.1); color: #7180ff; }
.nlt-card-title {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 6px;
}
.nlt-card-desc {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  margin-bottom: 14px;
}
.nlt-card-features {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.nlt-card-features li {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--text-secondary);
}
.nlt-card-features li svg { flex-shrink: 0; }
.nlt-card-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; width: 100%;
  padding: 9px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; border: 1px solid transparent;
  transition: all .2s ease;
}
.nlt-card-btn:active { transform: scale(.97); }
.nlt-card-btn--export {
  background: rgba(14,203,129,.1); color: #0ecb81;
  border-color: rgba(14,203,129,.2);
}
.nlt-card-btn--export:hover {
  background: rgba(14,203,129,.18);
  box-shadow: 0 0 16px rgba(14,203,129,.1);
}
.nlt-card-btn--import {
  background: rgba(240,185,11,.1); color: #f0b90b;
  border-color: rgba(240,185,11,.2);
}
.nlt-card-btn--import:hover {
  background: rgba(240,185,11,.18);
  box-shadow: 0 0 16px rgba(240,185,11,.08);
}
.nlt-card-btn--diag {
  background: rgba(113,128,255,.1); color: #7180ff;
  border-color: rgba(113,128,255,.2);
}
.nlt-card-btn--diag:hover {
  background: rgba(113,128,255,.18);
  box-shadow: 0 0 16px rgba(113,128,255,.1);
}

/* ── NL Tools — How It Works ──────────────────── */
.nlt-how {
  padding: 16px 20px;
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 12px;
  margin-bottom: 20px;
  animation: sp-fade-up .5s ease-out both .15s;
}
.nlt-how-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  margin-bottom: 14px; text-transform: uppercase; letter-spacing: .5px;
}
.nlt-how-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.nlt-how-step {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 140px;
  padding: 10px 14px;
  background: rgba(255,255,255,.025);
  border-radius: 8px; border: 1px solid rgba(255,255,255,.04);
  transition: all .2s;
}
.nlt-how-step:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(240,185,11,.1);
}
.nlt-how-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(240,185,11,.1); color: var(--accent);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nlt-how-label {
  font-size: 11.5px; color: var(--text-secondary); line-height: 1.4;
}
.nlt-how-arrow {
  font-size: 14px; color: var(--text-muted); opacity: .4;
  flex-shrink: 0;
}

/* ── NL Tools — Import Info Steps ─────────────── */
.nlt-import-info {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: rgba(240,185,11,.03);
  border: 1px solid rgba(240,185,11,.08);
  border-radius: 10px;
  margin-bottom: 4px;
}
.nlt-import-info-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.4;
}
.nlt-import-info-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(240,185,11,.1); color: var(--accent);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}

/* ── NL Tools — Diagnostics Empty ─────────────── */
.nl-diag-empty {
  text-align: center; padding: 40px 20px;
  color: rgba(255,255,255,.3);
}
.nl-diag-empty svg { margin-bottom: 14px; }
.nl-diag-empty p { margin: 0; font-size: 13px; }
.nlt-diag-tip {
  margin-top: 10px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,.2) !important;
  font-style: italic;
}

@media (max-width: 700px) {
  .nl-tools-grid { grid-template-columns: 1fr; }
  .nlt-how-steps { flex-direction: column; }
  .nlt-how-arrow { transform: rotate(90deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GUARDRAIL TAGS — softer
   ═══════════════════════════════════════════════════════════════════════════ */
.guardrail-tag {
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 8px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIGNALS BLOCKED/WATCH BANNER — cleaner
   ═══════════════════════════════════════════════════════════════════════════ */
.sig-banner { margin-top: 4px; }
.sig-banner-inner {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 11px;
}
.sig-banner-title { font-size: 12px; margin-bottom: 3px; }
.sig-banner-reasons { font-size: 11px; margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CASE ANALYSIS CHIPS — compact
   ═══════════════════════════════════════════════════════════════════════════ */
.ca-strip { gap: 6px; margin: 4px 0; }
.ca-chip {
  padding: 1px 6px;
  font-size: 9px;
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RUN SETTINGS STRIP — Binance inline style
   ═══════════════════════════════════════════════════════════════════════════ */
#run-settings-strip {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(43,49,57,0.3);
  border-radius: 0;
  padding: 3px 10px;
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST — less intrusive
   ═══════════════════════════════════════════════════════════════════════════ */
.toast {
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 11px;
  max-width: 280px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SP-BTN — small buttons used in analysis bar
   ═══════════════════════════════════════════════════════════════════════════ */
.sp-btn {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  border: 1px solid rgba(43,49,57,0.6);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.sp-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.sp-btn-sm { padding: 2px 8px; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MUST KNOW NOW — Critical alerts panel
   ═══════════════════════════════════════════════════════════════════════════ */
.must-know-now-panel { margin-bottom: var(--ws-gap-section); }
.mkn-inner {
  background: #1e2329;
  border-radius: 6px;
  padding: 10px 14px;
  border-left: 3px solid #f0b90b;
}
.mkn-border-red { border-left-color: #f6465d; }
.mkn-border-yellow { border-left-color: #f0b90b; }
.mkn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mkn-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #eaecef);
  letter-spacing: 0.3px;
}
.mkn-meta { display: flex; gap: 6px; align-items: center; }
.mkn-chip {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mkn-chip-event { background: rgba(240,185,11,0.15); color: #f0b90b; }
.mkn-chip-quality { background: rgba(132,142,156,0.15); color: #848e9c; }
.mkn-quality-strong { color: #0ecb81; background: rgba(14,203,129,0.12); }
.mkn-quality-moderate { color: #f0b90b; background: rgba(240,185,11,0.12); }
.mkn-quality-weak { color: #f6465d; background: rgba(246,70,93,0.12); }
.mkn-items { display: flex; flex-direction: column; gap: 4px; }
.mkn-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary, #b7bdc6);
  padding: 4px 6px;
  border-radius: 4px;
}
.mkn-item.mkn-critical { background: rgba(246,70,93,0.08); }
.mkn-item.mkn-warning { background: rgba(240,185,11,0.06); }
.mkn-icon { flex-shrink: 0; font-size: 11px; width: 14px; text-align: center; }
.mkn-text { flex: 1; line-height: 1.4; }
.mkn-source {
  flex-shrink: 0;
  font-size: 9px;
  color: #5e6673;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  background: rgba(43,49,57,0.5);
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM ASSET CARDS — Per-asset decision cards
   ═══════════════════════════════════════════════════════════════════════════ */
.premium-asset-cards { margin: 0; padding-top: 2px; }
.pac-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 4px;
}
#premium-asset-cards { margin-bottom: 0; }
#premium-report {
  margin-bottom: var(--ws-gap-section);
  margin-top: 0;
  background: rgba(22,26,30,.6);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 10px 12px 8px;
  position: relative;
  overflow: hidden;
}
#premium-report::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
  border-radius: 12px 12px 0 0;
}
.pac-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary, #848e9c);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.pac-count {
  font-size: 10px;
  color: #5e6673;
}
.pac-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.pac-card {
  flex: 0 0 300px;
  background: #1e2329;
  border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  transition: border-color 0.15s, box-shadow 0.15s;
  scroll-snap-align: start;
}
.pac-card:hover {
  border-color: rgba(240,185,11,0.3);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* Card header */
.pac-card-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pac-symbol {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #eaecef);
  letter-spacing: 0.3px;
}
.pac-dir-badge {
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.pac-dir-long  { background: rgba(14,203,129,0.15); color: #0ecb81; }
.pac-dir-short { background: rgba(246,70,93,0.15); color: #f6465d; }
.pac-dir-hold  { background: rgba(132,142,156,0.12); color: #848e9c; }

.pac-trad-badge {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pac-trad-action  { background: rgba(14,203,129,0.12); color: #0ecb81; }
.pac-trad-watch   { background: rgba(240,185,11,0.12); color: #f0b90b; }
.pac-trad-hold    { background: rgba(132,142,156,0.10); color: #5e6673; }
.pac-trad-blocked { background: rgba(246,70,93,0.10); color: #f6465d; }

.pac-quality-badge {
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: auto;
}
.pac-quality-degraded { background: rgba(240,185,11,0.12); color: #f0b90b; }
.pac-quality-partial  { background: rgba(240,185,11,0.08); color: #c99d00; }

/* Metrics row */
.pac-metrics {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pac-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pac-metric-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5e6673;
}
.pac-metric-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #eaecef);
}
.pac-risk-high { color: #f6465d; }
.pac-risk-mid  { color: #f0b90b; }
.pac-risk-low  { color: #0ecb81; }
.pac-util-label {
  font-size: 9px;
  font-weight: 400;
  color: #5e6673;
}

/* Opportunity row */
.pac-opp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.pac-opp-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}
.pac-opp-none     { background: rgba(43,49,57,0.5); color: #5e6673; }
.pac-opp-emerging { background: rgba(240,185,11,0.12); color: #f0b90b; }
.pac-opp-active   { background: rgba(14,203,129,0.12); color: #0ecb81; }

.pac-chip {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
}
.pac-chip-warn { background: rgba(240,185,11,0.08); color: #c99d00; }
.pac-chip-degraded { background: rgba(246,70,93,0.08); color: #b33047; font-size: 8px; }

/* Expand toggle */
.pac-expand-toggle {
  font-size: 10px;
  color: #5e6673;
  cursor: pointer;
  padding: 3px 0;
  user-select: none;
}
.pac-expand-toggle:hover { color: var(--text-primary, #eaecef); }
.pac-expand-arrow {
  display: inline-block;
  transition: transform 0.15s;
  font-size: 8px;
}
.pac-expanded .pac-expand-arrow { transform: rotate(90deg); }
.pac-expand-body {
  display: none;
  padding: 6px 0 2px;
}
.pac-expanded .pac-expand-body { display: block; }

/* Utility factors grid */
.pac-uf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 3px 10px;
  margin-bottom: 6px;
}
.pac-uf-item {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 1px 0;
}
.pac-uf-key { color: #5e6673; text-transform: capitalize; }
.pac-uf-val { color: var(--text-primary, #eaecef); font-weight: 500; }
.pac-uf-penalty .pac-uf-key { color: #b33047; }
.pac-uf-penalty .pac-uf-val { color: #f6465d; }

.pac-penalties-hd {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #f6465d;
  margin: 4px 0 2px;
}

.pac-degraded { margin-top: 6px; }
.pac-degraded-hd {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5e6673;
  margin-bottom: 3px;
}
.pac-degraded-chips { display: flex; flex-wrap: wrap; gap: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SGD CLASSIFIER HEALTH PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.sgd-health-panel {
  background: rgba(22,26,30,.6);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 10px 12px 8px;
  margin-bottom: 8px;
  position: relative;
}
.sgd-health-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
  border-radius: 12px 12px 0 0;
}
.sgdh-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.sgdh-status-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.sgdh-ok   { background: rgba(14,203,129,.15); color: var(--green); border: 1px solid rgba(14,203,129,.15); }
.sgdh-warn { background: rgba(240,185,11,.15); color: var(--accent); border: 1px solid rgba(240,185,11,.15); }
.sgdh-deg  { background: rgba(246,70,93,.15); color: var(--red); border: 1px solid rgba(246,70,93,.15); }
.sgdh-unk  { background: rgba(255,255,255,.08); color: var(--text-muted); border: 1px solid rgba(255,255,255,.05); }
.sgdh-stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.sgdh-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sgdh-stat-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.sgdh-stat-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #eaecef);
  font-family: 'JetBrains Mono', monospace;
}
.sgdh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.sgdh-card {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 12px;
}
.sgdh-card-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sgdh-card-hint {
  font-size: 9px;
  color: rgba(255,255,255,.25);
  margin-top: 4px;
}
/* Entropy gauge */
.sgdh-gauge {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sgdh-gauge-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.sgdh-gauge-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.sgdh-gauge-val {
  font-size: 13px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  min-width: 48px;
  text-align: right;
}
/* Class distribution */
.sgdh-dist { display: flex; flex-direction: column; gap: 5px; }
.sgdh-dist-row { display: flex; align-items: center; gap: 6px; }
.sgdh-dist-lbl {
  font-size: 10px;
  font-weight: 700;
  width: 42px;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
}
.sgdh-dist-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.sgdh-dist-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.sgdh-dist-val {
  font-size: 11px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary, #eaecef);
  min-width: 36px;
  text-align: right;
}
/* Accuracy metrics */
.sgdh-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sgdh-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sgdh-metric-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.sgdh-metric-val {
  font-size: 13px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATA QUALITY TRANSPARENCY — coverage, reliability, degradation
   ═══════════════════════════════════════════════════════════════════════════ */
.data-quality-panel { margin-bottom: var(--ws-gap-section); }
.dq-inner {
  background: #1e2329;
  border-radius: 6px;
  padding: 10px 14px;
}
.dq-header { margin-bottom: 6px; }
.dq-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-primary, #eaecef);
}
.dq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px 12px;
  margin-bottom: 6px;
}
.dq-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dq-cell-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5e6673;
}
.dq-cell-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #eaecef);
}
.dq-status-ok   { color: #0ecb81; }
.dq-status-warn { color: #f0b90b; }
.dq-status-bad  { color: #f6465d; }
.dq-status-unknown { color: #5e6673; }

.dq-notes { margin-bottom: 4px; }
.dq-note {
  font-size: 10px;
  color: #848e9c;
  line-height: 1.4;
  padding: 1px 0;
}
.dq-flags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.dq-flags-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5e6673;
}
.dq-flag-chip {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 500;
  background: rgba(240,185,11,0.12);
  color: #f0b90b;
}
.dq-mixed-warn {
  font-size: 10px;
  color: #f0b90b;
  padding: 4px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §3.10.1 CONFORMAL COVERAGE PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.conformal-panel { margin-bottom: 8px; }
.cf-inner {
  background: #1e2329;
  border-radius: 6px;
  padding: 10px 14px;
}
.cf-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cf-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-primary, #eaecef);
}
.cf-badge {
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
}
.cf-status-ok   { background: rgba(14,203,129,0.15); color: #0ecb81; }
.cf-status-warn { background: rgba(240,185,11,0.15); color: #f0b90b; }
.cf-status-bad  { background: rgba(246,70,93,0.15);  color: #f6465d; }
.cf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px 12px;
  margin-bottom: 6px;
}
.cf-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cf-cell-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5e6673;
}
.cf-cell-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #eaecef);
}
.cf-val-ok   { color: #0ecb81; }
.cf-val-warn { color: #f0b90b; }
.cf-intervals { margin-top: 6px; }
.cf-intervals-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5e6673;
  display: block;
  margin-bottom: 3px;
}
.cf-intervals-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cf-interval-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}
.cf-sym {
  font-weight: 600;
  color: var(--text-primary, #eaecef);
  min-width: 70px;
}
.cf-range { color: #848e9c; font-family: monospace; }
.cf-iwidth { color: #5e6673; font-size: 9px; }
.cf-per-sym { margin-top: 6px; }
.cf-sym-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cf-sym-chip {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 500;
}
.cf-sym-ok   { background: rgba(14,203,129,0.12); color: #0ecb81; }
.cf-sym-warn { background: rgba(240,185,11,0.12); color: #f0b90b; }
.cf-sym-bad  { background: rgba(246,70,93,0.12);  color: #f6465d; }

/* ═══════════════════════════════════════════════════════════════════════════
   §3.8.11 REGIME ROUTING PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.regime-routing-panel { margin-bottom: 8px; }
/* §3.10.3 Model Disagreement */
.disag-high { color: var(--red) !important; font-weight: 600; }
.disag-moderate { color: var(--zone-elevated) !important; }
.disag-low { color: var(--green) !important; }
.rr-inner {
  background: #1e2329;
  border-radius: 6px;
  padding: 10px 14px;
}
.rr-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.rr-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-primary, #eaecef);
}
.rr-badge {
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
}
.rr-badge-mix    { background: rgba(168,85,247,0.15); color: #a855f7; }
.rr-badge-single { background: rgba(14,203,129,0.15); color: #0ecb81; }
.rr-primary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px 12px;
  margin-bottom: 8px;
}
.rr-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rr-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5e6673;
}
.rr-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #eaecef);
}
.rr-regime-name { text-transform: capitalize; }
.rr-unc-high { color: #f6465d; }
.rr-unc-mid  { color: #f0b90b; }
.rr-unc-low  { color: #0ecb81; }

/* Regime probability bars */
.rr-probs { margin-bottom: 8px; }
.rr-probs-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5e6673;
  display: block;
  margin-bottom: 4px;
}
.rr-prob-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rr-prob-row {
  display: grid;
  grid-template-columns: 120px 1fr 42px;
  align-items: center;
  gap: 6px;
}
.rr-prob-active .rr-prob-name { color: #0ecb81; font-weight: 600; }
.rr-prob-name {
  font-size: 10px;
  color: #848e9c;
  text-transform: capitalize;
}
.rr-prob-bar-bg {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.rr-prob-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #a855f7, #6366f1);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.rr-prob-active .rr-prob-bar-fill {
  background: linear-gradient(90deg, #0ecb81, #10b981);
}
.rr-prob-pct {
  font-size: 10px;
  color: #848e9c;
  text-align: right;
  font-family: monospace;
}

/* Expert multipliers */
.rr-mults { margin-bottom: 6px; }
.rr-mults-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5e6673;
  display: block;
  margin-bottom: 4px;
}
.rr-mults-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rr-mult-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
}
.rr-mult-boost   { background: rgba(14,203,129,0.12); color: #0ecb81; }
.rr-mult-damp    { background: rgba(246,70,93,0.12);  color: #f6465d; }
.rr-mult-neutral { background: rgba(255,255,255,0.06); color: #848e9c; }
.rr-mult-name { font-weight: 500; }
.rr-mult-val  { font-family: monospace; }

.rr-notes { margin-top: 4px; }
.rr-note {
  font-size: 10px;
  color: #848e9c;
  line-height: 1.4;
  padding: 1px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RISK BAR FILLS — additional colors for new risk components
   ═══════════════════════════════════════════════════════════════════════════ */
.krit-fill-red    { background: #f6465d; }
.krit-fill-purple { background: #a855f7; }
.krit-fill-green  { background: #0ecb81; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — new blocks
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pac-grid { /* horizontal scroll on all sizes */ }
  .pac-card { flex: 0 0 260px; }
  .dq-grid { grid-template-columns: repeat(3, 1fr); }
  .pac-uf-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .dq-grid { grid-template-columns: repeat(2, 1fr); }
  .pac-card { padding: 8px 10px; }
  .pac-symbol { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Run Analysis CTA button (gold prominence)
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-analysis {
  background: linear-gradient(135deg, #f0b90b 0%, #d4a20a 100%) !important;
  color: #0b0e11 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 10px 28px !important;
  border-radius: 8px !important;
  letter-spacing: .5px !important;
  text-transform: uppercase;
  border: none !important;
  box-shadow: 0 2px 12px rgba(240,185,11,.25), 0 0 20px rgba(240,185,11,.08);
  transition: all .2s ease !important;
  position: relative;
  overflow: hidden;
}
.btn-analysis::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s;
}
.btn-analysis:hover::before { left: 100%; }
.btn-analysis:hover {
  opacity: 1 !important;
  box-shadow: 0 4px 20px rgba(240,185,11,.35), 0 0 30px rgba(240,185,11,.12) !important;
  transform: translateY(-1px);
}
.btn-analysis:disabled {
  background: linear-gradient(135deg, #5e6673 0%, #4a4f57 100%) !important;
  color: #848e9c !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Must Know Now panel (critical alert prominence)
   ═══════════════════════════════════════════════════════════════════════════ */
.mkn-inner {
  background: linear-gradient(135deg, rgba(30,35,41,1) 0%, rgba(22,26,30,.95) 100%) !important;
  border: 1px solid rgba(240,185,11,.1);
  border-left: 3px solid #f0b90b;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.02);
  position: relative;
}
.mkn-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.3), rgba(240,185,11,.05), transparent);
  border-radius: 10px 10px 0 0;
}
.mkn-title {
  color: #f0b90b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(240,185,11,.1);
  letter-spacing: .5px !important;
}
.mkn-chip {
  border: 1px solid transparent;
}
.mkn-chip-event {
  border-color: rgba(240,185,11,.15);
}
.mkn-quality-strong { border-color: rgba(14,203,129,.15); }
.mkn-quality-weak { border-color: rgba(246,70,93,.15); }
.mkn-item {
  border-radius: 6px !important;
  transition: background .15s;
}
.mkn-item:hover { background: rgba(240,185,11,.04); }
.mkn-source {
  border: 1px solid rgba(43,49,57,.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Asset Intelligence Cards (premium feel)
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Brand-colored asset cards ── */
.pac-card {
  --brand: #5e6673;
  --brand-20: rgba(94,102,115,.2);
  --brand-10: rgba(94,102,115,.1);
  background: linear-gradient(165deg, rgba(30,35,41,1) 0%, rgba(22,26,30,.97) 60%, var(--brand-10) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s, box-shadow .2s !important;
}
/* Top accent stripe in brand color */
.pac-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), transparent 80%);
  opacity: .7;
}
/* Subtle corner glow */
/* Shimmer outline on pac-card (gold gradient sweep on hover) */
.pac-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,168,67,.35) 25%,
    rgba(240,215,140,.5) 50%,
    rgba(212,168,67,.35) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.pac-card:hover::after {
  opacity: 1;
  animation: db2-shimmer 2s linear infinite;
}
.pac-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-20) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 20px var(--brand-10) !important;
}
.pac-card:hover::before { opacity: 1; height: 3px; }
/* Symbol in brand color */
.pac-symbol {
  color: var(--brand) !important;
  font-size: 20px !important;
  letter-spacing: .5px !important;
  text-shadow: 0 0 12px var(--brand-10);
}
.pac-section-title {
  color: var(--accent) !important;
  text-shadow: 0 0 8px rgba(240,185,11,.1);
}
.pac-dir-badge {
  border: 1px solid transparent;
}
.pac-dir-long  { border-color: rgba(14,203,129,.2); box-shadow: 0 0 6px rgba(14,203,129,.08); }
.pac-dir-short { border-color: rgba(246,70,93,.2); box-shadow: 0 0 6px rgba(246,70,93,.08); }
.pac-dir-hold  { border-color: rgba(132,142,156,.15); }
.pac-metric-val { font-size: 14px !important; }
.pac-opp-label {
  color: var(--text-primary) !important;
  font-weight: 600;
}

/* Decisiveness meter — gradient bar */
.pac-dec-track {
  height: 5px !important;
  border-radius: 3px;
  background: rgba(43,49,57,.6) !important;
  border: 1px solid rgba(255,255,255,.03);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — ML Intelligence section
   ═══════════════════════════════════════════════════════════════════════════ */
.ml-row-section {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  position: relative;
}
.ml-row-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.2), transparent);
  border-radius: 10px 10px 0 0;
}
.db-signal-brief.ml-row-section {
  margin: 4px 0 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Sentiment bar enhancement
   ═══════════════════════════════════════════════════════════════════════════ */
.analysis-strip {
  background: rgba(22,26,30,.6) !important;
  border: 1px solid rgba(43,49,57,.3) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
}
.sentiment-bar-track {
  height: 6px !important;
  border-radius: 3px !important;
  width: 100px !important;
  background: rgba(43,49,57,.6) !important;
  border: 1px solid rgba(255,255,255,.03);
  overflow: hidden;
}
.astrip-green { color: var(--green) !important; font-weight: 700 !important; }
.astrip-red { color: var(--red) !important; font-weight: 700 !important; }
.astrip-lbl {
  color: var(--accent) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(240,185,11,.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Applied Settings strip
   ═══════════════════════════════════════════════════════════════════════════ */
.applied-settings-strip {
  background: rgba(22,26,30,.4);
  border: 1px solid rgba(43,49,57,.2);
  border-radius: 6px;
  padding: 4px 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — News Intelligence right panel
   ═══════════════════════════════════════════════════════════════════════════ */
.news-intelligence-panel {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.news-intel-header {
  border-bottom: 1px solid rgba(240,185,11,.06);
}
.news-intel-title {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(240,185,11,.1);
}

/* Must See Now card styling — uses --nc-color for asset accent */
.news-signal-box {
  background: linear-gradient(135deg, rgba(30,35,41,.8) 0%, rgba(22,26,30,.6) 100%);
  border: 1px solid rgba(255,255,255,.04);
  border-left: 2px solid color-mix(in srgb, var(--nc-color, var(--accent)) 50%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  transition: border-color .2s;
}
.news-signal-box:hover {
  border-color: color-mix(in srgb, var(--nc-color, var(--accent)) 15%, transparent);
  border-left-color: var(--nc-color, var(--accent));
}
.news-signal-title {
  font-weight: 700;
  color: var(--text-primary);
}
.news-signal-act {
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid transparent;
}
.news-signal-act--high {
  border-color: rgba(246,70,93,.2);
  box-shadow: 0 0 4px rgba(246,70,93,.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — History button & analysis bar polish
   ═══════════════════════════════════════════════════════════════════════════ */
.analysis-bar {
  background: rgba(22,26,30,.4);
  border: 1px solid rgba(43,49,57,.2);
  border-radius: 8px;
  padding: 8px 12px !important;
  align-items: center;
}
.analysis-bar .sp-btn {
  background: rgba(43,49,57,.5);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 6px;
  color: var(--text-secondary);
  transition: all .15s;
}
.analysis-bar .sp-btn:hover {
  border-color: rgba(240,185,11,.15);
  color: var(--text-primary);
}

/* Winner/result badge */
.result-badge {
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Section title consistency
   ═══════════════════════════════════════════════════════════════════════════ */
.mkt-section-title {
  color: #F0B90B !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .6px;
  text-shadow: 0 0 8px rgba(240,185,11,.08);
  padding: 6px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Footer polish
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-status-bar {
  background: rgba(11,14,17,.8);
  border-top: 1px solid rgba(43,49,57,.3);
  padding: 6px 14px;
}
.auth-status-bar .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Plan Builder deep UX overhaul
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section title "SIGNAL → PLAN BUILDER" — larger, with icon feel ── */
.pb-section .mkt-section-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #F0B90B !important;
  letter-spacing: .6px !important;
}

/* ── AUTO mode: Level cards — bigger values, subtle inner glow ── */
.pb-header-levels .pb-level-item {
  padding: 14px 16px 12px 18px !important;
  background: rgba(0,0,0,.25) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(4px);
}
.pb-header-levels .pb-level-val {
  font-size: 20px !important;
  letter-spacing: -.5px !important;
}
.pb-header-levels .pb-level-source {
  font-size: 9px !important;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
}
.pb-header-levels .pb-level-source-sl {
  background: rgba(246,70,93,.08) !important;
  border: 1px solid rgba(246,70,93,.1);
}
.pb-header-levels .pb-level-source-tp {
  background: rgba(14,203,129,.08) !important;
  border: 1px solid rgba(14,203,129,.1);
}

/* ── AUTO metrics row — visual R:R bar ── */
.pb-metrics-inline {
  padding: 16px 0 10px !important;
  gap: 24px !important;
  font-size: 14px !important;
}
.pb-metrics-inline strong {
  font-size: 15px !important;
}
.pb-metric-risk strong { color: var(--red) !important; text-shadow: 0 0 6px rgba(246,70,93,.15); }
.pb-metric-reward strong { color: var(--green) !important; text-shadow: 0 0 6px rgba(14,203,129,.15); }

/* ── MANUAL mode: Form header — symbol prominent ── */
.ts-form-symbol {
  font-size: 18px !important;
  letter-spacing: .3px;
}
.ts-form-title {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
}
.ts-form-hold-badge {
  font-size: 11px !important;
  padding: 4px 12px !important;
}

/* ── Save Setup button — gold CTA with shine ── */
.ts-btn-save {
  background: linear-gradient(135deg, #f0b90b 0%, #d4a20a 100%) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 9px 22px !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(240,185,11,.2) !important;
  position: relative;
  overflow: hidden;
}
.ts-btn-save::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition: left .4s;
}
.ts-btn-save:hover::before { left: 100%; }
.ts-btn-save:hover {
  box-shadow: 0 4px 16px rgba(240,185,11,.35) !important;
  transform: translateY(-1px);
}

/* ── Copy Plan button — subtle accent ── */
.ts-btn-copy {
  border: 1px solid rgba(240,185,11,.12) !important;
  color: var(--accent) !important;
  background: rgba(240,185,11,.04) !important;
}
.ts-btn-copy:hover {
  background: rgba(240,185,11,.1) !important;
  border-color: rgba(240,185,11,.25) !important;
}

/* ── Save as Default — subtle ── */
.ts-btn-defaults {
  border-color: rgba(255,255,255,.06) !important;
}

/* ── Direction buttons — inviting, not flat ── */
.ts-dir-btn {
  font-size: 15px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
}
.ts-dir-btn.ts-long {
  border-color: rgba(14,203,129,.1) !important;
  color: rgba(14,203,129,.5) !important;
}
.ts-dir-btn.ts-long:hover {
  background: rgba(14,203,129,.06) !important;
  border-color: rgba(14,203,129,.2) !important;
  color: var(--green) !important;
}
.ts-dir-btn.ts-short {
  border-color: rgba(246,70,93,.1) !important;
  color: rgba(246,70,93,.5) !important;
}
.ts-dir-btn.ts-short:hover {
  background: rgba(246,70,93,.06) !important;
  border-color: rgba(246,70,93,.2) !important;
  color: var(--red) !important;
}
.ts-dir-active.ts-long {
  box-shadow: 0 0 20px rgba(14,203,129,.15) !important;
}
.ts-dir-active.ts-short {
  box-shadow: 0 0 20px rgba(246,70,93,.15) !important;
}

/* ── SL/TP field sections — larger, clearer ── */
.ts-field[data-field="sl"],
.ts-field[data-field="tp"] {
  border-radius: 12px !important;
  padding: 16px 18px 16px 22px !important;
}
.ts-field[data-field="sl"] label,
.ts-field[data-field="tp"] label {
  font-size: 12px !important;
}
.ts-field[data-field="sl"]::before,
.ts-field[data-field="tp"]::before {
  width: 4px !important;
  border-radius: 4px 0 0 4px !important;
}

/* ── SL/TP source labels — pill badges ── */
.ts-source-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ── Percent buttons — more interactive ── */
.ts-pct-btn {
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 16px !important;
  transition: all .15s !important;
}
.ts-field[data-field="sl"] .ts-pct-btn:hover {
  background: rgba(246,70,93,.12) !important;
  color: var(--red) !important;
  border-color: rgba(246,70,93,.25) !important;
  box-shadow: 0 0 8px rgba(246,70,93,.1);
}
.ts-field[data-field="tp"] .ts-pct-btn:hover {
  background: rgba(14,203,129,.12) !important;
  color: var(--green) !important;
  border-color: rgba(14,203,129,.25) !important;
  box-shadow: 0 0 8px rgba(14,203,129,.1);
}

/* ── SL/TP special source buttons (CI, Forecast) ── */
.ts-pct-btn[data-source] {
  background: rgba(240,185,11,.06);
  border-color: rgba(240,185,11,.15);
  color: var(--accent);
}
.ts-pct-btn[data-source]:hover {
  background: rgba(240,185,11,.15) !important;
  color: var(--accent) !important;
  border-color: rgba(240,185,11,.3) !important;
  box-shadow: 0 0 10px rgba(240,185,11,.12) !important;
}

/* ── Inputs — larger, clearer ── */
.ts-input {
  font-size: 15px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* ── Trade Style row — integrated ── */
.ts-style-row {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.05) !important;
}
.ts-style-row label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.ts-field-inline select {
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
}
.ts-style-row .ts-badge {
  font-size: 10px;
}

/* ── Metrics section (MANUAL) — visual R:R prominence ── */
.ts-metrics {
  border-radius: 12px !important;
  padding: 18px 20px !important;
}
.ts-metric {
  border-radius: 10px !important;
  padding: 12px 10px !important;
}
.ts-metric-val {
  font-size: 16px !important;
}
.ts-rr-big {
  padding: 16px 10px 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(240,185,11,.06), rgba(0,0,0,.15)) !important;
  border: 1px solid rgba(240,185,11,.1) !important;
  border-top: none !important;
}
.ts-rr-big .ts-metric-val {
  font-size: 28px !important;
  text-shadow: 0 0 12px rgba(240,185,11,.15);
}

/* ── R:R Visual Bar (new element via CSS) ── */
.ts-rr-visual {
  display: flex;
  align-items: center;
  gap: 0;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
  background: rgba(43,49,57,.4);
  border: 1px solid rgba(255,255,255,.03);
}
.ts-rr-visual-risk {
  height: 100%;
  background: linear-gradient(90deg, rgba(246,70,93,.6), rgba(246,70,93,.3));
  border-radius: 4px 0 0 4px;
  transition: width .3s ease;
}
.ts-rr-visual-reward {
  height: 100%;
  background: linear-gradient(90deg, rgba(14,203,129,.3), rgba(14,203,129,.6));
  border-radius: 0 4px 4px 0;
  transition: width .3s ease;
}
.ts-rr-visual-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.ts-rr-visual-labels span:first-child { color: var(--red); }
.ts-rr-visual-labels span:last-child { color: var(--green); }

/* ── Extras section — cleaner ── */
.ts-extras {
  border-radius: 12px !important;
  padding: 16px 18px !important;
  background: rgba(0,0,0,.2) !important;
}

/* ── Feasibility — bolder ── */
.ts-feasibility {
  border-radius: 12px !important;
  padding: 12px 16px !important;
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.05) !important;
}
.ts-feasibility-badge {
  font-size: 11px !important;
  padding: 4px 14px !important;
}

/* ── Reset to Auto button ── */
.pb-reset-btn {
  color: var(--text-muted) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 6px !important;
  transition: all .15s;
}
.pb-reset-btn:hover {
  color: var(--accent) !important;
  border-color: rgba(240,185,11,.15) !important;
  background: rgba(240,185,11,.04) !important;
}

/* ── Entry Price refresh button — accent ── */
.ts-use-price {
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
}

/* ── Mode toggle — larger tabs ── */
.pb-mode-btn {
  padding: 10px 22px !important;
  min-width: 85px !important;
}
.pb-mode-label {
  font-size: 10px !important;
}
.pb-mode-sub {
  font-size: 7px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Asset Intelligence Cards deep overhaul
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card header — brand-aware ── */
.pac-symbol {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}
.pac-dir-badge {
  font-size: 10px !important;
  padding: 3px 12px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}
.pac-dir-long {
  background: rgba(14,203,129,.15) !important;
  color: #0ecb81 !important;
  border: 1px solid rgba(14,203,129,.25) !important;
  box-shadow: 0 0 8px rgba(14,203,129,.1);
}
.pac-dir-short {
  background: rgba(246,70,93,.15) !important;
  color: #f6465d !important;
  border: 1px solid rgba(246,70,93,.25) !important;
  box-shadow: 0 0 8px rgba(246,70,93,.1);
}
.pac-dir-hold {
  background: rgba(132,142,156,.12) !important;
  color: #848e9c !important;
  border: 1px solid rgba(132,142,156,.15) !important;
}
.pac-trad-badge {
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  display: none !important; /* Hide duplicate — dir badge is enough */
}
.pac-quality-badge {
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  border: 1px solid transparent;
  margin-left: auto !important;
}
.pac-quality-degraded {
  border-color: rgba(240,185,11,.15) !important;
}

/* ── Metrics layout — compact risk gauge + grid ── */
.pac-metrics-pro {
  margin-bottom: 8px;
}

/* Risk gauge — compact */
.pac-metric-risk-gauge {
  margin-bottom: 6px;
  padding: 6px 8px;
  background: rgba(0,0,0,.15);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.03);
}
.pac-gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.pac-gauge-header .pac-metric-lbl {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .5px;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.pac-gauge-header .pac-metric-val {
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}
.pac-gauge-track {
  height: 6px;
  background: rgba(43,49,57,.6);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.pac-gauge-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 6px currentColor;
}

/* Metrics grid — Binance sizes */
.pac-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.pac-metric-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  background: rgba(0,0,0,.1);
  border-radius: 4px;
}
.pac-metric-cell .pac-metric-lbl {
  font-size: 9px !important;
  letter-spacing: .5px;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.pac-metric-cell .pac-metric-val {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Mini progress bar for Utility */
.pac-mini-bar {
  height: 3px;
  background: rgba(43,49,57,.5);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.pac-mini-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s ease;
}

/* ── Opportunity row — icons + bigger badges ── */
.pac-opp-badge {
  padding: 4px 12px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pac-opp-icon {
  font-size: 10px;
}
.pac-opp-none {
  border-color: rgba(43,49,57,.5) !important;
  background: rgba(43,49,57,.2) !important;
}
.pac-opp-emerging {
  border-color: rgba(240,185,11,.2) !important;
  background: rgba(240,185,11,.06) !important;
  box-shadow: 0 0 8px rgba(240,185,11,.08);
}
.pac-opp-active {
  border-color: rgba(14,203,129,.2) !important;
  background: rgba(14,203,129,.06) !important;
  box-shadow: 0 0 8px rgba(14,203,129,.08);
}

/* Chips — larger with icons */
.pac-chip {
  padding: 3px 10px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border: 1px solid transparent;
}
.pac-chip-warn {
  border-color: rgba(240,185,11,.1) !important;
}
.pac-chip-degraded {
  border-color: rgba(246,70,93,.1) !important;
  font-size: 9px !important;
}

/* ── Details toggle — brand-aware ── */
.pac-expand-toggle {
  font-size: 11px !important;
  padding: 6px 0 !important;
  color: var(--brand, var(--accent)) !important;
  font-weight: 600;
  letter-spacing: .3px;
  transition: color .15s;
}
.pac-expand-toggle:hover {
  color: var(--text-primary) !important;
}
.pac-expand-arrow {
  font-size: 9px !important;
  color: var(--brand, var(--accent));
  margin-right: 4px;
}

/* ── Expanded body — better grid ── */
.pac-expand-body {
  padding: 8px 0 4px !important;
  border-top: 1px solid rgba(255,255,255,.03);
  margin-top: 4px;
}
.pac-uf-grid {
  gap: 4px 12px !important;
}
.pac-uf-item {
  padding: 3px 6px !important;
  border-radius: 4px;
  background: rgba(0,0,0,.08);
}
.pac-uf-item:hover {
  background: rgba(240,185,11,.03);
}
.pac-uf-key {
  font-size: 10px !important;
}
.pac-uf-val {
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* Penalties section */
.pac-penalties-hd {
  font-size: 10px !important;
  margin: 8px 0 4px !important;
  padding: 4px 8px;
  background: rgba(246,70,93,.06);
  border-radius: 4px;
  display: inline-block;
}

/* ── Section header "ASSET INTELLIGENCE CARDS" ── */
.pac-section-title {
  font-size: 12px !important;
  letter-spacing: 0.8px !important;
  font-weight: 700 !important;
}

/* ── Card structure — compact ── */
.pac-card {
  flex: 0 0 260px !important;
  padding: 10px 12px !important;
}
.pac-card-hd {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  margin-bottom: 8px;
}
.pac-opp-row {
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.03);
  margin-top: 2px;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.pac-opp-badge {
  padding: 3px 10px !important;
  font-size: 10px !important;
}
.pac-chip {
  padding: 2px 8px !important;
  font-size: 9px !important;
}

/* Details toggle — Binance style */
.pac-expand-toggle {
  font-size: 10px !important;
  padding: 4px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — ML Intelligence deep overhaul
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ML panel section — gradient + gold border ── */
.ml-panel-section {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.02);
  position: relative;
  margin-bottom: var(--ws-gap-section);
}
.ml-panel-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
  border-radius: 12px 12px 0 0;
}

/* ── ML panel title — gold ── */
.ml-panel-section .mkt-section-title {
  color: #F0B90B !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-shadow: 0 0 8px rgba(240,185,11,.1);
}
.ml-panel-sub {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  letter-spacing: .3px;
}

/* ── Asset card — branded ── */
.ml-asset-card {
  --brand: #5e6673;
  --brand-20: #5e667333;
  --brand-10: #5e66731a;
  background: linear-gradient(135deg, rgba(30,35,41,1) 0%, rgba(22,26,30,.92) 100%) !important;
  border: 1px solid var(--brand-20) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
/* Top accent stripe */
.ml-asset-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), transparent 80%);
  opacity: .7;
}
/* Corner glow */
/* Shimmer outline on ml-asset-card (gold gradient sweep on hover) */
.ml-asset-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,168,67,.35) 25%,
    rgba(240,215,140,.5) 50%,
    rgba(212,168,67,.35) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.ml-asset-card:hover::after {
  opacity: 1;
  animation: db2-shimmer 2s linear infinite;
}
.ml-asset-card:hover {
  border-color: var(--brand-20) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 16px var(--brand-10) !important;
  transform: translateY(-2px);
}

/* ── Card header — symbol prominent ── */
.ml-card-hd {
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--brand-10);
  margin-bottom: 4px !important;
}
.ml-card-sym {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--brand) !important;
  text-shadow: 0 0 10px var(--brand-20);
  letter-spacing: .3px;
}

/* Direction badge — larger */
.sig-dir-badge {
  padding: 3px 12px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  border: 1px solid transparent;
}
.sig-dir-long  { border-color: rgba(14,203,129,.2) !important; box-shadow: 0 0 6px rgba(14,203,129,.06); }
.sig-dir-short { border-color: rgba(246,70,93,.2) !important; box-shadow: 0 0 6px rgba(246,70,93,.06); }
.sig-dir-hold  { border-color: rgba(132,142,156,.12) !important; }

/* Details button — uses brand color */
.ml-chart-btn {
  padding: 5px 14px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: var(--brand-10) !important;
  border: 1px solid var(--brand-20) !important;
  color: var(--brand) !important;
  letter-spacing: .3px;
  transition: all .2s;
}
.ml-chart-btn:hover {
  background: var(--brand-20) !important;
  box-shadow: 0 0 10px var(--brand-10);
  transform: translateY(-1px);
}

/* ── Row sections inside ML card — styled segments ── */
.ml-asset-card .ml-row-section {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  box-shadow: none !important;
  border-top: 1px solid var(--brand-10) !important;
  position: static !important;
}
.ml-asset-card .ml-row-section::before {
  display: none !important;
}

/* Labels — uppercase, gold tint */
.ml-row-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ── Confidence value — prominent ── */
.ml-ml-conf {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums;
}

/* Status value */
.ml-status-val {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* ── RL badge — more visible ── */
.fmod-rl-badge {
  border-radius: 10px !important;
  font-weight: 700 !important;
  border: 1px solid transparent;
}

/* "Not available" — cleaner ── */
.ml-na-tag {
  font-size: 10px !important;
  background: rgba(43,49,57,.4) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
  padding: 3px 12px !important;
  font-style: normal !important;
  color: var(--text-muted) !important;
  letter-spacing: .3px;
}

/* Source tag */
.ml-src-tag {
  font-size: 9px !important;
  color: var(--text-muted) !important;
  background: rgba(43,49,57,.3);
  padding: 1px 6px;
  border-radius: 6px;
  font-style: normal !important;
}

/* ── ARIMA forecast — visual hierarchy ── */
.ml-asset-card .ml-forecast-row {
  padding: 10px 0 !important;
  border-top: 1px solid var(--brand-10) !important;
  margin-top: 2px !important;
}
.ml-forecast-hd {
  margin-bottom: 8px !important;
}
.ml-forecast-horizon {
  font-size: 10px !important;
  background: var(--brand-10);
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--brand-20);
  color: var(--brand) !important;
  font-weight: 600;
}
.ml-price-range {
  padding: 6px 10px !important;
  background: rgba(0,0,0,.15);
  border-radius: 8px;
  border: 1px solid var(--brand-10);
  gap: 8px !important;
}
.ml-price-mean {
  font-size: 14px !important;
  text-shadow: 0 0 8px var(--brand-20);
}
.ml-price-lo, .ml-price-hi {
  font-size: 11px !important;
}
.ml-price-ci-bar {
  height: 5px !important;
  border-radius: 3px !important;
  background: rgba(43,49,57,.5) !important;
  margin-top: 6px !important;
  border: 1px solid rgba(255,255,255,.02);
}

/* ── Volatility — number glow ── */
.ml-vol-val {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* ── Similar Cases — better tags ── */
.ml-cases-count {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

/* ── Case Analysis strip ── */
.ca-strip {
  padding: 6px 0;
  gap: 6px;
}
.ca-chip {
  padding: 3px 10px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  border: 1px solid rgba(255,255,255,.04);
}

/* ── ML Footer — subtle ── */
.ml-footer {
  padding-top: 8px !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
  gap: 12px !important;
}
.ml-footer-item {
  font-size: 11px !important;
  color: var(--text-muted);
}
.ml-footer-item strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ── NA row ── */
.ml-na-row {
  padding: 8px 0 !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
  font-size: 11px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Tier C: Model Quality + Risk Dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Model Quality panel ── */
.model-quality-panel {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  position: relative;
  margin-bottom: 8px;
}
.model-quality-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.2), transparent 70%);
  border-radius: 12px 12px 0 0;
}
.model-quality-panel .mkt-section-title {
  color: #F0B90B !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-shadow: 0 0 8px rgba(240,185,11,.1);
}

/* MQ Cards — branded */
.mq-card {
  --brand: #5e6673;
  --brand-20: #5e667333;
  --brand-10: #5e66731a;
  background: rgba(0,0,0,.15) !important;
  border: 1px solid var(--brand-20) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
/* Top accent stripe */
.mq-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), transparent 70%);
  opacity: .6;
}
.mq-card:hover {
  border-color: var(--brand-20) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 12px var(--brand-10) !important;
  transform: translateY(-1px);
}
.mq-sym {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--brand) !important;
  text-shadow: 0 0 10px var(--brand-20);
  letter-spacing: .3px;
}
.mq-status {
  padding: 3px 10px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border: 1px solid transparent;
}
.mq-warn {
  border-color: rgba(240,185,11,.15) !important;
}
.mq-degraded {
  border-color: rgba(246,70,93,.15) !important;
}
.mq-ok {
  background: rgba(14,203,129,.12) !important;
  color: var(--green) !important;
  border-color: rgba(14,203,129,.15) !important;
}
.mq-metric-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
}
.mq-metric-val {
  font-size: 14px !important;
  font-weight: 800 !important;
}
.mq-footer {
  font-size: 9px !important;
  color: var(--text-muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--brand-10, rgba(255,255,255,.03));
}

/* ── Status bar (Normal | Risk | Score | Regime) ── */
.krit-statusbar {
  background: linear-gradient(135deg, rgba(22,26,30,.95) 0%, rgba(30,34,38,.9) 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.krit-zone-badge {
  padding: 4px 14px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  border: 1px solid transparent;
}
.krit-zone-bg-NORMAL { border-color: rgba(240,185,11,.15) !important; }
.krit-zone-bg-ELEVATED { border-color: rgba(46,134,255,.15) !important; }
.krit-zone-bg-CRITICAL { border-color: rgba(246,70,93,.15) !important; }
.krit-val {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* ── Risk Drivers + Gate Confirmation panels ── */
.krit-panel {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.krit-panel-title {
  color: var(--accent) !important;
  font-size: 11px !important;
  letter-spacing: .7px !important;
  text-shadow: 0 0 6px rgba(240,185,11,.06);
  margin-bottom: 12px !important;
}

/* Progress bars — thicker with glow */
.krit-bar-track {
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(43,49,57,.5) !important;
  border: 1px solid rgba(255,255,255,.03) !important;
}
.krit-bar-fill {
  border-radius: 3px !important;
  box-shadow: 0 0 4px currentColor;
}
.krit-bar-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}
.krit-bar-num {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums;
}

/* Gate Confirmation — prominent 0% */
.krit-confirm-pct {
  font-size: 32px !important;
  text-shadow: 0 0 12px currentColor;
}
.krit-confirm-sub {
  font-size: 9px !important;
  letter-spacing: .8px !important;
  color: var(--text-muted) !important;
}

/* Gate checklist — better rows */
.krit-check-row {
  padding: 3px 6px !important;
  border-radius: 4px;
  transition: background .15s;
}
.krit-check-row:hover {
  background: rgba(255,255,255,.02);
}
.krit-check-icon {
  font-size: 12px !important;
}
.krit-check-lbl {
  font-size: 11px !important;
}

/* Gate chips — bigger with border */
.krit-gate-chip {
  padding: 3px 8px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border: 1px solid transparent;
}
.krit-gate-chip.krit-gate-PASS { border-color: rgba(14,203,129,.15); }
.krit-gate-chip.krit-gate-FAIL { border-color: rgba(246,70,93,.15); }

/* ── Risk Zone / Risk Score / Regime — bottom grid ── */
.krit-panels-row {
  gap: 8px !important;
}

/* Risk Score value */
.krit-panel .krit-val[style*="font-size:2"],
.krit-panel .krit-score-val {
  font-variant-numeric: tabular-nums;
}

/* Tier-C toggle — cleaner */
.tier-c-toggle {
  background: rgba(22,26,30,.6) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  transition: all .15s;
}
.tier-c-toggle:hover {
  border-color: rgba(240,185,11,.1) !important;
  color: var(--accent) !important;
}
.tier-c-body {
  background: rgba(22,26,30,.3);
  border-radius: 0 0 10px 10px;
  padding: 10px 12px 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Conformal Coverage, Model Disagreement, Contextual Reliability
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Conformal Coverage panel ── */
.cf-inner {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  position: relative;
}
.cf-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.2), transparent 70%);
  border-radius: 12px 12px 0 0;
}
.cf-title {
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(240,185,11,.08);
}
.cf-badge {
  padding: 3px 12px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border: 1px solid transparent;
}
.cf-status-warn { border-color: rgba(240,185,11,.15) !important; }
.cf-status-bad  { border-color: rgba(246,70,93,.15) !important; }
.cf-status-ok   { border-color: rgba(14,203,129,.15) !important; }
.cf-cell-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .6px;
}
.cf-cell-val {
  font-size: 14px !important;
  font-weight: 800 !important;
}
.cf-intervals-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  color: var(--text-muted) !important;
}
.cf-sym-chip {
  padding: 3px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1px solid transparent;
}
.cf-sym-ok   { border-color: rgba(14,203,129,.12) !important; }
.cf-sym-bad  { border-color: rgba(246,70,93,.12) !important; }
.cf-sym-warn { border-color: rgba(240,185,11,.12) !important; }

/* ── Model Disagreement + Contextual Reliability panels ── */
.rr-inner {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  position: relative;
}
.rr-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.2), transparent 70%);
  border-radius: 12px 12px 0 0;
}
.rr-title {
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(240,185,11,.08);
  margin-bottom: 10px;
}

/* Info grid items */
.rr-info-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.rr-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(0,0,0,.1);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.02);
}
.rr-info-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  min-width: 120px;
  flex-shrink: 0;
}
.rr-info-value {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.rr-info-value .disag-low,
.disag-low {
  color: var(--green) !important;
}

/* Probs/Weaknesses */
.rr-probs-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.rr-probs-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rr-prob-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(0,0,0,.1);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.02);
  font-size: 12px;
}
.rr-prob-label {
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  min-width: 110px;
}
.rr-prob-val {
  font-weight: 700 !important;
}

/* Probability bars */
.rr-prob-bar-bg {
  height: 5px !important;
  border-radius: 3px !important;
  background: rgba(43,49,57,.5) !important;
  border: 1px solid rgba(255,255,255,.03);
}
.rr-prob-bar-fill {
  border-radius: 3px !important;
}
.rr-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
}
.rr-val {
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Warning notes */
.rr-note {
  padding: 4px 8px !important;
  background: rgba(246,70,93,.04);
  border-radius: 4px;
  margin-top: 4px;
  border-left: 2px solid rgba(246,70,93,.2);
}

/* ── Calibration panel at bottom ── */
.cal-inner {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  position: relative;
}
.cal-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.2), transparent 70%);
  border-radius: 12px 12px 0 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Active Calibration Debug Panel
   ═══════════════════════════════════════════════════════════════════════════ */

.cal-debug-details {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 12px !important;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.cal-debug-details::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.2), transparent 70%);
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

.cal-debug-summary {
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  letter-spacing: .5px;
  transition: color .15s;
}
.cal-debug-summary:hover {
  color: var(--accent) !important;
}
.cal-debug-icon {
  opacity: .8 !important;
  font-size: 14px;
}
.cal-debug-badge {
  background: rgba(240,185,11,.12) !important;
  color: var(--accent) !important;
  border-radius: 8px !important;
  padding: 3px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  border: 1px solid rgba(240,185,11,.1);
}

.cal-debug-grid {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
  gap: 1px !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
}

.cal-debug-item {
  background: rgba(0,0,0,.12) !important;
  padding: 10px 14px !important;
  border-radius: 0 !important;
  gap: 4px !important;
  transition: background .15s;
}
.cal-debug-item:hover {
  background: rgba(240,185,11,.04) !important;
}

.cal-debug-label {
  color: var(--text-muted) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase;
}
.cal-debug-label .ws-help-inline {
  opacity: .5;
  font-size: 9px;
}

.cal-debug-value {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}

.cal-debug-full {
  grid-column: 1 / -1;
  background: rgba(0,0,0,.15) !important;
  border-top: 1px solid rgba(240,185,11,.06) !important;
  padding: 8px 14px !important;
}
.cal-debug-full .cal-debug-value {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — ML Debug: Raw Data Panel
   ═══════════════════════════════════════════════════════════════════════════ */

.ml-debug-details {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-style: solid !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin-top: 10px !important;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.ml-debug-details::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.15), transparent 70%);
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

.ml-debug-summary {
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  letter-spacing: .4px;
  transition: color .15s;
}
.ml-debug-summary:hover {
  color: var(--accent) !important;
}

.ml-debug-content {
  padding: 10px 16px 14px !important;
  gap: 10px !important;
  border-top: 1px solid rgba(255,255,255,.04);
}

.ml-debug-card {
  flex: 0 0 340px !important;
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  transition: border-color .2s;
}
.ml-debug-card:hover {
  border-color: rgba(240,185,11,.1) !important;
}

.ml-debug-card strong {
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(240,185,11,.06);
  margin-bottom: 8px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.ml-debug-table {
  font-size: 10px !important;
}
.ml-debug-table td {
  padding: 3px 8px !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  color: var(--text-secondary) !important;
}
.ml-debug-table td:first-child {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
}
.ml-debug-table tr:last-child td {
  border-bottom: none !important;
}
.ml-debug-table tr:hover td {
  background: rgba(240,185,11,.02);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Safety Disclaimer Footer
   ═══════════════════════════════════════════════════════════════════════════ */

.safety-disclaimer {
  background: linear-gradient(135deg, rgba(22,26,30,.8) 0%, rgba(30,34,38,.7) 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-top: var(--ws-gap-section) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
}
.safety-disclaimer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
}
.disclaimer-icon {
  font-size: 14px !important;
  margin-right: 6px !important;
  opacity: .7;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Plan Builder v2: Premium Trading Terminal UX
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PB Select dropdown — compact gold accent ── */
.pb-select {
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  background: rgba(240,185,11,.06) !important;
  border: 1px solid rgba(240,185,11,.15) !important;
  color: var(--accent) !important;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(240,185,11,.1);
  transition: all .2s;
}
.pb-select:hover {
  border-color: rgba(240,185,11,.3) !important;
  box-shadow: 0 0 12px rgba(240,185,11,.12) !important;
  background: rgba(240,185,11,.1) !important;
}

/* ── HOLD badge next to selector — compact ── */
.pb-header-left .ts-badge {
  font-size: 10px !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
}

/* ── Level cards — compact but clear ── */
.pb-header-levels .pb-level-item {
  padding: 8px 12px 8px 14px !important;
  background: rgba(0,0,0,.2) !important;
  border-radius: 10px !important;
  min-width: 80px !important;
  gap: 3px !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}
.pb-header-levels .pb-level-item:hover {
  border-color: rgba(240,185,11,.12) !important;
  background: rgba(0,0,0,.25) !important;
}
/* Entry item — gold accent bar */
.pb-header-levels .pb-level-item::before {
  width: 3px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 6px rgba(240,185,11,.2);
}
/* SL — red glow */
.pb-header-levels .pb-level-sl {
  border-color: rgba(246,70,93,.1) !important;
}
.pb-header-levels .pb-level-sl::before {
  box-shadow: 0 0 10px rgba(246,70,93,.35) !important;
}
/* TP — green glow */
.pb-header-levels .pb-level-tp {
  border-color: rgba(14,203,129,.1) !important;
}
.pb-header-levels .pb-level-tp::before {
  box-shadow: 0 0 10px rgba(14,203,129,.35) !important;
}

/* ── Level labels — slightly larger ── */
.pb-header-levels .pb-level-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  color: var(--text-muted) !important;
}

/* ── Level values — clear price numbers ── */
.pb-header-levels .pb-level-val {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  font-variant-numeric: tabular-nums;
}

/* ── Source badges — pill style with glow ── */
.pb-header-levels .pb-level-source {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  letter-spacing: .5px;
  display: inline-block;
  margin-top: 2px;
}
.pb-header-levels .pb-level-source-sl {
  background: rgba(246,70,93,.1) !important;
  border: 1px solid rgba(246,70,93,.12) !important;
  color: var(--red) !important;
}
.pb-header-levels .pb-level-source-tp {
  background: rgba(14,203,129,.1) !important;
  border: 1px solid rgba(14,203,129,.12) !important;
  color: var(--green) !important;
}

/* ── AUTO/MANUAL mode toggle — compact premium ── */
.pb-mode-toggle {
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  overflow: hidden;
}
.pb-mode-btn {
  padding: 5px 12px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  transition: all .15s;
}
.pb-mode-btn .pb-mode-sub {
  font-size: 7px !important;
  letter-spacing: .2px;
}
.pb-mode-active {
  background: #f0b90b !important;
  color: #0b0e11 !important;
}

/* ── Metrics row — compact card-style cells ── */
.pb-metrics-inline {
  padding: 8px 0 6px !important;
  gap: 5px !important;
  flex-wrap: wrap;
}
.pb-metrics-inline > span,
.pb-metrics-inline > div {
  background: rgba(0,0,0,.12);
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.03);
  font-size: 12px !important;
}
.pb-metrics-inline strong {
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* ── Risk metric — red accent ── */
.pb-metrics-inline .pb-metric-risk {
  border-color: rgba(246,70,93,.08) !important;
}
.pb-metrics-inline .pb-metric-risk strong {
  color: var(--red) !important;
  text-shadow: 0 0 6px rgba(246,70,93,.15);
}
/* ── Reward metric — green accent ── */
.pb-metrics-inline .pb-metric-reward {
  border-color: rgba(14,203,129,.08) !important;
}
.pb-metrics-inline .pb-metric-reward strong {
  color: var(--green) !important;
  text-shadow: 0 0 6px rgba(14,203,129,.15);
}
/* ── R:R ratio metric — always prominent gold ── */
.pb-metrics-inline .pb-rr-highlight {
  border-color: rgba(240,185,11,.1) !important;
  background: rgba(240,185,11,.04) !important;
}
.pb-metrics-inline .pb-rr-highlight strong {
  color: var(--accent) !important;
  text-shadow: 0 0 8px rgba(240,185,11,.15);
  font-size: 16px !important;
}

/* ── R:R Visual Bar — compact ── */
.ts-rr-visual {
  height: 7px !important;
  border-radius: 4px !important;
  margin-top: 6px !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}
.ts-rr-visual-risk {
  background: linear-gradient(90deg, rgba(246,70,93,.7), rgba(246,70,93,.4)) !important;
}
.ts-rr-visual-reward {
  background: linear-gradient(90deg, rgba(14,203,129,.4), rgba(14,203,129,.7)) !important;
}
.ts-rr-visual-labels {
  margin-top: 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
}

/* ── Position Size — clear dash ── */
.pb-metrics-inline .pb-metric-pos {
  color: var(--text-muted) !important;
}

/* ── Header — compact inline layout ── */
.pb-header {
  border-bottom: 1px solid rgba(240,185,11,.06) !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: center !important;
}
/* Push toggle to right side */
.pb-mode-toggle {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — MANUAL Mode: Premium Trading Form
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Form header — restructured with clear hierarchy ── */
.ts-form-header {
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(240,185,11,.06) !important;
}
.ts-form-header-left {
  gap: 10px !important;
}
.ts-form-title {
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}
.ts-form-symbol {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  text-shadow: 0 0 12px rgba(240,185,11,.15) !important;
  letter-spacing: .5px;
}
.ts-form-hold-badge {
  font-size: 11px !important;
  padding: 5px 14px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
}

/* ── Action buttons row — better visual weight ── */
.ts-form-header-actions {
  gap: 8px !important;
}
.ts-form-header-actions .ts-btn-save {
  padding: 9px 22px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .5px;
  border-radius: 10px !important;
}
.ts-form-header-actions .ts-btn-copy {
  padding: 9px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(240,185,11,.12) !important;
  color: var(--accent) !important;
  background: rgba(240,185,11,.04) !important;
}
.ts-form-header-actions .ts-btn-copy:hover {
  background: rgba(240,185,11,.1) !important;
  border-color: rgba(240,185,11,.25) !important;
}

/* ── Save as Default — subtle outline ── */
.ts-btn-defaults {
  font-size: 11px !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  transition: all .15s;
}
.ts-btn-defaults:hover {
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text-secondary) !important;
}

/* ── Reset to Auto — compact accent ── */
.pb-reset-btn {
  font-size: 10px !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(240,185,11,.1) !important;
  color: var(--text-muted) !important;
  transition: all .15s;
}
.pb-reset-btn:hover {
  color: var(--accent) !important;
  border-color: rgba(240,185,11,.25) !important;
  background: rgba(240,185,11,.04) !important;
}

/* ── Trade Style row — premium card ── */
.ts-style-row {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
}
.ts-style-row label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: .3px;
}
.ts-field-inline select {
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.2) !important;
  border: 1px solid rgba(240,185,11,.1) !important;
  color: var(--text-primary) !important;
}
.ts-field-inline select:hover {
  border-color: rgba(240,185,11,.2) !important;
}
.ts-style-horizon {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 10px !important;
  background: rgba(240,185,11,.08) !important;
  border: 1px solid rgba(240,185,11,.08) !important;
  color: var(--accent) !important;
  letter-spacing: .4px;
}

/* ── Direction row — labels + grid ── */
.ts-dir-row {
  margin-bottom: 8px !important;
}
.ts-dir-row > label,
.ts-field > label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px !important;
}

/* ── LONG / SHORT buttons — vivid, Binance-style ── */
.ts-dir-btn {
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  letter-spacing: 1px;
  transition: all .2s !important;
  position: relative;
  overflow: hidden;
}
.ts-dir-btn.ts-long {
  border: 1px solid rgba(14,203,129,.12) !important;
  color: rgba(14,203,129,.45) !important;
  background: rgba(14,203,129,.03) !important;
}
.ts-dir-btn.ts-long:hover {
  background: rgba(14,203,129,.08) !important;
  border-color: rgba(14,203,129,.25) !important;
  color: var(--green) !important;
  box-shadow: 0 0 16px rgba(14,203,129,.1);
}
.ts-dir-btn.ts-short {
  border: 1px solid rgba(246,70,93,.12) !important;
  color: rgba(246,70,93,.45) !important;
  background: rgba(246,70,93,.03) !important;
}
.ts-dir-btn.ts-short:hover {
  background: rgba(246,70,93,.08) !important;
  border-color: rgba(246,70,93,.25) !important;
  color: var(--red) !important;
  box-shadow: 0 0 16px rgba(246,70,93,.1);
}

/* ── Active direction — strong glow ── */
.ts-dir-active.ts-long {
  background: rgba(14,203,129,.1) !important;
  border-color: rgba(14,203,129,.3) !important;
  color: var(--green) !important;
  box-shadow: 0 0 24px rgba(14,203,129,.15), inset 0 0 20px rgba(14,203,129,.05) !important;
}
.ts-dir-active.ts-short {
  background: rgba(246,70,93,.1) !important;
  border-color: rgba(246,70,93,.3) !important;
  color: var(--red) !important;
  box-shadow: 0 0 24px rgba(246,70,93,.15), inset 0 0 20px rgba(246,70,93,.05) !important;
}

/* ── Entry Price input — larger, premium ── */
.ts-input {
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s;
}
.ts-input:focus {
  border-color: rgba(240,185,11,.2) !important;
  box-shadow: 0 0 8px rgba(240,185,11,.08) !important;
}

/* ── Refresh price button — gold accent, bigger ── */
.ts-use-price {
  width: 42px !important;
  height: 42px !important;
  font-size: 18px !important;
  border-radius: 10px !important;
  background: rgba(240,185,11,.08) !important;
  border: 1px solid rgba(240,185,11,.15) !important;
  color: var(--accent) !important;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-use-price:hover {
  background: rgba(240,185,11,.15) !important;
  border-color: rgba(240,185,11,.3) !important;
  box-shadow: 0 0 10px rgba(240,185,11,.12);
  transform: rotate(90deg);
}

/* ── SL / TP sections — premium card with accent bars ── */
.ts-field[data-field="sl"],
.ts-field[data-field="tp"] {
  border-radius: 12px !important;
  padding: 16px 18px 14px 22px !important;
  background: rgba(0,0,0,.1) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  transition: border-color .2s;
}
.ts-field[data-field="sl"]::before,
.ts-field[data-field="tp"]::before {
  width: 4px !important;
  border-radius: 4px 0 0 4px !important;
}
.ts-field[data-field="sl"] {
  border-color: rgba(246,70,93,.08) !important;
}
.ts-field[data-field="sl"]:hover {
  border-color: rgba(246,70,93,.2) !important;
}
.ts-field[data-field="tp"] {
  border-color: rgba(14,203,129,.08) !important;
}
.ts-field[data-field="tp"]:hover {
  border-color: rgba(14,203,129,.2) !important;
}

/* ── SL/TP labels — larger ── */
.ts-field[data-field="sl"] > label,
.ts-field[data-field="tp"] > label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
}

/* ── Source labels — premium pills ── */
.ts-source-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.ts-field[data-field="sl"] .ts-source-label {
  background: rgba(246,70,93,.08) !important;
  color: var(--red) !important;
  border: 1px solid rgba(246,70,93,.1);
}
.ts-field[data-field="tp"] .ts-source-label {
  background: rgba(14,203,129,.08) !important;
  color: var(--green) !important;
  border: 1px solid rgba(14,203,129,.1);
}

/* ── Percent buttons — bigger, more interactive ── */
.ts-pct-btn {
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.03) !important;
  transition: all .15s !important;
}
.ts-field[data-field="sl"] .ts-pct-btn:hover {
  background: rgba(246,70,93,.1) !important;
  color: var(--red) !important;
  border-color: rgba(246,70,93,.2) !important;
  box-shadow: 0 0 8px rgba(246,70,93,.08);
}
.ts-field[data-field="tp"] .ts-pct-btn:hover {
  background: rgba(14,203,129,.1) !important;
  color: var(--green) !important;
  border-color: rgba(14,203,129,.2) !important;
  box-shadow: 0 0 8px rgba(14,203,129,.08);
}

/* ── CI / Forecast buttons — gold accent ── */
.ts-auto-btn {
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: rgba(240,185,11,.06) !important;
  border: 1px solid rgba(240,185,11,.12) !important;
  color: var(--accent) !important;
}
.ts-auto-btn:hover {
  background: rgba(240,185,11,.12) !important;
  border-color: rgba(240,185,11,.25) !important;
  box-shadow: 0 0 8px rgba(240,185,11,.1);
}

/* ── SL/TP grid gap ── */
.ts-sl-tp-row {
  gap: 14px !important;
  margin-top: 8px !important;
}

/* ── Quick btns row spacing ── */
.ts-quick-btns {
  gap: 6px !important;
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Contextual Reliability: Visual Redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global reliability section ── */
.rr-global-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.rr-global-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.rr-global-badge {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
}
.rr-global-support {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Progress bar (global) ── */
.rr-progress-track {
  height: 8px;
  background: rgba(43,49,57,.5);
  border-radius: 4px;
  overflow: visible;
  position: relative;
  border: 1px solid rgba(255,255,255,.03);
}
.rr-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s ease;
  box-shadow: 0 0 6px currentColor;
}
.rr-progress-markers {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
}
.rr-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: calc(100% + 4px);
  background: rgba(255,255,255,.2);
  border-radius: 1px;
}

/* ── Tier scale labels ── */
.rr-tier-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.rr-tier-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .7;
}

/* ── "Need X more" callout ── */
.rr-need-more {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(240,185,11,.04);
  border: 1px solid rgba(240,185,11,.08);
  border-radius: 8px;
  text-align: center;
}
.rr-need-more strong {
  color: var(--accent);
  font-weight: 800;
}

/* ── Context match row ── */
.rr-context-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 10px;
  background: rgba(0,0,0,.1);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.03);
  flex-wrap: wrap;
}
.rr-ctx-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}
.rr-ctx-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid;
  opacity: .9;
}
.rr-ctx-dims {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Dimension breakdown title ── */
.rr-dims-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ── Dimension cards grid ── */
.rr-dims-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.rr-dim-card {
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 8px;
  padding: 8px 10px;
  transition: border-color .2s;
}
.rr-dim-card:hover {
  border-color: rgba(255,255,255,.06);
}
.rr-dim-warn {
  border-color: rgba(246,70,93,.06);
}
.rr-dim-ok {
  border-color: rgba(14,203,129,.06);
}

.rr-dim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rr-dim-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}
.rr-dim-status {
  font-size: 10px;
  font-weight: 700;
}

/* ── Dimension mini progress bar ── */
.rr-dim-bar-track {
  height: 4px;
  background: rgba(43,49,57,.5);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.rr-dim-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}

/* ── Dimension meta ── */
.rr-dim-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rr-dim-samples {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rr-dim-need {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  opacity: .8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Model Disagreement: Visual Redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Gauge section ── */
.md-gauge-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.md-gauge-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.md-gauge-pct {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.md-gauge-label {
  font-size: 12px;
  font-weight: 700;
}
.md-gauge-experts {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Gauge bar ── */
.md-gauge-track {
  height: 8px;
  background: rgba(43,49,57,.5);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.03);
}
.md-gauge-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s ease;
  box-shadow: 0 0 6px currentColor;
}
.md-gauge-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .7;
}

/* ── Expert signals title ── */
.md-experts-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ── Expert cards grid ── */
.md-experts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.md-expert-card {
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 8px;
  padding: 8px 10px;
  transition: border-color .2s;
}
.md-expert-card:hover {
  border-color: rgba(255,255,255,.06);
}
.md-expert-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
}
.md-expert-dir {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.md-expert-icon {
  font-size: 16px;
  font-weight: 800;
}
.md-expert-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
}
.md-expert-strength {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  opacity: .8;
  font-variant-numeric: tabular-nums;
}

/* ── Expert mini bar ── */
.md-expert-bar-track {
  height: 3px;
  background: rgba(43,49,57,.5);
  border-radius: 2px;
  overflow: hidden;
}
.md-expert-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}

/* ── Empty state ── */
.md-empty-state {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(240,185,11,.03);
  border: 1px solid rgba(240,185,11,.06);
  border-radius: 8px;
  margin-top: 4px;
}
.md-empty-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.md-empty-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Top Area: Status, Readiness, Engine, Strips
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Status bar — subtle premium ── */
.status-bar {
  background: rgba(22,26,30,.5) !important;
  border: 1px solid rgba(43,49,57,.3) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  margin-bottom: var(--ws-gap-section) !important;
}
.status-dot {
  width: 8px !important;
  height: 8px !important;
  box-shadow: 0 0 6px currentColor;
}
.ws-last-update {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
}

/* ── Analysis bar — slightly more prominent ── */
.analysis-bar {
  background: linear-gradient(135deg, rgba(22,26,30,.95) 0%, rgba(30,34,38,.92) 100%) !important;
  border: 1px solid rgba(43,49,57,.3) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
}

/* Attribution badge */
.attribution-badge {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
.attr-mode {
  text-transform: uppercase;
  color: var(--accent) !important;
  letter-spacing: .5px;
}

/* ── Active Symbols strip — premium ── */
.active-symbols-strip {
  background: rgba(22,26,30,.4) !important;
  border: 1px solid rgba(43,49,57,.2) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
}
.active-symbols-strip b,
.active-symbols-strip strong {
  color: var(--accent) !important;
  font-weight: 800 !important;
}
.sym-edit-btn,
.active-symbols-strip a {
  border-radius: 8px !important;
  padding: 3px 10px !important;
  font-weight: 700 !important;
  border-color: rgba(240,185,11,.15) !important;
  transition: all .15s;
}
.sym-edit-btn:hover,
.active-symbols-strip a:hover {
  background: rgba(240,185,11,.1) !important;
  border-color: rgba(240,185,11,.25) !important;
}

/* ── Trading Readiness strip — premium ── */
.trading-readiness-strip {
  background: rgba(22,26,30,.4) !important;
  border: 1px solid rgba(43,49,57,.2) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}
.readiness-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase;
  color: var(--text-secondary) !important;
}
.readiness-badge {
  padding: 4px 14px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  border: 1px solid transparent;
}
.readiness-badge.ready,
.readiness-badge.READY {
  border-color: rgba(14,203,129,.15) !important;
}
.readiness-badge.caution {
  border-color: rgba(240,185,11,.15) !important;
}
.readiness-badge.not-ready {
  border-color: rgba(246,70,93,.15) !important;
}
.readiness-score {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums;
}
.readiness-why-btn {
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
}
.readiness-why-btn:hover {
  border-color: rgba(240,185,11,.15) !important;
  color: var(--accent) !important;
}

/* ── Engine Status chips — premium pills ── */
.engine-status-strip {
  background: rgba(22,26,30,.3) !important;
  border: 1px solid rgba(43,49,57,.2) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}
.eng-chip {
  padding: 4px 12px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  border: 1px solid transparent !important;
  transition: all .15s;
}
.eng-chip-on {
  background: rgba(14,203,129,.1) !important;
  color: var(--green) !important;
  border-color: rgba(14,203,129,.12) !important;
}
.eng-chip-off {
  background: rgba(246,70,93,.08) !important;
  color: var(--red) !important;
  border-color: rgba(246,70,93,.1) !important;
}
.eng-chip-warn {
  background: rgba(240,185,11,.08) !important;
  color: var(--accent) !important;
  border-color: rgba(240,185,11,.1) !important;
}
.eng-chip-val {
  font-weight: 800 !important;
  font-size: 10px !important;
}

/* ── Analysis strip (Sentiment) — premium bar ── */
.analysis-strip {
  background: rgba(22,26,30,.4) !important;
  border: 1px solid rgba(43,49,57,.2) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}
.sentiment-bar-track {
  border-radius: 4px !important;
  height: 6px !important;
  overflow: hidden;
}
.astrip-lbl {
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ── Applied Settings strip — premium ── */
.applied-settings-strip {
  background: rgba(22,26,30,.4) !important;
  border: 1px solid rgba(43,49,57,.25) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
}
.applied-settings-strip .sp-btn {
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Decision Brief Panel (HOLD/Signal card)
   ═══════════════════════════════════════════════════════════════════════════ */

.decision-brief-panel {
  --action-color: #848E9C;
  --action-20: #848E9C33;
  --action-10: #848E9C1a;
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid var(--action-20) !important;
  border-radius: 12px !important;
  padding: 10px 12px 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
}
/* W1 top gold accent line (unified) */
.decision-brief-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
}
/* Corner glow */
.decision-brief-panel::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, var(--action-10) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Header v2 — Action badge + ring ── */
.db-header-v2 {
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.db-action-badge {
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 6px 18px !important;
  border-radius: 10px !important;
  letter-spacing: .5px;
  border: 1px solid transparent;
}
.db-action-badge.db-action-hold {
  border-color: rgba(240,185,11,.15);
}

/* ── Confidence ring ── */
.db-conf-ring {
  filter: drop-shadow(0 0 4px rgba(240,185,11,.1));
}
.db-conf-ring-pct {
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}

/* ── Meta labels ── */
.db-meta-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.db-meta-val {
  font-weight: 700 !important;
}
.db-meta-val-accent {
  color: var(--accent) !important;
}
.db-meta-stmt {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  line-height: 1.5;
}

/* ── Advice cards (What to do / Wait / NOT) ── */
.db-cards-row {
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.db-advice-card {
  background: rgba(0,0,0,.12) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.db-advice-card:hover {
  border-color: rgba(255,255,255,.08) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
/* Top accent line on each advice card */
.db-advice-now::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: linear-gradient(90deg, var(--green), transparent 70%); opacity: .5;
}
.db-advice-wait::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .5;
}
.db-advice-not::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: linear-gradient(90deg, var(--red), transparent 70%); opacity: .5;
}
.db-advice-hd {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted) !important;
  margin-bottom: 6px !important;
}
.db-advice-now .db-advice-hd {
  color: var(--green) !important;
}
.db-advice-not .db-advice-hd {
  color: var(--red) !important;
}
.db-advice-hint {
  font-size: 9px !important;
  color: rgba(255,255,255,.30) !important;
  margin: 2px 0 6px 0 !important;
  line-height: 1.3 !important;
}
.db-advice-body {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--text-primary) !important;
}

/* ── Factors for/against ── */
.db-factors-row {
  gap: 12px !important;
  margin-bottom: 14px !important;
}
.db-factors-col {
  background: rgba(0,0,0,.08) !important;
  border: 1px solid rgba(255,255,255,.03) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}
.db-factors-hd {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px !important;
}
.db-factors-for .db-factors-hd { color: var(--green) !important; }
.db-factors-against .db-factors-hd { color: var(--red) !important; }
.db-factor-item {
  font-size: 11px !important;
  padding: 3px 0 !important;
  color: var(--text-secondary) !important;
}
.db-factor-check { color: var(--green) !important; }
.db-factor-x { color: var(--red) !important; }

/* ── Bottom row — Risk meter + Opportunity ── */
.db-bottom-row {
  gap: 12px !important;
}
.db-risk-meter {
  background: rgba(0,0,0,.1) !important;
  border: 1px solid rgba(255,255,255,.03) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}
.db-risk-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted) !important;
}
.db-risk-bar-track {
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(43,49,57,.5) !important;
}
.db-risk-bar-fill {
  border-radius: 3px !important;
  box-shadow: 0 0 4px currentColor;
}
.db-risk-score {
  font-size: 16px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}
.db-risk-max {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}
.db-risk-zone {
  padding: 3px 10px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border: 1px solid transparent;
}

/* ── Opportunity card ── */
.db-opp-card {
  background: rgba(0,0,0,.1) !important;
  border: 1px solid rgba(255,255,255,.03) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}
.db-opp-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Learning Status Panel
   ═══════════════════════════════════════════════════════════════════════════ */

.ls-panel {
  background: linear-gradient(135deg, rgba(22,26,30,.8) 0%, rgba(30,34,38,.6) 100%) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.ls-toggle {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  color: var(--text-secondary) !important;
  transition: color .15s;
}
.ls-toggle:hover {
  color: var(--accent) !important;
}
.ls-toggle .ls-badge {
  padding: 3px 10px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Diagnostics toggle
   ═══════════════════════════════════════════════════════════════════════════ */

.tier-c-toggle {
  background: linear-gradient(135deg, rgba(22,26,30,.7) 0%, rgba(30,34,38,.5) 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #F0B90B !important;
  text-shadow: 0 0 8px rgba(240,185,11,.08);
  transition: all .15s;
}
.tier-c-toggle:hover {
  border-color: rgba(240,185,11,.12) !important;
  color: var(--accent) !important;
}
.tier-c-arrow {
  color: var(--accent) !important;
  font-size: 10px !important;
}
.tier-c-hint {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
}

/* ── Market Scenarios v2 — Binance Pro ──────────────────────── */
#scenarios-detail.krit-panel {
  background: linear-gradient(135deg, #181c20 0%, #1a1e24 100%) !important;
  border: 1px solid rgba(240, 185, 11, 0.08) !important;
  border-radius: 10px !important;
  padding: 14px !important;
}
.sc2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sc2-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}
.sc2-conviction {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sc2-conv-strong { background: rgba(14, 203, 129, 0.15); color: var(--green); }
.sc2-conv-mod { background: rgba(240, 185, 11, 0.15); color: var(--accent); }
.sc2-conv-mixed { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); }

/* Stacked probability bar */
.sc2-stacked-wrap {
  margin-bottom: 10px;
}
.sc2-stacked-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  gap: 1px;
}
.sc2-seg {
  transition: width 0.6s ease;
  min-width: 2px;
}
.sc2-seg-bull { background: var(--green); }
.sc2-seg-bear { background: var(--red); }
.sc2-seg-neut { background: rgba(255, 255, 255, 0.12); }
.sc2-stacked-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Lead scenario card */
.sc2-lead-card {
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.sc2-bg-bull { background: rgba(14, 203, 129, 0.08); border: 1px solid rgba(14, 203, 129, 0.15); }
.sc2-bg-bear { background: rgba(246, 70, 93, 0.08); border: 1px solid rgba(246, 70, 93, 0.15); }
.sc2-bg-neut { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.sc2-lead-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.sc2-lead-icon {
  font-size: 16px;
  font-weight: 700;
}
.sc2-lead-name {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
}
.sc2-lead-pct {
  font-size: 22px;
  font-weight: 800;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.sc2-lead-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
}
.sc2-lead-drivers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sc2-driver-chip {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(240, 185, 11, 0.12);
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.sc2-driver-sm {
  font-size: 8px;
  padding: 1px 6px;
}

/* Alternative scenarios grid */
.sc2-alts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.sc2-alt-card {
  border-radius: 8px;
  padding: 8px 10px;
}
.sc2-alt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
}
.sc2-alt-pct {
  font-size: 15px;
  font-weight: 800;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.sc2-alt-desc {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 4px;
}
.sc2-alt-drivers {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* What Could Change section */
.sc2-watch-section {
  background: rgba(240, 185, 11, 0.04);
  border: 1px solid rgba(240, 185, 11, 0.10);
  border-radius: 8px;
  padding: 8px 10px;
}
.sc2-watch-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.sc2-watch-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sc2-watch-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc2-watch-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sc2-watch-text {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Plan Builder v3 — Enhanced ─────────────────────────────── */
/* Plan quality badge */
.pb-plan-quality {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.pb-q-excellent { background: rgba(14, 203, 129, 0.15) !important; color: var(--green) !important; }
.pb-q-good { background: rgba(240, 185, 11, 0.15) !important; color: var(--accent) !important; }
.pb-q-fair { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-muted) !important; }
.pb-q-risky { background: rgba(246, 70, 93, 0.15) !important; color: var(--red) !important; }

/* SL/TP distance labels */
.pb-level-dist {
  font-size: 9px !important;
  color: var(--text-muted) !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  opacity: 0.8;
  display: block;
  margin-top: 1px;
}
.pb-level-sl .pb-level-dist { color: rgba(246, 70, 93, 0.7) !important; }
.pb-level-tp .pb-level-dist { color: rgba(14, 203, 129, 0.7) !important; }

/* Visual price scale */
.pb-price-scale {
  padding: 4px 12px 8px !important;
}
.pb-ps-track {
  position: relative;
  height: 20px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  margin: 0;
}
.pb-ps-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.pb-ps-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid;
}
.pb-ps-dot-entry { background: var(--accent); border-color: var(--accent); }
.pb-ps-dot-sl { background: var(--red); border-color: var(--red); }
.pb-ps-dot-tp { background: var(--green); border-color: var(--green); }
.pb-ps-lbl {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 1px;
}
.pb-ps-zone-risk {
  position: absolute;
  top: 8px;
  height: 4px;
  background: rgba(246, 70, 93, 0.25);
  border-radius: 2px;
  z-index: 1;
}
.pb-ps-zone-reward {
  position: absolute;
  top: 8px;
  height: 4px;
  background: rgba(14, 203, 129, 0.25);
  border-radius: 2px;
  z-index: 1;
}

/* Metrics v2 — R/R hero layout */
.pb-metrics-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
}
.pb-rr-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  min-width: 80px !important;
}
.pb-rr-hero-val {
  font-size: 20px !important;
  font-weight: 800 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  line-height: 1.1 !important;
}
.pb-rr-hero-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  opacity: 0.7;
  margin-top: 2px;
}
.pb-rr-excellent { background: rgba(14, 203, 129, 0.12) !important; }
.pb-rr-excellent .pb-rr-hero-val { color: var(--green) !important; }
.pb-rr-good { background: rgba(240, 185, 11, 0.12) !important; }
.pb-rr-good .pb-rr-hero-val { color: var(--accent) !important; }
.pb-rr-fair { background: rgba(255, 255, 255, 0.06) !important; }
.pb-rr-fair .pb-rr-hero-val { color: var(--text-secondary) !important; }
.pb-rr-risky { background: rgba(246, 70, 93, 0.12) !important; }
.pb-rr-risky .pb-rr-hero-val { color: var(--red) !important; }

.pb-metrics-side {
  display: flex !important;
  gap: 10px !important;
  flex: 1 !important;
}
.pb-metric-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 6px !important;
  min-width: 60px !important;
}
.pb-mc-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.pb-mc-val {
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  color: var(--text-primary) !important;
}

/* ── Model Quality v2 — Binance Pro ─────────────────────────── */
.mq2-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}
.mq2-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.mq2-summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mq2-health {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  border-radius: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.mq2-health-ok { background: rgba(14, 203, 129, 0.15) !important; color: var(--green) !important; }
.mq2-health-warn { background: rgba(240, 185, 11, 0.15) !important; color: var(--accent) !important; }
.mq2-health-deg { background: rgba(246, 70, 93, 0.15) !important; color: var(--red) !important; }
.mq2-health-nodata { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-muted) !important; }
.mq2-counts {
  font-size: 10px !important;
  font-weight: 600 !important;
  display: flex !important;
  gap: 6px !important;
}

/* Metric rows with bars */
.mq2-metrics {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin-top: 6px !important;
}
.mq2-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.mq2-row-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  width: 36px !important;
  flex-shrink: 0 !important;
}
.mq2-bar-track {
  flex: 1 !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.mq2-bar-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width 0.6s cubic-bezier(.4,0,.2,1) !important;
  min-width: 2px !important;
  box-shadow: 0 0 6px currentColor;
}
.mq2-row-val {
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  width: 36px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

/* NO_DATA collecting state */
.mq2-collecting {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 6px !important;
}
.mq2-collect-label {
  font-size: 9px !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
}
.mq2-collect-count {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--brand, var(--accent)) !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}
.mq2-progress-track {
  height: 4px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}
.mq2-progress-fill {
  height: 100% !important;
  border-radius: 2px !important;
  transition: width 0.6s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 0 4px currentColor;
}
.mq2-fill-gold { background: var(--accent) !important; }

/* ── Risk Summary Extension v2 — System Alerts ──────────────── */
.risk-summary-ext {
  grid-column: 1 / -1 !important;
  padding: 10px 12px !important;
  background: linear-gradient(135deg, #1a1215 0%, #1e1820 100%) !important;
  border: 1px solid rgba(246, 70, 93, 0.12) !important;
  border-radius: 10px !important;
}
.rse2-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}
.rse2-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.rse2-badges {
  display: flex !important;
  gap: 6px !important;
}
.rse2-count {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}
.rse2-count-crit { background: rgba(246, 70, 93, 0.15) !important; color: var(--red) !important; }
.rse2-count-warn { background: rgba(240, 185, 11, 0.15) !important; color: var(--accent) !important; }
.rse2-count-info { background: rgba(132, 142, 156, 0.10) !important; color: var(--text-muted) !important; }

/* Issue rows */
.rse2-issues {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.rse2-issue {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  border-left: 3px solid transparent !important;
}
.rse2-sev-critical {
  background: rgba(246, 70, 93, 0.06) !important;
  border-left-color: var(--red) !important;
}
.rse2-sev-warning {
  background: rgba(240, 185, 11, 0.04) !important;
  border-left-color: var(--accent) !important;
}
.rse2-sev-info {
  background: rgba(255, 255, 255, 0.02) !important;
  border-left-color: rgba(132, 142, 156, 0.3) !important;
}
.rse2-issue-icon {
  font-size: 10px !important;
  flex-shrink: 0 !important;
}
.rse2-issue-label {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  flex: 1 !important;
  line-height: 1.3 !important;
}
.rse2-sev-critical .rse2-issue-label { color: var(--red) !important; font-weight: 600 !important; }
.rse2-sev-warning .rse2-issue-label { color: var(--accent) !important; }
.rse2-issue-cats {
  display: flex !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}
.rse2-cat {
  font-size: 8px !important;
  padding: 1px 5px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}
.rse2-cat-threat { background: rgba(246, 70, 93, 0.12) !important; color: rgba(246, 70, 93, 0.7) !important; }
.rse2-cat-abstain { background: rgba(240, 185, 11, 0.10) !important; color: rgba(240, 185, 11, 0.7) !important; }
.rse2-cat-flag { background: rgba(132, 142, 156, 0.08) !important; color: rgba(132, 142, 156, 0.7) !important; }

/* ── Risk Dashboard v2 — Unified Risk Panel ─────────────────── */
.rk2-dashboard {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.5fr !important;
  gap: 12px !important;
  grid-column: 1 / -1 !important;
  padding: 12px !important;
  background: linear-gradient(135deg, #181c20 0%, #1a1e24 100%) !important;
  border: 1px solid rgba(240, 185, 11, 0.08) !important;
  border-radius: 10px !important;
}

/* Score section */
.rk2-score-section {
  display: flex !important;
  flex-direction: column !important;
}
.rk2-zone-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}
.rk2-delta {
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}
.rk2-gauge {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  margin-bottom: 4px !important;
}
.rk2-gauge-val {
  font-size: 28px !important;
  font-weight: 800 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  line-height: 1 !important;
}
.rk2-gauge-max {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
}
.rk2-gauge-bar {
  position: relative !important;
  height: 8px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin-bottom: 3px !important;
}
.rk2-gauge-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  border-radius: 4px !important;
  z-index: 2 !important;
  transition: width 0.6s ease !important;
}
.rk2-gauge-zones {
  display: flex !important;
  height: 100% !important;
}
.rk2-gz { height: 100% !important; }
.rk2-gz-safe { background: rgba(14, 203, 129, 0.12) !important; }
.rk2-gz-warn { background: rgba(240, 185, 11, 0.10) !important; }
.rk2-gz-danger { background: rgba(246, 70, 93, 0.10) !important; }
.rk2-gauge-labels {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 8px !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* Regime section */
.rk2-regime-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 8px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.rk2-regime-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 4px !important;
}
.rk2-regime-val {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 4px !important;
}
.rk2-regime-ctx {
  font-size: 10px !important;
  color: var(--accent) !important;
  font-style: italic !important;
  line-height: 1.3 !important;
  margin-bottom: 3px !important;
}
.rk2-regime-time {
  font-size: 9px !important;
  color: var(--text-muted) !important;
}

/* Risk Components breakdown */
.rk2-components {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.rk2-comp-title {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 2px !important;
}
.rk2-comp-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.rk2-comp-label {
  font-size: 10px !important;
  color: var(--text-secondary) !important;
  width: 60px !important;
  flex-shrink: 0 !important;
}
.rk2-comp-track {
  flex: 1 !important;
  height: 5px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.rk2-comp-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width 0.6s ease !important;
  min-width: 2px !important;
}
.rk2-comp-val {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  width: 36px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

/* ── Event Intelligence — Binance Pro ───────────────────────── */
.event-intelligence-panel {
  background: linear-gradient(135deg, #181c20 0%, #1a1e24 100%) !important;
  border: 1px solid rgba(240, 185, 11, 0.08) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}
.ei-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.ei-card::before { display: none !important; }
.ei-header {
  margin-bottom: 10px !important;
}
.ei-header-icon {
  font-size: 14px !important;
}
.ei-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.ei-type-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  border-radius: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.ei-ts {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}

/* Digestion pipeline — compact */
.ei-dig-pipeline {
  gap: 6px !important;
}
.ei-dig-stage {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.ei-dig-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.ei-dig-stage-icon {
  font-size: 14px !important;
}
.ei-badge {
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* Confirmation windows — compact timeline */
.ei-windows {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.ei-win-hd {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-muted) !important;
  margin-bottom: 6px !important;
}
.ei-win-count {
  font-weight: 400 !important;
  color: var(--text-muted) !important;
}
.ei-wt-node {
  text-align: center !important;
}
.ei-wt-dot {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 4px !important;
}
.ei-wt-name {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
}
.ei-wt-hours {
  font-size: 9px !important;
  color: var(--text-muted) !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}

/* Evidence + notes — compact */
.ei-notes {
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.ei-evidence-lbl {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.ei-notes-toggle {
  font-size: 10px !important;
  color: var(--accent) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Trading Readiness v2 (gauge + component bars)
   ═══════════════════════════════════════════════════════════════════════════ */
.tr2-strip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  position: relative !important;
}
.tr2-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.tr2-gauge {
  position: relative;
  width: 72px;
  height: 44px;
  flex-shrink: 0;
}
.tr2-gauge svg {
  filter: drop-shadow(0 0 6px currentColor);
}
.tr2-gauge-value {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
  line-height: 1;
  text-shadow: 0 0 16px currentColor;
}
.tr2-gauge-value.tr2-ready { color: #0ecb81 !important; }
.tr2-gauge-value.tr2-caution { color: #f0b90b !important; }
.tr2-gauge-value.tr2-not-ready { color: #f6465d !important; }
.tr2-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tr2-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .6px;
  padding: 3px 12px;
  border-radius: 8px;
  display: inline-block;
  width: fit-content;
  animation: mi-badgePop 400ms cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: 200ms;
}
.tr2-badge.tr2-ready {
  background: rgba(14,203,129,.1);
  color: #0ecb81 !important;
  border: 1px solid rgba(14,203,129,.15);
}
.tr2-badge.tr2-caution {
  background: rgba(240,185,11,.1);
  color: #f0b90b !important;
  border: 1px solid rgba(240,185,11,.15);
}
.tr2-badge.tr2-not-ready {
  background: rgba(246,70,93,.08);
  color: #f6465d !important;
  border: 1px solid rgba(246,70,93,.12);
}
.tr2-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted) !important;
}
.tr2-comps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.tr2-comp {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 120px;
}
.tr2-comp-name {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted) !important;
  white-space: nowrap;
  min-width: 48px;
}
.tr2-comp-bar-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(43,49,57,.5);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.tr2-comp-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s;
}
.tr2-comp-val {
  font-size: 10px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary) !important;
  white-space: nowrap;
}
.tr2-toggle-btn {
  background: none !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  transition: all .15s;
  flex-shrink: 0;
}
.tr2-toggle-btn:hover {
  border-color: rgba(240,185,11,.15) !important;
  color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Engine Status v2 (grouped chips with health indicator)
   ═══════════════════════════════════════════════════════════════════════════ */
.es2-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.es2-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .6px;
  background: linear-gradient(135deg, #D4A843, #F0D78C) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.es2-health {
  font-size: 11px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
}
.es2-health-ok {
  background: rgba(14,203,129,.1);
  color: #0ecb81 !important;
  border: 1px solid rgba(14,203,129,.12);
}
.es2-health-warn {
  background: rgba(240,185,11,.08);
  color: #f0b90b !important;
  border: 1px solid rgba(240,185,11,.1);
}
.es2-health-deg {
  background: rgba(246,70,93,.08);
  color: #f6465d !important;
  border: 1px solid rgba(246,70,93,.1);
}
.es2-groups {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.es2-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.es2-group-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted) !important;
  opacity: .6;
}
.es2-group-chips {
  display: flex;
  gap: 4px;
}
.es2-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
}
.es2-chip {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.es2-chip-icon {
  font-size: 8px !important;
  opacity: .5;
}
.es2-chip-label {
  font-size: 10px !important;
  font-weight: 700 !important;
}
.es2-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.es2-dot-on {
  background: #0ecb81;
  box-shadow: 0 0 6px rgba(14,203,129,.5);
  animation: ta-dotPulse 2.5s ease-in-out infinite;
}
@keyframes ta-dotPulse {
  0%,100% { box-shadow: 0 0 4px rgba(14,203,129,.4); }
  50%     { box-shadow: 0 0 8px rgba(14,203,129,.7); }
}
.es2-dot-off {
  background: #f6465d;
  box-shadow: 0 0 6px rgba(246,70,93,.4);
  animation: ta-dotWarn 1.5s ease-in-out infinite;
}
@keyframes ta-dotWarn {
  0%,100% { box-shadow: 0 0 4px rgba(246,70,93,.3); }
  50%     { box-shadow: 0 0 10px rgba(246,70,93,.6); }
}
/* Engine chip hover (W1) */
.es2-chip {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  cursor: help;
  transition: all 250ms cubic-bezier(.25,.46,.45,.94);
  animation: tierA-fadeUp 400ms cubic-bezier(.22,1,.36,1) both;
}
.es2-group-chips .es2-chip:nth-child(1) { animation-delay: 100ms; }
.es2-group-chips .es2-chip:nth-child(2) { animation-delay: 160ms; }
.es2-group-chips .es2-chip:nth-child(3) { animation-delay: 220ms; }
.es2-group-chips .es2-chip:nth-child(4) { animation-delay: 280ms; }
.es2-chip:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(212,168,67,.18);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(212,168,67,.06);
}
.es2-chip.eng-chip-on:hover {
  border-color: rgba(14,203,129,.25);
  box-shadow: 0 4px 12px rgba(14,203,129,.12);
}
/* Trading Readiness component bars — fill animation */
.tr2-comp-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .6s cubic-bezier(.25,.46,.45,.94);
  animation: tierA-barFill .6s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes tierA-barFill {
  from { width: 0% !important; }
}
/* Readiness score description */
.tr2-score-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #8B8D97;
  margin-top: 2px;
  line-height: 1.3;
}
/* Engine inline description */
.es2-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #5A5C66;
  margin-top: 4px;
  line-height: 1.4;
}
/* How to use / Why this matters sections */
.ta-howto {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(212,168,67,.03);
  border: 1px solid rgba(212,168,67,.08);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #8B8D97;
}
.ta-howto-title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #F0B90B;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
}
.ta-howto-item {
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}
.ta-howto-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #F0B90B;
  opacity: .7;
  flex-shrink: 0;
}
/* Attention chips — warning badges */
.ta-attn-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  transition: all 200ms;
}
.ta-attn-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.ta-attn-warn {
  background: rgba(245,158,11,.08);
  color: #F59E0B;
  border: 1px solid rgba(245,158,11,.12);
}
.ta-attn-danger {
  background: rgba(239,68,68,.06);
  color: #EF4444;
  border: 1px solid rgba(239,68,68,.1);
}
.ta-attn-ok {
  background: rgba(14,203,129,.06);
  color: #0ecb81;
  border: 1px solid rgba(14,203,129,.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATA FRESHNESS STRIP
   ═══════════════════════════════════════════════════════════════════════════ */
.data-freshness-strip {
  padding: 8px 12px;
}
.df-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.df-item {
  display: flex;
  align-items: center;
  gap: 3px;
}
.df-icon { font-size: 11px; opacity: .5; }
.df-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .3px;
}
.df-val {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.df-fresh { color: var(--green); }
.df-warm  { color: var(--accent); }
.df-stale { color: var(--red); }
.df-sep {
  color: rgba(255,255,255,.12);
  font-size: 10px;
  margin: 0 2px;
}
/* Data Freshness header with quality badge */
.df-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.df-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.df-quality {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIGNAL SUMMARY STRIP
   ═══════════════════════════════════════════════════════════════════════════ */
.signal-summary-strip {
  padding: 8px 12px;
}
.ss-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ss-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ss-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}
.ss-sym {
  font-weight: 800;
  letter-spacing: .3px;
}
.ss-arrow {
  font-size: 12px;
  font-weight: 800;
}
.ss-conf {
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  opacity: .8;
}
.ss-status {
  font-size: 9px;
  font-weight: 600;
  opacity: .7;
  letter-spacing: .3px;
}
.ss-actionable {
  background: rgba(14,203,129,.12);
  color: var(--green);
  border-color: rgba(14,203,129,.15);
}
.ss-watch {
  background: rgba(240,185,11,.10);
  color: var(--accent);
  border-color: rgba(240,185,11,.12);
}
.ss-hold {
  background: rgba(255,255,255,.05);
  color: var(--text-muted);
  border-color: rgba(255,255,255,.05);
}
.ss-blocked {
  background: rgba(246,70,93,.10);
  color: var(--red);
  border-color: rgba(246,70,93,.12);
}
/* Signal stats badge */
.ss-stats {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-left: 4px;
  opacity: .7;
}
/* Empty state */
.ss-empty-text {
  font-size: 11px;
  color: #5A5C66;
  font-style: italic;
}
/* Pill hover (W1) */
.ss-pill {
  transition: all 250ms cubic-bezier(.25,.46,.45,.94);
  cursor: help;
  animation: mi-badgePop 400ms cubic-bezier(.34,1.56,.64,1) both;
}
.ss-pills .ss-pill:nth-child(1) { animation-delay: 150ms; }
.ss-pills .ss-pill:nth-child(2) { animation-delay: 230ms; }
.ss-pills .ss-pill:nth-child(3) { animation-delay: 310ms; }
.ss-pills .ss-pill:nth-child(4) { animation-delay: 390ms; }
.ss-pills .ss-pill:nth-child(5) { animation-delay: 470ms; }
.ss-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATA SOURCES STRIP
   ═══════════════════════════════════════════════════════════════════════════ */
.data-sources-strip {
  padding: 8px 12px;
}
.ds-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ds-items {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary, #eaecef);
}
.ds-dot {
  font-size: 8px;
  line-height: 1;
}
.ds-on { color: var(--green); }
.ds-off { color: var(--red); }
.ds-na { color: rgba(255,255,255,.2); }
.ds-name {
  font-size: 10px;
  font-weight: 600;
}
.ds-count {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
/* Data Sources status summary */
.ds-status {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}
.ds-status-ok { color: var(--green); }
.ds-status-warn { color: var(--accent); }
.ds-status-bad { color: var(--red); }
/* Source item hover (W1) */
.ds-item {
  transition: all 250ms cubic-bezier(.25,.46,.45,.94);
  cursor: help;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  animation: tierA-fadeUp 400ms cubic-bezier(.22,1,.36,1) both;
}
.ds-items .ds-item:nth-child(1) { animation-delay: 100ms; }
.ds-items .ds-item:nth-child(2) { animation-delay: 160ms; }
.ds-items .ds-item:nth-child(3) { animation-delay: 220ms; }
.ds-items .ds-item:nth-child(4) { animation-delay: 280ms; }
.ds-item:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(212,168,67,.15);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Decision Brief v2 layout improvements
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── DB2 Layout v2 — Premium Decision Brief ─────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   DECISION BRIEF v2 — Premium Binance + Apple Redesign
   Glassmorphism cards, gold accents, 3D tilt, animated entrances
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframe Animations ───────────────────────────────────────────────── */
@keyframes db2-cardUp {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes db2-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes db2-ringGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(240,185,11,.15)); }
  50%      { filter: drop-shadow(0 0 10px rgba(240,185,11,.4)); }
}
@keyframes db2-badgePop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes db2-factorSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes db2-riskGlow {
  0%, 100% { box-shadow: 0 0 4px currentColor, 0 0 0 transparent; }
  50%      { box-shadow: 0 0 10px currentColor, 0 0 18px rgba(240,185,11,.15); }
}
@keyframes db2-guardPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246,70,93,.15); }
  50%      { box-shadow: 0 0 0 6px rgba(246,70,93,.05); }
}
@keyframes db2-confCount {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Main Layout ───────────────────────────────────────────────────────── */
.db2-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}

/* ── Shared Card Base (glassmorphism) ──────────────────────────────────── */
/* W1 glassmorphism: ultra-transparent bg, NO blur, 12px radius */
.db2-hero,
.db2-context-strip,
.db2-advice-grid .db-advice-card,
.db-factors-col,
.db2-risk,
.db2-opp,
.db2-risk-breakdown {
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.db2-hero:hover,
.db2-context-strip:hover,
.db2-advice-grid .db-advice-card:hover,
.db-factors-col:hover,
.db2-risk:hover,
.db2-risk-breakdown:hover,
.db2-opp:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(212,168,67,.15);
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(212,168,67,.06);
}

/* ── Shimmer Border Overlay (on hover) ─────────────────────────────────── */
/* Shimmer outline on ALL db2 boxes */
.db2-hero::after,
.db2-context-strip::after,
.db2-advice-grid .db-advice-card::after,
.db-factors-col::after,
.db2-risk::after,
.db2-risk-breakdown::after,
.db2-opp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,168,67,.35) 25%,
    rgba(240,215,140,.5) 50%,
    rgba(212,168,67,.35) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.db2-hero:hover::after,
.db2-context-strip:hover::after,
.db2-advice-grid .db-advice-card:hover::after,
.db-factors-col:hover::after,
.db2-risk:hover::after,
.db2-risk-breakdown:hover::after,
.db2-opp:hover::after {
  opacity: 1;
  animation: db2-shimmer 2s linear infinite;
}

/* ── 3D Tilt Container ─────────────────────────────────────────────────── */
.db2-tilt {
  transform-style: preserve-3d;
  transition: transform .15s ease-out;
}

/* ── Sequential Entrance ───────────────────────────────────────────────── */
.db2-hero,
.db2-context-strip,
.db2-advice-grid .db-advice-card,
.db-factors-col,
.db2-risk,
.db2-opp,
.db2-risk-breakdown {
  animation: db2-cardUp .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--db2-delay, 0ms);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO W1 — Horizontal card, W1 glassmorphism, compact
   ═══════════════════════════════════════════════════════════════════════════ */
.db2-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 12px;
  flex-wrap: wrap;
}

/* — Action column (badges + rec text) — */
.db2-hero-headline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  min-width: 120px;
}
.db2-hero-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* — Direction Badges — */
.db2-direction {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .6px;
  animation: db2-badgePop .4s cubic-bezier(.22,1,.36,1) both;
}
.db2-direction.db-dir-long {
  background: rgba(14,203,129,.12);
  color: #0ecb81 !important;
  border: 1px solid rgba(14,203,129,.2);
}
.db2-direction.db-dir-short {
  background: rgba(246,70,93,.1);
  color: #f6465d !important;
  border: 1px solid rgba(246,70,93,.18);
}
.db2-direction.db-dir-neutral {
  background: rgba(240,185,11,.1);
  color: #f0b90b !important;
  border: 1px solid rgba(240,185,11,.18);
}

/* — Dual Metrics (Confidence | Risk) — */
.db2-hero-metrics {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.db2-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.db2-metric-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.06), transparent);
  flex-shrink: 0;
}
.db2-metric-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db2-metric-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #848e9c !important;
}
.db2-metric-value {
  font-size: 13px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}
.db2-metric-detail {
  font-size: 10px !important;
  color: var(--text-secondary) !important;
  line-height: 1.35;
  font-weight: 400;
  max-width: 180px;
}

/* — Confidence Ring W1 (72px) — */
.db2-hero-ring {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  animation: db2-ringGlow 3s ease-in-out infinite;
}
.db2-ring-svg {
  width: 72px !important;
  height: 72px !important;
}
.db2-ring-arc {
  transition: stroke-dasharray .8s cubic-bezier(.22,1,.36,1),
              stroke .4s ease;
}
.db2-ring-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.db2-ring-pct {
  font-size: 17px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary) !important;
  animation: db2-confCount .6s ease-out both;
}
.db2-ring-pct small {
  font-size: 10px !important;
  color: var(--text-muted) !important;
}

/* — Risk Ring W1 (48px) — */
.db2-risk-ring {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  animation: db2-ringGlow 3.5s ease-in-out infinite;
}
.db2-risk-ring-val {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}
.db2-risk-placeholder {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
}
.db2-risk-placeholder span {
  font-size: 16px !important;
}

/* — Recommendation (compact inline) — */
.db2-hero-rec {
  font-size: 10.5px !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  line-height: 1.4;
  max-width: 200px;
}

/* — Guardrails: collapsible overflow — */
.db2-guard-overflow {
  display: none;
}
.db2-guard-overflow.open {
  display: contents;
}
.db2-guard-more {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #f0b90b !important;
  background: rgba(240,185,11,.08);
  border: 1px solid rgba(240,185,11,.15);
  border-radius: 6px;
  padding: 2px 10px;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.db2-guard-more:hover {
  background: rgba(240,185,11,.15);
  border-color: rgba(240,185,11,.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTEXT STRIP — Regime + Readiness + Guardrails
   ═══════════════════════════════════════════════════════════════════════════ */
.db2-context-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px;
  flex-wrap: wrap;
}
.db2-ctx-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 14px;
  min-width: 0;
}
.db2-ctx-item:first-child { padding-left: 0; }
.db2-ctx-lbl {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #848e9c !important;
}
.db2-ctx-val {
  font-size: 11px !important;
  color: var(--text-primary) !important;
  font-weight: 400;
  line-height: 1.4;
}
.db2-ctx-val small {
  font-size: 9px !important;
  color: #848e9c !important;
}
.db2-ctx-warn {
  color: #f0b90b !important;
  font-size: 10px !important;
  animation: db2-guardPulse 2s ease-in-out infinite;
  border-radius: 6px;
  padding: 1px 4px;
}
.db2-ctx-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADVICE GRID — 3-Column Glassmorphism Cards
   ═══════════════════════════════════════════════════════════════════════════ */
.db2-advice-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
.db2-advice-grid .db-advice-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Accent colors for advice card types */
.db2-advice-grid .db-advice-card:nth-child(1) {
  border-left: 3px solid rgba(14,203,129,.4);
}
.db2-advice-grid .db-advice-card:nth-child(2) {
  border-left: 3px solid rgba(212,168,67,.4);
}
.db2-advice-grid .db-advice-card:nth-child(3) {
  border-left: 3px solid rgba(246,70,93,.35);
}

/* Icon glow rings */
.db2-adv-icon {
  font-size: 12px !important;
  margin-right: 4px;
  opacity: .85;
}
.db2-advice-grid .db-advice-card:nth-child(1) .db2-adv-icon {
  filter: drop-shadow(0 0 4px rgba(14,203,129,.4));
}
.db2-advice-grid .db-advice-card:nth-child(2) .db2-adv-icon {
  filter: drop-shadow(0 0 4px rgba(212,168,67,.4));
}
.db2-advice-grid .db-advice-card:nth-child(3) .db2-adv-icon {
  filter: drop-shadow(0 0 4px rgba(246,70,93,.35));
}

.db2-advice-grid .db-advice-hd {
  font-size: 12px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
}
.db2-advice-grid .db-advice-hint {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #848e9c !important;
  letter-spacing: .3px;
}
.db2-advice-grid .db-advice-body {
  font-size: 11px !important;
  font-weight: 400;
  color: var(--text-secondary) !important;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FACTORS GRID — For / Against with Slide-In Items
   ═══════════════════════════════════════════════════════════════════════════ */
.db2-factors-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.db-factors-col {
  padding: 14px 16px;
}
.db-factors-for {
  border-left: 3px solid rgba(14,203,129,.4);
}
.db-factors-against {
  border-left: 3px solid rgba(246,70,93,.35);
}
.db-factors-hd {
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.db2-factor-count {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: #848e9c !important;
  -webkit-text-fill-color: #848e9c;
  animation: db2-badgePop .4s cubic-bezier(.22,1,.36,1) both;
}
.db-factors-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.db-factor-item {
  font-size: 11px !important;
  font-weight: 400;
  color: var(--text-secondary) !important;
  line-height: 1.45;
  padding: 4px 0;
  animation: db2-factorSlide .35s ease-out both;
  animation-delay: var(--db2-delay, 0ms);
  transition: transform .15s ease;
}
.db-factor-item:hover {
  transform: translateX(4px);
}
.db-factor-check {
  color: #0ecb81 !important;
  font-weight: 700;
  margin-right: 4px;
  font-size: 11px;
}
.db-factor-x {
  color: #f6465d !important;
  font-weight: 700;
  margin-right: 4px;
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM ROW — Risk + Opportunity
   ═══════════════════════════════════════════════════════════════════════════ */
.db2-bottom {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

/* ── Risk Card ─────────────────────────────────────────────────────────── */
.db2-risk {
  flex: 1;
  padding: 16px 18px;
}
.db2-risk-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.db2-risk-lbl {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #848e9c !important;
}
.db2-risk-score {
  font-size: 22px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace !important;
  animation: db2-confCount .6s ease-out both;
}
.db2-risk-score small {
  font-size: 10px !important;
  color: #848e9c !important;
}
.db2-risk-zone {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
  animation: db2-badgePop .4s cubic-bezier(.22,1,.36,1) both;
}
.db2-risk-zone.db-rz-normal {
  background: rgba(14,203,129,.12);
  color: #0ecb81 !important;
  box-shadow: 0 0 8px rgba(14,203,129,.06);
}
.db2-risk-zone.db-rz-elevated {
  background: rgba(240,185,11,.12);
  color: #f0b90b !important;
  box-shadow: 0 0 8px rgba(240,185,11,.06);
}
.db2-risk-zone.db-rz-high,
.db2-risk-zone.db-rz-extreme {
  background: rgba(246,70,93,.12);
  color: #f6465d !important;
  box-shadow: 0 0 8px rgba(246,70,93,.06);
}
.db2-risk-delta {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #848e9c !important;
  margin-left: auto;
}

/* — Risk Track + Glow Trail — */
.db2-risk-track {
  height: 6px;
  border-radius: 4px;
  background: rgba(43,49,57,.6);
  overflow: hidden;
  position: relative;
}
.db2-risk-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
  position: relative;
  animation: db2-riskGlow 2.5s ease-in-out infinite;
}
.db2-risk-fill::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  filter: blur(4px);
  animation: db2-riskGlow 2s ease-in-out infinite;
}

/* ── Risk Breakdown ────────────────────────────────────────────────────── */
.db2-risk-breakdown {
  padding: 12px 16px;
  margin-top: 8px;
}
.db2-rb-title {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #848e9c !important;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.db2-rb-row {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.02);
  transition: background .15s ease;
}
.db2-rb-row:last-child { border-bottom: none; }
.db2-rb-row:hover { background: rgba(255,255,255,.02); border-radius: 6px; }
.db2-rb-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  min-width: 110px;
  flex-shrink: 0;
}
.db2-rb-val {
  font-size: 11px !important;
  font-weight: 400;
  color: var(--text-primary) !important;
  line-height: 1.5;
}
.db2-rb-ok { color: #0ecb81 !important; }
.db2-rb-warn { color: #f0b90b !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   OPPORTUNITY CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.db2-opp {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.db2-opp-dot {
  font-size: 18px;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.db2-opp:hover .db2-opp-dot { transform: scale(1.15); }
.db-opp-none .db2-opp-dot {
  color: #848e9c !important;
}
.db-opp-strong .db2-opp-dot {
  color: #0ecb81 !important;
  filter: drop-shadow(0 0 6px rgba(14,203,129,.35));
}
.db-opp-emerging .db2-opp-dot {
  color: #f0b90b !important;
  filter: drop-shadow(0 0 6px rgba(240,185,11,.35));
}
.db2-opp-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.db2-opp-lbl {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #848e9c !important;
}
.db2-opp-text {
  font-size: 11px !important;
  font-weight: 400;
  color: var(--text-primary) !important;
  line-height: 1.5;
}
.db2-opp-badge {
  font-size: 11px !important;
  flex-shrink: 0;
  color: var(--text-secondary) !important;
  font-weight: 600;
}
.db2-opp-warn {
  color: #F0B90B !important;
  animation: db2-guardPulse 2.5s ease-in-out infinite;
  border-radius: 6px;
}

/* (v2 hero classes removed — replaced by v3 in main hero section above) */

/* ═══════════════════════════════════════════════════════════════════════════
   DB2 v2 CONTEXT STRIP — Chip layout (icon + body)
   ═══════════════════════════════════════════════════════════════════════════ */
.db2-ctx-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  min-width: 0;
}
.db2-ctx-chip:first-child { padding-left: 0; }
.db2-ctx-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: .8;
}
.db2-ctx-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.db2-ctx-guards {
  border-left: 1px solid rgba(255,255,255,.04);
  margin-left: 6px;
  padding-left: 14px !important;
}

/* — Guardrail Pills — */
.db2-guard-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.db2-guard-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #f6465d !important;
  background: rgba(246,70,93,.08);
  border: 1px solid rgba(246,70,93,.12);
  border-radius: 6px;
  padding: 2px 8px;
  animation: db2-guardPulse 2.5s ease-in-out infinite;
}
.db2-guard-pill svg {
  width: 10px !important;
  height: 10px !important;
  flex-shrink: 0;
}
.db2-guard-count {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(246,70,93,.12);
  color: #f6465d !important;
  -webkit-text-fill-color: #f6465d;
  margin-left: 4px;
}
.db2-guard-pulse {
  animation: db2-guardPulse 2s ease-in-out infinite;
}

/* — Advice card icon glow ring — */
.db2-icon-glow {
  filter: drop-shadow(0 0 4px var(--glow-color, rgba(240,185,11,.3)));
}
.db2-adv-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* — Factors icon + count colors — */
.db2-factors-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.db2-fc-for {
  background: rgba(14,203,129,.1) !important;
  color: #0ecb81 !important;
  -webkit-text-fill-color: #0ecb81;
}
.db2-fc-against {
  background: rgba(246,70,93,.1) !important;
  color: #f6465d !important;
  -webkit-text-fill-color: #f6465d;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Stack on narrow viewports
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .db2-hero { padding: 18px 14px 16px; }
  .db2-hero-metrics { flex-direction: column; gap: 14px; }
  .db2-metric-divider { width: 60%; height: 1px; }
  .db2-metric { justify-content: center !important; }
  .db2-hero-ring { width: 72px; height: 72px; }
  .db2-ring-svg { width: 72px !important; height: 72px !important; }
  .db2-ring-pct { font-size: 18px !important; }
  .db2-advice-grid { grid-template-columns: 1fr !important; }
  .db2-factors-grid { grid-template-columns: 1fr !important; }
  .db2-bottom { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE PRO — Event Intelligence v2 (Trading Impact Summary)
   ═══════════════════════════════════════════════════════════════════════════ */
.ei2-impact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,.04);
}
.ei2-impact-icon {
  font-size: 16px !important;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.ei2-impact-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ei2-impact-title {
  font-size: 12px !important;
  font-weight: 700 !important;
}
.ei2-impact-desc {
  font-size: 10px !important;
  color: var(--text-secondary) !important;
  line-height: 1.4;
}
.ei2-impact-monitoring {
  background: rgba(132,142,156,.06);
  border-color: rgba(132,142,156,.1);
}
.ei2-impact-monitoring .ei2-impact-icon {
  background: rgba(132,142,156,.1);
  color: var(--text-muted);
  border: 1px solid rgba(132,142,156,.15);
}
.ei2-impact-monitoring .ei2-impact-title {
  color: var(--text-secondary) !important;
}
.ei2-impact-low {
  background: rgba(14,203,129,.04);
  border-color: rgba(14,203,129,.1);
}
.ei2-impact-low .ei2-impact-icon {
  background: rgba(14,203,129,.1);
  color: #0ecb81;
  border: 1px solid rgba(14,203,129,.2);
}
.ei2-impact-low .ei2-impact-title {
  color: #0ecb81 !important;
}
.ei2-impact-moderate {
  background: rgba(240,185,11,.04);
  border-color: rgba(240,185,11,.1);
}
.ei2-impact-moderate .ei2-impact-icon {
  background: rgba(240,185,11,.1);
  color: #f0b90b;
  border: 1px solid rgba(240,185,11,.2);
}
.ei2-impact-moderate .ei2-impact-title {
  color: #f0b90b !important;
}
.ei2-impact-high {
  background: rgba(246,70,93,.04);
  border-color: rgba(246,70,93,.1);
}
.ei2-impact-high .ei2-impact-icon {
  background: rgba(246,70,93,.1);
  color: #f6465d;
  border: 1px solid rgba(246,70,93,.2);
}
.ei2-impact-high .ei2-impact-title {
  color: #f6465d !important;
}

/* ── EI Pipeline stage labels — Binance font standard ── */
.ei-dig-stage-icon {
  width: 28px !important;
  height: 28px !important;
}
.ei-dig-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
}

/* ── EI Scores grid — Binance compact ── */
.ei-score-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
}
.ei-score-val {
  font-size: 14px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}

/* ── EI Evidence — better "None" state ── */
.ei-evq-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  border-radius: 8px !important;
}
.ei-evq--strong {
  background: rgba(14,203,129,.1) !important;
  color: #0ecb81 !important;
  border: 1px solid rgba(14,203,129,.12) !important;
}
.ei-evq--moderate {
  background: rgba(240,185,11,.08) !important;
  color: #f0b90b !important;
  border: 1px solid rgba(240,185,11,.1) !important;
}
.ei-evq--weak {
  background: rgba(132,142,156,.06) !important;
  color: var(--text-muted) !important;
  border: 1px solid rgba(132,142,156,.08) !important;
}

/* ── EI Guidance dimensions — Binance style ── */
.ei-dim-header {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--text-muted) !important;
  margin-bottom: 8px !important;
}
.ei-dim-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.ei-dim-card {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}
.ei-dim-name {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-transform: capitalize !important;
}
.ei-dim-score {
  font-size: 12px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}
.ei-conflict-flags {
  margin-top: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.ei-conflict-icon {
  color: #f0b90b !important;
  font-size: 12px !important;
}
.ei-conflict-text {
  font-size: 10px !important;
  color: var(--text-secondary) !important;
  padding: 2px 8px !important;
  background: rgba(240,185,11,.06) !important;
  border: 1px solid rgba(240,185,11,.1) !important;
  border-radius: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BINANCE STANDARD — Top Container Font Size Standardization
   Labels: 9-11px 700 uppercase | Values: 12-14px 700 mono | Titles: 12-14px 800
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Status Bar ── */
.status-bar {
  font-size: 11px !important;
}
#ws-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: .3px;
}
.ws-meta-text {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}
.ws-last-update {
  font-size: 11px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  color: var(--text-muted) !important;
}

/* ── Analysis Bar ── */
.btn-analysis {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  padding: 8px 20px !important;
}
#btn-runs-history {
  font-size: 10px !important;
  font-weight: 700 !important;
}
.progress-label {
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* ── Attribution Badge ── */
.attribution-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  gap: 6px !important;
}
.attr-mode {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--accent) !important;
}
.attr-window {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}
.attr-clash {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}

/* ── Active Symbols Strip ── */
.active-symbols-strip {
  font-size: 11px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 8px !important;
  overflow: hidden !important;
}
.sym-edit-btn {
  order: -1 !important;
}
.active-sym-label {
  order: 0 !important;
  width: 100% !important;
  margin-bottom: -2px !important;
}
span.active-symbols-list {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  order: 1 !important;
}
/* Per-crypto branded pills */
.active-sym-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--mono, monospace);
  letter-spacing: .4px;
  color: var(--sym-color, var(--text-primary));
  background: color-mix(in srgb, var(--sym-color, #5e6673) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sym-color, #5e6673) 15%, transparent);
  transition: all .25s cubic-bezier(.25,.46,.45,.94);
  cursor: default;
  animation: mi-badgePop 400ms cubic-bezier(.34,1.56,.64,1) both;
}
.active-symbols-list .active-sym-pill:nth-child(1) { animation-delay: 100ms; }
.active-symbols-list .active-sym-pill:nth-child(2) { animation-delay: 180ms; }
.active-symbols-list .active-sym-pill:nth-child(3) { animation-delay: 260ms; }
.active-symbols-list .active-sym-pill:nth-child(4) { animation-delay: 340ms; }
.active-sym-pill:hover {
  background: color-mix(in srgb, var(--sym-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--sym-color) 25%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--sym-color) 15%, transparent);
}
.active-sym-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sym-color, #5e6673);
  box-shadow: 0 0 5px color-mix(in srgb, var(--sym-color, #5e6673) 40%, transparent);
  flex-shrink: 0;
  animation: ta-dotPulse 2.5s ease-in-out infinite;
}
.active-sym-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 2px;
}
.active-sym-hint {
  font-size: 10px;
  color: var(--text-muted);
  opacity: .6;
  margin-left: 4px;
}
.sym-edit-btn,
.active-symbols-strip a {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
}

/* ── Sentiment Strip ── */
.analysis-strip {
  font-size: 11px !important;
}
.astrip-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--text-muted) !important;
}
.astrip-green {
  font-size: 11px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
.astrip-red {
  font-size: 11px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
.astrip-muted {
  font-size: 10px !important;
  font-weight: 600 !important;
}
.astrip-sep {
  font-size: 8px !important;
  color: rgba(255,255,255,.1) !important;
}

/* ── Attention/Calibration/Coverage chips (below engine status) ── */
.eng-strip-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: var(--text-muted) !important;
}
.eng-chip {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
}
.eng-chip-val {
  font-size: 10px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
.eng-chip-progress {
  font-size: 9px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  color: var(--text-muted) !important;
}

/* ── Applied Settings Strip ── */
.applied-settings-strip,
#run-settings-strip {
  font-size: 10px !important;
}
#run-settings-strip .badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}
#run-settings-strip code {
  font-size: 9px !important;
  font-weight: 600 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  color: var(--text-muted) !important;
}

/* ── Safe Mode Banner ── */
.safe-mode-banner {
  font-size: 11px !important;
}
.safe-mode-banner strong {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
}
.safe-mode-desc {
  font-size: 10px !important;
  color: var(--text-secondary) !important;
}

/* ── Tier Decision container — unified block wrapper ── */
.tier-decision {
  gap: 4px !important;
  background: rgba(22,26,30,.6) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 12px !important;
  padding: 10px 12px 8px !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}
.tier-decision::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}

/* ── Signals Blocked Banner ── */
.sig-banner {
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT INTELLIGENCE v3 — Adaptive Density Card
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Event Intelligence v3 — Premium Redesign ─────────────────────── */
.ei3-card {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(26,30,35,.98) 50%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
}
.ei3-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,0,0,.35) !important;
}
.ei3-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 12px 12px 0 0;
}
.ei3-border-red::before { background: linear-gradient(90deg, rgba(246,70,93,.5), transparent 70%) !important; }
.ei3-border-gold::before { background: linear-gradient(90deg, rgba(240,185,11,.4), transparent 70%) !important; }
.ei3-border-muted::before { background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 70%) !important; }
/* Subtle side glow based on severity */
.ei3-border-red { border-left: 2px solid rgba(246,70,93,.2) !important; }
.ei3-border-gold { border-left: 2px solid rgba(240,185,11,.15) !important; }

/* ── Header ─────────────────────────────────────────── */
.ei3-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.ei3-desc {
  font-size: 9px !important;
  color: rgba(255,255,255,.30) !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}
.ei3-icon {
  font-size: 16px !important;
  filter: drop-shadow(0 0 4px rgba(240,185,11,.2));
}
.ei3-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  color: #F0B90B !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 8px rgba(240,185,11,.08);
}
.ei3-type {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  background: rgba(240,185,11,.08) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(240,185,11,.12) !important;
}
.ei3-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}
.ei3-ts {
  font-size: 10px !important;
  font-weight: 600 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  color: var(--text-muted) !important;
}

/* ── Badges ─────────────────────────────────────────── */
.ei3-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding: 2px 8px !important;
  border-radius: 5px !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
}
.ei3-b-green { background: rgba(14,203,129,.1) !important; color: #0ecb81 !important; border-color: rgba(14,203,129,.15) !important; }
.ei3-b-red { background: rgba(246,70,93,.1) !important; color: #f6465d !important; border-color: rgba(246,70,93,.12) !important; }
.ei3-b-gold { background: rgba(240,185,11,.1) !important; color: #f0b90b !important; border-color: rgba(240,185,11,.12) !important; }
.ei3-b-muted { background: rgba(43,49,57,.4) !important; color: var(--text-muted) !important; border-color: rgba(43,49,57,.3) !important; }

/* ── Trading Implication — glass card with icon ─────── */
.ei3-impl {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
  transition: all .2s ease;
}
.ei3-impl-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
.ei3-impl-neutral {
  background: linear-gradient(135deg, rgba(43,49,57,.3), rgba(43,49,57,.15)) !important;
  border-left: 3px solid rgba(255,255,255,.1) !important;
}
.ei3-impl-neutral .ei3-impl-text { color: var(--text-secondary) !important; }
.ei3-impl-ok {
  background: linear-gradient(135deg, rgba(14,203,129,.08), rgba(14,203,129,.02)) !important;
  border-left: 3px solid rgba(14,203,129,.35) !important;
}
.ei3-impl-ok .ei3-impl-text { color: #0ecb81 !important; }
.ei3-impl-warn {
  background: linear-gradient(135deg, rgba(240,185,11,.08), rgba(240,185,11,.02)) !important;
  border-left: 3px solid rgba(240,185,11,.3) !important;
}
.ei3-impl-warn .ei3-impl-text { color: #f0b90b !important; }
.ei3-impl-danger {
  background: linear-gradient(135deg, rgba(246,70,93,.08), rgba(246,70,93,.02)) !important;
  border-left: 3px solid rgba(246,70,93,.3) !important;
}
.ei3-impl-danger .ei3-impl-text { color: #f6465d !important; }

/* ── Expected → Actual ──────────────────────────────── */
.ei3-ea {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  font-size: 11px !important;
  padding: 6px 12px !important;
  background: rgba(0,0,0,.1) !important;
  border-radius: 8px !important;
}
.ei3-ea-cell {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.ei3-ea-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  letter-spacing: .4px !important;
}
.ei3-ea-arrow {
  color: var(--accent) !important;
  font-size: 13px !important;
  opacity: .6;
}

/* ── Pipeline Stepper — larger dots, gradient lines ─── */
.ei3-pipeline {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, rgba(0,0,0,.12), rgba(0,0,0,.06)) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}
.ei3-pipe-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
}
.ei3-pipe-stepper {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 1 !important;
}
.ei3-step {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.ei3-step-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  transition: all .3s ease;
}
.ei3-dot-pending { background: rgba(43,49,57,.6) !important; border: 1.5px solid rgba(255,255,255,.1) !important; }
.ei3-dot-ok { background: #0ecb81 !important; box-shadow: 0 0 6px rgba(14,203,129,.5), 0 0 12px rgba(14,203,129,.2) !important; border: none !important; }
.ei3-dot-danger { background: #f6465d !important; box-shadow: 0 0 6px rgba(246,70,93,.4), 0 0 12px rgba(246,70,93,.15) !important; border: none !important; }
.ei3-dot-warn { background: #f0b90b !important; box-shadow: 0 0 6px rgba(240,185,11,.4), 0 0 12px rgba(240,185,11,.15) !important; border: none !important; }
.ei3-step-lbl {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  white-space: nowrap !important;
}
.ei3-step-line {
  width: 20px !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.1), rgba(255,255,255,.06)) !important;
  margin: 0 5px !important;
  flex-shrink: 0 !important;
  border-radius: 1px !important;
}
.ei3-pipe-progress {
  margin-left: auto !important;
}
.ei3-pipe-count {
  font-size: 12px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  color: var(--text-primary) !important;
}

/* ── Confirmation Windows — interactive ─────────────── */
.ei3-windows {
  margin-bottom: 12px !important;
}
.ei3-win-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}
.ei3-win-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
}
.ei3-win-dots {
  display: flex !important;
  gap: 5px !important;
}
.ei3-win-dot {
  font-size: 8px !important;
  font-weight: 800 !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  background: rgba(43,49,57,.4) !important;
  color: var(--text-muted) !important;
  border: 1px solid rgba(43,49,57,.4) !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  cursor: default;
  transition: all .2s ease;
}
.ei3-win-dot:hover {
  background: rgba(43,49,57,.6) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.ei3-win-dot.ei3-win-active {
  background: rgba(14,203,129,.12) !important;
  color: #0ecb81 !important;
  border-color: rgba(14,203,129,.2) !important;
  box-shadow: 0 0 4px rgba(14,203,129,.15) !important;
}
.ei3-win-stat {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  margin-left: auto !important;
  font-variant-numeric: tabular-nums !important;
}
.ei3-win-track {
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(43,49,57,.5) !important;
  overflow: hidden !important;
}
.ei3-win-fill {
  height: 100% !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, #0ecb81, rgba(14,203,129,.7)) !important;
  transition: width .4s ease !important;
  box-shadow: 0 0 4px rgba(14,203,129,.3) !important;
}

/* ── Scores — card-style ────────────────────────────── */
.ei3-scores {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}
.ei3-sc {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  background: rgba(0,0,0,.1) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,.03) !important;
}
.ei3-sc-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.ei3-sc-val {
  font-size: 11px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  color: var(--text-primary) !important;
}

/* ── Policy Path ────────────────────────────────────── */
.ei3-policy {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !important;
  padding: 6px 12px !important;
  background: rgba(0,0,0,.08) !important;
  border-radius: 8px !important;
}
.ei3-policy-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--text-muted) !important;
}
.ei3-policy-dims {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.ei3-dim {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.ei3-dim-name {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-transform: capitalize !important;
}
.ei3-conflicts {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}

/* ── Consistency ────────────────────────────────────── */
.ei3-consist {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.ei3-consist-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  color: var(--text-muted) !important;
}

/* ── Footer — Evidence + Details ────────────────────── */
.ei3-footer {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  flex-wrap: wrap;
}
.ei3-ev-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: var(--text-muted) !important;
}
.ei3-pos {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}
.ei3-details-btn {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  background: rgba(240,185,11,.06) !important;
  border: 1px solid rgba(240,185,11,.1) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  margin-left: auto !important;
  padding: 3px 10px !important;
  transition: all .2s ease;
}
.ei3-details-btn:hover {
  background: rgba(240,185,11,.12) !important;
  border-color: rgba(240,185,11,.2) !important;
}
.ei3-notes {
  font-size: 10px !important;
  color: var(--text-secondary) !important;
  padding: 8px 12px !important;
  line-height: 1.5 !important;
  width: 100% !important;
  background: rgba(0,0,0,.1) !important;
  border-radius: 8px !important;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATA QUALITY v2 — Health Dashboard Card
   ═══════════════════════════════════════════════════════════════════════════ */
.dq2-card {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  position: relative;
  overflow: hidden;
}
.dq2-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.15), transparent 60%);
  border-radius: 12px 12px 0 0;
}

/* Header */
.dq2-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.dq2-desc {
  font-size: 9px !important;
  color: rgba(255,255,255,.30) !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}
.dq2-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  color: var(--text-primary) !important;
}
.dq2-health {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 10px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
}
.dq2-health-ok { background: rgba(14,203,129,.1) !important; border-color: rgba(14,203,129,.12) !important; }
.dq2-health-warn { background: rgba(240,185,11,.08) !important; border-color: rgba(240,185,11,.1) !important; }
.dq2-health-bad { background: rgba(246,70,93,.08) !important; border-color: rgba(246,70,93,.1) !important; }
.dq2-health-count {
  font-size: 12px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}
.dq2-health-ok .dq2-health-count { color: #0ecb81 !important; }
.dq2-health-warn .dq2-health-count { color: #f0b90b !important; }
.dq2-health-bad .dq2-health-count { color: #f6465d !important; }
.dq2-health-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.dq2-mixed-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(240,185,11,.1) !important;
  color: #f0b90b !important;
  border: 1px solid rgba(240,185,11,.12) !important;
  margin-left: auto !important;
}

/* Coverage Hero */
.dq2-coverage-hero {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 10px !important;
  padding: 8px 12px !important;
  background: rgba(0,0,0,.12) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.03) !important;
}
.dq2-cov-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 70px !important;
}
.dq2-cov-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--text-muted) !important;
}
.dq2-cov-pct {
  font-size: 18px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  line-height: 1 !important;
}
.dq2-cov-gap {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}
.dq2-cov-bar-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.dq2-cov-bar-track {
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(43,49,57,.5) !important;
  overflow: hidden !important;
}
.dq2-cov-bar-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width .3s !important;
  box-shadow: 0 0 4px currentColor !important;
}
.dq2-cov-stat {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}

/* Status Grid */
.dq2-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px 10px !important;
  margin-bottom: 8px !important;
}
.dq2-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 0 !important;
}
.dq2-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.dq2-dot-ok { background: #0ecb81 !important; box-shadow: 0 0 3px rgba(14,203,129,.4) !important; }
.dq2-dot-warn { background: #f0b90b !important; box-shadow: 0 0 3px rgba(240,185,11,.3) !important; }
.dq2-dot-bad { background: #f6465d !important; box-shadow: 0 0 3px rgba(246,70,93,.3) !important; }
.dq2-dot-unk { background: rgba(43,49,57,.6) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.dq2-item-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
}
.dq2-item-val {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  text-transform: capitalize !important;
  margin-left: auto !important;
}

/* Footer — flags + warning */
.dq2-footer {
  padding-top: 8px !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.dq2-flags {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}
.dq2-flag {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 5px !important;
  background: rgba(240,185,11,.08) !important;
  color: #f0b90b !important;
  border: 1px solid rgba(240,185,11,.1) !important;
  text-transform: capitalize !important;
}
.dq2-warn {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #f0b90b !important;
  padding: 6px 10px !important;
  background: rgba(240,185,11,.06) !important;
  border-left: 3px solid rgba(240,185,11,.25) !important;
  border-radius: 0 6px 6px 0 !important;
}

@media (max-width: 600px) {
  .dq2-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dq2-coverage-hero { flex-direction: column !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALIBRATION v2 — Weight Bar + Threshold Pills
   ═══════════════════════════════════════════════════════════════════════════ */
.cv2-card {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.95) 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  position: relative;
  overflow: hidden;
}
.cv2-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,185,11,.2), transparent 60%);
  border-radius: 12px 12px 0 0;
}

/* Header */
.cv2-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.cv2-icon {
  font-size: 12px !important;
  opacity: .6;
}
.cv2-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  color: var(--text-primary) !important;
}
.cv2-preset {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(240,185,11,.1) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(240,185,11,.12) !important;
}
.cv2-conflict {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  margin-left: auto !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}

/* Weights — stacked bar */
.cv2-weights {
  margin-bottom: 12px !important;
}
.cv2-w-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}
.cv2-w-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--text-muted) !important;
}
.cv2-stacked-bar {
  display: flex !important;
  height: 28px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  gap: 1px !important;
}
.cv2-seg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  transition: width .3s !important;
}
.cv2-seg-text {
  font-size: 10px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 6px !important;
}
.cv2-seg-market {
  background: rgba(14,203,129,.2) !important;
  color: #0ecb81 !important;
  border-left: 3px solid rgba(14,203,129,.5) !important;
}
.cv2-seg-news {
  background: rgba(240,185,11,.15) !important;
  color: #f0b90b !important;
  border-left: 3px solid rgba(240,185,11,.4) !important;
}
.cv2-seg-regime {
  background: rgba(110,130,245,.15) !important;
  color: #6e82f5 !important;
  border-left: 3px solid rgba(110,130,245,.4) !important;
}

/* Thresholds — inline pills */
.cv2-thresholds {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.cv2-t-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
}
.cv2-t-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  background: rgba(0,0,0,.12) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 8px !important;
}
.cv2-t-item:hover {
  border-color: rgba(240,185,11,.1) !important;
}
.cv2-t-name {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
}
.cv2-t-val {
  font-size: 13px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ML DEBUG v2 — Compact Card Grid
   ═══════════════════════════════════════════════════════════════════════════ */
.md2-sum-icon { font-size: 12px !important; }
.md2-sum-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  color: var(--text-primary) !important;
}
.md2-sum-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
}
.md2-h-ok { background: rgba(14,203,129,.1) !important; color: #0ecb81 !important; border-color: rgba(14,203,129,.12) !important; }
.md2-h-warn { background: rgba(240,185,11,.08) !important; color: #f0b90b !important; border-color: rgba(240,185,11,.1) !important; }
.md2-h-deg { background: rgba(246,70,93,.08) !important; color: #f6465d !important; border-color: rgba(246,70,93,.1) !important; }
.md2-h-unk { background: rgba(43,49,57,.4) !important; color: var(--text-muted) !important; }
.md2-sum-stats {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  margin-left: auto !important;
}

/* Card grid */
.md2-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 6px !important;
  padding: 8px 0 4px !important;
}
.md2-card {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
}
.md2-card:hover {
  border-color: rgba(240,185,11,.08) !important;
}

/* Card header */
.md2-card-hd {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
  padding-bottom: 5px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.md2-sym {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: .3px !important;
}
.md2-q {
  font-size: 8px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}
.md2-q-ok { background: rgba(14,203,129,.1) !important; color: #0ecb81 !important; }
.md2-q-warn { background: rgba(240,185,11,.08) !important; color: #f0b90b !important; }
.md2-q-deg { background: rgba(246,70,93,.08) !important; color: #f6465d !important; }
.md2-q-unk { background: rgba(43,49,57,.4) !important; color: var(--text-muted) !important; }
.md2-regime {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  margin-left: auto !important;
}

/* Confidence bar */
.md2-conf-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}
.md2-conf-bar {
  flex: 1 !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(43,49,57,.5) !important;
  overflow: hidden !important;
}
.md2-conf-fill {
  height: 100% !important;
  border-radius: 2px !important;
  transition: width .3s !important;
}
.md2-conf-val {
  font-size: 11px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}
.md2-conf-src {
  font-size: 8px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
}

/* Metric rows */
.md2-metrics, .md2-forecast {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
  gap: 2px 8px !important;
}
.md2-forecast {
  padding-top: 4px !important;
  border-top: 1px solid rgba(255,255,255,.03) !important;
  margin-top: 4px !important;
}
.md2-m {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.md2-ml {
  font-size: 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  color: var(--text-muted) !important;
}
.md2-mv {
  font-size: 10px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  color: var(--text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════
   Plan Builder v3 — Full Binance-Style Redesign
   ═══════════════════════════════════════════════════════════ */

/* ── Card container ─────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   PLAN BUILDER v4 — Binance-Compact Redesign
   Principles: tight padding, flat, data-dense, monospace,
   zero decorative glow, sharp 4px radius, Binance palette.
   ═══════════════════════════════════════════════════════════ */

.pb3-card {
  background: #161a1e;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.pb3-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--pb-asset-color, rgba(240,185,11,.4));
  opacity: 0.6;
}

/* ── Asset dot ─────────────────────────────────────────── */
.pb3-sym-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ── Identity strip ────────────────────────────────────── */
.pb3-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.pb3-id-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pb3-card .pb-select {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 54px;
  color: #eaecef;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
}
.pb3-card .pb-select:hover {
  border-color: var(--pb-asset-color, rgba(240,185,11,.3));
}
.pb3-card .pb-symbol-name {
  font-size: 14px;
  font-weight: 700;
  color: #eaecef;
  letter-spacing: 0.3px;
}

/* ── Direction badge — compact pill ────────────────────── */
.pb3-dir {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.4;
}
.pb3-dir-long {
  background: rgba(14,203,129,.12);
  color: #0ecb81;
}
.pb3-dir-short {
  background: rgba(246,70,93,.10);
  color: #f6465d;
}
.pb3-dir-hold {
  background: rgba(240,185,11,.08);
  color: #f0b90b;
}

/* ── Quality badge — inline chip ───────────────────────── */
.pb3-quality {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.4px;
}
.pb3-q-excellent {
  background: rgba(14,203,129,.10);
  color: #0ecb81;
}
.pb3-q-good {
  background: rgba(240,185,11,.08);
  color: #f0b90b;
}
.pb3-q-fair {
  background: rgba(132,142,156,.10);
  color: #848e9c;
}
.pb3-q-risky {
  background: rgba(246,70,93,.08);
  color: #f6465d;
}

/* ── Mode toggle — tight pills ─────────────────────────── */
.pb3-card .pb-mode-toggle {
  flex-shrink: 0;
  gap: 2px;
}

/* ── Price levels grid — 3-col, tight ──────────────────── */
.pb3-levels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.pb3-lvl {
  padding: 10px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: transparent;
}
.pb3-lvl + .pb3-lvl {
  border-left: 1px solid rgba(255,255,255,.04);
}
/* 2px colored accent top — Binance-style */
.pb3-lvl::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.pb3-lvl-entry::before { background: var(--pb-asset-color, #f0b90b); }
.pb3-lvl-sl::before    { background: #f6465d; }
.pb3-lvl-tp::before    { background: #0ecb81; }

/* Level header — label + source tag */
.pb3-lvl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 2px;
}
.pb3-lvl-label {
  font-size: 10px;
  font-weight: 600;
  color: #848e9c;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.pb3-lvl .ws-help-inline {
  font-size: 10px;
  color: #5e6673;
  cursor: help;
}
.pb3-lvl-src {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.3;
}
.pb3-lvl-sl .pb3-lvl-src {
  background: rgba(246,70,93,.08);
  color: #f6465d;
}
.pb3-lvl-tp .pb3-lvl-src {
  background: rgba(14,203,129,.08);
  color: #0ecb81;
}

/* Price value — monospace hero */
.pb3-lvl-price {
  font-size: 15px;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: #eaecef;
  letter-spacing: -0.3px;
  line-height: 1.3;
}
.pb3-lvl-sl .pb3-lvl-price { color: #f6465d; }
.pb3-lvl-tp .pb3-lvl-price { color: #0ecb81; }
.pb3-lvl-entry .pb3-lvl-price {
  color: var(--pb-asset-color, #f0b90b);
}

/* Distance label */
.pb3-lvl-dist {
  font-size: 10px;
  font-weight: 500;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  color: #5e6673;
  margin-top: 1px;
}
.pb3-lvl-sl .pb3-lvl-dist { color: rgba(246,70,93,.55); }
.pb3-lvl-tp .pb3-lvl-dist { color: rgba(14,203,129,.55); }
.pb3-lvl-pct { opacity: 0.8; }

/* ── R/R strip — horizontal, compact ───────────────────── */
.pb3-rr-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

/* R/R hero — left box */
.pb3-rr-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 4px;
  min-width: 72px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.pb3-rr-val {
  font-size: 18px;
  font-weight: 800;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #eaecef;
}
.pb3-rr-lbl {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5e6673;
  margin-top: 1px;
}

/* R/R quality variants */
.pb3-rr-excellent { border-color: rgba(14,203,129,.15); background: rgba(14,203,129,.04); }
.pb3-rr-excellent .pb3-rr-val { color: #0ecb81; font-size: 20px; }
.pb3-rr-good { border-color: rgba(240,185,11,.12); background: rgba(240,185,11,.04); }
.pb3-rr-good .pb3-rr-val { color: #f0b90b; }
.pb3-rr-fair { border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.pb3-rr-fair .pb3-rr-val { color: #848e9c; }
.pb3-rr-risky { border-color: rgba(246,70,93,.12); background: rgba(246,70,93,.04); }
.pb3-rr-risky .pb3-rr-val { color: #f6465d; }

/* R/R bar — center, flat fills */
.pb3-rr-center {
  flex: 1;
  min-width: 0;
}
.pb3-rr-bar {
  display: flex;
  height: 18px;
  border-radius: 2px;
  overflow: hidden;
  gap: 1px;
}
.pb3-rr-risk-fill {
  background: rgba(246,70,93,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  border-radius: 2px 0 0 2px;
}
.pb3-rr-rew-fill {
  background: rgba(14,203,129,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  border-radius: 0 2px 2px 0;
}
.pb3-rr-bar-label {
  font-size: 9px;
  font-weight: 600;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  color: rgba(255,255,255,.9);
  letter-spacing: 0.2px;
}
.pb3-rr-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
}
.pb3-rr-leg-risk {
  font-size: 9px;
  font-weight: 600;
  color: #f6465d;
  letter-spacing: 0.3px;
}
.pb3-rr-leg-rew {
  font-size: 9px;
  font-weight: 600;
  color: #0ecb81;
  letter-spacing: 0.3px;
}

/* Position size — right pill */
.pb3-rr-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255,255,255,.03);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.04);
  flex-shrink: 0;
}
.pb3-rr-size-lbl {
  font-size: 8px;
  font-weight: 600;
  color: #5e6673;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.pb3-rr-size-val {
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  color: #eaecef;
  font-variant-numeric: tabular-nums;
}

/* ── Reasons panel — minimal left-border accent ────────── */
.pb3-reasons {
  margin: 0;
  padding: 8px 12px;
  background: rgba(240,185,11,.02);
  border-left: 2px solid rgba(240,185,11,.25);
  border-top: 1px solid rgba(255,255,255,.03);
}
.pb3-reasons-title {
  font-size: 9px;
  font-weight: 700;
  color: #f0b90b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.pb3-reasons-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pb3-reasons-list li {
  font-size: 11px;
  font-weight: 500;
  color: #848e9c;
  line-height: 1.5;
  margin-bottom: 1px;
}
.pb3-reason-arrow {
  color: #f0b90b;
  font-weight: 600;
  margin-right: 3px;
}

/* ── Verdict — integrated footer bar ───────────────────── */
.pb3-verdict {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,.04);
  font-size: 11px;
  line-height: 1.45;
  color: #848e9c;
}
.pb3-verdict-icon {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.3;
}
.pb3-verdict-ok    { background: rgba(14,203,129,.03); }
.pb3-verdict-caution { background: rgba(240,185,11,.03); }
.pb3-verdict-warn  { background: rgba(246,70,93,.03); }

/* ── Actions — compact row ─────────────────────────────── */
.pb3-actions {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pb3-actions .pb-save-btn {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  background: #f0b90b;
  color: #0b0e11;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.pb3-actions .pb-save-btn:hover { background: #f8d12f; }
.pb3-actions-row {
  display: flex;
  gap: 6px;
}
.pb3-actions-row .ts-btn {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  color: #848e9c;
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: border-color .15s;
}
.pb3-actions-row .ts-btn:hover {
  border-color: rgba(255,255,255,.12);
  color: #eaecef;
}

/* ── pb-content inside pb3-card ────────────────────────── */
.pb3-card .pb-content { padding: 0; }
.pb3-card .pb-content:empty { display: none; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .pb3-levels { grid-template-columns: 1fr; }
  .pb3-lvl + .pb3-lvl {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.04);
  }
  .pb3-identity { flex-wrap: wrap; }
  .pb3-rr-strip { flex-wrap: wrap; }
}

/* ── Manual form body ──────────────────────────────────── */
.pb3-manual .pb3-form-body { padding: 0 12px 12px; }
.pb3-manual .ts-form {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
/* Hide old form header if somehow still present */
.pb3-manual .ts-form-header {
  display: none !important;
}

/* Style row — compact */
.pb3-manual .ts-style-row {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  margin-bottom: 12px !important;
}

/* Form field labels — Binance standard */
.pb3-manual .ts-field label,
.pb3-manual .ts-field-inline label,
.pb3-manual .ts-field-sm label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--text-muted) !important;
}

/* Input fields */
.pb3-manual .ts-input {
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  font-variant-numeric: tabular-nums !important;
}
.pb3-manual .ts-input-sm {
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Direction buttons */
.pb3-manual .ts-dir-btn {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
}

/* Metrics */
.pb3-manual .ts-metrics-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}
.pb3-manual .ts-metric-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.pb3-manual .ts-metric-val {
  font-size: 13px !important;
  font-weight: 800 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}
.pb3-manual .ts-rr-big .ts-metric-val {
  font-size: 16px !important;
}

/* Quick % buttons */
.pb3-manual .ts-pct-btn,
.pb3-manual .ts-auto-btn {
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Source labels (РУЧНОЙ, ПРОЦЕНТ, etc) */
.pb3-manual .ts-source-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Style horizon badge */
.pb3-manual .ts-style-horizon {
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Advanced section */
.pb3-manual .ts-toggle-btn {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Note textarea */
.pb3-manual .ts-textarea {
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: Inter, sans-serif !important;
}

/* ── Form actions (bottom) ──────────────────────────────── */
.pb3-form-actions {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.pb3-form-save {
  width: 100% !important;
  background: var(--accent) !important;
  color: #000 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 12px 18px !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 12px rgba(240,185,11,.25) !important;
  transition: all .2s !important;
}
.pb3-form-save:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 4px 20px rgba(240,185,11,.35) !important;
  transform: translateY(-1px) !important;
}
.pb3-form-actions-row {
  display: flex !important;
  gap: 8px !important;
}
.pb3-form-actions-row .ts-btn {
  flex: 1 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
}
.pb3-form-actions-row .pb-reset-btn {
  font-size: 11px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
}

/* ═══════════════════════════════════════════════════════════
   Market Regime v3 — Binance-Style Redesign
   ═══════════════════════════════════════════════════════════ */

/* Regime panel — accent stripe + glow */
#regime-v2-card {
  position: relative;
  overflow: hidden;
  border-color: var(--regime-20, rgba(255,255,255,.05)) !important;
  transition: border-color .3s;
}
#regime-v2-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--regime-color, #F0B90B), transparent 70%);
  opacity: .6;
  z-index: 1;
}
#regime-v2-card::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, var(--regime-10, rgba(240,185,11,.1)) 0%, transparent 70%);
  pointer-events: none;
}

.rg3-layout {
  --regime-color: #F0B90B;
  --regime-20: #F0B90B33;
  --regime-10: #F0B90B1a;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  position: relative;
}

/* ── Hero row: regime badge + confidence ─────────────────── */
.rg3-hero {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* Regime badge — the hero element */
.rg3-regime {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  position: relative;
  overflow: hidden;
}
/* Subtle shimmer on regime badge */
.rg3-regime::after {
  content: '';
  position: absolute;
  top: 0; right: -20px;
  width: 40px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  pointer-events: none;
}
.rg3-regime-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}
.rg3-regime-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
}

/* Regime color variants */
.rg3-risk-off {
  background: rgba(246,70,93,.1) !important;
  border: 1px solid rgba(246,70,93,.15) !important;
}
.rg3-risk-off .rg3-regime-label,
.rg3-risk-off.rg3-regime .rg3-regime-label { color: var(--red) !important; }
span.rg3-impact-val.rg3-risk-off { color: var(--red) !important; }

.rg3-mixed {
  background: rgba(240,185,11,.1) !important;
  border: 1px solid rgba(240,185,11,.12) !important;
}
.rg3-mixed .rg3-regime-label,
.rg3-mixed.rg3-regime .rg3-regime-label { color: var(--accent) !important; }
span.rg3-impact-val.rg3-mixed { color: var(--accent) !important; }

.rg3-crypto-bid {
  background: rgba(14,203,129,.1) !important;
  border: 1px solid rgba(14,203,129,.15) !important;
}
.rg3-crypto-bid .rg3-regime-label,
.rg3-crypto-bid.rg3-regime .rg3-regime-label { color: var(--green) !important; }
span.rg3-impact-val.rg3-crypto-bid { color: var(--green) !important; }

/* ── Confidence block ────────────────────────────────────── */
.rg3-conf-block {
  flex: 1 !important;
  min-width: 0 !important;
}
.rg3-conf-top {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}
.rg3-conf-pct {
  font-size: 18px !important;
  font-weight: 800 !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  color: var(--text-primary) !important;
  line-height: 1 !important;
}
.rg3-conf-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  letter-spacing: 0.6px !important;
}
.rg3-conf-high {
  background: rgba(14,203,129,.12) !important;
  color: var(--green) !important;
}
.rg3-conf-mid {
  background: rgba(240,185,11,.12) !important;
  color: var(--accent) !important;
}
.rg3-conf-low {
  background: rgba(246,70,93,.1) !important;
  color: var(--red) !important;
}

/* Confidence bar */
.rg3-conf-bar {
  height: 6px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.rg3-conf-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width 0.8s cubic-bezier(.4,0,.2,1) !important;
}
.rg3-conf-fill.rg3-conf-high {
  background: linear-gradient(90deg, rgba(14,203,129,.5), rgba(14,203,129,.8)) !important;
  box-shadow: 0 0 8px rgba(14,203,129,.3) !important;
}
.rg3-conf-fill.rg3-conf-mid {
  background: linear-gradient(90deg, rgba(240,185,11,.4), rgba(240,185,11,.7)) !important;
  box-shadow: 0 0 8px rgba(240,185,11,.25) !important;
}
.rg3-conf-fill.rg3-conf-low {
  background: linear-gradient(90deg, rgba(246,70,93,.4), rgba(246,70,93,.7)) !important;
  box-shadow: 0 0 8px rgba(246,70,93,.25) !important;
}

/* ── Trading impact row — 3 inline indicators ────────────── */
.rg3-impact {
  display: flex !important;
  align-items: center !important;
  background: rgba(0,0,0,.2) !important;
  border-radius: 10px !important;
  border: 1px solid var(--regime-10, rgba(255,255,255,.04)) !important;
  padding: 10px 0 !important;
}
.rg3-impact-item {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
}
.rg3-impact-divider {
  width: 1px !important;
  height: 28px !important;
  background: var(--regime-10, rgba(255,255,255,.06)) !important;
  flex-shrink: 0 !important;
}
.rg3-impact-icon {
  font-size: 14px !important;
  opacity: 0.8 !important;
  flex-shrink: 0 !important;
}
.rg3-impact-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}
.rg3-impact-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}
.rg3-impact-val {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
}

/* ── Drivers ─────────────────────────────────────────────── */
.rg3-drivers {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.rg3-drivers-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.6px !important;
  flex-shrink: 0 !important;
}
.rg3-drivers-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.rg3-driver-chip {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  background: var(--regime-10, rgba(255,255,255,.05)) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--regime-20, rgba(255,255,255,.04)) !important;
  transition: all .2s;
}
.rg3-driver-chip:hover {
  background: var(--regime-20, rgba(255,255,255,.08)) !important;
}

/* ═══════════════════════════════════════════════════════════
   Market Brief v3 — Binance-Style Dashboard Strip
   ═══════════════════════════════════════════════════════════ */

/* ── Market Brief W1 — 4 glassmorphism cards ──────────────── */
.mb3-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.mb3-divider { display: none !important; }
.mb3-card {
  position: relative !important;
  background: rgba(255,255,255,.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  padding: 14px 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow: hidden !important;
  cursor: default !important;
  animation: mi-cardUp 600ms cubic-bezier(.22,1,.36,1) both !important;
  animation-delay: calc(var(--mb3-delay, 0) * 80ms) !important;
  transition: transform 350ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 350ms, border-color 350ms !important;
}
.mb3-card:hover {
  border-color: rgba(212,168,67,.18) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(212,168,67,.06) !important;
}
/* Gold shimmer outline on hover */
.mb3-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 14px !important;
  padding: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,168,67,.35) 25%,
    rgba(240,215,140,.5) 50%,
    rgba(212,168,67,.35) 75%,
    transparent 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.mb3-card:hover::after {
  opacity: 1 !important;
  animation: db2-shimmer 2s linear infinite !important;
}
/* Shimmer overlay */
.mb3-card-shimmer {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(105deg, transparent 40%, rgba(212,168,67,.04) 50%, transparent 60%) !important;
  background-size: 300% 100% !important;
  opacity: 0 !important;
  transition: opacity .3s !important;
  pointer-events: none !important;
}
.mb3-card:hover .mb3-card-shimmer {
  opacity: 1 !important;
  animation: ais-shimmer 1.5s ease-in-out alternate infinite !important;
}
/* Card header: icon + label */
.mb3-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mb3-card-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important; height: 32px !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.2) !important;
  flex-shrink: 0 !important;
}
.mb3-card-icon svg {
  width: 18px !important; height: 18px !important;
  stroke-width: 1.8 !important;
}
.mb3-icon-glow {
  position: absolute !important;
  inset: -3px !important;
  border-radius: 12px !important;
  opacity: .5 !important;
  filter: blur(8px) !important;
  z-index: -1 !important;
  animation: mi-pulse 2.5s ease-in-out infinite !important;
}
.mb3-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  background: linear-gradient(135deg, #D4A843, #F0D78C) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
/* Card body */
.mb3-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
}
.mb3-card-hint {
  font-size: 9px !important;
  color: rgba(200, 205, 215, .75) !important;
  line-height: 1.3 !important;
  margin-top: auto !important;
}

/* ── 1. Regime badge ────── */
.mb3-regime-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 8px !important;
  width: fit-content !important;
  animation: mi-badgePop 400ms cubic-bezier(.34,1.56,.64,1) both !important;
  animation-delay: 200ms !important;
}
.mb3-regime-text {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}
.mb3-regime-risk-off {
  background: rgba(246,70,93,.08) !important;
  border: 1px solid rgba(246,70,93,.12) !important;
}
.mb3-regime-risk-off .mb3-regime-text { color: #f6465d !important; }
.mb3-regime-mixed {
  background: rgba(240,185,11,.08) !important;
  border: 1px solid rgba(240,185,11,.1) !important;
}
.mb3-regime-mixed .mb3-regime-text { color: #f0b90b !important; }
.mb3-regime-crypto-bid {
  background: rgba(14,203,129,.08) !important;
  border: 1px solid rgba(14,203,129,.12) !important;
}
.mb3-regime-crypto-bid .mb3-regime-text { color: #0ecb81 !important; }

/* ── 2. Risk gauge + bar ────── */
.mb3-risk-body {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.mb3-risk-gauge {
  position: relative !important;
  width: 52px !important; height: 52px !important;
  flex-shrink: 0 !important;
}
.mb3-risk-gauge svg { display: block !important; }
@keyframes mb3-ringDraw {
  from { stroke-dasharray: 0 125.7; }
}
.mb3-ring-anim {
  animation: mb3-ringDraw .9s cubic-bezier(.22,1,.36,1) forwards !important;
}
.mb3-risk-pct {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}
.mb3-risk-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.mb3-risk-label {
  font-size: 12px !important;
  font-weight: 700 !important;
}
.mb3-risk-bar {
  height: 5px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2) !important;
  position: relative !important;
}
.mb3-risk-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width 0.6s cubic-bezier(.25,.46,.45,.94) !important;
  animation: mi-barGrow .6s cubic-bezier(.25,.46,.45,.94) forwards !important;
  position: relative !important;
}
.mb3-bar-glow {
  position: absolute !important;
  right: -2px !important; top: -3px !important; bottom: -3px !important;
  width: 8px !important;
  border-radius: 50% !important;
  background: inherit !important;
  filter: blur(4px) !important;
  opacity: .8 !important;
  animation: mi-pulse 2s ease-in-out infinite !important;
}
.mb3-risk-normal { color: #0ecb81 !important; }
.mb3-risk-normal.mb3-risk-fill { background: #0ecb81 !important; }
.mb3-risk-mid { color: #f0b90b !important; }
.mb3-risk-mid.mb3-risk-fill { background: #f0b90b !important; }
.mb3-risk-high { color: #f6465d !important; }
.mb3-risk-high.mb3-risk-fill { background: #f6465d !important; }

/* ── 3. Opportunity indicator ────── */
.mb3-opp-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;
}
.mb3-opp-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.mb3-opp-active .mb3-opp-dot {
  background: #0ecb81 !important;
  box-shadow: 0 0 8px rgba(14,203,129,.4) !important;
}
.mb3-opp-inactive .mb3-opp-dot {
  background: rgba(132,142,156,.4) !important;
}
.mb3-dot-pulse {
  animation: mi-pulse 2s ease-in-out infinite !important;
}
.mb3-opp-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--text-primary) !important;
}
.mb3-opp-inactive .mb3-opp-text { color: var(--text-muted) !important; }

/* ── 4. Stance ────── */
.mb3-stance-val {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
.mb3-stance-hold { color: #f0b90b !important; }
.mb3-stance-long { color: #0ecb81 !important; }
.mb3-stance-short { color: #f6465d !important; }

/* ── Responsive ────── */
@media (max-width: 768px) {
  .mb3-strip { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .mb3-strip { grid-template-columns: 1fr !important; }
}

/* ── Live Market Verdict Bar (inside panel) ────── */
.lm-verdict {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.02) !important;
}
.lm-verdict-icon { flex-shrink: 0 !important; }
.lm-verdict-text { font-weight: 500 !important; color: var(--text-secondary) !important; }
.lm-verdict-ok { background: rgba(14,203,129,.04) !important; border-bottom-color: rgba(14,203,129,.15) !important; }
.lm-verdict-ok .lm-verdict-text { color: #0ecb81 !important; }
.lm-verdict-caution { background: rgba(240,185,11,.04) !important; border-bottom-color: rgba(240,185,11,.15) !important; }
.lm-verdict-caution .lm-verdict-text { color: #d4a843 !important; }
.lm-verdict-warn { background: rgba(246,70,93,.04) !important; border-bottom-color: rgba(246,70,93,.15) !important; }
.lm-verdict-warn .lm-verdict-text { color: #f6465d !important; }

/* ── Live Market Docs Button (in ctrl-bar) ────── */
.lm-docs-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  color: var(--text-secondary, #848e9c) !important;
  transition: color .2s, background .2s !important;
}
.lm-docs-btn:hover {
  color: #F0B90B !important;
  background: rgba(240,185,11,.08) !important;
}
.lm-docs-btn.open {
  color: #F0B90B !important;
  background: rgba(240,185,11,.1) !important;
}
.lm-docs-chevron {
  flex-shrink: 0 !important;
  transition: transform .3s ease !important;
}
.lm-docs-btn.open .lm-docs-chevron {
  transform: rotate(180deg) !important;
}

/* ── Live Market Docs Dropdown (between ctrl-bar and content) ────── */
.lm-docs-dropdown {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height .4s cubic-bezier(.25,.46,.45,.94), opacity .3s !important;
  opacity: 0 !important;
  background: rgba(20,21,26,.97) !important;
  border-bottom: 1px solid transparent !important;
}
.lm-docs-dropdown.open {
  max-height: 600px !important;
  opacity: 1 !important;
  overflow-y: auto !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
.lm-docs-inner {
  padding: 14px 18px 12px !important;
}
.lm-docs-inner h4 {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #F0B90B !important;
  margin: 14px 0 6px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.lm-docs-inner h4:first-child { margin-top: 0 !important; }
.lm-docs-inner p {
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  color: var(--text-secondary, #848e9c) !important;
  margin: 0 0 4px !important;
}
.lm-docs-inner .mb3-doc-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 8px 0 12px !important;
  font-size: 11px !important;
}
.lm-docs-inner .mb3-doc-table th {
  text-align: left !important;
  padding: 6px 10px !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  font-size: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.lm-docs-inner .mb3-doc-table td {
  padding: 5px 10px !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}
.lm-docs-inner .mb3-doc-table tr:last-child td { border-bottom: none !important; }

/* ── Market Brief Verdict ────── */
.mb3-verdict {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 6px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.45;
  border: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.02);
}
.mb3-verdict-icon { flex-shrink: 0; margin-top: 1px; font-size: 13px; }
.mb3-verdict-text { font-weight: 500; color: #848e9c; }
.mb3-verdict-ok {
  border-color: rgba(14,203,129,.12);
  background: rgba(14,203,129,.04);
}
.mb3-verdict-ok .mb3-verdict-icon { color: #0ecb81; }
.mb3-verdict-ok .mb3-verdict-text { color: #0ecb81; }
.mb3-verdict-caution {
  border-color: rgba(240,185,11,.12);
  background: rgba(240,185,11,.03);
}
.mb3-verdict-caution .mb3-verdict-icon { color: #f0b90b; }
.mb3-verdict-caution .mb3-verdict-text { color: #d4a843; }
.mb3-verdict-warn {
  border-color: rgba(246,70,93,.12);
  background: rgba(246,70,93,.04);
}
.mb3-verdict-warn .mb3-verdict-icon { color: #f6465d; }
.mb3-verdict-warn .mb3-verdict-text { color: #f6465d; }

/* ── Market Brief Docs (collapsible) ────── */
.mb3-docs-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 6px;
  cursor: pointer;
  color: #5e6673;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  transition: background .15s, color .15s;
}
.mb3-docs-toggle:hover { background: rgba(255,255,255,.04); color: #f0b90b; }
.mb3-docs-toggle svg { flex-shrink: 0; transition: transform .2s; }
.mb3-docs-toggle.open svg { transform: rotate(180deg); }
.mb3-docs-toggle .mb3-docs-label { flex: 1; text-align: left; }

.mb3-docs-content {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height .4s cubic-bezier(.25,.46,.45,.94), opacity .3s !important;
  opacity: 0 !important;
}
.mb3-docs-content.open {
  max-height: 1200px !important;
  opacity: 1 !important;
}
.mb3-docs-inner {
  padding: 16px 18px 12px !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 0 0 12px 12px !important;
  margin-top: -1px !important;
}
.mb3-docs-inner h4 {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #F0B90B !important;
  margin: 14px 0 6px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.mb3-docs-inner h4:first-child { margin-top: 0 !important; }
.mb3-docs-inner p {
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  color: var(--text-secondary, #848e9c) !important;
  margin: 0 0 4px !important;
}
.mb3-docs-inner .mb3-doc-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 8px 0 12px !important;
  font-size: 11px !important;
}
.mb3-docs-inner .mb3-doc-table th {
  text-align: left !important;
  padding: 6px 10px !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  font-size: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.mb3-docs-inner .mb3-doc-table td {
  padding: 5px 10px !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}
.mb3-docs-inner .mb3-doc-table tr:last-child td { border-bottom: none !important; }
.mb3-doc-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* ═══════════════════════════════════════════════════════════
   Must Know Now v3 — Alert Dashboard
   ═══════════════════════════════════════════════════════════ */

/* ── Must Know Now v3 — Premium Redesign ──────────────────────────── */
.mkn3-card {
  background: rgba(255,255,255,.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
  transition: transform .3s cubic-bezier(.25,.46,.45,.94), box-shadow .3s, border-color .3s;
  animation: tierA-fadeUp 600ms cubic-bezier(.22,1,.36,1) forwards !important;
}
.mkn3-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.4) !important;
  border-color: rgba(212,168,67,.15) !important;
}
/* W1 top gold accent line */
.mkn3-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent) !important;
  border-radius: 14px 14px 0 0 !important;
}
/* Severity border variants — no longer left-border, just subtle top accent color */
.mkn3-border-red::before { background: linear-gradient(90deg, rgba(246,70,93,.6), rgba(246,70,93,.2) 50%, transparent) !important; }
.mkn3-border-yellow::before { background: linear-gradient(90deg, rgba(240,185,11,.6), rgba(240,185,11,.2) 50%, transparent) !important; }
.mkn3-border-blue::before { background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent) !important; }

/* ── Header ──────────────────────────────────────────────────────── */
.mkn3-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
.mkn3-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.mkn3-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  color: #F0B90B !important;
  -webkit-text-fill-color: #F0B90B !important;
}
.mkn3-count {
  font-size: 10px !important;
  font-weight: 800 !important;
  background: rgba(212,168,67,.1) !important;
  color: #F0B90B !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  font-variant-numeric: tabular-nums !important;
  border: 1px solid rgba(212,168,67,.15) !important;
  animation: mi-badgePop 400ms cubic-bezier(.34,1.56,.64,1) both !important;
  animation-delay: 200ms !important;
}

/* ── Section desc ────────────────────────────────────────────────── */
.mkn3-desc {
  display: block !important;
  font-size: 10px !important;
  color: rgba(255,255,255,.35) !important;
  margin: 2px 0 6px 0 !important;
  line-height: 1.3 !important;
}

/* ── Chips — with glow ───────────────────────────────────────────── */
.mkn3-chips {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.mkn3-chip {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  border: 1px solid transparent !important;
  animation: mi-badgePop 400ms cubic-bezier(.34,1.56,.64,1) both !important;
}
.mkn3-chips .mkn3-chip:nth-child(1) { animation-delay: 150ms !important; }
.mkn3-chips .mkn3-chip:nth-child(2) { animation-delay: 250ms !important; }
.mkn3-chips .mkn3-chip:nth-child(3) { animation-delay: 350ms !important; }
.mkn3-chip-event {
  background: rgba(240,185,11,.12) !important;
  color: var(--accent) !important;
  border-color: rgba(240,185,11,.18) !important;
  box-shadow: 0 0 6px rgba(240,185,11,.08) !important;
}
.mkn3-chip-crit {
  background: rgba(246,70,93,.12) !important;
  color: var(--red) !important;
  border-color: rgba(246,70,93,.18) !important;
  box-shadow: 0 0 6px rgba(246,70,93,.08) !important;
}
.mkn3-chip-warn {
  background: rgba(240,185,11,.08) !important;
  color: var(--accent) !important;
  border-color: rgba(240,185,11,.12) !important;
}
.mkn3-chip-quality {
  background: rgba(132,142,156,.1) !important;
  color: var(--text-muted) !important;
}
.mkn3-q-strong {
  background: rgba(14,203,129,.1) !important;
  color: var(--green) !important;
  border: 1px solid rgba(14,203,129,.15) !important;
}
.mkn3-q-moderate {
  background: rgba(240,185,11,.1) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(240,185,11,.12) !important;
}
.mkn3-q-weak {
  background: rgba(246,70,93,.1) !important;
  color: var(--red) !important;
  border: 1px solid rgba(246,70,93,.12) !important;
}

/* ── Items list ──────────────────────────────────────────────────── */
.mkn3-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.mkn3-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  transition: all .25s cubic-bezier(.25,.46,.45,.94) !important;
  border: 1px solid transparent !important;
  animation: mi-rowSlide 400ms cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes mi-rowSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mkn3-items .mkn3-item:nth-child(1) { animation-delay: 100ms !important; }
.mkn3-items .mkn3-item:nth-child(2) { animation-delay: 180ms !important; }
.mkn3-items .mkn3-item:nth-child(3) { animation-delay: 260ms !important; }
.mkn3-items .mkn3-item:nth-child(4) { animation-delay: 340ms !important; }
.mkn3-items .mkn3-item:nth-child(5) { animation-delay: 420ms !important; }
.mkn3-item:hover {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  transform: translateX(4px) !important;
}

/* ── LED dot — larger, with pulse for critical ───────────────────── */
.mkn3-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-top: 4px !important;
  transition: all .3s ease;
}
.mkn3-sev-critical .mkn3-dot {
  background: var(--red) !important;
  box-shadow: 0 0 8px rgba(246,70,93,.6), 0 0 16px rgba(246,70,93,.2) !important;
  animation: mkn3Pulse 2s ease-in-out infinite !important;
}
@keyframes mkn3Pulse {
  0%,100% { box-shadow: 0 0 6px rgba(246,70,93,.4); }
  50%     { box-shadow: 0 0 12px rgba(246,70,93,.7), 0 0 20px rgba(246,70,93,.2); }
}
.mkn3-sev-critical {
  background: linear-gradient(135deg, rgba(246,70,93,.08), rgba(246,70,93,.02)) !important;
  border-color: rgba(246,70,93,.08) !important;
}
.mkn3-sev-warning .mkn3-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 6px rgba(240,185,11,.5), 0 0 12px rgba(240,185,11,.15) !important;
}
.mkn3-sev-warning {
  background: linear-gradient(135deg, rgba(240,185,11,.06), rgba(240,185,11,.01)) !important;
  border-color: rgba(240,185,11,.06) !important;
}
.mkn3-sev-normal .mkn3-dot {
  background: rgba(100,149,237,.7) !important;
  box-shadow: 0 0 6px rgba(100,149,237,.4) !important;
}
.mkn3-sev-normal {
  background: rgba(100,149,237,.03) !important;
}
.mkn3-sev-info .mkn3-dot {
  background: rgba(132,142,156,.5) !important;
}

/* ── Text ────────────────────────────────────────────────────────── */
.mkn3-text {
  flex: 1 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  line-height: 1.45 !important;
}
.mkn3-sev-critical .mkn3-text {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}
.mkn3-sev-warning .mkn3-text {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* ── Source tag — pill style ─────────────────────────────────────── */
.mkn3-source {
  flex-shrink: 0 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding: 3px 10px !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  transition: all .25s cubic-bezier(.25,.46,.45,.94);
}
.mkn3-item:hover .mkn3-source {
  background: rgba(212,168,67,.08) !important;
  border-color: rgba(212,168,67,.12) !important;
  color: #F0B90B !important;
}

/* ─── MKN3 W1 Full Redesign ─── */

/* Shimmer overlay (ping-pong) */
.mkn3-card-shimmer {
  position: absolute;
  top: 0; left: -100%; width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,67,.03) 25%, rgba(212,168,67,.06) 50%, rgba(212,168,67,.03) 75%, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 0;
}
.mkn3-card:hover .mkn3-card-shimmer {
  opacity: 1;
  animation: mi-shimmerSlide 2s ease-in-out infinite alternate;
}

/* ── MKN3 Header layout ── */
.mkn3-header {
  position: relative; z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

/* Row 1: icon + title + count ···→ chips (single line) */
.mkn3-hd-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 8px !important;
}
.mkn3-hd-icon {
  width: 28px; height: 28px; min-width: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: #F0B90B;
  flex-shrink: 0;
}
.mkn3-hd-icon svg { position: relative; z-index: 1; }
.mkn3-hd-icon-glow {
  position: absolute; inset: -2px; border-radius: 10px;
  opacity: .5; z-index: 0;
  box-shadow: 0 0 12px rgba(240,185,11,.3);
  animation: mi-glowPulse 3s ease-in-out infinite;
}
.mkn3-hd-icon svg {
  animation: mkn3-shieldPulse 2.5s ease-in-out infinite;
}
@keyframes mkn3-shieldPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}

/* Chips pushed to right */
.mkn3-hd-top .mkn3-chips {
  display: flex !important;
  gap: 5px !important;
  margin-left: auto !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

/* Row 2: severity bar (full width) */
.mkn3-sev-bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  margin-bottom: 6px;
  gap: 2px;
  width: 100%;
}
.mkn3-sev-seg {
  height: 100%;
  border-radius: 2px;
  animation: mkn3-segGrow 600ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--seg-delay, 0ms);
  width: var(--seg-w, 0%);
}
@keyframes mkn3-segGrow {
  from { width: 0; opacity: 0; }
}
.mkn3-seg-crit { background: linear-gradient(90deg, rgba(246,70,93,.7), #f6465d); }
.mkn3-seg-warn { background: linear-gradient(90deg, rgba(240,185,11,.6), #f0b90b); }
.mkn3-seg-norm { background: linear-gradient(90deg, rgba(100,149,237,.5), rgba(100,149,237,.7)); }

/* Row 3: desc (full width, muted) */
.mkn3-header .mkn3-desc {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

/* Items z-index */
.mkn3-items { position: relative; z-index: 1; }

/* Items as glassmorphism mini-cards */
.mkn3-item {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-left: 3px solid transparent !important;
  animation-delay: calc(var(--mkn-delay, 0) * 80ms + 100ms) !important;
  position: relative !important;
  overflow: hidden !important;
}
.mkn3-sev-critical { border-left-color: #f6465d !important; }
.mkn3-sev-warning  { border-left-color: #f0b90b !important; }
.mkn3-sev-normal   { border-left-color: rgba(100,149,237,.5) !important; }
.mkn3-sev-info     { border-left-color: rgba(132,142,156,.4) !important; }

.mkn3-item:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(212,168,67,.12) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
}
/* Gold shimmer outline on hover */
.mkn3-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 10px !important;
  padding: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,67,.35) 25%, rgba(240,215,140,.5) 50%, rgba(212,168,67,.35) 75%, transparent 100%) !important;
  background-size: 200% 100% !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.mkn3-item:hover::after {
  opacity: 1 !important;
  animation: db2-shimmer 2s linear infinite !important;
}

/* Per-item severity SVG icon */
.mkn3-item-icon {
  width: 24px; height: 24px; min-width: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 1px;
}
.mkn3-icon-critical {
  color: #f6465d;
  background: rgba(246,70,93,.1);
  animation: mkn3-critPulse 1.5s ease-in-out infinite;
}
@keyframes mkn3-critPulse {
  0%,100% { box-shadow: 0 0 4px rgba(246,70,93,.2); }
  50%     { box-shadow: 0 0 12px rgba(246,70,93,.5); }
}
.mkn3-icon-warning {
  color: #f0b90b;
  background: rgba(240,185,11,.1);
}
.mkn3-icon-normal {
  color: rgba(100,149,237,.8);
  background: rgba(100,149,237,.08);
}
.mkn3-icon-info {
  color: rgba(132,142,156,.7);
  background: rgba(132,142,156,.08);
}

/* Remove old dot (replaced by icon) */
.mkn3-item .mkn3-dot { display: none !important; }

/* 3D tilt transition */
.mkn3-tilt {
  transition: transform 350ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 350ms cubic-bezier(.25,.46,.45,.94),
              border-color 350ms cubic-bezier(.25,.46,.45,.94) !important;
}

/* ── Usage Credits Badge & Warning ── */
.credits-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
  margin-left: auto;
}
.credits-badge.credits-ok {
  background: rgba(34,197,94,.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.2);
}
.credits-badge.credits-low {
  background: rgba(250,204,21,.12);
  color: #facc15;
  border: 1px solid rgba(250,204,21,.25);
}
.credits-badge.credits-critical {
  background: rgba(239,68,68,.12);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.25);
  animation: pulse-credits 2s ease-in-out infinite;
}
.credits-badge.credits-zero {
  background: rgba(239,68,68,.2);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.35);
}
@keyframes pulse-credits {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}

.credits-warning-banner {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: var(--ws-gap-section);
  display: none;   /* shown via JS removing .hidden */
  align-items: center;
  gap: 8px;
}
.credits-warning-banner.level-low,
.credits-warning-banner.level-critical,
.credits-warning-banner.level-zero { display: flex; }
.credits-warning-banner.level-low {
  background: rgba(250,204,21,.08);
  border: 1px solid rgba(250,204,21,.2);
  color: #facc15;
}
.credits-warning-banner.level-critical {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  color: #ef4444;
}
.credits-warning-banner.level-zero {
  background: linear-gradient(135deg, rgba(239,68,68,.1) 0%, rgba(168,85,247,.1) 100%);
  border: 1px solid rgba(239,68,68,.25);
  color: #f8f8f8;
  flex-direction: column;
  text-align: center;
  padding: 16px;
}
.credits-warning-banner .btn-upgrade-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #3b82f6, #a855f7);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 8px;
  transition: transform .15s, box-shadow .15s;
}
.credits-warning-banner .btn-upgrade-inline:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(59,130,246,.3);
}

/* ── Usage Limits Detail Panel ── */
/* ═══════════════════════════════════════════════════════════════════════════
   USAGE LIMITS PANEL — Binance Premium Redesign
   ═══════════════════════════════════════════════════════════════════════════ */
.usage-limits-panel {
  background: linear-gradient(135deg, rgba(13,15,20,.97) 0%, rgba(19,21,28,.95) 100%);
  border: 1px solid rgba(42,45,58,.6);
  border-radius: 12px;
  padding: 20px 20px 16px;
  margin-bottom: var(--ws-gap-section);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
  animation: ul-slide-in .35s cubic-bezier(.25,.46,.45,.94) forwards;
}
.usage-limits-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,168,67,.6), rgba(240,216,140,.3) 50%, transparent);
}
@keyframes ul-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* --- Header --- */
.ul-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ul-subtitle {
  font-size: 11.5px;
  color: rgba(255,255,255,.45);
  margin-bottom: 16px;
  line-height: 1.4;
  letter-spacing: .2px;
}
.ul-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #F0B90B;
}
.ul-plan-badge {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
/* --- Hero remaining metric --- */
.ul-hero {
  text-align: center;
  margin-bottom: 16px;
  padding: 16px 0 12px;
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 10px;
}
/* W1 horizontal hero layout */
.ul-hero-hz {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 14px 16px;
}
.ul-hero-hz .ul-hero-ring {
  margin: 0;
  flex-shrink: 0;
}
.ul-hero-info { flex: 1; min-width: 0; }
.ul-hero-headline {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.ul-hero-big {
  font-size: 28px;
  font-weight: 800;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ul-hero-of {
  font-size: 14px;
  color: #5A5C66;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-weight: 500;
}
.ul-hero-label-inline {
  font-size: 12px;
  color: #8B8D97;
  font-weight: 500;
}
.ul-hero-pace {
  font-size: 11px;
  color: #8B8D97;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.ul-hero-pace svg { flex-shrink: 0; }
.ul-hero-pace.ul-pace-warn { color: #facc15; font-weight: 600; }
.ul-hero-hint {
  font-size: 11px;
  color: #5A5C66;
}
.ul-hero-num {
  font-size: 26px;
  font-weight: 800;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.ul-hero-ring {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 8px;
}
.ul-hero-ring svg { display: block; }
.ul-hero-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1;
}
.ul-hero-sub {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 10px;
  color: #5A5C66;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.ul-hero-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #8B8D97;
  margin-top: 6px;
}
/* ─── Stats Grid (3-column) ─── */
.ul-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.ul-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px 10px;
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  transition: all 250ms cubic-bezier(.25,.46,.45,.94);
  position: relative;
  overflow: hidden;
  animation: ul-cardUp 500ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--ul-delay, 0) * 80ms);
}
@keyframes ul-cardUp {
  from { opacity: 0; transform: translateY(16px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.ul-stat-card:hover {
  background: rgba(255,255,255,.035);
  border-color: rgba(212,168,67,.12);
  transform: translateY(-2px);
}
.ul-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.ul-stat-icon svg {
  width: 18px;
  height: 18px;
}
.ul-stat-num {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.ul-stat-unit {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #5A5C66;
  margin-left: 3px;
  letter-spacing: 0;
}
.ul-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #5A5C66;
  text-align: center;
  line-height: 1.2;
}
.ul-stat-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.ul-stat-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .8s cubic-bezier(.25,.46,.45,.94);
  animation: mi-barGrow .8s cubic-bezier(.25,.46,.45,.94) forwards;
}
/* --- Progress bar rows --- */
.ul-row {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 8px;
  transition: background 200ms;
}
.ul-row:hover { background: rgba(255,255,255,.03); }
.ul-row-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ul-row-icon { font-size: 14px; }
.ul-row-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #E8E9ED;
  flex: 1;
}
.ul-row-value {
  font-size: 12px;
  font-weight: 600;
  color: #8B8D97;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.ul-bar-track {
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.ul-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s cubic-bezier(.25,.46,.45,.94);
  animation: mi-barGrow .6s cubic-bezier(.25,.46,.45,.94) forwards;
}
.ul-bar-fill.ul-bar-warn { }
.ul-bar-fill.ul-bar-danger { animation: pulse-credits 2s ease-in-out infinite; }
/* --- Info chips --- */
.ul-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ul-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  font-size: 11px;
  transition: all 200ms;
}
.ul-chip:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(212,168,67,.15);
}
.ul-chip-icon { font-size: 12px; }
.ul-chip-label {
  font-family: 'Inter', sans-serif;
  color: #5A5C66;
  font-weight: 500;
}
.ul-chip-value {
  color: #E8E9ED;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.ul-chip[title] { cursor: help; }
/* --- Upgrade button --- */
.ul-upgrade-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  margin-top: 14px;
  background: linear-gradient(135deg, #D4A843 0%, #B8922E 100%);
  color: #0b0e11;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 250ms cubic-bezier(.25,.46,.45,.94);
  letter-spacing: .3px;
  position: relative;
  overflow: hidden;
}
.ul-upgrade-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: ul-shimmer 3s ease-in-out infinite;
}
@keyframes ul-shimmer {
  0%, 100% { transform: translateX(-50%); }
  50% { transform: translateX(50%); }
}
.ul-upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,168,67,.35);
}
/* --- Descriptions & hints --- */
.ul-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px; line-height: 1.5;
  color: #5A5C66;
  margin-bottom: 14px;
  padding: 0 2px;
}
.ul-hint {
  font-family: 'Inter', sans-serif;
  font-size: 11px; line-height: 1.4;
  color: #5A5C66;
  margin: -2px 0 12px 28px;
}
.ul-hint-warn {
  color: #facc15;
  font-weight: 600;
}
/* --- Usage pace projection --- */
.ul-pace {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #8B8D97;
  margin: -2px 0 12px 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255,255,255,.015);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.03);
}
.ul-pace-icon { font-size: 14px; }
.ul-pace.ul-pace-warn {
  color: #facc15;
  font-weight: 600;
  background: rgba(250,204,21,.04);
  border-color: rgba(250,204,21,.1);
}
/* --- Trial vs Pro comparison table --- */
.ul-compare {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
}
.ul-compare-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #F0B90B;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 10px;
}
.ul-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ul-compare-table th {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #5A5C66;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ul-compare-table td {
  font-family: 'Inter', sans-serif;
  padding: 7px 8px;
  color: #8B8D97;
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 12px;
}
.ul-compare-table tr:last-child td { border-bottom: none; }
.ul-compare-table tr {
  transition: background 150ms;
}
.ul-compare-table tr:hover td { background: rgba(255,255,255,.02); }
.ul-trial-col {
  text-align: center;
  color: #5A5C66 !important;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.ul-pro-col {
  text-align: center;
  color: #0ecb81 !important;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
/* --- Contextual CTA messages --- */
/* ── PRO Benefits Section ── */
.ul-pro-section {
  margin-top: 16px;
}
.ul-pro-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  background: linear-gradient(135deg, #D4A843, #F0D78C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  padding: 0 2px;
}
.ul-pro-header svg { flex-shrink: 0; }
.ul-pro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ul-pro-card {
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 12px 10px 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 280ms cubic-bezier(.25,.46,.45,.94);
  animation: ul-cardUp 500ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--ul-delay, 0) * 80ms);
}
.ul-pro-card:hover {
  background: rgba(255,255,255,.035);
  border-color: rgba(212,168,67,.15);
  transform: translateY(-2px);
}
/* shimmer on pro cards */
.ul-pro-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,67,.35) 25%, rgba(240,215,140,.5) 50%, rgba(212,168,67,.35) 75%, transparent 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 2;
}
.ul-pro-card:hover::after {
  opacity: 1;
  animation: db2-shimmer 2s linear infinite;
}
.ul-pro-card-icon {
  margin-bottom: 6px;
}
.ul-pro-card-icon svg {
  filter: drop-shadow(0 0 4px currentColor);
}
.ul-pro-card-val {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.ul-pro-card-val svg { width: 22px; height: 22px; }
.ul-pro-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #E8E9ED;
  line-height: 1.3;
  margin-bottom: 4px;
}
.ul-pro-card-vs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #5A5C66;
  font-variant-numeric: tabular-nums;
}
.ul-pro-locked {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #ef4444;
  font-weight: 600;
  font-size: 10px;
}
.ul-pro-locked svg { width: 10px; height: 10px; }
@media (max-width: 400px) {
  .ul-pro-grid { grid-template-columns: 1fr; }
}

.ul-cta-msg {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 14px;
  text-align: center;
}
.ul-cta-urgent {
  background: rgba(239,68,68,.1);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.18);
  font-weight: 700;
  animation: pulse-credits 2s ease-in-out infinite;
}
.ul-cta-warn {
  background: rgba(250,204,21,.06);
  color: #facc15;
  border: 1px solid rgba(250,204,21,.1);
  font-weight: 600;
}
/* "What happens" explainer */
/* ── Collapsible "What happens" ── */
.ul-what-happens-wrap {
  margin-top: 16px;
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  overflow: hidden;
}
.ul-wh-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #F0B90B;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .2s;
}
.ul-wh-toggle::-webkit-details-marker { display: none; }
.ul-wh-toggle::before {
  content: '\25B8';
  font-size: 10px;
  transition: transform .2s;
}
.ul-what-happens-wrap[open] .ul-wh-toggle::before { transform: rotate(90deg); }
.ul-wh-toggle:hover { background: rgba(255,255,255,.02); }
.ul-wh-body { padding: 0 14px 12px; }
/* Legacy non-collapsible fallback */
.ul-what-happens {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
}
.ul-wh-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  color: #F0B90B;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.ul-wh-item {
  font-family: 'Inter', sans-serif;
  font-size: 12px; line-height: 1.5;
  color: #8B8D97;
  margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0;
}
.ul-wh-item:last-child { margin-bottom: 0; }
.ul-wh-icon { font-size: 14px; flex-shrink: 0; }

/* Shimmer on stat-card + hero + compare + what-happens */
.ul-stat-card::after,
.ul-hero::after,
.ul-compare::after,
.ul-what-happens-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,67,.35) 25%, rgba(240,215,140,.5) 50%, rgba(212,168,67,.35) 75%, transparent 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 2;
}
.ul-stat-card:hover::after,
.ul-hero:hover::after,
.ul-compare:hover::after,
.ul-what-happens-wrap:hover::after {
  opacity: 1;
  animation: db2-shimmer 2s linear infinite;
}
.ul-hero, .ul-compare, .ul-what-happens-wrap { position: relative; overflow: hidden; }

@media (max-width: 540px) {
  .usage-limits-panel { padding: 14px 12px 12px; }
  .ul-hero-hz { flex-direction: column; text-align: center; }
  .ul-hero-headline { justify-content: center; }
  .ul-hero-num { font-size: 22px; }
  .ul-hero-big { font-size: 24px; }
  .ul-stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ul-stat-num { font-size: 20px; }
  .ul-stat-card { padding: 10px 6px 8px; }
  .ul-chips { gap: 4px; }
  .ul-chip { padding: 3px 7px; font-size: 11px; }
  .ul-compare-table { font-size: 11px; }
}

/* ── Analysis Insights Strip — Binance Premium + Apple ── */
.ai-insights-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
/* ─── Summary Insight Bar ─── */
.ais-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  animation: ais-cardUp 400ms cubic-bezier(.25,.46,.45,.94) forwards;
  opacity: 0;
}
.ais-summary-ok {
  background: rgba(14,203,129,.05);
  border: 1px solid rgba(14,203,129,.12);
  color: #8B8D97;
}
.ais-summary-caution {
  background: rgba(250,204,21,.05);
  border: 1px solid rgba(250,204,21,.12);
  color: #8B8D97;
}
.ais-summary-warn {
  background: rgba(239,68,68,.05);
  border: 1px solid rgba(239,68,68,.12);
  color: #8B8D97;
  animation: ais-cardUp 400ms forwards, ais-summaryPulse 3s ease-in-out 1s infinite;
}
@keyframes ais-summaryPulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 12px rgba(239,68,68,.08); }
}
.ais-summary-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ais-summary-ok .ais-summary-icon   { color: #0ecb81; }
.ais-summary-caution .ais-summary-icon { color: #facc15; }
.ais-summary-warn .ais-summary-icon { color: #ef4444; }
.ais-summary-text {
  font-weight: 500;
  color: #C4C6CC;
}
.ais-summary-text strong {
  font-weight: 700;
  color: #E8E9ED;
}
/* ─── Card: glassmorphism + 3D tilt + shimmer ─── */
.ais-card {
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 14px 16px 12px;
  transition: transform 280ms cubic-bezier(.25,.46,.45,.94),
              background 280ms, border-color 280ms, box-shadow 280ms;
  animation: ais-cardUp 500ms cubic-bezier(.25,.46,.45,.94) forwards;
  animation-delay: calc(var(--ais-delay, 0) * 100ms);
  opacity: 0;
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.ais-card:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(212,168,67,.15);
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(212,168,67,.06);
}
/* Shimmer border effect on hover */
.ais-card-shimmer {
  position: absolute;
  top: 0; left: -100%; width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,67,.04) 25%, rgba(212,168,67,.08) 50%, rgba(212,168,67,.04) 75%, transparent 100%);
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
  z-index: 0;
}
.ais-card:hover .ais-card-shimmer {
  opacity: 1;
  animation: ais-shimmerSlide 2s ease-in-out infinite alternate;
}
@keyframes ais-shimmerSlide {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(30%); }
}
@keyframes ais-cardUp {
  from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.ais-card-wide { grid-column: span 2; }
/* ─── Card Header: icon + title + badge ─── */
.ais-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.ais-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: transform 200ms;
}
.ais-card:hover .ais-card-icon { transform: scale(1.1) rotate(3deg); }
.ais-icon-radar  { background: rgba(239,68,68,.08); color: #ef4444; border: 1px solid rgba(239,68,68,.15); }
.ais-icon-shield { background: rgba(250,204,21,.08); color: #facc15; border: 1px solid rgba(250,204,21,.15); }
.ais-icon-db     { background: rgba(59,130,246,.08); color: #3b82f6; border: 1px solid rgba(59,130,246,.15); }
.ais-icon-link   { background: rgba(139,92,246,.08); color: #8b5cf6; border: 1px solid rgba(139,92,246,.15); }
.ais-icon-cpu    { background: rgba(14,203,129,.08); color: #0ecb81; border: 1px solid rgba(14,203,129,.15); }
.ais-card-icon svg { width: 16px; height: 16px; position: relative; z-index: 1; }
/* Icon glow ring */
.ais-icon-glow {
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 300ms;
}
.ais-icon-radar .ais-icon-glow  { box-shadow: 0 0 12px rgba(239,68,68,.3); }
.ais-icon-shield .ais-icon-glow { box-shadow: 0 0 12px rgba(250,204,21,.3); }
.ais-icon-db .ais-icon-glow     { box-shadow: 0 0 12px rgba(59,130,246,.3); }
.ais-icon-link .ais-icon-glow   { box-shadow: 0 0 12px rgba(139,92,246,.3); }
.ais-icon-cpu .ais-icon-glow    { box-shadow: 0 0 12px rgba(14,203,129,.3); }
.ais-card:hover .ais-icon-glow  { opacity: 1; }
/* Radar icon spin */
.ais-icon-radar svg { animation: ais-radarSpin 8s linear infinite; }
@keyframes ais-radarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Shield icon pulse */
.ais-icon-shield svg { animation: ais-shieldPulse 2.5s ease-in-out infinite; }
@keyframes ais-shieldPulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; transform: scale(1.08); } }
/* CPU icon blink */
.ais-icon-cpu svg { animation: ais-cpuBlink 3s ease-in-out infinite; }
@keyframes ais-cpuBlink { 0%, 100% { opacity: .85; } 50% { opacity: 1; filter: drop-shadow(0 0 3px currentColor); } }
.ais-card-hd-text { flex: 1; min-width: 0; }
.ais-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #E8E9ED 0%, #D4A843 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}
.ais-card-hint {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #5A5C66;
  line-height: 1.35;
  margin-top: 2px;
}
.ais-card-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.ais-badge-risk    { background: rgba(239,68,68,.1); color: #ef4444; border: 1px solid rgba(239,68,68,.2); }
.ais-badge-opp     { background: rgba(14,203,129,.1); color: #0ecb81; border: 1px solid rgba(14,203,129,.2); }
.ais-badge-ctx     { background: rgba(100,116,139,.1); color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }
.ais-badge-warn    { background: rgba(250,204,21,.1); color: #facc15; border: 1px solid rgba(250,204,21,.2); }
.ais-badge-neutral { background: rgba(59,130,246,.1); color: #60a5fa; border: 1px solid rgba(59,130,246,.2); }
.ais-badge-good    { background: rgba(14,203,129,.1); color: #0ecb81; border: 1px solid rgba(14,203,129,.2); }
.ais-badge-bad     { background: rgba(239,68,68,.1); color: #ef4444; border: 1px solid rgba(239,68,68,.2); }
/* Badge pop-in animation */
.ais-badge-pop {
  animation: ais-badgePop 400ms cubic-bezier(.175,.885,.32,1.275) forwards;
  animation-delay: calc(var(--ais-delay, 0) * 100ms + 300ms);
  opacity: 0;
  transform: scale(.5);
}
@keyframes ais-badgePop {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}
/* Badge warning pulse */
.ais-badge-pulse {
  animation: ais-warnPulse 2s ease-in-out infinite;
}
@keyframes ais-warnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250,204,21,.3); }
  50%      { box-shadow: 0 0 8px 2px rgba(250,204,21,.15); }
}
/* ─── News Intelligence stacked bar ─── */
.ais-news-bar {
  display: flex;
  height: 18px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  background: rgba(255,255,255,.03);
}
.ais-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  min-width: 3px;
  width: 0;
  animation: ais-segGrow .6s cubic-bezier(.25,.46,.45,.94) forwards;
  animation-delay: calc(var(--seg-delay, 0) + 200ms);
}
@keyframes ais-segGrow {
  from { width: 0; }
  to   { width: var(--seg-w); }
}
.ais-seg-risk  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.ais-seg-opp   { background: linear-gradient(135deg, #0ecb81, #059669); }
.ais-seg-ctx   { background: linear-gradient(135deg, #64748b, #475569); }
.ais-seg-noise { background: rgba(55,65,81,.7); }
.ais-news-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ais-leg {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #8B8D97;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ais-leg strong {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ais-leg-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.ais-leg-risk strong  { color: #ef4444; }
.ais-leg-opp strong   { color: #0ecb81; }
.ais-leg-ctx strong   { color: #94a3b8; }
.ais-leg-noise strong { color: #6b7280; }
/* ─── Invalidation conditions ─── */
.ais-inv-list { display: flex; flex-direction: column; gap: 6px; }
.ais-inv-item {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  padding: 8px 10px;
  background: rgba(239,68,68,.04);
  border: 1px solid rgba(239,68,68,.08);
  border-left: 3px solid rgba(239,68,68,.35);
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 200ms;
  animation: ais-invSlide 400ms cubic-bezier(.25,.46,.45,.94) forwards;
  animation-delay: calc(var(--inv-delay, 0) + 200ms);
  opacity: 0;
  transform: translateX(-10px);
}
@keyframes ais-invSlide {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ais-inv-item:hover {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.15);
  transform: translateX(3px);
  box-shadow: -3px 0 10px rgba(239,68,68,.1);
}
.ais-inv-icon {
  display: flex;
  align-items: center;
  color: #ef4444;
  opacity: .7;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}
.ais-inv-icon svg { width: 14px; height: 14px; }
.ais-inv-content { flex: 1; min-width: 0; }
/* Proximity bar inside invalidation item */
.ais-inv-prox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.ais-inv-prox-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
  max-width: 100px;
}
.ais-inv-prox-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .6s cubic-bezier(.25,.46,.45,.94);
  animation: mi-barGrow .7s cubic-bezier(.25,.46,.45,.94) forwards;
  position: relative;
}
.ais-inv-prox-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* ─── Data depth grid ─── */
.ais-depth-grid { display: flex; flex-direction: column; gap: 0; }
.ais-depth-ring {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ais-mini-ring {
  display: block;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.05));
}
.ais-depth-header {
  display: grid;
  grid-template-columns: 40px 52px 1fr 36px;
  gap: 6px;
  padding: 0 0 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #5A5C66;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ais-depth-row {
  display: grid;
  grid-template-columns: 40px 52px 1fr 36px;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.02);
  transition: background 150ms;
}
.ais-depth-row:last-child { border-bottom: none; }
.ais-depth-row:hover { background: rgba(255,255,255,.02); }
.ais-depth-sym {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #E8E9ED;
  font-size: 12px;
}
.ais-depth-val {
  color: #8B8D97;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.ais-depth-cov {
  text-align: right;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ais-cov-ok   { color: #0ecb81; }
.ais-cov-warn { color: #facc15; }
.ais-cov-bad  { color: #ef4444; }
.ais-depth-total {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  margin-top: 6px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}
/* ─── News-Signal links ─── */
.ais-links-list { display: flex; flex-direction: column; gap: 6px; }
.ais-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: all 200ms;
  background: rgba(255,255,255,.01);
}
.ais-link-row:hover {
  background: rgba(255,255,255,.03);
  transform: translateX(2px);
}
.ais-link-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
}
.ais-link-icon-wrap svg { width: 14px; height: 14px; }
.ais-link-risk { background: rgba(239,68,68,.08); color: #ef4444; border: 1px solid rgba(239,68,68,.12); }
.ais-link-opp  { background: rgba(14,203,129,.08); color: #0ecb81; border: 1px solid rgba(14,203,129,.12); }
.ais-link-ctx  { background: rgba(100,116,139,.08); color: #94a3b8; border: 1px solid rgba(100,116,139,.12); }
.ais-link-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ais-link-title {
  font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.ais-link-time {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #5A5C66;
  font-variant-numeric: tabular-nums;
}
.ais-link-time svg { width: 10px; height: 10px; opacity: .5; }
.ais-link-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: .3px;
}
.ais-tag-risk { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.18); }
.ais-tag-opp  { background: rgba(14,203,129,.12); color: #0ecb81; border: 1px solid rgba(14,203,129,.18); }
.ais-tag-ctx  { background: rgba(100,116,139,.12); color: #94a3b8; border: 1px solid rgba(100,116,139,.18); }
/* ─── ML Label Quality ─── */
.ais-lq-grid { display: flex; flex-direction: column; gap: 8px; }
.ais-lq-row {
  display: grid;
  grid-template-columns: 40px 1fr 36px;
  align-items: center;
  gap: 8px;
}
.ais-lq-sym {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #E8E9ED;
}
.ais-lq-bar {
  height: 8px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
  overflow: hidden;
}
.ais-lq-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .6s cubic-bezier(.25,.46,.45,.94);
  animation: mi-barGrow .7s cubic-bezier(.25,.46,.45,.94) forwards;
  position: relative;
  overflow: hidden;
}
.ais-lq-fill.ais-q-good { background: linear-gradient(90deg, #059669, #0ecb81); }
.ais-lq-fill.ais-q-ok   { background: linear-gradient(90deg, #d97706, #facc15); }
.ais-lq-fill.ais-q-weak { background: linear-gradient(90deg, #dc2626, #ef4444); }
/* Glow trail on bar leading edge */
.ais-lq-glow {
  position: absolute;
  right: -2px; top: -2px; bottom: -2px;
  width: 12px;
  border-radius: 50%;
  filter: blur(4px);
  animation: ais-glowPulse 2s ease-in-out infinite;
}
.ais-q-good .ais-lq-glow { background: #0ecb81; }
.ais-q-ok .ais-lq-glow   { background: #facc15; }
.ais-q-weak .ais-lq-glow { background: #ef4444; }
@keyframes ais-glowPulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}
.ais-lq-pct {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.ais-q-good { color: #0ecb81; }
.ais-q-ok   { color: #facc15; }
.ais-q-weak { color: #ef4444; }
/* ─── Footer: run meta ─── */
.ais-footer {
  display: flex;
  gap: 16px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.04);
  grid-column: 1 / -1;
}
.ais-footer-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,.3);
  font-variant-numeric: tabular-nums;
}
.ais-footer-item svg { width: 12px; height: 12px; opacity: .5; }
.ais-run-id { opacity: .5; }
@media (max-width: 540px) {
  .ai-insights-strip { grid-template-columns: 1fr; }
  .ais-card-wide { grid-column: span 1; }
  .ais-card-header { gap: 8px; }
  .ais-card-badge { font-size: 10px; padding: 2px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Maintenance Mode Banner
   ═══════════════════════════════════════════════════════════════════════ */
#sp-maintenance-banner {
  animation: sp-maintenance-pulse 3s ease-in-out infinite;
}
@keyframes sp-maintenance-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Tier Gating — Locked & Hidden Sections (Settings Page)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section: Locked (read-only for free/trial users) ────────────── */
.sp-section-locked .sp-card { position: relative; }
.sp-section-locked .sp-baseline-card { display: block !important; }
.sp-section-locked input,
.sp-section-locked select,
.sp-section-locked button:not(.sp-upgrade-btn):not(.sp-tier-details-toggle),
.sp-section-locked textarea,
.sp-section-locked .toggle {
  pointer-events: none !important;
  opacity: 0.4;
}
.sp-section-locked .sp-section-head button:not(.sp-upgrade-btn) {
  display: none !important;
}

/* ── Section: Hidden (not visible at all for free/trial) ─────────── */
.sp-section-hidden {
  display: none !important;
}

/* ── Nav items: lock icon ────────────────────────────────────────── */
.sp-lock-icon {
  margin-left: auto;
  opacity: 0.45;
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}
.sp-subnav-item .sp-lock-icon {
  margin-left: 6px;
  font-size: 9px;
  opacity: 0.35;
}

/* ── Nav items: hidden section nav ───────────────────────────────── */
.sp-nav-hidden {
  display: none !important;
}

/* ── Upgrade Card — Unified Premium Gating Component ─────────────── */
.sp-tier-banner {
  position: relative;
  z-index: 3;
  border-radius: 14px;
  margin: 14px 0 6px;
  background: linear-gradient(160deg,
    rgba(22,26,30,1) 0%,
    rgba(26,30,35,.98) 40%,
    rgba(32,28,20,.95) 100%);
  border: 1px solid rgba(240,185,11,.12);
  box-shadow: 0 4px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(240,185,11,.06);
  transition: box-shadow .3s ease;
  animation: sp-fade-up .5s ease-out both;
}
.sp-tier-banner:hover {
  box-shadow: 0 6px 32px rgba(0,0,0,.4), 0 0 20px rgba(14,203,129,.04), inset 0 1px 0 rgba(14,203,129,.08);
}
/* Top accent gradient line — green-gold shimmer */
.sp-tier-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(14,203,129,.5) 25%,
    rgba(240,185,11,.7) 50%,
    rgba(14,203,129,.5) 75%,
    transparent 100%);
  background-size: 200% 100%;
  animation: sp-shimmer 3s ease-in-out infinite;
}

/* ── Top section: lock icon + text + CTA ───────────────────────── */
.sp-tier-banner-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px 18px;
}

/* Lock icon container */
.sp-tier-banner-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(14,203,129,.12), rgba(240,185,11,.1));
  border: 1px solid rgba(14,203,129,.15);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(14,203,129,.08);
}
.sp-tier-banner-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent);
  fill: rgba(240,185,11,.15);
  stroke-width: 1.5;
}

/* PRO inline badge in title */
.sp-tier-badge {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('/static/brand/pro.png') no-repeat center / contain;
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  top: -2px;
  font-size: 0;
  color: transparent;
  filter: drop-shadow(0 1px 4px rgba(14,203,129,.2));
}

/* Text area */
.sp-tier-banner-body {
  flex: 1;
  min-width: 0;
}
.sp-tier-banner-title {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
  letter-spacing: .01em;
}
.sp-tier-banner-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* CTA button — static gold+green fill, animated purple+green border via multi-background */
.sp-upgrade-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 28px;
  /*
   * Two backgrounds in one declaration:
   *   1. padding-box  → gold+green gradient fills the button face (never changes)
   *   2. border-box   → purple+green gradient fills the 3px transparent border
   * background-size for layer 2 is 300% so background-position can slide it.
   */
  background:
    linear-gradient(135deg, #0ecb81 0%, #2ecc71 30%, #d4a017 70%, #F0B90B 100%) padding-box,
    linear-gradient(90deg, #0ecb81, #8b5cf6, #0ecb81, #8b5cf6, #0ecb81) border-box;
  background-size: 100% 100%, 300% 100%;
  background-position: 0% 50%, 0% 50%;
  border: 3px solid transparent;
  color: #0B0F1A;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .03em;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .2s ease;
  z-index: 1; /* above ::before shadow within isolation context */
  overflow: hidden;
  /* Only the border layer (position layer 2) slides — layer 1 stays at 0% */
  animation: sp-outline-flow 3s ease-in-out infinite;
}

/* Sliding white shimmer — same as btn-analysis "живая" effect */
.sp-upgrade-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .6s ease;
  pointer-events: none;
  z-index: 2;
}
.sp-upgrade-btn:hover::before {
  left: 100%;
}

/* Hover: lift only */
.sp-upgrade-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

/* Shadow wrapper — isolation: isolate creates own stacking context,
   ::before at z-index:-1 stays inside wrapper, inset:-5px is perfectly
   symmetric on all 4 sides regardless of button width */
.sp-tier-banner-top {
  position: relative;
}
.sp-upgrade-btn-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  isolation: isolate; /* own stacking context — contains z-index:-1 */
}
.sp-upgrade-btn-wrap::before {
  content: '';
  position: absolute;
  inset: -5px;          /* exactly 5px on all 4 sides */
  border-radius: 15px;  /* button radius(10) + inset(5) */
  background: linear-gradient(90deg, #000, #8b5cf6, #0ecb81, #F0B90B, #000, #8b5cf6, #0ecb81, #F0B90B, #000);
  background-size: 300% 100%;
  filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  animation: sp-shadow-flow 5s ease-in-out infinite;
  z-index: -1; /* behind button within isolation context */
}
.sp-upgrade-btn-wrap:has(.sp-upgrade-btn:hover)::before {
  opacity: .85;
}

/* Outline keyframe */
@keyframes sp-outline-flow {
  0%, 100% { background-position: 0% 50%, 0% 50%; }
  50%       { background-position: 0% 50%, 100% 50%; }
}
/* Shadow keyframe */
@keyframes sp-shadow-flow {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ── Bottom section: baseline data or feature list ─────────────── */
.sp-tier-banner-content {
  padding: 0 24px 20px;
}

/* ── Divider between top and content ───────────────────────────── */
.sp-tier-divider {
  height: 1px;
  margin: 0 24px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06) 20%, rgba(255,255,255,.06) 80%, transparent);
}

/* ── Baseline Read-only Summary ────────────────────────────────── */
.sp-baseline-card {
  margin-bottom: 0;
}
.sp-baseline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-top: 16px;
}
.sp-baseline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(14,203,129,.4);
}
.sp-baseline-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.sp-baseline-profile-name {
  color: var(--accent);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.sp-baseline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 28px;
}
.sp-baseline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  transition: background .15s ease;
}
.sp-baseline-row:hover {
  background: rgba(255,255,255,.03);
}
.sp-baseline-key {
  font-size: 12px;
  color: var(--text-muted);
}
.sp-baseline-val {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: 'SF Mono', 'Fira Code', monospace;
  background: rgba(255,255,255,.04);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Feature Preview List ──────────────────────────────────────── */
.sp-feature-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
}
.sp-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  transition: background .15s ease;
}
.sp-feature-item:hover {
  background: rgba(255,255,255,.03);
}
.sp-feature-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: rgba(14,203,129,.1);
  border-radius: 50%;
  padding: 3px;
}
.sp-feature-check path {
  stroke: var(--green) !important;
}
.sp-feature-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Alert Categories Preview (Notifications) ──────────────────── */
.sp-alert-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
}
.sp-alert-cat {
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  padding: 14px;
  transition: all .25s ease;
  animation: sp-fade-up .5s ease-out both;
}
.sp-alert-cat:nth-child(1) { animation-delay: .1s; }
.sp-alert-cat:nth-child(2) { animation-delay: .2s; }
.sp-alert-cat:nth-child(3) { animation-delay: .3s; }
.sp-alert-cat:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  transform: translateX(4px);
}
.sp-alert-cat-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.sp-alert-cat-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}
.sp-alert-cat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-alert-cat-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.sp-alert-cat-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.sp-alert-example {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 8px 12px;
  background: rgba(0,0,0,.2);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
  font-family: 'SF Mono', 'Fira Code', monospace;
  line-height: 1.4;
}
.sp-alert-example-label {
  color: var(--text-muted);
  font-weight: 600;
  font-family: inherit;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .5px;
}

/* Alert priority badge */
.sp-alert-cat-priority {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-left: auto;
  flex-shrink: 0;
}
.sp-alert-cat-detail {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 8px;
  padding-left: 32px;
}

/* ── Notification Flow Pipeline ──────────────────────────────── */
.sp-notif-flow {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
}
.sp-notif-flow-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.sp-notif-flow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-notif-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 80px;
  animation: sp-fade-up .4s ease both;
}
.sp-notif-flow-step:nth-child(1) { animation-delay: 0ms; }
.sp-notif-flow-step:nth-child(3) { animation-delay: 150ms; }
.sp-notif-flow-step:nth-child(5) { animation-delay: 300ms; }
.sp-notif-flow-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-notif-flow-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  font-weight: 500;
}
.sp-notif-flow-arrow {
  font-size: 16px;
  color: var(--text-muted);
  animation: sp-flow-pulse 2s ease-in-out infinite;
}
@keyframes sp-flow-pulse {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; color: var(--accent); }
}

/* ── Notification Mockup (Live alerts) ───────────────────────── */
.sp-notif-mockup {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  overflow: hidden;
}
.sp-notif-mockup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.sp-notif-mockup-live {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  color: #F6465D;
  letter-spacing: 1px;
  animation: sp-live-blink 1.5s ease-in-out infinite;
}
@keyframes sp-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
.sp-notif-mockup-body {
  padding: 8px 14px;
}
.sp-notif-mockup-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.sp-notif-mockup-item:last-child { border-bottom: none; }
.sp-notif-mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.sp-notif-mockup-content {
  flex: 1;
}
.sp-notif-mockup-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.sp-notif-mockup-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.sp-notif-mockup-animate {
  animation: sp-notif-slide-in .6s ease both;
}
@keyframes sp-notif-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Premium Delivery Cards v2 (pd-*) ───────────────────────────── */
.pd-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
}
.pd-card {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation: sp-fade-up .45s ease-out both;
}
.pd-card:hover {
  transform: translateY(-1px);
  border-color: var(--pd-accent, rgba(255,255,255,.1));
  box-shadow: 0 6px 20px var(--pd-glow, rgba(0,0,0,.15));
}
/* card header */
.pd-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pd-icon-pill {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-card-title-block {
  flex: 1;
  min-width: 0;
}
.pd-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  line-height: 1.2;
}
.pd-card-subtitle {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
/* badges */
.pd-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: .7px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.pd-badge-popular {
  color: #0ECB81;
  background: rgba(14,203,129,.12);
  border: 1px solid rgba(14,203,129,.25);
}
.pd-badge-realtime {
  color: #F0B90B;
  background: rgba(240,185,11,.1);
  border: 1px solid rgba(240,185,11,.25);
}
/* description */
.pd-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.48;
  margin: 0;
}
/* spec rows */
.pd-specs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
}
.pd-spec-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pd-spec-label {
  font-size: 10px;
  color: rgba(255,255,255,.3);
  width: 80px;
  flex-shrink: 0;
}
.pd-spec-val {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.62);
}
/* feature checklist */
.pd-features {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pd-feature {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.pd-chk {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Notification stats banner ───────────────────────── */
.sp-notif-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.015);
  margin-bottom: 12px;
  overflow: hidden;
  animation: sp-fade-up .4s ease-out both;
}
.sp-notif-stat {
  padding: 14px 12px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.04);
  transition: background .2s;
}
.sp-notif-stat:last-child { border-right: none; }
.sp-notif-stat:hover { background: rgba(255,255,255,.02); }
.sp-notif-stat-val {
  font-size: 18px;
  font-weight: 800;
  font-family: 'SF Mono', 'Fira Code', monospace;
  line-height: 1;
  margin-bottom: 4px;
}
.sp-notif-stat-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Email mockup preview ────────────────────────────── */
.sp-email-mockup {
  margin-top: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  overflow: hidden;
  animation: sp-fade-up .5s ease-out both;
  animation-delay: .4s;
}
.sp-email-mockup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.04);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.sp-email-mockup-body {
  padding: 12px 14px;
}
.sp-email-mockup-row {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 0;
}
.sp-em-label {
  font-weight: 700;
  color: var(--text-secondary);
  margin-right: 4px;
}
.sp-em-subject {
  color: var(--text-primary);
  font-weight: 600;
}
.sp-email-mockup-divider {
  height: 1px;
  background: rgba(255,255,255,.04);
  margin: 8px 0;
}
.sp-email-mockup-signal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-weight: 600;
  color: var(--text-primary);
}
.sp-em-conf {
  color: var(--text-muted);
  font-size: 10px;
}
.sp-em-edge {
  font-size: 10px;
  font-weight: 700;
}
.sp-email-mockup-signal .sp-em-edge { color: var(--text-secondary); }

/* ──────────────────────────────────────────────────────────
   NOTIFICATIONS + PREMIUM DELIVERY REDESIGN v3
   ────────────────────────────────────────────────────────── */

/* Pipeline card v2 */
@keyframes sp-pipeline-scan {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(500%); opacity: 0; }
}
.sp-notif-pipeline-v2 {
  position: relative;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #0d1117 0%, #141e28 100%);
  border: 1px solid rgba(240,185,11,.1);
  border-radius: 14px;
  overflow: hidden;
  padding: 20px 24px;
}
.sp-notif-pipeline-v2::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 25%;
  background: linear-gradient(90deg, transparent 0%, rgba(240,185,11,.03) 50%, transparent 100%);
  animation: sp-pipeline-scan 7s ease-in-out infinite;
  pointer-events: none;
}
.sp-notif-pipeline-v2::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(240,185,11,.45) 50%, transparent 100%);
}
.sp-npl-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; color: #5e6673;
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.sp-npl-steps {
  display: flex; align-items: flex-start; gap: 0;
  position: relative; z-index: 1;
}
.sp-npl-step {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center;
  padding: 0 8px;
  animation: sp-fade-up .4s ease both;
}
.sp-npl-step:nth-child(1) { animation-delay: 0ms; padding-left: 0; }
.sp-npl-step:nth-child(3) { animation-delay: 150ms; }
.sp-npl-step:nth-child(5) { animation-delay: 300ms; padding-right: 0; }
.sp-npl-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sp-npl-step-num {
  font-size: 9px; font-weight: 800; color: #5e6673;
  text-transform: uppercase; letter-spacing: 0.8px;
}
.sp-npl-step-title {
  font-size: 12px; font-weight: 700; color: #eaecef; line-height: 1.2;
}
.sp-npl-step-desc {
  font-size: 10px; color: #848e9c; line-height: 1.4;
  max-width: 130px;
}
.sp-npl-connector {
  display: flex; align-items: center;
  padding-top: 23px; flex-shrink: 0;
}
.sp-npl-connector-line {
  width: 28px; height: 2px;
  background: linear-gradient(90deg, rgba(240,185,11,.15) 0%, rgba(240,185,11,.5) 50%, rgba(240,185,11,.15) 100%);
  position: relative;
  animation: sp-flow-pulse 2.5s ease-in-out infinite;
}
.sp-npl-connector-line::after {
  content: '';
  position: absolute; right: -5px; top: -3px;
  width: 0; height: 0;
  border-left: 7px solid rgba(240,185,11,.5);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* Section info banner */
.sp-section-info-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  background: rgba(113,128,255,.04);
  border: 1px solid rgba(113,128,255,.12);
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 12px; color: #848e9c; line-height: 1.55;
}
.sp-section-info-banner svg { flex-shrink: 0; opacity: 0.55; margin-top: 1px; }

/* Enhanced channel card v2 */
.sp-channel-v2 {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  transition: border-color .2s;
}
.sp-channel-v2:hover { border-color: rgba(240,185,11,.14); }
.sp-channel-v2-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(14,203,129,.1);
  border: 1px solid rgba(14,203,129,.18);
}
.sp-channel-v2-info { flex: 1; min-width: 0; }
.sp-channel-v2-name {
  font-size: 14px; font-weight: 700; color: #eaecef;
  display: flex; align-items: center; gap: 8px; margin-bottom: 3px;
}
.sp-channel-v2-desc { font-size: 11px; color: #848e9c; }

/* What you receive chips */
.sp-channel-receives {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.sp-channel-receive-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; color: #848e9c;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px; padding: 3px 10px;
}
.sp-channel-receive-chip svg { flex-shrink: 0; opacity: 0.5; }

/* Upgrade banner */
.sp-upgrade-banner {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(240,185,11,.05) 0%, rgba(168,85,247,.04) 100%);
  border: 1px solid rgba(240,185,11,.18);
  border-radius: 12px; margin-top: 14px;
}
.sp-upgrade-banner-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,185,11,.1); border: 1px solid rgba(240,185,11,.2);
  flex-shrink: 0;
}
.sp-upgrade-banner-text { flex: 1; min-width: 0; }
.sp-upgrade-banner-title {
  font-size: 13px; font-weight: 700; color: #eaecef; margin-bottom: 5px;
}
.sp-upgrade-banner-desc {
  font-size: 11px; color: #848e9c; line-height: 1.55; margin-bottom: 10px;
}
.sp-upgrade-banner-feats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sp-upgrade-banner-feat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: #F0B90B;
  background: rgba(240,185,11,.08); border: 1px solid rgba(240,185,11,.15);
  border-radius: 4px; padding: 2px 8px;
}

/* Delivery mode cards */
.sp-notif-mode-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 6px;
}
.sp-notif-mode-card {
  position: relative; padding: 14px;
  border-radius: 11px;
  border: 1.5px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  cursor: pointer; transition: all .2s ease;
  user-select: none;
}
.sp-notif-mode-card:hover {
  border-color: rgba(240,185,11,.22);
  background: rgba(240,185,11,.025);
}
.sp-notif-mode-card:has(input:checked) {
  border-color: rgba(240,185,11,.38);
  background: rgba(240,185,11,.045);
}
.sp-notif-mode-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.sp-notif-mode-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 9px;
}
.sp-notif-mode-name {
  font-size: 12px; font-weight: 700; color: #c9d1d9;
  margin-bottom: 4px; transition: color .2s;
}
.sp-notif-mode-card:has(input:checked) .sp-notif-mode-name { color: #F0B90B; }
.sp-notif-mode-desc { font-size: 10px; color: #848e9c; line-height: 1.45; }
.sp-notif-mode-tag {
  display: inline-block; margin-top: 7px;
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px;
}

/* Quiet hours row */
.sp-qh-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px;
}
.sp-qh-separator { font-size: 13px; color: #848e9c; flex-shrink: 0; }
.sp-qh-tz-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; color: #5e6673;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 6px; padding: 3px 9px;
}
.sp-qh-tz-chip svg { opacity: 0.4; }

/* Numeric stepper control */
.sp-num-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sp-num-ctrl-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px; cursor: pointer; color: #848e9c;
  font-size: 15px; font-weight: 700;
  transition: all .15s; user-select: none; flex-shrink: 0;
}
.sp-num-ctrl-btn:hover {
  background: rgba(240,185,11,.08); border-color: rgba(240,185,11,.22); color: #F0B90B;
}
.sp-num-ctrl input {
  width: 62px; text-align: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px; padding: 5px 6px;
  font-size: 13px; font-weight: 700; color: #eaecef;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.sp-num-ctrl-unit { font-size: 11px; color: #5e6673; }

/* Premium delivery option cards */
.sp-pd-grid { display: flex; flex-direction: column; gap: 8px; }
.sp-pd-opt {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: 11px;
  border: 1.5px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  cursor: pointer; transition: all .2s ease; user-select: none;
}
.sp-pd-opt:hover {
  border-color: rgba(240,185,11,.22);
  background: rgba(240,185,11,.025);
}
.sp-pd-opt:has(input:checked) {
  border-color: rgba(240,185,11,.38);
  background: rgba(240,185,11,.045);
}
.sp-pd-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.sp-pd-opt-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sp-pd-opt-body { flex: 1; min-width: 0; }
.sp-pd-opt-name {
  font-size: 12px; font-weight: 700; color: #c9d1d9;
  margin-bottom: 3px; display: flex; align-items: center; gap: 7px;
  transition: color .2s;
}
.sp-pd-opt:has(input:checked) .sp-pd-opt-name { color: #F0B90B; }
.sp-pd-opt-desc { font-size: 11px; color: #848e9c; line-height: 1.45; }
.sp-pd-opt-feats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.sp-pd-opt-feat {
  font-size: 9px; color: #5e6673;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05);
  border-radius: 4px; padding: 2px 7px;
}
.sp-pd-opt-radio {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s;
}
.sp-pd-opt:has(input:checked) .sp-pd-opt-radio {
  border-color: #F0B90B;
}
.sp-pd-opt:has(input:checked) .sp-pd-opt-radio::after {
  content: ''; width: 7px; height: 7px;
  border-radius: 50%; background: #F0B90B;
}
.sp-pd-opt-tag {
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Alert category items v2 */
.sp-alert-cat {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px; margin-bottom: 8px; transition: border-color .2s;
}
.sp-alert-cat:last-child { margin-bottom: 0; }
.sp-alert-cat:hover { border-color: rgba(255,255,255,.1); }
.sp-alert-cat-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sp-alert-cat-info { flex: 1; min-width: 0; }
.sp-alert-cat-name {
  font-size: 13px; font-weight: 700; color: #eaecef; margin-bottom: 2px;
}
.sp-alert-cat-desc { font-size: 11px; color: #848e9c; line-height: 1.4; }
.sp-alert-cat-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 4px;
}

@media (max-width: 600px) {
  .sp-notif-mode-grid { grid-template-columns: 1fr; }
  .sp-npl-steps { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sp-npl-connector { padding-top: 0; padding-left: 23px; transform: rotate(90deg); }
}

/* ── Calibration Rich Preview ──────────────────────────────────── */
.sp-cal-section {
  margin-bottom: 16px;
}
.sp-cal-section:last-child { margin-bottom: 0; }
.sp-cal-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: .3px;
}
.sp-cal-weight-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-cal-weight-row {
  animation: sp-fade-up .4s ease both;
}
.sp-cal-weight-row:nth-child(1) { animation-delay: 0ms; }
.sp-cal-weight-row:nth-child(2) { animation-delay: 60ms; }
.sp-cal-weight-row:nth-child(3) { animation-delay: 120ms; }
.sp-cal-weight-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.sp-cal-weight-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.sp-cal-weight-val {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sp-cal-bar-track {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.sp-cal-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  animation: sp-bar-grow .8s ease both;
}
@keyframes sp-bar-grow {
  from { width: 0 !important; }
}
.sp-cal-weight-ann {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.3;
}

/* Calibration filter cards */
.sp-cal-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sp-cal-filter-card {
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 10px 12px;
  animation: sp-fade-up .4s ease both;
  transition: transform .2s, background .2s;
}
.sp-cal-filter-card:hover {
  transform: translateY(-1px);
  background: var(--bg-secondary);
}
.sp-cal-filter-card:nth-child(1) { animation-delay: 0ms; }
.sp-cal-filter-card:nth-child(2) { animation-delay: 50ms; }
.sp-cal-filter-card:nth-child(3) { animation-delay: 100ms; }
.sp-cal-filter-card:nth-child(4) { animation-delay: 150ms; }
.sp-cal-filter-card:nth-child(5) { animation-delay: 200ms; grid-column: span 2; }
.sp-cal-filter-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.sp-cal-filter-icon {
  display: flex;
  flex-shrink: 0;
}
.sp-cal-filter-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
}
.sp-cal-filter-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.sp-cal-filter-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Factor Weights Rich Preview ──────────────────────────────── */
.sp-fw-factors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-fw-factor-card {
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 12px 14px;
  animation: sp-fade-up .4s ease both;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.sp-fw-factor-card:hover {
  transform: translateY(-2px);
  background: var(--bg-secondary);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.sp-fw-factor-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.sp-fw-factor-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-fw-factor-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
.sp-fw-factor-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.sp-fw-factor-val {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sp-fw-factor-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 6px;
}
.sp-fw-factor-examples {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
  opacity: .7;
}

/* ── Risk Mode Cards v2 ──────────────────────────────────────────── */
.rm-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
}
.rm-card {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: sp-fade-up .45s ease-out both;
  position: relative;
  background: rgba(255,255,255,.025);
}
.rm-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.rm-card--active {
  border-color: var(--rm-accent, rgba(240,185,11,.32)) !important;
  box-shadow: 0 0 18px var(--rm-glow, rgba(240,185,11,.07));
  background: rgba(255,255,255,.035);
}
/* Card header row */
.rm-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rm-icon-pill {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rm-card-title-block {
  flex: 1;
  min-width: 0;
}
.rm-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  line-height: 1.2;
}
.rm-card-subtitle {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
/* Status badges */
.rm-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: .7px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rm-badge-active {
  color: #0ECB81;
  background: rgba(14,203,129,.12);
  border: 1px solid rgba(14,203,129,.25);
}
.rm-badge-pro {
  color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
/* Description */
.rm-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.48;
  margin: 0;
}
/* Metric rows */
.rm-metrics {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rm-metric-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rm-metric-label {
  font-size: 10px;
  color: rgba(255,255,255,.3);
  width: 120px;
  flex-shrink: 0;
}
.rm-metric-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}
.rm-metric-fill {
  height: 100%;
  border-radius: 2px;
}
.rm-metric-val {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  width: 50px;
  text-align: right;
  flex-shrink: 0;
}
/* Footer tag */
.rm-card-tag {
  font-size: 10px;
  color: rgba(255,255,255,.28);
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.05);
  line-height: 1.4;
}
.rm-card-tag strong {
  color: rgba(255,255,255,.45);
  font-weight: 600;
}

/* ── PRO badge on nav items ──────────────────────────────────────── */
.sp-nav-pro-badge {
  font-size: 8px;
  font-weight: 800;
  color: #0B0F1A;
  background: linear-gradient(135deg, #F0B90B 0%, #D4A017 100%);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: .5px;
  margin-left: 6px;
  flex-shrink: 0;
  line-height: 1.3;
}

/* ── Feature Benefit List in Banner ──────────────────────────────── */
.sp-tier-features {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sp-tier-feature-tag {
  font-size: 10px;
  font-weight: 600;
  color: rgba(240,185,11,.8);
  background: rgba(240,185,11,.06);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(240,185,11,.1);
  white-space: nowrap;
}

/* ── Responsive: mobile upgrade banner ───────────────────────────── */
@media (max-width: 600px) {
  .sp-tier-banner-top {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
  }
  .sp-tier-banner .sp-upgrade-btn {
    text-align: center;
    width: 100%;
    justify-content: center;
  }
  .sp-billing-hero-v2 .sp-upgrade-btn {
    width: 100%;
    justify-content: center;
  }
  .sp-tier-banner-content {
    padding: 0 16px 16px;
  }
  .sp-tier-divider {
    margin: 0 16px;
  }
  .sp-baseline-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Nav PRO badge v2 (green-gold gradient, Apple-minimal) ── */
.sp-nav-pro-badge-v2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px 2px 6px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  background: linear-gradient(135deg, #0ecb81 0%, #2ecc71 30%, #d4a017 70%, #F0B90B 100%);
  color: #0b0e11;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(14,203,129,.15);
  transition: box-shadow .2s;
}
.sp-nav-pro-badge-v2 svg {
  width: 8px; height: 8px;
  flex-shrink: 0;
}
.sp-nav-item:hover .sp-nav-pro-badge-v2,
.sp-subnav-item:hover .sp-nav-pro-badge-v2 {
  box-shadow: 0 0 12px rgba(14,203,129,.3);
}

/* ══════════════════════════════════════════════════════════
   BILLING — Premium Redesign (Binance-style + animations)
   ══════════════════════════════════════════════════════════ */

/* ── Keyframe animations ─────────────────────────────── */
@keyframes sp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes sp-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sp-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(240,185,11,.25); }
  70% { box-shadow: 0 0 0 10px rgba(240,185,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,185,11,0); }
}
@keyframes sp-count-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(240,185,11,.15); }
  50% { text-shadow: 0 0 20px rgba(240,185,11,.35); }
}

/* ── Billing Hero v2 ─────────────────────────────────── */
.sp-billing-hero-v2 {
  background: linear-gradient(135deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.98) 50%, rgba(22,26,30,1) 100%);
  border: 1px solid rgba(240,185,11,.1);
  border-radius: 14px;
  padding: 0;
  position: relative;
  overflow: hidden;
  animation: sp-fade-up .5s ease-out;
}
.sp-billing-hero-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(240,185,11,.5) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: sp-shimmer 3s ease-in-out infinite;
}
.sp-billing-hero-v2::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,185,11,.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Hero top section */
.sp-bh2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 28px 20px;
  gap: 20px;
}
.sp-bh2-plan {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sp-bh2-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  position: relative;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.sp-bh2-icon:hover { transform: scale(1.08); }
.sp-bh2-icon.trial {
  background: linear-gradient(135deg, rgba(240,185,11,.12) 0%, rgba(240,185,11,.06) 100%);
  border: 1px solid rgba(240,185,11,.2);
  animation: sp-pulse-ring 2.5s infinite;
}
.sp-bh2-icon.paid {
  background: linear-gradient(135deg, rgba(14,203,129,.12) 0%, rgba(14,203,129,.06) 100%);
  border: 1px solid rgba(14,203,129,.2);
}
.sp-bh2-icon.expired {
  background: linear-gradient(135deg, rgba(246,70,93,.12) 0%, rgba(246,70,93,.06) 100%);
  border: 1px solid rgba(246,70,93,.15);
}
.sp-bh2-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.sp-bh2-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.sp-bh2-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}
.sp-bh2-status.trial {
  background: rgba(240,185,11,.12);
  color: var(--accent);
  border: 1px solid rgba(240,185,11,.2);
}
.sp-bh2-status.paid {
  background: rgba(14,203,129,.12);
  color: var(--green);
  border: 1px solid rgba(14,203,129,.2);
}
.sp-bh2-status.expired {
  background: rgba(246,70,93,.12);
  color: var(--red);
  border: 1px solid rgba(246,70,93,.15);
}
.sp-bh2-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.sp-bh2-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .25s ease;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.sp-bh2-cta-primary {
  background: linear-gradient(135deg, #0ecb81 0%, #2ecc71 30%, #d4a017 70%, #F0B90B 100%);
  color: #0b0e11;
  box-shadow: 0 4px 16px rgba(14,203,129,.2), 0 0 0 0 rgba(14,203,129,.3);
}
.sp-bh2-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(14,203,129,.3), 0 0 20px rgba(14,203,129,.15);
}
.sp-bh2-cta-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 0; bottom: 0;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: sp-shimmer 2.5s ease-in-out infinite;
}
.sp-bh2-cta-danger {
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(246,70,93,.3);
}
.sp-bh2-cta-danger:hover {
  background: rgba(246,70,93,.08);
}

/* Pro icon — crisp golden ring + pulse (premium crypto style) */
.sp-pro-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(240,185,11,.13);
  border: 1.5px solid rgba(240,185,11,.55);
  animation: sp-pro-ring-pulse 2.4s ease-in-out infinite;
  isolation: isolate;
}
.sp-pro-icon-wrap img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
@keyframes sp-pro-ring-pulse {
  0%   { border-color: rgba(240,185,11,.55); box-shadow: 0 0 0   0 rgba(240,185,11,.0); }
  50%  { border-color: rgba(240,185,11,.9);  box-shadow: 0 0 0 5px rgba(240,185,11,.0); }
  100% { border-color: rgba(240,185,11,.55); box-shadow: 0 0 0   0 rgba(240,185,11,.0); }
}
/* Inside the button — strip the ring, keep only the icon */
.sp-upgrade-btn .sp-pro-icon-wrap {
  width: auto;
  height: auto;
  background: none;
  border: none;
  animation: none;
  border-radius: 0;
}
.sp-upgrade-btn .sp-pro-icon-wrap img {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

/* Trial progress v2 */
@keyframes sp-bar-enter {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes sp-bar-flow {
  0%   { background-position: 0% 0; }
  50%  { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@keyframes sp-days-pop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes sp-progress-slide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-bh2-progress {
  padding: 0 28px 20px;
  animation: sp-progress-slide .5s cubic-bezier(.4,0,.2,1) .25s both;
}
.sp-bh2-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.sp-bh2-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  animation: sp-fade-up .4s ease-out .3s both;
}
.sp-bh2-progress-days {
  font-size: 15px;
  font-weight: 800;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--accent);
  animation: sp-days-pop .5s cubic-bezier(.34,1.56,.64,1) .5s both,
             sp-count-glow 3s ease-in-out 1.5s infinite;
}
.sp-bh2-bar-wrap {
  height: 12px;
  background: rgba(255,255,255,.04);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.sp-bh2-bar-fill {
  height: 100%;
  border-radius: 6px;
  /* gold → green → gold — flowing bar gradient */
  background: linear-gradient(90deg,
    #F0B90B 0%,
    #fcd535 20%,
    #0ECB81 50%,
    #fcd535 80%,
    #F0B90B 100%
  );
  background-size: 200% 100%;
  transform-origin: left center;
  animation:
    sp-bar-enter 1s cubic-bezier(.4,0,.2,1) .4s both,
    sp-bar-flow 3s ease-in-out 1.5s infinite;
  box-shadow: 0 0 8px rgba(240,185,11,.25), 0 0 14px rgba(14,203,129,.1);
}
.sp-bh2-progress-end {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  animation: sp-fade-up .4s ease-out .7s both;
}

/* Stats row */
.sp-bh2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.05);
}
.sp-bh2-stat {
  padding: 16px 20px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.05);
  transition: background .2s;
  animation: sp-fade-up .5s ease-out both;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sp-bh2-stat:nth-child(1) { animation-delay: .1s; }
.sp-bh2-stat:nth-child(2) { animation-delay: .2s; }
.sp-bh2-stat:nth-child(3) { animation-delay: .3s; }
.sp-bh2-stat:nth-child(4) { animation-delay: .4s; }
.sp-bh2-stat:last-child { border-right: none; }
.sp-bh2-stat:hover { background: rgba(240,185,11,.03); }
.sp-bh2-stat-icon {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.04);
  margin-bottom: 2px;
  flex-shrink: 0;
}
.sp-bh2-stat-value {
  font-size: 18px;
  font-weight: 800;
  font-family: 'SF Mono', 'Fira Code', monospace;
  line-height: 1;
}
.sp-bh2-stat-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}
/* CTA wrap for billing hero — adjusts border-radius for solid button */
.sp-bh2-cta-wrap.sp-upgrade-btn-wrap::before {
  border-radius: 14px;
}

/* ── Billing Hero: Countdown Ring ── */
.sp-bh2-ring-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}
.sp-bh2-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.sp-bh2-ring-track {
  fill: none;
  stroke: rgba(255,255,255,.06);
  stroke-width: 6;
}
.sp-bh2-ring-fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  animation: sp-ring-draw 1.2s cubic-bezier(.4,0,.2,1) .3s both;
}
@keyframes sp-ring-draw {
  from { stroke-dashoffset: var(--ring-circ, 251.33); }
}
.sp-bh2-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sp-bh2-ring-days {
  font-size: 20px;
  font-weight: 800;
  font-family: 'SF Mono', 'Fira Code', monospace;
  line-height: 1;
  animation: sp-days-pop .5s cubic-bezier(.34,1.56,.64,1) .6s both;
}
.sp-bh2-ring-unit {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
}

/* ── Billing Hero: Plan info ── */
.sp-bh2-plan-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-bh2-plan-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
  max-width: 320px;
}
.sp-bh2-plan-hint-paid { color: var(--green); opacity: .8; }

/* ── Billing Hero: CTA block ── */
.sp-bh2-cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.sp-bh2-value-prop {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  line-height: 1.5;
  letter-spacing: .2px;
}
.sp-bh2-value-prop strong {
  color: var(--accent);
  font-weight: 700;
}

/* ── Billing Hero: Urgency note ── */
.sp-bh2-urgency {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  animation: sp-fade-up .4s ease-out .8s both;
}
.sp-bh2-urgency svg { flex-shrink: 0; margin-top: 1px; }
.sp-bh2-urgency.warn {
  background: rgba(246,70,93,.07);
  border: 1px solid rgba(246,70,93,.18);
  color: #F6465D;
}
.sp-bh2-urgency.info {
  background: rgba(240,185,11,.05);
  border: 1px solid rgba(240,185,11,.12);
  color: var(--text-secondary);
}

/* ── Billing Hero: stat sub-label ── */
.sp-bh2-stat-sub {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .3px;
  margin-top: 1px;
}

/* ── Value Banner (between hero and plans) ── */
.sp-bv-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(14,203,129,.05) 0%, rgba(240,185,11,.06) 60%, rgba(139,92,246,.04) 100%);
  border: 1px solid rgba(240,185,11,.12);
  border-radius: 12px;
  margin-bottom: 4px;
  animation: sp-fade-up .5s ease-out .4s both;
}
.sp-bv-banner-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: rgba(240,185,11,.1);
  border: 1px solid rgba(240,185,11,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: sp-pulse-ring 2.5s infinite;
}
.sp-bv-banner-body { flex: 1; min-width: 0; }
.sp-bv-banner-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.sp-bv-banner-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sp-bv-pill {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
}
.sp-bv-pill-green  { background: rgba(14,203,129,.1);  color: #0ECB81; border: 1px solid rgba(14,203,129,.2); }
.sp-bv-pill-gold   { background: rgba(240,185,11,.1);  color: var(--accent); border: 1px solid rgba(240,185,11,.2); }
.sp-bv-pill-blue   { background: rgba(59,130,246,.1);  color: #3B82F6; border: 1px solid rgba(59,130,246,.2); }
.sp-bv-pill-purple { background: rgba(139,92,246,.1);  color: #8B5CF6; border: 1px solid rgba(139,92,246,.2); }
.sp-bv-banner-cta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(240,185,11,.3);
  border-radius: 8px;
  background: rgba(240,185,11,.06);
  transition: all .2s ease;
  white-space: nowrap;
}
.sp-bv-banner-cta:hover {
  background: rgba(240,185,11,.12);
  border-color: rgba(240,185,11,.5);
}

/* ── Plan Cards v2 ───────────────────────────────────── */
.sp-plans-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.sp-plan-v2 {
  background: linear-gradient(160deg, rgba(22,26,30,1) 0%, rgba(30,34,38,.98) 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  animation: sp-fade-up .5s ease-out both;
}
.sp-plan-v2:nth-child(1) { animation-delay: .1s; }
.sp-plan-v2:nth-child(2) { animation-delay: .2s; }
.sp-plan-v2:nth-child(3) { animation-delay: .3s; }
.sp-plan-v2::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.04);
  transition: background .3s;
}
.sp-plan-v2:hover {
  border-color: rgba(240,185,11,.2);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(240,185,11,.1);
}
.sp-plan-v2.featured {
  border-color: rgba(240,185,11,.3);
  box-shadow: 0 0 0 1px rgba(240,185,11,.15), 0 8px 32px rgba(240,185,11,.08);
}
.sp-plan-v2.featured::before {
  background: linear-gradient(90deg, transparent, rgba(240,185,11,.4), transparent);
  background-size: 200% 100%;
  animation: sp-shimmer 3s ease-in-out infinite;
}
.sp-plan-v2.current { border-color: rgba(14,203,129,.3); }
.sp-plan-v2.current::before { background: var(--green); }

/* Plan badge */
.sp-plan-v2-badge {
  position: absolute;
  top: 0; right: 20px;
  background: linear-gradient(135deg, #0ecb81 0%, #2ecc71 30%, #d4a017 70%, #F0B90B 100%);
  color: #0b0e11;
  font-size: 9px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 0 0 8px 8px;
  text-transform: uppercase;
  letter-spacing: .8px;
  box-shadow: 0 4px 12px rgba(14,203,129,.25);
}

/* Plan content */
.sp-plan-v2-body {
  padding: 28px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sp-plan-v2-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: .4px;
  margin-bottom: 14px;
}
.sp-plan-v2-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.sp-plan-v2-price {
  font-size: 42px;
  font-weight: 800;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--accent);
  line-height: 1;
  text-shadow: 0 0 24px rgba(240,185,11,.15);
  transition: text-shadow .3s;
}
.sp-plan-v2:hover .sp-plan-v2-price {
  text-shadow: 0 0 30px rgba(240,185,11,.3);
}
.sp-plan-v2-suffix {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
}
.sp-plan-v2-period {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-weight: 500;
}
.sp-plan-v2-original {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-bottom: 2px;
}
.sp-plan-v2-savings {
  display: inline-block;
  background: rgba(14,203,129,.12);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 8px;
}
.sp-plan-v2-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  margin: 0 0 16px;
}
.sp-plan-v2-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}
.sp-plan-v2-features li {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}
.sp-plan-v2-features li .sp-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(14,203,129,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-plan-v2-features li .sp-check svg {
  width: 10px; height: 10px;
}

/* Plan CTA v2 */
.sp-plan-v2-cta {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.sp-plan-v2-cta.primary {
  background: linear-gradient(135deg, #0ecb81 0%, #2ecc71 30%, #d4a017 70%, #F0B90B 100%);
  color: #0b0e11;
}
.sp-plan-v2-cta.primary:hover {
  box-shadow: 0 4px 20px rgba(14,203,129,.3);
  transform: translateY(-1px);
}
.sp-plan-v2-cta.primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: sp-shimmer 2.5s ease-in-out infinite;
}
.sp-plan-v2-cta.outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(240,185,11,.3);
}
.sp-plan-v2-cta.outline:hover {
  background: rgba(240,185,11,.06);
  border-color: rgba(240,185,11,.5);
}
.sp-plan-v2-cta.active {
  background: rgba(14,203,129,.08);
  color: var(--green);
  border: 1px solid rgba(14,203,129,.25);
  cursor: default;
}

/* ── What's Included comparison ──────────────────────── */
.sp-billing-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  animation: sp-fade-up .5s ease-out both;
  animation-delay: .2s;
}
.sp-billing-compare-col {
  padding: 24px;
}
.sp-billing-compare-col.free {
  background: rgba(22,26,30,.9);
}
.sp-billing-compare-col.pro {
  background: linear-gradient(160deg, rgba(30,34,38,1) 0%, rgba(35,39,43,.98) 100%);
  border-left: 1px solid rgba(240,185,11,.1);
}
.sp-billing-compare-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-billing-compare-col.free .sp-billing-compare-title { color: var(--text-secondary); }
.sp-billing-compare-col.pro .sp-billing-compare-title { color: var(--accent); }
.sp-billing-compare-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.sp-billing-compare-row .yes {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}
.sp-billing-compare-row .no {
  color: var(--text-muted);
  opacity: .4;
  font-size: 13px;
}
.sp-billing-compare-row .limited {
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(240,185,11,.08);
}

/* ── Payments table v2 ───────────────────────────────── */
.sp-payments-table {
  width: 100%;
  border-collapse: collapse;
}
.sp-payments-table th {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sp-payments-table td {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.sp-payments-table tr:hover td {
  background: rgba(240,185,11,.02);
}

/* ══════════════════════════════════════════════════════════
   Billing Plans v4 — Identical to pricing page
   Uses same classes as index.html / pricing.html:
   .pr-c, .pr-nm, .pr-ds, .pr-am, .pr-ft, .pr-pop, .pr-cta-btn
   ══════════════════════════════════════════════════════════ */

/* ── Cards grid — horizontal scroll ──────────────────── */
.pr-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 14px 4px 12px;
}
@media (max-width: 700px) {
  .pr-cards-grid { grid-template-columns: 1fr; }
}

/* ── Plans card — overflow:visible so box-shadow renders outside sp-card ── */
#sp-plans-card { overflow: visible; }
#sp-plans-card > .sp-card-body { overflow: visible; }

/* ── Card (.pr-c) — идентично pricing.html ─────────────────────────────
   Тени рисуются на ::after с z-index:-1, чтобы тень одной карточки
   не заходила поверх соседних — всегда ЗА всеми карточками.
   ──────────────────────────────────────────────────────────────────── */
#billing-plans .pr-cards-grid { isolation: isolate; }

#billing-plans .pr-c {
  position: relative;
  /* NO z-index — иначе создаётся stacking context и ::after z-index:-1
     оказывается внутри карточки, а не за всеми карточками */
  background: #000;
  border-radius: 16px;
  padding: 32px 24px;
  transition: transform .4s ease, background .4s ease;
  animation: sp-fade-up .5s ease;
}
/* Border gradient (::before) */
#billing-plans .pr-c::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(231,193,18,.25), rgba(34,197,94,.08) 40%, rgba(231,193,18,.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: all .4s ease;
}
/* Shadow layer (::after) — sits BEHIND all cards via z-index:-1 */
#billing-plans .pr-c::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  z-index: -1;
  pointer-events: none;
  transition: box-shadow .4s ease;
}
/* Regular card hover */
#billing-plans .pr-c:hover {
  transform: translateY(-5px);
}
#billing-plans .pr-c:hover::before {
  background: linear-gradient(160deg, rgba(231,193,18,.6), rgba(34,197,94,.2) 40%, rgba(231,193,18,.4));
}
#billing-plans .pr-c:hover::after {
  box-shadow: 0 0 50px rgba(231,193,18,.18), 0 0 100px rgba(34,197,94,.08), 0 0 140px rgba(231,193,18,.06), 0 20px 60px rgba(0,0,0,.4);
}

/* Pro (featured/popular) variant */
#billing-plans .pr-c.pro {
  padding: 40px 28px;
  background: #000;
}
#billing-plans .pr-c.pro::before {
  background: linear-gradient(160deg, rgba(231,193,18,.7), rgba(34,197,94,.25) 35%, rgba(231,193,18,.5) 65%, rgba(34,197,94,.15));
  padding: 2px;
}
/* Pro shadow — always visible + floor glow via offset shadow */
#billing-plans .pr-c.pro::after {
  box-shadow: 0 0 60px rgba(231,193,18,.15), 0 0 120px rgba(34,197,94,.06), 0 24px 60px rgba(0,0,0,.5), 0 40px 30px -10px rgba(231,193,18,.12);
}
#billing-plans .pr-c.pro:hover {
  transform: translateY(-7px);
}
#billing-plans .pr-c.pro:hover::before {
  background: linear-gradient(160deg, rgba(245,217,66,.9), rgba(34,197,94,.4) 35%, rgba(231,193,18,.7) 65%, rgba(34,197,94,.25));
}
#billing-plans .pr-c.pro:hover::after {
  box-shadow: 0 0 80px rgba(231,193,18,.28), 0 0 150px rgba(34,197,94,.12), 0 0 200px rgba(231,193,18,.08), 0 24px 80px rgba(0,0,0,.5), 0 40px 30px -10px rgba(231,193,18,.18);
}

/* ── Plan name (.pr-nm) ──────────────────────────────── */
#billing-plans .pr-nm {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 3px;
  color: #fff;
}
#billing-plans .pr-nm .gold-text {
  background: linear-gradient(135deg, #f5d942, #e7c112);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Description (.pr-ds) ────────────────────────────── */
#billing-plans .pr-ds {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-bottom: 18px;
}

/* ── Price (.pr-am) ──────────────────────────────────── */
#billing-plans .pr-am {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 3px;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
}
#billing-plans .pr-am span {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,.45);
}
#billing-plans .pr-was {
  text-decoration: line-through;
  opacity: .4;
  font-size: 14px;
  margin-right: 8px;
}

/* ── Period (.pr-per) ────────────────────────────────── */
#billing-plans .pr-per {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin-bottom: 22px;
}

/* ── Features (.pr-ft) ───────────────────────────────── */
#billing-plans .pr-ft {
  list-style: none;
  margin-bottom: 24px;
}
#billing-plans .pr-ft li {
  font-size: 12px;
  color: #fff;
  padding: 7px 0;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#billing-plans .pr-ft li:last-child { border: none; }
#billing-plans .pr-ft .ck {
  color: var(--accent, #e7c112);
  font-weight: 700;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(231,193,18,.1);
  border-radius: 5px;
}
#billing-plans .pr-ft .ck svg { width: 12px; height: 12px; }

/* ── Popular badge (.pr-pop) ─────────────────────────── */
#billing-plans .pr-pop {
  position: absolute;
  top: -11px;
  right: 22px;
  background: linear-gradient(135deg, #f5d942, #e7c112);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  z-index: 2;
}

/* ── CTA button (.pr-cta-btn) ────────────────────────── */
#billing-plans .pr-cta-btn {
  display: block;
  text-align: center;
  padding: 14px 28px;
  margin: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all .3s;
  cursor: pointer;
  border: none;
}
#billing-plans .pr-cta-fill {
  background: var(--accent, #e7c112);
  color: #000;
  box-shadow: 0 4px 20px rgba(231,193,18,.2);
  overflow: hidden;
  position: relative;
}
#billing-plans .pr-cta-fill::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition: left .5s ease;
  pointer-events: none;
}
#billing-plans .pr-cta-fill:hover::before { left: 100%; }
#billing-plans .pr-cta-fill:hover {
  background: var(--accent-l, #f5d942);
  box-shadow: 0 0 30px rgba(34,197,94,.25), 0 0 60px rgba(231,193,18,.28), 0 0 100px rgba(34,197,94,.12), 0 0 160px rgba(231,193,18,.06);
  transform: translateY(-1px);
}
#billing-plans .pr-cta-outline {
  background: #000;
  color: #fff;
  border: 1px solid rgba(231,193,18,.2);
}
#billing-plans .pr-cta-outline:hover {
  box-shadow: 0 0 30px rgba(34,197,94,.2), 0 0 60px rgba(231,193,18,.22), 0 0 100px rgba(34,197,94,.1), 0 0 140px rgba(231,193,18,.05);
  border-color: rgba(231,193,18,.5);
  background: #0a0a0a;
  color: #fff;
}
#billing-plans .pr-cta-current {
  opacity: 1;
  pointer-events: none;
  cursor: default;
}
#billing-plans .pr-cta-outline.pr-cta-current {
  background: transparent;
  color: #fff;
  border-color: rgba(231,193,18,.2);
  box-shadow: none;
}
#billing-plans .pr-cta-fill.pr-cta-current {
  background: var(--accent, #e7c112);
  color: #000;
  box-shadow: 0 4px 20px rgba(231,193,18,.25);
}

/* ── Lock badge (.lock-badge) ────────────────────────── */
#billing-plans .lock-badge {
  margin: 12px 0 0;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent, #e7c112);
  opacity: .7;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ══════════════════════════════════════════════════════════
   Feature Comparison Table — Billing
   ══════════════════════════════════════════════════════════ */
.pr-compare {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card);
}
.pr-compare-header {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--border);
}
.pr-compare-header .pr-compare-feat,
.pr-compare-header .pr-compare-col {
  padding: 12px 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
}
.pr-compare-header .pr-compare-col {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.pr-compare-pro {
  background: rgba(231,193,18,.04);
  color: var(--accent) !important;
}
.pr-compare-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .2s;
}
.pr-compare-row:last-child {
  border-bottom: none;
}
.pr-compare-row:hover {
  background: rgba(240,185,11,.02);
}
.pr-compare-row .pr-compare-feat {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-secondary);
}
.pr-compare-row .pr-compare-col {
  padding: 10px 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-cmp-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pr-cmp-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .5;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
  .sp-bh2-top {
    flex-direction: column;
    padding: 20px;
    text-align: center;
  }
  .sp-bh2-plan { flex-direction: column; }
  .sp-bh2-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .sp-bh2-stat { padding: 14px 12px; }
  .sp-bh2-stat:nth-child(2) { border-right: none; }
  .sp-bh2-progress { padding: 0 20px 20px; }
  .sp-plans-grid-v2 { grid-template-columns: 1fr; }
  .sp-billing-compare { grid-template-columns: 1fr; }
  .sp-billing-compare-col.pro { border-left: none; border-top: 1px solid rgba(240,185,11,.1); }
  .pr-cards-grid { gap: 16px; }
  .pr-card { min-width: 260px; flex: 0 0 260px; }
  .pr-card-price { font-size: 32px; }
  .pr-compare-header,
  .pr-compare-row { grid-template-columns: 1fr 70px 70px; }
  .pr-compare-header .pr-compare-feat,
  .pr-compare-header .pr-compare-col,
  .pr-compare-row .pr-compare-feat,
  .pr-compare-row .pr-compare-col { padding: 8px 10px; }
}


/* ═══════════════════════════════════════════════════════════════════
   ANALYSIS SECTIONS REDESIGN v1
   Калибровка · Атрибуция · Веса факторов · Режим риска
   ═══════════════════════════════════════════════════════════════════ */

@keyframes sp-analysis-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* ── Section Banner Header ──────────────────────────────────────── */
.sp-sh-banner {
  background: linear-gradient(135deg, #0d1117 0%, #141b22 100%);
  border: 1px solid rgba(240,185,11,.07);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 6px;
  position: relative;
}
.sp-sh-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(240,185,11,.03) 50%, transparent 100%);
  width: 40%;
  animation: sp-analysis-scan 6s ease-in-out infinite;
  pointer-events: none;
}
.sp-sh-topline {
  height: 2px;
  background: linear-gradient(90deg, #F0B90B 0%, rgba(240,185,11,.3) 50%, rgba(240,185,11,0) 100%);
}
.sp-sh-inner { padding: 18px 22px 16px; }
.sp-sh-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.sp-sh-main > button { flex-shrink: 0; white-space: nowrap; }
.sp-sh-title-group {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sp-sh-icon {
  width: 38px; height: 38px;
  background: rgba(240,185,11,.08);
  border: 1px solid rgba(240,185,11,.14);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.sp-sh-text .sp-section-title {
  font-size: 16px; font-weight: 600; margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.sp-sh-text .sp-section-sub { font-size: 12px; color: #848e9c; margin: 0; line-height: 1.5; }
.sp-sh-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.sp-sh-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 500; letter-spacing: .3px;
  color: #848e9c;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
  padding: 3px 7px;
}

/* ── Enhanced Parameter Cards (slider rows) ─────────────────────── */
.sp-param-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(20,27,34,.6);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: border-color .2s;
}
.sp-param-card:hover { border-color: rgba(240,185,11,.14); }
.sp-param-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.sp-param-icon.gold { background: rgba(240,185,11,.08); }
.sp-param-icon.green { background: rgba(14,203,129,.08); }
.sp-param-icon.blue  { background: rgba(113,128,255,.08); }
.sp-param-icon.red   { background: rgba(246,70,93,.08); }
.sp-param-icon.purple{ background: rgba(168,85,247,.08); }
.sp-param-body { flex: 1; min-width: 0; }
.sp-param-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.sp-param-name { font-size: 13px; font-weight: 500; color: #eaecef; }
.sp-param-val-badge {
  font-size: 12px; font-weight: 700;
  padding: 2px 9px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sp-param-val-badge.gold   { color: #F0B90B; background: rgba(240,185,11,.1); }
.sp-param-val-badge.green  { color: #0ecb81; background: rgba(14,203,129,.1); }
.sp-param-val-badge.yellow { color: #F0B90B; background: rgba(240,185,11,.1); }
.sp-param-val-badge.blue   { color: #7180ff; background: rgba(113,128,255,.1); }
.sp-param-desc {
  font-size: 11px; color: #848e9c; margin-bottom: 8px; line-height: 1.5;
}
.sp-param-hint {
  font-size: 10px; color: #5c6370; margin-top: 5px; font-style: italic;
}
.sp-param-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  padding: 1px 5px; border-radius: 3px; margin-bottom: 6px;
  text-transform: uppercase;
}
.sp-param-tag.actionable { color: #0ecb81; background: rgba(14,203,129,.1); }
.sp-param-tag.watch      { color: #F0B90B; background: rgba(240,185,11,.1); }
.sp-param-tag.hold       { color: #f6465d; background: rgba(246,70,93,.1); }

/* ── Factor Weights Normalized Bar ─────────────────────────────── */
.sp-fw-total-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin: 4px 0 6px;
  gap: 2px;
}
.sp-fw-total-bar-seg {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
  min-width: 2px;
}
.sp-fw-total-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: #848e9c; margin-bottom: 16px;
}
.sp-fw-total-row strong { color: #0ecb81; }

/* ── Risk Mode Visual Cards ─────────────────────────────────────── */
.sp-rm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
@media (max-width: 620px) { .sp-rm-grid { grid-template-columns: 1fr; } }
.sp-rm-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px 14px;
  background: rgba(20,27,34,.7);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
}
.sp-rm-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.sp-rm-card:has(input:checked) {
  border-color: rgba(240,185,11,.38);
  background: rgba(240,185,11,.03);
}
.sp-rm-card:hover { border-color: rgba(240,185,11,.2); }
.sp-rm-card-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.sp-rm-card-name { font-size: 13px; font-weight: 600; color: #eaecef; }
.sp-rm-card-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .6px;
  padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; width: fit-content;
}
.sp-rm-card-desc { font-size: 11px; color: #848e9c; line-height: 1.55; }
.sp-rm-card-stats {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}
.sp-rm-stat {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px; padding: 5px 9px; font-size: 12px; font-weight: 700;
  color: #eaecef; min-width: 62px; cursor: default;
}
.sp-rm-stat-label {
  font-size: 9px; font-weight: 500; color: #5c6370; letter-spacing: .4px;
  text-transform: uppercase; margin-bottom: 2px;
}
.sp-rm-card-when {
  font-size: 10px; font-style: italic; margin-top: 4px; line-height: 1.4;
  opacity: .8;
}
.sp-rm-card-radio {
  width: 14px; height: 14px;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 50%;
  position: absolute; top: 12px; right: 12px;
  transition: border-color .2s, background .2s;
  box-sizing: border-box;
}
.sp-rm-card:has(input:checked) .sp-rm-card-radio {
  border-color: #F0B90B;
  background: radial-gradient(circle at center, #F0B90B 38%, transparent 40%);
}

/* ── Risk Zones Enhanced ────────────────────────────────────────── */
.sp-zone-bar-wrap {
  margin-bottom: 16px;
}
.sp-zone-bar {
  height: 10px; border-radius: 5px; overflow: hidden;
  display: flex; gap: 2px; margin-bottom: 8px;
}
.sp-zone-seg { height: 100%; border-radius: 3px; transition: width .3s; }
.sp-zone-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #5c6370; font-weight: 500;
}
.sp-zone-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(20,27,34,.5);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px;
  margin-bottom: 6px;
}
.sp-zone-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sp-zone-name {
  font-size: 12px; font-weight: 600; flex: 1;
  text-transform: uppercase; letter-spacing: .5px;
}
.sp-zone-range {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.sp-range-num {
  width: 46px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: 5px;
  padding: 3px 6px; font-size: 12px; text-align: center;
  color: #eaecef;
}
.sp-range-sep { color: #848e9c; font-size: 11px; }
.sp-range-pct { color: #848e9c; font-size: 11px; }

/* ── Conflict Mode Enhanced Select ─────────────────────────────── */
.sp-conflict-wrap {
  background: rgba(20,27,34,.5);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.sp-conflict-label {
  font-size: 11px; color: #848e9c; margin-bottom: 8px; line-height: 1.5;
}

/* ── Attribution Preview ────────────────────────────────────────── */
.sp-attr-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.sp-attr-preview-cell {
  background: rgba(20,27,34,.6);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
}
.sp-attr-preview-cell .preview-label {
  font-size: 10px; color: #848e9c; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 6px;
}
.sp-attr-preview-cell .preview-value {
  font-size: 20px; font-weight: 700; color: #eaecef;
}

/* ══════════════════════════════════════════════════════════
   CALIBRATION SECTION — v2 Enhanced
   ══════════════════════════════════════════════════════════ */

/* ── Slider v2 ── */
.cal-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  outline: none;
  cursor: pointer;
  margin: 10px 0 4px;
  transition: background .2s;
}
.cal-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #F0B90B;
  cursor: pointer;
  border: 2px solid #0d1117;
  box-shadow: 0 0 0 3px rgba(240,185,11,.2), 0 2px 8px rgba(0,0,0,.4);
  transition: transform .15s, box-shadow .15s;
}
.cal-slider:hover::-webkit-slider-thumb {
  transform: scale(1.25);
  box-shadow: 0 0 0 5px rgba(240,185,11,.15), 0 0 14px rgba(240,185,11,.35);
}
.cal-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(240,185,11,.2), 0 0 16px rgba(240,185,11,.4);
}
.cal-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #F0B90B;
  cursor: pointer;
  border: 2px solid #0d1117;
  box-shadow: 0 0 0 3px rgba(240,185,11,.2);
}

/* ── Param card hover enhancement ── */
.sp-param-card {
  transition: border-color .2s, transform .15s, box-shadow .2s !important;
}
.sp-param-card:hover {
  transform: translateX(2px) !important;
  box-shadow: -3px 0 0 0 rgba(240,185,11,.3), 0 2px 12px rgba(0,0,0,.2) !important;
}
.sp-param-name { font-weight: 600 !important; }
.sp-param-val-badge {
  font-size: 13px !important;
  min-width: 48px; text-align: center;
}

/* ── Preset card v2 ── */
.sp-cal-preset-card { overflow: hidden; padding: 0 !important; }
.sp-cal-pa {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(14,203,129,.04) 0%, transparent 100%);
  border-bottom: 1px solid rgba(14,203,129,.1);
}
.sp-cal-pa-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #0ecb81;
  box-shadow: 0 0 8px rgba(14,203,129,.7);
  flex-shrink: 0;
  animation: sym-dot-pulse 2s ease-in-out infinite;
}
.sp-cal-pa-info { flex: 1; display: flex; align-items: baseline; gap: 8px; }
.sp-cal-pa-label { font-size: 11px; color: #848e9c; }
.sp-cal-pa-name { font-size: 13px; font-weight: 700; color: #F0B90B; }
.sp-cal-pa-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .6px;
  color: #0ecb81; background: rgba(14,203,129,.1);
  border: 1px solid rgba(14,203,129,.2);
  padding: 2px 8px; border-radius: 4px;
}
.sp-cal-preset-body { padding: 16px !important; display: flex; flex-direction: column; gap: 12px !important; }
.sp-cal-preset-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: #5c6370;
}
.sp-cal-preset-divider {
  height: 1px; background: rgba(255,255,255,.05); margin: 2px 0;
}
.sp-cal-del-btn {
  padding: 0 10px !important; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Weights header bar ── */
.sp-cal-weights-header {
  padding: 16px 18px 0; display: flex; flex-direction: column; gap: 10px;
}
.sp-cal-wh-left .sp-card-title { font-size: 13px; font-weight: 700; color: #eaecef; }
.sp-cal-wh-left .sp-card-sub   { font-size: 11px; color: #848e9c; margin-top: 2px; }
.sp-cal-wh-bar {
  display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px;
}
.sp-cal-wh-seg {
  height: 100%; border-radius: 2px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  min-width: 4px;
}
.sp-cal-wh-legend {
  display: flex; gap: 14px; font-size: 10px; font-weight: 600;
  color: #848e9c; padding-bottom: 4px;
}

/* ── Calibration "How to use" accordion ── */
.sp-cal-howto-card { padding: 0 !important; overflow: hidden; }
.sp-cal-howto-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #848e9c;
  transition: background .15s, color .15s;
  user-select: none;
}
.sp-cal-howto-toggle:hover { background: rgba(255,255,255,.03); color: #eaecef; }
.sp-cal-howto-chevron { margin-left: auto; transition: transform .25s; color: #5c6370; }
.sp-cal-howto-card.open .sp-cal-howto-chevron { transform: rotate(180deg); }
.sp-cal-howto-body { display: none; padding: 0 18px 16px; }
.sp-cal-howto-card.open .sp-cal-howto-body { display: block; }
.sp-cal-howto-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sp-cal-howto-step {
  display: flex; gap: 10px; font-size: 12px; color: #848e9c; line-height: 1.55;
}
.sp-cal-howto-step strong { color: #eaecef; }
.sp-cal-howto-num {
  width: 20px; height: 20px; border-radius: 50%; background: rgba(240,185,11,.12);
  border: 1px solid rgba(240,185,11,.25); color: #F0B90B;
  font-size: 10px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.sp-cal-howto-why {
  display: flex; align-items: flex-start; gap: 7px;
  background: rgba(14,203,129,.04); border: 1px solid rgba(14,203,129,.1);
  border-radius: 8px; padding: 10px 12px;
  font-size: 11px; color: #848e9c; line-height: 1.5;
}
.sp-cal-howto-why svg { flex-shrink: 0; margin-top: 1px; }

/* ── Risk Zones card redesign ── */
.sp-rz-card { overflow: hidden; padding: 0 !important; }

.sp-rz-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-bottom: 1px solid rgba(246,70,93,.1);
  background: linear-gradient(90deg, rgba(246,70,93,.05) 0%, transparent 100%);
}
.sp-rz-hdr-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(246,70,93,.1); border: 1px solid rgba(246,70,93,.2);
  display: flex; align-items: center; justify-content: center;
}
.sp-rz-hdr-text { flex: 1; }

.sp-rz-bar-wrap {
  padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.04);
  display: flex; flex-direction: column; gap: 10px;
}
.sp-rz-bar {
  display: flex; height: 44px; border-radius: 10px;
  overflow: hidden; gap: 3px;
}
.sp-rz-seg-normal {
  background: rgba(240,185,11,.18); border: 1px solid rgba(240,185,11,.3);
  box-shadow: inset 0 0 20px rgba(240,185,11,.08);
}
.sp-rz-seg-elevated {
  background: rgba(113,128,255,.18); border: 1px solid rgba(113,128,255,.3);
  box-shadow: inset 0 0 20px rgba(113,128,255,.08);
}
.sp-rz-seg-critical {
  background: rgba(246,70,93,.18); border: 1px solid rgba(246,70,93,.3);
  box-shadow: inset 0 0 20px rgba(246,70,93,.08);
}
.sp-rz-seg-label {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 10px; font-weight: 800;
  letter-spacing: .7px; text-transform: uppercase; pointer-events: none;
}
.sp-rz-seg-normal .sp-rz-seg-label   { color: #F0B90B; }
.sp-rz-seg-elevated .sp-rz-seg-label { color: #7180ff; }
.sp-rz-seg-critical .sp-rz-seg-label { color: #f6465d; }

.sp-rz-cascade-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #5c6370;
}
.sp-rz-cascade-hint svg { flex-shrink: 0; color: #5c6370; }

.sp-rz-zones { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 8px; }

.sp-rz-zone {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 8px;
  border: 1px solid; position: relative;
  overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.sp-rz-zone::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
}
.sp-rz-zone:hover { transform: translateX(2px); }

.sp-rz-zone-normal  { background: rgba(240,185,11,.04); border-color: rgba(240,185,11,.12); }
.sp-rz-zone-normal::before  { background: #F0B90B; }
.sp-rz-zone-elevated { background: rgba(113,128,255,.04); border-color: rgba(113,128,255,.12); }
.sp-rz-zone-elevated::before { background: #7180ff; }
.sp-rz-zone-critical { background: rgba(246,70,93,.04); border-color: rgba(246,70,93,.12); }
.sp-rz-zone-critical::before { background: #f6465d; }
.sp-rz-zone:hover { box-shadow: 0 2px 12px rgba(0,0,0,.15); }

.sp-rz-zone-left { display: flex; align-items: center; gap: 10px; flex: 1; }

.sp-rz-zone-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .6px;
  padding: 3px 10px; border-radius: 20px; border: 1px solid;
}
.sp-rz-badge-normal   { color: #F0B90B; background: rgba(240,185,11,.08); border-color: rgba(240,185,11,.25); }
.sp-rz-badge-elevated { color: #7180ff; background: rgba(113,128,255,.08); border-color: rgba(113,128,255,.25); }
.sp-rz-badge-critical { color: #f6465d; background: rgba(246,70,93,.08);   border-color: rgba(246,70,93,.25); }
.sp-rz-zone-desc {
  font-size: 10px; color: #5c6370; line-height: 1.5;
  padding: 4px 0 0 0; flex: 0 0 100%;
}

/* ── Factor Weights header ── */
.sp-fw-weights-header {
  padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.sp-fw-wh-top {
  display: flex; align-items: flex-start; justify-content: space-between;
}
.sp-fw-wh-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 10px; font-weight: 600; color: #848e9c;
}

/* Per-factor colored slider thumbs */
.fw-slider-macro::-webkit-slider-thumb   { background: #F0B90B; box-shadow: 0 0 0 3px rgba(240,185,11,.2); }
.fw-slider-macro:hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(240,185,11,.15), 0 0 14px rgba(240,185,11,.4); }
.fw-slider-geo::-webkit-slider-thumb     { background: #f6465d; box-shadow: 0 0 0 3px rgba(246,70,93,.2); }
.fw-slider-geo:hover::-webkit-slider-thumb   { box-shadow: 0 0 0 5px rgba(246,70,93,.15), 0 0 14px rgba(246,70,93,.4); }
.fw-slider-att::-webkit-slider-thumb     { background: #7180ff; box-shadow: 0 0 0 3px rgba(113,128,255,.2); }
.fw-slider-att:hover::-webkit-slider-thumb   { box-shadow: 0 0 0 5px rgba(113,128,255,.15), 0 0 14px rgba(113,128,255,.4); }
.fw-slider-spill::-webkit-slider-thumb   { background: #0ecb81; box-shadow: 0 0 0 3px rgba(14,203,129,.2); }
.fw-slider-spill:hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(14,203,129,.15), 0 0 14px rgba(14,203,129,.4); }
.fw-slider-crypto::-webkit-slider-thumb  { background: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,.2); }
.fw-slider-crypto:hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(168,85,247,.15), 0 0 14px rgba(168,85,247,.4); }

/* Val badge color variants */
.sp-param-val-badge.red    { color: #f6465d; background: rgba(246,70,93,.1);   border-color: rgba(246,70,93,.2); }
.sp-param-val-badge.purple { color: #a855f7; background: rgba(168,85,247,.1);  border-color: rgba(168,85,247,.2); }

/* ── Attribution section ── */
.sp-attr-mode-pills {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sp-attr-mode-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700;
  letter-spacing: .4px; border: 1px solid; white-space: nowrap;
}
.sp-attr-mode-winner {
  color: #F0B90B; background: rgba(240,185,11,.08);
  border-color: rgba(240,185,11,.25);
}
.sp-attr-mode-strict {
  color: #7180ff; background: rgba(113,128,255,.08);
  border-color: rgba(113,128,255,.25);
}
.sp-attr-mode-pill svg { flex-shrink: 0; }

/* Preview impact card – banner style */
.sp-attr-preview-card { overflow: hidden; padding: 0 !important; }
.sp-attr-preview-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; background: linear-gradient(90deg, rgba(168,85,247,.06) 0%, transparent 100%);
  border-bottom: 1px solid rgba(168,85,247,.12);
}
.sp-attr-pb-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.2);
  display: flex; align-items: center; justify-content: center;
}
.sp-attr-pb-left { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sp-attr-pb-title { font-size: 14px; font-weight: 700; color: #eaecef; }
.sp-attr-pb-sub { font-size: 12px; color: #848e9c; }
.sp-attr-preview-body { padding: 14px 18px !important; }

/* Preview cell color coding */
.sp-attr-pv-clash, .sp-attr-pv-ok { font-weight: 700; }
.sp-attr-pv-clash { color: #f6465d; }
.sp-attr-pv-clash-new { color: #F0B90B; }
.sp-attr-pv-ok { color: #0ecb81; }
.sp-attr-pv-ok-new { color: #a855f7; }

/* Preview grid cells */
.sp-attr-preview-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.sp-attr-preview-cell {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; padding: 10px 12px; text-align: center;
}
.sp-attr-preview-cell .preview-label {
  font-size: 10px; color: #848e9c; text-transform: uppercase;
  letter-spacing: .4px; margin-bottom: 4px;
}
.sp-attr-preview-cell .preview-value {
  font-size: 20px; font-weight: 700;
}
.sp-attr-pv-clash .preview-value  { color: #f6465d; }
.sp-attr-pv-clash-new .preview-value { color: #F0B90B; }
.sp-attr-pv-ok .preview-value     { color: #0ecb81; }
.sp-attr-pv-ok-new .preview-value { color: #a855f7; }
@media (max-width: 600px) {
  .sp-attr-preview-grid { grid-template-columns: repeat(2, 1fr); }
}
.sp-attr-preview-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: #5c6370; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER-A OVERRIDES — must be at end to win specificity vs global !important
   ═══════════════════════════════════════════════════════════════════════════ */
.tier-decision .mkt-section-title {
  font-size: 15px !important;
  color: #F0B90B !important;
  letter-spacing: .6px !important;
}
.tier-decision .mkt-section-desc {
  font-size: 13px !important;
  color: #8B8D97 !important;
}
.mi-strip-wrapper .mkt-section-title {
  font-size: 15px !important;
  color: #F0B90B !important;
  letter-spacing: .6px !important;
}
.mi-strip-wrapper .mkt-section-desc {
  font-size: 13px !important;
  color: #8B8D97 !important;
}
.ai-insights-strip-wrapper .mkt-section-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #F0B90B !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
}
.ai-insights-strip-wrapper .mkt-section-desc {
  font-size: 12px !important;
  color: #8B8D97 !important;
}

/* ═══════════════════════════════════════════════════════════
   GOLD SHIMMER OUTLINE — universal hover effect for ALL cards
   ═══════════════════════════════════════════════════════════ */

/* --- Prerequisites: position + overflow where missing --- */
.db-scen-card,
.mq-card,
.krit-panel,
.krit-statusbar,
.sc2-lead-card,
.sc2-alt-card,
.sc2-watch-section,
.sgdh-card,
.rr-dim-card,
.data-freshness-strip,
.signal-summary-strip,
.data-sources-strip {
  position: relative;
  overflow: hidden;
}

/* --- Shimmer ::after pseudo-element --- */
.mi-widget::after,
.db-scen-card::after,
.ais-card::after,
.mq-card::after,
.krit-panel::after,
.krit-statusbar::after,
.sc2-lead-card::after,
.sc2-alt-card::after,
.sc2-watch-section::after,
.sgdh-card::after,
.rr-dim-card::after,
.data-freshness-strip::after,
.signal-summary-strip::after,
.data-sources-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,168,67,.35) 25%,
    rgba(240,215,140,.5) 50%,
    rgba(212,168,67,.35) 75%,
    transparent 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 2;
}

/* --- Activate on hover --- */
.mi-widget:hover::after,
.db-scen-card:hover::after,
.ais-card:hover::after,
.mq-card:hover::after,
.krit-panel:hover::after,
.krit-statusbar:hover::after,
.sc2-lead-card:hover::after,
.sc2-alt-card:hover::after,
.sc2-watch-section:hover::after,
.sgdh-card:hover::after,
.rr-dim-card:hover::after,
.data-freshness-strip:hover::after,
.signal-summary-strip:hover::after,
.data-sources-strip:hover::after {
  opacity: 1;
  animation: db2-shimmer 2s linear infinite;
}