/* Default state (hidden on larger screens) */
.channel-dropdown-container {
    display: none;
}

#songList {
    border:none;
    background-color:#333;
    z-index:10000;
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow-y: auto;
    scrollbar-gutter: stable; /* Reserve space for scrollbar */
}
#searchPanel {
    z-index: 10000;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none; /* Initially hidden, toggled by JavaScript */
}


@media (max-width: 600px) {
    #closeSearchBtn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
        margin: 0;
    }
    
    .channel-dropdown-container {
        display: block;
        width: 100%;
        padding: 0;
        padding-bottom:4px;
        text-align: center;
    }
    .channel-dropdown {
        width: 100%;
        height:40px;
        padding: 0;
        padding-left:4px;
        font-size: 24px;
        border-radius: 5px;
        border: 1px solid #999;
        background: #333;
        color: #777;
    }
    
}




/* Search panel restyle */
#searchPanel {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
}

.search-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 6px;
}
#searchInput {
    width: 94%;
    margin: 10px 3% 12px 3%;
    box-sizing: border-box;
    font-size: 1.1em;
    padding: 8px;
}
#searchSubmitBtn {
    width: 160px;
    height:50px;
    display: block;
    margin: 0 auto 16px auto;
    font-size: 1.1em;
    padding: 8px 0;
    border-radius: 6px;
    border: none;
    background: #fff;
    color: #222;
    cursor: pointer;
    transition: background 0.2s;
}
#searchSubmitBtn:hover {
    background: rgb(187, 2, 2);

}
#closeSearchBtn {
    width: 160px;
    display: block;
    margin: 32px auto 0 auto;
    font-size: 1.1em;
    padding: 8px 0;
    border-radius: 6px;
    border: none;
    background: #fff;
    color: #222;
    cursor: pointer;
    transition: background 0.2s;

}
#closeSearchBtn:hover {
    background: #a93226;
}
/* Hamburger menu button styles */
.hamburger-menu {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    z-index: 1101;
}
.hamburger-menu .bar {
    width: 28px;
    height: 4px;
    background-color: #333;
    margin: 3px 0 0 0;
    border-radius: 2px;
    transition: 0.3s;
}
.hamburger-menu.open .bar {
    background-color: #fff;
}

/* Slide-out menu styles */
.slide-menu {
    position: fixed;
    top: 0;
    right: -260px;
    width: 240px;
    height: 100%;
    background: #222;
    color: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    z-index: 1100;
    transition: right 0.3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    padding-top: 60px;
}
.slide-menu.open {
    right: 0;
}
.slide-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.slide-menu li {
    padding: 18px 28px;
    cursor: pointer;
    font-size: 1.1em;
    border-bottom: 1px solid #333;
    transition: background 0.2s;
}
.slide-menu li:hover {
    background: #333;
}

body.menu-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 1099;
}

/* Modal radio button styling */
.modal input[type="radio"] {
    transform: scale(1.2);
    margin-right: 8px;
    accent-color: #c00;
}

.modal label {
    cursor: pointer;
    user-select: none;
}

.modal label:hover {
    color: #ccc;
}

/* Channel navigation buttons in song list */
#prevChannelBtn, #nextChannelBtn {
    padding: 0 !important;
    font-size: 1rem !important;
}



#prevChannelBtn:active, #nextChannelBtn:active {
    transform: scale(0.96);
}
body {
    background-color: black;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px auto;
    caret-color: transparent;
}

/* Restore caret in actual text inputs */
input, textarea, [contenteditable] {
    caret-color: auto;
}

h1 {
    font-size: 14px;
    color: #444;
    margin: 0;
    padding: 0;
    float: left;
}


.radio-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 5px solid #ccc;
    border-radius: 10px;
    padding: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 5px #fff;
    width: 98%;
    height: 500px;
    max-width: 800px;
    min-width: 320px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1003;
    isolation: isolate;
}

.radio-body {
    background-color: #333;
    background-image: url('images/chrome.jpg');
    background-size: cover;
    background-position: center;
    border: 2px solid #999;
    border-radius: 5px;
    box-sizing: border-box;
    height: 500px;
    padding:10px;
}

.radio-body > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 15px;
}

#togglePlayerBtn {
    cursor: pointer;
    padding: 5px;
    color: #444;
    font-size: 14px;
}

.video-container {
    width: 100%;
    margin: auto;
    height: 240px;
    background-color: #000;
    border-radius: 40px;
    border-radius:15px;
    position: relative;
}

#player {
    width: 100%;
    height: 100%;
    border-radius:15px;
}

.frequency-display {
    display: none;
    background: white;
    background-color: rgb(187,36,49, 0.9);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0.3px);
    -webkit-backdrop-filter: blur(0.3px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    padding: 10px;
    height: 240px;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#frequency-text {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#channel {
    display: none;
}

.loading-message,
.loading-subtext {
    animation: loadingPulse 1.6s ease-in-out infinite;
}

.loading-subtext {
    opacity: 0.92;
}

@keyframes loadingPulse {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.985);
        filter: brightness(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1.08);
    }
}

.song-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

#artist, #title {
    font-size: 32px;
    color: rgb(244,125,54);
}

#artist {
    font-size: 40px;
    font-weight: 700;
}

.knobs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    flex-wrap: wrap;
    gap: 10px;
}

.knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    min-width: 80px;
}

#volumeKnob {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 100px;
    background-image: url('images/chrome.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #999;
    border-radius: 50%;
    outline: none;
    transform: rotate(270deg);
    cursor: pointer;
    position: relative;
    box-shadow: 20px 0 30px rgba(0, 0, 0, 0.5), inset 0 0 5px #fff;
}

#max {
    color: white;
    font-size: 10px;
    position: relative;
    top: -10px;
    width: 40%;
    margin: 0;
    float: left;
}

#min {
    color: white;
    font-size: 10px;
    position: relative;
    top: -10px;
    width: 40%;
    margin: 0;
    float: right;
}

#volumeKnob::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1px;
    height: 1px;
    background: #999;
    border-radius: 50%;
    cursor: pointer;
}

/* The small circle near the edge of the volume knob */
#volumeKnob::after {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    background: #777;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(var(--indicator-angle, 250deg)) translateY(-46px);
}

/* Styles for the volume labels container */
.volume-labels {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 6px;
}

/* Styles for the Min and Max labels */
#min, #max {
    font-size: 12px;
    color: #555;
    margin: 0;
    text-align: center;
    width: 40px;
}

#channelKnob {
    width: 100px;
    height: 100px;
    background-image: url('images/chrome.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #999;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    box-shadow: 20px 0 30px rgba(0, 0, 0, 0.5), inset 0 0 5px #fff;
}

#channelKnob::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
}

.knob-container label {
    color: #555;
    font-size: 14px;
    margin-bottom: 5px;
}

.display-panel {
    flex: 1;
    text-align: center;
    min-width: 200px;
    position: relative;
}

.display-surface {
    position: relative;
    width: 100%;
}

.controls {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 5px;
    flex-wrap: wrap;
}

.controls button {
    background-color: #333;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    width: 19.6%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 2px #fff;
}

#listBtn, #searchBtn {
    margin: auto 0;
    color: white;
}

#prevBtn, #playPauseBtn {
    margin: auto 0 auto 0.5%;
    color: white;
}

#nextBtn {
    margin: auto 0.5%;
    color: white;
}

.controls button:hover {
    background-color: #333;
}

.controls-extra {
    display: none; /* Hidden by default on wide screens */
}

.controls-extra button {
    display: none; /* Ensure buttons are hidden by default */
}

.song-list {
    background-color: #c0c0c0; /* Silver background */
    color: #333; /* Dark text for silver background */
    border: 2px solid #999;
    border-radius: 8px;
    padding: 15px 6px;
    width: 100%;
    box-sizing: border-box;
}

.search-panel {
    background-color: black;
    color: white;
    border: 2px solid #999;
    border-radius: 5px;
    padding: 0;
    /* Remove margin-top since we're overlaying */
    margin-top: 0;
    /* Position absolutely to overlay the radio-body */
    position: absolute;
    top: 0;
    left: 0;
    /* Match the width and margins of radio-body */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 100%;
    box-sizing: border-box;
    z-index: 10; /* Ensures it appears above other content */
    display: none; /* Still hidden by default */
}


h3 {
    margin:6px auto 0 auto;
    float:left;
    color: white;
}



/* Legacy song list button styling - overridden by new classes */
#editSongListBtn:not(.song-list-btn), #closeSongListBtn:not(.song-list-btn) {
    background: white !important;
    color: #333 !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 1em !important;
    cursor: pointer !important;
    min-width: 70px !important;
    height: auto !important;
    width:70px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#editSongListBtn:not(.song-list-btn):hover, #closeSongListBtn:not(.song-list-btn):hover {
    background: #f0f0f0 !important;
    border-color: #777 !important;
}

#editSongListBtn:not(.song-list-btn):active, #closeSongListBtn:not(.song-list-btn):active {
    background: #e0e0e0 !important;
    border-color: #444 !important;
}

/* Song List Layout Redesign */
.song-list-nav-row {
    background:#333;
    padding:2px;
    border-radius:5px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 2px;
    border-bottom: 1px solid white;
    gap: 0;
}

.song-list-action-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2px;
}

.song-list-header {
    flex: 1;
    text-align: center;
    margin: 0;
    color: white !important;
    background: transparent !important;
    padding: 4px 8px;
    font-size: 1.2em;
    font-weight:bold;
}

.song-list-btn {
    background: transparent !important;
    color: lightblue !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 1.2em !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease;
}

.song-list-btn:hover {
    opacity: 0.8;
}

.song-list-btn:active {
    opacity: 0.6;
}

.nav-btn {
    min-width: 30px;
    flex-shrink: 0;
}

.action-btn {
    min-width: 60px;
}

/* Player Toggle Slider Styles */
.player-toggle-container {
    display: flex;
    align-items: center;
    background: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
}

.toggle-slider {
    position: relative;
    display: inline-block;
}

.toggle-input {
    display: none;
}

.toggle-label {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #333;
    border-radius: 25px;
    padding: 2px;
    cursor: pointer;
    position: relative;
    width: 182px;
    height: 28px;
    transition: all 0.3s ease;
}

.toggle-text {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    z-index: 3;
    position: relative;
    line-height: 28px;
    padding: 0;
    margin: 0;
}

.toggle-slider-button {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 90px;
    height: 28px;
    background: #333;
    border-radius: 20px;
    transition: all 0.3s ease;
    z-index: 1;
}

.toggle-input:checked + .toggle-label .toggle-slider-button {
    transform: translateX(92px);
}

.toggle-input:checked + .toggle-label .toggle-text:nth-child(1) {
    color: #333 !important;
}

.toggle-input:checked + .toggle-label .toggle-text:nth-child(2) {
    color: white !important;
}

.toggle-input:not(:checked) + .toggle-label .toggle-text:nth-child(1) {
    color: white !important;
}

.toggle-input:not(:checked) + .toggle-label .toggle-text:nth-child(2) {
    color: #333 !important;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 6px auto;
    padding: 5px 0px;
}

.close-search-btn {
    float:right;
    background: #c0392b;
    border: none;
    border-radius: 3px;
    font-size: 18px;   
    height:24px;
    cursor: pointer;
    color: white;
    text-align:center;
}

.close-search-btn:hover {
    background: #a93226;
}
#songTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #c0c0c0; /* Silver background for table */
    border-radius: 8px;
    overflow: hidden;
}

#songTable th, #songTable td {
    padding: 8px 12px;
    text-align: left;
    border: none; /* Remove individual cell borders */
}

#songTable thead {
    background-color: #c0c0c0; /* Silver header */
}

#songTable th {
    color: #333;
    font-weight: bold;
    background-color: #c0c0c0; /* Silver header background */
    border-bottom: 2px solid #999; /* Separator line under header */
}

#songTable tbody tr {
    background-color: black; /* Black row background */
    border: 2px solid #c0c0c0; /* Silver border around each row */
    border-top: none; /* Remove top border to avoid double borders */
}

#songTable tbody tr:first-child {
    border-top: 2px solid #c0c0c0; /* Add top border to first row */
}

#songTable tbody tr td {
    background-color: white; /* Ensure cells stay black */
    color: #333; /* White text on black background */
    border-bottom:1px solid #333;
}

#songTable tbody tr:hover {
    background-color: lightblue !important; /* Darker hover effect */
    color: #222 !important;
    cursor: pointer;
}

