/* Public Creator Page (Link-in-Bio) — deliberately its own, lighter,
   more visual language than design-system.css (the internal SaaS shell).
   Mobile-first: base rules target small screens, the desktop query widens
   the card into a centered column rather than a different layout. */

:root {
  --cp-bg: #FAFAFB;
  --cp-surface: #FFFFFF;
  --cp-border: #ECECEF;
  --cp-text: #16181D;
  --cp-text-secondary: #6B7280;
  /* Brand palette. #5a214f carries every interactive/branded element; the
     three lighter values are supporting, never text — each is far too light
     to sit under body copy. Contrast measured, not assumed: white on the
     primary is 11.9:1, and the primary on --cp-accent-soft is 8.72:1, so the
     chip pattern (accent text on accent-soft) passes AA comfortably.
     The blues are reserved for data — chart series and the info state —
     rather than competing with the primary for the same jobs. */
  --cp-accent: #5a214f;
  --cp-accent-soft: #ffcdfc;
  --cp-accent-hover: #47193F;
  --cp-data-1: #8eb1ea;
  --cp-data-2: #c1caff;
  --cp-radius-lg: 20px;
  --cp-radius-md: 14px;
  --cp-radius-full: 999px;
  --cp-shadow: 0 2px 10px rgba(20,20,30,.06), 0 10px 30px rgba(20,20,30,.05);
  --cp-space-1: 4px; --cp-space-2: 8px; --cp-space-3: 12px; --cp-space-4: 16px;
  --cp-space-5: 20px; --cp-space-6: 24px; --cp-space-8: 32px;
  --cp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cp-bg: #0F1115; --cp-surface: #1A1D24; --cp-border: #2A2E38;
    --cp-text: #F2F3F5; --cp-text-secondary: #9AA0AC;
    /* Dark ground needs the relationship inverted: a light pink surface
       would glare, so accent-soft becomes a deep tint of the primary and
       the accent itself lifts to stay legible against it. */
    --cp-accent: #d98fc9; --cp-accent-soft: #3A1733; --cp-accent-hover: #e9a9dc;
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--cp-bg); color: var(--cp-text);
  font-family: var(--cp-font); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.cp-page { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--cp-bg); position: relative; }
@media (min-width: 640px) {
  .cp-page { max-width: 520px; margin: var(--cp-space-6) auto; border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow); overflow: hidden; min-height: auto; }
}

/* ── private / unavailable state ─────────────────────────────────── */
.cp-unavailable {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; text-align: center; padding: var(--cp-space-8);
}
.cp-unavailable h1 { font-size: 20px; margin: var(--cp-space-4) 0 var(--cp-space-2); }
.cp-unavailable p { color: var(--cp-text-secondary); font-size: 14px; }

/* ── preview banner ───────────────────────────────────────────────── */
.cp-preview-banner {
  background: var(--cp-accent); color: #fff; text-align: center; font-size: 12px;
  font-weight: 600; padding: var(--cp-space-2); position: sticky; top: 0; z-index: 50;
}

/* ── hero ──────────────────────────────────────────────────────────── */
.cp-hero { position: relative; }
.cp-cover {
  height: 150px; width: 100%; object-fit: cover; background: linear-gradient(135deg, var(--cp-accent), var(--cp-data-2));
}
.cp-cover-placeholder { height: 150px; width: 100%; background: linear-gradient(135deg, var(--cp-accent), var(--cp-data-2)); }
.cp-avatar-wrap { display: flex; justify-content: center; margin-top: -48px; position: relative; z-index: 2; }
.cp-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--cp-surface); background: var(--cp-surface); box-shadow: var(--cp-shadow);
}
.cp-avatar-fallback {
  width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--cp-surface);
  background: var(--cp-accent-soft); color: var(--cp-accent); display: flex; align-items: center;
  justify-content: center; font-size: 32px; font-weight: 700; box-shadow: var(--cp-shadow);
}

