:root {
  --app-bg: #0d0f12;
  --app-bg-2: #13161b;
  --app-card: #16191f;
  --app-card-2: #1d2128;
  --app-text: #eef1f5;
  --app-hint: #8b929e;
  --app-line: rgba(255, 255, 255, 0.07);
  --app-accent: #22e584;
  --app-accent-text: #04200f;
  --hdr-bg: #0d0f12;
  --green: #22e584;
  --red: #ff4d5e;
  --blue: #4da3ff;
  --violet: #a68bff;
  --amber: #ffb547;
  --green-soft: rgba(34, 229, 132, 0.13);
  --red-soft: rgba(255, 77, 94, 0.14);
  --font: "Inter", -apple-system, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif;
  --stage-bg: radial-gradient(55% 65% at 22% 38%, rgba(34, 229, 132, 0.13), transparent 62%),
    radial-gradient(45% 55% at 82% 72%, rgba(77, 163, 255, 0.13), transparent 62%), #08090b;
}

body {
  background: var(--stage-bg);
}

/* Info panel: dark check on the bright accent */
.info__features li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2304200f' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 14px no-repeat,
    var(--app-accent);
}

.app {
  font-variant-numeric: tabular-nums;
}

.hint {
  color: var(--app-hint);
  font-size: 12.5px;
}

h1,
h2 {
  letter-spacing: -0.01em;
}

.card {
  position: relative;
  margin-top: 10px;
  padding: 14px;
  border-radius: 20px;
  background: var(--app-card);
  border: 1px solid var(--app-line);
}

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card__head--center {
  align-items: center;
}

.card__head h2 {
  font-size: 15px;
  font-weight: 700;
}

.card__head .hint {
  margin-top: 1px;
}

.view {
  display: none;
  padding: 12px 16px 16px;
  animation: viewIn 0.28s ease;
}

.view.is-active {
  display: block;
}

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.page-head {
  margin: 4px 0 14px;
}

.page-head h1 {
  font-size: 26px;
  font-weight: 800;
}

/* ——— Segmented control ——— */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
}

.seg__btn {
  min-height: 32px;
  border-radius: 9px;
  color: var(--app-hint);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.seg__btn.is-active {
  background: #262b34;
  color: var(--app-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.seg--sm {
  padding: 2px;
  border-radius: 10px;
}

.seg--sm .seg__btn {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12.5px;
}

/* ——— Chips ——— */
.chips {
  display: flex;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: var(--app-hint);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.chip.is-active {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--app-text);
}

.chip.is-active i {
  opacity: 1;
}

.chips--filter {
  margin: 12px 0 12px;
}

.chips--filter .chip span {
  opacity: 0.6;
  font-weight: 500;
}

.chips--filter .chip.is-active {
  background: var(--app-text);
  border-color: var(--app-text);
  color: #0d0f12;
}

/* ——— Team header ——— */
.team {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team__logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(140deg, #2b3340, #171b22);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.team__logo svg {
  width: 24px;
  height: 24px;
}

.team__who {
  flex: 1;
  min-width: 0;
}

.team__who b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.team__who span {
  color: var(--app-hint);
  font-size: 13px;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

.live i {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.live i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--green);
  opacity: 0;
  animation: ping 2s ease-out infinite;
}

@keyframes ping {
  0% {
    transform: scale(0.4);
    opacity: 0.8;
  }
  80%,
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* ——— Alert banner ——— */
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px 8px 9px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 77, 94, 0.16), rgba(255, 77, 94, 0.05));
  border: 1px solid rgba(255, 77, 94, 0.28);
  text-align: left;
  animation: viewIn 0.3s ease;
}

.banner[hidden] {
  display: none;
}

.banner--warning {
  background: linear-gradient(90deg, rgba(255, 181, 71, 0.15), rgba(255, 181, 71, 0.04));
  border-color: rgba(255, 181, 71, 0.28);
}

.banner--info {
  background: linear-gradient(90deg, rgba(34, 229, 132, 0.13), rgba(34, 229, 132, 0.03));
  border-color: rgba(34, 229, 132, 0.25);
}

.banner__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255, 77, 94, 0.2);
  color: var(--red);
}

.banner--warning .banner__icon {
  background: rgba(255, 181, 71, 0.2);
  color: var(--amber);
}