#songTable tbody tr:hover td {
    background-color: lightblue !important; /* Ensure hover applies to cells too */
    color: #222 !important;
}

#songTable tbody button:hover {
    background-color: #a93226;
    color:white;
    cursor: pointer;
}

#songTable button:not(.inline-action-btn) {
    background-color: #c0392b;
    color: #fff;
    font-size: 18px;
    border: none;
    border-radius: 3px;
    padding: 3px 6px;
    cursor: pointer;
}

#songTable .song-inline-editor .inline-action-btn {
    font-size: 20px;
}

#songTable button:hover {
    background-color: #ff0000;
}

input {
    font-size: 16px; /* Prevents auto-zoom on iOS */
}

.search-panel input, .search-panel select {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #999;
    width: 100%;
    box-sizing: border-box;
}

.centeredBtns {
    display: flex;
    justify-content: center; /* Centers the button horizontally */
    align-items: center; /* Centers the button vertically if needed */
    width: 100%; /* Ensures the container takes up full width */
}

#searchSubmitBtn, #addSongBtn {
    background-color: #c0392b;
    color:white;
    height:36px;
    font-size:18px;
    margin:2px auto;
    border:none;
    border-radius: 3px;
}
#addSongBtn {
    width:150px;
}
#closeSearchBtn {
    width:100px;
    background-color:#c0392b;
    color:white;
    height:36px;
    font-size:18px;
    border:none;
    border-radius: 3px;
}

.preview-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px; /* Adjust if needed */
    margin: auto;
    margin-bottom:18px;
    gap:10px;
}

#previewPrevious,
#previewNext {
    width: 10%;
    display: flex;
    justify-content: center;
}

#previewPrevious button,
#previewNext button {
    width: 100%;
    height: 40px; /* Adjust as needed */
    border-radius:5px;
    margin:auto 5px;
    color:#333;
    text-align:center;
}

#previewPlayer {
    width:70%;
    height: 150px; /* Adjust height if necessary */
    background-color: black; /* Placeholder in case no video is loaded */
    border:5px solid white;
    border-radius:5px;
}

.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.form-group label {
    width: 120px; /* Adjust as needed */
    text-align: right;
    margin-right: 10px;
    font-weight: bold;
    color:red;
}

.form-group input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0;
    margin-right: 8px;
    background: white;
    color: #333;
}

.form-group select {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0;
    background: #f5f5f5;
    color: #333;
}

#customChannelInput {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0;
    background: white;
    color: #333;
    font-size: inherit;
}

#toggleCustomChannel {
    transition: background-color 0.2s ease;
}

#toggleCustomChannel:hover {
    background: #444 !important;
}

/* Channel form group with button positioning */
.channel-group {
    position: relative;
}

.channel-group select,
.channel-group #customChannelInput {
    margin-right: 100px !important; /* Space for the button */
    width: calc(100% - 100px) !important; /* Ensure dropdown doesn't overflow */
}

.channel-group #toggleCustomChannel {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

/* Adjust search input and search button positioning */
#searchInput {
    width: calc(100% - 110px); /* Remaining width minus button width */
    display: inline-block;
    font-size:16px;
}

#searchSubmitBtn {
    width: 100px; /* Keep button width fixed */
    display: inline-block;
}

/* Align close button with addSongBtn at the bottom */
.centeredBtns {
    display: flex;
    justify-content: space-between; /* Spread buttons evenly */
    align-items: center;
    width: 100%;
}



/* Media query for smaller screens (<600px) */
@media (max-width: 600px) {
    html {
        height: 99%;
        padding: 0.5% 0;
    }
        html, body {
        height: 98.5%;
    }

    .radio-container {
        width: 97%;
        height: 500px;
        padding: auto;
        min-width: 280px;
    }

    /* Adjust radio-body to use flex for height management */
    .radio-body {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
    }
    .knobs {
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0 10px;
    }

    .display-panel {
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .video-container,
    .frequency-display {
        width: 100%;
        height: 200px;
        min-height: 200px;
        margin: 8px auto;
        box-sizing: border-box;
    }

    .frequency-display {
        font-size: 14px;
        padding: 8px;
    }

    #artist, #title {
        font-size: 28px;
    }

    #artist {
        font-size: 34px;
    }

    .controls {
        display: flex;
        justify-content: center;
        padding-top: 5px;
        padding-bottom:10px;
        width: 100%;
        gap: 0;
    }

    .controls button {
        font-size: 32px;
        height: 80px;
        margin: 0;
    }

    #prevBtn {
        width: 33%;
        margin: 0;
    }

    #playPauseBtn {
        width: 33%;
        margin: 0 0.5%;
    }

    #nextBtn {
        width: 33%;
        margin: 0;
    }

    #listBtn, #searchBtn {
        display: none; /* Hide original buttons on narrow screens */
    }

    /* Create a new row for knobs and extra controls */
    .knobs-row {
        flex: 1 0 auto; /* Grow to fill remaining space, no shrink */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        min-height: 0; /* Allow it to shrink if content is less */
        border: 1px solid #242424;
        border-radius: 15px;
        background-image: url('images/speaker4.png');
        background-size: cover; /* Scale image to fill */
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 0px; /* Margin at the bottom */
    }
    .knob-container {
        width: 32%;
        min-width: 60px;
        margin: 0 0.5%;
        flex: 1;
        display: none; /* Adjust based on your design */
    }

    #volumeKnob, #channelKnob {
        width: 120px;
        height: 120px;
    }

    #volumeKnob::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }

    #volumeKnob::after {
        width: 6px;
        height: 6px;
        transform: translate(-50%, -50%) rotate(var(--indicator-angle, 250deg)) translateY(-56px);
    }

    .controls-extra {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 1;
        display:none;
    }

    .controls-extra button {
        display: flex;
        width: 80%;
        height: 60px;
        font-size: 24px;
        background-image: url('images/chrome.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        color: #333;
        border: 1px solid #444;
        border-radius: 5px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 0 10px rgba(0, 0, 0, 0.5), inset 0 0 5px #fff;
    }

    .controls-extra button:hover {
        background-color: #777;
    }
}

/* Media query for even smaller screens (<440px) */
@media (max-width: 440px) {
    #volumeKnob, #channelKnob {
        width: 80px;
        height: 80px;
    }
    #volumeKnob {
        opacity: 0.5;
    }
    #artist, #title {
        font-size: 22px;
    }

    #artist {
        font-size: 28px;
    }

    .controls-extra button {
        height: 50px;
    }
    #volumeKnob::after {
        display: none;
        width: 6px;
        height: 6px;
        transform: translate(-50%, -50%) rotate(var(--indicator-angle, 250deg)) translateY(-36px);
    }
    #volumeKnob::-webkit-slider-thumb {
        display: none;
    }
    #min, #max {
        color: #888;
    }
    label[for="volumeKnob"] {
        color: #888;
    }
    .close-search-btn {
        padding-bottom:3px;
        font-size:16px;
    }
}

/* ====== MODERN UI COMPONENTS ====== */

/* Channel Tab Bar */
.channel-tabs-container {
    display: none;
}

.channel-tabs-bar {
    background: #0f3460;
    border-bottom: 2px solid #7ec8e3;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
}

.channel-tabs-scroll {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    min-width: min-content;
}

.channel-tabs {
    display: flex;
    gap: 8px;
}

.channel-tab {
    padding: 8px 16px;
    background: #1a1a2e;
    color: #7ec8e3;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.channel-tab:hover {
    background: #16213e;
    border-color: #7ec8e3;
}

.channel-tab.active {
    background: #7ec8e3;
    color: #1a1a2e;
    font-weight: 600;
}

/* Bottom Navigation Bar */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0f3460;
    border-top: 2px solid #7ec8e3;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    z-index: 1000;
}

.bottom-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: #7ec8e3;
    cursor: pointer;
    padding: 8px;
    font-size: 12px;
    transition: all 0.2s ease;
    flex: 1;
    height: 100%;
}

.bottom-nav-btn:hover {
    background: rgba(126, 200, 227, 0.1);
}

.bottom-nav-btn.active {
    color: #fff;
    background: rgba(126, 200, 227, 0.2);
}

.bottom-nav-btn span {
    font-size: 11px;
    display: none;
}

.bottom-nav-btn i {
    font-size: 20px;
}

.bottom-nav-btn.fab {
    position: absolute;
    bottom: 40px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: #7ec8e3;
    color: #1a1a2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bottom-nav-btn.fab:hover {
    background: #5ab5d0;
}

/* Song List Overlay Modal */
.song-list-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 2005;
    overflow: hidden;
}

.song-list-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-list-modal {
    background: #1a1a2e;
    border-radius: 12px 12px 0 0;
    border-top: 2px solid #7ec8e3;
    width: 90%;
    max-width: 1000px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

@media (min-width: 601px) {
    #channelsOverlay .song-list-modal,
    #songListOverlay .song-list-modal {
        width: calc(100vw - 48px);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}

.song-list-modal .song-list-handle {
    margin-top: 10px;
    margin-bottom: 8px;
}

.song-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #0f3460;
    color: #7ec8e3;
}

.song-list-header h2 {
    margin: 0;
    font-size: 18px;
}

.close-btn {
    background: transparent;
    border: none;
    color: #7ec8e3;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
}

.close-btn:hover {
    color: #fff;
}

.filter-input {
    margin: 12px 12px 0 12px;
    padding: 8px 12px;
    background: #0f3460;
    border: 1px solid #16213e;
    border-radius: 6px;
    color: #7ec8e3;
    font-size: 14px;
}

.filter-input::placeholder {
    color: #5a7a8e;
}

/* Song List Table */
#songTable {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#songTable thead {
    background: #0f3460;
    position: sticky;
    top: 0;
}

#songTable th {
    padding: 12px;
    text-align: left;
    color: #7ec8e3;
    font-weight: 600;
    border-bottom: 1px solid #16213e;
}

#songTable tbody tr {
    border-bottom: 1px solid #16213e;
    transition: background 0.2s ease;
}

#songTable tbody tr:hover {
    background: #16213e;
}

#songTable td {
    padding: 12px;
    color: #ccc;
}

.song-artist {
    font-weight: 500;
    color: #7ec8e3;
}

.song-actions {
    display: flex;
    gap: 8px;
}

.action-icon-btn {
    background: transparent;
    border: none;
    color: #7ec8e3;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    transition: all 0.2s ease;
}

.action-icon-btn:hover {
    color: #fff;
    transform: scale(1.1);
}

.delete-btn:hover {
    color: #e94560;
}

/* Bottom Sheet Modal */
.bottom-sheet {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    background: #1a1a2e;
    border-radius: 12px 12px 0 0;
    border-top: 2px solid #7ec8e3;
    max-height: 80vh;
    width: calc(100vw - 24px);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    display: none;
    z-index: 2005;
    flex-direction: column;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
}

.bottom-sheet.active {
    display: flex;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

.bottom-sheet-handle {
    width: 56px;
    height: 6px;
    background: #7ec8e3;
    border-radius: 999px;
    margin: 12px auto;
    position: relative;
    cursor: grab;
    touch-action: none;
}

.bottom-sheet-handle::before {
    content: '';
    position: absolute;
    left: -24px;
    right: -24px;
    top: -12px;
    bottom: -12px;
}

.bottom-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #0f3460;
    cursor: grab;
}

.bottom-sheet-header h2 {
    margin: 0;
    color: #7ec8e3;
    font-size: 18px;
}

.bottom-sheet-content {
    overflow-y: auto;
    padding: 16px;
    flex: 1;
}

/* Search Input in Bottom Sheet */
.search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

#searchInput {
    flex: 1;
    padding: 10px 12px;
    background: #0f3460;
    border: 1px solid #16213e;
    border-radius: 6px;
    color: #7ec8e3;
    font-size: 14px;
}

#searchInput::placeholder {
    color: #5a7a8e;
}

#searchSubmitBtn {
    padding: 10px 16px;
    background: #7ec8e3;
    color: #1a1a2e;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

#searchSubmitBtn:hover {
    background: #5ab5d0;
}

/* Form Groups */
.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    color: #7ec8e3;
    font-weight: 500;
    font-size: 14px;
}

.form-group input,
.form-group select {
    padding: 10px 12px;
    background: #0f3460;
    border: 1px solid #16213e;
    border-radius: 6px;
    color: #ccc;
    font-size: 14px;
}

