/* Brand Reputation Analysis — editorial, free-flowing layout.
   Serif (brand guideline font) ONLY on headlines; Inter everywhere else.
   Full-width fluid page, no box-in-box chrome: sections flow with whitespace,
   charts sit directly on the page. Per-brand accent via JS (--acc/--headerbg). */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --panel: #f4f6fd;
  --ink: #0c1233;
  --ink-2: #444d78;
  --muted: #7d86ad;
  --line: #e6eaf6;
  --grid: #e6eaf6;

  /* per-brand (overridden by JS): */
  --acc: #14259b;
  --headerbg: #14259b;
  --acc-soft: rgba(20, 37, 155, 0.08);

  --pos: #12a150;
  --neu: #c69a2e;
  --neg: #d0392f;
  --seq: var(--acc);
  --c-google: #2a78d6;
  --c-district: #c69a2e;
  --c-zomato: #d0392f;
  --c-swiggy: #eb6834;
  --c-instagram: #d5457f;
  --c-facebook: #4a3aa7;
  --c-youtube: #1baf7a;
  --c-reddit: #1e8e3e;
  --star: #c69a2e;

  --serif: "Playfair Display", Georgia, serif;      /* brand headline font ONLY */
  --sans: "Inter", system-ui, -apple-system, sans-serif;  /* everything informative */
  --pad: clamp(24px, 4vw, 64px);
}
:root[data-theme="dark"] {
  --bg: #0b0e1d;
  --surface: #10142a;
  --panel: #151a33;
  --ink: #f2f4fb;
  --ink-2: #b6bdde;
  --muted: #7c85ad;
  --line: #232948;
  --grid: #232948;
  --acc-soft: rgba(120, 140, 255, 0.14);
  --pos: #2fbf6b;
  --neu: #d9ae45;
  --neg: #e05b52;
  --c-google: #5b9bf0;
  --c-district: #d9ae45;
  --c-zomato: #e05b52;
  --c-swiggy: #f0784a;
  --c-instagram: #e5679c;
  --c-facebook: #9085e9;
  --c-youtube: #2fbf8a;
  --c-reddit: #4bb865;
  --star: #d9ae45;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }

/* full-width fluid page — no white side columns */
.wrap { width: 100%; margin: 0; padding: 0 var(--pad) 90px; }

/* ── brand header bar (full bleed) ── */
.hdr {
  background: var(--headerbg); color: #fff;
  margin: 0 calc(-1 * var(--pad)) 34px; padding: 16px var(--pad);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.hdr img.logo { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; background: #fff; }
.hdr .hdr-name { font: 700 20px/1.2 var(--serif); }
.hdr .hdr-sub { font-size: 13px; opacity: 0.8; margin-top: 2px; }
.hdr .spacer { flex: 1; }
.brand-tabs { display: inline-flex; background: rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 3px; }
.brand-tabs button {
  border: 0; background: transparent; color: rgba(255, 255, 255, 0.8);
  font: 600 14px var(--sans); padding: 9px 18px; border-radius: 999px; cursor: pointer;
}
.brand-tabs button.active { background: #fff; color: var(--headerbg); }
.theme-toggle {
  border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: #fff;
  width: 37px; height: 37px; border-radius: 999px; cursor: pointer; font-size: 15px;
}

/* ── hero ── */
.hero { margin: 10px 0 40px; }
.hero .eye { color: var(--acc); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.hero h1 { font: 700 clamp(34px, 4.6vw, 54px)/1.1 var(--serif); letter-spacing: -0.01em; margin: 10px 0 12px; }
.hero p { color: var(--ink-2); font-size: 17px; max-width: 780px; margin: 0 0 24px; }

/* ── KPI tiles ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: stretch; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; }
.kpi.wide { grid-column: span 1; }
@media (min-width: 1100px) { .kpi.wide { grid-column: span 1; } }
.kpi .v { font: 800 30px/1.1 var(--sans); letter-spacing: -0.02em; }
.kpi .v small { font: 600 14px var(--sans); color: var(--ink-2); }
.kpi .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; margin-top: 5px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; }
/* platform breakdown rows inside a KPI tile */
.kpi .bd { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.bd-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.bd-row .dot { flex: 0 0 auto; }
.bd-row .bd-lab { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row .bd-val { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.bd-row .bd-val b { color: var(--ink); }
/* net-sentiment coloring */
.kpi .v.tone-pos { color: var(--pos); }
.kpi .v.tone-neg { color: var(--neg); }
.kpi .v.tone-neu { color: var(--neu); }
.bd-face { margin-top: 10px; font-size: 13px; font-weight: 700; }
.bd-face.tone-pos { color: var(--pos); }
.bd-face.tone-neg { color: var(--neg); }
.bd-face.tone-neu { color: var(--neu); }

/* ── sections: each is a bordered, self-contained container ── */
.sec {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}
/* section header strip — a defined title band, not floating text */
.sec-h {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.sec-n { font: 700 13px var(--sans); color: var(--acc); border: 1.5px solid var(--acc); border-radius: 9px; padding: 4px 10px; letter-spacing: 0.04em; }
.sec-h h2 { font: 700 clamp(20px, 2.2vw, 26px)/1.2 var(--serif); margin: 0; letter-spacing: -0.01em; }
/* section body padding — everything after the header lives here */
.sec > .sec-sub,
.sec > .grid,
.sec > .card,
.sec > .takes,
.sec > .hl-grid,
.sec > .filters,
.sec > .table-scroll,
.sec > .pager,
.sec > .src-section { margin-left: 26px; margin-right: 26px; }
.sec > .sec-sub { margin-top: 22px; }
.sec > .grid:last-child,
.sec > .card:last-child,
.sec > .takes:last-child,
.sec > .hl-grid:last-child,
.sec > .table-scroll:last-child,
.sec > .pager:last-child { margin-bottom: 26px; }
.sec > .src-section:last-child { margin-bottom: 26px; }
.sec-sub { color: var(--ink-2); font-size: 15.5px; margin: 22px 0 22px; max-width: 900px; }
.sec-sub b { color: var(--ink); }
.note { color: var(--muted); font-size: 13.5px; }

/* inner cards: bordered sub-panels for a systematic, gridded feel */
.grid { display: grid; gap: 20px; margin: 22px 0; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
  padding: 18px 20px;
  min-width: 0;
}
/* a lone .card directly in a section (no grid) still gets a body margin */
.sec > .card { margin-top: 22px; }
/* nested content (inside cards / src-sections) uses its own spacing, not the
   section-body side margins — reset any that leak in */
.card .grid, .src-section .grid, .card .bars, .src-section .bars,
.src-section .post-toolbar, .src-section .post-grid, .src-section .insights,
.src-section .ig-profile, .src-section .show-more, .src-section .src-head { margin-left: 0; margin-right: 0; }
.src-section > .grid:first-of-type { margin-top: 0; }
.card h3 { margin: 0 0 4px; font: 700 15.5px var(--sans); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.card .hint { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }
.chart-box { position: relative; height: 300px; }
.chart-box.h-band { height: 260px; }
.tap-tag { font-size: 12px; font-weight: 700; color: var(--acc); background: var(--acc-soft); border-radius: 999px; padding: 4px 11px; margin-left: auto; }

/* ── highlight quote cards (kept as cards — they're quotations) ── */
.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 44px; }
@media (max-width: 980px) { .hl-grid { grid-template-columns: 1fr; } }
.hl-head { font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-2); margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.hl-pill { font-size: 11px; padding: 4px 11px; border-radius: 999px; color: #fff; letter-spacing: 0.08em; font-weight: 700; }
.hl-pill.love { background: var(--pos); }
.hl-pill.fix { background: var(--neg); }
.hl-card { margin: 0 0 14px; background: var(--panel); border-left: 4px solid var(--pos); border-radius: 14px; padding: 17px 20px; }
.hl-card.neg { border-left-color: var(--neg); }
.hl-tag { font-size: 12px; font-weight: 700; color: var(--acc); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px; }
.hl-quote { margin: 0 0 11px; font: 600 17px/1.55 var(--serif); color: var(--ink); }
.hl-meta { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.hl-meta b { color: var(--ink-2); }
.hl-star { font-weight: 800; }
.hl-star.p { color: var(--pos); }
.hl-star.n { color: var(--neg); }
.dchip { font-size: 11.5px; font-weight: 700; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 3px 10px; color: var(--ink-2); }

/* ── CSS bar charts (tappable) ── */
.bars { display: flex; flex-direction: column; gap: 15px; }
.brow { display: grid; grid-template-columns: 170px 1fr 66px; gap: 14px; align-items: center; }
@media (max-width: 640px) { .brow { grid-template-columns: 110px 1fr 56px; } }
.brow .blab { font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .bval { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.btrack { display: flex; gap: 3px; height: 34px; border-radius: 9px; overflow: hidden; background: var(--panel); }
.bseg { height: 100%; border: 0; padding: 0; cursor: pointer; min-width: 3px; position: relative; transition: filter 0.12s; }
.bseg:hover { filter: brightness(1.12); }
.bseg .pctl { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 13px var(--sans); }
.bfill { height: 100%; border: 0; padding: 0; cursor: pointer; border-radius: 9px; transition: filter 0.12s; }
.bfill:hover { filter: brightness(1.12); }

/* diverging topic bars */
.trow { display: grid; grid-template-columns: 1fr 190px 1fr; gap: 14px; align-items: center; }
@media (max-width: 640px) { .trow { grid-template-columns: 1fr 120px 1fr; } }
.trow .tl { display: flex; justify-content: flex-end; }
.trow .tr { display: flex; }
.trow .tname { font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-align: center; }
.tbar { height: 30px; border: 0; cursor: pointer; border-radius: 8px; display: inline-flex; align-items: center; padding: 0 10px; color: #fff; font: 700 13px var(--sans); transition: filter 0.12s; }
.tbar:hover { filter: brightness(1.12); }
.tbar.pos { background: var(--pos); justify-content: flex-start; }
.tbar.neg { background: var(--neg); justify-content: flex-end; }

/* ── outlets + map (plain basemap) ── */
#map { height: 380px; border-radius: 16px; overflow: hidden; background: var(--panel); }
.leaflet-container { font: 13px var(--sans) !important; }
.map-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); flex-wrap: wrap; }
.out-note { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* ── takeaway cards ── */
.takes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 22px 0; }
.take { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.take .take-stat { font: 800 40px/1 var(--sans); letter-spacing: -0.02em; }
.take .take-bar { height: 6px; border-radius: 99px; background: var(--panel); margin: 13px 0 13px; overflow: hidden; }
.take .take-bar span { display: block; height: 100%; border-radius: 99px; }
.take b { display: block; font-size: 16px; margin-bottom: 6px; }
.take span.body { color: var(--ink-2); font-size: 14px; line-height: 1.6; display: block; }
.tone-acc { color: var(--acc); } .bg-acc { background: var(--acc); }
.tone-pos { color: var(--pos); } .bg-pos { background: var(--pos); }
.tone-gold { color: var(--neu); } .bg-gold { background: var(--neu); }
.tone-neg { color: var(--neg); } .bg-neg { background: var(--neg); }

/* ── social pulse: each platform is its own bordered container ── */
.src-section { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin: 20px 0 0; }
.src-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px -2px 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.src-badge { display: inline-flex; align-items: center; gap: 10px; font: 700 20px var(--serif); }
.src-badge::before { content: ""; width: 11px; height: 11px; border-radius: 99px; background: var(--sb, var(--acc)); }

.ig-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; background: var(--panel); border-radius: 16px; padding: 17px 20px; margin-bottom: 18px; }
.ig-profile .av, .ig-profile .av-img { width: 60px; height: 60px; border-radius: 99px; object-fit: cover; }
.ig-profile .av { display: grid; place-items: center; background: var(--acc-soft); color: var(--acc); font: 700 23px var(--serif); }
.ig-profile .who { min-width: 0; max-width: 620px; }
.ig-profile .who .nm { font-weight: 700; font-size: 17px; }
.ig-profile .who .hd, .ig-profile .who .bio { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig-profile .stats { display: flex; margin-left: auto; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 13px; overflow: hidden; }
.ig-profile .stats div { padding: 11px 20px; text-align: center; border-left: 1px solid var(--line); }
.ig-profile .stats div:first-child { border-left: 0; }
.ig-profile .stats b { display: block; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ig-profile .stats span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }

.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-bottom: 26px; }
/* clean, professional insight cards — a colored left rule instead of an emoji */
.insight { border-radius: 12px; padding: 13px 16px 13px 15px; background: var(--panel); font-size: 14px; line-height: 1.55; color: var(--ink-2); border-left: 3px solid var(--acc); }
.insight b { color: var(--ink); font-weight: 700; }
.insight.warn { border-left-color: var(--neg); }

.post-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 16px; flex-wrap: wrap; }
.pt-title { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.pt-title b { color: var(--ink); }
.pt-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.seg { display: inline-flex; background: var(--panel); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: transparent; color: var(--muted); font: 600 13.5px var(--sans); padding: 7px 15px; border-radius: 999px; cursor: pointer; }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(12, 18, 51, 0.15); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.post-card { border: 1px solid var(--line); border-radius: 15px; min-width: 0; background: var(--surface); display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit; padding: 12px 14px; }
.post-card.media { padding: 0; overflow: hidden; }
a.post-card:hover { border-color: var(--acc); }
.pc-img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--panel); }
.post-grid.yt .pc-img { aspect-ratio: 16/9; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-img.broken img { display: none; }
.pc-img.broken::after { content: "no preview"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pc-badge { position: absolute; top: 9px; left: 9px; z-index: 1; background: rgba(12, 18, 51, 0.75); color: #fff; font-size: 11.5px; font-weight: 700; text-transform: capitalize; padding: 4px 11px; border-radius: 999px; }
.pc-body { padding: 11px 14px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.post-card.media .pc-cap { min-height: 2.9em; -webkit-line-clamp: 2; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--panel); border-radius: 6px; padding: 2px 8px; color: var(--ink-2); }
.pc-cap { font-size: 14px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-cap.empty { color: var(--muted); font-style: italic; }
.pc-meta { margin-top: auto; display: flex; gap: 14px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.show-more { text-align: center; margin: 18px 0 4px; }
.show-more button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 14px var(--sans); padding: 10px 26px; border-radius: 999px; cursor: pointer; }
.show-more button:hover { border-color: var(--acc); color: var(--ink); }
.show-more button[hidden] { display: none; }

.top-list { margin: 8px 0 0; padding: 0 0 0 20px; }
.top-list li { margin: 0 0 13px; font-size: 14.5px; color: var(--ink-2); }
.top-list .t { color: var(--ink); font-weight: 600; }
.top-list .m { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.top-list a { color: inherit; }

/* rating distribution mini-blocks */
.dist-head { display: flex; align-items: baseline; justify-content: space-between; }
.dist-head h3 { font: 700 16px var(--sans); margin: 0; }
.dist-head .avg { font-size: 20px; font-weight: 800; }
.dist-head .avg small { color: var(--muted); font: 500 13px var(--sans); }
.owner-resp { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 10px 0 16px; }
.owner-resp .or { background: var(--panel); border-radius: 13px; padding: 13px 15px; }
.owner-resp .or b { font-size: 22px; font-weight: 800; }
.owner-resp .or span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.swiggy { border-top: 1px dashed var(--line); padding-top: 13px; margin-top: 4px; }
.swiggy h4 { margin: 0 0 8px; font-size: 14.5px; }
.swiggy .row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 4px 0; color: var(--ink-2); }
.swiggy .row b { color: var(--ink); }

/* sentiment chip + stars */
.s-chip { font-size: 12.5px; font-weight: 600; padding: 3px 11px; border-radius: 999px; white-space: nowrap; color: var(--ink-2); background: var(--panel); }
.s-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 6px; }
.s-pos::before { background: var(--pos); }
.s-neg::before { background: var(--neg); }
.s-neu::before { background: var(--muted); }
.stars { color: var(--star); letter-spacing: 1px; font-size: 13.5px; white-space: nowrap; }
.stars .off { color: var(--line); }

/* ── explorer ── */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.filters select, .filters input {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 13px; font: 500 14.5px var(--sans);
}
.filters input { flex: 1; min-width: 220px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.explorer { width: 100%; border-collapse: collapse; font-size: 14px; }
.explorer th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 13px 15px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.explorer td { padding: 12px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
.explorer tr:last-child td { border-bottom: 0; }
.explorer td.num, .explorer th.num { text-align: right; font-variant-numeric: tabular-nums; }
.explorer .src { font-weight: 700; white-space: nowrap; }
.explorer .txt { max-width: 720px; }
.explorer .date { white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.pager button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 11px; padding: 9px 18px; font: 600 14.5px var(--sans); cursor: pointer; }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager span { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ── drill-in overlay ── */
.drill { position: fixed; inset: 0; z-index: 1000; display: none; }
.drill.open { display: block; }
.drill .scrim { position: absolute; inset: 0; background: rgba(12, 18, 51, 0.45); }
.drill-in {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 94vw);
  background: var(--bg); box-shadow: -12px 0 40px rgba(12, 18, 51, 0.3);
  display: flex; flex-direction: column;
}
.drill-h { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 14px; }
.drill-t { font: 700 23px var(--serif); }
.drill-s { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.drill-x { margin-left: auto; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); width: 36px; height: 36px; border-radius: 99px; font-size: 17px; cursor: pointer; }
.drill-f { display: flex; gap: 9px; padding: 0 24px 14px; flex-wrap: wrap; }
.drill-f input, .drill-f select { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: 500 14px var(--sans); color: var(--ink); }
.drill-f input { flex: 1; min-width: 160px; }
.drill-list { flex: 1; overflow-y: auto; padding: 4px 24px 24px; display: flex; flex-direction: column; gap: 11px; }
.dr { background: var(--panel); border-radius: 14px; padding: 14px 17px; }
.dr .dr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.dr .dr-top b { color: var(--ink-2); }
.dr .dr-txt { font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.drill-count { padding: 0 24px 10px; color: var(--muted); font-size: 13.5px; }

.foot { margin-top: 64px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 18px; }
.foot p { margin: 0; max-width: 1000px; }

/* always-on outlet labels on the plain map */
.map-tt { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; color: var(--ink) !important; font: 600 12.5px var(--sans) !important; padding: 3px 9px !important; box-shadow: 0 2px 8px rgba(12,18,51,0.12) !important; }
.map-tt::before { display: none !important; }

/* branded gradient placeholder tile for posts without a stored image (Facebook) */
.pc-img.noimg { display: grid; place-items: center; padding: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sb, var(--acc)) 18%, var(--panel)), color-mix(in srgb, var(--sb, var(--acc)) 6%, var(--surface))); }
.pc-img.noimg .noimg-cap { font: 600 14px/1.4 var(--serif); color: var(--ink-2); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* facebook cards carry the facebook accent on their placeholder */
#fbGrid .pc-img.noimg { --sb: var(--c-facebook); }
/* clickable chart cursor hint */
.chart-box canvas { cursor: default; }

/* ==========================================================================
   Campaign additions — same system, extended for Instagram creator posts
   ========================================================================== */
.hdr .logo-mark { width: 44px; height: 44px; border-radius: 11px; background: #fff; color: var(--headerbg);
  display: grid; place-items: center; font: 800 15px var(--sans); letter-spacing: -.02em; flex: none; }
.hdr a.hdr-link { color: #fff; text-decoration: none; font: 600 14px var(--sans); border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: 8px 16px; }
.hdr a.hdr-link:hover { background: rgba(255,255,255,.12); }
a { color: inherit; }
a.ig { color: var(--acc); font-weight: 600; text-decoration: none; }
a.ig:hover { text-decoration: underline; }
.kpi[data-go] { cursor: pointer; transition: border-color .12s; }
.kpi[data-go]:hover { border-color: var(--acc); }
.kpi .bd-row[data-go] { cursor: pointer; border-radius: 6px; margin: 0 -6px; padding: 1px 6px; }
.kpi .bd-row[data-go]:hover { background: var(--panel); }
.brow .blab a { color: inherit; text-decoration: none; }
.brow .blab a:hover { color: var(--acc); text-decoration: underline; }
.brow .bval small { color: var(--muted); font-weight: 600; font-size: 12px; margin-left: 2px; }
.bars-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.trow + .trow { margin-top: 10px; }
.thead { display: grid; grid-template-columns: 1fr 190px 1fr; gap: 14px; font-size: 12.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.thead span:first-child { text-align: right; } .thead span:nth-child(2) { text-align: center; }
@media (max-width: 640px) { .thead { grid-template-columns: 1fr 120px 1fr; } }
.tbar.zero { background: var(--panel); color: var(--muted); cursor: default; }

/* post cards: text tile in place of a thumbnail, stats underneath, two actions */
.post-card .pc-img.noimg { --sb: var(--c-instagram); aspect-ratio: 4/3; }
.post-card .pc-img .pc-handle { font: 700 17px/1.3 var(--serif); color: var(--ink); text-align: center; word-break: break-word; }
.post-card .pc-img .pc-sub { display: block; font: 500 12.5px var(--sans); color: var(--ink-2); margin-top: 6px; text-align: center; }
.pc-tone { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--panel); }
.pc-tone i { display: block; height: 100%; }
.pc-tone-lab { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-tone-lab b.p { color: var(--pos); } .pc-tone-lab b.n { color: var(--neg); }
.pc-actions { display: flex; gap: 8px; margin-top: 4px; }
.pc-actions a, .pc-actions button { flex: 1; text-align: center; font: 600 12.5px var(--sans); border-radius: 999px; padding: 7px 8px;
  cursor: pointer; text-decoration: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.pc-actions a { background: var(--acc); border-color: var(--acc); color: #fff; }
.pc-actions a:hover { filter: brightness(1.12); }
.pc-actions button:hover { border-color: var(--acc); color: var(--ink); }
.pc-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-flag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: rgba(208,57,47,.1); color: var(--neg); }

.top-list .t a { text-decoration: none; }
.top-list .t a:hover { text-decoration: underline; }
.insight[data-go] { cursor: pointer; }
.insight[data-go]:hover { background: var(--acc-soft); }
.take[data-go] { cursor: pointer; }
.take[data-go]:hover { border-color: var(--acc); }
.hl-card[data-go] { cursor: pointer; }
.hl-card[data-go]:hover { filter: brightness(.98); }
.hl-meta a { color: var(--ink-2); font-weight: 700; text-decoration: none; }
.hl-meta a:hover { color: var(--acc); text-decoration: underline; }
.explorer tbody tr { cursor: pointer; }
.explorer tbody tr:hover td { background: var(--panel); }
.explorer .auth a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.explorer .auth a:hover { color: var(--acc); text-decoration: underline; }
.explorer .src a { text-decoration: none; }
.explorer .src a:hover { text-decoration: underline; }
.explorer .go a { color: var(--acc); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* drill panel extras */
.drill-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; margin: 0 24px 14px; }
.drill-stats div { background: var(--surface); padding: 9px 12px; }
.drill-stats span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.drill-stats b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.drill-stats .p b { color: var(--pos); } .drill-stats .n b { color: var(--neg); }
.drill-links { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 24px 14px; }
.drill-links a { font: 600 13.5px var(--sans); text-decoration: none; border-radius: 999px; padding: 8px 15px; border: 1px solid var(--line); color: var(--ink-2); }
.drill-links a:first-child { background: var(--acc); border-color: var(--acc); color: #fff; }
.dr .dr-top a { color: var(--ink-2); font-weight: 700; text-decoration: none; }
.dr .dr-top a:hover { color: var(--acc); text-decoration: underline; }
.dr .dr-top a.vp { color: var(--acc); font-weight: 600; }
.dr .dr-top .vp-pv { color: var(--muted); font: 500 13px var(--sans); background: none; border: 0; padding: 0; cursor: pointer; }
.dr .dr-top .vp-pv:hover { color: var(--acc); text-decoration: underline; }
.dr-post { margin-top: 12px; max-width: 400px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.dr-post iframe { display: block; width: 100%; height: 640px; border: 0; }
.drill-more { text-align: center; padding: 6px 0 4px; }
.drill-more button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 13.5px var(--sans);
  padding: 8px 20px; border-radius: 999px; cursor: pointer; }
@media (max-width: 640px) { .drill-stats { grid-template-columns: 1fr 1fr; } }
.post-card a.pc-img { text-decoration: none; }
.post-card a.pc-img:hover .pc-handle { color: var(--acc); }
.pc-actions { flex-direction: column; }
.pc-top { justify-content: flex-start; }
#creatorBars .brow { grid-template-columns: 230px 1fr 60px; }
#peopleBars .brow, #paidBars .brow, #unfBars .brow { grid-template-columns: 170px 1fr 84px; }
.hdr .logo-mark { font-size: 12px; }
@media (max-width: 640px) {
  #creatorBars .brow, #peopleBars .brow, #paidBars .brow, #unfBars .brow { grid-template-columns: 112px 1fr 58px; }
}
:root[data-theme="dark"] { --acc: #8f9cff; --acc-soft: rgba(143,156,255,.16); }
:root[data-theme="dark"] .pc-actions a { color: #0c1233; }
:root[data-theme="dark"] .drill-links a:first-child { color: #0c1233; }

/* ── hero stat groups: Reach / Reaction ── */
#kpis { display: flex; flex-direction: column; gap: 22px; }
.kgroup { display: flex; flex-direction: column; gap: 10px; }
.kg-h { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.kgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.kpi.st { cursor: pointer; justify-content: flex-start; min-height: 132px; transition: border-color .12s, box-shadow .12s; }
.kpi.st:hover, .kpi.st:focus-visible { border-color: var(--acc); box-shadow: 0 2px 10px rgba(12,18,51,.06); outline: none; }
.kpi.st .v { font-size: 32px; }
.kpi.st .l { color: var(--ink); font-size: 12.5px; }
.kpi.st .st-sub { margin-top: auto; padding-top: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.kpi.st .st-sub b { color: var(--ink); }
.kpi.st.pos { border-top: 3px solid var(--pos); } .kpi.st.pos .v { color: var(--pos); }
.kpi.st.neg { border-top: 3px solid var(--neg); } .kpi.st.neg .v { color: var(--neg); }
.kpi.st.neu { border-top: 3px solid var(--neu); } .kpi.st.neu .v { color: var(--neu); }
.sentbar { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sentbar .btrack { height: 38px; }
.sentbar .pctl { font-size: 13px; white-space: nowrap; }
@media (max-width: 1180px) { .kgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi.st .v { font-size: 26px; } .kpi.st { min-height: 118px; } }
@media (max-width: 640px) { .sentbar .pl-name { display: none; } }
.sentbar .pctl { display: flex; align-items: center; justify-content: center; gap: 5px; }

/* ==========================================================================
   Brand: saffron #F97D09 + green #278D27
   Saffron carries the campaign identity and volume series; green is the UI
   accent. Neutral sentiment moves to slate so it never reads as saffron.
   ========================================================================== */
:root {
  --saffron: #F97D09;
  --saffron-deep: #D96A00;      /* large saffron text on light grounds */
  --saffron-ink: #B35600;       /* small saffron text, 4.5:1 on white */
  --green: #278D27;
  --green-ink: #1E7A1E;
  --headerbg: var(--green);
  --acc: var(--green-ink);
  --acc-soft: rgba(39, 141, 39, 0.09);
  --vol: var(--saffron);
  --neu: #8C93A8;
}
:root[data-theme="dark"] {
  --acc: #5FC35F; --acc-soft: rgba(95, 195, 95, 0.14);
  --saffron-deep: #FF9A3D; --saffron-ink: #FFAA5C;
  --neu: #9AA1B8;
}

/* header */
.hdr { margin-bottom: 0; border-top: 5px solid var(--saffron); padding-top: 14px; padding-bottom: 14px; }
.hdr .logo-mark { width: 46px; height: 46px; border-radius: 12px; background: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1; font: 800 13.5px var(--sans); letter-spacing: .02em; }
.hdr .logo-mark span:first-child { color: var(--saffron-deep); }
.hdr .logo-mark span:last-child { color: var(--green); }
.hdr .hdr-sub { opacity: .92; }
.hdr-nav { display: flex; gap: 2px; margin-right: 6px; }
.hdr-nav a { color: rgba(255,255,255,.9); text-decoration: none; font: 600 14px var(--sans); padding: 8px 11px; border-radius: 999px; }
.hdr-nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.hdr a.hdr-link { background: var(--saffron); border-color: var(--saffron); color: #fff; }
.hdr a.hdr-link:hover { background: #ff8f2b; }
@media (max-width: 1180px) { .hdr-nav { display: none; } }

/* hero KPI block now sits under the band */
.hero { margin-top: 0; }
.kg-h { color: var(--saffron-ink); }
.sec-n { color: var(--green-ink); border-color: var(--green); }
:root[data-theme="dark"] .sec-n { color: var(--acc); border-color: var(--acc); }

/* ── report cover: solid saffron, dark type, a spec sheet on the right ── */
.hdr .logo-mark span:first-child { color: var(--green); font-size: 16px; }
.cover {
  --cover-ink: #1F1206;
  margin: 0 calc(-1 * var(--pad)) 36px; padding: 52px var(--pad) 48px;
  background: var(--saffron); color: var(--cover-ink);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 64px; align-items: end;
}
.cover-kicker { margin: 0 0 14px; font: 600 15px var(--sans); color: rgba(31, 18, 6, .78); }
.cover-title { margin: 0; font: 800 clamp(52px, 8vw, 112px)/.95 var(--serif); letter-spacing: -.02em; color: var(--cover-ink); }
.cover-tag { margin: 18px 0 0; font: italic 600 clamp(20px, 2.2vw, 28px)/1.3 var(--serif); color: var(--cover-ink); }
.cover-lede { margin: 26px 0 0; max-width: 620px; font-size: 16.5px; line-height: 1.6; color: rgba(31, 18, 6, .86); }
.cover-lede b { color: var(--cover-ink); }
.cover-facts { margin: 0; border-top: 2px solid var(--cover-ink); }
.cf-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 12px 0;
  border-bottom: 1px solid rgba(31, 18, 6, .28); }
.cf-row dt { font-size: 14.5px; color: rgba(31, 18, 6, .8); }
.cf-row dd { margin: 0; text-align: right; font: 800 20px var(--sans); font-variant-numeric: tabular-nums; color: var(--cover-ink); }
.cf-row dd small { font: 500 13px var(--sans); color: rgba(31, 18, 6, .72); }
.cf-row:last-child { grid-template-columns: 1fr; gap: 6px; }
.cf-row:last-child dd { text-align: left; font: 600 14px/1.8 var(--sans); }
.cf-row dd a { color: var(--cover-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; margin-right: 10px; }
.cf-row dd a:hover { text-decoration-thickness: 2px; }
.cf-row[data-go] { cursor: pointer; }
.cf-row[data-go]:hover dt, .cf-row[data-go]:focus-visible dt { color: var(--cover-ink); text-decoration: underline; text-underline-offset: 3px; }
.cf-row[data-go]:focus-visible { outline: 2px solid var(--cover-ink); outline-offset: 2px; }
:root[data-theme="dark"] .cover { background: #D96A00; }
@media (max-width: 980px) { .cover { grid-template-columns: 1fr; gap: 34px; align-items: start; } }
@media (max-width: 640px) { .cover { padding-top: 34px; padding-bottom: 32px; } .cf-row dd { font-size: 18px; } }

/* ==========================================================================
   Headline numbers v3 — a reach strip and one reaction panel
   Sentiment: green positive · orange neutral · red negative.
   Volume series move to slate so orange only ever means "neutral".
   ========================================================================== */
:root { --pos: #1F9D4C; --neu: #E8871E; --neg: #D0392F; --vol: #4B5675; }
:root[data-theme="dark"] { --pos: #34C06A; --neu: #F29A3A; --neg: #E35A50; --vol: #9AA3C2; }
#kpis { display: flex; flex-direction: column; gap: 18px; }

.reach { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); overflow: hidden; }
.rc { padding: 20px 22px 18px; border-left: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.rc:first-child { border-left: 0; }
.rc:hover, .rc:focus-visible { background: var(--panel); outline: none; }
.rc-v { font: 800 30px/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.rc-l { font: 700 14.5px var(--sans); color: var(--ink); margin-top: 4px; }
.rc-s { font-size: 13px; color: var(--muted); line-height: 1.4; }

.react { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); overflow: hidden; }
.react-split { padding: 22px 26px 24px; }
.react-neg { padding: 22px 26px 24px; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 14px; }
.react-h { margin: 0 0 14px; font: 700 16px var(--sans); color: var(--ink); }
.react-neg .react-h { margin-bottom: 2px; }
.react-bar { display: flex; gap: 3px; height: 48px; border-radius: 10px; overflow: hidden; }
.rb { border: 0; cursor: pointer; color: #fff; font: 800 15px var(--sans); padding: 0; min-width: 44px; }
.rb:hover { filter: brightness(1.08); }
.rb.pos { background: var(--pos); } .rb.neu { background: var(--neu); } .rb.neg { background: var(--neg); }
.react-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.rl { cursor: pointer; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); }
.rl:hover, .rl:focus-visible { background: var(--panel); outline: none; }
.rl-k { display: flex; align-items: center; gap: 8px; font: 700 14px var(--sans); color: var(--ink-2); }
.rl-k i { width: 10px; height: 10px; border-radius: 3px; }
.rl.pos .rl-k i { background: var(--pos); } .rl.neu .rl-k i { background: var(--neu); } .rl.neg .rl-k i { background: var(--neg); }
.rl-v { font: 800 34px/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rl.pos .rl-v { color: var(--pos); } .rl.neu .rl-v { color: var(--neu); } .rl.neg .rl-v { color: var(--neg); }
.rl-p { font-size: 13px; color: var(--muted); }
.rn { cursor: pointer; border-radius: 10px; padding: 8px 10px; margin: 0 -10px; }
.rn:hover, .rn:focus-visible { background: var(--surface); outline: none; }
.rn-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rn-l { font: 600 14.5px var(--sans); color: var(--ink); }
.rn-v { font: 800 20px var(--sans); color: var(--neg); font-variant-numeric: tabular-nums; }
.rn-track { height: 8px; border-radius: 99px; background: var(--line); margin: 7px 0 5px; overflow: hidden; }
.rn-track i { display: block; height: 100%; border-radius: 99px; background: var(--neg); }
.rn-s { font-size: 12.5px; color: var(--muted); }

@media (max-width: 1180px) {
  .reach { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reach .rc:nth-child(4) { border-left: 0; }
  .reach .rc:nth-child(n+4) { border-top: 1px solid var(--line); }
  .react { grid-template-columns: 1fr; }
  .react-neg { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reach .rc { border-left: 1px solid var(--line); border-top: 1px solid var(--line); padding: 16px; }
  .reach .rc:nth-child(odd) { border-left: 0; }
  .reach .rc:nth-child(-n+2) { border-top: 0; }
  .rc-v { font-size: 24px; }
  .react-split, .react-neg { padding: 18px; }
  .react-legend { grid-template-columns: 1fr; }
  .rl { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 10px; }
  .rl-v { font-size: 26px; }
}
.react-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.rt { cursor: pointer; border-radius: 12px; padding: 12px 14px; background: var(--panel); border-left: 3px solid var(--pos);
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rt.neg { border-left-color: var(--neg); }
.rt:hover, .rt:focus-visible { outline: none; filter: brightness(.98); }
.rt-k { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.rt-q { font: 600 15px/1.45 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.rt-m { font-size: 12.5px; color: var(--muted); }
.rt-m a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.rt-m a:hover { text-decoration: underline; }
@media (max-width: 640px) { .react-top { grid-template-columns: 1fr; } }

/* split panel: full width, bar or pie */
.react { grid-template-columns: 1fr; }
.react-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.react-head .react-h { margin: 0; }
.split-body.is-pie { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: center; }
.split-body.is-pie .react-legend { grid-template-columns: 1fr; margin-top: 0; gap: 10px; }
.split-body.is-pie .rl { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 14px; }
.split-body.is-pie .rl-k { min-width: 92px; }
.split-pie { position: relative; height: 300px; }
.split-pie[hidden] { display: none; }
.react-bar[hidden] { display: none; }
.pie-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.pie-center b { font: 800 28px/1.1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.pie-center span { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .split-body.is-pie { grid-template-columns: 1fr; gap: 16px; }
  .split-pie { height: 260px; }
}

/* ── 01 creator ranking ── */
.cr-tools { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cr-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cr-controls input { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font: 500 14px var(--sans); min-width: 200px; }
.cr-legend { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.cr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cr-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cr-legend i.pos { background: var(--pos); } .cr-legend i.neu { background: var(--neu); } .cr-legend i.neg { background: var(--neg); }
.cr-legend .note { margin-left: auto; }
.cr-row { display: grid; grid-template-columns: 34px minmax(220px, 300px) 88px minmax(0, 1fr) 72px 72px 64px; gap: 14px;
  align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.cr-row:last-child { border-bottom: 0; }
.cr-row:not(.cr-head):hover { background: var(--panel); }
.cr-head { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-top: 4px; padding-bottom: 8px; }
.cr-head .r, .cr-p, .cr-n { text-align: right; }
.cr-rank { font: 700 14px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.cr-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cr-av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--serif);
  color: #fff; background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.cr-id { display: flex; flex-direction: column; min-width: 0; }
a.cr-h { font: 700 15px var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.cr-h:hover { color: var(--acc); text-decoration: underline; }
.cr-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-n { border: 0; background: none; cursor: pointer; font: 800 16px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; padding: 4px 0; }
.cr-n:hover { color: var(--acc); text-decoration: underline; }
.cr-bar { display: flex; gap: 2px; height: 30px; border-radius: 8px; overflow: hidden; background: var(--panel); }
.cseg { border: 0; padding: 0; cursor: pointer; min-width: 3px; color: #fff; font: 700 12.5px var(--sans); }
.cseg:hover { filter: brightness(1.1); }
.cseg.pos { background: var(--pos); } .cseg.neu { background: var(--neu); } .cseg.neg { background: var(--neg); }
.cr-p { font: 800 15px var(--sans); font-variant-numeric: tabular-nums; }
.cr-p.pos { color: var(--pos); } .cr-p.neg { color: var(--neg); }
.cr-go { font: 700 13px var(--sans); color: var(--acc); text-decoration: none; text-align: right; white-space: nowrap; }
.cr-go:hover { text-decoration: underline; }
@media (max-width: 1100px) {
  .cr-row { grid-template-columns: 30px minmax(0, 1fr) 70px 60px 60px; }
  .cr-row .cr-bar { grid-column: 2 / -1; grid-row: 2; }
  .cr-row .cr-go { display: none; }
  .cr-head span:nth-child(4), .cr-head span:nth-child(7) { display: none; }
}
@media (max-width: 640px) {
  .cr-row { grid-template-columns: 24px minmax(0, 1fr) 54px; gap: 10px; }
  .cr-row .cr-p { display: none; }
  .cr-head span:nth-child(5), .cr-head span:nth-child(6) { display: none; }
  .cr-controls input { min-width: 0; flex: 1; }
  .cr-legend .note { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  .cr-controls { width: 100%; }
  .cr-controls input { width: 100%; flex: 1 1 100%; }
  #creatorSort { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 14px; }
  #creatorSort button { border-radius: 11px; }
}

/* creator ranking v2: no avatars, aligned metric columns */
.cr-row { grid-template-columns: 30px minmax(190px, 1.3fr) 64px 64px 80px minmax(0, 2.6fr) 64px 64px 52px; }
.cr-who { gap: 9px; }
a.cr-h { font-size: 15px; }
.cr-type { flex: none; font: 700 10.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.cr-head .cv, .cr-m { text-align: right; }
.cr-m { font: 600 14px var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cr-m .dim { color: var(--line); font-weight: 400; }
.cr-row { padding-top: 11px; padding-bottom: 11px; }
@media (max-width: 1100px) {
  .cr-row { grid-template-columns: 28px minmax(0, 1fr) 70px 60px 60px; }
  .cr-row .cv { display: none; }
  .cr-head span:nth-child(6), .cr-head span:nth-child(9) { display: none; }
}
@media (max-width: 640px) {
  .cr-row { grid-template-columns: 22px minmax(0, 1fr) 54px; }
  .cr-head span:nth-child(7), .cr-head span:nth-child(8) { display: none; }
}
@media (max-width: 640px) { .cr-type { display: none; } }

/* post link column */
.cr-row { grid-template-columns: 30px minmax(190px, 1.3fr) 64px 64px 80px minmax(0, 2.4fr) 64px 64px 112px; }
a.cr-type { text-decoration: none; }
a.cr-type:hover { border-color: var(--acc); color: var(--acc); }
.cr-go { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 8px; text-align: center; background: var(--surface); }
.cr-go:hover { border-color: var(--acc); background: var(--acc-soft); text-decoration: none; }
.cr-go b { font: 700 13px var(--sans); color: var(--acc); }
.cr-go small { font: 500 11px var(--sans); color: var(--muted); letter-spacing: .02em; }
@media (max-width: 1100px) {
  .cr-row { grid-template-columns: 28px minmax(0, 1fr) 70px 60px 60px 104px; }
  .cr-row .cr-go { display: flex; }
  .cr-head span:nth-child(9) { display: block; }
  .cr-row .cr-bar { grid-column: 2 / -1; }
}
@media (max-width: 640px) {
  .cr-row { grid-template-columns: 22px minmax(0, 1fr) 54px 92px; }
  .cr-head span:nth-child(9) { display: block; }
}
.cr-go .sm { display: none; }
@media (max-width: 640px) {
  .cr-row { grid-template-columns: 22px minmax(0, 1fr) 50px 58px; }
  .cr-go { padding: 6px 4px; }
  .cr-go .lg, .cr-go small { display: none; }
  .cr-go .sm { display: inline; }
}
@media (max-width: 640px) {
  .cr-head span:nth-child(5) { display: block; font-size: 10px; letter-spacing: .02em; }
  .cr-head span:nth-child(9) { text-align: center; }
}
.cr-go { padding: 8px 8px; }

/* ── 02 topics: two ranked lists ── */
.topics2 { margin-bottom: 8px; }
.tp-card .hint { margin-bottom: 10px; }
.tp { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 76px;
  gap: 14px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.tp:last-child { border-bottom: 0; }
.tp:hover, .tp:focus-visible { background: var(--panel); }
.tp-name { font: 600 14.5px var(--sans); color: var(--ink); display: flex; flex-direction: column; min-width: 0; }
.tp-name small { font: 400 12.5px var(--sans); color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-track { height: 12px; border-radius: 99px; background: var(--panel); overflow: hidden; }
.tp-track i { display: block; height: 100%; border-radius: 99px; }
.tp.pos .tp-track i { background: var(--pos); } .tp.neg .tp-track i { background: var(--neg); }
.tp-n { text-align: right; font: 800 16px var(--sans); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.tp.pos .tp-n { color: var(--pos); } .tp.neg .tp-n { color: var(--neg); }
.tp-n small { font: 600 12px var(--sans); color: var(--muted); }
.tp-note { margin: 0 26px 6px; }
@media (max-width: 640px) {
  .tp { grid-template-columns: minmax(0, 1fr) 64px; row-gap: 6px; }
  .tp-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ── language table ── */
.lang-card { margin: 22px 26px 26px; }
.lang-lede { margin: 6px 0 14px; font-size: 15px; color: var(--ink-2); max-width: 900px; }
.lang-lede b { color: var(--ink); }
.lg-row { display: grid; grid-template-columns: minmax(200px, 1.1fr) 90px 130px minmax(0, 2.4fr) 70px 70px; gap: 16px; align-items: center;
  padding: 12px 6px; border-bottom: 1px solid var(--line); }
.lg-row:last-child { border-bottom: 0; }
.lg-row:not(.lg-head):hover { background: var(--panel); }
.lg-head { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; padding-bottom: 8px; }
.lg-head .r { text-align: right; }
.lg-name { all: unset; cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.lg-name b { font: 700 15.5px var(--sans); color: var(--ink); }
.lg-name small { font-size: 12.5px; color: var(--muted); }
.lg-name:hover b { color: var(--acc); text-decoration: underline; }
.lg-n { text-align: right; font: 800 16px var(--sans); font-variant-numeric: tabular-nums; }
.lg-sh { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font: 600 13.5px var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lg-shbar { width: 60px; height: 6px; border-radius: 99px; background: var(--panel); overflow: hidden; }
.lg-shbar i { display: block; height: 100%; background: var(--vol); border-radius: 99px; }
@media (max-width: 1100px) {
  .lg-row { grid-template-columns: minmax(0, 1fr) 70px 60px 60px; }
  .lg-row .lg-sh, .lg-head span:nth-child(3), .lg-head span:nth-child(4) { display: none; }
  .lg-row .cr-bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .lang-card { margin: 18px 16px; }
  .lg-row { grid-template-columns: minmax(0, 1fr) 60px; }
  .lg-row .cr-p, .lg-head span:nth-child(5), .lg-head span:nth-child(6) { display: none; }
}

/* ── 03 backlash ── */
:root { --neg-2: #8E2019; }
:root[data-theme="dark"] { --neg-2: #F29C95; }
.bl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin: 0 26px 4px; background: var(--surface); }
.bls { all: unset; box-sizing: border-box; cursor: pointer; padding: 16px 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.bls:first-child { border-left: 0; }
.bls:hover, .bls:focus-visible { background: var(--panel); }
.bls b { font: 800 28px/1.1 var(--sans); color: var(--neg); font-variant-numeric: tabular-nums; }
.bls:nth-child(2) b { color: var(--neg-2); }
.bls:nth-child(3) b, .bls:nth-child(4) b { color: var(--ink); }
.bls b small { font-size: 16px; color: var(--muted); font-weight: 700; }
.bls-k { font: 700 14px var(--sans); color: var(--ink); margin-top: 2px; }
.bls-s { font-size: 12.5px; color: var(--muted); }
.bl-grid { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); }
.cr-legend i.bl-paid { background: var(--neg); } .cr-legend i.bl-unf { background: var(--neg-2); }
.bl-row { display: grid; grid-template-columns: 26px minmax(150px, 1fr) minmax(0, 1.6fr) 48px 64px 110px 104px; gap: 12px; align-items: center;
  padding: 9px 4px; border-bottom: 1px solid var(--line); }
.bl-row:last-child { border-bottom: 0; }
.bl-row:not(.bl-head):hover { background: var(--panel); }
.bl-head { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 8px; }
.bl-head .r { text-align: right; }
.bl-bar { height: 22px; border-radius: 6px; background: var(--panel); overflow: hidden; display: block; }
.bl-fill { display: flex; height: 100%; gap: 2px; }
.bl-p, .bl-u { border: 0; padding: 0; cursor: pointer; height: 100%; min-width: 3px; }
.bl-p { background: var(--neg); } .bl-u { background: var(--neg-2); }
.bl-p:hover, .bl-u:hover { filter: brightness(1.12); }
.bl-n { text-align: right; font: 800 15px var(--sans); font-variant-numeric: tabular-nums; }
.bl-n.p { color: var(--neg); } .bl-n.u { color: var(--neg-2); }
.bl-n .dim { color: var(--muted); font-weight: 400; }
.bl-share { text-align: right; font: 800 15px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.bl-share small { display: block; font: 500 11.5px var(--sans); color: var(--muted); }
.blq { cursor: pointer; padding: 12px 14px; border-radius: 12px; background: var(--panel); border-left: 3px solid var(--neg); margin-bottom: 10px; }
.blq.u { border-left-color: var(--neg-2); }
.blq:hover, .blq:focus-visible { outline: none; filter: brightness(.98); }
.blq p { margin: 0 0 6px; font: 600 15.5px/1.45 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.blq-m { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.blq-m b { color: var(--neg); font-weight: 800; }
.blq.u .blq-m b { color: var(--neg-2); }
.blq-m a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.blq-m a:hover { text-decoration: underline; }
.blq-m a.vp { color: var(--acc); margin-left: auto; }
@media (max-width: 1180px) { .bl-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .bl-stats { grid-template-columns: 1fr 1fr; }
  .bls:nth-child(3) { border-left: 0; }
  .bls:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bl-row { grid-template-columns: 24px minmax(0, 1fr) 44px 56px 60px; }
  .bl-row .bl-bar { grid-column: 2 / -1; grid-row: 2; }
  .bl-row .bl-share, .bl-head span:nth-child(3), .bl-head span:nth-child(6) { display: none; }
}
@media (max-width: 640px) {
  .bl-stats { margin: 0 16px 4px; }
  .bls { padding: 14px; } .bls b { font-size: 24px; }
  .bl-row .cr-go .lg { display: none; } .bl-row .cr-go .sm { display: inline; }
}
@media (max-width: 640px) {
  .bl-row { grid-template-columns: 20px minmax(0, 1fr) 30px 32px 52px; gap: 8px; }
  .bl-head { font-size: 9.5px; letter-spacing: .02em; }
  .bl-n { font-size: 14px; }
  .bl-grid .cr-tools .cr-legend { flex-wrap: wrap; gap: 4px 14px; }
}

/* ── 03 backlash / praise toggle ── */
:root { --pos-2: #0F6B31; }
:root[data-theme="dark"] { --pos-2: #8FE0AE; }
.bl-toggle { margin-left: auto; }
.bl-toggle button.active { color: var(--neg); }
.is-good .bl-toggle button.active { color: var(--pos); }
.bl-fill button { border: 0; padding: 0; cursor: pointer; height: 100%; min-width: 3px; }
.bl-fill button:hover { filter: brightness(1.12); }
.bad-a { background: var(--neg); } .bad-b { background: var(--neg-2); }
.good-a { background: var(--pos-2); } .good-b { background: var(--pos); }
.cr-legend i.bad-a { background: var(--neg); } .cr-legend i.bad-b { background: var(--neg-2); }
.cr-legend i.good-a { background: var(--pos-2); } .cr-legend i.good-b { background: var(--pos); }
.bl-n.a { color: var(--neg); } .bl-n.b { color: var(--neg-2); }
.is-good .bl-n.a { color: var(--pos-2); } .is-good .bl-n.b { color: var(--pos); }
.bls.g b { color: var(--pos) !important; }
.bls.g:nth-child(4) b { color: var(--ink) !important; }
.blq.bad-a, .blq.bad-b, .blq.good-a, .blq.good-b { background: var(--panel); }
.blq.bad-a { border-left-color: var(--neg); } .blq.bad-b { border-left-color: var(--neg-2); }
.blq.good-a { border-left-color: var(--pos-2); } .blq.good-b { border-left-color: var(--pos); }
.blq.bad-a .blq-m b { color: var(--neg); } .blq.bad-b .blq-m b { color: var(--neg-2); }
.blq.good-a .blq-m b { color: var(--pos-2); } .blq.good-b .blq-m b { color: var(--pos); }
.bls-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .sec-h:has(.bl-toggle) { flex-wrap: wrap; } .bl-toggle { margin-left: 0; } }

/* ── the short version ── */
.sv { margin: 24px 26px 26px; }
.sv-verdict { margin: 0 0 18px; font: 700 clamp(24px, 2.6vw, 32px)/1.2 var(--serif); color: var(--ink); max-width: 900px; }
.sv-list { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.svr { display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px; gap: 22px; align-items: center; padding: 18px 22px;
  border-top: 1px solid var(--line); cursor: pointer; }
.svr:first-child { border-top: 0; }
.svr:hover, .svr:focus-visible { background: var(--panel); outline: none; }
.svr-v { font: 800 34px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.svr-v.pos { color: var(--pos); } .svr-v.neg { color: var(--neg); } .svr-v.ink { color: var(--ink); }
.svr-t b { display: block; font: 700 16.5px var(--sans); color: var(--ink); margin-bottom: 3px; }
.svr-t span { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.svr-go { justify-self: end; font: 700 13.5px var(--sans); color: var(--acc); white-space: nowrap; }
.svr:hover .svr-go { text-decoration: underline; }
@media (max-width: 760px) {
  .sv { margin: 18px 16px 20px; }
  .svr { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .svr-v { font-size: 28px; }
  .svr-go { justify-self: start; }
}

/* short version, simplified: four plain cards */
.sv-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; border: 0; border-radius: 0; background: none; overflow: visible; }
.svc { cursor: pointer; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 18px; background: var(--surface);
  display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--line); }
.svc.pos { border-top-color: var(--pos); } .svc.neg { border-top-color: var(--neg); }
.svc:hover, .svc:focus-visible { background: var(--panel); outline: none; }
.svc-v { font: 800 44px/1 var(--sans); letter-spacing: -.02em; }
.svc.pos .svc-v { color: var(--pos); } .svc.neg .svc-v { color: var(--neg); }
.svc-h { font: 600 16px/1.45 var(--sans); color: var(--ink); }
.svc-go { margin-top: auto; padding-top: 8px; font: 700 13px var(--sans); color: var(--acc); }
.svc:hover .svc-go { text-decoration: underline; }
@media (max-width: 1000px) { .sv-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sv-list { grid-template-columns: 1fr; } .svc-v { font-size: 38px; } }

/* ── 05 posts grid: Instagram-style cards ── */
#exGridWrap, #exTableWrap { padding: 0 26px 26px; }
#exGridWrap > .sec-sub, #exTableWrap > .sec-sub { margin: 22px 0 16px; }
.pg-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.pg-tools input { flex: 1; min-width: 200px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 15px; font: 500 14px var(--sans); }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.igc { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(12, 18, 51, .04); }
.igc-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.igc-ring { width: 36px; height: 36px; border-radius: 50%; padding: 2px; flex: none;
  background: conic-gradient(from 210deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.igc-ring span { width: 100%; height: 100%; border-radius: 50%; background: var(--surface); display: grid; place-items: center;
  font: 700 14px var(--sans); color: var(--ink); border: 2px solid var(--surface); }
.igc-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
a.igc-h { font: 700 14.5px var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.igc-h:hover { text-decoration: underline; }
.igc-who small { font-size: 12px; color: var(--muted); }
.igc-open { font: 700 13px var(--sans); color: var(--acc); text-decoration: none; white-space: nowrap; }
.igc-open:hover { text-decoration: underline; }
.igc-media { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 560px; }
.igc-media iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--surface); }
.igc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.igc-stats { display: flex; gap: 16px; font-size: 14px; color: var(--ink-2); }
.igc-stats b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.igc-tone { display: flex; flex-direction: column; gap: 4px; }
.igc-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--panel); gap: 1px; }
.igc-bar i { display: block; height: 100%; }
.igc-bar i.pos { background: var(--pos); } .igc-bar i.neu { background: var(--neu); } .igc-bar i.neg { background: var(--neg); }
.igc-tl { display: flex; justify-content: space-between; font-size: 12.5px; }
.igc-tl .p { color: var(--pos); } .igc-tl .n { color: var(--neg); }
.igc-comments { display: flex; flex-direction: column; gap: 7px; }
.igc-c { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; position: relative; padding-left: 14px; }
.igc-c i { position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; }
.igc-c i.pos { background: var(--pos); } .igc-c i.neu { background: var(--neu); } .igc-c i.neg { background: var(--neg); }
a.igc-ch { font-weight: 700; color: var(--ink); text-decoration: none; }
a.igc-ch:hover { text-decoration: underline; }
.igc-c small { color: var(--muted); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.igc-none { margin: 0; font-size: 13.5px; color: var(--muted); }
.igc-all { all: unset; cursor: pointer; font: 600 14px var(--sans); color: var(--muted); }
.igc-all:hover { color: var(--acc); text-decoration: underline; }
@media (max-width: 1180px) { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  #exGridWrap, #exTableWrap { padding: 0 16px 20px; }
  .ig-grid { grid-template-columns: 1fr; }
  .pg-tools .seg { width: 100%; justify-content: space-between; }
}
.ex-toggle { margin-left: auto; }
.ex-toggle button.active { color: var(--acc); }
.igc-media { border-top: 0; }
.igc-by { font-size: 13px; color: var(--muted); }
.igc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 2px; }
@media (max-width: 640px) { .sec-h:has(.ex-toggle) { flex-wrap: wrap; } .ex-toggle { margin-left: 0; } }

/* compact post cards: 4 across, media only */
.ig-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.igc { border-radius: 14px; }
.igc-media { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: #000; }
.igc-media iframe { display: block; width: 100%; border: 0; }
.igc-body { padding: 10px 12px 12px; gap: 8px; }
.igc-by { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
a.igc-h { font-size: 13.5px; }
.igc-stats { gap: 12px; font-size: 13px; }
.igc-tl { font-size: 11.5px; }
.igc-c { font-size: 13px; line-height: 1.4; }
.igc-c small { font-size: 11px; }
.igc-all, .igc-open { font-size: 12.5px; }
@media (max-width: 1280px) { .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ig-grid { grid-template-columns: 1fr; } }

/* six across */
.ig-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.igc { border-radius: 12px; }
.igc-body { padding: 8px 10px 10px; gap: 6px; }
a.igc-h { font-size: 12.5px; }
.igc-by { font-size: 11px; }
.igc-stats { gap: 8px; font-size: 12px; }
.igc-tl { font-size: 10.5px; }
.igc-c { font-size: 12px; padding-left: 11px; }
.igc-c i { width: 6px; height: 6px; top: 6px; }
.igc-c small { display: none; }
.igc-foot { flex-wrap: wrap; row-gap: 2px; }
.igc-all, .igc-open { font-size: 11.5px; }
@media (max-width: 1360px) { .ig-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1150px) { .ig-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* data-source switch in the header */
.src-switch { display: inline-flex; background: rgba(255,255,255,.16); border-radius: 999px; padding: 3px; }
.src-switch a { color: rgba(255,255,255,.88); text-decoration: none; font: 600 13.5px var(--sans); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.src-switch a:hover { color: #fff; }
.src-switch a.active { background: #fff; color: var(--green); }
@media (max-width: 640px) { .src-switch { order: 5; width: 100%; justify-content: space-between; } .src-switch a { flex: 1; text-align: center; padding: 7px 6px; } }
.src-tag { flex: none; font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: #8a3a00;
  background: rgba(249,125,9,.14); border-radius: 6px; padding: 2px 6px; align-self: flex-start; }
:root[data-theme="dark"] .src-tag { color: #FFB46B; }

/* section 01 lede fits on one line on desktop */
#creatorSub { max-width: none; }

/* ==========================================================================
   Brand: Jio Blue #0A2885 (Pantone 287 C) + #005AAC + white
   Replaces the NM25 saffron/green layer above. Deep Jio Blue carries the
   header and cover; the brighter #005AAC is the UI accent. Sentiment colours
   (green / orange / red) stay as they are so they keep their meaning.
   ========================================================================== */
:root {
  --jio: #0A2885;
  --jio-2: #005AAC;
  --saffron: var(--jio); --saffron-deep: var(--jio); --saffron-ink: var(--jio-2);
  --green: var(--jio); --green-ink: var(--jio-2);
  --headerbg: var(--jio);
  --acc: var(--jio-2);
  --acc-soft: rgba(0, 90, 172, 0.08);
  --panel: #f3f6fc;
  --line: #e3e9f5;
  --grid: #e3e9f5;
}
:root[data-theme="dark"] {
  --jio-2: #5B9BF0;
  --saffron-deep: #8FB8F5; --saffron-ink: #8FB8F5; --green-ink: #8FB8F5;
  --acc: #5B9BF0; --acc-soft: rgba(91, 155, 240, 0.14);
  --bg: #070d24; --surface: #0b1430; --panel: #0f1a3d; --line: #1d2a55; --grid: #1d2a55;
}

/* header: Jio Blue band, round white Jio mark */
.hdr { background: var(--jio); border-top: 5px solid var(--jio-2); }
.hdr .logo-mark { border-radius: 50%; background: #fff; }
.hdr .logo-mark span:first-child { color: var(--jio); font-size: 15px; letter-spacing: -.01em; }
.hdr a.hdr-link { background: var(--jio-2); border-color: var(--jio-2); }
.hdr a.hdr-link:hover { background: #1a6fc2; }
.src-switch a.active { color: var(--jio); }
:root[data-theme="dark"] .hdr { border-top-color: #005AAC; }

/* cover: solid Jio Blue with white type */
.cover { --cover-ink: #fff; background: var(--jio); color: #fff; }
:root[data-theme="dark"] .cover { background: var(--jio); }
.cover-kicker { color: rgba(255, 255, 255, .78); }
.cover-lede { color: rgba(255, 255, 255, .88); }
.cf-row { border-bottom-color: rgba(255, 255, 255, .24); }
.cf-row dt { color: rgba(255, 255, 255, .78); }
.cf-row dd small { color: rgba(255, 255, 255, .7); }

/* section numbers + small brand tags */
.sec-n { color: var(--jio-2); border-color: var(--jio-2); }
.src-tag { color: var(--jio); background: rgba(0, 90, 172, .12); }
:root[data-theme="dark"] .src-tag { color: #8FB8F5; }

/* ── skeleton mode (no campaign data loaded yet): grey placeholder rows and cards ── */
.skel-row { display: grid; grid-template-columns: 1.4fr 3fr .6fr; gap: 18px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line); }
.skel-row i, .skel-card .igc-body i { display: block; height: 12px; border-radius: 6px; background: var(--panel);
  background-image: linear-gradient(90deg, transparent, rgba(0, 90, 172, .06), transparent); background-size: 200% 100%;
  animation: skel 1.6s ease-in-out infinite; }
.skel-row i:first-child { max-width: 160px; }
.skel-row i:nth-child(2) { height: 22px; width: auto !important; }
.skel-row.q-skel { grid-template-columns: 1fr; gap: 8px; padding: 16px 4px; }
.skel-row.q-skel i:nth-child(2) { height: 12px; } .skel-row.q-skel i:nth-child(3) { width: 40%; }
.skel-card .igc-media { aspect-ratio: 4 / 5; background: var(--panel); }
.skel-card .igc-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.skel-card .igc-body i:nth-child(1) { width: 60%; } .skel-card .igc-body i:nth-child(3) { width: 80%; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-row i, .skel-card .igc-body i { animation: none; } }

.react-note{display:block;margin-top:4px;font-size:12px;font-weight:500;color:var(--muted)}

/* creator table header: one line per label, all labels on one baseline, numeric columns wide enough for their label */
.cr-row { grid-template-columns: 30px minmax(250px, 1.7fr) 84px 72px 84px minmax(0, 1.8fr) 76px 76px 112px; }
.cr-head { align-items: end; font-size: 11.5px; letter-spacing: .05em; }
.cr-head span { white-space: nowrap; }
@media (max-width: 1100px) { .cr-row { grid-template-columns: 28px minmax(0, 1fr) 84px 76px 76px 104px; } }
@media (max-width: 640px) { .cr-row { grid-template-columns: 22px minmax(0, 1fr) 76px 58px; } }
/* narrow screens: header shows exactly the columns the rows show (#, creator, comments, positive, negative, post) */
@media (max-width: 1100px) {
  .cr-head span:nth-child(n) { display: block; }
  .cr-head span.cv, .cr-head span.hs { display: none; }
}
@media (max-width: 640px) { .cr-head span.hp { display: none; }
  .cr-who { flex-wrap: wrap; row-gap: 3px; } .cr-who a.cr-h { flex: 1 1 100%; } }
/* creators view: followers and views both shown */
@media (min-width: 1101px) {
  .cr-table.has-views .cr-row { grid-template-columns: 30px minmax(230px, 1.5fr) 80px 72px 64px 84px minmax(0, 1.6fr) 76px 76px 112px; }
}

/* language table: language and its sentiment bar only */
.lg-row { grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); }
@media (max-width: 1100px) {
  .lg-row { grid-template-columns: minmax(0, 1fr); }
  .lg-head span:nth-child(n) { display: block; }
  .lg-head span:nth-child(2) { display: none; }
  .lg-row .cr-bar { grid-column: 1; grid-row: 2; }
}
.bl-stats[hidden] { display: none; }
.sv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .sv-list { grid-template-columns: 1fr; } }
#crPlat small { font-weight: 600; opacity: .6; margin-left: 2px; }
@media (max-width: 640px) { #crPlat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 14px; } #crPlat button { border-radius: 11px; } }

/* Posts tile breakdown (Creators view) */
.rc-posts .pb { margin-top: 8px; display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.pb-r { display: flex; justify-content: space-between; gap: 10px; }
.pb-r b { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-nc { margin-top: 4px; padding-top: 5px; border-top: 1px dashed var(--line); }
.pb-nc summary { list-style: none; display: flex; justify-content: space-between; gap: 10px; cursor: pointer; color: var(--ink-2); }
.pb-nc summary::-webkit-details-marker { display: none; }
.pb-nc summary span::after { content: ' ▸'; font-size: 10px; }
.pb-nc[open] summary span::after { content: ' ▾'; }
.pb-nc .pb-r { font-size: 11.5px; padding-left: 8px; margin-top: 3px; line-height: 1.3; }
.pb-nc .pb-r b { font-weight: 600; }
/* creators table rows with no readable comments */
.cr-n.dim-n { color: var(--muted); font-weight: 700; text-align: right; }
.cr-bar-none { background: none; }
.cr-p.dim { color: var(--line); font-weight: 400; }
/* 03 praise table: creator, praise bar, total comments, post */
.bl-tot { text-align: right; font: 800 15px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.is-good .bl-row { grid-template-columns: 26px minmax(170px, 1.3fr) minmax(0, 1.5fr) 84px 100px; }
@media (max-width: 900px) { .is-good .bl-row { grid-template-columns: 24px minmax(0, 1fr) 80px 60px; } }
@media (max-width: 640px) { .is-good .bl-row { grid-template-columns: 20px minmax(0, 1fr) 70px 52px; } }
.tone-chip { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--sans); padding: 5px 11px; border-radius: 999px; }
.tone-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tone-chip.pos { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.tone-chip.neu { color: var(--neu); background: color-mix(in srgb, var(--neu) 14%, transparent); }
.tone-chip.neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
span.cseg { display: flex; align-items: center; justify-content: center; }

/* Posts tile: one stacked bar in platform colours, legend underneath */
:root { --pc-instagram: #E1306C; --pc-linkedin: #0A66C2; --pc-x: #14171A; --pc-youtube: #FF0000; }
:root[data-theme="dark"] { --pc-instagram: #F0609A; --pc-linkedin: #4C9BE8; --pc-x: #E6E8EF; --pc-youtube: #FF5A5A; }
.pc-instagram { background: var(--pc-instagram); } .pc-linkedin { background: var(--pc-linkedin); }
.pc-x { background: var(--pc-x); } .pc-youtube { background: var(--pc-youtube); }
.rc-posts .pb-bar { display: flex; gap: 2px; height: 12px; margin-top: 12px; border-radius: 99px; overflow: hidden; background: var(--panel); }
.rc-posts .pb-bar i { display: block; min-width: 4px; }
.rc-posts .pb { margin-top: 10px; gap: 5px; }
.rc-posts .pb-r span { display: inline-flex; align-items: center; gap: 7px; }
.rc-posts .pb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
.rc-posts .pb-r b small { font-weight: 500; color: var(--muted); margin-left: 3px; }

/* Creators view: posts split by platform as a full-width bar on its own row, the reach tiles in a row of five below */
.posts-card .react-head { margin-bottom: 12px; }
.posts-card .react-note { display: block; margin-top: 3px; font: 500 13px var(--sans); color: var(--muted); }
.ptrack { height: 38px; }
.ptrack .bseg { cursor: default; }
.ptrack .pc-x .pctl { color: var(--bg); }
.plegend { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.plegend span { display: inline-flex; align-items: center; gap: 7px; }
.plegend b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.plegend small { color: var(--muted); font-size: 12.5px; }
.plegend .pb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.reach.reach-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .reach.reach-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reach.reach-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ptrack { height: 32px; } }
.reach.reach-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .reach.reach-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc-head { margin-bottom: 14px; }