.banner--info .banner__icon {
  background: rgba(34, 229, 132, 0.18);
  color: var(--green);
}

.banner__icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.banner__text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
}

.banner__text b {
  display: block;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner__text span {
  color: var(--app-hint);
  font-size: 12px;
}

.banner__count {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.banner .chev {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: var(--app-hint);
}

.team + .seg,
.banner + .seg {
  margin-top: 12px;
}

/* ——— KPI tiles ——— */
.kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.kpi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 13px 10px;
  border-radius: 16px;
  background: var(--app-card);
  border: 1px solid var(--app-line);
}

.kpi__label {
  color: var(--app-hint);
  font-size: 12.5px;
  font-weight: 600;
}

.kpi__value {
  margin: 1px 0 2px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  white-space: nowrap;
}

.kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.kpi__delta svg,
.delta svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
}

.kpi__delta small {
  overflow: hidden;
  color: var(--app-hint);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
}

.is-up {
  color: var(--green);
}

.is-down {
  color: var(--red);
}

.is-down svg {
  transform: rotate(180deg);
}

.kpi--profit {
  background: linear-gradient(155deg, rgba(34, 229, 132, 0.12), rgba(34, 229, 132, 0) 62%), var(--app-card);
  border-color: rgba(34, 229, 132, 0.2);
}

.kpi--profit.is-neg {
  background: linear-gradient(155deg, rgba(255, 77, 94, 0.12), rgba(255, 77, 94, 0) 62%), var(--app-card);
  border-color: rgba(255, 77, 94, 0.22);
}

.pos {
  color: var(--green);
}

.neg {
  color: var(--red);
}

/* ——— Chart ——— */
.chart-card__total {
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.chart-card__total small {
  display: block;
  color: var(--app-hint);
  font-size: 11.5px;
  font-weight: 500;
}

.chart-card .chips {
  margin-top: 10px;
}

.chart {
  position: relative;
  height: 178px;
  margin: 4px -2px -4px;
  touch-action: pan-y;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  border-radius: 10px;
}

.chart:focus-visible {
  box-shadow: 0 0 0 2px rgba(34, 229, 132, 0.5);
}

.chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart__grid line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}

.chart__grid line.is-zero {
  stroke: rgba(255, 255, 255, 0.2);
}

