/**
 * DataconnectGH design system — shared tokens + utilities.
 * Homepage, guest flows, receipt, and app shell (foundation layer).
 */

:root {
  /* A. Colors */
  --ds-primary: #0052cc;
  --ds-secondary: #003d99;
  --ds-accent: #00a3ff;
  --ds-success: #059669;
  --ds-success-soft: #d1fae5;
  --ds-danger: #dc2626;
  --ds-danger-soft: #fee2e2;
  --ds-warning: #d97706;
  --ds-neutral-50: #f8fafc;
  --ds-neutral-100: #f1f5f9;
  --ds-neutral-200: #e2e8f0;
  --ds-neutral-500: #64748b;
  --ds-neutral-700: #334155;
  --ds-neutral-900: #0f172a;
  --ds-body: #1e293b;
  --ds-page-bg: #f8fafc;
  --ds-border: #e2e8f0;

  /* Back-compat aliases (used by homepage inline styles) */
  --primary-color: var(--ds-primary);
  --secondary-color: var(--ds-secondary);
  --accent-color: var(--ds-accent);
  --dark-color: #0a2540;
  --light-color: var(--ds-neutral-50);
  --text-color: var(--ds-body);
  --border-color: var(--ds-border);
  --success-color: #00c9a7;

  /* B. Typography */
  --ds-font-sans: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-heading-weight: 700;
  --ds-font-body-weight: 400;
  --ds-line-height-body: 1.6;
  --ds-line-height-heading: 1.2;

  /* C. Spacing scale (rem) */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;

  /* D. Radius + shadow */
  --ds-radius-sm: 0.375rem;
  --ds-radius-md: 0.5rem;
  --ds-radius-lg: 0.75rem;
  --ds-radius-xl: 1rem;
  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ds-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --ds-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);

  /* Bootstrap 5 bridge */
  --bs-primary: var(--ds-primary);
  --bs-secondary: var(--ds-secondary);
  --bs-success: var(--ds-success);
  --bs-danger: var(--ds-danger);
  --bs-body-color: var(--ds-body);
  --bs-border-color: var(--ds-border);
}

/* Typography defaults when .ds-body is applied */
.ds-body {
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-font-body-weight);
  line-height: var(--ds-line-height-body);
  color: var(--ds-body);
  background-color: var(--ds-page-bg);
}

.ds-heading-1 {
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-font-heading-weight);
  line-height: var(--ds-line-height-heading);
  color: var(--ds-neutral-900);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.ds-heading-2 {
  font-family: var(--ds-font-sans);
  font-weight: 600;
  line-height: var(--ds-line-height-heading);
  color: var(--ds-neutral-900);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.ds-text-muted {
  color: var(--ds-neutral-500);
}

/* Page shell (guest / receipt) */
.ds-page {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--ds-space-8) var(--ds-space-4);
}

.ds-page-wide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--ds-space-8) var(--ds-space-4);
}

/* D. Components — cards */
.ds-card {
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-md);
  padding: var(--ds-space-8);
}

.ds-card--flat {
  box-shadow: var(--ds-shadow-sm);
}

/* Buttons */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-sans);
  font-weight: 600;
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-6);
  border: none;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ds-btn-primary {
  background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 82, 204, 0.28);
}

.ds-btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 82, 204, 0.35);
}

.ds-btn-outline-primary {
  background: #fff;
  color: var(--ds-primary);
  border: 2px solid var(--ds-primary);
}

.ds-btn-outline-primary:hover {
  background: rgba(0, 82, 204, 0.06);
  color: var(--ds-primary);
}

/* Alerts */
.ds-alert {
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4);
  border-left: 4px solid var(--ds-primary);
  background: var(--ds-neutral-100);
  color: var(--ds-neutral-700);
}

.ds-alert-success {
  border-left-color: var(--ds-success);
  background: var(--ds-success-soft);
}

.ds-alert-danger {
  border-left-color: var(--ds-danger);
  background: var(--ds-danger-soft);
}

/* Form controls (guest pages) */
.ds-input,
.ds-form-control {
  font-family: var(--ds-font-sans);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-4);
}

.ds-input:focus,
.ds-form-control:focus {
  border-color: var(--ds-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.2);
}

/* Hero / success backgrounds (guest) */
.ds-gradient-hero {
  background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-accent) 100%);
}

.ds-gradient-success-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-8) var(--ds-space-4);
  background: linear-gradient(135deg, var(--ds-primary) 0%, #2563eb 55%, var(--ds-accent) 100%);
}

/* Receipt (payment document) */
.ds-receipt-header-bar {
  background: var(--ds-primary);
  color: #fff;
}

.ds-receipt-muted {
  color: var(--ds-neutral-500);
}

.ds-receipt-row-alt {
  background: rgba(0, 82, 204, 0.06);
}

.ds-page-confirmation {
  min-height: 100vh;
  display: flex;
  align-items: center;
  font-family: var(--ds-font-sans);
  padding: 2rem 0;
  background: linear-gradient(135deg, var(--ds-primary) 0%, #2563eb 55%, var(--ds-accent) 100%);
}

/* Checkout (logged-in + guest) */
.ds-checkout-total-bar {
  background: linear-gradient(180deg, var(--ds-neutral-50) 0%, #fff 100%);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-6);
  margin-bottom: var(--ds-space-5);
  text-align: center;
}

.ds-checkout-total-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-neutral-500);
  display: block;
  margin-bottom: var(--ds-space-2);
}

.ds-checkout-total-amount {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 800;
  color: var(--ds-neutral-900);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ds-checkout-trust {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ds-neutral-700);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-neutral-50);
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  margin-bottom: var(--ds-space-5);
}

.ds-checkout-trust i {
  color: var(--ds-success);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.ds-checkout-trust strong {
  color: var(--ds-neutral-900);
  font-weight: 600;
}

.ds-checkout-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-neutral-500);
  margin-bottom: var(--ds-space-3);
}

.ds-checkout-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

@media (min-width: 576px) {
  .ds-checkout-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .ds-checkout-actions .ds-checkout-btn-primary {
    flex: 1 1 auto;
    min-width: 12rem;
  }
}

.ds-checkout-empty-state {
  text-align: center;
  padding: var(--ds-space-10) var(--ds-space-4);
  color: var(--ds-neutral-500);
  background: var(--ds-neutral-50);
  border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius-lg);
  margin-bottom: var(--ds-space-6);
}

.ds-checkout-empty-state .ds-checkout-empty-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--ds-space-4);
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ds-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--ds-primary);
}

.ds-checkout-empty-state h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ds-neutral-900);
  margin-bottom: var(--ds-space-2);
}

.ds-checkout-empty-state p {
  margin: 0;
  font-size: 0.9375rem;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.ds-checkout-order-preview {
  background: var(--ds-neutral-50);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-4);
  margin-bottom: var(--ds-space-5);
}

.ds-checkout-order-preview .ds-checkout-preview-caption {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ds-neutral-500);
  margin-bottom: var(--ds-space-3);
}

.ds-checkout-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ds-space-4);
  padding: var(--ds-space-2) 0;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--ds-border);
}

.ds-checkout-summary-line:last-of-type {
  border-bottom: none;
}

.ds-checkout-summary-line .ds-meta {
  color: var(--ds-neutral-500);
  font-size: 0.8125rem;
}

.ds-checkout-modal-total {
  margin-top: var(--ds-space-3);
  padding-top: var(--ds-space-4);
  border-top: 2px solid var(--ds-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ds-space-4);
}

.ds-checkout-modal-total .ds-checkout-modal-total-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-neutral-500);
  margin: 0;
}

