/* Extracted styles from index.html */
body {
  /* vertical gradient: top -> bottom */
  background: linear-gradient(180deg, #0f1c3f 0%, #1e3c72 100%);
  color: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  min-height: 100vh;
  margin: 0;
  position: relative;
  overflow: hidden;
}

/* subtle grain / film noise overlay using an inline SVG as repeating background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* small noise SVG using feTurbulence, low opacity for subtle effect */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='a'><feTurbulence baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23a)' fill='%23000000' opacity='0.06'/></svg>");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 1;
}
.container {
  max-width: 600px;
  margin: 60px auto;
  background: rgba(20,30,60,0.95);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 36px 32px 32px 32px;
  text-align: center;
  position: relative;
  z-index: 1; /* ensure content appears above the grain overlay */
}
h1 {
  font-size: 2.5rem;
  margin-bottom: 32px;
  letter-spacing: 1px;
}
.input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  justify-content: center;
}
.input-row input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 6px;
  border: none;
  font-size: 1rem;
  outline: none;
  min-width: 0;
}
.input-row button {
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 22px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.input-row button:hover {
  background: #c0392b;
}
.platform-box {
  background: #1a2540;
  border-radius: 12px;
  margin-top: 24px;
  padding: 28px 18px 18px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  display: none;
  flex-direction: column;
  align-items: center;
  min-height: 180px;
}
.platform-box.active {
  display: flex;
}
.platform-logo {
  
  height: 54px;
  margin-bottom: 10px;
}
.platform-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.download-options {
  display: flex;
  gap: 18px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.download-option {
  background: #22305a;
  border-radius: 8px;
  padding: 16px 22px;
  color: #fff;
  font-size: 1.08rem;
  cursor: pointer;
  border: none;
  margin-bottom: 6px;
  transition: background 0.2s;
}
.download-option.selected, .download-option:hover {
  background: #2d4a8a;
}
.quality-select {
  margin-top: 10px;
  background: #22305a;
  color: #fff;
  border-radius: 6px;
  border: none;
  padding: 7px 12px;
  font-size: 1rem;
}
.detected {
  color: #1ed760;
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.footer {
  margin-top: 38px;
  color: #b0b8d0;
  font-size: 0.98rem;
}

/* Spinner keyframes */
@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

/* Modal styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  padding: 20px;
}
.modal-box {
  background: #0f1c3f;
  color: #fff;
  border-radius: 10px;
  max-width: 640px;
  width: 100%;
  padding: 18px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  text-align: left;
}
.modal-actions { display:flex; justify-content:flex-end; margin-top:12px; }
.modal-actions button { background:#e74c3c; border:none; color:#fff; padding:8px 12px; border-radius:6px; cursor:pointer }

#clearInput:hover {
  color: #e74c3c;
  background: rgba(0,0,0,0.04);
  border-radius: 50%;
}
@media (max-width: 600px) {
  #clearInput { right: 0.3em; }
}