/**
 * AudioSphere - Circular HTML5 Audio Player
 * 
 * @author coders_devx
 * @link https://codecanyon.net/user/coders_devx
 * @copyright Copyright (c) 2026 coders_devx. All rights reserved.
 * @license Regular License - See LICENSE.md for details
 */

/* Local font (no CDN) */
@font-face {
    font-family : 'Rajdhani';
    font-style  : normal;
    font-weight : 300;
    font-display: swap;
    src         : url('../fonts/rajdhani/Rajdhani-Light.ttf') format('truetype');
}

@font-face {
    font-family : 'Rajdhani';
    font-style  : normal;
    font-weight : 400;
    font-display: swap;
    src         : url('../fonts/rajdhani/Rajdhani-Regular.ttf') format('truetype');
}

@font-face {
    font-family : 'Rajdhani';
    font-style  : normal;
    font-weight : 500;
    font-display: swap;
    src         : url('../fonts/rajdhani/Rajdhani-Medium.ttf') format('truetype');
}

@font-face {
    font-family : 'Rajdhani';
    font-style  : normal;
    font-weight : 600;
    font-display: swap;
    src         : url('../fonts/rajdhani/Rajdhani-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family : 'Rajdhani';
    font-style  : normal;
    font-weight : 700;
    font-display: swap;
    src         : url('../fonts/rajdhani/Rajdhani-Bold.ttf') format('truetype');
}

:root {
    /* Theme tokens */
    --accent    : #FE4365;
    --neutral   : #F5F5F5;
    --accent-rgb: 254, 67, 101;

    /* Page background */
    --page-bg-color: #F5F5F5;
    --page-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);

    /* Theme switcher (fallbacks for browsers without color-mix/backdrop-filter) */
    --switcher-bg           : rgba(245, 245, 245, 0.78);
    --switcher-border       : rgba(var(--accent-rgb), 0.35);
    --switcher-btn-bg       : rgba(245, 245, 245, 0.58);
    --switcher-btn-border   : rgba(var(--accent-rgb), 0.28);
    --switcher-btn-bg-active: rgba(var(--accent-rgb), 0.14);
}

html[data-theme="dark"] {
    --accent       : #FE4365;
    --neutral      : #2B2F3A;
    --accent-rgb   : 254, 67, 101;
    --page-bg-color: #0F1115;
    --page-bg-image: none;

    --switcher-bg           : rgba(15, 17, 21, 0.72);
    --switcher-border       : rgba(var(--accent-rgb), 0.45);
    --switcher-btn-bg       : rgba(15, 17, 21, 0.55);
    --switcher-btn-border   : rgba(var(--accent-rgb), 0.32);
    --switcher-btn-bg-active: rgba(var(--accent-rgb), 0.18);
}

* {
    margin               : 0;
    padding              : 0;
    -webkit-touch-callout: none;
    -webkit-user-select  : none;
    -khtml-user-select   : none;
    -moz-user-select     : none;
    -ms-user-select      : none;
    user-select          : none;
}

canvas {
    display     : block;
    width       : 740px;
    height      : 740px;
    touch-action: none;
    position    : relative;
    z-index     : 1;
}

html,
body {
    height               : 100%;
    width                : 100%;
    margin               : 0;
    padding              : 0;
    font-family          : "Rajdhani", sans-serif !important;
    font-weight          : 400;
    font-style           : normal;
    background-size      : cover;
    background-position  : center;
    background-repeat    : no-repeat;
    background-attachment: fixed;
    transition           : background-image 0.3s ease;
}

body.hasBackgroundImage {
    --bg-blur       : 50px;
    --bg-opacity    : 0.10;
    --bg-scale      : 1.15;
    --player-scale  : 1;
    background-image: none;
    position        : relative;
}

body.hasBackgroundImage::before {
    content            : '';
    position           : fixed;
    top                : 0;
    left               : 0;
    right              : 0;
    bottom             : 0;
    background-image   : inherit;
    background-repeat  : no-repeat;
    background-size    : contain;
    background-position: center;
    filter             : blur(var(--bg-blur, 50px)) brightness(0.65) saturate(0.75);
    z-index            : -1;
    opacity            : var(--bg-opacity, 0.18);
    transition         : opacity 0.3s ease, filter 0.3s ease;
}

body.hasBackgroundImage::after {
    content                : '';
    position               : fixed;
    top                    : 0;
    left                   : 0;
    right                  : 0;
    bottom                 : 0;
    background             : rgba(255, 255, 255, 0.05);
    backdrop-filter        : blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index                : -1;
    pointer-events         : none;
    transition             : background 0.3s ease;
}

/* Responsive background scaling */
@media (max-width: 768px) {
    body.hasBackgroundImage {
        --bg-blur   : 45px;
        --bg-opacity: 0.08;
        --bg-scale  : 1.1;
    }

    body.hasBackgroundImage::after {
        background             : rgba(255, 255, 255, 0.03);
        backdrop-filter        : blur(1.5px);
        -webkit-backdrop-filter: blur(1.5px);
    }
}

@media (max-width: 480px) {
    body.hasBackgroundImage {
        --bg-blur   : 40px;
        --bg-opacity: 0.06;
        --bg-scale  : 1.05;
    }

    body.hasBackgroundImage::after {
        background             : rgba(255, 255, 255, 0.02);
        backdrop-filter        : blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }
}

/* Scale background with player on very small screens */
@media (max-height: 600px) {
    body.hasBackgroundImage {
        --bg-blur   : 40px;
        --bg-opacity: 0.08;
    }
}

/* Dark theme glassy overlay */
html[data-theme="dark"] body.hasBackgroundImage::after {
    background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    html[data-theme="dark"] body.hasBackgroundImage::after {
        background: rgba(0, 0, 0, 0.12);
    }
}

@media (max-width: 480px) {
    html[data-theme="dark"] body.hasBackgroundImage::after {
        background: rgba(0, 0, 0, 0.1);
    }
}

/* Scale background proportionally with player on small viewports */
@media (max-width: 820px) and (max-height: 820px) {
    body.hasBackgroundImage::before {
        /* Scale background to match player scaling */
        background-size: calc(740px * var(--player-scale, 1)) auto;
    }
}

body.hasBackgroundImage {
    background-image: none;
    position        : relative;
}