.ds-checkout-modal-total .ds-checkout-modal-amount {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--ds-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.ds-checkout-form-subtitle {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0.25rem 0 0;
  font-weight: 400;
  opacity: 0.95;
}

.guest-checkout .form-control.is-invalid,
.guest-checkout .form-select.is-invalid {
  border-color: var(--ds-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.guest-checkout .invalid-feedback {
  display: block;
  color: var(--ds-danger);
  font-size: 0.8125rem;
  margin-top: var(--ds-space-2);
}

/* Feedback — loading, busy, live region */
.ds-btn-is-loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.92;
}

[aria-busy="true"] {
  cursor: wait;
}

.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ds-feedback-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: 0.875rem;
  color: var(--ds-neutral-500);
}

/* ===================================================================
   App Shell — added by PR 1 (Dashboard refresh foundation)
   New tokens, components, and utilities used by the new dashboard.
   Existing rules above are untouched.
   Naming: --app-* tokens, .app-* components. Keeps the .ds-* family
   reserved for guest / receipt / homepage flows.
   =================================================================== */

:root {
  /* App surfaces — colder palette than the .ds-* family for the in-app shell */
  --app-bg: #eceff8;
  --app-surface: #ffffff;
  --app-surface-2: #f8f9fc;
  --app-surface-3: #e8ecf6;
  --app-border: rgba(15, 23, 42, 0.08);
  --app-border-strong: #c9d2e5;

  /* Text */
  --app-text: #0a0e27;
  --app-text-dim: #475569;
  --app-text-muted: #94a3b8;

  /* App brand — confident blue/indigo/violet palette for the agent app */
  --app-brand: #0075ff;
  --app-brand-2: #5b6ef5;
  --app-brand-3: #b347ff;
  --app-brand-soft: #e8f0fe;
  --app-brand-glow: rgba(0, 117, 255, 0.18);

  /* Gradients — used by wallet hero and tier upsell */
  --app-gradient-hero: linear-gradient(135deg, #0a0e27 0%, #1e1b4b 50%, #312e81 100%);
  --app-gradient-accent: linear-gradient(135deg, #0075ff 0%, #5b6ef5 60%, #b347ff 100%);

  /* Status — slightly warmer than .ds-* equivalents to read better on white surfaces */
  --app-success: #00c389;
  --app-success-soft: #e6f7ef;
  --app-warn: #ff9500;
  --app-warn-soft: #fff7e6;
  --app-danger: #ff3b30;
  --app-danger-soft: #fde8e8;
  --app-purple: #8b5cf6;
  --app-purple-soft: #f0e8fe;

  /* Network branding — soft tints + strong (logo/brand) versions
     Soft tints are used everywhere on the dashboard so the page reads
     cohesive; strong is reserved for the actual network logos. */
  --net-mtn-bg: #fff8d6;
  --net-mtn-text: #6b5400;
  --net-mtn-strong: #ffcb05;

  --net-telecel-bg: #fde8eb;
  --net-telecel-text: #a30015;
  --net-telecel-strong: #e60028;

  --net-at-bg: #e6ebf7;
  --net-at-text: #1a3a8a;
  --net-at-strong: #003366;

  /* Radii reused by app components */
  --app-radius-sm: 8px;
  --app-radius-md: 12px;
  --app-radius-lg: 16px;
  --app-radius-xl: 20px;

  /* Depth — layered shadows (dashboard refresh) */
  --app-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --app-shadow-card-hover: 0 4px 16px rgba(15, 23, 42, 0.07), 0 16px 40px rgba(15, 23, 42, 0.09);
  --app-shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.45);

  /* Chart series (inline SVG + legend) */
  --app-chart-line: var(--app-brand);
  --app-chart-fill-stop: var(--app-brand);
  --app-chart-grid: rgba(148, 163, 184, 0.35);

  /* Typography stacks for the in-app shell.
     Sora is the primary face (geometric humanist sans, good at all weights);
     Plus Jakarta Sans + Inter remain as fallbacks so any cached page still
     renders cleanly while Sora loads, and so legacy components that import
     PJS keep visual continuity. JetBrains Mono stays for code + tabular
     numerics — Sora is not a monospace. */
  --app-font-display: "Sora", "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --app-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --app-font-body: "Sora", "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
}

/* -------------------------------------------------------------------
   Global font override — pins Sora on body so Vuexy/Bootstrap defaults
   don't beat us with their own font-family declarations. The .app-*
   components already use the tokens above and don't need this, but it
   catches everything else (vendor widgets, modals, toastr, sweetalert,
   datatables, etc.) without having to chase every selector.
   ------------------------------------------------------------------- */
html, body,
input, button, select, textarea {
  font-family: var(--app-font-body);
}
/* Keep numeric monospace where it's intentionally used (code blocks,
   tabular numerics) — these inherit explicitly inside the .app-* rules. */
code, kbd, samp, pre {
  font-family: var(--app-font-mono);
}

/* -------------------------------------------------------------------
   Type utilities
   ------------------------------------------------------------------- */
.app-display {
  font-family: var(--app-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.app-display-md {
  font-family: var(--app-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.app-mono-label {
  font-family: var(--app-font-mono);
  font-size: 9px;
  color: var(--app-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-tabular {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------
   Client dashboard page — scoped polish (section.app-dashboard)
   ------------------------------------------------------------------- */
.app-dashboard {
  font-family: var(--app-font-body);
  color: var(--app-text);
  padding-bottom: var(--ds-space-8);
}
.app-dashboard .app-panel,
.app-dashboard .app-chart-panel {
  box-shadow: var(--app-shadow-card);
  border: 1px solid var(--app-border);
}
.app-dashboard .app-panel-head {
  background: linear-gradient(180deg, var(--app-surface-2) 0%, var(--app-surface) 100%);
}

/* -------------------------------------------------------------------
   Announcement bar — sits at the very top of the layout
   ------------------------------------------------------------------- */
.app-announce {
  background: linear-gradient(90deg, #0a0e27, #1e1b4b);
  color: #fff;
  padding: 8px 24px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  z-index: 50;
  min-height: 36px;
}
.app-announce-tag {
  background: var(--app-warn);
  color: #1a1208;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-family: var(--app-font-mono);
  flex-shrink: 0;
}
.app-announce a {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 600;
}
.app-announce a:hover { color: #93c5fd; }
.app-announce-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
}
.app-announce-close:hover { color: #fff; }

/* -------------------------------------------------------------------
   Stat card — KPI tile (default + wallet hero variant)
   ------------------------------------------------------------------- */
.app-stat {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  padding: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--app-shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.app-stat:not(.app-stat--wallet):hover {
  transform: translateY(-2px);
  box-shadow: var(--app-shadow-card-hover);
}
/* When the kpi-row stretches all cards to match the wallet hero's height,
   small cards have extra vertical space and look hollow. Distribute their
   contents so the label sits at top, value floats centred in the leftover
   space, trend/sparkline anchor at the bottom. Wallet hero is excluded
   because it uses a custom slot layout. */
.app-stat:not(.app-stat--wallet) .app-stat-label { flex: 0 0 auto; }
.app-stat:not(.app-stat--wallet) .app-stat-value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.app-stat:not(.app-stat--wallet) .app-stat-trend { flex: 0 0 auto; }
.app-stat:not(.app-stat--wallet) .app-stat-spark { flex: 0 0 auto; }
.app-stat-label {
  font-family: var(--app-font-mono);
  font-size: 9px;
  color: var(--app-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-stat-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.app-stat--brand   .app-stat-label .dot { background: var(--app-brand); }
.app-stat--warn    .app-stat-label .dot { background: var(--app-warn); }
.app-stat--success .app-stat-label .dot { background: var(--app-success); }
.app-stat--purple  .app-stat-label .dot { background: var(--app-purple); }
.app-stat--danger  .app-stat-label .dot { background: var(--app-danger); }

.app-stat-value {
  font-family: var(--app-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.app-stat-value .currency,
.app-stat-value .unit {
  font-size: 13px;
  color: var(--app-text-muted);
  font-weight: 500;
}
.app-stat-value .currency { margin-right: 3px; font-weight: 600; }
.app-stat-value .unit { margin-left: 2px; }

.app-stat-trend {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--app-font-mono);
  display: flex;
  align-items: center;
  gap: 5px;
}
.app-stat-trend--up { color: var(--app-success); }
.app-stat-trend--flat { color: var(--app-text-muted); }
.app-stat-trend--down { color: var(--app-danger); }

/* Sparkline strip (rendered by inline divs sized with style="height:N%") */
.app-stat-spark {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 22px;
  margin-top: 8px;
}
.app-stat-spark .bar {
  flex: 1;
  background: var(--app-brand-soft);
  border-radius: 1px;
  min-height: 3px;
  transition: background 0.2s;
}
.app-stat-spark .bar.active { background: var(--app-brand); }

/* Wallet variant — gradient hero, used in the dashboard's KPI row */
.app-stat--wallet {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(91, 110, 245, 0.35) 0%, transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(179, 71, 255, 0.2) 0%, transparent 50%),
    var(--app-gradient-hero);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow:
    var(--app-shadow-card),
    var(--app-shadow-inset-highlight);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.app-stat--wallet:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--app-shadow-card-hover),
    var(--app-shadow-inset-highlight);
}
.app-stat--wallet::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(91, 110, 245, 0.4) 0%, transparent 60%);
  pointer-events: none;
}
.app-stat--wallet::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(179, 71, 255, 0.22) 0%, transparent 60%);
  pointer-events: none;
}
.app-stat--wallet > * { position: relative; z-index: 1; }
.app-stat--wallet .app-stat-label { color: rgba(255, 255, 255, 0.6); }
.app-stat--wallet .app-stat-value { font-size: 30px; }
.app-stat--wallet .app-stat-value .currency,
.app-stat--wallet .app-stat-value .unit { color: rgba(255, 255, 255, 0.65); }

.app-wallet-trend {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
}
.app-wallet-trend strong {
  color: var(--app-success);
  font-weight: 600;
}
.app-wallet-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: nowrap;
  align-items: stretch;
}
.app-wallet-btn {
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 11.5px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.2;
}
.app-wallet-btn--primary {
  background: rgba(255, 255, 255, 0.95);
  color: var(--app-text);
  flex: 1 1 auto;
  min-width: 0;
}
.app-wallet-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  color: var(--app-text);
}
.app-wallet-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 0 5px rgba(0, 117, 255, 0.35);
}
.app-wallet-btn--ghost:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.app-wallet-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  backdrop-filter: blur(8px);
}
.app-wallet-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* -------------------------------------------------------------------
   Panel — bordered card with optional head + body slots
   ------------------------------------------------------------------- */
.app-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  overflow: hidden;
}
.app-panel-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--app-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.app-panel-title {
  font-family: var(--app-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--app-text);
}
.app-panel-sub {
  font-size: 10.5px;
  color: var(--app-text-muted);
  font-family: var(--app-font-mono);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.app-panel-action {
  color: var(--app-brand);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--app-font-mono);
  letter-spacing: 0.04em;
  text-decoration: none;
  flex-shrink: 0;
}
.app-panel-action:hover { color: var(--app-brand); text-decoration: underline; }
.app-panel-body { padding: 16px 18px; }

/* -------------------------------------------------------------------
   Network logo — coloured tile with three-letter code
   Used by stat cards, recent orders, network status, tabs.
   Soft variants are default; --strong is reserved for emphasis spots.
   ------------------------------------------------------------------- */
.app-net-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: 10px;
  font-family: var(--app-font-display);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.app-net-logo--sm { width: 24px; height: 24px; font-size: 9px; border-radius: 6px; }
.app-net-logo--lg { width: 40px; height: 40px; font-size: 11px; border-radius: 10px; }

.app-net-logo--mtn      { background: var(--net-mtn-bg);     color: var(--net-mtn-text); }
.app-net-logo--telecel  { background: var(--net-telecel-bg); color: var(--net-telecel-text); }
.app-net-logo--at       { background: var(--net-at-bg);      color: var(--net-at-text); }
.app-net-logo--afa      { background: var(--net-at-strong);  color: var(--net-mtn-strong); }

/* Strong variants — used sparingly, e.g. in a loud network header banner */
.app-net-logo--mtn-strong     { background: var(--net-mtn-strong);     color: var(--net-at-strong); }
.app-net-logo--telecel-strong { background: var(--net-telecel-strong); color: #fff; }
.app-net-logo--at-strong      { background: var(--net-at-strong);      color: #fff; }

/* -------------------------------------------------------------------
   Pills + status badges — re-used across orders, transactions, network status
   ------------------------------------------------------------------- */
.app-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--app-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app-status-pill--delivered { background: var(--app-success-soft); color: var(--app-success); }
.app-status-pill--pending   { background: var(--app-warn-soft);    color: #a06a00; }
.app-status-pill--processing{ background: var(--app-warn-soft);    color: #a06a00; }
.app-status-pill--failed    { background: var(--app-danger-soft);  color: var(--app-danger); }
.app-status-pill--info      { background: var(--app-brand-soft);   color: var(--app-brand); }

.app-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.app-status-dot--ok    { background: var(--app-success); box-shadow: 0 0 0 3px rgba(0, 195, 137, 0.18); }
.app-status-dot--slow  { background: var(--app-warn);    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.18); }
.app-status-dot--down  { background: var(--app-danger);  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18); }

/* Tier pill (header) */
.app-tier-pill {
  background: linear-gradient(180deg, #f0f6ff 0%, var(--app-brand-soft) 100%);
  color: var(--app-brand);
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--app-font-mono);
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(0, 117, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 117, 255, 0.1);
}
.app-tier-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--app-brand);
}

/* -------------------------------------------------------------------
   Buttons — primary / secondary / ghost, used in panels
   These are scoped to .app-btn to avoid colliding with Bootstrap .btn
   ------------------------------------------------------------------- */
.app-btn {
  border: 1px solid transparent;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12.5px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.app-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.app-btn--primary {
  background: var(--app-brand);
  color: #fff;
  border-color: var(--app-brand);
  box-shadow: 0 4px 12px var(--app-brand-glow);
}
.app-btn--primary:hover {
  background: #005ce0;
  border-color: #005ce0;
  color: #fff;
  transform: translateY(-1px);
}
.app-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--app-brand-soft), 0 4px 12px var(--app-brand-glow);
}
.app-header-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--app-brand-soft);
}
.app-btn--secondary {
  background: var(--app-surface);
  color: var(--app-text-dim);
  border-color: var(--app-border);
}
.app-btn--secondary:hover {
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
.app-btn--ghost {
  background: transparent;
  color: var(--app-text-dim);
  border-color: transparent;
}
.app-btn--ghost:hover {
  background: var(--app-surface-2);
  color: var(--app-text);
}
.app-btn--sm {
  padding: 7px 12px;
  font-size: 11.5px;
  border-radius: 7px;
}
.app-btn--success {
  background: #157347;
  color: #fff;
  border-color: #157347;
}
.app-btn--success:hover {
  background: #0f5132;
  border-color: #0f5132;
  color: #fff;
}
.app-btn--info {
  background: #0dcaf0;
  color: #055160;
  border-color: #0dcaf0;
}
.app-btn--info:hover {
  background: #31d2f2;
  border-color: #25cff2;
  color: #032830;
}
.app-btn--danger {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}
.app-btn--danger:hover {
  background: #bb2d3b;
  border-color: #b02a37;
  color: #fff;
}

/* -------------------------------------------------------------------
   Modals — add class "app-dc-modal" on the root .modal element
   ------------------------------------------------------------------- */
.modal.app-dc-modal .modal-content {
  border-radius: 16px;
  border: 1px solid var(--app-border);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}
.modal.app-dc-modal .modal-header {
  border-bottom: 1px solid var(--app-border);
  padding: 1rem 1.25rem;
  align-items: flex-start;
}
.modal.app-dc-modal .modal-title {
  font-family: var(--app-font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--app-text);
}
.modal.app-dc-modal .modal-body {
  padding: 1.1rem 1.25rem;
}
.modal.app-dc-modal .modal-footer {
  border-top: 1px solid var(--app-border);
  padding: 0.85rem 1.25rem;
  gap: 8px;
  flex-wrap: wrap;
}
.modal.app-dc-modal .btn-close {
  opacity: 0.65;
}
.modal.app-dc-modal .app-modal-sub {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Slide-in / sidebar modals (referral generator, cart, etc.) */
.modal.app-dc-modal.modal-slide-in .modal-content,
.modal.app-dc-modal .modal-content.p-0 {
  border-radius: 12px 0 0 12px;
}

/* Header pill button (system status / recover payment / etc.) */
.app-header-btn {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-text-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.app-header-btn:hover {
  border-color: var(--app-brand);
  color: var(--app-brand);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.app-header-btn .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-success);
  box-shadow: 0 0 0 3px rgba(0, 195, 137, 0.18);
}

/* -------------------------------------------------------------------
   Promo strip — full-width tinted band with rotated watermark
   ------------------------------------------------------------------- */
.app-promo-strip {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d;
  border-radius: var(--app-radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.app-promo-strip::before {
  content: 'PROMO';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(-12deg);
  font-family: var(--app-font-display);
  font-size: 76px;
  font-weight: 800;
  opacity: 0.07;
  letter-spacing: -0.05em;
  color: #7a5500;
  pointer-events: none;
}
.app-promo-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--app-warn);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 149, 0, 0.4);
}
.app-promo-text { flex: 1; position: relative; z-index: 2; min-width: 0; }
.app-promo-text h4 {
  font-size: 14px;
  font-weight: 700;
  color: #7a5500;
  font-family: var(--app-font-display);
  margin: 0;
}
.app-promo-text p {
  font-size: 12px;
  color: #92400e;
  margin: 2px 0 0;
}
.app-promo-strip .app-btn--promo {
  background: #7a5500;
  color: #fff;
  border-color: #7a5500;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.app-promo-strip .app-btn--promo:hover {
  background: #5e4100;
  border-color: #5e4100;
  color: #fff;
}

/* -------------------------------------------------------------------
   Header strip + greeting — used at top of app pages
   ------------------------------------------------------------------- */
.app-header-strip {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 4px;
}
.app-greeting .label {
  font-family: var(--app-font-mono);
  font-size: 10px;
  color: var(--app-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.app-greeting h1 {
  font-family: var(--app-font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
  color: var(--app-text);
}
.app-greeting .sub {
  font-size: 13px;
  color: var(--app-text-dim);
  margin-top: 8px;
  line-height: 1.45;
  max-width: 42rem;
}
.app-greeting .sub strong {
  color: var(--app-success);
  font-weight: 600;
}
.app-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------
   KPI row layout — 1 wallet hero + 4 dense stats
   Reused on dashboard; can be reused on wallet/orders later.
   ------------------------------------------------------------------- */
.app-kpi-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}

@media (max-width: 1300px) {
  .app-kpi-row {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .app-kpi-row > .app-stat--wallet {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .app-kpi-row {
    grid-template-columns: 1fr 1fr;
  }
  .app-kpi-row > .app-stat--wallet {
    grid-column: 1 / -1;
  }
}
@media (max-width: 420px) {
  .app-kpi-row { grid-template-columns: 1fr; }
}

/* Equal KPI grids — sub-pages (wallet stats, rewards, etc.) */
.app-kpi-row.app-kpi-row--quad {
  grid-template-columns: repeat(4, 1fr);
}
.app-kpi-row.app-kpi-row--tri {
  grid-template-columns: repeat(3, 1fr);
}
.app-kpi-row.app-kpi-row--six {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1300px) {
  .app-kpi-row.app-kpi-row--quad { grid-template-columns: repeat(2, 1fr); }
  .app-kpi-row.app-kpi-row--six { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .app-kpi-row.app-kpi-row--quad,
  .app-kpi-row.app-kpi-row--tri,
  .app-kpi-row.app-kpi-row--six { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .app-kpi-row.app-kpi-row--quad,
  .app-kpi-row.app-kpi-row--tri,
  .app-kpi-row.app-kpi-row--six { grid-template-columns: 1fr; }
}

/* Generic client sub-page shell (checkout, wallet, orders, …) */
.app-client-page {
  padding-bottom: 24px;
}
.app-client-page .app-panel {
  margin-bottom: 18px;
}
.app-page-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.app-orders-accordion .accordion-button:not(.collapsed) {
  box-shadow: none;
}
.app-orders-accordion .table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--app-text-muted);
}
.app-referral-generate {
  background: var(--app-gradient-accent);
  color: #fff;
  border-radius: 16px;
  padding: 2.5rem 1.75rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 117, 255, 0.22);
}
.app-referral-generate h2 {
  color: #fff;
  font-family: var(--app-font-display);
  font-weight: 800;
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
}
.app-referral-generate p {
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 1rem;
}
.app-referral-generate .app-btn--on-accent {
  background: #fff;
  color: var(--app-accent, #0d6efd);
  border-color: #fff;
  font-weight: 700;
}
.app-referral-generate .app-btn--on-accent:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--app-accent, #0d6efd);
}

/* Wallet page — replaces scattered #wallet-page inline rules */
.app-wallet-page .app-wallet-hero {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 50%, #084298 100%);
  border: none;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(13, 110, 253, 0.35);
  color: #fff;
  text-align: center;
  padding: 1.75rem 1.25rem;
}
.app-wallet-page .app-wallet-hero .text-muted {
  color: rgba(255, 255, 255, 0.85) !important;
}
.app-wallet-page .app-wallet-hero .wallet-balance-display {
  color: #fff;
  font-size: 2rem;
  letter-spacing: 0.02em;
  font-weight: 800;
  font-family: var(--app-font-display);
}
.app-wallet-page .app-wallet-action-card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.app-wallet-page .app-wallet-action-card:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
}
.app-wallet-page .app-wallet-action-card .card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 600;
  padding: 1rem 1.25rem;
  border-radius: 1rem 1rem 0 0;
}
.app-wallet-page .wallet-momo-pay-to {
  background: linear-gradient(135deg, #198754 0%, #157347 100%);
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  color: #fff;
}
.app-wallet-page .wallet-momo-pay-to .momo-number {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.app-wallet-page .wallet-momo-pay-to .momo-name {
  font-size: 0.95rem;
  opacity: 0.95;
}
.app-wallet-page .wallet-claim-desc {
  color: #495057;
  line-height: 1.55;
}
.app-wallet-page .wallet-history-card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}
.app-wallet-page .wallet-history-card .card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 600;
  padding: 1rem 1.25rem;
  border-radius: 1rem 1rem 0 0;
}
.app-wallet-page #verifyPaymentModal .modal-content {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
}
.app-wallet-page #verifyPaymentModal .modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1rem 1.25rem;
}
.app-wallet-page #verifyPaymentModal .momo-pay-to-modal {
  background: linear-gradient(135deg, #198754 0%, #157347 100%);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 0.9rem;
}
.app-wallet-page #verifyPaymentModal .momo-pay-to-modal .momo-num {
  font-weight: 700;
  font-size: 1.1rem;
}

