/* vim:set tabstop=8 softtabstop=8 shiftwidth=8 noexpandtab: */

/**
 *
 * LICENSE: GNU Affero General Public License, version 3 (AGPL-3.0-or-later)
 * Copyright Ampache.org, 2001-2024
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 */

/* --------------------------
   General style rules
   -------------------------- */

:root {
    color-scheme: dark;
    accent-color: #ff9d00;
}

body {
    color: #fff;
    background-color: #222;
    height: 90%;
}

.error {
    color: #c33;
}

a {
    color: #ff9d00;
}

a:hover {
    color: #ffc466;
}

hr {
    border-top-color: #eee;
}

input[type=password],
input[type=text],
input[type=checkbox],
input[type=radio],
input[type=url],
input[type=year],
select,
textarea {
    background-color: hsl(0, 0%, 10%);
    background-image: linear-gradient(to top, hsl(0, 0%, 12%), hsl(0, 0%, 8%));
    border-color: hsl(0, 0%, 30%);
}

button,
input[type=button],
input[type=submit],
.editdialogstyle.ui-dialog .ui-dialog-buttonset button {
    background-image: linear-gradient(to top, #ff9d00, #cc6200);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #fff;
}

button:hover,
button:focus,
input[type=button]:hover,
input[type=button]:focus,
input[type=submit]:hover,
input[type=submit]:focus,
.editdialogstyle.ui-dialog .ui-dialog-buttonset button:hover {
    background-color: #cc6200;
}

button:focus:active,
input[type=button]:focus:active,
input[type=submit]:focus:active {
    box-shadow: inset 0 0 3px #000, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.edit_dialog_content input[type=text],
.edit_dialog_content select {
    color: #fff;
}

.edit_dialog_content input:focus,
.edit_dialog_content select:focus {
    color: #555;
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ffc763;
}

.playlistdialogstyle.ui-dialog .ui-dialog-content,
.sharedialogstyle.ui-dialog .ui-dialog-content,
.playlistdialogstyle.ui-widget-content a,
.editdialogstyle.ui-dialog.ui-widget-content a,
.broadcastsdialogstyle.ui-widget-content a,
.sharedialogstyle.ui-widget-content a {
    background-color: #222;
    color: #999;
}

.editdialogstyle.ui-dialog.ui-widget-content a,
.editdialogstyle.ui-dialog.ui-widget-content a:hover {
    background-color: unset;
}

.editdialogstyle.ui-dialog .ui-dialog-titlebar,
.editdialogstyle.ui-dialog.ui-widget-content a:hover,
.playlistdialogstyle.ui-widget-content a:hover,
.broadcastsdialogstyle.ui-widget-content a:hover,
.sharedialogstyle.ui-widget-content a:hover {
    color: #fff;
}

.ui-icon-close {
    background-color: #f0f0f0;
}

/* --------------------------
   Main
   -------------------------- */
#ajax-loading {
    color: #ff9d00;
    background-image: url('../images/ajax-loader.gif');
}

/* --------------------------
   Header
   -------------------------- */
#header {
    background-color: #000;
    border-bottom: 2px solid #2d2d2d;
    box-shadow: 0 18px 18px rgba(30, 30, 30, 0.7);
}

#sb_Subsearch input[type=text]:focus {
    border-color: #ff9d00;
}

/* --------------------------
   Login
   -------------------------- */
#loginPage {
    background-color: #000;
}

#loginPage #maincontainer { /* , #registerPage #maincontainer */
    background-color: rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
}

#loginPage #loginbox {
    color: #999;
}

#loginPage #loginbox div,
#registerPage #registerbox div {
    text-shadow: 0 1px 0 #000;
    color: #999;
}

#loginPage #loginbox #usernamefield input:focus,
#loginPage #loginbox #emailfield input:focus,
#loginPage #loginbox #passwordfield input:focus {
    border-color: #f1b720;
    box-shadow: 0 0 10px #9ecaed;
}

#loginPage #loginbox #remembermefield {
    color: #eee;
}

.formValidation input {
    color: #fff;
}

#loginPage span.error {
    background: #f99;
    border-color: #c33;
    color: #900;
}

