:root {
      --bg: #141414; --card-bg: #181818; --brand-red: #e50914; --brand-red-hover: #b80710;
      --text: #ffffff; --text-muted: #b3b3b3; --border: #333333; --star: #f59e0b;
    }

    /* ===== Paski przewijania (cienkie, dopasowane do ciemnego UI) =====
       scrollbar-width/scrollbar-color są dziedziczone, więc samo ustawienie ich na <html>
       obejmuje całą stronę, sidebar i modal. Warianty ::-webkit-* obsługują Chrome/Edge/Safari. */
    html { scrollbar-width: thin; scrollbar-color: #4a4a4a transparent; }
    ::-webkit-scrollbar { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: #4a4a4a; border: 4px solid transparent; background-clip: padding-box; border-radius: 999px;
    }
    ::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border: 4px solid transparent; background-clip: padding-box; }
    ::-webkit-scrollbar-thumb:active { background: var(--brand-red); border: 4px solid transparent; background-clip: padding-box; }
    ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    ::-webkit-scrollbar-corner { background: transparent; }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--bg); color: var(--text); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow-x: hidden; padding-bottom: calc(80px + var(--cookie-bar-h, 0px)); }
    /* Tło nie przewija się pod przyciemnionym modalem (klasę zakłada app.js). */
    body.modal-open { overflow: hidden; }

    header {
      position: sticky; top: 0; left: 0; right: 0; height: 70px; padding: 0 4%;
      display: flex; justify-content: space-between; align-items: center;
     background: #141414;  z-index: 100; transition: background 0.3s ease;
    }
    header.scrolled { background: #141414; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
    .header-left { display: flex; align-items: center; gap: 20px; }
    .menu-btn { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: bold; transition: opacity 0.2s; }
    .menu-btn:hover { opacity: 0.8; }
    .brand { font-size: 1.8rem; font-weight: 900; color: var(--brand-red); letter-spacing: 1px; text-decoration: none; transition: transform 0.2s; display: inline-flex; align-items: center; }
    .brand:hover { transform: scale(1.05); }
    .brand-logo { height: 50px; width: auto; display: block; }
    .header-right { display: flex; align-items: center; gap: 16px; }
    .search-box { display: flex; align-items: center; gap: 8px; }
    .search-box input {
      background: rgba(0,0,0,0.75); border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 8px 14px; border-radius: 4px; outline: none; width: 200px; font-size: 0.9rem; transition: all 0.3s ease;
    }
    /* Licznik filmów obok wyszukiwarki - aktualizowany na bieżąco przez app.js (updateMovieCount). */
    .search-count {
      flex: 0 0 auto; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .search-count[hidden] { display: none; }
    .search-box input:focus { width: 260px; border-color: #fff; background: rgba(0,0,0,0.9); box-shadow: 0 0 10px rgba(255,255,255,0.2); }
    .profile-btn { display: flex; align-items: center; gap: 8px; background: #222; border: 1px solid #444; padding: 4px 10px; border-radius: 4px; color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: bold; cursor: pointer; transition: background 0.2s; }
    .profile-btn:hover { background: #333; }
    .profile-btn img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; background: #e50914; }

    .profile-modal {
      position: fixed; inset: 0; background: #141414; z-index: 3000; display: none;
      align-items: center; justify-content: center; flex-direction: column; padding: 20px;
      animation: fadeInModal 0.3s ease-out;
    }
    .profile-modal.open { display: flex; }
    @keyframes fadeInModal { from { opacity: 0; } to { opacity: 1; } }
    .profile-modal h1 { font-size: 3rem; font-weight: 500; margin-bottom: 40px; color: #fff; text-align: center; }
    .profile-modal-hint { color: #808080; font-size: 0.9rem; margin: -25px 0 35px; text-align: center; }
    .profiles-grid { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
    
    .profile-tile-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
    .profile-tile { text-align: center; cursor: pointer; text-decoration: none; color: #808080; width: 140px; transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    .profile-tile img { width: 130px; height: 130px; border-radius: 6px; border: 3px solid transparent; transition: border-color 0.25s, transform 0.25s; margin-bottom: 10px; object-fit: cover; background: #333; }
    .profile-tile:hover { color: #fff; transform: scale(1.08); }
    .profile-tile:hover img { border-color: #fff; box-shadow: 0 10px 25px rgba(255,255,255,0.2); }
    .profile-tile div { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .delete-profile-btn {
      position: absolute; top: 0; right: 5px; background: rgba(229,9,20,0.9); color: #fff; border: none;
      width: 28px; height: 28px; border-radius: 50%; font-size: 1rem; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 5;
      transition: background 0.2s, transform 0.2s;
    }
    .delete-profile-btn:hover { background: #ff1f2b; transform: scale(1.1); }
    .profile-tile-wrap:hover .delete-profile-btn { display: flex; }

    .add-profile-box {
      width: 130px; height: 130px; border-radius: 6px; border: 3px dashed #444; display: flex;
      align-items: center; justify-content: center; font-size: 3rem; color: #444; background: transparent; cursor: pointer; transition: all 0.25s; margin-bottom: 10px;
    }
    .profile-tile:hover .add-profile-box { border-color: #fff; color: #fff; background: rgba(255,255,255,0.05); }

    .add-form-container {
      background: #1f1f1f; padding: 30px; border-radius: 8px; border: 1px solid #333; width: 100%; max-width: 400px; display: none; text-align: center;
      animation: scaleUp 0.3s ease-out;
    }
    .add-form-container.open { display: block; }
    @keyframes scaleUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .add-form-container input {
      width: 100%; padding: 12px; background: #333; border: 1px solid #444; color: #fff; border-radius: 4px; font-size: 1rem; margin-bottom: 15px; outline: none; transition: border-color 0.2s;
    }
    .add-form-container input:focus { border-color: #e50914; }
    .btn-save { background: var(--brand-red); color: #fff; border: none; padding: 10px 24px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: background 0.2s; }
    .btn-save:hover { background: var(--brand-red-hover); }
    .btn-cancel { background: transparent; color: #aaa; border: 1px solid #444; padding: 10px 20px; font-weight: bold; border-radius: 4px; cursor: pointer; margin-left: 10px; transition: all 0.2s; }
    .btn-cancel:hover { color: #fff; border-color: #fff; }

    .sidebar { position: fixed; top: 0; left: -300px; width: 300px; height: 100vh; background: #1f1f1f; z-index: 200; box-shadow: 5px 0 25px rgba(0,0,0,0.8); transition: left 0.35s cubic-bezier(0.1, 0.9, 0.2, 1); display: flex; flex-direction: column; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
    .sidebar.open { left: 0; }
    .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
    .sidebar-title { font-size: 1.2rem; font-weight: bold; color: #fff; }
    .sidebar-close { background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; transition: transform 0.2s; }
    .sidebar-close:hover { transform: rotate(90deg); }
    .sidebar-item { padding: 12px 16px; color: var(--text-muted); text-decoration: none; border-radius: 6px; margin-bottom: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
    .sidebar-item:hover, .sidebar-item.active { background: var(--brand-red); color: #fff; padding-left: 20px; }
    .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 150; display: none; backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s; }
    .sidebar-overlay.open { display: block; opacity: 1; }

    /* Sekcja "Kanały" w panelu bocznym - obok listy kategorii. */
    .sidebar-section-title {
      margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid var(--border);
      font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;
      color: var(--text-muted); font-weight: 700;
    }
    .sidebar-channel-item {
      display: flex; align-items: center; gap: 10px; padding: 8px 12px;
      border-radius: 6px; margin-bottom: 6px; cursor: pointer; color: var(--text-muted);
      font-weight: 600; transition: all 0.2s;
    }
    .sidebar-channel-item:hover { background: var(--brand-red); color: #fff; padding-left: 16px; }
    .sidebar-channel-avatar {
      width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
      background: var(--brand-red); flex: 0 0 auto;
    }
    .sidebar-channel-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sidebar-channel-count { font-size: 0.75rem; opacity: 0.7; flex: 0 0 auto; }

    #heroBanner {
      position: relative; height: 80vh; min-height: 550px;
      background-size: cover; background-position: center center;
      display: flex; align-items: center; padding: 0 4%; margin-bottom: 30px;
      transition: background-image 0.8s ease-in-out;
    }
    /* Hero odsłania app.js dopiero po wstawieniu prawdziwych danych (brak widocznej atrapy).
       !important jest konieczne, bo JS steruje widocznością przez inline style.display. */
    #heroBanner[hidden] { display: none !important; }
    #heroBanner::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(77deg, rgba(20,20,20,0.95) 0%, rgba(20,20,20,0.5) 50%, transparent 100%),
                  linear-gradient(to top, #141414 0%, transparent 40%);
      z-index: 1;
    }
    .hero-content { position: relative; z-index: 2; max-width: 680px; animation: slideUp 0.6s ease-out; }
    @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .hero-title {
      font-size: 3.5rem; font-weight: 800; margin-bottom: 14px; line-height: 1.1;
      text-shadow: 2px 2px 6px rgba(0,0,0,0.8); display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
    }
    .hero-meta { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 600; margin-bottom: 14px; }
    .rating-badge { color: var(--star); }
    .hero-desc {
      font-size: 1.15rem; line-height: 1.5; color: #e5e5e5; margin-bottom: 24px;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
    }
    .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn-play {
      background: #fff; color: #000; border: none; padding: 12px 32px;
      font-size: 1.15rem; font-weight: 700; border-radius: 4px; cursor: pointer;
      display: flex; align-items: center; gap: 8px; transition: all 0.2s;
    }
    .btn-play:hover { background: rgba(255,255,255,0.85); transform: scale(1.03); }
    .btn-yt {
      background: rgba(109,109,110,0.7); color: #fff; border: none; padding: 12px 24px;
      font-size: 1.15rem; font-weight: 700; border-radius: 4px; cursor: pointer;
      display: flex; align-items: center; gap: 8px; text-decoration: none; backdrop-filter: blur(4px); transition: background 0.2s;
    }
    .btn-yt:hover { background: rgba(109,109,110,0.5); }

    .slider-dots {
      position: absolute; bottom: 30px; right: 4%; z-index: 3; display: flex; gap: 8px;
    }
    .slider-dot {
      width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.3s;
    }
    .slider-dot.active { background: var(--brand-red); width: 28px; border-radius: 6px; }

    .modal {
      position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); display: none;
      align-items: center; justify-content: center; z-index: 1000; padding: 20px; backdrop-filter: blur(10px);
      animation: fadeInModal 0.25s ease-out;
    }
    .modal.open { display: flex; }
    .modal-box {
      background: #181818; width: 100%; max-width: 1000px; border-radius: 10px;
      overflow-y: auto; overflow-x: hidden; max-height: 92vh;
      scrollbar-width: thin; scrollbar-color: #3a3a3a transparent;
      scrollbar-gutter: stable; overscroll-behavior: contain;
      box-shadow: 0 25px 60px rgba(0,0,0,0.9); border: 1px solid #333;
      display: flex; flex-direction: column; position: relative; animation: scaleUp 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
    }
    /* W modalu pasek jest odrobinę ciemniejszy - tło to #181818, nie #141414. */
    .modal-box::-webkit-scrollbar { width: 12px; }
    .modal-box::-webkit-scrollbar-thumb { background: #3a3a3a; }
    .modal-box::-webkit-scrollbar-thumb:hover { background: #5a5a5a; }
    .modal-box::-webkit-scrollbar-thumb:active { background: var(--brand-red); }
    .video-container { position: relative; padding-bottom: 56.25%; height: 0; background: #000; flex: 0 0 auto; }
    #ytPlayerDiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .modal-head {
      display: flex; justify-content: flex-end; align-items: center;
      padding: 8px 12px; background: #181818; border-bottom: 1px solid var(--border);
      position: sticky; top: 0; z-index: 3; flex: 0 0 auto;
    }
    .modal-foot { padding: 30px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; background: #181818; flex: 0 0 auto; }
    .close-btn {
      background: #232323; border: 2px solid #fff;
      color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center; transition: all 0.2s;
    }
    .close-btn:hover { background: var(--brand-red); border-color: var(--brand-red); transform: rotate(90deg); }
    .modal-title-row { font-size: 1.8rem; font-weight: bold; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .modal-channel-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
    .modal-channel {
      display: inline-flex; align-items: center; gap: 10px; margin-bottom: 0;
      padding: 5px 14px 5px 5px; background: #232323; border: 1px solid var(--border);
      border-radius: 999px; text-decoration: none; color: var(--text);
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .modal-channel:hover { background: #2e2e2e; border-color: var(--brand-red); transform: translateY(-1px); }
    .modal-channel .channel-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--brand-red); flex: 0 0 auto; }
    .modal-channel .channel-text { display: flex; flex-direction: column; line-height: 1.2; }
    .modal-channel .channel-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
    .modal-channel .channel-name { font-size: 0.9rem; font-weight: 700; color: #fff; }
    .modal-channel .channel-ext { color: var(--text-muted); transition: color 0.2s; }
    .modal-channel:hover .channel-ext { color: var(--brand-red); }
    .remove-request-btn {
      display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px;
      background: transparent; border: 1px solid var(--border); border-radius: 999px;
      color: var(--text-muted); text-decoration: none; font-size: 0.8rem; font-weight: 600;
      transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    }
    .remove-request-btn:hover { background: #232323; border-color: var(--brand-red); color: #fff; transform: translateY(-1px); }
    .modal-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 15px; }
    /* Długie opisy są domyślnie zwijane do kilku linii; przycisk (patrz app.js) rozwija całość. */
    .modal-desc.is-clamped {
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
      margin-bottom: 8px;
    }
    .desc-toggle {
      background: none; border: none; color: var(--brand-red); font-weight: 700;
      font-size: 0.9rem; cursor: pointer; padding: 0; margin: 0 0 15px;
      display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s;
    }
    .desc-toggle:hover { color: var(--brand-red-hover); text-decoration: underline; }
    .desc-toggle[hidden] { display: none; }
    .yt-link-btn {
      background: var(--brand-red); color: #fff; text-decoration: none; padding: 10px 20px;
      border-radius: 4px; font-size: 0.9rem; font-weight: bold; display: inline-block; transition: background 0.2s;
    }
    .yt-link-btn:hover { background: var(--brand-red-hover); }
    /* Rząd akcji w modalu filmu: główne CTA (YouTube) obok przycisku udostępniania linku. */
    .modal-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .share-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      background: #232323; border: 1px solid var(--border); color: #fff;
      padding: 10px 18px; border-radius: 4px; font-family: inherit; font-size: 0.9rem; font-weight: 700;
      cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    }
    .share-btn:hover { background: #2e2e2e; border-color: var(--brand-red); transform: translateY(-1px); }
    .share-btn:active { transform: translateY(0); }
    .share-btn:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }

    .progress-bar-container { width: 100%; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-top: 6px; }
    .progress-bar-fill { height: 100%; background: var(--brand-red); width: 0%; transition: width 0.4s ease; }

    .category-section { padding: 0 4%; margin-bottom: 40px; }
    .category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .category-title { font-size: 1.4rem; font-weight: 700; color: #e5e5e5; }
    .show-all-link { color: var(--text-muted); font-size: 0.9rem; cursor: pointer; text-decoration: none; font-weight: 600; transition: color 0.2s; }
    .show-all-link:hover { color: #fff; }
    .row-container {
      position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding: 10px 0 20px 0; scrollbar-width: none;
    }
    .row-container::-webkit-scrollbar { display: none; }

    .movie-card {
      flex: 0 0 220px; background: var(--card-bg); border-radius: 6px; overflow: hidden;
      cursor: pointer; display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), box-shadow 0.3s ease; border: 1px solid var(--border);
    }
    .movie-card:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 15px 30px rgba(0,0,0,0.8);
      border-color: #666;
      z-index: 10;
    }
    .poster-wrap { width: 100%; aspect-ratio: 2 / 3; background: #000; position: relative; overflow: hidden; }
    .poster-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
    .movie-card:hover .poster-wrap img { transform: scale(1.05); }
    .source-badge {
      position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.8);
      font-size: 0.65rem; padding: 3px 6px; border-radius: 4px; color: #fff; backdrop-filter: blur(4px);
      max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      text-align: left; pointer-events: none;
    }
    /* Oznaczenie wersji językowej: NAPISY PL (film zagraniczny, napisy tłumaczone) / LEKTOR PL. */
    .lang-badge {
      position: absolute; top: 8px; left: 8px; font-size: 0.6rem; font-weight: 700;
      letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 6px;
      border-radius: 4px; color: #fff; backdrop-filter: blur(4px); pointer-events: none;
    }
    .lang-badge.is-subs, .lang-pill.is-subs { background: rgba(59, 130, 246, 0.92); color: #fff; }
    .lang-badge.is-lektor, .lang-pill.is-lektor { background: rgba(245, 158, 11, 0.92); color: #111; }
    .lang-pill {
      display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
      white-space: nowrap;
    }
    .lang-pill[hidden] { display: none; }

    /* ============================================================
       Etykieta przycisku kategorii (dawniej styl inline w topbar.php).
       ============================================================ */
    .menu-btn-label { font-size: 1rem; font-weight: normal; margin-left: 4px; }

    /* ============================================================
       Przycisk instalacji aplikacji (PWA) - pokazywany przez assets/js/pwa.js
       ============================================================ */
    .install-btn {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--brand-red); color: #fff; border: none; padding: 8px 14px;
      border-radius: 4px; font-size: 0.85rem; font-weight: bold; cursor: pointer;
      white-space: nowrap; transition: background 0.2s, transform 0.2s;
    }
    .install-btn:hover { background: var(--brand-red-hover); transform: translateY(-1px); }
    .install-btn[hidden] { display: none; }
    .install-btn svg { flex: 0 0 auto; }

    /* Wygodniejsza obsługa dotykiem na urządzeniach mobilnych. */
    button, .movie-card, .sidebar-item, .sidebar-channel-item, .profile-tile { touch-action: manipulation; }
    a, button { -webkit-tap-highlight-color: transparent; }

    .card-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--card-bg); }
    .card-title { font-size: 0.9rem; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

    .full-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; padding: 0 4%; margin-bottom: 40px; }
    .back-row-btn {
      background: #232323; color: #fff; border: 1px solid var(--border); padding: 8px 16px; border-radius: 4px;
      cursor: pointer; font-weight: bold; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s;
    }
    .back-row-btn:hover { background: var(--brand-red); border-color: var(--brand-red); }

    #mainContainer { padding-top: 20px; }
    .empty-msg { padding: 60px; text-align: center; color: var(--text-muted); font-size: 1.2rem; }

    /* ============================================================
       RWD - tablety (<= 1024px)
       ============================================================ */
    @media (max-width: 1024px) {
      #heroBanner { height: 68vh; min-height: 460px; }
      .hero-title { font-size: 2.6rem; }
      .brand-logo { height: 42px; }
      .search-box input { width: 170px; }
      .search-box input:focus { width: 210px; }
      .modal-box { max-height: 94vh; }
    }

    /* ============================================================
       RWD - telefony i małe tablety (<= 768px)
       ============================================================ */
    @media (max-width: 768px) {
      header {
        height: auto; min-height: 60px;
        padding: env(safe-area-inset-top) 16px 0;
      }
      .header-left { gap: 12px; }
      .menu-btn { font-size: 1.3rem; }
      .brand-logo { height: 34px; }
      .header-right { gap: 10px; flex: 1 1 auto; justify-content: flex-end; }
      .search-box { flex: 1 1 auto; min-width: 0; }
      .search-box input, .search-box input:focus { width: 100%; flex: 1 1 auto; min-width: 0; font-size: 0.85rem; padding: 7px 10px; }
      .search-count { font-size: 0.72rem; }
      #activeProfileName { display: none; }

      #heroBanner { height: auto; min-height: 58vh; padding: 72px 5% 36px; align-items: flex-end; }
      .hero-content { max-width: 100%; }
      .hero-title { font-size: 2rem; gap: 10px; }
      .hero-meta { font-size: 0.9rem; gap: 8px; flex-wrap: wrap; }
      .hero-desc { font-size: 1rem; -webkit-line-clamp: 4; }
      .btn-play, .btn-yt { font-size: 1rem; padding: 10px 22px; }
      .slider-dots { bottom: 16px; right: 5%; }

      .category-section { padding: 0 5%; margin-bottom: 28px; }
      .category-title { font-size: 1.15rem; }
      .movie-card { flex: 0 0 165px; }
      .card-title { font-size: 0.85rem; }
      .full-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 14px; padding: 0 5%; }

      .sidebar { width: 85vw; max-width: 320px; }

      .modal { padding: 0; }
      .modal-box {
        max-width: 100%; max-height: 100vh; max-height: 100dvh;
        border-radius: 0; border-left: none; border-right: none;
      }
      .modal-head { padding-top: calc(8px + env(safe-area-inset-top)); }
      .modal-foot { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); flex-direction: column; gap: 14px; }
      .modal-foot > div { width: 100%; min-width: 0; }
      .modal-title-row { font-size: 1.35rem; }
      .modal-desc { font-size: 0.95rem; }
      .yt-link-btn { width: 100%; text-align: center; }
      .modal-actions { flex-direction: column; align-items: stretch; gap: 10px; }
      .modal-actions .share-btn { width: 100%; }

      .profile-modal h1 { font-size: 1.9rem; margin-bottom: 26px; }
      .profile-modal-hint { margin: -12px 0 22px; }
      .profiles-grid { gap: 18px; }
      .profile-tile { width: 106px; }
      .profile-tile img { width: 96px; height: 96px; }
      .add-profile-box { width: 96px; height: 96px; font-size: 2.4rem; }

      body { padding-bottom: calc(60px + env(safe-area-inset-bottom) + var(--cookie-bar-h, 0px)); }
    }

    /* ============================================================
       RWD - małe telefony (<= 480px)
       ============================================================ */
    @media (max-width: 480px) {
      .menu-btn-label { display: none; }
      .brand-logo { height: 30px; }
      .install-btn { padding: 8px 10px; }
      .install-btn-label { display: none; }

      #heroBanner { min-height: 62vh; }
      .hero-title { font-size: 1.6rem; }
      .hero-desc { -webkit-line-clamp: 3; }
      .hero-buttons { flex-direction: column; align-items: stretch; gap: 10px; }
      .btn-play, .btn-yt { justify-content: center; width: 100%; }

      .movie-card { flex: 0 0 140px; }
      .full-grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); }
      .modal-title-row { font-size: 1.2rem; }
      .progress-bar-container { margin-top: 4px; }
    }

    /* ============================================================
       RWD - bardzo małe ekrany (<= 360px)
       ============================================================ */
    @media (max-width: 360px) {
      .brand-logo { height: 26px; }
      .movie-card { flex: 0 0 126px; }
      .full-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
    }

    /* Tryb poziomy na niskich ekranach - hero nie zajmuje całej wysokości. */
    @media (max-height: 520px) and (orientation: landscape) {
      #heroBanner { height: auto; min-height: 100vh; padding: 60px 5% 30px; }
      .hero-desc { -webkit-line-clamp: 2; }
    }

    /* ============================================================
       Nota prawna na dole modala odtwarzacza (views/partials/player_modal.php).
       ============================================================ */
    .modal-legal {
      flex: 0 0 auto; padding: 16px 30px 20px; background: #141414;
      border-top: 1px solid var(--border); color: var(--text-muted);
      font-size: 0.78rem; line-height: 1.55; text-align: center;
    }
    .modal-legal p { max-width: 860px; margin: 0 auto; }
    .modal-legal-link {
      display: inline-block; margin-top: 8px; color: var(--text-muted);
      font-weight: 700; text-decoration: underline; transition: color 0.2s;
    }
    .modal-legal-link:hover { color: #fff; }

    /* ============================================================
       Ikonka informacyjna "i" w topbarze (views/partials/topbar.php).
       ============================================================ */
    .info-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
      background: #222; border: 1px solid #444; color: #fff;
      font-weight: 700; font-style: italic; font-size: 1.05rem; line-height: 1; cursor: pointer;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .info-btn:hover { background: #333; border-color: var(--brand-red); transform: translateY(-1px); }

    /* ============================================================
       Modal informacyjny (views/partials/info_modal.php). Korzysta z bazowych
       klas .modal / .modal-box, jedynie zwęża zawartość i formatuje treść.
       ============================================================ */
    .info-box { max-width: 640px; }
    .info-body { padding: 4px 30px 30px; }
    .info-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 16px; }
    /* Ramka o wersji beta serwisu i automatycznie pobieranych danych (okładki, opisy). */
    .info-beta {
      background: rgba(229,9,20,0.08); border: 1px solid rgba(229,9,20,0.35);
      border-radius: 6px; padding: 14px 16px; margin-bottom: 18px;
    }
    .info-beta-badge {
      display: inline-block; margin-bottom: 10px; padding: 2px 8px; border-radius: 3px;
      background: var(--brand-red); color: #fff;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 1px;
    }
    .info-beta .info-text:last-child { margin-bottom: 0; }
    .info-text { color: #d2d2d2; font-size: 0.95rem; line-height: 1.6; margin-bottom: 12px; }
    .info-text a { color: #fff; }
    .info-text-muted { color: var(--text-muted); font-size: 0.85rem; }
    .info-actions {
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
      margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
    }
    .info-legal { flex: 1 1 260px; color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; }
    .info-legal a { color: #fff; }

    /* ============================================================
       Toast - krótki komunikat zwrotny (np. "Link skopiowany do schowka").
       Element wstawia views/partials/footer.php, treść ustawia app.js. Wyświetlany nad
       modalem odtwarzacza (1000) i paskiem cookies (900), ale pod modalem profili (3000);
       unosi się nad paskiem cookies dzięki zmiennej --cookie-bar-h.
       ============================================================ */
    .toast {
      position: fixed; left: 50%; bottom: calc(24px + var(--cookie-bar-h, 0px));
      transform: translate(-50%, 12px);
      z-index: 2500; max-width: min(90vw, 420px); text-align: center;
      background: #232323; border: 1px solid var(--border); color: #fff;
      padding: 12px 20px; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
      box-shadow: 0 12px 30px rgba(0,0,0,0.6);
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }
    .toast[hidden] { display: none; }

    /* ============================================================
       Pasek informacyjny o cookies / danych wysyłanych do YouTube
       (views/partials/cookie_bar.php). Przyklejony do dołu ekranu; jego wysokość
       trafia do zmiennej --cookie-bar-h (patrz reguły body { padding-bottom }),
       dzięki czemu treść i stopka nie chowają się pod paskiem. z-index poniżej
       modali (1000), aby nie zasłaniał noty prawnej na dole modala odtwarzacza.
       ============================================================ */
    .cookie-bar {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
      padding: 10px 4% calc(10px + env(safe-area-inset-bottom));
      background: #1f1f1f; border-top: 1px solid var(--border);
      color: var(--text-muted); font-size: 0.82rem; line-height: 1.45;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.55);
      max-height: 45vh; overflow-y: auto;
    }
    .cookie-bar[hidden] { display: none; }
    .cookie-bar-text { flex: 1 1 320px; margin: 0; }
    .cookie-bar-link { color: #fff; text-decoration: underline; }
    .cookie-bar-accept {
      flex: 0 0 auto; background: var(--brand-red); color: #fff; border: none;
      padding: 8px 18px; border-radius: 4px; font-size: 0.85rem; font-weight: 700;
      white-space: nowrap; cursor: pointer; transition: background 0.2s;
    }
    .cookie-bar-accept:hover { background: var(--brand-red-hover); }

    /* ============================================================
       Strona polityki prywatności (privacy.php).
       ============================================================ */
    .legal-body {
      background: var(--bg); color: var(--text); padding-bottom: 60px;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .legal-header {
      position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
      justify-content: space-between; gap: 16px; flex-wrap: wrap;
      padding: 14px 4%; background: #141414; border-bottom: 1px solid var(--border);
    }
    .legal-brand { display: inline-flex; align-items: center; text-decoration: none; }
    .legal-back { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 700; transition: color 0.2s; }
    .legal-back:hover { color: #fff; }
    .legal-main { max-width: 820px; margin: 0 auto; padding: 40px 5% 20px; }
    .legal-main h1 { font-size: 2rem; margin-bottom: 8px; }
    .legal-main h2 { font-size: 1.2rem; margin: 28px 0 10px; color: #fff; }
    .legal-main p, .legal-main li { color: var(--text-muted); line-height: 1.7; font-size: 0.95rem; }
    .legal-main p { margin-bottom: 12px; }
    .legal-main ul { margin: 0 0 12px 22px; }
    .legal-main li { margin-bottom: 6px; }
    .legal-main a, .legal-footer a { color: #fff; }
    .legal-main code { background: #232323; padding: 1px 6px; border-radius: 4px; font-size: 0.85em; }
    .legal-updated { color: #808080; font-size: 0.85rem; margin-bottom: 24px; }
    .legal-footer { max-width: 820px; margin: 0 auto; padding: 20px 5% 0; border-top: 1px solid var(--border); }
    .legal-footer p { color: var(--text-muted); font-size: 0.82rem; line-height: 1.6; }

    /* ============================================================
       RWD - nowe elementy na małych ekranach (<= 768px).
       ============================================================ */
    @media (max-width: 768px) {
      .modal-legal { padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); }
      .info-body { padding: 4px 20px calc(24px + env(safe-area-inset-bottom)); }
      .cookie-bar { padding: 10px 5% calc(10px + env(safe-area-inset-bottom)); font-size: 0.78rem; }
      .cookie-bar-accept { width: 100%; }
      .legal-main { padding: 28px 5% 16px; }
      .legal-main h1 { font-size: 1.6rem; }
    }