/* =========================================================================
   ReferralQrPlatform — Design System
   One family (IBM Plex Sans Arabic), one accent (sapphire), cool neutrals.
   Borders carry structure; shadows are reserved for elevated layers only.
   ========================================================================= */

/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face { font-family: "Plex Arabic"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Plex Arabic"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Plex Arabic"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Plex Arabic"; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Plex Arabic"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Plex Arabic"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Plex Arabic"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Plex Arabic"; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

/* ---------- Tokens ---------- */
:root {
  --ink-900: #0F1D30;
  --ink-800: #17283F;
  --ink-700: #22364F;
  --ink-line: rgba(255, 255, 255, 0.08);
  --ink-text: #C5CEDB;
  --ink-text-dim: #8595AB;

  --primary: #1E4E8C;
  --primary-hover: #183F72;
  --primary-soft: #EAF0F8;
  --primary-ring: rgba(30, 78, 140, 0.22);

  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #F9FAFB;
  --border: #E2E6EC;
  --border-strong: #CDD3DC;

  --text: #172233;
  --text-2: #4A5568;
  --text-3: #667085;

  --success: #17734A;  --success-soft: #E7F3EC;
  --warning: #9A5B06;  --warning-soft: #FBF1E2;
  --danger:  #B42318;  --danger-soft:  #FCEBEA;
  --neutral: #475467;  --neutral-soft: #EEF0F3;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-pop: 0 12px 32px -12px rgba(15, 29, 48, 0.22), 0 2px 6px rgba(15, 29, 48, 0.06);

  --font: "Plex Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px;

  --sidebar-w: 264px;
  --topbar-h: 64px;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Bootstrap bridge */
  --bs-body-font-family: var(--font);
  --bs-body-font-size: var(--fs-base);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--border);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 30, 78, 140;
  --bs-link-color: var(--primary);
  --bs-link-color-rgb: 30, 78, 140;
  --bs-link-hover-color: var(--primary-hover);
  --bs-border-radius: var(--radius);
}

/* ---------- Base ---------- */
body { font-family: var(--font); font-size: var(--fs-base); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; line-height: 1.35; }
.num, .kpi-value { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.text-2 { color: var(--text-2) !important; }
.text-3 { color: var(--text-3) !important; }
a { text-decoration: none; }
::selection { background: var(--primary-soft); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.sidebar :focus-visible { outline-color: #9DBBE6; }

/* Icons (Lucide, outline) */
.ico { width: 18px; height: 18px; stroke-width: 1.75; flex-shrink: 0; vertical-align: -0.2em; }
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 22px; height: 22px; }
[dir="rtl"] .ico-dir { transform: scaleX(-1); } /* arrows/chevrons that must mirror in RTL */

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-weight: 500; --bs-btn-font-size: 14px;
  --bs-btn-padding-y: 9px; --bs-btn-padding-x: 16px;
  --bs-btn-border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-sm { --bs-btn-padding-y: 6px; --bs-btn-padding-x: 12px; --bs-btn-font-size: 13px; gap: 6px; }
.btn-lg { --bs-btn-padding-y: 12px; --bs-btn-padding-x: 22px; --bs-btn-font-size: 15px; }
.btn-primary {
  --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
  --bs-btn-focus-shadow-rgb: 30, 78, 140;
}
.btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--text); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: #B7BFCB;
  --bs-btn-active-color: var(--text); --bs-btn-active-bg: var(--neutral-soft); --bs-btn-active-border-color: #B7BFCB;
}
.btn-ghost {
  --bs-btn-color: var(--text-2); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--neutral-soft); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--neutral-soft); --bs-btn-active-border-color: transparent;
}
.btn-danger-outline {
  --bs-btn-color: var(--danger); --bs-btn-bg: var(--surface); --bs-btn-border-color: #EBC3BF;
  --bs-btn-hover-color: var(--danger); --bs-btn-hover-bg: var(--danger-soft); --bs-btn-hover-border-color: #E0A7A1;
}
.btn-icon { --bs-btn-padding-x: 0; width: 38px; height: 38px; }
.btn-whatsapp {
  --bs-btn-color: #fff; --bs-btn-bg: #1C7D4E; --bs-btn-border-color: #1C7D4E;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #16663F; --bs-btn-hover-border-color: #16663F;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #16663F; --bs-btn-active-border-color: #16663F;
}