body.hasBackgroundImage::after {
    content        : '';
    position       : fixed;
    top            : 0;
    left           : 0;
    right          : 0;
    bottom         : 0;
    background     : var(--bg, rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(1px);
    z-index        : -1;
    pointer-events : none;
    /* Responsive backdrop */
    transition     : backdrop-filter 0.3s ease;
}

@media (max-width: 768px) {
    body.hasBackgroundImage::after {
        backdrop-filter: blur(0.5px);
    }
}

html {
    /* Prevent mobile horizontal scroll caused by off-screen transformed drawers */
    overflow-x: hidden;
}

.themeSwitcher {
    position       : fixed;
    top            : 12px;
    right          : 12px;
    z-index        : 9999;
    font-size      : 14px;
    color          : var(--accent);
    background     : var(--switcher-bg);
    border         : 1px solid var(--switcher-border);
    border-radius  : 10px;
    padding        : 8px 10px;
    backdrop-filter: blur(6px);
}

.themeButtons {
    display: flex;
    gap    : 6px;
}

.themeBtn {
    appearance        : none;
    -webkit-appearance: none;
    position          : relative;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    width             : 34px;
    height            : 34px;
    border-radius     : 10px;
    display           : inline-flex;
    align-items       : center;
    justify-content   : center;
    cursor            : pointer;
    transition        : transform 0.08s ease, border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}

.themeBtn:hover {
    opacity     : 0.9;
    border-color: rgba(var(--accent-rgb), 0.6);
}

.themeBtn:active {
    transform: scale(0.97);
}

.themeBtn:focus-visible {
    outline       : 2px solid var(--accent);
    outline-offset: 2px;
}

.themeBtn[aria-pressed="true"] {
    border-color: var(--accent);
    background  : var(--switcher-btn-bg-active);
}

.docBtn {
    appearance        : none;
    -webkit-appearance: none;
    position          : relative;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    width             : 34px;
    height            : 34px;
    border-radius     : 10px;
    display           : inline-flex;
    align-items       : center;
    justify-content   : center;
    cursor            : pointer;
    transition        : transform 0.08s ease, border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
    text-decoration   : none;
}

.docBtn:hover {
    opacity     : 0.9;
    border-color: rgba(var(--accent-rgb), 0.6);
}

.docBtn:active {
    transform: scale(0.97);
}

.docBtn:focus-visible {
    outline       : 2px solid var(--accent);
    outline-offset: 2px;
}

.docBtn svg {
    width : 18px;
    height: 18px;
    fill  : currentColor;
}

/* Progressive enhancement: nicer blending if supported */
@supports (background: color-mix(in srgb, #000 50%, #fff)) {
    .themeSwitcher {
        background: color-mix(in srgb, var(--page-bg-color) 70%, transparent);
        border    : 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    }

    .themeBtn {
        border    : 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
        background: color-mix(in srgb, var(--page-bg-color) 55%, transparent);
    }

    .themeBtn:hover {
        border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    }

    .themeBtn[aria-pressed="true"] {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
    }

    .docBtn {
        border    : 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
        background: color-mix(in srgb, var(--page-bg-color) 55%, transparent);
    }

    .docBtn:hover {
        border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    }
}

.bi {
    width : 18px;
    height: 18px;
    fill  : currentColor;
}

/* Playlist launcher (top-left) */
.playlistLauncher {
    position: fixed;
    top     : 12px;
    left    : 12px;
    z-index : 10001;
    display : inline-flex;
    gap     : 6px;

    /* Match theme switcher "pill" style */
    font-size      : 14px;
    color          : var(--accent);
    background     : var(--switcher-bg);
    border         : 1px solid var(--switcher-border);
    border-radius  : 10px;
    padding        : 8px 10px;
    backdrop-filter: blur(6px);
}

/* Tooltip support for buttons (hover only, bottom position) */
.themeBtn[title]:hover::after,
.docBtn[title]:hover::after {
    content       : attr(title);
    position      : absolute;
    top           : calc(100% + 8px);
    left          : 50%;
    transform     : translateX(-50%);
    background    : rgba(0, 0, 0, 0.85);
    color         : white;
    padding       : 6px 10px;
    border-radius : 6px;
    font-size     : 12px;
    white-space   : nowrap;
    pointer-events: none;
    z-index       : 10002;
    opacity       : 0;
    animation     : tooltipFadeIn 0.2s ease forwards;
}

.themeBtn[title]:hover::before,
.docBtn[title]:hover::before {
    content            : '';
    position           : absolute;
    top                : calc(100% + 2px);
    left               : 50%;
    transform          : translateX(-50%);
    border             : 5px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.85);
    pointer-events     : none;
    z-index            : 10003;
    opacity            : 0;
    animation          : tooltipFadeIn 0.2s ease forwards;
}

@keyframes tooltipFadeIn {
    from {
        opacity  : 0;
        transform: translateX(-50%) translateY(-4px);
    }

    to {
        opacity  : 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Small-screen tuning (keeps top controls compact and avoids overlap) */
@media (max-width: 420px) {

    .themeSwitcher,
    .playlistLauncher {
        top          : 10px;
        padding      : 6px 8px;
        border-radius: 10px;
    }

    .themeBtn {
        width : 32px;
        height: 32px;
    }

    .docBtn {
        width : 32px;
        height: 32px;
    }

    .docBtn svg {
        width : 16px;
        height: 16px;
    }

    .bi {
        width : 16px;
        height: 16px;
    }
}

/* Playlist modal */
.playlistBackdrop {
    position       : fixed;
    inset          : 0;
    background     : rgba(0, 0, 0, 0.35);
    z-index        : 9998;
    backdrop-filter: blur(2px);
    opacity        : 0;
    visibility     : hidden;
    pointer-events : none;
    transition     : opacity 0.18s ease, visibility 0s linear 0.18s;
}

.playlistBackdrop.isOpen {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
    transition    : opacity 0.18s ease;
}

.playlistPanel {
    position      : fixed;
    left          : 12px;
    top           : 12px;
    bottom        : 12px;
    width         : min(420px, calc(100vw - 24px));
    max-height    : calc(100vh - 24px);
    z-index       : 9999;
    border-radius : 14px;
    border        : 1px solid var(--switcher-border);
    background    : var(--switcher-bg);
    color         : var(--accent);
    overflow      : hidden;
    box-shadow    : 0 18px 50px rgba(0, 0, 0, 0.22);
    display       : flex;
    flex-direction: column;

    /* Drawer animation */
    transform     : translateX(calc(-100% - 18px));
    visibility    : hidden;
    pointer-events: none;
    transition    : transform 0.22s ease, visibility 0s linear 0.22s;
}

.playlistPanel.isOpen {
    transform     : translateX(0);
    visibility    : visible;
    pointer-events: auto;
    transition    : transform 0.22s ease;
}

/* Share/Embed Modal */
.shareModalBackdrop {
    position       : fixed;
    inset          : 0;
    background     : rgba(0, 0, 0, 0.5);
    z-index        : 10000;
    backdrop-filter: blur(4px);
    opacity        : 0;
    visibility     : hidden;
    pointer-events : none;
    transition     : opacity 0.2s ease, visibility 0s linear 0.2s;
}

.shareModalBackdrop.isOpen {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
    transition    : opacity 0.2s ease;
}

.shareModal {
    position      : fixed;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%) scale(0.95);
    width         : min(90vw, 600px);
    max-width     : 600px;
    max-height    : 90vh;
    z-index       : 10001;
    border-radius : 14px;
    border        : 1px solid var(--switcher-border);
    background    : var(--switcher-bg);
    color         : var(--accent);
    box-shadow    : 0 20px 60px rgba(0, 0, 0, 0.3);
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
    transition    : opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    overflow      : hidden;
    display       : flex;
    flex-direction: column;
}

.shareModal.isOpen {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
    transform     : translate(-50%, -50%) scale(1);
    transition    : opacity 0.2s ease, transform 0.2s ease;
}

.shareModalContent {
    display       : flex;
    flex-direction: column;
    max-height    : 90vh;
    overflow      : hidden;
}

.shareModalHeader {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 20px 24px;
    border-bottom  : 1px solid var(--switcher-btn-border);
    flex-shrink    : 0;
}

.shareModalTitle {
    font-size  : 18px;
    font-weight: 700;
    color      : var(--accent);
}

.shareModalClose {
    appearance        : none;
    -webkit-appearance: none;
    background        : transparent;
    border            : none;
    padding           : 4px;
    cursor            : pointer;
    color             : var(--accent);
    display           : flex;
    align-items       : center;
    justify-content   : center;
    border-radius     : 6px;
    transition        : background 0.2s ease;
}

.shareModalClose:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.shareModalClose .bi {
    width : 20px;
    height: 20px;
}

.shareModalBody {
    padding   : 24px;
    overflow-y: auto;
    flex      : 1;
    min-height: 0;
}

.shareSection {
    margin-bottom: 24px;
}

.shareSection:last-child {
    margin-bottom: 0;
}

.shareSectionTitle {
    font-size    : 14px;
    font-weight  : 600;
    color        : var(--accent);
    margin-bottom: 12px;
}

.shareInputGroup {
    display      : flex;
    gap          : 8px;
    margin-bottom: 12px;
}

.shareInputGroup .playlistInput {
    flex     : 1;
    min-width: 0;
    width    : auto;
    /* Override 100% width from .playlistAdd rule */
}

.shareInputGroup .playlistAddBtn {
    flex-shrink: 0;
    white-space: nowrap;
    width      : auto;
    /* Override 100% width from .playlistAdd rule */
}

.shareEmbedInput {
    font-family: 'Courier New', monospace;
    font-size  : 12px;
    resize     : vertical;
    min-height : 80px;
}

.shareHint {
    font-size  : 12px;
    color      : var(--accent);
    opacity    : 0.7;
    line-height: 1.4;
}

.shareButtons {
    display  : flex;
    gap      : 8px;
    flex-wrap: wrap;
}

.shareSocialBtn {
    appearance        : none;
    -webkit-appearance: none;
    display           : flex;
    align-items       : center;
    gap               : 6px;
    padding           : 8px 12px;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    border-radius     : 8px;
    cursor            : pointer;
    font-size         : 13px;
    transition        : all 0.2s ease;
}

.shareSocialBtn:hover {
    background  : color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
}

.shareSocialBtn .bi {
    width : 16px;
    height: 16px;
}

.shareModalFooter {
    display        : flex;
    align-items    : center;
    justify-content: flex-end;
    padding        : 20px 24px;
    border-top     : 1px solid var(--switcher-btn-border);
    flex-shrink    : 0;
}

.playlistHeaderActions {
    display    : flex;
    align-items: center;
    gap        : 8px;
}

.playlistShareBtn {
    appearance        : none;
    -webkit-appearance: none;
    background        : transparent;
    border            : none;
    padding           : 4px;
    cursor            : pointer;
    color             : var(--accent);
    display           : flex;
    align-items       : center;
    justify-content   : center;
    border-radius     : 6px;
    transition        : background 0.2s ease;
    width             : 32px;
    height            : 32px;
}

.playlistShareBtn:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.playlistShareBtn .bi {
    width : 18px;
    height: 18px;
}

/* Confirmation Modal */
.confirmModalBackdrop {
    position       : fixed;
    inset          : 0;
    background     : rgba(0, 0, 0, 0.5);
    z-index        : 10000;
    backdrop-filter: blur(4px);
    opacity        : 0;
    visibility     : hidden;
    pointer-events : none;
    transition     : opacity 0.2s ease, visibility 0s linear 0.2s;
}

.confirmModalBackdrop.isOpen {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
    transition    : opacity 0.2s ease;
}

.confirmModal {
    position      : fixed;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%) scale(0.95);
    width         : min(90vw, 480px);
    max-width     : 480px;
    z-index       : 10001;
    border-radius : 14px;
    border        : 1px solid var(--switcher-border);
    background    : var(--switcher-bg);
    color         : var(--accent);
    box-shadow    : 0 20px 60px rgba(0, 0, 0, 0.3);
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
    transition    : opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.confirmModal.isOpen {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
    transform     : translate(-50%, -50%) scale(1);
    transition    : opacity 0.2s ease, transform 0.2s ease;
}

.confirmModalContent {
    display       : flex;
    flex-direction: column;
    max-height    : 90vh;
    overflow      : hidden;
}

.confirmModalHeader {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 20px 24px;
    border-bottom  : 1px solid var(--switcher-btn-border);
}

.confirmModalTitle {
    font-size  : 18px;
    font-weight: 700;
    color      : var(--accent);
}

.confirmModalClose {
    appearance        : none;
    -webkit-appearance: none;
    background        : transparent;
    border            : none;
    padding           : 4px;
    cursor            : pointer;
    color             : var(--accent);
    display           : flex;
    align-items       : center;
    justify-content   : center;
    border-radius     : 6px;
    transition        : background 0.2s ease;
}

.confirmModalClose:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.confirmModalClose .bi {
    width : 20px;
    height: 20px;
}

.confirmModalBody {
    padding    : 24px;
    overflow-y : auto;
    flex       : 1;
    font-size  : 14px;
    line-height: 1.6;
}

.confirmModalBody p {
    margin: 0 0 12px 0;
}

.confirmModalBody p:last-of-type {
    margin-bottom: 0;
}

.confirmModalBody ul {
    margin    : 8px 0 12px 20px;
    padding   : 0;
    list-style: disc;
}

.confirmModalBody li {
    margin: 4px 0;
}

.confirmModalBody strong {
    color      : var(--accent);
    font-weight: 600;
}

.confirmModalFooter {
    display        : flex;
    align-items    : center;
    justify-content: flex-end;
    gap            : 12px;
    padding        : 20px 24px;
    border-top     : 1px solid var(--switcher-btn-border);
}

.confirmModalFooter .playlistAddBtn {
    min-width: 100px;
}

/* Upload UI removed for now (can be re-enabled later) */

/* Link upload drawer (shares the same layout/animation as playlist drawer) */
.uploadPanel {
    position      : fixed;
    left          : 12px;
    top           : 12px;
    bottom        : 12px;
    width         : min(380px, calc(100vw - 24px));
    max-height    : calc(100vh - 24px);
    z-index       : 9999;
    border-radius : 14px;
    border        : 1px solid var(--switcher-border);
    background    : var(--switcher-bg);
    color         : var(--accent);
    overflow      : hidden;
    box-shadow    : 0 18px 50px rgba(0, 0, 0, 0.22);
    transform     : translateX(calc(-100% - 18px));
    visibility    : hidden;
    pointer-events: none;
    transition    : transform 0.22s ease, visibility 0s linear 0.22s;
}

@media (max-width: 480px) {
    .uploadPanel {
        left         : 0;
        top          : 0;
        bottom       : 0;
        width        : 100vw;
        max-height   : 100vh;
        border-radius: 0;
    }
}

.uploadPanel.isOpen {
    transform     : translateX(0);
    visibility    : visible;
    pointer-events: auto;
    transition    : transform 0.22s ease;
}

.playlistHeader {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 10px 12px;
    border-bottom  : 1px solid var(--switcher-btn-border);
}

.playlistTitle {
    display       : inline-flex;
    align-items   : center;
    gap           : 8px;
    font-weight   : 600;
    letter-spacing: 0.2px;
}

.playlistClose {
    appearance        : none;
    -webkit-appearance: none;
    width             : 34px;
    height            : 34px;
    border-radius     : 10px;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    cursor            : pointer;
    display           : inline-flex;
    align-items       : center;
    justify-content   : center;
}

.playlistClose:hover {
    opacity: 0.9;
}

.playlistClose:focus-visible {
    outline       : 2px solid var(--accent);
    outline-offset: 2px;
}

.playlistSearchWrapper {
    padding      : 10px 12px;
    border-bottom: 1px solid var(--switcher-btn-border);
    background   : var(--switcher-bg);
}

.playlistSearch {
    position   : relative;
    display    : flex;
    align-items: center;
    gap        : 8px;
}

.playlistSearchIcon {
    position      : absolute;
    left          : 12px;
    width         : 16px;
    height        : 16px;
    color         : var(--accent);
    opacity       : 0.6;
    pointer-events: none;
    flex-shrink   : 0;
}

.playlistSearchInput {
    width        : 100%;
    padding      : 10px 36px 10px 36px;
    border       : 1px solid var(--switcher-btn-border);
    border-radius: 10px;
    background   : var(--switcher-btn-bg);
    color        : var(--accent);
    font-size    : 14px;
    font-family  : inherit;
    outline      : none;
    transition   : border-color 0.2s ease, background 0.2s ease;
}

.playlistSearchInput:focus {
    border-color: var(--accent);
    background  : var(--switcher-btn-bg-active);
}

.playlistSearchInput::placeholder {
    color  : var(--accent);
    opacity: 0.5;
}

.playlistSearchClear {
    position       : absolute;
    right          : 8px;
    width          : 24px;
    height         : 24px;
    border         : none;
    background     : transparent;
    color          : var(--accent);
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 50%;
    padding        : 0;
    opacity        : 0.7;
    transition     : opacity 0.2s ease, background 0.2s ease;
}

.playlistSearchClear:hover {
    opacity   : 1;
    background: rgba(var(--accent-rgb), 0.1);
}

.playlistSearchClear .bi {
    width : 14px;
    height: 14px;
}

.playlistTabs {
    display: flex;
    gap    : 8px;
    padding: 8px 6px 10px;
}

.playlistTabBtn {
    appearance        : none;
    -webkit-appearance: none;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    border-radius     : 999px;
    padding           : 8px 12px;
    font-weight       : 700;
    cursor            : pointer;
}

.playlistTabBtn.isActive {
    border-color: var(--accent);
    background  : var(--switcher-btn-bg-active);
}

.playlistTabBtn:focus-visible {
    outline       : 2px solid var(--accent);
    outline-offset: 2px;
}

.playlistTabPanel {
    /* panels are toggled via [hidden] and .isActive */
    display: contents;
}

.playlistSectionTitle {
    font-weight   : 700;
    font-size     : 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity       : 0.85;
    margin        : 0 0 12px 0;
    padding       : 0;
    border        : none;
    color         : var(--accent);
}

.settingsSection>.playlistSectionTitle {
    margin-bottom: 4px;
    font-size    : 11px;
    opacity      : 0.7;
}

/* Settings Form */
.settingsForm {
    display       : flex;
    flex-direction: column;
    gap           : 12px;
    padding       : 12px;
    min-height    : fit-content;
}

.settingsSection {
    background    : var(--switcher-btn-bg);
    border        : 1px solid var(--switcher-btn-border);
    border-radius : 10px;
    padding       : 10px 12px;
    display       : flex;
    flex-direction: column;
    gap           : 6px;
}

.settingsLabel {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    cursor       : pointer;
    font-size    : 14px;
    padding      : 5px 8px;
    border-radius: 6px;
    transition   : background 0.2s ease;
    margin       : 0;
}

.settingsLabel:hover {
    background: var(--switcher-btn-bg-active);
}

.settingsLabel input[type="checkbox"] {
    width       : 20px;
    height      : 20px;
    cursor      : pointer;
    accent-color: var(--accent);
    flex-shrink : 0;
    margin      : 0;
}

.settingsSpacer {
    height: 0;
}

.settingsBackgroundWrapper {
    display       : flex;
    flex-direction: column;
    gap           : 8px;
    margin-top    : 2px;
}

.settingsBackgroundTabs {
    display       : flex;
    gap           : 4px;
    border-bottom : 1px solid var(--switcher-btn-border);
    padding-bottom: 6px;
}

.settingsBackgroundTab {
    flex         : 1;
    padding      : 8px 12px;
    border       : none;
    background   : transparent;
    color        : var(--accent);
    font-size    : 13px;
    font-weight  : 600;
    cursor       : pointer;
    border-radius: 6px;
    transition   : all 0.2s ease;
    opacity      : 0.6;
}

.settingsBackgroundTab:hover {
    opacity   : 0.8;
    background: var(--switcher-btn-bg);
}

.settingsBackgroundTab.isActive {
    opacity   : 1;
    background: var(--switcher-btn-bg-active);
    color     : var(--accent);
}

.settingsBackgroundTabContent {
    display       : flex;
    flex-direction: column;
    gap           : 6px;
}

.settingsBackgroundUploadLabel {
    display        : flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
}

.settingsBackgroundUploadButton {
    width        : 100%;
    padding      : 10px 16px;
    border       : 2px dashed var(--switcher-btn-border);
    border-radius: 8px;
    background   : var(--switcher-btn-bg);
    color        : var(--accent);
    font-size    : 14px;
    font-weight  : 600;
    cursor       : pointer;
    transition   : all 0.2s ease;
    text-align   : center;
}

.settingsBackgroundUploadButton:hover {
    border-color: var(--accent);
    background  : var(--switcher-btn-bg-active);
}

.settingsBackgroundFileInfo {
    padding      : 6px 8px;
    background   : var(--switcher-btn-bg);
    border-radius: 6px;
    font-size    : 12px;
    color        : var(--accent);
}

.settingsBackgroundPreview {
    border       : 1px solid var(--switcher-btn-border);
    border-radius: 8px;
    overflow     : hidden;
    background   : var(--switcher-btn-bg);
    display      : none;
}

.settingsBackgroundPreviewHeader {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 8px 12px;
    border-bottom  : 1px solid var(--switcher-btn-border);
    background     : var(--switcher-btn-bg-active);
}

.settingsBackgroundPreviewHeader span {
    font-size  : 13px;
    font-weight: 600;
    color      : var(--accent);
}

.settingsBackgroundPreviewClose {
    border         : none;
    background     : transparent;
    color          : var(--accent);
    font-size      : 20px;
    line-height    : 1;
    cursor         : pointer;
    padding        : 0;
    width          : 24px;
    height         : 24px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 4px;
    transition     : background 0.2s ease;
}

.settingsBackgroundPreviewClose:hover {
    background: var(--switcher-btn-bg);
}

.settingsBackgroundPreviewImage {
    max-height     : 200px;
    overflow       : hidden;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.settingsBackgroundPreviewImage img {
    width     : 100%;
    height    : auto;
    display   : block;
    max-height: 200px;
    object-fit: contain;
}

.settingsBackgroundActions {
    display   : flex;
    gap       : 8px;
    margin-top: 4px;
}

.settingsBackgroundActions .playlistAddBtn {
    margin: 0;
}

.settingsVolumeWrapper {
    display      : flex;
    align-items  : center;
    gap          : 12px;
    padding      : 4px 10px;
    background   : var(--switcher-btn-bg-active);
    border-radius: 8px;
    border       : 1px solid var(--switcher-btn-border);
}

.settingVolume {
    flex              : 1;
    width             : 100%;
    height            : 6px;
    margin            : 0;
    padding           : 0;
    appearance        : none;
    -webkit-appearance: none;
    background        : transparent;
    cursor            : pointer;
    outline           : none;
}

.settingVolume::-webkit-slider-runnable-track {
    width        : 100%;
    height       : 6px;
    background   : rgba(var(--accent-rgb), 0.2);
    border-radius: 3px;
    cursor       : pointer;
}

.settingVolume::-webkit-slider-thumb {
    appearance        : none;
    -webkit-appearance: none;
    width             : 16px;
    height            : 16px;
    background        : var(--accent);
    border-radius     : 50%;
    cursor            : pointer;
    margin-top        : -5px;
    box-shadow        : 0 2px 4px rgba(0, 0, 0, 0.2);
    transition        : transform 0.1s ease, box-shadow 0.1s ease;
}

.settingVolume::-webkit-slider-thumb:hover {
    transform : scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.settingVolume::-moz-range-track {
    width        : 100%;
    height       : 6px;
    background   : rgba(var(--accent-rgb), 0.2);
    border-radius: 3px;
    cursor       : pointer;
    border       : none;
}

.settingVolume::-moz-range-thumb {
    width        : 16px;
    height       : 16px;
    background   : var(--accent);
    border       : none;
    border-radius: 50%;
    cursor       : pointer;
    box-shadow   : 0 2px 4px rgba(0, 0, 0, 0.2);
    transition   : transform 0.1s ease, box-shadow 0.1s ease;
}

.settingVolume::-moz-range-thumb:hover {
    transform : scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.settingsVolumeValue {
    min-width    : 48px;
    text-align   : center;
    font-weight  : 700;
    font-size    : 13px;
    color        : var(--accent);
    background   : var(--switcher-btn-bg);
    padding      : 4px 8px;
    border-radius: 6px;
    border       : 1px solid var(--switcher-btn-border);
    flex-shrink  : 0;
}

.settingClearBtn {
    background-color: rgba(220, 53, 69, 0.12) !important;
    border-color    : rgba(220, 53, 69, 0.35) !important;
    color           : #dc3545 !important;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    margin          : 0;
    padding         : 10px 16px;
    font-weight     : 600;
    font-size       : 13px;
    border-radius   : 8px;
    transition      : all 0.2s ease;
    box-shadow      : 0 1px 3px rgba(220, 53, 69, 0.1);
}

.settingClearBtn:hover {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color    : rgba(220, 53, 69, 0.5) !important;
    box-shadow      : 0 2px 6px rgba(220, 53, 69, 0.2);
    transform       : translateY(-1px);
}

.settingClearBtn .bi {
    width : 16px;
    height: 16px;
}

/* Data Management Section */
.settingsDataManagement {
    margin-top    : 12px;
    margin-bottom : 12px;
    padding       : 12px;
    background    : rgba(220, 53, 69, 0.06);
    border        : 1px solid rgba(220, 53, 69, 0.25);
    border-radius : 10px;
    display       : flex;
    flex-direction: column;
    gap           : 10px;
}

.settingsDataManagementHeader {
    display    : flex;
    align-items: center;
    gap        : 8px;
}

.settingsDataManagementTitle {
    font-weight   : 700;
    font-size     : 13px;
    color         : #dc3545;
    letter-spacing: 0.3px;
}

.settingsDataManagementDesc {
    font-size  : 12px;
    color      : var(--accent);
    opacity    : 0.75;
    line-height: 1.5;
    margin     : 0;
    padding    : 0;
}

.settingsDataManagement .settingClearBtn {
    width     : 100%;
    margin-top: 4px;
}

/* Help Panel */
.playlistHelpNote {
    padding      : 10px 12px;
    margin-bottom: 12px;
    background   : color-mix(in srgb, var(--accent) 10%, transparent);
    border       : 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 8px;
    font-size    : 13px;
    line-height  : 1.4;
    color        : var(--accent);
    font-weight  : 500;
}

.playlistHelpContent {
    padding: 8px;
}

.playlistHelpSection {
    font-weight  : 700;
    font-size    : 14px;
    margin-top   : 16px;
    margin-bottom: 8px;
    color        : var(--accent);
}

.playlistHelpSection:first-child {
    margin-top: 0;
}

.playlistHelpItem {
    display    : flex;
    align-items: center;
    gap        : 12px;
    padding    : 8px 0;
    font-size  : 14px;
    line-height: 1.5;
}

.playlistHelpKey {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    min-width      : 28px;
    height         : 28px;
    padding        : 0 8px;
    background     : var(--switcher-btn-bg);
    border         : 1px solid var(--switcher-btn-border);
    border-radius  : 6px;
    font-family    : 'Courier New', monospace;
    font-size      : 12px;
    font-weight    : 600;
    color          : var(--accent);
    box-shadow     : 0 1px 2px rgba(0, 0, 0, 0.1);
}

.playlistBody {
    padding       : 8px;
    padding-bottom: 12px;
    overflow-y    : auto;
    overflow-x    : hidden;
    flex          : 1;
    min-height    : 0;
}

.playlistAdd {
    display       : flex;
    flex-direction: column;
    gap           : 12px;
    padding       : 0;
    margin-bottom : 0;
}

.playlistAddRow {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 12px;
}

@media (max-width: 480px) {
    .playlistAddRow {
        grid-template-columns: 1fr;
    }
}


.playlistInput {
    appearance        : none;
    -webkit-appearance: none;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg-active);
    color             : var(--accent);
    border-radius     : 8px;
    padding           : 10px 14px;
    font-family       : inherit;
    font-size         : 14px;
    font-weight       : 500;
    outline           : none;
    transition        : all 0.2s ease;
}

/* 100% width for inputs in upload forms */
.playlistAdd .playlistInput {
    width     : 100%;
    box-sizing: border-box;
}

.playlistInput::placeholder {
    color  : color-mix(in srgb, var(--accent) 55%, transparent);
    opacity: 1;
}

.playlistInput:focus,
.playlistInput:focus-visible {
    outline     : none;
    border-color: var(--accent);
    box-shadow  : 0 0 0 3px rgba(var(--accent-rgb), 0.1);
    background  : var(--switcher-btn-bg);
}

.playlistInput:hover {
    border-color: var(--accent);
    background  : var(--switcher-btn-bg);
}

.playlistAddBtn {
    appearance        : none;
    -webkit-appearance: none;
    border            : 1px solid var(--accent);
    background        : var(--switcher-btn-bg-active);
    color             : var(--accent);
    border-radius     : 8px;
    padding           : 11px 18px;
    font-weight       : 600;
    font-size         : 14px;
    cursor            : pointer;
    transition        : all 0.2s ease;
    box-shadow        : 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* 100% width for buttons in upload forms */
.playlistAdd .playlistAddBtn {
    width     : 100%;
    box-sizing: border-box;
}

.playlistAddBtn:hover {
    background: var(--accent);
    color     : var(--switcher-bg);
    box-shadow: 0 4px 8px rgba(var(--accent-rgb), 0.25);
    transform : translateY(-1px);
}

.playlistAddBtn:active {
    transform : translateY(0);
    box-shadow: 0 2px 4px rgba(var(--accent-rgb), 0.2);
}

.playlistHint {
    font-size  : 12px;
    opacity    : 0.85;
    line-height: 1.2;
}

.playlistList {
    list-style    : none;
    margin        : 0;
    padding       : 0;
    display       : flex;
    flex-direction: column;
    gap           : 6px;
}

.playlistItem {
    border         : 1px solid var(--switcher-btn-border);
    background     : var(--switcher-btn-bg);
    border-radius  : 12px;
    padding        : 10px 10px;
    cursor         : pointer;
    outline        : none;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 10px;
    transition     : border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    position       : relative;
}

.playlistItem:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
}

.playlistItem:focus-visible {
    outline       : 2px solid var(--accent);
    outline-offset: 2px;
}

.playlistItem.isActive {
    border-color: var(--accent);
    background  : var(--switcher-btn-bg-active);
}

/* Drag and drop states */
.playlistItem.isDragging {
    opacity     : 0.85;
    cursor      : grabbing;
    z-index     : 1000;
    box-shadow  : 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: var(--accent);
}

/* Desktop and mobile drag - when translateY is applied via inline style */
.playlistItem.isDragging[style*="translateY"] {
    transition: none !important;
    opacity   : 0.85;
}

.playlistItem.dragOverBefore::before {
    content      : '';
    position     : absolute;
    top          : -3px;
    left         : 0;
    right        : 0;
    height       : 4px;
    background   : var(--accent);
    border-radius: 3px 3px 0 0;
    z-index      : 10;
    box-shadow   : 0 2px 8px rgba(var(--accent-rgb), 0.4);
    animation    : dragIndicatorPulse 0.6s ease-in-out infinite;
}

.playlistItem.dragOverAfter::after {
    content      : '';
    position     : absolute;
    bottom       : -3px;
    left         : 0;
    right        : 0;
    height       : 4px;
    background   : var(--accent);
    border-radius: 0 0 3px 3px;
    z-index      : 10;
    box-shadow   : 0 2px 8px rgba(var(--accent-rgb), 0.4);
    animation    : dragIndicatorPulse 0.6s ease-in-out infinite;
}

@keyframes dragIndicatorPulse {

    0%,
    100% {
        opacity  : 1;
        transform: scaleY(1);
    }

    50% {
        opacity  : 0.7;
        transform: scaleY(0.8);
    }
}

.playlistItem.dragOverBefore,
.playlistItem.dragOverAfter {
    background-color: rgba(var(--accent-rgb), 0.05);
    transition      : background-color 0.2s ease;
}

.playlistDragHandle {
    appearance         : none;
    -webkit-appearance : none;
    border             : none;
    background         : transparent;
    color              : var(--accent);
    cursor             : grab;
    padding            : 4px;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    opacity            : 0.5;
    transition         : opacity 0.2s ease, color 0.2s ease;
    flex-shrink        : 0;
    margin-right       : -4px;
    touch-action       : none;
    /* Prevent default touch behaviors */
    user-select        : none;
    -webkit-user-select: none;
}

.playlistDragHandle:active {
    cursor: grabbing;
}

.playlistDragHandle:hover {
    opacity: 1;
    color  : var(--accent);
}

.playlistItem:hover .playlistDragHandle {
    opacity: 0.8;
}

.playlistDragHandle .bi {
    width         : 14px;
    height        : 14px;
    fill          : currentColor;
    pointer-events: none;
    /* Prevent SVG from interfering with touch */
}

.playlistThumbnail {
    width          : 50px;
    height         : 50px;
    flex           : 0 0 auto;
    border-radius  : 8px;
    overflow       : hidden;
    background     : color-mix(in srgb, var(--switcher-bg) 65%, transparent);
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.playlistThumbnailDefault {
    background: color-mix(in srgb, var(--accent) 15%, var(--switcher-bg));
}

.playlistThumbnail img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
}

.playlistThumbnailDefault img {
    width     : 30%;
    height    : 30%;
    object-fit: contain;
    filter    : brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(7498%) hue-rotate(330deg) brightness(101%) contrast(101%);
    opacity   : 0.85;
}

.playlistTrack {
    min-width: 0;
    flex     : 1 1 auto;
}

.playlistActions {
    display    : flex;
    align-items: center;
    gap        : 6px;
    flex-shrink: 0;
}

.playlistDownload,
.playlistShare,
.playlistDelete {
    appearance        : none;
    -webkit-appearance: none;
    width             : 34px;
    height            : 34px;
    border-radius     : 10px;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    cursor            : pointer;
    display           : inline-flex;
    align-items       : center;
    justify-content   : center;
    flex              : 0 0 auto;
    transition        : all 0.2s ease;
}

.playlistDownload:hover,
.playlistShare:hover,
.playlistDelete:hover {
    opacity     : 0.9;
    border-color: rgba(var(--accent-rgb), 0.6);
}

.playlistDownload:focus-visible,
.playlistShare:focus-visible,
.playlistDelete:focus-visible {
    outline       : 2px solid var(--accent);
    outline-offset: 2px;
}

.playlistDownload .bi,
.playlistShare .bi,
.playlistDelete .bi {
    width : 18px;
    height: 18px;
}

.playlistEmpty {
    padding      : 14px 10px;
    border       : 1px dashed var(--switcher-btn-border);
    border-radius: 12px;
    background   : color-mix(in srgb, var(--switcher-bg) 65%, transparent);
    font-size    : 13px;
    line-height  : 1.25;
    opacity      : 0.95;
}

/* Upload: drag/drop zone */
.dropZone {
    border        : 2px dashed var(--switcher-btn-border);
    border-radius : 12px;
    background    : color-mix(in srgb, var(--switcher-bg) 65%, transparent);
    padding       : 32px 16px;
    text-align    : center;
    font-size     : 14px;
    line-height   : 1.5;
    cursor        : pointer;
    transition    : all 0.2s ease;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 8px;
}

.dropZone:hover {
    border-color: var(--accent);
    background  : color-mix(in srgb, var(--switcher-bg) 80%, transparent);
}

.dropZone.isActive {
    border-color: var(--accent);
    background  : var(--switcher-btn-bg-active);
    transform   : scale(1.02);
}

.dropZoneIcon {
    width        : 48px;
    height       : 48px;
    color        : var(--accent);
    opacity      : 0.7;
    margin-bottom: 4px;
}

.dropZoneText {
    font-size  : 15px;
    font-weight: 600;
    color      : var(--accent);
}

.dropZoneHint {
    opacity  : 0.75;
    font-size: 13px;
}

/* Upload files list */
.uploadFilesList {
    display       : flex;
    flex-direction: column;
    gap           : 8px;
    margin-top    : 12px;
    max-height    : 300px;
    overflow-y    : auto;
}

.uploadFileItem {
    border        : 1px solid var(--switcher-btn-border);
    border-radius : 10px;
    background    : var(--switcher-btn-bg);
    padding       : 10px;
    display       : flex;
    flex-direction: column;
    gap           : 6px;
}

.uploadFileInfo {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.uploadFileIcon {
    width      : 20px;
    height     : 20px;
    color      : var(--accent);
    flex-shrink: 0;
}

.uploadFileNameInput {
    flex     : 1;
    min-width: 0;
    font-size: 14px;
    padding  : 8px 10px;
}

.uploadFileRemove {
    appearance        : none;
    -webkit-appearance: none;
    width             : 32px;
    height            : 32px;
    border-radius     : 8px;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    cursor            : pointer;
    display           : inline-flex;
    align-items       : center;
    justify-content   : center;
    flex-shrink       : 0;
    padding           : 0;
}

.uploadFileRemove:hover {
    background  : color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
}

.uploadFileRemove .bi {
    width : 14px;
    height: 14px;
}

.uploadFileName {
    font-size   : 12px;
    opacity     : 0.7;
    padding-left: 30px;
    word-break  : break-all;
}

.uploadMetadataSection {
    margin-top: 16px;
}

.uploadFilesBtn {
    margin-top: 12px;
    width     : 100%;
    box-sizing: border-box;
}

.uploadSubmitBtn {
    width     : 100%;
    box-sizing: border-box;
}

.playlistFile {
    display: none;
}

.playlistSecondaryBtn {
    appearance        : none;
    -webkit-appearance: none;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    border-radius     : 10px;
    padding           : 10px 10px;
    font-weight       : 700;
    cursor            : pointer;
}

.playlistSecondaryBtn:hover {
    opacity: 0.9;
}

/* Player volume tooltip */
.player .volumeTooltip {
    position      : absolute;
    bottom        : 275px;
    left          : 50%;
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
    transition    : opacity 0.2s ease, visibility 0s linear 0.2s, transform 0.2s ease;
    z-index       : 1000;
    transform     : translateX(-50%) translateY(8px);
}

.player .volumeTooltip.isOpen {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
    transition    : opacity 0.2s ease, transform 0.2s ease;
    transform     : translateX(-50%) translateY(0);
}

.player .volumeWrap {
    background     : var(--switcher-bg);
    border         : 1px solid var(--switcher-border);
    border-radius  : 12px;
    padding        : 12px 16px;
    box-shadow     : 0 8px 24px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(6px);
    display        : flex;
    align-items    : center;
    justify-content: center;
    min-width      : 180px;
}

.volumeTooltipArrow {
    position    : absolute;
    bottom      : -6px;
    left        : 50%;
    transform   : translateX(-50%);
    width       : 0;
    height      : 0;
    border-left : 6px solid transparent;
    border-right: 6px solid transparent;
    border-top  : 6px solid var(--switcher-border);
}

.volumeTooltipArrow::after {
    content     : '';
    position    : absolute;
    bottom      : 1px;
    left        : 50%;
    transform   : translateX(-50%);
    width       : 0;
    height      : 0;
    border-left : 5px solid transparent;
    border-right: 5px solid transparent;
    border-top  : 5px solid var(--switcher-bg);
}

.volumeSlider {
    width                      : 160px;
    height                     : 6px;
    margin                     : 0;
    padding                    : 0;
    appearance                 : none;
    -webkit-appearance         : none;
    background                 : transparent;
    cursor                     : pointer;
    outline                    : none;
    touch-action               : pan-x;
    -webkit-tap-highlight-color: transparent;
}

/* Volume slider track (WebKit/Blink) */
.volumeSlider::-webkit-slider-runnable-track {
    width        : 100%;
    height       : 6px;
    background   : rgba(var(--accent-rgb), 0.2);
    border-radius: 3px;
    cursor       : pointer;
}

/* Volume slider thumb (WebKit/Blink) */
.volumeSlider::-webkit-slider-thumb {
    appearance        : none;
    -webkit-appearance: none;
    width             : 20px;
    height            : 20px;
    background        : var(--accent);
    border-radius     : 50%;
    cursor            : pointer;
    margin-top        : -7px;
    box-shadow        : 0 2px 4px rgba(0, 0, 0, 0.2);
    transition        : transform 0.1s ease, box-shadow 0.1s ease;
    touch-action      : pan-x;
}

.volumeSlider::-webkit-slider-thumb:hover {
    transform : scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.volumeSlider::-webkit-slider-thumb:active {
    transform: scale(1.05);
}

/* Volume slider track (Firefox) */
.volumeSlider::-moz-range-track {
    width        : 100%;
    height       : 6px;
    background   : rgba(var(--accent-rgb), 0.2);
    border-radius: 3px;
    cursor       : pointer;
    border       : none;
}

/* Volume slider thumb (Firefox) */
.volumeSlider::-moz-range-thumb {
    width        : 20px;
    height       : 20px;
    background   : var(--accent);
    border       : none;
    border-radius: 50%;
    cursor       : pointer;
    box-shadow   : 0 2px 4px rgba(0, 0, 0, 0.2);
    transition   : transform 0.1s ease, box-shadow 0.1s ease;
    touch-action : pan-x;
}

.volumeSlider::-moz-range-thumb:hover {
    transform : scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.volumeSlider::-moz-range-thumb:active {
    transform: scale(1.05);
}

/* Focus styles */
.volumeSlider:focus {
    outline: none;
}

.volumeSlider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
}

.volumeSlider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
}

/* Upload tabs */
.uploadTabs {
    display      : flex;
    border-bottom: 1px solid var(--switcher-btn-border);
    margin-bottom: 20px;
    gap          : 0;
}

.uploadTab {
    appearance        : none;
    -webkit-appearance: none;
    flex              : 1;
    padding           : 12px 16px;
    background        : transparent;
    border            : none;
    border-bottom     : 2px solid transparent;
    color             : var(--switcher-text);
    font-size         : 14px;
    font-weight       : 500;
    cursor            : pointer;
    transition        : color 0.2s ease, border-color 0.2s ease;
    text-align        : center;
}

.uploadTab:hover {
    color: var(--accent);
}

.uploadTab.uploadTabActive {
    color              : var(--accent);
    border-bottom-color: var(--accent);
}

.uploadTabContent {
    display: none;
}

.uploadTabContent.uploadTabContentActive {
    display: block;
}

.uploadTabContent {
    padding: 0 4px;
}

.uploadSectionDivider {
    height    : 1px;
    background: var(--switcher-btn-border);
    margin    : 20px 0;
    opacity   : 0.5;
}

.uploadSectionSpacer {
    margin-top: 20px !important;
}

.uploadHint {
    margin-top: 12px;
    text-align: center;
}

.uploadSubmitBtn {
    margin-top: 16px;
}

/* Thumbnail input group */
.thumbnailInputGroup {
    display    : flex;
    align-items: center;
    gap        : 12px;
    flex-wrap  : wrap;
    width      : 100%;
}

.thumbnailInputGroup .playlistInput {
    flex     : 1;
    min-width: 150px;
}

.thumbnailInputGroup .thumbnailInputDivider {
    flex-shrink: 0;
}

.thumbnailInputGroup .thumbnailUploadLabel {
    flex     : 0 0 auto;
    min-width: 140px;
}

@media (max-width: 480px) {
    .thumbnailInputGroup {
        flex-direction: column;
        align-items   : stretch;
    }

    .thumbnailInputGroup .playlistInput {
        flex     : 1 1 100%;
        min-width: 0;
        width    : 100%;
    }

    .thumbnailInputGroup .thumbnailInputDivider {
        order: 2;
    }

    .thumbnailInputGroup .thumbnailUploadLabel {
        flex     : 1 1 100%;
        min-width: 0;
        width    : 100%;
        order    : 3;
    }
}

@media (max-width: 480px) {
    .uploadTabs {
        margin-bottom: 16px;
    }

    .uploadTab {
        padding  : 10px 12px;
        font-size: 13px;
    }

    .thumbnailInputGroup {
        flex-direction: column;
        align-items   : stretch;
        gap           : 8px;
    }

    .thumbnailInputDivider {
        text-align: center;
        padding   : 4px 0;
        order     : 2;
    }

    .thumbnailUploadLabel {
        width: 100%;
        order: 3;
    }

    .thumbnailUploadLabel .playlistAddBtn {
        width     : 100%;
        text-align: center;
        display   : block;
    }

    .playlistInput.playlistThumbnailInputFile,
    .playlistInput.playlistThumbnailInput {
        order: 1;
    }

    .thumbnailPreviewContainer {
        flex-wrap: wrap;
    }

    .thumbnailPreview {
        max-width : 80px;
        max-height: 80px;
    }
}

.thumbnailInputDivider {
    color      : var(--switcher-text);
    font-size  : 12px;
    white-space: nowrap;
}

.thumbnailUploadLabel {
    cursor    : pointer;
    display   : flex;
    width     : 100%;
    box-sizing: border-box;
}

.thumbnailUploadLabel input[type="file"] {
    display: none;
}

.thumbnailUploadBtn {
    display      : block;
    width        : 100%;
    box-sizing   : border-box;
    padding      : 10px 16px;
    background   : var(--switcher-btn-bg);
    border       : 1px solid var(--switcher-btn-border);
    border-radius: 10px;
    color        : var(--accent);
    font-weight  : 600;
    font-size    : 13px;
    cursor       : pointer;
    transition   : background 0.2s ease, border-color 0.2s ease;
    text-align   : center;
    white-space  : nowrap;
}

.thumbnailUploadBtn:hover {
    background  : color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
}

.thumbnailPreviewContainer,
.thumbnailPreviewContainerUrl {
    display    : flex;
    align-items: center;
    gap        : 8px;
    margin-top : 12px;
}

.thumbnailPreviewContainer:not(.hasPreview),
.thumbnailPreviewContainerUrl:not(.hasPreview) {
    display: none;
}

.thumbnailPreview {
    max-width    : 100px;
    max-height   : 100px;
    border-radius: 8px;
    border       : 1px solid var(--switcher-btn-border);
    object-fit   : cover;
    flex-shrink  : 0;
}

.thumbnailPreview:not([src]),
.thumbnailPreview[src=""] {
    display: none;
}

.thumbnailPreviewRemove {
    appearance        : none;
    -webkit-appearance: none;
    padding           : 6px 12px;
    background        : var(--switcher-btn-bg);
    border            : 1px solid var(--switcher-btn-border);
    border-radius     : 8px;
    cursor            : pointer;
    color             : var(--accent);
    font-size         : 12px;
    font-weight       : 600;
    transition        : background 0.2s ease, border-color 0.2s ease;
    white-space       : nowrap;
}

.thumbnailPreviewRemove:hover {
    background  : color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
}

.thumbnailHint {
    margin-top: 8px;
    font-size : 11px;
}

/* Toast notifications */
.toastHost {
    position      : fixed;
    left          : 50%;
    bottom        : 16px;
    transform     : translateX(-50%);
    z-index       : 10050;
    display       : flex;
    flex-direction: column;
    gap           : 8px;
    pointer-events: none;
}

.toast {
    pointer-events : none;
    max-width      : min(520px, calc(100vw - 24px));
    background     : var(--switcher-bg);
    border         : 1px solid var(--switcher-border);
    color          : var(--accent);
    border-radius  : 12px;
    padding        : 10px 12px;
    box-shadow     : 0 12px 36px rgba(0, 0, 0, 0.18);
    opacity        : 0;
    transform      : translateY(8px);
    transition     : opacity 0.18s ease, transform 0.18s ease;
    backdrop-filter: blur(6px);
    font-size      : 13px;
    line-height    : 1.25;
}

.toast.isOpen {
    opacity  : 1;
    transform: translateY(0);
}

.toast--error {
    border-color: rgba(255, 80, 80, 0.45);
}

.toast--success {
    border-color: rgba(80, 200, 120, 0.45);
}

.playlistSong {
    font-weight: 600;
    font-size  : 15px;
    line-height: 1.15;
}

.playlistArtist {
    opacity    : 0.85;
    margin-top : 4px;
    font-size  : 13px;
    line-height: 1.1;
}

body {
    background-color : var(--page-bg-color);
    background-image : var(--page-bg-image);
    background-repeat: repeat;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    min-height       : 100vh;
    min-height       : 100svh;
    min-height       : 100dvh;
    overflow         : hidden;
}

.player {
    width           : 740px;
    height          : 740px;
    position        : relative;
    transform-origin: center center;
    /* Scale the entire player (canvas + HTML controls) as a single unit */
    --player-scale  : 1;
    transform       : scale(var(--player-scale));
}

/* If the browser supports it, CSS alone can scale the player. JS also sets --player-scale as a fallback. */
@supports (width: min(1px, 2px)) {
    .player {
        /* Keep a small margin so it never touches the edges */
        --player-scale: min(1,
                calc((100vw - 24px) / 740),
                calc((100vh - 24px) / 740));
    }
}

.player .playarea {
    position      : absolute;
    top           : 50%;
    left          : 50%;
    height        : 126px;
    width         : 320px;
    margin-top    : -63px;
    margin-left   : -160px;
    pointer-events: none;
    z-index       : 100;
}

.player .playarea div {
    display       : inline-block;
    pointer-events: auto;
    position      : relative;
    z-index       : 101;
}

.player .playarea .play {
    cursor         : pointer;
    opacity        : 0.85;
    vertical-align : middle;
    margin         : 0 26px;
    border         : 3px solid var(--accent);
    border-radius  : 120px;
    width          : 120px;
    height         : 120px;
    background     : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNDVweCIgaGVpZ2h0PSI1NXB4IiB2aWV3Qm94PSIwIDAgNDUgNTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPnBsYXktPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMSI+ICAgICAgICAgICAgPGZlT2Zmc2V0IGR4PSIwIiBkeT0iMCIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4gICAgICAgICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxLjUiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUdhdXNzaWFuQmx1cj4gICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC45NDI0NzI1NjIgICAwIDAgMCAwIDAuOTYxNzk0NTYyICAgMCAwIDAgMCAwLjk4MjE5NjAwMyAgMCAwIDAgMC4zNSAwIiBpbj0ic2hhZG93Qmx1ck91dGVyMSIgdHlwZT0ibWF0cml4IiByZXN1bHQ9InNoYWRvd01hdHJpeE91dGVyMSI+PC9mZUNvbG9yTWF0cml4PiAgICAgICAgICAgIDxmZU1lcmdlPiAgICAgICAgICAgICAgICA8ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSI+PC9mZU1lcmdlTm9kZT4gICAgICAgICAgICAgICAgPGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIj48L2ZlTWVyZ2VOb2RlPiAgICAgICAgICAgIDwvZmVNZXJnZT4gICAgICAgIDwvZmlsdGVyPiAgICA8L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPiAgICAgICAgPGcgaWQ9IlBsYXllci12ZXJzaW9uLTEiIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00ODIuMDAwMDAwLCAtMjk2LjAwMDAwMCkiIGZpbHRlcj0idXJsKCNmaWx0ZXItMSkiIGZpbGw9IiNGRTQzNjUiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik00ODUsMzE0LjM1MDE1NCBMNDg1LDM0OCBMNTI1LDMyNC4wMzI2MDkgTDQ4NSwyOTkgTDQ4NSwzMTQuMzUwMTU0IFoiIGlkPSJwbGF5LSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+) 42px 34px no-repeat;
    background-size: 45px 55px;
}


.player .playarea .pause {
    display        : none;
    cursor         : pointer;
    opacity        : 0.85;
    vertical-align : middle;
    margin         : 0 26px;
    border         : 3px solid var(--accent);
    border-radius  : 120px;
    width          : 120px;
    height         : 120px;
    background     : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMzRweCIgaGVpZ2h0PSI1MXB4IiB2aWV3Qm94PSIwIDAgMzQgNTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPkxpbmU8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJQbGF5ZXItdmVyc2lvbi0xIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDgyLjAwMDAwMCwgLTI5OC4wMDAwMDApIiBzdHJva2U9IiNGRTQzNjUiIHN0cm9rZS1vcGFjaXR5PSIwLjg1IiBmaWxsPSIjRkU0MzY1IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9IjAuODUiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik00ODMsMzAxLjI2ODUxOSBMNDgzLDM0NS43MzE0ODEgTDQ4MywzNDggTDQ4OC4wNzI0NjQsMzQ4IEw0ODguMDcyNDY0LDM0NS43MzE0ODEgTDQ4OC4wNzI0NjQsMzAxLjI2ODUxOSBMNDg4LjA3MjQ2NCwyOTkgTDQ4MywyOTkgTDQ4MywzMDEuMjY4NTE5IFogTTUwOS45Mjc1MzYsMzAxLjI2ODUxOSBMNTA5LjkyNzUzNiwzNDUuNzMxNDgxIEw1MDkuOTI3NTM2LDM0OCBMNTE1LDM0OCBMNTE1LDM0NS43MzE0ODEgTDUxNSwzMDEuMjY4NTE5IEw1MTUsMjk5IEw1MDkuOTI3NTM2LDI5OSBMNTA5LjkyNzUzNiwzMDEuMjY4NTE5IFoiIGlkPSJMaW5lIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) 43px 35px no-repeat;
    background-size: 35px 51px;
}


.player .playarea .prevSong {
    cursor    : pointer;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNjZweCIgaGVpZ2h0PSI0M3B4IiB2aWV3Qm94PSIwIDAgNjYgNDMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPnJld2luZDwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz4gICAgICAgIDxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTEiPiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjAiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+ICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVHYXVzc2lhbkJsdXI+ICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuOTQxMTc2NDcxICAgMCAwIDAgMCAwLjk2MDc4NDMxNCAgIDAgMCAwIDAgMC45ODAzOTIxNTcgIDAgMCAwIDAuMzUgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiIHR5cGU9Im1hdHJpeCIgcmVzdWx0PSJzaGFkb3dNYXRyaXhPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4gICAgICAgICAgICA8ZmVNZXJnZT4gICAgICAgICAgICAgICAgPGZlTWVyZ2VOb2RlIGluPSJzaGFkb3dNYXRyaXhPdXRlcjEiPjwvZmVNZXJnZU5vZGU+ICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyI+PC9mZU1lcmdlTm9kZT4gICAgICAgICAgICA8L2ZlTWVyZ2U+ICAgICAgICA8L2ZpbHRlcj4gICAgPC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJQbGF5ZXItdmVyc2lvbi0xIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzQyLjAwMDAwMCwgLTMwMi4wMDAwMDApIiBmaWx0ZXI9InVybCgjZmlsdGVyLTEpIiBmaWxsPSIjRkU0MzY1IiBmaWxsLW9wYWNpdHk9IjAuODUiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNDUsMzA1IEwzNDUsMzQyIEwzNzUsMzIzLjkwMjE3NCBMMzQ1LDMwNSBMMzQ1LDMwNSBaIE0zNzUsMzA1IEwzNzUsMzQyIEw0MDUsMzIzLjc3NjEyIEwzNzUsMzA1IEwzNzUsMzA1IFoiIGlkPSJyZXdpbmQiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM3NS4wMDAwMDAsIDMyMy41MDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTM3NS4wMDAwMDAsIC0zMjMuNTAwMDAwKSAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==) 0 0 no-repeat;
}

.player .playarea .nextSong {
    cursor    : pointer;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNjZweCIgaGVpZ2h0PSI0M3B4IiB2aWV3Qm94PSIwIDAgNjYgNDMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmZvcndhcmQ8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8ZmlsdGVyIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0xIj4gICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIwIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwLjk0MTE3NjQ3MSAgIDAgMCAwIDAgMC45NjA3ODQzMTQgICAwIDAgMCAwIDAuOTgwMzkyMTU3ICAwIDAgMCAwLjM1IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiB0eXBlPSJtYXRyaXgiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+ICAgICAgICAgICAgPGZlTWVyZ2U+ICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlTWVyZ2VOb2RlPiAgICAgICAgICAgICAgICA8ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVNZXJnZU5vZGU+ICAgICAgICAgICAgPC9mZU1lcmdlPiAgICAgICAgPC9maWx0ZXI+ICAgIDwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8ZyBpZD0iUGxheWVyLXZlcnNpb24tMSIgc2tldGNoOnR5cGU9Ik1TQXJ0Ym9hcmRHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU5Mi4wMDAwMDAsIC0zMDIuMDAwMDAwKSIgZmlsbC1vcGFjaXR5PSIwLjg1IiBmaWx0ZXI9InVybCgjZmlsdGVyLTEpIiBmaWxsPSIjRkU0MzY1Ij4gICAgICAgICAgICA8cGF0aCBkPSJNNTk1LDMwNSBMNTk1LDM0MiBMNjI1LDMyMy45MDIxNzQgTDU5NSwzMDUgTDU5NSwzMDUgWiBNNjI1LDMwNSBMNjI1LDM0MiBMNjU1LDMyMy43NzYxMiBMNjI1LDMwNSBMNjI1LDMwNSBaIiBpZD0iZm9yd2FyZCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+) 0 0 no-repeat;
}

.player .playarea .prevSong,
.player .playarea .nextSong {
    vertical-align : middle;
    background-size: 66px 43px;
    width          : 66px;
    height         : 43px;
    pointer-events : auto !important;
    position       : relative;
    z-index        : 102;
    cursor         : pointer;
}


.player .playarea .prevSong:hover,
.player .playarea .nextSong:hover,
.player .playarea .pause:hover,
.player .playarea .play:hover,
.player .soundControl:hover {
    opacity: 0.7;
}

.player .song {
    font-family: inherit;
    color      : var(--accent);
    position   : absolute;
    top        : 225px;
    left       : 0;
    width      : 100%;
    text-align : center;
    transform  : none;
}

.player .song .artist {
    font-size    : 22px;
    margin-bottom: 5px;
}

.player .song .name {
    font-size: 18px;
}


.player .soundControl {
    cursor         : pointer;
    width          : 31px;
    height         : 27px;
    position       : absolute;
    bottom         : 240px;
    left           : 50%;
    margin-left    : -16px;
    background     : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMzFweCIgaGVpZ2h0PSIyN3B4IiB2aWV3Qm94PSIwIDAgMzEgMjciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmhpZ2gtdm9sdW1lPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMSI+ICAgICAgICAgICAgPGZlT2Zmc2V0IGR4PSIwIiBkeT0iMCIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4gICAgICAgICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVHYXVzc2lhbkJsdXI+ICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuOTQxMTc2NDcxICAgMCAwIDAgMCAwLjk2MDc4NDMxNCAgIDAgMCAwIDAgMC45ODAzOTIxNTcgIDAgMCAwIDAuMzUgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiIHR5cGU9Im1hdHJpeCIgcmVzdWx0PSJzaGFkb3dNYXRyaXhPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4gICAgICAgICAgICA8ZmVNZXJnZT4gICAgICAgICAgICAgICAgPGZlTWVyZ2VOb2RlIGluPSJzaGFkb3dNYXRyaXhPdXRlcjEiPjwvZmVNZXJnZU5vZGU+ICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyI+PC9mZU1lcmdlTm9kZT4gICAgICAgICAgICA8L2ZlTWVyZ2U+ICAgICAgICA8L2ZpbHRlcj4gICAgPC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJQbGF5ZXItdmVyc2lvbi0xIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDgzLjAwMDAwMCwgLTQyNS4wMDAwMDApIiBmaWxsLW9wYWNpdHk9IjAuOCIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0xKSIgZmlsbD0iI0ZFNDM2NSI+ICAgICAgICAgICAgPHBhdGggZD0iTTUwOC4wMDY2MzQsNDI3IEM1MTAuNTE0ODQ4LDQzMC4xNzU0ODQgNTEyLDQzNC4xODQ0NjMgNTEyLDQzOC41NDI0NyBDNTEyLDQ0Mi44NjE3MSA1MTAuNTQxMTUzLDQ0Ni44MzgxMDQgNTA4LjA3MzMyNiw0NTAgTDUwNi45NDMyNjksNDQ5LjE1MzQwNSBDNTA5LjI1OTIwNiw0NDYuMTgwMjQ0IDUxMC42NDk5OTksNDQyLjUxMTY5MSA1MTAuNjQ5OTk5LDQzOC41NDI0NyBDNTEwLjY0OTk5OSw0MzQuNTI5NDcyIDUwOS4yMjgzNTgsNDMwLjgyMzgwOSA1MDYuODY2MzAyLDQyNy44MzM0MTQgTDUwOC4wMDY2MzQsNDI3IEw1MDguMDA2NjM0LDQyNyBaIE01MDMuNjcwMjEyLDQ0Ni43MDEzNTggQzUwNS40OTczMjgsNDQ0LjQzNjg2IDUwNi41OTk5OTksNDQxLjYwOTMzMSA1MDYuNTk5OTk5LDQzOC41NDI0NjkgQzUwNi41OTk5OTksNDM1LjQxNDc0IDUwNS40NTMxMjQsNDMyLjUzNTkzNyA1MDMuNTYwNTcsNDMwLjI0OTQxOSBMNTAyLjU4MjY1OCw0MzAuOTY0MTI5IEM1MDQuMjQ4MDEsNDMzLjA4NDYzOCA1MDUuMjUwMDAxLDQzNS43MDU2MyA1MDUuMjUwMDAxLDQzOC41NDI0NjkgQzUwNS4yNTAwMDEsNDQxLjMxMzU1NCA1MDQuMjkzOTIyLDQ0My44Nzg2ODEgNTAyLjY5NzM4Nyw0NDUuOTcyNTU1IEw1MDMuNjcwMjEyLDQ0Ni43MDEzNTggTDUwMy42NzAyMTIsNDQ2LjcwMTM1OCBaIE00OTkuNjk0ODIsNDQzLjcyMzE0OSBDNTAxLjEwNTE0MSw0NDIuMjkzMTQ3IDUwMS45NzMwNzcsNDQwLjM0NDU3NSA1MDEuOTczMDc3LDQzOC4xOTcwMDcgQzUwMS45NzMwNzcsNDM2LjE2NjYzMiA1MDEuMTk3MjgyLDQzNC4zMTQxMjYgNDk5LjkyMDgwNSw0MzIuOTA5NTUxIEw0OTguOTQyMDkxLDQzMy42MjQ4NDcgQzQ5OS45NzUwOTUsNDM0Ljg3MjYxNSA1MDAuNTk0MjMxLDQzNi40NjM4MzUgNTAwLjU5NDIzMSw0MzguMTk3MDA3IEM1MDAuNTk0MjMxLDQ0MC4wNDE3OTQgNDk5Ljg5Mjc4NCw0NDEuNzI1NzU2IDQ5OC43Mzc0MjUsNDQzLjAwNTkwNSBMNDk5LjY5NDgyLDQ0My43MjMxNDkgTDQ5OS42OTQ4Miw0NDMuNzIzMTQ5IFogTTQ4NSw0MzUuMjExMjI1IEw0ODUsNDQxLjg3MzcxNSBMNDg5LjcyNSw0NDIuNDk3NDk0IEw0ODkuNzI1LDQzNC41MDI1MDYgTDQ4NSw0MzUuMjExMjI1IEw0ODUsNDM1LjIxMTIyNSBaIE00ODkuNzI1LDQ0Mi41Mzk5NjQgTDQ5Ni40NzUsNDQ3LjIwMzcwOCBMNDk2LjQ3NSw0MjkuODgxMjMyIEw0ODkuNzI1LDQzNC41NDQ5NzYgTDQ4OS43MjUsNDQyLjUzOTk2NCBaIiBpZD0iaGlnaC12b2x1bWUiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: 31px 27px;
    text-align     : center;
}


.player .soundControl.disable {
    opacity: 0.4;
}

/* Player Controls (Shuffle, Repeat, Equalizer) */
.playerControls {
    position      : absolute;
    bottom        : 20px;
    left          : 50%;
    transform     : translateX(-50%);
    display       : flex;
    gap           : 12px;
    z-index       : 200;
    pointer-events: none;
}

.controlBtn {
    appearance        : none;
    -webkit-appearance: none;
    border            : 2px solid var(--accent);
    background        : rgba(var(--accent-rgb), 0.1);
    color             : var(--accent);
    width             : 40px;
    height            : 40px;
    border-radius     : 50%;
    display           : inline-flex;
    align-items       : center;
    justify-content   : center;
    cursor            : pointer;
    pointer-events    : auto;
    transition        : all 0.2s ease;
    padding           : 0;
    position          : relative;
    /* For tooltip positioning */
}

.controlBtn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    transform : scale(1.05);
}

