:root {
    --black:      #0A0A0A;
    --white:      #FFFFFF;
    --hot-pink:   #FF2D78;
    --cyan:       #00D4E8;
    --yellow:     #FFD600;
    --orange:     #FF6B2B;
    --pink-light: #FFB3CC;
    --gray-dark:  #1A1A1A;
    --gray-mid:   #333333;
    --gray-light: #F5F5F5;
    --card-bg:    #FFFFFF;
    --card-border:#E5E5E5;
    --font-display: 'Bebas Neue', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --font-mono:    'Space Mono', monospace;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--black);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  a { color: #0099B3; text-decoration: none; }
  a:hover { text-decoration: underline; }
  .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

  /* ─── Nav ──────────────────────────────────────────── */
  .site-nav {
    background: var(--black);
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #1A1A1A;
  }
  .nav-logo {
    display: flex;
    align-items: baseline;
    gap: 0;
    text-decoration: none;
  }
  .nav-logo:hover { text-decoration: none; }
  .nav-repro {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--white);
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .nav-sep {
    width: 2px;
    height: 14px;
    background: var(--hot-pink);
    margin: 0 8px;
    align-self: center;
  }
  .nav-intel {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--black);
    -webkit-text-stroke: 1px var(--hot-pink);
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .nav-brand-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #555;
    margin-left: 16px;
    align-self: center;
  }
  .site-nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .site-nav-links a {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    transition: color 0.15s;
  }
  .site-nav-links a:hover {
    color: var(--white);
    text-decoration: none;
  }
  .site-nav-links a.active {
    color: var(--white);
  }
  .nav-cta {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 9px 18px;
    background: var(--hot-pink);
    color: var(--white) !important;
    border-radius: 1px;
    transition: transform 0.15s;
  }
  .nav-cta:hover { transform: translateY(-1px); text-decoration: none !important; }

  /* ─── Mobile Hamburger ─────────────────────────────── */
  .nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-direction: column;
    gap: 5px;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
    transition: transform 0.2s, opacity 0.2s;
  }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  @media (max-width: 600px) {
    .nav-hamburger { display: flex; }
    .site-nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      background: var(--black);
      flex-direction: column;
      padding: 16px 24px;
      gap: 16px;
      border-top: 1px solid #222;
    }
    .site-nav-links.open { display: flex; }
    .site-nav-links a { font-size: 12px; }
  }

  /* ─── Dashboard Header ───────────────────────────── */
  .dash-header {
    padding: 48px 0 0;
    border-bottom: 1px solid #E5E5E5;
  }
  .dash-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
  }
  .dash-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hot-pink);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .dash-label-bar {
    width: 32px;
    height: 2px;
    background: var(--hot-pink);
  }
  .dash-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .dash-date {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: #555;
    text-align: right;
  }
  .dash-date strong {
    color: var(--black);
    display: block;
    font-weight: 400;
  }

  /* ─── Tab Navigation ─────────────────────────────── */
  .tab-nav-wrap {
    position: relative;
  }
  .tab-nav-wrap::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, transparent, var(--white));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .tab-nav-wrap.scrolled-end::after { opacity: 0; }
  .tab-nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav { -ms-overflow-style: none; scrollbar-width: none; }
  .tab-btn {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #555;
    background: none;
    border: none;
    padding: 14px 20px;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }
  .tab-btn:hover {
    color: var(--black);
  }
  .tab-btn.active {
    color: var(--black);
    border-bottom-color: var(--hot-pink);
  }

  /* ─── Tab Content Panels ─────────────────────────── */
  .tab-panel {
    display: none;
    padding: 40px 0 60px;
  }
  .tab-panel.active {
    display: block;
  }

  /* ─── Stats Cards ────────────────────────────────── */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #E5E5E5;
    margin-bottom: 32px;
    border-radius: 2px;
    overflow: hidden;
  }
  .stat-card {
    background: var(--gray-light);
    padding: 20px 24px;
    text-align: center;
  }
  .stat-num {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--black);
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .stat-num span { color: var(--hot-pink); }
  .stat-label {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #555;
    margin-top: 4px;
  }

  /* ─── Section Cards ──────────────────────────────── */
  .section-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hot-pink);
    margin-bottom: 12px;
  }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: 0.04em;
    color: var(--black);
    margin-bottom: 24px;
    line-height: 1.05;
  }

  .card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--hot-pink);
  }
  .card.cyan::before { background: var(--cyan); }
  .card.yellow::before { background: var(--yellow); }
  .card.orange::before { background: var(--orange); }

  .card-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card-eyebrow {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hot-pink);
  }
  .card.cyan .card-eyebrow { color: var(--cyan); }
  .card.yellow .card-eyebrow { color: var(--yellow); }
  .card.orange .card-eyebrow { color: var(--orange); }

  .card-body {
    padding: 24px;
  }

  /* ─── Markdown Content Styles ────────────────────── */
  .md-content h3 {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    color: #0099B3;
    margin: 28px 0 12px;
    line-height: 1.1;
  }
  .md-content h3:first-child { margin-top: 0; }
  .md-content h4 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: #B8860B;
    margin: 20px 0 8px;
  }
  .md-content p {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 12px;
  }
  .md-content strong { color: var(--black); font-weight: 500; }
  .md-content em { color: var(--hot-pink); font-style: italic; }
  .md-content code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 2px;
    color: #0099B3;
  }
  .md-content ul {
    margin: 10px 0 16px 20px;
    list-style: none;
  }
  .md-content li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
  }
  .md-content li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 5px; height: 5px;
    background: var(--hot-pink);
    border-radius: 50%;
  }
  .md-content hr {
    border: none;
    border-top: 1px solid var(--card-border);
    margin: 24px 0;
  }
  .md-content a {
    color: #0099B3;
  }

  /* ─── Charts ─────────────────────────────────────── */
  .bar-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .bar-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #555;
    letter-spacing: 0.04em;
    min-width: 180px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bar-track {
    flex: 1;
    height: 20px;
    background: rgba(0,0,0,0.05);
    border-radius: 1px;
    overflow: hidden;
  }
  .bar-fill {
    height: 100%;
    border-radius: 1px;
    transition: width 0.6s ease;
    min-width: 2px;
  }
  .bar-value {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #555;
    min-width: 50px;
  }

  /* (Top Posts removed) */

  /* ─── Counter-Intel Alert Cards ──────────────────── */
  .ci-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .ci-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--orange);
  }
  .ci-card.red::before { background: #FF4444; }
  .ci-card .card-header {
    padding: 14px 24px;
    border-bottom: 1px solid var(--card-border);
  }
  .ci-card .card-eyebrow {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--orange);
  }
  .ci-card.red .card-eyebrow { color: #FF4444; }
  .ci-card .card-body { padding: 20px 24px; }

  .ci-placeholder {
    text-align: center;
    padding: 48px 24px;
    color: #555;
  }
  .ci-placeholder-bar {
    width: 32px;
    height: 3px;
    background: var(--orange);
    margin: 0 auto 20px;
  }
  .ci-placeholder p {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #555;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* ─── Two Column Layout ──────────────────────────── */
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* ─── Discussion Cards ──────────────────────────────── */
  .discussion-cards {
    display: grid;
    gap: 16px;
  }
  .discussion-card {
    background: var(--gray-light);
    border-radius: 6px;
    padding: 20px 24px;
    border-left: 3px solid var(--cyan);
    position: relative;
  }
  .discussion-card:nth-child(2) { border-left-color: var(--hot-pink); }
  .discussion-card:nth-child(3) { border-left-color: var(--yellow); }
  .discussion-card:nth-child(4) { border-left-color: var(--orange); }
  .discussion-card:nth-child(5) { border-left-color: var(--cyan); }
  .discussion-card .disc-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 8px;
    line-height: 1.35;
  }
  .discussion-card .disc-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
  }
  .discussion-card .disc-body {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
  }
  .discussion-card .disc-body strong { color: var(--black); }

  /* ─── Footer ──────────────────────────────────────── */
  .site-footer {
    background: var(--black);
    color: var(--white);
    padding: 40px 0;
    border-top: 1px solid #1A1A1A;
  }
  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-logo {
    display: flex;
    align-items: baseline;
    gap: 0;
  }
  .footer-repro {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--white);
    letter-spacing: 0.04em;
  }
  .footer-sep {
    width: 2px;
    height: 12px;
    background: var(--hot-pink);
    margin: 0 6px;
    align-self: center;
  }
  .footer-intel {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--black);
    -webkit-text-stroke: 1px var(--hot-pink);
    letter-spacing: 0.04em;
  }
  .footer-links {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .footer-links a {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #555;
  }
  .footer-links a:hover { color: var(--white); }
  .footer-bottom {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #1A1A1A;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #333;
  }
  .footer-disclaimer {
    font-size: 11px;
    color: #333;
    max-width: 460px;
    line-height: 1.5;
    text-align: right;
  }

  /* ─── Scoreboard KPI Cards ────────────────────────── */
  .scoreboard-section {
    margin: 28px 0 12px;
  }
  .scoreboard-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  .kpi-card {
    background: var(--gray-light);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s;
    border: 1px solid transparent;
  }
  .kpi-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
  .kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
  }
  .kpi-card.rising::before { background: var(--hot-pink); }
  .kpi-card.declining::before { background: var(--cyan); }
  .kpi-card.stable::before { background: #CCC; }
  .kpi-card.alert::before { background: var(--orange); }
  .kpi-label {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 6px;
    line-height: 1.3;
  }
  .kpi-value {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--black);
    line-height: 1;
    margin-bottom: 4px;
  }
  .kpi-trend {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .kpi-trend.up { color: var(--hot-pink); }
  .kpi-trend.down { color: #0099B3; }
  .kpi-trend.stable { color: #999; }
  .kpi-detail {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.5;
    color: #555;
    text-align: left;
  }
  .kpi-card.is-open .kpi-detail { display: block; }
  .kpi-card .expand-chevron { margin-top: 4px; opacity: 0.3; }
  .kpi-card:hover .expand-chevron { opacity: 0.5; }
  .kpi-card.is-open .expand-chevron { transform: rotate(180deg); opacity: 0.6; }

  @media (max-width: 900px) {
    .scoreboard-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 600px) {
    .scoreboard-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-value { font-size: 26px; }
    .kpi-label { font-size: 7px; }
  }

  /* ─── Momentum / Trending Section ─────────────────── */
  .momentum-section {
    margin-top: 28px;
    margin-bottom: 12px;
  }
  .momentum-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }
  .momentum-header .pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hot-pink);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,45,120,0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 0 8px rgba(255,45,120,0); }
  }
  .momentum-header h3 {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.06em;
    color: var(--black);
    margin: 0;
  }
  .keyword-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
  }
  .keyword-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1.5px solid;
  }
  .keyword-pill .pill-count {
    font-weight: 400;
    opacity: 0.7;
    font-size: 10px;
  }
  .keyword-pill.pink   { color: var(--hot-pink); border-color: var(--hot-pink); background: rgba(255,45,120,0.06); }
  .keyword-pill.cyan   { color: #0099B3; border-color: #0099B3; background: rgba(0,212,232,0.06); }
  .keyword-pill.yellow { color: #B8860B; border-color: #D4A012; background: rgba(255,214,0,0.08); }
  .keyword-pill.orange { color: var(--orange); border-color: var(--orange); background: rgba(255,107,43,0.06); }

  .theme-cards {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
  }
  .theme-card {
    background: var(--gray-light);
    border-radius: 8px;
    padding: 16px 18px;
    border-left: 3px solid var(--hot-pink);
    position: relative;
  }
  .theme-card:nth-child(2) { border-left-color: var(--cyan); }
  .theme-card:nth-child(3) { border-left-color: var(--yellow); }
  .theme-card:nth-child(4) { border-left-color: var(--orange); }
  .theme-card:nth-child(5) { border-left-color: var(--pink-light); }
  .theme-card .theme-dir {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hot-pink);
    margin-bottom: 4px;
  }
  .theme-card:nth-child(2) .theme-dir { color: #0099B3; }
  .theme-card:nth-child(3) .theme-dir { color: #B8860B; }
  .theme-card:nth-child(4) .theme-dir { color: var(--orange); }
  .theme-card .theme-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.35;
  }

  /* ─── Summary chart mini ─────────────────────────── */
  .summary-chart-section {
    margin-top: 24px;
  }

  /* ─── Timeline Line Graph (posts per day) ────────── */
  .line-graph-wrap {
    position: relative;
    padding: 8px 0 0;
  }
  .line-graph-svg {
    width: 100%;
    height: 180px;
    display: block;
  }
  .line-graph-svg .grid-line {
    stroke: #E5E5E5;
    stroke-width: 1;
  }
  .line-graph-svg .axis-label {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: #999;
  }
  .line-graph-svg .area-fill {
    fill: url(#lineGradient);
    opacity: 0.3;
  }
  .line-graph-svg .data-line {
    fill: none;
    stroke: var(--hot-pink);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .line-graph-svg .data-dot {
    fill: var(--white);
    stroke: var(--hot-pink);
    stroke-width: 2;
  }
  .line-graph-svg .event-diamond {
    fill: var(--yellow);
    stroke: var(--white);
    stroke-width: 1.5;
  }
  .line-graph-svg .event-line {
    stroke: var(--yellow);
    stroke-width: 1;
    stroke-dasharray: 4,3;
    opacity: 0.5;
  }
  .line-graph-svg .dot-label {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: #333;
    text-anchor: middle;
  }
  .timeline-event-markers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--card-border);
  }
  .event-marker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: #555;
    letter-spacing: 0.02em;
  }
  .event-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--yellow);
    flex-shrink: 0;
  }

  /* ─── Sentiment Pie Chart ────────────────────────── */
  .sentiment-pie-wrap {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 8px 0;
  }
  @media(max-width:600px) {
    .sentiment-pie-wrap { flex-direction: column; gap: 20px; }
  }
  .sentiment-pie {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
  }
  .sentiment-pie-hole {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .sentiment-pie-total {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
    color: var(--black);
  }
  .sentiment-pie-sub {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #999;
    margin-top: 2px;
  }
  .sentiment-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .legend-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    min-width: 80px;
  }
  .legend-pct {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    min-width: 36px;
  }
  .legend-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #999;
  }

  /* ─── Week-over-Week Signal Cards ────────────────── */
  .wow-signals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }
  .wow-card {
    background: var(--gray-light);
    border-radius: 8px;
    padding: 14px 16px;
    text-align: center;
  }
  .wow-direction {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .wow-direction.up { color: var(--hot-pink); }
  .wow-direction.stable { color: #0099B3; }
  .wow-direction.new { color: var(--orange); }
  .wow-topic {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
  }

  /* ─── Education Gaps & Pain Points ────────────────── */
  .edu-pain-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
  }
  @media(max-width:768px) {
    .edu-pain-grid { grid-template-columns: 1fr; }
  }
  .edu-pain-card {
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
  }
  .edu-pain-card .ep-header {
    padding: 14px 20px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .edu-pain-card .ep-icon {
    font-size: 22px;
    line-height: 1;
  }
  .edu-pain-card .ep-title {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .edu-pain-card .ep-body {
    padding: 0 20px 18px;
  }
  .edu-pain-card .ep-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .edu-pain-card .ep-body li {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .edu-pain-card .ep-body li:last-child {
    border-bottom: none;
  }
  .edu-pain-card .ep-body li strong {
    color: var(--black);
    font-weight: 700;
  }
  .edu-pain-card.gaps {
    background: #FFF5F8;
    border: 1px solid rgba(255,45,120,0.15);
  }
  .edu-pain-card.gaps .ep-header { color: var(--hot-pink); }
  .edu-pain-card.pain {
    background: #FFF8F0;
    border: 1px solid rgba(255,107,43,0.15);
  }
  .edu-pain-card.pain .ep-header { color: var(--orange); }

  /* ─── Click-to-Expand Detail Panels ─────────────────── */
  .expandable { cursor: pointer; position: relative; }
  .expandable:hover { opacity: 0.92; }
  /* Chevron indicator for expandables */
  .expand-chevron {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.2s ease;
    opacity: 0.4;
    flex-shrink: 0;
  }
  .expandable:hover .expand-chevron { opacity: 0.7; }
  .expandable.is-open .expand-chevron { transform: rotate(180deg); opacity: 0.7; }
  .expand-detail {
    display: none;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    animation: expandIn 0.2s ease;
  }
  .expand-detail.open { display: block; }
  @keyframes expandIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .wow-card.expandable .expand-detail {
    text-align: left;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.65;
    background: #f8f8f8;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-height: none;
  }
  .keyword-pill.expandable { position: relative; }
  .keyword-pill .expand-detail {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 260px;
    max-width: 340px;
    margin-top: 6px;
  }
  .edu-pain-card .ep-body li.expandable .expand-detail {
    margin-top: 6px;
    border-left: 3px solid var(--hot-pink);
    padding-left: 12px;
  }
  .edu-pain-card.pain .ep-body li.expandable .expand-detail {
    border-left-color: var(--orange);
  }

  /* ─── Longitudinal / Trends ──────────────────────── */
  .range-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .range-btn {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 18px;
    border: 1px solid var(--card-border);
    background: var(--white);
    color: #666;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .range-btn:hover { border-color: #999; color: #333; }
  .range-btn.active {
    background: var(--hot-pink);
    color: var(--white);
    border-color: var(--hot-pink);
  }
  .trends-placeholder {
    text-align: center;
    padding: 32px 16px;
    color: #999;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .velocity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }
  .velocity-card {
    background: var(--gray-light);
    border-radius: 6px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
  }
  .velocity-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
  }
  .velocity-card.up::before { background: var(--hot-pink); }
  .velocity-card.down::before { background: var(--cyan); }
  .velocity-card.stable::before { background: #CCC; }
  .velocity-topic {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 4px;
  }
  .velocity-change {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  .velocity-change.up { color: var(--hot-pink); }
  .velocity-change.down { color: var(--cyan); }
  .velocity-change.stable { color: #999; }
  .velocity-counts {
    font-family: var(--font-mono);
    font-size: 9px;
    color: #888;
    margin-top: 2px;
  }
  /* Sparkline-style timeline bars */
  .timeline-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 60px;
    margin-top: 8px;
  }
  .timeline-bars .t-bar {
    flex: 1;
    min-width: 12px;
    border-radius: 2px 2px 0 0;
    position: relative;
    transition: opacity 0.15s;
  }
  .timeline-bars .t-bar:hover { opacity: 0.8; }
  .timeline-bars .t-bar .t-tip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--black);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
    margin-bottom: 4px;
    z-index: 5;
  }
  .timeline-bars .t-bar:hover .t-tip { display: block; }
  .timeline-date-labels {
    display: flex;
    gap: 3px;
    margin-top: 4px;
  }
  .timeline-date-labels span {
    flex: 1;
    min-width: 12px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 8px;
    color: #999;
  }
  /* Horizontal cumulative bars */
  .cumulative-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  .cumulative-bar-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #333;
    width: 180px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 12px;
  }
  .cumulative-bar-track {
    flex: 1;
    height: 22px;
    background: var(--gray-light);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
  }
  .cumulative-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    display: flex;
    align-items: center;
    padding-left: 8px;
  }
  .cumulative-bar-val {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--white);
    font-weight: 700;
  }

  /* ─── FAQ ─────────────────────────────────────────── */
  .faq-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--card-border);
  }
  .faq-section h3 {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.06em;
    color: var(--black);
    margin-bottom: 16px;
  }
  .faq-item {
    margin-bottom: 0;
    border-bottom: 1px solid var(--card-border);
  }
  .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--black);
    user-select: none;
  }
  .faq-q:hover { color: var(--hot-pink); }
  .faq-q .faq-toggle {
    font-size: 18px;
    color: #999;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 12px;
  }
  .faq-item.open .faq-toggle { transform: rotate(45deg); }
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .faq-item.open .faq-a {
    max-height: 500px;
  }
  .faq-a-inner {
    padding: 0 0 16px;
    font-size: 13px;
    color: #555;
    line-height: 1.7;
  }

  /* ─── Responsive ──────────────────────────────────── */
  @media (max-width: 900px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .two-col { grid-template-columns: 1fr; }
    .dash-header-top { flex-direction: column; align-items: flex-start; gap: 12px; }
    .dash-date { text-align: left; }
    .footer-inner { flex-direction: column; gap: 16px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer-disclaimer { text-align: center; }
    .bar-label { min-width: 100px; font-size: 9px; }
    .theme-cards { grid-template-columns: 1fr; }
    .wow-signals { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .site-nav { padding: 12px 16px; position: relative; }
    .nav-brand-sub { display: none; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .tab-nav { gap: 0; }
    .tab-btn { padding: 12px 14px; font-size: 9px; }
    .footer-links { flex-wrap: wrap; justify-content: center; }
    .bar-label { min-width: 80px; }
    .summary-chart-section { grid-template-columns: 1fr !important; }
    .wow-signals { grid-template-columns: 1fr; }
    .edu-pain-grid { grid-template-columns: 1fr; }
    .velocity-grid { grid-template-columns: 1fr 1fr; }
    .wrap { padding: 0 16px; }
    .section-title { font-size: 24px; }
    .discussion-card { padding: 16px; }
    .card-body { padding: 16px; }
    .card-header { padding: 12px 16px; }
    .sentiment-pie { width: 140px; height: 140px; }
    .sentiment-pie-hole { width: 60px; height: 60px; }
    .sentiment-pie-total { font-size: 22px; }
    .cumulative-bar-label { width: 120px; font-size: 11px; }
  }

  /* ═══════════════════════════════════════════════════════ */
  /* THREE-VIEW ARCHITECTURE                                 */
  /* ═══════════════════════════════════════════════════════ */

  /* ─── View Selector ────────────────────────────────────── */
  .view-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--card-border);
  }
  .view-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 12px 14px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
  }
  .view-btn:hover { background: rgba(0,0,0,0.02); }
  .view-btn.active {
    border-bottom-color: var(--hot-pink);
    background: rgba(255,45,120,0.03);
  }
  .view-btn .view-icon {
    font-size: 18px;
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.2s;
  }
  .view-btn.active .view-icon { opacity: 0.9; }
  .view-btn .view-label {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.06em;
    color: #888;
    transition: color 0.2s;
  }
  .view-btn.active .view-label { color: var(--black); }
  .view-btn .view-sub {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #BBB;
    transition: color 0.2s;
  }
  .view-btn.active .view-sub { color: var(--hot-pink); }

  /* Color-code each view */
  .view-btn[data-view="pulse"].active { border-bottom-color: var(--hot-pink); }
  .view-btn[data-view="landscape"].active { border-bottom-color: var(--cyan); }
  .view-btn[data-view="landscape"].active .view-sub { color: var(--cyan); }
  .view-btn[data-view="landscape"].active { background: rgba(0,212,232,0.03); }
  .view-btn[data-view="strategy"].active { border-bottom-color: var(--yellow); }
  .view-btn[data-view="strategy"].active .view-sub { color: #B8860B; }
  .view-btn[data-view="strategy"].active { background: rgba(255,214,0,0.03); }

  /* ─── View Panels ──────────────────────────────────────── */
  .view-panel {
    display: none;
    padding: 28px 0 16px;
  }
  .view-panel.active { display: block; }

  /* ─── Pulse: Scoreboard ────────────────────────────────── */
  .pulse-scoreboard {
    margin-bottom: 24px;
  }

  /* ─── Briefing Zone (Zone 1) ─────────────────────────────── */
  .briefing-zone {
    margin-bottom: 28px;
  }
  .briefing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .briefing-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #888;
    flex-wrap: wrap;
  }
  .bs-item { white-space: nowrap; }
  .bs-sep { color: #ccc; }

  /* ─── Headline KPIs (Zone 3) ─────────────────────────────── */
  .headline-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
  }
  @media (max-width: 700px) {
    .headline-kpis { grid-template-columns: 1fr; }
  }
  .headline-kpi {
    background: var(--gray-light);
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid #ccc;
    position: relative;
    transition: box-shadow 0.15s;
  }
  .headline-kpi:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
  .headline-kpi.rising,
  .headline-kpi.alert { border-left-color: var(--hot-pink); }
  .headline-kpi.declining { border-left-color: var(--cyan); }
  .headline-kpi.stable { border-left-color: #ccc; }

  .hkpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
  }
  .hkpi-value {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--black);
    line-height: 1;
  }
  .hkpi-unit {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #888;
    letter-spacing: 0.05em;
  }
  .hkpi-trend {
    font-family: var(--font-mono);
    font-size: 14px;
    margin-left: 6px;
  }
  .hkpi-trend.up { color: var(--hot-pink); }
  .hkpi-trend.down { color: #0099B3; }
  .hkpi-trend.stable { color: #ccc; }
  .hkpi-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
  }
  .hkpi-interp {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: #555;
  }

  /* ─── Collapsible All Indices Toggle ─────────────────────── */
  .all-indices-toggle {
    margin-top: 12px;
  }
  .all-indices-toggle summary.indices-toggle-btn {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    cursor: pointer;
    padding: 8px 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .all-indices-toggle summary.indices-toggle-btn::-webkit-details-marker { display: none; }
  .all-indices-toggle summary.indices-toggle-btn::before {
    content: '+ ';
    font-family: var(--font-mono);
  }
  .all-indices-toggle[open] summary.indices-toggle-btn::before {
    content: '- ';
  }
  .all-indices-toggle .scoreboard-grid {
    margin-top: 12px;
  }

  /* ─── Deep Analysis (Zone 6) — always visible ─────────────── */
  .deep-analysis-section {
    margin-top: 32px;
    border-top: 1px solid var(--card-border);
    padding-top: 24px;
  }
  .deep-analysis-header {
    margin-bottom: 20px;
  }
  .deep-analysis-content {
    padding-top: 0;
  }

  /* ─── Briefing Expand Toggle ──────────────────────────────── */
  .briefing-expand {
    margin-top: 4px;
  }
  .briefing-expand-toggle {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hot-pink);
    cursor: pointer;
    list-style: none;
    padding: 8px 0;
  }
  .briefing-expand-toggle::-webkit-details-marker { display: none; }
  .briefing-expand-toggle::before {
    content: '\25B8 ';
  }
  .briefing-expand[open] > .briefing-expand-toggle::before {
    content: '\25BE ';
  }
  .briefing-expand[open] > .briefing-expand-toggle {
    margin-bottom: 12px;
  }

  /* ─── Spike Overflow Toggle ──────────────────────────────── */
  .spike-overflow {
    margin-top: 8px;
  }
  .spike-overflow-toggle {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #888;
    cursor: pointer;
    list-style: none;
    padding: 8px 0;
  }
  .spike-overflow-toggle::-webkit-details-marker { display: none; }
  .spike-overflow-toggle::before {
    content: '\25B8 ';
  }
  .spike-overflow[open] > .spike-overflow-toggle::before {
    content: '\25BE ';
  }

  /* ─── Community Questions Inactive Toggle ────────────────── */
  .cq-inactive-toggle {
    margin-top: 8px;
  }
  .cq-inactive-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #aaa;
    cursor: pointer;
    list-style: none;
    padding: 8px 0;
  }
  .cq-inactive-btn::-webkit-details-marker { display: none; }
  .cq-inactive-btn::before {
    content: '\25B8 ';
  }
  .cq-inactive-toggle[open] > .cq-inactive-btn::before {
    content: '\25BE ';
  }

  /* ─── Momentum Cards Toggle ──────────────────────────────── */
  .momentum-cards-toggle {
    margin-top: 12px;
  }
  .momentum-cards-toggle > .theme-cards {
    display: none;
  }
  .momentum-cards-toggle[open] > .theme-cards {
    display: grid;
  }
  .momentum-toggle-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #888;
    cursor: pointer;
    list-style: none;
    padding: 8px 0;
  }
  .momentum-toggle-btn::-webkit-details-marker { display: none; }
  .momentum-toggle-btn::before {
    content: '\25B8 ';
  }
  .momentum-cards-toggle[open] > .momentum-toggle-btn::before {
    content: '\25BE ';
  }
  .momentum-cards-toggle[open] > .momentum-toggle-btn {
    margin-bottom: 12px;
  }

  /* ─── Pulse: Spike Alerts ──────────────────────────────── */
  .spike-alerts-section { margin-bottom: 24px; }
  .spike-alerts {
    display: grid;
    gap: 10px;
  }
  .spike-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #FFF5F0;
    border: 1px solid rgba(255,107,43,0.15);
    border-left: 4px solid var(--orange);
    border-radius: 6px;
    padding: 14px 18px;
    transition: transform 0.15s;
  }
  .spike-card:hover { transform: translateX(2px); }
  .spike-ratio {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--orange);
    line-height: 1;
    flex-shrink: 0;
    min-width: 56px;
    text-align: center;
  }
  .spike-ratio span {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #999;
    display: block;
    margin-top: 2px;
    letter-spacing: 0.05em;
  }
  .spike-info { flex: 1; min-width: 0; }
  .spike-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.35;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .spike-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
  }
  .spike-meta .pink { color: var(--hot-pink); }

  /* ─── Pulse: Sentiment Sparkline Cards ─────────────────── */
  .sparkline-row { margin-bottom: 24px; }
  .sparkline-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .sparkline-card {
    background: var(--gray-light);
    border-radius: 8px;
    padding: 14px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .sparkline-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
  }
  .sparkline-card[data-sentiment="Positive"]::before { background: #22C55E; }
  .sparkline-card[data-sentiment="Negative"]::before { background: var(--hot-pink); }
  .sparkline-card[data-sentiment="Neutral"]::before { background: #999; }
  .sparkline-card[data-sentiment="Anxious"]::before { background: var(--orange); }
  .sparkline-card[data-sentiment="Confused"]::before { background: var(--yellow); }
  .sparkline-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 6px;
  }
  .sparkline-value {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--black);
    line-height: 1;
    margin-bottom: 6px;
  }
  .sparkline-svg {
    width: 100%;
    height: 24px;
    display: block;
  }
  .sparkline-svg polyline {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ─── Landscape: Treemap ───────────────────────────────── */
  .landscape-section { margin-bottom: 16px; }
  .treemap-container {
    display: grid;
    gap: 3px;
    min-height: 280px;
  }
  .treemap-cell {
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    min-height: 60px;
    cursor: default;
    transition: opacity 0.15s;
  }
  .treemap-cell:hover { opacity: 0.88; }
  .treemap-cell .tm-label {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--white);
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }
  .treemap-cell .tm-count {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.08em;
    margin-top: 2px;
  }
  .treemap-cell .tm-big {
    font-family: var(--font-display);
    font-size: 32px;
    color: rgba(255,255,255,0.25);
    position: absolute;
    top: 8px;
    right: 12px;
    line-height: 1;
  }

  /* ─── Landscape: Referral Table ────────────────────────── */
  .referral-table-wrap { overflow-x: auto; }
  .referral-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 13px;
  }
  .referral-table th {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    padding: 10px 14px;
    border-bottom: 2px solid var(--card-border);
    text-align: left;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  .referral-table th:hover { color: var(--black); }
  .referral-table th.sort-asc::after { content: ' \u25B2'; font-size: 8px; }
  .referral-table th.sort-desc::after { content: ' \u25BC'; font-size: 8px; }
  .referral-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--card-border);
    color: #333;
  }
  .referral-table tr:hover td { background: rgba(0,212,232,0.04); }
  .referral-table .sub-name {
    font-weight: 600;
    color: var(--black);
  }
  .referral-table .eng-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    background: var(--cyan);
    margin-right: 8px;
    vertical-align: middle;
  }
  .referral-table .ratio-pill {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,45,120,0.08);
    color: var(--hot-pink);
  }

  /* ─── Landscape: Lollipop Chart ────────────────────────── */
  .lollipop-chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 0;
  }
  .lollipop-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .lollipop-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    min-width: 150px;
    text-align: right;
    flex-shrink: 0;
  }
  .lollipop-track {
    flex: 1;
    height: 2px;
    background: #E5E5E5;
    position: relative;
    border-radius: 1px;
  }
  .lollipop-fill {
    height: 2px;
    background: var(--hot-pink);
    border-radius: 1px;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.6s ease;
  }
  .lollipop-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--hot-pink);
    border: 2px solid var(--white);
    box-shadow: 0 1px 4px rgba(255,45,120,0.3);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.6s ease;
  }
  .lollipop-value {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #555;
    min-width: 50px;
    flex-shrink: 0;
  }

  /* ─── Strategy: Choropleth (CSS grid regions) ──────────── */
  .strategy-section { margin-bottom: 16px; }
  .choropleth-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    min-height: 200px;
  }
  .choropleth-cell {
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    position: relative;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
  }
  .choropleth-cell:hover { transform: scale(1.02); }
  .choropleth-cell .choro-region {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.04em;
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }
  .choropleth-cell .choro-count {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--white);
    line-height: 1;
    margin: 4px 0;
  }
  .choropleth-cell .choro-pct {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.8);
  }

  /* ─── Strategy: Language Evolution ─────────────────────── */
  .language-evolution {
    min-height: 200px;
    padding: 20px;
    background: var(--gray-light);
    border-radius: 8px;
  }
  .lang-evo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
  }
  .lang-evo-card {
    background: var(--white);
    border-radius: 6px;
    padding: 12px 14px;
    border-left: 3px solid var(--cyan);
  }
  .lang-evo-card:nth-child(2) { border-left-color: var(--hot-pink); }
  .lang-evo-card:nth-child(3) { border-left-color: var(--yellow); }
  .lang-evo-card:nth-child(4) { border-left-color: var(--orange); }
  .lang-evo-keyword {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 4px;
  }
  .lang-evo-context {
    font-family: var(--font-mono);
    font-size: 9px;
    color: #888;
    letter-spacing: 0.05em;
  }

  /* ─── Strategy: Sankey (CSS-based flow) ────────────────── */
  .sankey-container {
    min-height: 200px;
    padding: 24px;
    background: var(--gray-light);
    border-radius: 8px;
  }
  .sankey-flow {
    display: flex;
    gap: 20px;
    align-items: stretch;
    min-height: 200px;
  }
  .sankey-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .sankey-column-label {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    text-align: center;
    margin-bottom: 8px;
  }
  .sankey-node {
    border-radius: 4px;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    text-align: center;
    position: relative;
  }
  .sankey-connector {
    flex: 0 0 80px;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 200px;
  }
  .sankey-connector svg { width: 100%; height: 100%; }

  /* ─── View-specific responsive ─────────────────────────── */
  @media (max-width: 900px) {
    .view-btn .view-sub { display: none; }
    .sparkline-cards { grid-template-columns: repeat(3, 1fr); }
    .choropleth-container { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .view-btn { padding: 12px 8px 10px; }
    .view-btn .view-icon { font-size: 14px; }
    .view-btn .view-label { font-size: 12px; }
    .sparkline-cards { grid-template-columns: repeat(2, 1fr); }
    .spike-card { flex-direction: column; align-items: flex-start; gap: 8px; }
    .spike-ratio { min-width: auto; }
    .spike-title { white-space: normal; }
    .lollipop-label { min-width: 100px; font-size: 11px; }
    .choropleth-container { grid-template-columns: 1fr 1fr; }
    .referral-table { font-size: 11px; }
    .referral-table th, .referral-table td { padding: 8px 10px; }
    .treemap-cell .tm-label { font-size: 12px; }
    .treemap-cell .tm-big { font-size: 22px; }
  }

  /* ═══════════════════════════════════════════
     V2 SPEC ADDITIONS
     ═══════════════════════════════════════════ */

  /* Volume Anomaly Banner */
  .volume-anomaly-banner {
    background: #FFF8F0;
    border: 1px solid rgba(232, 88, 32, 0.2);
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 20px;
  }
  .anomaly-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Card cadence label */
  .card-cadence {
    display: inline-block;
    margin-left: auto;
  }
  .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Design philosophy: confidence dot */
  .confidence-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
  }
  .confidence-high { background: #00B86B; }
  .confidence-medium { background: #FFD600; }
  .confidence-low { background: #E85820; }

  /* Design philosophy: action trigger tags */
  .action-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    font-family: 'Space Mono', monospace;
  }
  .action-respond {
    background: #FFE5EC;
    color: #E85820;
  }
  .action-monitor {
    background: #FFF8E5;
    color: #B8860B;
  }
  .action-watch {
    background: #F0F4F8;
    color: #888;
  }

  /* ─── Community Word Map ─────────────────────────────── */
  .word-map-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 6px 14px;
    padding: 20px 10px;
    min-height: 120px;
  }
  .word-map-term {
    font-family: var(--font-body);
    font-weight: 600;
    cursor: default;
    transition: transform 0.15s ease, opacity 0.15s ease;
    line-height: 1.4;
  }
  .word-map-term:hover {
    transform: scale(1.12);
    opacity: 0.85;
  }
  .wm-phrase {
    font-style: italic;
  }

  /* Design philosophy: absence is data */
  .absence-notice {
    background: #FAFBFC;
    border: 1px dashed #DDE3EA;
    border-radius: 6px;
    padding: 16px 20px;
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    font-family: 'DM Sans', sans-serif;
  }
  .absence-icon {
    font-size: 16px;
    margin-right: 6px;
    vertical-align: middle;
  }

  /* ═══════════════════════════════════════════
     V3 GAP ANALYSIS FIXES
     ═══════════════════════════════════════════ */

  /* ─── What Changed This Week ──────────────────────────── */
  .what-changed-section {
    margin-bottom: 24px;
  }
  .what-changed-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
  }
  .what-changed-card {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: transform 0.12s ease;
  }
  .what-changed-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .wc-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .wc-content {
    flex: 1;
    min-width: 0;
  }
  .wc-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .wc-detail {
    font-family: var(--font-body);
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* ─── Community Questions Card ────────────────────────────── */
  .shame-gap-promoted {
    border-left: 3px solid var(--blue);
    margin-bottom: 20px;
  }
  .shame-gap-promoted .card-header {
    background: linear-gradient(90deg, rgba(26,53,196,0.04) 0%, transparent 100%);
  }

  /* ─── Discussion Card Links ───────────────────────────── */
  .disc-link {
    display: block;
    text-decoration: none;
    color: var(--black);
    transition: color 0.15s ease;
  }
  .disc-link:hover {
    color: var(--hot-pink);
    text-decoration: none;
  }
  .disc-link-icon {
    font-size: 12px;
    color: #ccc;
    margin-left: 4px;
    transition: color 0.15s ease;
  }
  .disc-link:hover .disc-link-icon {
    color: var(--hot-pink);
  }

  /* ─── Mobile: What Changed ──────────────────────────── */
  @media (max-width: 600px) {
    .what-changed-cards {
      grid-template-columns: 1fr;
    }
  }