/**
 * RO.SMap glass — adapted from grainy-glass travel/weather references.
 * Safe rules: no backdrop-filter on scrolling player; never override .hidden.
 */
:root {
    --ink: #141414;
    --ink-muted: #6b7280;
    --glass-fill: rgba(255, 255, 255, 0.48);
    --glass-fill-strong: rgba(255, 255, 255, 0.62);
    --glass-fill-soft: rgba(255, 255, 255, 0.34);
    --glass-rim: rgba(255, 255, 255, 0.55);
    --glass-rim-outer: rgba(20, 20, 20, 0.08);
    --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    --glass-elev: 0 12px 40px rgba(20, 20, 20, 0.14);
    --glass-blur: 20px;
    --grain-opacity: 0.05;
    /* Coral from soft-UI ref — not green */
    --accent: #ff5a3d;
    --accent-hover: #e84a2f;
    --accent-soft: rgba(255, 90, 61, 0.14);
    --accent-ink: #e84a2f;
    --cta: #141414;
    --cta-ink: #ffffff;
    --panel: var(--glass-fill-strong);
    --panel-solid: #f4f2ef;
    --panel-border: var(--glass-rim-outer);
    --panel-shadow: var(--glass-elev);
    --font-ui: "Satoshi", "Plus Jakarta Sans", system-ui, sans-serif;
    --font-brand: "Clash Display", "Satoshi", sans-serif;
    --radius-md: 1.15rem;
    --radius-lg: 1.6rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;
    --dur: 200ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html.dark,
.dark {
    --ink: #f5f5f4;
    --ink-muted: #a8a29e;
    --glass-fill: rgba(22, 28, 34, 0.58);
    --glass-fill-strong: rgba(22, 28, 34, 0.72);
    --glass-fill-soft: rgba(22, 28, 34, 0.45);
    --glass-rim: rgba(255, 255, 255, 0.22);
    --glass-rim-outer: rgba(255, 255, 255, 0.14);
    --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --glass-elev: 0 16px 48px rgba(0, 0, 0, 0.45);
    --glass-blur: 22px;
    --grain-opacity: 0.06;
    --accent: #ff7a5c;
    --accent-hover: #ff5a3d;
    --accent-soft: rgba(255, 122, 92, 0.18);
    --accent-ink: #ff7a5c;
    --cta: #f5f5f4;
    --cta-ink: #141414;
    --panel: var(--glass-fill-strong);
    --panel-solid: #161c22;
    --panel-border: var(--glass-rim-outer);
    --panel-shadow: var(--glass-elev);
}

/* Palette: Терракота (café porcelaine) */
html[data-palette="terre"] {
    --ink: #542916;
    --ink-muted: #8a6b4a;
    --glass-fill: rgba(254, 250, 240, 0.55);
    --glass-fill-strong: rgba(254, 250, 240, 0.72);
    --glass-fill-soft: rgba(254, 250, 240, 0.4);
    --glass-rim: rgba(254, 250, 240, 0.7);
    --glass-rim-outer: rgba(84, 41, 22, 0.12);
    --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --glass-elev: 0 12px 40px rgba(84, 41, 22, 0.14);
    --accent: #a13a1e;
    --accent-hover: #862f18;
    --accent-soft: rgba(161, 58, 30, 0.16);
    --accent-ink: #a13a1e;
    --cta: #542916;
    --cta-ink: #fefaf0;
    --panel-solid: #fefaf0;
    --panel-border: var(--glass-rim-outer);
    --palette-secondary: #88b8ce;
    --palette-gold: #f1c166;
    --palette-olive: #b79858;
}
html.dark[data-palette="terre"],
html[data-palette="terre"].dark,
.dark[data-palette="terre"] {
    --ink: #fefaf0;
    --ink-muted: #d4b896;
    --glass-fill: rgba(84, 41, 22, 0.55);
    --glass-fill-strong: rgba(84, 41, 22, 0.78);
    --glass-fill-soft: rgba(84, 41, 22, 0.4);
    --glass-rim: rgba(241, 193, 102, 0.28);
    --glass-rim-outer: rgba(254, 250, 240, 0.14);
    --glass-shine: inset 0 1px 0 rgba(241, 193, 102, 0.2);
    --glass-elev: 0 16px 48px rgba(0, 0, 0, 0.5);
    --accent: #f1c166;
    --accent-hover: #b79858;
    --accent-soft: rgba(241, 193, 102, 0.2);
    --accent-ink: #f1c166;
    --cta: #fefaf0;
    --cta-ink: #542916;
    --panel-solid: #3a1c0f;
    --panel-border: var(--glass-rim-outer);
    --palette-secondary: #88b8ce;
    --palette-gold: #f1c166;
    --palette-olive: #b79858;
}

/* Palette: Хвоя (Sparrow Coffee) */
html[data-palette="sparrow"] {
    --ink: #2b2c1c;
    --ink-muted: #6e6c4f;
    --glass-fill: rgba(237, 230, 221, 0.55);
    --glass-fill-strong: rgba(237, 230, 221, 0.78);
    --glass-fill-soft: rgba(237, 230, 221, 0.4);
    --glass-rim: rgba(237, 230, 221, 0.75);
    --glass-rim-outer: rgba(43, 44, 28, 0.12);
    --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --glass-elev: 0 12px 40px rgba(43, 44, 28, 0.16);
    --accent: #693d22;
    --accent-hover: #8f6228;
    --accent-soft: rgba(105, 61, 34, 0.16);
    --accent-ink: #693d22;
    --cta: #2b2c1c;
    --cta-ink: #ede6dd;
    --panel-solid: #ede6dd;
    --panel-border: var(--glass-rim-outer);
    --palette-secondary: #888661;
    --palette-gold: #c9aa7d;
    --palette-olive: #888661;
}
html.dark[data-palette="sparrow"],
html[data-palette="sparrow"].dark,
.dark[data-palette="sparrow"] {
    --ink: #ede6dd;
    --ink-muted: #c9aa7d;
    --glass-fill: rgba(43, 44, 28, 0.58);
    --glass-fill-strong: rgba(43, 44, 28, 0.82);
    --glass-fill-soft: rgba(43, 44, 28, 0.42);
    --glass-rim: rgba(201, 170, 125, 0.28);
    --glass-rim-outer: rgba(237, 230, 221, 0.12);
    --glass-shine: inset 0 1px 0 rgba(201, 170, 125, 0.18);
    --glass-elev: 0 16px 48px rgba(0, 0, 0, 0.5);
    --accent: #c9aa7d;
    --accent-hover: #8f6228;
    --accent-soft: rgba(201, 170, 125, 0.22);
    --accent-ink: #c9aa7d;
    --cta: #ede6dd;
    --cta-ink: #2b2c1c;
    --panel-solid: #2b2c1c;
    --panel-border: var(--glass-rim-outer);
    --palette-secondary: #888661;
    --palette-gold: #c9aa7d;
    --palette-olive: #888661;
}

/* Global film grain (refs: frosted tactile glass) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none !important;
    opacity: var(--grain-opacity);
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

body {
    font-family: var(--font-ui);
    color: var(--ink);
    background: transparent !important;
    letter-spacing: -0.015em;
}

.brand-title {
    font-family: var(--font-brand);
    font-weight: 800;
    letter-spacing: -0.04em;
    text-transform: none;
}

/* Shared glass material */
.glass-shell,
#app-rail.app-rail,
#map-top-toolbar.map-top-toolbar,
.map-icon-btn,
#toast-message {
    background: var(--glass-fill-strong) !important;
    background-color: var(--glass-fill-strong) !important;
    border: 1px solid var(--glass-rim) !important;
    box-shadow: var(--glass-elev) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
}