.controlBtn:active {
    transform: scale(0.95);
}

.controlBtn.active,
.controlBtn.isActive {
    background  : rgba(var(--accent-rgb), 0.15);
    border-color: var(--accent);
}

.controlBtn .bi {
    width : 18px;
    height: 18px;
    fill  : currentColor;
}

/* Speed Panel */
.speedPanel {
    position       : fixed;
    bottom         : 80px;
    left           : 50%;
    transform      : translateX(-50%);
    background     : var(--switcher-bg);
    border         : 1px solid var(--switcher-border);
    border-radius  : 12px;
    padding        : 12px 16px;
    min-width      : 280px;
    max-width      : 90vw;
    z-index        : 10000;
    box-shadow     : 0 12px 36px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    pointer-events : auto;
}

.speedPanelHeader {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 12px;
    color          : var(--accent);
    font-weight    : 600;
    font-size      : 14px;
}

.speedPanelClose {
    appearance        : none;
    -webkit-appearance: none;
    border            : none;
    background        : transparent;
    color             : var(--accent);
    font-size         : 20px;
    line-height       : 1;
    cursor            : pointer;
    padding           : 0;
    width             : 24px;
    height            : 24px;
    display           : flex;
    align-items       : center;
    justify-content   : center;
    border-radius     : 50%;
    transition        : background 0.2s ease;
}

