/* Themes: dark is the default, light is optional. Every color is a token. */
:root, [data-theme="dark"] {
  --bg: #000;
  --page: #030304;
  --card: #0c0d10;
  --card-hi: #121418;
  --line: rgba(255, 255, 255, .07);
  --ink: #f4f6f8;
  --ink-2: #b6bdc8;
  --muted: #747c89;
  --accent: #39fabd;          /* Match mint */
  --accent-2: #0fb5a0;        /* deeper teal, gradient partner */
  --accent-ink: #39fabd;
  --bar-muted: #1d2229;
  --track: #181b21;
  --glow: rgba(57, 250, 189, .14);
  --s-meta: #199e70;          /* validated categorical, dark steps */
  --s-google: #3987e5;
  --s-tiktok: #d95926;
  --s-fee: #4b5361;
  --s-fee-2: #2c323c;
  --good: #39fabd;
  --good-bg: rgba(57, 250, 189, .12);
  --bad: #ff6b81;
  --bad-bg: rgba(255, 107, 129, .13);
  --pill: #0c0d10;
  --peak-bg: #f4f6f8;
  --peak-ink: #030304;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #e9ecef;
  --page: #f7f8f9;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: rgba(10, 20, 30, .08);
  --ink: #0b0f14;
  --ink-2: #3f4753;
  --muted: #6b7380;
  --accent: #10b583;
  --accent-2: #0b8f8a;
  --accent-ink: #0c9a6f;
  --bar-muted: #e3e7eb;
  --track: #edf0f2;
  --glow: rgba(16, 181, 131, .10);
  --s-meta: #1baf7a;          /* validated categorical, light steps */
  --s-google: #2a78d6;
  --s-tiktok: #eb6834;
  --s-fee: #9aa3ae;
  --s-fee-2: #c9cfd6;
  --good: #0c9a6f;
  --good-bg: rgba(16, 181, 131, .12);
  --bad: #d43a55;
  --bad-bg: rgba(212, 58, 85, .10);
  --pill: #0b0f14;
  --peak-bg: #0b0f14;
  --peak-ink: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body { font-family: 'Ploni', 'Heebo', sans-serif; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'calt' 0, 'clig' 0, 'kern' 0; font-kerning: none; color: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 24px 0; }

.theme-toggle {
  position: fixed; top: 16px; left: 16px; z-index: 20; font: 500 13px Ploni; color: var(--ink);
  background: var(--card-hi); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
[data-theme="dark"] .to-dark, [data-theme="light"] .to-light { display: none; }

.page {
  width: 210mm; height: 297mm; margin: 0 auto 24px; position: relative; overflow: hidden;
  background: var(--page); padding: 11mm 12mm 17mm; display: flex; flex-direction: column; gap: 5mm;
}
.page > * { position: relative; }
.page > .glow { position: absolute; border-radius: 50%; pointer-events: none; }
.page > footer { position: absolute; }
.g1 { width: 170mm; height: 170mm; top: -75mm; left: -55mm; background: radial-gradient(circle, var(--glow), transparent 65%); }
.g2 { width: 120mm; height: 120mm; bottom: -50mm; right: -40mm; background: radial-gradient(circle, var(--glow), transparent 65%); opacity: .7; }
.g3 { width: 150mm; height: 150mm; top: -70mm; right: -50mm; background: radial-gradient(circle, var(--glow), transparent 65%); }

.top { display: flex; justify-content: space-between; align-items: center; }
.logo { display: inline-flex; }
.logo img { height: 8mm; display: block; }
.logo .on-light { display: none; }
[data-theme="light"] .logo .on-dark { display: none; }
[data-theme="light"] .logo .on-light { display: block; }
.client { background: #fff; border-radius: 12px; padding: 2.2mm 3.6mm; display: flex; border: 1px solid var(--line); }
.client img { height: 7.5mm; display: block; }

.kicker { color: var(--accent-ink); font-weight: 500; font-size: 10.5pt; display: flex; align-items: center; gap: 2mm; }
.kicker .dot { width: 2mm; height: 2mm; border-radius: 50%; background: var(--accent); outline: 1.2mm solid color-mix(in srgb, var(--accent) 22%, transparent); }
h1 { font-size: 40pt; font-weight: 900; line-height: 1.05; margin-top: 1.5mm; letter-spacing: -.5px; }
.grad { color: var(--accent-ink); }
.lede { margin-top: 3mm; font-size: 11pt; line-height: 1.65; color: var(--ink-2); font-weight: 300; max-width: 165mm; }

.card, .kpi, .hero, .hl {
  background: var(--card);
  border: 1px solid var(--line); border-radius: 18px;
}
.hero {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 6mm; align-items: center; padding: 6mm 7mm;
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 55%), var(--card);
}
.hero-label { color: var(--ink-2); font-size: 11pt; font-weight: 500; }
.hero-num { font-size: 54pt; font-weight: 900; line-height: 1.02; color: var(--accent-ink); direction: ltr; text-align: right; letter-spacing: -1.5px; }
.hero-foot { display: flex; gap: 2mm; align-items: center; color: var(--ink-2); font-size: 9pt; margin-top: 1.5mm; }
.hero-sub { color: var(--muted); font-size: 8.5pt; margin-top: 1.5mm; }
.mini-title { font-size: 9pt; color: var(--muted); margin-bottom: 1mm; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.kpi { padding: 4mm 4mm 3.5mm; }
.kpi-top { white-space: nowrap; display: flex; justify-content: space-between; align-items: flex-start; font-size: 9pt; color: var(--ink-2); font-weight: 500; }
.kpi-value { font-size: 21pt; font-weight: 700; margin: 1.5mm 0; direction: ltr; text-align: right; }
.kpi-foot { display: flex; gap: 2mm; align-items: center; font-size: 8pt; color: var(--muted); white-space: nowrap; }

.chip { display: inline-block; direction: ltr; unicode-bidi: isolate; font-weight: 700; font-size: 8.5pt; padding: .5mm 2.2mm; border-radius: 20px; background: var(--track); color: var(--ink-2); }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5mm; }
.card { padding: 5mm; }
h3 { font-size: 11.5pt; font-weight: 700; margin-bottom: 3mm; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; }
.card-head.second { margin-top: 2mm; }
.legend-inline { font-size: 8.5pt; color: var(--muted); display: flex; align-items: center; gap: 1.5mm; }
.legend-inline i { width: 2.5mm; height: 2.5mm; border-radius: 50%; display: inline-block; }
.note { font-size: 8.5pt; color: var(--muted); margin-top: 2.5mm; line-height: 1.5; }

.donut-wrap { display: flex; align-items: center; gap: 4mm; }
.donut { flex: none; }
.donut, .columns, .area, .ring { font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'calt' 0, 'kern' 0; font-kerning: none; }
.donut-top { fill: var(--ink); font-size: 16px; font-weight: 700; font-family: Ploni; }
.donut-bottom { fill: var(--muted); font-size: 10px; font-family: Ploni; }
.legend { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 2.2mm; font-size: 8.8pt; }
.legend li { white-space: nowrap; display: grid; grid-template-columns: 2.5mm 1fr auto 8mm; gap: 2mm; align-items: center; color: var(--ink-2); }
.legend i { width: 2.5mm; height: 2.5mm; border-radius: 50%; }
.legend b { color: var(--ink); font-weight: 600; direction: ltr; }
.legend em { font-style: normal; color: var(--muted); text-align: left; }

.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; align-items: end; text-align: center; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 1mm; }
.stage b { font-size: 15pt; font-weight: 700; }
.stage span { font-size: 8.5pt; color: var(--muted); }
.stage.first { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 14px; padding: 3mm 0 2mm; }
.stage.first b { font-size: 22pt; color: var(--accent-ink); }
.ring-num { fill: var(--ink); font-size: 14px; font-weight: 700; font-family: Ploni; }

.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.hl { display: flex; gap: 3mm; align-items: flex-start; padding: 4mm; font-size: 8.8pt; }
.hl b { display: block; font-size: 10pt; margin-bottom: .8mm; }
.hl span { color: var(--ink-2); line-height: 1.45; }
.hl-icon { flex: none; width: 9mm; height: 9mm; border-radius: 10px; display: grid; place-items: center; background: var(--track); color: var(--ink-2); }
.hl.good .hl-icon { background: var(--good-bg); color: var(--good); }
.hl.bad .hl-icon { background: var(--bad-bg); color: var(--bad); }

.columns, .area { display: block; overflow: visible; }
.baseline { stroke: var(--line); stroke-width: 1; }
.col-value { fill: var(--ink-2); font-size: 10px; font-family: Ploni; font-weight: 600; }
.col-value.strong { fill: var(--ink); font-weight: 700; }
.col-axis { fill: var(--muted); font-size: 9.5px; font-family: Ploni; }
.peak-tag rect { fill: var(--peak-bg); }
.peak-tag text { fill: var(--peak-ink); font: 700 10.5px Ploni; }

.bar { display: grid; grid-template-columns: auto 1fr auto; gap: 5mm; align-items: center; padding-bottom: 4mm; border-bottom: 1px solid var(--line); }
.bar-title { font-size: 20pt; font-weight: 700; }
.bar-meta { font-size: 9pt; color: var(--muted); }

.plat { display: flex; flex-direction: column; gap: 3mm; }
.p-row { display: grid; grid-template-columns: 27mm 1fr 20mm 15mm 15mm 13mm; gap: 3mm; align-items: center; font-size: 9.5pt; }
.p-row.head { font-size: 8pt; color: var(--muted); }
.p-row.head span { text-align: right; }
.p-name { display: flex; align-items: center; gap: 2mm; font-weight: 600; }
.p-name i { width: 2.5mm; height: 2.5mm; border-radius: 50%; }
.p-track { background: var(--track); border-radius: 5px; height: 3mm; }
.p-bar { height: 100%; border-radius: 5px; }
.p-num { direction: ltr; text-align: right; color: var(--ink-2); }
.p-num.strong { color: var(--ink); font-weight: 700; }

footer { position: absolute; bottom: 7mm; right: 12mm; left: 12mm; display: flex; justify-content: space-between; font-size: 7.5pt; color: var(--muted); border-top: 1px solid var(--line); padding-top: 2.5mm; }

@page { size: A4; margin: 0; }
@media print { body { padding: 0; } .theme-toggle { display: none; } .page { margin: 0; break-after: page; } }

.hero-num .cur { font-size: .55em; margin-right: 1.5mm; font-weight: 700; }

/* ---------- report-only blocks (beyond the sketch) ---------- */
.p-sub { color: var(--muted); font-size: 10pt; margin-top: -2mm; display: flex; align-items: center; gap: 2mm; }
.p-sub i { width: 2.5mm; height: 2.5mm; border-radius: 50%; display: inline-block; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.metric { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 3.5mm 4mm; }
.metric-label { font-size: 8.8pt; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.metric-value { font-size: 16pt; font-weight: 700; margin: 1mm 0; direction: ltr; text-align: right; }
.metric.lead { border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.metric.lead .metric-value { color: var(--accent-ink); }

.camps { display: flex; flex-direction: column; gap: 2.6mm; }
.c-row { display: grid; grid-template-columns: 58mm 1fr 19mm 14mm 17mm; gap: 3mm; align-items: center; font-size: 9pt; }
.c-row.head { font-size: 7.8pt; color: var(--muted); }
.c-name { font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; direction: ltr; text-align: right; unicode-bidi: plaintext; }
.c-track { background: var(--track); border-radius: 5px; height: 3mm; }
.c-bar { height: 100%; border-radius: 5px; }
.c-num { direction: ltr; text-align: right; color: var(--ink-2); white-space: nowrap; }
.c-num.strong { color: var(--ink); font-weight: 700; }
.c-num.zero { color: var(--bad); font-weight: 700; }

.insight { display: flex; gap: 4mm; padding: 5mm 5.5mm; }
.insight .hl-icon { width: 11mm; height: 11mm; border-radius: 12px; }
.insight h3 { font-size: 13pt; margin-bottom: 2.5mm; }
.insight ul { list-style: none; display: flex; flex-direction: column; gap: 2.2mm; }
.insight li { font-size: 10.5pt; line-height: 1.6; color: var(--ink-2); padding-right: 4mm; position: relative; }
.insight li::before { content: ''; position: absolute; right: 0; top: 2.4mm; width: 1.6mm; height: 1.6mm; border-radius: 50%; background: var(--muted); }
.insight.good .hl-icon { background: var(--good-bg); color: var(--good); }
.insight.bad .hl-icon { background: var(--bad-bg); color: var(--bad); }
.insight.next { border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.insight.next .hl-icon { background: var(--good-bg); color: var(--accent-ink); }
.insight.next li::before { background: var(--accent); }

.empty-note { color: var(--muted); font-size: 9pt; }
.sample-badge { position: absolute; top: 4mm; left: 50%; transform: translateX(-50%); font-size: 8pt; font-weight: 700; color: var(--bad); background: var(--bad-bg); padding: .8mm 3mm; border-radius: 20px; }
@media screen and (max-width: 820px) {
  body { padding: 0; }
  .page { width: 100%; height: auto; min-height: 0; padding: 18px 16px 60px; margin: 0 0 10px; }
  .kpis, .metrics { grid-template-columns: 1fr 1fr !important; }
  .highlights { grid-template-columns: 1fr !important; }
  .sample-badge { top: 4px; }
  .top { margin-top: 14px; }
  .hero { grid-template-columns: 1fr; }
  .row2, .highlights { grid-template-columns: 1fr; }
  .c-row { grid-template-columns: 1fr 18mm 12mm 16mm; }
  .c-row .c-track { display: none; }
  .p-row { grid-template-columns: 1fr 18mm 12mm 14mm 12mm; }
  .p-row .p-track { display: none; }
  footer { right: 16px; left: 16px; bottom: 16px; }
}

.share { display: flex; flex-direction: column; gap: 3mm; }
.s-row { display: grid; grid-template-columns: 58mm 1fr; gap: 4mm; align-items: center; font-size: 9pt; }
.s-bars { display: flex; flex-direction: column; gap: 1.2mm; }
.s-line { display: grid; grid-template-columns: 1fr 10mm; gap: 2mm; align-items: center; background: none; }
.s-line .s-bar { height: 2.6mm; border-radius: 4px; min-width: 1mm; }
.s-line span { font-size: 8pt; color: var(--ink-2); direction: ltr; text-align: left; position: relative; z-index: 1; }
.s-line { position: relative; }
.s-line::before { content: ''; position: absolute; inset: auto 0 auto 12mm; height: 2.6mm; border-radius: 4px; background: var(--track); z-index: 0; }
.s-line .s-bar { position: relative; z-index: 1; justify-self: start; }

.hero.solo { grid-template-columns: 1fr; }
/* Platform list inside a half-width card: drop the spend bar */
.row2 .p-row { grid-template-columns: 1fr 19mm 11mm 16mm 13mm; }
.row2 .p-row > :nth-child(2) { display: none; }