/* Google font */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

/* Reset */
* {margin:0;padding:0;box-sizing:border-box;}
body {
  font-family: "Inter", sans-serif;
  background: #0f0f12;
  color: #e4e4e7;
  line-height: 1.6;
}

/* Navbar */
.navbar {
  background: #18181b;
  border-bottom: 1px solid #27272a;
  padding: 1rem 0;
}
.nav-container {
  display:flex;justify-content:space-between;align-items:center;
  max-width:1100px;margin:0 auto;padding:0 1rem;
}
.logo {font-size:1.3rem;font-weight:700;color:#fff;text-decoration:none;}
.nav-links {list-style:none;display:flex;gap:1.2rem;}
.nav-links a {color:#a1a1aa;text-decoration:none;transition:.2s;}
.nav-links a:hover {color:#8b5cf6;}

/* Main */
.main-section {padding:4rem 1rem;display:flex;justify-content:center;}
.upload-card {
  background:#1e1e22;
  padding:2rem;
  border-radius:1rem;
  max-width:500px;
  width:100%;
  text-align:center;
  box-shadow:0 0 20px rgba(0,0,0,0.4);
}
.upload-card h1 {font-size:1.8rem;margin-bottom:.5rem;}
.subtitle {color:#a1a1aa;margin-bottom:1.5rem;}

/* Drop zone */
.drop-zone {
  border:2px dashed #3f3f46;
  padding:2rem;
  border-radius:.8rem;
  background:#2a2a2f;
  cursor:pointer;
  transition:.3s;
}
.drop-zone:hover {border-color:#8b5cf6;}
.upload-label {cursor:pointer;display:block;font-weight:600;margin-bottom:.5rem;color:#8b5cf6;}
#file-chosen {display:block;margin-top:.5rem;color:#a1a1aa;}

/* Divider */
.divider {
  display:flex;align-items:center;justify-content:center;
  margin:1.5rem 0;color:#a1a1aa;position:relative;
}
.divider span {background:#1e1e22;padding:0 .5rem;z-index:1;}
.divider::before {
  content:"";position:absolute;left:0;right:0;height:1px;background:#2d2d33;
}

/* Inputs */
input[type="url"], input[type="text"] {
  width:100%;padding:.8rem 1rem;margin-bottom:1rem;
  border:1px solid #2d2d33;border-radius:.5rem;
  background:#2a2a2f;color:#fff;
}
input:focus {border-color:#8b5cf6;outline:none;}

/* Buttons */
.btn {
  display:inline-block;padding:.8rem 1.4rem;border:none;
  border-radius:.5rem;font-weight:600;cursor:pointer;
  background:#8b5cf6;color:#fff;transition:.2s;
}
.btn:hover {opacity:.9;transform:translateY(-1px);}
.btn-secondary {background:#2d2d33;color:#e4e4e7;}
.btn-secondary:hover {background:#3f3f46;}

/* Progress */
.uploading-status {
  margin-top:1.5rem;text-align:left;
  background:#2a2a2f;padding:1rem;border-radius:.8rem;
}
.progress-bar {
  background:#3f3f46;height:20px;border-radius:20px;
  margin-bottom:1rem;position:relative;text-align:center;
  color:#fff;font-size:.8rem;line-height:20px;font-weight:600;
}
.progress-bar::before {
  content:"";position:absolute;top:0;left:0;height:100%;width:0%;
  background:#8b5cf6;border-radius:20px;transition:.3s;
}
.uploading-status ul {list-style:none;font-size:.9rem;}
.uploading-status li {margin:.3rem 0;}

/* Modal */
.modal {
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;
  z-index:1000;
}
.modal-content {
  background:#1e1e22;padding:2rem;border-radius:1rem;width:100%;max-width:400px;
}
.modal-content h2 {margin-bottom:1rem;}
.settings-group {display:flex;align-items:center;gap:.8rem;margin:1rem 0;}
.modal-buttons {display:flex;justify-content:flex-end;gap:.8rem;margin-top:1.5rem;}
.show {display:flex;}

/* Toggle switch */
.switch {position:relative;width:50px;height:28px;}
.switch input {opacity:0;width:0;height:0;}
.slider {
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background:#3f3f46;transition:.4s;border-radius:34px;
}
.slider:before {
  content:"";position:absolute;height:20px;width:20px;left:4px;bottom:4px;
  background:#fff;transition:.4s;border-radius:50%;
}
input:checked + .slider {background:#8b5cf6;}
input:checked + .slider:before {transform:translateX(22px);}