/* OnlyShows v55: reliable preference sync and tighter mobile navigation/cards. */

@media (max-width: 719px) {
  :root {
    --mobile-bottom-nav-height: 58px;
  }

  html body .mobile-bottom-nav,
  html body .mobile-bottom-nav.is-scroll-hidden {
    height: 50px !important;
    min-height: 50px !important;
    padding: 4px !important;
    gap: 4px !important;
    border-color: color-mix(in srgb, var(--outline-variant) 82%, transparent) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--surface-container-highest) 86%, var(--on-surface) 14%) !important;
    box-shadow: 0 7px 22px rgb(0 0 0 / 18%) !important;
  }

  .mobile-bottom-tab {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: var(--on-surface-variant) !important;
  }

  .mobile-tab-indicator,
  .mobile-bottom-tab.active .mobile-tab-indicator,
  .mobile-bottom-tab.is-active .mobile-tab-indicator,
  .mobile-bottom-tab[aria-selected="true"] .mobile-tab-indicator {
    width: 100% !important;
    height: 40px !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: inherit !important;
  }

  .mobile-bottom-tab.active,
  .mobile-bottom-tab.is-active,
  .mobile-bottom-tab[aria-selected="true"] {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
  }

  .mobile-tab-indicator .material-symbols-rounded {
    display: block;
    line-height: 1 !important;
    transform: translateY(-1px);
  }

  .show-grid.mobile-list-view {
    gap: 7px !important;
  }

  .mobile-list-view .show-card {
    grid-template-columns: 60px minmax(0, 1fr) !important;
    min-height: 90px !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }

  .mobile-list-view .poster-frame,
  .mobile-list-view .poster,
  .mobile-list-view .poster-placeholder {
    min-height: 90px !important;
    height: 90px !important;
    border-radius: 15px 0 0 15px !important;
  }

  .mobile-list-view .card-content {
    min-height: 90px !important;
    padding: 7px 9px 6px !important;
    gap: 2px;
  }

  .mobile-list-view .card-top {
    align-items: center;
    gap: 7px !important;
  }

  .mobile-list-view .card-top h3,
  .mobile-list-view .show-card h3 {
    font-size: 13px !important;
    line-height: 1.22;
  }

  .mobile-list-view .badge {
    font-size: 9px !important;
  }

  .mobile-list-view .card-episode-row {
    min-height: 27px;
    flex: 0 0 auto !important;
    align-items: center;
    gap: 8px !important;
  }

  .mobile-list-view .next-episode {
    padding-top: 0 !important;
    font-size: 10px !important;
  }

  .mobile-list-view .episode-name {
    margin-top: 2px;
    font-size: 10px !important;
  }

  .mobile-list-view .card-quick-watch {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    margin-top: 0 !important;
  }

  .mobile-list-view .progress-row {
    margin-top: 2px !important;
    gap: 6px !important;
    font-size: 9px !important;
  }
}