/* Web glass approximation; geometry mirrors the reference without duplicating playback. */
.mobile-dock{display:none}
@media(max-width:800px){
 .has-mobile-dock{--dock-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 .has-mobile-dock .mobile-menu-button{display:none}
 .has-mobile-dock .topbar{grid-template-columns:minmax(0,1fr);height:auto;gap:15px;padding-top:max(12px,env(safe-area-inset-top,0px))}
 .has-mobile-dock .mobile-brand{display:none}
 .has-mobile-dock .top-actions{position:static;grid-column:1/-1;width:100%;margin:0}
 .has-mobile-dock .search{width:100%;flex:1}
 .has-mobile-dock .workspace,.has-mobile-dock.album-page .workspace{padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))}
 .has-mobile-dock.personal-sheet-page #content{padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))}
 .mobile-dock{display:block;position:fixed;z-index:10;left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));bottom:var(--dock-bottom);height:116px;pointer-events:none;--dock-duration:420ms;--dock-ease:cubic-bezier(.22,.8,.25,1)}
 .mobile-dock .dock-navigation,.mobile-dock .dock-account,.mobile-dock #mini-player{pointer-events:auto}
 .dock-navigation{position:absolute;bottom:0;left:0;width:calc(100% - 66px);height:54px;border-radius:29px;padding:4px;overflow:hidden;transition:width var(--dock-duration) var(--dock-ease);isolation:isolate}
 .dock-links{height:44px;display:grid;grid-template-columns:repeat(var(--dock-count,3),minmax(0,1fr));position:relative;transition:opacity 160ms ease,transform var(--dock-duration) var(--dock-ease)}
 .dock-links:before{content:'';position:absolute;left:0;top:0;bottom:0;width:calc(100% / var(--dock-count,3));border-radius:24px;background:var(--selected);box-shadow:inset 0 1px 1px #ffffff55;transform:translateX(calc(var(--dock-active,0) * 100%));transition:transform 320ms var(--dock-ease);pointer-events:none}
 .dock-links a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;color:var(--muted);font-size:10px;font-weight:600;text-decoration:none;white-space:nowrap;min-height:44px}
 .dock-links a .icon{width:21px;height:21px}.dock-links a.is-active{color:var(--accent)}
 .dock-account{position:absolute;right:0;bottom:0;width:54px;height:54px}
 .dock-account #account-open{display:flex;position:static;width:54px;height:54px;border-radius:50%;margin:0;transition:transform 180ms ease}
 .dock-account #account-open .icon{width:23px;height:23px}
 .mobile-dock.is-personal .dock-account #account-open{color:var(--accent)}
 .mobile-dock.is-personal .dock-links:before{opacity:0}
 .dock-reveal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--accent);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 150ms ease}
 .dock-reveal .icon{width:24px;height:24px}
 .mobile-dock #mini-player{position:absolute;left:0;right:0;bottom:64px;width:auto;height:52px;min-height:0;transform:none;border-radius:28px;padding:6px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;transition:left var(--dock-duration) var(--dock-ease),right var(--dock-duration) var(--dock-ease),bottom var(--dock-duration) var(--dock-ease);}
 .mobile-dock #mini-player .now-playing{grid-column:1;gap:9px;min-width:0}
 .mobile-dock #mini-player .now-playing>img{width:36px;height:36px;flex:none;border-radius:8px;cursor:pointer}
 .mobile-dock #mini-player .now-title{padding:0;text-align:left;min-width:0}
 .mobile-dock #mini-player .now-title strong{font-size:12px;max-width:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mobile-dock #mini-player .now-title small{font-size:10px;margin-top:2px}
 .mobile-dock #mini-player .transport{grid-column:2;display:block}
 .mobile-dock #mini-player .transport-buttons{gap:0}
 .mobile-dock #mini-player [data-action=cycle-mode],.mobile-dock #mini-player [data-action=previous],.mobile-dock #mini-player .player-extras,.mobile-dock #mini-player .timeline{display:none}
 .mobile-dock #mini-player [data-action=toggle],.mobile-dock #mini-player [data-action=next]{width:40px;height:40px}
 .mobile-dock #mini-player [data-action=next]{overflow:hidden;transition:width var(--dock-duration) var(--dock-ease),opacity 160ms ease}
 .mobile-dock.is-compact .dock-navigation{width:54px}
 .mobile-dock.is-compact .dock-links{opacity:0;transform:scale(.78);pointer-events:none}
 .mobile-dock.is-compact .dock-reveal{opacity:1;visibility:visible;pointer-events:auto;transition-delay:120ms}
 .mobile-dock.is-compact #mini-player{left:64px;right:64px;bottom:1px}
 .mobile-dock.is-compact #mini-player [data-action=next]{width:0;opacity:0;visibility:hidden;pointer-events:none}
 .has-mobile-dock .toast{bottom:calc(144px + env(safe-area-inset-bottom,0px));z-index:25}
 body.player-expanded .mobile-dock,body.video-open .mobile-dock{visibility:hidden;pointer-events:none}
 html[data-motion=off] .mobile-dock{--dock-duration:0ms}
 html[data-motion=off] .mobile-dock *{transition:none!important}
 @media(prefers-reduced-motion:reduce){html:not([data-motion=force]) .mobile-dock *{transition:none!important}}
 @media(prefers-reduced-transparency:reduce){.mobile-dock .glass{background:var(--background);backdrop-filter:none;-webkit-backdrop-filter:none}}
}
@media(max-width:800px){
 .dock-links a{color:var(--ink)}
 .dock-links a.is-active{color:var(--accent)}
 .mobile-dock .dock-navigation,.mobile-dock .dock-account .glass{background:linear-gradient(120deg,#ffffff44,#ffffff0d),var(--glass)}
 html[data-appearance=dark] .mobile-dock .dock-navigation,html[data-appearance=dark] .mobile-dock .dock-account .glass{background:linear-gradient(120deg,#ffffff12,#ffffff02),var(--glass)}
}

@media(max-width:800px){.mobile-dock.without-account .dock-navigation{width:100%}.mobile-dock.without-account.is-compact .dock-navigation{width:54px}.mobile-dock.without-account.is-compact #mini-player{right:0}}
@media(max-width:360px){
 .mobile-dock.is-compact .dock-navigation{width:44px;height:44px;bottom:5px}
 .mobile-dock.is-compact .dock-account{width:44px;height:44px;bottom:5px}
 .mobile-dock.is-compact .dock-account #account-open{width:44px;height:44px}
 .mobile-dock.is-compact #mini-player{left:52px;right:52px;padding-inline:8px}
 .mobile-dock.is-compact #mini-player .now-playing{gap:6px}
 .mobile-dock.is-compact #mini-player .now-playing>img{width:32px;height:32px}
}
@media(max-width:800px){body.player-expanded .mobile-dock,body.video-open .mobile-dock{opacity:0}body.player-expanded .mobile-dock *,body.video-open .mobile-dock *{pointer-events:none!important;visibility:hidden!important}}

/* A delayed, non-blocking indicator for slow page requests. */
.navigation-placeholder{min-height:260px}
#content{position:relative}
.page-loading-notice{position:absolute;top:110px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:13px;padding:22px 30px;border-radius:24px;background:rgba(245,246,249,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:14px;letter-spacing:.06em;white-space:nowrap;pointer-events:none;color:inherit}
.page-loading-ring{width:25px;height:25px;border:2px solid currentColor;border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;opacity:.65;animation:page-loading-spin .85s linear infinite}
@keyframes page-loading-spin{to{transform:rotate(360deg)}}
html[data-appearance=dark] .page-loading-notice{background:rgba(35,37,42,.88)}
html[data-motion=off] .page-loading-ring{animation:none}
@media(prefers-reduced-motion:reduce){html:not([data-motion=force]) .page-loading-ring{animation:none}}

#mini-player .music-player-empty{display:flex;text-align:left;align-items:center;gap:10px;width:100%;min-width:0;color:var(--ink);text-decoration:none}
.empty-player-symbol{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--selected)}
.empty-player-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.empty-player-copy strong{font-size:12px;font-weight:600}
.empty-player-copy small{font-size:10px;color:var(--muted)}
.empty-player-action{font-size:12px;color:var(--accent);white-space:nowrap;padding-inline:6px}
.mobile-dock #mini-player .music-player-empty{grid-column:1/-1;min-height:40px}

/* Server-rendered shell remains in its final geometry before modules initialize. */
.icon.shell-icon{background:none;mask:none;-webkit-mask:none}.shell-icon svg{display:block;width:100%;height:100%}
.icon[data-icon]:not([style]){background:transparent}
@media(max-width:800px){
 body:has(.boot-dock) .mobile-brand,body:has(.boot-dock) .mobile-menu-button{display:none}
 body:has(.boot-dock) .topbar{grid-template-columns:minmax(0,1fr);height:auto;gap:15px;padding-top:max(12px,env(safe-area-inset-top,0px))}
 body:has(.boot-dock) .top-actions{position:static;grid-column:1/-1;width:100%;margin:0}
 body:has(.boot-dock) .search{width:100%;flex:1}
 body:has(.boot-dock) .workspace{padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))}
 .boot-dock{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 body:has(.boot-dock) #mini-player{position:fixed;z-index:10;left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));width:auto;height:52px;min-height:0;transform:none;border-radius:28px;padding:6px 10px}
 body:has(.boot-dock) #account-open{position:fixed;z-index:11;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));width:54px;height:54px;border-radius:50%;margin:0}
}