.chart text {
  fill: var(--app-hint);
  font-size: 10.5px;
  font-weight: 500;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.chart__line {
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart__fc {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
  opacity: 0.55;
}

.chart__now line {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-dasharray: 3 3;
}

.chart__now text {
  fill: var(--app-text);
  font-weight: 700;
  font-size: 10px;
}

.chart__guide {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chart__dot,
.chart__end {
  stroke: var(--app-card);
  stroke-width: 2.5;
}

.chart__dot {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chart.is-scrubbing .chart__guide,
.chart.is-scrubbing .chart__dot {
  opacity: 1;
}

.chart.is-scrubbing .chart__end {
  opacity: 0;
}

.chart__end {
  transition: opacity 0.2s ease;
}

.chart__halo {
  opacity: 0.25;
  transform-box: fill-box;
  transform-origin: center;
  animation: halo 2s ease-out infinite;
}

.chart.is-scrubbing .chart__halo {
  display: none;
}

@keyframes halo {
  0% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.chart__tip {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  min-width: 108px;
  padding: 7px 10px 8px;
  border-radius: 11px;
  background: rgba(31, 35, 43, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  font-size: 11.5px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chart.is-scrubbing .chart__tip {
  opacity: 1;
}

.chart__tip span {
  display: block;
  color: var(--app-hint);
}

.chart__tip b {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 1px 0;
  font-size: 15px;
  font-weight: 700;
}

.chart__tip b i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ——— Breakdown ——— */
.bd-cols {
  display: grid;
  grid-template-columns: 1fr 64px 58px;
  gap: 8px;
  margin: 14px 0 4px;
  padding-left: 44px;
  color: var(--app-hint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bd-cols span {
  text-align: right;
}

.bd-cols span:first-child {
  grid-column: 2;
}

.bd {
  list-style: none;
}

.bd__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 64px 58px;
  align-items: center;
  gap: 10px 8px;
  padding: 9px 0;
  border-top: 1px solid var(--app-line);
  animation: rowIn 0.35s ease both;
}

.bd__row:first-child {
  border-top: 0;
}

@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

.bd__name {
  min-width: 0;
}

.bd__name b {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar {
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transform-origin: left;
  animation: grow 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
}

.bd__spend {
  text-align: right;
  font-size: 13.5px;
  font-weight: 600;
}

.bd__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.bd__bar .bar {
  flex: 1;
  margin-top: 0;
}

.bd__bar small {
  min-width: 26px;
  color: var(--app-hint);
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}

.pill {
  justify-self: end;
  min-width: 52px;
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

.pill.pos {
  background: var(--green-soft);
}

.pill.neg {
  background: var(--red-soft);
}

/* GEO badge: code + a small flag-colour strip (no flag emoji) */
.geo {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 26px;
  padding-bottom: 2px;
  border-radius: 7px;
  background: #222730;
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.geo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--flag);
}

.geo--sm {
  display: inline-grid;
  width: 28px;
  height: 19px;
  border-radius: 5px;
  font-size: 9.5px;
  vertical-align: -4px;
}

.geo--sm::after {
  height: 2px;
}

/* Traffic source tile */
.src {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.src svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ——— Funnel ——— */
.funnel {
  margin-top: 12px;
}

.fstep__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
}

.fstep__row span {
  color: var(--app-hint);
  font-weight: 500;
}

.fstep__row b {
  font-size: 15px;
  font-weight: 700;
}

.fstep__bar {
  height: 10px;
  margin-top: 6px;
  border-radius: 5px;
  transform-origin: left;
  animation: grow 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.fconv {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 9px;
  color: var(--app-hint);
  font-size: 12px;
}

.fconv svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  transform: rotate(90deg);
}

.fconv b {
  color: var(--app-text);
  font-weight: 700;
}

.funnel__foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--app-line);
}

.funnel__foot div {
  text-align: center;
}

.funnel__foot div + div {
  border-left: 1px solid var(--app-line);
}

.funnel__foot span {
  display: block;
  color: var(--app-hint);
  font-size: 11.5px;
}

.funnel__foot b {
  font-size: 14px;
  font-weight: 700;
}

/* ——— Campaigns ——— */
.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search > svg {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  fill: var(--app-hint);
  pointer-events: none;
}

.search input {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 38px;
  border-radius: 12px;
  border: 1px solid var(--app-line);
  background: var(--app-card);
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.search input::placeholder {
  color: #6c7380;
}

.search input:focus {
  border-color: rgba(34, 229, 132, 0.55);
  background: #191d24;
}

.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

.search__clear {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.search__clear[hidden] {
  display: none;
}

.search__clear svg {
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  fill: var(--app-text);
}

.camps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  list-style: none;
}

.camp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  width: 100%;
  padding: 11px 12px 11px 13px;
  border-radius: 16px;
  background: var(--app-card);
  border: 1px solid var(--app-line);
  text-align: left;
  animation: rowIn 0.3s ease both;
  transition: background 0.2s ease, transform 0.15s ease;
}

.camp:active {
  transform: scale(0.985);
  background: var(--app-card-2);
}

.camp__name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.camp__name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camp__name em {
  color: var(--app-hint);
  font-style: normal;
  font-weight: 500;
}

.dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(34, 229, 132, 0.16);
}

.dot--paused {
  background: #6b7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.18);
}

.camp__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-left: 14px;
  color: var(--app-hint);
  font-size: 12px;
  white-space: nowrap;
}

.camp__budget {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-av {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #0d0f12;
  font-size: 10px;
  font-weight: 800;
}

.camp__spark {
  flex-shrink: 0;
  width: 46px;
  height: 20px;
  margin-left: auto;
  overflow: visible;
}

.camp__spend {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
}

.camp__roi {
  grid-column: 2;
  grid-row: 2;
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
}

.camp.is-paused .camp__spend,
.camp.is-paused .camp__spark {
  opacity: 0.55;
}

.tag-paused {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #b4bac4;
  font-size: 11px;
  font-weight: 600;
}

.camp.is-flash {
  animation: flash 1.4s ease;
}

@keyframes flash {
  0%,
  30% {
    background: rgba(34, 229, 132, 0.14);
    border-color: rgba(34, 229, 132, 0.45);
  }
}

.no-anim .camp,
.no-anim .alert {
  animation: none;
}

.no-anim .camp.is-flash {
  animation: flash 1.4s ease;
}

.more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  color: var(--app-hint);
  font-size: 13.5px;
  font-weight: 600;
}

.more[hidden] {
  display: none;
}

.nothing {
  padding: 36px 20px;
  color: var(--app-hint);
  font-size: 14px;
  text-align: center;
}

.nothing b {
  display: block;
  margin-bottom: 4px;
  color: var(--app-text);
  font-size: 15px;
}

/* ——— Buyers ——— */
.team-goal {
  margin-top: 0;
  padding: 16px;
  background: radial-gradient(90% 90% at 100% 0%, rgba(34, 229, 132, 0.1), transparent 60%), var(--app-card);
}

.goal__label {
  color: var(--app-hint);
  font-size: 12.5px;
  font-weight: 600;
}

.goal__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.goal__value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.goal__of {
  color: var(--app-hint);
  font-size: 13px;
  white-space: nowrap;
}

.goal__of b {
  color: var(--app-text);
}

.goal__bar {
  display: flex;
  gap: 2px;
  height: 10px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.goal__bar span {
  height: 100%;
  transform-origin: left;
  animation: grow 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.goal__legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  list-style: none;
}

.goal__legend li {
  min-width: 0;
  color: var(--app-hint);
}

.goal__legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.goal__legend i {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.goal__legend b {
  display: block;
  margin: 2px 0 0 14px;
  color: var(--app-text);
  font-size: 13.5px;
  font-weight: 600;
}

.buyers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
  list-style: none;
}

.buyer {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 20px;
  background: var(--app-card);
  border: 1px solid var(--app-line);
  text-align: left;
  animation: rowIn 0.35s ease both;
  transition: transform 0.15s ease, background 0.2s ease;
}

.buyer:active {
  transform: scale(0.985);
  background: var(--app-card-2);
}

.buyer__top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.buyer__rank {
  flex-shrink: 0;
  width: 16px;
  color: var(--app-hint);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.buyer__rank.is-first {
  color: #ffd66b;
}

.avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #0d0f12;
  font-size: 16px;
  font-weight: 800;
}

.avatar.is-first::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #ffd66b;
}

.buyer__who {
  flex: 1;
  min-width: 0;
}

.buyer__who b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
}

.buyer__who > span {
  display: block;
  overflow: hidden;
  color: var(--app-hint);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buyer__profit {
  text-align: right;
}

.buyer__chev {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: -4px;
  fill: var(--app-hint);
  opacity: 0.7;
}

.buyer__profit b {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.buyer__profit span {
  font-size: 12px;
  font-weight: 600;
}

.buyer__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--app-line);
}

.buyer__stats span {
  display: block;
  color: var(--app-hint);
  font-size: 11.5px;
}

.buyer__stats b {
  font-size: 14px;
  font-weight: 600;
}

.buyer__stats .geo {
  margin-top: 2px;
  vertical-align: 0;
}

.buyer__goal {
  margin-top: 11px;
}

.buyer__goal-row {
  display: flex;
  justify-content: space-between;
  color: var(--app-hint);
  font-size: 12px;
}

.buyer__goal-row b {
  color: var(--app-text);
  font-weight: 600;
}

.buyer__goal .bar {
  height: 6px;
}

.buyer__goal .bar span.is-done {
  background: var(--green);
}

.buyer__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 10px;
  color: var(--app-hint);
  font-size: 12.5px;
  font-weight: 600;
}

.buyer__link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ——— Alerts ——— */
.alerts {
  list-style: none;
}

.alert {
  position: relative;
  margin-bottom: 10px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: var(--app-card);
  border: 1px solid var(--app-line);
  overflow: hidden;
  animation: rowIn 0.3s ease both;
  transition: opacity 0.25s ease, transform 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, background 0.3s ease;
}

.alert::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sev);
}

.alert.is-leaving {
  opacity: 0;
  transform: translateX(40px);
}

.alert__top {
  display: flex;
  gap: 12px;
}

.alert__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--sev-soft);
  color: var(--sev);
}

