/* ═══════════════════════════════════════════════════════════════════════════
   SMYLE PLAY — Dashboard Artiste PLUG WATT
   Identité : électrique · neon gold · premium · sombre
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --d-gold:         #FFD700;
  --d-gold-2:       #FFC107;
  --d-gold-dim:     rgba(255, 215, 0, 0.55);
  --d-gold-glow:    rgba(255, 215, 0, 0.18);
  --d-deep:         #FF9500;
  --d-bg:           #070608;
  --d-surface:      #0e0d10;
  --d-panel:        rgba(14, 12, 18, 0.95);
  --d-border:       rgba(255, 215, 0, 0.12);
  --d-border-hover: rgba(255, 215, 0, 0.35);
  --d-text:         #e8e4f0;
  --d-text-dim:     rgba(232, 228, 240, 0.5);
  --d-topbar-h:     56px;
  --d-snav-h:       46px;
  --d-radius:       12px;
  --d-radius-sm:    8px;
}

/* ── RESET / BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

.dash-page {
  background: var(--d-bg);
  color: var(--d-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── CANVAS FOND ──────────────────────────────────────────────────────────── */
#dash-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.25;
  pointer-events: none;
}

/* ── TOPBAR ───────────────────────────────────────────────────────────────── */
.dash-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--d-topbar-h);
  z-index: 100;
  background: rgba(7, 6, 8, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--d-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}

.dash-topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  opacity: .9;
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-topbar-logo:hover { opacity: 1; }

.dash-topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dash-topbar-brand {
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .15em;
  color: var(--d-gold);
  text-shadow: 0 0 12px rgba(255,215,0,.5);
}

.dash-topbar-badge {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(255,215,0,.6);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 20px;
  padding: 2px 8px;
  text-transform: uppercase;
}

.dash-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ═══ Bulle profil (dropdown) ══════════════════════════════════════════
   .dash-user-chip est désormais un <button> cliquable qui ouvre un popover
   .dash-user-drop positionné sous la bulle. Le wrap gère le positionnement
   relatif pour que le popover se colle bien au trigger. */
.dash-user-wrap {
  position: relative;
}

.dash-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,215,0,.06);
  border: 1px solid var(--d-border);
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
  font-size: .78rem;
  color: var(--d-text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.dash-user-chip:hover,
.dash-user-chip[aria-expanded="true"] {
  background: rgba(255,215,0,.12);
  border-color: rgba(255,215,0,.35);
}
.dash-user-caret {
  opacity: .65;
  transition: transform .18s ease, opacity .15s ease;
}
.dash-user-chip:hover .dash-user-caret,
.dash-user-chip[aria-expanded="true"] .dash-user-caret {
  opacity: 1;
}
.dash-user-chip[aria-expanded="true"] .dash-user-caret {
  transform: rotate(180deg);
}

.dash-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--d-gold), var(--d-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .72rem;
  color: #000;
  flex-shrink: 0;
}

/* Popover sous la bulle ─────────────────────────────────────────────── */
.dash-user-drop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1200;
  width: 280px;
  background: linear-gradient(180deg, #14101f 0%, #0b0812 100%);
  border: 1px solid rgba(255,215,0,.18);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55),
              0 0 0 1px rgba(255,215,0,.05) inset,
              0 0 24px rgba(255,215,0,.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: dashDropIn .16s ease-out;
}
.dash-user-drop[hidden] { display: none; }

@keyframes dashDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dash-user-drop-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dash-user-drop-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--d-gold), var(--d-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #000;
  flex-shrink: 0;
  overflow: hidden;
}
.dash-user-drop-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dash-user-drop-ids {
  min-width: 0;
  flex: 1;
}
.dash-user-drop-name {
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-user-drop-slug {
  font-size: .72rem;
  color: var(--d-text-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* État "profil vierge" — message + CTA créer */
.dash-user-drop-empty {
  padding: 6px 4px 2px;
}
.dash-user-drop-empty-title {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.dash-user-drop-empty-msg {
  font-size: .72rem;
  color: var(--d-text-dim);
  line-height: 1.4;
  margin-bottom: 10px;
}

/* Liste des actions (état rempli) + boutons */
.dash-user-drop-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-user-drop-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: .8rem;
  color: #fff;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: background .12s ease, border-color .12s ease;
}
.dash-user-drop-btn:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.dash-user-drop-btn svg {
  flex-shrink: 0;
  opacity: .8;
}
.dash-user-drop-btn-primary {
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,215,0,.18), rgba(136,0,255,.22));
  border-color: rgba(255,215,0,.35);
  font-weight: 700;
  color: #FFD700;
}
.dash-user-drop-btn-primary:hover {
  background: linear-gradient(135deg, rgba(255,215,0,.28), rgba(136,0,255,.32));
  border-color: rgba(255,215,0,.55);
  color: #fff;
}
.dash-user-drop-btn-logout {
  color: #ff8b8b;
}
.dash-user-drop-btn-logout:hover {
  background: rgba(255,60,60,.08);
  border-color: rgba(255,60,60,.25);
}
.dash-user-drop-sep {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 4px 0;
}

/* Mobile — popover pleine largeur pour éviter le débordement hors écran */
@media (max-width: 560px) {
  .dash-user-drop {
    position: fixed;
    top: 58px;
    right: 10px;
    left: 10px;
    width: auto;
  }
}

.dash-logout-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--d-radius-sm);
  color: var(--d-text-dim);
  font-size: .72rem;
  padding: 5px 10px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.dash-logout-btn:hover { color: #fff; border-color: rgba(255,255,255,.25); }

/* ── SECTION NAV STICKY ───────────────────────────────────────────────────── */
.dash-section-nav {
  position: fixed;
  top: var(--d-topbar-h);
  left: 0;
  right: 0;
  height: var(--d-snav-h);
  z-index: 90;
  background: rgba(10, 9, 14, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--d-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-section-nav-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-section-nav-inner::-webkit-scrollbar { display: none; }

.dash-snav-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--d-text-dim);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}
.dash-snav-pill:hover {
  color: var(--d-gold);
  border-color: rgba(255,215,0,.2);
}
.dash-snav-pill.active {
  color: var(--d-gold);
  background: rgba(255,215,0,.08);
  border-color: rgba(255,215,0,.3);
  text-shadow: 0 0 8px rgba(255,215,0,.4);
}

/* ── MAIN LAYOUT ──────────────────────────────────────────────────────────── */
.dash-main {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--d-topbar-h) + var(--d-snav-h));
  padding: 32px 24px 80px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* ── SECTIONS ─────────────────────────────────────────────────────────────── */
.dash-section {
  margin-bottom: 56px;
  scroll-margin-top: calc(var(--d-topbar-h) + var(--d-snav-h) + 16px);
}

.dash-section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--d-border);
}

.dash-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--d-gold);
  text-transform: uppercase;
}

.dash-section-sub {
  margin-left: auto;
  font-size: .68rem;
  color: var(--d-text-dim);
  letter-spacing: .04em;
}

/* ── SOUS-SECTIONS (sous-blocs internes d'un .dash-section) ────────────────
   Depuis la restructure à 2 pills (Création / Analytique), les anciennes
   sections sec-dna et sec-ranking sont devenues des sous-blocs visuels de
   leur parent. Elles gardent leur id pour le JS mais perdent leur section-hdr
   propre au profit d'un .dash-subhdr plus léger.
   ───────────────────────────────────────────────────────────────────────── */
.dash-section.dash-section-sub {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px dashed rgba(255,215,0,.12);
}

.dash-subhdr {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,215,0,.06);
}
.dash-subhdr-num {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: rgba(255,215,0,.3);
  font-variant-numeric: tabular-nums;
  min-width: 22px;
}
.dash-subhdr-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--d-text);
  letter-spacing: .04em;
}
.dash-subhdr-sub {
  margin-left: auto;
  font-size: .68rem;
  color: var(--d-text-dim);
  letter-spacing: .02em;
  font-style: italic;
}

/* ── ────────────────────────────────────────────────────────────────────── ─
   SECTION 1 — CARTE ARTISTE
   ─────────────────────────────────────────────────────────────────────────── */

.dash-artist-card {
  background: var(--d-panel);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  padding: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.dash-artist-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--d-gold), transparent);
  opacity: .5;
}

/* Avatar artiste */
.dash-artist-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.dash-artist-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,215,0,.2), rgba(255,149,0,.15));
  border: 2px solid rgba(255,215,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--d-gold);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.dash-artist-avatar:hover {
  border-color: var(--d-gold);
  box-shadow: 0 0 20px rgba(255,215,0,.3);
}
.dash-artist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-avatar-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--d-gold);
  color: #000;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 2px 6px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.dash-artist-info {
  min-width: 0;
}

.dash-artist-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.dash-artist-genre {
  font-size: .78rem;
  color: var(--d-gold-dim);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.dash-artist-bio-short {
  font-size: .82rem;
  color: var(--d-text-dim);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-artist-socials {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-social-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  color: var(--d-text-dim);
  text-decoration: none;
  border: 1px solid var(--d-border);
  border-radius: 6px;
  padding: 3px 8px;
  transition: color .2s, border-color .2s;
}
.dash-social-link:hover { color: var(--d-gold); border-color: rgba(255,215,0,.3); }

/* KPIs */
.dash-kpi-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 110px;
}

.dash-kpi {
  background: rgba(255,215,0,.05);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius-sm);
  padding: 10px 14px;
  text-align: center;
}

.dash-kpi-rank {
  border-color: rgba(255,215,0,.25);
  background: rgba(255,215,0,.08);
}

.dash-kpi-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--d-gold);
  text-shadow: 0 0 10px rgba(255,215,0,.4);
  line-height: 1.1;
}