/* -------------------------------------------------------------------
   Screen-reader only helper — reused for a11y on icon-only buttons
   ------------------------------------------------------------------- */
.app-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------
   PR 2.2 — Vuexy navbar height override (scoped).
   The Vuexy core stylesheet sets .header-navbar min-height ~80px
   (and .header-navbar .navbar-container .nav .nav-link line-height).
   Inline style alone doesn't beat all those rules. We win the cascade
   here, but ONLY for the compact vertical navbar (PR 2.1 design).
   The horizontal admin navbar is untouched so admin layouts keep
   their existing dimensions.
   ------------------------------------------------------------------- */
/* Compact top bar (vertical layout — client + admin) */
.header-navbar.app-navbar-compact {
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  background: var(--app-surface) !important;
  border-bottom: 1px solid var(--app-border) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 20px rgba(15, 23, 42, 0.03) !important;
}
.header-navbar.app-navbar-compact .navbar-container {
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 16px !important;
  max-width: 100%;
}
.header-navbar.app-navbar-compact .navbar-container .nav-link {
  line-height: 1 !important;
}
.header-navbar.app-navbar-compact .bookmark-wrapper {
  height: 100%;
}
/* Brand cluster (replaces inline styles in panels/navbar.blade.php) */
.app-navbar-brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 2px 4px;
  margin-left: -4px;
  transition: background 0.15s ease;
}
.app-navbar-brand:hover {
  background: var(--app-surface-2);
  color: inherit;
}
.app-navbar-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--app-gradient-accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  font-family: var(--app-font-display);
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0, 117, 255, 0.22);
  flex-shrink: 0;
}
.app-navbar-brand-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--app-text);
  letter-spacing: -0.02em;
  font-family: var(--app-font-display);
}
.header-navbar.app-navbar-compact .menu-toggle .ficon,
.header-navbar.app-navbar-compact .menu-toggle svg {
  color: var(--app-text);
  stroke: var(--app-text);
}