.alert__icon svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.alert__main {
  flex: 1;
  min-width: 0;
}

.alert__sev {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-hint);
  font-size: 11.5px;
}

.alert__sev b {
  color: var(--sev);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.alert__title {
  margin-top: 3px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.32;
}

.alert__text {
  margin-top: 4px;
  color: var(--app-hint);
  font-size: 12.5px;
  line-height: 1.4;
}

.alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.abtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease;
}

.abtn:active {
  transform: scale(0.96);
}

.abtn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.abtn--danger {
  background: rgba(255, 77, 94, 0.16);
  color: #ff8590;
}

.abtn--ghost {
  margin-left: auto;
  background: none;
  color: var(--app-hint);
}

.abtn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.abtn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  margin: auto;
  border: 2px solid #ff8590;
  border-right-color: transparent;
  border-radius: 50%;
  animation: kit-spin 0.7s linear infinite;
}

.alert.is-resolved {
  background: #14171c;
}

.alert.is-resolved .alert__title,
.alert.is-resolved .alert__icon {
  opacity: 0.55;
}

.alert__done {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
}

.alert__done svg {
  width: 16px;
  height: 16px;
}

.empty {
  padding: 40px 18px 24px;
  text-align: center;
  animation: viewIn 0.4s ease;
}

