/* Cloud bindings keep their IDs; presentation is shared with the desktop panel. */
#mobile-section { display: none; }
.cloud-page #menu-UI { --alpha: 1; --panel-settings-alpha: var(--surface-alpha); --panel-chrome-alpha: var(--widget-alpha); overflow: clip; }
.cloud-page #menu-UI[hidden] { display: none !important; }
.cloud-page #menu-UI:not(.font-moddish):not(.theme-retro) * { font-family: "Segoe UI", Arial, sans-serif; }
.cloud-page #menu-UI .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cloud-page #menu-UI .settings { min-width: 0; width: 100%; border-radius: 8px; }
.cloud-page #menu-UI .settings-name { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cloud-page #menu-UI .field { grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr); gap: 16px; padding: 7px 0; }
.cloud-page #menu-UI .field > :last-child { min-width: 0; max-width: 100%; }
.cloud-page #menu-UI .field label { font-size: 14px; overflow-wrap: anywhere; }
.cloud-page #menu-UI .field input[type=checkbox] { justify-self: start; appearance: none; width: 38px; height: 20px; min-height: 20px; border-radius: 20px; position: relative; padding: 0; background: #555; cursor: pointer; }
.cloud-page #menu-UI .field input[type=checkbox]::after { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: #eee; transition: transform .15s; }
.cloud-page #menu-UI .field input[type=checkbox]:checked { background: var(--panel-accent); }
.cloud-page #menu-UI .field input[type=checkbox]:checked::after { transform: translateX(18px); }
.cloud-page #menu-UI .field input[type=checkbox]:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 3px; }
.cloud-page #menu-UI .hint { line-height: 1.5; font-size: 12px; margin: 8px 0; }
.cloud-page #menu-UI .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-page #menu-UI button { height: auto; min-height: 32px; white-space: normal; overflow-wrap: anywhere; }
.cloud-page #menu-UI input, .cloud-page #menu-UI select, .cloud-page #menu-UI textarea { max-width: 100%; }
.cloud-page #menu-UI .local-only-section { opacity: .57; }
.cloud-page #menu-UI .local-only-section:hover { transform: none; }
.cloud-page #menu-UI .local-only-section fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cloud-page #menu-UI .local-only-section :disabled { cursor: not-allowed; }
.cloud-page #menu-UI .local-only-badge { flex: 0 0 auto; font-size: 10px; font-weight: 600; color: #ccc; border: 1px solid #777; padding: 3px 6px; border-radius: 3px; }
.cloud-page #menu-UI .local-only-note { font-size: 12px; margin: 0 0 12px; }
.cloud-page #menu-UI .cloud-account { flex-shrink: 0; }
.cloud-page #menu-UI:not(.settings-v2):not(.settings-v3) #menu-header { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 16px; gap: 10px; }
.cloud-page #menu-UI:not(.settings-v2):not(.settings-v3) #menu-tabs { flex: 1; min-width: 0; overflow-x: auto; height: auto; }
.cloud-page #menu-UI:not(.settings-v2):not(.settings-v3) #menu-tabs .v2-nav-label { display: none; }
.cloud-page #menu-UI:not(.settings-v2):not(.settings-v3) #menu-tabs .tab-button { flex: 0 0 auto; }
.cloud-page #menu-UI #menu-tabs .tab-button.selected { border-color: var(--panel-accent); background: rgba(255,255,255,.08); color: white; }
.cloud-page #menu-UI #menu-tabs .tab-button { display: flex; align-items: center; gap: 9px; }
.cloud-page #menu-UI .cloud-page-heading { margin-bottom: 16px; }
.cloud-page #menu-UI #notice:empty { display: none; }
.cloud-page #menu-UI #section-filter { margin: 0 0 18px; }
.cloud-page #menu-UI #np-content { overflow-y: auto; }
.cloud-page #menu-UI #lyric-lines { display: block; }
.cloud-page #menu-UI #lyric-lines p { width: 100%; margin: 0; padding: 14px 10px; text-align: center; }
.cloud-page #menu-UI .b-area { height: auto; min-height: 22px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.cloud-page #menu-UI #classic-player { display: none; }
.cloud-page #menu-UI:not(.settings-v2):not(.settings-v3) #classic-player { display: block; margin-bottom: 20px; }
.cloud-page #menu-UI #np-progress { width: 100%; height: 4px; margin: 16px 0 8px; accent-color: var(--panel-accent); }
.cloud-page #menu-UI #np-time { display: block; font-size: 10px; }
.cloud-page #menu-UI:not(.settings-v2):not(.settings-v3) #v2-topbar { display: none; }
.cloud-page #menu-UI #community-rail { min-width: 0; }
.cloud-page #menu-UI.settings-v2 #v2-topbar { grid-column: 2 / 4; grid-row: 1; }
.cloud-page #menu-UI.settings-v3 #v2-topbar { grid-column: 2; grid-row: 1; }
.cloud-page #menu-UI.settings-v3 #sections, .cloud-page #menu-UI.settings-v3 .cloud-page-heading,
.cloud-page #menu-UI.settings-v3 #notice { width: min(100%, 900px); margin-left: auto; margin-right: auto; }
.cloud-page #menu-UI.settings-v3 #section-filter { display: block; width: min(100%, 900px); margin-left: auto; margin-right: auto; }
.cloud-page #menu-UI.settings-v2 .cloud-account, .cloud-page #menu-UI.settings-v3 .cloud-account { margin-top: auto; display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 12px; border-top: 1px solid #ffffff20; }
.cloud-page #menu-UI.settings-v2 #now-playing-sidebar.open, .cloud-page #menu-UI.settings-v3 #now-playing-sidebar.open { display: flex; transform: none; pointer-events: auto; visibility: visible; opacity: 1; }
.cloud-page #menu-UI.settings-v3 .settings.is-collapsed > :not(.settings-name) { display: none; }
.cloud-page #menu-UI.settings-v3 #widgets-toggle { display: none; }
.cloud-page #menu-UI.theme-album::before { filter: blur(var(--album-blur, 28px)); background-image: var(--album-background-image); }
.cloud-page #menu-UI #v2-topbar .track-title { min-width: 0; }
.cloud-page #menu-UI #v2-topbar .track-title strong, .cloud-page #menu-UI #v2-topbar .track-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-page #menu-UI #top-art { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.cloud-page #menu-UI.settings-v3 #top-art { width: 42px; height: 42px; }
.cloud-page #menu-UI #track-progress { min-width: 50px; }
body.cloud-page #menu-UI:is(.settings-v2, .settings-v3) #v2-topbar { display: flex; align-items: center; min-width: 0; gap: 12px; }
body.cloud-page #menu-UI #top-art { width: 48px; height: 48px; flex: 0 0 48px; object-fit: cover; }
body.cloud-page #menu-UI .track-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.cloud-page #menu-UI #track-progress { flex: 1; min-width: 50px; height: 4px; }
body.cloud-page #menu-UI #v2-topbar > button { width: auto; flex: 0 0 auto; }
@media (max-width: 1240px) {
  .cloud-page #menu-UI.settings-v2 #v2-topbar { grid-column: 2; }
}
@media (max-width: 900px) {
  body.cloud-page #menu-UI:is(.settings-v2, .settings-v3) #menu-header { flex-direction: row; flex-wrap: wrap; height: auto; min-height: 112px; padding: 10px; gap: 8px; }
  body.cloud-page #menu-UI:is(.settings-v2, .settings-v3) #app-title { width: auto; flex: 1; font-size: 18px; padding: 0; }
  body.cloud-page #menu-UI:is(.settings-v2, .settings-v3) #menu-tabs { flex-direction: row; flex: 0 0 100%; order: 3; width: 100%; height: 40px; padding: 0; overflow: auto hidden; }
  body.cloud-page #menu-UI:is(.settings-v2, .settings-v3) #menu-tabs > .tab-button { flex: 0 0 auto; width: auto; min-width: 0; height: 34px; min-height: 34px; padding: 6px 10px; font-size: 11px; }
  .cloud-page #menu-UI:not(.settings-v2):not(.settings-v3) #v2-topbar { display: flex; }
  .cloud-page #menu-UI.settings-v2 #v2-topbar, .cloud-page #menu-UI.settings-v3 #v2-topbar { grid-column: 1; grid-row: 2; }
  .cloud-page #menu-UI.settings-v2 #tab-area, .cloud-page #menu-UI.settings-v3 #tab-area { grid-column: 1; grid-row: 3; }
  .cloud-page #menu-UI.settings-v2 .cloud-account, .cloud-page #menu-UI.settings-v3 .cloud-account { display: flex; align-items: center; margin: 0; padding: 0; border: 0; }
  .cloud-page #menu-UI.settings-v2 #menu-header, .cloud-page #menu-UI.settings-v3 #menu-header { grid-column: 1; grid-row: 1; overflow: auto; }
  .cloud-page #menu-UI #menu-header { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; height: auto; min-height: 112px; gap: 8px; padding: 10px; }
  .cloud-page #menu-UI #app-title { width: auto; flex: 1; font-size: 18px; padding: 0; }
  .cloud-page #menu-UI #app-title::after { display: none; }
  .cloud-page #menu-UI #menu-tabs { order: 3; display: flex; flex-direction: row; width: 100%; height: 40px; flex: 0 0 100%; overflow-x: auto; overflow-y: hidden; padding: 0; gap: 5px; }
  .cloud-page #menu-UI #menu-tabs > .tab-button { flex: 0 0 auto; width: auto; min-width: 0; height: 34px; min-height: 34px; padding: 6px 10px; font-size: 11px; }
  .cloud-page #menu-UI #menu-tabs .v2-nav-label { display: none; }
  .cloud-page #menu-UI .cloud-account { margin-left: auto; }
  .cloud-page #menu-UI.settings-v2, .cloud-page #menu-UI.settings-v3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 80px minmax(0, 1fr); }
  .cloud-page #menu-UI #account-name { display: none; }
  .cloud-page #menu-UI #community-rail:not(.open), .cloud-page #menu-UI #now-playing-sidebar:not(.open) { display: none; }
  .cloud-page #menu-UI #now-playing-sidebar.open, .cloud-page #menu-UI #community-rail.open { position: fixed; top: 220px; right: 0; bottom: 0; width: min(336px, 100%); z-index: 20; display: flex; overflow-y: auto; }
}
@media (max-width: 600px) {
  body.cloud-page #menu-UI:is(.settings-v2, .settings-v3) #menu-header { flex-direction: row; flex-wrap: wrap; height: auto; min-height: 112px; padding: 10px; }
  body.cloud-page #menu-UI:is(.settings-v2, .settings-v3) #app-title { width: auto; flex: 1; font-size: 18px; padding: 0; }
  body.cloud-page #menu-UI:is(.settings-v2, .settings-v3) #menu-tabs { flex-direction: row; flex: 0 0 100%; order: 3; width: 100%; height: 40px; padding: 0; overflow: auto hidden; }
  body.cloud-page #menu-UI:is(.settings-v2, .settings-v3) #menu-tabs > .tab-button { flex: 0 0 auto; width: auto; min-width: 0; height: 34px; min-height: 34px; padding: 6px 10px; font-size: 11px; }
  .cloud-page #menu-UI #menu-header { padding: 10px; gap: 8px; }
  .cloud-page #menu-UI #menu-tabs { width: 100%; }
  .cloud-page #menu-UI .cloud-account { flex-wrap: wrap; font-size: 11px; }
  .cloud-page #menu-UI #tab-area { padding: 16px 12px 40px; }
  .cloud-page #menu-UI .settings { padding: 16px; }
  .cloud-page #menu-UI .field { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .cloud-page #menu-UI .field:has(input[type=checkbox]) { grid-template-columns: minmax(0, 1fr) 38px; }
  .cloud-page #menu-UI .field label { font-size: 12px; }
  .cloud-page #menu-UI #top-art { width: 40px; height: 40px; }
  .cloud-page #menu-UI #v2-topbar { gap: 8px; padding: 10px; flex-wrap: wrap; }
  .cloud-page #menu-UI #track-progress, .cloud-page #menu-UI #track-time { display: none; }
  .cloud-page #menu-UI .track-title { flex: 1; }
  .cloud-page #menu-UI #v2-topbar button { min-height: 28px; padding: 4px 7px; font-size: 10px; }
}
.cloud-notice-page { margin: 0; background: #141516; color: #eee; font: 16px/1.6 Arial, sans-serif; }
.cloud-notice-page main { max-width: 780px; padding: 28px 20px; margin: 0 auto; overflow-wrap: anywhere; }
.cloud-notice-page h1 { font-size: 28px; line-height: 1.25; }
.cloud-notice-page h2 { font-size: 20px; margin-top: 28px; }
.cloud-notice-page a { color: #8ecfff; }
.cloud-page #signed-out { max-width: 680px; padding: 24px; margin: 0 auto; overflow-wrap: anywhere; }
.cloud-page .status-consent { margin: 16px 0; }
.cloud-page .status-disclosure-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cloud-page .status-consent label { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0; line-height: 1.5; }
.cloud-page .status-consent input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; }
@media (max-width: 600px) {
  body.cloud-page #menu-UI { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr); width: 100%; height: 100dvh; }
  body.cloud-page #menu-UI #menu-contents { display: contents; }
  body.cloud-page #menu-UI #menu-header { grid-column:1;grid-row:1; min-height:0!important; padding:8px 12px!important; gap:8px; overflow:visible; }
  body.cloud-page #menu-UI #menu-tabs { display:none!important; }
  body.cloud-page #menu-UI #mobile-section { display:block;order:3;flex:0 0 100%;width:100%;min-height:44px;font-size:16px;padding:8px 12px; }
  body.cloud-page #menu-UI .cloud-account { gap:8px;margin:0 0 0 auto; }
  body.cloud-page #menu-UI .cloud-account label, body.cloud-page #menu-UI .cloud-account a { display:none; }
  body.cloud-page #menu-UI #layout { width:92px;min-height:44px;font-size:14px; }
  body.cloud-page #menu-UI #sign-out { min-height:44px;font-size:12px;padding:6px 8px; }
  body.cloud-page #menu-UI #app-title { font-size:18px;min-width:0; }
  body.cloud-page #menu-UI #app-title small { display:none; }
  body.cloud-page #menu-UI #v2-topbar { display:flex;grid-column:1;grid-row:2;min-height:68px;height:auto;flex-wrap:nowrap; }
  body.cloud-page #menu-UI #top-art { width:36px;height:36px;flex-basis:36px; }
  body.cloud-page #menu-UI #tab-area { grid-column:1;grid-row:3;min-width:0;min-height:0;width:100%;height:auto;overflow-y:auto;overscroll-behavior:contain;padding:16px 12px calc(24px + env(safe-area-inset-bottom)); }
  body.cloud-page #menu-UI #tab-area input:not([type=checkbox]), body.cloud-page #menu-UI #tab-area select, body.cloud-page #menu-UI #tab-area textarea { font-size:16px;min-height:44px;width:100%;user-select:text; }
  body.cloud-page #menu-UI #tab-area button { min-height:44px; }
  body.cloud-page #menu-UI .actions > button { flex:1 1 130px; }
  body.cloud-page #menu-UI .settings-name { flex-wrap:wrap; }
  body.cloud-page #menu-UI .cloud-page-heading { gap:10px; }
  body.cloud-page #menu-UI .status-consent label { font-size:13px; }
  body.cloud-page #menu-UI #classic-player { display:none; }
  body.cloud-page #menu-UI #community-rail:not(.open), body.cloud-page #menu-UI #now-playing-sidebar:not(.open) { display:none; }
  body.cloud-page #menu-UI #now-playing-sidebar.open, body.cloud-page #menu-UI #community-rail.open { top:var(--cloud-drawer-top,192px);max-width:100%; }
  body.cloud-page .cache-dialog { width:calc(100% - 24px);max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:12px; }
  body.cloud-page #menu-UI .cache-table-wrap { overflow-x:auto; }
}