.dash-kpi-lbl {
  font-size: .62rem;
  color: var(--d-text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 3px;
}

/* Mes sons publiés */
.dash-tracks-panel {
  margin-top: 20px;
  background: var(--d-panel);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  overflow: hidden;
}

.dash-tracks-hdr {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--d-border);
  gap: 10px;
}

.dash-tracks-hdr-title {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--d-text);
}

.dash-tracks-count {
  margin-left: auto;
  font-size: .7rem;
  color: var(--d-text-dim);
  background: rgba(255,215,0,.06);
  border: 1px solid var(--d-border);
  border-radius: 12px;
  padding: 2px 8px;
}

.dash-tracks-list { padding: 12px; }

.dash-empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--d-text-dim);
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  line-height: 1.6;
}

/* Track row */
.dash-track-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--d-radius-sm);
  transition: background .15s;
  border-bottom: 1px solid rgba(255,215,0,.04);
}
.dash-track-row:last-child { border-bottom: none; }
.dash-track-row:hover { background: rgba(255,215,0,.04); }

.dash-track-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(255,215,0,.1);
  border: 1px solid var(--d-border);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-track-cover img { width: 100%; height: 100%; object-fit: cover; }

.dash-track-info { flex: 1; min-width: 0; }
.dash-track-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--d-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-track-meta {
  font-size: .68rem;
  color: var(--d-text-dim);
  margin-top: 2px;
}

.dash-track-plays {
  font-size: .72rem;
  font-weight: 700;
  color: var(--d-gold-dim);
  min-width: 48px;
  text-align: right;
}

/* ── Cellule édition catalogue (section 1a WattBoard) ────────────────────── */
.dash-track-editor {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(var(--d-brand-rgb, 255,215,0),.15);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 28px;
}

/* Barre de recherche */
.dte2-search-wrap { position: relative; }
.dte2-search {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #fff;
  font-size: .9rem;
  padding: 11px 16px;
  outline: none;
  transition: border-color .2s;
}
.dte2-search:focus { border-color: rgba(255,215,0,.4); }
.dte2-search::placeholder { color: rgba(255,255,255,.3); }

/* Liste résultats */
.dte2-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #13101e;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  list-style: none;
  padding: 6px 0;
  margin: 0;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  max-height: 260px;
  overflow-y: auto;
}
.dte2-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .12s;
}
.dte2-result-item:hover { background: rgba(255,215,0,.06); }
.dte2-result-cover {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.dte2-result-name {
  flex: 1;
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dte2-result-meta {
  font-size: .7rem;
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
}
.dte2-result-empty {
  padding: 10px 14px;
  font-size: .8rem;
  color: rgba(255,255,255,.3);
  font-style: italic;
}

/* Formulaire d'édition */
.dte2-form { margin-top: 20px; }

.dte2-form-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.dte2-cover-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
}
.dte2-cover {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.dte2-cover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  font-size: 22px;
  opacity: 0;
  transition: opacity .15s;
  border-radius: 10px;
}
.dte2-cover-wrap:hover .dte2-cover-overlay { opacity: 1; }
.dte2-cover-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.dte2-form-meta { flex: 1; min-width: 0; }
.dte2-selected-label {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dte2-selected-plays {
  display: block;
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  margin-top: 3px;
}

/* Champs */
.dte2-fields { display: flex; flex-direction: column; gap: 14px; }
.dte2-field-group { display: flex; flex-direction: column; gap: 6px; }
.dte2-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.dte2-input {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fff;
  font-size: .86rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
  font-family: inherit;
}
.dte2-input:focus { border-color: rgba(255,215,0,.4); }
.dte2-input option { background: #13101e; }

/* Couleur */
.dte2-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dte2-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  flex-shrink: 0;
}
.dte2-swatch:hover, .dte2-swatch.is-active { transform: scale(1.2); border-color: #fff; }
.dte2-color-picker {
  width: 30px;
  height: 26px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  background: none;
}
.dte2-color-preview {
  height: 6px;
  border-radius: 99px;
  transition: background .2s, box-shadow .2s;
  font-size: 10px;
  color: transparent;
  margin-top: 2px;
}

/* Actions */
.dte2-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.dte2-cancel-btn { padding: 9px 18px; font-size: .82rem; }
.dte2-save-btn   { padding: 9px 22px; font-size: .82rem; }
.dte2-err {
  margin-top: 10px;
  font-size: .75rem;
  color: #ff8888;
  text-align: center;
}

/* ── Ligne "Recette liée" avec bouton Créer ──────────────────────────────────── */
.dte2-prompt-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dte2-prompt-row .dte2-input { flex: 1; min-width: 0; }
.dte2-create-prompt-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  background: rgba(136,0,255,.18);
  border: 1px solid rgba(136,0,255,.45);
  border-radius: 8px;
  color: #cc88ff;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.dte2-create-prompt-btn:hover {
  background: rgba(136,0,255,.32);
  border-color: rgba(136,0,255,.7);
  color: #e0aaff;
}

/* ── Champs du modal "Créer une recette" ─────────────────────────────────────── */
.dte2-cp-field { display: flex; flex-direction: column; gap: 6px; }
.dte2-cp-label {
  font-size: .78rem;
  font-weight: 600;
  color: #a09cb8;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.dash-track-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.dash-track-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: .55;
  transition: opacity .15s, background .15s;
  line-height: 1;
}
.dash-track-edit-btn:hover {
  opacity: 1;
  background: rgba(255,215,0,.1);
}

/* ── Modal édition track ──────────────────────────────────────────────────── */
#dashTrackEditOverlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
#dashTrackEditOverlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.dte-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
}
.dte-panel {
  position: relative;
  width: min(480px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  background: #17152a;
  border: 1px solid rgba(255,215,0,.15);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  transform: translateY(12px);
  transition: transform .25s ease;
}
#dashTrackEditOverlay.is-visible .dte-panel {
  transform: translateY(0);
}
.dte-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.dte-hdr-title {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.dte-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: color .15s, background .15s;
}
.dte-close:hover { color: #fff; background: rgba(255,255,255,.07); }

.dte-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.dte-field { display: flex; flex-direction: column; gap: 6px; }
.dte-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.dte-input, .dte-select {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fff;
  font-size: .85rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.dte-input:focus, .dte-select:focus { border-color: rgba(255,215,0,.4); }
.dte-select option { background: #17152a; }
.dte-hint {
  font-size: .68rem;
  color: rgba(255,255,255,.3);
  line-height: 1.4;
}

/* C4 — Œuvre complète (lien rétroactif son <-> image) */
.dte-oeuvre-linked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(124,58,237,.4);
  border-radius: 10px;
  background: rgba(124,58,237,.08);
}
.dte-oeuvre-linked-label { font-size: .82rem; font-weight: 700; color: #cbb3ff; }
.dte-oeuvre-unlink-btn { padding: 5px 12px !important; font-size: .76rem !important; }
.dte-oeuvre-link-btn { align-self: flex-start; }
.dte-oeuvre-candidates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.dte-oeuvre-cand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  color: #e6e1f5;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
}
.dte-oeuvre-cand:hover { border-color: rgba(124,58,237,.6); background: rgba(124,58,237,.12); }
.dte-oeuvre-cand:disabled { opacity: .5; cursor: default; }
.dte-oeuvre-thumb {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 7px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,58,237,.12); font-size: 1.1rem;
}
.dte-oeuvre-thumb-ph { color: #8b7bd8; }
.dte-oeuvre-cand-title { flex: 1; font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dte-oeuvre-cand-price { font-size: .74rem; color: #cbb3ff; font-weight: 700; white-space: nowrap; }

/* Cover area */
.dte-cover-area {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dte-cover-preview {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: rgba(255,215,0,.08);
  border: 1px solid rgba(255,215,0,.15);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dte-cover-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: rgba(255,255,255,.75);
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dte-cover-pick-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,215,0,.3); }
.dte-cover-hint {
  font-size: .65rem;
  color: rgba(255,255,255,.25);
  line-height: 1.3;
}

/* Color row */
.dte-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dte-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  flex-shrink: 0;
}
.dte-color-swatch:hover { transform: scale(1.15); }
.dte-color-swatch.is-selected { border-color: #fff; transform: scale(1.15); }
#dteColorPicker {
  width: 32px;
  height: 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  background: none;
}

/* Footer */
.dte-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

/* ── SECTION 2 — UPLOAD ───────────────────────────────────────────────────── */

.dash-upload-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dash-dropzone {
  border: 2px dashed rgba(255,215,0,.25);
  border-radius: var(--d-radius);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: rgba(255,215,0,.02);
  text-align: center;
}
.dash-dropzone:hover, .dash-dropzone.drag-over {
  border-color: var(--d-gold);
  background: rgba(255,215,0,.06);
}

.dash-dropzone-ico { opacity: .5; color: var(--d-gold); }
.dash-dropzone:hover .dash-dropzone-ico { opacity: .9; }

.dash-dropzone-text {
  font-size: .9rem;
  font-weight: 600;
  color: var(--d-text);
}
.dash-dropzone-sub {
  font-size: .75rem;
  color: var(--d-text-dim);
}

/* Formulaire upload */
.dash-upload-form {
  background: var(--d-panel);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  padding: 24px;
}

.dash-upload-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,215,0,.05);
  border: 1px solid rgba(255,215,0,.15);
  border-radius: var(--d-radius-sm);
  margin-bottom: 20px;
  font-size: .8rem;
  color: var(--d-gold);
}

/* Grille du formulaire d'upload
   - mode "with_prompt" (défaut) : 3 colonnes [meta] [prompt] [aside]
   - mode "simple"               : 2 colonnes [meta] [aside] — prompt masqué
   Les règles [data-mode] sur #dashUploadForm (placées plus bas) pilotent
   la mise en page sans recalculer le CSS à chaque toggle. */
.dash-upload-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 220px);
  gap: 20px;
  margin-bottom: 16px;
  align-items: start;
}
[data-mode="simple"] .dash-upload-fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
}
[data-mode="simple"] .dash-upload-col-prompt,
[data-mode="simple"] .dash-credit-grid {
  display: none !important;
}