/* ===================================================================
   PR 3 — Place Order panel
   New components for the network-tabbed order entry panel that
   replaces the legacy accordion. Naming continues the .app-* family.
   =================================================================== */

/* Outer panel padding adjustments for forms — slightly tighter than
   default panel-body padding. */
.app-place-order { padding: 0; }

/* Network picker — variant B (brand-tinted tile cards with bottom accent bar)
   Each tile uses --net-accent + --net-tint set per network class. The active
   state pulls in a coloured ring + matching bottom bar. */
.app-net-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 18px 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.app-net-tab {
  --net-accent: var(--app-brand);
  --net-tint: rgba(0, 117, 255, 0.04);
  position: relative;
  flex: initial;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 16px 16px 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  white-space: normal;
  font-family: var(--app-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--app-text);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s;
}
.app-net-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--net-tint);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.18s;
}
.app-net-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--net-accent);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.app-net-tab > * { position: relative; z-index: 1; }
.app-net-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.14);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
.app-net-tab:hover::after { transform: scaleX(0.55); }
.app-net-tab.is-active {
  border-color: var(--net-accent);
  box-shadow:
    0 0 0 4px rgba(0, 117, 255, 0.12),
    0 14px 30px -10px rgba(0, 117, 255, 0.25);
}
.app-net-tab.is-active::before { opacity: 1; }
.app-net-tab.is-active::after { transform: scaleX(1); }

/* Per-network accent + tint */
.app-net-tab.is-mtn     { --net-accent: var(--net-mtn-strong); --net-tint: rgba(255, 203, 5, 0.10); }
.app-net-tab.is-mtn.is-active {
  box-shadow: 0 0 0 4px rgba(255, 203, 5, 0.18), 0 14px 30px -10px rgba(255, 203, 5, 0.30);
}
.app-net-tab.is-telecel { --net-accent: var(--net-telecel-strong); --net-tint: rgba(230, 0, 40, 0.06); }
.app-net-tab.is-telecel.is-active {
  box-shadow: 0 0 0 4px rgba(230, 0, 40, 0.14), 0 14px 30px -10px rgba(230, 0, 40, 0.30);
}
.app-net-tab.is-at      { --net-accent: var(--net-at-strong); --net-tint: rgba(0, 51, 102, 0.06); }
.app-net-tab.is-at.is-active {
  box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.16), 0 14px 30px -10px rgba(0, 51, 102, 0.30);
}
.app-net-tab.is-afa     { --net-accent: var(--app-brand-3, #b347ff); --net-tint: rgba(179, 71, 255, 0.06); }
.app-net-tab.is-afa.is-active {
  box-shadow: 0 0 0 4px rgba(179, 71, 255, 0.16), 0 14px 30px -10px rgba(179, 71, 255, 0.30);
}

.app-net-tab.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.app-net-tab .net-tab-chip {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  font-family: var(--app-font-display);
  flex-shrink: 0;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.18);
}

@media (max-width: 575.98px) {
  .app-net-tabs { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .app-net-tab { padding: 14px 12px 18px; font-size: 13px; }
  .app-net-tab .net-tab-chip { width: 32px; height: 32px; font-size: 10px; }
}

/* Method toggle — Single | Bulk | Paste, with active underline */
.app-method-toggle {
  display: flex;
  padding: 16px 20px 0;
  gap: 4px;
  border-bottom: 1px solid var(--app-border);
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-method-toggle::-webkit-scrollbar { display: none; }
.app-method-toggle button {
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--app-text-muted);
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--app-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.app-method-toggle button:hover { color: var(--app-text-dim); }
.app-method-toggle button.is-active {
  color: var(--app-brand);
  border-bottom-color: var(--app-brand);
}

/* Per-network panes — only the active one shows */
.app-net-pane { display: none; padding: 16px 18px 18px; }
.app-net-pane.is-active { display: block; }

/* Per-method blocks within a pane */
.app-method-pane { display: none; }
.app-method-pane.is-active { display: block; }

/* Suggestion strip */
.app-suggestions {
  margin-bottom: 14px;
}
.app-suggestions-label {
  font-family: var(--app-font-mono);
  font-size: 9px;
  color: var(--app-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.app-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
@media (max-width: 540px) {
  .app-suggestions-grid { grid-template-columns: repeat(2, 1fr); }
}
.app-pkg-chip {
  background: var(--app-surface-2);
  border: 1.5px solid var(--app-border);
  padding: 11px 10px;
  border-radius: var(--app-radius-sm);
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  font-family: inherit;
  width: 100%;
  position: relative;
}
.app-pkg-chip:hover {
  border-color: var(--app-brand);
  background: var(--app-brand-soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.app-pkg-chip.is-selected {
  border-color: var(--app-brand);
  background: var(--app-brand-soft);
  box-shadow: 0 0 0 2px var(--app-brand-glow), 0 8px 20px rgba(0, 117, 255, 0.12);
  transform: translateY(-1px);
}
.app-pkg-chip.is-hot {
  border-color: rgba(255, 149, 0, 0.45);
  background: linear-gradient(180deg, #fffbf0 0%, #fff7e6 100%);
}
.app-pkg-chip .vol {
  font-weight: 800;
  font-size: 13.5px;
  font-family: var(--app-font-display);
  display: block;
  color: var(--app-text);
}
.app-pkg-chip .price {
  font-size: 10.5px;
  color: var(--app-brand);
  font-weight: 600;
  font-family: var(--app-font-mono);
  margin-top: 2px;
}
.app-pkg-chip .badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff9f0a, var(--app-warn));
  color: #1a1208;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 100px;
  margin-bottom: 4px;
  font-family: var(--app-font-mono);
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px rgba(255, 149, 0, 0.35);
}

/* Helper alert (the warning about beneficiary phone) */
.app-helper {
  background: linear-gradient(90deg, rgba(255, 247, 230, 0.95), rgba(255, 251, 240, 0.98));
  border: 1px solid rgba(253, 228, 176, 0.9);
  border-radius: var(--app-radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  color: #7a5500;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(122, 85, 0, 0.06);
}
.app-helper-icon {
  background: var(--app-warn);
  color: #fff;
  width: 16px; height: 16px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 9px;
  font-weight: 700;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Form field rows + labels (lightweight, doesn't fight Bootstrap) */
.app-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 540px) {
  .app-form-row { grid-template-columns: 1fr; }
}
.app-field-label {
  display: block;
  font-family: var(--app-font-mono);
  font-size: 9px;
  color: var(--app-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.app-field-label .req { color: var(--app-danger); margin-left: 3px; }
.app-input,
.app-place-order select,
.app-place-order input[type="text"],
.app-place-order input[type="tel"],
.app-place-order input[type="number"],
.app-place-order input[type="file"],
.app-place-order input[type="date"],
.app-place-order textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  font-family: inherit;
  font-size: 13px;
  color: var(--app-text);
  transition: all 0.12s;
}
.app-input:focus,
.app-place-order select:focus,
.app-place-order input:focus,
.app-place-order textarea:focus {
  outline: none;
  border-color: var(--app-brand);
  background: var(--app-surface);
  box-shadow: 0 0 0 3px var(--app-brand-soft);
}

/* Form action row — primary button + secondary + price preview */
.app-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--app-border);
}
.app-price-preview {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}
.app-price-preview .label {
  font-family: var(--app-font-mono);
  font-size: 9px;
  color: var(--app-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.app-price-preview .amount {
  font-family: var(--app-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--app-brand);
  font-variant-numeric: tabular-nums;
}

/* Out-of-stock notice — shown when network->status !== 'ACTIVE' */
.app-net-offline {
  text-align: center;
  padding: 36px 20px;
  color: var(--app-text-dim);
}
.app-net-offline .icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--app-warn-soft);
  color: #a06a00;
  display: inline-grid; place-items: center;
  margin-bottom: 12px;
  font-size: 18px;
}
.app-net-offline .title {
  font-family: var(--app-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--app-text);
  margin-bottom: 4px;
}
.app-net-offline .sub {
  font-size: 12.5px;
  color: var(--app-text-muted);
}

/* Bulk file input — a styled drag-target-ish container */
.app-bulk-drop {
  border: 1.5px dashed var(--app-border-strong);
  border-radius: 10px;
  padding: 18px;
  background: var(--app-surface-2);
  text-align: center;
  margin-bottom: 14px;
}
.app-bulk-drop .icon {
  font-size: 22px;
  color: var(--app-text-muted);
  margin-bottom: 6px;
}
.app-bulk-drop .label {
  font-size: 12.5px;
  color: var(--app-text-dim);
  margin-bottom: 8px;
}
.app-bulk-drop input[type="file"] {
  display: block;
  margin: 0 auto;
  max-width: 280px;
}

/* Paste-list trigger button (opens existing #textInputModal) */
.app-paste-cta {
  background: var(--app-surface-2);
  border: 1.5px dashed var(--app-border-strong);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  width: 100%;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.app-paste-cta:hover {
  border-color: var(--app-brand);
  background: var(--app-brand-soft);
}
.app-paste-cta .title {
  font-family: var(--app-font-display);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--app-text);
}
.app-paste-cta .sub {
  font-size: 12px;
  color: var(--app-text-muted);
}

/* ===================================================================
   PR 4 — Sales chart + Recent orders panels
   Sit as a 1.55fr / 1fr two-column row between the KPI strip and the
   Place Order panel.
   =================================================================== */

.app-analytics-row {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 980px) {
  .app-analytics-row { grid-template-columns: 1fr; }
}

/* Sales chart panel */
.app-chart-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 20px;
}
.app-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 12px;
}
.app-chart-title {
  font-family: var(--app-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--app-text);
}
.app-chart-sub {
  font-size: 11px;
  color: var(--app-text-muted);
  font-family: var(--app-font-mono);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
/* Range tabs (24H / 7D / 30D / 90D) — segmented control */
.app-range-tabs {
  display: flex;
  gap: 0;
  background: var(--app-surface-3);
  padding: 4px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid var(--app-border);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.app-range-tab {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--app-font-mono);
  letter-spacing: 0.05em;
  color: var(--app-text-dim);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.app-range-tab.is-active {
  background: var(--app-surface);
  color: var(--app-brand);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.app-range-tab.is-disabled {
  color: var(--app-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Chart svg — fills width, fixed height */
.app-chart-svg {
  width: 100%;
  height: 170px;
  display: block;
}

/* Chart legend */
.app-chart-legend {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--app-border);
  flex-wrap: wrap;
}
.app-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--app-text-dim);
}
.app-legend-item .swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.app-legend-item .swatch--revenue {
  background: var(--app-chart-line);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.app-legend-item .swatch--orders {
  background: var(--app-success);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.app-legend-item strong {
  color: var(--app-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Empty state for chart */
/* Empty state — chart panel.
   Sizing intentionally tightened in PR 5: previously the empty card was
   170px tall (matching the SVG height) with a 44px icon, which left a lot
   of dead space on fresh accounts. Now both empty states use the same
   compact treatment so they sit at equal height in the analytics grid. */
.app-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--app-text-muted);
  padding: 24px 20px;
  min-height: 140px;
}
.app-chart-empty .icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--app-brand-soft), rgba(0, 117, 255, 0.08));
  color: var(--app-brand);
  display: grid;
  place-items: center;
  font-size: 17px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 117, 255, 0.12);
}
.app-chart-empty .title {
  font-family: var(--app-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--app-text);
  margin-bottom: 2px;
}
.app-chart-empty .sub {
  font-size: 11.5px;
  color: var(--app-text-muted);
  margin-bottom: 10px;
  max-width: 280px;
}
.app-chart-empty .cta {
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--app-brand);
  text-decoration: none;
  border: 1px solid var(--app-brand);
  padding: 8px 14px;
  border-radius: 100px;
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.app-chart-empty .cta:hover {
  background: var(--app-brand);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--app-brand-glow);
}

/* Recent orders mini-list */
.app-order-row {
  padding: 11px 18px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--app-border);
  transition: background 0.12s;
}
.app-order-row:last-child { border-bottom: none; }
.app-order-row:hover { background: var(--app-surface-2); }
.app-order-info { min-width: 0; }
.app-order-phone {
  font-weight: 600;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--app-text);
}
.app-order-meta {
  font-size: 10.5px;
  color: var(--app-text-muted);
  font-family: var(--app-font-mono);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Empty state — recent orders mini-list.
   Same compact treatment as .app-chart-empty so the two panels sit
   equal-height on a fresh account. */
.app-recent-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--app-text-muted);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.app-recent-empty .icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--app-brand-soft), rgba(0, 117, 255, 0.08));
  color: var(--app-brand);
  display: inline-grid;
  place-items: center;
  margin-bottom: 12px;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(0, 117, 255, 0.12);
}
.app-recent-empty .title {
  font-family: var(--app-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--app-text);
  margin-bottom: 2px;
}
.app-recent-empty .sub {
  font-size: 11.5px;
  color: var(--app-text-muted);
  margin-bottom: 10px;
  max-width: 240px;
}
.app-recent-empty .cta {
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--app-brand);
  text-decoration: none;
  border: 1px solid var(--app-brand);
  padding: 8px 14px;
  border-radius: 100px;
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.app-recent-empty .cta:hover {
  background: var(--app-brand);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--app-brand-glow);
}

