@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════
   REEL MANAGER — Design System 2026
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
/* Palette mesuree au contraste.
   L'ancien --muted (#4a4872) ne ressortait qu'a 2,2:1 sur une carte, tres loin
   des 4,5:1 necessaires pour du texte courant : legendes, compteurs et
   libelles secondaires se devinaient plus qu'ils ne se lisaient. Les surfaces
   et les textes secondaires ont ete remontes, chaque valeur verifiee :

     --muted  4,7:1    --text2  7,0:1    --text  14,9:1    accents  4,6 a 10,1:1

   Les cartes se detachent aussi mieux du fond (1,20:1 contre 1,09:1). */
:root {
  --bg:           #05041a;
  --bg2:          #0a0828;
  --panel:        rgba(21, 19, 46, 0.94);
  --card:         rgba(28, 26, 58, 0.94);
  --card2:        rgba(38, 35, 76, 0.72);
  --border:       rgba(255, 255, 255, 0.10);
  --border2:      rgba(255, 255, 255, 0.17);
  --border-glow:  rgba(var(--vio-rgb-8b5cf6), 0.4);

  --text:         #f0efff;
  --text2:        #a5a3cc;
  --muted:        #8582b0;

  --purple:       var(--vio-8b5cf6);
  --purple-l:     var(--vio-a78bfa);
  --purple-d:     var(--vio-7c3aed);
  --pink:         #ec4899;
  --blue:         #3b82f6;
  --cyan:         #22d3ee;
  --green:        #10b981;
  --green-l:      #34d399;
  --red:          #f43f5e;
  --red-l:        #fb7185;
  --yellow:       #f59e0b;
  --yellow-l:     #fbbf24;

  --grad-main:    linear-gradient(135deg, var(--vio-8b5cf6) 0%, #ec4899 100%);
  --grad-blue:    linear-gradient(135deg, #3b82f6 0%, var(--vio-8b5cf6) 100%);
  --grad-warm:    linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);

  --radius-xl:    20px;
  --radius:       14px;
  --radius-sm:    10px;
  --radius-xs:    7px;

  --shadow:       0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow:  0 0 40px rgba(var(--vio-rgb-8b5cf6), 0.2);
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255,255,255,.04) inset;
}

/* Un emoji dans un titre en degrade (background-clip:text) herite du
   text-fill transparent et se fait peindre par le degrade : silhouette
   blanche au lieu du glyphe colore. Poser cette classe sur l'emoji rend
   son remplissage — un glyphe couleur ignore la couleur de remplissage
   et reprend ses propres couleurs. */
.emoji-plein { -webkit-text-fill-color: initial; }

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

/* ── Base ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  /* Inter EN PREMIER : place derriere -apple-system/BlinkMacSystemFont, elle
     ne servait jamais — Chrome sous Windows traduit BlinkMacSystemFont en
     Segoe UI et s'arrete la. Le site entier rendait donc en Segoe, sauf les
     pages qui mettaient Inter en tete (connexion, 404) : deux polices selon
     la page. La queue emoji ne bouge pas. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient background blobs */
body::before {
  content: '';
  position: fixed;
  top: -30%;
  left: -20%;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle, rgba(var(--vio-rgb-8b5cf6),.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: drift 20s ease-in-out infinite alternate;
}
body::after {
  content: '';
  position: fixed;
  bottom: -20%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(236,72,153,.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: drift 25s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(3%, 4%) scale(1.05); }
}

/* ── Layout ────────────────────────────────────────────────── */
.layout {
  display: grid;
  /* 250 px partaient surtout en marge : les libelles les plus longs
     (« Comptes Instagram ») tiennent en 210, et ce qui est gagne va au
     contenu, qui en a plus besoin. */
  grid-template-columns: 210px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════ */
.sidebar {
  /* Dégradé horizontal : la sidebar part d'un ton légèrement plus profond à
     gauche et rejoint exactement le fond de page à son bord droit (écart
     mesuré 1,006:1, autrement dit invisible). La couture nette entre les deux
     zones disparaît. Le voile violet en haut prolonge la lueur ambiante du
     body au lieu de s'arrêter au bord de la colonne. */
  background:
    linear-gradient(180deg, rgba(var(--vio-rgb-8b5cf6), .07) 0%, transparent 40%),
    linear-gradient(90deg, rgba(12, 10, 40, .96) 0%, rgba(6, 5, 27, .86) 100%);
  /* Bordure très atténuée : var(--border) est passée à 10% d'opacité, ce qui
     redessinait justement le trait qu'on cherche à effacer. */
  border-right: 1px solid rgba(255, 255, 255, .045);
  padding: 12px 9px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 10px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.8px;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sidebar-section-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  padding: 8px 10px 4px;
}
.sidebar-section-label--sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(var(--vio-rgb-c4b5fd),.32);
  padding: 8px 12px 4px;
  text-transform: uppercase;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  min-height: 30px;
  border-radius: var(--radius-sm);
  color: var(--text2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}
.nav-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--vio-rgb-8b5cf6),.08), transparent);
  opacity: 0;
  transition: opacity .18s;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-link:hover::after { opacity: 1; }