.dash-field-col { display: flex; flex-direction: column; gap: 10px; }

/* Cover drop */
.dash-cover-col { display: flex; flex-direction: column; gap: 8px; }

.dash-cover-drop {
  width: 100%;
  aspect-ratio: 1;
  border: 2px dashed rgba(255,215,0,.2);
  border-radius: var(--d-radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s;
  background: rgba(255,215,0,.02);
  font-size: .7rem;
  color: var(--d-text-dim);
  text-align: center;
  padding: 12px;
}
.dash-cover-drop:hover { border-color: var(--d-gold); }
.dash-cover-drop img { width: 100%; height: 100%; object-fit: cover; }

/* Progress bar */
.dash-progress-bar {
  height: 4px;
  background: rgba(255,215,0,.12);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.dash-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--d-gold), var(--d-deep));
  border-radius: 2px;
  transition: width .25s ease;
  box-shadow: 0 0 8px rgba(255,215,0,.5);
}

.dash-progress-lbl {
  font-size: .72rem;
  color: var(--d-gold-dim);
  text-align: center;
}

.dash-upload-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.dash-r2-note {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  color: var(--d-text-dim);
  opacity: .6;
}
.dash-r2-note code {
  font-family: 'Courier New', monospace;
  color: rgba(255,215,0,.5);
}

/* ── SECTION 3 — PROFIL ───────────────────────────────────────────────────── */

.dash-profile-view,
.dash-profile-edit {
  background: var(--d-panel);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  padding: 24px;
}

.dash-pv-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.dash-pv-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,215,0,.2), rgba(255,149,0,.15));
  border: 2px solid rgba(255,215,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--d-gold);
  flex-shrink: 0;
}

.dash-pv-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.dash-pv-genre {
  font-size: .72rem;
  color: var(--d-gold-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 3px;
}

.dash-pv-bio {
  font-size: .84rem;
  color: var(--d-text-dim);
  line-height: 1.6;
  margin-bottom: 14px;
}

.dash-pv-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-edit-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius-sm);
  color: var(--d-text-dim);
  font-size: .72rem;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.dash-edit-toggle:hover { color: var(--d-gold); border-color: rgba(255,215,0,.3); }

.dash-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.dash-edit-full { grid-column: 1 / -1; }

.dash-edit-actions {
  display: flex;
  gap: 10px;
}

/* ── SECTION 4 — STATS ────────────────────────────────────────────────────── */

.dash-stats-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

.dash-stats-tab {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid var(--d-border);
  background: transparent;
  color: var(--d-text-dim);
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .04em;
}
.dash-stats-tab:hover { color: var(--d-gold); border-color: rgba(255,215,0,.3); }
.dash-stats-tab.active {
  background: rgba(255,215,0,.1);
  border-color: rgba(255,215,0,.4);
  color: var(--d-gold);
}

.dash-stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.dash-stat-card {
  background: var(--d-panel);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.dash-stat-card-highlight {
  border-color: rgba(255,215,0,.3);
  background: rgba(255,215,0,.05);
}

.dash-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--d-radius-sm);
  background: rgba(255,215,0,.08);
  border: 1px solid var(--d-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--d-gold);
  flex-shrink: 0;
}

.dash-stat-body { flex: 1; }

.dash-stat-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--d-gold);
  line-height: 1.1;
}

.dash-stat-lbl {
  font-size: .65rem;
  color: var(--d-text-dim);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 3px;
}

.dash-stat-delta {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255,215,0,.08);
  color: var(--d-text-dim);
}
.dash-stat-delta.up {
  color: #4ade80;
  background: rgba(74,222,128,.08);
}

/* Graphe */
.dash-chart-wrap {
  background: var(--d-panel);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  padding: 20px;
}

.dash-chart-title {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--d-text-dim);
  margin-bottom: 12px;
}

.dash-chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ── SECTION 5 — CLASSEMENT ──────────────────────────────────────────────── */

.dash-my-rank-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255,215,0,.1), rgba(255,149,0,.05));
  border: 1px solid rgba(255,215,0,.3);
  border-radius: var(--d-radius);
  padding: 16px 24px;
  margin-bottom: 20px;
}

.dash-mrc-rank {
  font-size: 2rem;
  font-weight: 900;
  color: var(--d-gold);
  text-shadow: 0 0 16px rgba(255,215,0,.5);
  min-width: 3rem;
}

.dash-mrc-label {
  font-size: .78rem;
  color: var(--d-text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.dash-mrc-delta {
  margin-left: auto;
  font-size: .8rem;
  color: #4ade80;
  font-weight: 700;
}

.dash-ranking-list {
  background: var(--d-panel);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  overflow: hidden;
}

.dash-rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,215,0,.04);
  transition: background .15s;
}
.dash-rank-row:last-child { border-bottom: none; }
.dash-rank-row:hover { background: rgba(255,215,0,.03); }
.dash-rank-row.is-me { background: rgba(255,215,0,.06); }

.dash-rank-num {
  font-size: .9rem;
  font-weight: 800;
  color: var(--d-text-dim);
  min-width: 28px;
  text-align: center;
}
.dash-rank-row:nth-child(1) .dash-rank-num { color: #FFD700; }
.dash-rank-row:nth-child(2) .dash-rank-num { color: #C0C0C0; }
.dash-rank-row:nth-child(3) .dash-rank-num { color: #CD7F32; }

.dash-rank-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,215,0,.2), rgba(255,149,0,.15));
  border: 1px solid var(--d-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--d-gold);
  flex-shrink: 0;
}

.dash-rank-info { flex: 1; }
.dash-rank-name { font-size: .84rem; font-weight: 600; color: var(--d-text); }
.dash-rank-genre { font-size: .67rem; color: var(--d-text-dim); }

.dash-rank-stats {
  text-align: right;
}
.dash-rank-plays {
  font-size: .82rem;
  font-weight: 700;
  color: var(--d-gold-dim);
}
.dash-rank-followers {
  font-size: .65rem;
  color: var(--d-text-dim);
}

.dash-rank-empty {
  padding: 40px;
  text-align: center;
  color: var(--d-text-dim);
  font-size: .82rem;
}

/* ── SECTION 6 — RÉSEAU ───────────────────────────────────────────────────── */

.dash-network-wrap {
  background: var(--d-panel);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  overflow: hidden;
  position: relative;
}

.dash-network-canvas {
  display: block;
  width: 100%;
  height: 420px;
}

.dash-network-legend {
  position: absolute;
  bottom: 12px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .68rem;
  color: var(--d-text-dim);
}

.dnl-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.dnl-artist   { background: #FFD700; }
.dnl-track    { background: #00CFFF; }
.dnl-playlist { background: #FF6B6B; }
.dnl-watt     { background: #ffffff; box-shadow: 0 0 6px white; }

.dash-network-tip {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: .65rem;
  color: var(--d-text-dim);
  opacity: .5;
}

/* ── INPUTS / FORMULAIRES COMMUNS ────────────────────────────────────────── */

.dash-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--d-text-dim);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
}

.dash-req { color: var(--d-gold); }

.dash-input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--d-radius-sm);
  color: var(--d-text);
  font-size: .84rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.dash-input::placeholder { color: rgba(255,255,255,.22); }
.dash-input:focus {
  border-color: rgba(255,215,0,.5);
  box-shadow: 0 0 0 3px rgba(255,215,0,.08);
}

.dash-textarea {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--d-radius-sm);
  color: var(--d-text);
  font-size: .84rem;
  padding: 9px 12px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  transition: border-color .2s;
}
.dash-textarea::placeholder { color: rgba(255,255,255,.22); }
.dash-textarea:focus { border-color: rgba(255,215,0,.5); }

/* Texte d'aide sous un input/textarea */
.dash-help {
  font-size: .68rem;
  color: rgba(255,215,0,.45);
  margin: -2px 0 8px;
  letter-spacing: .02em;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHANTIER 1.2 — Color picker couleur de marque
   Le picker tient sur une ligne : 6 swatches presets + input color natif +
   aperçu texte + reset. Sur mobile il passe en colonne (cf. @media 720px).
   ══════════════════════════════════════════════════════════════════════════ */
.dash-brand-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  background: rgba(255, 215, 0, .025);
  border: 1px solid rgba(255, 215, 0, .08);
  border-radius: var(--d-radius-sm);
}

.dash-brand-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.dash-brand-swatch {
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--sw, #FFD700);
  border: 2px solid rgba(255, 255, 255, .1);
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  position: relative;
  outline: none;
}
.dash-brand-swatch:hover {
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, .4);
}
.dash-brand-swatch.active {
  border-color: #fff;
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, .4),
    0 0 14px var(--sw, rgba(255, 215, 0, .5));
}
/* Petit check quand le swatch est actif */
.dash-brand-swatch.active::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.dash-brand-custom {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Input color natif — visuellement remplacé par .dash-brand-swatch-preview
   mais on le garde accessible clavier. Les navigateurs affichent un bord
   moche par défaut : on aplatit. */
.dash-brand-color-input {
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  outline: none;
}
.dash-brand-color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.dash-brand-color-input::-webkit-color-swatch { border: 2px solid rgba(255, 255, 255, .18); border-radius: 50%; }
.dash-brand-color-input::-moz-color-swatch   { border: 2px solid rgba(255, 255, 255, .18); border-radius: 50%; }

.dash-brand-current {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .72rem;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .04em;
}
.dash-brand-swatch-preview {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .22);
  box-shadow: 0 0 6px rgba(0, 0, 0, .4);
}
.dash-brand-hex { user-select: all; }