#loginPage #footer {
    color: #888;
}

#loginPage #footer a {
    color: #555;
}

#loginPage #footer #donate {
    color: #ff9d00;
}

/* --------------------------
   Sidebar
   -------------------------- */
#sidebar {
    color: #999;
}

#sidebar-header {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    color: #999;
}

#sidebar-header:hover {
    color: #ffc466;
}

#sidebar_home,
#sidebar_localplay,
#sidebar_preferences,
#sidebar_admin,
#sidebar_logout {
    color: #fff;
}

#sidebar_home:hover,
#sidebar_localplay:hover,
#sidebar_preferences:hover,
#sidebar_admin:hover,
#sidebar_logout:hover {
    color: #ffc466;
}

#sidebar-content,
#sidebar-content-light,
#sidebar-light {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    background-color: #1a1a1a;
}

#sidebar-light-default {
    border-color: hsl(0, 0%, 30%);
    background: #1a1a1a;
}
/* Tabs content */
#sidebar-page {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
}

#sidebar-tabs .active > a {
    color: #ff9d00;
}

#sidebar-tabs .sb2 li h4 {
    color: #fff;
    background-color: #262626;
    border-bottom-color: #0f0f0f;
    box-shadow: 0 1px 0 #2a2a2a, inset 0 1px 1px #000;
}

#sidebar-tabs .sb2 li ul li a {
    color: #999;
}

#sidebar-tabs .sb2 li ul li a:hover {
    color: #fff;
}

#sidebar-tabs .sb2 #browse_filters #multi_alpha_filter {
    border-color: #bbb;
}

.topmenu_item span {
    color: #ff9d00;
}

.topmenu_item:hover {
    border: 2px solid #ff9d00;
}

.image-topmenu-album,
.image-topmenu-artist,
.image-topmenu-favorite,
.image-topmenu-home,
.image-topmenu-logout,
.image-topmenu-playlist,
.image-topmenu-radio,
.image-topmenu-smartlist,
.image-topmenu-tagcloud,
.image-topmenu-upload {
  fill: #ff9d00;
}

.image-topmenu-album:hover,
.image-topmenu-artist:hover,
.image-topmenu-favorite:hover,
.image-topmenu-home:hover,
.image-topmenu-logout:hover,
.image-topmenu-playlist:hover,
.image-topmenu-radio:hover,
.image-topmenu-smartlist:hover,
.image-topmenu-tagcloud:hover,
.image-topmenu-upload:hover {
  fill: #ffc466;
}

/* Localplay */
.active_instance {
    border-color: #fff;
}

/* --------------------------
   Rightbar
   -------------------------- */
#rightbar {
    background-color: #222;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    color: #fff;
}

#rightbar #rb_action {
    color: #ff9d00;
}

#rightbar #rb_current_playlist li {
    color: #fff;
}

#rightbar #rb_current_playlist li a {
    color: #eee;
}

#rightbar #rb_current_playlist li a:hover,
#rightbar #rb_current_playlist li a:focus {
    color: #fff;
    background-color: #c85a00;
    background-image: linear-gradient(to top, #cc6200, #c24d00);
}

#rightbar .submenu {
    background-color: #222;
    border-color: silver;
}

#rightbar .submenu a {
    border-bottom-color: #ddd;
    color: #eee;
}

#rightbar .submenu a:hover {
    color: #ff9d00;
}

/* --------------------------
   Content
   -------------------------- */
#content {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    color: #fff;
}

.list-header,
.list-header a {
    color: #999;
}

.list-header a:hover,
.list-header a:focus {
    color: #fff;
}

span.page-nb {
    color: #ff9d00;
}

table.tabledata {
    color: #eee;
}

span.page-text,
table.tabledata a {
    color: #eee;
}

#catalog_type_fields table.tabledata a {
    color: #ff9d00;
}

table.tabledata a:hover,
table.tabledata a:focus {
    color: #ffc466;
}

table.tabledata thead .th-top,
table.tabledata tfoot .th-bottom {
    background-color: #262626;
    box-shadow: 0 1px 0 #2a2a2a, inset 0 1px 1px #000;
}

table.tabledata thead .th-top {
    border-bottom-color: #0f0f0f;
}

