@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 320px; background: oklch(91.5% .038 245); }
  body { margin: 0; }
  button, select, input { font: inherit; }
  button { border: 0; }
}

@layer base {
  :root {
    --ink: oklch(24% 0.035 255);
    --muted: oklch(53% 0.025 255);
    --line: oklch(90% 0.018 255);
    --page: oklch(91.5% .038 245);
    --surface: oklch(99.15% .01 250);
    --surface-strong: oklch(97.5% .02 247);
    --blue: oklch(43% 0.205 259);
    --blue-deep: oklch(37% 0.19 259);
    --blue-soft: oklch(91% 0.06 232);
    --green-soft: oklch(91.5% 0.075 145);
    --pink-soft: oklch(92.5% 0.055 20);
    --violet-soft: oklch(90.5% 0.06 282);
    --lime: oklch(85% 0.21 126);
    --shadow: 0 18px 36px oklch(32% .08 252 / .10);
    --shadow-soft: 0 8px 18px oklch(35% .06 252 / .07);
  }

  body {
    color: var(--ink);
    background:
      radial-gradient(circle at 8% 4%, oklch(97% .035 236 / .92), transparent 27rem),
      radial-gradient(circle at 96% 20%, oklch(84% .075 235 / .42), transparent 30rem),
      var(--page);
    min-height: 100vh;
    font-family: "Onest", "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
  }

  button, select { color: inherit; }
  button { cursor: pointer; }
  button:focus-visible, select:focus-visible { outline: 3px solid oklch(68% 0.15 248 / .35); outline-offset: 2px; }
}

