/* Apple-like frosted UI refresh for The Marimba Studio.
   Loaded after each device stylesheet so it can polish existing surfaces without
   changing layout or app behavior. */
:root {
    --ms-glass-bg: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055));
    --ms-glass-bg-strong: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.075));
    --ms-glass-border: rgba(255,255,255,0.22);
    --ms-glass-border-soft: rgba(255,255,255,0.12);
    --ms-glass-shadow: 0 22px 60px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
    --ms-glass-shadow-soft: 0 14px 38px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
    --ms-control-radius: 14px;
    --ms-panel-radius: 22px;
    --ms-accent-line: linear-gradient(90deg, rgba(74,222,128,0.9), rgba(34,211,238,0.9), rgba(167,139,250,0.92), rgba(232,121,249,0.9));
}

body {
    background-color: #0d0d22;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 18% 16%, rgba(96,165,250,0.12), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(240,147,251,0.12), transparent 32%),
        radial-gradient(circle at 50% 92%, rgba(74,222,128,0.07), transparent 30%);
    mix-blend-mode: screen;
}

.desktop-top-nav,
.tablet-top-nav,
.mobile-menu,
.mobile-controls,
.mobile-title-section,
.marimba-branding,
.bottom-nav-redesigned,
.marimba-control-bar,
.keyboard-controls-bar,
.desktop-footer,
.fixed-copyright,
#tablet-bottom-bar,
.settings-panel,
.mobile-settings,
.mobile-learning,
.mobile-recordings {
    backdrop-filter: saturate(150%) blur(28px);
    -webkit-backdrop-filter: saturate(150%) blur(28px);
}

.desktop-top-nav,
.tablet-top-nav {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035)),
        rgba(9,8,22,0.72) !important;
    border-bottom: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.12), 0 18px 46px rgba(0,0,0,0.28) !important;
}

.marimba-branding,
.bottom-nav-redesigned {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
        rgba(9,8,22,0.72) !important;
    border-color: rgba(255,255,255,0.13) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.12), 0 12px 34px rgba(0,0,0,0.26) !important;
}

.desktop-top-nav .nav-logo,
.nav-logo,
.branding-logo {
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.28)) drop-shadow(0 0 14px rgba(129,140,248,0.22)) !important;
}

.nav-icon-btn,
.rp-nav-badge,
.midi-status-badge,
.nav-profile-avatar,
.mobile-control-btn,
.control-bar-btn,
.control-item,
.key-badge,
.sp-toggle,
.mobile-song-btn,
.modal-btn,
.profile-primary-btn,
.profile-secondary-btn,
.saved-recordings-close-btn,
.modal-close {
    backdrop-filter: saturate(155%) blur(18px);
    -webkit-backdrop-filter: saturate(155%) blur(18px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 22px rgba(0,0,0,0.12);
}

.nav-icon-btn,
.rp-nav-badge,
.midi-status-badge,
.control-item,
.key-badge,
.mobile-control-btn,
.mobile-song-btn,
.sp-toggle {
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045)) !important;
    border-color: rgba(255,255,255,0.16) !important;
    border-radius: var(--ms-control-radius) !important;
}

.nav-icon-btn:hover,
.mobile-control-btn:active,
.control-item:hover,
.mobile-song-btn:active {
    background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(129,140,248,0.13)) !important;
    border-color: rgba(196,181,253,0.36) !important;
    box-shadow: 0 12px 30px rgba(102,126,234,0.18), inset 0 1px 0 rgba(255,255,255,0.2);
}

.nav-login-btn,
.profile-primary-btn,
.sp-toggle.on,
.mobile-control-btn.active {
    background: linear-gradient(135deg, rgba(74,222,128,0.28), rgba(34,211,238,0.18), rgba(129,140,248,0.22)) !important;
    border-color: rgba(125,211,252,0.34) !important;
}