table.tabledata tfoot .th-bottom {
    border-top-color: #0f0f0f;
}

table.tabledata th a {
    color: #ff9d00;
}

table.tabledata tr:hover,
table.tabledata tr:focus {
    background-color: #c85a00;
    background-image: linear-gradient(to top, #cc6200, #c24d00);
}

table.tabledata .th-top:hover,
table.tabledata .th-bottom:hover,
table.tabledata .th-top:focus,
table.tabledata .th-bottom:focus {
    color: #fff;
    background-color: #262626;
}

table.striped-rows tbody tr:nth-child(odd),
ul.striped-rows > li:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.1);
}

table.tabledata tbody .cel_cover img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

table.tabledata tbody .cel_cover img:hover {
    border-color: #ff9d00;
}

input:invalid {
    border: 4px solid red;
}

/* --------------------------
   Content (info-box)
   -------------------------- */
.random_selection .random_album .art_album img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.random_selection .random_video .art_album img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.random_selection .random_album .art_album img:hover {
    border-color: #ff9d00;
}

#content .missing {
    background-image: url('../images/missing.png');
}

/* --------------------------
    Content (now playing)
   -------------------------- */
#now_playing .cel_albumart img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

#now_playing .cel_lyrics a:hover {
    color: #09c;
}

/* --------------------------
    Content (Tag cloud)
   -------------------------- */
span.fatalerror {
    color: #c60;
}

.box-content #tag_filter .tag_button {
    color: #fff;
}

.box-content #tag_filter .tag_button span:hover {
    background-color: #c85a00;
    background-image: linear-gradient(to top, #cc6200, #c24d00);
}

/* --------------------------
    Content (information-actions)
   -------------------------- */
.item_properties {
    color: #999;
}

.item_art .item_art_play .item_art_play_icon,
.item_art .item_art_play_150 .item_art_play_icon {
    background-image: url('../images/videoplay.png');
}

.item_art .item_art_actions {
    background-color: rgba(0, 0, 0, 0.6);
}

.item_art img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.item_art:hover {
    color: #ff9d00;
}

#information_actions ul li {
    color: #999;
}

#information_actions a:hover,
#information_actions li:hover {
    color: #fff;
}

/* ------------------------
    Styles for ratings / user flags
   ------------------------ */
.star-rating .global-rating {
    color: #999;
}

/* --------------------------
   Content (Track view)
   -------------------------- */
dl.media_details dt {
    color: #c60;
}

/* --------------------------
   Footer
   -------------------------- */
#footer a:hover {
    color: #09c;
}

#ampache_link {
    color: #555;
}

/* --------------------------
   Web Player
   -------------------------- */
div.jp-audio,
div.jp-audio-stream,
div.jp-video {
    color: #999;
    border: 1px solid #191919;
}

div.jp-video div.jp-interface {
    border-top: 1px solid #191919;
}

div.jp-title,
div.jp-playlist {
    background-color: #202020;
    border-top: 1px solid #191919;
}

.jp-no-solution {
    background: #121112 url("../../../lib/modules/jquery-jplayer-midnight-black/jplayer.midnight.black.interface.png") repeat-x;
    border-top: 1px solid #191919;
}

#webplayer {
    background-color: #191919 !important;
}

div.playing_title a,
div.playing_artist a,
div.playing_lyrics a {
    color: #eee;
}

div.jp-interface {
    background-color: #191919;
}

div.jp-playlist li {
    border-bottom: 1px solid #121212;
}

.jp-type-playlist .jp-playlist a {
    color: #fff;
}

.jp-type-playlist .jp-playlist a:hover,
.jp-type-playlist .jp-playlist a:active,
.jp-type-playlist .jp-playlist a:focus {
    color: #ff9d00;
}

.jp-type-playlist .jp-playlist a.jp-playlist-current {
    color: #ff9d00;
}

/* ------------------------
   Wunderbaum tree
   ------------------------ */