/* ── identity ─────────────────────────────────────────────────────── */
.cp-identity { text-align: center; padding: var(--cp-space-3) var(--cp-space-5) 0; }
.cp-name { font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; }
.cp-verified { color: var(--cp-accent); flex-shrink: 0; }
.cp-username { color: var(--cp-text-secondary); font-size: 14px; margin-top: 2px; }

/* ── bio ──────────────────────────────────────────────────────────── */
.cp-bio {
  padding: var(--cp-space-3) var(--cp-space-5) 0; font-size: 14px; line-height: 1.5; text-align: center;
  white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-bio.expanded { -webkit-line-clamp: unset; }
.cp-bio-toggle { display: block; margin: 2px auto 0; background: none; border: none; color: var(--cp-accent); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* ── tags ─────────────────────────────────────────────────────────── */
.cp-tags { display: flex; gap: var(--cp-space-2); overflow-x: auto; padding: var(--cp-space-3) var(--cp-space-5) 0; scrollbar-width: none; }
.cp-tags::-webkit-scrollbar { display: none; }
.cp-tag { flex-shrink: 0; padding: 5px 14px; border-radius: var(--cp-radius-full); background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ── social icons ─────────────────────────────────────────────────── */
.cp-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--cp-space-3); padding: var(--cp-space-4) var(--cp-space-5) 0; }
.cp-social-btn {
  width: 42px; height: 42px; border-radius: 50%; background: var(--cp-surface); border: 1px solid var(--cp-border);
  display: flex; align-items: center; justify-content: center; color: var(--cp-text); text-decoration: none;
  transition: transform .1s ease;
}
.cp-social-btn:active { transform: scale(.92); }

/* ── tab nav ──────────────────────────────────────────────────────── */
.cp-tabs {
  display: flex; margin: var(--cp-space-5) var(--cp-space-4) 0; background: var(--cp-surface);
  border: 1px solid var(--cp-border); border-radius: var(--cp-radius-full); padding: 3px; position: sticky; top: 0; z-index: 10;
}
.cp-tab {
  flex: 1; text-align: center; padding: 9px 4px; border-radius: var(--cp-radius-full); font-size: 13px; font-weight: 600;
  color: var(--cp-text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;
}
.cp-tab.active { background: var(--cp-accent); color: #fff; }

.cp-tabpanel { display: none; padding: var(--cp-space-4) var(--cp-space-4) var(--cp-space-8); }
.cp-tabpanel.active { display: block; }

/* ── coupon cards ─────────────────────────────────────────────────── */
.cp-coupon {
  display: flex; align-items: center; gap: var(--cp-space-3); background: var(--cp-surface);
  border: 1px dashed var(--cp-accent); border-radius: var(--cp-radius-md); padding: var(--cp-space-3);
  margin-bottom: var(--cp-space-3);
}
.cp-coupon-logo { width: 44px; height: 44px; border-radius: var(--cp-radius-md); object-fit: cover; flex-shrink: 0; background: var(--cp-accent-soft); }
.cp-coupon-logo-fallback { width: 44px; height: 44px; border-radius: var(--cp-radius-md); background: var(--cp-accent-soft); color: var(--cp-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.cp-coupon-body { flex: 1; min-width: 0; }
.cp-coupon-brand { font-weight: 700; font-size: 14px; }
.cp-coupon-brand a { color: inherit; text-decoration: none; }
.cp-coupon-meta { font-size: 11px; color: var(--cp-text-secondary); margin-top: 2px; }
.cp-coupon-code {
  display: flex; align-items: center; gap: 6px; background: var(--cp-accent-soft); color: var(--cp-accent);
  border: none; border-radius: var(--cp-radius-full); padding: 7px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; flex-shrink: 0;
}

/* ── general links ────────────────────────────────────────────────── */
.cp-link {
  display: flex; align-items: center; gap: var(--cp-space-3); background: var(--cp-surface);
  border: 1px solid var(--cp-border); border-radius: var(--cp-radius-md); padding: var(--cp-space-3);
  margin-bottom: var(--cp-space-3); text-decoration: none; color: var(--cp-text);
}
.cp-link-thumb { width: 44px; height: 44px; border-radius: var(--cp-radius-md); object-fit: cover; flex-shrink: 0; background: var(--cp-accent-soft); }
.cp-link-body { flex: 1; min-width: 0; }
.cp-link-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-link-subtitle { font-size: 12px; color: var(--cp-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cp-empty { text-align: center; color: var(--cp-text-secondary); font-size: 13px; padding: var(--cp-space-8) 0; }

/* ── business insights ────────────────────────────────────────────── */
.cp-insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cp-space-3); }
.cp-insight-card { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-md); padding: var(--cp-space-4); }
.cp-insight-card.wide { grid-column: 1 / -1; }
.cp-insight-label { font-size: 11px; color: var(--cp-text-secondary); font-weight: 600; }
.cp-insight-value { font-size: 22px; font-weight: 800; margin-top: 4px; }
.cp-insight-unavailable { font-size: 12px; color: var(--cp-text-secondary); margin-top: 4px; }

/* ── business insights: social network selector (Part XXII) ───────── */
.cp-ins-platform-selector {
  display: flex; gap: var(--cp-space-2); overflow-x: auto; scrollbar-width: none;
  margin-bottom: var(--cp-space-3); padding-bottom: 2px;
}
.cp-ins-platform-selector::-webkit-scrollbar { display: none; }
.cp-ins-platform-chip {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 12px; border-radius: var(--cp-radius-full); border: 1px solid var(--cp-border);
  background: var(--cp-surface); color: var(--cp-text); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.cp-ins-platform-chip.active { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; }
.cp-ins-platform-chip.muted { color: var(--cp-text-secondary); opacity: .6; cursor: default; }
.cp-ins-platform-chip-badge {
  font-size: 10px; font-weight: 700; color: var(--cp-accent); background: var(--cp-accent-soft);
  border-radius: var(--cp-radius-full); padding: 2px 6px;
}
.cp-ins-platform-panel { display: none; }
.cp-ins-platform-panel.active { display: block; }
.cp-ins-coming-soon {
  text-align: center; color: var(--cp-text-secondary); font-size: 13px;
  padding: var(--cp-space-8) var(--cp-space-4);
}

/* ── business insights: full dashboard (Part XX) ─────────────────── */
.cp-ins-period-toggle {
  display: flex; gap: 4px; background: var(--cp-surface); border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-full); padding: 3px; margin-bottom: var(--cp-space-3);
  position: sticky; top: 40px; z-index: 9;
}
.cp-ins-period-btn {
  flex: 1; text-align: center; padding: 7px 4px; border-radius: var(--cp-radius-full); font-size: 12px;
  font-weight: 600; color: var(--cp-text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;
}
.cp-ins-period-btn.active { background: var(--cp-accent-soft); color: var(--cp-accent); }
.cp-ins-period { display: none; }
.cp-ins-period.active { display: block; }

.cp-ins-sync-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cp-space-2);
  background: var(--cp-accent-soft); border-radius: var(--cp-radius-md); padding: var(--cp-space-2) var(--cp-space-3);
  font-size: 11px; color: var(--cp-text-secondary); margin-bottom: var(--cp-space-4);
}
.cp-ins-sync-bar-readonly { background: transparent; border: 1px solid var(--cp-border); }
.cp-ins-sync-btn {
  display: flex; align-items: center; gap: 4px; background: var(--cp-accent); color: #fff; border: none;
  border-radius: var(--cp-radius-full); padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* ── insights tab token layer ──────────────────────────────────────────
   Scoped to the insights panel ONLY, so the rest of the creator page is
   untouched and this whole look can be reverted by deleting one block.

   The goal is "familiar to someone who reads Instagram's own insights",
   deliberately not a copy of it: the borrowed part is STRUCTURE and
   TYPOGRAPHY — hairline separators instead of boxed cards, a large tight
   numeral over a small quiet label, generous whitespace. The brand's purple
   accent stays; Instagram's blue and its purple-orange gradient are both
   avoided on purpose, since imitating Meta's own palette on a page that
   displays Instagram data reads as official affiliation — exactly what
   App Review looks for, and we are about to submit.

   Most tokens resolve to existing --cp-* values so dark mode keeps working
   with no second set of overrides. */
#cp-tabpanel-insights {
  /* Cards, deliberately back. An earlier pass made these transparent with no
     border, reaching for whitespace-led separation; with a dozen metrics on a
     480px page it just removed the boundary between one figure and the next,
     and "where does this metric end" became guesswork. Whitespace separates
     two things well and twelve things badly. */
  --cp-ins-card-bg: var(--cp-surface);
  --cp-ins-card-border: var(--cp-border);
  --cp-ins-card-pad: 9px 11px;
  --cp-ins-divider: var(--cp-border);
  --cp-ins-label: var(--cp-text-secondary);
  --cp-ins-label-size: 11px;
  /* Smaller than the borderless version used: 26px was legible floating in
     space, but crowds the walls of a narrow card. The quiet typography — light
     label, tight tracking, LTR numerals — is what worked and is unchanged. */
  --cp-ins-value-size: 20px;
  --cp-ins-value-weight: 600;
  --cp-ins-small-value-size: 15px;
  /* 8px, not 20px. The gap's job is now to separate cards that already have
     edges, not to do the separating by itself. */
  --cp-ins-gap: var(--cp-space-2);
  --cp-ins-up: #16A34A;
  --cp-ins-down: #DC2626;
}

.cp-ins-section { margin-bottom: var(--cp-space-6); }
.cp-ins-section-title {
  font-size: 13px; font-weight: 600; color: var(--cp-ins-label);
  margin: 0 0 var(--cp-space-4); padding-bottom: var(--cp-space-2);
  border-bottom: 1px solid var(--cp-ins-divider);
}

.cp-ins-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cp-ins-gap); }
.cp-ins-stat {
  background: var(--cp-ins-card-bg); border: 1px solid var(--cp-ins-card-border);
  border-radius: var(--cp-radius-md); padding: var(--cp-ins-card-pad);
}
/* Label above value, not below: the number is the thing being read, and
   leading with it is what makes these scan like a stats row rather than a
   form. */
.cp-ins-stat-label { font-size: var(--cp-ins-label-size); color: var(--cp-ins-label); font-weight: 400; }
.cp-ins-stat-value {
  font-size: var(--cp-ins-value-size); font-weight: var(--cp-ins-value-weight);
  margin-top: 2px; letter-spacing: -.02em;
  /* Numerals read left-to-right even on an RTL page. */
  direction: ltr; text-align: start;
}
.cp-ins-stat-growth { font-size: 12px; font-weight: 500; margin-top: 2px; direction: ltr; text-align: start; }
.cp-ins-stat-growth.up { color: var(--cp-ins-up); }
.cp-ins-stat-growth.down { color: var(--cp-ins-down); }

.cp-ins-chart-caption {
  display: flex; justify-content: space-between; font-size: 10px;
  color: var(--cp-text-secondary); margin-top: var(--cp-space-3); direction: ltr;
}
.cp-ins-chart-wrap { height: 120px; margin-top: 2px; }
.cp-ins-chart { width: 100% !important; height: 100% !important; }

.cp-ins-content-table { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.cp-ins-content-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 4px; align-items: center;
  padding: var(--cp-space-2) var(--cp-space-1); font-size: 12px; border-bottom: 1px solid var(--cp-border);
}
.cp-ins-content-head { font-size: 10.5px; color: var(--cp-text-secondary); font-weight: 700; border-bottom: 1px solid var(--cp-border); }
.cp-ins-content-row.cp-ins-content-head span,
.cp-ins-content-row.cp-ins-content-head button {
  background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 0; text-align: inherit;
}
.cp-ins-span-rest { grid-column: 2 / -1; }

.cp-ins-top-block { margin-bottom: var(--cp-space-4); }
.cp-ins-top-block-title { font-size: 12px; font-weight: 700; color: var(--cp-text-secondary); margin-bottom: var(--cp-space-2); }

.cp-ins-small-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cp-ins-gap); }
.cp-ins-small-stat {
  background: var(--cp-ins-card-bg); border: 1px solid var(--cp-ins-card-border);
  border-radius: var(--cp-radius-md); padding: var(--cp-ins-card-pad);
}
.cp-ins-small-stat-label { font-size: var(--cp-ins-label-size); color: var(--cp-ins-label); font-weight: 400; }
.cp-ins-small-stat-value {
  font-size: var(--cp-ins-small-value-size); font-weight: var(--cp-ins-value-weight);
  margin-top: 2px; letter-spacing: -.02em; direction: ltr; text-align: start;
}

