body {
  background-color: black;
  color: white;
  font-family: system-ui, -apple-system, sans-serif;
  height: 100vh;
  overflow: hidden;
}

/* Ensure main UI is above backgrounds */
#app-root {
  position: relative;
  z-index: 1;
}

/* Brand background layer (fixed under UI) */
#brand-bg {
  position: fixed;
  inset: 0;
  z-index: 0; /* above ascii which is now -1 */
  pointer-events: none;
  background-position: center center;
  background-repeat: no-repeat;
  /* Make the image a perfect square that fits the smaller viewport side */
  background-size: 200vmin 200vmin;
  opacity: var(--brand-opacity, 1);
  /* No shadows at all */
  filter: var(--brand-filter, none);
}

/* Responsive adjustment for brand background sizing */
@media (max-width: 480px), (min-aspect-ratio: 9/5) {
  #brand-bg {
    background-size: 70vmin;
  }
}

/* ASCII background layer */
#ascii-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre;
  line-height: 1;
  opacity: var(--ascii-opacity, 0.08);
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0,0,0);
  animation: drift var(--drift-duration, 20s) linear infinite alternate;
}

@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--drift-distance, 18px)); }
}

.terminal {
  font-family: 'Courier New', monospace;
  background-color: #2d3748;
  border: 2px solid #4a5568;
  padding: 16px;
  border-radius: 4px;
}

/* Improve contrast for input and button on dark background */
#url-input {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}

#download-button {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

.terminal .yt-dlp {
  color: #48bb78; /* green */
}

.terminal .download {
  color: #4299e1; /* blue */
}

@media (max-height: 600px) {
  h1 {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .space-y-6 > * + * {
    margin-top: 0.75rem !important;
  }
}

/* Pre-apply state styles to reduce layout shifts */
.btn-disabled {
  background-color: #4a5568 !important;
  cursor: not-allowed !important;
}

.hidden {
  display: none !important;
}