/* extracted from index.html head block (was L25-1355) */
    :root {
      /* TMA OFFICIAL brand from TMA Brand Guidelines.pdf.
         Medium Red is the parent. Light/Dark are accents. No gold, no warm tones. */
      --bg: #0b0b0d;
      --panel: #131316;
      --panel-strong: #1a1a1e;
      --panel-elev: #232328;
      --ink: #f5f5f7;
      --ink-soft: #b8b8bf;
      --muted: #8a8a92;
      --muted-strong: #b8b8bf;
      --line: rgba(255, 255, 255, 0.06);
      --line-strong: rgba(255, 255, 255, 0.12);
      --brand: #CC3737;
      --brand-light: #E53838;
      --brand-dark: #A01F1F;
      --teal: #4a8fa6;
      --good: #4caf80;
      --warn: #CC3737;
      --bad: #A01F1F;
      --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
      --radius: 6px;
      --radius-lg: 12px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(204, 55, 55, 0.08), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 30%, rgba(160, 31, 31, 0.06), transparent 60%),
        var(--bg);
      font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
      font-weight: 400;
      letter-spacing: -0.005em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    h1, h2, h3, h4 { font-family: "Montserrat", -apple-system, sans-serif; letter-spacing: -0.015em; }
    .editorial-italic { font-family: "IBM Plex Serif", Georgia, serif; font-style: italic; font-weight: 400; }

    .shell {
      max-width: 1480px;
      margin: 0 auto;
      padding: 26px 20px 64px;
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 44px 44px 40px;
      border-radius: var(--radius-lg);
      background: var(--panel);
      box-shadow: var(--shadow);
      color: var(--ink);
      border: 1px solid var(--line);
    }

    /* Editorial red half-circle, like the brand guide pages. */
    .hero::after {
      content: "";
      position: absolute;
      right: -120px;
      top: -80px;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      border: 36px solid var(--brand);
      opacity: 0.85;
      pointer-events: none;
    }
    /* Subtle diagonal vignette underneath, no extra colors. */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(204, 55, 55, 0.10) 0%, transparent 38%),
        linear-gradient(315deg, rgba(160, 31, 31, 0.08) 0%, transparent 50%);
      pointer-events: none;
    }

    .hero-mark {
      position: absolute;
      top: 36px;
      left: 44px;
      width: 32px;
      height: 32px;
      color: var(--brand);
      z-index: 2;
    }
    .hero-mark svg { width: 100%; height: 100%; display: block; }
    .hero .eyebrow { padding-left: 48px; position: relative; z-index: 2; }
    .hero h1 { position: relative; z-index: 2; font-weight: 600; letter-spacing: -0.025em; }
    .hero-grid { position: relative; z-index: 2; }

    .eyebrow {
      font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--brand);
      margin-bottom: 18px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.25fr 0.75fr;
      gap: 22px;
      align-items: end;
    }
    .hero-grid.hero-grid-single { grid-template-columns: 1fr; }
    h1.brand-wordmark {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 0.18em;
      font-size: clamp(2.6rem, 5vw, 4.5rem);
      line-height: 1;
      text-transform: uppercase;
    }

    h1 {
      margin: 0 0 10px;
      font-size: clamp(2.2rem, 4vw, 4.5rem);
      line-height: 0.94;
      max-width: 900px;
    }

    .hero-copy {
      margin: 0;
      max-width: 760px;
      font-size: 1.02rem;
      line-height: 1.55;
      color: var(--muted);
    }

    .hero-summary {
      display: grid;
      gap: 12px;
      align-self: stretch;
    }

    .summary-chip {
      padding: 14px 16px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--line);
    }

    .summary-chip strong {
      display: block;
      margin-bottom: 6px;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--gold);
    }

    .summary-chip span {
      color: var(--ink);
      line-height: 1.45;
      font-size: 0.95rem;
    }

    .metric-strip,
    .grid-two,
    .grid-three,
    .grid-four {
      display: grid;
      gap: 18px;
      margin-top: 22px;
    }

    .metric-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
    .grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
    .grid-two > *, .grid-three > *, .grid-four > * { height: 100%; }

    .card,
    .panel,
    .tech-panel {
      background: var(--panel);
      border-radius: var(--radius);
      border: 1px solid var(--line);
      box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 24px 48px rgba(0,0,0,0.35);
    }

    .card { padding: 22px; }
    .panel, .tech-panel { padding: 28px; }

    .metric-label {
      color: var(--muted);
      font-size: 0.74rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 12px;
      font-weight: 500;
    }

    .metric-value {
      font-family: "Montserrat", sans-serif;
      font-weight: 600;
      font-size: clamp(1.9rem, 2.2vw, 2.6rem);
      line-height: 1;
      margin-bottom: 10px;
      letter-spacing: -0.02em;
    }

    .metric-sub {
      color: var(--muted);
      font-size: 0.85rem;
      line-height: 1.45;
    }

    .section-title {
      margin: 0 0 8px;
      font-size: 1.35rem;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .section-copy {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 0.96rem;
      line-height: 1.45;
    }

    .funnel-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
    }

    .funnel-step {
      position: relative;
      padding: 18px;
      border-radius: 22px;
      background: var(--panel-strong);
      border: 1px solid var(--line);
    }

    .funnel-step::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -8px;
      width: 16px;
      height: 2px;
      background: rgba(229, 56, 56, 0.3);
      transform: translateY(-50%);
    }

    .funnel-step:last-child::after { display: none; }

    .step-name {
      color: var(--muted);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }

    .step-value {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 10px;
    }

    .step-rate {
      display: inline-block;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(229, 56, 56, 0.1);
      color: var(--brand);
      font: 600 0.82rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      margin-bottom: 10px;
    }

    .step-note {
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.4;
    }

    .story-card {
      padding: 22px;
      border-radius: var(--radius);
      background: var(--panel-strong);
      border: 1px solid var(--line);
    }

    .story-card h3,
    .action-card h3 {
      margin: 0 0 10px;
      font-family: "Montserrat", sans-serif;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--ink);
    }

    .story-card p,
    .action-card p {
      margin: 0;
      color: var(--muted-strong);
      line-height: 1.55;
      font-size: 0.9rem;
    }

    .rank-list {
      display: grid;
      gap: 12px;
    }

    .rank-row {
      display: grid;
      grid-template-columns: minmax(140px, 1.4fr) 2fr minmax(64px, auto);
      gap: 14px;
      align-items: center;
    }

    .rank-row strong {
      display: block;
      margin-bottom: 4px;
      font-size: 0.95rem;
    }

    .rank-row span {
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.35;
    }

    .rank-label {
      font-size: 0.85rem;
      color: var(--muted-strong);
      line-height: 1.3;
    }
    .rank-bar {
      height: 6px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 2px;
      overflow: hidden;
    }
    .rank-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--brand-dark), var(--brand));
      border-radius: inherit;
    }
    .rank-value {
      font: 600 0.86rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      color: var(--ink);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .score-pill {
      padding: 5px 10px;
      border-radius: 3px;
      font: 600 0.74rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: rgba(204, 55, 55, 0.14);
      color: var(--brand-light);
      border: 1px solid rgba(204, 55, 55, 0.28);
      white-space: nowrap;
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .pill {
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: rgba(255, 255, 255, 0.04);
      color: var(--muted-strong);
      font-size: 0.82rem;
      letter-spacing: 0.01em;
    }

    .bar-list {
      display: grid;
      gap: 12px;
    }

    .chart-stack {
      display: grid;
      gap: 18px;
    }

    .chart-card {
      padding: 22px;
      border-radius: var(--radius);
      background: var(--panel-strong);
      border: 1px solid var(--line);
    }

    .chart-card h3 {
      margin: 0 0 10px;
      font-family: "Montserrat", sans-serif;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--ink);
    }

    .chart-card p {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .donut-wrap {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 18px;
      align-items: center;
    }

    .donut {
      width: 170px;
      height: 170px;
      border-radius: 50%;
      position: relative;
      margin: 0 auto;
    }

    .donut::after {
      content: "";
      position: absolute;
      inset: 24px;
      border-radius: 50%;
      background: var(--panel-strong);
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .donut-center {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 1;
      text-align: center;
      padding: 0 32px;
    }

    .donut-center strong {
      display: block;
      font-size: 1.6rem;
      line-height: 1;
      margin-bottom: 4px;
    }

    .donut-center span {
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.2;
    }

    .legend {
      display: grid;
      gap: 10px;
    }

    .legend-row {
      display: grid;
      grid-template-columns: 14px 1fr auto;
      gap: 10px;
      align-items: center;
      font-size: 0.9rem;
    }

    .legend-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }

    .funnel-bars {
      display: grid;
      gap: 14px;
    }

    .funnel-bar-row {
      display: grid;
      gap: 8px;
    }

    .funnel-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 0.9rem;
    }

    .funnel-label {
      font-weight: 600;
    }

    .funnel-track {
      height: 8px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.04);
      overflow: hidden;
    }

    .funnel-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand-dark), var(--brand));
    }
    /* Successive funnel rows fade darker — like a fall-off through the funnel. */
    .funnel-bar-row:nth-child(2) .funnel-fill { background: linear-gradient(90deg, var(--brand-dark), var(--brand)); opacity: 0.86; }
    .funnel-bar-row:nth-child(3) .funnel-fill { background: linear-gradient(90deg, var(--brand-dark), var(--brand)); opacity: 0.74; }
    .funnel-bar-row:nth-child(4) .funnel-fill { background: linear-gradient(90deg, var(--brand-dark), var(--brand)); opacity: 0.62; }

    .trigger-grid {
      display: grid;
      gap: 14px;
    }

    .trigger-row {
      display: grid;
      grid-template-columns: 160px 1fr 110px;
      gap: 14px;
      align-items: center;
    }

    .trigger-row strong {
      font-size: 0.92rem;
      font-weight: 500;
    }

    .trigger-track {
      height: 4px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.04);
      overflow: hidden;
    }
    .trigger-row { padding: 6px 0; }

    .trigger-fill {
      height: 100%;
      border-radius: inherit;
    }

    /* Editorial palette: positive triggers get the parent red; negative triggers
       get a darker red. No green — the brand has no green. Intensity reads as
       saturation, not hue. */
    .trigger-fill.positive {
      background: linear-gradient(90deg, var(--brand-dark), var(--brand-light));
    }

    .trigger-fill.negative {
      background: linear-gradient(90deg, rgba(160, 31, 31, 0.5), var(--brand-dark));
    }

    .trigger-note {
      font-size: 0.82rem;
      color: var(--muted);
      text-align: right;
    }

    .bar-row {
      display: grid;
      grid-template-columns: 180px 1fr 88px;
      gap: 12px;
      align-items: center;
      font-size: 0.92rem;
    }

    .bar-track {
      height: 12px;
      border-radius: 999px;
      background: rgba(74, 143, 166, 0.1);
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand-dark), var(--brand));
    }

    .action-board {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .action-card {
      padding: 22px;
      border-radius: var(--radius);
      background: var(--panel-strong);
      border: 1px solid var(--line);
    }

    .action-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .action-count {
      font-family: "Montserrat", sans-serif;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .action-badge {
      padding: 4px 10px;
      border-radius: 3px;
      font: 600 0.7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Brand-pure status colors. No green — the brand has none. Use red intensity
       and grayscale to encode positive/negative/neutral. */
    .badge-good { background: rgba(204, 55, 55, 0.14); color: var(--brand-light); border: 1px solid rgba(204, 55, 55, 0.28); }
    .badge-warn { background: rgba(255, 255, 255, 0.05); color: var(--muted-strong); border: 1px solid var(--line-strong); }
    .badge-bad { background: rgba(160, 31, 31, 0.18); color: #f0a8a8; border: 1px solid rgba(160, 31, 31, 0.32); }
    .badge-brand { background: rgba(204, 55, 55, 0.14); color: var(--brand-light); border: 1px solid rgba(204, 55, 55, 0.28); }

    .mini-list {
      margin-top: 12px;
      display: grid;
      gap: 8px;
    }

    .mini-item {
      padding: 10px 12px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--line);
      color: var(--muted-strong);
      font-size: 0.84rem;
      line-height: 1.4;
      font-variant-numeric: tabular-nums;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
    }

    .toolbar input,
    .toolbar select {
      border: 1px solid var(--line-strong);
      background: var(--panel-strong);
      color: var(--ink);
      padding: 10px 12px;
      border-radius: 6px;
      font: inherit;
    }
    .toolbar input::placeholder { color: var(--muted); }

    .explorer-table {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    th, td {
      padding: 10px 8px;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
      text-align: left;
    }

    th {
      color: var(--muted);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .score-badge {
      display: inline-block;
      min-width: 60px;
      text-align: center;
      padding: 5px 10px;
      border-radius: 3px;
      font: 600 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.04em;
    }

    /* Score badges use red-intensity to encode score; no green/amber/red triplet. */
    .badge-green { background: rgba(204, 55, 55, 0.18); color: #fff; border: 1px solid rgba(229, 56, 56, 0.4); }
    .badge-amber { background: rgba(204, 55, 55, 0.08); color: var(--brand-light); border: 1px solid rgba(204, 55, 55, 0.22); }
    .badge-red    { background: rgba(255, 255, 255, 0.04); color: var(--muted); border: 1px solid var(--line-strong); }
    .badge-brand-lite { background: rgba(204, 55, 55, 0.14); color: var(--brand-light); border: 1px solid rgba(204, 55, 55, 0.28); }

    details.tech-shell {
      margin-top: 22px;
    }

    details.tech-shell > summary {
      list-style: none;
      cursor: pointer;
      padding: 18px 22px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 24px 48px rgba(0,0,0,0.35);
      font-family: "Montserrat", sans-serif;
      font-weight: 600;
      color: var(--ink);
    }
    details.tech-shell > summary:hover { border-color: var(--line-strong); }

    details.tech-shell > summary::-webkit-details-marker { display: none; }

    .tech-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 16px;
    }

    .raw-panel pre {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      font: 0.84rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
      max-height: 460px;
      overflow: auto;
      color: #352620;
    }

    @media (max-width: 1180px) {
      .hero-grid,
      .grid-two,
      .grid-three,
      .grid-four,
      .tech-grid,
      .action-board,
      .funnel-row,
      .metric-strip {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 760px) {
      .shell { padding: 16px 14px 42px; }
      .hero { padding: 28px 22px 24px; border-radius: 8px; }
      .hero h1 { font-size: 1.6rem; }
      .hero::after { right: -160px; top: -120px; width: 280px; height: 280px; border-width: 24px; opacity: 0.5; }
      .hero-mark { top: 22px; left: 22px; width: 28px; height: 28px; }
      .hero .eyebrow { padding-left: 40px; font-size: 10px; }
      .hero-grid,
      .grid-two,
      .grid-three,
      .grid-four,
      .tech-grid,
      .action-board,
      .funnel-row,
      .metric-strip {
        grid-template-columns: 1fr;
      }
      .bar-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .rank-row { grid-template-columns: 1fr 70px; }
      .rank-row .rank-bar { grid-column: 1 / -1; order: 3; }
      .panel, .tech-panel { padding: 22px 18px; }
      .funnel-step::after { display: none; }
      .trends-yearly { grid-template-columns: 1fr; }
      .trends-chart { height: 220px; }
      .toolbar { flex-wrap: wrap; }
      .toolbar input, .toolbar select { width: 100%; }
      th:nth-child(5), td:nth-child(5),
      th:nth-child(6), td:nth-child(6),
      th:nth-child(7), td:nth-child(7) {
        display: none;
      }
    }

    /* ── Mobile pass for the v2 sections (Dashboard / Sales / Models / etc.) ── */
    @media (max-width: 760px) {
      /* Viewport sanity */
      html, body { overscroll-behavior-y: contain; }
      body { font-size: 15px; }

      /* Tab nav: horizontally scrollable instead of wrapping */
      .tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .tab-nav::-webkit-scrollbar { display: none; }
      .tab-btn {
        flex-shrink: 0;
        padding: 7px 14px;
        font-size: 0.85rem;
        white-space: nowrap;
      }

      /* Desc-table: wrap in a horizontally scrollable container */
      .desc-table {
        font-size: 0.78rem;
        min-width: 100%;
      }
      .desc-table th, .desc-table td {
        padding: 6px 8px;
        font-size: 0.78rem;
      }
      /* Hide overflow on table parent — tables themselves scroll-x */
      #photog-table-wrap, #rep-table-wrap, #loc-table-wrap,
      #sales-table-wrap, #cluster-table, #rep-anomaly-table,
      #response-time-table, #sms-cadence-table, #refund-reasons-table,
      #geo-table, #cohort-table, #lookalike-table, #refund-bayes-table,
      #bgnbd-table, #gsc-bucket-table, #gsc-city-table, #gsc-blog-table,
      #today-calls, #tomorrow-calls, #yesterday-calls,
      #liveops-sales-activity, #liveops-calls,
      #forecast-table, #payment-mix-table, #models-list,
      #headlines-list, #counter-intuitive, #dead-ends {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .shoots-table {
        font-size: 0.78rem;
      }
      .shoots-table th, .shoots-table td {
        padding: 6px 8px;
        white-space: normal;
      }

      /* Desc-controls: stack vertically and fill width */
      .desc-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin: 6px 0 12px;
      }
      .desc-controls > label {
        margin-left: 0 !important;
        font-size: 0.78rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .desc-controls select,
      .desc-controls input {
        width: 100%;
        padding: 8px 10px;
        font-size: 14px;  /* ≥16px would be ideal but our chrome shrinks the box */
      }

      /* Dashboard KPI grid */
      #dashboard-kpis {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
      }
      #dashboard-kpis > div {
        padding: 12px !important;
      }
      #dashboard-kpis > div > div:last-child {
        font-size: 1.1rem !important;
      }

      /* Forecast summary cards stack */
      #forecast-summary > div {
        flex-direction: column !important;
        gap: 8px !important;
      }
      #forecast-summary > div > div {
        padding: 12px !important;
        min-width: 0 !important;
      }
      #forecast-summary > div > div > div:nth-child(2) {
        font-size: 1.5rem !important;
      }

      /* Roster grid: 1 column on mobile */
      .roster-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      /* Leaderboard: stack into one column */
      #sales-leaderboard {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }

      /* Charts: shrink height a bit */
      #sales-volume-chart, #sales-rep-trend, #sales-cumulative,
      #sales-cumulative-newhires, #sales-heatmap, #payment-mix-chart {
        height: auto !important;
        min-height: 180px;
      }

      /* Insights cards: tighter padding */
      #headlines-list > ol > li {
        padding: 10px 12px !important;
        margin: 10px 0 !important;
      }
      #headlines-list li > div {
        gap: 8px !important;
      }
      #headlines-list li p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
      }

      /* Hide the "Insights date" header chip if it overflows */
      .section-title {
        font-size: 1.1rem;
      }
      .section-copy {
        font-size: 0.88rem;
      }

      /* Panel padding tighter so content fits */
      .panel, .tech-panel {
        padding: 16px 14px !important;
      }

      /* Auth gate: better mobile sizing */
      #auth-gate > div {
        padding: 24px !important;
        max-width: 90vw !important;
      }
      #auth-gate p { font-size: 0.85rem !important; }
    }

    /* Very narrow phones — extra tightening */
    @media (max-width: 380px) {
      #dashboard-kpis { grid-template-columns: 1fr !important; }
      .desc-table th, .desc-table td {
        padding: 4px 6px;
        font-size: 0.72rem;
      }
    }

    .refund-verdict {
      margin: 8px 0 18px;
      padding: 14px 18px;
      border-radius: 16px;
      font-size: 0.95rem;
      line-height: 1.45;
      font-weight: 600;
    }
    .refund-verdict.good { background: rgba(255, 255, 255, 0.04); color: #f4f4f6; border: 1px solid rgba(255, 255, 255, 0.18); }
    .refund-verdict.warn { background: rgba(212, 165, 92, 0.12); color: var(--warn); border: 1px solid rgba(212, 165, 92, 0.25); }
    .refund-verdict.bad  { background: rgba(229, 56, 56, 0.12); color: var(--bad);  border: 1px solid rgba(229, 56, 56, 0.25); }
    .refund-strip { margin-bottom: 22px; }
    .refund-grid { gap: 22px; }
    .refund-panel { background: var(--panel); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); border: 1px solid var(--line); }
    .refund-heading { font-size: 1.1rem; margin: 0 0 6px; color: var(--ink); }
    .refund-sub { font-size: 0.86rem; color: var(--muted); margin: 0 0 14px; }
    .refund-strip .metric { background: var(--panel-strong); }
    .rev-table table { width: 100%; border-collapse: collapse; }
    .rev-table th, .rev-table td {
      padding: 8px 10px;
      text-align: left;
      border-bottom: 1px solid var(--line);
      font-size: 0.86rem;
    }
    .rev-table th { font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; }
    .rev-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
    .rev-table .ref-bad { color: var(--bad); font-weight: 600; }
    .rev-table .ref-warn { color: var(--warn); font-weight: 600; }
    .rev-table .ref-good { color: var(--muted-strong); }
    .rev-table tr.drilldown-row { cursor: pointer; transition: background-color 120ms ease; }
    .rev-table tr.drilldown-row:hover { background: rgba(204, 55, 55, 0.06); }
    .rev-table tr.drilldown-row:hover td:first-child { color: var(--brand-light); }
    .bar-row.drilldown-row { cursor: pointer; padding: 4px 6px; margin: 0 -6px; border-radius: 4px; transition: background-color 120ms ease; }
    .bar-row.drilldown-row:hover { background: rgba(204, 55, 55, 0.06); }
    .bar-row.drilldown-row:hover > div:first-child { color: var(--brand-light); }

    /* === Mega-viz visualization styles === */
    .viz-ranked-bars { display: grid; gap: 8px; }
    .viz-ranked-row { display: grid; grid-template-columns: minmax(100px, 1.4fr) 2fr minmax(64px, auto); gap: 12px; align-items: center; font-size: 0.86rem; }
    .viz-ranked-row .viz-label { color: var(--muted-strong); font-variant-numeric: tabular-nums; }
    .viz-ranked-row .viz-bar-track { height: 6px; background: rgba(255,255,255,0.04); border-radius: 2px; overflow: hidden; }
    .viz-ranked-row .viz-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); border-radius: inherit; }
    .viz-ranked-row .viz-value { font: 600 0.85rem/1 ui-monospace, monospace; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
    .viz-ranked-row.drilldown-row { cursor: pointer; padding: 3px 6px; margin: 0 -6px; border-radius: 4px; transition: background-color 120ms ease; }
    .viz-ranked-row.drilldown-row:hover { background: rgba(204, 55, 55, 0.06); }
    .viz-ranked-row.drilldown-row:hover .viz-label { color: var(--brand-light); }

    /* Histogram shares ranked-bars styling but shows a continuous range */
    .viz-histogram { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; align-items: end; height: 140px; padding: 8px 4px; background: rgba(255,255,255,0.02); border-radius: 6px; }
    .viz-histogram .viz-hbar { background: linear-gradient(180deg, var(--brand-light), var(--brand-dark)); min-height: 1px; border-radius: 1px 1px 0 0; }
    .viz-histogram-axis { display: flex; justify-content: space-between; padding: 6px 4px 0; font: 10px ui-monospace, monospace; color: var(--muted); }

    /* Heatmap — used by day×hour and cohort */
    .viz-heatmap { display: grid; gap: 2px; padding: 8px; background: rgba(255,255,255,0.02); border-radius: 6px; }
    .viz-heat-cell { aspect-ratio: 1.4; min-height: 18px; border-radius: 2px; display: flex; align-items: center; justify-content: center; font: 9px ui-monospace, monospace; color: rgba(255,255,255,0.85); }
    .viz-heat-row { display: contents; }
    .viz-heat-rowlabel { font: 10px ui-monospace, monospace; color: var(--muted); padding: 4px 6px; align-self: center; }
    .viz-heat-collabels { display: grid; gap: 2px; padding-left: 56px; font: 10px ui-monospace, monospace; color: var(--muted); }

    /* Donut shared with action-mix */
    .viz-donut-wrap { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; }
    .viz-donut { width: 130px; height: 130px; border-radius: 50%; position: relative; margin: 0 auto; }
    .viz-donut::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: var(--panel-strong); }
    .viz-donut-center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; }
    .viz-donut-center strong { display: block; font-family: "Montserrat", sans-serif; font-size: 1.4rem; font-weight: 600; }
    .viz-donut-center span { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }

    /* SVG containers (scatter/bubble/yoy/cumulative/etc) */
    .viz-svg-wrap { background: rgba(255,255,255,0.02); border-radius: 6px; padding: 8px; }
    .viz-svg-wrap svg { width: 100%; height: 240px; display: block; }
    .viz-svg-wrap .axis text { fill: var(--muted); font-size: 10px; font-family: ui-monospace, monospace; }
    .viz-svg-wrap .grid line { stroke: rgba(255,255,255,0.06); }
    .viz-svg-wrap .dot { fill: var(--brand); }
    .viz-svg-wrap .dot.faded { fill: var(--brand-dark); opacity: 0.5; }
    .viz-svg-wrap .line-2024 { stroke: var(--brand-light); stroke-width: 2; fill: none; }
    .viz-svg-wrap .line-2025 { stroke: var(--brand); stroke-width: 2; fill: none; }
    .viz-svg-wrap .line-2026 { stroke: var(--brand-dark); stroke-width: 2; fill: none; }
    .viz-svg-wrap .line-2023 { stroke: var(--muted); stroke-width: 2; fill: none; stroke-dasharray: 3 3; }
    .viz-legend { display: flex; gap: 14px; font-size: 0.78rem; color: var(--muted); padding: 8px 4px 0; flex-wrap: wrap; }
    .viz-legend .swatch { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 5px; }

    /* Waterfall */
    .viz-waterfall { display: grid; gap: 10px; }
    .viz-waterfall-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) 4fr minmax(120px, auto); gap: 14px; align-items: center; }
    .viz-waterfall-bar { background: linear-gradient(90deg, var(--brand-dark), var(--brand)); height: 26px; border-radius: 3px; position: relative; }
    .viz-waterfall-bar.dim-1 { opacity: 0.85; }
    .viz-waterfall-bar.dim-2 { opacity: 0.7; }
    .viz-waterfall-bar.dim-3 { opacity: 0.55; }
    .viz-waterfall-bar.dim-4 { opacity: 0.42; }
    .viz-waterfall-row .viz-value { font: 600 0.95rem/1 "Montserrat", sans-serif; }
    .viz-waterfall-row .viz-meta { color: var(--muted); font: 11px ui-monospace, monospace; padding-top: 4px; }

    /* Bubble */
    .viz-bubble-wrap { background: rgba(255,255,255,0.02); border-radius: 6px; padding: 16px; position: relative; }
    .viz-bubble-wrap .bubble { fill: rgba(204, 55, 55, 0.55); stroke: var(--brand-light); stroke-width: 1.5; cursor: pointer; transition: fill 120ms; }
    .viz-bubble-wrap .bubble:hover { fill: rgba(229, 56, 56, 0.85); }
    .viz-bubble-wrap .bubble-label { fill: var(--ink); font: 10px ui-monospace, monospace; pointer-events: none; }

    /* Top customers table */
    #viz-top-customers table { font-size: 0.85rem; }
    #viz-top-customers td { padding: 6px 8px; border-bottom: 1px solid var(--line); }

    .trends-yearly {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 22px;
    }
    .yearly-card {
      padding: 14px 16px;
      border-radius: 12px;
      background: var(--panel-strong);
      border: 1px solid var(--line);
    }
    .yearly-card .yc-year { font-size: 0.78rem; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
    .yearly-card .yc-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.86rem; }
    .yearly-card .yc-row span:first-child { color: var(--muted); }
    .yearly-card .yc-row span:last-child { font-variant-numeric: tabular-nums; }

    .trends-controls { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
    .trends-controls label { color: var(--muted); font-size: 0.86rem; }
    .trends-controls select {
      background: var(--panel-strong); color: var(--ink);
      border: 1px solid var(--line); border-radius: 8px;
      padding: 8px 12px; font-size: 0.92rem;
    }

    .trends-chart {
      position: relative;
      height: 260px;
      padding: 14px 4px 8px;
      background: var(--panel-strong);
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
    }
    .trends-chart svg { width: 100%; height: 100%; display: block; }
    .trends-chart .axis text { fill: var(--muted); font-size: 10px; font-family: ui-monospace, monospace; }
    .trends-chart .grid line { stroke: rgba(255,255,255,0.05); }
    .trends-chart .area { fill: rgba(229, 56, 56, 0.18); }
    .trends-chart .line { fill: none; stroke: var(--brand); stroke-width: 2; }
    .trends-chart .dot { fill: var(--brand); }
    .trends-chart .dot:hover { fill: var(--gold); }
    .trends-chart .hover-label {
      fill: var(--ink); font-size: 11px; font-family: ui-monospace, monospace;
    }

    /* Tighten radii globally to match the TMA brand aesthetic */
    .panel, .tech-panel, .card { border-radius: var(--radius); }
    select, input[type="search"] {
      background: var(--panel-strong);
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
    }
    input[type="search"]::placeholder { color: var(--muted); }

    /* Tables */
    table { color: var(--ink); }
    .explorer-table th { color: var(--muted); border-bottom: 1px solid var(--line); }
    .explorer-table td { border-bottom: 1px solid var(--line); }

    /* Tab navigation */
    .tab-nav {
      position: sticky; top: 0; z-index: 50;
      display: flex; gap: 4px; padding: 12px 0;
      background: var(--bg); border-bottom: 1px solid var(--line);
      margin: 0 0 18px;
    }
    .tab-btn {
      background: transparent; color: var(--muted);
      border: 1px solid var(--line); border-radius: 999px;
      padding: 8px 18px; font-family: 'IBM Plex Sans', sans-serif;
      font-size: 0.92rem; font-weight: 500; cursor: pointer;
      letter-spacing: 0.01em; transition: all 0.15s ease;
    }
    .tab-btn:hover { color: var(--ink); border-color: var(--line-strong); }
    .tab-btn[data-active="true"] {
      background: var(--brand); color: #fff; border-color: var(--brand);
    }
    /* Grouped nav (M3): domain groups with small labels */
    .tab-nav--grouped { flex-wrap: wrap; align-items: stretch; gap: 0; row-gap: 8px; }
    .nav-group {
      display: flex; flex-direction: column; gap: 6px;
      padding: 0 12px; border-right: 1px solid var(--line);
    }
    .nav-group:first-child { padding-left: 0; }
    .nav-group:last-child { border-right: none; padding-right: 0; }
    .nav-group-label {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em;
      text-transform: uppercase; color: var(--muted); opacity: 0.6;
      padding-left: 4px;
    }
    .nav-group-btns { display: flex; gap: 4px; flex-wrap: wrap; }
    @media (max-width: 820px) {
      .tab-nav--grouped { flex-wrap: nowrap; }
      .nav-group { border-right: none; padding: 0 8px 0 0; }
      .nav-group-label { display: none; }
    }
    .tab-link {
      background: transparent; color: var(--muted);
      border: 1px solid var(--line); border-radius: 999px;
      padding: 8px 18px; font-family: 'IBM Plex Sans', sans-serif;
      font-size: 0.92rem; font-weight: 500; cursor: pointer;
      letter-spacing: 0.01em; transition: all 0.15s ease;
      text-decoration: none; display: inline-flex; align-items: center;
    }
    .tab-link:hover { color: var(--ink); border-color: var(--line-strong); }
    .view { display: none; }
    .view[data-active="true"] { display: block; }

    /* Descriptive section */
    .desc-controls {
      display: flex; gap: 8px; align-items: center; margin: 10px 0 14px;
      flex-wrap: wrap;
    }
    .desc-controls select { padding: 6px 10px; font-size: 0.88rem; }
    .desc-table {
      width: 100%; border-collapse: collapse;
      font-family: 'IBM Plex Sans', sans-serif; font-size: 0.9rem;
    }
    .desc-table th {
      text-align: right; padding: 8px 12px; color: var(--muted);
      border-bottom: 1px solid var(--line-strong); font-weight: 500;
      font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
    }
    .desc-table th:first-child { text-align: left; }
    .desc-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
    .desc-table td.num { font-family: ui-monospace, monospace; text-align: right; }
    .desc-table td.delta-up,
    .desc-table .delta-up { color: #4ade80; }
    .desc-table td.delta-down,
    .desc-table .delta-down { color: #f87171; }
    .desc-table tbody tr:hover { background: rgba(255,255,255,0.02); }
    .desc-explainer {
      font-size: 0.85rem; color: var(--muted); line-height: 1.55;
      margin: -6px 0 14px; max-width: 70ch;
    }

    /* Live ops */
    .roster-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px; margin: 14px 0;
    }
    .roster-card {
      background: var(--panel); border: 1px solid var(--line);
      border-radius: var(--radius); padding: 16px;
    }
    .roster-card .name { font-weight: 600; font-size: 1.05rem; margin: 0 0 4px; }
    .roster-card .role { color: var(--muted); font-size: 0.85rem; margin: 0 0 12px; }
    .roster-card .stat {
      display: flex; justify-content: space-between; padding: 4px 0;
      font-size: 0.88rem; border-top: 1px solid var(--line);
    }
    .roster-card .stat:first-of-type { border-top: 0; }
    .roster-card .stat-label { color: var(--muted); }
    .roster-card .stat-val { font-family: ui-monospace, monospace; }
    .roster-card .flag {
      display: inline-block; padding: 2px 8px; border-radius: 999px;
      font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
      text-transform: uppercase; margin-left: 6px;
    }
    .flag-watch { background: rgba(212, 165, 92, 0.18); color: var(--gold); }

    /* Upcoming-shoots calendar/map */
    .shoot-view-btn {
      padding: 5px 11px; border-radius: 6px; border: 1px solid var(--line);
      background: rgba(255,255,255,0.03); color: var(--ink); font-size: 0.82rem;
      cursor: pointer;
    }
    .shoot-view-btn[data-active="true"] { background: var(--brand); color: white; border-color: var(--brand); }
    .geo-level-btn, .geo-view-btn {
      padding: 5px 11px; border-radius: 6px; border: 1px solid var(--line);
      background: rgba(255,255,255,0.03); color: var(--ink); font-size: 0.82rem;
      cursor: pointer;
    }
    .geo-level-btn[data-active="true"], .geo-view-btn[data-active="true"] {
      background: var(--brand); color: white; border-color: var(--brand);
    }

    /* Conversion-tab time-window toggle (segmented) */
    .conv-win-btn, .conv-table-win-btn {
      padding: 6px 12px;
      background: transparent;
      color: var(--muted);
      border: none;
      border-right: 1px solid var(--line);
      font-size: 0.78rem;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .conv-win-btn:last-child, .conv-table-win-btn:last-child { border-right: none; }
    .conv-win-btn:hover, .conv-table-win-btn:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
    .conv-win-btn[data-active="true"], .conv-table-win-btn[data-active="true"] {
      background: var(--brand); color: white;
    }

    /* Bucket toggle pills */
    .conv-bucket-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px; border-radius: 12px; cursor: pointer;
      border: 1px solid var(--line); background: rgba(255,255,255,0.02);
      transition: opacity 0.15s;
      user-select: none;
    }
    .conv-bucket-pill[data-active="false"] { opacity: 0.35; }
    .conv-bucket-pill .swatch {
      display: inline-block; width: 12px; height: 3px; border-radius: 1px;
    }

    /* City chip */
    .conv-city-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: 14px; cursor: pointer; user-select: none;
      border: 1px solid var(--line); background: rgba(255,255,255,0.02);
      font-size: 0.76rem; font-family: ui-monospace, monospace;
      color: var(--muted-strong);
      transition: all 0.12s;
    }
    .conv-city-chip:hover { color: var(--ink); border-color: var(--line-strong); }
    .conv-city-chip[data-active="true"] {
      background: var(--brand); color: white; border-color: var(--brand);
    }
    .conv-city-chip .chip-clicks {
      font-size: 0.7rem; opacity: 0.7;
    }

    /* Sortable table headers */
    .desc-table th.sortable {
      cursor: pointer; user-select: none;
    }
    .desc-table th.sortable:hover { color: var(--ink); }
    .desc-table th.sortable .sort-arrow {
      display: inline-block; margin-left: 4px; opacity: 0.4; font-size: 0.7rem;
    }
    .desc-table th.sortable[data-sort="asc"] .sort-arrow,
    .desc-table th.sortable[data-sort="desc"] .sort-arrow { opacity: 1; }

    /* City detail expand row */
    .conv-city-expand-btn {
      cursor: pointer; user-select: none;
      color: var(--muted); font-size: 0.9rem;
      transition: transform 0.15s;
      display: inline-block;
    }
    .conv-city-expand-btn[data-open="true"] {
      transform: rotate(90deg); color: var(--brand);
    }
    .conv-city-detail-row {
      background: rgba(255,255,255,0.02);
    }
    .conv-city-detail-inner {
      padding: 14px 16px;
    }
    .cal-month { margin: 20px 0; }
    .cal-month-title { font-size: 1rem; font-weight: 600; margin: 0 0 8px; color: var(--ink); letter-spacing: 0.02em; }
    .cal-grid {
      display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
      background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
    }
    .cal-dow {
      background: var(--panel); padding: 6px 8px; color: var(--muted);
      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
      text-align: center;
    }
    .cal-cell { background: var(--panel); min-height: 72px; padding: 4px 5px; font-size: 0.78rem; }
    .cal-cell.blank { background: rgba(255,255,255,0.01); }
    .cal-cell.is-today { background: rgba(229, 56, 56, 0.08); border: 1px solid rgba(229, 56, 56, 0.4); }
    .cal-day { color: var(--muted); font-size: 0.72rem; margin-bottom: 3px; font-weight: 500; }
    .cal-chip {
      padding: 2px 5px; margin-bottom: 2px; border-radius: 3px;
      font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      line-height: 1.2;
    }
    .cal-more { color: var(--muted); font-size: 0.65rem; padding: 1px 5px; font-style: italic; }
    @media (max-width: 760px) {
      .cal-cell { min-height: 50px; padding: 2px 3px; font-size: 0.7rem; }
      .cal-day { font-size: 0.65rem; }
      .cal-chip { font-size: 0.6rem; padding: 1px 3px; }
    }

    .shoots-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    .shoots-table th { text-align: left; padding: 7px 10px; color: var(--muted);
      border-bottom: 1px solid var(--line-strong); font-weight: 500;
      font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
      white-space: nowrap; }
    .shoots-table td { padding: 7px 10px; border-bottom: 1px solid var(--line);
      white-space: nowrap; }

/* extracted from index.html body block (was L3475-3536) */
    .ph-subtab {
      background: transparent;
      color: var(--ink-soft);
      border: 1px solid transparent;
      border-radius: 7px;
      padding: 6px 11px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
    }
    .ph-subtab:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
    .ph-subtab[data-active="true"] { background: var(--brand); color: #fff; }
    .ph-sub { display: none; }
    .ph-sub[data-active="true"] { display: block; }
    .ph-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 20px;
      margin-bottom: 14px;
    }
    .ph-card-title { font-size: 14px; font-weight: 600; margin: 0 0 4px 0; }
    .ph-card-sub { font-size: 11.5px; color: var(--ink-soft); margin: 0 0 14px 0; }
    .ph-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
    .ph-stat { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
    .ph-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); }
    .ph-stat-val { font-size: 26px; font-weight: 600; margin-top: 6px; font-family: Montserrat, system-ui, sans-serif; }
    .ph-table { width: 100%; font-size: 13px; border-collapse: collapse; }
    .ph-table th { text-align: left; padding: 8px 12px 8px 0; font-size: 10.5px; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; border-bottom: 1px solid var(--line); }
    .ph-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
    .ph-table tr:last-child td { border-bottom: none; }
    .ph-table tr.clickable { cursor: pointer; }
    .ph-table tr.clickable:hover { background: rgba(255,255,255,0.04); }
    .ph-table tr.selected { background: rgba(229, 56, 56, 0.08); }
    .ph-loading { padding: 30px; text-align: center; color: var(--ink-soft); font-size: 13px; }
    .ph-error { background: rgba(229,56,56,0.08); border: 1px solid rgba(229,56,56,0.3); color: #ffb4b4; padding: 14px; border-radius: 10px; font-size: 12px; font-family: ui-monospace, monospace; white-space: pre-wrap; }
    .ph-days-picker { display: inline-flex; gap: 2px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
    .ph-days-btn { background: transparent; border: 0; color: var(--ink-soft); font-size: 11px; padding: 5px 10px; border-radius: 5px; cursor: pointer; }
    .ph-days-btn[data-active="true"] { background: var(--brand); color: #fff; }
    .ph-row-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
    .ph-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; }
    .ph-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
    .ph-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; background: rgba(229,56,56,0.12); color: var(--brand-light); border: 1px solid rgba(229,56,56,0.25); }
    .ph-event-feed li { list-style: none; padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; }
    .ph-event-feed li:last-child { border-bottom: none; }
    .ph-event-time { font-size: 10.5px; color: var(--ink-soft); width: 80px; flex-shrink: 0; }
    .ph-event-id { font-size: 10.5px; color: var(--ink-soft); font-family: ui-monospace, monospace; width: 110px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ph-event-label { flex-shrink: 0; font-weight: 500; }
    .ph-event-detail { color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ph-event-page { font-size: 11px; color: var(--brand-light); margin-left: auto; flex-shrink: 0; }
    .ph-query-textarea { width: 100%; min-height: 200px; background: #0a0a0d; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: ui-monospace, monospace; font-size: 12px; }
    .ph-query-run { background: var(--brand); color: #fff; border: 0; border-radius: 7px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
    .ph-query-run:disabled { opacity: 0.5; cursor: wait; }
    .ph-query-select { background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
    .ph-bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
    .ph-bar-fill { height: 100%; background: var(--brand); transition: width 0.3s; }
    .ph-funnel-step { margin-bottom: 14px; }
    .ph-funnel-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
    .ph-watch-btn { background: rgba(229,56,56,0.12); border: 1px solid rgba(229,56,56,0.3); color: var(--brand-light); padding: 4px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; text-decoration: none; }
    .ph-watch-btn:hover { background: rgba(229,56,56,0.22); }
    .ph-mermaid { background: #050507; border-radius: 12px; padding: 20px; overflow-x: auto; }