.cp-ins-bar-row { display: flex; align-items: center; gap: var(--cp-space-2); font-size: 12px; margin-bottom: var(--cp-space-2); }
.cp-ins-bar-row > span:first-child { width: 56px; flex-shrink: 0; color: var(--cp-text-secondary); }
.cp-ins-bar-row > span:last-child { width: 42px; flex-shrink: 0; text-align: left; font-weight: 700; }
.cp-ins-bar { flex: 1; height: 8px; border-radius: var(--cp-radius-full); background: var(--cp-accent-soft); overflow: hidden; }
.cp-ins-bar-fill { height: 100%; background: var(--cp-accent); border-radius: var(--cp-radius-full); }

.cp-ins-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cp-space-4); margin-top: var(--cp-space-3); }
.cp-ins-rank-list { margin: 0; padding-inline-start: 18px; font-size: 12px; }
.cp-ins-rank-list li { margin-bottom: 4px; }

.cp-ins-heatmap-row { display: flex; gap: 3px; margin-top: var(--cp-space-2); }
.cp-ins-heatmap-hours { flex-wrap: wrap; }
/* No aspect-ratio. With flex:1 the cell stretched to fill the row and then
   matched that width in height — seven day cells on a 480px page became 60px
   squares wrapped around a 9px number, sized by the container rather than by
   anything inside them. A fixed, small height makes these read as a strip. */
