/* Aoede Vitrine. Apple Music layout, Vitreo Launcher's clear/regular materials.
 * Design reference: sPROFFEs/vitreo-launcher at dfa8ccda84a3db4b20e394d3d4615716b8f0023a
 * (GlassRenderer.kt / GlassPanel.kt / glass.agsl). Original browser CSS: paired
 * reflective rims, directional light, a diffuse centre and restrained press feedback.
 * Native AGSL refraction is not run on page content. Shared coverage: theme_glass.css.
 */
.theme-preview-vitrine { background: radial-gradient(at 10% 10%, #efafc6, transparent 65%), radial-gradient(at 90% 90%, #88bacc, transparent 65%), #e1e4f1; }
.theme-preview-vitrine .theme-preview-sidebar { background: #ffffff36; border: 1px solid #ffffffa0; border-radius: 12px; box-shadow: inset 1px 1px 3px #fff9, inset -1px -2px 4px #42547225; }
.theme-preview-vitrine .theme-preview-cards { top: 28px; bottom: 46px; }
.theme-preview-vitrine .theme-preview-cards i { border-radius: 8px; background: linear-gradient(160deg, #eb8f85, #a43061); }
.theme-preview-vitrine .theme-preview-cards i:nth-child(2) { background: linear-gradient(160deg, #bba4d9, #395b8c); }
.theme-preview-vitrine .theme-preview-cards i:nth-child(3) { background: linear-gradient(160deg, #efca7b, #a25c38); }
.theme-preview-vitrine .theme-preview-player { height: 22px; background: #ffffff45; border: 1px solid #ffffffa0; border-radius: 999px; box-shadow: inset 1px 2px 4px #fffb, inset -1px -2px 4px #24334c20, 0 4px 8px #34466318; }
.vitrine-home-title { display: none; }

html[data-theme="vitrine"] {
    --square-base: #f5f5f8;
    --square-ink: #202027;
    --square-muted: #5e5e6b;
    --square-faint: #6a6a77;
    --square-film: rgba(250, 251, 255, .44);
    --square-film-strong: rgba(250, 251, 255, .72);
    --square-content: rgba(255, 255, 255, .56);
    --square-wash: rgba(70, 80, 110, .065);
    --square-rim: rgba(255, 255, 255, .74);
    --square-line: rgba(60, 65, 90, .13);
    --square-overlay: rgba(30, 34, 53, .28);
    --square-primary: #bd2547;
    --square-on-primary: #fff;
    --vitreo-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m5 11 4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --square-glint: rgba(255, 255, 255, .46);
    --square-blur: blur(24px) saturate(1.65);
    --vitreo-light: rgba(255, 255, 255, .85);
    --vitreo-inner: rgba(255, 255, 255, .30);
    --vitreo-shade: rgba(44, 52, 80, .10);
    --vitreo-rim: inset 0 1px 0 var(--vitreo-light), inset 0 -1px 0 var(--vitreo-shade);
    --vitreo-sheen: linear-gradient(155deg, var(--square-glint), transparent 48%);
    --square-shadow: var(--vitreo-rim), 0 8px 28px #27365412, 0 2px 5px #27365408;
    --accent-rgb: 189, 37, 71;
    --sidebar-width: 232px;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
}
html[data-theme="vitrine"][data-sidebar-mode="collapsed"] { --sidebar-width: 76px; }
@media (prefers-color-scheme: dark) {
    html[data-theme="vitrine"] {
        --square-base: #111216;
        --square-ink: #f7f7fc;
        --square-muted: #c3c5d2;
        --square-faint: #afb2c4;
        --square-film: rgba(39, 43, 58, .42);
        --square-film-strong: rgba(31, 35, 49, .76);
        --square-content: rgba(41, 45, 61, .46);
        --square-wash: rgba(213, 222, 255, .075);
        --square-rim: rgba(236, 242, 255, .28);
        --square-line: rgba(222, 229, 255, .14);
        --square-overlay: rgba(4, 6, 16, .54);
        --square-primary: #ff8ba3;
        --square-on-primary: #310e1b;
        --vitreo-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m5 11 4 4 8-9' fill='none' stroke='%23310e1b' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        --square-glint: rgba(225, 235, 255, .12);
        --vitreo-light: rgba(240, 245, 255, .48);
        --vitreo-inner: rgba(220, 233, 255, .09);
        --vitreo-shade: rgba(0, 0, 10, .25);
        --square-shadow: var(--vitreo-rim), 0 10px 32px #0004, 0 2px 6px #0002;
        --accent-rgb: 255, 139, 163;
    }
}

/* Clear material belongs to floating chrome; regular material protects menu text. */
html[data-theme="vitrine"] body::before { display: block; opacity: .26; filter: blur(58px) saturate(1.25); background: var(--square-artwork, radial-gradient(at 5% 5%, #ef9eb9, transparent 60%), radial-gradient(at 90% 85%, #78b9d4, transparent 65%), #b8bedb) center / cover; }
html[data-theme="vitrine"] :is(.sidebar, .top-bar, .m-topbar, .m-bottom-nav, .player-footer, .queue-panel, .lyrics-panel, .modal, .monitor-modal, .auth-browser-dialog, .user-menu-panel, .m-more-panel, .track-context-menu, .atp-flyout, .create-menu, .tas-sheet, .toast-msg, .pwa-banner, .update-toast-card, .fs-actions, .fs-volume-panel) {
    background-image: var(--vitreo-sheen) !important;
    border: 1px solid var(--square-rim) !important;
    box-shadow: var(--square-shadow) !important;
    backdrop-filter: var(--square-blur) !important;
    -webkit-backdrop-filter: var(--square-blur) !important;
}
html[data-theme="vitrine"] :is(.modal, .monitor-modal, .auth-browser-dialog, .user-menu-panel, .m-more-panel, .create-menu, .tas-sheet, .toast-msg, .pwa-banner, .update-toast-card) { background-color: var(--square-film-strong) !important; border-radius: 26px !important; }
html[data-theme="vitrine"] :is(.track-context-menu, .atp-flyout) { background-color: var(--square-film-strong) !important; border-radius: 14px !important; }
html[data-theme="vitrine"] :is(.modal-overlay, .monitor-modal-backdrop, .auth-browser-modal, .tas-overlay) { background: var(--square-overlay) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="vitrine"] :is(.user-menu-item, .create-option, .tas-action-btn) { min-height: 44px; border-radius: 14px; }
html[data-theme="vitrine"] :is(.ctx-item, .atp-item) { min-height: 38px; border-radius: 8px; }
html[data-theme="vitrine"] :is(.modal-header, .atp-header, .queue-header, .lyrics-header, .auth-browser-dialog-head) { gap: 16px; border-color: var(--square-line); }
html[data-theme="vitrine"] :is(.modal-header h2, .auth-browser-dialog-head h2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
html[data-theme="vitrine"] :is(.toast-msg-text, .job-footer span, .job-resolution-row span, .job-detail) { background: transparent !important; box-shadow: none !important; }

/* Apple Music hierarchy: continuous library, editorial shelves and a floating player. */
html[data-theme="vitrine"] .app-layout { padding: 12px; gap: 12px; }
html[data-theme="vitrine"] .main-view { border-radius: 26px; background: var(--square-content) !important; }
html[data-theme="vitrine"] .sidebar { border-radius: 28px !important; }
html[data-theme="vitrine"] .primary-nav { gap: 2px; padding: 12px 12px 8px; }
html[data-theme="vitrine"] .primary-nav button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; color: var(--text-main); background: transparent; border: 0; border-radius: 12px; text-align: left; cursor: pointer; font: inherit; }
html[data-theme="vitrine"] .primary-nav button :is(svg, i) { width: 22px; height: 22px; flex-shrink: 0; color: var(--primary); }
html[data-theme="vitrine"] .primary-nav button:is(:hover, .active) { background: var(--square-wash); }
html[data-theme="vitrine"][data-sidebar-mode="collapsed"] .primary-nav button span { display: none; }
html[data-theme="vitrine"] .sidebar-head { padding-block: 14px 4px; }
html[data-theme="vitrine"] .sidebar-toggle { background: transparent !important; font-size: .8rem; color: var(--text-sub) !important; box-shadow: none !important; }
html[data-theme="vitrine"] :is(.sidebar-item, .sidebar-cover) { border-radius: 10px !important; }
html[data-theme="vitrine"] .quota-widget { border: 0; border-top: 1px solid var(--square-line); border-radius: 0; }
html[data-theme="vitrine"] .top-bar { height: 60px; margin: 0; border-radius: 26px 26px 0 0 !important; border-width: 0 0 1px !important; box-shadow: inset 0 1px 0 var(--vitreo-light) !important; }
html[data-theme="vitrine"] .topbar-search { border-radius: 999px !important; }
html[data-theme="vitrine"] .view-content { padding: 20px clamp(16px, 2vw, 28px); }
html[data-theme="vitrine"] .home-overview { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--square-line); }
html[data-theme="vitrine"] :is(.hero-greeting, .library-title) { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 750; line-height: 1.1; letter-spacing: -.05em; }
html[data-theme="vitrine"] .hero-username { color: inherit; }
html[data-theme="vitrine"] .home-overview { display: flex; flex-direction: column; }
html[data-theme="vitrine"] .home-overview .hero-section { display: block; order: -1; margin-bottom: 16px; }
html[data-theme="vitrine"] .home-overview :is(.hero-kicker, .home-greeting-copy) { display: none; }
html[data-theme="vitrine"] .vitrine-home-title { display: inline; }
html[data-theme="vitrine"] .home-overview .home-tabs { order: -2; margin: 0 0 12px; }
html[data-theme="vitrine"] .hero-kicker { color: var(--primary); letter-spacing: .08em; }
html[data-theme="vitrine"] :is(.home-tabs, .library-filters, .source-filter-chips, .settings-tabbar) { gap: 6px; }
html[data-theme="vitrine"] .quick-picks-grid { gap: 8px 12px; }
html[data-theme="vitrine"] .quick-pick { background: transparent !important; border: 0 !important; border-radius: 10px !important; gap: 12px; height: 64px; }
html[data-theme="vitrine"] :is(.sidebar-cover-favorites, .quick-pick-cover-favorites, .playlist-cover-favorites, .library-liked .library-card-cover) { background: linear-gradient(145deg, #f97f9f, #bd2547) !important; color: #fff !important; }
html[data-theme="vitrine"] .quick-pick-cover { width: 64px; height: 64px; border-radius: 10px; }
html[data-theme="vitrine"] .quick-pick-name { color: var(--text-main) !important; font-size: .9rem; font-weight: 600; }
html[data-theme="vitrine"] :is(.card, .library-card, .discovery-card, .radio-card) { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 10px !important; }
html[data-theme="vitrine"] :is(.card, .library-card, .discovery-card, .radio-card):hover { background: transparent !important; }
html[data-theme="vitrine"] :is(.card-cover, .library-card-cover, .card-image, .card-img-container, .discovery-cover) { border-radius: 12px !important; box-shadow: 0 4px 14px #00000018; }
html[data-theme="vitrine"] :is(.card-title, .library-card-name) { font-size: .94rem; font-weight: 600; margin-top: 10px; }
html[data-theme="vitrine"] :is(.home-rail, .grid-shelf) { gap: 16px; }
html[data-theme="vitrine"] .shelf-title { font-size: 1.4rem; letter-spacing: -.035em; }
html[data-theme="vitrine"] :is(.track-row, .library-row, .library-track-row, .party-queue-row, .queue-item) { border-radius: 8px; border-bottom: 1px solid var(--square-line); }
html[data-theme="vitrine"] :is(.track-row.active-track, .sidebar-item.active) { background: var(--square-wash) !important; }
html[data-theme="vitrine"] :is(.track-cover-sm, .player-cover, .party-now-cover) { border-radius: 8px !important; }
html[data-theme="vitrine"] :is(.user-settings-panel, .admin-panel, .monitor-panel, .monitor-card, .download-provider-card, .download-runtime-card, .party-card, .user-profile-shell, .offline-storage-card, .update-card) { border-radius: 22px !important; }
html[data-theme="vitrine"] :is(.user-settings-panel-header, .monitor-panel-header, .admin-panel-header) { border-bottom: 1px solid var(--square-line); }

/* Shared lens treatment for buttons, including legacy inline button colors. */
html[data-theme="vitrine"] :is(.btn-secondary, .btn-secondary-lg, .home-tab, .filter-btn, .library-filter, .source-chip, .source-tab, .settings-tabbar button, .playback-chip, .playlist-action-btn, .btn-icon-pill, .circle-btn, .btn-icon-circle, .m-icon-btn, .topbar-home-btn, .user-menu-trigger, .icon-btn-sm, .library-icon-btn, .modal-btn-cancel, .modal-close, .create-menu-close, .atp-close, .lyrics-close, .admin-icon-btn, .admin-secondary-btn, .admin-shell-btn, .monitor-button, .user-settings-button-secondary, .update-toast-btn, .party-result-add, .party-row-remove, .discovery-action, .fs-action-btn, .btn-glass, .btn-icon, .play-btn-card, .play-btn-add-pl, .library-back, .discovery-play-btn, .artist-section-play, .party-leave-btn, .party-text-action, .atp-create-cancel, .atp-new-btn, .user-settings-toggle-secret, .monitor-secondary) {
    color: var(--text-main) !important; background-color: var(--square-film) !important;
    background-image: var(--vitreo-sheen) !important; border: 1px solid var(--square-rim) !important;
    border-radius: 999px !important; box-shadow: var(--vitreo-rim), 0 2px 6px #2736540a !important;
    min-height: 44px; transition: background-color .18s ease, box-shadow .18s ease, scale .18s ease;
}
html[data-theme="vitrine"] :is(.home-tab.active, .library-filter.active, .source-chip.active, .source-tab.active, .filter-btn.active, .settings-tabbar button[aria-selected="true"], .playback-chip.active) { background-color: var(--square-film-strong) !important; color: var(--primary) !important; }
html[data-theme="vitrine"] :is(.btn-primary, .btn-primary-lg, .modal-btn-primary, .btn-play-circle, .user-settings-button, .admin-submit, .monitor-primary, .party-create-btn, .party-submit, .party-control-primary, .atp-create-submit, .pwa-install-btn) { min-height: 44px; border-radius: 999px !important; background-color: var(--primary) !important; background-image: linear-gradient(155deg, #ffffff24, transparent 65%) !important; color: var(--square-on-primary) !important; box-shadow: inset 0 1px 1px #ffffff60, 0 4px 12px #00000012 !important; }
html[data-theme="vitrine"] :is(.btn-danger, .btn-danger-outline, .modal-btn-danger, .admin-danger-btn, .monitor-danger, .party-delete-btn) { min-height: 44px; border-radius: 999px !important; color: var(--danger) !important; background: var(--square-film) !important; border: 1px solid currentColor !important; box-shadow: var(--vitreo-rim); }
html[data-theme="vitrine"] :is(button, summary):not(:disabled):active { scale: .97; --vitreo-light: #ffffffe0; }
html[data-theme="vitrine"] :is(button, input, select, textarea):disabled { opacity: .48; cursor: not-allowed; scale: 1; }
@media (hover: hover) {
    html[data-theme="vitrine"] :is(button, summary):not(:disabled):hover { background-color: var(--square-film-strong); }
}

html[data-theme="vitrine"] :is(.circle-btn, .btn-icon-circle, .m-icon-btn, .topbar-home-btn, .icon-btn-sm, .library-icon-btn, .fs-action-btn, .btn-icon-pill, .btn-icon, .play-btn-card, .discovery-play-btn, .user-settings-toggle-secret, .party-result-add) { align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; padding: 0; }
@media (hover: hover) {
    html[data-theme="vitrine"] :is(button, summary):not(:disabled):hover { --vitreo-light: #ffffffd0; }
}

/* Icons inside one toolbar/dialog share its material. Standalone actions keep their own surface. */
html[data-theme="vitrine"] :is(.top-bar, .m-topbar, .m-bottom-nav, .sidebar, .player-footer, .modal, .monitor-modal, .auth-browser-dialog, .user-menu-panel, .m-more-panel, .track-context-menu, .atp-flyout, .create-menu, .tas-sheet) :is(.circle-btn, .btn-icon-circle, .m-icon-btn, .topbar-home-btn, .user-menu-trigger, .icon-btn-sm, .control-btn, .sidebar-toggle, .library-icon-btn, .modal-close, .create-menu-close, .atp-close, .lyrics-close, [data-auth-browser-close]) {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
@media (hover: hover) {
    html[data-theme="vitrine"] :is(.top-bar, .m-topbar, .sidebar, .player-footer, .modal) :is(.circle-btn, .btn-icon-circle, .m-icon-btn, .topbar-home-btn, .icon-btn-sm, .control-btn, .library-icon-btn, .modal-close):not(:disabled):hover { background: var(--square-wash) !important; }
}

/* Compact row actions: consistent geometry, centered icons, and clean Apple-like chrome. */
html[data-theme="vitrine"] .action-btns { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
html[data-theme="vitrine"] :is(.action-btn, .action-btn-inline, .action-btn-danger, .action-btn-more) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--square-line) !important;
    background: var(--square-wash) !important;
    color: var(--text-sub) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
html[data-theme="vitrine"] :is(.action-btn, .action-btn-inline, .action-btn-danger, .action-btn-more) :is(i, svg) {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    stroke-width: 2 !important;
    fill: none;
    color: inherit;
}
html[data-theme="vitrine"] :is(.action-btn, .action-btn-inline, .action-btn-danger, .action-btn-more):hover {
    background: var(--square-film) !important;
    color: var(--text-main) !important;
    border-color: var(--square-rim) !important;
    transform: scale(1.05);
}
html[data-theme="vitrine"] :is(.action-btn.liked, .action-btn-inline.liked) {
    color: var(--square-primary, var(--primary)) !important;
    background: rgba(var(--accent-rgb), .12) !important;
    border-color: rgba(var(--accent-rgb), .3) !important;
}
html[data-theme="vitrine"] :is(.action-btn.liked, .action-btn-inline.liked) :is(i, svg) {
    fill: currentColor !important;
    stroke: currentColor !important;
}
html[data-theme="vitrine"] :is(.action-btn-danger, .action-btn-inline.danger) {
    color: #ef4444 !important;
}
html[data-theme="vitrine"] :is(.action-btn-danger, .action-btn-inline.danger):hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, .14) !important;
    border-color: rgba(239, 68, 68, .32) !important;
}
html[data-theme="vitrine"] :is(.action-btn.warning, .action-btn-inline.warning) {
    color: #f59e0b !important;
}
html[data-theme="vitrine"] :is(.action-btn.warning, .action-btn-inline.warning):hover {
    color: #fbbf24 !important;
    background: rgba(245, 158, 11, .14) !important;
    border-color: rgba(245, 158, 11, .32) !important;
}
html[data-theme="vitrine"] .playlist-track-list .track-duration-col { gap: 8px; align-items: center; }
html[data-theme="vitrine"] .track-row:focus-within :is(.action-btns, .action-btn-inline, .action-btn-more) { opacity: 1; }

/* Add-to-playlist flyout & search precision */
html[data-theme="vitrine"] .atp-flyout { width: 320px; box-sizing: border-box; padding: 10px; border-radius: 14px !important; overflow: hidden; }
html[data-theme="vitrine"] .atp-header { padding: 4px 6px 8px; border-bottom: 1px solid var(--square-line); margin-bottom: 6px; align-items: center; }
html[data-theme="vitrine"] .atp-title { font-size: .92rem; font-weight: 700; color: var(--text-main); letter-spacing: -.01em; }
html[data-theme="vitrine"] .atp-close { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; border-radius: 50% !important; background: transparent !important; border: 0 !important; color: var(--text-sub) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; }
html[data-theme="vitrine"] .atp-close:hover { background: var(--square-wash) !important; color: var(--text-main) !important; }
html[data-theme="vitrine"] .atp-close :is(i, svg) { width: 14px !important; height: 14px !important; }
html[data-theme="vitrine"] .atp-search { margin: 4px 2px 8px; padding: 6px 14px; border-radius: 999px !important; background: var(--square-wash) !important; border: 1px solid var(--square-line) !important; box-sizing: border-box; width: calc(100% - 4px); min-width: 0; display: flex; align-items: center; gap: 8px; }
html[data-theme="vitrine"] .atp-search:focus-within { border-color: var(--primary) !important; background: var(--square-film) !important; }
html[data-theme="vitrine"] .atp-search :is(i, svg) { width: 15px !important; height: 15px !important; flex-shrink: 0; color: var(--text-sub) !important; }
html[data-theme="vitrine"] .atp-search input { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; padding: 0 4px 0 0 !important; margin: 0 !important; height: 22px !important; line-height: 22px !important; font-size: .85rem !important; background: transparent !important; border: 0 !important; outline: none !important; color: var(--text-main) !important; box-sizing: border-box !important; }
html[data-theme="vitrine"] .atp-search input::placeholder { color: var(--text-sub) !important; opacity: .75; }
html[data-theme="vitrine"] .atp-item { border-radius: 8px; padding: 6px 8px; margin: 2px 0; min-height: 38px; transition: background-color .12s ease; }
html[data-theme="vitrine"] .atp-item:hover { background: var(--square-wash) !important; }
html[data-theme="vitrine"] .atp-new-btn { margin: 8px 2px 2px; border-radius: 8px; padding: 8px 12px; background: var(--square-wash) !important; border: 1px solid var(--square-line) !important; color: var(--primary) !important; font-weight: 600; width: calc(100% - 4px); box-sizing: border-box; }
html[data-theme="vitrine"] .atp-new-btn:hover { background: var(--square-film) !important; border-color: var(--square-rim) !important; }
html[data-theme="vitrine"] .modal-search { margin: 0 0 12px; padding: 8px 16px; border-radius: 999px !important; background: var(--square-wash) !important; border: 1px solid var(--square-line) !important; box-sizing: border-box; width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px; }
html[data-theme="vitrine"] .modal-search:focus-within { border-color: var(--primary) !important; background: var(--square-film) !important; }
html[data-theme="vitrine"] .modal-search :is(i, svg) { width: 16px !important; height: 16px !important; flex-shrink: 0; color: var(--text-sub) !important; }
html[data-theme="vitrine"] .modal-search input { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; padding: 0 4px 0 0 !important; margin: 0 !important; height: 24px !important; line-height: 24px !important; font-size: .9rem !important; background: transparent !important; border: 0 !important; outline: none !important; color: var(--text-main) !important; box-sizing: border-box !important; }

/* Close/remove controls have one centred glyph and a full touch target. */
html[data-theme="vitrine"] :is(.modal-close, .create-menu-close, .lyrics-close, [data-auth-browser-close], .queue-header button:has(.lucide-x, [data-lucide="x"]), .party-row-remove) { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px !important; height: 44px !important; min-width: 44px; padding: 0 !important; margin: 0; line-height: 1; font-size: 1.5rem; }
html[data-theme="vitrine"] :is(.modal-close, .create-menu-close, .lyrics-close, [data-auth-browser-close], .party-row-remove) :is(i, svg) { display: block; width: 18px !important; height: 18px !important; margin: 0; color: inherit; stroke-width: 2; fill: none; }
html[data-theme="vitrine"] .create-menu-close { margin-left: auto; }
html[data-theme="vitrine"] .party-row-remove { color: var(--danger) !important; }

/* Native input behavior survives: only the drawing is replaced. */
html[data-theme="vitrine"] input:is([type="checkbox"], [type="radio"]) { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 22px !important; height: 22px !important; margin: 0; border: 1px solid var(--text-faint); border-radius: 7px; background: var(--square-film); box-shadow: inset 0 1px 2px #00000010, 0 1px 0 var(--vitreo-light); vertical-align: middle; cursor: pointer; }
html[data-theme="vitrine"] input[type="radio"] { border-radius: 50%; }
html[data-theme="vitrine"] input[type="checkbox"]:checked { border-color: var(--primary); background: var(--primary) var(--vitreo-check) center / 22px 22px no-repeat; box-shadow: inset 0 1px 1px #ffffff40; }
html[data-theme="vitrine"] input[type="checkbox"]:indeterminate { border-color: var(--primary); background: linear-gradient(var(--square-on-primary), var(--square-on-primary)) center / 10px 2px no-repeat, var(--primary); }
html[data-theme="vitrine"] input[type="radio"]:checked { border-color: var(--primary); background: radial-gradient(circle, var(--square-on-primary) 0 4px, transparent 4.5px), var(--primary); }
html[data-theme="vitrine"] input[role="switch"] { width: 50px !important; height: 30px !important; border: 1px solid var(--square-rim); border-radius: 999px; background: radial-gradient(circle, #fff 0 11px, transparent 11.5px) 2px center / 24px 24px no-repeat, var(--text-faint); box-shadow: var(--vitreo-rim), inset 0 1px 3px #0002; transition: background-position .18s ease, background-color .18s ease; }
html[data-theme="vitrine"] input[role="switch"]:checked { background: radial-gradient(circle, #fff 0 11px, transparent 11.5px) calc(100% - 2px) center / 24px 24px no-repeat, var(--primary); }
html[data-theme="vitrine"] :is(.collection-search-toggle, .party-check, .smart-check, .admin-toggle, .remember-row) { min-height: 44px; gap: 12px; align-items: center; line-height: 1.45; }
html[data-theme="vitrine"] .collection-search-toggle { padding: 10px 0; }
html[data-theme="vitrine"] .theme-option { border-radius: 24px !important; }
html[data-theme="vitrine"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { border-radius: 16px !important; }
html[data-theme="vitrine"] :is(.topbar-search, .atp-search, .modal-search) input { border-radius: inherit !important; }

/* Album/playlist artwork and content remain unblurred. */
html[data-theme="vitrine"] :is(.playlist-header, .playlist-header-section) { padding: 0 0 28px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--square-line) !important; border-radius: 0 !important; gap: 32px; margin-bottom: 16px; }
html[data-theme="vitrine"] :is(.playlist-cover-large, .playlist-cover-large img, .playlist-cover) { border-radius: 18px !important; }
html[data-theme="vitrine"] .playlist-cover-large { width: 248px; height: 248px; box-shadow: 0 10px 30px #0002; }
html[data-theme="vitrine"] .playlist-title { font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 750; line-height: 1.12; }
html[data-theme="vitrine"] .playlist-type { font-size: .72rem; letter-spacing: .09em; color: var(--text-sub) !important; }
html[data-theme="vitrine"] .playlist-stats { font-size: .9rem; font-weight: 400; }
html[data-theme="vitrine"] .playlist-actions { flex-wrap: wrap; gap: 10px; }
html[data-theme="vitrine"] .btn-play-circle { width: 72px; height: 48px; }
/* Frost the text-bearing chrome more strongly than its small glass controls. */
html[data-theme="vitrine"] :is(.player-footer, .m-bottom-nav) { background-color: var(--square-film-strong) !important; }
html[data-theme="vitrine"] .player-footer { margin: 0 12px; border-radius: 999px !important; padding-inline: 18px; }
html[data-theme="vitrine"] .player-footer .play-main { background: transparent !important; color: var(--text-main) !important; border: 0 !important; }
html[data-theme="vitrine"] .player-footer #player-cover { border-radius: 12px; }

/* Vitrine's native arrangement: unboxed transport, inline volume, separate footer actions. */
html[data-theme="vitrine"] .fullscreen-player { --square-film: #ffffff12; --square-film-strong: #272c40bd; --square-rim: #ffffff45; --square-glint: #ffffff24; --vitreo-light: #ffffff78; --vitreo-inner: #ffffff12; --vitreo-shade: #00000020; --fs-film: #ffffff12; --fs-rim: #ffffff45; background: #202025; }
html[data-theme="vitrine"] .fullscreen-player .fs-background { background: linear-gradient(180deg, #18181e80, #18181ed9), var(--square-artwork, linear-gradient(140deg, #795369, #2d4268)) center / cover !important; filter: blur(38px) saturate(1.3); }
html[data-theme="vitrine"] .fullscreen-player .fs-content { max-width: 540px; padding-inline: 28px; padding-bottom: calc(clamp(20px, 4dvh, 40px) + var(--safe-area-bottom, 0px)); gap: clamp(4px, 1.2vh, 12px); grid-template: "header" 44px "stage" minmax(0, 1fr) "info" auto "progress" 44px "controls" 72px "volume" 44px "actions" 48px / minmax(0, 1fr); }
html[data-theme="vitrine"] .fullscreen-player[data-view]:not([data-view="cover"]) .fs-content { grid-template: "header" 44px "info" 80px "detail" minmax(0, 1fr) "progress" 44px "controls" 72px "volume" 44px "actions" 48px / minmax(0, 1fr); }
html[data-theme="vitrine"] .fs-view-label { text-align: center; font-size: .8rem; letter-spacing: .02em; color: #e3e5f0 !important; }
html[data-theme="vitrine"] .fs-volume { display: none; }
html[data-theme="vitrine"] .fs-more { display: block; position: relative; flex: 0 0 44px; }
html[data-theme="vitrine"] .fs-more summary { list-style: none; cursor: pointer; }
html[data-theme="vitrine"] .fs-more summary::-webkit-details-marker { display: none; }
html[data-theme="vitrine"] .fs-more-menu { position: absolute; top: 52px; right: 0; width: 240px; padding: 8px; display: grid; gap: 4px; border-radius: 24px; background: var(--square-film-strong); border: 1px solid var(--square-rim); box-shadow: var(--square-shadow); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
html[data-theme="vitrine"] .fs-more-menu > button { display: flex; justify-content: start; gap: 14px; width: 100%; height: 44px; padding: 0 14px; border: 0 !important; background: transparent !important; box-shadow: none; color: #fff; border-radius: 16px; }
html[data-theme="vitrine"] .fs-more-menu > button::after { content: attr(title); font: 500 .9rem / 1.3 system-ui; }
html[data-theme="vitrine"] .fs-more-menu > button:is(.active-control, .active) { background: #ffffff20 !important; }
html[data-theme="vitrine"] .fullscreen-player .fs-stage { margin: 8px 0; border-radius: 18px; container-type: size; display: grid; place-items: center; }
html[data-theme="vitrine"] .fullscreen-player[data-view]:not([data-view="cover"]) .fs-stage { display: none; }
html[data-theme="vitrine"] .fullscreen-player .fs-cover { border-radius: 18px !important; mask-image: none; -webkit-mask-image: none; filter: drop-shadow(0 14px 20px #0004); }
@supports (width: 1cqw) { html[data-theme="vitrine"] .fs-stage .fs-cover { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); } }
html[data-theme="vitrine"] .fullscreen-player .fs-info { border: 0; border-radius: 0; min-height: 64px; padding: 4px 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="vitrine"] .fs-info > .fs-cover { visibility: visible; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px !important; object-fit: cover; }
html[data-theme="vitrine"] .fullscreen-player .fs-title { font-size: clamp(1.1rem, 4.8vw, 1.55rem); letter-spacing: -.025em; }
html[data-theme="vitrine"] .fullscreen-player :is(.fs-artist, .fs-progress-container) { color: #e3e5f0 !important; }
html[data-theme="vitrine"] #fs-time-total { display: none; }
html[data-theme="vitrine"] #fs-time-remaining { display: block; grid-area: duration; text-align: right; }
html[data-theme="vitrine"] .fs-progress-container { font-variant-numeric: tabular-nums; }
html[data-theme="vitrine"] .fullscreen-player .fs-controls { justify-content: space-evenly; align-items: center; }
html[data-theme="vitrine"] .fullscreen-player .fs-controls .control-btn { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-theme="vitrine"] .fullscreen-player .fs-controls .control-btn svg { width: 32px; height: 32px; fill: currentColor !important; stroke-width: 0; }
html[data-theme="vitrine"] .fullscreen-player .fs-controls .fs-play-main svg { width: 44px; height: 44px; }
html[data-theme="vitrine"] .fs-volume-slot { grid-area: volume; display: flex; align-items: center; }
html[data-theme="vitrine"] .fs-volume-slot .fs-volume-panel { position: static; display: flex; width: 100%; padding: 0; gap: 14px; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-theme="vitrine"] .fs-volume-slot #fs-volume-bar { width: auto; flex: 1; }
html[data-theme="vitrine"] .fullscreen-player :is(.fs-track-actions .fs-action-btn, .fs-volume-slot #fs-volume-icon) { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-theme="vitrine"] .fs-track-actions .fs-action-btn:is(:hover, .active) { background: #ffffff18 !important; }
html[data-theme="vitrine"] .fs-volume-high { display: flex; width: 28px; color: #d8d9df; }
html[data-theme="vitrine"] .fs-volume-high svg { width: 22px; }
html[data-theme="vitrine"] .fullscreen-player .fs-actions { width: 100%; height: 48px; padding: 0; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-theme="vitrine"] .fullscreen-player .fs-actions .fs-action-btn { display: flex; flex: 0 0 48px; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html[data-theme="vitrine"] .fullscreen-player .fs-actions .fs-action-btn.active { background: #ffffff20 !important; }
html[data-theme="vitrine"] .fs-detail-stage { grid-area: detail; display: block; position: relative; min-width: 0; min-height: 0; }
html[data-theme="vitrine"] [data-view="cover"] .fs-detail-stage { display: none; }
html[data-theme="vitrine"] .fs-detail-stage > :is(#lyrics-panel, #queue-panel) { border-radius: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-theme="vitrine"] .fs-detail-stage .lyric-line { color: #c9c9d0 !important; font-size: clamp(1.5rem, 5.6vw, 2.1rem); font-weight: 750; line-height: 1.35; letter-spacing: -.025em; }
html[data-theme="vitrine"] .fs-detail-stage .lyric-line.active { color: #fff !important; font-weight: 750; }
html[data-theme="vitrine"] .fs-detail-stage .lyrics-body { padding: 12px 0; text-align: start; }
html[data-theme="vitrine"] .fs-detail-stage .lyrics-foot { border: 0; }
html[data-theme="vitrine"] .fs-detail-stage :is(.lyrics-credit, .queue-header h3, .queue-item-title, .queue-item-meta) { color: #e3e5f0 !important; }
@media (min-width: 980px) and (min-height: 600px), (min-width: 560px) and (orientation: landscape) {
    html[data-theme="vitrine"] .fullscreen-player .fs-content { max-width: 1120px; padding-inline: clamp(24px, 4vw, 56px); column-gap: clamp(24px, 5vw, 80px); grid-template: "header header" 44px "stage playback" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); }
    html[data-theme="vitrine"] .fullscreen-player[data-view]:not([data-view="cover"]) .fs-content { grid-template: "header header" 44px "playback detail" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); }
    html[data-theme="vitrine"] .fullscreen-player .fs-playback { grid-area: playback; display: grid; grid-template: "info" auto "progress" 44px "controls" 72px "volume" 44px "actions" 48px / minmax(0, 1fr); gap: clamp(4px, 1.2vh, 12px); align-self: center; min-width: 0; min-height: 0; }
    html[data-theme="vitrine"] .fullscreen-player[data-view]:not([data-view="cover"]) .fs-playback { height: min(100%, 660px); grid-template-rows: minmax(80px, 1fr) 44px 72px 44px 48px; }
    html[data-theme="vitrine"] .fullscreen-player[data-view]:not([data-view="cover"]) .fs-info { display: grid; grid-template: "art art" minmax(0, 1fr) "text actions" auto / minmax(0, 1fr) auto; align-self: stretch; min-height: 0; }
    html[data-theme="vitrine"] .fs-info > .fs-cover { grid-area: art; width: 100%; height: 100%; min-height: 0; object-fit: contain; justify-self: center; }
    @supports (width: 1cqw) {
        html[data-theme="vitrine"] .fullscreen-player[data-view]:not([data-view="cover"]) .fs-info { container-type: size; }
        html[data-theme="vitrine"] .fs-info > .fs-cover { width: min(100cqw, calc(100cqh - 60px)); height: min(100cqw, calc(100cqh - 60px)); }
    }
    html[data-theme="vitrine"] .fs-info .fs-track-text { grid-area: text; }
    html[data-theme="vitrine"] .fs-info .fs-track-actions { grid-area: actions; }
}
@media (max-height: 700px) {
    html[data-theme="vitrine"] .fullscreen-player .fs-content { row-gap: 4px; padding-bottom: calc(12px + var(--safe-area-bottom, 0px)); }
    html[data-theme="vitrine"] .fullscreen-player .fs-playback { row-gap: 4px; }
    html[data-theme="vitrine"] .fullscreen-player .fs-stage { margin-block: 0; }
    html[data-theme="vitrine"] .fullscreen-player .fs-info { padding-block: 0; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme="vitrine"] .fullscreen-player .fs-cover { transition: none; scale: 1 !important; } }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    html[data-theme="vitrine"] .app-layout { padding: 0 !important; border-radius: 0 !important; background: transparent !important; }
    html[data-theme="vitrine"] .m-topbar { margin: 0 0 8px; padding: calc(6px + var(--safe-area-top, 0px)) 16px 6px !important; border-width: 0 0 1px !important; border-radius: 0 !important; box-shadow: inset 0 1px 0 var(--vitreo-light) !important; }
    html[data-theme="vitrine"] .m-topbar-title { font-size: 1.6rem; font-weight: 750; letter-spacing: -.045em; }

    html[data-theme="vitrine"] .m-topbar .m-icon-btn { color: var(--primary) !important; }
    html[data-theme="vitrine"] :is(.home-overview, .library-shell, .search-shell, .home-shelf) { margin-inline: 0; }
    html[data-theme="vitrine"] .home-overview > .hero-section { display: none; }
    html[data-theme="vitrine"] .home-overview { padding-bottom: 12px !important; }
    html[data-theme="vitrine"] .quick-picks-grid { gap: 12px; }
    html[data-theme="vitrine"] .quick-pick { gap: 8px; height: 54px; padding: 0; }
    html[data-theme="vitrine"] .quick-pick-cover { width: 54px; height: 54px; }
    html[data-theme="vitrine"] .quick-pick-name { font-size: .8rem; }
    html[data-theme="vitrine"] .home-rail { gap: 16px; }
    html[data-theme="vitrine"] .m-bottom-nav { height: var(--mobile-nav-height); border-radius: 999px !important; padding: 6px !important; }
    html[data-theme="vitrine"] .m-nav-item { border-radius: 999px; gap: 4px; }
    html[data-theme="vitrine"] .m-nav-item.active { background: var(--square-film) !important; box-shadow: var(--vitreo-rim); }
    html[data-theme="vitrine"] .m-nav-item span { font-size: .64rem; font-weight: 600; }
    html[data-theme="vitrine"] .player-footer { margin: 0; border-radius: 999px !important; bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-offset) + var(--mobile-dock-gap)) !important; }
    html[data-theme="vitrine"] :is(.playlist-header, .playlist-header-section) { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 4px 0 24px !important; }
    html[data-theme="vitrine"] .playlist-cover-large { width: min(68vw, 300px); height: min(68vw, 300px); }
    html[data-theme="vitrine"] .playlist-info { align-items: center; width: 100%; min-width: 0; }
    html[data-theme="vitrine"] .playlist-title { font-size: 1.65rem; }
    html[data-theme="vitrine"] :is(.playlist-stats, .playlist-actions) { justify-content: center; }
    html[data-theme="vitrine"] :is(.modal, .create-menu) { max-height: calc(100dvh - 32px - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px)); overflow-y: auto; }
}
@media (max-width: 380px) {

    html[data-theme="vitrine"] .quick-pick-name { font-size: .73rem; }
    html[data-theme="vitrine"] .fullscreen-player .fs-content { padding-inline: 20px; }
}

/* Readable solid materials win over all decorative lighting. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-theme="vitrine"] { --square-film: var(--square-base); --square-film-strong: var(--square-base); --square-content: var(--square-base); }
    html[data-theme="vitrine"] .fullscreen-player { --square-film: #292c3a; --fs-film: #292c3a; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    html[data-theme="vitrine"] { --square-film: var(--square-base); --square-film-strong: var(--square-base); --square-content: var(--square-base); --square-glint: transparent; --square-blur: none; --vitreo-sheen: none; --vitreo-rim: 0 0 0 1px var(--square-line); }
    html[data-theme="vitrine"] body::before { display: none; }
    html[data-theme="vitrine"] .fullscreen-player { --square-film: #292c3a; --fs-film: #292c3a; }
    html[data-theme="vitrine"] .fullscreen-player :is(.fs-background, .fs-actions), html[data-theme="vitrine"] :is(.fs-stage, .fs-detail-stage) > :is(#lyrics-panel, #queue-panel) { background: #292c3a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none; }
}
@media (prefers-contrast: more) {
    html[data-theme="vitrine"] { --square-line: #73798b; --square-rim: #73798b; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme="vitrine"] :is(button, summary) { scale: 1 !important; transition: none !important; }
}
@media (forced-colors: active) {
    html[data-theme="vitrine"] { --square-base: Canvas; --square-film: Canvas; --square-film-strong: Canvas; --square-content: Canvas; --square-ink: CanvasText; --square-muted: CanvasText; --square-faint: CanvasText; --square-primary: LinkText; --square-on-primary: Canvas; --square-rim: CanvasText; --square-line: CanvasText; --square-blur: none; --vitreo-sheen: none; --vitreo-rim: none; }
    html[data-theme="vitrine"] body::before { display: none; }
    html[data-theme="vitrine"] .fullscreen-player { --square-film: Canvas; --square-film-strong: Canvas; --square-rim: CanvasText; --square-glint: transparent; --square-blur: none; --fs-film: Canvas; --fs-rim: CanvasText; }
    html[data-theme="vitrine"] input:is([type="checkbox"], [type="radio"]) { appearance: auto !important; -webkit-appearance: auto !important; background: none !important; box-shadow: none !important; }
    html[data-theme="vitrine"] input[role="switch"] { width: 22px !important; height: 22px !important; }
    html[data-theme="vitrine"] .fullscreen-player :is(.fs-background, .fs-info, .fs-actions, .control-btn, .fs-action-btn), html[data-theme="vitrine"] :is(.fs-stage, .fs-detail-stage) > :is(#lyrics-panel, #queue-panel) { background: Canvas !important; color: CanvasText !important; filter: none; }
    html[data-theme="vitrine"] .fullscreen-player :is(.fs-artist, .fs-progress-container, .fs-view-label, .fs-volume-high) { color: CanvasText !important; }
    html[data-theme="vitrine"] .fs-detail-stage :is(.lyric-line, .lyric-line.active, .lyrics-credit) { color: CanvasText !important; }
}

html[data-theme="vitrine"] .library-shell[data-layout="list"] .library-card { padding: 8px !important; }
html[data-theme="vitrine"] .library-shell[data-layout="list"] .library-card:hover { background: var(--square-wash) !important; }

/* Tighter grouping, while controls keep their touch targets. */
html[data-theme="vitrine"] .user-settings-shell { gap: 24px; }
html[data-theme="vitrine"] .user-settings-grid { gap: 24px; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    html[data-theme="vitrine"] .user-settings-shell { gap: 20px; }
    html[data-theme="vitrine"] .user-settings-grid { gap: 20px; }
    html[data-theme="vitrine"] .home-tabs { margin-bottom: 12px; }
    html[data-theme="vitrine"] .home-rail { gap: 12px; }
    html[data-theme="vitrine"] .library-card { min-height: 72px; padding-block: 4px; }
}