.form-group select {
    cursor: pointer;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #7ec8e3;
    background: #16213e;
}

.primary-btn {
    padding: 12px 20px;
    background: #7ec8e3;
    color: #1a1a2e;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.primary-btn:hover {
    background: #5ab5d0;
    transform: translateY(-1px);
}

/* Media Queries for Modern UI */
@media (max-width: 600px) {
    .bottom-nav-btn span {
        display: none;
    }
    
    .channel-tab {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .song-list-modal {
        width: 95%;
        max-height: 70vh;
    }
    
    .bottom-sheet {
        max-height: 85vh;
    }
}

/* ====== OVERRIDES: DIAL CHANNEL + COMPACT MOBILE NAV ====== */


.controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/* Remove legacy top tab strip */
.channel-tabs-container,
.channel-tabs-bar {
    display: none !important;
}

/* Bottom channel dial */
.channel-dial {
    position: fixed;
    left: 2px;
    right: 2px;
    bottom: 62px;
    min-height: 70px;
    /*background: linear-gradient(180deg, #123f73 0%, #0f3460 100%);
   
   */
    border: 1px solid rgba(126, 200, 227, 0.45);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 8px 7px;
    z-index: 1001;
}

.dial-nav-btn {
    width: 50px;
    height: 50px;
    margin:4px 2px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #9edff4;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dial-nav-btn:active {
    transform: scale(0.96);
}

.channel-dial-window {
    flex: 0 0 auto;
    overflow: hidden;
    margin: 0 2px;
}

.channel-dial-track {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 100%;
    min-width: 0;
    border-radius: 10px;
}

.channel-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    transition: opacity 0.24s ease, transform 0.24s ease, color 0.24s ease;
}

.channel-name.current {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5),
        0 -1px 0 rgba(0, 0, 0, 0.35);
}

.channel-preset-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.channel-preset-btn {
    height: 59px;
    border-radius: 5px;
    border: 1px solid #7f7f7f;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(220,220,220,0.9) 38%, rgba(166,166,166,0.94) 52%, rgba(217,217,217,0.9) 100%);
    color: #333;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 -1px 0 rgba(0, 0, 0, 0.45);
    padding: 0 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(72,72,72,0.28),
        0 1px 2px rgba(0,0,0,0.45);
}

.channel-preset-btn i {
    font-size: 26px;
    text-shadow: inherit;
}

.channel-preset-btn:active {
    background:
        linear-gradient(180deg, rgba(188,188,188,0.98) 0%, rgba(232,232,232,0.96) 100%);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.35),
        0 1px 1px rgba(0,0,0,0.35);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35),
        0 -1px 0 rgba(0, 0, 0, 0.55);
}

.channel-preset-btn.is-active {
    border-color: #7f7f7f;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(72,72,72,0.28),
        0 1px 2px rgba(0,0,0,0.45);
}

.channel-step-btn {
    font-size: 24px;
    letter-spacing: 0.2px;
}

.channel-dial-track.anim-next .channel-name.current {
    animation: channel-center-from-right 260ms ease;
}

.channel-dial-track.anim-prev .channel-name.current {
    animation: channel-center-from-left 260ms ease;
}

@keyframes channel-center-from-right {
    from {
        transform: translateX(22px);
        opacity: 0.25;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes channel-center-from-left {
    from {
        transform: translateX(-22px);
        opacity: 0.25;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Bottom nav now has 4 equal items */
.bottom-nav {
    height: 62px;
}

.bottom-nav-btn {
    position: static;
    border-radius: 0;
}

.bottom-nav-btn span {
    display: block;
}

.bottom-nav-btn.fab {
    position: static;
    width: auto;
    height: 100%;
    background: transparent;
    color: #7ec8e3;
    border-radius: 0;
    box-shadow: none;
}

.mobile-unmute-btn {
    position: absolute;
    inset: 0;
    z-index: 1004;
    display: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 20px;
    border-radius: 15px;
    border: 1px solid rgba(126, 200, 227, 0.42);
    background: rgba(10, 22, 45, 0.63);
    color: #d7f3ff;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.2px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.mobile-unmute-btn.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The unmute overlay is also used on desktop when Chrome's autoplay policy
   forces us into muted autoplay. The .visible class controls display. */

/* Compact search sheet so all tools fit at once on mobile */
.bottom-sheet {
    bottom: 124px;
    max-height: calc(100vh - 170px);
}

.bottom-sheet-content {
    padding: 2px 12px;
}

.search-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 8px;
}

#searchInput,
#searchSubmitBtn {
    height: 40px;
    margin: 0;
}

#searchSubmitBtn {
    padding: 0;
    min-width: 0;
}

.preview-container {
    margin-bottom: 8px;
}

#previewPlayer {
    min-height: 130px;
}

#addSongForm {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#addSongForm .form-group {
    margin-bottom: 6px;
}

#addSongBtn {
    grid-column: auto;
    margin-top: 0;
}

@media (max-width: 600px) {

    .channel-dial {
        left: 2px;
        right: 2px;
        height: 50px;
        bottom: 60px;
    }

    .channel-name.current {
        font-size: 21px;
    }

    .channel-name.side {
        font-size: 11px;
    }

    .bottom-nav-btn i {
        font-size: 18px;
    }

    .bottom-nav-btn span {
        font-size: 10px;
    }

    .bottom-sheet {
        bottom: 112px;
        max-height: calc(100vh - 160px);
    }

    #searchBottomSheet,
    #settingsBottomSheet {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}



@media (max-width: 420px) {
    #addSongForm {
        grid-template-columns: 1fr;
    }
}

/* ====== FINAL LAYOUT OVERRIDES (single-player design) ====== */

.radio-container {
    height: 500px;
    min-height: 0;
}

.radio-body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.knobs {
    margin-top: 6px;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
}

.display-panel {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.knobs-row,
.knob-container {
    display: none !important;
}

/* Channel control now sits in dead space below player */
.channel-dial {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    padding: 0;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 5;
}

/* Transport row: exactly 3 equal buttons */
.controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 10px;
}

.controls button,
#prevBtn,
#playPauseBtn,
#nextBtn {
    width: 100% !important;
    height: 80px !important;
    font-size: 32px !important;
    margin: 0 !important;
}

.video-container,
.frequency-display {
    height: 240px !important;
    min-height: 240px;
}

.controls button i,
#prevBtn i,
#playPauseBtn i,
#nextBtn i {
    color: #d7d7d7;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45),
        0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Bottom nav remains fixed; no extra dial offset needed */
.bottom-nav {
    height: 62px;
}

/* Search/settings sheets sit directly above nav */
.bottom-sheet {
    bottom: 62px;
    max-height: calc(100vh - 90px);
}

.settings-sheet .bottom-sheet-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-note {
    margin: 0;
    color: #9db6c6;
    font-size: 13px;
}

.channel-dial {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 600px) {

    .controls {
        gap: 6px;
    }

    .bottom-sheet {
        bottom: 62px;
        max-height: calc(100vh - 86px);
    }
}

/* ====== SEARCH SHEET: TITLE HEADER + TOOLS UNDER DIVIDER ====== */

.add-music-title-header {
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-music-title-header h2 {
    flex: 0 0 auto;
}

.search-tools-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 0 auto;
    flex: 1;
}

.search-tools-row #searchInput {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 10px;
    margin: 0;
    font-size: 14px;
    background: #ffffff;
    border: 1px solid #16213e;
    border-radius: 6px;
    color: #000000;
}

.search-tools-row #searchSubmitBtn {
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    font-size: 15px;
}

.search-clear-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: #c0392b;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.search-header-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 0 auto;
    flex: 1;
}

.search-header-filters label {
    color: #7ec8e3;
    font-size: 12px;
    font-weight: 600;
}

.search-header-filters select {
    height: 34px;
    border-radius: 6px;
    border: 1px solid #2a4f7a;
    background: #ffffff;
    color: #1a1a2e;
    font-size: 12px;
    padding: 0 8px;
}

.preview-container {
    margin: 16px 0 32px;
}

/* Form groups: label on left, control on right — 4 separate lines */
#addSongForm {
    display: none !important;
    flex-direction: column;
    gap: 0;
}

#addSongForm.visible {
    display: flex !important;
}

#editChannelAddSongForm {
    display: none;
    flex-direction: column;
    gap: 0;
}

#addSongForm .form-group,
#editChannelAddSongForm .form-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 7px !important;
    gap: 4px !important;
    width: 100%;
}

#addSongForm .form-group label,
#editChannelAddSongForm .form-group label {
    width: 10%;
    min-width: 56px;
    flex-shrink: 0;
    text-align: right;
    margin: 0;
    color: #7ec8e3;
    font-size: 13px;
    font-weight: 500;
}

#addSongForm .form-group input,
#addSongForm .form-group select,
#editChannelAddSongForm .form-group input,
#editChannelAddSongForm .form-group select,
#songIDDisplay,
#editChannelSongIDDisplay,
#editChannelAddTarget {
    flex: 0 0 80%;
    max-width: 80%;
    padding: 0 8px;
    height: 38px;
    margin-right: 10%;
    box-sizing: border-box;
    font-size: 13px;
    background: #ffffff;
    border: 1px solid #16213e;
    border-radius: 6px;
    color: #000000;
}

/* Song ID row keeps label/input aligned with other rows */
.song-id-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-song-btn-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 6px 0 10px;
}

.add-song-btn-row #addSongBtn,
.add-song-btn-row #editChannelAddSongBtn {
    width: 160px;
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
}

#addSongForm .form-group select,
#editChannelAddSongForm .form-group select {
    background: #7ec8e3;
    color: #142849;
}

#songIDDisplay,
#editChannelSongIDDisplay,
#editChannelAddTarget {
    display: flex;
    align-items: center;
    background: #1a1a2e;
    color: #7ec8e3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-color: #1a1a2e;
}

/* Expand search sheet after results load so preview + form are visible */
#searchBottomSheet.results-visible {
    top: auto;
    height: auto;
    max-height: calc(100vh - 120px);
}

.search-results-toolbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 15%;
    min-width: 54px;
    padding: 0;
}

.search-results-layout {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.search-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 0 auto;
    flex: 1;
    padding: 0;
}

.search-results-header h3 {
    margin: 0;
    color: #bfefff;
    font-size: 18px;
    font-weight: 700;
}

#searchResultsCount {
    color: #bfefff;
    font-size: 12px;
    text-align: center;
    line-height: 1.2;
}

.search-results-actions {
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.search-page-btn {
    height: 30px;
    min-width: 80px;
    border-radius: 6px;
    border: 1px solid #2a4f7a;
    background: #0f3460;
    color: #bfefff;
    font-size: 12px;
    padding: 0 10px;
}

#searchClearBtn {
    height: 36px;
    min-width: 80px;
    padding: 0 16px;
    font-size: 13px;
    border-radius: 3px;
    background: #7ec8e3;
    color: #142849;
    border: none;
}

.search-page-btn:disabled {
    opacity: 0.45;
}

.search-results-list {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 159px;
    min-height: 159px;
    max-height: 159px;
    box-sizing: border-box;
    overflow-y: auto;
    border: 1px solid #1f3f61;
    border-radius: 8px;
    background: #10213a;
    margin-bottom: 0;
}

.search-page-nav-btn {
    min-width: 0;
    width: auto;
    height: auto;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #7ec8e3;
}

.search-page-nav-btn:disabled {
    opacity: 0.4;
}

.search-form-divider {
    display: none;
    height: 1px;
    background: #2a4f7a;
    margin: 10px 0 8px;
}

#searchBottomSheet.results-visible .search-form-divider {
    display: block;
}

.search-result-item {
    width: 100%;
    height: 53px;
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border: none;
    border-bottom: 1px solid #1f3f61;
    background: #142849;
    color: #d5ecfb;
    text-align: left;
    cursor: pointer;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item.is-active {
    background: #1a355e;
    outline: 1px solid rgba(126, 200, 227, 0.5);
}

.search-result-thumb {
    width: 64px;
    height: 36px;
    flex: 0 0 64px;
    object-fit: cover;
    border-radius: 4px;
}

.search-result-meta {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.search-result-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.search-result-channel {
    font-size: 11px;
    color: #9ed4ea;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.preview-container {
    width: 100%;
    max-width: none;
    margin: 6px 0 8px;
}

#previewPlayer {
    width: 100%;
    height: 170px;
    border: 1px solid #1f3f61;
    border-radius: 8px;
    background: #000;
    overflow: hidden;
}

#searchBottomSheet.results-visible .bottom-sheet-content {
    flex: 0 1 auto;
}