.dash-brand-reset {
  margin-left: auto;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--d-radius-sm);
  padding: 7px 13px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.dash-brand-reset:hover {
  color: rgba(255, 255, 255, .85);
  border-color: rgba(255, 255, 255, .28);
}

.dash-brand-hint {
  font-size: .68rem;
  line-height: 1.55;
  color: rgba(255, 215, 0, .5);
  margin: 4px 0 0;
  letter-spacing: .02em;
}

@media (max-width: 720px) {
  .dash-brand-reset { margin-left: 0; }
  .dash-brand-swatch { width: 30px; height: 30px; }
  .dash-brand-color-input { width: 34px; height: 34px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHANTIER "Profil artiste type" — Thème page publique (migration 0017)
   2 color pickers (fond + accent) + mini preview live. Les couleurs sont
   stockées sur users.profile_bg_color / profile_brand_color et appliquées
   côté page /watt/artistes/<slug> via --bg / --brand. Null = violet WATT.
   ══════════════════════════════════════════════════════════════════════════ */
.dash-profile-theme {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 12px;
  background: rgba(136, 0, 255, .035);
  border: 1px solid rgba(136, 0, 255, .12);
  border-radius: var(--d-radius-sm);
}

.dash-profile-theme-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dash-profile-theme-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .72rem;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .04em;
}

.dash-profile-theme-sublabel {
  font-family: inherit;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .48);
  margin-right: 2px;
}

/* Mini preview live : rectangle avec le fond choisi + nom teinté accent
   + bouton "Suivre" rempli en accent. C'est l'exact même contrat visuel
   que la page publique — pas besoin d'ouvrir un onglet pour vérifier. */
.dash-profile-theme-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px;
  border-radius: var(--d-radius-sm);
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--pt-bg, #070608);
  transition: background .2s;
  min-height: 58px;
}
.dash-profile-theme-preview-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--pt-brand, #8800FF);
  transition: color .2s;
}
.dash-profile-theme-preview-cta {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--pt-brand, #8800FF);
  color: #fff;
  transition: background .2s;
}

@media (max-width: 720px) {
  .dash-profile-theme-row { gap: 10px; }
  .dash-profile-theme-preview { padding: 14px; }
}

/* ── BOUTONS ──────────────────────────────────────────────────────────────── */

.dash-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--d-gold);
  color: #000;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .06em;
  border: none;
  border-radius: var(--d-radius-sm);
  padding: 9px 20px;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter .2s, transform .1s;
}
.dash-btn-primary:hover { filter: brightness(1.1); }
.dash-btn-primary:active { transform: scale(.97); }

/* Variante "secondaire" — utilisée dans le guard auth (Déjà un compte ?) */
.dash-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--d-text-dim);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .08em;
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: var(--d-radius-sm);
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .2s;
}
.dash-btn-secondary:hover {
  color: var(--d-gold);
  border-color: rgba(255, 215, 0, 0.55);
  background: rgba(255, 215, 0, 0.05);
}

.dash-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--d-text-dim);
  font-size: .8rem;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--d-radius-sm);
  padding: 9px 20px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.dash-btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.3); }

/* ── TOAST ────────────────────────────────────────────────────────────────── */
.dash-toast {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 9999;
  pointer-events: none;
  max-width: 320px;
}

.dash-toast-msg {
  background: rgba(14, 12, 18, 0.95);
  border: 1px solid rgba(255,215,0,.3);
  border-radius: var(--d-radius-sm);
  color: var(--d-gold);
  font-size: .8rem;
  font-weight: 600;
  padding: 10px 16px;
  margin-top: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  animation: toast-in .25s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── GUARD ────────────────────────────────────────────────────────────────── */
.dash-guard {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(7,6,8,.96);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.dash-guard-box {
  text-align: center;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.dash-guard-box h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
}

.dash-guard-box p {
  font-size: .85rem;
  color: var(--d-text-dim);
  line-height: 1.6;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .dash-main { padding: 24px 16px 60px; }
  .dash-topbar { padding: 0 16px; }
  .dash-topbar-badge { display: none; }

  .dash-artist-card {
    grid-template-columns: auto 1fr;
    gap: 16px;
  }
  .dash-kpi-row {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
  }
  .dash-kpi { flex: 1; }

  .dash-stats-cards { grid-template-columns: repeat(2, 1fr); }

  .dash-upload-fields { grid-template-columns: 1fr; }
  .dash-cover-col { flex-direction: row; align-items: flex-start; gap: 12px; }
  .dash-cover-drop { width: 120px; height: 120px; flex-shrink: 0; }

  .dash-edit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .dash-topbar-logo span { display: none; }
  .dash-topbar-brand { font-size: .78rem; }
  .dash-section-nav { display: none; }
  .dash-main { margin-top: var(--d-topbar-h); }

  .dash-artist-card { display: block; }
  .dash-artist-avatar-wrap { margin-bottom: 16px; }
  .dash-kpi-row { display: grid; grid-template-columns: 1fr 1fr; }

  .dash-stats-cards { grid-template-columns: 1fr 1fr; }

  .dash-upload-actions, .dash-edit-actions { flex-wrap: wrap; }
  .dash-btn-primary, .dash-btn-ghost { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SPRINT MOBILE — Dashboard WATT
   Breakpoints : 860px (étendu) · 640px · 560px (étendu) · 400px
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 860px : Tablette / paysage ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .dash-topbar { padding: 0 16px; }
  .dash-topbar-badge { display: none; }
  .dash-main { padding: 24px 16px 60px; }

  /* Artist card */
  .dash-artist-card { grid-template-columns: auto 1fr; gap: 16px; }
  .dash-kpi-row { grid-column: 1 / -1; }

  /* Stats */
  .dash-stats-cards { grid-template-columns: repeat(2, 1fr); }

  /* Upload */
  .dash-upload-fields { grid-template-columns: 1fr; }
  .dash-cover-col { flex-direction: row; align-items: flex-start; gap: 12px; }
  .dash-cover-drop { width: 120px; height: 120px; flex-shrink: 0; }

  /* Profile */
  .dash-edit-grid { grid-template-columns: 1fr; }

  /* Chart : scroll horizontal si trop étroit */
  .dash-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-chart { min-width: 300px; }
}

/* ── 640px : Portrait standard ──────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Section nav : pilules cachées, remplacées par padding simple */
  .dash-section-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 12px; }
  .dash-snav-inner { gap: 4px; }
  .dash-snav-pill { font-size: 9px; padding: 5px 12px; letter-spacing: .1em; white-space: nowrap; }

  /* Artist card KPIs */
  .dash-kpi { min-width: 0; }
  .dash-kpi-val { font-size: 20px; }
  .dash-kpi-lbl { font-size: 8px; }

  /* Tracks list */
  .dash-track-row { padding: 8px 0; gap: 8px; }
  .dash-track-cover { width: 32px; height: 32px; flex-shrink: 0; }
  .dash-track-name { font-size: 11px; }

  /* Chart tabs */
  .dash-chart-tabs { gap: 4px; flex-wrap: wrap; }
  .dash-chart-tab { padding: 5px 12px; font-size: 9px; }
  .dash-stat-card { padding: 14px 12px; }
  .dash-stat-val { font-size: 24px; }
  .dash-stat-lbl { font-size: 8px; }

  /* Upload */
  .dash-upload-zone { padding: 24px 16px; min-height: 100px; }
  .dash-upload-actions { flex-wrap: wrap; gap: 8px; }
  .dash-btn-primary, .dash-btn-ghost { flex: 1; min-width: 120px; justify-content: center; }

  /* Tags input */
  .dash-tags-row { flex-wrap: wrap; }

  /* Profile view */
  .pv-socials { flex-wrap: wrap; gap: 6px; }
  .pv-social-link { font-size: 9px; padding: 4px 10px; }

  /* Profile edit */
  .dash-edit-actions { flex-wrap: wrap; gap: 8px; }

  /* Ranking */
  .dash-my-rank-card { flex-wrap: wrap; gap: 10px; }
  .dash-rank-me-score { margin-left: 0; width: 100%; }
  .dash-rank-row { gap: 8px; padding: 8px 0; }
  .dash-rank-name { font-size: 11px; }

  /* Network canvas */
  #dashNetworkCanvas { height: 260px; }
}

/* ── 560px : Téléphones (existant étendu) ───────────────────────────────── */
@media (max-width: 560px) {
  .dash-topbar-logo span { display: none; }
  .dash-topbar-brand { font-size: .75rem; letter-spacing: .12em; }
  .dash-topbar { padding: 0 12px; }
  .dash-section-nav { display: none; } /* Trop étroit → caché, navigation par scroll */
  .dash-main { margin-top: var(--d-topbar-h); padding: 18px 12px 80px; }

  /* Artist card full-width */
  .dash-artist-card { display: block; }
  .dash-artist-avatar-wrap { margin-bottom: 14px; }
  .dash-kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .dash-kpi { border: 1px solid rgba(255,215,0,.08); border-radius: 4px; padding: 10px; text-align: center; }
  .dash-kpi-val { font-size: 18px; }

  /* Stats 2 cols */
  .dash-stats-cards { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Inputs iOS : font-size 16px pour éviter le zoom automatique */
  .dash-input, .dash-textarea, .dash-select { font-size: 16px !important; }

  /* Upload */
  .dash-upload-actions, .dash-edit-actions { flex-wrap: wrap; }
  .dash-btn-primary, .dash-btn-ghost { width: 100%; justify-content: center; min-height: 44px; }
  .dash-cover-drop { width: 100px; height: 100px; }
}

/* ── 400px : Petits téléphones / iPhone SE ──────────────────────────────── */
@media (max-width: 400px) {
  .dash-topbar-brand { font-size: .7rem; }
  .dash-main { padding: 14px 10px 80px; }

  /* Stats : 1 colonne sur très petit écran */
  .dash-stats-cards { grid-template-columns: 1fr; }

  /* Avatar réduit */
  .dash-artist-avatar { width: 68px; height: 68px; font-size: 26px; }

  /* Sections titles */
  .dash-section-title { font-size: 1rem; letter-spacing: .15em; }
  .dash-section-sub { font-size: 9px; }

  /* Touch targets */
  .dash-btn-primary, .dash-btn-ghost { min-height: 44px; }
  .dash-snav-pill { min-height: 36px; }

  /* Upload zone plus compacte */
  .dash-upload-zone { min-height: 100px; font-size: 12px; }

  /* Network canvas */
  #dashNetworkCanvas { height: 220px; }

  /* Ranking row compact */
  .dash-rank-row { padding: 6px 0; }
  .dash-rank-avatar { width: 26px; height: 26px; font-size: 10px; }
}

/* ── LIEN PROFIL PUBLIC ──────────────────────────────────────────────────── */
.dash-public-link {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,215,0,.07);
}
.dash-public-link-label {
  font-size: 8px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,215,0,.35); margin-bottom: 7px;
}
.dash-public-link-row {
  display: flex; align-items: center; gap: 8px;
}
.dash-public-link-url {
  flex: 1; font-size: 11px; letter-spacing: .03em;
  color: rgba(255,215,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 7px 10px;
  background: rgba(255,215,0,.04);
  border: 1px solid rgba(255,215,0,.1);
  border-radius: 2px;
  transition: color .2s, border-color .2s;
}
.dash-public-link-url:hover { color: var(--d-gold); border-color: rgba(255,215,0,.28); }
.dash-public-link-copy {
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(255,215,0,.07);
  border: 1px solid rgba(255,215,0,.18);
  color: rgba(255,215,0,.55);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.dash-public-link-copy:hover { background: rgba(255,215,0,.16); color: var(--d-gold); }

/* ══════════════════════════════════════════════════════════════════════════
   CHANTIER 1 — Bloc "Publier mon profil" sur le wattboard
   Affiché sous #pvPublicLink. Trois états :
     1. non publié, peut publier  → bouton "Publier mon profil" (or)
     2. non publié, champs manquants (422) → message rouge + bouton désactivé
     3. publié → badge "En vitrine" + lien "Retirer de la vitrine"
   ══════════════════════════════════════════════════════════════════════════ */
.dash-publish-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,215,0,.07);
  display: none;  /* rendu affiche block/flex selon état */
}
.dash-publish-label {
  font-size: 8px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,215,0,.35); margin-bottom: 9px;
}
.dash-publish-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dash-publish-btn {
  flex: 0 0 auto;
  padding: 10px 18px;
  background: linear-gradient(135deg, #FFD700, #FFAA00);
  color: #000;
  border: none; border-radius: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s, transform .1s;
  display: inline-flex; align-items: center; gap: 7px;
}
.dash-publish-btn:hover { filter: brightness(1.1); }
.dash-publish-btn:active { transform: scale(.97); }
.dash-publish-btn[disabled] {
  background: rgba(255,215,0,.12);
  color: rgba(255,255,255,.35);
  cursor: not-allowed;
}
.dash-publish-btn[disabled]:hover { filter: none; }
.dash-publish-hint {
  font-size: 10.5px; color: rgba(255,255,255,.5);
  line-height: 1.5;
}
.dash-publish-hint strong { color: rgba(255,215,0,.85); font-weight: 600; }
.dash-publish-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  background: rgba(0,220,120,.12);
  border: 1px solid rgba(0,220,120,.3);
  color: #6be8a8;
  border-radius: 2px;
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
}
.dash-publish-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #6be8a8;
  box-shadow: 0 0 6px #6be8a8;
}
.dash-publish-unlink {
  background: transparent; border: none;
  color: rgba(255,100,100,.6);
  font-size: 10px; letter-spacing: .1em;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; padding: 0;
  transition: color .2s;
}
.dash-publish-unlink:hover { color: rgba(255,140,140,.9); }
.dash-publish-missing {
  margin-top: 9px;
  padding: 9px 11px;
  background: rgba(255,80,80,.08);
  border: 1px solid rgba(255,100,100,.25);
  border-radius: 3px;
  font-size: 10.5px; color: rgba(255,180,180,.85);
  line-height: 1.55;
}
.dash-publish-missing ul {
  margin: 5px 0 0; padding-left: 16px; color: rgba(255,200,200,.75);
}
.dash-publish-missing ul li { margin: 2px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   ÉTAPE 2 — Picker "Couleur du morceau" (dans le formulaire d'upload)
   ══════════════════════════════════════════════════════════════════════════
   Couleur optionnelle par track, utilisée comme fond des cellules
   orphelines sur /u/<slug>. Mode par défaut : "hériter du profil" (pas
   d'appui visuel). Presets + color input natif pour les cas particuliers.
   Visuellement discret — ce n'est pas la décision principale du post. */
.dash-track-color {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 215, 0, .1);
}
.dash-track-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
}
.dash-track-color-inherit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  color: rgba(255, 255, 255, .8);
  font-size: .75rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dash-track-color-inherit:hover {
  border-color: rgba(255, 215, 0, .28);
}
.dash-track-color[data-inherit="true"] .dash-track-color-inherit {
  background: rgba(255, 215, 0, .06);
  border-color: rgba(255, 215, 0, .4);
  color: #fff;
}
.dash-track-color-inherit-dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFD700;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}
/* Color input natif — on le cache visuellement, on ne montre que l'anneau.
   L'anneau prend la teinte courante via le color input sibling (contourné
   ici avec un dégradé fixe discret ; le vrai feedback se fait par les
   presets is-active ou la pastille d'héritage). */