@layer components {
  .dashboard-shell {
    width: min(1540px, calc(100% - 56px));
    min-height: calc(100vh - 56px);
    margin: 28px auto;
    padding: 30px 58px 25px;
    overflow: hidden;
    background: color-mix(in oklch, var(--page) 74%, oklch(98% .018 244));
    border: 1px solid oklch(98% .035 248 / .72);
    border-radius: 36px;
    box-shadow: 0 24px 60px oklch(34% .08 250 / .10);
  }

  .topbar { display: grid; grid-template-columns: 220px 1fr 230px; align-items: center; gap: 28px; min-height: 68px; }
  .brand { display: inline-flex; align-items: center; width: 168px; color: var(--blue-deep); text-decoration: none; }
  .brand img { display: block; width: 100%; height: auto; object-fit: contain; object-position: left center; }

  .primary-nav { justify-self: center; display: flex; align-items: center; padding: 5px; background: color-mix(in oklch, var(--surface) 92%, var(--blue-soft)); border: 1px solid oklch(97% .035 248); border-radius: 16px; box-shadow: var(--shadow-soft); }
  .nav-item { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 15px; background: transparent; border-radius: 11px; color: oklch(48% .04 253); font-size: .76rem; font-weight: 600; letter-spacing: -.015em; transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
  .nav-item:hover { color: var(--blue); background: oklch(95% .035 244); transform: translateY(-1px); }
  .nav-item.is-active { color: oklch(98% 0.01 255); background: var(--blue); box-shadow: 0 8px 16px oklch(43% .16 259 / .25); }
  .nav-icon { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .57rem; font-weight: 700; }
  .nav-overview-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .nav-brand-icon { overflow: hidden; background: oklch(99% .006 250); border-color: oklch(88% .025 250); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .55); }
  .nav-brand-icon img { display: block; width: 13px; height: 13px; object-fit: contain; }
  .nav-meta-icon img { width: 14px; height: 10px; }
  .nav-item.is-active .nav-brand-icon { background: oklch(99% .006 250); border-color: transparent; box-shadow: 0 1px 4px oklch(18% .04 255 / .18); }

  .account { display: flex; align-items: center; gap: 9px; justify-self: end; padding: 5px 8px 5px 5px; background: oklch(97% .02 247 / .72); border: 1px solid oklch(98% .035 247); border-radius: 999px; }
  .notification { position: relative; width: 34px; height: 34px; background: transparent; }
  .notification::before { content: ""; position: absolute; inset: 9px 10px 8px; border: 1.7px solid var(--ink); border-radius: 8px 8px 4px 4px; }
  .notification::after { content: ""; position: absolute; width: 4px; height: 4px; right: 7px; top: 7px; background: oklch(62% .2 25); border: 2px solid var(--page); border-radius: 50%; }
  .avatar { display: grid; width: 36px; height: 36px; place-items: center; background: var(--pink-soft); border: 2px solid var(--surface); border-radius: 50%; color: var(--blue-deep); font-size: .68rem; font-weight: 700; }
  .account-copy { display: grid; line-height: 1.22; }
  .account-copy strong { font-size: .75rem; }
  .account-copy span { color: var(--muted); font-size: .62rem; }
  .chevron { color: var(--muted); }

  .report-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin: 34px 0 24px; }
  .eyebrow { margin: 0 0 5px; color: var(--blue); font-size: .66rem; font-weight: 700; letter-spacing: .13em; }
  h1 { margin: 0; color: oklch(19% .045 255); font-family: "Space Grotesk", "Onest", sans-serif; font-size: clamp(1.9rem, 2.6vw, 2.75rem); font-weight: 650; letter-spacing: -.065em; line-height: 1.04; }
  .page-subtitle { max-width: 680px; margin: 8px 0 0; color: oklch(43% .045 252); font-size: .82rem; }
  .filters { display: flex; align-items: end; gap: 12px; }
  .period-picker { position: relative; }
  .select-control, .date-control { height: 56px; background: color-mix(in oklch, var(--surface) 91%, var(--blue-soft)); border: 1px solid oklch(96% .03 247); border-radius: 16px; box-shadow: var(--shadow-soft); }
  .select-control { position: relative; display: grid; min-width: 200px; padding: 8px 39px 7px 15px; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
  .select-control:hover { border-color: oklch(78% .09 243); transform: translateY(-1px); box-shadow: var(--shadow); }
  .select-control::after { content: "⌄"; position: absolute; right: 15px; top: 18px; color: var(--blue); font-size: .95rem; }
  .select-control span, .date-control small { color: var(--muted); font-size: .58rem; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
  .select-control select { width: 100%; padding: 0; appearance: none; background: transparent; border: 0; outline: 0; font-size: .76rem; font-weight: 600; }
  .date-control { display: flex; min-width: 230px; align-items: center; gap: 11px; padding: 0 14px; text-align: left; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
  .date-control:hover, .date-control[aria-expanded="true"] { border-color: oklch(76% .10 243); transform: translateY(-1px); box-shadow: var(--shadow); }
  .date-copy { display: grid; flex: 1; font-size: .76rem; font-weight: 600; }
  .date-copy strong { font-weight: 650; }
  .period-chevron { color: var(--blue); font-size: 1rem; transition: transform .18s ease; }
  .date-control[aria-expanded="true"] .period-chevron { transform: rotate(180deg); }
  .calendar-icon { position: relative; width: 20px; height: 19px; border: 1.5px solid var(--blue); border-radius: 5px; }
  .calendar-icon::before { content: ""; position: absolute; left: 3px; right: 3px; top: 4px; border-top: 1.5px solid var(--blue); }
  .period-menu { position: absolute; z-index: 20; top: calc(100% + 9px); right: 0; width: min(356px, calc(100vw - 28px)); padding: 17px; background: oklch(99.4% .012 248); border: 1px solid oklch(94% .035 247); border-radius: 17px; box-shadow: 0 18px 38px oklch(31% .08 250 / .16); opacity: 0; pointer-events: none; transform: translateY(-5px) scale(.98); transform-origin: top right; transition: opacity .16s ease, transform .16s ease; }
  .period-picker.is-open .period-menu { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
  .period-menu-label { margin: 0 0 8px; color: var(--muted); font-size: .56rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
  .calendar-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; margin-bottom: 10px; }
  .calendar-head strong { text-align: center; text-transform: capitalize; font-size: .76rem; }
  .calendar-nav { min-width: 36px; min-height: 36px; background: var(--page); border-radius: 10px; color: var(--blue); font-size: 1.3rem; line-height: 1; }
  .calendar-nav:hover:not(:disabled) { background: var(--blue-soft); }
  .calendar-nav:disabled { cursor: not-allowed; opacity: .28; }
  .calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .calendar-weekdays span { padding-block: 5px; color: var(--muted); font-size: .52rem; font-weight: 700; text-align: center; }
  .calendar-grid { gap: 2px 0; }
  .calendar-grid button, .calendar-empty { min-width: 0; min-height: 36px; }
  .calendar-grid button { position: relative; z-index: 0; background: transparent; color: var(--ink); font-size: .65rem; font-weight: 600; }
  .calendar-grid button::before { content: ""; position: absolute; z-index: -1; inset: 3px; border-radius: 9px; }
  .calendar-grid button:hover:not(:disabled)::before, .calendar-grid button:focus-visible::before { background: var(--blue-soft); }
  .calendar-grid button.is-in-range { background: color-mix(in oklch, var(--blue-soft) 72%, transparent); color: var(--blue-deep); }
  .calendar-grid button.is-start::before, .calendar-grid button.is-end::before { background: var(--blue); }
  .calendar-grid button.is-start, .calendar-grid button.is-end { color: white; }
  .calendar-grid button:disabled { cursor: not-allowed; color: oklch(72% .015 250); }
  .calendar-selection { min-height: 18px; margin: 8px 0 0; color: var(--blue-deep); font-size: .62rem; font-weight: 650; text-align: center; }
  .period-presets { display: flex; gap: 6px; margin-top: 10px; }
  .period-presets button { flex: 1; padding: 7px 5px; background: var(--page); border-radius: 9px; color: var(--muted); font-size: .58rem; font-weight: 700; }
  .period-presets button:hover, .period-presets button.is-active { background: var(--blue-soft); color: var(--blue); }
  .apply-period { width: 100%; margin-top: 10px; padding: 9px 12px; background: var(--blue); border-radius: 10px; color: white; font-size: .64rem; font-weight: 700; box-shadow: 0 7px 13px oklch(43% .16 259 / .18); }
  .period-menu-divider { height: 1px; margin: 13px 0 10px; background: var(--line); }
  .period-menu-note { margin: 0; color: oklch(43% .045 252); font-size: .63rem; line-height: 1.45; }
  .period-update { display: block; margin-top: 11px; color: var(--muted); font-size: .56rem; font-weight: 600; }

  #dashboard-content { min-height: 690px; }
  .page { display: grid; gap: 16px; animation: page-in .48s cubic-bezier(.16,1,.3,1) both; }
  @keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

  .kpi-grid { display: grid; grid-template-columns: repeat(var(--kpi-count, 5), minmax(0, 1fr)); gap: 14px; }
  .kpi { position: relative; min-height: 116px; padding: 18px 18px 15px; overflow: hidden; background: var(--surface); border: 1px solid oklch(96% .025 247); border-radius: 20px; box-shadow: var(--shadow-soft); }
  .kpi.is-primary { color: oklch(98% .01 255); background: var(--blue); border-color: var(--blue); }
  .kpi.is-sky { background: var(--blue-soft); }
  .kpi.is-green { background: var(--green-soft); }
  .kpi.is-pink { background: var(--pink-soft); }
  .kpi.is-violet { background: var(--violet-soft); }
  .kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .68rem; font-weight: 500; }
  .kpi-label i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; opacity: .45; }
  .kpi-value { display: block; margin-top: 11px; font-size: clamp(1.42rem, 2vw, 1.9rem); font-weight: 650; letter-spacing: -.045em; line-height: 1; }
  .kpi-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; font-size: .59rem; opacity: .74; }
  .delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
  .delta.up::before { content: "↗"; }
  .delta.down::before { content: "↘"; }
  .delta.flat::before { content: ""; }

  .layout-two { display: grid; grid-template-columns: 1.08fr 1fr; gap: 16px; }
  .layout-three { display: grid; grid-template-columns: .92fr 1.12fr .96fr; gap: 16px; }
  .panel { min-width: 0; padding: 19px 21px; background: color-mix(in oklch, var(--surface) 94%, var(--blue-soft)); border: 1px solid oklch(96% .025 247); border-radius: 22px; box-shadow: var(--shadow-soft); }
  .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
  .panel-head h2 { margin: 0; font-size: .94rem; font-weight: 650; letter-spacing: -.025em; }
  .panel-head p { margin: 3px 0 0; color: var(--muted); font-size: .62rem; }
  .panel-action { padding: 6px 0; background: transparent; color: var(--blue); font-size: .63rem; font-weight: 650; }
  .panel-tag { display: inline-flex; padding: 5px 8px; background: var(--page); border-radius: 20px; color: var(--muted); font-size: .56rem; font-weight: 650; white-space: nowrap; }
  .segmented { display: flex; padding: 3px; background: var(--page); border-radius: 9px; }
  .segmented button { min-width: 52px; padding: 5px 8px; background: transparent; border-radius: 7px; color: var(--muted); font-size: .58rem; }
  .segmented button.is-active { background: var(--blue); color: oklch(98% .01 255); }

  .panel:has(.chart-wrap) { padding: 22px 24px 20px; }
  .chart-wrap { position: relative; height: clamp(238px, 19vw, 282px); }
  .chart-wrap.tall { height: clamp(260px, 21vw, 310px); }
  .chart-svg { width: 100%; height: 100%; overflow: visible; }
  .grid-line { stroke: oklch(89% .025 250); stroke-width: 1; }
  .axis-label { fill: oklch(50% .035 250); font: 9.5px "Onest", sans-serif; text-anchor: middle; }
  .line-primary { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .line-secondary { fill: none; stroke: oklch(70% .14 145); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .area-primary { fill: url(#areaFill); }
  .bar-blue { fill: oklch(66% .145 238); }
  .bar-green { fill: oklch(72% .15 145); }
  .bar-pink { fill: oklch(80% .10 20); }
  .bar-violet { fill: oklch(75% .11 282); }
  .emphasis-bar-chart .bar-blue { fill: var(--blue); }
  .emphasis-bar-chart .bar-green { fill: oklch(67% .16 145); }
  .bar-rail { opacity: .72; }
  .bar-rail-primary { fill: oklch(91% .055 238); }
  .bar-rail-secondary { fill: oklch(92% .07 145); }
  .bar-value { fill: var(--ink); font: 650 7.2px "Onest", sans-serif; text-anchor: middle; }
  .bar-value-secondary { fill: oklch(37% .09 145); }
  .emphasis-bar-chart .chart-point rect:not(.chart-hit) { transition: filter .16s cubic-bezier(.16,1,.3,1), transform .16s cubic-bezier(.16,1,.3,1); transform-box: fill-box; transform-origin: center bottom; }
  .emphasis-bar-chart .chart-point:hover .bar-blue, .emphasis-bar-chart .chart-point:hover .bar-green, .emphasis-bar-chart .chart-point:focus .bar-blue, .emphasis-bar-chart .chart-point:focus .bar-green { filter: saturate(1.12) brightness(.98); transform: scaleY(1.025); }
  .combo-bar { fill: oklch(68% .13 237); opacity: .9; transition: opacity .14s ease; }
  .combo-line { fill: none; stroke: var(--blue); stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; }
  .combo-dot { fill: var(--surface); stroke: var(--blue); stroke-width: 2; pointer-events: none; }
  .combo-chart:has(.chart-point:hover) .combo-bar { opacity: .48; }
  .chart-hit { fill: transparent; cursor: crosshair; }
  .point-primary, .point-secondary { opacity: 0; pointer-events: none; transition: opacity .14s ease, r .14s ease; }
  .point-primary { fill: var(--surface); stroke: var(--blue); stroke-width: 2; }
  .point-secondary { fill: var(--surface); stroke: oklch(70% .14 145); stroke-width: 2; }
  .chart-point:focus { outline: none; }
  .chart-point.is-active .point-primary, .chart-point.is-active .point-secondary, .chart-point:focus .point-primary, .chart-point:focus .point-secondary { opacity: 1; r: 4.8; }
  .chart-tooltip { position: absolute; z-index: 5; top: 9px; width: 184px; padding: 10px 11px; background: oklch(22% .045 255 / .96); border: 1px solid oklch(44% .06 250); border-radius: 12px; box-shadow: 0 10px 24px oklch(22% .05 255 / .24); color: oklch(97% .01 250); opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity .14s ease, transform .14s ease; }
  .chart-tooltip.is-visible { opacity: 1; transform: translate(-50%, 0); }
  .chart-tooltip strong { display: block; margin-bottom: 6px; font-size: .65rem; }
  .chart-tooltip span { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 6px; padding-top: 3px; color: oklch(84% .02 250); font-size: .57rem; }
  .chart-tooltip span i { width: 6px; height: 6px; background: var(--blue-soft); border-radius: 50%; }
  .chart-tooltip span:nth-child(3) i { background: oklch(78% .12 145); }
  .chart-tooltip b { color: white; }
  .chart-legend { display: flex; align-items: center; gap: 16px; margin-top: 8px; color: var(--muted); font-size: .59rem; }
  .chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .chart-legend i { width: 7px; height: 7px; background: var(--blue); border-radius: 50%; }
  .chart-legend span:nth-child(2) i { background: oklch(70% .14 145); }
  .emphasis-chart-legend { justify-content: center; gap: 22px; margin-top: 11px; }
  .emphasis-chart-legend i { width: 9px; height: 9px; }
  .channel-share-panel .panel-head { margin-bottom: 4px; }
  .channel-share-panel .chart-wrap { height: clamp(252px, 20vw, 292px); }
  .combo-legend span:first-child i { width: 11px; height: 7px; background: oklch(72% .095 237); border-radius: 2px; }
  .combo-legend span:nth-child(2) i { width: 12px; height: 2px; background: var(--blue); border-radius: 2px; }

  .donut-block { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; min-height: 200px; }
  .donut { position: relative; width: 142px; aspect-ratio: 1; margin: auto; border-radius: 50%; background: conic-gradient(var(--blue) 0 42%, oklch(72% .11 235) 42% 69%, oklch(78% .12 145) 69% 88%, oklch(82% .10 20) 88% 100%); }
  .donut::after { content: ""; position: absolute; inset: 22px; background: var(--surface); border-radius: 50%; }
  .donut-copy { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; text-align: center; }
  .donut-copy strong { font-size: 1.05rem; }
  .donut-copy span { color: var(--muted); font-size: .55rem; }
  .legend-list { display: grid; gap: 11px; }
  .legend-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; font-size: .64rem; }
  .legend-row i { width: 7px; height: 7px; background: var(--dot); border-radius: 50%; }
  .legend-row span { color: var(--muted); }
  .detail-hover { position: relative; border-radius: 8px; }
  .detail-hover::after { content: attr(data-detail); position: absolute; z-index: 8; left: 50%; bottom: calc(100% + 7px); width: max-content; max-width: 210px; padding: 7px 9px; background: oklch(22% .045 255 / .96); border-radius: 9px; color: white; font-size: .56rem; font-weight: 600; line-height: 1.35; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .14s ease, transform .14s ease; }
  .detail-hover:hover::after, .detail-hover:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
  .detail-hover:focus-visible { outline: 2px solid oklch(68% .15 248 / .48); outline-offset: 3px; }

  .funnel { display: grid; gap: 9px; padding-top: 3px; }
  .funnel-row { display: grid; grid-template-columns: 92px 1fr 42px; align-items: center; gap: 10px; font-size: .63rem; }
  .funnel-row span:first-child { color: var(--muted); }
  .funnel-track { height: 11px; overflow: hidden; background: var(--page); border-radius: 20px; }
  .funnel-fill { width: var(--w); height: 100%; background: var(--c, var(--blue)); border-radius: inherit; }
  .funnel-row b { text-align: right; font-size: .66rem; }

  .data-table { width: 100%; border-collapse: collapse; font-size: .64rem; }
  .data-table th { padding: 0 9px 9px; color: var(--muted); font-size: .56rem; font-weight: 600; letter-spacing: .025em; text-align: right; text-transform: uppercase; }
  .data-table th:first-child, .data-table td:first-child { padding-left: 0; text-align: left; }
  .data-table td { padding: 11px 9px; border-top: 1px solid var(--line); text-align: right; }
  .data-table td:first-child { font-weight: 600; }
  .campaign-name { display: flex; align-items: center; gap: 8px; }
  .campaign-name i { width: 7px; height: 7px; flex: 0 0 auto; background: var(--c, var(--blue)); border-radius: 50%; }
  .campaign-name span { display: grid; gap: 2px; }
  .campaign-name b { font-size: .64rem; white-space: nowrap; }
  .campaign-name small { color: var(--muted); font-size: .52rem; font-weight: 500; white-space: nowrap; }
  .campaign-detail-table { min-width: 1080px; }
  .campaign-detail-table th { white-space: nowrap; }
  .metric-pending { display: inline-flex; min-width: 34px; justify-content: center; padding: 4px 7px; background: oklch(93% .035 85); border-radius: 999px; color: oklch(50% .08 75); }

  .auction-grid { grid-template-columns: .78fr 1.22fr; }
  .auction-donut-panel .donut-block { min-height: 224px; }
  .auction-donut-panel .donut { width: 156px; }
  .auction-donut-panel .donut::after { inset: 25px; }
  .auction-donut-panel .donut-copy strong { font-size: 1.45rem; letter-spacing: -.045em; }
  .auction-comparison { position: relative; display: grid; gap: 12px; min-height: 224px; align-content: center; padding-top: 18px; }
  .auction-scale { position: absolute; top: 0; left: 154px; right: 48px; display: flex; justify-content: space-between; color: var(--muted); font-size: .5rem; }
  .auction-row { display: grid; grid-template-columns: 142px 1fr 42px; align-items: center; gap: 12px; }
  .auction-name { display: flex; min-width: 0; align-items: center; gap: 7px; font-size: .62rem; }
  .auction-name > i { width: 7px; height: 7px; flex: 0 0 auto; background: var(--auction-color); border-radius: 50%; }
  .auction-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auction-name b { flex: 0 0 auto; padding: 2px 5px; background: var(--blue-soft); border-radius: 999px; color: var(--blue-deep); font-size: .48rem; }
  .auction-track { position: relative; height: 12px; overflow: hidden; background: linear-gradient(to right, transparent 24.7%, var(--line) 25%, transparent 25.3%, transparent 49.7%, var(--line) 50%, transparent 50.3%, transparent 74.7%, var(--line) 75%, transparent 75.3%), var(--page); border-radius: 999px; }
  .auction-fill { width: var(--auction-width); height: 100%; min-width: 3px; background: var(--auction-color); border-radius: inherit; transition: filter .16s ease, transform .16s ease; transform-origin: left center; }
  .auction-fill.is-client { box-shadow: 0 5px 12px oklch(43% .16 259 / .22); }
  .auction-row:hover .auction-fill, .auction-row:focus-visible .auction-fill { filter: saturate(1.15); transform: scaleY(1.18); }
  .auction-row:focus-visible { outline: 2px solid oklch(68% .15 248 / .48); outline-offset: 4px; }
  .auction-row > strong { text-align: right; font-size: .66rem; }
  .auction-empty { display: grid; grid-template-columns: 128px 1fr; min-height: 224px; align-items: center; gap: 22px; color: var(--muted); }
  .auction-empty strong { color: var(--ink); font-size: .72rem; }
  .auction-empty p { max-width: 31ch; margin: 5px 0 0; font-size: .6rem; line-height: 1.5; }
  .auction-empty-ring { width: 118px; aspect-ratio: 1; border: 18px solid var(--page); border-top-color: oklch(83% .045 242); border-radius: 50%; transform: rotate(20deg); }
  .auction-empty-compact { grid-template-columns: 146px 1fr; }
  .auction-empty-bars { display: grid; align-items: end; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 138px; height: 104px; padding: 12px 14px 0; border-bottom: 1px solid var(--line); }
  .auction-empty-bars i { height: 48%; background: oklch(88% .035 245); border-radius: 6px 6px 0 0; }
  .auction-empty-bars i:nth-child(2) { height: 78%; }
  .auction-empty-bars i:nth-child(3) { height: 61%; }

  .city-heatmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; min-height: 190px; }
  .city-cell { position: relative; display: grid; min-height: 148px; align-content: end; padding: 15px; overflow: hidden; background: oklch(52% .19 255 / var(--heat)); border: 1px solid oklch(75% .09 248 / .45); border-radius: 17px; color: var(--blue-deep); transition: transform .16s ease, box-shadow .16s ease; }
  .city-cell::before { content: ""; position: absolute; width: 92px; height: 92px; right: -30px; top: -34px; border: 1px solid currentColor; border-radius: 50%; opacity: .15; }
  .city-cell:hover, .city-cell:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); outline: none; }
  .city-cell.is-strong { color: white; }
  .city-cell span { font-size: .65rem; font-weight: 650; }
  .city-cell strong { margin-top: 8px; font-family: "Space Grotesk", "Onest", sans-serif; font-size: 1.65rem; letter-spacing: -.05em; line-height: 1; }
  .city-cell small { margin-top: 5px; font-size: .54rem; opacity: .76; }
  .city-cell::after { content: attr(data-detail); position: absolute; z-index: 4; left: 12px; right: 12px; top: 12px; padding: 7px 8px; background: oklch(20% .04 255 / .9); border-radius: 8px; color: white; font-size: .52rem; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
  .city-cell:hover::after, .city-cell:focus-visible::after { opacity: 1; transform: translateY(0); }
  .data-caveat { margin: 11px 0 0; color: var(--muted); font-size: .56rem; line-height: 1.45; }
  .geo-funnel-grid { grid-template-columns: 1.18fr .82fr; }
  .geo-funnel-grid > .panel { min-height: 430px; }
  .city-map-shell { position: relative; }
  .city-map { z-index: 0; height: 324px; overflow: hidden; background: var(--blue-soft); border: 1px solid oklch(88% .055 247); border-radius: 18px; }
  .city-map .leaflet-tile-pane { filter: saturate(.55) contrast(.92) brightness(1.04); }
  .city-map .leaflet-control-zoom { overflow: hidden; border: 0; border-radius: 10px; box-shadow: var(--shadow-soft); }
  .city-map .leaflet-control-zoom a { color: var(--blue-deep); }
  .city-map .leaflet-control-attribution { background: oklch(98% .01 250 / .86); color: var(--muted); font-size: .48rem; }
  .city-map .leaflet-control-attribution a { color: var(--blue-deep); }
  .map-tooltip { display: grid; gap: 2px; padding: 8px 10px; background: oklch(21% .045 255 / .96); border: 0; border-radius: 9px; box-shadow: var(--shadow); color: white; font-family: "Onest", sans-serif; font-size: .58rem; }
  .map-tooltip::before { border-top-color: oklch(21% .045 255 / .96); }
  .map-tooltip strong { font-size: .62rem; }
  .map-tooltip span { color: oklch(85% .03 245); }
  .map-legend { position: absolute; z-index: 500; left: 12px; bottom: 13px; display: grid; gap: 4px; min-width: 158px; padding: 9px 10px; background: oklch(99% .01 250 / .92); border: 1px solid oklch(93% .03 248); border-radius: 11px; box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); }
  .map-legend span { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 6px; color: var(--muted); font-size: .5rem; }
  .map-legend i { width: 7px; height: 7px; background: var(--marker); border-radius: 50%; }
  .map-legend b { color: var(--ink); }
  .map-total { position: absolute; z-index: 500; top: 12px; right: 12px; padding: 6px 9px; background: oklch(99% .01 250 / .92); border-radius: 999px; color: var(--blue-deep); font-size: .52rem; font-weight: 700; box-shadow: var(--shadow-soft); }
  .map-empty { display: grid; height: 100%; margin: 0; place-items: center; color: var(--muted); font-size: .65rem; }
  .conversion-funnel .funnel { gap: 14px; padding: 14px 0 20px; }
  .conversion-funnel .funnel-row { grid-template-columns: 82px 1fr 64px; }
  .conversion-funnel .funnel-track { height: 15px; }
  .conversion-funnel .funnel-fill:not([style*="--w:0%"]){ min-width: 4px; }
  .funnel-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 13px; border-top: 1px solid var(--line); }
  .funnel-rates span { display: grid; gap: 3px; }
  .funnel-rates small { color: var(--muted); font-size: .52rem; }
  .funnel-rates strong { font-size: .76rem; }
  .true-funnel { display: flex; min-height: 300px; align-items: center; flex-direction: column; justify-content: center; padding: 4px 12px 17px; }
  .true-funnel-stage { position: relative; display: grid; width: var(--stage-width); min-height: 84px; place-content: center; justify-items: center; margin-top: -8px; padding: 16px 42px; background: var(--stage-color); clip-path: polygon(2% 0,98% 0,86% 100%,14% 100%); color: var(--blue-deep); text-align: center; transition: filter .16s ease, transform .16s ease; }
  .true-funnel-stage:first-child { margin-top: 0; color: white; }
  .true-funnel-stage:hover, .true-funnel-stage:focus-visible { z-index: 2; filter: saturate(1.16) brightness(.98); outline: none; transform: scale(1.025); }
  .true-funnel-stage span { font-size: .62rem; font-weight: 650; }
  .true-funnel-stage strong { margin-top: 3px; font-family: "Space Grotesk", "Onest", sans-serif; font-size: 1.34rem; letter-spacing: -.045em; line-height: 1; }
  .true-funnel-stage small { margin-top: 4px; font-size: .49rem; opacity: .7; }
  .status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; background: var(--green-soft); border-radius: 20px; color: oklch(38% .09 145); font-size: .54rem; font-weight: 650; }
  .status-pill.warning { background: oklch(93% .08 85); color: oklch(45% .1 70); }

  .mini-bars { display: grid; gap: 12px; padding-top: 4px; }
  .mini-bar { display: grid; grid-template-columns: 96px 1fr 48px; align-items: center; gap: 9px; font-size: .62rem; }
  .mini-bar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
  .mini-bar-track { height: 10px; background: var(--page); border-radius: 10px; }
  .mini-bar-fill { width: var(--w); height: 100%; background: var(--c, var(--blue)); border-radius: inherit; }
  .mini-bar b { text-align: right; }

  .health-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .health-card { padding: 13px; background: var(--page); border-radius: 15px; }
  .health-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .health-top strong { font-size: .64rem; }
  .health-dot { width: 8px; height: 8px; background: oklch(72% .16 145); border-radius: 50%; box-shadow: 0 0 0 4px oklch(90% .08 145); }
  .health-card.pending { background: oklch(96% .025 85); }
  .health-dot.pending { background: oklch(72% .13 75); box-shadow: 0 0 0 4px oklch(91% .06 85); }
  .health-card b { display: block; margin-top: 10px; font-size: 1.05rem; }
  .health-card small { color: var(--muted); font-size: .54rem; }

  .insight { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 13px 16px; background: oklch(96% .035 252); border: 1px solid oklch(89% .055 252); border-radius: 16px; }
  .insight-icon { display: grid; width: 34px; height: 34px; place-items: center; background: var(--blue); border-radius: 50%; color: white; font-weight: 700; }
  .insight strong { display: block; font-size: .69rem; }
  .insight p { margin: 2px 0 0; color: var(--muted); font-size: .6rem; }
  .insight .panel-action { white-space: nowrap; }

  .empty-state { min-height: 520px; display: grid; place-items: center; align-content: center; padding: 56px; text-align: center; }
  .empty-state-mark { display: grid; width: 64px; height: 64px; margin-bottom: 18px; place-items: center; background: var(--blue-soft); border-radius: 20px; color: var(--blue); font-size: 1.5rem; font-weight: 700; }
  .empty-state .eyebrow { margin-bottom: 7px; }
  .empty-state h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.035em; }
  .empty-state > p:not(.eyebrow) { max-width: 620px; margin: 10px 0 24px; color: var(--muted); font-size: .78rem; }
  .source-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .source-list span { padding: 7px 10px; background: var(--green-soft); border-radius: 20px; color: oklch(38% .09 145); font-size: .62rem; font-weight: 650; }
  .source-list span.pending { background: oklch(93% .08 85); color: oklch(45% .1 70); }

  .report-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding: 0 4px; color: oklch(43% .05 252); font-size: .59rem; font-weight: 500; }
  .status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: oklch(72% .16 145); border-radius: 50%; }
  .live-status { display: inline-flex; align-items: center; }
  .live-status.is-loading .status-dot { background: oklch(70% .11 235); animation: status-pulse 1.1s ease-in-out infinite; }
  .live-status.is-snapshot .status-dot { background: oklch(72% .13 75); }
  .live-status.is-error .status-dot { background: oklch(64% .19 35); box-shadow: 0 0 0 4px oklch(92% .06 35); }
  .live-status.is-live .status-dot { box-shadow: 0 0 0 4px oklch(90% .08 145); }
  @keyframes status-pulse { 50% { opacity: .35; transform: scale(.75); } }
}

