/*
 * VueBox tablet portrait layout.
 * Phone portrait keeps using mobile-portrait.css; this file is tablet-only.
 */

@media (orientation: portrait) {
  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(24px, 5vw, 54px);
    --vb-tablet-touch: 58px;
    --vb-tablet-profile-space: calc(max(22px, env(safe-area-inset-left, 0px)) + 98px);
    --vb-tablet-logo-space: calc(max(20px, env(safe-area-inset-right, 0px)) + 88px);
    --vb-tablet-home-top: calc(var(--vb-tablet-safe-top) + 116px);
  }

  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) + 108px) !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, .96), rgba(0, 0, 0, .7), 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: 52px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-size: clamp(1.24rem, 2.75vw, 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;
    margin: 0 !important;
  }

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

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

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

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

  html.vuebox-tablet-layout .profile-title {
    font-size: clamp(48px, 7.2vw, 68px) !important;
  }

  html.vuebox-tablet-layout .profile-subtitle {
    font-size: clamp(18px, 2.7vw, 22px) !important;
  }

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

  html.vuebox-tablet-layout .profile-card {
    min-height: 210px !important;
    padding: 22px 16px !important;
  }

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

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

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

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

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

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

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

  html.vuebox-tablet-layout .menu-content.home-dashboard-shell {
    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: 24px !important;
  }

  html.vuebox-tablet-layout .home-promo-grid {
    margin-right: calc(-1 * var(--vb-tablet-pad-x)) !important;
    padding-right: var(--vb-tablet-pad-x) !important;
  }

  html.vuebox-tablet-layout .home-promo-card,
  html.vuebox-tablet-layout .home-promo-card.is-primary {
    flex-basis: min(72vw, 520px) !important;
    height: 260px !important;
    min-height: 260px !important;
  }

  html.vuebox-tablet-layout .home-promo-card.is-primary .home-promo-copy {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    gap: 5px !important;
  }

  html.vuebox-tablet-layout .home-promo-card.is-primary .home-promo-title {
    display: -webkit-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: clamp(18px, 2.8vw, 24px) !important;
    line-height: 1.08 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  html.vuebox-tablet-layout .home-promo-title {
    font-size: clamp(15px, 2.2vw, 21px) !important;
    line-height: 1.06 !important;
  }

  html.vuebox-tablet-layout .home-promo-desc {
    max-width: 100% !important;
    font-size: clamp(12px, 1.8vw, 15px) !important;
    line-height: 1.28 !important;
    -webkit-line-clamp: 1 !important;
  }

  html.vuebox-tablet-layout .home-promo-meta span {
    font-size: clamp(11px, 1.6vw, 13px) !important;
  }

  html.vuebox-tablet-layout .home-promo-kicker,
  html.vuebox-tablet-layout .home-promo-action {
    min-height: 20px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1 !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: 50px !important;
  }

  html.vuebox-tablet-layout .promo-details {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    min-height: min(48vh, 520px) !important;
    padding: 0 var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 64px) !important;
    justify-content: flex-end !important;
    background: linear-gradient(to top, rgba(0, 0, 0, .88), rgba(0, 0, 0, .52), rgba(0, 0, 0, 0)) !important;
  }

  html.vuebox-tablet-layout .promo-details .app_icon {
    width: min(34vw, 230px) !important;
    height: auto !important;
  }

  html.vuebox-tablet-layout .main_text {
    max-width: 82vw !important;
    font-size: clamp(3.3rem, 9vw, 5.4rem) !important;
    line-height: .95 !important;
  }

  html.vuebox-tablet-layout .promo-title,
  html.vuebox-tablet-layout .promo-meta,
  html.vuebox-tablet-layout .promo-desc {
    max-width: 82vw !important;
  }

  html.vuebox-tablet-layout #moviesApp .movies-rows,
  html.vuebox-tablet-layout #tvShowsApp .movies-rows {
    padding: calc(var(--vb-tablet-safe-top) + 142px) 0 calc(var(--vb-tablet-safe-bottom) + 46px) !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: 34vh !important;
    padding-bottom: 16px !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-row.is-featured-row,
  html.vuebox-tablet-layout #tvShowsApp .movie-row.is-featured-row {
    min-height: 35vh !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: 48vh !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: 16px !important;
    padding-left: var(--vb-tablet-pad-x) !important;
    padding-right: var(--vb-tablet-pad-x) !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-row-title,
  html.vuebox-tablet-layout #tvShowsApp .movie-row-title {
    height: 36px !important;
    padding-left: var(--vb-tablet-pad-x) !important;
    font-size: clamp(1.2rem, 3.1vw, 1.65rem) !important;
    line-height: 36px !important;
  }

  html.vuebox-tablet-layout #moviesApp .section-search-btn,
  html.vuebox-tablet-layout #tvShowsApp .section-search-btn {
    top: calc(var(--vb-tablet-safe-top) + 102px) !important;
    left: var(--vb-tablet-pad-x) !important;
    min-height: 50px !important;
    padding: 0 22px !important;
    font-size: clamp(1rem, 2.2vw, 1.18rem) !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card,
  html.vuebox-tablet-layout #tvShowsApp .movie-card {
    width: clamp(150px, 27vw, 220px) !important;
    min-width: clamp(150px, 27vw, 220px) !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: clamp(180px, 30vw, 240px) !important;
    min-width: clamp(180px, 30vw, 240px) !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-ranked,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-ranked {
    padding-left: clamp(54px, 10vw, 82px) !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: clamp(250px, 43vw, 340px) !important;
    min-width: clamp(250px, 43vw, 340px) !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: clamp(560px, 88vw, 720px) !important;
    min-width: clamp(560px, 88vw, 720px) !important;
  }

  html.vuebox-tablet-layout #moviesApp .rank-img,
  html.vuebox-tablet-layout #tvShowsApp .rank-img {
    left: 0 !important;
    top: 8px !important;
    width: clamp(70px, 13vw, 98px) !important;
    height: clamp(260px, 42vh, 370px) !important;
    opacity: .68 !important;
  }

  html.vuebox-tablet-layout #moviesApp .movie-card.is-landscape,
  html.vuebox-tablet-layout #tvShowsApp .movie-card.is-landscape,
  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: clamp(260px, 43vw, 390px) !important;
    min-width: clamp(260px, 43vw, 390px) !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 3px 8px rgba(0, 0, 0, .72)) !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: clamp(430px, 78vw, 650px) !important;
    min-width: clamp(430px, 78vw, 650px) !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 .modal .details-copy,
  html.vuebox-tablet-layout #tvShowsApp .modal .details-copy {
    left: var(--vb-tablet-pad-x) !important;
    right: var(--vb-tablet-pad-x) !important;
    top: calc(var(--vb-tablet-safe-top) + 128px) !important;
    width: auto !important;
    max-width: 760px !important;
  }

  html.vuebox-tablet-layout #moviesApp .details-title,
  html.vuebox-tablet-layout #tvShowsApp .details-title {
    font-size: clamp(2.4rem, 6.4vw, 4.2rem) !important;
    line-height: 1.04 !important;
  }

  html.vuebox-tablet-layout #moviesApp .details-desc,
  html.vuebox-tablet-layout #tvShowsApp .details-desc {
    width: min(82vw, 760px) !important;
    max-height: 22vh !important;
    font-size: clamp(1rem, 2.55vw, 1.3rem) !important;
    line-height: 1.42 !important;
  }

  html.vuebox-tablet-layout #moviesApp .details-close,
  html.vuebox-tablet-layout #tvShowsApp .details-close,
  html.vuebox-tablet-layout #tvShowsApp .episodes-top-close {
    left: var(--vb-tablet-pad-x) !important;
    top: calc(var(--vb-tablet-safe-top) + 24px) !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;
  }

  html.vuebox-tablet-layout #tvShowsApp .episodes-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: calc(var(--vb-tablet-safe-top) + 104px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 42px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #tvShowsApp .episodes-head {
    max-height: 34vh !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout #tvShowsApp .episodes-logo {
    max-width: min(58vw, 430px) !important;
    max-height: 100px !important;
  }

  html.vuebox-tablet-layout #tvShowsApp .episodes-title {
    font-size: clamp(2.1rem, 6vw, 3.6rem) !important;
    line-height: 1.04 !important;
  }

  html.vuebox-tablet-layout #tvShowsApp .episodes-desc {
    max-height: 9.2em !important;
    font-size: clamp(1rem, 2.25vw, 1.24rem) !important;
    line-height: 1.4 !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: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #tvShowsApp .episode-card {
    grid-template-columns: clamp(210px, 34vw, 300px) minmax(0, 1fr) auto !important;
    min-height: clamp(128px, 17vh, 170px) !important;
    border-radius: 8px !important;
  }

  html.vuebox-tablet-layout #tvShowsApp .episode-thumb {
    width: clamp(210px, 34vw, 300px) !important;
  }

  html.vuebox-tablet-layout .home-library-details-copy {
    left: var(--vb-tablet-pad-x) !important;
    right: var(--vb-tablet-pad-x) !important;
    top: calc(var(--vb-tablet-safe-top) + 128px) !important;
    width: auto !important;
    max-width: 760px !important;
  }

  html.vuebox-tablet-layout .home-library-title {
    font-size: clamp(2.4rem, 6.4vw, 4.2rem) !important;
    line-height: 1.04 !important;
  }

  html.vuebox-tablet-layout .home-library-desc {
    width: min(82vw, 760px) !important;
    max-height: 22vh !important;
    font-size: clamp(1rem, 2.55vw, 1.3rem) !important;
    line-height: 1.42 !important;
  }

  html.vuebox-tablet-layout .home-library-close,
  html.vuebox-tablet-layout .home-episodes-top-close {
    left: var(--vb-tablet-pad-x) !important;
    top: calc(var(--vb-tablet-safe-top) + 24px) !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;
  }

  html.vuebox-tablet-layout .home-episodes-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: calc(var(--vb-tablet-safe-top) + 104px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 42px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout .home-episodes-head {
    max-height: 34vh !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .home-episodes-logo {
    max-width: min(58vw, 430px) !important;
    max-height: 100px !important;
  }

  html.vuebox-tablet-layout .home-episodes-title {
    font-size: clamp(2.1rem, 6vw, 3.6rem) !important;
    line-height: 1.04 !important;
  }

  html.vuebox-tablet-layout .home-episodes-desc {
    max-height: 9.2em !important;
    font-size: clamp(1rem, 2.25vw, 1.24rem) !important;
    line-height: 1.4 !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: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout .home-episode-card {
    grid-template-columns: clamp(210px, 34vw, 300px) minmax(0, 1fr) !important;
    min-height: clamp(128px, 17vh, 170px) !important;
    border-radius: 8px !important;
  }

  html.vuebox-tablet-layout .home-episode-thumb {
    width: clamp(210px, 34vw, 300px) !important;
  }

  html.vuebox-tablet-layout .home-episode-download-btn {
    width: auto !important;
    min-width: 128px !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: clamp(.92rem, 2vw, 1.08rem) !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-controls,
  html.vuebox-tablet-layout #tvShowsApp .player-controls,
  html.vuebox-tablet-layout #downloadsApp .player-controls {
    gap: 12px !important;
  }

  html.vuebox-tablet-layout #moviesApp .time-label,
  html.vuebox-tablet-layout #tvShowsApp .time-label,
  html.vuebox-tablet-layout #downloadsApp .time-label {
    width: 82px !important;
    font-size: 1rem !important;
  }

  html.vuebox-tablet-layout #moviesApp .player-progress,
  html.vuebox-tablet-layout #tvShowsApp .player-progress,
  html.vuebox-tablet-layout #downloadsApp .player-progress {
    min-height: 28px !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) !important;
    max-height: 31vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.vuebox-tablet-layout #moviesApp .option-section[data-option-section="subtitle_variant"],
  html.vuebox-tablet-layout #tvShowsApp .option-section[data-option-section="subtitle_variant"],
  html.vuebox-tablet-layout #downloadsApp .option-section[data-option-section="subtitle_variant"] {
    position: static !important;
    width: 100% !important;
    max-height: 22vh !important;
  }

  html.vuebox-tablet-layout #downloadsApp .downloads-shell,
  html.vuebox-tablet-layout #downloadsApp.is-root-view .downloads-shell {
    inset: calc(var(--vb-tablet-safe-top) + 104px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 34px) !important;
    gap: 16px !important;
    z-index: 2 !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.05) !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(180deg, rgba(0,0,0,.68), rgba(0,0,0,.82) 42%, rgba(0,0,0,.96)) !important;
    pointer-events: none !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view::before {
    opacity: .26 !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: 12px !important;
  }

  html.vuebox-tablet-layout #downloadsApp .downloads-title {
    font-size: clamp(2.1rem, 6.2vw, 3.2rem) !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 24px !important;
    border-radius: 999px !important;
    font-size: 1.06rem !important;
  }

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

  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: .84rem !important;
  }

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

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

  html.vuebox-tablet-layout #downloadsApp .download-meta,
  html.vuebox-tablet-layout #downloadsApp .download-size {
    font-size: .86rem !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: .9rem !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .downloads-show.is-open {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: calc(var(--vb-tablet-safe-top) + 96px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 34px) !important;
    overflow-y: auto !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .show-hero {
    grid-template-columns: clamp(150px, 23vw, 210px) minmax(0, 1fr) !important;
    gap: 18px !important;
    max-height: none !important;
    align-items: end !important;
  }

  html.vuebox-tablet-layout #downloadsApp.is-show-view .show-poster {
    border-radius: 8px !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.46) !important;
  }

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

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

  html.vuebox-tablet-layout #downloadsApp.is-show-view .season-tabs {
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  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 {
    height: auto !important;
  }

  html.vuebox-tablet-layout #downloadsApp .episode-card {
    grid-template-columns: clamp(210px, 34vw, 300px) minmax(0, 1fr) auto !important;
    gap: 14px !important;
    min-height: clamp(124px, 15vh, 158px) !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(210px, 34vw, 300px) !important;
    border-radius: 7px !important;
  }

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

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

  html.vuebox-tablet-layout #downloadsApp .episode-desc {
    -webkit-line-clamp: 2 !important;
    font-size: .94rem !important;
    line-height: 1.36 !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) + 116px) !important;
  }

  html.vuebox-tablet-layout #livetvApp .guide-action {
    min-height: 48px !important;
    padding: 0 20px !important;
    font-size: clamp(1.02rem, 2.15vw, 1.18rem) !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) + 120px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 38px) !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(260px, 1fr) !important;
    gap: 12px !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) + 116px) !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, 280px) !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(230px, 42vw, 340px) !important;
  }

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