.wunderbaum {
    --wb-node-text-color: #fff;
    --wb-background-color: #222;
    --wb-alternate-row-color: #292929;
    --wb-alternate-row-color-hover: var(--wb-hover-color);
    --wb-focus-border-color: var(--wb-active-color);
    --wb-drop-source-color: var(--wb-hover-color);
    --wb-drop-target-color: var(--wb-active-color);
    --wb-hover-color: hsl(29, 100%, 20%);
    --wb-active-color: hsl(29, 100%, 40%);
    --wb-active-hover-color: var(--wb-active-color);
    --wb-active-color-grayscale: var(--wb-active-color);
    --wb-active-hover-color-grayscale: var(--wb-active-color);
}

/* --------------------------
   Other
   -------------------------- */
.jscroll-next {
    border-color: #ccc;
    background-color: #eee;
    color: #999;
}

.followbtn {
    background-color: #363f4a;
}

.missing_album {
    color: #bbb !important;
}

.user_online {
    background: #0f0;
}

.user_offline {
    background: #7f0000;
}

.user_disabled {
    background: #ccc;
}

.list-header-navmenu-border {
    border-color: #1d1d1d;
}

span.item-count,
span.item-duration,
span.query-count {
    color: #999;
}

a.option-list:hover {
    border-color: #1d1d1d;
}

.editdialogstyle.ui-dialog {
    background-image: url('../../../images/background.png') !important;
}

#tabs li a {
    color: #ff9d00;
}

#tabs li a:hover {
    color: #ffc466;
}

#tabs li.tab_active a {
    color: #fff;
}


/* ==========================================================
   POPCAST / SOUNDBLIZ-INSPIRED REDESIGN
   Targeted override layer for Ampache Reborn
   ========================================================== */

:root {
    color-scheme: dark;
    --pc-bg: #100f15;
    --pc-bg-2: #17131f;
    --pc-panel: rgba(22, 19, 30, 0.88);
    --pc-panel-2: rgba(31, 26, 42, 0.88);
    --pc-card: rgba(255,255,255,0.035);
    --pc-card-hover: rgba(145, 105, 255, 0.10);
    --pc-line: rgba(255,255,255,0.07);
    --pc-text: #f7f4fb;
    --pc-muted: #aaa4b5;
    --pc-accent: #8b5cf6;
    --pc-accent-2: #c084fc;
    --pc-accent-3: #6d5dfc;
    accent-color: var(--pc-accent);
}

/* Atmospheric gradient background */
html,
body {
    color: var(--pc-text) !important;
    background:
        radial-gradient(circle at 82% 10%, rgba(139, 92, 246, 0.17), transparent 30%),
        radial-gradient(circle at 22% 82%, rgba(109, 93, 252, 0.10), transparent 34%),
        linear-gradient(135deg, #0e0d12 0%, #17131f 48%, #100f15 100%) fixed !important;
}

/* Main content: transparent so gradients remain visible */
#maincontainer,
#maincontainer-bg,
#content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--pc-text) !important;
}

/* Header: translucent modern bar */
#header {
    background: rgba(18, 16, 24, 0.84) !important;
    border-bottom: 1px solid var(--pc-line) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.22) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Search and header controls */
#header input[type=text],
#header select,
#sb_Subsearch input[type=text] {
    background: rgba(255,255,255,0.065) !important;
    background-image: none !important;
    color: var(--pc-text) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#header input[type=text]:focus,
#sb_Subsearch input[type=text]:focus {
    border-color: rgba(192,132,252,0.75) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.13) !important;
}

/* Sidebar: one clean panel, no old-fashioned boxed sections */
#sidebar,
#sidebar-content,
#sidebar-content-light,
#sidebar-light,
#sidebar-light-default,
#sidebar-page,
#sidebar-header {
    background: rgba(17, 15, 23, 0.90) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--pc-muted) !important;
}

#sidebar {
    border-right: 1px solid var(--pc-line) !important;
}

#sidebar-tabs .sb2 li h4 {
    background: transparent !important;
    color: var(--pc-text) !important;
    border: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: .02em;
    padding-top: 13px !important;
    padding-bottom: 7px !important;
}

#sidebar-tabs .sb2 li ul li a {
    color: var(--pc-muted) !important;
    border-radius: 9px !important;
    transition: background .18s ease, color .18s ease;
}