#app-rail.app-rail {
    border-radius: var(--radius-xl);
    color: var(--ink);
    box-shadow: var(--glass-elev) !important;
}

#map-top-toolbar.map-top-toolbar {
    border-radius: var(--radius-pill);
    color: var(--ink);
}

/* Player + dock: same opaque panel surface (no backdrop-filter on player — keeps scroll) */
#player-card.player-shell,
#sidebar.sidebar-panel {
    border-radius: var(--radius-xl);
    color: var(--ink);
    background: var(--panel-solid) !important;
    background-color: var(--panel-solid) !important;
    border: 1px solid var(--glass-rim-outer) !important;
    /* Drop inset shine — it can align with dock borders and look like a full-bleed rule */
    box-shadow: var(--glass-elev) !important;
}
#player-card.player-shell {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overscroll-behavior: contain;
    max-height: min(85vh, calc(100dvh - 1rem - env(safe-area-inset-bottom, 0px))) !important;
}
#app-rail.app-rail {
    overflow-x: visible !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
#sidebar.sidebar-panel {
    backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
}

.map-icon-btn.hidden,
button.map-icon-btn.hidden,
.app-rail__btn.hidden,
button.app-rail__btn.hidden,
#msg-btn.hidden,
#notif-btn.hidden,
#notif-btn-mobile.hidden,
#logout-btn.hidden,
#msg-btn-mobile.hidden {
    display: none !important;
}

