/* ============================================================
   DigitPilot — Studio Visuel IA · Branding CSS v3.0
   Fond ardoise #2E3944, Glassmorphism panneaux, Teal-Violet accents
   Couleurs exactes du mock-up fourni
   ⚠️ SCOPE : #section-studio UNIQUEMENT
   Ne touche pas au dashboard global, sidebar, ni aux autres modules
   ============================================================ */

/* ── Variables locales Studio — calées sur le mock-up ── */
#section-studio {
  /* Fonds */
  --sv-bg:            #2E3944;     /* fond principal ardoise mock-up */
  --sv-bg2:           #344049;     /* variante légèrement plus claire */
  --sv-panel:         rgba(255,255,255,0.07);   /* panneaux glassmorphism */
  --sv-panel-solid:   #3A4858;     /* panel fallback sans blur */
  --sv-panel-light:   rgba(255,255,255,0.10);   /* panel hover/active */
  --sv-sidebar:       rgba(255,255,255,0.06);   /* sidebar labs */

  /* Bordures */
  --sv-border:        rgba(255,255,255,0.10);
  --sv-border-teal:   rgba(20,184,166,0.35);
  --sv-border-gold:   rgba(231,201,141,0.28);

  /* Accents */
  --sv-teal:          #14B8A6;
  --sv-teal-d:        #0F766E;
  --sv-violet:        #7C3AED;
  --sv-violet-l:      #A78BFA;
  --sv-gold:          #E7C98D;

  /* Textes */
  --sv-text:          #F1F5F9;
  --sv-text2:         #CBD5E1;
  --sv-text3:         #94A3B8;

  /* Upload zones */
  --sv-upload-bg:     rgba(255,255,255,0.04);
  --sv-upload-hover:  rgba(20,184,166,0.10);

  /* Glassmorphism */
  --sv-blur:          blur(14px);
  --sv-radius:        14px;
  --sv-radius-sm:     10px;
  --sv-shadow:        0 4px 24px rgba(0,0,0,0.25);
}

/* ════════════════════════════════════════════════════════════
   ══ CONTENEUR PRINCIPAL ══
   ════════════════════════════════════════════════════════════ */

/* Fond gradient multi-couche — UNE seule déclaration background */
#section-studio {
  background:
    radial-gradient(ellipse 65% 55% at 96% 4%,  rgba(180, 80, 255, 0.40) 0%, transparent 58%),
    radial-gradient(ellipse 48% 40% at 87% 16%, rgba(57, 208, 216, 0.30) 0%, transparent 50%),
    radial-gradient(ellipse 58% 48% at 3%  93%, rgba(185,169, 138, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 85% 75% at 50% 50%, #3D5268 0%, #304457 50%, #263749 100%) !important;
  color: var(--sv-text) !important;
  min-height: 100%;
}

/* .section-card hérite du fond du parent — on le rend transparent
   pour laisser le gradient de #section-studio transparaître */
#section-studio .section-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 24px !important;
}

/* ══ EN-TÊTE ══ */
#section-studio .section-card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--sv-border) !important;
  padding-bottom: 18px !important;
  margin-bottom: 20px !important;
}

/* ══ BADGE CRÉDITS ══ */
#section-studio .studio-credits-badge {
  background: rgba(20,184,166,0.12) !important;
  border: 1px solid rgba(20,184,166,0.28) !important;
  border-radius: 10px !important;
  backdrop-filter: var(--sv-blur) !important;
  -webkit-backdrop-filter: var(--sv-blur) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ NAVIGATION LABS (onglets latéraux) ══
   ════════════════════════════════════════════════════════════ */
#section-studio .studio-lab-btn {
  background: var(--sv-panel) !important;
  border: 1px solid var(--sv-border) !important;
  color: var(--sv-text2) !important;
  border-radius: 10px !important;
  padding: 9px 18px !important;
  font-size: 0.81rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  backdrop-filter: var(--sv-blur) !important;
  -webkit-backdrop-filter: var(--sv-blur) !important;
}

#section-studio .studio-lab-btn:hover {
  background: var(--sv-panel-light) !important;
  border-color: rgba(20,184,166,0.35) !important;
  color: var(--sv-text) !important;
}

/* Bouton lab actif — gradient teal→violet premium */
#section-studio .studio-lab-btn.active {
  background: linear-gradient(135deg, #0F6E73 0%, #6C3D86 100%) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(15,110,115,0.35), 0 2px 8px rgba(108,61,134,0.25) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ PANNEAUX LABS — fond glassmorphism ══
   ════════════════════════════════════════════════════════════ */
#section-studio .studio-lab-panel {
  background: transparent !important;
}

