*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root { --bg: #151a29; --surface: #1c2235; --card: #202840; --border: rgba(255,255,255,0.06); --accent: #f85616; --text: #f0f0f0; --muted: #6b6b80; }
  body { background: var(--bg); color: var(--text); font-family: 'Libre Franklin', sans-serif; min-height: 100vh; }
  .page-layout { display: flex; min-height: 100vh; }
  .sidebar { width: 260px; min-width: 260px; padding: 40px 24px; border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .main-content { flex: 1; padding: 40px 32px; overflow: hidden; }
  .sidebar-logo { font-family: 'Libre Franklin', sans-serif; font-size: 1.2rem; font-weight: 900; margin-bottom: 36px; }
  .sidebar-logo span { color: var(--accent); }
  .type-tabs { display: flex; gap: 8px; margin-bottom: 32px; }
  .type-tab { flex: 1; padding: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-family: 'Libre Franklin', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; text-align: center; transition: all 0.2s; }
  .type-tab.active { background: var(--accent); border-color: var(--accent); color: #eff2ed; }
  .filter-block { margin-bottom: 28px; }
  .filter-label { font-family: 'Libre Franklin', sans-serif; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
  .filter-select { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text); font-family: 'Libre Franklin', sans-serif; font-size: 13px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b80' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.2s; }
  .filter-select:focus { border-color: var(--accent); }
  .filter-select option { background: var(--surface); }
  @media (max-width: 768px) {
    .page-layout { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--border); padding: 20px; }
    .sidebar-logo { margin-bottom: 16px; }
    .filters-row { display: flex; gap: 12px; }
    .filter-block { margin-bottom: 0; flex: 1; }
  }
  .section-title { font-family: 'Libre Franklin', sans-serif; font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 24px; }
  .section-title span { color: var(--accent); }
  .section { margin-bottom: 60px; }
  .loading { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; margin-bottom: 40px; }
  .spinner { width: 20px; height: 20px; border: 2px solid rgba(248,86,22,0.2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .search-wrap { max-width: 1100px; margin-bottom: 32px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px; align-items: center; }
  .search-field { position: relative; flex: 1 1 auto; min-width: 0; }
  .search-input { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 20px 14px 48px; color: var(--text); font-family: 'Libre Franklin', sans-serif; font-size: 15px; outline: none; transition: border-color 0.2s; }
  .search-input::placeholder { color: var(--muted); }
  .search-input:focus { border-color: var(--accent); }
  .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; pointer-events: none; }
  .sort-wrap { display: flex; gap: 8px; flex-shrink: 0; flex-direction: row; }
  .sort-select { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 36px 14px 14px; color: var(--text); font-family: 'Libre Franklin', sans-serif; font-size: 13px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b80' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.2s; }
  .sort-select:focus { border-color: var(--accent); }
  .sort-dir { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; color: var(--muted); cursor: pointer; font-size: 16px; transition: all 0.2s; line-height: 1; }
  .sort-dir:hover { border-color: var(--accent); color: var(--accent); }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; max-width: 1100px; }
  .card { background: var(--card); border-radius: 14px; overflow: hidden; cursor: pointer; border: 1px solid var(--border); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
  .card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--accent); border-color: var(--accent); }
  .card:hover .play-btn { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .card:hover .poster-img { transform: scale(1.04); filter: brightness(0.55); }
  .poster { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #1c2235; }
  .poster-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.4s ease; display: block; }
  .poster-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; background: linear-gradient(135deg, #1c2235 0%, #252d45 100%); }
  .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8); width: 56px; height: 56px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; }
  .play-btn svg { width: 22px; height: 22px; fill: #151a29; margin-left: 3px; }
  .info { padding: 14px; }
  .info h3 { font-family: 'Libre Franklin', sans-serif; font-size: 11px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* OVERLAY */
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); backdrop-filter: blur(12px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
  .overlay.active { opacity: 1; pointer-events: all; }
  .modal { width: 100%; max-width: 1200px; background: var(--surface); border-radius: 18px; overflow: hidden; border: 1px solid var(--border); transform: scale(0.92) translateY(20px); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 40px 120px rgba(0,0,0,0.8); max-height: 90vh; overflow-y: auto; }
  .overlay.active .modal { transform: scale(1) translateY(0); }
  .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
  .modal-title { font-family: 'Libre Franklin', sans-serif; font-size: 13px; font-weight: 700; }
  .modal-title span { color: var(--accent); }
  .close-btn { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; transition: background 0.2s, color 0.2s; flex-shrink: 0; }
  .close-btn:hover { background: rgba(248,86,22,0.15); color: var(--accent); }

  /* FILM INFO PAGE */
  .film-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; }
  .film-player-side { background: #000; aspect-ratio: unset; position: relative; }
  .film-player-side iframe { width: 100%; height: 100%; border: none; display: block; position: absolute; inset: 0; }
  .film-info-side { padding: 24px; overflow-y: auto; max-height: 70vh; }
  .film-info-side h2 { font-family: 'Libre Franklin', sans-serif; font-size: 1rem; font-weight: 900; margin-bottom: 12px; line-height: 1.4; }
  .film-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .film-meta-tag { padding: 4px 12px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; color: var(--muted); }
  .film-meta-tag.accent { color: var(--accent); border-color: rgba(248,86,22,0.3); background: rgba(248,86,22,0.06); }
  .film-desc { font-size: 13px; line-height: 1.7; color: rgba(240,240,240,0.7); margin-bottom: 16px; }
  .fi-extra { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
  .fi-row { display: flex; gap: 10px; font-size: 12px; }
  .fi-key { color: var(--muted); min-width: 80px; flex-shrink: 0; }
  .fi-val { color: var(--text); line-height: 1.5; }
  .fi-imdb { color: #f5c518; font-weight: 700; }
  @media (max-width: 700px) {
    .film-layout { grid-template-columns: 1fr; }
    .film-player-side { aspect-ratio: 16/9; position: relative; height: auto; }
    .film-info-side { max-height: none; }
  }

  /* PLAYER */
  .player-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
  .player-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
  .seasons-tabs { display: flex; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .season-tab { padding: 7px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 700; font-family: 'Libre Franklin', sans-serif; cursor: pointer; transition: all 0.2s; }
  .season-tab:hover, .season-tab.active { background: var(--accent); border-color: var(--accent); color: #eff2ed; }
  .episodes-wrap { padding: 14px 20px; border-top: 1px solid var(--border); }
  .episodes-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .ep-btn { padding: 8px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; font-family: 'Libre Franklin', sans-serif; }
  .ep-btn:hover, .ep-btn.active { background: var(--accent); border-color: var(--accent); color: #eff2ed; font-weight: 700; }

  @media (max-width: 600px) {
    .film-info { flex-direction: column; }
    .film-info-poster { width: 100%; aspect-ratio: 16/9; }
    .film-info-poster img { object-position: top; }
  }


/* Fix active/focus field text and background */
.litotv-kinoteka-wrap input,
.litotv-kinoteka-wrap input:focus,
.litotv-kinoteka-wrap input:active,
.litotv-kinoteka-wrap input::placeholder {
  background-color: #202840 !important;
  color: #fffdfe !important;
  -webkit-text-fill-color: #fffdfe !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.litotv-kinoteka-wrap select,
.litotv-kinoteka-wrap select:focus,
.litotv-kinoteka-wrap select:active {
  background-color: #202840 !important;
  color: #fffdfe !important;
  -webkit-text-fill-color: #fffdfe !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.litotv-kinoteka-wrap select option {
  background-color: #1c2235 !important;
  color: #fffdfe !important;
}

/* Chrome autofill fix */
.litotv-kinoteka-wrap input:-webkit-autofill,
.litotv-kinoteka-wrap input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #202840 inset !important;
  -webkit-text-fill-color: #fffdfe !important;
}

/* ===== MOBILE ONLY FIXES ===== */
@media (max-width: 768px) {

  /* 1. Search full width, sort below */
  .litotv-kinoteka-wrap #search-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .litotv-kinoteka-wrap #search-wrap > div:first-child {
    width: 100% !important;
    flex: unset !important;
  }
  .litotv-kinoteka-wrap .sort-wrap {
    width: 100% !important;
    flex-direction: row !important;
  }
  .litotv-kinoteka-wrap .sort-select {
    flex: 1 !important;
  }

  /* 2. Bigger card title + show rating */
  .litotv-kinoteka-wrap .info h3 {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
  .litotv-kinoteka-wrap .card-rating {
    display: block !important;
    font-size: 11px !important;
    color: #f85616 !important;
    font-weight: 700 !important;
  }

  /* 3. Modal player full width */
  .litotv-kinoteka-wrap .film-layout {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .litotv-kinoteka-wrap .film-player-side {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    position: relative !important;
    min-height: unset !important;
  }
  .litotv-kinoteka-wrap .film-player-side iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .litotv-kinoteka-wrap .player-wrap {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
  }
  .litotv-kinoteka-wrap .player-wrap iframe {
    width: 100% !important;
    height: 100% !important;
  }
  .litotv-kinoteka-wrap .film-info-side {
    max-height: unset !important;
    padding: 16px !important;
  }
  .litotv-kinoteka-wrap .modal {
    max-height: 95vh !important;
    border-radius: 12px !important;
  }
}

/* Hide rating on desktop */
.litotv-kinoteka-wrap .card-rating {
  display: none;
}

/* Mobile: fix player height with season/episode buttons */
@media (max-width: 768px) {
  .litotv-kinoteka-wrap .film-player-side {
    aspect-ratio: unset !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .litotv-kinoteka-wrap .film-player-side > iframe,
  .litotv-kinoteka-wrap .film-player-side > div > iframe {
    position: static !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
  }
  .litotv-kinoteka-wrap .seasons-tabs {
    order: -1 !important;
  }
  .litotv-kinoteka-wrap .episodes-wrap {
    order: 1 !important;
  }
}




/* Mobile: search and sort */
@media (max-width: 768px) {
  .litotv-kinoteka-wrap #mobile-search-placeholder {
    display: block !important;
  }
  /* Sort full width */
  .litotv-kinoteka-wrap .sort-wrap {
    width: 100% !important;
  }
  .litotv-kinoteka-wrap .sort-select {
    flex: 1 1 auto !important;
  }
}

/* Mobile search - shown only on mobile */
.litotv-kinoteka-wrap .mobile-search-only {
  display: none;
  margin-bottom: 12px;
}
.litotv-kinoteka-wrap .mobile-search-only .search-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 20px;
  color: #fffdfe;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .litotv-kinoteka-wrap .mobile-search-only {
    display: block !important;
  }
  /* Hide desktop search on mobile */
  .litotv-kinoteka-wrap #search-wrap {
    display: none !important;
  }
}