/* ---------- Forms ---------- */
.form-label { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.form-text { font-size: var(--fs-sm); color: var(--text-3); }
.form-control, .form-select {
  font-size: 14px; min-height: 42px; padding: 9px 12px;
  border-color: var(--border-strong); border-radius: var(--radius);
  color: var(--text); background-color: var(--surface);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control::placeholder { color: #98A2B3; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.form-control.is-invalid, .input-validation-error { border-color: var(--danger) !important; }
.invalid-feedback, .field-validation-error { display: block; font-size: var(--fs-sm); color: var(--danger); margin-top: 4px; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--primary-ring); border-color: var(--primary); }
.form-check-label { font-size: 14px; color: var(--text-2); }
.input-icon { position: relative; }
.input-icon > .ico { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.input-icon .form-control { padding-inline-start: 40px; }
.input-icon .input-action { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); }
/* Email/password inputs are always dir="ltr" for correct Latin text, even on an
   Arabic (RTL) page. There, the icon still sits at the page's inline-start (the
   visual right), so the input's own padding must flip to match - but only on an
   RTL page. On an English (LTR) page the input's dir already matches the page,
   and the default .input-icon .form-control padding-inline-start above is
   already correct, so this override must not apply there. */
[dir="rtl"] .input-icon .form-control[dir="ltr"] { padding-inline-start: 12px; padding-inline-end: 40px; text-align: left; }
[dir="rtl"] .input-icon:has(.input-action) .form-control[dir="ltr"] { padding-inline-start: 44px; }

/* ---------- Status badges ---------- */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  background: var(--neutral-soft); color: var(--neutral);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active, .status-issued { background: var(--primary-soft); color: var(--primary); }
.status-redeemed, .status-success { background: var(--success-soft); color: var(--success); }
.status-paused, .status-warning { background: var(--warning-soft); color: var(--warning); }
.status-cancelled, .status-disabled, .status-danger { background: var(--danger-soft); color: var(--danger); }
.status-expired, .status-draft, .status-archived { background: var(--neutral-soft); color: var(--neutral); }

/* =========================================================================
   App shell (Admin / Sales)
   ========================================================================= */
/* Bootstrap grid columns are flex items with the browser default min-width:auto,
   which lets a scrollable table deep inside (min-width:520px, so it can scroll
   on narrow screens) push its own column - and the whole row - wider than the
   viewport instead of scrolling internally. A min-width:0 on the .panel that
   directly wraps the table is not enough on its own; the flex item doing the
   actual refusing-to-shrink is the Bootstrap column itself. This is the fix
   documented for this exact Bootstrap + wide-table combination. */
[class*="col-"] { min-width: 0; }

.app-shell { min-height: 100vh; }
@media (min-width: 992px) { .app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } }

/* Sidebar — Bootstrap .offcanvas-lg: static column on desktop, drawer on mobile */
.sidebar { --bs-offcanvas-width: 288px; --bs-offcanvas-bg: var(--ink-900); background-color: var(--ink-900) !important; color: var(--ink-text); border: 0 !important; }
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; } }
.sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; height: 100%; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 20px; border-bottom: 1px solid var(--ink-line); color: #fff; flex-shrink: 0; }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--primary); color: #fff; flex-shrink: 0; }
.brand-name { font-weight: 600; font-size: 15px; line-height: 1.25; }
.brand-sub { font-size: 12px; color: var(--ink-text-dim); line-height: 1.3; }

