:root {
  /* ==========================================================================
     THEME GLOBAL (source unique de vérité)
     --------------------------------------------------------------------------
     Objectif:
     - Centraliser les couleurs et gradients pour toutes les pages.
     - Eviter les valeurs hardcodées dans les fichiers métier (dj/client/settings).
     Notes:
     - Préfixe `--field-*` = champs texte
     - Préfixe `--card-*` = cards / surfaces
     - Préfixe `--grad-*` = fonds dégradés
     ========================================================================== */

  /* Palette de base: fond + texte principal */
  --bg1: #000000;
  --bg2: #081224;
  --bg3: #0f1d35;
  --text: #eaf2ff;
  --muted: #9bb0d3;

  /* Traits / séparateurs UI */
  --line: rgba(125, 148, 184, 0.28);
  --line-soft: rgba(125, 148, 184, 0.2);

  /* Couleurs d'accent et d'état */
  --accent: #2dd4bf;
  --accent-2: #38bdf8;
  --danger: #fb7185;
  --danger-soft: rgba(190, 24, 93, 0.24);
  --danger-line: rgba(251, 113, 133, 0.45);
  --text-error: #fda4af;

  /* Overlays (modales / couches de focus) */
  --overlay-modal: rgba(2, 6, 23, 0.78);
  --overlay-strong: rgba(2, 6, 23, 0.86);

  /* Filtres d'icones (PNG monochromes)
     Astuce: changer ici impacte navbar + DJ sans retoucher les composants. */
  --icon-filter-default: invert(88%) sepia(7%) saturate(459%) hue-rotate(180deg) brightness(105%) contrast(105%);
  --icon-filter-danger: invert(80%) sepia(15%) saturate(234%) hue-rotate(311deg) brightness(95%) contrast(90%);

  /* Boutons globaux */
  --line-btn: rgba(110, 152, 214, 0.42);
  --grad-btn: linear-gradient(135deg, rgba(6, 22, 42, 0.9), rgba(9, 34, 60, 0.84) 52%, rgba(14, 46, 82, 0.8));

  /* Champs texte globaux */
  --field-line: rgba(125, 148, 184, 0.34);
  --field-bg: rgba(11, 21, 37, 0.95);
  --field-placeholder: #7f95ba;
  --field-focus-outline: rgba(56, 189, 248, 0.55);
  --field-focus-border: rgba(96, 165, 250, 0.62);
  --field-focus-outline-strong: rgba(56, 189, 248, 0.62);

  /* Cards / surfaces globales */
  --card-line: rgba(125, 148, 184, 0.24);
  --card-line-soft: rgba(125, 148, 184, 0.2);
  --card-bg: linear-gradient(160deg, rgba(12, 24, 43, 0.94), rgba(9, 19, 36, 0.94));
  --card-bg-muted: linear-gradient(160deg, rgba(24, 37, 58, 0.7), rgba(16, 28, 47, 0.7));
  --card-surface: linear-gradient(170deg, rgba(8, 18, 34, 0.95), rgba(10, 26, 46, 0.95));
  --card-surface-strong: linear-gradient(170deg, rgba(8, 18, 34, 0.96), rgba(10, 26, 46, 0.96));
  --card-accent-line: rgba(96, 165, 250, 0.84);
  --card-accent-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(14, 116, 144, 0.28));
  --card-active-line: rgba(56, 189, 248, 0.78);

  /* Fonds applicatifs
     --grad-shell: fond principal "premium" (orbes + bleu profond)
     --grad-login: variante dédiée écran de connexion */
  --grad-shell: radial-gradient(circle at 12% 12%, rgba(45, 212, 191, 0.2), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(96, 165, 250, 0.18), transparent 32%),
    linear-gradient(145deg, var(--bg1), var(--bg2));
  --grad-login: linear-gradient(170deg, var(--bg2), var(--bg3));
}

/* Paint de base:
   1) fond noir de sécurité (évite les flashs blancs au chargement)
   2) shell gradient appliqué au body */
html,
body {
  background-color: #000;
}

html {
  background: #000;
}

body {
  background: var(--grad-shell);
}

/* Bande de sécurité iOS en haut (safe area) pour masquer tout artefact visuel */
body::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: calc(env(safe-area-inset-top) + 2px);
  background: #000;
  pointer-events: none;
  z-index: 9999;
}