/*
 * VueBox tablet landscape layout.
 * This file only applies after pwa-core marks the shell as a tablet profile.
 */

@media (orientation: landscape) {
  html.vuebox-tablet-layout {
    --vb-tablet-safe-top: env(safe-area-inset-top, 0px);
    --vb-tablet-safe-bottom: env(safe-area-inset-bottom, 0px);
    --vb-tablet-pad-x: clamp(28px, 4vw, 58px);
    --vb-tablet-touch: 56px;
    --vb-tablet-profile-space: calc(max(22px, env(safe-area-inset-left, 0px)) + 96px);
    --vb-tablet-logo-space: calc(max(22px, env(safe-area-inset-right, 0px)) + 88px);
    --vb-tablet-home-top: calc(var(--vb-tablet-safe-top) + 110px);
  }

  html.vuebox-tablet-layout,
  html.vuebox-tablet-layout body {
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  html.vuebox-tablet-layout button,
  html.vuebox-tablet-layout input,
  html.vuebox-tablet-layout [tabindex],
  html.vuebox-tablet-layout .menu-item {
    touch-action: manipulation;
  }

  html.vuebox-tablet-layout .topbar {
    box-sizing: border-box !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-height: calc(var(--vb-tablet-safe-top) + 104px) !important;
    padding: var(--vb-tablet-safe-top) var(--vb-tablet-logo-space) 16px var(--vb-tablet-profile-space) !important;
    justify-content: center !important;
    align-items: flex-end !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .94), rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  html.vuebox-tablet-layout .menu {
    flex: 0 1 auto !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: var(--vb-tablet-pad-x);
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout .menu-item {
    flex: 0 0 auto !important;
    min-height: 50px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-size: clamp(1.24rem, 1.9vw, 1.42rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html.vuebox-tablet-layout .topbar.focused .menu-item.active,
  html.vuebox-tablet-layout .topbar.focused .menu-item:focus,
  html.vuebox-tablet-layout .menu-item.active,
  html.vuebox-tablet-layout .menu-item.selected {
    transform: none !important;
  }

  html.vuebox-tablet-layout .logo-right {
    position: absolute !important;
    right: max(22px, env(safe-area-inset-right, 0px)) !important;
    bottom: 18px !important;
    width: 62px !important;
    height: 62px !important;
  }

  html.vuebox-tablet-layout .profile-switcher {
    left: max(22px, env(safe-area-inset-left, 0px)) !important;
    top: calc(var(--vb-tablet-safe-top) + 22px) !important;
    width: 72px !important;
    height: 72px !important;
    z-index: 5 !important;
  }

  html.vuebox-tablet-layout .profile-switcher .profile-avatar {
    width: 56px !important;
    height: 56px !important;
    font-size: 21px !important;
  }

  html.vuebox-tablet-layout .profile-gate {
    align-items: center !important;
    padding: calc(var(--vb-tablet-safe-top) + 26px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 26px) !important;
    overflow: hidden auto !important;
  }

  html.vuebox-tablet-layout .profile-panel {
    width: min(980px, 92vw) !important;
    max-height: none !important;
    gap: 18px !important;
  }

  html.vuebox-tablet-layout .profile-title {
    font-size: clamp(42px, 7.4vh, 60px) !important;
  }

  html.vuebox-tablet-layout .profile-subtitle {
    font-size: clamp(16px, 2.6vh, 20px) !important;
  }

  html.vuebox-tablet-layout .profile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  html.vuebox-tablet-layout .profile-card {
    min-height: 190px !important;
    padding: 18px 14px !important;
  }

  html.vuebox-tablet-layout .profile-card-language {
    font-size: 13px !important;
  }

  html.vuebox-tablet-layout .profile-form {
    gap: 16px !important;
    padding: 20px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.vuebox-tablet-layout .profile-input {
    min-height: 54px !important;
    font-size: 22px !important;
  }

  html.vuebox-tablet-layout .profile-avatar-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html.vuebox-tablet-layout .profile-avatar-option {
    min-height: auto !important;
    aspect-ratio: 1 / .9 !important;
    padding: 8px !important;
  }

  html.vuebox-tablet-layout .profile-avatar-option .profile-avatar {
    width: min(100%, 66px) !important;
    height: min(100%, 66px) !important;
    max-width: calc(100% - 6px) !important;
    max-height: calc(100% - 6px) !important;
    font-size: 26px !important;
  }

  html.vuebox-tablet-layout .menu-content {
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .menu-content.home-dashboard-shell {
    overflow: hidden auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-padding-top: calc(var(--vb-tablet-home-top) + 8px) !important;
  }

  html.vuebox-tablet-layout .home-dashboard {
    align-content: start !important;
    padding: var(--vb-tablet-home-top) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 6vh) !important;
    gap: 2.4vh !important;
  }

  html.vuebox-tablet-layout .watch-btn,
  html.vuebox-tablet-layout .detail-action,
  html.vuebox-tablet-layout .home-library-action,
  html.vuebox-tablet-layout .download-action,
  html.vuebox-tablet-layout .season-tab,
  html.vuebox-tablet-layout .home-season-tab,
  html.vuebox-tablet-layout .home-episode-download-btn,
  html.vuebox-tablet-layout .downloads-tab,
  html.vuebox-tablet-layout .audio-btn {
    min-height: 48px !important;
  }

  html.vuebox-tablet-layout #moviesApp .movies-rows,
  html.vuebox-tablet-layout #tvShowsApp .movies-rows {
    padding: 18.2vh 0 5.5vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #moviesApp .movie-row,
  html.vuebox-tablet-layout #tvShowsApp .movie-row {
    min-height: 39vh !important;
    padding-bottom: 1.4vh !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-row.is-featured-row,
  html.vuebox-tablet-layout #tvShowsApp .movie-row.is-featured-row {
    min-height: 40vh !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-row.is-large-poster-row,
  html.vuebox-tablet-layout #tvShowsApp .movie-row.is-large-poster-row {
    min-height: 54vh !important;
  }

  html.vuebox-tablet-layout #moviesApp .row-scroller,
  html.vuebox-tablet-layout #tvShowsApp .row-scroller {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--vb-tablet-pad-x);
  }

  html.vuebox-tablet-layout #moviesApp .row-track,
  html.vuebox-tablet-layout #tvShowsApp .row-track {
    gap: 1.05vw !important;
    padding: .7vh 2.2vw 1.2vh !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-row-title,
  html.vuebox-tablet-layout #tvShowsApp .movie-row-title {
    height: 4vh !important;
    padding-left: 2.2vw !important;
    font-size: 2.75vh !important;
    line-height: 4vh !important;
  }

  html.vuebox-tablet-layout #moviesApp .section-search-btn,
  html.vuebox-tablet-layout #tvShowsApp .section-search-btn {
    top: 13.1vh !important;
    left: 2.2vw !important;
    min-height: 5.7vh !important;
    padding: 0 1.55vw !important;
    font-size: 2.2vh !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card,
  html.vuebox-tablet-layout #tvShowsApp .movie-card {
    width: 13.1vw !important;
    min-width: 13.1vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-landscape,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-landscape {
    width: 22.7vw !important;
    min-width: 22.7vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-large-portrait:not(.is-focused),
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-large-portrait:not(.is-focused) {
    width: 18vw !important;
    min-width: 18vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-large-portrait.is-focused,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-large-portrait.is-focused {
    width: 76vw !important;
    min-width: 76vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-ranked,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-ranked {
    padding-left: 7vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-ranked.is-large-portrait:not(.is-focused),
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-ranked.is-large-portrait:not(.is-focused) {
    width: 25vw !important;
    min-width: 25vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-ranked.is-large-portrait.is-focused,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-ranked.is-large-portrait.is-focused {
    width: 82vw !important;
    min-width: 82vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-large-portrait.is-focused .poster-frame,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-large-portrait.is-focused .poster-frame {
    flex: 0 0 25vw !important;
    width: 25vw !important;
    height: 57vh !important;
    aspect-ratio: auto !important;
  }

  html.vuebox-tablet-layout #moviesApp .rank-img,
  html.vuebox-tablet-layout #tvShowsApp .rank-img {
    left: .15vw !important;
    top: .5vh !important;
    width: 8.2vw !important;
    height: 43vh !important;
    opacity: .68 !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-ranked.is-focused .rank-img,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-ranked.is-focused .rank-img {
    top: 1.5vh !important;
    width: 7.4vw !important;
    height: 56vh !important;
    opacity: .52 !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-continue:not(.is-focused),
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-continue:not(.is-focused) {
    width: 28.6vw !important;
    min-width: 28.6vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-focused,
  html.vuebox-tablet-layout #moviesApp .movie-card.is-landscape.is-focused,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-focused,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-landscape.is-focused {
    width: 43.5vw !important;
    min-width: 43.5vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card img.poster-img,
  html.vuebox-tablet-layout #tvShowsApp .movie-card img.poster-img {
    position: relative !important;
    z-index: 1 !important;
    opacity: 1 !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-continue .poster-frame,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-continue .poster-frame {
    position: relative !important;
    isolation: isolate;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-continue .poster-logo,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-continue .poster-logo,
  html.vuebox-tablet-layout #moviesApp .movie-card.is-continue .poster-title-fallback,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-continue .poster-title-fallback {
    position: absolute !important;
    z-index: 8 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    filter: drop-shadow(0 .3vh .6vh rgba(0, 0, 0, .72)) !important;
  }

  html.vuebox-tablet-layout #moviesApp .modal .details-copy,
  html.vuebox-tablet-layout #tvShowsApp .modal .details-copy {
    left: 6vw !important;
    top: 18vh !important;
    width: 58vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .details-close,
  html.vuebox-tablet-layout #tvShowsApp .details-close,
  html.vuebox-tablet-layout #tvShowsApp .episodes-top-close {
    left: 4vw !important;
    top: 4vh !important;
    width: 7vh !important;
    min-width: 7vh !important;
    height: 7vh !important;
    min-height: 7vh !important;
  }

  html.vuebox-tablet-layout #tvShowsApp .episodes-layout {
    grid-template-columns: minmax(32vw, 38vw) 1fr !important;
    gap: 4vw !important;
    padding: 12vh 5vw 7vh !important;
  }

  html.vuebox-tablet-layout #tvShowsApp .episodes-head {
    max-height: none !important;
    overflow: visible !important;
  }

  html.vuebox-tablet-layout #tvShowsApp .episodes-title {
    font-size: 5vh !important;
    line-height: 5.55vh !important;
  }

  html.vuebox-tablet-layout #tvShowsApp .episodes-desc {
    max-height: 20vh !important;
    font-size: 2.35vh !important;
    line-height: 3.25vh !important;
  }

  html.vuebox-tablet-layout #tvShowsApp .season-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #tvShowsApp .episode-list {
    height: 64vh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #tvShowsApp .episode-card {
    grid-template-columns: 17vw minmax(0, 1fr) !important;
    min-height: 17vh !important;
    border-radius: .55vh !important;
  }

  html.vuebox-tablet-layout #tvShowsApp .episode-thumb {
    width: 17vw !important;
  }

  html.vuebox-tablet-layout .home-library-details-copy {
    left: 6vw !important;
    top: 18vh !important;
    width: 58vw !important;
  }

  html.vuebox-tablet-layout .home-library-close,
  html.vuebox-tablet-layout .home-episodes-top-close {
    left: 4vw !important;
    top: 4vh !important;
    width: 7vh !important;
    min-width: 7vh !important;
    height: 7vh !important;
    min-height: 7vh !important;
  }

  html.vuebox-tablet-layout .home-episodes-layout {
    grid-template-columns: minmax(32vw, 38vw) 1fr !important;
    gap: 4vw !important;
    padding: 12vh 5vw 7vh !important;
  }

  html.vuebox-tablet-layout .home-episodes-head {
    max-height: none !important;
    overflow: visible !important;
  }

  html.vuebox-tablet-layout .home-episodes-title {
    font-size: 5vh !important;
    line-height: 5.55vh !important;
  }

  html.vuebox-tablet-layout .home-episodes-desc {
    max-height: 20vh !important;
    font-size: 2.35vh !important;
    line-height: 3.25vh !important;
  }

  html.vuebox-tablet-layout .home-season-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout .home-episode-list {
    height: 64vh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout .home-episode-card {
    grid-template-columns: 17vw minmax(0, 1fr) !important;
    min-height: 17vh !important;
    border-radius: .55vh !important;
  }

  html.vuebox-tablet-layout .home-episode-thumb {
    width: 17vw !important;
  }

  html.vuebox-tablet-layout .home-episode-download-btn {
    width: auto !important;
    min-width: 12vw !important;
    max-width: 100% !important;
    min-height: 4.6vh !important;
    margin-top: 1vh !important;
    padding: 0 1.35vw !important;
    border-radius: 999px !important;
    font-size: 1.78vh !important;
  }

  html.vuebox-tablet-layout #moviesApp .player-top,
  html.vuebox-tablet-layout #tvShowsApp .player-top,
  html.vuebox-tablet-layout #downloadsApp .player-top {
    left: var(--vb-tablet-pad-x) !important;
    right: var(--vb-tablet-pad-x) !important;
    top: calc(var(--vb-tablet-safe-top) + 24px) !important;
  }

  html.vuebox-tablet-layout #moviesApp #moviesPlayerClose,
  html.vuebox-tablet-layout #tvShowsApp #moviesPlayerClose,
  html.vuebox-tablet-layout #downloadsApp #downloadsPlayerClose,
  html.vuebox-tablet-layout #livePlayerModal .livetv-player-back,
  html.vuebox-tablet-layout #sportsApp.is-player-fullscreen .sports-player-close,
  html.vuebox-tablet-layout .gaming-app[data-view="streams"] .gaming-player-close {
    display: inline-flex !important;
    width: var(--vb-tablet-touch) !important;
    min-width: var(--vb-tablet-touch) !important;
    height: var(--vb-tablet-touch) !important;
    min-height: var(--vb-tablet-touch) !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  html.vuebox-tablet-layout #moviesApp .player-bottom,
  html.vuebox-tablet-layout #tvShowsApp .player-bottom,
  html.vuebox-tablet-layout #downloadsApp .player-bottom {
    left: var(--vb-tablet-pad-x) !important;
    right: var(--vb-tablet-pad-x) !important;
    bottom: calc(var(--vb-tablet-safe-bottom) + 42px) !important;
  }

  html.vuebox-tablet-layout #moviesApp .player-progress,
  html.vuebox-tablet-layout #tvShowsApp .player-progress,
  html.vuebox-tablet-layout #downloadsApp .player-progress {
    min-height: 24px !important;
  }

  html.vuebox-tablet-layout #moviesApp .audio-row,
  html.vuebox-tablet-layout #tvShowsApp .audio-row,
  html.vuebox-tablet-layout #downloadsApp .audio-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    max-height: 28vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #moviesApp .option-buttons,
  html.vuebox-tablet-layout #tvShowsApp .option-buttons,
  html.vuebox-tablet-layout #downloadsApp .option-buttons {
    gap: 8px !important;
  }

  html.vuebox-tablet-layout #downloadsApp .downloads-shell {
    inset: calc(var(--vb-tablet-safe-top) + 104px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 38px) !important;
    gap: 16px !important;
    z-index: 2 !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-root-view .downloads-shell {
    inset: calc(var(--vb-tablet-safe-top) + 112px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 38px) !important;
  }

  html.vuebox-tablet-layout #downloadsApp::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: var(--downloads-show-backdrop, none) !important;
    background-position: center !important;
    background-size: cover !important;
    opacity: 0 !important;
    transform: scale(1.04) !important;
    transition: opacity .2s ease !important;
    pointer-events: none !important;
  }

  html.vuebox-tablet-layout #downloadsApp::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
      linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.72) 34%, rgba(0,0,0,.88)),
      linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.94)) !important;
    pointer-events: none !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view::before {
    opacity: .32 !important;
  }

  html.vuebox-tablet-layout #downloadsApp .player-modal,
  html.vuebox-tablet-layout #downloadsApp .download-confirm {
    z-index: 2147481200 !important;
  }

  html.vuebox-tablet-layout #downloadsApp .downloads-head {
    gap: 14px !important;
  }

  html.vuebox-tablet-layout #downloadsApp .downloads-title {
    font-size: clamp(2.35rem, 6vh, 3.25rem) !important;
    line-height: 1 !important;
  }

  html.vuebox-tablet-layout #downloadsApp .downloads-tabs {
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #downloadsApp .downloads-tab {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 26px !important;
    border-radius: 999px !important;
    font-size: 1.08rem !important;
  }

  html.vuebox-tablet-layout #downloadsApp .downloads-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px 18px !important;
    padding: 4px 2px 42px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #downloadsApp .download-card {
    min-width: 0 !important;
    border-radius: 8px !important;
  }

  html.vuebox-tablet-layout #downloadsApp .download-poster {
    border-radius: 8px !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.34) !important;
  }

  html.vuebox-tablet-layout #downloadsApp .download-card:focus .download-poster,
  html.vuebox-tablet-layout #downloadsApp .download-card.is-focused .download-poster {
    transform: none !important;
    box-shadow: 0 0 0 3px #fff, 0 18px 38px rgba(0,0,0,.44) !important;
  }

  html.vuebox-tablet-layout #downloadsApp .download-badge {
    left: 10px !important;
    bottom: 10px !important;
    max-width: calc(100% - 20px) !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: .86rem !important;
  }

  html.vuebox-tablet-layout #downloadsApp .download-copy {
    padding-top: 10px !important;
  }

  html.vuebox-tablet-layout #downloadsApp .download-name {
    font-size: 1.06rem !important;
    line-height: 1.24 !important;
  }

  html.vuebox-tablet-layout #downloadsApp .download-meta,
  html.vuebox-tablet-layout #downloadsApp .download-size {
    font-size: .88rem !important;
    line-height: 1.3 !important;
  }

  html.vuebox-tablet-layout #downloadsApp .download-actions {
    gap: 8px !important;
    margin-top: 10px !important;
  }

  html.vuebox-tablet-layout #downloadsApp .download-action {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: .92rem !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .downloads-show.is-open {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 30vw) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 20px 32px !important;
    padding: calc(var(--vb-tablet-safe-top) + 116px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 36px) !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .downloads-head {
    position: absolute !important;
    left: var(--vb-tablet-pad-x) !important;
    top: calc(var(--vb-tablet-safe-top) + 24px) !important;
    z-index: 10 !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .downloads-back {
    display: inline-flex !important;
    width: var(--vb-tablet-touch) !important;
    min-width: var(--vb-tablet-touch) !important;
    height: var(--vb-tablet-touch) !important;
    min-height: var(--vb-tablet-touch) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    color: transparent !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .downloads-back::before {
    content: "X" !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .downloads-back:focus::before,
  html.vuebox-tablet-layout #downloadsApp.is-show-view .downloads-back:hover::before {
    color: #111 !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .downloads-title {
    display: none !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .show-hero {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding-bottom: 12px !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .show-poster {
    width: min(16vw, 190px) !important;
    max-height: 25vh !important;
    margin-bottom: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 22px 58px rgba(0,0,0,.5) !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .show-title {
    margin: 0 0 10px !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    font-size: clamp(2rem, 5.3vh, 3.3rem) !important;
    line-height: 1.04 !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .show-meta {
    font-size: 1.08rem !important;
    line-height: 1.35 !important;
    color: rgba(255,255,255,.74) !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .season-tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    min-height: 52px !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .season-tabs::-webkit-scrollbar {
    display: none;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .season-tab {
    min-height: 48px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .episode-list {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: auto !important;
    min-height: 0 !important;
    padding-right: 4px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #downloadsApp .episode-card {
    grid-template-columns: clamp(160px, 20vw, 220px) minmax(0, 1fr) auto !important;
    gap: 16px !important;
    min-height: clamp(128px, 17vh, 162px) !important;
    margin-bottom: 12px !important;
    padding: 10px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }

  html.vuebox-tablet-layout #downloadsApp .episode-card:focus,
  html.vuebox-tablet-layout #downloadsApp .episode-card.is-focused {
    background: #fff !important;
    color: #111 !important;
  }

  html.vuebox-tablet-layout #downloadsApp .episode-thumb {
    width: clamp(160px, 20vw, 220px) !important;
    border-radius: 7px !important;
  }

  html.vuebox-tablet-layout #downloadsApp .episode-title {
    font-size: 1.18rem !important;
    line-height: 1.25 !important;
  }

  html.vuebox-tablet-layout #downloadsApp .episode-meta,
  html.vuebox-tablet-layout #downloadsApp .episode-size {
    font-size: .92rem !important;
    line-height: 1.35 !important;
  }

  html.vuebox-tablet-layout #downloadsApp .episode-desc {
    -webkit-line-clamp: 2 !important;
    font-size: .96rem !important;
    line-height: 1.38 !important;
  }

  html.vuebox-tablet-layout #downloadsApp .episode-actions {
    min-width: 96px !important;
  }

  html.vuebox-tablet-layout #livetvApp .guide-viewport,
  html.vuebox-tablet-layout #livetvApp .category-list,
  html.vuebox-tablet-layout #livetvApp .search-list,
  html.vuebox-tablet-layout #sportsApp .side-games,
  html.vuebox-tablet-layout #sportsApp .side-games-wrapper {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #livetvApp .live-hero {
    padding-top: calc(var(--vb-tablet-safe-top) + 112px) !important;
  }

  html.vuebox-tablet-layout #livetvApp .guide-shell {
    height: min(55vh, calc(100vh - var(--vb-tablet-safe-top) - 126px)) !important;
  }

  html.vuebox-tablet-layout #livetvApp .guide-action {
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: clamp(1rem, 1.45vw, 1.12rem) !important;
  }

  html.vuebox-tablet-layout #livePlayerModal .livetv-player-back,
  html.vuebox-tablet-layout #livePlayerModal .livetv-player-cast {
    top: calc(var(--vb-tablet-safe-top) + 24px) !important;
  }

  html.vuebox-tablet-layout #livePlayerModal .livetv-player-back {
    left: var(--vb-tablet-pad-x) !important;
  }

  html.vuebox-tablet-layout #livePlayerModal .livetv-player-cast {
    left: calc(var(--vb-tablet-pad-x) + var(--vb-tablet-touch) + 14px) !important;
  }

  html.vuebox-tablet-layout #sportsApp .sports-shell {
    padding: calc(var(--vb-tablet-safe-top) + 128px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 38px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 32vw) !important;
  }

  html.vuebox-tablet-layout #sportsApp.is-player-fullscreen .sports-shell {
    padding: 0 !important;
  }

  html.vuebox-tablet-layout #sportsApp .sports-player-close {
    left: var(--vb-tablet-pad-x) !important;
    top: calc(var(--vb-tablet-safe-top) + 24px) !important;
  }

  html.vuebox-tablet-layout .gaming-app .gaming-shell {
    padding-top: calc(var(--vb-tablet-safe-top) + 118px) !important;
  }

  html.vuebox-tablet-layout .gaming-app[data-view="streams"] .player-panel,
  html.vuebox-tablet-layout #menu-content .gaming-app[data-view="streams"] .player-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    border-radius: 0 !important;
  }

  html.vuebox-tablet-layout .gaming-app[data-view="streams"] .gaming-player-close {
    left: var(--vb-tablet-pad-x) !important;
    top: calc(var(--vb-tablet-safe-top) + 24px) !important;
  }

  html.vuebox-tablet-layout .screen .showcase-topbar {
    height: calc(var(--vb-tablet-safe-top) + 96px) !important;
    padding: var(--vb-tablet-safe-top) var(--vb-tablet-pad-x) 18px !important;
  }

  html.vuebox-tablet-layout .screen .back-btn {
    min-height: var(--vb-tablet-touch) !important;
    padding: 0 22px !important;
    font-size: 18px !important;
  }

  html.vuebox-tablet-layout .screen .rail {
    height: min(34vh, 270px) !important;
  }

  html.vuebox-tablet-layout .screen .rail-inner {
    gap: 16px !important;
    padding: 16px var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 18px) !important;
  }

  html.vuebox-tablet-layout .screen .rail-item {
    width: clamp(220px, 28vw, 330px) !important;
  }

  html.vuebox-tablet-layout .screen .thumb {
    height: clamp(130px, 19vh, 190px) !important;
  }
}