@layer utilities {
  .span-2 { grid-column: span 2; }
  .span-full { grid-column: 1 / -1; }
  .muted { color: var(--muted); }

  /* Escala de apresentação: melhora a leitura à distância em TVs e monitores grandes. */
  @media (min-width: 1280px) {
    .brand { width: 184px; }
    .nav-item { font-size: .9rem; }
    .account-copy strong { font-size: .88rem; }
    .account-copy span { font-size: .73rem; }
    .eyebrow { font-size: .78rem; }
    .page-subtitle { font-size: .94rem; }
    .select-control span, .date-control small { font-size: .7rem; }
    .select-control select, .date-copy { font-size: .9rem; }

    .kpi-label { font-size: .82rem; }
    .kpi-value { font-size: clamp(1.68rem, 2.1vw, 2.2rem); }
    .kpi-foot { font-size: .73rem; }

    .panel-head h2 { font-size: 1.14rem; }
    .panel-head p { font-size: .8rem; }
    .panel-tag { font-size: .7rem; }
    .axis-label { font-size: 13px; }
    .chart-tooltip strong { font-size: .8rem; }
    .chart-tooltip span { font-size: .71rem; }
    .chart-legend { font-size: .76rem; }

    .donut-copy span { font-size: .7rem; }
    .legend-row { font-size: .78rem; }
    .detail-hover::after { font-size: .7rem; }
    .funnel-row, .funnel-row b { font-size: .78rem; }

    .data-table { font-size: .82rem; }
    .data-table th { font-size: .7rem; }
    .data-table td { padding-block: 14px; }
    .campaign-name b { font-size: .81rem; }
    .campaign-name small { font-size: .68rem; }
    .data-caveat { font-size: .7rem; }

    .map-tooltip { font-size: .74rem; }
    .map-tooltip strong { font-size: .8rem; }
    .map-legend span, .map-total { font-size: .69rem; }
    .map-empty { font-size: .8rem; }

    .funnel-rates small { font-size: .69rem; }
    .funnel-rates strong { font-size: .98rem; }
    .true-funnel-stage span { font-size: .8rem; }
    .true-funnel-stage strong { font-size: 1.66rem; }
    .true-funnel-stage small { font-size: .66rem; }

    .mini-bar { font-size: .77rem; }
    .auction-scale { font-size: .65rem; }
    .auction-name, .auction-row > strong { font-size: .78rem; }
    .auction-name b { font-size: .61rem; }
    .auction-empty strong { font-size: .86rem; }
    .auction-empty p { font-size: .73rem; }
    .insight strong { font-size: .84rem; }
    .insight p { font-size: .74rem; }
    .report-footer { font-size: .72rem; }
  }

  @media (max-width: 1180px) {
    .dashboard-shell { width: calc(100% - 24px); padding: 24px; border-radius: 26px; }
    .topbar { grid-template-columns: 180px 1fr auto; }
    .account-copy, .chevron { display: none; }
    .nav-item { padding-inline: 10px; }
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .health-grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (max-width: 860px) {
    .dashboard-shell { margin: 12px auto; min-height: calc(100vh - 24px); }
    .topbar { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .primary-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
    .nav-item { flex: 0 0 auto; }
    .report-head { align-items: stretch; flex-direction: column; }
    .filters { align-items: stretch; }
    .select-control, .period-picker { flex: 1; }
    .date-control { width: 100%; min-width: 0; }
    .layout-two, .layout-three { grid-template-columns: 1fr; }
    .auction-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 560px) {
    .dashboard-shell { width: 100%; margin: 0; padding: 18px 14px; border: 0; border-radius: 0; }
    .brand { width: 138px; }
    .notification { display: none; }
    .nav-item { padding-inline: 9px; }
    .nav-item { gap: 6px; padding-inline: 8px; }
    .nav-item .nav-icon { display: grid; }
    .report-head { margin-top: 28px; }
    .filters { flex-direction: column; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .kpi { min-height: 106px; padding: 14px; }
    .panel, .panel:has(.chart-wrap) { padding: 17px 15px; border-radius: 18px; }
    .chart-wrap { height: 230px; }
    .chart-wrap.tall { height: 250px; }
    .donut-block { grid-template-columns: 1fr; }
    .auction-donut-panel .donut-block { grid-template-columns: 136px 1fr; }
    .auction-donut-panel .donut { width: 126px; }
    .auction-comparison { min-height: 250px; }
    .auction-scale { left: 0; right: 0; padding-left: 0; }
    .auction-row { grid-template-columns: 1fr 46px; gap: 7px 10px; }
    .auction-name { grid-column: 1 / -1; }
    .auction-empty, .auction-empty-compact { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .auction-empty p { margin-inline: auto; }
    .health-grid { grid-template-columns: repeat(2, 1fr); }
    .data-table { min-width: 620px; }
    .campaign-detail-table { min-width: 1060px; }
    .table-scroll { overflow-x: auto; }
    .city-heatmap { grid-template-columns: 1fr 1fr; }
    .city-cell { min-height: 126px; }
    .city-map { height: 310px; }
    .map-legend { right: 10px; left: 10px; grid-template-columns: 1fr; }
    .map-total { top: 10px; right: 10px; }
    .true-funnel { min-height: 292px; padding-inline: 0; }
    .true-funnel-stage { min-height: 80px; padding-inline: 24px; }
    .report-footer { align-items: flex-start; gap: 8px; flex-direction: column; }
    .period-menu { position: fixed; inset: auto 10px 10px; width: auto; max-height: calc(100vh - 20px); overflow-y: auto; transform-origin: bottom center; }
  }

  @media (pointer: coarse) {
    .calendar-grid button { min-height: 42px; }
    .period-presets button, .apply-period { min-height: 44px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}