/* Both menus keep their original selection, focus and account behavior.
   Reserve header/return-toolbar and playback space inside the viewport. */
#themeMenu{--menu-top-clearance:calc(var(--player-header-height,68px) + 12px);--menu-bottom-clearance:calc(var(--player-bar-height,84px) + 12px)}
#hubThemeMenu{--menu-top-clearance:90px;--menu-bottom-clearance:12px}
body.platform-embedded #hubThemeMenu{--menu-top-clearance:154px;--menu-bottom-clearance:calc(var(--player-bar-height,84px) + 12px)}
@media(min-width:741px){#themeMenu{left:0;right:auto;transform-origin:top left}}
/* The trigger host must not become a scroll/clipping container at tablet widths. */
#hubShell .platform-header .top-actions{overflow:visible}
:is(#themeMenu,#hubThemeMenu){width:350px;max-width:calc(100vw - 24px);max-height:min(620px,calc(100vh - var(--menu-top-clearance) - var(--menu-bottom-clearance) - env(safe-area-inset-bottom)));max-height:min(620px,calc(100dvh - var(--menu-top-clearance) - var(--menu-bottom-clearance) - env(safe-area-inset-bottom)));padding:8px;background:var(--bg2);border:1px solid var(--line);border-radius:18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-padding:8px;box-shadow:0 24px 70px #0009}
:is(#themeMenu,#hubThemeMenu) button{position:relative;display:flex;align-items:center;gap:13px;min-height:76px;padding:8px;width:100%;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--fg);text-align:left;box-shadow:none}
:is(#themeMenu,#hubThemeMenu) button:hover{background:var(--panel)}
:is(#themeMenu,#hubThemeMenu) button[aria-checked="true"]{background:color-mix(in srgb,var(--a2) 9%,var(--bg));border-color:color-mix(in srgb,var(--a2) 45%,var(--line))}
:is(#themeMenu,#hubThemeMenu) button:focus-visible{outline:2px solid var(--a2);outline-offset:-2px}
:is(#themeMenu,#hubThemeMenu) .theme-preview{position:relative;display:block;isolation:isolate;flex:none;width:82px;height:58px;overflow:hidden;border:1px solid #ffffff26;border-radius:8px;background-image:linear-gradient(90deg,#04091611,#04091677),var(--preview-art);background-size:cover;background-position:center;box-shadow:inset 0 0 18px #0003}
:is(#themeMenu,#hubThemeMenu) .theme-preview img{position:absolute;right:0;bottom:-2px;width:50px;height:50px;filter:drop-shadow(0 2px 4px #0008)}
:is(#themeMenu,#hubThemeMenu) .theme-choice-copy{display:grid;gap:5px;flex:1;min-width:0}
:is(#themeMenu,#hubThemeMenu) .theme-choice-copy b{font:700 .82rem/1.25 'Space Grotesk',sans-serif;letter-spacing:.005em}
:is(#themeMenu,#hubThemeMenu) .theme-choice-copy i{margin:0;font:400 .65rem/1.3 Inter,sans-serif;color:var(--muted);white-space:normal}
:is(#themeMenu,#hubThemeMenu) .theme-choice-check{font-size:.85rem;color:var(--a2);opacity:0;width:18px;flex:none}
:is(#themeMenu,#hubThemeMenu) button[aria-checked="true"] .theme-choice-check{opacity:1}
:is(#themeMenu,#hubThemeMenu) .theme-menu-heading{display:block;padding:16px 10px 9px;font:600 .55rem/1.4 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
:is(#themeMenu,#hubThemeMenu) .theme-menu-intro{padding-top:8px}
@media(max-width:740px){
  :is(#themeMenu,#hubThemeMenu){position:fixed;top:calc(70px + env(safe-area-inset-top));left:auto;right:12px;width:min(350px,calc(100vw - 24px));max-height:calc(100vh - 82px - var(--menu-bottom-clearance) - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 82px - var(--menu-bottom-clearance) - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:16px}
  :is(#themeMenu,#hubThemeMenu) button{min-height:68px;gap:11px}
  :is(#themeMenu,#hubThemeMenu) .theme-preview{height:50px;width:72px}
  :is(#themeMenu,#hubThemeMenu) .theme-preview img{width:44px;height:44px}
}
@media(forced-colors:active){:is(#themeMenu,#hubThemeMenu) button[aria-checked="true"]{border:2px solid Highlight}:is(#themeMenu,#hubThemeMenu) .theme-choice-check{color:ButtonText}}
:root[data-display-mode="tv"] :is(#themeMenu,#hubThemeMenu){width:440px}
:root[data-display-mode="tv"] :is(#themeMenu,#hubThemeMenu) button{min-height:94px}
:root[data-display-mode="tv"] :is(#themeMenu,#hubThemeMenu) .theme-preview{width:100px;height:68px}
:root[data-display-mode="tv"] :is(#themeMenu,#hubThemeMenu) .theme-preview img{width:62px;height:62px}
:root[data-display-mode="tv"] :is(#themeMenu,#hubThemeMenu) .theme-choice-copy b{font-size:1rem}
:root[data-display-mode="tv"] :is(#themeMenu,#hubThemeMenu) .theme-choice-copy i{font-size:.74rem}