* { margin:0; padding:0; box-sizing:border-box; font-family:system-ui;}
body.bg {
  background: linear-gradient(rgba(15,23,42,0.85), rgba(30,41,59,0.9)),
              url("https://images.unsplash.com/photo-1511512578047-dfb367046420") no-repeat center center fixed;
  background-size: cover;
  color:white;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
header, footer {
  position:fixed;
  width:100%;
  background: rgba(15,23,42,0.7);
  backdrop-filter: blur(12px);
  text-align:center;
  padding:14px;
  z-index:1000;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
footer { bottom:0; border-top:1px solid rgba(255,255,255,0.1);}
header {top:0;}
main {flex:1; display:flex; justify-content:center; align-items:center; padding:120px 20px 80px;}
.card {background:rgba(255,255,255,0.08); border-radius:25px; padding:30px; width:100%; max-width:950px; text-align:center; backdrop-filter:blur(18px); box-shadow:0 10px 40px rgba(0,0,0,0.4); animation:fadeIn 0.8s ease;}
#player {margin-top:20px; border:2px solid rgba(255,255,255,0.15); border-radius:15px; overflow:hidden;}
.buttons {margin-top:20px;}
button {background:linear-gradient(135deg,#38bdf8,#6366f1); border:none; padding:12px 22px; margin:6px; border-radius:14px; cursor:pointer; transition:0.3s; font-weight:bold; color:white; box-shadow:0 5px 15px rgba(0,0,0,0.3);}
button:hover {transform:scale(1.07); background:linear-gradient(135deg,#0ea5e9,#4f46e5);}
button:disabled {background:rgba(255,255,255,0.2); cursor:not-allowed; box-shadow:none;}
.status {margin-top:15px; color:#c7d2fe; font-weight:bold;}
@media(max-width:600px){.card {padding:20px;}}
@keyframes fadeIn {from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:translateY(0)}}
#dropArea {position:relative; padding:40px; border:2px dashed rgba(255,255,255,0.4); border-radius:15px; cursor:pointer; transition:0.3s;}
#dropArea.dragover {background: rgba(56,189,248,0.1);}