@media (orientation: portrait) {
  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, .03) 0%, rgba(0, 0, 0, .05) 37%, rgba(3, 20, 23, .48) 63%, rgba(8, 31, 35, .92) 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, .03) 0%, rgba(0, 0, 0, .05) 37%, rgba(3, 20, 23, .42) 63%, rgba(8, 31, 35, .82) 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;
    min-height: 100dvh !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;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
    padding: 43vh 7.5vw calc(var(--vb-tablet-safe-bottom) + 46px) !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) + 46px) !important;
    left: 50% !important;
    width: clamp(250px, 38vw, 340px) !important;
    height: clamp(66px, 10vw, 88px) !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 28px !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(31px, 5.1vw, 42px) !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 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
    justify-content: center !important;
    gap: 30px 28px !important;
    width: min(760px, 100%) !important;
    margin: 0 auto !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 {
    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(118px, 16.5vw, 144px) !important;
    height: clamp(118px, 16.5vw, 144px) !important;
    border-radius: 18px !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(17px, 2.7vw, 22px) !important;
    min-height: 2.1em !important;
    line-height: 1.04 !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: 12px !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) + 24px) var(--vb-tablet-pad-x) calc(var(--vb-tablet-safe-bottom) + 24px) !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-panel {
    width: min(760px, 92vw) !important;
    height: calc(100vh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - 48px) !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: 11px !important;
    padding: 24px 28px !important;
    overflow: hidden !important;
  }

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

  html.vuebox-tablet-layout .profile-gate.is-form .profile-subtitle {
    margin-top: 3px !important;
    font-size: clamp(13px, 2.1vw, 16px) !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(4, minmax(0, 132px)) !important;
    gap: 14px !important;
    height: 100% !important;
    justify-content: center !important;
    justify-items: center !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 2px 8px !important;
    scroll-padding: 14px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option {
    width: 100% !important;
    min-height: 118px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 8px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option .profile-avatar {
    width: 100% !important;
    height: 100% !important;
    max-width: 116px !important;
    max-height: 116px !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: 14px !important;
  }

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

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

/* Final tablet portrait profile tuning: compact height across iPad sizes. */
@media (orientation: portrait) {
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-list {
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    padding: clamp(288px, 37svh, 430px) 7vw calc(var(--vb-tablet-safe-bottom) + clamp(28px, 4.1svh, 44px)) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-brand {
    top: calc(var(--vb-tablet-safe-top) + clamp(28px, 4.1svh, 44px)) !important;
    width: clamp(220px, 34vw, 310px) !important;
    height: clamp(56px, 8vw, 78px) !important;
  }

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

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-title {
    font-size: clamp(28px, 4.6vw, 38px) !important;
    line-height: 1.03 !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-grid {
    width: min(720px, 100%) !important;
    gap: clamp(18px, 2.55svh, 26px) clamp(18px, 3vw, 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 {
    gap: 7px !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card {
    gap: 6px !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(104px, min(15vw, 12.6svh), 132px) !important;
    height: clamp(104px, min(15vw, 12.6svh), 132px) !important;
    border-radius: 17px !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card-name {
    font-size: clamp(16px, min(2.45vw, 2.15svh), 20px) !important;
    min-height: 2.04em !important;
    line-height: 1.02 !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-card-language {
    font-size: clamp(10px, 1.45vw, 12px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form {
    padding: calc(var(--vb-tablet-safe-top) + clamp(14px, 1.8svh, 22px)) clamp(20px, 4.5vw, 34px) calc(var(--vb-tablet-safe-bottom) + clamp(14px, 1.8svh, 22px)) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-panel {
    width: min(720px, 94vw) !important;
    height: calc(100vh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(28px, 3.6svh, 44px)) !important;
    height: calc(100svh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(28px, 3.6svh, 44px)) !important;
    height: calc(100dvh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(28px, 3.6svh, 44px)) !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;
    gap: clamp(7px, 1.05svh, 10px) !important;
    padding: clamp(14px, 2.1svh, 22px) clamp(18px, 4vw, 28px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-title {
    font-size: clamp(25px, min(4.4vw, 3.5svh), 36px) !important;
    line-height: 1.02 !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-subtitle {
    font-size: clamp(11px, min(1.9vw, 1.55svh), 15px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-input {
    min-height: clamp(38px, 4.4svh, 44px) !important;
    font-size: clamp(16px, 2.1svh, 19px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-choice {
    min-height: clamp(34px, 4svh, 40px) !important;
    font-size: clamp(12px, 1.6svh, 15px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, clamp(92px, min(15vw, 11.4svh), 120px))) !important;
    gap: clamp(9px, 1.45svh, 13px) !important;
  }

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

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

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

  html.vuebox-tablet-layout .profile-gate.is-form .profile-button {
    min-width: clamp(98px, 15vw, 116px) !important;
    min-height: clamp(38px, 4.3svh, 42px) !important;
    font-size: clamp(13px, 1.7svh, 15px) !important;
  }
}

@media (orientation: portrait) and (max-height: 1050px) {
  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-list {
    padding-top: clamp(244px, 34svh, 340px) !important;
    padding-bottom: calc(var(--vb-tablet-safe-bottom) + clamp(22px, 3.2svh, 34px)) !important;
  }

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-brand {
    top: calc(var(--vb-tablet-safe-top) + clamp(20px, 3.2svh, 30px)) !important;
    width: clamp(200px, 31vw, 270px) !important;
    height: clamp(50px, 7vw, 66px) !important;
  }

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

  html.vuebox-tablet-layout .profile-gate:not(.is-form) .profile-grid {
    gap: clamp(14px, 2.1svh, 20px) clamp(14px, 2.6vw, 22px) !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(92px, min(14vw, 11.6svh), 122px) !important;
    height: clamp(92px, min(14vw, 11.6svh), 122px) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-editor-controls {
    gap: 7px !important;
    padding: 13px 20px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, clamp(82px, min(14vw, 10.4svh), 106px))) !important;
    gap: 9px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option {
    min-height: clamp(80px, min(14vw, 10.4svh), 100px) !important;
  }

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

/* Profile editor fit guard for iPad portrait. Keep actions visible; only avatars scroll. */
@media (orientation: portrait) {
  html.vuebox-tablet-layout .profile-gate.is-form {
    align-items: center !important;
    justify-content: center !important;
    padding: calc(var(--vb-tablet-safe-top) + clamp(24px, 2.7svh, 38px)) clamp(18px, 4.2vw, 32px) calc(var(--vb-tablet-safe-bottom) + clamp(24px, 2.7svh, 38px)) !important;
    overflow: hidden !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-panel {
    width: min(720px, 94vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(52px, 5.4svh, 76px)) !important;
    max-height: calc(100svh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(52px, 5.4svh, 76px)) !important;
    max-height: calc(100dvh - var(--vb-tablet-safe-top) - var(--vb-tablet-safe-bottom) - clamp(52px, 5.4svh, 76px)) !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, 1svh, 12px) !important;
    padding: clamp(20px, 2.2svh, 30px) clamp(20px, 4vw, 30px) clamp(20px, 2.2svh, 30px) !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(24px, min(4.1vw, 3.1svh), 34px) !important;
    line-height: 1 !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-subtitle {
    margin-top: 2px !important;
    font-size: clamp(11px, min(1.8vw, 1.35svh), 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, .7svh, 8px) !important;
  }

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

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

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

  html.vuebox-tablet-layout .profile-gate.is-form .profile-choice {
    min-height: clamp(32px, 3.55svh, 39px) !important;
    font-size: clamp(12px, 1.45svh, 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(4, minmax(0, clamp(96px, min(14.5vw, 10.8svh), 128px))) !important;
    align-content: start !important;
    gap: clamp(9px, 1.15svh, 13px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(50vh, 560px) !important;
    max-height: min(50svh, 560px) !important;
    max-height: min(50dvh, 560px) !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 {
    min-height: clamp(92px, min(14.5vw, 10.8svh), 122px) !important;
    aspect-ratio: 1 / 1 !important;
    padding: 6px !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-avatar-option .profile-avatar {
    max-width: clamp(84px, min(13vw, 10svh), 112px) !important;
    max-height: clamp(84px, min(13vw, 10svh), 112px) !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, 2vw, 14px) !important;
    margin-top: clamp(10px, 1.2svh, 15px) !important;
    padding-bottom: max(4px, var(--vb-tablet-safe-bottom)) !important;
  }

  html.vuebox-tablet-layout .profile-gate.is-form .profile-button {
    min-width: clamp(96px, 14vw, 116px) !important;
    min-height: clamp(36px, 3.85svh, 42px) !important;
    padding: 0 clamp(12px, 2vw, 16px) !important;
    font-size: clamp(12px, 1.45svh, 14px) !important;
  }
}