#sidebar-tabs .sb2 li ul li a:hover {
    color: #fff !important;
    background: rgba(139,92,246,0.11) !important;
}

#sidebar-tabs .active > a,
#sidebar_home:hover,
#sidebar_localplay:hover,
#sidebar_preferences:hover,
#sidebar_admin:hover,
#sidebar_logout:hover {
    color: var(--pc-accent-2) !important;
}

/* General links */
a,
#tabs li a,
span.page-nb,
.topmenu_item span,
#rightbar #rb_action {
    color: var(--pc-accent-2) !important;
}

a:hover,
#tabs li a:hover {
    color: #dcc5ff !important;
}

/* Buttons */
button,
input[type=button],
input[type=submit],
.editdialogstyle.ui-dialog .ui-dialog-buttonset button {
    background: linear-gradient(135deg, var(--pc-accent), var(--pc-accent-3)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(109,93,252,0.20) !important;
}

button:hover,
input[type=button]:hover,
input[type=submit]:hover {
    filter: brightness(1.08);
}

/* General inputs */
input[type=password],
input[type=text],
input[type=checkbox],
input[type=radio],
input[type=url],
input[type=year],
select,
textarea {
    background: rgba(255,255,255,0.055) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--pc-text) !important;
    border-radius: 9px !important;
}

/* Album/media artwork presentation */
.random_selection .random_album,
.random_selection .random_video {
    border-radius: 16px !important;
    transition: transform .20s ease, background .20s ease, box-shadow .20s ease;
}

.random_selection .random_album:hover,
.random_selection .random_video:hover {
    background: var(--pc-card-hover) !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(0,0,0,0.22);
}

.random_selection .random_album .art_album img,
.random_selection .random_video .art_album img,
.item_art img,
table.tabledata tbody .cel_cover img {
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.30) !important;
    transition: transform .20s ease, box-shadow .20s ease;
}

.random_selection .random_album .art_album img:hover,
.item_art img:hover,
table.tabledata tbody .cel_cover img:hover {
    border-color: var(--pc-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.38), 0 0 0 1px rgba(192,132,252,0.30) !important;
}

/* Tables and lists */
table.tabledata {
    color: #e9e5ef !important;
    background: transparent !important;
}

table.tabledata thead .th-top,
table.tabledata tfoot .th-bottom {
    background: rgba(255,255,255,0.045) !important;
    border-color: var(--pc-line) !important;
    box-shadow: none !important;
}

table.striped-rows tbody tr:nth-child(odd),
ul.striped-rows > li:nth-child(odd) {
    background: rgba(255,255,255,0.025) !important;
}

table.tabledata tr:hover,
table.tabledata tr:focus {
    background: rgba(139,92,246,0.10) !important;
    background-image: none !important;
}

/* Right panel */
#rightbar,
#rightbar .submenu {
    background: rgba(18,16,24,0.94) !important;
    border-color: var(--pc-line) !important;
    box-shadow: -12px 0 30px rgba(0,0,0,0.20) !important;
}

/* Dialogs */
.playlistdialogstyle.ui-dialog .ui-dialog-content,
.sharedialogstyle.ui-dialog .ui-dialog-content,
.editdialogstyle.ui-dialog,
.ui-widget-content {
    background: #1b1723 !important;
    color: var(--pc-text) !important;
    border-color: var(--pc-line) !important;
}

/* Player */
#webplayer,
div.jp-interface,
div.jp-title,
div.jp-playlist {
    background-color: rgba(17,15,23,0.96) !important;
    border-color: var(--pc-line) !important;
}

/* Icon accents */
.image-topmenu-album,
.image-topmenu-artist,
.image-topmenu-favorite,
.image-topmenu-home,
.image-topmenu-logout,
.image-topmenu-playlist,
.image-topmenu-radio,
.image-topmenu-smartlist,
.image-topmenu-tagcloud,
.image-topmenu-upload {
    fill: var(--pc-accent-2) !important;
}

/* Modern scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #100f15;
}
::-webkit-scrollbar-thumb {
    background: #3c344d;
    border-radius: 999px;
    border: 2px solid #100f15;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--pc-accent);
}

/* ==========================================================
   POPCAST — FONDO CENTRAL UNIFORME
   Evita que Newest, Trending, Popular y demás secciones
   formen franjas horizontales o reinicien el degradado.
   ========================================================== */