.speedPanelClose:hover {
    background: rgba(var(--accent-rgb), 0.1);
}

.speedOptions {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 6px;
    justify-content: center;
}

.speedOption {
    appearance        : none;
    -webkit-appearance: none;
    border            : 1.5px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    padding           : 6px 12px;
    border-radius     : 8px;
    font-size         : 12px;
    font-weight       : 600;
    cursor            : pointer;
    transition        : all 0.2s ease;
    display           : inline-flex;
    align-items       : center;
    gap               : 6px;
    min-width         : auto;
}

.speedIcon {
    width      : 12px;
    height     : 12px;
    flex-shrink: 0;
    opacity    : 0.8;
}

.speedOption:hover {
    background  : rgba(var(--accent-rgb), 0.1);
    border-color: var(--accent);
    transform   : translateY(-1px);
}

.speedOption.active {
    background  : var(--accent);
    color       : var(--neutral);
    border-color: var(--accent);
}

.speedOption.active .speedIcon {
    opacity: 1;
}

.speedOption:active {
    transform: translateY(0);
}

@media (max-width: 768px) {

    /* Speed Panel - Full width for mobile */
    .speedPanel {
        min-width    : auto !important;
        width        : 100% !important;
        left         : 0 !important;
        right        : 0 !important;
        transform    : none !important;
        padding      : 28px 20px;
        margin       : 0 !important;
        font-size    : 18px;
        border       : 1px solid var(--switcher-border) !important;
        border-radius: 24px !important;
        max-width    : 100% !important;
        box-sizing   : border-box;
        box-shadow   : 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    }

    /* Speed Panel Header - Bigger text */
    .speedPanelHeader {
        font-size     : 20px;
        font-weight   : 700;
        margin-bottom : 20px;
        padding-bottom: 12px;
        border-bottom : 1px solid rgba(var(--accent-rgb), 0.2);
    }

    .speedPanelClose {
        font-size: 32px;
        width    : 40px;
        height   : 40px;
    }

    .speedOptions {
        gap            : 12px;
        justify-content: center;
        flex-wrap      : wrap;
        padding        : 8px 0;
    }

    .speedOption {
        padding     : 14px 22px;
        font-size   : 18px;
        font-weight : 600;
        min-height  : 52px;
        flex        : 0 0 auto;
        border-width: 2px;
    }

    .speedIcon {
        width : 14px;
        height: 14px;
    }

    /* Recording Panel - Wider width, larger height */
    .recordingPanel {
        width        : auto !important;
        min-width    : 400px !important;
        max-width    : 95vw !important;
        left         : 50% !important;
        right        : auto !important;
        transform    : translateX(-50%) !important;
        padding      : 28px 20px;
        margin       : 0 !important;
        font-size    : 16px;
        border       : 1px solid var(--switcher-border) !important;
        border-radius: 24px !important;
        box-sizing   : border-box;
        box-shadow   : 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    }

    /* Recording Panel Header - Bigger text */
    .recordingPanelHeader {
        font-size     : 19px;
        font-weight   : 700;
        margin-bottom : 20px;
        padding-bottom: 14px;
        border-bottom : 1px solid rgba(var(--accent-rgb), 0.2);
    }

    .recordingIndicator {
        gap: 12px;
    }

    .recordingDot {
        width : 13px;
        height: 13px;
    }

    .recordingTime {
        font-size     : 20px;
        font-weight   : 700;
        letter-spacing: 1.2px;
    }

    .recordingPanelBody {
        gap       : 14px;
        margin-top: 18px;
    }

    .recordingStartControls,
    .recordingActiveControls {
        gap      : 14px;
        flex-wrap: wrap;
    }

    .recordingStartBtn,
    .recordingStopBtn,
    .recordingPauseBtn,
    .recordingFinishBtn,
    .recordingCancelBtn {
        padding      : 18px 32px;
        font-size    : 20px !important;
        font-weight  : 700;
        min-height   : 60px;
        border-width : 2.5px;
        border-radius: 12px;
    }

    .recordingStartBtn .bi,
    .recordingStopBtn .bi,
    .recordingPauseBtn .bi,
    .recordingFinishBtn .bi,
    .recordingCancelBtn .bi {
        width       : 28px;
        height      : 28px;
        margin-right: 12px;
    }

    /* recording save modal */
    .recordingSaveContent {
        max-width: 100% !important;
        min-width: 100% !important;

    }

    .recordingSaveHeader h3 {
        font-size: 20px;
    }

    .recordingSaveClose {
        font-size: 24px;
    }

    .recordingSaveBody {
        padding      : 20px !important;
        padding-right: 45px !important;
    }

    .recordingSaveField label {
        font-size: 20px !important;
    }

    .recordingSaveField input {
        font-size: 22px !important;
    }

    .recordingSaveCancel,
    .recordingSaveBtn {
        font-size: 20px !important;
    }

    /* Share/Confirm Modals - Bigger for mobile */
    .shareModal,
    .confirmModal {
        width    : min(95vw, 600px);
        font-size: 16px;
    }

    .shareModalHeader,
    .confirmModalHeader {
        padding: 24px;
    }

    .shareModalTitle,
    .confirmModalTitle {
        font-size: 20px;
    }

    .shareModalClose,
    .confirmModalClose {
        width     : 44px;
        height    : 44px;
        min-width : 44px;
        min-height: 44px;
        font-size : 20px;
        padding   : 10px;
    }

    .shareModalClose .bi,
    .confirmModalClose .bi {
        width : 20px;
        height: 20px;
    }

    .shareModalBody,
    .confirmModalBody {
        padding  : 24px;
        font-size: 16px;
    }

    .shareModalFooter,
    .confirmModalFooter {
        padding: 20px 24px;
    }

    .shareModalFooter .playlistAddBtn,
    .confirmModalFooter .playlistAddBtn {
        padding   : 12px 20px;
        font-size : 15px;
        min-height: 44px;
        width     : 100%;
    }

    .shareInputGroup input,
    .shareInputGroup button {
        padding   : 14px 18px;
        font-size : 16px;
        min-height: 48px;
    }

    /* Recording Save Modal - Enhanced for mobile */
    .recordingSaveModal {
        padding        : 16px;
        background     : rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(8px);
    }

    .recordingSaveContent {
        min-width    : 100%;
        max-width    : 100%;
        width        : 100%;
        border-radius: 20px;
        box-shadow   : 0 8px 32px rgba(0, 0, 0, 0.4);
        border       : 2px solid var(--switcher-border);
    }

    .recordingSaveHeader {
        padding      : 24px 24px 20px;
        border-bottom: 2px solid rgba(var(--accent-rgb), 0.3);
    }

    .recordingSaveHeader h3 {
        font-size     : 22px;
        font-weight   : 700;
        letter-spacing: 0.5px;
    }

    .recordingSaveClose {
        width     : 48px;
        height    : 48px;
        font-size : 28px;
        min-width : 48px;
        min-height: 48px;
    }

    .recordingSaveClose .bi {
        width : 26px;
        height: 26px;
    }

    .recordingSaveBody {
        padding  : 24px;
        font-size: 18px;
    }

    .recordingSaveField {
        margin-bottom: 20px;
    }

    .recordingSaveField:last-child {
        margin-bottom: 0;
    }

    .recordingSaveField label {
        font-size     : 18px;
        font-weight   : 700;
        margin-bottom : 12px;
        letter-spacing: 0.3px;
        display       : block;
    }

    .recordingSaveField input {
        padding      : 16px 18px;
        font-size    : 18px;
        border-width : 2px;
        border-radius: 12px;
        min-height   : 56px;
    }

    .recordingSaveField input:focus {
        border-width: 2px;
        box-shadow  : 0 0 0 3px rgba(var(--accent-rgb), 0.2);
    }

    .recordingSaveFooter {
        padding   : 20px 24px 24px;
        gap       : 16px;
        border-top: 2px solid rgba(var(--accent-rgb), 0.3);
        flex-wrap : wrap;
    }

    .recordingSaveCancel,
    .recordingSaveBtn {
        padding       : 18px 32px;
        font-size     : 20px;
        font-weight   : 700;
        border-width  : 2.5px;
        border-radius : 12px;
        min-height    : 60px;
        flex          : 1;
        min-width     : 120px;
        letter-spacing: 0.5px;
    }
}