.dash-track-color-swatch {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: inline-block;
}
.dash-track-color-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
}
.dash-track-color-swatch-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #FFD700, #FF4B8B, #8800FF, #00D4FF, #2ECC71, #FFD700);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-track-color-swatch-ring::after {
  content: "⋯";
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #0b0b0c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .7);
  font-size: .8rem;
}
.dash-track-color-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dash-track-color-preset {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
  outline: none;
}
.dash-track-color-preset:hover {
  transform: scale(1.1);
}
.dash-track-color-preset.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .18);
}

/* ══════════════════════════════════════════════════════════════════════════
   ÉTAPE 1 — Gate "profil publié obligatoire avant publication d'un son"
   ══════════════════════════════════════════════════════════════════════════
   Overlay pédagogique affiché à la place du form d'upload tant que
   users.profile_public = false. Source de vérité : renderCreationGate().
   Backend refuse de toute façon avec 409 (POST /api/watt/tracks et
   POST /tracks/) — cette UI évite à l'utilisateur de remplir pour rien.
   Le style reste dans la palette or/noir du dashboard, sans effet tape-à-
   l'œil : c'est une information, pas une sanction. */
.dash-creation-gate {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
  background: rgba(255, 215, 0, .04);
  border: 1px solid rgba(255, 215, 0, .18);
  border-radius: 6px;
}
.dash-creation-gate-ico {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 215, 0, .08);
  color: #FFD700;
}
.dash-creation-gate-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-creation-gate-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .2px;
}
.dash-creation-gate-sub {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
}
.dash-creation-gate .dash-btn-primary {
  align-self: flex-start;
  margin-top: 4px;
}
/* Parcours en 2 étapes : bouton primaire "Remplir mon profil" +
   lien secondaire "Activer PLUG WATT" côte-à-côte. */
.dash-creation-gate-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.dash-creation-gate-actions .dash-btn-secondary {
  font-size: 13px;
}
@media (max-width: 640px) {
  .dash-creation-gate {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
  }
  .dash-creation-gate-ico {
    width: 40px;
    height: 40px;
  }
}

/* Flash bref quand l'user clique dans le layout dégradé : la banner se
   re-signale pour indiquer "c'est ici qu'il faut agir". */
.dash-creation-gate.is-flash {
  animation: dash-gate-flash 0.9s ease-out;
}
@keyframes dash-gate-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, .6); }
  60%  { box-shadow: 0 0 0 6px rgba(255, 215, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* État "gated" du layout d'upload : reste visible pour que l'user
   comprenne ce qu'il pourra faire (dropzone + mode switcher avec/sans
   prompt + picker couleur) mais non cliquable. Les pointer-events sont
   interceptés en JS avant de toucher les onclick inline. L'opacité et le
   grayscale léger signalent clairement l'état inactif sans faire
   disparaître la proposition de valeur "vente prompt". */
.dash-upload-layout.is-gated {
  position: relative;
  opacity: .45;
  filter: grayscale(.3);
  user-select: none;
}
.dash-upload-layout.is-gated::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: not-allowed;
  z-index: 3;
}
/* On rétablit la lisibilité des labels qui subiraient sinon un double
   fade (parent opacity + rgba texte déjà atténué). */
.dash-upload-layout.is-gated * {
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   FREEMIUM — Compteur 6 sons + teaser PLUG WATT premium (dashboard)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Compteur barre ───────────────────────────────────────────────────────── */
.dash-free-counter {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(255,215,0,.04);
  border: 1px solid rgba(255,215,0,.1);
  border-radius: 4px;
}
.dash-free-counter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dash-free-counter-lbl {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,215,0,.4);
}
.dash-free-counter-val {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,215,0,.7);
  letter-spacing: .04em;
  transition: color .3s;
}
.dash-free-bar-track {
  height: 3px;
  background: rgba(255,215,0,.08);
  border-radius: 2px;
  overflow: hidden;
}
.dash-free-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(255,215,0,.7), rgba(255,215,0,.35));
  border-radius: 2px;
  transition: width .5s ease, background .5s ease;
}

