/* v3/styles-new.jsx — additions for big charts, activity feed, section-head links, dark tweaks */
const CSS_V3_NEW = `
/* ==== COMPACT 4-ACROSS CHART STRIP ==== */
.bcgrid-wrap {
  max-width: 1560px; margin: 0 auto;
  padding: 14px 24px 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.bcgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.bigchart {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 10px 14px 8px;
  border-right: 1px solid var(--rule-soft);
  text-decoration: none; color: inherit;
  position: relative;
  min-width: 0;
  transition: background 140ms;
}
.bigchart:hover { background: var(--paper-1); }
.bc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
  min-width: 0;
}
.bc-ident { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bc-sym {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
}
.bc-name {
  font-family: var(--serif); font-size: 13px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-nums { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.bc-px {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.bc-delta {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 5px; border-radius: 3px;
  white-space: nowrap;
}
.bc-delta.up   { color: var(--up);   background: var(--up-bg); }
.bc-delta.down { color: var(--down); background: var(--down-bg); }

.bc-svg {
  width: 100%; height: 34px;
  display: block;
  cursor: crosshair;
}
.bc-tip {
  position: absolute; top: 28px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: 2px 7px; border-radius: 3px;
  font-size: 10.5px; pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-lift);
  z-index: 3;
}
.bc-tip .v { font-family: var(--mono); font-weight: 600; }

/* inline range tabs in the strip */
.bc-tabs-inline {
  display: flex; align-items: stretch;
  padding: 6px 10px;
  border-left: 1px solid var(--rule-soft);
  background: var(--paper-1);
}
.bc-tabs-inline button {
  padding: 0 9px; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); font-weight: 600; letter-spacing: 0.04em;
  border-radius: 3px;
}
.bc-tabs-inline button:hover { color: var(--ink); }
.bc-tabs-inline button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); }

@media (max-width: 1100px) {
  .bcgrid { grid-template-columns: repeat(2, 1fr); }
  .bc-tabs-inline { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule-soft); justify-content: center; }
  .bigchart:nth-child(2n) { border-right: 0; }
  .bigchart:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
}
@media (max-width: 640px) {
  .bcgrid { grid-template-columns: 1fr; }
  .bigchart { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
}

/* ==== SECTION-HEAD 'See full view' link ==== */
.section-hd { position: relative; }
.section-hd .hd-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.sec-link {
  font-family: var(--sans); font-size: 11.5px; color: var(--ink-2);
  font-weight: 500; letter-spacing: -0.005em;
  padding: 5px 10px; border-radius: 4px;
  text-decoration: none;
  transition: background 140ms, color 140ms;
}
.sec-link:hover { color: var(--warm); background: var(--paper-1); }
.card-link {
  margin-left: auto;
  font-family: var(--sans); font-size: 10.5px; color: var(--ink-3);
  font-weight: 500; text-decoration: none;
  transition: color 140ms;
}
.card-link:hover { color: var(--warm); }

/* ==== ACTIVITY FEED ==== */
.activity-card { min-height: 440px; display: flex; flex-direction: column; }
.activity-card .card-hd { align-items: center; }
.act-legend {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 16px 10px; border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-1);
}
.act-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--ink-3);
}
.act-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.act-bd {
  flex: 1; overflow-y: auto; max-height: 560px;
  scrollbar-width: thin;
}
.act-item {
  display: grid; grid-template-columns: 3px 1fr; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; color: inherit;
  transition: background 140ms;
}
.act-item:hover { background: var(--paper-1); }
.act-item.just-in { animation: justIn 1200ms ease; }
@keyframes justIn {
  0%   { background: var(--warm-bg); transform: translateY(-6px); opacity: 0; }
  25%  { opacity: 1; transform: translateY(0); }
  100% { background: transparent; }
}
.act-gut { width: 3px; border-radius: 2px; min-height: 100%; }
.act-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-row1 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 10px; margin-bottom: 2px;
}
.act-kind {
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 9.5px;
}
.act-sym { font-family: var(--mono); font-weight: 700; color: var(--ink); font-size: 11.5px; letter-spacing: 0.04em; }
.act-time { color: var(--ink-4); margin-left: auto; font-size: 10px; font-family: var(--mono); }
.act-text {
  font-family: var(--serif); font-size: 13.5px;
  color: var(--ink); line-height: 1.35; letter-spacing: -0.003em;
  text-wrap: pretty;
}
.act-meta {
  font-family: var(--sans); font-size: 10.5px; color: var(--ink-3);
  margin-top: 2px;
}
.act-empty {
  padding: 24px 16px; text-align: center;
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-3);
  line-height: 1.5;
}
.act-empty a { color: var(--ink); text-decoration: underline; }

/* ==== DARK MODE TONAL PASS ==== */
[data-theme="dark"] {
  --paper: oklch(0.18 0.008 85);
  --paper-1: oklch(0.22 0.008 85);
  --paper-2: oklch(0.26 0.01 85);
  --card: oklch(0.21 0.008 85);
  --ink: oklch(0.94 0.006 85);
  --ink-1: oklch(0.86 0.006 85);
  --ink-2: oklch(0.72 0.008 85);
  --ink-3: oklch(0.58 0.01 85);
  --ink-4: oklch(0.46 0.01 85);
  --rule: oklch(0.32 0.008 85);
  --rule-soft: oklch(0.28 0.006 85);
  --rule-strong: oklch(0.40 0.008 85);
  --warm: oklch(0.78 0.12 55);
  --warm-bg: oklch(0.30 0.08 55 / 0.28);
  --cool: oklch(0.72 0.08 230);
  --cool-bg: oklch(0.30 0.06 230 / 0.28);
  --up: oklch(0.78 0.13 150);
  --up-bg: oklch(0.30 0.08 150 / 0.30);
  --up-soft: oklch(0.78 0.13 150 / 0.25);
  --down: oklch(0.72 0.17 25);
  --down-bg: oklch(0.30 0.10 25 / 0.30);
  --down-soft: oklch(0.72 0.17 25 / 0.25);
  --shadow-card: 0 0 0 1px oklch(0 0 0 / 0.20);
  --shadow-lift: 0 10px 28px oklch(0 0 0 / 0.45);
}
[data-theme="dark"] body { background: var(--paper); }
[data-theme="dark"] .topbar { background: oklch(0.19 0.008 85 / 0.9); }
[data-theme="dark"] .ribbon { background: var(--card); }
[data-theme="dark"] .news-item .src { color: var(--warm); }
.news-ext { margin-left: auto; color: var(--ink-4); font-size: 10px; opacity: 0; transition: opacity 140ms; }
.news-item:hover .news-ext { opacity: 1; color: var(--warm); }
[data-theme="dark"] .bc-link:hover, [data-theme="dark"] .sec-link:hover { color: var(--warm); }
[data-theme="dark"] .bc-tip { background: var(--ink); color: var(--paper); }
[data-theme="dark"] .hero-line em { color: var(--warm); }
[data-theme="dark"] .brand-word em { color: var(--warm); }
[data-theme="dark"] .section h2 em { color: var(--warm); }
[data-theme="dark"] .cmd-item.active, [data-theme="dark"] .cmd-input-row .p { color: var(--warm); }
[data-theme="dark"] .tb-avatar { background: var(--warm); color: var(--paper); }
[data-theme="dark"] .act-item.just-in { animation: justInDk 1200ms ease; }
@keyframes justInDk {
  0% { background: var(--warm-bg); transform: translateY(-6px); opacity: 0; }
  25% { opacity: 1; transform: translateY(0); }
  100% { background: transparent; }
}
`;
document.getElementById("v3-styles").textContent += CSS_V3_NEW;