.controlBtn:focus-visible {
    outline       : 2px solid var(--accent);
    outline-offset: 2px;
}

/* Tooltip support for control buttons (hover only, top position) */
.controlBtn[data-tooltip]:hover::after {
    content       : attr(data-tooltip);
    position      : absolute;
    bottom        : calc(100% + 8px);
    left          : 50%;
    transform     : translateX(-50%);
    background    : rgba(0, 0, 0, 0.85);
    color         : white;
    padding       : 6px 10px;
    border-radius : 6px;
    font-size     : 12px;
    white-space   : nowrap;
    pointer-events: none;
    z-index       : 10003;
    opacity       : 0;
    animation     : tooltipFadeInUp 0.2s ease forwards;
}

.controlBtn[data-tooltip]:hover::before {
    content         : '';
    position        : absolute;
    bottom          : calc(100% + 2px);
    left            : 50%;
    transform       : translateX(-50%);
    border          : 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.85);
    pointer-events  : none;
    z-index         : 10004;
    opacity         : 0;
    animation       : tooltipFadeInUp 0.2s ease forwards;
}

@keyframes tooltipFadeInUp {
    from {
        opacity  : 0;
        transform: translateX(-50%) translateY(4px);
    }

    to {
        opacity  : 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Equalizer Panel */
.equalizerPanel {
    position       : fixed;
    bottom         : 80px;
    left           : 50%;
    transform      : translateX(-50%);
    background     : var(--switcher-bg);
    border         : 1px solid var(--switcher-border);
    border-radius  : 16px;
    padding        : 20px;
    min-width      : 700px;
    max-width      : 90vw;
    max-height     : 70vh;
    overflow-y     : auto;
    z-index        : 10000;
    box-shadow     : 0 12px 36px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    pointer-events : auto;
}

.equalizerHeader {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 20px;
    color          : var(--accent);
    font-weight    : 600;
    font-size      : 18px;
}

.equalizerClose {
    appearance        : none;
    -webkit-appearance: none;
    border            : none;
    background        : transparent;
    color             : var(--accent);
    font-size         : 28px;
    line-height       : 1;
    cursor            : pointer;
    padding           : 0;
    width             : 32px;
    height            : 32px;
    display           : flex;
    align-items       : center;
    justify-content   : center;
    border-radius     : 50%;
    transition        : background 0.2s ease;
}

.equalizerClose:hover {
    background: rgba(var(--accent-rgb), 0.1);
}

.equalizerBands {
    display        : flex;
    gap            : 12px;
    justify-content: center;
    align-items    : flex-end;
    margin-bottom  : 20px;
    flex-wrap      : nowrap;
    overflow-x     : auto;
    padding-bottom : 8px;
}

.equalizerBand {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 8px;
    min-width     : 45px;
    flex-shrink   : 0;
}

.equalizerBand label {
    font-size  : 12px;
    color      : var(--accent);
    font-weight: 500;
    text-align : center;
}

.equalizerBand .eqSlider {
    writing-mode: vertical-lr;
    direction   : rtl;
    /* IE fallback */
    writing-mode: bt-lr;
    width       : 8px;
    height      : 150px;
    cursor      : pointer;
    background  : transparent;
    outline     : none;
}

.equalizerBand .eqSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance        : none;
    width             : 16px;
    height            : 16px;
    background        : var(--accent);
    border-radius     : 50%;
    cursor            : pointer;
    border            : 2px solid var(--neutral);
}

.equalizerBand .eqSlider::-moz-range-thumb {
    width        : 16px;
    height       : 16px;
    background   : var(--accent);
    border-radius: 50%;
    cursor       : pointer;
    border       : 2px solid var(--neutral);
}

.equalizerBand .eqValue {
    font-size  : 11px;
    color      : var(--accent);
    font-weight: 500;
    min-height : 16px;
    text-align : center;
}

.equalizerPresets {
    display        : flex;
    gap            : 10px;
    justify-content: center;
    flex-wrap      : wrap;
    padding-top    : 16px;
    border-top     : 1px solid rgba(var(--accent-rgb), 0.2);
}

.eqPreset {
    appearance        : none;
    -webkit-appearance: none;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    padding           : 8px 16px;
    border-radius     : 8px;
    cursor            : pointer;
    font-size         : 13px;
    font-weight       : 500;
    transition        : all 0.2s ease;
    font-family       : inherit;
}

.eqPreset:hover {
    background  : rgba(var(--accent-rgb), 0.1);
    border-color: var(--accent);
}

.eqPreset:active {
    transform: scale(0.95);
}

/* Dark theme adjustments */
html[data-theme="dark"] .equalizerPanel {
    background: rgba(15, 17, 21, 0.95);
}

html[data-theme="dark"] .controlBtn {
    background: rgba(var(--accent-rgb), 0.15);
}

html[data-theme="dark"] .controlBtn:hover {
    background: rgba(var(--accent-rgb), 0.25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .equalizerPanel {
        min-width    : auto !important;
        width        : 100% !important;
        left         : 0 !important;
        right        : 0 !important;
        transform    : none !important;
        padding      : 20px 16px;
        margin       : 0 !important;
        border-radius: 20px 20px 0 0;
        max-width    : 100% !important;
        box-sizing   : border-box;
    }

    .equalizerBands {
        gap            : 12px;
        flex-wrap      : wrap;
        justify-content: center;
        padding        : 0;
    }

    .equalizerBand {
        min-width: 40px;
        flex     : 0 0 auto;
    }

    .equalizerBand .eqSlider {
        height: 120px;
    }

    /* Control Buttons Under Player - Bigger for mobile touch */
    .playerControls {
        bottom: 20px;
        gap   : 12px;
    }

    .controlBtn {
        width       : 52px;
        height      : 52px;
        border-width: 3px;
    }

    .controlBtn .bi {
        width : 24px;
        height: 24px;
    }

    /* Equalizer Panel - Full width for mobile */
    .equalizerPanel {
        width        : 100% !important;
        left         : 0 !important;
        right        : 0 !important;
        transform    : none !important;
        padding      : 28px 20px;
        margin       : 0 !important;
        font-size    : 18px;
        border       : 1px solid var(--switcher-border) !important;
        border-radius: 24px !important;
        max-width    : 100% !important;
        box-sizing   : border-box;
        box-shadow   : 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    }

    /* Equalizer Panel Header - Bigger text */
    .equalizerHeader {
        font-size     : 20px;
        font-weight   : 700;
        margin-bottom : 24px;
        padding-bottom: 12px;
        border-bottom : 1px solid rgba(var(--accent-rgb), 0.2);
    }

    .equalizerClose {
        font-size: 32px;
        width    : 40px;
        height   : 40px;
    }

    /* Equalizer Band Labels - More visible */
    .equalizerBand label {
        font-size    : 16px;
        font-weight  : 700;
        margin-bottom: 8px;
        display      : block;
    }

    .equalizerBand .eqValue {
        font-size  : 15px;
        font-weight: 700;
        min-height : 20px;
    }

    .equalizerBands {
        gap            : 12px;
        justify-content: center;
        padding        : 8px 0;
        margin-bottom  : 20px;
        flex-wrap      : nowrap;
        overflow-x     : auto;
    }

    .equalizerBand {
        min-width: 50px;
        flex     : 0 0 auto;
    }

    .equalizerBand .eqSlider {
        height: 160px;
        width : 55px;
    }

    .equalizerPresets {
        padding-top: 20px;
        border-top : 1px solid rgba(var(--accent-rgb), 0.2);
        gap        : 12px;
    }

    .equalizerPresets .eqPreset {
        padding     : 14px 22px;
        font-size   : 17px;
        font-weight : 600;
        min-height  : 52px;
        border-width: 2px;
    }
}

/* Extra enhancements for very small screens (phones) - Control buttons and modals only */
@media (max-width: 480px) {

    /* Even bigger control buttons */
    .playerControls {
        bottom: 25px;
        gap   : 14px;
    }

    .controlBtn {
        width : 56px;
        height: 56px;
    }

    .controlBtn .bi {
        width : 26px;
        height: 26px;
    }

    /* Bigger modals on phones */
    .shareModal,
    .confirmModal {
        width    : 98vw;
        font-size: 17px;
    }

    .shareModalHeader,
    .confirmModalHeader {
        padding: 28px;
    }

    .shareModalTitle,
    .confirmModalTitle {
        font-size: 22px;
    }

    .shareModalClose,
    .confirmModalClose {
        width     : 44px;
        height    : 44px;
        min-width : 44px;
        min-height: 44px;
        font-size : 20px;
        padding   : 10px;
    }

    .shareModalClose .bi,
    .confirmModalClose .bi {
        width : 20px;
        height: 20px;
    }

    .shareModalBody,
    .confirmModalBody {
        padding  : 28px;
        font-size: 17px;
    }

    .shareModalFooter .playlistAddBtn,
    .confirmModalFooter .playlistAddBtn {
        padding   : 12px 20px;
        font-size : 15px;
        min-height: 44px;
        width     : 100%;
    }

    .shareInputGroup input,
    .shareInputGroup button {
        padding   : 16px 20px;
        font-size : 17px;
        min-height: 52px;
    }

    /* Bigger equalizer panel - Full width */
    .equalizerPanel {
        width        : 100% !important;
        left         : 0 !important;
        right        : 0 !important;
        transform    : none !important;
        padding      : 32px 20px;
        margin       : 0 !important;
        font-size    : 19px;
        border       : 1px solid var(--switcher-border) !important;
        border-radius: 24px !important;
        max-width    : 100% !important;
        box-sizing   : border-box;
        box-shadow   : 0 -4px 24px rgba(0, 0, 0, 0.2) !important;
    }

    .equalizerHeader {
        font-size    : 22px;
        font-weight  : 700;
        margin-bottom: 28px;
    }

    .equalizerBand label {
        font-size  : 17px;
        font-weight: 700;
    }

    .equalizerBand .eqValue {
        font-size  : 16px;
        font-weight: 700;
    }

    .equalizerBands {
        gap       : 12px;
        flex-wrap : nowrap;
        overflow-x: auto;
    }

    .equalizerBand {
        min-width: 50px;
    }

    .equalizerBand .eqSlider {
        height: 180px;
    }

    .equalizerPresets .eqPreset {
        font-size  : 18px;
        font-weight: 600;
        padding    : 16px 24px;
        min-height : 56px;
    }

    .equalizerBand {
        min-width: 55px;
    }

    .equalizerBand .eqSlider {
        height: 150px;
        width : 55px;
    }

    .equalizerPresetBtn {
        padding   : 14px 20px;
        font-size : 16px;
        min-height: 52px;
    }

    /* Bigger speed panel - Full width */
    .speedPanel {
        width        : 100% !important;
        left         : 0 !important;
        right        : 0 !important;
        transform    : none !important;
        padding      : 32px 20px;
        margin       : 0 !important;
        font-size    : 19px;
        border       : 1px solid var(--switcher-border) !important;
        border-radius: 24px !important;
        max-width    : 100% !important;
        box-sizing   : border-box;
        box-shadow   : 0 -4px 24px rgba(0, 0, 0, 0.2) !important;
    }

    .speedPanelHeader {
        font-size    : 22px;
        margin-bottom: 24px;
    }

    .speedOption {
        font-size : 19px;
        padding   : 16px 24px;
        min-height: 56px;
    }

    /* Bigger recording panel - Wider width, larger height */
    .recordingPanel {
        width        : auto !important;
        min-width    : 420px !important;
        max-width    : 95vw !important;
        left         : 50% !important;
        right        : auto !important;
        transform    : translateX(-50%) !important;
        padding      : 32px 24px;
        margin       : 0 !important;
        font-size    : 17px;
        border       : 1px solid var(--switcher-border) !important;
        border-radius: 24px !important;
        box-sizing   : border-box;
        box-shadow   : 0 -4px 24px rgba(0, 0, 0, 0.2) !important;
    }

    .recordingPanelHeader {
        font-size     : 21px;
        margin-bottom : 24px;
        padding-bottom: 16px;
    }

    .recordingTime {
        font-size     : 22px;
        letter-spacing: 1.5px;
    }

    .recordingDot {
        width : 14px;
        height: 14px;
    }

    .recordingStartBtn,
    .recordingStopBtn,
    .recordingPauseBtn,
    .recordingFinishBtn,
    .recordingCancelBtn {
        font-size : 26px;
        padding   : 18px 32px;
        min-height: 62px;
    }

    .recordingStartBtn .bi,
    .recordingStopBtn .bi,
    .recordingPauseBtn .bi,
    .recordingFinishBtn .bi,
    .recordingCancelBtn .bi {
        width       : 28px;
        height      : 28px;
        margin-right: 12px;
    }

    .recordingStartBtn,
    .recordingStopBtn,
    .recordingCancelBtn {
        padding   : 16px 28px;
        font-size : 17px;
        min-height: 52px;
    }
}

.player .time {
    position: relative;
}

.player .time.isLive {
    color         : #ff4444;
    font-weight   : 700;
    animation     : livePulse 2s ease-in-out infinite;
    letter-spacing: 1px;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.player canvas.isLiveStream {
    cursor        : default !important;
    pointer-events: none;
}

.player .time {
    text-align : center;
    font-family: inherit;
    color      : var(--accent);
    position   : absolute;
    left       : 50%;
    margin-left: -22px;
    font-size  : 20px;
    bottom     : 190px;
    transition : color 0.3s ease;
}

.player .time.isLive {
    color         : #ff4444;
    font-weight   : 700;
    animation     : livePulse 2s ease-in-out infinite;
    letter-spacing: 1px;
    margin-left   : -18px;
    /* Adjust for "LIVE" text */
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.player canvas.isLiveStream {
    cursor: default !important;
}

/* Recording Controls */
.recordBtn.isRecording {
    background  : rgba(255, 68, 68, 0.2);
    border-color: #ff4444;
    animation   : recordingPulse 1.5s ease-in-out infinite;
}

@keyframes recordingPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(255, 68, 68, 0);
    }
}

.recordBtn .mic-fill-icon {
    fill: #ff4444;
}

/* Recording Panel */
.recordingPanel {
    position       : fixed;
    bottom         : 80px;
    left           : 50%;
    transform      : translateX(-50%);
    background     : var(--switcher-bg);
    border         : 1px solid var(--switcher-border);
    border-radius  : 12px;
    padding        : 16px 20px;
    min-width      : 280px;
    max-width      : 90vw;
    z-index        : 10000;
    box-shadow     : 0 12px 36px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    pointer-events : auto;
}

.recordingPanel[style*="display: none"],
.recordingPanel[style*="display:none"] {
    display       : none !important;
    visibility    : hidden !important;
    opacity       : 0 !important;
    pointer-events: none !important;
}

.recordingPanelHeader {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 12px;
    color          : var(--accent);
    font-weight    : 600;
    font-size      : 14px;
}

.recordingIndicator {
    display    : flex;
    align-items: center;
    gap        : 8px;
}

.recordingDot {
    width        : 10px;
    height       : 10px;
    border-radius: 50%;
    background   : #ff4444;
    animation    : recordingDotPulse 1s ease-in-out infinite;
}

@keyframes recordingDotPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.recordingTime {
    font-family: 'Rajdhani', monospace;
    font-weight: 600;
    color      : var(--text-primary);
    font-size  : 14px;
}

.recordingPanelBody {
    display        : flex;
    justify-content: center;
    gap            : 8px;
    flex-wrap      : wrap;
}

.recordingStartControls,
.recordingActiveControls {
    display        : flex;
    justify-content: center;
    gap            : 8px;
    flex-wrap      : wrap;
    width          : 100%;
}

.recordingStartBtn {
    appearance        : none;
    -webkit-appearance: none;
    border            : 2px solid #4CAF50;
    background        : rgba(76, 175, 80, 0.1);
    color             : #4CAF50;
    padding           : 10px 20px;
    border-radius     : 8px;
    font-size         : 14px;
    font-weight       : 600;
    cursor            : pointer;
    transition        : all 0.2s ease;
    display           : inline-flex;
    align-items       : center;
    gap               : 6px;
    font-family       : inherit;
}

.recordingStartBtn:hover {
    background: rgba(76, 175, 80, 0.2);
    transform : scale(1.05);
}

.recordingStartBtn:active {
    transform: scale(0.95);
}

.recordingStartBtn .bi {
    width : 16px;
    height: 16px;
    fill  : currentColor;
}

.recordingPauseBtn,
.recordingFinishBtn,
.recordingCancelBtn {
    appearance        : none;
    -webkit-appearance: none;
    border            : 2px solid var(--accent);
    background        : rgba(var(--accent-rgb), 0.1);
    color             : var(--accent);
    padding           : 10px 16px;
    border-radius     : 8px;
    font-size         : 14px;
    font-weight       : 600;
    cursor            : pointer;
    transition        : all 0.2s ease;
    display           : inline-flex;
    align-items       : center;
    gap               : 6px;
    font-family       : inherit;
}

.recordingPauseBtn:hover,
.recordingFinishBtn:hover,
.recordingCancelBtn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    transform : scale(1.05);
}

.recordingPauseBtn:active,
.recordingFinishBtn:active,
.recordingCancelBtn:active {
    transform: scale(0.95);
}

.recordingPauseBtn .bi,
.recordingFinishBtn .bi,
.recordingCancelBtn .bi {
    width : 16px;
    height: 16px;
    fill  : currentColor;
}

.recordingFinishBtn {
    border-color: #4CAF50;
    background  : rgba(76, 175, 80, 0.1);
    color       : #4CAF50;
}

.recordingFinishBtn:hover {
    background: rgba(76, 175, 80, 0.2);
}

.recordingCancelBtn {
    border-color: #ff4444;
    background  : rgba(255, 68, 68, 0.1);
    color       : #ff4444;
}

.recordingCancelBtn:hover {
    background: rgba(255, 68, 68, 0.2);
}

/* Recording Save Modal */
.recordingSaveModal {
    position       : fixed;
    top            : 0;
    left           : 0;
    right          : 0;
    bottom         : 0;
    background     : rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index        : 20000;
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 20px;
}

.recordingSaveContent {
    background    : var(--switcher-bg);
    border        : 1px solid var(--switcher-border);
    border-radius : 12px;
    min-width     : 320px;
    max-width     : 90vw;
    max-height    : 90vh;
    overflow      : hidden;
    display       : flex;
    flex-direction: column;
    box-shadow    : 0 12px 36px rgba(0, 0, 0, 0.3);
    min-height    : 0;
}

.recordingSaveHeader {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 16px 20px;
    border-bottom  : 1px solid var(--switcher-border);
    flex-shrink    : 0;
}

.recordingSaveHeader h3 {
    margin     : 0;
    color      : var(--accent);
    font-size  : 18px;
    font-weight: 600;
}

.recordingSaveClose {
    appearance        : none;
    -webkit-appearance: none;
    border            : none;
    background        : transparent;
    color             : var(--accent);
    font-size         : 24px;
    line-height       : 1;
    cursor            : pointer;
    padding           : 0;
    width             : 32px;
    height            : 32px;
    display           : flex;
    align-items       : center;
    justify-content   : center;
    border-radius     : 50%;
    transition        : background 0.2s ease;
}

.recordingSaveClose:hover {
    background: rgba(var(--accent-rgb), 0.1);
}

.recordingSaveClose .bi {
    width : 20px;
    height: 20px;
    fill  : currentColor;
}

.recordingSaveBody {
    padding   : 20px;
    overflow-y: auto;
    overflow-x: hidden;
    flex      : 1;
    min-height: 0;
}

.recordingSaveField {
    margin-bottom: 16px;
}

.recordingSaveField:last-child {
    margin-bottom: 0;
}

.recordingSaveField label {
    display      : block;
    margin-bottom: 8px;
    color        : var(--accent);
    font-size    : 14px;
    font-weight  : 600;
}

.recordingSaveField input {
    width        : 100%;
    padding      : 10px 12px;
    border       : 1px solid var(--switcher-btn-border);
    background   : var(--switcher-btn-bg);
    border-radius: 8px;
    color        : var(--accent);
    font-size    : 14px;
    font-family  : inherit;
    transition   : border-color 0.2s ease;
}

.recordingSaveField input:focus {
    border-color: var(--accent);
    outline     : none;
}

.recordingSaveFooter {
    display        : flex;
    justify-content: flex-end;
    gap            : 12px;
    padding        : 16px 20px;
    border-top     : 1px solid var(--switcher-border);
    flex-shrink    : 0;
}

.recordingSaveCancel,
.recordingSaveBtn {
    appearance        : none;
    -webkit-appearance: none;
    border            : 1px solid var(--switcher-btn-border);
    background        : var(--switcher-btn-bg);
    color             : var(--accent);
    padding           : 10px 20px;
    border-radius     : 8px;
    font-size         : 14px;
    font-weight       : 600;
    cursor            : pointer;
    transition        : all 0.2s ease;
    font-family       : inherit;
}

.recordingSaveCancel:hover {
    background  : rgba(var(--accent-rgb), 0.1);
    border-color: var(--accent);
}

.recordingSaveBtn {
    background  : var(--accent);
    color       : #fff;
    border-color: var(--accent);
}

.recordingSaveBtn:hover {
    background: rgba(var(--accent-rgb), 0.9);
    transform : scale(1.05);
}

.recordingSaveBtn:active,
.recordingSaveCancel:active {
    transform: scale(0.95);
}

/* Picture-in-Picture Window */
.pipWindow {
    position       : fixed;
    width          : 320px;
    min-width      : 280px;
    max-width      : 90vw;
    background     : var(--switcher-bg);
    border         : 1px solid var(--switcher-border);
    border-radius  : 12px;
    box-shadow     : 0 12px 36px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    z-index        : 10001;
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
    user-select    : none;
    cursor         : default;
}

.pipHeader {
    display      : flex;
    align-items  : center;
    padding      : 10px 12px;
    border-bottom: 1px solid var(--switcher-border);
    background   : rgba(var(--accent-rgb), 0.05);
    cursor       : move;
    gap          : 8px;
}

.pipDragHandle {
    display    : flex;
    align-items: center;
    cursor     : grab;
    opacity    : 0.6;
    transition : opacity 0.2s;
}

.pipDragHandle:active {
    cursor : grabbing;
    opacity: 1;
}

.pipTitle {
    flex          : 1;
    min-width     : 0;
    display       : flex;
    flex-direction: column;
    gap           : 2px;
}

.pipArtist {
    font-size    : 11px;
    opacity      : 0.7;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.pipSong {
    font-size    : 12px;
    font-weight  : 500;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.pipCloseBtn {
    appearance        : none;
    -webkit-appearance: none;
    border            : none;
    background        : transparent;
    color             : var(--accent);
    width             : 24px;
    height            : 24px;
    border-radius     : 4px;
    display           : flex;
    align-items       : center;
    justify-content   : center;
    cursor            : pointer;
    padding           : 0;
    transition        : all 0.2s;
    flex-shrink       : 0;
}

.pipCloseBtn:hover {
    background: rgba(var(--accent-rgb), 0.1);
}

.pipCloseBtn:active {
    transform: scale(0.9);
}

.pipCloseBtn .bi {
    width : 14px;
    height: 14px;
    fill  : currentColor;
}

.pipControls {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 16px;
    padding        : 16px;
}

.pipPrevBtn,
.pipPlayBtn,
.pipNextBtn {
    appearance        : none;
    -webkit-appearance: none;
    border            : 2px solid var(--accent);
    background        : rgba(var(--accent-rgb), 0.1);
    color             : var(--accent);
    width             : 40px;
    height            : 40px;
    border-radius     : 50%;
    display           : flex;
    align-items       : center;
    justify-content   : center;
    cursor            : pointer;
    padding           : 0;
    transition        : all 0.2s;
}

.pipPlayBtn {
    width : 48px;
    height: 48px;
}

.pipPrevBtn:hover,
.pipPlayBtn:hover,
.pipNextBtn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    transform : scale(1.05);
}

.pipPrevBtn:active,
.pipPlayBtn:active,
.pipNextBtn:active {
    transform: scale(0.95);
}

.pipPrevBtn .bi,
.pipNextBtn .bi {
    width    : 16px;
    height   : 16px;
    fill     : currentColor;
    transform: rotate(-90deg);
}

.pipNextBtn .bi {
    transform: rotate(90deg);
}

.pipPlayBtn .bi {
    width : 20px;
    height: 20px;
    fill  : currentColor;
}

.pipTime {
    text-align : center;
    font-size  : 11px;
    opacity    : 0.7;
    padding    : 8px 16px 12px;
    font-weight: 500;
}

/* Responsive scaling for smaller elements */
/* =============================================
   PALETY KOLORÓW — Kolorix.dance Edition
   ============================================= */

/* ---- Paleta: Kolorix (Disco Magenta) ---- */
html[data-palette="kolorix"] {
    --accent    : #ff00c8;
    --accent-rgb: 255, 0, 200;
    --neutral   : #fff0ff;
}
html[data-palette="kolorix"][data-theme="dark"] {
    --accent    : #ff00c8;
    --accent-rgb: 255, 0, 200;
    --neutral   : #1a0020;
    --page-bg-color: #0a0010;
}
html[data-palette="kolorix"][data-theme="light"] {
    --page-bg-color: #fff0ff;
}

/* ---- Paleta: Nocny Klub (Neon Violet) ---- */
html[data-palette="nightclub"] {
    --accent    : #9b00ff;
    --accent-rgb: 155, 0, 255;
    --neutral   : #10102a;
    --page-bg-color: #05050f;
}
html[data-palette="nightclub"][data-theme="dark"],
html[data-palette="nightclub"]:not([data-theme="light"]) {
    --accent    : #b84dff;
    --accent-rgb: 184, 77, 255;
    --neutral   : #10102a;
    --page-bg-color: #05050f;
}
html[data-palette="nightclub"][data-theme="light"] {
    --accent    : #7a00cc;
    --accent-rgb: 122, 0, 204;
    --neutral   : #f5f0ff;
    --page-bg-color: #f0e8ff;
}

/* ---- Paleta: Letni Wietrzyk (Sea Green) ---- */
html[data-palette="summer"] {
    --accent    : #00b386;
    --accent-rgb: 0, 179, 134;
    --neutral   : #e8fff6;
}
html[data-palette="summer"][data-theme="dark"] {
    --accent    : #00d4a0;
    --accent-rgb: 0, 212, 160;
    --neutral   : #0a1f18;
    --page-bg-color: #040f0b;
}
html[data-palette="summer"][data-theme="light"] {
    --page-bg-color: #e8fff6;
}

/* ---- Przyciski palet (themeSwitcher) ---- */
.paletteButtons {
    display    : flex;
    gap        : 4px;
    align-items: center;
    padding    : 0 4px;
    border-left: 1px solid rgba(var(--accent-rgb), 0.2);
    margin-left: 4px;
}
.paletteBtn {
    width         : 28px;
    height        : 28px;
    border        : 2px solid transparent;
    border-radius : 50%;
    cursor        : pointer;
    display       : flex;
    align-items   : center;
    justify-content: center;
    padding       : 0;
    background    : transparent;
    transition    : border-color 0.2s, transform 0.15s;
}
.paletteBtn[aria-pressed="true"],
.paletteBtn.isActive {
    border-color: var(--accent);
    transform   : scale(1.15);
}
.paletteBtn:hover {
    transform: scale(1.1);
}
.paletteColor {
    display      : block;
    width        : 16px;
    height       : 16px;
    border-radius: 50%;
    pointer-events: none;
}

/* ---- Przyciski palet w panelu ustawień ---- */
.paletteBtns {
    display  : flex;
    flex-wrap: wrap;
    gap      : 8px;
    margin-top: 8px;
}
.paletteSettingBtn {
    display       : flex;
    align-items   : center;
    gap           : 6px;
    padding       : 6px 12px;
    border        : 2px solid transparent;
    border-radius : 20px;
    cursor        : pointer;
    background    : rgba(var(--accent-rgb), 0.08);
    color         : inherit;
    font-size     : 13px;
    transition    : border-color 0.2s, background 0.2s;
}
.paletteSettingBtn.isActive,
.paletteSettingBtn[aria-pressed="true"] {
    border-color: var(--accent);
    background  : rgba(var(--accent-rgb), 0.18);
}
.paletteSettingBtn:hover {
    background: rgba(var(--accent-rgb), 0.15);
}
.paletteSettingColor {
    display      : block;
    width        : 14px;
    height       : 14px;
    border-radius: 50%;
    flex-shrink  : 0;
}