/* Shared chrome: a shaped color ramp, gloss layer, and continuous bevel.
   Components supply colors and, where needed, a round face or deeper shadow. */
:is(.glossy,.toolbar-button,.menu-glyph,.cover-tile,.cover-reflection,.mini-play,.sheet-navbar,.photo-toolbar,.app-view,.gear-button,.video-controls,.now-playing,.silver-button,:where(.player-modes) button){
 --chrome-1:var(--b1,var(--tool-1));--chrome-2:var(--b2,var(--tool-2));--chrome-3:var(--b3,var(--tool-3));
 background-image:var(--chrome-texture,linear-gradient(transparent,transparent)),var(--chrome-gloss,var(--chrome-sheen)),var(--chrome-paint,linear-gradient(180deg,var(--chrome-1) 0%,color-mix(in srgb,var(--chrome-1) 65%,var(--chrome-2)) 16%,var(--chrome-2) 48%,color-mix(in srgb,var(--chrome-2) 78%,var(--chrome-3)) 50%,var(--chrome-3) 100%));
 box-shadow:var(--chrome-shadow,var(--chrome-bevel));
}
:is(.glossy,.toolbar-button,.mini-play,.gear-button,.silver-button,:where(.player-modes) button):active{
 background-image:linear-gradient(rgba(0,0,0,.06),transparent),linear-gradient(180deg,var(--chrome-3),var(--chrome-2) 50%,var(--chrome-1));
 box-shadow:var(--chrome-pressed);
}
:is(.glossy,.toolbar-button,.cover-tile,.mini-play,.gear-button,.silver-button,:where(.player-modes) button):focus-visible{
 box-shadow:var(--chrome-shadow,var(--chrome-bevel)),0 0 6px 3px #81b7ed99;
}
/* Preserve the 1px box geometry; paint the gradient from the border edge so
   a transparent top border cannot repeat the gradient's dark bottom row. */