.map-icon-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 1.1rem !important;
    color: var(--ink);
    overflow: visible;
    padding: 0;
    position: relative;
}
#profile-btn-mobile.has-avatar.map-icon-btn {
    overflow: hidden;
}
.map-icon-btn:hover { color: var(--accent-ink); }

#notif-panel,
#notif-panel.notif-panel {
    border-radius: var(--radius-lg) !important;
    z-index: 230 !important;
    background: var(--panel-solid) !important;
    background-color: var(--panel-solid) !important;
    border: 1px solid var(--glass-rim-outer) !important;
    box-shadow: var(--glass-elev), var(--glass-shine) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
    color: var(--ink);
}
#map-top-right-controls,
#notif-wrap,
#msg-wrap {
    overflow: visible !important;
}

/* Modals — solid panels (no second backdrop-filter over the map) */
.app-modal-panel,
#settings-modal > div,
#auth-modal > div,
#cabinet-modal > div,
#messages-modal-content,
#add-modal-content,
#details-modal-content,
#ui-modal-content,
#support-modal > div {
    background: var(--panel-solid) !important;
    background-color: var(--panel-solid) !important;
    border: 1px solid var(--glass-rim-outer) !important;
    box-shadow: var(--glass-elev) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: var(--radius-xl) !important;
}

#sidebar.sidebar-panel [class*="bg-slate-50"],
#sidebar.sidebar-panel [class*="bg-slate-100"],
#sidebar.sidebar-panel .bg-slate-50\/70,
#sidebar.sidebar-panel .bg-slate-50\/80 {
    background-color: var(--glass-fill-soft) !important;
}
html.dark #sidebar.sidebar-panel [class*="bg-slate"],
.dark #sidebar.sidebar-panel [class*="bg-slate"] {
    background-color: rgba(0, 0, 0, 0.22) !important;
}

.map-search-cluster .search-cluster-input {
    color: var(--ink) !important;
}
.map-search-cluster:focus-within .search-cluster-input,
.map-search-cluster.is-open .search-cluster-input {
    /* caret visible; no extra ring — field is the pill itself */
}

