:root{
  --bg:#f6f7fb; --fg:#111827; --muted:#6b7280; --card:#ffffff; --border:#e5e7eb;
  --shadow:0 10px 25px rgba(17,24,39,.06); --accent:#2563eb; --accent-700:#1d4ed8;
  --danger:#ef4444; --success:#16a34a;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--fg);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"
}
.container{max-width:920px;margin:40px auto;padding:0 20px}
h1{margin:0 0 12px;font-size:28px;font-weight:750;letter-spacing:.2px}
.sub{color:var(--muted);margin:0 0 24px}

/* Cartes / listes */
.card,.list .track{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:18px;box-shadow:var(--shadow)
}
.card{margin-bottom:24px}
.list .track{margin-bottom:16px}
h2{margin:0 0 14px;font-size:18px;font-weight:700}

/* Boutons */
button{
  appearance:none;border:1px solid transparent;border-radius:10px;
  padding:10px 14px;background:var(--accent);color:#fff;font-weight:700;
  transition:transform .04s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 6px 14px rgba(37,99,235,.18); cursor:pointer
}
button:hover{background:var(--accent-700)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:3px solid rgba(37,99,235,.25);outline-offset:2px}
button.danger{background:var(--danger);box-shadow:0 6px 14px rgba(239,68,68,.18)}
.inline{display:inline}

/* Champs de formulaire (UNIFIÉS) */
input[type=text],
input[type=password],
input[type=email],
textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--fg);
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{min-height:110px;resize:vertical}
input[type=text]:focus-visible,
input[type=password]:focus-visible,
input[type=email]:focus-visible,
textarea:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
  outline:0;
}

/* Input fichier : pas de hauteur forcée (meilleure compat) */
form input[type=file]{display:block;margin:8px 0 12px}

/* Copier lien */
.copywrap{display:flex;gap:8px;align-items:center}
.copywrap input{flex:1}
.copywrap button{white-space:nowrap}

/* Alertes */
.alert{border-radius:12px;padding:12px 14px;margin-bottom:18px;border:1px solid var(--border)}
.alert.success{background:#f0fdf4;border-color:#bbf7d0;color:#065f46}
.alert.error{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}

/* Player */
.track__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.track__name{font-size:15px;font-weight:700}
.player{border:1px solid var(--border);border-radius:12px;padding:12px;background:#ffffff}
.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn.play{
  width:44px;min-width:44px;height:44px;border-radius:999px;background:var(--accent);
  color:#fff;font-size:16px;border:0;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(37,99,235,.25)
}
.btn.play:hover{background:var(--accent-700)}
.time{display:flex;align-items:center;gap:10px;flex:1;min-width:260px}
.time .cur,.time .dur{font-variant-numeric:tabular-nums;color:#111827;font-weight:600}

/* Range */
input[type="range"]{height:38px;-webkit-appearance:none;width:100%;background:transparent}
input[type="range"]::-webkit-slider-runnable-track{height:6px;background:#e5e7eb;border-radius:999px;border:0}
input[type="range"]::-moz-range-track{height:6px;background:#e5e7eb;border-radius:999px;border:0}
input.seek::-moz-range-progress{background:var(--accent);height:6px;border-radius:999px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent);margin-top:-5px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.seek{flex:1}
.volume{display:flex;align-items:center;gap:8px}
.vol{width:140px}

/* Badges / actions */
.hint{color:var(--muted);font-size:13px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:12px;margin-left:8px}
.actions{display:flex;gap:8px;margin-top:6px}
.actions form{display:inline}

/* ===== Upload progress (admin) ===== */
.up{display:none;margin-top:10px}
.up.active{display:block}
.up .bar{
  --w: 0%;
  height:10px;background:#e5e7eb;border-radius:999px;position:relative;overflow:hidden;
}
.up .bar::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);
  background:var(--accent);border-radius:999px;transition:width .15s ease;
}
.up .status{margin-top:6px}

/* ===== Upload progress ===== */
.up{display:none;margin-top:10px}
.up.active{display:block}
.up .bar{
  --w: 0%;
  height:10px;background:#e5e7eb;border-radius:999px;position:relative;overflow:hidden;
}
.up .bar::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);
  background:var(--accent);border-radius:999px;transition:width .15s ease;
}
.up .status{margin-top:6px}

/* Empêche le layout de bouger quand la page gagne/perd la scrollbar */
html { overflow-y: scroll; }