/* Preview prev/next buttons inherit .dial-nav-btn (50px circle) — nothing extra needed */

/* ====== SONG LIST: TITLE HEADER + CONTENT UNDER DIVIDER ====== */

.song-list-title-header {
    cursor: grab;
}

.channels-title-header {
    cursor: grab;
}

.channels-title-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.channels-presets-link {
    border: none;
    background: transparent;
    color: #7ec8e3;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0;
}

.channels-presets-link:hover {
    color: #bfefff;
}

.channels-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.channels-filter-label {
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
}

.channels-search-row {
    padding: 8px 14px 6px;
}

.channels-filter-input {
    width: 100%;
    height: 34px;
    border: 1px solid #2a4f7a;
    background: #ffffff;
    color: #0f3460;
}

.channels-filter-input::placeholder {
    color: #4b6c93;
}

.channels-filter-toggle-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: none;
    margin-left: 0;
}

.channels-filter-inline {
    margin-left: auto;
    flex: 1 1 220px;
    max-width: 360px;
    min-width: 120px;
}

#channelsFilterInput {
    margin: 0;
}

@media (max-width: 480px) {
    .channels-filter-toggle-bar {
        flex-wrap: wrap;
    }
    .channels-filter-inline {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }
}

.song-list-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
}

.song-list-channel-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    flex-shrink: 0;
}

.song-list-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.song-list-header h2 {
    flex-shrink: 0;
    white-space: nowrap;
}

.song-list-channel-nav h2 {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-list-channel-btn {
    margin: 0;
    flex-shrink: 0;
}

.song-list-filter-row .filter-input {
    flex: 1;
    min-width: 100px;
    margin: 0;
    padding: 6px 10px;
    height: 46px;
    box-sizing: border-box;
    font-size: 13px;
    background: #ffffff;
    color: #000000;
}

/* Constrain modal height so table scrolls */
.song-list-modal {
    height: 80vh;
    overflow: hidden;
}

/* Themed table header/body: dark blue + light blue text */
#songTable thead {
    background: #0f3460;
    position: sticky;
    top: 0;
    z-index: 1;
}

#songTable th {
    background: #0f3460;
    color: #a8e6ff;
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid #2a4f7a;
}

/* Give more space to title; keep actions compact on the right */
#songTable th:nth-child(1),
#songTable td:nth-child(1) {
    width: 26%;
}

#songTable th:nth-child(3),
#songTable td:nth-child(3) {
    width: 76px;
}

#songTable th:nth-child(2),
#songTable td:nth-child(2) {
    width: auto;
}

/* Keep rows aligned to the dark-blue theme */
#songTable tbody tr {
    background: #142849;
    border-bottom: 1px solid #2a4f7a;
}

#songTable tbody td {
    background: #142849;
    color: #bfefff;
}

#songTable tbody tr:hover,
#songTable tbody tr:hover td {
    background: #1a355e;
}

#songTable {
    background: #10213a;
}

#songTable tbody {
    background: #10213a;
}

@media (max-width: 600px) {
    .song-list-header {
        gap: 8px;
        padding: 10px 12px;
    }

    .song-list-channel-nav {
        gap: 6px;
    }

    .song-list-channel-nav h2 {
        font-size: 15px;
        max-width: 120px;
    }

    .song-list-channel-btn {
        width: 44px;
        height: 44px;
        margin: 0;
    }
}

/* Ensure table body scrolls */
#songTable {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: block;
}

#songTable thead,
#songTable tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Channels table in bottom-sheet overlay */
#channelsTable {
    overflow-y: auto;
    flex: 0 1 auto;
    min-height: 0;
    display: block;
    width: 100%;
    border-collapse: collapse;
    background: #10213a;
    max-height: 46vh;
}

#channelsTable thead,
#channelsTable tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#channelsTable td:first-child {
    width: 64px;
    text-align: center;
}

#channelsTable tbody tr {
    background: #142849;
    border-bottom: 1px solid #2a4f7a;
}

#channelsTable tbody tr:hover,
#channelsTable tbody tr:hover td {
    background: #1a355e;
}

#channelsTable tbody tr.current-channel,
#channelsTable tbody tr.current-channel td {
    background: #16345b;
}

#channelsTable td {
    background: #142849;
    color: #bfefff;
    padding: 10px 12px;
    vertical-align: middle;
}

.channel-favorite-cell {
    text-align: center;
    padding: 6px 0 !important;
}

.channel-favorite-btn {
    border: none;
    background: transparent;
    color: #6f7f90;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
}

.channel-favorite-btn.is-favorite {
    color: #ffd54a;
}

.channel-name-cell {
    padding-left: 8px;
}

.channel-name-btn {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: #bfefff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

.channel-name-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.channel-name-main {
    font-size: 16px;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-name-description {
    font-size: 12px;
    font-weight: 400;
    color: #8ea5b4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-name-btn:hover,
.channel-name-btn:focus-visible {
    color: #ffffff;
    outline: none;
}

/* Keep action buttons right-aligned without turning table-cell into flex */
#songTable th:nth-child(3) {
    text-align: center;
}

#songTable td.song-actions {
    display: table-cell;
    text-align: center !important;
    white-space: nowrap;
    vertical-align: middle;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#songTable td.song-actions .action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* Inline edit panel under selected song row */
.song-edit-row td {
    background: #16213e !important;
    padding: 8px 10px;
    border-bottom: 1px solid #0f3460;
}

.song-inline-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border-radius: 8px;
    padding: 14px;
}

.inline-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.inline-editor-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f3460;
    margin: 0;
}

.inline-editor-header .delete-inline-btn {
    flex: none;
    width: auto;
    height: 38px;
    font-size: 15px;
    font-weight: 600;
    padding: 0 14px;
    white-space: nowrap;
}

.inline-field-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inline-field-label {
    color: #0f3460 !important;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    min-width: 62px;
    text-align: right;
}

.song-inline-editor input,
.song-inline-editor select {
    height: 38px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #ffffff;
    color: #000000;
    font-size: 15px;
    min-width: 0;
    flex: 1;
}

.song-inline-editor .inline-channel-select {
    background: #7ec8e3;
    color: #0f3460;
    font-weight: 600;
    font-size: 15px;
    height: 38px;
    border-color: #5ab5d0;
}

.inline-editor-footer {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.inline-action-btn {
    height: 38px;
    font-size: 15px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    flex: 1;
}

.save-inline-btn {
    background: #c0392b;
}

.delete-inline-btn {
    background: #c0392b;
}

.cancel-inline-btn {
    background: #666;
}

#songTable.editing-active tbody tr:not(.song-edit-row) {
    filter: brightness(0.42);
}

#songTable.editing-active tbody tr:not(.song-edit-row) td {
    transition: filter 0.18s ease, background-color 0.18s ease;
}

/* Keep Edit Music area backgrounds stable on hover */
.song-edit-row:hover td,
.song-edit-row td:hover {
    background: transparent !important;
}

#songTable tbody tr.song-edit-row:hover,
#songTable tbody tr.song-edit-row:hover td {
    background: transparent !important;
    color: #bfefff !important;
    cursor: default !important;
}

#songTable.editing-active tbody tr:hover,
#songTable.editing-active tbody tr:hover td {
    background: #142849 !important;
    color: #bfefff !important;
    cursor: default !important;
}

.song-inline-editor .save-inline-btn:hover,
.song-inline-editor .delete-inline-btn:hover,
.song-inline-editor .cancel-inline-btn:hover {
    filter: none;
    transform: none;
}

.song-inline-editor .save-inline-btn:hover {
    background: #a93226;
}

.song-inline-editor .delete-inline-btn:hover {
    background: #a93226;
}

.song-inline-editor .cancel-inline-btn:hover {
    background: #555;
}

/* ====== EDITOR PAGE STYLES ====== */
.editor-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0px 16px 10px;
    flex: 1;
    min-height: 0;
}

.editor-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: #7ec8e3;
    color: #0f3460;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.editor-option-btn-inline {
    width: 200px;
    flex-shrink: 0;
}

.editor-section-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.editor-section-row:first-child {
    margin-top: 12px;
}

.editor-section-row .editor-section-header {
    flex: 1;
    min-width: 0;
}

.editor-option-btn:hover {
    background: #5ab5d0;
}

.editor-option-btn i {
    font-size: 16px;
}

.editor-option-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.editor-channel-select {
    flex: 1;
    height: 48px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #5ab5d0;
    background: #7ec8e3;
    color: #0f3460;
    font-size: 15px;
    font-weight: 600;
}

.editor-channel-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 1 auto;
    height: auto;
    max-height: 52vh;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 8px;
    border: 1px solid #2a4f7a;
    background: #10213a;
}
.editor-batch-link {
    margin-left: 8px;
    border: none;
    background: transparent;
    color: #7ec8e3;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0 8px;
}
.editor-batch-link:hover {
    color: #bfefff;
}

.editor-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    flex-wrap: nowrap;
}

.editor-actions-row .editor-option-btn-inline {
    width: calc(50% - 5px);
    flex: 1 1 0;
    min-width: 0;
}

#songListOverlay .editor-actions-row .editor-option-btn-inline {
    width: calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
}

.editor-channel-list-item {
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    min-height: 56px;
    box-sizing: border-box;
    padding: 8px 14px;
    color: #bfefff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1px solid #1a355e;
    transition: background 0.15s;
}

.batch-edit-modal {
    width: min(460px, 100%);
}
.batch-edit-body {
    padding-top: 10px;
}
.batch-action-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.batch-action-btn {
    width: 100%;
    justify-content: center;
}
.batch-add-modal {
    width: calc(100vw - 48px);
    max-width: 1000px;
    max-height: 90vh;
}

.editor-modal-wide.batch-add-modal {
    width: calc(100vw - 48px);
    max-width: 1000px;
}
.batch-add-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.batch-add-table-wrap {
    overflow: auto;
    max-height: 60vh;
    border: 1px solid rgba(126, 200, 227, 0.24);
    border-radius: 10px;
}
.batch-add-table {
    width: 100%;
    border-collapse: collapse;
    background: #10213a;
    table-layout: fixed;
}

.batch-add-table th:nth-child(1),
.batch-add-table td:nth-child(1) {
    width: 22%;
}

.batch-add-table th:nth-child(2),
.batch-add-table td:nth-child(2) {
    width: 20%;
}

.batch-add-table th:nth-child(3),
.batch-add-table td:nth-child(3) {
    width: 20%;
}

.batch-add-table th:nth-child(4),
.batch-add-table td:nth-child(4) {
    width: 38%;
}
.batch-add-table thead th {
    position: sticky;
    top: 0;
    background: #0f3460;
    color: #a8e6ff;
    padding: 6px 8px;
    text-align: left;
    z-index: 1;
}
.batch-add-table td {
    padding: 2px 3px;
    vertical-align: top;
    border-top: 1px solid #1a355e;
    background: #142849;
}
.batch-add-table tr:nth-child(even) td {
    background: #10213a;
}
.batch-add-modal .batch-add-table select,
.batch-add-modal .batch-add-table input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #2a4f7a;
    background: #ffffff;
    color: #000000;
    padding: 0 8px;
    height: 36px;
    min-height: 36px;
    line-height: 36px;
}
.batch-add-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    justify-content: stretch;
}

.batch-footer-btn {
    width: 100%;
    min-width: 0;
    background: #7ec8e3;
    color: #0f3460;
}

.batch-footer-btn:hover {
    background: #95d7ec;
}

#batchAddRowBtn,
#batchAddCancelBtn {
    background: #d3dbe3;
    color: #233a52;
}

#batchAddRowBtn:hover,
#batchAddCancelBtn:hover {
    background: #c3ced8;
}

.batch-channel-header-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.batch-channel-add-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #7ec8e3;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.batch-channel-add-btn:hover {
    color: #bfefff;
}

.batch-channel-add-btn i {
    pointer-events: none;
}

.batch-channel-modal {
    max-width: 420px;
}

.batch-channel-modal .editor-modal-footer {
    justify-content: flex-end;
}

#batchEditModal .warning-modal {
    background: #ffffff;
    border: 1px solid #7ec8e3;
}

#batchEditModal .warning-modal-header {
    background: #0f3460;
    color: #e8f8ff;
}