.cp-ins-heatmap-cell {
  flex: 1; min-width: 26px; height: 26px; background: var(--cp-accent); border-radius: 5px;
  display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; font-weight: 700;
}
/* The hours row carries 24 values and wraps, so it goes thinner still. */
.cp-ins-heatmap-cell.sm { min-width: 18px; height: 20px; font-size: 8px; border-radius: 4px; }

.cp-ins-ai-list { margin: 0; padding-inline-start: 18px; font-size: 13px; line-height: 1.7; }
.cp-ins-ai-list li { margin-bottom: 6px; }

/* The small-stat grid holds the eleven advanced metrics. Waiting for 640px
   left them in two stretched columns for the entire mobile range, which is
   where this page is actually read. */
@media (min-width: 420px) {
  .cp-ins-small-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) {
  .cp-ins-stat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── portfolio ────────────────────────────────────────────────────── */
.cp-portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cp-space-3); }
.cp-portfolio-card { border-radius: var(--cp-radius-md); overflow: hidden; background: var(--cp-surface); border: 1px solid var(--cp-border); text-decoration: none; color: var(--cp-text); display: block; }
.cp-portfolio-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cp-accent-soft); display: block; }
.cp-portfolio-thumb-fallback { width: 100%; aspect-ratio: 1; background: var(--cp-accent-soft); display: flex; align-items: center; justify-content: center; color: var(--cp-accent); }
.cp-portfolio-body { padding: var(--cp-space-2) var(--cp-space-3) var(--cp-space-3); }
.cp-portfolio-brand { font-size: 11px; color: var(--cp-text-secondary); }
.cp-portfolio-title { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── footer ───────────────────────────────────────────────────────── */
.cp-footer { text-align: center; padding: var(--cp-space-6) var(--cp-space-4) var(--cp-space-8); color: var(--cp-text-secondary); font-size: 11px; }
.cp-footer a { color: inherit; }

.cp-legal-footer {
  text-align: center; padding: var(--cp-space-4) var(--cp-space-4) var(--cp-space-8);
  color: var(--cp-text-secondary); font-size: 11px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.cp-legal-footer a { color: inherit; text-decoration: underline; }

.ws-skip-link {
  position: absolute; inset-inline-start: -9999px; top: auto;
  background: var(--cp-accent); color: #fff;
  padding: 10px 16px; border-radius: var(--cp-radius-md);
  z-index: 1000; font-weight: 600; text-decoration: none;
}
.ws-skip-link:focus {
  position: fixed; inset-inline-start: 16px; top: 16px;
}

/* ── toast (copy confirmation) ───────────────────────────────────── */
.cp-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--cp-text); color: var(--cp-bg); padding: 10px 18px; border-radius: var(--cp-radius-full);
  font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s ease, transform .15s ease; z-index: 100;
  pointer-events: none;
}
.cp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── TikTok video list ─────────────────────────────────────────────────
   Same card language as the metric cards above — surface, hairline border,
   quiet label — and deliberately none of TikTok's own palette, for the same
   reason Meta's was avoided: borrowing a platform's brand colours on a page
   that displays its data reads as official affiliation. */