/* Grilles de colonnes internes : fond semi-transparent */
#section-studio .studio-lab-panel > div {
  position: relative;
}

/* ════════════════════════════════════════════════════════════
   ══ TYPOGRAPHIE — Libre Baskerville (scope Studio)
   ════════════════════════════════════════════════════════════ */

/* Gros titres uppercase (nom du lab, titres de section) → italic */
#section-studio [style*="text-transform:uppercase"],
#section-studio [style*="text-transform: uppercase"],
#section-studio [style*="font-weight:800"],
#section-studio [style*="font-weight: 800"] {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-style: italic !important;
}

/* Titres moyens (labels section, titres panneaux) */
#section-studio [style*="font-weight:700"][style*="font-size:0.9"],
#section-studio [style*="font-weight:700"][style*="font-size:1."],
#section-studio [style*="font-weight: 700"][style*="font-size: 1."] {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-style: italic !important;
}

/* ════════════════════════════════════════════════════════════
   ══ LABELS & TEXTES ══
   ════════════════════════════════════════════════════════════ */
#section-studio label {
  color: var(--sv-text2) !important;
}

#section-studio [style*="color:var(--gray-l)"],
#section-studio [style*="color: var(--gray-l)"],
#section-studio [style*="color:var(--gray)"],
#section-studio [style*="color: var(--gray)"] {
  color: var(--sv-text3) !important;
}

#section-studio [style*="color:var(--purple-l)"],
#section-studio [style*="color: var(--purple-l)"] {
  color: var(--sv-teal) !important;
}

#section-studio [style*="color:#2F4F3E"],
#section-studio [style*="color: #2F4F3E"],
#section-studio [style*="color:#2f4f3e"] {
  color: var(--sv-text) !important;
}

/* Titres uppercase des sections */
#section-studio [style*="text-transform:uppercase"][style*="font-weight:700"],
#section-studio [style*="text-transform: uppercase"][style*="font-weight: 700"] {
  color: var(--sv-teal) !important;
}

/* Texte secondaire gris */
#section-studio [style*="color:#9ca3af"] {
  color: var(--sv-text3) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ ICÔNES — harmonisation bronze #C8A96B partout ══
   (Les icônes FA inline dans les labs ont déjà color:#C8A96B en HTML,
    mais on force celles qui seraient restées d'une autre couleur)
   ════════════════════════════════════════════════════════════ */

/* Icônes vertes → teal */
#section-studio .fa[style*="color:#7FA88B"],
#section-studio .fa[style*="color: #7FA88B"],
#section-studio i[style*="color:#7FA88B"],
#section-studio i[style*="color: #7FA88B"] {
  color: var(--sv-teal) !important;
}

/* Icônes colored (green, blue, etc.) laissées en bronze sauf teal, gold, rouge */
#section-studio .fa[style*="color:rgba(245,166,35"] {
  color: var(--sv-gold) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ INPUTS / TEXTAREA / SELECT ══
   ════════════════════════════════════════════════════════════ */
#section-studio textarea,
#section-studio input[type="text"],
#section-studio input[type="number"],
#section-studio select {
  background: rgba(0,0,0,0.22) !important;
  border: 1px solid var(--sv-border) !important;
  color: var(--sv-text) !important;
  border-radius: 10px !important;
}

#section-studio textarea::placeholder,
#section-studio input::placeholder {
  color: var(--sv-text3) !important;
}

#section-studio textarea:focus,
#section-studio input:focus,
#section-studio select:focus {
  border-color: rgba(20,184,166,0.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.12) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ BOUTONS PROMPT / FORMAT / QUALITÉ ══
   ════════════════════════════════════════════════════════════ */
#section-studio .prompt-btn {
  background: linear-gradient(135deg, rgba(15,110,115,0.28) 0%, rgba(108,61,134,0.28) 100%) !important;
  border: 1px solid rgba(20,184,166,0.30) !important;
  color: var(--sv-text) !important;
  border-radius: 8px !important;
  transition: all 0.18s !important;
}

#section-studio .prompt-btn:hover {
  background: linear-gradient(135deg, rgba(15,110,115,0.50) 0%, rgba(108,61,134,0.50) 100%) !important;
  border-color: rgba(20,184,166,0.65) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

#section-studio .prompt-btn.active,
#section-studio .prompt-btn.selected {
  background: linear-gradient(135deg, #0F6E73 0%, #6C3D86 100%) !important;
  border-color: var(--sv-teal) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(15,110,115,0.35) !important;
}

#section-studio .format-btn,
#section-studio .quality-btn {
  background: rgba(255,255,255,0.05) !important;
  border: 1.5px solid var(--sv-border) !important;
  color: var(--sv-text2) !important;
  border-radius: 8px !important;
  transition: all 0.15s !important;
}