.nav-link.active {
  color: var(--purple-l);
  background: rgba(var(--vio-rgb-8b5cf6),.1);
}
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 3px;
  background: var(--grad-main);
  border-radius: 0 3px 3px 0;
}

/* Tout lien de nav qui s'ouvre dans un nouvel onglet → icône « lien externe » ↗
   à droite. On cible l'attribut plutôt qu'une liste d'adresses en dur : sinon
   chaque nouvelle page ouverte en onglet doit être ajoutée ici à la main, et on
   l'oublie (c'est arrivé pour Phone Farm). */
.nav-link[target="_blank"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23c4b5fd'%20stroke-opacity='0.6'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6'/%3E%3Cpolyline%20points='15%203%2021%203%2021%209'/%3E%3Cline%20x1='10'%20y1='14'%20x2='21'%20y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 11px;
  padding-right: 30px;
}
/* Le :hover de .nav-link utilise `background:` (raccourci) qui efface l'image → on la redéclare */
.nav-link[target="_blank"]:hover {
  background-color: rgba(255,255,255,.04);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23c4b5fd'%20stroke-opacity='0.85'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6'/%3E%3Cpolyline%20points='15%203%2021%203%2021%209'/%3E%3Cline%20x1='10'%20y1='14'%20x2='21'%20y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 11px;
}

/* ── Sidebar : visibilité par rôle (data-role posé par facture-sidebar.js) ────────
   Chatters : CSS masque les sections staff en ciblant les enfants DIRECTS du sidebar
   (les liens de [data-nav-chatter] ne sont PAS enfants directs → ils restent visibles)
   Staff    : CSS force tout visible pour écraser tout inline style='none' parasite    */

/* Chatters + Manager Chatters : masquer nav staff */
body[data-role="chatter"] .sidebar > .sidebar-section-label,
body[data-role="chatter"] .sidebar > .nav-link,
body[data-role="chatter"] .sidebar > #sidebar-admin-link,
body[data-role="manager_chatter"] .sidebar > .sidebar-section-label,
body[data-role="manager_chatter"] .sidebar > .nav-link,
body[data-role="manager_chatter"] .sidebar > #sidebar-admin-link {
  display: none !important;
}

/* Staff : forcer visibilité (override inline style='none' venant de tout contexte) */
body[data-role="lead"] .sidebar .sidebar-section-label,
body[data-role="associate"] .sidebar .sidebar-section-label,
body[data-role="manager"] .sidebar .sidebar-section-label {
  display: block !important;
}
body[data-role="lead"] .sidebar .nav-link:not(.sidebar-link-associate):not(.sidebar-link-chatter-only),
body[data-role="associate"] .sidebar .nav-link:not(.sidebar-link-associate):not(.sidebar-link-chatter-only),
body[data-role="manager"] .sidebar .nav-link:not(.sidebar-link-associate):not(.sidebar-link-chatter-only) {
  display: flex !important;
}

/* Mon espace : visible uniquement pour chatters et manager_chatters */
.sidebar-link-chatter-only { display: none; }
body[data-role="chatter"] .sidebar-link-chatter-only,
body[data-role="manager_chatter"] .sidebar-link-chatter-only { display: flex !important; }

/* Espace Chatter section — not a direct child so chatter CSS doesn't hide it */
.sidebar-chatter-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Manager VA et VA ne voient pas l'espace chatter */
body[data-role="manager"] .sidebar .sidebar-chatter-wrap,
body[data-role="va"] .sidebar .sidebar-chatter-wrap {
  display: none !important;
}

