/* ==========================================================================
       1. DESIGN SYSTEM TOKENS (Three-Layer Architecture: Primitive -> Semantic -> Component)
       Archetype: Quartr / Linear Editorial Bento × Wall Street Modern Editorial
       ========================================================================== */
    :root {
      /* Layer 1: Primitive Tokens */
      --zinc-25: #FCFCFD;
      --zinc-50: #FAFAFA;
      --zinc-100: #F4F4F5;
      --zinc-150: #ECECEE;
      --zinc-200: #E4E4E7;
      --zinc-300: #D4D4D8;
      --zinc-400: #A1A1AA;
      --zinc-500: #71717A;
      --zinc-600: #52525B;
      --zinc-700: #3F3F46;
      --zinc-800: #27272A;
      --zinc-900: #18181B;
      --zinc-950: #09090B;

      --emerald-50: #ECFDF5;
      --emerald-100: #D1FAE5;
      --emerald-600: #059669;
      --emerald-700: #047857;

      --rose-50: #FFF1F2;
      --rose-100: #FFE4E6;
      --rose-600: #E11D48;
      --rose-700: #BE123C;

      --amber-50: #FFFBEB;
      --amber-600: #D97706;
      --indigo-50: #EEF2FF;
      --indigo-600: #4F46E5;

      /* Layer 2: Semantic Tokens */
      --bg-canvas: var(--zinc-50);
      --bg-surface: #FFFFFF;
      --bg-subtle: var(--zinc-100);
      --bg-elevated: var(--zinc-25);
      --text-primary: var(--zinc-950);
      --text-secondary: var(--zinc-700);
      --text-muted: var(--zinc-500);
      --border-hairline: var(--zinc-200);
      --border-strong: var(--zinc-900);
      --signal-bull: var(--emerald-600);
      --signal-bull-bg: var(--emerald-50);
      --signal-bear: var(--rose-600);
      --signal-bear-bg: var(--rose-50);
      --signal-neutral: var(--amber-600);
      --accent-brand: var(--indigo-600);

      /* Layer 3: Typography Tokens (Wall Street Modern Editorial) */
      --font-display: 'Instrument Serif', 'Newsreader', 'Noto Serif SC', Georgia, serif;
      --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --shadow-bento: 0 1px 2px 0 rgba(9, 9, 11, 0.03), 0 1px 3px 0 rgba(9, 9, 11, 0.02);
      --shadow-hover: 0 4px 12px -2px rgba(9, 9, 11, 0.06);
    }

    /* Dark Mode Support (Toggleable via [data-theme="dark"]) */
    [data-theme="dark"] {
      --bg-canvas: #090A0F;
      --bg-surface: #11131A;
      --bg-subtle: #181B24;
      --bg-elevated: #141720;
      --text-primary: #F4F4F6;
      --text-secondary: #CBD5E1;
      --text-muted: #94A3B8;
      --border-hairline: #232734;
      --border-strong: #F4F4F6;
      --signal-bull: #10B981;
      --signal-bull-bg: rgba(16, 185, 129, 0.12);
      --signal-bear: #F43F5E;
      --signal-bear-bg: rgba(244, 63, 94, 0.12);
      --shadow-bento: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    }

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

    html {
      scroll-behavior: smooth;
      font-size: 14px;
    }

    body {
      background-color: var(--bg-canvas);
      background-image: radial-gradient(var(--border-hairline) 0.75px, transparent 0.75px);
      background-size: 20px 20px;
      color: var(--text-primary);
      font-family: var(--font-sans);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a {
      color: var(--text-primary);
      text-decoration: none;
      transition: color 0.15s ease;
    }
    a:hover {
      color: var(--accent-brand);
    }

    /* ==========================================================================
       2. STICKY TOP COMMAND BAR & LIVE MARKET PULSE STRIP
       ========================================================================== */
    .top-command-bar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(250, 250, 250, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-hairline);
    }
    [data-theme="dark"] .top-command-bar {
      background: rgba(9, 10, 15, 0.88);
    }
    .command-inner {
      max-width: 1760px;
      margin: 0 auto;
      padding: 8px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .brand-cluster {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .brand-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--text-primary);
      color: var(--bg-surface);
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .brand-title {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text-primary);
    }
    .brand-sep {
      color: var(--zinc-300);
    }
    .brand-meta {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 0.02em;
    }
    .pulse-strip {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      padding: 2px 0;
    }
    .pulse-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 9px;
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-radius: 6px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      box-shadow: var(--shadow-bento);
    }
    .pulse-sym {
      font-weight: 600;
      color: var(--text-primary);
    }
    .pulse-px {
      color: var(--text-secondary);
    }
    .theme-btn {
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid var(--border-hairline);
      background: var(--bg-surface);
      color: var(--text-secondary);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      transition: all 0.15s ease;
    }
    .theme-btn:hover {
      border-color: var(--text-primary);
      color: var(--text-primary);
    }

    /* ==========================================================================
       3. EDITORIAL MASTHEAD HEADER
       ========================================================================== */
    .editorial-header {
      max-width: 1760px;
      margin: 20px auto 0;
      padding: 0 24px;
    }
    .masthead-bento {
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-top: 3px solid var(--border-strong);
      border-radius: var(--radius-lg);
      padding: 24px 30px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 24px;
      box-shadow: var(--shadow-bento);
    }
    .masthead-eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent-brand);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .masthead-h1 {
      font-family: var(--font-display);
      font-size: 38px;
      font-weight: 600;
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }
    .masthead-subtitle {
      margin-top: 8px;
      font-size: 14px;
      color: var(--text-secondary);
      max-width: 880px;
    }
    .masthead-right {
      text-align: right;
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--text-muted);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .regime-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: flex-end;
      padding: 5px 11px;
      border-radius: 999px;
      background: var(--amber-50);
      border: 1px solid #FDE68A;
      color: var(--amber-600);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    /* ==========================================================================
       4. THREE-COLUMN INSTITUTIONAL WORKBENCH LAYOUT
          Left: 210px Sticky Chapter Nav
          Center: Fluid Editorial Bento Stream
          Right: 310px Sticky Quantitative Telemetry Panel
       ========================================================================== */
    .workbench-grid {
      max-width: 1760px;
      margin: 20px auto 60px;
      padding: 0 24px;
      display: grid;
      grid-template-columns: 215px minmax(0, 1fr) 315px;
      gap: 22px;
      align-items: start;
    }

    /* Left Sticky Navigation Rail */
    .left-nav-rail {
      position: sticky;
      top: 64px;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-md);
      padding: 14px 12px;
      box-shadow: var(--shadow-bento);
    }
    .nav-rail-title {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      padding: 0 8px 8px;
      border-bottom: 1px solid var(--border-hairline);
      margin-bottom: 8px;
    }
    .nav-group-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 10px 8px 4px;
    }
    .nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .nav-list a {
      display: flex;
      align-items: baseline;
      gap: 7px;
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--text-secondary);
      transition: all 0.12s ease;
    }
    .nav-list a:hover {
      background: var(--bg-subtle);
      color: var(--text-primary);
    }
    .nav-list a.active {
      background: var(--text-primary);
      color: var(--bg-surface);
      font-weight: 600;
    }
    .nav-num {
      font-family: var(--font-mono);
      font-size: 10.5px;
      opacity: 0.7;
      min-width: 20px;
    }

    /* Center Column: Bento Research Stream */
    .center-stream {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
    }
    .dim-banner {
      margin-top: 10px;
      padding: 6px 12px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-hairline);
      border-left: 3px solid var(--text-primary);
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--text-secondary);
      text-transform: uppercase;
    }

    main section {
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-md);
      padding: 22px 26px;
      box-shadow: var(--shadow-bento);
      scroll-margin-top: 72px;
    }
    main section#s0 {
      border-top: 2.5px solid var(--text-primary);
    }

    /* Headings inside Bento Sections */
    main h2 {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      padding-bottom: 10px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--border-hairline);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    main h3 {
      font-family: var(--font-sans);
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      margin: 18px 0 10px;
      padding-left: 10px;
      border-left: 2.5px solid var(--accent-brand);
    }
    main p {
      font-size: 13.8px;
      color: var(--text-secondary);
      margin-bottom: 10px;
    }
    main p strong {
      color: var(--text-primary);
      font-weight: 600;
    }
    main ul, main ol {
      padding-left: 20px;
      margin: 8px 0 12px;
      color: var(--text-secondary);
      font-size: 13.5px;
    }
    main li {
      margin-bottom: 6px;
    }
    main li strong {
      color: var(--text-primary);
    }
    .note {
      margin-top: 10px;
      padding: 10px 14px;
      background: var(--bg-subtle);
      border-radius: var(--radius-sm);
      border-left: 2px solid var(--zinc-400);
      font-size: 12.2px;
      color: var(--text-muted);
    }

    /* KPI Bento Strip inside Section 0 */
    .kpi-bento-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 16px;
    }
    .kpi-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
    }
    .kpi-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      text-transform: uppercase;
    }
    .kpi-value {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      margin: 4px 0 3px;
      font-variant-numeric: tabular-nums;
    }
    .kpi-unit {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
    }
    .kpi-sub {
      font-size: 11.5px;
      color: var(--text-secondary);
    }

    /* News Bento Grid (2-Column Modular Cards) */
    .news-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 12px;
    }
    .news-item {
      background: var(--bg-elevated);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .news-item:hover {
      border-color: var(--zinc-400);
      box-shadow: var(--shadow-hover);
    }
    .news-title {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--text-primary);
    }
    .news-title:hover {
      color: var(--accent-brand);
    }
    .news-meta {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--accent-brand);
      font-weight: 500;
    }
    .news-summary {
      font-size: 12.6px;
      color: var(--text-secondary);
      line-height: 1.55;
    }

    /* ==========================================================================
       5. HIGH-DENSITY FINANCIAL TABLES & TABULAR MONOSPACE SYSTEM
       ========================================================================== */
    .bento-table-card {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-sm);
      margin: 10px 0 14px;
      background: var(--bg-surface);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.6px;
      font-variant-numeric: tabular-nums;
    }
    thead th {
      background: var(--bg-subtle);
      color: var(--text-secondary);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      text-align: left;
      padding: 9px 12px;
      border-bottom: 1px solid var(--border-hairline);
      white-space: nowrap;
    }
    tbody td {
      padding: 9px 12px;
      border-bottom: 1px solid var(--border-hairline);
      color: var(--text-secondary);
      vertical-align: middle;
    }
    tbody tr:last-child td {
      border-bottom: none;
    }
    tbody tr:hover td {
      background: var(--bg-elevated);
    }
    tbody td:first-child {
      color: var(--text-primary);
      font-weight: 500;
    }
    code {
      font-family: var(--font-mono);
      font-size: 11.5px;
      padding: 2px 5px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-hairline);
      border-radius: 4px;
      color: var(--text-primary);
    }

    /* Semantic Financial Pills & Colors */
    .pos, .badge-pos {
      color: var(--signal-bull);
      font-family: var(--font-mono);
      font-weight: 600;
    }
    .neg, .badge-neg {
      color: var(--signal-bear);
      font-family: var(--font-mono);
      font-weight: 600;
    }
    span.pos, span.neg {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 11.8px;
    }
    span.pos {
      background: var(--signal-bull-bg);
    }
    span.neg {
      background: var(--signal-bear-bg);
    }

    /* Inline Micro-Visuals (Bento Precision Style) */
    .micro-bar-wrap {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 12px;
    }
    .micro-track {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 6px;
      background: var(--zinc-200);
      border-radius: 3px;
      overflow: hidden;
    }
    .micro-track .midline {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--zinc-600);
      z-index: 2;
    }
    .micro-fill {
      height: 100%;
      display: block;
      border-radius: 3px;
    }
    .stack-bar {
      display: inline-flex;
      width: 84px;
      height: 7px;
      border-radius: 4px;
      background: var(--zinc-200);
      overflow: hidden;
      vertical-align: middle;
      margin-right: 6px;
    }
    .stack-cut { background: var(--signal-bull); height: 100%; }
    .stack-hold { background: #64748B; height: 100%; }
    .stack-hike { background: var(--signal-bear); height: 100%; }

    .div-bar-box {
      display: inline-flex;
      align-items: center;
      width: 64px;
      height: 7px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-hairline);
      border-radius: 3px;
      position: relative;
      vertical-align: middle;
      margin-left: 6px;
    }
    .div-bar-box::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--zinc-400);
    }
    .div-bar-pos {
      position: absolute;
      left: 50%;
      top: 1px;
      bottom: 1px;
      background: var(--signal-bull);
      border-radius: 0 2px 2px 0;
    }
    .div-bar-neg {
      position: absolute;
      right: 50%;
      top: 1px;
      bottom: 1px;
      background: var(--signal-bear);
      border-radius: 2px 0 0 2px;
    }

    .svg-chart-box {
      margin: 12px 0 16px;
      padding: 14px 18px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-sm);
    }
    .svg-chart-title {
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    /* Conclusion Grid in Section 12 */
    .conclusion-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin: 12px 0 16px;
    }
    .conclusion-box {
      background: var(--bg-elevated);
      border: 1px solid var(--border-hairline);
      border-top: 2px solid var(--accent-brand);
      border-radius: var(--radius-sm);
      padding: 16px 18px;
    }
    .conclusion-box h4 {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    /* ==========================================================================
       6. RIGHT STICKY QUANTITATIVE TELEMETRY PANEL (315px)
       ========================================================================== */
    .right-telemetry-rail {
      position: sticky;
      top: 64px;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .telemetry-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-md);
      padding: 16px;
      box-shadow: var(--shadow-bento);
    }
    .telemetry-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--border-hairline);
    }
    .telemetry-title {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-primary);
    }
    .telemetry-tag {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-muted);
      background: var(--bg-subtle);
      padding: 2px 6px;
      border-radius: 4px;
    }

    /* 3-Stage Market Temperature Gauges */
    .temp-item {
      margin-bottom: 14px;
    }
    .temp-item:last-child {
      margin-bottom: 0;
    }
    .temp-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .temp-name {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .temp-val {
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .temp-bar {
      width: 100%;
      height: 7px;
      background: var(--bg-subtle);
      border-radius: 999px;
      overflow: hidden;
      margin-bottom: 4px;
    }
    .temp-fill {
      height: 100%;
      border-radius: 999px;
    }
    .temp-caption {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--text-muted);
    }

    /* Telemetry KV Rows */
    .kv-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .kv-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px dashed var(--border-hairline);
      font-size: 12.2px;
    }
    .kv-row:last-child {
      border-bottom: none;
    }
    .kv-key {
      font-weight: 500;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .kv-sym {
      font-family: var(--font-mono);
      font-weight: 600;
      color: var(--text-primary);
    }
    .kv-val {
      font-family: var(--font-mono);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--text-primary);
    }

    footer {
      max-width: 1760px;
      margin: 0 auto 40px;
      padding: 20px 24px 0;
      border-top: 1px solid var(--border-hairline);
      display: flex;
      justify-content: space-between;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
    }

    /* Responsive Breakpoints */
    @media (max-width: 1380px) {
      .workbench-grid {
        grid-template-columns: 195px minmax(0, 1fr);
      }
      .right-telemetry-rail {
        grid-column: 1 / -1;
        position: static;
        max-height: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 960px) {
      .workbench-grid {
        grid-template-columns: 1fr;
      }
      .left-nav-rail {
        position: static;
        max-height: none;
      }
      .kpi-bento-grid, .news-list, .conclusion-grid, .right-telemetry-rail {
        grid-template-columns: 1fr;
      }
      .masthead-bento {
        grid-template-columns: 1fr;
      }
      .masthead-right {
        text-align: left;
      }
      .regime-badge {
        align-self: flex-start;
      }
    }
  
    .up { color: var(--signal-bull); font-family: var(--font-mono); font-weight: 600; background: var(--signal-bull-bg); padding: 1px 6px; border-radius: 4px; font-size: 11.8px; display: inline-block; }
    .down { color: var(--signal-bear); font-family: var(--font-mono); font-weight: 600; background: var(--signal-bear-bg); padding: 1px 6px; border-radius: 4px; font-size: 11.8px; display: inline-block; }
    .small { margin-top: 10px; padding: 9px 13px; background: var(--bg-subtle); border-radius: var(--radius-sm); border-left: 2px solid var(--zinc-400); font-size: 12px; color: var(--text-muted); }
    .news-item > a { font-family: var(--font-sans); font-size: 14.2px; font-weight: 600; line-height: 1.42; color: var(--text-primary); display: block; }
    .news-item > a:hover { color: var(--accent-brand); }
    .news-item > p { font-size: 12.6px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
    tbody td:not(:first-child):not(:last-child) { font-family: var(--font-mono); font-size: 12.2px; }
    
  
    /* Section 5: Clean Heatmap Tier Pills & Uniform Compact Table Layout */
    .tier-cell {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      white-space: nowrap;
    }
    .tier-pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 5px;
      font-family: var(--font-mono);
      font-size: 12.2px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .tier-strong {
      background: #D1FAE5;
      color: #065F46;
      border: 1px solid #A7F3D0;
    }
    .tier-mid {
      background: #F4F4F5;
      color: #27272A;
      border: 1px solid #D4D4D8;
    }
    .tier-weak {
      background: #FFE4E6;
      color: #9F1239;
      border: 1px solid #FECDD3;
    }
    [data-theme="dark"] .tier-strong { background: rgba(16,185,129,0.18); color: #34D399; border-color: rgba(16,185,129,0.35); }
    [data-theme="dark"] .tier-mid { background: #1E2230; color: #E2E8F0; border-color: #334155; }
    [data-theme="dark"] .tier-weak { background: rgba(244,63,94,0.18); color: #FB7185; border-color: rgba(244,63,94,0.35); }
    .tier-sub {
      font-family: var(--font-mono);
      font-size: 10.8px;
      color: var(--text-muted);
    }
    .status-chip {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 5px;
      font-size: 11.5px;
      font-weight: 600;
      white-space: nowrap;
      background: var(--bg-subtle);
      color: var(--text-secondary);
      border: 1px solid var(--border-hairline);
    }
    .breadth-takeaways {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 10px 0 16px;
    }
    .takeaway-item {
      background: var(--bg-elevated);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-sm);
      padding: 10px 13px;
      font-size: 12.2px;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .takeaway-item strong {
      color: var(--text-primary);
      display: block;
      margin-bottom: 3px;
      font-size: 12.4px;
    }

    /* Section 8: High-Contrast Earnings Beat/Miss Badges */
    .earn-metric-cell {
      display: flex;
      flex-direction: column;
      gap: 4px;
      white-space: nowrap;
    }
    .earn-top-line {
      font-family: var(--font-mono);
      font-size: 12.2px;
      color: var(--text-primary);
    }
    .earn-est-muted {
      color: var(--text-muted);
      font-size: 11.2px;
      margin-left: 4px;
    }
    .surprise-badge {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 5px;
      font-family: var(--font-mono);
      font-size: 11.2px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }
    .surprise-beat-strong {
      background: #059669;
      color: #FFFFFF;
      box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25);
    }
    .surprise-beat {
      background: #ECFDF5;
      color: #047857;
      border: 1px solid #6EE7B7;
    }
    .surprise-miss {
      background: #FFF1F2;
      color: #BE123C;
      border: 1px solid #FDA4AF;
    }
    [data-theme="dark"] .surprise-beat { background: rgba(16,185,129,0.16); color: #34D399; border-color: rgba(16,185,129,0.4); }
    [data-theme="dark"] .surprise-miss { background: rgba(244,63,94,0.16); color: #FB7185; border-color: rgba(244,63,94,0.4); }
    .verdict-tag {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      margin-bottom: 3px;
    }
    .tag-double-beat {
      background: #ECFDF5;
      color: #047857;
      border: 1px solid #A7F3D0;
    }
    .tag-mixed {
      background: #FFFBEB;
      color: #B45309;
      border: 1px solid #FDE68A;
    }
    
  
    /* ==========================================================================
       8. INTERACTIVE EXPANDABLE ROW CHART DRAWERS & BENTO VISUAL CARDS (v4.2)
       ========================================================================== */
    .chart-bento-grid-2 {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 14px;
      margin: 12px 0 16px;
    }
    .chart-bento-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border-hairline);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
    }
    .chart-bento-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .chart-bento-title {
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .chart-bento-sub {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
    }
    .chart-tabs {
      display: inline-flex;
      background: var(--bg-subtle);
      border: 1px solid var(--border-hairline);
      border-radius: 6px;
      padding: 2px;
      gap: 2px;
    }
    .chart-tab-btn {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      padding: 4px 9px;
      border-radius: 4px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .chart-tab-btn:hover {
      color: var(--text-primary);
    }
    .chart-tab-btn.active {
      background: var(--bg-surface);
      color: var(--accent-brand);
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    }

    /* GICS 11 Diverging Bar Chart inside Bento Card */
    .sector-bar-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 6px;
    }
    .sector-bar-row {
      display: grid;
      grid-template-columns: 120px 1fr 68px;
      align-items: center;
      gap: 10px;
      font-family: var(--font-mono);
      font-size: 11.8px;
    }
    .sector-bar-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--text-primary);
      font-weight: 600;
      padding-right: 4px;
    }
    .sector-bar-label span.cn {
      font-family: var(--font-sans);
      font-weight: 500;
      color: var(--text-secondary);
      font-size: 12px;
    }
    .sector-bar-track {
      position: relative;
      height: 16px;
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-radius: 4px;
      overflow: hidden;
    }
    .sector-bar-zero {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--zinc-400);
      z-index: 2;
    }
    .sector-bar-fill {
      position: absolute;
      top: 2px;
      bottom: 2px;
      border-radius: 2px;
      transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1), left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .sector-bar-val {
      text-align: right;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    /* Interactive Table Row & Chart Drawer System */
    .interactive-hint-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      padding: 9px 14px;
      background: var(--accent-brand-soft);
      border: 1px solid rgba(79, 70, 229, 0.22);
      border-radius: var(--radius-sm);
      margin: 8px 0 10px;
      font-size: 12.2px;
      color: var(--text-primary);
    }
    .interactive-hint-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
    }
    .interactive-hint-pills {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }
    .sym-quick-pill {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid var(--border-hairline);
      background: var(--bg-surface);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .sym-quick-pill:hover, .sym-quick-pill.active {
      border-color: var(--accent-brand);
      color: var(--accent-brand);
      background: var(--bg-surface);
      box-shadow: 0 1px 2px rgba(79, 70, 229, 0.12);
    }

    tr.tech-row-trigger {
      cursor: pointer;
      transition: background 0.15s ease;
    }
    tr.tech-row-trigger:hover td {
      background: var(--accent-brand-soft) !important;
    }
    tr.tech-row-trigger.expanded td {
      background: var(--bg-subtle);
      border-bottom-color: transparent;
    }
    .ticker-trigger-cell {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
    }
    .drawer-caret-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 4px;
      color: var(--accent-brand);
      background: var(--accent-brand-soft);
      border: 1px solid rgba(79, 70, 229, 0.22);
      transition: all 0.15s ease;
    }
    tr.tech-row-trigger.expanded .drawer-caret-badge {
      background: var(--accent-brand);
      color: #FFFFFF;
    }
    .drawer-caret {
      display: inline-block;
      transition: transform 0.18s ease;
    }
    tr.tech-row-trigger.expanded .drawer-caret {
      transform: rotate(180deg);
    }

    tr.tech-drawer-row {
      display: none;
    }
    tr.tech-drawer-row.open {
      display: table-row;
    }
    tr.tech-drawer-row > td {
      padding: 0 !important;
      background: var(--bg-elevated) !important;
      border-bottom: 2px solid var(--border-strong) !important;
    }
    .tech-drawer-shell {
      padding: 16px 20px 18px;
      background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-surface) 100%);
      border-top: 1px dashed var(--border-strong);
    }
    .tech-drawer-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-hairline);
    }
    .tech-drawer-title {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
    }
    .tech-drawer-sym {
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .tech-drawer-name {
      font-size: 12.5px;
      color: var(--text-secondary);
      font-weight: 500;
    }
    .tech-legend-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-family: var(--font-mono);
      font-size: 11.2px;
    }
    .legend-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: 4px;
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      color: var(--text-secondary);
    }
    .legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }
    .legend-line {
      width: 12px;
      height: 2.5px;
      display: inline-block;
      border-radius: 1px;
    }
    .tech-hover-hud {
      font-family: var(--font-mono);
      font-size: 11.2px;
      color: var(--text-secondary);
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-radius: 4px;
      padding: 5px 10px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }
    @media (max-width: 960px) {
      .chart-bento-grid-2 {
        grid-template-columns: 1fr;
      }
    }