/* FABs — solid black / glass secondary (refs) */
.map-fab {
    border-radius: 1.25rem !important;
}
.map-fab--primary {
    background: var(--cta) !important;
    color: var(--cta-ink) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: var(--glass-elev) !important;
}
.map-fab--secondary {
    background: var(--glass-fill-strong) !important;
    color: var(--ink) !important;
    border: 1px solid var(--glass-rim) !important;
    box-shadow: var(--glass-elev), var(--glass-shine) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.glass-switch-row,
.glass-seg {
    background: var(--glass-fill-soft) !important;
    border: 1px solid var(--glass-rim) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: var(--radius-lg) !important;
}

.glass-switch {
    border-radius: var(--radius-pill) !important;
    border: 1px solid var(--glass-rim) !important;
    background: rgba(20, 20, 20, 0.08);
}
html.dark .glass-switch,
.dark .glass-switch { background: rgba(255, 255, 255, 0.1); }
.glass-switch[aria-checked="true"] {
    background: var(--accent) !important;
    border-color: transparent !important;
}
.glass-switch__thumb {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

.glass-seg__btn {
    border-radius: var(--radius-pill) !important;
}
.glass-seg__btn.is-active--accent {
    background: var(--cta) !important;
    color: var(--cta-ink) !important;
}
html.dark .glass-seg__btn.is-active--accent,
.dark .glass-seg__btn.is-active--accent {
    background: #f5f5f4 !important;
    color: #141414 !important;
}

.sidebar-sound-row {
    border-radius: 1rem !important;
}
.sidebar-sound-row:hover {
    background: var(--glass-fill-soft) !important;
}
.sidebar-sound-row.is-active {
    background: var(--accent-soft) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.sidebar-sound-row__play.is-playing,
.sidebar-sound-row.is-active .sidebar-sound-row__play {
    background: var(--cta) !important;
    color: var(--cta-ink) !important;
}
html.dark .sidebar-sound-row__play.is-playing,
html.dark .sidebar-sound-row.is-active .sidebar-sound-row__play,
.dark .sidebar-sound-row__play.is-playing,
.dark .sidebar-sound-row.is-active .sidebar-sound-row__play {
    background: var(--accent) !important;
    color: #fff !important;
}

/* Player controls — black CTA like refs */
#player-card .player-play-btn {
    background: var(--cta) !important;
    color: var(--cta-ink) !important;
    border-radius: var(--radius-pill) !important;
}
html.dark #player-card .player-play-btn,
.dark #player-card .player-play-btn {
    background: #f5f5f4 !important;
    color: #141414 !important;
}
#player-card .player-icon-btn {
    background: var(--glass-fill-soft) !important;
    color: var(--ink) !important;
    border: 1px solid var(--glass-rim) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
}
#player-card .player-icon-btn--muted {
    color: var(--ink-muted) !important;
}
#btn-analyzer-toggle.active,
#player-card .player-icon-btn.active {
    background: var(--accent-soft) !important;
    color: var(--accent-ink) !important;
    border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* Waveform — coral active (soft-UI ref), mist inactive */
#waveform-bg { color: rgba(20, 20, 20, 0.08); }
html.dark #waveform-bg,
.dark #waveform-bg { color: rgba(255, 255, 255, 0.12); }
#waveform-buffered { color: rgba(20, 20, 20, 0.18); }
html.dark #waveform-buffered,
.dark #waveform-buffered { color: rgba(255, 255, 255, 0.22); }
#waveform-active { color: var(--accent) !important; }
#playhead {
    background: var(--ink) !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) !important;
}
html.dark #playhead,
.dark #playhead {
    background: #fff !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.35) !important;
}
#volume-slider { accent-color: var(--accent); }

#toast-message {
    border-radius: var(--radius-pill) !important;
    color: var(--ink) !important;
}
#toast-message #toast-text { color: var(--ink) !important; }

.ui-tab.is-active {
    color: var(--accent-ink) !important;
    border-bottom-color: var(--accent) !important;
}

.app-modal-overlay,
.app-modal-overlay.backdrop-blur-none,
.app-modal-overlay.backdrop-blur-sm,
.app-modal-overlay.backdrop-blur-md {
    background: rgba(20, 20, 20, 0.48) !important;
    /* Blurring the live map is the main desktop hitch — keep a solid dim instead */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity 180ms ease !important;
}
html.dark .app-modal-overlay,
.dark .app-modal-overlay {
    background: rgba(0, 0, 0, 0.58) !important;
}