/* Espace VA section */
.sidebar-va-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Chatters, Manager Chatters et VAs ne voient pas l'espace VA */
body[data-role="chatter"] .sidebar .sidebar-va-wrap,
body[data-role="manager_chatter"] .sidebar .sidebar-va-wrap,
body[data-role="va"] .sidebar .sidebar-va-wrap {
  display: none !important;
}

.sidebar-spacer  { flex: 1; min-height: 8px; }
.sidebar-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.nav-user { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════════════════════════════ */
.main {
  padding: 40px 44px;
  overflow-y: auto;
  position: relative;
}

.page-header { margin-bottom: 36px; }
.page-title  { font-size: 26px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.2; }
.page-sub    { color: var(--text2); margin-top: 6px; font-size: 14px; line-height: 1.5; }

/* Section */
.section { margin-bottom: 30px; }
.section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text2);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title .count {
  background: rgba(var(--vio-rgb-8b5cf6),.15);
  color: var(--purple-l);
  font-size: 11px; padding: 1px 8px;
  border-radius: 99px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}

/* ══════════════════════════════════════════════════════════════
   CARDS — Model cards
   ══════════════════════════════════════════════════════════════ */
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}

.model-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), border-color 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
}
.model-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(var(--vio-rgb-8b5cf6),.5);
  box-shadow: var(--shadow-card), 0 20px 60px rgba(var(--vio-rgb-8b5cf6),.2);
}

.model-card-image {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 90px;
  font-weight: 900;
  color: rgba(255,255,255,.9);
  overflow: hidden;
  position: relative;
}
.model-card-image::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(14,12,35,1), transparent);
}
.model-card-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.model-card-initial {
  position: relative; z-index: 1;
  text-shadow: 0 8px 30px rgba(0,0,0,.6);
  user-select: none;
  letter-spacing: -4px;
}

.model-card-body {
  padding: 20px 22px 22px;
}
.model-card-name {
  font-size: 18px; font-weight: 700;
  margin-bottom: 14px; letter-spacing: -0.3px;
}
.model-card-stats { display: flex; gap: 20px; }
.stat {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text2);
}
.stat strong { color: var(--text); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   DROPZONE
   ══════════════════════════════════════════════════════════════ */
.dropzone {
  border: 2px dashed rgba(var(--vio-rgb-8b5cf6),.3);
  border-radius: var(--radius);
  padding: 50px 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  background: rgba(var(--vio-rgb-8b5cf6),.03);
  position: relative;
  overflow: hidden;
}
.dropzone::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(var(--vio-rgb-8b5cf6),.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .25s;
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--purple);
  background: rgba(var(--vio-rgb-8b5cf6),.07);
  box-shadow: 0 0 40px rgba(var(--vio-rgb-8b5cf6),.15), inset 0 0 40px rgba(var(--vio-rgb-8b5cf6),.04);
}
.dropzone:hover::before, .dropzone.dragover::before { opacity: 1; }
.dropzone input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.dropzone-icon {
  font-size: 48px; margin-bottom: 14px;
  filter: drop-shadow(0 0 16px rgba(var(--vio-rgb-8b5cf6),.5));
  display: block; animation: float 3s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.dropzone-title { font-size: 17px; font-weight: 700; margin-bottom: 7px; }
.dropzone-sub   { color: var(--text2); font-size: 13px; }

/* ══════════════════════════════════════════════════════════════
   FILE LIST
   ══════════════════════════════════════════════════════════════ */
.file-list { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }

.file-item {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  transition: all .2s;
}
.file-item:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--border2);
}
.file-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  border: none; cursor: pointer;
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.1px;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background .15s;
}
.btn:hover::after { background: rgba(255,255,255,.06); }
.btn:active::after { background: rgba(0,0,0,.1); }
.btn:disabled { opacity: .3; cursor: not-allowed; }
.btn:disabled::after { display: none; }

.btn-primary {
  background: var(--grad-main);
  color: #fff;
  box-shadow: 0 4px 20px rgba(var(--vio-rgb-8b5cf6),.35), 0 1px 0 rgba(255,255,255,.1) inset;
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 30px rgba(var(--vio-rgb-8b5cf6),.5), 0 1px 0 rgba(255,255,255,.1) inset;
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--border2);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,.09);
  border-color: rgba(var(--vio-rgb-8b5cf6),.4);
}