.navbar{height:calc(var(--nav-height) + var(--safe-top));padding:var(--safe-top) max(9px,env(safe-area-inset-right)) 0 max(9px,env(safe-area-inset-left));position:relative;display:flex;align-items:center;justify-content:space-between;z-index:20;flex-shrink:0;background-image:var(--noise),linear-gradient(var(--nav-top),var(--nav-mid) 50%,var(--nav-bot));background-origin:border-box;border-top:1px solid transparent;border-bottom:1px solid var(--nav-edge);box-shadow:0 1px 3px #0006;color:#fff;text-shadow:0 -1px #0009}
.nav-title{position:absolute;left:85px;right:85px;text-align:center;font-size:18px;line-height:1.1;font-weight:700;letter-spacing:.6px;text-shadow:0 -1px 0 rgba(12,31,48,.9),0 1px 0 rgba(255,255,255,.18);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.gear-button,.back-button{--chrome-1:color-mix(in srgb,var(--nav-control-top) 84%,white);--chrome-2:var(--nav-control-top);--chrome-3:var(--nav-control-bottom);height:31px;color:#e7eef3;text-shadow:0 -1px #0009}
.gear-button{--chrome-shadow:inset 0 1px 2px #0005,inset 0 -1px 0 #ffffff1a,0 1px 0 #ffffff30;border:1px solid #1a3e5c;border-radius:5px}
.gear-button{width:37px;padding:0;margin-left:auto;display:grid;place-items:center}.gear-button .icon{display:block;width:25px;height:25px;filter:drop-shadow(0 -1px #0008) drop-shadow(0 1px #8fabc2)}
.back-button{position:relative;display:flex;align-items:center;justify-content:center;padding:0 10px 0 18px;margin-left:0;font-size:12px;font-weight:bold;z-index:2;max-width:92px;background:none;border:0;box-shadow:none}
.back-shape{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 1px 1px #0005)}
.back-label{position:relative;z-index:1}
.back-stop-top{stop-color:var(--chrome-1)}.back-stop-mid{stop-color:var(--chrome-2)}.back-stop-step{stop-color:color-mix(in srgb,var(--chrome-2) 78%,var(--chrome-3))}.back-stop-bottom{stop-color:var(--chrome-3)}
.back-body{stroke:#183c59;stroke-width:1}.back-highlight{stroke:#ffffff59;stroke-width:1;stroke-linecap:round}.back-shade{stroke:#102d46aa;stroke-width:1;stroke-linecap:round}
.back-button:active .back-stop-top{stop-color:var(--chrome-3)}.back-button:active .back-stop-bottom{stop-color:var(--chrome-1)}.back-button:active .back-highlight{stroke:#0003}
.tabbar{height:calc(var(--tab-height) + var(--safe-bottom));flex-shrink:0;padding-bottom:var(--safe-bottom);background:linear-gradient(var(--tab-top),var(--tab-mid) 50%,var(--tab-bot));border-top:1px solid #14181b;box-shadow:inset 0 1px #ffffff38;z-index:20}.tabs{max-width:720px;display:grid;grid-template-columns:repeat(var(--tab-count),minmax(0,1fr));height:49px;margin:auto}.tab{display:flex;align-items:center;justify-content:center;color:#d6d9dc;border-right:1px solid #1d2025;box-shadow:1px 0 #ffffff14,inset 0 1px #ffffff1f;position:relative}.tab:first-child{border-left:1px solid #1d2025}.tab .icon{width:30px;height:30px;filter:drop-shadow(0 -1px #0008) drop-shadow(0 1px 1px #0009)}.tab.active{background:linear-gradient(var(--tab-on-top),var(--tab-on-bot));box-shadow:inset 0 0 5px #0005,inset 0 1px #ffffff4d;color:#eff8ff}.tab-label{display:none}.tab:active{background:linear-gradient(#2d3238,#4b5157)}
.glossy,.toolbar-button{--b1:var(--btn-blue-1);--b2:var(--btn-blue-2);--b3:var(--btn-blue-3);border:1px solid #24496f;border-radius:5px;color:white;text-shadow:0 -1px #0009;font-weight:bold;padding:8px 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px}
.glossy.red{--b1:var(--btn-red-1);--b2:var(--btn-red-2);--b3:var(--btn-red-3);border-color:#9c2427}.glossy.green{--b1:var(--green-1);--b2:#55b13d;--b3:var(--green-3);border-color:#2c7a1e}.glossy.pill{border-radius:18px}.toolbar-button{--b1:var(--tool-1);--b2:var(--tool-2);--b3:var(--tool-3);padding:6px 12px}.toolbar-button .icon{width:20px;height:20px}
.count-badge{background:#8e969f;box-shadow:inset 0 1px 2px #0003,0 1px #fff;color:#fff;border-radius:4px;min-width:24px;padding:2px 6px;text-align:center;font-weight:bold;font-size:12px;text-shadow:0 -1px #0003}
.toggle{position:relative;width:76px;height:28px;border:1px solid #777;border-radius:16px;background:linear-gradient(#aaa,#e5e5e5 50%,#fafafa 51%);box-shadow:inset 0 1px 3px #0007;color:#888;text-shadow:0 1px #fff;font-weight:bold;padding:0 8px 0 28px}.toggle::after{content:"";width:26px;height:26px;border-radius:50%;background:linear-gradient(#fff,#babfc4);box-shadow:0 1px 3px #0008,inset 0 0 0 1px white;position:absolute;left:0;top:0}.toggle[aria-checked="true"]{background:linear-gradient(var(--toggle-on-1),var(--toggle-on-2));color:white;text-shadow:0 -1px #0005;padding:0 29px 0 6px}.toggle[aria-checked="true"]::after{left:48px}
.slider{--fill:0%;appearance:none;-webkit-appearance:none;min-width:0;width:100%;height:9px;border-radius:8px;border:1px solid #252a30;background:linear-gradient(90deg,var(--slider-fill) var(--fill),#222930 var(--fill));box-shadow:inset 0 1px 3px #000a,0 1px #ffffff30;cursor:pointer}.slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border:1px solid #737e88;border-radius:50%;background:radial-gradient(circle at 40% 25%,#fff,#b5bcc2 80%);box-shadow:0 1px 3px #0008,inset 0 0 0 3px #e4e9ec}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(#fff,#a1aab2);border:1px solid #74808a;box-shadow:0 1px 3px #0008}
.spinner{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;animation:spin 1s steps(12) infinite;z-index:3}.spinner i{position:absolute;background:#f5f5f5;width:3px;height:8px;left:14px;top:0;border-radius:2px;transform-origin:1.5px 15px;transform:rotate(calc(var(--i)*30deg));opacity:calc((var(--i) + 1)/12)}@keyframes spin{to{transform:rotate(360deg)}}