/* ============================================================
   ÉCHELLE TYPOGRAPHIQUE — neuf crans, tous entiers
   ------------------------------------------------------------
   10 · 11 · 12 · 13 · 14 · 16 · 18 · 22 · 28

   10 micro (horodatages, pastilles) — 11 étiquettes et plancher mobile (v244)
   12 texte secondaire — 13 corps de la console — 14 champs sur ordinateur
   16 titre de carte — 18 titre de module — 22 en-tête de page — 28 chiffre d'affiche

   Avant v367, la feuille comptait 33 valeurs distinctes dont neuf demi-pixels :
   chaque écran avait été réglé pour sa propre gueule, sans remonter à une
   maquette. Toute taille nouvelle se choisit dans cette liste ; le contrôle est
   dans test/v367-test.js (il refuse un demi-pixel comme une valeur hors liste).
   Les deux seuls écarts tolérés sont des décisions, pas des oublis : 16 px pour
   les champs sur écran tactile (anti-zoom iOS, v366) et les tailles portées par
   les bannières et les aperçus de messages Discord, écrites en dur dans le JS.
   ============================================================ */
/* ============================================================
   BotDev — Dashboard v2 (inspiré DraftBot) : shell + sidebar
   ============================================================ */
:root {
  /* v377 — chevron unique, dessiné par un masque (voir plus bas) */
  --chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 9.6 12 15.2l5.6-5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --d-bg: #0e0f15;
  --d-side: #14151f;
  --d-card: #1a1c28;
  --d-card2: #20222f;
  --d-border: #2a2d3d;
  --d-text: #e9eaf2;
  --d-dim: #8b8fa3;
  /* Identité Optimus Prime : Argile (terracotta du logo) — remplaçable au runtime */
  --d-accent: #e07a5f;
  --d-accent2: #c95b49;
  --d-accent-rgb: 224,122,95;
  --d-green: #3ba55d;
  --d-red: #ed4245;
  --d-yellow: #fee75c;
}

.dash-shell { display: flex; min-height: calc(100vh - 56px); }

/* ---------- Sidebar ---------- */
.dash-side {
  width: 256px; flex-shrink: 0; background: var(--d-side);
  border-right: 1px solid var(--d-border);
  display: flex; flex-direction: column;
  position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto;
}
.dash-side-section {
  padding: 14px 16px 6px; font-size: 11px; font-weight: 800;
  letter-spacing: 1.2px; color: #5c6074; text-transform: uppercase;
}
.dash-side-item {
  display: flex; align-items: center; gap: 11px; width: calc(100% - 16px);
  margin: 2px 8px; text-align: left;
  background: none; border: none; color: var(--d-dim); font-size: 13px;
  font-weight: 650; padding: 7px 10px; cursor: pointer; font-family: inherit;
  border-radius: 8px; transition: .13s;
}
.dash-side-item:hover { background: rgba(var(--d-accent-rgb), .08); color: var(--d-text); }
.dash-side-item.active {
  background: rgba(var(--d-accent-rgb), 0.15);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--d-accent-rgb), .25);
}
.dash-side-item .ico {
  flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 16px; border-radius: 8px;
  background: rgba(255,255,255,.05); transition: .13s;
}
.dash-side-item:hover .ico { background: rgba(255,255,255,.08); }
.dash-side-item.active .ico {
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2));
  box-shadow: 0 4px 12px -4px var(--d-glow);
}
.dash-side-foot { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--d-border); font-size: 12px; color: var(--d-dim); }

/* ---------- Main ---------- */
.dash-main { flex: 1; min-width: 0; padding: 22px 26px 60px; }

.dash-topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.dash-server-pick {
  display: flex; align-items: center; gap: 10px; background: var(--d-card);
  border: 1px solid var(--d-border); border-radius: 12px; padding: 8px 14px;
  flex: 1; min-width: 220px; max-width: 420px;
}
.dash-server-pick img { width: 34px; height: 34px; border-radius: 8px; }
.dash-server-pick select {
  background: transparent; border: none; color: var(--d-text); font-weight: 700;
  font-size: 14px; outline: none; flex: 1; font-family: inherit;
}
.dash-server-pick select option { background: var(--d-card); }
.dash-topbar-actions { margin-left: auto; display: flex; gap: 9px; }

/* ---------- Cartes module ---------- */
.dash-module-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.dash-module-header .m-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 22px;
  background: linear-gradient(135deg, rgba(var(--d-accent-rgb), .22), rgba(139,92,246,.18));
  border: 1px solid rgba(var(--d-accent-rgb), .3);
}
.dash-module-header h1 { font-size: 22px; }
.dash-module-header .sub { color: var(--d-dim); font-size: 13px; margin-top: 2px; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.dash-card {
  background: var(--d-card); border: 1px solid var(--d-border); border-radius: 12px;
  padding: 20px 22px; transition: .15s;
}
.dash-card:hover { border-color: #343850; }
.dash-card h3 { font-size: 16px; display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.dash-card .desc { color: var(--d-dim); font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.dash-card .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.dash-stat {
  background: var(--d-card); border: 1px solid var(--d-border); border-radius: 12px;
  padding: 16px 18px;
}
.dash-stat .val { font-size: 22px; font-weight: 800; }
.dash-stat .lbl { color: var(--d-dim); font-size: 12px; margin-top: 2px; }

/* ---------- Tableaux ---------- */
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th {
  text-align: left; color: var(--d-dim); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; padding: 8px 10px;
  border-bottom: 1px solid var(--d-border);
}
.dash-table td { padding: 10px; border-bottom: 1px solid #222434; font-size: 14px; }
.dash-table tr:last-child td { border-bottom: none; }

/* ---------- Entrées ---------- */
.dash-input, .dash-select, textarea.dash-input {
  background: var(--d-card2); color: var(--d-text);
  border: 1px solid var(--d-border); border-radius: 8px;
  padding: 9px 12px; font-size: 13px; width: 100%; font-family: inherit; outline: none;
  transition: border-color .12s;
}
.dash-input:focus, .dash-select:focus, textarea.dash-input:focus { border-color: var(--d-accent); }
.dash-label {
  display: block; font-size: 11px; font-weight: 700; color: var(--d-dim);
  text-transform: uppercase; letter-spacing: .5px; margin: 12px 0 5px;
}
.dash-btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--d-card2);
  color: var(--d-text); border: 1px solid var(--d-border); border-radius: 8px;
  padding: 8px 15px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit;
  transition: .12s;
}
.dash-btn:hover { border-color: var(--d-accent); transform: translateY(-1px); }
.dash-btn-primary {
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2));
  border: none; color: #fff; box-shadow: 0 3px 14px rgba(var(--d-accent-rgb), .35);
}
.dash-btn-danger { background: rgba(237,66,69,.12); color: #ff8a8d; border-color: rgba(237,66,69,.4); }
.dash-btn-sm { padding: 6px 11px; font-size: 12px; }
.dash-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 12px; background: var(--d-card2); border: 1px solid var(--d-border);
}
.dash-badge.ok { color: #5be087; border-color: rgba(59,165,93,.4); }
.dash-badge.warn { color: #ffd75e; border-color: rgba(254,231,92,.4); }
.dash-badge.bad { color: #ff8a8d; border-color: rgba(237,66,69,.4); }

.dash-empty { text-align: center; padding: 40px 16px; color: var(--d-dim); }
.dash-empty .big { font-size: 28px; margin-bottom: 8px; }

/* ---------- Responsive mobile ---------- */
@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dash-shell { flex-direction: column; }
  .dash-main { padding: 14px 12px 96px; }

  /* Sidebar = barre d'onglets horizontale défilante, collée en haut */
  .dash-side {
    width: 100%; height: auto; position: sticky; top: 56px; z-index: 50;
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--d-border);
    background: rgba(20, 21, 31, .96); backdrop-filter: blur(8px);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .dash-side::-webkit-scrollbar { display: none; }
  .dash-side-section, .dash-side-foot { display: none; }
  .dash-side-item {
    flex: 0 0 auto; min-height: 46px; padding: 12px 16px;
    border-left: none; border-bottom: 3px solid transparent; white-space: nowrap;
    font-size: 13px;
  }
  .dash-side-item.active { border-bottom-color: var(--d-accent); background: rgba(var(--d-accent-rgb), .08); }

  /* Topbar : le sélecteur prend toute la largeur, boutons en dessous */
  .dash-topbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .dash-server-pick { max-width: 100%; }
  .dash-topbar-actions { margin-left: 0; flex-wrap: wrap; }
  .dash-topbar-actions .dash-btn { flex: 1; justify-content: center; min-height: 44px; }

  /* Grille et cartes en une colonne */
  .dash-grid { grid-template-columns: 1fr; }
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dash-card { padding: 16px 15px; }

  /* En-tête de module plus compact */
  .dash-module-header { gap: 10px; }
  .dash-module-header .m-icon { width: 40px; height: 40px; font-size: 18px; }
  .dash-module-header h1 { font-size: 18px; }

  /* Boutons et champs : zones tactiles confortables */
  .dash-btn { min-height: 42px; padding: 10px 16px; }
  .dash-btn-sm { min-height: 36px; }
  .dash-input, .dash-select, textarea.dash-input { font-size: 16px; padding: 11px 12px; }
  .dash-label { font-size: 12px; }

  /* Tableaux : défilement horizontal */
  .dash-table { display: block; overflow-x: auto; white-space: nowrap; }
  .dash-table th, .dash-table td { padding: 9px 10px; }
}

/* ============================================================
   Hoxera 2.0 — Membres, statistiques, annonces, filtres
   ============================================================ */

/* ---------- Carte membre ---------- */
.dash-member {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid #222434; padding: 10px 2px;
}
.dash-member:last-child { border-bottom: none; }
.m-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--d-card2); flex-shrink: 0; }
/* v298 — décoration d'avatar Discord : image superposée autour de l'avatar
   (le trou central fait 80 % du canvas de la décoration → taille 125 %). */
.deco-wrap { position: relative; display: inline-flex; flex-shrink: 0; line-height: 0; }
.deco-wrap img.deco-img {
  position: absolute; left: 50%; top: 50%; width: 125%; height: 125%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 2;
  border-radius: 0; background: none; object-fit: contain; flex: none;
}
.m-info { flex: 1; min-width: 0; }
.m-info b { font-size: 14px; display: block; }
.m-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.m-role {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px;
  background: rgba(var(--d-accent-rgb), .14); color: #aab1ff;
}
.m-meta { color: var(--d-dim); font-size: 12px; margin-top: 3px; }
.m-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Filtres (journaux, jours d'annonces) ---------- */
.dash-filter-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin-top: 6px;
}
.dash-filter {
  display: flex; align-items: center; gap: 9px;
  background: var(--d-card2); border: 1px solid var(--d-border);
  border-radius: 8px; padding: 9px 12px; cursor: pointer; transition: .12s;
}
.dash-filter:hover { border-color: var(--d-accent); }
.dash-filter input { accent-color: var(--d-accent); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.dash-filter span { display: flex; flex-direction: column; }
.dash-filter b { font-size: 13px; }
.dash-filter small { color: var(--d-dim); font-size: 11px; }

/* ---------- Graphiques (barres) ---------- */
.chart {
  display: flex; align-items: flex-end; gap: 8px;
  height: 130px; padding: 6px 4px 0;
}
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bar-val { font-size: 11px; font-weight: 700; color: var(--d-dim); margin-bottom: 3px; }
.bar {
  width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px;
  min-height: 4px; transition: height .4s ease;
  box-shadow: 0 3px 10px rgba(var(--d-accent-rgb), .25);
}
.bar-lbl { font-size: 11px; color: var(--d-dim); margin-top: 5px; white-space: nowrap; }

/* ---------- Embellissements globaux 2.0 ---------- */
.dash-stat { position: relative; overflow: hidden; transition: .15s; }
.dash-stat:hover { border-color: var(--d-accent); transform: translateY(-2px); }
.dash-stat .val { background: linear-gradient(120deg, var(--d-text), #aab1ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dash-card { position: relative; }
.dash-card h3 { font-size: 16px; }
.dash-btn-primary:hover { filter: brightness(1.1); box-shadow: 0 5px 18px rgba(var(--d-accent-rgb), .45); }
.dash-badge.ok { background: rgba(59,165,93,.12); }
.dash-badge.warn { background: rgba(254,231,92,.1); }

@media (max-width: 700px) {
  .dash-member { flex-wrap: wrap; }
  .m-actions { width: 100%; justify-content: flex-start; }
  .dash-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-filter { min-width: 0; }
  .dash-filter span { min-width: 0; overflow: hidden; }
  .chart { gap: 4px; }
  .bar { max-width: 100%; }
}

/* ============================================================
   Hoxera 2.5 — Checklist de configuration, aperçu d'embeds
   ============================================================ */

/* ---------- Checklist de configuration ---------- */
.dash-checklist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 8px;
}
.check-item {
  display: flex; align-items: center; gap: 9px;
  background: var(--d-card2); border: 1px solid var(--d-border);
  border-radius: 8px; padding: 10px 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--d-text); text-align: left;
  transition: .13s;
}
.check-item:hover { border-color: var(--d-accent); transform: translateY(-1px); }
.check-item .check-ico { font-size: 16px; flex-shrink: 0; }
.check-item .check-label { flex: 1; }
.check-item .check-go { font-size: 11px; color: var(--d-dim); opacity: 0; transition: .13s; white-space: nowrap; }
.check-item:hover .check-go { opacity: 1; color: var(--d-accent); }
.check-item.done { opacity: .82; }
.check-item.done .check-label { text-decoration: none; }
.check-item:not(.done) { border-style: dashed; }

/* ---------- Aperçu d'embed (façon Discord) ---------- */
.embed-box {
  background: #2b2d31; border-radius: 4px; padding: 12px 14px;
  color: #dbdee1; font-size: 13px; line-height: 1.55; max-width: 440px;
}

@media (max-width: 700px) {
  .dash-checklist { grid-template-columns: 1fr; } /* une colonne : libellés complets */
  .check-item { min-width: 0; }
  .check-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   Hoxera — Mode Android (téléphone)
   Navigation basse style Material + app bar collante + tactile
   ============================================================ */

/* ---------- Barre de navigation basse (desktop : cachée) ---------- */
.dash-bnav { display: none; }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  /* Le corps se comporte comme une app : pas de zoom fantôme, pas de
     surbrillance bleue, pas de tirer-pour-rafraîchir accidentel. */
  body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
    font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  }

  /* ---------- App bar (haut) : la SEULE barre collante ---------- */
  .dash-topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(14, 15, 21, .94); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin: 0 -12px 14px; padding: calc(10px + env(safe-area-inset-top)) 12px 12px;
    border-bottom: 1px solid var(--d-border);
  }
  .dash-server-pick {
    min-height: 48px; border-radius: 12px;
    background: var(--d-card); box-shadow: 0 2px 10px rgba(0,0,0,.25);
  }
  .dash-server-pick select { font-size: 16px; min-height: 44px; }
  .dash-server-pick img { width: 38px; height: 38px; border-radius: 12px; }
  .dash-topbar { flex-direction: row; align-items: center; gap: 10px; }
  .dash-topbar-actions { margin-left: auto; }
  .dash-topbar-actions .dash-btn { flex: 0 0 auto; }

  /* ---------- La sidebar devient inutile : la nav basse la remplace ---------- */
  .dash-side { display: none; }

  /* ---------- Barre de navigation basse (Material) ---------- */
  .dash-bnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(20, 21, 31, .97); backdrop-filter: blur(14px);
    border-top: 1px solid var(--d-border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
  }
  .bnav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; color: var(--d-dim);
    font-family: inherit; font-size: 11px; font-weight: 700;
    padding: 8px 2px 6px; border-radius: 12px; cursor: pointer;
    min-height: 52px; position: relative; transition: .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .bnav-item:active { transform: scale(.92); }
  .bnav-ico {
    font-size: 22px; line-height: 1; transition: .15s;
    border-radius: 999px; padding: 3px 13px;
  }
  .bnav-label { letter-spacing: .2px; }
  .bnav-item.active { color: #fff; }
  .bnav-item.active .bnav-ico {
    background: rgba(var(--d-accent-rgb), .18);
    transform: translateY(-1px);
    filter: drop-shadow(0 2px 8px rgba(var(--d-accent-rgb), .6));
  }
  .bnav-item.active::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 30px; height: 3px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--d-accent), var(--d-accent2));
  }

  /* ---------- Feuille « Plus » (bottom sheet) ---------- */
  .sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sheet-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--d-card2); border: 1px solid var(--d-border);
    border-radius: 12px; padding: 12px; color: var(--d-text);
    font-family: inherit; font-size: 14px; font-weight: 600;
    text-align: left; cursor: pointer; min-height: 52px; min-width: 0; transition: .12s;
    -webkit-tap-highlight-color: transparent;
  }
  .sheet-item:active { transform: scale(.96); border-color: var(--d-accent); }
  .sheet-item.active { border-color: var(--d-accent); background: rgba(var(--d-accent-rgb), .12); }
  .sheet-ico { font-size: 18px; }

  /* ---------- Contenu : laisser la place à la barre basse ---------- */
  .dash-main { padding: 8px 12px calc(96px + env(safe-area-inset-bottom)); }

  /* ---------- Zones tactiles ≥ 44 px (recommandation Android) ---------- */
  .dash-btn { min-height: 46px; padding: 10px 16px; }
  .dash-btn-sm { min-height: 40px; }
  .dash-filter { min-height: 48px; }
  .check-item { min-height: 48px; }
  .check-go { display: none; } /* « Configurer → » n'apparaît que sur ordinateur (au survol) */
  .switch { width: 52px; height: 30px; }
  .switch .slider::before { height: 22px; width: 22px; left: 4px; top: 4px; }
  .switch input:checked + .slider::before { transform: translateX(22px); }
  .switch::after { content: ''; position: absolute; inset: -10px; } /* zone tactile étendue */
  .x-btn { min-width: 44px; min-height: 44px; font-size: 22px; }

  /* ---------- Retour tactile sur tous les éléments cliquables ---------- */
  .dash-btn:active, .check-item:active, .dash-card[style*="cursor:pointer"]:active {
    transform: scale(.97);
  }
  .dash-btn, .dash-btn-sm { transition: transform .1s, border-color .12s; }

  /* ---------- Modales : feuille glissante depuis le bas (Android) ---------- */
  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100vw; max-width: 100vw; max-height: 92dvh;
    border-radius: 12px 12px 0 0; border-bottom: none;
    animation: sheetUp .25s cubic-bezier(.2, .9, .3, 1);
    overscroll-behavior: contain;
    /* v366 — la feuille est collée au bord de l'écran : sans aire de sécurité,
       le dernier bouton d'action passe sous l'indicateur de retour Android (et
       sous la barre de gestes iPhone en mode « standalone », cf. manifeste).
       Mesuré au banc : padding-bottom 0px avec le premier bouton à 718 px dans
       une fenêtre de 780 px. C'est déjà ce que font .dash-main (neuf lignes plus
       haut) et #toasts (six lignes plus bas). */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal.large { width: 100vw; }
  @keyframes sheetUp { from { transform: translateY(60px); opacity: .4; } to { transform: none; opacity: 1; } }

  /* ---------- Toast façon snackbar, au-dessus de la barre basse ---------- */
  #toasts {
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: 10px; right: 10px;
  }
  .toast { max-width: none; width: 100%; }

  /* ---------- Tableaux : défilement tactile fluide ---------- */
  .dash-table { -webkit-overflow-scrolling: touch; }

  /* ---------- Finitions « app » ---------- */
  .dash-card { padding: 16px; border-radius: 12px; }
  .dash-stat { padding: 14px; border-radius: 12px; }
  .dash-stat .val { font-size: 22px; }
  .dash-module-header .m-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
  .dash-module-header h1 { font-size: 16px; }
  .dash-module-header .sub { font-size: 12px; }
}

/* ============================================================
   ✨ HOXERA PRO — couche de design professionnelle (v1.98)
   Palette raffinée, profondeur, micro-interactions.
   ============================================================ */
:root {
  --d-bg: #0b0c12;
  --d-side: #101220;
  --d-card: #161826;
  --d-card2: #1d2032;
  --d-border: #262a3e;
  --d-glow: rgba(var(--d-accent-rgb), .35);
}

body.dash-body, .dash-shell {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(var(--d-accent-rgb), .08), transparent 60%),
    radial-gradient(900px 460px at -10% 30%, rgba(139,92,246,.06), transparent 55%),
    var(--d-bg);
}

/* Sidebar : pilules modernes + tuiles d'icônes (façon panel pro) */
.dash-side { border-right: 1px solid rgba(38,42,62,.8); backdrop-filter: blur(6px); }
.dash-side-item:hover { transform: translateX(2px); }
.dash-side-item.active {
  box-shadow: inset 0 0 0 1px rgba(var(--d-accent-rgb), .35), 0 2px 10px -4px var(--d-glow);
}

/* Cartes : profondeur + survol vivant */
.dash-card {
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%), var(--d-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -18px rgba(0,0,0,.8);
}
.dash-card:hover { border-color: #3a3f5c; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -18px rgba(0,0,0,.85); }
.dash-card h3 { font-size: 16px; letter-spacing: .1px; }

/* En-tête de module : accent dégradé */
.dash-module-header { padding-bottom: 14px; border-bottom: 1px solid var(--d-border); margin-bottom: 22px; position: relative; }
.dash-module-header::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 120px; height: 2px;
  background: linear-gradient(90deg, var(--d-accent), var(--d-accent2), transparent);
  border-radius: 4px;
}
.dash-module-header .m-icon {
  box-shadow: 0 6px 18px -8px var(--d-glow);
}

/* Stats : chiffres en dégradé */
.dash-stat { border-radius: 12px; position: relative; overflow: hidden; }
.dash-stat::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--d-accent), transparent);
  opacity: .55;
}
.dash-stat .val {
  background: linear-gradient(90deg, #fff, #b9bdf5);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Entrées : focus lumineux */
.dash-input:focus, .dash-select:focus, textarea.dash-input:focus {
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px rgba(var(--d-accent-rgb), .18);
}

/* Boutons : dégradé + élévation + gamme de tailles cohérente */
.dash-btn {
  border-radius: 8px; transition: .15s;
  min-height: 42px; padding: 9px 18px; font-size: 14px; gap: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-btn:hover { transform: translateY(-1px); }
.dash-btn:active { transform: translateY(0); }
.dash-btn:focus-visible {
  outline: none; border-color: var(--d-accent);
  box-shadow: 0 0 0 4px rgba(var(--d-accent-rgb), .18);
}
.dash-btn-sm { min-height: 32px; padding: 5px 12px; font-size: 12px; border-radius: 8px; gap: 6px; }
.dash-btn-lg { min-height: 50px; padding: 12px 24px; font-size: 16px; border-radius: 12px; gap: 10px; }
.dash-btn-primary {
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2)) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px -8px var(--d-glow);
}
.dash-btn-primary:hover { box-shadow: 0 10px 24px -8px var(--d-glow); filter: brightness(1.06); }

/* Tableaux : lignes au survol */
.dash-table tr { transition: background .1s; }
.dash-table tbody tr:hover td, .dash-table tr:hover td { background: rgba(var(--d-accent-rgb), .05); }

/* Badges pilule */
.dash-badge { border-radius: 999px; padding: 4px 12px; font-weight: 700; }

/* Barres de défilement fines et discrètes */
.dash-side::-webkit-scrollbar, .dash-main::-webkit-scrollbar, body::-webkit-scrollbar { width: 9px; }
.dash-side::-webkit-scrollbar-thumb, .dash-main::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: #2b2f45; border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}
body::-webkit-scrollbar-thumb:hover { background: #3a3f5c; background-clip: content-box; }

/* Interrupteurs : plus doux */
.switch .slider { transition: .18s; }
.switch input:checked + .slider { box-shadow: 0 0 12px -2px var(--d-glow); }

/* Apparition douce du contenu de module */
#dash-content > * { animation: dashIn .22s ease both; }
@keyframes dashIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Puce d'identité du bot (barre du haut) */
.dash-bot-chip {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(var(--d-accent-rgb), .14), rgba(139,92,246,.08));
  border: 1px solid rgba(var(--d-accent-rgb), .3); border-radius: 12px; padding: 7px 14px 7px 8px;
  box-shadow: 0 4px 14px -8px var(--d-glow);
}
.dash-bot-chip img {
  width: 38px; height: 38px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(var(--d-accent-rgb), .5);
}
.dash-bot-chip .chip-fallback {
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px;
  background: rgba(var(--d-accent-rgb), .2);
}
.dash-bot-chip .chip-txt { display: flex; flex-direction: column; line-height: 1.25; }
.dash-bot-chip .chip-txt b { font-size: 14px; }
.dash-bot-chip .chip-txt span { font-size: 11px; font-weight: 700; }
.dash-bot-chip .chip-txt .on { color: #5be087; }
.dash-bot-chip .chip-txt .off { color: #f16d6f; }
@media (max-width: 640px) { .dash-bot-chip .chip-txt { display: none; } .dash-bot-chip { padding: 6px 8px; } }

/* ============================================================
   🏆 HOXERA v2.0 — refonte façon DraftBot
   ============================================================ */

/* Carte serveur (tête de sidebar / topbar mobile) */
.dash-server-card {
  position: relative; display: flex; align-items: center; gap: 11px;
  margin: 14px 12px 6px; padding: 11px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--d-card);
  border: 1px solid var(--d-border); border-radius: 12px;
  cursor: pointer; transition: .15s;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.9);
}
.dash-server-card:hover { border-color: rgba(var(--d-accent-rgb), .55); box-shadow: 0 8px 22px -12px var(--d-glow); }
.dash-server-card img { width: 40px; height: 40px; border-radius: 12px; }
.dash-server-card .srv-fallback {
  width: 40px; height: 40px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
  background: linear-gradient(135deg, rgba(var(--d-accent-rgb), .35), rgba(139,92,246,.3)); color: #fff;
}
.dash-server-card .srv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dash-server-card .srv-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--d-dim); }
.dash-server-card .srv-txt b { font-size: 14px; color: var(--d-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-server-card .srv-caret { display: inline-flex; align-items: center; color: var(--d-dim); transform: translateY(-1px); }
.dash-server-card .srv-caret svg { display: block; }
.dash-server-card select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 16px;
}
.dash-server-card select option { background: var(--d-card); color: var(--d-text); }

/* Fil d'ariane de la topbar */
.dash-crumb { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-crumb .crumb-ico {
  width: 42px; height: 42px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 22px;
  background: linear-gradient(135deg, rgba(var(--d-accent-rgb), .2), rgba(139,92,246,.14));
  border: 1px solid rgba(var(--d-accent-rgb), .28);
}
.dash-crumb .crumb-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.dash-crumb .crumb-txt b { font-size: 16px; letter-spacing: .1px; }
.dash-crumb .crumb-txt span { font-size: 12px; color: var(--d-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Topbar : disposition raffinée */
.dash-topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent), var(--d-card);
  border: 1px solid var(--d-border); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 22px;
  box-shadow: 0 8px 24px -18px rgba(0,0,0,.8);
}
.dash-topbar .dash-server-card.topbar-pick { display: none; }

/* Desktop : en-tête de module conservé (il porte la description du module),
   le fil d'ariane de la topbar donne le contexte serveur. */

/* Cartes : espacement vertical régulier */
#dash-content > .dash-card { margin-bottom: 16px; }

/* Mobile : la carte serveur remplace l'ancien sélecteur dans la topbar */
@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dash-topbar { border-radius: 0; border-left: none; border-right: none; border-top: none; }
  .dash-topbar .dash-server-card.topbar-pick { display: flex; flex: 1; margin: 0; }
  .dash-crumb { display: none; }
  .dash-module-header { display: flex; }
  .dash-topbar-actions { margin-left: 0; }
  .dash-bot-chip .chip-txt { display: none; }
}

/* ============================================================
   🎨 HOXERA v2.7 — héros de bienvenue, flux d'activité,
   barre de sauvegarde intelligente, aperçus Discord
   ============================================================ */

/* Héros de première visite */
.dash-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(500px 200px at 90% -20%, rgba(235,69,158,.14), transparent 60%),
    radial-gradient(420px 200px at 5% 120%, rgba(var(--d-accent-rgb), .18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--d-card);
  border: 1px solid rgba(var(--d-accent-rgb), .35); border-radius: 12px;
  padding: 26px 26px 22px; margin-bottom: 18px;
  box-shadow: 0 14px 40px -20px var(--d-glow);
}
.dash-hero .hero-badge {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--d-accent), var(--d-accent2)); color: #fff;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
}
.dash-hero h2 { font-size: 22px; margin-bottom: 6px; }
.dash-hero p { color: var(--d-dim); font-size: 14px; max-width: 560px; }
.hero-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 16px; }
.hero-step {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--d-card2); border: 1px solid var(--d-border); border-radius: 12px;
  padding: 14px 14px 12px; color: var(--d-text); transition: .15s;
  display: flex; flex-direction: column; gap: 3px;
}
.hero-step:hover { transform: translateY(-2px); border-color: rgba(var(--d-accent-rgb), .6); box-shadow: 0 10px 24px -14px var(--d-glow); }
.hero-step .hs-num {
  position: absolute; top: 10px; right: 12px; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(var(--d-accent-rgb), .25); color: #aab1ff;
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.hero-step .hs-emoji { font-size: 22px; }
.hero-step b { font-size: 14px; }
.hero-step span:last-child { font-size: 12px; color: var(--d-dim); line-height: 1.4; }

/* Flux d'activité */
.feed-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 4px; border-bottom: 1px solid var(--d-border);
  animation: dashIn .2s ease both;
}
.feed-item:last-child { border-bottom: none; }
.feed-emoji {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  background: rgba(var(--d-accent-rgb), .12); display: inline-flex; align-items: center;
  justify-content: center; font-size: 14px;
}
.feed-text { flex: 1; min-width: 0; font-size: 13px; color: var(--d-text); }
.feed-time { font-size: 11px; color: var(--d-dim); white-space: nowrap; }

/* Barre de sauvegarde intelligente */
.dash-savebar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(80px);
  z-index: 300; display: flex; align-items: center; gap: 16px;
  background: rgba(22, 24, 38, .92); backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--d-accent-rgb), .45); border-radius: 999px;
  padding: 10px 12px 10px 20px; opacity: 0; transition: .25s ease;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.dash-savebar.on { transform: translateX(-50%) translateY(0); opacity: 1; }
.dash-savebar .sb-txt { font-size: 13px; font-weight: 600; color: #ffd166; white-space: nowrap; }
.dash-savebar .sb-actions { display: flex; gap: 8px; }
@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) { .dash-savebar { bottom: 86px; width: calc(100% - 24px); justify-content: space-between; } }

/* Aperçus « comme sur Discord » */
.dc-preview {
  background: #313338; border: 1px solid #1E1F22; border-radius: 12px;
  padding: 14px 16px;
}

/* ============================================================
   🚀 HOXERA v3.2 — palette Ctrl+K, accents, squelettes, finitions
   ============================================================ */

/* Palette de commandes */
.dash-palette-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8, 9, 14, .68); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 0; animation: dashIn .15s ease both;
}
.dash-palette {
  width: 100%; max-width: 560px;
  background: var(--d-card); border: 1px solid rgba(var(--d-accent-rgb), .4);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: palettePop .18s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes palettePop { from { transform: scale(.96) translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.dash-palette input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--d-text); font-size: 16px; font-family: inherit;
  padding: 17px 20px; border-bottom: 1px solid var(--d-border);
}
.dp-list { max-height: 330px; overflow-y: auto; padding: 7px; }
.dp-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; color: var(--d-text); font-family: inherit;
  padding: 11px 13px; border-radius: 12px; cursor: pointer; text-align: left; font-size: 14px;
}
.dp-item.sel { background: linear-gradient(90deg, rgba(var(--d-accent-rgb), .22), rgba(139,92,246,.08)); box-shadow: inset 0 0 0 1px rgba(var(--d-accent-rgb), .35); }
.dp-ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.05); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.dp-label { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-sub { font-size: 11px; color: var(--d-dim); }
.dp-hint { padding: 9px 18px; font-size: 11px; color: var(--d-dim); border-top: 1px solid var(--d-border); }
.dp-empty { padding: 22px; text-align: center; color: var(--d-dim); font-size: 13px; }

/* Boutons-icônes de la topbar */
.dash-iconbtn {
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  background: var(--d-card2); border: 1px solid var(--d-border);
  color: var(--d-text); font-size: 16px; display: inline-flex;
  align-items: center; justify-content: center; transition: .15s; font-family: inherit;
}
.dash-iconbtn:hover { border-color: var(--d-accent); transform: translateY(-1px); box-shadow: 0 6px 16px -8px var(--d-glow); }
.dash-iconbtn:active { transform: scale(.94); }

/* Sélecteur d'accent */
.dash-accent-wrap { position: relative; }
.dash-accent-pop[hidden], .dash-bell-pop[hidden] { display: none !important; }
.dash-accent-pop {
  position: absolute; top: 46px; right: 0; z-index: 200;
  display: flex; gap: 8px; padding: 10px 12px;
  background: var(--d-card); border: 1px solid var(--d-border); border-radius: 12px;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.8);
  animation: palettePop .15s ease both;
}
.acc-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15);
  cursor: pointer; transition: .12s;
}
.acc-dot:hover { transform: scale(1.2); border-color: #fff; }

/* Squelettes de chargement (perception de vitesse) */
.dash-skeleton { animation: dashIn .2s ease both; }
.sk-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.sk-ico { width: 46px; height: 46px; border-radius: 12px; }
.sk-ico, .sk-line, .sk-stat {
  background: linear-gradient(90deg, var(--d-card2) 25%, #262a40 50%, var(--d-card2) 75%);
  background-size: 200% 100%; animation: skShine 1.3s linear infinite;
}
@keyframes skShine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-line { height: 13px; border-radius: 8px; margin: 9px 0; }
.sk-line.thin { height: 9px; opacity: .6; }
.sk-line.w25 { width: 25%; } .sk-line.w30 { width: 30%; } .sk-line.w40 { width: 40%; }
.sk-line.w50 { width: 50%; } .sk-line.w60 { width: 60%; } .sk-line.w75 { width: 75%; }
.sk-line.w80 { width: 80%; } .sk-line.w90 { width: 90%; }
.sk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.sk-stat { height: 74px; border-radius: 12px; }
.sk-card { border: 1px solid var(--d-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; background: var(--d-card); }

/* Infobulles (data-tip) */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; z-index: 300;
  background: #0b0c14; color: var(--d-text); font-size: 12px; font-weight: 600;
  border: 1px solid var(--d-border); border-radius: 8px; padding: 6px 10px;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.8); pointer-events: none;
  animation: dashIn .12s ease both;
}

/* Sélection de texte aux couleurs du thème */
::selection { background: rgba(var(--d-accent-rgb), .4); color: #fff; }

/* ============================================================
   🏆 HOXERA v3.3 — grille serveurs, cloche, mode clair, boutons
   ============================================================ */

/* Centre serveurs — cartes bannière (v346) */
.srv-grid-page { max-width: 980px; margin: 26px auto; }
.srv-grid-head { text-align: center; margin-bottom: 22px; }
.srv-grid-head h2 { font-size: 28px; letter-spacing: -.02em; }
.srv-grid-head p { color: var(--d-dim); font-size: 14px; margin-top: 6px; }
.srv-center .srv-kicker {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--d-accent); margin-bottom: 8px;
}
.srv-head-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 12px; font-size: 13px; color: var(--d-dim); }
.srv-head-meta b { color: var(--d-text); font-variant-numeric: tabular-nums; }
.srv-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; justify-content: center; }
.srv-search {
  flex: 1; min-width: 200px; max-width: 420px; height: 42px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--d-border); background: var(--d-card); color: var(--d-text); font: inherit;
}
.srv-search:focus { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(var(--d-accent-rgb), .18); }
.srv-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.srv-filter {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--d-border); background: var(--d-card);
  color: var(--d-dim); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.srv-filter small { font-size: 11px; font-weight: 800; opacity: .8; }
.srv-filter.is-on { border-color: var(--d-accent); background: rgba(var(--d-accent-rgb), .16); color: var(--d-text); }
.srv-empty { padding: 28px 16px; text-align: center; color: var(--d-dim); font-weight: 600; }
.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.srv-card {
  position: relative; overflow: hidden; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; color: var(--d-text);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--d-card);
  border: 1px solid var(--d-border); border-radius: 12px; transition: .18s;
  animation: dashIn .25s ease both;
}
.srv-card:hover { transform: translateY(-4px); border-color: rgba(var(--d-accent-rgb), .6); box-shadow: 0 18px 40px -18px var(--d-glow); }
.srv-card-banner {
  display: block; height: 92px; background: linear-gradient(135deg, #1a1c3a, #2b2d6b 55%, var(--d-accent));
  background-size: cover; background-position: center;
}
.srv-card-fallback-bg {
  display: grid; place-items: center; height: 100%; font-size: 28px; font-weight: 900; color: rgba(255,255,255,.22);
}
.srv-card-body { display: flex; align-items: center; gap: 10px; padding: 18px 14px 14px; color: var(--d-text); }
.srv-card img, .srv-card-fallback { width: 48px; height: 48px; border-radius: 12px; }
.srv-card img, .srv-card-fallback {
  object-fit: cover; flex-shrink: 0;
  margin-top: -36px; border: 3px solid var(--d-card); box-shadow: 0 6px 14px rgba(0,0,0,.28);
}
.srv-card-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2));
}
.srv-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 0; }
.srv-card b { font-size: 14px; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-card-txt small { color: var(--d-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-card .srv-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--d-card2); color: var(--d-dim); border: 1px solid var(--d-border); white-space: nowrap; margin-top: 0; }
.srv-card .srv-badge.ok { color: #5be087; border-color: rgba(59,165,93,.4); background: rgba(59,165,93,.1); }
.srv-card .srv-badge.invite { color: #aab1ff; border-color: rgba(var(--d-accent-rgb), .45); background: rgba(var(--d-accent-rgb), .12); }
.srv-card.no-bot { opacity: .75; }
.srv-card.no-bot:hover { opacity: 1; }
@media (max-width: 520px) {
  .srv-grid { grid-template-columns: 1fr; }
  .srv-search { max-width: none; }
  .srv-toolbar { flex-direction: column; align-items: stretch; }
  .srv-toolbar .dash-btn { width: 100%; justify-content: center; }
}

/* Cloche + panneau de notifications */
.bell-badge {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  border-radius: 999px; background: linear-gradient(135deg, #ed4245, #f97316);
  color: #fff; font-size: 11px; font-weight: 800; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 2px 8px -2px rgba(237,66,69,.8); animation: bellPulse 2s ease infinite;
}
@keyframes bellPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
#d-bell { position: relative; }
.dash-bell-pop {
  position: absolute; top: 46px; right: 0; z-index: 200; width: 330px; max-width: 86vw;
  background: var(--d-card); border: 1px solid var(--d-border); border-radius: 12px;
  box-shadow: 0 18px 46px -14px rgba(0,0,0,.85); animation: palettePop .15s ease both;
  max-height: 380px; overflow-y: auto; padding: 8px;
}
.bp-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px;
  border-radius: 8px; font-size: 13px; line-height: 1.45; color: var(--d-text);
}
.bp-item span { font-size: 16px; flex-shrink: 0; }
.bp-item.warn { background: rgba(237,66,69,.07); border: 1px solid rgba(237,66,69,.18); margin-bottom: 6px; }

/* Ripple universel */
.btn, .dash-btn, .dash-iconbtn, .hero-step, .srv-card { position: relative; overflow: hidden; }
.hx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.28); transform: scale(0);
  animation: hxRipple .55s ease-out both;
}
@keyframes hxRipple { to { transform: scale(2.4); opacity: 0; } }

/* ️ Interrupteurs premium : ✓ / ✕ dans le curseur */
.switch .slider::after {
  content: '✕'; position: absolute; top: 50%; transform: translateY(-50%);
  right: 6px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.5);
}
.switch input:checked + .slider::after { content: '✓'; left: 7px; right: auto; color: #fff; }

/* MODE CLAIR complet (bouton 🌓, mémorisé par appareil) */
html.hx-light {
  --d-bg: #f2f3f8; --d-side: #ffffff; --d-card: #ffffff; --d-card2: #f0f1f7;
  --d-border: #dfe2ec; --d-text: #1c1e26; --d-dim: #6b7085;
}
html.hx-light body, html.hx-light .dash-shell {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(var(--d-accent-rgb), .07), transparent 60%),
    radial-gradient(900px 460px at -10% 30%, rgba(139,92,246,.05), transparent 55%),
    var(--d-bg);
  color: var(--d-text);
}
html.hx-light .dash-card, html.hx-light .dash-stat, html.hx-light .dash-topbar,
html.hx-light .dash-server-card, html.hx-light .dash-palette, html.hx-light .dash-bell-pop,
html.hx-light .dash-accent-pop, html.hx-light .srv-card {
  box-shadow: 0 6px 22px -14px rgba(30, 34, 60, .25);
}
html.hx-light .dash-stat .val { background: linear-gradient(90deg, #1c1e26, #4d55c7); -webkit-background-clip: text; background-clip: text; }
html.hx-light .dash-savebar { background: rgba(255,255,255,.94); }
html.hx-light .dash-savebar .sb-txt { color: #b07d10; }
html.hx-light .dc-preview { background: #f2f3f5; border-color: #e3e5ea; }
html.hx-light .dc-preview [style*="color:#dbdee1"], html.hx-light .dc-preview [style*="color:#f2f3f5"] { filter: invert(.85) hue-rotate(180deg); }
html.hx-light .sk-ico, html.hx-light .sk-line, html.hx-light .sk-stat {
  background: linear-gradient(90deg, #e8eaf2 25%, #f5f6fa 50%, #e8eaf2 75%);
  background-size: 200% 100%;
}

/* ============================================================
   ✨ HOXERA v3.17 — interface « Control Center »
   Cartes plus lisibles, boutons premium et constructeur de tickets.
   La couche reste purement visuelle : les anciens réglages et leurs
   interactions ne sont pas modifiés.
   ============================================================ */

/* Boutons : hiérarchie claire + reflet discret au survol */
.dash-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 40px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 65%), var(--d-card2);
  box-shadow: 0 4px 12px -9px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.04) inset;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
.dash-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.12) 48%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .45s ease;
  pointer-events: none;
}
.dash-btn:hover::before { transform: translateX(120%); }
.dash-btn:hover {
  border-color: rgba(var(--d-accent-rgb), .72);
  transform: translateY(-2px);
  box-shadow: 0 9px 22px -12px var(--d-glow), 0 1px 0 rgba(255,255,255,.06) inset;
}
.dash-btn:focus-visible, .dash-iconbtn:focus-visible, .bnav-item:focus-visible {
  outline: 3px solid rgba(var(--d-accent-rgb), .42);
  outline-offset: 2px;
}
.dash-btn:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
.dash-btn-primary {
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2)) !important;
  box-shadow: 0 9px 24px -11px var(--d-glow), 0 1px 0 rgba(255,255,255,.18) inset;
}
.dash-btn-primary:hover { box-shadow: 0 13px 30px -11px var(--d-glow), 0 1px 0 rgba(255,255,255,.2) inset; }
.dash-btn-danger:hover { border-color: rgba(255,108,112,.72); box-shadow: 0 8px 20px -12px rgba(237,66,69,.65); }
.dash-btn-sm { min-height: 36px; border-radius: 8px; }
.dash-iconbtn { box-shadow: 0 4px 12px -9px rgba(0,0,0,.9); }

/* Cartes : profondeur douce et bordure active */
.dash-card {
  border-radius: 12px;
  background:
    radial-gradient(420px 120px at 100% 0%, rgba(var(--d-accent-rgb), .055), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 45%), var(--d-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -26px rgba(0,0,0,.95);
}
.dash-card:hover { border-color: rgba(var(--d-accent-rgb), .42); }
.dash-card .card-head { padding-bottom: 2px; }

/* v323 — Module Liens */
.lp-item {
  border: 1px solid var(--d-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--d-card2, rgba(255,255,255,.03));
}
.lp-item-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.lp-discord {
  background: #313338;
  border-radius: 12px;
  padding: 12px 14px;
  color: #DBDEE1;
  font-size: 13px;
}
.lp-above { margin-bottom: 10px; white-space: pre-wrap; }
.lp-emb {
  background: #2B2D31;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.lp-emb b { display: block; margin-bottom: 6px; color: #fff; }
.lp-emb-body { white-space: pre-wrap; color: #C9CCD1; line-height: 1.45; }
.lp-emb-url { margin-top: 8px; color: #00A8FC; word-break: break-all; font-size: 13px; }
.lp-emb-img {
  margin-top: 10px;
  height: 90px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3a2a4a, #2B2D31);
  color: #949BA4;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}
.lp-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.lp-fake-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #4E5058;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
}
.lp-fake-btn .lp-ext { opacity: .75; font-size: 12px; }

/* v347 — Guide tickets : 3 systèmes nommés */
.ticket-guide .tg-sys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.ticket-guide .tg-box {
  border: 1px solid var(--d-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--d-card2, rgba(255,255,255,.03));
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, transform .15s;
}
.ticket-guide .tg-box:hover { border-color: rgba(var(--d-accent-rgb), .55); transform: translateY(-1px); }
.ticket-guide .tg-box b { display: block; font-size: 14px; margin-bottom: 2px; }
.ticket-guide .tg-box small { display: block; color: var(--d-dim); font-size: 12px; margin-bottom: 8px; }
.ticket-guide .tg-box ul { margin: 0 0 8px; padding-left: 18px; line-height: 1.55; font-size: 13px; }
.ticket-guide .tg-box p { margin: 0; font-size: 13px; color: var(--d-dim); line-height: 1.5; }
.ticket-guide .tg-box-alt {
  border-color: rgba(var(--d-accent-rgb), .42);
  background: rgba(var(--d-accent-rgb), .07);
}
@media (max-width: 900px) {
  .ticket-guide .tg-sys { grid-template-columns: 1fr; }
}

/* v330/v331 — Tickets classiques : tout dans la carte, comme l’avancé */
.tk-classic-card > .card-head h3 { font-size: 16px; }
.tk-classic-card > .card-head .desc { max-width: 640px; margin-bottom: 10px; }
.tk-inner {
  margin-top: 12px;
  border: 1px solid var(--d-border);
  border-radius: 12px;
  background: var(--d-card2, rgba(255,255,255,.03));
  overflow: hidden;
}
.tk-fold { padding: 0; }
.tk-fold-sum {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.tk-fold-sum::-webkit-details-marker { display: none; }
.tk-fold-sum::marker { content: ''; }
.tk-fold-sum::after {
  content: '';
  margin-left: auto;
  color: var(--d-dim);
}
.tk-fold[open] .tk-fold-sum { border-bottom: 1px solid var(--d-border); }
.tk-fold-body { padding: 12px 14px 16px; }
.ticket-guide .tg-box small { margin-bottom: 0; }

/* Constructeur du nouveau système de tickets */
.adv-builder-card {
  border-color: rgba(var(--d-accent-rgb), .42);
  background:
    radial-gradient(650px 220px at 100% 0%, rgba(139,92,246,.14), transparent 68%),
    radial-gradient(500px 180px at 0% 100%, rgba(var(--d-accent-rgb), .08), transparent 72%),
    var(--d-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 20px 48px -30px var(--d-glow);
}
.adv-builder-card > .card-head h3 {
  font-size: 18px;
  letter-spacing: .1px;
}
.adv-builder-card > .card-head .desc { max-width: 720px; }
.adv-builder-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 2px 0 14px;
}
.adv-status-copy { color: var(--d-dim); font-size: 12px; }
.adv-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(var(--d-accent-rgb), .22);
  border-radius: 12px;
  background: rgba(var(--d-accent-rgb), .065);
  color: var(--d-text);
  cursor: pointer;
}
.adv-check-row input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--d-accent); flex: 0 0 auto; }
.adv-check-row span { display: flex; flex-direction: column; gap: 2px; }
.adv-check-row b { font-size: 13px; }
.adv-check-row small { color: var(--d-dim); font-size: 11px; line-height: 1.4; }
.adv-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}
.adv-types-panel {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(var(--d-accent-rgb), .28);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(var(--d-accent-rgb), .09), rgba(139,92,246,.035) 58%, rgba(0,0,0,.05));
}
.adv-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.adv-panel-heading > div { display: flex; flex-direction: column; gap: 4px; }
.adv-panel-heading b { font-size: 14px; }
.adv-panel-heading small { color: var(--d-dim); font-size: 12px; line-height: 1.45; }
.adv-count {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid rgba(var(--d-accent-rgb), .34);
  border-radius: 999px;
  color: #b9bdf5;
  background: rgba(var(--d-accent-rgb), .12);
  font-size: 11px;
  font-weight: 800;
}
.adv-type-card {
  position: relative;
  margin: 10px 0;
  padding: 13px;
  border: 1px solid var(--d-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%), var(--d-card2);
  box-shadow: 0 8px 20px -18px rgba(0,0,0,.95);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.adv-type-card:hover {
  border-color: rgba(var(--d-accent-rgb), .55);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -18px var(--d-glow);
}
.adv-type-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.adv-type-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  color: #c5c9ff;
  background: linear-gradient(135deg, rgba(var(--d-accent-rgb), .32), rgba(139,92,246,.22));
  border: 1px solid rgba(var(--d-accent-rgb), .35);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
}
.adv-type-head input[data-k="label"] { flex: 1; min-width: 145px; font-weight: 700; }
.adv-type-head input[type="color"] { cursor: pointer; border-radius: 8px; background: var(--d-card); border: 1px solid var(--d-border); }
.adv-type-card .dash-label { margin-top: 13px; }
.adv-type-card .dash-input, .adv-type-card .dash-select { border-radius: 8px; }
.adv-type-card .dash-input:focus, .adv-type-card .dash-select:focus { box-shadow: 0 0 0 3px rgba(var(--d-accent-rgb), .13); }
.adv-question-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.adv-question-row > span { min-width: 18px; color: var(--d-dim); font-size: 11px; font-weight: 800; }
.adv-question-row .dash-input { flex: 1; min-width: 0; }
.adv-question-row .dash-btn { flex: 0 0 auto; }
.adv-add-type {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
  border-style: dashed;
  color: #c5c9ff;
  background: rgba(var(--d-accent-rgb), .08);
}
.adv-builder-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(var(--d-accent-rgb), .2);
}
.adv-builder-actions .dash-btn { min-height: 43px; }
.adv-status-line { margin: 9px 0 0 !important; min-height: 18px; }

/* Aperçu Discord : bloc ancré à droite sur ordinateur */
.adv-preview-shell {
  min-width: 0;
  position: sticky;
  top: 86px;
  padding: 14px;
  border: 1px solid rgba(var(--d-accent-rgb), .22);
  border-radius: 12px;
  background: rgba(8,9,14,.18);
}
.adv-preview-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--d-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
}
.adv-preview-title span { color: #6ee7a0; font-size: 11px; letter-spacing: .2px; text-transform: none; }
.adv-discord-preview {
  min-height: 160px;
  overflow: hidden;
  padding: 15px;
  border: 1px solid #1e1f22;
  border-radius: 12px;
  color: #dbdee1;
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(var(--d-accent-rgb), .1), transparent 70%),
    #313338;
  font-size: 13px;
  box-shadow: 0 12px 28px -20px rgba(0,0,0,.9);
}
.adv-discord-preview img { max-height: 145px !important; margin-bottom: 13px !important; border-radius: 8px !important; }
.adv-discord-title { margin-bottom: 12px; color: #f2f3f5; font-size: 16px; font-weight: 800; }
.adv-discord-preview small { line-height: 1.4; }

/* Mode clair */
html.hx-light .adv-types-panel { background: linear-gradient(145deg, rgba(var(--d-accent-rgb), .075), rgba(139,92,246,.025)); }
html.hx-light .adv-type-card { background: linear-gradient(180deg, rgba(var(--d-accent-rgb), .035), transparent 45%), var(--d-card2); box-shadow: 0 8px 22px -18px rgba(35,40,80,.35); }
html.hx-light .adv-preview-shell { background: rgba(255,255,255,.55); }
html.hx-light .adv-check-row { background: rgba(var(--d-accent-rgb), .055); }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .adv-builder-grid { grid-template-columns: 1fr; gap: 13px; }
  .adv-preview-shell { position: static; }
  .adv-builder-actions { flex-direction: column; align-items: stretch; }
  .adv-builder-actions .dash-btn { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
  .adv-types-panel { padding: 11px; }
  .adv-type-card { padding: 11px; }
  .adv-type-head input[data-k="label"] { min-width: 120px; }
  .adv-type-head input[type="color"] { width: 42px !important; }
  .adv-panel-heading { gap: 8px; }
  .adv-panel-heading small { font-size: 11px; }
  .adv-preview-title { align-items: flex-start; flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-btn, .dash-btn::before, .adv-type-card { transition: none !important; }
  #dash-content > * { animation: none !important; }
}

/* ============================================================
   🛡️ HOXERA v3.18 — Auto-Mod Control Center
   Interface de protection, simulation et exceptions.
   ============================================================ */
.am-control-card {
  border-color: rgba(59,165,93,.28);
  background:
    radial-gradient(620px 220px at 100% 0%, rgba(59,165,93,.09), transparent 70%),
    radial-gradient(520px 220px at 0% 100%, rgba(var(--d-accent-rgb), .08), transparent 70%),
    var(--d-card);
}
.am-control-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  border: 1px solid rgba(59,165,93,.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59,165,93,.13), rgba(var(--d-accent-rgb), .06));
}
.am-hero-copy { display: flex; align-items: center; gap: 11px; min-width: 0; }
.am-shield-icon {
  width: 43px; height: 43px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 12px;
  background: linear-gradient(135deg, rgba(59,165,93,.35), rgba(var(--d-accent-rgb), .25));
  border: 1px solid rgba(110,231,160,.35); font-size: 22px;
  box-shadow: 0 8px 22px -12px rgba(59,165,93,.8);
}
.am-hero-copy > div { display: flex; flex-direction: column; gap: 3px; }
.am-hero-copy b { font-size: 16px; }
.am-hero-copy small { color: var(--d-dim); font-size: 12px; }
.am-main-toggle { position: relative; display: flex; align-items: center; gap: 9px; flex: 0 0 auto; cursor: pointer; color: var(--d-text); font-size: 12px; font-weight: 800; }
.am-main-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.am-main-toggle i {
  width: 50px; height: 29px; position: relative; display: inline-block; border-radius: 999px;
  background: #343746; border: 1px solid var(--d-border); transition: .18s;
}
.am-main-toggle i::after {
  content: ''; position: absolute; left: 4px; top: 4px; width: 19px; height: 19px;
  border-radius: 50%; background: #c7c9d4; box-shadow: 0 2px 7px rgba(0,0,0,.35); transition: .18s;
}
.am-main-toggle input:checked + i { background: linear-gradient(135deg, #3ba55d, #57f287); border-color: rgba(110,231,160,.6); box-shadow: 0 0 14px -3px rgba(59,165,93,.8); }
.am-main-toggle input:checked + i::after { transform: translateX(21px); background: #fff; }
.am-main-toggle input:focus-visible + i { outline: 3px solid rgba(110,231,160,.35); outline-offset: 2px; }
.am-mode-row {
  display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: 14px; align-items: end; margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--d-border); border-radius: 12px; background: rgba(255,255,255,.018);
}
.am-mode-row .dash-label { margin-top: 0; }
.am-mode-note { min-height: 38px; display: flex; align-items: center; padding: 8px 11px; border-radius: 8px; color: var(--d-dim); background: rgba(254,231,92,.06); border: 1px solid rgba(254,231,92,.16); font-size: 12px; line-height: 1.4; }
.am-rule-heading, .am-panel-title {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.am-rule-heading { margin: 20px 0 9px; }
.am-rule-heading > div, .am-panel-title > div { display: flex; flex-direction: column; gap: 4px; }
.am-rule-heading b, .am-panel-title b { font-size: 14px; }
.am-rule-heading small, .am-panel-title small { color: var(--d-dim); font-size: 12px; line-height: 1.4; }
.am-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.am-rule-card {
  min-width: 0; padding: 13px; border: 1px solid var(--d-border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 50%), var(--d-card2);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.am-rule-card:hover { border-color: rgba(var(--d-accent-rgb), .52); transform: translateY(-1px); box-shadow: 0 10px 22px -19px var(--d-glow); }
.am-rule-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.am-rule-name { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.am-rule-name > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.am-rule-name b { font-size: 13px; }
.am-rule-name small { color: var(--d-dim); font-size: 11px; line-height: 1.35; }
.am-rule-icon { width: 31px; height: 31px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(var(--d-accent-rgb), .13); font-size: 16px; }
.am-rule-head > input[type="checkbox"] { width: 18px; height: 18px; margin: 4px 1px 0 0; accent-color: var(--d-accent); cursor: pointer; }
.am-rule-state { flex: 0 0 auto; color: var(--d-dim); font-size: 11px; white-space: nowrap; }
.am-rule-more { margin-top: 10px; border-top: 1px solid var(--d-border); padding-top: 8px; }
.am-rule-more summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--d-dim); list-style: none; }
.am-rule-more summary::-webkit-details-marker { display: none; }

.am-rule-more .am-threshold-box, .am-rule-more .am-blacklist-toggle { margin-top: 8px; }
.am-fold { margin-top: 12px; border: 1px solid var(--d-border); border-radius: 12px; background: rgba(255,255,255,.014); overflow: hidden; }
.am-fold > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 14px; list-style: none; }
.am-fold > summary::-webkit-details-marker { display: none; }
.am-fold > summary::after { float: right; color: var(--d-dim); }
.am-fold[open] > summary { border-bottom: 1px solid var(--d-border); }

.am-fold .am-warning-panel, .am-fold .am-blacklist-config { margin: 0; border: 0; border-radius: 0; }
.am-rule-action, .am-rule-setting { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; color: var(--d-dim); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .35px; }
.am-rule-action .dash-select { margin-top: 0; font-size: 12px; text-transform: none; letter-spacing: 0; }
/* v244 : étendu aux sélecteurs — les cases numériques de l'auto-mod sont
   devenues des listes à préréglages. */
.am-rule-setting .dash-input, .am-rule-setting .dash-select { margin-top: 0; font-size: 13px; }
.am-rule-setting small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.am-policy-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 250px); gap: 14px; align-items: end; margin-top: 13px; padding: 12px 14px; border: 1px solid var(--d-border); border-radius: 12px; background: rgba(255,255,255,.014); }
.am-inline-toggle { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.am-inline-toggle input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--d-accent); }
.am-inline-toggle span { display: flex; flex-direction: column; gap: 3px; }
.am-inline-toggle b { font-size: 13px; }
.am-inline-toggle small { color: var(--d-dim); font-size: 11px; }
.am-policy-time .dash-label { margin-top: 0; }
.am-warning-panel { margin-top: 15px; padding: 14px; border: 1px solid rgba(254,231,92,.25); border-radius: 12px; background: linear-gradient(135deg, rgba(254,231,92,.08), rgba(237,66,69,.035)); }
.am-panel-title > span { flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; color: #ffe58a; background: rgba(254,231,92,.1); border: 1px solid rgba(254,231,92,.22); font-size: 11px; font-weight: 800; }
.am-warning-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 9px; }
.am-warning-grid .dash-label { margin-top: 0; }
.am-help { display: block; color: var(--d-dim); font-size: 11px; line-height: 1.45; }
.am-help code { color: #b9bdf5; }
.am-save-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--d-border); }
.am-save-hint { color: var(--d-dim); font-size: 12px; }
.am-exceptions-card { border-color: rgba(var(--d-accent-rgb), .28); }
.am-exception-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.am-choice-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 35px; }
.am-choice { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 6px 9px; border: 1px solid var(--d-border); border-radius: 999px; color: var(--d-dim); background: var(--d-card2); cursor: pointer; font-size: 11px; transition: .14s; }
.am-choice input { position: absolute; opacity: 0; pointer-events: none; }
.am-choice b { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.am-choice:hover { border-color: rgba(var(--d-accent-rgb), .6); color: var(--d-text); transform: translateY(-1px); }
.am-choice.selected { border-color: rgba(110,231,160,.55); color: #8df0b2; background: rgba(59,165,93,.13); box-shadow: 0 5px 14px -12px rgba(59,165,93,.9); }
.am-choice-empty { color: var(--d-dim); font-size: 12px; padding: 8px 0; }

/* Sélecteurs multi-valeurs : un vrai menu natif + les choix déjà ajoutés. */
.discord-multi-picker { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.discord-multi-select { width: 100%; margin-top: 0; }
.discord-multi-values { display: flex; flex-wrap: wrap; gap: 7px; min-height: 28px; }
.discord-multi-empty { color: var(--d-dim); font-size: 12px; padding: 5px 0; }
.discord-multi-choice { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 9px; border: 1px solid var(--d-border); border-radius: 999px; color: var(--d-text); background: var(--d-card2); font-size: 11px; }
.discord-multi-choice b { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discord-multi-choice.is-missing, .am-choice.is-missing, .ca-choice.is-missing { color: #ffd27a; border-color: rgba(254,190,92,.48); background: rgba(254,190,92,.09); box-shadow: none; }
.discord-multi-icon { line-height: 1; }
.am-choice .discord-multi-remove, .ca-choice .discord-multi-remove, .discord-multi-choice .discord-multi-remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; color: currentColor; background: rgba(255,255,255,.1); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.am-choice .discord-multi-remove:hover, .ca-choice .discord-multi-remove:hover, .discord-multi-choice .discord-multi-remove:hover { color: #fff; background: rgba(237,66,69,.8); }
.am-exceptions-card .dash-label { margin-bottom: 6px; }

.am-summary-card { border-color: rgba(var(--d-accent-rgb), .25); }
.am-summary-loading { color: var(--d-dim); font-size: 12px; }
.am-summary-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.am-summary-stats > div { padding: 11px 10px; border: 1px solid var(--d-border); border-radius: 12px; background: rgba(var(--d-accent-rgb), .065); }
.am-summary-stats b { display: block; color: var(--d-text); font-size: 22px; line-height: 1; }
.am-summary-stats small { display: block; margin-top: 5px; color: var(--d-dim); font-size: 11px; }
.am-summary-label { margin-top: 13px; color: var(--d-dim); font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.am-summary-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.am-summary-tag { padding: 5px 9px; border: 1px solid var(--d-border); border-radius: 999px; color: var(--d-dim); background: var(--d-card2); font-size: 12px; }
.am-summary-tag b { color: var(--d-text); }
.am-simulator-card { border-color: rgba(var(--d-accent-rgb), .3); background: linear-gradient(135deg, rgba(var(--d-accent-rgb), .08), rgba(139,92,246,.035)), var(--d-card); }
.am-sim-text { resize: vertical; min-height: 78px; }
.am-sim-controls { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(130px, .7fr) auto; gap: 9px; margin-top: 9px; }
.am-sim-controls .dash-btn { min-width: 130px; justify-content: center; }
.am-sim-result { min-height: 6px; margin-top: 10px; }
.am-result { padding: 11px 12px; border: 1px solid var(--d-border); border-radius: 12px; font-size: 13px; line-height: 1.5; }
.am-result small { color: var(--d-dim); }
.am-result.neutral { color: var(--d-dim); background: rgba(255,255,255,.025); }
.am-result.success { color: #8df0b2; border-color: rgba(59,165,93,.38); background: rgba(59,165,93,.09); }
.am-result.observe { color: #ffe58a; border-color: rgba(254,231,92,.38); background: rgba(254,231,92,.08); }
.am-result.warning { color: #ffe58a; border-color: rgba(254,231,92,.38); background: rgba(254,231,92,.08); }
.am-result.danger { color: #ff9b9d; border-color: rgba(237,66,69,.38); background: rgba(237,66,69,.08); }

html.hx-light .am-control-hero { background: linear-gradient(135deg, rgba(59,165,93,.1), rgba(var(--d-accent-rgb), .045)); }
html.hx-light .am-rule-card { background: linear-gradient(180deg, rgba(var(--d-accent-rgb), .035), transparent 45%), var(--d-card2); }
html.hx-light .am-preview-shell, html.hx-light .am-mode-row, html.hx-light .am-policy-row { background: rgba(255,255,255,.55); }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .am-rule-grid, .am-warning-grid, .am-exception-grid { grid-template-columns: 1fr; }
  .am-mode-row, .am-policy-row { grid-template-columns: 1fr; align-items: stretch; }
  .am-warning-grid { gap: 2px; }
  .am-sim-controls { grid-template-columns: 1fr; }
  .am-sim-controls .dash-btn { width: 100%; }
}
@media (max-width: 520px) {
  .am-control-hero { align-items: flex-start; flex-direction: column; }
  .am-main-toggle { align-self: stretch; justify-content: space-between; }
  .am-rule-heading, .am-panel-title { flex-direction: column; }
  .am-panel-title > span { align-self: flex-start; }
  .am-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-save-row { align-items: stretch; flex-direction: column; }
  .am-save-row .dash-btn { width: 100%; justify-content: center; }
}

/* Brouillon / publication et filtres du centre des avertissements */
.am-save-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.am-warning-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 2px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--d-border); }
.am-filter { border: 1px solid var(--d-border); border-radius: 999px; padding: 5px 10px; color: var(--d-dim); background: var(--d-card2); font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: .14s; }
.am-filter:hover { border-color: rgba(var(--d-accent-rgb), .6); color: var(--d-text); transform: translateY(-1px); }
.am-filter.active { border-color: rgba(var(--d-accent-rgb), .65); color: #d9dcff; background: rgba(var(--d-accent-rgb), .2); box-shadow: 0 5px 14px -12px var(--d-glow); }
@media (max-width: 520px) {
  .am-save-actions { width: 100%; }
  .am-save-actions .dash-btn { flex: 1; justify-content: center; }
  .am-filter { min-height: 36px; }
}

/* ============================================================
   ✨ HOXERA v3.19 — Dashboard Design System
   Refonte globale : surfaces, sélecteurs, boutons, navigation et responsive.
   Aucun identifiant de module ni comportement serveur n'est modifié.
   ============================================================ */
:root {
  --d-surface-0: #090a10;
  --d-surface-1: #10121d;
  --d-surface-2: #171a29;
  --d-border-soft: rgba(130,139,185,.16);
  --d-border-focus: rgba(var(--d-accent-rgb), .72);
  --d-radius-card: 12px;
  --d-radius-control: 12px;
}

body.dash-body {
  background:
    radial-gradient(900px 460px at 82% -8%, rgba(var(--d-accent-rgb), .16), transparent 68%),
    radial-gradient(760px 460px at -12% 76%, rgba(139,92,246,.11), transparent 67%),
    var(--d-bg);
}
.dash-shell {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
    radial-gradient(900px 520px at 70% 0%, rgba(var(--d-accent-rgb), .055), transparent 70%),
    var(--d-bg);
  background-size: 42px 42px, 42px 42px, auto, auto;
}
.dash-main { padding: 26px 32px 78px; }
.dash-side {
  width: 272px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 32%), rgba(14,16,27,.96);
  border-right-color: var(--d-border-soft);
  box-shadow: 16px 0 45px -36px rgba(0,0,0,.95);
}
.dash-side::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--d-accent), var(--d-accent2), transparent 82%);
  opacity: .85;
}
.dash-side-item {
  min-height: 42px;
  margin: 2px 10px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #9297ad;
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.dash-side-item:hover { background: rgba(var(--d-accent-rgb), .1); color: var(--d-text); border-color: rgba(var(--d-accent-rgb), .15); transform: translateX(3px); }
.dash-side-item.active {
  color: #fff;
  border-color: rgba(var(--d-accent-rgb), .3);
  background: linear-gradient(100deg, rgba(var(--d-accent-rgb), .25), rgba(139,92,246,.1));
  box-shadow: 0 8px 22px -16px var(--d-glow), 0 1px 0 rgba(255,255,255,.06) inset;
}
.dash-side-item .ico { width: 29px; height: 29px; border-radius: 8px; background: rgba(255,255,255,.045); }
.dash-side-item.active .ico { background: linear-gradient(135deg, rgba(var(--d-accent-rgb), .38), rgba(139,92,246,.3)); }
.dash-side-section { padding-left: 20px; color: #666b83; letter-spacing: 1.4px; }
.dash-side-foot { border-top-color: var(--d-border-soft); padding: 17px 18px; }

.dash-topbar {
  position: sticky;
  top: 56px;
  z-index: 40;
  min-height: 66px;
  padding: 11px 14px;
  border-color: var(--d-border-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), rgba(18,20,33,.88);
  box-shadow: 0 16px 38px -28px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.dash-crumb .crumb-ico { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 8px 20px -12px var(--d-glow); }
.dash-crumb .crumb-txt b { font-size: 16px; }
.dash-topbar-actions { gap: 8px; }
.dash-iconbtn {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent), var(--d-card2);
  border-color: var(--d-border-soft);
  box-shadow: 0 5px 14px -12px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.04) inset;
}
.dash-iconbtn:hover { border-color: var(--d-border-focus); background: rgba(var(--d-accent-rgb), .16); box-shadow: 0 10px 20px -14px var(--d-glow); }
.dash-server-card { border-color: var(--d-border-soft); background: rgba(255,255,255,.035); }
.dash-server-card:hover { border-color: var(--d-border-focus); }

.dash-module-header { gap: 16px; margin-bottom: 24px; padding: 5px 2px 18px; }
.dash-module-header .m-icon { width: 52px; height: 52px; border-radius: 12px; font-size: 22px; box-shadow: 0 12px 28px -15px var(--d-glow); }
.dash-module-header h1 { font-size: 22px; letter-spacing: -.3px; }
.dash-module-header .sub { font-size: 13px; }

.dash-card {
  border-radius: var(--d-radius-card);
  border-color: var(--d-border-soft);
  padding: 22px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 18px 42px -32px rgba(0,0,0,.95);
}
.dash-card:hover { border-color: rgba(var(--d-accent-rgb), .34); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 22px 50px -34px rgba(0,0,0,.95); }
.dash-card h3 { font-size: 16px; }
.dash-card .desc { font-size: 13px; }
.dash-stats { gap: 12px; }
.dash-stat { border-color: var(--d-border-soft); background: linear-gradient(145deg, rgba(255,255,255,.04), transparent 55%), var(--d-card); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 35px -28px rgba(0,0,0,.95); }
.dash-stat:hover { border-color: rgba(var(--d-accent-rgb), .5); }
.dash-stat .lbl { letter-spacing: .1px; }

/* Sélecteurs et champs : flèche et état de focus homogènes */
.dash-input, .dash-select, textarea.dash-input {
  min-height: 43px;
  border-radius: var(--d-radius-control);
  border-color: var(--d-border-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 65%), var(--d-card2);
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.dash-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23979db8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.035), transparent 65%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 14px center, 0 0;
  background-size: 14px, auto;
}
.dash-select option { color: var(--d-text); background: var(--d-card); }
.dash-input:hover, .dash-select:hover { border-color: rgba(var(--d-accent-rgb), .42); }
.dash-input:focus, .dash-select:focus, textarea.dash-input:focus {
  border-color: var(--d-border-focus);
  box-shadow: 0 0 0 4px rgba(var(--d-accent-rgb), .14), 0 1px 0 rgba(255,255,255,.06) inset;
  background-color: #22263a;
}
.dash-input::placeholder { color: #6e748e; }

/* ============================================================
   🎛️ Menu déroulant custom (façon panel pro) — v157
   Chaque sélecteur s'ouvre dans un vrai panneau : recherche,
   options lisibles avec icône, option courante cochée ✓.
   ============================================================ */
.dd-host { position: relative; display: block; }
.dd-host > select { display: none; }

.dd-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 43px; padding: 8px 12px 8px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 65%), var(--d-card2);
  color: var(--d-text); border: 1px solid var(--d-border-soft, var(--d-border));
  border-radius: var(--d-radius-control, 8px); cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit; text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.dd-trigger:hover { border-color: rgba(var(--d-accent-rgb), .45); }
.dd-trigger:focus-visible, .dd-trigger[aria-expanded="true"] {
  border-color: var(--d-accent);
  box-shadow: 0 0 0 4px rgba(var(--d-accent-rgb), .16);
  outline: none;
}
.dd-trigger.is-empty .dd-value { color: #6e748e; font-weight: 500; }
.dd-trigger.is-disabled { opacity: .55; cursor: not-allowed; }
.dd-trigger .dd-value {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-trigger .dd-caret {
  flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; background: rgba(255,255,255,.05);
  color: var(--d-dim); font-size: 12px; transition: transform .18s ease, color .18s ease;
}
.dd-trigger[aria-expanded="true"] .dd-caret { transform: rotate(180deg); color: var(--d-accent); }

.dd-panel {
  /* v366 — le plafond est lié à l'écran, plus seulement à 336 px : une fenêtre
     courte (téléphone à l'horizontale, petit hubot) coupait le bas de la liste
     sans moyen d'y atteindre. La 2e ligne est ignorée des très vieux
     navigateurs, qui gardent 336 px. */
  position: fixed; z-index: 950; width: 260px; overflow: hidden;
  max-height: 336px;
  max-height: min(336px, calc(100vh - 24px));
  max-height: min(336px, calc(100dvh - 24px));
  display: flex; flex-direction: column;
  background: #232637; border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.35);
  animation: dd-in .14s ease;
}
/* display:flex écraserait l'attribut hidden : fermeture visuelle garantie */
.dd-panel[hidden] { display: none; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
.dd-panel.is-up { animation-name: dd-in-up; }
@keyframes dd-in-up { from { opacity: 0; transform: translateY(4px) scale(.985); } to { opacity: 1; transform: none; } }

.dd-search {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.dd-search span { color: var(--d-dim); font-size: 13px; }
.dd-search input {
  flex: 1; min-width: 0; background: rgba(0,0,0,.28); border: 1px solid transparent;
  border-radius: 8px; padding: 7px 10px; color: var(--d-text);
  font-size: 13px; font-family: inherit; outline: none;
}
.dd-search input:focus { border-color: rgba(var(--d-accent-rgb), .55); background: rgba(0,0,0,.4); }
.dd-search input::placeholder { color: #6e748e; }

.dd-list {
  overflow-y: auto; padding: 6px; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.dd-list::-webkit-scrollbar { width: 8px; }
.dd-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
.dd-list::-webkit-scrollbar-track { background: transparent; }
.dd-item img { border-radius: 8px; background: rgba(255,255,255,.06); object-fit: cover; }
.dd-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; transition: background .1s ease;
}
.dd-option:hover, .dd-option.is-active { background: rgba(var(--d-accent-rgb), .13); }
.dd-option.is-selected { background: rgba(var(--d-accent-rgb), .18); }
.dd-option.is-disabled { opacity: .5; cursor: default; }
.dd-option.is-disabled:hover { background: none; }
.dd-opt-ico {
  flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; background: rgba(255,255,255,.06);
  font-size: 16px; overflow: hidden;
}
.dd-opt-ico img { width: 100%; height: 100%; object-fit: cover; }
.dd-opt-fallback { color: var(--d-text); font-weight: 800; font-size: 13px; }
.dd-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dd-opt-txt b {
  font-size: 13px; font-weight: 650; color: var(--d-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-opt-txt small { font-size: 11px; color: var(--d-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-check { flex-shrink: 0; color: var(--d-accent); font-weight: 800; font-size: 13px; }
.dd-empty { padding: 18px 12px; text-align: center; color: var(--d-dim); font-size: 13px; }

/* Bouton « ＋ Ajouter » du multi-sélecteur */
.dd-add-btn {
  display: inline-flex; align-items: center; gap: 8px; width: 100%;
  min-height: 40px; padding: 7px 14px; justify-content: center;
  background: transparent; color: var(--d-dim); cursor: pointer;
  border: 1.5px dashed rgba(var(--d-accent-rgb), .45); border-radius: 8px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  transition: .15s;
}
.dd-add-btn:hover, .dd-add-btn[aria-expanded="true"] {
  color: var(--d-accent); border-color: var(--d-accent);
  background: rgba(var(--d-accent-rgb), .08);
}
.dd-add-btn.is-done { border-style: solid; border-color: rgba(59,165,93,.4); color: #7ed99a; cursor: default; }
.dd-add-btn.is-done:hover { background: none; color: #7ed99a; }

/* Sur mobile : le panneau devient une feuille qui monte du bas.
   bottom n’est PAS en !important : JS le calcule pour rester au-dessus
   du clavier (v325). 16 px sur le champ = pas de zoom iOS (clavier chiffres). */
@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dd-panel.is-sheet {
    left: 10px !important; right: 10px !important; top: auto !important;
    width: auto !important;
    /* v366 — 62vh : sur mobile, « vh » est la GRANDE hauteur (barre d'adresse
       masquée). La feuille dépassait donc l'écran de quelques pixels pile au
       moment où le bandeau se referme. « dvh » = hauteur réellement visible,
       comme le fait déjà .modal (92dvh). */
    max-height: 62vh;
    max-height: min(62dvh, calc(100dvh - 20px));
    animation-name: dd-in-up;
  }
  .dd-panel { border-radius: 12px; }
  .dd-search input { font-size: 16px; min-height: 44px; }
}

/* v326 — lignes « emoji → rôle » : même menu que les autres sélecteurs,
   pas un pavé pleine carte à côté d’un champ 70 px. */
.rr-maps { display: flex; flex-direction: column; gap: 8px; }
.rr-map-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rr-map-row .dd-host { flex: 1 1 200px; max-width: 280px; min-width: 160px; }
.rr-map-row .dash-input.rr-emoji { width: 70px; flex: 0 0 70px; }
.rr-map-row .dash-input.rr-label { flex: 1 1 140px; max-width: 220px; }
.modal .row-item .dd-host { flex: 1 1 180px; min-width: 140px; max-width: 100%; }
@media (max-width: 700px) {
  .rr-map-row { flex-direction: column; align-items: stretch; }
  .rr-map-row .dd-host,
  .rr-map-row .dash-input.rr-emoji,
  .rr-map-row .dash-input.rr-label {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
  }
  .modal .row-item { flex-wrap: wrap; }
  .modal .row-item .dd-host,
  .modal .row-item .input { width: 100%; max-width: 100%; }
}

/* États et hiérarchie des actions */
.dash-btn { min-height: 42px; border-radius: 12px; font-size: 13px; letter-spacing: .05px; }
.dash-btn-primary { box-shadow: 0 10px 28px -14px var(--d-glow), 0 1px 0 rgba(255,255,255,.2) inset; }
.dash-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 15px 32px -14px var(--d-glow), 0 1px 0 rgba(255,255,255,.22) inset; }
.dash-btn-danger { background: rgba(237,66,69, 0.14); }
.dash-btn-sm { min-height: 37px; }
.dash-btn:focus-visible, .dash-iconbtn:focus-visible, .dash-select:focus-visible, .dash-input:focus-visible { outline: none; }

/* Modales, notifications et feuille mobile */
.modal { border-color: var(--d-border-soft); box-shadow: 0 28px 90px -30px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.05) inset; }
.modal-header, .modal-footer { border-color: var(--d-border-soft); }
.toast { border-color: var(--d-border-soft); box-shadow: 0 18px 40px -20px rgba(0,0,0,.95); }

html.hx-light body.dash-body, html.hx-light .dash-shell {
  background:
    linear-gradient(rgba(60,65,110,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,65,110,.035) 1px, transparent 1px),
    radial-gradient(900px 460px at 82% -8%, rgba(var(--d-accent-rgb), .1), transparent 68%),
    var(--d-bg);
  background-size: 42px 42px, 42px 42px, auto, auto;
}
html.hx-light .dash-side { background: linear-gradient(180deg, rgba(var(--d-accent-rgb), .035), transparent 32%), rgba(255,255,255,.9); box-shadow: 16px 0 45px -36px rgba(45,50,90,.4); }
html.hx-light .dash-topbar { background: rgba(255,255,255,.82); }
html.hx-light .dash-input, html.hx-light .dash-select, html.hx-light textarea.dash-input { background: linear-gradient(180deg, rgba(var(--d-accent-rgb), .035), transparent 65%), var(--d-card2); }
html.hx-light .dash-input:focus, html.hx-light .dash-select:focus, html.hx-light textarea.dash-input:focus { background-color: #fff; }

@media (max-width: 1100px) {
  .dash-main { padding-left: 22px; padding-right: 22px; }
  .dash-side { width: 248px; }
}
@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dash-main { padding: 8px 12px calc(98px + env(safe-area-inset-bottom)); }
  .dash-topbar { top: 0; border-radius: 0; margin: 0 -12px 14px; padding: calc(10px + env(safe-area-inset-top)) 12px 11px; }
  .dash-card { padding: 18px 16px; border-radius: 12px; }
  .dash-module-header { padding: 3px 0 15px; }
  .dash-module-header h1 { font-size: 18px; }
  .dash-module-header .m-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
  .dash-input, .dash-select, textarea.dash-input { min-height: 48px; font-size: 16px; }
  .dash-select { background-position: right 14px center, 0 0; }
  .dash-btn { min-height: 46px; }
  .dash-btn-sm { min-height: 40px; }
}
@media (max-width: 520px) {
  .dash-topbar-actions { gap: 6px; }
  .dash-iconbtn { width: 40px; height: 40px; }
  .dash-card h3 { font-size: 16px; }
  .dash-stat .val { font-size: 22px; }
}

/* ============================================================
   📣 HOXERA v3.22 — composeur d'annonces personnalisées
   ============================================================ */
.custom-announcement-card {
  border-color: rgba(139,92,246,.35);
  background:
    radial-gradient(620px 220px at 100% 0%, rgba(139,92,246,.13), transparent 70%),
    radial-gradient(500px 180px at 0% 100%, rgba(var(--d-accent-rgb), .08), transparent 72%),
    var(--d-card);
}
.ca-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 2px 0 15px; }
.ca-status-copy { color: var(--d-dim); font-size: 12px; }
.ca-top-grid, .ca-destination-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ca-destination-grid { margin-top: 13px; }
.ca-color-row { display: flex; align-items: center; gap: 9px; }
.ca-color-row input[type="color"] { width: 52px; height: 43px; flex: 0 0 auto; padding: 3px; border: 1px solid var(--d-border-soft); border-radius: 12px; background: var(--d-card2); cursor: pointer; }
.ca-color-row .dash-input { flex: 1; min-width: 0; }
.ca-choice-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 42px; padding: 2px 0; }
.ca-choice { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 7px 10px; border: 1px solid var(--d-border-soft); border-radius: 999px; color: var(--d-dim); background: var(--d-card2); cursor: pointer; font-size: 11px; transition: .14s; }
.ca-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ca-choice b { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-choice:hover { color: var(--d-text); border-color: var(--d-border-focus); transform: translateY(-1px); }
.ca-choice.selected { color: #d8dcff; border-color: rgba(var(--d-accent-rgb), .68); background: linear-gradient(135deg, rgba(var(--d-accent-rgb), .24), rgba(139,92,246,.13)); box-shadow: 0 6px 17px -14px var(--d-glow); }
.ca-choice-empty { color: var(--d-dim); padding: 8px 0; font-size: 12px; }
.ca-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--d-border-soft); border-bottom: none; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.045), transparent), var(--d-card2); }
.ca-mark { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid var(--d-border-soft); border-radius: 8px; color: var(--d-text); background: rgba(255,255,255,.035); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: .14s; }
.ca-mark:hover { color: #fff; border-color: var(--d-border-focus); background: rgba(var(--d-accent-rgb), .2); transform: translateY(-1px); }
.ca-message { min-height: 190px; border-radius: 0 0 12px 12px !important; resize: vertical; line-height: 1.5; }
.ca-editor-help { margin-top: 6px; color: var(--d-dim); font-size: 11px; line-height: 1.45; }
.ca-preview-wrap { margin-top: 17px; padding: 14px; border: 1px solid rgba(var(--d-accent-rgb), .22); border-radius: 12px; background: rgba(8,9,14,.16); }
.ca-preview-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: var(--d-text); font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.ca-preview-label span { color: #6ee7a0; font-size: 11px; letter-spacing: .1px; text-transform: none; }
.ca-discord-preview { overflow: hidden; padding: 14px; border: 1px solid #1e1f22; border-radius: 12px; color: #dbdee1; background: radial-gradient(260px 120px at 100% 0%, rgba(var(--d-accent-rgb), .12), transparent 70%), #313338; font-size: 13px; }
.ca-discord-author { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.ca-discord-author b { color: #f2f3f5; }
/* Badge « APP » de la prévisualisation Discord : 8 px, comme sur Discord.
   Sous le plancher de 11 px exprès (test/v244-test.js) — c'est une copie
   d'interface Discord, pas un texte de notre tableau de bord. */
.ca-discord-author > span:last-child { padding: 2px 5px; border-radius: 4px; color: #fff; background: #5865f2; font-size: 8px; font-weight: 800; }
.ca-bot-avatar { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--d-accent), var(--d-accent2)); }
.ca-preview-pings { margin-bottom: 8px; color: #bfc5ff; font-size: 11px; }
.ca-role-mention { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 6px; border-radius: 4px; background: rgba(var(--d-accent-rgb), .3); color: #c9ceff; }
.ca-embed-preview { padding: 12px 14px; border-left: 4px solid #5865f2; border-radius: 4px; background: #2b2d31; box-shadow: 0 9px 24px -19px rgba(0,0,0,.9); }
.ca-embed-title { margin-bottom: 8px; color: #fff; font-size: 16px; font-weight: 800; }
.ca-embed-body { min-height: 35px; color: #dbdee1; line-height: 1.55; overflow-wrap: anywhere; }
.ca-embed-body strong { color: #fff; }
.ca-embed-body code { padding: 2px 5px; border-radius: 4px; color: #ffb7c6; background: #1e1f22; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.ca-embed-body pre { overflow-x: auto; padding: 9px 10px; border-radius: 8px; color: #e6e9ff; background: #1e1f22; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; white-space: pre-wrap; }
.ca-embed-body blockquote { margin: 5px 0; padding-left: 9px; border-left: 3px solid #6d75ff; color: #b9bdca; }
.ca-embed-body .ca-bullet { margin: 3px 0; }
.ca-placeholder { color: #8f929b; font-style: italic; }
.ca-embed-preview img { display: block; width: 100%; max-height: 180px; margin-top: 11px; border-radius: 8px; object-fit: cover; }
.ca-embed-footer { margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); color: #949ba4; font-size: 10px; }
.ca-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--d-border-soft); }
.ca-actions .dash-btn { min-height: 43px; }
.ca-status-line { min-height: 18px; margin-top: 8px; color: var(--d-dim); font-size: 12px; }
html.hx-light .custom-announcement-card { background: radial-gradient(620px 220px at 100% 0%, rgba(139,92,246,.1), transparent 70%), var(--d-card); }
html.hx-light .ca-toolbar { background: linear-gradient(180deg, rgba(var(--d-accent-rgb), .05), transparent), var(--d-card2); }
html.hx-light .ca-preview-wrap { background: rgba(255,255,255,.55); }
@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .ca-top-grid, .ca-destination-grid { grid-template-columns: 1fr; gap: 4px; }
  .ca-preview-wrap { margin-left: 0; margin-right: 0; }
  .ca-actions { flex-direction: column; align-items: stretch; }
  .ca-actions .dash-btn { width: 100%; justify-content: center; }
}
@media (max-width: 520px) {
  .ca-toolbar { gap: 5px; padding: 7px; }
  .ca-mark { min-width: 32px; padding: 0 7px; }
  .ca-preview-label { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* ============================================================
   NEXORA v4.0 — Dashboard Control Center
   Refonte visuelle finale, sans changement d'API ni de données.
   ============================================================ */
:root {
  --d-bg: #090d14;
  --d-side: #0d131d;
  --d-card: #121a26;
  --d-card2: #182332;
  --d-border: #28364b;
  --d-border-soft: rgba(49,65,88,.72);
  --d-text: #f3f6fb;
  --d-dim: #91a0b7;
  --d-accent: #7082ff;
  --d-accent2: #9a7bff;
  --d-green: #49d17d;
  --d-red: #f06c75;
  --d-yellow: #f4c96b;
  --d-glow: rgba(var(--d-accent-rgb), .58);
}

.dash-shell {
  position: relative; min-height: calc(100vh - 66px);
  background:
    linear-gradient(rgba(var(--d-accent-rgb), .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--d-accent-rgb), .025) 1px, transparent 1px),
    radial-gradient(900px 500px at 82% -12%, rgba(var(--d-accent-rgb), .095), transparent 70%),
    var(--d-bg);
  background-size: 44px 44px, 44px 44px, auto, auto;
}

.dash-side {
  width: 278px; padding: 14px 10px 12px;
  background: linear-gradient(180deg, rgba(22,31,46,.9), rgba(10,15,23,.98));
  border-right: 1px solid rgba(49,65,88,.72);
  box-shadow: 18px 0 42px -38px rgba(0,0,0,.95);
  top: 66px; height: calc(100vh - 66px);
}
.dash-side::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 180px;
  background: radial-gradient(260px 140px at 20% 0%, rgba(var(--d-accent-rgb), .11), transparent 70%);
  pointer-events: none;
}
.dash-side > * { position: relative; z-index: 1; }
.dash-side-brand {
  display: flex; align-items: center; gap: 10px; margin: 1px 5px 17px; padding: 4px 5px 15px;
  border-bottom: 1px solid rgba(49,65,88,.66);
}
.dash-side-brand-avatar {
  width: 39px; height: 39px; flex: 0 0 39px; border-radius: 12px; object-fit: cover;
  border: 1px solid rgba(150,164,255,.38); background: #182337;
  box-shadow: 0 9px 22px -14px rgba(var(--d-accent-rgb), .9);
}
.dash-side-brand-avatar.fallback { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; background: linear-gradient(145deg,#6478ff,#956fff); }
.dash-side-brand-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dash-side-brand-copy b { color: #f6f8ff; font-size: 14px; letter-spacing: -.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-side-brand-copy span { color: #71819a; font-size: 11px; letter-spacing: .7px; text-transform: uppercase; margin-top: 3px; }
.dash-side-brand-status { width: 8px; height: 8px; margin-left: auto; flex: 0 0 8px; border-radius: 50%; background: var(--d-green); box-shadow: 0 0 0 4px rgba(73,209,125,.1), 0 0 14px rgba(73,209,125,.55); }

.dash-server-card {
  margin: 0 4px 19px; padding: 12px 13px; border-radius: 12px;
  background: linear-gradient(145deg, rgba(35,48,72,.7), rgba(18,27,41,.92));
  border-color: rgba(73,94,128,.68); box-shadow: 0 15px 32px -26px rgba(0,0,0,.9);
}
.dash-server-card:hover { border-color: rgba(var(--d-accent-rgb), .74); box-shadow: 0 18px 34px -23px rgba(73,90,180,.55); }
.dash-server-card img, .dash-server-card .srv-fallback { width: 40px; height: 40px; border-radius: 12px; }
.dash-server-card .srv-label { color: #72839d; }
.dash-server-card .srv-txt b { color: #eef2fa; }

.dash-side-section { padding: 12px 14px 6px; color: #687a96; font-size: 11px; letter-spacing: 1.5px; }
.dash-side-item {
  position: relative; margin: 2px 1px; width: calc(100% - 2px); min-height: 41px; padding: 8px 11px;
  border: 1px solid transparent; border-radius: 12px; color: #8998ad; font-size: 13px;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.dash-side-item .ico { width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.045); font-size: 16px; transition: transform .16s ease, background .16s ease; }
.dash-side-item:hover { transform: translateX(3px); color: #edf1fa; background: rgba(var(--d-accent-rgb), .075); border-color: rgba(var(--d-accent-rgb), .16); }
.dash-side-item:hover .ico { transform: scale(1.06); background: rgba(var(--d-accent-rgb), .16); }
.dash-side-item.active { color: #fff; background: rgba(var(--d-accent-rgb), 0.18); border-color: rgba(var(--d-accent-rgb), .38); box-shadow: inset 3px 0 0 #7082ff, 0 9px 22px -18px rgba(var(--d-accent-rgb), .82); }
.dash-side-item.active .ico { background: rgba(var(--d-accent-rgb), 0.37); }
.dash-global-admin { margin-top: 10px; color: #d5c9ff; border-color: rgba(var(--d-accent-rgb), .2); background: rgba(var(--d-accent-rgb), .055); }
.dash-global-admin:hover { border-color: rgba(var(--d-accent-rgb), .55); background: rgba(var(--d-accent-rgb), .12); }
.dash-side-foot { margin: auto 2px 0; padding: 15px 8px 3px; border-top-color: rgba(49,65,88,.7); }

.dash-main { padding: 24px 30px 70px; }
.dash-topbar {
  min-height: 68px; margin-bottom: 27px; padding: 12px 15px; border-radius: 12px;
  background: linear-gradient(145deg, rgba(24,34,50,.9), rgba(15,22,33,.95));
  border-color: rgba(49,65,88,.82); box-shadow: 0 14px 35px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.035);
}
.dash-crumb .crumb-ico { width: 43px; height: 43px; border-radius: 12px; background: rgba(var(--d-accent-rgb), 0.21); border-color: rgba(var(--d-accent-rgb), .34); }
.dash-crumb .crumb-txt b { color: #f4f6fb; font-size: 16px; letter-spacing: -.2px; }
.dash-crumb .crumb-txt span { color: #8797af; }
.dash-topbar-actions { gap: 7px; }
.dash-iconbtn { width: 39px; height: 39px; border-radius: 12px; background: rgba(24,35,51,.9); border-color: #2c3a51; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.dash-iconbtn:hover { transform: translateY(-2px); border-color: rgba(var(--d-accent-rgb), .7); background: #202d43; box-shadow: 0 10px 23px -17px rgba(var(--d-accent-rgb), .9); }
.dash-bot-chip { border-color: #2c3a51 !important; background: rgba(24,35,51,.9) !important; border-radius: 12px !important; padding: 5px 9px !important; }
.dash-bot-chip img, .dash-bot-chip .chip-fallback { width: 29px !important; height: 29px !important; border-radius: 8px !important; }

.dash-module-header { gap: 15px; margin-bottom: 23px; animation: humanDashIn .32s cubic-bezier(.2,.8,.25,1) both; }
.dash-module-header .m-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(var(--d-accent-rgb), 0.20); border-color: rgba(var(--d-accent-rgb), .36); box-shadow: 0 13px 30px -23px rgba(var(--d-accent-rgb), .85), inset 0 1px 0 rgba(255,255,255,.08); }
.dash-module-header h1 { color: #f5f7fc; font-size: 22px; letter-spacing: -.55px; }
.dash-module-header .sub { color: #8d9bb0; font-size: 13px; }

.dash-stats { gap: 13px; }
.dash-stat {
  position: relative; overflow: hidden; padding: 17px 18px; border-radius: 12px;
  background: linear-gradient(145deg, rgba(22,32,47,.95), rgba(15,23,34,.96)); border-color: #29384e;
  box-shadow: 0 15px 32px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.035);
}
.dash-stat::after { content: ''; position: absolute; right: -22px; top: -28px; width: 88px; height: 88px; border-radius: 50%; background: rgba(var(--d-accent-rgb), .08); }
.dash-stat .val { color: #f2f5fb; font-size: 28px; letter-spacing: -.5px; }
.dash-stat .lbl { color: #8291a8; }

.dash-card {
  position: relative; overflow: hidden; padding: 22px 23px; border-radius: 12px;
  background: linear-gradient(145deg, rgba(20,29,43,.97), rgba(14,21,31,.97)); border-color: #29384e;
  box-shadow: 0 18px 46px -34px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dash-card:hover { border-color: rgba(var(--d-accent-rgb), .42); box-shadow: 0 24px 52px -35px rgba(0,0,0,.98), inset 0 1px 0 rgba(255,255,255,.045); }
#dash-content > .dash-card { animation: humanDashIn .34s cubic-bezier(.2,.8,.25,1) both; }
#dash-content > .dash-card:nth-child(2) { animation-delay: .035s; }
#dash-content > .dash-card:nth-child(3) { animation-delay: .07s; }
#dash-content > .dash-card:nth-child(4) { animation-delay: .105s; }
.dash-card h3 { color: #f0f3fa; font-size: 16px; letter-spacing: -.18px; }
.dash-card .desc { color: #8d9bb0; }

.dash-input, .dash-select, textarea.dash-input {
  min-height: 43px; border-radius: 12px; background: #111a27; border-color: #2b3a51; color: #edf2fa;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.dash-input:hover, .dash-select:hover { border-color: #40516d; background: #142031; }
.dash-input:focus, .dash-select:focus, textarea.dash-input:focus { border-color: #7082ff; background: #142132; box-shadow: 0 0 0 3px rgba(var(--d-accent-rgb), .13); }
.dash-input::placeholder { color: #63738d; }
.dash-label { color: #8999b1; letter-spacing: .8px; }
.dash-btn {
  min-height: 41px; padding: 9px 15px; border-radius: 12px; background: #182434; border-color: #2d3d55; color: #edf2fa;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, filter .16s ease;
}
.dash-btn:hover { transform: translateY(-2px); border-color: rgba(var(--d-accent-rgb), .72); background: #203049; box-shadow: 0 12px 25px -19px rgba(var(--d-accent-rgb), .95); }
.dash-btn:active { transform: translateY(0) scale(.985); }
.dash-btn-primary { background: linear-gradient(135deg, #6478ff, #946fff); border: 0; box-shadow: 0 13px 28px -17px rgba(var(--d-accent-rgb), .96), inset 0 1px 0 rgba(255,255,255,.22); }
.dash-btn-primary:hover { background: linear-gradient(135deg, var(--d-accent), var(--d-accent2)); box-shadow: 0 17px 34px -17px var(--d-glow), inset 0 1px 0 rgba(255,255,255,.26); }
.dash-btn-danger { background: rgba(240,108,117,.1); border-color: rgba(240,108,117,.3); color: #ff9da3; }
.dash-btn-danger:hover { background: rgba(240,108,117,.16); border-color: rgba(240,108,117,.72); }
.dash-badge { background: rgba(24,35,51,.85); border-color: #2d3d55; color: #b4c0d1; }
.dash-badge.ok { color: #66e69a; border-color: rgba(73,209,125,.42); background: rgba(73,209,125,.08); }
.dash-badge.warn { color: #f5d878; border-color: rgba(244,201,107,.42); background: rgba(244,201,107,.08); }
.dash-badge.bad { color: #ff9da3; border-color: rgba(240,108,117,.42); background: rgba(240,108,117,.08); }

.dash-filter, .am-choice, .ca-choice, .discord-multi-choice { background: #152131; border-color: #2b3a51; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.dash-filter:hover, .am-choice:hover, .ca-choice:hover, .discord-multi-choice:hover { transform: translateY(-1px); border-color: rgba(var(--d-accent-rgb), .62); background: #1a2a40; box-shadow: 0 9px 22px -18px rgba(var(--d-accent-rgb), .8); }
.dash-filter input, .am-choice input, .ca-choice input { accent-color: #7082ff; }

.dash-savebar { background: rgba(17,25,38,.94); border-color: rgba(var(--d-accent-rgb), .5); box-shadow: 0 22px 50px -22px #000, inset 0 1px 0 rgba(255,255,255,.06); }
.dash-palette-overlay { background: rgba(4,7,12,.76); backdrop-filter: blur(10px); }
.dash-palette { background: #111a27; border-color: rgba(var(--d-accent-rgb), .52); box-shadow: 0 35px 100px -28px #000, inset 0 1px 0 rgba(255,255,255,.05); }
.dp-item.sel { background: rgba(var(--d-accent-rgb), 0.19); box-shadow: inset 0 0 0 1px rgba(var(--d-accent-rgb), .42); }

@keyframes humanDashIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

html.hx-light .dash-shell {
  background:
    linear-gradient(rgba(70,85,135,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,85,135,.04) 1px, transparent 1px),
    radial-gradient(900px 500px at 82% -12%, rgba(var(--d-accent-rgb), .12), transparent 70%), #f4f6fb;
  background-size: 44px 44px, 44px 44px, auto, auto;
}
html.hx-light .dash-side { background: linear-gradient(180deg, #f0f3fb, #e8edf7); border-color: #d8e0ef; }
html.hx-light .dash-card, html.hx-light .dash-stat, html.hx-light .dash-topbar { background: rgba(255,255,255,.9); border-color: #d9e1ef; box-shadow: 0 18px 42px -30px rgba(52,67,105,.35); }
html.hx-light .dash-side-item { color: #697893; }
html.hx-light .dash-side-item.active { color: #34416c; background: rgba(var(--d-accent-rgb), 0.13); }
html.hx-light .dash-card h3, html.hx-light .dash-stat .val, html.hx-light .dash-crumb .crumb-txt b { color: #20283a; }
html.hx-light .dash-input, html.hx-light .dash-select, html.hx-light textarea.dash-input { background: #f7f9fd; color: #263149; border-color: #cdd8e9; }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dash-main { padding: 13px 12px 96px; }
  .dash-side { top: 52px; height: auto; padding: 7px 8px; background: rgba(13,19,29,.97); border-bottom-color: rgba(49,65,88,.82); }
  .dash-side::before { display: none; }
  .dash-side-brand { display: none; }
  .dash-server-card { margin: 0 7px 0 0; min-width: 208px; }
  .dash-side-section { display: none; }
  .dash-side-item { min-height: 46px; margin: 0 3px; padding: 8px 11px; border-radius: 12px; }
  .dash-global-admin { margin-top: 0; }
  .dash-topbar { margin: 0 -12px 17px; border-radius: 0 0 12px 12px; }
  .dash-module-header h1 { font-size: 18px; }
  .dash-card { border-radius: 12px; padding: 18px 16px; }
  #dash-content > .dash-card { animation-duration: .22s; }
}

@media (prefers-reduced-motion: reduce) {
  #dash-content > *, .dash-module-header, .dash-side-item, .dash-btn, .dash-filter, .am-choice, .ca-choice, .discord-multi-choice { animation: none !important; transition: none !important; }
}

/* ============================================================
   NEXORA v4.1 — Mobile topbar fiable
   Barre d'actions tactile, panneaux en portal et notifications visibles.
   ============================================================ */

/* Les panneaux sortis de la ligne scrollable gardent une position stable
   même quand la topbar est sticky ou que le téléphone change d'orientation. */
.dash-topbar-popover {
  position: fixed;
  z-index: 450;
}
.dash-bell-pop.dash-topbar-popover {
  top: 0;
  right: 12px;
}
.dash-accent-pop.dash-topbar-popover {
  top: 0;
  right: 12px;
}

.bp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 3px 9px 5px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--d-border);
}
.bp-head b { font-size: 13px; color: var(--d-text); }
.bp-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid var(--d-border);
  border-radius: 8px;
  color: var(--d-dim);
  background: transparent;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.bp-close:hover { color: var(--d-text); border-color: var(--d-accent); background: rgba(var(--d-accent-rgb), .12); }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  /* Deux lignes lisibles : serveur, puis actions. La ligne d'actions peut
     défiler horizontalement si « Ajouter le bot » est aussi présent, sans
     réduire les boutons ni faire passer la notification hors de l'écran. */
  .dash-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 9px;
    overflow: visible;
  }
  .dash-topbar > .dash-server-card.topbar-pick {
    order: 1;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: none;
  }
  .dash-topbar > .dash-topbar-actions {
    order: 2;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    padding: 1px 1px 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .dash-topbar-actions::-webkit-scrollbar { display: none; }
  .dash-topbar-actions > * { flex: 0 0 auto; }
  .dash-topbar-actions .dash-iconbtn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .dash-topbar-actions .dash-btn { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
  .dash-topbar-actions .dash-bot-chip { flex: 0 0 auto; min-width: 44px; }
  .dash-accent-wrap { flex: 0 0 auto; }

  /* Sur téléphone, une notification est une vraie feuille flottante. Elle
     reste au-dessus du contenu et de la barre basse, avec une zone de clic
     confortable et une hauteur adaptée aux petits écrans. */
  .dash-bell-pop.dash-topbar-popover {
    top: auto !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: auto;
    max-width: none;
    max-height: 64vh;
    max-height: min(64dvh, 460px);
    border-radius: 12px;
    padding: 10px;
    z-index: 450;
    box-shadow: 0 24px 60px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04) inset;
    animation: mobileTopbarSheet .2s cubic-bezier(.2,.85,.25,1) both;
  }
  .dash-bell-pop.dash-topbar-popover .bp-list { max-height: none; overflow: visible; }
  .dash-bell-pop.dash-topbar-popover .bp-item { min-height: 42px; padding: 11px 10px; }

  /* Le choix de couleur ne doit pas être coupé par le défilement horizontal
     des actions. Les pastilles deviennent une petite feuille accessible. */
  .dash-accent-pop.dash-topbar-popover {
    top: auto !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: auto;
    max-width: none;
    justify-content: space-around;
    gap: 8px;
    padding: 13px 12px;
    border-radius: 12px;
    z-index: 450;
    box-shadow: 0 24px 60px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04) inset;
    animation: mobileTopbarSheet .2s cubic-bezier(.2,.85,.25,1) both;
  }
  .dash-accent-pop.dash-topbar-popover .acc-dot {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  /* Les infobulles hover ne sont pas adaptées au tactile. Les aria-label
     restent disponibles pour les lecteurs d'écran et les boutons sont grands. */
  [data-tip]:hover::after { display: none; }
  .bp-close { width: 36px; height: 36px; flex-basis: 36px; }

  /* La recherche reste utilisable avec le clavier virtuel sans être
     repoussée sous la barre du navigateur. */
  .dash-palette-overlay {
    padding: max(76px, calc(60px + env(safe-area-inset-top))) 12px 16px;
  }
  .dash-palette { max-height: calc(100dvh - 100px); }
}

@keyframes mobileTopbarSheet {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .dash-topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .dash-topbar-actions { gap: 6px; }
  .dash-topbar-actions .dash-iconbtn { width: 42px; min-width: 42px; height: 42px; }
  .dash-topbar-actions .dash-bot-chip { padding: 6px 8px !important; }
  .dash-topbar-actions .dash-bot-chip img,
  .dash-topbar-actions .dash-bot-chip .chip-fallback { width: 30px !important; height: 30px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-bell-pop.dash-topbar-popover,
  .dash-accent-pop.dash-topbar-popover { animation: none !important; }
}

/* ============================================================
   NEXORA v5.0 — Control Center humain
   Cohérence globale des modules, vue d'ensemble et responsive.
   Cette couche finale conserve toutes les classes historiques et toutes les
   routes existantes : elle ne change que la présentation et les états UI.
   ============================================================ */
:root {
  --d-surface-1: #121a26;
  --d-surface-2: #172335;
  --d-surface-3: #1c2a3d;
  --d-border-strong: rgba(91,112,145,.8);
  --d-radius-card: 12px;
  --d-radius-control: 12px;
  --d-focus-ring: 0 0 0 4px rgba(var(--d-accent-rgb), .16);
  --d-content-max: 1280px;
}

.dash-main { padding-top: 25px; }
#dash-content { max-width: var(--d-content-max); margin: 0 auto; }

/* En-tête partagé : chaque module possède le même langage visuel. */
.dash-module-header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 76px;
  padding: 3px 2px 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(49,65,88,.72);
  position: relative;
}
.dash-module-header::after {
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, var(--d-accent), var(--d-accent2), transparent);
}
.dash-module-header .m-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: 0 13px 28px -18px var(--d-glow), inset 0 1px 0 rgba(255,255,255,.08);
}
.module-header-copy { min-width: 0; }
.module-header-copy h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.module-header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.module-scope, .module-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--d-border-soft);
  border-radius: 999px;
  color: #a7b5c9;
  background: rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.module-status.is-online { color: #7ee5a4; border-color: rgba(73,209,125,.28); background: rgba(73,209,125,.07); }
.module-status.is-offline { color: #ff9da3; border-color: rgba(240,108,117,.3); background: rgba(240,108,117,.07); }
.module-scope-dot, .ov-health-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #8291a8;
}
.module-scope-dot.is-online, .ov-health-dot.is-online { background: var(--d-green); box-shadow: 0 0 0 4px rgba(73,209,125,.1), 0 0 12px rgba(73,209,125,.45); }
.module-scope-dot.is-offline, .ov-health-dot.is-offline { background: var(--d-red); box-shadow: 0 0 0 4px rgba(240,108,117,.1); }

/* Cartes communes : rythme, en-tête et focus sans modifier les modules. */
.dash-card[data-dash-card] {
  border-radius: var(--d-radius-card);
  border-color: var(--d-border-soft);
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 43%),
    var(--d-surface-1);
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 18px 42px -34px rgba(0,0,0,.95);
}
.dash-card[data-dash-card] .card-head {
  min-height: 34px;
  padding-bottom: 11px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(49,65,88,.62);
}
.dash-card[data-dash-card] .card-heading { min-width: 0; }
.dash-card[data-dash-card] .card-heading h3 { margin-bottom: 3px; }
.dash-card[data-dash-card] .card-heading .desc { margin-bottom: 0; }
.dash-card[data-dash-card] .dash-label { color: #98a7bb; }

.dash-btn:focus-visible, .dash-iconbtn:focus-visible, .sheet-item:focus-visible,
.check-item:focus-visible, .hero-step:focus-visible, .ov-quick-action:focus-visible {
  outline: none;
  box-shadow: var(--d-focus-ring);
}
.dash-btn:disabled { filter: saturate(.55); opacity: .58; cursor: wait; }
.dash-btn-primary { color: #fff; }

/* Vue d'ensemble : hiérarchie de produit et actions concrètes. */
.ov-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 112px;
  margin-bottom: 13px;
  padding: 20px 22px;
  border: 1px solid rgba(var(--d-accent-rgb), .28);
  border-radius: 12px;
  background:
    radial-gradient(480px 180px at 96% -20%, rgba(var(--d-accent-rgb), .17), transparent 70%),
    radial-gradient(420px 180px at 2% 120%, rgba(var(--d-accent-rgb), .12), transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 52%),
    var(--d-surface-1);
  box-shadow: 0 20px 48px -34px var(--d-glow), inset 0 1px 0 rgba(255,255,255,.06);
}
.ov-intro-server { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ov-server-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(150,164,255,.34);
  background: linear-gradient(145deg, var(--d-accent), var(--d-accent2));
  box-shadow: 0 12px 24px -15px rgba(var(--d-accent-rgb), .95);
}
.ov-server-avatar.fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}
.ov-intro-copy { min-width: 0; }
.ov-eyebrow {
  display: block;
  color: #8798b0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.ov-intro-copy h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f5f7fc;
  font-size: 22px;
  letter-spacing: -.35px;
}
.ov-intro-copy p { margin-top: 4px; color: #91a0b7; font-size: 12px; line-height: 1.4; }
.ov-intro-health {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(73,209,125,.25);
  border-radius: 12px;
  background: rgba(73,209,125,.07);
}
.ov-intro-health.is-offline { border-color: rgba(240,108,117,.3); background: rgba(240,108,117,.07); }
.ov-intro-health b { display: block; color: #86e8aa; font-size: 12px; }
.ov-intro-health.is-offline b { color: #ff9da3; }
.ov-intro-health small { display: block; margin-top: 2px; color: #8192a9; font-size: 11px; }

.ov-quick-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px;
  border: 1px solid rgba(49,65,88,.72);
  border-radius: 12px;
  background: rgba(15,23,34,.64);
  overflow-x: auto;
  scrollbar-width: none;
}
.ov-quick-actions::-webkit-scrollbar { display: none; }
.ov-quick-label {
  flex: 0 0 auto;
  padding: 0 7px 0 4px;
  color: #71829a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
}
.ov-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(49,65,88,.82);
  border-radius: 8px;
  color: #c9d3e2;
  background: rgba(24,35,51,.88);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.ov-quick-action > span { font-size: 16px; }
.ov-quick-action i { color: var(--d-accent); font-style: normal; font-size: 14px; }
.ov-quick-action:hover { color: #fff; border-color: rgba(var(--d-accent-rgb), .58); background: rgba(55,69,103,.72); transform: translateY(-1px); }

/* Héros première visite rendu plus utile et moins décoratif. */
.dash-hero {
  margin-bottom: 18px;
  border-color: rgba(var(--d-accent-rgb), .34);
  background:
    radial-gradient(560px 220px at 96% -24%, rgba(var(--d-accent-rgb), .18), transparent 70%),
    radial-gradient(500px 220px at 0% 120%, rgba(var(--d-accent-rgb), .14), transparent 70%),
    var(--d-surface-1);
}
.dash-hero h2 { letter-spacing: -.35px; }
.hero-step { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }

.ov-checklist-card { overflow: visible !important; }
.ov-progress-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ov-progress-copy { display: flex; flex-direction: column; gap: 3px; }
.ov-progress-copy b { color: #edf2fa; font-size: 13px; }
.ov-progress-copy span { color: #7f91a8; font-size: 11px; }
.ov-progress-head > strong { color: #b5bcff; font-size: 18px; letter-spacing: -.4px; }
.ov-progress-track { height: 8px; overflow: hidden; margin-bottom: 14px; border-radius: 999px; background: #0c1521; box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.ov-progress-value { height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--d-accent), var(--d-accent2)); box-shadow: 0 0 15px -3px var(--d-glow); transition: width .45s cubic-bezier(.2,.8,.25,1); }
.ov-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 18px; }
.ov-stat { min-height: 118px; padding: 15px 16px !important; }
.ov-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.ov-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(var(--d-accent-rgb), .25); border-radius: 8px; background: rgba(var(--d-accent-rgb), .12); font-size: 16px; }
.ov-stat-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #71829a; font-size: 11px; font-weight: 700; }
.ov-stat .val { font-size: 22px !important; }
.ov-stat .lbl { margin-top: 3px; color: #a1afc1; }
.ov-activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.ov-feed-card, .ov-brief-card { min-height: 100%; }
.ov-feed-card #ov-feed { min-height: 74px; }
.ov-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 18px; }
.ov-module-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  row-gap: 13px;
  min-height: 157px;
  padding: 17px 17px 15px !important;
  cursor: pointer;
}
.ov-module-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(var(--d-accent-rgb), .3); border-radius: 12px; background: rgba(var(--d-accent-rgb), 0.17); font-size: 18px; }
.ov-module-copy { min-width: 0; }
.ov-module-copy h3 { margin: 1px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px !important; }
.ov-module-copy .desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin: 0 !important; font-size: 11px !important; line-height: 1.45; }
.ov-module-card > .dash-btn { grid-column: 1 / -1; justify-self: stretch; justify-content: center; min-height: 38px; }

/* États de chargement et erreurs : on explique au lieu de laisser une page vide. */
.dash-state-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 700px;
  margin: 42px auto;
  padding: 20px;
  border: 1px solid var(--d-border-soft);
  border-radius: var(--d-radius-card);
  background: var(--d-surface-1);
  box-shadow: 0 18px 44px -34px rgba(0,0,0,.9);
}
.dash-state-card .state-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: rgba(240,108,117,.1); font-size: 22px; }
.dash-state-card .state-copy { flex: 1; min-width: 0; }
.dash-state-card h2 { color: #f0f3fa; font-size: 16px; }
.dash-state-card p { margin-top: 4px; color: #8d9bb0; font-size: 12px; line-height: 1.45; }
.dash-state-card .dash-btn { flex: 0 0 auto; }

/* Tables et champs : lecture confortable sur desktop comme sur mobile. */
.dash-table-wrap { width: 100%; overflow-x: auto; border: 1px solid rgba(49,65,88,.58); border-radius: 12px; }
.dash-table-wrap .dash-table { min-width: 560px; }
.dash-table th { background: rgba(255,255,255,.025); }
.dash-table tbody tr { transition: background .14s ease; }
.dash-table tbody tr:hover { background: rgba(var(--d-accent-rgb), .055); }

html.hx-light {
  --d-surface-1: #fff;
  --d-surface-2: #f4f7fc;
  --d-surface-3: #edf2fa;
  --d-border-strong: #cbd7e8;
  --d-focus-ring: 0 0 0 4px rgba(86,103,217,.14);
}
html.hx-light .module-scope { color: #687893; background: rgba(86,103,217,.06); border-color: #d3ddef; }
html.hx-light .module-status.is-online { color: #218a55; border-color: rgba(33,138,85,.25); background: rgba(33,138,85,.07); }
html.hx-light .module-status.is-offline { color: #bb4c58; border-color: rgba(187,76,88,.25); background: rgba(187,76,88,.07); }
html.hx-light .dash-card[data-dash-card] { background: linear-gradient(145deg, rgba(86,103,217,.035), transparent 43%), #fff; border-color: #d9e1ef; box-shadow: 0 18px 42px -30px rgba(52,67,105,.35); }
html.hx-light .dash-card[data-dash-card] .card-head { border-color: #e3e8f1; }
html.hx-light .ov-intro { background: radial-gradient(480px 180px at 96% -20%, rgba(var(--d-accent-rgb), .1), transparent 70%), #fff; border-color: #d5dded; }
html.hx-light .ov-intro-copy h2, html.hx-light .ov-progress-copy b, html.hx-light .dash-state-card h2 { color: #20283a; }
html.hx-light .ov-intro-copy p, html.hx-light .ov-intro-health small { color: #6d7d96; }
html.hx-light .ov-quick-actions { background: rgba(255,255,255,.72); border-color: #d9e1ef; }
html.hx-light .ov-quick-action { color: #40506c; background: #f6f8fc; border-color: #d7e0ee; }
html.hx-light .ov-quick-action:hover { color: #263149; background: #edf2ff; }
html.hx-light .ov-progress-track { background: #e7ecf5; }
html.hx-light .ov-progress-copy span, html.hx-light .ov-stat-note { color: #74839a; }
html.hx-light .ov-stat .lbl { color: #667894; }
html.hx-light .dash-state-card { background: #fff; border-color: #d9e1ef; }

@media (max-width: 1100px) {
  .ov-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-module-header { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .dash-module-header .m-icon { width: 48px; height: 48px; }
}

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dash-main { padding: 15px 12px calc(104px + env(safe-area-inset-bottom)); }
  .dash-module-header {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    min-height: 65px;
    padding: 2px 0 14px;
  }
  .dash-module-header .m-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
  .module-header-meta { grid-column: 1 / -1; justify-content: flex-start; margin-top: -2px; }
  .module-scope, .module-status { min-height: 28px; padding: 5px 9px; font-size: 11px; }
  .dash-module-header h1 { font-size: 18px; }
  .dash-module-header .sub { line-height: 1.4; }
  .ov-intro { align-items: stretch; flex-direction: column; gap: 13px; padding: 16px; border-radius: 12px; }
  .ov-server-avatar { width: 50px; height: 50px; flex-basis: 50px; border-radius: 12px; }
  .ov-intro-copy h2 { font-size: 18px; }
  .ov-intro-health { width: 100%; }
  .ov-quick-actions { margin-bottom: 15px; padding: 7px; }
  .ov-quick-label { display: none; }
  .ov-quick-action { min-height: 42px; padding: 8px 10px; }
  .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .ov-activity-grid { grid-template-columns: 1fr; gap: 10px; }
  .ov-stat { min-height: 108px; padding: 13px !important; }
  .ov-stat-note { max-width: 84px; }
  .ov-module-grid { grid-template-columns: 1fr; gap: 10px; }
  .ov-module-card { min-height: 132px; }
  .dash-state-card { align-items: flex-start; flex-wrap: wrap; margin: 25px 0; padding: 16px; }
  .dash-state-card .state-copy { flex-basis: calc(100% - 58px); }
  .dash-state-card .dash-btn { width: 100%; justify-content: center; }
  .dash-table-wrap .dash-table { min-width: 520px; }
  .dash-savebar { bottom: calc(86px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 9px; border-radius: 12px; padding: 12px; }
  .dash-savebar .sb-txt { text-align: center; }
  .dash-savebar .sb-actions { justify-content: stretch; }
  .dash-savebar .sb-actions .dash-btn { flex: 1; justify-content: center; }
}

@media (max-width: 520px) {
  .dash-module-header h1 { font-size: 18px; }
  .dash-module-header .sub { font-size: 12px; }
  .module-status { display: none; }
  .ov-intro-copy p { font-size: 12px; }
  .ov-stat .val { font-size: 22px !important; }
  .ov-stat .lbl { font-size: 11px; line-height: 1.25; }
  .ov-stat-note { display: none; }
  .dash-card[data-dash-card] { padding: 17px 15px; }
  .dash-card[data-dash-card] .card-head { margin-bottom: 13px; }
  .dash-state-card .state-copy { flex-basis: calc(100% - 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .dash-card[data-dash-card], .ov-intro, .ov-quick-action, .ov-module-card, .dash-state-card,
  .ov-progress-value, .dash-btn, .dash-iconbtn { animation: none !important; transition: none !important; }
}

/* ============================================================
   NEXORA v5.1 — Auto-Mod : blacklist des membres par serveur
   Une règle déclenche une action, puis un registre et un panneau dédié.
   ============================================================ */
.am-blacklist-toggle {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 11px;
  padding: 10px 11px;
  border: 1px solid rgba(240,108,117,.22);
  border-radius: 12px;
  background: rgba(240,108,117,.055);
  color: var(--d-text);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.am-blacklist-toggle:hover { border-color: rgba(240,108,117,.52); background: rgba(240,108,117,.095); transform: translateY(-1px); }
.am-blacklist-toggle input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--d-red); cursor: pointer; }
.am-blacklist-toggle span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.am-blacklist-toggle b { font-size: 12px; }
.am-blacklist-toggle small { color: var(--d-dim); font-size: 11px; line-height: 1.35; }

.am-blacklist-config {
  margin-top: 17px;
  padding: 15px;
  border: 1px solid rgba(240,108,117,.26);
  border-radius: 12px;
  background:
    radial-gradient(540px 180px at 100% 0%, rgba(240,108,117,.09), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 60%),
    rgba(11,17,27,.34);
}
.am-blacklist-config .am-panel-title { margin-bottom: 13px; }
.am-blacklist-config .am-panel-title > div { min-width: 0; }
.am-blacklist-config .am-panel-title small { max-width: 720px; }
.am-blacklist-badge, .am-blacklist-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid rgba(240,108,117,.34);
  border-radius: 999px;
  color: #ffb3b8;
  background: rgba(240,108,117,.09);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.am-blacklist-count { margin-left: 5px; padding: 3px 7px; vertical-align: middle; }
.am-blacklist-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 14px; align-items: start; }
.am-blacklist-config .dash-label { margin-top: 0; }
.am-blacklist-config .am-help { margin-top: 6px; }
.am-blacklist-color { display: flex; align-items: center; gap: 8px; }
.am-blacklist-color input[type="color"] { width: 48px; height: 43px; padding: 3px; flex: 0 0 48px; border: 1px solid var(--d-border-soft); border-radius: 12px; background: var(--d-card2); cursor: pointer; }
.am-blacklist-color .dash-input { min-width: 0; }
.am-blacklist-preview { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 10px 11px; border: 1px dashed rgba(240,108,117,.3); border-radius: 12px; background: rgba(240,108,117,.045); }
.am-blacklist-preview-icon { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 8px; background: rgba(240,108,117,.14); font-size: 16px; }
.am-blacklist-preview b { display: block; color: #ffb3b8; font-size: 11px; }
.am-blacklist-preview small { display: block; margin-top: 2px; color: var(--d-dim); font-size: 11px; line-height: 1.35; }

.am-member-blacklist-card { border-color: rgba(240,108,117,.27) !important; }
.am-member-blacklist-card .card-heading h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.am-member-blacklist-list { display: flex; flex-direction: column; gap: 7px; }
.am-member-blacklist-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 11px; border: 1px solid rgba(49,65,88,.72); border-radius: 12px; background: rgba(255,255,255,.022); transition: background .14s ease, border-color .14s ease; }
.am-member-blacklist-row:hover { border-color: rgba(240,108,117,.4); background: rgba(240,108,117,.055); }
.am-member-blacklist-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: rgba(240,108,117,.12); font-size: 16px; }
.am-member-blacklist-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.am-member-blacklist-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #edf2fa; font-size: 13px; }
.am-member-blacklist-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--d-dim); font-size: 11px; }
.am-member-blacklist-row .dash-btn { flex: 0 0 auto; }
.am-blacklist-empty { display: flex; align-items: center; gap: 10px; padding: 14px 4px; color: var(--d-dim); }
.am-blacklist-empty > span { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 8px; background: rgba(73,209,125,.1); }
.am-blacklist-empty b, .am-blacklist-empty small { display: block; }
.am-blacklist-empty b { color: #b7c4d5; font-size: 12px; }
.am-blacklist-empty small { margin-top: 2px; font-size: 11px; }

html.hx-light .am-blacklist-config { background: radial-gradient(540px 180px at 100% 0%, rgba(240,108,117,.07), transparent 70%), rgba(255,255,255,.55); border-color: rgba(187,76,88,.28); }
html.hx-light .am-blacklist-toggle { background: rgba(240,108,117,.045); }
html.hx-light .am-member-blacklist-row { background: rgba(240,108,117,.025); border-color: #d9e1ef; }
html.hx-light .am-member-blacklist-copy b { color: #27334a; }
html.hx-light .am-blacklist-badge, html.hx-light .am-blacklist-count { color: #b34e5b; background: rgba(187,76,88,.07); }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .am-blacklist-grid { grid-template-columns: 1fr; gap: 4px; }
  .am-blacklist-config { padding: 13px; }
  .am-blacklist-config .am-panel-title { align-items: flex-start; }
  .am-member-blacklist-row { align-items: flex-start; flex-wrap: wrap; }
  .am-member-blacklist-copy { flex-basis: calc(100% - 52px); }
  .am-member-blacklist-row .dash-btn { width: 100%; justify-content: center; margin-left: 42px; }
}

@media (max-width: 520px) {
  .am-blacklist-toggle { padding: 9px; }
  .am-blacklist-config .am-panel-title { gap: 8px; }
  .am-blacklist-badge { font-size: 11px; }
  .am-blacklist-color input[type="color"] { width: 45px; flex-basis: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  .am-blacklist-toggle, .am-threshold-box, .am-member-blacklist-row { transition: none !important; }
}

/* v5.2 — durée et seuil progressif de blacklist */
.am-threshold-box {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px dashed rgba(240,108,117,.24);
  border-radius: 12px;
  background: rgba(240,108,117,.03);
}
.am-threshold-box > label {
  display: block;
  margin-bottom: 6px;
  color: #b4c0d1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.am-threshold-controls { display: flex; align-items: center; gap: 8px; }
/* v244 : étendu aux sélecteurs, et largeur portée de 86 px à 118 px.
   Un <select> réserve 42 px à droite pour sa flèche : à 86 px il ne restait
   qu'une trentaine de pixels au texte, et « Désactivé » était tronqué.
   Le texte repasse à gauche — centré sous une flèche à droite, il paraît décalé. */
.am-threshold-controls .dash-input { width: 86px; min-height: 38px; flex: 0 0 86px; font-size: 14px; font-weight: 800; text-align: center; }
.am-threshold-controls .dash-select { width: 118px; min-height: 38px; flex: 0 0 118px; font-size: 13px; font-weight: 700; text-align: left; padding-right: 34px; }
.am-threshold-controls span { color: var(--d-dim); font-size: 11px; line-height: 1.3; }
.am-threshold-box > small { display: block; margin-top: 6px; color: var(--d-dim); font-size: 11px; line-height: 1.35; }
.am-blacklist-duration {
  display: grid;
  grid-template-columns: minmax(190px, 280px) minmax(0, 1fr);
  align-items: end;
  gap: 13px;
  margin-bottom: 13px;
  padding: 11px 12px;
  border: 1px solid rgba(240,108,117,.18);
  border-radius: 12px;
  background: rgba(240,108,117,.035);
}
.am-blacklist-duration .dash-select { margin-top: 0; }
.am-blacklist-duration > small { padding-bottom: 8px; color: var(--d-dim); font-size: 11px; line-height: 1.4; }

html.hx-light .am-threshold-box { background: rgba(187,76,88,.025); border-color: rgba(187,76,88,.25); }
html.hx-light .am-threshold-box > label { color: #687893; }
html.hx-light .am-blacklist-duration { background: rgba(187,76,88,.025); border-color: rgba(187,76,88,.22); }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .am-blacklist-duration { grid-template-columns: 1fr; gap: 3px; align-items: stretch; }
  .am-blacklist-duration > small { padding-bottom: 0; }
}

/* v5.3 — placement strict des tickets personnalisés */
.adv-placement-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid rgba(var(--d-accent-rgb), .3);
  border-radius: 12px;
  background: rgba(var(--d-accent-rgb), 0.08);
}
.adv-placement-notice > span { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 8px; background: rgba(var(--d-accent-rgb), .15); font-size: 16px; }
.adv-placement-notice b { display: block; color: #dce3f2; font-size: 12px; }
.adv-placement-notice small { display: block; margin-top: 3px; color: var(--d-dim); font-size: 11px; line-height: 1.4; }
.adv-category-help { display: block; margin-top: 5px; color: var(--d-dim); font-size: 11px; line-height: 1.35; }
html.hx-light .adv-placement-notice { border-color: #d5dded; background: linear-gradient(135deg, rgba(86,103,217,.07), rgba(var(--d-accent-rgb), .025)); }
html.hx-light .adv-placement-notice b { color: #30405c; }

@media (max-width: 520px) {
  .adv-placement-notice { padding: 10px; }
  .adv-category-help { font-size: 10px; }
}

/* ============================================================
   NEXORA v6 — Auto-Mod officiel Discord
   Miroir passif en alertes : le moteur Optimus Prime garde les sanctions.
   ============================================================ */
.am-native-card {
  border-color: rgba(var(--d-accent-rgb), .34) !important;
  background:
    radial-gradient(620px 220px at 100% 0%, rgba(var(--d-accent-rgb), .13), transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 60%),
    var(--d-card);
}
.am-native-hero { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border:1px solid rgba(var(--d-accent-rgb), .26); border-radius: 12px; background:rgba(var(--d-accent-rgb), .07); }
.am-native-copy { display:flex; align-items:center; gap:10px; min-width:0; }
.am-native-icon { display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px; flex:0 0 35px; border-radius: 12px; background: rgba(var(--d-accent-rgb), 0.30); font-size:18px; }
.am-native-copy > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.am-native-copy b { color:#e9edff; font-size:13px; }
.am-native-copy small { color:var(--d-dim); font-size:11px; line-height:1.4; }
.am-native-toggle { position:relative; display:flex; align-items:center; gap:8px; flex:0 0 auto; color:var(--d-text); font-size:11px; font-weight:800; cursor:pointer; }
.am-native-toggle input { position:absolute; width:1px; height:1px; opacity:0; }
.am-native-toggle i { position:relative; width:47px; height:28px; display:inline-block; border:1px solid var(--d-border); border-radius: 999px; background:#303a4d; transition:.18s; }
.am-native-toggle i::after { content:''; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius: 50%; background:#c8cfdd; box-shadow:0 2px 7px rgba(0,0,0,.35); transition:.18s; }
.am-native-toggle input:checked + i { border-color:rgba(var(--d-accent-rgb), .65); background:linear-gradient(135deg,#6478ff,#946fff); box-shadow:0 0 15px -4px var(--d-glow); }
.am-native-toggle input:checked + i::after { transform:translateX(19px); background:#fff; }
.am-native-toggle input:focus-visible + i { outline:3px solid rgba(var(--d-accent-rgb), .3); outline-offset:2px; }
.am-native-grid { display:grid; grid-template-columns:minmax(220px,1fr) minmax(230px,.9fr); gap:13px; align-items:end; margin-top:13px; }
.am-native-grid .dash-label { margin-top:0; }
.am-native-status { display:flex; align-items:center; gap:9px; min-height:48px; padding:9px 11px; border:1px solid var(--d-border-soft); border-radius: 12px; background:rgba(255,255,255,.025); }
.am-native-status > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.am-native-status b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#dfe6f3; font-size:12px; }
.am-native-status small { color:var(--d-dim); font-size:11px; line-height:1.35; }
.am-native-status-dot { width:8px; height:8px; flex:0 0 8px; border-radius: 50%; background:#8795aa; }
.am-native-status-dot.is-ok { background:var(--d-green); box-shadow:0 0 0 4px rgba(73,209,125,.1),0 0 12px rgba(73,209,125,.45); }
.am-native-status-dot.is-warn { background:var(--d-yellow); box-shadow:0 0 0 4px rgba(244,201,107,.1); }
.am-native-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:13px; padding-top:12px; border-top:1px solid rgba(49,65,88,.6); }
.am-native-actions .am-help { margin:0; max-width:620px; }
.am-native-actions .dash-btn { flex:0 0 auto; }
html.hx-light .am-native-card { background:radial-gradient(620px 220px at 100% 0%,rgba(86,103,217,.1),transparent 72%),#fff; border-color:#d5dded !important; }
html.hx-light .am-native-hero { background:rgba(86,103,217,.055); border-color:#d5dded; }
html.hx-light .am-native-copy b, html.hx-light .am-native-status b { color:#2d3a54; }
html.hx-light .am-native-status { background:rgba(86,103,217,.025); border-color:#d9e1ef; }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .am-native-hero { align-items:flex-start; flex-direction:column; }
  .am-native-toggle { align-self:stretch; justify-content:space-between; }
  .am-native-grid { grid-template-columns:1fr; gap:5px; }
  .am-native-actions { align-items:stretch; flex-direction:column; }
  .am-native-actions .dash-btn { width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce) {
  .am-native-toggle i, .am-native-toggle i::after { transition:none !important; }
}

/* ============================================================
   NEXORA v7.0 — Interface d'équipe expérimentée
   Dernière couche de cohérence : densité, retour, états et mobile.
   ============================================================ */
:root {
  --d-bg: #0a111b;
  --d-side: #0e1723;
  --d-card: #131e2c;
  --d-card2: #19283b;
  --d-border: #293b53;
  --d-border-soft: rgba(58,78,105,.72);
  --d-border-focus: #8190ff;
  --d-text: #eef3fb;
  --d-dim: #8d9db4;
  --d-accent: #7182f6;
  --d-accent2: #9a83e6;
  --d-glow: rgba(113,130,246,.5);
  --d-radius-card: 12px;
  --d-radius-control: 12px;
}

/* Surface principale : un fond discret pour laisser respirer les cartes. */
.dash-shell {
  background:
    linear-gradient(rgba(126,146,188,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,146,188,.018) 1px, transparent 1px),
    radial-gradient(900px 500px at 84% -10%, rgba(113,130,246,.075), transparent 72%),
    var(--d-bg);
  background-size: 48px 48px, 48px 48px, auto, auto;
}
.dash-main { padding: 26px 32px 80px; }
#dash-content { max-width: 1320px; }

/* Sidebar : une navigation d'équipe, pas une liste d'icônes lumineuses. */
.dash-side {
  width: 276px;
  padding: 15px 10px 12px;
  background: linear-gradient(180deg, rgba(19,30,45,.97), rgba(10,16,25,.99));
  border-right-color: rgba(58,78,105,.7);
}
.dash-side-brand { margin: 1px 6px 18px; padding: 3px 5px 16px; }
.dash-side-brand-avatar { width: 41px; height: 41px; flex-basis: 41px; border-radius: 12px; }
.dash-side-section { padding: 14px 16px 7px; color: #71839c; font-size: 11px; letter-spacing: 1.55px; }
.dash-side-item {
  min-height: 43px;
  margin: 2px 1px;
  padding: 8px 12px;
  border-radius: 12px;
  color: #8f9db1;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.dash-side-item .ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.04); }
.dash-side-item:hover { color: #f0f4fb; background: rgba(113,130,246,.085); border-color: rgba(129,144,255,.18); transform: translateX(2px); }
.dash-side-item.active { color: #fff; background: linear-gradient(100deg, rgba(113,130,246,.25), rgba(154,131,230,.09)); border-color: rgba(129,144,255,.34); box-shadow: inset 3px 0 0 var(--d-accent), 0 10px 24px -20px var(--d-glow); }
.dash-side-item.active .ico { background: linear-gradient(145deg, rgba(113,130,246,.4), rgba(154,131,230,.24)); }
.dash-global-admin { color: #dacfff; background: rgba(154,131,230,.055); border-color: rgba(154,131,230,.22); }
.dash-side-foot { border-top-color: rgba(58,78,105,.68); }

/* Topbar : contexte à gauche, outils à droite, sans surcharge. */
.dash-topbar {
  min-height: 70px;
  margin-bottom: 25px;
  padding: 12px 15px;
  border-radius: 12px;
  border-color: rgba(58,78,105,.78);
  background: linear-gradient(145deg, rgba(25,39,58,.88), rgba(14,23,35,.95));
  box-shadow: 0 18px 42px -32px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.045);
}
.dash-topbar-actions { gap: 8px; }
.dash-iconbtn { width: 41px; height: 41px; border-radius: 12px; background: rgba(24,38,57,.94); border-color: rgba(58,78,105,.9); }
.dash-iconbtn:hover { background: rgba(47,64,95,.78); border-color: rgba(129,144,255,.72); }
.dash-bot-chip { border-color: rgba(58,78,105,.9) !important; background: rgba(24,38,57,.94) !important; }

/* En-têtes de module avec vrai bouton Retour. */
.dash-module-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 78px;
  padding: 2px 2px 18px;
  margin-bottom: 23px;
}
.module-header-lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.module-back, .module-back-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.module-back {
  gap: 6px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(58,78,105,.9);
  border-radius: 8px;
  color: #bac7d8;
  background: rgba(24,38,57,.75);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.module-back:hover { color: #fff; border-color: var(--d-border-focus); background: rgba(113,130,246,.16); transform: translateX(-2px); }
.module-back:active { transform: scale(.97); }
.module-back-placeholder { width: 0; overflow: hidden; }
.dash-module-header .m-icon { width: 52px; height: 52px; border-radius: 12px; }
.module-header-copy { min-width: 0; }
.module-header-copy h1 { font-size: 22px; }
.module-header-copy .sub { max-width: 760px; }
.module-header-meta { align-self: center; }

/* Cartes : même niveau de finition sur tous les modules historiques. */
.dash-card[data-dash-card] {
  border-radius: var(--d-radius-card);
  border-color: rgba(58,78,105,.78);
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%),
    linear-gradient(180deg, rgba(19,30,44,.98), rgba(14,23,35,.98));
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 20px 46px -36px rgba(0,0,0,.96);
}
.dash-card[data-dash-card]::after { content: ''; position: absolute; left: 19px; right: 19px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(129,144,255,.25), transparent 64%); pointer-events: none; }
.dash-card[data-dash-card] .card-head { padding-bottom: 12px; margin-bottom: 16px; border-bottom-color: rgba(58,78,105,.62); }
.dash-card[data-dash-card] .card-heading h3 { font-size: 16px; }
.dash-card[data-dash-card] .card-heading .desc { color: #8e9eb4; }
.dash-card[data-dash-card]:hover { border-color: rgba(129,144,255,.42); box-shadow: 0 1px 0 rgba(255,255,255,.055) inset, 0 25px 55px -38px rgba(0,0,0,.98); }

/* Contrôles : états lisibles, clics précis, sans effet plastique. */
.dash-input, .dash-select, textarea.dash-input { min-height: 45px; border-radius: var(--d-radius-control); border-color: rgba(58,78,105,.9); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 68%), #111c2b; }
.dash-input:hover, .dash-select:hover { border-color: rgba(129,144,255,.52); background-color: #152338; }
.dash-input:focus, .dash-select:focus, textarea.dash-input:focus { border-color: var(--d-border-focus); box-shadow: 0 0 0 4px rgba(113,130,246,.14), inset 0 1px 0 rgba(255,255,255,.06); }
.dash-label { color: #92a2b8; }
.dash-btn { min-height: 42px; border-radius: 12px; border-color: rgba(58,78,105,.92); background: #19283b; color: #edf3fb; transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, filter .15s ease; }
.dash-btn:hover { border-color: rgba(129,144,255,.72); background: #243754; box-shadow: 0 13px 28px -22px var(--d-glow); }
.dash-btn:active { transform: translateY(1px) scale(.985); }
.dash-btn-primary { background: linear-gradient(135deg, #6578ee, #8f78dc); box-shadow: 0 13px 30px -18px var(--d-glow), inset 0 1px 0 rgba(255,255,255,.22); }
.dash-btn-primary:hover { background: linear-gradient(135deg, var(--d-accent), var(--d-accent2)); filter: none; }
.dash-btn-danger { color: #ffb0b6; background: rgba(240,108,117,.1); border-color: rgba(240,108,117,.34); }
.dash-btn-danger:hover { background: rgba(240,108,117,.17); border-color: rgba(240,108,117,.7); }
.dash-btn:disabled { transform: none; box-shadow: none; }

/* Espacements cohérents pour les grilles de réglages écrites dans les modules. */
.dash-card[data-dash-card] > .dash-input,
.dash-card[data-dash-card] > .dash-select,
.dash-card[data-dash-card] > textarea.dash-input { margin-bottom: 2px; }
.dash-card[data-dash-card] .dash-table { font-size: 13px; }
.dash-card[data-dash-card] .dash-table th { color: #8495ad; }

/* Aperçu de sauvegarde : plus lisible au-dessus de la navigation mobile. */
.dash-savebar { border-radius: 12px; background: rgba(17,27,41,.95); border-color: rgba(129,144,255,.52); }
.dash-savebar .dash-btn { min-height: 38px; }

/* Mode clair : même contraste et mêmes niveaux, sans blanc éblouissant. */
html.hx-light {
  --d-bg: #f3f6fb;
  --d-side: #edf2f9;
  --d-card: #fff;
  --d-card2: #f2f5fa;
  --d-border: #d8e1ee;
  --d-border-soft: rgba(190,204,222,.88);
  --d-border-strong: #c3d0e1;
  --d-text: #1e2a3c;
  --d-dim: #6c7c94;
  --d-accent: #5f70dc;
  --d-accent2: #8668d2;
  --d-glow: rgba(95,112,220,.3);
}
html.hx-light .dash-shell { background: linear-gradient(rgba(70,85,135,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(70,85,135,.035) 1px, transparent 1px), radial-gradient(900px 500px at 82% -12%, rgba(95,112,220,.12), transparent 70%), #f3f6fb; background-size: 48px 48px, 48px 48px, auto, auto; }
html.hx-light .dash-side { background: linear-gradient(180deg, #f2f5fb, #e9eff8); border-color: #d4deeb; }
html.hx-light .dash-topbar { background: rgba(255,255,255,.88); border-color: #d6e0ed; }
html.hx-light .dash-iconbtn, html.hx-light .dash-bot-chip { color: #40506b; background: #f6f8fc !important; border-color: #d3deeb !important; }
html.hx-light .module-back { color: #586985; background: #f8faff; border-color: #d1dce9; }
html.hx-light .dash-card[data-dash-card] { background: linear-gradient(145deg, rgba(95,112,220,.035), transparent 42%), #fff; border-color: #d6e0ed; box-shadow: 0 20px 46px -34px rgba(52,67,105,.35); }
html.hx-light .dash-card[data-dash-card] .card-heading .desc { color: #71819a; }
html.hx-light .dash-input, html.hx-light .dash-select, html.hx-light textarea.dash-input { background: #f8faff; color: #263149; border-color: #cbd8e8; }
html.hx-light .dash-btn { color: #31415c; background: #f4f7fb; border-color: #ccd8e8; }
html.hx-light .dash-btn:hover { background: #eaf0ff; }
html.hx-light .dash-btn-primary { color: #fff; background: linear-gradient(135deg, #6274e2, #876bd2); }
html.hx-light .ov-quick-actions { background: rgba(255,255,255,.78); }

@media (max-width: 1200px) {
  .dash-main { padding-left: 24px; padding-right: 24px; }
  .dash-side { width: 252px; }
  .dash-module-header { grid-template-columns: auto minmax(0, 1fr) auto; }
}

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dash-main { padding: 15px 12px calc(104px + env(safe-area-inset-bottom)); }
  .dash-topbar { min-height: 0; margin-bottom: 17px; padding: calc(10px + env(safe-area-inset-top)) 12px 11px; }
  .dash-module-header { grid-template-columns: auto minmax(0, 1fr); gap: 11px; min-height: 66px; padding: 2px 0 15px; }
  .module-header-lead { gap: 8px; }
  .module-back { min-width: 38px; min-height: 38px; padding: 7px 9px; }
  .module-back-label { display: none; }
  .dash-module-header .m-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
  .module-header-meta { grid-column: 1 / -1; justify-content: flex-start; margin-top: -2px; }
  .dash-card[data-dash-card]::after { left: 16px; right: 16px; }
  .dash-card[data-dash-card] .card-head { margin-bottom: 14px; }
  .dash-savebar { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
  .dash-main { padding-left: 10px; padding-right: 10px; }
  .dash-topbar { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .dash-module-header { gap: 9px; }
  .dash-module-header h1 { font-size: 18px; }
  .dash-module-header .sub { font-size: 12px; }
  .module-scope { font-size: 11px; }
  .dash-card[data-dash-card] { padding: 17px 15px; }
  .dash-btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .module-back, .dash-card[data-dash-card], .dash-btn, .dash-iconbtn, .ov-quick-action { animation: none !important; transition: none !important; }
}

/* ============================================================
   NEXORA v8.0 — Product Polish
   Finition d'interface : rythme, navigation, états et petits écrans.
   ============================================================ */
:root {
  --d-space-1: 6px;
  --d-space-2: 10px;
  --d-space-3: 14px;
  --d-space-4: 18px;
  --d-space-5: 24px;
  --d-control-height: 44px;
  --d-shadow-soft: 0 18px 45px -34px rgba(0,0,0,.92);
}

/* Une ligne de contexte discrète avant les grands contenus. */
.dash-module-header {
  border-bottom-color: rgba(58,78,105,.66);
  isolation: isolate;
}
.dash-module-header::after { z-index: -1; opacity: .9; }
.module-header-lead { position: relative; }
.module-back { min-height: var(--d-control-height); }
.module-back:hover { box-shadow: 0 10px 22px -18px var(--d-glow); }
.module-header-meta { max-width: 320px; }

/* Les cartes se lisent comme des panneaux de travail, pas comme des tuiles. */
.dash-card[data-dash-card] { box-shadow: var(--d-shadow-soft), inset 0 1px 0 rgba(255,255,255,.045); }
.dash-card[data-dash-card]:focus-within { border-color: rgba(129,144,255,.55); box-shadow: 0 0 0 3px rgba(113,130,246,.09), var(--d-shadow-soft); }
.dash-card[data-dash-card] .card-heading h3 { line-height: 1.3; }
.dash-card[data-dash-card] .desc { line-height: 1.55; }
.dash-card[data-dash-card] > .dash-btn:last-child { margin-top: 5px; }

/* Alignement des actions dans les cartes sans imposer une structure aux
   anciens modules : les styles ne s'activent que sur les vrais groupes. */
.dash-actions, .module-actions, .form-actions {
  display: flex;
  align-items: center;
  gap: var(--d-space-2);
  flex-wrap: wrap;
}
.dash-actions .dash-btn, .module-actions .dash-btn, .form-actions .dash-btn { flex: 0 0 auto; }

/* Retours et erreurs : toujours deux sorties claires. */
.dash-state-card .state-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dash-state-card .state-actions .dash-btn { min-width: 104px; }

/* Tableaux : surface stable lorsque la liste défile. */
.dash-table-wrap { box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.dash-table-wrap .dash-table thead th { position: sticky; top: 0; z-index: 1; }

/* Navigation basse plus nette sur les appareils tactiles. */
.dash-bnav { padding-left: max(5px, env(safe-area-inset-left)); padding-right: max(5px, env(safe-area-inset-right)); }
.bnav-item { min-width: 0; }
.bnav-item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(113,130,246,.25); }

/* Accent visible uniquement à l'endroit utile. */
.dash-side-brand-status { transition: box-shadow .2s ease, background .2s ease; }
.dash-side-brand-status[title*="hors"] { background: var(--d-red); box-shadow: 0 0 0 4px rgba(240,108,117,.1), 0 0 13px rgba(240,108,117,.4); }

html.hx-light .dash-card[data-dash-card]::after { background: linear-gradient(90deg, rgba(95,112,220,.2), transparent 64%); }
html.hx-light .dash-table-wrap { border-color: #d9e1ef; box-shadow: inset 0 1px 0 rgba(70,85,135,.05); }
html.hx-light .dash-table-wrap .dash-table thead th { background: #f7f9fd; }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dash-module-header { min-height: 70px; }
  .module-header-meta { max-width: none; }
  .dash-state-card .state-actions { width: 100%; }
  .dash-state-card .state-actions .dash-btn { flex: 1; min-width: 0; }
  .dash-actions, .module-actions, .form-actions { align-items: stretch; flex-direction: column; }
  .dash-actions .dash-btn, .module-actions .dash-btn, .form-actions .dash-btn { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
  .dash-module-header { min-height: 68px; }
  .module-back { width: 38px; padding-left: 8px; padding-right: 8px; }
  .dash-card[data-dash-card] .card-head { padding-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-side-brand-status, .dash-card[data-dash-card]:focus-within { transition: none !important; }
}

/* ============================================================
   NEXORA v9.0 — Slate & Clay
   Refonte visuelle inspirée des panels Discord modernes :
   surfaces calmes, hiérarchie nette, accent argile et contrôles plats.
   Les routes, données et identifiants des modules restent inchangés.
   ============================================================ */
:root {
  --d-bg: #36393f;
  --d-side: #2b2d31;
  --d-card: #36393f;
  --d-card2: #2b2d31;
  --d-border: #202225;
  --d-border-soft: #4f545c;
  --d-border-strong: #72767d;
  --d-text: #f2f3f5;
  --d-dim: #b5bac1;
  --d-accent: #e07a5f;
  --d-accent2: #c95b49;
  --d-green: #57f287;
  --d-red: #ed4245;
  --d-yellow: #faa61a;
  --d-glow: rgba(224,122,95,.28);
  --d-radius-card: 4px;
  --d-radius-control: 4px;
  --d-surface-1: #36393f;
  --d-surface-2: #40444b;
  --d-surface-3: #2b2d31;
  --d-focus-ring: 0 0 0 2px rgba(224,122,95,.28);
  --d-content-max: 1240px;
  color-scheme: dark;
}

/* Le dashboard prend toute la largeur disponible, comme un vrai panel. */
.bot-shell.dashboard-shell-host {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
body:has(.dashboard-shell-host),
body:has(.dashboard-shell-host) #app {
  background: #36393f;
}
body:has(.dashboard-shell-host) .navbar {
  min-height: 58px;
  padding: 8px 24px;
  background: #2b2d31 !important;
  border-bottom: 1px solid #202225;
  box-shadow: none;
}
body:has(.dashboard-shell-host) .navbar .logo-row { color: #f2f3f5; }
body:has(.dashboard-shell-host) .navbar .logo {
  width: 34px;
  height: 34px;
  border: 2px solid #e07a5f;
  border-radius: 50%;
  background: #202225;
  box-shadow: none;
}
body:has(.dashboard-shell-host) .navbar .btn {
  min-height: 36px;
  border-radius: 4px;
  color: #f2f3f5;
  background: transparent;
  border-color: #4f545c;
  box-shadow: none;
}
body:has(.dashboard-shell-host) .navbar .btn:hover { color: #fff; background: #40444b; border-color: #72767d; }
body:has(.dashboard-shell-host) .navbar .btn-primary,
body:has(.dashboard-shell-host) .navbar .btn-discord { background: #e07a5f !important; border-color: #e07a5f !important; }
body:has(.dashboard-shell-host) .navbar .user-pill { color: #b5bac1; }
body:has(.dashboard-shell-host) .navbar .chip { border-radius: 4px; }

.dashboard-shell-host .dash-shell {
  min-height: calc(100vh - 58px);
  background: #36393f;
}
.dashboard-shell-host .dash-side {
  width: 278px;
  top: 58px;
  height: calc(100vh - 58px);
  padding: 20px 0 12px;
  overflow-y: auto;
  background: #2b2d31;
  border-right: 1px solid #202225;
  box-shadow: none;
}
.dashboard-shell-host .dash-side::before { display: none; }
.dashboard-shell-host .dash-side > * { position: relative; z-index: 1; }

/* Marque centrée et statuts discrets, à la manière d'un panel de bot. */
.dashboard-shell-host .dash-side-brand {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin: 0 22px 18px;
  padding: 0 0 18px;
  text-align: center;
  border-bottom: 1px solid #4f545c;
}
.dashboard-shell-host .dash-side-brand-avatar,
.dashboard-shell-host .dash-side-brand-avatar.fallback {
  width: 82px;
  height: 82px;
  flex-basis: 82px;
  border-radius: 50%;
  border: 2px solid #e07a5f;
  background: #202225;
  box-shadow: none;
}
.dashboard-shell-host .dash-side-brand-avatar.fallback { color: #f2f3f5; font-size: 28px; }
.dashboard-shell-host .dash-side-brand-copy { align-items: center; max-width: 100%; }
.dashboard-shell-host .dash-side-brand-copy b { color: #f2f3f5; font-size: 18px; }
.dashboard-shell-host .dash-side-brand-copy span { margin-top: 2px; color: #b5bac1; font-size: 11px; letter-spacing: .15px; text-transform: none; }
.dashboard-shell-host .dash-side-brand-status {
  position: absolute;
  top: 66px;
  right: calc(50% - 42px);
  width: 11px;
  height: 11px;
  margin: 0;
  border: 2px solid #2b2d31;
  background: #57f287;
  box-shadow: none;
}
.dashboard-shell-host .dash-side-section {
  padding: 14px 24px 7px;
  color: #949ba4;
  font-size: 11px;
  letter-spacing: .7px;
}
.dashboard-shell-host .dash-side-item {
  width: 100%;
  min-height: 43px;
  margin: 0;
  padding: 9px 24px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  color: #b5bac1;
  background: transparent;
  box-shadow: none;
  transform: none;
  font-size: 14px;
  font-weight: 600;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.dashboard-shell-host .dash-side-item .ico {
  width: 24px;
  height: 24px;
  border-radius: 0;
  color: #dbdee1;
  background: transparent;
  font-size: 18px;
}
.dashboard-shell-host .dash-side-item:hover {
  color: #fff;
  background: #323438;
  border-color: transparent;
  border-left-color: #72767d;
  transform: none;
}
.dashboard-shell-host .dash-side-item:hover .ico { background: transparent; transform: none; }
.dashboard-shell-host .dash-side-item.active {
  color: #e07a5f;
  background: #323438;
  border-color: transparent;
  border-left-color: #e07a5f;
  box-shadow: none;
}
.dashboard-shell-host .dash-side-item.active .ico { color: #e07a5f; background: transparent; }
.dashboard-shell-host .dash-global-admin {
  margin-top: 11px;
  color: #e8b2a4;
  background: rgba(224,122,95,.06);
  border-top: 1px solid rgba(224,122,95,.18);
  border-bottom: 1px solid rgba(224,122,95,.18);
}
.dashboard-shell-host .dash-global-admin:hover { color: #fff; background: rgba(224,122,95,.14); border-left-color: #e07a5f; }
.dashboard-shell-host .dash-side-foot {
  margin: auto 20px 0;
  padding: 15px 4px 2px;
  color: #949ba4;
  border-top: 1px solid #4f545c;
}
.dashboard-shell-host .dash-side-foot img { border-radius: 50% !important; box-shadow: none !important; border: 1px solid #e07a5f; }

/* Zone de travail : fond uni, largeur maîtrisée, zéro effet « vitrine IA ». */
.dashboard-shell-host .dash-main {
  min-width: 0;
  padding: 24px 42px 72px;
  background: #36393f;
}
.dashboard-shell-host #dash-content { max-width: var(--d-content-max); margin: 0 auto; }
.dashboard-shell-host .dash-topbar {
  min-height: 48px;
  margin: 0 auto 24px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid #4f545c;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.dashboard-shell-host .dash-crumb { gap: 10px; }
.dashboard-shell-host .dash-crumb .crumb-ico {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #4f545c;
  background: #40444b;
  font-size: 16px;
  box-shadow: none;
}
.dashboard-shell-host .dash-crumb .crumb-txt b { color: #f2f3f5; font-size: 14px; }
.dashboard-shell-host .dash-crumb .crumb-txt span { color: #b5bac1; font-size: 11px; }
.dashboard-shell-host .dash-topbar-actions { gap: 6px; }
.dashboard-shell-host .dash-iconbtn {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #4f545c;
  color: #b5bac1;
  background: transparent;
  box-shadow: none;
}
.dashboard-shell-host .dash-iconbtn:hover { color: #fff; background: #40444b; border-color: #72767d; transform: none; box-shadow: none; }
.dashboard-shell-host .dash-bot-chip {
  min-height: 36px;
  padding: 3px 8px 3px 5px !important;
  border: 1px solid #4f545c !important;
  border-radius: 4px !important;
  background: #2b2d31 !important;
  box-shadow: none;
}
.dashboard-shell-host .dash-bot-chip img,
.dashboard-shell-host .dash-bot-chip .chip-fallback {
  width: 29px !important;
  height: 29px !important;
  border-radius: 50% !important;
  border: 1px solid #e07a5f;
  box-shadow: none;
}
.dashboard-shell-host .dash-bot-chip .chip-txt b { color: #f2f3f5; font-size: 12px; }
.dashboard-shell-host .dash-bot-chip .chip-txt span { font-size: 11px; }

/* Titres de modules : une ligne de séparation et un seul accent. */
.dashboard-shell-host .dash-module-header {
  min-height: 70px;
  margin-bottom: 22px;
  padding: 0 0 16px;
  border-bottom: 1px solid #4f545c;
  animation: slatePanelIn .18s ease both;
}
.dashboard-shell-host .dash-module-header::after {
  left: 0;
  bottom: -1px;
  width: 92px;
  height: 2px;
  border-radius: 0;
  background: #e07a5f;
  opacity: 1;
}
.dashboard-shell-host .dash-module-header .m-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  color: #e07a5f;
  background: transparent;
  box-shadow: none;
  font-size: 22px;
}
.dashboard-shell-host .module-header-copy h1 {
  color: #f2f3f5;
  font-size: 22px;
  letter-spacing: -.2px;
}
.dashboard-shell-host .module-header-copy .sub { color: #b5bac1; font-size: 12px; }
.dashboard-shell-host .module-header-meta { gap: 6px; }
.dashboard-shell-host .module-scope,
.dashboard-shell-host .module-status {
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 4px;
  border-color: #4f545c;
  color: #b5bac1;
  background: #40444b;
  font-size: 11px;
  box-shadow: none;
}
.dashboard-shell-host .module-status.is-online { color: #57f287; border-color: rgba(87,242,135,.35); background: rgba(87,242,135,.08); }
.dashboard-shell-host .module-status.is-offline { color: #ed4245; border-color: rgba(237,66,69,.4); background: rgba(237,66,69,.08); }
.dashboard-shell-host .module-scope-dot.is-online { background: #57f287; box-shadow: none; }
.dashboard-shell-host .module-scope-dot.is-offline { background: #ed4245; box-shadow: none; }
.dashboard-shell-host .module-back {
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 4px;
  border-color: #4f545c;
  color: #b5bac1;
  background: transparent;
  box-shadow: none;
}
.dashboard-shell-host .module-back:hover { color: #fff; background: #40444b; border-color: #e07a5f; transform: none; box-shadow: none; }

/* Cartes et surfaces : rectangles sobres, espacés comme des panneaux de réglages. */
.dashboard-shell-host .dash-card,
.dashboard-shell-host .dash-card[data-dash-card] {
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid #4f545c;
  border-radius: 4px;
  background: #36393f !important;
  box-shadow: none !important;
  transition: border-color .14s ease, background .14s ease;
}
.dashboard-shell-host .dash-card[data-dash-card]::after,
.dashboard-shell-host .dash-stat::before,
.dashboard-shell-host .dash-stat::after { display: none !important; }
.dashboard-shell-host .dash-card:hover,
.dashboard-shell-host .dash-card[data-dash-card]:hover {
  border-color: #72767d;
  box-shadow: none !important;
  transform: none;
}
.dashboard-shell-host .dash-card[data-dash-card] .card-head {
  min-height: 0;
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}
.dashboard-shell-host .dash-card h3,
.dashboard-shell-host .dash-card[data-dash-card] .card-heading h3 { color: #f2f3f5; font-size: 16px; letter-spacing: 0; }
.dashboard-shell-host .dash-card .desc,
.dashboard-shell-host .dash-card[data-dash-card] .card-heading .desc { color: #b5bac1; line-height: 1.5; }
.dashboard-shell-host .dash-card[data-dash-card] .dash-label { color: #b5bac1; }
.dashboard-shell-host .dash-grid { gap: 14px; }
.dashboard-shell-host .dash-stats { gap: 10px; }
.dashboard-shell-host .dash-stat {
  min-height: 92px;
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid #4f545c;
  border-left: 3px solid #e07a5f;
  background: #40444b !important;
  box-shadow: none !important;
}
.dashboard-shell-host .dash-stat .val {
  color: #f2f3f5 !important;
  background: none !important;
  -webkit-text-fill-color: #f2f3f5 !important;
  font-size: 22px;
}
.dashboard-shell-host .dash-stat .lbl { color: #b5bac1; }

/* Champs et boutons : mêmes dimensions, même bordure, même accent. */
.dashboard-shell-host .dash-input,
.dashboard-shell-host .dash-select,
.dashboard-shell-host textarea.dash-input {
  min-height: 42px;
  border: 1px solid #202225 !important;
  border-radius: 4px !important;
  color: #f2f3f5 !important;
  background: #2b2d31 !important;
  box-shadow: none !important;
  transition: border-color .14s ease, background .14s ease;
}
.dashboard-shell-host .dash-input:hover,
.dashboard-shell-host .dash-select:hover { border-color: #72767d !important; background: #323438 !important; }
.dashboard-shell-host .dash-input:focus,
.dashboard-shell-host .dash-select:focus,
.dashboard-shell-host textarea.dash-input:focus {
  border-color: #e07a5f !important;
  background: #2b2d31 !important;
  box-shadow: 0 0 0 2px rgba(224,122,95,.22) !important;
}
.dashboard-shell-host .dash-input::placeholder { color: #949ba4; }
.dashboard-shell-host .dash-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b5bac1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}
.dashboard-shell-host .dash-select option { color: #f2f3f5; background: #2b2d31; }
.dashboard-shell-host .dash-btn {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #4f545c !important;
  border-radius: 4px !important;
  color: #f2f3f5;
  background: #4f545c !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.dashboard-shell-host .dash-btn::before { display: none !important; }
.dashboard-shell-host .dash-btn:hover {
  color: #fff;
  background: #5b626a !important;
  border-color: #72767d !important;
  box-shadow: none !important;
  transform: none !important;
}
.dashboard-shell-host .dash-btn:active { transform: none !important; }
.dashboard-shell-host .dash-btn-primary {
  color: #fff !important;
  background: #e07a5f !important;
  border-color: #e07a5f !important;
  box-shadow: none !important;
}
.dashboard-shell-host .dash-btn-primary:hover { background: #eb8b70 !important; border-color: #eb8b70 !important; filter: none; }
.dashboard-shell-host .dash-btn-danger { color: #ffb3b7; background: rgba(237,66,69,.12) !important; border-color: rgba(237,66,69,.55) !important; }
.dashboard-shell-host .dash-btn-danger:hover { background: rgba(237,66,69,.22) !important; border-color: #ed4245 !important; }
.dashboard-shell-host .dash-btn-sm { min-height: 34px; padding: 6px 11px; }
.dashboard-shell-host .hx-ripple { display: none !important; }

/* Interrupteurs et badges de statut. */
.dashboard-shell-host .switch .slider,
.dashboard-shell-host .am-main-toggle i,
.dashboard-shell-host .am-native-toggle i { background: #202225 !important; border-color: #4f545c !important; box-shadow: none !important; }
.dashboard-shell-host .switch input:checked + .slider,
.dashboard-shell-host .am-main-toggle input:checked + i,
.dashboard-shell-host .am-native-toggle input:checked + i { background: #e07a5f !important; border-color: #e07a5f !important; box-shadow: none !important; }
.dashboard-shell-host .dash-badge { border-radius: 4px; background: #40444b; border-color: #4f545c; color: #b5bac1; }
.dashboard-shell-host .dash-badge.ok { color: #57f287; border-color: rgba(87,242,135,.45); background: rgba(87,242,135,.08); }
.dashboard-shell-host .dash-badge.warn { color: #faa61a; border-color: rgba(250,166,26,.45); background: rgba(250,166,26,.08); }
.dashboard-shell-host .dash-badge.bad { color: #ed4245; border-color: rgba(237,66,69,.5); background: rgba(237,66,69,.08); }

/* Vue d'ensemble : accueil clair et utile, sans cartes flottantes excessives. */
.dashboard-shell-host .ov-intro,
.dashboard-shell-host .dash-hero {
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid #4f545c;
  border-radius: 4px;
  background: #40444b !important;
  box-shadow: none !important;
}
.dashboard-shell-host .ov-server-avatar { border-radius: 50%; border: 2px solid #e07a5f; background: #2b2d31; box-shadow: none; }
.dashboard-shell-host .ov-intro-copy h2 { color: #f2f3f5; }
.dashboard-shell-host .ov-intro-copy p { color: #b5bac1; }
.dashboard-shell-host .ov-intro-health { border-radius: 4px; background: rgba(87,242,135,.08); border-color: rgba(87,242,135,.45); box-shadow: none; }
.dashboard-shell-host .ov-quick-actions { margin-bottom: 16px; padding: 7px; border: 1px solid #4f545c; border-radius: 4px; background: #2b2d31; box-shadow: none; }
.dashboard-shell-host .ov-quick-label { color: #b5bac1; }
.dashboard-shell-host .ov-quick-action { min-height: 36px; border: 1px solid #4f545c; border-radius: 4px; color: #f2f3f5; background: #40444b; box-shadow: none; }
.dashboard-shell-host .ov-quick-action:hover { color: #fff; border-color: #e07a5f; background: #4f545c; transform: none; }
.dashboard-shell-host .ov-quick-action i { color: #e07a5f; }
.dashboard-shell-host .ov-progress-track { background: #202225; box-shadow: none; }
.dashboard-shell-host .ov-progress-value { background: #e07a5f; box-shadow: none; }
.dashboard-shell-host .ov-module-card { background: #40444b !important; }
.dashboard-shell-host .ov-module-icon { border: 0; border-radius: 4px; background: #2b2d31; }
.dashboard-shell-host .ov-module-card > .dash-btn { background: #4f545c !important; }

/* Règles et éditeurs spécialisés gardent la même surface neutre. */
.dashboard-shell-host .am-control-card,
.dashboard-shell-host .am-exceptions-card,
.dashboard-shell-host .am-summary-card,
.dashboard-shell-host .am-simulator-card,
.dashboard-shell-host .custom-announcement-card,
.dashboard-shell-host .adv-builder-card { background: #36393f !important; border-color: #4f545c; box-shadow: none; }
.dashboard-shell-host .am-control-hero,
.dashboard-shell-host .am-mode-row,
.dashboard-shell-host .am-policy-row,
.dashboard-shell-host .am-warning-panel,
.dashboard-shell-host .am-blacklist-config,
.dashboard-shell-host .am-native-card,
.dashboard-shell-host .adv-types-panel,
.dashboard-shell-host .adv-preview-shell,
.dashboard-shell-host .ca-preview-wrap {
  border-color: #4f545c;
  border-radius: 4px;
  background: #40444b !important;
  box-shadow: none;
}
.dashboard-shell-host .am-rule-card,
.dashboard-shell-host .adv-type-card { border-color: #4f545c; border-radius: 4px; background: #2b2d31 !important; box-shadow: none; }
.dashboard-shell-host .am-rule-card:hover,
.dashboard-shell-host .adv-type-card:hover { border-color: #72767d; transform: none; box-shadow: none; }
.dashboard-shell-host .am-rule-icon,
.dashboard-shell-host .am-shield-icon,
.dashboard-shell-host .ov-stat-icon { background: #2b2d31; border-color: #4f545c; box-shadow: none; }
.dashboard-shell-host .am-choice,
.dashboard-shell-host .ca-choice,
.dashboard-shell-host .discord-multi-choice { border-radius: 4px; background: #2b2d31; box-shadow: none; }
.dashboard-shell-host .am-choice.selected,
.dashboard-shell-host .ca-choice.selected { border-color: #e07a5f; color: #f2f3f5; background: rgba(224,122,95,.14); box-shadow: none; }
.dashboard-shell-host .discord-multi-choice.selected { border-color: #e07a5f; background: rgba(224,122,95,.14); }
.dashboard-shell-host .discord-multi-select { background-color: #2b2d31 !important; }
.dashboard-shell-host .discord-multi-remove { border-radius: 4px; background: #4f545c; }
.dashboard-shell-host .discord-multi-remove:hover { background: #ed4245; }

/* Tableaux, modales, palette et aperçus : même vocabulaire de surfaces. */
.dashboard-shell-host .dash-table th { color: #b5bac1; background: #2b2d31; }
.dashboard-shell-host .dash-table td { border-bottom-color: #4f545c; }
.dashboard-shell-host .dash-table tbody tr:hover td { background: rgba(224,122,95,.07); }
body:has(.dashboard-shell-host) .modal,
body:has(.dashboard-shell-host) .dash-palette,
body:has(.dashboard-shell-host) .dash-bell-pop,
body:has(.dashboard-shell-host) .dash-accent-pop {
  border: 1px solid #4f545c;
  border-radius: 4px;
  background: #36393f;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
body:has(.dashboard-shell-host) .modal-header,
body:has(.dashboard-shell-host) .modal-footer { border-color: #4f545c; background: #36393f; }
body:has(.dashboard-shell-host) .modal .btn {
  min-height: 38px;
  border-radius: 4px;
  border-color: #4f545c;
  background: #4f545c;
  box-shadow: none;
}
body:has(.dashboard-shell-host) .modal .btn-primary { background: #e07a5f; border-color: #e07a5f; }
.dashboard-shell-host .dash-savebar { border-radius: 4px; background: #2b2d31; border-color: #e07a5f; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.dashboard-shell-host .dash-savebar .sb-txt { color: #f0b29f; }
.dashboard-shell-host .dc-preview,
.dashboard-shell-host .adv-discord-preview,
.dashboard-shell-host .ca-discord-preview { border-radius: 4px; box-shadow: none; }

@keyframes slatePanelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dashboard-shell-host #dash-content > * { animation: slatePanelIn .18s ease both; }
.dashboard-shell-host .dash-card,
.dashboard-shell-host .dash-btn,
.dashboard-shell-host .dash-iconbtn,
.dashboard-shell-host .ov-quick-action { transition-duration: .14s; }

/* Mode clair : déclinaison claire du même système, sans réintroduire les gradients. */
html.hx-light {
  --d-bg: #f2f3f5;
  --d-side: #e3e5e8;
  --d-card: #f2f3f5;
  --d-card2: #fff;
  --d-border: #c7c9cc;
  --d-border-soft: #b5bac1;
  --d-text: #2e3338;
  --d-dim: #5c636b;
  --d-accent: #c85f49;
  --d-accent2: #a94838;
  --d-glow: rgba(200,95,73,.24);
}
html.hx-light body:has(.dashboard-shell-host),
html.hx-light body:has(.dashboard-shell-host) #app,
html.hx-light .dashboard-shell-host .dash-shell,
html.hx-light .dashboard-shell-host .dash-main { background: #f2f3f5; }
html.hx-light body:has(.dashboard-shell-host) .navbar,
html.hx-light .dashboard-shell-host .dash-side { background: #e3e5e8 !important; border-color: #c7c9cc; }
html.hx-light .dashboard-shell-host .dash-side-brand { border-color: #b5bac1; }
html.hx-light .dashboard-shell-host .dash-side-brand-status { border-color: #e3e5e8; }
html.hx-light .dashboard-shell-host .dash-side-item { color: #5c636b; }
html.hx-light .dashboard-shell-host .dash-side-item:hover,
html.hx-light .dashboard-shell-host .dash-side-item.active { color: #a94838; background: #d8dade; }
html.hx-light .dashboard-shell-host .dash-card,
html.hx-light .dashboard-shell-host .dash-card[data-dash-card] { background: #f2f3f5 !important; border-color: #b5bac1; }
html.hx-light .dashboard-shell-host .dash-stat,
html.hx-light .dashboard-shell-host .ov-intro,
html.hx-light .dashboard-shell-host .dash-hero,
html.hx-light .dashboard-shell-host .ov-module-card { background: #fff !important; border-color: #c7c9cc; }
html.hx-light .dashboard-shell-host .dash-input,
html.hx-light .dashboard-shell-host .dash-select,
html.hx-light .dashboard-shell-host textarea.dash-input { color: #2e3338 !important; background: #fff !important; border-color: #b5bac1 !important; }
html.hx-light .dashboard-shell-host .dash-btn { color: #2e3338; background: #e3e5e8 !important; border-color: #b5bac1 !important; }
html.hx-light .dashboard-shell-host .dash-btn-primary { color: #fff !important; background: #c85f49 !important; border-color: #c85f49 !important; }
html.hx-light .dashboard-shell-host .dash-select option { color: #2e3338; background: #fff; }

@media (max-width: 1200px) {
  .dashboard-shell-host .dash-main { padding-left: 28px; padding-right: 28px; }
  .dashboard-shell-host .dash-side { width: 258px; }
}
@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  body:has(.dashboard-shell-host) .navbar { padding: 7px 12px; }
  .dashboard-shell-host .dash-main { padding: 12px 12px calc(104px + env(safe-area-inset-bottom)); }
  .dashboard-shell-host .dash-topbar {
    margin: 0 -12px 18px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 10px;
    border-bottom: 1px solid #4f545c;
    background: #2b2d31;
  }
  .dashboard-shell-host .dash-topbar-actions { gap: 5px; }
  .dashboard-shell-host .dash-topbar-actions .dash-iconbtn { width: 38px; min-width: 38px; height: 38px; }
  .dashboard-shell-host .dash-module-header { min-height: 64px; margin-bottom: 17px; padding-bottom: 13px; }
  .dashboard-shell-host .dash-module-header .m-icon { width: 36px; height: 36px; font-size: 22px; }
  .dashboard-shell-host .module-header-copy h1 { font-size: 18px; }
  .dashboard-shell-host .dash-card,
  .dashboard-shell-host .dash-card[data-dash-card] { padding: 17px 15px; border-radius: 4px; }
  .dashboard-shell-host .dash-btn { min-height: 42px; }
  .dashboard-shell-host .dash-stat { min-height: 86px; padding: 13px; }
  .dashboard-shell-host .ov-intro,
  .dashboard-shell-host .dash-hero { padding: 16px; }
  .dashboard-shell-host .dash-savebar { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
  .dashboard-shell-host .dash-main { padding-left: 10px; padding-right: 10px; }
  .dashboard-shell-host .dash-topbar { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .dashboard-shell-host .dash-module-header h1 { font-size: 18px; }
  .dashboard-shell-host .dash-module-header .sub { font-size: 11px; }
  .dashboard-shell-host .dash-card,
  .dashboard-shell-host .dash-card[data-dash-card] { padding: 16px 13px; }
  .dashboard-shell-host .module-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-shell-host #dash-content > *,
  .dashboard-shell-host .dash-card,
  .dashboard-shell-host .dash-btn,
  .dashboard-shell-host .dash-iconbtn { animation: none !important; transition: none !important; }
}

/* ============================================================
   NEXORA v10.0 — Draft Panel layout
   Même logique d'interface qu'un panel Discord professionnel :
   sidebar fixe, contenu gris uni, titres séparés par une ligne,
   contrôles sombres et accent argile. Identité Optimus Prime conservée.
   ============================================================ */
:root {
  --d-bg: #36393f;
  --d-side: #2b2d31;
  --d-card: #36393f;
  --d-card2: #2b2d31;
  --d-border: #202225;
  --d-border-soft: #4f545c;
  --d-text: #f2f3f5;
  --d-dim: #b5bac1;
  --d-accent: #e07a5f;
  --d-accent2: #c95b49;
  --d-glow: rgba(224,122,95,.25);
  --d-radius-card: 4px;
  --d-radius-control: 4px;
}

/* La page devient un vrai espace de configuration, pas une vitrine. */
.dashboard-shell-host .dash-shell { background: #36393f; }
.dashboard-shell-host .dash-side {
  width: 300px;
  background: #2b2d31;
  border-right: 1px solid #202225;
  box-shadow: none;
}
.dashboard-shell-host .dash-side-brand {
  margin: 0 26px 20px;
  padding-bottom: 20px;
  gap: 10px;
  border-bottom: 1px solid #4f545c;
}
.dashboard-shell-host .dash-side-brand-avatar,
.dashboard-shell-host .dash-side-brand-avatar.fallback {
  width: 88px;
  height: 88px;
  flex-basis: 88px;
  border: 2px solid #e07a5f;
  background: #202225;
}
.dashboard-shell-host .dash-side-brand-copy b { font-size: 18px; }
.dashboard-shell-host .dash-side-brand-copy span { color: #b5bac1; font-size: 12px; }
.dashboard-shell-host .dash-side-brand-status { top: 72px; right: calc(50% - 45px); }
.dashboard-shell-host .dash-side-section {
  padding: 15px 28px 7px;
  color: #949ba4;
  font-size: 11px;
  letter-spacing: 1px;
}
.dashboard-shell-host .dash-side-item {
  min-height: 44px;
  padding: 10px 28px;
  border-left: 3px solid transparent;
  font-size: 14px;
}
.dashboard-shell-host .dash-side-item .ico { width: 24px; height: 24px; font-size: 18px; }
.dashboard-shell-host .dash-side-item:hover { background: #323438; border-left-color: #72767d; }
.dashboard-shell-host .dash-side-item.active {
  color: #e07a5f;
  background: #323438;
  border-left-color: #e07a5f;
}
.dashboard-shell-host .dash-side-item.active .ico { color: #e07a5f; }
.dashboard-shell-host .dash-global-admin { margin-top: 12px; background: rgba(224,122,95,.07); }
.dashboard-shell-host .dash-side-foot { margin-left: 26px; margin-right: 26px; }

/* Barre d'outils très discrète : le contenu reste prioritaire. */
.dashboard-shell-host .dash-main { padding: 28px 46px 80px; }
.dashboard-shell-host #dash-content { max-width: 1160px; }
.dashboard-shell-host .dash-topbar {
  min-height: 32px;
  margin: 0 auto 16px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid #4f545c;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.dashboard-shell-host .dash-crumb { display: none; }
.dashboard-shell-host .dash-topbar-actions { width: 100%; justify-content: flex-end; }
.dashboard-shell-host .dash-topbar-actions .dash-iconbtn { width: 34px; height: 34px; }
.dashboard-shell-host .dash-topbar-actions .dash-bot-chip { min-height: 34px; }

/* Titre de module : grand titre, ligne horizontale, accent unique. */
.dashboard-shell-host .dash-module-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 68px;
  margin-bottom: 25px;
  padding: 0 0 17px;
  border-bottom: 1px solid #72767d;
}
.dashboard-shell-host .dash-module-header::after { width: 120px; height: 2px; background: #e07a5f; }
.dashboard-shell-host .dash-module-header .m-icon { width: 34px; height: 34px; font-size: 22px; color: #e07a5f; }
.dashboard-shell-host .module-header-copy h1 { font-size: 28px; font-weight: 700; letter-spacing: 0; }
.dashboard-shell-host .module-header-copy .sub { font-size: 13px; color: #b5bac1; }
.dashboard-shell-host .module-header-meta { gap: 5px; }
.dashboard-shell-host .module-scope,
.dashboard-shell-host .module-status { min-height: 24px; padding: 3px 7px; border-radius: 4px; font-size: 11px; }

/* Les cartes principales deviennent des sections de réglages ouvertes. */
.dashboard-shell-host #dash-content > .dash-card[data-dash-card],
.dashboard-shell-host .ov-activity-grid > .dash-card[data-dash-card],
.dashboard-shell-host .am-control-card,
.dashboard-shell-host .adv-builder-card,
.dashboard-shell-host .custom-announcement-card {
  padding: 0 0 28px;
  margin-bottom: 28px;
  border: 0;
  border-bottom: 1px solid #4f545c;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.dashboard-shell-host #dash-content > .dash-card[data-dash-card]:hover,
.dashboard-shell-host .ov-activity-grid > .dash-card[data-dash-card]:hover { border-color: #72767d; box-shadow: none !important; }
.dashboard-shell-host .dash-card[data-dash-card] .card-head {
  margin-bottom: 20px;
  padding: 0;
  border: 0;
}
.dashboard-shell-host .dash-card[data-dash-card] .card-heading h3,
.dashboard-shell-host .dash-card h3 {
  color: #f2f3f5;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}
.dashboard-shell-host .dash-card[data-dash-card] .card-heading .desc,
.dashboard-shell-host .dash-card .desc {
  max-width: 850px;
  margin-top: 5px;
  color: #b5bac1;
  font-size: 13px;
  line-height: 1.5;
}

/* Les petites cartes de l'accueil restent des objets cliquables. */
.dashboard-shell-host .ov-intro,
.dashboard-shell-host .dash-hero,
.dashboard-shell-host .ov-checklist-card {
  border: 1px solid #4f545c;
  border-radius: 4px;
  background: #40444b !important;
  box-shadow: none !important;
}
.dashboard-shell-host .ov-module-card,
.dashboard-shell-host .ov-feed-card,
.dashboard-shell-host .ov-brief-card {
  padding: 17px !important;
  margin-bottom: 0 !important;
  border: 1px solid #4f545c !important;
  border-radius: 4px !important;
  background: #40444b !important;
  box-shadow: none !important;
}
.dashboard-shell-host .ov-module-card h3,
.dashboard-shell-host .ov-feed-card h3,
.dashboard-shell-host .ov-brief-card h3 { font-size: 16px; }
.dashboard-shell-host .ov-module-card .desc,
.dashboard-shell-host .ov-feed-card .desc,
.dashboard-shell-host .ov-brief-card .desc { font-size: 12px; }

/* Formulaires façon panel : le contrôle occupe la largeur et se lit tout de suite. */
.dashboard-shell-host .dash-label {
  margin-top: 18px;
  color: #b5bac1;
  font-size: 11px;
  letter-spacing: .65px;
}
.dashboard-shell-host .dash-input,
.dashboard-shell-host .dash-select,
.dashboard-shell-host textarea.dash-input {
  min-height: 45px;
  border: 1px solid #202225 !important;
  border-radius: 4px !important;
  background: #2b2d31 !important;
  color: #f2f3f5 !important;
  box-shadow: none !important;
}
.dashboard-shell-host .dash-input:focus,
.dashboard-shell-host .dash-select:focus,
.dashboard-shell-host textarea.dash-input:focus {
  border-color: #e07a5f !important;
  box-shadow: 0 0 0 2px rgba(224,122,95,.22) !important;
}
.dashboard-shell-host .dash-btn {
  min-height: 40px;
  border: 1px solid #4f545c !important;
  border-radius: 4px !important;
  background: #4f545c !important;
  box-shadow: none !important;
  transform: none !important;
}
.dashboard-shell-host .dash-btn:hover { background: #5b626a !important; border-color: #72767d !important; transform: none !important; }
.dashboard-shell-host .dash-btn-primary { background: #e07a5f !important; border-color: #e07a5f !important; color: #fff !important; }
.dashboard-shell-host .dash-btn-primary:hover { background: #eb8b70 !important; border-color: #eb8b70 !important; }
.dashboard-shell-host .dash-btn-danger { background: rgba(237,66,69,.12) !important; border-color: rgba(237,66,69,.55) !important; color: #ffb3b7; }
.dashboard-shell-host .dash-btn::before,
.dashboard-shell-host .hx-ripple { display: none !important; }

/* Surfaces secondaires : règles Auto-Mod, éditeur et sélecteurs multiples. */
.dashboard-shell-host .am-rule-card,
.dashboard-shell-host .adv-type-card,
.dashboard-shell-host .am-control-hero,
.dashboard-shell-host .am-mode-row,
.dashboard-shell-host .am-policy-row,
.dashboard-shell-host .am-warning-panel,
.dashboard-shell-host .am-blacklist-config,
.dashboard-shell-host .am-native-card,
.dashboard-shell-host .adv-types-panel,
.dashboard-shell-host .adv-preview-shell,
.dashboard-shell-host .ca-preview-wrap {
  border: 1px solid #4f545c;
  border-radius: 4px;
  background: #40444b !important;
  box-shadow: none !important;
}
.dashboard-shell-host .am-rule-card,
.dashboard-shell-host .adv-type-card { background: #2b2d31 !important; }
.dashboard-shell-host .am-rule-card:hover,
.dashboard-shell-host .adv-type-card:hover { border-color: #72767d; transform: none; }
.dashboard-shell-host .am-choice,
.dashboard-shell-host .ca-choice,
.dashboard-shell-host .discord-multi-choice { border-radius: 4px; background: #2b2d31; box-shadow: none; }
.dashboard-shell-host .am-choice.selected,
.dashboard-shell-host .ca-choice.selected,
.dashboard-shell-host .discord-multi-choice.selected { border-color: #e07a5f; background: rgba(224,122,95,.14); }
.dashboard-shell-host .discord-multi-select { margin-top: 0; }

/* Progression, tableaux et navigation basse : accent argile partout. */
.dashboard-shell-host .ov-progress-value { background: #e07a5f; box-shadow: none; }
.dashboard-shell-host .dash-stat { border-left-color: #e07a5f; background: #40444b !important; }
.dashboard-shell-host .dash-table th { background: #2b2d31; }
.dashboard-shell-host .dash-table tbody tr:hover td { background: rgba(224,122,95,.08); }
.dashboard-shell-host .dash-bnav { background: #2b2d31; border-color: #202225; }
.dashboard-shell-host .bnav-item.active { color: #e07a5f; }
.dashboard-shell-host .bnav-item.active .bnav-ico { background: rgba(224,122,95,.16); }
.dashboard-shell-host .bnav-item.active::before { background: #e07a5f; }

html.hx-light .dashboard-shell-host .dash-shell,
html.hx-light .dashboard-shell-host .dash-main,
html.hx-light body:has(.dashboard-shell-host),
html.hx-light body:has(.dashboard-shell-host) #app { background: #f2f3f5; }
html.hx-light .dashboard-shell-host .dash-side,
html.hx-light body:has(.dashboard-shell-host) .navbar { background: #e3e5e8 !important; border-color: #c7c9cc; }
html.hx-light .dashboard-shell-host #dash-content > .dash-card[data-dash-card],
html.hx-light .dashboard-shell-host .ov-activity-grid > .dash-card[data-dash-card] { border-color: #b5bac1; }
html.hx-light .dashboard-shell-host .dash-card[data-dash-card] .card-heading h3,
html.hx-light .dashboard-shell-host .dash-card h3,
html.hx-light .dashboard-shell-host .module-header-copy h1 { color: #2e3338; }
html.hx-light .dashboard-shell-host .dash-card[data-dash-card] .card-heading .desc,
html.hx-light .dashboard-shell-host .dash-card .desc { color: #5c636b; }
html.hx-light .dashboard-shell-host .dash-input,
html.hx-light .dashboard-shell-host .dash-select,
html.hx-light .dashboard-shell-host textarea.dash-input { color: #2e3338 !important; background: #fff !important; border-color: #b5bac1 !important; }
html.hx-light .dashboard-shell-host .dash-btn { color: #2e3338; background: #e3e5e8 !important; border-color: #b5bac1 !important; }
html.hx-light .dashboard-shell-host .dash-btn-primary { color: #fff !important; background: #c85f49 !important; border-color: #c85f49 !important; }

@media (max-width: 1200px) {
  .dashboard-shell-host .dash-side { width: 260px; }
  .dashboard-shell-host .dash-main { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dashboard-shell-host .dash-main { padding: 12px 12px calc(104px + env(safe-area-inset-bottom)); }
  .dashboard-shell-host .dash-topbar { margin: 0 -12px 18px; padding: calc(8px + env(safe-area-inset-top)) 12px 10px; border-bottom-color: #4f545c; background: #2b2d31; }
  .dashboard-shell-host .dash-crumb { display: none; }
  .dashboard-shell-host .dash-topbar-actions { justify-content: flex-start; }
  .dashboard-shell-host .dash-module-header { min-height: 62px; margin-bottom: 20px; padding-bottom: 13px; }
  .dashboard-shell-host .module-header-copy h1 { font-size: 22px; }
  .dashboard-shell-host .dash-card[data-dash-card] { padding-bottom: 22px; margin-bottom: 22px; }
  .dashboard-shell-host .dash-card[data-dash-card] .card-heading h3,
  .dashboard-shell-host .dash-card h3 { font-size: 18px; }
}
@media (max-width: 520px) {
  .dashboard-shell-host .dash-main { padding-left: 10px; padding-right: 10px; }
  .dashboard-shell-host .dash-topbar { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .dashboard-shell-host .module-header-copy h1 { font-size: 18px; }
  .dashboard-shell-host .dash-card[data-dash-card] .card-heading h3,
  .dashboard-shell-host .dash-card h3 { font-size: 18px; }
}
html.hx-light { color-scheme: light; }

/* ============================================================
   NEXORA v11.0 — Accueil organisé
   L'accueil n'est plus une simple grille de cartes :
   contexte du serveur, accès rapides, progression puis activité.
   ============================================================ */
.dashboard-shell-host .ov-workspace { display: flex; flex-direction: column; gap: 0; }
.dashboard-shell-host .ov-welcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 132px;
  margin-bottom: 18px;
  padding: 24px 26px;
  border-left: 4px solid #e07a5f;
}
.dashboard-shell-host .ov-welcome-panel .ov-server-avatar { width: 64px; height: 64px; flex-basis: 64px; }
.dashboard-shell-host .ov-welcome-panel .ov-intro-copy h2 { font-size: 22px; font-weight: 600; }
.dashboard-shell-host .ov-welcome-panel .ov-intro-health { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; min-width: 220px; align-items: center; }
.dashboard-shell-host .ov-welcome-panel .ov-intro-health > div { min-width: 0; }
.dashboard-shell-host .ov-welcome-settings {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #4f545c;
  border-radius: 4px;
  color: #f2f3f5;
  background: #2b2d31;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.dashboard-shell-host .ov-welcome-settings:hover { border-color: #e07a5f; background: #4f545c; }
.dashboard-shell-host .ov-welcome-settings span { color: #e07a5f; font-size: 16px; }
.dashboard-shell-host .ov-access-bar {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  margin-bottom: 26px;
  border-radius: 4px;
}
.dashboard-shell-host .ov-access-bar .ov-quick-label {
  display: flex;
  align-items: center;
  min-width: 92px;
  padding: 0 12px 0 6px;
  color: #b5bac1;
  font-size: 11px;
  letter-spacing: 1px;
}
.dashboard-shell-host .ov-access-bar .ov-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 5px 9px;
  text-align: left;
}
.dashboard-shell-host .ov-access-bar .ov-quick-action > span { flex: 0 0 auto; font-size: 14px; line-height: 1.2; }
.dashboard-shell-host .ov-access-bar .ov-quick-action .ov-qa-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.dashboard-shell-host .ov-access-bar .ov-quick-action b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dashboard-shell-host .ov-access-bar .ov-quick-action small { color: #b5bac1; font-size: 11px; }
.dashboard-shell-host .ov-access-bar .ov-quick-action i { margin-left: auto; flex: 0 0 auto; color: var(--d-dim); font-style: normal; font-size: 14px; }
.dashboard-shell-host .ov-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 11px;
  border-bottom: 1px solid #4f545c;
}
.dashboard-shell-host .ov-section-heading b { color: #f2f3f5; font-size: 22px; font-weight: 600; }
.dashboard-shell-host .ov-section-heading span { color: #b5bac1; font-size: 12px; }
.dashboard-shell-host .ov-checklist-card { padding: 20px 22px !important; }
.dashboard-shell-host .ov-checklist-card .ov-section-heading { border-bottom-color: #72767d; }
.dashboard-shell-host .ov-stats { margin-top: 0; }
.dashboard-shell-host .ov-module-grid { margin-top: 10px; }
.dashboard-shell-host .ov-module-grid::before {
  content: 'Modules du serveur';
  grid-column: 1 / -1;
  padding: 0 0 7px;
  color: #b5bac1;
  border-bottom: 1px solid #4f545c;
  font-size: 22px;
  font-weight: 600;
}
.dashboard-shell-host .ov-module-grid .ov-module-card { margin-top: 0; }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dashboard-shell-host .ov-welcome-panel { grid-template-columns: 1fr; gap: 15px; padding: 18px 16px; }
  .dashboard-shell-host .ov-welcome-panel .ov-intro-health { min-width: 0; width: 100%; }
  .dashboard-shell-host .ov-access-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 21px; }
  .dashboard-shell-host .ov-access-bar .ov-quick-label { grid-column: 1 / -1; min-height: 26px; padding: 0 6px; }
  .dashboard-shell-host .ov-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (max-width: 520px) {
  .dashboard-shell-host .ov-access-bar { grid-template-columns: 1fr; }
  .dashboard-shell-host .ov-access-bar .ov-quick-label { grid-column: auto; }
  .dashboard-shell-host .ov-welcome-panel .ov-intro-copy h2 { font-size: 18px; }
  .dashboard-shell-host .ov-section-heading b,
  .dashboard-shell-host .ov-module-grid::before { font-size: 18px; }
}

/* ============================================================
   NEXORA v12.0 — Accueil en espace de travail
   Construction en deux colonnes : configuration à gauche,
   résumé et activité à droite, comme un vrai panneau de gestion.
   ============================================================ */
.dashboard-shell-host .ov-home-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .78fr);
  gap: 22px;
  align-items: start;
}
.dashboard-shell-host .ov-home-main,
.dashboard-shell-host .ov-home-side { min-width: 0; }
.dashboard-shell-host .ov-home-side { display: flex; flex-direction: column; gap: 18px; }
.dashboard-shell-host .ov-config-panel {
  padding: 0 !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.dashboard-shell-host .ov-config-panel .ov-section-heading { margin-bottom: 16px; }
.dashboard-shell-host .ov-config-list { display: flex; flex-direction: column; border: 1px solid #4f545c; border-radius: 4px; overflow: hidden; }
.dashboard-shell-host .ov-config-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid #4f545c;
  color: #f2f3f5;
  background: #40444b;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, padding .14s ease, color .14s ease;
}
.dashboard-shell-host .ov-config-row:last-child { border-bottom: 0; }
.dashboard-shell-host .ov-config-row:hover { padding-left: 18px; color: #fff; background: #4f545c; }
.dashboard-shell-host .ov-config-row.done .ov-config-check { color: #57f287; border-color: rgba(87,242,135,.55); }
.dashboard-shell-host .ov-config-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #72767d;
  border-radius: 50%;
  color: #b5bac1;
  font-size: 16px;
  font-weight: 800;
}
.dashboard-shell-host .ov-config-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dashboard-shell-host .ov-config-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.dashboard-shell-host .ov-config-copy small { color: #b5bac1; font-size: 11px; }
.dashboard-shell-host .ov-config-arrow { color: #e07a5f; font-size: 18px; text-align: center; }
.dashboard-shell-host .ov-config-empty { padding: 20px; color: #b5bac1; background: #40444b; }
.dashboard-shell-host .ov-home-side-section {
  padding: 16px;
  border: 1px solid #4f545c;
  border-radius: 4px;
  background: #40444b;
}
.dashboard-shell-host .ov-side-heading,
.dashboard-shell-host .ov-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.dashboard-shell-host .ov-side-heading { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #4f545c; }
.dashboard-shell-host .ov-side-heading b { color: #f2f3f5; font-size: 16px; font-weight: 600; }
.dashboard-shell-host .ov-side-heading span { color: #b5bac1; font-size: 11px; }
.dashboard-shell-host .ov-summary-section .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.dashboard-shell-host .ov-summary-section .ov-stat {
  min-height: 86px;
  padding: 11px !important;
  border: 1px solid #4f545c;
  border-left: 2px solid #e07a5f;
  border-radius: 4px;
  background: #2b2d31 !important;
}
.dashboard-shell-host .ov-summary-section .ov-stat-top { margin-bottom: 8px; }
.dashboard-shell-host .ov-summary-section .ov-stat-icon { width: 24px; height: 24px; border-radius: 4px; background: transparent; border: 0; font-size: 14px; }
.dashboard-shell-host .ov-summary-section .ov-stat .val { font-size: 22px !important; }
.dashboard-shell-host .ov-summary-section .ov-stat .lbl { font-size: 11px; }
.dashboard-shell-host .ov-summary-section .ov-stat-note { display: none; }
.dashboard-shell-host .ov-home-feed #ov-feed { min-height: 40px; }
.dashboard-shell-host .ov-home-feed .feed-item { padding: 9px 0; border-bottom-color: #4f545c; }
.dashboard-shell-host .ov-home-feed .feed-item:last-child { border-bottom: 0; }
.dashboard-shell-host .ov-home-feed .feed-emoji { width: 26px; height: 26px; border-radius: 4px; background: #2b2d31; }
.dashboard-shell-host .ov-home-feed .feed-text { font-size: 11px; }
.dashboard-shell-host .ov-home-feed .feed-time { font-size: 11px; }
.dashboard-shell-host .ov-feed-empty { padding: 8px 0; color: #b5bac1; font-size: 11px; }
.dashboard-shell-host .ov-brief-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-shell-host .ov-brief-badges .dash-badge { padding: 5px 7px !important; font-size: 11px; }
.dashboard-shell-host .ov-top-label { margin-top: 16px; color: #b5bac1; }
.dashboard-shell-host .ov-top-member { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 31px; border-bottom: 1px solid #4f545c; color: #f2f3f5; font-size: 11px; }
.dashboard-shell-host .ov-top-member:last-child { border-bottom: 0; }
.dashboard-shell-host .ov-top-member small { color: #b5bac1; }
.dashboard-shell-host .ov-module-section { margin-top: 25px; }
.dashboard-shell-host .ov-module-section .ov-section-heading { margin-bottom: 15px; padding-bottom: 11px; border-bottom: 1px solid #72767d; }
.dashboard-shell-host .ov-module-section .ov-section-heading b { font-size: 22px; font-weight: 600; }
.dashboard-shell-host .ov-module-grid { margin-top: 0; }
.dashboard-shell-host .ov-module-grid::before { display: none; }
.dashboard-shell-host .ov-module-card { min-height: 128px; }

@media (max-width: 1000px) {
  .dashboard-shell-host .ov-home-columns { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .85fr); gap: 14px; }
}
@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dashboard-shell-host .ov-home-columns { grid-template-columns: 1fr; gap: 18px; }
  .dashboard-shell-host .ov-home-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dashboard-shell-host .ov-summary-section { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .dashboard-shell-host .ov-home-side { display: flex; }
  .dashboard-shell-host .ov-welcome-panel .ov-intro-health { display: grid; }
  .dashboard-shell-host .ov-section-heading,
  .dashboard-shell-host .ov-side-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* ============================================================
   NEXORA v13.0 — Navigation mobile en deux niveaux
   Barre compacte, menu principal, rail des serveurs et modules.
   ============================================================ */
.dash-mobile-bar { display: none; }
.dash-mobile-layer { display: none; }
.dash-mobile-drawer[hidden], .dash-mobile-backdrop[hidden] { display: none !important; }

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  body:has(.dashboard-shell-host) .navbar { display: none !important; }
  body:has(.dashboard-shell-host) { overflow-x: hidden; }
  body.dash-mobile-drawer-open { overflow: hidden; }
  .dashboard-shell-host .dash-topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    display: block;
    min-height: 48px;
    margin: 0 -12px 18px;
    padding: calc(5px + env(safe-area-inset-top)) 10px 5px;
    background: #202225;
    border-bottom: 1px solid #4f545c;
  }
  .dashboard-shell-host .dash-mobile-bar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    min-height: 40px;
  }
  .dashboard-shell-host .dash-mobile-navbtn {
    /* v366 — 36 px ici, 42 px plus bas (bloc « audit v199 », mêmes sélecteurs,
       !important) : la règle du haut ne gagnait JAMAIS. Mises d'accord, plus de
       valeur fantôme à lire pour qui veut ajuster la barre. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #e07a5f;
    background: transparent;
    font: inherit;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
  }
  .dashboard-shell-host .dash-mobile-navbtn:hover,
  .dashboard-shell-host .dash-mobile-navbtn[aria-expanded="true"] { color: #f2f3f5; background: #323438; }
  .dashboard-shell-host .dash-mobile-brand { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; color: #f2f3f5; }
  .dashboard-shell-host .dash-mobile-brand img,
  .dashboard-shell-host .dash-mobile-brand-mark { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; border: 1px solid #e07a5f; background: #2b2d31; object-fit: cover; }
  .dashboard-shell-host .dash-mobile-brand-mark { display: inline-flex; align-items: center; justify-content: center; color: #e07a5f; font-size: 16px; font-weight: 900; }
  .dashboard-shell-host .dash-mobile-brand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .dashboard-shell-host .dash-topbar-actions,
  .dashboard-shell-host .dash-topbar .topbar-pick { display: none !important; }
  .dashboard-shell-host .dash-bnav { display: none !important; }

  /* Tiroirs : le contenu actif reste visible derrière, comme dans un panel
     mobile classique ; le masque garde le focus sur le menu ouvert. */
  .dash-mobile-layer { display: block; position: fixed; inset: 0; z-index: 900; pointer-events: none; }
  .dash-mobile-backdrop { position: absolute; inset: 0; pointer-events: auto; background: rgba(0,0,0,.62); }
  .dash-mobile-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(304px, 84vw);
    pointer-events: auto;
    color: #f2f3f5;
    background: #2b2d31;
    border-right: 1px solid #4f545c;
    box-shadow: 12px 0 28px rgba(0,0,0,.35);
    animation: mobileDrawerIn .16s ease both;
  }
  .dash-mobile-modules-drawer { width: min(380px, calc(100vw - 18px)); }
  /* v366 — le tiroir couvre toute la hauteur, y compris la bande du haut : en
     mode « standalone » (manifeste) avec viewport-fit=cover, son titre et sa
     croix de fermeture passaient sous l'encoche. Même idiome que .dash-topbar,
     cinq lignes plus haut. Mesuré à 8px de padding haut, sans aire de sécurité. */
  .dash-mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; border-bottom: 1px solid #4f545c; background: #202225; }
  .dash-mobile-drawer-head b { font-size: 16px; }
  .dash-mobile-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 4px; color: #e07a5f; background: transparent; font: inherit; font-size: 28px; cursor: pointer; }
  .dash-mobile-close:hover { color: #fff; background: #323438; }
  .dash-mobile-site-links { display: flex; flex-direction: column; padding: 7px 0; }
  .dash-mobile-site-links button { display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 9px 18px; border: 0; border-bottom: 1px solid rgba(79,84,92,.35); color: #b5bac1; background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
  .dash-mobile-site-links button:hover { color: #fff; background: #323438; }
  .dash-mobile-site-links button span { width: 21px; color: #e07a5f; font-size: 18px; text-align: center; }
  .dash-mobile-drawer-account { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #4f545c; background: #202225; }
  .dash-mobile-account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; color: #fff; background: #e07a5f; font-weight: 800; }
  .dash-mobile-drawer-account > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  .dash-mobile-drawer-account b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .dash-mobile-drawer-account small { margin-top: 2px; color: #b5bac1; font-size: 11px; }
  /* v366 — seul bouton du tiroir encore sous le plancher tactile maison (40 px,
     « Apple et Google recommandent 44 px ; on monte à 40 px ») : mesuré à 34 px
     au banc, à côté d'une croix de fermeture déjà à 40 px. L'avatar de la même
     rangée reste à 34 px : c'est un visuel, pas une cible, et c'est la taille des
     avatars de serveurs du shell (.dash-server-pick img). */
  .dash-mobile-drawer-account button { width: 40px; height: 40px; border: 1px solid #4f545c; border-radius: 4px; color: #e07a5f; background: transparent; font-size: 18px; cursor: pointer; }
  .dash-mobile-drawer-account button:hover { color: #fff; background: #ed4245; border-color: #ed4245; }
  .dash-mobile-modules-body { display: grid; grid-template-columns: 52px minmax(0, 1fr); min-height: 0; flex: 1; }
  .dash-mobile-server-rail { display: flex; flex-direction: column; align-items: center; gap: 9px; overflow-y: auto; padding: 12px 7px; background: #202225; border-right: 1px solid #4f545c; }
  .dash-mobile-server-item { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 50%; color: #f2f3f5; background: #40444b; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .14s ease, border-radius .14s ease, background .14s ease; }
  .dash-mobile-server-item img { width: 100%; height: 100%; object-fit: cover; }
  .dash-mobile-server-item:hover { border-color: #72767d; }
  .dash-mobile-server-item.active { border-color: #e07a5f; border-radius: 12px; background: #e07a5f; }
  .dash-mobile-module-list { min-width: 0; overflow-y: auto; padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); background: #2b2d31; }
  .dash-mobile-current-server { display: flex; flex-direction: column; gap: 3px; padding: 4px 13px 12px; border-bottom: 1px solid #4f545c; }
  .dash-mobile-current-server small { color: #b5bac1; font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
  .dash-mobile-current-server b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f2f3f5; font-size: 13px; }
  .dash-mobile-module-group { padding: 14px 13px 6px; color: #949ba4; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px; }
  /* v366 — la liste des modules est la navigation principale du mobile : elle
     était la SEULE cible sous le plancher maison (38 px mesurés), pendant que
     les lignes du menu général du même tiroir sont à 43 px et les sélecteurs à
     48 px. Aligné sur 43 px, libellé à 13 px comme « Serveur sélectionné ». */
  .dash-mobile-module-item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 43px; padding: 9px 13px; border: 0; border-left: 3px solid transparent; color: #b5bac1; background: transparent; font: inherit; text-align: left; cursor: pointer; }
  .dash-mobile-module-item:hover { color: #fff; background: #323438; }
  .dash-mobile-module-item.active { color: #e07a5f; background: #323438; border-left-color: #e07a5f; }
  .dash-mobile-module-item > span { width: 22px; font-size: 16px; text-align: center; }
  .dash-mobile-module-item b { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
  .dash-mobile-module-item i { color: #949ba4; font-size: 18px; font-style: normal; }
  .dash-mobile-module-empty { padding: 20px 13px; color: #b5bac1; font-size: 12px; line-height: 1.5; }
  @keyframes mobileDrawerIn { from { opacity: .55; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
}

/* ============================================================
   🏠 Accueil — Refonte Argile (v158)
   Hero en dégradé d'accent, actions rapides en cartes à tuiles,
   cohérence PC / mobile avec le reste du panel.
   ============================================================ */

/* Hero : panneau de bienvenue signature Optimus Prime */
.dashboard-shell-host .ov-welcome-panel {
  position: relative;
  border: 1px solid rgba(var(--d-accent-rgb), .32);
  border-radius: 12px;
  background:
    radial-gradient(520px 210px at 97% -30%, rgba(var(--d-accent-rgb), .2), transparent 70%),
    radial-gradient(430px 200px at 0% 135%, rgba(var(--d-accent-rgb), .11), transparent 72%),
    linear-gradient(150deg, rgba(255,255,255,.05), transparent 55%),
    var(--d-card);
  box-shadow: 0 24px 55px -35px var(--d-glow), inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
}
.dashboard-shell-host .ov-welcome-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--d-accent), var(--d-accent2), transparent 88%);
}
.dashboard-shell-host .ov-welcome-panel .ov-server-avatar {
  border-radius: 12px;
  border: 2px solid rgba(var(--d-accent-rgb), .45);
  background: linear-gradient(145deg, var(--d-accent), var(--d-accent2));
  box-shadow: 0 12px 26px -12px var(--d-glow);
}
.dashboard-shell-host .ov-welcome-panel .ov-eyebrow { color: var(--d-accent); }
.dashboard-shell-host .ov-welcome-panel .ov-intro-copy h2 {
  font-size: 22px; font-weight: 750; letter-spacing: -.4px; white-space: normal;
}
.dashboard-shell-host .ov-welcome-panel .ov-intro-copy p { color: var(--d-dim); font-size: 13px; }
.dashboard-shell-host .ov-welcome-panel .ov-intro-health {
  border-radius: 12px;
  border-color: rgba(73,209,125,.28);
  background: rgba(73,209,125,.08);
  padding: 10px 14px;
}
.dashboard-shell-host .ov-welcome-settings {
  min-height: 40px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(var(--d-accent-rgb), .45);
  background: rgba(var(--d-accent-rgb), .1);
  color: var(--d-text); font-weight: 700; font-size: 12px;
  transition: .15s;
}
.dashboard-shell-host .ov-welcome-settings:hover {
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px -8px var(--d-glow);
}
.dashboard-shell-host .ov-welcome-settings span { color: inherit; }

/* Actions rapides : cartes à tuiles d'icônes façon panel pro */
.dashboard-shell-host .ov-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--d-border);
  border-radius: 12px;
  background: rgba(20,21,31,.55);
}
.dashboard-shell-host .ov-quick-label {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  min-height: 20px; padding: 0 2px;
  color: var(--d-dim); font-size: 11px; font-weight: 900;
  letter-spacing: 1px; text-transform: uppercase;
}
.dashboard-shell-host .ov-quick-action {
  display: flex; align-items: center; gap: 11px;
  min-height: 58px; padding: 9px 12px;
  border: 1px solid var(--d-border);
  border-radius: 12px;
  color: var(--d-dim); background: var(--d-card);
  font-size: 12px; font-weight: 700; text-align: left;
}
.dashboard-shell-host .ov-quick-action > span {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 18px;
  background: rgba(var(--d-accent-rgb), .12);
  transition: .15s;
}
.dashboard-shell-host .ov-qa-txt { min-width: 0; flex: 1; }
.dashboard-shell-host .ov-quick-action b {
  display: block; color: var(--d-text); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dashboard-shell-host .ov-quick-action small { display: block; font-size: 11px; font-weight: 500; margin-top: 1px; }
.dashboard-shell-host .ov-quick-action i { margin-left: auto; color: var(--d-dim); font-style: normal; font-size: 14px; transition: .15s; }
.dashboard-shell-host .ov-quick-action:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--d-accent-rgb), .5);
  background: linear-gradient(150deg, rgba(var(--d-accent-rgb), .09), transparent 62%), var(--d-card);
  box-shadow: 0 12px 26px -18px var(--d-glow);
}
.dashboard-shell-host .ov-quick-action:hover > span {
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2));
  box-shadow: 0 6px 14px -6px var(--d-glow);
}
.dashboard-shell-host .ov-quick-action:hover i { color: var(--d-accent); }

/* Étapes de configuration : tuiles numérotées en dégradé d'accent */
.dashboard-shell-host .hero-step .hs-num {
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2));
  box-shadow: 0 4px 10px -4px var(--d-glow);
}
.dashboard-shell-host .hero-step:hover { border-color: rgba(var(--d-accent-rgb), .5); }

/* Cartes de l'accueil : arrondis et bordures harmonisés */
.dashboard-shell-host .ov-checklist-card,
.dashboard-shell-host .ov-home-side-section {
  border: 1px solid var(--d-border);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(255,255,255,.03), transparent 58%), var(--d-card);
}
.dashboard-shell-host .ov-progress-value {
  background: linear-gradient(90deg, var(--d-accent), var(--d-accent2));
}
.dashboard-shell-host .ov-side-heading b { color: var(--d-text); }

/* Mobile : 2 colonnes d'actions rapides, hero compact */
@media (max-width: 700px) {
  .dashboard-shell-host .ov-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .dashboard-shell-host .ov-quick-action { min-height: 62px; }
  .dashboard-shell-host .ov-welcome-panel .ov-intro-copy h2 { font-size: 18px; }
}

/* ============================================================
   🧷 Lignes de réglage façon Discord/DraftBot (v159)
   Chaque réglage : libellé à gauche, contrôle à droite.
   Sur mobile, la ligne se replie en pile lisible.
   ============================================================ */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 13px 2px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.setting-row:last-child { border-bottom: none; padding-bottom: 4px; }
.setting-row > .dash-label {
  /* AUDIT v186 : « flex:1 » (base 0) laissait l'étiquette rétrécir
     jusqu'à 11px dans les lignes étroites → textes invisibles.
     Base « auto » + minimum : l'étiquette garde une taille lisible
     et passe sur 2 lignes si besoin. */
  flex: 1 1 auto; min-width: 100px; margin: 0 !important;
  font-size: 14px; font-weight: 650; color: var(--d-text);
  overflow-wrap: anywhere;
}
/* v245 — min-width: 0 est indispensable. Un élément flex a par défaut
   min-width: auto, c'est-à-dire la largeur de son contenu : il refuse donc de
   rétrécir sous cette taille. Un <select> dont la plus longue option fait
   300 px ne se compressait pas et faisait déborder la ligne. Mesuré à 768 px :
   +57 px de débordement sur le barème de Modération, +43 px sur un champ de
   l'onglet Bot. Sans min-width: 0, flex-shrink ne sert à rien. */
.setting-row > .dash-select, .setting-row > input.dash-input { width: 300px; flex: 0 1 300px; min-width: 0; }
/* Les champs numériques peuvent rétrécir davantage (ils restent utilisables) */
.setting-row > input.dash-input[type="number"] { min-width: 84px; }
.setting-row > textarea.dash-input { flex: 1 1 100%; min-height: 90px; }
.setting-row > label.switch { flex-shrink: 0; }
.setting-row > .dash-roles-multi, .setting-row > .discord-multi-host, .setting-row > .dd-host { flex: 0 1 340px; max-width: 340px; min-width: 0; }
.setting-row > div { flex: 0 1 300px; display: flex; gap: 8px; align-items: center; min-width: 0; }

/* Sélecteur « salons à détailler » (bienvenue/départ) — éditeur multi-lignes.
   Toujours en bloc PLEIN LARGEUR sous son libellé : il ne doit jamais être
   compressé en colonne « libellé → contrôle » (lignes empilées + débordement). */
.dash-channelsmulti {
  display: block; width: 100%; min-width: 0; margin-top: 4px;
}
.cm-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px dashed var(--d-border);
}
.cm-row:last-of-type { border-bottom: none; }
.cm-name {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--d-text);
}
.cm-row > .cm-label {
  flex: 1 1 240px; min-width: 0; height: 38px; padding: 4px 10px;
}
.cm-row > .cm-remove { flex: 0 0 auto; padding: 7px 12px; }
.cm-add-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
}
.cm-add-row > .dd-host, .cm-add-row > select.dash-select {
  flex: 1 1 200px; min-width: 0;
}
.cm-add-row > .dash-btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .cm-row > .cm-label { flex-basis: 100%; }
  .cm-add-row > .dd-host, .cm-add-row > select.dash-select { flex-basis: 100%; }
}

/* v332 — Lives : ajouter un compte, lisible sur mobile */
.lv-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
.lv-add-row > .dash-input,
.lv-add-row > .dd-host,
.lv-add-row > select.dash-select {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 100%;
}
.lv-add-row > .dash-btn { flex: 0 0 auto; }
@media (max-width: 700px) {
  .lv-add-row { flex-direction: column; }
  .lv-add-row > .dash-input,
  .lv-add-row > .dd-host,
  .lv-add-row > select.dash-select,
  .lv-add-row > .dash-btn {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 700px) and (hover: none) and (pointer: coarse), (max-width: 640px) {
  .cm-row { gap: 6px; }
}

/* Pied de carte : actions regroupées à droite */
.card-actions {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding-top: 14px; margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.055);
}
/* v245 — 40 px, comme tout .dash-btn (règle générale ligne ~924).
   À 38 px, ce sélecteur plus spécifique écrasait la hauteur normale et les
   boutons de pied de carte étaient PLUS PETITS que les autres. Or
   layoutSettingRows déplace automatiquement les boutons en fin de carte dans
   .card-actions : 47 boutons du tableau de bord se retrouvaient donc à 38 px,
   sous les 40 px retenus en v244. Mesuré dans Chromium à 360 px. */
.card-actions .dash-btn { min-height: 40px; }

/* Mobile : chaque ligne se replie en pile (libellé puis contrôle) */
@media (max-width: 700px) {
  .setting-row { flex-direction: column; align-items: stretch; gap: 9px; }
  .setting-row > .dash-select, .setting-row > input.dash-input,
  .setting-row > .dash-roles-multi, .setting-row > .discord-multi-host,
  .setting-row > .dd-host, .setting-row > div { width: 100%; flex: 1 1 auto; max-width: none; }
  .card-actions { justify-content: stretch; }
  .card-actions .dash-btn { flex: 1; }
}

/* ============================================================
   🗂️ Grille de sélection de serveurs + hero à bannière (v160)
   ============================================================ */

/* --- Grille de sélection (modale) --- */
.sp-picker { padding: 20px 22px; min-width: 0; }
.sp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sp-head-copy { flex: 1; min-width: 0; }
.sp-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: #f5f7fc; }
.sp-head p { color: var(--d-dim); font-size: 13px; margin-top: 3px; }
.sp-search {
  min-height: 42px; padding: 8px 14px; min-width: 220px; flex: 0 1 260px;
  background: rgba(0,0,0,.3); border: 1px solid var(--d-border); border-radius: 12px;
  color: var(--d-text); font-family: inherit; font-size: 13px; outline: none;
  transition: .15s;
}
.sp-search:focus { border-color: var(--d-accent); box-shadow: 0 0 0 4px rgba(var(--d-accent-rgb), .16); }
.sp-close {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--d-border);
  color: var(--d-dim); font-size: 18px; line-height: 1; transition: .13s;
}
.sp-close:hover { color: #fff; background: rgba(237,66,69,.15); border-color: rgba(237,66,69,.45); }
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.sp-card {
  position: relative; display: block; padding: 0; overflow: hidden;
  border: 1px solid var(--d-border); border-radius: 12px;
  background: var(--d-card); cursor: pointer; text-align: left; font-family: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sp-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--d-accent-rgb), .55);
  box-shadow: 0 16px 32px -20px var(--d-glow);
}
.sp-card.is-current { border-color: rgba(var(--d-accent-rgb), .7); box-shadow: inset 0 0 0 1px rgba(var(--d-accent-rgb), .45); }
.sp-banner {
  display: block; position: relative; height: 56px;
  background: rgba(var(--d-accent-rgb), 0.27);
  background-size: cover; background-position: center;
}
.sp-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; color: rgba(255,255,255,.55); letter-spacing: 1px;
}
.sp-current-tag, .sp-ro {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800;
  backdrop-filter: blur(6px);
}
.sp-current-tag { background: rgba(var(--d-accent-rgb), .9); color: #fff; }
.sp-ro { background: rgba(0,0,0,.55); color: #ffd166; border: 1px solid rgba(255,209,102,.35); }
.sp-body { display: flex; align-items: center; gap: 10px; padding: 4px 12px 12px; }
.sp-ico {
  width: 38px; height: 38px; flex-shrink: 0; margin-top: -22px; position: relative;
  border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2));
  border: 3px solid var(--d-card); color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 8px 18px -10px var(--d-glow);
}
.sp-ico img { width: 100%; height: 100%; object-fit: cover; }
.sp-txt { flex: 1; min-width: 0; }
.sp-txt b {
  display: block; font-size: 14px; font-weight: 750; color: var(--d-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-txt small { display: block; margin-top: 2px; font-size: 12px; color: var(--d-dim); }
.sp-mark {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--d-accent-rgb), .12); color: var(--d-accent);
  font-size: 14px; font-weight: 800; transition: .13s;
}
.sp-card:hover .sp-mark { background: linear-gradient(135deg, var(--d-accent), var(--d-accent2)); color: #fff; }

/* --- Hero de l'accueil avec bannière du serveur --- */
.ov-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 35%;
  opacity: .38; filter: saturate(1.15);
}
.ov-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,15,21,.1) 0%, rgba(14,15,21,.55) 55%, rgba(14,15,21,.92) 100%);
}
.dashboard-shell-host .ov-welcome-panel.has-banner { min-height: 176px; }
.dashboard-shell-host .ov-welcome-panel.has-banner > *:not(.ov-hero-bg) { position: relative; z-index: 1; }
.dashboard-shell-host .ov-welcome-panel.has-banner .ov-intro-copy h2,
.dashboard-shell-host .ov-welcome-panel.has-banner .ov-eyebrow { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.ov-hero-stats {
  grid-column: 1 / -1; position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.ov-hero-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 12px;
  background: rgba(12,13,20,.6); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  font-size: 12px; color: var(--d-text);
}
.ov-hero-chip span { font-size: 14px; }
.ov-hero-chip b { font-weight: 800; }
/* v244 — Taille explicite. Sans elle, le navigateur appliquait le 80 % par
   défaut de <small> sur un parent à 12 px, soit 9,583 px : du texte illisible
   obtenu par accident, pas par choix. */
.ov-hero-chip small { color: var(--d-dim); font-weight: 550; font-size: 11px; }

/* Mobile : une seule colonne de cartes, recherche pleine largeur */
@media (max-width: 700px) {
  .sp-picker { padding: 16px 14px; }
  .sp-head { flex-wrap: wrap; }
  .sp-search { flex: 1 1 100%; min-width: 0; }
  .sp-grid { grid-template-columns: 1fr; }
  .ov-hero-stats { gap: 6px; }
  .ov-hero-chip { padding: 6px 10px; font-size: 12px; }
}

/* ============================================================
   🧱 Embed Builder (v168) — éditeur + aperçu Discord fidèle
   ============================================================ */
.eb-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
.eb-editor-col { display: grid; gap: 16px; }
.eb-preview-col { display: grid; gap: 16px; position: sticky; top: 12px; }
.eb-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.eb-vars-lbl { font-size: 12px; color: var(--d-text-dim); }
.eb-var {
  padding: 3px 8px; border-radius: 4px; font-size: 12px; cursor: default;
  background: rgba(224,122,95,.1); border: 1px solid rgba(224,122,95,.28); color: var(--d-accent);
}
.eb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eb-color-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.eb-color-row input[type=color] { width: 42px; height: 34px; border: 1px solid var(--d-border); border-radius: 8px; background: var(--d-panel2); padding: 3px; cursor: pointer; }
.eb-preset { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; transition: transform .15s; }
.eb-preset:hover { transform: scale(1.18); }
.eb-btn-add { margin-top: 10px; }
.eb-btnrow { display: grid; grid-template-columns: 58px minmax(0,1fr) 110px 42px; gap: 8px; margin-bottom: 8px; align-items: center; }
.eb-btnrow.has-url { grid-template-columns: 58px minmax(0,1fr) 110px 42px; }
.eb-btnrow .eb-b-url { grid-column: 1 / -1; }
.eb-tpl-save { display: flex; gap: 8px; margin-bottom: 12px; }
.eb-tpl-save .dash-input { flex: 1; min-width: 0; }
.eb-tpl-empty { color: var(--d-text-dim); font-size: 13px; padding: 10px 2px; }
.eb-tpl-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--d-border); border-radius: 8px; margin-bottom: 7px; background: var(--d-panel2); }
.eb-tpl-copy b { display: block; font-size: 13px; }
.eb-tpl-copy small { color: var(--d-text-dim); font-size: 11px; }
.eb-tpl-actions { display: flex; gap: 6px; flex-shrink: 0; }
.eb-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.eb-json pre { max-height: 400px; overflow: auto; font-size: 12px; white-space: pre-wrap; word-break: break-all; }

/* --- L'aperçu : reconstitution fidèle d'un message Discord --- */
.eb-discord { background: #313338; border-radius: 8px; padding: 16px; }
.eb-dmsg { display: flex; gap: 12px; }
.eb-dava {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2));
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px;
}
.eb-dbody { flex: 1; min-width: 0; }
.eb-dhead { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.eb-dhead b { color: #f2f3f5; font-size: 14px; }
/* Même logique pour l'étiquette du compositeur d'embeds : 8,5 px (cran de
   0,5 conservé, Discord l'écrit ainsi). */
.eb-dtag { padding: 1.5px 5px; border-radius: 4px; background: #5865F2; color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .4px; }
.eb-dtime { color: #949ba4; font-size: 11px; }
.eb-dcontent { color: #dbdee1; font-size: 14px; line-height: 1.5; margin-top: 2px; word-wrap: break-word; }
.eb-mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 4px; padding: 0 2px; }
.eb-embed {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  background: #2b2d31; border-left: 4px solid #e07a5f; border-radius: 4px;
  padding: 12px 14px; margin-top: 8px; max-width: 520px;
}
.eb-e-main { min-width: 0; }
.eb-e-author { color: #f2f3f5; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.eb-e-title { color: #00a8fc; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.eb-e-desc { color: #dbdee1; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.eb-e-desc code { background: #1e1f22; padding: 1px 4px; border-radius: 4px; font-size: 13px; }
.eb-e-img { width: 100%; max-width: 420px; border-radius: 4px; margin-top: 10px; display: block; }
.eb-e-thumb { width: 78px; height: 78px; border-radius: 4px; object-fit: cover; }
.eb-e-footer { color: #949ba4; font-size: 12px; margin-top: 10px; }
.eb-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.eb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 4px; font-size: 13px; font-weight: 500; color: #fff;
}
.eb-btn.s1 { background: #5865F2; }
.eb-btn.s2 { background: #4e5058; }
.eb-btn.s3 { background: #57F287; color: #0d3f21; }
.eb-btn.s4 { background: #ED4245; }
.eb-btn.s5 { background: #4e5058; }

@media (max-width: 980px) {
  .eb-wrap { grid-template-columns: 1fr; }
  .eb-preview-col { position: static; order: -1; }
  .eb-grid2 { grid-template-columns: 1fr; }
  .eb-btnrow { grid-template-columns: 52px minmax(0,1fr) 100px 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   ▼ v170 — Indicateur « la liste continue en dessous »
   Retour utilisateur : les listes défilables (sidebar, tiroir modules)
   semblaient coupées net → les modules du bas paraissaient « cachés ».
   Ce bouton colle au bas de la zone visible et y amène d'un toucher.
   ══════════════════════════════════════════════════════════════════ */
.scroll-hint {
  position: sticky; bottom: 0; left: 0; right: 0; z-index: 5;
  display: none; align-items: center; justify-content: center;
  width: 100%; margin: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  border: 0; border-radius: 0;
  color: #f2f3f5;
  background: rgba(20,21,31, 0.93);
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .4px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.scroll-hint.on { display: flex; }
.scroll-hint:hover { color: #fff; }
html.hx-light .scroll-hint { color: #23252d; background: rgba(242,243,245, 0.96); }

/* ══════════════════════════════════════════════════════════════════
   ☀️ v170 — Mode clair : plus AUCUN texte invisible
   Le look « Discord » du dashboard force des fonds sombres ; en mode
   clair, certains textes héritaient de l'encre sombre du thème (→
   sombre sur sombre) ou gardaient leur blanc codé en dur sur des
   fonds devenus clairs (→ blanc sur blanc). Logique :
   fond sombre conservé → texte clair ; fond clair → texte sombre.
   ══════════════════════════════════════════════════════════════════ */

/* 1) Barre publique du haut : fond clair → textes sombres */
html.hx-light .navbar { color: #23252d; }
html.hx-light .navbar .logo-row,
html.hx-light .navbar a,
html.hx-light .navbar .user-pill,
html.hx-light .navbar .btn-ghost { color: #23252d; }
html.hx-light .navbar .nl-lbl,
html.hx-light .navbar .user-pill small { color: #5c636b; }

/* 2) Sidebar + bandeau mobile : fonds clairs → textes sombres */
html.hx-light .dashboard-shell-host .dash-side-brand-copy b { color: #23252d; }
html.hx-light .dashboard-shell-host .dash-side-brand-copy span { color: #5c636b; }
html.hx-light .dashboard-shell-host .dash-mobile-brand { color: #23252d; }

/* 3) Boîtes « look Discord » qui RESTENT sombres → texte clair dedans
      (uniquement les boîtes réellement sombres : héros, règles, politiques) */
html.hx-light .dashboard-shell-host .am-control-hero,
html.hx-light .dashboard-shell-host .am-mode-row,
html.hx-light .dashboard-shell-host .am-policy-row,
html.hx-light .dashboard-shell-host .am-warning-panel,
html.hx-light .dashboard-shell-host .am-blacklist-config,
html.hx-light .dashboard-shell-host .adv-types-panel,
html.hx-light .dashboard-shell-host .adv-preview-shell,
html.hx-light .dashboard-shell-host .ca-preview-wrap,
html.hx-light .dashboard-shell-host .am-rule-card,
html.hx-light .dashboard-shell-host .adv-type-card { color: #dbdee1; }
html.hx-light .dashboard-shell-host .am-control-hero b,
html.hx-light .dashboard-shell-host .am-mode-row b,
html.hx-light .dashboard-shell-host .am-policy-row b,
html.hx-light .dashboard-shell-host .am-warning-panel b,
html.hx-light .dashboard-shell-host .am-blacklist-config b,
html.hx-light .dashboard-shell-host .am-rule-card b,
html.hx-light .dashboard-shell-host .adv-type-card b,
html.hx-light .dashboard-shell-host .adv-panel-heading b { color: #f2f3f5; }
html.hx-light .dashboard-shell-host .am-control-hero small,
html.hx-light .dashboard-shell-host .am-mode-row small,
html.hx-light .dashboard-shell-host .am-policy-row small,
html.hx-light .dashboard-shell-host .am-warning-panel small,
html.hx-light .dashboard-shell-host .am-blacklist-config small,
html.hx-light .dashboard-shell-host .am-rule-card small,
html.hx-light .dashboard-shell-host .adv-type-card small { color: #b5bac1; }
html.hx-light .dashboard-shell-host .am-rule-icon { color: #dbdee1; }
html.hx-light .dashboard-shell-host .am-main-toggle { color: #dbdee1; }
/* l'interrupteur « natif » vit sur un héros clair → encre sombre, déjà OK */

/* 4) Chips bleu nuit (jours, choix multiples) : fond gardé → texte clair */
html.hx-light .dashboard-shell-host .dash-filter,
html.hx-light .dashboard-shell-host .am-choice,
html.hx-light .dashboard-shell-host .ca-choice,
html.hx-light .dashboard-shell-host .discord-multi-choice { color: #dbdee1; }
html.hx-light .dashboard-shell-host .dash-filter b,
html.hx-light .dashboard-shell-host .am-choice b,
html.hx-light .dashboard-shell-host .ca-choice b { color: #f2f3f5; }
html.hx-light .dashboard-shell-host .ca-mark { color: #f2f3f5; background: rgba(255,255,255,.05) !important; border-color: #4f545c !important; }

/* 5) Zones devenues claires → titres, valeurs et libellés sombres */
html.hx-light .dashboard-shell-host .dash-stat .val { color: #20283a !important; background: none !important; -webkit-text-fill-color: currentColor; }
html.hx-light .dashboard-shell-host .dash-label { color: #5c636b; }
html.hx-light .dashboard-shell-host .ov-intro-copy h2 { color: #1c1e26; }
html.hx-light .dashboard-shell-host .ov-intro-copy p { color: #5c636b; }
html.hx-light .dashboard-shell-host .ov-quick-label { color: #5c636b; }
html.hx-light .dashboard-shell-host .ov-section-heading b { color: #1c1e26; }
html.hx-light .dashboard-shell-host .ov-section-heading span { color: #5c636b; }
html.hx-light .dashboard-shell-host .ov-side-heading { color: #5c636b; }
html.hx-light .dashboard-shell-host .ov-top-member { color: #1c1e26; border-bottom-color: #c7c9cc; }
html.hx-light .dashboard-shell-host .ov-top-member small { color: #5c636b; }
html.hx-light .dashboard-shell-host .ov-config-copy small { color: #5c636b; }
html.hx-light .dashboard-shell-host .ov-checklist-card .ov-section-heading { border-bottom-color: #c7c9cc; }

/* 6) Aperçu Discord (.dc-preview) : c'est une maquette de Discord → on la
      garde sur fond sombre dans les deux thèmes (au lieu d'un filtre
      approximatif qui inversait aussi les textes dans les encarts sombres) */
html.hx-light .dashboard-shell-host .dc-preview { background: #313338 !important; border-color: #1e1f22; }
html.hx-light .dc-preview [style*="color:#dbdee1"],
html.hx-light .dc-preview [style*="color:#f2f3f5"],
html.hx-light .dc-preview [style*="color:#b5bac1"] { filter: none; }

/* ══════════════════════════════════════════════════════════════
   ☀️ v171 — Mode clair sur ordinateur : dernière passe
   Le thème suit le réglage du système ; sur un ordinateur en
   apparence claire, il restait des textes blancs sur fond clair
   (barre du haut, sidebar, badges, boutons). Tout passe en encre
   sombre — sauf ce qui vit sur les surfaces restées sombres.
   ══════════════════════════════════════════════════════════════ */

/* Barre publique : pseudo du compte connecté */
html.hx-light .navbar .user-pill span { color: #23252d; }

/* Sidebar : carte du serveur, icônes des modules, pied de colonne */
html.hx-light .dashboard-shell-host .dash-server-card .srv-txt b { color: #23252d; }
html.hx-light .dashboard-shell-host .dash-server-card .srv-txt small { color: #5c636b; }
html.hx-light .dashboard-shell-host .dash-side-item .ico { color: #5c636b; }
html.hx-light .dashboard-shell-host .dash-side-foot { color: #5c636b; }
html.hx-light .dashboard-shell-host .dash-side-foot b { color: #23252d; }

/* Topbar : puce du bot */
html.hx-light .dashboard-shell-host .dash-bot-chip .chip-txt b { color: #23252d; }
html.hx-light .dashboard-shell-host .dash-bot-chip .chip-txt small { color: #5c636b; }

/* Badges de statut : les verts/jaunes pâles deviennent lisibles */
html.hx-light .dashboard-shell-host .dash-badge.ok { color: #1a7f42; border-color: rgba(26,127,66,.4); background: rgba(26,127,66,.09); }
html.hx-light .dashboard-shell-host .dash-badge.warn { color: #9a6700; border-color: rgba(154,103,0,.4); background: rgba(154,103,0,.09); }
html.hx-light .dashboard-shell-host .dash-badge.bad { color: #c03537; border-color: rgba(192,53,55,.4); background: rgba(192,53,55,.09); }

/* Tickets avancés : le titre d'aperçu vit sur une surface sombre */
html.hx-light .dashboard-shell-host .adv-preview-title { color: #f2f3f5; }

/* Annonces personnalisées : boutons <> {} 🔗 de la barre d'outils (fond clair) */
html.hx-light .dashboard-shell-host .ca-mark { color: #23252d; background: #e3e5e8; border-color: #c7c9cc; }

/* Embed Builder : boutons d'action principaux */
html.hx-light .dashboard-shell-host .btn-primary { color: #fff !important; background: #c85f49 !important; border-color: #c85f49 !important; }
html.hx-light .dashboard-shell-host .btn-primary:hover { background: #a94838 !important; border-color: #a94838 !important; }

/* Modération : onglets de filtre */
html.hx-light .dashboard-shell-host .am-filter { color: #5c636b; }
html.hx-light .dashboard-shell-host .am-filter.active { color: #a94838; background: rgba(200,95,73,.14); border-color: rgba(200,95,73,.4); }

/* Vue d'ensemble : pastille de santé du bot */
html.hx-light .dashboard-shell-host .ov-intro-health b { color: #1a7f42; }
/* Annonces personnalisées : libellé d'aperçu sur surface sombre (idem v171) */
html.hx-light .dashboard-shell-host .ca-preview-label { color: #f2f3f5; }
html.hx-light .dashboard-shell-host .ca-preview-label span { color: #b5bac1; }

/* ════════════════════════════════════════════════════════════════
   🔧 AUDIT UI v186 — correctifs de débordements (mesurés au pixel)
   Audit programmatique : 375px + 1440px × thèmes clair/sombre,
   18 modules + picker + grille de serveurs.
   ════════════════════════════════════════════════════════════════ */

/* 1️⃣ Scroll horizontal de 2px sur mobile : à ≤520px le contenu n'a
   que 10px de marge interne mais d'anciens blocs imposent encore
   -12px à la topbar → elle dépasse de 2px de chaque côté.
   Ce bloc, placé en FIN de fichier, gagne la cascade. */
@media (max-width: 520px) {
  .dash-main,
  .dashboard-shell-host .dash-main { padding-left: 10px; padding-right: 10px; }
  .dash-topbar,
  .dashboard-shell-host .dash-topbar {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* 2️⃣ Cloche 🔔 rognée : .bell-badge { display:inline-flex } écrasait
   l'attribut hidden → le badge vide prenait de la place. */
.bell-badge[hidden] { display: none !important; }

/* 3️⃣ Pied de carte (.card-actions) dans les cartes en grille : il
   atterrissait dans la colonne de l'icône (36px) → bouton « Ouvrir → »
   écrasé. Il doit traverser toute la carte, et un bouton ne rétrécit
   jamais sous la taille de son texte. */
.dash-card > .card-actions { grid-column: 1 / -1; }
.card-actions .dash-btn { flex-shrink: 0; white-space: nowrap; max-width: 100%; }

/* 4️⃣ Grille « avertissements » : 3 colonnes trop étroites entre 521
   et 1100px (étiquettes écrasées) → 2 colonnes, puis 1 sur mobile. */
@media (max-width: 1100px) and (min-width: 521px) {
  .am-warning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 5️⃣ Boutons d'action sur mobile : « flex:1 » (base 0) donnait à chaque
   bouton une part égale de la ligne, plus étroite que son texte.
   Base « auto » : chaque bouton garde au moins la largeur de son
   libellé, les autres passent à la ligne (flex-wrap). */
@media (max-width: 700px) {
  .card-actions .dash-btn { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════
   🔧 AUDIT UI v186 (suite) — MODE CLAIR : remap complet de la
   couche « Discord » (v9-v13). Cette couche codait ses couleurs en
   dur : fonds #40444b/#2b2d31, textes #b5bac1/#f2f3f5. Résultat en
   mode clair (celui de l'ordinateur de l'utilisateur) : grandes
   zones sombres + ~194 textes illisibles (ratio 1,8).
   ════════════════════════════════════════════════════════════════ */

/* 6️⃣ Variables du shell, version claire (priorité sur :root sombre) */
html.hx-light .dashboard-shell-host,
html.hx-light body:has(.dashboard-shell-host) {
  --d-bg: #f2f3f8; --d-side: #ffffff; --d-card: #ffffff; --d-card2: #f0f1f7;
  --d-border: #dfe2ec; --d-border-soft: #c8ccd6; --d-border-strong: #b6bcc7;
  --d-text: #1c1e26; --d-dim: #5d6375; --d-green: #178a43;
  --d-glow: rgba(224, 122, 95, .18);
}

/* 7️⃣ Textes « clairs sur sombre » → foncés sur clair */
html.hx-light body:has(.dashboard-shell-host) .navbar .logo-row,
html.hx-light .dashboard-shell-host .dash-side-brand-copy b,
html.hx-light .dashboard-shell-host .dash-crumb .crumb-txt b,
html.hx-light .dashboard-shell-host .dash-bot-chip .chip-txt b,
html.hx-light .dashboard-shell-host .dash-card[data-dash-card] .card-heading h3,
html.hx-light .dashboard-shell-host .ov-intro-copy h2,
html.hx-light .dashboard-shell-host .dd-trigger,
html.hx-light .dashboard-shell-host .dash-select option { color: #1c1e26; }
html.hx-light .dashboard-shell-host .module-header-copy h1 { color: #1c1e26 !important; -webkit-text-fill-color: #1c1e26 !important; }
html.hx-light .dashboard-shell-host .dash-stat .val { color: #1c1e26 !important; -webkit-text-fill-color: #1c1e26 !important; }
html.hx-light .dashboard-shell-host .dash-select option { background: #ffffff; }

/* 8️⃣ Textes gris pâles (#b5bac1 → gris lisible) */
html.hx-light body:has(.dashboard-shell-host) .navbar .user-pill,
html.hx-light .dashboard-shell-host .dash-side-brand-copy span,
html.hx-light .dashboard-shell-host .dash-side-item,
html.hx-light .dashboard-shell-host .dash-side-item svg,
html.hx-light .dashboard-shell-host .dash-crumb .crumb-txt span,
html.hx-light .dashboard-shell-host .dash-iconbtn,
html.hx-light .dashboard-shell-host .module-back,
html.hx-light .dashboard-shell-host .module-status,
html.hx-light .dashboard-shell-host .module-header-copy .sub,
html.hx-light .dashboard-shell-host .dash-card[data-dash-card] .card-heading .desc,
html.hx-light .dashboard-shell-host .dash-card[data-dash-card] .dash-label,
html.hx-light .dashboard-shell-host .dash-stat .lbl,
html.hx-light .dashboard-shell-host .ov-intro-copy p,
html.hx-light .dashboard-shell-host .ov-quick-label,
html.hx-light .dashboard-shell-host .dash-table th,
html.hx-light .dashboard-shell-host .dash-badge { color: #5d6375; }

/* 9️⃣ Textes gris moyens (#949ba4 → plus foncés) et icônes */
html.hx-light .dashboard-shell-host .dash-side-section,
html.hx-light .dashboard-shell-host .dash-side-foot,
html.hx-light .dashboard-shell-host .dash-input::placeholder { color: #6a7080; }
html.hx-light .dashboard-shell-host .dash-side-item > svg,
html.hx-light .dashboard-shell-host .dash-side-item > i { color: #2e3338; }

/* Surfaces sombres → claires */
html.hx-light .dashboard-shell-host .am-control-hero,
html.hx-light .dashboard-shell-host .am-mode-row,
html.hx-light .dashboard-shell-host .am-policy-row,
html.hx-light .dashboard-shell-host .am-warning-panel,
html.hx-light .dashboard-shell-host .am-blacklist-config,
html.hx-light .dashboard-shell-host .ov-config-row .check-item,
html.hx-light .dashboard-shell-host .adv-types-panel,
html.hx-light .dashboard-shell-host .adv-preview-shell,
html.hx-light .dashboard-shell-host .dash-badge { background: #eef0f5; }
html.hx-light .dashboard-shell-host .adv-type-card,
html.hx-light .dashboard-shell-host .am-rule-card,
html.hx-light .dashboard-shell-host .am-shield-icon,
html.hx-light .dashboard-shell-host .am-rule-icon,
html.hx-light .dashboard-shell-host .ov-module-icon { background: #f7f8fb; }
html.hx-light .dashboard-shell-host .adv-discord-preview { background: radial-gradient(240px 100px at 100% 0%, rgba(var(--d-accent-rgb), .1), transparent 70%), #313338; color: #dbdee1; }
/* ℹ️ Les aperçus « comme sur Discord » (.dc-preview, .adv-discord-preview,
   .ca-discord-preview, .eb-discord) restent sombres dans les DEUX thèmes :
   ce sont des maquettes de messages Discord (textes clairs dessus = lisibles). */
html.hx-light .dashboard-shell-host .ov-hero-chip { background: rgba(255, 255, 255, .78); color: #1c1e26; }
html.hx-light .dashboard-shell-host .dash-side-brand-avatar,
html.hx-light .dashboard-shell-host .logo { background: #ffffff; border-color: #dfe2ec; color: #1c1e26; }
html.hx-light .dashboard-shell-host .dash-table th { background: #f0f1f7; }
html.hx-light .dashboard-shell-host .dash-iconbtn { background: #ffffff; border-color: #c8ccd6; }
html.hx-light .dashboard-shell-host .ov-quick-action { background: #ffffff; border-color: #dfe2ec; color: #1c1e26; }

/* 1️⃣1️⃣ Survol et boutons : plus de blanc-sur-sombre */
html.hx-light .dashboard-shell-host .dash-side-item:hover,
html.hx-light .dashboard-shell-host .dash-iconbtn:hover,
html.hx-light .dashboard-shell-host .module-back:hover,
html.hx-light .dashboard-shell-host .dash-btn:hover,
html.hx-light body:has(.dashboard-shell-host) .navbar .btn:hover { color: #1c1e26; background: #e3e6ee; border-color: #b6bcc7; }
html.hx-light .dashboard-shell-host .dash-btn { color: #2e3338; }
html.hx-light .dashboard-shell-host .dash-btn-primary { color: #ffffff !important; }

/* 1️⃣2️⃣ Pastilles « en ligne » et bandeau jaune : teintes lisibles en clair */
html.hx-light .dashboard-shell-host .dash-badge.ok,
html.hx-light .dashboard-shell-host .module-status.is-online,
html.hx-light .dashboard-shell-host .dash-bot-chip .chip-txt .on { color: #178a43; }
html.hx-light .dashboard-shell-host .module-status.is-online { border-color: rgba(23, 138, 67, .35); background: rgba(23, 138, 67, .08); }
html.hx-light .dashboard-shell-host .dash-badge.ok { border-color: rgba(23, 138, 67, .4); background: rgba(23, 138, 67, .08); }
html.hx-light .dashboard-shell-host .am-panel-title > span,
html.hx-light .dashboard-shell-host .am-result.observe,
html.hx-light .dashboard-shell-host .am-result.warning { color: #8a6d00; border-color: rgba(180, 140, 10, .35); background: rgba(254, 231, 92, .22); }

/* 1️⃣3️⃣ Topbar mobile et sidebar : fonds sombres résiduels */
html.hx-light .dashboard-shell-host .dash-topbar { background: #ffffff; border-bottom-color: #dfe2ec; }
html.hx-light .dashboard-shell-host .dash-side { background: #ffffff; }
html.hx-light .dashboard-shell-host .slider { background: #c8ccd6; }
html.hx-light .dashboard-shell-host .slider::-webkit-slider-thumb { background: #ffffff; border-color: #b6bcc7; }

/* 1️⃣4️⃣ AUDIT v186 — cartes « types de tickets » (adv-type-card)
   À 1024px les cellules font 151px : le label (min-width 100px)
   écrasait le sélecteur custom à 27px, et la ligne d'en-tête
   (emoji + nom + couleur + poubelle) débordait de 11px. */
.dashboard-shell-host .adv-type-head { flex-wrap: wrap; }
.dashboard-shell-host .adv-type-card .setting-row > .dash-label { min-width: 0; }
.dashboard-shell-host .adv-type-card .setting-row > .dd-host { min-width: 0; max-width: 100%; }

/* 1️⃣5️⃣ AUDIT v186 — Auto-Mod à 320px : la grille .am-native-grid
   laissait son unique colonne grossir à la taille du sélecteur
   (325px) au lieu de rester à la largeur de l'écran. minmax(0,1fr)
   = colonne jamais plus large que son conteneur. */
@media (max-width: 520px) {
  .dashboard-shell-host .am-native-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .dashboard-shell-host .am-native-grid > * { min-width: 0; max-width: 100%; }
  .dashboard-shell-host .setting-row > .dd-host { min-width: 0; max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   🔧 AUDIT UI v186 (fin) — MODE CLAIR, passe 2. La couche sédimentaire
   (l.3300-3840) force des fonds sombres avec !important : les overrides
   simples perdaient la cascade. Contre-attaque : !important + sélecteur
   plus précis + fin de fichier = victoire garantie.
   ════════════════════════════════════════════════════════════════ */

/* 1️⃣6️⃣ Surfaces #40444b/#36393f → gris clair */
html.hx-light .dashboard-shell-host .ov-intro,
html.hx-light .dashboard-shell-host .dash-hero,
html.hx-light .dashboard-shell-host .ov-module-card,
html.hx-light .dashboard-shell-host .ov-checklist-card,
html.hx-light .dashboard-shell-host .ov-feed-card,
html.hx-light .dashboard-shell-host .ov-brief-card,
html.hx-light .dashboard-shell-host .dash-stat,
html.hx-light .dashboard-shell-host .am-control-hero,
html.hx-light .dashboard-shell-host .am-mode-row,
html.hx-light .dashboard-shell-host .am-policy-row,
html.hx-light .dashboard-shell-host .am-warning-panel,
html.hx-light .dashboard-shell-host .am-blacklist-config,
html.hx-light .dashboard-shell-host .am-native-card,
html.hx-light .dashboard-shell-host .am-control-card,
html.hx-light .dashboard-shell-host .am-exceptions-card,
html.hx-light .dashboard-shell-host .am-summary-card,
html.hx-light .dashboard-shell-host .am-simulator-card,
html.hx-light .dashboard-shell-host .custom-announcement-card,
html.hx-light .dashboard-shell-host .adv-builder-card,
html.hx-light .dashboard-shell-host .adv-types-panel,
html.hx-light .dashboard-shell-host .adv-preview-shell,
html.hx-light .dashboard-shell-host .ca-preview-wrap,
html.hx-light .dashboard-shell-host .ov-config-row,
html.hx-light .dashboard-shell-host .ov-home-side-section,
html.hx-light .dashboard-shell-host .ov-config-empty {
  background: #eef0f5 !important;
  border-color: #dfe2ec !important;
  box-shadow: 0 6px 18px -16px rgba(35, 40, 80, .25) !important;
}

/* 1️⃣7️⃣ Surfaces #2b2d31 → blanc cassé */
html.hx-light .dashboard-shell-host .am-rule-card,
html.hx-light .dashboard-shell-host .adv-type-card,
html.hx-light .dashboard-shell-host .ov-module-icon,
html.hx-light .dashboard-shell-host .am-shield-icon,
html.hx-light .dashboard-shell-host .am-rule-icon {
  background: #f7f8fb !important;
  border-color: #dfe2ec !important;
  box-shadow: none !important;
}
html.hx-light .dashboard-shell-host .am-shield-icon,
html.hx-light .dashboard-shell-host .am-rule-icon { color: #2e3338; }
html.hx-light .dashboard-shell-host .am-blacklist-preview-icon { background: rgba(240, 108, 117, .12) !important; color: #b3424d; }

/* 1️⃣8️⃣ Petits éléments sombres résiduels */
html.hx-light .dashboard-shell-host .crumb-ico { background: #eef0f5 !important; }
html.hx-light .dashboard-shell-host .module-status { background: rgba(23, 138, 67, .08) !important; }
html.hx-light .dashboard-shell-host .ov-module-card > .dash-btn { background: #ffffff !important; color: #2e3338 !important; border-color: #c8ccd6 !important; }
html.hx-light .dashboard-shell-host .ov-progress-track { background: #dfe2ec !important; }
html.hx-light .dashboard-shell-host .am-native-toggle i,
html.hx-light .dashboard-shell-host .switch .slider { background: #c8ccd6 !important; border-color: #b6bcc7 !important; box-shadow: none !important; }
html.hx-light .dashboard-shell-host .dash-filter,
html.hx-light .dashboard-shell-host .am-choice,
html.hx-light .dashboard-shell-host .ca-choice,
html.hx-light .dashboard-shell-host .discord-multi-choice { background: #ffffff !important; border-color: #c8ccd6 !important; }
html.hx-light .dashboard-shell-host .dash-filter,
html.hx-light .dashboard-shell-host .am-choice,
html.hx-light .dashboard-shell-host .ca-choice { color: #2e3338; }
html.hx-light .dashboard-shell-host .dash-mobile-server-item { background: #ffffff !important; color: #1c1e26 !important; }
html.hx-light .dashboard-shell-host .ov-server-avatar { background: #ffffff; }
html.hx-light .dashboard-shell-host .adv-count { color: #7a4a3a; }
html.hx-light .dashboard-shell-host .ov-quick-action small,
html.hx-light .dashboard-shell-host .ov-quick-action span { color: #5d6375; }
html.hx-light .dashboard-shell-host .ov-feed-card small,
html.hx-light .dashboard-shell-host .ov-feed-card span,
html.hx-light .dashboard-shell-host .ov-brief-card small,
html.hx-light .dashboard-shell-host .ov-brief-card span,
html.hx-light .dashboard-shell-host .ov-feed-empty,
html.hx-light .dashboard-shell-host .ov-home-side-section small,
html.hx-light .dashboard-shell-host .ov-home-side-section span { color: #5d6375; }
html.hx-light .dashboard-shell-host .ov-intro-copy b { color: #157347; }
html.hx-light .dashboard-shell-host .ov-intro-copy small { color: #5d6375; }

/* 1️⃣9️⃣ Textes internes des panneaux Auto-Mod / tickets */
html.hx-light .dashboard-shell-host .am-rule-card b,
html.hx-light .dashboard-shell-host .am-blacklist-config b,
html.hx-light .dashboard-shell-host .am-warning-panel b,
html.hx-light .dashboard-shell-host .am-policy-row b,
html.hx-light .dashboard-shell-host .am-mode-row b,
html.hx-light .dashboard-shell-host .am-control-hero b { color: #1c1e26; }
html.hx-light .dashboard-shell-host .am-rule-card small,
html.hx-light .dashboard-shell-host .am-blacklist-config small,
html.hx-light .dashboard-shell-host .am-warning-panel small,
html.hx-light .dashboard-shell-host .am-policy-row small,
html.hx-light .dashboard-shell-host .am-mode-row small,
html.hx-light .dashboard-shell-host .am-control-hero small { color: #5d6375; }
html.hx-light .dashboard-shell-host .am-rule-label,
html.hx-light .dashboard-shell-host .am-blacklist-config label,
html.hx-light .dashboard-shell-host .am-warning-panel label { color: #5d6375; }
html.hx-light .dashboard-shell-host .dd-add-btn { background: #ffffff !important; color: #178a43 !important; }
html.hx-light .dashboard-shell-host .am-blacklist-preview b { color: #5d6375; }
html.hx-light .dashboard-shell-host .am-filter { color: #8f3d2c; }
html.hx-light .dashboard-shell-host .adv-question-count { color: #4752c4; }

/* 2️⃣0️⃣ AUDIT v186 — très petits écrans (≤360px) : les 4 puces
   d'action rapide de l'accueil (« Configurer », « Personnaliser »…)
   étaient 3px trop larges → padding et police resserrés. */
@media (max-width: 360px) {
  .dashboard-shell-host .ov-quick-action { padding: 7px 7px; gap: 6px; font-size: 12px; }
  .dashboard-shell-host .ov-quick-actions { padding: 7px; gap: 6px; }
}

/* 2️⃣1️⃣ AUDIT v186 — MODE CLAIR, passe 3 : les textes internes des
   surfaces fraîchement éclaircies (titres #f2f3f5, petites lignes
   #b5bac1) deviennent foncés, une fois pour toutes. */
html.hx-light .dashboard-shell-host :is(.ov-intro, .dash-hero, .ov-module-card, .ov-checklist-card, .ov-feed-card, .ov-brief-card, .dash-stat, .am-control-hero, .am-mode-row, .am-policy-row, .am-warning-panel, .am-blacklist-config, .am-native-card, .am-control-card, .am-exceptions-card, .am-summary-card, .am-simulator-card, .custom-announcement-card, .adv-builder-card, .adv-types-panel, .adv-preview-shell, .ca-preview-wrap, .ov-config-row, .ov-home-side-section, .ov-config-empty, .am-rule-card, .adv-type-card) :is(h1, h2, h3, h4, b, strong) { color: #1c1e26; }
html.hx-light .dashboard-shell-host :is(.ov-intro, .dash-hero, .ov-module-card, .ov-checklist-card, .ov-feed-card, .ov-brief-card, .dash-stat, .am-control-hero, .am-mode-row, .am-policy-row, .am-warning-panel, .am-blacklist-config, .am-native-card, .am-control-card, .am-exceptions-card, .am-summary-card, .am-simulator-card, .custom-announcement-card, .adv-builder-card, .adv-types-panel, .adv-preview-shell, .ca-preview-wrap, .ov-config-row, .ov-home-side-section, .ov-config-empty, .am-rule-card, .adv-type-card) :is(small, label, span) { color: #5d6375; }

/* …sauf les maquettes Discord, qui restent sombres (textes hérités clairs). */
html.hx-light .dashboard-shell-host :is(.dc-preview, .adv-discord-preview, .ca-discord-preview, .eb-discord) { color: #dbdee1; }
html.hx-light .dashboard-shell-host :is(.dc-preview, .adv-discord-preview, .ca-discord-preview, .eb-discord) :is(h1, h2, h3, h4, b, strong, small, span, label, p) { color: inherit; }
html.hx-light .dashboard-shell-host .adv-discord-title { color: #f2f3f5; }

/* Couleurs d'accent ré-affirmées APRÈS le passage générique. */
html.hx-light .dashboard-shell-host .dash-badge.ok,
html.hx-light .dashboard-shell-host .module-status.is-online,
html.hx-light .dashboard-shell-host .dash-bot-chip .chip-txt .on { color: #178a43; }
html.hx-light .dashboard-shell-host .am-panel-title > span,
html.hx-light .dashboard-shell-host .am-result.observe,
html.hx-light .dashboard-shell-host .am-result.warning { color: #8a6d00; border-color: rgba(180, 140, 10, .35); background: rgba(254, 231, 92, .22); }
html.hx-light .dashboard-shell-host .adv-types-panel .adv-type-number { color: #4752c4; }
html.hx-light .dashboard-shell-host .dash-btn-primary { color: #ffffff !important; }
html.hx-light .dashboard-shell-host .ov-eyebrow { color: #c95b49; }

/* 2️⃣2️⃣ AUDIT v186 — 2 derniers textes pâles en mode clair :
   le titre « 👀 Aperçu Discord » (couleur héritée du shell sombre)
   et la boîte « Aucun membre blacklisté ». */
html.hx-light .dashboard-shell-host .adv-preview-shell,
html.hx-light .dashboard-shell-host .adv-preview-title { color: #1c1e26; }
html.hx-light .dashboard-shell-host .adv-preview-title span { color: #178a43; }
html.hx-light .dashboard-shell-host .ca-preview-label span { color: #178a43; }
html.hx-light .dashboard-shell-host .am-blacklist-empty b { color: #1c1e26; }
html.hx-light .dashboard-shell-host .am-blacklist-empty small { color: #5d6375; }

/* 2️⃣3️⃣ AUDIT v187 — neutralise l'ANCIENNE passe claire (v170, l.4650-4760)
   qui gardait sombres des boîtes que v186 a éclaircies, et mettait des
   textes CLAIRS sur les puces (devenues blanches au correctif 18) :
   « Lundi…Dimanche », filtres logs « 🎫 Tickets… », « <> », aperçu annonces. */
html.hx-light .dashboard-shell-host .dash-filter,
html.hx-light .dashboard-shell-host .am-choice,
html.hx-light .dashboard-shell-host .ca-choice,
html.hx-light .dashboard-shell-host .discord-multi-choice { color: #2e3338; }
html.hx-light .dashboard-shell-host .dash-filter b,
html.hx-light .dashboard-shell-host .am-choice b,
html.hx-light .dashboard-shell-host .ca-choice b { color: #1c1e26; }
html.hx-light .dashboard-shell-host .dash-filter small,
html.hx-light .dashboard-shell-host .am-choice small,
html.hx-light .dashboard-shell-host .ca-choice small { color: #5d6375; }
html.hx-light .dashboard-shell-host .ca-mark { color: #1c1e26; background: #eef0f5 !important; border-color: #c8ccd6 !important; }
html.hx-light .dashboard-shell-host .ca-preview-label { color: #1c1e26; }
html.hx-light .dashboard-shell-host .am-main-toggle { color: #1c1e26; }

/* Conteneurs éclaircies : la couleur de base héritée redevient foncée
   (l'ancienne passe y laissait #dbdee1 pour des boîtes alors sombres). */
html.hx-light .dashboard-shell-host :is(.am-control-hero, .am-mode-row, .am-policy-row, .am-warning-panel, .am-blacklist-config, .adv-types-panel, .adv-preview-shell, .ca-preview-wrap, .am-rule-card, .adv-type-card) { color: #5d6375; }

/* ════════════════════════════════════════════════════════════════
   🔧 AUDIT v187 — passes E (menus déroulants OUVERTS), G (tiroir
   « Plus »), I (contenu extrême) de l'audit étendu audit3.js.
   ════════════════════════════════════════════════════════════════ */

/* 2️⃣4️⃣ Panneaux des menus déroulants : ils restaient SOMbres (#232637)
   en mode clair avec, en plus, des textes foncés hérités des cartes
   éclaircies → illisibles. Version claire complète. */
html.hx-light .dd-panel {
  background: #ffffff; border-color: #c8ccd6;
  box-shadow: 0 18px 50px -12px rgba(35, 40, 80, .25), 0 2px 8px rgba(35, 40, 80, .12);
}
html.hx-light .dd-panel .dd-search { border-bottom-color: #e3e6ee; }
html.hx-light .dd-panel .dd-search input { background: #eef0f5; border-color: #c8ccd6; color: #1c1e26; }
html.hx-light .dd-panel .dd-search input:focus { background: #ffffff; }
html.hx-light .dd-panel .dd-search input::placeholder { color: #6a7080; }
html.hx-light .dd-panel .dd-opt-ico { background: rgba(0, 0, 0, .05); }
html.hx-light .dd-panel .dd-empty { color: #5d6375; }
html.hx-light .dd-panel .dd-add-btn { background: transparent; }

/* 2️⃣5️⃣ Tiroir « Plus » (mobile) : même traitement — fond blanc,
   textes foncés, rails et pied clairs. */
html.hx-light .dash-mobile-modules-drawer { background: #ffffff; color: #1c1e26; border-right-color: #dfe2ec; box-shadow: 12px 0 28px rgba(35, 40, 80, .18); }
html.hx-light .dash-mobile-drawer-head { background: #f0f1f7; border-bottom-color: #dfe2ec; }
html.hx-light .dash-mobile-site-links button { color: #5d6375; border-bottom-color: rgba(190, 196, 210, .4); }
html.hx-light .dash-mobile-site-links button:hover { color: #1c1e26; background: #e3e6ee; }
html.hx-light .dash-mobile-drawer-account { background: #f0f1f7; border-top-color: #dfe2ec; }
html.hx-light .dash-mobile-drawer-account small { color: #5d6375; }
html.hx-light .dash-mobile-server-rail { background: #f0f1f7; border-right-color: #dfe2ec; }
html.hx-light .dash-mobile-server-item { background: #ffffff; color: #1c1e26; }
html.hx-light .dash-mobile-server-item.active { background: #e07a5f; color: #ffffff; }
html.hx-light .dash-mobile-module-list { background: #ffffff; }
html.hx-light .dash-mobile-module-group { color: #6a7080; }
html.hx-light .dash-mobile-module-item { color: #5d6375; }
html.hx-light .dash-mobile-module-item:hover, html.hx-light .dash-mobile-module-item.active { color: #1c1e26; }

/* 2️⃣6️⃣ Contenu extrême (audit I) : nom de serveur de 90 caractères,
   mots interminables → plus jamais de défilement horizontal.
   - fil d'Ariane : ellipsis (comme Discord)
   - titres de module : retour à la ligne forcé
   - boutons : les mots très longs se coupent ; le pied de carte
     (boutons insécables par le correctif n°3) défile en interne. */
.dash-crumb .crumb-txt { min-width: 0; }
.dash-crumb .crumb-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-crumb .crumb-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-header-copy h1, .module-header-copy .sub { overflow-wrap: anywhere; }
.dashboard-shell-host .dash-btn { overflow-wrap: anywhere; }
.dash-card > .card-actions { overflow-x: auto; }

/* 2️⃣7️⃣ AUDIT v187 — popovers & modales : la couche v10 (l.3488-3497)
   forçait #36393f sur la palette de commandes, la cloche de
   notifications, le sélecteur de couleur et les bandes de modales —
   invisibles en mode clair car jamais ouvertes pendant les audits. */
html.hx-light body:has(.dashboard-shell-host) .modal,
html.hx-light body:has(.dashboard-shell-host) .dash-palette,
html.hx-light body:has(.dashboard-shell-host) .dash-bell-pop,
html.hx-light body:has(.dashboard-shell-host) .dash-accent-pop {
  background: #ffffff !important; border-color: #dfe2ec !important;
  box-shadow: 0 18px 50px -12px rgba(35, 40, 80, .28);
}
html.hx-light body:has(.dashboard-shell-host) .modal-header,
html.hx-light body:has(.dashboard-shell-host) .modal-footer {
  background: #f0f1f7; border-color: #dfe2ec; color: #1c1e26;
}
html.hx-light .modal-title { color: #1c1e26; }

/* 2️⃣8️⃣ Tiroir « Plus » : derniers textes pâles (nom du compte,
   initiales de serveur) + rappels d'accent après le passage générique. */
html.hx-light .dash-mobile-modules-drawer :is(b, strong) { color: #1c1e26; }
html.hx-light .dash-mobile-modules-drawer :is(small) { color: #5d6375; }
html.hx-light .dash-mobile-drawer-account b { color: #1c1e26; }
html.hx-light .dash-mobile-server-item.active { background: #e07a5f; color: #ffffff; }
html.hx-light .dash-mobile-account-avatar { background: #e07a5f; color: #ffffff; }
html.hx-light .dash-mobile-close { color: #e07a5f; }
html.hx-light .dash-mobile-site-links button span { color: #e07a5f; }
/* 2️⃣9️⃣ Les modales vivent hors du shell : le label de base #92a2b8
   (l.2824) y restait pâle (ratio 2,6 sur blanc). */
html.hx-light .dash-label { color: #5d6375; }
html.hx-light .modal .dash-label { color: #5d6375; }

/* ============================================================
   ✨ HOXERA ULTRA PRO v194 — Phase 2 : finitions UX complètes
   Couche purement additive : aucun sélecteur existant n'est retiré.
   1) Design tokens     2) Accessibilité (focus visible partout)
   3) Hiérarchie        4) Micro-interactions
   5) États vides       6) Responsive fin     7) Mode clair
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
.dashboard-shell-host {
  /* v367 — 16px sortait de notre echelle et surtout du modele : un encart
     Discord fait 8px. L'apercu doit ressembler a Discord, pas a notre idee
     de Discord. */
  --dp-radius-card: 8px;
  --dp-radius-ctl: 12px;
  --dp-gap: 18px;
  --dp-shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -18px rgba(0,0,0,.65);
  --dp-shadow-card-hover: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -20px rgba(0,0,0,.75);
  --dp-shadow-pop: 0 24px 70px -24px rgba(0,0,0,.9);
  --dp-ring: rgba(var(--d-accent-rgb), .45);
  --dp-transition: .18s cubic-bezier(.2,.8,.25,1);
}

/* ---------- 2. Accessibilité : focus visible clair sur TOUT ---------- */
/* (neutralise l'ancienne règle « outline: none » des boutons/sélecteurs) */
.dashboard-shell-host .dash-btn:focus-visible,
.dashboard-shell-host .dash-iconbtn:focus-visible,
.dashboard-shell-host .dash-select:focus-visible,
.dashboard-shell-host .dash-input:focus-visible,
.dashboard-shell-host textarea.dash-input:focus-visible,
.dashboard-shell-host .dash-side-item:focus-visible,
.dashboard-shell-host .dash-mobile-navbtn:focus-visible,
.dashboard-shell-host .bnav-item:focus-visible,
.dashboard-shell-host .module-back:focus-visible,
.dashboard-shell-host .dash-server-card:focus-visible,
.dashboard-shell-host .x-btn:focus-visible,
.dashboard-shell-host .switch input:focus-visible + .slider,
.dashboard-shell-host .acc-dot:focus-visible,
.dashboard-shell-host .bp-close:focus-visible {
  outline: 3px solid var(--dp-ring) !important;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- 3. Hiérarchie : cartes, stats, tableaux ---------- */
.dashboard-shell-host .dash-card {
  border-radius: var(--dp-radius-card);
  box-shadow: var(--dp-shadow-card);
  transition: transform var(--dp-transition), border-color var(--dp-transition), box-shadow var(--dp-transition);
}
.dashboard-shell-host .dash-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--d-accent-rgb), .38);
  box-shadow: var(--dp-shadow-card-hover);
}
.dashboard-shell-host .dash-card h3 { font-size: 16px; letter-spacing: -.2px; }

.dashboard-shell-host .dash-stat {
  border-radius: var(--dp-radius-card);
  box-shadow: var(--dp-shadow-card);
}
.dashboard-shell-host .dash-stat .val { font-size: 28px; letter-spacing: -.6px; }
.dashboard-shell-host .dash-stat .lbl { font-size: 12px; font-weight: 650; letter-spacing: .2px; text-transform: uppercase; opacity: .85; }

.dashboard-shell-host .dash-table th { font-size: 11px; letter-spacing: .8px; }
.dashboard-shell-host .dash-table tbody tr { transition: background var(--dp-transition); }
.dashboard-shell-host .dash-table tbody tr:hover { background: rgba(var(--d-accent-rgb), .055); }
.dashboard-shell-host .dash-table td { font-size: 14px; }

/* ---------- 4. Micro-interactions ---------- */
.dashboard-shell-host .dash-side-item { transition: background var(--dp-transition), color var(--dp-transition), transform .1s ease; }
.dashboard-shell-host .dash-side-item:hover { transform: translateX(2px); }
.dashboard-shell-host .dash-side-item.active { box-shadow: inset 0 0 0 1px rgba(var(--d-accent-rgb), .35); }

.dashboard-shell-host .dash-btn { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease; }
.dashboard-shell-host .dash-btn:active { transform: translateY(0) scale(.985); }

.dashboard-shell-host .module-header-meta .module-scope,
.dashboard-shell-host .module-header-meta .module-status {
  backdrop-filter: blur(4px);
  border: 1px solid rgba(var(--d-accent-rgb), .25);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- 5. États vides & erreurs ---------- */
.dashboard-shell-host .dash-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 46px 20px; text-align: center;
  border: 1.5px dashed var(--d-border);
  border-radius: var(--dp-radius-card);
  background: rgba(var(--d-accent-rgb), .03);
}
.dashboard-shell-host .dash-empty .big { font-size: 28px; filter: saturate(.9); }
.dashboard-shell-host .dash-empty p { max-width: 440px; line-height: 1.6; color: var(--d-dim); font-size: 13px; margin: 0; }

.dashboard-shell-host .dash-state-card.is-error {
  border-radius: var(--dp-radius-card);
  box-shadow: var(--dp-shadow-card);
}

/* ---------- 6. Scrollbar fine (sidebar, contenu) ---------- */
.dashboard-shell-host .dash-side::-webkit-scrollbar,
.dashboard-shell-host .dash-main::-webkit-scrollbar,
.dashboard-shell-host .modal-body::-webkit-scrollbar { width: 8px; }
.dashboard-shell-host .dash-side::-webkit-scrollbar-thumb,
.dashboard-shell-host .dash-main::-webkit-scrollbar-thumb,
.dashboard-shell-host .modal-body::-webkit-scrollbar-thumb { background: rgba(var(--d-accent-rgb), .28); border-radius: 99px; }
.dashboard-shell-host .dash-side::-webkit-scrollbar-track,
.dashboard-shell-host .dash-main::-webkit-scrollbar-track { background: transparent; }

/* ---------- 7. Mode clair v194 ---------- */
html.hx-light .dashboard-shell-host .dash-card {
  box-shadow: 0 6px 24px -14px rgba(30,34,60,.22);
}
html.hx-light .dashboard-shell-host .dash-card:hover {
  box-shadow: 0 14px 34px -16px rgba(30,34,60,.3);
  border-color: rgba(var(--d-accent-rgb), .5);
}
html.hx-light .dashboard-shell-host .dash-table tbody tr:hover { background: rgba(var(--d-accent-rgb), .06); }
html.hx-light .dashboard-shell-host .dash-empty { border-color: #d5d9e6; background: rgba(var(--d-accent-rgb), .04); }
html.hx-light .dashboard-shell-host .module-header-meta .module-scope,
html.hx-light .dashboard-shell-host .module-header-meta .module-status {
  border-color: rgba(var(--d-accent-rgb), .35);
}

/* ---------- 8. Mouvements réduits (cohérent avec le reste du site) ---------- */
@media (prefers-reduced-motion: reduce) {
  .dashboard-shell-host *,
  .dashboard-shell-host *::before,
  .dashboard-shell-host *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   🔧 AUDIT UI v197 — débordements, tailles et positions
   Corrige : rangées de types de tickets coupées (boutons 🗑 masqués),
   grille Embed qui déborde, boutons d'icônes réduits à 34px, cibles
   tactiles < 40px, titres/sélecteurs qui débordent sur mobile.
   ════════════════════════════════════════════════════════════════ */

/* 1) Dropdowns custom : ne débordent JAMAIS de leur conteneur */
.dd-host { max-width: 100%; min-width: 0; }

/* 2) Tickets — « Types de tickets » : les rangées de rôles staff et
   de questions occupent toute la largeur et se replient au lieu de
   faire déborder la carte (le bouton 🗑 était masqué par overflow) */
.setting-row > div { max-width: 100%; }
.setting-row > .t-roles,
.setting-row > .t-questions,
.setting-row > .t-staff {
  flex: 1 1 100%; max-width: 100%; min-width: 0;
}
.t-roles > div, .t-questions > div { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.t-roles .dd-host, .t-questions .dd-host,
.t-roles .dash-select, .t-questions .dash-select { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.t-roles .dash-input, .t-questions .dash-input { min-width: 0; max-width: 100%; flex: 1 1 200px; }
.t-roles > div .dash-btn, .t-questions > div .dash-btn { flex-shrink: 0; }

/* 3) Boutons d'icônes du haut de page : vraie cible tactile 40px
   (annule l'override à 34px de la couche v195) */
.dashboard-shell-host .dash-topbar-actions .dash-iconbtn,
.dash-iconbtn { width: 40px !important; min-width: 40px; height: 40px !important; min-height: 40px; }

/* 4) Navigation mobile : boutons ☰ / ▦ à 42px (confort pouce) */
.dashboard-shell-host .dash-mobile-navbtn { width: 42px !important; height: 42px !important; min-width: 42px; min-height: 42px; }

/* 5) Bouton « Retour » des modules */
.dashboard-shell-host .module-back { min-height: 40px; min-width: 44px; padding: 8px 13px; }

/* 6) Fermeture du sélecteur de serveurs */
.sp-close { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }

/* 7) Petits boutons (suppression 🗑, etc.) : cible tactile minimale */
.dash-btn-sm { min-height: 38px; min-width: 40px; }

/* 8) Filtres Auto-Mod (pills) : hauteur confortable */
.am-filter { min-height: 34px; display: inline-flex; align-items: center; }

/* 9) Boutons « à marquer / marqué » des annonces */
.ca-mark { min-height: 38px; min-width: 40px; }

/* 10) Presets de couleurs de l'Embed Builder : cibles rondes larges */
.eb-preset { width: 40px; height: 40px; }
.eb-color-row input[type="color"] { height: 36px; }

/* 11) Grille de l'Embed Builder : les colonnes ne peuvent pas
   s'étendre au-delà du conteneur (1fr laissait les inputs élargir
   la carte de plus de 350px) */
.eb-wrap, .eb-editor-col, .eb-preview-col { min-width: 0; }
.eb-grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.eb-grid2 > * { min-width: 0; }
.eb-grid2 .setting-row { flex-wrap: wrap; }
.eb-grid2 .setting-row > .dash-label { flex: 1 1 100%; min-width: 0; }
.eb-grid2 .setting-row > input.dash-input,
.eb-grid2 .setting-row > .dash-select,
.eb-grid2 .setting-row > textarea.dash-input { width: 100%; flex: 1 1 100%; min-width: 0; max-width: 100%; }

/* 12) En-têtes de cartes : le texte se plie au lieu de pousser le
   contrôle (switch) hors de la carte */
.dash-card .card-head > * { min-width: 0; }
.dash-card .card-head h3,
.dash-card .card-head .desc { overflow-wrap: anywhere; }

/* 13) Titre et sous-titre de module : se plient sur mobile */
.dash-module-header { flex-wrap: wrap; }
.dash-module-header h1,
.dash-module-header .sub { min-width: 0; overflow-wrap: anywhere; }
.dash-module-header h1, .module-header-copy h1 { white-space: normal; }

/* 14) Interrupteurs (switch) : ne débordent pas des lignes flex */
label.switch { flex-shrink: 0; max-width: 100%; }

/* 15) Cases à cocher et radios : un peu plus grandes + couleur du thème */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; flex-shrink: 0;
  accent-color: var(--d-accent, #e07a5f); cursor: pointer;
}

/* 16) Noms de serveurs très longs : coupés proprement au lieu de
   pousser la carte (ellipsis avec titre complet au survol) */
.srv-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 20) Tiroir de navigation mobile : avatars de serveurs et fermeture
   à une vraie taille tactile (Discord utilise 48px) */
.dash-mobile-server-item { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
.dash-mobile-close { width: 40px !important; height: 40px !important; min-width: 40px !important; }

/* ============================================================
   🔧 AUDIT UI v199 — HUB FONDATEUR (espace privé)
   Onglets, barre d'outils, flux d'activité, avatars.
   ============================================================ */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--d-border); background: var(--d-card, rgba(17,24,35,.8));
  color: var(--d-dim); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.admin-tab .t-ico { font-size: 16px; }
.admin-tab:hover { color: var(--d-text); border-color: rgba(224,122,95,.5); }
.admin-tab.active { background: rgba(224,122,95,.14); border-color: rgba(224,122,95,.6); color: #e07a5f; }
.admin-loading { padding: 40px 0; display: flex; justify-content: center; }
.admin-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.activity-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--d-border);
  margin-bottom: 6px; background: rgba(255,255,255,.02); flex-wrap: wrap;
}
.activity-item .a-emoji { font-size: 18px; flex-shrink: 0; }
.activity-item .a-text { flex: 1; min-width: 160px; font-size: 14px; }
.activity-item .a-meta { color: var(--d-dim); font-size: 12px; }
html.hx-light .admin-tab { background: #fff; border-color: #e3e3ea; color: #5a5f6b; }
html.hx-light .admin-tab.active { background: rgba(224,122,95,.12); border-color: rgba(224,122,95,.55); color: #c0604a; }
html.hx-light .activity-item { background: #fff; border-color: #e3e3ea; }
/* Boutons de la page admin : cohérence avec le style public */
.admin-platform-page .btn { min-height: 38px; }

/* Puces de salon dans l'aperçu Discord (style Discord) */
.dc-mention {
  display: inline-block; background: #5865F23D; color: #dee0fc;
  border-radius: 4px; padding: 0 4px; font-weight: 600; font-size: 13px;
  vertical-align: baseline; white-space: nowrap;
}
html.hx-light .dc-mention { color: #3d4fdb; background: #5865F229; }

/* ════════════════════════════════════════════════════════════════
   🔧 v206 — anti-images cassées + sélecteurs lisibles
   ════════════════════════════════════════════════════════════════ */

/* ️ Avatar de secours : remplace proprement toute image qui n'a pas pu
   charger (CDN Discord injoignable, avatar supprimé, URL invalide…) —
   l'icône « image cassée » du navigateur ne doit jamais apparaître. */
.img-fb {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; vertical-align: middle; overflow: hidden;
  background: linear-gradient(135deg, #3b3f5c, #23252f);
  color: #e8eaf3; font-weight: 800; font-size: 16px; line-height: 1;
  border-radius: 8px; user-select: none;
}
html.hx-light .img-fb { background: linear-gradient(135deg, #e8e9f0, #d5d8e4); color: #3c4154; }
.img-fb.is-round { border-radius: 50%; }
.img-fb img-fb-t { display: block; }

/* Sélection visible dans les menus déroulants (contraste renforcé) */
.dd-option.is-selected {
  background: rgba(var(--d-accent-rgb), .24);
  box-shadow: inset 0 0 0 1.5px rgba(var(--d-accent-rgb), .5);
}
.dd-option.is-selected .dd-opt-txt b { color: var(--d-text); }
.dd-option.is-selected .dd-check {
  background: rgba(var(--d-accent-rgb), .22); border-radius: 4px;
  padding: 1px 5px; margin-right: -2px;
}
html.hx-light .dd-option.is-selected { background: rgba(224, 122, 95, .16); box-shadow: inset 0 0 0 1.5px rgba(224, 122, 95, .55); }
html.hx-light .dd-option.is-selected .dd-check { background: #e07a5f; color: #fff; border-radius: 4px; }

/* Icônes d'options du menu déroulant : les emojis (💬 salon, 🛡️ rôle,
   📁 catégorie…) sont centrés dans leur pastille, sans case vide. */
.dd-opt-ico .dd-emoji { font-size: 16px; line-height: 1; }
.dd-opt-ico .dd-letter { font-size: 12px; font-weight: 800; color: var(--d-text); }
/* Lignes sans icône (placeholder « — Choisir… — »…) : le texte reste aligné
   sous les libellés des options à icône (28px pastille + 10px d'écart). */
.dd-option.no-ico .dd-opt-txt { margin-left: 38px; }
.dd-option.no-ico .dd-opt-txt b { color: var(--d-dim); font-weight: 600; }

/* ============================================================
   🎨 v209 — Finitions : tokens d'arrondis + une seule « surface
   Discord » pour TOUS les aperçus (.dc-preview, .embed-box,
   .adv-discord-preview, .ca-discord-preview, .eb-discord).
   Avant : chaque module avait son rayon (6 à 13 px) → aperçus
   incohérents d'un module à l'autre. Maintenant : --r-sm partout.
   ============================================================ */
:root {
  --r-xs: 8px;
  --r-sm: 8px;   /* champs, petites cartes */
  --r-md: 12px;   /* cartes principales */
  --r-lg: 12px;   /* modales / grandes feuilles */
  --r-pill: 999px;
  --dc-shell: #313338;   /* fond « salon Discord » */
  --dc-border: #1e1f22;
}
:is(.dc-preview, .embed-box, .adv-discord-preview, .ca-discord-preview, .eb-discord) {
  border-radius: var(--r-sm);
  border-color: var(--dc-border);
}

/* ============================================================
   v244 — Anti-nuke : limites par type d'action.
   Trois sélecteurs (seuil, fenêtre, sanction) par type surveillé.

   Pourquoi des classes et pas des styles inline : un style inline ne
   peut PAS être surchargé par une media query. L'ancienne ligne était
   en `style="grid-template-columns:1fr auto auto"`, donc figée : sur un
   écran de 360 px les deux cases numériques prenaient ~180 px et il ne
   restait que ~140 px pour le libellé et son texte d'aide.
   ============================================================ */
/* ============================================================
   v248 — Grille de petits champs « libellé + contrôle ».

   Remplace des grilles écrites en STYLE INLINE, donc figées : un style inline
   ne peut être surchargé par aucune media query, exactement le piège déjà
   rencontré pour .nk-limit.

   Le plancher de colonne doit tenir compte de ce que fabrique
   Dashboard.layoutSettingRows : il transforme chaque cellule
   « <label class="dash-label"> + <input|select> » en .setting-row, qui met le
   libellé et le contrôle CÔTE À CÔTE. Or le champ a un min-width de 84 px.

   Avec l'ancien plancher inline de 140 px, mesuré à 901 px de large (contenu
   réel 581 px une fois la barre latérale déduite) : auto-fit posait 3 colonnes
   de 187 px, chacune pour 204 px de contenu réel — soit 17 px de débordement
   par colonne. Un plancher à 210 px fait passer auto-fit à 2 colonnes de 285 px
   et le débordement disparaît.
   ============================================================ */
.dashboard-shell-host .dash-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
/* Téléphone : une seule colonne, plus rien n'est compressé. */
@media (max-width: 520px) {
  .dashboard-shell-host .dash-fields-grid { grid-template-columns: minmax(0, 1fr); }
}

.dashboard-shell-host .nk-limit-list { display: grid; gap: 8px; }
.dashboard-shell-host .nk-group-title { margin-top: 14px; }
.dashboard-shell-host .nk-group-title:first-child { margin-top: 0; }

.dashboard-shell-host .nk-limit {
  display: grid;
  /* Le libellé prend le reste ; les trois champs ont une largeur plancher
     assez large pour que « Quarantaine » et « 10 actions » ne soient pas
     tronqués. minmax(0,…) évite le débordement classique des grilles CSS. */
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(112px, 0.9fr));
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
}

.dashboard-shell-host .nk-limit-label { display: grid; gap: 2px; min-width: 0; }
.dashboard-shell-host .nk-limit-name { font-size: 13px; line-height: 1.35; }
.dashboard-shell-host .nk-limit-help { margin: 0; font-size: 12px; line-height: 1.45; }

.dashboard-shell-host .nk-limit-field { display: grid; gap: 3px; min-width: 0; }
.dashboard-shell-host .nk-limit-field > .desc { margin: 0; font-size: 11px; line-height: 1.2; }
.dashboard-shell-host .nk-limit-field .dash-select {
  width: 100%; min-width: 0; margin: 0;
  font-size: 12px; text-transform: none; letter-spacing: 0;
}

/* Tablette / petit écran : le libellé passe sur toute la largeur, les trois
   champs se répartissent dessous. */
@media (max-width: 900px) {
  .dashboard-shell-host .nk-limit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-shell-host .nk-limit-label { grid-column: 1 / -1; }
}

/* Téléphone : une seule colonne, plus rien n'est compressé. */
@media (max-width: 520px) {
  .dashboard-shell-host .nk-limit { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
  .dashboard-shell-host .nk-limit-help { font-size: 12px; }
}

/* v244 — Grille de statistiques dense, utilisée DANS une carte.
   `.dash-stats` seule est déjà responsive (auto-fit + surcharge mobile en
   2 colonnes), mais elle porte une marge basse pensée pour un début de page.
   La variante dense reprend exactement le même comportement sans la marge.
   Remplace un `grid-template-columns:repeat(3,1fr)` inline qui, lui, ne
   pouvait pas être corrigé sur mobile et faisait déborder le libellé
   « Refusées (file pleine) ». */
.dashboard-shell-host .dash-stats-dense { margin-bottom: 0; gap: 8px; }
.dashboard-shell-host .dash-stats-dense .dash-stat { padding: 10px; border-radius: 8px; }
.dashboard-shell-host .dash-stats-dense .dash-stat .val { font-size: 18px; }
.dashboard-shell-host .dash-stats-dense .dash-stat .lbl { font-size: 12px; line-height: 1.3; }

/* Le sélecteur de sanction par type peut porter un libellé long
   (« Global — Quarantaine ») : on l'empêche de déborder de sa cellule. */
.dashboard-shell-host .nk-limit-field .dash-select {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Téléphone : les libellés d'aide passent à 11,5 px pour rester lisibles
   sans occuper trois lignes. Aucune règle mobile ne le faisait avant. */
@media (max-width: 520px) {
  .dashboard-shell-host .am-threshold-controls .dash-input,
  .dashboard-shell-host .am-threshold-controls .dash-select { width: 100%; flex: 1 1 100%; }
  .dashboard-shell-host .am-threshold-controls { width: 100%; }
}

/* ============================================================
   v244 — Plancher de lisibilité sur mobile.

   Audit mesuré dans Chromium à 360 px : plusieurs textes porteurs
   de PHRASES tombaient entre 9,58 px et 10,5 px. Sur un téléphone
   c'est en dessous du seuil de confort (Apple et Google indiquent
   11 px minimum pour du texte secondaire).

   Le plancher ne s'applique QUE sous 700 px : le rendu sur grand
   écran n'est pas modifié. Les libellés en majuscules (.dash-label,
   11 px) et les badges imitant Discord (8 px) sont volontairement
   exclus — ce sont des choix de design assumés, pas des accidents.
   ============================================================ */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  /* v366 — les trois étiquettes de la fiche de module (« Ce que fait ce
     module », « Ce que voient les membres », « Aussi réglable sur Discord »)
     étaient à 9,5 px sur TOUS les appareils, sous le plancher que v244 s'était
     lui-même fixé. Le banc maison en dénombre 222 textes sous 12 px à 360 px
     — et 251 à 768 px, parce que ce plancher ignorait le tactile : le bloc des
     cibles tactiles, trois lignes plus bas, avait déjà reçu le second membre
     de la requête pour cette raison exacte. */
  .dashboard-shell-host .mg-kicker,
  .dashboard-shell-host .ov-intro-health small,
  .dashboard-shell-host .ov-eyebrow,
  .dashboard-shell-host .ov-side-heading span,
  .dashboard-shell-host .ov-quick-label,
  .dashboard-shell-host .ov-access-bar .ov-quick-label,
  .dashboard-shell-host .ov-progress-copy span,
  .dashboard-shell-host .ov-home-feed .feed-time,
  .dashboard-shell-host .module-scope,
  .dashboard-shell-host .module-status,
  .dashboard-shell-host .am-threshold-box > small,
  .dashboard-shell-host .am-threshold-controls span,
  .dashboard-shell-host .am-rule-setting small,
  .dashboard-shell-host .am-rule-state,
  .dashboard-shell-host .adv-category-help {
    font-size: 11px;
  }
}

/* Téléphone — cibles tactiles.
   Mesuré dans Chromium à 360 px : les filtres de Modération (.am-filter,
   « Tous / 🤖 Auto-Mod / 🛡️ Staff / 🕘 24 h ») tombaient à 34 px de haut et
   les boutons de formatage des Annonces (.ca-mark, « B / I / U / S ») à 38 px.
   Apple et Google recommandent 44 px ; on monte à 40 px, ce qui reste
   compatible avec l'alignement horizontal existant.

   Le second membre de la media query vise les ÉCRANS TACTILES quelle que
   soit leur largeur (tablette en mode paysage, par exemple) : à 768 px les
   13 cibles trop petites réapparaissaient sinon. Le même idiome
   (hover: none) and (pointer: coarse) est déjà utilisé plus haut dans ce
   fichier. Un poste à souris n'est pas concerné : le rendu desktop reste
   strictement inchangé. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .dashboard-shell-host .am-filter { min-height: 40px; }
  .dashboard-shell-host .ca-mark { min-height: 40px; min-width: 40px; }
}

/* ------------------------------------------------------------
   v244 — Conflit de spécificité sur la barre d'accès rapides.

   L'élément porte DEUX classes : class="ov-quick-actions ov-access-bar".
   Deux règles visaient donc le même élément, à spécificité identique :
     • L3996  @media (max-width: 520px)  .ov-access-bar     → 1 colonne
     • L4368  @media (max-width: 700px)  .ov-quick-actions  → 2 colonnes
   Comme L4368 vient APRÈS dans le fichier et que les deux media queries
   sont vraies à 360 px, c'est elle qui gagnait. Résultat mesuré :
   grid-template-columns: 169px 169px, et « Identité du bot » rogné de 9 px.

   Le sélecteur composé ci-dessous monte la spécificité (0,3,1) et est placé
   en fin de fichier : la colonne unique voulue sur téléphone est rétablie.
   ------------------------------------------------------------ */
@media (max-width: 520px) {
  .dashboard-shell-host .ov-quick-actions.ov-access-bar { grid-template-columns: 1fr; }
  /* Même famille : le <small> de ces boutons était à 10 px. */
  .dashboard-shell-host .ov-access-bar .ov-quick-action small,
  .dashboard-shell-host .ov-quick-action small { font-size: 11px; }
}

/* ============================================================
   v245 — « En savoir plus » : textes d'explication repliés.

   <details>/<summary> natif : pas de JavaScript pour ouvrir/fermer,
   accessible au clavier (Entrée et Espace), annoncé correctement par
   les lecteurs d'écran, et le texte replié reste indexable par la
   recherche dans la page (Ctrl+F).

   Le repli est appliqué par Dashboard.plierTextesLongs sur une LISTE
   BLANCHE de classes d'explication, à partir de 120 caractères. Les
   avertissements, les libellés de formulaire, les aperçus et les
   conteneurs de champs ne sont jamais repliés.
   ============================================================ */
.dash-details { margin: 0 0 14px; }
/* Le texte replié portait déjà sa propre marge basse (.dash-card .desc).
   Une fois à l'intérieur du <details>, cette marge ne compte plus quand
   c'est fermé : c'est le <details> qui reprend l'espacement. */
.dash-details > .desc,
.dash-details > .sub { margin-bottom: 0; }
.dash-details[open] { padding-bottom: 2px; }

.dash-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  color: var(--d-accent);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 8px;
  transition: color .15s ease;
}
.dash-details > summary::-webkit-details-marker { display: none; }
.dash-details > summary::before {
  content: '';
  display: inline-block;
  width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px;
  background-color: currentColor; opacity: .75;
  -webkit-mask: var(--chevron-down) center / 16px 16px no-repeat;
  mask: var(--chevron-down) center / 16px 16px no-repeat;
  transform: rotate(-90deg);
  transition: transform .16s ease;
}
.dash-details[open] > summary::before { transform: none; }
.dash-details > summary:hover { color: var(--d-accent2, var(--d-accent)); text-decoration: underline; }
.dash-details > summary:focus-visible {
  outline: 2px solid rgba(var(--d-accent-rgb), .6);
  outline-offset: 2px;
}
/* Une fois ouvert, le texte reprend sa couleur normale d'explication. */
.dash-details[open] > .desc,
.dash-details[open] > .sub { margin-top: 8px; }

html.hx-light .dash-details > summary { color: #b3543d; }
html.hx-light .dash-details > summary:hover { color: #8f3f2c; }

/* Écran tactile : la cible doit rester confortable, MAIS un « En savoir plus »
   de 40 px de haut annule le gain du repli — mesuré : replier 90 blocs ne
   faisait alors gagner qu'un seul écran sur 77, parce que chaque lien replié
   coûtait presque autant que le texte qu'il cachait. 32 px garde une cible
   correcte (la largeur, elle, reste grande : tout le libellé est cliquable). */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .dash-details > summary { min-height: 32px; padding: 7px 0; }
}

/* ============================================================
   v245 — Cartes pliables.

   Aucune restructuration du DOM : on ajoute une classe sur la carte et on
   masque par CSS. Six règles existantes ciblent les enfants DIRECTS d'une
   carte (.dash-card > .card-actions, .dash-card[data-dash-card] > .dash-input…)
   ; emballer le contenu dans un conteneur les aurait toutes cassées.

   Tout est ouvert par défaut (choix utilisateur). Le repli est mémorisé le
   temps de la session.
   ============================================================ */
.card-head-pliable { cursor: pointer; position: relative; }
.card-head-pliable:hover .card-fold { opacity: 1; border-color: rgba(var(--d-accent-rgb), .55); }

.card-fold {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  color: var(--d-dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--d-border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: .72;
  transition: opacity .15s ease, transform .18s ease, border-color .15s ease, color .15s ease;
}
.card-fold:hover { color: var(--d-accent); }
.card-fold:focus-visible { outline: 2px solid rgba(var(--d-accent-rgb), .6); outline-offset: 2px; opacity: 1; }
.card-fold span { display: block; transition: transform .18s ease; }

/* Carte repliée : on masque tout SAUF l'en-tête. `!important` parce que des
   règles existantes imposent display sur certains enfants (.card-actions,
   grilles, flex) et passeraient sinon après celle-ci. */
.dash-card.is-folded > *:not(.card-head) { display: none !important; }
.dash-card.is-folded > .card-head { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.dash-card.is-folded .card-fold span { transform: rotate(-90deg); }
/* En-tête replié : le titre seul suffit, la description suivrait sinon. */
.dash-card.is-folded .card-head .desc { display: none; }
.dash-card.is-folded { padding-bottom: 14px; }

html.hx-light .card-fold { background: #fff; border-color: #d7e0ee; color: #6b7a92; }
html.hx-light .card-fold:hover { color: #b3543d; }

/* Écran tactile : le chevron est une cible comme une autre, donc 40 px — le
   plancher retenu en v244. À 32 px, l'audit mesurait 57 cibles trop petites
   (une par carte). Toute la barre de titre reste cliquable en plus. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .card-fold { width: 40px; height: 40px; opacity: 1; }
}

/* ---------- v252 — PC étroit (701-900 px, pointeur fin) : rail d'icônes ----------
   Un PC dont la largeur CSS est réduite (échelle d'affichage Windows, fenêtre
   étroite) garde sa disposition PC, mais la barre latérale pleine largeur y
   mangerait tout le contenu. Comme Discord ou Dyno, elle se replie en rail
   d'icônes : 64 px au lieu de 256, et le contenu retrouve ~190 px.
   Périmètre VOLONTAIREMENT strict : pointeur fin UNIQUEMENT (un téléphone ou
   une tablette sans souris reste en mobile), et seulement entre 701 et 900 px
   (au-delà, sidebar normale ; en dessous, mobile). */
@media (pointer: fine) and (min-width: 701px) and (max-width: 900px) {
  .dashboard-shell-host .dash-side { width: 64px; flex: 0 0 64px; }
  .dashboard-shell-host .dash-side-brand { justify-content: center; margin: 6px 0 10px; padding: 0; }
  .dashboard-shell-host .dash-side-brand-copy,
  .dashboard-shell-host .dash-side-section,
  .dashboard-shell-host .dash-server-card .srv-txt,
  .dashboard-shell-host .dash-side .scroll-hint,
  .dashboard-shell-host .dash-side-foot { display: none; }
  .dashboard-shell-host .dash-server-card { justify-content: center; padding: 6px 0; margin: 0 6px 8px; }
  /* Le libellé est un nœud de texte nu : font-size 0 le fait disparaître sans
     toucher au markup, et l'icône retrouve sa taille normale. */
  .dashboard-shell-host .dash-side-item { font-size: 0; gap: 0; justify-content: center; padding: 6px 0; margin: 2px 7px; width: calc(100% - 14px); }
  .dashboard-shell-host .dash-side-item .ico { font-size: 16px; }
}

/* ---------- v253 — OS de bureau : disposition PC garantie (481-900 px) ----------
   Ultime filet, après trois correctifs fondés sur des mesures (largeur, tactile,
   hauteur) que certains PC fauxent — échelle d'affichage Windows, écran tactile
   déclaré comme pointeur principal… Ici on ne mesure plus : si le système est
   un OS de bureau (classe hx-os-pc posée par index.html), la coquille MOBILE
   (hamburger, tiroirs, barre basse) est neutralisée entre 481 et 900 px et la
   barre latérale revient en rail d'icônes. Au-delà de 900 px ce bloc ne fait
   rien (le PC y est déjà en PC) ; sous 481 px même un PC passe en mobile, une
   fenêtre si petite n'ayant pas la place d'une barre latérale.
   Android / iPhone / iPad n'ont pas la classe : strictement inchangés. */
/* ================================================================
   v254 — UN OS DE BUREAU = COQUILLE PC À TOUTES LES LARGEURS ≥ 481 px
   ----------------------------------------------------------------
   Le bloc mobile (21 requêtes médias) contient une clause SANS limite
   de largeur : « (hover: none) and (pointer: coarse) and (max-height:
   800px) and (any-pointer: coarse) ». Sur un PC portable tactile dont
   la hauteur utile tombe sous 800 px (1366×768, ou 1080p à 150 %),
   cette clause fait basculer TOUTE la page en mobile, même plein écran
   à 1 920 px — c'est le cas que les v250→v253 ne couvraient pas, leurs
   correctifs s'arrêtant à 900 px.
   Donc : dès 481 px, sur un OS de bureau (classe hx-os-pc posée par
   index.html d'après le user-agent), on neutralise la coquille mobile
   à TOUTES les largeurs, puis on choisit le calibre de la barre
   latérale — rail d'icônes 481-900 px, barre complète au-delà.
   Sans la classe hx-os-pc (Android, iPhone, iPad) : rien ne change.
   ================================================================ */

/* --- Palier A : socle commun, toutes largeurs ≥ 481 px --- */
@media (min-width: 481px) {
  /* Le bloc mobile empile la coquille en colonne (onglets horizontaux) :
     on la remet en ligne, et la barre latérale debout. */
  html.hx-os-pc .dashboard-shell-host .dash-shell { flex-direction: row; }
  html.hx-os-pc .dashboard-shell-host .dash-side {
    display: flex; flex-shrink: 0; flex-direction: column;
    overflow-x: hidden; overflow-y: auto;
    position: sticky; top: 56px; height: calc(100vh - 56px); transform: none;
    border-right: 1px solid var(--d-border); border-bottom: none;
  }
  /* Restes du bandeau d'onglets mobile sur les entrées de menu. */
  html.hx-os-pc .dashboard-shell-host .dash-side-item {
    flex: 0 0 auto; min-height: 0; white-space: normal; border-bottom: none;
  }
  html.hx-os-pc .dashboard-shell-host .dash-main { padding: 22px 26px 60px; }
  html.hx-os-pc .dashboard-shell-host .dash-topbar {
    margin: 0; padding: 10px 14px;
    display: flex; flex-direction: row; align-items: center; gap: 10px;
  }
  html.hx-os-pc .dashboard-shell-host .dash-topbar-actions { margin-left: auto; display: flex; align-items: center; }
  /* Le fil d'ariane du haut, masqué par le bloc mobile à toutes largeurs. */
  html.hx-os-pc .dashboard-shell-host .dash-crumb { display: flex; }
  html.hx-os-pc .dashboard-shell-host .dash-side-brand { display: flex; }
  html.hx-os-pc .dashboard-shell-host .dash-side-brand-copy { display: flex; }
  html.hx-os-pc .dashboard-shell-host .dash-server-card .srv-txt { display: flex; }
  html.hx-os-pc .dashboard-shell-host .dash-side-section { display: block; }
  html.hx-os-pc .dashboard-shell-host .dash-side-foot { display: block; }
  /* Le chrome exclusivement mobile n'existe pas sur OS de bureau. */
  html.hx-os-pc .dashboard-shell-host .dash-mobile-bar,
  html.hx-os-pc .dashboard-shell-host .dash-bnav,
  html.hx-os-pc .dashboard-shell-host .dash-mobile-drawer,
  html.hx-os-pc .dashboard-shell-host .dash-mobile-backdrop,
  html.hx-os-pc .dashboard-shell-host .scroll-hint { display: none !important; }
}

/* --- v255 : sur OS de bureau, le VISAGE v241 du tableau de bord ---
   L'utilisateur compare toujours son souvenir de la v241 : sidebar de
   278 px (258 sous 1200 px) à marque centrée et avatar 82 px, entrées de
   menu 13,5 px paddées 24 px, fil d'ariane visible, barre d'outils de
   48 px soulignée d'un trait, zone de travail paddée 24/42 px.
   On ne restaure QUE la GÉOMÉTRIE : les couleurs restent celles du thème
   clair/sombre actuel, qui les gère correctement (la première version de
   ce bloc recopiait la palette sombre de la v241 et cassait le thème
   clair : texte sombre sur fond sombre). */
html.hx-os-pc .dashboard-shell-host .dash-side { width: 278px; flex: 0 0 auto; padding: 20px 0 12px; }
@media (max-width: 1200px) {
  html.hx-os-pc .dashboard-shell-host .dash-side { width: 258px; }
}
html.hx-os-pc .dashboard-shell-host .dash-side-brand {
  position: relative; flex-direction: column; align-items: center; gap: 9px;
  margin: 0 22px 18px; padding: 0 0 18px; text-align: center;
  border-bottom: 1px solid var(--d-border);
}
html.hx-os-pc .dashboard-shell-host .dash-side-brand-avatar,
html.hx-os-pc .dashboard-shell-host .dash-side-brand-avatar.fallback {
  width: 82px; height: 82px; flex-basis: 82px; border-radius: 50%;
  border: 2px solid #e07a5f; box-shadow: none;
}
html.hx-os-pc .dashboard-shell-host .dash-side-brand-avatar.fallback { font-size: 28px; }
html.hx-os-pc .dashboard-shell-host .dash-side-brand-copy { align-items: center; max-width: 100%; }
html.hx-os-pc .dashboard-shell-host .dash-side-brand-copy b { font-size: 18px; }
html.hx-os-pc .dashboard-shell-host .dash-side-brand-copy span { margin-top: 2px; font-size: 11px; }
html.hx-os-pc .dashboard-shell-host .dash-side-brand-status {
  position: absolute; top: 66px; right: calc(50% - 42px);
  width: 11px; height: 11px; margin: 0; border: 2px solid var(--d-side, #2b2d31);
  box-shadow: none;
}
html.hx-os-pc .dashboard-shell-host .dash-side-section { padding: 14px 24px 7px; font-size: 11px; letter-spacing: .7px; }
html.hx-os-pc .dashboard-shell-host .dash-side-item {
  width: 100%; min-height: 43px; margin: 0; padding: 9px 24px;
  border: 0; border-left: 3px solid transparent; border-radius: 0;
  box-shadow: none; transform: none; font-size: 14px; font-weight: 600;
}
html.hx-os-pc .dashboard-shell-host .dash-side-item .ico {
  width: 24px; height: 24px; border-radius: 0; font-size: 18px;
}
html.hx-os-pc .dashboard-shell-host .dash-side-item:hover { transform: none; }
html.hx-os-pc .dashboard-shell-host .dash-side-item:hover .ico { transform: none; }
html.hx-os-pc .dashboard-shell-host .dash-side-foot { margin: auto 20px 0; padding: 15px 4px 2px; border-top: 1px solid var(--d-border); }
html.hx-os-pc .dashboard-shell-host .dash-main { min-width: 0; padding: 24px 42px 72px; }
html.hx-os-pc .dashboard-shell-host #dash-content { max-width: var(--d-content-max); margin: 0 auto; }
html.hx-os-pc .dashboard-shell-host .dash-topbar {
  min-height: 48px; margin: 0 auto 24px; padding: 0 0 12px;
  border: 0; border-bottom: 1px solid var(--d-border); border-radius: 0;
  box-shadow: none;
}
html.hx-os-pc .dashboard-shell-host .dash-crumb { gap: 10px; }
html.hx-os-pc .dashboard-shell-host .dash-crumb .crumb-ico {
  width: 32px; height: 32px; border-radius: 4px; font-size: 16px; box-shadow: none;
}
html.hx-os-pc .dashboard-shell-host .dash-crumb .crumb-txt b { font-size: 14px; }
html.hx-os-pc .dashboard-shell-host .dash-crumb .crumb-txt span { font-size: 11px; }
html.hx-os-pc .dashboard-shell-host .dash-topbar-actions { width: auto; justify-content: flex-start; gap: 6px; }
html.hx-os-pc .dashboard-shell-host .dash-iconbtn { width: 36px; height: 36px; border-radius: 4px; box-shadow: none; }
html.hx-os-pc .dashboard-shell-host .dash-bot-chip { min-height: 36px; padding: 3px 8px 3px 5px !important; border-radius: 4px !important; box-shadow: none; }

/* --- v256 : sur OS de bureau, l'INTÉRIEUR des panneaux revient au visage v241 ---
   De la v244 à la v248, la coquille PC était devenue un « espace de
   configuration » : cartes aplaties en sections séparées d'un trait,
   titres géants soulignés, saisies et boutons façon Discord sombre.
   L'utilisateur veut le visage v241 : chaque composant ci-dessous
   reprend EXACTEMENT ses valeurs v241 (variables de thème, donc aussi
   justes en clair qu'en sombre), uniquement sous la classe hx-os-pc.
   Le mobile garde le visage actuel. */
html.hx-os-pc .dashboard-shell-host .dash-module-header {
  display: flex; min-height: 0; padding: 0; border-bottom: 0;
}
html.hx-os-pc .dashboard-shell-host .dash-module-header::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 120px; height: 2px;
  background: linear-gradient(90deg, var(--d-accent), var(--d-accent2), transparent);
  border-radius: 4px;
}
html.hx-os-pc .dashboard-shell-host .dash-module-header .m-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 22px;
  background: linear-gradient(135deg, rgba(var(--d-accent-rgb), .22), rgba(139,92,246,.18));
  border: 1px solid rgba(var(--d-accent-rgb), .3);
}
html.hx-os-pc .dashboard-shell-host .module-header-copy h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; font-size: 22px; letter-spacing: -.3px;
}
html.hx-os-pc .dashboard-shell-host .module-header-copy .sub {
  max-width: 760px; font-size: 13px;
}
html.hx-os-pc .dashboard-shell-host .module-header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
html.hx-os-pc .dashboard-shell-host .module-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--d-border-soft);
  border-radius: 999px;
  color: #a7b5c9;
  background: rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
html.hx-os-pc .dashboard-shell-host #dash-content > .dash-card[data-dash-card],
html.hx-os-pc .dashboard-shell-host .ov-activity-grid > .dash-card[data-dash-card],
html.hx-os-pc .dashboard-shell-host .am-control-card,
html.hx-os-pc .dashboard-shell-host .adv-builder-card,
html.hx-os-pc .dashboard-shell-host .custom-announcement-card {
  background: var(--d-card); border: 1px solid var(--d-border); border-radius: 12px;
  padding: 20px 22px; transition: .15s; margin-bottom: 0; background: var(--d-card) !important; box-shadow: none !important;
}
html.hx-os-pc .dashboard-shell-host #dash-content > .dash-card[data-dash-card]:hover,
html.hx-os-pc .dashboard-shell-host .ov-activity-grid > .dash-card[data-dash-card]:hover {
  border-color: #343850;
}
html.hx-os-pc .dashboard-shell-host .dash-card[data-dash-card] .card-head {
  min-height: 34px;
  padding-bottom: 11px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(49,65,88,.62);
}
html.hx-os-pc .dashboard-shell-host .dash-card[data-dash-card] .card-heading h3,
html.hx-os-pc .dashboard-shell-host .dash-card h3 {
  font-size: 16px; display: flex; align-items: center; gap: 9px; margin-bottom: 4px;
}
html.hx-os-pc .dashboard-shell-host .dash-card[data-dash-card] .card-heading .desc,
html.hx-os-pc .dashboard-shell-host .dash-card .desc {
  color: var(--d-dim); font-size: 13px; line-height: 1.55; margin-bottom: 14px; margin-top: 0; max-width: none;
}
html.hx-os-pc .dashboard-shell-host .ov-intro {
  align-items: stretch; flex-direction: column; gap: 13px; padding: 16px; border-radius: 12px; background: var(--d-card) !important; border: 1px solid var(--d-border) !important;
}
html.hx-os-pc .dashboard-shell-host .ov-checklist-card {
  overflow: visible !important; background: var(--d-card) !important; border: 1px solid var(--d-border) !important;
}
html.hx-os-pc .dashboard-shell-host .ov-module-card,
html.hx-os-pc .dashboard-shell-host .ov-feed-card,
html.hx-os-pc .dashboard-shell-host .ov-brief-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  row-gap: 13px;
  min-height: 157px;
  padding: 17px 17px 15px !important;
  cursor: pointer; background: var(--d-card) !important; border: 1px solid var(--d-border) !important; border-radius: 12px !important; padding: 20px 22px !important; margin-bottom: 0 !important;
}
html.hx-os-pc .dashboard-shell-host .ov-module-card h3,
html.hx-os-pc .dashboard-shell-host .ov-feed-card h3,
html.hx-os-pc .dashboard-shell-host .ov-brief-card h3 {
  font-size: 16px; display: flex; align-items: center; gap: 9px; margin-bottom: 4px;
}
html.hx-os-pc .dashboard-shell-host .ov-module-card .desc,
html.hx-os-pc .dashboard-shell-host .ov-feed-card .desc,
html.hx-os-pc .dashboard-shell-host .ov-brief-card .desc {
  color: var(--d-dim); font-size: 13px; line-height: 1.55; margin-bottom: 14px;
}
html.hx-os-pc .dashboard-shell-host .dash-label {
  display: block; font-size: 11px; font-weight: 700; color: var(--d-dim);
  text-transform: uppercase; letter-spacing: .5px; margin: 12px 0 5px;
}
html.hx-os-pc .dashboard-shell-host .dash-input,
html.hx-os-pc .dashboard-shell-host .dash-select,
html.hx-os-pc .dashboard-shell-host textarea.dash-input {
  font-size: 16px; padding: 11px 12px; min-height: 0; border: 1px solid var(--d-border) !important; border-radius: 8px !important; background: var(--d-card2) !important; color: var(--d-text) !important; box-shadow: none !important;
}
html.hx-os-pc .dashboard-shell-host .dash-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23979db8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.035), transparent 65%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 14px center, 0 0;
  background-size: 14px, auto;
}
html.hx-os-pc .dashboard-shell-host .dash-input:focus,
html.hx-os-pc .dashboard-shell-host .dash-select:focus,
html.hx-os-pc .dashboard-shell-host textarea.dash-input:focus {
  border-color: var(--d-accent); border-color: var(--d-accent) !important;
}
html.hx-os-pc .dashboard-shell-host .dash-btn,
html.hx-os-pc .dashboard-shell-host .dash-btn-sm,
html.hx-os-pc .dashboard-shell-host .dash-save-action {
  display: inline-flex; align-items: center; gap: 7px; background: var(--d-card2);
  color: var(--d-text); border: 1px solid var(--d-border); border-radius: 8px;
  padding: 8px 15px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit;
  transition: .12s;
  /* v367 — « min-height: 0 » laissait le bouton se recroqueviller a 34px sur
     PC, pendant que le mobile tenant 44-48. Le cran de 40 est celui du bouton
     Discord, et le haut de la fourchette tactile retenue par Apple et Google :
     un tableau de bord ne se touche pas du coude, mais il se clique du pouce. */
  min-height: 40px;
}
html.hx-os-pc .dashboard-shell-host .dash-btn:hover {
  border-color: var(--d-accent); transform: translateY(-1px); transform: translateY(-1px) !important;
}
html.hx-os-pc .dashboard-shell-host .dash-btn-primary {
  background: linear-gradient(135deg, var(--d-accent), var(--d-accent2));
  border: none; color: #fff; box-shadow: 0 3px 14px rgba(var(--d-accent-rgb), .35);
}
html.hx-os-pc .dashboard-shell-host .dash-btn-primary:hover {
  filter: brightness(1.1); box-shadow: 0 5px 18px rgba(var(--d-accent-rgb), .45);
}
html.hx-os-pc .dashboard-shell-host .dash-btn-danger {
  background: rgba(237,66,69,.12); color: #ff8a8d; border-color: rgba(237,66,69,.4);
}
html.hx-os-pc .dashboard-shell-host .dash-stat {
  background: var(--d-card); border: 1px solid var(--d-border); border-radius: 12px;
  padding: 16px 18px; background: var(--d-card) !important;
}
html.hx-os-pc .dashboard-shell-host .dash-table th {
  text-align: left; color: var(--d-dim); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; padding: 8px 10px;
  border-bottom: 1px solid var(--d-border);
}
html.hx-os-pc .dashboard-shell-host .dash-table tbody tr:hover td {
  background: rgba(var(--d-accent-rgb), .05);
}

/* --- v258 (aperçu) : barre d'actions et badge compte sur PC ---
   Le bloc mobile masquait la barre d'actions en !important : sur un PC
   tombant dans ses clauses, le thème 🌓, la couleur 🎨, la cloche, le
   rafraîchissement et le badge du bot disparaissaient. Sur OS de bureau,
   on la rend — et le badge du compte connecté (photo, pseudo, bouton de
   déconnexion) y prend place, comme dans le souvenir de la v241. */
html.hx-os-pc .dashboard-shell-host .dash-topbar-actions {
  display: flex !important; width: auto; flex-wrap: wrap; justify-content: flex-end;
}
.dash-account-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  border: 1px solid var(--d-border); border-radius: 8px; background: var(--d-card);
}
.dash-account-chip img,
.dash-account-chip .acc-fallback { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: cover; }
.dash-account-chip .acc-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--d-card2); color: var(--d-text); font-weight: 800; font-size: 13px;
}
.dash-account-chip .chip-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dash-account-chip .chip-txt b {
  font-size: 13px; color: var(--d-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px;
}
.dash-account-chip .chip-txt small { font-size: 11px; color: var(--d-dim); }
.dash-account-chip .dash-iconbtn { width: 30px; height: 30px; }

/* ============================================================
   v313 — Sélecteurs des modules (après choix du serveur)
   Libellé au-dessus, barre pleine largeur (~44 px), menu aussi
   large que le champ. Interrupteurs inchangés. Mobile + PC :
   aucun débordement (max-width 100 %, min-width 0).
   ============================================================ */
.dashboard-shell-host #dash-content,
.dashboard-shell-host .dash-card,
.dashboard-shell-host .setting-row {
  min-width: 0;
  max-width: 100%;
}

.dashboard-shell-host .setting-row:not(:has(> label.switch)) {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}

.dashboard-shell-host .setting-row:not(:has(> label.switch)) > .dash-label {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dashboard-shell-host .setting-row:not(:has(> label.switch)) > .dash-select,
.dashboard-shell-host .setting-row:not(:has(> label.switch)) > input.dash-input,
.dashboard-shell-host .setting-row:not(:has(> label.switch)) > textarea.dash-input,
.dashboard-shell-host .setting-row:not(:has(> label.switch)) > .dash-roles-multi,
.dashboard-shell-host .setting-row:not(:has(> label.switch)) > .discord-multi-host,
.dashboard-shell-host .setting-row:not(:has(> label.switch)) > .dd-host,
.dashboard-shell-host .setting-row:not(:has(> label.switch)) > div {
  width: 100%;
  flex: 1 1 auto;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dashboard-shell-host .dd-host,
.dashboard-shell-host .discord-multi-host {
  max-width: 100%;
  min-width: 0;
}

.dashboard-shell-host .dd-trigger {
  min-height: 44px;
  box-sizing: border-box;
  max-width: 100%;
}

.dashboard-shell-host .dd-panel {
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
}

/* Multi : puces + bouton « ＋ » DANS la même barre (DraftBot). */
.dashboard-shell-host .discord-multi-picker {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--d-border-soft, var(--d-border));
  border-radius: var(--d-radius-control, 8px);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 65%), var(--d-card2);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.dashboard-shell-host .discord-multi-picker .discord-multi-values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.dashboard-shell-host .discord-multi-picker .dd-add-btn {
  width: auto;
  flex: 0 0 auto;
  min-height: 32px;
  min-width: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  justify-content: center;
}
.dashboard-shell-host .discord-multi-picker .discord-multi-empty {
  padding: 0;
}

@media (max-width: 700px), (max-width: 900px) and (hover: none) and (pointer: coarse) and (any-pointer: coarse), (hover: none) and (pointer: coarse) and (max-height: 800px) and (any-pointer: coarse) {
  .dashboard-shell-host .dd-trigger {
    min-height: 48px;
    font-size: 16px;
  }
  .dashboard-shell-host .discord-multi-picker {
    min-height: 48px;
  }
  /* v366 — les <select> natifs des cartes de réglages restaient à 12-13 px sur
     téléphone ET sur tablette (mesuré : « Salon des logs » 13 px, paliers de
     Modération 12 et 13 px). Sous 16 px, iOS zoome la page à la prise de focus
     et ne la dézoome pas ; le texte devient du même coup le plus petit de
     l'écran. Sur grand écran, rien ne change. */
  .dashboard-shell-host .am-rule-action .dash-select,
  .dashboard-shell-host .am-rule-setting .dash-select,
  .dashboard-shell-host .am-rule-setting .dash-input,
  .dashboard-shell-host .am-threshold-controls .dash-select,
  .dashboard-shell-host .am-threshold-controls .dash-input,
  body:has(.dashboard-shell-host) .nk-limit-field .dash-select {
    font-size: 16px;
    min-height: 44px;
  }
}

/* ============================================================
   v359 — Espace fondateur : console Slate & Clay
   Même langage visuel que le centre serveur, avec une hiérarchie
   dédiée aux indicateurs, à la santé et à l'activité plateforme.
   ============================================================ */
.admin-platform-page {
  --admin-surface: #2b2d31;
  --admin-surface-raised: #313338;
  --admin-surface-soft: #40444b;
  --admin-border: #4f545c;
  --admin-border-quiet: rgba(255,255,255,.075);
  --admin-text: #f2f3f5;
  --admin-muted: #b5bac1;
  --admin-subtle: #949ba4;
  --admin-accent: #e07a5f;
  --admin-accent-soft: rgba(224,122,95,.12);
  --admin-good: #57f287;
  --admin-bad: #ed747a;
  --admin-warn: #f0c66d;
  width: 100%;
  max-width: 1280px;
  color: var(--admin-text);
}

body:has(.admin-platform-page),
body:has(.admin-platform-page) #app { background: #36393f; }
body:has(.admin-platform-page) .navbar {
  min-height: 58px;
  padding: 8px 24px;
  background: #2b2d31 !important;
  border-bottom: 1px solid #202225;
  box-shadow: none;
}
body:has(.admin-platform-page) .navbar .logo-row { color: #f2f3f5; }
body:has(.admin-platform-page) .navbar .btn {
  min-height: 36px;
  border-radius: 4px;
  color: #f2f3f5;
  background: transparent;
  border-color: #4f545c;
  box-shadow: none;
}
body:has(.admin-platform-page) .navbar .btn:hover { color: #fff; background: #40444b; border-color: #72767d; }
body:has(.admin-platform-page) .navbar .user-pill { color: #b5bac1; }

.admin-platform-page .admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
  padding: 10px 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.admin-platform-page .admin-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.admin-platform-page .admin-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid rgba(224,122,95,.45);
  border-radius: 8px;
  color: #fff;
  background: #2b2d31;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.admin-platform-page .admin-head-copy { min-width: 0; }
.admin-platform-page .admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--admin-subtle);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .9px;
}
.admin-platform-page .admin-breadcrumb i { color: #69717b; font-style: normal; }
.admin-platform-page .admin-breadcrumb b { color: var(--admin-accent); font-weight: 800; }
.admin-platform-page .admin-head-copy h1 { margin: 0; color: var(--admin-text); font-size: 28px; line-height: 1.2; letter-spacing: -.45px; }
.admin-platform-page .admin-head-copy .sub { margin: 5px 0 0; color: var(--admin-muted); font-size: 13px; line-height: 1.45; }
.admin-platform-page .admin-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }
.admin-platform-page .admin-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  color: var(--admin-muted);
  background: rgba(32,34,37,.38);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.admin-platform-page .admin-access-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--admin-accent); box-shadow: 0 0 0 3px rgba(224,122,95,.12); }
.admin-platform-page .admin-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  color: var(--admin-text);
  background: var(--admin-surface-soft);
  font-size: 13px;
}
.admin-platform-page .admin-refresh-btn > span { color: var(--admin-accent); font-size: 18px; line-height: 1; }
.admin-platform-page .admin-refresh-btn:hover { border-color: var(--admin-accent); background: #484b52; box-shadow: none; transform: none; }

.admin-platform-page .admin-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 4px;
  overflow-x: visible;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  scrollbar-width: none;
}
.admin-platform-page .admin-tabs::-webkit-scrollbar { display: none; }
.admin-platform-page .admin-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--admin-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.admin-platform-page .admin-tab-icon { width: 15px; height: 15px; color: currentColor; }
.admin-platform-page .admin-tab:hover { color: var(--admin-text); background: rgba(255,255,255,.045); border-color: transparent; }
.admin-platform-page .admin-tab.active { color: #fff; background: #40444b; border-color: #555b64; box-shadow: inset 0 2px 0 var(--admin-accent); }
.admin-platform-page .admin-tab:focus-visible,
.admin-platform-page .admin-refresh-btn:focus-visible,
.admin-platform-page button:focus-visible { outline: 2px solid rgba(224,122,95,.72); outline-offset: 2px; }
.admin-platform-page #a-body { min-width: 0; }

.admin-platform-page .admin-overview { display: grid; gap: 19px; min-width: 0; }
.admin-platform-page .admin-overview-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 106px;
  padding: 19px 21px;
  border: 1px solid var(--admin-border);
  border-left: 3px solid var(--admin-accent);
  border-radius: 8px;
  background: var(--admin-surface);
}
.admin-platform-page .admin-overview-copy { min-width: 0; }
.admin-platform-page .admin-section-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--admin-accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1px;
  line-height: 1.3;
}
.admin-platform-page .admin-overview-copy h2 { margin: 0; color: var(--admin-text); font-size: 22px; line-height: 1.25; letter-spacing: -.35px; }
.admin-platform-page .admin-overview-copy p { margin: 5px 0 0; color: var(--admin-muted); font-size: 13px; line-height: 1.45; }
.admin-platform-page .admin-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 205px;
  padding: 10px 12px;
  border: 1px solid rgba(87,242,135,.22);
  border-radius: 4px;
  background: rgba(87,242,135,.055);
}
.admin-platform-page .admin-hero-status.is-offline { border-color: rgba(237,116,122,.3); background: rgba(237,116,122,.06); }
.admin-platform-page .admin-hero-status-mark { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%; background: rgba(87,242,135,.1); }
.admin-platform-page .admin-hero-status-mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--admin-good); box-shadow: 0 0 0 3px rgba(87,242,135,.12); }
.admin-platform-page .admin-hero-status.is-offline .admin-hero-status-mark { background: rgba(237,116,122,.1); }
.admin-platform-page .admin-hero-status.is-offline .admin-hero-status-mark i { background: var(--admin-bad); box-shadow: 0 0 0 3px rgba(237,116,122,.12); }
.admin-platform-page .admin-hero-status strong { display: block; color: var(--admin-text); font-size: 12px; line-height: 1.3; }
.admin-platform-page .admin-hero-status small { display: block; margin-top: 2px; color: var(--admin-muted); font-size: 11px; line-height: 1.3; }

.admin-platform-page .admin-metrics-section { min-width: 0; }
.admin-platform-page .admin-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.admin-platform-page .admin-section-heading .admin-section-kicker { margin-bottom: 2px; }
.admin-platform-page .admin-section-heading h3 { margin: 0; color: var(--admin-text); font-size: 16px; letter-spacing: -.15px; }
.admin-platform-page .admin-section-note { color: var(--admin-subtle); font-size: 11px; }
.admin-platform-page .admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.admin-platform-page .admin-stat-card {
  min-width: 0;
  min-height: 137px;
  padding: 14px 15px 13px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  transition: border-color .16s ease, background .16s ease;
}
.admin-platform-page .admin-stat-card:hover { border-color: #737982; background: #303237; }
.admin-platform-page .admin-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin-bottom: 11px; }
.admin-platform-page .admin-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(224,122,95,.24);
  border-radius: 4px;
  color: var(--admin-accent);
  background: var(--admin-accent-soft);
}
.admin-platform-page .admin-stat-icon svg { width: 15px; height: 15px; }
.admin-platform-page .admin-stat-live { display: inline-flex; align-items: center; gap: 5px; color: var(--admin-good); font-size: 11px; font-weight: 750; }
.admin-platform-page .admin-stat-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-platform-page .admin-stat-card.is-offline .admin-stat-live { color: var(--admin-bad); }
.admin-platform-page .admin-stat-value { overflow: hidden; color: var(--admin-text); font-size: 22px; font-weight: 780; letter-spacing: -.5px; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-platform-page .admin-stat-card.is-online .admin-stat-value { color: var(--admin-good); font-size: 18px; letter-spacing: -.2px; }
.admin-platform-page .admin-stat-card.is-offline .admin-stat-value { color: var(--admin-bad); font-size: 18px; letter-spacing: -.2px; }
.admin-platform-page .admin-stat-label { margin-top: 5px; color: var(--admin-text); font-size: 12px; font-weight: 700; line-height: 1.3; }
.admin-platform-page .admin-stat-note { overflow: hidden; margin-top: 3px; color: var(--admin-subtle); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.admin-platform-page .admin-overview-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; gap: 13px; }
.admin-platform-page .admin-panel {
  min-width: 0;
  padding: 17px 18px 14px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
}
.admin-platform-page .admin-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--admin-border-quiet); }
.admin-platform-page .admin-panel-head .admin-section-kicker { margin-bottom: 3px; }
.admin-platform-page .admin-panel-head h3 { margin: 0; color: var(--admin-text); font-size: 14px; font-weight: 750; letter-spacing: -.1px; }
.admin-platform-page .admin-panel-head p { margin: 4px 0 0; color: var(--admin-muted); font-size: 11px; line-height: 1.4; }
.admin-platform-page .admin-summary-mark,
.admin-platform-page .admin-activity-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  color: var(--admin-accent);
  background: var(--admin-surface-raised);
}
.admin-platform-page .admin-summary-mark svg { width: 15px; height: 15px; }
.admin-platform-page .admin-activity-count { color: var(--admin-muted); font-size: 11px; font-weight: 750; }
.admin-platform-page .admin-health-list { padding: 4px 0 2px; }
.admin-platform-page .admin-health-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 7px 0; border-bottom: 1px solid var(--admin-border-quiet); }
.admin-platform-page .admin-health-row:last-child { border-bottom: 0; }
.admin-platform-page .admin-health-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--admin-border); border-radius: 4px; color: var(--admin-muted); background: var(--admin-surface-raised); }
.admin-platform-page .admin-health-icon svg { width: 15px; height: 15px; }
.admin-platform-page .admin-health-icon.is-good { color: var(--admin-good); border-color: rgba(87,242,135,.17); background: rgba(87,242,135,.055); }
.admin-platform-page .admin-health-icon.is-bad { color: var(--admin-bad); border-color: rgba(237,116,122,.2); background: rgba(237,116,122,.06); }
.admin-platform-page .admin-health-icon.is-warn { color: var(--admin-warn); border-color: rgba(240,198,109,.2); background: rgba(240,198,109,.06); }
.admin-platform-page .admin-health-copy { display: block; min-width: 0; }
.admin-platform-page .admin-health-copy strong { display: block; overflow: hidden; color: var(--admin-text); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.admin-platform-page .admin-health-copy small { display: block; overflow: hidden; margin-top: 3px; color: var(--admin-subtle); font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.admin-platform-page .admin-state-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--admin-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.admin-platform-page .admin-state-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-platform-page .admin-state-tag.is-good { color: var(--admin-good); }
.admin-platform-page .admin-state-tag.is-bad { color: var(--admin-bad); }
.admin-platform-page .admin-state-tag.is-warn { color: var(--admin-warn); }
.admin-platform-page .admin-panel-actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--admin-border-quiet); }
.admin-platform-page .admin-panel-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.admin-platform-page .admin-panel-actions .btn svg { width: 14px; height: 14px; flex: 0 0 14px; }
.admin-platform-page .admin-panel-actions .btn:hover { box-shadow: none; transform: translateY(-1px); }
.admin-platform-page .admin-action-primary { flex: 1 1 auto; color: #fff; background: var(--admin-accent); border-color: var(--admin-accent) !important; }
.admin-platform-page .admin-action-primary:hover { color: #fff; background: #cf6d54; border-color: #cf6d54 !important; }
.admin-platform-page .admin-action-secondary { flex: 0 1 auto; color: var(--admin-text); background: var(--admin-surface-soft); }
.admin-platform-page .admin-action-secondary:hover { border-color: #777d85; background: #484b52; }
.admin-platform-page .admin-panel-actions .btn:disabled { opacity: .76; cursor: wait; transform: none; }
.admin-platform-page .admin-inline-spinner { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: admin-spin .7s linear infinite; }
@keyframes admin-spin { to { transform: rotate(360deg); } }

.admin-platform-page .admin-activity-feed { display: grid; }
.admin-platform-page .admin-activity-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 10px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--admin-border-quiet); }
.admin-platform-page .admin-activity-item:last-child { border-bottom: 0; }
.admin-platform-page .admin-activity-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; overflow: hidden; border: 1px solid var(--admin-border); border-radius: 4px; color: var(--admin-accent); background: var(--admin-surface-raised); font-size: 13px; }
.admin-platform-page .admin-activity-icon svg { width: 14px; height: 14px; }
.admin-platform-page .admin-activity-copy { display: block; min-width: 0; padding-top: 1px; }
.admin-platform-page .admin-activity-copy strong { display: block; overflow: hidden; color: var(--admin-text); font-size: 11px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; }
.admin-platform-page .admin-activity-copy span { display: block; overflow: hidden; margin-top: 3px; color: var(--admin-subtle); font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.admin-platform-page .admin-activity-time { padding-top: 2px; color: var(--admin-subtle); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-platform-page .admin-panel-footer { display: flex; justify-content: flex-end; padding-top: 9px; border-top: 1px solid var(--admin-border-quiet); }
.admin-platform-page .admin-text-action { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; color: var(--admin-accent); background: transparent; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.admin-platform-page .admin-text-action svg { width: 13px; height: 13px; }
.admin-platform-page .admin-text-action:hover { color: #f09a80; }
.admin-platform-page .admin-empty { display: grid; justify-items: center; gap: 5px; min-height: 130px; align-content: center; color: var(--admin-muted); text-align: center; }
.admin-platform-page .admin-empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 3px; border: 1px solid var(--admin-border); border-radius: 50%; color: var(--admin-subtle); }
.admin-platform-page .admin-empty strong { color: var(--admin-text); font-size: 12px; }
.admin-platform-page .admin-empty span:last-child { font-size: 11px; }

/* Les onglets secondaires gardent les mêmes surfaces, contrôles et tables. */
.admin-platform-page #a-body > .card,
.admin-platform-page #a-body > .card:hover {
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  color: var(--admin-text);
  background: var(--admin-surface);
  box-shadow: none;
  transition: border-color .15s ease;
}
.admin-platform-page #a-body > .card:hover { border-color: #69707a; }
.admin-platform-page #a-body .card h3 { margin-bottom: 5px; color: var(--admin-text); font-size: 14px; }
.admin-platform-page #a-body .card .card-sub { margin-bottom: 17px; color: var(--admin-muted); font-size: 12px; line-height: 1.45; }
.admin-platform-page .admin-toolbar { gap: 9px; margin: 0 0 14px; }
.admin-platform-page .dash-input,
.admin-platform-page .dash-select {
  min-height: 40px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  color: var(--admin-text);
  background: var(--admin-surface-raised);
}
.admin-platform-page .dash-input::placeholder { color: #9299a2; }
.admin-platform-page .dash-input:focus,
.admin-platform-page .dash-select:focus { border-color: var(--admin-accent); outline: 2px solid rgba(224,122,95,.16); }
.admin-platform-page #a-body > .card .btn {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  color: var(--admin-text);
  background: var(--admin-surface-soft);
  box-shadow: none;
  font-size: 12px;
}
.admin-platform-page #a-body > .card .btn:hover { border-color: #737982; background: #484b52; box-shadow: none; transform: translateY(-1px); }
.admin-platform-page #a-body > .card .btn.btn-danger { color: #ff9da3; border-color: rgba(237,116,122,.35); background: rgba(237,116,122,.09); }
.admin-platform-page .btn.btn-danger:hover { border-color: var(--admin-bad); background: rgba(237,116,122,.15); }
.admin-platform-page .chip { border-radius: 4px; font-family: inherit; }
.admin-platform-page .leaderboard-table { width: 100%; border-collapse: collapse; color: var(--admin-text); font-size: 12px; }
.admin-platform-page .leaderboard-table th { padding: 10px 11px; border-bottom: 1px solid var(--admin-border); color: var(--admin-muted); background: var(--admin-surface-raised); font-size: 11px; font-weight: 800; letter-spacing: .45px; text-align: left; text-transform: uppercase; }
.admin-platform-page .leaderboard-table td { padding: 10px 11px; border-bottom: 1px solid var(--admin-border-quiet); vertical-align: middle; }
.admin-platform-page .leaderboard-table tbody tr:last-child td { border-bottom: 0; }
.admin-platform-page .leaderboard-table tbody tr:hover { background: rgba(255,255,255,.025); }
.admin-platform-page .leaderboard-table small { color: var(--admin-subtle) !important; }
.admin-platform-page .admin-users-table-wrap { width: 100%; overflow-x: auto; }
.admin-platform-page .admin-users-table { min-width: 760px; }
.admin-platform-page .admin-mark.admin-bot-avatar {
  display: block;
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
  color: transparent;
  background: #202225;
  object-fit: cover;
}
.admin-platform-page .admin-mark.admin-bot-avatar.img-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}
.admin-platform-page .admin-linked-account { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-platform-page .admin-linked-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  overflow: visible;
}
.admin-platform-page .admin-linked-avatar > img.admin-discord-avatar,
.admin-platform-page .admin-linked-avatar .deco-wrap > img.admin-discord-avatar {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
  background: #313338;
  object-fit: cover;
}
.admin-platform-page .admin-linked-avatar > .deco-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: visible;
}
.admin-platform-page .admin-discord-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
  color: var(--admin-text);
  background: #40444b;
  font-size: 12px;
  font-weight: 800;
}
.admin-platform-page .admin-linked-copy { display: block; min-width: 0; }
.admin-platform-page .admin-linked-copy b {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-platform-page .admin-linked-copy small { font-size: 11px; }
.admin-platform-page .activity-item { border-color: var(--admin-border-quiet); border-radius: 4px; background: var(--admin-surface-raised); }
.admin-platform-page .admin-loading { min-height: 170px; align-items: center; }

html.hx-light .admin-platform-page {
  --admin-surface: #ffffff;
  --admin-surface-raised: #f0f1f7;
  --admin-surface-soft: #e7e9f0;
  --admin-border: #d3d7e0;
  --admin-border-quiet: rgba(45,52,68,.12);
  --admin-text: #1c1e26;
  --admin-muted: #5d6375;
  --admin-subtle: #747b8d;
  --admin-accent: #bd5b45;
  --admin-accent-soft: rgba(189,91,69,.09);
  --admin-good: #178a43;
  --admin-bad: #bd4d55;
  --admin-warn: #99690b;
}
html.hx-light body:has(.admin-platform-page),
html.hx-light body:has(.admin-platform-page) #app { background: #f2f3f8; }
html.hx-light body:has(.admin-platform-page) .navbar { background: #ffffff !important; border-color: #dfe2ec; }
html.hx-light body:has(.admin-platform-page) .navbar .logo-row,
html.hx-light body:has(.admin-platform-page) .navbar .user-pill { color: #1c1e26; }
html.hx-light body:has(.admin-platform-page) .navbar .btn { color: #343846; border-color: #d3d7e0; background: #f7f8fb; }
html.hx-light body:has(.admin-platform-page) .navbar .btn:hover { background: #e7e9f0; border-color: #bdc3ce; }
html.hx-light .admin-platform-page .admin-head { border-color: rgba(45,52,68,.13); }
html.hx-light .admin-platform-page .admin-mark { color: #20232b; background: #fff; }
html.hx-light .admin-platform-page .admin-access-badge { background: rgba(255,255,255,.75); }
html.hx-light .admin-platform-page .admin-refresh-btn { background: #e7e9f0; }
html.hx-light .admin-platform-page .admin-tab.active { color: #1c1e26; background: #fff; border-color: #d3d7e0; }
html.hx-light .admin-platform-page .admin-stat-card:hover { background: #fbfbfd; border-color: #aeb5c2; }
html.hx-light .admin-platform-page .admin-panel-actions .admin-action-secondary:hover { background: #dfe2ea; }
html.hx-light .admin-platform-page #a-body > .card .btn { background: #e7e9f0; }
html.hx-light .admin-platform-page #a-body > .card .btn:hover { background: #dfe2ea; }
html.hx-light .admin-platform-page #a-body > .card .btn.btn-danger { color: #a73542; background: rgba(189,77,85,.08); }
html.hx-light .admin-platform-page .admin-activity-item:hover { background: rgba(45,52,68,.025); }
html.hx-light .admin-platform-page .leaderboard-table tbody tr:hover { background: rgba(45,52,68,.035); }
html.hx-light .admin-platform-page .admin-discord-avatar { border-color: rgba(45,52,68,.15); background: #e7e9f0; }
html.hx-light .admin-platform-page .admin-discord-avatar-fallback { color: #3c4154; background: #e7e9f0; border-color: #d3d7e0; }

@media (max-width: 900px) {
  .admin-platform-page { padding-right: 20px; padding-left: 20px; }
  .admin-platform-page .admin-stat-grid { gap: 8px; }
}
@media (max-width: 760px) {
  .admin-platform-page .admin-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-platform-page .admin-activity-feed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  body:has(.admin-platform-page) .navbar { min-height: 52px; padding: 7px 12px; }
  .admin-platform-page { padding: 22px 14px 38px; }
  .admin-platform-page .admin-head { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 17px; padding: 3px 0 17px; }
  .admin-platform-page .admin-mark { width: 42px; height: 42px; flex-basis: 42px; border-radius: 8px; }
  .admin-platform-page .admin-head-copy h1 { font-size: 22px; }
  .admin-platform-page .admin-head-copy .sub { max-width: 470px; font-size: 12px; }
  .admin-platform-page .admin-head-actions { width: 100%; justify-content: space-between; }
  .admin-platform-page .admin-access-badge { min-height: 38px; }
  .admin-platform-page .admin-refresh-btn { min-height: 40px; }
  .admin-platform-page .admin-tabs { width: 100%; margin-bottom: 17px; }
  .admin-platform-page .admin-tab { min-height: 40px; padding: 0 12px; }
  .admin-platform-page .admin-overview { gap: 16px; }
  .admin-platform-page .admin-overview-hero { align-items: flex-start; flex-direction: column; gap: 13px; padding: 16px; }
  .admin-platform-page .admin-overview-copy h2 { font-size: 18px; }
  .admin-platform-page .admin-overview-copy p { font-size: 12px; }
  .admin-platform-page .admin-hero-status { width: 100%; min-width: 0; }
  .admin-platform-page .admin-section-note { display: none; }
  .admin-platform-page .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-platform-page .admin-stat-card { min-height: 126px; padding: 12px; }
  .admin-platform-page .admin-stat-top { margin-bottom: 9px; }
  .admin-platform-page .admin-stat-value { font-size: 22px; }
  .admin-platform-page .admin-stat-label { font-size: 11px; }
  .admin-platform-page .admin-stat-note { font-size: 11px; }
  .admin-platform-page .admin-hero-status small,
  .admin-platform-page .admin-health-copy small,
  .admin-platform-page .admin-activity-copy span,
  .admin-platform-page .admin-activity-time,
  .admin-platform-page .admin-empty span:last-child { font-size: 11px; }
  .admin-platform-page .admin-stat-live,
  .admin-platform-page .admin-state-tag { font-size: 11px; }
  .admin-platform-page .admin-panel { padding: 15px 14px 13px; }
  .admin-platform-page .admin-panel-head { gap: 8px; }
  .admin-platform-page .admin-panel-head p { max-width: 270px; }
  .admin-platform-page .admin-panel-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .admin-platform-page .admin-panel-actions .btn { min-height: 43px; }
  .admin-platform-page .admin-activity-item { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; }
  .admin-platform-page #a-body > .card,
  .admin-platform-page #a-body > .card:hover { padding: 16px 14px; }
  .admin-platform-page .admin-toolbar { align-items: stretch; }
  .admin-platform-page .admin-toolbar .dash-input,
  .admin-platform-page .admin-toolbar .dash-select { width: 100%; max-width: none !important; }
  .admin-platform-page #a-body > .card .dash-input { max-width: 100% !important; }
  .admin-platform-page .admin-users-table-wrap { overflow: visible; }
  .admin-platform-page .admin-users-table {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
  }
  .admin-platform-page .admin-users-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    clip-path: inset(50%);
  }
  .admin-platform-page .admin-users-table tbody { display: grid; gap: 9px; }
  .admin-platform-page .admin-users-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    padding: 12px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: var(--admin-surface-raised);
  }
  .admin-platform-page .admin-users-table tbody tr:hover { background: var(--admin-surface-raised); }
  .admin-platform-page .admin-users-table tbody td { min-width: 0; padding: 0; border: 0; }
  .admin-platform-page .admin-users-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .admin-platform-page .admin-users-table tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .admin-platform-page .admin-users-table tbody td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .admin-platform-page .admin-users-table tbody td:nth-child(3)::before,
  .admin-platform-page .admin-users-table tbody td:nth-child(4)::before {
    display: block;
    margin-bottom: 3px;
    color: var(--admin-subtle);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
  }
  .admin-platform-page .admin-users-table tbody td:nth-child(3)::before { content: "Serveurs"; }
  .admin-platform-page .admin-users-table tbody td:nth-child(4) { grid-column: 2; grid-row: 3; justify-self: start; }
  .admin-platform-page .admin-users-table tbody td:nth-child(4)::before { content: "Statut"; }
  .admin-platform-page .admin-users-table tbody td:nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 4;
    padding-top: 9px;
    border-top: 1px solid var(--admin-border-quiet);
  }
}
@media (max-width: 390px) {
  .admin-platform-page .admin-breadcrumb { gap: 6px; font-size: 11px; letter-spacing: .7px; }
  .admin-platform-page .admin-tab { gap: 6px; padding: 0 10px; font-size: 12px; }
  .admin-platform-page .admin-activity-item { grid-template-columns: 28px minmax(0, 1fr); }
  .admin-platform-page .admin-activity-time { grid-column: 2; margin-top: -5px; padding: 0; }
  .admin-platform-page .admin-health-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; }
  .admin-platform-page .admin-state-tag { font-size: 11px; }
}

/* ============================================================
   v361 — Catalogue de modules : émoticônes dessinées, fiches de
   lecture, aperçus « façon Discord » et libellés de boutons unifiés.
   Couche ajoutée à la fin : elle doit prendre le pas sur les couches
   historiques (certaines sont scopées .dashboard-shell-host).
   ============================================================ */

/* ---------- 1. L'émoticône d'un module, partout ----------
   Les couches historiques de ce fichier sont scopées en .dashboard-shell-host
   (et html.hx-os-pc pour le bureau) : les règles ci-dessous portent donc le
   même poids, en dernier, pour ne pas lutter contre elles. Elles ne touchent
   JAMAIS les tailles : chaque couche responsive continue de dimensionner les
   pastilles, l'image suit simplement la boîte. */
.mod-emote { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ico-fallback { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
html .has-emote .ico-fallback { display: none; }

/* Barre latérale : la pastille accueille l'image pleine largeur */
html .dashboard-shell-host .dash-side-item .ico { overflow: hidden; }
html .dashboard-shell-host .dash-side-item .ico.has-emote { background: transparent; border-radius: 8px; }
html .dashboard-shell-host .dash-side-item .ico.has-emote .mod-emote { border-radius: 8px; }
html .dashboard-shell-host .dash-side-item.active .ico.has-emote { background: transparent; box-shadow: none; }

/* En-tête de module : l'image remplace le fond dégradé, sans toucher à la taille */
html .dashboard-shell-host .dash-module-header .m-icon.has-emote,
html.hx-os-pc .dashboard-shell-host .dash-module-header .m-icon.has-emote {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 12px;
  overflow: hidden;
}
html .dashboard-shell-host .dash-module-header .m-icon.has-emote .mod-emote,
html.hx-os-pc .dashboard-shell-host .dash-module-header .m-icon.has-emote .mod-emote { border-radius: 12px; }

/* Vues d'ensemble et listes : la boîte garde sa taille, l'image la remplit. */
html .dashboard-shell-host .ov-module-icon { position: relative; overflow: hidden; background: transparent; border: 0; border-radius: 8px; }
html .dashboard-shell-host .ov-module-icon .mod-emote { width: 100%; height: 100%; border-radius: 8px; }
.sheet-ico.has-emote { display: inline-flex; align-items: center; justify-content: center; }
.sheet-ico .mod-emote { width: 26px; height: 26px; border-radius: 8px; }
.bnav-ico.has-emote { padding: 2px 9px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.bnav-ico.has-emote .mod-emote { width: 24px; height: 24px; border-radius: 8px; }
.dash-mobile-module-item > .mmi-ico { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.mmi-ico .mod-emote { width: 22px; height: 22px; border-radius: 8px; }
html .dashboard-shell-host .dp-ico { background: transparent; overflow: hidden; border-radius: 8px; }
.dp-ico .mod-emote { width: 30px; height: 30px; border-radius: 8px; }
.modal-header h3 .mod-emote { width: 26px; height: 26px; border-radius: 8px; display: inline-block; vertical-align: -6px; margin-right: 8px; }

/* ---------- 2. Famille du module, dans l'en-tête ---------- */
.module-cat {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--d-border); background: rgba(var(--d-accent-rgb), .07);
  color: var(--d-dim); font-size: 11px; font-weight: 750; letter-spacing: .3px;
}

/* ---------- 3. Fiche de lecture (ce que fait le module / l'aperçu) ---------- */
.mod-guide {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  margin: 0 0 20px; padding: 15px 17px;
  background: rgba(var(--d-accent-rgb), 0.07);
  border: 1px solid rgba(var(--d-accent-rgb), .22); border-radius: 12px;
}
.mod-guide:has(.mg-side) { grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); }
.mg-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; }
.mg-col { min-width: 0; }
.mg-kicker {
  display: block; margin-bottom: 4px; color: var(--d-accent);
  font-size: 9.5px;   /* exception épinglée par test/v366-test.js : 11 px n'est
                         exigé que sur mobile/tactile, où la règle deux classes
                         plus bas gagne en spécificité. Le socle PC reste 9,5 px. */
  font-weight: 800; letter-spacing: .75px; text-transform: uppercase;
}
.mg-col p { margin: 0; color: #c6ccda; font-size: 13px; line-height: 1.55; }
.mg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-side { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.mg-modal-note { margin-top: 12px; color: var(--d-dim); font-size: 12px; line-height: 1.5; }

/* ---------- 4. Aperçu « façon Discord » ---------- */
.dprev { background: #313338; border-radius: 12px; padding: 12px 14px; color: #dbdee1; font-size: 13px; }
.dprev.is-compact { font-size: 12px; padding: 10px 11px; }
.dprev-text { white-space: pre-wrap; margin-bottom: 8px; line-height: 1.45; }
.dprev-embed { background: #2b2d31; border-left: 4px solid var(--dprev-bar, var(--d-accent)); border-radius: 4px; padding: 9px 12px; }
.dprev-title { color: #fff; font-weight: 700; margin-bottom: 5px; font-size: 14px; }
.dprev.is-compact .dprev-title { font-size: 13px; }
.dprev-desc { color: #c9ccd1; line-height: 1.45; white-space: normal; }
.dprev-foot { margin-top: 7px; color: #949ba4; font-size: 11px; }
.dprev-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.dprev-btn {
  padding: 6px 13px; border-radius: 4px; font-size: 13px; font-weight: 600;
  background: #4e5058; color: #fff; transition: background .13s;
}
.dprev-btn.is-green { background: #248046; }
.dprev-btn.is-red { background: #da373c; }
.dprev-btn.is-blurple { background: #5865f2; }
.dprev-btn.is-purple { background: #9b59b6; }
.dprev-btn.is-grey { background: #4e5058; }
.dprev:hover .dprev-btn { filter: brightness(1.08); }

/* ---------- 5. Familles dans la vue d'ensemble ---------- */
.ov-module-cat {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  margin: 6px 0 -2px; color: var(--d-dim);
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
}
.ov-module-cat small {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; background: rgba(var(--d-accent-rgb), .14);
  color: var(--d-accent); font-size: 11px; letter-spacing: 0;
}
.ov-module-card { align-content: start; }

/* ---------- 6. Boutons : un seul langage de libellé ---------- */
.dash-btn { white-space: nowrap; }
.dash-btn .btn-ico { margin-right: 6px; }
.dash-btn-danger { color: #ffb4b8; }
html.hx-light .mod-guide { background: rgba(86,103,217, 0.06); border-color: #d3ddef; }
html.hx-light .mg-col p { color: #46536b; }
html.hx-light .module-cat { color: #687893; background: rgba(86,103,217, .06); border-color: #d3ddef; }

/* ---------- 7. Responsive ---------- */
@media (max-width: 1180px) {
  .mod-guide:has(.mg-side) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mod-guide { padding: 13px 13px; border-radius: 12px; }
  .mg-cols { grid-template-columns: 1fr; gap: 10px; }
  .mg-foot { flex-direction: column; align-items: stretch; }
  .mg-actions { justify-content: flex-start; }
  .mg-actions .dash-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dprev:hover .dprev-btn { filter: none; }
}

/* ============================================================
   v362 — Règles & Sondages : Markdown fidèle + widget de sondage.
   Couche ajoutée à la fin du fichier : elle doit battre les couches
   historiques sans les redéfinir.
   ============================================================ */

/* ---------- 1. Grille et champs ---------- */
.rl-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 14px;
  margin: 10px 0 4px;
}
.rl-grille-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rl-zone { min-height: 220px; line-height: 1.55; font-size: 13px; resize: vertical; }
.rl-compteur { float: right; font-size: 12px; color: var(--d-dim, #8b93a7); font-weight: 600; }
.rl-compteur.is-plein { color: #e07a5f; }
.rl-aide { font-size: 12px; color: var(--d-dim, #8b93a7); line-height: 1.5; margin: 6px 0 10px; }
.rl-note { font-size: 12px; color: var(--d-dim, #8b93a7); margin-top: 10px; line-height: 1.5; }
.rl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rl-actions .dash-btn { white-space: normal; }
.rl-preview { margin-top: 4px; }
.rl-puce-ligne { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.rl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rl-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(var(--d-accent-rgb), .14);
  border: 1px solid rgba(var(--d-accent-rgb), .3);
  color: var(--d-accent);
  font-size: 12px;
  font-weight: 600;
}
.rl-vide { display: block; font-size: 12px; color: var(--d-dim, #8b93a7); padding: 4px 0; }
.rl-result { margin-top: 12px; }
.rl-result-titre { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.rl-modeles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 8px 0 14px; padding: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 8px;
}
.rl-modeles-titre { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--d-dim, #8b93a7); }
html.hx-light .rl-modeles { background: rgba(20, 30, 60, .04); border-color: #d3ddef; }
html.hx-light .rl-chip { color: #3d477a; background: rgba(86, 103, 217, .1); }

/* ---------- 2. Markdown Discord, tel qu'il est rendu dans l'aperçu ---------- */
.dmd { color: #c9ccd1; font-size: 13px; line-height: 1.55; }
.dmd > * + * { margin-top: 6px; }
.dmd b { color: #fff; font-weight: 800; }
.dmd i { font-style: italic; }
.dmd u { text-decoration: underline; }
.dmd s { opacity: .7; }
.dmd code {
  background: rgba(255, 255, 255, .08);
  border-radius: 4px;
  padding: 1px 5px;
  font: 600 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dmd-code {
  background: #1e1f22;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  padding: 8px 10px;
  font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-x: auto;
}
.dmd-quote {
  border-left: 3px solid rgba(255, 255, 255, .22);
  padding: 2px 0 2px 10px;
  color: #d6d9de;
}
.dmd-list { margin: 0; padding-left: 20px; }
.dmd-list li { margin: 2px 0; }
.dmd-h1 { font-size: 16px; font-weight: 800; color: #fff; }
.dmd-h2 { font-size: 14px; font-weight: 800; color: #fff; }
.dmd-h3 { font-size: 13px; font-weight: 800; color: #e6e8ec; text-transform: uppercase; letter-spacing: .03em; }
.dmd-sep { border: 0; border-top: 1px solid rgba(255, 255, 255, .16); margin: 10px 0; }
.dmd-spoiler { background: rgba(255, 255, 255, .18); border-radius: 4px; color: transparent; padding: 0 3px; }
.dmd-spoiler:hover { color: inherit; background: rgba(255, 255, 255, .08); }
.dmd-mention {
  background: #5865F23D;
  color: #dee0fc;
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}
.dmd-empty { font-size: 12px; color: var(--d-dim, #8b93a7); font-style: italic; }
.dprev .dmd { margin-top: 6px; }
html.hx-light .dmd { color: #3d4250; }
html.hx-light .dmd b, html.hx-light .dmd-h1, html.hx-light .dmd-h2 { color: #16181d; }
html.hx-light .dmd-code { background: #f1f2f5; border-color: #dfe2ea; }
html.hx-light .dmd-quote { border-color: rgba(20, 30, 60, .25); color: #474d5c; }
html.hx-light .dmd-spoiler { background: rgba(20, 30, 60, .16); }

/* ---------- 3. Widget de sondage natif ---------- */
.dprev-poll {
  background: #313338;
  border-radius: 12px;
  padding: 12px 14px;
  color: #dbdee1;
  font-size: 13px;
}
.dpp-intro { margin-bottom: 8px; }
.dpp-question { color: #fff; font-weight: 700; margin-bottom: 9px; line-height: 1.4; }
.dpp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.dpp-row + .dpp-row { margin-top: 4px; }
.dpp-row:not(.is-closed) { background: rgba(255, 255, 255, .04); }
.dpp-box {
  width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid #b5bac1;
  border-radius: 50%;
}
.dpp-box.is-square { border-radius: 4px; }
.dpp-txt { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 13px; }
.dpp-bar { position: absolute; inset: 0; z-index: 0; display: block; }
.dpp-bar > span {
  display: block; height: 100%;
  background: #5865F266;
  border-radius: 8px 0 0 8px;
}
.dpp-row.is-closed .dpp-bar > span { background: #5865F2A6; }
.dpp-n { position: relative; z-index: 1; font-size: 12px; color: #949ba4; font-weight: 700; }
.dpp-foot {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px; color: #949ba4;
}
.dpp-multi { margin-top: 6px; font-size: 11px; color: #949ba4; }
.dpp-empty { font-size: 12px; color: #949ba4; font-style: italic; padding: 6px 0; }
html.hx-light .dprev-poll { background: #f4f5f8; color: #23272e; }
html.hx-light .dpp-question { color: #16181d; }
html.hx-light .dpp-box { border-color: #747f8d; }
html.hx-light .dpp-foot { border-color: rgba(20, 30, 60, .12); }
html.hx-light .dpp-foot, html.hx-light .dpp-n, html.hx-light .dpp-multi { color: #5b6169; }
.dprev .dprev-poll { background: transparent; border-radius: 0; padding: 0; }

/* ---------- 4. Historique des sondages ---------- */
.pp-opts { display: flex; flex-direction: column; gap: 7px; }
.pp-opt { display: flex; align-items: center; gap: 8px; }
.pp-opt .dash-input { flex: 1 1 auto; }
.pp-num {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  font-size: 11px; font-weight: 800;
  color: var(--d-dim, #8b93a7);
}
.pp-del {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: var(--d-dim, #8b93a7);
  cursor: pointer;
  font-size: 12px; line-height: 1;
}
.pp-del:hover { color: #ff7b81; border-color: rgba(255, 123, 129, .5); }
html.hx-light .pp-num { background: rgba(20, 30, 60, .07); }
html.hx-light .pp-del { border-color: #d3ddef; }
.pp-liste { display: flex; flex-direction: column; gap: 10px; }
.pp-row {
  border: 1px solid var(--d-border, rgba(255, 255, 255, .08));
  border-radius: 12px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, .02);
}
.pp-row-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pp-question { font-weight: 700; font-size: 13px; }
.pp-meta { font-size: 12px; color: var(--d-dim, #8b93a7); }
.pp-letat {
  font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent;
}
.pp-letat.is-ouvert { color: #9fe8b8; background: rgba(87, 242, 135, .12); border-color: rgba(87, 242, 135, .3); }
.pp-letat.is-clos { color: var(--d-accent); background: rgba(var(--d-accent-rgb), .12); border-color: rgba(var(--d-accent-rgb), .3); }
.pp-row-barre { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.pp-row-resultat { margin-top: 10px; }
.pp-lien { margin-top: 8px; font-size: 12px; }
.pp-lien a { color: #a9b2f5; text-decoration: none; }
.pp-lien a:hover { text-decoration: underline; }
.pp-votants { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pp-votants-ligne { font-size: 12px; color: var(--d-dim, #8b93a7); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- 5. Responsive ---------- */
@media (max-width: 700px) {
  .rl-grille, .rl-grille-2 { grid-template-columns: minmax(0, 1fr); }
  .rl-actions { flex-direction: column; align-items: stretch; }
  .rl-actions .dash-btn { justify-content: center; }
  .pp-row-tete { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dpp-foot { flex-direction: column; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .dmd-spoiler { transition: none; }
}

/* ============================================================
   v363 — Règles : le panneau se pilote à vue d'œil.
   ----------------------------------------------------------
   • .rl-plan : la ligne sous la zone de texte dit ce que Discord
     affichera (nombre de blocs, regroupement automatique) ;
   • .rl-modele : les modèles livrés deviennent des cartes lisibles
     (nom, intention, taille) au lieu d'une rangée de boutons ;
   • .dprev-sep / .dprev-carte : l'aperçu montre les vrais séparateurs
     pleine largeur et le bouton en accessoire quand ce mode est choisi.
   ============================================================ */
.rl-plan { font-size: 12px; color: var(--d-dim, #8b93a7); margin: 6px 0 10px; line-height: 1.45; }
.rl-plan strong { color: inherit; }
.rl-plan.is-haut { color: #e07a5f; }

.rl-modeles-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.rl-modele {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid rgba(var(--d-accent-rgb), .16);
  border-radius: 8px;
  background: rgba(var(--d-accent-rgb), .05);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.rl-modele:hover {
  border-color: rgba(var(--d-accent-rgb), .42);
  background: rgba(var(--d-accent-rgb), .1);
  transform: translateY(-1px);
}
.rl-modele:focus-visible { outline: 2px solid rgba(var(--d-accent-rgb), .7); outline-offset: 2px; }
.rl-modele-nom { font-size: 13px; font-weight: 700; color: var(--d-text, #e9edf6); line-height: 1.3; }
.rl-modele-hint { font-size: 11px; color: var(--d-dim, #8b93a7); line-height: 1.4; }
.rl-modele-taille {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--d-dim, #8b93a7);
}

/* Séparateur pleine largeur, comme le <Separator> natif de Discord. */
.dprev-sep { height: 1px; margin: 10px 0; background: rgba(255, 255, 255, .08); }

/* Bouton en accessoire d'une Section (mode « Intégré »). */
.dprev-carte {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}
.dprev-carte-texte { font-size: 12px; color: #b8bfcb; flex: 1 1 auto; min-width: 0; }
.dprev-carte > div:last-child { flex: 0 0 auto; }

html.hx-light .rl-modele { border-color: #d3ddef; background: rgba(20, 30, 60, .03); }
html.hx-light .rl-modele:hover { border-color: #b9c6e0; background: rgba(20, 30, 60, .06); }
html.hx-light .dprev-sep { background: rgba(20, 30, 60, .12); }
html.hx-light .dprev-carte { background: rgba(20, 30, 60, .05); }
html.hx-light .dprev-carte-texte { color: #4a5468; }

@media (max-width: 640px) {
  .rl-modeles-grille { grid-template-columns: minmax(0, 1fr); }
  .dprev-carte { flex-direction: column; align-items: stretch; }
  .dprev-carte .dprev-btn { justify-content: center; }
}

/* v367 — controles au cran de 40 (harmonise-le-decor) : le mode PC est corrige
   dans son propre bloc (html.hx-os-pc), celui-ci tient les petits ajouts du
   dessinateur (pastille d'ajout, filtres) qui n'y sont pas. */
@media (min-width: 768px) {
  /* les filtres de liste noire suivent les boutons ; le « + Ajouter » du selecteur
     multiple reste a 32px : il vit DANS un champ de 44px, ce n'est pas un bouton
     de barre d'actions. */
  .am-filter { min-height: 40px; }
}

/* Retour d'enregistrement : etat du bouton + horodatage a cote. Le style est
   volontairement discret — c'est une constatation, pas une fanfare. */
.dash-btn.is-done, .dash-save-action.is-done {
  border-color: rgba(87, 242, 135, .5);
  color: #b6f3c9;
  background: rgba(87, 242, 135, .12);
}
.save-stamp {
  display: inline-block;
  margin-left: 10px;
  align-self: center;
  font-size: 11px;
  color: var(--d-dim, #8a93a8);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
.save-stamp.is-on { opacity: 1; transform: none; }

/* v367 — controles au cran de 40 (harmonise-le-decor) */
@media (min-width: 768px) {
  .am-filter { min-height: 40px; }
}

/* Retour d'enregistrement : etat du bouton + horodatage a cote. Le style est
   volontairement discret — c'est une constatation, pas une fanfare. */
.dash-btn.is-done, .dash-save-action.is-done {
  border-color: rgba(87, 242, 135, .5);
  color: #b6f3c9;
  background: rgba(87, 242, 135, .12);
}
.save-stamp {
  display: inline-block;
  margin-left: 10px;
  align-self: center;
  font-size: 11px;
  color: var(--d-dim, #8a93a8);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
.save-stamp.is-on { opacity: 1; transform: none; }

/* Les noms de serveurs et les options des menus doivent prendre la police de
   l'interface : sans cet héritage, <button> et <select> retombent sur la police
   par défaut du système, qui arrive serif selon le poste. */
html .dashboard-shell-host button,
html .dashboard-shell-host select,
html .dashboard-shell-host option,
html .dashboard-shell-host input,
html .dashboard-shell-host textarea { font-family: inherit; }

/* La regle de la tuile d'entree laterale impose sa couleur aux glyphes ; celle
   de l'administration globale doit passer apres elle pour que la couronne suive
   la teinte du lien dans les deux themes. */
html .dashboard-shell-host .dash-global-admin .ico,
html.hx-light .dashboard-shell-host .dash-global-admin .ico { color: inherit; }

/* ════════════════════════════════════════════════════════════════
   v377 — Pieds de carte sur petit écran
   ----------------------------------------------------------------
   Mesuré à 375 px dans le module Tickets : six boutons dépassaient
   à droite (jusqu'à 420 px pour un écran de 375). Deux causes :
   `white-space: nowrap` et `flex-shrink: 0` empêchaient le libellé
   de se replier, et chaque bouton gardait sa largeur naturelle dans
   une carte large de 245 px.
   ════════════════════════════════════════════════════════════════ */
.card-actions { min-width: 0; max-width: 100%; }
.card-actions .dash-btn, .card-actions .btn {
  min-width: 0; max-width: 100%;
  white-space: normal; text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .card-actions { flex-direction: column; align-items: stretch; }
  .card-actions .dash-btn, .card-actions .btn { width: 100%; flex: 0 0 auto; }
}

/* Un tableau ne dépasse jamais sa carte : il défile dans son cadre. */
.dash-table-fit { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dash-card table.dash-table { max-width: 100%; }

/* ════════════════════════════════════════════════════════════════
   v377 — Un seul chevron pour tout le tableau de bord
   ----------------------------------------------------------------
   Les blocs pliables dessinaient leur indicateur avec des glyphes
   Unicode (▸ ▾ ⌄). Selon la police du système, ils sortent en
   triangle plein, en petit carré ou en simple lettre « v ». Ils
   sont remplacés par le même trait que l'icône « chevron » de la
   banque SVG, dessiné par un masque : une seule forme, partout,
   et la couleur suit le texte.
   ════════════════════════════════════════════════════════════════ */
.tk-fold-sum::after,
.am-rule-more summary::after,
.am-fold > summary::after,
details > summary.am-chevron::after {
  content: '' !important;
  display: inline-block;
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin-left: 6px;
  background-color: currentColor;
  opacity: .75;
  -webkit-mask: var(--chevron-down) center / 16px 16px no-repeat;
  mask: var(--chevron-down) center / 16px 16px no-repeat;
  transform: rotate(-90deg);
  transition: transform .16s ease;
}
.tk-fold[open] .tk-fold-sum::after,
.am-rule-more[open] summary::after,
.am-fold[open] > summary::after,
details[open] > summary.am-chevron::after { transform: none; }
.am-fold > summary::after { float: right; margin-top: 3px; }

/* ════════════════════════════════════════════════════════════════
   v377 — Puces de variables ({user}, {server}…)
   ----------------------------------------------------------------
   La syntaxe est écrite en minuscules et le reste : `text-transform`
   est explicitement neutralisé, une variable transformée en
   {USER} ne serait plus remplacée par le moteur du bot.
   ════════════════════════════════════════════════════════════════ */
.var-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 8px; padding: 8px 10px;
  background: rgba(255, 255, 255, .022);
  border: 1px dashed var(--d-border); border-radius: 12px;
}
.var-chips-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--d-dim); text-transform: none;
}
.var-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1; padding: 6px 9px;
  border-radius: 8px; cursor: pointer;
  color: var(--d-text); background: rgba(var(--d-accent-rgb), .12);
  border: 1px solid rgba(var(--d-accent-rgb), .35);
  text-transform: none; letter-spacing: 0;
  transition: background .14s ease, transform .12s ease;
}
.var-chip:hover { background: rgba(var(--d-accent-rgb), .22); }
.var-chip:active { transform: scale(.96); }
.var-chip:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; }
@media (max-width: 700px) {
  .var-chips { gap: 5px; padding: 7px 8px; }
  .var-chip { font-size: 11.5px; padding: 7px 8px; }
}

/* ════════════════════════════════════════════════════════════════
   v378 — Cibles tactiles du tableau de bord : l'ordre des règles
   ----------------------------------------------------------------
   La règle mobile qui remontait les petits boutons à 40 px était
   écrite AVANT la taille de base (32 px) plus haut dans ce fichier :
   à spécificité égale, c'est la dernière qui gagne, donc la règle
   mobile ne s'appliquait jamais. Mesuré à 375 px : 32 px de haut sur
   les boutons « Ajouter un salon », « Ajouter un rôle », etc. Les
   rappels ci-dessous passent après et rétablissent 40 px.
   ════════════════════════════════════════════════════════════════ */
/* Le bouton d'ajout portait son libellé sur une seule ligne (311 px mesures a
   768 px) dans une colonne de 182 px : il depassait de 145 px et sortait de la
   carte. Il peut desormais se replier sur deux lignes et rester dans sa boite. */
.dashboard-shell-host .discord-multi-picker { min-width: 0; }
.dashboard-shell-host .discord-multi-picker .dd-add-btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .dash-btn { min-height: 46px; }
  .dash-btn-sm { min-height: 40px; }
  .dash-btn-lg { min-height: 50px; }
  /* Un bouton de 40 px de haut doit rester lisible : le texte garde sa taille. */
  .dash-btn-sm { padding-top: 6px; padding-bottom: 6px; }
  /* Les liens de texte des cartes suivent la même règle que les boutons. */
  .dash-card a[href], .dash-card button.link-like { display: inline-flex; align-items: center; min-height: 40px; }
  /* Cases à cocher posées à la main dans les modules (« Activer le captcha
     à l'arrivée », « Autoriser plusieurs réponses »…). Ces <label> n'ont pas
     de classe et ne faisaient que 20 px de haut ; on porte la ligne à la
     hauteur des autres cibles sans toucher au texte. */
  #dash-content label:not([class]) { min-height: 40px; }
  /* Bouton d'ajout du multi-sélecteur : 32 px mesurés à 375 px
     (« Ajouter un salon », « Ajouter un rôle »). */
  .dashboard-shell-host .discord-multi-picker .dd-add-btn { min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
}