.btn-danger {
  background: rgba(244,63,94,.12);
  color: var(--red-l);
  border: 1px solid rgba(244,63,94,.25);
}
.btn-danger:hover:not(:disabled) {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 4px 20px rgba(244,63,94,.35);
}

.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-xs { padding: 4px 11px; font-size: 11px; }

.btn-icon {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 15px;
  padding: 6px 8px; border-radius: var(--radius-xs);
  transition: all .15s; display: inline-flex; align-items: center;
}
.btn-icon:hover { color: var(--red-l); background: rgba(244,63,94,.1); }

/* ══════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
}
.badge-success { background: rgba(16,185,129,.1); color: var(--green-l); border: 1px solid rgba(16,185,129,.2); }
.badge-error   { background: rgba(244,63,94,.1);  color: var(--red-l);   border: 1px solid rgba(244,63,94,.2); }
.badge-warn    { background: rgba(245,158,11,.1); color: var(--yellow-l);border: 1px solid rgba(245,158,11,.2); }
.badge-accent  { background: rgba(var(--vio-rgb-8b5cf6),.1); color: var(--purple-l);border: 1px solid rgba(var(--vio-rgb-8b5cf6),.2); }
.badge-muted   { background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════
   STATUS BAR
   ══════════════════════════════════════════════════════════════ */
.status-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text2);
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-dot.idle    { background: var(--muted); }
.status-dot.running { background: var(--purple-l); animation: pulse-ring 1.5s ease infinite; }
.status-dot.done    { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.error   { background: var(--red); box-shadow: 0 0 8px var(--red); }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(var(--vio-rgb-a78bfa),.7); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--vio-rgb-a78bfa),.0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--vio-rgb-a78bfa),.0); }
}

/* ══════════════════════════════════════════════════════════════
   TWO COLUMNS
   ══════════════════════════════════════════════════════════════ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }

/* ══════════════════════════════════════════════════════════════
   LOG TERMINAL
   ══════════════════════════════════════════════════════════════ */
.log-wrap {
  background: rgba(2, 2, 10, 0.95);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.log-toolbar {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 8, 28, 0.95);
  display: flex; align-items: center; gap: 10px;
}
.log-dots { display: flex; gap: 6px; }
.log-dot  { width: 11px; height: 11px; border-radius: 50%; }
.log-dot:nth-child(1) { background: #ff5f57; box-shadow: 0 0 6px rgba(255,95,87,.5); }
.log-dot:nth-child(2) { background: #ffbd2e; box-shadow: 0 0 6px rgba(255,189,46,.5); }
.log-dot:nth-child(3) { background: #28ca41; box-shadow: 0 0 6px rgba(40,202,65,.5); }

.log-container {
  padding: 16px 18px;
  font-family: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12.5px;
  height: 380px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
  background: linear-gradient(to bottom, rgba(2,2,10,.98), rgba(4,3,15,.98));
}
.log-entry { display: flex; gap: 12px; line-height: 1.7; }
.log-time  { color: #2a2a5a; flex-shrink: 0; font-size: 11px; margin-top: 2px; }
.log-model { flex-shrink: 0; min-width: 48px; font-weight: 700; font-size: 11px; margin-top: 2px; }
.log-msg   { color: #b0b0d8; white-space: pre-wrap; word-break: break-all; }

/* ══════════════════════════════════════════════════════════════
   TOOLBAR
   ══════════════════════════════════════════════════════════════ */
.toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.toolbar-spacer { flex: 1; }

/* SELECT — global dark style for all select elements */
select {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  color: var(--text);
  font-size: 13px; font-family: inherit;
  outline: none; cursor: pointer;
  transition: border-color .15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b9a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(var(--vio-rgb-8b5cf6),.12); }
select:hover { border-color: rgba(var(--vio-rgb-8b5cf6),.4); }
select option {
  background: #1e1e2e;
  color: var(--text);
  font-size: 13px;
}
select option:checked { background: #2d1f5e; color: var(--vio-c4b5fd); }
select option:disabled { color: var(--muted); }

.select {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  color: var(--text);
  font-size: 13px; font-family: inherit;
  outline: none; cursor: pointer;
  transition: border-color .15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b9a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(var(--vio-rgb-8b5cf6),.12); }

/* EMPTY STATE */
.empty-state { text-align: center; padding: 36px; color: var(--muted); font-size: 14px; }
.empty-icon  { font-size: 32px; margin-bottom: 10px; opacity: .4; display: block; }

/* PROGRESS BAR */
.progress-bar { height: 5px; background: rgba(255,255,255,.05); border-radius: 3px; overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 3px;
  background: var(--grad-main);
  transition: width .3s;
  box-shadow: 0 0 12px rgba(var(--vio-rgb-8b5cf6),.5);
}

/* BACK LINK */
.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); text-decoration: none;
  font-size: 13px; margin-bottom: 24px;
  font-weight: 500; transition: color .15s;
}
.back-link:hover { color: var(--text); }

/* GLOW DIVIDER */
.glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--vio-rgb-8b5cf6),.4), transparent);
  margin: 32px 0;
}

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════════ */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 100% 70% at 20% 20%, rgba(var(--vio-rgb-8b5cf6),.2) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(236,72,153,.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(59,130,246,.08) 0%, transparent 60%),
    var(--bg);
  position: relative;
}
.login-body::before {
  content: ''; position: fixed;
  top: 10%; left: 10%; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(var(--vio-rgb-8b5cf6),.1), transparent 70%);
  border-radius: 50%; animation: blob1 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.login-body::after {
  content: ''; position: fixed;
  bottom: 10%; right: 10%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(236,72,153,.08), transparent 70%);
  border-radius: 50%; animation: blob1 12s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes blob1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(5%,8%) scale(1.2); }
}