#section-studio .format-btn.active,
#section-studio .quality-btn.active {
  background: rgba(20,184,166,0.16) !important;
  border-color: var(--sv-teal) !important;
  color: var(--sv-teal) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ BOUTONS PRINCIPAUX GÉNÉRER — gradient premium ══
   ════════════════════════════════════════════════════════════ */
#section-studio [id$="GenerateBtn"],
#section-studio [id$="generateBtn"],
#section-studio [id$="ActivateBtn"],
#section-studio #studioSunoGenerateBtn,
#section-studio #lipsyncIAGenerateBtn,
#section-studio #studioVoiceGenerateBtn,
#section-studio #studioFamilyGenerateBtn,
#section-studio #studioVideoGenerateBtn {
  background: linear-gradient(135deg, #0F6E73 0%, #6C3D86 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(15,110,115,0.30) !important;
  transition: all 0.2s ease !important;
}

#section-studio [id$="GenerateBtn"]:hover,
#section-studio [id$="generateBtn"]:hover,
#section-studio #studioSunoGenerateBtn:hover,
#section-studio #lipsyncIAGenerateBtn:hover,
#section-studio #studioVoiceGenerateBtn:hover,
#section-studio #studioFamilyGenerateBtn:hover,
#section-studio #studioVideoGenerateBtn:hover {
  box-shadow: 0 6px 28px rgba(15,110,115,0.45) !important;
  transform: translateY(-1px) !important;
  opacity: 0.95 !important;
}

/* ════════════════════════════════════════════════════════════
   ══ ZONES FOND CLAIR → DARK ══
   (overrides CSS inline qui mettent du fond blanc/vert clair)
   ════════════════════════════════════════════════════════════ */

/* Vert clair (#EAF3EC) → panel glassmorphism */
#section-studio [style*="background:#EAF3EC"],
#section-studio [style*="background: #EAF3EC"] {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: var(--sv-blur) !important;
  -webkit-backdrop-filter: var(--sv-blur) !important;
  border-color: var(--sv-border) !important;
}

/* Bordures vertes → border neutral */
#section-studio [style*="border:1px solid #D7E3DA"],
#section-studio [style*="border: 1px solid #D7E3DA"] {
  border-color: var(--sv-border) !important;
}

/* Blocs rgba bleu clair → violet dark */
#section-studio [style*="background:rgba(59,130,246,0.06)"],
#section-studio [style*="background: rgba(59,130,246,0.06)"] {
  background: rgba(124,58,237,0.08) !important;
  border-color: rgba(124,58,237,0.22) !important;
}

#section-studio [style*="color:#60a5fa"] {
  color: var(--sv-violet-l) !important;
}

/* Blocs rgba vert moyen → teal dark */
#section-studio [style*="background:rgba(42,80,90"] {
  background: rgba(20,184,166,0.10) !important;
  border-color: rgba(20,184,166,0.25) !important;
}

/* Fond 0,0,0 opacity → légèrement plus clair sur ardoise */
#section-studio [style*="background:rgba(0,0,0,0.2)"] {
  background: rgba(0,0,0,0.28) !important;
}
#section-studio [style*="background:rgba(0,0,0,0.3)"] {
  background: rgba(0,0,0,0.32) !important;
  border-color: var(--sv-border-gold) !important;
}

/* rgba(255,255,255,0.02 / 0.03) → panel glassmorphism */
#section-studio [style*="background:rgba(255,255,255,0.02)"],
#section-studio [style*="background:rgba(255,255,255,0.03)"] {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--sv-border) !important;
}

/* Bordures rgba white 0.07/0.08 → harmonisé */
#section-studio [style*="border:1px solid rgba(255,255,255,0.07)"],
#section-studio [style*="border:1px solid rgba(255,255,255,0.08)"] {
  border-color: var(--sv-border) !important;
}

/* Badge coût */
#section-studio [style*="background:rgba(245,158,11,0.07)"],
#section-studio [style*="background: rgba(245,158,11,0.07)"] {
  background: rgba(231,201,141,0.08) !important;
  border-color: rgba(231,201,141,0.22) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ ONGLETS INTERNES LAB IMAGE ══
   ════════════════════════════════════════════════════════════ */

/* Séparateur onglets */
#lab_image > div:first-child {
  border-bottom-color: var(--sv-border) !important;
}

#lab_image #imgTab_builder,
#lab_image #imgTab_prompt,
#lab_image #imgTab_avatar {
  background: none !important;
  color: var(--sv-text3) !important;
  border-bottom-color: transparent !important;
}