#batchEditModal .warning-modal-btn {
    background: #7ec8e3;
    color: #0f3460;
}

#batchEditModal .warning-modal-btn:hover {
    background: #95d7ec;
}

.editor-channel-list-item:last-child {
    border-bottom: none;
}

.editor-channel-list-item:hover {
    background: #1a355e;
}

.editor-channel-list-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-channel-list-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.editor-channel-list-description {
    font-size: 12px;
    font-weight: 400;
    color: #8ea5b4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-channel-filter-input {
    margin-top: 0;
    margin-left: auto;
    flex: 0 1 320px;
    width: 320px;
    max-width: 58%;
    min-width: 120px;
    height: 32px;
    background: #ffffff;
    color: #0f3460;
    border: 1px solid #2a4f7a;
}

.editor-channel-filter-input::placeholder {
    color: #4b6c93;
}

.editor-channel-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    margin-right: 10px;
    color: #7ec8e3;
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.editor-channel-drag-handle:active {
    cursor: grabbing;
}

.editor-channel-list-item > .fa-chevron-right {
    margin-left: auto;
    color: #7ec8e3;
    font-size: 14px;
}

.editor-channel-list.is-reordering .editor-channel-list-item:not(.is-dragging) {
    opacity: 0.92;
}

.editor-channel-list-item.is-dragging {
    opacity: 0.55;
    background: #1a355e;
}

/* ====== EDITOR MODAL OVERLAY ====== */
.editor-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 2300;
    align-items: center;
    justify-content: center;
}

.editor-modal-overlay.active {
    display: flex;
    align-items: flex-start;
    padding-top: 10px;
}

.editor-modal {
    background: #1a1a2e;
    border-radius: 12px;
    border: 1px solid #7ec8e3;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.25s ease-out;
}

.editor-modal-wide {
    max-width: 600px;
    max-height: calc(100vh - 76px);
    overflow: hidden;
}

#editChannelModal .editor-modal {
    width: 100%;
    max-width: 100%;
}

#editChannelModal .editor-modal-header {
    border-bottom: none;
}

#editChannelModal .edit-channel-nav-row {
    flex: 1;
}

#editChannelModal .edit-channel-name {
    color: #7ec8e3;
}

#editChannelModalClose {
    color: #ffffff;
    font-size: 24px;
}

#editChannelModal .editor-modal-body {
    padding-top: 0;
}

#editChannelModal .editor-search-panel {
    margin-top: 0;
}

.editor-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #0f3460;
}

.editor-modal-header h3 {
    margin: 0;
    font-size: 17px;
    color: #a8e6ff;
}

.editor-modal-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #7ec8e3;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.editor-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.editor-modal-body label {
    color: #7ec8e3;
    font-size: 13px;
    font-weight: 600;
}

.editor-modal-body input[type="text"] {
    height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #2a4f7a;
    background: #fff;
    color: #000;
    font-size: 15px;
}

.editor-modal-body textarea,
.auth-field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 78px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #2a4f7a;
    background: #fff;
    color: #000;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}

.editor-modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #0f3460;
    justify-content: flex-end;
}

.editor-modal-btn {
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.editor-modal-btn.cancel-btn {
    background: #333;
    color: #ccc;
}

.editor-modal-btn.save-btn {
    background: #7ec8e3;
    color: #0f3460;
}

/* Edit Channel Modal song table */
#editChannelSongTable {
    background: #10213a;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

#editChannelSongTable thead,
#editChannelSongTable tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#editChannelSongTable thead {
    background: #0f3460;
    position: sticky;
    top: 0;
    z-index: 1;
}

#editChannelSongTable th {
    background: #0f3460;
    color: #a8e6ff;
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid #2a4f7a;
}

#editChannelSongTable th:nth-child(1),
#editChannelSongTable td:nth-child(1) { width: 40%; }
#editChannelSongTable th:nth-child(2),
#editChannelSongTable td:nth-child(2) { width: 60%; }

#editChannelSongTable tbody tr {
    background: #142849;
    border-bottom: 1px solid #2a4f7a;
    cursor: pointer;
}

#editChannelSongTable tbody td {
    background: #142849;
    color: #bfefff;
    padding: 8px 12px;
}

#editChannelSongTable tbody tr:hover,
#editChannelSongTable tbody tr:hover td {
    background: #1a355e;
}

#editChannelSongTable.editing-active tbody tr:not(.song-edit-row) {
    filter: brightness(0.42);
}

#editChannelSongTable .song-edit-row td {
    background: transparent !important;
    padding: 8px 4px;
}

#editChannelSongTable .song-edit-row:hover td {
    background: transparent !important;
}

/* Disable Edit Channel controls while inline editor is open */
#editChannelSongTable.editing-active ~ .edit-channel-nav-row,
.editor-modal-body:has(#editChannelSongTable.editing-active) .edit-channel-nav-row,
.editor-modal-body:has(#editChannelSongTable.editing-active) .filter-input {
    pointer-events: none;
    opacity: 0.4;
}

.editor-modal-body .filter-input {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Edit channel modal header nav buttons */
.edit-channel-nav-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
    padding: 4px 10px;
    flex-shrink: 0;
}

.edit-channel-delete-btn {
    width: 160px;
    height: 36px;
    padding: 0 16px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 6px;
    margin-left: auto;
}

.edit-channel-nav-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.edit-channel-title-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.edit-channel-name-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.edit-channel-description {
    display: none;
    font-size: 12px;
    font-weight: 400;
    color: #8ea5b4;
    white-space: normal;
    overflow: hidden;
    max-width: 100%;
}

.edit-channel-description.has-description {
    display: block;
}

#editChannelModal.editor-search-active .edit-channel-nav-row,
#editChannelModal.editor-search-active .editor-playlist-header-row {
    display: none;
}

#editChannelModal.editor-search-pending .editor-playlist-header-row {
    display: none;
}

#editChannelModal.editor-search-active .editor-modal-header {
    display: none;
}

.editor-search-panel {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 8px;
}

.editor-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin-top: 0;
    border-radius: 0;
    background: transparent;
}

.editor-search-row .editor-subsection-label {
    color: #333333;
}

.editor-subsection-label {
    flex: 0 0 auto;
    margin: 0;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.editor-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.editor-search-input {
    flex: 1;
    min-width: 0;
}

.editor-search-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    background: #cc0000;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.editor-search-btn:hover {
    background: #b30000;
}

.editor-search-close-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    background: #cc0000;
    color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

#editChannelModal.editor-search-active .editor-search-close-btn {
    display: inline-flex;
}

.editor-search-close-btn:hover {
    background: #b30000;
}

.editor-preview-container {
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.editor-preview-container iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.editor-playlist-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin-top: 8px;
}

.editor-playlist-header {
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
}

.editor-playlist-instruction {
    margin: 0;
}

.editor-playlist-filter-input {
    flex: 1;
    min-width: 0;
}

#editChannelSongTable thead .editor-playlist-filter-input {
    width: 100%;
    box-sizing: border-box;
}

.editor-search-message {
    display: none;
    color: #bfefff;
    background: #10213a;
    border: 1px solid #2a4f7a;
    border-radius: 8px;
    padding: 10px 12px;
}

.editor-search-results-toolbar {
    margin-top: 8px;
    justify-content: flex-end;
    gap: 8px;
}

.editor-search-results-list {
    margin-top: 8px;
    flex: 1 1 auto;
    width: auto;
    height: 212px;
    min-height: 212px;
    max-height: 212px;
}

.edit-channel-name {
    flex: 0 0 auto;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
    text-align: left;
}

.editor-modal-header h3 {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Editor Tab Bar ─────────────────────────────────────────────────────── */
.editor-tab-bar {
    display: flex;
    gap: 4px;
    padding: 12px 0 0;
    border-bottom: 1px solid #0f3460;
    margin-bottom: 4px;
}

.editor-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #7ec8e3;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 4px 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-align: center;
}

.editor-tab:hover {
    color: #ffffff;
}

.editor-tab.active {
    color: #ffffff;
    border-bottom-color: #7ec8e3;
}

/* Empty state inside My Channels list */
.editor-empty-state {
    color: #7ec8e3;
    font-size: 13px;
    text-align: center;
    padding: 24px 16px;
    opacity: 0.8;
}

/* Both editor panels fill available space with internal scroll on channel list */
#editorPanelGlobal,
#editorPanelMyChannels {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#editorPanelGlobal .editor-channel-list,
#editorPanelMyChannels .editor-channel-list {
    flex: 0 1 auto;
    min-height: 0;
}

/* CSV row pinned below the active panel */
#editorCsvRow {
    flex-shrink: 0;
    padding-top: 8px;
}

.editor-section-header {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 0 0 0;
    border-top: 1px solid #0f3460;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editor-song-count {
    font-weight: 400;
    color: #7ec8e3;
    letter-spacing: 0;
}

#editChannelSongTable th .editor-song-count {
    font-size: inherit !important;
    font-weight: inherit;
    color: inherit;
}

.editor-section-header:first-child {
    border-top: none;
    margin-top: 0;
}

.editor-channels-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 0 4px 0;
    flex-wrap: nowrap;
}

.editor-header-title {
    min-width: 0;
    white-space: nowrap;
}

.editor-add-channel-btn {
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #7ec8e3;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.editor-add-channel-btn:hover {
    color: #bfefff;
}

.editor-add-channel-btn i {
    font-weight: 700;
    pointer-events: none;
}

#editChannelNameModal .editor-modal-footer {
    justify-content: center;
}

#editChannelNameModal #editChannelNameSaveBtn {
    min-width: 160px;
}

#deleteChannelBtn.edit-channel-header-delete {
    margin-left: 0;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    background: #c0392b;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#deleteChannelBtn.edit-channel-header-delete:hover {
    background: #a93226;
}

.edit-channel-name-btn {
    margin: 0;
    background: transparent !important;
    border: none !important;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
}

.editor-modal-btn.delete-channel-btn {
    background: #c0392b;
    color: #fff;
}

.editor-modal-btn.delete-channel-btn:hover {
    background: #a93226;
}

#searchBottomSheet .search-clear-btn {
    width: 18px;
    min-width: 18px;
    background: transparent;
    color: #7ec8e3;
    font-size: 20px;
}

#searchBottomSheet #searchResultsToolbar {
    display: none !important;
}

#searchBottomSheet #searchResultsCount {
    display: none !important;
}

#searchBottomSheet .search-results-layout {
    display: block;
}

#searchBottomSheet .search-results-list {
    width: 100%;
}

#editChannelAddSongBtn {
    background: #cc0000;
    color: #ffffff;
}

#editChannelAddSongBtn:hover {
    background: #b30000;
}

/* Center action icons in song tables */
.song-actions,
#editChannelSongTable .song-actions {
    text-align: center;
}

#editChannelSongTable td.song-actions {
    display: table-cell;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    padding-left: 0;
    padding-right: 0;
}