.nav-dropdown-menu,
.rp-tooltip,
.desktop-modal-container,
.profile-auth-modal,
.pricing-modal-container,
.checkout-soon-container,
.modal-container,
.recording-save-modal,
.saved-recordings-modal,
.stats-modal,
.mobile-stats-sheet,
.tut-card,
.tutorial-welcome-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.055)),
        rgba(13,13,34,0.78) !important;
    border: 1px solid var(--ms-glass-border) !important;
    border-radius: var(--ms-panel-radius) !important;
    box-shadow: var(--ms-glass-shadow) !important;
    backdrop-filter: saturate(165%) blur(34px) !important;
    -webkit-backdrop-filter: saturate(165%) blur(34px) !important;
}

.nav-dropdown-menu {
    position: absolute;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)),
        rgba(6,8,22,0.88) !important;
    border-color: rgba(255,255,255,0.24) !important;
    backdrop-filter: saturate(180%) blur(44px) brightness(0.82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(44px) brightness(0.82) !important;
}

.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 16% 8%, rgba(255,255,255,0.16), transparent 28%),
        radial-gradient(circle at 90% 18%, rgba(129,140,248,0.14), transparent 34%),
        linear-gradient(180deg, rgba(8,10,24,0.68), rgba(8,10,24,0.48));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 0 0 1px rgba(255,255,255,0.08);
}

.nav-dropdown-menu > * {
    position: relative;
    z-index: 1;
}

.desktop-modal-overlay,
.modal-overlay,
.recording-save-overlay,
.mobile-stats-backdrop,
.tutorial-welcome-overlay {
    background: rgba(5,6,16,0.58) !important;
    backdrop-filter: saturate(135%) blur(16px) !important;
    -webkit-backdrop-filter: saturate(135%) blur(16px) !important;
}

.modal-header,
.modal-footer,
.profile-auth-modal .modal-header,
.sp-header {
    border-color: rgba(255,255,255,0.12) !important;
}

.marimba-container,
.learning-display-container,
.song-browser,
.song-category,
.song-category-list,
.settings-modal-pro,
.profile-card,
.profile-info-panel,
.pricing-hero-panel,
.pricing-rp-panel,
.pricing-plan-card,
.checkout-soon-meta,
.full-score-sheet,
.audio-controls-compact,
.sp-card,
.sp-rp-reset-card,
.mobile-learning,
.mobile-recordings,
.mobile-settings {
    background: var(--ms-glass-bg) !important;
    border: 1px solid var(--ms-glass-border-soft) !important;
    box-shadow: var(--ms-glass-shadow-soft) !important;
    backdrop-filter: saturate(150%) blur(24px);
    -webkit-backdrop-filter: saturate(150%) blur(24px);
}

.marimba-container,
.learning-display-container,
.song-browser,
.settings-modal-pro,
.mobile-learning,
.mobile-recordings,
.mobile-settings {
    border-radius: var(--ms-panel-radius) !important;
}

.marimba-container {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.028)),
        radial-gradient(circle at 48% 4%, rgba(255,255,255,0.12), transparent 34%) !important;
}

.marimba-container::before,
.mobile-title-section::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 36%);
    opacity: 0.58;
}

.marimba-container::before {
    display: block;
}

.marimba-note {
    box-shadow:
        0 14px 26px rgba(0,0,0,0.24),
        inset 0 2px 0 rgba(255,255,255,0.52),
        inset 0 -16px 22px rgba(0,0,0,0.18) !important;
    border-color: rgba(255,255,255,0.5) !important;
}

.marimba-note:hover,
.marimba-note:active,
.marimba-note.active,
.marimba-note.learning-active,
.marimba-note.mobile-learning-active {
    filter: saturate(1.08) brightness(1.05);
}

.song-item,
.sb-row,
.profile-stat-card,
.profile-setting-row,
.profile-empty-card,
.pricing-rp-option,
.subscription-card,
.saved-recording-item {
    background: linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.04)) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 22px rgba(0,0,0,0.11);
}