/* ── Teaser premium dashboard ─────────────────────────────────────────────── */
.dash-premium-teaser {
  padding: 28px 24px;
  background: linear-gradient(135deg, rgba(255,215,0,.07) 0%, rgba(255,215,0,.02) 100%);
  border: 1px solid rgba(255,215,0,.22);
  border-radius: 6px;
  text-align: center;
  margin-bottom: 8px;
}
.dpt-bolt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.28);
  border-radius: 50%;
  color: #FFD700;
  margin-bottom: 14px;
}
.dpt-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #FFD700;
  margin-bottom: 5px;
}
.dpt-sub {
  font-size: 11px;
  color: rgba(255,215,0,.5);
  margin-bottom: 18px;
}
.dpt-coming {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,215,0,.85);
  letter-spacing: .06em;
  margin-bottom: 20px;
  padding: 7px 16px;
  background: rgba(255,215,0,.07);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 22px;
}
.dpt-coming-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: #FFD700;
  color: #0a080e;
  padding: 2px 8px;
  border-radius: 10px;
}
.dpt-features {
  list-style: none;
  margin: 0 auto 18px;
  padding: 0;
  text-align: left;
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
  max-width: 280px;
}
.dpt-features li {
  font-size: 11px;
  color: rgba(255,215,0,.55);
  letter-spacing: .03em;
}
.dpt-note {
  font-size: 9px;
  color: rgba(255,215,0,.3);
  letter-spacing: .08em;
  border-top: 1px solid rgba(255,215,0,.08);
  padding-top: 12px;
  margin-top: 6px;
}

/* ── Responsive teaser ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dash-premium-teaser { padding: 20px 16px; }
  .dpt-title { font-size: 13px; }
  .dpt-features { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPRINT G — Hiérarchie visuelle 4 blocs + back button + dashboard premium
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Numéros de blocs ────────────────────────────────────────────────────── */
.dash-section-hdr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,215,0,.08);
}
.dash-section-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  color: rgba(255,215,0,.22);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
}
.dash-section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  margin: 0;
}
.dash-section-sub {
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(255,215,0,.3);
  text-transform: uppercase;
  margin-left: auto;
}

/* ── Sections plus aérées ────────────────────────────────────────────────── */
.dash-section {
  margin-bottom: 56px;
}
@media (max-width: 640px) {
  .dash-section { margin-bottom: 40px; }
  .dash-section-title { font-size: 15px; }
  .dash-section-sub { display: none; }
}

/* ── Carte artiste plus premium ──────────────────────────────────────────── */
.dash-artist-card {
  padding: 28px;
  gap: 24px;
}
@media (max-width: 640px) {
  .dash-artist-card { padding: 20px 16px; gap: 18px; }
}

/* ── Bloc réseau intégré dans Classement ─────────────────────────────────── */
.dash-network-block {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,215,0,.07);
}
.dash-network-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,215,0,.45);
  margin-bottom: 4px;
}
.dash-network-sub {
  font-size: 10px;
  color: rgba(255,215,0,.25);
  margin-bottom: 16px;
  letter-spacing: .04em;
}

/* ── Panel "Mes Sons Publiés" (maintenant sous-bloc 2a d'Analytique) ──────
   Override de la définition ligne ~600 : le .dash-subhdr fournit la
   séparation visuelle, donc le panel n'a plus besoin de border/padding/radius
   propres — il reste un container list sobre. -------------------------------- */
.dash-tracks-panel {
  margin-top: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* ── Back arrow dans topbar ──────────────────────────────────────────────── */
.dash-topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-topbar-logo svg { opacity: .5; transition: opacity .2s; }
.dash-topbar-logo:hover svg { opacity: 1; }

/* ── Section profil: fond discret ────────────────────────────────────────── */
#sec-profile {
  background: rgba(255,215,0,.015);
  border: 1px solid rgba(255,215,0,.06);
  border-radius: 8px;
  padding: 24px;
}
@media (max-width: 640px) {
  #sec-profile { padding: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOC 02 — Ma Musique · pivot vente-prompt
   Mode switcher (2 pills) + colonne prompt + grille crédits↔SMYLES + char
   counter live. Architecture "vente prompt" poussée par défaut.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Mode switcher — 2 pills radio-like ─────────────────────────────────── */
.dash-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
  padding: 6px;
  background: rgba(14, 12, 18, .55);
  border: 1px solid rgba(255, 215, 0, .08);
  border-radius: var(--d-radius);
}

.dash-mode-pill {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--d-radius-sm);
  color: var(--d-text-dim);
  cursor: pointer;
  text-align: left;
  transition: background .2s, border-color .2s, color .2s;
  font-family: inherit;
}
.dash-mode-pill:hover {
  color: var(--d-text);
  background: rgba(255, 215, 0, .03);
}
.dash-mode-pill > svg {
  flex: 0 0 auto;
  margin-top: 2px;
  opacity: .6;
  transition: opacity .2s, color .2s;
}
.dash-mode-pill.is-active {
  background: linear-gradient(135deg,
    rgba(255, 215, 0, .08) 0%,
    rgba(255, 149, 0, .04) 100%);
  border-color: rgba(255, 215, 0, .35);
  color: var(--d-text);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, .08) inset;
}
.dash-mode-pill.is-active > svg {
  color: var(--d-gold);
  opacity: 1;
}

.dash-mode-pill-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dash-mode-pill-label strong {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.dash-mode-pill.is-active .dash-mode-pill-label strong {
  color: var(--d-gold);
}
.dash-mode-pill-label em {
  font-style: normal;
  font-size: .68rem;
  line-height: 1.4;
  color: var(--d-text-dim);
}

/* ── Colonne prompt (bloc recette IA) ───────────────────────────────────── */
.dash-upload-col-meta   { display: flex; flex-direction: column; gap: 10px; }
.dash-upload-col-prompt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background:
    linear-gradient(135deg,
      rgba(255, 215, 0, .04) 0%,
      rgba(255, 149, 0, .02) 100%),
    rgba(14, 12, 18, .5);
  border: 1px solid rgba(255, 215, 0, .16);
  border-radius: var(--d-radius-sm);
}

.dash-upload-col-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dash-prompt-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 215, 0, .1);
}
.dash-prompt-hdr-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 215, 0, .08);
  border: 1px solid rgba(255, 215, 0, .2);
  color: var(--d-gold);
  flex: 0 0 auto;
}
.dash-prompt-hdr-titles { display: flex; flex-direction: column; gap: 1px; }
.dash-prompt-hdr-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--d-text);
  letter-spacing: .02em;
}
.dash-prompt-hdr-sub {
  font-size: .66rem;
  color: rgba(255, 215, 0, .55);
  letter-spacing: .04em;
}

/* ── Helper avec compteur à droite (prompt_text 0/1000) ─────────────────── */
.dash-help-count {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.dash-help-suno { opacity: .65; font-size: .62rem; }

/* ── Section Style / ambiance (mood) — Col 1, toujours visible ─────────── */
.dash-mood-block {
  margin-top: 18px;
  padding: 16px 14px 12px;
  border: 1px solid rgba(136, 0, 255, .22);
  border-radius: 12px;
  background: rgba(136, 0, 255, .04);
}
.dash-mood-hdr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.dash-mood-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(200, 160, 255, .9);
}
.dash-mood-sub {
  font-size: .68rem;
  color: rgba(255, 255, 255, .45);
}
.dash-mood-extremes {
  display: flex;
  justify-content: space-between;
  font-size: .65rem;
  color: rgba(255, 255, 255, .35);
  margin-top: 2px;
}
.dash-slider {
  width: 100%;
  accent-color: #8800ff;
  margin-top: 4px;
  cursor: pointer;
}
.dash-slider-val {
  color: #cc88ff;
  font-weight: 700;
  margin-left: 6px;
}

/* ── P1-F4 (2026-05-04) — Réglages génération sous le bloc Recette IA ──── */
.dash-prompt-settings {
  margin-top: 18px;
  padding: 14px 14px 6px;
  border: 1px dashed rgba(255, 215, 0, .18);
  border-radius: 10px;
  background: rgba(255, 215, 0, .025);
}
.dash-prompt-settings-hdr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.dash-prompt-settings-title {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, .85);
}
.dash-prompt-settings-sub {
  font-size: .68rem;
  color: rgba(255, 255, 255, .55);
}

.dash-char-count {
  font-variant-numeric: tabular-nums;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--d-text-dim);
}
.dash-char-count[data-state="short"] {
  color: #ff7a7a;
  background: rgba(255, 80, 80, .06);
  border-color: rgba(255, 80, 80, .25);
}
.dash-char-count[data-state="ok"] {
  color: #50d98a;
  background: rgba(80, 217, 138, .06);
  border-color: rgba(80, 217, 138, .3);
}
.dash-char-count[data-state="over"] {
  color: #ffb347;
  background: rgba(255, 179, 71, .08);
  border-color: rgba(255, 179, 71, .4);
}

/* ── Grille de prix crédits ↔ SMYLES (repère artiste) ───────────────────── */
.dash-credit-grid {
  padding: 14px 14px 12px;
  background:
    radial-gradient(circle at 100% 0%,
      rgba(255, 215, 0, .05) 0%,
      rgba(255, 215, 0, 0) 65%),
    rgba(14, 12, 18, .6);
  border: 1px solid rgba(255, 215, 0, .14);
  border-radius: var(--d-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-credit-grid-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--d-gold);
}
.dash-credit-grid-sub {
  font-size: .68rem;
  line-height: 1.45;
  color: var(--d-text-dim);
}