.song-actions .action-icon-btn {
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 600px) {
    #searchBottomSheet.results-visible {
        top: auto;
        height: auto;
        max-height: calc(100vh - 120px);
    }
}

    /* Song list should behave like a bottom sheet (slide up) */
    .song-list-overlay {
        top: env(safe-area-inset-top, 0px);
        left: 0;
        right: 0;
        bottom: 62px;
        background: transparent;
    }

    .song-list-overlay.active {
        align-items: flex-end;
        justify-content: stretch;
    }

    .song-list-modal {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 90px - env(safe-area-inset-top, 0px));
        max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px));
        border-radius: 12px 12px 0 0;
        border-top: 2px solid #7ec8e3;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
        animation: slideUp 0.3s ease-out;
    }

    .song-list-overlay.active .song-list-modal {
        border-radius: 12px 12px 0 0 !important;
        border-top: 2px solid #7ec8e3 !important;
    }

    @media (max-width: 600px) {
        .song-list-modal {
            max-height: calc(100vh - 86px - env(safe-area-inset-top, 0px));
            max-height: calc(100dvh - 86px - env(safe-area-inset-top, 0px));
        }

        .editor-search-row,
        .editor-playlist-header-row {
            gap: 8px;
        }

        .editor-subsection-label,
        .editor-playlist-header,
        .editor-song-count {
            font-size: 11px;
        }

        .editor-search-btn {
            width: 40px;
            height: 40px;
        }

        .editor-channels-header {
            flex-wrap: wrap;
        }

        .editor-channel-filter-input {
            flex: 1 1 100%;
            width: 100%;
            max-width: 100%;
            margin-left: 0;
        }
    }

    /* Settings: toggle switch style */
    .settings-sheet .bottom-sheet-header {
        border-bottom: 1px solid #0f3460;
    }

    .settings-sheet .bottom-sheet-header h2 {
        color: #7ec8e3;
        font-weight: 700;
    }

    .settings-sheet .bottom-sheet-content {
        padding: 14px 16px;
    }

    .settings-sheet button {
        min-width: 80px;
    }

    .settings-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .settings-profile-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 0;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(15, 52, 96, 0.6);
    }

    .settings-profile-image {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, #7ec8e3 0%, #2f6e9a 100%);
        color: #ffffff;
        font-size: 24px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        flex-shrink: 0;
    }

    .settings-profile-text {
        min-width: 0;
    }

    .settings-profile-name {
        color: #ffffff;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.2;
    }

    .settings-profile-role {
        color: #c5d6e2;
        font-weight: 400;
        font-size: 13px;
        margin-top: 3px;
    }

    .settings-screen-row {
        margin-top: 0;
        padding-top: 10px;
        border-top: none;
    }

    .settings-screen-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }

    .settings-screen-title {
        color: #ffffff;
        font-weight: 600;
        margin-bottom: 0;
    }

    .settings-account-header {
        margin-bottom: 8px;
    }

    .settings-account-change-btn {
        margin-left: auto;
        border: 1px solid rgba(126, 200, 227, 0.45);
        background: rgba(126, 200, 227, 0.15);
        color: #bfefff;
        border-radius: 8px;
        padding: 7px 14px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }

    .settings-account-change-btn:hover,
    .settings-account-change-btn:active {
        background: rgba(126, 200, 227, 0.28);
    }

    .settings-admin-row {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid rgba(15, 52, 96, 0.6);
    }

    .settings-screen-mode-row {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 0 auto;
    }

    .settings-screen-mode-label {
        color: #ffffff;
        font-weight: 600;
        font-size: 13px;
    }

    .settings-screen-options {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
    }

    .settings-screen-options::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .settings-screen-options::-webkit-scrollbar-thumb {
        background: rgba(126, 200, 227, 0.5);
        border-radius: 999px;
    }

    .settings-screen-options::-webkit-scrollbar-track {
        background: rgba(15, 52, 96, 0.25);
    }

    .settings-presets-row {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid rgba(15, 52, 96, 0.6);
    }

    .settings-presets-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .settings-presets-set-btn {
        border: 1px solid rgba(126, 200, 227, 0.45);
        background: rgba(126, 200, 227, 0.15);
        color: #bfefff;
        border-radius: 8px;
        padding: 7px 14px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }

    .settings-presets-set-btn:hover,
    .settings-presets-set-btn:active {
        background: rgba(126, 200, 227, 0.28);
    }

    .settings-divider {
        border: none;
        border-top: 1px solid rgba(126, 200, 227, 0.2);
        margin: 14px 0 0;
    }

    .settings-api-counter {
        margin-top: 12px;
        color: #8ea5b4;
        font-size: 12px;
        text-align: center;
    }

    .settings-api-counter.warning {
        color: #e74c3c;
        font-weight: 700;
    }

    .settings-copyright {
        margin-top: 12px;
        margin-bottom: 4px;
        color: #8ea5b4;
        font-size: 12px;
        text-align: center;
    }

    .screen-option-btn {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        border-radius: 8px;
        border: 2px solid rgba(255, 255, 255, 0.25);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
    }

    .screen-option-btn i {
        pointer-events: none;
    }

    .screen-option-btn.is-selected {
        border-color: #7ec8e3;
        box-shadow: 0 0 0 2px rgba(126, 200, 227, 0.5);
    }

    .screen-option-btn:active {
        transform: scale(0.96);
    }

    .settings-screen-row.colors-disabled .settings-screen-options {
        opacity: 0.42;
        filter: grayscale(0.35);
        pointer-events: none;
    }

    .account-modal-overlay {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.55);
        z-index: 2200;
        padding: 16px;
        box-sizing: border-box;
    }

    .account-modal-overlay.active {
        display: flex;
    }

    .preset-modal-overlay {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.55);
        z-index: 2200;
        padding: 16px;
        box-sizing: border-box;
    }

    .preset-modal-overlay.active {
        display: flex;
    }

    .preset-modal {
        width: min(420px, 100%);
        background: #1a1a2e;
        border: 1px solid rgba(126, 200, 227, 0.45);
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
        padding: 14px;
    }

    .preset-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }

    .preset-modal-header h3 {
        margin: 0;
        color: #7ec8e3;
        font-size: 18px;
    }

    .preset-modal-close {
        border: none;
        background: transparent;
        color: #bfefff;
        font-size: 18px;
        cursor: pointer;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .preset-modal-form {
        display: grid;
        gap: 10px;
        margin-bottom: 14px;
    }

    .preset-modal-row {
        display: grid;
        grid-template-columns: 78px 1fr;
        align-items: center;
        gap: 10px;
    }

    .preset-modal-row label {
        color: #ffffff;
        font-weight: 600;
        font-size: 13px;
    }

    .preset-modal-row select {
        width: 100%;
        background: rgba(16, 19, 34, 0.98);
        border: 1px solid rgba(126, 200, 227, 0.32);
        border-radius: 8px;
        color: #f4f8ff;
        padding: 8px 10px;
        font-size: 14px;
        font-family: inherit;
    }

    .preset-save-btn {
        width: 100%;
        border: none;
        border-radius: 8px;
        padding: 11px 14px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        background: #7ec8e3;
        color: #1a1a2e;
    }

    .preset-save-btn:active {
        transform: translateY(1px);
    }

    .account-modal {
        width: min(420px, 100%);
        background: #1a1a2e;
        border: 1px solid rgba(126, 200, 227, 0.45);
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
        padding: 14px;
    }

    .admin-users-modal {
        width: min(760px, 100%);
        height: min(560px, calc(100dvh - 40px));
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .account-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }

    .account-modal-header h3 {
        margin: 0;
        color: #7ec8e3;
        font-size: 18px;
    }

    .account-modal-close {
        border: none;
        background: transparent;
        color: #bfefff;
        font-size: 18px;
        cursor: pointer;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .account-modal-profile {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(15, 52, 96, 0.6);
    }

    .account-modal-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .admin-users-toolbar {
        margin-bottom: 10px;
    }

    .admin-users-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    .admin-users-filter-input {
        flex: 1 1 0;
        min-width: 0;
        height: 44px;
        padding: 8px 12px;
        font-size: 14px;
        background: #ffffff;
        color: #0f3460;
        border: 1px solid rgba(15, 52, 96, 0.4);
        border-radius: 8px;
        box-sizing: border-box;
        margin: 0;
    }

    .admin-mail-blast-open-btn {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(126, 200, 227, 0.12);
        border: 1px solid rgba(126, 200, 227, 0.35);
        border-radius: 8px;
        color: #7ec8e3;
        font-size: 18px;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
    }

    .admin-mail-blast-open-btn:hover {
        background: rgba(126, 200, 227, 0.22);
        border-color: rgba(126, 200, 227, 0.55);
    }

    .admin-users-feedback {
        min-height: 18px;
        margin-bottom: 10px;
        font-size: 13px;
        color: #8ea5b4;
    }

    .admin-users-feedback.is-success {
        color: #7dd3a6;
    }

    .admin-users-feedback.is-error {
        color: #ff8da1;
    }

    .admin-users-sort-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
    }

    .admin-sort-label {
        font-size: 11px;
        color: #8ea5b4;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .admin-sort-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 600;
        background: rgba(126, 200, 227, 0.08);
        border: 1px solid rgba(126, 200, 227, 0.2);
        border-radius: 999px;
        color: #a8bfd0;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
    }

    .admin-sort-btn:hover {
        background: rgba(126, 200, 227, 0.18);
        border-color: rgba(126, 200, 227, 0.45);
        color: #e8f4ff;
    }

    .admin-sort-btn.aum-sort-active-asc,
    .admin-sort-btn.aum-sort-active-desc {
        background: rgba(126, 200, 227, 0.22);
        border-color: rgba(126, 200, 227, 0.6);
        color: #7ec8e3;
    }

    .admin-users-table-wrap {
        overflow-y: auto;
        flex: 1 1 0;
        min-height: 0;
    }

    .admin-users-table {
        width: 100%;
        border-collapse: collapse;
    }

    .admin-users-table .aum-row:not(:last-child) {
        border-bottom: 1px solid rgba(126, 200, 227, 0.12);
    }

    .admin-users-empty {
        margin: 0;
        padding: 18px 8px;
        text-align: center;
        color: #8ea5b4;
        font-size: 13px;
    }

    .aum-user-cell {
        padding: 10px 8px 10px 0;
        vertical-align: middle;
    }

    .aum-username {
        color: #e8f4ff;
        font-size: 14px;
        font-weight: 700;
    }

    .aum-self-tag {
        font-weight: 400;
        font-size: 12px;
        color: #8ea5b4;
    }

    .aum-email {
        color: #a8bfd0;
        font-size: 12px;
        margin-top: 2px;
    }

    .aum-meta {
        color: #8ea5b4;
        font-size: 11px;
        margin-top: 3px;
    }

    .aum-role-cell {
        padding: 10px 0 10px 8px;
        vertical-align: middle;
        text-align: right;
        white-space: nowrap;
    }

    .aum-badge-btn {
        border-radius: 999px;
        padding: 4px 10px;
        background: rgba(126, 200, 227, 0.12);
        color: #7ec8e3;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: 1px solid rgba(126, 200, 227, 0.3);
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
    }

    .aum-badge-btn:not(:disabled):hover {
        background: rgba(126, 200, 227, 0.26);
        border-color: rgba(126, 200, 227, 0.6);
    }

    .aum-badge-btn.aum-badge-self {
        opacity: 0.5;
        cursor: default;
    }

    /* Edit User modal */
    .edit-user-modal {
        width: min(420px, 100%);
        background: #1a1a2e;
        border: 1px solid rgba(126, 200, 227, 0.45);
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .edit-user-info {
        padding: 10px;
        background: rgba(15, 52, 96, 0.35);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .edit-user-name-display {
        color: #e8f4ff;
        font-size: 15px;
        font-weight: 700;
    }

    .edit-user-email-display {
        color: #a8bfd0;
        font-size: 13px;
        margin-top: 2px;
    }

    .edit-user-role-row {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: 0 !important;
    }

    .edit-user-role-label {
        font-size: 13px;
        font-weight: 600;
        color: #bfefff;
    }

    .edit-user-role-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .aum-role-select {
        flex: 0 0 120px;
        width: 120px;
        min-width: 120px;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid rgba(15, 52, 96, 0.4);
        background: #ffffff;
        color: #0f3460;
        font-size: 14px;
        box-sizing: border-box;
    }

    .edit-user-save-btn {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        padding-left: 18px;
        padding-right: 18px;
    }

    .edit-user-delete-btn {
        display: block;
        width: 80%;
        margin: 4px auto 0;
    }

    /* Delete user/account confirm modals */
    .delete-confirm-modal {
        width: min(400px, 100%);
        background: #1a1a2e;
        border: 1px solid rgba(255, 140, 166, 0.45);
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .delete-confirm-message {
        color: #e8f4ff;
        font-size: 14px;
        line-height: 1.5;
        margin: 0;
    }

    .delete-confirm-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Mail blast modal */
    .admin-mail-blast-modal {
        width: min(540px, 100%);
        background: #1a1a2e;
        border: 1px solid rgba(126, 200, 227, 0.45);
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        gap: 0;
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
    }

    .admin-mail-blast-modal .auth-field {
        margin-bottom: 0;
    }

    .admin-mail-blast-modal .auth-field input {
        background: #ffffff;
        color: #0f3460;
        border: 1px solid rgba(15, 52, 96, 0.4);
    }

    .admin-mail-blast-modal .auth-field input:focus {
        border-color: #0f3460;
    }

    .mail-blast-textarea {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        background: #ffffff;
        color: #0f3460;
        border: 1px solid rgba(15, 52, 96, 0.4);
        border-radius: 8px;
        font-size: 13px;
        font-family: inherit;
        resize: vertical;
        line-height: 1.45;
    }

    .mail-blast-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
    }

    .mail-blast-actions > button {
        flex: 1;
    }

    .mail-blast-cancel-btn {
        border: 1px solid rgba(126, 200, 227, 0.4);
        background: transparent;
        color: #7ec8e3;
        border-radius: 8px;
        padding: 12px 14px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
    }

    .mail-blast-cancel-btn:hover {
        background: rgba(126, 200, 227, 0.1);
        border-color: rgba(126, 200, 227, 0.6);
    }

    .account-action-btn {
        width: 100%;
        border: none;
        border-radius: 8px;
        padding: 12px 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .account-upgrade-btn {
        background: #7ec8e3;
        color: #1a1a2e;
    }

    .account-delete-btn {
        background: #462133;
        color: #ffd3e0;
        border: 1px solid rgba(255, 140, 166, 0.35);
    }

    .settings-toggle-label {
        color: #ffffff;
        font-weight: 600;
    }

    .settings-brave-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .settings-brave-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, #ff5f1f 0%, #ff3b1f 100%);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 0 8px rgba(255, 95, 31, 0.35);
        flex-shrink: 0;
    }

    .settings-brave-row {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(15, 52, 96, 0.6);
    }

    .settings-brave-btn {
        color: #7ec8e3;
        font-weight: 600;
        font-size: 0.85rem;
        text-decoration: none;
        background: rgba(126, 200, 227, 0.1);
        border: 1px solid rgba(126, 200, 227, 0.3);
        border-radius: 8px;
        padding: 6px 16px;
        transition: background 0.2s, border-color 0.2s;
        white-space: nowrap;
    }

    .settings-brave-btn:hover,
    .settings-brave-btn:active {
        background: rgba(126, 200, 227, 0.22);
        border-color: rgba(126, 200, 227, 0.55);
    }

    .settings-brave-note {
        margin: 8px 0 0 0;
        font-size: 0.92rem;
        color: rgba(255, 255, 255, 0.92);
        font-style: italic;
        line-height: 1.4;
    }

    .settings-switch {
        position: relative;
        width: 52px;
        height: 30px;
        display: inline-block;
    }

    .settings-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .settings-slider {
        position: absolute;
        inset: 0;
        cursor: pointer;
        background: #2d3f56;
        border: 1px solid #4d6f8f;
        border-radius: 999px;
        transition: 0.2s;
    }

    .settings-slider::before {
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: 0.2s;
    }

    .settings-switch input:checked + .settings-slider {
        background: #0f79c9;
        border-color: #7ec8e3;
    }

    .settings-switch input:checked + .settings-slider::before {
        transform: translateX(22px);
    }

/* ====== PROMO CAROUSEL ====== */
.promo-carousel {
    display: flex;
    width: 100%;
    overflow: visible;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--promo-top, 520px);
    bottom: 64px;
    margin: 0 auto;
    z-index: 998;
    background: transparent;
    touch-action: pan-y;
    padding: 0 4px 6px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.promo-carousel .promo-track {
    flex: 1 1 auto;
    width: min(100%, 1000px);
    max-height: calc(100% - 20px);
}

.promo-track {
    display: flex;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    flex: 1;
    min-height: 0;
}

.promo-slide {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 4px 2px;
    height: calc(100% - 8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

@media (min-height: 710px) {
    .promo-inner {
        flex-direction: column;
        text-align: center;
    }
    .promo-header {
        font-size: 16px;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    .promo-body {
        font-size: 14px;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    .promo-image {
        width: 64px;
        height: 64px;
    }
}

@media (min-height: 880px) {
    .promo-header {
        font-size: 18px;
        margin-top: 6px;
        margin-bottom: 6px;
    }
    .promo-body {
        font-size: 16px;
        margin-top: 6px;
        margin-bottom: 6px;
    }
}

.promo-placeholder-inner {
    border-style: dashed;
}

.promo-goldadder .promo-inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.promo-goldadder .promo-text {
    align-items: center;
}

.promo-goldadder .promo-btn {
    align-self: center;
}

.promo-image {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
}

.promo-image-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.promo-placeholder-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    flex-shrink: 0;
    background: #eef6ff;
    border-radius: 8px;
    border: 1px dashed #0f3460;
}

.promo-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.promo-header {
    margin: 4px 0;
    float: none;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promo-body {
    margin: 4px 0;
    font-size: 14px;
    color: #ffffff;
    line-height: 1.35;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-btn {
    align-self: center;
    margin-top: 4px;
    padding: 7px 18px;
    background: #7ec8e3;
    color: #0f3460;
    border: 1px solid #0f3460;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.promo-btn:hover,
.promo-btn:active {
    background: #5ab5d0;
}

.promo-btn-goldadder {
    background: goldenrod;
    color: #000000;
}

.promo-btn-goldadder:hover,
.promo-btn-goldadder:active {
    background: #c69214;
}

@media (max-width: 420px) {
    .radio-container {
        height: auto;
    }

    .radio-body {
        height: auto;
        padding: 6px;
    }

    .video-container {
        position: relative;
        z-index: 1002;
    }

    .knobs {
        flex: 0 0 auto;
        margin-top: 2px;
    }

    .video-container,
    .frequency-display {
        height: 228px !important;
        min-height: 228px;
        margin: 4px auto;
    }

    .controls {
        padding-top: 2px;
        padding-bottom: 6px;
    }

    .channel-dial-track {
        height: 26px;
    }

    .channel-name.current {
        font-size: 19px;
    }

    .channel-preset-btn {
        height: 54px;
    }
}

@media (max-width: 420px) {
    .promo-carousel .promo-inner,
    .promo-carousel .promo-goldadder .promo-inner {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .promo-carousel .promo-text,
    .promo-carousel .promo-goldadder .promo-text {
        align-items: flex-start;
    }

    .promo-carousel.is-compact {
        top: var(--promo-top, 520px);
    }

    .promo-carousel.is-compact .promo-inner {
        padding: 0 8px;
        align-items: center;
    }

    .promo-carousel.is-compact .promo-image {
        margin-top: 0;
    }

    .promo-carousel.is-compact .promo-text {
        gap: 0 !important;
    }

    .promo-carousel.is-compact .promo-text > .promo-header,
    .promo-carousel.is-compact .promo-text > .promo-body,
    .promo-carousel.is-compact .promo-text > .promo-btn {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .promo-carousel.is-compact .promo-text > .promo-header {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1;
    }

    .promo-carousel.is-compact .promo-text > .promo-body {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .promo-carousel.is-compact .promo-text > * + * {
        margin-top: 0 !important;
    }

    .promo-carousel .promo-btn {
        display: none !important;
    }

    .promo-carousel .promo-slide {
        cursor: pointer;
    }
}

.promo-dots {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    gap: 7px;
    margin-top: 0;
    margin-bottom: 4px;
}

.promo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(126, 200, 227, 0.28);
    transition: background 0.25s, transform 0.25s;
    cursor: pointer;
}

.promo-dot.active {
    background: #7ec8e3;
    transform: scale(1.35);
}

/* ====== WARNING MODALS (Delete Channel / Delete Song) ====== */
.warning-modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2100;
    padding: 16px;
    box-sizing: border-box;
}

.warning-modal-overlay.active {
    display: flex;
}

.warning-modal {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: slideUp 0.25s ease-out;
}

.warning-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #c0392b;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.warning-modal-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.warning-modal-body {
    padding: 20px 16px;
}

.warning-modal-body p {
    margin: 0;
    color: #000;
    font-size: 15px;
    line-height: 1.5;
}

.warning-modal-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 16px 20px;
}

.warning-modal-btn {
    height: 42px;
    min-width: 140px;
    padding: 0 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: #c0392b;
    color: #fff;
}

.warning-modal-btn:hover {
    background: #a93226;
}

.warning-modal-btn.warning-cancel-btn {
    background: #666;
    color: #fff;
}

.warning-modal-btn.warning-cancel-btn:hover {
    background: #555;
}

.upload-summary-overlay .warning-modal-header {
    background: #0f3460;
}

.upload-summary-modal {
    max-width: 560px;
}

.upload-summary-body {
    max-height: 55vh;
    overflow: auto;
}

.upload-summary-text {
    margin: 0;
    color: #000;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.promo-learn-more-header {
    background: #0f3460;
}

.promo-learn-more-modal {
    max-width: 620px;
}

.promo-learn-more-body {
    max-height: min(62vh, 520px);
    overflow: auto;
}

.promo-learn-more-body h4 {
    margin: 12px 0 6px;
    font-size: 15px;
    color: #0f3460;
}

.promo-learn-more-body ul {
    margin: 0 0 10px 18px;
    padding: 0;
    color: #111;
    font-size: 14px;
    line-height: 1.45;
}

.promo-learn-more-note {
    margin-top: 10px !important;
    font-weight: 700;
    color: #0f3460 !important;
}

.upload-summary-print-btn {
    background: #7ec8e3;
    color: #1a1a2e;
}

.upload-summary-print-btn:hover {
    background: #5ab5d0;
}

@media print {
    body * {
        visibility: hidden !important;
    }

    #uploadSummaryModal.active,
    #uploadSummaryModal.active * {
        visibility: visible !important;
    }

    #uploadSummaryModal.active {
        position: fixed !important;
        inset: 0 !important;
        background: #fff !important;
        display: flex !important;
        padding: 0 !important;
    }

    #uploadSummaryModal .upload-summary-modal {
        width: 100% !important;
        max-width: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    #uploadSummaryModal .warning-modal-close,
    #uploadSummaryModal .warning-modal-footer {
        display: none !important;
    }
}

/* Prevent iOS/Safari focus zoom on form controls. */
@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ====== TOAST NOTIFICATIONS ====== */
#toastContainer {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast-message {
    background: #323232;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

.toast-message.show {
    opacity: 1;
    transform: translateY(0);
}

/* ====== CONSISTENT MENU WIDTHS ====== */
#channelsOverlay .song-list-modal,
#songListOverlay .song-list-modal,
#searchBottomSheet,
#settingsBottomSheet {
    width: min(100%, 1000px);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1000px) {
    #channelsOverlay .song-list-modal,
    #songListOverlay .song-list-modal,
    #searchBottomSheet,
    #settingsBottomSheet {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ── Nav locked indicator ─────────────────────────────────────── */
.nav-locked {
    position: relative;
    opacity: 0.6;
}

.nav-locked::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    position: absolute;
    top: 4px;
    right: 4px;
    color: #7ec8e3;
    background: rgba(26, 26, 46, 0.85);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Locked feature teaser panels for Search/Editor when account is not Pro */
.feature-lock-panel {
    margin: 14px;
    padding: 18px 16px;
    border-radius: 12px;
    border: 1px solid rgba(126, 200, 227, 0.32);
    background: linear-gradient(180deg, rgba(20, 41, 75, 0.9), rgba(16, 31, 58, 0.92));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    color: #dcefff;
}

.feature-lock-panel h3 {
    display: block;
    margin: 0 0 10px;
    color: #bfefff;
    font-size: 18px;
}

.feature-lock-desc {
    display: block;
    margin: 0;
    line-height: 1.5;
    font-size: 14px;
    color: #d8e8f5;
}

.feature-lock-btn {
    margin-top: 14px;
    width: 100%;
}

#searchBottomSheet.locked-preview .search-tools-row,
#searchBottomSheet.locked-preview #searchResultsHeader,
#searchBottomSheet.locked-preview #messageContainer,
#searchBottomSheet.locked-preview #previewContainer,
#searchBottomSheet.locked-preview .search-results-layout,
#searchBottomSheet.locked-preview .search-form-divider,
#searchBottomSheet.locked-preview #addSongForm {
    display: none !important;
}

#searchBottomSheet.locked-preview #searchLockedPanel {
    display: block !important;
}

#songListOverlay.locked-preview .editor-options {
    display: none !important;
}

#songListOverlay.locked-preview #editorLockedPanel {
    display: block !important;
}

#songListOverlay.locked-preview .song-list-modal {
    max-height: fit-content;
}