.login-box { width: 100%; max-width: 390px; padding: 20px; position: relative; z-index: 1; }

.login-logo { text-align: center; margin-bottom: 44px; }
.login-logo .logo-icon {
  font-size: 56px; display: block;
  filter: drop-shadow(0 0 24px rgba(var(--vio-rgb-8b5cf6),.6));
  animation: float 4s ease-in-out infinite;
}
.login-logo h1 {
  font-size: 30px; font-weight: 900;
  letter-spacing: -1.2px; margin-top: 14px;
  background: var(--grad-main);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-logo p { color: var(--muted); font-size: 14px; margin-top: 6px; }

.login-form {
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 36px;
  display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 40px 80px rgba(0,0,0,.8);
}

.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-size: 11px; color: var(--text2);
  font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
}
.form-group input {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--text); font-size: 15px;
  font-family: inherit; outline: none;
  transition: all .2s;
}
.form-group input::placeholder { color: var(--muted); }
.form-group input:focus {
  border-color: rgba(var(--vio-rgb-8b5cf6),.5);
  background: rgba(var(--vio-rgb-8b5cf6),.06);
  box-shadow: 0 0 0 3px rgba(var(--vio-rgb-8b5cf6),.12);
}

.error-msg {
  background: rgba(244,63,94,.08);
  border: 1px solid rgba(244,63,94,.2);
  color: var(--red-l); padding: 11px 15px;
  border-radius: var(--radius-xs); font-size: 13px; display: none;
}
.error-msg.show { display: block; }

.login-btn {
  background: linear-gradient(90deg, var(--vio-7c3aed), var(--vio-a855f7), #ec4899, var(--vio-a855f7), var(--vio-7c3aed));
  background-size: 300% 100%;
  color: #fff; border: none;
  border-radius: var(--radius-sm);
  padding: 14px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 24px rgba(var(--vio-rgb-8b5cf6),.4), 0 1px 0 rgba(255,255,255,.1) inset;
  letter-spacing: -0.2px;
  animation: btnShimmer 3s linear infinite;
  position: relative; overflow: hidden;
}
.login-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: btnGloss 2.5s ease-in-out infinite;
}
@keyframes btnShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}
@keyframes btnGloss {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(var(--vio-rgb-8b5cf6),.65), 0 1px 0 rgba(255,255,255,.15) inset;
}
.login-btn:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════
   CAPTION TABLE
   ══════════════════════════════════════════════════════════════ */
.cap-version {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color .2s, box-shadow .2s;
  backdrop-filter: blur(10px);
}
.cap-version:hover {
  border-color: rgba(var(--vio-rgb-8b5cf6),.25);
  box-shadow: var(--shadow-card), 0 0 30px rgba(var(--vio-rgb-8b5cf6),.06);
}

.cap-version-header {
  padding: 15px 22px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--border);
}
.cap-version-label-input {
  background: rgba(var(--vio-rgb-8b5cf6),.1);
  border: 1px solid rgba(var(--vio-rgb-8b5cf6),.2);
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  color: var(--purple-l);
  font-size: 13px; font-weight: 700; font-family: inherit;
  outline: none; width: 90px;
  transition: all .15s;
}
.cap-version-label-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--vio-rgb-8b5cf6),.12);
}

