/* Active XCloud branding styles. */
/* The application shell and form controls live in /styles.css; this file owns the verified previews and XCloud-specific refinements. */
.xcloud-live-preview { position: sticky; top: 72px; min-width: 0; width: 100%; }
.xcloud-live-preview [data-xcloud-preview-stage][data-asset-state="loading"],
.xcloud-live-preview [data-xcloud-preview-stage][data-asset-state="partial"] { visibility: hidden; }
.xcloud-editor-app[data-asset-state="loading"]::after,
.xcloud-editor-app[data-asset-state="partial"]::after { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; color: #31505f; background: rgba(246,250,251,.84); content: 'Carregando imagens...'; font: 500 13px/1 Roboto, "Roboto Fallback", Arial, sans-serif; pointer-events: none; }
.xcloud-live-preview:has([data-xcloud-preview-stage][data-asset-state="loading"]),
.xcloud-live-preview:has([data-xcloud-preview-stage][data-asset-state="partial"]) { position: relative; }
.xcloud-live-preview:has([data-xcloud-preview-stage][data-asset-state="loading"])::after,
.xcloud-live-preview:has([data-xcloud-preview-stage][data-asset-state="partial"])::after { position: absolute; inset: 28px 0 0; z-index: 5; display: grid; place-items: center; color: #31505f; background: rgba(246,250,251,.9); content: 'Carregando imagens...'; font: 500 13px/1 Roboto, "Roboto Fallback", Arial, sans-serif; pointer-events: none; }
.xcloud-live-preview [data-xcloud-preview-stage][data-asset-state="loading"]::after,
.xcloud-live-preview [data-xcloud-preview-stage][data-asset-state="partial"]::after { position: absolute; inset: 50% auto auto 50%; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.28); border-top-color: rgba(255,255,255,.92); border-radius: 50%; content: ''; transform: translate(-50%, -50%); animation: xc-preview-spin .7s linear infinite; }
@keyframes xc-preview-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.xc-official-platform { position: relative; left: -0.09375px; width: calc(100% + 0.09375px); min-width: 0; }
.xc-official-preview { container-type: inline-size; position: relative; display: flex; box-sizing: border-box; width: 800px; max-width: 100%; aspect-ratio: 16/9; align-items: stretch; justify-content: space-between; overflow: hidden; padding: 16px; border: 4px solid #2a2a30; border-radius: 4px; color: #fff; background-color: #18181b; background-image: none !important; background-position: center; background-size: cover; font: 16px/24px Roboto, "Roboto Fallback"; user-select: none; }
.xc-official-background { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.xc-official-background img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xc-official-shell { position: relative; z-index: 1; display: flex; box-sizing: border-box; width: 100%; height: 100%; flex-direction: column; gap: 4px; padding: 0; }
.xc-official-logo { position: absolute; top: 0; left: 0; display: flex; width: 6.4cqw; height: 7.47cqw; align-items: flex-start; justify-content: flex-start; }
.xc-official-logo img { display: block; width: 6.4cqw; height: 7.47cqw; max-width: none; object-fit: contain; object-position: top left; transform: scale(calc(var(--xc-logo-size)/100)); transform-origin: top left; }
.xc-official-menu-wrap { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 16px; margin-left: 40px; }
.xc-official-menu-grid { display: grid; grid-template-columns: repeat(2, var(--xc-oq-item, 60.91px)); column-gap: 20px; row-gap: 8px; }
.xc-official-menu-item { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 8px; color: var(--xc-menu-icons); font-size: 1.724cqw; font-weight: 700; line-height: 1.42857; text-transform: uppercase; }
.xc-official-item-icon { position: relative; display: flex; box-sizing: border-box; width: var(--xc-oq-item, 60.91px); height: var(--xc-oq-item, 60.91px); align-items: center; justify-content: center; color: var(--xc-menu-icons); background-color: transparent; background-image: var(--xc-menu-shape); background-position: center; background-repeat: no-repeat; background-size: cover; border: 0; border-radius: var(--xc-menu-radius, 50%); box-shadow: none; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.xc-official-menu-item.is-active .xc-official-item-icon { transform: scale(1.1); border-color: var(--xc-menu-active, var(--xc-menu-items)); box-shadow: none; }
.xc-official-active-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.xc-official-item-icon .xc-icon-glyph { position: relative; z-index: 1; display: grid; width: var(--xc-oq-icon, 30.45px); height: var(--xc-oq-icon, 30.45px); place-items: center; background: transparent; }
.xc-icon-glyph[hidden] { display: none !important; }
.xc-official-item-icon .xc-icon-glyph svg { display: block; width: 100%; height: 100%; color: currentColor; }
.xc-official-menu-label { color: var(--xc-menu-icons); font-size: inherit; font-weight: 700; line-height: inherit; white-space: nowrap; }
.xc-official-reload { display: flex; width: 100%; height: 33px; box-sizing: border-box; align-items: center; justify-content: center; gap: 10px; padding: 0 8px; border: 1px solid #707071; border-radius: 5px; color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 6.99px 6.99px rgba(255,255,255,.25); font-size: 1.631cqw; font-weight: 700; line-height: 1.42857; white-space: nowrap; }
.xc-official-reload svg { display: block; width: 12px; height: 12px; flex: 0 0 auto; }
.xc-official-content { display: flex; width: 300.8125px; min-width: 300.8125px; height: 278.09375px; min-height: 278.09375px; flex: 0 0 300.8125px; flex-direction: column; gap: 24px; overflow: hidden; }
.xc-official-content-section { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.xc-official-content-section h3 { margin: 0; color: #f5f5f5; font-size: 1.724cqw; font-weight: 500; line-height: 1.5; }
.xc-official-art-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
 .xc-official-art { display: block; width: 12.31175cqw; height: 18.5941cqw; flex: 0 0 12.31175cqw; box-sizing: border-box; border: 2px solid transparent; border-radius: 6px; object-fit: fill; }
 .xc-official-art.is-featured { scale: 1.1; transform: none; border: 2px solid var(--xc-secondary, #fff); border-radius: 6px; transform-origin: center center; }
.xc-official-footer { position: relative; display: flex; width: 100%; height: 34px; min-height: 34px; align-items: center; box-sizing: border-box; padding: 0 8px; border-radius: 8px; color: oklch(0.872 0.01 258.338); background: rgba(11,11,11,.92); backdrop-filter: blur(8px); font: 10px/15px Roboto, "Roboto Fallback"; }
.xc-official-footer > span { min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-official-footer > span:last-child { text-align: right; }
.xc-official-footer strong { color: inherit; font-weight: 700; }
.xc-official-footer .xc-official-upcoming { flex: 0 0 auto; }
.xc-official-upcoming { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.xc-official-upcoming-toggle { display: flex; height: 25px; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; border: 0; border-radius: 0; color: #fff; background: transparent; font: 400 10px/15px Roboto, "Roboto Fallback"; white-space: nowrap; }
.xc-official-upcoming-toggle > span { font-weight: 700; }
.xc-official-upcoming-toggle:hover, .xc-official-upcoming-toggle[aria-expanded="true"] { background: rgba(255,255,255,.12); }
.xc-official-upcoming-toggle .xc-official-chevron { transition: transform .16s ease; }
.xc-official-upcoming-toggle .xc-official-chevron { width: 10px; height: 10px; }
.xc-official-match-list { position: absolute; right: 0; bottom: 29px; left: 0; display: grid; gap: 5px; padding: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: rgba(11,11,11,.96); box-shadow: 0 5px 14px rgba(0,0,0,.35); }
.xc-official-match-list[hidden] { display: none; }
.xc-official-match-card { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 3px; color: #eef2f2; background: rgba(255,255,255,.07); font-size: 8px; }
.xc-official-match-time { color: var(--xc-primary); font-weight: 700; }
.xc-official-match-teams { display: flex; min-width: 0; align-items: center; gap: 4px; overflow: hidden; }
.xc-official-match-teams strong { overflow: hidden; color: #eef2f2; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.xc-official-match-teams small { color: #9fa7aa; font-size: 7px; }
.xc-official-match-status { color: #9fa7aa; font-size: 7px; }
.xc-official-preview[data-shape="round"] { --xc-menu-radius: 50%; }
.xc-official-preview[data-shape="quadrate"] { --xc-menu-radius: 0; }
.xc-official-preview[data-shape="halfcircle"] { --xc-menu-radius: 15px; }
.xc-official-preview[data-menu="classic"] .xc-official-menu-grid { grid-template-columns: var(--xc-oq-item, 60.91px); grid-template-rows: repeat(4,auto); }
.xc-official-preview[data-menu="menu_v3"] .xc-official-menu-wrap { margin-left: 32px; }

.xc-mobile-preview { position: relative; left: .078125px; width: 300px; height: 600px; aspect-ratio: auto; margin: 0; overflow: visible; border: 14px solid var(--xc-mobile-frame, #18181b); border-radius: 2.5rem; background: var(--xc-mobile-frame-secondary, #2a2a30); box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; user-select: none; }
.xc-mobile-preview::before { position: absolute; top: 12px; left: 50%; z-index: 20; width: 90px; height: 26px; border-radius: 999px; background: var(--xc-mobile-frame, #18181b); content: ''; transform: translateX(-50%); }
.xc-mobile-side-button { position: absolute; z-index: 21; width: 3px; background: var(--xc-mobile-frame, #18181b); }
.xc-mobile-side-button--left-1 { top: 124px; left: -17px; height: 46px; border-radius: 3px 0 0 3px; }
.xc-mobile-side-button--left-2 { top: 178px; left: -17px; height: 46px; border-radius: 3px 0 0 3px; }
.xc-mobile-side-button--right { top: 142px; right: -17px; height: 64px; border-radius: 0 3px 3px 0; }
.xc-mobile-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 1.7rem; }
.xc-mobile-header { position: absolute; top: 48px; right: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: center; height: 70px; }
.xc-mobile-header img { display: block; width: 70px; height: 70px; object-fit: contain; }
.xc-mobile-nav { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 16px; color: var(--xc-mobile-icons); }
.xc-mobile-nav > span { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 4px; opacity: .5; }
.xc-mobile-nav > span.is-active { opacity: 1; }
.xc-mobile-nav-icon { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--xc-mobile-icons); background: rgba(255,255,255,.3); border-radius: 999px; }
.xc-mobile-nav > span.is-active .xc-mobile-nav-icon { color: #fff; background: var(--xc-mobile-active, #183e4b); }
.xc-mobile-nav-icon .xc-icon-glyph { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; }
.xc-mobile-nav-icon .xc-icon-glyph svg { width: 20px; height: 20px; }
.xc-mobile-nav b { color: #fff; font-size: 12px; font-weight: 600; line-height: 16px; text-transform: uppercase; white-space: nowrap; }
/* The official TV editor has three different menu trees, not one grid with CSS variations. */
.xc-official-menu-layout { box-sizing: border-box; width: 100%; height: 100%; min-width: 0; }
.xc-official-menu-layout[hidden] { display: none !important; }
.xc-official-menu-layout--rms { display: flex; width: 100%; height: 278.09375px; min-height: 278.09375px; align-items: flex-end; gap: 64px; flex: 0 0 278.09375px; }
.xc-official-menu-layout--rms .xc-official-menu-wrap { margin-left: 40px; }
.xc-official-menu-layout--classic { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; padding-top: 0; }
.xc-official-menu-layout--classic .xc-classic-logo { display: flex; width: 100%; min-height: 17.74cqw; max-height: 17.74cqw; align-items: center; justify-content: center; }
.xc-official-menu-layout--classic .xc-classic-logo img { display: block; width: 6.4cqw; height: 7.47cqw; object-fit: contain; transform: scale(calc(var(--xc-logo-size) / 13)); transform-origin: center; }
.xc-official-menu-layout--classic .xc-classic-menu-grid { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: -3.39px; }
.xc-official-menu-layout--classic .xc-official-menu-item { gap: 0; }
.xc-official-menu-layout--classic .xc-official-menu-label { margin-top: 8px; font-size: 1.779cqw; line-height: 15px; text-transform: capitalize; }
.xc-official-menu-layout--classic .xc-official-item-icon { width: 15.28cqw; height: 15.28cqw; flex-direction: column; padding: 20px; }
.xc-official-menu-layout--classic .xc-official-item-icon .xc-icon-glyph { width: 8.37cqw; height: 20px; min-height: 20px; }
.xc-official-menu-layout--classic .xc-official-item-icon { background-color: rgba(29,29,29,.5); background-image: none; border: 2px solid var(--xc-menu-items); box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.xc-official-menu-layout--classic .xc-official-menu-item.is-active .xc-official-item-icon { background-color: rgba(23,23,23,.5); }
.xc-official-menu-layout--classic .xc-official-menu-item.is-active .xc-official-item-icon { transform: scale(1.1); border-color: #fff; }
.xc-official-menu-layout--classic .xc-official-reload { width: auto; min-width: 122.17px; height: 33px; min-height: 33px; padding: 0 24px; border-radius: 5px; background: rgba(29,29,29,.5); box-shadow: none; font-size: 1.779cqw; }
.xc-official-menu-layout--v3 { display: flex; height: 260.67px; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 0 20px; flex: 0 0 260.67px; }
.xc-v3-clock { display: flex; flex: 0 0 auto; flex-direction: column; gap: 8px; color: #fdfdfd; font-weight: 600; }
.xc-v3-clock strong { color: #fdfdfd; font-size: 6.9cqw; font-weight: 600; line-height: 1.5; }
.xc-v3-clock > span { color: #fdfdfd; font-size: 1.97cqw; line-height: 1.5; }
.xc-v3-clock .xc-official-reload { width: 24.62cqw; height: 34px; min-height: 34px; margin-top: 8px; padding: 16px 0; border-color: #707071; border-radius: 8px; color: var(--xc-menu-icons); background: #faa72a; box-shadow: inset 0 6.99px 6.99px rgba(255,255,255,.25); font-size: 1.626cqw; }
.xc-v3-menu-grid { display: grid; grid-template-columns: repeat(2, 17.24cqw); gap: 28px 12px; align-items: center; }
.xc-v3-menu-item { display: flex; width: 17.24cqw; height: 17.24cqw; box-sizing: border-box; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--xc-menu-items); border-radius: 50%; color: var(--xc-menu-icons); background: #010101; font-size: 2.217cqw; font-weight: 500; line-height: 1.5; text-transform: uppercase; }
.xc-v3-menu-item:nth-child(1) { --xc-v3-color: #faa72a; }
.xc-v3-menu-item:nth-child(2) { --xc-v3-color: #25b8cc; }
.xc-v3-menu-item:nth-child(3) { --xc-v3-color: #68bc6b; }
.xc-v3-menu-item:nth-child(4) { --xc-v3-color: #785da8; }
.xc-v3-icon { position: relative; display: flex; width: 7.39cqw; height: 7.39cqw; align-items: center; justify-content: center; margin: 0 11.07px; color: var(--xc-menu-icons); background: var(--xc-v3-color); border-radius: 50%; }
.xc-v3-icon-accent { position: relative; z-index: 1; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 50%; background: transparent; }
.xc-v3-icon .xc-icon-glyph { position: relative; z-index: 1; display: grid; width: 50px; height: 50px; min-height: 100px; flex-shrink: 1; box-sizing: border-box; place-items: center; padding: 12px; }
.xc-v3-icon .xc-icon-glyph svg { width: 100%; height: 100%; color: currentColor; }
.xc-v3-menu-item.is-active { border-color: #fff; }
.xc-v3-menu-item > span { color: var(--xc-menu-icons); }
.xc-official-preview[data-menu="classic"] .xc-official-logo { display: none; }
.xc-official-preview[data-menu="classic"] .xc-official-shell { gap: 0; }
.xc-official-preview[data-menu="menu_v3"] .xc-official-logo { top: 0; left: 0; width: 6.4cqw; height: 7.47cqw; }
.xc-official-preview[data-menu="menu_v3"] .xc-official-logo img { width: 6.4cqw; height: 7.47cqw; max-width: none; }
.xc-official-preview[data-menu="menu_v3"] .xc-official-menu-layout--v3 .xc-v3-menu-grid { grid-template-columns: repeat(2, 17.24cqw); }
.xc-official-preview[data-menu="menu_v3"][data-shape="quadrate"] .xc-official-menu-layout--v3 .xc-v3-menu-grid,
.xc-official-preview[data-menu="menu_v3"][data-shape="halfcircle"] .xc-official-menu-layout--v3 .xc-v3-menu-grid { display: flex; flex-direction: column; gap: 16px; }
.xc-official-preview[data-menu="menu_v3"][data-shape="quadrate"] .xc-v3-menu-item,
.xc-official-preview[data-menu="menu_v3"][data-shape="halfcircle"] .xc-v3-menu-item { width: 34.48cqw; height: 10.59cqw; flex-direction: row; justify-content: flex-start; padding: 8px 0; gap: 12px; }
.xc-official-preview[data-menu="menu_v3"][data-shape="quadrate"] .xc-v3-menu-item { border-radius: 0; }
.xc-official-preview[data-menu="menu_v3"][data-shape="halfcircle"] .xc-v3-menu-item { border-radius: 15px; }
.xc-official-preview[data-menu="menu_v3"] .xc-official-active-layer { display: none; }
.xc-official-preview[data-menu="menu_v3"] .xc-official-footer { display: flex; }
.xc-official-preview[data-menu="menu_v3"] .xc-v3-menu-item.is-active { border-color: #fff; }
.xc-official-preview[data-menu="menu_v3"][data-shape="quadrate"] .xc-v3-menu-grid,
.xc-official-preview[data-menu="menu_v3"][data-shape="halfcircle"] .xc-v3-menu-grid { display: flex; flex-direction: column; gap: 16px; }
.xc-official-preview[data-menu="menu_v3"][data-shape="quadrate"] .xc-official-menu-layout--v3,
.xc-official-preview[data-menu="menu_v3"][data-shape="halfcircle"] .xc-official-menu-layout--v3 { height: 286.06px; flex-basis: 286.06px; }
.xc-official-preview[data-menu="classic"] .xc-official-footer { margin-top: 0; }
.xc-official-preview .xc-icon-glyph svg { display: block; width: 100%; height: 100%; }
.xcloud-editor-app .xc-official-logo img,
.xcloud-editor-app .xc-official-menu-layout--classic .xc-classic-logo img { transform: scale(calc(var(--xc-logo-size) / 13)); }

/* The official editor changes the preview surface with the open accordion. */
.xc-player-preview { position: relative; left: -0.09375px; box-sizing: border-box; width: calc(100% + 0.09375px); max-width: 800px; aspect-ratio: 16/9; overflow: hidden; border: 4px solid #2a2a30; border-radius: 4px; color: #fff; background-color: #18181b; background-position: center; background-repeat: no-repeat; background-size: cover; user-select: none; }
.xc-player-preview[data-player-version="3"] { padding: 16px; }
.xc-player-preview[data-player-version="3"] .xc-player-header { padding: 0; color: var(--xc-player-items); background: transparent; font-size: 13.84px; line-height: 1.5; }
.xc-player-preview[data-player-version="3"] .xc-player-header svg { width: 13.84px; height: 13.84px; }
.xc-player-background, .xc-player-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.xc-player-background { object-fit: cover; }
.xc-player-shade { z-index: 1; background: transparent; }
.xc-player-content { position: relative; z-index: 2; display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: space-between; }
.xc-player-header { display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--xc-player-items); background: rgba(0,0,0,.5); font-size: 15.32px; line-height: 1.5; }
.xc-player-header svg { width: 15.32px; height: 15.32px; }
.xc-player-version-surface { width: 100%; align-self: flex-end; }
.xc-player-v1-controls, .xc-player-v2-controls { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: rgba(0,0,0,.5); }
.xc-player-times, .xc-player-control-row, .xc-player-inline-timeline { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; }
.xc-player-times, .xc-player-inline-timeline { color: #fff; font-size: 9.19px; line-height: 1.5; }
.xc-player-progress { width: 100%; height: 1.98px; overflow: hidden; border-radius: 999px; background: rgba(134,151,139,.53); }
.xc-player-progress span { display: block; width: 22%; height: 100%; border-radius: inherit; background: var(--xc-progress); }
.xc-player-control-group { display: flex; align-items: center; }
.xc-player-control-icon { display: grid; width: 15.32px; height: 15.32px; min-width: 12px; min-height: 12px; margin: 4.6px; place-items: center; color: var(--xc-player-items); opacity: .7; }
.xc-player-control-icon svg { display: block; width: 100%; height: 100%; }
.xc-player-control-icon.is-primary { transform: scale(1.2); opacity: 1; }
.xc-player-v2-controls .xc-player-control-row { justify-content: center; gap: 0; }
.xc-player-v2-controls .xc-player-control-row .xc-player-control-group { justify-content: center; }
.xc-player-v2-controls .xc-player-control-row .xc-player-control-group:last-child { margin-left: 0; }
.xc-mobile-player-preview { position: relative; left: .078125px; box-sizing: border-box; width: 600px; height: 300px; margin: 0; overflow: visible; border: 14px solid #18181b; border-radius: 2.5rem; background: #111; box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; color: #fff; user-select: none; }
.xc-mobile-player-screen { position: absolute; inset: 0; overflow: hidden; border-radius: 1.7rem; background: #111; }
.xc-mobile-player-background { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.xc-mobile-player-content { position: absolute; inset: 0; z-index: 10; display: flex; width: 100%; height: 100%; flex-direction: column; }
.xc-mobile-player-controls { display: flex; width: 100%; height: 100%; box-sizing: border-box; flex-direction: column; justify-content: space-between; padding: 16px; background: rgba(0, 0, 0, .6); }
.xc-mobile-player-header { display: flex; width: 100%; min-height: 24px; align-items: center; justify-content: space-between; color: #fff; font: 400 16px/24px Roboto, "Roboto Fallback", Arial, sans-serif; }
.xc-mobile-player-header b { font-weight: 700; }
.xc-mobile-player-header svg { display: block; width: 24px; height: 24px; }
.xc-mobile-player-side-pill { position: absolute; top: 91px; left: 12px; z-index: 20; width: 26px; height: 90px; border-radius: 999px; background: #18181b; }
.xc-mobile-player-timeline { display: flex; width: 100%; min-height: 16px; align-items: center; gap: 8px; color: #fff; font: 400 12px/16px Roboto, "Roboto Fallback", Arial, sans-serif; }
.xc-mobile-player-timeline > span { flex: 0 0 auto; }
.xc-mobile-player-timeline .xc-player-progress { width: auto; height: 3px; flex: 1 1 auto; background: rgba(134,151,139,.53); }
.xc-mobile-player-timeline .xc-player-progress span { background: var(--xc-progress, #fff); }
.xc-mobile-player-side-button { position: absolute; z-index: 20; width: 3px; background: #18181b; }
.xc-mobile-player-side-button--left-1 { top: 124px; left: -17px; height: 46px; border-radius: 3px 0 0 3px; }
.xc-mobile-player-side-button--left-2 { top: 178px; left: -17px; height: 46px; border-radius: 3px 0 0 3px; }
.xc-mobile-player-side-button--right { top: 142px; right: -17px; height: 64px; border-radius: 0 3px 3px 0; }
.xc-mobile-player-side-button--bottom-1 { bottom: -17px; left: 124px; width: 46px; height: 3px; border-radius: 3px 3px 0 0; }
.xc-mobile-player-side-button--bottom-2 { bottom: -17px; left: 178px; width: 46px; height: 3px; border-radius: 3px 3px 0 0; }
.xc-mobile-player-side-button--top { top: -17px; left: 142px; width: 64px; height: 3px; border-radius: 0 0 3px 3px; }
.xc-player-version-surface[hidden] { display: none !important; }
.xc-player-v3-bar { display: flex; width: 100%; box-sizing: border-box; align-items: center; padding: 9.69px 13.84px; color: #fff; background: #2d2d2d; border-radius: 8.31px; box-shadow: 0 0 3rem 1rem rgba(0,0,0,.4); }
.xc-player-v3-buttons { display: flex; width: 243.2px; min-width: 243.2px; align-items: center; justify-content: space-between; margin-right: 5.54px; }
.xc-player-v3-timeline { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 8px; font-size: 8.31px; line-height: 1.5; }
.xc-player-v3-bar .xc-player-control-icon { width: 13.84px; height: 13.84px; margin: 4.15px; }
.xc-player-v3-bar .xc-player-control-icon.is-primary { transform: scale(1.2); }
.xc-player-v3-timeline .xc-player-progress { height: 1.8px; flex: 1 1 auto; }

.xc-settings-platform { position: relative; left: -0.09375px; width: calc(100% + 0.09375px); min-width: 0; }
.xc-settings-preview { position: relative; display: block; width: 100%; max-width: 800px; aspect-ratio: 16/9; overflow: hidden; border: 4px solid #2a2a30; border-radius: 2px; color: #183d4b; background-color: #18181b; background-position: center; background-repeat: no-repeat; background-size: cover; }
.xc-settings-official-image { position: absolute; inset: 0; z-index: 4; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; visibility: visible !important; }
.xc-settings-preview > .xc-settings-preview-version { display: none; }
@media (min-width: 701px) and (max-width: 1279px) {
    .xc-official-preview { width: 600px; }
}

@media (max-width: 700px) { .xcloud-tabs { width: 100%; } .xcloud-actions { width: 100%; } }

/* Mobile media preview. */
.xc-mobile-media-preview {
    position: relative;
    left: .078125px;
    box-sizing: border-box;
    width: 300px;
    height: 600px;
    margin: 0;
    overflow: visible;
    border: 14px solid #18181b;
    border-radius: 2.5rem;
    background: #2a2a30;
    box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    color: #fff;
    user-select: none;
}
.xc-mobile-media-preview::before { position: absolute; top: 12px; left: 50%; z-index: 20; width: 90px; height: 26px; border-radius: 999px; background: #18181b; content: ''; transform: translateX(-50%); }
.xc-mobile-media-screen { position: absolute; inset: 0; overflow: hidden; border-radius: 1.7rem; background: #111; }
.xc-mobile-media-page { display: flex; width: 100%; height: 100%; flex-direction: column; gap: 8px; overflow: hidden; background: #101010; color: #fff; font-family: Roboto, "Roboto Fallback", Arial, sans-serif; }
.xc-mobile-media-hero { position: relative; width: 100%; height: 220px; box-sizing: border-box; flex: 0 0 220px; display: flex; flex-direction: column; gap: 80px; overflow: hidden; padding: 12px 8px; color: #d8dce8; background: rgba(0,0,0,.5); font: 400 14px/20px Roboto, "Roboto Fallback", Arial, sans-serif; isolation: isolate; }
.xc-mobile-media-hero-image { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: cover; }
.xc-mobile-media-hero::after { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.5); content: ''; pointer-events: none; }
.xc-mobile-media-back { position: absolute; top: 12px; left: 8px; z-index: 2; display: grid; width: 30px; height: 30px; place-items: center; color: #d8dce8; }
.xc-mobile-media-back svg { display: block; width: 30px; height: 30px; }
.xc-mobile-media-meta { position: absolute; top: 122px; right: 8px; left: 8px; z-index: 2; display: flex; width: auto; height: 86px; flex-direction: column; gap: 4px; color: #d8dce8; font: 400 14px/20px Roboto, "Roboto Fallback", Arial, sans-serif; }
.xc-mobile-media-meta h1 { width: 100%; height: 28px; margin: 0; color: #d8dce8; font-size: 18px; font-weight: 600; line-height: 28px; }
.xc-mobile-media-info { width: 100%; height: 32px; }
.xc-mobile-media-rating-row { display: flex; width: 100%; height: 12px; gap: 4px; margin: 0 0 4px; color: var(--xc-media-icons); }
.xc-mobile-rating-stars { display: flex; width: auto; align-items: center; color: var(--xc-media-icons); }
.xc-mobile-media-stars { height: 12px; gap: 4px; }
.xc-mobile-rating-star { display: block; flex: 0 0 auto; }
.xc-mobile-media-info p { width: 100%; height: 16px; margin: 0; color: #d8dce8; font: 400 12px/16px Roboto, "Roboto Fallback", Arial, sans-serif; }
.xc-mobile-media-genre-row { display: flex; width: 100%; height: 18px; align-items: center; justify-content: space-between; color: #d8dce8; font: 400 12px/16px Roboto, "Roboto Fallback", Arial, sans-serif; }
.xc-mobile-media-favorite { display: grid; width: 18px; height: 18px; place-items: center; color: var(--xc-media-icons); }
.xc-mobile-media-favorite svg { display: block; width: 18px; height: 18px; }
.xc-mobile-media-details { display: block; width: 100%; height: 110px; box-sizing: border-box; flex: 0 0 110px; padding: 0 8px; background: transparent; color: #d8dce8; }
.xc-mobile-media-details > p { width: 100%; height: 64px; margin: 0 0 10px; color: #d8dce8; font: 400 12px/16px Roboto, "Roboto Fallback", Arial, sans-serif; }
.xc-mobile-media-play { display: flex; width: 100%; height: 36px; box-sizing: border-box; align-items: center; justify-content: center; padding: 8px 0; border: 0; border-radius: 5px; color: #d8dce8; background: var(--xc-media-button); font: 600 14px/20px Roboto, "Roboto Fallback", Arial, sans-serif; }
.xc-mobile-media-similar { width: 100%; height: 192px; box-sizing: border-box; flex: 0 0 192px; margin-top: 12px; padding: 0 8px; color: #d8dce8; }
.xc-mobile-media-similar h3 { width: 100%; height: 24px; margin: 0 0 8px; color: #d8dce8; font: 400 16px/24px Roboto, "Roboto Fallback", Arial, sans-serif; }
.xc-mobile-media-grid { display: flex; width: 100%; height: 160px; align-items: center; gap: 8px; }
.xc-mobile-media-card { display: flex; width: 80px; height: 160px; flex: 0 0 80px; flex-direction: column; align-items: center; color: #2c3238; font: 400 16px/24px Roboto, "Roboto Fallback", Arial, sans-serif; }
.xc-mobile-media-card-art { position: relative; width: 80px; height: 140px; overflow: hidden; border-radius: 4px; background: rgba(0,0,0,.6); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.xc-mobile-media-card-art img { position: absolute; inset: 0; z-index: 0; display: block; width: 80px; height: 140px; object-fit: cover; }
.xc-mobile-media-card-art::after { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.6); content: ''; pointer-events: none; }
.xc-mobile-media-card-overlay { position: absolute; inset: 0; z-index: 2; display: flex; width: 100%; height: 100%; align-items: flex-start; justify-content: space-between; padding: 8px 4px; box-sizing: border-box; }
.xc-mobile-media-card-rating { display: flex; width: 46px; height: 140px; flex: 0 0 46px; gap: 2px; align-items: flex-start; color: var(--xc-media-icons); }
.xc-mobile-media-card-rating .xc-mobile-rating-star { width: 10px; height: 10px; }
.xc-mobile-media-card-favorite { display: grid; width: 12px; height: 12px; place-items: center; color: var(--xc-media-icons); }
.xc-mobile-media-card-favorite svg { display: block; width: 12px; height: 12px; }
.xc-mobile-media-card > span { width: auto; height: 16px; margin: 4px 0 0; color: #2c3238; font: 400 12px/16px Roboto, "Roboto Fallback", Arial, sans-serif; text-align: center; white-space: nowrap; }
.xc-mobile-media-preview.is-split .xc-mobile-media-hero { display: grid; grid-template-columns: 1fr 1fr; }
.xc-mobile-media-preview.is-split .xc-mobile-media-hero-image { position: relative; inset: auto; width: 100%; height: 100%; grid-column: 1; object-fit: cover; }
.xc-mobile-media-preview.is-split .xc-mobile-media-hero-shade { background: linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.82) 100%); }
.xc-mobile-media-preview.is-split .xc-mobile-media-meta { left: calc(50% + 8px); }
.xc-tv-player-preview .xc-player-shade { background: transparent; }