/* ===================================================================
   PR 5 — API Console panel
   Replaces the legacy .profile-header card with a clean app-* panel.
   =================================================================== */

.app-api-console-row {
  margin-bottom: 20px;
}

/* Console panel body — structured rows with mono labels and clean values */
.app-api-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--app-border);
  gap: 12px;
  font-size: 12.5px;
}
.app-api-row:last-of-type { border-bottom: none; }
.app-api-row .label {
  color: var(--app-text-muted);
  font-family: var(--app-font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.app-api-row .value {
  font-weight: 600;
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-api-row .value.muted { color: var(--app-text-muted); font-weight: 500; }

/* Network scopes row — chips must wrap; default .value uses nowrap + ellipsis */
.app-api-row.app-api-row--scopes {
  align-items: flex-start;
}
.app-api-row .value.app-api-value--scopes {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  flex: 1 1 0;
  min-width: 0;
}
.app-api-row .value.app-api-value--scopes .app-api-scopes {
  width: 100%;
  justify-content: flex-end;
}
.app-api-scopes-empty {
  display: block;
  width: 100%;
  text-align: right;
  font-weight: 500;
  color: var(--app-text-muted);
  font-size: 12px;
}

/* API key pill — masks the key visually with a copy button slot */
.app-api-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, var(--app-surface-2) 0%, #f1f4fb 100%);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 5px 6px 5px 12px;
  font-family: var(--app-font-mono);
  font-size: 11px;
  color: var(--app-text);
  max-width: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.app-api-key code {
  font-family: var(--app-font-mono);
  font-size: 11px;
  color: var(--app-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.app-api-key-toggle,
.app-api-key-copy {
  background: transparent;
  border: none;
  color: var(--app-text-muted);
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.12s;
}
.app-api-key-toggle:hover,
.app-api-key-copy:hover {
  background: var(--app-brand-soft);
  color: var(--app-brand);
}

/* Status pill on the panel head action slot */
.app-api-active {
  background: var(--app-success-soft);
  color: var(--app-success);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--app-font-mono);
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app-api-active::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--app-success);
  box-shadow: 0 0 0 3px rgba(0, 195, 137, 0.18);
}
.app-api-inactive {
  background: var(--app-surface-3);
  color: var(--app-text-muted);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--app-font-mono);
  letter-spacing: 0.05em;
}

/* Network scope chips inside Console */
.app-api-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.app-api-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 100px;
  padding: 2px 8px 2px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--app-text-dim);
}

/* Footer actions row inside Console */
.app-api-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--app-border);
}
/* Buttons are content-width; the row left-aligns them with a gap. */
.app-api-actions .app-btn {
  flex: 0 0 auto;
  justify-content: center;
}
.app-api-actions .app-btn--danger {
  background: transparent;
  color: var(--app-danger);
  border-color: var(--app-danger-soft);
  margin-left: auto;
}
.app-api-actions .app-btn--danger:hover {
  background: var(--app-danger);
  color: #fff;
  border-color: var(--app-danger);
}

/* Toast — shown briefly after Copy key. Inline, no library. */
.app-toast {
  position: fixed;
  bottom: 100px;
  right: 24px;
  background: var(--app-text);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
  z-index: 9999;
}
.app-toast.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   PR 6 — Recent activity feed
   Below the Place Order panel. Single-column timeline of recent events
   from orders + wallet transactions + referral rewards.
   =================================================================== */

.app-activity-row {
  padding: 11px 18px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid var(--app-border);
  font-size: 12.5px;
  line-height: 1.45;
  transition: background 0.12s;
}
.app-activity-row:last-child { border-bottom: none; }
.app-activity-row:hover { background: var(--app-surface-2); }

.app-activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.app-activity-icon > i {
  /* Force the FA glyph to be visible regardless of parent display quirks. */
  display: inline-block;
  line-height: 1;
  font-size: inherit;
}
.app-activity-icon--success { background: var(--app-success-soft); color: var(--app-success); }
.app-activity-icon--warn    { background: var(--app-warn-soft);    color: #a06a00; }
.app-activity-icon--info    { background: var(--app-brand-soft);   color: var(--app-brand); }
.app-activity-icon--danger  { background: var(--app-danger-soft);  color: var(--app-danger); }
.app-activity-icon--neutral { background: var(--app-surface-3);    color: var(--app-text-dim); }

.app-activity-text {
  color: var(--app-text);
  min-width: 0;
}
.app-activity-text strong {
  font-weight: 600;
  color: var(--app-text);
}

.app-activity-time {
  font-size: 10.5px;
  color: var(--app-text-muted);
  font-family: var(--app-font-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Empty state — same compact treatment as recent-orders / chart empty */
.app-activity-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--app-text-muted);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.app-activity-empty .icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--app-brand-soft), rgba(0, 117, 255, 0.08));
  color: var(--app-brand);
  display: inline-grid;
  place-items: center;
  margin-bottom: 12px;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(0, 117, 255, 0.12);
}
.app-activity-empty .title {
  font-family: var(--app-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--app-text);
  margin-bottom: 2px;
}
.app-activity-empty .sub {
  font-size: 11.5px;
  color: var(--app-text-muted);
  max-width: 320px;
}

/* Section spacing for the activity panel */
.app-activity-section {
  margin-top: 18px;
  margin-bottom: 20px;
}

/* ===================================================================
   PR 8 — Client sidebar (.main-menu.app-side)
   Restyled for client users only. Admin sidebar (panels/sidebar.blade.php)
   is untouched and keeps its Vuexy treatment.

   Selectors are ALL prefixed .app-side or scoped to .main-menu.app-side
   so they never collide with the admin sidebar's .navigation cascade.
   =================================================================== */

.main-menu.app-side {
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Brand row — matches navbar treatment */
.app-side-brand {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}
.app-side-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.app-side-brand-link:hover { text-decoration: none; }

.app-side-brand-chip {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0075ff, #6a4cff);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-family: var(--app-font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.app-side-brand-text {
  font-family: var(--app-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--app-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.app-side-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--app-text-muted);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.12s;
}
.app-side-toggle:hover { background: var(--app-surface-2); color: var(--app-text); }

.app-side-divider {
  height: 1px;
  background: var(--app-border);
  margin: 0 12px;
  flex-shrink: 0;
}

/* Scrollable content region */
/* PerfectScrollbar wrapper. Vuexy's app-menu.js calls
   `new PerfectScrollbar('.main-menu-content', ...)` so we need this element
   in the DOM. PerfectScrollbar takes over scrolling once it initialises;
   the overflow + scrollbar fallback rules below handle the case where the
   JS hasn't loaded yet (or where we're on a touch device, in which case
   Vuexy uses native scroll instead). */
.main-menu.app-side .main-menu-content {
  flex: 1 1 auto;
  position: relative; /* PerfectScrollbar requires non-static positioning */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--app-border-strong) transparent;
}
.main-menu.app-side .main-menu-content::-webkit-scrollbar { width: 6px; }
.main-menu.app-side .main-menu-content::-webkit-scrollbar-track { background: transparent; }
.main-menu.app-side .main-menu-content::-webkit-scrollbar-thumb {
  background: var(--app-border-strong);
  border-radius: 3px;
}
.main-menu.app-side .main-menu-content::-webkit-scrollbar-thumb:hover {
  background: var(--app-text-muted);
}

.app-side-content {
  padding: 14px 10px 10px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Nav lists */
.app-side-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-side-item { margin-bottom: 1px; }

.app-side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--app-text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--app-font-body);
  transition: all 0.12s;
  position: relative;
}
.app-side-link:hover {
  background: var(--app-surface-2);
  color: var(--app-text);
  text-decoration: none;
}
.app-side-link--muted { color: var(--app-text-muted); }

