:root {
  --bg: #e9e7e3;
  --paper: #f6f5f2;
  --card: #fdfcfa;
  --ink: #1f1f20;
  --ink-2: #4a4a4e;
  --muted: #717175;
  --line: #e2dfda;
  --hero: #1f1f20;
  --hero-2: #2c2c2f;
  --hero-ink: #f1f0ec;
  --hero-muted: #a9a8a4;
  --accent: #b39784;        /* nude / champanhe */
  --accent-soft: #e9ddd3;
  --good: #4f7a5a;
  --good-bg: #e4ece5;
  --bad: #a3544a;
  --bad-bg: #f2e1dd;
  --bar: #3a3a3d;
  --serif: "Italiana", "Times New Roman", serif;
  --sans: "Didact Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
}
button { font: inherit; cursor: pointer; }

.page {
  max-width: 1160px;
  margin: 24px auto;
  background: var(--paper);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 20px 60px -30px rgba(0,0,0,.25);
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  background: radial-gradient(120% 140% at 85% 110%, var(--hero-2) 0%, var(--hero) 55%);
  color: var(--hero-ink);
  padding: 30px 48px 36px;
  overflow: hidden;
}
.hero-deco {
  position: absolute; right: -140px; top: -160px;
  width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  pointer-events: none;
}
.hero-deco::after {
  content: ""; position: absolute; inset: 60px; border-radius: 50%;
  border: 1px solid rgba(179,151,132,.18);
}
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; }
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-size: 26px; letter-spacing: .14em; text-transform: uppercase; }
.brand-sub { font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--hero-muted); margin-top: 4px; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tabs, .months { display: flex; gap: 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 4px; }
.tab, .month {
  border: 0; background: transparent; color: var(--hero-muted);
  padding: 7px 15px; border-radius: 999px; font-size: 13px; letter-spacing: .02em;
  transition: background .15s, color .15s;
}
.tab:hover, .month:hover { color: var(--hero-ink); }
.tab.active { background: var(--accent); color: #1f1f20; }
.month.active { background: var(--hero-ink); color: var(--hero); }

.kicker {
  margin: 0; font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent);
}
.hero .kicker { margin-top: 44px; }
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 7vw, 82px); line-height: 1; margin: 10px 0 14px; letter-spacing: .01em;
}
.meta-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--hero-muted); font-size: 13px; }
.pill { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--hero-ink); }
.pill.sample { border-color: var(--accent); color: var(--accent); }

.hero-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1);
}
.hk-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hero-muted); }
.hk-value { font-size: clamp(30px, 3.6vw, 44px); margin: 6px 0 2px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hk-value small { font-size: .45em; color: var(--hero-muted); margin-right: 4px; }
.hk-value.accent { color: var(--accent); }
.hk-help { font-size: 12px; color: var(--hero-muted); margin-top: 8px; }

.delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 2px 9px; border-radius: 999px; margin-top: 8px;
  background: var(--good-bg); color: var(--good); font-variant-numeric: tabular-nums;
}
.delta.bad { background: var(--bad-bg); color: var(--bad); }
.delta.flat { background: #eceae6; color: var(--muted); }
.hero .delta { background: rgba(255,255,255,.92); }
.hero .delta.bad { background: #f2e1dd; }
.hero .delta.flat { background: rgba(255,255,255,.15); color: var(--hero-muted); }
.vs { font-size: 11px; color: var(--hero-muted); margin-left: 6px; }

/* ---------- BODY ---------- */
main { padding: 8px 48px 24px; }
.block { padding-top: 40px; }
h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 36px);
  margin: 6px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}

