/* Small phones */
@media (max-width: 380px) {
  .logo { font-size: 15px; }
  .channel-action span { display: none; }
  .channel-name { font-size: 14px; }
}

/* Tablet and up */
@media (min-width: 600px) {
  #main { padding: 0 24px 40px; }
  .channel-card { padding: 16px 20px 16px 24px; min-height: 80px; }
  .modal { margin: 20px auto; }
}

/* Desktop */
@media (min-width: 1024px) {
  #topbar { padding-left: 24px; padding-right: 24px; }
  #main { padding: 0 0 48px; }
  .channel-card:hover { background: var(--bg-3); }
  .channel-card:hover .channel-action { color: var(--accent-2); }
}

/* Large desktop */
@media (min-width: 1440px) {
  #main { max-width: 800px; }
}

/* Landscape phone */
@media (max-width: 767px) and (orientation: landscape) {
  #topbar { padding-top: 10px; padding-bottom: 10px; }
  .channel-card { min-height: 60px; }
}

/* Coarse pointer (touch) — bigger tap targets */
@media (pointer: coarse) {
  .channel-card { min-height: 76px; }
  .modal-btn { height: 50px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast */
@media (forced-colors: active) {
  .channel-card.hdr::before,
  .channel-card.uhd::before,
  .channel-card.hd::before {
    background: ButtonText;
  }
}

/* Print */
@media print {
  body { display: none; }
}