:root {
  --mobile-primary: #f5a524;
  --mobile-secondary: #aeb8c7;
  --mobile-bg-dark: #0e141c;
  --mobile-bg-light: #e5e7eb;
  --mobile-text-dark: #ffffff;
  --mobile-text-light: #0e141c;
  --mobile-green: #5dd49e;
  --mobile-red: #f87171;
  --mobile-amber: #f5a524;
  --mobile-border-dark: #2a3340;
  --mobile-border-light: #d5dae2;
  --mobile-surface-dark: #161e27;
  --mobile-surface-light: #fafbfc;
  --mobile-font-en: 'Inter';
  --mobile-font-ar: 'Tajawal';
  --mobile-font-size: 13px;
  --mobile-font-weight: 500;
  --mobile-line-height: 1.6;
  --mobile-card-padding: 16px;
  --mobile-row-height: 48px;
  --mobile-menu-spacing: 10px;
  --mobile-icon-size: 24px;
  --mobile-btn-style: outline;
  --mobile-btn-size: medium;
  --mobile-font-scale: 1;
  --mobile-number-weight: 700;
  --mobile-ar-line-height: 1.6;
  --mobile-tab-active: #f5a524;
  --mobile-tab-inactive: #c7d2e0;
  --mobile-tab-indicator: underline;
  --mobile-touch-target: 44px;
  --mobile-card-style: elevated;
  --mobile-density: comfortable;
  --mobile-icon-style: outline;
  --mobile-badge-entry: #1b3a2a;
  --mobile-badge-target: #1b3a2a;
  --mobile-badge-stoploss: #3a1b1b;
  --mobile-badge-waiting: #2a2a1a;
  --mobile-gold: #D4B254;
  --mobile-purple: #8B95A4;
  --mobile-teal: #5DD49E;
  --mobile-surface-alt: #1A222D;
  --mobile-highlight: #F5A524;
  --mobile-text-black: #0E141C;
  --mobile-high-contrast: 0;
  --mobile-colorblind: 0;
  --mobile-signal-primary: #00d4ff;
  --mobile-signal-text-mid: #6a86a8;
  --mobile-signal-text-dim: #364d6a;
  --mobile-bg-deep: #0a0f1e;
  --mobile-gold-dark: #c9a227;
  --mobile-gold-light: #f5d77a;
  --mobile-gold-wheat: #f5deb3;
  --mobile-pill-bg-light: #fff8ed;
  --mobile-pill-text-light: #b45309;
  --mobile-msg-buy-tint-light: #f0faf8;
  --mobile-msg-sell-tint-light: #fff5f5;
  --mobile-msg-unread-tint-light: #f0f7ff;
  --mobile-pill-icon-golden: #1F2A14;
  --mobile-pill-icon-golden-sub: #0F1A0F;
  --mobile-pill-icon-ma: #1A1F2A;
  --mobile-pill-icon-harmonic: #241A2A;
  --mobile-pill-icon-csm: #1F2914;
  --mobile-pill-icon-intel: #2A1F14;
  --mobile-pill-icon-watchlist: #1F2A24;
  --mobile-badge-entry-dark-bg: #1b3a2a;
  --mobile-badge-entry-dark-text: #5dd49e;
  --mobile-badge-entry-dark-border: #2a3340;
  --mobile-badge-entry-light-bg: #dbf1e5;
  --mobile-badge-entry-light-text: #0f6e56;
  --mobile-badge-entry-light-border: #d5dae2;
  --mobile-badge-target-dark-bg: #263e0f;
  --mobile-badge-target-dark-text: #5dd49e;
  --mobile-badge-target-dark-border: #2a3340;
  --mobile-badge-target-light-bg: #dbf1e5;
  --mobile-badge-target-light-text: #0f6e56;
  --mobile-badge-target-light-border: #d5dae2;
  --mobile-badge-stop-dark-bg: #f3f4f6;
  --mobile-badge-stop-dark-text: #f87171;
  --mobile-badge-stop-dark-border: #b91c1c;
  --mobile-badge-stop-light-bg: #fae3e3;
  --mobile-badge-stop-light-text: #111827;
  --mobile-badge-stop-light-border: #b91c1c;
  --mobile-badge-wait-dark-bg: #2a2a1a;
  --mobile-badge-wait-dark-text: #f5a524;
  --mobile-badge-wait-dark-border: #2a3340;
  --mobile-badge-wait-light-bg: #faeeda;
  --mobile-badge-wait-light-text: #111827;
  --mobile-badge-wait-light-border: #b45309;
  --mobile-badge-near-dark-bg: #2a1f14;
  --mobile-badge-near-dark-text: #f5a524;
  --mobile-badge-near-dark-border: #2a3340;
  --mobile-badge-near-light-bg: #faeeda;
  --mobile-badge-near-light-text: #b05a0e;
  --mobile-badge-near-light-border: #d5dae2;
}