.sidebar-scroll { flex: 1; overflow-y: auto; padding: 16px 12px; }
.nav-group + .nav-group { margin-top: 20px; }
.nav-group-title { padding: 0 12px 8px; font-size: 12px; font-weight: 500; color: var(--ink-text-dim); }
.side-link {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; margin-bottom: 2px; border-radius: var(--radius);
  color: var(--ink-text); font-size: 14px; font-weight: 500;
  transition: background-color .15s var(--ease), color .15s var(--ease);
  overflow: hidden; /* clip runaway content to the sidebar instead of letting it escape over the page */
}
.side-link .ico { flex: 0 0 auto; }
.side-link .side-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-link:hover { background: var(--ink-800); color: #fff; }
.side-link.active { background: var(--ink-700); color: #fff; }
.side-link.active::before { content: ""; position: absolute; inset-inline-start: -12px; top: 8px; bottom: 8px; width: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background: #7FA6DB; }
.side-link.is-pending { color: var(--ink-text-dim); cursor: default; }
.side-link.is-pending:hover { background: transparent; color: var(--ink-text-dim); }
.side-link .side-meta { flex: 0 0 auto; margin-inline-start: auto; padding-inline-start: 8px; font-size: 11px; color: var(--ink-text-dim); font-weight: 400; white-space: nowrap; }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--ink-line); flex-shrink: 0; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--ink-700); color: #fff; font-weight: 600; font-size: 14px; }
.user-chip .name { color: #fff; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .role { color: var(--ink-text-dim); font-size: 12px; }
.user-chip .meta { min-width: 0; flex: 1; }
.sidebar .btn-ghost { --bs-btn-color: var(--ink-text); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ink-800); --bs-btn-active-bg: var(--ink-800); --bs-btn-active-color: #fff; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 1020; height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-3); min-width: 0; }
.crumbs .current { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.env-tag { font-size: 12px; color: var(--text-3); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

.main-content { padding: 28px 24px 48px; max-width: 1320px; width: 100%; margin-inline: auto; }
@media (max-width: 575.98px) { .topbar { padding: 0 12px; } .main-content { padding: 20px 14px 40px; } }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-header > div:first-child { min-width: 0; }
.page-title { font-size: var(--fs-xl); font-weight: 600; margin: 0; overflow-wrap: break-word; }
.page-subtitle { margin: 4px 0 0; color: var(--text-3); font-size: 14px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* =========================================================================
   Surfaces
   ========================================================================= */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  min-width: 0; /* Without this, a wide-but-scrollable child (the coupon/employee table
     below, which has its own min-width for horizontal scroll) forces this panel - and the
     Bootstrap grid column it sits in - to grow past the available width instead of letting
     the table scroll internally. That growth is what pushes headings under the sidebar or
     off the edge of the page with longer, real translated text. */
}
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.panel-header > div:first-child { min-width: 0; }
.panel-title { font-size: 16px; font-weight: 600; margin: 0; overflow-wrap: break-word; }
.panel-desc { font-size: var(--fs-sm); color: var(--text-3); margin: 2px 0 0; }
.panel-body { padding: 20px; }
.panel-footer { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-end-start-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); font-size: var(--fs-sm); color: var(--text-3); }
.section-gap { margin-top: 20px; }

/* KPI strip: one panel divided by hairlines, not a grid of identical cards */
.kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.kpi { padding: 18px 20px; box-shadow: inset -1px -1px 0 var(--border); min-width: 0; }
[dir="rtl"] .kpi { box-shadow: inset 1px -1px 0 var(--border); }
.kpi-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.kpi-label .ico { width: 16px; height: 16px; }
.kpi-value { margin-top: 6px; font-size: var(--fs-2xl); font-weight: 600; line-height: 1.2; color: var(--text); }
.kpi-value small { font-size: 16px; font-weight: 500; color: var(--text-2); }
.kpi-meta { margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.kpi.kpi-lead { background: var(--primary-soft); }
.kpi.kpi-lead .kpi-value { color: var(--primary); }
@media (max-width: 1199.98px) { .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .kpi { padding: 14px 14px; } .kpi-value { font-size: 24px; } .kpi-meta { font-size: 12px; } }
@media (max-width: 339.98px) { .kpi-strip { grid-template-columns: 1fr; } }

.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.note .ico { color: var(--text-3); margin-top: 2px; }

/* =========================================================================
   Tables
   ========================================================================= */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-pro { width: 100%; min-width: 520px; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table-pro thead th { padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; text-align: start; }
.table-pro tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.table-pro tbody tr:last-child td { border-bottom: 0; }
.table-pro tbody tr { transition: background-color .12s var(--ease); }
.table-pro tbody tr:hover { background: #FAFBFC; }
.table-pro .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-primary { font-weight: 500; white-space: nowrap; }
.cell-sub { display: block; font-size: 12.5px; color: var(--text-3); }
.rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--neutral-soft); color: var(--text-2); font-size: 12px; font-weight: 600; }
.rank-1 { background: var(--primary); color: #fff; }
.code-chip { direction: ltr; unicode-bidi: isolate; display: inline-block; font-weight: 600; letter-spacing: .04em; font-size: 13px; color: var(--text); background: var(--neutral-soft); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 20px; }
.empty-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); margin-bottom: 14px; }
.empty-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.empty-text { font-size: 14px; color: var(--text-3); max-width: 42ch; margin: 0 0 16px; }

/* Alerts */
.alert-pro { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); font-size: 14px; border: 1px solid; margin-bottom: 16px; }
.alert-pro .ico { margin-top: 2px; }
.alert-pro.danger  { background: var(--danger-soft);  border-color: #F1C9C5; color: #7A1A12; }
.alert-pro.success { background: var(--success-soft); border-color: #C3E1CF; color: #0F4D31; }
.alert-pro.warning { background: var(--warning-soft); border-color: #F0D7B0; color: #6B3F04; }
.alert-pro.info    { background: var(--primary-soft); border-color: #C9D7EB; color: #14345E; }
.alert-pro ul { margin: 0; padding-inline-start: 18px; }
.validation-summary-valid { display: none !important; }

/* Toast */
.toast-stack { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 1090; display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
.toast-pro { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--radius); background: var(--ink-900); color: #fff; font-size: 14px; box-shadow: var(--shadow-pop); animation: toast-in .2s var(--ease); }
.toast-pro .ico { color: #8FD1AE; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Auth — split screen; the referral chain is the one visual statement
   ========================================================================= */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--surface); }
.auth-form-side { display: flex; flex-direction: column; padding: 32px clamp(20px, 5vw, 72px); }
.auth-form-wrap { width: 100%; max-width: 400px; margin: auto; padding: 40px 0; }
.auth-title { font-size: var(--fs-xl); margin: 0 0 6px; }
.auth-sub { color: var(--text-3); margin: 0 0 28px; font-size: 14px; }
.auth-foot { font-size: 12.5px; color: var(--text-3); }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .brand-sub { color: var(--text-3); }

.auth-visual-side { position: relative; overflow: hidden; background: var(--ink-900); color: var(--ink-text); padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.auth-visual-side::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; }
.auth-visual-inner { position: relative; z-index: 1; max-width: 460px; }
.auth-visual-title { color: #fff; font-size: 26px; font-weight: 600; line-height: 1.5; margin: 0 0 12px; }
.auth-visual-text { color: var(--ink-text); font-size: 15px; margin: 0 0 36px; max-width: 46ch; }

.chain { list-style: none; margin: 0; padding: 0; }
.chain li { position: relative; display: flex; gap: 14px; align-items: center; padding-bottom: 22px; }
.chain li:last-child { padding-bottom: 0; }
.chain li::after { content: ""; position: absolute; inset-inline-start: 19px; top: 44px; height: calc(100% - 48px); width: 1px; background: rgba(255,255,255,.2); }
.chain li:last-child::after { display: none; }
.chain-node { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); background: var(--ink-800); color: #DCE5F2; }
.chain li:first-child .chain-node { background: var(--primary); border-color: #3A6AAB; color: #fff; }
.chain-label { color: #fff; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.chain-sub { color: var(--ink-text-dim); font-size: 12.5px; }

@media (max-width: 991.98px) { .auth { grid-template-columns: 1fr; } .auth-visual-side { display: none; } }

/* =========================================================================
   Public offer page (mobile first) — the coupon ticket is its signature
   ========================================================================= */
/* Each campaign sets --brand-primary/--brand-secondary inline (its own PrimaryColor/
   SecondaryColor). Re-pointing the shared --primary/--primary-hover tokens at them,
   scoped to .offer-page only, makes every existing --primary-based rule (buttons,
   the discount figure, the issued-status color) pick up that campaign's brand
   automatically, with no per-rule overrides and no effect on the admin/sales panels. */
.offer-page {
    --primary: var(--brand-primary, #1E4E8C);
    --primary-hover: var(--brand-secondary, #183F72);
    --primary-soft: color-mix(in srgb, var(--primary) 12%, white);
    --primary-ring: color-mix(in srgb, var(--primary) 22%, transparent);
}
.offer-page { min-height: 100vh; background: var(--bg); padding-bottom: 40px; }
.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.offer-container { max-width: 480px; margin: 0 auto; padding: 16px; }
.offer-hero { border-radius: var(--radius-lg); overflow: hidden; background: var(--neutral-soft); aspect-ratio: 4 / 3; }
.offer-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-referrer { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; color: var(--text-2); }
.offer-referrer strong { color: var(--text); font-weight: 600; }
.offer-title { font-size: 22px; font-weight: 700; margin: 20px 0 6px; line-height: 1.45; }
.offer-desc { color: var(--text-2); margin: 0 0 18px; }
.offer-discount { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.offer-discount .pct { font-size: 46px; font-weight: 700; line-height: 1; color: var(--primary); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.offer-discount .pct-label { font-size: 15px; color: var(--text-2); }
.offer-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); margin-bottom: 20px; }

.ticket-wrap { filter: drop-shadow(0 10px 22px rgba(15, 29, 48, 0.12)) drop-shadow(0 1px 2px rgba(15, 29, 48, 0.08)); }
.ticket {
  background: var(--surface); border-radius: var(--radius-lg);
  -webkit-mask: radial-gradient(circle 11px at 0 64%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 64%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 64%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 64%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ticket-top { padding: 20px 20px 18px; text-align: center; height: 64%; }
.ticket-label { font-size: 13px; color: var(--text-3); margin-bottom: 6px; }
.ticket-code { font-size: 28px; font-weight: 700; letter-spacing: .08em; direction: ltr; unicode-bidi: isolate; color: var(--text); }
.ticket-cut { border-top: 1.5px dashed var(--border-strong); margin: 0 18px; }
.ticket-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px 16px; font-size: 13px; color: var(--text-3); }

.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.share-grid .btn-wide { grid-column: 1 / -1; }
.qr-frame { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: grid; place-items: center; }
.qr-frame img { width: 200px; height: 200px; image-rendering: pixelated; }
.terms { margin-top: 24px; font-size: 13px; color: var(--text-3); border-top: 1px solid var(--border); padding-top: 14px; }
.terms summary { cursor: pointer; color: var(--text-2); font-weight: 500; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.terms summary::-webkit-details-marker { display: none; }
.terms summary .ico { transition: transform .15s var(--ease); }
.terms[open] summary .ico { transform: rotate(180deg); }

/* ---------- Referral tree ---------- */
.tree, .tree-children { list-style: none; margin: 0; padding: 0; }
.tree-children { padding-inline-start: 28px; border-inline-start: 1px dashed var(--border-strong); margin-inline-start: 11px; }
.tree-node { display: flex; align-items: center; gap: 10px; padding: 8px 0; flex-wrap: wrap; }
.tree-node .ico { color: var(--text-3); }
.tree > li, .tree-children > li { position: relative; }

/* Centered status pages (expired / invalid link / error / access denied) */
.state-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 40px 16px; }
.state-card { max-width: 420px; }
.state-card .empty-icon { width: 56px; height: 56px; margin: 0 auto 18px; }
.state-card h1 { font-size: var(--fs-lg); margin-bottom: 8px; }
.state-card p { color: var(--text-3); margin-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Settings: WhatsApp diagnostics & setup guide ---------- */
.diag-box {
  margin: 0; padding: 12px 14px; max-height: 260px; overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-all; text-align: left; color: var(--text);
}
.guide-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 12px; font-size: 14px; color: var(--text-2); line-height: 1.6; }
.guide-steps li::marker { color: var(--primary); font-weight: 600; }