/* ── ASIN PERFORMANCE ── */
    .asinperformance-panel { display: none; }
    .asinperformance-panel.active { display: block; }

    .asin-info-note {
      display: flex; align-items: flex-start; gap: 10px;
      background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 10px;
      padding: 14px 20px; margin-bottom: 20px;
      font-size: 13px; color: var(--gray-600); line-height: 1.6;
    }
    .asin-info-note svg { flex-shrink: 0; margin-top: 2px; color: var(--gray-400); }

    /* Filters */
    .asin-filters {
      background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px;
      padding: 16px 20px; margin-bottom: 16px;
    }
    .asin-filter-row {
      display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
    }
    .asin-filter-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
    .asin-filter-group label {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 1px; color: var(--gray-400);
    }
    .asin-filter-group input,
    .asin-filter-group select {
      padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 6px;
      font-size: 13px; color: var(--gray-800); background: var(--white);
      font-family: inherit;
    }
    .asin-filter-group input:focus,
    .asin-filter-group select:focus { border-color: var(--accent-500); }

    /* Presets + export row */
    .asin-presets-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
    }
    .asin-presets { display: flex; gap: 8px; flex-wrap: wrap; }
    .asin-preset-btn {
      padding: 7px 14px; border: 1px solid var(--gray-200); border-radius: 6px;
      background: var(--white); color: var(--gray-700); font-size: 13px;
      font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s;
    }
    .asin-preset-btn:hover { border-color: var(--accent-500); color: var(--accent-500); }
    /* color-accessible-pairs: white on --accent-500 = 3.87:1 fails; --accent-600 = 4.81:1 passes */
    .asin-preset-btn.active { background: var(--accent-600); color: #fff; border-color: var(--accent-600); }
    .asin-export-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 16px; border: 1px solid var(--gray-200); border-radius: 6px;
      background: var(--white); color: var(--gray-700); font-size: 13px;
      font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s;
    }
    .asin-export-btn:hover { border-color: var(--accent-500); color: var(--accent-500); }

    /* Table scroll — overflow-x:auto lets a widened table grow past the card
       width so the fixed-layout engine never shrinks peer columns. NOTE: with
       overflow-x:auto, overflow-y's used value also becomes auto (CSS spec), so
       this wrapper IS a scroll container on both axes. To keep the sticky thead
       pinning, we cap the height (max-height) so the wrapper scrolls internally
       and anchor the header to top:0 of the wrapper — mirroring the proven
       .strategy-table-scroll pattern. (A no-height-cap scroll container has zero
       vertical scroll range, which defeats a sticky offset and lets the header
       scroll away with the page.) */
    .asin-table-scroll {
      overflow-x: auto; overflow-y: auto; max-height: 70vh;
    }
    .asin-table-scroll table { font-size: 14px; width: 100%; border-collapse: collapse; table-layout: fixed; }
    .asin-table-scroll thead th {
      position: sticky; top: 0; z-index: 10; background: var(--gray-50);
      white-space: nowrap; cursor: pointer; user-select: none;
      font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
      font-weight: 600; padding: 10px 14px; text-align: left;
      color: var(--gray-600); border-bottom: 1px solid var(--gray-100);
    }
    .asin-table-scroll thead th.num { text-align: right; }
    .asin-table-scroll thead th.sort-asc::after,
    .asin-table-scroll thead th.sort-desc::after {
      display: inline-block; margin-left: 4px; font-size: 10px;
    }
    .asin-table-scroll thead th.sort-asc::after { content: '\25B2'; color: var(--accent-500); }
    .asin-table-scroll thead th.sort-desc::after { content: '\25BC'; color: var(--accent-500); }
    /* Row density: bumped from 8px to 10px vertical padding (Priya/Tom compromise).
       Breathes without becoming bloated; consistent with Linear/Stripe table density. */
    .asin-table-scroll tbody td {
      padding: 10px 14px; font-size: 14px;
      border-bottom: 1px solid var(--gray-50); color: var(--gray-800);
    }
    .asin-table-scroll tbody td.num {
      text-align: right; font-variant-numeric: tabular-nums;
    }
    .asin-table-scroll tbody tr:hover { background: var(--gray-50); cursor: default; }
    .asin-table-scroll tfoot .total-row {
      font-weight: 700; background: var(--gray-50);
      border-top: 2px solid var(--gray-200);
      position: sticky; bottom: 0; z-index: 5;
    }
    .asin-table-scroll tfoot .total-row td {
      padding: 10px 14px; font-size: 14px; color: var(--gray-800);
    }
    .asin-table-scroll tfoot .total-row td.num {
      text-align: right; font-variant-numeric: tabular-nums;
    }

    /* Gap badges */
    .asin-gap-badge {
      display: inline-block; padding: 2px 8px; border-radius: 4px;
      font-size: 12px; font-weight: 600; white-space: nowrap;
    }
    .asin-gap-green  { background: var(--badge-healthy-bg); color: var(--badge-healthy-fg); }
    .asin-gap-yellow { background: var(--badge-warn-bg);    color: var(--badge-warn-fg); }
    .asin-gap-red    { background: var(--badge-crit-bg);    color: var(--badge-crit-fg); }

    /* Pagination */
    .asin-pagination {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; padding: 16px 0; flex-wrap: wrap;
    }
    .asin-page-info { font-size: 13px; color: var(--gray-500); }
    .asin-page-btns { display: flex; gap: 4px; }
    .asin-page-btns button {
      padding: 6px 10px; border: 1px solid var(--gray-200); border-radius: 4px;
      background: var(--white); color: var(--gray-700); font-size: 14px;
      cursor: pointer; font-family: inherit; transition: all 0.15s;
    }
    .asin-page-btns button:hover:not(:disabled) { border-color: var(--accent-500); color: var(--accent-500); }
    .asin-page-btns button:disabled { opacity: 0.4; cursor: not-allowed; }

    /* Summary card grid on dashboard */
    .asin-summary-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px; padding: 20px 24px;
    }
    .asin-summary-item {}
    .asin-summary-label {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 1px; color: var(--gray-400); margin-bottom: 4px;
    }
    .asin-summary-value {
      font-size: 18px; font-weight: 600; color: var(--gray-900);
    }
    .asin-status-healthy {
      display: inline-block; font-size: 11px; font-weight: 600;
      padding: 2px 8px; border-radius: 4px;
      background: var(--badge-healthy-bg); color: var(--badge-healthy-fg);
    }
    .asin-status-moderate {
      display: inline-block; font-size: 11px; font-weight: 600;
      padding: 2px 8px; border-radius: 4px;
      background: var(--badge-warn-bg); color: var(--badge-warn-fg);
    }
    .asin-status-investigate {
      display: inline-block; font-size: 11px; font-weight: 600;
      padding: 2px 8px; border-radius: 4px;
      background: var(--badge-crit-bg); color: var(--badge-crit-fg);
    }

    /* ── KEYWORD CATEGORY DISTRIBUTION ── */
    .kw-bucket-dot {
      display: inline-block; width: 10px; height: 10px; border-radius: 50%;
      margin-right: 8px; vertical-align: middle; flex-shrink: 0;
    }

    /* ── BUDGET MANAGEMENT ── */
    .budget-summary-bar {
      display: flex; gap: 16px; padding: 16px 24px; flex-wrap: wrap;
    }
    .budget-kpi { flex: 1; min-width: 180px; }
    .budget-kpi-label {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 1px; color: var(--gray-400); margin-bottom: 4px; display: block;
    }
    .budget-kpi-value { font-size: 20px; font-weight: 600; color: var(--gray-900); }
    .budget-kpi-sub { font-size: 12px; color: var(--gray-400); font-weight: 400; margin-left: 4px; }
    .budget-tables-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
    .budget-subtable { border-top: 1px solid var(--gray-100); width: 100%; }
    .budget-subtable > .table-wrap { width: 100%; }
    .budget-subtable > .table-wrap table { width: 100%; }
    .budget-subtable-title {
      font-size: 14px; font-weight: 600; color: var(--gray-800);
      padding: 14px 24px 10px; margin: 0;
    }
    .budget-subtitle { font-weight: 400; color: var(--gray-400); font-size: 12px; margin-left: 4px; }
    .budget-empty {
      text-align: center; padding: 40px 20px; color: var(--gray-400); font-size: 14px;
    }

    /* ── N-GRAM WASTED SPEND BAR ── */
    .ngram-wasted-bar {
      display: flex; gap: 24px; padding: 14px 20px;
      background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px;
      margin: 12px 0 16px; flex-wrap: wrap;
    }
    .ngram-wasted-item { flex: 1; min-width: 160px; }
    .ngram-wasted-label {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 1px; color: var(--gray-400); display: block; margin-bottom: 2px;
    }
    .ngram-wasted-value { font-size: 18px; font-weight: 600; color: var(--gray-900); }

    /* N-Gram info icon (header, click to open) */
    .ngram-info-icon {
      position: relative;
      display: inline-flex; align-items: center; justify-content: center;
      width: 14px; height: 14px; border-radius: 50%;
      background: #16a34a; color: #fff;
      font-size: 9px; font-weight: 700; font-style: italic;
      font-family: Georgia, serif; line-height: 1;
      cursor: pointer; vertical-align: middle; margin-left: 6px;
      box-shadow: 0 0 0 1px rgba(22,163,74,0.25);
      transition: background 0.15s, box-shadow 0.15s;
      user-select: none;
    }
    .ngram-info-icon:hover { background: #15803d; box-shadow: 0 0 0 2px rgba(22,163,74,0.35); }

    /* N-Gram info popover (stays open until closed) */
    .ngram-info-popover {
      position: absolute; z-index: 1000; top: 100%; left: 0; margin-top: 6px;
      background: var(--bg-3); color: var(--gray-900);
      border: 1px solid var(--gray-200); border-radius: 8px;
      padding: 10px 28px 10px 12px; font-size: 12px; line-height: 1.45;
      font-weight: 400; font-style: normal; text-transform: none; letter-spacing: normal;
      width: 280px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      white-space: normal; text-align: left;
    }
    .ngram-info-popover-close {
      position: absolute; top: 4px; right: 6px;
      width: 18px; height: 18px; display: inline-flex;
      align-items: center; justify-content: center;
      background: transparent; border: none; cursor: pointer;
      font-size: 14px; color: var(--gray-500); line-height: 1;
      border-radius: 4px;
    }
    .ngram-info-popover-close:hover { background: var(--gray-100); color: var(--gray-900); }

    /* N-Gram Negate Phrase cell: checkbox + campaign count badge.
       Badge renders on every row (checked or not) so toggling never shifts layout.
       flex-start pins the checkbox to the cell's left edge (matching the header's
       inline-checkbox position). justify-content:center was misaligning the checkbox
       because it centered the checkbox+badge unit as one block, pushing the checkbox
       left of the header's checkbox. */
    .ngram-pause-cell {
      display: flex; align-items: center; justify-content: flex-start;
      gap: 8px; position: relative; width: 100%;
    }
    .ngram-pause-cell > .ngram-pause-cb {
      flex: 0 0 16px; width: 16px; height: 16px; margin: 0; cursor: pointer;
    }
    .ngram-camp-badge {
      position: relative;
      display: inline-flex; align-items: center;
      font-size: 11px; font-weight: 600; line-height: 1;
      background: var(--gray-100); color: var(--gray-700);
      padding: 3px 7px; border-radius: 10px;
      cursor: pointer; user-select: none;
      transition: background 0.15s;
    }
    .ngram-camp-badge:hover { background: var(--gray-200); color: var(--gray-900); }
    /* Appended to <body> with position:fixed + JS-computed coords so it escapes
       the table's overflow clipping. Inline style sets top/left at open time.
       Layout mirrors the Performing STs "Target Campaign" picker: search bar,
       scrollable list, footer count. */
    .ngram-camp-popover {
      position: fixed; z-index: 10000;
      background: var(--bg-3); color: var(--gray-900);
      border: 1px solid var(--gray-200); border-radius: 10px;
      font-size: 13px; line-height: 1.4; font-weight: 400;
      width: 440px; max-width: 92vw;
      box-shadow: 0 12px 32px rgba(0,0,0,0.15);
      text-align: left; white-space: normal;
      overflow: hidden; display: flex; flex-direction: column;
    }
    .ngram-camp-popover-search {
      position: relative; padding: 10px 12px;
      border-bottom: 1px solid var(--gray-100);
      flex: 0 0 auto;
    }
    .ngram-camp-popover-search-icon {
      position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
      color: var(--gray-400); font-size: 14px; pointer-events: none;
    }
    .ngram-camp-popover-search-input {
      width: 100%; box-sizing: border-box;
      padding: 9px 12px 9px 32px;
      border: 1px solid var(--accent-500); border-radius: 6px;
      font-size: 13px; color: var(--gray-900);
      outline: none; background: var(--bg-1);
    }
    .ngram-camp-popover-search-input::placeholder { color: var(--gray-400); }
    .ngram-camp-popover-search-input:focus {
      box-shadow: 0 0 0 2px rgba(216, 90, 48, 0.18);
    }
    .ngram-camp-popover-list {
      list-style: none; margin: 0; padding: 4px 0;
      max-height: 300px; overflow-y: auto;
      flex: 1 1 auto;
    }
    .ngram-camp-popover-list li {
      padding: 8px 14px; border-bottom: none;
      word-break: break-word; color: var(--gray-800); font-size: 13px;
      cursor: default;
    }
    .ngram-camp-popover-list li:hover { background: var(--gray-50); }
    .ngram-camp-popover-list .ngram-camp-popover-empty {
      color: var(--gray-400); cursor: default;
    }
    .ngram-camp-popover-list .ngram-camp-popover-empty:hover { background: transparent; }
    .ngram-camp-popover-footer {
      padding: 10px 14px; border-top: 1px solid var(--gray-100);
      font-size: 12px; color: var(--gray-500);
      flex: 0 0 auto;
    }

    /* N-Gram toggle switch (compact) */
    .toggle-switch-inline { position: relative; display: inline-flex; align-items: center; }
    .toggle-switch-inline input { display: none; }
    .toggle-slider-sm {
      width: 34px; height: 18px; background: var(--gray-200); border-radius: 9px;
      position: relative; cursor: pointer; transition: background 0.2s;
      flex-shrink: 0;
    }
    .toggle-slider-sm::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 14px; height: 14px; background: #fff; border-radius: 50%;
      transition: transform 0.2s;
    }
    .toggle-switch-inline input:checked + .toggle-slider-sm { background: var(--accent-500); }
    .toggle-switch-inline input:checked + .toggle-slider-sm::after { transform: translateX(16px); }

    /* ── ANCHOR NAV ── */
    .dash-anchor-nav {
      display: flex; gap: 0; overflow-x: auto; white-space: nowrap;
      background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px;
      margin-bottom: 24px; padding: 0 8px;
      position: sticky; top: 64px; z-index: 50;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      -webkit-overflow-scrolling: touch;
    }
    .dash-anchor {
      padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--gray-500);
      text-decoration: none; border-bottom: 2px solid transparent;
      transition: color 0.15s, border-color 0.15s; flex-shrink: 0;
    }
    .dash-anchor:hover { color: var(--gray-800); }
    /* color-accessible-pairs: --accent-500 on --white (dark navy) = 4.08:1 for
       13px text. --accent-text (#E06535) gives 5.19:1 — passes AA comfortably. */
    .dash-anchor.active { color: var(--accent-text); border-bottom-color: var(--accent-text); font-weight: 600; }

    /* ── COLLAPSIBLE SECTIONS ── */
    .dash-section-header { position: relative; }
    .dash-chevron {
      display: inline-flex; align-items: center; margin-right: 8px;
      transition: transform 0.25s ease; vertical-align: middle; color: var(--gray-400);
    }
    .dash-section.collapsed .dash-chevron { transform: rotate(-90deg); }
    .dash-section-content {
      overflow: hidden; transition: max-height 0.3s ease;
    }
    .dash-section.collapsed .dash-section-content { max-height: 0 !important; }

    /* RESPONSIVE (at end of cascade so later-file rules don't override) */
    /* KPI grid: 4-col → 3-col → 2-col → 1-col. The 4→2 jump at 900px was too
       abrupt (Tom); 3-col at 1200px provides a comfortable mid-width landing. */
    @media (max-width: 1200px) {
      .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 900px) {
      .kpi-grid { grid-template-columns: repeat(2, 1fr); }
      .two-col { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .kpi-grid { grid-template-columns: 1fr; }
      .main-content { padding: 76px 12px 24px; }
      .upload-section { padding: 24px; }
      .nav-links { gap: 12px; }
      .nav-links .nav-cta { padding: 6px 10px; font-size: 12px; }
    }