:root {
  --bg: #f4f5fa;
  --surface: #ffffff;
  --border: #e6e8f0;
  --border-strong: #d6d9e6;
  --text: #16192b;
  --muted: #667085;
  --accent: #0e9f6e;
  --accent-soft: #e6f7f0;
  --accent-strong: #0b7d57;
  --green: #158a52;
  --green-soft: #e5f6ee;
  --amber: #b45309;
  --amber-soft: #fdf1df;
  --red: #c2323e;
  --red-soft: #fdeaec;
  --blue: #175cd3;
  --blue-soft: #eaf1fd;
  --sidebar-bg: #12141f;
  --sidebar-text: #9aa0b4;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
a { color: var(--accent); text-decoration: none; }
code { font-family: var(--mono); font-size: 12.5px; background: var(--accent-soft); color: var(--accent-strong); border-radius: 6px; padding: 2px 7px; }

.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 236px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, #34d399, #0e9f6e);
  color: #fff; display: grid; place-items: center; font-size: 15px;
}
.brand span { font-weight: 800; font-size: 17px; letter-spacing: .2px; color: #fff; }
.brand span b { color: #6ee7b7; }
.store-switcher {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 18px;
}
.store-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); flex-shrink: 0; }
.store-switcher strong { display: block; color: #fff; font-size: 13px; line-height: 1.25; }
.store-switcher small { font-size: 11px; opacity: .65; word-break: break-all; }

.nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; margin: 16px 10px 6px; opacity: .55; font-weight: 700; }
nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--sidebar-text); font-weight: 600; font-size: 13.5px;
  transition: background .15s, color .15s;
}
.nav-item i {
  font-style: normal; width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 8px;
  background: rgba(255,255,255,.06); font-size: 13px;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(16, 185, 129, .28), rgba(16, 185, 129, .12)); }