/* Onglet actif (border-bottom vert → teal) */
#lab_image #imgTab_builder[style*="color:#2F4F3E"],
#lab_image #imgTab_builder[style*="border-bottom:2px solid #2F4F3E"] {
  color: var(--sv-teal) !important;
  border-bottom-color: var(--sv-teal) !important;
}

/* Bloc "Image de référence" */
#lab_image [style*="background:#EAF3EC"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--sv-border) !important;
  border-radius: 14px !important;
}

#lab_image [style*="color:#2F4F3E"] {
  color: var(--sv-text) !important;
}

/* Badge référence active */
#lab_image #refImageBadge {
  background: rgba(20,184,166,0.14) !important;
  border-color: rgba(20,184,166,0.38) !important;
  color: var(--sv-teal) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ GALERIE IMAGES (lab image) ══
   ════════════════════════════════════════════════════════════ */
#section-studio #studioImageGallery > div {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--sv-border) !important;
  border-radius: 12px !important;
}

/* ════════════════════════════════════════════════════════════
   ══ ZONE PROMPT PREVIEW ══
   ════════════════════════════════════════════════════════════ */
#section-studio [style*="background:rgba(0,0,0,0.3)"],
#section-studio [style*="background: rgba(0,0,0,0.3)"] {
  background: rgba(0,0,0,0.32) !important;
  border-color: var(--sv-border-gold) !important;
  border-radius: 12px !important;
}

/* ════════════════════════════════════════════════════════════
   ══ BANNIÈRE "MOTEUR ACTIF" ══
   ════════════════════════════════════════════════════════════ */
#section-studio [id^="studioDemoBanner"] {
  background: rgba(20,184,166,0.07) !important;
  border-color: rgba(20,184,166,0.18) !important;
  color: var(--sv-teal) !important;
  border-radius: 9px !important;
}

/* ════════════════════════════════════════════════════════════
   ══ STATUT MOTEUR ══
   ════════════════════════════════════════════════════════════ */
#section-studio #studioWorkerStatus {
  background: rgba(20,184,166,0.07) !important;
  border-color: rgba(20,184,166,0.20) !important;
  color: var(--sv-teal) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ SCROLLBAR ══
   ════════════════════════════════════════════════════════════ */
#section-studio ::-webkit-scrollbar { width: 5px; }
#section-studio ::-webkit-scrollbar-track { background: transparent; }
#section-studio ::-webkit-scrollbar-thumb {
  background: rgba(20,184,166,0.28);
  border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════
   ══ CODE INLINE ══
   ════════════════════════════════════════════════════════════ */
#section-studio code {
  background: rgba(20,184,166,0.12) !important;
  color: var(--sv-teal) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-size: 0.88em !important;
}

/* ════════════════════════════════════════════════════════════
   ══ DETAILS / SUMMARY ══
   ════════════════════════════════════════════════════════════ */
#section-studio details summary {
  color: var(--sv-text2) !important;
}
#section-studio details summary:hover {
  color: var(--sv-text) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ RANGE SLIDERS ══
   ════════════════════════════════════════════════════════════ */
#section-studio input[type="range"] {
  accent-color: var(--sv-teal) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ TOGGLE SWITCH ══
   ════════════════════════════════════════════════════════════ */
#section-studio .toggle-switch input:checked + .toggle-slider {
  background: var(--sv-teal) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ BARRE DE PROGRESSION POLLING ══
   ════════════════════════════════════════════════════════════ */
#section-studio #videoPollingBar,
#section-studio [id$="PollingBar"] {
  background: linear-gradient(90deg, var(--sv-teal-d), var(--sv-teal)) !important;
}

/* ════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════
   ██  ZONES D'UPLOAD — IMAGES PLACEHOLDER + STYLE PREMIUM  ██
   ══════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════ */

/* ── Style générique toutes zones dashed dans le studio ── */
#section-studio [style*="border:2px dashed"],
#section-studio [style*="border: 2px dashed"],
#section-studio [style*="border:1.5px dashed"],
#section-studio [style*="border: 1.5px dashed"],
#section-studio [style*="border:1px dashed"],
#section-studio [style*="border: 1px dashed"] {
  background: var(--sv-upload-bg) !important;
  border-color: rgba(20,184,166,0.32) !important;
  border-radius: 12px !important;
  transition: all 0.22s ease !important;
}

#section-studio [style*="border:2px dashed"]:hover,
#section-studio [style*="border: 2px dashed"]:hover,
#section-studio [style*="border:1px dashed"]:hover {
  background: var(--sv-upload-hover) !important;
  border-color: var(--sv-teal) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.10), 0 4px 16px rgba(20,184,166,0.14) !important;
}

/* ════════════════════════════════════════════════════════════
   ██  LAB IMAGE — Zone upload avatar (image de référence)  ██
   Image placeholder : portrait cinématique
   ════════════════════════════════════════════════════════════ */