.app-side-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--app-text-muted);
  flex-shrink: 0;
  line-height: 1;
}
/* Force FA font even if a parent stylesheet (Vuexy or otherwise) tries to
   override it. Specificity bumped to .main-menu.app-side scope so we beat
   any global `i` rule. font-weight: 900 is required for FA Solid (.fas)
   to actually display the correct glyph. */
.main-menu.app-side .app-side-icon i,
.main-menu.app-side .app-side-icon > i {
  display: inline-block;
  line-height: 1;
  font-size: inherit;
  /* FA6 primary; FA5 fallback if a page loads the legacy bundle */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
}

.app-side-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active state */
.app-side-item.is-active .app-side-link {
  background: var(--app-brand-soft);
  color: var(--app-brand);
  font-weight: 600;
}
.app-side-item.is-active .app-side-icon { color: var(--app-brand); }
.app-side-item.is-active .app-side-link::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--app-brand);
}

/* Section heading */
.app-side-section { margin-top: 14px; }
.app-side-section-label {
  font-family: var(--app-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  padding: 0 12px 6px;
}

/* Footer (logout) — pushed to bottom */
.app-side-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--app-border);
}

/* Beta-style pill at the right of a nav item */
.app-side-pill {
  font-family: var(--app-font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.app-side-pill--beta {
  background: var(--app-warn-soft);
  color: #a06a00;
}

/* Collapsed state — only shows the icons. Vuexy adds .menu-collapsed
   to <body> or a parent when the nav is collapsed via .modern-nav-toggle. */
.menu-collapsed:not(.menu-open) .main-menu.app-side .app-side-brand-text,
.menu-collapsed:not(.menu-open) .main-menu.app-side .app-side-label,
.menu-collapsed:not(.menu-open) .main-menu.app-side .app-side-pill,
.menu-collapsed:not(.menu-open) .main-menu.app-side .app-side-section-label {
  display: none;
}
.menu-collapsed:not(.menu-open) .main-menu.app-side .app-side-link {
  justify-content: center;
}

/* ===================================================================
   Auth — client login / register (fullLayoutMaster blank pages)
   Aligns with dashboard app tokens + typography.
   =================================================================== */

.auth-app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-6) var(--ds-space-4);
  font-family: var(--app-font-body);
  color: var(--app-text);
  background:
    radial-gradient(80% 50% at 50% -10%, rgba(0, 117, 255, 0.12) 0%, transparent 55%),
    radial-gradient(60% 40% at 100% 100%, rgba(179, 71, 255, 0.08) 0%, transparent 45%),
    linear-gradient(165deg, var(--app-bg) 0%, var(--app-surface-3) 45%, #e2e8f0 100%);
}

.auth-app-inner {
  width: 100%;
  max-width: 420px;
}

.auth-app-inner--wide {
  max-width: 440px;
}

/* Wider column — terms / video acceptance flow */
.auth-app-inner--terms {
  max-width: 720px;
}

.auth-app-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  width: 100%;
}

.auth-app-card .video-player iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--app-radius-md);
  background: var(--app-surface-3);
}

.auth-app-card .card-title-auth {
  font-family: var(--app-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--app-text);
  margin-bottom: var(--ds-space-3);
}

.auth-app-card .btn-success {
  border: none;
  border-radius: 10px;
  font-weight: 700;
  padding: 0.7rem 1rem;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
}

.auth-app-card .btn-success:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.auth-app-brand {
  text-align: center;
  margin-bottom: var(--ds-space-6);
}

.auth-app-brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--ds-space-3);
}

.auth-app-brand-link:hover {
  color: inherit;
  opacity: 0.92;
}

.auth-app-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--app-gradient-accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  font-family: var(--app-font-display);
  letter-spacing: 0.02em;
  box-shadow: 0 6px 20px rgba(0, 117, 255, 0.28);
}

.auth-app-title {
  font-family: var(--app-font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--app-text);
  margin: 0;
}

.auth-app-tagline {
  font-size: 0.9375rem;
  color: var(--app-text-dim);
  margin: 0;
  line-height: 1.45;
}

.auth-app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-card), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  padding: var(--ds-space-8) var(--ds-space-6);
  position: relative;
  overflow: hidden;
}

.auth-app-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--app-gradient-accent);
  opacity: 0.95;
}

.auth-app-card > * {
  position: relative;
  z-index: 1;
}

.auth-app-card .form-control,
.auth-app-card .form-control-merge {
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  padding: 0.65rem 0.85rem;
  font-size: 0.9375rem;
  color: var(--app-text);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.auth-app-card .form-control:focus,
.auth-app-card .form-control-merge:focus {
  border-color: var(--app-brand);
  background: var(--app-surface);
  box-shadow: 0 0 0 3px var(--app-brand-soft);
  outline: none;
}

.auth-app-card .input-group-merge .input-group-text {
  border-radius: 0 10px 10px 0;
  border: 1px solid var(--app-border);
  border-left: none;
  background: var(--app-surface-2);
  color: var(--app-text-muted);
}

.auth-app-card .input-group-merge .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.auth-app-card .btn-primary {
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.7rem 1rem;
  background: var(--app-brand);
  box-shadow: 0 4px 14px var(--app-brand-glow);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.auth-app-card .btn-primary:hover {
  background: #0068e6;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 117, 255, 0.35);
}

.auth-app-card .btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--app-brand-soft), 0 4px 14px var(--app-brand-glow);
}

.auth-app-footer {
  text-align: center;
  margin-top: var(--ds-space-5);
  font-size: 0.875rem;
  color: var(--app-text-muted);
  line-height: 1.6;
}

.auth-app-footer a {
  color: var(--app-brand);
  font-weight: 600;
  text-decoration: none;
}

.auth-app-footer a:hover {
  text-decoration: underline;
  color: var(--app-brand);
}

@media (max-width: 479px) {
  .auth-app {
    padding: var(--ds-space-4) var(--ds-space-3);
  }
  .auth-app-card {
    padding: var(--ds-space-6) var(--ds-space-4);
  }
}

/* ===================================================================
   Marketing homepage — resources/views/toppily/index.blade.php
   Scoped with body.index-page to avoid leaking into the Vuexy app shell.
   =================================================================== */

body.index-page {
  margin: 0;
  font-family: var(--app-font-body), var(--ds-font-sans);
  line-height: 1.6;
  color: var(--app-text);
  background: var(--app-bg);
  overflow-x: hidden;
}

body.index-page .dc-home-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--app-border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: box-shadow 0.25s ease, padding 0.25s ease;
  padding: 14px 0;
}

body.index-page .dc-home-header.is-scrolled {
  box-shadow: var(--app-shadow-card);
  padding: 10px 0;
}

body.index-page .dc-home-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

body.index-page .dc-home-brand:hover {
  color: inherit;
  opacity: 0.92;
}

body.index-page .dc-home-brand-mark {
  width: 40px;
  height: 40px;
  background: var(--app-gradient-accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  font-family: var(--app-font-display);
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(0, 117, 255, 0.28);
}

body.index-page .dc-home-brand-title {
  font-family: var(--app-font-display);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--app-brand) 0%, var(--app-brand-2) 55%, var(--app-brand-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.index-page .dc-home-nav .nav-link {
  color: var(--app-text-dim) !important;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 6px;
  padding: 8px 14px !important;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}

body.index-page .dc-home-nav .nav-link:hover,
body.index-page .dc-home-nav .nav-link.active {
  background: var(--app-brand-soft);
  color: var(--app-brand) !important;
}

body.index-page .dc-home-nav .btn-dc-primary {
  background: var(--app-brand);
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: 0 4px 14px var(--app-brand-glow);
  border: none;
  margin-left: 8px;
}

body.index-page .dc-home-nav .btn-dc-primary:hover {
  background: #0068e6;
  color: #fff !important;
  transform: translateY(-1px);
}

body.index-page .navbar-toggler {
  border-color: var(--app-border);
  border-radius: 10px;
}

body.index-page .hero-dc {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 88px;
  background:
    radial-gradient(80% 60% at 20% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(60% 50% at 90% 80%, rgba(179, 71, 255, 0.2) 0%, transparent 45%),
    linear-gradient(145deg, #0a0e27 0%, #1e1b4b 42%, var(--app-brand) 88%, var(--ds-accent) 100%);
}

body.index-page .hero-dc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.04)" points="0,1000 1000,0 1000,1000"/></svg>');
  background-size: cover;
  pointer-events: none;
}

body.index-page .hero-dc-inner {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 20px;
}

body.index-page .hero-dc-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 22px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}

body.index-page .hero-dc h1 {
  font-family: var(--app-font-display);
  font-size: clamp(2.1rem, 5vw, 3.35rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin-bottom: 1.25rem;
}

body.index-page .hero-dc .hero-accent {
  color: #7cf5d5;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

body.index-page .hero-dc-lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  margin-bottom: 2rem;
  opacity: 0.94;
  max-width: 36rem;
  line-height: 1.55;
}

body.index-page .hero-dc-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

body.index-page .btn-dc-hero {
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}

body.index-page .btn-dc-hero--solid {
  background: var(--app-success);
  color: #fff !important;
  box-shadow: 0 6px 24px rgba(0, 195, 137, 0.35);
  border: none;
}

body.index-page .btn-dc-hero--solid:hover {
  color: #fff !important;
  transform: translateY(-2px);
  filter: brightness(1.06);
}

body.index-page .btn-dc-hero--outline {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

body.index-page .btn-dc-hero--outline:hover {
  background: #fff;
  color: var(--app-brand) !important;
  transform: translateY(-2px);
}

body.index-page .dc-section {
  padding: 96px 0;
}

body.index-page .dc-section--surface {
  background: var(--app-surface);
}

body.index-page .dc-section-head {
  text-align: center;
  margin-bottom: 56px;
}

body.index-page .dc-section-head h2 {
  font-family: var(--app-font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--app-text);
  margin-bottom: 12px;
}

body.index-page .dc-section-head .dc-gradient-text {
  background: linear-gradient(135deg, var(--app-brand), var(--app-brand-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.index-page .dc-section-head p {
  font-size: 1.05rem;
  color: var(--app-text-muted);
  max-width: 560px;
  margin: 0 auto;
}

body.index-page .dc-feature-card {
  background: var(--app-surface);
  border-radius: var(--app-radius-lg);
  padding: 36px 28px;
  text-align: center;
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-card);
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
  position: relative;
  overflow: hidden;
}

body.index-page .dc-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--app-gradient-accent);
}

body.index-page .dc-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--app-shadow-card-hover);
}

body.index-page .dc-feature-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 16px;
  background: var(--app-gradient-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.65rem;
}

body.index-page .dc-feature-card h3 {
  font-family: var(--app-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--app-text);
}

body.index-page .dc-feature-card p {
  color: var(--app-text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

body.index-page .dc-stats {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(91, 110, 245, 0.25) 0%, transparent 55%),
    var(--app-gradient-hero);
  padding: 88px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

body.index-page .dc-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.04)" points="0,1000 1000,0 1000,1000"/></svg>');
  background-size: cover;
  pointer-events: none;
}

body.index-page .dc-stat {
  text-align: center;
  padding: 20px;
  position: relative;
  z-index: 2;
}

body.index-page .dc-stat-num {
  font-family: var(--app-font-display);
  font-size: clamp(2.2rem, 4vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #93c5fd;
  margin-bottom: 8px;
}

body.index-page .dc-stat-label {
  font-size: 0.95rem;
  opacity: 0.88;
  font-weight: 500;
}

body.index-page .dc-cta-card {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(91, 110, 245, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, var(--app-brand) 0%, var(--app-brand-2) 50%, var(--app-brand-3) 100%);
  color: #fff;
  border-radius: var(--app-radius-xl);
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 117, 255, 0.28);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.index-page .dc-cta-card h2 {
  font-family: var(--app-font-display);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

body.index-page .dc-cta-card p {
  font-size: 1.05rem;
  margin-bottom: 26px;
  opacity: 0.92;
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

body.index-page .dc-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

body.index-page .btn-dc-cta {
  padding: 14px 26px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s;
}

body.index-page .btn-dc-cta--solid {
  background: var(--app-success);
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(0, 195, 137, 0.35);
}

body.index-page .btn-dc-cta--solid:hover {
  color: #fff !important;
  transform: translateY(-2px);
}

body.index-page .btn-dc-cta--ghost {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

body.index-page .btn-dc-cta--ghost:hover {
  background: #fff;
  color: var(--app-brand) !important;
}

body.index-page .dc-footer {
  background: #0a0e27;
  color: rgba(255, 255, 255, 0.82);
  padding: 40px 0;
  text-align: center;
}

body.index-page .dc-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--app-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
}

body.index-page .dc-footer-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--app-gradient-accent);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
}

body.index-page .dc-scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--app-gradient-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s, transform 0.2s;
  box-shadow: 0 8px 24px rgba(0, 117, 255, 0.35);
  z-index: 1000;
  border: none;
  text-decoration: none;
}

body.index-page .dc-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
}