html,
body {
    background: #100f15 !important;
}

/* Un único fondo continuo para toda el área principal */
#maincontainer,
#maincontainer-bg {
    background:
        radial-gradient(circle at 82% 10%, rgba(139, 92, 246, 0.12) 0%, transparent 34%),
        radial-gradient(circle at 20% 78%, rgba(109, 93, 252, 0.07) 0%, transparent 38%),
        linear-gradient(135deg, #100f15 0%, #15111c 48%, #110f17 100%) !important;
    background-attachment: fixed !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* El contenido y sus bloques dejan ver el mismo fondo continuo */
#content,
#content > div,
#content .box,
#content .box-content,
#content .box-content-left,
#content .box-content-right,
.random_selection {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Neutraliza fondos de filas/secciones internas que causaban bandas */
.random_selection > div,
.random_selection > ul,
.random_selection > li {
    background-color: transparent !important;
    background-image: none !important;
}

/* Tarjetas: superficie discreta y uniforme, sin crear franjas */
.random_selection .random_album,
.random_selection .random_video {
    background: rgba(255, 255, 255, 0.018) !important;
    border-radius: 16px !important;
}

/* Hover violeta suave */
.random_selection .random_album:hover,
.random_selection .random_video:hover {
    background: rgba(139, 92, 246, 0.09) !important;
}

/* Evita cortes visuales entre encabezados y secciones */
#content h1,
#content h2,
#content h3,
#content h4 {
    background: transparent !important;
}



/* ==========================================================
   POPCAST — LOGO DEL GATO + CIELO DE CONSTELACIONES
   ========================================================== */

/* Sustituye visualmente el logo de Ampache por popcast-logo.png */
#header .logo img,
#header #logo img,
#header .ampache-logo img,
#header img[src*="ampache-dark"],
#header img[src*="ampache-light"] {
    content: url('../images/popcast-logo.png') !important;
    width: 76px !important;
    height: 76px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.32));
}

/* Cielo continuo: violeta muy oscuro, suave y sin franjas */
#maincontainer,
#maincontainer-bg {
    position: relative !important;
    background:
        radial-gradient(circle at 82% 12%, rgba(139, 92, 246, 0.14) 0%, transparent 32%),
        radial-gradient(circle at 18% 76%, rgba(109, 93, 252, 0.09) 0%, transparent 36%),
        linear-gradient(135deg, #100f15 0%, #171220 52%, #110f18 100%) !important;
    background-attachment: fixed !important;
}

/* Estrellas pequeñas y discretas */
#maincontainer-bg::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0.58 !important;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(216,190,255,.88) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(164,145,255,.72) 0 1.2px, transparent 1.8px),
        radial-gradient(circle, rgba(255,255,255,.48) 0 .8px, transparent 1.3px);
    background-size:
        173px 181px,
        239px 211px,
        317px 293px,
        127px 149px !important;
    background-position:
        21px 37px,
        97px 61px,
        43px 131px,
        72px 19px !important;
}

/* Brillos de constelación ocasionales, sin saturar el fondo */
#maincontainer-bg::after {
    content: "✦   ·      ✧        ·    ✦       ·       ✧     ·        ✦" !important;
    position: fixed !important;
    top: 110px !important;
    left: 235px !important;
    right: 45px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    color: rgba(206, 177, 255, 0.28) !important;
    font-size: 11px !important;
    letter-spacing: clamp(18px, 4vw, 72px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-shadow:
        0 0 7px rgba(192,132,252,.40),
        0 0 14px rgba(139,92,246,.18) !important;
}

/* Mantiene el contenido por encima del cielo */
#content,
#header,
#sidebar,
#rightbar {
    position: relative !important;
    z-index: 1 !important;
}

/* Evita que se vuelvan a formar franjas horizontales */
#content,
#content > div,
#content .box,
#content .box-content,
#content .box-content-left,
#content .box-content-right,
.random_selection,
.random_selection > div,
.random_selection > ul,
.random_selection > li {
    background-color: transparent !important;
    background-image: none !important;
}