/* Approved A / 留白 shell. Playback and embedded site chrome retain their owners. */
html[data-music-outside="false"]{--paper:#f8fafc;--ink:#273953;--muted:#65758b;--blue:#3d6eb6;--soft:#eaf0f8}
html.dark[data-music-outside="false"]{--paper:#121c2b;--ink:#e4ebf6;--muted:#a2b0c6;--soft:#203147;--blue:#8fb7ff}
html[data-music-outside="false"] body{background:var(--paper);min-height:100dvh}
/* 2026-10-17 性能：原来用 background-attachment:fixed 让 body 背景每帧重绘整个视口；改成固定伪元素后只合成一次，视觉与 fixed 相同。 */
html:not(.dark)[data-music-outside="false"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 3% 58%,#a9cef4cc,transparent 68%),radial-gradient(ellipse at 99% 69%,#ffe2a5c9,transparent 67%)}
html.dark[data-music-outside="false"] body{background:radial-gradient(ellipse at 15% 100%,#20354d66,transparent 55%),radial-gradient(ellipse at 95% 90%,#32304050,transparent 45%),var(--paper)}
html[data-music-outside="false"] .site-header{position:relative;top:auto;height:84px;padding:0 38px;border:0;background:transparent;gap:12px;z-index:65}
.quiet-brand-icon{display:none}.quiet-home-button{font-size:13px;color:var(--muted);padding:8px 10px;min-height:44px;border-radius:10px}.quiet-home-button.active{color:var(--ink)}.quiet-home-button:hover{background:var(--soft)}
html[data-music-outside="false"] .brand .shell-bird{display:none}html[data-music-outside="false"] .quiet-brand-icon{display:block}.quiet-brand-icon .icon{width:25px;height:25px}.quiet-header-hint{font-size:11px;color:var(--muted);white-space:nowrap;margin-right:12px}
.quiet-site-menu{position:relative;margin-left:auto;display:flex;align-items:center}.quiet-sections-button{display:grid;width:42px;height:44px;place-items:center;border-radius:12px;color:var(--muted)}.quiet-sections-button:hover,.quiet-sections-button[aria-expanded=true]{background:var(--soft)}
html[data-music-outside="false"] #siteLinks{display:none;position:absolute;right:0;top:49px;min-width:150px;padding:8px;gap:3px;border:1px solid var(--line);border-radius:16px;background:var(--glass,var(--paper));backdrop-filter:blur(25px);box-shadow:0 14px 45px #1722361a;z-index:70}
html[data-music-outside="false"] #siteLinks.is-open{display:grid;animation:quiet-menu-in .18s ease-out}
html[data-music-outside="false"] #siteLinks button{padding:9px 15px;text-align:left;min-height:42px;border-radius:10px;font-size:13px}
html[data-music-outside="false"] #siteLinks button:hover{background:var(--soft)}html[data-music-outside="false"] #siteLinks button::after{display:none}
html[data-music-outside="false"] .header-actions{gap:7px;margin-left:0}html[data-music-outside="false"] #shellSearch{width:42px;padding:0;justify-content:center;border:0;background:none}html[data-music-outside="false"] #shellSearch>span:not([data-icon]),html[data-music-outside="false"] #shellSearch kbd{display:none}
html[data-music-outside="true"] .quiet-home-button,html[data-music-outside="true"] .quiet-header-hint,html[data-music-outside="true"] .quiet-sections-button{display:none}html[data-music-outside="true"] .quiet-site-menu{display:contents}
#musicView{display:block;max-width:none;min-height:calc(100dvh - 84px);background:transparent;isolation:auto}#musicView::before{display:none}#musicView.is-collection{height:auto;min-height:calc(100dvh - 84px);overflow:visible;display:block}
#musicView #mainContent,#musicView.is-collection #mainContent{display:block;max-width:1080px;margin:0 auto;padding:44px 32px 150px;overflow:visible;min-height:60vh}
#musicView #mainContent[data-view=discover]{max-width:none;margin:0;padding:0 20px 120px;min-height:calc(100dvh - 84px)}
.quiet-nav.sidebar{position:fixed;z-index:70;left:50%;top:16px;transform:translateX(-50%);display:flex;gap:4px;padding:8px 10px;margin:0;min-height:0;width:auto;border:1px solid #ffffffb5;border-radius:23px;overflow:visible;background:linear-gradient(90deg,#ff7aa836,#b06bff30 24%,#5ec8ff36 50%,#54e0c030 74%,#8b7bff30),linear-gradient(140deg,#ffffff4a,#6d8da326 52%,#ffffff1c);box-shadow:inset 0 1px 0 #ffffffa8,0 12px 35px #37516b16;backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);transition:top .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.quiet-nav .nav-button{width:72px;min-height:57px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;border:0;border-radius:16px;color:#fff!important;text-shadow:0 1px 5px #203b6266;background:transparent;font-size:10px;font-weight:450;letter-spacing:.03em;text-align:center}
.quiet-nav .nav-button .icon{filter:drop-shadow(0 1px 2px #203b6255);width:22px;height:22px;stroke-width:1.65}.quiet-nav .nav-button:hover{background:#ffffff1f;box-shadow:inset 0 1px 0 #ffffff40}.quiet-nav .nav-button:hover{transform:translateY(-2px)}
html[data-music-home=true] .quiet-nav{top:calc(45dvh - 129px);transform:translateX(-50%);box-shadow:inset 0 1px 0 #ffffffa8,0 18px 42px #37516b20}
html[data-music-outside=true] .quiet-nav{display:none!important}.mobile-nav{display:none!important}
.quiet-home{min-height:calc(100dvh - 204px);display:flex;flex-direction:column;align-items:center;padding-top:max(100px,calc(45dvh - 160px));text-align:center}
.quiet-home h1{font-size:clamp(28px,3vw,43px);font-weight:450;line-height:1.5;letter-spacing:-.035em;margin:96px 0 0;max-width:95vw;color:var(--ink)}
.quiet-home-note{font-size:13px;color:var(--muted);letter-spacing:.05em;margin:14px 0 0}
.quiet-home-search{display:flex;align-items:center;gap:13px;width:min(560px,calc(100vw - 42px));min-height:58px;padding:10px 16px;margin-top:42px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--paper) 50%,#ffffff90);box-shadow:0 8px 26px #26395105;color:var(--muted)}
.dark .quiet-home-search{background:#20304790}.quiet-home-search>.icon{width:19px;height:19px}.quiet-home-search input{border:0;outline:0;background:none;color:var(--ink);width:100%;min-width:0;padding:0;font-size:13px;min-height:34px}.quiet-home-search input::placeholder{color:var(--muted);opacity:.9}.quiet-home-search:focus-within{border-color:#8a97aa;box-shadow:0 0 0 2px #7180961a}.quiet-home-search input:focus-visible{outline:0}.quiet-home-search kbd{font:10px ui-monospace;white-space:nowrap;border:1px solid var(--line);border-radius:5px;padding:2px 5px}.quiet-home-search button{display:grid;place-items:center;min-width:44px;height:40px;border-radius:9px}.quiet-home-search button:hover{background:var(--soft)}.quiet-home-search button .icon{transform:rotate(180deg);width:18px;height:18px}.quiet-search-note{font-size:11px;color:var(--muted);margin:15px 0 0}
#musicView .page-heading{margin-bottom:27px;align-items:center}#musicView .page-heading h1{font-size:34px;font-weight:550;letter-spacing:-.035em}#musicView .heading-note{font-size:12px;margin-top:10px;line-height:1.65}
#musicView .library-filters{display:flex;gap:7px;flex-wrap:wrap;margin:-3px 0 24px;column-gap:7px}#musicView .library-filters button{border:1px solid var(--line);padding:8px 14px;border-radius:99px;font-size:12px;min-height:42px;text-decoration:none}#musicView .library-filters button.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
#musicView .list-toolbar{gap:14px;margin-bottom:24px;align-items:center}.search-field{max-width:none;flex:1;min-height:49px;border-radius:13px;background:color-mix(in srgb,var(--paper) 70%,white)}.dark .search-field{background:#20304790}.search-field input{font-size:13px;min-width:0}
#musicView .collection-viewport{display:block;overflow:visible;padding:0;min-height:0;flex:none;scrollbar-gutter:auto}.quiet-collection-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px}
.quiet-collection-grid .album-art{border-radius:15px}.quiet-collection-grid .album-caption{margin-top:12px;gap:6px}.quiet-collection-grid .album-caption>div{min-width:0}.quiet-collection-grid .album-caption strong{font-size:14px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.quiet-collection-grid .album-caption p{font-size:11px;margin-top:4px}
.quiet-collection-grid .favorite-button{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;min-width:44px;width:44px;height:44px;border-radius:11px}.quiet-collection-grid .favorite-button .icon{width:17px;height:17px}.quiet-collection-grid [data-favorite-count]{font-size:9px;white-space:nowrap;line-height:1.2;letter-spacing:0}
.quiet-card-tools{display:flex;justify-content:flex-end;gap:2px;margin-top:3px}.quiet-card-tools .icon-button{width:38px;height:38px;color:var(--muted)}.quiet-card-tools .icon{width:16px;height:16px}.quiet-card-tools .track-add-playlist{color:var(--blue)}
.collection-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin:28px 0 8px;color:var(--muted);font-size:12px}.collection-pagination .icon-button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%}.collection-pagination .next-page .icon{transform:rotate(180deg)}.collection-pagination button:disabled{opacity:.3}.quiet-page-count{font-size:11px;color:var(--muted);margin:0 0 15px}
#musicView .playlist-tile{border-radius:15px}.quiet-home-actions{display:flex;justify-content:center;gap:16px;margin-top:22px}.quiet-home-actions .text-button{font-size:12px;min-height:44px;color:var(--muted)}
@keyframes quiet-menu-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(max-width:1280px){.quiet-header-hint{display:none}}
@media(max-width:1100px){html[data-music-outside=false] .site-header{padding:0 24px}#musicView #mainContent{padding-left:28px;padding-right:28px}}
@media(min-width:761px) and (max-width:920px){html[data-music-home=false] .quiet-nav{top:86px}html[data-music-home=false] #musicView #mainContent{padding-top:105px}.quiet-collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 html[data-music-outside=false] .site-header{height:calc(76px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;flex-wrap:nowrap;gap:4px;align-content:normal}.quiet-brand-icon .icon{width:23px;height:23px}html[data-music-outside=false] .site-header .brand{font-size:14px;gap:8px}.quiet-home-button{font-size:12px;padding:7px 8px;min-height:44px}html[data-music-outside=false] #shellSearch{display:none}html[data-music-outside=false] .header-actions{gap:2px}html[data-music-outside=false] .header-actions .icon-button,.quiet-sections-button{width:40px;height:44px}html[data-music-outside=false] .shell-account{max-width:70px;min-height:40px;padding:0 9px;font-size:11px}html[data-music-outside=false] #siteLinks{top:48px;right:0;min-width:145px;display:none;width:auto;height:auto;order:0}html[data-music-outside=false] #siteLinks.is-open{display:grid}.quiet-nav.sidebar{top:calc(87px + env(safe-area-inset-top));gap:2px;padding:7px;border-radius:20px}.quiet-nav .nav-button{width:65px;min-height:54px;border-radius:14px;font-size:10px}.quiet-nav .nav-button .icon{width:20px;height:20px}html[data-music-home=true] .quiet-nav{top:calc(39dvh - 50px);transform:translateX(-50%)}
 #musicView,#musicView.is-collection{min-height:calc(100dvh - 76px - env(safe-area-inset-top))}#musicView #mainContent,#musicView.is-collection #mainContent{padding:105px 20px 145px;min-height:60vh}#musicView #mainContent[data-view=discover]{padding:0 16px 120px;min-height:calc(100dvh - 76px)}.quiet-home{min-height:calc(100dvh - 196px);padding-top:max(85px,calc(39dvh - 105px))}.quiet-home h1{font-size:27px;line-height:1.6;margin-top:65px;max-width:340px}.quiet-home-note{font-size:11px;margin-top:10px}.quiet-home-search{margin-top:30px;min-height:54px;padding:8px 13px;gap:10px}.quiet-home-search kbd{display:none}.quiet-home-search input{font-size:12px}.quiet-search-note{font-size:10px;margin-top:14px}.quiet-home-actions{gap:12px;margin-top:12px}
 #musicView .page-heading{margin-bottom:22px;gap:12px}#musicView .page-heading h1{font-size:29px}#musicView .heading-note{font-size:11px;white-space:normal}#musicView .page-heading .pill-button{width:auto;min-height:44px;padding:8px 12px;font-size:11px;flex-shrink:0}#musicView .library-filters{gap:6px;margin-bottom:18px}#musicView .library-filters button{font-size:11px;padding:7px 11px;min-height:40px}#musicView .list-toolbar{gap:10px;flex-wrap:wrap;margin-bottom:20px}.search-field{width:100%;min-height:48px;flex-basis:100%;padding:8px 13px}.search-field input{font-size:12px;min-height:32px}.list-play-actions{margin-left:auto}.quiet-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 15px}.quiet-collection-grid .album-caption strong{font-size:12px}.quiet-collection-grid .album-caption p{font-size:10px}.quiet-collection-grid [data-favorite-count]{font-size:9px}.quiet-card-tools .icon-button{width:44px;height:44px}.collection-pagination{gap:17px;font-size:11px;margin-top:25px}.quiet-page-count{font-size:10px;margin-bottom:12px}#musicView .playlist-actions{margin:0 0 20px;gap:8px}#musicView .album-grid:not(.quiet-collection-grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 15px}.mini-player{bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media(max-width:359px){html[data-music-outside=false] .site-header{padding-left:12px;padding-right:12px}.quiet-home-button{padding:7px 4px}.quiet-sections-button{width:35px}.quiet-nav .nav-button{width:61px}.quiet-home h1{font-size:24px}.quiet-card-tools{gap:0}.quiet-card-tools .icon-button{width:40px}#musicView #mainContent{padding-left:16px;padding-right:16px}}
@media(max-height:650px) and (min-width:761px){.quiet-home{padding-top:65px}.quiet-home h1{margin-top:84px;font-size:34px}html[data-music-home=true] .quiet-nav{top:130px}.quiet-home-search{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.quiet-nav.sidebar,.quiet-home-search{transition:opacity .12s}.quiet-nav .nav-button:hover{transform:none}#siteLinks.is-open{animation:none!important}}

/* One continuous liquid bar: a single flowing gradient inside the glass, plus a coloured bloom. */
/* One continuous liquid bar: the glass surface itself carries the flowing gradient. */
@keyframes quietBarFlow{0%{background-position:0% 50%,0 0}100%{background-position:100% 50%,0 0}}

/* Sliding selection thumb. */
.quiet-nav .nav-button{position:relative;z-index:1;width:60px;min-height:46px;padding:0;gap:0}
.quiet-nav-thumb{position:absolute;top:8px;left:0;height:calc(100% - 16px);width:60px;border-radius:14px;background:#ffffff2e;box-shadow:inset 0 1px 0 #ffffff66,0 6px 16px #0000001f;z-index:0;pointer-events:none;opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1),opacity .2s;will-change:transform,width}

/* Icons: a faint blue-grey edge keeps the white strokes light on the glass. */
.quiet-nav .nav-button .icon{width:23px;height:23px;stroke-width:1.6;filter:drop-shadow(.25px 0 0 #27395338) drop-shadow(-.25px 0 0 #27395338) drop-shadow(0 .25px 0 #27395338) drop-shadow(0 -.25px 0 #27395338) drop-shadow(0 1px 2px #203b6229)}

@media(prefers-reduced-motion:reduce){.quiet-nav-thumb,.library-filter-thumb{transition:none}}
#musicView .page-heading .upload-trigger{background:color-mix(in srgb,var(--paper) 70%,white);color:var(--ink);box-shadow:none;border:1px solid var(--line)}

html[data-music-outside=false] .site-header.quiet-menu-open{z-index:90}

.quiet-collection-grid>.empty-section,.quiet-collection-grid>.collection-skeleton{grid-column:1/-1}
@media(max-width:760px){
 #musicView .track-list{min-width:0;max-width:100%;width:100%}
 #musicView .track-row{display:grid;grid-template-columns:42px minmax(0,1fr) 44px 44px 44px;column-gap:4px;row-gap:5px;min-width:0;max-width:100%;width:100%;margin:0;padding:10px 0}
 #musicView .track-row .track-index,#musicView .track-row .track-duration,#musicView .track-row [data-add-next]{display:none}
 #musicView .track-row .small-cover{width:42px;height:42px;min-width:0}
 #musicView .track-row .track-description{min-width:0;width:100%;padding:0;overflow:hidden}
 #musicView .track-row .track-description strong,#musicView .track-row .track-description p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 #musicView .track-row .favorite-button{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:44px;width:44px;height:44px}
 #musicView .track-row .favorite-button .icon{width:17px;height:17px}
 #musicView .track-row [data-favorite-count]{font-size:9px;white-space:nowrap;line-height:1.2}
 #musicView .track-row .track-add-playlist,#musicView .track-row .track-more{min-width:44px;width:44px;height:44px}
 #musicView .track-row .support-button{grid-column:2/-1;justify-self:start;max-width:100%}
}
/* The greeting is a single viewport; collections keep their own document flow. */
html[data-music-outside=false][data-music-home=true],html[data-music-outside=false][data-music-home=true] body{height:100dvh;overflow:hidden;overscroll-behavior:none}
html[data-music-outside=false][data-music-home=true] #musicView{height:calc(100dvh - 84px);min-height:0;overflow:hidden}
html[data-music-outside=false][data-music-home=true] #mainContent{height:100%;min-height:0;padding-bottom:100px;overflow:hidden}
html[data-music-home=true] .quiet-home{height:100%;min-height:0}
@media(max-width:760px){html[data-music-outside=false][data-music-home=true] #musicView{height:calc(100dvh - 76px - env(safe-area-inset-top))}}
@media(max-height:650px){html[data-music-home=true] .quiet-nav{top:calc(31dvh - 44px)}html[data-music-home=true] .quiet-home{padding-top:max(60px,calc(31dvh - 90px))}html[data-music-home=true] .quiet-home h1{margin-top:65px;font-size:clamp(20px,3vw,30px)}html[data-music-home=true] .quiet-home-search{margin-top:18px;min-height:48px}html[data-music-home=true] .quiet-home-actions{margin-top:10px}}
/* Keep backdrop sampling on a clipped, untransformed child surface. */
.quiet-nav.sidebar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate}
.quiet-nav.sidebar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,#ff7aa845,#b06bff3c 24%,#5ec8ff45 50%,#54e0c03c 74%,#8b7bff3c),linear-gradient(140deg,#ffffff55,#6d8da333 52%,#ffffff24);background-size:220% 100%,100% 100%;background-position:0% 50%,0 0;animation:quietBarFlow 16s ease-in-out infinite alternate;backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);pointer-events:none}
.quiet-nav.sidebar::after{content:"";position:absolute;inset:-14px -16px;z-index:-2;border-radius:40px;background:linear-gradient(90deg,#ff7aa8cc,#b06bffb3 24%,#5ec8ffcc 50%,#54e0c0b3 74%,#8b7bffb3);background-size:200% 100%;filter:blur(24px);opacity:.32;animation:quietBarFlow 18s ease-in-out infinite alternate;pointer-events:none}

/* Keep the existing category colours; only the selection moves horizontally. */
#musicView .library-board-filters{position:relative;isolation:isolate;width:max-content;max-width:100%;flex-wrap:nowrap;overflow:visible}
#musicView .library-board-filters button{position:relative;z-index:1;flex:none;white-space:nowrap}
#musicView .library-board-filters button.active{background:transparent;box-shadow:none}
#musicView .library-filter-thumb{position:absolute;top:0;left:0;height:100%;width:60px;border-radius:99px;background:var(--ink);box-shadow:0 2px var(--blue);z-index:0;pointer-events:none;opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1),opacity .2s}
@media(prefers-reduced-motion:reduce){.quiet-nav.sidebar::before,.quiet-nav.sidebar::after{animation:none}#musicView .library-filter-thumb{transition:none}}