/* Limit animated properties — never transition-all on large panels */
.app-modal-panel {
    transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@media (min-width: 768px) {
    /* Scale of a tall scrolling card is expensive; use a light slide instead */
    .app-modal-panel.scale-95 {
        transform: translate3d(0, 10px, 0) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .app-modal-overlay,
    .app-modal-panel {
        transition: none !important;
    }
    .app-modal-panel.scale-95 {
        transform: none !important;
    }
}

/* Auth / modal inputs as pills (login ref) */
#auth-modal .modal-input,
#settings-modal .modal-input {
    border-radius: var(--radius-pill) !important;
    background: var(--glass-fill-soft) !important;
    border: 1px solid var(--glass-rim) !important;
}
#auth-action-btn {
    border-radius: var(--radius-pill) !important;
    background: var(--cta) !important;
    color: var(--cta-ink) !important;
    border: none !important;
    box-shadow: var(--glass-elev) !important;
}

/* Remap legacy Tailwind blue → coral accent / black CTAs (refs) */
.bg-blue-600,
.bg-blue-500,
.bg-blue-700 {
    background-color: var(--cta) !important;
}
.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover {
    background-color: #2a2a2a !important;
    filter: none;
}
html.dark .bg-blue-600,
html.dark .bg-blue-500,
.dark .bg-blue-600,
.dark .bg-blue-500 {
    background-color: var(--accent) !important;
}
html.dark .hover\:bg-blue-700:hover,
html.dark .hover\:bg-blue-600:hover,
.dark .hover\:bg-blue-700:hover,
.dark .hover\:bg-blue-600:hover {
    background-color: var(--accent-hover) !important;
}

.text-blue-600,
.text-blue-500,
.text-blue-400,
.hover\:text-blue-600:hover,
.hover\:text-blue-500:hover,
.hover\:text-blue-400:hover,
.dark\:text-blue-400,
.dark\:hover\:text-blue-400:hover,
.dark\:text-blue-300 {
    color: var(--accent-ink) !important;
}
html.dark .text-blue-600,
html.dark .text-blue-500,
html.dark .text-blue-400,
.dark .text-blue-600,
.dark .text-blue-500,
.dark .text-blue-400 {
    color: var(--accent) !important;
}

.border-blue-600,
.border-blue-500,
.border-blue-400,
.border-l-blue-500,
.border-blue-100,
.dark\:border-blue-900\/40 {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
}

.bg-blue-50,
.bg-blue-100,
.dark\:bg-blue-900\/20,
.dark\:bg-blue-900\/30,
.dark\:bg-blue-900\/40,
.dark\:bg-blue-900\/50,
.hover\:bg-blue-50:hover,
.hover\:bg-blue-100:hover {
    background-color: var(--accent-soft) !important;
}

.text-green-500,
.text-green-600,
.hover\:text-green-500:hover {
    color: var(--accent) !important;
}

/* Primary modal CTAs → pill black (login ref) */
#publish-btn,
#ui-modal-confirm,
#auth-action-btn,
button.bg-blue-600,
a.bg-blue-600 {
    border-radius: var(--radius-pill) !important;
}

@media (max-width: 767px) {
    :root { --glass-blur: 16px; --radius-xl: 1.6rem; }
    #sidebar.sidebar-panel {
        border-radius: 0 !important;
        border-bottom: none !important;
    }
    #sidebar.sidebar-panel,
    #app-rail.app-rail,
    #map-top-toolbar.map-top-toolbar,
    .map-icon-btn,
    #notif-panel {
        backdrop-filter: blur(16px) saturate(1.2);
        -webkit-backdrop-filter: blur(16px) saturate(1.2);
    }
}

@media (max-width: 767px) {
    #auth-modal > #auth-modal-content.app-modal-panel,
    #auth-modal > #auth-modal-content {
        border-radius: 0 !important;
        max-height: none !important;
        height: 100% !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    body::before { display: none !important; }
    #sidebar.sidebar-panel,
    #app-rail.app-rail,
    #map-top-toolbar.map-top-toolbar,
    #player-card.player-shell,
    .map-icon-btn,
    #notif-panel,
    #toast-message,
    #settings-modal > div,
    #auth-modal > div,
    #cabinet-modal > div,
    #messages-modal-content,
    #add-modal-content,
    #details-modal-content,
    #ui-modal-content,
    #support-modal > div {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--panel-solid) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #burger-btn,
    #map-top-right-controls > .map-icon-btn,
    #fab-add > * {
        animation: none !important;
    }
}