#lab_image #avatarUploadZone {
  border-color: rgba(20,184,166,0.40) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  min-height: 80px !important;
  /* Image placeholder portrait */
  background:
    linear-gradient(
      to bottom,
      rgba(46,57,68,0.55) 0%,
      rgba(46,57,68,0.75) 60%,
      rgba(46,57,68,0.92) 100%
    ),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
}

#lab_image #avatarUploadZone:hover {
  border-color: var(--sv-teal) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.12), 0 6px 20px rgba(20,184,166,0.18) !important;
  background:
    linear-gradient(
      to bottom,
      rgba(46,57,68,0.40) 0%,
      rgba(46,57,68,0.65) 60%,
      rgba(46,57,68,0.88) 100%
    ),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
}

/* Icône upload avatar → teal */
#lab_image #avatarUploadPlaceholder i.fa {
  color: var(--sv-teal) !important;
  filter: drop-shadow(0 0 6px rgba(20,184,166,0.5)) !important;
}

#lab_image #avatarImgEl {
  border-color: var(--sv-teal) !important;
}

/* ── Zone galerie Lab Image — placeholder grille avec images exemple ── */
#lab_image #studioImageGallery {
  position: relative !important;
}

/* 3 premières cellules vides de la galerie → images placeholder */
#lab_image #studioImageGallery > div:nth-child(1):not(:has(img[src]:not([src=""]))) {
  background:
    linear-gradient(rgba(46,57,68,0.30), rgba(46,57,68,0.30)),
    url('../images/placeholder-watch.jpg') center/cover no-repeat !important;
  border-radius: 12px !important;
  border-color: var(--sv-border) !important;
}

#lab_image #studioImageGallery > div:nth-child(2):not(:has(img[src]:not([src=""]))) {
  background:
    linear-gradient(rgba(46,57,68,0.25), rgba(46,57,68,0.25)),
    url('../images/placeholder-city.jpg') center/cover no-repeat !important;
  border-radius: 12px !important;
  border-color: var(--sv-border) !important;
}

#lab_image #studioImageGallery > div:nth-child(3):not(:has(img[src]:not([src=""]))) {
  background:
    linear-gradient(rgba(46,57,68,0.20), rgba(46,57,68,0.20)),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
  border-radius: 12px !important;
  border-color: var(--sv-border) !important;
}

/* ════════════════════════════════════════════════════════════
   ██  LAB VIDÉO — panneaux et zones upload                 ██
   ════════════════════════════════════════════════════════════ */

/* Panneau Référence images (fond bleu → panel ardoise) */
#lab_video #videoRefImagesPanel {
  background: rgba(20,184,166,0.07) !important;
  border-color: rgba(20,184,166,0.22) !important;
  border-radius: 14px !important;
}

/* Zone upload images référence — placeholder ville futuriste */
#lab_video #videoRefImagesEmpty > div {
  background:
    linear-gradient(
      to bottom,
      rgba(46,57,68,0.40) 0%,
      rgba(46,57,68,0.80) 70%,
      rgba(46,57,68,0.95) 100%
    ),
    url('../images/placeholder-video.jpg') center/cover no-repeat !important;
  border-color: rgba(20,184,166,0.35) !important;
  border-radius: 12px !important;
  min-height: 110px !important;
}

#lab_video #videoRefImagesEmpty > div:hover {
  background:
    linear-gradient(
      to bottom,
      rgba(46,57,68,0.28) 0%,
      rgba(46,57,68,0.68) 70%,
      rgba(46,57,68,0.90) 100%
    ),
    url('../images/placeholder-video.jpg') center/cover no-repeat !important;
  border-color: var(--sv-teal) !important;
}

/* Info référence */
#lab_video #videoRefImagesInfo {
  background: rgba(20,184,166,0.06) !important;
  border-left-color: rgba(20,184,166,0.45) !important;
  border-radius: 6px !important;
}

/* Panneau Veo 3 */
#lab_video #veo3Panel {
  background: rgba(20,184,166,0.07) !important;
  border-color: rgba(20,184,166,0.22) !important;
  border-radius: 14px !important;
}

/* Zones Veo start (72x72) → placeholder */
#lab_video #veo3Panel [style*="border:2px dashed rgba(16,185,129,0.35)"] {
  background: rgba(20,184,166,0.08) !important;
  border-color: rgba(20,184,166,0.38) !important;
}

/* Zones Veo end (72x72) → violet */
#lab_video #veo3Panel [style*="border:2px dashed rgba(239,68,68,0.35)"] {
  background: rgba(124,58,237,0.08) !important;
  border-color: rgba(124,58,237,0.38) !important;
}