@media (max-width: 400px) {
    .edit-channel-nav-btn {
        padding: 4px 5px;
    }
    #editChannelModal .editor-modal-header {
        padding: 10px 10px;
    }
    .edit-channel-name-btn {
        padding: 4px 5px;
    }
}

/* ── Auth / Upgrade modal overlays ───────────────────────────── */
.auth-modal-overlay,
.upgrade-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.auth-modal-overlay.active,
.upgrade-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Auth modal box ───────────────────────────────────────────── */
.auth-modal {
    width: min(440px, 100%);
    background: #1a1a2e;
    border: 1px solid rgba(126, 200, 227, 0.45);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    padding: 20px 20px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}

.auth-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.auth-modal-header h3 {
    margin: 0;
    color: #7ec8e3;
    font-size: 18px;
}

.auth-modal-close {
    border: none;
    background: transparent;
    color: #bfefff;
    font-size: 18px;
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s;
}

.auth-modal-close:hover {
    background: rgba(126, 200, 227, 0.12);
}

/* ── Auth tabs ────────────────────────────────────────────────── */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid rgba(126, 200, 227, 0.2);
    margin-bottom: 18px;
}

.auth-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: #8ea5b4;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 4px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.auth-tab:hover {
    color: #bfefff;
}

.auth-tab-active {
    color: #7ec8e3;
    border-bottom-color: #7ec8e3;
}