.cap-table-wrap { padding: 4px 4px 18px; overflow-x: auto; }

.cap-table { width: 100%; border-collapse: collapse; }
.cap-table th {
  text-align: left; padding: 13px 14px 11px;
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.cap-table tr + tr td { border-top: 1px solid rgba(255,255,255,.03); }
.cap-table tr:hover td { background: rgba(255,255,255,.02); }
.cap-table td { padding: 6px 8px; vertical-align: middle; }

.cap-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 8px 11px;
  color: var(--text); font-size: 13px; font-family: inherit;
  outline: none; width: 100%;
  transition: all .15s;
}
.cap-input:hover  { border-color: var(--border2); background: rgba(255,255,255,.04); }
.cap-input:focus  {
  border-color: var(--purple);
  background: rgba(var(--vio-rgb-8b5cf6),.06);
  box-shadow: 0 0 0 2px rgba(var(--vio-rgb-8b5cf6),.12);
}
.cap-input.end-null { color: var(--muted); font-style: italic; }
.cap-input::placeholder { color: var(--muted); font-style: italic; font-size: 12px; }
.cap-input:disabled { opacity: .5; cursor: not-allowed; }

/* Sticky save bar — transparent pour se fondre dans la page */
.sticky-save {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  padding: 14px 0 20px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 30px;
}

/* ══════════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 30px; right: 30px;
  background: rgba(14,12,40,.95);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 15px 22px;
  font-size: 14px; font-weight: 500;
  z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  transform: translateY(90px) scale(.95);
  opacity: 0;
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
  max-width: 330px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.05) inset;
}
.toast.show { transform: translateY(0) scale(1); opacity: 1; }
.toast.success { border-color: rgba(16,185,129,.35); color: var(--green-l); }
.toast.error   { border-color: rgba(244,63,94,.35);  color: var(--red-l); }

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.15); }

/* ══════════════════════════════════════════════════════════════
   MISC
   ══════════════════════════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; animation: spin .7s linear infinite; }

kbd {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 12px;
  font-family: inherit;
}

/* Card base */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
}

/* Cap row header (legacy compat) */
.cap-row-header {
  display: grid; grid-template-columns: 115px 115px 1fr auto;
  gap: 8px; margin-bottom: 6px; padding: 0 2px;
}
.cap-row-header span {
  font-size: 11px; color: var(--muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   ══════════════════════════════════════════════════════════════ */

/* ── Hamburger button ── */
#mob-hamburger {
  display: none;
  position: fixed; top: 14px; left: 14px; z-index: 1000;
  width: 42px; height: 42px;
  background: var(--card); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  box-shadow: var(--shadow); transition: background .15s;
}
#mob-hamburger:hover { background: rgba(var(--vio-rgb-8b5cf6),.12); }
#mob-hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform .25s, opacity .2s;
  pointer-events: none;
}
#mob-hamburger.mob-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mob-hamburger.mob-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#mob-hamburger.mob-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Overlay ── */
#mob-overlay {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
}
#mob-overlay.mob-show { display: block; }

/* ══════════════════════════════════════════════════════════════
   FORMULAIRES — dark theme universel
   Règle : tout élément natif (input, select, checkbox, date…)
   doit hériter du thème sombre du site. Ne jamais laisser
   le browser rendre un composant blanc / système.
   ══════════════════════════════════════════════════════════════ */

/* Date / time / datetime : force le picker système en dark */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: dark;
}

/* Icône calendrier native : tinte violet */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(.7) sepia(1) hue-rotate(200deg) saturate(3);
  cursor: pointer;
  opacity: .6;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Number : supprimer les flèches natives partout */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { display: none; }
input[type="number"] { -moz-appearance: textfield; }

/* Checkbox : reprise en main.
   `accent-color` seul laissait un carre blanc du systeme — anguleux et clair
   au milieu de champs sombres et arrondis. On la redessine : meme rayon, meme
   bordure, meme violet que le reste, et une coche en deux traits plutot qu'une
   image (nette a toute taille, rien a charger). */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; margin: 0; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .17); border-radius: 5px;
  background: rgba(255, 255, 255, .04); cursor: pointer; position: relative;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--vio-a78bfa); }