/* Panneau Seedance */
#lab_video #seedancePanel {
  background: rgba(231,201,141,0.06) !important;
  border-color: rgba(231,201,141,0.20) !important;
  border-radius: 14px !important;
}

/* Zone upload Seedance images */
#lab_video #seedancePanel [style*="border:2px dashed rgba(251,191,36"] {
  background:
    linear-gradient(rgba(46,57,68,0.55), rgba(46,57,68,0.55)),
    url('../images/placeholder-city.jpg') center/cover no-repeat !important;
  border-color: rgba(231,201,141,0.35) !important;
  min-height: 90px !important;
}

/* Panneau Kling 3 */
#lab_video #kling3Panel {
  background: rgba(20,184,166,0.06) !important;
  border-color: rgba(20,184,166,0.18) !important;
  border-radius: 14px !important;
}

/* Panneau Motion Control */
#lab_video #motionControlPanel {
  background: rgba(124,58,237,0.06) !important;
  border-color: rgba(124,58,237,0.20) !important;
  border-radius: 14px !important;
}

/* Zone personnage Motion Control */
#lab_video #motionCharImageZone {
  background:
    linear-gradient(rgba(46,57,68,0.52), rgba(46,57,68,0.52)),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
  border-color: rgba(20,184,166,0.38) !important;
  min-height: 90px !important;
}

#lab_video #motionCharImageZone:hover {
  background:
    linear-gradient(rgba(46,57,68,0.38), rgba(46,57,68,0.38)),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
  border-color: var(--sv-teal) !important;
}

/* Zone vidéo Motion reference */
#lab_video [onclick*="motionVideoInput"] {
  background:
    linear-gradient(rgba(46,57,68,0.58), rgba(46,57,68,0.58)),
    url('../images/placeholder-video.jpg') center/cover no-repeat !important;
  border-color: rgba(20,184,166,0.32) !important;
  min-height: 80px !important;
}

/* Bouton Générer Vidéo */
#lab_video #studioVideoGenerateBtn {
  background: linear-gradient(135deg, #0F6E73 0%, #6C3D86 100%) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(15,110,115,0.30) !important;
}

/* Résultat vidéo */
#lab_video #studioVideoResult video {
  border-color: rgba(20,184,166,0.25) !important;
  border-radius: 12px !important;
}

/* ════════════════════════════════════════════════════════════
   ██  LAB VOIX & LIPSYNC                                   ██
   ════════════════════════════════════════════════════════════ */

#lab_voice #voiceModeBar {
  background: rgba(0,0,0,0.22) !important;
  border-radius: 12px !important;
}

#lab_voice #sttPanel {
  background: rgba(124,58,237,0.07) !important;
  border-color: rgba(124,58,237,0.22) !important;
  border-radius: 12px !important;
}

#lab_voice #ttsV2Panel {
  background: rgba(20,184,166,0.06) !important;
  border-color: rgba(20,184,166,0.18) !important;
  border-radius: 12px !important;
}

#lab_voice #sfxPanel {
  background: rgba(231,201,141,0.06) !important;
  border-color: rgba(231,201,141,0.20) !important;
  border-radius: 12px !important;
}

#lab_voice #elv3Panel {
  background: rgba(124,58,237,0.06) !important;
  border-color: rgba(124,58,237,0.22) !important;
  border-radius: 12px !important;
}

#lab_voice #lipsyncZone {
  background: rgba(20,184,166,0.05) !important;
  border-color: rgba(20,184,166,0.18) !important;
  border-radius: 12px !important;
}

/* Zone upload lipsync (photo/vidéo source) — placeholder portrait */
#lab_voice #lipsyncZone div[onclick*="lipsyncFileInput"] {
  background:
    linear-gradient(rgba(46,57,68,0.52), rgba(46,57,68,0.52)),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
  border-color: rgba(20,184,166,0.30) !important;
  min-height: 80px !important;
}

#lab_voice #lipsyncZone div[onclick*="lipsyncFileInput"]:hover {
  background:
    linear-gradient(rgba(46,57,68,0.36), rgba(46,57,68,0.36)),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
  border-color: var(--sv-teal) !important;
}

/* Zone upload STT (audio) */
#lab_voice #sttPanel div[onclick*="sttAudioInput"] {
  background: rgba(124,58,237,0.07) !important;
  border-color: rgba(124,58,237,0.32) !important;
}

/* Lipsync IA — image source → portrait */
#lab_voice #voicePanel_lipsync div[onclick*="lipsyncIAImage"] {
  background:
    linear-gradient(rgba(46,57,68,0.50), rgba(46,57,68,0.50)),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
  border-color: rgba(20,184,166,0.32) !important;
  min-height: 90px !important;
}

