:root{
  --bg:#0b1020;
  --panel:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --accent:#22d3ee;
  --primary:#60a5fa;
  --danger:#f87171;
  --success:#34d399;
  --ring:#3b82f6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:linear-gradient(180deg,#0b1020 0%, #0b1020 40%, #121735 100%);
  color:var(--text);
}

.app-header, .app-footer{
  padding:12px clamp(12px, 3vw, 24px);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(15,23,42,.8); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.app-footer{border-top:1px solid rgba(255,255,255,.06); border-bottom:none; justify-content:center; color:var(--muted)}
h1{font-size:1.1rem; margin:0}

.file-loader{display:flex; gap:8px; align-items:center}
input[type="file"]{
  background:var(--panel); color:var(--text);
  border:1px dashed rgba(255,255,255,.15);
  padding:8px; border-radius:10px; max-width:70vw;
}

.app-main{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
  padding:16px;
}
@media (min-width: 900px){
  .app-main{grid-template-columns: 1.2fr .8fr;}
}

.player{
  display:flex; flex-direction:column; gap:12px;
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Video canvas */
canvas{
  width:100%; 
  max-height: 75vh; /* un peu plus haut en mobile */
  background:#000;
  border-radius:12px; border:1px solid rgba(255,255,255,.05);
  display:block;
}


/* Stats */
.stats{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:8px; font-size:.95rem;
}
.stats strong{display:block; color:var(--muted); font-weight:500}
.note{color:var(--muted); font-size:.85rem; margin-left:6px}

/* Controls */
.controls{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.controls button, .controls select, .controls label{
  font-size:1rem;
}
.controls .rate{
  display:flex; align-items:center; gap:6px; margin-left:auto;
  color:var(--muted); font-weight:500;
}

button{
  padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:#11192f; color:var(--text); cursor:pointer;
  touch-action:manipulation;
}
button:disabled{opacity:.5; cursor:not-allowed}
button.primary{background:linear-gradient(180deg,#1e293b,#0f172a); border-color:rgba(255,255,255,.16)}
button.accent{background:linear-gradient(180deg,#0f172a,#052a33); border-color:#0ea5b1}
button.ghost{background:transparent; border-color:rgba(255,255,255,.18)}
button.danger{background:linear-gradient(180deg,#3b0d14,#280a0e); border-color:#7f1d1d}

/* Timeline + waveform */
.timeline-wrap{
  display:flex; flex-direction:row; align-items:center; gap:12px;
}
.timeline-wrap.column{flex-direction:column; align-items:stretch}

.wave-wrap{
  position:relative;
  width:100%; height:54px;
  background:#0b1226;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  overflow:hidden;
}
#waveform{
  width:100%; height:100%;
  display:block; background:linear-gradient(180deg,#061024,#0b1226);
}
.wave-playhead{
  position:absolute; top:0; bottom:0; width:2px; left:0%;
  background:#22d3ee; box-shadow:0 0 0 2px rgba(34,211,238,.2);
  pointer-events:none;
}
.wave-wrap::after{
  content:""; position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  pointer-events:none;
}

.timeline{
  position:relative; height:24px; width:100%;
  background:#0b1226; border:1px solid rgba(255,255,255,.1); border-radius:12px;
  overflow:hidden;
}
.progress{
  position:absolute; top:0; left:0; bottom:0; width:0%;
  background:linear-gradient(90deg, #3b82f6, #22d3ee);
  opacity:.25; pointer-events:none;
}
.playhead{
  position:absolute; top:-4px; bottom:-4px; width:2px; left:0%;
  background:#22d3ee; box-shadow:0 0 0 2px rgba(34,211,238,.25);
  pointer-events:none;
}
.markers{position:absolute; inset:0; pointer-events:none}
.marker{
  position:absolute; top:0; bottom:0; width:10px; margin-left:-5px;
  border-radius:2px; background:var(--success);
  outline:2px solid rgba(52,211,153,.3);
  pointer-events:auto;
}
.marker.selected{background:#facc15; outline-color:rgba(250,204,21,.35)}
.marker::after{
  content:""; position:absolute; top:-8px; left:-6px; right:-6px; height:8px;
  background:transparent;
}

.delta{min-width:110px; text-align:right; color:var(--muted)}
.delta strong{color:var(--text)}

.markers-panel{
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:12px;
}
.markers-panel header{display:flex; flex-direction:column; gap:4px}
.markers-panel h2{margin:0; font-size:1.05rem}
.legend{color:var(--muted); font-size:.9rem}

.markers-list{display:flex; flex-direction:column; gap:8px}
.marker-item{
  display:grid; grid-template-columns: 1fr auto auto auto; gap:8px; align-items:center;
  padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  background:#0b1226;
}
.marker-item input[type="text"]{
  width:100%; background:#0f172a; border:1px solid rgba(255,255,255,.12);
  color:var(--text); border-radius:10px; padding:8px;
}
.marker-item .time{font-variant-numeric: tabular-nums; color:#cbd5e1}
.marker-item button{padding:8px 10px}
.marker-item .select{background:#1e293b}
.marker-item .delete{background:#371115; border-color:#7f1d1d}
.marker-item .jump{background:#12223b}

small, .legend, .note, .delta{user-select:none}