/* ============================================================================
   LUMO TV — TV Design Override (Clean Minimal)
   Only touches what needs to change. No generic selectors.
   ============================================================================ */

@media (min-width: 960px) {

  /* === BACKGROUND === */
  body {
    background: #0a0a0f !important;
    cursor: none !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /* === HIDE MOBILE STUFF === */
  .mobile-bottom-nav,
  .mobile-top-bar,
  #mobileMenuBtn,
  .mobile-drawer-backdrop,
  .pwa-install-banner,
  .player-cast-btn {
    display: none !important;
  }

  /* === TOP NAV === */
  .top-nav {
    background: transparent !important;
    padding: 20px 48px 20px 80px !important;
    height: 60px !important;
  }
  .nav-logo {
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 5px !important;
    text-transform: uppercase !important;
    opacity: 0.7 !important;
  }
  .nav-link {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    opacity: 0.5 !important;
  }
  .nav-link.active {
    opacity: 1 !important;
    color: #0099dd !important;
  }
  .nav-search-btn,
  .user-menu-btn,
  .greeting {
    display: none !important;
  }

  /* === SIDEBAR === */
  .sidebar {
    width: 52px !important;
    min-width: 52px !important;
    background: rgba(10,10,15,0.5) !important;
    border-radius: 0 20px 20px 0 !important;
    padding: 12px 6px !important;
    gap: 20px !important;
    backdrop-filter: blur(12px) !important;
  }
  .sidebar-item {
    font-size: 16px !important;
    opacity: 0.35 !important;
    transition: opacity 0.15s !important;
  }
  .sidebar-item:hover,
  .sidebar-item:focus {
    opacity: 0.9 !important;
  }

  /* === CONTENT SAFE ZONES === */
  .content-container,
  .grid-page-header,
  .profile-container {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .main-content,
  .content-wrapper {
    margin-left: 60px !important;
  }

  /* === HERO === */
  .hero-title {
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
  }
  .hero-description {
    opacity: 0.6 !important;
    font-weight: 300 !important;
    max-width: 480px !important;
  }
  .hero-meta {
    opacity: 0.4 !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
  }
  .hero-btn {
    border-radius: 100px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 12px 28px !important;
    letter-spacing: 0.5px !important;
  }
  .hero-btn-info {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
  }

  /* === SECTION TITLES === */
  .content-row-title,
  .section-title {
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    opacity: 0.5 !important;
  }

  /* === CARDS (portrait — movies/series) === */
  .content-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  .content-card:focus,
  .content-card:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 0 2px #0099dd !important;
    z-index: 10 !important;
  }
  .card-title {
    font-size: 12px !important;
    font-weight: 400 !important;
    opacity: 0.5 !important;
  }

  /* === CARDS (landscape — live channels) === */
  .card-landscape .card-image {
    object-fit: contain !important;
    padding: 10px !important;
  }

  /* === CATEGORY TABS === */
  .cat-tab {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    opacity: 0.4 !important;
    padding: 8px 16px !important;
    border-bottom: 2px solid transparent !important;
    white-space: nowrap !important;
  }
  .cat-tab.active {
    opacity: 1 !important;
    color: #0099dd !important;
    border-bottom-color: #0099dd !important;
    background: transparent !important;
  }
  .cat-arrow {
    display: none !important;
  }

  /* === GRID PAGE TITLE === */
  .grid-title {
    font-size: 18px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
  }

  /* === DETAIL MODAL === */
  .detail-modal {
    background: #111116 !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
  }
  .detail-title {
    font-weight: 300 !important;
  }
  .detail-btn {
    border-radius: 100px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
  }

  /* === PLAYER === */
  .player-title {
    font-weight: 400 !important;
    font-size: 15px !important;
    opacity: 0.8 !important;
  }
  .player-progress-fill {
    background: #0099dd !important;
  }
  .player-btn {
    opacity: 0.5 !important;
    transition: opacity 0.15s !important;
  }
  .player-btn:focus,
  .player-btn:hover {
    opacity: 1 !important;
  }

  /* === FOCUS RING (all focusable elements) === */
  *:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px #0099dd !important;
  }
  .carousel-item:focus,
  .content-card:focus,
  .channel-card:focus,
  .hero-btn:focus,
  .search-result-card:focus {
    transform: scale(1.05) !important;
  }

  /* === PROFILE === */
  .profile-header {
    font-weight: 300 !important;
  }
  .profile-card {
    border-color: rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
  }

  /* === SCROLLBAR HIDDEN === */
  ::-webkit-scrollbar {
    display: none !important;
  }
  * {
    scrollbar-width: none !important;
  }

  /* === BADGE CLEANUP === */
  .live-badge,
  .ao-vivo-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
  }

  /* === LOADING SKELETON === */
  .skeleton {
    background: rgba(255,255,255,0.04) !important;
  }
}