input[type="checkbox"]:checked { background: var(--vio-8b5cf6); border-color: var(--vio-8b5cf6); }
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 9px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(43deg);
}
input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--vio-rgb-8b5cf6), .28); }
input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }

/* Radio : la couleur d'accent suffit, une pastille ronde native reste lisible. */
input[type="radio"] {
  accent-color: var(--vio-7c6aff);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Select natif : dark */
select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  color-scheme: dark;
  outline: none;
}
select:focus {
  border-color: rgba(var(--vio-rgb-7c6aff),.5);
  box-shadow: 0 0 0 3px rgba(var(--vio-rgb-7c6aff),.12);
}
select option {
  background: #13131f;
  color: #e2e8f0;
}

/* ══════════════
   MOBILE ≤ 768px
   ══════════════ */
@media (max-width: 768px) {
  #mob-hamburger { display: flex; }

  /* Layout : 1 colonne, sidebar cachée */
  .layout { grid-template-columns: 1fr !important; }

  .sidebar {
    position: fixed !important;
    left: -270px; top: 0; bottom: 0; width: 260px;
    z-index: 950; transition: left .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 40px rgba(0,0,0,.7);
    overflow-y: auto;
    /* Fond opaque sur mobile — évite le flou backdrop */
    background: #080616 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .sidebar.mob-open { left: 0 !important; }

  /* Overlay uniquement à droite de la sidebar — la sidebar reste clicable */
  #mob-overlay.mob-show {
    display: block;
    left: 260px;
  }

  /* Main : padding top pour le bouton hamburger */
  .main { padding: 68px 16px 32px !important; }

  /* Titres */
  .page-title { font-size: 21px !important; }
  .page-sub   { font-size: 13px; }

  /* ── Dashboard ── */
  .dash-hero    { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dash-greeting { font-size: 22px !important; }
  .dash-stats   { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .models-grid  { grid-template-columns: 1fr !important; }

  /* Audience grid : empile verticalement */
  [style*="340px 1fr"] { grid-template-columns: 1fr !important; }

  /* ── Model page ── */
  .upload-row   { grid-template-columns: 1fr !important; }
  .folders-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .model-header { flex-wrap: wrap; gap: 10px; }
  .model-controls { flex-wrap: wrap; gap: 8px; }
  .status-bar   { flex-wrap: wrap; gap: 6px; font-size: 12px; }

  /* Sticky bottom bars */
  .sticky-save  { flex-wrap: wrap; padding: 12px 16px; gap: 8px; }

  /* ── Captions : scroll horizontal sur la table ── */
  .cap-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cap-table      { min-width: 500px; }
  .cap-version-header { flex-wrap: wrap; gap: 6px; }

  /* ── Logs ── */
  .log-container { height: calc(100vh - 200px) !important; min-height: 280px !important; }
  .toolbar       { flex-wrap: wrap; gap: 8px; }

  /* ── Geelark ── */
  .warmup-grid  { grid-template-columns: 1fr !important; }
  .stats-row    { grid-template-columns: repeat(2, 1fr) !important; }
  .gender-row   { flex-direction: column !important; }
  .phone-table  { display: block; overflow-x: auto; }

  /* ── Buttons ── */
  .btn    { padding: 9px 14px; font-size: 13px; }
  .btn-sm { padding: 6px 11px; font-size: 11.5px; }

  /* ── Modals ── */
  .modal-box { width: 94vw !important; padding: 24px 18px !important; }

  /* ── Toast ── */
  .toast { left: 12px !important; right: 12px !important; bottom: 16px !important; text-align: center; }
}

/* ═══════════════
   TRÈS PETIT ≤ 420px
   ═══════════════ */
@media (max-width: 420px) {
  .main { padding: 64px 12px 24px !important; }
  .dash-stats { grid-template-columns: 1fr 1fr !important; }
  .folders-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .page-title { font-size: 18px !important; }
  .btn { padding: 8px 12px; font-size: 12.5px; }
}

/* ═══════════════════
   TABLETTE 769–1024px
   ═══════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .layout { grid-template-columns: 220px 1fr !important; }
  .main   { padding: 32px 28px !important; }
  .folders-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .upload-row   { grid-template-columns: 1fr 1fr !important; }
  .models-grid  { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .dash-stats   { grid-template-columns: repeat(3, 1fr) !important; }
  .warmup-grid  { grid-template-columns: 1fr 1fr !important; }
}