@media (orientation: landscape) {
  html.vuebox-tablet-layout .profile-gate {
    align-items: center !important;
    padding: calc(var(--vb-tablet-safe-top) + 22px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 22px) !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-panel {
    width: min(1180px, 94vw) !important;
    max-height: calc(100vh - 44px) !important;
    gap: 16px !important;
  }

  html.vuebox-tablet-layout .profile-brand {
    width: clamp(150px, 19vh, 205px) !important;
    height: clamp(42px, 5.8vh, 58px) !important;
    margin: 0 auto 1.4vh !important;
    justify-content: center !important;
  }

  html.vuebox-tablet-layout .profile-list-layout {
    display: block !important;
  }

  html.vuebox-tablet-layout .profile-title {
    width: min(100%, 900px) !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
    font-size: clamp(36px, 6.1vh, 58px) !important;
    text-align: center !important;
  }

  html.vuebox-tablet-layout .profile-head {
    display: block !important;
    text-align: center !important;
  }

  html.vuebox-tablet-layout .profile-subtitle {
    margin-top: 8px !important;
    font-size: clamp(14px, 2vh, 19px) !important;
  }

  html.vuebox-tablet-layout .profile-grid {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: clamp(12px, 2vw, 24px) !important;
  }

  html.vuebox-tablet-layout .profile-stack-item {
    position: relative !important;
    width: clamp(124px, 12.4vw, 160px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 9px !important;
  }

  html.vuebox-tablet-layout .profile-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.vuebox-tablet-layout .profile-card:focus,
  html.vuebox-tablet-layout .profile-card:hover {
    transform: translateY(-4px) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.vuebox-tablet-layout .profile-card .profile-avatar {
    width: clamp(104px, 11vw, 144px) !important;
    height: clamp(104px, 11vw, 144px) !important;
    border-radius: 8px !important;
    --profile-avatar-img-size: 80%;
  }

  html.vuebox-tablet-layout .profile-card:focus .profile-avatar,
  html.vuebox-tablet-layout .profile-card:hover .profile-avatar {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.72), 0 0 0 4px rgba(255,255,255,.22), 0 22px 50px rgba(0,0,0,.48) !important;
  }

  html.vuebox-tablet-layout .profile-card-name,
  html.vuebox-tablet-layout .profile-card-language,
  html.vuebox-tablet-layout .profile-card-note {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  html.vuebox-tablet-layout .profile-card-name {
    font-size: clamp(15px, 2.1vh, 21px) !important;
    line-height: 1.08 !important;
  }

  html.vuebox-tablet-layout .profile-card-language {
    margin-top: -3px !important;
    font-size: clamp(11px, 1.35vh, 13px) !important;
  }

  html.vuebox-tablet-layout .profile-card-note {
    font-size: clamp(11px, 1.3vh, 13px) !important;
  }

  html.vuebox-tablet-layout .profile-card-edit {
    position: absolute !important;
    top: clamp(4px, .8vh, 8px) !important;
    right: clamp(2px, .5vh, 6px) !important;
    z-index: 3 !important;
    width: clamp(30px, 4.3vh, 40px) !important;
    height: clamp(30px, 4.3vh, 40px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(.86) !important;
    background: rgba(0,0,0,.74) !important;
    color: #fff !important;
  }

  html.vuebox-tablet-layout .profile-card-edit::after {
    content: attr(data-profile-edit-text) !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 8px) !important;
    padding: 5px 9px !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #090b12 !important;
    font-size: clamp(10px, 1.35vh, 13px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(4px) !important;
    transition: opacity .14s ease, transform .14s ease !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.36) !important;
  }

  html.vuebox-tablet-layout .profile-stack-item:focus-within .profile-card-edit,
  html.vuebox-tablet-layout .profile-stack-item:hover .profile-card-edit {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
  }

  html.vuebox-tablet-layout .profile-card-edit:focus,
  html.vuebox-tablet-layout .profile-card-edit:hover {
    background: #fff !important;
    color: #090b12 !important;
    border-color: #fff !important;
    box-shadow: 0 0 0 5px rgba(255,255,255,.32), 0 0 0 10px rgba(0,188,255,.18), 0 18px 38px rgba(0,0,0,.48) !important;
    transform: translateY(-8px) scale(1.22) !important;
  }

  html.vuebox-tablet-layout .profile-card-edit:focus::after,
  html.vuebox-tablet-layout .profile-card-edit:hover::after {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  html.vuebox-tablet-layout .profile-card-edit:focus + .profile-card .profile-avatar,
  html.vuebox-tablet-layout .profile-card-edit:hover + .profile-card .profile-avatar {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.82), 0 0 0 5px rgba(255,255,255,.24), 0 0 0 11px rgba(0,188,255,.18), 0 18px 42px rgba(0,0,0,.44) !important;
  }

  html.vuebox-tablet-layout .profile-card-edit:focus + .profile-card,
  html.vuebox-tablet-layout .profile-card-edit:hover + .profile-card {
    transform: scale(1.04) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.vuebox-tablet-layout .profile-card.is-add {
    border: 0 !important;
    color: rgba(255,255,255,.78) !important;
  }

  html.vuebox-tablet-layout .profile-add-icon {
    width: clamp(104px, 11vw, 144px) !important;
    height: clamp(104px, 11vw, 144px) !important;
    border: 2px dashed rgba(255,255,255,.52) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.07) !important;
  }

  html.vuebox-tablet-layout .profile-card.is-add:focus .profile-add-icon,
  html.vuebox-tablet-layout .profile-card.is-add:hover .profile-add-icon {
    border-color: #fff !important;
    background: rgba(255,255,255,.13) !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 22px 50px rgba(0,0,0,.42) !important;
  }

  html.vuebox-tablet-layout .profile-spotlight {
    display: none !important;
  }

  html.vuebox-tablet-layout .profile-form {
    width: min(1120px, 94vw) !important;
    max-height: calc(100vh - 36px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-editor-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr) !important;
    min-height: 0 !important;
    height: min(89vh, 660px) !important;
  }

  html.vuebox-tablet-layout .profile-editor-controls {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto !important;
    align-content: stretch !important;
    gap: 8px !important;
    padding: clamp(14px, 2.2vh, 22px) !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-avatar-field {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html.vuebox-tablet-layout .profile-form .profile-title {
    font-size: clamp(25px, 3.8vh, 36px) !important;
  }

  html.vuebox-tablet-layout .profile-form .profile-subtitle {
    margin-top: 3px !important;
    font-size: clamp(12px, 1.65vh, 15px) !important;
  }

  html.vuebox-tablet-layout .profile-field-icon {
    display: none !important;
  }

  html.vuebox-tablet-layout .profile-field-label {
    font-size: clamp(12px, 1.7vh, 15px) !important;
  }

  html.vuebox-tablet-layout .profile-input {
    min-height: clamp(38px, 5.2vh, 44px) !important;
    font-size: clamp(16px, 2.15vh, 20px) !important;
  }

  html.vuebox-tablet-layout .profile-choice {
    min-height: clamp(36px, 4.9vh, 42px) !important;
    font-size: clamp(13px, 1.8vh, 16px) !important;
  }

  html.vuebox-tablet-layout .profile-avatar-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 4px 9px 4px 4px !important;
  }

  html.vuebox-tablet-layout .profile-avatar-option {
    height: clamp(68px, 9.8vh, 84px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 6px !important;
  }

  html.vuebox-tablet-layout .profile-avatar-option .profile-avatar {
    width: 100% !important;
    height: 100% !important;
    max-width: 72px !important;
    max-height: 72px !important;
    --profile-avatar-img-size: 82%;
  }

  html.vuebox-tablet-layout .profile-editor-avatar {
    width: min(20vw, 190px) !important;
  }

  html.vuebox-tablet-layout .profile-editor-preview {
    padding: clamp(20px, 3vw, 36px) !important;
  }

  html.vuebox-tablet-layout .profile-editor-name {
    font-size: clamp(24px, 3.4vh, 36px) !important;
  }

  html.vuebox-tablet-layout .profile-form-actions {
    margin-top: 2px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  html.vuebox-tablet-layout .profile-button {
    min-height: clamp(36px, 4.8vh, 42px) !important;
    padding: 7px 14px !important;
    font-size: clamp(12px, 1.7vh, 15px) !important;
  }

  html.vuebox-tablet-layout .profile-form-actions .profile-button-icon {
    display: none !important;
  }
}

@media (orientation: landscape) {
  html.vuebox-tablet-layout .profile-gate:not(.is-form) {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #06191d !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form)::before {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .07) 36%, rgba(3, 20, 23, .48) 64%, rgba(8, 31, 35, .90) 100%),
      var(--profile-gate-bg, url("../img/bkg_optimized.jpg")) !important;
    background-position: center center !important;
    background-size: cover !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html.vuebox-tablet-layout .profile-gate.has-dynamic-backdrop:not(.is-form)::before {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .07) 36%, rgba(3, 20, 23, .44) 64%, rgba(8, 31, 35, .80) 100%) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form)::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(3, 20, 23, .08) 48%, rgba(7, 31, 35, .74) 73%, rgba(55, 101, 104, .90) 100%) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-backdrop-layer {
    display: block !important;
    inset: 0 !important;
    background-position: center center !important;
    background-size: cover !important;
    opacity: 0 !important;
    transform: none !important;
    transition: opacity .95s linear !important;
    will-change: opacity !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-backdrop-layer.is-active {
    opacity: 1 !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-backdrop-layer.is-fading-out {
    opacity: 0 !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-panel {
    width: 100% !important;
    min-height: 100vh !important;
    max-height: none !important;
    display: block !important;
    padding: 0 !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-list {
    position: relative !important;
    z-index: 1 !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
    padding: clamp(180px, 39vh, 300px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 48px) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-brand {
    position: absolute !important;
    z-index: 2 !important;
    top: calc(var(--vb-tablet-safe-top) + 34px) !important;
    left: 50% !important;
    width: clamp(230px, 25vw, 330px) !important;
    height: clamp(62px, 7vw, 84px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateX(-50%) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-brand img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .46)) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-subtitle,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-actions,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card-edit {
    display: none !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-list-layout,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-rail {
    display: block !important;
    width: 100% !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-head {
    display: block !important;
    margin: 0 0 clamp(18px, 3vh, 30px) !important;
    text-align: center !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-title {
    width: 100% !important;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: clamp(32px, 5vh, 48px) !important;
    line-height: 1.05 !important;
    font-weight: 680 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .40) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-grid {
    width: min(1080px, 100%) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: clamp(12px, 1.8vw, 24px) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-stack-item,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-stack-item.is-manage-row {
    position: relative !important;
    width: clamp(118px, 12vw, 150px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    min-width: 0 !important;
    gap: 9px !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card:focus,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card:hover {
    transform: translateY(-4px) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card .profile-avatar,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-add-icon {
    width: clamp(108px, 10.4vw, 144px) !important;
    height: clamp(108px, 10.4vw, 144px) !important;
    border-radius: 17px !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card .profile-avatar {
    --profile-avatar-img-size: 92% !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 16px 34px rgba(0, 0, 0, .32) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card:focus .profile-avatar,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card:hover .profile-avatar {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 4px rgba(255, 255, 255, .20), 0 20px 42px rgba(0, 0, 0, .40) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-add-icon {
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    background: rgba(111, 150, 154, .78) !important;
    color: rgba(255, 255, 255, .96) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 28px rgba(0, 0, 0, .24) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-add-icon svg {
    width: 44% !important;
    height: 44% !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card.is-add:focus .profile-add-icon,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card.is-add:hover .profile-add-icon,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card.is-manage:focus .profile-add-icon,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card.is-manage:hover .profile-add-icon {
    background: rgba(128, 174, 178, .94) !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .86), 0 0 0 4px rgba(255, 255, 255, .18), 0 18px 38px rgba(0, 0, 0, .34) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card-name,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card-language {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card-name {
    color: #fff !important;
    font-size: clamp(16px, 2.4vh, 22px) !important;
    min-height: 2.06em !important;
    line-height: 1.03 !important;
    font-weight: 850 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .40) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card-language {
    margin-top: -4px !important;
    color: rgba(255, 255, 255, .62) !important;
    font-size: clamp(10px, 1.45vh, 13px) !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card-note,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-spotlight {
    display: none !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-manage:not(.is-form) .profile-card[data-profile-uid] .profile-avatar {
    box-shadow: inset 0 0 0 2px rgba(4, 201, 255, .82), 0 0 0 4px rgba(4, 201, 255, .18), 0 16px 34px rgba(0, 0, 0, .32) !important;
    animation: profileEditWiggle .42s ease-in-out infinite !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-manage:not(.is-form) .profile-stack-item:nth-child(2n) .profile-avatar {
    animation-delay: -.12s !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-manage:not(.is-form) .profile-stack-item:nth-child(3n) .profile-avatar {
    animation-delay: -.22s !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form {
    align-items: center !important;
    justify-content: center !important;
    padding: calc(var(--vb-tablet-safe-top) + 22px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 22px) !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-panel {
    width: min(900px, 92vw) !important;
    height: calc(100vh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - 44px) !important;
    max-height: none !important;
    min-height: 0 !important;
    display: grid !important;
    padding: 0 !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-form {
    height: 100% !important;
    max-height: none !important;
    display: grid !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-editor-layout {
    grid-template-columns: 1fr !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-editor-preview {
    display: none !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-editor-controls {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto !important;
    align-content: stretch !important;
    gap: 10px !important;
    padding: 22px 30px !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-title {
    font-size: clamp(28px, 4.4vh, 40px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-subtitle {
    margin-top: 3px !important;
    font-size: clamp(12px, 1.8vh, 15px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-field {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    justify-content: center !important;
    justify-items: center !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 4px 10px 4px 4px !important;
    scroll-padding: 12px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option {
    height: clamp(76px, 10vh, 96px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 7px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option .profile-avatar {
    width: 100% !important;
    height: 100% !important;
    max-width: 86px !important;
    max-height: 86px !important;
    --profile-avatar-img-size: 92% !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-form-actions {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    margin-top: 12px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-button {
    min-width: 108px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
  }
}

@media (orientation: landscape) {
  html.vuebox-tablet-layout .profile-gate.is-form .profile-form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-editor-controls {
    gap: 8px !important;
    padding: 16px 24px !important;
    grid-template-rows: auto auto auto auto auto auto auto !important;
    align-content: start !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-input {
    min-height: 40px !important;
    font-size: 18px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-choice {
    min-height: 38px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-grid {
    gap: 8px !important;
    height: 100% !important;
    max-height: min(38vh, 300px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option {
    height: clamp(64px, 8.8vh, 80px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option .profile-avatar {
    max-width: 72px !important;
    max-height: 72px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-form-actions {
    margin-top: 6px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-button {
    min-height: 38px !important;
  }
}

/* Final tablet landscape profile tuning: larger vertical presence, still bounded. */
@media (orientation: landscape) {
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-panel,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-list {
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-list {
    padding: clamp(205px, 38svh, 340px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + clamp(46px, 6.5svh, 78px)) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-brand {
    top: calc(var(--vb-tablet-safe-top) + clamp(34px, 5.2svh, 58px)) !important;
    width: clamp(250px, 27vw, 360px) !important;
    height: clamp(66px, 7.2vw, 88px) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-head {
    margin-bottom: clamp(22px, 3.3svh, 36px) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-title {
    font-size: clamp(36px, 5.6svh, 54px) !important;
    line-height: 1.03 !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-grid {
    width: min(1220px, 100%) !important;
    gap: clamp(16px, 2vw, 28px) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-stack-item,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-stack-item.is-manage-row {
    width: clamp(130px, 12.5vw, 170px) !important;
    gap: 10px !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card {
    gap: 8px !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card .profile-avatar,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-add-icon {
    width: clamp(124px, min(12.5vw, 18.5svh), 170px) !important;
    height: clamp(124px, min(12.5vw, 18.5svh), 170px) !important;
    border-radius: 18px !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card-name {
    font-size: clamp(17px, 2.55svh, 24px) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card-language {
    font-size: clamp(11px, 1.55svh, 14px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form {
    padding: calc(var(--vb-tablet-safe-top) + clamp(18px, 2.6svh, 28px)) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + clamp(18px, 2.6svh, 28px)) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-panel {
    width: min(980px, 94vw) !important;
    height: calc(100vh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(36px, 5.2svh, 56px)) !important;
    height: calc(100svh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(36px, 5.2svh, 56px)) !important;
    height: calc(100dvh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(36px, 5.2svh, 56px)) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-form {
    height: 100% !important;
    max-height: none !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-editor-controls {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto !important;
    align-content: stretch !important;
    gap: clamp(9px, 1.35svh, 12px) !important;
    padding: clamp(18px, 2.6svh, 26px) clamp(24px, 3.4vw, 38px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-title {
    font-size: clamp(30px, 4.8svh, 44px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-subtitle {
    font-size: clamp(12px, 1.9svh, 16px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-input {
    min-height: clamp(40px, 5.4svh, 48px) !important;
    font-size: clamp(17px, 2.4svh, 21px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-choice {
    min-height: clamp(38px, 5svh, 44px) !important;
    font-size: clamp(13px, 1.9svh, 16px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-grid {
    grid-template-columns: repeat(6, minmax(0, clamp(88px, 9.6vw, 124px))) !important;
    gap: clamp(9px, 1.5svh, 13px) !important;
    max-height: min(48svh, 390px) !important;
    height: 100% !important;
    justify-content: center !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option {
    height: clamp(82px, min(9.6vw, 12svh), 112px) !important;
    min-height: 0 !important;
    padding: clamp(6px, 1svh, 8px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option .profile-avatar {
    max-width: clamp(76px, min(8.5vw, 10.8svh), 104px) !important;
    max-height: clamp(76px, min(8.5vw, 10.8svh), 104px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-form-actions {
    margin-top: clamp(8px, 1.3svh, 12px) !important;
    gap: clamp(10px, 1.7vw, 16px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-button {
    min-width: clamp(106px, 11vw, 132px) !important;
    min-height: clamp(40px, 5.2svh, 46px) !important;
    font-size: clamp(13px, 1.9svh, 16px) !important;
  }
}

@media (orientation: landscape) and (max-height: 740px) {
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-list {
    padding-top: clamp(174px, 35svh, 252px) !important;
    padding-bottom: calc(var(--vb-tablet-safe-bottom) + clamp(32px, 5svh, 48px)) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-brand {
    top: calc(var(--vb-tablet-safe-top) + clamp(24px, 4.2svh, 34px)) !important;
    width: clamp(220px, 25vw, 300px) !important;
    height: clamp(58px, 6.6vw, 74px) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card .profile-avatar,
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-add-icon {
    width: clamp(108px, min(11.4vw, 17.4svh), 148px) !important;
    height: clamp(108px, min(11.4vw, 17.4svh), 148px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-editor-controls {
    gap: 8px !important;
    padding: 16px 24px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-grid {
    grid-template-columns: repeat(6, minmax(0, clamp(80px, 9vw, 106px))) !important;
    max-height: min(43svh, 318px) !important;
    gap: 8px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option {
    height: clamp(74px, min(9vw, 11svh), 94px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option .profile-avatar {
    max-width: clamp(68px, min(8vw, 10svh), 86px) !important;
    max-height: clamp(68px, min(8vw, 10svh), 86px) !important;
  }
}

/* Profile editor fit guard for iPad landscape. Keep actions visible; only avatars scroll. */
@media (orientation: landscape) {
  html.vuebox-tablet-layout .profile-gate.is-form {
    align-items: center !important;
    justify-content: center !important;
    padding: calc(var(--vb-tablet-safe-top) + clamp(22px, 3svh, 34px)) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + clamp(22px, 3svh, 34px)) !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-panel {
    width: min(980px, 94vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(44px, 6svh, 68px)) !important;
    max-height: calc(100svh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(44px, 6svh, 68px)) !important;
    max-height: calc(100dvh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(44px, 6svh, 68px)) !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-form,
  html.vuebox-tablet-layout .profile-gate.is-form .profile-editor-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: inherit !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-editor-controls {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: inherit !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto auto auto !important;
    align-content: start !important;
    gap: clamp(8px, 1.15svh, 11px) !important;
    padding: clamp(18px, 2.4svh, 26px) clamp(24px, 3.1vw, 36px) clamp(18px, 2.4svh, 26px) !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-head {
    margin: 0 !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-title {
    font-size: clamp(25px, 4svh, 34px) !important;
    line-height: 1 !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-subtitle {
    margin-top: 2px !important;
    font-size: clamp(11px, 1.55svh, 14px) !important;
    line-height: 1.15 !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-field-group {
    min-height: 0 !important;
    gap: clamp(5px, .75svh, 8px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-field-label {
    font-size: clamp(11px, 1.55svh, 14px) !important;
    line-height: 1.1 !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-input {
    min-height: clamp(35px, 4.55svh, 40px) !important;
    font-size: clamp(15px, 2svh, 18px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-choice-row {
    gap: clamp(6px, .9svh, 9px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-choice {
    min-height: clamp(32px, 4.25svh, 38px) !important;
    font-size: clamp(12px, 1.65svh, 14px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-field {
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-grid {
    grid-template-columns: repeat(6, minmax(0, clamp(84px, 9.2vw, 112px))) !important;
    align-content: start !important;
    gap: clamp(8px, 1.15svh, 11px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(44vh, 420px) !important;
    max-height: min(44svh, 420px) !important;
    max-height: min(44dvh, 420px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 3px 10px 3px 3px !important;
    scroll-padding: 10px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option {
    height: clamp(78px, min(9.2vw, 10.8svh), 100px) !important;
    min-height: 0 !important;
    padding: 6px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option .profile-avatar {
    max-width: clamp(72px, min(8.2vw, 9.8svh), 92px) !important;
    max-height: clamp(72px, min(8.2vw, 9.8svh), 92px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-form-actions {
    flex: 0 0 auto !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(10px, 1.6vw, 16px) !important;
    margin-top: clamp(10px, 1.35svh, 14px) !important;
    padding-bottom: max(4px, var(--vb-tablet-safe-bottom)) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-button {
    min-width: clamp(100px, 10vw, 124px) !important;
    min-height: clamp(36px, 4.65svh, 42px) !important;
    padding: 0 clamp(12px, 1.8vw, 16px) !important;
    font-size: clamp(12px, 1.65svh, 15px) !important;
  }
}