.nav-item.active i { background: var(--accent); color: #fff; }
.sidebar-foot { margin-top: auto; padding: 14px 10px 2px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11.5px; opacity: .6; }

/* ---------- Main ---------- */
.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 30px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.breadcrumbs { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.breadcrumbs strong { color: var(--text); font-size: 15px; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.view { padding: 26px 30px 60px; max-width: 1160px; width: 100%; margin: 0 auto; }

/* ---------- Hero ---------- */
.hero { margin-bottom: 22px; }
.hero .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; color: var(--accent); margin: 0 0 4px; }
.hero h1 { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.hero p { margin: 0; color: var(--muted); }

/* ---------- Panels & grids ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 18px;
}
.panel h2 { margin: 0 0 6px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.panel h3 { margin: 0 0 4px; font-size: 14px; font-weight: 800; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.grid-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
}
.stat-card .label { display: block; font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.stat-card strong { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.stat-foot { margin-top: 4px; font-size: 12px; color: var(--muted); }
.stat-accent strong { color: var(--accent); }

/* ---------- Badges & chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap;
  background: #eef0f5; color: var(--muted);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--green-soft); color: var(--green); }
.badge.info { background: var(--blue-soft); color: var(--blue); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.danger { background: var(--red-soft); color: var(--red); }
.badge.accent { background: var(--accent-soft); color: var(--accent-strong); }
.chip {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px;
  background: #f1f2f7; border: 1px solid var(--border); border-radius: 7px; color: var(--muted);
}

/* ---------- Tables / rows ---------- */
.trow {
  display: grid; gap: 14px; align-items: center;
  padding: 13px 6px; border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.trow:first-of-type { border-top: 0; }
.trow > div { min-width: 0; }
.trow strong { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .num { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.thead {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  font-weight: 800; padding: 0 6px 8px;
  /* Same gap as .trow: without it the header tracks are wider than the row
     tracks, so every label sits above the wrong column and they touch. */
  gap: 14px;
}
.thead > span { min-width: 0; white-space: nowrap; }

/* ---------- Buttons ---------- */
button, .btn, a.primary {
  font-family: var(--font); font-size: 13px; font-weight: 700;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  padding: 8px 15px; cursor: pointer; transition: filter .15s, background .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.primary:hover { background: var(--accent-strong); }
.primary, a.primary, button.primary {
  background: var(--accent); color: #fff; text-decoration: none;
  box-shadow: 0 1px 2px rgba(14, 159, 110, .35);
}
.secondary, button.secondary {
  background: var(--surface); color: var(--text);
  border-color: var(--border-strong);
}
.secondary:hover { background: #f6f7fb; }
.danger-btn { background: var(--red-soft); color: var(--red); }
.ghost { background: transparent; color: var(--muted); }
.ghost:hover { color: var(--text); background: #f1f2f7; }
button:disabled { opacity: .55; cursor: not-allowed; }
.is-busy { opacity: .6; pointer-events: none; }

/* ---------- Tabs (settings / preview) ---------- */
.tab-row { display: flex; gap: 4px; background: #f1f2f7; padding: 4px; border-radius: 11px; margin-bottom: 18px; width: max-content; }
.tab-btn { border: 0; background: transparent; padding: 8px 18px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { background: #fff; color: var(--text); box-shadow: var(--shadow); }

/* ---------- Forms ---------- */
label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 13px; }
input, select, textarea {
  width: 100%; margin-top: 5px; font-family: var(--font); font-size: 13.5px;
  color: var(--text); background: #fbfbfe;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px 12px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(84,87,214,.14); background: #fff; }
textarea { resize: vertical; min-height: 74px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
/* Multi-trigger toggle grid (opt-in prompt editor). Scoped so the global
   label/input rules (display:block, width:100%) don't crush it. */
.pe-trigger-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px 12px; margin: 2px 0 2px; }
.pe-trigger-option {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.35;
  background: #fbfbfe; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px 12px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.pe-trigger-option:hover { border-color: var(--accent); }
.pe-trigger-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pe-trigger-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pe-trigger-option .switch.sm { margin: 0; }
.pe-trigger-option .pe-trigger-label { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.form-actions span { font-size: 12.5px; color: var(--muted); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input, .toolbar select { width: auto; margin-top: 0; min-width: 170px; }

/* ---------- Charts ---------- */
.bar-track { height: 8px; background: #edeff5; border-radius: 999px; overflow: hidden; display: flex; }
.bar-track .bar-sent { background: linear-gradient(90deg, #34c98e, #158a52); height: 100%; }
.bar-track .bar-failed { background: var(--red); height: 100%; }
.donut {
  --value: 0;
  width: 118px; height: 118px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--value) * 1%), #e9eaf2 0);
  display: grid; place-items: center; margin: 0 auto;
}
.donut::after {
  content: attr(data-label);
  width: 86px; height: 86px; border-radius: 50%;
  background: var(--surface); display: grid; place-items: center;
  font-size: 19px; font-weight: 800;
}
.legend { display: flex; gap: 16px; justify-content: center; margin-top: 12px; font-size: 12px; color: var(--muted); font-weight: 600; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }

/* ---------- Activity feed ---------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; align-items: baseline; padding: 9px 2px; border-top: 1px solid var(--border); font-size: 13px; }
.feed li:first-child { border-top: 0; }
.feed time { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.queue-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.queue-chips .chip b { color: var(--text); }

/* ---------- Empty / banners ---------- */
.empty-state { text-align: center; color: var(--muted); padding: 38px 20px; }
.empty-state::before { content: '◎'; display: block; font-size: 26px; margin-bottom: 10px; opacity: .5; }
.banner { border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; font-size: 13.5px; border: 1px solid; }
.banner.warn { background: var(--amber-soft); border-color: #f3ddb8; color: var(--amber); }
.banner.error { background: var(--red-soft); border-color: #f6c6cb; color: var(--red); }
.banner.ok { background: var(--green-soft); border-color: #bfe8d4; color: var(--green); }
.banner.info { background: var(--blue-soft); border-color: #c7d7f8; color: var(--blue); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 17, 32, .48);
  backdrop-filter: blur(2px); z-index: 90;
  display: grid; place-items: center; padding: 20px;
}
.modal {
  background: var(--surface); border-radius: var(--radius);
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(15, 17, 32, .3);
  animation: pop .16s ease-out;
}
@keyframes pop { from { transform: translateY(8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.modal-close { background: #f1f2f7; border: 0; border-radius: 8px; width: 30px; height: 30px; font-size: 14px; color: var(--muted); cursor: pointer; display: grid; place-items: center; line-height: 1; padding: 0; flex-shrink: 0; }
.modal-close:hover { color: var(--text); background: #e6e8f0; }
.modal-body { padding: 16px 22px 22px; }

/* ---------- Notification preview ---------- */
.push-preview {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fbfbfe; padding: 12px 14px; margin-bottom: 14px;
  display: flex; gap: 11px; align-items: flex-start;
}
.push-preview .pp-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #34d399, #0e9f6e); display: grid; place-items: center; color: #fff; font-size: 13px; }
.push-preview strong { display: block; font-size: 13px; }
.push-preview p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }
.push-preview small { font-size: 11px; color: #98a2b3; }

/* ---------- Flow (automations) ---------- */
.flow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 8px 0 2px; }
.flow span { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 7px; background: #f1f2f7; color: var(--muted); }
.flow em { color: #c3c8d6; font-style: normal; font-weight: 800; }

/* ---------- Switch (funnel collection) ---------- */
.switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; display: inline-block; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.switch span { position: absolute; inset: 0; background: #d8dbe6; border-radius: 999px; transition: background .15s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.3); transition: left .15s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { left: 19px; }

.switch.sm { width: 32px; height: 19px; }
.switch.sm span::after { width: 13px; height: 13px; top: 3px; left: 3px; }
.switch.sm input:checked + span::after { left: 16px; }

/* ---------- Device previews ---------- */
.device-previews { display: flex; gap: 18px; flex-wrap: wrap; align-items: stretch; }
.device-col { display: flex; flex-direction: column; gap: 6px; }
.device-label { font-size: 11px; font-weight: 800; letter-spacing: .09em; color: var(--muted); }
.device-frame { background: #fff; border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.device-chrome { display: flex; align-items: center; gap: 5px; padding: 8px 11px; background: #f1f2f7; border-bottom: 1px solid var(--border); }
.device-dot { width: 8px; height: 8px; border-radius: 50%; background: #cfd3e0; }
.device-url { flex: 1; margin-left: 8px; background: #fff; border-radius: 999px; font-size: 10.5px; color: var(--muted); padding: 3px 12px; text-align: center; }
.viewport { position: relative; height: 270px; width: 420px; max-width: 100%; background: linear-gradient(180deg, #fbfbfe, #edeff6); }
.phone-shell { width: 391px; max-width: 100%; border-radius: 34px; border: 1px solid var(--border-strong); padding: 7px; background: #fff; box-shadow: var(--shadow); }
.phone-notch { width: 80px; height: 5px; border-radius: 999px; background: #dfe2ec; margin: 3px auto 6px; }
.phone-screen { position: relative; width: 375px; height: 520px; border-radius: 26px; background: linear-gradient(180deg, #fbfbfe, #edeff6); overflow: hidden; }
.pp-stage { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.pp-stage .pp-prompt { position: absolute; transition: none; }
.mock-bell { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; }

/* ---------- Notification mockups (mobile + desktop) ---------- */
.notif-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; align-items: start; }
.notif-pair > div { min-width: 0; }
.notif-mobile { background: #fff; border: 1px solid var(--border-strong); border-radius: 14px; padding: 11px 13px; box-shadow: var(--shadow); }
.notif-desktop { background: #fff; border: 1px solid var(--border-strong); border-top: 3px solid var(--accent, #0e9f6e); border-radius: 11px; padding: 12px 14px; box-shadow: var(--shadow); }
.notif-row { display: flex; gap: 9px; align-items: flex-start; }
.notif-text { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.notif-title { font-weight: 800; font-size: 12.5px; line-height: 1.3; }
.notif-body { color: #5b6172; font-size: 11.5px; margin-top: 2px; line-height: 1.45; overflow-wrap: break-word; }
.notif-meta { display: flex; align-items: baseline; gap: 4px; min-width: 0; max-width: 100%; margin-top: 4px; color: #98a2b3; font-size: 10px; white-space: nowrap; }
.notif-url { display: block; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-when { flex: 0 0 auto; white-space: nowrap; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 14px);
  background: #16192b; color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 11px 20px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 120;
  box-shadow: 0 10px 30px rgba(15,17,32,.35);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.muted { color: var(--muted); }
.mt0 { margin-top: 0; }

/* ---------- Onboarding: setup wizard + getting-started checklist ---------- */
.wizard-wrap { max-width: 680px; margin: 7vh auto 0; display: flex; flex-direction: column; align-items: center; }
.wiz-card { width: 100%; padding: 30px 34px 32px; }
.wiz-rail { display: flex; align-items: center; gap: 6px; margin-bottom: 24px; }
.wiz-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: #f1f2f7; color: var(--muted); border: 1.5px solid var(--border); flex-shrink: 0; }
.wiz-dot.wiz-current { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.wiz-dot.wiz-done { background: var(--accent); color: #fff; border-color: var(--accent); }
.wiz-line { flex: 1; height: 1.5px; background: var(--border); min-width: 14px; }
.wiz-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.wiz-sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.wiz-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.wiz-actions .muted { font-size: 12.5px; }
.wiz-skip { margin-top: 16px; font-size: 12.5px; }
.wiz-brand { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #34d399, #0e9f6e); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 800; margin-bottom: 16px; }
.wiz-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

/* RTL (العربية / الدارجة): logical alignment + Arabic-friendly font. */
body.pp-rtl { font-family: 'Tajawal', 'Manrope', system-ui, sans-serif; }
body.pp-rtl code { direction: ltr; unicode-bidi: embed; }
body.pp-rtl input, body.pp-rtl select, body.pp-rtl textarea { text-align: start; }
body.pp-rtl select { min-width: 118px; }
body.pp-rtl .thead span, body.pp-rtl .trow > div { text-align: start; }
body.pp-rtl .notif-meta, body.pp-rtl .device-url { direction: ltr; unicode-bidi: embed; }

/* Merchant-paced catalog import: bottom row of the Funnels panel. */
.pace-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0 2px; }
.pace-row .muted { font-size: 12.5px; }
.wiz-points li { display: flex; gap: 11px; align-items: flex-start; }
.wiz-points .pt { width: 24px; height: 24px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.wiz-points strong { display: block; font-size: 13.5px; }
.wiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wiz-choice { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; background: #fbfbfe; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.wiz-choice strong { font-size: 14px; }
.wiz-choice p { margin: 0; font-size: 12.5px; color: var(--muted); }
.wiz-stat-line { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.wiz-stat-line .chip { font-size: 12.5px; padding: 5px 11px; }

.onboarding-card { border-color: #bfe8d4; }
.check-list .check-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--border); }
.check-list .check-row:first-child { border-top: 0; }
.check-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; background: #f1f2f7; color: var(--muted); border: 1.5px solid var(--border); }
.check-done .check-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.check-text { min-width: 0; flex: 1; }
.check-text strong { display: block; font-size: 13.5px; }
.check-text small { color: var(--muted); font-size: 12px; }
.check-done .check-text strong { color: var(--muted); font-weight: 700; }
.check-row .primary, .check-row .secondary { flex-shrink: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .wizard-wrap { margin-top: 10px; }
  .wiz-card { padding: 22px 20px; }
  .wiz-choices { grid-template-columns: 1fr; }
}
@media (max-width: 1020px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  /* The header tracks are now exactly as wide as the cells below them (they
     used to be wider because the header had no gap), so the 11.5px caps no
     longer fit their own column on a narrow panel. 10px with tighter tracking
     keeps every label legible and clear of its neighbour in en/fr/ar/ary — the
     widest is the Darija Failed label — without touching the column ratios. */
  .thead { font-size: 10px; letter-spacing: .02em; }
}
@media (max-width: 820px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; padding: 14px; }
  nav { flex-direction: row; overflow-x: auto; gap: 4px; }
  .nav-label, .store-switcher { display: none; }
  .view { padding: 18px 16px 50px; }
  .topbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  /* Data tables: give rows their natural width back and let the panel swipe.
     The inline grid-template-columns stay intact — they just get room to breathe. */
  .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .thead, .trow { min-width: 660px; }
  /* 840px keeps every numeric column wide enough for its header word in
     en/fr/ar/ary (the widest is the Darija Failed label), so no label is
     clipped and none runs into its neighbour. Same columns, same single swipe
     scroller; only the campaigns table grows. */
  .camp-table .thead, .camp-table .trow { min-width: 840px; }
  .form-row { grid-template-columns: 1fr; }
}

/* Billing: plan screen / switch view */
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.plan-card { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-price { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.plan-price .muted { font-size: 13px; font-weight: 600; }
.plan-features { margin: 0 0 6px; padding-left: 18px; color: var(--muted); font-size: 13.5px; display: grid; gap: 5px; }
.plan-card .primary { margin-top: auto; }
.plan-card .badge { margin-top: auto; align-self: flex-start; }

/* Product tour (driver.js) — themed to the app */
.tour-btn { display:block; width:100%; margin:0 0 10px; padding:8px 10px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(255,255,255,.04); color:#cfd8d4; font:600 11.5px/1 inherit; cursor:pointer; text-align:left; }
.tour-btn:hover { background:rgba(255,255,255,.09); color:#fff; }
.driver-popover.pp-tour { background:#fff; color:#101828; border-radius:12px; box-shadow:0 24px 60px rgba(16,24,40,.28); max-width:340px; }
.driver-popover.pp-tour .driver-popover-title { font:800 16px/1.25 inherit; color:#101828; }
.driver-popover.pp-tour .driver-popover-description { font:400 13.5px/1.5 inherit; color:#475467; }
.driver-popover.pp-tour .driver-popover-progress-text { color:#667085; font-size:11.5px; }
.driver-popover.pp-tour button { border-radius:8px; font:700 12.5px/1 inherit; padding:8px 12px; text-shadow:none; }
.driver-popover.pp-tour .driver-popover-next-btn, .driver-popover.pp-tour .driver-popover-done-btn { background:#0f766e; color:#fff; border:0; }
.driver-popover.pp-tour .driver-popover-prev-btn { background:#f2f4f7; color:#344054; border:1px solid #e4e7ec; }
.driver-popover.pp-tour .driver-popover-close-btn { color:#98a2b3; }

/* ---------- Shopify embedded: sidebar becomes a top bar ----------
   The Shopify admin already draws a left navigation, so our left menu inside
   its iframe reads as two competing sidebars. In Shopify mode the shell stacks
   and the sidebar turns into a horizontal menu under the admin's own top bar.
   Standalone and Shopify keep the left sidebar unchanged. */
.pp-shopify .app-shell { flex-direction: column; }
.pp-shopify .sidebar {
  width: 100%;
  height: auto;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pp-shopify .brand { padding: 0; gap: 8px; }
.pp-shopify .brand-mark { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.pp-shopify .brand span { font-size: 15px; }
.pp-shopify .store-switcher {
  margin: 0;
  padding: 6px 10px;
  gap: 8px;
  border-radius: 999px;
}
.pp-shopify .store-switcher strong { font-size: 12.5px; }
.pp-shopify .store-switcher small { display: none; }
.pp-shopify nav {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: auto;
  align-items: center;
}
.pp-shopify .nav-label { display: none; }
.pp-shopify .nav-item { padding: 6px 9px; font-size: 13px; gap: 7px; border-radius: 8px; }
.pp-shopify .nav-item i { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
.pp-shopify .sidebar-foot { display: none; }
.pp-shopify .main-content { width: 100%; min-width: 0; }
.pp-shopify .topbar { padding: 12px 20px; }
.pp-shopify .view { padding: 18px 20px 48px; }

@media (max-width: 1500px) {
  /* Ten destinations plus the brand do not fit one comfortable row inside the
     admin frame — allow a clean second row with full labels rather than
     collapsing to cryptic icons. */
  .pp-shopify .nav-item { padding: 6px 8px; font-size: 12.5px; }
}
@media (max-width: 900px) {
  .pp-shopify .sidebar { padding: 10px 14px; }
  .pp-shopify .store-switcher { display: none; }
}

/* ---------- Shopify top bar, v2: 6 tabs + More + gear ----------
   Ten destinations in one row read as a cramped strip. The bar now shows the
   working set, folds the rest into one menu, and keeps a single utility button
   on the right. Widths are measured in the real admin frame, not guessed. */
.pp-shopify .sidebar { min-height: 52px; }
.pp-shopify .pp-more { position: relative; display: flex; }
.pp-shopify .pp-more-btn { cursor: pointer; background: none; border: 0; font: 600 13px/1 inherit; color: var(--sidebar-text); }
.pp-shopify .pp-more-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
.pp-shopify .pp-more-btn.pp-active { color: #fff; background: rgba(16,185,129,.16); }
.pp-shopify .pp-caret { font-style: normal; font-size: 9px; opacity: .7; margin-left: 1px; }
.pp-shopify .pp-more-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 208px;
  display: none; padding: 6px; z-index: 60;
  background: #1b1f2e; border: 1px solid rgba(255,255,255,.10); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(8,10,18,.45);
}
.pp-shopify .pp-more.open .pp-more-menu { display: block; }
.pp-shopify .pp-more-menu .nav-item { width: 100%; padding: 8px 10px; }
.pp-shopify .pp-gear { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; flex: 0 0 32px; }
.pp-shopify .pp-gear span { font-size: 14px; }
.pp-shopify .pp-gear i { display: none; }

@media (max-width: 940px) {
  .pp-shopify .pp-nav-grid { grid-template-columns: repeat(7, 1fr) 32px; }
  .pp-shopify .pp-nav-grid .nav-item { justify-content: center; }
}

/* ---------- Campaign composer: live notification preview ----------
   The composer is a two column modal — draft on the left, the real browser
   notification on the right. Everything is token-based so a dark theme only
   needs the :root values to change. */
.modal.modal-composer { max-width: 900px; }
/* The composer is taller than a laptop viewport. Let the backdrop scroll and
   keep the modal at its natural height — an inner scroll box would trap the
   preview and hide the Send button. The modal centers itself with margins so a
   scrollbar cannot push it off-centre. */
.pp-backdrop-scroll { align-items: flex-start; overflow-y: auto; padding: 0; }
.modal.modal-composer { max-height: none; overflow: visible; width: calc(100% - 40px); margin: 24px auto; }
/* A dialog owns the screen: the page behind must not scroll (that second
   scrollbar is what pushed the composer off-centre on narrow screens). */
body.pp-modal-open { overflow: hidden; }
.composer-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: start; }
.composer-preview { position: sticky; top: 0; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.preview-head h3 { margin: 0; }

.np-card {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 12px 13px; box-shadow: var(--shadow);
}
.np-card + .np-card { margin-top: 10px; }
.np-tag { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.np-row { display: flex; gap: 11px; align-items: flex-start; }
.np-icon { flex: 0 0 auto; }
.np-text { min-width: 0; flex: 1 1 auto; }
.np-title { font-weight: 800; font-size: 13px; line-height: 1.32; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The card must survive an overlong message: a browser notification keeps one
   line of title (ellipsis) and clamps the body to two lines, so the composer
   preview does the same instead of growing the card and pushing the icon out
   of alignment. */
.np-body { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.np-origin { display: flex; gap: 5px; align-items: baseline; font-size: 10.5px; color: var(--muted); margin-top: 6px; min-width: 0; }
.np-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-placeholder { color: var(--muted); opacity: .7; }

.pp-icon-tile { position: relative; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: var(--accent-soft); flex: 0 0 auto; }
.pp-icon-tile > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-icon-tile > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Icon chooser */
.icon-field { margin: 2px 0 15px; }
.field-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.icon-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.icon-choice {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px; border: 1px solid var(--border-strong); background: #fbfbfe;
  border-radius: 11px; font-size: 11.5px; font-weight: 700; color: var(--muted);
  cursor: pointer; text-align: center; line-height: 1.25;
}
.icon-choice:hover { border-color: var(--accent); color: var(--text); }
.icon-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent) inset; }
.icon-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-choice .icon-art { display: block; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; }
.icon-choice .icon-art svg { display: block; width: 100%; height: 100%; }
.icon-custom { margin-bottom: 6px; }
.icon-custom-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.icon-custom-row .ghost { padding: 4px 9px 4px 0; font-size: 12px; }
.field-error { color: var(--red); font-size: 12px; margin: 4px 0 0; }
.hint { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; line-height: 1.4; }

/* A/B */
.ab-block { border-top: 1px solid var(--border); padding-top: 13px; margin-bottom: 14px; }
.ab-toggle { display: flex; gap: 11px; align-items: flex-start; margin: 0; color: var(--text); cursor: pointer; font-weight: 600; }
.ab-toggle .switch { margin-top: 2px; }
.ab-toggle strong { display: block; font-size: 13px; font-weight: 800; }
.ab-toggle small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; margin-top: 2px; line-height: 1.4; }
.ab-fields[hidden] { display: none; }
.ab-fields { padding-top: 12px; }
.split-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.split-head .field-label { margin-bottom: 0; }
.ab-fields output { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 1px 9px; }
.ab-fields input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; padding: 0; margin-top: 8px; background: transparent; border: 0; box-shadow: none; accent-color: var(--accent); }
.ab-fields input[type="range"]:focus { box-shadow: none; border: 0; }
.ab-fields input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--border-strong); }
.ab-fields input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(16,24,40,.3); }
.ab-fields input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border-strong); }
.ab-fields input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; }

/* Send-test block */
.test-zone { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 13px; display: flex; flex-direction: column; gap: 7px; }
.test-zone button { justify-content: center; text-align: center; }
.test-zone .hint { margin: 0; }
.note { margin: 0; font-size: 12.5px; font-weight: 600; }
.note.ok { color: var(--green); }
.note.warn { color: var(--amber); }

/* Campaign list: icon + A/B chip + deliveries */
.camp-name { display: flex; align-items: center; gap: 10px; }
.camp-name-text { min-width: 0; }
/* The name keeps a readable basis and the tags wrap under it as one group, so
   a campaign carrying both chips never squeezes the name to nothing (the
   column is ~118px wide at 390px). */
.camp-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.camp-title strong { flex: 1 1 132px; min-width: 0; }
.camp-tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; flex: 0 1 auto; min-width: 0; }
.camp-icon { border-radius: 9px; }
.ab-chip { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; padding: 1px 7px; background: var(--accent-soft); border-color: #bfe8d4; color: var(--accent-strong); }
.ab-win-chip { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; padding: 1px 7px; background: var(--green-soft); border-color: #bfe8d4; color: var(--green); }

/* A/B result, inside the campaign detail: two symmetric version cards, the
   winner marked with the same accent as the list chip, then one sentence. */
.ab-result { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ab-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ab-result-head h3 { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ab-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.ab-version { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ab-version.is-winner { background: var(--accent-soft); border-color: #bfe8d4; }
.ab-version-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.ab-version-count { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.ab-version-unit { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.ab-version-share { font-size: 11.5px; color: var(--muted); }
.ab-verdict { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.camp-deliveries { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.camp-detail { border-top: 1px dashed var(--border); background: #fbfbfe; padding: 9px 8px 11px; font-size: 12.5px; }
.camp-detail[hidden] { display: none; }
.del-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 0; border-top: 1px solid var(--border); }
.del-row:first-child { border-top: 0; }
.del-status { font-weight: 700; }
.del-row time { margin-left: auto; color: var(--muted); font-size: 11.5px; }
/* The time element is dir="ltr" (its digits/AM must not reorder), so its own
   margin-inline-start would resolve to the left even in an RTL row. Use the row's
   direction explicitly: pin the timestamp to the row's far end. */
body.pp-rtl .del-row time { margin-left: 0; margin-right: auto; }

/* Settings: sending rules */
.rule-toggle { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; color: var(--text); cursor: pointer; font-weight: 600; }
.rule-toggle .switch { margin-top: 2px; }
.rule-toggle strong { display: block; font-size: 13.5px; font-weight: 800; }
.rule-toggle small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; margin-top: 2px; }
.help { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 4px; }
#qh-times.is-off { opacity: .6; }
#policy-cap { display: block; max-width: 200px; }

@media (max-width: 780px) {
  .composer-grid { grid-template-columns: 1fr; gap: 18px; }
  .composer-preview { position: static; }
}
@media (max-width: 560px) {
  .icon-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal.modal-composer { width: calc(100% - 24px); margin: 12px auto 24px; }
  .modal.modal-composer .modal-body { padding-left: 16px; padding-right: 16px; }
  .modal.modal-composer .modal-head { padding-left: 16px; padding-right: 16px; }
  /* A/B result: side by side at 134px each reads cramped — stack the two
     symmetric cards instead. */
  .ab-versions { grid-template-columns: 1fr; }
}