/* ==========================================================================
       RESPONSIVE BREAKPOINTS
       ========================================================================== */
    @media (max-width: 900px) {
      .modal-grid { grid-template-columns: 1fr; gap: 24px; }
      .search-input-box { width: 140px; }
      .search-input-box:focus { width: 180px; }
      .footer-top-row { flex-direction: column; align-items: flex-start; }
      .footer-bottom-row { flex-direction: column; align-items: flex-start; }
      .ai-matcher-card { grid-template-columns: 1fr; height: auto; max-height: none; }
      .ai-card-poster-col { min-height: 260px; height: 260px; }
      .ai-card-info-col { padding: 24px; height: auto; }
      .ai-card-synopsis { min-height: auto; }
    }

    @media (max-width: 768px) {
      .nav-left { gap: 14px; }
      .nav-tab-btn { padding: 5px 10px; font-size: 12px; }
      .nav-tab-btn span { display: inline; }
      .nav-btn span { display: none; }
      .nav-btn { padding: 0 10px; }
      .search-input-box { width: 110px; }
      .search-input-box:focus { width: 160px; }
    }

    @media (max-width: 600px) {
      .navbar { height: 64px; }
      .hero-billboard { height: 68vh; min-height: 460px; }
      .hero-title { font-size: 26px; }
      .hero-synopsis { -webkit-line-clamp: 2; font-size: 12.5px; }
      .btn-liquid-primary, .btn-liquid-secondary { height: 42px; padding: 0 18px; font-size: 13px; }
      .modal-hero { height: 230px; }
      .modal-body { padding: 20px; }
      .episode-row { flex-wrap: wrap; }
      .ep-thumb-box { flex: 0 0 100%; max-width: 180px; }
      .ai-matcher-actions-bar { flex-direction: column; width: 100%; }
      .btn-ai-pass, .btn-ai-watch, .btn-liquid-secondary { width: 100%; justify-content: center; }
    }
  </style>