/* Translucent surfaces reserve their space; text always uses the theme contrast. */
html[data-theme]{--ritm-glass:#141414e8;--ritm-glass-button:#ffffff12;scroll-padding-top:90px}
html[data-theme=light]{--ritm-glass:#ffffffe8;--ritm-glass-button:#17171708}
html[data-theme] :is(header.ritm-clean-header,.vw>.vh,.studio-head,.video-directory-head,#full>.top){position:sticky;top:env(safe-area-inset-top,0px);z-index:2;background:var(--ritm-glass);color:var(--tx);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);border-bottom:1px solid var(--ui-border);box-shadow:0 4px 18px #00000008;isolation:isolate}
html[data-theme] header.ritm-clean-header{z-index:2;margin-bottom:14px;min-height:68px}
html[data-theme] .vw>.vh{min-height:72px;gap:12px;padding:12px 16px}
html[data-theme] .vw>.vh>b{min-width:0;font-size:20px;overflow-wrap:anywhere;line-height:1.25}
html[data-theme] :is(.ritm-back-label,.artist-back,.studio-head>[data-back],.video-directory-head>[data-video-directory-back]){display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;min-width:86px;min-height:44px;flex-shrink:0;padding:8px 12px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ritm-glass-button);color:var(--tx);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ritm-back-label svg{width:20px;height:20px;flex-shrink:0}.ritm-back-label span{white-space:nowrap}
html[data-theme] #full>.top{flex-shrink:0;width:100%;padding:8px;border-radius:18px;gap:10px}
html[data-theme] #full>.top small{padding-right:0;min-width:0;font-size:10px;letter-spacing:2px}
html[data-theme] .studio-head{padding:12px 0;min-height:72px}
html[data-theme] .video-directory-head{padding:12px 0;min-height:72px}
html[data-theme] .nav,html[data-theme] .mini{background:var(--ritm-glass);color:var(--tx);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);border-color:var(--ui-border)}
html[data-theme] .nav button{color:var(--mu)}html[data-theme] .nav button.on{color:var(--active-red)}
html[data-theme] body{padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))}
html[data-theme] .vw{scroll-padding-top:90px;scroll-padding-bottom:100px;padding-bottom:100px}
html[data-theme] .vw>.vb{padding-bottom:110px}
html[data-theme] #full{scroll-padding-top:90px}
@media(min-width:900px){html[data-theme] .vw{padding-bottom:160px;scroll-padding-bottom:160px}}
@media(prefers-reduced-transparency:reduce){html[data-theme] :is(header.ritm-clean-header,.vw>.vh,.studio-head,.video-directory-head,#full>.top,.nav,.mini){background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Player header stays in the document flow and never floats over cover art. */
html[data-theme] #full>.top{position:static;top:auto;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;border-radius:0;padding:0;margin-bottom:16px;min-height:44px}
@media(max-width:859px){html[data-theme] #full>.art{max-height:min(52dvh,460px);max-width:100%;object-fit:contain}}
/* Back remains obvious over artwork and both page themes. */
html[data-theme]{--ritm-back-bg:#f3f4f6;--ritm-back-text:#171717;--ritm-back-border:#c5c7cc}
html[data-theme=light]{--ritm-back-bg:#fff;--ritm-back-border:#858991}
html[data-theme] :is(.ritm-back-label,.artist-back,.studio-head>[data-back],.video-directory-head>[data-video-directory-back]){background:var(--ritm-back-bg);color:var(--ritm-back-text);border:1px solid var(--ritm-back-border);min-height:46px;min-width:92px;padding:10px 14px;font-size:14px;font-weight:750;box-shadow:0 3px 10px #00000015}
html[data-theme] .ritm-back-label svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.5}
html[data-theme] :is(.ritm-back-label,.artist-back):focus-visible{outline:3px solid var(--active-red);outline-offset:3px}
html[data-theme] :is(.ritm-back-label,.artist-back):active{background:#e3e5e8}
/* All Back bars have a separate row, never an overlay above tabs/text. */
html[data-theme] .vw.ritm-framed{box-sizing:border-box;overflow:hidden;padding-top:env(safe-area-inset-top,0px);padding-bottom:0;scroll-padding:0}
html[data-theme] .vw.ritm-framed.open{display:grid;grid-template-rows:auto minmax(0,1fr)}
html[data-theme] .vw.ritm-framed>.vh{position:relative;top:auto;margin:0;min-height:64px;box-sizing:border-box}
html[data-theme] .ritm-scroll-pane{box-sizing:border-box;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:16px;max-height:100%;width:100%;margin:0 auto}
html[data-theme] .vw.ritm-framed>.ritm-scroll-pane{height:100%;padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
html[data-theme] #artist-studio{box-sizing:border-box;overflow:hidden;padding:env(safe-area-inset-top,0px) 0 0}
html[data-theme] #ritm-video-directory{box-sizing:border-box;overflow:hidden;padding:env(safe-area-inset-top,0px) 0 0}
html[data-theme] .ritm-framed-wrap{display:grid;grid-template-rows:auto minmax(0,1fr);box-sizing:border-box;height:100%;min-height:0;padding:0;width:100%;margin:0 auto}
html[data-theme] :is(.studio-head,.video-directory-head){position:relative;top:auto;box-sizing:border-box;margin:0;padding:12px 16px;min-height:64px}
html[data-theme] .ritm-framed-content{height:100%;padding:16px 18px calc(36px + env(safe-area-inset-bottom,0px))}
html[data-theme] #full>.top{position:relative;top:auto}
html[data-theme] .vw.ritm-framed>.vh :is(button,b){min-width:0}
@media(max-width:360px){html[data-theme] .vw.ritm-framed>.vh{gap:8px;padding:10px 12px}html[data-theme] .vw.ritm-framed>.vh>b{font-size:18px}html[data-theme] .vw.ritm-framed>.vh>.ritm-back-label{min-width:82px;padding:9px 10px}}