.empty__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 229, 132, 0.22), rgba(34, 229, 132, 0.04) 70%);
  color: var(--green);
}

.empty__art::before,
.empty__art::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(34, 229, 132, 0.16);
}

.empty__art::after {
  inset: -26px;
  border-color: rgba(34, 229, 132, 0.07);
}

.empty__art svg {
  width: 40px;
  height: 40px;
}

.empty h2 {
  font-size: 19px;
  font-weight: 700;
}

.empty p {
  max-width: 270px;
  margin: 6px auto 18px;
  color: var(--app-hint);
  font-size: 13.5px;
}

/* ——— Tab bar ——— */
.tabbar {
  position: relative;
  z-index: 5;
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px 10px;
  background: rgba(13, 15, 18, 0.97);
  border-top: 1px solid var(--app-line);
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  border-radius: 12px;
  color: var(--app-hint);
  font-weight: 600;
  font-size: 11px;
  transition: color 0.2s ease;
}

.tab svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.tab.is-active {
  color: var(--green);
}

.tab.is-active svg {
  filter: drop-shadow(0 0 8px rgba(34, 229, 132, 0.45));
}

.badge {
  position: absolute;
  top: 2px;
  left: calc(50% + 5px);
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--app-bg);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
}

.badge[hidden] {
  display: none;
}

.badge.is-pop {
  animation: pop 0.4s ease;
}

@keyframes pop {
  40% {
    transform: scale(1.35);
  }
}

/* ——— MainButton fallback: floats over the open sheet ——— */
.mainbtn {
  position: absolute;
  z-index: 55;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 16px 20px;
  box-shadow: 0 10px 26px rgba(34, 229, 132, 0.22);
  animation: mainIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes mainIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.mainbtn:not([hidden]) ~ .sheet .sheet__panel {
  padding-bottom: 88px;
}

/* ——— Campaign sheet ——— */
.sheet__panel {
  outline: none;
}

.sheet__grip {
  position: relative;
  cursor: grab;
  touch-action: none;
}

.sheet__grip::before {
  content: "";
  position: absolute;
  left: -40px;
  right: -40px;
  top: -12px;
  bottom: -12px;
}

.cs-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cs-head .geo {
  margin-top: 2px;
}

.cs-head__main {
  flex: 1;
  min-width: 0;
}

.cs-head h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.cs-head h2 em {
  color: var(--app-hint);
  font-style: normal;
  font-weight: 600;
}

.cs-head p {
  margin-top: 2px;
  color: var(--app-hint);
  font-size: 12.5px;
}

.cs-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.cs-close svg {
  width: 16px;
  height: 16px;
  fill: var(--app-hint);
}

.cs-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

.cs-status.is-paused {
  background: rgba(255, 255, 255, 0.08);
  color: #b4bac4;
}

.cs-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.cs-kpi {
  padding: 9px 9px 8px;
  border-radius: 12px;
  background: var(--app-card);
}

.cs-kpi span {
  display: block;
  color: var(--app-hint);
  font-size: 11px;
}

.cs-kpi b {
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}

.cs-card {
  margin-top: 10px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: var(--app-card);
}

.cs-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.cs-card__head span {
  color: var(--app-hint);
}

.cs-card__head b {
  font-weight: 700;
}

.mini {
  display: block;
  width: 100%;
  height: 112px;
  margin-top: 6px;
  overflow: visible;
}

.mini text {
  fill: var(--app-hint);
  font-size: 10.5px;
  font-family: var(--font);
}

.mini .mini__col {
  transform-box: fill-box;
  animation: colIn 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  transition: opacity 0.15s ease;
}

.mini__col.is-pos {
  transform-origin: bottom;
}

.mini__col.is-neg {
  transform-origin: top;
}

.mini.is-hover .mini__col {
  opacity: 0.4;
}

.mini.is-hover .mini__col.is-hot {
  opacity: 1;
}

@keyframes colIn {
  from {
    transform: scaleY(0);
  }
}

.mini__hit {
  fill: transparent;
  cursor: pointer;
}

.ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ctrl b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}

