* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
        [hidden] { display: none !important; }
        html { min-height: 100vh; overflow-x: hidden; overflow-y: auto; line-height: 1.45; overscroll-behavior: none; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-behavior: auto; }
        body { min-height: 100vh; overflow-x: hidden; overflow-y: auto; line-height: 1.45; overscroll-behavior: none; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-behavior: auto; }
        body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
        body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
        input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
        :focus { outline: none; }
        :focus-visible { outline: 2px solid rgba(63,231,255,0.72); outline-offset: 2px; }
        ::selection { background: transparent; }
        ::-moz-selection { background: transparent; }
        #main-app { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
        #main-app, .main-area, .tab-content { overscroll-behavior: none; overscroll-behavior-y: contain; }

        .tab-content { display: none; will-change: transform, opacity; }
        .tab-content.active { display: block; animation: fadeInUp 0.34s var(--ease-smooth); }
        .tab-content.active.slide-in { animation: slideInSection 0.28s var(--ease-smooth); }

/*
 * ????????????????????????????????????????????????????????????????
 *  THE SYSTEM ? DESIGN SYSTEM v2.0
 *  Source unique de v?rit?. Remplace tous les :root existants.
 *  Auteur: Flow / Trame Studio
 * ????????????????????????????????????????????????????????????????
 *
 *  INSTRUCTION CLAUDE CODE :
 *  1. Supprimer les blocs :root existants aux lignes 596, 1734, 2660, 4699, 5286
 *  2. Coller CE FICHIER en t?te de app.css, apr?s les r?gles de reset (*, html, body)
 *  3. Remplacer les usages des anciennes variables par les nouvelles (mapping ci-dessous)
 *
 *  MAPPING ANCIEN ? NOUVEAU :
 *  --bg-dark       ? var(--bg-0)
 *  --bg-card       ? var(--bg-card)         (m?me nom, nouvelle valeur)
 *  --text-main     ? var(--t0) ou var(--t1)
 *  --text-dim      ? var(--t2)
 *  --accent-blue   ? var(--accent)
 *  --neon-blue     ? var(--accent)
 *  --neon-purple   ? var(--special)
 *  --success       ? var(--ok)
 *  --danger        ? var(--ko)
 *  --glass-shadow  ? var(--shadow-card)
 *  --radius-s      ? var(--r1)
 *  --radius-m      ? var(--r2)
 *  --radius-l      ? var(--r3)
 *  --space-1..7    ? var(--s1) .. var(--s7)
 *  --bg-primary    ? var(--bg-1)
 *  --bg-secondary  ? var(--bg-2)
 *  --text-primary  ? var(--t0)
 *  --text-secondary? var(--t1)
 *  --text-tertiary ? var(--t3)
 *  --text-muted    ? var(--t4)
 *  --accent-primary? var(--accent)
 *  --accent-success? var(--ok)
 *  --accent-warning? var(--warn)
 *  --accent-danger ? var(--ko)
 *  --accent-secondary ? var(--special)
 *  --border-subtle ? var(--b0)
 *  --border-medium ? var(--b1)
 *  --border-strong ? var(--b2)
 *  --border-accent ? var(--ba)
 *  --cyan          ? var(--accent)
 *  --violet        ? var(--special)
 *  --rouge         ? var(--ko)
 *  --vert          ? var(--ok)
 *
 * ????????????????????????????????????????????????????????????????
 */

/* ?? 1. VARIABLES SYST?ME ??????????????????????????????????????? */

:root {

  /* ?? FONDS (couches) ???????????????????????????????????? */
  --bg-0:     #030508;          /* noir absolu ? splash, overlays  */
  --bg-1:     #07090e;          /* fond global app                 */
  --bg-2:     #0d1118;          /* fond cards standard             */
  --bg-3:     #131926;          /* fond cards sur?lev?es           */
  --bg-4:     #1a2030;          /* fond ?l?ments actifs/s?lectionn?s */
  --bg-input: rgba(255,255,255,0.05);

  /* ?? TEXTE ? ?chelle WCAG AA sur --bg-1 ??????????????? */
  /*   Ratios calcul?s sur fond #07090e (? luminance 0.003) */
  --t0: rgba(255,255,255,0.95);  /* 18.4:1 ?  ? titres hero      */
  --t1: rgba(255,255,255,0.80);  /* 15.5:1 ?  ? texte principal   */
  --t2: rgba(255,255,255,0.62);  /* 12.0:1 ?  ? texte secondaire  */
  --t3: rgba(255,255,255,0.46);  /*  8.9:1 ?  ? labels/metadata   */
  --t4: rgba(255,255,255,0.28);  /*  5.4:1 ??  ? d?coratif seul   */
  --t-on-accent: #07090e;        /* texte sur fond accent           */

  /* ?? ACCENTS ??????????????????????????????????????????? */
  --accent:  #3FE7FF;           /* cyan   ? couleur principale     */
  --ok:      #00E87A;           /* vert   ? succ?s, valid?         */
  --warn:    #FFB700;           /* ambre  ? attention, donjon      */
  --ko:      #FF4D6A;           /* rouge  ? danger, raid, erreur   */
  --special: #9B5CFF;           /* violet ? fragment, void, sp?cial */

  /* ?? ACCENTS ATT?NU?S (fonds de cards color?es) ???????? */
  --accent-faint:  rgba(63,231,255,0.05);
  --ok-faint:      rgba(0,232,122,0.05);
  --warn-faint:    rgba(255,183,0,0.05);
  --ko-faint:      rgba(255,77,106,0.05);
  --special-faint: rgba(155,92,255,0.05);

  /* ?? ACCENTS BORDER ???????????????????????????????????? */
  --accent-border:  rgba(63,231,255,0.30);
  --ok-border:      rgba(0,232,122,0.30);
  --warn-border:    rgba(255,183,0,0.30);
  --ko-border:      rgba(255,77,106,0.30);
  --special-border: rgba(155,92,255,0.30);

  /* ?? BORDERS NEUTRES ??????????????????????????????????? */
  --b0: rgba(255,255,255,0.06);  /* s?parateur/ligne tr?s discret  */
  --b1: rgba(255,255,255,0.10);  /* border card standard           */
  --b2: rgba(255,255,255,0.16);  /* border card hover/focus        */
  --b3: rgba(255,255,255,0.24);  /* border forte (input focus)     */
  --ba: rgba(63,231,255,0.30);   /* border accent                  */

  /* ?? CROCHETS DE COIN ?????????????????????????????????? */
  /* Principe : 1 seul crochet L en haut-gauche + bas-droite */
  --bracket-size:  12px;         /* longueur du bras               */
  --bracket-width: 1px;          /* ?paisseur (plus fine = + l?ger) */
  --bracket-col:   rgba(63,231,255,0.40);  /* cyan discret          */

  /* Variantes crochets par type de card */
  --bracket-accent:  rgba(63,231,255,0.40);
  --bracket-ok:      rgba(0,232,122,0.40);
  --bracket-warn:    rgba(255,183,0,0.40);
  --bracket-ko:      rgba(255,77,106,0.40);
  --bracket-special: rgba(155,92,255,0.40);
  --bracket-neutral: rgba(255,255,255,0.18);

  /* ?? GRILLE DE FOND ???????????????????????????????????? */
  --grid-color: rgba(63,231,255,0.025);
  --grid-size:  48px;

  /* ?? TYPOGRAPHIE ??????????????????????????????????????? */
  --f-display: 'Orbitron', sans-serif;
  --f-mono:    'Share Tech Mono', monospace;
  --f-body:    'Manrope', sans-serif;

  /* ?? ?CHELLE TYPOGRAPHIQUE (WCAG min 12px pour contenu) ? */
  --tx-2xs: 10px;  /* d?co uniquement (status bar, micro-metadata) */
  --tx-xs:  11px;  /* labels serr?s (badges, tags)                 */
  --tx-sm:  13px;  /* metadata lisible, labels secondaires         */
  --tx-md:  15px;  /* corps standard                               */
  --tx-lg:  18px;  /* titres de section                            */
  --tx-xl:  24px;  /* display medium (sous-titres hero)            */
  --tx-2xl: 36px;  /* display grand (XP, niveaux)                  */
  --tx-3xl: 52px;  /* hero (rang SSS, valeurs cl?s)                */

  /* ?? ESPACEMENT ???????????????????????????????????????? */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s7:  32px;
  --s8:  48px;

  /* Aliases s?mantiques (compatibilit?) */
  --space-1: var(--s1);
  --space-2: var(--s2);
  --space-3: var(--s3);
  --space-4: var(--s4);
  --space-5: var(--s5);
  --space-6: var(--s6);
  --space-7: var(--s7);

  /* ?? RADIUS ???????????????????????????????????????????? */
  --r0: 2px;   /* coins quasi-carr?s (boutons tags)       */
  --r1: 4px;   /* cards compactes                         */
  --r2: 8px;   /* cards standard, inputs                  */
  --r3: 12px;  /* cards larges, modals                    */
  --r4: 20px;  /* pills, badges                           */
  --r-full: 9999px;

  /* Aliases compatibilit? */
  --radius-s: var(--r0);
  --radius-m: var(--r1);
  --radius-l: var(--r2);

  /* ?? OMBRES ???????????????????????????????????????????? */
  --shadow-card:    0 2px 12px rgba(0,0,0,0.35);
  --shadow-raised:  0 4px 24px rgba(0,0,0,0.50);
  --shadow-overlay: 0 8px 48px rgba(0,0,0,0.70);

  /* Glow lumineux (utilis? avec parcimonie) */
  --glow-accent:  0 0 16px rgba(63,231,255,0.20);
  --glow-ok:      0 0 16px rgba(0,232,122,0.20);
  --glow-warn:    0 0 16px rgba(255,183,0,0.20);
  --glow-ko:      0 0 16px rgba(255,77,106,0.20);
  --glow-special: 0 0 16px rgba(155,92,255,0.20);

  /* ?? ANIMATIONS ???????????????????????????????????????? */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-std:    220ms;
  --dur-slow:   380ms;

  /* Aliases compatibilit? */
  --ease-smooth:       var(--ease);
  --ease-snappy:       cubic-bezier(0.2, 0.9, 0.2, 1);
  --anim-card-dur:     var(--dur-slow);
  --anim-block-dur:    620ms;
  --transition-fast:   var(--dur-fast) var(--ease);
  --transition-base:   var(--dur-std) var(--ease);
  --transition-slow:   var(--dur-slow) var(--ease);

  /* ?? GLASS (r?tro-compat) ??????????????????????????????? */
  --glass-blur:       0px;  /* d?sactiv? ? performances mobile   */
  --glass-shadow:     var(--shadow-card);
  --glass-border-soft: var(--b1);

  /* ?? FOND GLOBAL & TEXTE (r?tro-compat) ??????????????? */
  --bg-dark:           var(--bg-0);
  --bg-card:           var(--bg-2);
  --bg-card-strong:    var(--bg-3);
  --text-main:         var(--t0);
  --text-dim:          var(--t2);
  --font-main:         var(--f-mono);
  --accent-blue:       var(--accent);
  --neon-blue:         var(--accent);
  --neon-purple:       var(--special);
  --success:           var(--ok);
  --danger:            var(--ko);
  --accent-soft:       var(--accent-faint);
  --accent-line:       var(--accent-border);
  --neon-glow:         rgba(63,231,255,0.16);

  /* ?? NOUVELLES VARIABLES SYST?ME (compat L2660+) ??????? */
  --bg-primary:        var(--bg-1);
  --bg-secondary:      var(--bg-2);
  --bg-tertiary:       var(--bg-3);
  --bg-elevated:       var(--bg-4);
  --text-primary:      var(--t0);
  --text-secondary:    var(--t1);
  --text-tertiary:     var(--t3);
  --text-muted:        var(--t4);
  --text-on-accent:    var(--t-on-accent);
  --accent-primary:    var(--accent);
  --accent-secondary:  var(--special);
  --accent-success:    var(--ok);
  --accent-warning:    var(--warn);
  --accent-danger:     var(--ko);
  --border-subtle:     var(--b0);
  --border-medium:     var(--b1);
  --border-strong:     var(--b2);
  --border-accent:     var(--ba);
  --overlay-scrim:     rgba(3,5,8,0.88);
  --shadow-elevated:   var(--shadow-raised);
  --shadow-glow-cyan:  var(--glow-accent);
  --shadow-glow-purple:var(--glow-special);

  /* Variables L4699 compat */
  --cyan:         var(--accent);
  --cyan-dim:     rgba(63,231,255,0.25);
  --cyan-glow:    rgba(63,231,255,0.50);
  --violet:       var(--special);
  --violet-dim:   rgba(155,92,255,0.25);
  --violet-glow:  rgba(155,92,255,0.50);
  --rouge:        var(--ko);
  --rouge-dim:    rgba(255,77,106,0.25);
  --rouge-glow:   rgba(255,77,106,0.50);
  --vert:         var(--ok);
  --vert-dim:     rgba(0,232,122,0.25);
  --vert-glow:    rgba(0,232,122,0.50);
  --purple:       var(--special);
  --red:          var(--ko);
  --bg:           var(--bg-1);
  --text:         var(--t0);
  --dim:          var(--t2);
  --dim2:         var(--t4);

  /* Typographie compat L4699 */
  --font-display: var(--f-display);
  --font-mono:    var(--f-mono);
  --text-xs:      var(--tx-2xs);
  --text-s:       var(--tx-xs);
  --text-m:       var(--tx-sm);
  --text-l:       var(--tx-md);
  --text-xl:      var(--tx-lg);
  --text-xxl:     var(--tx-xl);

  /* Space compat L4699 */
  --space-xs:  var(--s1);
  --space-s:   var(--s2);
  --space-m:   var(--s3);
  --space-l:   var(--s4);
  --space-xl:  var(--s6);
  --space-xxl: var(--s7);

  /* Radius compat L4699 */
  --radius-xs: var(--r2);
  --radius-xl: var(--r4);
}

/* ?? 2. FOND GLOBAL ? FORC? SUR TOUTE L'APP ???????????????????? */

html,
body,
#main-app,
.shell,
#app {
  background-color: var(--bg-1) !important;
  color: var(--t1);
  font-family: var(--f-body);
}

body {
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-attachment: fixed;
}

/* ?crans plein-page : fond opaque forc? */
.onboard-screen,
.social-panel,
.sys-pop-overlay {
  background-color: var(--bg-0) !important;
}

/* ?? 3. TYPOGRAPHIE ? R?GLES GLOBALES ?????????????????????????? */

/* Taille minimum op?rationnelle : 11px */
/* Rien de fonctionnel sous 11px        */

/* Labels uppercase de section */
.sys-label,
.system-label,
.section-label,
[class*="-label"][class*="section"],
[class*="card-label"],
[class*="card-section"] {
  font-family: var(--f-mono);
  font-size: var(--tx-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--t3);
}

/* Corps de texte */
.sys-body,
[class*="-desc"],
[class*="-text"]:not([class*="input"]) {
  font-family: var(--f-body);
  font-size: var(--tx-md);
  line-height: 1.65;
  color: var(--t1);
}

/* Display (grands chiffres) */
.sys-display,
[class*="-number"],
[class*="-xp"],
[class*="-level"],
[class*="-score"] {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--t0);
}

/* ?? 4. CARD ? COMPOSANT SIGNATURE ????????????????????????????? */
/*
 *  Structure : fond solide + crochets L aux coins
 *  PAS de box-shadow d?coratif
 *  PAS de border sur les 4 c?t?s
 *  PAS de glow sur les crochets
 */

.card,
.sys-card,
.quest-item,
.home-card-hero,
.home-card-med,
.home-card-dnj,
.home-card-raid-new,
.home-tri-card,
.time-drop,
.prof-identity-box,
.friend-card,
.param-section,
.skills-card,
.inv-item,
.pending-card,
.challenge-card,
.social-code-block {
  background:    var(--bg-2);
  border:        none;
  border-radius: var(--r2);
  padding:       var(--s4);
  position:      relative;
  overflow:      visible;  /* permet aux crochets de d?border si n?cessaire */
  box-shadow:    none;
}

/* Crochet haut-gauche */
.card::before,
.sys-card::before,
.quest-item::before,
.home-card-hero::before,
.home-card-med::before,
.home-card-dnj::before,
.home-card-raid-new::before,
.home-tri-card::before,
.time-drop::before,
.prof-identity-box::before,
.friend-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width:  var(--bracket-size);
  height: var(--bracket-size);
  border-top:  var(--bracket-width) solid var(--bracket-col);
  border-left: var(--bracket-width) solid var(--bracket-col);
  border-radius: var(--r0) 0 0 0;
  pointer-events: none;
  z-index: 2;
  /* PAS de box-shadow/glow */
}

/* Crochet bas-droite */
.card::after,
.sys-card::after,
.quest-item::after,
.home-card-hero::after,
.home-card-med::after,
.home-card-dnj::after,
.home-card-raid-new::after,
.home-tri-card::after,
.time-drop::after,
.prof-identity-box::after,
.friend-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width:  var(--bracket-size);
  height: var(--bracket-size);
  border-bottom: var(--bracket-width) solid var(--bracket-col);
  border-right:  var(--bracket-width) solid var(--bracket-col);
  border-radius: 0 0 var(--r0) 0;
  pointer-events: none;
  z-index: 2;
}

/* ?? Variantes de couleur des crochets ?? */
.card-accent   { --bracket-col: var(--bracket-accent);  }
.card-ok       { --bracket-col: var(--bracket-ok);      }
.card-warn     { --bracket-col: var(--bracket-warn);     }
.card-ko       { --bracket-col: var(--bracket-ko);      }
.card-special  { --bracket-col: var(--bracket-special); }
.card-neutral  { --bracket-col: var(--bracket-neutral); }

/* ?? Hover card : l?ger lift ?? */
.card:hover,
.quest-item:hover,
.home-card-hero:hover,
.home-card-med:hover {
  background: var(--bg-3);
  transform: translateY(-1px);
  transition: background var(--dur-fast) var(--ease),
              transform   var(--dur-fast) var(--ease);
}

/* Ligne cyan en haut de card (remplacement de l'ancien ::before gradient) */
/* Optionnel : activer via classe .card-topline */
.card-topline::before {
  width: 100%;
  height: 1px;
  border: none;
  border-radius: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-border) 30%,
    var(--ba) 50%,
    var(--accent-border) 70%,
    transparent 100%
  );
  opacity: 0.6;
}

/* ?? 5. LABELS DE CARD ?????????????????????????????????????????? */

.card-title,
.card-header-label,
.home-card-hero-label,
.home-card-med-label,
.home-card-dnj-label,
.home-card-raid-new-label {
  font-family: var(--f-mono);
  font-size:   var(--tx-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--s3);
}

/* ?? 6. BOUTONS ????????????????????????????????????????????????? */
/*
 *  Format texte : [ TEXTE ]  (espaces ? l'int?rieur)
 *  Font: Share Tech Mono uppercase
 */

.onboard-btn,
.sys-btn,
.param-save-btn,
.quest-action-btn,
.challenge-validate-btn,
.social-add-btn,
.notif-perm-btn {
  font-family:     var(--f-mono);
  font-size:       var(--tx-xs);
  letter-spacing:  0.16em;
  text-transform:  uppercase;
  border-radius:   var(--r2);
  padding:         12px 20px;
  cursor:          pointer;
  border:          1px solid;
  transition:      background  var(--dur-fast) var(--ease),
                   border-color var(--dur-fast) var(--ease),
                   transform   var(--dur-fast) var(--ease);
  text-align:      center;
}

.onboard-btn,
.sys-btn-accent {
  background:    rgba(63,231,255,0.08);
  border-color:  var(--accent-border);
  color:         var(--accent);
}
.onboard-btn:hover,
.sys-btn-accent:hover {
  background:   rgba(63,231,255,0.14);
  border-color: rgba(63,231,255,0.45);
}
.onboard-btn:active,
.sys-btn-accent:active {
  transform: scale(0.98);
}

.sys-btn-ok {
  background:   rgba(0,232,122,0.08);
  border-color: var(--ok-border);
  color:        var(--ok);
}
.sys-btn-ko {
  background:   rgba(255,77,106,0.08);
  border-color: var(--ko-border);
  color:        var(--ko);
}
.sys-btn-neutral {
  background:   transparent;
  border-color: var(--b1);
  color:        var(--t2);
}
.sys-btn-neutral:hover {
  background:   var(--bg-3);
  border-color: var(--b2);
}

/* ?? 7. INPUTS ?????????????????????????????????????????????????? */

.onboard-input,
.sys-input,
.param-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="time"],
select,
textarea {
  background:    var(--bg-input);
  border:        1px solid var(--b1);
  border-radius: var(--r2);
  padding:       13px 16px;
  color:         var(--t0);
  font-family:   var(--f-body);
  font-size:     var(--tx-md);
  outline:       none;
  width:         100%;
  box-sizing:    border-box;
  transition:    border-color var(--dur-fast) var(--ease),
                 background   var(--dur-fast) var(--ease);
}

.onboard-input:focus,
.sys-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: var(--ba);
  background:   rgba(255,255,255,0.07);
}

.onboard-input::placeholder,
input::placeholder {
  color:       var(--t4);
  font-family: var(--f-mono);
  font-size:   var(--tx-xs);
}

/* ?? 8. BARRES DE PROGRESSION ??????????????????????????????????? */

.sys-bar-track,
[class*="-bar-bg"],
[class*="-progress-bg"],
[id*="streak-bar"] {
  height:        3px;
  background:    var(--b0);
  border-radius: 2px;
  overflow:      hidden;
}

.sys-bar-fill,
[class*="-bar-fill"],
[class*="-progress-fill"] {
  height:           100%;
  border-radius:    2px;
  transition:       width 0.5s var(--ease);
}

/* Couleurs de remplissage */
.bar-accent  { background: var(--accent); }
.bar-ok      { background: var(--ok);     }
.bar-warn    { background: var(--warn);   }
.bar-ko      { background: var(--ko);     }
.bar-special { background: var(--special);}

/* ?? 9. BADGES / PILLS ?????????????????????????????????????????? */

.sys-badge,
.meta-pill,
.quest-stat-badge,
.void-word-pill {
  font-family:    var(--f-mono);
  font-size:      var(--tx-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        3px 10px;
  border-radius:  var(--r4);
  border:         1px solid;
  display:        inline-block;
  white-space:    nowrap;
}

.badge-accent  { background: var(--accent-faint);  border-color: var(--accent-border);  color: var(--accent);  }
.badge-ok      { background: var(--ok-faint);       border-color: var(--ok-border);       color: var(--ok);      }
.badge-warn    { background: var(--warn-faint);     border-color: var(--warn-border);     color: var(--warn);    }
.badge-ko      { background: var(--ko-faint);       border-color: var(--ko-border);       color: var(--ko);      }
.badge-special { background: var(--special-faint);  border-color: var(--special-border);  color: var(--special); }

/* ?? 10. NAVIGATION BOTTOM ?????????????????????????????????????? */

.bottom-nav,
.mob-nav {
  background:  var(--bg-0);
  border-top:  1px solid var(--b0);
  box-shadow:  0 -2px 20px rgba(0,0,0,0.40);
  /* PAS de backdrop-filter ? performances mobile */
}

.mob-nav-item,
.nav-item {
  color:       var(--t4);
  font-family: var(--f-mono);
  font-size:   var(--tx-xs);
  transition:  color var(--dur-fast) var(--ease),
               filter var(--dur-fast) var(--ease);
}

.mob-nav-item.active,
.nav-item.active,
.nav-item[aria-current="page"] {
  color:  var(--accent);
  /* Glow discret sur l'ic?ne active uniquement */
  filter: drop-shadow(0 0 4px rgba(63,231,255,0.40));
}

/* ?? 11. STATUS BAR (haut de l'app) ???????????????????????????? */

.sys-status-bar,
.mini-header {
  font-family:  var(--f-mono);
  font-size:    var(--tx-2xs);
  letter-spacing: 0.18em;
  color:        var(--t3);
  border-bottom: 1px solid var(--b0);
}

/* ?? 12. QU?TES ????????????????????????????????????????????????? */

.quest-item {
  padding: var(--s4);
  cursor:  pointer;
  --bracket-col: rgba(63,231,255,0.30);
}

.quest-item.done {
  --bracket-col: rgba(0,232,122,0.25);
  opacity: 0.72;
}

.quest-item:active {
  transform: scale(0.99);
}

/* Muscles ciblés */
.quest-muscles {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(155,92,255,0.7);
  margin: 5px 0 2px;
}

/* Description optionnelle */
.quest-desc {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
  margin: 4px 0 6px;
  font-style: italic;
}

/* Lignes de tâche numérotées */
.quest-ex-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
  padding: 1px 0;
}
.quest-ex-num {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(63,231,255,0.5);
  flex-shrink: 0;
  min-width: 12px;
}

/* Pill durée */
.quest-pill-dur {
  color: rgba(255,183,0,0.8) !important;
}

/* ── Muscle SVG inline (quêtes offline sport) ── */
.qi-body-viz {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 8px 0 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.qi-body-svgs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.qi-body-svg {
  flex-shrink: 0;
  min-width: 54px;
}
.qi-body-svg svg {
  width: 54px;
  height: auto;
  display: block;
}
.qi-body-svg svg [data-muscle] {
  transition: fill 0.25s, opacity 0.25s;
}
.qi-body-svg svg [data-muscle].muscle-primary {
  fill: rgba(255,183,0,0.4) !important;
  opacity: 1 !important;
  animation: musclePulse 2s ease-in-out infinite;
}
.qi-body-svg svg [data-muscle].muscle-secondary {
  fill: rgba(63,231,255,0.18) !important;
  opacity: 1 !important;
}
.qi-body-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-wrap: wrap;
}
.qi-mtag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.qi-mtag-p {
  background: rgba(255,183,0,0.08);
  color: rgba(255,183,0,0.85);
  border: 1px solid rgba(255,183,0,0.2);
}
.qi-mtag-s {
  background: rgba(63,231,255,0.05);
  color: rgba(63,231,255,0.65);
  border: 1px solid rgba(63,231,255,0.15);
}

/* ── Technique d'exécution (how-to steps) ── */
.qi-how {
  margin: 10px 0 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.qi-how-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(155,92,255,0.6);
  margin-bottom: 8px;
}
.qi-how-step {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.qi-how-step:last-child { border-bottom: none; }
.qi-how-num {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: rgba(63,231,255,0.45);
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 54px;
}
.qi-how-body {
  flex: 1;
}
.qi-how-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.qi-how-desc {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.48);
  line-height: 1.45;
}

/* Titres de moment (MATIN / JOURN?E / SOIR) */
.time-label {
  font-family:    var(--f-mono);
  font-size:      var(--tx-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--t2);
}

/* ?? 13. PROFIL / STATS ????????????????????????????????????????? */

/* XP Ring ? inchang? visuellement, juste les couleurs */
.ring-rank   { font-family: var(--f-display); color: var(--t0); }
.ring-level  { font-family: var(--f-display); font-size: var(--tx-2xl); color: var(--t0); }
.ring-xp     { font-family: var(--f-mono); font-size: var(--tx-xs); color: var(--t3); }

/* Stats bars */
.stat-bar-fill { border-radius: 2px; }
.stat-label    { font-family: var(--f-mono); font-size: var(--tx-xs); color: var(--t3); }
.stat-value    { font-family: var(--f-display); font-size: var(--tx-sm); color: var(--t0); }

/* ?? 14. VOID CHAT ?????????????????????????????????????????????? */

.void-chat-id {
  font-family:    var(--f-mono);
  font-size:      var(--tx-xs);
  letter-spacing: 0.18em;
  color:          var(--t3);
}

.void-chat-name {
  font-family:    var(--f-display);
  font-size:      var(--tx-lg);
  color:          var(--accent);
}

/* ?? 15. POPUPS & OVERLAYS ?????????????????????????????????????? */

.sys-pop {
  background:    var(--bg-2);
  border:        1px solid var(--b1);
  border-radius: var(--r3);
  box-shadow:    var(--shadow-overlay);
  /* PAS de glow cyan sur le contour */
}

.sys-pop-overlay {
  background: var(--overlay-scrim);
}

/* ?? 16. ONBOARDING ????????????????????????????????????????????? */

.onboard-screen {
  background: var(--bg-0);
}

.onboard-box {
  background: transparent;
  padding:    var(--s6) var(--s5);
  max-width:  420px;
  margin:     0 auto;
}

/* Cards de s?lection (classe, mode) */
.ob-select-card {
  background:    var(--bg-2);
  border:        1px solid var(--b1);
  border-radius: var(--r2);
  padding:       var(--s4) var(--s5);
  cursor:        pointer;
  position:      relative;
  transition:    border-color var(--dur-fast) var(--ease),
                 background   var(--dur-fast) var(--ease);
  --bracket-col: var(--bracket-neutral);
}

.ob-select-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-top:  1px solid var(--bracket-col);
  border-left: 1px solid var(--bracket-col);
}

.ob-select-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  border-bottom: 1px solid var(--bracket-col);
  border-right:  1px solid var(--bracket-col);
}

.ob-select-card:hover {
  background:   var(--bg-3);
  border-color: var(--b2);
}

.ob-select-card.selected {
  border-color: var(--bracket-col);
  background:   var(--bg-3);
}

/* ?? 17. FOCUS VISIBLE (accessibilit?) ????????????????????????? */

:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
  border-radius:  var(--r1);
}

/* ?? 18. Th?me clair : align? sur _mockup/*.html (body.light-mode) ? pas de for?age sombre */

/* ?? 19. UTILITAIRES ???????????????????????????????????????????? */

/* Texte */
.text-accent  { color: var(--accent);  }
.text-ok      { color: var(--ok);      }
.text-warn    { color: var(--warn);    }
.text-ko      { color: var(--ko);      }
.text-special { color: var(--special); }
.text-t0      { color: var(--t0);      }
.text-t1      { color: var(--t1);      }
.text-t2      { color: var(--t2);      }
.text-t3      { color: var(--t3);      }
.text-t4      { color: var(--t4);      }

/* Espacement */
.gap-1 { gap: var(--s1); }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }

/* Visibilit? */
.nav-hidden { display: none !important; }

/*
 * ????????????????????????????????????????????????????????????????
 *  FIN DU DESIGN SYSTEM v2.0
 *
 *  R?CAP DES CHANGEMENTS MAJEURS vs l'existant :
 *
 *  1 seul bloc :root (remplace 5 blocs ?parpill?s)
 *  Fond forc? sur html/body/main-app (plus jamais de fond clair)
 *  Textes WCAG AA ? ratio min 8.9:1 pour le t3 (metadata)
 *  Taille min 11px pour tout contenu op?rationnel
 *  Crochets fins (1px, 12px) sans glow ? plus l?ger visuellement
 *  Cards : fond solide --bg-2 (#0d1118) au lieu de rgba transparent
 *  Box-shadow supprim? sur les cards (--shadow-card reste pour overlays)
 *  Palette stable : --accent, --ok, --warn, --ko, --special
 *  R?tro-compatibilit? : toutes les anciennes variables existent en alias
 *  Light theme neutralis?
 *  backdrop-filter d?sactiv? (performances mobile)
 *
 * ????????????????????????????????????????????????????????????????
 */

        /* Cards & Quests */
        .card { background: rgba(255,255,255,0.05); border: 1px solid rgba(63,231,255,0.08); border-radius: var(--radius-l); padding: 18px; margin-bottom: var(--space-4); box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
        .card::before { content:''; position:absolute; top:0; left:0; width:18px; height:18px; border-top:2px solid rgba(63,231,255,0.8); border-left:2px solid rgba(63,231,255,0.8); border-radius:0; pointer-events:none; z-index:2; box-shadow: -1px -1px 8px rgba(63,231,255,0.2); }
        .card::after { content:''; position:absolute; bottom:0; right:0; width:18px; height:18px; border-bottom:2px solid rgba(63,231,255,0.8); border-right:2px solid rgba(63,231,255,0.8); border-radius:0; pointer-events:none; z-index:2; box-shadow: 1px 1px 8px rgba(63,231,255,0.2); }
        .card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
        .card-title { font-family: system-ui, -apple-system, 'Manrope', sans-serif; font-size: 12px; color: rgba(31,38,51,0.78); text-transform: uppercase; letter-spacing: 0.14em; }
        .card-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(31,38,51,0.22), transparent); }

        .timeline { display: flex; flex-direction: column; gap: 0; }
        .time-block { margin-bottom: 16px; }
        .anim-block { animation: blockIn var(--anim-block-dur) var(--ease-smooth) both; animation-delay: calc(var(--i, 0) * 60ms); will-change: transform, opacity; }
        .time-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
        .time-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
        .time-label { font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 0; }
        .time-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.1), transparent); min-width: 8px; }
        .time-xp { font-size: 12px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
        .void-day-comment { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: rgba(63,231,255,0.72); text-align: center; padding: 8px 12px; margin: 0 0 10px; }
        .time-drop { border-radius: var(--radius-l); padding: 16px 16px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); box-shadow: var(--glass-shadow); }
        .time-drop summary { list-style: none; cursor: pointer; }
        .time-drop summary::-webkit-details-marker { display: none; }
        .time-drop .time-header { margin-bottom: 0; }
        .time-caret { width: 22px; height: 22px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.59); background: rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); transition: transform 240ms var(--ease-smooth), border-color 240ms ease, background 240ms ease; flex-shrink: 0; }
        .time-caret::before { content: '?'; transform: translateY(-1px); font-size: 14px; }
        details[open].time-drop .time-caret { transform: rotate(180deg); border-color: rgba(255,255,255,0.59); background: rgba(255,255,255,0.59); color: rgba(255,255,255,0.92); }
        .time-drop .quests-group { margin-top: var(--space-3); }
        details.time-drop:not([open]) .quests-group { display: none; }

        .quests-group { display: flex; flex-direction: column; gap: var(--space-3); }
        /* Pills XP + stat */
        .quest-pills-row { display:flex; gap:6px; align-items:center; margin:0 0 10px; flex-wrap:nowrap; overflow:hidden; }
        .quest-stat-badge { font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:2px 8px; border:1px solid rgba(255,255,255,0.59); border-radius:20px; color:rgba(255,255,255,0.59); white-space:nowrap; flex-shrink:0; }
        /* Bas de carte : ? + Terminer + ? */
        .quest-bottom-row { display:flex; gap:8px; align-items:center; margin-top:14px; }
        .quest-replace-btn { background:none; border:1px solid rgba(255,255,255,0.59); border-radius:var(--radius-m); color:rgba(255,255,255,0.59); cursor:pointer; padding:8px 11px; font-size:15px; flex-shrink:0; touch-action:manipulation; transition:all 0.2s; line-height:1; }
        .quest-replace-btn:active { background:rgba(255,255,255,0.59); color:rgba(255,255,255,0.7); }
        .quest-action-btn { flex:1; padding:9px 0; font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; border-radius:var(--radius-m); cursor:pointer; transition:all 0.2s; touch-action:manipulation; text-align:center; }
        .quest-action-btn.q-complete { background:rgba(0,255,136,0.04); border:1px solid rgba(0,255,136,0.68); color:rgba(0,255,136,0.68); }
        .quest-action-btn.q-complete.active, .quest-action-btn.q-complete:active { background:rgba(0,255,136,0.1); border-color:rgba(0,255,136,0.5); color:rgba(0,255,136,0.9); }
        /* Social / R?seau */
        .social-code-block { background:rgba(63,231,255,0.04); border:1px solid rgba(63,231,255,0.18); border-radius:12px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
        .social-code-val { font-family:'Orbitron',sans-serif; font-size:15px; font-weight:700; color:rgba(63,231,255,0.9); letter-spacing:0.15em; }
        .social-code-copy { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:0.12em; background:rgba(63,231,255,0.72); border:1px solid rgba(63,231,255,0.72); border-radius:8px; color:rgba(63,231,255,0.8); padding:6px 12px; cursor:pointer; }
        .social-add-btn { width:100%; padding:12px; font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.15em; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-m); color:rgba(255,255,255,0.65); cursor:pointer; margin-bottom:16px; transition:0.2s; text-transform:uppercase; }
        .social-add-btn:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.18); }
        .social-section-title { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:0.2em; color:rgba(255,255,255,0.59); text-transform:uppercase; margin:16px 0 8px; }
        .friend-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-l); padding:14px 16px; margin-bottom:10px; position:relative; overflow:hidden; }
        .friend-card-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
        .friend-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Orbitron',sans-serif; font-size:14px; font-weight:700; flex-shrink:0; border:1px solid rgba(255,255,255,0.1); }
        .friend-info { flex:1; min-width:0; }
        .friend-name { font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; color:rgba(255,255,255,0.9); letter-spacing:0.05em; }
        .friend-meta { font-size:10px; color:rgba(255,255,255,0.59); margin-top:2px; font-family:'Share Tech Mono',monospace; letter-spacing:0.08em; }
        .friend-streak { font-size:11px; font-family:'Share Tech Mono',monospace; flex-shrink:0; }
        .friend-streak.active { color:rgba(0,255,136,0.8); }
        .friend-streak.inactive { color:rgba(255,130,130,0.80); }
        .friend-alliance { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:0.1em; color:rgba(63,231,255,0.72); margin-bottom:10px; }
        .friend-actions { display:flex; gap:6px; flex-wrap:wrap; }
        .friend-btn { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:0.1em; padding:5px 10px; border-radius:20px; border:1px solid rgba(255,255,255,0.59); background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.59); cursor:pointer; text-transform:uppercase; transition:0.2s; white-space:nowrap; }
        .friend-btn:hover { background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.8); }
        .friend-btn.primary { border-color:rgba(63,231,255,0.72); color:rgba(63,231,255,0.75); background:rgba(63,231,255,0.05); }
        .pending-card { background:rgba(63,231,255,0.03); border:1px solid rgba(63,231,255,0.15); border-radius:var(--radius-m); padding:12px 14px; margin-bottom:8px; }
        .pending-directive { font-size:11px; font-style:italic; color:rgba(255,255,255,0.59); margin:6px 0 10px; line-height:1.5; }
        .pending-actions { display:flex; gap:8px; }
        .social-panel { position:fixed; inset:0; z-index:500; background:rgba(4,7,9,0.97); display:flex; flex-direction:column; overflow:hidden; animation:slideUpPanel 0.25s var(--ease-smooth); }
        @keyframes slideUpPanel { from{transform:translateY(100%)} to{transform:translateY(0)} }
        .social-panel-header { display:flex; align-items:center; gap:12px; padding:max(16px, calc(env(safe-area-inset-top, 0px) + 12px)) 18px 16px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
        .social-panel-back { background:none; border:none; color:rgba(255,255,255,0.59); cursor:pointer; font-size:18px; padding:4px; line-height:1; }
        .social-panel-title { font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; color:rgba(255,255,255,0.85); letter-spacing:0.08em; text-transform:uppercase; flex:1; }
        .social-panel-body { flex:1; overflow-y:auto; padding:16px 18px; -webkit-overflow-scrolling:touch; }
        .chat-bubble-wrap { display:flex; flex-direction:column; gap:8px; }
        .chat-bubble { max-width:75%; padding:9px 13px; border-radius:14px; font-size:12px; line-height:1.5; word-break:break-word; }
        .chat-bubble.sent { background:rgba(63,231,255,0.72); border:1px solid rgba(63,231,255,0.72); color:rgba(63,231,255,0.9); align-self:flex-end; border-radius:14px 14px 4px 14px; }
        .chat-bubble.recv { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.59); color:rgba(255,255,255,0.75); align-self:flex-start; border-radius:14px 14px 14px 4px; }
        .chat-bubble.signal { background:rgba(160,80,255,0.1); border-color:rgba(190,150,255,0.81); color:rgba(190,150,255,0.81); font-style:italic; }
        .chat-time { font-family:'Share Tech Mono',monospace; font-size:8px; color:rgba(255,255,255,0.2); margin-top:2px; }
        .chat-input-row { display:flex; gap:8px; padding:12px 18px; border-top:1px solid rgba(255,255,255,0.06); background:rgba(4,7,9,0.96); flex-shrink:0; }
        .chat-input { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:9px 14px; font-size:12px; color:rgba(255,255,255,0.85); font-family:'Manrope',sans-serif; }
        .chat-send-btn { background:rgba(63,231,255,0.72); border:1px solid rgba(63,231,255,0.72); border-radius:20px; color:rgba(63,231,255,0.9); padding:9px 16px; font-family:'Share Tech Mono',monospace; font-size:10px; cursor:pointer; white-space:nowrap; }
        .signals-row { display:flex; flex-wrap:wrap; gap:6px; padding:10px 0; }
        .signal-chip { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:0.08em; padding:5px 10px; border-radius:20px; border:1px solid rgba(190,150,255,0.81); background:rgba(160,80,255,0.06); color:rgba(190,150,255,0.81); cursor:pointer; }
        .directive-choice { padding:10px 14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.59); border-radius:var(--radius-m); cursor:pointer; margin-bottom:6px; font-size:12px; font-style:italic; color:rgba(255,255,255,0.65); transition:0.2s; }
        .directive-choice.sel { background:rgba(63,231,255,0.72); border-color:rgba(63,231,255,0.72); color:rgba(63,231,255,0.9); }
        .challenge-card { background:rgba(255,200,0,0.04); border:1px solid rgba(255,200,0,0.15); border-radius:var(--radius-m); padding:12px 14px; margin-bottom:8px; }
        .challenge-title { font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; color:rgba(255,200,0,0.85); letter-spacing:0.06em; margin-bottom:4px; }
        .challenge-desc { font-size:11px; color:rgba(255,255,255,0.59); line-height:1.4; }
        .challenge-validate-btn { width:100%; margin-top:10px; padding:10px; font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.18em; background:linear-gradient(135deg,rgba(0,255,136,0.12),rgba(0,200,100,0.06)); border:1px solid rgba(0,255,136,0.35); border-radius:var(--radius-m); color:rgba(0,255,136,0.9); cursor:pointer; text-transform:uppercase; transition:0.2s; }
        .challenge-validate-btn:active { background:rgba(0,255,136,0.2); box-shadow:0 0 18px rgba(0,255,136,0.2); }
        .challenge-xp-slider { width:100%; accent-color:rgba(255,200,0,0.8); margin:8px 0 4px; }
        .challenge-meta { font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(255,255,255,0.59); margin-top:6px; letter-spacing:0.08em; }
        .social-search-input { width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-m); padding:11px 14px; font-size:13px; color:rgba(255,255,255,0.85); font-family:'Share Tech Mono',monospace; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px; }
        .social-search-input::placeholder { color:rgba(255,255,255,0.2); text-transform:none; letter-spacing:0; }
        /* Notification toggles */
        .notif-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
        .notif-toggle-row:last-child { border-bottom:none; }
        .notif-toggle-label { font-size:12px; color:rgba(255,255,255,0.72); line-height:1.3; flex:1; min-width:0; padding-right:12px; }
        .notif-toggle-sub { font-size:10px; color:rgba(255,255,255,0.59); margin-top:2px; display:block; }
        .notif-toggle-sw { position:relative; width:38px; height:22px; flex-shrink:0; }
        .notif-toggle-sw input { opacity:0; width:0; height:0; position:absolute; }
        .notif-toggle-sw .slider { position:absolute; inset:0; background:rgba(255,255,255,0.1); border-radius:11px; transition:0.25s; cursor:pointer; border:1px solid rgba(255,255,255,0.12); }
        .notif-toggle-sw .slider::before { content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; background:rgba(255,255,255,0.4); border-radius:50%; transition:0.25s; }
        .notif-toggle-sw input:checked+.slider { background:rgba(63,231,255,0.2); border-color:rgba(63,231,255,0.4); }
        .notif-toggle-sw input:checked+.slider::before { transform:translateX(16px); background:rgba(63,231,255,0.95); }
        .notif-main-toggle { margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.08); }
        .notif-sub-group { padding-left:4px; opacity:1; transition:opacity 0.2s; }
        .notif-sub-group.disabled { opacity:0.35; pointer-events:none; }
        .notif-perm-btn { width:100%; margin-top:12px; padding:10px; font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.12em; background:rgba(63,231,255,0.72); border:1px solid rgba(63,231,255,0.72); border-radius:var(--radius-m); color:rgba(63,231,255,0.85); cursor:pointer; text-transform:uppercase; transition:0.2s; }
        .notif-perm-btn:hover { background:rgba(63,231,255,0.12); }
        .notif-perm-ok { font-family:'Share Tech Mono',monospace; font-size:10px; color:rgba(0,255,136,0.7); letter-spacing:0.1em; text-align:center; margin-top:10px; }
        /* Profil ? Classe & Genre + Mot du Void */
        .prof-identity-row { display:flex; gap:10px; align-items:stretch; margin-bottom:0; }
        .prof-identity-box { flex:1; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
        .prof-identity-label { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.59); }
        .prof-identity-icon { font-size:22px; margin-bottom:2px; line-height:1; }
        .prof-identity-val { font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
        .prof-identity-sub { font-size:10px; color:rgba(255,255,255,0.4); line-height:1.35; margin-top:2px; }
        .void-word-card { position:relative; overflow:hidden; }
        .void-word-card::after { content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px; background:radial-gradient(circle, rgba(63,231,255,0.07) 0%, transparent 70%); pointer-events:none; }
        .void-word-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
        .void-word-sigil { font-size:22px; opacity:0.7; }
        .void-word-title { font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.18em; color:rgba(63,231,255,0.8); text-transform:uppercase; }
        .void-word-tag { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:0.15em; color:rgba(255,255,255,0.2); margin-left:auto; text-transform:uppercase; }
        .void-word-msg { font-size:12px; line-height:1.75; color:rgba(255,255,255,0.68); font-style:italic; }
        .void-word-focus { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
        .void-word-pill { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; padding:3px 9px; border-radius:20px; border:1px solid; opacity:0.75; }
        /* C?ur like */
        .quest-heart-btn { background:none; border:none; font-size:18px; cursor:pointer; color:rgba(255,255,255,0.59); transition:color 0.2s, filter 0.2s; padding:4px 0; touch-action:manipulation; line-height:1; flex-shrink:0; width:32px; text-align:center; box-sizing:border-box; }
        .quest-heart-btn.active { color:rgba(255,140,0,0.95); filter:drop-shadow(0 0 6px rgba(255,140,0,0.55)); }
        .quest-heart-btn:active { transform:scale(1.25); }
        .quest-dislike-btn { background:none; border:1px solid rgba(255,107,138,0.72); border-radius:4px; font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:0.1em; cursor:pointer; color:rgba(255,107,138,0.72); transition:all 0.2s; padding:4px 8px; touch-action:manipulation; flex-shrink:0; }
        .quest-dislike-btn.active { color:rgba(255,107,138,0.72); border-color:rgba(255,107,138,0.72); background:rgba(255,59,92,0.08); }
        .quest-dislike-btn:active { transform:scale(0.95); }
        .quest-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(63,231,255,0.07); border-radius: var(--radius-l); padding: 16px 18px; cursor: pointer; transition: transform 0.18s var(--ease-smooth), box-shadow 0.18s ease; position: relative; overflow: hidden; transform: translate3d(0, 0, 0); will-change: transform, opacity; box-shadow: var(--glass-shadow); touch-action: manipulation; }
        .quest-item::before { content:''; position:absolute; top:0; left:0; width:12px; height:12px; border-top:1.5px solid rgba(63,231,255,0.5); border-left:1.5px solid rgba(63,231,255,0.5); border-radius:3px 0 0 0; pointer-events:none; z-index:2; }
        .quest-item.done::before { border-color: rgba(63,231,255,0.25); }
        .anim-card { animation: cardIn var(--anim-card-dur) var(--ease-smooth) both; animation-delay: calc(var(--i, 0) * 28ms); }
        .quest-item.pending::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.75), rgba(255,255,255,0) 55%); opacity: 0.55; pointer-events: none; }
        .quest-item.focus { animation: focusPulse 0.8s ease both; }
        .quest-item:active { transform: scale(0.98); }
        .quest-item.done { background: rgba(0,255,136,0.04); border-color: rgba(0,255,136,0.6); box-shadow: 0 0 0 1px rgba(0,255,136,0.2), 0 0 18px rgba(0,255,136,0.12), var(--glass-shadow); }
        .quest-item.failed { background: rgba(231, 76, 60, 0.06); border-color: rgba(255,59,92,0.15); box-shadow: var(--glass-shadow); opacity: 0.75; }
        .quest-collapse { cursor: default; }
        .quest-collapse .quest-top { cursor: default; }
        .quest-collapse-btn { display: none; }
        .quest-details { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); }

        .quest-top { display: flex; align-items: flex-start; gap: 12px; }
        /* Cercle de compl?tion ? grand et rond */
        .quest-check { width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; font-weight: 700; transition: 0.2s; margin-top: 1px; }
        .quest-item.done .quest-check { border-color: var(--success); color: var(--success); background: rgba(0,255,136,0.12); box-shadow: 0 0 10px rgba(0,255,136,0.68); }
        .quest-item.failed .quest-check { border-color: var(--danger); color: var(--danger); background: rgba(255,59,92,0.08); }
        .quest-item.pending .quest-check { border-color: rgba(63,231,255,0.25); }

        .quest-info { flex: 1; min-width: 0; }
        /* Ligne 1 : nom + XP badge */
        .quest-name-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 3px; }
        .quest-name { font-size: 16px; font-weight: 600; color: var(--text-main); line-height: 1.25; flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
        .quest-item.done .quest-name { opacity: 0.6; text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.55); }
        .quest-xp-pill { font-family: 'Share Tech Mono', monospace; font-size: 11px; font-weight: 700; color: var(--neon-blue); white-space: nowrap; flex-shrink: 0; padding: 2px 7px; border: 1px solid rgba(63,231,255,0.72); border-radius: 20px; background: rgba(63,231,255,0.05); }
        .quest-item.done .quest-xp-pill { color: var(--success); border-color: rgba(0,255,136,0.68); background: rgba(0,255,136,0.05); }
        .quest-item.failed .quest-xp-pill { color: var(--danger); border-color: rgba(255,107,138,0.72); background: rgba(255,59,92,0.05); }
        /* Ligne 2 : stat + p?nalit? */
        .quest-meta { display: flex; flex-wrap: nowrap; gap: 5px; font-size: 12px; color: var(--text-dim); align-items: center; margin-bottom: 0; overflow: hidden; }
        .quest-stat { text-transform: uppercase; letter-spacing: 0.1em; flex-shrink: 0; }
        .quest-penalty { color: rgba(255,107,138,0.72); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* T?ches toujours visibles */
        .quest-tasks-inline { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
        .quest-item.done .quest-tasks-inline,
        .quest-item.done .quest-details > .quest-rpg { display: none !important; }
        .task-row { font-size: 12px; color: rgba(255,255,255,0.59); line-height: 1.5; white-space: normal; word-break: break-word; }
        /* D?tails r?duits */
        .quest-rpg { display: flex; flex-direction: column; gap: 8px; }
        .quest-box { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-m); padding: 10px 12px; }
        .quest-k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 4px; }
        .quest-v { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.5; }
        /* T?ches dans les d?tails (pour compatibilit?) */
        .quest-tasks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

        .photo-proof-wrap { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.05); }
        .photo-proof-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
        .photo-proof-title { font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.59); }
        .photo-proof-status { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
        .photo-proof-status.ok { color: rgba(63,231,255,0.92); }
        .photo-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .photo-proof-tile { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-m); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
        .photo-proof-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .photo-proof-tile-label { font-size: 12px; color: rgba(255,255,255,0.75); letter-spacing: 0.12em; text-transform: uppercase; }
        .photo-proof-remove { border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.18); color: rgba(255,255,255,0.70); border-radius: 10px; padding: 8px 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
        .photo-proof-thumb { width: 100%; aspect-ratio: 4 / 3; height: 0; padding-bottom: 75%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.18); display: grid; place-items: center; }
        .photo-proof-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .photo-proof-ph { font-size: 11px; color: rgba(255,255,255,0.60); letter-spacing: 0.16em; text-transform: uppercase; padding: 10px; text-align: center; }
        .photo-proof-btn { display: block; text-align: center; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.59); color: rgba(255,255,255,0.86); border-radius: 12px; padding: 8px 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
        .photo-proof-input { display: none; }

        /* Muscle Map */
        .muscle-map-wrap { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.05); text-align: center; }
        .muscle-figures { display: flex; justify-content: center; gap: 14px; align-items: flex-start; }
        .muscle-figure { width: 92px; height: auto; flex-shrink: 0; filter: drop-shadow(0 10px 26px rgba(0,0,0,0.35)); }
        .body-svg-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
        .body-svg-wrap { width: 92px; border-radius: 16px; padding: 8px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); overflow: hidden; position: relative; }
        .body-svg-wrap svg, .body-svg-wrap img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
        .body-svg-wrap.rest img, .body-svg-wrap.rest svg { filter: grayscale(1) brightness(1.05) contrast(1.08); opacity: 0.9; }
        .body-svg-wrap.active img, .body-svg-wrap.active svg { filter: brightness(1.12) contrast(1.08); }
        .body-svg-wrap.active { box-shadow: 0 0 18px rgba(255,255,255,0.08); }
        .body-svg-inline { position: relative; z-index: 1; }
        .body-svg-fallback { position: relative; z-index: 0; }
        /* 2 couleurs fixes : Cible = cyan, Secondaire = violet */
        .body-svg-wrap svg .muscle-group.active    .muscle { fill: #3fe7ff !important; opacity: 1    !important; }
        .body-svg-wrap svg .muscle-group.secondary .muscle { fill: #9b5cff !important; opacity: 0.85 !important; }
        .body-svg-wrap svg .muscle-group.inactive  .muscle { fill: #4a5568 !important; opacity: 0.18 !important; }
        .body-svglbl { font-family: 'Orbitron', sans-serif; font-size: 11px; color: rgba(255,255,255,0.65); letter-spacing: 0.25em; text-transform: uppercase; }
        .body-svg-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: rgba(255,255,255,0.59); text-transform: uppercase; letter-spacing: 0.15em; z-index: 0; }
        .body-svg-overlay { position: absolute; inset: 8px; z-index: 2; pointer-events: none; }
        .body-svg-overlay .mz { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.95; }
        .body-svg-overlay .mz.pri { --mz-c: rgba(63,231,255,0.60); }
        .body-svg-overlay .mz.sec { --mz-c: rgba(63,231,255,0.30); }
        .body-svg-overlay.face .mz-pec { background:
          radial-gradient(closest-side at 36% 31%, var(--mz-c) 0%, var(--mz-c) 70%, transparent 74%),
          radial-gradient(closest-side at 64% 31%, var(--mz-c) 0%, var(--mz-c) 70%, transparent 74%); }
        .body-svg-overlay.face .mz-abs { background:
          radial-gradient(closest-side at 50% 44%, var(--mz-c) 0%, var(--mz-c) 62%, transparent 66%); }
        .body-svg-overlay.face .mz-oblique { background:
          radial-gradient(closest-side at 36% 46%, var(--mz-c) 0%, var(--mz-c) 52%, transparent 56%),
          radial-gradient(closest-side at 64% 46%, var(--mz-c) 0%, var(--mz-c) 52%, transparent 56%); }
        .body-svg-overlay.face .mz-shoulder { background:
          radial-gradient(closest-side at 22% 27%, var(--mz-c) 0%, var(--mz-c) 56%, transparent 60%),
          radial-gradient(closest-side at 78% 27%, var(--mz-c) 0%, var(--mz-c) 56%, transparent 60%); }
        .body-svg-overlay.face .mz-bicep { background:
          radial-gradient(closest-side at 16% 38%, var(--mz-c) 0%, var(--mz-c) 54%, transparent 58%),
          radial-gradient(closest-side at 84% 38%, var(--mz-c) 0%, var(--mz-c) 54%, transparent 58%); }
        .body-svg-overlay.face .mz-tricep { background:
          radial-gradient(closest-side at 13% 42%, var(--mz-c) 0%, var(--mz-c) 48%, transparent 52%),
          radial-gradient(closest-side at 87% 42%, var(--mz-c) 0%, var(--mz-c) 48%, transparent 52%); }
        .body-svg-overlay.face .mz-quad { background:
          radial-gradient(closest-side at 41% 63%, var(--mz-c) 0%, var(--mz-c) 62%, transparent 66%),
          radial-gradient(closest-side at 59% 63%, var(--mz-c) 0%, var(--mz-c) 62%, transparent 66%); }
        .body-svg-overlay.face .mz-calf { background:
          radial-gradient(closest-side at 42% 80%, var(--mz-c) 0%, var(--mz-c) 52%, transparent 56%),
          radial-gradient(closest-side at 58% 80%, var(--mz-c) 0%, var(--mz-c) 52%, transparent 56%); }
        .body-svg-overlay.dos .mz-trap { background:
          radial-gradient(closest-side at 50% 23%, var(--mz-c) 0%, var(--mz-c) 62%, transparent 66%); }
        .body-svg-overlay.dos .mz-back_upper { background:
          radial-gradient(closest-side at 50% 33%, var(--mz-c) 0%, var(--mz-c) 74%, transparent 78%); }
        .body-svg-overlay.dos .mz-back_lower { background:
          radial-gradient(closest-side at 50% 46%, var(--mz-c) 0%, var(--mz-c) 58%, transparent 62%); }
        .body-svg-overlay.dos .mz-glute { background:
          radial-gradient(closest-side at 40% 58%, var(--mz-c) 0%, var(--mz-c) 62%, transparent 66%),
          radial-gradient(closest-side at 60% 58%, var(--mz-c) 0%, var(--mz-c) 62%, transparent 66%); }
        .body-svg-overlay.dos .mz-hamstring { background:
          radial-gradient(closest-side at 41% 68%, var(--mz-c) 0%, var(--mz-c) 64%, transparent 68%),
          radial-gradient(closest-side at 59% 68%, var(--mz-c) 0%, var(--mz-c) 64%, transparent 68%); }
        .body-svg-overlay.dos .mz-calf { background:
          radial-gradient(closest-side at 42% 80%, var(--mz-c) 0%, var(--mz-c) 52%, transparent 56%),
          radial-gradient(closest-side at 58% 80%, var(--mz-c) 0%, var(--mz-c) 52%, transparent 56%); }
        .body-svg-overlay.dos .mz-shoulder { background:
          radial-gradient(closest-side at 22% 29%, var(--mz-c) 0%, var(--mz-c) 56%, transparent 60%),
          radial-gradient(closest-side at 78% 29%, var(--mz-c) 0%, var(--mz-c) 56%, transparent 60%); }
        .body-svg-overlay.dos .mz-bicep { background:
          radial-gradient(closest-side at 15% 40%, var(--mz-c) 0%, var(--mz-c) 54%, transparent 58%),
          radial-gradient(closest-side at 85% 40%, var(--mz-c) 0%, var(--mz-c) 54%, transparent 58%); }
        .body-svg-overlay.dos .mz-tricep { background:
          radial-gradient(closest-side at 12% 44%, var(--mz-c) 0%, var(--mz-c) 48%, transparent 52%),
          radial-gradient(closest-side at 88% 44%, var(--mz-c) 0%, var(--mz-c) 48%, transparent 52%); }
        .muscle-legend { margin-top: 12px; text-align: left; }
        .ml-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
        .mtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
        .mtag { font-size: 12px; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid transparent; }
        /* couleurs par d?faut ? overrid?es inline par buildMuscleLegend */
        .mtag.pri { background: rgba(255,255,255,0.59); border-color: rgba(255,255,255,0.59); color: rgba(255,255,255,0.9); }
        .mtag.sec { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.59); }

        /* Skills Trigger */
        .skills-trigger-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
        .skills-trigger { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.59); border-radius: 999px; padding: 8px 16px; color: rgba(255,255,255,0.78); font-family: system-ui, -apple-system, 'Manrope', sans-serif; font-size: 11px; cursor: pointer; transition: 0.2s var(--ease-snappy); box-shadow: none; }
        .skills-trigger:active { background: rgba(255,255,255,0.09); }
        .skills-trigger.has-skills { background: rgba(63,231,255,0.06); border-color: rgba(63,231,255,0.18); box-shadow: 0 0 18px rgba(63,231,255,0.08); }

        /* Panels */
        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.68); z-index: 200; display: none; opacity: 0; transition: opacity 0.25s; }
        .overlay.open { display: block; opacity: 1; }
        .side-panel { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 480px; background: rgba(5,7,10,0.92); border-top: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-l) var(--radius-l) 0 0; z-index: 201; transition: transform 520ms var(--ease-smooth); max-height: 85vh; overflow-y: auto; padding: var(--space-5); backdrop-filter: blur(var(--glass-blur)) saturate(1.25); will-change: transform; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
        .side-panel.open { transform: translateX(-50%) translateY(0); }
        
        .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: var(--space-4); }
        .skill-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-m); padding: var(--space-4); margin-bottom: var(--space-3); }
        .skill-card.active { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.02); }
        .skill-card.maxed { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.02); }
        .skill-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
        .skill-icon { font-size: 24px; }
        .skill-name { font-family: 'Orbitron', sans-serif; font-size: 14px; color: #fff; }
        .skill-level-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
        .skill-level-dots { display: flex; gap: 4px; }
        .skill-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.1); }
        .skill-dot.filled { background: rgba(255,255,255,0.86); box-shadow: none; }
        .skill-level-label { font-size: 12px; color: rgba(255,255,255,0.72); text-transform: uppercase; letter-spacing: 0.1em; }

        .skill-progress-wrap { height: 4px; background: rgba(0,0,0,0.3); border-radius: 2px; margin: 10px 0; overflow: hidden; }
        .skill-progress-fill { height: 100%; background: rgba(255,255,255,0.82); transition: width 0.5s; }
        .skill-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; }
        .skill-bonus { font-size: 12px; color: rgba(255,255,255,0.82); margin-top: 5px; font-weight: 600; }
        .skill-next { font-size: 11px; color: rgba(255,255,255,0.59); margin-top: 4px; }
        .skills-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: var(--space-3); }
        .skills-mini { text-align: center; padding: 10px; background: rgba(255,255,255,0.03); border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); }
        .skills-mini.off { opacity: 0.35; }
        .skills-mini-ico { font-size: 20px; }
        .skills-mini-lvl { font-size: 11px; color: rgba(255,255,255,0.72); font-weight: 650; letter-spacing: 0.08em; margin-top: 4px; }

        .inv-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
        .inv-item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px; }
        .inv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .inv-name { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.92); }
        .inv-desc { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,0.70); line-height: 1.4; }
        .inv-btn { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.59); color: rgba(255,255,255,0.84); border-radius: var(--radius-m); padding: 8px 10px; font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
        .inv-btn:disabled { opacity: 0.45; cursor: not-allowed; }
        .inv-empty { text-align: center; padding: 14px 12px; border: 1px solid rgba(255,255,255,0.59); border-radius: 12px; background: rgba(0,0,0,0.18); color: rgba(255,255,255,0.65); font-size: 12px; }


        /* Onboarding */
        .onboard-screen { position: fixed; inset: 0; background: var(--bg-dark); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding-top: max(24px, calc(env(safe-area-inset-top, 0px) + 16px)); padding-left: var(--space-6); padding-right: var(--space-6); padding-bottom: var(--space-6); overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
        .onboard-box { width: 100%; max-width: 380px; }
        .onboard-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 12px; color: var(--neon-blue); letter-spacing: 0.5em; text-transform: uppercase; text-align: center; margin-bottom: 10px; }
        .onboard-name { font-family: 'Orbitron', sans-serif; font-size: 28px; font-weight: 600; color: #fff; text-align: center; margin-bottom: 5px; }
        .onboard-sub { font-size: 11px; color: var(--text-dim); text-align: center; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: var(--space-6); }
        
        .onboard-section { margin-bottom: var(--space-6); }
        .onboard-section-title { font-family: 'Orbitron', sans-serif; font-size: 12px; color: var(--neon-blue); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.59); padding-bottom: 6px; }
        .onboard-field { margin-bottom: var(--space-4); }
        .onboard-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; display: block; }
        .onboard-input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.59); border-radius: 14px; padding: 14px 14px; color: #fff; font-family: 'Manrope', sans-serif; font-size: 16px; outline: none; transition: 0.3s; backdrop-filter: blur(calc(var(--glass-blur) * 0.75)) saturate(1.25); }
        .onboard-input:focus { border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(255,255,255,0.08); }
        
        .ob-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .ob-diff-btn { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 15px 5px; text-align: center; cursor: pointer; transition: 0.2s; }
        .ob-diff-btn .di { font-size: 20px; display: block; margin-bottom: 5px; }
        .ob-diff-btn .dl { font-family: 'Orbitron', sans-serif; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
        .ob-diff-btn .ds { font-size: 11px; color: rgba(255,255,255,0.59); display: block; margin-top: 2px; }
        .ob-diff-btn.sel-deb { border-color: var(--success); background: rgba(0, 255, 136, 0.05); }
        .ob-diff-btn.sel-int { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); }
        .ob-diff-btn.sel-spt { border-color: var(--neon-purple); background: rgba(188, 19, 254, 0.05); }
        .ob-diff-btn.sel-deb .dl { color: var(--success); }
        .ob-diff-btn.sel-int .dl { color: var(--neon-blue); }
        .ob-diff-btn.sel-spt .dl { color: var(--neon-purple); }

        .onboard-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
        .ob-day { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.59); border-radius: 8px; padding: 10px 0; font-size: 11px; text-align: center; cursor: pointer; color: var(--text-dim); }
        .ob-day.work { border-color: rgba(255,255,255,0.59); color: rgba(255,255,255,0.86); background: rgba(255,255,255,0.59); }

        .onboard-btn { width: 100%; background: var(--accent-blue); border: none; border-radius: var(--radius-m); padding: 16px; color: #0e1219; font-family: system-ui, -apple-system, 'Manrope', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; cursor: pointer; margin-top: 10px; box-shadow: 0 0 24px rgba(63,231,255,0.72); }
        .onboard-btn:active { opacity: 0.85; }
        .onboard-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
        .ob-class-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; background: rgba(255,255,255,0.02); padding: 12px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
        .ob-class-card:active { transform: scale(0.99); }
        .ob-class-card.on { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04); }
        .ob-class-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
        .ob-class-name { font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.92); }
        .ob-class-tag { font-size: 12px; color: rgba(255,255,255,0.70); letter-spacing: 0.14em; text-transform: uppercase; }
        .ob-class-desc { margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.72); line-height: 1.45; }
        .ob-gender-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
        .ob-gender-btn { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 8px; text-align: center; cursor: pointer; transition: 0.2s; }
        .ob-gender-btn .gi { font-size: 18px; display: block; margin-bottom: 5px; }
        .ob-gender-btn .gl { font-family: 'Orbitron', sans-serif; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
        .ob-gender-btn.sel-homme { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04); }
        .ob-gender-btn.sel-homme .gl { color: var(--neon-blue); }
        .ob-gender-btn.sel-femme { border-color: rgba(188, 19, 254, 0.35); background: rgba(188, 19, 254, 0.05); }
        .ob-gender-btn.sel-femme .gl { color: var(--neon-purple); }
        /* === TOUR GUID? === */
        #tour-overlay { position:fixed;inset:0;z-index:var(--z-tour);background:transparent;display:none;flex-direction:column;align-items:center;justify-content:flex-end;padding:16px 16px max(88px,calc(env(safe-area-inset-bottom,0px)+88px));pointer-events:none; }
        #tour-spotlight { position:fixed;z-index:var(--z-tour-spotlight);border-radius:12px;box-shadow:0 0 0 9999px rgba(3,5,8,0.78),0 0 0 2px rgba(63,231,255,0.55),0 0 36px 6px rgba(63,231,255,0.18);pointer-events:none;display:none;transition:top 0.38s cubic-bezier(.4,0,.2,1),left 0.38s cubic-bezier(.4,0,.2,1),width 0.38s cubic-bezier(.4,0,.2,1),height 0.38s cubic-bezier(.4,0,.2,1); }
        .tour-bubble { width:min(420px,100%);background:rgba(4,7,11,0.99);border:1px solid rgba(63,231,255,0.22);border-radius:12px;padding:22px 20px 20px;box-shadow:0 0 48px rgba(63,231,255,0.08),0 24px 64px rgba(0,0,0,0.7);animation:cardIn 0.35s var(--ease-smooth) both;pointer-events:auto; }
        .tour-void-label { font-family:'Share Tech Mono',monospace;font-size: 11px;letter-spacing:0.32em;color:rgba(63,231,255,0.72);margin-bottom:14px;display:flex;align-items:center;gap:8px; }
        .tour-void-label::before { content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:rgba(63,231,255,0.7);box-shadow:0 0 8px rgba(63,231,255,0.6); }
        .tour-text { font-family:'Manrope',sans-serif;font-weight: 400;font-size:14px;color:rgba(255,255,255,0.82);line-height:1.75;white-space:pre-line;margin-bottom:22px; }
        .tour-dots { display:flex;gap:6px;margin-bottom:16px; }
        .tour-dot { width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.12);transition:background 0.3s,transform 0.3s; }
        .tour-dot.on { background:rgba(63,231,255,0.8);transform:scale(1.3); }
        .tour-btns { display:flex;gap:10px; }
        .tour-skip-btn { padding:12px 16px;background:transparent;border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:rgba(255,255,255,0.65);font-family:'Share Tech Mono',monospace;font-size: 11px;letter-spacing:0.15em;cursor:pointer;touch-action:manipulation; }
        .tour-next-btn { flex:1;padding:12px 16px;background:rgba(63,231,255,0.72);border:1px solid rgba(63,231,255,0.72);border-radius:6px;color:rgba(63,231,255,0.9);font-family:'Share Tech Mono',monospace;font-size: 12px;letter-spacing:0.18em;cursor:pointer;touch-action:manipulation;transition:background 0.2s; }
        .tour-next-btn:active { background:rgba(63,231,255,0.16); }

        /* Stats & Bilan */
        .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
        .stat-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-m); padding: 14px; }
        .stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
        .stat-name { font-size: 12px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.1em; }
        .stat-value { font-family: 'Orbitron', sans-serif; font-size: 18px; font-weight: 700; }
        .stat-right { display: flex; align-items: center; gap: 10px; }
        .stat-inc { width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,0.59); background: rgba(0,0,0,0.18); color: rgba(255,255,255,0.92); cursor: pointer; font-family: 'Orbitron', sans-serif; font-weight: 650; }
        .stat-inc:disabled { opacity: 0.28; cursor: not-allowed; }
        .stat-bar { height: 3px; background: rgba(0,0,0,0.3); border-radius: 2px; overflow: hidden; }
        .stat-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }
        .stat-points-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
        .stat-points-hint { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px; line-height: 1.5; }

        .stats-drop { padding: 0; overflow: hidden; }
        .stats-drop-summary { list-style: none; cursor: pointer; user-select: none; }
        .stats-drop-summary::-webkit-details-marker { display: none; }
        .stats-drop .card-header { margin: 0; }
        .stats-drop .card-header { padding: 14px 16px 12px; display: flex; align-items: center; gap: 10px; }
        .stats-drop .card-title { white-space: nowrap; }
        details[open].stats-drop .time-caret { transform: rotate(180deg); border-color: rgba(63,231,255,0.72); background: rgba(63,231,255,0.06); color: rgba(63,231,255,0.92); }
        .stats-drop-body { padding: 0 16px 16px; }

        .bilan-section { margin-bottom: 25px; }
        .bilan-title { font-family: 'Orbitron', sans-serif; font-size: 11px; color: var(--neon-blue); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 6px; }
        .bilan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .bilan-stat { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-m); padding: 18px; text-align: center; }
        .bilan-stat-val { font-family: 'Orbitron', sans-serif; font-size: 28px; font-weight: 700; color: #fff; }
        .bilan-stat-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; text-transform: uppercase; }
        .bilan-controls { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; flex-wrap: wrap; }
        .bilan-chip { border: 1px solid rgba(255,255,255,0.59); background: rgba(0,0,0,0.16); color: rgba(255,255,255,0.78); padding: 8px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, color 180ms ease; }
        .bilan-chip.active { border-color: rgba(63,231,255,0.72); background: rgba(63,231,255,0.72); color: rgba(255,255,255,0.92); }
        #share-card-canvas { display:none; }
        .share-stat-btn { display:flex; align-items:center; gap:8px; width:100%; margin-top:14px; padding:12px 16px; background:rgba(155,92,255,0.08); border:1px solid rgba(155,92,255,0.25); border-radius:6px; color:rgba(190,150,255,0.81); font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; cursor:pointer; touch-action:manipulation; transition:background 180ms,border-color 180ms; }
        .share-stat-btn:active { background:rgba(155,92,255,0.16); border-color:rgba(155,92,255,0.5); }
        .bilan-chart-wrap { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 14px; }
        .bilan-chart { height: 170px; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: end; gap: 6px; }
        .bilan-bar { height: 100%; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22); cursor: pointer; position: relative; padding: 0; }
        .bilan-bar.sel { border-color: rgba(63,231,255,0.40); background: rgba(63,231,255,0.06); }
        .bilan-bar-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(180deg, rgba(63,231,255,0.92), rgba(122,92,255,0.92)); box-shadow: 0 0 18px rgba(63,231,255,0.10); transition: height 240ms ease; }
        .bilan-bar-fill.low { background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(63,231,255,0.85)); box-shadow: none; opacity: 0.75; }
        .bilan-day-card { margin-top: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 14px; }
        .bilan-day-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
        .bilan-day-date { font-size: 12px; color: rgba(255,255,255,0.92); font-weight: 520; }
        .bilan-day-meta { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; }
        .bilan-void-card { margin-top: 12px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.10); padding: 14px; }
        .bilan-void-tag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(63,231,255,0.92); }
        .bilan-void-msg { margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1.45; }
        .bilan-hours { margin-top: 12px; height: 120px; display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; align-items: end; }
        .bilan-hour { height: 100%; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22); position: relative; padding: 0; }
        .bilan-hour-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: rgba(63,231,255,0.85); box-shadow: 0 0 14px rgba(63,231,255,0.10); transition: height 240ms ease; }
        .bilan-month { margin-top: 8px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
        .bilan-dow-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-top: 12px; margin-bottom: 2px; }
        .bilan-dow-header span { font-size: 11px; text-align: center; color: rgba(255,255,255,0.59); text-transform: uppercase; letter-spacing: 0.08em; }
        .bilan-daycell { aspect-ratio: 1; height: auto; border-radius: 50% !important; border: none !important; background: rgba(255,255,255,0.07); color: transparent; font-size: 0; cursor: pointer; display: grid; place-items: center; position: relative; padding: 0; transition: background 0.2s, box-shadow 0.2s; }
        .bilan-daycell.on { background: rgba(63,231,255,0.75); box-shadow: 0 0 10px rgba(63,231,255,0.25); }
        .bilan-daycell.on.partial { background: rgba(63,231,255,0.35); box-shadow: none; }
        .bilan-daycell.sel { outline: 2px solid rgba(63,231,255,0.9); outline-offset: 2px; }
        .bilan-daycell-fill { display: none; }
        
        /* Bilan stat2 cards */
        .bilan-stats-row { display: flex; gap: 10px; margin-bottom: 10px; }
        .bilan-stat2 { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-m); padding: 14px 16px; }
        .bilan-stat2-val { font-family: 'Share Tech Mono', monospace; font-size: 20px; font-weight: 700; color: #fff; }
        .bilan-stat2-label { font-size: 11px; color: var(--text-dim); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.12em; }
        .bilan-stat2-sub { font-size: 12px; margin-top: 5px; font-weight: 600; }
        .bilan-stat2-sub.up { color: rgba(0,255,136,0.85); }
        .bilan-stat2-sub.down { color: rgba(255,107,138,0.72); }
        .bilan-stat2-sub.flat { color: rgba(255,255,255,0.60); }
        /* Bilan line chart */
        .bilan-linechart { display: block; width: 100%; height: 110px; margin-top: 10px; }
        /* Collapsible history */
        .bilan-history-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-m); margin-bottom: 8px; overflow: hidden; }
        .bilan-history-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; }
        .bilan-history-header:hover { background: rgba(255,255,255,0.03); }
        .bilan-history-toggle { font-size: 12px; color: var(--text-dim); transition: transform 200ms; user-select: none; }
        .bilan-history-toggle.open { transform: rotate(180deg); }
        .bilan-history-date { font-size: 12px; color: var(--text-main); font-weight: 500; }
        .bilan-history-quests { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
        .bilan-history-xp { font-family: 'Orbitron', sans-serif; font-size: 13px; color: var(--neon-blue); }
        .bilan-history-detail { display: none; padding: 0 18px 14px; }
        .bilan-history-detail.open { display: block; }
        /* Historique 2 colonnes */
        .bilan-hist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .bilan-hist-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-m); padding: 12px 14px; cursor: pointer; }
        .bilan-hist-header { display: flex; justify-content: space-between; align-items: center; }
        .bilan-hist-date { font-size: 11px; color: rgba(255,255,255,0.85); font-weight: 520; }
        .bilan-hist-arrow { font-size: 11px; color: var(--text-dim); transition: transform 200ms; }
        .bilan-hist-arrow.open { transform: rotate(180deg); }
        .bilan-hist-detail { display: none; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 8px; }
        .bilan-hist-detail.open { display: block; }
        .bilan-hist-quests { font-size: 12px; color: var(--text-dim); }
        .bilan-hist-xp { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: var(--neon-blue); margin-top: 5px; }

        /* Hydration Slider */
        .hydra-slider-wrap { margin-top: 15px; padding: 15px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-l); }
        .hydra-top-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
        .hydra-val { font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 650; color: #fff; }
        .hydra-goal { font-size: 11px; color: var(--text-dim); }
        .hydra-bar-wrap { position: relative; height: 6px; background: rgba(0,0,0,0.3); border-radius: 3px; margin: 15px 0; }
        .hydra-bar-fill { height: 100%; border-radius: 3px; background: var(--neon-blue); box-shadow: 0 0 10px var(--neon-glow); transition: width 0.3s; }
        .hydra-bar-fill.full { background: var(--success); box-shadow: 0 0 10px rgba(0, 255, 136, 0.4); }
        .hydra-slider { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; touch-action: manipulation; }
        .hydra-marks { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.59); }

        /* Mood Picker */
        .mood-picker { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.05); }
        .mood-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
        .mood-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; }
        .mood-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
        .mood-btn.active { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); transform: scale(1.06); }
        .mood-note { width: 100%; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.59); border-radius: 10px; padding: 10px; color: var(--text-main); font-family: inherit; font-size: 16px; resize: none; outline: none; }
        .sleep-adj { width: 44px; height: 44px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.59); color: var(--text-main); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, transform 0.1s; line-height: 1; }
        .sleep-adj:hover { background: rgba(255,255,255,0.1); transform: scale(1.08); }
        .sleep-adj:active { transform: scale(0.95); }
        .mood-note:focus { border-color: var(--neon-blue); }

        /* Notifications (Toast) */
        #notif { position: fixed; top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px)); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 24px)); background: var(--bg-card); border: none; padding: 12px 14px; border-radius: var(--radius-l); z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, top 0.25s ease; box-shadow: var(--glass-shadow); }
        #notif.show { opacity: 1; top: max(24px, calc(env(safe-area-inset-top, 0px) + 12px)); }
        .notif-title { font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--neon-blue); }
        .notif-sub { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1.35; }

        .sys-pop-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(8px) saturate(1.1); z-index: var(--z-sys-pop); display: none; opacity: 0; transition: opacity 0.25s ease; }
        .sys-pop-overlay.open { display: flex; opacity: 1; align-items: center; justify-content: center; padding: 18px; }
        .sys-pop-overlay.open .sys-pop { animation: sysPopIn 360ms var(--ease-smooth) both; }
        .sys-pop { width: min(520px, calc(100vw - 24px)); border-radius: var(--radius-l); border: none; background: rgba(5,7,10,0.92); box-shadow: 0 24px 80px rgba(0,0,0,0.75); overflow: hidden; max-height: min(78vh, 640px); display: flex; flex-direction: column; }
        .sys-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .sys-pop-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--neon-blue); }
        .sys-pop-close { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.59); background: rgba(0,0,0,0.2); color: rgba(255,255,255,0.7); font-size: 18px; line-height: 1; cursor: pointer; }
        .vq-btn { width:100%;padding:16px 20px;background:rgba(63,231,255,0.04);border:1px solid rgba(63,231,255,0.72);border-radius:4px;color:rgba(255,255,255,0.85);font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:0.14em;cursor:pointer;transition:all 0.2s;text-align:left; }
        .vq-btn:hover { background:rgba(63,231,255,0.08);border-color:rgba(63,231,255,0.4); }
        .bilan-energy-btn { width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:0.2s; }
        .bilan-energy-btn.active { border-color:rgba(63,231,255,0.4);background:rgba(63,231,255,0.08);transform:scale(1.08); }
        .sys-pop-body { padding: 16px; font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 14px; color: rgba(255,255,255,0.86); line-height: 1.65; white-space: pre-line; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
        #install-overlay { z-index: 99998; }

        @keyframes sysPopIn { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }

        /* General UI Elements */
        .phase-badge { font-family: 'Orbitron', sans-serif; font-size: 13px; color: var(--neon-blue); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); padding: 8px 20px; border-radius: var(--radius-m); display: block; text-align: center; margin-bottom: 15px; letter-spacing: 0.12em; }
        .day-summary { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), var(--bg-card); border: 1px solid var(--glass-border-soft); border-radius: var(--radius-l); padding: var(--space-6); text-align: center; margin-top: var(--space-5); backdrop-filter: blur(var(--glass-blur)) saturate(1.25); box-shadow: var(--glass-shadow); }
        .summary-xp { font-family: 'Orbitron', sans-serif; font-size: 42px; font-weight: 700; color: #fff; }
        .summary-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; margin-top: 4px; letter-spacing: 0.2em; }
        .streak-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; color: var(--text-dim); font-size: 13px; }
        .streak-num { font-family: 'Orbitron', sans-serif; font-size: 22px; color: var(--neon-blue); font-weight: 600; }
        
        .reset-btn { width: 100%; background: rgba(255,255,255,0.59); border: 1px solid rgba(255,255,255,0.59); color: rgba(255,255,255,0.78); padding: 14px; border-radius: var(--radius-m); font-family: system-ui, -apple-system, 'Manrope', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; cursor: pointer; margin-top: var(--space-4); box-shadow: none; }
        .reset-btn:active { background: rgba(255,255,255,0.10); }

        .param-section { margin-bottom: 30px; }
        .param-title { font-family: 'Orbitron', sans-serif; font-size: 11px; color: var(--neon-blue); border-bottom: 1px solid rgba(255,255,255,0.59); padding-bottom: 8px; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.2em; }
        .param-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .param-label { font-size: 13px; color: var(--text-main); }
        .param-input { background: rgba(255,255,255,0.59); border: 1px solid rgba(255,255,255,0.59); border-radius: var(--radius-s); padding: 8px 12px; color: var(--text-main); text-align: center; font-family: inherit; box-shadow: none; }
        .param-range { width: 220px; appearance: none; background: transparent; padding: 0; box-shadow: none; border: none; --p: 0%; }
        .param-range-full { width: 100%; }
        .param-range:focus { outline: none; }
        .param-range::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, rgba(63,231,255,0.92) 0%, rgba(63,231,255,0.92) var(--p), rgba(255,255,255,0.08) var(--p), rgba(255,255,255,0.08) 100%); border: none; }
        .param-range::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; margin-top: -11px; background: rgba(63,231,255,0.92); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 0 18px rgba(63,231,255,0.18); border-radius: 50%; }
        .param-range::-moz-range-track { height: 6px; background: linear-gradient(90deg, rgba(63,231,255,0.92) 0%, rgba(63,231,255,0.92) var(--p), rgba(255,255,255,0.08) var(--p), rgba(255,255,255,0.08) 100%); border: none; }
        .param-range::-moz-range-thumb { width: 28px; height: 28px; background: rgba(63,231,255,0.92); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 0 18px rgba(63,231,255,0.18); border-radius: 50%; }
        
        .param-save-btn { width: 100%; background: var(--accent-blue); color: #0e1219; border: none; border-radius: var(--radius-m); padding: 15px; font-family: 'Orbitron', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; box-shadow: 0 0 24px rgba(63,231,255,0.72); }
        .danger-btn { width: 100%; background: transparent; border: none; color: var(--danger); padding: 12px; border-radius: 10px; font-size: 11px; margin-top: 10px; cursor: pointer; text-transform: uppercase; }

        @keyframes rankPulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.2); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
        @keyframes slideInSection { from { opacity: 0; transform: translate3d(22px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
        @keyframes bgDrift { 0% { transform: translate3d(0, 0, 0) scale(1); filter: saturate(1); } 100% { transform: translate3d(0, -10px, 0) scale(1.02); filter: saturate(1.1); } }
        @keyframes bgFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        @keyframes bgWander {
          0% { transform: translate3d(0,0,0) scale(1); background-position: 40% 45%; }
          13% { transform: translate3d(-2%,1%,0) scale(1.02); background-position: 55% 38%; }
          37% { transform: translate3d(3%,-2%,0) scale(1.04); background-position: 68% 56%; }
          58% { transform: translate3d(-1%,3%,0) scale(1.03); background-position: 30% 68%; }
          79% { transform: translate3d(2%,2%,0) scale(1.05); background-position: 62% 76%; }
          100% { transform: translate3d(0,0,0) scale(1); background-position: 40% 45%; }
        }
        @keyframes bgWander2 {
          0% { transform: translate3d(0,0,0) scale(1); background-position: 50% 50%; }
          21% { transform: translate3d(1%,-1%,0) scale(1.02); background-position: 62% 44%; }
          49% { transform: translate3d(-2%,1%,0) scale(1.03); background-position: 38% 62%; }
          73% { transform: translate3d(2%,2%,0) scale(1.01); background-position: 58% 74%; }
          100% { transform: translate3d(0,0,0) scale(1); background-position: 50% 50%; }
        }
        
        @keyframes bgPulse { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; } 50% { transform: translate3d(0, 12px, 0) scale(1.03); opacity: 0.75; } }
        @keyframes cardIn { 0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.992); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
        @keyframes blockIn { 0% { opacity: 0; transform: translate3d(0, 8px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }
        @keyframes shine { 0% { transform: translateX(-120%); opacity: 0; } 30% { opacity: 0.25; } 55% { transform: translateX(120%); opacity: 0.25; } 100% { transform: translateX(120%); opacity: 0; } }
        @keyframes xpFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
        @keyframes focusPulse { 0% { box-shadow: 0 0 0 rgba(0, 242, 255, 0.0); border-color: rgba(255,255,255,0.06); } 45% { box-shadow: 0 0 0 8px rgba(0, 242, 255, 0.09); border-color: rgba(0, 242, 255, 0.35); } 100% { box-shadow: 0 0 0 0 rgba(0, 242, 255, 0.0); border-color: rgba(255,255,255,0.06); } }

        @media (prefers-reduced-motion: reduce) {
            * { animation: none !important; transition: none !important; }
        }

        .dtb { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 14px; border-radius: 50px; font-weight: 600; }
        .dtb.work { background: rgba(255,255,255,0.05); color: var(--text-dim); }
        .dtb.free { background: rgba(255,255,255,0.59); color: rgba(255,255,255,0.86); border: 1px solid rgba(255,255,255,0.59); }
        /* :root bloc 1 supprim? ? remplac? par design-system-v2 */

        html, body { color: var(--text-main); font-family: var(--font-main); }
        body { font-family: var(--font-main); }
        body::before{ display: none !important; }
        body::after{ display: none !important; }

        .shell { max-width: 1200px; margin: 0 auto; min-height: 100vh; display: grid; grid-template-columns: 84px 1fr; gap: 18px; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
        .side-nav { position: sticky; top: 18px; height: calc(100vh - 36px); border-radius: var(--radius-l); background: rgba(5,7,10,0.92); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); box-shadow: none; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
        .side-brand { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--radius-m); border: none; background: rgba(0,0,0,0.10); color: rgba(255,255,255,0.72); letter-spacing: 0.22em; font-size: 12px; text-transform: uppercase; }
        .side-brand.side-brand--vertical { height: auto; min-height: 72px; padding: 14px 0; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.42em; font-size: 11px; font-family: 'Share Tech Mono', monospace; color: rgba(63,231,255,0.82); border: 1px solid rgba(63,231,255,0.12); background: rgba(0,0,0,0.18); }
        .side-item { position: relative; width: 100%; display: grid; place-items: center; gap: 6px; padding: 10px 0; border: none; background: transparent; color: rgba(255,255,255,0.59); border-radius: var(--radius-m); cursor: pointer; transition: background 180ms ease, color 180ms ease; }
        .side-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
        .side-item span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
        .side-item.active { color: rgba(255,255,255,0.92); background: rgba(63,231,255,0.06); }
        .side-item.locked { opacity: 0.42; cursor: not-allowed; }

        .main-area { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
        .mini-header { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 6px 0 16px; background: none; border: none; box-shadow: none; min-height: unset; }
        .mini-banner { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
        .mini-banner::before { content: none; }
        .mini-banner::after { content: none; }
        .mini-banner-img { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 120%; height: auto; min-height: 100%; z-index: 0; }
        
        .mini-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .mini-row { display: none; }
        .mini-leftwrap { min-width: 0; display: flex; align-items: center; gap: 10px; }
        .mini-left { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
        .mini-name { font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; font-size: 14px; font-weight: 520; color: rgba(255,255,255,0.92); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw; }
        .mini-sub { display: none; }
        .mini-xpbar { display: none; }
        .mini-xpfill { height: 100%; width: 0%; background: linear-gradient(90deg, rgba(0,255,136,0.92), rgba(63,231,255,0.90), rgba(122,92,255,0.90)); }
        .tab-title { margin-top: 0; font-size: 12px; color: rgba(255,255,255,0.62); text-transform: uppercase; letter-spacing: 0.18em; padding: 0 4px; }
        .profile-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 20px; border-radius: var(--radius-l); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); box-shadow: var(--glass-shadow); text-align: center; }
        .profile-core { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
        .header-top { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.59); }
        .header-name { font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; font-size: 24px; font-weight: 520; color: rgba(255,255,255,0.92); line-height: 1.05; max-width: min(860px, 92vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .header-sub { margin-top: 8px; font-size: 11px; color: rgba(255,255,255,0.59); text-transform: uppercase; letter-spacing: 0.14em; max-width: min(920px, 92vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .profile-sub { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
        .profile-sub .header-sub { margin-top: 0; white-space: normal; overflow: visible; text-overflow: clip; }
        .meta-pill { font-size: 12px; color: rgba(255,255,255,0.80); background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.59); border-radius: var(--radius-m); padding: 6px 10px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
        #day-type-card { }
        .quick-actions { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 10px; }
        .quick-btn { width: 40px; height: 40px; border-radius: var(--radius-m); border: 1px solid rgba(255,255,255,0.59); background: rgba(0,0,0,0.16); color: rgba(255,255,255,0.70); display: grid; place-items: center; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease; }
        .quick-btn svg { width: 18px; height: 18px; fill: currentColor; }
        .quick-btn:hover { border-color: rgba(63,231,255,0.72); color: rgba(255,255,255,0.92); background: rgba(63,231,255,0.06); }
        .quick-btn:active { transform: scale(0.98); }

        .avatar-box { border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.16); border-radius: 0; overflow: hidden; display: grid; place-items: center; }
        .avatar-box svg { display: block; width: 100%; height: 100%; }
        .avatar-mini { width: 34px; height: 34px; flex-shrink: 0; }
        .avatar-lg { width: 64px; height: 64px; flex-shrink: 0; }
        .avatar-profile { width: clamp(48px, 12vw, 62px); height: clamp(48px, 12vw, 62px); flex-shrink: 0; }
        .profile-head { display: flex; align-items: flex-start; gap: 12px; }
        .profile-head-text { min-width: 0; }
        .xp-ring { width: clamp(280px, 52vw, 504px); height: clamp(280px, 52vw, 504px); position: relative; display: grid; place-items: center; }
        .xp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
        .xp-ring .ring-bg { stroke: rgba(255,255,255,0.10); }
        .xp-ring .ring-fg { stroke: rgba(63,231,255,0.92); filter: none; }
        .xp-ring circle { fill: transparent; stroke-width: 6; }
        .xp-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; transform: translateY(0px); }
        .xp-ring-center .ring-level { font-family: 'Orbitron', 'Manrope', sans-serif; font-size: 42px; font-weight: 900; color: rgba(255,255,255,0.95); line-height: 1; letter-spacing: 0.04em; }
        .xp-ring-center .ring-rank { font-size: 9px; color: rgba(63,231,255,0.75); letter-spacing: 0.22em; text-transform: uppercase; font-family:'Share Tech Mono',monospace; margin-top:3px; }
        .xp-ring-center .ring-xp { font-size: 12px; color: rgba(255,255,255,0.70); letter-spacing: 0.08em; text-transform: uppercase; }
        .xp-ring-center .ring-day { font-size: 12px; color: rgba(63,231,255,0.86); letter-spacing: 0.14em; text-transform: uppercase; max-width: 26ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .xp-ring-center .ring-day:empty { display: none; }

        #rank-prog { padding: 14px 16px; border-radius: var(--radius-l); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); box-shadow: var(--glass-shadow); }
        #next-unlock { padding: 12px 14px; border-radius: var(--radius-l); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); box-shadow: var(--glass-shadow); text-align: center; }

        .system-label { color: rgba(63,231,255,0.72); letter-spacing: 0.26em; text-shadow: 0 0 10px rgba(63,231,255,0.72); font-size: 12px !important; }
        .system-label::before { content:'? '; opacity:0.8; }
        .rank-letter { color: var(--accent-blue); text-shadow: 0 0 16px rgba(63,231,255,0.72); animation: none; }
        .rank-label { color: rgba(180,130,255,0.79); letter-spacing: 0.18em; }
        .level-val { color: rgba(255,255,255,0.95); text-shadow: 0 0 12px rgba(63,231,255,0.72); }
        .time-label { color: rgba(63,231,255,0.72); letter-spacing: 0.22em; font-size: 12px !important; }

        .card { background: rgba(2,4,8,0.85); border: 1px solid rgba(63,231,255,0.14); box-shadow: 0 0 40px rgba(63,231,255,0.06), inset 0 0 30px rgba(0,0,0,0.4), var(--glass-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(1.5); border-radius: var(--radius-l); }
        .card-title { color: rgba(63,231,255,0.75); letter-spacing: 0.28em; font-size: 12px !important; text-transform: uppercase; text-shadow: none; }
        .card-title::before { content:'// '; color: rgba(190,150,255,0.81); }
        .card-line { background: linear-gradient(90deg, rgba(63,231,255,0.35), rgba(160,80,255,0.2), transparent); height: 1px; }

        .tab-content { padding-bottom: 10px; }

        .time-drop { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); box-shadow: var(--glass-shadow); }
        .time-caret { border: 1px solid rgba(255,255,255,0.59); background: rgba(0,0,0,0.16); color: rgba(255,255,255,0.68); border-radius: var(--radius-s); }
        details[open].time-drop .time-caret { border-color: rgba(63,231,255,0.72); background: rgba(63,231,255,0.06); color: rgba(63,231,255,0.92); }

        .quest-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); box-shadow: var(--glass-shadow); }
        .quest-item.pending::before { background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.16) 40%, transparent 85%); opacity: 0.25; }
        .quest-item.done { background: rgba(46,204,113,0.08); border-color: rgba(63,231,255,0.15); box-shadow: 0 0 22px rgba(63,231,255,0.06), var(--glass-shadow); }
        .quest-item.done .quest-check { border-color: rgba(63,231,255,0.92); color: rgba(63,231,255,0.92); background: rgba(63,231,255,0.06); }
        .quest-item.failed { background: rgba(231,76,60,0.08); border-color: rgba(255,59,92,0.15); box-shadow: var(--glass-shadow); opacity: 0.9; }
        .quest-collapse-btn { border: 1px solid rgba(255,255,255,0.59); background: rgba(0,0,0,0.16); color: rgba(255,255,255,0.68); border-radius: var(--radius-s); }
        .quest-item.expanded .quest-collapse-btn { background: rgba(255,255,255,0.59); color: rgba(255,255,255,0.92); }
        .quest-check { border-color: rgba(255,255,255,0.12); background: rgba(0,0,0,0.18); }

        .quest-box { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); box-shadow: none; border-radius: var(--radius-m); }
        .quest-k { font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; color: rgba(255,255,255,0.59); letter-spacing: 0.18em; }
        .quest-v { color: rgba(255,255,255,0.86); }

        .day-summary { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--glass-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); }
        .summary-xp { font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; color: rgba(255,255,255,0.92); }
        .streak-num { font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; color: rgba(255,255,255,0.92); }

        .reset-btn { background: rgba(255,255,255,0.59); border: 1px solid rgba(255,255,255,0.59); color: rgba(255,255,255,0.78); box-shadow: none; border-radius: var(--radius-m); font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; }
        .onboard-btn { background: var(--accent-blue); border: none; color: #0e1219; font-weight: 700; box-shadow: 0 0 24px rgba(63,231,255,0.72); border-radius: var(--radius-m); font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; }
        .param-save-btn { background: var(--accent-blue); border: none; color: #0e1219; font-weight: 700; box-shadow: 0 0 24px rgba(63,231,255,0.72); border-radius: var(--radius-m); font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; }

        .param-input, .onboard-input { background: rgba(255,255,255,0.59); border: 1px solid rgba(255,255,255,0.59); color: rgba(255,255,255,0.90); box-shadow: none; }
        .param-input:focus, .onboard-input:focus { outline: none; border-color: rgba(63,231,255,0.35); }

        #notif { background: rgba(10,12,18,0.92); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--glass-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); }
        .notif-title { font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; color: rgba(255,255,255,0.86); letter-spacing: 0.20em; }
        .notif-sub { color: rgba(255,255,255,0.70); }

        .overlay { background: rgba(0,0,0,0.62); backdrop-filter: blur(6px) saturate(1.1); }
        .skills-trigger { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.59); color: rgba(255,255,255,0.78); box-shadow: none; font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; }
        .skills-trigger:active { background: rgba(255,255,255,0.09); }

        .sys-pop-overlay { background: rgba(0,0,0,0.62); backdrop-filter: blur(6px) saturate(1.1); }
        .sys-pop { background: rgba(10,12,18,0.92); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--glass-shadow); }
        .sys-pop-title { font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; color: rgba(255,255,255,0.82); }
        .sys-pop-head { border-bottom-color: rgba(255,255,255,0.08); }
        .sys-pop-close { background: rgba(255,255,255,0.59); border: 1px solid rgba(255,255,255,0.59); color: rgba(255,255,255,0.74); box-shadow: none; border-radius: var(--radius-m); }

        @media (max-width: 640px){
          /* Scroll performance: disable backdrop-filter blur on content elements */
          :root { --glass-blur: 0px; }
          .card, .profile-panel, #rank-prog, #next-unlock, .day-summary, .onboard-input { backdrop-filter: none; -webkit-backdrop-filter: none; }
          /* Layout containment: isolate reflows to individual elements */
          .card, .quest-item { contain: layout; }

          html, body { height: 100%; overflow: hidden; }
          .shell { display: block; padding: 0 16px calc(72px + env(safe-area-inset-bottom, 0px) + var(--preview-safe-bottom, 0px)); height: 100vh; height: 100dvh; min-height: unset; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: none; overscroll-behavior-y: contain; }
          .side-nav { display: none; }
          .main-area { display: block; padding-bottom: 24px; }
          #tab-home,
          #tab-profil,
          #tab-quetes { padding-top: 0; }
          .mini-header { position: sticky; top: 0; z-index: 110; margin-bottom: 16px; padding-top: max(12px, env(safe-area-inset-top, 12px), var(--preview-safe-top, 0px)); }
          .profile-panel { position: sticky; top: 0; z-index: 110; padding-top: max(12px, env(safe-area-inset-top, 12px), var(--preview-safe-top, 0px)); }
          @supports not (position: sticky) {
            .mini-header { position: relative; top: auto; }
            .profile-panel { position: relative; top: auto; }
          }
          .header-name { font-size: 20px; }
          .header-sub { font-size: 12px; }
          .xp-ring { width: min(360px, 82vw); height: min(360px, 82vw); }
          .xp-ring svg { width: 100%; height: 100%; }
          .xp-ring-center .ring-level { font-size: 32px; }
          .xp-ring-center .ring-xp { font-size: 11px; }
          .quick-actions { top: 14px; right: 14px; }
          .photo-proof-grid { grid-template-columns: 1fr; }
        }

/* === BOTTOM NAV MOBILE === */
#mobile-bottom-nav {
  display: none;
}
@media (max-width: 640px) {
  #mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(4,7,9,0.96);
    border-top: 1px solid rgba(63,231,255,0.1);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--preview-safe-bottom, 0px));
    gap: 0;
  }
  .mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    min-height: 56px;
    border: none;
    background: transparent;
    color: rgba(63,231,255,0.72);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color 0.18s ease;
    position: relative;
  }
  .mob-nav-item svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
  .mob-nav-item span {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
  }
  .mob-nav-item.active,
  .mob-nav-item.is-active {
    color: rgba(63,231,255,0.95);
  }
  .mob-nav-item.nav-hub.is-active,
  .mob-nav-item.nav-hub.active {
    color:rgba(63,231,255,0.95);
  }
  .mob-nav-item.nav-hub.active::after,
  .mob-nav-item.nav-hub.is-active::after {
    display:none;
  }
  .mob-nav-item.active::after,
  .mob-nav-item.is-active::after {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: rgba(63,231,255,0.8);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0 8px rgba(63,231,255,0.5);
  }
  .mob-nav-item.locked {
    opacity: 0.25;
    pointer-events: none;
  }
  .mob-nav-item:active { color: rgba(63,231,255,0.72); }
  .social-badge { position:absolute; top:7px; right:calc(50% - 14px); background:rgba(255,59,92,0.9); color:#fff; font-family:'Share Tech Mono',monospace; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; line-height:1; pointer-events:none; }
}

/* === ALIEN / SCANLINES === */
/* (scanline-overlay, scanline-sweep, sweep keyframes retir?s avec l'ancien splash) */

/* Subtle whole-screen flicker */
@keyframes screenFlicker {
  0%,97%,100% { opacity: 1; }
  97.5%       { opacity: 0.94; }
  98%         { opacity: 1; }
  98.8%       { opacity: 0.97; }
}
body { animation: screenFlicker 9s linear infinite; }

/* Nebula removed */

/* Circuit grid retir? avec l'ancien splash */

/* Alien label style */
.alien-label {
  font-size: 11px;
  color: rgba(180,130,255,0.79);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-family: 'Share Tech Mono', monospace !important;
  display: block;
  margin-bottom: 2px;
}

/* Glitch keyframe */
@keyframes glitch {
  0%,92%,100% { clip-path: none; transform: none; filter: none; }
  93%  { clip-path: inset(20% 0 60% 0); transform: translateX(-4px); filter: hue-rotate(20deg); }
  94%  { clip-path: inset(60% 0 10% 0); transform: translateX(4px);  filter: hue-rotate(-15deg); }
  95%  { clip-path: inset(40% 0 40% 0); transform: translateX(-2px); }
  95.5%{ clip-path: none; transform: translateX(0); }
}
.home-greeting { animation: glitch 10s ease-in-out infinite; }
/* Big-text glitch ? timings premiers pour ne jamais se synchroniser */
.time-label              { animation: glitch 13s ease-in-out infinite; }
.ring-level              { animation: glitch 19s ease-in-out infinite; }
.bilan-title             { animation: glitch 23s ease-in-out infinite; }
.home-card-hero-title    { animation: glitch 7s  ease-in-out infinite; }
.ring-rank               { animation: glitch 29s ease-in-out infinite; }

/* Alien prefix on home-pseudo */
.home-pseudo::before { content: '? '; color: rgba(180,130,255,0.79); font-size: 12px; }

/* #alien-particles retir? avec l'ancien splash */

/* Global ? Share Tech Mono comme base (m?me landing) */
body { font-family: 'Share Tech Mono', monospace; }
/* Orbitron ? gros titres impactants */
.home-greeting, .header-name, .side-brand {
  font-family: 'Orbitron', monospace !important;
  font-weight: 900 !important;
}
.ring-level, .ring-rank,
.home-card-hero-num, .home-card-med-num,
.stat-value, .bilan-stat-val, .summary-xp {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
}
/* Labels syst?me ? Share Tech Mono */
.quest-k, .bilan-title, .card-title, .system-label {
  font-family: 'Share Tech Mono', monospace !important;
}

/* No glow pulse ? alien but clean */
.card { box-shadow: none !important; animation: none !important; }
.home-card-hero { box-shadow: none !important; }

/* Alien cursor blink on inputs */
.param-input, .onboard-input {
  caret-color: rgba(63,231,255,0.9) !important;
}

/* No lens-flare glows on numbers */
.home-card-hero-num { text-shadow: none !important; }
.home-card-med-num  { text-shadow: none !important; }
.summary-xp         { text-shadow: none !important; }
.ring-level         { text-shadow: none !important; }

/* Orbit dot ? no outer glow */
.orbit-dot { box-shadow: none !important; animation: orbit-anim var(--orbit-dur, 3.8s) linear infinite !important; }
.orbit-dot.red { box-shadow: none !important; }

/* Horizontal data line flicker on section titles */
@keyframes lineFlicker {
  0%,96%,100% { opacity: 1; }
  97% { opacity: 0.4; }
  98% { opacity: 1; }
}
.card-line { animation: lineFlicker 7s linear infinite; }

/* Accent corners glow pulse */
@keyframes cornerGlow {
  0%,100% { border-color: rgba(63,231,255,0.8); box-shadow: -1px -1px 8px rgba(63,231,255,0.2); }
  50%     { border-color: rgba(63,231,255,1);   box-shadow: -2px -2px 14px rgba(63,231,255,0.45); }
}
.card::before { animation: cornerGlow 4s ease-in-out infinite; border-color: rgba(63,231,255,0.8) !important; }
.card::after  { animation: cornerGlow 4s ease-in-out infinite 2s; border-color: rgba(63,231,255,0.8) !important; }

/* === ORBIT DOT === */
.orbit-dot, .orbit-dot-trail {
  position: absolute;
  border-radius: 50%;
  offset-path: inset(0 round var(--radius-l));
  offset-distance: 0%;
  z-index: 10;
  pointer-events: none;
}
.orbit-dot {
  width: 7px; height: 7px;
  background: var(--accent-blue);
  box-shadow: 0 0 8px 3px rgba(63,231,255,0.95), 0 0 22px 8px rgba(63,231,255,0.35);
  animation: orbit-anim var(--orbit-dur, 3.8s) linear infinite;
}
.orbit-dot-trail {
  width: 4px; height: 4px;
  background: rgba(63,231,255,0.45);
  box-shadow: 0 0 5px 2px rgba(63,231,255,0.35);
  animation: orbit-anim var(--orbit-dur, 3.8s) linear infinite;
  animation-delay: -0.2s;
  z-index: 9;
}
/* Red variant ? profil */
.orbit-dot.red {
  background: var(--danger);
  box-shadow: 0 0 8px 3px rgba(255,59,92,0.95), 0 0 22px 8px rgba(255,59,92,0.35);
}
.orbit-dot-trail.red {
  background: rgba(255,59,92,0.45);
  box-shadow: 0 0 5px 2px rgba(255,59,92,0.35);
}
@keyframes orbit-anim {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
/* Home profil medium card ? red border, tracker style */
.home-card-med.profil-card { border-color: rgba(255,59,92,0.3); }
.home-card-med.profil-card:active { background: rgba(255,59,92,0.06); }

/* === ACCORDION PARAMS V2 === */
.p-acc-item { border-bottom: 1px solid rgba(255,255,255,0.06); }
.p-acc-item:last-child { border-bottom: none; }
.p-acc-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.p-acc-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.p-acc-title { font-family:'Orbitron',sans-serif; font-size:10px; color:rgba(63,231,255,0.75); text-transform:uppercase; letter-spacing:0.2em; }
.p-acc-sub { font-size:11px; color:rgba(255,255,255,0.42); letter-spacing:0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.p-acc-chev { font-size:18px; color:rgba(255,255,255,0.59); transition:transform 0.22s ease; line-height:1; flex-shrink:0; }
.p-acc-chev.open { transform:rotate(90deg); color:rgba(63,231,255,0.72); }
.p-acc-body { padding-bottom:18px; animation:slideDown 0.22s ease; }
@keyframes slideDown {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

/* === PARAM SUBSECTIONS === */
.param-subsection { margin-bottom:22px; }
.param-subsection:last-child { margin-bottom:0; }
.param-subtitle { font-family:'Orbitron',sans-serif; font-size:9px; color:rgba(180,130,255,0.72); text-transform:uppercase; letter-spacing:0.24em; margin:0 0 10px 0; padding-bottom:6px; border-bottom:1px dashed rgba(180,130,255,0.18); }

/* === PARAM FIELDS === */
.param-field { margin-bottom:12px; }
.param-field:last-child { margin-bottom:0; }
.param-label { display:block; font-size:11px; color:rgba(255,255,255,0.62); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px; font-family:monospace; }
.param-row-2col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.param-static { display:block; padding:9px 12px; background:rgba(63,231,255,0.04); border:1px solid rgba(63,231,255,0.12); border-radius:4px; color:rgba(255,255,255,0.82); font-family:monospace; font-size:13px; letter-spacing:0.04em; }
.param-hint { display:block; margin-top:6px; font-size:10px; color:rgba(255,255,255,0.38); letter-spacing:0.04em; font-style:italic; }
.param-help { display:block; margin-top:4px; font-size:10px; color:rgba(63,231,255,0.55); letter-spacing:0.04em; }

/* === SEGMENTED CONTROL (sexe, mode, privacy) === */
.param-segmented { display:flex; gap:4px; background:rgba(5,8,14,0.6); border:1px solid rgba(63,231,255,0.12); border-radius:6px; padding:3px; }
.seg-btn { flex:1; padding:9px 8px; background:transparent; border:none; color:rgba(255,255,255,0.48); font-family:'Orbitron',sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:0.14em; cursor:pointer; border-radius:4px; transition:all 0.18s ease; -webkit-tap-highlight-color:transparent; }
.seg-btn:active { transform:scale(0.97); }
.seg-btn.active { background:rgba(63,231,255,0.14); color:rgba(63,231,255,0.95); box-shadow:0 0 8px rgba(63,231,255,0.22), inset 0 0 0 1px rgba(63,231,255,0.38); }

/* === RANGE (volume sound) === */
.param-range-wrap { display:flex; align-items:center; gap:10px; }
.param-range-wrap input[type=range] { flex:1; -webkit-appearance:none; appearance:none; height:4px; background:rgba(63,231,255,0.12); border-radius:2px; outline:none; }
.param-range-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; background:rgba(63,231,255,0.95); border-radius:50%; cursor:pointer; box-shadow:0 0 10px rgba(63,231,255,0.6); }
.param-range-wrap input[type=range]::-moz-range-thumb { width:16px; height:16px; background:rgba(63,231,255,0.95); border-radius:50%; cursor:pointer; border:none; box-shadow:0 0 10px rgba(63,231,255,0.6); }
.range-value { min-width:42px; text-align:right; font-family:monospace; font-size:12px; color:rgba(63,231,255,0.85); letter-spacing:0.04em; }

/* === NOTIFICATIONS ? master toggle + grid === */
.notif-master-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:rgba(63,231,255,0.04); border:1px solid rgba(63,231,255,0.14); border-radius:6px; margin-bottom:14px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.nmt-label { font-family:'Orbitron',sans-serif; font-size:11px; color:rgba(63,231,255,0.88); text-transform:uppercase; letter-spacing:0.14em; }
.notif-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.notif-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; background:rgba(5,8,14,0.5); border:1px solid rgba(255,255,255,0.06); border-radius:5px; transition:opacity 0.2s ease; }
.notif-item.disabled { opacity:0.38; pointer-events:none; }
.ni-icon { font-size:16px; flex-shrink:0; width:22px; text-align:center; }
.ni-text { flex:1; min-width:0; }
.ni-text > div:first-child { font-size:12px; color:rgba(255,255,255,0.82); letter-spacing:0.02em; margin-bottom:2px; }
.ni-text > div:last-child { font-size:10px; color:rgba(255,255,255,0.42); letter-spacing:0.02em; }

/* === PARAM TOGGLE ROW (haptic, sound, privacy) === */
.param-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:rgba(5,8,14,0.5); border:1px solid rgba(255,255,255,0.06); border-radius:5px; }
.ptr-label { flex:1; font-size:12px; color:rgba(255,255,255,0.82); letter-spacing:0.02em; }

/* === TOGGLE SWITCH === */
.toggle-switch { position:relative; display:inline-block; width:42px; height:22px; flex-shrink:0; cursor:pointer; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider { position:absolute; inset:0; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); border-radius:22px; transition:all 0.22s ease; cursor:pointer; }
.toggle-slider::before { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:rgba(255,255,255,0.42); border-radius:50%; transition:all 0.22s ease; }
.toggle-switch input:checked + .toggle-slider { background:rgba(63,231,255,0.18); border-color:rgba(63,231,255,0.6); box-shadow:0 0 10px rgba(63,231,255,0.22); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(20px); background:rgba(63,231,255,0.95); box-shadow:0 0 8px rgba(63,231,255,0.6); }

/* === PARAM BUTTONS === */
.param-save-btn { width:100%; padding:12px; margin-top:12px; background:linear-gradient(90deg, rgba(63,231,255,0.14), rgba(130,60,255,0.14)); border:1px solid rgba(63,231,255,0.38); color:rgba(63,231,255,0.95); font-family:'Orbitron',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.18em; border-radius:4px; cursor:pointer; transition:all 0.2s ease; }
.param-save-btn:active { transform:scale(0.99); }
.param-save-btn:hover { background:linear-gradient(90deg, rgba(63,231,255,0.22), rgba(130,60,255,0.22)); box-shadow:0 0 14px rgba(63,231,255,0.25); }
.param-status { display:block; margin-top:8px; font-size:10px; text-align:center; color:rgba(0,255,136,0.72); letter-spacing:0.06em; min-height:12px; font-family:monospace; }
.param-btn-secondary { width:100%; padding:10px; background:rgba(63,231,255,0.04); border:1px solid rgba(63,231,255,0.22); color:rgba(63,231,255,0.82); font-family:monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.12em; border-radius:4px; cursor:pointer; transition:all 0.18s ease; }
.param-btn-secondary:hover { background:rgba(63,231,255,0.08); border-color:rgba(63,231,255,0.42); color:rgba(63,231,255,0.95); }
.param-btn-secondary:active { transform:scale(0.99); }
.param-file-btn { display:block; text-align:center; }
.param-file-btn input[type=file] { display:none; }
.param-btn-text { background:none; border:none; color:rgba(180,130,255,0.72); font-size:11px; letter-spacing:0.04em; text-decoration:underline; cursor:pointer; padding:6px 0; font-family:monospace; }
.param-btn-text:hover { color:rgba(180,130,255,0.95); }
.param-btn-danger { width:100%; padding:10px; background:rgba(255,59,92,0.04); border:1px solid rgba(255,59,92,0.32); color:rgba(255,107,138,0.82); font-family:monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.12em; border-radius:4px; cursor:pointer; transition:all 0.18s ease; }
.param-btn-danger:hover { background:rgba(255,59,92,0.1); border-color:rgba(255,59,92,0.6); color:rgba(255,107,138,0.98); }
.param-btn-danger:active { transform:scale(0.99); }

/* === PARAM SELECT (theme) === */
.param-select { width:100%; padding:10px 12px; background:rgba(5,8,14,0.6); border:1px solid rgba(63,231,255,0.14); color:rgba(255,255,255,0.9); font-family:monospace; font-size:12px; letter-spacing:0.04em; border-radius:4px; outline:none; cursor:pointer; -webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg, transparent 50%, rgba(63,231,255,0.6) 50%), linear-gradient(135deg, rgba(63,231,255,0.6) 50%, transparent 50%); background-position:calc(100% - 16px) 50%, calc(100% - 12px) 50%; background-size:4px 4px, 4px 4px; background-repeat:no-repeat; padding-right:34px; }
.param-select:focus { border-color:rgba(63,231,255,0.6); box-shadow:0 0 10px rgba(63,231,255,0.2); }

/* === ALIEN GLOBAL ? stat bars === */
.stat-bar { background: rgba(63,231,255,0.05); border-radius: 1px; }
.stat-fill { background: linear-gradient(90deg, rgba(130,60,255,0.85), rgba(63,231,255,0.95)); box-shadow: none; border-radius: 1px; }
.stat-card { background: rgba(5,8,14,0.75); border: 1px solid rgba(63,231,255,0.1); border-radius: var(--radius-m); position: relative; }
.stat-card::before { content:''; position:absolute; top:0; left:0; width:10px; height:10px; border-top:1px solid rgba(63,231,255,0.45); border-left:1px solid rgba(63,231,255,0.45); border-radius:2px 0 0 0; pointer-events:none; }
.stat-card::after  { content:''; position:absolute; bottom:0; right:0; width:10px; height:10px; border-bottom:1px solid rgba(63,231,255,0.45); border-right:1px solid rgba(63,231,255,0.45); border-radius:0 0 2px 0; pointer-events:none; }
.stat-name { color: rgba(63,231,255,0.72); letter-spacing: 0.18em; font-size: 11px; }
.stat-value { color: rgba(255,255,255,0.95); text-shadow: 0 0 14px rgba(63,231,255,0.72); }
.stat-inc { border: 1px solid rgba(63,231,255,0.72) !important; background: rgba(63,231,255,0.06) !important; color: rgba(63,231,255,0.9) !important; border-radius: 6px !important; }
.stat-inc:not(:disabled):active { background: rgba(63,231,255,0.14) !important; }

/* === ALIEN GLOBAL ? quest items === */
.quest-item { background: rgba(5,8,14,0.6); border: 1px solid rgba(63,231,255,0.08); }
.quest-item.done { border-color: rgba(0,255,136,0.6) !important; box-shadow: 0 0 0 1px rgba(0,255,136,0.2), 0 0 20px rgba(0,255,136,0.12) !important; }
.quest-check { border-color: rgba(63,231,255,0.22) !important; background: rgba(63,231,255,0.04) !important; }
.quest-item.done .quest-check { border-color: rgba(0,255,136,0.8) !important; color: rgba(0,255,136,0.95) !important; background: rgba(0,255,136,0.08) !important; box-shadow: 0 0 10px rgba(0,255,136,0.25) !important; }
.quest-item.pending .quest-check { border-color: rgba(63,231,255,0.3) !important; }
.quest-name { color: rgba(255,255,255,0.92); letter-spacing: 0.01em; }
.quest-item.done .quest-name { opacity: 0.5; }
.quest-xp-pill { border-color: rgba(63,231,255,0.72) !important; background: rgba(63,231,255,0.05) !important; color: rgba(63,231,255,0.95) !important; text-shadow: 0 0 8px rgba(63,231,255,0.72); }
.quest-item.done .quest-xp-pill { color: rgba(0,255,136,0.9) !important; border-color: rgba(0,255,136,0.68) !important; }
.quest-item.failed .quest-xp-pill { color: rgba(255,107,138,0.72) !important; border-color: rgba(255,107,138,0.72) !important; }
.quest-meta { color: rgba(180,130,255,0.79); letter-spacing: 0.08em; }
.quest-stat { color: rgba(63,231,255,0.72); }
.quest-penalty { color: rgba(255,107,138,0.72); }
.quest-tasks-inline .task-row { color: rgba(255,255,255,0.59); }
.task-bullet { color: rgba(63,231,255,0.72); }
.quest-box { background: rgba(5,8,14,0.5); border: 1px solid rgba(63,231,255,0.07); }
.quest-k { color: rgba(63,231,255,0.72); letter-spacing: 0.18em; }
.quest-v { color: rgba(255,255,255,0.78); }
.quest-collapse-btn { border-color: rgba(63,231,255,0.72) !important; background: rgba(63,231,255,0.03) !important; color: rgba(63,231,255,0.72) !important; }
.quest-item.expanded .quest-collapse-btn { border-color: rgba(63,231,255,0.72) !important; color: rgba(63,231,255,0.95) !important; background: rgba(63,231,255,0.72) !important; }
.fail-btn { border-color: rgba(255,107,138,0.72) !important; color: rgba(255,107,138,0.72) !important; }

/* === ALIEN GLOBAL ? bilan === */
.bilan-title { color: rgba(63,231,255,0.72); letter-spacing: 0.2em; font-size: 12px; border-bottom-color: rgba(63,231,255,0.72); font-family: monospace; }
.bilan-title::before { content: '// '; color: rgba(180,130,255,0.79); }
.bilan-stat { background: rgba(5,8,14,0.7); border: 1px solid rgba(63,231,255,0.1); }
.bilan-stat-val { color: rgba(255,255,255,0.95); text-shadow: 0 0 14px rgba(63,231,255,0.72); }
.bilan-stat-label { color: rgba(63,231,255,0.72); letter-spacing: 0.14em; }
.bilan-chip { border-color: rgba(63,231,255,0.72) !important; background: rgba(5,8,14,0.5) !important; color: rgba(63,231,255,0.72) !important; letter-spacing: 0.16em; border-radius: 3px !important; }
.bilan-chip.active { border-color: rgba(63,231,255,0.72) !important; background: rgba(63,231,255,0.72) !important; color: rgba(63,231,255,0.95) !important; box-shadow: 0 0 10px rgba(63,231,255,0.72) !important; }
.bilan-chart-wrap { background: rgba(5,8,14,0.5); border-color: rgba(63,231,255,0.08); }
.bilan-bar { border-color: rgba(63,231,255,0.07) !important; background: rgba(63,231,255,0.02) !important; }
.bilan-bar.sel { border-color: rgba(63,231,255,0.45) !important; background: rgba(63,231,255,0.06) !important; }
.bilan-bar-fill { background: linear-gradient(180deg, rgba(63,231,255,0.95), rgba(130,60,255,0.9)); box-shadow: 0 0 12px rgba(63,231,255,0.2); }
.bilan-day-card, .bilan-void-card { background: rgba(5,8,14,0.6); border-color: rgba(63,231,255,0.08); }
.bilan-day-date { color: rgba(255,255,255,0.92); }
.bilan-day-meta, .bilan-void-msg { color: rgba(180,130,255,0.79); letter-spacing: 0.1em; }
.bilan-void-tag { color: rgba(63,231,255,0.85); letter-spacing: 0.2em; }
.bilan-daycell { background: rgba(63,231,255,0.06); }
.bilan-daycell.on { background: rgba(63,231,255,0.7); box-shadow: 0 0 8px rgba(63,231,255,0.35); }
.bilan-daycell.on.partial { background: rgba(63,231,255,0.28); }
.bilan-daycell.sel { outline-color: rgba(63,231,255,0.9); }
.bilan-hour { border-color: rgba(63,231,255,0.07) !important; background: rgba(63,231,255,0.02) !important; }
.bilan-hour-fill { background: rgba(63,231,255,0.8); box-shadow: 0 0 8px rgba(63,231,255,0.2); }
.bilan-stat2 { background: rgba(5,8,14,0.7); border-color: rgba(63,231,255,0.1); }
.bilan-stat2-val { color: rgba(255,255,255,0.95); text-shadow: 0 0 14px rgba(63,231,255,0.72); }
.bilan-stat2-label { color: rgba(63,231,255,0.72); }
.bilan-history-header:hover { background: rgba(63,231,255,0.03) !important; }
.bilan-history-item { border-color: rgba(63,231,255,0.08) !important; background: rgba(5,8,14,0.5) !important; }
.bilan-hist-card { background: rgba(5,8,14,0.7) !important; border-color: rgba(63,231,255,0.1) !important; }
.bilan-hist-date { color: rgba(255,255,255,0.92); }
.bilan-hist-quests { color: rgba(63,231,255,0.72); }
.bilan-hist-xp { color: rgba(63,231,255,0.9); }

/* === ALIEN GLOBAL ? buttons === */
.onboard-btn { background: linear-gradient(135deg, rgba(63,231,255,0.92), rgba(130,60,255,0.85)) !important; color: #040709 !important; font-family: 'Orbitron', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.2em !important; box-shadow: 0 0 24px rgba(63,231,255,0.72), 0 0 48px rgba(130,60,255,0.1) !important; border-radius: 4px !important; text-transform: uppercase; }
.param-save-btn { background: linear-gradient(135deg, rgba(63,231,255,0.9), rgba(180,130,255,0.79)) !important; color: #040709 !important; font-weight: 800 !important; box-shadow: 0 0 24px rgba(63,231,255,0.72) !important; border-radius: 4px !important; }
.reset-btn { background: rgba(5,8,14,0.6) !important; border: 1px solid rgba(255,107,138,0.72) !important; color: rgba(255,107,138,0.72) !important; letter-spacing: 0.14em; border-radius: 4px !important; }
.inv-btn { background: rgba(63,231,255,0.06) !important; border: 1px solid rgba(63,231,255,0.72) !important; color: rgba(63,231,255,0.85) !important; letter-spacing: 0.14em; border-radius: 4px !important; }
.inv-btn:active { background: rgba(63,231,255,0.12) !important; }
.skills-trigger { background: rgba(5,8,14,0.5) !important; border: 1px solid rgba(63,231,255,0.72) !important; color: rgba(63,231,255,0.72) !important; border-radius: 4px !important; letter-spacing: 0.12em; }
.bilan-section button, .time-caret, .time-drop summary { border-radius: 3px !important; }

/* === ALIEN GLOBAL ? inputs === */
.param-input, .onboard-input {
  background: rgba(5,8,14,0.7) !important;
  border: 1px solid rgba(63,231,255,0.18) !important;
  color: rgba(63,231,255,0.9) !important;
  border-radius: 4px !important;
  font-family: monospace !important;
  letter-spacing: 0.06em;
}
.param-input:focus, .onboard-input:focus {
  border-color: rgba(63,231,255,0.55) !important;
  box-shadow: 0 0 12px rgba(63,231,255,0.12) !important;
}
.param-input::placeholder, .onboard-input::placeholder { color: rgba(63,231,255,0.72) !important; }

/* === DONJON ? dark esoteric theme === */
.dnj-title { font-family:'Orbitron',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(255,140,175,0.85); margin-bottom:8px; }
.dnj-sub { font-size: 12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(190,150,255,0.81); }
.dnj-challenge-card { background:rgba(8,3,18,0.95); border:1px solid rgba(180,30,80,0.2); border-radius:14px; padding:18px 16px; cursor:pointer; transition:border-color 0.2s, box-shadow 0.2s; position:relative; overflow:hidden; }
.dnj-challenge-card:hover { border-color:rgba(220,60,120,0.5); box-shadow:0 0 24px rgba(180,30,80,0.12); }
.dnj-challenge-card::before { content:''; position:absolute; inset:0; border-radius:14px; background:linear-gradient(135deg,rgba(180,30,80,0.04),transparent 60%); pointer-events:none; }
.dnj-challenge-icon { font-size:28px; margin-bottom:10px; }
.dnj-challenge-title { font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:0.16em; color:rgba(255,200,220,0.95); margin-bottom:4px; }
.dnj-challenge-sub { font-size: 11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(210,140,185,0.90); margin-bottom:8px; }
.dnj-challenge-desc { font-size:11px; color:rgba(200,160,220,0.87); line-height:1.5; }
.dnj-hp-wrap { margin:14px 0; }
.dnj-hp-bar { height:10px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; border:1px solid rgba(180,30,80,0.2); position:relative; }
.dnj-hp-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,rgba(130,20,180,0.9),rgba(220,40,100,0.95)); transition:width 0.6s ease; box-shadow:0 0 8px rgba(220,40,100,0.4); }
.dnj-hp-fill.danger { background:linear-gradient(90deg,rgba(180,20,20,0.9),rgba(255,40,40,0.95)); box-shadow:0 0 12px rgba(255,40,40,0.5); }
.dnj-stat-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.dnj-stat-val { font-family:'Share Tech Mono',monospace; font-size:20px; color:rgba(255,140,175,0.85); font-weight:700; }
.dnj-stat-lbl { font-size: 11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(190,150,255,0.81); margin-top:2px; }
.dnj-void-warn { padding:12px 14px; background:rgba(255,30,30,0.06); border:1px solid rgba(255,30,30,0.25); border-radius:10px; margin-bottom:12px; animation:dnj-pulse 2s ease-in-out infinite; }
@keyframes dnj-pulse { 0%,100%{border-color:rgba(255,30,30,0.25);} 50%{border-color:rgba(255,30,30,0.55);box-shadow:0 0 16px rgba(255,30,30,0.12);} }
.dnj-action-btn { width:100%; padding:14px; background:linear-gradient(135deg,rgba(130,20,180,0.25),rgba(220,40,100,0.2)); border:1px solid rgba(180,30,80,0.4); border-radius:10px; color:rgba(255,180,210,0.95); font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; transition:all 0.2s; margin-top:10px; }
.dnj-action-btn:hover { background:linear-gradient(135deg,rgba(130,20,180,0.4),rgba(220,40,100,0.35)); box-shadow:0 0 20px rgba(180,30,80,0.2); }
.dnj-action-btn:disabled { opacity:0.4; cursor:not-allowed; }
.dnj-start-btn { width:100%; padding:12px; background:rgba(180,30,80,0.12); border:1px solid rgba(180,30,80,0.35); border-radius:10px; color:rgba(255,150,180,0.9); font-family:'Share Tech Mono',monospace; font-size: 12px; letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; transition:all 0.2s; margin-top:12px; }
.dnj-start-btn:hover { background:rgba(180,30,80,0.22); box-shadow:0 0 16px rgba(180,30,80,0.15); }
.dnj-days-row { display:flex; gap:3px; flex-wrap:wrap; margin:10px 0; }
.dnj-day-dot { width:8px; height:8px; border-radius:2px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); }
.dnj-day-dot.done { background:rgba(220,40,100,0.7); border-color:rgba(220,40,100,0.4); }
.dnj-day-dot.today { background:rgba(255,200,0,0.7); border-color:rgba(255,200,0,0.5); }

/* === ALIEN GLOBAL ? notifications + popups === */
#notif { background: rgba(4,7,9,0.96) !important; border: 1px solid rgba(63,231,255,0.18) !important; box-shadow: 0 0 32px rgba(63,231,255,0.1), var(--glass-shadow) !important; }
.notif-title { color: rgba(63,231,255,0.9) !important; letter-spacing: 0.2em !important; }
.notif-sub { color: rgba(180,130,255,0.79) !important; }
.sys-pop { background: rgba(4,7,9,0.96) !important; border: 1px solid rgba(63,231,255,0.15) !important; box-shadow: 0 0 32px rgba(63,231,255,0.08) !important; }
.sys-pop-title { color: rgba(63,231,255,0.85) !important; letter-spacing: 0.18em !important; }
.sys-pop-head { border-bottom-color: rgba(63,231,255,0.1) !important; }
.sys-pop-close { background: rgba(5,8,14,0.6) !important; border-color: rgba(255,107,138,0.72) !important; color: rgba(255,107,138,0.72) !important; }

/* === ALIEN GLOBAL ? mini header === */
.mini-header { background: rgba(4,7,9,0.88) !important; border-bottom: 1px solid rgba(63,231,255,0.08) !important; backdrop-filter: blur(16px) saturate(1.4) !important; }
.header-name { color: rgba(255,255,255,0.95); letter-spacing: -0.02em; }
.header-sub { color: rgba(63,231,255,0.72); letter-spacing: 0.18em; font-size: 11px !important; text-transform: uppercase; }
.back-btn { color: rgba(63,231,255,0.72) !important; border-color: rgba(63,231,255,0.72) !important; background: rgba(63,231,255,0.04) !important; border-radius: 4px !important; }

/* === ALIEN GLOBAL ? side nav (desktop) === */
.side-nav { background: rgba(4,7,9,0.85) !important; border: 1px solid rgba(63,231,255,0.1) !important; }
.side-brand { color: rgba(63,231,255,0.72) !important; letter-spacing: 0.3em !important; font-family: monospace !important; text-shadow: 0 0 12px rgba(63,231,255,0.72) !important; background: rgba(63,231,255,0.04) !important; border: 1px solid rgba(63,231,255,0.72) !important; }
.side-item { color: rgba(63,231,255,0.72) !important; border-radius: 4px !important; }
.side-item.active { color: rgba(63,231,255,0.95) !important; background: rgba(63,231,255,0.72) !important; box-shadow: 0 0 14px rgba(63,231,255,0.72) !important; }
.side-item:not(.locked):hover { color: rgba(63,231,255,0.72) !important; background: rgba(63,231,255,0.04) !important; }
.side-item.locked { color: rgba(63,231,255,0.72) !important; }
.side-item.nav-hidden,
.mob-nav-item.nav-hidden {
  display: none !important;
}

.side-item.nav-reveal,
.mob-nav-item.nav-reveal {
  animation: navAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes navAppear {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.side-item.locked::after,
.mob-nav-item.locked::after {
  content: attr(data-unlock);
  position: absolute;
  top: 2px;
  right: 2px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 7px;
  color: rgba(63,231,255,0.72);
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* === ALIEN GLOBAL ? XP bar === */
.xp-bar-bg { background: rgba(63,231,255,0.05) !important; border-radius: 1px !important; }
.xp-bar-fill { background: linear-gradient(90deg, rgba(130,60,255,0.9), rgba(63,231,255,1)) !important; box-shadow: none !important; border-radius: 1px !important; }

/* === ALIEN GLOBAL ? day summary + meta-pill === */
.day-summary { background: rgba(5,8,14,0.75) !important; border: 1px solid rgba(63,231,255,0.1) !important; box-shadow: 0 0 40px rgba(63,231,255,0.06), var(--glass-shadow) !important; }
.summary-xp { color: rgba(255,255,255,0.97) !important; text-shadow: 0 0 30px rgba(63,231,255,0.72) !important; }
.streak-num { color: rgba(63,231,255,0.9) !important; text-shadow: 0 0 20px rgba(63,231,255,0.72) !important; }
.meta-pill { background: rgba(63,231,255,0.05) !important; border: 1px solid rgba(63,231,255,0.72) !important; color: rgba(63,231,255,0.8) !important; border-radius: 4px !important; font-family: monospace !important; letter-spacing: 0.16em !important; }

/* === ALIEN GLOBAL ? profile pill + progress ring === */
.profile-pill { background: rgba(5,8,14,0.7); border: 1px solid rgba(63,231,255,0.12); border-radius: 4px; }
.rank-badge { border-color: rgba(130,60,255,0.35) !important; box-shadow: 0 0 14px rgba(130,60,255,0.2) !important; }
.header-rank { color: rgba(180,130,255,0.79) !important; letter-spacing: 0.2em !important; }

/* === ALIEN GLOBAL ? phase/day badges === */
.phase-badge { border-color: rgba(63,231,255,0.72) !important; color: rgba(63,231,255,0.8) !important; background: rgba(63,231,255,0.04) !important; border-radius: 3px !important; letter-spacing: 0.16em !important; }
.dtb { border-radius: 3px !important; letter-spacing: 0.14em !important; font-size: 11px !important; }
.dtb.training { border-color: rgba(63,231,255,0.72) !important; color: rgba(63,231,255,0.85) !important; background: rgba(63,231,255,0.06) !important; }
.dtb.rest { border-color: rgba(180,130,255,0.79) !important; color: rgba(180,130,255,0.79) !important; background: rgba(130,60,255,0.05) !important; }
.dtb.free { border-color: rgba(255,255,255,0.59) !important; color: rgba(255,255,255,0.6) !important; background: rgba(255,255,255,0.04) !important; }

/* === ALIEN GLOBAL ? side panels === */
.side-panel { background: rgba(4,7,9,0.97) !important; border-left: 1px solid rgba(63,231,255,0.12) !important; }
.panel-header { border-bottom: 1px solid rgba(63,231,255,0.08) !important; }
.panel-close-btn { border-color: rgba(63,231,255,0.72) !important; color: rgba(63,231,255,0.72) !important; background: rgba(63,231,255,0.04) !important; }

/* === ALIEN GLOBAL ? inventory === */
.inv-empty { color: rgba(63,231,255,0.72) !important; letter-spacing: 0.16em !important; font-size: 11px !important; }
.inv-item { background: rgba(5,8,14,0.6) !important; border: 1px solid rgba(63,231,255,0.1) !important; border-radius: var(--radius-m) !important; }
.inv-item-name { color: rgba(255,255,255,0.88) !important; }
.inv-item-desc { color: rgba(63,231,255,0.72) !important; letter-spacing: 0.06em; }
.inv-badge { background: rgba(63,231,255,0.72) !important; color: rgba(63,231,255,0.8) !important; border: 1px solid rgba(63,231,255,0.72) !important; border-radius: 3px !important; }

/* === ALIEN GLOBAL ? skill tree === */
.skill-card { background: rgba(5,8,14,0.7) !important; border: 1px solid rgba(63,231,255,0.1) !important; }
.skill-card.unlocked { border-color: rgba(63,231,255,0.35) !important; box-shadow: 0 0 14px rgba(63,231,255,0.1) !important; }
.skill-name { color: rgba(255,255,255,0.9) !important; }
.skill-desc { color: rgba(63,231,255,0.72) !important; letter-spacing: 0.05em; }
.skill-next { color: rgba(180,130,255,0.79) !important; letter-spacing: 0.12em; font-size: 12px; }

/* === ALIEN GLOBAL ? profile avatar ring === */
.avatar-box { border: 2px solid rgba(255,59,92,0.3) !important; box-shadow: 0 0 20px rgba(255,59,92,0.15) !important; }
.xp-ring-track { stroke: rgba(63,231,255,0.08) !important; }
.xp-ring-fill { stroke: url(#xpGrad) !important; filter: drop-shadow(0 0 6px rgba(63,231,255,0.4)); }
.ring-level { color: rgba(255,255,255,0.95) !important; text-shadow: 0 0 20px rgba(63,231,255,0.72) !important; }
.ring-xp { color: rgba(63,231,255,0.72) !important; letter-spacing: 0.14em !important; }

/* === HOME SCREEN === */
.home-hero { padding: 0 0 10px; }
.home-greeting { font-size: 24px; font-weight: 800; color: rgba(255,255,255,0.95); letter-spacing: 0.02em; line-height: 1.1; text-shadow: 0 0 40px rgba(63,231,255,0.72), 0 0 80px rgba(63,231,255,0.72); }
.home-greeting::after { content: '_'; color: var(--accent-blue); animation: cur 1.1s step-end infinite; margin-left: 2px; }
@keyframes cur { 0%,100%{opacity:1} 50%{opacity:0} }
.home-pseudo { font-size: 10px; color: rgba(255,255,255,0.60); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; }
.home-grid { display: flex; flex-direction: column; gap: 7px; padding-bottom: 4px; }

/* Chrome sticky : bandeau joueur global + mini-header restent visibles au scroll (hors splash / onboarding) */
.sticky-app-chrome {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(4, 7, 9, 0.94);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border-bottom: 1px solid rgba(63, 231, 255, 0.1);
  margin: 0 -16px 0 -16px;
  padding: max(8px, env(safe-area-inset-top, 0px), var(--preview-safe-top, 0px)) 16px 0;
  box-sizing: border-box;
}
.sticky-app-chrome .mini-header {
  position: relative !important;
  top: auto !important;
  z-index: auto;
  margin-bottom: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(63, 231, 255, 0.06);
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sticky-app-chrome .mini-header:not([hidden]) {
  border-bottom: none !important;
}
@media (min-width: 641px) {
  .sticky-app-chrome {
    margin: 0;
    padding: 0;
    border-radius: 0;
  }
}
body.light-mode .sticky-app-chrome {
  background: rgba(253, 254, 255, 0.96);
  border-bottom-color: rgba(0, 153, 204, 0.15);
}
/* Bandeau joueur + mini-header masqu?s (Qu?tes, ?volution, Fragment, Inventaire, Social) : pas de barre vide, garde seulement le safe-area */
.sticky-app-chrome:has(#global-player-bar[hidden]):has(#mini-header[hidden]) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.global-player-bar[hidden] { display: none !important; }
.global-player-bar-welcome:empty { display: none; }
.global-player-welcome-inner {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.22);
  text-align: center;
  letter-spacing: 0.1em;
  padding: 4px 0 2px;
  text-transform: uppercase;
}
body.light-mode .global-player-welcome-inner {
  color: rgba(10, 13, 20, 0.45);
}

/* === SYSTEM FRAME UTILITY (corner brackets) === */
.sys-frame { position: relative; }
.sys-frame::before,.sys-frame::after { content:''; position:absolute; width:16px; height:16px; pointer-events:none; z-index:2; }
.sys-frame::before { top:-1px; left:-1px; border-top:2px solid rgba(63,231,255,0.75); border-left:2px solid rgba(63,231,255,0.75); border-radius:3px 0 0 0; box-shadow: -1px -1px 6px rgba(63,231,255,0.15); }
.sys-frame::after { bottom:-1px; right:-1px; border-bottom:2px solid rgba(63,231,255,0.75); border-right:2px solid rgba(63,231,255,0.75); border-radius:0 0 3px 0; box-shadow: 1px 1px 6px rgba(63,231,255,0.15); }
/* Extra corners via data attribute trick using inner wrappers */
.sys-frame-full { position: relative; }
.sys-frame-full::before,.sys-frame-full::after { content:''; position:absolute; width:16px; height:16px; pointer-events:none; z-index:2; }
.sys-frame-full::before { top:-1px; left:-1px; border-top:2px solid rgba(63,231,255,0.75); border-left:2px solid rgba(63,231,255,0.75); border-radius:3px 0 0 0; box-shadow: -1px -1px 6px rgba(63,231,255,0.15); }
.sys-frame-full::after { bottom:-1px; right:-1px; border-bottom:2px solid rgba(63,231,255,0.75); border-right:2px solid rgba(63,231,255,0.75); border-radius:0 0 3px 0; box-shadow: 1px 1px 6px rgba(63,231,255,0.15); }
.sys-frame-inner { position:absolute; inset:-1px; pointer-events:none; z-index:2; }
.sys-frame-inner::before { content:''; position:absolute; top:0; right:0; width:16px; height:16px; border-top:2px solid rgba(63,231,255,0.45); border-right:2px solid rgba(63,231,255,0.45); border-radius:0 3px 0 0; }
.sys-frame-inner::after { content:''; position:absolute; bottom:0; left:0; width:16px; height:16px; border-bottom:2px solid rgba(63,231,255,0.45); border-left:2px solid rgba(63,231,255,0.45); border-radius:0 0 0 3px; }

/* Hero card */
.home-card-hero { background: rgba(255,255,255,0.05); border-radius: var(--radius-l); padding: 14px 18px; cursor: pointer; transition: transform 0.18s var(--ease-smooth), background 0.18s ease; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; background-image: linear-gradient(rgba(63,231,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(63,231,255,0.03) 1px, transparent 1px); background-size: 24px 24px; border: 1px solid rgba(63,231,255,0.12); }
.home-card-hero::before { content:''; position:absolute; top:0; left:0; width:20px; height:20px; border-top:2px solid rgba(63,231,255,0.85); border-left:2px solid rgba(63,231,255,0.85); border-radius:3px 0 0 0; pointer-events:none; z-index:2; box-shadow:-1px -1px 8px rgba(63,231,255,0.2); }
.home-card-hero::after { content:''; position:absolute; bottom:0; right:0; width:20px; height:20px; border-bottom:2px solid rgba(63,231,255,0.85); border-right:2px solid rgba(63,231,255,0.85); border-radius:0 0 3px 0; pointer-events:none; z-index:2; box-shadow:1px 1px 8px rgba(63,231,255,0.2); }
.home-card-hero:active { transform: scale(0.985); background: rgba(255,255,255,0.08); }
.home-card-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home-card-hero-left { display: flex; flex-direction: column; gap: 6px; }
.home-card-hero-label { font-size: 12px; font-weight: 600; color: rgba(63,231,255,0.72); text-transform: uppercase; letter-spacing: 0.20em; display: flex; align-items: center; gap: 6px; }
.home-card-hero-label::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent-blue); box-shadow:0 0 6px var(--accent-blue); animation: statusPulse 2.2s ease-in-out infinite; flex-shrink:0; }
@keyframes statusPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.8)} }
.home-card-hero-title { font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.88); }
.home-card-hero-right { text-align: right; flex-shrink: 0; }
.home-card-hero-num { font-size: 52px; font-weight: 800; letter-spacing: -0.04em; color: var(--accent-blue); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 28px rgba(63,231,255,0.72); }
.home-card-hero-unit { font-size: 12px; color: rgba(255,255,255,0.60); margin-top: 4px; letter-spacing: 0.12em; text-transform: uppercase; }
.home-progress { height: 3px; background: rgba(255,255,255,0.06); border-radius: 0; overflow: visible; position: relative; }
.home-progress-fill { height: 100%; background: linear-gradient(90deg, rgba(63,231,255,0.7), var(--accent-blue)); transition: width 0.7s var(--ease-smooth); box-shadow: 0 0 14px rgba(63,231,255,0.7); position: relative; }
.home-progress::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent, transparent calc(25% - 1px), rgba(0,0,0,0.4) calc(25% - 1px), rgba(0,0,0,0.4) 25%); pointer-events:none; }

/* Medium cards row */
.home-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.home-card-med { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: background 0.18s ease; display: flex; flex-direction: column; justify-content: space-between; min-height: 78px; border: 1px solid rgba(63,231,255,0.2); position: relative; overflow: hidden; }
.home-card-med::before { display:none; }
.home-card-med::after { display:none; }
.home-card-med:active { background: rgba(63,231,255,0.06); }
.home-card-med-num { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; color: rgba(255,255,255,0.92); line-height: 1; font-variant-numeric: tabular-nums; }
.home-card-med-label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.60); text-transform: uppercase; letter-spacing: 0.15em; margin-top: 4px; }
.home-card-med-ico { color: rgba(63,231,255,0.72); }
.home-card-med-ico svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Compact list */
.home-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.home-list-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px; background: rgba(255,255,255,0.03); border-radius: var(--radius-m); cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease; border: 1px solid rgba(255,255,255,0.04); border-left: 2px solid rgba(63,231,255,0.25); }
.home-list-item:active { background: rgba(255,255,255,0.07); border-left-color: rgba(63,231,255,0.7); }
.home-list-item.locked { opacity: 0.28; pointer-events: none; }
.home-list-left { display: flex; align-items: center; gap: 13px; }
.home-list-ico { color: rgba(255,255,255,0.59); flex-shrink: 0; }
.home-list-ico svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.home-list-label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.82); }
.home-list-right { display: flex; align-items: center; gap: 8px; }
.home-list-badge { font-size: 11px; color: rgba(255,255,255,0.60); letter-spacing: 0.02em; }
.home-list-arrow { color: rgba(255,255,255,0.59); }
.home-list-arrow svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ?? Spotlight Guide ?? */
#spotlight-overlay { background: rgba(0,0,0,0); animation: spotFadeIn 0.35s ease forwards; }
@keyframes spotFadeIn { to { background: rgba(0,4,8,0.84); } }
#spotlight-hole { box-shadow: 0 0 0 9999px rgba(0,4,8,0.84), 0 0 0 2px rgba(63,231,255,0.5), 0 0 28px rgba(63,231,255,0.25); animation: spotPulse 2.2s ease-in-out infinite; }
@keyframes spotPulse { 0%,100% { box-shadow: 0 0 0 9999px rgba(0,4,8,0.84), 0 0 0 2px rgba(63,231,255,0.45), 0 0 22px rgba(63,231,255,0.2); } 50% { box-shadow: 0 0 0 9999px rgba(0,4,8,0.84), 0 0 0 2px rgba(63,231,255,0.9), 0 0 38px rgba(63,231,255,0.45); } }
#spotlight-tip { animation: spotTipIn 0.4s 0.2s cubic-bezier(.4,0,.2,1) both; }
@keyframes spotTipIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ?? Custom Rituals ?? */
.ritual-add-btn { font-family:'Share Tech Mono',monospace; font-size: 12px; letter-spacing:0.14em; text-transform:uppercase; padding:12px 16px; border-radius:var(--radius-m); border:1px solid rgba(63,231,255,0.72); background:rgba(63,231,255,0.05); color:rgba(63,231,255,0.85); cursor:pointer; transition:0.2s; }
.ritual-add-btn:active { background:rgba(63,231,255,0.12); }
.ritual-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-m); margin-bottom:7px; }
.ritual-toggle { width:30px; height:17px; border-radius:9px; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.3); cursor:pointer; flex-shrink:0; position:relative; transition:0.2s; }
.ritual-toggle.on { background:rgba(63,231,255,0.14); border-color:rgba(63,231,255,0.35); }
.ritual-toggle::after { content:''; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,0.25); transition:0.2s; }
.ritual-toggle.on::after { transform:translateX(13px); background:rgba(63,231,255,0.95); }
.ritual-name { font-size:13px; color:rgba(255,255,255,0.82); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ritual-meta { font-size: 12px; color:var(--text-dim); white-space:nowrap; }
.ritual-action { font-size:13px; color:rgba(255,255,255,0.60); cursor:pointer; padding:10px 12px; flex-shrink:0; }
.ritual-action:active { color:rgba(255,255,255,0.7); }
.ritual-action.del { color:rgba(255,107,138,0.72); }
.ritual-action.del:active { color:rgba(255,107,138,0.72); }
.cq-chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 14px; }
.cq-chip { font-size:11px; padding:5px 12px; border-radius:20px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.59); cursor:pointer; transition:0.15s; letter-spacing:0.06em; user-select:none; -webkit-user-select:none; }
.cq-chip.active { border-color:rgba(63,231,255,0.72); background:rgba(63,231,255,0.72); color:rgba(63,231,255,0.95); }
.cq-field-label { font-size: 12px; text-transform:uppercase; letter-spacing:0.14em; color:var(--text-dim); margin-bottom:6px; }

/* Fix niveau "99" ? chiffres larges et ?quilibr?s */
.ring-level {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em !important;
  min-width: 2.6ch;
  text-align: center;
}
.home-card-med-num, .bilan-stat-val, .bilan-stat2-val {
  font-variant-numeric: tabular-nums;
}



/* === ALIEN ? home list items === */
.home-list-item { background: rgba(5,8,14,0.5) !important; border-color: rgba(255,255,255,0.04) !important; border-left-color: rgba(63,231,255,0.3) !important; }
.home-list-item:active { background: rgba(63,231,255,0.06) !important; border-left-color: rgba(63,231,255,0.75) !important; }
.home-list-label { color: rgba(220,240,255,0.85) !important; }
.home-list-badge { color: rgba(63,231,255,0.72) !important; font-family: monospace !important; }
.home-list-arrow { color: rgba(63,231,255,0.72) !important; }
.home-list-ico { color: rgba(63,231,255,0.72) !important; }
/* === ALIEN ? home hero card (orange) === */
.home-card-hero { background: rgba(255,156,62,0.13) !important; border-color: rgba(255,156,62,0.5) !important; background-image: none !important; box-shadow: 0 0 24px rgba(255,156,62,0.1), inset 0 1px 0 rgba(255,156,62,0.18) !important; }
.home-card-hero::before { display:none !important; }
.home-card-hero::after  { display:none !important; }
.home-card-hero:active  { background: rgba(255,156,62,0.18) !important; }
.home-card-hero-label   { color: rgba(255,156,62,0.85) !important; }
.home-card-hero-label::before { background: rgba(255,156,62,0.9) !important; box-shadow: 0 0 6px rgba(255,156,62,0.6) !important; }
.home-card-hero-num     { color: rgba(255,156,62,0.95) !important; text-shadow: 0 0 20px rgba(255,156,62,0.35) !important; }
.home-progress          { background: rgba(255,156,62,0.07) !important; }
.home-progress-fill     { background: linear-gradient(90deg, rgba(255,156,62,0.5), rgba(255,156,62,0.9)) !important; }

/* === ALIEN ? home tri-cards (3-col grid) === */
.home-tri-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 6px 8px; background:rgba(5,8,14,0.5); border:1px solid rgba(63,231,255,0.2); border-radius:10px; cursor:pointer; touch-action:manipulation; transition:background 0.15s ease; position:relative; }
.home-tri-card:active { background:rgba(63,231,255,0.06); }
.nav-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:#ff8800; box-shadow:0 0 6px rgba(255,136,0,0.7); pointer-events:none; }
.home-tri-card.locked { opacity:0.28; pointer-events:none; }
.home-tri-ico { color:rgba(63,231,255,0.72); display:flex; align-items:center; justify-content:center; }
.home-tri-ico svg { width:24px; height:24px; display:block; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.home-tri-label { font-family:'Orbitron',monospace; font-size:9px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(220,240,255,0.9); text-align:center; }
.home-tri-badge { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:0.1em; color:rgba(63,231,255,0.72); text-align:center; }
/* === ALIEN ? home-card-med tracker style === */
.home-card-med { background: rgba(5,8,14,0.5) !important; border-color: rgba(63,231,255,0.2) !important; }
.home-card-med.profil-card { border-color: rgba(255,59,92,0.3) !important; }
.home-card-med-num { color: rgba(255,255,255,0.92) !important; }
.home-card-med-label { color: rgba(63,231,255,0.72) !important; letter-spacing: 0.18em !important; }
.home-card-med-ico { color: rgba(63,231,255,0.72) !important; }

/* === BACK BUTTON === */
.back-btn { display: none; align-items: center; gap: 8px; color: rgba(255,255,255,0.59); font-size: 13px; font-weight: 500; background: none; border: none; cursor: pointer; padding: 0; letter-spacing: 0.03em; }
.back-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.back-btn.visible { display: flex; }

/* === HOME ? Two action cards (Donjon + Raid) === */
.home-cards-duo { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.home-card-dnj {
  background:rgba(6,1,12,0.97); border:1px solid rgba(180,30,80,0.5); border-radius:var(--radius-l);
  padding:10px 12px; cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 0 22px rgba(180,30,80,0.1), inset 0 1px 0 rgba(180,30,80,0.15);
  animation:dnj-glitch-ambient 5s step-end infinite;
}
.home-card-dnj::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  animation:dnj-ca-layer 5s step-end infinite;
}
.home-card-dnj-label {
  font-family:'Share Tech Mono',monospace; font-size:13px; font-weight:800;
  color:rgba(255,120,160,0.80); letter-spacing:0.18em; position:relative; z-index:1;
  text-shadow:0 0 16px rgba(220,60,100,0.5);
}
.home-card-dnj-sub {
  font-size: 11px; color:rgba(255,255,255,0.59); margin-top:3px; letter-spacing:0.08em;
  position:relative; z-index:1;
}
.home-card-dnj.locked .home-card-dnj-label { color:rgba(255,255,255,0.59); text-shadow:none; }
.home-card-dnj.locked { border-color:rgba(255,255,255,0.06); cursor:pointer; }

/* Evening bilan CTA */
.home-bilan-cta {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,200,60,0.06); border:1px solid rgba(255,200,60,0.3);
  border-radius:var(--radius-l); padding:14px 16px; cursor:pointer;
  transition:background 0.18s ease;
}
.home-bilan-cta:active { background:rgba(255,200,60,0.12); }
.home-bilan-cta-icon { width:20px; height:20px; color:rgba(255,200,60,0.8); flex-shrink:0; }
.home-bilan-cta-icon svg { width:100%; height:100%; }
.home-bilan-cta-text {
  flex:1; font-family:'Share Tech Mono',monospace; font-size:12px; font-weight:700;
  color:rgba(255,200,60,0.9); letter-spacing:0.16em;
}
.home-bilan-cta-arrow { font-size:16px; color:rgba(255,200,60,0.73); }

/* === VOID CHAT === */
.void-chat-wrap { display:flex; flex-direction:column; gap:0; height:calc(100vh - 160px); max-height:700px; }
.void-chat-header { padding:20px 0 16px; border-bottom:1px solid rgba(155,92,255,0.15); margin-bottom:16px; }
.void-chat-id { font-family:'Share Tech Mono',monospace; font-size: 11px; letter-spacing:0.25em; color:rgba(190,150,255,0.81); margin-bottom:6px; }
.void-chat-name { font-family:'Orbitron',sans-serif; font-size:20px; font-weight:700; color:rgba(190,150,255,0.81); }
.void-chat-status { font-family:'Share Tech Mono',monospace; font-size: 11px; color:rgba(255,255,255,0.59); margin-top:4px; letter-spacing:0.12em; }
.void-chat-messages { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-bottom:16px; -webkit-overflow-scrolling:touch; }
.void-msg-void { background:rgba(155,92,255,0.08); border:1px solid rgba(155,92,255,0.18); border-radius:12px 12px 12px 4px; padding:14px 16px; max-width:88%; }
.void-msg-void-label { font-family:'Share Tech Mono',monospace; font-size: 11px; letter-spacing:0.2em; color:rgba(190,150,255,0.81); margin-bottom:6px; }
.void-msg-void-text { font-family:'Manrope',sans-serif; font-weight: 400; font-size:14px; color:rgba(255,255,255,0.85); line-height:1.65; white-space:pre-line; }
.void-msg-user { background:rgba(63,231,255,0.06); border:1px solid rgba(63,231,255,0.72); border-radius:12px 12px 4px 12px; padding:14px 16px; max-width:88%; align-self:flex-end; font-family:'Manrope',sans-serif; font-size:14px; color:rgba(255,255,255,0.8); }
.void-chat-input-wrap { border-top:1px solid rgba(255,255,255,0.06); padding-top:12px; display:flex; gap:10px; align-items:flex-end; }
.void-chat-textarea { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(155,92,255,0.2); border-radius:10px; padding:12px; color:#fff; font-family:'Manrope',sans-serif; font-size:16px; resize:none; outline:none; line-height:1.5; -webkit-user-select:text; user-select:text; max-height:100px; }
.void-chat-textarea:focus { border-color:rgba(155,92,255,0.4); }
.void-chat-send { padding:12px 16px; background:rgba(155,92,255,0.1); border:1px solid rgba(155,92,255,0.3); border-radius:10px; color:rgba(190,150,255,0.81); font-family:'Share Tech Mono',monospace; font-size: 12px; letter-spacing:0.15em; cursor:pointer; touch-action:manipulation; white-space:nowrap; flex-shrink:0; }
.void-typing { display:flex; align-items:center; gap:5px; padding:10px 16px; }
.void-typing span { width:5px; height:5px; border-radius:50%; background:rgba(155,92,255,0.6); animation:vt 1.2s ease-in-out infinite; }
.void-typing span:nth-child(2) { animation-delay:0.2s; }
.void-typing span:nth-child(3) { animation-delay:0.4s; }

@keyframes dnj-glitch-ambient {
  0%,78%,100% { transform:none; filter:none; clip-path:none; }
  79%   { transform:translateX(-11px); filter:hue-rotate(-20deg) saturate(2) brightness(1.25); clip-path:polygon(0 0,100% 0,100% 38%,0 38%); }
  80%   { transform:translateX(9px) skewX(2deg); filter:hue-rotate(12deg) saturate(1.6); clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
  81%   { transform:translateX(-7px); filter:brightness(1.35) hue-rotate(-10deg) contrast(1.25); clip-path:polygon(0 45%,100% 45%,100% 100%,0 100%); }
  82.5% { transform:translateX(6px) skewX(-1deg); filter:hue-rotate(6deg); clip-path:none; }
  84%   { transform:none; filter:none; clip-path:none; }
}
@keyframes dnj-ca-layer {
  0%,78%,100% { opacity:0; box-shadow:none; transform:none; }
  79%   { opacity:1; transform:translateX(4px); background:rgba(255,30,30,0.0); box-shadow:4px 0 0 rgba(255,30,30,0.35) inset, -2px 0 0 rgba(0,200,255,0.12) inset; }
  80%   { opacity:1; transform:translateX(-4px); box-shadow:-5px 0 0 rgba(255,30,30,0.4) inset; clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%); }
  81%   { opacity:1; transform:translateX(3px); box-shadow:3px 0 0 rgba(255,30,30,0.28) inset; clip-path:polygon(0 60%,100% 60%,100% 82%,0 82%); }
  84%   { opacity:0; }
}

.home-card-raid-new {
  background:rgba(2,10,18,0.97); border:1px solid rgba(63,231,255,0.35); border-radius:var(--radius-l);
  padding:10px 12px; cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 0 22px rgba(63,231,255,0.07), inset 0 1px 0 rgba(63,231,255,0.12);
  animation:raid-glitch-ambient 3s step-end infinite;
}
.home-card-raid-new::after {
  content:''; position:absolute; left:0; right:0; height:2px; background:rgba(63,231,255,0.55);
  pointer-events:none; z-index:5; opacity:0;
  animation:raid-scanline 3s step-end infinite;
}
.home-card-raid-new-label {
  font-family:'Share Tech Mono',monospace; font-size:13px; font-weight:800;
  color:rgba(63,231,255,0.95); letter-spacing:0.18em; position:relative; z-index:1;
  text-shadow:0 0 16px rgba(63,231,255,0.5);
}
.home-card-raid-new-sub {
  font-size: 11px; color:rgba(255,255,255,0.59); margin-top:3px; letter-spacing:0.08em;
  position:relative; z-index:1;
}
.home-card-raid-new.cleared .home-card-raid-new-label { color:rgba(0,255,136,0.95); text-shadow:0 0 16px rgba(0,255,136,0.45); }
.home-card-raid-new.cleared { border-color:rgba(0,255,136,0.3); }
.home-card-raid-new.locked { border-color:rgba(255,255,255,0.08); cursor:pointer; }
.home-card-raid-new.locked .home-card-raid-new-label { color:rgba(255,255,255,0.59); text-shadow:none; }

@keyframes raid-glitch-ambient {
  0%,80%,100% { transform:none; filter:none; }
  81%  { transform:translateY(-3px); filter:brightness(1.35) contrast(1.15) saturate(1.5); }
  82%  { transform:translateY(2px); filter:brightness(1.4) contrast(1.2); }
  83%  { transform:translateY(-2px); filter:brightness(1.3) saturate(1.3); }
  84%  { transform:none; filter:none; }
}
@keyframes raid-scanline {
  0%,80%,100% { opacity:0; top:-2px; }
  81%  { opacity:1; top:10%; transition:top 0.08s linear; }
  82%  { opacity:0.8; top:40%; }
  83%  { opacity:0.6; top:75%; }
  84%  { opacity:0; top:100%; }
}

/* === Fullscreen overlays === */
#dungeon-page, #raid-page {
  position:fixed; inset:0; z-index:500; overflow-y:auto;
  background:var(--bg-dark); display:none;
  -webkit-overflow-scrolling:touch; touch-action:pan-y;
}
#dungeon-page.open, #raid-page.open { display:block; }
#dungeon-page { animation:dnj-glitch-ambient 5s step-end infinite; }
#dungeon-page::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  animation:dnj-ca-layer 5s step-end infinite;
}
#raid-page { animation:raid-glitch-ambient 3s step-end infinite; }
#raid-page::after {
  content:''; position:fixed; left:0; right:0; height:2px;
  background:rgba(63,231,255,0.55); pointer-events:none; z-index:501; opacity:0;
  animation:raid-scanline 3s step-end infinite;
}
.overlay-back-btn {
  position:sticky; top:0; z-index:510; display:flex; align-items:center; gap:8px;
  padding:calc(max(14px, env(safe-area-inset-top, 0px), var(--preview-safe-top, 0px)) + 6px) 16px 10px; background:var(--bg-dark);
  font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.14em;
  color:rgba(255,255,255,0.6); cursor:pointer; border:none; width:100%;
  text-align:left; border-bottom:1px solid rgba(255,255,255,0.06);
}
.overlay-back-btn:hover { color:rgba(255,255,255,0.9); }
.overlay-back-btn svg { width:18px; height:18px; flex-shrink:0; }
#dungeon-page .overlay-back-btn { color:rgba(255,120,160,0.80); }
#raid-page .overlay-back-btn { color:rgba(63,231,255,0.8); }
.overlay-content { padding:0 0 40px; position:relative; z-index:2; }

@media (prefers-reduced-motion: reduce) {
  .home-card-dnj, .home-card-dnj::before, #dungeon-page, #dungeon-page::before,
  .home-card-raid-new, .home-card-raid-new::after, #raid-page, #raid-page::after {
    animation:none !important;
    clip-path:none !important;
    transform:none !important;
    filter:none !important;
  }
}
        .inv-3d-canvas { width:100%; height:160px; display:block; border-radius:8px 8px 0 0; cursor:grab; }
        .inv-3d-canvas:active { cursor:grabbing; }

    /* ?? AWAKENING FLOW ?? */
    .awaken-init { padding:20px 14px 12px; }
    .awaken-init-msg { font-family:'Share Tech Mono',monospace; font-size:11px; color:rgba(255,255,255,0.59); letter-spacing:0.07em; line-height:1.6; text-align:center; margin-bottom:22px; }
    .awaken-proto-msg { font-family:'Share Tech Mono',monospace; font-size:11px; color:rgba(255,255,255,0.59); letter-spacing:0.07em; line-height:1.5; margin-bottom:14px; padding:10px 14px 10px 16px; border-left:2px solid rgba(255,200,0,0.4); }
    /* ?? CHANGELOG · au-dessus du gate protocole (voir --z-changelog) ?? */
    #changelog-overlay { z-index: var(--z-changelog); }
    .changelog-version { font-family:'Share Tech Mono',monospace; font-size: 12px; letter-spacing:0.15em; color:rgba(63,231,255,0.72); margin-bottom:14px; }
    .changelog-list { display:flex; flex-direction:column; gap:8px; }
    .changelog-entry { display:flex; align-items:baseline; gap:9px; }
    .changelog-badge { font-family:'Share Tech Mono',monospace; font-size: 11px; letter-spacing:0.12em; padding:2px 7px; border-radius:3px; flex-shrink:0; font-weight:700; }
    .changelog-badge.new    { background:rgba(63,231,255,0.72); color:rgba(63,231,255,0.95); border:1px solid rgba(63,231,255,0.72); }
    .changelog-badge.improved { background:rgba(160,80,255,0.15); color:rgba(190,130,255,0.96); border:1px solid rgba(160,80,255,0.3); }
    .changelog-badge.fixed  { background:rgba(0,255,136,0.12); color:rgba(0,255,136,0.9); border:1px solid rgba(0,255,136,0.25); }
    .changelog-entry-text { font-family:'Manrope',sans-serif; font-weight: 400; font-size:13px; color:rgba(255,255,255,0.82); line-height:1.5; }
    /* ?? SLEEP SCREEN ?? */
    #sleep-screen {
      display:none;
      position:fixed;
      inset:0;
      z-index: var(--z-sleep);
      background:var(--bg-dark);
      flex-direction:column;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      -webkit-overflow-scrolling:touch;
      touch-action:pan-y;
    }
    #sleep-screen.open { display:flex; }
    #sleep-screen::before {
      content:'';
      position:absolute;
      inset:0;
      background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px);
      pointer-events:none;
    }
    .sleep-content {
      position:relative;
      text-align:center;
      padding:32px 24px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:12px;
    }
    .sleep-icon {
      font-size:40px;
      margin-bottom:8px;
      animation:sleep-pulse 4s ease-in-out infinite;
    }
    @keyframes sleep-pulse {
      0%,100% { opacity:0.4; transform:scale(1); }
      50% { opacity:1; transform:scale(1.08); }
    }
    .sleep-title {
      font-family:'Share Tech Mono',monospace;
      font-size:clamp(16px,5vw,26px);
      letter-spacing:0.25em;
      color:rgba(255,255,255,0.88);
      text-transform:uppercase;
    }
    .sleep-sub {
      font-family:'Share Tech Mono',monospace;
      font-size:11px;
      letter-spacing:0.18em;
      color:rgba(255,255,255,0.59);
      text-transform:uppercase;
    }
    .sleep-reconnect {
      font-family:'Share Tech Mono',monospace;
      font-size:clamp(13px,4vw,18px);
      letter-spacing:0.15em;
      color:var(--neon-blue);
      margin-top:20px;
      padding:10px 20px;
      border:1px solid rgba(0,212,255,0.25);
      border-radius:6px;
    }
    .sleep-pseudo {
      font-family:'Share Tech Mono',monospace;
      font-size:11px;
      color:rgba(255,255,255,0.59);
      position:absolute;
      bottom:28px;
      left:0;
      right:0;
      text-align:center;
      letter-spacing:0.1em;
    }
    @media (prefers-reduced-motion:reduce) {
      .sleep-icon { animation:none !important; }
    }

    /* ===== BETA POLISH ? DESIGN REFINEMENTS ===== */

    /* :root bloc 2 supprim? ? remplac? par design-system-v2 */

    /* 1. TYPOGRAPHY ? Orbitron (impact) + Share Tech Mono (syst?me) + Manrope (corps) */

    /* ?? Base ?? */
    body { font-family: 'Share Tech Mono', monospace !important; line-height: 1.6 !important; }

    /* ?? ORBITRON 700 ? Gros titres impactants (landing: .boot-title, .section-title, .nav-brand) ?? */
    .home-greeting,
    .ring-level,
    .ring-rank,
    .home-card-hero-num,
    .home-card-med-num,
    .card-title,
    .bilan-title,
    .side-brand,
    .main-btn,
    .header-name {
      font-family: 'Orbitron', monospace !important;
      font-weight: 700 !important;
    }

    /* ?? MANROPE 500 ? Noms de qu?tes ?? */
    .quest-name {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 14px !important;
      letter-spacing: 0 !important;
    }

    /* ?? MANROPE 300 ? Corps de texte lisibles (landing: .section-sub, .feat-desc, .dungeon-body) ?? */
    .quest-v,
    .task-row,
    .dnj-challenge-desc,
    .skill-desc,
    .bilan-void-msg,
    .void-msg,
    #sys-pop-body,
    .skill-card p,
    .dungeon-body,
    .inv-item-desc,
    .param-label {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 13px !important;
      letter-spacing: 0 !important;
      line-height: 1.65 !important;
    }

    /* ?? SHARE TECH MONO ? Labels syst?me (landing: .boot-line, .section-eyebrow, .feat-badge) ?? */
    .quest-k,
    .quest-xp-pill,
    .quest-meta,
    .quest-stat,
    .time-label,
    .system-label,
    .phase-badge {
      font-family: 'Share Tech Mono', monospace !important;
      font-weight: 400 !important;
    }

    /* 2. CARD CORNERS ? exact .feat-corner from landing */
    .card::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important; left: 0 !important;
      width: 10px !important; height: 10px !important;
      border-top: 1px solid rgba(63,231,255,0.4) !important;
      border-left: 1px solid rgba(63,231,255,0.4) !important;
      border-right: none !important; border-bottom: none !important;
      border-radius: 0 !important;
      pointer-events: none !important;
      animation: none !important;
      box-shadow: none !important;
    }
    .card::after {
      content: '' !important;
      position: absolute !important;
      bottom: 0 !important; right: 0 !important;
      width: 10px !important; height: 10px !important;
      border-bottom: 1px solid rgba(63,231,255,0.4) !important;
      border-right: 1px solid rgba(63,231,255,0.4) !important;
      border-top: none !important; border-left: none !important;
      border-radius: 0 !important;
      pointer-events: none !important;
      animation: none !important;
      box-shadow: none !important;
    }

    /* 3. CARD BACKGROUNDS ? exact .feat from landing */
    .card {
      background: rgba(255,255,255,0.018) !important;
      border: 1px solid rgba(63,231,255,0.07) !important;
      border-radius: 4px !important;
    }
    .card:hover { background: rgba(63,231,255,0.025) !important; }
    .quest-item {
      background: rgba(255,255,255,0.018) !important;
      border-color: rgba(63,231,255,0.07) !important;
    }

    /* 4. BADGES & PILLS ? exact .feat-badge from landing */
    .quest-xp-pill,
    .phase-badge,
    .quest-stat {
      font-size: 11px !important;
      letter-spacing: 0.12em !important;
      padding: 2px 7px !important;
      border-radius: 2px !important;
      background: rgba(63,231,255,0.05) !important;
      border: 1px solid rgba(63,231,255,0.12) !important;
      color: rgba(63,231,255,0.72) !important;
    }

    /* 5. MAIN BUTTON ? exact .btn-enter from landing */
    .main-btn {
      font-family: 'Orbitron', monospace !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      letter-spacing: 0.18em !important;
      padding: 15px 32px !important;
      background: rgba(63,231,255,0.06) !important;
      border: 1px solid rgba(63,231,255,0.35) !important;
      border-radius: 3px !important;
      color: var(--cyan) !important;
    }

    /* 6. EYEBROW LABELS ? exact .section-eyebrow from landing */
    .system-label,
    .phase-badge,
    .card-eyebrow {
      font-size: 11px !important;
      letter-spacing: 0.35em !important;
      color: rgba(63,231,255,0.72) !important;
      text-transform: uppercase !important;
    }

    /* 7. ANIMATIONS ? supprimer sur ?l?ments secondaires */
    .time-label           { animation: none !important; }
    .bilan-title          { animation: none !important; }
    .home-card-hero-title { animation: none !important; }
    .ring-rank            { animation: none !important; }
    .card-line            { animation: none !important; }

    /* Masquer orbit dots sur les quest-item */
    .quest-item > .orbit-dot,
    .quest-item > .orbit-dot-trail { display: none !important; }

    /* 9. ATOMIC IDENTITY TOAST */
    #atomic-notif {
      position: fixed;
      bottom: 72px;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 4px;
      padding: 10px 16px;
      font-family: 'Manrope', sans-serif;
      font-weight: 400;
      font-size: 12px;
      font-style: italic;
      color: rgba(255,255,255,0.6);
      text-align: center;
      max-width: 280px;
      z-index: 9000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    #atomic-notif.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* 10. SPLASH SCREEN ? ancien splash retir?. Le nouveau splash est enti?rement
       stylis? en inline dans index.html (voir #splash-screen, #splash-cta, etc.). */

    /* 10. JOURNAL DU VOID */
    .journal-void-card { padding: 14px 16px !important; margin-bottom: 10px !important; }
    .journal-form { display: flex; flex-direction: column; gap: 0; }
    .journal-textarea {
      width: 100%;
      box-sizing: border-box;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(63,231,255,0.08);
      border-radius: 3px;
      color: rgba(255,255,255,0.85);
      font-family: 'Manrope', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      padding: 10px 12px;
      resize: none;
      outline: none;
      margin-top: 8px;
    }
    .journal-textarea::placeholder { color: rgba(255,255,255,0.59); }
    .journal-textarea:focus { border-color: rgba(63,231,255,0.2); }
    .journal-readonly { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
    .journal-row { display: flex; gap: 10px; align-items: flex-start; }
    .journal-lbl {
      font-family: 'Share Tech Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      color: rgba(63,231,255,0.72);
      text-transform: uppercase;
      flex-shrink: 0;
      padding-top: 2px;
      min-width: 80px;
    }
    .journal-txt {
      font-family: 'Manrope', sans-serif;
      font-size: 13px;
      font-weight: 400;
      color: rgba(255,255,255,0.75);
      line-height: 1.5;
    }
    /* Bilan journal entries */
    .bilan-journal-entry { padding: 8px 0 2px; border-top: 1px solid rgba(255,255,255,0.04); margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
    .bilan-journal-row { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.45; }
    .bilan-journal-row.intent { color: rgba(63,231,255,0.72); font-style: italic; }
    .bilan-journal-row.win { color: rgba(0,255,136,0.68); font-style: italic; }

    /* 8. HOME LIST ? compact, coh?rent landing */
    .home-list-item {
      padding: 14px 16px !important;
      min-height: auto !important;
      border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    }
    .home-list-item:last-child { border-bottom: none !important; }

    /* Label gauche (?volution, Inventaire, Param?tres) */
    .home-list-label {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 15px !important;
      letter-spacing: 0 !important;
      color: rgba(255,255,255,0.85) !important;
    }

    /* Valeur droite (0 j de s?rie, 4 objets) */
    .home-list-badge {
      font-family: 'Share Tech Mono', monospace !important;
      font-size: 11px !important;
      letter-spacing: 0.1em !important;
      color: rgba(63,231,255,0.72) !important;
    }

    /* Chevron */
    .home-list-arrow {
      color: rgba(255,255,255,0.59) !important;
      font-size: 11px !important;
    }

    /* Ic?ne */
    .home-list-ico {
      color: rgba(63,231,255,0.72) !important;
      font-size: 16px !important;
      width: 20px !important;
      flex-shrink: 0 !important;
    }
    /* ?? Custom Time Picker ?? */
    #time-picker-overlay{
      display:none; position:fixed; inset:0; z-index:99999;
      background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
      align-items:flex-end; justify-content:center;
    }
    #time-picker-overlay.open{ display:flex; }
    .tpk-sheet{
      width:100%; max-width:420px;
      background:var(--bg-card,#1a1a2e); border-radius:20px 20px 0 0;
      padding:20px 16px 32px; box-shadow:0 -4px 30px rgba(0,0,0,.5);
      touch-action:none;
    }
    .tpk-title{
      text-align:center; font-size:13px; letter-spacing:.12em;
      color:var(--text-muted,#888); text-transform:uppercase; margin-bottom:16px;
    }
    .tpk-display{
      display:flex; align-items:center; justify-content:center;
      gap:4px; margin-bottom:20px;
    }
    .tpk-seg{
      font-size:52px; font-weight:700; letter-spacing:-.02em;
      color:var(--neon-blue,#00e5ff); min-width:66px; text-align:center;
      background:rgba(255,255,255,.06); border-radius:12px; padding:4px 8px;
      transition:background .15s;
    }
    .tpk-seg.active{ background:rgba(0,229,255,.18); }
    .tpk-colon{ font-size:48px; font-weight:700; color:var(--text-muted,#888); margin:0 2px; }
    .tpk-cursor{
      display:inline-block; width:3px; height:48px; margin-left:2px;
      background:var(--neon-blue,#00e5ff); border-radius:2px;
      animation:tpkBlink .9s step-end infinite;
      vertical-align:middle;
    }
    @keyframes tpkBlink{ 50%{ opacity:0; } }
    .tpk-grid{
      display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
      margin-bottom:10px;
    }
    .tpk-btn{
      background:rgba(255,255,255,.08); border:none; border-radius:12px;
      color:var(--text-primary,#eee); font-size:22px; font-weight:600;
      padding:16px 0; cursor:pointer; -webkit-tap-highlight-color:transparent;
      transition:background .1s, transform .08s;
      touch-action:manipulation;
    }
    .tpk-btn:active{ background:rgba(0,229,255,.22); transform:scale(.94); }
    .tpk-btn.del{ font-size:18px; }
    .tpk-btn.zero{ grid-column:2/3; }
    .tpk-actions{
      display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px;
    }
    .tpk-btn-cancel{
      background:rgba(255,255,255,.06); border:none; border-radius:12px;
      color:var(--text-muted,#888); font-size:15px; font-weight:600;
      padding:14px 0; cursor:pointer; touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }
    .tpk-btn-ok{
      background:var(--neon-blue,#00e5ff); border:none; border-radius:12px;
      color:#000; font-size:15px; font-weight:700;
      padding:14px 0; cursor:pointer; touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }
    .tpk-btn-ok:disabled{ opacity:.4; }
    /* time button in forms */
    .time-btn{
      background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
      border-radius:10px; color:var(--text-primary,#eee);
      font-size:15px; font-weight:600; padding:8px 16px; cursor:pointer;
      letter-spacing:.04em; touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
      transition:background .15s;
    }
    .time-btn:active{ background:rgba(0,229,255,.18); }
    .onboard-input.time-btn{ width:100%; text-align:center; font-size:17px; padding:12px; }

/* ?? VOID BANNER ? subtle non-blocking top banner ??????????????????????? */
.void-banner{
  position:fixed;
  top:-80px;
  left:0; right:0;
  z-index:3000;
  background:rgba(5,7,10,0.95);
  border-bottom:1px solid rgba(63,231,255,0.3);
  padding:10px 14px;
  transition:top 0.42s cubic-bezier(0.16,1,0.3,1), max-height 0.3s ease;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(0,0,0,0.4);
  pointer-events:none;
  max-height:60px;
  overflow:hidden;
}
.void-banner.show{
  top:0;
  pointer-events:auto;
}
.void-banner.expanded{
  max-height:240px;
}
.void-banner-content{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:540px;
  margin:0 auto;
  cursor:pointer;
}
.void-banner-icon{
  color:rgba(63,231,255,0.85);
  font-size:14px;
  flex-shrink:0;
  animation:voidBannerPulse 2s infinite;
}
.void-banner-text{
  flex:1;
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  color:rgba(255,255,255,0.82);
  letter-spacing:0.05em;
  line-height:1.5;
}
.void-banner-close{
  background:none;
  border:none;
  color:rgba(255,255,255,0.5);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  padding:2px 6px;
  flex-shrink:0;
  transition:color 0.2s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.void-banner-close:hover,
.void-banner-close:active{ color:rgba(255,255,255,0.95); }
@keyframes voidBannerPulse{
  0%,100%{ opacity:0.6; }
  50%{ opacity:1; }
}
/* Desktop : d?cale l?g?rement pour la sidebar */
@media (min-width:900px){
  .void-banner{ left:88px; }
}

/* ?? FEEDBACK BOTTOM SHEET ? J14 non-intrusive ?????????????????????????? */
.feedback-sheet{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:2800;
  background:linear-gradient(180deg, rgba(10,12,16,0.98) 0%, rgba(5,7,10,0.98) 100%);
  border-top:1px solid rgba(63,231,255,0.28);
  border-radius:18px 18px 0 0;
  padding:10px 18px 22px;
  box-shadow:0 -12px 40px rgba(0,0,0,0.6);
  transform:translateY(100%);
  transition:transform 0.45s cubic-bezier(0.16,1,0.3,1);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  max-width:540px;
  margin:0 auto;
}
.feedback-sheet.show{ transform:translateY(0); }
.feedback-sheet.dismiss{ transform:translateY(100%); }
.feedback-handle{
  width:44px; height:4px;
  background:rgba(255,255,255,0.22);
  border-radius:2px;
  margin:0 auto 14px;
}
.feedback-sheet h3{
  font-family:'Share Tech Mono',monospace;
  font-size:11px;
  letter-spacing:0.16em;
  color:rgba(63,231,255,0.75);
  text-transform:uppercase;
  text-align:center;
  margin:0 0 14px;
  font-weight:normal;
}
.feedback-options{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.feedback-options button{
  padding:14px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  color:rgba(255,255,255,0.88);
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-align:left;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.feedback-options button:hover,
.feedback-options button:active{
  background:rgba(63,231,255,0.08);
  border-color:rgba(63,231,255,0.35);
}

/* ?? MOBILE NAV : bouton HUB central (?) ????????????????????????????????? */
.mob-nav-item.nav-hub{
  position:relative;
  z-index:9960;
  flex:0 0 auto;
  width:56px;
  height:68px;
  padding:0;
  border-radius:12px 12px 10px 10px;
  background:rgba(63,231,255,0.10);
  border:1px solid rgba(63,231,255,0.25);
  color:rgba(63,231,255,0.95);
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-24px);
  box-shadow:0 0 20px rgba(63,231,255,0.15);
  transition:background 150ms ease, border-color 150ms ease, transform 200ms ease;
  min-height:68px;
  cursor:pointer;
}
.mob-nav-item.nav-hub .hub-nav-label{
  font-family:'Share Tech Mono',monospace;
  font-size:8px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  line-height:1;
  writing-mode:horizontal-tb;
  text-orientation:mixed;
  color:rgba(210,252,255,0.98);
  flex-shrink:0;
  text-shadow:
    0 0 4px rgba(63,231,255,0.95),
    0 0 12px rgba(63,231,255,0.65),
    0 0 22px rgba(63,231,255,0.35);
  transition:transform 300ms cubic-bezier(0.16,1,0.3,1), opacity 200ms ease;
}
.mob-nav-item.nav-hub::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:13px 13px 11px 11px;
  border:1px solid rgba(63,231,255,0.25);
  animation:hub-pulse 2s ease-out infinite;
  pointer-events:none;
}
@keyframes hub-pulse{
  0%   { transform:scale(1);   opacity:0.4; }
  100% { transform:scale(1.5); opacity:0; }
}
body.hub-open .mob-nav-item.nav-hub{
  background:rgba(63,231,255,0.20);
  border-color:rgba(63,231,255,0.45);
}
body.hub-open .mob-nav-item.nav-hub .hub-nav-label{
  transform:scale(0.94);
  opacity:0.92;
}
body.hub-open .mob-nav-item.nav-hub::before{
  animation:none;
  opacity:0;
}

/* HUB OVERLAY + BOTTOM SHEET (comportement d?origine ? align? barre 64px + safe area) */
.hub-overlay{
  position:fixed;
  top:0; left:0; right:0; bottom:64px;
  background:rgba(3,5,8,0.75);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:299;
  opacity:0;
  pointer-events:none;
  transition:opacity 250ms ease;
}
body.hub-open .hub-overlay{
  opacity:1;
  pointer-events:auto;
}
.hub-sheet{
  position:fixed;
  bottom:calc(64px + env(safe-area-inset-bottom,0px));
  left:50%;
  width:100%;
  max-width:390px;
  background:rgba(7,9,14,0.98);
  border-top:1px solid rgba(63,231,255,0.12);
  border-radius:20px 20px 0 0;
  padding:0 16px 24px;
  z-index:300;
  transform:translateX(-50%) translateY(calc(100% + 64px));
  transition:transform 300ms cubic-bezier(0.16,1,0.3,1);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  pointer-events:none;
}
body.hub-open .hub-sheet{
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.hub-handle{
  width:40px;
  height:3px;
  background:rgba(255,255,255,0.15);
  border-radius:2px;
  margin:12px auto 20px;
}
.hub-title{
  font-family:'Share Tech Mono',monospace;
  font-size:10px;
  letter-spacing:0.25em;
  color:rgba(255,255,255,0.20);
  text-transform:uppercase;
  text-align:center;
  margin:0 0 16px;
}
.hub-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.hub-card{
  position:relative;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:18px 14px;
  text-align:center;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  transition:background 150ms ease, transform 150ms ease, border-color 150ms ease;
  overflow:hidden;
  color:inherit;
  font:inherit;
}
.hub-card::before,
.hub-card::after{
  content:'';
  position:absolute;
  width:10px; height:10px;
  pointer-events:none;
}
.hub-card::before{
  top:6px; left:6px;
  border-top:1px solid rgba(255,255,255,0.08);
  border-left:1px solid rgba(255,255,255,0.08);
}
.hub-card::after{
  bottom:6px; right:6px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  border-right:1px solid rgba(255,255,255,0.08);
}
.hub-card:hover{
  background:rgba(255,255,255,0.07);
  transform:translateY(-2px);
}
.hub-card:active{
  transform:scale(0.97);
}
.hub-card .hub-halo{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 30%, var(--card-halo, transparent) 0%, transparent 65%);
  pointer-events:none;
}
.hub-card > *{ position:relative; z-index:1; }
.hub-icon{
  width:28px; height:28px;
  stroke:var(--card-icon, rgba(255,255,255,0.62));
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:10px;
}
.hub-card-label{
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:13px;
  color:rgba(255,255,255,0.80);
  line-height:1;
}
.hub-card-sub{
  margin-top:4px;
  font-family:'Share Tech Mono',monospace;
  font-size:9px;
  letter-spacing:0.10em;
  color:rgba(255,255,255,0.30);
  text-transform:uppercase;
  line-height:1;
}
.hub-card.card-evo  { --card-icon:rgba(155,92,255,0.75); --card-halo:rgba(155,92,255,0.06); }
.hub-card.card-evo:hover  { border-color:rgba(155,92,255,0.25); }
.hub-card.card-frag { --card-icon:rgba(155,92,255,0.75); --card-halo:rgba(155,92,255,0.04); }
.hub-card.card-frag:hover { border-color:rgba(155,92,255,0.25); }
.hub-card.card-inv  { --card-icon:rgba(63,231,255,0.75); --card-halo:rgba(63,231,255,0.04); }
.hub-card.card-inv:hover  { border-color:rgba(63,231,255,0.25); }
.hub-card.card-soc  { --card-icon:rgba(0,232,122,0.75); --card-halo:rgba(0,232,122,0.04); }
.hub-card.card-soc:hover  { border-color:rgba(0,232,122,0.25); }
.frag-badge{
  margin-top:6px;
  font-family:'Share Tech Mono',monospace;
  font-size:8px;
  letter-spacing:0.10em;
  color:rgba(255,183,0,0.70);
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.frag-badge::before{
  content:'';
  width:5px; height:5px;
  border-radius:50%;
  background:rgba(0,232,122,0.85);
  box-shadow:0 0 4px rgba(0,232,122,0.6);
  animation:frag-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes frag-dot-pulse{
  0%,100%{ opacity:0.6; }
  50%    { opacity:1; }
}
.hub-params{
  margin-top:10px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  padding:12px 20px;
  cursor:pointer;
  color:inherit;
  font:inherit;
  transition:background 150ms ease, transform 150ms ease;
}
.hub-params:hover{
  background:rgba(255,255,255,0.07);
  transform:translateY(-1px);
}
.hub-params:active{ transform:scale(0.97); }
.hub-params svg{
  width:24px; height:24px;
  stroke:rgba(255,255,255,0.35);
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hub-params-label{
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:13px;
  color:rgba(255,255,255,0.80);
  letter-spacing:0.02em;
}

/* Light mode variants */
[data-theme="light"] .mob-nav-item.nav-hub,
body.light-mode .mob-nav-item.nav-hub{
  background:rgba(0,153,204,0.08);
  border-color:rgba(0,153,204,0.25);
  color:#0099CC;
}
[data-theme="light"] .mob-nav-item.nav-hub .hub-nav-label,
body.light-mode .mob-nav-item.nav-hub .hub-nav-label{
  color:#0099CC;
  text-shadow:
    0 0 4px rgba(0,153,204,0.55),
    0 0 12px rgba(0,153,204,0.35);
}
[data-theme="light"] .hub-overlay,
body.light-mode .hub-overlay{ background:rgba(200,200,210,0.60); }
[data-theme="light"] .hub-sheet,
body.light-mode .hub-sheet{
  background:rgba(242,244,250,0.99);
  border-top-color:rgba(0,0,0,0.08);
}
[data-theme="light"] .hub-title,
body.light-mode .hub-title{ color:rgba(10,13,20,0.25); }
[data-theme="light"] .hub-card,
body.light-mode .hub-card{
  background:#FFFFFF;
  border-color:rgba(0,0,0,0.08);
}
[data-theme="light"] .hub-card-label,
body.light-mode .hub-card-label{ color:rgba(10,13,20,0.80); }
[data-theme="light"] .hub-card-sub,
body.light-mode .hub-card-sub{ color:rgba(10,13,20,0.40); }
[data-theme="light"] .hub-params,
body.light-mode .hub-params{
  background:#FFFFFF;
  border-color:rgba(0,0,0,0.10);
}
[data-theme="light"] .hub-params-label,
body.light-mode .hub-params-label{ color:rgba(10,13,20,0.80); }
[data-theme="light"] .hub-params svg,
body.light-mode .hub-params svg{ stroke:rgba(10,13,20,0.40); }

/* Pages hub (?volution ? Fragment ? Inventaire ? Social ? Param?tres) : largeur max align?e au reste de l?app ? la nav bas n?est pas modifi?e */
#tab-bilan,
#tab-fragment,
#tab-inventaire,
#tab-social,
#tab-params{
  width:100%;
  max-width:min(390px, 100vw);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

/* ?? ACTION MENU sheet (bottom sheet d?clench?e par bouton central) ????? */
.action-menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:2700;
  opacity:0;
  transition:opacity 0.3s ease;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.action-menu-backdrop.show{ opacity:1; }

.action-menu-sheet{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:2800;
  background:linear-gradient(180deg, rgba(10,12,16,0.98) 0%, rgba(5,7,10,0.98) 100%);
  border-top:1px solid rgba(63,231,255,0.28);
  border-radius:18px 18px 0 0;
  padding:10px 18px 28px;
  box-shadow:0 -12px 40px rgba(0,0,0,0.6);
  transform:translateY(100%);
  transition:transform 0.45s cubic-bezier(0.16,1,0.3,1);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  max-width:540px;
  margin:0 auto;
}
.action-menu-sheet.show{ transform:translateY(0); }
.action-menu-sheet.dismiss{ transform:translateY(100%); }

.action-menu-sheet h3{
  font-family:'Share Tech Mono',monospace;
  font-size:11px;
  letter-spacing:0.18em;
  color:rgba(63,231,255,0.75);
  text-transform:uppercase;
  text-align:center;
  margin:0 0 14px;
  font-weight:normal;
}
.action-menu-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.action-menu-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:14px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  color:rgba(255,255,255,0.9);
  cursor:pointer;
  text-align:left;
  transition:background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.action-menu-item:hover,
.action-menu-item:active{
  background:rgba(63,231,255,0.08);
  border-color:rgba(63,231,255,0.35);
}
.action-menu-icon{
  font-size:22px;
  line-height:1;
  flex-shrink:0;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(63,231,255,0.08);
  border-radius:10px;
}
.action-menu-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
}
.action-menu-label{
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  letter-spacing:0.06em;
  color:rgba(255,255,255,0.92);
}
.action-menu-sub{
  font-family:'Share Tech Mono',monospace;
  font-size:9.5px;
  letter-spacing:0.08em;
  color:rgba(255,255,255,0.45);
}

/* ??? Doc C ? save-mode (batterie faible) ??? */
body.save-mode .particle-canvas{
  display:none !important;
}
body.save-mode *,
body.save-mode *::before,
body.save-mode *::after{
  animation-duration:0.01s !important;
  transition-duration:0.01s !important;
  animation-iteration-count:1 !important;
}
body.save-mode{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.save-mode .card,
body.save-mode .profile-panel,
body.save-mode .sys-pop-overlay,
body.save-mode .overlay{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ??? Doc C ? offline-banner ??? */
.offline-banner{
  position:fixed;
  top:calc(max(env(safe-area-inset-top, 0px), var(--preview-safe-top, 0px)) + 6px);
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  padding:7px 14px;
  background:rgba(255,90,90,0.12);
  border:1px solid rgba(255,90,90,0.4);
  border-radius:999px;
  font-family:'Share Tech Mono',monospace;
  font-size:10px;
  letter-spacing:0.14em;
  color:rgba(255,140,140,0.95);
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  gap:7px;
  animation:offlineBannerIn 0.3s ease-out;
}
.offline-banner-hiding{
  animation:offlineBannerOut 0.4s ease-in forwards;
}
.offline-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgb(255,90,90);
  animation:offlineDotPulse 1.4s ease-in-out infinite;
}
@keyframes offlineBannerIn{
  from{ opacity:0; transform:translateX(-50%) translateY(-8px); }
  to{ opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes offlineBannerOut{
  to{ opacity:0; transform:translateX(-50%) translateY(-8px); }
}
@keyframes offlineDotPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.35; }
}

/* ??? Doc D ? Alliance invite popup ??? */
.alliance-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:20px;
  animation:allianceOverlayIn 0.25s ease-out;
}
@keyframes allianceOverlayIn{ from{opacity:0;} to{opacity:1;} }
.alliance-confirm-box{
  max-width:420px;
  width:100%;
  background:linear-gradient(180deg, rgba(16,18,28,0.98), rgba(8,10,18,0.98));
  border:1px solid rgba(63,231,255,0.32);
  border-radius:14px;
  padding:28px 22px 22px;
  box-shadow:0 18px 48px rgba(0,0,0,0.5), 0 0 28px rgba(63,231,255,0.08);
  text-align:center;
  animation:allianceBoxIn 0.32s cubic-bezier(0.22,0.9,0.3,1);
}
@keyframes allianceBoxIn{
  from{ opacity:0; transform:scale(0.94) translateY(12px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.alliance-confirm-tag{
  font-family:'Share Tech Mono',monospace;
  font-size:9.5px;
  letter-spacing:0.24em;
  color:rgba(63,231,255,0.72);
  text-transform:uppercase;
  margin-bottom:18px;
}
.alliance-confirm-code{
  font-family:'Share Tech Mono',monospace;
  font-size:22px;
  letter-spacing:0.14em;
  color:#fff;
  margin-bottom:16px;
  padding:10px 14px;
  background:rgba(63,231,255,0.05);
  border:1px solid rgba(63,231,255,0.2);
  border-radius:8px;
  display:inline-block;
}
.alliance-confirm-msg{
  font-family:'Manrope',sans-serif;
  font-size:13px;
  color:rgba(255,255,255,0.72);
  line-height:1.55;
  margin-bottom:22px;
}
.alliance-confirm-actions{
  display:flex;
  gap:10px;
  justify-content:center;
}
.alliance-confirm-btn{
  flex:1;
  padding:12px 14px;
  font-family:'Share Tech Mono',monospace;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.2s;
  border:1px solid transparent;
  background:transparent;
  color:#fff;
}
.alliance-confirm-btn-no{
  border-color:rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.7);
}
.alliance-confirm-btn-no:hover{
  border-color:rgba(255,255,255,0.35);
  color:rgba(255,255,255,0.95);
}
.alliance-confirm-btn-yes{
  border-color:rgba(63,231,255,0.5);
  background:rgba(63,231,255,0.08);
  color:rgba(63,231,255,0.95);
}
.alliance-confirm-btn-yes:hover{
  background:rgba(63,231,255,0.18);
  border-color:rgba(63,231,255,0.7);
}

/* ??? Doc D ? Accessibility ??? */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after{
  animation-duration:0.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.01ms !important;
  scroll-behavior:auto !important;
}
body.keyboard-navigation :focus{
  outline:2px solid rgba(63,231,255,0.8) !important;
  outline-offset:2px !important;
}
body.high-contrast{
  filter:contrast(1.2);
}
body.high-contrast .card,
body.high-contrast .profile-panel{
  border-color:rgba(255,255,255,0.4) !important;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}
    .param-input.time-btn{ width:110px; text-align:center; }

/* :root bloc 3 supprim? ? remplac? par design-system-v2 */

/* ?? Theme Dark (explicite) ?? */
[data-theme="dark"] {
  --bg-primary: #05070a;
  --bg-secondary: #0a0d13;
  --bg-tertiary: #121621;
  --bg-elevated: #1a1f2e;
  --bg-input: rgba(255,255,255,0.04);

  --text-primary: rgba(255,255,255,0.95);
  --text-secondary: rgba(255,255,255,0.78);
  --text-tertiary: rgba(255,255,255,0.52);
  --text-muted: rgba(255,255,255,0.32);
  --text-on-accent: #05070a;

  --accent-primary: #3fe7ff;
  --accent-secondary: #9b5cff;
  --accent-success: #00ff88;
  --accent-warning: #ffc83d;
  --accent-danger: #ff6b8a;

  --border-subtle: rgba(255,255,255,0.08);
  --border-medium: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.22);
  --border-accent: rgba(63,231,255,0.35);

  --overlay-scrim: rgba(5,7,10,0.85);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow-cyan: 0 0 20px rgba(63,231,255,0.25);
  --shadow-glow-purple: 0 0 20px rgba(155,92,255,0.2);
}

/* ?? Theme light ? source : _mockup/home.html body.light-mode (m?me structure app, couleurs maquette) */
[data-theme="light"] {
  /* Fonds (mockup) */
  --bg-page: #EAECF2;
  --bg-primary: #EAECF2;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #dde3ec;
  --bg-elevated: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-code: #f2f5fa;
  --bg-0: #f0f2f8;
  --bg-1: #EAECF2;
  --bg-2: #FFFFFF;
  --bg-3: #e8ecf4;
  --bg-4: #dde3ec;
  --bg-dark: #EAECF2;
  --bg-card: #FFFFFF;
  --bg-card-strong: #f2f5fa;

  /* Texte (mockup --t0..t3) */
  --t0: rgba(10, 13, 20, 0.95);
  --t1: rgba(10, 13, 20, 0.80);
  --t2: rgba(10, 13, 20, 0.60);
  --t3: rgba(10, 13, 20, 0.45);
  --t4: rgba(10, 13, 20, 0.28);
  --t-on-accent: #ffffff;
  --text-primary: rgba(10, 13, 20, 0.95);
  --text-secondary: rgba(10, 13, 20, 0.80);
  --text-tertiary: rgba(10, 13, 20, 0.45);
  --text-muted: rgba(10, 13, 20, 0.35);
  --text-on-accent: #ffffff;
  --text-dim: rgba(10, 13, 20, 0.45);
  --text-main: rgba(10, 13, 20, 0.95);

  /* Accents s?mantiques (mockup) */
  --accent: #0099CC;
  --ok: #00A854;
  --warn: #CC8800;
  --ko: #CC2244;
  --special: #6B35CC;
  --accent-primary: #0099CC;
  --accent-primary-ink: #007aa3;
  --accent-primary-tint: rgba(0, 153, 204, 0.10);
  --accent-primary-glow: rgba(0, 153, 204, 0.25);
  --accent-secondary: #6B35CC;
  --accent-secondary-tint: rgba(107, 53, 204, 0.10);
  --accent-secondary-glow: rgba(107, 53, 204, 0.22);
  --accent-success: #00A854;
  --accent-success-tint: rgba(0, 168, 84, 0.10);
  --accent-warning: #CC8800;
  --accent-warning-tint: rgba(204, 136, 0, 0.12);
  --accent-danger: #CC2244;
  --accent-danger-tint: rgba(204, 34, 68, 0.10);
  --accent-gold: #b8860b;
  --accent-gold-tint: rgba(184, 134, 11, 0.12);

  --neon-blue: #0099CC;
  --neon-purple: #6B35CC;
  --neon-cyan: #0099CC;
  --accent-blue: #0099CC;
  --success: #00A854;
  --danger: #CC2244;
  --warning: #CC8800;

  --accent-faint: rgba(0, 153, 204, 0.06);
  --ok-faint: rgba(0, 168, 84, 0.06);
  --warn-faint: rgba(204, 136, 0, 0.08);
  --ko-faint: rgba(204, 34, 68, 0.06);
  --special-faint: rgba(107, 53, 204, 0.06);

  --accent-border: rgba(0, 153, 204, 0.35);
  --ok-border: rgba(0, 168, 84, 0.35);
  --warn-border: rgba(204, 136, 0, 0.35);
  --ko-border: rgba(204, 34, 68, 0.35);
  --special-border: rgba(107, 53, 204, 0.35);

  --b0: rgba(0, 0, 0, 0.06);
  --b1: rgba(0, 0, 0, 0.10);
  --b2: rgba(0, 0, 0, 0.16);
  --b3: rgba(0, 0, 0, 0.22);
  --ba: rgba(0, 153, 204, 0.35);
  --bracket-col: rgba(0, 153, 204, 0.40);
  --bracket-accent: rgba(0, 153, 204, 0.40);
  --bracket-ok: rgba(0, 168, 84, 0.40);
  --bracket-warn: rgba(204, 136, 0, 0.40);
  --bracket-ko: rgba(204, 34, 68, 0.40);
  --bracket-special: rgba(107, 53, 204, 0.40);
  --bracket-neutral: rgba(0, 0, 0, 0.14);

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.20);
  --border-accent: rgba(0, 153, 204, 0.35);

  --grid-color: rgba(0, 153, 204, 0.04);

  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-glow-cyan: 0 0 20px rgba(0, 153, 204, 0.15);
  --shadow-glow-purple: 0 0 20px rgba(107, 53, 204, 0.12);
  --glass-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --glass-blur: 0px;
  --overlay-scrim: rgba(20, 25, 40, 0.45);
}

/* ???????????????????????????????????????????????????????????????
   BASE ADAPTATIVE
   ??????????????????????????????????????????????????????????????? */

html[data-theme="light"],
html[data-theme="light"] body {
  background: var(--bg-page, var(--bg-primary));
  color: var(--t1, var(--text-secondary));
  transition: background-color 0.25s ease, color 0.25s ease;
}

[data-theme="light"] body {
  background-image: none;
}

/* Particules / overlays de l'ancien splash retir?s (#alien-particles, #scanline-*, #circuit-grid) */

/* ???????????????????????????????????????????????????????????????
   COMPOSANTS ? Overrides th?me clair
   (dark garde son style hardcod? actuel ; light surcharge via vars)
   ??????????????????????????????????????????????????????????????? */

/* ?? Cards ?? */
[data-theme="light"] .card,
[data-theme="light"] .profile-panel,
[data-theme="light"] .param-panel,
[data-theme="light"] .friend-card,
[data-theme="light"] .pending-card,
[data-theme="light"] .challenge-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  backdrop-filter: none;
}
[data-theme="light"] .card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--border-accent);
}

/* ?? Titres / labels ?? */
[data-theme="light"] .card-title,
[data-theme="light"] .tab-title,
[data-theme="light"] .header-name,
[data-theme="light"] .header-top,
[data-theme="light"] .header-sub,
[data-theme="light"] .mini-name,
[data-theme="light"] .param-label {
  color: var(--text-primary);
}
[data-theme="light"] .param-hint {
  color: rgba(10, 13, 20, 0.45);
}
[data-theme="light"] .muted,
[data-theme="light"] .subtitle,
[data-theme="light"] .hint,
[data-theme="light"] .quest-xp-pill,
[data-theme="light"] .quest-name { color: var(--text-secondary); }
[data-theme="light"] .time-xp,
[data-theme="light"] .meta-pill { color: var(--text-tertiary); }

/* ?? Navigation lat?rale ?? */
[data-theme="light"] .side-nav {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  box-shadow: 2px 0 10px rgba(0,0,0,0.03);
  backdrop-filter: none;
}
[data-theme="light"] .side-brand { background: var(--bg-tertiary); color: var(--text-primary); }
[data-theme="light"] .side-brand.side-brand--vertical {
  color: var(--accent-primary);
  border-color: rgba(0, 136, 170, 0.2);
  background: var(--bg-tertiary);
}
[data-theme="light"] .side-item { color: var(--text-tertiary); }
[data-theme="light"] .side-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
[data-theme="light"] .side-item.active {
  background: rgba(0,136,170,0.08);
  color: var(--accent-primary);
  border-left: 2px solid var(--accent-primary);
}

/* ?? Navigation mobile ?? */
[data-theme="light"] #mobile-bottom-nav {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -2px 20px rgba(0,0,0,0.05);
  backdrop-filter: blur(20px);
}
[data-theme="light"] .mob-nav-item { color: var(--text-tertiary); }
[data-theme="light"] .mob-nav-item.active { color: var(--accent-primary); }
[data-theme="light"] .action-center {
  background: var(--accent-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(0,136,170,0.4);
}

/* ?? Boutons ?? */
[data-theme="light"] .param-save-btn,
[data-theme="light"] .inv-btn,
[data-theme="light"] .onboard-btn,
[data-theme="light"] .main-btn {
  background: var(--accent-primary);
  color: #fff;
  border: 1px solid var(--accent-primary);
  box-shadow: 0 2px 8px rgba(0,136,170,0.25);
}
[data-theme="light"] .param-save-btn:hover,
[data-theme="light"] .inv-btn:hover,
[data-theme="light"] .onboard-btn:hover,
[data-theme="light"] .main-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,136,170,0.35);
}
[data-theme="light"] .friend-btn,
[data-theme="light"] .reset-btn,
[data-theme="light"] .tpk-btn-cancel,
[data-theme="light"] .quick-btn {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
[data-theme="light"] .quick-btn:hover {
  border-color: var(--border-accent);
  background: rgba(0,136,170,0.05);
  color: var(--accent-primary);
}
[data-theme="light"] .danger-btn,
[data-theme="light"] .btn-danger {
  background: rgba(220,38,38,0.06);
  color: var(--accent-danger);
  border: 1px solid rgba(220,38,38,0.3);
}

/* ?? Formulaires ?? */
[data-theme="light"] .param-input,
[data-theme="light"] .param-row input,
[data-theme="light"] .param-row select,
[data-theme="light"] #fb-comment,
[data-theme="light"] #bilan-pop-win,
[data-theme="light"] .social-search-input,
[data-theme="light"] .void-chat-textarea,
[data-theme="light"] .time-btn,
[data-theme="light"] textarea,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="email"],
[data-theme="light"] select {
  background: var(--bg-input);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  transition: all 0.2s ease;
}
[data-theme="light"] .param-input:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0,136,170,0.1);
  outline: none;
}
[data-theme="light"] ::placeholder { color: var(--text-muted); }

/* Range slider */
[data-theme="light"] .param-range::-webkit-slider-runnable-track {
  background: var(--border-medium);
  height: 4px;
  border-radius: 2px;
}
[data-theme="light"] .param-range::-webkit-slider-thumb {
  background: var(--accent-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ?? Void Banner / Day Comment ?? */
[data-theme="light"] .void-banner,
[data-theme="light"] #void-day-comment {
  background: linear-gradient(135deg, rgba(0,136,170,0.08) 0%, rgba(107,78,230,0.04) 100%);
  border: 1px solid rgba(0,136,170,0.25);
  color: var(--text-secondary);
}

/* ?? Quest items ?? */
[data-theme="light"] .quest-item,
[data-theme="light"] .quest-row,
[data-theme="light"] .task-row,
[data-theme="light"] .time-drop {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .quest-item.done {
  background: rgba(5,150,105,0.08);
  border-color: rgba(5,150,105,0.25);
}
[data-theme="light"] .quest-item.done .quest-check {
  border-color: var(--accent-success);
  color: var(--accent-success);
  background: rgba(5,150,105,0.12);
  box-shadow: 0 0 10px rgba(5,150,105,0.25);
}
[data-theme="light"] .quest-item.failed {
  background: rgba(220,38,38,0.05);
  border-color: rgba(220,38,38,0.2);
}
[data-theme="light"] .quest-replace-btn,
[data-theme="light"] .quest-action-btn {
  border-color: var(--border-medium);
  color: var(--text-secondary);
}

/* ?? Popups / Modals ?? */
[data-theme="light"] .sys-pop-overlay,
[data-theme="light"] .popup-overlay,
[data-theme="light"] .modal-overlay {
  background: var(--overlay-scrim);
  backdrop-filter: blur(8px);
}
[data-theme="light"] .sys-pop,
[data-theme="light"] .popup-box,
[data-theme="light"] .modal-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
[data-theme="light"] .sys-pop-title,
[data-theme="light"] .popup-title { color: var(--text-primary); }
[data-theme="light"] .sys-pop-body,
[data-theme="light"] .popup-body { color: var(--text-secondary); }

/* ?? Toasts ?? */
[data-theme="light"] #toast-container .ts-item,
[data-theme="light"] .toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  backdrop-filter: blur(14px);
}

/* ?? Stats grid ?? */
[data-theme="light"] .stats-grid .stat-box,
[data-theme="light"] .stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
[data-theme="light"] .stats-grid .stat-box:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-cyan);
}

/* ?? Leaderboard ?? */
[data-theme="light"] #lb-list > div {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* ?? Sleep / Splash ?? */
[data-theme="light"] #sleep-screen {
  background: linear-gradient(180deg, #f0f2f5 0%, #e2e5e9 100%);
  color: var(--text-secondary);
}
[data-theme="light"] .sleep-title { color: var(--text-primary); opacity: 0.85; }
[data-theme="light"] .sleep-icon {
  color: var(--accent-primary);
  text-shadow: 0 0 20px rgba(0,136,170,0.3);
}
/* Anciens overrides light du splash retir?s */

/* ?? Cheat panel ?? */
[data-theme="light"] #cheat-panel {
  background: rgba(217,119,6,0.06);
  border: 1px dashed rgba(217,119,6,0.35);
  color: var(--text-tertiary);
}

/* ?? Home cards ?? */
[data-theme="light"] .home-card-hero,
[data-theme="light"] .home-card-med,
[data-theme="light"] .home-card-dnj,
[data-theme="light"] .home-card-raid-new,
[data-theme="light"] .home-tri-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* ?? Void chat ?? */
[data-theme="light"] .void-chat-wrap { background: var(--bg-secondary); border-color: var(--border-subtle); }
[data-theme="light"] .void-chat-header { color: var(--text-primary); }
[data-theme="light"] .void-chat-id { color: var(--accent-secondary); }
[data-theme="light"] .void-chat-name { color: var(--text-primary); }
[data-theme="light"] .void-chat-status { color: var(--accent-success); }
[data-theme="light"] .void-msg-void {
  background: rgba(107,78,230,0.06);
  border: 1px solid rgba(107,78,230,0.2);
  color: var(--text-primary);
}
[data-theme="light"] .void-msg-void-label { color: var(--accent-secondary); }
[data-theme="light"] .void-msg-user {
  background: var(--accent-primary);
  color: #fff;
}
[data-theme="light"] .void-chat-send {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

/* ?? Corps de texte body en light ?? */
[data-theme="light"] body,
[data-theme="light"] html { color: var(--text-secondary); }

/* Compat ancienne classe body.theme-light (overrides existants ? gard?s pour r?trocompat) */
body.theme-light {
  background: var(--bg-primary) !important;
  color: var(--text-primary);
}

/* ???????????????????????????????????????????????????????????????????????????
   LIGHT THEME ? V3 ? OVERRIDE AGRESSIF (deep ink palette)
   ---------------------------------------------------------------------------
   Objectif : neutraliser TOUS les rgba(63,231,255,...), rgba(255,255,255,...)
   et autres rgba hardcod?s du CSS dark qui bleed en th?me clair.
   On utilise des s?lecteurs sp?cifiques + !important pour battre les r?gles
   inline de la feuille principale.
   ??????????????????????????????????????????????????????????????????????????? */

/* ?? Body / HTML / fond papier ?? */
html[data-theme="light"],
html[data-theme="light"] body {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] body {
  background-image:
    linear-gradient(rgba(11,18,32,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,0.025) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
}

/* Particules / scanlines de l'ancien splash retir?es */

/* ?? Focus ring (?tait cyan) ?? */
[data-theme="light"] :focus-visible {
  outline: 2px solid var(--accent-primary) !important;
  outline-offset: 2px;
}

/* ?? Selection ?? */
[data-theme="light"] ::selection { background: rgba(11,61,145,0.18); color: var(--text-primary); }

/* ??????????????????????? CARDS & FRAMES ??????????????????????? */
[data-theme="light"] .card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary);
  box-shadow: var(--glass-shadow) !important;
}
/* Coins en L des cards : ink navy au lieu du cyan */
[data-theme="light"] .card::before {
  border-top-color: var(--accent-primary) !important;
  border-left-color: var(--accent-primary) !important;
  box-shadow: -1px -1px 8px rgba(11,61,145,0.18) !important;
}
[data-theme="light"] .card::after {
  border-bottom-color: var(--accent-primary) !important;
  border-right-color: var(--accent-primary) !important;
  box-shadow: 1px 1px 8px rgba(11,61,145,0.18) !important;
}
[data-theme="light"] .card-line {
  background: linear-gradient(90deg, rgba(11,18,32,0.22), transparent) !important;
}

/* ??????????????????????? TYPO / TITRES ??????????????????????? */
[data-theme="light"] .tab-title { color: var(--text-tertiary) !important; }
[data-theme="light"] .card-title { color: var(--t2) !important; }
[data-theme="light"] .onboard-name { color: var(--text-primary) !important; }

/* ??????????????????????? TIME BLOCKS / TIMELINE ??????????????????????? */
[data-theme="light"] .time-line {
  background: linear-gradient(90deg, rgba(11,18,32,0.18), transparent) !important;
}
[data-theme="light"] .time-drop {
  background: var(--bg-secondary) !important;
  border-color: var(--border-medium) !important;
}
[data-theme="light"] .time-caret {
  border-color: var(--border-strong) !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] details[open].time-drop .time-caret {
  background: var(--accent-primary) !important;
  color: #fff !important;
  border-color: var(--accent-primary) !important;
}
[data-theme="light"] .void-day-comment {
  color: var(--accent-primary) !important;
  background: rgba(11,61,145,0.05);
  border-radius: 8px;
}

/* ??????????????????????? QUEST ITEMS ??????????????????????? */
[data-theme="light"] .quest-item {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--glass-shadow) !important;
  color: var(--text-primary);
}
/* Coin en L qu?te */
[data-theme="light"] .quest-item::before {
  border-top-color: var(--accent-primary) !important;
  border-left-color: var(--accent-primary) !important;
  opacity: 0.75;
}
[data-theme="light"] .quest-item.done::before {
  border-top-color: var(--accent-success) !important;
  border-left-color: var(--accent-success) !important;
  opacity: 0.6;
}
[data-theme="light"] .quest-item.pending::before {
  background: radial-gradient(circle at 20% 20%, rgba(11,61,145,0.15), rgba(11,61,145,0) 55%) !important;
  border: none !important;
}
[data-theme="light"] .quest-item.done {
  background: rgba(4,120,87,0.05) !important;
  border-color: rgba(4,120,87,0.35) !important;
  box-shadow: 0 0 0 1px rgba(4,120,87,0.12), var(--glass-shadow) !important;
}
[data-theme="light"] .quest-item.failed {
  background: rgba(185,28,28,0.04) !important;
  border-color: rgba(185,28,28,0.25) !important;
  opacity: 0.85;
}
[data-theme="light"] .quest-check {
  border-color: var(--border-strong) !important;
  color: var(--text-tertiary);
}
[data-theme="light"] .quest-item.done .quest-check {
  border-color: var(--accent-success) !important;
  color: var(--accent-success) !important;
  background: rgba(4,120,87,0.12) !important;
  box-shadow: 0 0 10px rgba(4,120,87,0.25) !important;
}
[data-theme="light"] .quest-item.failed .quest-check {
  border-color: var(--accent-danger) !important;
  color: var(--accent-danger) !important;
  background: rgba(185,28,28,0.08) !important;
}
[data-theme="light"] .quest-item.pending .quest-check {
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}
[data-theme="light"] .quest-name { color: var(--text-primary) !important; }
[data-theme="light"] .quest-item.done .quest-name {
  opacity: 0.55;
  text-decoration-color: rgba(11,18,32,0.4) !important;
}
[data-theme="light"] .quest-meta,
[data-theme="light"] .quest-stat { color: var(--text-tertiary) !important; }
[data-theme="light"] .quest-penalty { color: var(--accent-danger) !important; }
[data-theme="light"] .quest-xp-pill {
  color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  background: rgba(11,61,145,0.06) !important;
}
[data-theme="light"] .quest-item.done .quest-xp-pill {
  color: var(--accent-success) !important;
  border-color: var(--accent-success) !important;
  background: rgba(4,120,87,0.06) !important;
}
[data-theme="light"] .quest-item.failed .quest-xp-pill {
  color: var(--accent-danger) !important;
  border-color: var(--accent-danger) !important;
  background: rgba(185,28,28,0.06) !important;
}
[data-theme="light"] .quest-stat-badge {
  color: var(--text-tertiary) !important;
  border-color: var(--border-medium) !important;
}
[data-theme="light"] .quest-pills-row { color: var(--text-tertiary); }
[data-theme="light"] .task-row { color: var(--text-secondary) !important; }
[data-theme="light"] .quest-box {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .quest-k { color: var(--text-secondary) !important; }
[data-theme="light"] .quest-v { color: var(--text-primary) !important; }
[data-theme="light"] .quest-details { border-top-color: var(--border-subtle) !important; }
[data-theme="light"] .quest-replace-btn {
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
  background: var(--bg-secondary) !important;
}
[data-theme="light"] .quest-replace-btn:active {
  background: var(--accent-primary) !important;
  color: #fff !important;
  border-color: var(--accent-primary) !important;
}
[data-theme="light"] .quest-action-btn.q-complete {
  background: rgba(4,120,87,0.08) !important;
  border-color: var(--accent-success) !important;
  color: var(--accent-success) !important;
}
[data-theme="light"] .quest-action-btn.q-complete.active,
[data-theme="light"] .quest-action-btn.q-complete:active {
  background: var(--accent-success) !important;
  color: #fff !important;
  border-color: var(--accent-success) !important;
}
[data-theme="light"] .quest-heart-btn { color: var(--text-tertiary) !important; }
[data-theme="light"] .quest-heart-btn.active {
  color: #ea580c !important;
  filter: drop-shadow(0 0 6px rgba(234,88,12,0.35)) !important;
}
[data-theme="light"] .quest-dislike-btn {
  border-color: var(--accent-danger) !important;
  color: var(--accent-danger) !important;
}
[data-theme="light"] .quest-dislike-btn.active {
  background: var(--accent-danger) !important;
  color: #fff !important;
}

/* ??????????????????????? XP RING / DASHBOARD ??????????????????????? */
[data-theme="light"] .xp-ring .ring-bg { stroke: rgba(11,18,32,0.10) !important; }
[data-theme="light"] .xp-ring .ring-fg { stroke: var(--accent-primary) !important; }
[data-theme="light"] .xp-ring-center .ring-level { color: var(--text-primary) !important; }
[data-theme="light"] .xp-ring-center .ring-rank { color: var(--accent-primary) !important; }
[data-theme="light"] .xp-ring-center .ring-xp { color: var(--text-secondary) !important; }
[data-theme="light"] .xp-ring-center .ring-day { color: var(--accent-primary) !important; }

/* ??????????????????????? STATS / BILAN ??????????????????????? */
[data-theme="light"] .stat-card,
[data-theme="light"] .bilan-stat {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary);
  box-shadow: var(--glass-shadow);
}
[data-theme="light"] .stat-name,
[data-theme="light"] .stat-points-hint,
[data-theme="light"] .ml-label { color: var(--text-tertiary) !important; }
[data-theme="light"] .bilan-title {
  color: var(--accent-primary) !important;
  border-bottom-color: var(--border-medium) !important;
}

/* ??????????????????????? BOUTONS PRIMAIRES & SECONDAIRES ??????????????????????? */
[data-theme="light"] .main-btn,
[data-theme="light"] .onboard-btn,
[data-theme="light"] .param-save-btn,
[data-theme="light"] .inv-btn,
[data-theme="light"] .notif-perm-btn {
  background: var(--accent-primary) !important;
  color: #fff !important;
  border: 1px solid var(--accent-primary) !important;
  box-shadow: 0 2px 8px rgba(11,61,145,0.28) !important;
}
[data-theme="light"] .main-btn:hover,
[data-theme="light"] .onboard-btn:hover,
[data-theme="light"] .param-save-btn:hover,
[data-theme="light"] .notif-perm-btn:hover {
  background: var(--accent-primary-ink) !important;
  box-shadow: 0 4px 12px rgba(11,61,145,0.38) !important;
}
[data-theme="light"] .onboard-btn {
  color: #fff !important;
}
[data-theme="light"] .onboard-btn:disabled {
  opacity: 0.4;
  box-shadow: none !important;
}
[data-theme="light"] .inv-btn {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ??????????????????????? ONBOARDING ??????????????????????? */
[data-theme="light"] .onboard-screen {
  background: var(--bg-primary) !important;
}
[data-theme="light"] .onboard-title {
  color: var(--accent-primary) !important;
  text-shadow: none !important;
}
[data-theme="light"] .onboard-name { color: var(--text-primary) !important; }
[data-theme="light"] .onboard-sub { color: var(--text-tertiary) !important; }
[data-theme="light"] .onboard-section-title {
  color: var(--accent-primary) !important;
  border-bottom-color: var(--border-medium) !important;
}
[data-theme="light"] .onboard-label { color: var(--text-secondary) !important; }
[data-theme="light"] .onboard-input {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
  backdrop-filter: none !important;
}
[data-theme="light"] .onboard-input:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(11,61,145,0.12) !important;
}
[data-theme="light"] .ob-diff-btn {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
}
[data-theme="light"] .ob-diff-btn .dl { color: var(--text-tertiary) !important; }
[data-theme="light"] .ob-diff-btn .ds { color: var(--text-muted) !important; }
[data-theme="light"] .ob-diff-btn.sel-deb {
  border-color: var(--accent-success) !important;
  background: rgba(4,120,87,0.08) !important;
}
[data-theme="light"] .ob-diff-btn.sel-deb .dl { color: var(--accent-success) !important; }
[data-theme="light"] .ob-diff-btn.sel-int {
  border-color: var(--accent-primary) !important;
  background: rgba(11,61,145,0.08) !important;
}
[data-theme="light"] .ob-diff-btn.sel-int .dl { color: var(--accent-primary) !important; }
[data-theme="light"] .ob-diff-btn.sel-spt {
  border-color: var(--accent-secondary) !important;
  background: rgba(109,40,217,0.08) !important;
}
[data-theme="light"] .ob-diff-btn.sel-spt .dl { color: var(--accent-secondary) !important; }
[data-theme="light"] .ob-gender-btn {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
}
[data-theme="light"] .ob-gender-btn .gl { color: var(--text-tertiary) !important; }
[data-theme="light"] .ob-gender-btn.sel-homme .gl { color: var(--accent-primary) !important; }
[data-theme="light"] .ob-gender-btn.sel-femme .gl { color: var(--accent-secondary) !important; }
[data-theme="light"] .ob-day {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-tertiary) !important;
}
[data-theme="light"] .ob-day.work {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}
[data-theme="light"] .ob-class-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
}
[data-theme="light"] .ob-class-card.on {
  background: rgba(11,61,145,0.05) !important;
  border-color: var(--accent-primary) !important;
}
[data-theme="light"] .ob-class-name { color: var(--text-primary) !important; }
[data-theme="light"] .ob-class-tag { color: var(--text-tertiary) !important; }
[data-theme="light"] .ob-class-desc { color: var(--text-secondary) !important; }
[data-theme="light"] .tour-bubble {
  background: var(--bg-elevated) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-elevated) !important;
  color: var(--text-primary);
}

/* ??????????????????????? SOCIAL / FRIENDS / CHAT ??????????????????????? */
[data-theme="light"] .social-code-block {
  background: rgba(11,61,145,0.05) !important;
  border-color: var(--border-accent) !important;
}
[data-theme="light"] .social-code-val { color: var(--accent-primary) !important; }
[data-theme="light"] .social-code-copy {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}
[data-theme="light"] .social-add-btn {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .social-add-btn:hover {
  background: rgba(11,61,145,0.05) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}
[data-theme="light"] .social-section-title { color: var(--text-tertiary) !important; }
[data-theme="light"] .friend-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  box-shadow: var(--glass-shadow);
}
[data-theme="light"] .friend-name { color: var(--text-primary) !important; }
[data-theme="light"] .friend-meta { color: var(--text-tertiary) !important; }
[data-theme="light"] .friend-avatar {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .friend-streak.active { color: var(--accent-success) !important; }
[data-theme="light"] .friend-streak.inactive { color: var(--accent-danger) !important; }
[data-theme="light"] .friend-alliance { color: var(--accent-primary) !important; }
[data-theme="light"] .friend-btn {
  background: var(--bg-secondary) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .friend-btn:hover {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .friend-btn.primary {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}
[data-theme="light"] .pending-card {
  background: rgba(11,61,145,0.04) !important;
  border: 1px solid var(--border-accent) !important;
}
[data-theme="light"] .pending-directive { color: var(--text-secondary) !important; }
[data-theme="light"] .social-panel {
  background: rgba(238,241,246,0.98) !important;
}
[data-theme="light"] .social-panel-header {
  border-bottom-color: var(--border-subtle) !important;
}
[data-theme="light"] .social-panel-back { color: var(--text-tertiary) !important; }
[data-theme="light"] .social-panel-title { color: var(--text-primary) !important; }
[data-theme="light"] .social-search-input {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .social-search-input::placeholder { color: var(--text-muted) !important; }
[data-theme="light"] .chat-bubble.sent {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}
[data-theme="light"] .chat-bubble.recv {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .chat-bubble.signal {
  background: rgba(109,40,217,0.08) !important;
  border-color: var(--accent-secondary) !important;
  color: var(--accent-secondary) !important;
}
[data-theme="light"] .chat-time { color: var(--text-muted) !important; }
[data-theme="light"] .chat-input-row {
  background: var(--bg-primary) !important;
  border-top-color: var(--border-subtle) !important;
}
[data-theme="light"] .chat-input {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .chat-send-btn {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}
[data-theme="light"] .signal-chip {
  background: rgba(109,40,217,0.06) !important;
  border-color: var(--accent-secondary) !important;
  color: var(--accent-secondary) !important;
}
[data-theme="light"] .directive-choice {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .directive-choice.sel {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}

/* ??????????????????????? CHALLENGES ??????????????????????? */
[data-theme="light"] .challenge-card {
  background: rgba(161,98,7,0.06) !important;
  border: 1px solid rgba(161,98,7,0.35) !important;
}
[data-theme="light"] .challenge-title { color: var(--accent-gold) !important; }
[data-theme="light"] .challenge-desc { color: var(--text-secondary) !important; }
[data-theme="light"] .challenge-meta { color: var(--text-tertiary) !important; }
[data-theme="light"] .challenge-validate-btn {
  background: var(--accent-success) !important;
  border-color: var(--accent-success) !important;
  color: #fff !important;
}
[data-theme="light"] .challenge-validate-btn:active {
  background: #065f46 !important;
  box-shadow: 0 0 14px rgba(4,120,87,0.35) !important;
}
[data-theme="light"] .challenge-xp-slider { accent-color: var(--accent-gold) !important; }

/* ??????????????????????? NOTIFICATIONS / TOGGLES ??????????????????????? */
[data-theme="light"] .notif-toggle-row { border-bottom-color: var(--border-subtle) !important; }
[data-theme="light"] .notif-toggle-label { color: var(--text-primary) !important; }
[data-theme="light"] .notif-toggle-sub { color: var(--text-tertiary) !important; }
[data-theme="light"] .notif-toggle-sw .slider {
  background: var(--border-medium) !important;
  border-color: var(--border-strong) !important;
}
[data-theme="light"] .notif-toggle-sw .slider::before {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(11,18,32,0.2) !important;
}
[data-theme="light"] .notif-toggle-sw input:checked + .slider {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
}
[data-theme="light"] .notif-toggle-sw input:checked + .slider::before { background: #fff !important; }
[data-theme="light"] .notif-main-toggle { border-bottom-color: var(--border-medium) !important; }
[data-theme="light"] .notif-perm-ok { color: var(--accent-success) !important; }

/* ??????????????????????? VOID CHAT + VOID WORD ??????????????????????? */
[data-theme="light"] .void-word-card::after {
  background: radial-gradient(circle, rgba(11,61,145,0.08) 0%, transparent 70%) !important;
}
[data-theme="light"] .void-word-sigil { opacity: 0.9; }
[data-theme="light"] .void-word-title { color: var(--accent-primary) !important; }
[data-theme="light"] .void-word-tag { color: var(--text-muted) !important; }
[data-theme="light"] .void-word-msg { color: var(--text-secondary) !important; }

/* ??????????????????????? PROFIL / IDENTITY ??????????????????????? */
[data-theme="light"] .prof-identity-box {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
}
[data-theme="light"] .prof-identity-label { color: var(--text-tertiary) !important; }
[data-theme="light"] .prof-identity-val { color: var(--text-primary) !important; }
[data-theme="light"] .prof-identity-sub { color: var(--text-muted) !important; }

/* ??????????????????????? PHOTO PROOF ??????????????????????? */
[data-theme="light"] .photo-proof-wrap { border-top-color: var(--border-subtle) !important; }
[data-theme="light"] .photo-proof-title { color: var(--text-tertiary) !important; }
[data-theme="light"] .photo-proof-status { color: var(--text-muted) !important; }
[data-theme="light"] .photo-proof-status.ok { color: var(--accent-success) !important; }
[data-theme="light"] .photo-proof-tile {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
}

/* ??????????????????????? SKILLS ??????????????????????? */
[data-theme="light"] .skill-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary);
}
[data-theme="light"] .skill-desc { color: var(--text-secondary) !important; }

/* ??????????????????????? POPUP SYSTEM / MODALS ??????????????????????? */
[data-theme="light"] .sys-pop-overlay {
  background: rgba(20,25,40,0.55) !important;
  backdrop-filter: blur(8px) !important;
}
[data-theme="light"] .sys-pop {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 12px 48px rgba(11,18,32,0.18) !important;
  color: var(--text-primary);
}
[data-theme="light"] .sys-pop-head { border-bottom-color: var(--border-subtle) !important; }
[data-theme="light"] .sys-pop-title {
  color: var(--accent-primary) !important;
  font-family: 'Orbitron', sans-serif !important;
}
[data-theme="light"] .sys-pop-close {
  background: var(--bg-tertiary) !important;
  border-color: var(--accent-danger) !important;
  color: var(--accent-danger) !important;
}
[data-theme="light"] .sys-pop-body { color: var(--text-secondary) !important; }

/* ??????????????????????? TOASTS ??????????????????????? */
[data-theme="light"] #toast-container .ts-item,
[data-theme="light"] .toast {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-elevated) !important;
  backdrop-filter: none !important;
}

/* ??????????????????????? LEADERBOARD ??????????????????????? */
[data-theme="light"] #lb-list > div {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ??????????????????????? SLEEP / SPLASH ??????????????????????? */
[data-theme="light"] #sleep-screen {
  background: linear-gradient(180deg, #eef1f6 0%, #dde3ec 100%) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .sleep-title { color: var(--text-primary) !important; opacity: 0.95; }
[data-theme="light"] .sleep-icon {
  color: var(--accent-primary) !important;
  text-shadow: 0 0 16px rgba(11,61,145,0.25) !important;
}
[data-theme="light"] .sleep-adj {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .sleep-adj:hover { background: var(--bg-tertiary) !important; }
/* Autres overrides light du splash retir?s */

/* ??????????????????????? KEYBOARD HELP ??????????????????????? */
[data-theme="light"] .keyboard-help-overlay { background: rgba(20,25,40,0.60) !important; }
[data-theme="light"] .keyboard-help-box {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 12px 48px rgba(11,18,32,0.18) !important;
}
[data-theme="light"] .keyboard-help-box h2 { color: var(--accent-primary) !important; }
[data-theme="light"] .keyboard-help-box td { border-bottom-color: var(--border-subtle) !important; }
[data-theme="light"] .keyboard-help-box kbd {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--accent-primary) !important;
}
[data-theme="light"] .keyboard-help-close {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}
[data-theme="light"] .keyboard-help-close:hover { background: var(--accent-primary-ink) !important; }

/* ??????????????????????? RITUEL (fullscreen overlay) ???????????????????????
   L'overlay rituel reste stylis? dans un sens ink/violet en light. */
[data-theme="light"] .rituel-overlay {
  background:
    radial-gradient(ellipse at center, rgba(109,40,217,0.14) 0%, rgba(109,40,217,0) 65%),
    rgba(20,25,40,0.25) !important;
}
[data-theme="light"] .rituel-overlay::before {
  background:
    repeating-linear-gradient(0deg,
      rgba(11,61,145,0.05) 0px,
      rgba(11,61,145,0.05) 1px,
      transparent 1px,
      transparent 3px) !important;
}
[data-theme="light"] .rituel-inner {
  color: var(--accent-primary) !important;
  text-shadow: 0 0 20px rgba(11,61,145,0.60), 0 0 40px rgba(11,61,145,0.25) !important;
}
[data-theme="light"] .rituel-title { color: var(--accent-primary) !important; }
[data-theme="light"] .rituel-sub { color: var(--text-secondary) !important; }
[data-theme="light"] .rituel-xp {
  border-color: var(--accent-success) !important;
  color: var(--accent-success) !important;
  text-shadow: 0 0 10px rgba(4,120,87,0.35) !important;
  background: rgba(4,120,87,0.08) !important;
}

/* ??????????????????????? CORRUPTION ??????????????????????? */
[data-theme="light"] body.corruption-lvl-1::before,
[data-theme="light"] body.corruption-lvl-2::before {
  background:
    repeating-linear-gradient(0deg,
      rgba(109,40,217,0.10) 0px,
      rgba(109,40,217,0.10) 1px,
      transparent 1px,
      transparent 3px) !important;
  mix-blend-mode: multiply !important;
}
[data-theme="light"] body.corruption-lvl-1 h1,
[data-theme="light"] body.corruption-lvl-1 h2,
[data-theme="light"] body.corruption-lvl-1 .xp-bar-label,
[data-theme="light"] body.corruption-lvl-1 .quest-name,
[data-theme="light"] body.corruption-lvl-1 .profile-pseudo {
  text-shadow: 1px 0 0 rgba(185,28,28,0.45), -1px 0 0 rgba(109,40,217,0.45) !important;
}
[data-theme="light"] body.corruption-lvl-2 h1,
[data-theme="light"] body.corruption-lvl-2 h2,
[data-theme="light"] body.corruption-lvl-2 .xp-bar-label,
[data-theme="light"] body.corruption-lvl-2 .quest-name,
[data-theme="light"] body.corruption-lvl-2 .profile-pseudo {
  text-shadow: 2px 0 0 rgba(185,28,28,0.60), -2px 0 0 rgba(109,40,217,0.60) !important;
}

/* ??????????????????????? VOID SCAN ??????????????????????? */
[data-theme="light"] .void-scan-overlay { background: rgba(20,25,40,0.55) !important; }
[data-theme="light"] .void-scan-box {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 12px 48px rgba(11,18,32,0.18) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .void-scan-tag { color: var(--accent-primary) !important; }
[data-theme="light"] .void-scan-photo { border-color: var(--border-medium) !important; }
[data-theme="light"] .void-badge-line {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .void-badge-line.void-badge-ok {
  background: rgba(4,120,87,0.08) !important;
  border-color: var(--accent-success) !important;
  color: var(--accent-success) !important;
}
[data-theme="light"] .void-badge-line.void-badge-ko {
  background: rgba(185,28,28,0.06) !important;
  border-color: var(--accent-danger) !important;
  color: var(--accent-danger) !important;
}
[data-theme="light"] .void-scan-score { border-color: var(--border-subtle) !important; }
[data-theme="light"] .void-scan-score-num { color: var(--text-tertiary) !important; }
[data-theme="light"] .void-scan-score-hex {
  color: var(--accent-primary) !important;
  text-shadow: 0 0 10px rgba(11,61,145,0.30) !important;
}
[data-theme="light"] .void-scan-message { color: var(--accent-secondary) !important; }
[data-theme="light"] .void-scan-desc { color: var(--text-secondary) !important; }
[data-theme="light"] .void-scan-next {
  background: rgba(11,61,145,0.06) !important;
  border-color: var(--border-accent) !important;
}
[data-theme="light"] .void-scan-next-tag { color: var(--accent-primary) !important; }
[data-theme="light"] .void-scan-next-text { color: var(--text-primary) !important; }
[data-theme="light"] .void-scan-xp {
  background: rgba(4,120,87,0.08) !important;
  border-color: var(--accent-success) !important;
  color: var(--accent-success) !important;
  text-shadow: 0 0 6px rgba(4,120,87,0.25) !important;
}
[data-theme="light"] .void-scan-trifecta {
  background: rgba(109,40,217,0.06) !important;
  border-color: var(--accent-secondary) !important;
  color: var(--accent-secondary) !important;
}
[data-theme="light"] .void-scan-close {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}
[data-theme="light"] .void-scan-close:hover { background: var(--accent-primary-ink) !important; }

/* ??????????????????????? DUEL PANEL ??????????????????????? */
[data-theme="light"] .duel-panel { background: rgba(20,25,40,0.55) !important; }
[data-theme="light"] .duel-panel-box {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--accent-danger) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 12px 48px rgba(11,18,32,0.18), inset 0 0 20px rgba(185,28,28,0.05) !important;
}
[data-theme="light"] .duel-panel-tag { color: var(--accent-danger) !important; }
[data-theme="light"] .duel-panel-target { color: var(--text-primary) !important; }
[data-theme="light"] .duel-panel-target span {
  background: rgba(11,61,145,0.08) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}
[data-theme="light"] .duel-section-title { color: var(--text-tertiary) !important; }
[data-theme="light"] .duel-type-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
}
[data-theme="light"] .duel-type-card:hover {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-strong) !important;
}
[data-theme="light"] .duel-type-card.sel {
  background: rgba(185,28,28,0.06) !important;
  border-color: var(--accent-danger) !important;
  box-shadow: 0 0 12px rgba(185,28,28,0.22) !important;
}
[data-theme="light"] .duel-type-name { color: var(--text-primary) !important; }
[data-theme="light"] .duel-type-desc { color: var(--text-tertiary) !important; }
[data-theme="light"] .duel-target-input {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .duel-target-input:focus {
  border-color: var(--accent-danger) !important;
  background: rgba(185,28,28,0.04) !important;
}
[data-theme="light"] .duel-duration {
  background: rgba(11,61,145,0.06) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent-primary) !important;
}
[data-theme="light"] .duel-btn-no {
  background: var(--bg-secondary) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .duel-btn-no:hover { background: var(--bg-tertiary) !important; }
[data-theme="light"] .duel-btn-yes {
  background: var(--accent-danger) !important;
  border-color: var(--accent-danger) !important;
  color: #fff !important;
}
[data-theme="light"] .duel-btn-yes:hover {
  background: #991b1b !important;
  box-shadow: 0 0 14px rgba(185,28,28,0.35) !important;
}
[data-theme="light"] .duel-incoming-detail { border-bottom-color: var(--border-subtle) !important; }
[data-theme="light"] .duel-incoming-detail span { color: var(--text-tertiary) !important; }
[data-theme="light"] .duel-incoming-detail strong { color: var(--text-primary) !important; }

/* ??????????????????????? CHEAT PANEL (dev) ??????????????????????? */
[data-theme="light"] #cheat-panel {
  background: rgba(180,83,9,0.06) !important;
  border: 1px dashed rgba(180,83,9,0.4) !important;
  color: var(--text-tertiary) !important;
}

/* ??????????????????????? HOME CARDS ??????????????????????? */
[data-theme="light"] .home-card-hero,
[data-theme="light"] .home-card-med,
[data-theme="light"] .home-card-dnj,
[data-theme="light"] .home-card-raid-new,
[data-theme="light"] .home-tri-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  box-shadow: var(--glass-shadow) !important;
  color: var(--text-primary);
}

/* ??????????????????????? VOID CHAT (page) ??????????????????????? */
[data-theme="light"] .void-chat-wrap {
  background: var(--bg-secondary) !important;
  border-color: var(--border-medium) !important;
}
[data-theme="light"] .void-chat-header { color: var(--text-primary) !important; }
[data-theme="light"] .void-chat-id { color: var(--accent-secondary) !important; }
[data-theme="light"] .void-chat-name { color: var(--text-primary) !important; }
[data-theme="light"] .void-chat-status { color: var(--accent-success) !important; }
[data-theme="light"] .void-msg-void {
  background: rgba(109,40,217,0.06) !important;
  border: 1px solid var(--accent-secondary) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .void-msg-void-label { color: var(--accent-secondary) !important; }
[data-theme="light"] .void-msg-user {
  background: var(--accent-primary) !important;
  color: #fff !important;
}
[data-theme="light"] .void-chat-send {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}

/* ??????????????????????? SCROLLBAR ??????????????????????? */
[data-theme="light"] *::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="light"] *::-webkit-scrollbar-track { background: transparent; }
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: rgba(11,18,32,0.18);
  border-radius: 5px;
}
[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: rgba(11,18,32,0.32); }

/* ??????????????????????? DIVERS ? muted text g?n?riques ??????????????????????? */
[data-theme="light"] .notif-toggle-sub,
[data-theme="light"] .chat-time { color: var(--text-muted) !important; }


/* ============================================================
 * Doc E ? ?tape 4 ? Modal raccourcis clavier
 * ============================================================ */
.keyboard-help-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.7);
  z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:fadeIn 160ms ease-out;
}
.keyboard-help-box{
  background:#0a0d13;
  border:1px solid rgba(63,231,255,0.3);
  border-radius:12px;
  padding:24px 28px;
  max-width:460px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
  box-shadow:0 10px 40px rgba(0,0,0,0.7);
  color:rgba(255,255,255,0.92);
}
.keyboard-help-box h2{
  margin:0 0 16px 0;
  font-size:18px;
  color:rgba(63,231,255,0.95);
}
.keyboard-help-box table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.keyboard-help-box td{
  padding:8px 4px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  vertical-align:middle;
}
.keyboard-help-box td:first-child{
  width:40%;
  white-space:nowrap;
}
.keyboard-help-box kbd{
  display:inline-block;
  padding:2px 7px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;
  color:rgba(63,231,255,0.95);
}
.keyboard-help-close{
  margin-top:18px;
  width:100%;
  padding:10px;
  background:rgba(63,231,255,0.08);
  border:1px solid rgba(63,231,255,0.35);
  border-radius:8px;
  color:rgba(63,231,255,0.95);
  cursor:pointer;
  font-size:14px;
}
.keyboard-help-close:hover{
  background:rgba(63,231,255,0.18);
}
body.theme-light .keyboard-help-box{
  background:#ffffff;
  color:var(--text-primary);
  border-color:rgba(0,0,0,0.1);
}
body.theme-light .keyboard-help-box kbd{
  background:rgba(0,0,0,0.05);
  border-color:rgba(0,0,0,0.1);
  color:#0099b8;
}

/* ============================================================
 * Doc E ? ?tape 3 ? Print CSS
 * Bilan imprimable (quand l'utilisateur imprime sa progression)
 * ============================================================ */
@media print{
  /* Fond blanc, texte noir, ?viter les coupures moches */
  html, body{
    background:#ffffff !important;
    color:#000 !important;
    font-size:12pt;
  }
  /* Masquer tout ce qui n'a pas de sens sur papier */
  .void-banner,
  .tab-bar, .tabbar, .bottom-nav,
  .fab, .floating-btn,
  .popup-overlay, .modal, .toast,
  .keyboard-help-overlay,
  .alliance-confirm-overlay,
  .offline-banner,
  nav, header .nav,
  button, .btn,
  [data-no-print]{
    display:none !important;
  }
  /* Cartes : plates, sans ombre ni n?on */
  .card, .profile-panel, .quest-item, .quest-row, .task-row{
    background:#fff !important;
    color:#000 !important;
    border:1px solid #333 !important;
    box-shadow:none !important;
    break-inside:avoid;
    page-break-inside:avoid;
    margin-bottom:10pt;
    padding:8pt 10pt;
  }
  h1,h2,h3,h4{ color:#000 !important; page-break-after:avoid; }
  a{ color:#000 !important; text-decoration:underline; }
  /* Conteneurs en pleine largeur pour ?conomiser l'encre */
  .app-shell, main, #app, .content{
    background:#fff !important;
    padding:0 !important;
    max-width:none !important;
  }
}

/* ============================================================
 * MomentManager ? Void Rituel
 * Overlay plein ?cran ? la 3?me qu?te valid?e (4s)
 * ============================================================ */
.rituel-overlay{
  position:fixed;
  inset:0;
  z-index:9800;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at center, rgba(63,231,255,0.18) 0%, rgba(63,231,255,0) 65%),
    rgba(5,7,10,0.35);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  animation:rituelOverlayIn 320ms ease-out forwards, rituelOverlayPulse 3.4s ease-in-out 0.3s 1;
  opacity:0;
}
.rituel-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg,
      rgba(63,231,255,0.04) 0px,
      rgba(63,231,255,0.04) 1px,
      transparent 1px,
      transparent 3px);
  animation:rituelScan 1.2s linear infinite;
  opacity:0.5;
}
.rituel-inner{
  position:relative;
  text-align:center;
  color:rgba(63,231,255,0.95);
  font-family:'Share Tech Mono',monospace;
  letter-spacing:0.25em;
  text-shadow:0 0 30px rgba(63,231,255,0.85), 0 0 60px rgba(63,231,255,0.4);
  animation:rituelTextIn 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
  transform:scale(0.7);
  opacity:0;
}
.rituel-symbol{
  font-size:42px;
  line-height:1;
  margin:6px 0;
  animation:rituelSymbolFloat 2.2s ease-in-out infinite;
}
.rituel-symbol:last-of-type{ animation-delay:-1.1s; }
.rituel-title{
  font-size:22px;
  font-weight:700;
  letter-spacing:0.32em;
  margin:18px 0 10px;
  color:rgba(63,231,255,1);
}
.rituel-sub{
  font-size:11px;
  letter-spacing:0.22em;
  color:rgba(255,255,255,0.7);
  text-transform:uppercase;
  margin-top:6px;
}
.rituel-xp{
  margin-top:18px;
  padding:6px 14px;
  display:inline-block;
  border:1px solid rgba(63,231,255,0.45);
  border-radius:20px;
  font-size:11px;
  letter-spacing:0.18em;
  color:rgba(0,255,136,0.9);
  text-shadow:0 0 14px rgba(0,255,136,0.5);
  background:rgba(0,255,136,0.06);
}
.rituel-overlay.rituel-fade-out{
  animation:rituelOverlayOut 300ms ease-out forwards !important;
}
@keyframes rituelOverlayIn{
  0%   { opacity:0; }
  100% { opacity:1; }
}
@keyframes rituelOverlayOut{
  0%   { opacity:1; }
  100% { opacity:0; }
}
@keyframes rituelOverlayPulse{
  0%,100% { background:
      radial-gradient(ellipse at center, rgba(63,231,255,0.14) 0%, rgba(63,231,255,0) 65%),
      rgba(5,7,10,0.35); }
  50%     { background:
      radial-gradient(ellipse at center, rgba(63,231,255,0.28) 0%, rgba(63,231,255,0) 70%),
      rgba(5,7,10,0.5); }
}
@keyframes rituelTextIn{
  0%   { opacity:0; transform:scale(0.65); filter:blur(6px); }
  60%  { opacity:1; transform:scale(1.08); filter:blur(0); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes rituelSymbolFloat{
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%     { transform:translateY(-4px) rotate(30deg); }
}
@keyframes rituelScan{
  0%   { background-position:0 0; }
  100% { background-position:0 12px; }
}
/* Respect reduced-motion : on garde l'overlay mais sans animations lourdes */
@media (prefers-reduced-motion: reduce){
  .rituel-overlay,
  .rituel-overlay::before,
  .rituel-inner,
  .rituel-symbol{
    animation:none !important;
  }
  .rituel-overlay{ opacity:1; }
  .rituel-inner{ opacity:1; transform:none; }
}

/* ============================================================
 * Void Corruption ? Effet d'absence (2+ jours sans qu?te)
 * ============================================================ */
/* Overlay scanlines commun aux deux niveaux */
body.corruption-lvl-1::before,
body.corruption-lvl-2::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9700;
  background:
    repeating-linear-gradient(0deg,
      rgba(190,150,255,0.08) 0px,
      rgba(190,150,255,0.08) 1px,
      transparent 1px,
      transparent 3px);
  mix-blend-mode:overlay;
  animation:corruptionScan 8s linear infinite;
}
body.corruption-lvl-1::before{ opacity:0.15; }
body.corruption-lvl-2::before{ opacity:0.25; }

/* Glitch du texte principal (sur titres, stats, etc.) */
body.corruption-lvl-1 h1,
body.corruption-lvl-1 h2,
body.corruption-lvl-1 .xp-bar-label,
body.corruption-lvl-1 .quest-name,
body.corruption-lvl-1 .profile-pseudo{
  text-shadow:1px 0 0 rgba(255,80,120,0.4), -1px 0 0 rgba(63,231,255,0.4);
  animation:corruptionGlitchSoft 4s steps(4,end) infinite;
}
body.corruption-lvl-2 h1,
body.corruption-lvl-2 h2,
body.corruption-lvl-2 .xp-bar-label,
body.corruption-lvl-2 .quest-name,
body.corruption-lvl-2 .profile-pseudo{
  text-shadow:2px 0 0 rgba(255,80,120,0.55), -2px 0 0 rgba(63,231,255,0.55);
  animation:corruptionGlitchHard 2.4s steps(6,end) infinite;
}

/* Niveau 2 : d?saturation + tremblement au hover des boutons */
body.corruption-lvl-2{ filter:saturate(0.7); }
body.corruption-lvl-2 button:hover,
body.corruption-lvl-2 .btn:hover,
body.corruption-lvl-2 .quest-action-btn:hover{
  animation:corruptionShake 280ms ease-in-out;
}

@keyframes corruptionScan{
  0%   { background-position:0 0; }
  100% { background-position:0 60px; }
}
@keyframes corruptionGlitchSoft{
  0%,92%,100% { transform:translate(0,0); }
  94%         { transform:translate(-0.5px,0); }
  96%         { transform:translate(0.5px,0); }
  98%         { transform:translate(-0.3px,0); }
}
@keyframes corruptionGlitchHard{
  0%,85%,100% { transform:translate(0,0); }
  88%         { transform:translate(-1px,1px); }
  91%         { transform:translate(1px,-1px); }
  94%         { transform:translate(-0.5px,0); }
  97%         { transform:translate(0.5px,0); }
}
@keyframes corruptionShake{
  0%,100% { transform:translate(0,0); }
  25%     { transform:translate(-1px,0); }
  50%     { transform:translate(1px,0); }
  75%     { transform:translate(-0.5px,0); }
}
/* Respect reduced-motion : on garde la teinte mais on coupe les glitches */
@media (prefers-reduced-motion: reduce){
  body.corruption-lvl-1 h1,
  body.corruption-lvl-1 h2,
  body.corruption-lvl-2 h1,
  body.corruption-lvl-2 h2,
  body.corruption-lvl-1::before,
  body.corruption-lvl-2::before,
  body.corruption-lvl-2 button:hover{
    animation:none !important;
  }
}

/* ============================================================
 * Void Scan ? Popup d'analyse nutritionnelle (3 badges)
 * ============================================================ */
.void-scan-overlay{
  position:fixed; inset:0;
  z-index:9600;
  background:rgba(0,0,0,0.72);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  animation:voidScanFadeIn 220ms ease-out;
}
.void-scan-box{
  background:#0a0d13;
  border:1px solid rgba(63,231,255,0.3);
  border-radius:14px;
  padding:22px 20px 18px;
  max-width:360px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  box-shadow:0 10px 40px rgba(0,0,0,0.7), 0 0 60px rgba(63,231,255,0.15) inset;
  color:rgba(255,255,255,0.92);
  text-align:center;
}
.void-scan-tag{
  font-family:'Share Tech Mono',monospace;
  font-size:10px;
  letter-spacing:0.22em;
  color:rgba(63,231,255,0.8);
  margin-bottom:14px;
}
.void-scan-photo{
  display:block;
  width:100%;
  max-height:160px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,0.08);
}
.void-scan-badges{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:16px;
}
.void-badge-line{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  letter-spacing:0.14em;
}
.void-badge-line.void-badge-ok{
  border-color:rgba(0,255,136,0.35);
  background:rgba(0,255,136,0.05);
  color:rgba(0,255,136,0.92);
}
.void-badge-line.void-badge-ko{
  border-color:rgba(255,80,120,0.25);
  background:rgba(255,80,120,0.04);
  color:rgba(255,80,120,0.7);
}
.void-badge-label{ flex:1; text-align:left; }
.void-badge-mark{ font-size:16px; font-weight:700; }
.void-scan-score{
  margin:14px 0 10px;
  padding:10px;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.void-scan-score-num{
  font-family:'Share Tech Mono',monospace;
  font-size:13px;
  letter-spacing:0.16em;
  color:rgba(255,255,255,0.6);
  margin-bottom:6px;
}
.void-scan-score-hex{
  font-size:24px;
  color:rgba(63,231,255,0.95);
  letter-spacing:0.1em;
  text-shadow:0 0 14px rgba(63,231,255,0.5);
  min-height:28px;
}
.void-scan-message{
  font-family:'Share Tech Mono',monospace;
  font-size:11px;
  letter-spacing:0.14em;
  color:rgba(190,150,255,0.85);
  text-transform:uppercase;
  margin:12px 0 10px;
}
.void-scan-desc{
  font-size:13px;
  color:rgba(255,255,255,0.75);
  font-style:italic;
  line-height:1.5;
  margin-bottom:14px;
}
.void-scan-next{
  text-align:left;
  background:rgba(63,231,255,0.04);
  border:1px solid rgba(63,231,255,0.15);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:14px;
}
.void-scan-next-tag{
  font-family:'Share Tech Mono',monospace;
  font-size:9px;
  letter-spacing:0.2em;
  color:rgba(63,231,255,0.75);
  margin-bottom:5px;
}
.void-scan-next-text{
  font-size:13px;
  color:rgba(255,255,255,0.85);
  line-height:1.45;
}
.void-scan-xp{
  display:inline-block;
  padding:6px 16px;
  border-radius:20px;
  background:rgba(0,255,136,0.08);
  border:1px solid rgba(0,255,136,0.35);
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  letter-spacing:0.18em;
  color:rgba(0,255,136,0.95);
  text-shadow:0 0 10px rgba(0,255,136,0.4);
  margin-bottom:14px;
}
.void-scan-trifecta{
  margin-bottom:14px;
  padding:8px 12px;
  border-radius:8px;
  background:rgba(190,150,255,0.08);
  border:1px solid rgba(190,150,255,0.35);
  font-family:'Share Tech Mono',monospace;
  font-size:10px;
  letter-spacing:0.18em;
  color:rgba(190,150,255,0.95);
}
.void-scan-close{
  width:100%;
  padding:12px;
  background:rgba(63,231,255,0.08);
  border:1px solid rgba(63,231,255,0.35);
  border-radius:10px;
  color:rgba(63,231,255,0.95);
  font-family:'Share Tech Mono',monospace;
  font-size:11px;
  letter-spacing:0.16em;
  cursor:pointer;
}
.void-scan-close:hover{ background:rgba(63,231,255,0.18); }
@keyframes voidScanFadeIn{ from{opacity:0;} to{opacity:1;} }
body.theme-light .void-scan-box{
  background:#ffffff; color:#0f1218;
  border-color:rgba(0,0,0,0.12);
}
body.theme-light .void-scan-desc{ color:rgba(0,0,0,0.7); }

/* ============================================================
 * DUEL ? Feature 4 (Doc Moment)
 * Panel de lancement + popup incoming
 * ============================================================ */

.duel-panel{
  position:fixed; inset:0; z-index:9000;
  background:rgba(3,7,15,0.86);
  backdrop-filter:blur(6px) saturate(1.2);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:duelPanelIn .2s ease-out;
}
@keyframes duelPanelIn{ from{opacity:0;} to{opacity:1;} }

.duel-panel-box{
  width:100%; max-width:420px;
  background:linear-gradient(180deg, rgba(12,18,30,0.98) 0%, rgba(8,14,24,0.98) 100%);
  border:1px solid rgba(255,74,74,0.35);
  border-radius:18px;
  padding:22px 20px 18px;
  box-shadow:0 0 40px rgba(255,74,74,0.15), inset 0 0 24px rgba(255,74,74,0.06);
  color:#e6edf7;
  font-family:'Inter',system-ui,sans-serif;
  animation:duelBoxIn .25s cubic-bezier(.2,.9,.3,1);
}
@keyframes duelBoxIn{
  from{ opacity:0; transform:translateY(12px) scale(0.97); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}

.duel-panel-tag{
  font-family:'Share Tech Mono',monospace;
  font-size:11px; letter-spacing:0.22em;
  color:rgba(255,74,74,0.92);
  text-align:center;
  margin-bottom:10px;
  text-transform:uppercase;
}
.duel-panel-target{
  text-align:center;
  font-size:17px; font-weight:600;
  margin-bottom:18px;
  color:#f2f5fa;
}
.duel-panel-target span{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  font-family:'Share Tech Mono',monospace;
  font-size:11px;
  letter-spacing:0.15em;
  background:rgba(63,231,255,0.12);
  border:1px solid rgba(63,231,255,0.35);
  border-radius:6px;
  color:rgba(63,231,255,0.95);
}

.duel-section-title{
  font-family:'Share Tech Mono',monospace;
  font-size:10px; letter-spacing:0.18em;
  color:rgba(230,237,247,0.55);
  margin:14px 0 8px;
  text-transform:uppercase;
}

.duel-type-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
.duel-type-card{
  padding:10px 8px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  text-align:center;
  cursor:pointer;
  transition:all .15s ease;
}
.duel-type-card:hover{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.15); }
.duel-type-card.sel{
  background:rgba(255,74,74,0.12);
  border-color:rgba(255,74,74,0.55);
  box-shadow:0 0 12px rgba(255,74,74,0.2);
}
.duel-type-name{
  font-size:13px; font-weight:600;
  color:#f2f5fa;
  margin-bottom:4px;
}
.duel-type-desc{
  font-size:10px;
  color:rgba(230,237,247,0.6);
  line-height:1.3;
}

.duel-target-input{
  width:100%;
  padding:10px 12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  color:#f2f5fa;
  font-family:'Share Tech Mono',monospace;
  font-size:16px; text-align:center;
  letter-spacing:0.1em;
  box-sizing:border-box;
}
.duel-target-input:focus{
  outline:none;
  border-color:rgba(255,74,74,0.55);
  background:rgba(255,74,74,0.06);
}

.duel-duration{
  padding:10px 12px;
  background:rgba(63,231,255,0.06);
  border:1px solid rgba(63,231,255,0.2);
  border-radius:10px;
  color:rgba(63,231,255,0.9);
  font-family:'Share Tech Mono',monospace;
  font-size:12px; letter-spacing:0.14em;
  text-align:center;
}

.duel-panel-actions{
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.duel-btn{
  padding:12px;
  border-radius:10px;
  font-family:'Share Tech Mono',monospace;
  font-size:12px; letter-spacing:0.16em;
  border:1px solid;
  cursor:pointer;
  text-transform:uppercase;
  transition:all .15s ease;
}
.duel-btn-no{
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.12);
  color:rgba(230,237,247,0.75);
}
.duel-btn-no:hover{ background:rgba(255,255,255,0.08); }
.duel-btn-yes{
  background:linear-gradient(180deg, rgba(255,74,74,0.18), rgba(255,74,74,0.08));
  border-color:rgba(255,74,74,0.55);
  color:rgba(255,180,180,0.98);
}
.duel-btn-yes:hover{
  background:linear-gradient(180deg, rgba(255,74,74,0.28), rgba(255,74,74,0.14));
  box-shadow:0 0 16px rgba(255,74,74,0.3);
}

/* Popup incoming */
.duel-incoming-detail{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0;
  border-bottom:1px dashed rgba(255,255,255,0.08);
  font-size:13px;
}
.duel-incoming-detail:last-of-type{ border-bottom:none; }
.duel-incoming-detail span{
  font-family:'Share Tech Mono',monospace;
  font-size:11px; letter-spacing:0.14em;
  color:rgba(230,237,247,0.55);
  text-transform:uppercase;
}
.duel-incoming-detail strong{
  font-weight:600;
  color:#f2f5fa;
}

/* Th?me clair */
body.theme-light .duel-panel-box{
  background:#ffffff;
  color:#0f1218;
  border-color:rgba(255,74,74,0.35);
}
body.theme-light .duel-panel-target{ color:#0f1218; }
body.theme-light .duel-type-card{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.08);
}
body.theme-light .duel-type-name{ color:#0f1218; }
body.theme-light .duel-type-desc{ color:rgba(15,18,24,0.6); }
body.theme-light .duel-target-input{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.12);
  color:#0f1218;
}
body.theme-light .duel-incoming-detail strong{ color:#0f1218; }
body.theme-light .void-scan-next-text{ color:rgba(0,0,0,0.8); }

/* ============================================================
 * REFONTE UI ? Design Tokens additifs  (Phase 1.2)
 * Doc: CAHIER_REFONTE_UI ? 2026-04-19
 * ------------------------------------------------------------
 * Strat?gie : ADD-only. Aucun token existant n'est ?cras?.
 * --space-1..7 et --radius-s/m/l restent inchang?s pour
 * ?viter toute r?gression sur les composants existants.
 * ============================================================ */

/* :root bloc 4 supprim? ? remplac? par design-system-v2 */

/* Override couleurs HUD ? Light theme "Deep Ink Paper" */
[data-theme="light"] {
  --cyan:       #0b3d91;
  --cyan-dim:   rgba(11, 61, 145, 0.22);
  --cyan-glow:  rgba(11, 61, 145, 0.35);

  --violet:      #6d28d9;
  --violet-dim:  rgba(109, 40, 217, 0.22);
  --violet-glow: rgba(109, 40, 217, 0.35);

  --rouge:      #b91c1c;
  --rouge-dim:  rgba(185, 28, 28, 0.22);
  --rouge-glow: rgba(185, 28, 28, 0.35);

  --vert:      #047857;
  --vert-dim:  rgba(4, 120, 87, 0.22);
  --vert-glow: rgba(4, 120, 87, 0.35);

  --shadow-card:      0 4px 20px rgba(11, 22, 45, 0.18);
  --shadow-glow-cyan: 0 0 16px rgba(11, 61, 145, 0.28);
  --shadow-glow-vert: 0 0 16px rgba(4, 120, 87, 0.28);
}

/* ============================================================
 * Composants standardis?s  (Phase 1.3)
 * NE red?finit PAS .meta-pill / .system-label / .toggle-switch
 * (d?j? pr?sents dans le fichier).
 * ============================================================ */

.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-m);
  font-family: var(--font-display);
  font-size: var(--text-m);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.btn-primary {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
  color: #05070a;
  border: 1px solid var(--cyan);
  box-shadow: var(--shadow-glow-cyan);
}
.btn-primary:hover  { transform: translateY(-1px); box-shadow: 0 0 28px var(--cyan-glow); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--cyan-dim);
}
.btn-secondary:hover { background: var(--cyan-dim); border-color: var(--cyan); }

.btn-danger {
  background: transparent;
  color: var(--rouge);
  border: 1px solid var(--rouge-dim);
}
.btn-danger:hover {
  background: var(--rouge-dim);
  border-color: var(--rouge);
  box-shadow: 0 0 16px var(--rouge-glow);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Light theme ? contraste texte boutons */
[data-theme="light"] .btn-primary   { color: #ffffff; }
[data-theme="light"] .btn-secondary { border-color: rgba(11, 61, 145, 0.35); }
[data-theme="light"] .btn-danger    { border-color: rgba(185, 28, 28, 0.35); }

/* Input standard */
.input-standard {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: rgba(5, 7, 10, 0.55);
  border: 1px solid var(--cyan-dim);
  border-radius: var(--radius-m);
  color: var(--text-main, #eaf6ff);
  font-family: var(--font-mono);
  font-size: var(--text-m);
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color var(--transition-fast),
              box-shadow   var(--transition-fast),
              background   var(--transition-fast);
}
.input-standard::placeholder { color: rgba(255, 255, 255, 0.35); letter-spacing: 0.04em; }
.input-standard:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px var(--cyan-dim);
  background: rgba(5, 7, 10, 0.72);
}

[data-theme="light"] .input-standard {
  background: #ffffff;
  border-color: rgba(11, 61, 145, 0.28);
  color: #0b1220;
}
[data-theme="light"] .input-standard::placeholder { color: rgba(11, 22, 45, 0.40); }
[data-theme="light"] .input-standard:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(11, 61, 145, 0.18);
  background: #ffffff;
}

/* ============================================================
 * Animations utilitaires  (Phase 1.4)
 * ============================================================ */

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px var(--cyan-glow); }
  50%      { box-shadow: 0 0 24px var(--cyan-glow), 0 0 48px var(--cyan-dim); }
}
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

@keyframes glitch {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1px, 1px); }
  40%  { transform: translate(1px, -1px); }
  60%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}
.glitch:active { animation: glitch 120ms linear; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp var(--transition-base) ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .pulse-glow,
  .glitch:active,
  .fade-in-up { animation: none !important; }
}

/* ============================================================
 * REFONTE UI ? Classes popups sys-pop  (Phase 3.1)
 * Extraction des styles inline r?p?t?s vers classes r?utilisables.
 * Rendu visuel identique ? l'existant (z?ro r?gression).
 * ============================================================ */

.sys-pop-btn {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius-m);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sys-pop-btn--accept {
  background: rgba(63, 231, 255, 0.06);
  border: 1px solid rgba(63, 231, 255, 0.35);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
}
.sys-pop-btn--accept:hover,
.sys-pop-btn--accept:active {
  background: rgba(63, 231, 255, 0.12);
  border-color: rgba(63, 231, 255, 0.55);
}

.sys-pop-btn--refuse {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
}
.sys-pop-btn--refuse:hover,
.sys-pop-btn--refuse:active {
  background: rgba(255, 255, 255, 0.08);
}

.sys-pop-btn--later {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.sys-pop-btn--later:hover,
.sys-pop-btn--later:active {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

/* Groupe d'actions en ligne (remplace style="display:flex;gap:10px;padding:...") */
.sys-pop-actions {
  display: flex;
  gap: 10px;
  padding: 8px 16px 16px;
}
.sys-pop-actions--flush { padding: 0 16px 16px; }

/* Titre avec font mono (remplace style="font-family:'Share Tech Mono',...;letter-spacing:0.18em;") */
.sys-pop-title--mono {
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.18em;
}

/* Textarea standard de popup (remplace gros style inline du #fb-comment) */
.sys-pop-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-m);
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  font-family: inherit;
  padding: 10px;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sys-pop-textarea:focus {
  border-color: rgba(63, 231, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

/* ----- Light theme overrides pour sys-pop-btn-* ----- */
[data-theme="light"] .sys-pop-btn--accept {
  background: rgba(11, 61, 145, 0.08);
  border-color: rgba(11, 61, 145, 0.35);
  color: #0b1220;
}
[data-theme="light"] .sys-pop-btn--accept:hover,
[data-theme="light"] .sys-pop-btn--accept:active {
  background: rgba(11, 61, 145, 0.15);
  border-color: rgba(11, 61, 145, 0.55);
}
[data-theme="light"] .sys-pop-btn--refuse {
  background: rgba(11, 22, 45, 0.04);
  border-color: rgba(11, 22, 45, 0.35);
  color: #0b1220;
}
[data-theme="light"] .sys-pop-btn--refuse:hover,
[data-theme="light"] .sys-pop-btn--refuse:active {
  background: rgba(11, 22, 45, 0.08);
}
[data-theme="light"] .sys-pop-btn--later {
  background: rgba(11, 22, 45, 0.04);
  border-color: rgba(11, 22, 45, 0.20);
  color: rgba(11, 22, 45, 0.55);
}
[data-theme="light"] .sys-pop-btn--later:hover,
[data-theme="light"] .sys-pop-btn--later:active {
  background: rgba(11, 22, 45, 0.08);
  color: rgba(11, 22, 45, 0.80);
}
[data-theme="light"] .sys-pop-textarea {
  background: #ffffff;
  border-color: rgba(11, 22, 45, 0.14);
  color: #0b1220;
}
[data-theme="light"] .sys-pop-textarea:focus {
  border-color: rgba(11, 61, 145, 0.5);
  background: #ffffff;
}

/* ?toiles de feedback (remplace style="font-size:28px;cursor:pointer;...") */
.fb-star {
  font-size: 28px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}
.fb-star:hover { transform: scale(1.1); }
.fb-star.active { color: var(--cyan); }

/* Ligne d'?toiles centr?e */
.fb-stars-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px 4px;
}

/* Zone textarea wrapper */
.sys-pop-textarea-wrap { padding: 8px 16px 4px; }

/* Actions en colonne (remplace style="display:flex;flex-direction:column;gap:10px;padding:0 16px 16px;") */
.sys-pop-actions--col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 16px;
}

/* Variante "gate" pour bouton install (rendu actuel pr?serv?) */
.sys-pop-btn--gate-install {
  padding: 14px;
  background: rgba(63, 231, 255, 0.06);
  border: 1px solid rgba(63, 231, 255, 0.35);
  border-radius: var(--radius-m);
  color: rgba(63, 231, 255, 0.9);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sys-pop-btn--gate-install:hover {
  background: rgba(63, 231, 255, 0.12);
  border-color: rgba(63, 231, 255, 0.55);
}
.sys-pop-btn--gate-skip {
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-m);
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease;
}
.sys-pop-btn--gate-skip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

/* Body install avec font Manrope */
.install-body {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-line;
}

/* Light theme */
[data-theme="light"] .sys-pop-btn--gate-install {
  background: rgba(11, 61, 145, 0.08);
  border-color: rgba(11, 61, 145, 0.35);
  color: var(--accent-primary, #0b3d91);
}
[data-theme="light"] .sys-pop-btn--gate-install:hover {
  background: rgba(11, 61, 145, 0.15);
  border-color: rgba(11, 61, 145, 0.55);
}
[data-theme="light"] .sys-pop-btn--gate-skip {
  background: rgba(11, 22, 45, 0.04);
  border-color: rgba(11, 22, 45, 0.14);
  color: rgba(11, 22, 45, 0.55);
}
[data-theme="light"] .sys-pop-btn--gate-skip:hover {
  background: rgba(11, 22, 45, 0.08);
  color: rgba(11, 22, 45, 0.80);
}
[data-theme="light"] .fb-star.active { color: var(--accent-primary, #0b3d91); }

/* ============================================================
 * REFONTE UI ? Phase 4 UPLIFT VISUEL (dark)
 * Changements visibles sans r?gression fonctionnelle.
 * ============================================================ */

/* ---- Cards : radius + ombre port?e + hover lift ---- */
[data-theme="dark"] .card,
:root:not([data-theme="light"]) .card {
  border-radius: 14px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(63, 231, 255, 0.04) inset;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .card::before,
:root:not([data-theme="light"]) .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(63, 231, 255, 0.25) 20%,
    rgba(63, 231, 255, 0.45) 50%,
    rgba(63, 231, 255, 0.25) 80%,
    transparent 100%);
  pointer-events: none;
  opacity: 0.7;
}
[data-theme="dark"] .card:hover,
:root:not([data-theme="light"]) .card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(63, 231, 255, 0.08);
}

/* ---- Card titles : Orbitron-like letter-spacing + n?on soft ---- */
[data-theme="dark"] .card-title,
:root:not([data-theme="light"]) .card-title {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(63, 231, 255, 0.12);
}

/* ---- System labels : glow renforc? ---- */
[data-theme="dark"] .system-label,
:root:not([data-theme="light"]) .system-label {
  text-shadow:
    0 0 6px rgba(63, 231, 255, 0.55),
    0 0 18px rgba(63, 231, 255, 0.25);
  font-family: var(--font-display);
}

/* ---- Meta pills : ombre int?rieure + l?ger glow ---- */
[data-theme="dark"] .meta-pill,
:root:not([data-theme="light"]) .meta-pill {
  box-shadow:
    inset 0 0 12px rgba(63, 231, 255, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.35);
  border-radius: 999px;
}

/* ---- Popups : fade-in-up ? l'ouverture ---- */
.sys-pop-overlay.open .sys-pop,
.sys-pop-overlay[style*="display: flex"] .sys-pop,
.sys-pop-overlay[style*="display:flex"] .sys-pop {
  animation: fadeInUp 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---- Bouton sys-pop--accept : glow anim? au hover ---- */
.sys-pop-btn--accept {
  position: relative;
  overflow: hidden;
}
.sys-pop-btn--accept::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(63, 231, 255, 0.18),
    transparent);
  transition: left 450ms ease;
  pointer-events: none;
}
.sys-pop-btn--accept:hover::after {
  left: 100%;
}

/* ---- Bottom nav : glow d'?l?vation + indicateur actif ---- */
[data-theme="dark"] .bottom-nav,
:root:not([data-theme="light"]) .bottom-nav {
  box-shadow:
    0 -4px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(63, 231, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .bottom-nav .nav-item.active,
[data-theme="dark"] .bottom-nav .nav-item[aria-current="page"],
:root:not([data-theme="light"]) .bottom-nav .nav-item.active,
:root:not([data-theme="light"]) .bottom-nav .nav-item[aria-current="page"] {
  filter: drop-shadow(0 0 6px rgba(63, 231, 255, 0.55));
}

/* ---- sys-pop container : ombre + border-glow ---- */
[data-theme="dark"] .sys-pop,
:root:not([data-theme="light"]) .sys-pop {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(63, 231, 255, 0.06),
    inset 0 0 0 1px rgba(63, 231, 255, 0.08);
}

/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .sys-pop-overlay.open .sys-pop,
  .sys-pop-overlay[style*="display: flex"] .sys-pop,
  .sys-pop-overlay[style*="display:flex"] .sys-pop { animation: none !important; }
}

/* ???????????????????????????????????????????????????????????????????????????
   REFONTE v141 ? Dominante cyan ? Fond noir ? Glass cards ? L-brackets blancs
   ???????????????????????????????????????????????????????????????????????????
   Th?me unifi? appliqu? ? TOUTES les tabs : Onboard / Home / Qu?tes / Fragment
   / Stats / Bilan / Profil / Social / Inventaire / Param?tres / Void.
   Approche additive : overrides en fin de feuille pour ne rien casser ailleurs.
   ??????????????????????????????????????????????????????????????????????????? */

/* :root bloc 5 supprim? ? remplac? par design-system-v2 */

/* ? Halo cyan radial subtil (s'ajoute ? la grille du design system) ? */
body::before {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(63,231,255,0.06) 0%, transparent 55%) !important;
}

/* ??? GLASS CARD UNIVERSEL ???
   Cible TOUTES les cards principales. L-brackets blancs subtils. */
.card,
.home-card-hero,
.home-card-med,
.home-card-dnj,
.home-card-raid-new,
.home-tri-card,
.stat-card,
.bilan-stat,
.bilan-stat2,
.bilan-day-card,
.bilan-void-card,
.bilan-hist-card,
.bilan-history-item,
.bilan-chart-wrap,
.skill-card,
.quest-item,
.friend-card,
.alliance-card,
.inv-item,
.badge-card,
.param-card,
.fragment-card,
.void-card,
.moment-card,
.onboard-card,
.onboard-panel {
  background: var(--bg-card) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  position: relative;
  background-image: none !important;
}

/* ??? COINS SUBTILS (L-brackets) ? Style maquette ???
   Petits accents d?coratifs : 8px, 1.5px stroke, color?s par type de card.
   Top-left + bottom-right, positionn?s l?g?rement en debord. */
.card,
.home-card-hero,
.home-card-med,
.home-card-dnj,
.home-card-raid-new,
.home-tri-card,
.stat-card,
.bilan-stat,
.bilan-stat2,
.skill-card,
.friend-card,
.alliance-card,
.inv-item,
.badge-card,
.param-card,
.fragment-card,
.void-card,
.moment-card,
.onboard-card {
  position: relative;
}
.card::before,
.home-card-hero::before,
.home-card-med::before,
.home-card-dnj::before,
.home-card-raid-new::before,
.home-tri-card::before,
.stat-card::before,
.bilan-stat::before,
.skill-card::before,
.friend-card::before,
.alliance-card::before,
.inv-item::before,
.badge-card::before,
.param-card::before,
.fragment-card::before,
.void-card::before,
.moment-card::before,
.onboard-card::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  width: 8px !important;
  height: 8px !important;
  border-top: 1.5px solid rgba(63, 231, 255, 0.55) !important;
  border-left: 1.5px solid rgba(63, 231, 255, 0.55) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 2px 0 0 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 2;
}
.card::after,
.home-card-hero::after,
.home-card-med::after,
.home-card-dnj::after,
.home-card-raid-new::after,
.home-tri-card::after,
.stat-card::after,
.bilan-stat::after,
.skill-card::after,
.friend-card::after,
.alliance-card::after,
.inv-item::after,
.badge-card::after,
.param-card::after,
.fragment-card::after,
.void-card::after,
.moment-card::after,
.onboard-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  top: auto !important;
  left: auto !important;
  width: 8px !important;
  height: 8px !important;
  border-bottom: 1.5px solid rgba(63, 231, 255, 0.55) !important;
  border-right: 1.5px solid rgba(63, 231, 255, 0.55) !important;
  border-top: none !important;
  border-left: none !important;
  border-radius: 0 0 2px 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 2;
}

/* Coins VERTS sur cards success (streak / rang / bilan) */
.home-card-med.profil-card::before,
.home-card-med.profil-card::after,
.home-card-med[onclick*="bilan"]::before,
.home-card-med[onclick*="bilan"]::after,
.bilan-stat::before,
.bilan-stat::after {
  border-color: rgba(0, 255, 136, 0.65) !important;
}

/* Coins ROUGES sur card Raid (danger) */
.home-card-raid-new::before,
.home-card-raid-new::after {
  border-color: rgba(255, 70, 110, 0.70) !important;
}

/* ??? VARIANT PRIMAIRE (style bouton ACTIVER) ???
   Cards cl?s mises en avant : cyan border + glow + coins cyan plus marqu?s. */
.card.is-primary,
.card.primary,
.home-card-hero,
.onboard-cta-card {
  background: rgba(63, 231, 255, 0.06) !important;
  border: 1px solid var(--accent-blue) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 24px rgba(63, 231, 255, 0.18),
    inset 0 0 18px rgba(63, 231, 255, 0.05) !important;
  background-image: none !important;
}
.card.is-primary::before,
.card.is-primary::after,
.card.primary::before,
.card.primary::after,
.home-card-hero::before,
.home-card-hero::after,
.onboard-cta-card::before,
.onboard-cta-card::after {
  width: 10px !important;
  height: 10px !important;
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 6px rgba(63, 231, 255, 0.45) !important;
}

/* ??? QUEST-ITEM ? Override surface ? Garde les ?tats done/failed ??? */
.quest-item {
  background: rgba(10,10,12,0.55) !important;
  border: 1px solid rgba(63,231,255,0.10) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
/* Don/fait = vert, on garde. Failed = rouge, on garde. (r?gles existantes L1132+). */

/* ??? PROGRESS BARS ? Cyan pur (pas de gradient violet) ??? */
.quest-bar-fill,
.xp-gauge-fill,
.bilan-bar-fill,
.stat-fill,
.bilan-hour-fill,
.hp-bar-fill,
.mp-bar-fill {
  background: linear-gradient(90deg, var(--accent-blue), #80f0ff) !important;
  box-shadow: 0 0 12px var(--accent-dim) !important;
}
.quest-bar-bg,
.xp-gauge-bg,
.stat-bar,
.hp-bar-bg,
.mp-bar-bg {
  background: rgba(63, 231, 255, 0.06) !important;
  border: 1px solid rgba(63, 231, 255, 0.10) !important;
}

/* ??? TYPO ? Orbitron pour titres, Share Tech Mono pour labels ??? */
.home-card-hero-label,
.home-card-med-label,
.home-card-dnj-label,
.stat-name,
.bilan-title,
.bilan-stat-label,
.param-section-title,
.onboard-label,
.system-label,
.card-label {
  font-family: 'Share Tech Mono', 'Courier New', monospace !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(63, 231, 255, 0.55) !important;
  font-size: 11px !important;
}
.home-card-hero-num,
.home-card-med-num,
.home-card-dnj-num,
.stat-value,
.bilan-stat-val,
.bilan-stat2-val,
.xp-gauge-value,
.hero-title,
.onboard-hero-title {
  font-family: 'Orbitron', 'Share Tech Mono', sans-serif !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ??? BOUTONS PRIMAIRES ? Style ACTIVER ??? */
.param-save-btn,
.ritual-add-btn,
.btn-primary,
.cta-primary,
.onboard-cta,
.quest-add-btn {
  background: rgba(63, 231, 255, 0.08) !important;
  border: 1px solid var(--accent-blue) !important;
  color: rgba(63, 231, 255, 0.95) !important;
  font-family: 'Orbitron', 'Share Tech Mono', sans-serif !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 0 14px rgba(63, 231, 255, 0.20),
    inset 0 0 10px rgba(63, 231, 255, 0.04) !important;
  transition: all 0.18s ease !important;
}
.param-save-btn:hover,
.ritual-add-btn:hover,
.btn-primary:hover,
.cta-primary:hover,
.onboard-cta:hover,
.quest-add-btn:hover {
  background: rgba(63, 231, 255, 0.14) !important;
  box-shadow:
    0 0 22px rgba(63, 231, 255, 0.35),
    inset 0 0 14px rgba(63, 231, 255, 0.08) !important;
}
.param-save-btn:active,
.ritual-add-btn:active,
.btn-primary:active,
.cta-primary:active,
.onboard-cta:active,
.quest-add-btn:active {
  transform: scale(0.99);
}

/* ??? NAV LAT?RALE / BOTTOM NAV ? Coh?rence cyan ??? */
.side-nav,
.bottom-nav {
  background: rgba(5, 5, 7, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.side-item.active,
.nav-item.active,
.nav-item[aria-current="page"] {
  color: var(--accent-blue) !important;
  background: rgba(63, 231, 255, 0.06) !important;
}

/* ??? HOME HERO ? Retire la grille sur la Qu?tes du Jour hero ??? */
.home-card-hero {
  background-image: none !important;
  background-size: auto !important;
}

/* ??? MINI-HEADER ? Label cyan discret ??? */
.mini-header,
.mini-banner { background: transparent !important; }
.mini-title {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Orbitron', 'Share Tech Mono', sans-serif !important;
}
.mini-sub {
  color: rgba(63, 231, 255, 0.55) !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* ??? POPUPS / MODALS ? Glass coh?rent ??? */
.sys-pop,
.popup-panel,
.modal-panel,
.sheet-panel,
.action-menu {
  background: rgba(10, 10, 12, 0.88) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.70),
    0 0 40px rgba(63, 231, 255, 0.06),
    inset 0 0 0 1px rgba(63, 231, 255, 0.08) !important;
}

/* ??? ONBOARD ? Surface sobre + titres Orbitron ??? */
.onboard-root,
.onboard-screen,
#onboard-container {
  background: #000000 !important;
}
.onboard-title,
.onboard-step-title {
  font-family: 'Orbitron', 'Share Tech Mono', sans-serif !important;
  color: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: 0.06em !important;
}
.onboard-sub,
.onboard-desc {
  color: rgba(255, 255, 255, 0.70) !important;
  font-family: 'Inter', 'Share Tech Mono', sans-serif !important;
}

/* ??? PARAM?TRES ? Sections en glass card ??? */
.param-section,
.settings-section {
  background: var(--bg-card) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  position: relative;
}
.param-section-title {
  color: var(--accent-blue) !important;
  border-bottom: 1px solid rgba(63, 231, 255, 0.20) !important;
}

/* ??? FRAGMENT TAB ? Harmonisation ??? */
.fragment-panel,
.fragment-body,
.fragment-grid {
  background: transparent !important;
}

/* ??? VOID TAB ? Reste violet pour l'identit? mais coh?rent ??? */
.void-panel { background: transparent !important; }

/* ??? REDUCED MOTION ??? */
@media (prefers-reduced-motion: reduce) {
  .card, .home-card-hero, .quest-item, .stat-card, .param-section {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* ??? SPLASH ? Ancien bloc d'overrides retir?.
   Le nouveau splash (design ob-screen-1) est enti?rement stylis? inline
   dans index.html et initialis? par initSplash() dans onboard.js. ??? */

/* ??? ONBOARD BUTTON ? Style ACTIVER (cyan primary) ???
   Remplace le gradient cyan?violet par le style primary unifi?. */
.onboard-btn {
  background: rgba(63, 231, 255, 0.08) !important;
  border: 1px solid #3fe7ff !important;
  color: #3fe7ff !important;
  font-family: 'Orbitron', 'Share Tech Mono', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  padding: 16px !important;
  box-shadow:
    0 0 24px rgba(63, 231, 255, 0.18),
    inset 0 0 18px rgba(63, 231, 255, 0.05) !important;
  position: relative;
  transition: all 0.25s ease !important;
}
.onboard-btn:not(:disabled):hover {
  background: rgba(63, 231, 255, 0.14) !important;
  box-shadow:
    0 0 34px rgba(63, 231, 255, 0.35),
    inset 0 0 20px rgba(63, 231, 255, 0.08) !important;
}
.onboard-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.onboard-btn::before,
.onboard-btn::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Inputs onboard coh?rents (fond glass sobre) */
.onboard-input,
.param-input {
  background: rgba(10, 10, 12, 0.55) !important;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(63, 231, 255, 0.14) !important;
  border-radius: 6px !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.onboard-input:focus,
.param-input:focus {
  border-color: rgba(63, 231, 255, 0.55) !important;
  box-shadow: 0 0 12px rgba(63, 231, 255, 0.18) !important;
  outline: none !important;
}
.onboard-input::placeholder,
.param-input::placeholder {
  color: rgba(255, 255, 255, 0.30) !important;
}

/* Titre onboard : Orbitron blanc, sobre */
.onboard-title {
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: 0.22em !important;
}

/* ???????????????????????????????????????????????????????????????????
   QU?TES TAB ? Uniformisation design system (maquette)
   ??????????????????????????????????????????????????????????????????? */

/* ?? Phase accord?ons (time-drop) ? m?me glass card que les cards home ?? */
details.time-drop {
  background: rgba(10, 10, 12, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  box-shadow: none !important;
  padding: 14px 16px 16px !important;
}
details[open].time-drop {
  border-color: rgba(63, 231, 255, 0.15) !important;
}

/* ?? Header de phase : label mono 11px + dot color? ?? */
.time-label {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.70) !important;
  animation: none !important;
}
.time-dot {
  width: 7px !important;
  height: 7px !important;
  flex-shrink: 0 !important;
}

/* Compteur "0/3" ? droite du header */
.time-count,
details.time-drop .time-header .time-right {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 255, 255, 0.38) !important;
}

/* ?? Quest items ? Hi?rarchie claire : titre ? XP ? bouton ?? */
.quest-item {
  background: rgba(8, 10, 14, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: none !important;
}
.quest-item.done {
  background: rgba(0, 255, 136, 0.03) !important;
  border-color: rgba(0, 255, 136, 0.14) !important;
  opacity: 0.75 !important;
}
.quest-item.failed {
  background: rgba(255, 48, 96, 0.04) !important;
  border-color: rgba(255, 48, 96, 0.16) !important;
  opacity: 0.70 !important;
}

/* ?? Nom de qu?te : title case + taille lisible ?? */
.quest-name {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
}
.quest-item.done .quest-name {
  color: rgba(255, 255, 255, 0.50) !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(255, 255, 255, 0.25) !important;
}

/* ?? Pills XP / stat : coh?rence tokens ?? */
.quest-xp-pill {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  color: rgba(63, 231, 255, 0.90) !important;
  border: 1px solid rgba(63, 231, 255, 0.35) !important;
  background: rgba(63, 231, 255, 0.06) !important;
  text-shadow: none !important;
}
.quest-item.done .quest-xp-pill {
  color: rgba(0, 255, 136, 0.85) !important;
  border-color: rgba(0, 255, 136, 0.35) !important;
  background: rgba(0, 255, 136, 0.06) !important;
}
.quest-item.failed .quest-xp-pill {
  color: rgba(255, 70, 110, 0.85) !important;
  border-color: rgba(255, 70, 110, 0.35) !important;
  background: rgba(255, 70, 110, 0.06) !important;
}

/* ?? Bouton "Terminer" / "? Termin?" ? style ACTIVER ?? */
.quest-action-btn.q-complete {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  background: rgba(0, 255, 136, 0.05) !important;
  border: 1px solid rgba(0, 255, 136, 0.45) !important;
  color: rgba(0, 255, 136, 0.80) !important;
  border-radius: 6px !important;
  padding: 10px !important;
  box-shadow: none !important;
}
.quest-action-btn.q-complete.active {
  background: rgba(0, 255, 136, 0.10) !important;
  border-color: rgba(0, 255, 136, 0.70) !important;
  color: rgba(0, 255, 136, 0.95) !important;
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.18) !important;
}

/* ?? Bouton ANALYSER (nutrition) ? style secondaire ?? */
.dnj-action-btn {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  background: rgba(63, 231, 255, 0.05) !important;
  border: 1px solid rgba(63, 231, 255, 0.28) !important;
  color: rgba(63, 231, 255, 0.80) !important;
  border-radius: 6px !important;
}

/* ?? Bouton VALIDER LA JOURN?E ?? */
#finalize-btn,
.finalize-btn,
button[onclick*="finalizeDay"] {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  background: rgba(63, 231, 255, 0.06) !important;
  border: 1px solid var(--accent-blue) !important;
  color: rgba(63, 231, 255, 0.90) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 20px rgba(63, 231, 255, 0.14), inset 0 0 12px rgba(63, 231, 255, 0.04) !important;
}

/* ?? Rituels section dans qu?tes ?? */
#custom-rituals-section,
.rituals-section {
  background: rgba(10, 10, 12, 0.55) !important;
  border: 1px solid rgba(63, 231, 255, 0.14) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ?? Stat badge (Force, Endurance?) dans pills ?? */
.quest-stat-badge {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ?? D?tails qu?te (objectif, tasks) ?? */
.quest-details,
.quest-rpg {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
}
.quest-k {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  color: rgba(255, 255, 255, 0.35) !important;
  text-transform: uppercase !important;
}
.quest-v {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
}

/* ?? XP counter en bas ?? */
#day-xp {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* ?? CLEANUP ? Particules alien cach?es (pas dans la maquette) ?? */

/* Profil-card : retire la bordure rouge (legacy), unifie sur la bordure blanche */
.home-card-med.profil-card {
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.home-card-med.profil-card:active {
  background: rgba(63, 231, 255, 0.06) !important;
}

/* ???????????????????????????????????????????????????????????????????
   TOUS ONGLETS ? Design system unifi? (maquette)
   Bilan ? Stats ? Profil ? Social ? Inventaire ? Badges ? Param?tres ? Fragment
   ??????????????????????????????????????????????????????????????????? */

/* ??? TOKEN COMMUN ? Toutes les "section cards" ??????????????????? */
.bilan-stat,
.bilan-stat2,
.bilan-day-card,
.bilan-void-card,
.bilan-hist-card,
.bilan-history-item,
.bilan-chart-wrap,
.stat-card,
.skill-card,
.friend-card,
.alliance-card,
.inv-item,
.badge-card,
.param-card,
.param-section,
.settings-section,
.fragment-card,
.void-card,
.moment-card,
.onboard-card {
  background: rgba(10, 10, 12, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  box-shadow: none !important;
}

/* ??? BILAN TAB ???????????????????????????????????????????????????? */
/* Titres de section */
.bilan-title {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(63, 231, 255, 0.70) !important;
  border-bottom: 1px solid rgba(63, 231, 255, 0.12) !important;
  padding-bottom: 8px !important;
}
/* Valeurs stats bilan */
.bilan-stat-val,
.bilan-stat2-val {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
.bilan-stat-label,
.bilan-stat2-label {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-top: 5px !important;
}
/* Chips de p?riode */
.bilan-chip {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border-radius: 4px !important;
}
.bilan-chip.active {
  border-color: var(--accent-blue) !important;
  background: rgba(63, 231, 255, 0.08) !important;
  color: rgba(63, 231, 255, 0.95) !important;
}
/* Barres graphiques */
.bilan-bar {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.bilan-bar.sel {
  border-color: rgba(63, 231, 255, 0.35) !important;
  background: rgba(63, 231, 255, 0.06) !important;
}
.bilan-bar-fill {
  background: linear-gradient(180deg, #3fe7ff, rgba(63,231,255,0.55)) !important;
  box-shadow: none !important;
}
/* Historique */
.bilan-history-header {
  font-family: 'Inter', sans-serif !important;
}
.bilan-history-date {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 600 !important;
}
.bilan-history-xp {
  font-family: 'Orbitron', monospace !important;
  font-size: 13px !important;
  color: rgba(63, 231, 255, 0.90) !important;
}
.bilan-history-quests {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ??? STATS TAB ???????????????????????????????????????????????????? */
.stat-card {
  padding: 16px 18px !important;
}
.stat-name {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(63, 231, 255, 0.65) !important;
  margin-bottom: 10px !important;
}
.stat-value {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
.stat-bar {
  background: rgba(63, 231, 255, 0.06) !important;
  border: 1px solid rgba(63, 231, 255, 0.10) !important;
  border-radius: 3px !important;
  height: 5px !important;
}
.stat-fill {
  background: linear-gradient(90deg, #3fe7ff, #80f0ff) !important;
  box-shadow: 0 0 10px rgba(63, 231, 255, 0.40) !important;
  border-radius: 3px !important;
}

/* ??? PROFIL TAB ??????????????????????????????????????????????????? */
.skill-card {
  padding: 14px 16px !important;
}
.skill-card .skill-name,
.skill-name {
  font-family: 'Orbitron', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: 0.06em !important;
}
.skill-desc,
.skill-card .skill-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.4 !important;
}
.skill-level-badge,
.skill-badge {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: rgba(63, 231, 255, 0.80) !important;
  border: 1px solid rgba(63, 231, 255, 0.28) !important;
  background: rgba(63, 231, 255, 0.06) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
}
/* Section profil (transformation etc.) */
.profil-section-title,
.profil-card-label {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(63, 231, 255, 0.65) !important;
}
.profil-value,
.profil-big-num {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ??? SOCIAL TAB ??????????????????????????????????????????????????? */
.friend-card {
  padding: 14px 16px !important;
}
.friend-card-head {
  margin-bottom: 8px !important;
}
.friend-name {
  font-family: 'Orbitron', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: 0.04em !important;
}
.friend-rank {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  color: rgba(63, 231, 255, 0.65) !important;
}
.alliance-card {
  padding: 14px 16px !important;
}

/* ??? INVENTAIRE TAB ??????????????????????????????????????????????? */
.inv-item {
  padding: 14px 16px !important;
  border-radius: 8px !important;
}
.inv-item-name {
  font-family: 'Orbitron', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.inv-item-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.52) !important;
  line-height: 1.4 !important;
}
.inv-item-badge,
.inv-rarity {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(63, 231, 255, 0.30) !important;
  background: rgba(63, 231, 255, 0.06) !important;
  color: rgba(63, 231, 255, 0.80) !important;
}

/* ??? BADGES TAB ??????????????????????????????????????????????????? */
.badge-card {
  padding: 14px 16px !important;
  text-align: center !important;
}
.badge-card .badge-name,
.badge-name {
  font-family: 'Orbitron', monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  letter-spacing: 0.05em !important;
}
.badge-card .badge-desc,
.badge-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.48) !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
}
/* Badges verrouill?s ? plus sombre */
.badge-card.locked,
.badge-card[data-locked] {
  opacity: 0.45 !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* ??? PARAM?TRES TAB ??????????????????????????????????????????????? */
.param-section,
.settings-section {
  padding: 16px 18px !important;
}
.param-section-title,
.settings-section-title {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(63, 231, 255, 0.70) !important;
  border-bottom: 1px solid rgba(63, 231, 255, 0.12) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
}
.param-label,
.settings-label {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-transform: uppercase !important;
}
.param-input,
.settings-input {
  background: rgba(10, 10, 12, 0.55) !important;
  border: 1px solid rgba(63, 231, 255, 0.18) !important;
  border-radius: 6px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
}
.param-input:focus,
.settings-input:focus {
  border-color: rgba(63, 231, 255, 0.55) !important;
  box-shadow: 0 0 12px rgba(63, 231, 255, 0.15) !important;
  outline: none !important;
}
/* Toggles / switches */
.param-toggle,
.settings-toggle {
  accent-color: #3fe7ff !important;
}
/* Description sous un param */
.param-desc,
.settings-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.42) !important;
  line-height: 1.45 !important;
}
/* Bouton save principal */
.param-save-btn {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  background: rgba(63, 231, 255, 0.06) !important;
  border: 1px solid var(--accent-blue) !important;
  color: rgba(63, 231, 255, 0.90) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 18px rgba(63, 231, 255, 0.14) !important;
}
/* Boutons danger dans params */
.param-danger-btn,
button[onclick*="reset"],
button[onclick*="delete"] {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  background: rgba(255, 48, 96, 0.06) !important;
  border: 1px solid rgba(255, 48, 96, 0.40) !important;
  color: rgba(255, 70, 110, 0.85) !important;
  border-radius: 6px !important;
}

/* ??? FRAGMENT TAB ????????????????????????????????????????????????? */
.fragment-card {
  padding: 16px 18px !important;
  border-color: rgba(155, 92, 255, 0.18) !important;
  background: rgba(155, 92, 255, 0.04) !important;
}
.fragment-title,
.fragment-label {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(155, 92, 255, 0.75) !important;
}
.fragment-text,
.fragment-body-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.80) !important;
  line-height: 1.6 !important;
}

/* ??? VOID TAB ????????????????????????????????????????????????????? */
.void-msg-void-label {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(155, 92, 255, 0.65) !important;
  margin-bottom: 6px !important;
}
.void-msg-void-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.6 !important;
}
.void-msg-user {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: rgba(63, 231, 255, 0.88) !important;
}
.void-chat-textarea {
  background: rgba(10, 10, 12, 0.70) !important;
  border: 1px solid rgba(155, 92, 255, 0.25) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.90) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
}
.void-chat-textarea:focus {
  border-color: rgba(155, 92, 255, 0.55) !important;
  box-shadow: 0 0 12px rgba(155, 92, 255, 0.15) !important;
  outline: none !important;
}
.void-chat-send {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  background: rgba(155, 92, 255, 0.08) !important;
  border: 1px solid rgba(155, 92, 255, 0.40) !important;
  color: rgba(155, 92, 255, 0.90) !important;
  border-radius: 6px !important;
}

/* ??? BILAN ? Coins SUCCESS sur les stats ??????????????????????????? */
.bilan-stat::before, .bilan-stat::after,
.bilan-stat2::before, .bilan-stat2::after {
  border-color: rgba(0, 255, 136, 0.50) !important;
}

/* ??? FRAGMENT ? Coins VIOLET ??????????????????????????????????????? */
.fragment-card::before, .fragment-card::after {
  border-color: rgba(155, 92, 255, 0.60) !important;
}

/* ??? VOID ? Coins VIOLET ??????????????????????????????????????????? */
.void-card::before, .void-card::after {
  border-color: rgba(155, 92, 255, 0.50) !important;
}

/* ??? FIN REFONTE v141 ??? */

/* ??? ONBOARD GENRE ? Boutons Homme/Femme ??? */
.ob-gender-btn {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.55) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  cursor: pointer;
  padding: 11px !important;
  transition: all 0.2s !important;
}
.ob-gender-btn.sel-homme {
  background: rgba(63,231,255,0.08) !important;
  border-color: rgba(63,231,255,0.55) !important;
  color: rgba(63,231,255,0.95) !important;
  box-shadow: 0 0 12px rgba(63,231,255,0.18) !important;
}
.ob-gender-btn.sel-femme {
  background: rgba(255,92,200,0.08) !important;
  border-color: rgba(255,92,200,0.55) !important;
  color: rgba(255,92,200,0.95) !important;
  box-shadow: 0 0 12px rgba(255,92,200,0.18) !important;
}

/* ??? CLAVIER VIRTUEL ? Suppression display terminal ??? */
/* Cache le vieux display-wrap si pr?sent par cache */
.vk-display-wrap { display: none !important; }
/* Panel plus compact sans le display */
.vk-panel {
  background: rgba(8, 10, 14, 0.97) !important;
  border: 1px solid rgba(63,231,255,0.18) !important;
  border-radius: 16px 16px 0 0 !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
  padding: 14px 12px 10px !important;
}
.vk-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  padding: 0 4px !important;
}
.vk-title {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.20em !important;
  color: rgba(63,231,255,0.65) !important;
  text-transform: uppercase !important;
}
.vk-close {
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
}
.vk-execute {
  width: 100% !important;
  margin-top: 10px !important;
  padding: 13px !important;
  background: rgba(63,231,255,0.08) !important;
  border: 1px solid rgba(63,231,255,0.40) !important;
  border-radius: 8px !important;
  color: rgba(63,231,255,0.90) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.20em !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.vk-execute:active {
  background: rgba(63,231,255,0.16) !important;
}

/* ???????????????????????????????????????????????????????????????
   FRAGMENT TAB ? mission 1
   ??????????????????????????????????????????????????????????????? */
.sys-frag-wrap { padding: 12px 14px 100px; display: flex; flex-direction: column; gap: 12px; }
.sys-frag-page-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px 2px;
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 11px; color: rgba(255,255,255,0.30);
}
body.light-mode .sys-frag-page-label { color: rgba(10,13,20,0.45); }

.sys-frag-card {
  background: rgba(10,12,18,0.75); border-radius: 8px; padding: 16px; position: relative;
}
body.light-mode .sys-frag-card { background: #FFFFFF; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.sys-frag-card-intention {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(63,231,255,0.12) 0%, transparent 65%),
    rgba(63,231,255,0.04);
  border: 1px solid rgba(63,231,255,0.15);
}
body.light-mode .sys-frag-card-intention {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,153,204,0.12) 0%, transparent 65%),
    rgba(0,153,204,0.05);
  border: 1px solid rgba(0,153,204,0.20);
}

.sys-frag-card-reflexion {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(155,92,255,0.12) 0%, transparent 65%),
    rgba(155,92,255,0.04);
  border: 1px solid rgba(155,92,255,0.15);
}
body.light-mode .sys-frag-card-reflexion {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(107,53,204,0.12) 0%, transparent 65%),
    rgba(107,53,204,0.04);
  border: 1px solid rgba(107,53,204,0.18);
}

.sys-frag-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.sys-frag-label-intention { color: rgba(63,231,255,0.55); }
body.light-mode .sys-frag-label-intention { color: rgba(0,153,204,0.70); }
.sys-frag-label-reflexion { color: rgba(155,92,255,0.55); }
body.light-mode .sys-frag-label-reflexion { color: rgba(107,53,204,0.70); }

.sys-frag-sublabel {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em;
  color: rgba(255,255,255,0.30); margin-bottom: 12px;
}
body.light-mode .sys-frag-sublabel { color: rgba(10,13,20,0.35); }
.sys-frag-sublabel.urgent { color: rgba(255,183,0,0.55); }
.sys-frag-sublabel.urgent-ko { color: rgba(255,77,106,0.75); }
.sys-frag-ok { color: rgba(0,232,122,0.80); }
body.light-mode .sys-frag-ok { color: #00A854; }

.sys-frag-text {
  font-family: 'Manrope', sans-serif; font-style: italic;
  font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.82); margin: 0;
}
body.light-mode .sys-frag-text { color: rgba(10,13,20,0.82); }

.sys-frag-void-reply {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(155,92,255,0.12);
}
body.light-mode .sys-frag-void-reply { border-top-color: rgba(107,53,204,0.14); }
.sys-frag-void-id {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(155,92,255,0.45); margin-bottom: 6px;
}
body.light-mode .sys-frag-void-id { color: rgba(107,53,204,0.55); }
.sys-frag-void-text {
  font-family: 'Manrope', sans-serif; font-style: italic;
  font-size: 13px; line-height: 1.65; color: rgba(155,92,255,0.65); margin: 0;
}
body.light-mode .sys-frag-void-text { color: rgba(107,53,204,0.75); }
.sys-frag-void-analyzing {
  margin-top: 10px;
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  letter-spacing: 0.10em; color: rgba(255,255,255,0.22);
}

.sys-frag-textarea {
  width: 100%; box-sizing: border-box; min-height: 100px;
  border-radius: 8px; padding: 14px 16px;
  font-family: 'Manrope', sans-serif; font-style: italic;
  font-size: 14px; line-height: 1.75; outline: none; resize: vertical;
}
.sys-frag-ta-morning {
  background: rgba(63,231,255,0.04);
  border: 1px solid rgba(63,231,255,0.20);
  color: rgba(255,255,255,0.82); caret-color: #3FE7FF;
}
.sys-frag-ta-morning::placeholder { color: rgba(63,231,255,0.35); font-style: italic; }
.sys-frag-ta-morning:focus { border-color: rgba(63,231,255,0.45); }
body.light-mode .sys-frag-ta-morning {
  background: rgba(0,153,204,0.04); border-color: rgba(0,153,204,0.22);
  color: rgba(10,13,20,0.85);
}
body.light-mode .sys-frag-ta-morning::placeholder { color: rgba(0,153,204,0.35); }

.sys-frag-ta-evening {
  background: rgba(155,92,255,0.04);
  border: 1px solid rgba(155,92,255,0.20);
  color: rgba(255,255,255,0.82); caret-color: #9B5CFF;
  min-height: 120px;
}
.sys-frag-ta-evening::placeholder { color: rgba(155,92,255,0.25); font-style: italic; }
.sys-frag-ta-evening:focus { border-color: rgba(155,92,255,0.40); }
body.light-mode .sys-frag-ta-evening {
  background: rgba(107,53,204,0.03); border-color: rgba(107,53,204,0.18);
  color: rgba(10,13,20,0.82);
}
body.light-mode .sys-frag-ta-evening::placeholder { color: rgba(107,53,204,0.30); }

.sys-frag-submit {
  display: block; width: 100%; margin-top: 12px;
  border-radius: 8px; padding: 13px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.sys-frag-submit-morning {
  background: rgba(63,231,255,0.08); border: 1px solid rgba(63,231,255,0.30); color: #3FE7FF;
}
.sys-frag-submit-morning:hover { background: rgba(63,231,255,0.14); border-color: rgba(63,231,255,0.45); }
body.light-mode .sys-frag-submit-morning { background: rgba(0,153,204,0.06); border-color: rgba(0,153,204,0.30); color: #0099CC; }

.sys-frag-submit-evening {
  background: rgba(155,92,255,0.08); border: 1px solid rgba(155,92,255,0.30); color: #9B5CFF;
}
.sys-frag-submit-evening:hover { background: rgba(155,92,255,0.14); border-color: rgba(155,92,255,0.45); }
body.light-mode .sys-frag-submit-evening { background: rgba(107,53,204,0.06); border-color: rgba(107,53,204,0.30); color: #6B35CC; }

/* Accordion */
.sys-frag-acc { padding: 0; overflow: hidden; }
.sys-frag-acc-btn {
  width: 100%; border: none; background: transparent; color: inherit;
  cursor: pointer; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
}
.sys-frag-acc-head { display: flex; align-items: baseline; gap: 10px; }
.sys-frag-acc-title {
  font-family: 'Share Tech Mono', monospace; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.95); font-size: 14px;
}
body.light-mode .sys-frag-acc-title { color: #0a0d14; }
.sys-frag-acc-meta {
  font-family: 'Share Tech Mono', monospace; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 11px; color: rgba(255,255,255,0.45);
}
body.light-mode .sys-frag-acc-meta { color: rgba(10,13,20,0.45); }
.sys-frag-toggle-wrap {
  width: 28px; height: 28px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  transition: border-color 0.2s ease, background 0.2s ease;
}
body.light-mode .sys-frag-toggle-wrap { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.04); }
.sys-frag-chevron {
  width: 13px; height: 13px; color: rgba(255,255,255,0.45);
  transform: rotate(-90deg); transition: transform 0.2s ease, color 0.2s ease;
}
.sys-frag-acc.open .sys-frag-chevron { transform: rotate(90deg); color: #3FE7FF; }
.sys-frag-acc-content {
  display: none; border-top: 1px solid rgba(255,255,255,0.10); padding: 14px 16px 16px;
}
body.light-mode .sys-frag-acc-content { border-top-color: rgba(0,0,0,0.08); }
.sys-frag-acc.open .sys-frag-acc-content { display: block; }

/* Stats grid */
.sys-frag-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px;
}
.sys-frag-tile {
  background: rgba(255,255,255,0.04); border-radius: 6px; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
body.light-mode .sys-frag-tile { background: rgba(0,0,0,0.04); }
.sys-frag-k {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.30);
}
body.light-mode .sys-frag-k { color: rgba(10,13,20,0.45); }
.sys-frag-v {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 24px; line-height: 1;
}
.sys-frag-v-manrope {
  font-family: 'Manrope', sans-serif; font-size: 15px; line-height: 1.2;
  color: rgba(255,255,255,0.95);
}
body.light-mode .sys-frag-v-manrope { color: #0a0d14; }
.sys-frag-v-cyan { color: #3FE7FF; }
body.light-mode .sys-frag-v-cyan { color: #0099CC; }
.sys-frag-v-green { color: #00E87A; }
body.light-mode .sys-frag-v-green { color: #00A854; }
.sys-frag-v-special { color: #9B5CFF; }
body.light-mode .sys-frag-v-special { color: #6B35CC; }

/* Fragments recents list */
.sys-frag-list { margin-top: 4px; }
.sys-frag-entry {
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
body.light-mode .sys-frag-entry { border-bottom-color: rgba(0,0,0,0.06); }
.sys-frag-entry:last-child { border-bottom: none; padding-bottom: 0; }
.sys-frag-entry:first-child { padding-top: 4px; }
.sys-frag-entry-0 { color: rgba(255,255,255,0.70); }
.sys-frag-entry-1 { color: rgba(255,255,255,0.45); }
.sys-frag-entry-2 { color: rgba(255,255,255,0.28); }
body.light-mode .sys-frag-entry-0 { color: rgba(10,13,20,0.70); }
body.light-mode .sys-frag-entry-1 { color: rgba(10,13,20,0.45); }
body.light-mode .sys-frag-entry-2 { color: rgba(10,13,20,0.28); }
.sys-frag-date {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: inherit; margin-bottom: 8px; opacity: 0.85;
}
.sys-frag-intention {
  font-family: 'Manrope', sans-serif; font-style: italic;
  font-size: 12px; line-height: 1.55; color: inherit; margin: 0 0 4px;
}
.sys-frag-void-line {
  font-family: 'Manrope', sans-serif; font-size: 12px;
  line-height: 1.55; color: inherit; margin: 0; opacity: 0.85;
}
.sys-frag-void-line::before { content: '? '; color: #9B5CFF; opacity: 0.7; }
body.light-mode .sys-frag-void-line::before { color: #6B35CC; }
.sys-frag-empty {
  text-align: center; padding: 24px 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.30);
}
body.light-mode .sys-frag-empty { color: rgba(10,13,20,0.35); }

/* ???????????????????????????????????????????????????????????????
   INVENTAIRE TAB ? mission 2
   ??????????????????????????????????????????????????????????????? */
.sys-inv-wrap { padding: 12px 14px 100px; display: flex; flex-direction: column; gap: 14px; }
.sys-inv-page-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px 2px;
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 11px; color: rgba(255,255,255,0.30);
}
body.light-mode .sys-inv-page-label { color: rgba(10,13,20,0.45); }

/* Filters */
.sys-inv-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.sys-inv-filter {
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  border-radius: 999px; padding: 5px 12px;
  color: rgba(255,255,255,0.46); cursor: pointer;
  transition: all 0.15s;
}
.sys-inv-filter:hover { color: rgba(255,255,255,0.75); }
body.light-mode .sys-inv-filter {
  background: #FFFFFF; border-color: rgba(0,0,0,0.10); color: rgba(10,13,20,0.55);
}
.sys-inv-filter.active.commun { color: rgba(255,255,255,0.80); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); }
.sys-inv-filter.active.rare { color: #3FE7FF; border-color: rgba(63,231,255,0.35); background: rgba(63,231,255,0.08); }
.sys-inv-filter.active.epique { color: #9B5CFF; border-color: rgba(155,92,255,0.35); background: rgba(155,92,255,0.08); }
.sys-inv-filter.active.legendaire { color: #FFB700; border-color: rgba(255,183,0,0.40); background: rgba(255,183,0,0.08); }
.sys-inv-filter.active:not(.commun):not(.rare):not(.epique):not(.legendaire) {
  color: #3FE7FF; border-color: rgba(63,231,255,0.35); background: rgba(63,231,255,0.08);
}
body.light-mode .sys-inv-filter.active.rare { color: #0099CC; border-color: rgba(0,153,204,0.35); background: rgba(0,153,204,0.08); }
body.light-mode .sys-inv-filter.active.epique { color: #6B35CC; border-color: rgba(107,53,204,0.35); background: rgba(107,53,204,0.08); }
body.light-mode .sys-inv-filter.active.legendaire { color: #996600; border-color: rgba(180,130,0,0.40); background: rgba(180,130,0,0.10); }

/* Grid */
.sys-inv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.sys-inv-item {
  position: relative; text-align: center;
  background: rgba(255,255,255,0.03); border-radius: 10px;
  padding: 20px 10px 14px; cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  overflow: hidden;
}
.sys-inv-item:hover { transform: translateY(-1px); background: rgba(255,255,255,0.05); }
body.light-mode .sys-inv-item { background: #FFFFFF; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }

/* Rarity corner brackets */
.sys-inv-item::before, .sys-inv-item::after {
  content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none;
}
.sys-inv-item::before {
  top: 0; left: 0; border-top: 1.5px solid var(--inv-bracket, rgba(255,255,255,0.15));
  border-left: 1.5px solid var(--inv-bracket, rgba(255,255,255,0.15));
  border-radius: 2px 0 0 0;
}
.sys-inv-item::after {
  bottom: 0; right: 0; border-bottom: 1.5px solid var(--inv-bracket, rgba(255,255,255,0.15));
  border-right: 1.5px solid var(--inv-bracket, rgba(255,255,255,0.15));
  border-radius: 0 0 2px 0;
}
.sys-inv-rar-commun { --inv-bracket: rgba(255,255,255,0.18); }
.sys-inv-rar-rare { --inv-bracket: rgba(63,231,255,0.35); }
.sys-inv-rar-epique { --inv-bracket: rgba(155,92,255,0.40); }
.sys-inv-rar-legendaire {
  --inv-bracket: rgba(255,183,0,0.45);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,183,0,0.08), transparent 70%),
    rgba(255,255,255,0.03);
  box-shadow: inset 0 0 14px rgba(255,183,0,0.05);
}

/* Badge */
.sys-inv-badge {
  position: absolute; top: 8px; left: 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
  z-index: 1;
}
.sys-inv-rar-commun .sys-inv-badge { color: rgba(255,255,255,0.45); }
.sys-inv-rar-rare .sys-inv-badge { color: #3FE7FF; background: rgba(63,231,255,0.08); border: 1px solid rgba(63,231,255,0.20); }
.sys-inv-rar-epique .sys-inv-badge { color: #9B5CFF; background: rgba(155,92,255,0.08); border: 1px solid rgba(155,92,255,0.20); }
.sys-inv-rar-legendaire .sys-inv-badge { color: #FFB700; background: rgba(255,183,0,0.10); border: 1px solid rgba(255,183,0,0.25); }
body.light-mode .sys-inv-rar-commun .sys-inv-badge { color: rgba(10,13,20,0.50); }
body.light-mode .sys-inv-rar-rare .sys-inv-badge { color: #0099CC; background: rgba(0,153,204,0.10); border-color: rgba(0,153,204,0.25); }
body.light-mode .sys-inv-rar-epique .sys-inv-badge { color: #6B35CC; background: rgba(107,53,204,0.10); border-color: rgba(107,53,204,0.25); }
body.light-mode .sys-inv-rar-legendaire .sys-inv-badge { color: #996600; background: rgba(180,130,0,0.10); border-color: rgba(180,130,0,0.25); }

/* Icon + name */
.sys-inv-icon { font-size: 28px; line-height: 1; margin: 20px auto 8px; }
.sys-inv-name {
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px;
  line-height: 1.2; color: rgba(255,255,255,0.95);
}
body.light-mode .sys-inv-name { color: rgba(10,13,20,0.90); }
.sys-inv-effect {
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.30); margin-top: 4px; line-height: 1.4;
}
body.light-mode .sys-inv-effect { color: rgba(10,13,20,0.45); }
.sys-inv-item.is-active .sys-inv-effect { color: #00E87A; }
body.light-mode .sys-inv-item.is-active .sys-inv-effect { color: #00A854; }

.sys-inv-empty {
  text-align: center; padding: 32px 20px;
  color: rgba(255,255,255,0.30);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
}
body.light-mode .sys-inv-empty { color: rgba(10,13,20,0.40); }

/* Stats card */
.sys-inv-stats-card {
  background: rgba(10,12,18,0.75); border-radius: 8px;
  padding: 16px; position: relative;
  border: 1px solid rgba(255,255,255,0.06);
}
body.light-mode .sys-inv-stats-card {
  background: #FFFFFF; border-color: rgba(0,0,0,0.06); box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.sys-inv-stats-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 12px;
}
body.light-mode .sys-inv-stats-label { color: rgba(10,13,20,0.50); }
.sys-inv-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sys-inv-stile {
  background: rgba(255,255,255,0.03); border-radius: 6px;
  padding: 12px 10px; display: flex; flex-direction: column; gap: 4px;
}
body.light-mode .sys-inv-stile { background: rgba(0,0,0,0.04); }
.sys-inv-sk {
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.30);
}
body.light-mode .sys-inv-sk { color: rgba(10,13,20,0.45); }
.sys-inv-sv { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 20px; line-height: 1; }
.sys-inv-sv-mono {
  font-family: 'Share Tech Mono', monospace; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2;
}
.sys-inv-sv.base { color: rgba(255,255,255,0.95); }
body.light-mode .sys-inv-sv.base { color: #0a0d14; }
.sys-inv-sv.cyan { color: #3FE7FF; }
body.light-mode .sys-inv-sv.cyan { color: #0099CC; }
.sys-inv-sv.green { color: #00E87A; }
body.light-mode .sys-inv-sv.green { color: #00A854; }
.sys-inv-sv-mono.warn { color: #FFB700; }
body.light-mode .sys-inv-sv-mono.warn { color: #996600; }

/* ???????????????????????????????????????????????????????????????
   SOCIAL TAB ? mission 3
   ??????????????????????????????????????????????????????????????? */
.sys-soc-wrap { padding: 12px 14px 100px; display: flex; flex-direction: column; gap: 14px; }

.sys-soc-card {
  position: relative;
  background: rgba(10,12,18,0.75);
  border-radius: 8px; padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
}
body.light-mode .sys-soc-card {
  background: #FFFFFF; border-color: rgba(0,0,0,0.05);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.sys-soc-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 12px;
}
body.light-mode .sys-soc-label { color: rgba(10,13,20,0.45); }
.sys-soc-label-accent { color: rgba(63,231,255,0.55); }
body.light-mode .sys-soc-label-accent { color: rgba(0,153,204,0.70); }
.sys-soc-label-duel { color: rgba(255,77,106,0.55); }
body.light-mode .sys-soc-label-duel { color: rgba(204,34,68,0.70); }

.sys-soc-loading, .sys-soc-empty {
  text-align: center; padding: 20px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.30);
}
body.light-mode .sys-soc-loading, body.light-mode .sys-soc-empty { color: rgba(10,13,20,0.40); }
.sys-soc-dim { color: rgba(255,255,255,0.30); }

/* ?? LEADERBOARD ?? */
.sys-soc-card-lb {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(63,231,255,0.10) 0%, transparent 65%),
    rgba(10,12,18,0.75);
  border-color: rgba(63,231,255,0.15);
}
body.light-mode .sys-soc-card-lb {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,153,204,0.10) 0%, transparent 65%),
    #FFFFFF;
  border-color: rgba(0,153,204,0.15);
}
.sys-soc-lb-header { display: flex; align-items: center; justify-content: space-between; }
.sys-soc-refresh {
  background: none; border: 1px solid rgba(63,231,255,0.25);
  border-radius: 6px; padding: 4px 10px;
  color: rgba(63,231,255,0.75);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; cursor: pointer; margin-bottom: 12px;
}
body.light-mode .sys-soc-refresh { border-color: rgba(0,153,204,0.30); color: #0099CC; }

.sys-soc-lb-myrank {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0 14px;
}
.sys-soc-lb-myrank-val {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 36px; color: #3FE7FF; line-height: 1;
}
body.light-mode .sys-soc-lb-myrank-val { color: #0099CC; }
.sys-soc-lb-myrank-sep {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.10em;
  color: rgba(255,255,255,0.30);
}
body.light-mode .sys-soc-lb-myrank-sep { color: rgba(10,13,20,0.45); }

.sys-soc-lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sys-soc-lb-row:last-child { border-bottom: none; }
body.light-mode .sys-soc-lb-row { border-bottom-color: rgba(0,0,0,0.06); }
.sys-soc-lb-row.is-gold .sys-soc-lb-pos { color: #FFB700; }
body.light-mode .sys-soc-lb-row.is-gold .sys-soc-lb-pos { color: #996600; }
.sys-soc-lb-row.is-gold .sys-soc-lb-avatar { border-color: rgba(255,183,0,0.35); }
.sys-soc-lb-row.is-me {
  background: rgba(63,231,255,0.04);
  border: 1px solid rgba(63,231,255,0.12);
  border-radius: 6px;
  padding: 10px 12px;
}
body.light-mode .sys-soc-lb-row.is-me {
  background: rgba(0,153,204,0.05);
  border-color: rgba(0,153,204,0.15);
}

.sys-soc-lb-pos {
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,0.35); min-width: 28px;
}
body.light-mode .sys-soc-lb-pos { color: rgba(10,13,20,0.45); }
.sys-soc-lb-avatar {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.85); flex: 0 0 auto;
}
body.light-mode .sys-soc-lb-avatar {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.10); color: #0a0d14;
}
.sys-soc-lb-info { flex: 1; min-width: 0; }
.sys-soc-lb-name {
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14px;
  color: rgba(255,255,255,0.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.light-mode .sys-soc-lb-name { color: #0a0d14; }
.sys-soc-lb-me-badge {
  display: inline-block; margin-left: 6px;
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  color: #3FE7FF; padding: 1px 5px;
  border: 1px solid rgba(63,231,255,0.35); border-radius: 3px;
  letter-spacing: 0.10em;
}
body.light-mode .sys-soc-lb-me-badge { color: #0099CC; border-color: rgba(0,153,204,0.35); }
.sys-soc-lb-class {
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  letter-spacing: 0.12em; color: rgba(63,231,255,0.70); margin-top: 2px;
}
body.light-mode .sys-soc-lb-class { color: #0099CC; }
.sys-soc-lb-right { text-align: right; flex-shrink: 0; }
.sys-soc-lb-xp {
  font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700;
  color: #3FE7FF; line-height: 1;
}
body.light-mode .sys-soc-lb-xp { color: #0099CC; }
.sys-soc-lb-streak {
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  color: #00E87A; margin-top: 2px;
}
body.light-mode .sys-soc-lb-streak { color: #00A854; }
.sys-soc-lb-level {
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  color: rgba(255,255,255,0.30); margin-top: 1px;
}
body.light-mode .sys-soc-lb-level { color: rgba(10,13,20,0.40); }

/* ?? DUEL CARD ?? */
.sys-soc-card-duel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,77,106,0.08) 0%, transparent 65%),
    rgba(10,12,18,0.75);
  border-color: rgba(255,77,106,0.15);
}
body.light-mode .sys-soc-card-duel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(204,34,68,0.08) 0%, transparent 65%),
    #FFFFFF;
  border-color: rgba(204,34,68,0.15);
}
.sys-soc-duel-title {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 18px;
  color: rgba(255,255,255,0.95); margin-bottom: 6px;
}
body.light-mode .sys-soc-duel-title { color: #0a0d14; }
.sys-soc-duel-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}
.sys-soc-duel-deadline { color: rgba(255,183,0,0.65); }
.sys-soc-duel-stake { color: rgba(255,77,106,0.75); }
body.light-mode .sys-soc-duel-deadline { color: #996600; }
body.light-mode .sys-soc-duel-stake { color: #CC2244; }

.sys-soc-duel-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.sys-soc-duel-row:last-child { margin-bottom: 14px; }
.sys-soc-duel-name {
  font-family: 'Share Tech Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,0.62); min-width: 80px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
body.light-mode .sys-soc-duel-name { color: rgba(10,13,20,0.62); }
.sys-soc-duel-bar {
  flex: 1; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
body.light-mode .sys-soc-duel-bar { background: rgba(0,0,0,0.06); }
.sys-soc-duel-bar-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.sys-soc-duel-bar-fill.cyan { background: #3FE7FF; }
.sys-soc-duel-bar-fill.ko { background: #FF4D6A; }
body.light-mode .sys-soc-duel-bar-fill.cyan { background: #0099CC; }
body.light-mode .sys-soc-duel-bar-fill.ko { background: #CC2244; }
.sys-soc-duel-score {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 13px;
  min-width: 32px; text-align: right;
}
.sys-soc-duel-score.cyan { color: #3FE7FF; }
.sys-soc-duel-score.ko { color: #FF4D6A; }
body.light-mode .sys-soc-duel-score.cyan { color: #0099CC; }
body.light-mode .sys-soc-duel-score.ko { color: #CC2244; }

.sys-soc-duel-btn {
  display: block; width: 100%; margin-top: 6px;
  background: rgba(255,77,106,0.08);
  border: 1px solid rgba(255,77,106,0.30);
  border-radius: 8px; padding: 12px;
  color: #FF4D6A;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; cursor: pointer;
  transition: background 0.15s;
}
.sys-soc-duel-btn:hover { background: rgba(255,77,106,0.14); }
body.light-mode .sys-soc-duel-btn { background: rgba(204,34,68,0.06); border-color: rgba(204,34,68,0.30); color: #CC2244; }
.sys-soc-duel-btn-empty { opacity: 0.85; }

/* ?? CONTACTS ?? */
.sys-soc-contacts-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.sys-soc-contacts-header .sys-soc-label { margin-bottom: 0; }
.sys-soc-add-btn {
  background: rgba(63,231,255,0.08); border: 1px solid rgba(63,231,255,0.30);
  border-radius: 6px; padding: 5px 10px;
  color: #3FE7FF;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; cursor: pointer;
}
.sys-soc-add-btn:hover { background: rgba(63,231,255,0.14); }
body.light-mode .sys-soc-add-btn { background: rgba(0,153,204,0.06); border-color: rgba(0,153,204,0.30); color: #0099CC; }

.sys-soc-contacts-list { display: flex; flex-direction: column; gap: 10px; }
.sys-soc-contact {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02); border-radius: 8px;
}
body.light-mode .sys-soc-contact { background: rgba(0,0,0,0.03); }
.sys-soc-contact-avatar {
  width: 36px; height: 36px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 14px;
  color: rgba(255,255,255,0.85); flex: 0 0 auto;
}
body.light-mode .sys-soc-contact-avatar {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.10); color: #0a0d14;
}
.sys-soc-contact-info { flex: 1; min-width: 0; }
.sys-soc-contact-top {
  display: flex; align-items: center; gap: 8px;
}
.sys-soc-contact-name {
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px;
  color: rgba(255,255,255,0.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
body.light-mode .sys-soc-contact-name { color: #0a0d14; }
.sys-soc-contact-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  letter-spacing: 0.10em; color: rgba(255,255,255,0.30);
}
.sys-soc-contact-status.is-online { color: #00E87A; }
body.light-mode .sys-soc-contact-status.is-online { color: #00A854; }
.sys-soc-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #00E87A;
  animation: status-pulse 1.9s ease-in-out infinite;
}
body.light-mode .sys-soc-dot { background: #00A854; }
.sys-soc-contact-meta {
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  letter-spacing: 0.10em; color: rgba(255,255,255,0.30); margin-top: 2px;
}
body.light-mode .sys-soc-contact-meta { color: rgba(10,13,20,0.40); }
.sys-soc-contact-btn {
  background: rgba(255,77,106,0.08); border: 1px solid rgba(255,77,106,0.30);
  border-radius: 5px; padding: 6px 10px;
  color: #FF4D6A;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; cursor: pointer;
}
.sys-soc-contact-btn:hover { background: rgba(255,77,106,0.14); }
body.light-mode .sys-soc-contact-btn { background: rgba(204,34,68,0.06); border-color: rgba(204,34,68,0.30); color: #CC2244; }

.sys-soc-find-btn {
  display: block; width: 100%; margin-top: 10px;
  background: rgba(63,231,255,0.08);
  border: 1px solid rgba(63,231,255,0.30);
  border-radius: 8px; padding: 12px;
  color: #3FE7FF;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
}

/* ?? INVITE ?? */
.sys-soc-invite-desc {
  font-family: 'Manrope', sans-serif; font-size: 13px;
  line-height: 1.5; color: rgba(255,255,255,0.65);
  margin: 0 0 14px;
}
body.light-mode .sys-soc-invite-desc { color: rgba(10,13,20,0.65); }
.sys-soc-invite-code {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: 0.18em; text-align: center;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px; color: rgba(255,255,255,0.95);
  margin-bottom: 12px;
}
body.light-mode .sys-soc-invite-code {
  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10); color: #0a0d14;
}
.sys-soc-invite-btn {
  display: block; width: 100%;
  background: rgba(63,231,255,0.08);
  border: 1px solid rgba(63,231,255,0.30);
  border-radius: 8px; padding: 12px;
  color: #3FE7FF;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  transition: background 0.15s;
}
.sys-soc-invite-btn:hover { background: rgba(63,231,255,0.14); }
body.light-mode .sys-soc-invite-btn {
  background: rgba(0,153,204,0.06); border-color: rgba(0,153,204,0.30); color: #0099CC;
}

/* Pending requests */
.sys-soc-card-pending .pending-card { margin-bottom: 10px; }
.sys-soc-card-pending .pending-card:last-child { margin-bottom: 0; }

/* ???????????????????????????????????????????????????????????????
   PARAMS TAB ? mission 4 (hero + restyle accordions)
   ??????????????????????????????????????????????????????????????? */
#tab-params { padding: 12px 14px 100px; }
#sys-params-hero { margin-bottom: 14px; }

.sys-params-page-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px 8px;
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 11px; color: rgba(255,255,255,0.30);
}
body.light-mode .sys-params-page-label { color: rgba(10,13,20,0.45); }

.sys-params-hero-card {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(63,231,255,0.08) 0%, transparent 65%),
    rgba(10,12,18,0.75);
  border: 1px solid rgba(63,231,255,0.15);
  border-radius: 8px; padding: 16px;
}
body.light-mode .sys-params-hero-card {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,153,204,0.08) 0%, transparent 65%),
    #FFFFFF;
  border-color: rgba(0,153,204,0.15);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.sys-params-hero-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sys-params-hero-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(63,231,255,0.55);
}
body.light-mode .sys-params-hero-label { color: #0099CC; }
.sys-params-hero-sublabel {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.30);
}
body.light-mode .sys-params-hero-sublabel { color: rgba(10,13,20,0.40); }
.sys-params-hero-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end;
  margin-bottom: 12px;
}
.sys-params-hero-col:nth-child(2), .sys-params-hero-col:nth-child(3) { text-align: center; }
.sys-params-hero-col:nth-child(3) { text-align: right; }
.sys-params-hero-k {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.30); margin-bottom: 4px;
}
body.light-mode .sys-params-hero-k { color: rgba(10,13,20,0.40); }
.sys-params-hero-v-big {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 36px;
  color: rgba(255,255,255,0.95); line-height: 1;
}
body.light-mode .sys-params-hero-v-big { color: #0a0d14; }
.sys-params-hero-v-mid {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 18px;
  color: rgba(255,255,255,0.85); line-height: 1;
}
body.light-mode .sys-params-hero-v-mid { color: #0a0d14; }
.sys-params-hero-v-mono {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px; letter-spacing: 0.10em;
  color: #3FE7FF; line-height: 1;
}
body.light-mode .sys-params-hero-v-mono { color: #0099CC; }
.sys-params-hero-bar {
  height: 2px; background: #3FE7FF; width: 100%; margin: 8px 0 6px;
}
body.light-mode .sys-params-hero-bar { background: #0099CC; }
.sys-params-hero-status {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.30); text-align: center;
}
body.light-mode .sys-params-hero-status { color: rgba(10,13,20,0.40); }

/* ?? Restyle accordions (sys design) ?? */
#tab-params .param-card {
  background: rgba(10,12,18,0.75);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 0;
  position: relative;
}
body.light-mode #tab-params .param-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
#tab-params .param-card::before,
#tab-params .param-card::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
}
#tab-params .param-card::before {
  top: 0; left: 0;
  border-top: 1.5px solid rgba(63,231,255,0.30);
  border-left: 1.5px solid rgba(63,231,255,0.30);
  border-radius: 2px 0 0 0;
}
#tab-params .param-card::after {
  bottom: 0; right: 0;
  border-bottom: 1.5px solid rgba(63,231,255,0.30);
  border-right: 1.5px solid rgba(63,231,255,0.30);
  border-radius: 0 0 2px 0;
}
body.light-mode #tab-params .param-card::before,
body.light-mode #tab-params .param-card::after { border-color: rgba(0,153,204,0.35); }

#tab-params .param-header { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
body.light-mode #tab-params .param-header { border-bottom-color: rgba(0,0,0,0.05); }
#tab-params .card-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(63,231,255,0.70);
}
body.light-mode #tab-params .card-title { color: #0099CC; }
#tab-params .param-header .card-line { display: none; }

#tab-params .p-acc-item {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
body.light-mode #tab-params .p-acc-item { border-bottom-color: rgba(0,0,0,0.05); }
#tab-params .p-acc-item:last-child { border-bottom: none; }
#tab-params .p-acc-header {
  padding: 14px 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.15s;
}
#tab-params .p-acc-header:hover { background: rgba(63,231,255,0.03); }
body.light-mode #tab-params .p-acc-header:hover { background: rgba(0,153,204,0.03); }
#tab-params .p-acc-meta { display: flex; flex-direction: column; gap: 2px; }
#tab-params .p-acc-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}
body.light-mode #tab-params .p-acc-title { color: #0a0d14; }
#tab-params .p-acc-sub {
  font-family: 'Manrope', sans-serif; font-size: 11px;
  color: rgba(255,255,255,0.45);
}
body.light-mode #tab-params .p-acc-sub { color: rgba(10,13,20,0.50); }
#tab-params .p-acc-chev {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35);
  transform: rotate(0deg); transition: transform 0.2s;
  font-size: 14px;
}
#tab-params .p-acc-chev.open { transform: rotate(90deg); color: #3FE7FF; }
body.light-mode #tab-params .p-acc-chev.open { color: #0099CC; }
#tab-params .p-acc-body { padding: 0 16px 16px; }

#tab-params .param-subtitle {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.40); margin: 14px 0 8px;
}
body.light-mode #tab-params .param-subtitle { color: rgba(10,13,20,0.50); }
#tab-params .param-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 6px; display: block;
}
body.light-mode #tab-params .param-label { color: rgba(10,13,20,0.55); }
#tab-params .param-input,
#tab-params .param-select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.95);
  font-family: 'Manrope', sans-serif; font-size: 14px;
  outline: none; width: 100%; box-sizing: border-box;
}
body.light-mode #tab-params .param-input,
body.light-mode #tab-params .param-select {
  background: #FFFFFF; border-color: rgba(0,0,0,0.10); color: #0a0d14;
}
#tab-params .param-input:focus,
#tab-params .param-select:focus {
  border-color: rgba(63,231,255,0.45);
  background: rgba(255,255,255,0.06);
}
body.light-mode #tab-params .param-input:focus,
body.light-mode #tab-params .param-select:focus {
  border-color: rgba(0,153,204,0.45);
}
#tab-params .param-save-btn {
  display: block; width: 100%; margin-top: 16px;
  background: rgba(63,231,255,0.08);
  border: 1px solid rgba(63,231,255,0.30);
  border-radius: 8px; padding: 12px;
  color: #3FE7FF;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; transition: background 0.15s;
}
#tab-params .param-save-btn:hover { background: rgba(63,231,255,0.14); }
body.light-mode #tab-params .param-save-btn {
  background: rgba(0,153,204,0.06); border-color: rgba(0,153,204,0.30); color: #0099CC;
}
#tab-params .param-btn-secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; padding: 8px 14px;
  color: rgba(255,255,255,0.80);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  cursor: pointer;
}
body.light-mode #tab-params .param-btn-secondary {
  background: #FFFFFF; border-color: rgba(0,0,0,0.10); color: rgba(10,13,20,0.80);
}
#tab-params .seg-btn {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  border-radius: 6px; padding: 8px 12px;
  color: rgba(255,255,255,0.50); cursor: pointer;
  transition: all 0.15s;
}
#tab-params .seg-btn.active {
  border-color: rgba(63,231,255,0.35);
  background: rgba(63,231,255,0.08);
  color: #3FE7FF;
}
body.light-mode #tab-params .seg-btn { background: #FFFFFF; border-color: rgba(0,0,0,0.10); color: rgba(10,13,20,0.55); }
body.light-mode #tab-params .seg-btn.active { border-color: rgba(0,153,204,0.35); background: rgba(0,153,204,0.08); color: #0099CC; }
#tab-params .param-segmented { display: flex; gap: 8px; }
#tab-params .param-segmented .seg-btn { flex: 1; }
#tab-params .param-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
#tab-params .param-field { margin-bottom: 10px; }
#tab-params .param-subsection { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
body.light-mode #tab-params .param-subsection { border-bottom-color: rgba(0,0,0,0.04); }
#tab-params .param-subsection:last-child { border-bottom: none; }
#tab-params .param-static {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.90); padding: 8px 0;
}
body.light-mode #tab-params .param-static { color: #0a0d14; }
/* ===================================================== */
/* QUETES MOMENT HEADER + OPS SPECIALES                   */
/* ===================================================== */
.qmh-card{ padding:14px 16px; margin:12px 0 16px; }
.qmh-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.qmh-left{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.qmh-meta{ display:flex; align-items:center; gap:8px; }
.qmh-dot{ width:6px; height:6px; border-radius:50%; background:rgba(0,232,122,0.85); box-shadow:0 0 6px rgba(0,232,122,0.55); animation:qmh-pulse 1.8s ease-in-out infinite; }
@keyframes qmh-pulse{0%,100%{opacity:.6}50%{opacity:1}}
.qmh-label{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.2em; color:rgba(255,255,255,0.40); text-transform:uppercase; }
.qmh-title{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:18px; letter-spacing:.16em; color:rgba(255,255,255,0.96); }
.qmh-slot{ font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,0.45); white-space:nowrap; }
.qmh-bot{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.07); }
.qmh-col{ display:flex; flex-direction:column; gap:4px; }
.qmh-col-r{ text-align:right; }
.qmh-k{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.2em; color:rgba(255,255,255,0.35); text-transform:uppercase; }
.qmh-v{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:18px; letter-spacing:.1em; color:rgba(255,255,255,0.95); }
.qmh-v2{ font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,0.70); }
body.light-mode .qmh-title,body.light-mode .qmh-v{ color:rgba(20,24,32,0.95); }
body.light-mode .qmh-v2{ color:rgba(20,24,32,0.72); }
body.light-mode .qmh-label,body.light-mode .qmh-k{ color:rgba(20,24,32,0.55); }
body.light-mode .qmh-slot{ color:rgba(20,24,32,0.60); }

/* Ops speciales */
.qos-wrap{ margin:18px 0 12px; }
.qos-title{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.20em; color:rgba(255,255,255,0.28); text-transform:uppercase; margin-bottom:10px; }
.qos-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qos-card{ position:relative; padding:14px 12px; border-radius:10px; opacity:.55; cursor:not-allowed; display:flex; flex-direction:column; gap:8px; }
.qos-donjon{ background:radial-gradient(120% 100% at 0% 0%, rgba(255,183,0,0.08), transparent 60%), rgba(255,183,0,0.03); border:1px solid rgba(255,183,0,0.12); }
.qos-raid{ background:radial-gradient(120% 100% at 0% 0%, rgba(255,77,106,0.08), transparent 60%), rgba(255,77,106,0.03); border:1px solid rgba(255,77,106,0.12); }
.qos-label{ font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.qos-donjon .qos-label{ color:rgba(255,183,0,0.55); }
.qos-raid .qos-label{ color:rgba(255,77,106,0.55); }
.qos-desc{ font-family:'Manrope',sans-serif; font-size:13px; color:rgba(255,255,255,0.38); line-height:1.4; }
.qos-badge{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.14em; padding:4px 10px; border-radius:4px; align-self:flex-start; }
.qos-donjon .qos-badge{ background:rgba(255,183,0,0.08); border:1px solid rgba(255,183,0,0.20); color:rgba(255,183,0,0.50); }
.qos-raid .qos-badge{ background:rgba(255,77,106,0.08); border:1px solid rgba(255,77,106,0.20); color:rgba(255,77,106,0.50); }
body.light-mode .qos-desc{ color:rgba(20,24,32,0.55); }


/* ===================================================== */
/* PROFILE V2 ? Rewrite visuel mockup                     */
/* ===================================================== */
/* Safe top on #tab-profil (same as home); inner gap + bottom nav clearance */
#tab-profil #profile-content{ padding:0 14px 100px; display:flex; flex-direction:column; gap:12px; }

/* 1. HEAD */
.pv2-head{ display:flex; align-items:center; gap:16px; padding:14px 16px; }
.pv2-avatar{ width:48px; height:48px; border-radius:50%; background:rgba(155,92,255,0.15); border:1px solid rgba(155,92,255,0.35); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.pv2-avatar svg{ width:100%; height:100%; }
.pv2-head-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pv2-head-name{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:22px; letter-spacing:.08em; color:rgba(255,255,255,0.96); }
.pv2-head-cls{ font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.pv2-head-job{ font-family:'Manrope',sans-serif; font-size:13px; color:rgba(255,255,255,0.70); }

/* Labels */
.pv2-k{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,0.32); text-transform:uppercase; }

/* 2. RANG ACTUEL */
.pv2-rang{ padding:14px 16px; }
.pv2-rang-body{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; align-items:flex-end; }
.pv2-rang-left{ display:flex; flex-direction:column; gap:4px; }
.pv2-rang-letter{ font-family:'Orbitron',sans-serif; font-weight:900; font-size:52px; letter-spacing:.04em; line-height:1; color:rgba(255,255,255,0.95); }
.pv2-rang-name{ font-family:'Share Tech Mono',monospace; font-size:13px; letter-spacing:.16em; color:rgba(255,255,255,0.55); text-transform:uppercase; }
.pv2-rang-desc{ font-family:'Manrope',sans-serif; font-size:13px; color:rgba(255,255,255,0.62); font-style:italic; line-height:1.4; }
.pv2-rang-right{ display:flex; flex-direction:column; gap:6px; }
.pv2-rang-bar{ height:4px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; }
.pv2-rang-fill{ height:100%; background:rgba(155,92,255,0.85); border-radius:999px; box-shadow:0 0 6px rgba(155,92,255,0.45); transition:width .6s ease; }
.pv2-rang-pct{ font-family:'Orbitron',sans-serif; font-size:14px; font-weight:700; text-align:right; color:rgba(155,92,255,0.95); }

/* 3. CLASSE CARD */
.pv2-classe{ text-align:center; padding:24px 16px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.pv2-classe-icon{ font-size:48px; line-height:1; }
.pv2-classe-title{ font-family:'Orbitron',sans-serif; font-weight:900; font-size:24px; letter-spacing:.08em; }
.pv2-classe-desc{ font-family:'Manrope',sans-serif; font-style:italic; font-size:14px; line-height:1.65; color:rgba(255,255,255,0.68); max-width:340px; }

/* ACCORD?ON G?N?RIQUE */
.pv2-acc{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.pv2-acc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; user-select:none; }
.pv2-acc-title{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:18px; letter-spacing:.12em; color:rgba(255,255,255,0.92); text-transform:uppercase; flex:1; }
.pv2-acc-right{ font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,0.45); }
.pv2-acc-toggle{ width:28px; height:28px; border-radius:4px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.55); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.pv2-acc-toggle svg{ transition:transform .2s ease; transform:rotate(-90deg); }
.pv2-acc.open .pv2-acc-toggle svg{ transform:rotate(90deg); }
.pv2-acc-body{ display:none; flex-direction:column; gap:12px; }
.pv2-acc.open .pv2-acc-body{ display:flex; }

/* 4. STATS */
.pv2-stat-row{ display:grid; grid-template-columns:86px 1fr 34px; gap:10px; align-items:center; }
.pv2-stat-lbl{ font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,0.45); }
.pv2-stat-bar{ height:4px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; }
.pv2-stat-fill{ height:100%; border-radius:999px; transition:width .6s ease; }
.pv2-stat-val{ font-family:'Orbitron',sans-serif; font-size:18px; font-weight:700; color:rgba(255,255,255,0.95); text-align:right; }

/* 5. COMBAT */
.pv2-cb-top{ display:flex; align-items:center; gap:14px; }
.pv2-cb-left{ flex:1; display:flex; flex-direction:column; gap:4px; }
.pv2-cb-index{ display:flex; gap:3px; align-items:flex-end; }
.pv2-ibar{ width:4px; height:20px; background:rgba(155,92,255,0.16); border-radius:2px; transition:all .3s ease; }
.pv2-ibar.on{ background:rgba(155,92,255,1); }
.pv2-ibar.last{ height:28px; box-shadow:0 0 10px rgba(155,92,255,0.7); }
.pv2-chips-row{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:6px; }
.pv2-chip{ width:30px; height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'Orbitron',sans-serif; font-weight:700; font-size:12px; letter-spacing:.04em; border:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.55); }
.pv2-chip-past{ opacity:.55; text-decoration:line-through; }
.pv2-chip-cur{ border-color:rgba(155,92,255,0.55); background:rgba(155,92,255,0.1); color:rgba(155,92,255,0.95); box-shadow:0 0 10px rgba(155,92,255,0.25); }
.pv2-chip-next{ opacity:.75; }
.pv2-chip-arrow{ color:rgba(255,255,255,0.18); font-size:12px; margin:0 -2px; }
.pv2-kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.pv2-kpi{ padding:8px 10px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); border-radius:6px; display:flex; flex-direction:column; gap:2px; }
.pv2-kpi-v{ font-family:'Orbitron',sans-serif; font-size:18px; font-weight:700; color:rgba(255,255,255,0.95); }
.pv2-kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* 6. PROGRESSION CHART */
.pv2-legend{ display:flex; gap:6px; flex-wrap:wrap; }
.pv2-leg-pill{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.14em; padding:3px 9px; border-radius:999px; border:1px solid; background:rgba(255,255,255,0.02); }
.pv2-chart{ width:100%; height:100px; display:block; }
.pv2-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(255,255,255,0.28); text-align:center; letter-spacing:.14em; }

/* 7. MA CLASSE */
.pv2-maclasse{ display:flex; gap:14px; align-items:center; }

/* 8. MON PROFIL */
.pv2-edit-btn{ font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:.14em; padding:4px 10px; border-radius:4px; background:rgba(63,231,255,0.06); border:1px solid rgba(63,231,255,0.30); color:rgba(63,231,255,0.92); cursor:pointer; text-transform:uppercase; }
.pv2-pi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pv2-pi{ display:flex; flex-direction:column; gap:4px; padding:8px 10px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); border-radius:6px; }
.pv2-pi-k{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.14em; color:rgba(255,255,255,0.35); text-transform:uppercase; }
.pv2-pi-v{ font-family:'Manrope',sans-serif; font-size:15px; color:rgba(255,255,255,0.94); }
.pv2-pe-grid{ display:flex; flex-direction:column; gap:12px; }
.pv2-pe-row{ display:flex; flex-direction:column; gap:6px; }
.pv2-inp{ background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10); border-radius:6px; padding:8px 10px; color:rgba(255,255,255,0.95); font-family:'Manrope',sans-serif; font-size:14px; outline:none; }
.pv2-inp:focus{ border-color:rgba(63,231,255,0.45); }
.pv2-rng{ width:100%; accent-color:#3fe7ff; }
.pv2-seg{ display:flex; gap:6px; }
.pv2-seg-btn{ flex:1; text-align:center; padding:8px; border:1px solid rgba(255,255,255,0.10); border-radius:6px; font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,0.55); cursor:pointer; }
.pv2-seg-btn input{ display:none; }
.pv2-seg-btn.on{ border-color:rgba(63,231,255,0.45); background:rgba(63,231,255,0.05); color:rgba(63,231,255,0.95); }
.pv2-pe-note{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.12em; color:rgba(63,231,255,0.55); text-transform:uppercase; padding-top:4px; border-top:1px dashed rgba(63,231,255,0.15); }

/* 9. SKILLS */
.pv2-next-skill{ font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:.12em; color:rgba(63,231,255,0.55); }
.pv2-skill-item{ display:grid; grid-template-columns:1fr auto; gap:10px; padding:10px; border:1px solid rgba(255,255,255,0.10); border-radius:6px; background:rgba(255,255,255,0.02); align-items:center; }
.pv2-skill-item.locked{ opacity:.40; }
.pv2-skill-name{ font-family:'Manrope',sans-serif; font-size:15px; color:rgba(255,255,255,0.95); font-weight:600; }
.pv2-skill-desc{ font-family:'Manrope',sans-serif; font-size:13px; color:rgba(255,255,255,0.55); line-height:1.4; margin-top:2px; }
.pv2-skill-badge{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.12em; padding:6px 9px; border-radius:4px; white-space:nowrap; text-transform:uppercase; }
.pv2-skill-badge.ok{ background:rgba(0,232,122,0.08); border:1px solid rgba(0,232,122,0.30); color:rgba(0,232,122,0.90); }
.pv2-skill-badge.lock{ background:rgba(255,183,0,0.08); border:1px solid rgba(255,183,0,0.30); color:rgba(255,183,0,0.90); }
.pv2-empty{ font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,0.30); text-align:center; padding:14px; }

/* ACTIONS */
.pv2-actions{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.pv2-act-btn{ width:100%; padding:12px 14px; background:rgba(63,231,255,0.05); border:1px solid rgba(63,231,255,0.28); border-radius:6px; color:rgba(63,231,255,0.95); font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:.18em; cursor:pointer; text-transform:uppercase; }
.pv2-act-btn-sm{ width:100%; padding:10px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.10); border-radius:6px; color:rgba(255,255,255,0.65); font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.14em; cursor:pointer; }

/* Light mode */
body.light-mode .pv2-head-name,
body.light-mode .pv2-rang-letter,
body.light-mode .pv2-stat-val,
body.light-mode .pv2-kpi-v,
body.light-mode .pv2-acc-title,
body.light-mode .pv2-skill-name,
body.light-mode .pv2-pi-v{ color:rgba(20,24,32,0.95); }
body.light-mode .pv2-k,
body.light-mode .pv2-pi-k{ color:rgba(20,24,32,0.55); }
body.light-mode .pv2-rang-desc,
body.light-mode .pv2-head-job,
body.light-mode .pv2-classe-desc,
body.light-mode .pv2-skill-desc,
body.light-mode .pv2-stat-lbl{ color:rgba(20,24,32,0.68); }
body.light-mode .pv2-avatar{ background:rgba(107,53,204,0.12); border-color:rgba(107,53,204,0.35); }

/* ===================================================== */
/* THE VOID ? m?me structure que #splash-screen + panneau chat */
/* ===================================================== */
#tab-void{
  padding:0 !important;
  /* Fond noir pur (th?me sombre) */
  background: #000000;
  min-height:100%;
  --void-ui-bg:transparent;
  --void-ui-border:rgba(255, 255, 255, 0.06);
  --void-history:rgba(255, 255, 255, 0.78);
  --void-input-prefix:rgba(155, 92, 255, 0.4);
  --void-input-border:rgba(155, 92, 255, 0.15);
  --void-input-focus:rgba(155, 92, 255, 0.55);
  --void-input-text:rgba(255, 255, 255, 0.75);
  --void-placeholder:rgba(155, 92, 255, 0.2);
  --void-send-bg:rgba(155, 92, 255, 0.1);
  --void-send-border:rgba(155, 92, 255, 0.25);
  --void-send-text:#9b5cff;
}
/* Th�me sombre : m�me noir sur le chrome (�vite --bg-1 + grille derri�re l?onglet) */
html:not([data-theme="light"]) #main-app:has(#tab-void.tab-content.active) {
  background-color: #000000 !important;
  background-image: none !important;
}
html:not([data-theme="light"]) body:has(#tab-void.tab-content.active) {
  background-color: #000000 !important;
  background-image: none !important;
}
body.light-mode #tab-void{
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(200, 188, 235, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, #f4f2fa 0%, #ebe6f4 55%, #e4dff0 100%);
  --void-ui-bg:transparent;
  --void-ui-border:rgba(0, 0, 0, 0.08);
  --void-history:rgba(10, 8, 20, 0.35);
  --void-input-prefix:rgba(107, 53, 204, 0.45);
  --void-input-border:rgba(107, 53, 204, 0.2);
  --void-input-focus:rgba(107, 53, 204, 0.55);
  --void-input-text:rgba(10, 8, 20, 0.75);
  --void-placeholder:rgba(107, 53, 204, 0.25);
  --void-send-bg:rgba(107, 53, 204, 0.1);
  --void-send-border:rgba(107, 53, 204, 0.25);
  --void-send-text:#6b35cc;
}

/* Void : une seule vue ? pas de scroll sur la page, uniquement dans .void-chat-messages */
#tab-void.tab-content.active{
  display:flex !important;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  padding-bottom:0 !important;
}

#tab-void #void-chat-content{
  position:relative;
  overflow-x:hidden;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
  max-width:min(390px, 100vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  height:100%;
  max-height:none;
  background:transparent;
  box-sizing:border-box;
  padding-left:max(0px, env(safe-area-inset-left, 0px));
  padding-right:max(0px, env(safe-area-inset-right, 0px));
  padding-top:max(8px, env(safe-area-inset-top, 0px), var(--preview-safe-top, 0px));
}

/* Mobile : hauteur = viewport moins barre du bas (mini-header masqu? sur Void) */
@media (max-width: 640px){
  #tab-void #void-chat-content{
    --void-top-chrome:max(8px, env(safe-area-inset-top, 0px), var(--preview-safe-top, 0px));
    --void-nav-stack:calc(72px + env(safe-area-inset-bottom, 0px) + var(--preview-safe-bottom, 0px));
    height:calc(100svh - var(--void-top-chrome) - var(--void-nav-stack));
    max-height:calc(100svh - var(--void-top-chrome) - var(--void-nav-stack));
    min-height:0;
  }
  .shell:has(#tab-void.active){
    display:flex;
    flex-direction:column;
    height:100dvh;
    max-height:100dvh;
    overflow:hidden !important;
    box-sizing:border-box;
  }
  .shell:has(#tab-void.active) .main-area{
    display:flex !important;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    padding-bottom:0;
  }
}

@media (min-width: 641px){
  #tab-void #void-chat-content{
    flex:1 1 auto;
    min-height:0;
    height:100%;
    max-height:none;
    padding-top:12px;
  }
  .shell:has(#tab-void.active){
    height:100vh;
    max-height:100vh;
    overflow:hidden;
    align-items:stretch;
    grid-template-rows:1fr;
  }
  .shell:has(#tab-void.active) > .main-area{
    min-height:0;
    height:100%;
    max-height:100%;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
  }
}

@supports selector(:has(*)) {
  @media (max-width: 640px) {
    .shell:has(#tab-void.active) #void-chat-content{
      flex:1 1 auto;
      min-height:0;
    }
    .shell:has(#tab-void.active) .main-area{
      min-height:0;
    }
    .shell:has(#tab-void.active) #tab-void.active{
      display:flex !important;
      flex-direction:column;
      flex:1 1 auto;
      min-height:0;
    }
  }
}

/* ??? THE VOID ? m?me colonne / typo que #splash-screen (index.html) ??? */
.void-splash-root{
  position:relative;
  flex:1;
  min-height:0;
  width:100%;
  max-width:390px;
  margin:0 auto;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  overflow:hidden;
}

/* Graph compact : remonte le chat, tout tient en une vue */
/* Plus grand visuellement (~14 %) mais marge basse compens?e pour ne pas d?caler titre / chat */
.void-hero-graph{
  position:relative;
  width:min(228px, 58vw);
  aspect-ratio:1/1;
  margin:0 auto -18px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
@media (max-width: 380px){
  .void-hero-graph{
    width:min(205px, 90vw);
    margin-bottom:-17px;
  }
}

.void-splash-col{
  width:100%;
  max-width:340px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 16px 2px;
  text-align:center;
  flex-shrink:0;
}
#void-splash-title{
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  font-size:clamp(22px, 6.5vw, 30px);
  color:rgba(255,255,255,0.98);
  letter-spacing:0.18em;
  line-height:1;
  text-align:center;
  text-shadow:
    0 0 24px rgba(63,231,255,0.45),
    0 0 48px rgba(155,92,255,0.28),
    0 0 2px rgba(255,255,255,0.35);
}
#void-splash-title.void-title-glitch{ animation:void-title-glitch 120ms linear; }
@keyframes void-title-glitch{
  0%{ transform:translate(0,0) skew(0); }
  20%{ transform:translate(2px,-1px) skew(0.5deg); text-shadow:2px 0 rgba(155,92,255,0.45); }
  40%{ transform:translate(-2px,1px) skew(-0.5deg); text-shadow:-2px 0 rgba(63,231,255,0.3); }
  60%{ transform:translate(1px,0) skew(0.3deg); text-shadow:none; }
  100%{ transform:translate(0,0) skew(0); text-shadow:none; }
}
#void-splash-version{
  font-family:'Share Tech Mono',monospace;
  font-size:9px;
  color:rgba(255,255,255,0.32);
  letter-spacing:0.2em;
  margin-top:6px;
  text-align:center;
  text-transform:uppercase;
}

/* Ligne n?on entre hero (THE VOID ? init) et zone chat */
.void-sep-neon{
  flex-shrink:0;
  width:100%;
  max-width:300px;
  height:2px;
  margin:10px auto 12px;
  border-radius:2px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(63,231,255,0.15) 12%,
    rgba(63,231,255,0.95) 38%,
    rgba(155,92,255,0.9) 62%,
    rgba(63,231,255,0.55) 88%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(63,231,255,0.55),
    0 0 22px rgba(155,92,255,0.35),
    0 0 2px rgba(255,255,255,0.45) inset;
  opacity:0.95;
}
body.light-mode .void-sep-neon{
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,140,160,0.2) 15%,
    rgba(107,53,204,0.75) 50%,
    rgba(0,160,180,0.45) 85%,
    transparent 100%
  );
  box-shadow:
    0 0 8px rgba(107,53,204,0.35),
    0 0 16px rgba(0,160,180,0.2);
}

/* Chat : prend tout l?espace restant ? scroll uniquement dans les messages */
.void-chat-panel{
  position:relative;
  flex:1 1 0;
  min-height:0;
  max-height:none;
  display:flex;
  flex-direction:column;
  margin-top:0;
  padding:0;
  width:100%;
  max-width:340px;
  margin-left:auto;
  margin-right:auto;
  background:var(--void-ui-bg);
  border:1px solid var(--void-ui-border);
  border-radius:12px;
  box-shadow:none;
  overflow:hidden;
}
@media (max-width: 640px){
  .void-chat-panel{
    min-height:0;
    flex:1 1 0;
  }
  #tab-void .void-send-btn{
    min-height:44px;
    min-width:44px;
  }
  #tab-void .void-input{
    padding-top:10px;
    padding-bottom:10px;
  }
}

.void-chat-messages{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:8px 14px 4px;
  -webkit-overflow-scrolling:touch;
}

/* Bulles : noir translucide sur fond de chat transparent */
#tab-void .void-msg-void{
  align-self:flex-start;
  max-width:88%;
  padding:6px 9px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.07);
  background:rgba(0,0,0,0.44);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:'Share Tech Mono',monospace;
  font-size:10px;
  line-height:1.45;
  letter-spacing:0.03em;
  color:rgba(255,255,255,0.78);
  animation:vg-bubble-in 250ms ease;
}
#tab-void .void-msg-void-text{ white-space:pre-wrap; margin:0; }
#tab-void .void-msg-void-text::before{ content:none; }
#tab-void .void-msg-user{
  align-self:flex-end;
  max-width:88%;
  padding:6px 9px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.09);
  background:rgba(0,0,0,0.36);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:'Share Tech Mono',monospace;
  font-size:10px;
  line-height:1.45;
  letter-spacing:0.03em;
  color:rgba(255,255,255,0.82);
  text-align:right;
  white-space:pre-wrap;
  animation:vg-bubble-in 250ms ease;
}
#tab-void .void-msg-user::before{ content:none; }
@keyframes vg-bubble-in{
  from{ opacity:0; transform:translateX(8px); }
  to{ opacity:1; transform:translateX(0); }
}

#tab-void .void-typing{
  padding:8px 12px;
  display:flex;
  gap:4px;
  align-self:flex-start;
  background:rgba(0,0,0,0.44);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:8px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#tab-void .void-typing span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,0.55);
  animation:vg-dot-seq 1.3s infinite ease-in-out;
}
#tab-void .void-typing span:nth-child(2){ animation-delay:.18s; }
#tab-void .void-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes vg-dot-seq{ 0%,80%,100%{ opacity:.3; transform:scale(.85); } 40%{ opacity:1; transform:scale(1.1); } }

.void-input-row{
  margin-top:auto;
  padding:4px 14px 10px;
  display:flex;
  align-items:center;
  gap:7px;
  border-top:1px solid rgba(255,255,255,0.07);
  background:transparent;
}
.void-input-prefix{
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--void-input-prefix);
  flex-shrink:0;
}
.void-input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  border-bottom:1px solid var(--void-input-border);
  padding:4px 4px;
  color:var(--void-input-text);
  font-family:'Share Tech Mono',monospace;
  font-size:11px;
  caret-color:rgba(155,92,255,0.8);
}
.void-input::placeholder{ color:var(--void-placeholder); }
.void-input:focus{ border-bottom-color:var(--void-input-focus); }
.void-send-btn{
  width:30px;
  height:30px;
  border-radius:5px;
  border:1px solid var(--void-send-border);
  background:var(--void-send-bg);
  color:var(--void-send-text);
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.void-send-btn:hover{ filter:brightness(1.12); }

body.light-mode #void-splash-title{
  color:rgba(20,24,32,0.96);
  text-shadow:
    0 0 20px rgba(107,53,204,0.22),
    0 0 36px rgba(0,160,180,0.12);
}
body.light-mode #void-splash-version{ color:rgba(10,8,20,0.38); }
body.light-mode #tab-void .void-msg-void{
  border-color:rgba(0,0,0,0.12);
  background:rgba(0,0,0,0.14);
  color:rgba(10,8,20,0.9);
}
body.light-mode #tab-void .void-msg-user{
  border-color:rgba(0,0,0,0.14);
  background:rgba(0,0,0,0.2);
  color:rgba(10,8,20,0.88);
}
body.light-mode #tab-void .void-typing{
  border-color:rgba(0,0,0,0.12);
  background:rgba(0,0,0,0.14);
}
body.light-mode #tab-void .void-typing span{
  background:rgba(10,8,20,0.45);
}

/* ===================================================== */
/* BILAN (?VOLUTION) V2 ? mockup evolution.html           */
/* ===================================================== */
#tab-bilan #bilan-content{ padding:12px 14px 100px; display:flex; flex-direction:column; gap:12px; }
.bv2-card{ padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.bv2-k{ font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:.18em; color:rgba(255,255,255,0.35); text-transform:uppercase; }
.bv2-k-special{ color:rgba(155,92,255,0.55); }

/* TRANSFORMATION */
.bv2-kpi-row{ display:grid; gap:10px; align-items:end; }
.bv2-kpi-3{ grid-template-columns:repeat(3,1fr); }
.bv2-kpi{ display:flex; flex-direction:column; gap:3px; }
.bv2-kpi-v{ font-family:'Orbitron',sans-serif; font-weight:900; color:rgba(255,255,255,0.95); line-height:1; }
.bv2-summary{ font-family:'Manrope',sans-serif; font-size:12px; color:rgba(255,255,255,0.65); }
.bv2-projection{ font-family:'Manrope',sans-serif; font-style:italic; font-size:12px; color:rgba(155,92,255,0.60); line-height:1.5; }

/* VOID COMMENT BLOCK */
.bv2-void-block{ border-left:2px solid rgba(155,92,255,0.40); background:rgba(155,92,255,0.04); padding:10px 14px; border-radius:0 6px 6px 6px; display:flex; flex-direction:column; gap:4px; }
.bv2-void-label{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.16em; color:rgba(155,92,255,0.55); text-transform:uppercase; }
.bv2-void-text{ font-family:'Manrope',sans-serif; font-style:italic; font-size:13px; color:rgba(255,255,255,0.72); line-height:1.75; }

/* RADAR */
.bv2-radar-wrap{ display:grid; grid-template-columns:152px 1fr; gap:14px; align-items:center; }
.bv2-radar-svg{ width:100%; height:152px; }
.bv2-radar-bars{ display:flex; flex-direction:column; gap:6px; }
.bv2-stat-row{ display:grid; grid-template-columns:58px 28px 1fr; gap:8px; align-items:center; }
.bv2-stat-lbl{ font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.14em; color:rgba(255,255,255,0.45); }
.bv2-stat-val{ font-family:'Orbitron',sans-serif; font-size:14px; font-weight:700; color:rgba(255,255,255,0.95); }
.bv2-stat-bar{ height:7px; background:rgba(255,255,255,0.06); border-radius:999px; overflow:hidden; }
.bv2-stat-fill{ height:100%; border-radius:999px; transition:width .6s ease; }

/* ACTIVIT? */
.bv2-act-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bv2-period-pills, .bv2-curve-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.bv2-pill{ font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:.12em; padding:3px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.02); color:rgba(255,255,255,0.45); cursor:pointer; text-transform:uppercase; }
.bv2-pill.on{ color:rgba(63,231,255,0.95); border-color:rgba(63,231,255,0.45); }
.bv2-chart-wrap{ position:relative; }
.bv2-chart{ width:100%; height:96px; display:block; }
.bv2-date-row{ display:grid; gap:2px; font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(255,255,255,0.32); text-align:center; letter-spacing:.08em; }
.bv2-period-sum{ font-family:'Manrope',sans-serif; font-size:11px; color:rgba(255,255,255,0.62); line-height:1.4; }

/* HISTORIQUE */
.bv2-hist-head{ display:flex; justify-content:space-between; align-items:center; }
.bv2-hist-nav{ display:flex; align-items:center; gap:8px; }
.bv2-hist-nav-btn{ width:24px; height:24px; border-radius:4px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.65); cursor:pointer; font-family:'Share Tech Mono',monospace; font-size:12px; display:flex; align-items:center; justify-content:center; }
.bv2-hist-nav-btn[disabled]{ opacity:.35; cursor:not-allowed; }
.bv2-hist-week{ font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,0.55); }
.bv2-week-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.bv2-day-col{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.bv2-day-lbl{ font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(255,255,255,0.35); letter-spacing:.08em; }
.bv2-day{ width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); }
.bv2-day.idle{ background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.40); }
.bv2-day.partial{ background:rgba(255,183,0,0.35); border-color:rgba(255,183,0,0.45); color:rgba(20,24,32,0.95); }
.bv2-day.done{ background:rgba(0,232,122,0.70); border-color:rgba(0,232,122,0.85); color:rgba(20,24,32,0.95); }
.bv2-day.today{ box-shadow:0 0 0 1px rgba(63,231,255,0.85); }
.bv2-day.future{ background:rgba(255,255,255,0.02); border-color:rgba(255,255,255,0.04); color:rgba(255,255,255,0.20); }
.bv2-hist-sum{ font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(255,255,255,0.42); letter-spacing:.12em; text-align:center; }

/* Light mode */
body.light-mode .bv2-kpi-v,
body.light-mode .bv2-stat-val{ color:rgba(20,24,32,0.95); }
body.light-mode .bv2-k,
body.light-mode .bv2-stat-lbl,
body.light-mode .bv2-hist-sum{ color:rgba(20,24,32,0.55); }
body.light-mode .bv2-summary,
body.light-mode .bv2-period-sum{ color:rgba(20,24,32,0.72); }
body.light-mode .bv2-void-block{ background:rgba(107,53,204,0.05); border-left-color:rgba(107,53,204,0.45); }
body.light-mode .bv2-void-text{ color:rgba(20,24,32,0.82); }
body.light-mode .bv2-void-label{ color:rgba(107,53,204,0.70); }

/* Toast : jamais par-dessus tour / spotlight / gate (double file avec toastManager.js) */
body.tour-active #toast-container,
body.spotlight-active #toast-container,
body.protocol-gate-open #toast-container,
body.morning-body-gate-open #toast-container {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#toast-container { bottom: 88px !important; top: auto !important; max-width: 320px; }
#toast-container .ts-item{
  background: rgba(10,12,18,0.95) !important;
  border: 1px solid rgba(63,231,255,0.20) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#toast-container .ts-item ._ts-title{
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(63,231,255,0.55) !important;
  margin-bottom: 4px;
}
body.light-mode #toast-container .ts-item{
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(0,153,204,0.30) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Changelog popup ? layout overrides */
#changelog-overlay .sys-pop{
  max-width: 340px !important;
  border-radius: 12px !important;
  background: rgba(10,12,20,0.98) !important;
  border: 1px solid rgba(63,231,255,0.15) !important;
  overflow: hidden !important;
}
#changelog-overlay .sys-pop-head{
  display:none !important;
}
body.light-mode #changelog-overlay .sys-pop{
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(0,153,204,0.25) !important;
}

/* Install popup ? layout overrides */
#install-overlay .sys-pop{
  max-width: 320px !important;
  border-radius: 16px !important;
  background: rgba(10,12,20,0.98) !important;
  border: 1px solid rgba(63,231,255,0.20) !important;
  overflow: hidden !important;
}
#install-overlay .sys-pop-head{
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 18px 20px 0 !important;
  justify-content: flex-end;
}
#install-overlay .sys-pop-title{ display:none !important; }
#install-overlay .sys-pop-actions--col{
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 14px 20px 18px !important;
  margin-top: 14px;
}
body.light-mode #install-overlay .sys-pop{
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(0,153,204,0.30) !important;
}
body.light-mode #install-overlay .sys-pop-actions--col{
  border-top-color: rgba(0,0,0,0.08);
}

/* Sleep screen — au-dessus de tout sauf install PWA (99998) */
#sleep-screen{
  background: #030508 !important;
  box-shadow: inset 0 0 120px rgba(155,92,255,0.05);
  z-index: var(--z-sleep) !important;
}
#sleep-screen::before{ display: none; }
#sleep-screen #sleep-graph{ display:block; }
#sleep-screen .sleep-content{ position: relative; z-index: 1; }
#sleep-screen .sleep-icon{
  font-family:'Orbitron',sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: rgba(155,92,255,0.55);
  text-shadow: 0 0 24px rgba(155,92,255,0.35);
}
#sleep-screen .sleep-title{
  font-family:'Orbitron',sans-serif;
  font-weight: 700;
  font-size: 18px !important;
  letter-spacing: 0.20em;
  color: rgba(255,255,255,0.50);
}
#sleep-screen .sleep-sub{
  font-family:'Share Tech Mono',monospace;
  font-size: 10px !important;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.20);
}
#sleep-screen .sleep-sep{
  width: 120px; height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 18px auto;
}
#sleep-screen .sleep-reconnect{
  font-family:'Share Tech Mono',monospace;
  font-size: 11px !important;
  letter-spacing: 0.15em;
  color: rgba(63,231,255,0.35) !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}
#sleep-screen .sleep-pseudo{
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-size: 14px !important;
  color: rgba(255,255,255,0.30);
  letter-spacing: 0;
  z-index: 1;
}
body.light-mode #sleep-screen{
  background: #EAECF2 !important;
  box-shadow: inset 0 0 120px rgba(107,53,204,0.05);
}
body.light-mode #sleep-screen .sleep-title{ color: rgba(10,13,20,0.60); }
body.light-mode #sleep-screen .sleep-sub{ color: rgba(10,13,20,0.30); }
body.light-mode #sleep-screen .sleep-pseudo{ color: rgba(10,13,20,0.50); }
body.light-mode #sleep-screen .sleep-reconnect{ color: rgba(0,153,204,0.55) !important; }
/* ═══ PROTOCOLE D'ÉVEIL — GATE (sous changelog 9700, sous sommeil 9800) ═ */
#protocol-gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-protocol-gate);
  background: #08090D;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  overflow-y: auto;
}
#protocol-gate.gate-closing {
  animation: gateClose 0.6s ease-in forwards;
}
@keyframes gateClose {
  0%   { opacity: 1; transform: scale(1); }
  60%  { opacity: 0; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.06); pointer-events: none; }
}
.gate-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(63,231,255,0.5);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.gate-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  text-align: center;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.gate-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.6;
}
.gate-quests {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.gate-quest-row {
  position: relative;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gate-quest-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(63,231,255,0.4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.gate-quest-row.is-done .gate-quest-check {
  background: rgba(0,255,136,0.2);
  border-color: rgba(0,255,136,0.6);
}
.gate-quest-row.is-done .gate-quest-check::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,255,136,0.9);
}
.gate-quest-name {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  flex: 1;
}
.gate-quest-row.is-done .gate-quest-name {
  color: rgba(255,255,255,0.35);
  text-decoration: line-through;
  text-decoration-color: rgba(0,255,136,0.4);
}
.gate-progress-wrap {
  width: 100%;
  max-width: 380px;
  margin-bottom: 40px;
}
.gate-progress-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.gate-progress-bar {
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 1px;
  overflow: hidden;
}
.gate-progress-fill {
  height: 100%;
  background: rgba(0,255,136,0.7);
  border-radius: 1px;
  transition: width 0.4s ease;
}
.gate-skip {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.2);
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  -webkit-tap-highlight-color: transparent;
}
.gate-skip:hover { color: rgba(255,255,255,0.4); }
.gate-skip-hint {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255,255,255,0.28);
  text-align: center;
  max-width: 320px;
  margin: -28px auto 0;
  padding: 0 12px 8px;
}
.gate-quest-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.gate-quest-top {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.gate-quest-tasks {
  width: 100%;
  padding: 10px 0 2px 30px;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.gate-task {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
  padding-left: 10px;
  border-left: 2px solid rgba(63,231,255,0.3);
}
.gate-task:last-child { margin-bottom: 0; }

/* Signaux matin (après protocole, au-dessus du gate précédent — z-index token) */
#morning-body-gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-morning-body-gate, 9450);
  background: rgba(3, 5, 8, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  overflow-y: auto;
}
#morning-body-gate.mbg-closing {
  animation: mbgClose 0.45s ease-in forwards;
}
@keyframes mbgClose {
  from { opacity: 1; }
  to { opacity: 0; pointer-events: none; }
}
.mbg-card {
  width: 100%;
  max-width: 400px;
  position: relative;
}
.mbg-section {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}
.mbg-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid rgba(63, 231, 255, 0.35);
  border-left: 1.5px solid rgba(63, 231, 255, 0.35);
  border-radius: 2px 0 0 0;
  pointer-events: none;
}
.mbg-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-bottom: 1.5px solid rgba(63, 231, 255, 0.35);
  border-right: 1.5px solid rgba(63, 231, 255, 0.35);
  border-radius: 0 0 2px 0;
  pointer-events: none;
}
.mbg-k {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(155, 92, 255, 0.55);
  margin-bottom: 12px;
}
.mbg-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.mbg-step {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 700;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(63, 231, 255, 0.35);
  background: rgba(63, 231, 255, 0.08);
  color: rgba(63, 231, 255, 0.95);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.mbg-step:hover {
  background: rgba(63, 231, 255, 0.14);
  border-color: rgba(63, 231, 255, 0.55);
}
.mbg-val {
  min-width: 120px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.88);
}
.mbg-val.mbg-mood {
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.35;
}
.mbg-frame .mbg-frame-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.mbg-pill {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.mbg-pill:hover {
  border-color: rgba(63, 231, 255, 0.35);
  color: rgba(255, 255, 255, 0.88);
}
.mbg-pill-v {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(63, 231, 255, 0.9);
}
.mbg-micro {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin: 12px 0 0 0;
  line-height: 1.5;
}
.param-save-btn.mbg-primary {
  width: 100%;
  margin-top: 8px;
}
body.light-mode #morning-body-gate {
  background: rgba(234, 236, 242, 0.96);
}
body.light-mode #morning-body-gate .gate-title {
  color: rgba(10, 13, 20, 0.92);
}
body.light-mode #morning-body-gate .gate-sub {
  color: rgba(10, 13, 20, 0.5);
}
body.light-mode .mbg-section {
  background: rgba(255, 255, 255, 0.85);
}
body.light-mode .mbg-val {
  color: rgba(10, 13, 20, 0.88);
}
body.light-mode .mbg-step {
  border-color: rgba(0, 153, 204, 0.45);
  background: rgba(0, 153, 204, 0.1);
  color: rgba(0, 100, 140, 0.95);
}

/* Quêtes · bandeau protocole d'éveil (J1) */
.awaken-proto-card {
  position: relative;
  margin: 4px 0 14px;
  padding: 16px 16px 14px;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
  --bracket-color: rgba(255,183,0,0.45);
}
.awaken-proto-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-top: 1.5px solid var(--bracket-color);
  border-left: 1.5px solid var(--bracket-color);
  border-radius: 2px 0 0 0;
  pointer-events: none;
}
.awaken-proto-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-bottom: 1.5px solid var(--bracket-color);
  border-right: 1.5px solid var(--bracket-color);
  border-radius: 0 0 2px 0;
  pointer-events: none;
}
.awaken-proto-k {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,183,0,0.88);
  margin-bottom: 12px;
}
.awaken-proto-lead {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  margin: 0 0 14px;
}
.awaken-proto-lead strong { color: rgba(255,255,255,0.85); font-weight: 600; }
.awaken-proto-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
}
.awaken-proto-list li { margin-bottom: 8px; }
.awaken-proto-list li:last-child { margin-bottom: 0; }
.awaken-proto-name {
  color: rgba(63,231,255,0.92);
  font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════════════ */

/* ═══ QUEST CARD — LAYOUT UNIFIÉ ═══════════════════════════════════════ */

/* Timer */
.qc-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 16px;
}
.qc-timer-ring {
  position: relative;
  width: 84px;
  height: 84px;
  margin-bottom: 10px;
}
.qc-timer-ring svg {
  width: 84px;
  height: 84px;
  transform: rotate(-90deg);
}
.qc-timer-ring .ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 4;
}
.qc-timer-ring .ring-fill {
  fill: none;
  stroke: rgba(255,183,0,0.85);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 226;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s linear;
}
.qc-timer-ring .ring-fill.ring-done {
  stroke: rgba(0,255,136,0.85);
}
.qc-timer-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,183,0,0.9);
}
.qc-timer-value.ring-done {
  color: rgba(0,255,136,0.9);
}
.qc-timer-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}
.qc-timer-controls {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.qc-timer-btn {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255,183,0,0.06);
  border: 1px solid rgba(255,183,0,0.3);
  color: rgba(255,183,0,0.8);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qc-timer-btn:hover { background: rgba(255,183,0,0.12); }

/* Routine matin — cases + chrono 20 min */
.routine-matin-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.routine-matin-hint {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
  line-height: 1.45;
}
.routine-matin-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.routine-matin-step.is-on { border-color: rgba(63,231,255,0.35); background: rgba(63,231,255,0.04); }
.routine-matin-step input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #3FE7FF;
  flex-shrink: 0;
  cursor: pointer;
  pointer-events: none;
}
.routine-matin-step span {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  line-height: 1.45;
}

/* Photo */
.qc-photo {
  padding: 16px 0;
}
.qc-photo-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(63,231,255,0.5);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.qc-photo-preview {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
  display: none;
}
.qc-photo-preview.has-photo { display: block; }
.qc-photo-trigger {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(63,231,255,0.05);
  border: 1px solid rgba(63,231,255,0.25);
  color: rgba(63,231,255,0.8);
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  width: 100%;
  display: block;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.qc-photo-trigger:hover { background: rgba(63,231,255,0.1); }

/* Corps humain */
.qc-body {
  padding: 16px 0;
}
.qc-body-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(255,183,0,0.5);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.qc-body-svg-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.qc-body-svg-wrap svg {
  width: 120px;
  height: auto;
  max-height: 200px;
}
.qc-body-svg-wrap svg [data-muscle] {
  transition: fill 0.3s, opacity 0.3s;
}
.qc-body-svg-wrap svg [data-muscle].muscle-primary {
  fill: rgba(255,183,0,0.35) !important;
  opacity: 1 !important;
  animation: musclePulse 2s ease-in-out infinite;
}
.qc-body-svg-wrap svg [data-muscle].muscle-secondary {
  fill: rgba(63,231,255,0.15) !important;
  opacity: 1 !important;
}
@keyframes musclePulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

/* Légende muscles */
.qc-muscle-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.qc-muscle-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.qc-muscle-tag.primary {
  background: rgba(255,183,0,0.08);
  color: rgba(255,183,0,0.8);
  border: 1px solid rgba(255,183,0,0.2);
}
.qc-muscle-tag.secondary {
  background: rgba(63,231,255,0.05);
  color: rgba(63,231,255,0.6);
  border: 1px solid rgba(63,231,255,0.15);
}
.qc-muscle-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.qc-muscle-tag.primary .qc-muscle-dot { background: rgba(255,183,0,0.8); }
.qc-muscle-tag.secondary .qc-muscle-dot { background: rgba(63,231,255,0.6); }

/* Steps texte */
.qc-steps {
  padding: 0 0 8px;
}
.qc-steps-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.qc-step-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.qc-step-item:last-child { border-bottom: none; }
.qc-step-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  color: rgba(255,183,0,0.5);
  min-width: 18px;
  padding-top: 1px;
}
.qc-step-text {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  flex: 1;
}
/* ════════════════════════════════════════════════════════════════════════ */

/* ═══ PLANNING — VUE JOUR ═══════════════════════════════════════════════ */
#tab-planning {
  padding-bottom: 80px;
}
.plan-day-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
  user-select: none;
}
.plan-day-arrow {
  font-family: 'Share Tech Mono', monospace;
  font-size: 18px;
  color: rgba(63,231,255,0.5);
  cursor: pointer;
  padding: 8px 12px;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
}
.plan-day-arrow:hover { color: rgba(63,231,255,0.9); }
.plan-day-arrow:disabled { color: rgba(255,255,255,0.12); cursor: default; }
.plan-day-info { text-align: center; }
.plan-day-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.1em;
}
.plan-day-meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-top: 2px;
}
.plan-day-content {
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  touch-action: pan-y;
}
.plan-period-block {
  position: relative;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 14px 16px;
}
.plan-period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.plan-period-badge {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.plan-period-badge.matin {
  background: rgba(255,183,0,0.08);
  color: rgba(255,183,0,0.85);
  border: 1px solid rgba(255,183,0,0.2);
}
.plan-period-badge.journee {
  background: rgba(63,231,255,0.06);
  color: rgba(63,231,255,0.8);
  border: 1px solid rgba(63,231,255,0.18);
}
.plan-period-badge.soir {
  background: rgba(155,92,255,0.08);
  color: rgba(155,92,255,0.85);
  border: 1px solid rgba(155,92,255,0.2);
}
.plan-period-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-top: 1.5px solid;
  border-left: 1.5px solid;
  border-radius: 2px 0 0 0;
  pointer-events: none;
}
.plan-period-block::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-bottom: 1.5px solid;
  border-right: 1.5px solid;
  border-radius: 0 0 2px 0;
  pointer-events: none;
}
.plan-period-block[data-period="matin"]::before,
.plan-period-block[data-period="matin"]::after { border-color: rgba(255,183,0,0.4); }
.plan-period-block[data-period="journee"]::before,
.plan-period-block[data-period="journee"]::after { border-color: rgba(63,231,255,0.4); }
.plan-period-block[data-period="soir"]::before,
.plan-period-block[data-period="soir"]::after { border-color: rgba(155,92,255,0.4); }
.plan-period-range {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
}
.plan-slot-wrap { margin-bottom: 12px; }
.plan-slot-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.plan-slot-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-slot-sep {
  font-family: 'Share Tech Mono', monospace;
  color: rgba(255,255,255,0.3);
  font-size: 12px;
}
.plan-slot-time {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 9px 10px;
  color: rgba(255,255,255,0.85);
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  width: 80px;
  text-align: center;
  outline: none;
  -webkit-appearance: none;
}
.plan-slot-time:focus { border-color: rgba(63,231,255,0.4); background: rgba(255,255,255,0.06); }
.plan-slot-time[data-period="matin"]:focus { border-color: rgba(255,183,0,0.4); }
.plan-slot-time[data-period="soir"]:focus { border-color: rgba(155,92,255,0.4); }
.plan-themes-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.plan-themes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.plan-theme-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.plan-theme-tag.selected {
  background: rgba(63,231,255,0.08);
  border-color: rgba(63,231,255,0.4);
  color: rgba(63,231,255,0.9);
}
.plan-theme-tag[data-period="matin"].selected {
  background: rgba(255,183,0,0.08);
  border-color: rgba(255,183,0,0.4);
  color: rgba(255,183,0,0.9);
}
.plan-theme-tag[data-period="soir"].selected {
  background: rgba(155,92,255,0.08);
  border-color: rgba(155,92,255,0.4);
  color: rgba(155,92,255,0.9);
}
.plan-cycle-wrap {
  margin: 16px 20px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan-cycle-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  flex: 1;
}
.plan-cycle-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.plan-cycle-toggle input {
  opacity: 0;
  width: 0; height: 0;
  position: absolute;
}
.plan-cycle-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.plan-cycle-toggle input:checked + .plan-cycle-toggle-track {
  background: rgba(63,231,255,0.18);
  border-color: rgba(63,231,255,0.4);
}
.plan-cycle-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: transform 0.2s, background 0.2s;
}
.plan-cycle-toggle input:checked + .plan-cycle-toggle-track::after {
  transform: translateX(18px);
  background: rgba(63,231,255,0.9);
}
/* Cycles enregistrés + tableau récap */
.plan-preset-panel {
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}
.plan-preset-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(63,231,255,0.55);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.plan-preset-hint {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.45);
  margin: 0 0 14px 0;
}
.plan-preset-save-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 420px) {
  .plan-preset-save-row {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
  }
  .plan-preset-save-row .plan-preset-input {
    flex: 1;
    min-width: 0;
  }
  .plan-preset-save-row .plan-preset-save {
    flex-shrink: 0;
    width: auto;
    min-width: 120px;
  }
}
.plan-preset-input.sys-input {
  margin: 0;
  font-size: 14px;
}
.plan-preset-save {
  white-space: nowrap;
}
.plan-preset-update {
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  font-size: 10px;
}
.plan-preset-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-preset-empty {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
  padding: 8px 0;
}
.plan-preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.plan-preset-row.is-active {
  border-color: rgba(63,231,255,0.28);
  background: rgba(63,231,255,0.05);
}
.plan-preset-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.plan-preset-name {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-preset-badge {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: rgba(63,231,255,0.75);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(63,231,255,0.25);
}
.plan-preset-actions {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  align-items: center;
}
.plan-preset-link,
.plan-preset-del {
  font-size: 10px !important;
  padding: 6px 8px !important;
}
.plan-recap-section {
  margin: 16px 0 8px;
}
.plan-recap-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0 4px;
}
.plan-recap-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px 6px;
}
.plan-recap-table {
  width: 100%;
  min-width: 320px;
  border-collapse: separate;
  border-spacing: 0;
}
.plan-recap-corner {
  width: 52px;
}
.plan-recap-th {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(63,231,255,0.55);
  text-align: center;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.plan-recap-day {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-align: left;
  padding: 10px 8px 10px 4px;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  width: 52px;
}
.plan-recap-td {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.72);
  text-align: center;
  padding: 8px 4px;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  border-left: 1px solid rgba(255,255,255,0.04);
}
.plan-recap-slot {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  line-height: 1.35;
}
.plan-recap-icons {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.plan-recap-dash {
  color: rgba(255,255,255,0.2);
  font-size: 14px;
}
body.light-mode .plan-preset-hint { color: rgba(20,24,32,0.5); }
body.light-mode .plan-preset-name { color: rgba(20,24,32,0.9); }
body.light-mode .plan-preset-row { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.06); }
body.light-mode .plan-preset-row.is-active { border-color: rgba(0,153,204,0.35); background: rgba(0,153,204,0.06); }
body.light-mode .plan-recap-td { border-color: rgba(0,0,0,0.06); color: rgba(20,24,32,0.75); }
body.light-mode .plan-recap-day { color: rgba(20,24,32,0.55); }
/* ════════════════════════════════════════════════════════════════════════ */


/* ═══ EQUIPMENT SECTION ═════════════════════════════════════════════════ */
.eq-body-inner {
  padding: 6px 0 12px;
}
.eq-blk-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  margin: 10px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eq-blk-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}
.eq-lieu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.eq-lieu-card {
  position: relative;
  padding: 14px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.eq-lieu-card:hover { background: rgba(255,255,255,0.05); }
.eq-lieu-card.sel {
  border-color: rgba(255,183,0,0.45);
  background: rgba(255,183,0,0.06);
}
.eq-lieu-card.sel::after {
  content: '✓';
  position: absolute;
  top: 6px; right: 8px;
  font-size: 9px;
  color: rgba(255,183,0,0.7);
  font-family: 'Share Tech Mono', monospace;
}
.eq-lieu-icon { font-size: 22px; margin-bottom: 6px; }
.eq-lieu-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  line-height: 1.3;
}
.eq-lieu-card.sel .eq-lieu-label { color: rgba(255,183,0,0.9); }
.eq-gym-sub {
  margin-top: 8px;
  background: rgba(255,183,0,0.04);
  border: 1px solid rgba(255,183,0,0.12);
  border-radius: 8px;
  padding: 10px 12px;
}
.eq-cat {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(63,231,255,0.35);
  text-transform: uppercase;
  padding: 10px 0 4px;
  border-bottom: 1px solid rgba(63,231,255,0.07);
  margin-bottom: 2px;
}
.eq-row {
  display: flex;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  cursor: pointer;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.eq-row:last-of-type { border-bottom: none; }
.eq-chk {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.eq-row.on .eq-chk {
  background: rgba(0,255,136,0.1);
  border-color: rgba(0,255,136,0.5);
}
.eq-row.on .eq-chk::after {
  content: '';
  width: 5px; height: 8px;
  border-right: 1.5px solid rgba(0,255,136,0.9);
  border-bottom: 1.5px solid rgba(0,255,136,0.9);
  transform: rotate(45deg) translate(-1px,-1px);
}
.eq-name {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  flex: 1;
}
.eq-row.on .eq-name { color: rgba(255,255,255,0.4); }
.eq-hint {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: rgba(0,255,136,0.5);
  letter-spacing: 0.08em;
}
.eq-sub-detail {
  display: none;
  padding: 7px 0 5px 28px;
  flex-direction: column;
  gap: 6px;
}
.eq-sub-detail.vis { display: flex; }
.eq-sub-lbl {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.eq-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.eq-chip {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.eq-chip.sel {
  background: rgba(0,255,136,0.07);
  border-color: rgba(0,255,136,0.3);
  color: rgba(0,255,136,0.8);
}
.eq-chip.sel-warn {
  background: rgba(255,183,0,0.08);
  border-color: rgba(255,183,0,0.35);
  color: rgba(255,183,0,0.85);
}
.eq-band-chip {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
  border: 1px solid;
  opacity: 0.4;
  -webkit-tap-highlight-color: transparent;
}
.eq-band-chip.sel { opacity: 1; }
.eq-band-chip.by { background: rgba(255,220,0,0.06); border-color: rgba(255,220,0,0.3); color: rgba(255,220,0,0.9); }
.eq-band-chip.br { background: rgba(255,60,60,0.06); border-color: rgba(255,60,60,0.3); color: rgba(255,90,90,0.9); }
.eq-band-chip.bg { background: rgba(0,200,80,0.06); border-color: rgba(0,200,80,0.3); color: rgba(0,220,90,0.9); }
.eq-band-chip.bn { background: rgba(160,80,255,0.06); border-color: rgba(160,80,255,0.3); color: rgba(180,100,255,0.9); }
.eq-kg-row { display: flex; align-items: center; gap: 8px; }
.eq-kg-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  padding: 6px 8px;
  color: rgba(255,255,255,0.85);
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  width: 62px;
  text-align: center;
  outline: none;
  -webkit-appearance: none;
}
.eq-kg-input:focus { border-color: rgba(63,231,255,0.4); }
.eq-kg-unit {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
}
/* ════════════════════════════════════════════════════════════════════════ */