/* ============================================================
   Skeleton dashboard widgets (static replicas of TM dashboard UI).
   Used inline in docs pages via {{widget:<name>}} include token.
   ============================================================ */

.widget {
  border: 1px solid rgba(127,127,127,0.2);
  border-radius: 12px;
  background: var(--color-surface, transparent);
  padding: var(--space-5);
  margin: var(--space-5) 0;
  font-size: var(--font-size-sm);
}
.widget__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.widget__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.widget__meta { font-size: var(--font-size-xs); color: var(--color-text-subtle, #9aa0b4); }

/* Stat cards (4 KPI tiles) */
.widget-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 720px) { .widget-stat-cards { grid-template-columns: repeat(2, 1fr); } }
.widget-stat {
  padding: var(--space-4);
  border: 1px solid rgba(127,127,127,0.2);
  border-radius: 8px;
}
.widget-stat__label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle, #9aa0b4);
  margin-bottom: var(--space-2);
}
.widget-stat__value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.widget-stat__delta { font-size: var(--font-size-xs); }
.widget-stat__delta--up { color: #19c37d; }
.widget-stat__delta--down { color: #ef5350; }

/* Generic data table */
.widget-table { width: 100%; border-collapse: collapse; }
.widget-table th, .widget-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(127,127,127,0.18);
}
.widget-table th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle, #9aa0b4);
  font-weight: 600;
}
.widget-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.widget-table tr:last-child td { border-bottom: none; }

/* Funnel viz */
.widget-funnel { display: flex; flex-direction: column; gap: var(--space-2); }
.widget-funnel__step {
  display: grid;
  grid-template-columns: 1fr 90px 80px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: 8px;
  background: rgba(127,127,127,0.06);
}
.widget-funnel__bar {
  height: 10px;
  background: var(--color-brand);
  border-radius: 999px;
  margin-top: 6px;
}
.widget-funnel__count { font-variant-numeric: tabular-nums; text-align: right; }
.widget-funnel__rate { color: #19c37d; font-variant-numeric: tabular-nums; text-align: right; }

/* Buyer journey timeline */
.widget-journey { position: relative; padding-left: var(--space-5); list-style: none; margin: 0; }
.widget-journey::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(127,127,127,0.25);
}
.widget-journey__event {
  position: relative;
  padding: var(--space-2) 0 var(--space-3) var(--space-3);
}
.widget-journey__event::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-brand);
  border: 2px solid var(--color-bg);
}
.widget-journey__when { font-size: var(--font-size-xs); color: var(--color-text-subtle, #9aa0b4); }
.widget-journey__what { font-weight: 600; }
.widget-journey__detail { font-size: var(--font-size-xs); color: var(--color-text-muted, #b5bbcf); }

/* Revenue chart (SVG line) */
.widget-chart { width: 100%; height: 220px; }
.widget-chart__line { fill: none; stroke: var(--color-brand); stroke-width: 2; }
.widget-chart__area { fill: rgba(34, 51, 255, 0.12); }
.widget-chart__axis { stroke: rgba(127,127,127,0.3); stroke-width: 1; }
.widget-chart__label { font-size: 10px; fill: var(--color-text-subtle, #9aa0b4); }

/* Platform health pills */
.widget-health { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.widget-health__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(127,127,127,0.2);
  border-radius: 8px;
}
.widget-health__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #19c37d;
  flex-shrink: 0;
}
.widget-health__dot--warn { background: #f5a524; }
.widget-health__dot--down { background: #ef5350; }
.widget-health__label { font-weight: 600; font-size: var(--font-size-sm); }
.widget-health__meta { font-size: var(--font-size-xs); color: var(--color-text-subtle, #9aa0b4); }

/* ============================================================
   Mockup widgets (--mock variants) - frozen-light visual scope.
   These show app screens (signup, add-site) as illustrations.
   They stay WHITE in dark mode so the embedded app preview reads
   as a screenshot, not as a UI panel.

   All child selectors are prefixed with .widget--mock so they win
   specificity against reset.css (button reset) and dark-theme
   token cascade.
   ============================================================ */

.widget--mock,
[data-theme="dark"] .widget--mock {
  display: block !important;
  padding: 0 !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  border: 1px solid #D5DAEB !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18) !important;
  margin: var(--space-5) auto !important;
  max-width: 480px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.widget--mock *,
[data-theme="dark"] .widget--mock * { box-sizing: border-box; }

.widget--mock .widget__caption,
[data-theme="dark"] .widget--mock .widget__caption {
  display: block !important;
  padding: 10px 14px !important;
  background: #F0F3FF !important;
  border-top: 1px solid #D5DAEB !important;
  font-size: 12px !important;
  color: #4B5160 !important;
  text-align: center !important;
  margin: 0 !important;
  font-style: normal !important;
}

/* --- Signup / login mockup --- */
.widget--mock.mock-login .mock-login__inner {
  padding: 36px 36px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.widget--mock.mock-login .mock-login__brand {
  font-weight: 800 !important;
  font-size: 22px !important;
  text-align: center !important;
  letter-spacing: -0.02em !important;
  color: #0F0F0F !important;
  margin: 0 !important;
}
.widget--mock.mock-login .mock-login__title {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #0F0F0F !important;
  text-align: left !important;
  margin: 6px 0 8px !important;
  letter-spacing: -0.01em !important;
}
.widget--mock.mock-login .mock-login__google {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid #C9CFE0 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.06) !important;
  color: #0F0F0F !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
  margin: 0 !important;
}
.widget--mock.mock-login .mock-login__divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: #6B7280 !important;
  margin: 6px 0 2px !important;
  font-weight: 500 !important;
}
.widget--mock.mock-login .mock-login__divider::before,
.widget--mock.mock-login .mock-login__divider::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: #D5DAEB !important;
}
.widget--mock.mock-login .mock-login__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.widget--mock.mock-login .mock-login__label {
  font-size: 14px !important;
  color: #0F0F0F !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.widget--mock.mock-login .mock-login__input {
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid #C9CFE0 !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.widget--mock.mock-login .mock-login__input--placeholder { color: #9CA3AF !important; }
.widget--mock.mock-login .mock-login__input--password { color: #4B5160 !important; }
.widget--mock.mock-login .mock-login__input--password svg { color: #6B7280 !important; }
.widget--mock.mock-login .mock-login__submit {
  margin-top: 8px !important;
  height: 44px !important;
  border-radius: 10px !important;
  border: none !important;
  background: #2233FF !important;
  color: #FFFFFF !important;
  font: 600 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 6px 14px -6px rgba(34, 51, 255, 0.55) !important;
}
.widget--mock.mock-login .mock-login__footer {
  text-align: center !important;
  font-size: 13px !important;
  color: #4B5160 !important;
  margin: 6px 0 0 !important;
  line-height: 1.5 !important;
}
.widget--mock.mock-login .mock-login__link {
  color: #0F0F0F !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* --- Add-site mockup (dialog only - matches real DialogContent layout) --- */
.widget--mock.mock-add-site { max-width: 520px !important; }
.widget--mock.mock-add-site .mock-add-site__panel {
  padding: 28px 28px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: #FFFFFF !important;
}
.widget--mock.mock-add-site .mock-add-site__head {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.widget--mock.mock-add-site .mock-add-site__title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-add-site .mock-add-site__title-row svg { color: #0F0F0F !important; }
.widget--mock.mock-add-site .mock-add-site__title {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: #0F0F0F !important;
  letter-spacing: -0.01em !important;
}
.widget--mock.mock-add-site .mock-add-site__desc {
  font-size: 14px !important;
  color: #4B5160 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
.widget--mock.mock-add-site .mock-add-site__usage {
  font-size: 12px !important;
  color: #6B7280 !important;
  margin: 4px 0 0 !important;
}
.widget--mock.mock-add-site .mock-add-site__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.widget--mock.mock-add-site .mock-add-site__label {
  font-size: 14px !important;
  color: #0F0F0F !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.widget--mock.mock-add-site .mock-add-site__input {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid #C9CFE0 !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
}
.widget--mock.mock-add-site .mock-add-site__input--placeholder { color: #9CA3AF !important; }
.widget--mock.mock-add-site .mock-add-site__actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.widget--mock.mock-add-site .mock-add-site__cancel {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid #C9CFE0 !important;
  color: #4B5160 !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
  margin: 0 !important;
}
.widget--mock.mock-add-site .mock-add-site__create {
  height: 36px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  background: #2233FF !important;
  border: 1px solid #1A2BD9 !important;
  color: #FFFFFF !important;
  font: 600 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
  box-shadow: 0 4px 10px -4px rgba(34, 51, 255, 0.5) !important;
  margin: 0 !important;
}

/* --- Empty-state dashboard mockup (first view after signup) --- */
.widget--mock.mock-empty { max-width: 760px !important; }
.widget--mock.mock-empty .mock-empty__app {
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  min-height: 280px !important;
  background: #F4F5F7 !important;
}
.widget--mock.mock-empty .mock-empty__sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid #E5E7EB !important;
  padding: 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-empty .mock-empty__org {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  cursor: default !important;
  margin: 0 !important;
  width: 100% !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
}
.widget--mock.mock-empty .mock-empty__org svg { color: #6B7280 !important; flex-shrink: 0 !important; }
.widget--mock.mock-empty .mock-empty__org-name { flex: 1 !important; text-align: left !important; }
.widget--mock.mock-empty .mock-empty__org-chev { margin-left: auto !important; }

.widget--mock.mock-empty .mock-empty__nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.widget--mock.mock-empty .mock-empty__nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  color: #4B5160 !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
.widget--mock.mock-empty .mock-empty__nav-item svg { color: #6B7280 !important; flex-shrink: 0 !important; }
.widget--mock.mock-empty .mock-empty__nav-item--active {
  background: #E5E7EB !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-empty .mock-empty__nav-item--active svg { color: #0F0F0F !important; }

.widget--mock.mock-empty .mock-empty__main {
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  background: #F4F5F7 !important;
}
.widget--mock.mock-empty .mock-empty__topbar {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
}
.widget--mock.mock-empty .mock-empty__chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  color: #0F0F0F !important;
  font-weight: 500 !important;
}
.widget--mock.mock-empty .mock-empty__chip svg { color: #6B7280 !important; }
.widget--mock.mock-empty .mock-empty__chip-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  color: #6B7280 !important;
}

.widget--mock.mock-empty .mock-empty__card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 28px 24px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
.widget--mock.mock-empty .mock-empty__title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0F0F0F !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.widget--mock.mock-empty .mock-empty__desc {
  font-size: 14px !important;
  color: #6B7280 !important;
  margin: 0 0 12px !important;
}
.widget--mock.mock-empty .mock-empty__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  height: 38px !important;
  background: #2233FF !important;
  border: 1px solid #1A2BD9 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font: 600 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
  margin: 0 !important;
  box-shadow: 0 4px 10px -4px rgba(34, 51, 255, 0.5) !important;
}
.widget--mock.mock-empty .mock-empty__cta svg { color: #FFFFFF !important; }

/* --- Shared CNAME card (used in both modal + settings mockups) --- */
.widget--mock .mock-cname-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 18px 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock .mock-cname-card__title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F0F0F !important;
  margin: 0 !important;
}
.widget--mock .mock-cname-card__desc {
  font-size: 13px !important;
  color: #6B7280 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
.widget--mock .mock-cname-table {
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #F9FAFB !important;
}
.widget--mock .mock-cname-row {
  display: grid !important;
  grid-template-columns: 80px 1fr !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #E5E7EB !important;
  font: 13px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: #0F0F0F !important;
}
.widget--mock .mock-cname-row:last-child { border-bottom: none !important; }
.widget--mock .mock-cname-key { color: #6B7280 !important; }
.widget--mock .mock-cname-val {
  color: #0F0F0F !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.widget--mock .mock-cname-copy { color: #9CA3AF !important; }
.widget--mock .mock-cname-hint {
  font-size: 12px !important;
  color: #6B7280 !important;
  margin: 0 !important;
}
.widget--mock .mock-cname-hint-link { color: #0F0F0F !important; text-decoration: underline !important; }
.widget--mock .mock-cname-verify {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  height: 36px !important;
  background: #2233FF !important;
  border: 1px solid #1A2BD9 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font: 600 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
  margin: 4px 0 0 !important;
  box-shadow: 0 4px 10px -4px rgba(34, 51, 255, 0.5) !important;
}

/* --- Connect-your-domain MODAL --- */
.widget--mock.mock-cname-modal { max-width: 620px !important; }
.widget--mock.mock-cname-modal .mock-cname-modal__inner {
  padding: 24px 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
.widget--mock.mock-cname-modal .mock-cname-modal__head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 18px !important;
}
.widget--mock.mock-cname-modal .mock-cname-modal__title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0F0F0F !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em !important;
}
.widget--mock.mock-cname-modal .mock-cname-modal__desc {
  font-size: 13px !important;
  color: #6B7280 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
.widget--mock.mock-cname-modal .mock-cname-modal__x {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #6B7280 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: default !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* --- Dismissed-state BANNER --- */
.widget--mock.mock-cname-banner { max-width: 720px !important; }
.widget--mock.mock-cname-banner .mock-cname-banner__bar {
  background: #FEF3C7 !important;
  border: 1px solid #FCD34D !important;
  padding: 14px 18px !important;
}
.widget--mock.mock-cname-banner .mock-cname-banner__title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #78350F !important;
  margin: 0 0 4px !important;
}
.widget--mock.mock-cname-banner .mock-cname-banner__sub {
  font-size: 13px !important;
  color: #78350F !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.widget--mock.mock-cname-banner .mock-cname-banner__link {
  color: #78350F !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

/* --- Settings -> Tracking page --- */
.widget--mock.mock-settings { max-width: 760px !important; }
.widget--mock.mock-settings .mock-settings__inner {
  padding: 22px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #F4F5F7 !important;
}
.widget--mock.mock-settings .mock-settings__back {
  font-size: 13px !important;
  color: #6B7280 !important;
  margin: 0 !important;
}
.widget--mock.mock-settings .mock-settings__heading {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0F0F0F !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.widget--mock.mock-settings .mock-settings__tabs {
  display: flex !important;
  gap: 20px !important;
  border-bottom: 1px solid #E5E7EB !important;
  padding-bottom: 0 !important;
  margin: 0 0 8px !important;
}
.widget--mock.mock-settings .mock-settings__tab {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
  padding: 8px 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
}
.widget--mock.mock-settings .mock-settings__tab--active {
  color: #0F0F0F !important;
  border-bottom-color: #0F0F0F !important;
}
.widget--mock.mock-settings .mock-settings__panel {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 18px 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.widget--mock.mock-settings .mock-settings__panel-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.widget--mock.mock-settings .mock-settings__panel-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: #EEF2FF !important;
  color: #2233FF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.widget--mock.mock-settings .mock-settings__panel-text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.widget--mock.mock-settings .mock-settings__panel-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F0F0F !important;
  margin: 0 !important;
}
.widget--mock.mock-settings .mock-settings__panel-desc {
  font-size: 13px !important;
  color: #6B7280 !important;
  margin: 0 !important;
}
.widget--mock.mock-settings .mock-settings__pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  background: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  color: #4B5160 !important;
  font-weight: 500 !important;
}
.widget--mock.mock-settings .mock-settings__pill-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid #9CA3AF !important;
}

/* --- CLOUDFLARE mockups (dark UI, NOT light) --- */
/* Override the .widget--mock light-bg lock for the .mock-cf variant. */
.widget--mock.mock-cf,
[data-theme="dark"] .widget--mock.mock-cf {
  background: #0F1011 !important;
  color: #E2E4E9 !important;
  border-color: #2A2C30 !important;
  max-width: 760px !important;
}
.widget--mock.mock-cf .widget__caption,
[data-theme="dark"] .widget--mock.mock-cf .widget__caption {
  background: #18191B !important;
  color: #9CA0A8 !important;
  border-top-color: #2A2C30 !important;
}

/* CF records list view */
.widget--mock.mock-cf-list .mock-cf__app {
  display: grid !important;
  grid-template-columns: 170px 1fr !important;
  min-height: 280px !important;
}
.widget--mock.mock-cf-list .mock-cf__sidebar {
  border-right: 1px solid #2A2C30 !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  background: #0F1011 !important;
}
.widget--mock.mock-cf-list .mock-cf__side-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: #B4B7C0 !important;
  border-radius: 4px !important;
}
.widget--mock.mock-cf-list .mock-cf__side-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #F38020 !important;
  display: inline-block !important;
}
.widget--mock.mock-cf-list .mock-cf__side-item--active {
  background: #1A1D22 !important;
  color: #FFFFFF !important;
}
.widget--mock.mock-cf-list .mock-cf__side-sub {
  padding: 5px 10px 5px 26px !important;
  font-size: 12px !important;
  color: #8E92A0 !important;
}
.widget--mock.mock-cf-list .mock-cf__side-sub--active {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.widget--mock.mock-cf-list .mock-cf__main {
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #0F1011 !important;
}
.widget--mock.mock-cf-list .mock-cf__h {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.widget--mock.mock-cf-list .mock-cf__sub {
  font-size: 12px !important;
  color: #9CA0A8 !important;
  margin: 0 !important;
}
.widget--mock.mock-cf-list .mock-cf__toolbar {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.widget--mock.mock-cf-list .mock-cf__search {
  flex: 1 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #2A2C30 !important;
  background: #18191B !important;
  color: #6E7280 !important;
  font-size: 12px !important;
}
.widget--mock.mock-cf-list .mock-cf__add {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: #2A66F4 !important;
  border: 1px solid #2A66F4 !important;
  border-radius: 6px !important;
  color: #FFFFFF !important;
  font: 600 12px var(--font-family-base, system-ui) !important;
  cursor: default !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.widget--mock.mock-cf-list .mock-cf__table {
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #2A2C30 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}
.widget--mock.mock-cf-list .mock-cf__th,
.widget--mock.mock-cf-list .mock-cf__tr {
  display: grid !important;
  grid-template-columns: 1.6fr 0.6fr 1.2fr 0.9fr 0.5fr !important;
  gap: 12px !important;
  padding: 9px 14px !important;
  font-size: 12px !important;
  align-items: center !important;
}
.widget--mock.mock-cf-list .mock-cf__th {
  background: #18191B !important;
  color: #9CA0A8 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #2A2C30 !important;
}
.widget--mock.mock-cf-list .mock-cf__tr {
  color: #E2E4E9 !important;
  border-bottom: 1px solid #1F2125 !important;
}
.widget--mock.mock-cf-list .mock-cf__tr:last-child { border-bottom: none !important; }
.widget--mock.mock-cf-list .mock-cf__proxy-off { color: #8E92A0 !important; }
.widget--mock.mock-cf-list .mock-cf__proxy-on { color: #F38020 !important; }

/* CF Add record dialog */
.widget--mock.mock-cf-add .mock-cf-add__inner {
  padding: 26px 26px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
.widget--mock.mock-cf-add .mock-cf-add__head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.widget--mock.mock-cf-add .mock-cf-add__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.widget--mock.mock-cf-add .mock-cf-add__x {
  width: 32px !important; height: 32px !important;
  background: #18191B !important;
  border: 1px solid #2A2C30 !important;
  border-radius: 6px !important;
  color: #9CA0A8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: default !important;
  margin: 0 !important;
}
.widget--mock.mock-cf-add .mock-cf-add__alias {
  font-size: 13px !important;
  color: #E2E4E9 !important;
  margin: 0 !important;
}
.widget--mock.mock-cf-add .mock-cf-add__placeholder { color: #6E7280 !important; }
.widget--mock.mock-cf-add .mock-cf-add__row {
  display: grid !important;
  grid-template-columns: 130px 1fr !important;
  gap: 14px !important;
}
.widget--mock.mock-cf-add .mock-cf-add__row:has(.mock-cf-add__field--proxy) {
  grid-template-columns: 1fr 200px 110px !important;
}
.widget--mock.mock-cf-add .mock-cf-add__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-cf-add .mock-cf-add__label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
}
.widget--mock.mock-cf-add .mock-cf-add__input,
.widget--mock.mock-cf-add .mock-cf-add__select {
  height: 40px !important;
  padding: 0 12px !important;
  background: #18191B !important;
  border: 1px solid #2A2C30 !important;
  border-radius: 8px !important;
  color: #E2E4E9 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
}
.widget--mock.mock-cf-add .mock-cf-add__select { justify-content: space-between !important; gap: 8px !important; color: #FFFFFF !important; }
.widget--mock.mock-cf-add .mock-cf-add__proxy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 40px !important;
}
.widget--mock.mock-cf-add .mock-cf-add__toggle {
  width: 38px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 2px solid #2A66F4 !important;
  position: relative !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
.widget--mock.mock-cf-add .mock-cf-add__toggle-knob {
  position: absolute !important;
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  background: #2A66F4 !important;
  left: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.widget--mock.mock-cf-add .mock-cf-add__cloud { color: #6E7280 !important; }
.widget--mock.mock-cf-add .mock-cf-add__proxy-label { font-size: 13px !important; color: #FFFFFF !important; }
.widget--mock.mock-cf-add .mock-cf-add__actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #2A2C30 !important;
  margin-top: 6px !important;
}
.widget--mock.mock-cf-add .mock-cf-add__cancel {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid #2A2C30 !important;
  color: #FFFFFF !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-cf-add .mock-cf-add__save {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  background: #1E3A8A !important;
  border: 1px solid #1E3A8A !important;
  color: #FFFFFF !important;
  font: 600 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}

/* --- GODADDY mockup (light UI) --- */
.widget--mock.mock-gd { max-width: 880px !important; }
.widget--mock.mock-gd .mock-gd__inner {
  padding: 18px 22px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #F5F5F5 !important;
}
.widget--mock.mock-gd .mock-gd__heading {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0F0F0F !important;
  margin: 0 !important;
}
.widget--mock.mock-gd .mock-gd__hint {
  font-size: 13px !important;
  color: #4B5160 !important;
  margin: 0 !important;
}
.widget--mock.mock-gd .mock-gd__hint-link {
  color: #0F0F0F !important;
  text-decoration: underline !important;
}
.widget--mock.mock-gd .mock-gd__row {
  display: grid !important;
  grid-template-columns: 0.7fr 1.2fr 1.6fr 0.8fr !important;
  gap: 12px !important;
  background: #FFFFFF !important;
  padding: 12px !important;
  border-radius: 4px !important;
  border: 1px solid #E5E7EB !important;
}
.widget--mock.mock-gd .mock-gd__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-gd .mock-gd__label {
  font-size: 12px !important;
  color: #4B5160 !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.widget--mock.mock-gd .mock-gd__req { color: #DC2626 !important; }
.widget--mock.mock-gd .mock-gd__input,
.widget--mock.mock-gd .mock-gd__select {
  height: 36px !important;
  padding: 0 10px !important;
  background: #FFFFFF !important;
  border: 1px solid #C9CFE0 !important;
  border-radius: 4px !important;
  color: #0F0F0F !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
}
.widget--mock.mock-gd .mock-gd__select { justify-content: space-between !important; gap: 6px !important; }
.widget--mock.mock-gd .mock-gd__actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 4px !important;
}
.widget--mock.mock-gd .mock-gd__more {
  height: 34px !important;
  padding: 0 14px !important;
  background: #0F0F0F !important;
  border: 1px solid #0F0F0F !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-gd .mock-gd__actions-right { display: inline-flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-gd .mock-gd__save {
  height: 34px !important;
  padding: 0 18px !important;
  background: #0F0F0F !important;
  border: 1px solid #0F0F0F !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-gd .mock-gd__cancel {
  font-size: 13px !important;
  color: #0F0F0F !important;
  text-decoration: underline !important;
}

/* --- WORDPRESS admin mockups --- */
.widget--mock.mock-wp { max-width: 720px !important; }

/* Plugins sidebar + flyout */
.widget--mock.mock-wp-menu .mock-wp-menu__row {
  display: grid !important;
  grid-template-columns: 200px 240px !important;
  background: #1D2327 !important;
  min-height: 220px !important;
}
.widget--mock.mock-wp-menu .mock-wp-sidebar {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #1D2327 !important;
  font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.widget--mock.mock-wp-menu .mock-wp-sidebar__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  color: #DCDCDE !important;
  position: relative !important;
}
.widget--mock.mock-wp-menu .mock-wp-sidebar__icon { color: #A7AAAD !important; display: inline-flex !important; }
.widget--mock.mock-wp-menu .mock-wp-sidebar__item--active {
  background: #2271B1 !important;
  color: #FFFFFF !important;
}
.widget--mock.mock-wp-menu .mock-wp-sidebar__item--active .mock-wp-sidebar__icon { color: #FFFFFF !important; }
.widget--mock.mock-wp-menu .mock-wp-sidebar__caret {
  position: absolute !important;
  right: -1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-right: 8px solid #1D2327 !important;
}
.widget--mock.mock-wp-menu .mock-wp-flyout {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  background: #1D2327 !important;
  border-left: 1px solid #2C3338 !important;
  font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  align-self: start !important;
  margin-top: 38px !important;
  height: fit-content !important;
}
.widget--mock.mock-wp-menu .mock-wp-flyout__item {
  padding: 8px 16px !important;
  color: #DCDCDE !important;
  font-weight: 600 !important;
}
.widget--mock.mock-wp-menu .mock-wp-flyout__item--target {
  color: #FFFFFF !important;
  background: rgba(34, 113, 177, 0.25) !important;
  box-shadow: inset 3px 0 0 0 #72AEE6 !important;
}

/* Installed Plugins header */
.widget--mock.mock-wp-installed { max-width: 720px !important; }
.widget--mock.mock-wp-installed .mock-wp-installed__inner {
  background: #F0F0F1 !important;
  padding: 20px 24px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #1D2327 !important;
}
.widget--mock.mock-wp-installed .mock-wp-installed__head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.widget--mock.mock-wp-installed .mock-wp-installed__title {
  font-size: 23px !important;
  font-weight: 400 !important;
  color: #1D2327 !important;
  margin: 0 !important;
  letter-spacing: -0.005em !important;
}
.widget--mock.mock-wp-installed .mock-wp-installed__add {
  height: 32px !important;
  padding: 0 12px !important;
  border: 1.5px solid #2271B1 !important;
  border-radius: 3px !important;
  background: #F6F7F7 !important;
  color: #2271B1 !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: default !important;
  box-shadow: 0 0 0 1px #2271B1 !important;
}
.widget--mock.mock-wp-installed .mock-wp-installed__tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
}
.widget--mock.mock-wp-installed .mock-wp-installed__tab { color: #2271B1 !important; font-weight: 600 !important; }
.widget--mock.mock-wp-installed .mock-wp-installed__tab em { font-style: normal !important; color: #50575E !important; font-weight: 400 !important; }
.widget--mock.mock-wp-installed .mock-wp-installed__tab--active { color: #1D2327 !important; }
.widget--mock.mock-wp-installed .mock-wp-installed__divider { color: #8C8F94 !important; }

/* WordPress.org Add Plugins search-result card (search + install flow) */
.widget--mock.mock-wpsearch { max-width: 760px !important; }
.widget--mock.mock-wpsearch.mock-wpsearch--card-only { max-width: 420px !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__inner {
  background: #F0F0F1 !important;
  padding: 20px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #1D2327 !important;
}
.widget--mock.mock-wpsearch.mock-wpsearch--card-only .mock-wpsearch__inner { padding: 16px !important; background: #F0F0F1 !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__head { display: flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__title {
  font-size: 23px !important;
  font-weight: 400 !important;
  color: #1D2327 !important;
  margin: 0 !important;
  letter-spacing: -0.005em !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__upload {
  height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #2271B1 !important;
  border-radius: 3px !important;
  background: #F6F7F7 !important;
  color: #2271B1 !important;
  font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: default !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__bar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  border-bottom: 1px solid #C3C4C7 !important;
  padding-bottom: 6px !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__tabs {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 14px !important;
  font-size: 14px !important;
  flex-wrap: wrap !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__tab { color: #2271B1 !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__tab--active {
  color: #1D2327 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -3px 0 0 #2271B1 !important;
  padding-bottom: 4px !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__search { display: flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__searchlabel { color: #50575E !important; font-size: 13px !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__input {
  min-width: 150px !important;
  padding: 4px 8px !important;
  border: 1px solid #8C8F94 !important;
  border-radius: 3px !important;
  background: #FFFFFF !important;
  color: #1D2327 !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__kw {
  padding: 4px 8px !important;
  border: 1px solid #8C8F94 !important;
  border-radius: 3px !important;
  background: #FFFFFF !important;
  color: #50575E !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__count { color: #50575E !important; font-size: 13px !important; text-align: right !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__card {
  background: #FFFFFF !important;
  border: 1px solid #C3C4C7 !important;
  border-radius: 4px !important;
  width: 372px !important;
  max-width: 100% !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__main { display: flex !important; gap: 14px !important; padding: 16px 16px 14px !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__icon {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
  font: 800 26px var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  letter-spacing: -0.02em !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__body { flex: 1 1 auto !important; min-width: 0 !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__toprow { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__name { color: #2271B1 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__actions { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 5px !important; flex: 0 0 auto !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__install {
  height: 28px !important;
  padding: 0 12px !important;
  border: 1px solid #2271B1 !important;
  border-radius: 3px !important;
  background: #F6F7F7 !important;
  color: #2271B1 !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: default !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__install--activate { background: #2271B1 !important; border-color: #2271B1 !important; color: #FFFFFF !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__install--target { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__more { color: #2271B1 !important; font-size: 13px !important; text-decoration: underline !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__desc { margin: 10px 0 8px !important; font-size: 13px !important; color: #1D2327 !important; line-height: 1.5 !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__by { color: #50575E !important; font-style: italic !important; font-size: 13px !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__foot {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  border-top: 1px solid #DCDCDE !important;
  flex-wrap: wrap !important;
}
.widget--mock.mock-wpsearch .mock-wpsearch__footcol { display: flex !important; flex-direction: column !important; gap: 3px !important; font-size: 12px !important; color: #50575E !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__footcol--right { align-items: flex-end !important; text-align: right !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__stars { color: #DBA617 !important; font-size: 14px !important; letter-spacing: 1px !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__ratecount { color: #50575E !important; font-size: 12px !important; }
.widget--mock.mock-wpsearch .mock-wpsearch__compat { color: #008A20 !important; }

/* --- TM dashboard: Connect plugin authorization dialog --- */
.widget--mock.mock-tm-wp-authorize { max-width: 620px !important; }
.widget--mock.mock-tm-wp-authorize .mock-tm-wp-authorize__inner {
  padding: 24px 26px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-wp-authorize .mock-tm-wp-authorize__title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0F0F0F !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.widget--mock.mock-tm-wp-authorize .mock-tm-wp-authorize__desc {
  font-size: 14px !important;
  color: #6B7280 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.widget--mock.mock-tm-wp-authorize .mock-tm-wp-authorize__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.widget--mock.mock-tm-wp-authorize .mock-tm-wp-authorize__label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-wp-authorize .mock-tm-wp-authorize__select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #F9FAFB !important;
  color: #0F0F0F !important;
  font: 14px var(--font-family-base, system-ui) !important;
}
.widget--mock.mock-tm-wp-authorize .mock-tm-wp-authorize__select svg { color: #6B7280 !important; }
.widget--mock.mock-tm-wp-authorize .mock-tm-wp-authorize__actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
.widget--mock.mock-tm-wp-authorize .mock-tm-wp-authorize__cancel {
  padding: 0 14px !important;
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  color: #0F0F0F !important;
  font: 600 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-wp-authorize .mock-tm-wp-authorize__allow {
  padding: 0 18px !important;
  height: 36px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  color: #0F0F0F !important;
  font: 600 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}

/* --- TM in WP Admin: Connect to TrueMetriks --- */
.widget--mock.mock-wp-connect { max-width: 760px !important; }
.widget--mock.mock-wp-connect .mock-wp-connect__inner {
  background: #F0F0F1 !important;
  padding: 22px 26px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #1D2327 !important;
}
.widget--mock.mock-wp-connect .mock-wp-connect__title {
  font-size: 23px !important;
  font-weight: 400 !important;
  color: #1D2327 !important;
  margin: 0 !important;
  letter-spacing: -0.005em !important;
}
.widget--mock.mock-wp-connect .mock-wp-connect__status {
  background: #FFFFFF !important;
  border-left: 4px solid #72AEE6 !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #1D2327 !important;
}
.widget--mock.mock-wp-connect .mock-wp-connect__card {
  background: #FFFFFF !important;
  border: 1px solid #C3C4C7 !important;
  border-radius: 4px !important;
  padding: 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-wp-connect .mock-wp-connect__card-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1D2327 !important;
  margin: 0 !important;
}
.widget--mock.mock-wp-connect .mock-wp-connect__desc {
  font-size: 14px !important;
  color: #1D2327 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.widget--mock.mock-wp-connect .mock-wp-connect__cta {
  align-self: flex-start !important;
  padding: 0 18px !important;
  height: 38px !important;
  background: #2233FF !important;
  border: 1px solid #1A2BD9 !important;
  border-radius: 6px !important;
  color: #FFFFFF !important;
  font: 600 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: default !important;
  box-shadow: 0 4px 10px -4px rgba(34, 51, 255, 0.5) !important;
}
.widget--mock.mock-wp-connect .mock-wp-connect__footer {
  font-size: 13px !important;
  color: #1D2327 !important;
  margin: 4px 0 0 !important;
}
.widget--mock.mock-wp-connect .mock-wp-connect__link {
  color: #2233FF !important;
  text-decoration: underline !important;
}

/* --- SHOPIFY admin mockups --- */
.widget--mock.mock-shopify { max-width: 720px !important; }

/* Main left sidebar */
.widget--mock.mock-shopify-sidebar { max-width: 280px !important; }
.widget--mock.mock-shopify-sidebar .mock-shopify-sidebar__inner {
  background: #EBEBEB !important;
  font: 14px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1A1A1A !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 480px !important;
}
.widget--mock.mock-shopify-sidebar .mock-shopify-sidebar__brandbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 18px !important;
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
}
.widget--mock.mock-shopify-sidebar .mock-shopify-sidebar__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.widget--mock.mock-shopify-sidebar .mock-shopify-sidebar__item {
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  color: #1A1A1A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.widget--mock.mock-shopify-sidebar .mock-shopify-sidebar__item--current { background: #FFFFFF !important; font-weight: 600 !important; }
.widget--mock.mock-shopify-sidebar .mock-shopify-sidebar__count {
  background: #DCDCDC !important;
  border-radius: 10px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  color: #4A4A4A !important;
}
.widget--mock.mock-shopify-sidebar .mock-shopify-sidebar__divider {
  height: 1px !important;
  background: #D6D6D6 !important;
  margin: 6px 14px !important;
}
.widget--mock.mock-shopify-sidebar .mock-shopify-sidebar__group {
  padding: 8px 18px 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
}
.widget--mock.mock-shopify-sidebar .mock-shopify-sidebar__settings {
  margin-top: auto !important;
  padding: 12px 18px !important;
  border-top: 1px solid #D6D6D6 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  background: #FFFFFF !important;
  box-shadow: inset 3px 0 0 0 #1A1A1A !important;
}

/* Settings panel with Customer events highlighted */
.widget--mock.mock-shopify-settings { max-width: 360px !important; }
.widget--mock.mock-shopify-settings .mock-shopify-settings__inner {
  background: #F1F1F1 !important;
  padding: 0 !important;
  font: 14px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1A1A1A !important;
  display: flex !important;
  flex-direction: column !important;
}
.widget--mock.mock-shopify-settings .mock-shopify-settings__head { padding: 16px 18px !important; }
.widget--mock.mock-shopify-settings .mock-shopify-settings__org { margin: 0 !important; font-weight: 700 !important; font-size: 15px !important; }
.widget--mock.mock-shopify-settings .mock-shopify-settings__org-sub { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-shopify-settings .mock-shopify-settings__search {
  margin: 0 18px 12px !important;
  padding: 8px 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #D6D6D6 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #6B7280 !important;
  font-size: 13px !important;
}
.widget--mock.mock-shopify-settings .mock-shopify-settings__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 8px !important;
}
.widget--mock.mock-shopify-settings .mock-shopify-settings__list li {
  padding: 7px 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  color: #1A1A1A !important;
}
.widget--mock.mock-shopify-settings .mock-shopify-settings__item--target { background: #E1E1E1 !important; font-weight: 600 !important; }
.widget--mock.mock-shopify-settings .mock-shopify-settings__store {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-top: 1px solid #DDDDDD !important;
  margin-top: 8px !important;
}
.widget--mock.mock-shopify-settings .mock-shopify-settings__store-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: #5BC0BE !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.widget--mock.mock-shopify-settings .mock-shopify-settings__store-name { margin: 0 !important; font-weight: 700 !important; font-size: 14px !important; }
.widget--mock.mock-shopify-settings .mock-shopify-settings__store-sub { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; }

/* Customer events page */
.widget--mock.mock-shopify-events { max-width: 760px !important; }
.widget--mock.mock-shopify-events .mock-shopify-events__inner {
  background: #F1F1F1 !important;
  padding: 22px 26px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  font: 14px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1A1A1A !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__actions { display: flex !important; gap: 8px !important; }
.widget--mock.mock-shopify-events .mock-shopify-events__btn {
  padding: 7px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #D6D6D6 !important;
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  cursor: default !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__btn--primary {
  background: #1A1A1A !important;
  border-color: #1A1A1A !important;
  color: #FFFFFF !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__btn--target {
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.18) !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__panel {
  background: #FFFFFF !important;
  border: 1px solid #E1E1E1 !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__panel-title { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; border-bottom: 1px dotted #B5B5B5 !important; padding-bottom: 6px !important; display: inline-block !important; align-self: flex-start !important; }
.widget--mock.mock-shopify-events .mock-shopify-events__tabs { display: flex !important; gap: 6px !important; }
.widget--mock.mock-shopify-events .mock-shopify-events__tab {
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__tab--active { background: #E1E1E1 !important; }
.widget--mock.mock-shopify-events .mock-shopify-events__cols {
  display: grid !important;
  grid-template-columns: 1fr 140px !important;
  padding: 8px 4px !important;
  border-top: 1px solid #ECECEC !important;
  border-bottom: 1px solid #ECECEC !important;
  font-size: 13px !important;
  color: #6B7280 !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__row {
  display: grid !important;
  grid-template-columns: 1fr 140px !important;
  align-items: center !important;
  padding: 10px 4px !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__row-name { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; }
.widget--mock.mock-shopify-events .mock-shopify-events__row-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: #F0F0F0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6B7280 !important;
}
.widget--mock.mock-shopify-events .mock-shopify-events__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  width: fit-content !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  background: #C6F2D2 !important;
  color: #1B5E20 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Add custom pixel modal */
.widget--mock.mock-shopify-add { max-width: 560px !important; }
.widget--mock.mock-shopify-add .mock-shopify-add__inner {
  background: #FFFFFF !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  font: 14px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1A1A1A !important;
}
.widget--mock.mock-shopify-add .mock-shopify-add__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  background: #F4F4F4 !important;
  border-bottom: 1px solid #E1E1E1 !important;
}
.widget--mock.mock-shopify-add .mock-shopify-add__title { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; }
.widget--mock.mock-shopify-add .mock-shopify-add__x {
  background: transparent !important;
  border: none !important;
  color: #6B7280 !important;
  padding: 4px !important;
  cursor: default !important;
}
.widget--mock.mock-shopify-add .mock-shopify-add__notice {
  margin: 16px 20px 0 !important;
  padding: 12px 14px !important;
  background: #EDF4FF !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: #1A1A1A !important;
  line-height: 1.45 !important;
}
.widget--mock.mock-shopify-add .mock-shopify-add__notice svg { color: #1F5BD3 !important; flex-shrink: 0 !important; margin-top: 2px !important; }
.widget--mock.mock-shopify-add .mock-shopify-add__field { padding: 16px 20px 4px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-shopify-add .mock-shopify-add__label { font-size: 13px !important; font-weight: 600 !important; }
.widget--mock.mock-shopify-add .mock-shopify-add__input {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #F4F4F4 !important;
  border: 2px solid #1F5BD3 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #1A1A1A !important;
}
.widget--mock.mock-shopify-add .mock-shopify-add__count { color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-shopify-add .mock-shopify-add__terms {
  padding: 12px 20px 16px !important;
  font-size: 12px !important;
  color: #6B7280 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
.widget--mock.mock-shopify-add .mock-shopify-add__actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  border-top: 1px solid #E1E1E1 !important;
}
.widget--mock.mock-shopify-add .mock-shopify-add__btn {
  padding: 7px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #D6D6D6 !important;
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  cursor: default !important;
}
.widget--mock.mock-shopify-add .mock-shopify-add__btn--primary { background: #1A1A1A !important; border-color: #1A1A1A !important; color: #FFFFFF !important; }

/* Pixel editor with code area */
.widget--mock.mock-shopify-editor { max-width: 760px !important; }
.widget--mock.mock-shopify-editor .mock-shopify-editor__inner {
  background: #F1F1F1 !important;
  padding: 18px 22px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  font: 14px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1A1A1A !important;
}
.widget--mock.mock-shopify-editor .mock-shopify-editor__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.widget--mock.mock-shopify-editor .mock-shopify-editor__crumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}
.widget--mock.mock-shopify-editor .mock-shopify-editor__crumb strong { font-weight: 700 !important; }
.widget--mock.mock-shopify-editor .mock-shopify-editor__actions { display: flex !important; gap: 8px !important; }
.widget--mock.mock-shopify-editor .mock-shopify-editor__btn {
  padding: 7px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #D6D6D6 !important;
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  cursor: default !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.widget--mock.mock-shopify-editor .mock-shopify-editor__btn--primary { background: #1A1A1A !important; border-color: #1A1A1A !important; color: #FFFFFF !important; }
.widget--mock.mock-shopify-editor .mock-shopify-editor__btn--target { box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.18) !important; }
.widget--mock.mock-shopify-editor .mock-shopify-editor__privacy {
  background: #FFFFFF !important;
  border: 1px solid #E1E1E1 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
}
.widget--mock.mock-shopify-editor .mock-shopify-editor__privacy-title { margin: 0 0 8px !important; font-weight: 700 !important; }
.widget--mock.mock-shopify-editor .mock-shopify-editor__privacy-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-top: 1px solid #ECECEC !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.widget--mock.mock-shopify-editor .mock-shopify-editor__code {
  background: #FFFFFF !important;
  border: 1px solid #E1E1E1 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
}
.widget--mock.mock-shopify-editor .mock-shopify-editor__code-title { margin: 0 0 8px !important; font-weight: 700 !important; }
.widget--mock.mock-shopify-editor .mock-shopify-editor__pre {
  background: #FAFAFA !important;
  border: 1px solid #ECECEC !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: #1A1A1A !important;
  overflow-x: auto !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  white-space: pre !important;
}
.widget--mock.mock-shopify-editor .mock-shopify-editor__line { display: inline-block !important; color: #9CA3AF !important; padding-right: 12px !important; user-select: none !important; }

/* TM dashboard: Shopify install card */
.widget--mock.mock-tm-shopify-install { max-width: 760px !important; }
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__inner {
  padding: 22px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__crumb { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__crumb strong { color: #0F0F0F !important; font-weight: 600 !important; }
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__mark {
  padding: 6px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__title { font-size: 16px !important; font-weight: 600 !important; margin: 4px 0 0 !important; }
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__sub { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__codelabel {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #6B7280 !important;
  margin: 6px 0 0 !important;
}
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__codebox {
  background: #0E1116 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__codebar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: #C5C9D2 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__copy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #C5C9D2 !important;
  font: 500 12px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__pre {
  margin: 0 !important;
  padding: 14px 16px !important;
  color: #C5C9D2 !important;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  line-height: 1.6 !important;
  white-space: pre !important;
  overflow-x: auto !important;
}
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__caption { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-shopify-install .mock-tm-shopify-install__guide {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #D1D5DB !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}

/* --- GOHIGHLEVEL admin mockups --- */
.widget--mock.mock-ghl { max-width: 760px !important; }

/* Shared sidebar (sites + automation) */
.widget--mock.mock-ghl-sidebar { max-width: 260px !important; }
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__inner {
  background: #FFFFFF !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  font: 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1F2937 !important;
  border-right: 1px solid #E5E7EB !important;
  min-height: 460px !important;
}
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__acct {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #E5E7EB !important;
}
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__acct-logo {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  background: #2233FF !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__acct-name { margin: 0 !important; font-weight: 700 !important; font-size: 13px !important; }
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__acct-sub { margin: 1px 0 0 !important; font-size: 11px !important; color: #6B7280 !important; }
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__search {
  margin: 10px 14px !important;
  padding: 6px 10px !important;
  background: #F3F4F6 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #6B7280 !important;
  font-size: 12px !important;
}
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__kbd {
  margin-left: auto !important;
  padding: 1px 6px !important;
  background: #E5E7EB !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  color: #4B5563 !important;
}
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__list li {
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #1F2937 !important;
  font-weight: 500 !important;
}
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__list li.mock-ghl-sidebar__item--target { background: #1F2937 !important; color: #FFFFFF !important; }
.widget--mock.mock-ghl-sidebar .mock-ghl-sidebar__divider { height: 1px !important; background: #E5E7EB !important; margin: 6px 14px !important; }

/* Funnels list */
.widget--mock.mock-ghl-funnels { max-width: 760px !important; }
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__inner {
  background: #FFFFFF !important;
  padding: 14px 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  font: 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1F2937 !important;
}
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__tabs {
  display: flex !important;
  gap: 16px !important;
  border-bottom: 1px solid #E5E7EB !important;
  padding-bottom: 6px !important;
  font-size: 13px !important;
  color: #4B5563 !important;
  overflow-x: auto !important;
}
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__tab { padding: 4px 0 !important; font-weight: 500 !important; }
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__tab--active { color: #2233FF !important; border-bottom: 2px solid #2233FF !important; padding-bottom: 5px !important; margin-bottom: -7px !important; font-weight: 600 !important; }
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__title { margin: 4px 0 0 !important; font-size: 18px !important; font-weight: 700 !important; }
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__sub { margin: 0 !important; color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__cols {
  display: grid !important;
  grid-template-columns: 1fr 180px !important;
  padding: 8px 12px !important;
  background: #F9FAFB !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  color: #6B7280 !important;
  font-weight: 600 !important;
}
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__row {
  display: grid !important;
  grid-template-columns: 1fr 180px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid #F3F4F6 !important;
  font-size: 13px !important;
  align-items: center !important;
}
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__row--target { background: #EEF2FF !important; border-radius: 6px !important; }
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__name { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: #1F2937 !important; }
.widget--mock.mock-ghl-funnels .mock-ghl-funnels__folder { color: #FBBF24 !important; }

/* Funnel settings tracking */
.widget--mock.mock-ghl-tracking { max-width: 760px !important; }
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__inner {
  background: #F8F9FB !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  font: 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1F2937 !important;
}
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__back { margin: 0 !important; color: #2233FF !important; font-size: 13px !important; font-weight: 600 !important; }
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__title { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; }
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__subtabs {
  display: flex !important;
  gap: 16px !important;
  border-bottom: 1px solid #E5E7EB !important;
  padding-bottom: 4px !important;
  font-size: 13px !important;
  color: #4B5563 !important;
}
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__subtab--active { color: #2233FF !important; border-bottom: 2px solid #2233FF !important; padding-bottom: 5px !important; margin-bottom: -5px !important; font-weight: 600 !important; }
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__panel {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__panel-title { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; }
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__panel-sub { margin: 0 !important; color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__label { font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; }
.widget--mock.mock-ghl-tracking .mock-ghl-tracking__textarea {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  min-height: 70px !important;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: #1F2937 !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
}

/* Create Workflow dropdown */
.widget--mock.mock-ghl-create { max-width: 640px !important; }
.widget--mock.mock-ghl-create .mock-ghl-create__inner {
  background: #FFFFFF !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  font: 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1F2937 !important;
  position: relative !important;
}
.widget--mock.mock-ghl-create .mock-ghl-create__btns {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}
.widget--mock.mock-ghl-create .mock-ghl-create__btn {
  padding: 7px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #D1D5DB !important;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  cursor: default !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.widget--mock.mock-ghl-create .mock-ghl-create__btn--ai { background: #F5EDFF !important; color: #6B21A8 !important; border-color: #C8A2F0 !important; }
.widget--mock.mock-ghl-create .mock-ghl-create__btn--primary { background: #2233FF !important; border-color: #1A2BD9 !important; color: #FFFFFF !important; }
.widget--mock.mock-ghl-create .mock-ghl-create__menu {
  align-self: flex-end !important;
  width: 270px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.18) !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.widget--mock.mock-ghl-create .mock-ghl-create__item { padding: 8px 12px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 500 !important; }
.widget--mock.mock-ghl-create .mock-ghl-create__item--target { background: #EEF2FF !important; color: #2233FF !important; font-weight: 600 !important; }

/* Trigger / Action panels (shared layout) */
.widget--mock.mock-ghl-trigger,
.widget--mock.mock-ghl-action { max-width: 540px !important; }
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__inner,
.widget--mock.mock-ghl-action .mock-ghl-action__inner {
  background: #FFFFFF !important;
  padding: 18px 22px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  font: 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1F2937 !important;
}
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__head,
.widget--mock.mock-ghl-action .mock-ghl-action__head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  border-bottom: 1px solid #E5E7EB !important;
  padding-bottom: 12px !important;
}
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__icon,
.widget--mock.mock-ghl-action .mock-ghl-action__icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: #EEF2FF !important;
  color: #2233FF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__title,
.widget--mock.mock-ghl-action .mock-ghl-action__title { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; }
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__sub,
.widget--mock.mock-ghl-action .mock-ghl-action__sub { margin: 2px 0 0 !important; color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__label,
.widget--mock.mock-ghl-action .mock-ghl-action__label {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #6B7280 !important;
}
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__select,
.widget--mock.mock-ghl-action .mock-ghl-action__select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__input,
.widget--mock.mock-ghl-action .mock-ghl-action__input {
  padding: 10px 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #1F2937 !important;
}
.widget--mock.mock-ghl-action .mock-ghl-action__input--url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 12px !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__actions,
.widget--mock.mock-ghl-action .mock-ghl-action__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid #E5E7EB !important;
  padding-top: 12px !important;
}
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__delete,
.widget--mock.mock-ghl-action .mock-ghl-action__delete {
  padding: 7px 14px !important;
  border-radius: 6px !important;
  border: 1px solid #FCA5A5 !important;
  background: #FFFFFF !important;
  color: #DC2626 !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  cursor: default !important;
}
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__actions-right,
.widget--mock.mock-ghl-action .mock-ghl-action__actions-right { display: flex !important; gap: 8px !important; }
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__cancel,
.widget--mock.mock-ghl-action .mock-ghl-action__cancel {
  padding: 7px 14px !important;
  border-radius: 6px !important;
  border: 1px solid #D1D5DB !important;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  cursor: default !important;
}
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__save,
.widget--mock.mock-ghl-action .mock-ghl-action__save {
  padding: 7px 14px !important;
  border-radius: 6px !important;
  border: 1px solid #1A2BD9 !important;
  background: #2233FF !important;
  color: #FFFFFF !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  cursor: default !important;
}
.widget--mock.mock-ghl-trigger .mock-ghl-trigger__save--target,
.widget--mock.mock-ghl-action .mock-ghl-action__save--target { box-shadow: 0 0 0 3px rgba(34, 51, 255, 0.25) !important; }

/* Publish toggle */
.widget--mock.mock-ghl-publish { max-width: 540px !important; }
.widget--mock.mock-ghl-publish .mock-ghl-publish__inner {
  background: #FFFFFF !important;
  padding: 14px 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  font: 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1F2937 !important;
}
.widget--mock.mock-ghl-publish .mock-ghl-publish__bar { display: flex !important; align-items: center !important; gap: 10px !important; justify-content: flex-end !important; }
.widget--mock.mock-ghl-publish .mock-ghl-publish__avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #FBBF24 !important;
  color: #1F2937 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.widget--mock.mock-ghl-publish .mock-ghl-publish__iconbtn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  border: 1px solid #D1D5DB !important;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: default !important;
}
.widget--mock.mock-ghl-publish .mock-ghl-publish__save {
  padding: 7px 18px !important;
  border-radius: 6px !important;
  border: 1px solid #1A2BD9 !important;
  background: #2233FF !important;
  color: #FFFFFF !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  cursor: default !important;
}
.widget--mock.mock-ghl-publish .mock-ghl-publish__row { display: flex !important; align-items: center !important; gap: 18px !important; border-top: 1px solid #E5E7EB !important; padding-top: 12px !important; }
.widget--mock.mock-ghl-publish .mock-ghl-publish__test {
  padding: 7px 14px !important;
  border-radius: 6px !important;
  border: none !important;
  background: #EEF2FF !important;
  color: #2233FF !important;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  cursor: default !important;
}
.widget--mock.mock-ghl-publish .mock-ghl-publish__toggle-wrap { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-left: auto !important; }
.widget--mock.mock-ghl-publish .mock-ghl-publish__toggle-label { font-weight: 700 !important; font-size: 14px !important; }
.widget--mock.mock-ghl-publish .mock-ghl-publish__toggle {
  width: 42px !important;
  height: 22px !important;
  background: #2233FF !important;
  border-radius: 999px !important;
  position: relative !important;
}
.widget--mock.mock-ghl-publish .mock-ghl-publish__toggle-dot {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 18px !important;
  height: 18px !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
}
.widget--mock.mock-ghl-publish .mock-ghl-publish__toggle-dot--target { box-shadow: 0 0 0 3px rgba(34, 51, 255, 0.25) !important; }

/* GHL workflow canvas */
.widget--mock.mock-ghl-canvas { max-width: 640px !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__inner {
  background: #FFFFFF !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  font: 13px -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
  color: #1F2937 !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid #E5E7EB !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__name { font-weight: 600 !important; font-size: 14px !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__topbar-right { display: inline-flex !important; align-items: center !important; gap: 12px !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__test {
  padding: 5px 12px !important;
  background: #EEF2FF !important;
  color: #2233FF !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__draft-label { font-weight: 700 !important; font-size: 13px !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__toggle {
  width: 36px !important;
  height: 20px !important;
  background: #2233FF !important;
  border-radius: 999px !important;
  position: relative !important;
  display: inline-block !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__toggle-dot {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 16px !important;
  height: 16px !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 28px 18px 32px !important;
  background-image: linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  background-color: #F8F9FB !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__row { display: flex !important; align-items: stretch !important; gap: 18px !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  width: 220px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 4px 10px -6px rgba(15,23,42,0.12) !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__card--single { width: 260px !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__card-head { display: flex !important; align-items: center !important; gap: 10px !important; font-weight: 600 !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__card-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__card-icon--blue { background: #EEF2FF !important; color: #2233FF !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__more { margin-left: auto !important; color: #9CA3AF !important; letter-spacing: 1px !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__card-row { font-size: 12px !important; color: #6B7280 !important; padding: 6px 0 !important; border-top: 1px solid #F1F2F4 !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__card-foot {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 12px !important;
  color: #9CA3AF !important;
  border-top: 1px solid #F1F2F4 !important;
  padding-top: 8px !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__stats { margin-left: auto !important; color: #2233FF !important; font-weight: 600 !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__add {
  width: 220px !important;
  align-self: center !important;
  border: 1.5px dashed #C7D2FE !important;
  border-radius: 10px !important;
  padding: 24px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #2233FF !important;
  font-weight: 600 !important;
  background: rgba(238, 242, 255, 0.4) !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__add-plus { display: inline-flex !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #EEF2FF !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__connector { width: 1.5px !important; height: 24px !important; background: #CBD5E1 !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__connector--short { height: 16px !important; }
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__node {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6B7280 !important;
  font-weight: 700 !important;
}
.widget--mock.mock-ghl-canvas .mock-ghl-canvas__end {
  padding: 4px 18px !important;
  background: #CBD5E1 !important;
  border-radius: 999px !important;
  color: #1F2937 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}

/* --- TM dashboard: GoHighLevel install card --- */
.widget--mock.mock-tm-ghl-install { max-width: 760px !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__inner {
  padding: 22px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__crumb { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__crumb strong { color: #0F0F0F !important; font-weight: 600 !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__mark { padding: 6px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__title { font-size: 16px !important; font-weight: 600 !important; margin: 4px 0 0 !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__sub { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__codelabel { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #6B7280 !important; margin: 6px 0 0 !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__codebox { background: #0E1116 !important; border-radius: 10px !important; overflow: hidden !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__codebar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 14px !important; background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; color: #C5C9D2 !important; font-size: 12px !important; font-weight: 600 !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__copy { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; border-radius: 6px !important; border: 1px solid rgba(255,255,255,0.15) !important; background: rgba(255,255,255,0.04) !important; color: #C5C9D2 !important; font: 500 12px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__pre { margin: 0 !important; padding: 14px 16px !important; color: #C5C9D2 !important; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; line-height: 1.6 !important; white-space: pre-wrap !important; word-break: break-all !important; overflow-x: auto !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__caption { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__panel {
  background: #FAFBFC !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__panel-title { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__info { color: #9CA3AF !important; margin-left: 4px !important; font-weight: 400 !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__row { display: flex !important; align-items: stretch !important; gap: 0 !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__input {
  flex: 1 !important;
  padding: 10px 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 14px !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__save {
  padding: 0 18px !important;
  background: #2233FF !important;
  border: 1px solid #1A2BD9 !important;
  border-radius: 0 8px 8px 0 !important;
  color: #FFFFFF !important;
  font: 600 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__checkrow {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  border-top: 1px solid #E5E7EB !important;
  padding-top: 12px !important;
}
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__checkbox {
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  display: inline-block !important;
}
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__check-title { margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__check-sub { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__accordion {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: #FAFBFC !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__guide {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #D1D5DB !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}

/* --- TM dashboard: GoHighLevel webhook URL card (accordion expanded) --- */
.widget--mock.mock-tm-ghl-webhook { max-width: 760px !important; }
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__inner {
  padding: 22px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__accordion {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: #FAFBFC !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__copy { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; line-height: 1.55 !important; }
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__copy strong { color: #0F0F0F !important; font-weight: 600 !important; }
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__codelabel { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #6B7280 !important; margin: 4px 0 0 !important; }
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__codebox { background: #0E1116 !important; border-radius: 10px !important; overflow: hidden !important; }
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__codebar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 14px !important; background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; color: #C5C9D2 !important; font-size: 12px !important; font-weight: 600 !important; }
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__copybtn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; border-radius: 6px !important; border: 1px solid rgba(255,255,255,0.15) !important; background: rgba(255,255,255,0.04) !important; color: #C5C9D2 !important; font: 500 12px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__pre { margin: 0 !important; padding: 14px 16px !important; color: #C5C9D2 !important; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; line-height: 1.6 !important; white-space: pre-wrap !important; word-break: break-all !important; overflow-x: auto !important; }
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__caption { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-ghl-webhook .mock-tm-ghl-webhook__caption strong { color: #0F0F0F !important; font-weight: 600 !important; }

/* UTM Builder form */
.widget-utm {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-3);
  align-items: center;
}
@media (max-width: 600px) {
  .widget-utm { grid-template-columns: 1fr; }
}
.widget-utm label { font-size: var(--font-size-sm); color: var(--color-text-muted, #b5bbcf); }
.widget-utm input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(127,127,127,0.25);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-sm);
}
.widget-utm__output {
  grid-column: 1 / -1;
  padding: var(--space-3);
  border: 1px dashed rgba(127,127,127,0.3);
  border-radius: 6px;
  background: rgba(127,127,127,0.05);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-xs);
  word-break: break-all;
}

/* ============================================================
   ClickFunnels install widgets - shared with tm-cf-install and
   the cf2-* / cf1-* mocks on /platform-installs/clickfunnels/.
   ============================================================ */

/* TM dashboard: ClickFunnels install card */
.widget--mock.mock-tm-cf-install { max-width: 760px !important; }
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__inner {
  padding: 22px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__crumb { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__crumb strong { color: #0F0F0F !important; font-weight: 600 !important; }
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__mark {
  padding: 6px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__title { font-size: 16px !important; font-weight: 600 !important; margin: 4px 0 0 !important; }
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__sub { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #6B7280 !important;
  margin: 6px 0 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__codebox {
  background: #0E1116 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__codebox--focus {
  box-shadow: 0 0 0 3px rgba(34, 51, 255, 0.35), 0 12px 28px -12px rgba(34, 51, 255, 0.55) !important;
  outline: 2px solid #2233FF !important;
  outline-offset: 0 !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__codebox--dim,
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__panel--dim {
  opacity: 0.45 !important;
  filter: grayscale(0.25) !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__panel--focus {
  border-color: #2233FF !important;
  box-shadow: 0 0 0 3px rgba(34, 51, 255, 0.35), 0 12px 28px -12px rgba(34, 51, 255, 0.55) !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #2233FF !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-right: 6px !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__codebar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: #C5C9D2 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__copy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #C5C9D2 !important;
  font: 500 12px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__pre {
  margin: 0 !important;
  padding: 14px 16px !important;
  color: #C5C9D2 !important;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__caption { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__panel {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__paneltitle {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__info {
  display: inline-flex !important;
  width: 14px !important;
  height: 14px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid #9CA3AF !important;
  font-size: 10px !important;
  color: #6B7280 !important;
  font-style: italic !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__row {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__field {
  flex: 1 !important;
  padding: 8px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #F9FAFB !important;
  font: 13px var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__field--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 12px !important;
  color: #1F2937 !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__save {
  padding: 7px 16px !important;
  border: 1px solid #2233FF !important;
  border-radius: 6px !important;
  background: #2233FF !important;
  color: #FFFFFF !important;
  font: 600 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__copy--solo {
  align-self: center !important;
  border: 1px solid #D1D5DB !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__panelcaption { font-size: 12px !important; color: #6B7280 !important; margin: 0 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__panelcaption code { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace !important; background: #F3F4F6 !important; padding: 1px 5px !important; border-radius: 4px !important; color: #1F2937 !important; }
.widget--mock.mock-tm-cf-install .mock-tm-cf-install__guide {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}

/* CF 2.0: Workspace Settings menu */
.widget--mock.mock-cf2-menu { max-width: 320px !important; }
.widget--mock.mock-cf2-menu .mock-cf2-menu__inner {
  background: #1B1247 !important;
  padding: 18px 16px !important;
  color: #E0E1F4 !important;
  font-family: var(--font-family-base, system-ui) !important;
}
.widget--mock.mock-cf2-menu .mock-cf2-menu__head { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 14px !important; }
.widget--mock.mock-cf2-menu .mock-cf2-menu__back { color: #BCBEE8 !important; font-size: 18px !important; }
.widget--mock.mock-cf2-menu .mock-cf2-menu__avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: #58D688 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.widget--mock.mock-cf2-menu .mock-cf2-menu__crumb { margin: 0 !important; font-size: 11px !important; color: #BCBEE8 !important; }
.widget--mock.mock-cf2-menu .mock-cf2-menu__workspace { margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #FFFFFF !important; }
.widget--mock.mock-cf2-menu .mock-cf2-menu__title { margin: 0 0 10px !important; font-size: 16px !important; font-weight: 700 !important; color: #FFFFFF !important; }
.widget--mock.mock-cf2-menu .mock-cf2-menu__list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-cf2-menu .mock-cf2-menu__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #C9CBEC !important;
}
.widget--mock.mock-cf2-menu .mock-cf2-menu__item--active {
  position: relative !important;
  background: rgba(249, 115, 22, 0.18) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1.5px #F97316 !important;
}
.widget--mock.mock-cf2-menu .mock-cf2-menu__item--active svg { color: #FBBF24 !important; }
.widget--mock.mock-cf2-menu .mock-cf2-menu__pulse {
  position: absolute !important;
  inset: -3px !important;
  border-radius: 8px !important;
  border: 2px solid #F97316 !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* CF 2.0: Funnel Settings panel */
.widget--mock.mock-cf2-funnel-settings { max-width: 700px !important; }
.widget--mock.mock-cf2-funnel-settings .mock-cf2-funnel-settings__inner {
  background: #FFFFFF !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #1F2937 !important;
}
.widget--mock.mock-cf2-funnel-settings .mock-cf2-funnel-settings__title { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; }
.widget--mock.mock-cf2-funnel-settings .mock-cf2-funnel-settings__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-cf2-funnel-settings .mock-cf2-funnel-settings__field--highlight {
  background: #FFF7E6 !important;
  border: 1px solid #FCD34D !important;
  border-radius: 8px !important;
  padding: 12px !important;
}
.widget--mock.mock-cf2-funnel-settings .mock-cf2-funnel-settings__label { font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; }
.widget--mock.mock-cf2-funnel-settings .mock-cf2-funnel-settings__input {
  padding: 8px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  font-size: 13px !important;
}
.widget--mock.mock-cf2-funnel-settings .mock-cf2-funnel-settings__input--muted { color: #6B7280 !important; }
.widget--mock.mock-cf2-funnel-settings .mock-cf2-funnel-settings__codebox {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  min-height: 60px !important;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: #1F2937 !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
}
.widget--mock.mock-cf2-funnel-settings .mock-cf2-funnel-settings__codebox--empty { min-height: 40px !important; }
.widget--mock.mock-cf2-funnel-settings .mock-cf2-funnel-settings__hint { font-size: 12px !important; color: #6B7280 !important; margin: 0 !important; }

/* CF 2.0: Webhook endpoint form */
.widget--mock.mock-cf2-endpoint { max-width: 720px !important; }
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__inner {
  background: #FFFFFF !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #1F2937 !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__crumb {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: #6B7280 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__crumb-current { color: #2233FF !important; font-weight: 700 !important; }
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__title { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; }
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__panel {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__paneltitle { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; }
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__paneltitle--sub { font-size: 13px !important; }
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__label { font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; }
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__input {
  padding: 8px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  font-size: 13px !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__input--code {
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: #1F2937 !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 8px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  min-height: 38px !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  background: #E5E7EB !important;
  color: #1F2937 !important;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__chip span { color: #6B7280 !important; }
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__info {
  display: inline-flex !important;
  width: 14px !important;
  height: 14px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid #9CA3AF !important;
  font-size: 10px !important;
  color: #6B7280 !important;
  font-style: italic !important;
  margin-left: 6px !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__subpanel {
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: #FAFBFD !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__actions { display: flex !important; gap: 10px !important; }
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__btn {
  padding: 8px 16px !important;
  border-radius: 6px !important;
  border: 1px solid #D1D5DB !important;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  font: 600 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__btn--primary {
  background: #2233FF !important;
  border-color: #1A2BD9 !important;
  color: #FFFFFF !important;
}

/* CF Classic: shared topbar */
.widget--mock.mock-cf1 .mock-cf1-funnels__topbar,
.widget--mock.mock-cf1 .mock-cf1-settings__topbar,
.widget--mock.mock-cf1 .mock-cf1-active__topbar {
  background: #2B71D0 !important;
  color: #FFFFFF !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font: 600 13px var(--font-family-base, system-ui) !important;
}

/* CF Classic: Funnels list */
.widget--mock.mock-cf1-funnels { max-width: 720px !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__inner { background: #FFFFFF !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__topbar { background: #0F172A !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__brand { font-weight: 700 !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__navitem { font-weight: 400 !important; opacity: 0.8 !important; font-size: 12px !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__body { padding: 18px 20px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; color: #1F2937 !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__title { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__tabs { display: flex !important; gap: 18px !important; border-bottom: 1px solid #E5E7EB !important; font-size: 13px !important; color: #4B5563 !important; padding-bottom: 4px !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__tab--active { color: #2B71D0 !important; border-bottom: 2px solid #2B71D0 !important; padding-bottom: 5px !important; margin-bottom: -5px !important; font-weight: 600 !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__header,
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__row {
  display: grid !important;
  grid-template-columns: 90px 1fr 60px 140px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
}
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__header { color: #6B7280 !important; font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__row { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; font-size: 13px !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__row--target { border-color: #2B71D0 !important; box-shadow: 0 0 0 2px rgba(43, 113, 208, 0.15) !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__badge { background: #DBE6F8 !important; color: #1E3A8A !important; padding: 3px 8px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 700 !important; text-align: center !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__name { color: #2B71D0 !important; font-weight: 600 !important; }
.widget--mock.mock-cf1-funnels .mock-cf1-funnels__muted { color: #6B7280 !important; }

/* CF Classic: Funnel Settings */
.widget--mock.mock-cf1-settings { max-width: 760px !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__inner { background: #FFFFFF !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__funnel { font-size: 14px !important; letter-spacing: 0.03em !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__tabs { display: flex !important; gap: 18px !important; font-size: 12px !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__tabs span { padding: 6px 4px !important; opacity: 0.85 !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__tab--active { background: rgba(255,255,255,0.12) !important; opacity: 1 !important; border-radius: 4px !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__body { padding: 18px 22px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; color: #1F2937 !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__title { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__field--wide { grid-column: 1 / -1 !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__field--highlight { background: #FFF7E6 !important; border: 1px solid #FCD34D !important; border-radius: 8px !important; padding: 12px !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; color: #2B71D0 !important; margin: 0 !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__input { padding: 8px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; font-size: 13px !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__input--muted { color: #6B7280 !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__textarea { padding: 10px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; min-height: 70px !important; white-space: pre-wrap !important; word-break: break-all !important; }
.widget--mock.mock-cf1-settings .mock-cf1-settings__hint { font-size: 12px !important; color: #6B7280 !important; margin: 0 !important; }

/* CF Classic: Webhooks block */
.widget--mock.mock-cf1-wh-block { max-width: 760px !important; }
.widget--mock.mock-cf1-wh-block .mock-cf1-wh-block__inner { background: #FFFFFF !important; padding: 22px 24px !important; }
.widget--mock.mock-cf1-wh-block .mock-cf1-wh-block__row { display: flex !important; gap: 20px !important; align-items: flex-start !important; color: #1F2937 !important; }
.widget--mock.mock-cf1-wh-block .mock-cf1-wh-block__logo { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; flex-shrink: 0 !important; }
.widget--mock.mock-cf1-wh-block .mock-cf1-wh-block__logotext { font: 700 11px var(--font-family-base, system-ui) !important; color: #B72659 !important; letter-spacing: 0.05em !important; }
.widget--mock.mock-cf1-wh-block .mock-cf1-wh-block__copy { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-cf1-wh-block .mock-cf1-wh-block__title { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; }
.widget--mock.mock-cf1-wh-block .mock-cf1-wh-block__sub { margin: 0 !important; font-size: 13px !important; color: #4B5563 !important; line-height: 1.5 !important; }
.widget--mock.mock-cf1-wh-block .mock-cf1-wh-block__btn {
  align-self: flex-start !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  border: 1px solid #1F2937 !important;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  font: 700 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-cf1-wh-block .mock-cf1-wh-block__btn--target {
  position: relative !important;
  border-color: #F97316 !important;
  background: #FFF7ED !important;
  color: #9A3412 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -8px rgba(249, 115, 22, 0.5) !important;
}
.widget--mock.mock-cf1-wh-block .mock-cf1-wh-block__pulse {
  position: absolute !important;
  inset: -5px !important;
  border-radius: 10px !important;
  border: 2px solid #F97316 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* CF Classic: Active Funnel Webhooks list */
.widget--mock.mock-cf1-active { max-width: 760px !important; }
.widget--mock.mock-cf1-active .mock-cf1-active__inner { background: #FFFFFF !important; }
.widget--mock.mock-cf1-active .mock-cf1-active__funnel { font-size: 14px !important; }
.widget--mock.mock-cf1-active .mock-cf1-active__tabs { display: flex !important; gap: 18px !important; font-size: 12px !important; }
.widget--mock.mock-cf1-active .mock-cf1-active__tabs span { opacity: 0.85 !important; }
.widget--mock.mock-cf1-active .mock-cf1-active__tab--active { opacity: 1 !important; font-weight: 700 !important; }
.widget--mock.mock-cf1-active .mock-cf1-active__body { padding: 18px 22px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; color: #1F2937 !important; }
.widget--mock.mock-cf1-active .mock-cf1-active__head { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-cf1-active .mock-cf1-active__back { margin: 0 !important; color: #2B71D0 !important; font-weight: 600 !important; font-size: 13px !important; }
.widget--mock.mock-cf1-active .mock-cf1-active__new {
  padding: 8px 14px !important;
  border-radius: 6px !important;
  border: 1px solid #2B71D0 !important;
  background: #2B71D0 !important;
  color: #FFFFFF !important;
  font: 700 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-cf1-active .mock-cf1-active__new--target {
  position: relative !important;
  border-color: #EA580C !important;
  background: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -8px rgba(249, 115, 22, 0.5) !important;
}
.widget--mock.mock-cf1-active .mock-cf1-active__pulse {
  position: absolute !important;
  inset: -5px !important;
  border-radius: 10px !important;
  border: 2px solid #F97316 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}
.widget--mock.mock-cf1-active .mock-cf1-active__title { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; }
.widget--mock.mock-cf1-active .mock-cf1-active__empty { margin: 0 !important; padding: 16px !important; border: 1px dashed #D1D5DB !important; border-radius: 8px !important; background: #F9FAFB !important; color: #6B7280 !important; font-size: 13px !important; text-align: center !important; }

/* CF Classic: New Funnel Webhook form */
.widget--mock.mock-cf1-new { max-width: 640px !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__inner { background: #FFFFFF !important; padding: 22px 24px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; color: #1F2937 !important; font-family: var(--font-family-base, system-ui) !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__title { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__help { margin: 0 !important; font-size: 13px !important; color: #6B7280 !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__label { font-size: 13px !important; font-weight: 700 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #2B71D0 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.widget--mock.mock-cf1-new .mock-cf1-new__field--focus {
  padding: 8px 10px !important;
  margin: -6px -10px !important;
  border-radius: 8px !important;
  background: rgba(249, 115, 22, 0.06) !important;
  box-shadow: inset 0 0 0 1.5px rgba(249, 115, 22, 0.35) !important;
}
.widget--mock.mock-cf1-new .mock-cf1-new__pastehint { font-size: 12px !important; color: #C2410C !important; font-weight: 600 !important; margin: 4px 0 0 !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__input { padding: 9px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; font-size: 13px !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__input--code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; overflow-x: auto !important; white-space: nowrap !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__select { padding: 8px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; min-height: 38px !important; display: flex !important; align-items: center !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__select--plain { font-size: 13px !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 3px 10px !important; border-radius: 4px !important; background: #E5E7EB !important; color: #1F2937 !important; font-size: 12px !important; font-weight: 600 !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__chip span { color: #6B7280 !important; font-weight: 400 !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__hint { font-size: 12px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__hint code { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace !important; background: #F3F4F6 !important; padding: 1px 5px !important; border-radius: 4px !important; color: #1F2937 !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__actions { display: flex !important; justify-content: flex-end !important; }
.widget--mock.mock-cf1-new .mock-cf1-new__btn {
  padding: 9px 18px !important;
  border-radius: 6px !important;
  border: 1px solid #2B71D0 !important;
  background: #2B71D0 !important;
  color: #FFFFFF !important;
  font: 700 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}

/* CF 2.0: Sidebar + Funnels list (combined nav + table) */
.widget--mock.mock-cf2-funnels { max-width: 780px !important; }
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__layout {
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
}
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__sidebar {
  background: #1B1247 !important;
  padding: 18px 14px !important;
  color: #C9CBEC !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__brand {
  margin: 0 !important;
  font: 700 14px var(--font-family-base, system-ui) !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__navlist { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__navitem {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #C9CBEC !important;
}
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__navitem--active {
  background: #2D2370 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px rgba(34, 51, 255, 0.45) !important;
}
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__main {
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  color: #1F2937 !important;
}
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__title { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; }
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__tabs { display: flex !important; gap: 14px !important; border-bottom: 1px solid #E5E7EB !important; padding-bottom: 4px !important; }
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__tab { font-size: 13px !important; color: #6B7280 !important; }
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__tab--active { color: #2233FF !important; border-bottom: 2px solid #2233FF !important; padding-bottom: 5px !important; margin-bottom: -5px !important; font-weight: 600 !important; }
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__header {
  display: grid !important;
  grid-template-columns: 1fr 80px 110px !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  color: #6B7280 !important;
  font-weight: 600 !important;
}
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__row {
  display: grid !important;
  grid-template-columns: 40px 1fr 80px 110px !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  background: #FFFFFF !important;
}
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__row--target {
  border-color: #2233FF !important;
  box-shadow: 0 0 0 2px rgba(34, 51, 255, 0.15) !important;
}
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__thumb {
  width: 32px !important;
  height: 24px !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, #F3F4F6 0%, #D1D5DB 100%) !important;
  border: 1px solid #E5E7EB !important;
}
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__name { color: #1F2937 !important; font-weight: 600 !important; }
.widget--mock.mock-cf2-funnels .mock-cf2-funnels__count { color: #4B5563 !important; }

/* CF 2.0: Funnel canvas with gear icon highlight */
.widget--mock.mock-cf2-canvas { max-width: 780px !important; }
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__inner {
  background: #F4F1EE !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #1F2937 !important;
  position: relative !important;
}
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__topbar {
  background: #2D2370 !important;
  color: #E0E1F4 !important;
  padding: 10px 16px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 14px !important;
}
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__funnel { font-weight: 600 !important; font-size: 13px !important; }
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__tabs { display: flex !important; gap: 14px !important; justify-content: center !important; font-size: 12px !important; }
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__tab { padding: 6px 8px !important; color: #BCBEE8 !important; }
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__tab--active { color: #FBBF24 !important; font-weight: 700 !important; border-bottom: 2px solid #FBBF24 !important; padding-bottom: 4px !important; }
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__actions { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__iconbtn {
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: #E0E1F4 !important;
  font-size: 12px !important;
}
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__gear {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.55), 0 8px 20px -6px rgba(249, 115, 22, 0.6) !important;
}
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__gear-pulse {
  position: absolute !important;
  inset: -6px !important;
  border-radius: 12px !important;
  border: 2px solid #F97316 !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__body {
  padding: 22px 16px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__node {
  width: 240px !important;
  max-width: 100% !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  text-align: center !important;
  box-shadow: 0 4px 10px -6px rgba(15, 23, 42, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__node--page { padding: 12px 14px !important; }
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__nodelabel { font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__nodetitle { font-weight: 700 !important; font-size: 14px !important; }
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__nodepath { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #6B7280 !important; }
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__connector {
  width: 2px !important;
  height: 18px !important;
  background: #C7C2D8 !important;
  display: block !important;
}
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__pointer {
  position: absolute !important;
  top: 14px !important;
  right: 80px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #FFF7ED !important;
  border: 1px solid #F97316 !important;
  color: #C2410C !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font: 700 11px var(--font-family-base, system-ui) !important;
  white-space: nowrap !important;
}
.widget--mock.mock-cf2-canvas .mock-cf2-canvas__pointer-label { line-height: 1 !important; }
@media (max-width: 540px) {
  .widget--mock.mock-cf2-canvas .mock-cf2-canvas__pointer { right: 12px !important; top: auto !important; bottom: 12px !important; }
  .widget--mock.mock-cf2-canvas .mock-cf2-canvas__topbar { grid-template-columns: 1fr auto !important; }
  .widget--mock.mock-cf2-canvas .mock-cf2-canvas__tabs { grid-column: 1 / -1 !important; justify-content: flex-start !important; flex-wrap: wrap !important; }
}

/* CF 2.0: Left sidebar with Workspace Settings highlighted at the bottom */
.widget--mock.mock-cf2-sb-ws { max-width: 320px !important; }
.widget--mock.mock-cf2-sb-ws .mock-cf2-sb-ws__inner {
  background: #1B1247 !important;
  padding: 18px 14px 16px !important;
  color: #C9CBEC !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-height: 320px !important;
  font-family: var(--font-family-base, system-ui) !important;
}
.widget--mock.mock-cf2-sb-ws .mock-cf2-sb-ws__brand {
  margin: 0 !important;
  font: 700 14px var(--font-family-base, system-ui) !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.widget--mock.mock-cf2-sb-ws .mock-cf2-sb-ws__navlist { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-cf2-sb-ws .mock-cf2-sb-ws__navitem {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #C9CBEC !important;
}
.widget--mock.mock-cf2-sb-ws .mock-cf2-sb-ws__spacer { flex: 1 !important; min-height: 20px !important; }
.widget--mock.mock-cf2-sb-ws .mock-cf2-sb-ws__settings {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  background: rgba(249, 115, 22, 0.18) !important;
  color: #FFFFFF !important;
  font: 700 13px var(--font-family-base, system-ui) !important;
  box-shadow: inset 0 0 0 1.5px #F97316 !important;
  cursor: default !important;
  border: none !important;
  text-align: left !important;
}
.widget--mock.mock-cf2-sb-ws .mock-cf2-sb-ws__settings svg { color: #FBBF24 !important; }
.widget--mock.mock-cf2-sb-ws .mock-cf2-sb-ws__pulse {
  position: absolute !important;
  inset: -4px !important;
  border-radius: 10px !important;
  border: 2px solid #F97316 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* CF 2.0: Webhooks endpoints page with Add new endpoint highlighted */
.widget--mock.mock-cf2-wh-list { max-width: 720px !important; }
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__inner {
  background: #FFFFFF !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #1F2937 !important;
}
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__crumb {
  margin: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
}
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__crumb-current { color: #2233FF !important; font-weight: 700 !important; }
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__title { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; }
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__panel {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__paneltitle { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; }
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__panelsub { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__header {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 12px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
}
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__empty {
  margin: 0 !important;
  padding: 14px !important;
  border: 1px dashed #D1D5DB !important;
  border-radius: 8px !important;
  background: #FAFBFD !important;
  color: #6B7280 !important;
  font-size: 13px !important;
  text-align: center !important;
}
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__empty strong { color: #1F2937 !important; }
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__actions { display: flex !important; gap: 10px !important; align-items: center !important; }
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__add {
  position: relative !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  background: #F97316 !important;
  border: 1px solid #EA580C !important;
  color: #FFFFFF !important;
  font: 700 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25), 0 10px 20px -8px rgba(249, 115, 22, 0.5) !important;
}
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__pulse {
  position: absolute !important;
  inset: -5px !important;
  border-radius: 12px !important;
  border: 2px solid #F97316 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}
.widget--mock.mock-cf2-wh-list .mock-cf2-wh-list__back {
  padding: 9px 16px !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #1F2937 !important;
  font: 600 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}

/* CF 2.0 endpoint form: step badges + URL field focus */
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #2233FF !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__field--focus {
  padding: 8px 10px !important;
  margin: -6px -10px !important;
  border-radius: 8px !important;
  background: rgba(249, 115, 22, 0.06) !important;
  box-shadow: inset 0 0 0 1.5px rgba(249, 115, 22, 0.35) !important;
}
.widget--mock.mock-cf2-endpoint .mock-cf2-endpoint__hint { font-size: 12px !important; color: #C2410C !important; margin: 4px 0 0 !important; font-weight: 600 !important; }

/* TM dashboard: live-sessions counter + tray */
.widget--mock.mock-tm-live { max-width: 820px !important; }
.widget--mock.mock-tm-live .mock-tm-live__inner {
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #1F2937 !important;
}
.widget--mock.mock-tm-live .mock-tm-live__topbar {
  background: #F8F9FB !important;
  border-bottom: 1px solid #E5E7EB !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.widget--mock.mock-tm-live .mock-tm-live__pillbtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 11px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 7px !important;
  font: 500 12px var(--font-family-base, system-ui) !important;
  color: #1F2937 !important;
}
.widget--mock.mock-tm-live .mock-tm-live__topright { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-live .mock-tm-live__counter {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 12px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #10B981 !important;
  border-radius: 7px !important;
  font: 700 12px var(--font-family-base, system-ui) !important;
  color: #065F46 !important;
  cursor: default !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.45), 0 10px 22px -8px rgba(249, 115, 22, 0.55) !important;
}
.widget--mock.mock-tm-live .mock-tm-live__pulse {
  position: absolute !important;
  inset: -5px !important;
  border-radius: 11px !important;
  border: 2px solid #F97316 !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}
.widget--mock.mock-tm-live .mock-tm-live__dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}
.widget--mock.mock-tm-live .mock-tm-live__count { font-size: 13px !important; }
.widget--mock.mock-tm-live .mock-tm-live__iconbtn {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 7px !important;
  color: #4B5563 !important;
}
.widget--mock.mock-tm-live .mock-tm-live__date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 11px !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 7px !important;
  font: 500 12px var(--font-family-base, system-ui) !important;
  color: #1F2937 !important;
}
.widget--mock.mock-tm-live .mock-tm-live__tray {
  background: #FFFFFF !important;
  padding: 16px 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border-top: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.06) !important;
}
.widget--mock.mock-tm-live .mock-tm-live__handle {
  align-self: center !important;
  width: 44px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #D1D5DB !important;
}
.widget--mock.mock-tm-live .mock-tm-live__trayhint {
  margin: 0 !important;
  font: 600 11px var(--font-family-base, system-ui) !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.widget--mock.mock-tm-live .mock-tm-live__row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
}
.widget--mock.mock-tm-live .mock-tm-live__avatar {
  position: relative !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #C7D2FE 0%, #A5B4FC 100%) !important;
  flex-shrink: 0 !important;
}
.widget--mock.mock-tm-live .mock-tm-live__avatar-online {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #10B981 !important;
  box-shadow: 0 0 0 2px #FFFFFF !important;
}
.widget--mock.mock-tm-live .mock-tm-live__name {
  font: 600 13px var(--font-family-base, system-ui) !important;
  color: #1F2937 !important;
  margin-right: 4px !important;
}
.widget--mock.mock-tm-live .mock-tm-live__devices { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.widget--mock.mock-tm-live .mock-tm-live__device {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.widget--mock.mock-tm-live .mock-tm-live__chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  background: #F3F4F6 !important;
  font: 500 12px var(--font-family-base, system-ui) !important;
  color: #1F2937 !important;
}
.widget--mock.mock-tm-live .mock-tm-live__chip--pv { background: #EEF2FF !important; color: #1E3A8A !important; font-weight: 700 !important; }
.widget--mock.mock-tm-live .mock-tm-live__chip strong { font-weight: 700 !important; }
.widget--mock.mock-tm-live .mock-tm-live__path {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: #4B5563 !important;
  margin-left: 4px !important;
  overflow: hidden !important;
}
.widget--mock.mock-tm-live .mock-tm-live__pathpart { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 220px !important; }
@media (max-width: 540px) {
  .widget--mock.mock-tm-live .mock-tm-live__pathpart { max-width: 140px !important; }
  .widget--mock.mock-tm-live .mock-tm-live__row { gap: 6px !important; }
}

/* CF Classic: Funnel toolbar with SETTINGS tab highlighted */
.widget--mock.mock-cf1-toolbar { max-width: 760px !important; }
.widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__inner {
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
}
.widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__bar {
  background: #2B71D0 !important;
  color: #FFFFFF !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font: 700 12px var(--font-family-base, system-ui) !important;
  letter-spacing: 0.05em !important;
}
.widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__gear {
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.18) !important;
  border-radius: 6px !important;
}
.widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__name { font-size: 13px !important; margin-right: auto !important; }
.widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.85) !important;
  border-radius: 4px 4px 0 0 !important;
}
.widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__tab--target {
  position: relative !important;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.55) !important;
}
.widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__pulse {
  position: absolute !important;
  inset: -4px !important;
  border-radius: 6px !important;
  border: 2px solid #F97316 !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}
.widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__hint {
  padding: 12px 16px !important;
  background: #FFF7ED !important;
  color: #9A3412 !important;
  font: 600 12px var(--font-family-base, system-ui) !important;
  border-top: 1px solid #FED7AA !important;
}
.widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__hint strong { color: #C2410C !important; }
@media (max-width: 540px) {
  .widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__bar { flex-wrap: wrap !important; }
  .widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__name { flex: 1 0 100% !important; margin-right: 0 !important; }
  .widget--mock.mock-cf1-toolbar .mock-cf1-toolbar__tabs { flex-wrap: wrap !important; }
}

/* ============================================================
   TM dashboard: Custom install card (mirrors CustomInstall.tsx
   on /platform-installs/custom/). Blue focus glow on the
   Tracker snippet codebox = "this is what to copy".
   ============================================================ */
.widget--mock.mock-tm-custom-install { max-width: 760px !important; }
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__inner {
  padding: 22px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__crumb { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__crumb strong { color: #0F0F0F !important; font-weight: 600 !important; }
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__mark {
  padding: 6px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__title { font-size: 16px !important; font-weight: 600 !important; margin: 4px 0 0 !important; }
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__sub { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #6B7280 !important;
  margin: 6px 0 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #2233FF !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-right: 6px !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__codebox {
  background: #0E1116 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__codebox--focus {
  box-shadow: 0 0 0 3px rgba(34, 51, 255, 0.35), 0 12px 28px -12px rgba(34, 51, 255, 0.55) !important;
  outline: 2px solid #2233FF !important;
  outline-offset: 0 !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__codebar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: #C5C9D2 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__copy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #C5C9D2 !important;
  font: 500 12px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__pre {
  margin: 0 !important;
  padding: 14px 16px !important;
  color: #C5C9D2 !important;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__caption { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__caption code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; background: #F3F4F6 !important; padding: 1px 5px !important; border-radius: 4px !important; color: #1F2937 !important; }
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__warn {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border-radius: 8px !important;
  color: #B91C1C !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__warnicon {
  flex: 0 0 16px !important;
  margin-top: 2px !important;
  color: #DC2626 !important;
}
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__warn p { margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: #B91C1C !important; }
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__warn strong { color: #991B1B !important; font-weight: 600 !important; }
.widget--mock.mock-tm-custom-install .mock-tm-custom-install__guide {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}

/* ============================================================
   TM dashboard: Settings > Ad integrations > Facebook tab
   Step 1 of the FB connect flow on /ad-integrations/facebook/.
   ============================================================ */
.widget--mock.mock-tm-fb-ad-integrations { max-width: 900px !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__inner {
  padding: 20px 22px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 18px !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__headleft { display: flex !important; gap: 12px !important; align-items: flex-start !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__headicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; background: #EEF2FF !important; color: #2233FF !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__headtitle { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__headsub { font-size: 13px !important; color: #6B7280 !important; margin: 2px 0 0 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; border-radius: 999px !important; background: #ECFDF5 !important; color: #047857 !important; border: 1px solid #A7F3D0 !important; font: 600 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__rule { border: 0 !important; border-top: 1px solid #E5E7EB !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__title { font-size: 15px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__sub { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__tabs { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 2px !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__tab { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__tab--active { border-color: #2233FF !important; box-shadow: 0 0 0 2px rgba(34, 51, 255, 0.18) !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__tabicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 5px !important; font: 700 12px var(--font-family-base, system-ui) !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__tabicon--fb { background: #1877F2 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__tabicon--google { background: #FBBF24 !important; color: #1F2937 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__tabicon--tiktok { background: #000000 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__tabicon--ga { background: #F97316 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__tabicon--stripe { background: #635BFF !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__tabicon--whop { background: #FF5A1F !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; margin-left: 2px !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__dot--green { background: #10B981 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__dot--gray { background: #D1D5DB !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__panel { border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 16px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__panelhead { display: flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__panelicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 8px !important; background: #1877F2 !important; color: #FFFFFF !important; font: 800 18px Georgia, serif !important; font-style: italic !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__panelbody { flex: 1 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__paneltitle { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__statuspill { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 2px 10px !important; border-radius: 999px !important; background: #F3F4F6 !important; color: #6B7280 !important; font: 500 11px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__statusdot { width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #9CA3AF !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__panelsub { font-size: 13px !important; color: #6B7280 !important; margin: 2px 0 0 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__connect { padding: 9px 16px !important; border-radius: 6px !important; border: 2px solid #F97316 !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__warn { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border: 1px solid #FCD34D !important; background: #FFFBEB !important; border-radius: 8px !important; color: #92400E !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__warnicon { flex: 0 0 16px !important; margin-top: 2px !important; color: #B45309 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__warntitle { margin: 0 !important; font-size: 13px !important; color: #92400E !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__warntitle strong { color: #78350F !important; font-weight: 700 !important; }
.widget--mock.mock-tm-fb-ad-integrations .mock-tm-fb-ad-integrations__warnbody { margin: 2px 0 0 !important; font-size: 13px !important; color: #92400E !important; line-height: 1.5 !important; }

/* ============================================================
   Meta OAuth popup shell - shared by all fb-oauth-* widgets.
   ============================================================ */
.widget--mock.mock-fb-oauth { max-width: 540px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__inner {
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #1C1E21 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
.widget--mock.mock-fb-oauth .mock-fb-oauth__chrome { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 18px 10px !important; border-bottom: 1px solid #E4E6EB !important; background: #FFFFFF !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__chromeleft { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__metalogo { display: inline-flex !important; align-items: center !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__swap { display: inline-flex !important; align-items: center !important; color: #65676B !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__brand { font: 800 18px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; letter-spacing: -0.01em !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__user { display: inline-flex !important; align-items: center !important; gap: 6px !important; position: relative !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__avatar { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 999px !important; background: #DDDFE2 !important; color: #65676B !important; font: 600 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__fbbadge { position: absolute !important; right: 14px !important; bottom: -2px !important; width: 14px !important; height: 14px !important; border-radius: 999px !important; background: #1877F2 !important; color: #FFFFFF !important; font: 800 9px Georgia, serif !important; font-style: italic !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1.5px solid #FFFFFF !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__caret { color: #65676B !important; font-size: 10px !important; margin-left: 2px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__progress { height: 4px !important; background: #E4E6EB !important; position: relative !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__progressbar { display: block !important; height: 100% !important; background: #1877F2 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__progressbar--p20 { width: 20% !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__progressbar--p40 { width: 40% !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__progressbar--p80 { width: 80% !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__progressbar--p100 { width: 100% !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__body { padding: 22px 24px 24px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__heading { font-size: 18px !important; font-weight: 700 !important; margin: 0 !important; color: #1C1E21 !important; line-height: 1.3 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__lede { font-size: 14px !important; color: #1C1E21 !important; margin: 0 !important; line-height: 1.5 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__lede a { color: #1877F2 !important; text-decoration: none !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 8px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__btn { padding: 12px 16px !important; border-radius: 8px !important; font: 700 14px var(--font-family-base, system-ui) !important; cursor: default !important; border: 1px solid transparent !important; text-align: center !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__btn--ghost { background: #E4E6EB !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__btn--primary { background: #1877F2 !important; color: #FFFFFF !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__btn--focus { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__btn--wide { padding-left: 36px !important; padding-right: 36px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__altlogin { font-size: 14px !important; color: #1C1E21 !important; margin: 4px 0 0 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__altlogin a { color: #1877F2 !important; text-decoration: none !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__radiolist { list-style: none !important; padding: 0 !important; margin: 6px 0 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__radio { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 0 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__radioring { flex: 0 0 20px !important; width: 20px !important; height: 20px !important; border-radius: 999px !important; border: 2px solid #BCC0C4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 2px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__radio--selected .mock-fb-oauth__radioring { border-color: #1877F2 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__radiodot { width: 10px !important; height: 10px !important; border-radius: 999px !important; background: #1877F2 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__radiotitle { font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__radiosub { font-size: 13px !important; color: #65676B !important; margin: 2px 0 0 !important; line-height: 1.45 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__picker { margin-top: 4px !important; border-top: 1px solid #E4E6EB !important; padding-top: 12px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__pickerhead { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-bottom: 10px !important; border-bottom: 1px solid #E4E6EB !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__check { display: inline-flex !important; align-items: center !important; gap: 10px !important; font: 600 14px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__checkbox { display: inline-block !important; width: 18px !important; height: 18px !important; border-radius: 4px !important; border: 2px solid #BCC0C4 !important; background: #FFFFFF !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__assetcount { font-size: 13px !important; color: #65676B !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__bizlist { list-style: none !important; padding: 0 !important; margin: 0 !important; max-height: 320px !important; overflow-y: auto !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__bizrow { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 0 !important; border-bottom: 1px solid #E4E6EB !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__bizicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__bizname { font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__bizid { font-size: 12px !important; color: #65676B !important; margin: 1px 0 0 !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__permlist { list-style: none !important; padding: 0 !important; margin: 6px 0 0 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__perm { padding: 14px 0 !important; border-top: 1px solid #E4E6EB !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__perm:last-child { border-bottom: 1px solid #E4E6EB !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__permtitle { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__permsub { font-size: 13px !important; color: #65676B !important; margin: 4px 0 0 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__infobox { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border-radius: 8px !important; background: #F0F2F5 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__infoicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; border-radius: 999px !important; background: #1C1E21 !important; color: #FFFFFF !important; font: 700 12px var(--font-family-base, system-ui) !important; flex: 0 0 20px !important; margin-top: 2px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__infobox p { margin: 0 !important; font-size: 13px !important; color: #1C1E21 !important; line-height: 1.5 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__infobox a { color: #1877F2 !important; text-decoration: none !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 14px 24px !important; border-top: 1px solid #E4E6EB !important; background: #FFFFFF !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__legal { font-size: 13px !important; color: #1C1E21 !important; margin: 0 !important; flex: 1 1 240px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__legal a { color: #1877F2 !important; text-decoration: none !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__footactions { display: inline-flex !important; gap: 8px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__terms { margin-top: 4px !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__termstitle { margin: 0 0 8px !important; font: 700 16px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__termslist { list-style: disc !important; padding-left: 20px !important; margin: 0 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__termslist li { font-size: 14px !important; padding: 2px 0 !important; }
.widget--mock.mock-fb-oauth .mock-fb-oauth__termslist a { color: #1877F2 !important; text-decoration: none !important; }
@media (max-width: 540px) {
  .widget--mock.mock-fb-oauth .mock-fb-oauth__heading { font-size: 16px !important; }
  .widget--mock.mock-fb-oauth .mock-fb-oauth__actions { grid-template-columns: 1fr !important; }
}

/* ============================================================
   TM dashboard: Select-your-pixel walkthrough widgets - 3 widgets
   on /ad-integrations/facebook/ #select-your-pixel. Shared
   typographic primitives but each widget owns its layout.
   ============================================================ */

/* Widget 1: Active pixels header + Add pixel CTA highlighted */
.widget--mock.mock-tm-fb-add-pixel-cta { max-width: 720px !important; }
.widget--mock.mock-tm-fb-add-pixel-cta .mock-tm-fb-add-pixel-cta__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-fb-add-pixel-cta .mock-tm-fb-add-pixel-cta__row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-add-pixel-cta .mock-tm-fb-add-pixel-cta__title { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-add-pixel-cta .mock-tm-fb-add-pixel-cta__add { background: #2233FF !important; border: none !important; border-radius: 6px !important; padding: 7px 14px !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-fb-add-pixel-cta .mock-tm-fb-add-pixel-cta__hint { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border: 1px solid #BFDBFE !important; background: #EFF6FF !important; border-radius: 8px !important; color: #1E3A8A !important; }
.widget--mock.mock-tm-fb-add-pixel-cta .mock-tm-fb-add-pixel-cta__hinticon { flex: 0 0 16px !important; margin-top: 2px !important; color: #1D4ED8 !important; }
.widget--mock.mock-tm-fb-add-pixel-cta .mock-tm-fb-add-pixel-cta__hinttitle { margin: 0 !important; font-size: 13px !important; color: #1E3A8A !important; }
.widget--mock.mock-tm-fb-add-pixel-cta .mock-tm-fb-add-pixel-cta__hinttitle strong { color: #1E3A8A !important; font-weight: 600 !important; }
.widget--mock.mock-tm-fb-add-pixel-cta .mock-tm-fb-add-pixel-cta__hintbody { margin: 2px 0 0 !important; font-size: 13px !important; color: #1E40AF !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-add-pixel-cta .mock-tm-fb-add-pixel-cta__inlinekey { font-weight: 600 !important; color: #1E3A8A !important; }

/* Widget 2: Pixel dropdown opened */
.widget--mock.mock-tm-fb-pixel-dropdown { max-width: 720px !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__title { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__add { background: transparent !important; border: 0 !important; padding: 0 !important; color: #2233FF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; opacity: 0.55 !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__pickrow { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 14px !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__chev { color: #9CA3AF !important; display: inline-flex !important; margin-top: 10px !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__selectwrap { position: relative !important; flex: 1 !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__select { display: flex !important; width: 100% !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__select--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 20px -10px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__selectlabel { color: #6B7280 !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__list { list-style: none !important; padding: 6px 0 !important; margin: 6px 0 0 !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; background: #FFFFFF !important; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.18) !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__item { display: flex !important; align-items: baseline !important; gap: 6px !important; padding: 8px 14px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__item--hover { background: #F3F4F6 !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__itemname { font-weight: 600 !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__itemsub { font-size: 12px !important; color: #6B7280 !important; font-weight: 400 !important; }
.widget--mock.mock-tm-fb-pixel-dropdown .mock-tm-fb-pixel-dropdown__remove { background: transparent !important; border: 0 !important; padding: 8px !important; color: #6B7280 !important; cursor: default !important; }

/* Widget 3: Expanded row with Allowed events highlighted */
.widget--mock.mock-tm-fb-pixel-allowed-events { max-width: 760px !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__title { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__add { background: transparent !important; border: 0 !important; padding: 0 !important; color: #2233FF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; opacity: 0.55 !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__card { border: 1px solid #E5E7EB !important; border-radius: 12px !important; overflow: hidden !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__head { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 16px !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__chev { color: #6B7280 !important; display: inline-flex !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__headtext { flex: 1 !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__pixelname { margin: 0 !important; font: 600 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__pixelpath { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__remove { background: transparent !important; border: 0 !important; padding: 6px !important; color: #6B7280 !important; cursor: default !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__body { border-top: 1px solid #E5E7EB !important; padding: 18px !important; background: #F9FAFB !important; display: flex !important; flex-direction: column !important; gap: 18px !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__group { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 12px !important; border-radius: 8px !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__group--dim { opacity: 0.45 !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__group--focus { background: #FFFFFF !important; border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25), 0 10px 24px -12px rgba(249, 115, 22, 0.45) !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__label { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__labelrow { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__link { display: inline-flex !important; align-items: center !important; gap: 4px !important; color: #2233FF !important; font: 500 12px var(--font-family-base, system-ui) !important; text-decoration: none !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__sub { margin: -2px 0 6px !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__hint { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__pixsel { display: flex !important; width: 100% !important; align-items: center !important; justify-content: space-between !important; padding: 9px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__pixsub { font-weight: 400 !important; color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__input { padding: 9px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__input--placeholder { color: #9CA3AF !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 8px !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__chk { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 12px !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; background: #FFFFFF !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__box { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; border-radius: 4px !important; border: 1.5px solid #1F2937 !important; background: #FFFFFF !important; flex: 0 0 16px !important; }
.widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__box--checked { background: #111827 !important; color: #FFFFFF !important; border-color: #111827 !important; }
@media (max-width: 720px) {
  .widget--mock.mock-tm-fb-pixel-allowed-events .mock-tm-fb-pixel-allowed-events__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ============================================================
   TM dashboard: Custom event mappings - empty state
   /ad-integrations/facebook/#custom-event-mappings step 1
   ============================================================ */
.widget--mock.mock-tm-fb-custom-mapping-empty { max-width: 760px !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__labelwrap { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__label { margin: 0 !important; font: 600 14px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__help { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; border-radius: 999px !important; border: 1px solid #9CA3AF !important; font-size: 10px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__add { background: #2233FF !important; border: none !important; border-radius: 6px !important; padding: 7px 16px !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__sub { margin: 0 !important; font-size: 13px !important; color: #6B7280 !important; line-height: 1.55 !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__sub code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; background: #F3F4F6 !important; color: #1F2937 !important; padding: 1px 5px !important; border-radius: 4px !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__info { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border: 1px solid #FCD34D !important; background: #FFFBEB !important; border-radius: 8px !important; color: #92400E !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__infoicon { flex: 0 0 16px !important; margin-top: 2px !important; color: #B45309 !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__info p { margin: 0 !important; font-size: 13px !important; color: #92400E !important; line-height: 1.55 !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__alert { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border: 1px solid #FECACA !important; background: #FEF2F2 !important; border-radius: 8px !important; color: #991B1B !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__alerticon { flex: 0 0 16px !important; margin-top: 2px !important; color: #DC2626 !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__alert p { margin: 0 !important; font-size: 13px !important; color: #991B1B !important; line-height: 1.55 !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__alertlink { font-weight: 600 !important; text-decoration: underline !important; white-space: nowrap !important; }
.widget--mock.mock-tm-fb-custom-mapping-empty .mock-tm-fb-custom-mapping-empty__emptystate { margin: 2px 0 0 !important; font-size: 13px !important; color: #6B7280 !important; }

/* ============================================================
   TM dashboard: Custom event mappings - filled row + Save
   /ad-integrations/facebook/#custom-event-mappings step 2
   ============================================================ */
.widget--mock.mock-tm-fb-custom-mapping-filled { max-width: 760px !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__labelwrap { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__label { margin: 0 !important; font: 600 14px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__help { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; border-radius: 999px !important; border: 1px solid #9CA3AF !important; font-size: 10px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__add { background: transparent !important; border: 0 !important; padding: 0 !important; color: #2233FF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; opacity: 0.55 !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__card { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 12px 14px !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -12px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__dot { flex: 0 0 10px !important; width: 10px !important; height: 10px !important; margin-top: 5px !important; border-radius: 999px !important; background: #10B981 !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__cardmain { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__pill { font: 600 12px var(--font-family-base, system-ui) !important; border-radius: 6px !important; padding: 2px 8px !important; background: #EEF0FF !important; color: #2945E6 !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__arrow { color: #9CA3AF !important; font-size: 14px !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__name { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #0F0F0F !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__actions { display: inline-flex !important; align-items: center !important; gap: 6px !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__check { color: #059669 !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__iconbtn { background: transparent !important; border: 0 !important; padding: 2px !important; color: #6B7280 !important; cursor: default !important; display: inline-flex !important; }

/* ============================================================
   TM dashboard: Custom event mappings - Create custom event popup
   /ad-integrations/facebook/#custom-event-mappings step 2
   ============================================================ */
.widget--mock.mock-tm-fb-custom-mapping-dialog { max-width: 520px !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__inner { padding: 20px 22px 18px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 16px !important; box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.25) !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__head { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__title { margin: 0 !important; font: 700 17px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__x { color: #9CA3AF !important; display: inline-flex !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__flabel { font: 600 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__select { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 10px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 14px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__select--focus { border: 2px solid #0F0F0F !important; padding: 9px 11px !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__select svg { color: #6B7280 !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__input { padding: 10px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__input--placeholder { color: #9CA3AF !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__product { border: 1px solid #C7D2FE !important; background: #F5F7FF !important; border-radius: 10px !important; padding: 12px 14px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__prodhead { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__prodtitle { font: 600 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__badge { font: 600 10px var(--font-family-base, system-ui) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; border-radius: 999px !important; padding: 2px 8px !important; background: #E0E7FF !important; color: #4338CA !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__prodsub { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__prodgrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 4px !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__sublabel { display: block !important; font-size: 11px !important; color: #6B7280 !important; margin-bottom: 5px !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__prodnote { margin: 4px 0 0 !important; font-size: 11px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__foot { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; margin-top: 2px !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__cancel { padding: 9px 16px !important; border-radius: 8px !important; border: 1px solid #D1D5DB !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__create { padding: 9px 18px !important; border-radius: 8px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; }
@media (max-width: 520px) {
  .widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__prodgrid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   TM dashboard: Product filter (Purchase custom event)
   /ad-integrations/facebook/#product-filter
   ============================================================ */
.widget--mock.mock-tm-fb-product-filter { max-width: 560px !important; }
.widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__inner { padding: 16px 18px !important; background: #F5F7FF !important; border: 1px solid #C7D2FE !important; border-radius: 12px !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 6px !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -12px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__head { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__title { font: 600 14px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__badge { font: 600 10px var(--font-family-base, system-ui) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; border-radius: 999px !important; padding: 2px 8px !important; background: #E0E7FF !important; color: #4338CA !important; }
.widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__sub { margin: 0 !important; font-size: 13px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin-top: 6px !important; }
.widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__label { display: block !important; font-size: 12px !important; color: #6B7280 !important; margin-bottom: 6px !important; }
.widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__input { padding: 10px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__input--placeholder { color: #9CA3AF !important; }
.widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__note { margin: 8px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
@media (max-width: 520px) {
  .widget--mock.mock-tm-fb-product-filter .mock-tm-fb-product-filter__grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Facebook Events Manager: Custom Conversions list
   /ad-integrations/facebook/#custom-event-mappings step 3
   ============================================================ */
.widget--mock.mock-fb-em-custom-conversions { max-width: 920px !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__inner { display: grid !important; grid-template-columns: 220px 1fr !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; min-height: 360px !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__rail { padding: 18px 14px !important; border-right: 1px solid #E4E6EB !important; background: #FFFFFF !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__railtitle { margin: 0 0 12px !important; font: 700 14px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__raillist { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__railitem { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; border-radius: 6px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__railitem--active { background: #E7F3FF !important; color: #1877F2 !important; font-weight: 600 !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__railicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; color: #65676B !important; font: 700 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__railicon--active { color: #1877F2 !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__main { padding: 22px 24px 24px !important; background: #FFFFFF !important; overflow-x: auto !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__title { font: 700 16px var(--font-family-base, system-ui) !important; margin: 0 !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__lede { font-size: 13px !important; color: #65676B !important; margin: 4px 0 14px !important; line-height: 1.5 !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__bar { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 14px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__primary { padding: 8px 14px !important; border-radius: 6px !important; background: #1877F2 !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; border: 0 !important; cursor: default !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__ghost { padding: 8px 14px !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 600 13px var(--font-family-base, system-ui) !important; border: 1px solid #D1D5DB !important; cursor: default !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__search { display: inline-flex !important; align-items: center !important; padding: 8px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #65676B !important; font: 500 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__table th { text-align: left !important; padding: 10px 12px !important; border-bottom: 1px solid #E4E6EB !important; color: #1C1E21 !important; font: 600 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__table td { padding: 12px !important; border-bottom: 1px solid #F0F2F5 !important; vertical-align: top !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__name { font-weight: 600 !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__id { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #65676B !important; margin-top: 2px !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__pill { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 2px 8px !important; border-radius: 999px !important; font: 600 11px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__pill--active { background: #DEFBE6 !important; color: #036E2C !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__pill--active::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #15803D; display: inline-block; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__pill--inactive { background: #F0F2F5 !important; color: #65676B !important; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__pill--inactive::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #9CA3AF; display: inline-block; }
.widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__row--focus { background: rgba(249, 115, 22, 0.08) !important; box-shadow: inset 3px 0 0 #F97316 !important; }
@media (max-width: 720px) {
  .widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__inner { grid-template-columns: 1fr !important; }
  .widget--mock.mock-fb-em-custom-conversions .mock-fb-em-custom-conversions__rail { border-right: 0 !important; border-bottom: 1px solid #E4E6EB !important; }
}

/* ============================================================
   Facebook Ads Manager: Customize columns dialog
   /ad-integrations/facebook/#custom-event-mappings step 4
   ============================================================ */
.widget--mock.mock-fb-am-customize-columns { max-width: 920px !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__inner { display: flex !important; flex-direction: column !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; border-radius: 8px !important; overflow: hidden !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 18px !important; border-bottom: 1px solid #E4E6EB !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__title { margin: 0 !important; font: 700 16px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__close { background: transparent !important; border: 0 !important; color: #65676B !important; font: 600 16px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__body { display: grid !important; grid-template-columns: 1.5fr 1fr !important; gap: 0 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__left { padding: 18px !important; border-right: 1px solid #E4E6EB !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__right { padding: 18px !important; background: #F7F8FA !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__searchwrap { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 12px !important; border: 1.5px solid #1877F2 !important; border-radius: 6px !important; background: #FFFFFF !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__searchicon { color: #65676B !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__searchinput { flex: 1 !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__searchclear { color: #65676B !important; font-size: 12px !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__count { margin: 12px 0 8px !important; font-size: 13px !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__table th { text-align: left !important; padding: 8px 10px !important; background: #F0F2F5 !important; color: #1C1E21 !important; font: 600 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__table td { padding: 12px 10px !important; border-bottom: 1px solid #E4E6EB !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__row--focus { background: rgba(249, 115, 22, 0.08) !important; box-shadow: inset 3px 0 0 #F97316 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__chk { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border: 1.5px solid #1F2937 !important; border-radius: 4px !important; background: #FFFFFF !important; color: #FFFFFF !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__chk--checked { background: #1877F2 !important; border-color: #1877F2 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__righttitle { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__rightsub { margin: 4px 0 12px !important; font-size: 12px !important; color: #65676B !important; line-height: 1.5 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__rightlist { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; max-height: 260px !important; overflow-y: auto !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__rightlist li { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 10px !important; background: #FFFFFF !important; border: 1px solid #E4E6EB !important; border-radius: 6px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__newcol { border-color: #F97316 !important; background: rgba(249, 115, 22, 0.08) !important; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25) !important; font-weight: 700 !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__newdot { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; border-radius: 999px !important; background: #F97316 !important; color: #FFFFFF !important; font: 700 11px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__footer { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; padding: 14px 18px !important; border-top: 1px solid #E4E6EB !important; background: #FFFFFF !important; }
@media (max-width: 720px) {
  .widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__body { grid-template-columns: 1fr !important; }
  .widget--mock.mock-fb-am-customize-columns .mock-fb-am-customize-columns__left { border-right: 0 !important; border-bottom: 1px solid #E4E6EB !important; }
}

/* ============================================================
   Facebook Ads Manager: Campaigns table with ghyu column
   /ad-integrations/facebook/#custom-event-mappings step 5
   ============================================================ */
.widget--mock.mock-fb-am-campaigns-result { max-width: 960px !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__inner { background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; padding: 14px 14px 16px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__tabs { display: flex !important; gap: 16px !important; border-bottom: 1px solid #E4E6EB !important; padding-bottom: 8px !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__tab { font: 500 13px var(--font-family-base, system-ui) !important; color: #65676B !important; padding: 4px 0 !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__tab--active { color: #1877F2 !important; font-weight: 700 !important; border-bottom: 2px solid #1877F2 !important; margin-bottom: -9px !important; padding-bottom: 8px !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__toolbar { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__create { padding: 6px 12px !important; border-radius: 6px !important; background: #15803D !important; color: #FFFFFF !important; border: 0 !important; font: 600 12px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__chip { padding: 6px 10px !important; border-radius: 6px !important; border: 1px solid #D1D5DB !important; background: #FFFFFF !important; font: 500 12px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__tablewrap { overflow-x: auto !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__table { width: 100% !important; border-collapse: collapse !important; font-size: 12px !important; min-width: 760px !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__table th { text-align: left !important; padding: 10px 8px !important; border-bottom: 1px solid #E4E6EB !important; color: #1C1E21 !important; font: 700 11px var(--font-family-base, system-ui) !important; background: #F7F8FA !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__table td { padding: 10px 8px !important; border-bottom: 1px solid #F0F2F5 !important; color: #1C1E21 !important; vertical-align: top !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__newcol { background: rgba(249, 115, 22, 0.08) !important; }
.widget--mock.mock-fb-am-campaigns-result th.mock-fb-am-campaigns-result__newcol { background: rgba(249, 115, 22, 0.15) !important; box-shadow: inset 0 -2px 0 #F97316 !important; color: #9A3412 !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__newcol--dash { color: #9CA3AF !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__link { color: #1877F2 !important; font-weight: 500 !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__sub { font-size: 11px !important; color: #65676B !important; margin-top: 2px !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__dot { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 999px !important; margin-right: 6px !important; vertical-align: middle !important; }
.widget--mock.mock-fb-am-campaigns-result .mock-fb-am-campaigns-result__dot--off { background: #9CA3AF !important; }

/* ============================================================
   Catalog walkthrough widgets on /ad-integrations/facebook/#catalog
   ============================================================ */

/* TM dashboard: FB Catalog card before authorization */
.widget--mock.mock-tm-fb-catalog-connect { max-width: 720px !important; }
.widget--mock.mock-tm-fb-catalog-connect .mock-tm-fb-catalog-connect__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 8px !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; }
.widget--mock.mock-tm-fb-catalog-connect .mock-tm-fb-catalog-connect__title { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-catalog-connect .mock-tm-fb-catalog-connect__sub { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-catalog-connect .mock-tm-fb-catalog-connect__btn { align-self: flex-start !important; padding: 9px 16px !important; border-radius: 6px !important; border: 2px solid #F97316 !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; margin-top: 6px !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; }

/* TM dashboard: FB Catalog picker after OAuth */
.widget--mock.mock-tm-fb-catalog-picker { max-width: 720px !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 12px !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__title { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__opt { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 14px 16px !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__opt--selected { background: #EEF2FF !important; border-color: #2233FF !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__ring { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; border: 2px solid #9CA3AF !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 2px !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__opt--selected .mock-tm-fb-catalog-picker__ring { border-color: #2233FF !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__dot { width: 8px !important; height: 8px !important; border-radius: 999px !important; background: #2233FF !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__optname { margin: 0 !important; font: 600 14px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__optsub { margin: 4px 0 0 !important; font-size: 13px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__optbody { flex: 1 !important; min-width: 0 !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__selectwrap { margin-top: 10px !important; position: relative !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__select { display: flex !important; width: 100% !important; align-items: center !important; justify-content: space-between !important; padding: 9px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__selectlabel { color: #6B7280 !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__list { list-style: none !important; padding: 6px 0 !important; margin: 4px 0 0 !important; border-radius: 8px !important; background: #1F2937 !important; box-shadow: 0 14px 28px -10px rgba(0,0,0,0.35) !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__listitem { padding: 8px 16px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__listitem--check::before { content: "v "; color: #FFFFFF; margin-right: 4px; }
.widget--mock.mock-tm-fb-catalog-picker .mock-tm-fb-catalog-picker__cta { align-self: flex-start !important; padding: 9px 16px !important; border-radius: 6px !important; border: 2px solid #F97316 !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; }

/* Commerce Manager: catalogs list */
.widget--mock.mock-fb-cm-catalogs-list { max-width: 920px !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__inner { display: grid !important; grid-template-columns: 260px 1fr !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; min-height: 320px !important; border-radius: 8px !important; overflow: hidden !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__rail { padding: 18px 14px !important; border-right: 1px solid #E4E6EB !important; background: #FFFFFF !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__metalogo { margin: 0 !important; color: #1C1E21 !important; font: 700 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__railtitle { margin: 0 !important; font: 800 18px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__bmpicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__bmicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 4px !important; background: #FBBF24 !important; color: #1F2937 !important; font: 700 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__navlist { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__navitem { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 10px !important; border-radius: 6px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__navitem--active { background: #E7F3FF !important; color: #1877F2 !important; font-weight: 600 !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__navicon { color: #65676B !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__main { padding: 22px 24px !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__sectitle { font: 700 16px var(--font-family-base, system-ui) !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__info { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; border-radius: 999px !important; border: 1px solid #9CA3AF !important; font-size: 10px !important; color: #65676B !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__bar { display: flex !important; align-items: center !important; gap: 8px !important; margin: 14px 0 12px !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__search { flex: 1 !important; display: inline-flex !important; align-items: center !important; padding: 8px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #65676B !important; font: 500 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__plus { padding: 6px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 700 16px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__manage { padding: 6px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 600 12px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__catlist { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__cat { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px !important; border-top: 1px solid #E4E6EB !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__cat:last-child { border-bottom: 1px solid #E4E6EB !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__cat--focus { background: rgba(249, 115, 22, 0.08) !important; box-shadow: inset 3px 0 0 #F97316 !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__caticon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 6px !important; background: #F0F2F5 !important; color: #65676B !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__catname { margin: 0 !important; font: 600 14px var(--font-family-base, system-ui) !important; color: #1877F2 !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__catid { margin: 2px 0 0 !important; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #65676B !important; }
.widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__star { color: #BCC0C4 !important; margin-left: auto !important; }
@media (max-width: 720px) {
  .widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__inner { grid-template-columns: 1fr !important; }
  .widget--mock.mock-fb-cm-catalogs-list .mock-fb-cm-catalogs-list__rail { border-right: 0 !important; border-bottom: 1px solid #E4E6EB !important; }
}

/* Commerce Manager: catalog Overview screen */
.widget--mock.mock-fb-cm-catalog-overview { max-width: 1000px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__inner { display: grid !important; grid-template-columns: 260px 1fr !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; min-height: 420px !important; border-radius: 8px !important; overflow: hidden !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__rail { padding: 18px 14px !important; border-right: 1px solid #E4E6EB !important; background: #FFFFFF !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__metalogo { margin: 0 !important; color: #1C1E21 !important; font: 700 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__railtitle { margin: 0 !important; font: 800 18px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__bmpicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__bmicon { width: 22px !important; height: 22px !important; border-radius: 4px !important; background: #F0F2F5 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__navlist { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__navitem { display: flex !important; align-items: center !important; padding: 8px 10px !important; border-radius: 6px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__navitem--active { background: #E7F3FF !important; color: #1877F2 !important; font-weight: 600 !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__navgroup { padding: 8px 10px !important; font: 700 12px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__navsub { padding: 6px 10px 6px 26px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #65676B !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__main { padding: 22px 24px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__title { margin: 0 0 14px !important; font: 700 18px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__card { display: flex !important; gap: 20px !important; border: 1px solid #E4E6EB !important; border-radius: 12px !important; padding: 20px !important; background: #FFFFFF !important; align-items: stretch !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__heroart { flex: 0 0 120px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #B8DAFF !important; border-radius: 8px !important; padding: 12px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__body { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__heading { margin: 0 !important; font: 700 16px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__lede { margin: 0 !important; font-size: 13px !important; color: #65676B !important; line-height: 1.55 !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__checklist { list-style: none !important; padding: 0 !important; margin: 4px 0 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__checklist > li { display: flex !important; gap: 10px !important; align-items: flex-start !important; padding: 6px !important; border-radius: 8px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__chkrow--focus { background: rgba(249, 115, 22, 0.08) !important; box-shadow: inset 3px 0 0 #F97316 !important; padding: 8px 8px 10px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__chkok { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; background: #15803D !important; color: #FFFFFF !important; font: 700 11px var(--font-family-base, system-ui) !important; margin-top: 2px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__chkbad { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; background: #DC2626 !important; color: #FFFFFF !important; font: 700 11px var(--font-family-base, system-ui) !important; margin-top: 2px !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__chktitle { margin: 0 !important; font: 600 14px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__chksub { margin: 4px 0 0 !important; font-size: 13px !important; color: #65676B !important; line-height: 1.5 !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__chksub a { color: #1877F2 !important; text-decoration: none !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__connect { margin-top: 6px !important; padding: 8px 14px !important; border-radius: 6px !important; background: #1877F2 !important; color: #FFFFFF !important; border: 2px solid #F97316 !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; }
.widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__locked { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin-top: 12px !important; padding: 12px !important; border: 0 !important; border-radius: 8px !important; background: #D6E9D8 !important; color: #15803D !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; opacity: 0.85 !important; }
@media (max-width: 720px) {
  .widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__inner { grid-template-columns: 1fr !important; }
  .widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__rail { border-right: 0 !important; border-bottom: 1px solid #E4E6EB !important; }
  .widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__card { flex-direction: column !important; }
  .widget--mock.mock-fb-cm-catalog-overview .mock-fb-cm-catalog-overview__heroart { flex: 0 0 auto !important; }
}

/* Commerce Manager: Events tab - dataset picker */
.widget--mock.mock-fb-cm-catalog-events { max-width: 640px !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__inner { padding: 22px 24px 24px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; border-radius: 8px !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__title { margin: 0 !important; font: 700 18px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__lede { margin: 0 !important; font-size: 13px !important; color: #1C1E21 !important; line-height: 1.55 !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__lede a { color: #1877F2 !important; text-decoration: none !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__sectitle { margin: 6px 0 0 !important; font: 700 14px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 0 !important; border-bottom: 1px solid #E4E6EB !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__row--focus { background: rgba(249, 115, 22, 0.08) !important; box-shadow: inset 3px 0 0 #F97316 !important; padding-left: 8px !important; padding-right: 8px !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 6px !important; background: #F0F2F5 !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__name { margin: 0 !important; font: 600 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__id { margin: 2px 0 0 !important; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #65676B !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__toggle { margin-left: auto !important; position: relative !important; display: inline-flex !important; align-items: center !important; width: 36px !important; height: 20px !important; border-radius: 999px !important; padding: 0 2px !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__toggle--off { background: #1F2937 !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__toggle--on { background: #1877F2 !important; justify-content: flex-end !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__nub { display: inline-block !important; width: 16px !important; height: 16px !important; border-radius: 999px !important; background: #FFFFFF !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__more { font: 500 13px var(--font-family-base, system-ui) !important; color: #1877F2 !important; text-decoration: none !important; margin-top: 4px !important; }
.widget--mock.mock-fb-cm-catalog-events .mock-fb-cm-catalog-events__connect { align-self: flex-start !important; padding: 9px 16px !important; border-radius: 6px !important; border: 2px solid #F97316 !important; background: #1877F2 !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; }

/* Commerce Manager: Events tab post-connect with match rate */
.widget--mock.mock-fb-cm-catalog-match-rate { max-width: 920px !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__inner { padding: 22px 24px 24px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; border-radius: 8px !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__title { margin: 0 !important; font: 700 16px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__actions { display: inline-flex !important; gap: 8px !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__ghost { padding: 7px 12px !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; border: 1px solid #D1D5DB !important; font: 600 12px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__primary { padding: 7px 12px !important; border-radius: 6px !important; background: #15803D !important; color: #FFFFFF !important; border: 0 !important; font: 600 12px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__hero { display: flex !important; align-items: flex-start !important; gap: 14px !important; padding: 14px 16px !important; border: 1px solid #E4E6EB !important; border-radius: 10px !important; background: #FFFFFF !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__heroicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; border-radius: 6px !important; background: #F0F2F5 !important; color: #1877F2 !important; flex: 0 0 48px !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__heading { margin: 0 !important; font: 700 15px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__lede { margin: 4px 0 0 !important; font-size: 13px !important; color: #1C1E21 !important; line-height: 1.55 !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__lede a { color: #1877F2 !important; text-decoration: none !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__table th { text-align: left !important; padding: 10px 12px !important; border-bottom: 1px solid #E4E6EB !important; color: #1C1E21 !important; font: 600 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__table td { padding: 14px 12px !important; border-bottom: 1px solid #F0F2F5 !important; color: #1C1E21 !important; vertical-align: middle !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__datasetname { font-weight: 600 !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__id { margin: 2px 0 0 !important; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #65676B !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__gauge { display: inline-block !important; width: 44px !important; height: 44px !important; border-radius: 999px !important; vertical-align: middle !important; margin-right: 12px !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__gauge--low { background: conic-gradient(#FBBF24 0deg, #E4E6EB 0deg) !important; -webkit-mask: radial-gradient(circle, transparent 12px, black 12px) !important; mask: radial-gradient(circle, transparent 12px, black 12px) !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__pct { font: 700 22px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; vertical-align: middle !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__statusdot { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 999px !important; margin-right: 6px !important; vertical-align: middle !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__statusdot--warn { background: #F59E0B !important; }
.widget--mock.mock-fb-cm-catalog-match-rate .mock-fb-cm-catalog-match-rate__viewbtn { padding: 6px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 600 12px var(--font-family-base, system-ui) !important; cursor: default !important; }

/* ============================================================
   WordPress TrueMetriks plugin: Facebook Catalog tab widgets
   /ad-integrations/facebook/#connect-a-catalog-on-wordpress
   ============================================================ */

/* WP plugin tab - NOT connected state (with WP admin chrome) */
.widget--mock.mock-wp-tm-catalog-disconnected { max-width: 960px !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__inner { display: grid !important; grid-template-columns: 200px 1fr !important; background: #F0F0F1 !important; font-family: var(--font-family-base, system-ui) !important; color: #1d2327 !important; border-radius: 6px !important; overflow: hidden !important; min-height: 540px !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__sidebar { background: #1d2327 !important; color: #ffffff !important; padding: 10px 0 !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__nav { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__navitem { padding: 9px 14px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #c3c4c7 !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__navitem--active { background: #2271b1 !important; color: #ffffff !important; font-weight: 600 !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 16px !important; height: 16px !important; padding: 0 4px !important; border-radius: 999px !important; background: #d63638 !important; color: #ffffff !important; font: 700 10px var(--font-family-base, system-ui) !important; margin-left: auto !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__main { padding: 24px 28px !important; background: #ffffff !important; overflow-x: auto !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__title { font: 700 18px var(--font-family-base, system-ui) !important; margin: 0 0 14px !important; color: #1d2327 !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__lede { margin: 0 0 12px !important; font-size: 13px !important; color: #1d2327 !important; line-height: 1.55 !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__lede a { color: #2271b1 !important; text-decoration: none !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__row { display: flex !important; align-items: center !important; gap: 14px !important; margin: 12px 0 !important; flex-wrap: wrap !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__refresh { padding: 7px 14px !important; border: 1px solid #2271b1 !important; border-radius: 3px !important; background: #ffffff !important; color: #2271b1 !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__refreshhint { font-size: 13px !important; color: #50575e !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__rule { border: 0 !important; border-top: 1px solid #dcdcde !important; margin: 18px 0 14px !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__label { margin: 0 0 4px !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #1d2327 !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__input { padding: 6px 10px !important; border: 1px solid #8c8f94 !important; border-radius: 3px !important; background: #ffffff !important; font: 13px var(--font-family-base, system-ui) !important; color: #1d2327 !important; max-width: 320px !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__input--placeholder { color: #8c8f94 !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__hint { margin: 6px 0 !important; font-size: 12px !important; color: #50575e !important; line-height: 1.55 !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__hint a { color: #2271b1 !important; text-decoration: none !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__savebrand { margin-top: 6px !important; padding: 7px 14px !important; border: 1px solid #2271b1 !important; border-radius: 3px !important; background: #ffffff !important; color: #2271b1 !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__status { margin: 12px 0 6px !important; font-size: 13px !important; color: #1d2327 !important; }
.widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__connect { margin-top: 8px !important; padding: 8px 16px !important; border: 2px solid #F97316 !important; border-radius: 3px !important; background: #2271b1 !important; color: #ffffff !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 18px -10px rgba(249, 115, 22, 0.5) !important; }
@media (max-width: 720px) {
  .widget--mock.mock-wp-tm-catalog-disconnected .mock-wp-tm-catalog-disconnected__inner { grid-template-columns: 1fr !important; }
}

/* WP plugin tab - CONNECTED state (panel-only, no sidebar) */
.widget--mock.mock-wp-tm-catalog-connected { max-width: 760px !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__inner { padding: 24px 28px !important; background: #ffffff !important; font-family: var(--font-family-base, system-ui) !important; color: #1d2327 !important; border: 1px solid #dcdcde !important; border-radius: 6px !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__title { font: 700 18px var(--font-family-base, system-ui) !important; margin: 0 0 14px !important; color: #1d2327 !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__lede { margin: 0 0 12px !important; font-size: 13px !important; color: #1d2327 !important; line-height: 1.55 !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__lede a { color: #2271b1 !important; text-decoration: none !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__row { display: flex !important; align-items: center !important; gap: 14px !important; margin: 12px 0 !important; flex-wrap: wrap !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__refresh { padding: 7px 14px !important; border: 1px solid #2271b1 !important; border-radius: 3px !important; background: #ffffff !important; color: #2271b1 !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__refreshhint { font-size: 13px !important; color: #50575e !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__notice { margin: 10px 0 !important; padding: 10px 14px !important; background: #edfaef !important; border-left: 4px solid #00a32a !important; color: #1d2327 !important; font-size: 13px !important; border-radius: 2px !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__rule { border: 0 !important; border-top: 1px solid #dcdcde !important; margin: 18px 0 14px !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__label { margin: 0 0 4px !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #1d2327 !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__input { padding: 6px 10px !important; border: 1px solid #8c8f94 !important; border-radius: 3px !important; background: #ffffff !important; font: 13px var(--font-family-base, system-ui) !important; color: #1d2327 !important; max-width: 320px !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__hint { margin: 6px 0 !important; font-size: 12px !important; color: #50575e !important; line-height: 1.55 !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__savebrand { margin-top: 6px !important; padding: 7px 14px !important; border: 1px solid #2271b1 !important; border-radius: 3px !important; background: #ffffff !important; color: #2271b1 !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__connstatus { margin: 12px 0 8px !important; font-size: 13px !important; color: #1d2327 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__idchip { background: #f0f0f1 !important; border: 1px solid #dcdcde !important; padding: 2px 8px !important; border-radius: 3px !important; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #1d2327 !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__btnrow { display: inline-flex !important; gap: 10px !important; margin: 6px 0 8px !important; flex-wrap: wrap !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__resync { padding: 7px 14px !important; border: 1px solid #2271b1 !important; border-radius: 3px !important; background: #ffffff !important; color: #2271b1 !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-wp-tm-catalog-connected .mock-wp-tm-catalog-connected__disconnect { padding: 7px 14px !important; border: 1px solid #2271b1 !important; border-radius: 3px !important; background: #ffffff !important; color: #2271b1 !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }

/* ============================================================
   Shopify Admin widgets for /ad-integrations/facebook/#connect-a-catalog-on-shopify
   ============================================================ */

/* Widget 1: Shopify Admin left sidebar with Settings highlighted */
.widget--mock.mock-shopify-admin-settings-nav { max-width: 280px !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__inner { background: #F1F1F1 !important; padding: 14px 10px !important; font-family: var(--font-family-base, system-ui) !important; color: #202223 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; min-height: 520px !important; border-radius: 6px !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__top { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 6px 10px !important; border-radius: 6px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #202223 !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__item--active { background: #FFFFFF !important; font-weight: 600 !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__item--muted { color: #6D7175 !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__ico { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; color: #303030 !important; font-size: 12px !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__badge { margin-left: auto !important; background: #E1E3E5 !important; color: #303030 !important; font: 700 11px var(--font-family-base, system-ui) !important; padding: 1px 7px !important; border-radius: 10px !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__group { font: 500 12px var(--font-family-base, system-ui) !important; color: #6D7175 !important; margin: 12px 6px 4px !important; display: flex !important; align-items: center !important; gap: 4px !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__caret { font-size: 10px !important; color: #6D7175 !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__spacer { flex: 1 !important; min-height: 60px !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__settings { padding-top: 8px !important; border-top: 1px solid #E1E3E5 !important; }
.widget--mock.mock-shopify-admin-settings-nav .mock-shopify-admin-settings-nav__settingsbtn { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 8px 12px !important; border: 2px solid #F97316 !important; border-radius: 8px !important; background: #FFFFFF !important; color: #202223 !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 18px -10px rgba(249, 115, 22, 0.5) !important; width: 100% !important; }

/* Widget 2: Shopify Settings panel sidebar with Domains highlighted */
.widget--mock.mock-shopify-settings-domains { max-width: 340px !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__inner { background: #FFFFFF !important; padding: 14px 10px !important; font-family: var(--font-family-base, system-ui) !important; color: #202223 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; border: 1px solid #E1E3E5 !important; border-radius: 6px !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__orghead { padding: 10px 6px 4px !important; background: #F6F6F7 !important; margin: -14px -10px 4px !important; padding: 14px 14px 10px !important; border-bottom: 1px solid #E1E3E5 !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__orgname { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #202223 !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__orgsub { margin: 2px 0 0 !important; font-size: 11px !important; color: #6D7175 !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__searchwrap { display: flex !important; align-items: center !important; gap: 6px !important; padding: 6px 8px !important; border: 1px solid #C9CCCF !important; border-radius: 6px !important; background: #FFFFFF !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__searchicon { color: #6D7175 !important; font-size: 11px !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__searchhint { font: 13px var(--font-family-base, system-ui) !important; color: #6D7175 !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 7px 10px !important; border-radius: 6px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #202223 !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__item--active { background: #F1F1F1 !important; font-weight: 600 !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__item--focus { background: rgba(249, 115, 22, 0.08) !important; border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25), 0 8px 18px -10px rgba(249, 115, 22, 0.5) !important; padding: 5px 8px !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__ico { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; color: #303030 !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__divider { border-top: 1px solid #E1E3E5 !important; margin: 6px 0 !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__storehead { display: flex !important; align-items: center !important; gap: 10px !important; padding: 6px 6px 8px !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__storeicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 6px !important; background: #6BCFC2 !important; color: #FFFFFF !important; font: 800 10px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__storename { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #202223 !important; }
.widget--mock.mock-shopify-settings-domains .mock-shopify-settings-domains__storesub { margin: 2px 0 0 !important; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #6D7175 !important; }

/* Widget 3: Shopify Domains table with myshopify row highlighted */
.widget--mock.mock-shopify-domains-copy { max-width: 760px !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__inner { background: #FFFFFF !important; border: 1px solid #E1E3E5 !important; border-radius: 8px !important; padding: 14px 18px 18px !important; font-family: var(--font-family-base, system-ui) !important; color: #202223 !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 12px !important; flex-wrap: wrap !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__title { margin: 0 !important; font: 700 14px var(--font-family-base, system-ui) !important; color: #202223 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__ico { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; color: #303030 !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__actions { display: inline-flex !important; gap: 8px !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__ghost { padding: 6px 12px !important; border: 1px solid #C9CCCF !important; border-radius: 6px !important; background: #FFFFFF !important; color: #202223 !important; font: 600 12px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__primary { padding: 6px 12px !important; border: 0 !important; border-radius: 6px !important; background: #202223 !important; color: #FFFFFF !important; font: 600 12px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__table th { text-align: left !important; padding: 10px 8px !important; background: #F6F6F7 !important; color: #6D7175 !important; font: 600 12px var(--font-family-base, system-ui) !important; border-bottom: 1px solid #E1E3E5 !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__table td { padding: 14px 8px !important; border-bottom: 1px solid #E1E3E5 !important; color: #202223 !important; vertical-align: middle !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__row--focus { background: rgba(249, 115, 22, 0.08) !important; box-shadow: inset 3px 0 0 #F97316 !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__domainicon { display: inline-block !important; margin-right: 8px !important; color: #6D7175 !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__domainicon--indent { margin-left: 8px !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__myshopify { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__pill { display: inline-flex !important; align-items: center !important; padding: 2px 10px !important; border-radius: 999px !important; font: 600 11px var(--font-family-base, system-ui) !important; margin-left: 6px !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__pill--primary { background: #F1F1F1 !important; color: #303030 !important; }
.widget--mock.mock-shopify-domains-copy .mock-shopify-domains-copy__pill--connected { background: #AEE9D1 !important; color: #0C5132 !important; margin-left: 0 !important; }

/* Widget 4: Shopify Install app prompt */
.widget--mock.mock-shopify-install-app { max-width: 640px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__inner { background: #FFFFFF !important; border-radius: 10px !important; overflow: hidden !important; font-family: var(--font-family-base, system-ui) !important; color: #202223 !important; box-shadow: 0 12px 32px -16px rgba(0,0,0,0.25) !important; border: 1px solid #E1E3E5 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__chrome { display: flex !important; align-items: center !important; gap: 12px !important; padding: 8px 14px !important; background: #1B1B1B !important; color: #FFFFFF !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__dots { display: inline-flex !important; gap: 6px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__dot { display: inline-block !important; width: 10px !important; height: 10px !important; border-radius: 999px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__dot--r { background: #FF5F57 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__dot--y { background: #FEBC2E !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__dot--g { background: #28C840 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__chrometitle { margin: 0 auto !important; font: 500 12px var(--font-family-base, system-ui) !important; color: #C7C7C7 !important; padding-right: 50px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__urlbar { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; background: #2A2A2A !important; color: #C7C7C7 !important; font-size: 12px !important; border-bottom: 1px solid #1B1B1B !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__urllock { color: #888 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__url { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__topbar { display: flex !important; align-items: center !important; gap: 14px !important; padding: 10px 16px !important; background: #1B1B1B !important; color: #FFFFFF !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__menuicon { font-size: 16px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__searchpill { flex: 1 !important; padding: 6px 12px !important; border-radius: 6px !important; background: #2A2A2A !important; color: #888 !important; font: 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__topicons { display: inline-flex !important; gap: 10px !important; align-items: center !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__topicon { font-size: 14px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__topicon--brand { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; background: #6BCFC2 !important; color: #FFFFFF !important; border-radius: 6px !important; font: 800 10px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__body { padding: 22px 24px 24px !important; background: #FFFFFF !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__title { margin: 0 !important; font: 700 18px var(--font-family-base, system-ui) !important; color: #202223 !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__icon { color: #303030 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__card { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 16px !important; background: #F6F6F7 !important; border-radius: 8px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__appicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; background: #FFFFFF !important; border: 1px solid #E1E3E5 !important; border-radius: 8px !important; font: 800 16px var(--font-family-base, system-ui) !important; color: #202223 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__appname { margin: 0 !important; font: 700 14px var(--font-family-base, system-ui) !important; color: #202223 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__appdev { margin: 2px 0 0 !important; font-size: 13px !important; color: #6D7175 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__heading { margin: 6px 0 0 !important; font: 600 14px var(--font-family-base, system-ui) !important; color: #202223 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__scopes { list-style: none !important; padding: 0 !important; margin: 0 !important; border: 1px solid #E1E3E5 !important; border-radius: 8px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__scope { padding: 14px 16px !important; border-bottom: 1px solid #E1E3E5 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__scope:last-child { border-bottom: 0 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__scoperow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__scopetitle { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #202223 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__scopesub { margin: 2px 0 0 !important; font-size: 13px !important; color: #6D7175 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__caret { color: #6D7175 !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__actions { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 4px !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__install { padding: 12px 16px !important; border: 2px solid #F97316 !important; border-radius: 6px !important; background: #202223 !important; color: #FFFFFF !important; font: 700 14px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; }
.widget--mock.mock-shopify-install-app .mock-shopify-install-app__cancel { padding: 12px 16px !important; border: 1px solid #C9CCCF !important; border-radius: 6px !important; background: #FFFFFF !important; color: #202223 !important; font: 600 14px var(--font-family-base, system-ui) !important; cursor: default !important; }

/* ============================================================
   TM dashboard: Test event code field - empty, Open in Facebook focused
   /ad-integrations/facebook/#how-to-test step 1
   ============================================================ */
.widget--mock.mock-tm-fb-test-code-empty { max-width: 760px !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__title { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__add { background: transparent !important; border: 0 !important; padding: 0 !important; color: #2233FF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; opacity: 0.55 !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__card { border: 1px solid #E5E7EB !important; border-radius: 12px !important; overflow: hidden !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__head { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 16px !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__chev { color: #6B7280 !important; display: inline-flex !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__headtext { flex: 1 !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__pixelname { margin: 0 !important; font: 600 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__pixelpath { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__remove { background: transparent !important; border: 0 !important; padding: 6px !important; color: #6B7280 !important; cursor: default !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__body { border-top: 1px solid #E5E7EB !important; padding: 18px !important; background: #F9FAFB !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__group { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 12px !important; border-radius: 8px !important; background: #FFFFFF !important; border: 1px solid transparent !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__group--dim { opacity: 0.45 !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__label { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__labelrow { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__link { display: inline-flex !important; align-items: center !important; gap: 4px !important; color: #2233FF !important; font: 500 12px var(--font-family-base, system-ui) !important; text-decoration: none !important; padding: 3px 6px !important; border-radius: 4px !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__link--focus { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3), 0 8px 18px -8px rgba(249, 115, 22, 0.55) !important; padding: 3px 8px !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__sub { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__hint { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__pixsel { display: flex !important; width: 100% !important; align-items: center !important; justify-content: space-between !important; padding: 9px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__pixsub { font-weight: 400 !important; color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__input { padding: 9px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-test-code-empty .mock-tm-fb-test-code-empty__input--placeholder { color: #9CA3AF !important; }

/* ============================================================
   TM dashboard: Test event code field - active, code pasted + badge
   /ad-integrations/facebook/#how-to-test step 5
   ============================================================ */
.widget--mock.mock-tm-fb-test-code-active { max-width: 760px !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__title { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__add { background: transparent !important; border: 0 !important; padding: 0 !important; color: #2233FF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; opacity: 0.55 !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__card { border: 1px solid #E5E7EB !important; border-radius: 12px !important; overflow: hidden !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__head { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 16px !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__chev { color: #6B7280 !important; display: inline-flex !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__headtext { flex: 1 !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__pixelname { margin: 0 !important; font: 600 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__pixelpath { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 10px !important; border-radius: 999px !important; background: #DCFCE7 !important; color: #166534 !important; font: 600 12px var(--font-family-base, system-ui) !important; justify-self: start !important; width: fit-content !important; border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3), 0 8px 18px -8px rgba(249, 115, 22, 0.55) !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; background: #16A34A !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__remove { background: transparent !important; border: 0 !important; padding: 6px !important; color: #6B7280 !important; cursor: default !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__body { border-top: 1px solid #E5E7EB !important; padding: 18px !important; background: #F9FAFB !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__group { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 12px !important; border-radius: 8px !important; background: #FFFFFF !important; border: 1px solid transparent !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__group--dim { opacity: 0.45 !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__group--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25), 0 10px 24px -12px rgba(249, 115, 22, 0.45) !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__label { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__labelrow { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__link { display: inline-flex !important; align-items: center !important; gap: 4px !important; color: #2233FF !important; font: 500 12px var(--font-family-base, system-ui) !important; text-decoration: none !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__sub { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__hint { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__pixsel { display: flex !important; width: 100% !important; align-items: center !important; justify-content: space-between !important; padding: 9px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__pixsub { font-weight: 400 !important; color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-tm-fb-test-code-active .mock-tm-fb-test-code-active__input { padding: 9px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #0F0F0F !important; }

/* ============================================================
   Facebook Events Manager: Datasets landing - Test events tab
   /ad-integrations/facebook/#how-to-test step 2
   ============================================================ */
.widget--mock.mock-fb-em-datasets-test-events { max-width: 1100px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__inner { padding: 16px 18px 18px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__pagetitle { margin: 0 !important; font: 700 22px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__grid { display: grid !important; grid-template-columns: 200px 240px 1fr !important; gap: 14px !important; align-items: start !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__rail { padding: 14px 12px !important; border: 1px solid #E4E6EB !important; border-radius: 10px !important; background: #FFFFFF !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__raillist { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__railitem { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; border-radius: 6px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__railitem--active { background: #E7F3FF !important; color: #1877F2 !important; font-weight: 600 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__railicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; color: #65676B !important; font: 700 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__railicon--active { color: #1877F2 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__list { padding: 14px 12px !important; border: 1px solid #E4E6EB !important; border-radius: 10px !important; background: #FFFFFF !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__search { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; color: #65676B !important; font: 500 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__pixels { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__pixel { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 10px !important; border-radius: 8px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__pixel--active { background: #E7F3FF !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__pixicon { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; background: #F0F2F5 !important; border-radius: 8px !important; color: #65676B !important; font-size: 14px !important; flex: 0 0 28px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__warn { position: absolute !important; top: -4px !important; right: -4px !important; width: 14px !important; height: 14px !important; background: #FCD34D !important; color: #92400E !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font: 700 9px var(--font-family-base, system-ui) !important; border: 1px solid #FFFFFF !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__pixname { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__pixid { margin: 1px 0 0 !important; font: 500 11px var(--font-family-base, system-ui) !important; color: #65676B !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__panel { padding: 18px 20px !important; border: 1px solid #E4E6EB !important; border-radius: 10px !important; background: #FFFFFF !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__panelhead { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__panelicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; background: #F0F2F5 !important; border-radius: 8px !important; color: #65676B !important; font-size: 16px !important; flex: 0 0 36px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__panelname { margin: 0 !important; font: 700 17px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__paneledit { color: #65676B !important; font-size: 14px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__tabs { display: flex !important; align-items: center !important; gap: 6px !important; border-bottom: 1px solid #E4E6EB !important; padding-bottom: 4px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__tab { padding: 6px 12px !important; border-radius: 8px 8px 0 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #65676B !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__tab--active { background: #E7F3FF !important; color: #1877F2 !important; border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25), 0 6px 14px -8px rgba(249, 115, 22, 0.4) !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__dot { display: inline-block !important; width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #E11D48 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__h { margin: 6px 0 0 !important; font: 700 15px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__lede { margin: 0 !important; font-size: 13px !important; color: #1C1E21 !important; line-height: 1.55 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__link { color: #1877F2 !important; font-weight: 500 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__sub { margin: 4px 0 0 !important; font-size: 13px !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-datasets-test-events .mock-fb-em-datasets-test-events__channel { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 12px !important; border: 1px solid #C9CCCF !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 500 13px var(--font-family-base, system-ui) !important; width: 220px !important; cursor: default !important; }

/* ============================================================
   Facebook Events Manager: Test events - Select channel dropdown open
   /ad-integrations/facebook/#how-to-test step 3
   ============================================================ */
.widget--mock.mock-fb-em-test-events-channel-open { max-width: 640px !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__inner { padding: 22px 24px 24px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__head { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; background: #F0F2F5 !important; border-radius: 8px !important; color: #65676B !important; font-size: 15px !important; flex: 0 0 32px !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__name { margin: 0 !important; font: 700 17px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__edit { color: #65676B !important; font-size: 13px !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__tabs { display: flex !important; align-items: center !important; gap: 6px !important; border-bottom: 1px solid #E4E6EB !important; padding-bottom: 4px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__tab { padding: 6px 12px !important; border-radius: 8px 8px 0 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #65676B !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__tab--active { background: #E7F3FF !important; color: #1877F2 !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__dot { display: inline-block !important; width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #E11D48 !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__h { margin: 6px 0 0 !important; font: 700 15px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__lede { margin: 0 !important; font-size: 13px !important; color: #1C1E21 !important; line-height: 1.55 !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__link { color: #1877F2 !important; font-weight: 500 !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__sub { margin: 4px 0 0 !important; font-size: 13px !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__channel { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 9px 12px !important; border: 1px solid #C9CCCF !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 500 13px var(--font-family-base, system-ui) !important; width: 240px !important; cursor: default !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__dropdown { width: 240px !important; border: 1px solid #E4E6EB !important; border-radius: 8px !important; background: #FFFFFF !important; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.18) !important; overflow: hidden !important; margin-top: 2px !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__option { display: flex !important; align-items: center !important; gap: 10px !important; padding: 11px 14px !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; border-radius: 6px !important; margin: 4px !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__option--focus { background: #F0F2F5 !important; border: 2px solid #1877F2 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25) !important; outline: 2px solid #F97316 !important; outline-offset: -2px !important; }
.widget--mock.mock-fb-em-test-events-channel-open .mock-fb-em-test-events-channel-open__radio { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; border: 1.5px solid #65676B !important; background: #FFFFFF !important; flex: 0 0 18px !important; }

/* ============================================================
   Facebook Events Manager: Test events - Copy test code highlighted
   /ad-integrations/facebook/#how-to-test step 4
   ============================================================ */
.widget--mock.mock-fb-em-test-events-copy-code { max-width: 720px !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__inner { padding: 22px 24px 24px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__head { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; background: #F0F2F5 !important; border-radius: 8px !important; color: #65676B !important; font-size: 15px !important; flex: 0 0 30px !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__name { margin: 0 !important; font: 700 16px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__edit { color: #65676B !important; font-size: 13px !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__tabs { display: flex !important; align-items: center !important; gap: 6px !important; border-bottom: 1px solid #E4E6EB !important; padding-bottom: 4px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__tab { padding: 6px 10px !important; border-radius: 8px 8px 0 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #65676B !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__tab--active { background: #E7F3FF !important; color: #1877F2 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__dot { display: inline-block !important; width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #E11D48 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__h { margin: 4px 0 0 !important; font: 700 15px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__lede { margin: 0 !important; font-size: 13px !important; color: #1C1E21 !important; line-height: 1.55 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__sub { margin: 4px 0 0 !important; font-size: 13px !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__channel { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 12px !important; border: 1px solid #C9CCCF !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 500 13px var(--font-family-base, system-ui) !important; width: 200px !important; cursor: default !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__card { margin-top: 6px !important; border: 1px solid #E4E6EB !important; border-radius: 10px !important; background: #FFFFFF !important; padding: 14px 16px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__card--collapsed { padding: 14px 16px !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__cardtitle { margin: 0 !important; font: 700 14px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__cardbody { margin: 0 !important; font-size: 13px !important; color: #1C1E21 !important; line-height: 1.55 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__steplabel { margin: 4px 0 0 !important; font: 700 13px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__steps { list-style: decimal inside !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; color: #1C1E21 !important; font-size: 13px !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__steps li { padding-left: 6px !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__steptext { margin: 0 0 8px !important; display: inline !important; font-size: 13px !important; color: #1C1E21 !important; line-height: 1.55 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__coderow { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 8px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__chip { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 7px 12px !important; background: #F0F2F5 !important; border-radius: 6px !important; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__chipkey { color: #65676B !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__chipval { color: #1C1E21 !important; font-weight: 700 !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__copy { padding: 7px 14px !important; border: 1px solid #C9CCCF !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__copy--focus { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 18px -8px rgba(249, 115, 22, 0.55) !important; }
.widget--mock.mock-fb-em-test-events-copy-code .mock-fb-em-test-events-copy-code__graph { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 14px !important; border: 0 !important; border-radius: 6px !important; background: #1877F2 !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; margin-top: 8px !important; }

/* ============================================================
   Facebook Events Manager: Test events - Receiving activity table
   /ad-integrations/facebook/#how-to-test step 6
   ============================================================ */
.widget--mock.mock-fb-em-test-events-receiving { max-width: 1100px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__inner { padding: 22px 24px 24px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #1C1E21 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__head { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; background: #F0F2F5 !important; border-radius: 8px !important; color: #65676B !important; font-size: 15px !important; flex: 0 0 32px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__name { margin: 0 !important; font: 700 17px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; flex: 1 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__edit { color: #65676B !important; font-size: 13px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__create { padding: 8px 16px !important; border: 0 !important; border-radius: 6px !important; background: #2D7A4F !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__tabs { display: flex !important; align-items: center !important; gap: 6px !important; border-bottom: 1px solid #E4E6EB !important; padding-bottom: 4px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__tab { padding: 6px 12px !important; border-radius: 8px 8px 0 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #65676B !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__tab--active { background: #E7F3FF !important; color: #1877F2 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__dot { display: inline-block !important; width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #E11D48 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__h { margin: 4px 0 0 !important; font: 700 15px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__lede { margin: 0 !important; font-size: 13px !important; color: #1C1E21 !important; line-height: 1.55 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__sub { margin: 4px 0 0 !important; font-size: 13px !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__channel { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 12px !important; border: 1px solid #C9CCCF !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 500 13px var(--font-family-base, system-ui) !important; width: 180px !important; cursor: default !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__status { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; margin-top: 8px !important; flex-wrap: wrap !important; border: 2px solid #F97316 !important; border-radius: 10px !important; padding: 12px 14px !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18) !important; background: #FFFFFF !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__statusleft { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__statustitle { margin: 0 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__statusdot { display: inline-block !important; width: 9px !important; height: 9px !important; border-radius: 999px !important; background: #16A34A !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__statussub { margin: 0 !important; font-size: 12px !important; color: #65676B !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__pipe { color: #C9CCCF !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__chip { display: inline-flex !important; align-items: center !important; padding: 4px 8px !important; background: #F0F2F5 !important; border-radius: 6px !important; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__statusright { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__filter { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 7px 12px !important; border: 1px solid #C9CCCF !important; border-radius: 6px !important; font: 500 12px var(--font-family-base, system-ui) !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__clear { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 7px 12px !important; border: 1px solid #C9CCCF !important; border-radius: 6px !important; background: #FFFFFF !important; color: #1C1E21 !important; font: 500 12px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__tablewrap { margin-top: 8px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__table { width: 100% !important; border-collapse: collapse !important; font-size: 12.5px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__table th { text-align: left !important; padding: 10px 12px !important; border-bottom: 1px solid #E4E6EB !important; color: #1C1E21 !important; font: 700 12px var(--font-family-base, system-ui) !important; white-space: nowrap !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__table td { padding: 12px !important; border-bottom: 1px solid #F0F2F5 !important; vertical-align: middle !important; color: #1C1E21 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__warnicon { color: #B45309 !important; font-size: 12px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__ev { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__evicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 5px !important; background: #F0F2F5 !important; color: #65676B !important; font-size: 11px !important; flex: 0 0 22px !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__sub { font-size: 12px !important; color: #65676B !important; font-weight: 500 !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__pill { display: inline-flex !important; align-items: center !important; padding: 3px 9px !important; background: #DCFCE7 !important; color: #166534 !important; border-radius: 999px !important; font: 600 11px var(--font-family-base, system-ui) !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__server { display: inline-flex !important; align-items: center !important; padding: 3px 9px !important; border-radius: 999px !important; background: #E7F3FF !important; color: #1877F2 !important; font: 600 11px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__mono { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #1C1E21 !important; }
@media (max-width: 720px) {
  .widget--mock.mock-fb-em-test-events-receiving .mock-fb-em-test-events-receiving__tablewrap { overflow-x: auto !important; }
}

/* ============================================================
   TrueMetriks Ad integrations panel - Google Ads tab.
   ============================================================ */
.widget--mock.mock-tm-gads-ad-integrations { max-width: 900px !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__inner {
  padding: 20px 22px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 18px !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__headleft { display: flex !important; gap: 12px !important; align-items: flex-start !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__headicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; background: #EEF2FF !important; color: #2233FF !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__headtitle { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__headsub { font-size: 13px !important; color: #6B7280 !important; margin: 2px 0 0 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; border-radius: 999px !important; background: #ECFDF5 !important; color: #047857 !important; border: 1px solid #A7F3D0 !important; font: 600 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__rule { border: 0 !important; border-top: 1px solid #E5E7EB !important; margin: 0 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__title { font-size: 15px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__sub { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__tabs { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 2px !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__tab { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__tab--active { border-color: #2233FF !important; box-shadow: 0 0 0 2px rgba(34, 51, 255, 0.18) !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__tabicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 5px !important; font: 700 12px var(--font-family-base, system-ui) !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__tabicon--fb { background: #1877F2 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__tabicon--google { background: #FBBF24 !important; color: #1F2937 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__tabicon--tiktok { background: #000000 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__tabicon--ga { background: #F97316 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__tabicon--stripe { background: #635BFF !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__tabicon--whop { background: #FF5A1F !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; margin-left: 2px !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__dot--green { background: #10B981 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__dot--gray { background: #D1D5DB !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__panel { border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 16px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__panelhead { display: flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__panelicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 8px !important; background: #FBBF24 !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__panelbody { flex: 1 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__paneltitle { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__statuspill { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 2px 10px !important; border-radius: 999px !important; background: #F3F4F6 !important; color: #6B7280 !important; font: 500 11px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__statusdot { width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #9CA3AF !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__panelsub { font-size: 13px !important; color: #6B7280 !important; margin: 2px 0 0 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__connect { padding: 9px 16px !important; border-radius: 6px !important; border: 2px solid #F97316 !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; white-space: nowrap !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__warn { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border: 1px solid #FCD34D !important; background: #FFFBEB !important; border-radius: 8px !important; color: #92400E !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__warnicon { flex: 0 0 16px !important; margin-top: 2px !important; color: #B45309 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__warntitle { margin: 0 !important; font-size: 13px !important; color: #92400E !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__warntitle strong { color: #78350F !important; font-weight: 700 !important; }
.widget--mock.mock-tm-gads-ad-integrations .mock-tm-gads-ad-integrations__warnbody { margin: 2px 0 0 !important; font-size: 13px !important; color: #92400E !important; line-height: 1.5 !important; }

/* ============================================================
   Google OAuth popup shell - shared by all google-oauth-* widgets.
   ============================================================ */
.widget--mock.mock-google-oauth { max-width: 960px !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__inner {
  display: block !important;
  background: #0E1116 !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #E8EAED !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__page {
  padding: 28px 28px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__card {
  background: #1B1F24 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__chrome {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px 26px !important;
  border-bottom: 1px solid #2A2F36 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__chromelabel {
  font-size: 13px !important;
  color: #E8EAED !important;
  font-weight: 500 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__body {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
  padding: 30px 32px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__left {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__right {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__tmlogo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  background: #1A1F66 !important;
  border-radius: 4px !important;
  padding: 10px 8px !important;
  box-sizing: border-box !important;
  flex: 0 0 64px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__tmlogo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__title {
  font-size: 28px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  color: #E8EAED !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__title--lg {
  font-size: 30px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__subtitle {
  font-size: 14px !important;
  margin: 0 !important;
  color: #E8EAED !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__link {
  color: #8AB4F8 !important;
  text-decoration: none !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__accounts {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__account {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 8px !important;
  border-bottom: 1px solid #2A2F36 !important;
  border-radius: 4px !important;
  cursor: default !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__account--use-another {
  border-bottom: none !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__account--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  font: 600 13px var(--font-family-base, system-ui) !important;
  color: #FFFFFF !important;
  flex: 0 0 30px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__avatar--sm { width: 22px !important; height: 22px !important; flex: 0 0 22px !important; font-size: 11px !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__avatar--red { background: #DB4437 !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__avatar--orange { background: #E8704F !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__avatar--gray { background: #5F6368 !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__avatar--purple { background: #7B61FF !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__avatar--teal { background: #2F8C7C !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__avatar--ghost { background: transparent !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__accountmeta { display: flex !important; flex-direction: column !important; gap: 1px !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__accountname {
  margin: 0 !important;
  font-size: 14px !important;
  color: #E8EAED !important;
  font-weight: 500 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__accountemail {
  margin: 0 !important;
  font-size: 13px !important;
  color: #9AA0A6 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__legal {
  margin: 18px 0 0 !important;
  font-size: 12px !important;
  color: #E8EAED !important;
  line-height: 1.5 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__legal a,
.widget--mock.mock-google-oauth .mock-google-oauth__rightheadinglink,
.widget--mock.mock-google-oauth .mock-google-oauth__bodytext a,
.widget--mock.mock-google-oauth .mock-google-oauth__scopebody a {
  color: #8AB4F8 !important;
  text-decoration: none !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__accountchip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px 6px 6px !important;
  border: 1px solid #5F6368 !important;
  border-radius: 999px !important;
  width: fit-content !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__accountchip--plain {
  border: none !important;
  padding: 0 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__accountchipemail {
  font-size: 13px !important;
  color: #E8EAED !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__caret {
  color: #9AA0A6 !important;
  font-size: 10px !important;
  text-transform: lowercase !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__rightheading {
  font-size: 15px !important;
  color: #E8EAED !important;
  margin: 0 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__inforow {
  display: flex !important;
  gap: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #2A2F36 !important;
  align-items: flex-start !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__infoicon {
  flex: 0 0 16px !important;
  margin-top: 2px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__infovalue { margin: 0 !important; font-size: 14px !important; color: #E8EAED !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__infolabel { margin: 1px 0 0 !important; font-size: 12px !important; color: #9AA0A6 !important; }
.widget--mock.mock-google-oauth .mock-google-oauth__bodytext {
  margin: 0 !important;
  font-size: 13px !important;
  color: #E8EAED !important;
  line-height: 1.5 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__btn {
  padding: 9px 22px !important;
  border-radius: 999px !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
  border: 1px solid #5F6368 !important;
  background: transparent !important;
  color: #8AB4F8 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__btn--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
  padding: 8px 21px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__scoperow {
  display: grid !important;
  grid-template-columns: 14px 1fr 22px !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #2A2F36 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__scopebullet {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #4285F4 !important;
  display: inline-block !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__scopetext {
  margin: 0 !important;
  font-size: 13px !important;
  color: #E8EAED !important;
  line-height: 1.5 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__checkbox {
  width: 18px !important;
  height: 18px !important;
  border-radius: 3px !important;
  border: 1.5px solid #9AA0A6 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  justify-self: end !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__checkbox--focus {
  border-color: #F97316 !important;
  background: #2233FF !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__trustheading {
  margin: 14px 0 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #E8EAED !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 4px 6px 12px !important;
  font-size: 12px !important;
  color: #9AA0A6 !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__footerlinks {
  display: inline-flex !important;
  gap: 18px !important;
}
.widget--mock.mock-google-oauth .mock-google-oauth__footerlinks a,
.widget--mock.mock-google-oauth .mock-google-oauth__footer a {
  color: #9AA0A6 !important;
  text-decoration: none !important;
}

/* ============================================================
   TM Google Ads connected card - Step 1 dropdown closed.
   ============================================================ */
.widget--mock.mock-tm-gads-connected { max-width: 900px !important; }
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__inner {
  padding: 20px 22px 22px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__panel {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__panelhead {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__panelicon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: #FBBF24 !important;
  color: #FFFFFF !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__panelbody { flex: 1 !important; }
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__paneltitle {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__statuspill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #ECFDF5 !important;
  color: #047857 !important;
  border: 1px solid #A7F3D0 !important;
  font: 500 11px var(--font-family-base, system-ui) !important;
  justify-self: start !important;
  width: fit-content !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__panelsub {
  font-size: 13px !important;
  color: #6B7280 !important;
  margin: 4px 0 0 !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__disconnect {
  padding: 7px 14px !important;
  border-radius: 6px !important;
  border: 1px solid #D1D5DB !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__rule {
  border: 0 !important;
  border-top: 1px solid #E5E7EB !important;
  margin: 0 !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__section {
  padding: 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__steplabel {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__dropdown {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 14px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #6B7280 !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
  width: 50% !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__dropdown--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
  padding: 10px 13px !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__caret { color: #6B7280 !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__refresh {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__refreshicon { display: inline-flex !important; color: #374151 !important; }
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__info {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  border: 1px solid #9CA3AF !important;
  color: #6B7280 !important;
  font: 600 10px var(--font-family-base, system-ui) !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__warn {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border: 1px solid #FCD34D !important;
  background: #FFFBEB !important;
  border-radius: 8px !important;
  color: #92400E !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__warnicon { flex: 0 0 16px !important; margin-top: 2px !important; color: #B45309 !important; }
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__warntitle { margin: 0 !important; font-size: 13px !important; color: #92400E !important; }
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__warntitle strong { color: #78350F !important; font-weight: 700 !important; }
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__warnbody { margin: 2px 0 0 !important; font-size: 13px !important; color: #92400E !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 16px !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__hint {
  font-size: 13px !important;
  color: #6B7280 !important;
  text-decoration: none !important;
}
.widget--mock.mock-tm-gads-connected .mock-tm-gads-connected__save {
  padding: 9px 16px !important;
  border-radius: 6px !important;
  border: 1px solid #C7D2FE !important;
  background: #A5B4FC !important;
  color: #312E81 !important;
  font: 600 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}

/* ============================================================
   TM Google Ads customer accounts dropdown - open state.
   ============================================================ */
.widget--mock.mock-tm-gads-dropdown-open { max-width: 760px !important; }
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__inner {
  padding: 20px 22px 22px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__steplabel {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__field {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 14px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #374151 !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__caret { color: #6B7280 !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__menu {
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.18) !important;
}
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px !important;
}
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  cursor: default !important;
  border: 2px solid transparent !important;
}
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__item--focus {
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
  background: #FFFFFF !important;
}
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__check {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1.5px solid #9CA3AF !important;
  background: #FFFFFF !important;
  flex: 0 0 18px !important;
  display: inline-block !important;
}
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__meta { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__name { margin: 0 !important; font-size: 14px !important; color: #0F0F0F !important; font-weight: 600 !important; }
.widget--mock.mock-tm-gads-dropdown-open .mock-tm-gads-dropdown-open__id { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; }

/* ============================================================
   TM Google Ads conversion-actions panel (empty + checked).
   Shared via .mock-tm-gads-cv-actions; -checked variant adds tick.
   ============================================================ */
.widget--mock.mock-tm-gads-cv-actions { max-width: 880px !important; }
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__inner {
  padding: 20px 22px 22px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__steplabel {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__card {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__cardhead {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: #F9FAFB !important;
  border-bottom: 1px solid #E5E7EB !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__custname { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__custid { margin: 1px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__remove { font-size: 13px !important; color: #DC2626 !important; text-decoration: none !important; font-weight: 500 !important; }
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__cardbody { padding: 18px 16px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__sectionlabel { margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__sectionsub { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 24px !important;
  margin-top: 2px !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__opt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: #0F0F0F !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  border: 2px solid transparent !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__opt--focus {
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__check {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1.5px solid #9CA3AF !important;
  background: #FFFFFF !important;
  flex: 0 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__check--focus {
  border-color: #F97316 !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__check--ticked {
  border-color: #111827 !important;
  background: #111827 !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__create {
  align-self: flex-start !important;
  padding: 9px 16px !important;
  border-radius: 6px !important;
  border: 1px solid #D1D5DB !important;
  background: #F3F4F6 !important;
  color: #374151 !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-cv-actions .mock-tm-gads-cv-actions__create--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important;
  padding: 8px 15px !important;
}

/* ============================================================
   Google Ads left nav + flyout (Goals > Conversions > Summary).
   ============================================================ */
.widget--mock.mock-gads-nav { max-width: 760px !important; }
.widget--mock.mock-gads-nav .mock-gads-nav__inner {
  display: flex !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
}
.widget--mock.mock-gads-nav .mock-gads-nav__rail {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 14px 8px !important;
  background: #FFFFFF !important;
  border-right: 1px solid #E8EAED !important;
  width: 96px !important;
  flex: 0 0 96px !important;
}
.widget--mock.mock-gads-nav .mock-gads-nav__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 4px !important;
  position: relative !important;
}
.widget--mock.mock-gads-nav .mock-gads-nav__item--selected {
  background: #F1F3F4 !important;
  border-radius: 8px !important;
}
.widget--mock.mock-gads-nav .mock-gads-nav__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; }
.widget--mock.mock-gads-nav .mock-gads-nav__icon--create { background: #FFFFFF !important; border-radius: 999px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.18) !important; padding: 4px !important; }
.widget--mock.mock-gads-nav .mock-gads-nav__pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 28px !important;
  background: #D2E3FC !important;
  border-radius: 999px !important;
}
.widget--mock.mock-gads-nav .mock-gads-nav__label { font-size: 12px !important; color: #5F6368 !important; }
.widget--mock.mock-gads-nav .mock-gads-nav__label--active { color: #1A73E8 !important; font-weight: 500 !important; }
.widget--mock.mock-gads-nav .mock-gads-nav__pointer {
  position: absolute !important;
  right: -10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-right: 10px solid #FFFFFF !important;
  filter: drop-shadow(-1px 0 0 #E8EAED) !important;
}
.widget--mock.mock-gads-nav .mock-gads-nav__flyout {
  flex: 1 !important;
  padding: 18px 22px !important;
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-gads-nav .mock-gads-nav__group {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 1px solid #DADCE0 !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
  color: #202124 !important;
}
.widget--mock.mock-gads-nav .mock-gads-nav__chev { color: #5F6368 !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-gads-nav .mock-gads-nav__subnav { list-style: none !important; margin: 0 !important; padding: 0 18px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-gads-nav .mock-gads-nav__subitem {
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  color: #202124 !important;
  border: 2px solid transparent !important;
  cursor: default !important;
}
.widget--mock.mock-gads-nav .mock-gads-nav__subitem--focus {
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
  background: #FFFFFF !important;
}

/* ============================================================
   Google Ads Purchase goal expanded with TM-Purchase row.
   ============================================================ */
.widget--mock.mock-gads-purchase-goal { max-width: 1100px !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__inner {
  padding: 18px 20px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__head {
  display: grid !important;
  grid-template-columns: 1.6fr 0.9fr 1.2fr 1.4fr auto !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 16px 18px !important;
  background: #FFFFFF !important;
  border-radius: 10px !important;
  border: 1px solid #E8EAED !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__headleft { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__defaultbadge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  background: #F1F3F4 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  color: #5F6368 !important;
  width: fit-content !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #202124 !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__cardicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__headmid { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__metaheading { margin: 0 !important; font-size: 12px !important; color: #5F6368 !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__metavalue { margin: 0 !important; font-size: 14px !important; color: #202124 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__needsattn { display: inline-flex !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__underline { text-decoration: underline dotted !important; text-underline-offset: 3px !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__headright { display: flex !important; align-items: center !important; gap: 14px !important; justify-self: end !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__editlink { font-size: 13px !important; color: #1A73E8 !important; text-decoration: none !important; font-weight: 500 !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__chev {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #1A73E8 !important;
  border-radius: 4px !important;
  color: #1A73E8 !important;
  font-size: 11px !important;
  text-transform: lowercase !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__tablewrap { background: #FFFFFF !important; border-radius: 10px !important; border: 1px solid #E8EAED !important; overflow-x: auto !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__th {
  text-align: left !important;
  font-weight: 500 !important;
  color: #5F6368 !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #E8EAED !important;
  background: #FFFFFF !important;
  white-space: nowrap !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__th--right { text-align: right !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__td {
  padding: 12px 14px !important;
  color: #202124 !important;
  border-bottom: 1px solid #F1F3F4 !important;
  white-space: nowrap !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__td--right { text-align: right !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__tr--focus {
  outline: 2px solid #F97316 !important;
  outline-offset: -2px !important;
  box-shadow: inset 0 0 0 4px rgba(249, 115, 22, 0.18) !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__cell-check {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid #80868B !important;
  border-radius: 2px !important;
  background: #FFFFFF !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__link { color: #1A73E8 !important; text-decoration: none !important; }
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__pill {
  display: inline-flex !important;
  padding: 3px 9px !important;
  background: #F1F3F4 !important;
  color: #5F6368 !important;
  border-radius: 4px !important;
  font: 500 12px var(--font-family-base, system-ui) !important;
  justify-self: start !important;
  width: fit-content !important;
}
.widget--mock.mock-gads-purchase-goal .mock-gads-purchase-goal__pagination { padding: 10px 14px !important; text-align: right !important; color: #5F6368 !important; font-size: 13px !important; }

/* ============================================================
   TM Google Ads Fire rules - empty (just Add fire rule button).
   ============================================================ */
.widget--mock.mock-tm-gads-fire-rules { max-width: 760px !important; }
.widget--mock.mock-tm-gads-fire-rules .mock-tm-gads-fire-rules__inner {
  padding: 20px 22px 22px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.widget--mock.mock-tm-gads-fire-rules .mock-tm-gads-fire-rules__sectionlabel { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-fire-rules .mock-tm-gads-fire-rules__sub { margin: 0 !important; font-size: 13px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-fire-rules .mock-tm-gads-fire-rules__addbtn {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-fire-rules .mock-tm-gads-fire-rules__addbtn--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
  padding: 7px 13px !important;
}
.widget--mock.mock-tm-gads-fire-rules .mock-tm-gads-fire-rules__plus { font: 700 14px var(--font-family-base, system-ui) !important; color: #6B7280 !important; }

/* ============================================================
   TM Fire rule - Event dropdown open with Purchase highlighted.
   ============================================================ */
.widget--mock.mock-tm-gads-fr-event { max-width: 880px !important; }
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__inner {
  padding: 20px 22px 22px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__sectionlabel { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto !important;
  gap: 14px !important;
  align-items: end !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
}
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__field { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__fieldlabel { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; font-weight: 500 !important; }
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #6B7280 !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__selectvalue--filled { color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__caret { color: #6B7280 !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  color: #6B7280 !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
  text-transform: lowercase !important;
  align-self: end !important;
  margin-bottom: 4px !important;
}
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__menu {
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.18) !important;
  width: calc(50% - 7px) !important;
}
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__list { list-style: none !important; margin: 0 !important; padding: 4px !important; }
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__option {
  padding: 9px 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  color: #0F0F0F !important;
  border: 2px solid transparent !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-fr-event .mock-tm-gads-fr-event__option--focus {
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
}

/* ============================================================
   TM Fire rule - Conversion action dropdown open.
   ============================================================ */
.widget--mock.mock-tm-gads-fr-action { max-width: 880px !important; }
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__inner {
  padding: 20px 22px 22px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__sectionlabel { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto !important;
  gap: 14px !important;
  align-items: end !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
}
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__field { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__fieldlabel { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; font-weight: 500 !important; }
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #6B7280 !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__selectvalue--filled { color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__caret { color: #6B7280 !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  color: #6B7280 !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
  text-transform: lowercase !important;
  align-self: end !important;
  margin-bottom: 4px !important;
}
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__menu {
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.18) !important;
  width: calc(50% - 7px) !important;
  margin-left: calc(50% + 7px) !important;
}
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__list { list-style: none !important; margin: 0 !important; padding: 4px !important; }
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  color: #0F0F0F !important;
  border: 2px solid transparent !important;
  cursor: default !important;
  background: #F3F4F6 !important;
}
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__option--focus {
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
}
.widget--mock.mock-tm-gads-fr-action .mock-tm-gads-fr-action__category { color: #6B7280 !important; font-size: 12px !important; }

/* ============================================================
   TM Fire rule - filled out with Save changes highlighted.
   ============================================================ */
.widget--mock.mock-tm-gads-fr-filled { max-width: 980px !important; }
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__inner {
  padding: 20px 22px 22px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__sectionlabel { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__row {
  display: grid !important;
  grid-template-columns: 1.4fr 1.6fr 1fr auto !important;
  gap: 14px !important;
  align-items: end !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
}
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__field { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__fieldlabel { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; font-weight: 500 !important; }
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #6B7280 !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__selectvalue--filled { color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__caret { color: #6B7280 !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  color: #6B7280 !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
  text-transform: lowercase !important;
  align-self: end !important;
  margin-bottom: 4px !important;
}
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__addbtn {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-top: 6px !important;
  border-top: 1px solid #E5E7EB !important;
  margin-top: 6px !important;
}
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__hint { font-size: 13px !important; color: #6B7280 !important; text-decoration: none !important; }
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__save {
  padding: 9px 16px !important;
  border-radius: 6px !important;
  border: 1px solid #C7D2FE !important;
  background: #A5B4FC !important;
  color: #312E81 !important;
  font: 600 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-fr-filled .mock-tm-gads-fr-filled__save--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important;
  padding: 8px 15px !important;
}

/* ============================================================
   Google Ads Purchase goal - row selected with Remove bar.
   Mirrors mock-gads-purchase-goal styling + adds blue action bar.
   ============================================================ */
.widget--mock.mock-gads-purchase-goal-selected { max-width: 1100px !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__inner {
  padding: 18px 20px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__head {
  display: grid !important;
  grid-template-columns: 1.6fr 0.9fr 1.2fr 1.4fr auto !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 16px 18px !important;
  background: #FFFFFF !important;
  border-radius: 10px !important;
  border: 1px solid #E8EAED !important;
}
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__headleft { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__defaultbadge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  background: #F1F3F4 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  color: #5F6368 !important;
  width: fit-content !important;
}
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__title { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; font-size: 18px !important; font-weight: 500 !important; color: #202124 !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__cardicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__headmid { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__metaheading { margin: 0 !important; font-size: 12px !important; color: #5F6368 !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__metavalue { margin: 0 !important; font-size: 14px !important; color: #202124 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__needsattn { display: inline-flex !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__underline { text-decoration: underline dotted !important; text-underline-offset: 3px !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__headright { display: flex !important; align-items: center !important; gap: 14px !important; justify-self: end !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__editlink { font-size: 13px !important; color: #1A73E8 !important; text-decoration: none !important; font-weight: 500 !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__chev {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #1A73E8 !important;
  border-radius: 4px !important;
  color: #1A73E8 !important;
  font-size: 11px !important;
  text-transform: lowercase !important;
}
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__tablewrap { background: #FFFFFF !important; border-radius: 10px !important; border: 1px solid #E8EAED !important; overflow-x: auto !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__actionbar {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 10px 18px !important;
  background: #1A73E8 !important;
  color: #FFFFFF !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
}
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__selcount { color: #FFFFFF !important; font-weight: 500 !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__bardivider { width: 1px !important; height: 18px !important; background: rgba(255,255,255,0.4) !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__removebtn {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
  padding: 4px 8px !important;
  cursor: default !important;
}
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__removebtn--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.45) !important;
  border-radius: 6px !important;
  padding: 3px 7px !important;
  background: rgba(255,255,255,0.08) !important;
}
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__barclose { margin-left: auto !important; display: inline-flex !important; cursor: default !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__th { text-align: left !important; font-weight: 500 !important; color: #5F6368 !important; padding: 12px 14px !important; border-bottom: 1px solid #E8EAED !important; background: #FFFFFF !important; white-space: nowrap !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__th--right { text-align: right !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__td { padding: 12px 14px !important; color: #202124 !important; border-bottom: 1px solid #F1F3F4 !important; white-space: nowrap !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__td--right { text-align: right !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__cell-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid #80868B !important;
  border-radius: 2px !important;
  background: #FFFFFF !important;
}
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__cell-check--header,
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__cell-check--checked {
  background: #1A73E8 !important;
  border-color: #1A73E8 !important;
}
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__tr--checked .mock-gads-purchase-goal-selected__td { background: #E8F0FE !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__link { color: #1A73E8 !important; text-decoration: none !important; }
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__pill {
  display: inline-flex !important;
  padding: 3px 9px !important;
  background: #F1F3F4 !important;
  color: #5F6368 !important;
  border-radius: 4px !important;
  font: 500 12px var(--font-family-base, system-ui) !important;
  justify-self: start !important;
  width: fit-content !important;
}
.widget--mock.mock-gads-purchase-goal-selected .mock-gads-purchase-goal-selected__pagination { padding: 10px 14px !important; text-align: right !important; color: #5F6368 !important; font-size: 13px !important; }

/* ============================================================
   Google Ads Remove conversion action confirmation page.
   ============================================================ */
.widget--mock.mock-gads-remove-confirm { max-width: 1000px !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__inner {
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
}
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__topbar {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 22px !important;
  border-bottom: 1px solid #E8EAED !important;
}
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__closebtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #F1F3F4 !important;
}
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__topbartitle { margin: 0 !important; font-size: 18px !important; font-weight: 500 !important; color: #202124 !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__body { padding: 22px 30px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__heading { margin: 0 !important; font-size: 15px !important; font-weight: 500 !important; color: #202124 !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__bodytext { margin: 0 !important; font-size: 13px !important; color: #5F6368 !important; line-height: 1.5 !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__bodytext a { color: #1A73E8 !important; text-decoration: underline !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__bodytext strong { color: #202124 !important; font-weight: 600 !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__subhead { margin: 6px 0 0 !important; font-size: 14px !important; font-weight: 600 !important; color: #202124 !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__preview { border: 1px solid #E8EAED !important; border-radius: 10px !important; padding: 0 !important; margin-top: 10px !important; overflow: hidden !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__previewhead { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 18px !important; border-bottom: 1px solid #E8EAED !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__previewicon { display: inline-flex !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__previewtitle { font-size: 15px !important; color: #202124 !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__previewmeta { font-size: 12px !important; color: #5F6368 !important; text-decoration: underline dotted !important; text-underline-offset: 3px !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__th { text-align: left !important; font-weight: 500 !important; color: #5F6368 !important; padding: 12px 14px !important; border-bottom: 1px solid #E8EAED !important; background: #FFFFFF !important; white-space: nowrap !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__td { padding: 12px 14px !important; color: #202124 !important; white-space: nowrap !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__infobanner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: #E8F0FE !important;
  border-radius: 8px !important;
  margin-top: 6px !important;
}
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__infoicon { display: inline-flex !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__infotext { flex: 1 !important; font-size: 13px !important; color: #202124 !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__reviewlink { font-size: 13px !important; color: #1A73E8 !important; text-decoration: none !important; font-weight: 500 !important; }
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__footer {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 30px !important;
  border-top: 1px solid #E8EAED !important;
}
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__save {
  padding: 8px 22px !important;
  border-radius: 4px !important;
  border: 1px solid #1A73E8 !important;
  background: #1A73E8 !important;
  color: #FFFFFF !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__save--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important;
  padding: 7px 21px !important;
}
.widget--mock.mock-gads-remove-confirm .mock-gads-remove-confirm__cancel {
  padding: 8px 22px !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #1A73E8 !important;
  font: 500 14px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}

/* ============================================================
   TM Google Ads - Refresh from Google Ads button highlighted.
   ============================================================ */
.widget--mock.mock-tm-gads-refresh { max-width: 800px !important; }
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__inner {
  padding: 20px 22px 22px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__card {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__sectionlabel { margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__sub { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 2px !important; }
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__opt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: #0F0F0F !important;
  padding: 4px 6px !important;
}
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__check {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1.5px solid #9CA3AF !important;
  background: #FFFFFF !important;
  flex: 0 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__check--ticked { border-color: #111827 !important; background: #111827 !important; }
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__createdtag { color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__refreshbtn {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #374151 !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__refreshbtn--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important;
  padding: 8px 13px !important;
}
.widget--mock.mock-tm-gads-refresh .mock-tm-gads-refresh__refreshicon { display: inline-flex !important; color: #374151 !important; }

/* ============================================================
   TM Google Ads - Custom event creator (dropdown open).
   ============================================================ */
.widget--mock.mock-tm-gads-cc-dd { max-width: 1100px !important; }
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__inner {
  padding: 22px 24px 24px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  position: relative !important;
}
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__title { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__sub { margin: 0 !important; font-size: 13px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.2fr 0.9fr auto !important;
  gap: 12px !important;
  align-items: end !important;
  margin-top: 4px !important;
}
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__field { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__fieldlabel { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; font-weight: 500 !important; }
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #6B7280 !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__selectvalue--filled { color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__caret { color: #6B7280 !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__input {
  padding: 10px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #6B7280 !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  letter-spacing: 0.02em !important;
}
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__create {
  padding: 10px 18px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  align-self: end !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__select--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
  padding: 9px 11px !important;
}
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__menu {
  position: absolute !important;
  top: 110px !important;
  left: 24px !important;
  width: calc(20% + 4px) !important;
  min-width: 200px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.18) !important;
  z-index: 5 !important;
}
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__list { list-style: none !important; margin: 0 !important; padding: 6px !important; }
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  color: #0F0F0F !important;
  border: 2px solid transparent !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__option--focus {
  background: #F3F4F6 !important;
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
}
.widget--mock.mock-tm-gads-cc-dd .mock-tm-gads-cc-dd__tick { display: inline-flex !important; }

/* ============================================================
   TM Google Ads - Custom event creator (filled + Create highlighted).
   ============================================================ */
.widget--mock.mock-tm-gads-cc-filled { max-width: 1100px !important; }
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__inner {
  padding: 22px 24px 24px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__title { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__sub { margin: 0 !important; font-size: 13px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.2fr 0.9fr auto !important;
  gap: 12px !important;
  align-items: end !important;
  margin-top: 4px !important;
}
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__field { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__fieldlabel { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; font-weight: 500 !important; }
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #6B7280 !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__selectvalue--filled { color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__caret { color: #6B7280 !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__input {
  padding: 10px 12px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
}
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__create {
  padding: 10px 18px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  align-self: end !important;
  cursor: default !important;
}
.widget--mock.mock-tm-gads-cc-filled .mock-tm-gads-cc-filled__create--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important;
  padding: 9px 17px !important;
}

/* ============================================================
   Google Ads - Recent conversions hover popover (diagnostics).
   ============================================================ */
.widget--mock.mock-gads-diag-hover { max-width: 720px !important; }
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__inner {
  padding: 30px 26px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: flex-start !important;
}
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__row { display: flex !important; }
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__pillpos { justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__pill {
  display: inline-flex !important;
  padding: 5px 12px !important;
  background: #F1F3F4 !important;
  color: #5F6368 !important;
  border-radius: 4px !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  text-decoration: underline dotted !important;
  text-underline-offset: 3px !important;
  width: fit-content !important;
}
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__pop {
  background: #FFFFFF !important;
  border: 1px solid #E8EAED !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px -10px rgba(60, 64, 67, 0.25), 0 4px 8px -4px rgba(60, 64, 67, 0.18) !important;
  padding: 18px 20px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 520px !important;
}
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__poptitle { margin: 0 !important; font-size: 15px !important; font-weight: 500 !important; color: #202124 !important; }
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__popbody { display: flex !important; flex-direction: column !important; gap: 10px !important; padding-bottom: 4px !important; }
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__popline { display: grid !important; grid-template-columns: 24px 1fr auto !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__halficon,
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__check { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__lineLabel { font-size: 14px !important; color: #202124 !important; }
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__diaglink {
  font-size: 13px !important;
  color: #1A73E8 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  background: #E8F0FE !important;
}
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__diaglink--focus {
  border: 2px solid #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
  padding: 4px 8px !important;
}
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__poplearn {
  border-top: 1px solid #E8EAED !important;
  padding: 12px 0 !important;
  margin-top: 2px !important;
}
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__learn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  color: #1A73E8 !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}
.widget--mock.mock-gads-diag-hover .mock-gads-diag-hover__learnicon { display: inline-flex !important; }

/* ============================================================
   Google Ads - Data quality (diagnostics) page.
   ============================================================ */
.widget--mock.mock-gads-dq { max-width: 1100px !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__inner {
  padding: 26px 30px 30px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-gads-dq .mock-gads-dq__title { margin: 0 !important; font-size: 20px !important; font-weight: 400 !important; color: #202124 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__sub { margin: 0 !important; font-size: 13px !important; color: #5F6368 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__card {
  border: 1px solid #E8EAED !important;
  border-radius: 10px !important;
  padding: 22px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: #FFFFFF !important;
}
.widget--mock.mock-gads-dq .mock-gads-dq__statlabel { margin: 0 !important; font-size: 28px !important; font-weight: 400 !important; color: #202124 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__bars { display: flex !important; gap: 4px !important; margin: 2px 0 6px !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__bar { width: 80px !important; height: 5px !important; border-radius: 3px !important; background: #E8EAED !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__bar--on { background: #34A853 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__statsub { margin: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: #202124 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__statdetail { margin: 0 !important; font-size: 13px !important; color: #5F6368 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__row {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  border: 1px solid #E8EAED !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  background: #FFFFFF !important;
}
.widget--mock.mock-gads-dq .mock-gads-dq__check { display: inline-flex !important; align-items: center !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__rowtext { margin: 0 !important; font-size: 14px !important; color: #202124 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__rowcaret { color: #5F6368 !important; font-size: 12px !important; text-transform: lowercase !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__historycard {
  border: 1px solid #E8EAED !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #FFFFFF !important;
}
.widget--mock.mock-gads-dq .mock-gads-dq__historyhead { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__historytitle { margin: 0 0 4px !important; font-size: 18px !important; font-weight: 400 !important; color: #202124 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__historysub { margin: 0 !important; font-size: 12px !important; color: #5F6368 !important; max-width: 640px !important; line-height: 1.5 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__rangepill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border: 1px solid #DADCE0 !important;
  border-radius: 4px !important;
  font: 500 13px var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  white-space: nowrap !important;
  justify-self: start !important;
  width: fit-content !important;
}
.widget--mock.mock-gads-dq .mock-gads-dq__rangecaret { color: #5F6368 !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__chart {
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  gap: 10px !important;
  height: 240px !important;
  margin-top: 4px !important;
}
.widget--mock.mock-gads-dq .mock-gads-dq__yaxis { display: flex !important; flex-direction: column !important; justify-content: space-between !important; font-size: 11px !important; color: #5F6368 !important; padding: 2px 0 18px !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__plot { position: relative !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__gridline { position: absolute !important; left: 0 !important; right: 0 !important; height: 1px !important; background: #E8EAED !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__bars-h {
  position: absolute !important;
  inset: 0 0 18px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: end !important;
  padding: 0 16px !important;
  gap: 0 !important;
}
.widget--mock.mock-gads-dq .mock-gads-dq__col { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; height: 100% !important; position: relative !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__barOk { width: 72px !important; background: #1A73E8 !important; border-radius: 2px 2px 0 0 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__barErr { width: 72px !important; background: #D93025 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__col .mock-gads-dq__barOk + .mock-gads-dq__barErr,
.widget--mock.mock-gads-dq .mock-gads-dq__col .mock-gads-dq__barErr + .mock-gads-dq__barOk { border-radius: 0 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__label { position: absolute !important; bottom: -18px !important; font-size: 11px !important; color: #5F6368 !important; white-space: nowrap !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__legend { display: flex !important; gap: 22px !important; justify-content: center !important; margin-top: 6px !important; font-size: 12px !important; color: #5F6368 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__legendItem { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__dot { width: 10px !important; height: 10px !important; border-radius: 2px !important; display: inline-block !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__dot--ok { background: #1A73E8 !important; }
.widget--mock.mock-gads-dq .mock-gads-dq__dot--err { background: #D93025 !important; }

/* ============================================================
   TM Google Analytics 4 tab - Not connected, Add property highlighted.
   ============================================================ */
.widget--mock.mock-tm-ga4-add { max-width: 900px !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__inner {
  padding: 20px 22px 22px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__tabs { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__tab { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__tab--active { border-color: #2233FF !important; box-shadow: 0 0 0 2px rgba(34, 51, 255, 0.18) !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__tabicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 5px !important; font: 700 12px var(--font-family-base, system-ui) !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__tabicon--fb { background: #1877F2 !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__tabicon--google { background: #FBBF24 !important; color: #1F2937 !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__tabicon--tiktok { background: #000000 !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__tabicon--ga4 { background: #F97316 !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__tabicon--stripe { background: #635BFF !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__tabicon--whop { background: #FF5A1F !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; margin-left: 2px !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__dot--green { background: #10B981 !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__dot--gray { background: #D1D5DB !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__panel { border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 16px 18px !important; background: #FFFFFF !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__panelhead { display: flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__panelicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 8px !important; background: #F97316 !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__panelbody { flex: 1 !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__paneltitle { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__statuspill { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 2px 10px !important; border-radius: 999px !important; background: #F3F4F6 !important; color: #6B7280 !important; font: 500 11px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__statusdot { width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #9CA3AF !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__panelsub { font-size: 13px !important; color: #6B7280 !important; margin: 2px 0 0 !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__addbtn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 9px 16px !important; border-radius: 6px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; white-space: nowrap !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__addbtn--focus { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-ga4-add .mock-tm-ga4-add__empty { padding: 14px 16px !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; background: #F9FAFB !important; color: #6B7280 !important; font-size: 13px !important; }

/* ============================================================
   TM GA4 expanded New property card with empty fields.
   ============================================================ */
.widget--mock.mock-tm-ga4-prop { max-width: 1100px !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__inner {
  padding: 20px 22px 22px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__cardhead { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__chev { font-size: 12px !important; color: #6B7280 !important; text-transform: lowercase !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__cardname { margin: 0 !important; font: 700 14px Menlo, Consolas, monospace !important; color: #0F0F0F !important; flex: 1 !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__activepill { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 3px 10px !important; border-radius: 999px !important; background: #ECFDF5 !important; color: #047857 !important; font: 500 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__activedot { width: 7px !important; height: 7px !important; border-radius: 999px !important; background: #10B981 !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__toggle { display: inline-flex !important; align-items: center !important; width: 34px !important; height: 18px !important; border-radius: 999px !important; background: #2233FF !important; padding: 2px !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__toggle--off { background: #D1D5DB !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__toggledot { width: 14px !important; height: 14px !important; border-radius: 999px !important; background: #FFFFFF !important; margin-left: auto !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__toggledot--off { margin-left: 0 !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__trash { display: inline-flex !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__label { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__opt { color: #6B7280 !important; font-weight: 400 !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__input { padding: 10px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px Menlo, Consolas, monospace !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__input--ph { color: #9CA3AF !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__input--focus { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; padding: 9px 11px !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__input--wide { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__eye { display: inline-flex !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__rule { border: 0 !important; border-top: 1px solid #E5E7EB !important; margin: 4px 0 !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__rowtitle { margin: 0 !important; font: 700 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__rowsub { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-ga4-prop .mock-tm-ga4-prop__pill { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; border-radius: 999px !important; background: #F3F4F6 !important; color: #6B7280 !important; font: 500 11px var(--font-family-base, system-ui) !important; }

/* ============================================================
   GA4 left navigation rail.
   ============================================================ */
.widget--mock.mock-ga4-admin-nav { max-width: 360px !important; }
.widget--mock.mock-ga4-admin-nav .mock-ga4-admin-nav__inner {
  padding: 20px 16px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.widget--mock.mock-ga4-admin-nav .mock-ga4-admin-nav__list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-ga4-admin-nav .mock-ga4-admin-nav__item { display: flex !important; align-items: center !important; gap: 14px !important; padding: 10px 14px !important; border-radius: 999px !important; font-size: 14px !important; color: #202124 !important; border: 2px solid transparent !important; }
.widget--mock.mock-ga4-admin-nav .mock-ga4-admin-nav__item--active { background: #1A73E8 !important; color: #FFFFFF !important; }
.widget--mock.mock-ga4-admin-nav .mock-ga4-admin-nav__item--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; }
.widget--mock.mock-ga4-admin-nav .mock-ga4-admin-nav__item--active svg { fill: #FFFFFF !important; }
.widget--mock.mock-ga4-admin-nav .mock-ga4-admin-nav__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; }
.widget--mock.mock-ga4-admin-nav .mock-ga4-admin-nav__badge { margin-left: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 999px !important; background: #5F6368 !important; color: #FFFFFF !important; font: 600 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-ga4-admin-nav .mock-ga4-admin-nav__divider { height: 1px !important; background: #E8EAED !important; margin: 12px 0 !important; }

/* ============================================================
   GA4 Admin page - Data streams highlighted.
   ============================================================ */
.widget--mock.mock-ga4-admin-ds { max-width: 1100px !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__inner {
  padding: 24px 28px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__sectionlabel { margin: 0 !important; font: 600 11px var(--font-family-base, system-ui) !important; color: #5F6368 !important; letter-spacing: 0.06em !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__cols { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__card { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 10px !important; padding: 18px 22px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__cardtitle { margin: 0 !important; font: 500 18px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__cardsub { margin: 0 0 6px !important; font-size: 13px !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__inlinelink { color: #1A73E8 !important; text-decoration: underline !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__menu { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 10px !important; border-radius: 6px !important; font-size: 14px !important; color: #202124 !important; border: 2px solid transparent !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__row--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; background: #FFF7ED !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__rowicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; color: #5F6368 !important; font-size: 12px !important; }
.widget--mock.mock-ga4-admin-ds .mock-ga4-admin-ds__rowhelp { margin-left: auto !important; color: #5F6368 !important; font-size: 13px !important; }

/* ============================================================
   GA4 Data streams page - Add stream dropdown showing Web highlighted.
   ============================================================ */
.widget--mock.mock-ga4-ds-add { max-width: 1100px !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__inner {
  padding: 24px 28px 220px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__title { margin: 0 !important; font: 500 22px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__card { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 10px !important; padding: 14px 18px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; position: relative !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__bar { display: grid !important; grid-template-columns: auto 1fr auto !important; gap: 16px !important; align-items: center !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__tabs { display: inline-flex !important; gap: 22px !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__tab { font: 500 14px var(--font-family-base, system-ui) !important; color: #5F6368 !important; padding-bottom: 4px !important; border-bottom: 2px solid transparent !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__tab--active { color: #1A73E8 !important; border-bottom-color: #1A73E8 !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__search { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; border: 1px solid #DADCE0 !important; border-radius: 6px !important; color: #5F6368 !important; font-size: 13px !important; justify-self: end !important; min-width: 240px !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__addbtn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 18px !important; border-radius: 4px !important; border: 1px solid #1A73E8 !important; background: #1A73E8 !important; color: #FFFFFF !important; font: 500 14px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__addbtn--focus { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; padding: 7px 17px !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__addcaret { color: #FFFFFF !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__empty { padding: 14px 16px !important; border-radius: 6px !important; background: #F1F3F4 !important; color: #5F6368 !important; font-size: 13px !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__menu { position: absolute !important; top: 58px !important; right: 18px !important; width: 200px !important; background: #FFFFFF !important; border: 1px solid #DADCE0 !important; border-radius: 8px !important; box-shadow: 0 12px 24px -8px rgba(60, 64, 67, 0.25) !important; padding: 6px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; z-index: 5 !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__menuitem { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 6px !important; font-size: 14px !important; color: #202124 !important; border: 2px solid transparent !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__menuitem--focus { background: #E8F0FE !important; border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; }
.widget--mock.mock-ga4-ds-add .mock-ga4-ds-add__menudot { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 999px !important; background: #1A73E8 !important; color: #FFFFFF !important; font: 700 10px var(--font-family-base, system-ui) !important; }

/* ============================================================
   GA4 Data streams list - WEB stream row highlighted.
   ============================================================ */
.widget--mock.mock-ga4-ds-row { max-width: 1100px !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__inner {
  padding: 24px 28px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__title { margin: 0 !important; font: 500 22px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__card { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 10px !important; padding: 14px 18px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__bar { display: grid !important; grid-template-columns: auto 1fr auto !important; gap: 16px !important; align-items: center !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__tabs { display: inline-flex !important; gap: 22px !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__tab { font: 500 14px var(--font-family-base, system-ui) !important; color: #5F6368 !important; padding-bottom: 4px !important; border-bottom: 2px solid transparent !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__tab--active { color: #1A73E8 !important; border-bottom-color: #1A73E8 !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__search { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; border: 1px solid #DADCE0 !important; border-radius: 6px !important; color: #5F6368 !important; font-size: 13px !important; justify-self: end !important; min-width: 240px !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__addbtn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 18px !important; border-radius: 4px !important; border: 1px solid #1A73E8 !important; background: #1A73E8 !important; color: #FFFFFF !important; font: 500 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__addcaret { color: #FFFFFF !important; font-size: 11px !important; text-transform: lowercase !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__streamrow { display: grid !important; grid-template-columns: 28px 1.5fr 0.9fr 1.4fr auto !important; gap: 18px !important; align-items: center !important; padding: 14px 16px !important; border-radius: 6px !important; background: #F1F3F4 !important; border: 2px solid transparent !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__streamrow--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__streamicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 999px !important; background: #1A73E8 !important; color: #FFFFFF !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__streamcol { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__streamname { margin: 0 !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__streamurl { margin: 0 !important; font-size: 12px !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__streamid { margin: 0 !important; font-size: 14px !important; color: #202124 !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__streamtraffic { margin: 0 !important; font-size: 14px !important; color: #202124 !important; }
.widget--mock.mock-ga4-ds-row .mock-ga4-ds-row__streamchev { color: #5F6368 !important; font-size: 14px !important; }

/* ============================================================
   GA4 Stream details - Measurement ID highlighted.
   ============================================================ */
.widget--mock.mock-ga4-stream-mid { max-width: 1100px !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__inner {
  padding: 24px 28px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__banner { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 18px !important; background: #E6F4EA !important; border-radius: 8px !important; color: #137333 !important; font-size: 14px !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__bannericon { display: inline-flex !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__card { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 10px !important; padding: 0 !important; overflow: hidden !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__cardhead { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 22px !important; background: #F1F3F4 !important; border-bottom: 1px solid #E8EAED !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__cardtitle { margin: 0 !important; font: 500 16px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__edit { display: inline-flex !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr 1fr !important; gap: 0 !important; padding: 18px 22px !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__cell { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 4px 8px !important; border-radius: 6px !important; border: 2px solid transparent !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__cell--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__celllabel { margin: 0 !important; font: 500 11px var(--font-family-base, system-ui) !important; color: #5F6368 !important; letter-spacing: 0.05em !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__cellvalue { margin: 0 !important; font-size: 14px !important; color: #202124 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-ga4-stream-mid .mock-ga4-stream-mid__copy { display: inline-flex !important; }

/* ============================================================
   GA4 Stream Events block - Measurement Protocol API secrets row highlighted.
   ============================================================ */
.widget--mock.mock-ga4-stream-mp { max-width: 1100px !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__inner {
  padding: 24px 28px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
}
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__card { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 10px !important; overflow: hidden !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__cardtitle { margin: 0 !important; padding: 14px 22px !important; background: #F1F3F4 !important; border-bottom: 1px solid #E8EAED !important; font: 500 16px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__row { display: grid !important; grid-template-columns: 30px 1fr auto !important; gap: 18px !important; align-items: center !important; padding: 16px 22px !important; border-top: 1px solid #F1F3F4 !important; border: 2px solid transparent !important; border-top-color: #F1F3F4 !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__row--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) inset !important; background: #FFF7ED !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__rowicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__rowbody { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__rowtitle { margin: 0 !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__rowsub { margin: 0 !important; font-size: 13px !important; color: #5F6368 !important; line-height: 1.4 !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__learn { color: #1A73E8 !important; text-decoration: underline !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__rowtoggle { display: inline-flex !important; align-items: center !important; width: 36px !important; height: 18px !important; border-radius: 999px !important; background: #1A73E8 !important; padding: 2px !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__rowtoggledot { width: 14px !important; height: 14px !important; border-radius: 999px !important; background: #FFFFFF !important; margin-left: auto !important; }
.widget--mock.mock-ga4-stream-mp .mock-ga4-stream-mp__rowchev { color: #5F6368 !important; font-size: 14px !important; }

/* ============================================================
   GA4 Measurement Protocol API secrets list - Create button highlighted.
   ============================================================ */
.widget--mock.mock-ga4-mp-list { max-width: 1100px !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__inner {
  padding: 24px 28px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__title { margin: 0 !important; font: 500 22px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__sub { margin: 0 !important; font-size: 13px !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__inlinelink { color: #1A73E8 !important; text-decoration: underline !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__card { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 10px !important; padding: 14px 18px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__bar { display: grid !important; grid-template-columns: auto 1fr auto !important; gap: 16px !important; align-items: center !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__barlabel { margin: 0 !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__search { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; border: 1px solid #DADCE0 !important; border-radius: 6px !important; color: #5F6368 !important; font-size: 13px !important; justify-self: end !important; min-width: 240px !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__searchicon { display: inline-flex !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__createbtn { padding: 8px 22px !important; border-radius: 4px !important; border: 1px solid #1A73E8 !important; background: #1A73E8 !important; color: #FFFFFF !important; font: 500 14px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__createbtn--focus { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; padding: 7px 21px !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__headrow { display: grid !important; grid-template-columns: 1.5fr 1.5fr 1fr auto !important; gap: 16px !important; padding: 12px 4px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #5F6368 !important; border-bottom: 1px solid #E8EAED !important; }
.widget--mock.mock-ga4-mp-list .mock-ga4-mp-list__emptyrow { padding: 18px 6px !important; color: #5F6368 !important; font-size: 13px !important; }

/* ============================================================
   GA4 Create new API secret dialog.
   ============================================================ */
.widget--mock.mock-ga4-mp-dialog { max-width: 1100px !important; }
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__inner {
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
}
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 18px 26px !important; border-bottom: 1px solid #E8EAED !important; }
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__topleft { display: flex !important; align-items: center !important; gap: 18px !important; }
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__close { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; font: 500 18px var(--font-family-base, system-ui) !important; color: #5F6368 !important; text-transform: lowercase !important; }
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__title { margin: 0 !important; font: 400 22px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__createbtn { padding: 8px 22px !important; border-radius: 4px !important; border: 1px solid #1A73E8 !important; background: #1A73E8 !important; color: #FFFFFF !important; font: 500 14px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__createbtn--focus { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; padding: 7px 21px !important; }
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__body { padding: 26px 30px 36px !important; }
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__field { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 10px 14px !important; border: 1px solid #DADCE0 !important; border-radius: 4px !important; }
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__label { margin: 0 !important; font-size: 12px !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-mp-dialog .mock-ga4-mp-dialog__input { color: #5F6368 !important; font-size: 14px !important; letter-spacing: 0.02em !important; }

/* ============================================================
   GA4 Measurement Protocol API secret row with Secret value copy highlighted.
   ============================================================ */
.widget--mock.mock-ga4-mp-value { max-width: 1100px !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__inner {
  padding: 24px 28px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__sub { margin: 0 !important; font-size: 13px !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__inlinelink { color: #1A73E8 !important; text-decoration: underline !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__card { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 10px !important; padding: 14px 18px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__bar { display: grid !important; grid-template-columns: auto 1fr auto !important; gap: 16px !important; align-items: center !important; padding-bottom: 14px !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__barlabel { margin: 0 !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__search { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; border: 1px solid #DADCE0 !important; border-radius: 6px !important; color: #5F6368 !important; font-size: 13px !important; justify-self: end !important; min-width: 240px !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__createbtn { padding: 8px 22px !important; border-radius: 4px !important; border: 1px solid #1A73E8 !important; background: #1A73E8 !important; color: #FFFFFF !important; font: 500 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__headrow { display: grid !important; grid-template-columns: 1.5fr 1.5fr 1fr auto !important; gap: 16px !important; padding: 12px 4px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #5F6368 !important; border-bottom: 1px solid #E8EAED !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__row { display: grid !important; grid-template-columns: 1.5fr 1.5fr 1fr auto !important; gap: 16px !important; align-items: center !important; padding: 14px 4px !important; font-size: 14px !important; color: #202124 !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__nick { color: #202124 !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__value { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 4px 8px !important; border-radius: 6px !important; border: 2px solid transparent !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__value--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; background: #FFF7ED !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__copy { display: inline-flex !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__date { color: #202124 !important; }
.widget--mock.mock-ga4-mp-value .mock-ga4-mp-value__more { color: #5F6368 !important; font-size: 18px !important; line-height: 1 !important; }

/* ============================================================
   TM GA4 property card filled in with Save GA4 settings highlighted.
   ============================================================ */
.widget--mock.mock-tm-ga4-filled { max-width: 1100px !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__inner {
  padding: 20px 22px 22px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__cardhead { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__chev { font-size: 12px !important; color: #6B7280 !important; text-transform: lowercase !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__cardname { margin: 0 !important; font: 700 14px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; flex: 1 !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__activepill { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 3px 10px !important; border-radius: 999px !important; background: #ECFDF5 !important; color: #047857 !important; font: 500 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__activedot { width: 7px !important; height: 7px !important; border-radius: 999px !important; background: #10B981 !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__toggle { display: inline-flex !important; align-items: center !important; width: 34px !important; height: 18px !important; border-radius: 999px !important; background: #2233FF !important; padding: 2px !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__toggledot { width: 14px !important; height: 14px !important; border-radius: 999px !important; background: #FFFFFF !important; margin-left: auto !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__trash { display: inline-flex !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__label { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__opt { color: #6B7280 !important; font-weight: 400 !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__input { padding: 10px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px Menlo, Consolas, monospace !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__input--wide { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__eye { display: inline-flex !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__rule { border: 0 !important; border-top: 1px solid #E5E7EB !important; margin: 4px 0 !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__footer { display: flex !important; justify-content: flex-end !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__save { padding: 10px 20px !important; border-radius: 6px !important; border: 1px solid #2233FF !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-ga4-filled .mock-tm-ga4-filled__save--focus { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; padding: 9px 19px !important; }

/* ============================================================
   GA4 Reports flyout with Realtime overview highlighted.
   ============================================================ */
.widget--mock.mock-ga4-reports-rt { max-width: 720px !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__inner {
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
}
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__rail { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 20px 12px !important; border-right: 1px solid #E8EAED !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__railitem { display: flex !important; align-items: center !important; justify-content: center !important; width: 60px !important; height: 60px !important; border-radius: 999px !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__railitem--active { background: #1A73E8 !important; color: #FFFFFF !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__railitem--active svg { fill: #FFFFFF !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__railicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__flyout { padding: 20px 14px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__flyitem { padding: 14px 18px !important; border-radius: 999px !important; font: 500 16px var(--font-family-base, system-ui) !important; color: #202124 !important; border: 2px solid transparent !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__flyitem--current { background: #E8F0FE !important; color: #1A73E8 !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__flyitem--focus { background: #F1F3F4 !important; border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__divider { height: 1px !important; background: #E8EAED !important; margin: 10px 18px !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__flygroup { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 18px !important; font: 500 16px var(--font-family-base, system-ui) !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__chev { color: #5F6368 !important; font-size: 12px !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__flysub { padding: 10px 18px 10px 40px !important; font-size: 15px !important; color: #202124 !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-ga4-reports-rt .mock-ga4-reports-rt__flysub::before { content: "\25B6"; color: #5F6368 !important; font-size: 10px !important; }

/* ============================================================
   GA4 Realtime overview page.
   ============================================================ */
.widget--mock.mock-ga4-rt { max-width: 1100px !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__inner {
  padding: 24px 28px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-ga4-rt .mock-ga4-rt__topcard { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 10px !important; padding: 20px 24px !important; display: grid !important; grid-template-columns: 1fr 1.4fr !important; gap: 24px !important; align-items: center !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__statgrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__stat { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__statlabel { margin: 0 !important; font: 500 11px var(--font-family-base, system-ui) !important; color: #5F6368 !important; text-decoration: underline dotted !important; text-underline-offset: 3px !important; letter-spacing: 0.05em !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__statvalue { margin: 0 !important; font: 400 32px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__chart { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__charttitle { margin: 0 !important; font: 500 11px var(--font-family-base, system-ui) !important; color: #5F6368 !important; letter-spacing: 0.05em !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__chartbody { position: relative !important; height: 120px !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__chartcols { display: grid !important; grid-template-columns: repeat(13, 1fr) !important; align-items: end !important; gap: 6px !important; height: 100% !important; padding: 0 4px !important; border-bottom: 1px solid #E8EAED !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__chartbar { background: #1A73E8 !important; border-radius: 2px 2px 0 0 !important; min-height: 0 !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__chartxaxis { display: flex !important; justify-content: space-between !important; margin-top: 4px !important; font-size: 11px !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__cards { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__card { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 10px !important; padding: 16px 18px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; border-width: 2px !important; border-color: #E8EAED !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__card--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__cardtitle { margin: 0 !important; font-size: 13px !important; color: #1A73E8 !important; text-decoration: underline dotted !important; text-underline-offset: 3px !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__cardrank { margin: 0 !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__cardvalue { margin: 0 !important; font: 400 22px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__cardnone { margin: 0 !important; font-size: 13px !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__cardrow { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 4px 0 !important; border-bottom: 2px solid #1A73E8 !important; font-size: 13px !important; color: #202124 !important; }
.widget--mock.mock-ga4-rt .mock-ga4-rt__cardnum { color: #202124 !important; }

/* ============================================================
   TM GA4 property card with Debug mode active and toggle highlighted.
   ============================================================ */
.widget--mock.mock-tm-ga4-debug { max-width: 1100px !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__inner {
  padding: 20px 22px 22px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #0F0F0F !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__cardhead { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__chev { font-size: 12px !important; color: #6B7280 !important; text-transform: lowercase !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__cardname { margin: 0 !important; font: 700 14px Menlo, Consolas, monospace !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__cardsub { font-size: 13px !important; color: #6B7280 !important; flex: 1 !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__activepill { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 3px 10px !important; border-radius: 999px !important; background: #ECFDF5 !important; color: #047857 !important; font: 500 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__activedot { width: 7px !important; height: 7px !important; border-radius: 999px !important; background: #10B981 !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__toggle { display: inline-flex !important; align-items: center !important; width: 34px !important; height: 18px !important; border-radius: 999px !important; background: #2233FF !important; padding: 2px !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__toggledot { width: 14px !important; height: 14px !important; border-radius: 999px !important; background: #FFFFFF !important; margin-left: auto !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__trash { display: inline-flex !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__label { margin: 0 !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__opt { color: #6B7280 !important; font-weight: 400 !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__input { padding: 10px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px Menlo, Consolas, monospace !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__input--wide { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__eye { display: inline-flex !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__rule { border: 0 !important; border-top: 1px solid #E5E7EB !important; margin: 4px 0 !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 10px 12px !important; border-radius: 6px !important; border: 2px solid transparent !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__row--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; background: #FFF7ED !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__rowtitle { margin: 0 !important; font: 700 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__rowsub { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-ga4-debug .mock-tm-ga4-debug__pill { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; border-radius: 999px !important; background: #F3F4F6 !important; color: #6B7280 !important; font: 500 11px var(--font-family-base, system-ui) !important; }

/* ============================================================
   GA4 Admin Data display card with DebugView highlighted.
   ============================================================ */
.widget--mock.mock-ga4-admin-dv { max-width: 720px !important; }
.widget--mock.mock-ga4-admin-dv .mock-ga4-admin-dv__inner {
  padding: 24px 28px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
}
.widget--mock.mock-ga4-admin-dv .mock-ga4-admin-dv__card { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 10px !important; padding: 18px 22px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-ga4-admin-dv .mock-ga4-admin-dv__cardtitle { margin: 0 !important; font: 500 18px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-ga4-admin-dv .mock-ga4-admin-dv__cardsub { margin: 0 0 8px !important; font-size: 13px !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-admin-dv .mock-ga4-admin-dv__menu { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; }
.widget--mock.mock-ga4-admin-dv .mock-ga4-admin-dv__row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 10px !important; border-radius: 6px !important; font-size: 14px !important; color: #202124 !important; border: 2px solid transparent !important; }
.widget--mock.mock-ga4-admin-dv .mock-ga4-admin-dv__row--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; background: #FFF7ED !important; }
.widget--mock.mock-ga4-admin-dv .mock-ga4-admin-dv__rowicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; color: #5F6368 !important; font-size: 12px !important; }
.widget--mock.mock-ga4-admin-dv .mock-ga4-admin-dv__rowhelp { margin-left: auto !important; color: #5F6368 !important; font-size: 13px !important; }

/* ============================================================
   GA4 DebugView page with device + event timeline.
   ============================================================ */
.widget--mock.mock-ga4-dv { max-width: 1100px !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__inner {
  padding: 26px 24px 26px 22px !important;
  background: #F8F9FA !important;
  font-family: var(--font-family-base, system-ui) !important;
  color: #202124 !important;
  display: grid !important;
  grid-template-columns: 200px 120px 1fr !important;
  gap: 10px !important;
}
.widget--mock.mock-ga4-dv .mock-ga4-dv__left { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__device { background: #FFFFFF !important; border: 1px solid #E8EAED !important; border-radius: 8px !important; padding: 12px 14px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__devicelabel { margin: 0 !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #202124 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__devicecount { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 1px 8px !important; background: #F1F3F4 !important; color: #5F6368 !important; border-radius: 4px !important; font: 500 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__devicemenu { display: flex !important; flex-direction: column !important; gap: 2px !important; padding-top: 6px !important; border-top: 1px solid #F1F3F4 !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__deviceitem { padding: 10px 12px !important; border-radius: 6px !important; font-size: 14px !important; color: #202124 !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__deviceitem--active { background: #E8F0FE !important; color: #1A73E8 !important; font-weight: 500 !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__center { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: flex-end !important; padding-right: 14px !important; border-right: 2px solid #DADCE0 !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__minutebubble { width: 38px !important; height: 38px !important; border-radius: 999px !important; background: #FFFFFF !important; border: 2px solid #1A73E8 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-right: -19px !important; margin-bottom: 4px !important; box-shadow: 0 4px 8px rgba(60, 64, 67, 0.18) !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__minutebubble--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 4px 8px rgba(60, 64, 67, 0.18) !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__minutecount { font: 500 14px var(--font-family-base, system-ui) !important; color: #1A73E8 !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__minutes { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: flex-end !important; font-size: 14px !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__minutes li { display: inline-flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__dot { width: 10px !important; height: 10px !important; border-radius: 999px !important; background: #5F6368 !important; margin-right: -19px !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__right { display: flex !important; flex-direction: column !important; gap: 6px !important; padding-left: 18px !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__newcircle { width: 64px !important; height: 64px !important; border-radius: 999px !important; background: #1A73E8 !important; color: #FFFFFF !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; align-self: flex-start !important; margin-bottom: 8px !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__newnum { font: 500 18px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__newlabel { font: 500 11px var(--font-family-base, system-ui) !important; letter-spacing: 0.04em !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__timeline { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__step { display: inline-flex !important; align-items: center !important; gap: 14px !important; font-size: 13px !important; color: #5F6368 !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__time { color: #5F6368 !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__gap { font-style: italic !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__event { display: inline-flex !important; align-items: center !important; gap: 14px !important; padding: 6px 10px !important; border-radius: 6px !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__eventicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 999px !important; background: #1A73E8 !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__eventname { font: 500 14px var(--font-family-base, system-ui) !important; color: #202124 !important; padding: 4px 10px !important; border-radius: 6px !important; border: 2px solid transparent !important; }
.widget--mock.mock-ga4-dv .mock-ga4-dv__eventname--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important; background: #FFF7ED !important; }

/* ============================================================
   Stripe webhook docs widgets (2026-05-31)
   Stripe palette: dark navy bg #0F1521, card #1A1F2E, accent #635BFF.
   Highlight ring is the docs orange (#F97316) per project convention.
   ============================================================ */

/* shared dark Stripe panel base ----------------------------- */
.widget--mock.mock-stripe { max-width: 760px !important; }
.widget--mock.mock-stripe-dev-menu { max-width: 360px !important; }
.widget--mock.mock-stripe-scope,
.widget--mock.mock-stripe-events,
.widget--mock.mock-stripe-dtype,
.widget--mock.mock-stripe-cdform,
.widget--mock.mock-stripe-ddsec,
.widget--mock.mock-stripe-ed { max-width: 760px !important; }

/* ---- stripe-developers-menu ---- */
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__inner { background: transparent !important; padding: 0 !important; position: relative !important; }
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__menu { background: #1A1F2E !important; border: 1px solid #2A3140 !important; border-radius: 12px !important; padding: 16px 0 !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important; }
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__section { padding: 6px 18px !important; font-weight: 600 !important; font-size: 13px !important; color: #FFFFFF !important; }
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__list { list-style: none !important; margin: 0 !important; padding: 4px 0 !important; }
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__item { padding: 10px 18px !important; color: #FFFFFF !important; cursor: default !important; border: 2px solid transparent !important; }
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__item--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; border-radius: 6px !important; margin: 0 8px !important; padding: 8px 10px !important; background: rgba(99,91,255,0.12) !important; color: #BFB5FF !important; }
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__item--more { display: flex !important; align-items: center !important; justify-content: space-between !important; color: #8B95A8 !important; }
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__chev { color: #8B95A8 !important; }
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__divider { height: 1px !important; background: #2A3140 !important; margin: 8px 0 !important; }
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__tab { margin-top: 12px !important; background: #0F1521 !important; border: 1px solid #2A3140 !important; border-radius: 10px !important; padding: 14px 18px !important; color: #FFFFFF !important; font: 500 15px var(--font-family-base, system-ui) !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; }
.widget--mock.mock-stripe-dev-menu .mock-stripe-dev-menu__tabicon { color: #8B95A8 !important; font-family: ui-monospace, monospace !important; font-size: 14px !important; }

/* ---- stripe-event-destinations ---- */
.widget--mock.mock-stripe-ed .mock-stripe-ed__inner { background: #0F1521 !important; border: 1px solid #2A3140 !important; border-radius: 12px !important; padding: 24px !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__tabs { display: flex !important; gap: 24px !important; margin-bottom: 24px !important; border-bottom: 1px solid #2A3140 !important; padding-bottom: 12px !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__tab { color: #8B95A8 !important; font-weight: 500 !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__tab--active { color: #BFB5FF !important; border-bottom: 2px solid #635BFF !important; padding-bottom: 12px !important; margin-bottom: -13px !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 20px !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__title { margin: 0 0 4px 0 !important; font: 600 22px var(--font-family-base, system-ui) !important; color: #FFFFFF !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__sub { margin: 0 !important; color: #8B95A8 !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__addbtn { background: #635BFF !important; color: #FFFFFF !important; border: 2px solid transparent !important; border-radius: 6px !important; padding: 10px 16px !important; font-weight: 600 !important; cursor: default !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__addbtn--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__plus { font-size: 16px !important; line-height: 1 !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__table { border-top: 1px solid #2A3140 !important; padding-top: 12px !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__cols { display: grid !important; grid-template-columns: 60px minmax(0,1fr) 110px 130px 90px !important; gap: 12px !important; padding: 8px 0 !important; color: #8B95A8 !important; font-size: 13px !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__row { display: grid !important; grid-template-columns: 60px minmax(0,1fr) 110px 130px 90px !important; gap: 12px !important; padding: 14px 0 !important; align-items: center !important; border-top: 1px solid #2A3140 !important; font-size: 13px !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__hookicon { color: #8B95A8 !important; font-size: 18px !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__rowdest { color: #FFFFFF !important; font-family: ui-monospace, monospace !important; font-size: 12px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-stripe-ed .mock-stripe-ed__pill { background: rgba(34,197,94,0.12) !important; color: #22C55E !important; padding: 2px 10px !important; border-radius: 999px !important; font-weight: 500 !important; justify-self: start !important; width: fit-content !important; font-size: 12px !important; }

/* ---- stripe-configure-scope ---- */
.widget--mock.mock-stripe-scope .mock-stripe-scope__inner { background: #0F1521 !important; border: 1px solid #2A3140 !important; border-radius: 12px !important; padding: 28px !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__title { margin: 0 0 24px 0 !important; font: 600 22px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__sectiontitle { margin: 0 0 4px 0 !important; font-weight: 600 !important; color: #FFFFFF !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__sectionsub { margin: 0 0 14px 0 !important; color: #635BFF !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__tiles { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-bottom: 24px !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__tile { background: #1A1F2E !important; border: 2px solid #2A3140 !important; border-radius: 8px !important; padding: 16px !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__tile--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__tiletitle { margin: 0 0 6px 0 !important; font-weight: 600 !important; color: #BFB5FF !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__tiletitle--muted { color: #FFFFFF !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__tiletext { margin: 0 !important; color: #8B95A8 !important; font-size: 13px !important; line-height: 1.45 !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__fieldlabel { margin: 0 0 6px 0 !important; font-weight: 600 !important; color: #FFFFFF !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__select { display: flex !important; justify-content: space-between !important; align-items: center !important; background: #1A1F2E !important; border: 1px solid #2A3140 !important; border-radius: 6px !important; padding: 10px 14px !important; max-width: 320px !important; color: #FFFFFF !important; font-weight: 500 !important; }
.widget--mock.mock-stripe-scope .mock-stripe-scope__chev { color: #8B95A8 !important; }

/* ---- stripe-event-search-both ---- */
.widget--mock.mock-stripe-events .mock-stripe-events__inner { background: #0F1521 !important; border: 1px solid #2A3140 !important; border-radius: 12px !important; padding: 28px !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__title { margin: 0 0 18px 0 !important; font: 600 22px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__tabs { display: flex !important; gap: 24px !important; border-bottom: 1px solid #2A3140 !important; padding-bottom: 12px !important; margin-bottom: 18px !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__tab { color: #8B95A8 !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__tab--active { color: #BFB5FF !important; border-bottom: 2px solid #635BFF !important; padding-bottom: 12px !important; margin-bottom: -13px !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__pill { background: #2A3140 !important; color: #FFFFFF !important; border-radius: 999px !important; padding: 1px 9px !important; font-size: 12px !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__search { display: flex !important; align-items: center !important; gap: 10px !important; background: #1A1F2E !important; border: 1px solid #2A3140 !important; border-radius: 6px !important; padding: 10px 14px !important; margin-bottom: 18px !important; color: #8B95A8 !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__searchicon { color: #8B95A8 !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__row { display: flex !important; gap: 14px !important; align-items: flex-start !important; padding: 14px !important; border: 2px solid transparent !important; border-radius: 8px !important; margin-bottom: 10px !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__row--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__check { width: 22px !important; height: 22px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__check--on { background: #635BFF !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 14px !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__rowbody { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__rowname { margin: 0 !important; font-family: ui-monospace, monospace !important; font-weight: 700 !important; color: #FFFFFF !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__rowdesc { margin: 0 !important; color: #8B95A8 !important; font-size: 13px !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__footer { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 22px !important; border-top: 1px solid #2A3140 !important; padding-top: 18px !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__cancel { color: #635BFF !important; font-weight: 500 !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__continue { background: #635BFF !important; color: #FFFFFF !important; border: 2px solid transparent !important; border-radius: 6px !important; padding: 10px 18px !important; font-weight: 600 !important; cursor: default !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-stripe-events .mock-stripe-events__continue--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }

/* ---- stripe-destination-type ---- */
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__inner { background: #0F1521 !important; border: 1px solid #2A3140 !important; border-radius: 12px !important; padding: 28px !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__title { margin: 0 0 6px 0 !important; font: 600 22px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__sub { margin: 0 0 20px 0 !important; color: #8B95A8 !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__label { margin: 0 0 10px 0 !important; font-weight: 600 !important; color: #FFFFFF !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__tile { display: flex !important; gap: 14px !important; align-items: flex-start !important; padding: 16px 18px !important; background: #1A1F2E !important; border: 2px solid #2A3140 !important; border-radius: 8px !important; margin-bottom: 10px !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__tile--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__tileicon { color: #635BFF !important; font-size: 20px !important; font-weight: 700 !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__tileicon--muted { color: #8B95A8 !important; font-size: 14px !important; font-family: ui-monospace, monospace !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__tilebody { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__tilename { margin: 0 !important; font-weight: 600 !important; color: #BFB5FF !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__tilename--muted { color: #FFFFFF !important; }
.widget--mock.mock-stripe-dtype .mock-stripe-dtype__tiletext { margin: 0 !important; color: #8B95A8 !important; font-size: 13px !important; }

/* ---- stripe-configure-destination-form ---- */
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__inner { background: #0F1521 !important; border: 1px solid #2A3140 !important; border-radius: 12px !important; padding: 28px !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__title { margin: 0 0 6px 0 !important; font: 600 22px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__sub { margin: 0 0 20px 0 !important; color: #8B95A8 !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__summary { margin-bottom: 22px !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__sumrow { display: grid !important; grid-template-columns: 160px 1fr !important; padding: 4px 0 !important; color: #FFFFFF !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__sumrow span:first-child { color: #FFFFFF !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__sumrow span:last-child { color: #FFFFFF !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__fieldlabel { margin: 14px 0 4px 0 !important; font-weight: 600 !important; color: #FFFFFF !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__count { margin: 0 0 6px 0 !important; color: #8B95A8 !important; font-size: 12px !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__hint { margin: 0 0 6px 0 !important; color: #8B95A8 !important; font-size: 12px !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__field { background: #1A1F2E !important; border: 1px solid #2A3140 !important; border-radius: 6px !important; padding: 12px 14px !important; color: #FFFFFF !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__field--mono { font-family: ui-monospace, monospace !important; font-size: 13px !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__footer { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 14px !important; margin-top: 24px !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__cancel { color: #635BFF !important; font-weight: 500 !important; margin-right: auto !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__back { color: #FFFFFF !important; font-weight: 500 !important; background: #1A1F2E !important; border: 1px solid #2A3140 !important; border-radius: 6px !important; padding: 8px 16px !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__create { background: #635BFF !important; color: #FFFFFF !important; border: 2px solid transparent !important; border-radius: 6px !important; padding: 10px 18px !important; font-weight: 600 !important; cursor: default !important; }
.widget--mock.mock-stripe-cdform .mock-stripe-cdform__create--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }

/* ---- stripe-destination-details-secret ---- */
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__inner { background: #0F1521 !important; border: 1px solid #2A3140 !important; border-radius: 12px !important; padding: 28px !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__title { margin: 0 0 18px 0 !important; font: 600 20px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__summary { margin-bottom: 24px !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__sumrow { display: grid !important; grid-template-columns: 160px 1fr !important; padding: 4px 0 !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__sumrow span:first-child { color: #FFFFFF !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__sumrow span:last-child { color: #FFFFFF !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__link { color: #635BFF !important; text-decoration: underline !important; font-family: ui-monospace, monospace !important; font-size: 12px !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__mono { font-family: ui-monospace, monospace !important; font-size: 12px !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__seclabel { margin: 0 0 6px 0 !important; font-weight: 600 !important; color: #FFFFFF !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__lock { color: #FFFFFF !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__secsub { margin: 0 0 10px 0 !important; color: #8B95A8 !important; font-size: 13px !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__secret { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #1A1F2E !important; border: 2px solid #2A3140 !important; border-radius: 6px !important; padding: 12px 14px !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__secret--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__secval { font-family: ui-monospace, monospace !important; color: #FFFFFF !important; font-size: 13px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-stripe-ddsec .mock-stripe-ddsec__copyicon { color: #635BFF !important; font-size: 18px !important; margin-left: 12px !important; }

/* ---- tm-integrations-grid-stripe ---- */
.widget--mock.mock-tm-intgrid { max-width: 880px !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 28px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__title { margin: 0 0 6px 0 !important; font: 700 22px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__sub { margin: 0 0 22px 0 !important; color: #6B7280 !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__tile { background: #FFFFFF !important; border: 2px solid #E5E7EB !important; border-radius: 10px !important; padding: 16px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; min-height: 120px !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__tile--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__icon { height: 40px !important; display: flex !important; align-items: center !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__typeform { font-weight: 800 !important; font-size: 22px !important; color: #000000 !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__calendly { font-weight: 700 !important; font-size: 22px !important; color: #006BFF !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__clarity { color: #2A6DB4 !important; font-size: 28px !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__stripe { font-weight: 800 !important; font-size: 22px !important; color: #635BFF !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__whop { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; background: #FF6243 !important; color: #FFFFFF !important; border-radius: 8px !important; font-weight: 700 !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__name { margin: auto 0 0 0 !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__status { margin: 0 !important; color: #6B7280 !important; font-size: 13px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__status--ok { color: #16A34A !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__dot { width: 8px !important; height: 8px !important; border-radius: 999px !important; display: inline-block !important; }
.widget--mock.mock-tm-intgrid .mock-tm-intgrid__dot--green { background: #22C55E !important; box-shadow: 0 0 0 3px rgba(34,197,94,0.18) !important; }

/* ---- tm-stripe-connect-copy-url + paste-secret + connected (shared shell) ---- */
.widget--mock.mock-tm-stripe-copy,
.widget--mock.mock-tm-stripe-paste,
.widget--mock.mock-tm-stripe-done { max-width: 760px !important; }
.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__inner,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__inner,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 28px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }

.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__head,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__head,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__head { display: flex !important; gap: 14px !important; align-items: flex-start !important; margin-bottom: 24px !important; padding-bottom: 18px !important; border-bottom: 1px solid #E5E7EB !important; }

.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__logo,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__logo,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; background: #635BFF !important; color: #FFFFFF !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 18px !important; flex-shrink: 0 !important; }

.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__headbody,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__headbody,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__headbody { flex: 1 !important; }

.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__title,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__title,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__title { margin: 0 0 6px 0 !important; font: 700 18px var(--font-family-base, system-ui) !important; display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }

.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__sub,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__sub,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__sub { margin: 0 !important; color: #6B7280 !important; font-size: 13px !important; line-height: 1.45 !important; }

.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__statuspill,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__statuspill { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #F3F4F6 !important; color: #6B7280 !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__statusdot,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__statusdot { width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #9CA3AF !important; display: inline-block !important; }

.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__statuspill { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #DCFCE7 !important; color: #166534 !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__check { color: #166534 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__since { color: #6B7280 !important; font-size: 12px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__disconnect { margin-top: 12px !important; background: #EF4444 !important; color: #FFFFFF !important; border: 0 !important; border-radius: 6px !important; padding: 8px 14px !important; font-weight: 600 !important; cursor: default !important; }

.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__fieldlabel,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__fieldlabel,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__fieldlabel { margin: 12px 0 6px 0 !important; font-weight: 700 !important; font-size: 12px !important; color: #0F172A !important; }

.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__urlrow,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__urlrow,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__urlrow { display: flex !important; gap: 10px !important; }
.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__field,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__field,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__field { flex: 1 !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; padding: 10px 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__field--mono,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__field--mono,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__field--mono { font-family: ui-monospace, monospace !important; font-size: 12px !important; }
.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__field--placeholder { color: #9CA3AF !important; font-family: ui-monospace, monospace !important; font-size: 12px !important; }
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__field--filled { color: #0F172A !important; letter-spacing: 1px !important; word-break: break-all !important; }
.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__copybtn,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__copybtn,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__copybtn { background: #FFFFFF !important; border: 2px solid #D1D5DB !important; border-radius: 6px !important; padding: 8px 14px !important; color: #0F172A !important; font-weight: 500 !important; cursor: default !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__copybtn--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__copyicon,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__copyicon,
.widget--mock.mock-tm-stripe-done .mock-tm-stripe-done__copyicon { color: #6B7280 !important; }

.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__footer,
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__footer { display: flex !important; justify-content: flex-end !important; margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-stripe-copy .mock-tm-stripe-copy__primary { background: #93C5FD !important; color: #FFFFFF !important; border: 0 !important; border-radius: 6px !important; padding: 10px 18px !important; font-weight: 700 !important; cursor: default !important; opacity: 0.6 !important; }
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__primary { background: #2563EB !important; color: #FFFFFF !important; border: 2px solid transparent !important; border-radius: 6px !important; padding: 10px 18px !important; font-weight: 700 !important; cursor: default !important; }
.widget--mock.mock-tm-stripe-paste .mock-tm-stripe-paste__primary--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }

/* ============================================================
   Whop webhook docs widgets (2026-05-31)
   Whop dashboard palette: near-black bg #0A0A0A, card #1C1C1E,
   border #2A2A2C, accent blue #2B66FF, brand orange #FA4616.
   TM-side cards keep the shared white shell. Highlight ring is the
   docs orange (#F97316) per project convention.
   ============================================================ */

.widget--mock.mock-whop { max-width: 760px !important; }
.widget--mock.mock-whop-sidebar { max-width: 320px !important; }
.widget--mock.mock-whop-testmenu { max-width: 280px !important; }
.widget--mock.mock-whop-testmodal { max-width: 640px !important; }
.widget--mock.mock-whop-secret { max-width: 880px !important; }

/* ---- tm-whop copy / paste / connected (shared white shell) ---- */
.widget--mock.mock-tm-whop-copy,
.widget--mock.mock-tm-whop-paste,
.widget--mock.mock-tm-whop-done { max-width: 760px !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__inner,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__inner,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 28px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }

.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__head,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__head,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__head { display: flex !important; gap: 14px !important; align-items: flex-start !important; margin-bottom: 24px !important; padding-bottom: 18px !important; border-bottom: 1px solid #E5E7EB !important; }

.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__logo,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__logo,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; background: #FA4616 !important; color: #FFFFFF !important; border-radius: 9px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__logo svg,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__logo svg,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__logo svg { width: 22px !important; height: auto !important; }

.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__headbody,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__headbody,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__headbody { flex: 1 !important; }

.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__title,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__title,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__title { margin: 0 0 6px 0 !important; font: 700 18px var(--font-family-base, system-ui) !important; display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }

.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__sub,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__sub,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__sub { margin: 0 !important; color: #6B7280 !important; font-size: 13px !important; line-height: 1.45 !important; }

.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__statuspill,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__statuspill { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #F3F4F6 !important; color: #6B7280 !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__statusdot,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__statusdot { width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #9CA3AF !important; display: inline-block !important; }

.widget--mock.mock-tm-whop-done .mock-tm-whop-done__statuspill { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #DCFCE7 !important; color: #166534 !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__check { color: #166534 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__since { color: #6B7280 !important; font-size: 12px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__disconnect { margin-top: 12px !important; background: #EF4444 !important; color: #FFFFFF !important; border: 0 !important; border-radius: 6px !important; padding: 8px 14px !important; font-weight: 600 !important; cursor: default !important; }

.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__fieldlabel,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__fieldlabel,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__fieldlabel { margin: 12px 0 6px 0 !important; font-weight: 700 !important; font-size: 12px !important; color: #0F172A !important; }

.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__urlrow,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__urlrow,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__urlrow { display: flex !important; gap: 10px !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__field,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__field,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__field { flex: 1 !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; padding: 10px 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__field--mono,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__field--mono,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__field--mono { font-family: ui-monospace, monospace !important; font-size: 12px !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__field--placeholder { color: #9CA3AF !important; font-family: ui-monospace, monospace !important; font-size: 12px !important; }
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__field--filled { color: #0F172A !important; letter-spacing: 1px !important; word-break: break-all !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__copybtn,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__copybtn,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__copybtn { background: #FFFFFF !important; border: 2px solid #D1D5DB !important; border-radius: 6px !important; padding: 8px 14px !important; color: #0F172A !important; font-weight: 500 !important; cursor: default !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__copybtn--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__copyicon,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__copyicon,
.widget--mock.mock-tm-whop-done .mock-tm-whop-done__copyicon { color: #6B7280 !important; }

.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__footer,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__footer { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__help,
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__help { color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-tm-whop-copy .mock-tm-whop-copy__primary { background: #93C5FD !important; color: #FFFFFF !important; border: 0 !important; border-radius: 6px !important; padding: 10px 18px !important; font-weight: 700 !important; cursor: default !important; opacity: 0.6 !important; }
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__primary { background: #2563EB !important; color: #FFFFFF !important; border: 2px solid transparent !important; border-radius: 6px !important; padding: 10px 18px !important; font-weight: 700 !important; cursor: default !important; }
.widget--mock.mock-tm-whop-paste .mock-tm-whop-paste__primary--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }

/* ---- whop-developer-menu (dark sidebar) ---- */
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__inner { background: #0A0A0A !important; border: 1px solid #1F1F22 !important; border-radius: 12px !important; padding: 14px 10px !important; color: #EDEDED !important; font: 400 15px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 9px 12px !important; border-radius: 8px !important; color: #EDEDED !important; cursor: default !important; border: 2px solid transparent !important; }
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__item svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; color: #8A8A8E !important; }
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__item--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; background: #1C1C1E !important; }
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__item--chev { justify-content: space-between !important; }
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__label { display: inline-flex !important; align-items: center !important; gap: 12px !important; }
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__chev { width: 16px !important; height: 16px !important; color: #8A8A8E !important; }
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__new { background: #2B66FF !important; color: #FFFFFF !important; font-size: 11px !important; font-weight: 600 !important; padding: 2px 8px !important; border-radius: 999px !important; margin-left: 6px !important; }
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__section { margin: 14px 0 4px 12px !important; color: #6A6A6E !important; font-size: 13px !important; font-weight: 500 !important; }
.widget--mock.mock-whop-sidebar .mock-whop-sidebar__divider { height: 1px !important; background: #1F1F22 !important; margin: 12px 6px !important; }

/* ---- whop-webhooks-empty (dark page) ---- */
.widget--mock.mock-whop-hooks .mock-whop-hooks__inner { background: #0A0A0A !important; border: 1px solid #1F1F22 !important; border-radius: 12px !important; padding: 24px !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 22px !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__title { margin: 0 0 6px 0 !important; font: 700 22px var(--font-family-base, system-ui) !important; color: #FFFFFF !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__sub { margin: 0 !important; color: #8A8A8E !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__link { color: #6E8BFF !important; text-decoration: underline !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__addbtn { background: #2B66FF !important; color: #FFFFFF !important; border: 2px solid transparent !important; border-radius: 8px !important; padding: 10px 16px !important; font-weight: 600 !important; cursor: default !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__addbtn--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__plus { font-size: 16px !important; line-height: 1 !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__table { border: 1px solid #1F1F22 !important; border-radius: 10px !important; overflow: hidden !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__cols { display: grid !important; grid-template-columns: minmax(0,1fr) 120px 160px 80px 110px !important; gap: 12px !important; padding: 12px 16px !important; color: #8A8A8E !important; font-size: 13px !important; background: #141416 !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__empty { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; padding: 48px 16px !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__rocket { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 64px !important; height: 64px !important; border-radius: 14px !important; background: #1C1C1E !important; color: #6A6A6E !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__rocket svg { width: 30px !important; height: 30px !important; }
.widget--mock.mock-whop-hooks .mock-whop-hooks__emptytext { margin: 0 !important; color: #8A8A8E !important; font-size: 15px !important; }

/* ---- whop-create-webhook-form (dark) ---- */
.widget--mock.mock-whop-create .mock-whop-create__inner { background: #141416 !important; border: 1px solid #2A2A2C !important; border-radius: 12px !important; padding: 26px !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-whop-create .mock-whop-create__title { margin: 0 0 20px 0 !important; font: 700 20px var(--font-family-base, system-ui) !important; padding-bottom: 14px !important; border-bottom: 1px solid #2A2A2C !important; }
.widget--mock.mock-whop-create .mock-whop-create__label { margin: 18px 0 8px 0 !important; color: #8A8A8E !important; font-size: 14px !important; }
.widget--mock.mock-whop-create .mock-whop-create__label--flush { margin: 0 !important; }
.widget--mock.mock-whop-create .mock-whop-create__field { background: #1C1C1E !important; border: 1px solid #2A2A2C !important; border-radius: 8px !important; padding: 12px 14px !important; color: #FFFFFF !important; }
.widget--mock.mock-whop-create .mock-whop-create__field--mono { font-family: ui-monospace, monospace !important; font-size: 13px !important; }
.widget--mock.mock-whop-create .mock-whop-create__warn { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin-top: 10px !important; background: rgba(234,179,8,0.10) !important; border: 1px solid rgba(234,179,8,0.25) !important; border-radius: 8px !important; padding: 12px 14px !important; color: #EAB308 !important; font-size: 13px !important; line-height: 1.45 !important; }
.widget--mock.mock-whop-create .mock-whop-create__warnicon { flex-shrink: 0 !important; }
.widget--mock.mock-whop-create .mock-whop-create__select { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #1C1C1E !important; border: 1px solid #2A2A2C !important; border-radius: 8px !important; padding: 12px 14px !important; color: #FFFFFF !important; font-weight: 500 !important; }
.widget--mock.mock-whop-create .mock-whop-create__chev { width: 18px !important; height: 18px !important; color: #8A8A8E !important; }
.widget--mock.mock-whop-create .mock-whop-create__eventshead { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 18px 0 8px 0 !important; }
.widget--mock.mock-whop-create .mock-whop-create__all { display: inline-flex !important; align-items: center !important; gap: 10px !important; color: #8A8A8E !important; }
.widget--mock.mock-whop-create .mock-whop-create__events { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-whop-create .mock-whop-create__event { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 8px !important; border: 2px solid transparent !important; }
.widget--mock.mock-whop-create .mock-whop-create__event--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-whop-create .mock-whop-create__box { width: 20px !important; height: 20px !important; border: 1.5px solid #3A3A3C !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.widget--mock.mock-whop-create .mock-whop-create__box--on { background: #2B66FF !important; border-color: #2B66FF !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 13px !important; }
.widget--mock.mock-whop-create .mock-whop-create__evname { font-family: ui-monospace, monospace !important; font-size: 14px !important; color: #FFFFFF !important; }
.widget--mock.mock-whop-create .mock-whop-create__footer { display: flex !important; justify-content: flex-end !important; margin-top: 22px !important; padding-top: 16px !important; border-top: 1px solid #2A2A2C !important; }
.widget--mock.mock-whop-create .mock-whop-create__create { background: #2B66FF !important; color: #FFFFFF !important; border: 0 !important; border-radius: 8px !important; padding: 11px 20px !important; font-weight: 600 !important; cursor: default !important; }

/* ---- whop-webhook-secret (dark table row) ---- */
.widget--mock.mock-whop-secret .mock-whop-secret__inner { background: #0A0A0A !important; border: 1px solid #1F1F22 !important; border-radius: 12px !important; padding: 8px !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__table { border: 1px solid #1F1F22 !important; border-radius: 10px !important; overflow: hidden !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__cols { display: grid !important; grid-template-columns: minmax(0,1fr) 120px 180px 80px 110px 40px !important; gap: 12px !important; padding: 14px 16px !important; color: #8A8A8E !important; font-size: 13px !important; background: #141416 !important; align-items: center !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__row { display: grid !important; grid-template-columns: minmax(0,1fr) 120px 180px 80px 110px 40px !important; gap: 12px !important; padding: 16px 16px !important; align-items: center !important; border-top: 1px solid #1F1F22 !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__url { font-family: ui-monospace, monospace !important; font-size: 13px !important; color: #FFFFFF !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__verpill { background: #1C1C1E !important; border: 1px solid #2A2A2C !important; color: #C9C9CE !important; padding: 2px 10px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__secretcell { font-family: ui-monospace, monospace !important; font-size: 13px !important; color: #6E8BFF !important; padding: 6px 10px !important; border-radius: 6px !important; border: 2px solid transparent !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__secretcell--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__evpill { background: #1C1C1E !important; border: 1px solid #2A2A2C !important; color: #C9C9CE !important; padding: 2px 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__created { color: #8A8A8E !important; font-size: 13px !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__dots { color: #8A8A8E !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__dots svg { width: 18px !important; height: 18px !important; }
.widget--mock.mock-whop-secret .mock-whop-secret__foot { margin: 12px 4px 4px !important; color: #8A8A8E !important; font-size: 13px !important; }

/* ---- whop-test-menu (dark popover) ---- */
.widget--mock.mock-whop-testmenu .mock-whop-testmenu__inner { background: transparent !important; padding: 0 !important; }
.widget--mock.mock-whop-testmenu .mock-whop-testmenu__menu { list-style: none !important; margin: 0 !important; padding: 8px !important; background: #1C1C1E !important; border: 1px solid #2A2A2C !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important; color: #FFFFFF !important; font: 400 15px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-whop-testmenu .mock-whop-testmenu__item { padding: 11px 14px !important; border-radius: 8px !important; cursor: default !important; border: 2px solid transparent !important; color: #FFFFFF !important; }
.widget--mock.mock-whop-testmenu .mock-whop-testmenu__item--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; background: #2A2A2C !important; }
.widget--mock.mock-whop-testmenu .mock-whop-testmenu__item--more { display: flex !important; align-items: center !important; justify-content: space-between !important; color: #C9C9CE !important; }
.widget--mock.mock-whop-testmenu .mock-whop-testmenu__chev { color: #8A8A8E !important; }

/* ---- whop-test-modal (dark) ---- */
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__inner { background: #141416 !important; border: 1px solid #2A2A2C !important; border-radius: 12px !important; color: #FFFFFF !important; font: 400 14px var(--font-family-base, system-ui) !important; overflow: hidden !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__head { display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; padding: 18px 20px !important; border-bottom: 1px solid #2A2A2C !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__title { margin: 0 !important; font: 700 18px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__close { position: absolute !important; right: 18px !important; top: 50% !important; transform: translateY(-50%) !important; color: #8A8A8E !important; font-size: 22px !important; line-height: 1 !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__body { padding: 22px 20px !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__label { margin: 0 0 8px 0 !important; color: #8A8A8E !important; font-size: 14px !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__label:not(:first-child) { margin-top: 18px !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__select { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #1C1C1E !important; border: 2px solid #2B66FF !important; border-radius: 8px !important; padding: 12px 14px !important; color: #FFFFFF !important; font-weight: 500 !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__chev { width: 18px !important; height: 18px !important; color: #8A8A8E !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__response { background: #1C1C1E !important; border: 1px solid #2A2A2C !important; border-radius: 8px !important; padding: 14px 16px !important; color: #C9C9CE !important; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace !important; line-height: 1.6 !important; white-space: pre-wrap !important; word-break: break-word !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__footer { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 12px !important; padding: 18px 20px !important; border-top: 1px solid #2A2A2C !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__cancel { background: #1C1C1E !important; border: 1px solid #2A2A2C !important; color: #FFFFFF !important; border-radius: 8px !important; padding: 10px 20px !important; font-weight: 600 !important; cursor: default !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__test { background: #2B66FF !important; color: #FFFFFF !important; border: 2px solid transparent !important; border-radius: 8px !important; padding: 10px 24px !important; font-weight: 600 !important; cursor: default !important; }
.widget--mock.mock-whop-testmodal .mock-whop-testmodal__test--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; }

/* ---- tm-whop-purchase-event (light session timeline) ---- */
.widget--mock.mock-tm-whop-event { max-width: 720px !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 24px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__crumb { margin: 0 0 14px 0 !important; color: #9CA3AF !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__chips { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; padding-bottom: 16px !important; border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #F3F4F6 !important; color: #374151 !important; padding: 5px 10px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__chip svg { width: 14px !important; height: 14px !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__time { margin-left: auto !important; color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__tabs { display: flex !important; gap: 8px !important; margin: 16px 0 !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__tab { padding: 6px 14px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; color: #6B7280 !important; background: #F3F4F6 !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__tab--active { background: #FFFFFF !important; color: #0F172A !important; border: 1px solid #E5E7EB !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__row { display: flex !important; align-items: center !important; gap: 12px !important; padding-top: 6px !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__num { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 999px !important; background: #F3F4F6 !important; color: #6B7280 !important; font-size: 13px !important; font-weight: 600 !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__bolt svg { width: 16px !important; height: 16px !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__name { font-size: 18px !important; font-weight: 600 !important; color: #0F172A !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__rowtime { margin-left: auto !important; color: #9CA3AF !important; font-size: 13px !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__props { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 12px 0 0 40px !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__prop { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 6px !important; padding: 6px 10px !important; font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-whop-event .mock-tm-whop-event__prop strong { color: #0F172A !important; font-weight: 700 !important; }

/* ============================================================
   Calendly form-integration docs widgets (2026-06-01)
   Shared white TM shell (.widget--mock base) + Calendly blue #006BFF.
   Mirrors the Whop/Stripe mock structure. !important beats reset.css.
   ============================================================ */

/* Step 1 - dashboard left sidebar with Settings highlighted */
.widget--mock.mock-tm-sidebar { max-width: 300px !important; }
.widget--mock.mock-tm-sidebar .mock-tm-sidebar__inner { background: #FFFFFF !important; padding: 14px 12px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-sidebar .mock-tm-sidebar__site { display: flex !important; align-items: center !important; gap: 8px !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 8px 10px !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-sidebar .mock-tm-sidebar__sitemark { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 6px !important; background: #EDE9FE !important; color: #6D28D9 !important; font-weight: 800 !important; font-size: 12px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-sidebar .mock-tm-sidebar__sitename { flex: 1 !important; font-weight: 600 !important; font-size: 13px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-tm-sidebar .mock-tm-sidebar__chev { color: #9CA3AF !important; font-size: 11px !important; }
.widget--mock.mock-tm-sidebar .mock-tm-sidebar__group { margin: 12px 8px 4px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: #9CA3AF !important; }
.widget--mock.mock-tm-sidebar .mock-tm-sidebar__nav { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.widget--mock.mock-tm-sidebar .mock-tm-sidebar__nav li { padding: 7px 10px !important; border-radius: 7px !important; font-size: 14px !important; color: #374151 !important; }
.widget--mock.mock-tm-sidebar .mock-tm-sidebar__item--active { background: #EEF0F3 !important; color: #0F172A !important; font-weight: 600 !important; }

/* Step 3 - Calendly page, not connected */
.widget--mock.mock-tm-cal-connect { max-width: 680px !important; }
.widget--mock.mock-tm-cal-connect .mock-tm-cal-connect__inner { background: #F8F9FB !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-cal-connect .mock-tm-cal-connect__crumb { margin: 0 0 10px !important; color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-tm-cal-connect .mock-tm-cal-connect__title { margin: 0 0 16px !important; font: 800 26px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-cal-connect .mock-tm-cal-connect__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 22px !important; }
.widget--mock.mock-tm-cal-connect .mock-tm-cal-connect__copy { margin: 0 0 18px !important; font-size: 16px !important; line-height: 1.5 !important; color: #1F2937 !important; }
.widget--mock.mock-tm-cal-connect .mock-tm-cal-connect__btn { background: #2F43FF !important; color: #FFFFFF !important; border: 0 !important; border-radius: 8px !important; padding: 11px 18px !important; font-weight: 700 !important; cursor: default !important; }

/* Step 4 - Calendly OAuth approve screen */
.widget--mock.mock-cal-oauth { max-width: 640px !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__inner { background: #FFFFFF !important; padding: 28px 26px !important; color: #1B2A4A !important; font: 400 14px var(--font-family-base, system-ui) !important; text-align: center !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__mark { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 999px !important; border: 3px solid #006BFF !important; color: #006BFF !important; font-weight: 800 !important; font-size: 20px !important; margin: 0 auto 14px !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__title { margin: 0 0 20px !important; font: 600 22px var(--font-family-base, system-ui) !important; color: #1B2A4A !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__title strong { font-weight: 800 !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__panel { text-align: left !important; background: #FFFFFF !important; border: 1px solid #E6E9F2 !important; border-radius: 16px !important; padding: 24px !important; box-shadow: 0 8px 24px -16px rgba(15,23,42,0.25) !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__lead { margin: 0 0 16px !important; color: #1B2A4A !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__scope-h { margin: 14px 0 4px !important; font-weight: 700 !important; color: #1B2A4A !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__scope-b { margin: 0 0 6px !important; color: #4B5675 !important; padding-left: 14px !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__fine { margin: 18px 0 !important; font-size: 12px !important; color: #8A93AC !important; line-height: 1.5 !important; word-break: break-word !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__actions { display: flex !important; gap: 12px !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__approve { background: #4C6FFF !important; color: #FFFFFF !important; border: 0 !important; border-radius: 999px !important; padding: 11px 26px !important; font-weight: 600 !important; cursor: default !important; }
.widget--mock.mock-cal-oauth .mock-cal-oauth__cancel { background: #FFFFFF !important; color: #1B2A4A !important; border: 1px solid #C9D0E0 !important; border-radius: 999px !important; padding: 11px 26px !important; font-weight: 600 !important; cursor: default !important; }

/* Step 5 - Calendly connected card */
.widget--mock.mock-tm-cal-done { max-width: 700px !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__inner { background: #F8F9FB !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__crumb { margin: 0 0 10px !important; color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__title { margin: 0 0 6px !important; font: 800 26px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__status { margin: 0 0 16px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; color: #6B7280 !important; font-size: 14px !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__dot { width: 9px !important; height: 9px !important; border-radius: 999px !important; background: #22C55E !important; box-shadow: 0 0 0 3px rgba(34,197,94,0.18) !important; display: inline-block !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 22px !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__h { margin: 0 0 16px !important; font-weight: 700 !important; font-size: 17px !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__row { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__label { font-size: 16px !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__select { display: inline-flex !important; align-items: center !important; gap: 10px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 15px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__chev { color: #6B7280 !important; font-size: 11px !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__note { margin: 0 !important; color: #6B7280 !important; font-size: 14px !important; line-height: 1.55 !important; }
.widget--mock.mock-tm-cal-done .mock-tm-cal-done__link { color: #2F6BFF !important; }

/* Step 5b - event-to-fire dropdown options (dark menu) */
.widget--mock.mock-tm-cal-options { max-width: 380px !important; }
.widget--mock.mock-tm-cal-options .mock-tm-cal-options__inner { background: #FFFFFF !important; padding: 20px !important; color: #0F172A !important; font: 400 15px var(--font-family-base, system-ui) !important; display: flex !important; align-items: flex-start !important; gap: 10px !important; }
.widget--mock.mock-tm-cal-options .mock-tm-cal-options__label { padding-top: 8px !important; font-size: 15px !important; white-space: nowrap !important; }
.widget--mock.mock-tm-cal-options .mock-tm-cal-options__menu { background: #4B5563 !important; border-radius: 8px !important; padding: 6px !important; box-shadow: 0 10px 24px -8px rgba(15,23,42,0.4) !important; min-width: 150px !important; }
.widget--mock.mock-tm-cal-options .mock-tm-cal-options__opt { padding: 7px 12px !important; border-radius: 6px !important; color: #FFFFFF !important; font-size: 15px !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-tm-cal-options .mock-tm-cal-options__opt--sel { background: rgba(255,255,255,0.10) !important; }
.widget--mock.mock-tm-cal-options .mock-tm-cal-options__tick { color: #FFFFFF !important; }

/* Step 6a - attribution helper script card */
.widget--mock.mock-tm-cal-attr { max-width: 720px !important; }
.widget--mock.mock-tm-cal-attr .mock-tm-cal-attr__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 24px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-cal-attr .mock-tm-cal-attr__h { margin: 0 0 8px !important; font-weight: 700 !important; font-size: 17px !important; }
.widget--mock.mock-tm-cal-attr .mock-tm-cal-attr__sub { margin: 0 0 18px !important; color: #6B7280 !important; font-size: 14px !important; line-height: 1.55 !important; }
.widget--mock.mock-tm-cal-attr .mock-tm-cal-attr__row { display: flex !important; gap: 10px !important; }
.widget--mock.mock-tm-cal-attr .mock-tm-cal-attr__field { flex: 1 !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 12px 14px !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 13px !important; color: #0F172A !important; word-break: break-all !important; }
.widget--mock.mock-tm-cal-attr .mock-tm-cal-attr__copy { flex-shrink: 0 !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 0 14px !important; color: #6B7280 !important; cursor: default !important; }

/* Step 6c - WordPress plugin Calendly & Typeform checkbox card */
.widget--mock.mock-wp-forms { max-width: 720px !important; }
.widget--mock.mock-wp-forms .mock-wp-forms__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 6px !important; padding: 24px !important; color: #1E1E1E !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-wp-forms .mock-wp-forms__title { margin: 0 0 12px !important; font-size: 20px !important; font-weight: 700 !important; color: #1E1E1E !important; }
.widget--mock.mock-wp-forms .mock-wp-forms__desc { margin: 0 0 22px !important; color: #50575E !important; font-size: 14px !important; line-height: 1.6 !important; }
.widget--mock.mock-wp-forms .mock-wp-forms__row { display: flex !important; align-items: center !important; gap: 16px !important; }
.widget--mock.mock-wp-forms .mock-wp-forms__label { font-weight: 700 !important; font-size: 14px !important; color: #1E1E1E !important; max-width: 220px !important; }
.widget--mock.mock-wp-forms .mock-wp-forms__check { width: 18px !important; height: 18px !important; border: 1px solid #8C8F94 !important; border-radius: 4px !important; background: #FFFFFF !important; flex-shrink: 0 !important; }

/* Step 7 - visitor timeline with a Schedule event */
.widget--mock.mock-tm-cal-timeline { max-width: 760px !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__inner { background: #FFFFFF !important; padding: 0 !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__head { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; padding: 16px 18px !important; border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__avatar { width: 26px !important; height: 26px !important; border-radius: 999px !important; background: #CBD5E1 !important; display: inline-block !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__user { font-weight: 600 !important; font-size: 14px !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__pill { background: #F3F4F6 !important; color: #4B5563 !important; border-radius: 6px !important; padding: 3px 9px !important; font-size: 12px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__pill--sch { color: #B45309 !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__path { color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__tabs { display: flex !important; gap: 10px !important; padding: 12px 18px 0 !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__tab { padding: 6px 12px !important; border-radius: 8px !important; font-size: 14px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__tab--active { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; color: #0F172A !important; font-weight: 600 !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__steps { padding: 16px 18px 20px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__step { display: flex !important; gap: 12px !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__num { flex-shrink: 0 !important; width: 26px !important; height: 26px !important; border-radius: 999px !important; border: 1px solid #D1D5DB !important; background: #F9FAFB !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 600 !important; color: #374151 !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__num--ev { border-color: #FCD34D !important; background: #FEF3C7 !important; color: #B45309 !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__body { flex: 1 !important; min-width: 0 !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__where { margin: 2px 0 !important; font-size: 15px !important; color: #0F172A !important; word-break: break-all !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__where--ev { font-weight: 700 !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__dur { margin: 0 !important; color: #9CA3AF !important; font-size: 13px !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 8px !important; }
.widget--mock.mock-tm-cal-timeline .mock-tm-cal-timeline__chip { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 6px 10px !important; font-size: 12px !important; color: #374151 !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }

/* ============================================================
   Calendly fire-condition docs widgets (2026-06-01)
   mock-tm-cal-fire is shared by the empty / single-group / multi-group
   TrueMetriks figures. mock-cal-events + mock-cal-questions are the
   Calendly-side (where invitee questions are created).
   ============================================================ */

.widget--mock.mock-tm-cal-fire { max-width: 760px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 24px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__h { margin: 0 0 8px !important; font-weight: 700 !important; font-size: 18px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__desc { margin: 0 0 18px !important; color: #6B7280 !important; font-size: 14px !important; line-height: 1.55 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__empty { margin: 0 0 16px !important; color: #6B7280 !important; font-style: italic !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__addgroup { background: #2F6BFF !important; border: 1px solid #2F6BFF !important; border-radius: 8px !important; padding: 9px 16px !important; font-weight: 600 !important; color: #FFFFFF !important; cursor: default !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__group { border: 1px solid #E5E7EB !important; border-radius: 10px !important; margin-bottom: 16px !important; overflow: hidden !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__ghead { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 16px !important; border-bottom: 1px solid #E5E7EB !important; background: #F9FAFB !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__gchev { color: #6B7280 !important; font-size: 11px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__gname { color: #6B7280 !important; font-weight: 500 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__gmeta { margin-left: auto !important; color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__gx { color: #EF4444 !important; font-size: 16px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__body { padding: 16px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__label { margin: 0 0 6px !important; font-weight: 600 !important; font-size: 13px !important; color: #0F172A !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__input { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 10px 13px !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__input--ph { color: #9CA3AF !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__help { margin: 6px 0 14px !important; color: #6B7280 !important; font-size: 12px !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__matchmode { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 4px !important; margin: 0 0 14px !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__mmlabel { color: #374151 !important; margin-right: 4px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__radio { width: 14px !important; height: 14px !important; border: 2px solid #9CA3AF !important; border-radius: 999px !important; display: inline-block !important; margin: 0 4px 0 10px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__radio--on { border-color: #2F6BFF !important; background: radial-gradient(circle, #2F6BFF 0 3px, #FFFFFF 4px) !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__condrow { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 12px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__col { flex: 1 !important; min-width: 0 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__condx { color: #EF4444 !important; font-size: 16px !important; margin-top: 2px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__addcond { background: #2F6BFF !important; border: 1px solid #2F6BFF !important; border-radius: 8px !important; padding: 8px 14px !important; font-weight: 600 !important; color: #FFFFFF !important; cursor: default !important; }

/* Custom-events editor additions: IF badge, one-per-line answers, THEN row, locked state */
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__gmeta-warn { color: #B45309 !important; font-weight: 600 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__gmeta-ev { color: #2F6BFF !important; font-weight: 600 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__ifbadge { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 14px !important; font-weight: 600 !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__if { background: #4B5563 !important; color: #FFFFFF !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 6px !important; letter-spacing: 0.03em !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__answers { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__ansrow { display: flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__ansrow .mock-tm-cal-fire__input { flex: 1 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__ansx { color: #9CA3AF !important; font-size: 15px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__addans { align-self: flex-start !important; background: #F3F4F6 !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 7px 12px !important; font-weight: 600 !important; font-size: 13px !important; color: #0F172A !important; cursor: default !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__then { margin-top: 14px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; background: #FFFBEB !important; border: 1px solid #FDE68A !important; border-radius: 10px !important; padding: 14px 16px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__then--locked { background: #EFF6FF !important; border-color: #BFDBFE !important; display: block !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__thenrow { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__thenlabel { background: #2F6BFF !important; color: #FFFFFF !important; font-size: 12px !important; font-weight: 700 !important; padding: 4px 9px !important; border-radius: 6px !important; letter-spacing: 0.03em !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__thentext { color: #0F172A !important; font-weight: 600 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__select { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-width: 220px !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 9px 12px !important; color: #6B7280 !important; font-size: 14px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__selchev { color: #9CA3AF !important; font-size: 11px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__createnew { background: #2F6BFF !important; color: #FFFFFF !important; border-radius: 8px !important; padding: 9px 14px !important; font-weight: 600 !important; font-size: 14px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__warn { flex-basis: 100% !important; margin: 4px 0 0 !important; color: #B45309 !important; font-size: 13px !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__thenfired { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__lockpill { display: inline-flex !important; align-items: center !important; gap: 4px !important; background: #E5E7EB !important; color: #4B5563 !important; font-size: 12px !important; font-weight: 600 !important; padding: 3px 9px !important; border-radius: 999px !important; }
.widget--mock.mock-tm-cal-fire .mock-tm-cal-fire__locknote { margin: 10px 0 0 !important; color: #4B5563 !important; font-size: 13px !important; line-height: 1.5 !important; }

/* Create custom event dialog (Typeform/Calendly group) */
.widget--mock.mock-tm-create-event { max-width: 460px !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; padding: 24px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; box-shadow: 0 20px 48px -16px rgba(15,23,42,0.35) !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 18px !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__title { margin: 0 !important; font-weight: 700 !important; font-size: 19px !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__x { color: #9CA3AF !important; font-size: 18px !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__label { margin: 0 0 6px !important; font-weight: 700 !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__label--inline { margin: 0 !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__select { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 11px 13px !important; font-size: 15px !important; color: #0F172A !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__select--disabled { background: #F9FAFB !important; color: #9CA3AF !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__chev { color: #9CA3AF !important; font-size: 11px !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__help { margin: 8px 0 18px !important; color: #6B7280 !important; font-size: 13px !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__input { background: #FFFFFF !important; border: 2px solid #0F172A !important; border-radius: 8px !important; padding: 11px 13px !important; font-size: 15px !important; color: #0F172A !important; margin-bottom: 18px !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__firewhen { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 6px !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__seeguide { color: #2F6BFF !important; font-size: 14px !important; text-decoration: underline !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__actions { display: flex !important; justify-content: flex-end !important; gap: 12px !important; margin-top: 22px !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__cancel { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 9px 18px !important; font-weight: 600 !important; color: #0F172A !important; }
.widget--mock.mock-tm-create-event .mock-tm-create-event__create { background: #A5B4FC !important; color: #FFFFFF !important; border-radius: 8px !important; padding: 9px 22px !important; font-weight: 600 !important; }

/* Facebook integration - Custom events list row with origin tag */
.widget--mock.mock-tm-fb-cevents { max-width: 660px !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 8px !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__title { margin: 0 !important; font-weight: 700 !important; font-size: 18px !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__headright { display: flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__seeguide { color: #2F6BFF !important; font-size: 14px !important; text-decoration: underline !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__create { background: #2F6BFF !important; color: #FFFFFF !important; border-radius: 8px !important; padding: 8px 16px !important; font-weight: 600 !important; font-size: 14px !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__desc { margin: 0 0 16px !important; color: #6B7280 !important; font-size: 13px !important; line-height: 1.55 !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__row { display: flex !important; align-items: center !important; gap: 10px !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 14px 16px !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__dot { width: 9px !important; height: 9px !important; border-radius: 999px !important; background: #22C55E !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__tag { font-size: 13px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 6px !important; background: #EEF2FF !important; color: #4338CA !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__arrow { color: #9CA3AF !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 15px !important; color: #0F172A !important; }
.widget--mock.mock-tm-fb-cevents .mock-tm-fb-cevents__icons { margin-left: auto !important; color: #9CA3AF !important; font-size: 15px !important; flex-shrink: 0 !important; }

/* Calendly app - event types list */
.widget--mock.mock-cal-events { max-width: 640px !important; }
.widget--mock.mock-cal-events .mock-cal-events__inner { background: #FFFFFF !important; padding: 22px !important; color: #1B2A4A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-cal-events .mock-cal-events__h { margin: 0 0 12px !important; font-weight: 800 !important; font-size: 20px !important; }
.widget--mock.mock-cal-events .mock-cal-events__tabs { display: flex !important; gap: 18px !important; border-bottom: 1px solid #E6E9F2 !important; padding-bottom: 8px !important; margin-bottom: 16px !important; color: #4B5675 !important; font-size: 14px !important; }
.widget--mock.mock-cal-events .mock-cal-events__tab--active { color: #006BFF !important; border-bottom: 2px solid #006BFF !important; padding-bottom: 9px !important; margin-bottom: -9px !important; font-weight: 600 !important; }
.widget--mock.mock-cal-events .mock-cal-events__row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; border: 1px solid #E6E9F2 !important; border-left: 3px solid #6D5BFF !important; border-radius: 8px !important; padding: 14px 16px !important; margin-bottom: 12px !important; }
.widget--mock.mock-cal-events .mock-cal-events__name { margin: 0 0 4px !important; font-weight: 700 !important; font-size: 15px !important; }
.widget--mock.mock-cal-events .mock-cal-events__meta { margin: 0 !important; color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-cal-events .mock-cal-events__more { color: #006BFF !important; font-weight: 600 !important; font-size: 13px !important; white-space: nowrap !important; }

/* Calendly app - invitee questions */
.widget--mock.mock-cal-questions { max-width: 560px !important; }
.widget--mock.mock-cal-questions .mock-cal-questions__inner { background: #FFFFFF !important; padding: 22px !important; color: #1B2A4A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-cal-questions .mock-cal-questions__h { margin: 0 0 14px !important; font-size: 15px !important; color: #4B5675 !important; }
.widget--mock.mock-cal-questions .mock-cal-questions__q { border-left: 2px solid #E6E9F2 !important; padding-left: 14px !important; margin-bottom: 18px !important; }
.widget--mock.mock-cal-questions .mock-cal-questions__qlabel { margin: 0 0 8px !important; font-weight: 700 !important; font-size: 15px !important; }
.widget--mock.mock-cal-questions .mock-cal-questions__field { border: 1px solid #C9D0E0 !important; border-radius: 8px !important; padding: 12px 14px !important; font-size: 14px !important; color: #1B2A4A !important; margin-bottom: 8px !important; }
.widget--mock.mock-cal-questions .mock-cal-questions__opt { margin: 0 !important; color: #4B5675 !important; font-size: 13px !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-cal-questions .mock-cal-questions__check { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; border-radius: 4px !important; background: #2F6BFF !important; color: #FFFFFF !important; font-size: 11px !important; flex-shrink: 0 !important; }

/* ============================================================
   Journeys docs widgets (2026-06-01)
   mock-tm-journeys-board = the full Journeys page replica (toolbar +
   step filters + a Sankey flow of page paths). mock-tm-journeys-paths =
   2-3 example single routes drawn as page-to-page chip chains.
   ============================================================ */

.widget--mock.mock-tm-journeys-board { max-width: 760px !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 16px 18px 20px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__toolbar { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 16px !important; padding-bottom: 14px !important; border-bottom: 1px solid #F1F5F9 !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__filter { display: inline-flex !important; align-items: center !important; gap: 7px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 6px 12px !important; font-weight: 600 !important; color: #374151 !important; font-size: 13px !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__slider { display: inline-flex !important; align-items: center !important; gap: 9px !important; color: #475569 !important; font-size: 13px !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__track { position: relative !important; display: inline-block !important; width: 78px !important; height: 4px !important; border-radius: 999px !important; background: #E2E8F0 !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__knob { position: absolute !important; top: 50% !important; left: 34% !important; width: 13px !important; height: 13px !important; border-radius: 999px !important; background: #2F6BFF !important; transform: translate(-50%, -50%) !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__knob--b { left: 22% !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__date { margin-left: auto !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 6px 12px !important; color: #374151 !important; font-size: 13px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__steps { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin: 16px 0 6px !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__step { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__steplabel { font-weight: 600 !important; color: #334155 !important; font-size: 13px !important; white-space: nowrap !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__field { flex: 1 !important; min-width: 0 !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 7px 10px !important; color: #9CA3AF !important; font-size: 13px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__hint { margin: 4px 0 6px !important; color: #94A3B8 !important; font-size: 12px !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__chart { margin-top: 8px !important; }
.widget--mock.mock-tm-journeys-board .mock-tm-jb__chart svg { display: block !important; width: 100% !important; height: auto !important; }

.widget--mock.mock-tm-journeys-paths { max-width: 760px !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 20px 22px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__row { display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__chip { border-radius: 8px !important; padding: 6px 11px !important; font-size: 13px !important; font-weight: 600 !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; border: 1px solid transparent !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__chip--teal { background: #E5F5F3 !important; color: #1A7A70 !important; border-color: #BEE7E2 !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__chip--amber { background: #FBF1DD !important; color: #9A6B12 !important; border-color: #F1DCAE !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__chip--green { background: #E4F4EA !important; color: #2E7D4F !important; border-color: #BFE6CC !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__chip--rose { background: #FBE7EC !important; color: #A33A55 !important; border-color: #F3C9D3 !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__chip--slate { background: #ECEFF4 !important; color: #475569 !important; border-color: #D5DCE6 !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__chip--blue { background: #E7F0FB !important; color: #2C5F9E !important; border-color: #C8DBF3 !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__chip--purple { background: #EFEBFB !important; color: #5B4BC4 !important; border-color: #D7CEF3 !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__arrow { color: #94A3B8 !important; font-size: 14px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-journeys-paths .mock-tm-jp__stat { margin-left: 8px !important; color: #64748B !important; font-size: 12px !important; font-weight: 500 !important; }

/* ============================================================
   Products docs widget (2026-06-01)
   mock-tm-products-board = the full Products page replica: 4 KPI cards
   above a per-product table (Views / Units sold / Revenue / Contribution
   % / two conversion columns) with a Total row and the pagination footer.
   ============================================================ */

.widget--mock.mock-tm-products-board { max-width: 760px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 16px 14px !important; color: #0F172A !important; font: 400 12px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__toolbar { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__filter { display: inline-flex !important; align-items: center !important; gap: 7px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 6px 12px !important; font-weight: 600 !important; color: #374151 !important; font-size: 13px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__date { margin-left: auto !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 6px 12px !important; color: #374151 !important; font-size: 13px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__kpis { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; border: 1px solid #EEF1F5 !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 16px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__kpi { padding: 13px 14px !important; border-right: 1px solid #EEF1F5 !important; display: flex !important; flex-direction: column !important; gap: 7px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__kpi:last-child { border-right: 0 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__kpilabel { color: #94A3B8 !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__kpival { color: #0F172A !important; font-size: 21px !important; font-weight: 700 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__i { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 13px !important; height: 13px !important; border-radius: 999px !important; border: 1px solid #CBD5E1 !important; color: #94A3B8 !important; font-size: 9px !important; font-style: italic !important; font-weight: 700 !important; line-height: 1 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__table { display: flex !important; flex-direction: column !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__row { display: flex !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; border-bottom: 1px solid #E5E8EE !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__row--head { border-bottom: 1px solid #D5DAE3 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__row--total { border-top: 2px solid #D5DAE3 !important; border-bottom: 0 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__c { box-sizing: border-box !important; flex: 0 0 90px !important; display: flex !important; align-items: center !important; padding: 9px 10px !important; font-size: 12px !important; color: #1E293B !important; border-right: 1px solid #E5E8EE !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__c:last-child { border-right: 0 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__c--prod { flex: 1 1 138px !important; min-width: 0 !important; font-weight: 500 !important; gap: 6px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__c--num { text-align: right !important; justify-content: flex-end !important; font-variant-numeric: tabular-nums !important; color: #334155 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__row--head .mock-tm-prod__c { align-items: flex-end !important; color: #64748B !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.25 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__row--total .mock-tm-prod__c { color: #0F172A !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: 14px !important; color: #64748B !important; font-size: 12px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__pager { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__pgbtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; color: #64748B !important; font-size: 13px !important; }

/* Products page: Attribution + Audience controls row (2026-06-13) */
.widget--mock.mock-tm-products-board .mock-tm-prod__controls { display: flex !important; align-items: center !important; gap: 22px !important; margin-bottom: 16px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__ctrl { display: inline-flex !important; align-items: center !important; gap: 9px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__ctrllbl { color: #334155 !important; font-size: 13px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__select { display: inline-flex !important; align-items: center !important; gap: 10px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 6px 11px !important; color: #0F172A !important; font-size: 13px !important; font-weight: 500 !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__caret { color: #94A3B8 !important; font-size: 9px !important; }

/* Products page: per-product source drill-down tree (2026-06-13) */
.widget--mock.mock-tm-products-board .mock-tm-prod__chev { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 13px !important; height: 100% !important; color: #94A3B8 !important; font-size: 14px !important; font-weight: 700 !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__chev--open { transform: rotate(90deg) !important; color: #475569 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__row--open { border-bottom: 0 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__row--open .mock-tm-prod__c { background: #F8FAFC !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__drillrow { border-bottom: 1px solid #E5E8EE !important; background: #F8FAFC !important; padding: 4px 0 10px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__drill { border: 1px solid #E5E8EE !important; border-radius: 10px !important; background: #FFFFFF !important; margin: 0 8px !important; overflow: hidden !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__drillhead { display: flex !important; align-items: center !important; background: #F1F5F9 !important; border-bottom: 1px solid #E5E8EE !important; padding: 7px 12px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__dc { color: #64748B !important; font-size: 11px !important; font-weight: 600 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__dc--src { flex: 1 1 auto !important; min-width: 0 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__dc--n { flex: 0 0 64px !important; text-align: right !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tree { display: flex !important; flex-direction: column !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tnode { display: flex !important; align-items: center !important; padding: 7px 12px !important; border-bottom: 1px solid #F1F5F9 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tnode:last-child { border-bottom: 0 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tname { flex: 1 1 auto !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; overflow: hidden !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tval { flex: 0 0 64px !important; text-align: right !important; font-size: 12px !important; color: #334155 !important; font-variant-numeric: tabular-nums !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tlabel { font-size: 12px !important; color: #1E293B !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tlabel--direct { font-style: italic !important; color: #64748B !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tchev { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; color: #94A3B8 !important; font-size: 13px !important; font-weight: 700 !important; flex-shrink: 0 !important; border-radius: 4px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tchev--open { transform: rotate(90deg) !important; color: #475569 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tchev--none { visibility: hidden !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tchev--focus { box-shadow: 0 0 0 2px #2F6BFF !important; color: #2F6BFF !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__sico { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 5px !important; font-size: 11px !important; font-weight: 700 !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__sico--fb { background: #1877F2 !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__sico--g { background: #FFFFFF !important; color: #4285F4 !important; border: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__badge { display: inline-flex !important; align-items: center !important; background: #EEF2F7 !important; color: #64748B !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; padding: 2px 6px !important; border-radius: 5px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tnode--l0 .mock-tm-prod__tname { padding-left: 2px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tnode--l1 .mock-tm-prod__tname { padding-left: 22px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tnode--l2 .mock-tm-prod__tname { padding-left: 42px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tnode--l3 .mock-tm-prod__tname { padding-left: 62px !important; }
.widget--mock.mock-tm-products-board .mock-tm-prod__tnode--l4 .mock-tm-prod__tname { padding-left: 82px !important; }

/* ============================================================
   Events docs widgets (2026-06-01)
   Shared .mock-tm-ev styles across four figures: the empty Events page,
   the Create event modal, the Condition type dropdown, and the
   "Fires when another event fires" Source event dropdown.
   ============================================================ */

.widget--mock.mock-tm-events-empty { max-width: 760px !important; }
.widget--mock.mock-tm-events-create { max-width: 600px !important; }
.widget--mock.mock-tm-events-conditions { max-width: 520px !important; }
.widget--mock.mock-tm-events-source { max-width: 520px !important; }

.widget--mock.mock-tm-ev .mock-tm-ev__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-events-empty .mock-tm-ev__inner { background: #F8FAFC !important; }

/* page header (empty-state widget) */
.widget--mock.mock-tm-ev .mock-tm-ev__pagehead { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 18px !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__h1 { margin: 0 0 6px !important; font-size: 24px !important; font-weight: 800 !important; color: #0F172A !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__sub { margin: 0 !important; color: #6B7280 !important; font-size: 13px !important; line-height: 1.5 !important; max-width: 560px !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__plus { font-size: 15px !important; line-height: 1 !important; }

/* shared buttons */
.widget--mock.mock-tm-ev .mock-tm-ev__btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 8px 14px !important; font-weight: 600 !important; font-size: 13px !important; color: #0F172A !important; white-space: nowrap !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__btn--primary { background: #2F6BFF !important; border-color: #2F6BFF !important; color: #FFFFFF !important; }

/* cards */
.widget--mock.mock-tm-ev .mock-tm-ev__card { border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 20px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__card--fire { margin-top: 4px !important; padding: 18px !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__cardh { margin: 0 !important; font-weight: 700 !important; font-size: 15px !important; color: #0F172A !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__card--fire .mock-tm-ev__cardh { margin-bottom: 4px !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__empty { margin: 16px 0 0 !important; color: #9CA3AF !important; font-size: 14px !important; }

/* modal */
.widget--mock.mock-tm-ev .mock-tm-ev__modalhead { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__modaltitle { font-weight: 800 !important; font-size: 18px !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__x { color: #9CA3AF !important; font-size: 18px !important; }

/* form fields (shared) */
.widget--mock.mock-tm-ev .mock-tm-ev__label { display: block !important; margin: 14px 0 6px !important; font-size: 13px !important; color: #0F172A !important; font-weight: 500 !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__label--inline { margin: 0 !important; font-size: 14px !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__input { border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 10px 12px !important; font-size: 14px !important; color: #0F172A !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__input--focus { border: 2px solid #1F2937 !important; padding: 9px 11px !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__ph { color: #9CA3AF !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__textarea { border: 1px solid #D1D5DB !important; border-radius: 8px !important; height: 60px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__select { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 10px 12px !important; font-size: 14px !important; color: #0F172A !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__chev { color: #9CA3AF !important; font-size: 11px !important; flex-shrink: 0 !important; }

/* toggle */
.widget--mock.mock-tm-ev .mock-tm-ev__toggle-row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 18px 0 !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__toggle { position: relative !important; display: inline-block !important; width: 40px !important; height: 22px !important; border-radius: 999px !important; background: #2F6BFF !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__knob { position: absolute !important; top: 2px !important; left: 20px !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; background: #FFFFFF !important; }

/* note + actions */
.widget--mock.mock-tm-ev .mock-tm-ev__note { margin: 16px 0 0 !important; background: #F9FAFB !important; border: 1px solid #F1F5F9 !important; border-radius: 8px !important; padding: 12px 14px !important; color: #6B7280 !important; font-size: 12px !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; margin-top: 18px !important; }

/* dropdown menu */
.widget--mock.mock-tm-ev .mock-tm-ev__menu { border: 1px solid #E5E7EB !important; border-radius: 10px !important; margin-top: 6px !important; padding: 6px !important; background: #FFFFFF !important; box-shadow: 0 10px 28px rgba(15,23,42,0.10) !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__opt { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 9px 10px !important; border-radius: 7px !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__opt--sel { background: #EEF1F5 !important; font-weight: 500 !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__check { color: #0F172A !important; font-size: 13px !important; }
.widget--mock.mock-tm-ev .mock-tm-ev__help { margin: 8px 0 0 !important; color: #6B7280 !important; font-size: 12px !important; line-height: 1.5 !important; }

/* ============================================================
   Platform Health docs widget (2026-06-01)
   mock-tm-plat-health = the full page replica: platform tabs with their
   success %, three totals (Total fires / Successful / Failed), and the
   Per event table with a success-rate chip.
   ============================================================ */

.widget--mock.mock-tm-plat-health { max-width: 760px !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__inner { background: #F8FAFC !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__topbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__sub { margin: 0 !important; color: #6B7280 !important; font-size: 12px !important; line-height: 1.5 !important; max-width: 480px !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__date { display: inline-flex !important; align-items: center !important; gap: 7px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 6px 12px !important; color: #374151 !important; font-size: 12px !important; font-weight: 500 !important; background: #FFFFFF !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__tabs { display: inline-flex !important; flex-wrap: wrap !important; gap: 6px !important; background: #EEF1F5 !important; border-radius: 10px !important; padding: 5px !important; margin-bottom: 16px !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__tab { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 7px 12px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__tab--active { background: #FFFFFF !important; color: #0F172A !important; box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__ic { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; color: #FFFFFF !important; font-size: 11px !important; font-weight: 700 !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__ic--fb { background: #1877F2 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__ic--ga { background: #E8710A !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__ic--gads { background: #FBBC04 !important; color: #1F2937 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__pct { background: #DCFCE7 !important; color: #15803D !important; border-radius: 6px !important; padding: 2px 7px !important; font-size: 11px !important; font-weight: 600 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__kpis { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; margin-bottom: 16px !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__kpi { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 16px 18px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__kpilabel { color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__kpival { color: #0F172A !important; font-size: 26px !important; font-weight: 700 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__kpival--ok { color: #16A34A !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__kpival--bad { color: #DC2626 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__cardh { margin: 0 0 6px !important; font-weight: 700 !important; font-size: 15px !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__table { display: flex !important; flex-direction: column !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__row { display: flex !important; align-items: center !important; padding: 11px 2px !important; border-bottom: 1px solid #F1F5F9 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__row:last-child { border-bottom: 0 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__row--head { border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__c { font-size: 13px !important; color: #1E293B !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__c--ev { flex: 1 1 160px !important; min-width: 0 !important; font-weight: 600 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__c--num { flex: 0 0 90px !important; text-align: right !important; font-variant-numeric: tabular-nums !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__c--rate { flex: 0 0 110px !important; display: flex !important; justify-content: flex-end !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__row--head .mock-tm-ph__c { color: #64748B !important; font-size: 12px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__c--ok { color: #16A34A !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__c--bad { color: #DC2626 !important; }
.widget--mock.mock-tm-plat-health .mock-tm-ph__ratechip { background: #DCFCE7 !important; color: #15803D !important; border-radius: 6px !important; padding: 3px 9px !important; font-size: 12px !important; font-weight: 600 !important; }

/* ============================================================ */
/* Typeform integration widgets (form-integrations/typeform)    */
/* ============================================================ */

/* ---- tm-typeform setup (not configured) ---- */
.widget--mock.mock-tm-tf-setup { max-width: 760px !important; }
.widget--mock.mock-tm-tf-setup .mock-tm-tf-setup__inner { background: #F8F9FB !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-tf-setup .mock-tm-tf-setup__crumb { margin: 0 0 14px 0 !important; color: #6B7280 !important; font-size: 14px !important; }
.widget--mock.mock-tm-tf-setup .mock-tm-tf-setup__title { margin: 0 0 16px 0 !important; font: 800 28px var(--font-family-base, system-ui) !important; color: #0F172A !important; }
.widget--mock.mock-tm-tf-setup .mock-tm-tf-setup__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 28px !important; }
.widget--mock.mock-tm-tf-setup .mock-tm-tf-setup__copy { margin: 0 0 20px 0 !important; font-size: 17px !important; line-height: 1.5 !important; color: #0F172A !important; }
.widget--mock.mock-tm-tf-setup .mock-tm-tf-setup__btn { background: #2945E6 !important; color: #FFFFFF !important; border: 0 !important; border-radius: 8px !important; padding: 12px 20px !important; font-weight: 700 !important; cursor: default !important; }

/* ---- tm-typeform webhook destination card ---- */
.widget--mock.mock-tm-tf-webhook { max-width: 760px !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__inner { background: #F8F9FB !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__title { margin: 0 0 6px 0 !important; font: 800 28px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__status { margin: 0 0 18px 0 !important; color: #6B7280 !important; font-size: 15px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__dot { width: 9px !important; height: 9px !important; border-radius: 999px !important; background: #F59E0B !important; display: inline-block !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 28px !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__h { margin: 0 0 18px 0 !important; font: 700 18px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__label { margin: 16px 0 6px 0 !important; font-weight: 600 !important; font-size: 15px !important; color: #0F172A !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__row { display: flex !important; gap: 10px !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__field { flex: 1 !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 10px 14px !important; font-family: ui-monospace, monospace !important; font-size: 12px !important; color: #0F172A !important; word-break: break-all !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__copy { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 8px 12px !important; color: #6B7280 !important; cursor: default !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__copy--focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.30) !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__verify { margin: 22px 0 8px 0 !important; font-weight: 600 !important; color: #4B5563 !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__steps { margin: 0 0 18px 0 !important; padding-left: 22px !important; color: #4B5563 !important; font-size: 14px !important; line-height: 1.7 !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__steps li { margin: 0 0 2px 0 !important; }
.widget--mock.mock-tm-tf-webhook .mock-tm-tf-webhook__check { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 9px 16px !important; color: #0F172A !important; font-weight: 600 !important; cursor: default !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }

/* ---- tm-typeform custom URL params (amber) ---- */
.widget--mock.mock-tm-tf-params { max-width: 760px !important; }
.widget--mock.mock-tm-tf-params .mock-tm-tf-params__inner { background: #FFFBEB !important; border: 1px solid #FCD34D !important; border-radius: 12px !important; padding: 28px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-tf-params .mock-tm-tf-params__h { margin: 0 0 12px 0 !important; font: 700 19px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-tf-params .mock-tm-tf-params__copy { margin: 0 0 12px 0 !important; color: #57534E !important; font-size: 15px !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-tf-params .mock-tm-tf-params__chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 0 16px 0 !important; }
.widget--mock.mock-tm-tf-params .mock-tm-tf-params__chip { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #FFFFFF !important; border: 1px solid #D6D3D1 !important; border-radius: 8px !important; padding: 7px 12px !important; font-family: ui-monospace, monospace !important; font-size: 13px !important; color: #0F172A !important; }
.widget--mock.mock-tm-tf-params .mock-tm-tf-params__footer { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; gap: 14px !important; }
.widget--mock.mock-tm-tf-params .mock-tm-tf-params__note { color: #78716C !important; font-size: 13px !important; line-height: 1.45 !important; }
.widget--mock.mock-tm-tf-params .mock-tm-tf-params__copyall { background: #FFFFFF !important; border: 1px solid #D6D3D1 !important; border-radius: 8px !important; padding: 8px 14px !important; color: #0F172A !important; font-weight: 600 !important; cursor: default !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; flex-shrink: 0 !important; }

/* ============ Typeform-branded (third-party) widgets ============ */
/* Typeform brand: black on white, system font, dark buttons. */

/* ---- typeform modal (Add / Edit webhook) ---- */
.widget--mock.mock-typeform-modal { max-width: 680px !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__inner { background: #2B2B2B !important; border-radius: 12px !important; padding: 36px 28px !important; display: flex !important; justify-content: center !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__dialog { background: #FFFFFF !important; border-radius: 12px !important; padding: 28px !important; width: 100% !important; max-width: 520px !important; color: #1A1A1A !important; font: 400 15px var(--font-family-base, system-ui) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__head { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 18px !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__heading { font: 600 22px var(--font-family-base, system-ui) !important; color: #1A1A1A !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__x { color: #9CA3AF !important; font-size: 22px !important; line-height: 1 !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__label { margin: 16px 0 4px 0 !important; font-weight: 700 !important; font-size: 16px !important; color: #1A1A1A !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__hint { margin: 0 0 8px 0 !important; color: #6B7280 !important; font-size: 14px !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__field { border: 1px solid #C9CDD2 !important; border-radius: 8px !important; padding: 11px 14px !important; font-family: ui-monospace, monospace !important; font-size: 13px !important; color: #1A1A1A !important; word-break: break-all !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__field--secret { flex: 1 !important; letter-spacing: 1px !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__secretrow { display: flex !important; gap: 8px !important; align-items: stretch !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__show { background: #F3F4F6 !important; border: 1px solid #C9CDD2 !important; border-radius: 8px !important; padding: 0 14px !important; color: #1A1A1A !important; font-weight: 500 !important; cursor: default !important; flex-shrink: 0 !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__actions { display: flex !important; justify-content: flex-end !important; gap: 10px !important; margin-top: 22px !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__btn { border: 0 !important; border-radius: 8px !important; padding: 11px 18px !important; font-weight: 600 !important; cursor: default !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__btn--ghost { background: #F3F4F6 !important; color: #1A1A1A !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__btn--dark { background: #262627 !important; color: #FFFFFF !important; }
.widget--mock.mock-typeform-modal .mock-typeform-modal__btn--danger { background: #C0392B !important; color: #FFFFFF !important; margin-top: 4px !important; }

/* ---- typeform saved webhook row (off / on) ---- */
.widget--mock.mock-typeform-row { max-width: 820px !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 22px 24px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; color: #1A1A1A !important; font: 400 15px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__row { display: flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__linkicon { color: #9CA3AF !important; flex-shrink: 0 !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__url { flex: 1 !important; font-size: 16px !important; color: #1A1A1A !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__state { font-weight: 500 !important; white-space: nowrap !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__state--off { color: #9CA3AF !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__state--on { color: #2C7A7B !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__toggle { position: relative !important; width: 40px !important; height: 22px !important; border-radius: 999px !important; flex-shrink: 0 !important; display: inline-block !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__toggle--off { background: #D1D5DB !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__toggle--on { background: #4FB0B5 !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__knob { position: absolute !important; top: 3px !important; width: 16px !important; height: 16px !important; border-radius: 999px !important; background: #FFFFFF !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__toggle--off .mock-typeform-row__knob { left: 3px !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__toggle--on .mock-typeform-row__knob { left: 21px !important; }
.widget--mock.mock-typeform-row .mock-typeform-row__btn { background: #EFEFEF !important; border: 0 !important; border-radius: 8px !important; padding: 9px 14px !important; color: #1A1A1A !important; font-weight: 500 !important; cursor: default !important; white-space: nowrap !important; flex-shrink: 0 !important; }

/* ---- typeform recent deliveries ---- */
.widget--mock.mock-typeform-deliv { max-width: 860px !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 24px !important; color: #1A1A1A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__bar { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 18px !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__title { font: 700 18px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__send { background: #262627 !important; color: #FFFFFF !important; border: 0 !important; border-radius: 8px !important; padding: 9px 16px !important; font-weight: 600 !important; cursor: default !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__grid { display: grid !important; grid-template-columns: 220px minmax(0,1fr) !important; gap: 16px !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__item { display: flex !important; gap: 10px !important; background: #F3F4F6 !important; border-radius: 10px !important; padding: 12px !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__check { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; border: 1.5px solid #2C7A7B !important; color: #2C7A7B !important; font-size: 11px !important; flex-shrink: 0 !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__when { margin: 0 0 4px 0 !important; font-weight: 700 !important; font-size: 13px !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__id { margin: 0 0 6px 0 !important; color: #9CA3AF !important; font-family: ui-monospace, monospace !important; font-size: 11px !important; word-break: break-all !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__badge { display: inline-block !important; border: 1px solid #C9CDD2 !important; border-radius: 5px !important; padding: 1px 7px !important; font-size: 11px !important; font-weight: 600 !important; color: #4B5563 !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__detail { border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 16px !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__tabs { display: flex !important; gap: 18px !important; border-bottom: 1px solid #E5E7EB !important; padding-bottom: 10px !important; margin-bottom: 12px !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__tab { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; color: #9CA3AF !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__tab--active { color: #1A1A1A !important; border-bottom: 2px solid #1A1A1A !important; padding-bottom: 8px !important; margin-bottom: -10px !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__ok { background: #DCFCE7 !important; color: #166534 !important; border-radius: 5px !important; padding: 0 6px !important; font-size: 11px !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__sub { margin: 0 0 6px 0 !important; color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-typeform-deliv .mock-typeform-deliv__code { margin: 0 !important; background: #0F172A !important; color: #E2E8F0 !important; border-radius: 8px !important; padding: 14px !important; font-family: ui-monospace, monospace !important; font-size: 12px !important; line-height: 1.5 !important; overflow-x: auto !important; }

/* ---- typeform Pull data in panel ---- */
.widget--mock.mock-typeform-pull { max-width: 720px !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__inner { color: #1A1A1A !important; font: 400 15px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__section { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 20px 22px !important; margin-bottom: 14px !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__shead { display: flex !important; justify-content: space-between !important; align-items: center !important; font: 500 17px var(--font-family-base, system-ui) !important; color: #4B5563 !important; margin-bottom: 6px !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__caret { color: #9CA3AF !important; font-size: 11px !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__r { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 0 !important; border-bottom: 1px solid #F1F1F1 !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__pill { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 15px !important; color: #1A1A1A !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__eye { color: #9CA3AF !important; font-size: 12px !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__t { position: relative !important; width: 40px !important; height: 22px !important; border-radius: 999px !important; background: #D1D5DB !important; flex-shrink: 0 !important; display: inline-block !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__t--on { background: #4B4B4B !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__t > span { position: absolute !important; top: 3px !important; left: 3px !important; width: 16px !important; height: 16px !important; border-radius: 999px !important; background: #FFFFFF !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__t--on > span { left: 21px !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__add { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 10px 16px !important; color: #1A1A1A !important; font-weight: 500 !important; cursor: default !important; margin: 8px 0 14px 0 !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__params { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__param { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 14px !important; color: #1A1A1A !important; }
.widget--mock.mock-typeform-pull .mock-typeform-pull__px { color: #9CA3AF !important; }

/* ---- typeform form editor (form title + questions) ---- */
.widget--mock.mock-typeform-editor { max-width: 880px !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; overflow: hidden !important; color: #1A1A1A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__top { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 18px !important; border-bottom: 1px solid #ECECEC !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__crumb { color: #6B7280 !important; font-size: 14px !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__formname { color: #1A1A1A !important; font-weight: 700 !important; background: #FEF3C7 !important; padding: 1px 6px !important; border-radius: 5px !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__tabs { display: flex !important; gap: 8px !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__tab { color: #6B7280 !important; font-size: 14px !important; padding: 4px 10px !important; border-radius: 7px !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__tab--active { color: #1A1A1A !important; background: #EFEFEF !important; font-weight: 500 !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__body { display: grid !important; grid-template-columns: 230px minmax(0,1fr) !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__side { border-right: 1px solid #ECECEC !important; padding: 14px 12px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__q { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 10px !important; border-radius: 8px !important; font-size: 14px !important; color: #1A1A1A !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__q--active { background: #F1EFF8 !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__qn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 6px !important; background: #EDE9FB !important; color: #6D5BD0 !important; font-size: 12px !important; font-weight: 600 !important; flex-shrink: 0 !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__qn--pk { background: #FBE3EC !important; color: #C2557E !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__canvas { background: #EFEBE3 !important; padding: 28px 26px !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__qtitle { margin: 0 0 18px 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; font: 700 20px var(--font-family-base, system-ui) !important; color: #1A1A1A !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__qbadge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 5px !important; background: #1A1A1A !important; color: #FFFFFF !important; font-size: 12px !important; flex-shrink: 0 !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__req { color: #9CA3AF !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__choice { display: flex !important; align-items: center !important; gap: 12px !important; background: #E4DECF !important; border-radius: 8px !important; padding: 12px 14px !important; margin-bottom: 10px !important; max-width: 360px !important; color: #1A1A1A !important; }
.widget--mock.mock-typeform-editor .mock-typeform-editor__key { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 5px !important; background: #F4F1EA !important; border: 1px solid #CFC7B4 !important; font-size: 12px !important; flex-shrink: 0 !important; }

/* ============================================================ */
/* Main dashboard widgets (dashboard/main)                      */
/* ============================================================ */

/* ---- overview stat cards ---- */
.widget--mock.mock-tm-stats { max-width: 720px !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__inner { color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 14px !important; display: flex !important; flex-direction: column !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__label { margin: 0 0 8px 0 !important; color: #6B7280 !important; font-size: 13px !important; display: flex !important; align-items: center !important; gap: 5px !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__info { color: #9CA3AF !important; font-size: 11px !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__row { display: flex !important; align-items: baseline !important; gap: 8px !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__num { font: 800 28px var(--font-family-base, system-ui) !important; color: #0F172A !important; line-height: 1 !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__delta { margin-left: auto !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__delta--up,
.widget--mock.mock-tm-stats .mock-tm-stats__delta--downgood { color: #16A34A !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__delta--downbad { color: #DC2626 !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__spark { width: 100% !important; height: 26px !important; display: block !important; margin-top: 12px !important; }
.widget--mock.mock-tm-stats .mock-tm-stats__spark polyline { fill: none !important; stroke: #A9B4F5 !important; stroke-width: 1.6 !important; vector-effect: non-scaling-stroke !important; }

/* ---- shared tabbed list panel (referrers / pages / browsers / countries / events) ---- */
.widget--mock.mock-tm-list { max-width: 760px !important; }
.widget--mock.mock-tm-list .mock-tm-list__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 22px !important; color: #0F172A !important; font: 400 15px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-list .mock-tm-list__tabs { display: flex !important; align-items: center !important; gap: 18px !important; border-bottom: 1px solid #E5E7EB !important; margin-bottom: 4px !important; }
.widget--mock.mock-tm-list .mock-tm-list__tab { padding: 0 0 12px 0 !important; margin-bottom: -1px !important; border-bottom: 2px solid transparent !important; color: #6B7280 !important; font-size: 15px !important; font-weight: 500 !important; white-space: nowrap !important; }
.widget--mock.mock-tm-list .mock-tm-list__tab--active { color: #0F172A !important; border-bottom-color: #0F172A !important; font-weight: 700 !important; }
.widget--mock.mock-tm-list .mock-tm-list__expand { margin-left: auto !important; align-self: flex-start !important; width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #E5E7EB !important; border-radius: 7px !important; color: #6B7280 !important; font-size: 14px !important; }
.widget--mock.mock-tm-list .mock-tm-list__colhead { display: flex !important; justify-content: space-between !important; color: #6B7280 !important; font-size: 13px !important; margin: 12px 0 8px 0 !important; }
.widget--mock.mock-tm-list .mock-tm-list__rows { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.widget--mock.mock-tm-list .mock-tm-list__row { position: relative !important; display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 10px !important; border-radius: 6px !important; overflow: hidden !important; }
.widget--mock.mock-tm-list .mock-tm-list__bar { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; background: #ECEEFB !important; border-radius: 6px !important; z-index: 0 !important; }
.widget--mock.mock-tm-list .mock-tm-list__ico,
.widget--mock.mock-tm-list .mock-tm-list__flag,
.widget--mock.mock-tm-list .mock-tm-list__name,
.widget--mock.mock-tm-list .mock-tm-list__val { position: relative !important; z-index: 1 !important; }
.widget--mock.mock-tm-list .mock-tm-list__ico { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; border-radius: 5px !important; font-size: 13px !important; color: #9CA3AF !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-list .mock-tm-list__ico--fb { background: #1877F2 !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 12px !important; }
.widget--mock.mock-tm-list .mock-tm-list__ico--g { background: #FFFFFF !important; color: #4285F4 !important; border: 1px solid #E5E7EB !important; font-weight: 700 !important; font-size: 12px !important; }
.widget--mock.mock-tm-list .mock-tm-list__ico--br { background: #9CA3AF !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 12px !important; }
.widget--mock.mock-tm-list .mock-tm-list__ico--tt { background: #000000 !important; color: #FFFFFF !important; font-size: 11px !important; }
.widget--mock.mock-tm-list .mock-tm-list__ico--ch { color: #4285F4 !important; }
.widget--mock.mock-tm-list .mock-tm-list__ico--sf { color: #1B88F5 !important; }
.widget--mock.mock-tm-list .mock-tm-list__ico--ff { color: #E66000 !important; }
.widget--mock.mock-tm-list .mock-tm-list__ico--ig { color: #C13584 !important; }
.widget--mock.mock-tm-list .mock-tm-list__flag { font-size: 17px !important; width: 22px !important; text-align: center !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-list .mock-tm-list__name { flex: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: #0F172A !important; }
.widget--mock.mock-tm-list .mock-tm-list__val { font-weight: 600 !important; color: #0F172A !important; flex-shrink: 0 !important; padding-left: 10px !important; }

/* ---- Users trend chart ---- */
.widget--mock.mock-tm-mainchart { max-width: 1000px !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__head { display: flex !important; align-items: center !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__spacer { width: 92px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__title { flex: 1 !important; text-align: center !important; font: 600 16px var(--font-family-base, system-ui) !important; color: #0F172A !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__gran { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__chev { color: #9CA3AF !important; font-size: 11px !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__svg { width: 100% !important; height: auto !important; display: block !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__grid line { stroke: #EEF0F3 !important; stroke-width: 1 !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__ylab text { fill: #9CA3AF !important; font-size: 13px !important; text-anchor: end !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__xlab text { fill: #9CA3AF !important; font-size: 13px !important; text-anchor: middle !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__area { fill: rgba(99,102,241,0.10) !important; stroke: none !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__prev { fill: none !important; stroke: #D1D5DB !important; stroke-width: 2.5 !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__cur { fill: none !important; stroke: #6366F1 !important; stroke-width: 2.5 !important; }
.widget--mock.mock-tm-mainchart .mock-tm-mainchart__today { stroke: #111827 !important; stroke-width: 1.5 !important; stroke-dasharray: 5 5 !important; }

/* ---- Weekly Trends heatmap ---- */
.widget--mock.mock-tm-weekly { max-width: 760px !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__bar { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 16px !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__title { font: 700 18px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__sel { display: inline-flex !important; align-items: center !important; gap: 8px !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__chev { color: #9CA3AF !important; font-size: 11px !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__grid { display: grid !important; grid-template-columns: 52px repeat(7, 1fr) !important; gap: 5px !important; align-items: center !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__day { text-align: center !important; color: #6B7280 !important; font-size: 13px !important; padding-bottom: 4px !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__hl { text-align: right !important; color: #6B7280 !important; font-size: 12px !important; padding-right: 8px !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__grid .c { height: 14px !important; border-radius: 4px !important; display: block !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__grid .c.l1 { background: #E7F5EC !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__grid .c.l2 { background: #C2E8D1 !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__grid .c.l3 { background: #93D7AE !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__grid .c.l4 { background: #57C088 !important; }
.widget--mock.mock-tm-weekly .mock-tm-weekly__grid .c.l5 { background: #2E9D67 !important; }

/* ============================================================ */
/* Revenue page widgets (dashboard/revenue)                     */
/* ============================================================ */

/* ---- revenue overview: homepage-style drill-down table ---- */
.widget--mock.mock-tm-rev-overview { max-width: 1100px !important; }
.widget--mock.mock-tm-rev-overview .dd-app { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-rev-overview .dd-topbar { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; background: #F3F4F6 !important; border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-rev-overview .dd-cd { width: 10px !important; height: 10px !important; border-radius: 999px !important; display: inline-block !important; }
.widget--mock.mock-tm-rev-overview .dd-url { margin-left: 8px !important; font-size: 11.5px !important; color: #6B7280 !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 7px !important; padding: 5px 11px !important; }
.widget--mock.mock-tm-rev-overview .dd-body { padding: 16px 18px !important; }
.widget--mock.mock-tm-rev-overview .dd-kpis { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-rev-overview .dd-kpi { border: 1px solid #E5E7EB !important; border-radius: 11px !important; padding: 11px 14px !important; }
.widget--mock.mock-tm-rev-overview .dd-kpi .dd-k { font-size: 10px !important; color: #6B7280 !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.widget--mock.mock-tm-rev-overview .dd-kpi .dd-v { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.02em !important; margin-top: 3px !important; color: #0F172A !important; }
.widget--mock.mock-tm-rev-overview .dd-controls { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; font-size: 12px !important; color: #6B7280 !important; padding: 10px 2px !important; border-top: 1px solid #E5E7EB !important; border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-rev-overview .dd-ctl { display: flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-rev-overview .dd-ctl .dd-lab { font-weight: 600 !important; }
.widget--mock.mock-tm-rev-overview .dd-sel { border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 5px 10px !important; font-weight: 700 !important; color: #0F172A !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-rev-overview .dd-chip { background: #F3F4F6 !important; border-radius: 7px !important; padding: 3px 8px !important; font-weight: 700 !important; color: #4B5563 !important; }
.widget--mock.mock-tm-rev-overview .dd-chip .dd-x { color: #9CA3AF !important; margin-left: 3px !important; }
.widget--mock.mock-tm-rev-overview .dd-add { color: #2945E6 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-rev-overview .dd-tabs { display: flex !important; gap: 20px !important; margin: 12px 2px 6px !important; font-size: 13.5px !important; color: #6B7280 !important; font-weight: 600 !important; }
.widget--mock.mock-tm-rev-overview .dd-tabs .dd-t.dd-active { color: #0F172A !important; border-bottom: 2px solid #2945E6 !important; padding-bottom: 6px !important; }
.widget--mock.mock-tm-rev-overview .dd-tablebar { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 6px 2px 8px !important; }
.widget--mock.mock-tm-rev-overview .dd-search { border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 6px 12px !important; font-size: 12px !important; color: #6B7280 !important; width: 200px !important; }
.widget--mock.mock-tm-rev-overview .dd-rightmeta { font-size: 11.5px !important; color: #6B7280 !important; display: flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-tm-rev-overview .dd-scroll { overflow-x: auto !important; }
.widget--mock.mock-tm-rev-overview .dd-table { width: 100% !important; min-width: 1040px !important; border-collapse: collapse !important; font-size: 12px !important; }
/* Mobile: drop the inner scroll so docs-mockfit can scale the whole table (all 9 columns visible, shrunk). */
@media (max-width: 760px) { .widget--mock.mock-tm-rev-overview .dd-scroll { overflow: visible !important; } }
.widget--mock.mock-tm-rev-overview .dd-table th,
.widget--mock.mock-tm-rev-overview .dd-table td { padding: 8px 10px !important; text-align: right !important; border-top: 1px solid #E5E7EB !important; white-space: nowrap !important; }
.widget--mock.mock-tm-rev-overview .dd-table th { font-size: 10px !important; color: #6B7280 !important; text-transform: uppercase !important; letter-spacing: .03em !important; font-weight: 600 !important; border-top: none !important; }
.widget--mock.mock-tm-rev-overview .dd-table th.dd-l,
.widget--mock.mock-tm-rev-overview .dd-table td.dd-l { text-align: left !important; }
.widget--mock.mock-tm-rev-overview .dd-table td.dd-l { display: flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-tm-rev-overview .dd-chev { color: #9CA3AF !important; font-size: 10px !important; width: 10px !important; display: inline-block !important; }
.widget--mock.mock-tm-rev-overview .dd-nm { overflow: hidden !important; text-overflow: ellipsis !important; max-width: 330px !important; }
.widget--mock.mock-tm-rev-overview .dd-badge { display: inline-flex !important; align-items: center !important; background: #EEF2F7 !important; color: #64748B !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .04em !important; padding: 2px 6px !important; border-radius: 5px !important; flex: none !important; }
.widget--mock.mock-tm-rev-overview .dd-muted { color: #9CA3AF !important; font-style: italic !important; }
.widget--mock.mock-tm-rev-overview .dd-pos { color: #16A34A !important; font-weight: 700 !important; }
.widget--mock.mock-tm-rev-overview .dd-neg { color: #DC2626 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-rev-overview .dd-plat { width: 18px !important; height: 18px !important; border-radius: 5px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-size: 9px !important; font-weight: 800 !important; flex: none !important; }
.widget--mock.mock-tm-rev-overview .dd-fb { background: #1877F2 !important; }
.widget--mock.mock-tm-rev-overview .dd-gg { background: #fff !important; color: #4285F4 !important; border: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-rev-overview .dd-ig { background: #E1306C !important; }
.widget--mock.mock-tm-rev-overview .dd-tt { background: #000 !important; }
.widget--mock.mock-tm-rev-overview .dd-em { background: #E37400 !important; }
.widget--mock.mock-tm-rev-overview .dd-table tr.dd-win { background: rgba(34,51,255,.04) !important; }
.widget--mock.mock-tm-rev-overview .dd-table tr.dd-creative { background: rgba(16,185,129,.06) !important; }
.widget--mock.mock-tm-rev-overview .dd-table tr.dd-loser { background: rgba(239,68,68,.05) !important; }
.widget--mock.mock-tm-rev-overview .dd-table tr.dd-total td { border-top: 2px solid #E5E7EB !important; font-weight: 800 !important; }
.widget--mock.mock-tm-rev-overview .dd-d0 { padding-left: 0 !important; }
.widget--mock.mock-tm-rev-overview .dd-d1 { padding-left: 20px !important; }
.widget--mock.mock-tm-rev-overview .dd-d2 { padding-left: 40px !important; }
.widget--mock.mock-tm-rev-overview .dd-d3 { padding-left: 60px !important; }
.widget--mock.mock-tm-rev-overview .dd-d4 { padding-left: 80px !important; }

/* ---- revenue buyers table ---- */
.widget--mock.mock-tm-buyers { max-width: 860px !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__inner { padding: 22px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__bar { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__title { font: 700 18px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__page { color: #9CA3AF !important; font-size: 12px !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__scroll { overflow-x: auto !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__table { width: 100% !important; min-width: 620px !important; border-collapse: collapse !important; font-size: 13px !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__table th,
.widget--mock.mock-tm-buyers .mock-tm-buyers__table td { padding: 9px 12px !important; text-align: left !important; border-top: 1px solid #F1F1F1 !important; white-space: nowrap !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__table th { font-size: 10px !important; color: #6B7280 !important; text-transform: uppercase !important; letter-spacing: .03em !important; font-weight: 600 !important; border-top: none !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__table th:nth-child(n+4),
.widget--mock.mock-tm-buyers .mock-tm-buyers__table td:nth-child(n+4) { text-align: right !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__table .bl { color: #0F172A !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__foot { display: flex !important; justify-content: flex-end !important; gap: 8px !important; margin-top: 14px !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__pg { border: 1px solid #E5E7EB !important; border-radius: 7px !important; padding: 6px 14px !important; font-size: 13px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-buyers .mock-tm-buyers__pg--on { color: #0F172A !important; }

/* ============================================================ */
/* Leads page widgets (dashboard/leads) - events explorer      */
/* ============================================================ */
.widget--mock.mock-leads-events { max-width: 900px !important; }
.widget--mock.mock-leads-detail { max-width: 900px !important; }
.widget--mock.mock-leads-purchase { max-width: 900px !important; }
.widget--mock.mock-leads .leads-inner { padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-leads-detail .leads-inner,
.widget--mock.mock-leads-purchase .leads-inner,
.widget--mock.mock-leads-converts .leads-inner,
.widget--mock.mock-pages-detail .leads-inner { background: #F8F9FB !important; }
.widget--mock.mock-pages-detail { max-width: 900px !important; }
.widget--mock.mock-leads .leads-card__sub { margin: -10px 0 16px 0 !important; color: #6B7280 !important; font-size: 14px !important; }

/* Converts-to comparison table (populated) */
.widget--mock.mock-leads-converts { max-width: 900px !important; }
.widget--mock.mock-leads .leads-converts__sel--filled { color: #0F172A !important; }
.widget--mock.mock-leads .leads-cchip { background: #F3F4F6 !important; border-radius: 6px !important; padding: 3px 8px !important; font-weight: 600 !important; color: #374151 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-leads .leads-cchip__x { color: #9CA3AF !important; }
.widget--mock.mock-leads .leads-ct { margin-top: 8px !important; }
.widget--mock.mock-leads .leads-ct__row { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important; align-items: center !important; gap: 12px !important; padding: 12px 0 !important; }
.widget--mock.mock-leads .leads-ct__row--head { border-bottom: 1px solid #E5E7EB !important; padding: 0 0 10px 0 !important; }
.widget--mock.mock-leads .leads-ct__row--head span { font-size: 11px !important; font-weight: 600 !important; color: #6B7280 !important; text-transform: uppercase !important; letter-spacing: .03em !important; text-align: right !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; justify-content: flex-end !important; }
.widget--mock.mock-leads .leads-ct__row span { text-align: right !important; }
.widget--mock.mock-leads .leads-ct__row .leads-ct__target,
.widget--mock.mock-leads .leads-ct__row--head .leads-ct__target { text-align: left !important; justify-content: flex-start !important; }
.widget--mock.mock-leads .leads-ct__row .leads-ct__target { font-weight: 600 !important; color: #0F172A !important; }

/* events list */
.widget--mock.mock-leads .leads-searchbar { display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 14px !important; }
.widget--mock.mock-leads .leads-search { flex: 1 !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 9px 12px !important; color: #9CA3AF !important; font-size: 13px !important; }
.widget--mock.mock-leads .leads-count { color: #6B7280 !important; font-size: 13px !important; white-space: nowrap !important; }
.widget--mock.mock-leads .leads-ev { display: grid !important; grid-template-columns: 1fr 64px 130px 120px 90px !important; align-items: center !important; gap: 14px !important; padding: 12px 6px !important; border-top: 1px solid #F1F1F1 !important; }
.widget--mock.mock-leads .leads-ev__name { font-weight: 600 !important; color: #0F172A !important; }
.widget--mock.mock-leads .leads-ev__count,
.widget--mock.mock-leads .leads-ev__conv,
.widget--mock.mock-leads .leads-ev__rev { text-align: right !important; }
.widget--mock.mock-leads .leads-ev--head span { color: #6B7280 !important; font-size: 12px !important; font-weight: 400 !important; border-top: none !important; }
.widget--mock.mock-leads .leads-ev--head { border-top: none !important; }
.widget--mock.mock-leads .leads-ev__spark { width: 100% !important; height: 22px !important; display: block !important; }
.widget--mock.mock-leads .leads-ev__spark polyline { fill: none !important; stroke: #A9B4F5 !important; stroke-width: 1.6 !important; vector-effect: non-scaling-stroke !important; }
.widget--mock.mock-leads .leads-muted { color: #9CA3AF !important; }

/* detail: breadcrumb + cards */
.widget--mock.mock-leads .leads-crumb { margin: 0 0 14px 0 !important; color: #6B7280 !important; font-size: 14px !important; }
.widget--mock.mock-leads .leads-crumb__cur { color: #0F172A !important; font-weight: 600 !important; }
.widget--mock.mock-leads .leads-card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 20px 22px !important; margin-bottom: 14px !important; }
.widget--mock.mock-leads .leads-card__title { margin: 0 0 16px 0 !important; font: 800 26px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-leads .leads-stats { display: flex !important; flex-wrap: wrap !important; gap: 16px 30px !important; }
.widget--mock.mock-leads .leads-stat { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-leads .leads-stat__k { font-size: 11px !important; color: #6B7280 !important; text-transform: uppercase !important; letter-spacing: .03em !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.widget--mock.mock-leads .leads-stat__v { font: 800 22px var(--font-family-base, system-ui) !important; color: #0F172A !important; }
.widget--mock.mock-leads .leads-i { color: #C0C5CF !important; font-size: 11px !important; }
.widget--mock.mock-leads .leads-converts__head { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-leads .leads-card__h { font: 700 18px var(--font-family-base, system-ui) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-leads .leads-converts__sel { border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 10px 16px !important; color: #6B7280 !important; min-width: 260px !important; display: inline-flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-leads .leads-converts__sub { margin: 14px 0 0 0 !important; color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-leads .leads-chev { color: #9CA3AF !important; font-size: 11px !important; }

/* upstream paths */
.widget--mock.mock-leads .leads-paths { margin-top: 4px !important; }
.widget--mock.mock-leads .leads-paths__bar { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; margin-bottom: 12px !important; flex-wrap: wrap !important; }
.widget--mock.mock-leads .leads-paths__h { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em !important; color: #6B7280 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-leads .leads-paths__gran { font-size: 13px !important; color: #6B7280 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-leads .leads-sel { border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 7px 12px !important; color: #0F172A !important; background: #FFFFFF !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-leads .leads-paths__view { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 10px !important; }
.widget--mock.mock-leads .leads-vlab { color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-leads .leads-toggle { display: inline-flex !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; overflow: hidden !important; }
.widget--mock.mock-leads .leads-toggle__opt { padding: 6px 12px !important; font-size: 13px !important; color: #6B7280 !important; background: #FFFFFF !important; }
.widget--mock.mock-leads .leads-toggle__opt--on { background: #ECEEF2 !important; color: #0F172A !important; font-weight: 600 !important; }
.widget--mock.mock-leads .leads-path { display: grid !important; grid-template-columns: 1fr 64px 84px !important; align-items: center !important; gap: 12px !important; padding: 11px 12px !important; background: #FFFFFF !important; border-bottom: 1px solid #F1F1F1 !important; }
.widget--mock.mock-leads .leads-path--head { background: transparent !important; border-bottom: 1px solid #E5E7EB !important; padding-bottom: 8px !important; }
.widget--mock.mock-leads .leads-path--head .leads-path__cells,
.widget--mock.mock-leads .leads-path--head .leads-path__v,
.widget--mock.mock-leads .leads-path--head .leads-path__p { font-size: 11px !important; font-weight: 600 !important; color: #6B7280 !important; text-transform: uppercase !important; letter-spacing: .03em !important; }
.widget--mock.mock-leads .leads-path__cells { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; }
.widget--mock.mock-leads .leads-path__v { text-align: right !important; font-weight: 600 !important; color: #0F172A !important; }
.widget--mock.mock-leads .leads-path__p { text-align: right !important; color: #6B7280 !important; }
.widget--mock.mock-leads .leads-seg { color: #0F172A !important; font-size: 13px !important; }
.widget--mock.mock-leads .leads-seg--pg { font-family: ui-monospace, monospace !important; font-size: 12px !important; color: #374151 !important; }
.widget--mock.mock-leads .leads-arr { color: #9CA3AF !important; }
.widget--mock.mock-leads .leads-fired { background: #EDE9FE !important; color: #6D28D9 !important; border-radius: 6px !important; padding: 3px 8px !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important; }
.widget--mock.mock-leads .leads-fired--buy { background: #EDE9FE !important; color: #6D28D9 !important; }

/* ---- Pages list ---- */
.widget--mock.mock-pages-list { max-width: 900px !important; }
.widget--mock.mock-pages-list .pages-inner { padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-pages-list .pages-searchbar { display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 14px !important; }
.widget--mock.mock-pages-list .pages-search { flex: 1 !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 9px 12px !important; color: #9CA3AF !important; font-size: 13px !important; }
.widget--mock.mock-pages-list .pages-count { color: #6B7280 !important; font-size: 13px !important; white-space: nowrap !important; }
.widget--mock.mock-pages-list .pages-row { display: grid !important; grid-template-columns: 46px 1fr 150px auto !important; align-items: center !important; gap: 16px !important; padding: 12px 14px !important; border: 1px solid #ECEEF2 !important; border-radius: 10px !important; margin-bottom: 10px !important; }
.widget--mock.mock-pages-list .pages-thumb { width: 46px !important; height: 34px !important; border-radius: 6px !important; border: 1px solid #E5E7EB !important; background: repeating-linear-gradient(#FFFFFF, #FFFFFF 4px, #EEF0F5 4px, #EEF0F5 7px) !important; flex-shrink: 0 !important; }
.widget--mock.mock-pages-list .pages-info { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
.widget--mock.mock-pages-list .pages-path { font-weight: 700 !important; color: #0F172A !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-pages-list .pages-ext { color: #9CA3AF !important; font-size: 12px !important; }
.widget--mock.mock-pages-list .pages-title { color: #6B7280 !important; font-size: 13px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-pages-list .pages-spark { width: 100% !important; height: 24px !important; display: block !important; }
.widget--mock.mock-pages-list .pages-spark polyline { fill: none !important; stroke: #A9B4F5 !important; stroke-width: 1.6 !important; vector-effect: non-scaling-stroke !important; }
.widget--mock.mock-pages-list .pages-metrics { display: flex !important; flex-direction: column !important; gap: 2px !important; text-align: right !important; white-space: nowrap !important; }
.widget--mock.mock-pages-list .pages-m { color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-pages-list .pages-m b { color: #0F172A !important; font-weight: 700 !important; }

/* ============================================================ */
/* Funnels page widgets (dashboard/funnels)                     */
/* ============================================================ */
.widget--mock.mock-fnl-create { max-width: 1040px !important; }
.widget--mock.mock-fnl-result { max-width: 920px !important; }
.widget--mock.mock-fnl-split { max-width: 620px !important; }
.widget--mock.mock-fnl-splitres { max-width: 920px !important; }
.widget--mock.mock-fnl .fnl-create,
.widget--mock.mock-fnl .fnl-res { padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }

/* create modal */
.widget--mock.mock-fnl .fnl-create__head { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-bottom: 16px !important; }
.widget--mock.mock-fnl .fnl-create__title { font: 700 20px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fnl .fnl-create__title--sm { font-size: 18px !important; margin: 0 0 12px 0 !important; }
.widget--mock.mock-fnl .fnl-x { color: #9CA3AF !important; font-size: 20px !important; }
.widget--mock.mock-fnl .fnl-create__body { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
.widget--mock.mock-fnl .fnl-lab { font-weight: 700 !important; font-size: 13px !important; margin: 14px 0 6px 0 !important; }
.widget--mock.mock-fnl .fnl-create__form > .fnl-lab:first-child { margin-top: 0 !important; }
.widget--mock.mock-fnl .fnl-input { border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 9px 12px !important; color: #0F172A !important; font-size: 14px !important; background: #FFFFFF !important; }
.widget--mock.mock-fnl .fnl-input--ph { color: #9CA3AF !important; }
.widget--mock.mock-fnl .fnl-input--grow { flex: 1 !important; }
.widget--mock.mock-fnl .fnl-steps { margin-top: 14px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-fnl .fnl-step { border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 14px !important; }
.widget--mock.mock-fnl .fnl-step--open { border: 1px solid #E5E7EB !important; }
.widget--mock.mock-fnl .fnl-step__row { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-fnl .fnl-grip { color: #C0C5CF !important; font-size: 11px !important; letter-spacing: -4px !important; }
.widget--mock.mock-fnl .fnl-num { width: 24px !important; height: 24px !important; border-radius: 999px !important; border: 1px solid #D1D5DB !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; flex-shrink: 0 !important; color: #4B5563 !important; }
.widget--mock.mock-fnl .fnl-sel { position: relative !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 9px 12px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; background: #FFFFFF !important; }
.widget--mock.mock-fnl .fnl-chev { color: #9CA3AF !important; font-size: 11px !important; }
.widget--mock.mock-fnl .fnl-trash { color: #9CA3AF !important; }
.widget--mock.mock-fnl .fnl-menu { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; padding: 4px !important; display: flex !important; flex-direction: column !important; min-width: 130px !important; z-index: 5 !important; }
.widget--mock.mock-fnl .fnl-menu__opt { padding: 8px 10px !important; border-radius: 6px !important; display: flex !important; justify-content: space-between !important; gap: 10px !important; color: #0F172A !important; }
.widget--mock.mock-fnl .fnl-menu__opt--sel { background: #F3F4F6 !important; }
.widget--mock.mock-fnl .fnl-split { display: flex !important; align-items: center !important; gap: 10px !important; margin-top: 12px !important; font-size: 14px !important; }
.widget--mock.mock-fnl .fnl-toggle { position: relative !important; width: 38px !important; height: 22px !important; border-radius: 999px !important; background: #D1D5DB !important; display: inline-block !important; flex-shrink: 0 !important; }
.widget--mock.mock-fnl .fnl-toggle > span { position: absolute !important; top: 3px !important; left: 3px !important; width: 16px !important; height: 16px !important; border-radius: 999px !important; background: #FFFFFF !important; }
.widget--mock.mock-fnl .fnl-toggle--on { background: #2945E6 !important; }
.widget--mock.mock-fnl .fnl-toggle--on > span { left: 19px !important; }
.widget--mock.mock-fnl .fnl-addstep { margin-top: 14px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 9px 14px !important; background: #FFFFFF !important; font-weight: 600 !important; color: #0F172A !important; }
.widget--mock.mock-fnl .fnl-addstep--sm { margin-top: 4px !important; }
.widget--mock.mock-fnl .fnl-hint { margin-top: 14px !important; color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-fnl .fnl-create__preview { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; border-left: 1px solid #F1F1F1 !important; min-height: 220px !important; }
.widget--mock.mock-fnl .fnl-preview__h { font: 700 18px var(--font-family-base, system-ui) !important; margin: 0 !important; }
.widget--mock.mock-fnl .fnl-preview__sub { color: #6B7280 !important; margin: 6px 0 0 0 !important; }
.widget--mock.mock-fnl .fnl-create__foot { display: flex !important; justify-content: flex-end !important; gap: 10px !important; margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid #E5E7EB !important; }
.widget--mock.mock-fnl .fnl-btn { border-radius: 8px !important; padding: 9px 16px !important; font-weight: 600 !important; border: 1px solid transparent !important; }
.widget--mock.mock-fnl .fnl-btn--ghost { background: #F3F4F6 !important; color: #0F172A !important; }
.widget--mock.mock-fnl .fnl-btn--save { background: #2945E6 !important; color: #FFFFFF !important; }

/* split-test setup variants + snippets */
.widget--mock.mock-fnl .fnl-variant { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 8px !important; }
.widget--mock.mock-fnl .fnl-input--v { flex: 1 !important; }
.widget--mock.mock-fnl .fnl-vx { color: #9CA3AF !important; }
.widget--mock.mock-fnl .fnl-snip { background: #F3F4F6 !important; border-radius: 10px !important; padding: 16px !important; margin-top: 14px !important; }
.widget--mock.mock-fnl .fnl-snip__intro { color: #6B7280 !important; font-size: 13px !important; margin: 0 0 12px 0 !important; }
.widget--mock.mock-fnl .fnl-snip__row { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 10px 0 6px 0 !important; }
.widget--mock.mock-fnl .fnl-snip__lab { font-weight: 700 !important; }
.widget--mock.mock-fnl .fnl-snip__copy { color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-fnl .fnl-snip__code { background: #1A1A1A !important; color: #E2E8F0 !important; border-radius: 8px !important; padding: 12px !important; font-family: ui-monospace, monospace !important; font-size: 11.5px !important; line-height: 1.5 !important; white-space: pre-wrap !important; word-break: break-word !important; margin: 0 !important; }

/* funnel result */
.widget--mock.mock-fnl .fnl-res__head { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; padding-bottom: 16px !important; border-bottom: 1px solid #E5E7EB !important; margin-bottom: 16px !important; }
.widget--mock.mock-fnl .fnl-res__name { font-weight: 700 !important; font-size: 16px !important; }
.widget--mock.mock-fnl .fnl-chips { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; flex: 1 !important; }
.widget--mock.mock-fnl .fnl-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: #F3F4F6 !important; border-radius: 6px !important; padding: 3px 8px !important; font-size: 12px !important; color: #374151 !important; }
.widget--mock.mock-fnl .fnl-ico { font-size: 12px !important; }
.widget--mock.mock-fnl .fnl-arr { color: #9CA3AF !important; }
.widget--mock.mock-fnl .fnl-res__icons { color: #9CA3AF !important; font-size: 14px !important; white-space: nowrap !important; }
.widget--mock.mock-fnl .fnl-kpis { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; margin-bottom: 14px !important; }
.widget--mock.mock-fnl .fnl-kpi { border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 14px 16px !important; }
.widget--mock.mock-fnl .fnl-kpi__k { margin: 0 !important; font-size: 11px !important; color: #6B7280 !important; text-transform: uppercase !important; letter-spacing: .03em !important; }
.widget--mock.mock-fnl .fnl-kpi__v { margin: 4px 0 !important; font: 800 24px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-fnl .fnl-kpi__s { margin: 0 !important; color: #9CA3AF !important; font-size: 12px !important; }
.widget--mock.mock-fnl .fnl-tip { color: #6B7280 !important; font-size: 13px !important; margin: 0 0 18px 0 !important; }
.widget--mock.mock-fnl .fnl-rstep { margin-bottom: 18px !important; }
.widget--mock.mock-fnl .fnl-rstep__hd { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 10px !important; }
.widget--mock.mock-fnl .fnl-rstep__nm { font-weight: 700 !important; }
.widget--mock.mock-fnl .fnl-rstep__hd .fnl-chev { margin-left: auto !important; }
.widget--mock.mock-fnl .fnl-rstep__bd { display: grid !important; grid-template-columns: 170px 1fr !important; gap: 16px !important; align-items: start !important; }
.widget--mock.mock-fnl .fnl-meta { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-fnl .fnl-meta__n { font-weight: 800 !important; font-size: 18px !important; }
.widget--mock.mock-fnl .fnl-meta__n span { font-weight: 400 !important; font-size: 13px !important; color: #6B7280 !important; }
.widget--mock.mock-fnl .fnl-meta__u { color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-fnl .fnl-meta__d { color: #EA580C !important; font-size: 13px !important; }
.widget--mock.mock-fnl .fnl-bars { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-fnl .fnl-bars--rev { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 10px !important; }
.widget--mock.mock-fnl .fnl-bars__stack { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-fnl .fnl-revbox { background: #F3F4F6 !important; border-radius: 8px !important; padding: 8px 12px !important; min-width: 92px !important; }
.widget--mock.mock-fnl .fnl-revbox__k { display: block !important; font-size: 10px !important; color: #6B7280 !important; text-transform: uppercase !important; letter-spacing: .03em !important; }
.widget--mock.mock-fnl .fnl-revbox__v { font-weight: 700 !important; font-size: 14px !important; }
.widget--mock.mock-fnl .fnl-bar__track { position: relative !important; height: 30px !important; background: #ECECEC !important; border-radius: 6px !important; overflow: hidden !important; }
.widget--mock.mock-fnl .fnl-bar__prev { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; background: repeating-linear-gradient(135deg, #BFE3CD, #BFE3CD 6px, #DCEFE4 6px, #DCEFE4 12px) !important; }
.widget--mock.mock-fnl .fnl-bar__fill { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; background: #6CC18E !important; }
.widget--mock.mock-fnl .fnl-bar__pct { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; font-weight: 700 !important; font-size: 13px !important; color: #1F2937 !important; }
.widget--mock.mock-fnl .fnl-legend { display: flex !important; align-items: center !important; gap: 4px !important; color: #6B7280 !important; font-size: 13px !important; margin-top: 6px !important; flex-wrap: wrap !important; }
.widget--mock.mock-fnl .fnl-legend__i { width: 14px !important; height: 14px !important; border-radius: 3px !important; display: inline-block !important; margin-left: 8px !important; }
.widget--mock.mock-fnl .fnl-legend__i--solid { background: #6CC18E !important; }
.widget--mock.mock-fnl .fnl-legend__i--striped { background: repeating-linear-gradient(135deg, #BFE3CD, #BFE3CD 4px, #DCEFE4 4px, #DCEFE4 8px) !important; }

/* split-test results: per-variant rows */
.widget--mock.mock-fnl .fnl-abbadge { background: #E5EDFF !important; color: #2945E6 !important; border-radius: 6px !important; padding: 2px 8px !important; font-size: 11px !important; font-weight: 600 !important; white-space: nowrap !important; }
.widget--mock.mock-fnl .fnl-vargroup { margin: 8px 0 0 36px !important; border-left: 2px solid #E5E7EB !important; padding-left: 14px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-fnl .fnl-varrow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; background: #F3F4F6 !important; border-radius: 8px !important; padding: 9px 14px !important; font-size: 13px !important; }
.widget--mock.mock-fnl .fnl-varlab { color: #0F172A !important; }
.widget--mock.mock-fnl .fnl-varmet { display: flex !important; align-items: center !important; gap: 14px !important; color: #0F172A !important; font-weight: 600 !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
.widget--mock.mock-fnl .fnl-varmet__u { color: #9CA3AF !important; font-weight: 400 !important; }
.widget--mock.mock-fnl .fnl-win { color: #16A34A !important; }

/* ============================================================ */
/* Sessions page widgets (dashboard/sessions)                   */
/*   mock-tm-sessions   = the reverse-chron feed of visit cards */
/*   mock-tm-sess-detail = one card expanded to the Timeline    */
/*   Shared card chrome lives under .mock-tmsess .ssc so both   */
/*   widgets render an identical session card.                  */
/* ============================================================ */

/* ---- shared inner / page background ---- */
.widget--mock.mock-tm-sessions { max-width: 760px !important; }
.widget--mock.mock-tm-sess-detail { max-width: 760px !important; }
.widget--mock.mock-tmsess .mock-tm-ss__inner,
.widget--mock.mock-tmsess .mock-tm-sd__inner { background: #F1F5F9 !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 14px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }

/* ---- list: top toolbar ---- */
.widget--mock.mock-tm-sessions .mock-tm-ss__top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__filterbtn { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 6px 12px !important; font-size: 12px !important; font-weight: 600 !important; color: #374151 !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__topright { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__live { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 6px 10px !important; font-size: 12px !important; font-weight: 600 !important; color: #374151 !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__livedot { width: 8px !important; height: 8px !important; border-radius: 999px !important; background: #22C55E !important; display: inline-block !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__date { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 6px 12px !important; font-size: 12px !important; font-weight: 500 !important; color: #374151 !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__nav { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; font-size: 14px !important; color: #6B7280 !important; }

/* ---- list: filter bar ---- */
.widget--mock.mock-tm-sessions .mock-tm-ss__filterbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 12px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__fleft { display: inline-flex !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__toggle { width: 34px !important; height: 19px !important; border-radius: 999px !important; background: #CBD5E1 !important; position: relative !important; display: inline-block !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__knob { position: absolute !important; top: 2px !important; left: 2px !important; width: 15px !important; height: 15px !important; border-radius: 999px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__flabel { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 600 !important; color: #1E293B !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__info { color: #94A3B8 !important; font-size: 12px !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__minf { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; color: #475569 !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__num { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; min-width: 54px !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 7px !important; padding: 5px 10px !important; color: #94A3B8 !important; font-variant-numeric: tabular-nums !important; }
.widget--mock.mock-tm-sessions .mock-tm-ss__page { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 13px !important; font-weight: 600 !important; color: #475569 !important; white-space: nowrap !important; }

/* ---- list: card stack ---- */
.widget--mock.mock-tm-sessions .mock-tm-ss__list { display: flex !important; flex-direction: column !important; gap: 10px !important; }

/* ============ shared session card (both widgets) ============ */
.widget--mock.mock-tmsess .ssc { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 12px 14px !important; }
.widget--mock.mock-tmsess .ssc__visit { display: block !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; color: #94A3B8 !important; text-transform: uppercase !important; }
.widget--mock.mock-tmsess .ssc__acq { margin: 3px 0 9px !important; font-size: 12px !important; color: #94A3B8 !important; }
.widget--mock.mock-tmsess .ssc__acq b { color: #64748B !important; font-weight: 600 !important; }
.widget--mock.mock-tmsess .ssc__row { display: flex !important; align-items: center !important; gap: 11px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tmsess .ssc__user { display: inline-flex !important; align-items: center !important; gap: 9px !important; min-width: 0 !important; }
.widget--mock.mock-tmsess .ssc__avatar { width: 24px !important; height: 24px !important; border-radius: 999px !important; flex-shrink: 0 !important; display: inline-block !important; }
.widget--mock.mock-tmsess .ssc__name { font-size: 14px !important; font-weight: 600 !important; color: #0F172A !important; white-space: nowrap !important; }
.widget--mock.mock-tmsess .ssc__icons { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-tmsess .ssc__ic { width: 18px !important; height: 18px !important; border-radius: 5px !important; display: inline-block !important; flex-shrink: 0 !important; }
.widget--mock.mock-tmsess .ssc__ic--ig { background: linear-gradient(45deg, #F9CE34, #EE2A7B 45%, #6228D7) !important; }
.widget--mock.mock-tmsess .ssc__ic--browser { background: #3B82F6 !important; border-radius: 999px !important; }
.widget--mock.mock-tmsess .ssc__ic--android { background: #3DDC84 !important; border-radius: 999px !important; }
.widget--mock.mock-tmsess .ssc__ic--apple { background: #1F2937 !important; border-radius: 999px !important; }
.widget--mock.mock-tmsess .ssc__ic--dev { width: 13px !important; height: 18px !important; border: 1.5px solid #94A3B8 !important; border-radius: 4px !important; background: #FFFFFF !important; }
.widget--mock.mock-tmsess .ssc__pv { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #F1F5F9 !important; border-radius: 7px !important; padding: 4px 9px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #334155 !important; font-variant-numeric: tabular-nums !important; }
.widget--mock.mock-tmsess .ssc__ev { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #F1F5F9 !important; border-radius: 7px !important; padding: 4px 9px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #334155 !important; }
.widget--mock.mock-tmsess .ssc__chan { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #F1F5F9 !important; border-radius: 7px !important; padding: 4px 10px !important; font-size: 12.5px !important; font-weight: 500 !important; color: #475569 !important; white-space: nowrap !important; }
.widget--mock.mock-tmsess .ssc__path { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; font-size: 12.5px !important; color: #64748B !important; }
.widget--mock.mock-tmsess .ssc__seg { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 150px !important; }
.widget--mock.mock-tmsess .ssc__arrow { color: #CBD5E1 !important; }
.widget--mock.mock-tmsess .ssc__when { display: inline-flex !important; align-items: center !important; gap: 9px !important; margin-left: auto !important; font-size: 12.5px !important; color: #94A3B8 !important; white-space: nowrap !important; font-variant-numeric: tabular-nums !important; }
.widget--mock.mock-tmsess .ssc__chev { color: #CBD5E1 !important; font-size: 15px !important; }

/* ---- detail: opened card body ---- */
.widget--mock.mock-tm-sess-detail .ssc--open { padding-bottom: 16px !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__body { margin-top: 14px !important; padding-top: 16px !important; border-top: 1px solid #EEF2F6 !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tabsrow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 16px !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tabs { display: inline-flex !important; gap: 4px !important; background: #EEF1F5 !important; border-radius: 9px !important; padding: 4px !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tab { padding: 6px 16px !important; border-radius: 7px !important; font-size: 13px !important; font-weight: 600 !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tab--active { background: #FFFFFF !important; color: #0F172A !important; box-shadow: 0 1px 2px rgba(15,23,42,0.08) !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__viewuser { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #2945E6 !important; color: #FFFFFF !important; border-radius: 8px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 700 !important; }

/* ---- detail: event-type filter pills ---- */
.widget--mock.mock-tm-sess-detail .mock-tm-sd__pills { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 18px !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__pill { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #F1F5F9 !important; border-radius: 8px !important; padding: 6px 11px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__pill--active { background: #E2E8F0 !important; color: #334155 !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__pillc { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 999px !important; background: #FFFFFF !important; color: #475569 !important; font-size: 11px !important; font-weight: 700 !important; }

/* ---- detail: timeline ---- */
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tl { display: flex !important; flex-direction: column !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tlrow { display: flex !important; align-items: flex-start !important; gap: 13px !important; padding: 0 2px 18px !important; position: relative !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tlrow::before { content: "" !important; position: absolute !important; left: 13px !important; top: 26px !important; bottom: 0 !important; width: 2px !important; background: #E5E7EB !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tlrow--last { padding-bottom: 4px !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tlrow--last::before { display: none !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__num { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; border-radius: 999px !important; border: 1.5px solid #CBD5E1 !important; background: #FFFFFF !important; color: #64748B !important; font-size: 12px !important; font-weight: 700 !important; flex-shrink: 0 !important; position: relative !important; z-index: 1 !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tlmain { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 5px !important; padding-top: 2px !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__tlpath { display: flex !important; align-items: baseline !important; gap: 7px !important; font-size: 13px !important; color: #1E293B !important; min-width: 0 !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__seg { font-weight: 500 !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__qs { color: #94A3B8 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__dur { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__time { font-size: 12.5px !important; color: #94A3B8 !important; white-space: nowrap !important; flex-shrink: 0 !important; font-variant-numeric: tabular-nums !important; padding-top: 4px !important; }
.widget--mock.mock-tm-sess-detail .mock-tm-sd__foot { margin: 6px 0 0 !important; text-align: center !important; font-size: 12.5px !important; color: #94A3B8 !important; }

/* ============================================================ */
/* Users page widgets (dashboard/users)                         */
/*   mock-tm-users-table = the people list (13-col wide table)  */
/*   mock-tm-user-profile = one person's stitched profile       */
/*   The profile reuses the shared .mock-tmsess session card    */
/*   and the .ut-* browser/os/device chips below.               */
/* ============================================================ */

/* ---- shared browser / OS / device / channel chips ---- */
.widget--mock .ut-bw { width: 15px !important; height: 15px !important; border-radius: 4px !important; display: inline-block !important; flex-shrink: 0 !important; vertical-align: -2px !important; }
.widget--mock .ut-bw--ig { background: linear-gradient(45deg, #F9CE34, #EE2A7B 45%, #6228D7) !important; }
.widget--mock .ut-bw--samsung { background: #1428A0 !important; border-radius: 999px !important; }
.widget--mock .ut-bw--chrome { background: radial-gradient(circle at center, #FFFFFF 0 32%, rgba(255,255,255,0) 33%), conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0) !important; border-radius: 999px !important; }
.widget--mock .ut-bw--safari { background: radial-gradient(circle at center, #FFFFFF 0 26%, rgba(255,255,255,0) 27%), #1B9DF0 !important; border-radius: 999px !important; }
.widget--mock .ut-os { width: 13px !important; height: 13px !important; border-radius: 999px !important; display: inline-block !important; flex-shrink: 0 !important; vertical-align: -2px !important; }
.widget--mock .ut-os--android { background: #3DDC84 !important; }
.widget--mock .ut-os--apple { background: #1F2937 !important; }
.widget--mock .ut-os--win { background: #00A4EF !important; }
.widget--mock .ut-dev { display: inline-block !important; border: 1.5px solid #94A3B8 !important; background: #FFFFFF !important; flex-shrink: 0 !important; vertical-align: -2px !important; }
.widget--mock .ut-dev--mobile { width: 10px !important; height: 14px !important; border-radius: 3px !important; }
.widget--mock .ut-dev--desktop { width: 16px !important; height: 12px !important; border-radius: 3px !important; }
.widget--mock .ut-ch { font-size: 12px !important; }

/* ---- users table ---- */
.widget--mock.mock-tm-users-table { max-width: 1116px !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 14px 16px 16px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__tabs { display: flex !important; gap: 22px !important; border-bottom: 1px solid #E5E7EB !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__tab { padding-bottom: 10px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__tab--active { color: #0F172A !important; box-shadow: inset 0 -2px 0 #0F172A !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 14px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__tleft { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__dd { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #334155 !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__search { display: inline-flex !important; align-items: center !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 12.5px !important; color: #94A3B8 !important; min-width: 220px !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__tright { display: inline-flex !important; align-items: center !important; gap: 9px !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__tog { width: 32px !important; height: 18px !important; border-radius: 999px !important; background: #CBD5E1 !important; position: relative !important; display: inline-block !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__togknob { position: absolute !important; top: 2px !important; left: 2px !important; width: 14px !important; height: 14px !important; border-radius: 999px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__toglab { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 12.5px !important; font-weight: 500 !important; color: #475569 !important; margin-right: 6px !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__info { color: #94A3B8 !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__scroll { overflow-x: auto !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__table { width: 100% !important; min-width: 1180px !important; border-collapse: collapse !important; font-size: 12.5px !important; }
@media (max-width: 760px) { .widget--mock.mock-tm-users-table .mock-tm-ut__scroll { overflow: visible !important; } }
.widget--mock.mock-tm-users-table .mock-tm-ut__table th,
.widget--mock.mock-tm-users-table .mock-tm-ut__table td { padding: 9px 12px !important; border-bottom: 1px solid #F1F5F9 !important; white-space: nowrap !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__table th { font-size: 11px !important; color: #94A3B8 !important; font-weight: 600 !important; text-align: right !important; border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__table th.ut-l { text-align: left !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__table td { color: #334155 !important; text-align: right !important; font-variant-numeric: tabular-nums !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__table td.ut-l { text-align: left !important; color: #1E293B !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__table td.ut-l .ut-av { width: 18px !important; height: 18px !important; border-radius: 999px !important; display: inline-block !important; vertical-align: -4px !important; margin-right: 4px !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__table tbody tr:hover { background: #F8FAFC !important; }
.widget--mock.mock-tm-users-table .mock-tm-ut__table td.ut-buy { color: #16A34A !important; font-weight: 700 !important; }

/* ---- user profile ---- */
.widget--mock.mock-tm-user-profile { max-width: 760px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__inner { background: #F8FAFC !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__crumb { margin: 0 0 14px !important; font-size: 12.5px !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__sep { margin: 0 6px !important; color: #CBD5E1 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__head { display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 16px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__avatar { width: 44px !important; height: 44px !important; border-radius: 999px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__headtext { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__name { font-size: 20px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__id { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__grid { display: grid !important; grid-template-columns: 286px 1fr !important; gap: 14px !important; align-items: start !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__rail { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__main { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 16px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__cardh { margin: 0 0 14px !important; font-size: 14px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__cardh--tab { display: inline-block !important; padding-bottom: 8px !important; box-shadow: inset 0 -2px 0 #2945E6 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 12px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__stat { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__sl { font-size: 11px !important; color: #94A3B8 !important; text-transform: uppercase !important; letter-spacing: .03em !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__sv { font-size: 18px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__ldrow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 8px 0 !important; border-bottom: 1px solid #F1F5F9 !important; font-size: 12.5px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__ld .mock-tm-up__ldrow:last-child { border-bottom: 0 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__ldk { color: #94A3B8 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__ldv { color: #334155 !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__ldv--em { color: #CBD5E1 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__calmonths { display: flex !important; justify-content: space-between !important; font-size: 10.5px !important; color: #94A3B8 !important; margin-bottom: 6px !important; padding: 0 2px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__calgrid { display: grid !important; grid-template-rows: repeat(7, 1fr) !important; grid-auto-flow: column !important; gap: 3px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__c { width: 100% !important; aspect-ratio: 1 / 1 !important; border-radius: 3px !important; background: #EBEDF0 !important; display: block !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__c--on { background: #216E39 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__tphead { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 11px !important; color: #94A3B8 !important; padding: 0 2px 8px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__tprow { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #EEF1FE !important; border-radius: 7px !important; padding: 9px 11px !important; margin-bottom: 7px !important; font-size: 12.5px !important; color: #334155 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__tppage { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__ext { color: #94A3B8 !important; font-size: 11px !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__tpn { font-variant-numeric: tabular-nums !important; font-weight: 600 !important; }
.widget--mock.mock-tm-user-profile .mock-tm-up__tppage-nav { text-align: right !important; font-size: 12px !important; font-weight: 600 !important; color: #94A3B8 !important; margin-top: 10px !important; }
.widget--mock.mock-tm-user-profile .ssc { box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; }

/* ============================================================ */
/* UTM Builder widgets (dashboard/utm-builder)                  */
/*   mock-tm-utm-builder = the input form (URL + quick fill +   */
/*     source/medium/campaign/term/content)                     */
/*   mock-tm-utm-output  = Full URL + ad-platform string +      */
/*     the per-platform Facebook / Google Ads templates         */
/* ============================================================ */

/* ---- builder form ---- */
.widget--mock.mock-tm-utm-builder { max-width: 760px !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__field { display: flex !important; flex-direction: column !important; gap: 7px !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__label { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 14px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__req { color: #EF4444 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__opt { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__i { font-style: normal !important; color: #CBD5E1 !important; font-size: 12px !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__input { display: block !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 9px !important; padding: 11px 14px !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__input--ph { color: #9CA3AF !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__conv { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 16px 0 18px !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__convlab { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__convrow { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__convsave { background: #2945E6 !important; border: 0 !important; border-radius: 9px !important; padding: 10px 18px !important; font-size: 14px !important; font-weight: 700 !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-utm-builder .mock-tm-utf__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 18px !important; }

/* ---- output + templates ---- */
.widget--mock.mock-tm-utm-output { max-width: 760px !important; }
.widget--mock.mock-utmio .mock-tm-uto__inner { display: flex !important; flex-direction: column !important; gap: 16px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-utmio .mock-tm-uto__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; padding: 20px !important; }
.widget--mock.mock-utmio .mock-tm-uto__out { display: flex !important; align-items: stretch !important; gap: 12px !important; }
.widget--mock.mock-utmio .mock-tm-uto__out + .mock-tm-uto__out { margin-top: 16px !important; }
.widget--mock.mock-utmio .mock-tm-uto__outmain { flex: 1 1 auto !important; min-width: 0 !important; background: #F1F5F9 !important; border-radius: 10px !important; padding: 12px 16px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-utmio .mock-tm-uto__outlab { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #94A3B8 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.widget--mock.mock-utmio .mock-tm-uto__outval { font-size: 14px !important; color: #64748B !important; }
.widget--mock.mock-utmio .mock-tm-uto__i { font-style: normal !important; color: #CBD5E1 !important; font-size: 11px !important; }
.widget--mock.mock-utmio .mock-tm-uto__copy { display: inline-flex !important; align-items: center !important; gap: 7px !important; flex-shrink: 0 !important; align-self: center !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 9px !important; padding: 10px 16px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #94A3B8 !important; }
.widget--mock.mock-utmio .mock-tm-uto__h { margin: 0 0 16px !important; font-size: 17px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-utmio .mock-tm-uto__tpl + .mock-tm-uto__tpl { margin-top: 22px !important; }
.widget--mock.mock-utmio .mock-tm-uto__tpllab { margin: 0 0 4px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: #64748B !important; }
.widget--mock.mock-utmio .mock-tm-uto__tplsub { margin: 0 0 10px !important; font-size: 13px !important; color: #64748B !important; line-height: 1.5 !important; }
.widget--mock.mock-utmio .mock-tm-uto__tplrow { display: flex !important; align-items: stretch !important; gap: 12px !important; }
.widget--mock.mock-utmio .mock-tm-uto__code { flex: 1 1 auto !important; min-width: 0 !important; background: #F1F5F9 !important; border-radius: 10px !important; padding: 12px 14px !important; font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #334155 !important; line-height: 1.6 !important; word-break: break-all !important; white-space: normal !important; }

/* ---- utm output: split into output-only + per-platform templates ---- */
.widget--mock.mock-tm-utm-templates { max-width: 760px !important; }
/* filled example values in the output rows (Full URL + ad-platform string) */
.widget--mock.mock-utmio .mock-tm-uto__outval--filled { color: #0F172A !important; font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace !important; line-height: 1.6 !important; word-break: break-all !important; white-space: normal !important; }
/* active copy button (shown once there is something to copy) */
.widget--mock.mock-utmio .mock-tm-uto__copy--on { color: #2945E6 !important; border-color: #C7D0F7 !important; }

/* ============================================================ */
/* API page widget (dashboard/api)                              */
/*   mock-tm-api-keys = Account Settings > Account > API Keys    */
/*   card: create form + the Your API Keys table.               */
/* ============================================================ */
.widget--mock.mock-tm-api-keys { max-width: 760px !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__inner { display: grid !important; grid-template-columns: 158px 1fr !important; gap: 16px !important; background: #F8FAFC !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 16px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__rail { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__org { display: flex !important; align-items: center !important; gap: 7px !important; background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 9px !important; padding: 9px 10px !important; font-size: 13px !important; font-weight: 700 !important; color: #0F172A !important; margin-bottom: 8px !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__orgcar { margin-left: auto !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__nav { display: flex !important; align-items: center !important; gap: 9px !important; padding: 9px 10px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; color: #475569 !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__nav--active { background: #EAEEF3 !important; color: #0F172A !important; font-weight: 600 !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__main { min-width: 0 !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__h1 { margin: 2px 0 2px !important; font-size: 20px !important; font-weight: 800 !important; color: #0F172A !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__sub1 { margin: 0 0 14px !important; font-size: 12.5px !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__cardh { margin: 0 0 14px !important; font-size: 17px !important; font-weight: 800 !important; color: #0F172A !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__createh { margin: 0 0 3px !important; font-size: 14px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__createsub { margin: 0 0 11px !important; font-size: 12.5px !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__createrow { display: flex !important; gap: 10px !important; margin-bottom: 20px !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__input { flex: 1 1 auto !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 9px !important; padding: 10px 13px !important; font-size: 13px !important; color: #9CA3AF !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__btn { flex-shrink: 0 !important; background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important; border-radius: 9px !important; padding: 10px 20px !important; font-size: 13px !important; font-weight: 600 !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__listh { margin: 0 0 8px !important; font-size: 14px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__table { display: flex !important; flex-direction: column !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__row { display: flex !important; align-items: center !important; padding: 10px 2px !important; border-bottom: 1px solid #F1F5F9 !important; font-size: 12.5px !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__row--head { background: #F8FAFC !important; border-radius: 7px !important; padding: 8px 2px !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__row--head .mock-tm-ak__c { color: #94A3B8 !important; font-weight: 600 !important; font-size: 11px !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__c { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__c--name { flex: 1 1 auto !important; font-weight: 600 !important; color: #1E293B !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__c--key { flex: 0 0 90px !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #64748B !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__c--date { flex: 0 0 150px !important; color: #64748B !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__c--act { flex: 0 0 64px !important; display: flex !important; justify-content: flex-end !important; }
.widget--mock.mock-tm-api-keys .mock-tm-ak__del { background: #EF4444 !important; color: #FFFFFF !important; border-radius: 7px !important; padding: 5px 12px !important; font-size: 12px !important; font-weight: 600 !important; }

/* ============================================================ */
/* New vs Returning customers widgets (features/new-vs-returning)*/
/*   mock-tm-rev-audience  = Revenue KPIs + Audience dropdown    */
/*   mock-tm-newret-mapping reuses the Create custom event popup */
/*   (mock-tm-fb-custom-mapping-dialog) with the Fire when menu  */
/*   (the Ads Manager column payoff reuses mock-fb-am-campaigns- */
/*   result from the Facebook widgets.)                          */
/* ============================================================ */

/* ---- revenue audience dropdown ---- */
.widget--mock.mock-tm-rev-audience { max-width: 760px !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__kpis { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin-bottom: 16px !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__kpi { background: #F8FAFC !important; border: 1px solid #EEF2F6 !important; border-radius: 11px !important; padding: 13px 15px !important; display: flex !important; flex-direction: column !important; gap: 7px !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__kl { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__kv { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.02em !important; color: #0F172A !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__toolbar { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px 16px !important; padding-bottom: 124px !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__ctl { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__ctll { font-size: 12.5px !important; color: #64748B !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__sel { display: inline-flex !important; align-items: center !important; gap: 10px !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 13px !important; font-weight: 600 !important; color: #0F172A !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__sel--open { border-color: #2945E6 !important; box-shadow: 0 0 0 3px rgba(41,69,230,0.12) !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__car { color: #94A3B8 !important; font-size: 11px !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__ctl--audience { position: relative !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__menu { position: absolute !important; top: calc(100% + 6px) !important; left: 78px !important; z-index: 5 !important; min-width: 190px !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; box-shadow: 0 12px 28px rgba(15,23,42,0.16) !important; padding: 6px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__opt { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 9px 11px !important; border-radius: 7px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #0F172A !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__opt--sel { background: #F1F5F9 !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__check { color: #0F172A !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__chip { background: #F1F5F9 !important; border-radius: 7px !important; padding: 5px 10px !important; font-size: 12.5px !important; font-weight: 500 !important; color: #475569 !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__addev { color: #2945E6 !important; font-size: 12.5px !important; font-weight: 600 !important; }
.widget--mock.mock-tm-rev-audience .mock-tm-rva__cols { display: inline-flex !important; align-items: center !important; gap: 7px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #475569 !important; }

/* ---- Fire when dropdown open (reuses the Create custom event popup) ---- */
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__menu { margin-top: 4px !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; background: #FFFFFF !important; box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.25) !important; padding: 6px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__menuitem { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 9px 11px !important; border-radius: 7px !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__menuitem--active { background: #F1F5F9 !important; font-weight: 600 !important; }
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__menucheck { color: #0F0F0F !important; flex: 0 0 auto !important; }

/* ---- imported customers (Users > Imported customers, CSV upload) ---- */
.widget--mock.mock-tm-imported { max-width: 760px !important; }
.widget--mock.mock-tm-imported .mock-tm-imp__inner { background: #F8FAFC !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 16px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-imported .mock-tm-imp__tabs { display: flex !important; gap: 22px !important; padding: 0 4px 0 !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-imported .mock-tm-imp__tab { padding-bottom: 4px !important; font-size: 14px !important; font-weight: 600 !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-imported .mock-tm-imp__tab--active { color: #0F172A !important; border: 1px solid #CBD5E1 !important; border-radius: 7px !important; padding: 4px 10px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-imported .mock-tm-imp__empty { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 36px 28px !important; text-align: center !important; }
.widget--mock.mock-tm-imported .mock-tm-imp__h { margin: 0 0 12px !important; font-size: 18px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-imported .mock-tm-imp__copy { margin: 0 auto 18px !important; max-width: 560px !important; font-size: 13px !important; line-height: 1.6 !important; color: #6B7280 !important; }
.widget--mock.mock-tm-imported .mock-tm-imp__copy code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 12px !important; color: #334155 !important; background: #F1F5F9 !important; border-radius: 4px !important; padding: 1px 5px !important; }
.widget--mock.mock-tm-imported .mock-tm-imp__btn { display: inline-block !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 9px 18px !important; font-size: 13px !important; font-weight: 600 !important; color: #1E293B !important; }

/* ============================================================ */
/* Buyer journeys + attribution widgets (features/buyer-journeys)*/
/*   mock-tm-rev-attribution = Revenue Attribution dropdown +    */
/*     per-source table                                          */
/*   mock-tm-journey = one buyer's stacked visit cards (reuses   */
/*     the shared .mock-tmsess .ssc card chrome)                 */
/* ============================================================ */

/* ---- revenue attribution dropdown + source table ---- */
.widget--mock.mock-tm-rev-attribution { max-width: 760px !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 16px 18px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__toolbar { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px 16px !important; padding-bottom: 132px !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__ctl { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__ctll { font-size: 12.5px !important; color: #64748B !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__sel { display: inline-flex !important; align-items: center !important; gap: 10px !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 13px !important; font-weight: 600 !important; color: #0F172A !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__sel--open { border-color: #2945E6 !important; box-shadow: 0 0 0 3px rgba(41,69,230,0.12) !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__car { color: #94A3B8 !important; font-size: 11px !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__ctl--attr { position: relative !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__menu { position: absolute !important; top: calc(100% + 6px) !important; left: 78px !important; z-index: 5 !important; min-width: 180px !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; box-shadow: 0 12px 28px rgba(15,23,42,0.16) !important; padding: 6px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__opt { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 9px 11px !important; border-radius: 7px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #0F172A !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__opt--sel { background: #F1F5F9 !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__cols { display: inline-flex !important; align-items: center !important; gap: 7px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #475569 !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__tabs { display: flex !important; gap: 20px !important; border-bottom: 1px solid #E5E7EB !important; margin-bottom: 8px !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__tab { padding-bottom: 8px !important; font-size: 13px !important; font-weight: 600 !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__tab--active { color: #0F172A !important; box-shadow: inset 0 -2px 0 #0F172A !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__table { display: flex !important; flex-direction: column !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__row { display: flex !important; align-items: center !important; padding: 10px 2px !important; border-bottom: 1px solid #F1F5F9 !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__row--head .mock-tm-rat__c { color: #94A3B8 !important; font-weight: 600 !important; font-size: 11px !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__row--total { border-top: 2px solid #E5E7EB !important; border-bottom: 0 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__c { font-size: 12.5px !important; color: #334155 !important; font-variant-numeric: tabular-nums !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__c--src { flex: 1 1 auto !important; font-weight: 600 !important; color: #1E293B !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__c--n { flex: 0 0 96px !important; text-align: right !important; }
.widget--mock.mock-tm-rev-attribution .mock-tm-rat__c--pos { color: #16A34A !important; font-weight: 700 !important; }

/* ---- buyer journey: stacked visit cards ---- */
.widget--mock.mock-tm-journey { max-width: 760px !important; }
.widget--mock.mock-tm-journey .mock-tm-journey__inner { background: #F1F5F9 !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 14px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-tmsess .ssc__ic--desk { width: 18px !important; height: 13px !important; border: 1.5px solid #94A3B8 !important; border-radius: 3px !important; background: #FFFFFF !important; display: inline-block !important; flex-shrink: 0 !important; }

/* ============================================================ */
/*  CHROME EXTENSION PAGE  (features/chrome-extension)          */
/*   mock-tm-ext-store   = Chrome Web Store listing card        */
/*   mock-tmext .tmx-bar = shared dark TrueMetriks overlay bar  */
/*   mock-tm-ext-overlay = Facebook Ads Manager + 8 TM cells    */
/*   mock-tm-ext-google  = Google Ads + 8 TM cells              */
/*   mock-tm-ext-dd      = shared open-dropdown chip + menu      */
/* ============================================================ */

/* ---- Chrome Web Store listing card ---- */
.widget--mock.mock-tm-ext-store { max-width: 560px !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; padding: 22px 24px !important; color: #202124 !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__top { display: flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__mark { font-weight: 800 !important; font-size: 26px !important; letter-spacing: -0.02em !important; color: #0F172A !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__dot { color: #2233FF !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__name { font-size: 22px !important; font-weight: 700 !important; color: #202124 !important; flex: 1 1 auto !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__cta { background: #1A73E8 !important; color: #FFFFFF !important; border-radius: 999px !important; padding: 9px 18px !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__meta { display: flex !important; align-items: center !important; gap: 18px !important; margin-top: 14px !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__site { color: #1A73E8 !important; font-size: 14px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__share { color: #5F6368 !important; font-size: 14px !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__tags { display: flex !important; gap: 10px !important; margin-top: 16px !important; }
.widget--mock.mock-tm-ext-store .mock-tm-xstore__tag { background: #F1F3F4 !important; color: #3C4043 !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 13px !important; font-weight: 500 !important; }

/* ---- shared dark TrueMetriks overlay bar ---- */
.widget--mock.mock-tmext .tmx-bar { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 9px 8px !important; background: #0c1330 !important; border: 1px solid #0c1330 !important; border-radius: 12px 12px 0 0 !important; padding: 10px 14px !important; font: 400 12.5px var(--font-family-base, system-ui) !important; color: #cdd8ff !important; }
.widget--mock.mock-tmext .tmx-bar__brand { font-weight: 800 !important; font-size: 14px !important; letter-spacing: -0.01em !important; color: #FFFFFF !important; white-space: nowrap !important; margin-right: 4px !important; }
.widget--mock.mock-tmext .tmx-bar__dot { color: #5b7cff !important; }
.widget--mock.mock-tmext .tmx-bar__chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 999px !important; padding: 6px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #FFFFFF !important; white-space: nowrap !important; }
.widget--mock.mock-tmext .tmx-bar__lbl { color: #9fb0e6 !important; font-weight: 500 !important; }
.widget--mock.mock-tmext .tmx-bar__car { font-size: 10px !important; color: #7e8bc4 !important; }
.widget--mock.mock-tmext .tmx-bar__btn { border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 999px !important; padding: 6px 14px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #cdd8ff !important; white-space: nowrap !important; }
.widget--mock.mock-tmext .tmx-bar__status { width: 9px !important; height: 9px !important; border-radius: 50% !important; background: #34D399 !important; box-shadow: 0 0 0 3px rgba(52,211,153,0.18) !important; flex-shrink: 0 !important; margin-left: auto !important; }

/* ---- Facebook overlay: light Ad column + dark navy metrics block (fits, no scroll) ---- */
.widget--mock.mock-tm-ext-overlay { max-width: 760px !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__inner { border: 1px solid #E5E7EB !important; border-radius: 12px !important; background: #FFFFFF !important; overflow: hidden !important; font: 400 13px var(--font-family-base, system-ui) !important; color: #1C2B33 !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__table { display: flex !important; flex-direction: column !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__row { display: flex !important; align-items: stretch !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__ad { flex: 0 0 124px !important; display: flex !important; align-items: center !important; gap: 8px !important; min-height: 46px !important; padding: 0 12px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #1877F2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: #FFFFFF !important; border-bottom: 1px solid #EBEDF0 !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__metrics { flex: 1 1 auto !important; display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; align-items: center !important; background: #0c1330 !important; border-left: 2px solid #2945E6 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__c { padding: 13px 6px !important; font-size: 11.5px !important; text-align: right !important; color: #e4e9ff !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; overflow: hidden !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__row--head .mock-tm-xfb__ad { min-height: 42px !important; background: #F5F6F7 !important; color: #65676B !important; font-weight: 700 !important; font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__row--head .mock-tm-xfb__c { color: #FFFFFF !important; font-weight: 700 !important; font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__c--pos { color: #34D399 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__c--neg { color: #FB7185 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__thumb { width: 20px !important; height: 20px !important; border-radius: 4px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__thumb--a { background: linear-gradient(135deg,#F472B6,#C026D3) !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__thumb--b { background: linear-gradient(135deg,#34D399,#0891B2) !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__thumb--c { background: linear-gradient(135deg,#FBBF24,#F97316) !important; }
.widget--mock.mock-tm-ext-overlay .mock-tm-xfb__thumb--d { background: linear-gradient(135deg,#60A5FA,#6366F1) !important; }

/* ---- Google Ads overlay: light Campaign column + dark navy metrics block ---- */
.widget--mock.mock-tm-ext-google { max-width: 760px !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__inner { border: 1px solid #E5E7EB !important; border-radius: 12px !important; background: #FFFFFF !important; overflow: hidden !important; font: 400 13px var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__table { display: flex !important; flex-direction: column !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__row { display: flex !important; align-items: stretch !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__ad { flex: 0 0 132px !important; display: flex !important; align-items: center !important; gap: 8px !important; min-height: 46px !important; padding: 0 12px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #1A73E8 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: #FFFFFF !important; border-bottom: 1px solid #ECEDEE !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__metrics { flex: 1 1 auto !important; display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; align-items: center !important; background: #0c1330 !important; border-left: 2px solid #2945E6 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__c { padding: 13px 6px !important; font-size: 11.5px !important; text-align: right !important; color: #e4e9ff !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; overflow: hidden !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__row--head .mock-tm-xg__ad { min-height: 42px !important; background: #F8F9FA !important; color: #5F6368 !important; font-weight: 700 !important; font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__row--head .mock-tm-xg__c { color: #FFFFFF !important; font-weight: 700 !important; font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__row--total .mock-tm-xg__ad { background: #F8F9FA !important; font-weight: 700 !important; color: #202124 !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__row--total .mock-tm-xg__c { background: #111a3d !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__c--pos { color: #34D399 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__c--neg { color: #FB7185 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__thumb { width: 20px !important; height: 20px !important; border-radius: 4px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__thumb--a { background: linear-gradient(135deg,#F472B6,#C026D3) !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__thumb--b { background: linear-gradient(135deg,#34D399,#0891B2) !important; }
.widget--mock.mock-tm-ext-google .mock-tm-xg__thumb--c { background: linear-gradient(135deg,#FBBF24,#F97316) !important; }

/* ---- shared open-dropdown chips (Attribution / Audience / Columns) ---- */
.widget--mock.mock-tm-ext-dd .mock-tm-xdd__inner { position: relative !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 16px 18px !important; font: 400 13px var(--font-family-base, system-ui) !important; color: #0F172A !important; }
.widget--mock.mock-tm-ext-dd .mock-tm-xdd__chip { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 999px !important; padding: 8px 14px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #0F172A !important; }
.widget--mock.mock-tm-ext-dd .mock-tm-xdd__chip--open { border-color: #2945E6 !important; box-shadow: 0 0 0 3px rgba(41,69,230,0.12) !important; }
.widget--mock.mock-tm-ext-dd .mock-tm-xdd__lbl { color: #64748B !important; font-weight: 500 !important; }
.widget--mock.mock-tm-ext-dd .mock-tm-xdd__car { color: #94A3B8 !important; font-size: 11px !important; }
.widget--mock.mock-tm-ext-dd .mock-tm-xdd__menu { position: absolute !important; top: calc(16px + 40px) !important; left: 18px !important; z-index: 5 !important; min-width: 220px !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; box-shadow: 0 14px 32px rgba(15,23,42,0.16) !important; padding: 8px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-tm-ext-dd .mock-tm-xdd__opt { display: flex !important; align-items: center !important; gap: 10px !important; padding: 11px 12px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 500 !important; color: #1E293B !important; }
.widget--mock.mock-tm-ext-dd .mock-tm-xdd__opt--sel { background: #F1F5F9 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-ext-dd .mock-tm-xdd__box { width: 18px !important; height: 18px !important; border-radius: 4px !important; border: 1.5px solid #CBD5E1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-ext-dd .mock-tm-xdd__box--on { background: #2945E6 !important; border-color: #2945E6 !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-ext-attribution .mock-tm-xdd__inner { padding-bottom: 180px !important; }
.widget--mock.mock-tm-ext-audience .mock-tm-xdd__inner { padding-bottom: 180px !important; }
.widget--mock.mock-tm-ext-columns .mock-tm-xdd__inner { padding-bottom: 420px !important; }

/* ---- Where the overlay appears: the Facebook Ads tab + Google Ads views ----
   No outer container: the figure carries no border/background/padding, so the
   Facebook / Google / summary boxes float as separate cards with a plain gap. */
.widget--mock.mock-tm-ext-ads-tab { max-width: 640px !important; border: none !important; background: transparent !important; padding: 0 !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__inner { display: flex !important; flex-direction: column !important; gap: 18px !important; background: transparent !important; font: 400 13px var(--font-family-base, system-ui) !important; color: #14203a !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__block { border: none !important; border-radius: 12px !important; background: #FFFFFF !important; padding: 16px 18px 18px !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__plat { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #6b7280 !important; margin-bottom: 12px !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__logo { width: 18px !important; height: 18px !important; border-radius: 4px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #FFFFFF !important; font-weight: 800 !important; font-size: 11px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__logo--fb { background: #1877F2 !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__logo--g { background: #FFFFFF !important; border: 1px solid #dadce0 !important; color: #1a73e8 !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__tabs { display: flex !important; align-items: flex-end !important; gap: 4px !important; border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__tab { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 9px 15px !important; font-size: 14px !important; font-weight: 600 !important; color: #8a94a6 !important; border-bottom: 3px solid transparent !important; margin-bottom: -1px !important; white-space: nowrap !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__tab--blank { color: #b6bccb !important; font-weight: 500 !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__tab--works { color: #3c4657 !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__tab--on-fb { color: #1877F2 !important; border-bottom-color: #1877F2 !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__tab--on-g { color: #1a73e8 !important; border-bottom-color: #1a73e8 !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__chk { font-size: 11px !important; color: #059669 !important; font-weight: 900 !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__x { font-size: 10px !important; color: #c0c6d4 !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__hint { margin-top: 11px !important; font-size: 12.5px !important; line-height: 1.5 !important; color: #445 !important; display: flex !important; align-items: flex-start !important; gap: 8px !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__hint b { color: #14203a !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__req { flex: 0 0 auto !important; width: fit-content !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; padding: 2px 8px !important; border-radius: 999px !important; margin-top: 1px !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__req--fb { background: #FEF0E8 !important; color: #C2410C !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__req--g { background: #E9F7F0 !important; color: #059669 !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__foot { border: none !important; border-radius: 12px !important; background: #FFFFFF !important; padding: 16px 18px !important; font-size: 12.5px !important; line-height: 1.5 !important; color: #33405e !important; }
.widget--mock.mock-tm-ext-ads-tab .adt__foot b { color: #14203a !important; }

/* ---- Hide cells: toolbar button + before/after (TM cells collapse, native columns return) ---- */
.widget--mock.mock-tm-ext-hide-cells { max-width: 720px !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__inner { border: 1px solid #E5E7EB !important; border-radius: 12px !important; background: #FFFFFF !important; overflow: hidden !important; font: 400 13px var(--font-family-base, system-ui) !important; color: #1C2B33 !important; }
.widget--mock.mock-tm-ext-hide-cells .tmx-bar__btn--hi { color: #FFFFFF !important; border-color: rgba(249,115,22,0.9) !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.35) !important; background: rgba(249,115,22,0.10) !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__state { padding: 14px 16px 18px !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__state + .hc__state { border-top: 1px solid #EDEFF3 !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__label { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #33405e !important; margin-bottom: 10px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__label b { color: #14203a !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__pill { width: fit-content !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; padding: 3px 9px !important; border-radius: 999px !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__pill--shown { background: #E7ECFF !important; color: #2945E6 !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__pill--hidden { background: #E9F7F0 !important; color: #059669 !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__tbl { border: 1px solid #E5E7EB !important; border-radius: 8px !important; overflow: hidden !important; font: 400 12.5px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__row { display: flex !important; align-items: stretch !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__ad { flex: 0 0 118px !important; display: flex !important; align-items: center !important; min-height: 40px !important; padding: 0 12px !important; font-size: 12px !important; font-weight: 600 !important; color: #1877F2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: #FFFFFF !important; border-bottom: 1px solid #EBEDF0 !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__native { flex: 1 1 auto !important; display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; align-items: center !important; background: #FFFFFF !important; border-bottom: 1px solid #EBEDF0 !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__native .hc__c { color: #1c2b33 !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__tm { flex: 1 1 auto !important; display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; align-items: center !important; background: #0c1330 !important; border-left: 2px solid #2945E6 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__tm .hc__c { color: #e4e9ff !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__c { padding: 12px 8px !important; font-size: 11px !important; text-align: right !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; overflow: hidden !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__c--pos { color: #34D399 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__row--head .hc__ad { min-height: 34px !important; background: #F5F6F7 !important; color: #65676B !important; font-weight: 700 !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__row--head .hc__native .hc__c { color: #65676B !important; font-weight: 700 !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; }
.widget--mock.mock-tm-ext-hide-cells .hc__row--head .hc__tm .hc__c { color: #FFFFFF !important; font-weight: 700 !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; }

/* ---- chrome-extension page: mobile (mockfit scales the whole mock down) ---- */
@media (max-width: 760px) {
  .widget--mock.mock-tmext .tmx-bar { flex-wrap: nowrap !important; }
}

/* ============================================================ */
/*  UTM BUILDER paste-location widgets                          */
/*   mock-tm-utmfb = Facebook ad Tracking -> URL parameters     */
/*   mock-tm-utmgg = Google Admin -> Account settings -> Track  */
/* ============================================================ */

.widget--mock.mock-tm-utmfb, .widget--mock.mock-tm-utmgg { max-width: 640px !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__crumb,
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__crumb { font: 600 12px var(--font-family-base, system-ui) !important; color: #64748B !important; margin: 0 0 8px 2px !important; letter-spacing: 0.01em !important; }

/* ---- Facebook ad Tracking card ---- */
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px 20px !important; font: 400 14px var(--font-family-base, system-ui) !important; color: #1C2B33 !important; box-shadow: 0 4px 14px rgba(15,23,42,0.06) !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__head { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 16px !important; font-weight: 700 !important; color: #1C2B33 !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__check { width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #E7F3FF !important; color: #1877F2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__desc { font-size: 13px !important; color: #65676B !important; margin: 8px 0 14px !important; line-height: 1.45 !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__opt { display: flex !important; align-items: center !important; gap: 10px !important; margin: 9px 0 !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__box { width: 18px !important; height: 18px !important; border-radius: 4px !important; border: 1.5px solid #CBD5E1 !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; color: transparent !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__box--on { background: #1877F2 !important; border-color: #1877F2 !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__optlab { font-size: 14px !important; color: #1C2B33 !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__optlab--off { color: #8A8D91 !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__pixel { display: flex !important; align-items: center !important; gap: 9px !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 9px 12px !important; margin: 0 0 6px 28px !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #16A34A !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__pixname { font-size: 13.5px !important; font-weight: 600 !important; color: #1C2B33 !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__pixid { font-size: 12px !important; color: #65676B !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__field-lab { font-size: 14px !important; font-weight: 600 !important; color: #1C2B33 !important; margin: 16px 0 6px !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__i { color: #8A8D91 !important; font-size: 12px !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__field { border: 1px solid #CBD5E1 !important; border-radius: 8px !important; padding: 11px 13px !important; font: 400 12.5px var(--font-family-mono, ui-monospace, monospace) !important; color: #1C2B33 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__field--focus { border-color: #1877F2 !important; box-shadow: 0 0 0 3px rgba(24,119,242,0.14) !important; }
.widget--mock.mock-tm-utmfb .mock-tm-utmfb__link { color: #1877F2 !important; font-size: 13.5px !important; font-weight: 600 !important; margin: 12px 0 0 !important; }

/* ---- Google Account settings Tracking card ---- */
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px 20px !important; font: 400 14px var(--font-family-base, system-ui) !important; color: #202124 !important; box-shadow: 0 4px 14px rgba(15,23,42,0.06) !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__head { font-size: 18px !important; font-weight: 500 !important; color: #202124 !important; margin-bottom: 16px !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__row { display: flex !important; gap: 22px !important; align-items: flex-start !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__main { flex: 1 1 auto !important; min-width: 0 !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__lab { display: block !important; font-size: 11.5px !important; color: #5F6368 !important; margin: 0 0 4px !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__field { border: 1px solid #BDC1C6 !important; border-radius: 4px !important; padding: 11px 13px !important; font: 400 12.5px var(--font-family-mono, ui-monospace, monospace) !important; color: #202124 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__field--focus { border: 2px solid #1A73E8 !important; padding: 10px 12px !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__field--empty { min-height: 19px !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__ex { font-size: 12px !important; color: #5F6368 !important; margin: 6px 0 16px !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__test { color: #1A73E8 !important; font-size: 14px !important; font-weight: 500 !important; margin: 12px 0 0 !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__note { flex: 0 0 180px !important; font-size: 13px !important; color: #5F6368 !important; line-height: 1.45 !important; border-left: 1px solid #E5E7EB !important; padding-left: 18px !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__actions { display: flex !important; justify-content: flex-end !important; gap: 22px !important; margin-top: 16px !important; padding-top: 14px !important; border-top: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__cancel { color: #1A73E8 !important; font-size: 14px !important; font-weight: 500 !important; }
.widget--mock.mock-tm-utmgg .mock-tm-utmgg__save { color: #1A73E8 !important; font-size: 14px !important; font-weight: 600 !important; }

/* mobile: keep the Google note from squeezing the field */
@media (max-width: 760px) {
  .widget--mock.mock-tm-utmgg .mock-tm-utmgg__row { flex-direction: column !important; gap: 12px !important; }
  .widget--mock.mock-tm-utmgg .mock-tm-utmgg__note { flex-basis: auto !important; border-left: 0 !important; padding-left: 0 !important; }
}

/* Microsoft Clarity integration config card (dashboard/session-replay/clarity) */
.widget--mock.mock-tm-clarity { max-width: 680px !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__inner { background: #F8F9FB !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__crumb { margin: 0 0 10px !important; color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__title { margin: 0 0 8px !important; font: 800 26px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__desc { margin: 0 0 16px !important; font-size: 14px !important; line-height: 1.5 !important; color: #6B7280 !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 22px !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__project { border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 16px !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__label { display: block !important; margin: 0 0 6px !important; font-weight: 700 !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__input { border: 1px solid #CBD5E1 !important; border-radius: 8px !important; padding: 10px 12px !important; font: 400 15px var(--font-family-base, system-ui) !important; color: #0F172A !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__hint { margin: 8px 0 0 !important; font-size: 12px !important; line-height: 1.45 !important; color: #6B7280 !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__check { display: flex !important; align-items: flex-start !important; gap: 8px !important; margin: 14px 0 0 !important; font-size: 14px !important; color: #1F2937 !important; line-height: 1.4 !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__box { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; border-radius: 4px !important; background: #2F43FF !important; color: #FFFFFF !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; line-height: 1 !important; margin-top: 1px !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__actions { display: flex !important; align-items: center !important; gap: 10px !important; margin: 16px 0 0 !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__btn { border-radius: 8px !important; padding: 10px 16px !important; font-weight: 700 !important; font-size: 14px !important; cursor: default !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__btn--ghost { background: #FFFFFF !important; color: #0F172A !important; border: 1px solid #CBD5E1 !important; }
.widget--mock.mock-tm-clarity .mock-tm-clarity__btn--save { background: #2F43FF !important; color: #FFFFFF !important; border: 0 !important; }

/* Microsoft Clarity (clarity.microsoft.com) project Overview screen */
.widget--mock.mock-clx-overview { max-width: 560px !important; }
.widget--mock.mock-clx-overview .mock-clx-overview__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 26px !important; color: #1B1B1B !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-clx-overview .mock-clx-overview__title { margin: 0 0 18px !important; font: 800 24px var(--font-family-base, system-ui) !important; color: #1B1B1B !important; }
.widget--mock.mock-clx-overview .mock-clx-overview__id { margin: 0 0 20px !important; font-size: 15px !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-clx-overview .mock-clx-overview__idlabel { font-weight: 700 !important; color: #1B1B1B !important; }
.widget--mock.mock-clx-overview .mock-clx-overview__idval { color: #5B5B5B !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.widget--mock.mock-clx-overview .mock-clx-overview__copy { color: #5B5B5B !important; font-size: 18px !important; }
.widget--mock.mock-clx-overview .mock-clx-overview__flabel { margin: 0 0 6px !important; font-weight: 700 !important; font-size: 15px !important; color: #1B1B1B !important; }
.widget--mock.mock-clx-overview .mock-clx-overview__field { border: 1px solid #C8C8C8 !important; border-radius: 4px !important; padding: 10px 12px !important; margin: 0 0 16px !important; font-size: 15px !important; color: #1B1B1B !important; background: #FFFFFF !important; }
.widget--mock.mock-clx-overview .mock-clx-overview__field:last-child { margin-bottom: 0 !important; }

/* ============================================================
   Privacy & Security docs widget (2026-06-04)
   mock-tm-privsec = the Settings > Privacy & Security panel:
   three labelled toggle rows (all ON) + Save changes / Cancel.
   ============================================================ */
.widget--mock.mock-tm-privsec { max-width: 720px !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 24px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__heading { margin: 0 0 4px !important; font-size: 19px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__sub { margin: 0 0 18px !important; color: #6B7280 !important; font-size: 14px !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__row { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 24px !important; padding: 16px 0 !important; border-top: 1px solid #EEF1F5 !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__row--last { border-bottom: 1px solid #EEF1F5 !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__text { flex: 1 1 auto !important; min-width: 0 !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__name { margin: 0 0 5px !important; font-size: 15px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__desc { margin: 0 !important; color: #6B7280 !important; font-size: 13px !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__toggle { position: relative !important; display: inline-block !important; width: 40px !important; height: 22px !important; border-radius: 999px !important; background: #2F6BFF !important; flex-shrink: 0 !important; margin-top: 2px !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__knob { position: absolute !important; top: 2px !important; left: 20px !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__actions { display: flex !important; align-items: center !important; gap: 16px !important; margin-top: 20px !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__save { background: #6366F1 !important; color: #FFFFFF !important; border: 0 !important; border-radius: 8px !important; padding: 9px 18px !important; font-size: 14px !important; font-weight: 600 !important; cursor: default !important; }
.widget--mock.mock-tm-privsec .mock-tm-privsec__cancel { color: #6B7280 !important; font-size: 14px !important; }

/* --- Signup "Setup" step (add first site: domain, org, timezone, currency) --- */
.widget--mock.mock-signup-setup { max-width: 540px !important; }
.widget--mock.mock-signup-setup .mock-signup-setup__inner {
  padding: 32px 32px 28px !important;
  background: #F7F8FA !important;
  display: flex !important;
  flex-direction: column !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__title {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0F0F0F !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__subtitle {
  font-size: 15px !important;
  color: #6B7280 !important;
  margin: 8px 0 0 !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__steps {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin: 26px 0 28px !important;
  padding: 0 4px !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__dot {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #2233FF !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__dot svg { color: #FFFFFF !important; }
.widget--mock.mock-signup-setup .mock-signup-setup__step-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0F0F0F !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__line {
  flex: 1 1 auto !important;
  height: 2px !important;
  background: #2233FF !important;
  margin: 18px 0 0 !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin-top: 18px !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0F0F0F !important;
  margin: 0 !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__input {
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid #D8DCE6 !important;
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__input--placeholder { color: #9CA3AF !important; }
.widget--mock.mock-signup-setup .mock-signup-setup__input--select {
  justify-content: space-between !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__input--select svg { color: #6B7280 !important; flex: 0 0 auto !important; }
.widget--mock.mock-signup-setup .mock-signup-setup__hint {
  font-size: 13px !important;
  color: #6B7280 !important;
  margin: 0 !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__submit {
  height: 50px !important;
  margin-top: 26px !important;
  border-radius: 10px !important;
  background: #7077E8 !important;
  border: 0 !important;
  color: #FFFFFF !important;
  font: 600 16px var(--font-family-base, system-ui) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: default !important;
  box-shadow: 0 6px 16px -6px rgba(112, 119, 232, 0.6) !important;
}
.widget--mock.mock-signup-setup .mock-signup-setup__submit svg { color: #FFFFFF !important; }

/* ============================================================
   TikTok setup-guide widgets (/ad-integrations/tiktok/).
   The TikTok dashboard panels reuse the Facebook ad-integrations,
   pixel-dropdown and allowed-events CSS via shared class names;
   the blocks below are the TikTok-only overrides plus the two
   net-new replicas: the TikTok OAuth prompt and the connected card.
   ============================================================ */

/* TikTok tab + panel icon overrides on the reused ad-integrations replica */
.widget--mock.mock-tm-tiktok-ad-integrations .mock-tm-fb-ad-integrations__tabicon--tiktok { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #000000 !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-tiktok-ad-integrations .mock-tm-tiktok-ad-integrations__panelicon { background: #000000 !important; color: #FFFFFF !important; font-style: normal !important; }

/* ---- TikTok OAuth permission prompt ---- */
.widget--mock.mock-tiktok-oauth { max-width: 560px !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__inner { padding: 22px 24px 16px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #161823 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__head { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__appicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 7px !important; background: #F1F1F2 !important; color: #161823 !important; flex: 0 0 28px !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__headtext { margin: 0 !important; font-size: 16px !important; color: #6B7280 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__headtext strong { color: #161823 !important; font-weight: 700 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__account { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; background: #FFFFFF !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__avatar { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 999px !important; background: #4B5563 !important; color: #FFFFFF !important; font: 600 14px var(--font-family-base, system-ui) !important; flex: 0 0 36px !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__accountbody { flex: 1 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__accountname { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #161823 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__accountmail { margin: 1px 0 0 !important; font-size: 12px !important; color: #9CA3AF !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__switch { display: inline-flex !important; align-items: center !important; gap: 6px !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #2563EB !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__section { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__sectiontitle { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #161823 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__permrow { display: flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__caret { color: #9CA3AF !important; font-size: 10px !important; flex: 0 0 auto !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__box { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 4px !important; flex: 0 0 18px !important; color: #FFFFFF !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__box--checked { background: #161823 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__box--locked { background: #C9CCD1 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__permlabel { font-size: 14px !important; color: #161823 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__permlabel--dim { color: #9CA3AF !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__help { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 15px !important; height: 15px !important; border-radius: 999px !important; background: #E5E7EB !important; color: #6B7280 !important; font: 700 10px var(--font-family-base, system-ui) !important; flex: 0 0 15px !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__required { margin-left: auto !important; font-size: 13px !important; color: #93A4F5 !important; font-weight: 500 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__infobox { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border-radius: 8px !important; background: #EEF2FF !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__infoicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; background: #2563EB !important; color: #FFFFFF !important; font: 700 11px var(--font-family-base, system-ui) !important; flex: 0 0 18px !important; margin-top: 1px !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__infobox p { margin: 0 !important; font-size: 13px !important; color: #1E293B !important; line-height: 1.5 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__infobox a { color: #2563EB !important; text-decoration: none !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__footer { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; padding-top: 6px !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__btn { padding: 11px 22px !important; border-radius: 8px !important; font: 600 14px var(--font-family-base, system-ui) !important; cursor: default !important; border: 1px solid transparent !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__btn--ghost { background: #F1F1F2 !important; color: #161823 !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__btn--primary { background: #FE2C55 !important; color: #FFFFFF !important; }
.widget--mock.mock-tiktok-oauth .mock-tiktok-oauth__btn--focus { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 10px 22px -10px rgba(249, 115, 22, 0.55) !important; }

/* ---- TikTok connected card (ready to add a pixel) ---- */
.widget--mock.mock-tm-tiktok-connected { max-width: 720px !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__inner { padding: 20px 22px 18px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__head { display: flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 9px !important; background: #000000 !important; color: #FFFFFF !important; flex: 0 0 40px !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__headbody { flex: 1 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__title { font-size: 15px !important; font-weight: 700 !important; margin: 0 !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__pill { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 2px 10px !important; border-radius: 999px !important; background: #ECFDF5 !important; color: #047857 !important; font: 600 12px var(--font-family-base, system-ui) !important; width: fit-content !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__sub { font-size: 13px !important; color: #6B7280 !important; margin: 3px 0 0 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__disconnect { padding: 8px 14px !important; border-radius: 6px !important; border: 1px solid #D1D5DB !important; background: #FFFFFF !important; color: #374151 !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__rule { border: 0 !important; border-top: 1px solid #E5E7EB !important; margin: 2px 0 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__pixtitle { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__add { background: #2233FF !important; border: none !important; border-radius: 6px !important; padding: 7px 14px !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__hint { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border: 1px solid #BFDBFE !important; background: #EFF6FF !important; border-radius: 8px !important; color: #1E3A8A !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__hinticon { flex: 0 0 16px !important; margin-top: 2px !important; color: #1D4ED8 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__hinttitle { margin: 0 !important; font-size: 13px !important; color: #1E3A8A !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__hinttitle strong { color: #1E3A8A !important; font-weight: 600 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__hintbody { margin: 2px 0 0 !important; font-size: 13px !important; color: #1E40AF !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__inlinekey { font-weight: 600 !important; color: #1E3A8A !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__warn { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border: 1px solid #FCD34D !important; background: #FFFBEB !important; border-radius: 8px !important; color: #92400E !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__warnicon { flex: 0 0 16px !important; margin-top: 2px !important; color: #B45309 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__warntitle { margin: 0 !important; font-size: 13px !important; color: #92400E !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__warntitle strong { color: #78350F !important; font-weight: 700 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__warnbody { margin: 2px 0 0 !important; font-size: 13px !important; color: #92400E !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; border-top: 1px solid #E5E7EB !important; margin-top: 2px !important; padding-top: 14px !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__footnote { font-size: 13px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-tiktok-connected .mock-tm-tiktok-connected__save { padding: 9px 18px !important; border-radius: 6px !important; border: 0 !important; background: #7077E8 !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 6px 16px -6px rgba(112, 119, 232, 0.6) !important; }

/* ---- TikTok Settings -> Tracking tabs (empty panel placeholder) ---- */
.widget--mock.mock-tiktok-settings-tabs .mock-tiktok-settings-tabs__panel { min-height: 64px !important; }
.widget--mock.mock-tiktok-settings-tabs .mock-tiktok-settings-tabs__hint { margin: 0 !important; font-size: 13px !important; color: #9CA3AF !important; }

/* ============================================================
   TikTok "How to test" widgets (/ad-integrations/tiktok/ #how-to-test):
   Pixel Helper popup, and the TikTok Events Manager screens
   (Test events instructions + activity, Overview funnel table,
   Purchase deduplication). mock-em__* is the shared EM tab bar.
   ============================================================ */

/* Shared TikTok Events Manager tab bar */
.widget--mock.mock-em .mock-em__tabs { display: flex !important; flex-wrap: wrap !important; gap: 24px !important; border-bottom: 1px solid #E5E7EB !important; margin: 0 0 16px !important; }
.widget--mock.mock-em .mock-em__tab { font: 500 14px var(--font-family-base, system-ui) !important; color: #6B7280 !important; padding: 8px 0 12px !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; white-space: nowrap !important; }
.widget--mock.mock-em .mock-em__tab--active { color: #0F0F0F !important; border-bottom-color: #0F0F0F !important; font-weight: 600 !important; }

/* ---- TikTok Pixel Helper popup ---- */
.widget--mock.mock-tiktok-helper { max-width: 380px !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; overflow: hidden !important; font-family: var(--font-family-base, system-ui) !important; color: #161823 !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__head { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 16px !important; background: #F5F5F5 !important; border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 999px !important; background: #000000 !important; color: #FFFFFF !important; flex: 0 0 30px !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__headtitle { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__found { padding: 14px 16px !important; border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__foundtext { margin: 0 !important; font-size: 15px !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__info { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; border-radius: 999px !important; background: #C9CCD1 !important; color: #FFFFFF !important; font: 700 10px var(--font-family-base, system-ui) !important; vertical-align: middle !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__pixel { padding: 14px 16px !important; border-bottom: 1px solid #E5E7EB !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__pixelhead { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__pixelname { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__open { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border: 1px solid #E5E7EB !important; border-radius: 6px !important; color: #161823 !important; flex: 0 0 30px !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__pixelid { margin: 0 !important; font-size: 13px !important; color: #9CA3AF !important; letter-spacing: 0.02em !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__event { display: flex !important; align-items: center !important; gap: 10px !important; padding-top: 2px !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__check { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; border-radius: 999px !important; background: #16A34A !important; color: #FFFFFF !important; flex: 0 0 20px !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__eventname { font-size: 15px !important; font-weight: 600 !important; flex: 1 !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__eventchev { color: #6B7280 !important; display: inline-flex !important; }
.widget--mock.mock-tiktok-helper .mock-tiktok-helper__note { margin: 12px 16px 16px !important; padding-left: 12px !important; border-left: 3px solid #D1D5DB !important; font-size: 14px !important; color: #4B5563 !important; line-height: 1.5 !important; }

/* ---- TikTok Events Manager: Test events instructions (two cards) ---- */
.widget--mock.mock-tiktok-em-instructions { max-width: 900px !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__inner { padding: 18px 20px 20px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #161823 !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__h { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 14px !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__card { border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__cardicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border-radius: 8px !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__cardicon--browser { background: #E0F2F1 !important; color: #0D9488 !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__cardicon--server { background: #EDE7F6 !important; color: #7C3AED !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__cardtitle { font-size: 16px !important; font-weight: 700 !important; margin: 4px 0 0 !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__run { font-size: 13px !important; font-weight: 700 !important; margin: 6px 0 0 !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__step { font-size: 13px !important; color: #374151 !important; margin: 0 !important; line-height: 1.5 !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__urlrow { display: flex !important; gap: 8px !important; align-items: stretch !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__url { flex: 1 !important; border: 1px solid #D1D5DB !important; border-radius: 6px !important; padding: 8px 10px !important; font-size: 12px !important; color: #6B7280 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__openbtn { background: #161823 !important; color: #FFFFFF !important; border-radius: 6px !important; padding: 8px 14px !important; font: 600 13px var(--font-family-base, system-ui) !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__rec { display: flex !important; gap: 8px !important; align-items: flex-start !important; background: #F0FDFA !important; border-radius: 8px !important; padding: 10px 12px !important; margin-top: 4px !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__recicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; border-radius: 999px !important; background: #0D9488 !important; color: #FFFFFF !important; font: 700 10px var(--font-family-base, system-ui) !important; flex: 0 0 16px !important; margin-top: 1px !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__rec p { margin: 0 !important; font-size: 12px !important; color: #115E59 !important; line-height: 1.5 !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__rec a { color: #0D9488 !important; text-decoration: none !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__codechip { display: inline-flex !important; align-items: center !important; gap: 8px !important; align-self: flex-start !important; background: #F3F4F6 !important; border: 1px solid #E5E7EB !important; border-radius: 6px !important; padding: 8px 12px !important; font: 500 13px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #374151 !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__codechip--focus { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__activity { font-size: 16px !important; font-weight: 700 !important; margin: 18px 0 2px !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__activitysub { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tiktok-em-instructions .mock-tiktok-em-instructions__statusdot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; background: #10B981 !important; }

/* ---- TikTok Events Manager: Test event activity + detail ---- */
.widget--mock.mock-tiktok-em-activity { max-width: 900px !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__inner { padding: 18px 20px 20px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #161823 !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__h { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__sub { font-size: 13px !important; color: #6B7280 !important; margin: 4px 0 0 !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__statusdot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; background: #10B981 !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__filters { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 12px 0 14px !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__filter { background: #F3F4F6 !important; border: 1px solid #E5E7EB !important; border-radius: 6px !important; padding: 6px 10px !important; font-size: 12px !important; color: #374151 !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__split { display: grid !important; grid-template-columns: 280px 1fr !important; gap: 16px !important; align-items: start !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__item { border: 1px solid #E5E7EB !important; border-radius: 8px !important; padding: 12px 14px !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__item--active { border-color: #0D9488 !important; box-shadow: 0 0 0 1px #0D9488 !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__itemname { margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__itemnum { color: #9CA3AF !important; margin-right: 4px !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__itemmeta { margin: 4px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__detail { background: #F9FAFB !important; border-radius: 8px !important; padding: 16px 18px !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__detailtitle { margin: 0 0 12px !important; font-size: 16px !important; font-weight: 700 !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__group { font-size: 14px !important; font-weight: 700 !important; margin: 14px 0 8px !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__kv { display: grid !important; grid-template-columns: 140px 1fr !important; gap: 10px !important; padding: 3px 0 !important; font-size: 13px !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__k { color: #9CA3AF !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__v { color: #161823 !important; word-break: break-all !important; }
.widget--mock.mock-tiktok-em-activity .mock-tiktok-em-activity__v--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 12px !important; }

/* ---- TikTok Events Manager: Overview event funnel table ---- */
.widget--mock.mock-tiktok-em-overview { max-width: 980px !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__inner { padding: 18px 20px 20px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #161823 !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__h { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 14px !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__table { border: 1px solid #E5E7EB !important; border-radius: 10px !important; overflow: hidden !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__thead, .widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__trow { display: grid !important; grid-template-columns: 1.5fr 1.3fr 0.9fr 0.9fr 1fr 0.8fr !important; gap: 12px !important; align-items: center !important; padding: 12px 14px !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__thead { font-size: 13px !important; color: #6B7280 !important; font-weight: 600 !important; border-bottom: 1px solid #E5E7EB !important; background: #FAFAFA !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__trow { font-size: 13px !important; border-bottom: 1px solid #F3F4F6 !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__trow--focus { background: #FFF7ED !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__type { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__name { color: #0D9488 !important; font-weight: 600 !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__code { color: #9CA3AF !important; font-size: 12px !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__view { color: #0D9488 !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__view--focus { font-weight: 700 !important; text-decoration: underline !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__statusdot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; background: #10B981 !important; }
.widget--mock.mock-tiktok-em-overview .mock-tiktok-em-overview__num { text-align: right !important; font-weight: 600 !important; }

/* ---- TikTok Events Manager: Purchase event deduplication ---- */
.widget--mock.mock-tiktok-em-dedup { max-width: 720px !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__inner { padding: 18px 20px 20px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #161823 !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__crumb { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__crumbsep { color: #D1D5DB !important; margin: 0 4px !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__status { font-size: 14px !important; color: #16A34A !important; white-space: nowrap !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__statusdot { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 999px !important; background: #16A34A !important; margin-right: 4px !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__h { font-size: 18px !important; font-weight: 700 !important; margin: 10px 0 16px !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__ratecard { border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px 20px !important; margin-bottom: 14px !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__ratelabel { font-size: 15px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__rate { font-size: 34px !important; font-weight: 800 !important; margin: 6px 0 !important; letter-spacing: -0.02em !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__ratesub { font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__covcard { border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px 20px !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__covhead { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__covtitle { font-size: 15px !important; font-weight: 700 !important; margin: 0 !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__bp { background: #EDE9FE !important; color: #6D28D9 !important; border-radius: 999px !important; padding: 4px 10px !important; font-size: 12px !important; white-space: nowrap !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__covdesc { font-size: 13px !important; color: #6B7280 !important; margin: 6px 0 14px !important; line-height: 1.5 !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__thead, .widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__trow { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr !important; gap: 12px !important; padding: 12px 0 !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__thead { font-size: 13px !important; color: #374151 !important; font-weight: 600 !important; border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__trow { font-size: 14px !important; border-bottom: 1px solid #F3F4F6 !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__good { color: #16A34A !important; font-weight: 600 !important; }
.widget--mock.mock-tiktok-em-dedup .mock-tiktok-em-dedup__foot { font-size: 12px !important; color: #9CA3AF !important; margin: 12px 0 0 !important; }

/* ============================================================
   Google Ads "Modify columns" docs widgets (2026-06-13)
   mock-gads-tabs    = Campaigns / Ad groups / Ads left tabs
   mock-gads-menu    = Columns toolbar + Modify columns dropdown
   mock-gads-modify  = the Modify columns search + Your columns panel
   Replicate Google Ads' own UI so users can enable the ID columns
   the overlay needs. Light theme; Roboto-ish system font.
   ============================================================ */
.widget--mock.mock-gads { max-width: 640px !important; }
.widget--mock.mock-gads-tabs { max-width: 320px !important; }
.widget--mock.mock-gads-menu { max-width: 460px !important; }
.widget--mock.mock-gads-modify { max-width: 720px !important; }
.widget--mock.mock-gads .mock-gads__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; color: #202124 !important; font: 400 14px var(--font-family-base, system-ui) !important; overflow: hidden !important; }

/* mock-gads-tabs */
.widget--mock.mock-gads-tabs .mock-gads-tabs__inner { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 14px !important; }
.widget--mock.mock-gads-tabs .mock-gads-tabs__tab { padding: 12px 18px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 500 !important; color: #3c4043 !important; }
.widget--mock.mock-gads-tabs .mock-gads-tabs__tab--active { background: #1a73e8 !important; color: #FFFFFF !important; font-weight: 600 !important; }

/* mock-gads-menu */
.widget--mock.mock-gads-menu .mock-gads-menu__inner { padding: 0 !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__toolbar { display: flex !important; align-items: center !important; gap: 8px !important; padding: 12px 16px !important; border-bottom: 1px solid #E5E7EB !important; overflow-x: auto !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__tool { display: inline-flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; color: #5f6368 !important; font-size: 12px !important; font-weight: 500 !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__tool--active { color: #1a73e8 !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__ico { font-size: 16px !important; line-height: 1 !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__drop { display: flex !important; flex-direction: column !important; margin: 0 0 16px 150px !important; max-width: 280px !important; border: 1px solid #E2E5E9 !important; border-radius: 8px !important; box-shadow: 0 6px 18px rgba(60,64,67,0.18) !important; padding: 8px 0 !important; background: #FFFFFF !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__item { padding: 11px 18px !important; font-size: 14px !important; color: #202124 !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__item--hi { background: #E8EAED !important; font-weight: 500 !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__sep { height: 1px !important; background: #E5E7EB !important; margin: 6px 0 !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__label { padding: 6px 18px !important; font-size: 12px !important; color: #5f6368 !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__set { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 18px !important; font-size: 14px !important; color: #202124 !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__set--hi { background: #E8F0FE !important; color: #1967d2 !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__acts { display: inline-flex !important; align-items: center !important; gap: 14px !important; }
.widget--mock.mock-gads-menu .mock-gads-menu__pencil, .widget--mock.mock-gads-menu .mock-gads-menu__trash { color: #5f6368 !important; font-size: 14px !important; }

/* mock-gads-modify */
.widget--mock.mock-gads-modify .mock-gads-modify__inner { padding: 0 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__body { display: flex !important; align-items: stretch !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__left { flex: 1 1 auto !important; min-width: 0 !important; padding: 16px 18px !important; border-right: 1px solid #E5E7EB !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__search { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 4px !important; border-bottom: 1px solid #E5E7EB !important; margin-bottom: 6px !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__sico { color: #5f6368 !important; font-size: 15px !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__sval { color: #202124 !important; font-size: 15px !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__results { display: flex !important; flex-direction: column !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__res { padding: 11px 12px !important; font-size: 14px !important; color: #3c4043 !important; border-radius: 6px !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__res b { color: #202124 !important; font-weight: 700 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__res--sel { background: #E8EAED !important; box-shadow: inset 0 0 0 2px #1a73e8 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__right { flex: 0 0 246px !important; padding: 16px 16px !important; background: #FFFFFF !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__rhead { display: flex !important; flex-direction: column !important; gap: 2px !important; font-size: 15px !important; font-weight: 500 !important; color: #202124 !important; padding-bottom: 12px !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__rsub { font-size: 12px !important; font-weight: 400 !important; color: #5f6368 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__locked { display: flex !important; flex-direction: column !important; border-bottom: 1px solid #E5E7EB !important; padding-bottom: 8px !important; margin-bottom: 8px !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__cols { display: flex !important; flex-direction: column !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__col { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 4px !important; font-size: 14px !important; color: #3c4043 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__col b { color: #202124 !important; font-weight: 600 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__col--add { background: #E6F4EA !important; border-radius: 6px !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__lock, .widget--mock.mock-gads-modify .mock-gads-modify__grip { color: #80868b !important; font-size: 13px !important; flex-shrink: 0 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__x { margin-left: auto !important; color: #80868b !important; font-size: 12px !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap !important; padding: 14px 18px !important; border-top: 1px solid #E5E7EB !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__chk, .widget--mock.mock-gads-modify .mock-gads-modify__toggle { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 13px !important; color: #3c4043 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__box { width: 16px !important; height: 16px !important; border: 2px solid #80868b !important; border-radius: 3px !important; flex-shrink: 0 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__sw { position: relative !important; width: 32px !important; height: 14px !important; border-radius: 999px !important; background: #aecbfa !important; flex-shrink: 0 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__sw::after { content: "" !important; position: absolute !important; top: -3px !important; right: -2px !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: #1a73e8 !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__actions { display: flex !important; align-items: center !important; gap: 18px !important; padding: 12px 18px 16px !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__apply { background: #1a73e8 !important; color: #FFFFFF !important; font-weight: 600 !important; font-size: 14px !important; border-radius: 8px !important; padding: 9px 22px !important; }
.widget--mock.mock-gads-modify .mock-gads-modify__cancel { color: #1a73e8 !important; font-weight: 600 !important; font-size: 14px !important; }
@media (max-width: 460px) {
  .widget--mock.mock-gads-modify .mock-gads-modify__body { flex-direction: column !important; }
  .widget--mock.mock-gads-modify .mock-gads-modify__left { border-right: 0 !important; border-bottom: 1px solid #E5E7EB !important; }
  .widget--mock.mock-gads-modify .mock-gads-modify__right { flex-basis: auto !important; }
  .widget--mock.mock-gads-menu .mock-gads-menu__drop { margin-left: 16px !important; }
}

/* =========================================================================
   UTM Builder - saved conventions (Your conventions row, save/edit dialog,
   Manage popover, delete confirm). Royal-blue accent #2945E6 matches the
   dashboard's Save current / Save buttons.
   ========================================================================= */

/* ---- Saved conventions row (after saving): chip + Manage + Save current ---- */
.widget--mock.mock-tm-utm-conventions { max-width: 760px !important; }
.widget--mock.mock-tm-utm-conventions .mock-tm-utc__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; padding: 22px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-utm-conventions .mock-tm-utc__lab { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-utm-conventions .mock-tm-utc__row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; }
.widget--mock.mock-tm-utm-conventions .mock-tm-utc__chip { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 999px !important; padding: 7px 16px !important; font-size: 13px !important; font-weight: 600 !important; color: #1E293B !important; }
.widget--mock.mock-tm-utm-conventions .mock-tm-utc__manage { background: #F1F2F4 !important; border: 1px solid #E5E7EB !important; border-radius: 9px !important; padding: 9px 16px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #1E293B !important; }
.widget--mock.mock-tm-utm-conventions .mock-tm-utc__save { background: #2945E6 !important; border: 0 !important; border-radius: 9px !important; padding: 10px 18px !important; font-size: 14px !important; font-weight: 700 !important; color: #FFFFFF !important; }

/* ---- Save / Edit convention dialog ---- */
.widget--mock.mock-tm-utm-save { max-width: 480px !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; padding: 24px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35) !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__head { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__title { font-size: 18px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__x { font-size: 18px !important; color: #94A3B8 !important; line-height: 1 !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__field { display: flex !important; flex-direction: column !important; gap: 7px !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__label { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 14px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__req { color: #EF4444 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__i { font-style: normal !important; color: #CBD5E1 !important; font-size: 12px !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__input { display: block !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 9px !important; padding: 11px 14px !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__input--ph { color: #9CA3AF !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__foot { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; margin-top: 4px !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__cancel { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 9px !important; padding: 9px 18px !important; font-size: 14px !important; font-weight: 600 !important; color: #1E293B !important; }
.widget--mock.mock-tm-utm-save .mock-tm-uts__savebtn { background: #2945E6 !important; border: 0 !important; border-radius: 9px !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 700 !important; color: #FFFFFF !important; }

/* ---- Manage popover ---- */
.widget--mock.mock-tm-utm-manage { max-width: 760px !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__inner { position: relative !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; padding: 22px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__chip { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 999px !important; padding: 7px 16px !important; font-size: 13px !important; font-weight: 600 !important; color: #1E293B !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__manage { background: #F1F2F4 !important; border: 1px solid #E5E7EB !important; border-radius: 9px !important; padding: 9px 16px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #1E293B !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__savecur { background: #2945E6 !important; border: 0 !important; border-radius: 9px !important; padding: 10px 18px !important; font-size: 14px !important; font-weight: 700 !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__pop { width: 340px !important; max-width: 100% !important; margin-top: 10px !important; margin-left: 90px !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; box-shadow: 0 18px 44px -16px rgba(15, 23, 42, 0.32) !important; overflow: hidden !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__pophead { padding: 10px 14px !important; border-bottom: 1px solid #EEF0F3 !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__popitem { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 14px !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__grip { letter-spacing: -3px !important; font-size: 13px !important; color: #B6BDC8 !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__name { flex: 1 !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__edit { color: #2945E6 !important; font-size: 15px !important; }
.widget--mock.mock-tm-utm-manage .mock-tm-utm__del { color: #94A3B8 !important; font-size: 15px !important; }

/* ---- Delete confirm ---- */
.widget--mock.mock-tm-utm-delete { max-width: 460px !important; }
.widget--mock.mock-tm-utm-delete .mock-tm-utd__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; padding: 26px !important; display: flex !important; flex-direction: column !important; gap: 20px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35) !important; }
.widget--mock.mock-tm-utm-delete .mock-tm-utd__title { font-size: 18px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-utm-delete .mock-tm-utd__foot { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; }
.widget--mock.mock-tm-utm-delete .mock-tm-utd__cancel { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 9px !important; padding: 9px 18px !important; font-size: 14px !important; font-weight: 600 !important; color: #1E293B !important; }
.widget--mock.mock-tm-utm-delete .mock-tm-utd__delete { background: #EF4444 !important; border: 0 !important; border-radius: 9px !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 700 !important; color: #FFFFFF !important; }

/* =========================================================================
   UTM Builder - short links (Short link card + Create/Edit dialog).
   Branded short URLs on the verified tracking subdomain, redirecting under
   the /go/ path. Royal-blue accent #2945E6 matches the dashboard's
   Create short link / Save buttons.
   ========================================================================= */

/* ---- Create / Edit short link dialog ---- */
.widget--mock.mock-tm-utm-short-link-create { max-width: 480px !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; padding: 24px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35) !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__head { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__title { font-size: 18px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__x { font-size: 18px !important; color: #94A3B8 !important; line-height: 1 !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__field { display: flex !important; flex-direction: column !important; gap: 7px !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__label { font-size: 10px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__input { display: block !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 9px !important; padding: 11px 14px !important; font-size: 14px !important; color: #0F172A !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__input--ph { color: #9CA3AF !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__input--url { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #334155 !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__slug { display: flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__prefix { flex-shrink: 0 !important; font-size: 13px !important; color: #64748B !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__slug .mock-tm-uslc__input { flex: 1 1 auto !important; min-width: 0 !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__foot { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; margin-top: 4px !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__cancel { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 9px !important; padding: 9px 18px !important; font-size: 14px !important; font-weight: 600 !important; color: #1E293B !important; }
.widget--mock.mock-tm-utm-short-link-create .mock-tm-uslc__savebtn { background: #2945E6 !important; border: 0 !important; border-radius: 9px !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 700 !important; color: #FFFFFF !important; }

/* ---- Short link card with the saved-links list ---- */
.widget--mock.mock-tm-utm-short-links { max-width: 760px !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; padding: 22px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; color: #0F172A !important; font: 400 14px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__head { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__title { font-size: 15px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__sub { font-size: 13.5px !important; color: #64748B !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__bar { display: flex !important; align-items: center !important; gap: 12px !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__search { flex: 1 1 auto !important; min-width: 0 !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 9px !important; padding: 11px 14px !important; font-size: 14px !important; color: #9CA3AF !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__create { flex-shrink: 0 !important; background: #2945E6 !important; border: 0 !important; border-radius: 9px !important; padding: 10px 18px !important; font-size: 14px !important; font-weight: 700 !important; color: #FFFFFF !important; white-space: nowrap !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__item { display: flex !important; align-items: center !important; gap: 10px !important; border: 1px solid #EEF0F3 !important; border-radius: 10px !important; padding: 12px 14px !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__meta { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__name { font-size: 14px !important; font-weight: 700 !important; color: #0F172A !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__url { font-size: 12.5px !important; color: #64748B !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.widget--mock.mock-tm-utm-short-links .mock-tm-usll__act { flex-shrink: 0 !important; color: #64748B !important; font-size: 15px !important; width: 28px !important; text-align: center !important; }

/* ============================================================
   Paid Traffic & Engagement docs widget (2026-06-20)
   mock-tm-paid-traffic = the second card on the Platform Health page:
   three KPI cards (paid pageviews / unique paid visitors / pageviews per
   visitor) each vs the prior period, a paid-pageviews-per-month area chart,
   and a per-event "this period vs prior period" table with a Change column.
   Shares the platform-health visual language so the two cards read as siblings.
   ============================================================ */

.widget--mock.mock-tm-paid-traffic { max-width: 760px !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__inner { background: #F8FAFC !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 18px !important; color: #0F172A !important; font: 400 13px var(--font-family-base, system-ui) !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__topbar { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 14px !important; flex-wrap: wrap !important; margin-bottom: 16px !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__head { min-width: 0 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__title { margin: 0 0 4px !important; font-size: 18px !important; font-weight: 700 !important; color: #0F172A !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__sub { margin: 0 !important; color: #6B7280 !important; font-size: 12px !important; line-height: 1.5 !important; max-width: 430px !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__controls { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__date { display: inline-flex !important; align-items: center !important; gap: 7px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; padding: 6px 12px !important; color: #374151 !important; font-size: 12px !important; font-weight: 500 !important; background: #FFFFFF !important; white-space: nowrap !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__seg { display: inline-flex !important; gap: 2px !important; background: #EEF1F5 !important; border-radius: 8px !important; padding: 3px !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__segbtn { padding: 5px 11px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; color: #94A3B8 !important; white-space: nowrap !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__segbtn--active { background: #FFFFFF !important; color: #0F172A !important; box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__kpis { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__kpi { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 15px 17px !important; display: flex !important; flex-direction: column !important; gap: 7px !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__kpilabel { color: #6B7280 !important; font-size: 13px !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__kpival { color: #0F172A !important; font-size: 24px !important; font-weight: 700 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__kpidelta { font-size: 12px !important; font-weight: 700 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__kpidelta--up { color: #059669 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__kpidelta--down { color: #DC2626 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__kpiprev { color: #9CA3AF !important; font-weight: 400 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 16px !important; margin-bottom: 14px !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__card:last-child { margin-bottom: 0 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__cardh { margin: 0 0 3px !important; font-weight: 700 !important; font-size: 14px !important; color: #0F172A !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__cardsub { margin: 0 0 10px !important; color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__chart { width: 100% !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__chart svg { width: 100% !important; height: auto !important; display: block !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__grid line { stroke: #EEF1F5 !important; stroke-width: 1 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__ylabel text { fill: #9CA3AF !important; font-size: 10px !important; text-anchor: end !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__xlabel text { fill: #9CA3AF !important; font-size: 10px !important; text-anchor: middle !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__area { fill: rgba(59,70,214,0.15) !important; stroke: none !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__line { fill: none !important; stroke: #3b46d6 !important; stroke-width: 2 !important; stroke-linejoin: round !important; stroke-linecap: round !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__dot circle { fill: #3b46d6 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__card--table { padding: 16px 16px 6px !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__evtable { display: table !important; width: 100% !important; border-collapse: collapse !important; font-variant-numeric: tabular-nums !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__th { padding: 7px 10px !important; color: #64748B !important; font-size: 12px !important; font-weight: 700 !important; border-bottom: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__th--ev { text-align: left !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__th--grp { text-align: center !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__th--num { text-align: right !important; font-weight: 600 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__th--chg { text-align: right !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__th--grpl { border-left: 1px solid #EDF0F4 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__th--grpl2 { border-left: 2px solid #E5E7EB !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__td { padding: 9px 10px !important; font-size: 13px !important; color: #1E293B !important; border-bottom: 1px solid #F1F5F9 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__td--ev { text-align: left !important; font-weight: 600 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__td--num { text-align: right !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__td--grpl { border-left: 1px solid #F1F5F9 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__td--grpl2 { border-left: 2px solid #E5E7EB !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__td--up { color: #059669 !important; font-weight: 700 !important; }
.widget--mock.mock-tm-paid-traffic .mock-tm-pt__td--down { color: #DC2626 !important; font-weight: 700 !important; }

/* ============================================================
   Google Ads - conversion action goals redesign (Session 60)
   FB-mirrored flow: connect -> Add ad accounts (import popup)
   -> account card -> Add conversion action goal (popup) ->
   Create goal (staged) -> Save changes creates it in Google Ads.
   Widgets: tm-gads-accounts-empty, tm-gads-import-dialog,
   tm-gads-account (empty goals), tm-gads-goal-dialog,
   tm-gads-goal-pending.
   ============================================================ */

/* --- Shared-ish primitives reused across these widgets --- */
/* (each widget namespaces its own classes; values mirror the
   established gads/fb conventions: yellow logo #FBBF24, green
   connected pill, amber warn, orange focus glow, blue #2233FF.) */

/* ===== Widget A: tm-gads-accounts-empty (connected, no accounts) ===== */
.widget--mock.mock-tm-gads-accounts-empty { max-width: 900px !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__panel { border: 1px solid #E5E7EB !important; border-radius: 10px !important; background: #FFFFFF !important; overflow: hidden !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__panelhead { display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__panelicon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 8px !important; background: #FBBF24 !important; color: #FFFFFF !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__panelbody { flex: 1 !important; min-width: 0 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__paneltitle { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__statuspill { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 3px 10px !important; border-radius: 999px !important; background: #ECFDF5 !important; color: #047857 !important; border: 1px solid #A7F3D0 !important; font: 500 11px var(--font-family-base, system-ui) !important; justify-self: start !important; width: fit-content !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__panelsub { font-size: 13px !important; color: #6B7280 !important; margin: 4px 0 0 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__headbtns { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__rescan { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 7px 12px !important; border-radius: 6px !important; border: none !important; background: #2563EB !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__disconnect { padding: 7px 14px !important; border-radius: 6px !important; border: none !important; background: #DC2626 !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__important { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 0 16px 16px !important; padding: 12px 14px !important; border: 1px solid #FECACA !important; background: #FEF2F2 !important; border-radius: 8px !important; color: #991B1B !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__importanticon { flex: 0 0 16px !important; margin-top: 2px !important; color: #DC2626 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__important p { margin: 0 !important; font-size: 13px !important; color: #991B1B !important; line-height: 1.55 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__importantlink { font-weight: 600 !important; text-decoration: underline !important; white-space: nowrap !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__section { padding: 0 16px 18px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__label { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__empty { margin: 0 !important; font-size: 13px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__add { align-self: flex-start !important; width: fit-content !important; padding: 9px 16px !important; border-radius: 6px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__warn { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border: 1px solid #FCD34D !important; background: #FFFBEB !important; border-radius: 8px !important; color: #92400E !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__warnicon { flex: 0 0 16px !important; margin-top: 2px !important; color: #B45309 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__warntitle { margin: 0 !important; font-size: 13px !important; color: #92400E !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__warntitle strong { color: #78350F !important; font-weight: 700 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__warnbody { margin: 2px 0 0 !important; font-size: 13px !important; color: #92400E !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__rule { border: 0 !important; border-top: 1px solid #E5E7EB !important; margin: 0 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 14px 16px !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__links { display: inline-flex !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__links a { font-size: 13px !important; color: #2563EB !important; text-decoration: none !important; font-weight: 500 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__footbtns { display: inline-flex !important; align-items: center !important; gap: 14px !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__cancel { font-size: 13px !important; color: #374151 !important; }
.widget--mock.mock-tm-gads-accounts-empty .mock-tm-gads-accounts-empty__save { padding: 9px 16px !important; border-radius: 6px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }

/* ===== Widget B: tm-gads-import-dialog (Add ad accounts popup) ===== */
.widget--mock.mock-tm-gads-import-dialog { max-width: 500px !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__inner { background: #FFFFFF !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.25) !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; padding: 18px 20px 12px !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__title { margin: 0 !important; font: 700 17px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__sub { margin: 4px 0 0 !important; font-size: 13px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__x { color: #9CA3AF !important; display: inline-flex !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__search { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 20px 12px !important; padding: 9px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__searchicon { color: #9CA3AF !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__searchph { font-size: 13px !important; color: #9CA3AF !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__bar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 20px !important; font-size: 12px !important; color: #6B7280 !important; border-top: 1px solid #E5E7EB !important; border-bottom: 1px solid #E5E7EB !important; background: #F9FAFB !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__clear { color: #2563EB !important; font-weight: 600 !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__list { padding: 4px 0 !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__opt { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 20px !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__opt--locked { opacity: 0.6 !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__check { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 19px !important; height: 19px !important; border-radius: 6px !important; border: 1px solid #D1D5DB !important; background: #FFFFFF !important; color: transparent !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__check--on { background: #0F0F0F !important; border-color: #0F0F0F !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__check--locked { background: #9CA3AF !important; border-color: #9CA3AF !important; color: #FFFFFF !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__optbody { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__optname { font-size: 13px !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__optid { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #6B7280 !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__lockedtag { display: inline-flex !important; align-items: center !important; gap: 4px !important; font: 600 11px var(--font-family-base, system-ui) !important; color: #059669 !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__foot { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 20px !important; border-top: 1px solid #E5E7EB !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__avail { font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__footbtns { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__cancel { padding: 8px 14px !important; border-radius: 6px !important; border: 1px solid #D1D5DB !important; background: #FFFFFF !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-import-dialog .mock-tm-gads-import-dialog__import { padding: 8px 14px !important; border-radius: 6px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }

/* ===== Widget C: tm-gads-account (imported account, empty goals) ===== */
.widget--mock.mock-tm-gads-account { max-width: 760px !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__card { border: 1px solid #E5E7EB !important; border-radius: 12px !important; background: #FFFFFF !important; overflow: hidden !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__cardhead { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 16px 18px !important; border-bottom: 1px solid #E5E7EB !important; background: #FAFAFA !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__cardhl { min-width: 0 !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__custname { margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__custid { margin: 2px 0 0 !important; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #6B7280 !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__remove { padding: 7px 14px !important; border-radius: 6px !important; border: none !important; background: #DC2626 !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__body { padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__sectionlabel { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__sectionsub { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__emptystate { margin: 0 !important; border: 1px dashed #D1D5DB !important; border-radius: 8px !important; padding: 18px !important; text-align: center !important; font-size: 13px !important; color: #6B7280 !important; background: #FAFAFA !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__actions { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__add { padding: 9px 16px !important; border-radius: 6px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__add--focus { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-gads-account .mock-tm-gads-account__refresh { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 9px 14px !important; border-radius: 6px !important; border: 1px solid #FCD34D !important; background: #FFFBEB !important; color: #92400E !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }

/* ===== Widget D: tm-gads-goal-dialog (Add conversion action goal popup) ===== */
.widget--mock.mock-tm-gads-goal-dialog { max-width: 540px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__inner { padding: 20px 22px 18px !important; background: #FFFFFF !important; border-radius: 12px !important; box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.25) !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__title { margin: 0 !important; font: 700 17px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__sub { margin: 4px 0 0 !important; font-size: 13px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__x { color: #9CA3AF !important; display: inline-flex !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__flabelrow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__flabel { font: 700 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__select { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 13px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; color: #0F0F0F !important; font: 500 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__select--focus { border: 2px solid #111827 !important; padding: 9px 12px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__hint { margin: 0 !important; font-size: 12px !important; color: #6B7280 !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__hintevent { color: #16A34A !important; font-weight: 600 !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__input { padding: 10px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; font-size: 13px !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__input--placeholder { color: #9CA3AF !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__seeguide { font: 600 12px var(--font-family-base, system-ui) !important; color: #2563EB !important; text-decoration: underline !important; white-space: nowrap !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__product { border: 1px solid #E0E4FF !important; background: #F8F9FF !important; border-radius: 10px !important; padding: 12px 14px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__prodhead { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__prodheadleft { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__prodtitle { font: 700 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__badge { font: 700 10px var(--font-family-base, system-ui) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; border-radius: 999px !important; padding: 2px 8px !important; background: #E0E7FF !important; color: #4338CA !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__prodsub { margin: 6px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__prodsubred { color: #DC2626 !important; font-weight: 600 !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__prodgrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 10px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__sublabel { display: block !important; font-size: 11px !important; color: #6B7280 !important; margin-bottom: 4px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__foot { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__cancel { padding: 8px 14px !important; border-radius: 6px !important; border: 1px solid #D1D5DB !important; background: #FFFFFF !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-goal-dialog .mock-tm-gads-goal-dialog__create { padding: 8px 16px !important; border-radius: 6px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }

/* ===== Widget E: tm-gads-goal-pending (staged goal + Save changes) ===== */
.widget--mock.mock-tm-gads-goal-pending { max-width: 760px !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__card { border: 1px solid #E5E7EB !important; border-radius: 12px !important; background: #FFFFFF !important; overflow: hidden !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__cardhead { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 16px 18px !important; border-bottom: 1px solid #E5E7EB !important; background: #FAFAFA !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__cardhl { min-width: 0 !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__custname { margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__custid { margin: 2px 0 0 !important; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #6B7280 !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__remove { padding: 7px 14px !important; border-radius: 6px !important; border: none !important; background: #DC2626 !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__body { padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__sectionlabel { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__sectionsub { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__goal { display: flex !important; align-items: flex-start !important; gap: 12px !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; padding: 12px 14px !important; background: #FFFFFF !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__pill { font: 700 11px var(--font-family-base, system-ui) !important; border-radius: 6px !important; padding: 3px 9px !important; background: #EEF0FF !important; color: #2945E6 !important; flex: 0 0 auto !important; white-space: nowrap !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__goalmain { flex: 1 1 auto !important; min-width: 0 !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__goalname { margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__meta { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 5px !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__chip { font: 500 12px var(--font-family-base, system-ui) !important; background: #F3F4F6 !important; border: 1px solid #E5E7EB !important; border-radius: 5px !important; padding: 1px 7px !important; color: #374151 !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__pendingtag { font: 600 12px var(--font-family-base, system-ui) !important; color: #2563EB !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__goalactions { display: inline-flex !important; align-items: center !important; gap: 6px !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__iconbtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 6px !important; border: 1px solid #E5E7EB !important; background: #FFFFFF !important; color: #6B7280 !important; cursor: default !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__trash { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 6px !important; border: 1px solid #DC2626 !important; background: #DC2626 !important; color: #FFFFFF !important; cursor: default !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__actions { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__add { padding: 9px 16px !important; border-radius: 6px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__refresh { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 9px 14px !important; border-radius: 6px !important; border: 1px solid #FCD34D !important; background: #FFFBEB !important; color: #92400E !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__rule { border: 0 !important; border-top: 1px solid #E5E7EB !important; margin: 18px 0 0 !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 14px 0 0 !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__links { display: inline-flex !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__links a { font-size: 13px !important; color: #2563EB !important; text-decoration: none !important; font-weight: 500 !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__footbtns { display: inline-flex !important; align-items: center !important; gap: 14px !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__cancel { font-size: 13px !important; color: #374151 !important; }
.widget--mock.mock-tm-gads-goal-pending .mock-tm-gads-goal-pending__save { padding: 9px 16px !important; border-radius: 6px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }

/* ============================================================
   Google Ads - remove / recreate a goal (Session 60 follow-up)
   Widgets: gads-goal-kebab-menu (Google Ads three-dots menu),
   tm-gads-goal-notfound (amber "Not found" goal + Recreate),
   tm-gads-confirm (shared confirm-dialog body for the recreate
   + remove-goal dialogs). Reuses gads-remove-confirm-dialog.
   ============================================================ */

/* ===== gads-goal-kebab-menu (Google Ads Goals > Summary, kebab open) ===== */
.widget--mock.mock-gads-kebab { max-width: 760px !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__inner { background: #FFFFFF !important; border: 1px solid #DADCE0 !important; border-radius: 10px !important; overflow: hidden !important; font-family: "Google Sans", var(--font-family-base, system-ui) !important; color: #202124 !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__head { display: flex !important; align-items: center !important; gap: 20px !important; padding: 14px 18px !important; border-bottom: 1px solid #E8EAED !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__headleft { flex: 0 0 auto !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__defaultbadge { display: inline-block !important; background: #F1F3F4 !important; color: #5F6368 !important; font-size: 11px !important; padding: 2px 8px !important; border-radius: 4px !important; margin-bottom: 6px !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__title { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; font-size: 18px !important; font-weight: 500 !important; color: #202124 !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__cardicon { display: inline-flex !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__headmid { flex: 0 0 auto !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__metaheading { margin: 0 0 4px !important; font-size: 12px !important; color: #5F6368 !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__metavalue { margin: 0 !important; font-size: 14px !important; color: #202124 !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__underline { text-decoration: underline dotted !important; text-underline-offset: 3px !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__headright { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 14px !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__editlink { color: #1A73E8 !important; font-size: 14px !important; text-decoration: none !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__chev { color: #5F6368 !important; font-size: 12px !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__tablewrap { position: relative !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__table { width: 100% !important; border-collapse: collapse !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__th { text-align: left !important; padding: 10px 16px !important; font-size: 12px !important; font-weight: 500 !important; color: #5F6368 !important; border-bottom: 1px solid #E8EAED !important; white-space: nowrap !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__td { padding: 12px 16px !important; font-size: 13px !important; color: #202124 !important; border-bottom: 1px solid #F1F3F4 !important; vertical-align: middle !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__tr--active { background: #F8F9FA !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__tr--active .mock-gads-kebab__td:nth-child(2) { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__cell-check { display: inline-block !important; width: 16px !important; height: 16px !important; border: 2px solid #9AA0A6 !important; border-radius: 2px !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__link { color: #1A73E8 !important; text-decoration: none !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__dots { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 999px !important; background: #E8F0FE !important; flex: 0 0 auto !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__menu { position: absolute !important; top: 60px !important; left: 200px !important; min-width: 280px !important; background: #FFFFFF !important; border-radius: 8px !important; box-shadow: 0 2px 6px 2px rgba(60,64,67,0.15), 0 1px 2px rgba(60,64,67,0.3) !important; padding: 8px 0 !important; z-index: 2 !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__menuitem { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 11px 18px !important; font-size: 14px !important; color: #202124 !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__menuitem--focus { background: #E8F0FE !important; color: #1A73E8 !important; box-shadow: inset 3px 0 0 #1A73E8 !important; }
.widget--mock.mock-gads-kebab .mock-gads-kebab__menuarrow { color: #5F6368 !important; font-size: 18px !important; }

/* ===== tm-gads-goal-notfound (amber "Not found" goal + Recreate) ===== */
.widget--mock.mock-tm-gads-notfound { max-width: 760px !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__inner { padding: 20px 22px 22px !important; background: #FFFFFF !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__card { border: 1px solid #E5E7EB !important; border-radius: 12px !important; background: #FFFFFF !important; overflow: hidden !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__cardhead { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 16px 18px !important; border-bottom: 1px solid #E5E7EB !important; background: #FAFAFA !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__cardhl { min-width: 0 !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__custname { margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__custid { margin: 2px 0 0 !important; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #6B7280 !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__remove { padding: 7px 14px !important; border-radius: 6px !important; border: none !important; background: #DC2626 !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__body { padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__sectionlabel { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__sectionsub { margin: 2px 0 0 !important; font-size: 12px !important; color: #6B7280 !important; line-height: 1.5 !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__goal { display: flex !important; align-items: flex-start !important; gap: 12px !important; border: 1px solid #FCD34D !important; border-radius: 10px !important; padding: 12px 14px !important; background: #FFFBEB !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__pill { font: 700 11px var(--font-family-base, system-ui) !important; border-radius: 6px !important; padding: 3px 9px !important; background: #FEF3C7 !important; color: #B45309 !important; flex: 0 0 auto !important; white-space: nowrap !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__goalmain { flex: 1 1 auto !important; min-width: 0 !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__goalname { margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__meta { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 5px !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__chip { font: 500 12px var(--font-family-base, system-ui) !important; background: #FFFFFF !important; border: 1px solid #FDE68A !important; border-radius: 5px !important; padding: 1px 7px !important; color: #92400E !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__pausedtag { display: inline-flex !important; align-items: center !important; gap: 5px !important; font: 700 12px var(--font-family-base, system-ui) !important; color: #B45309 !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__goalactions { display: inline-flex !important; align-items: center !important; gap: 6px !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__recreate { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 7px 12px !important; border-radius: 6px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__trash { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 6px !important; border: 1px solid #DC2626 !important; background: #DC2626 !important; color: #FFFFFF !important; cursor: default !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__actions { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__add { padding: 9px 16px !important; border-radius: 6px !important; border: none !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }
.widget--mock.mock-tm-gads-notfound .mock-tm-gads-notfound__refresh { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 9px 14px !important; border-radius: 6px !important; border: 1px solid #FCD34D !important; background: #FFFBEB !important; color: #92400E !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }

/* ===== tm-gads-confirm (shared body for recreate + remove-goal dialogs) ===== */
.widget--mock.mock-tm-gads-confirm { max-width: 480px !important; }
.widget--mock.mock-tm-gads-confirm .mock-tm-gads-confirm__inner { padding: 22px 24px 20px !important; background: #FFFFFF !important; border-radius: 12px !important; box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.25) !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-confirm .mock-tm-gads-confirm__title { margin: 0 0 10px !important; font: 700 18px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-confirm .mock-tm-gads-confirm__body { margin: 0 !important; font-size: 14px !important; color: #4B5563 !important; line-height: 1.6 !important; }
.widget--mock.mock-tm-gads-confirm .mock-tm-gads-confirm__foot { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; margin-top: 20px !important; }
.widget--mock.mock-tm-gads-confirm .mock-tm-gads-confirm__cancel { padding: 9px 16px !important; border-radius: 6px !important; border: 1px solid #D1D5DB !important; background: #FFFFFF !important; font: 500 13px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-gads-confirm .mock-tm-gads-confirm__confirm { padding: 9px 18px !important; border-radius: 6px !important; border: none !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 8px 16px -8px rgba(249, 115, 22, 0.5) !important; }
.widget--mock.mock-tm-gads-confirm .mock-tm-gads-confirm__confirm--blue { background: #2233FF !important; }
.widget--mock.mock-tm-gads-confirm .mock-tm-gads-confirm__confirm--red { background: #DC2626 !important; }

/* ===== GoHighLevel custom events (Session: forms & calendars) ===== */
/* Install card: two action buttons in a row + new accordion (reuses .mock-tm-ghl-install__accordion / __guide) */
.widget--mock.mock-tm-ghl-install .mock-tm-ghl-install__btnrow { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }

/* Expanded "fire custom events" accordion */
.widget--mock.mock-tm-ghl-custom-events { max-width: 760px !important; }
.widget--mock.mock-tm-ghl-custom-events .mock-tm-ghl-custom-events__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; font-family: var(--font-family-base, system-ui) !important; color: #0F0F0F !important; overflow: hidden !important; }
.widget--mock.mock-tm-ghl-custom-events .mock-tm-ghl-custom-events__head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 14px 18px !important; background: #FAFBFC !important; border-bottom: 1px solid #EEF0F2 !important; }
.widget--mock.mock-tm-ghl-custom-events .mock-tm-ghl-custom-events__title { font: 600 14px var(--font-family-base, system-ui) !important; color: #0F0F0F !important; }
.widget--mock.mock-tm-ghl-custom-events .mock-tm-ghl-custom-events__chev { color: #6B7280 !important; flex: 0 0 auto !important; }
.widget--mock.mock-tm-ghl-custom-events .mock-tm-ghl-custom-events__body { padding: 16px 18px 18px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; align-items: flex-start !important; }
.widget--mock.mock-tm-ghl-custom-events .mock-tm-ghl-custom-events__desc { margin: 0 !important; font-size: 13.5px !important; color: #4B5563 !important; line-height: 1.6 !important; }
.widget--mock.mock-tm-ghl-custom-events .mock-tm-ghl-custom-events__create { padding: 8px 18px !important; border: none !important; border-radius: 8px !important; background: #2233FF !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; }

/* Create custom event popup (GHL): reuses .mock-tm-fb-custom-mapping-dialog; only the warn span is new */
.widget--mock.mock-tm-fb-custom-mapping-dialog .mock-tm-fb-custom-mapping-dialog__warn { color: #DC2626 !important; font-weight: 600 !important; }

/* Saved FB custom event card (GHL): reuses .mock-tm-fb-custom-mapping-filled; GoHighLevel badge + source line are new */
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__ghlbadge { font: 600 12px var(--font-family-base, system-ui) !important; border-radius: 6px !important; padding: 2px 8px !important; background: #E0E7FF !important; color: #3730A3 !important; }
.widget--mock.mock-tm-fb-custom-mapping-filled .mock-tm-fb-custom-mapping-filled__srcline { flex: 0 0 100% !important; margin-top: 3px !important; font: 500 12px var(--font-family-base, system-ui) !important; color: #3949C9 !important; }

/* GoHighLevel form editor - where the form name lives */
.widget--mock.mock-ghl-form-name { max-width: 720px !important; }
.widget--mock.mock-ghl-form-name .mock-ghl-form-name__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; font-family: var(--font-family-base, system-ui) !important; color: #1F2937 !important; overflow: hidden !important; }
.widget--mock.mock-ghl-form-name .mock-ghl-form-name__bar { display: flex !important; align-items: center !important; gap: 18px !important; padding: 14px 18px !important; }
.widget--mock.mock-ghl-form-name .mock-ghl-form-name__back { font: 500 13px var(--font-family-base, system-ui) !important; color: #6B7280 !important; flex: 0 0 auto !important; }
.widget--mock.mock-ghl-form-name .mock-ghl-form-name__title { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 4px 10px !important; border-radius: 8px !important; background: #FFF7ED !important; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.45) !important; flex: 0 0 auto !important; }
.widget--mock.mock-ghl-form-name .mock-ghl-form-name__name { font: 700 15px var(--font-family-base, system-ui) !important; color: #111827 !important; }
.widget--mock.mock-ghl-form-name .mock-ghl-form-name__pencil { color: #6B7280 !important; font-size: 12px !important; }
.widget--mock.mock-ghl-form-name .mock-ghl-form-name__tabs { display: inline-flex !important; align-items: center !important; gap: 16px !important; margin-left: auto !important; flex-wrap: wrap !important; }
.widget--mock.mock-ghl-form-name .mock-ghl-form-name__tab { font: 600 13px var(--font-family-base, system-ui) !important; color: #6B7280 !important; }
.widget--mock.mock-ghl-form-name .mock-ghl-form-name__tab--active { color: #2563EB !important; }

/* GoHighLevel calendar settings - where the calendar name lives */
.widget--mock.mock-ghl-calendar-name { max-width: 720px !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__inner { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; font-family: var(--font-family-base, system-ui) !important; color: #1F2937 !important; overflow: hidden !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__bar { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 18px !important; border-bottom: 1px solid #EEF0F2 !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__back { font: 500 13px var(--font-family-base, system-ui) !important; color: #6B7280 !important; flex: 0 0 auto !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__crumb { font: 700 14px var(--font-family-base, system-ui) !important; color: #111827 !important; margin: 0 auto !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__save { padding: 8px 16px !important; border: none !important; border-radius: 8px !important; background: #2563EB !important; color: #FFFFFF !important; font: 600 13px var(--font-family-base, system-ui) !important; cursor: default !important; flex: 0 0 auto !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__panel { padding: 18px !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__sectiontitle { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 14px !important; font: 600 14px var(--font-family-base, system-ui) !important; color: #111827 !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__id { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #9CA3AF !important; font-weight: 400 !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__flabel { display: block !important; font: 600 13px var(--font-family-base, system-ui) !important; color: #374151 !important; margin-bottom: 6px !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__info { color: #9CA3AF !important; font-weight: 400 !important; }
.widget--mock.mock-ghl-calendar-name .mock-ghl-calendar-name__field { padding: 10px 12px !important; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #FFFFFF !important; font: 500 14px var(--font-family-base, system-ui) !important; color: #111827 !important; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.45) !important; }

/* --- Combined CNAME mapping widget: TM modal -> provider Add-record, with arrows --- */
/* Two REAL mocks stacked with an SVG arrow layer between them. The OUTER figure
   owns the mobile scaling; docs-mockfit skips the nested .widget--mock panels. */
.widget--mock.mock-cname-map {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-width: 660px !important;
  margin: var(--space-5) auto !important;
}
.widget--mock.mock-cname-map .mock-cname-map__inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 96px !important;
  padding: 6px 6px 2px !important;
}
/* nested real mocks: drop the centering margin, keep each panel's own card chrome */
.widget--mock.mock-cname-map .widget--mock { margin: 0 !important; }
.widget--mock.mock-cname-map .mock-cname-map__tm { width: 600px !important; max-width: 600px !important; }
.widget--mock.mock-cname-map .mock-cname-map__dns { width: 600px !important; max-width: 600px !important; }

/* Cloudflare Add-record rearranged so Name + Target sit side by side (parallel arrows) */
.widget--mock.mock-cname-map .mock-cf-add__row--type { grid-template-columns: 240px !important; }
.widget--mock.mock-cname-map .mock-cf-add__row--fields { grid-template-columns: 1fr 1fr !important; }
.widget--mock.mock-cname-map .mock-cf-add__row--opts { grid-template-columns: 1fr 120px !important; }

/* Arrow overlay (1 user unit = 1 CSS px; no viewBox, so coords map straight to layout px) */
.widget--mock.mock-cname-map .mock-cname-map__arrows {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 6 !important;
}
.widget--mock.mock-cname-map .mock-cname-map__arrow {
  stroke: #F26B3A !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}
.widget--mock.mock-cname-map .widget__caption { border-top: none !important; background: transparent !important; margin-top: 8px !important; }