:root {
  --page: #fff;
  --rail: #f7f8fa;
  --soft: #f8fafb;
  --ink: #20272e;
  --muted: #68747f;
  --line: #e5e9ed;
  --green: #18765b;
  --green-soft: #eaf6f0;
  --accent: #176f64;
  --amber: #936516;
  --red: #b53f45;
  font-family: 'Instrument Sans', sans-serif;
  color: var(--ink);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--page);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
input,
select,
textarea {
  min-width: 0;
}
svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -1px;
  font-weight: 650;
}
h2 {
  font-size: 18px;
  letter-spacing: -0.35px;
  font-weight: 600;
}
h3 {
  font-size: 15px;
  font-weight: 600;
}
small {
  font-size: 13px;
}
b,
strong {
  font-weight: 600;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--accent);
  border-color: var(--line) !important;
}
[hidden] {
  display: none !important;
}
.skip-link {
  position: fixed;
  top: -60px;
  left: 10px;
  z-index: 999;
  padding: 10px;
  background: var(--surface);
}
.skip-link:focus {
  top: 10px;
}
.app-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 29px 16px 16px;
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.sidebar > * {
  flex-shrink: 0;
}
.answer-meter {
  height: 4px;
  max-width: 240px;
  background: var(--soft);
  border-radius: 4px;
  margin-top: 9px;
}
.answer-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #699b89;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  font-size: 25px;
  letter-spacing: -1px;
}
.brand b {
  font-weight: 650;
}
.brand b > span {
  font-weight: 450;
  color: var(--muted);
}
.brand-symbol {
  position: relative;
  width: 27px;
  height: 28px;
}
.brand-symbol i {
  position: absolute;
  width: 19px;
  height: 22px;
  border: 2px solid var(--line);
  border-radius: 5px;
  transform: rotate(-12deg);
  background: var(--soft);
  left: 0;
  top: 1px;
}
.brand-symbol i + i {
  left: 7px;
  top: 6px;
  background: var(--raised);
  transform: rotate(5deg);
  border-color: var(--line);
}
.workspace {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 5px 20px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.workspace-logo {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--soft);
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 700;
  color: var(--amber);
}
.workspace > div {
  display: grid;
}
.workspace b {
  font-size: 14px;
}
.workspace small {
  font-size: 12px;
  color: var(--muted);
}
.workspace-dot {
  width: 6px;
  height: 6px;
  background: var(--raised);
  border-radius: 50%;
  margin-left: auto;
}
.search-launch {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  padding: 9px 10px;
  text-align: left;
  border-radius: 6px;
}
.search-launch:hover {
  background: var(--soft);
}
.search-launch svg {
  width: 16px;
}
.search-launch kbd {
  font: 11px inherit;
  margin-left: auto;
  color: var(--muted);
}
.nav-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1.05px;
  color: var(--muted);
  padding: 28px 12px 9px;
}
nav {
  display: grid;
  gap: 4px;
}
nav > a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
}
nav > a svg {
  width: 18px;
  height: 18px;
}
nav > a:hover {
  background: var(--soft);
  color: var(--ink);
}
nav > a.is-active {
  background: var(--soft);
  color: var(--green);
}
.nav-count {
  margin-left: auto;
  background: var(--surface);
  padding: 0 7px;
  border-radius: 5px;
  font-size: 11px;
}
.external {
  margin-left: auto;
  color: var(--muted);
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 36px;
}
.store-status {
  display: flex;
  gap: 10px;
  padding: 12px;
  color: var(--muted);
}
.store-status svg {
  width: 17px;
}
.store-status div {
  display: grid;
  gap: 3px;
}
.store-status b {
  font-size: 12px;
}
.store-status small {
  font-size: 11px;
}
.account {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--line);
  padding: 18px 10px 0;
  margin-top: 14px;
  gap: 10px;
}
.account-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 50%;
  font-weight: 600;
}
.account > span:nth-child(2) {
  display: grid;
  flex: 1;
}
.account b {
  font-size: 13px;
}
.account small {
  font-size: 11px;
  color: var(--muted);
}
.account svg {
  width: 16px;
  color: var(--muted);
}
.main-shell {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  height: 68px;
  padding: 0 38px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb b {
  font-weight: 500;
  color: var(--ink);
}
.slash {
  color: var(--muted);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.environment {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.environment i,
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--raised);
  display: inline-block;
}
.top-divider {
  height: 16px;
  width: 1px;
  background: var(--line);
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  padding: 4px 0;
}
.text-button:hover {
  color: var(--ink);
}
.text-button svg {
  width: 15px;
}
.mobile-menu {
  display: none !important;
}
main {
  padding: 38px 40px 40px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  outline: none;
}
.app-footer {
  display: flex;
  justify-content: space-between;
  padding: 17px 40px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.connection-banner {
  background: var(--soft);
  color: var(--amber);
  border-bottom: 1px solid var(--line);
  padding: 12px 40px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.connection-banner button {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}
.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.page-heading p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 9px;
}
.heading-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 3px;
  flex-wrap: wrap;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 550;
  box-shadow: 0 1px 2px #18253205;
  white-space: nowrap;
}
.button:hover {
  background: var(--soft);
  border-color: var(--line);
}
.button.primary {
  background: var(--raised);
  color: var(--ink);
  border-color: var(--line);
}
.button.primary:hover {
  background: var(--raised);
}
.button.danger {
  color: var(--red);
}
.button svg {
  width: 16px;
  height: 16px;
}
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
}
.icon-button:hover {
  color: var(--ink);
  background: var(--soft);
}
.icon-button svg {
  width: 16px;
}
.filters {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.filter-select {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  padding: 9px 32px 9px 12px;
  font-size: 13px;
  max-width: 230px;
}
.filter-note {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
}
.report-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 19px;
  gap: 15px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
}
.badge.green {
  background: var(--green-soft);
  color: var(--green);
}
.badge.amber {
  background: var(--soft);
  color: var(--amber);
}
.badge svg {
  width: 12px;
  height: 12px;
}
.muted {
  color: var(--muted);
}
.mono {
  font-variant-numeric: tabular-nums;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 24px;
  overflow: hidden;
  background: var(--surface);
}
.metric {
  padding: 22px 24px 20px;
  min-width: 0;
}
.metric + .metric {
  border-left: 1px solid var(--line);
}
.metric-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  gap: 8px;
}
.metric-label svg {
  color: var(--muted);
  width: 16px;
  height: 16px;
}
.metric-value {
  font-size: 34px;
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -1.2px;
  margin: 12px 0 8px;
  font-variant-numeric: tabular-nums;
}
.metric-note {
  font-size: 12px;
  color: var(--muted);
}
.metric-note b {
  color: var(--green);
  font-weight: 500;
}
.metric.is-highlight {
  background: var(--soft);
}
.grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(285px, 1fr);
  gap: 22px;
}
.grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 2px 5px #122b3e03;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 21px 24px 16px;
}
.panel-header p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.panel-header h2 {
  font-size: 16px;
}
.panel-body {
  padding: 6px 24px 23px;
}
.section-gap {
  margin-top: 24px;
}
.legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.legend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #4d8c7a;
}
.legend span + span i {
  background: #ebba5d;
}
.chart {
  height: 252px;
  position: relative;
  margin: 12px 24px 5px 47px;
  padding: 0 0 26px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.chart-grid {
  position: absolute;
  inset: 0 0 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.chart-grid > span {
  position: relative;
  border-top: 1px dashed var(--line);
  height: 1px;
}
.chart-grid b {
  position: absolute;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  right: calc(100% + 10px);
  top: -8px;
}
.chart-day {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  flex: 1;
  height: 100%;
  z-index: 1;
  min-width: 0;
}
.chart-bar {
  width: calc(50% - 2px);
  max-width: 23px;
  border-radius: 3px 3px 0 0;
  background: #609b87;
  min-height: 0;
}
.chart-bar.email {
  background: #eabe66;
}
.chart-day > span {
  position: absolute;
  top: calc(100% + 9px);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.chart-day:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.chart-day:hover {
  background: #a1b6ad0c;
}
.chart-note {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 11px 24px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.funnel {
  padding: 4px 24px 14px;
}
.funnel-step {
  padding: 13px 0;
}
.funnel-step > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.funnel-step b {
  margin-left: auto;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.funnel-step em {
  font-style: normal;
  font-size: 11px;
  min-width: 45px;
  text-align: right;
  color: var(--muted);
}
.funnel-step p {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin: 12px 0 0 29px;
  font-size: 13px;
  color: var(--muted);
}
.funnel-step p strong { font-size: 21px;color:var(--green); font-weight: 600; }
.funnel-step p span { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; }
.funnel-step + .funnel-step {border-top:1px solid var(--line); }
.funnel-definition { padding: 15px 24px; font-size: 12px; line-height: 1.6;color:var(--muted);background:var(--surface);border-top:1px solid var(--line); }
.report-quality { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 15px; padding: 12px 16px; margin-bottom: 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface); font-size: 12px;color:var(--muted); }
.report-quality > span { display: inline-flex; align-items: center; gap: 7px; }
.report-quality svg { width: 15px; height: 15px; }
.report-quality p { margin: 0; line-height: 1.6; }
.funnel-step > i {
  height: 5px;
  display: block;
  margin-top: 11px;
  background: var(--soft);
  border-radius: 3px;
  overflow: hidden;
}
.funnel-step > i > span {
  display: block;
  height: 100%;
  background: #83ac9c;
  border-radius: 3px;
}
.step-number {
  font-size: 10px;
  width: 19px;
  height: 19px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
th {
  font-size: 11px;
  font-weight: 550;
  color: var(--muted);
  background: var(--surface);
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tr:last-child td {
  border-bottom: 0;
}
.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table-campaign {
  display: flex;
  align-items: center;
  gap: 12px;
}
.campaign-icon {
  width: 36px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--amber);
  display: grid;
  place-items: center;
}
.campaign-icon svg {
  width: 19px;
}
.table-campaign b {
  display: block;
  font-size: 13px;
}
.table-campaign small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.table-link:hover {
  text-decoration: underline;
  color: var(--green);
}
.table-footer {
  padding: 13px 23px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
}
.activity-preview {
  padding: 0 24px 8px;
}
.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.activity-item:last-child {
  border-bottom: 0;
}
.event-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--muted);
}
.event-icon svg {
  width: 15px;
  height: 15px;
}
.activity-item > div {
  flex: 1;
  min-width: 0;
}
.activity-item b {
  font-size: 12px;
  font-weight: 550;
}
.activity-item small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.activity-item time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.status-card {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.status-card:last-child {
  border-bottom: 0;
}
.integration-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
}
.status-card > div:nth-child(2) {
  flex: 1;
}
.status-card h3 {
  font-size: 13px;
}
.status-card p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.inline-note {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.inline-note svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.inline-note strong {
  color: var(--muted);
}
.inline-note.amber {
  background: var(--soft);
  border-color: var(--line);
  color: var(--muted);
}
.campaigns-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.search-field {
  position: relative;
  max-width: 300px;
  flex: 1;
}
.search-field svg {
  position: absolute;
  left: 11px;
  top: 11px;
  width: 16px;
  color: var(--muted);
}
.search-field input {
  width: 100%;
  padding: 9px 12px 9px 35px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.campaign-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 22px;
}
.campaign-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  background: var(--surface);
}
.campaign-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #1b403511;
  border-color: var(--line);
}
.campaign-art {
  height: 226px;
  background: #ebe8de;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.campaign-art:before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(
    ellipse at 10% 140%,
    transparent 0 20px,
    #bda98015 21px 22px,
    transparent 23px 54px
  );
}
.mini-popup {
  width: 159px;
  padding: 16px 12px 12px;
  background: #fbf3df;
  border: 1px solid #735a3c;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #5c4027;
  position: relative;
  text-align: center;
  color: #352116;
  display: grid;
  justify-items: center;
  gap: 4px;
}
.mini-popup img {
  width: 43px;
  height: auto;
  object-fit: contain;
  margin-bottom: 7px;
}
.mini-popup > b {
  font-size: 12px;
  line-height: 1;
}
.mini-popup > strong {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
}
.mini-popup > small {
  font-size: 8px;
  font-weight: 700;
}
.mini-popup > p {
  font-size: 5.8px;
  margin: 5px 0 2px;
}
.mini-popup > span {
  display: block;
  width: 100%;
  padding: 4px 0;
  border-radius: 20px;
  background: #352116;
  color: #f1ca60;
  font-size: 6px;
  font-weight: 700;
}
.campaign-card-content {
  padding: 20px;
}
.campaign-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.campaign-card h2 {
  font-size: 16px;
}
.campaign-card-content > p {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 20px;
}
.campaign-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.campaign-card-footer b {
  color: var(--ink);
}
.locked-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.locked-note svg {
  width: 14px;
}
.tabs {
  display: flex;
  gap: 25px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 25px;
  overflow-x: auto;
}
.tabs a {
  font-size: 13px;
  padding: 13px 1px;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tabs a.is-active {
  color: var(--green);
  border-color: var(--line);
  font-weight: 600;
}
.campaign-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  gap: 23px;
}
.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  gap: 10px;
}
.segmented {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
  gap: 3px;
}
.segmented button {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
}
.segmented button.is-active {
  background: var(--surface);
  box-shadow: 0 1px 4px #1d383015;
  color: var(--green);
}
.segmented svg {
  width: 14px;
  height: 14px;
}
.preview-stage {
  height: 506px;
  position: relative;
  background: var(--soft);
  overflow: hidden;
}
.runtime-preview-frame {
  position: absolute;
  transform-origin: top left;
  border: 0;
  background: #fbf3df;
}
.preview-foot {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.key-value {
  margin: 0;
  padding: 0 24px 10px;
}
.key-value > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.key-value > div:last-child {
  border: 0;
}
.key-value dt {
  color: var(--muted);
}
.key-value dd {
  margin: 0;
  text-align: right;
  max-width: 70%;
  overflow-wrap: anywhere;
}
.flow {
  display: grid;
  gap: 0;
  padding: 6px 24px 21px;
}
.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  position: relative;
}
.flow-step:not(:last-child):before {
  content: '';
  position: absolute;
  left: 14px;
  top: 38px;
  bottom: -8px;
  border-left: 1px solid var(--line);
}
.flow-step > span {
  width: 29px;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.flow-step b {
  font-size: 13px;
}
.flow-step p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.draft-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--amber);
}
.draft-bar > div {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.editor-layout {
  max-width: 900px;
}
.form-section {
  padding: 23px 26px;
  border-bottom: 1px solid var(--line);
}
.form-section:last-child {
  border: 0;
}
.form-section > p {
  font-size: 13px;
  color: var(--muted);
  margin: 5px 0 19px;
}
.field {
  display: grid;
  gap: 7px;
  font-size: 13px;
  margin-top: 15px;
}
.field > span {
  font-weight: 550;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 6px;
  min-height: 41px;
}
.field input:disabled,
.field select:disabled {
  background: var(--surface);
  color: var(--muted);
  opacity: 1;
}
.field small {
  font-size: 11px;
  color: var(--muted);
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field-grid .field {
  margin-top: 14px;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 0;
  font-size: 13px;
}
.check-row input {
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  accent-color: #287359;
  flex-shrink: 0;
}
.check-row span {
  display: grid;
  gap: 3px;
}
.check-row small {
  font-size: 12px;
  color: var(--muted);
}
.rule-row {
  display: grid;
  grid-template-columns: 1fr 130px 34px;
  gap: 12px;
  align-items: end;
}
.rule-row .field {
  margin: 0;
}
.rule-row .icon-button {
  height: 42px;
}
.or-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 13px 0;
}
.or-label:before,
.or-label:after {
  content: '';
  height: 1px;
  background: var(--soft);
  flex: 1;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.read-only-tag {
  font-size: 11px;
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 5px;
  color: var(--muted);
}
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
  gap: 23px;
}
.health-list {
  padding: 4px 24px 20px;
}
.health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.health-row:last-child {
  border: 0;
}
.definitions {
  padding: 0 24px 23px;
}
.definitions > div {
  margin-top: 18px;
}
.definitions dt {
  font-size: 13px;
  font-weight: 550;
}
.definitions dd {
  font-size: 12px;
  color: var(--muted);
  margin: 5px 0 0;
  line-height: 1.7;
}
.empty-state {
  padding: 55px 22px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.empty-state svg {
  width: 25px;
  height: 25px;
  margin-bottom: 12px;
  color: var(--muted);
}
.empty-state b {
  display: block;
  color: var(--muted);
  font-weight: 550;
  margin-bottom: 5px;
}
.empty-state p {
  max-width: 380px;
  margin: 0 auto;
}
.loading-view {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 150px 20px;
  color: var(--muted);
  font-size: 14px;
}
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--line);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.count-loading {
  color: var(--muted);
}
.event-error {
  color: var(--red);
}
.event-path {
  font-family: monospace;
  font-size: 11px;
  color: var(--muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.answer-bar {
  margin: 17px 0;
}
.answer-bar > div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 7px;
  color: var(--muted);
}
.answer-bar > i {
  display: block;
  height: 5px;
  background: var(--soft);
  border-radius: 3px;
}
.answer-bar > i > span {
  display: block;
  height: 100%;
  background: #a6bc99;
  border-radius: 3px;
}
dialog {
  width: min(510px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 27px;
  background: var(--surface);
  box-shadow: 0 28px 100px #102e3530;
  color: var(--ink);
}
dialog::backdrop {
  background: #1f333e4f;
  backdrop-filter: blur(3px);
}
.modal-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}
.modal-heading h2 {
  font-size: 21px;
}
dialog > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
dialog .form-actions {
  margin-top: 24px;
}
.dialog-error {
  margin-top: 14px;
  font-size: 12px;
  color: var(--red);
}
.command-list {
  display: grid;
  gap: 5px;
  margin-top: 15px;
}
.command-list a {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 7px;
  font-size: 14px;
}
.command-list a:hover,
.command-list a:focus {
  background: var(--soft);
}
.change-list {
  margin: 18px 0;
  padding: 0;
  list-style: none;
}
.change-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.toast {
  position: fixed;
  z-index: 100;
  right: 25px;
  bottom: 25px;
  max-width: min(450px, calc(100vw - 36px));
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 13px 19px;
  border-radius: 8px;
  box-shadow: 0 8px 35px #19382724;
  font-size: 13px;
}
.result-output {
  font-size: 13px;
  padding: 13px 0 0;
  display: block;
  color: var(--green);
}
.result-output.blocked {
  color: var(--amber);
}
@media (min-width: 1700px) {
  main {
    padding-top: 44px;
  }
  .chart {
    height: 290px;
  }
  .campaign-art {
    height: 260px;
  }
  .mini-popup {
    transform: scale(1.1);
  }
}
@media (max-width: 1250px) {
  .app-shell {
    grid-template-columns: 215px minmax(0, 1fr);
  }
  .sidebar {
    padding-left: 10px;
    padding-right: 10px;
  }
  main {
    padding: 30px 27px;
  }
  .topbar {
    padding: 0 27px;
  }
  .metric {
    padding: 19px;
  }
  .metric-value {
    font-size: 29px;
  }
  .grid-main {
    grid-template-columns: minmax(0, 1.5fr) minmax(270px, 1fr);
  }
  .campaign-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  .legend {
    gap: 7px;
    font-size: 10px;
  }
  .campaign-detail-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
  }
  th,
  td {
    padding-left: 17px;
    padding-right: 17px;
  }
}
@media (max-width: 1000px) {
  .grid-main,
  .grid-two,
  .settings-layout,
  .campaign-detail-grid {
    grid-template-columns: 1fr;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric:nth-child(3) {
  border-left: 0;
  border-top: 1px solid var(--line);
  }
  .metric:nth-child(4) {
  border-top: 1px solid var(--line);
  }
  .page-heading {
    gap: 14px;
  }
  .heading-actions .button {
    font-size: 12px;
  }
  .preview-stage {
    height: 560px;
  }
  .search-launch kbd {
    display: none;
  }
  .filter-note {
    display: none;
  }
}
@media (max-width: 720px) {
  .app-shell {
    display: block;
  }
  .sidebar {
    position: fixed;
    width: 250px;
    left: -260px;
    transition: left 0.2s;
    box-shadow: 0 0 30px #192c2920;
  }
  .sidebar.is-open {
    left: 0;
  }
  .mobile-menu {
    display: inline-grid !important;
  }
  .topbar {
    padding: 0 18px;
    height: 60px;
  }
  .topbar-right {
    gap: 10px;
  }
  .top-divider {
    display: none;
  }
  .topbar .text-button svg {
    display: none;
  }
  .topbar .text-button {
    font-size: 11px;
  }
  .environment {
    font-size: 10px;
  }
  .breadcrumb {
    gap: 10px;
  }
  .breadcrumb > span:first-of-type {
    display: none;
  }
  main {
    padding: 26px 18px;
  }
  .page-heading {
    flex-direction: column;
    margin-bottom: 22px;
  }
  .page-heading p {
    font-size: 13px;
  }
  h1 {
    font-size: 27px;
  }
  .heading-actions {
    width: 100%;
  }
  .report-toolbar {
    align-items: flex-start;
  }
  .filters {
    gap: 7px;
  }
  .filter-select {
    font-size: 12px;
    max-width: 180px;
  }
  .metric {
    padding: 17px;
  }
  .metric-value {
    font-size: 29px;
  }
  .metric-label {
    font-size: 12px;
  }
  .metric-note {
    font-size: 10px;
  }
  .metrics {
    margin-bottom: 19px;
  }
  .grid-main,
  .grid-two {
    gap: 19px;
  }
  .panel-header {
    padding: 18px;
  }
  .panel-header h2 {
    font-size: 15px;
  }
  .chart {
    margin-right: 18px;
    gap: 4px;
    height: 225px;
  }
  .chart-day > span {
    font-size: 8px;
  }
  .chart-note {
    padding: 10px 18px;
    font-size: 10px;
  }
  .panel-body {
    padding: 5px 18px 18px;
  }
  .campaign-grid {
    grid-template-columns: 1fr;
  }
  .campaign-art {
    height: 245px;
  }
  .campaigns-toolbar {
    gap: 9px;
  }
  .campaigns-toolbar .filter-select {
    max-width: 125px;
  }
  .campaign-detail-grid {
    gap: 18px;
  }
  .tabs {
    gap: 20px;
  }
  .preview-stage {
    height: 520px;
  }
  .preview-toolbar {
    flex-wrap: wrap;
  }
  .field-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-section {
    padding: 20px;
  }
  .rule-row {
    grid-template-columns: 1fr 88px 30px;
    gap: 7px;
  }
  .rule-row .field input,
  .rule-row .field select {
    padding: 9px 7px;
    font-size: 12px;
  }
  .connection-banner {
    padding: 12px 18px;
    gap: 12px;
    font-size: 12px;
  }
  .app-footer {
    padding: 15px 18px;
    font-size: 10px;
    gap: 15px;
  }
  .draft-bar {
    flex-wrap: wrap;
  }
  .draft-bar > div {
    margin-left: 0;
    width: 100%;
  }
  .status-card {
    padding: 18px;
  }
  .key-value {
    padding-left: 18px;
    padding-right: 18px;
  }
  .activity-preview {
    padding-left: 18px;
    padding-right: 18px;
  }
  .chart-day:nth-child(2n) > span {
    display: none;
  }
}
/* Readable operational text; muted labels still have meaningful contrast. */
nav > a {
  font-size: 15px;
}
.page-heading p {
  font-size: 15px;
}
.metric-label {
  font-size: 14px;
}
.metric-note {
  font-size: 13px;
  color: var(--muted);
}
.panel-header p,
.flow-step p,
.status-card p {
  font-size: 13px;
  color: var(--muted);
}
th {
  font-size: 12px;
  color: var(--muted);
}
td {
  font-size: 14px;
}
.activity-item b {
  font-size: 13px;
}
.activity-item small,
.activity-item time {
  font-size: 12px;
  color: var(--muted);
}
.table-campaign b {
  font-size: 14px;
}
.table-campaign small {
  font-size: 12px;
  color: var(--muted);
}
.key-value dt {
  color: var(--muted);
}
.definitions dd {
  font-size: 13px;
  color: var(--muted);
}
.tabs a {
  font-size: 14px;
}
.filter-note {
  color: var(--muted);
}
.chart-note {
  color: var(--muted);
}
.preview-foot {
  color: var(--muted);
}
.campaign-detail-grid {
  align-items: start;
}
@media (max-width: 720px) {
  .metric-label {
    font-size: 12px;
  }
  .metric-note {
    font-size: 11px;
  }
  .page-heading p {
    font-size: 13px;
  }
  .panel-header p {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Saved-data receipt, separate from browser access and campaign status. */
.event-receipt{display:flex;align-items:center;gap:10px;padding:12px 32px;background:var(--soft);border-bottom:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.5}
.event-receipt[hidden]{display:none}.event-receipt>svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7}.event-receipt>span{flex:1}.event-receipt .text-button{white-space:nowrap}
@media(max-width:680px){.event-receipt{padding:12px 20px;align-items:flex-start;flex-wrap:wrap}.event-receipt .text-button{margin-left:28px}}

.workspace select{font:inherit;font-size:13px;font-weight:650;border:0;color:inherit;background:transparent;width:160px;cursor:pointer}.workspace small{display:block;margin-top:5px}.mini-wordmark{font-size:10px;letter-spacing:2px;margin:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.revenue-summary{display:grid;grid-template-columns:1.5fr 1fr 1fr;padding:24px 28px;gap:24px}.revenue-summary span{display:block;color:var(--muted);font-size:13px;margin-bottom:12px}.revenue-summary strong{font-size:28px;letter-spacing:-.8px;font-weight:550}.revenue-sync{display:flex;gap:14px;flex-wrap:wrap;background:var(--soft);color:var(--muted);padding:13px 28px;font-size:12px;border-top:1px solid var(--line)}.revenue-sync.is-pending{background:var(--soft);color:var(--amber)}.growth-explanation{font-size:12px;line-height:1.65;color:var(--muted)}.growth-subline{display:block;font-size:11px;font-weight:400;line-height:1.6;color:var(--muted);margin-top:4px}.growth-note{padding:18px 22px;background:var(--soft);border:1px solid var(--line);border-radius:8px;margin:24px 0;font-size:13px;line-height:1.6;color:var(--muted)}.growth-empty{padding:48px;max-width:760px}.growth-empty h2{font-size:25px;font-weight:550;letter-spacing:-.6px}.growth-empty p{color:var(--muted);line-height:1.8;margin:16px 0 24px}.experiment-tabs{display:flex;gap:10px;overflow:auto;margin:24px 0}.experiment-tab{font:inherit;flex-shrink:0;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 22px;color:var(--ink);cursor:pointer}.experiment-tab span{display:block;color:var(--muted);font-size:12px;margin-top:6px;text-transform:capitalize}.experiment-tab.is-active{border-color:var(--line);box-shadow:inset 0 0 0 1px #659385}.experiment-variants{display:grid;grid-template-columns:1fr 1fr}.experiment-variants>div{display:flex;gap:18px;padding:24px 28px}.experiment-variants>div+div{border-left:1px solid var(--line)}.arm-label{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--soft);font-size:20px;font-weight:550;color:var(--green)}.experiment-variants>div+div .arm-label{background:var(--soft);color:var(--amber)}.experiment-variants h3{font-size:16px;font-weight:550;margin:0 0 8px}.experiment-variants p,.experiment-variants small{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.experiment-actions{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);flex-wrap:wrap}.experiment-actions .muted{font-size:12px;margin-left:auto}.comparison-table td:first-child{width:50%}.growth-result{display:flex;gap:20px;align-items:center;padding:22px 28px;background:var(--soft);border-top:1px solid var(--line);font-size:13px}.growth-result b{font-size:25px;font-weight:550;color:var(--muted)}.growth-result span:last-child{margin-left:auto;color:var(--muted);font-size:12px}.split-control{display:flex;gap:28px;align-items:center;margin:18px 0}.split-control .field{max-width:260px}.split-control strong{font-size:14px;font-weight:500;color:var(--muted)}.revenue-panel+.grid-main{margin-top:24px}
@media(max-width:720px){.revenue-summary{grid-template-columns:1fr 1fr;padding:20px}.revenue-summary>div:first-child{grid-column:1/-1}.revenue-summary strong{font-size:24px}.experiment-variants{grid-template-columns:1fr}.experiment-variants>div+div{border-left:0;border-top:1px solid var(--line)}.growth-result{flex-wrap:wrap}.growth-result span:last-child{margin-left:0}.growth-empty{padding:28px}.revenue-sync{padding:14px 20px}}

.mini-popup.mini-game{width:184px;max-width:calc(100% - 32px);min-height:200px;padding:16px;gap:0;align-content:center}
.mini-game>img{margin-bottom:12px}
.mini-game>strong{width:100%;min-width:0;font-size:19px;line-height:1.1;letter-spacing:-.7px;text-transform:none;overflow-wrap:anywhere}
.mini-game>p{max-width:100%;margin:9px 0 0;font-size:7px;line-height:1.4}
.mini-game .mini-game-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:6px;margin-top:18px}
.mini-game-cards i{display:grid;place-items:center;min-width:0;width:100%;height:48px;border:1px solid #352116;border-radius:6px;background:#fffbef;font-size:20px;font-style:normal;font-weight:800;box-shadow:0 3px 0 #35211630}
.mini-game .mini-game-cards--grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:102px;margin-inline:auto;gap:4px;margin-top:12px}
.mini-game-cards--grid i{height:32px;font-size:16px}

/* Analytics: shared journey vocabulary; distinct, accessible variant colors. */
.journey-metrics{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:24px}
.journey-metrics .metric{padding:24px 20px;min-width:0}
.journey-metrics .metric-value{font-size:36px;font-variant-numeric:tabular-nums}
.journey-metrics .metric-label{font-size:14px;color:var(--ink)}
.journey-metrics .metric-note{font-size:13px;line-height:1.5}
.campaign-funnel+ .campaign-funnel{border-top:1px solid var(--line)}
.campaign-funnel>h3{margin:0;padding:22px 26px 0;font-size:15px;font-weight:650}
.campaign-funnel>h3 small{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:450}
.stage-loss{display:block;margin-top:9px;color:var(--muted);font-size:12px;line-height:1.4}
.stage-legend{flex-wrap:wrap;justify-content:flex-end;row-gap:7px}
.chart-bar.series-views,.legend i.series-views{background:#7c969f}
.chart-bar.series-gameStarts,.legend i.series-gameStarts{background:#85aacd}
.chart-bar.series-gameCompletions,.legend i.series-gameCompletions{background:#bf934a}
.chart-bar.series-answers,.legend i.series-answers{background:#b8c7b4}
.chart-bar.series-emails,.legend i.series-emails{background:#227b64}
.chart-day{gap:2px}.chart-day .chart-bar{min-width:1px}
.ab-workspace{--arm-a:#426da1;--arm-b:#247960;--arm-a-soft:#edf3fb;--arm-b-soft:#edf7f2;font-variant-numeric:tabular-nums}
.ab-workspace h2,.ab-workspace h3{letter-spacing:-.025em}
.ab-workspace .filters{min-width:0}
.ab-test-header{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:26px 0;border-top:1px solid var(--line)}
.ab-test-header h2{font-size:26px;line-height:1.2;margin:13px 0 10px;font-weight:650}
.ab-test-header p{font-size:14px;color:var(--muted);margin:0}.ab-test-header p strong{color:var(--ink);font-weight:550;margin-left:8px}
.ab-eyebrow{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.ab-tag{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;background:var(--soft);color:var(--muted);text-transform:capitalize}
.ab-tag.is-live{color:var(--green);background:var(--soft)}.ab-tag.is-live:before{content:'';width:6px;height:6px;background:var(--raised);border-radius:50%}
.ab-tag.is-warning{color:var(--amber);background:var(--soft)}
.ab-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ab-more{position:relative}.ab-more summary{cursor:pointer;padding:10px;list-style:none;border:1px solid var(--line);border-radius:7px;letter-spacing:2px}
.ab-more[open] .button{position:absolute;right:0;top:46px;white-space:nowrap;z-index:3;background:var(--surface);box-shadow:0 8px 24px #23334216;color:var(--red)}
.ab-toolbar{padding:18px 0 24px;margin:0;align-items:flex-end}.ab-filter{display:flex;flex-direction:column;gap:7px}.ab-filter>span{font-size:12px;font-weight:600;color:var(--muted)}.ab-filter .filter-select{font-size:14px;min-height:42px}
.ab-verdict{display:flex;align-items:center;gap:18px;padding:23px 26px;background:var(--soft);border:1px solid var(--line);border-radius:12px}
.ab-verdict.is-collecting{background:var(--soft);border-color:var(--line)}.ab-verdict-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:25px;flex-shrink:0}
.ab-verdict h3{font-size:18px;font-weight:650;margin:0 0 5px}.ab-verdict p{font-size:14px;color:var(--muted);margin:0;max-width:620px;line-height:1.6}
.ab-lift{margin-left:auto;min-width:185px;border-left:1px solid var(--line);padding-left:26px;display:flex;flex-direction:column;align-items:flex-end;gap:3px}.ab-lift>span,.ab-lift small{font-size:12px;color:var(--muted)}.ab-lift strong{font-size:29px;font-weight:650;letter-spacing:-1px;line-height:1.2}
.ab-summary{display:grid;grid-template-columns:1fr 1fr 1.3fr;padding:25px 0;margin-bottom:2px}.ab-summary>div{display:flex;flex-direction:column;padding:0 25px;border-right:1px solid var(--line);gap:5px}.ab-summary>div:first-child{padding-left:2px}.ab-summary>div:last-child{border:0}.ab-summary span{font-size:13px;color:var(--muted)}.ab-summary strong{font-size:29px;font-weight:600;letter-spacing:-.7px}.ab-summary .ab-text-value{font-size:18px;margin-top:5px;letter-spacing:-.3px}.ab-summary small{font-size:12px;color:var(--muted)}
.ab-variant-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}.ab-variant{--arm:var(--arm-a);--arm-soft:var(--arm-a-soft);padding:25px 27px;border:1px solid var(--line);border-top:3px solid var(--arm);border-radius:12px;box-shadow:0 3px 10px #24374804;background:var(--surface);min-width:0}.ab-variant.arm-b{--arm:var(--arm-b);--arm-soft:var(--arm-b-soft);border-color:var(--line);border-top-color:var(--arm-b)}
.ab-variant-head{display:flex;gap:13px;align-items:center}.ab-letter{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border-radius:10px;background:var(--arm-soft);color:var(--arm);font-size:21px;font-weight:650}.ab-role{font-size:12px;color:var(--muted)}.ab-variant h3{font-size:17px;line-height:1.4;margin:2px 0 0;font-weight:600}.ab-variant-head .ab-tag{margin-left:auto;background:var(--arm-soft);color:var(--arm)}
.ab-format{font-size:13px;color:var(--muted);padding:14px 0 17px;border-bottom:1px solid var(--line)}
.ab-primary{padding:23px 0 21px}.ab-primary>span{font-size:14px;color:var(--muted)}.ab-primary>strong{display:block;font-size:54px;font-weight:600;letter-spacing:-2.5px;line-height:1.15;color:var(--arm);margin:9px 0 8px}.ab-primary p{margin:0;font-size:14px;color:var(--muted)}.ab-primary p b{color:var(--ink);font-weight:600}
.ab-confidence{padding-top:17px;border-top:1px solid var(--line)}.ab-confidence>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}.ab-confidence b{font-weight:550}.ab-range{position:relative;height:6px;margin:14px 5px 4px;background:var(--soft);border-radius:8px}.ab-range i{position:absolute;height:6px;background:var(--arm);opacity:.25;border-radius:8px}.ab-range>b{position:absolute;top:-3px;height:12px;width:4px;background:var(--arm);border-radius:5px;transform:translateX(-50%)}
.ab-workspace .panel-header{padding:23px 26px;gap:16px}.ab-workspace .panel-header h2{font-size:18px;font-weight:600}.ab-workspace .panel-header p{font-size:14px;line-height:1.6;color:var(--muted)}
.ab-funnel-panel{overflow:hidden;margin-bottom:22px;border-radius:12px}.ab-stage-header,.ab-stage-row{display:grid;grid-template-columns:1.05fr 1fr 1fr}.ab-stage-header{padding:13px 26px;background:var(--surface);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);gap:26px}.ab-stage-header b{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600}.ab-dot{width:7px;height:7px;border-radius:50%;background:var(--arm-a)}.ab-dot.arm-b{background:var(--arm-b)}
.ab-stage-row{padding:20px 26px;gap:26px;border-bottom:1px solid var(--line)}.ab-stage-row:last-child{border:0}.ab-stage-label{display:flex;gap:13px;align-items:flex-start;padding-top:3px}.ab-stage-label>span{font-size:12px;color:var(--muted);font-weight:550;margin-top:3px}.ab-stage-label h3{font-size:15px;margin:0 0 4px;font-weight:600}.ab-stage-label p{font-size:12px;margin:0;color:var(--muted);line-height:1.5}.ab-stage-cell{--arm:var(--arm-a);min-width:0}.ab-stage-cell.arm-b{--arm:var(--arm-b)}.ab-stage-cell>div:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.ab-stage-cell strong{font-size:22px;line-height:1.1;font-weight:600;letter-spacing:-.5px}.ab-stage-cell b{font-size:15px;font-weight:600;color:var(--arm)}.ab-stage-bar{height:5px;border-radius:4px;background:var(--soft);margin:12px 0 8px;overflow:hidden}.ab-stage-bar i{display:block;height:100%;background:var(--arm);opacity:.8;border-radius:4px}.ab-stage-cell p{margin:0;font-size:12px;color:var(--muted)}.ab-stage-cell small{display:block;color:var(--muted);font-size:11px;margin-top:5px;line-height:1.5}.ab-stage-skip{align-self:center;color:var(--muted);font-size:13px;font-style:italic;padding:10px 0}
.ab-panel-foot{padding:16px 26px;background:var(--surface);border-top:1px solid var(--line);font-size:12px;line-height:1.7;color:var(--muted)}
.ab-details{margin:20px 0;border-radius:12px;overflow:hidden}.ab-details>summary{padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:18px;cursor:pointer;list-style:none}.ab-details>summary:after{content:'+';color:var(--muted);font-size:22px}.ab-details[open]>summary:after{content:'−'}.ab-details>summary>span:first-child{flex:1}.ab-details summary b{font-size:16px;font-weight:600;display:block}.ab-details summary small{font-size:13px;display:block;margin-top:5px;color:var(--muted)}.ab-details summary>span+span{font-size:13px;color:var(--muted)}.ab-details table{border-top:1px solid var(--line)}
.ab-allocation{margin:22px 0;border-radius:12px}.ab-allocation-body{padding:20px 26px}.ab-allocation-row{display:grid;grid-template-columns:125px minmax(150px,1fr) auto;gap:28px;align-items:center;margin-bottom:18px}.ab-allocation-row:last-child{margin:0}.ab-allocation-row>div:first-child b{display:block;font-size:14px;font-weight:600}.ab-allocation-row>div:first-child span{font-size:12px;color:var(--muted)}.ab-split>div{height:9px;background:var(--arm-b);border-radius:5px;overflow:hidden}.ab-split i{height:100%;display:block;background:var(--arm-a);border-right:2px solid var(--line)}.ab-split p{display:flex;justify-content:space-between;margin:7px 0 0;font-size:12px;color:var(--muted)}
.ab-method{padding:18px 2px;color:var(--muted);font-size:13px;line-height:1.8}.ab-method summary{cursor:pointer;font-size:14px;font-weight:550;color:var(--muted)}.ab-method p{max-width:960px}.ab-muted{color:var(--muted);font-size:14px;margin:0}.ab-empty{padding:50px 36px;text-align:center}.ab-empty h2{font-size:24px;font-weight:600}.ab-empty p{max-width:480px;margin:14px auto 24px;color:var(--muted)}.ab-symbol{display:block;color:var(--muted);font-size:30px}.ab-alert{padding:14px 20px;background:var(--soft);border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--amber);margin-bottom:15px}
@media(max-width:720px){.ab-workspace .ab-toolbar{flex-wrap:wrap}.ab-workspace .ab-toolbar .filters{flex-basis:100%}.ab-workspace .ab-filter .filter-select{max-width:100%}}
@media(min-width:1500px){.journey-metrics{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
@media(max-width:1100px){.ab-variant-head{flex-wrap:wrap}.ab-variant-head .ab-tag{margin-left:55px}.ab-stage-header,.ab-stage-row{gap:18px;grid-template-columns:1fr 1fr 1fr}.ab-stage-label{gap:8px}.ab-controls{flex-wrap:wrap}.ab-test-header{align-items:flex-start}.ab-test-header p strong{display:block;margin:5px 0 0}.ab-verdict p{max-width:440px}.ab-variant{padding:22px}}
@media(max-width:720px){.journey-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.journey-metrics .metric{padding:20px 16px}.journey-metrics .metric-label{font-size:14px}.journey-metrics .metric-value{font-size:32px}.journey-metrics .metric-note{font-size:12px}.ab-test-header{display:block}.ab-test-header h2{font-size:23px}.ab-controls{margin-top:18px}.ab-toolbar .filters{width:100%}.ab-filter{flex:1;min-width:145px}.ab-toolbar{gap:16px}.ab-verdict{align-items:flex-start;flex-wrap:wrap;padding:20px}.ab-verdict>div:nth-child(2){flex:1;min-width:180px}.ab-lift{flex-basis:100%;align-items:flex-start;margin:0;padding:15px 0 0;border:0;border-top:1px solid var(--line)}.ab-lift strong{font-size:25px}.ab-summary{grid-template-columns:1fr 1fr;gap:20px}.ab-summary>div{padding:0 16px}.ab-summary>div:nth-child(2){border:0}.ab-summary>div:last-child{grid-column:1/-1;padding:0 2px}.ab-variant-grid{grid-template-columns:1fr;gap:16px}.ab-variant-head .ab-tag{margin-left:auto}.ab-primary>strong{font-size:48px}.ab-stage-header{grid-template-columns:1fr 1fr;padding:14px 20px}.ab-stage-header>span{display:none}.ab-stage-row{grid-template-columns:1fr 1fr;padding:18px 20px;gap:16px}.ab-stage-label{grid-column:1/-1}.ab-stage-label p{display:none}.ab-stage-cell p{font-size:12px}.ab-workspace .panel-header{padding:20px}.ab-panel-foot{padding:15px 20px}.ab-allocation-body{padding:20px}.ab-allocation-row{grid-template-columns:1fr;gap:13px}.ab-allocation-row .ab-tag{justify-self:start}.ab-details>summary{padding:20px;flex-wrap:wrap}.ab-details summary>span+span{display:none}.ab-confidence>div:first-child{font-size:12px}}
/* Campaign intelligence: clear hierarchy, readable tables, scoped sales. */
.analytics-toolbar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.date-window{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.date-window label{display:grid;gap:7px}.date-window label>span{font-size:12px;font-weight:600;color:var(--muted)}.date-window form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.date-window input{min-height:42px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--surface);color:var(--ink);font:inherit}.date-arrow{padding-bottom:12px;color:var(--muted)}.timezone-badge{padding:12px 0;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}.date-error{font-size:13px;color:var(--red);flex-basis:100%}
.attribution-hero{display:grid;grid-template-columns:1.25fr 1fr .72fr;align-items:center;gap:32px;padding:34px 36px;background:var(--raised);color:var(--ink);border-radius:16px;border:1px solid var(--line);margin:24px 0 36px}.analytics-kicker{font-size:11px;font-weight:700;letter-spacing:.13em;color:var(--muted)}.attribution-hero .analytics-kicker{color:var(--muted)}.attribution-intro h2{font-size:28px;line-height:1.18;letter-spacing:-.8px;margin:13px 0}.attribution-intro p{font-size:14px;line-height:1.7;color:var(--muted);max-width:390px}.attribution-intro a{display:inline-block;margin-top:14px;color:var(--muted);font-size:13px;font-weight:600}.attribution-value{display:flex;flex-direction:column;gap:14px;border-left:1px solid #ffffff25;padding-left:32px;min-width:0}.attribution-value>span{font-size:14px;color:var(--muted)}.attribution-value>strong{font-size:38px;line-height:1.15;letter-spacing:-1px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.attribution-value>small{font-size:12px;color:var(--muted)}
.analytics-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:32px 0 18px}.analytics-section-heading h2{font-size:21px;letter-spacing:-.4px;margin:8px 0 0}.analytics-section-heading>span{font-size:13px;color:var(--muted)}.analytics-detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:22px;margin-top:22px;align-items:start}.attribution-rule{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:16px 20px;background:var(--soft);border:1px solid var(--line);border-radius:10px;margin-bottom:18px;font-size:13px;color:var(--ink)}.attribution-rule b{color:var(--muted)}.order-ledger table{min-width:800px}.order-ledger td{padding-top:20px;padding-bottom:20px}.ledger-empty{text-align:center;padding:36px 20px 40px}.ledger-empty>span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--soft);font-size:22px;color:var(--muted)}.ledger-empty h3{font-size:17px;margin:16px 0 8px}.ledger-empty p{font-size:14px;color:var(--muted)}.coverage-warning{border-color:var(--line)!important;background:var(--soft)!important;display:block!important}.coverage-warning strong{color:var(--amber)}.coverage-warning p{margin-top:6px!important;font-size:14px!important;line-height:1.6}.campaign-analytics .metric-card{min-width:0}.campaign-analytics .metrics{margin:0}.campaign-analytics .panel-header h2{font-size:18px}
@media(max-width:1100px){.attribution-hero{gap:22px;padding:26px;grid-template-columns:1.2fr 1fr}.attribution-intro{grid-column:1/-1}.attribution-intro h2 br{display:none}.attribution-value{border-left:0;padding-left:0}.analytics-detail-grid{grid-template-columns:1fr}}
@media(max-width:640px){.attribution-hero{grid-template-columns:1fr;padding:24px}.attribution-value{padding-top:20px;border-top:1px solid #ffffff25}.attribution-value>strong{font-size:32px}.analytics-section-heading{align-items:start;flex-direction:column;gap:10px}.analytics-toolbar{gap:12px}.date-window,.date-window form{width:100%}.date-window form label{flex:1;min-width:125px}.date-window input{width:100%}.timezone-badge{font-size:11px}.attribution-rule{font-size:12px;gap:10px}}
.analytics-chart-column{min-width:0}.campaign-sync-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4px;color:var(--muted);font-size:12px;line-height:1.6}.campaign-sync-footer .button{flex-shrink:0}@media(max-width:640px){.campaign-sync-footer{flex-direction:column;align-items:flex-start}}

/* Campaign cards use the same Outlight renderer as the storefront. */
.campaign-art:has(.campaign-thumbnail-frame){height:auto;aspect-ratio:8/5;background:#32231a}
.campaign-art:has(.campaign-thumbnail-frame)::before{display:none}
.campaign-thumbnail-frame{position:absolute;inset:0;width:1440px;height:900px;border:0;transform-origin:top left;pointer-events:none}