/* Extracted from Branddetails.php — brand detail page styles */
    * { box-sizing: border-box; }
    .brand-detail-main { width: 100%; max-width: none; margin: 0; padding: 0; }
    .graphs-row-inner { display: flex; gap: 24px; align-items: stretch; flex: 1; }
    .graphs-row-inner > .graph-card { flex: 1; min-width: 0; }
    @media (max-width: 1400px) {
      .graphs-row-inner { flex-direction: column; }
    }
    .brand-detail-back { display: inline-flex; align-items: center; gap: 8px; color: #000000; text-decoration: none; font-size: 0.875rem; font-weight: 500; margin-bottom: 20px; }
    .brand-detail-access-denied {
      background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 56px 32px; text-align: center; margin-top: 32px; max-width: 420px; margin-left: auto; margin-right: auto;
      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }
    .brand-detail-access-denied-icon {
      width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #000000;
    }
    .brand-detail-access-denied-icon svg { width: 28px; height: 28px; }
    .brand-detail-access-denied-title { font-size: 1.25rem; font-weight: 600; color: #1e293b; margin: 0 0 10px 0; letter-spacing: -0.01em; }
    .brand-detail-access-denied-text { font-size: 0.9375rem; color: #000000; margin: 0 0 28px 0; line-height: 1.55; max-width: 320px; margin-left: auto; margin-right: auto; }
    .brand-detail-access-denied-btn {
      display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; background: #225AEA; color: #fff; font-size: 0.875rem; font-weight: 500; border-radius: 10px; text-decoration: none; transition: background 0.2s, box-shadow 0.2s;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08);
    }
    .brand-detail-access-denied-btn:hover { background: #1d4ed8; box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.12); }
    .brand-detail-no-data .brand-detail-no-data-icon {
      width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #000000;
    }
    .brand-detail-no-data .brand-detail-no-data-icon svg { width: 28px; height: 28px; }
    .brand-detail-no-data .brand-detail-no-data-icon-fetching { color: #225AEA; background: #eff6ff; }
    /* Fetching / gathering state — aligned with sales-tracker-details gate */
    .brand-detail-gate {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      max-width: 640px;
      padding: 32px 28px 28px;
      margin: 32px auto 0;
      width: 100%;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      background: linear-gradient(165deg, #fafbff 0%, #ffffff 55%);
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 12px 40px -24px rgba(15, 23, 42, 0.12);
    }
    .brand-detail-gate-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 14px;
      background: linear-gradient(145deg, #ffffff 0%, #eef2ff 100%);
      border: 1px solid rgba(34, 90, 234, 0.12);
      box-shadow: 0 1px 2px rgba(34, 90, 234, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      color: #225aea;
      flex-shrink: 0;
    }
    .brand-detail-gate-icon svg { width: 28px; height: 28px; }
    .brand-detail-gate-content { max-width: 36rem; text-align: center; }
    .brand-detail-gate-title {
      margin: 0 0 8px;
      color: #0f172a;
      font-size: 1.1875rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.25;
    }
    .brand-detail-gate-copy {
      margin: 0;
      color: #00000;
      font-size: 0.875rem;
      line-height: 1.6;
      max-width: 32rem;
    }
    .brand-detail-gate-meta {
      margin: 4px 0 0;
      color: #000000;
      font-size: 0.8125rem;
    }
    .brand-detail-gate-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
      gap: 10px;
      width: 100%;
      margin-top: 4px;
    }
    .brand-detail-gate-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 20px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: #225aea;
      color: #fff;
      font-size: 0.875rem;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(34, 90, 234, 0.2);
      transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }
    .brand-detail-gate-btn:hover {
      background: #1d4ed8;
      color: #fff;
      box-shadow: 0 2px 8px rgba(34, 90, 234, 0.28);
    }
    .brand-detail-gate-btn:active { transform: translateY(1px); }
    .brand-detail-gate-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .brand-detail-gate-btn--muted {
      background: #fff;
      color: #1e293b;
      border-color: #e2e8f0;
      box-shadow: none;
    }
    .brand-detail-gate-btn--muted:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #0f172a;
      box-shadow: none;
    }
    .brand-detail-gate-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 18px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #fff;
      color: #1e293b;
      font-size: 0.875rem;
      font-weight: 600;
      text-decoration: none;
      transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    }
    .brand-detail-gate-link:hover {
      border-color: #cbd5e1;
      background: #f8fafc;
      color: #0f172a;
    }
    .brand-detail-gate-link-icon {
      width: 18px;
      height: 18px;
      object-fit: contain;
      filter: invert(27%) sepia(91%) saturate(2252%) hue-rotate(201deg) brightness(96%) contrast(97%);
    }
    .brand-detail-gate-link-external {
      width: 14px;
      height: 14px;
      color: #000000;
      flex-shrink: 0;
    }
    .brand-detail-gate-link:hover .brand-detail-gate-link-external { color: #225aea; }
    .brand-detail-gate-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
      padding: 6px 4px;
      color: #000000;
      font-size: 0.8125rem;
      font-weight: 500;
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .brand-detail-gate-back:hover { color: #225aea; }
    .brand-detail-gate-back svg { width: 14px; height: 14px; flex-shrink: 0; }
    @media (max-width: 767px) {
      .brand-detail-gate { padding: 24px 18px 22px; }
      .brand-detail-gate-actions { flex-direction: column; align-items: stretch; }
      .brand-detail-gate-btn,
      .brand-detail-gate-link { width: 100%; }
    }
    .brand-detail-back:hover { color: #225AEA; }
    .brand-details-value-banner {
      margin: 0 0 20px 0;
      padding: 10px 14px;
      border-radius: 10px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1e3a5f;
      font-size: 0.8125rem;
      line-height: 1.5;
      letter-spacing: -0.01em;
    }
    .brand-details-value-banner .brand-details-value-title {
      display: block;
      margin-bottom: 4px;
      font-size: 0.8125rem;
      font-weight: 600;
      color: #0c1929;
    }
    .brand-details-value-banner strong {
      font-weight: 600;
      color: #0c1929;
    }
    .brand-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
    .brand-fresh-notice {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px;
      margin: 0 0 20px;
      background: linear-gradient(135deg, #eff4ff 0%, #f5f8ff 100%);
      border: 1px solid #c7d6fb;
      border-radius: 12px;
      color: #1e3a8a;
      box-shadow: 0 1px 2px rgba(34, 90, 234, 0.06);
    }
    .brand-fresh-notice-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #225AEA;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .brand-fresh-notice-icon svg {
      width: 14px;
      height: 14px;
      animation: brand-fresh-spin 1.6s linear infinite;
    }
    @keyframes brand-fresh-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .brand-fresh-notice-body { flex: 1; min-width: 0; }
    .brand-fresh-notice-title {
      font-size: 0.875rem;
      font-weight: 600;
      color: #0c1929;
      margin: 0 0 2px;
      line-height: 1.35;
    }
    .brand-fresh-notice-text {
      font-size: 0.8125rem;
      color: #00000;
      margin: 0;
      line-height: 1.5;
    }
    .brand-fresh-notice-text strong { color: #1e293b; font-weight: 600; }
    .meta-ads-header-btn {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      color: #000000;
      font-size: 0.8125rem;
      font-weight: 500;
      text-decoration: none;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .meta-ads-header-btn > svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .meta-ads-header-btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #1e293b;
    }
    .meta-ads-header-btn-icon {
      width: 14px;
      height: 14px;
      object-fit: contain;
      filter: invert(27%) sepia(91%) saturate(2252%) hue-rotate(201deg) brightness(96%) contrast(97%);
    }
    .meta-ads-header-btn-external {
      width: 12px;
      height: 12px;
      opacity: 0.7;
      flex-shrink: 0;
    }
    .brand-detail-tracked-by {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 0.75rem;
      border-radius: 0.375rem;
      background: #f1f5f9;
      color: #000000;
      font-size: 0.625rem;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      line-height: 1.2;
      min-height: 32px;
      box-sizing: border-box;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .save-brand-details-btn-disabled {
      position: relative;
      background: #f8fafc !important;
      color: #000000 !important;
      border-color: #e2e8f0 !important;
    }
    .save-brand-details-btn-disabled:hover {
      background: #f1f5f9 !important;
      color: #00000 !important;
      border-color: #cbd5e1 !important;
    }
    .save-brand-details-btn-disabled .save-brand-details-tooltip {
      position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 8px);
      padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; white-space: nowrap;
      background: #1e293b; color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .save-brand-details-btn-disabled .save-brand-details-tooltip::after {
      content: ''; position: absolute; left: 50%; top: 100%; margin-left: -4px;
      border: 4px solid transparent; border-top-color: #1e293b;
    }
    .save-brand-details-btn-disabled:hover .save-brand-details-tooltip { opacity: 1; transform: translateX(-50%) translateY(-2px); }
    .brand-detail-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #f1f5f9; }
    .brand-detail-name { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
    .brand-detail-meta { font-size: 0.8125rem; color: #000000; margin-top: 4px; }
    .brand-detail-countries { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .brand-detail-countries-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
    }
    .countries-viewport {
        overflow: hidden;
        max-width: 114px; /* (18px * 5) + (6px * 4) gaps */
        position: relative;
    }
    .countries-track {
        display: flex;
        gap: 6px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    .country-flag { 
        width: 18px; 
        height: 12px; 
        object-fit: cover; 
        border-radius: 2px; 
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        cursor: help;
        flex-shrink: 0;
    }
    .slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #e2e8f0;
        cursor: pointer;
        color: #000000;
        transition: all 0.2s;
        padding: 0;
        flex-shrink: 0;
    }
    .slider-nav:hover { background: #f8fafc; color: #000000; border-color: #cbd5e1; }
    .slider-nav svg { width: 12px; height: 12px; }
    .brand-detail-grid { display: grid; grid-template-columns: 320px 1fr 320px; gap: 24px; margin-bottom: 0; align-items: stretch; }
    .brand-detail-grid .media-mix-column { grid-column: 1; }
    .brand-detail-grid .graphs-column { grid-column: 2; }
    .brand-detail-grid .landing-column { grid-column: 3; }
    .brand-detail-grid .detail-full-width { grid-column: 1 / -1; }
    .landing-column { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
    .landing-column .card { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; }
    .landing-column .card .card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .landing-column .landing-list { flex: 1; min-height: 0; }
    .media-mix-column { display: flex; flex-direction: column; min-height: 0; }
    .media-mix-column .card { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; }
    .media-mix-column .card .card-body { flex: 1; min-height: 0; overflow: auto; }
    .graphs-column { display: flex; flex-direction: column; min-height: 0; }
    .graphs-column .graph-card { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; }
    .graphs-column .graph-tab-panel.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .graphs-column .graph-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .graphs-column .chart-wrap { flex: 1; min-height: 200px; height: auto; }
    .brand-live-ads-countries {
      padding: 10px 20px 14px;
      border-top: 1px solid #f1f5f9;
      flex-shrink: 0;
    }
    .brand-live-ads-countries-label {
      font-size: 0.6875rem;
      font-weight: 600;
      color: #5b6b82;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
    }
    .brand-live-ads-countries-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      align-items: center;
      position: relative;
    }
    .brand-live-ads-country-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.75rem;
      font-weight: 600;
      color: #334155;
    }
    .brand-live-ads-country-flag {
      width: 18px;
      height: 12px;
      object-fit: cover;
      border-radius: 2px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .brand-live-ads-countries-more {
      font-size: 0.6875rem;
      font-weight: 600;
      color: #64748b;
      cursor: default;
    }
    .brand-live-ads-countries-popup {
      position: fixed;
      top: 0;
      left: 0;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
      z-index: 1200;
      width: 260px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 10px;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .brand-live-ads-countries-list.is-popup-open .brand-live-ads-countries-popup {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .brand-live-ads-countries-popup::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 18px;
      border: 6px solid transparent;
      border-top-color: #fff;
      filter: drop-shadow(0 1px 0 #e2e8f0);
    }
    .brand-live-ads-countries-popup-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      font-size: 0.75rem;
      color: #334155;
    }
    .brand-live-ads-countries-popup-flag {
      width: 16px;
      height: 11px;
      object-fit: cover;
      border-radius: 2px;
      border: 1px solid #e2e8f0;
      flex-shrink: 0;
    }
    .brand-live-ads-countries-popup-code {
      font-weight: 600;
      flex-shrink: 0;
    }
    .brand-live-ads-countries-popup-share {
      margin-left: auto;
      color: #64748b;
      font-weight: 500;
    }
    @media (max-width: 1024px) {
      .brand-detail-grid { grid-template-columns: 1fr; }
      .brand-detail-grid .media-mix-column,
      .brand-detail-grid .graphs-column,
      .brand-detail-grid .landing-column { grid-column: 1; }
      .media-mix-column .card { min-height: 0; }
      .graphs-column .graph-card { min-height: 0; }
      .landing-column .card { min-height: 0; }
    }
    .brand-detail-grid .card, .brand-detail-grid .graph-card { margin-bottom: 0; }

    /* Top Insights (overview summary cards for personas/concepts/angles/desires/emotions/USPs) */
    .brand-top-insights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    @media (max-width: 1200px) { .brand-top-insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 640px) { .brand-top-insights-grid { grid-template-columns: 1fr; } }
    .top-insights-card { display: flex; flex-direction: column; }
    .top-insights-card .card-header { padding: 12px 16px; }
    .top-insights-card .card-title { font-size: 0.875rem; }
    .top-insights-card .card-body { padding: 8px 8px 12px 8px; flex: 1; display: flex; flex-direction: column; }
    .top-insights-list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .top-insights-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; transition: background 0.15s ease; min-height: 32px; }
    .top-insights-item:hover { background: #f8fafc; }
    .top-insights-rank { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #f1f5f9; color: #000000; font-size: 0.6875rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
    .top-insights-item:first-child .top-insights-rank { background: #eef2ff; color: #225AEA; }
    .top-insights-tag { flex: 1; min-width: 0; font-size: 0.8125rem; color: #1e293b; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .top-insights-count { flex-shrink: 0; font-size: 0.75rem; color: #1e293b; font-weight: 600; display: inline-flex; align-items: baseline; gap: 3px; }
    .top-insights-count-label { color: #5b6b82; font-weight: 500; font-size: 0.6875rem; }
    .top-insights-empty, .top-insights-loading { padding: 18px 12px; text-align: center; font-size: 0.8125rem; color: #5b6b82; }
    .top-insights-empty-fetching { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #000000; }
    .top-insights-empty-fetching .top-insights-fetching-icon { width: 24px; height: 24px; }
    .top-insights-empty-fetching .top-insights-fetching-icon svg { width: 12px; height: 12px; }
    .top-insights-loading .loading-spinner { width: 18px; height: 18px; border-width: 2px; }
    .top-insights-card .btn-view-more { margin-top: 10px; }
    .card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); border: 1px solid #e2e8f0; position: relative; }
    .card-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; background: #fafbfc; border-top-left-radius: 8px; border-top-right-radius: 8px; position: relative; }
    .card-title { font-size: 0.9375rem; font-weight: 600; color: #1e293b; }
    .card-body { padding: 20px; position: relative; }
    .time-tabs { display: flex; gap: 4px; }
    .time-tab { min-width: 32px; padding: 3px 8px; border: 1px solid #e2e8f0; background: #fff; border-radius: 4px; font-size: 0.75rem; font-weight: 500; color: #000000; cursor: pointer; transition: all 0.2s; text-align: center; }
    .time-tab:hover { background: #f1f5f9; color: #00000; }
    .time-tab.active { background: #225AEA; color: #fff; border-color: #225AEA; }
    .metric-tabs { display: flex; gap: 4px; }
    .metric-tab { padding: 3px 8px; border: 1px solid #e2e8f0; background: #fff; border-radius: 4px; font-size: 0.75rem; font-weight: 500; color: #000000; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
    .metric-tab:hover { background: #f1f5f9; color: #00000; }
    .metric-tab.active { background: #225AEA; color: #fff; border-color: #225AEA; }
    #traffic-metric-tabs .metric-tab.active {
      background: #0f172a;
      color: #fff;
      border-color: #0f172a;
    }
    #traffic-metric-tabs .metric-tab:hover:not(.active) {
      background: #f1f5f9;
      color: #0f172a;
    }
    .chart-wrap { position: relative; height: 260px; padding: 0 8px; }
    .chart-fetching-state {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      z-index: 5;
      pointer-events: none;
    }
    .chart-fetching-state.active { display: flex; }
    .chart-fetching-state-content {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #000000;
      font-size: 0.8125rem;
      font-weight: 500;
      text-align: center;
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      padding: 10px 14px;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    }
    .chart-fetching-state .loading-spinner {
      width: 16px;
      height: 16px;
      border-width: 2px;
    }
    .media-mix-card-header { display: flex; align-items: stretch; border-bottom: 1px solid #e2e8f0; background: #fafbfc; }
    .media-mix-card-block { flex: 1; padding: 16px 20px; }
    .media-mix-card-block:first-child { border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; }
    .media-mix-card-block-ads-stack { display: flex; flex-direction: column; gap: 0; }
    .media-mix-ads-stack-total-only { flex: 1; justify-content: center; }
    .media-mix-ads-stack-dense .media-mix-card-title { font-size: 0.65625rem; letter-spacing: 0.04em; margin-bottom: 4px; }
    .media-mix-active-section { border-top: 1px solid #e8ecf1; margin-top: 12px; padding-top: 12px; }
    /* Full-bleed divider: parent .media-mix-card-block has horizontal padding; pull border edge-to-edge */
    .media-mix-card-block-ads-stack .media-mix-active-section {
      margin-left: -20px;
      margin-right: -20px;
      padding-left: 20px;
      padding-right: 20px;
    }
    .media-mix-card-title { font-size: 0.75rem; font-weight: 600; color: #000000; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
    .media-mix-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .media-mix-title-row .media-mix-card-title { margin-bottom: 0; }
    .media-mix-info-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px; color: #5b6b82; flex-shrink: 0;
        cursor: help;
    }
    .media-mix-info-icon:hover { color: #000000; }
    .media-mix-info-icon[data-tooltip-pos="right"]:before {
        max-width: 280px;
        text-align: left;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .media-mix-saved-total-count { font-size: 0.9375rem; font-weight: 600; color: #00000; line-height: 1.2; }
    .media-mix-ads-stack-total-only .media-mix-saved-total-count { font-size: 1.125rem; }
    .media-mix-ads-stack-total-only .media-mix-title-row { margin-bottom: 2px; }
    .media-mix-ads-count { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 600; }
    .media-mix-ads-count .dot { width: 6px; height: 6px; border-radius: 50%; background: #000000; flex-shrink: 0; }
    .media-mix-ads-count .active-num { color: #000000; display: inline-flex; align-items: baseline; gap: 2px; }
    .media-mix-active-section .media-mix-card-title { color: #000000; }
    .media-mix-ads-count .total-num { color: #000000; font-weight: 500; }
    .media-mix-estimate { font-weight: 600; margin-right: 1px; }
    .media-mix-growth { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; }
    .media-mix-growth.adstat-block { flex-direction: row; justify-content: flex-start; height: auto; padding: 0; }
    .media-mix-growth .adscore-ping { flex-shrink: 0; }
    .media-mix-growth-label { flex-shrink: 0; }
    .media-mix-growth.growth-hyper { color: #047857; }
    .media-mix-growth.growth-high { color: #047857; }
    .media-mix-growth.growth-up { color: #15803d; }
    .media-mix-growth.growth-stable { color: #000000; }
    .media-mix-growth.growth-down { color: #dc2626; }
    .media-mix-list { list-style: none; margin: 0; padding: 0; }
    .media-mix-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.8125rem; }
    .media-mix-item:last-child { border-bottom: none; }
    .media-mix-left { display: flex; align-items: center; gap: 10px; }
    .media-mix-icon { width: 20px; height: 20px; color: #000000; flex-shrink: 0; }
    .media-mix-label { font-weight: 500; color: #1e293b; }
    .media-mix-right { display: flex; align-items: center; gap: 8px; font-weight: 500; }
    .media-mix-pct { color: #00000; font-weight: 600; }
    .media-mix-count { display: inline-flex; align-items: center; gap: 4px; }
    .media-mix-count .dot { width: 5px; height: 5px; border-radius: 50%; background: #94a3b8; flex-shrink: 0; }
    .media-mix-count .num { font-weight: 600; }
    .media-mix-count .num-mix-total { color: #5b6b82; font-weight: 500; }
    .media-mix-count .num-total { color: #000000; font-weight: 500; }
    .media-mix-count.zero .dot { background: #cbd5e1; }
    .media-mix-count.zero .num-mix-total { color: #cbd5e1; }
    .media-mix-count.zero .num-total { color: #000000; }
    .landing-list { list-style: none; margin: 0; padding: 0; }
    .landing-column .landing-list { 
      display: grid; 
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
      gap: 0 32px; 
      align-content: start;
      grid-auto-rows: min-content;
      list-style: none; 
      margin: 0; 
      padding: 0; 
    }
    .landing-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.8125rem; }
    .landing-item:last-child { border-bottom: none; }
    .landing-url { color: #1e293b; font-weight: 600; text-decoration: none; max-width: 160px; display: flex; align-items: center; gap: 8px; position: relative; flex: 1; min-width: 0; }
    .landing-url:hover { text-decoration: none; color: #225AEA; z-index: 10; }
    .landing-visit-icon { opacity: 0; transform: translateX(-4px); transition: all 0.2s ease; color: #225AEA; flex-shrink: 0; display: flex; align-items: center; }
    .landing-url:hover .landing-visit-icon { opacity: 1; transform: translateX(0); }
    .landing-icon { width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; object-fit: cover; }
    .landing-icon-svg { width: 14px; height: 14px; color: #5b6b82; }
    .landing-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: #000000; font-weight: 500; white-space: nowrap; }
    .btn-view-more { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 10px; margin-top: 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; font-size: 0.8125rem; font-weight: 500; color: #00000; cursor: pointer; transition: all 0.2s; }
    .btn-view-more:hover { background: #f8fafc; border-color: #cbd5e1; color: #225AEA; }
    .ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
    .ad-card-placeholder { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 40px 20px; text-align: center; color: #000000; font-size: 0.875rem; }
    .ads-tooltip { position: fixed; z-index: 1000; pointer-events: none; opacity: 0; transform: translate(-50%, -100%) translateY(-8px); transition: opacity 0.12s ease, transform 0.12s ease; }
    .ads-tooltip.visible { opacity: 1; transform: translate(-50%, -100%) translateY(-8px); }
    .ads-tooltip-inner { background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.06); border: 1px solid #e2e8f0; min-width: 160px; overflow: hidden; }
    .ads-tooltip-date { padding: 8px 10px 6px; font-size: 0.6875rem; font-weight: 600; color: #000000; border-bottom: 1px solid #f1f5f9; }
    .ads-tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 0.75rem; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
    .ads-tooltip-row:last-child { border-bottom: none; }
    .ads-tooltip-row-left { display: flex; align-items: center; gap: 6px; font-weight: 500; color: #00000; }
    .ads-tooltip-row-icon { width: 12px; height: 12px; flex-shrink: 0; }
    .ads-tooltip-row-value { font-weight: 600; flex-shrink: 0; }
    .ads-tooltip-row-value.active { color: #15803d; }
    .ads-tooltip-row-value.launched { color: #000000; }
    .ads-tooltip-row-value.rate { color: #ea580c; }
    .ads-tooltip-row-value.traffic-value { color: #225AEA; }

    /* JS-based Tooltip for scrollable containers */
    .js-fixed-tooltip {
        position: fixed;
        z-index: 9999;
        pointer-events: none;
        opacity: 0;
        background: #1e293b;
        color: #fff;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        transition: opacity 0.1s ease;
        white-space: nowrap;
        transform: translate(-50%, -100%) translateY(-8px);
    }
    .js-fixed-tooltip.visible { opacity: 1; }
    .js-fixed-tooltip:after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 4px 4px 0 4px;
        border-style: solid;
        border-color: #1e293b transparent transparent transparent;
    }

    /* Custom Tooltip Styling */
    [data-tooltip] { position: relative; cursor: pointer; }
    [data-tooltip]:before, [data-tooltip]:after {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: all 0.15s cubic-bezier(0.5, 1, 0.25, 1);
        z-index: 1000;
        left: 50%;
        bottom: 100%;
        transform: translate(-50%, 8px);
    }
    [data-tooltip]:before {
        content: attr(data-tooltip);
        padding: 8px 12px;
        width: max-content;
        max-width: 300px;
        background-color: #1e293b;
        color: #fff;
        font-size: 0.75rem;
        font-weight: 500;
        text-align: center;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        margin-bottom: 8px;
        word-break: normal;
        overflow-wrap: break-word;
        white-space: normal;
        line-height: 1.4;
    }
    [data-tooltip]:after {
        content: '';
        border-style: solid;
        border-width: 5px 5px 0 5px;
        border-color: #1e293b transparent transparent transparent;
        margin-bottom: 3px;
    }
    [data-tooltip]:hover:before {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0);
    }
    [data-tooltip-pos="left"]:hover:before { transform: translate(0, 0); }
    [data-tooltip-pos="right"]:hover:before { transform: translate(0, 0); }
    
    [data-tooltip]:hover:after {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0);
    }
    [data-tooltip-pos="left"]:hover:after { transform: translate(0, 0); }
    [data-tooltip-pos="right"]:hover:after { transform: translate(0, 0); }
    
    /* Right-aligned tooltip (aligns right edge, grows left) */
    [data-tooltip-pos="left"]:before { left: auto; right: 0; transform: translate(0, 8px); max-width: 140px; }
    [data-tooltip-pos="left"]:after { left: auto; right: 10px; transform: translate(0, 8px); }
    
    /* Left-aligned tooltip (aligns left edge, grows right) */
    [data-tooltip-pos="right"]:before { left: 0; transform: translate(0, 8px); max-width: 140px; }
    [data-tooltip-pos="right"]:after { left: 10px; transform: translate(0, 8px); }

    .graph-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); border: 1px solid #e2e8f0; margin-bottom: 24px; }
    .graph-tab-panel { display: block; }
    .graph-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #fafbfc; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; gap: 8px; }
    .graph-panel-label { font-size: 0.8125rem; font-weight: 600; color: #00000; white-space: nowrap; flex-shrink: 0; }
    .graph-panel-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 1; min-width: 0; }
    @media (max-width: 480px) { .graph-panel-label { width: 100%; text-align: center; } .graph-panel-controls { width: 100%; justify-content: center; } }
    .graph-panel-body { padding: 12px 20px 0px; position: relative; }
    .graph-loader {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.88);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 20;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .graph-loader.active { display: flex; }
    .graph-loader-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .graph-loader-label {
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
        letter-spacing: 0.01em;
    }
    .chart-wrap.is-chart-loading canvas {
        opacity: 0.18;
    }
    .spinner {
        width: 24px;
        height: 24px;
        border: 3px solid #f1f5f9;
        border-top: 3px solid #225AEA;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
  </style>
  <?php include_once '../App/Views/Partials/entity-detail-tabs-shared.css.php'; ?>
  <style>
    .tab-pane { display: none; }
    .tab-pane.active { display: block; }

    /* Ad Copies Tab */
    .ad-copies-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; table-layout: fixed; }
    .ad-copies-table th { background: #f8fafc; padding: 12px 16px; text-align: left; font-size: 0.8125rem; font-weight: 600; color: #00000; border-bottom: 1px solid #e2e8f0; }
    .ad-copies-table td { padding: 16px; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; color: #334155; vertical-align: top; }
    .ad-copy-text-wrap { max-width: 100%; }
    .ad-copy-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
    .ad-copy-text.expanded { -webkit-line-clamp: unset; }
    .ad-copy-more { color: #225AEA; font-size: 0.75rem; cursor: pointer; margin-top: 4px; display: none; font-weight: 500; }
    .ad-copy-more.visible { display: inline-block; }
    .ad-copy-more:hover { text-decoration: underline; }
  </style>

  <style>
    /* --- Tab Navigation (base styles: entity-detail-tabs-shared.css.php) --- */
    .brand-tabs-header {
      margin-bottom: 20px;
    }
    /* Single bordered group — date filters read as one control */
    .brand-date-range {
      display: inline-flex;
      align-items: stretch;
      flex-shrink: 0;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      overflow: hidden;
      background: #fff;
    }
    /* Match .filter-btn height (padding + font) for toolbar alignment */
    .date-range-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      padding: 8px 12px;
      margin: 0;
      border: none;
      border-radius: 0;
      border-left: 1px solid #e2e8f0;
      background: #fff;
      font-size: 0.8125rem;
      font-weight: 500;
      color: #000000;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      text-align: center;
      white-space: nowrap;
      line-height: 1.25;
      box-sizing: border-box;
    }
    .date-range-pill:first-child { border-left: none; }
    .date-range-pill:hover:not(.active) { background: #f1f5f9; color: #00000; }
    .date-range-pill.active {
      background: #225AEA;
      color: #fff;
    }
    .date-range-pill.active:not(:first-child) { border-left-color: rgba(34, 90, 234, 0.45); }
    .date-range-pill:focus { outline: none; }
    .date-range-pill:focus-visible {
      position: relative;
      z-index: 1;
      box-shadow: inset 0 0 0 2px #225AEA, 0 0 0 2px #fff;
    }
    .date-range-pill.active:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 2px #225AEA; }
    .date-range-pill-live { gap: 6px; }
    .date-range-pill-live .live-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
      animation: brand-live-pulse 1.6s ease-out infinite;
      flex-shrink: 0;
    }
    .date-range-pill-live.active .live-dot {
      background: #fff;
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    }
    @keyframes brand-live-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
      70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
      100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }
    .brand-tab-btn { flex: 0 0 auto; }
    .brand-tab-icon { flex: 0 0 auto; stroke: currentColor; }
    .brand-insights-tip {
      font-size: 0.8125rem;
      line-height: 1.55;
      color: #1e293b;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      max-width: 52rem;
      margin: -4px 0 20px 0;
    }
    .tab-pane { display: none; animation: fadeIn 0.3s ease; }
    .tab-pane.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

    /* Loading spinner — needed in STD Meta fragment (standalone Branddetails.php had this inline) */
    .loading-spinner {
      display: inline-block;
      width: 26px;
      height: 26px;
      border: 2.5px solid rgba(34, 90, 234, 0.1);
      border-radius: 50%;
      border-top-color: #225AEA;
      border-right-color: #225AEA;
      animation: modern-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      vertical-align: middle;
    }
    @keyframes modern-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .loading-text {
      margin-left: 14px;
      color: #64748b;
      font-weight: 500;
      font-size: 0.875rem;
      letter-spacing: -0.01em;
    }
    .ad-rank-cards-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 160px;
      width: 100%;
      grid-column: 1 / -1;
      padding: 32px 16px;
      color: #64748b;
    }
    .ad-rank-chart-loading .loading-text {
      margin-left: 12px;
    }

    /* --- Ad Rank tab --- */
    /*
     * Equal-column grid (same idea as explore Meta filters). Avoid uneven flex
     * grow that left "Days running" alone and stretched date pickers full-bleed.
     */
    #ad-rank-filters-bar.dashboard-filters-explore.filters-bar {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
      align-items: stretch;
      gap: 8px;
      margin-bottom: 16px;
      padding-top: 0;
      position: relative;
      z-index: 40;
      overflow: visible !important;
      isolation: auto;
    }
    #ad-rank-filters-bar:has(.cfd-container.open) {
      z-index: 420;
    }
    #ad-rank-filters-bar > .select-wrapper {
      flex: none !important;
      min-width: 0 !important;
      max-width: none !important;
      width: auto !important;
      position: relative;
      overflow: visible !important;
    }
    #ad-rank-filters-bar > .select-wrapper > .select-label,
    #ad-rank-filters-bar > .select-wrapper > .custom-popup.hidden {
      pointer-events: none !important;
    }
    /* Never show Select2 skeletons in Ad Rank — IncExc CFD is the real control */
    #ad-rank-filters-bar .select-2-skeleton,
    #ad-rank-filters-bar .select-2-skeleton-deferred-inc-exc {
      display: none !important;
    }
    #ad-rank-filters-bar .cfd-container {
      display: block !important;
      width: 100%;
      min-width: 0 !important;
      max-width: 100%;
      position: relative;
      z-index: 3;
      overflow: visible !important;
    }
    #ad-rank-filters-bar .cfd-container[hidden] {
      display: block !important;
    }
    #ad-rank-filters-bar .cfd-container.open {
      z-index: 500;
    }
    #ad-rank-filters-bar .cfd-trigger {
      width: 100%;
      box-sizing: border-box;
      cursor: pointer;
    }
    #ad-rank-filters-bar .cfd-panel {
      z-index: 10060 !important;
    }
    #ad-rank-filters-bar .cfd-panel.open {
      display: block !important;
    }
    /* Full-width date row — override explore display:contents */
    #ad-rank-filters-bar > .date-filters-row.ad-rank-date-filters-row {
      display: grid !important;
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
      min-width: 0;
      margin-top: 0;
      overflow: visible !important;
    }
    #ad-rank-filters-bar > .date-filters-row.ad-rank-date-filters-row > .select-wrapper {
      flex: none !important;
      min-width: 0 !important;
      max-width: none !important;
      width: auto !important;
    }
    #ad-rank-filters-bar > .date-filters-row.ad-rank-date-filters-row .w-embed,
    #ad-rank-filters-bar > .date-filters-row.ad-rank-date-filters-row input.form-input {
      width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box;
    }
    #tab-ad-rank {
      overflow: visible !important;
    }
    #tab-ad-rank #ad-rank-context-strip {
      position: relative;
      z-index: 1;
    }
    #ad-rank-filters-bar > .select-wrapper:has(#ad-rank-copylengthsummary)::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 4.5H13.5M4 8H12M6 11.5H10' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    #ad-rank-filters-bar > .select-wrapper:has(#ad-rank-videolengthsummary)::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3' width='12' height='10' rx='1.5' stroke='%2394a3b8' stroke-width='1.3'/%3E%3Cpath d='M7 6v4l3.5-2L7 6z' fill='%2394a3b8'/%3E%3C/svg%3E");
    }
    #ad-rank-filters-bar > .select-wrapper:has(#ad-rank-scalingsummary)::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 11.5L6.3 7.7L8.9 10.3L13.5 5.7M10.7 5.7H13.5V8.5' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    #ad-rank-filters-bar > .select-wrapper:has(#ad-rank-mediatypesummary)::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3' width='12' height='10' rx='1.5' stroke='%2394a3b8' stroke-width='1.35'/%3E%3Ccircle cx='5.7' cy='6.5' r='1' stroke='%2394a3b8' stroke-width='1.1'/%3E%3Cpath d='M2 12l3-3.5 2 2L14 7' stroke='%2394a3b8' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    #ad-rank-filters-bar > .select-wrapper:has(#ad-rank-adscoresummary)::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2l1.42 4h4.05l-3.26 2.5 1.42 4.05L8 10.62 4.37 12.55l1.42-4.05L2.53 6h4.05L8 2z' stroke='%2394a3b8' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    #ad-rank-filters-bar > .select-wrapper:has(#ad-rank-impressionssummary)::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.9 8s2.5-4 6.1-4 6.2 4 6.2 4-2.5 4-6.1 4-6.2-4-6.2-4z' stroke='%2394a3b8' stroke-width='1.35'/%3E%3Ccircle cx='8' cy='8' r='1.85' stroke='%2394a3b8' stroke-width='1.3'/%3E%3C/svg%3E");
    }
    #ad-rank-filters-bar > .select-wrapper:has(#ad-rank-daysrunningsummary)::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5' stroke='%2394a3b8' stroke-width='1.3'/%3E%3Cpath d='M5 2v2M11 2v2M2 6.5h12' stroke='%2394a3b8' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltipadrankscaling"],
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltipadrankmediatype"],
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltipadrankadscore"],
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltipadrankimpressions"],
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltipadrankdaysrunning"] {
      padding: 15px !important;
      border: none !important;
      background-color: #fff !important;
      border-radius: 0.5em !important;
      width: 350px !important;
      box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.1) !important;
    }
    /* Range-filter dropdowns + preset pills (match Meta Ad Library / Dashboard.php) */
    #ad-rank-filters-bar .timeframe-pill {
      appearance: none;
      border: 1px solid #d1d5db;
      background: #f9fafb;
      color: #374151;
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      padding: 6px 10px;
      border-radius: 9999px;
      cursor: pointer;
      transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }
    #ad-rank-filters-bar .timeframe-pill:hover { background: #f3f4f6; border-color: #9ca3af; }
    #ad-rank-filters-bar .timeframe-pill.active {
      background: #111827;
      border-color: #111827;
      color: #fff;
    }
    #ad-rank-filters-bar .copy-length-preset-pills,
    #ad-rank-filters-bar .video-length-preset-pills,
    #ad-rank-filters-bar .days-running-preset-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 14px;
    }
    #ad-rank-filters-bar .ad-rank-choice-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 10px;
    }
    #ad-rank-filters-bar .ad-rank-choice-option {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 35px;
      padding: 0 8px;
      margin: 0;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      color: #111827;
      user-select: none;
      transition: background-color .15s ease;
    }
    #ad-rank-filters-bar .ad-rank-choice-option:hover {
      background: #f1f5f9;
    }
    #ad-rank-filters-bar .ad-rank-choice-option input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    #ad-rank-filters-bar .ad-rank-choice-check {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      border: 1.5px solid #c0c0c0;
      border-radius: 4px;
      background: #fff;
      box-sizing: border-box;
      position: relative;
      transition: background-color .15s ease, border-color .15s ease;
    }
    #ad-rank-filters-bar .ad-rank-choice-option:hover .ad-rank-choice-check {
      border-color: #94a3b8;
    }
    #ad-rank-filters-bar .ad-rank-choice-option input:checked + .ad-rank-choice-check {
      background-color: #111827;
      border-color: #111827;
      background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 10px 8px;
    }
    #ad-rank-filters-bar .ad-rank-choice-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1.2;
      flex: 1;
      min-width: 0;
    }
    #ad-rank-filters-bar .ad-rank-choice-label .adscore-pill-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"] {
      padding: 15px !important;
      border: none !important;
      background-color: #fff !important;
      border-radius: 0.5em !important;
      width: 350px !important;
      box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.1) !important;
    }
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"] .text-sm {
      font-size: 0.875rem;
      line-height: 1.25rem;
      font-weight: 500;
      margin-bottom: 0.75rem;
      color: #111827;
    }
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"] .price-input > .select-wrapper {
      max-width: 100%;
    }
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"] input.form-input[type="number"] {
      width: 100% !important;
      min-height: 29px !important;
      margin-top: 10px;
      padding: 6px 10px !important;
      font-size: 11px !important;
      line-height: 1.2 !important;
      border: 1px solid #e2e8f0 !important;
      border-radius: 8px !important;
      background: #f8fafc !important;
      color: #111827 !important;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
      box-sizing: border-box !important;
    }
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"] input.form-input[type="number"]:hover {
      border-color: #cbd5e1 !important;
      background: #f1f5f9 !important;
    }
    #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"] input.form-input[type="number"]:focus {
      border-color: #225aea !important;
      background: #eff6ff !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(34, 90, 234, 0.12), 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    }
    .ad-rank-toolbar {
      display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px;
      align-items: center; justify-content: space-between;
      position: relative;
      z-index: 1;
    }
    /* Pool popover lives in toolbar, below filters bar in DOM — lift stack when open (explore bar is z-index 15). */
    #tab-ad-rank .ad-rank-toolbar:has(#tooltipadrankpool:not(.hidden)),
    #tab-ad-rank .ad-rank-pool-filter:has(#tooltipadrankpool:not(.hidden)) {
      z-index: 450;
    }
    #tab-ad-rank #tooltipadrankpool:not(.hidden) {
      z-index: 10060 !important;
      overflow: visible !important;
    }
    .ad-rank-toolbar-left { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; }
    .ad-rank-toolbar-right { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; }
    .ad-rank-toolbar-divider { width: 1px; height: 28px; background: #e2e8f0; flex-shrink: 0; }
    .ad-rank-pool-filter { flex: 0 1 auto; min-width: 160px; max-width: 240px; position: relative; overflow: visible; }
    .ad-rank-pool-filter .div-block-71 { width: 100%; }
    .ad-rank-pool-filter #ad-rank-pool-summary {
      width: 100% !important;
      min-height: 29px;
      cursor: pointer;
      box-sizing: border-box;
    }
    #tab-ad-rank .select-wrapper > div#tooltipadrankpool {
      padding: 12px !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 12px !important;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
      width: 350px !important;
      box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.1) !important;
    }
    #tab-ad-rank .ad-rank-mode-pills {
      display: inline-flex; width: 100%; padding: 4px; gap: 4px;
      border: 1px solid #e5e7eb; border-radius: 10px; background: #f3f4f6;
    }
    #tab-ad-rank .ad-rank-mode-pills .ad-rank-mode-pill {
      flex: 1 1 0;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      color: #4b5563;
      font-weight: 600;
      text-align: center;
      padding: 7px 10px;
      cursor: pointer;
      transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }
    #tab-ad-rank .ad-rank-mode-pills .ad-rank-mode-pill:hover {
      background: #e5e7eb;
      border-color: transparent;
    }
    #tab-ad-rank .ad-rank-mode-pills .ad-rank-mode-pill.active {
      background: #111827;
      color: #fff;
      border-color: #111827;
      box-shadow: 0 1px 2px rgba(17, 24, 39, 0.15);
    }
    #tab-ad-rank .ad-rank-input-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    #tab-ad-rank .ad-rank-input-grid .ad-rank-percent-controls { grid-column: 1 / -1; }
    #tab-ad-rank .ad-rank-input-grid .form-input { background: #fff; }
    /* Preset pills — match Dashboard.php .ad-rank-filter-panel (rounded rects, not explore-bar capsules). */
    #tab-ad-rank .ad-rank-filter-panel .ad-rank-preset-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }
    #tab-ad-rank .ad-rank-filter-panel .ad-rank-preset-pills .timeframe-pill {
      appearance: none;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      background: #fff;
      color: #374151;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      padding: 7px 10px;
      cursor: pointer;
      transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }
    #tab-ad-rank .ad-rank-filter-panel .ad-rank-preset-pills .timeframe-pill:hover {
      background: #f3f4f6;
      border-color: #9ca3af;
    }
    #tab-ad-rank .ad-rank-filter-panel .ad-rank-preset-pills .timeframe-pill.active {
      background: #111827;
      border-color: #111827;
      color: #fff;
    }
    #tab-ad-rank .ad-rank-filter-panel .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    #tab-ad-rank .ad-rank-filter-panel .text-xs { font-size: 0.75rem; line-height: 1rem; }
    #tab-ad-rank .ad-rank-filter-panel .font-medium { font-weight: 500; }
    #tab-ad-rank .ad-rank-filter-panel .text-gray-600 { color: #4b5563; }
    #tab-ad-rank .ad-rank-filter-panel .mb-1\.5 { margin-bottom: 0.375rem; }
    #tab-ad-rank .ad-rank-filter-panel .mb-2 { margin-bottom: 0.5rem; }
    #tab-ad-rank .ad-rank-filter-panel .mb-3 { margin-bottom: 0.75rem; }
    #tab-ad-rank .ad-rank-filter-panel .mt-3 { margin-top: 0.75rem; }
    @media (max-width: 560px) {
      #tab-ad-rank .ad-rank-input-grid { grid-template-columns: 1fr; }
    }
    .ad-rank-context-strip {
      display: flex; flex-wrap: wrap; gap: 6px 16px;
      font-size: 12px; color: #000000; margin-bottom: 12px; padding: 8px 12px;
      background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    }
    .ad-rank-context-strip[hidden] { display: none !important; }
    .ad-rank-context-strip strong { color: #334155; font-weight: 600; }
    .ad-rank-active-filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      padding: 10px 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
    }
    .ad-rank-active-filters[hidden] { display: none !important; }
    .ad-rank-active-filters-label {
      font-size: 13px;
      font-weight: 500;
      color: #000000;
      flex-shrink: 0;
    }
    .ad-rank-active-filters-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .ad-rank-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: #f1f5f9;
      color: #334155;
      font-size: 12px;
      line-height: 1.2;
      border-radius: 9999px;
      border: 1px solid #e2e8f0;
      max-width: 100%;
    }
    .ad-rank-filter-chip-label { font-weight: 600; color: #475569; flex-shrink: 0; }
    .ad-rank-filter-chip-value {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 220px;
    }
    .ad-rank-filter-chip-remove {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      padding: 0;
      border: none;
      background: transparent;
      color: #5b6b82;
      border-radius: 50%;
      cursor: pointer;
      flex-shrink: 0;
      transition: background-color .15s ease, color .15s ease;
    }
    .ad-rank-filter-chip-remove:hover {
      background: #e2e8f0;
      color: #dc2626;
    }
    .ad-rank-clear-all-filters {
      font-size: 12px;
      font-weight: 500;
      color: #dc2626;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      flex-shrink: 0;
    }
    .ad-rank-clear-all-filters:hover { color: #b91c1c; text-decoration: underline; }
    .ad-rank-clear-all-filters[hidden] { display: none !important; }

    /* --- Brand overview: Ads for this brand filters --- */
    #brand-ads-card .brand-ads-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    #brand-ads-sort-slot .tts-cp-btn.explore-landers-sort-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 32px;
      padding: 0 10px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid #e4e4e7;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: #71717b;
      white-space: nowrap;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      max-width: min(260px, 48vw);
    }
    #brand-ads-sort-slot .tts-cp-btn.explore-landers-sort-btn:hover {
      background: #f4f4f5;
      border-color: #d1d5db;
      color: #374151;
    }
    #brand-ads-sort-slot .explore-landers-sort-btn__label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }
    /* Explore-style filter bar inside brand ads card */
    #brand-ads-card .brand-ads-filters-wrap {
      padding: 12px 16px 8px;
      background: transparent;
      border-bottom: 1px solid #e2e8f0;
      box-sizing: border-box;
      overflow: visible;
      position: relative;
      z-index: 40;
    }
    #brand-ads-filters-bar.brand-ads-filters-bar.explore-filters-scope {
      margin: 0;
      padding: 0;
      border-bottom: none;
      position: relative;
      z-index: 30;
      overflow: visible;
    }
    #brand-ads-filters-bar.brand-ads-filters-bar .filters-group {
      width: 100%;
    }
    /* Match /explore-shops: clicks hit the wrapper so custom panels open, not native <select>. */
    #brand-ads-filters-bar.explore-filters-scope .filters-group .select-wrapper > select.filter-select {
      pointer-events: none !important;
    }
    /* Portaled Countries panel: force flag sizing (source PNGs are 500×500). */
    #brandAdsCountryDropdown .visitors-country-table .vc-country-cell,
    #brandAdsCountryDropdown .visitors-country-table td.vc-col-country {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      min-width: 0 !important;
    }
    #brandAdsCountryDropdown .visitors-country-table .vc-flag,
    #brandAdsCountryDropdown .visitors-country-table td.vc-col-country img {
      width: 20px !important;
      height: 14px !important;
      max-width: 20px !important;
      max-height: 14px !important;
      object-fit: contain !important;
      object-position: center !important;
      border-radius: 2px !important;
      flex-shrink: 0 !important;
      display: inline-block !important;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
      background: #f8fafc;
    }
    #brandAdsCountryDropdown .visitors-country-table .vc-name,
    #brandAdsCountryDropdown .visitors-country-table td.vc-col-country span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 400;
      min-width: 0;
    }
    .brand-ads-active-filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 12px 0 0;
      padding: 10px 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      width: 100%;
      box-sizing: border-box;
    }
    .brand-ads-active-filters[hidden] { display: none !important; }
    .brand-ads-active-filters-label {
      font-size: 13px;
      font-weight: 500;
      color: #000;
      flex-shrink: 0;
    }
    .brand-ads-active-filters-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .brand-ads-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: #f1f5f9;
      color: #334155;
      font-size: 12px;
      line-height: 1.2;
      border-radius: 9999px;
      border: 1px solid #e2e8f0;
      max-width: 100%;
    }
    .brand-ads-filter-chip-label { font-weight: 600; color: #475569; flex-shrink: 0; }
    .brand-ads-filter-chip-value {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 220px;
    }
    .brand-ads-filter-chip-remove {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      padding: 0;
      border: none;
      background: transparent;
      color: #5b6b82;
      border-radius: 50%;
      cursor: pointer;
      flex-shrink: 0;
    }
    .brand-ads-filter-chip-remove:hover {
      background: #e2e8f0;
      color: #dc2626;
    }
    .brand-ads-clear-all-filters {
      font-size: 12px;
      font-weight: 500;
      color: #dc2626;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      flex-shrink: 0;
    }
    .brand-ads-clear-all-filters:hover { color: #b91c1c; text-decoration: underline; }
    .brand-ads-clear-all-filters[hidden] { display: none !important; }

    .brand-tab-count {
      font-size: 0.75rem;
      font-weight: 600;
      color: #000000;
      margin-left: 2px;
    }
    .partnership-ads-intro {
      margin: 0 0 14px;
      font-size: 0.8125rem;
      color: #000000;
      line-height: 1.45;
    }
    .partnership-ads-intro strong { color: #334155; font-weight: 600; }
    .partnership-ads-logo {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      object-fit: cover;
      flex-shrink: 0;
      background: #f1f5f9;
    }
    .partnership-ads-name-cell {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .partnership-ads-name-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex: 1 1 auto;
    }
    .partnership-ads-name-text {
      font-weight: 600;
      color: #1e293b;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }
    .main-domain-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 999px;
      background: #fffbf3;
      border: 1px solid #e8b84a;
      line-height: 1;
    }
    .main-domain-pill--icon {
      padding: 4px 8px;
    }
    .main-domain-pill--labeled {
      gap: 6px;
      padding: 5px 11px 5px 8px;
    }
    .main-domain-crown-icon {
      display: block;
      flex-shrink: 0;
    }
    .main-domain-pill-label {
      font-size: 0.6875rem;
      font-weight: 600;
      color: #b07d1f;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    .partnership-ads-launch-ago {
      display: block;
      margin-top: 2px;
      font-size: 0.75rem;
      color: #000000;
    }
    .partnership-ads-actions .meta-ads-header-btn {
      margin-left: 0;
    }
    .partnership-ads-examples {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
    }
    .partnership-ads-example-thumb {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      padding: 0;
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
    }
    .partnership-ads-example-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .partnership-ads-example-thumb.is-video::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.18);
      pointer-events: none;
    }
    .partnership-ads-example-thumb.is-video::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-35%, -50%);
      border-style: solid;
      border-width: 5px 0 5px 8px;
      border-color: transparent transparent transparent #fff;
      z-index: 1;
      pointer-events: none;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
    }
    .partnership-ads-examples-empty {
      font-size: 0.75rem;
      color: #5b6b82;
    }
    .ad-rank-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; }
    .ad-rank-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
    .ad-rank-card.is-empty { padding-bottom: 14px; }
    .ad-rank-card.is-empty .ad-rank-card-header { margin-bottom: 0; }
    .ad-rank-card.is-empty .ad-rank-hide-btn { display: none; }
    .ad-rank-card.is-empty .ad-rank-chart-wrapper { display: none; }
    .ad-rank-card-title {
      margin: 0;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 0.8125rem;
      font-weight: 500;
      color: #000000;
      letter-spacing: 0.01em;
      line-height: 1.2;
    }
    .ad-rank-hide-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: #000000; font-size: 0.8125rem; font-weight: 400; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
    .ad-rank-hide-btn:hover { background: #f1f5f9; color: #0f172a; }
    .ad-rank-chart-wrapper { position: relative; min-height: 320px; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
    .ad-rank-chart-wrapper.is-empty { min-height: 0; display: none; }
    .ad-rank-chart-wrapper.collapsed { min-height: 0; }
    .ad-rank-chart-wrapper.collapsed .ad-rank-chart-plot,
    .ad-rank-chart-wrapper.collapsed .ad-rank-avatar-strip { display: none !important; }
    .ad-rank-chart-wrapper.is-loading .ad-rank-chart-plot,
    .ad-rank-chart-wrapper.is-loading .ad-rank-avatar-strip { display: none !important; }
    .ad-rank-chart-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    .ad-rank-chart-empty {
      display: none;
      margin: 6px 0 0;
      padding: 0;
      text-align: left;
      color: #5b6b82;
      font-size: 0.8125rem;
      font-weight: 400;
      line-height: 1.45;
    }
    .ad-rank-card.is-empty .ad-rank-chart-empty { display: block; }
    .ad-rank-chart-plot {
      position: relative;
      height: 320px;
      border-radius: 8px;
      background: #fff;
      overflow: visible;
    }
    .ad-rank-chart-plot canvas {
      display: block;
      width: 100% !important;
      height: 320px !important;
      max-height: 320px;
    }
    .ad-rank-axis-badge {
      position: absolute;
      display: none;
      pointer-events: none;
      z-index: 4;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 10px;
      font-weight: 600;
      color: #fff;
      padding: 3px 7px;
      border-radius: 4px;
      line-height: 1.2;
      white-space: nowrap;
      transform: translate(-50%, -50%);
    }
    #ad-rank-chart-tooltip {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-weight: 400;
      min-width: 220px;
      max-width: 280px;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(226, 232, 240, 0.95);
      border-radius: 12px;
      padding: 11px 12px;
      color: #334155;
      box-shadow: 0 10px 32px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.04);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 0;
      display: none;
      transition: opacity 0.16s ease;
    }
    #ad-rank-chart-tooltip .ad-rank-tip-date {
      font-size: 0.6875rem;
      color: #5b6b82;
      font-weight: 500;
      margin-bottom: 8px;
      letter-spacing: 0.02em;
    }
    #ad-rank-chart-tooltip .ad-rank-tip-body { display: flex; gap: 9px; align-items: flex-start; }
    #ad-rank-chart-tooltip .ad-rank-tip-thumb {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      object-fit: cover;
      flex: 0 0 auto;
      border: 1px solid #e2e8f0;
    }
    #ad-rank-chart-tooltip .ad-rank-tip-name {
      font-size: 0.75rem;
      line-height: 1.35;
      font-weight: 600;
      color: #0f172a;
    }
    #ad-rank-chart-tooltip .ad-rank-tip-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.6875rem;
      margin-top: 4px;
      color: #000000;
    }
    #ad-rank-chart-tooltip .ad-rank-tip-rank strong { color: #0f172a; font-weight: 600; }
    #ad-rank-chart-tooltip .ad-rank-tip-delta { font-weight: 600; }
    #ad-rank-chart-tooltip .ad-rank-tip-delta.up { color: #15803d; }
    #ad-rank-chart-tooltip .ad-rank-tip-delta.down { color: #dc2626; }
    #ad-rank-chart-tooltip .ad-rank-tip-delta.flat { color: #5b6b82; }
    .ad-rank-avatar-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f5f9; }
    .ad-rank-avatar-strip:empty,
    .ad-rank-chart-wrapper.is-empty .ad-rank-avatar-strip { display: none; margin: 0; padding: 0; border: 0; }
    .ad-rank-avatar { width: 28px; height: 28px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, border-color 0.15s; background: #f1f5f9; flex: 0 0 auto; }
    .ad-rank-avatar img, .ad-rank-avatar video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ad-rank-avatar:hover { transform: scale(1.1); }
    .ad-rank-avatar.dimmed { opacity: 0.35; }
    #ad-rank-cards.add_list { margin-top: 4px; }
    #ad-rank-cards .one_add_wrapper.ad-rank-leaderboard-wrapper.dimmed { opacity: 0.45; }
    #ad-rank-cards .one_add_wrapper.ad-rank-leaderboard-wrapper .add_item {
      overflow: hidden;
      padding-top: 0;
    }
    .fw-ad-rank-leaderboard-ext {
      background: linear-gradient(180deg, #ecfdf5 0%, #f8fafc 100%);
      border-bottom: 1px solid #d1fae5;
      padding: 10px 12px 8px;
      margin-bottom: 8px;
      border-radius: 18px 18px 0 0;
    }
    .fw-ad-rank-leaderboard-ext-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .fw-ad-rank-leaderboard-pos {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 24px;
      padding: 0 6px;
      border-radius: 6px;
      background: rgba(15, 23, 42, 0.88);
      color: #fff;
      font-size: 0.75rem;
      font-weight: 700;
      flex: 0 0 auto;
    }
    .fw-ad-rank-leaderboard-pos.is-top-rank {
      background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 55%, #1e40af 100%);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }
    .fw-ad-rank-leaderboard-change {
      font-size: 0.8125rem;
      font-weight: 700;
      color: #0f172a;
      flex: 1 1 auto;
      min-width: 0;
    }
    .fw-ad-rank-leaderboard-pct {
      font-size: 0.8125rem;
      font-weight: 700;
      color: #15803d;
      flex: 0 0 auto;
    }
    .fw-ad-rank-leaderboard-ext-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 6px;
    }
    .fw-ad-rank-leaderboard-delta {
      font-size: 0.75rem;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .fw-ad-rank-leaderboard-delta.up { background: #dcfce7; color: #15803d; }
    .fw-ad-rank-leaderboard-delta.down { background: #fee2e2; color: #b91c1c; }
    .fw-ad-rank-leaderboard-delta.flat { background: #f1f5f9; color: #475569; }
    .fw-ad-rank-leaderboard-points {
      font-size: 0.6875rem;
      color: #000000;
    }
    .fw-ad-rank-leaderboard-spark {
      position: relative;
      height: 34px;
      margin-top: 6px;
    }
    .fw-ad-rank-leaderboard-spark canvas {
      width: 100% !important;
      height: 30px !important;
    }
    #ad-rank-spark-tooltip {
      position: fixed;
      pointer-events: none;
      z-index: 10050;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 10px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.12s ease, visibility 0.12s ease;
      white-space: nowrap;
    }
    #ad-rank-spark-tooltip.is-visible {
      opacity: 1;
      visibility: visible;
    }
    #ad-rank-spark-tooltip .ad-rank-spark-tip-date {
      color: #5b6b82;
      font-weight: 500;
      margin-bottom: 3px;
    }
    #ad-rank-spark-tooltip .ad-rank-spark-tip-rank {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #0f172a;
      font-weight: 600;
    }
    #ad-rank-spark-tooltip .ad-rank-spark-tip-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex: 0 0 auto;
    }

    /* --- Filters & Toolbar Common --- */
    .tab-toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; align-items: center; justify-content: space-between; }
    .filter-group { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
    .filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.8125rem; font-weight: 500; color: #00000; cursor: pointer; transition: all 0.2s; }
    .filter-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
    .filter-btn svg { width: 14px; height: 14px; color: #5b6b82; }
    /* Keeps Export CSV on the right whether the AI analyze button is shown or not */
    .brand-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-left: auto;
    }
    .brand-ai-analyze-btn {
      margin-left: 0;
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #1e293b;
      font-weight: 600;
    }
    .brand-ai-analyze-btn svg { color: #225AEA; }
    .brand-ai-analyze-btn:hover {
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #225AEA;
    }
    .brand-export-btn {
      background: #225aea;
      border-color: #225aea;
      color: #ffffff;
    }
    .brand-export-btn svg { color: #ffffff; }
    .brand-export-btn:hover {
      background: #1a4ac4;
      border-color: #1a4ac4;
      color: #ffffff;
    }
    .brand-ai-panel-overlay {
      position: fixed;
      inset: 0;
      z-index: 10040;
      display: none;
      justify-content: flex-end;
      background: rgba(15, 23, 42, 0.28);
    }
    .brand-ai-panel-overlay.open { display: flex; }
    .brand-ai-panel {
      width: min(520px, 100vw);
      height: 100%;
      background: #fff;
      box-shadow: -20px 0 45px rgba(15, 23, 42, 0.18);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.2s ease;
    }
    .brand-ai-panel-overlay.open .brand-ai-panel { transform: translateX(0); }
    .brand-ai-panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 22px;
      border-bottom: 1px solid #e2e8f0;
    }
    .brand-ai-panel-kicker {
      margin: 0 0 4px;
      font-size: 0.75rem;
      font-weight: 700;
      color: #225AEA;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .brand-ai-panel-title {
      margin: 0;
      color: #0f172a;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .brand-ai-panel-close {
      border: none;
      background: #f8fafc;
      color: #000000;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .brand-ai-panel-close:hover { background: #f1f5f9; color: #1e293b; }
    .brand-ai-panel-body {
      flex: 1;
      overflow-y: auto;
      padding: 22px;
      background: #fbfcfe;
    }
    .brand-ai-summary-card {
      border: 1px solid #e2e8f0;
      background: #fff;
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 16px;
      color: #00000;
      font-size: 0.8125rem;
      line-height: 1.5;
    }
    .brand-ai-result {
      border: 1px solid #e2e8f0;
      background: #fff;
      border-radius: 12px;
      padding: 18px;
      color: #1e293b;
      font-size: 0.875rem;
      line-height: 1.65;
    }
    .brand-ai-result h4 {
      margin: 18px 0 8px;
      color: #0f172a;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .brand-ai-result h4:first-child { margin-top: 0; }
    .brand-ai-result p {
      margin: 0 0 12px;
      color: #334155;
    }
    .brand-ai-result ul,
    .brand-ai-result ol {
      margin: 0 0 14px 20px;
      padding: 0;
    }
    .brand-ai-result li {
      margin: 0 0 8px;
      color: #334155;
    }
    .brand-ai-result strong {
      color: #0f172a;
      font-weight: 700;
    }
    .brand-ai-loader {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #000000;
      font-size: 0.875rem;
      padding: 22px 0;
    }
    .brand-ai-error {
      border: 1px solid #fecaca;
      background: #fef2f2;
      color: #991b1b;
      border-radius: 12px;
      padding: 14px 16px;
      font-size: 0.875rem;
      line-height: 1.5;
    }
    .brand-ai-panel-footer {
      border-top: 1px solid #e2e8f0;
      padding: 14px 22px;
      color: #000000;
      font-size: 0.75rem;
      background: #fff;
    }
    @media (max-width: 640px) {
      .brand-ai-panel { width: 100vw; }
    }
    .time-pill-group { display: inline-flex; background: #f1f5f9; padding: 2px; border-radius: 6px; }
    .time-pill { padding: 6px 12px; font-size: 0.75rem; font-weight: 600; color: #000000; border-radius: 4px; cursor: pointer; border: none; background: transparent; transition: all 0.2s; }
    .time-pill:hover { color: #334155; }
    .time-pill.active { background: #fff; color: #1e293b; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

    /* --- Ad Copies Tab --- */
    .ad-copies-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
    .ad-copies-table th { background: #fafbfc; padding: 14px 20px; text-align: left; font-size: 0.75rem; font-weight: 600; color: #000000; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid #e2e8f0; }
    .ad-copies-table td { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; color: #334155; vertical-align: top; }
    .ad-copies-table tr:last-child td { border-bottom: none; }
    .copy-text-content { font-size: 0.875rem; line-height: 1.5; color: #1e293b; max-width: 600px; }
    .copy-text-truncated { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .copy-text-expand { color: #047857; font-size: 0.75rem; font-weight: 600; cursor: pointer; margin-top: 6px; display: inline-block; }
    .copy-text-expand:hover { text-decoration: underline; }
    .ad-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.75rem; font-weight: 500; color: #00000; background: #fff; cursor: pointer; margin-right: 6px; transition: all 0.2s; }
    .ad-action-btn:hover { border-color: #cbd5e1; color: #1e293b; background: #f8fafc; }
    
    /* --- Landing Pages Tab --- */
    .landing-split-view { display: flex; height: calc(100vh - 200px); min-height: 800px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; overflow: hidden; }
    .landing-sidebar { width: 320px; flex-shrink: 0; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; background: #fafbfc; overflow-y: auto; overflow-x: visible; }
    .landing-sidebar-header { padding: 16px; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; background: #fafbfc; z-index: 1002; }
    .landing-search { width: 100%; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.8125rem; }
    .landing-list-container { flex: 1; overflow: visible; padding: 0; }
    .landing-list-item { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background 0.2s; position: relative; }
    .landing-list-item:hover { background: #f8fafc; z-index: 1001; }
    .landing-list-item.active { background: #fff; border-left: 3px solid #225AEA; box-shadow: 0 2px 4px rgba(0,0,0,0.02); padding-left: 17px; }
    .landing-item-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
    .landing-item-url { font-size: 0.8125rem; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; margin-bottom: 0; }
    .landing-item-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.2s; }
    .landing-list-item:hover .landing-item-actions { opacity: 1; }
    .landing-action-btn { background: none; border: none; padding: 4px; cursor: pointer; color: #5b6b82; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
    .landing-action-btn:hover { background: #e2e8f0; color: #225AEA; }
    .landing-item-stats { display: flex; align-items: center; gap: 9px; font-size: 0.8125rem; color: #000000; margin-top: 8px; padding-right: 4px; }
    .landing-stat { display: flex; align-items: center; gap: 3px; position: relative; flex-shrink: 0; }
    .landing-stat svg { width: 13px; height: 13px; color: #000000; flex-shrink: 0; }
    .landing-stat-value { font-weight: 500; color: #1e293b; font-size: 0.75rem; }
    
    .landing-preview-area { flex: 1; display: flex; flex-direction: column; background: #f8fafc; }
    .landing-preview-header { padding: 12px 20px; background: #fff; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; }
    .landing-preview-url { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: #00000; }
    .landing-preview-actions { display: flex; gap: 8px; }
    .landing-preview-frame { flex: 1; padding: 20px; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; overflow-x: auto; }
    .device-frame { background: #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-radius: 8px; overflow: hidden; border: none; width: fit-content; max-width: 100%; }
    .device-frame img { width: auto; height: auto; max-width: 100%; display: block; vertical-align: top; }
    .preview-screenshot-img { transition: opacity 0.2s ease; }
    #preview-screenshot-wrap { position: relative; min-height: 200px; }
    #preview-screenshot-wrap.has-screenshot { cursor: pointer; }
    #preview-screenshot-wrap.loading .preview-screenshot-loader { display: block; }
    #preview-screenshot-wrap.loading .preview-screenshot-img { opacity: 0; }
    .preview-screenshot-loader { display: none; position: absolute; inset: 0; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: preview-screenshot-shimmer 1.2s ease-in-out infinite; border-radius: 8px; z-index: 1; }
    @keyframes preview-screenshot-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .screenshot-cursor-tooltip { position: fixed; left: -9999px; top: 0; padding: 6px 10px; background: #1e293b; color: #fff; font-size: 0.75rem; font-weight: 500; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 10001; opacity: 0; transition: opacity 0.15s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
    .screenshot-cursor-tooltip.visible { opacity: 1; }
    
    .sort-option {
      display: flex; align-items: center; gap: 12px; padding: 10px 12px; 
      cursor: pointer; border-radius: 8px; font-size: 0.875rem; color: #00000; 
      user-select: none; transition: all 0.2s; font-weight: 500;
    }
    .sort-option:hover { background: #f8fafc; color: #1e293b; }
    
    .copy-text-expand {
        color: #225AEA;
        font-weight: 600;
        cursor: pointer;
        font-size: 0.8125rem;
        margin-top: 4px;
        display: none;
    }
    .copy-text-expand.visible {
        display: inline-block;
    }

    /* Filter Dropdown & Selected Tags */
    .filter-dropdown-wrapper { position: relative; }
    .filter-dropdown-menu { 
      position: absolute; top: 100%; left: 0; margin-top: 8px; 
      background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; 
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
      padding: 8px; min-width: 240px; z-index: 50; 
      display: none; opacity: 0; transform: translateY(-10px); transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .filter-dropdown-menu.show { display: block; opacity: 1; transform: translateY(0); }
    
    .filter-option { 
      display: flex; align-items: center; gap: 12px; padding: 10px 12px; 
      cursor: pointer; border-radius: 8px; font-size: 0.875rem; color: #00000; 
      user-select: none; transition: all 0.2s; font-weight: 500;
    }
    .filter-option:hover { background: #f8fafc; color: #1e293b; }
    .filter-option input { display: none; }
    
    .custom-checkbox { 
      width: 18px; height: 18px; border: 2px solid #cbd5e1; border-radius: 5px; 
      display: flex; align-items: center; justify-content: center; 
      transition: all 0.2s; background: #fff; flex-shrink: 0;
    }
    .filter-option:hover .custom-checkbox { border-color: #94a3b8; }
    .filter-option input:checked + .custom-checkbox { background: #225AEA; border-color: #225AEA; }
    .filter-option input:checked + .custom-checkbox::after { 
      content: ''; width: 10px; height: 6px; 
      border-left: 2px solid #fff; border-bottom: 2px solid #fff; 
      transform: rotate(-45deg) translate(1px, -1px); 
    }
    
    .selected-filters-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; min-height: 0; }
    .selected-filters-container:empty { display: none; }
    
    /* Blue Filter Tags */
    .filter-tag { 
      display: inline-flex; align-items: center; gap: 8px; 
      padding: 6px 12px; background: #eff6ff; border: 1px solid #bfdbfe; 
      border-radius: 20px; color: #225AEA; font-size: 0.75rem; font-weight: 600; 
    }
    .filter-tag-close { 
      cursor: pointer; display: flex; align-items: center; justify-content: center; 
      width: 16px; height: 16px; border-radius: 50%; 
      transition: all 0.2s; color: #225AEA; opacity: 0.7;
    }
    .filter-tag-close:hover { background: #225AEA; color: #fff; opacity: 1; }

    /* Lightpick Green Theme Overrides (light mode only — dark lives in trailing block) */
    html:not([data-theme="dark"]) .lightpick__day.is-start-date,
    html:not([data-theme="dark"]) .lightpick__day.is-end-date,
    html:not([data-theme="dark"]) .lightpick__day.is-start-date:hover,
    html:not([data-theme="dark"]) .lightpick__day.is-end-date:hover {
        background-color: #10b981 !important;
        background-image: none !important;
    }
    html:not([data-theme="dark"]) .lightpick__day.is-in-range {
        background-color: rgba(16, 185, 129, 0.1) !important;
    }
    html:not([data-theme="dark"]) .lightpick__day.is-in-range:hover {
        background-color: rgba(16, 185, 129, 0.2) !important;
    }
    html:not([data-theme="dark"]) .lightpick__tooltip {
        background-color: #10b981 !important;
    }
    html:not([data-theme="dark"]) .lightpick__day.is-today {
        color: #047857 !important;
    }
    
    /* Chevron rotation */
    .filter-btn .chevron { transition: transform 0.2s; }
    .filter-btn.dropdown-active .chevron { transform: rotate(180deg); }
    .filter-btn.dropdown-active { border-color: #cbd5e1; color: #1e293b; }

/* =============================================================================
   Dark mode — must live in this file because brand-details.css loads after
   dark-mode.css (standalone Brand Details + STD Meta ads embed).
   ============================================================================= */
html[data-theme="dark"] .brand-detail-page-shell,
html[data-theme="dark"] .std-meta-ads-brand-fragment {
    --dk-text: #ffffff;
    --dk-text-2: #ffffff;
    --dk-text-3: #ffffff;
    color: #ffffff;
}

html[data-theme="dark"] .brand-detail-page-shell .card,
html[data-theme="dark"] .brand-detail-page-shell .graph-card,
html[data-theme="dark"] .brand-detail-page-shell .landing-split-view,
html[data-theme="dark"] .brand-detail-page-shell .device-frame {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-border, #334155) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .brand-detail-page-shell .card-header,
html[data-theme="dark"] .brand-detail-page-shell .graph-panel-header,
html[data-theme="dark"] .brand-detail-page-shell .media-mix-card-header {
    background: var(--dk-surface-2, #0f172a) !important;
    border-color: var(--dk-border, #334155) !important;
}
html[data-theme="dark"] .brand-detail-page-shell .card-title,
html[data-theme="dark"] .brand-detail-page-shell .brand-detail-name,
html[data-theme="dark"] .brand-detail-page-shell .media-mix-label,
html[data-theme="dark"] .brand-detail-page-shell .top-insights-tag,
html[data-theme="dark"] .brand-detail-page-shell .top-insights-count,
html[data-theme="dark"] .brand-detail-page-shell .brand-tab-count,
html[data-theme="dark"] .brand-detail-page-shell .partnership-ads-intro,
html[data-theme="dark"] .brand-detail-page-shell .partnership-ads-intro strong,
html[data-theme="dark"] .brand-detail-page-shell .time-tab,
html[data-theme="dark"] .brand-detail-page-shell .metric-tab,
html[data-theme="dark"] .brand-detail-page-shell .filter-btn,
html[data-theme="dark"] .brand-detail-page-shell .filter-btn.dropdown-active {
    color: #ffffff !important;
}

/* Ads for this brand — defer capsule/CFD/pill chrome to dark-mode + dashboard-filters-explore */
html[data-theme="dark"] #brand-ads-card .brand-ads-filters-wrap {
    background: transparent !important;
    border-bottom-color: var(--dk-border, #334155) !important;
}
/* Portaled brand-ads panels (Scaling / Country / Language / searchable selects) — last word after explore-shops-filters-bar light !important */
html[data-theme="dark"] #brandAdsScalingDropdown,
html[data-theme="dark"] #brandAdsCountryDropdown,
html[data-theme="dark"] #brandAdsLanguageDropdown,
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brand-ads"],
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brandAds"],
html[data-theme="dark"] .range-slider-dropdown[data-for^="brand-ads"] {
    background: var(--dk-surface-2, #1e293b) !important;
    border-color: var(--dk-border-strong, #475569) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] #brandAdsScalingDropdown .shopify-theme-row,
html[data-theme="dark"] #brandAdsScalingDropdown .shopify-theme-row span {
    color: #fff !important;
}
html[data-theme="dark"] #brandAdsScalingDropdown .shopify-theme-row:hover {
    background: var(--dk-surface-3, #334155) !important;
}
html[data-theme="dark"] #brandAdsScalingDropdown input[type="checkbox"] {
    background: var(--dk-surface-deep, #0f172a) !important;
    border-color: var(--dk-border-strong, #475569) !important;
}
html[data-theme="dark"] #brandAdsScalingDropdown input[type="checkbox"]:checked {
    background: var(--dk-accent, #225aea) !important;
    border-color: var(--dk-accent, #225aea) !important;
}
html[data-theme="dark"] #brandAdsScalingDropdown .shopify-theme-panel-actions,
html[data-theme="dark"] #brandAdsScalingDropdown .explore-shopify-theme-footer {
    background: var(--dk-surface, #1e293b) !important;
    border-top-color: var(--dk-border, #334155) !important;
}
html[data-theme="dark"] #brandAdsScalingDropdown .explore-panel-footer-btn--secondary {
    background: var(--dk-surface-deep, #0f172a) !important;
    color: #fff !important;
    border-color: var(--dk-border-strong, #475569) !important;
}
html[data-theme="dark"] #brandAdsScalingDropdown .explore-panel-footer-btn--primary {
    background: var(--dk-accent, #225aea) !important;
    color: #fff !important;
}
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brand-ads"] .shopify-themes-search-wrap,
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brandAds"] .shopify-themes-search-wrap,
html[data-theme="dark"] #brandAdsCountryDropdown .shopify-themes-search-wrap,
html[data-theme="dark"] #brandAdsLanguageDropdown .shopify-themes-search-wrap {
    background: var(--dk-surface-2, #1e293b) !important;
    border-bottom-color: var(--dk-border, #334155) !important;
}
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brand-ads"] .shopify-themes-search-wrap input,
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brandAds"] .shopify-themes-search-wrap input,
html[data-theme="dark"] #brandAdsCountryDropdown .shopify-themes-search-wrap input,
html[data-theme="dark"] #brandAdsLanguageDropdown .shopify-themes-search-wrap input {
    background: var(--dk-surface-deep, #0f172a) !important;
    border-color: var(--dk-border-strong, #475569) !important;
    color: #fff !important;
}
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brand-ads"] .dropdown-option,
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brandAds"] .dropdown-option {
    color: #fff !important;
}
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brand-ads"] .dropdown-option:hover,
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brandAds"] .dropdown-option:hover {
    background: var(--dk-surface-3, #334155) !important;
}
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brand-ads"] .dropdown-option.selected,
html[data-theme="dark"] .dropdown-options[data-custom-dropdown-for^="brandAds"] .dropdown-option.selected {
    background: rgba(34, 90, 234, 0.2) !important;
    color: #bfdbfe !important;
}
html[data-theme="dark"] #brandAdsCountryDropdown .visitors-country-table thead th,
html[data-theme="dark"] #brandAdsLanguageDropdown .visitors-country-table thead th {
    background: var(--dk-surface, #1e293b) !important;
    color: #fff !important;
    border-bottom-color: var(--dk-border, #334155) !important;
}
html[data-theme="dark"] #brandAdsCountryDropdown .visitors-country-table tbody td,
html[data-theme="dark"] #brandAdsLanguageDropdown .visitors-country-table tbody td {
    background: var(--dk-surface-2, #1e293b) !important;
    color: #fff !important;
    border-bottom-color: var(--dk-border, #334155) !important;
}
html[data-theme="dark"] #brandAdsCountryDropdown .visitors-country-table tbody tr:hover td,
html[data-theme="dark"] #brandAdsLanguageDropdown .visitors-country-table tbody tr:hover td {
    background: var(--dk-surface-3, #334155) !important;
}
html[data-theme="dark"] #brandAdsCountryDropdown .visitors-country-panel-summary,
html[data-theme="dark"] #brandAdsLanguageDropdown .visitors-country-panel-summary,
html[data-theme="dark"] #brandAdsCountryDropdown .explore-vc-footer,
html[data-theme="dark"] #brandAdsLanguageDropdown .explore-vc-footer {
    background: var(--dk-surface, #1e293b) !important;
    border-top-color: var(--dk-border, #334155) !important;
    color: #fff !important;
}
html[data-theme="dark"] #brand-ads-sort-slot .tts-cp-btn.explore-landers-sort-btn {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-border, #334155) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
html[data-theme="dark"] #brand-ads-sort-slot .tts-cp-btn.explore-landers-sort-btn:hover {
    background: var(--dk-surface-3, #334155) !important;
    border-color: var(--dk-border-strong, #475569) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .brand-ads-clear-all-filters {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .brand-ads-clear-all-filters:hover {
    color: #fecaca !important;
}
html[data-theme="dark"] .brand-ads-active-filters {
    background: var(--dk-surface-2, #0f172a) !important;
    border-color: var(--dk-border, #334155) !important;
}
html[data-theme="dark"] .brand-ads-active-filters-label,
html[data-theme="dark"] .brand-ads-filter-chip,
html[data-theme="dark"] .brand-ads-filter-chip-label,
html[data-theme="dark"] .brand-ads-filter-chip-value {
    color: #ffffff !important;
}
html[data-theme="dark"] .brand-ads-filter-chip {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-border, #334155) !important;
}
html[data-theme="dark"] .brand-ads-filter-chip-remove {
    color: #ffffff !important;
}
html[data-theme="dark"] .brand-ads-filter-chip-remove:hover {
    background: var(--dk-surface-3, #334155) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .brand-ads-list-loading,
html[data-theme="dark"] .brand-ads-loader,
html[data-theme="dark"] #brand-ads-list-loading {
    color: #ffffff !important;
}
html[data-theme="dark"] .brand-ads-sort-dropdown.tts-cp-dropdown,
html[data-theme="dark"] .brand-ads-sort-dropdown.explore-landers-sort-dropdown {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-border, #334155) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="dark"] .brand-ads-sort-dropdown .explore-landers-sort-option,
html[data-theme="dark"] .brand-ads-sort-dropdown .explore-landers-sort-option__label,
html[data-theme="dark"] .brand-ads-sort-dropdown .explore-landers-sort-dropdown__dir-label {
    color: #ffffff !important;
}
html[data-theme="dark"] .brand-ads-sort-dropdown .explore-landers-sort-option:hover,
html[data-theme="dark"] .brand-ads-sort-dropdown .explore-landers-sort-option.is-active {
    background: var(--dk-surface-3, #334155) !important;
}
html[data-theme="dark"] .brand-ads-sort-dropdown .explore-landers-sort-dropdown__footer {
    border-top-color: var(--dk-border, #334155) !important;
}
html[data-theme="dark"] .brand-ads-sort-dropdown .explore-landers-sort-dir-toggle {
    background: var(--dk-surface-2, #0f172a) !important;
    border-color: var(--dk-border, #334155) !important;
}
html[data-theme="dark"] .brand-ads-sort-dropdown .explore-landers-sort-dir-btn {
    color: #ffffff !important;
}
html[data-theme="dark"] .brand-ads-sort-dropdown .explore-landers-sort-dir-btn.is-active {
    background: var(--dk-surface, #1e293b) !important;
    color: #ffffff !important;
}

/* ── Ad Rank tab (must win over light !important rules above) ─────────── */
html[data-theme="dark"] #tab-ad-rank,
html[data-theme="dark"] #tab-ad-rank .ad-rank-toolbar,
html[data-theme="dark"] #tab-ad-rank .ad-rank-card-title,
html[data-theme="dark"] #tab-ad-rank .ad-rank-hide-btn,
html[data-theme="dark"] #tab-ad-rank .loading-text,
html[data-theme="dark"] #tab-ad-rank .ad-rank-cards-loading,
html[data-theme="dark"] #tab-ad-rank .ad-rank-chart-empty {
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-toolbar-divider {
    background: var(--dk-border-strong, #475569) !important;
}
html[data-theme="dark"] #tab-ad-rank .brand-date-range {
    background: var(--dk-surface-3, #334155) !important;
    border-color: var(--dk-border-strong, #475569) !important;
}
html[data-theme="dark"] #tab-ad-rank .brand-date-range .date-range-pill {
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .brand-date-range .date-range-pill:hover {
    background: var(--dk-surface-2, #0f172a) !important;
}
html[data-theme="dark"] #tab-ad-rank .brand-date-range .date-range-pill.active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f172a !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-card {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-border, #334155) !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-hide-btn:hover {
    background: var(--dk-surface-2, #0f172a) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-context-strip,
html[data-theme="dark"] #tab-ad-rank .ad-rank-active-filters {
    background: var(--dk-surface-2, #0f172a) !important;
    border-color: var(--dk-border, #334155) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-context-strip strong,
html[data-theme="dark"] #tab-ad-rank .ad-rank-active-filters-label {
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-chip {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-border, #334155) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-chip-label,
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-chip-value {
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-chip-remove {
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-chip-remove:hover {
    background: var(--dk-surface-3, #334155) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-clear-all-filters {
    color: #fca5a5 !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-clear-all-filters:hover {
    color: #fecaca !important;
}

/* Within-brand rank popover — beats light gradient !important */
html[data-theme="dark"] #tab-ad-rank .select-wrapper > div#tooltipadrankpool,
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-panel {
    background: linear-gradient(180deg, var(--dk-surface-2, #0f172a) 0%, var(--dk-surface, #1e293b) 100%) !important;
    border: 1px solid var(--dk-border-strong, #475569) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-panel .text-sm,
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-panel .text-xs,
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-panel .text-gray-600,
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-panel .font-medium {
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-mode-pills {
    background: var(--dk-surface-3, #334155) !important;
    border-color: var(--dk-border-strong, #475569) !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-mode-pills .ad-rank-mode-pill {
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-mode-pills .ad-rank-mode-pill:hover {
    background: var(--dk-surface-2, #0f172a) !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-mode-pills .ad-rank-mode-pill.active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-panel .ad-rank-preset-pills .timeframe-pill,
html[data-theme="dark"] #ad-rank-filters-bar .timeframe-pill {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-border, #334155) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-panel .ad-rank-preset-pills .timeframe-pill:hover,
html[data-theme="dark"] #ad-rank-filters-bar .timeframe-pill:hover {
    background: var(--dk-surface-3, #334155) !important;
    border-color: var(--dk-border-strong, #475569) !important;
}
html[data-theme="dark"] #tab-ad-rank .ad-rank-filter-panel .ad-rank-preset-pills .timeframe-pill.active,
html[data-theme="dark"] #ad-rank-filters-bar .timeframe-pill.active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f172a !important;
}
html[data-theme="dark"] #tab-ad-rank #ad-rank-pool-summary,
html[data-theme="dark"] #tab-ad-rank .form-input,
html[data-theme="dark"] #tab-ad-rank .ad-rank-input-grid .form-input {
    background: var(--dk-surface-2, #0f172a) !important;
    border-color: var(--dk-border-strong, #475569) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #tab-ad-rank .form-input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Filter-bar tooltips / choice lists — beat #ad-rank-filters-bar specificity */
html[data-theme="dark"] #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"],
html[data-theme="dark"] #ad-rank-filters-bar > .select-wrapper > div[id^="tooltipadrank"] {
    background-color: var(--dk-surface-2, #0f172a) !important;
    border: 1px solid var(--dk-border-strong, #475569) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"] .text-sm,
html[data-theme="dark"] #ad-rank-filters-bar .select-label,
html[data-theme="dark"] #ad-rank-filters-bar .ad-rank-choice-option,
html[data-theme="dark"] #ad-rank-filters-bar .ad-rank-choice-label {
    color: #ffffff !important;
}
html[data-theme="dark"] #ad-rank-filters-bar .ad-rank-choice-option:hover {
    background: var(--dk-surface-3, #334155) !important;
}
html[data-theme="dark"] #ad-rank-filters-bar .ad-rank-choice-check {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-border-strong, #475569) !important;
}
html[data-theme="dark"] #ad-rank-filters-bar .ad-rank-choice-option:hover .ad-rank-choice-check {
    border-color: #94a3b8 !important;
}
html[data-theme="dark"] #ad-rank-filters-bar .ad-rank-choice-option input:checked + .ad-rank-choice-check {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 10px 8px !important;
}
html[data-theme="dark"] #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"] input.form-input[type="number"] {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-border-strong, #475569) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
html[data-theme="dark"] #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"] input.form-input[type="number"]:hover {
    background: var(--dk-surface-3, #334155) !important;
    border-color: var(--dk-border-strong, #475569) !important;
}
html[data-theme="dark"] #ad-rank-filters-bar > .select-wrapper > div[id^="tooltip"] input.form-input[type="number"]:focus {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-accent, #225AEA) !important;
    box-shadow: 0 0 0 3px rgba(34, 90, 234, 0.25) !important;
}
html[data-theme="dark"] #ad-rank-filters-bar .form-input {
    background: var(--dk-surface-2, #0f172a) !important;
    border-color: var(--dk-border-strong, #475569) !important;
    color: #ffffff !important;
}
/* Countries / Language IncExc — match other Ad Rank capsule borders (not blue filter-accent) */
html[data-theme="dark"] #ad-rank-filters-bar .cfd-trigger,
html[data-theme="dark"] #ad-rank-filters-bar.dashboard-filters-explore.filters-bar .cfd-trigger {
    background: var(--dk-surface-2, #0f172a) !important;
    border-color: var(--dk-border-strong, #475569) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
html[data-theme="dark"] #ad-rank-filters-bar .cfd-trigger:hover,
html[data-theme="dark"] #ad-rank-filters-bar.dashboard-filters-explore.filters-bar .cfd-trigger:hover {
    background: var(--dk-surface-3, #334155) !important;
    border-color: var(--dk-border-strong, #475569) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ad-rank-filters-bar .cfd-trigger .cfd-search-input,
html[data-theme="dark"] #ad-rank-filters-bar .cfd-search-input::placeholder {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Leaderboard card headers */
html[data-theme="dark"] .fw-ad-rank-leaderboard-ext {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.14) 0%, var(--dk-surface-2, #0f172a) 100%) !important;
    border-bottom-color: rgba(16, 185, 129, 0.28) !important;
}
html[data-theme="dark"] .fw-ad-rank-leaderboard-change,
html[data-theme="dark"] .fw-ad-rank-leaderboard-points {
    color: #ffffff !important;
}
html[data-theme="dark"] .fw-ad-rank-leaderboard-pct {
    color: #86efac !important;
}
html[data-theme="dark"] .fw-ad-rank-leaderboard-delta.up {
    background: rgba(22, 163, 74, 0.22) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .fw-ad-rank-leaderboard-delta.down {
    background: rgba(220, 38, 38, 0.22) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .fw-ad-rank-leaderboard-delta.flat {
    background: var(--dk-surface-3, #334155) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ad-rank-spark-tooltip {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-border-strong, #475569) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
}

/* Empty / search states — cover #f8fafc icon wells JS still injects */
html[data-theme="dark"] .brand-detail-page-shell [style*="background: #f8fafc"],
html[data-theme="dark"] .brand-detail-page-shell [style*="background:#f8fafc"],
html[data-theme="dark"] .std-meta-ads-brand-fragment [style*="background: #f8fafc"],
html[data-theme="dark"] .std-meta-ads-brand-fragment [style*="background:#f8fafc"] {
    background: var(--dk-surface-3, #334155) !important;
}
html[data-theme="dark"] .brand-detail-page-shell [style*="background: #fff"],
html[data-theme="dark"] .brand-detail-page-shell [style*="background:#fff"],
html[data-theme="dark"] .std-meta-ads-brand-fragment [style*="background: #fff"],
html[data-theme="dark"] .std-meta-ads-brand-fragment [style*="background:#fff"] {
    background: var(--dk-surface-2, #0f172a) !important;
    border-color: var(--dk-border, #334155) !important;
}

/* noUi range sliders (Branddetails.php inline light styles) */
html[data-theme="dark"] .brand-detail-page-shell .noUi-horizontal,
html[data-theme="dark"] .std-meta-ads-brand-fragment .noUi-horizontal {
    background: var(--dk-surface-3, #334155) !important;
}
html[data-theme="dark"] .brand-detail-page-shell .noUi-horizontal .noUi-handle,
html[data-theme="dark"] .std-meta-ads-brand-fragment .noUi-horizontal .noUi-handle {
    background: var(--dk-surface, #1e293b) !important;
    border-color: var(--dk-accent, #225AEA) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .brand-detail-page-shell .filter-input,
html[data-theme="dark"] .std-meta-ads-brand-fragment .filter-input {
    background: var(--dk-surface-2, #0f172a) !important;
    border-color: var(--dk-border, #334155) !important;
    color: #ffffff !important;
}

/* Lightpick on dark surfaces */
html[data-theme="dark"] .lightpick__day.is-start-date,
html[data-theme="dark"] .lightpick__day.is-end-date,
html[data-theme="dark"] .lightpick__day.is-start-date:hover,
html[data-theme="dark"] .lightpick__day.is-end-date:hover {
    background-color: #10b981 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .lightpick__day.is-in-range {
    background-color: rgba(16, 185, 129, 0.22) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .lightpick__day.is-in-range:hover {
    background-color: rgba(16, 185, 129, 0.35) !important;
}
html[data-theme="dark"] .lightpick__day.is-today {
    color: #6ee7b7 !important;
}

/*
 * DateRangePicker — last-word dark paint (popup is on <body>).
 * Branddetails inline light theme + CDN #fff calendar-table lose to these.
 */
html[data-theme="dark"] .daterangepicker {
    background: var(--dk-surface, #15181e) !important;
    background-color: var(--dk-surface, #15181e) !important;
    border-color: var(--dk-border-strong, #3a4252) !important;
    color: var(--dk-text, #ffffff) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
    color-scheme: dark;
}
html[data-theme="dark"] .daterangepicker:before {
    border-bottom-color: var(--dk-border-strong, #3a4252) !important;
}
html[data-theme="dark"] .daterangepicker:after {
    border-bottom-color: var(--dk-surface, #15181e) !important;
}
html[data-theme="dark"] .daterangepicker.drop-up:before {
    border-top-color: var(--dk-border-strong, #3a4252) !important;
}
html[data-theme="dark"] .daterangepicker.drop-up:after {
    border-top-color: var(--dk-surface, #15181e) !important;
}
html[data-theme="dark"] .daterangepicker .drp-calendar,
html[data-theme="dark"] .daterangepicker .calendar-table,
html[data-theme="dark"] .daterangepicker .calendar-table table {
    background: var(--dk-surface, #15181e) !important;
    background-color: var(--dk-surface, #15181e) !important;
    border-color: var(--dk-border, #2c323d) !important;
    color: var(--dk-text-2, #e4e8f0) !important;
}
html[data-theme="dark"] .daterangepicker .calendar-table thead th,
html[data-theme="dark"] .daterangepicker .calendar-table th.month,
html[data-theme="dark"] .daterangepicker .calendar-table th.available {
    background: var(--dk-surface, #15181e) !important;
    background-color: var(--dk-surface, #15181e) !important;
    color: var(--dk-text-2, #e4e8f0) !important;
}
html[data-theme="dark"] .daterangepicker .calendar-table thead tr:nth-child(2) th {
    color: var(--dk-text-3, #bcc5d4) !important;
    font-weight: 600;
}
html[data-theme="dark"] .daterangepicker .calendar-table th.month {
    color: var(--dk-text, #ffffff) !important;
}
html[data-theme="dark"] .daterangepicker .calendar-table td {
    color: var(--dk-text-2, #e4e8f0) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .daterangepicker .calendar-table .next span,
html[data-theme="dark"] .daterangepicker .calendar-table .prev span {
    border-color: var(--dk-text-2, #e4e8f0) !important;
}
html[data-theme="dark"] .daterangepicker select.monthselect,
html[data-theme="dark"] .daterangepicker select.yearselect,
html[data-theme="dark"] .daterangepicker select.hourselect,
html[data-theme="dark"] .daterangepicker select.minuteselect,
html[data-theme="dark"] .daterangepicker select.secondselect,
html[data-theme="dark"] .daterangepicker select.ampmselect {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: var(--dk-surface-2, #1b1f27) !important;
    background-color: var(--dk-surface-2, #1b1f27) !important;
    background-image: none !important;
    border: 1px solid var(--dk-border-strong, #3a4252) !important;
    border-radius: 6px !important;
    color: var(--dk-text, #ffffff) !important;
    color-scheme: dark;
}
html[data-theme="dark"] .daterangepicker .drp-buttons,
html[data-theme="dark"] .daterangepicker.show-ranges .ranges,
html[data-theme="dark"] .daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-color: var(--dk-border, #2c323d) !important;
}
html[data-theme="dark"] .daterangepicker .drp-selected {
    color: var(--dk-text-2, #e4e8f0) !important;
}
html[data-theme="dark"] .daterangepicker .drp-buttons .btn-default {
    background: transparent !important;
    color: var(--dk-text-2, #e4e8f0) !important;
}
html[data-theme="dark"] .daterangepicker .drp-buttons .btn-default:hover {
    background: var(--dk-surface-2, #1b1f27) !important;
    color: var(--dk-text, #ffffff) !important;
}
html[data-theme="dark"] .daterangepicker .drp-buttons .btn-primary,
html[data-theme="dark"] .daterangepicker .drp-buttons .applyBtn {
    background: var(--dk-accent, #225aea) !important;
    border-color: var(--dk-accent, #225aea) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .daterangepicker .ranges li {
    color: var(--dk-text-2, #e4e8f0) !important;
}
html[data-theme="dark"] .daterangepicker .ranges li:hover {
    background: var(--dk-surface-2, #1b1f27) !important;
    color: var(--dk-text, #ffffff) !important;
}
html[data-theme="dark"] .daterangepicker .ranges li.active {
    background: var(--dk-accent, #225aea) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range,
html[data-theme="dark"] .daterangepicker td.off.start-date,
html[data-theme="dark"] .daterangepicker td.off.end-date {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--dk-text-3, #bcc5d4) !important;
}
html[data-theme="dark"] .daterangepicker td.available {
    color: var(--dk-text-2, #e4e8f0) !important;
}
html[data-theme="dark"] .daterangepicker td.in-range {
    background: rgba(34, 90, 234, 0.18) !important;
    background-color: rgba(34, 90, 234, 0.18) !important;
    color: var(--dk-text, #ffffff) !important;
}
html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover,
html[data-theme="dark"] .daterangepicker td.start-date,
html[data-theme="dark"] .daterangepicker td.end-date,
html[data-theme="dark"] .daterangepicker td.start-date.end-date {
    background: var(--dk-accent, #225aea) !important;
    background-color: var(--dk-accent, #225aea) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover {
    background: var(--dk-surface-2, #1b1f27) !important;
    background-color: var(--dk-surface-2, #1b1f27) !important;
    color: var(--dk-text, #ffffff) !important;
}