.song-item:hover,
.sb-row:hover,
.song-item.selected,
.sb-row.selected,
.pricing-rp-option:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.17), rgba(129,140,248,0.11)) !important;
    border-color: rgba(167,139,250,0.32) !important;
}

.pricing-rp-panel {
    background:
        radial-gradient(circle at 8% 12%, rgba(251, 191, 36, 0.18), transparent 28%),
        radial-gradient(circle at 94% 18%, rgba(96, 165, 250, 0.18), transparent 30%),
        linear-gradient(135deg, rgba(12, 16, 34, 0.94), rgba(30, 27, 75, 0.72)) !important;
    border-color: rgba(251, 191, 36, 0.22) !important;
}

.pricing-rp-copy,
.pricing-rp-pack,
.pricing-rp-custom {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035)),
        rgba(15,23,42,0.62) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

.pricing-rp-pack.is-highlighted {
    border-color: rgba(251,191,36,0.4) !important;
}

.pricing-rp-pack.is-patron {
    background:
        radial-gradient(circle at 92% 20%, rgba(251, 191, 36, 0.18), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,0.105), rgba(124,58,237,0.08)),
        rgba(15,23,42,0.68) !important;
    border-color: rgba(251,191,36,0.28) !important;
}

input,
select,
textarea,
.song-search input,
.search-container input,
.profile-auth-input,
.settings-input {
    background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.055)) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mobile-title-section {
    background:
        linear-gradient(135deg, rgba(102,126,234,0.56), rgba(118,75,162,0.48) 48%, rgba(240,147,251,0.36)),
        rgba(13,13,34,0.54) !important;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: var(--ms-glass-shadow) !important;
}

.mobile-controls {
    background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(12,10,28,0.56)) !important;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: var(--ms-glass-shadow-soft) !important;
}

.settings-panel {
    background:
        radial-gradient(circle at 15% 6%, rgba(102,126,234,0.22), transparent 30%),
        radial-gradient(circle at 84% 8%, rgba(240,147,251,0.18), transparent 32%),
        rgba(9,8,22,0.86) !important;
}

.sp-card {
    border-radius: 16px !important;
}

.sp-slider {
    background: rgba(255,255,255,0.18) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
}

.desktop-footer,
.fixed-copyright,
#tablet-bottom-bar {
    background: rgba(9,8,22,0.72) !important;
    border-top: 1px solid rgba(255,255,255,0.13) !important;
    box-shadow: 0 -16px 38px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}

.footer-stats-bar {
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

.control-bar-btn.record-btn,
.mobile-control-btn.recording {
    background: linear-gradient(135deg, rgba(248,113,113,0.88), rgba(220,38,38,0.72)) !important;
    border-color: rgba(254,202,202,0.48) !important;
}

.control-bar-btn.soprano-btn {
    background: linear-gradient(135deg, rgba(251,191,36,0.45), rgba(245,158,11,0.32)) !important;
    border-color: rgba(251,191,36,0.45) !important;
}

.loading-progress-fill,
.progress-fill-compact,
.audio-progress-fill {
    background: var(--ms-accent-line) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .desktop-top-nav,
    .tablet-top-nav,
    .desktop-modal-container,
    .profile-auth-modal,
    .modal-container,
    .mobile-controls,
    .mobile-title-section,
    .settings-panel {
        background: rgba(14,12,32,0.96) !important;
    }
}

@media (max-width: 760px) {
    :root {
        --ms-panel-radius: 18px;
        --ms-control-radius: 12px;
    }

    .mobile-title-section {
        margin-inline: 8px;
    }

    .mobile-controls,
    .marimba-container,
    .mobile-learning,
    .mobile-recordings,
    .mobile-settings {
        margin-inline: 8px !important;
    }

    .marimba-note {
        box-shadow:
            0 8px 16px rgba(0,0,0,0.22),
            inset 0 2px 0 rgba(255,255,255,0.5),
            inset 0 -10px 14px rgba(0,0,0,0.16) !important;
    }
}