body.index-page .dc-scroll-top:hover {
  transform: translateY(-3px);
  color: #fff;
}

@media (max-width: 768px) {
  body.index-page .hero-dc-actions {
    flex-direction: column;
    align-items: stretch;
  }
  body.index-page .btn-dc-hero {
    justify-content: center;
  }
  body.index-page .dc-cta-card {
    padding: 36px 22px;
  }
  body.index-page .dc-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===================================================================
   API reference (OpenAPI / Swagger) — toppily/openapi-docs.blade.php
   =================================================================== */

body.dc-api-docs {
  margin: 0;
  font-family: var(--app-font-body), var(--ds-font-sans);
  background: var(--app-bg);
  color: var(--app-text);
  min-height: 100vh;
  line-height: 1.5;
}

body.dc-api-docs .dc-api-shell {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 var(--ds-space-4) var(--ds-space-10);
}

body.dc-api-docs .dc-api-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4) 0;
  border-bottom: 1px solid var(--app-border);
  background: rgba(248, 249, 252, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: var(--ds-space-5);
}

body.dc-api-docs .dc-api-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

body.dc-api-docs .dc-api-brand:hover {
  color: inherit;
  opacity: 0.9;
}

body.dc-api-docs .dc-api-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--app-gradient-accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: var(--app-font-display);
  box-shadow: 0 4px 14px rgba(0, 117, 255, 0.22);
}

body.dc-api-docs .dc-api-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}

body.dc-api-docs .dc-api-brand-title {
  font-family: var(--app-font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

body.dc-api-docs .dc-api-brand-sub {
  font-family: var(--app-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

body.dc-api-docs .dc-api-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-4);
}

body.dc-api-docs .dc-api-nav a {
  color: var(--app-text-dim);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
}

body.dc-api-docs .dc-api-nav a:hover {
  color: var(--app-brand);
}

body.dc-api-docs .dc-api-nav .dc-api-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text-dim);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.dc-api-docs .dc-api-nav .dc-api-nav-pill:hover {
  border-color: var(--app-brand);
  color: var(--app-brand);
}

body.dc-api-docs .dc-api-intro {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-card);
  padding: var(--ds-space-5) var(--ds-space-6);
  margin-bottom: var(--ds-space-5);
}

body.dc-api-docs .dc-api-intro h1 {
  font-family: var(--app-font-display);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 var(--ds-space-2);
  color: var(--app-text);
}

body.dc-api-docs .dc-api-intro p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--app-text-dim);
  line-height: 1.55;
  max-width: 52rem;
}

body.dc-api-docs .dc-api-intro code {
  font-family: var(--app-font-mono);
  font-size: 0.8125rem;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}

body.dc-api-docs .dc-api-intro strong {
  color: var(--app-text);
  font-weight: 600;
}

body.dc-api-docs .dc-api-swagger {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-card);
  padding: var(--ds-space-2);
  min-height: 65vh;
}

/* Swagger UI sits on light surface — soften default topbar clash */
body.dc-api-docs .swagger-ui .topbar {
  display: none;
}

body.dc-api-docs .dc-api-footer {
  text-align: center;
  padding: var(--ds-space-8) var(--ds-space-4) var(--ds-space-6);
  font-size: 0.8125rem;
  color: var(--app-text-muted);
}

body.dc-api-docs .dc-api-footer a {
  color: var(--app-brand);
  font-weight: 600;
  text-decoration: none;
}

body.dc-api-docs .dc-api-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 576px) {
  body.dc-api-docs .dc-api-topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  body.dc-api-docs .dc-api-nav {
    width: 100%;
  }
}

/* =================================================================
   Result checkers — WAEC PINs (BECE / WASSCE / general WAEC)
   Sits below Place Order, above Recent activity. Per-tile accent set
   via --c-accent / --c-tint on .app-checker-tile[data-checker="..."].
   ================================================================= */
.app-checker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.app-checker-tile {
  --c-accent: var(--app-brand);
  --c-tint: rgba(0, 117, 255, 0.05);
  position: relative;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  text-align: left;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s;
}
.app-checker-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-tint);
  opacity: 0.85;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.app-checker-tile > * { position: relative; z-index: 1; }