.summary {
  margin-top: 36px; padding: 22px 26px; border-radius: var(--r);
  background: var(--accent-soft); color: var(--ink); font-size: 16.5px; line-height: 1.6;
}
.summary strong { font-weight: 400; border-bottom: 1px solid var(--accent); }

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.kpi .label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.kpi .value { font-size: 30px; margin: 8px 0 0; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .value small { font-size: 15px; color: var(--muted); margin-right: 3px; }
.kpi .help { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* chart */
.chart-card { padding: 18px 18px 10px; }
.legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--muted); margin: 0 4px 10px; flex-wrap: wrap; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw-bar { background: var(--bar); }
.sw-line { background: var(--accent); height: 3px; vertical-align: 3px; }
.daily-chart { position: relative; }
.daily-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.daily-chart .axis { font-size: 11px; fill: var(--muted); font-family: var(--sans); }
.tip {
  position: absolute; pointer-events: none; background: var(--ink); color: #fff;
  padding: 8px 11px; border-radius: 10px; font-size: 12.5px; white-space: nowrap;
  transform: translate(-50%, -110%); opacity: 0; transition: opacity .1s;
}

/* funnel */
.fun-row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; padding: 10px 0; }
.fun-row + .fun-row { border-top: 1px dashed var(--line); }
.fun-name { font-size: 14px; }
.fun-name span { display: block; font-size: 12px; color: var(--muted); }
.fun-bar-wrap { display: flex; align-items: center; gap: 12px; }
.fun-bar { height: 30px; border-radius: 8px; background: var(--bar); min-width: 4px; }
.fun-row:last-child .fun-bar { background: var(--accent); }
.fun-num { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fun-rate { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* campaigns */
.campaigns { display: flex; flex-direction: column; gap: 12px; }
.camp { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 16px; align-items: center; }
.camp-name { font-size: 16px; }
.camp-name .status { margin-top: 6px; }
.camp-share { height: 4px; background: var(--line); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.camp-share i { display: block; height: 100%; background: var(--accent); }
.camp .m .label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.camp .m .v { font-size: 19px; font-variant-numeric: tabular-nums; margin-top: 2px; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b9b7b2; }
.status.on { color: var(--good); }
.status.on::before { background: #5c9a6a; box-shadow: 0 0 0 3px rgba(92,154,106,.18); }

/* ads */
.ad { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ad-media {
  position: relative; aspect-ratio: 4 / 5; background: #e6e3de center / cover no-repeat;
  display: flex; align-items: flex-end;
}
.ad-media.ph {
  background-image: linear-gradient(160deg, #3a3a3d 0%, #1f1f20 70%);
}
.ad-media.ph::after {
  content: "NF"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 64px; color: rgba(255,255,255,.14); letter-spacing: .1em;
}
.ad-badges { position: absolute; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; z-index: 1; }
.badge { background: rgba(31,31,32,.72); color: #fff; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.badge.rank { background: var(--accent); color: var(--ink); }
.ad-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.ad-title { font-size: 16px; line-height: 1.3; }
.ad-camp { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ad-stats { margin-top: 12px; border-top: 1px solid var(--line); }
.ad-stats div { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ad-stats dt { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ad-stats dd { margin: 0; font-size: 19px; font-variant-numeric: tabular-nums; }
.ad-foot { font-size: 12px; color: var(--muted); margin-top: 10px; }
.ad-foot b { font-weight: 400; color: var(--ink); }
.ad .status { margin-top: auto; padding-top: 10px; }
.paused { margin-top: 18px; }
.paused summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 8px 0; }
.paused[open] summary { margin-bottom: 12px; }
.paused .ad { opacity: .82; }

/* glossary */
.glossary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; margin: 0; }
.glossary div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.glossary dt { font-size: 14px; }
.glossary dd { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }

/* audience */
.ag-row { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.ag-age { font-size: 13px; color: var(--muted); }
.ag-side { display: flex; align-items: center; gap: 8px; }
.ag-side.f { flex-direction: row-reverse; }
.ag-bar { height: 20px; border-radius: 5px; min-width: 2px; }
.ag-side.f .ag-bar { background: var(--accent); }
.ag-side.m .ag-bar { background: var(--bar); }
.ag-num { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 28px; }
.ag-head { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
.ag-head .f { text-align: right; }
.plat .big { font-family: var(--serif); font-size: 30px; }
.plat .share { height: 6px; background: var(--line); border-radius: 6px; margin: 12px 0 14px; overflow: hidden; }
.plat .share i { display: block; height: 100%; background: var(--accent); }
.plat .rows div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.plat .rows span { color: var(--muted); }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; height: 170px; align-items: end; }
.hr { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.hr-bar { width: 100%; background: var(--bar); border-radius: 4px 4px 1px 1px; min-height: 2px; }
.hr-bar.top { background: var(--accent); }
.hr span { font-size: 10.5px; color: var(--muted); height: 16px; margin-top: 6px; }
.hours-note { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }
.hours-note b { font-weight: 400; border-bottom: 1px solid var(--accent); }
.ig-card { margin-top: 14px; }
.ig-head { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ig-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) 2fr 50px; gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; }
.ig-row + .ig-row { border-top: 1px dashed var(--line); }
.ig-bar { height: 14px; background: var(--bar); border-radius: 4px; min-width: 3px; }
.ig-bar.hl { background: var(--accent); }
.ig-n { text-align: right; font-variant-numeric: tabular-nums; }
.tag { font-style: normal; font-size: 11px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
.kpi .na { color: var(--muted); }
.ig-days { height: 140px; grid-template-columns: none; grid-auto-columns: 1fr; grid-auto-flow: column; }
@media (max-width: 640px) {
  .ig-row { grid-template-columns: 1fr 60px; }
  .ig-row > div { grid-column: 1 / -1; grid-row: 2; }
}
.city { display: grid; grid-template-columns: 160px 1fr 50px; gap: 12px; align-items: center; padding: 7px 0; }
.city-bar { height: 14px; background: var(--bar); border-radius: 4px; }
.city:first-child .city-bar { background: var(--accent); }
.city-n { text-align: right; font-variant-numeric: tabular-nums; }

.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px 48px 30px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); }

.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .hero-kpis { grid-template-columns: repeat(2, 1fr); }
  .camp { grid-template-columns: 1fr 1fr; }
  .camp-name { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .page { margin: 0; border-radius: 0; }
  .hero { padding: 22px 16px 28px; }
  main { padding: 0 16px 20px; }
  .foot { padding: 20px 16px 26px; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .controls { width: 100%; }
  .months { overflow-x: auto; max-width: 100%; }
  .hero .kicker { margin-top: 30px; }
  .hero-kpis { gap: 22px 16px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card { padding: 16px; }
  .kpi .value { font-size: 24px; }
  .fun-row { grid-template-columns: 1fr; gap: 6px; }
  .glossary { grid-template-columns: 1fr; }
  .city { grid-template-columns: 110px 1fr 40px; }
  .summary { font-size: 15.5px; padding: 18px; }
  .ad-media { aspect-ratio: auto; height: min(110vw, 440px); }
}