.dash-credit-grid-packs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.dash-credit-grid-packs li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--d-text);
}
.dcg-pack {
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .04em;
  color: rgba(255, 215, 0, .8);
  min-width: 60px;
}
.dcg-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(255, 215, 0, .18);
  transform: translateY(-3px);
}
.dcg-rate {
  color: var(--d-text);
  font-weight: 600;
}

.dash-credit-live {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(255, 215, 0, .05);
  border: 1px solid rgba(255, 215, 0, .22);
  border-radius: var(--d-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-credit-live-lbl {
  font-size: .7rem;
  color: var(--d-text-dim);
  line-height: 1.4;
}
.dash-credit-live-lbl strong {
  color: var(--d-gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-credit-live-range {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--d-gold);
  font-variant-numeric: tabular-nums;
}
.dcg-dash { opacity: .4; font-weight: 400; }
.dash-credit-live-note {
  font-size: .63rem;
  color: rgba(255, 215, 0, .5);
  line-height: 1.45;
  letter-spacing: .02em;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .dash-upload-fields {
    grid-template-columns: 1fr !important;
  }
  [data-mode="simple"] .dash-upload-fields {
    grid-template-columns: 1fr !important;
  }
  .dash-mode-switch { grid-template-columns: 1fr; }
  .dash-upload-col-aside {
    flex-direction: column;
    gap: 14px;
  }
}
@media (max-width: 560px) {
  .dash-mode-pill { padding: 10px 12px; }
  .dash-mode-pill-label strong { font-size: .78rem; }
  .dash-mode-pill-label em { font-size: .64rem; }
  .dash-credit-grid-packs li { font-size: .7rem; }
  .dash-credit-live-range { font-size: .9rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOC 02b — Mon ADN (Signature créative vendable)
   États : empty (placeholder + CTA) · summary (résumé + actions) · editor
   Design : gold accent sur fond pourpre/noir, même langage que le reste du
            dashboard. Accents utilisent --d-gold / --d-gold-glow.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── État vide : placeholder "Pas encore d'ADN défini" ────────────────── */
.dash-adn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 36px 24px 32px;
  background:
    radial-gradient(circle at 50% 0%,
      rgba(255, 215, 0, .05) 0%,
      rgba(255, 215, 0, 0) 65%),
    rgba(14, 12, 18, .45);
  border: 1px dashed rgba(255, 215, 0, .18);
  border-radius: var(--d-radius);
}

.dash-adn-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 215, 0, .04);
  border: 1px solid rgba(255, 215, 0, .1);
  color: var(--d-gold);
  margin-bottom: 4px;
}

.dash-adn-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--d-text);
  letter-spacing: .02em;
}

.dash-adn-empty-sub {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--d-text-dim);
  max-width: 560px;
  margin-bottom: 8px;
}

/* ── État résumé : ADN existant (card synthétique + actions) ──────────── */
.dash-adn-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background:
    linear-gradient(135deg,
      rgba(255, 215, 0, .04) 0%,
      rgba(255, 149, 0, .02) 100%),
    rgba(14, 12, 18, .55);
  border: 1px solid rgba(255, 215, 0, .18);
  border-radius: var(--d-radius);
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, .04) inset,
    0 6px 22px rgba(0, 0, 0, .25);
}

.dash-adn-summary-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-adn-summary-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dash-adn-summary-eyebrow {
  font-size: .64rem;
  font-weight: 700;
  color: rgba(255, 215, 0, .55);
  text-transform: uppercase;
  letter-spacing: .18em;
}

.dash-adn-summary-status {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--d-text);
}
.dash-adn-summary-status[data-status="published"] {
  color: #50d98a;
}
.dash-adn-summary-status[data-status="published"]::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #50d98a;
  box-shadow: 0 0 8px rgba(80, 217, 138, .7);
  margin-right: 8px;
  vertical-align: middle;
}
.dash-adn-summary-status[data-status="draft"]::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 215, 0, .45);
  margin-right: 8px;
  vertical-align: middle;
}

.dash-adn-summary-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 215, 0, .06);
  border: 1px solid rgba(255, 215, 0, .2);
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--d-gold);
  white-space: nowrap;
}

.dash-adn-summary-price-unit {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, .55);
}

.dash-adn-summary-desc {
  margin: 0;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--d-text);
  opacity: .85;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-adn-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dash-adn-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 215, 0, .04);
  border: 1px solid rgba(255, 215, 0, .14);
  color: rgba(255, 215, 0, .8);
}
.dash-adn-summary-badge[data-tone="muted"] {
  background: rgba(255, 255, 255, .02);
  border-color: rgba(255, 255, 255, .08);
  color: var(--d-text-dim);
}

.dash-adn-summary-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.dash-adn-lock-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 149, 0, .05);
  border: 1px solid rgba(255, 149, 0, .18);
  border-radius: var(--d-radius-sm);
  font-size: .74rem;
  line-height: 1.5;
  color: rgba(255, 200, 120, .9);
}
.dash-adn-lock-note svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: rgba(255, 200, 120, .85);
}

/* ── Éditeur inline (création / modification) ─────────────────────────── */
.dash-adn-editor {
  margin-top: 14px;
}

.dash-adn-editor-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 22px 20px;
  background: rgba(14, 12, 18, .65);
  border: 1px solid rgba(255, 215, 0, .22);
  border-radius: var(--d-radius);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .35);
}

.dash-adn-editor-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 215, 0, .08);
}

.dash-adn-editor-title {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--d-text);
  text-transform: uppercase;
}

.dash-adn-editor-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--d-text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, border-color .2s, background .2s;
}
.dash-adn-editor-close:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
}

.dash-adn-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 215, 0, .06);
  flex-wrap: wrap;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .dash-adn-empty { padding: 28px 16px 24px; }
  .dash-adn-empty-icon { width: 60px; height: 60px; }
  .dash-adn-summary { padding: 16px 14px; }
  .dash-adn-summary-hdr { flex-direction: column; align-items: stretch; gap: 8px; }
  .dash-adn-summary-price { align-self: flex-start; }
  .dash-adn-summary-actions { flex-direction: column; }
  .dash-adn-summary-actions .dash-btn-primary,
  .dash-adn-summary-actions .dash-btn-secondary { width: 100%; justify-content: center; }
  .dash-adn-editor-inner { padding: 16px 14px; }
  .dash-adn-editor-actions { flex-direction: column-reverse; }
  .dash-adn-editor-actions .dash-btn-primary,
  .dash-adn-editor-actions .dash-btn-ghost { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOC 3 — PLUG WATT
   Pill contrôlant la visibilité publique (profile_public) de l'utilisateur
   sur la marketplace. Remplace l'ex-page watt.html. Trois sous-zones :
     • dash-plug-toggle-card   : switch ON/OFF + libellé d'état
     • dash-plug-preview       : vignette "aperçu cellule marketplace"
     • dash-plug-stats + .dash-plug-actions : compteurs + lien boutique
   Stylistique cohérente avec les autres sections .dash-section.
   ═══════════════════════════════════════════════════════════════════════════ */

.dash-plug-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* ── Toggle card ────────────────────────────────────────────────────────── */
.dash-plug-toggle-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .2s, background .2s;
}
.dash-plug-toggle-card.is-on {
  background: rgba(100, 220, 120, .05);
  border-color: rgba(100, 220, 120, .22);
}
.dash-plug-toggle-card.is-off {
  background: rgba(255, 215, 0, .04);
  border-color: rgba(255, 215, 0, .18);
}

.dash-plug-toggle-left {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.dash-plug-toggle-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
  transition: background .2s, box-shadow .2s;
  flex-shrink: 0;
}
.is-on  .dash-plug-toggle-dot {
  background: #6ee87f;
  box-shadow: 0 0 8px 2px rgba(110,232,127,.35);
}
.is-off .dash-plug-toggle-dot {
  background: #ffd700;
  box-shadow: 0 0 6px 1px rgba(255,215,0,.28);
}

.dash-plug-toggle-title {
  font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 2px;
}
.dash-plug-toggle-sub {
  font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.35;
}

/* ── Switch (checkbox + slider) ─────────────────────────────────────────── */
.dash-plug-switch {
  position: relative; display: inline-block;
  width: 46px; height: 24px;
  cursor: pointer; flex-shrink: 0;
}
.dash-plug-switch input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.dash-plug-switch-slider {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  transition: background .2s;
}
.dash-plug-switch-slider::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.dash-plug-switch input:checked + .dash-plug-switch-slider {
  background: rgba(110,232,127,.55);
}
.dash-plug-switch input:checked + .dash-plug-switch-slider::before {
  transform: translateX(22px);
}
.dash-plug-switch input:disabled + .dash-plug-switch-slider {
  opacity: .45; cursor: wait;
}

/* ── Preview cellule marketplace ────────────────────────────────────────── */
.dash-plug-preview {
  padding: 14px 16px;
  border-radius: 4px;
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.1);
}
.dash-plug-preview-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.45); margin-bottom: 10px;
}
.dash-plug-cell {
  --brand: #8800ff;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(136,0,255,.08) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  position: relative;
}
.dash-plug-cell-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  flex-shrink: 0;
  background-size: cover; background-position: center;
}
.dash-plug-cell-body { flex: 1; min-width: 0; }
.dash-plug-cell-name {
  font-size: 14px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-plug-cell-genre {
  font-size: 12px; color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-plug-cell-chip {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  padding: 3px 7px; border-radius: 999px;
  background: rgba(255,215,0,.12); color: #ffd700;
  border: 1px solid rgba(255,215,0,.24);
  flex-shrink: 0;
}
.dash-plug-cell.is-public {
  background: linear-gradient(90deg, rgba(110,232,127,.08) 0%, rgba(255,255,255,.03) 100%);
  border-color: rgba(110,232,127,.3);
}
.dash-plug-cell.is-public .dash-plug-cell-chip {
  background: rgba(110,232,127,.12);
  color: #6ee87f;
  border-color: rgba(110,232,127,.28);
}
.dash-plug-preview-note {
  margin-top: 10px;
  font-size: 12px; line-height: 1.4;
  color: rgba(255,255,255,.55);
}

/* ── Stats ──────────────────────────────────────────────────────────────── */
.dash-plug-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.dash-plug-stat {
  padding: 10px 12px;
  border-radius: 3px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  text-align: center;
}
.dash-plug-stat-val {
  font-size: 18px; font-weight: 700; color: #fff; line-height: 1;
}
.dash-plug-stat-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.45); margin-top: 4px;
}

