:root {
  --bg:     #0b0b10;
  --c2:     #bd6baa;
  --c3:     #f4d6ff;
  --ok:     #38d996;
  --warn:   #ffd35c;
  --danger: #ff4d6d;
  --ink:    #eef0ff;
  --muted:  #b7bce6;
}

html, body {
  margin: 0;
  width: 1920px; height: 1080px;
  overflow: hidden;
  background: var(--bg);
  font-family: system-ui, -apple-system, Arial, sans-serif;
}

.root { position: absolute; inset: 0; display: flex; flex-direction: column; }

.bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 900px 600px at 30% 40%, rgba(189,107,170,.12) 0%, transparent 70%),
    radial-gradient(ellipse 700px 500px at 75% 70%, rgba(244,214,255,.07) 0%, transparent 70%),
    var(--bg);
}

.hidden { display: none !important; }

/* Stage centré */
.stage {
  position: relative; flex: 1; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}

/* Vue principale — toujours visible, même en idle */
.mainView {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}

/* Label */
.timerLabel {
  font-size: 38px; font-weight: 1000;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); text-align: center;
}

/* Affichage numérique */
.timerDisplay {
  font-size: 240px; font-weight: 1000;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
  line-height: 1; text-align: center; color: var(--ink);
  text-shadow: 0 0 80px rgba(244,214,255,.18), 0 4px 32px rgba(0,0,0,.48);
  transition: color .3s, text-shadow .3s;
}

/* Statuts */
.timerDisplay.running {
  color: var(--ok);
  text-shadow: 0 0 80px rgba(56,217,150,.22), 0 4px 32px rgba(0,0,0,.48);
}
.timerDisplay.paused { color: var(--warn); }
.timerDisplay.idle   { color: rgba(238,240,255,.35); }
.timerDisplay.finished { color: var(--ink); }
.timerDisplay.overrun {
  color: var(--danger);
  text-shadow: 0 0 80px rgba(255,77,109,.22), 0 4px 32px rgba(0,0,0,.48);
  animation: flashEnd 1s ease-in-out infinite alternate;
}

@keyframes flashEnd { 0% { opacity: 1; } 100% { opacity: .7; } }

/* Badge statut */
.timerStatus {
  font-size: 22px; font-weight: 1000; letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 28px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06);
  color: var(--muted); transition: all .2s;
}
.timerStatus.running  { border-color: rgba(56,217,150,.35);  background: rgba(56,217,150,.10);  color: var(--ok); }
.timerStatus.paused   { border-color: rgba(255,211,92,.35);  background: rgba(255,211,92,.10);  color: var(--warn); }
.timerStatus.finished { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: var(--ink); }
.timerStatus.overrun  { border-color: rgba(255,77,109,.35);  background: rgba(255,77,109,.10);  color: var(--danger); }

/* Bloc dépassement (conférence / playlist) */
.overrunBlock {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 36px;
  border-radius: 22px;
  background: rgba(255,77,109,.10);
  border: 2px solid rgba(255,77,109,.30);
}
.overrunText {
  font-size: 26px; font-weight: 1000; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,77,109,.85);
}
.overrunTime {
  font-size: 80px; font-weight: 1000;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  color: var(--danger); line-height: 1;
  animation: flashEnd 1s ease-in-out infinite alternate;
}

/* Badge retard total playlist — coin bas droite */
.delayBadge {
  position: absolute;
  right: 60px; bottom: 40px;
  font-size: 22px; font-weight: 1000; letter-spacing: .5px;
  color: var(--danger);
  padding: 10px 22px; border-radius: 14px;
  background: rgba(255,77,109,.10); border: 1px solid rgba(255,77,109,.28);
}
.delayBadge span { font-variant-numeric: tabular-nums; }

/* Barre bas */
.bottomBar {
  position: relative; z-index: 1; height: 6px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(189,107,170,.40) 20%,
    rgba(244,214,255,.55) 50%, rgba(189,107,170,.40) 80%, transparent 100%);
  display: flex; align-items: center; justify-content: center;
}
.bottomDot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--c3); box-shadow: 0 0 0 4px rgba(244,214,255,.15);
  margin-bottom: -4px;
}