/* Lipsync IA — audio source */
#lab_voice #voicePanel_lipsync div[onclick*="lipsyncIAAudio"] {
  background: rgba(20,184,166,0.07) !important;
  border-color: rgba(20,184,166,0.32) !important;
}

/* Infinity Talk — image personnage */
#lab_voice #voicePanel_infinity div[onclick*="infinityImageInput"] {
  background:
    linear-gradient(rgba(46,57,68,0.48), rgba(46,57,68,0.48)),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
  border-color: rgba(20,184,166,0.32) !important;
  min-height: 90px !important;
}

/* Infinity Talk — audio voix */
#lab_voice #voicePanel_infinity div[onclick*="infinityAudioInput"] {
  background: rgba(231,201,141,0.07) !important;
  border-color: rgba(231,201,141,0.30) !important;
}

/* Infinity Talk — header */
#lab_voice #voicePanel_infinity > div:first-child {
  background: rgba(20,184,166,0.07) !important;
  border-color: rgba(20,184,166,0.20) !important;
  border-radius: 12px !important;
}

/* Boutons générer voix */
#lab_voice #studioVoiceGenerateBtn {
  background: linear-gradient(135deg, #0F6E73 0%, #6C3D86 100%) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(15,110,115,0.28) !important;
}

#lab_voice #lipsyncIAGenerateBtn {
  background: linear-gradient(135deg, #0F6E73 0%, #6C3D86 100%) !important;
  border: none !important;
}

#lab_voice #studioInfinityGenerateBtn {
  background: linear-gradient(135deg, #0F6E73 0%, #6C3D86 100%) !important;
  border: none !important;
}

/* ════════════════════════════════════════════════════════════
   ██  STUDIO FAMILY                                        ██
   ════════════════════════════════════════════════════════════ */

/* Conteneur principal ADN */
#lab_family [style*="background:rgba(255,255,255,0.03)"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(20,184,166,0.18) !important;
  border-radius: 12px !important;
}

/* Zone upload avatar principal — portrait placeholder */
#lab_family div[onclick*="familyMainAvatar"] {
  background:
    linear-gradient(
      to bottom,
      rgba(46,57,68,0.42) 0%,
      rgba(46,57,68,0.78) 65%,
      rgba(46,57,68,0.94) 100%
    ),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
  border-color: rgba(20,184,166,0.38) !important;
  min-height: 90px !important;
}

#lab_family div[onclick*="familyMainAvatar"]:hover {
  background:
    linear-gradient(
      to bottom,
      rgba(46,57,68,0.28) 0%,
      rgba(46,57,68,0.64) 65%,
      rgba(46,57,68,0.88) 100%
    ),
    url('../images/placeholder-portrait.jpg') center/cover no-repeat !important;
  border-color: var(--sv-teal) !important;
}

/* Liste membres famille */
#lab_family [style*="background:rgba(255,255,255,0.02)"] {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(20,184,166,0.12) !important;
  border-radius: 10px !important;
}

/* Séparateurs membres famille */
#lab_family [style*="border-bottom:1px solid rgba(255,255,255,0.05)"] {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Zone décor de fond */
#lab_family [onclick*="familyDecorInput"] {
  background:
    linear-gradient(rgba(46,57,68,0.58), rgba(46,57,68,0.58)),
    url('../images/placeholder-city.jpg') center/cover no-repeat !important;
  border-color: rgba(20,184,166,0.24) !important;
  min-height: 55px !important;
}

#lab_family [onclick*="familyDecorInput"]:hover {
  background:
    linear-gradient(rgba(46,57,68,0.42), rgba(46,57,68,0.42)),
    url('../images/placeholder-city.jpg') center/cover no-repeat !important;
  border-color: var(--sv-teal) !important;
}

/* Zone upload conjoint(e) */
#lab_family #familyPartnerUploadZone div {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(20,184,166,0.22) !important;
}

/* Boutons compteurs */
#lab_family button[onclick*="adjustFamilyCount"] {
  background: rgba(20,184,166,0.10) !important;
  border: 1px solid rgba(20,184,166,0.25) !important;
  color: var(--sv-text) !important;
  border-radius: 6px !important;
}

/* Bouton générer famille */
#lab_family #studioFamilyGenerateBtn {
  background: linear-gradient(135deg, #0F6E73 0%, #6C3D86 100%) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(15,110,115,0.28) !important;
}

/* Résultat image famille */
#lab_family #studioFamilyResultImg {
  border-color: rgba(20,184,166,0.25) !important;
  border-radius: 12px !important;
}

/* ════════════════════════════════════════════════════════════
   ██  LAB SUNO IA                                          ██
   ════════════════════════════════════════════════════════════ */