/* ═══ Admin-editor palette → theme.css canonical vars (mobile only) ═══
   On viewports ≤ 1023px, theme.css's :root vars are re-pointed at the
   admin-set --mobile-* values. Any page (shell or non-shell) that uses
   theme.css tokens (--bg-main, --text-main, --accent-color, etc.)
   automatically picks up whatever the admin sets in the mobile theme
   editor. Desktop (≥ 1024px) is unaffected — the @media query doesn't
   match so theme.css declarations remain authoritative. */
@media (max-width: 1023px) {
  :root {
    --bg-main: var(--mobile-bg-light);
    --bg-body: var(--mobile-bg-light);
    --bg-gradient: var(--mobile-bg-light);
    --bg-card: var(--mobile-surface-light);
    --bg-secondary: var(--mobile-bg-light);
    --bg-hover: var(--mobile-surface-light);
    --container-bg: var(--mobile-surface-light);
    --header-bg: var(--mobile-surface-light);
    --text-main: var(--mobile-text-light);
    --text-primary: var(--mobile-text-light);
    --text-secondary: var(--mobile-secondary);
    --text-muted: var(--mobile-secondary);
    --text-accent: var(--mobile-primary);
    --text-positive: var(--mobile-green);
    --text-negative: var(--mobile-red);
    --text-warning: var(--mobile-amber);
    --positive: var(--mobile-green);
    --negative: var(--mobile-red);
    --warning: var(--mobile-amber);
    --accent: var(--mobile-primary);
    --accent-color: var(--mobile-primary);
    --title-color: var(--mobile-primary);
    --success-color: var(--mobile-green);
    --danger-color: var(--mobile-red);
    --warning-color: var(--mobile-amber);
    --info-color: var(--mobile-primary);
    --border-color: var(--mobile-border-light);
    --border-light: var(--mobile-border-light);
    --input-bg: var(--mobile-surface-light);
    --input-text: var(--mobile-text-light);
    --input-border: var(--mobile-border-light);
    --input-focus: var(--mobile-primary);
    --nav-bg: var(--mobile-surface-light);
    --nav-text: var(--mobile-secondary);
    --nav-active-bg: var(--mobile-primary);
    --nav-border: var(--mobile-border-light);
    /* Status badge palette — light mode (admin tokens). */
    --status-entry-bg: var(--mobile-badge-entry-light-bg);
    --status-entry-text: var(--mobile-badge-entry-light-text);
    --status-entry-border: var(--mobile-badge-entry-light-border);
    --status-target-bg: var(--mobile-badge-target-light-bg);
    --status-target-text: var(--mobile-badge-target-light-text);
    --status-target-border: var(--mobile-badge-target-light-border);
    --status-stop-bg: var(--mobile-badge-stop-light-bg);
    --status-stop-text: var(--mobile-badge-stop-light-text);
    --status-stop-border: var(--mobile-badge-stop-light-border);
    --status-wait-bg: var(--mobile-badge-wait-light-bg);
    --status-wait-text: var(--mobile-badge-wait-light-text);
    --status-wait-border: var(--mobile-badge-wait-light-border);
    --status-near-bg: var(--mobile-badge-near-light-bg);
    --status-near-text: var(--mobile-badge-near-light-text);
    --status-near-border: var(--mobile-badge-near-light-border);
    --success-bg: rgba(46,125,50,0.12);
    --danger-bg: rgba(198,40,40,0.12);
    --warning-bg: rgba(239,108,0,0.12);
    --info-bg: rgba(21,101,192,0.12);
  }
  [data-theme="dark"] {
    --bg-main: var(--mobile-bg-dark);
    --bg-body: var(--mobile-bg-dark);
    --bg-gradient: var(--mobile-bg-dark);
    --bg-card: var(--mobile-surface-dark);
    --bg-secondary: var(--mobile-bg-dark);
    --bg-hover: var(--mobile-surface-dark);
    --container-bg: var(--mobile-surface-dark);
    --header-bg: var(--mobile-surface-dark);
    --text-main: var(--mobile-text-dark);
    --text-primary: var(--mobile-text-dark);
    --text-secondary: var(--mobile-secondary);
    --text-muted: var(--mobile-secondary);
    --border-color: var(--mobile-border-dark);
    --border-light: var(--mobile-border-dark);
    --input-bg: var(--mobile-surface-dark);
    --input-text: var(--mobile-text-dark);
    --input-border: var(--mobile-border-dark);
    --nav-bg: var(--mobile-surface-dark);
    --nav-border: var(--mobile-border-dark);
    /* Status badge palette — dark mode (admin tokens). */
    --status-entry-bg: var(--mobile-badge-entry-dark-bg);
    --status-entry-text: var(--mobile-badge-entry-dark-text);
    --status-entry-border: var(--mobile-badge-entry-dark-border);
    --status-target-bg: var(--mobile-badge-target-dark-bg);
    --status-target-text: var(--mobile-badge-target-dark-text);
    --status-target-border: var(--mobile-badge-target-dark-border);
    --status-stop-bg: var(--mobile-badge-stop-dark-bg);
    --status-stop-text: var(--mobile-badge-stop-dark-text);
    --status-stop-border: var(--mobile-badge-stop-dark-border);
    --status-wait-bg: var(--mobile-badge-wait-dark-bg);
    --status-wait-text: var(--mobile-badge-wait-dark-text);
    --status-wait-border: var(--mobile-badge-wait-dark-border);
    --status-near-bg: var(--mobile-badge-near-dark-bg);
    --status-near-text: var(--mobile-badge-near-dark-text);
    --status-near-border: var(--mobile-badge-near-dark-border);
    --success-bg: rgba(74,222,128,0.10);
    --danger-bg: rgba(248,113,113,0.10);
    --warning-bg: rgba(251,191,36,0.10);
    --info-bg: rgba(93,173,226,0.10);
  }
  /* Font-family enforcement — beat inline `body { font-family }`
     declarations in legacy templates via higher specificity. */
  html body {
    font-family: var(--mobile-font-ar, 'Tajawal'), sans-serif;
  }
  html[lang="en"] body {
    font-family: var(--mobile-font-en, 'Inter'), sans-serif;
  }
}

/* ═══ Status badge color rules (mobile) ═══
   Theme-agnostic — vars switch per theme at the @media :root /
   [data-theme="dark"] level above. Both modes admin-controlled. */
@media (max-width: 1023px) {
  .status-badge.status-entry,
  .status-badge.status-blue {
    background: var(--status-entry-bg) !important;
    color: var(--status-entry-text) !important;
    border: 1px solid var(--status-entry-border) !important;
  }
  .status-badge.status-target,
  .status-badge.status-green {
    background: var(--status-target-bg) !important;
    color: var(--status-target-text) !important;
    border: 1px solid var(--status-target-border) !important;
  }
  .status-badge.status-stop,
  .status-badge.status-red {
    background: var(--status-stop-bg) !important;
    color: var(--status-stop-text) !important;
    border: 1px solid var(--status-stop-border) !important;
  }
  .status-badge.status-wait,
  .status-badge.status-neutral {
    background: var(--status-wait-bg) !important;
    color: var(--status-wait-text) !important;
    border: 1px solid var(--status-wait-border) !important;
  }
  .status-badge.status-near,
  .status-badge.status-orange {
    background: var(--status-near-bg) !important;
    color: var(--status-near-text) !important;
    border: 1px solid var(--status-near-border) !important;
  }
}