.app-checker-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(15, 23, 42, 0.16);
  border-color: var(--c-accent);
  color: inherit;
  text-decoration: none;
}
.app-checker-tile[data-checker="waec"]   { --c-accent: #c8102e; --c-tint: rgba(200, 16, 46, 0.05); }
.app-checker-tile[data-checker="bece"]   { --c-accent: #15803d; --c-tint: rgba(21, 128, 61, 0.05); }
.app-checker-tile[data-checker="wassce"] { --c-accent: #1d4ed8; --c-tint: rgba(29, 78, 216, 0.05); }

.app-checker-icon {
  width: 52px; height: 52px;
  border-radius: 13px;
  background: var(--c-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.app-checker-body .lbl {
  font-family: var(--app-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 4px;
}
.app-checker-body .name {
  font-family: var(--app-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--app-text);
}
.app-checker-body .sub {
  font-size: 12px;
  color: var(--app-text-dim);
  margin-top: 3px;
  line-height: 1.4;
}
.app-checker-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.app-checker-price {
  font-family: var(--app-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--app-text);
}
.app-checker-price small {
  font-size: 11px;
  color: var(--app-text-muted);
  font-weight: 500;
  margin-right: 2px;
}
.app-checker-buy {
  background: var(--c-accent);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--app-font-body);
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, color 0.12s;
}
.app-checker-buy:hover {
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
  filter: brightness(1.05);
  box-shadow: 0 8px 16px -4px rgba(15, 23, 42, 0.25);
}
.app-checker-buy i { font-size: 11px; }

@media (max-width: 880px) {
  .app-checker-grid { grid-template-columns: 1fr; }
  .app-checker-tile { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .app-checker-cta {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* =================================================================
   WhatsApp floating action buttons — Contact (primary, pulsing) +
   Channel (secondary). Positioned bottom-LEFT so they don't fight
   the existing #floating-cart on the right.
   ================================================================= */
.app-wa-fab {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 9998;
  display: flex;
  flex-direction: column-reverse;
  gap: 14px;
}
.app-wa-btn {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s;
}
.app-wa-btn:hover { transform: scale(1.08); color: #fff; text-decoration: none; }
.app-wa-btn--contact {
  background: #25D366;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
}
.app-wa-btn--contact::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.45);
  animation: app-wa-pulse 2s infinite;
  z-index: -1;
}
.app-wa-btn--contact:hover { box-shadow: 0 14px 36px rgba(37, 211, 102, 0.6); }
.app-wa-btn--channel {
  width: 50px; height: 50px;
  font-size: 22px;
  background: #128C7E;
  box-shadow: 0 8px 20px rgba(18, 140, 126, 0.4);
}
.app-wa-btn--channel:hover { box-shadow: 0 12px 28px rgba(18, 140, 126, 0.55); }
@keyframes app-wa-pulse {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Tooltip slides out to the RIGHT (FAB is on the left edge) */
.app-wa-btn .app-wa-tip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: #0a0e27;
  color: #fff;
  padding: 8px 14px;
  border-radius: 9px;
  font-family: var(--app-font-body);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.app-wa-btn .app-wa-tip::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #0a0e27;
}
.app-wa-btn .app-wa-tip strong {
  display: block;
  font-weight: 700;
  font-size: 12.5px;
}
.app-wa-btn .app-wa-tip small {
  display: block;
  font-family: var(--app-font-mono);
  font-size: 9.5px;
  color: #94a3b8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.app-wa-btn:hover .app-wa-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Hide tooltips on touch — long labels would clip on small screens */
@media (max-width: 575.98px) {
  .app-wa-btn .app-wa-tip { display: none; }
  .app-wa-fab { left: 16px; bottom: 16px; gap: 10px; }
  .app-wa-btn { width: 52px; height: 52px; font-size: 24px; }
  .app-wa-btn--channel { width: 44px; height: 44px; font-size: 18px; }
}

/* =================================================================
   Package selector — custom rich dropdown that wraps a hidden <select>
   The underlying <select.app-pkg-native> stays in the DOM and remains
   the source of truth for form submission + existing chip-click and
   change-event JS. The trigger + popover sit on top.
   ================================================================= */
.app-pkg-select {
  position: relative;
  width: 100%;
}
.app-pkg-native {
  /* Visually hidden but still focusable so HTML5 required validation
     can target the field without the browser throwing
     "An invalid form control … is not focusable" at submit. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
}
.app-pkg-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--app-surface);
  border: 1.5px solid var(--app-border);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-family: var(--app-font-body);
  font-size: 14px;
  color: var(--app-text);
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.app-pkg-trigger:hover { border-color: var(--app-border-strong); }
.app-pkg-select.is-open .app-pkg-trigger {
  border-color: var(--app-brand);
  box-shadow: 0 0 0 4px rgba(0, 117, 255, 0.12);
}
.app-pkg-trigger-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--app-text);
}
.app-pkg-trigger-text.is-placeholder { color: var(--app-text-muted); }
.app-pkg-chev {
  color: var(--app-text-muted);
  font-size: 12px;
  flex-shrink: 0;
  transition: transform 0.2s, color 0.15s;
}
.app-pkg-select.is-open .app-pkg-chev {
  transform: rotate(180deg);
  color: var(--app-brand);
}

/* Inline-mode override — when .app-pkg-select carries .is-inline, the
   trigger + popover are gone and a permanently-visible panel sits in
   the document flow. The .app-pkg-inline-panel reuses popover styling
   but drops the float / animate / shadow chrome.
   The mobile media-query below ALSO neutralises the bottom-sheet rules
   that .app-pkg-pop-panel inherits at <=640px — without that reset the
   inline panel would be transform: translateY(100%) and pushed offscreen. */
.app-pkg-select.is-inline { position: static; }
.app-pkg-inline-panel {
  margin-top: 0;
  box-shadow: none;
  border-radius: 12px;
}
.app-pkg-inline-panel .app-pkg-grid {
  max-height: 380px;        /* scroll inside the panel for long lists */
}
@media (max-width: 640px) {
  /* Cancel the inherited bottom-sheet positioning so the inline panel
     stays in document flow at phone widths. Higher specificity
     (.app-pkg-pop-panel.app-pkg-inline-panel) beats the plain
     .app-pkg-pop-panel mobile rule above. */
  .app-pkg-pop-panel.app-pkg-inline-panel {
    position: static;
    left: auto; right: auto; bottom: auto;
    max-height: none;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .app-pkg-pop-panel.app-pkg-inline-panel .app-pkg-pop-head {
    padding: 10px 12px;     /* drop the grip-handle padding */
  }
  .app-pkg-pop-panel.app-pkg-inline-panel .app-pkg-pop-grip,
  .app-pkg-pop-panel.app-pkg-inline-panel .app-pkg-pop-close { display: none; }
  .app-pkg-pop-panel.app-pkg-inline-panel .app-pkg-grid {
    max-height: 60vh;       /* phone — keep below the fold but scrollable */
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Option C — card-grid popover.
   Desktop: anchored popover under the trigger.
   Mobile (<=640px): fixed bottom-sheet with backdrop. */
.app-pkg-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 50;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.app-pkg-select.is-open .app-pkg-pop {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.app-pkg-pop-backdrop {
  display: none;          /* shown only on mobile (see media query) */
}
.app-pkg-pop-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  max-height: 420px;
  display: flex;
  flex-direction: column;
}
.app-pkg-pop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-2);
  position: relative;
}
.app-pkg-pop-grip { display: none; }   /* mobile-only handle */
.app-pkg-pop-ttl {
  font-family: var(--app-font-mono);
  font-size: 10px;
  color: var(--app-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-pkg-pop-ttl .count { color: var(--app-text); font-weight: 700; }
.app-pkg-pop-ttl .net { margin-left: 4px; }
.app-pkg-sort {
  display: inline-flex;
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.app-pkg-sort button {
  border: 0;
  background: transparent;
  padding: 4px 8px;
  font-size: 10px;
  font-family: var(--app-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  cursor: pointer;
  color: var(--app-text-muted);
  transition: background 0.12s, color 0.12s;
}
.app-pkg-sort button:hover { color: var(--app-text); }
.app-pkg-sort button.is-active {
  background: var(--app-brand-soft, #e8f0fe);
  color: var(--app-brand);
  font-weight: 700;
}
.app-pkg-pop-close {
  display: none;          /* mobile-only X */
  border: 0;
  background: transparent;
  color: var(--app-text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
}

.app-pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

.app-pkg-card {
  position: relative;
  background: var(--app-surface);
  border: 1.5px solid var(--app-border);
  border-radius: 10px;
  padding: 12px 10px 10px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s, border-color 0.12s, background 0.12s, box-shadow 0.12s;
  font-family: var(--app-font-body);
}
.app-pkg-card:hover {
  border-color: var(--app-brand);
  background: var(--app-brand-soft, #e8f0fe);
  transform: translateY(-1px);
}
.app-pkg-card.is-active {
  border-color: var(--app-brand);
  background: var(--app-brand-soft, #e8f0fe);
  box-shadow: 0 0 0 2px rgba(0, 117, 255, 0.18);
}
.app-pkg-card.is-selected {
  border-color: var(--app-brand);
  background: var(--app-brand-soft, #e8f0fe);
  box-shadow: 0 0 0 2px rgba(0, 117, 255, 0.18), 0 8px 20px rgba(0, 117, 255, 0.12);
}
.app-pkg-card.is-hot {
  border-color: rgba(255, 149, 0, 0.45);
  background: linear-gradient(180deg, #fffbf0 0%, #fff7e6 100%);
}
.app-pkg-card.is-hot.is-active,
.app-pkg-card.is-hot.is-selected {
  border-color: var(--app-brand);
  background: var(--app-brand-soft, #e8f0fe);
}
.app-pkg-card .vol {
  display: block;
  font-family: var(--app-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--app-text);
}
.app-pkg-card .price {
  display: block;
  font-family: var(--app-font-mono);
  font-size: 11px;
  color: var(--app-brand);
  font-weight: 700;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.app-pkg-card .per {
  display: block;
  font-family: var(--app-font-mono);
  font-size: 9px;
  color: var(--app-text-muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.app-pkg-card .badge {
  position: absolute;
  top: -7px;
  right: 8px;
  font-family: var(--app-font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 100px;
  white-space: nowrap;
}
.app-pkg-card .badge--hot {
  background: linear-gradient(135deg, #ff9f0a, var(--app-warn, #f59e0b));
  color: #1a1208;
  box-shadow: 0 2px 6px rgba(255, 149, 0, 0.35);
}
.app-pkg-card .badge--best {
  background: var(--app-success, #10b981);
  color: #fff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

.app-pkg-pop-empty {
  padding: 24px 12px;
  font-size: 13px;
  color: var(--app-text-muted);
  text-align: center;
  grid-column: 1 / -1;
}

/* Mobile — bottom sheet pattern.
   Anchored fixed to viewport bottom with a backdrop + grip handle.
   Two-column card grid; max 70vh so the keyboard never eats it. */
@media (max-width: 640px) {
  .app-pkg-pop {
    position: fixed;
    inset: 0;
    transform: none;
    transition: opacity 0.2s ease;
  }
  .app-pkg-select.is-open .app-pkg-pop { transform: none; }
  .app-pkg-pop-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
  }
  .app-pkg-pop-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 70vh;
    border-radius: 18px 18px 0 0;
    border: 0;
    border-top: 1px solid var(--app-border);
    box-shadow: 0 -16px 40px rgba(15, 23, 42, 0.3);
    transform: translateY(100%);
    transition: transform 0.22s ease;
  }
  .app-pkg-select.is-open .app-pkg-pop-panel { transform: translateY(0); }
  .app-pkg-pop-head {
    padding: 18px 14px 10px;
  }
  .app-pkg-pop-grip {
    display: block;
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 100px;
    background: var(--app-border-strong, #cbd5e1);
  }
  .app-pkg-pop-close { display: inline-flex; align-items: center; }
  .app-pkg-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .app-pkg-sort button { padding: 5px 8px; font-size: 10px; }
}

/* Respect prefers-reduced-motion — drop the slide-up + scale animations. */
@media (prefers-reduced-motion: reduce) {
  .app-pkg-pop,
  .app-pkg-pop-panel,
  .app-pkg-card { transition: none; }
  .app-pkg-card:hover { transform: none; }
}

/* Body lock — applied while the bottom sheet is up on mobile so the page
   behind doesn't scroll. No-op on desktop (sheet is anchored, not fixed). */
@media (max-width: 640px) {
  body.app-pkg-lock { overflow: hidden; }
}

/* -------------------------------------------------------------------
   Per-network ordering modal.
   Network tab → opens .app-place-modal for that network. Desktop = centered
   modal (~640px). Mobile (<=640px) = slide-up bottom sheet (92vh max).
   Body scroll locked while open via .app-pom-lock on <body>.
   ------------------------------------------------------------------- */
.app-place-modal {
  position: fixed;
  inset: 0;
  z-index: 1040;            /* below Bootstrap modal-backdrop (1050) so the
                               existing #textInputModal / #paymentModal still
                               open above. */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.app-place-modal[hidden] { display: none; }
.app-place-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.app-place-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.app-place-modal-panel {
  position: relative;
  background: var(--app-surface);
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: top center;
  transition: transform 0.22s ease;
}
.app-place-modal.is-open .app-place-modal-panel {
  transform: translateY(0) scale(1);
}
.app-place-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-2);
  position: relative;
  flex-shrink: 0;
}
.app-place-modal-grip { display: none; }   /* mobile-only handle */
.app-place-modal-head .head-net {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.app-place-modal-head .head-net .net-tab-chip {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--app-font-mono);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.app-place-modal-head .ttl {
  font-family: var(--app-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--app-text);
  line-height: 1.2;
}
.app-place-modal-head .sub {
  font-family: var(--app-font-mono);
  font-size: 10px;
  color: var(--app-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}
.app-place-modal-close {
  border: 0;
  background: transparent;
  color: var(--app-text-muted);
  font-size: 16px;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.app-place-modal-close:hover {
  background: var(--app-surface-3, #e8ecf6);
  color: var(--app-text);
}
.app-place-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 20px;
}
/* Progressive-disclosure wrapper: phone + submit reveal after a package
   is picked. The smooth-reveal effect is handled by removing [hidden],
   then a brief opacity-translate animation. */
.app-pkg-after-pick {
  animation: app-pkg-reveal 0.22s ease both;
}
@keyframes app-pkg-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Body lock while a place-order modal is open. */
body.app-pom-lock { overflow: hidden; }

@media (max-width: 640px) {
  /* Slide up from the bottom as a full-width sheet. */
  .app-place-modal { align-items: flex-end; }
  .app-place-modal-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .app-place-modal.is-open .app-place-modal-panel { transform: translateY(0); }
  .app-place-modal-head {
    padding: 20px 16px 14px;
  }
  .app-place-modal-grip {
    display: block;
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 100px;
    background: var(--app-border-strong, #cbd5e1);
  }
  .app-place-modal-body {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-place-modal,
  .app-place-modal-panel,
  .app-pkg-after-pick { transition: none; animation: none; }
}