.cp-tt-video {
  display: flex; align-items: center; gap: var(--cp-space-3);
  background: var(--cp-surface); border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-md); padding: 8px 10px; margin-bottom: var(--cp-space-2);
}
.cp-tt-video-cover {
  width: 44px; height: 58px; flex-shrink: 0; object-fit: cover;
  border-radius: 8px; background: var(--cp-accent-soft);
}
.cp-tt-video-cover-empty { background: var(--cp-accent-soft); }
.cp-tt-video-body { flex: 1; min-width: 0; }
.cp-tt-video-title {
  font-size: 13px; font-weight: 600; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-tt-video-date { font-size: 11px; color: var(--cp-text-secondary); margin-bottom: 3px; }
/* Wraps rather than scrolls: four counts do not fit one 480px line, and a
   horizontal scrollbar inside a list row is worse than a second line. */
.cp-tt-video-stats {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11px; color: var(--cp-text-secondary);
}
.cp-tt-video-open {
  flex-shrink: 0; color: var(--cp-text-secondary); text-decoration: none;
  display: flex; align-items: center;
}

/* ── WhatsApp (manually reported) ───────────────────────────────────────
   Same surface/hairline card language as everything else on this page, and
   deliberately no WhatsApp green — the rule already applied to Meta and
   TikTok: a platform's brand colours on a page showing its data read as
   official affiliation. */
/* No self-padding: .cp-wa now lives inside .cp-ins-section, inside
   #cp-tabpanel-insights, both of which already supply the page's ambient
   padding/margin. The padding here was written for when this sat directly
   under .cp-page (no ambient padding there) — left in place it would have
   doubled up and misaligned this section against its siblings (Overview,
   Content Performance, ...), none of which pad themselves. */
.cp-wa-status {
  background: var(--cp-surface); border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-md); padding: var(--cp-space-3);
  margin-bottom: var(--cp-space-2); text-align: center;
}
.cp-wa-status-value { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.cp-wa-status-label { font-size: 11px; color: var(--cp-text-secondary); margin-top: 2px; }
.cp-wa-status-label a { color: var(--cp-accent); text-decoration: none; }
.cp-wa-group {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cp-space-3);
  background: var(--cp-surface); border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-md); padding: 10px 12px; margin-bottom: var(--cp-space-2);
}
.cp-wa-cluster { display: block; }
.cp-wa-cluster > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cp-space-3);
  cursor: pointer; list-style: none;
}
.cp-wa-cluster > summary::-webkit-details-marker { display: none; }
.cp-wa-group-name { font-size: 13px; font-weight: 600; }
.cp-wa-group-meta { font-size: 11px; color: var(--cp-text-secondary); margin-top: 2px; }
.cp-wa-subgroup {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cp-space-3);
  padding: 8px 0 0; margin-top: 8px; border-top: 1px solid var(--cp-border);
}
.cp-wa-join {
  flex-shrink: 0; font-size: 12px; font-weight: 600; text-decoration: none;
  color: var(--cp-accent); background: var(--cp-accent-soft);
  padding: 5px 12px; border-radius: var(--cp-radius-full);
}
.cp-wa-note { font-size: 11px; color: var(--cp-text-secondary); margin: var(--cp-space-2) 0 0; text-align: center; }