.ctrl span {
  color: var(--app-hint);
  font-size: 12.5px;
}

.switch {
  position: relative;
  flex-shrink: 0;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.22s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s cubic-bezier(0.3, 0.7, 0.4, 1.2);
}

.switch[aria-checked="true"] {
  background: var(--green);
}

.switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

.switch:focus-visible,
.range:focus-visible {
  outline: 2px solid rgba(34, 229, 132, 0.6);
  outline-offset: 2px;
}

.budget {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--app-line);
}

.budget__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.budget__value small {
  color: var(--app-hint);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.range {
  display: block;
  width: 100%;
  height: 30px;
  margin: 6px 0 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green) var(--p, 30%), rgba(255, 255, 255, 0.1) var(--p, 30%));
}

.range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 5px rgba(34, 229, 132, 0.2);
  -webkit-appearance: none;
  appearance: none;
}

.range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--green);
}

.range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 5px rgba(34, 229, 132, 0.2);
}

.range__ends {
  display: flex;
  justify-content: space-between;
  color: var(--app-hint);
  font-size: 11.5px;
}

.pace {
  margin-top: 12px;
}

.pace__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--app-hint);
  font-size: 12.5px;
}

.pace__row b {
  color: var(--app-text);
  font-weight: 600;
}

.pace .bar {
  height: 6px;
}

.pace .bar span {
  animation: none;
  transition: width 0.25s ease, background 0.25s ease;
}

.pace__warn {
  margin-top: 8px;
  color: var(--amber);
  font-size: 12px;
}

.pace__warn[hidden] {
  display: none;
}

@media (hover: hover) {
  .camp:hover,
  .buyer:hover {
    background: var(--app-card-2);
  }

  .abtn:hover {
    background: rgba(255, 255, 255, 0.11);
  }

  .abtn--danger:hover {
    background: rgba(255, 77, 94, 0.24);
  }

  .abtn--ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--app-text);
  }

  .chip:not(.is-active):hover,
  .seg__btn:not(.is-active):hover {
    color: var(--app-text);
  }

  .tab:not(.is-active):hover {
    color: #c3c8d0;
  }

  .banner:hover {
    filter: brightness(1.15);
  }

  .more:hover {
    border-color: rgba(255, 255, 255, 0.26);
    color: var(--app-text);
  }

  .cs-close:hover {
    background: rgba(255, 255, 255, 0.14);
  }
}

@media (max-width: 880px) {
  .tabbar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .mainbtn {
    margin-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .mainbtn:not([hidden]) ~ .sheet .sheet__panel {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 374px) {
  .view {
    padding-left: 14px;
    padding-right: 14px;
  }

  .kpi {
    padding-left: 12px;
    padding-right: 10px;
  }

  .kpi__value {
    font-size: 20px;
  }

  .card {
    padding: 13px 12px;
  }

  .chip {
    padding: 0 10px;
  }

  .cs-kpi {
    padding-left: 7px;
    padding-right: 6px;
  }

  .cs-kpi b {
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live i::after,
  .chart__halo {
    animation: none;
    display: none;
  }
}