:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --text: #172033;
  --muted: #667085;
  --line: #e4e9f2;
  --line-strong: #d4dce8;
  --primary: #3157d5;
  --primary-dark: #2445b4;
  --primary-soft: #eef3ff;
  --success: #067647;
  --success-soft: #ecfdf3;
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --warning: #b54708;
  --warning-soft: #fffaeb;
  --sidebar: #101828;
  --sidebar-2: #172033;
  --sidebar-text: #d0d5dd;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 10px 30px rgba(16, 24, 40, .08);
  --radius: 14px;
  --topbar-h: 72px;
  --sidebar-w: 270px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; color: #101828; }
h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; }
h2 { font-size: 20px; letter-spacing: -.015em; }
h3 { font-size: 16px; }
p { margin: 0; }

.topbar {
  height: var(--topbar-h);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 80;
}
.topbar-left, .topbar-right, .brand, .account-chip { display: flex; align-items: center; }
.topbar-left { gap: 12px; }
.topbar-right { gap: 12px; }
.brand { gap: 12px; color: var(--text); min-width: 220px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3157d5, #6f8df6);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .04em;
  box-shadow: 0 8px 18px rgba(49,87,213,.24);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font-size: 16px; letter-spacing: -.01em; }
.brand-copy small { color: var(--muted); font-size: 11px; margin-top: 4px; }
.menu-button {
  width: 42px;
  height: 42px;
  display: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
}
.menu-button span { display: block; width: 18px; height: 2px; background: #344054; margin: 2px 0; border-radius: 2px; }
.admin-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 750;
}
.account-chip { gap: 9px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.avatar { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #344054; font-weight: 800; }
.account-copy { display: flex; flex-direction: column; line-height: 1.15; }
.account-copy strong { font-size: 12px; }
.account-copy small { color: var(--muted); font-size: 10px; text-transform: capitalize; }

.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h)); }
.sidebar {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  color: var(--sidebar-text);
  border-right: 1px solid rgba(255,255,255,.05);
  z-index: 70;
}
.sidebar-scroll { padding: 18px 14px; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.nav-label { padding: 12px 12px 7px; color: #98a2b3; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.admin-label { margin-top: 17px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 43px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--sidebar-text);
  font-weight: 620;
  transition: .18s ease;
}
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.nav a.active { color: #fff; background: linear-gradient(135deg, rgba(79,111,229,.36), rgba(88,111,196,.18)); box-shadow: inset 3px 0 0 #8ba2ff; }
.nav-icon { width: 19px; height: 19px; flex: 0 0 19px; opacity: .88; }
.sidebar-footer { padding: 15px 18px; border-top: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.sidebar-footer small { color: #98a2b3; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #32d583; box-shadow: 0 0 0 4px rgba(50,213,131,.12); }
.sidebar-overlay { display: none; }

.content { width: 100%; min-width: 0; max-width: 1720px; margin: 0 auto; padding: 30px clamp(18px, 2.8vw, 42px) 60px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-head .muted { margin-top: 6px; max-width: 820px; }
.page-kicker { color: var(--primary); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 800; margin-bottom: 7px; }
.muted, small { color: var(--muted); }

.card, .sub-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card { padding: 22px; margin-bottom: 18px; }
.sub-card { padding: 17px; margin: 14px 0; background: var(--panel-soft); box-shadow: none; }
.hero-card { position: relative; overflow: hidden; border: 0; background: linear-gradient(135deg, #172b68 0%, #3157d5 55%, #6f8df6 100%); color: #fff; box-shadow: var(--shadow-md); }
.hero-card h1, .hero-card h2, .hero-card h3 { color: #fff; }
.hero-card .muted { color: rgba(255,255,255,.78); }
.hero-card::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.08); right: -90px; top: -130px; }
.note { background: #f5f8ff; border-color: #cfdbff; }
.danger-zone { border-color: #fecdca; background: #fffafa; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.stat-card .stat-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.stat-card .stat-value { display: block; margin-top: 8px; font-size: 28px; line-height: 1; font-weight: 820; letter-spacing: -.03em; color: #101828; }
.stat-card .stat-note { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 700; color: #344054; font-size: 12px; }
.field small { font-size: 11px; }
.field-bottom { justify-content: flex-end; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #6f8df6; box-shadow: 0 0 0 4px rgba(49,87,213,.11); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--primary); }

.actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: #344054;
  font-weight: 720;
  cursor: pointer;
  transition: .16s ease;
  white-space: nowrap;
}
.btn:hover { background: #f8fafc; border-color: #b9c4d4; transform: translateY(-1px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--primary), #496ee7); border-color: var(--primary); box-shadow: 0 6px 14px rgba(49,87,213,.18); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), #3157d5); border-color: var(--primary-dark); }
.btn-success { color: #fff; background: var(--success); border-color: var(--success); }
.btn-danger, .danger { color: var(--danger); border-color: #fda29b; background: #fff; }
.btn-danger:hover, .danger:hover { background: var(--danger-soft); border-color: #f97066; }
.btn-light { background: rgba(255,255,255,.9); }
.btn-small { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.btn-link { border-color: transparent; background: transparent; padding-left: 4px; padding-right: 4px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.inline-form { display: inline-flex; }

.alert { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; border-radius: 12px; padding: 13px 15px; margin-bottom: 18px; border: 1px solid transparent; }
.alert strong { font-size: 12px; }
.alert-success { background: var(--success-soft); border-color: #abefc6; color: var(--success); }
.alert-error { background: var(--danger-soft); border-color: #fecdca; color: var(--danger); }
.impersonation-bar { min-height: 44px; padding: 8px 18px; background: #fff4e8; color: #93370d; display: flex; align-items: center; justify-content: center; gap: 14px; border-bottom: 1px solid #fedf89; position: relative; z-index: 100; }

.badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 760; background: #f2f4f7; color: #475467; text-transform: capitalize; }
.badge.active, .badge.verified, .badge.connected, .badge.approved, .badge.redirected { background: var(--success-soft); color: var(--success); }
.badge.pending, .badge.not_checked, .badge.draft { background: var(--warning-soft); color: var(--warning); }
.badge.suspended, .badge.disabled, .badge.rejected, .badge.error, .badge.paused, .badge.failed, .badge.blocked { background: var(--danger-soft); color: var(--danger); }

.table-wrap { overflow-x: auto; border-radius: 12px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 12px 11px; vertical-align: top; }
th { color: #667085; background: #f8fafc; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; white-space: nowrap; }
tbody tr:hover td { background: #fbfcff; }
tbody tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.cell-main { font-weight: 700; color: #1d2939; }
.cell-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }

.report-toolbar { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 12px; align-items: end; }
.report-toolbar .search-field { grid-column: span 2; }
.report-summary { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin: 14px 0 10px; color: var(--muted); font-size: 12px; }
.report-shell { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.report-scroll { width: 100%; overflow: auto; max-height: 70vh; scrollbar-color: #98a2b3 #eef2f6; }
.report-table { min-width: 2350px; font-size: 12px; }
.report-table thead th { position: sticky; top: 0; z-index: 6; background: #eef3f9; box-shadow: inset 0 -1px 0 var(--line-strong); }
.report-table th:first-child, .report-table td:first-child { position: sticky; left: 0; z-index: 4; background: #fff; }
.report-table th:nth-child(2), .report-table td:nth-child(2) { position: sticky; left: 42px; z-index: 4; background: #fff; }
.report-table thead th:first-child, .report-table thead th:nth-child(2) { z-index: 8; background: #eef3f9; }
.report-table td { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.report-table .wide-cell { max-width: 420px; }
.report-table .date-row td { position: static !important; padding: 8px 12px; background: #f5f8ff !important; color: #344054; font-weight: 800; border-bottom-color: #d6e0ff; }
.report-table code { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.report-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px; border-top: 1px solid var(--line); }
.pagination { display: flex; gap: 6px; align-items: center; }
.pagination a, .pagination span { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: #344054; background: #fff; font-size: 12px; }
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }
.bulk-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; background: #fffafa; border-top: 1px solid #fecdca; }

.code, code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.code { background: #101828; color: #e4e7ec; border-radius: 10px; padding: 13px; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; font-size: 12px; margin: 10px 0; }
.code.compact { padding: 9px; }

.mapping-row { display: grid; grid-template-columns: minmax(150px,1fr) minmax(240px,2fr) 105px 85px; gap: 10px; align-items: end; margin-bottom: 10px; }
.check-box, .check-line { display: flex; gap: 7px; align-items: center; }
.token-help { background: #f8fafc; padding: 11px; border-radius: 9px; color: var(--muted); margin: 12px 0; border: 1px dashed var(--line-strong); }
.section-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 20; padding: 8px; border-radius: 12px; background: rgba(244,247,251,.92); backdrop-filter: blur(8px); }
.section-nav a { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: #475467; font-size: 12px; font-weight: 650; }
.section-head { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; margin-bottom: 15px; }
.status-grid .stat { padding: 17px; }
.stat span { display: block; color: var(--muted); font-size: 11px; }
.stat strong { display: block; margin-top: 5px; font-size: 18px; }

.campaign-list { display: grid; gap: 10px; }
.campaign-card { border: 1px solid var(--line); border-radius: 11px; padding: 14px; background: #fff; }
.campaign-card > div:first-child { display: flex; justify-content: space-between; }
.campaign-card span { color: var(--muted); font-size: 12px; }
.campaign-child { margin: 8px 0 0 18px; border-left: 3px solid #d6e0ff; padding-left: 12px; }
.campaign-child.deeper { border-color: #e9d7fe; }
.placement-heading { border-bottom: 1px solid var(--line); padding-bottom: 7px; margin: 22px 0 10px; }
.placement-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.placement-option { border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: #fff; }
.placement-option > label { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; }
.placement-option span { display: flex; flex-direction: column; min-width: 0; }
.placement-option small code { font-size: 10px; overflow-wrap: anywhere; }
.choice-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.choice { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 11px; padding: 14px; background: #fff; }
.choice span { display: flex; flex-direction: column; }
.dynamic-table input { min-width: 100px; }
.row-remove { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 8px; }
.details-body { margin-top: 16px; }
details summary { cursor: pointer; color: #344054; }
details[open] summary { margin-bottom: 10px; }

.step-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.step-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.step-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; margin-bottom: 10px; }
.setup-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.setup-flow div { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.setup-flow strong { display: block; font-size: 12px; }
.setup-flow span { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-size: 11px; }
.copy-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
.flow-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow-line span { background: #f2f4f7; border-radius: 8px; padding: 8px 10px; }

.admin-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; }
.quick-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.quick-link { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #344054; }
.quick-link:hover { border-color: #a9baf4; box-shadow: var(--shadow-sm); }
.quick-link strong { color: #101828; }
.admin-table-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.resource-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.resource-counts span { font-size: 10px; padding: 3px 6px; border-radius: 999px; background: #f2f4f7; color: #475467; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at top left,#dce6ff,transparent 42%), var(--bg); }
.auth-card { width: min(470px,100%); }

@media (max-width: 1250px) {
  .report-toolbar { grid-template-columns: repeat(3,minmax(150px,1fr)); }
  .report-toolbar .search-field { grid-column: span 2; }
  .grid-5 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .placement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 260px; }
  .menu-button { display: grid; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: var(--topbar-h); transform: translateX(-102%); width: var(--sidebar-w); box-shadow: var(--shadow-md); transition: transform .2s ease; }
  .menu-open .sidebar { transform: translateX(0); }
  .sidebar-overlay { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(16,24,40,.46); opacity: 0; visibility: hidden; transition: .2s ease; z-index: 60; }
  .menu-open .sidebar-overlay { opacity: 1; visibility: visible; }
  .brand { min-width: 0; }
  .account-copy, .admin-pill { display: none; }
  .content { padding: 22px 16px 50px; }
  .mapping-row { grid-template-columns: 1fr 1.5fr 90px 70px; }
  .setup-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .topbar { padding: 0 12px; }
  .brand-copy small, .account-chip { display: none; }
  .topbar-right { gap: 6px; }
  .page-head, .section-head, .report-summary, .report-footer { flex-direction: column; align-items: stretch; }
  .grid-2, .grid-3, .grid-4, .grid-5, .stat-grid, .step-grid, .choice-row, .placement-grid, .quick-links, .setup-flow { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .mapping-row { grid-template-columns: 1fr; }
  .report-toolbar { grid-template-columns: 1fr; }
  .report-toolbar .search-field { grid-column: span 1; }
  .section-nav { position: static; }
  .copy-row { grid-template-columns: 1fr; }
  .card { padding: 17px; }
  .report-table th:nth-child(2), .report-table td:nth-child(2) { position: static; }
}

/* Version 2.2: placement-aware prefix controls */
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
#prefixTable textarea { min-height:72px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }
#prefixTable td { vertical-align:top; }
#prefixTable input, #prefixTable select, #prefixTable textarea { min-width:110px; }
@media (max-width: 900px) { .choice-grid { grid-template-columns:1fr; } }

/* Version 2.3.2: guided tracking UX and campaign rotation management */
.guided-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.guide-card { border:1px solid var(--line); border-radius:12px; padding:16px; background:#fff; }
.recommended-card { border-color:#b8c7ff; background:linear-gradient(180deg,#fbfcff,#f6f8ff); }
.guide-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.guide-card h3 { margin:2px 0 0; }
.eyebrow { display:block; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.guide-status { display:inline-flex; align-items:center; white-space:nowrap; border-radius:999px; padding:5px 8px; font-size:10px; font-weight:800; }
.guide-status.good { background:#ecfdf3; color:#067647; }
.guide-status.warn { background:#fff4e5; color:#b54708; }
.guide-status.neutral { background:#f2f4f7; color:#475467; }
.guide-checks { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 14px; }
.guide-checks span { border-radius:999px; background:#eef4ff; color:#344054; padding:5px 8px; font-size:10px; font-weight:700; }
.inline-form { margin:0; }
.health-list { display:grid; gap:8px; }
.health-row { display:grid; grid-template-columns:22px 1fr; gap:8px; align-items:start; }
.health-row span:last-child { display:flex; flex-direction:column; }
.health-row small { color:var(--muted); margin-top:1px; }
.health-icon { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:900; }
.health-icon.good { background:#ecfdf3; color:#067647; }
.health-icon.warn { background:#fff4e5; color:#b54708; }
.advanced-note { border:1px solid #d6e0ff; background:#f7f9ff; border-radius:10px; padding:11px 12px; color:#344054; margin-bottom:14px; font-size:12px; }
.mode-choice-grid .choice small, .advanced-tracking .choice small { line-height:1.45; }
.mode-preview { margin:16px 0; border:1px dashed #98a2b3; border-radius:10px; padding:12px; background:#fcfcfd; }
.mode-preview > strong { display:block; margin-bottom:8px; }
.preview-line { padding:4px 0; color:#344054; }
.preview-ok { margin-top:8px; color:#067647; font-weight:700; font-size:11px; }
.preview-warning { margin-top:8px; color:#b42318; font-weight:700; font-size:11px; }
.gateway-box { margin-top:14px; }
.gateway-choice { margin:0; }
.campaign-manager { margin-top:18px; border-top:1px solid var(--line); padding-top:18px; }
.campaign-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; }
.managed-campaign-list { gap:10px; }
.managed-campaign { transition:border-color .15s ease, box-shadow .15s ease; }
.managed-campaign.campaign-active { border-color:#b8c7ff; }
.managed-campaign.campaign-stored { background:#fcfcfd; }
.campaign-main-row { display:grid !important; grid-template-columns:28px minmax(0,1fr) minmax(180px,230px); gap:12px; align-items:start; }
.campaign-select { padding-top:3px; }
.campaign-title-row { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.badge.neutral { background:#f2f4f7; color:#475467; }
.weight-control label { display:flex; flex-direction:column; gap:5px; color:#344054; font-size:11px; font-weight:700; }
.weight-control input { max-width:150px; }
.weight-control small { display:block; margin-top:6px; color:var(--muted); }
.campaign-create-grid { margin-top:14px; }
.empty-state.compact { padding:16px; border:1px dashed var(--line-strong); border-radius:10px; }
.optional-tag { color:var(--muted); font-size:10px; font-weight:600; }
.tracker-core-help { margin-top:14px; border-radius:10px; padding:11px 12px; background:#f7f9ff; border:1px solid #d6e0ff; color:#344054; font-size:12px; }
.macro-readiness { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.readiness-pills { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.btn-success { background:#ecfdf3; border-color:#abefc6; color:#067647; }

@media (max-width: 900px) {
  .guided-grid { grid-template-columns:1fr; }
  .campaign-main-row { grid-template-columns:28px minmax(0,1fr); }
  .weight-control { grid-column:2; }
}
@media (max-width: 680px) {
  .campaign-toolbar { align-items:stretch; flex-direction:column; }
  .campaign-main-row { grid-template-columns:24px minmax(0,1fr); }
  .weight-control input { max-width:none; }
}


/* Version 2.3.3: nested Campaign → Ad Set → Ad hierarchy + CSS reliability */
.guided-identity { overflow: visible; }
.guided-grid { align-items: stretch; }
.guide-card { min-width: 0; font-size: 13px; }
.guide-card p { line-height: 1.55; }
.guide-status { flex: 0 0 auto; }
.hierarchy-manager { margin-top: 20px; }
.hierarchy-help { margin: 10px 0 14px; padding: 11px 13px; border: 1px solid #d6e0ff; border-radius: 10px; background: #f7f9ff; color: #344054; font-size: 12px; }
.hierarchy-list { gap: 14px; }
.hierarchy-campaign { padding: 0; overflow: hidden; }
.hierarchy-campaign-head { padding: 15px; }
.hierarchy-summary { margin-top: 6px; color: var(--muted); font-size: 11px; }
.hierarchy-editor { margin: 0; border-top: 1px solid var(--line); background: #fbfcfe; }
.hierarchy-editor > summary { padding: 12px 15px; background: #f8fafc; font-size: 12px; }
.hierarchy-editor[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--line); }
.hierarchy-body { margin: 0; padding: 14px 15px 16px; }
.hierarchy-toolbar, .ads-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.adset-list { display: grid; gap: 12px; }
.adset-node { border: 1px solid var(--line); border-radius: 11px; background: #fff; overflow: hidden; }
.adset-row, .ad-row { display: grid; grid-template-columns: 26px minmax(0,1fr) minmax(190px,235px); gap: 12px; align-items: start; }
.adset-row { padding: 13px; }
.ad-row { padding: 10px 12px; border-top: 1px solid #edf0f5; background: #fcfcfd; }
.node-check { padding-top: 4px; }
.node-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.node-title strong { overflow-wrap: anywhere; }
.node-title small { color: var(--muted); }
.ads-panel { margin: 0 12px 12px 42px; border-left: 3px solid #e9d7fe; padding-left: 12px; }
.ads-toolbar { padding: 8px 0 5px; margin: 0; }
.ad-list { border: 1px solid #edf0f5; border-radius: 9px; overflow: hidden; }
.ad-list .ad-row:first-child { border-top: 0; }
.child-create-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.75fr); gap: 10px; margin-top: 10px; }
.mini-create-form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; padding: 9px; border: 1px dashed var(--line-strong); border-radius: 9px; background: #fff; }
.mini-create-form strong { margin-right: 3px; align-self: center; }
.mini-create-form select, .mini-create-form input { width: auto; min-width: 96px; max-width: 155px; }
.mini-custom { border: 1px dashed var(--line-strong); border-radius: 9px; padding: 9px 11px; background: #fff; }
.mini-custom[open] > summary { margin-bottom: 0; }
.mini-custom .mini-create-form { border: 0; padding: 10px 0 0; }
.add-branch-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.compact-create { margin: 0; background: #fff; }
.compact-create h4 { margin: 0 0 5px; font-size: 13px; }
.compact-create p { margin-bottom: 10px; }
.mini-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-bottom: 10px; }
.mini-grid label { display: flex; flex-direction: column; gap: 4px; color: #344054; font-size: 11px; font-weight: 700; }
.ghost-danger { background: #fff; }
.hierarchy-weight-input { font-variant-numeric: tabular-nums; }
.adset-share-label, .ad-share-label { line-height: 1.35; }

@media (max-width: 1100px) {
  .adset-row, .ad-row { grid-template-columns: 24px minmax(0,1fr); }
  .adset-row .weight-control, .ad-row .weight-control { grid-column: 2; }
  .child-create-row, .add-branch-grid { grid-template-columns: 1fr; }
  .mini-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .hierarchy-campaign-head { padding: 12px; }
  .hierarchy-body { padding: 11px; }
  .ads-panel { margin-left: 20px; padding-left: 8px; }
  .mini-grid { grid-template-columns: 1fr; }
  .mini-create-form { align-items: stretch; }
  .mini-create-form select, .mini-create-form input { width: 100%; max-width: none; }
}

/* Version 2.3.4: Campaign / Ad Set / Ad Pause & Active controls */
.status-control { display:inline-flex; margin:0; align-items:center; }
.status-control .btn { white-space:nowrap; }
.status-badge { display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; font-size:10px; font-weight:800; line-height:1.1; white-space:nowrap; }
.status-badge.status-active { background:#ecfdf3; color:#067647; border:1px solid #abefc6; }
.status-badge.status-paused { background:#f2f4f7; color:#475467; border:1px solid #d0d5dd; }
.btn-pause { background:#fff; border-color:#fdb022; color:#93370d; }
.btn-pause:hover { background:#fffaeb; }
.btn-activate { background:#ecfdf3; border-color:#abefc6; color:#067647; }
.btn-activate:hover { background:#dcfae6; }
.node-title-head { display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; }
.hierarchy-campaign.is-paused { border-color:#d0d5dd; background:#f9fafb; }
.hierarchy-campaign.is-paused .hierarchy-campaign-head { background:#f9fafb; }
.adset-node.is-paused { background:#f9fafb; border-color:#d0d5dd; }
.adset-node.is-paused > .adset-row { background:#f9fafb; }
.ad-row.is-paused { background:#f7f7f8; }
.hierarchy-campaign.is-paused .campaign-identity > .hierarchy-summary,
.adset-node.is-paused .node-title > small,
.ad-row.is-paused .node-title { color:var(--muted); }
.hierarchy-help strong + strong { margin-left:6px; }
.campaign-title-row .status-control { margin-left:2px; }
.node-title-head .status-control { margin-left:2px; }

@media (max-width: 680px) {
  .campaign-title-row, .node-title-head { align-items:flex-start; }
  .status-control { width:auto; }
  .status-control .btn { min-height:32px; }
}


/* Version 2.3.7: reporting dashboard, diagnostics and panel timezone */
.dashboard-filter-card { margin-bottom: 18px; }
.dashboard-filter-grid { display:grid; grid-template-columns:minmax(220px,1.2fr) minmax(180px,.8fr) auto minmax(180px,.7fr); gap:12px; align-items:end; }
.dashboard-range-note { min-height:42px; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:2px; }
.dashboard-range-note span { color:var(--muted); font-size:12px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.metric-card { border:1px solid var(--line); border-radius:13px; padding:15px; background:#fff; min-width:0; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.metric-card span { display:block; color:var(--muted); font-size:12px; font-weight:700; margin-bottom:6px; }
.metric-card strong { display:block; font-size:27px; line-height:1.05; letter-spacing:-.03em; }
.metric-card small { display:block; color:var(--muted); margin-top:7px; }
.metric-good { border-left:4px solid #12b76a; }
.metric-warn { border-left:4px solid #f79009; }
.metric-bad { border-left:4px solid #f04438; }
.dashboard-detail-grid { align-items:start; }
.quality-list { display:grid; gap:0; }
.quality-list > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.quality-list > div:last-child { border-bottom:0; }
.quality-list span { color:#344054; }
.quality-list strong { font-variant-numeric:tabular-nums; }
.timezone-form { display:flex; gap:10px; align-items:end; }
.timezone-form .field { flex:1; margin:0; }
.timezone-example { margin-top:12px; line-height:1.5; }
.report-table code { white-space:nowrap; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-range-note { align-items:flex-start; }
}
@media (max-width: 680px) {
  .metric-grid, .dashboard-filter-grid { grid-template-columns:1fr; }
  .timezone-form { flex-direction:column; align-items:stretch; }
}
.account-chip-link { color:inherit; text-decoration:none; }
.account-chip-link:hover { text-decoration:none; }