/* ── Actions ────────────────────────────────────────────────────────────── */
.dash-plug-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.dash-plug-open {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 3px;
  background: rgba(136,0,255,.18);
  color: #c88cff;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(136,0,255,.36);
  transition: background .15s, border-color .15s, color .15s;
}
.dash-plug-open:hover {
  background: rgba(136,0,255,.28);
  border-color: rgba(136,0,255,.6);
  color: #fff;
}
.dash-plug-open.is-disabled {
  pointer-events: none;
  opacity: .45;
}
.dash-plug-actions-hint {
  font-size: 11px; color: rgba(255,255,255,.42);
}
.dash-plug-actions-hint code {
  background: rgba(255,255,255,.06);
  padding: 1px 5px; border-radius: 2px;
  font-size: 10px;
  color: rgba(255,255,255,.6);
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dash-plug-toggle-card { flex-direction: column; align-items: stretch; gap: 14px; }
  .dash-plug-toggle-right { align-self: flex-end; }
  .dash-plug-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .dash-plug-stat-val { font-size: 15px; }
}


/* =============================================================================
   SECTION IDENTITÉ PUBLIQUE (#sec-identity) — Phase 5
   -----------------------------------------------------------------------------
   Introduite lors de la simplification du slug : toute l'édition du profil
   artiste (identité visuelle + texte + couleurs + socials + casquettes)
   vit ici dans le WATT BOARD. /u/<slug> redevient une pure vitrine lecture
   seule. Voir dashboard.html bloc 1 pour le rationale complet.

   Layout : 2 colonnes ≥960px (form gauche, preview sticky droite),
            1 colonne empilée <960px (preview passe en bas).
   ============================================================================= */

.dash-identity-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 960px) {
  .dash-identity-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ── Colonne formulaire ──────────────────────────────────────────────────── */

.dash-identity-form {
  display: flex;
  flex-direction: column;
  gap: 0;  /* les .dash-subhdr gèrent déjà leurs marges verticales */
}

.dash-identity-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.dash-identity-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 540px) {
  .dash-identity-row-2 { grid-template-columns: 1fr; }
}


/* ── Champ générique (label + input/textarea) ────────────────────────────── */

.dash-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.dash-field-lbl {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d-text-dim);
}

.dash-field-input,
.dash-field-textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--d-border);
  border-radius: 8px;
  color: var(--d-text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.dash-field-input:focus,
.dash-field-textarea:focus {
  outline: none;
  border-color: rgba(255, 215, 0, 0.45);
  background: rgba(255, 255, 255, 0.05);
}

.dash-field-input::placeholder,
.dash-field-textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.dash-field-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

.dash-field-count {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 10px;
  color: var(--d-text-dim);
  font-variant-numeric: tabular-nums;
  background: rgba(14, 10, 22, 0.85);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}


/* ── 1a · Visuels (cover + avatar) ───────────────────────────────────────── */

.dash-identity-visuals {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 16px;
  margin-bottom: 14px;
  align-items: stretch;
}

@media (max-width: 540px) {
  .dash-identity-visuals {
    grid-template-columns: 1fr;
  }
}

.dash-identity-cover,
.dash-identity-avatar-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-cover-preview {
  width: 100%;
  height: 140px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(136, 0, 255, 0.18), rgba(255, 215, 0, 0.08));
  border: 1px solid var(--d-border);
  background-size: cover;
  background-position: center;
}

.dash-avatar-preview {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--dash-accent, #7C3AED);
  border: 1px solid var(--d-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

@media (max-width: 540px) {
  .dash-avatar-preview {
    width: 120px;
    height: 120px;
    font-size: 38px;
  }
}

.dash-identity-visual-btn {
  justify-content: center;
  font-size: 11px;
}


/* ── 1c · Casquettes (grid de 12 checkboxes) ─────────────────────────────── */

.dash-identity-roles {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}

.dash-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.dash-role-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--d-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--d-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dash-role-chip:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 215, 0, 0.2);
}

.dash-role-chip input[type="checkbox"] {
  accent-color: #FFD700;
  margin: 0;
  cursor: pointer;
}

.dash-role-chip.dash-role-chip-checked {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.45);
  color: #fff;
}


/* ── 1d · Couleurs ───────────────────────────────────────────────────────── */

.dash-field-color .dash-color-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--d-border);
  border-radius: 8px;
}

.dash-field-color input[type="color"] {
  width: 44px;
  height: 32px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}

.dash-color-hex {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--d-text-dim);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}


/* ── 1e · Socials ────────────────────────────────────────────────────────── */

.dash-socials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.dash-social-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 10px;
}

.dash-social-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(136, 0, 255, 0.15);
  border: 1px solid rgba(136, 0, 255, 0.3);
  color: #c9a3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}


/* ── Actions (status + save) ─────────────────────────────────────────────── */

.dash-identity-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--d-border);
}

.dash-identity-status {
  font-size: 12px;
  color: var(--d-text-dim);
  letter-spacing: 0.02em;
  transition: color 0.2s;
  margin-right: auto;
}

.dash-identity-status.is-saving { color: rgba(255, 215, 0, 0.75); }
.dash-identity-status.is-saved  { color: #6ee7a8; }
.dash-identity-status.is-error  { color: #ff8888; }


/* ── Colonne preview sticky ──────────────────────────────────────────────── */

.dash-identity-preview {
  position: sticky;
  top: calc(var(--d-topbar-h) + var(--d-snav-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: rgba(14, 10, 22, 0.6);
  border: 1px solid var(--d-border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

@media (max-width: 960px) {
  .dash-identity-preview {
    position: static;
  }
}

.dash-identity-preview-lbl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.75);
}

.dash-identity-preview-url {
  color: var(--d-text-dim);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.dash-identity-preview-frame {
  min-height: 240px;
  border-radius: 10px;
  background: var(--dash-preview-bg, #070608);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
}

.dash-preview-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

/* Structure du mini-render à l'intérieur du frame — classes posées par JS */
.dash-preview-cover {
  width: 100%;
  height: 80px;
  background: linear-gradient(135deg, rgba(136, 0, 255, 0.2), rgba(255, 215, 0, 0.08));
  background-size: cover;
  background-position: center;
}

.dash-preview-head {
  padding: 0 14px;
  margin-top: -24px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.dash-preview-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--dash-preview-accent, #7C3AED);
  border: 2px solid #070608;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.dash-preview-name {
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}

.dash-preview-meta {
  padding: 10px 14px 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

.dash-preview-bio {
  padding: 0 14px 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
  max-height: 4.5em;
  overflow: hidden;
}

.dash-preview-socials {
  padding: 0 14px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.dash-preview-social-chip {
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
}

.dash-identity-preview-link {
  justify-content: center;
  font-size: 11px;
}


/* ── Override "sous-titre" spécifique Identité — serré pour pas bouffer l'espace */
#sec-identity .dash-subhdr {
  margin: 26px 0 12px;
}
#sec-identity .dash-subhdr:first-of-type {
  margin-top: 0;
}

/* ── Trophées ────────────────────────────────────────────────────────────── */

.tph-axes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
@media (max-width: 600px) { .tph-axes { grid-template-columns: 1fr; } }

.tph-axis-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
}
.tph-axis-icon { font-size: 24px; margin-bottom: 6px; }
.tph-axis-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 8px; }
.tph-axis-val { font-size: 28px; font-weight: 900; color: #cc88ff; line-height: 1; }
.tph-axis-sub { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 4px; }

.tph-axis-group { margin-bottom: 28px; }
.tph-axis-group-title { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; padding-left: 2px; }
.tph-badges-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

.tph-badge {
  border-radius: 14px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid;
  transition: transform .15s;
}
.tph-badge:hover { transform: translateY(-2px); }
.tph-badge-done {
  background: rgba(204,136,255,.08);
  border-color: rgba(204,136,255,.3);
}
.tph-badge-locked {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
  opacity: .75;
}
.tph-badge-icon { font-size: 22px; }
.tph-badge-name { font-size: 13px; font-weight: 700; color: #fff; }
.tph-badge-desc { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.45; }
.tph-badge-reward { font-size: 11px; font-weight: 700; color: #FFD700; margin-top: 2px; }
.tph-badge-unlocked-at { font-size: 10px; color: rgba(204,136,255,.8); margin-top: 4px; }

.tph-badge-progress { margin-top: 6px; }
.tph-progress-bar { height: 4px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.tph-progress-fill { height: 100%; background: linear-gradient(90deg, #cc88ff, #7C3AED); border-radius: 99px; transition: width .4s; }
.tph-progress-txt { font-size: 10px; color: rgba(255,255,255,.4); }

.tph-loading { padding: 40px; text-align: center; color: rgba(255,255,255,.4); font-size: 13px; }


/* ── Chips mood / tags (dte2 + création) ────────────────────────────────── */
.dte2-mood-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dte2-chip {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(204,136,255,.25);
  background: rgba(204,136,255,.08);
  color: rgba(255,255,255,.65);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.dte2-chip:hover {
  border-color: rgba(204,136,255,.5);
  color: #fff;
}
.dte2-chip.is-active {
  background: rgba(204,136,255,.22);
  border-color: #cc88ff;
  color: #fff;
  font-weight: 600;
}