* {
  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");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  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;
}

input[type="file"] {
  background:rgba(255,255,255,0.1);
  padding:10px;
  border-radius:10px;
  border:none;
  color:white;
}

#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)}
}

#securePopup {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.popup-box {
  background:#0f172a;
  padding:25px;
  border-radius:20px;
  max-width:400px;
  text-align:center;
  color:white;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
  animation:fadeIn 0.5s ease;
}

.popup-box h2 {
  margin-bottom:10px;
}

.popup-box p {
  margin-bottom:20px;
  line-height:1.6;
  color:#cbd5f5;
}

.popup-box button {
  margin:5px;
  padding:10px 15px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:bold;
}

.popup-box button:first-child {
  background:#22c55e;
  color:white;
}

.popup-box button:last-child {
  background:#ef4444;
  color:white;
}

#dropArea {
  margin-top:15px;
  padding:25px;
  border:2px dashed rgba(255,255,255,0.3);
  border-radius:15px;
  cursor:pointer;
  text-align:center;
  font-size:18px;
  font-weight:bold;
  transition:0.3s;
  color:#c7d2fe;
  background:rgba(255,255,255,0.02);
}

#dropArea.hover {
  border-color:#38bdf8;
  background:rgba(56,189,248,0.05);
  transform:scale(1.03);
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}