/* ==========================================================================
   TweaxHub — thème « Dashboard » noir & blanc (v3)
   Inspiré d'un dashboard musique : panneaux arrondis, sidebar sobre,
   gros titres, boutons ronds / pilules, cartes avec visuels.
   100 % monochrome : aucun accent de couleur (rouge / vert supprimés).
   Se charge APRÈS tx.css sur toutes les pages.
   ========================================================================== */

/* ── 1. Tokens monochromes ─────────────────────────────────────────────── */
:root {
  --dx-bg: #000000;
  --dx-panel: #0f0f0f;
  --dx-panel-2: #151515;
  --dx-panel-3: #1b1b1b;
  --dx-line: #232323;
  --dx-line-strong: #343434;
  --dx-text: #f5f5f5;
  --dx-text-2: #a8a8a8;
  --dx-text-3: #6b6b6b;
  --dx-white-grad: linear-gradient(135deg, #ffffff 0%, #d9d9d9 55%, #8c8c8c 100%);
  --dx-r-panel: 22px;
  --dx-r-card: 18px;
  --dx-r-item: 14px;

  /* On écrase l'accent rouge / vert du système précédent */
  --tx-canvas: var(--dx-bg);
  --tx-surface: var(--dx-panel);
  --tx-elevated: var(--dx-panel-2);
  --tx-glass: var(--dx-panel);
  --tx-glass-solid: #101010;
  --tx-fill-subtle: rgba(255, 255, 255, 0.03);
  --tx-fill: rgba(255, 255, 255, 0.06);
  --tx-fill-hover: rgba(255, 255, 255, 0.1);
  --tx-line: var(--dx-line);
  --tx-line-strong: var(--dx-line-strong);
  --tx-accent: #ffffff;
  --tx-accent-soft: rgba(255, 255, 255, 0.1);
  --tx-ok: #e6e6e6;
  --tx-warn: #bdbdbd;
  --tx-r-panel: var(--dx-r-panel);
  --tx-r-item: var(--dx-r-item);
  --green: #e6e6e6;
  --grad: var(--dx-white-grad);
  --grad-cyan: var(--dx-white-grad);
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
html, html body { background: var(--dx-bg) !important; }
html body {
  background-image: none !important;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--dx-text);
}
::selection { background: #ffffff; color: #000000; }
h1, h2, h3, .section-title, .hero-title, .card-name, .modal-title {
  font-family: "Outfit", "Inter", sans-serif;
  letter-spacing: -0.025em;
}

/* Tout texte « coloré » devient blanc / gris */
.grad-text, .hero-title .grad-text, .section-title .grad-text,
.section-title span {
  color: var(--dx-text-3) !important;
  -webkit-text-fill-color: var(--dx-text-3) !important;
  background: none !important;
}

/* ── 3. Barre du haut : fine, plate, façon « topbar » de dashboard ─────── */
html body #navbar {
  top: 14px; left: 14px; right: 14px; height: 60px;
  background: var(--dx-panel);
  border: 1px solid var(--dx-line);
  border-radius: var(--dx-r-panel);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body #navbar.tx-scrolled { background: #0b0b0b; }
.nav-logo { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.1rem; }
.nav-logo-img { filter: grayscale(1) contrast(1.1); border-radius: 10px; }

.user-avatar-btn {
  background: var(--dx-panel-2);
  border: 1px solid var(--dx-line);
  border-radius: 999px;
}
.user-avatar-btn:hover { background: var(--dx-panel-3); }
#notif-bell-btn, #friends-btn, #nav-shop-btn {
  border: 1px solid var(--dx-line);
  border-radius: 50%;
  width: 40px; height: 40px;
  background: var(--dx-panel-2);
}
#notif-bell-btn:hover, #friends-btn:hover, #nav-shop-btn:hover { background: var(--dx-panel-3); color: #fff; }
.notif-badge, #dm-sidebar-badge { background: #ffffff !important; color: #000000 !important; }
.notif-item-dot { background: #ffffff; }

/* ── 4. Sidebar : panneau sombre, entrée active « remplie » ───────────── */
html body #cat-sidebar {
  top: 88px; left: 14px; bottom: 14px; width: 248px;
  background: var(--dx-panel);
  border: 1px solid var(--dx-line);
  border-radius: var(--dx-r-panel);
  padding: 18px 12px 12px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cat-sidebar-head-label {
  font-size: .68rem; letter-spacing: .14em; color: var(--dx-text-3);
}
.cat-list { border-bottom: 1px solid var(--dx-line); padding-bottom: 12px; gap: 4px; }
.cat-item, .cat-sidebar-footer .dropdown-item {
  color: var(--dx-text-2);
  border-radius: 14px;
  padding: 6px 10px;
  font-weight: 560;
}
.cat-item:hover, .cat-sidebar-footer .dropdown-item:hover {
  background: var(--dx-panel-2); color: #fff;
}
.cat-item.active, .cat-item[aria-current="page"],
.cat-sidebar-footer .dropdown-item.active {
  background: var(--dx-panel-3) !important;
  color: #ffffff !important;
  border: 1px solid var(--dx-line-strong) !important;
}
.cat-item.active::before { display: none !important; }
.cat-item.active i, .cat-sidebar-footer .dropdown-item.active i { color: #fff; }

.sidebar-user-panel, .sidebar-login-panel, .sidebar-now-playing {
  background: var(--dx-panel-2);
  border: 1px solid var(--dx-line);
  border-radius: 18px;
}
.sup-avatar, .mini-player-art img { filter: grayscale(1); }
.mini-player-progress-track { background: #2a2a2a; }
.mini-player-progress-fill { background: #ffffff; }
#mini-player-toggle {
  background: #ffffff !important; color: #000 !important; border-radius: 50% !important;
}
#mini-player-toggle:hover { background: #d9d9d9 !important; }

/* ── 5. Boutons : pilule blanche dégradée + cercles « play » ──────────── */
.btn { border-radius: 999px; }
.btn-primary {
  background: var(--dx-white-grad);
  color: #000000;
  border: 0;
  font-weight: 700;
}
.btn-primary:hover { background: #ffffff; filter: none; }
.btn-outline {
  background: transparent; color: #fff;
  border: 1px solid var(--dx-line-strong);
}
.btn-outline:hover { background: var(--dx-panel-3); border-color: #5a5a5a; }
.btn-danger {
  background: transparent; color: #fff; border: 1px dashed #5a5a5a;
}
.btn-danger:hover { background: #fff; color: #000; }
.btn-discord { background: #ffffff; color: #000000; }
.btn-discord:hover { background: #d9d9d9; }
.btn-sm { border-radius: 999px; }
.btn-lg { border-radius: 999px; }

/* Bouton rond « play » (lecture) — cercle contour blanc */
.play-btn, .card-play-btn, .channel-play, .round-play,
#mini-player-resume, .mini-player-resume-btn {
  border-radius: 50%;
}
.join-btn {
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid #ffffff;
  color: #ffffff;
  font-weight: 700;
}
.join-btn:hover { background: #ffffff; color: #000000; box-shadow: none; }

/* ── 6. Formulaires ────────────────────────────────────────────────────── */
.form-input, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"], textarea, select {
  background: var(--dx-panel-2);
  border: 1px solid var(--dx-line);
  border-radius: 16px;
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  border-color: #ffffff; background: var(--dx-panel-3);
}
input[type="range"] { accent-color: #ffffff; }
.form-error { background: rgba(255,255,255,.06); color: #fff; border: 1px solid var(--dx-line-strong); }
.form-success { background: rgba(255,255,255,.06); color: #fff; border: 1px solid var(--dx-line-strong); }
.dropdown-item.red { color: #d0d0d0; }
.dropdown-item.red:hover { background: #fff; color: #000; }

/* ── 7. Accueil : gros hero « carte artiste » ─────────────────────────── */
#hero {
  min-height: auto;
  padding: 100px 1.5rem 30px;
}
.hero-inner {
  max-width: 1280px;
  background:
    radial-gradient(520px 340px at 85% 40%, rgba(255,255,255,.14), transparent 70%),
    linear-gradient(135deg, #0c0c0c 0%, #141414 100%);
  border: 1px solid var(--dx-line);
  border-radius: 28px;
  padding: 3.5rem 3.5rem;
  gap: 3rem;
  position: relative;
  overflow: hidden;
}
.hero-inner::after {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 65%);
  pointer-events: none;
}
.hero-title { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; line-height: 1.05; }
.hero-badge {
  background: transparent; border: 1px solid var(--dx-line-strong);
  color: var(--dx-text-2); box-shadow: none; border-radius: 999px;
}
.hero-badge span, .live-dot, .live-badge span, .card-now-label span {
  background: #ffffff !important; box-shadow: 0 0 10px rgba(255,255,255,.6) !important;
}
.hero-stats { border-top: 1px solid var(--dx-line); }
.stat-item {
  background: var(--dx-panel-2); border: 1px solid var(--dx-line);
  border-radius: var(--dx-r-card);
}
.stat-item .stat-num {
  background: none; -webkit-text-fill-color: #ffffff; color: #ffffff;
}
.hero-card {
  background: rgba(10,10,10,.7);
  border: 1px solid var(--dx-line-strong);
  border-radius: 24px;
  animation: none;
}
.hero-bar { background: linear-gradient(180deg, #ffffff, #5a5a5a); border-radius: 4px; }
.hero-thumb { background: #ffffff; color: #000; border-radius: 14px; }

/* ── 8. Sections et cartes ────────────────────────────────────────────── */
.section-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; }
.landing-eyebrow { color: var(--dx-text-3); }

.channel-card, .feature-card, .step-card, .group-card, .ban-card {
  background: var(--dx-panel);
  border: 1px solid var(--dx-line);
  border-radius: var(--dx-r-card);
  padding: 20px;
}
.channel-card::before { display: none; }
.channel-card:hover, .feature-card:hover, .step-card:hover, .group-card:hover {
  background: var(--dx-panel-2);
  border-color: #4a4a4a;
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.9);
}
.card-now-thumb, .channel-card img, .channel-thumb, .card-thumb {
  border-radius: 14px;
}
/* Visuels en niveaux de gris (couleur au survol, comme un effet « éclairé ») */
.channel-card img, .card-now-thumb, .hero-thumb img, .card-thumb,
.avatar-circle, .avatar-img, .sup-avatar, .friend-avatar, .dm-avatar,
.classement-avatar, .rank-avatar, .shop-item img, .product-card img,
[class*="thumb"] img, [class*="cover"] img, [class*="banner"] img {
  filter: grayscale(1) contrast(1.05);
  transition: filter .35s ease;
}
.channel-card:hover img, .channel-card:hover .card-now-thumb,
[class*="thumb"]:hover img, [class*="cover"]:hover img { filter: grayscale(.2) contrast(1.05); }

.card-genre-badge {
  background: var(--dx-panel-3) !important;
  color: #fff !important;
  border: 1px solid var(--dx-line-strong) !important;
}
.live-badge {
  background: #ffffff !important; color: #000000 !important; border: 0 !important;
}
.card-now-playing {
  background: var(--dx-panel-2); border: 1px solid var(--dx-line); border-radius: 16px;
}
.card-now-label { color: var(--dx-text-2); }
.card-fav-btn.active svg { fill: #ffffff; }

.feature-icon, .step-num {
  background: #ffffff; color: #000000; border-radius: 50%;
  font-weight: 800;
}
#cta-banner .cta-banner-inner {
  background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
  border: 1px solid var(--dx-line);
  border-radius: 28px;
}

/* ── 9. Modales, menus, toasts ────────────────────────────────────────── */
.modal, .dropdown-menu, .notif-dropdown, .ai-chat-panel, .tx-pal-box {
  background: #101010;
  border: 1px solid var(--dx-line-strong);
  border-radius: 22px;
}
.modal-overlay { background: rgba(0,0,0,.78); }
.toast.success, .toast.error { border-color: var(--dx-line-strong); }
.friends-tab.active, .sub-add-tab.active { background: #ffffff; color: #000000; }
.ai-chat-fab { background: #ffffff; color: #000000; }
.ai-chat-fab-dot { background: #ffffff; border-color: #000; }
.ai-chat-msg.user, .ai-chat-send { background: #ffffff; color: #000000; }
#tx-progress { background: linear-gradient(90deg, transparent, #ffffff); }

/* Statuts utilisateur : niveaux de gris (en ligne = blanc plein) */
.status-dot, .navbar-status-dot { box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.status-dot.online, .status-dot[data-status="online"] { background: #ffffff !important; }
.status-dot.idle, .status-dot[data-status="idle"] { background: #9a9a9a !important; }
.status-dot.dnd, .status-dot[data-status="dnd"] { background: #5a5a5a !important; }
.status-dot.offline, .status-dot[data-status="offline"],
.status-dot.invisible, .status-dot[data-status="invisible"] { background: #2e2e2e !important; border: 1px solid #6b6b6b; }

/* ── 11. Scrollbars ───────────────────────────────────────────────────── */
html { scrollbar-color: #3a3a3a transparent; }

/* ── 12. Sécurité noir & blanc : neutralise toute couleur résiduelle ──── */
/* Les lecteurs vidéo / iframes ne sont PAS touchés. Les pastilles de statut
   et le contenu externe gardent leurs vraies couleurs de pixels, mais tout
   l'habillage de l'interface reste monochrome. */
html body [style*="color:#ff"], html body [style*="color: #ff"] { color: #ffffff; }


/* ==========================================================================
   v4 — STRUCTURE « APP » : grand cadre arrondi, sidebar avec logo, topbar
   avec recherche, rail droit. Uniquement sur les pages qui ont #navbar.
   ========================================================================== */

/* Composants communs (rail / albums / créateurs) */
.dx-pill-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border: 1px solid var(--dx-line-strong); border-radius: 10px; background: transparent;
  color: var(--dx-text); font-size: .78rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.dx-pill-btn:hover { background: var(--dx-panel-3); }
.dx-pill-btn i { width: 14px; height: 14px; }
.dx-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dx-block-head h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.dx-empty { color: var(--dx-text-3); font-size: .86rem; padding: 14px 4px; }
.dx-row-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dx-row-info b { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-row-info small { color: var(--dx-text-3); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #2a2a2a, #0d0d0d); color: #bdbdbd; }
.dx-thumb-ph i { width: 20px; height: 20px; }
.dx-thumb-ph.big i { width: 44px; height: 44px; opacity: .7; }

.dx-crown { display: flex; align-items: center; gap: 8px; color: var(--dx-text-2); font-size: .86rem; margin-bottom: 14px; }
.dx-row {
  display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 14px; color: var(--dx-text);
  transition: background .15s;
}
.dx-row:hover, .dx-row.is-hot { background: var(--dx-panel-3); }
.dx-row-thumb { width: 50px; height: 50px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #1a1a1a; }
.dx-row-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.dx-round-play {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #ffffff; color: #ffffff;
}
.dx-round-play i { width: 15px; height: 15px; fill: currentColor; }
.dx-row.is-hot .dx-round-play, .dx-row:hover .dx-round-play { background: var(--dx-white-grad); color: #000; border-color: transparent; }

.dx-albums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dx-album { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--dx-line); border-radius: 20px; background: var(--dx-panel); color: var(--dx-text); transition: border-color .2s, background .2s; }
.dx-album:hover { border-color: #4a4a4a; background: var(--dx-panel-2); }
.dx-album-cover { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #181818; }
.dx-album-cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.dx-album-name { font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-album-meta { display: flex; justify-content: space-between; color: var(--dx-text-3); font-size: .84rem; }
.dx-album-meta span { display: inline-flex; align-items: center; gap: 6px; }
.dx-album-meta i { width: 14px; height: 14px; }

.dx-panel { padding: 22px; border: 1px solid var(--dx-line); border-radius: 22px; background: var(--dx-panel); }
.dx-creators { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 36px; }
.dx-creator { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.dx-creator-av { width: 50px; height: 50px; border-radius: 10px; background: #e9e9e9; color: #000; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: "Outfit", sans-serif; }

.dx-now { margin-top: 18px; position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--dx-line); min-height: 290px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 50% 22%, #5a5a5a 0%, #1a1a1a 55%, #0a0a0a 100%); }
.dx-now-art { position: absolute; inset: 0 0 90px 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); }
.dx-now-art i { width: 84px; height: 84px; }
.dx-now-card { margin: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(10,10,10,.55); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-align: center; position: relative; }
.dx-now-card b { display: block; font-size: .9rem; font-weight: 600; }
.dx-now-card small { color: var(--dx-text-3); font-size: .75rem; }
.dx-now-bar { height: 3px; background: #3a3a3a; border-radius: 3px; margin: 12px 0; position: relative; }
.dx-now-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; background: #fff; border-radius: 3px; }
.dx-now-bar span::after { content: ""; position: absolute; right: -4px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.dx-now-ctrl { display: flex; align-items: center; justify-content: space-between; color: #fff; }
.dx-now-ctrl i { width: 17px; height: 17px; }
.dx-now-play { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.28); display: inline-flex; align-items: center; justify-content: center; }
.dx-now-play i { fill: #fff; }

/* Recherche dans la barre du haut */
.dx-search {
  flex: 1; max-width: none; display: flex; align-items: center; height: 46px;
  background: var(--dx-panel-2); border: 1px solid var(--dx-line); border-radius: 12px; padding: 0 6px 0 16px; margin: 0 22px 0 0;
}
.dx-search:focus-within { border-color: #6a6a6a; }
.dx-search input { flex: 1; background: transparent !important; border: 0 !important; min-height: 0; height: 100%; padding: 0; border-radius: 0; font-size: .92rem; color: #fff; outline: none; box-shadow: none !important; }
.dx-search button { width: 38px; height: 38px; border: 0; background: transparent; color: #fff; cursor: pointer; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.dx-search button:hover { background: var(--dx-panel-3); }

/* ── Desktop : l'app occupe TOUTE la fenêtre (plein écran) ──────────── */
@media (min-width: 901px) {
  html:has(#navbar), html body:has(#navbar) { background: #0a0a0a !important; }

  html body #navbar {
    top: 0; left: 256px; right: 0; height: 76px; padding: 0 28px 0 28px;
    background: #0a0a0a; border: 0; border-bottom: 1px solid var(--dx-line); border-radius: 0; gap: 16px;
  }
  html body #navbar.tx-scrolled { background: #0a0a0a; }
  html body #sidebar-toggle { display: none !important; }

  /* logo posé dans l'en-tête de la sidebar */
  html body #navbar .nav-logo {
    position: absolute; left: -256px; top: 0; width: 256px; height: 76px; padding-left: 28px;
    border-bottom: 1px solid var(--dx-line); font-size: 1.15rem;
  }

  html body #cat-sidebar {
    top: 0; left: 0; bottom: 0; width: 256px; padding: 92px 16px 14px;
    background: #0a0a0a; border: 0; border-right: 1px solid var(--dx-line); border-radius: 0;
  }
  html body #cat-sidebar.collapsed { width: 256px; }
  #cat-sidebar .cat-sidebar-collapse-btn { display: none; }
  #cat-sidebar.collapsed .cat-sidebar-head-label,
  #cat-sidebar.collapsed .cat-item span,
  #cat-sidebar.collapsed .cat-item .cat-soon,
  #cat-sidebar.collapsed .cat-sidebar-footer .dropdown-item span,
  #cat-sidebar.collapsed .cat-sidebar-footer .cat-soon { display: revert; }
  #cat-sidebar.collapsed .cat-item,
  #cat-sidebar.collapsed .cat-sidebar-footer .dropdown-item { justify-content: flex-start; padding: 6px 10px; }

  .cat-sidebar-head { padding: 0 8px 10px; }
  .cat-sidebar-head-label { font-size: 0; }
  .cat-sidebar-head-label::after { content: "MENU"; font-size: .72rem; letter-spacing: .08em; color: var(--dx-text-3); font-weight: 600; }
  .cat-list { border-bottom: 0; }
  .cat-sidebar-footer { border-top: 0; padding-top: 18px; }
  .cat-sidebar-footer::before { content: "COMMUNAUTÉ"; display: block; padding: 0 8px 10px; font-size: .72rem; letter-spacing: .08em; color: var(--dx-text-3); font-weight: 600; }

  html body #page-content, html body #cat-sidebar.collapsed ~ #page-content { margin-left: 256px; margin-right: 0; }
  html body #home-feed { padding-top: 104px; max-width: 1560px; }
  html body #hero { padding-top: 100px; }
  .site-footer { margin: 0; border: 0; border-top: 1px solid var(--dx-line); border-radius: 0; background: transparent; }
}

/* Pages « normales » : on élargit les conteneurs pour remplir la fenêtre */
@media (min-width: 901px) {
  #features, #how-it-works, #cta-banner, .footer-main, .footer-bottom { max-width: 1560px; }
  main#page-content > section, main#page-content > div { max-width: 1560px; }
}

/* ── Accueil : colonne principale + rail droit ──────────────────────── */
#hero { display: block; min-height: 0; padding: 100px 28px 30px; overflow: visible; }
.dx-home { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; max-width: none; margin: 0 auto; width: 100%; }
.dx-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.dx-main .hero-inner { grid-template-columns: 1.15fr .85fr; max-width: none; margin: 0; padding: 2.4rem 2.6rem; border-radius: 24px; gap: 2rem; }
.dx-main .hero-title { font-size: clamp(2.1rem, 3.6vw, 3.3rem); margin-bottom: 1rem; }
.dx-main .hero-desc { font-size: .98rem; margin-bottom: 1.5rem; }
.dx-main .hero-stats { margin-top: 1.8rem; padding-top: 1.4rem; gap: 12px; }
.dx-main .stat-item { min-width: 0; padding: 12px 16px; }
.dx-main .hero-card { max-width: 100%; }
#dx-rail { background: #0f0f0f; border: 1px solid var(--dx-line); border-radius: 24px; padding: 20px; position: sticky; top: 96px; }
.dx-rail-list { display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 1250px) {
  .dx-home { grid-template-columns: 1fr; }
  #dx-rail { position: static; }
  .dx-albums { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .dx-albums { grid-template-columns: 1fr; }
  .dx-creators { grid-template-columns: 1fr; }
  .dx-main .hero-inner { grid-template-columns: 1fr; padding: 1.6rem 1.3rem; }
  .dx-search { display: none; }
  html body #navbar { top: 8px; left: 8px; right: 8px; height: 56px; border-radius: 18px; }
  html body #cat-sidebar { top: 72px; left: 8px; bottom: 8px; }
  #hero { padding: 84px 10px 20px; }
}

/* ==========================================================================
   v5 — Toutes les pages : même langage visuel (panneaux, pilules, titres)
   ========================================================================== */

/* En-têtes de page + titres de rangées (Parcourir, Quêtes, Boutique…) */
.page-head, .page-header, .home-row-head { margin-bottom: 1.4rem; }
.page-head h1, .page-header h1, .page-title, main h1 { font-family: "Outfit", sans-serif; font-weight: 800; letter-spacing: -0.03em; }
.home-row-head h2 { font-size: 1.35rem; font-weight: 700; }
.home-row-head a {
  color: #fff; border: 1px solid var(--dx-line-strong); border-radius: 10px; padding: 7px 14px; font-size: .78rem; text-decoration: none;
}
.home-row-head a:hover { background: var(--dx-panel-3); text-decoration: none; }
.home-row-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.home-search-bar { display: none; } /* la recherche est dans la barre du haut */

/* Panneaux génériques des pages (quêtes, classement, boutique, tickets, suggestions, messages, esport…) */
[class*="-card"]:not(.channel-card):not(.hero-card):not(.step-card):not(.feature-card):not(.group-card):not(.ban-card):not(.dx-now-card),
[class*="-panel"]:not(.sidebar-user-panel):not(.sidebar-login-panel):not(.friends-panel):not(.sub-add-panel):not(.sup-status-popover),
.esport-col, .jv-col, .tg-col, .quest, .ql-stat, .rmc-stat, .tk-card, .sg-card {
  border-color: var(--dx-line);
}
.esport-col, .jv-col, .quest-card, .shop-card, .product-card, .rank-card, .sg-card, .tk-card, .ticket-card, .suggestion-card {
  background: var(--dx-panel); border: 1px solid var(--dx-line); border-radius: 20px;
}
.quest-tab, .sg-filter, .tk-patchnotes-tab, .filter-btn, .genre-btn, .genre-select-btn, .esport-jump-btn {
  border-radius: 999px; background: var(--dx-panel-2); border: 1px solid var(--dx-line); color: var(--dx-text-2);
}
.quest-tab.active, .sg-filter.active, .tk-patchnotes-tab.active, .filter-btn.active, .genre-btn.active, .genre-select-btn.active {
  background: #ffffff; color: #000000; border-color: #ffffff;
}
table { border-collapse: collapse; }
thead th { background: var(--dx-panel-2); }
tbody tr { border-bottom: 1px solid var(--dx-line); }
progress, .progress-fill, .quest-progress-fill, [class*="progress-fill"] { background: #ffffff; }
.legal-num { background: #ffffff; color: #000; border-radius: 50%; }

/* Messages : la page garde sa mise en page, avec les nouveaux panneaux */
.msg-sidebar, .dm-list, .messages-list, .msg-main, .dm-thread, [class^="dm-"], [class^="msg-"] { border-color: var(--dx-line); }

/* ── Pages de canal (musique / vidéo / live) : plein écran, même style ── */
#channel-nav {
  height: 72px; padding: 0 28px; background: #0a0a0a; border-bottom: 1px solid var(--dx-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav-logo-sm { background: none; -webkit-text-fill-color: #ffffff; color: #ffffff; font-weight: 800; }
.nav-logo-sm-img { filter: grayscale(1); border-radius: 8px; }
#nav-channel-name { background: var(--dx-panel-2); border: 1px solid var(--dx-line-strong); color: #fff; border-radius: 999px; }
.nav-user { background: var(--dx-panel-2); border: 1px solid var(--dx-line); }
#channel-layout { background: #0a0a0a; gap: 0; }
#sidebar-left, #sidebar-right {
  background: #0c0c0c; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--dx-line);
}
.page-channel-music #sidebar-left { background-image: none; }
#sidebar-left .sidebar-section, .sidebar-section-channel {
  background: var(--dx-panel); border: 1px solid var(--dx-line); border-radius: 18px; padding: 16px;
}
.sidebar-label { color: var(--dx-text-3); letter-spacing: .1em; }
.sidebar-tab.active { color: #fff; border-bottom-color: #ffffff; }
#music-search-bar { background: #0a0a0a; border-bottom: 1px solid var(--dx-line); }
.search-box-top { background: var(--dx-panel-2); border: 1px solid var(--dx-line); border-radius: 14px; }
.search-box-top:focus-within { border-color: #8a8a8a; box-shadow: none; }
.search-box-top .search-btn { background: var(--dx-white-grad); color: #000; border-radius: 10px; }
.search-box-top .search-btn:hover { box-shadow: none; filter: brightness(1.08); }
.icon-btn { background: var(--dx-panel-2); border-color: var(--dx-line); }
.icon-btn.active { color: #fff; border-color: #fff; background: rgba(255,255,255,.12); }
.icon-btn.active svg { fill: #fff; }
.control-badge.can-control { color: #000; background: #fff; border: 0; }
.private-badge { color: #fff; background: var(--dx-panel-3); border-color: var(--dx-line-strong); }
#player-center { background: #0a0a0a; }
.volume-slider::-webkit-slider-thumb { background: #fff; box-shadow: none; }
#api-key-banner, #twitch-key-banner { background: var(--dx-panel-2); border: 1px solid var(--dx-line-strong); color: #fff; }

/* Mobile : barre de recherche cachée, panneaux pleine largeur */
@media (max-width: 900px) {
  html body #page-content { margin-left: 0; }
}

/* ==========================================================================
   v6 — Compteur « en ligne » rangé dans la barre du haut + canaux en
   panneaux flottants (même langage que le dashboard)
   ========================================================================== */

/* Le badge « en ligne » est déplacé par dash.js dans la barre ; il ne flotte plus */
#online-count-badge.dx-docked {
  position: static !important; transform: none !important; top: auto !important; left: auto !important; right: auto !important;
  flex-shrink: 0; height: 40px; padding: 0 16px 0 12px; margin: 0;
  background: var(--dx-panel-2); border: 1px solid var(--dx-line); border-radius: 999px;
  color: var(--dx-text-2); box-shadow: none; z-index: auto;
}
#online-count-badge.dx-docked #online-count-num { color: #fff; }
.online-count-dot { background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.7); }
/* en attendant le déplacement : jamais au milieu de la recherche */
#online-count-badge:not(.dx-docked) { left: auto !important; right: 330px !important; transform: none !important; top: 18px !important; }

/* ── Canaux musique / vidéo / live : panneaux flottants arrondis ─────── */
body.page-channel-music, body.video-channel-page { background: #0a0a0a !important; }
#channel-nav { height: 72px; }
#channel-layout {
  padding: 16px; gap: 16px; background: #0a0a0a;
}
#channel-layout > #sidebar-left, #channel-layout > #sidebar-right, #channel-layout > #player-center {
  background: #0f0f0f; border: 1px solid var(--dx-line); border-radius: 24px;
}
#channel-layout > #sidebar-left { padding: 18px; gap: 16px; }
#channel-layout > #sidebar-right { overflow: hidden; }
#channel-layout > #player-center { padding: 2rem; background: radial-gradient(700px 360px at 50% -80px, rgba(255,255,255,.08), transparent 70%), #0f0f0f; }
.video-channel-page #channel-layout > #player-center { padding: 1.4rem 1.6rem 1.6rem; }
#sidebar-left .sidebar-section, .sidebar-section-channel { background: #151515; border: 1px solid var(--dx-line); border-radius: 18px; padding: 16px; }
.channel-meta-name { font-size: 1.45rem; font-weight: 800; }
.channel-meta-desc, .channel-meta-creator { color: var(--dx-text-2); }

/* Vidéo / visuel */
.video-container, .video-channel-page .video-container { border-radius: 20px; overflow: hidden; border: 1px solid var(--dx-line); box-shadow: none; }
.track-title { font-family: "Outfit", sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.track-artist { color: var(--dx-text-2); }
#visualizer span, #visualizer div { background: linear-gradient(180deg, #ffffff, #5a5a5a) !important; border-radius: 4px; }

/* Barre de progression + contrôles ronds */
.progress-bar-wrapper { height: 5px; background: #2a2a2a; border-radius: 5px; }
.progress-bar-fill { background: #ffffff; border-radius: 5px; box-shadow: none; }
.progress-times { color: var(--dx-text-3); }
.ctrl-btn { background: transparent; border: 1.5px solid #4a4a4a; color: #fff; width: 46px; height: 46px; }
.ctrl-btn:hover { background: var(--dx-panel-3); border-color: #fff; transform: none; }
.ctrl-btn.large { width: 64px; height: 64px; background: var(--dx-white-grad); border: 0; color: #000; box-shadow: none; }
.ctrl-btn.large:hover { transform: scale(1.05); box-shadow: none; filter: none; background: #fff; }
.ctrl-btn.active { color: #000; background: #fff; border-color: #fff; text-shadow: none; }

/* Colonne droite : onglets en pilules, lignes « Play List » */
.sidebar-tab-bar { gap: 6px; padding: 14px 14px 10px; border-bottom: 1px solid var(--dx-line); }
.sidebar-tab { flex: 1; padding: 10px 8px; border: 1px solid var(--dx-line); border-radius: 999px; border-bottom: 1px solid var(--dx-line); background: #151515; color: var(--dx-text-2); }
.sidebar-tab.active { background: #fff; color: #000; border-color: #fff; }
#listeners-panel, #queue-panel { padding: 10px; }
.queue-item { padding: 8px; border-radius: 14px; gap: 12px; }
.queue-item:hover, .queue-item.playing, .queue-item.active, .queue-item.current { background: #1b1b1b; }
.queue-item-thumb { width: 52px; height: 52px; border-radius: 10px; filter: grayscale(1) contrast(1.1); }
.queue-item-title { font-size: .92rem; font-weight: 600; }
.queue-item-artist { font-size: .8rem; color: var(--dx-text-3); }
.queue-item-index { display: none; }
.queue-item::after {
  content: ""; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 2px solid #fff; margin-left: auto;
  background: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.queue-item:hover::after { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
.listener-item { padding: 8px; border-radius: 14px; }
.listener-item:hover { background: #1b1b1b; }
.listener-avatar { filter: grayscale(1); }
.listener-badge { background: #fff; color: #000; }

/* Chat */
#chat-messages { padding: 14px; }
.chat-msg-body { background: #151515; border: 1px solid var(--dx-line); border-radius: 16px; padding: 8px 12px; }
.chat-msg-avatar { filter: grayscale(1); }
#chat-input-area { padding: 12px; border-top: 1px solid var(--dx-line); gap: 8px; }
#chat-input { background: #151515; border: 1px solid var(--dx-line); border-radius: 999px; padding: 0 16px; }
#chat-send-btn { background: #fff; color: #000; border-radius: 50%; border: 0; width: 40px; height: 40px; }

/* Résultats de recherche + genres */
.search-results-container { background: #101010; border: 1px solid var(--dx-line-strong); border-radius: 18px; }
.search-result-item { border-radius: 12px; }
.search-result-item:hover { background: #1b1b1b; }
.search-result-thumb { border-radius: 10px; filter: grayscale(1); }
.genre-btn { background: #151515; border: 1px solid var(--dx-line); border-radius: 999px; color: var(--dx-text-2); }
.genre-btn.active, .genre-btn:hover { background: #fff; color: #000; border-color: #fff; }
.channel-sugg-item { border-radius: 14px; }

@media (max-width: 1100px) {
  #channel-layout { padding: 8px; gap: 8px; }
}