/* ── Auth panels ──────────────────────────────────────────────── */
.auth-panel {
    display: none;
}

.auth-panel-active {
    display: block;
}

.auth-panel-desc {
    color: #8ea5b4;
    font-size: 13px;
    margin: 0 0 16px;
    line-height: 1.5;
}

/* ── Form fields ──────────────────────────────────────────────── */
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.auth-field label {
    font-size: 13px;
    font-weight: 600;
    color: #bfefff;
}

.auth-field input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(15, 52, 96, 0.55);
    border: 1px solid rgba(126, 200, 227, 0.3);
    border-radius: 8px;
    color: #e8f4ff;
    font-size: 15px;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.15s;
}

.auth-field input:focus {
    border-color: #7ec8e3;
}

.auth-field small {
    font-size: 11px;
    color: #8ea5b4;
}

/* ── Errors ───────────────────────────────────────────────────── */
.auth-error {
    font-size: 13px;
    color: #ff6b81;
    min-height: 18px;
    margin-bottom: 10px;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.auth-submit-btn {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    background: #7ec8e3;
    color: #1a1a2e;
    transition: opacity 0.15s, transform 0.1s;
    margin-top: 2px;
}

.auth-submit-btn:hover {
    opacity: 0.9;
}

.auth-submit-btn:active {
    transform: translateY(1px);
}

.auth-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.auth-link-btn {
    border: none;
    background: transparent;
    color: #7ec8e3;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline-block;
}

.auth-link-btn:hover {
    color: #bfefff;
}

.auth-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
}

.auth-reg-type-group {
    margin: 8px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(126, 200, 227, 0.2);
    border-radius: 10px;
    background: rgba(15, 52, 96, 0.28);
    display: grid;
    gap: 8px;
}

.auth-reg-type-label {
    font-size: 13px;
    font-weight: 700;
    color: #bfefff;
}

.auth-reg-type-option {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d8e8f5;
    font-size: 13px;
}

.auth-reg-type-option input[type="radio"] {
    accent-color: #7ec8e3;
}

.auth-reg-pro-plans {
    margin: 0 0 12px;
    display: grid;
    gap: 10px;
}

.auth-reg-pro-desc {
    margin: 0;
    color: #9bb3c4;
    font-size: 12px;
    line-height: 1.5;
    transition: color 0.15s ease;
}

.auth-reg-pro-desc.pro-selected {
    color: #dcefff;
}

.auth-reg-pro-plan-grid {
    display: grid;
    gap: 8px;
}

.auth-reg-pro-plan-grid .upgrade-plan-card {
    margin: 0;
}

/* ── Upgrade modal box ────────────────────────────────────────── */
.upgrade-modal {
    width: min(420px, 100%);
    background: #1a1a2e;
    border: 1px solid rgba(126, 200, 227, 0.45);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    padding: 20px 20px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}

.upgrade-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.upgrade-modal-header h3 {
    margin: 0;
    color: #7ec8e3;
    font-size: 18px;
}

.upgrade-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Upgrade feature list ─────────────────────────────────────── */
.upgrade-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upgrade-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #e8f4ff;
    line-height: 1.45;
}

.upgrade-feature-list li i {
    color: #7ec8e3;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Upgrade price row (removed — replaced by plan cards) ────── */

/* ── Upgrade plan cards ───────────────────────────────────────── */
.upgrade-plans {
    display: flex;
    gap: 10px;
    padding: 4px 0 2px;
}

.upgrade-plan-card {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 6px 14px;
    border: 2px solid rgba(126, 200, 227, 0.22);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: rgba(126, 200, 227, 0.04);
    overflow: visible;
    gap: 0;
}

.upgrade-plan-card:has(.upgrade-plan-radio:checked) {
    border-color: #7ec8e3;
    background: rgba(126, 200, 227, 0.12);
}

.upgrade-plan-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.upgrade-plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #7ec8e3;
    color: #1a1a2e;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.upgrade-plan-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.upgrade-plan-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #8ea5b4;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 2px;
}

.upgrade-plan-price {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #e8f4ff;
    line-height: 1;
}

.upgrade-plan-period {
    font-size: 12px;
    font-weight: 400;
    color: #8ea5b4;
}

.upgrade-plan-savings {
    display: block;
    font-size: 11px;
    color: #7ec8e3;
    margin-top: 2px;
}

/* ── Upgrade pay button ───────────────────────────────────────── */
.upgrade-pay-btn {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 13px 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background: #7ec8e3;
    color: #1a1a2e;
    transition: opacity 0.15s, transform 0.1s;
}

.upgrade-pay-btn:hover {
    opacity: 0.9;
}

.upgrade-pay-btn:active {
    transform: translateY(1px);
}

.upgrade-pay-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Upgrade note ─────────────────────────────────────────────── */
.upgrade-note {
    font-size: 12px;
    color: #8ea5b4;
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* ── Upgrade error ────────────────────────────────────────────── */
.upgrade-error {
    font-size: 13px;
    color: #ff6b81;
    min-height: 18px;
    text-align: center;
}

/* ── Account modal: logout button ─────────────────────────────── */
.account-logout-btn {
    background: rgba(126, 200, 227, 0.1);
    color: #7ec8e3;
    border: 1px solid rgba(126, 200, 227, 0.3);
}

.account-logout-btn:hover {
    background: rgba(126, 200, 227, 0.2);
}

/* ── My Channels section in Channels overlay ─────────────────── */
.my-channels-section {
    margin-top: 10px;
    border-top: 1px solid rgba(126, 200, 227, 0.2);
    padding-top: 6px;
}

.my-channels-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px 4px;
}

.global-channels-header {
    border-top: 1px solid rgba(126, 200, 227, 0.2);
    margin-top: 2px;
    padding-top: 8px;
}

.my-channels-title {
    font-size: 13px;
    font-weight: 700;
    color: #7ec8e3;
    display: flex;
    align-items: center;
    gap: 6px;
}

.my-channels-title i {
    font-size: 11px;
}

.my-channels-add-btn {
    border: none;
    background: rgba(126, 200, 227, 0.12);
    color: #7ec8e3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}

.my-channels-add-btn:hover {
    background: rgba(126, 200, 227, 0.25);
}

.my-channels-empty {
    font-size: 13px;
    color: #8ea5b4;
    text-align: center;
    padding: 8px 12px;
    margin: 0;
}

.my-channels-search-row {
    padding-top: 2px;
    padding-bottom: 6px;
}

/* ── Personal channel table rows ─────────────────────────────── */
#personalChannelsTable {
    width: 100%;
    border-collapse: collapse;
    display: block;
    max-height: 26vh;
    overflow-y: auto;
}

#personalChannelsTable tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#channelsTable tbody tr,
#personalChannelsTable tr {
    min-height: 44px;
}

#personalChannelsTable tr {
    border-bottom: 1px solid rgba(15, 52, 96, 0.4);
}

#personalChannelsTable tr.current-channel .channel-name-btn {
    color: #7ec8e3;
    font-weight: 700;
}

.personal-channel-name-btn {
    background: transparent;
    border: none;
    color: #e8f4ff;
    font-size: 14px;
    text-align: left;
    padding: 10px 12px;
    width: 100%;
    cursor: pointer;
}

.personal-channel-name-btn:hover {
    color: #7ec8e3;
}

.personal-channel-actions-cell {
    white-space: nowrap;
    padding: 0 6px 0 0;
    text-align: right;
}

.personal-ch-action-btn {
    border: none;
    background: transparent;
    color: #8ea5b4;
    font-size: 13px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    vertical-align: middle;
}

.personal-ch-action-btn:hover {
    background: rgba(126, 200, 227, 0.12);
    color: #7ec8e3;
}

.personal-ch-rename-btn:hover {
    color: #bfefff;
}

/* ── Copy-to-my-channels button on global channel rows ───────── */
.channel-copy-cell {
    padding: 0 4px 0 0;
    text-align: right;
    white-space: nowrap;
}

.copy-to-my-btn {
    opacity: 0.55;
}

.copy-to-my-btn:hover {
    opacity: 1;
    background: rgba(126, 200, 227, 0.12);
    color: #7ec8e3;
}

/* ── Personal Channel Name Modal ─────────────────────────────── */
.personal-channel-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 9100;
}

.personal-channel-modal {
    width: min(380px, 100%);
}

/* ── Personal Channel Editor Modal ───────────────────────────── */
.personal-editor-overlay.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 9100;
}

.personal-editor-modal {
    width: min(480px, 100%);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}

.personal-editor-add-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.personal-editor-divider {
    border: none;
    border-top: 1px solid rgba(126, 200, 227, 0.18);
    margin: 14px 0;
}

/* ── Personal editor song list ───────────────────────────────── */
.personal-editor-song-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.personal-editor-empty {
    font-size: 13px;
    color: #8ea5b4;
    text-align: center;
    padding: 10px 0;
    margin: 0;
}

.personal-editor-song-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px 7px 4px;
    border-radius: 6px;
    transition: background 0.12s;
}

.personal-editor-song-row:hover {
    background: rgba(126, 200, 227, 0.07);
}

.personal-editor-song-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.personal-editor-song-artist {
    font-size: 12px;
    color: #8ea5b4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.personal-editor-song-title {
    font-size: 14px;
    color: #e8f4ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.personal-song-delete-btn:hover {
    color: #ff6b81;
    background: rgba(255, 107, 129, 0.12);
}

/* ── Personal editor footer ──────────────────────────────────── */
.personal-editor-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(126, 200, 227, 0.18);
    display: flex;
    justify-content: flex-end;
}

.personal-editor-delete-ch-btn {
    border: none;
    background: transparent;
    color: #ff6b81;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}

.personal-editor-delete-ch-btn:hover {
    background: rgba(255, 107, 129, 0.12);
}

.startup-splash {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 14% 18%, rgba(126, 200, 227, 0.22), transparent 36%),
        radial-gradient(circle at 84% 84%, rgba(126, 200, 227, 0.12), transparent 34%),
        linear-gradient(160deg, rgba(8, 14, 30, 0.98), rgba(17, 28, 54, 0.98));
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.startup-splash.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.startup-splash-card {
    width: min(420px, calc(100vw - 36px));
    padding: 24px 22px 18px;
    border-radius: 16px;
    border: 1px solid rgba(126, 200, 227, 0.34);
    background: linear-gradient(180deg, rgba(12, 24, 50, 0.93), rgba(7, 16, 34, 0.93));
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(126, 200, 227, 0.12) inset;
    text-align: center;
}

.startup-splash-logo {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid rgba(126, 200, 227, 0.46);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    object-fit: cover;
}

.startup-splash-title {
    margin-top: 12px;
    color: #ecf9ff;
    font-size: clamp(24px, 4.6vw, 30px);
    font-weight: 700;
    letter-spacing: 0.35px;
}

.startup-splash-subtitle {
    margin-top: 8px;
    color: #94c9df;
    font-size: 14px;
}

.startup-splash-ellipsis {
    display: inline-block;
    min-width: 1.6em;
    text-align: left;
}

.startup-splash-ellipsis::after {
    content: '.';
    animation: startupEllipsisSteps 1.2s steps(1, end) infinite;
}

@keyframes startupEllipsisSteps {
    0% {
        content: '.';
    }
    25% {
        content: '..';
    }
    50% {
        content: '...';
    }
    75% {
        content: '';
    }
    100% {
        content: '';
    }
}

.startup-splash-footer {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(126, 200, 227, 0.2);
    color: rgba(191, 233, 248, 0.78);
    font-size: 12px;
}