/* Header Suno */
#lab_suno > div > div:first-child > div:first-child {
  background: linear-gradient(135deg, rgba(20,184,166,0.09), rgba(124,58,237,0.07)) !important;
  border-color: rgba(20,184,166,0.22) !important;
  border-radius: 14px !important;
}

/* Barre onglets Suno */
#lab_suno [style*="background:rgba(0,0,0,0.2)"] {
  background: rgba(0,0,0,0.28) !important;
  border-radius: 12px !important;
}

/* Panneaux modes Suno */
#lab_suno #sunoCoverPanel > div:first-child {
  background: rgba(20,184,166,0.07) !important;
  border-color: rgba(20,184,166,0.20) !important;
  border-radius: 12px !important;
}

#lab_suno #sunoVideoPanel > div:first-child {
  background: rgba(231,201,141,0.07) !important;
  border-color: rgba(231,201,141,0.22) !important;
  border-radius: 12px !important;
}

#lab_suno #sunoGeneratePanel > div:first-child {
  background: rgba(124,58,237,0.07) !important;
  border-color: rgba(124,58,237,0.22) !important;
  border-radius: 12px !important;
}

#lab_suno #sunoExtendPanel > div:first-child {
  background: rgba(231,201,141,0.07) !important;
  border-color: rgba(231,201,141,0.22) !important;
  border-radius: 12px !important;
}

/* Branding artiste zone */
#lab_suno [style*="background:rgba(200,169,107,0.04)"] {
  background: rgba(231,201,141,0.06) !important;
  border-color: rgba(231,201,141,0.16) !important;
  border-radius: 10px !important;
}

/* Suno — résultat audio */
#lab_suno #sunoResultZone {
  background: rgba(20,184,166,0.06) !important;
  border-color: rgba(20,184,166,0.20) !important;
  border-radius: 12px !important;
}

/* Suno — hint cover */
#lab_suno #sunoCoverHint {
  background: rgba(20,184,166,0.07) !important;
  border-color: rgba(20,184,166,0.22) !important;
  border-radius: 10px !important;
}

/* Suno — audioId row */
#lab_suno #sunoAudioIdRow {
  background: rgba(124,58,237,0.07) !important;
  border-color: rgba(124,58,237,0.22) !important;
  border-radius: 10px !important;
}

/* Suno résultat vidéo */
#lab_suno #sunoVideoResultZone {
  background: rgba(231,201,141,0.06) !important;
  border-color: rgba(231,201,141,0.18) !important;
  border-radius: 12px !important;
}

/* Colonne droite Suno */
#lab_suno [style*="background:rgba(16,185,129,0.06)"] {
  background: rgba(20,184,166,0.07) !important;
  border-color: rgba(20,184,166,0.20) !important;
  border-radius: 14px !important;
}

/* Cas d'usage */
#lab_suno [style*="background:rgba(255,255,255,0.02)"] {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--sv-border) !important;
  border-radius: 12px !important;
}

/* Bouton générer Suno */
#lab_suno #studioSunoGenerateBtn {
  background: linear-gradient(135deg, #0F6E73 0%, #6C3D86 100%) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(15,110,115,0.30) !important;
}

/* Onglets Suno actif */
#lab_suno [id^="sunoTab_"][style*="background:rgba(16,185,129"] {
  background: linear-gradient(135deg, rgba(20,184,166,0.22), rgba(108,61,134,0.18)) !important;
  color: var(--sv-teal) !important;
}

/* Inputs code référence Suno */
#lab_suno #sunoSourceTaskId,
#lab_suno #sunoVideoTaskId,
#lab_suno #sunoVideoAudioId,
#lab_suno #sunoExtendAudioId {
  background: rgba(0,0,0,0.22) !important;
  border-color: rgba(20,184,166,0.25) !important;
}

/* Select version Suno */
#lab_suno #sunoMusicModel {
  background: rgba(20,184,166,0.10) !important;
  border-color: rgba(20,184,166,0.30) !important;
  color: var(--sv-teal) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ GLASSMORPHISM — colonne sticky droite ══
   ════════════════════════════════════════════════════════════ */
#section-studio [style*="position:sticky"],
#section-studio [style*="position: sticky"] {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ════════════════════════════════════════════════════════════
   ══ SECTION CARTE & CARDS GÉNÉRIQUES ══
   ════════════════════════════════════════════════════════════ */
#section-studio .section-card {
  background: transparent !important;
}

/* ════════════════════════════════════════════════════════════
   ══ TEXTE SECONDAIRE GÉNÉRIQUE ══
   (évite de trop colorer les spans avec couleurs spéciales)
   ════════════════════════════════════════════════════════════ */
#section-studio p {
  color: var(--sv-text2) !important;
}