:root {
    --transition-speed: 0.28s;
    --transition-fast: 0.18s;
    --transition-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    --surface-0: #07090d;
    --surface-1: #0b0f16;
    --surface-2: #101722;
    --surface-3: #151d29;

    --text-primary: #f3f7fb;
    --text-secondary: #b5c0cc;
    --text-muted: #6e7b89;
    --text-faint: #46515e;

    --border-subtle: rgba(255,255,255,.075);
    --border-soft: rgba(255,255,255,.12);
    --border-strong: rgba(255,255,255,.20);

    --glass: rgba(10,15,23,.72);
    --glass-strong: rgba(10,15,23,.88);

    --accent: #38e8ff;
    --accent-rgb: 56,232,255;
    --accent-2: #8b5cf6;
    --accent-2-rgb: 139,92,246;

    --accent-soft: rgba(var(--accent-rgb),.10);
    --accent-medium: rgba(var(--accent-rgb),.18);
    --accent-strong: rgba(var(--accent-rgb),.34);

    --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-2));
    --gradient-surface: linear-gradient(145deg, rgba(24,31,43,.96), rgba(8,12,18,.98));
    --gradient-panel: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));

    --shadow-panel:
        0 24px 70px rgba(0,0,0,.52),
        0 4px 18px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.10);

    --shadow-accent:
        0 0 18px rgba(var(--accent-rgb),.16),
        0 0 42px rgba(var(--accent-rgb),.07);

    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 16px;
    
    --player-focus-ring: 0 0 0 2px rgba(255,255,255,.92), 0 0 0 5px color-mix(in srgb, var(--accent-color) 55%, transparent);
}

/* ===========================
    Basis Styles & Reset
=========================== */
*, *:before, *:after {
    box-sizing: border-box;
}

body {
    --accent-color: var(--accent) !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(var(--accent-rgb),.055), transparent 32%),
        radial-gradient(circle at 88% 90%, rgba(var(--accent-2-rgb),.055), transparent 34%),
        linear-gradient(145deg, #05070b 0%, #0a0e14 48%, #070a10 100%);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    padding: 10px;
    position: relative;
    overflow: hidden;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: none;    
    -ms-user-select: none;     
    user-select: none;
    transition: background var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.018) 50%, transparent 62%),
        radial-gradient(circle at 50% -10%, rgba(255,255,255,.025), transparent 38%);
    mix-blend-mode: screen;
}

/* ===========================
    Player Wrapper
=========================== */
.player-wrapper {
    width: 450px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    background:
        linear-gradient(145deg, rgba(28,36,49,.96), rgba(9,14,21,.985)),
        var(--gradient-panel);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-lg);
    margin-top: 0;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    overflow: hidden;
    box-shadow: var(--shadow-panel), var(--shadow-accent);
    transition: background var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
    isolation: isolate;
    contain: layout paint style;
}

.player-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 58%;
    background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.018) 35%, transparent 100%);
    opacity: .9;
    pointer-events: none;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.player-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(var(--accent-rgb),.045), transparent 35%, rgba(var(--accent-2-rgb),.035));
}

/* ===========================
    Ambient Bubbles
=========================== */
.bubble-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; 
    z-index: 1;            
}

.bubble {
    position: absolute;
    bottom: -20px;
    background:
        radial-gradient(circle at 28% 25%, rgba(255,255,255,.55) 0 3%, transparent 16%),
        radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb),.24), rgba(var(--accent-rgb),.07) 42%, transparent 72%);
    border: 1px solid rgba(var(--accent-rgb),.24);
    border-radius: 50%;
    box-shadow:
        0 0 12px rgba(var(--accent-rgb),.10),
        inset 0 0 10px rgba(255,255,255,.035);
    animation: riseAndWobble linear forwards;
}

@keyframes riseAndWobble {
    0% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-50vh) translateX(10px); }
    100% { transform: translateY(-110vh) translateX(-10px); }
}

/* ===========================
    Logo & Track Info
=========================== */
.logo-wrapper {
    position: relative;
    top: 0;
    margin-bottom: -10px;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    justify-content: center;
}

.logo { 
    height: 120px; 
    width: auto; 
    filter: invert(1) 
            drop-shadow(0 0 5px rgba(255,255,255,.68)) 
            drop-shadow(0 0 12px rgba(var(--accent-rgb),.42))
            drop-shadow(0 0 28px rgba(var(--accent-2-rgb),.18));
    transition: filter var(--transition-speed) var(--transition-ease);
}

.track-meta-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
    width: 100%;
    z-index: 5;
    position: relative;
    min-height: 56px;
}

.track-cover {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
    display: none;
    z-index: 6;
}

.track-cover.has-cover {
    display: block;
    border: 1px solid rgba(var(--accent-rgb),.30);
    box-shadow: 0 5px 18px rgba(0,0,0,.34), 0 0 14px rgba(var(--accent-rgb),.10);
}

.track-cover.has-cover:hover {
    transform: translateY(-50%) scale(1.05);
    border-color: rgba(var(--accent-rgb),.75);
    box-shadow: 0 7px 22px rgba(0,0,0,.42), 0 0 18px rgba(var(--accent-rgb),.24);
}

.track-info-wrapper {
    width: 100%;
    max-width: 280px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2px;
    margin: 0 auto;
    z-index: 5;
}

.track-title-line { 
    font-size: 14px; 
    color: var(--accent); 
    filter: drop-shadow(0 0 5px rgba(var(--accent-rgb),.32)) drop-shadow(0 0 14px rgba(var(--accent-rgb),.18));
    letter-spacing: .35px;
    cursor: pointer;
    transition: color var(--transition-speed) var(--transition-ease), filter var(--transition-speed) var(--transition-ease);
    position: relative;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    text-align: center;
}

.track-title-line:hover {
    color: #fff;
    filter: drop-shadow(0 0 7px rgba(255,255,255,.48)) drop-shadow(0 0 18px rgba(var(--accent-rgb),.34));
}

.track-artist-line { 
    font-size: 13px; 
    font-style: italic;
    font-weight: 400; 
    color: var(--text-primary); 
    filter: drop-shadow(0 0 7px rgba(var(--accent-rgb),.12));
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color var(--transition-speed) var(--transition-ease);
    position: relative;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    text-align: center;
}

.track-bpm-line {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    text-align: center;
    transition: color var(--transition-speed) var(--transition-ease);
}

.track-info {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    filter: drop-shadow(0 0 7px rgba(var(--accent-rgb),.12));
    letter-spacing: 0.5px;
    cursor: pointer;
    text-align: center;
    transition: color var(--transition-speed) var(--transition-ease);
}

/* ===========================
    Audio Element & Waveform Container
=========================== */
audio {
    display: none;
}

.canvas-container {
    position: relative;
    width: 100%;
    z-index: 5;
}

#waveform {
    width: 100%;
    height: 75px;
    margin-bottom: 6px;
    display: block;
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb),.045), rgba(0,0,0,.30)),
        linear-gradient(90deg, rgba(255,255,255,.018), transparent 45%, rgba(255,255,255,.012));
    border-radius: var(--radius-sm);
    position: relative;
    border: 1px solid rgba(255,255,255,.075);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.46), inset 0 0 22px rgba(var(--accent-rgb),.025);
    transition: background var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease);
    touch-action: pan-y;
    contain: layout paint;
}

/* Fullscreen Modus für Canvas-Container (transparent, damit der Webseiten-Gradient durchscheint) */
.canvas-container:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.canvas-container:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.canvas-container:fullscreen canvas,
.canvas-container:-webkit-full-screen canvas {
    width: 100% !important;
    height: 100% !important;
    max-height: 400px;
    background: transparent !important;
}

.fullscreen-canvas-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(11, 13, 16, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
    z-index: 10;
    outline: none;
}

.canvas-container:hover .fullscreen-canvas-btn {
    opacity: 1;
}

.fullscreen-canvas-btn:hover {
    color: var(--accent-color);
    background: rgba(11, 13, 16, 0.8);
    border-color: var(--accent-color);
}

/* ===========================
    Playlist & Toolbars
=========================== */
.playlist-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 2px;
    padding: 0;
    z-index: 5;
    position: relative;
}

.sort-newest-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted, #6b7280);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 3px 8px !important;
    margin-left: auto !important;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease), text-shadow var(--transition-speed) var(--transition-ease);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sort-newest-btn:hover {
    color: var(--accent-color) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.sort-newest-btn.active {
    color: var(--accent-color);
    background: rgba(var(--accent-rgb), 0.08) !important;
    text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}

.playlist {
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 5; 
    background: linear-gradient(180deg, rgba(7,11,17,.72), rgba(7,10,15,.54));
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color var(--transition-speed) var(--transition-ease);
}

.playlist.dragover {
    border-color: rgba(var(--accent-rgb),.72) !important;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),.11), rgba(var(--accent-2-rgb),.055)) !important;
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb),.06);
}

.playlist:hover {
    scrollbar-color: rgba(var(--accent-rgb),.26) transparent;
}

.playlist li {
    font-size: 13px;
    padding: 7px 52px 7px 12px !important;
    cursor: default;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    transition: background var(--transition-fast) var(--transition-ease), color var(--transition-fast) var(--transition-ease), border-color var(--transition-fast) var(--transition-ease);
}

.playlist li ul {
    list-style: none;
    padding-left: 15px;
    margin: 3px 0 0 0;
}

.playlist li.file:hover { 
    background: linear-gradient(90deg, rgba(var(--accent-rgb),.085), rgba(var(--accent-2-rgb),.035) 75%, transparent); 
    color: #edf7fb;
    border-radius: var(--radius-sm);
}

.playlist li.file.active { 
    background: linear-gradient(90deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-2-rgb),.075) 70%, transparent); 
    color: var(--accent); 
    font-weight: 500;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 18px rgba(var(--accent-rgb),.055);
}

.playlist li.repeat-active {
    font-weight: bold;
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 10px rgba(var(--accent-rgb), 0.18);
}

.playlist li.folder::before { content: '📁'; margin-right: 6px; opacity: 0.8; }
.playlist li.folder.open::before { content: '📂'; margin-right: 6px; opacity: 1; }

.play-counter {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;
    font-weight: 400;
    opacity: 0.85;
}

.playlist li.file:hover .play-counter {
    color: var(--text-secondary);
}

.playlist::-webkit-scrollbar { width: 5px; height: 0px; }
.playlist::-webkit-scrollbar-track { background: transparent; }
.playlist::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.playlist:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }
.playlist::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), .55); }

/* Fav & Filter Buttons */
.fav-btn,
.favorites-filter-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 0 !important;
    outline: none;
    transition: color var(--transition-speed) var(--transition-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fav-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.favorites-filter-btn {
    margin-left: 4px;
    padding: 0 4px !important;
}

.fav-btn:hover,
.favorites-filter-btn:hover {
    color: var(--accent) !important;
}

.fav-btn.active,
.favorites-filter-btn.active {
    color: var(--accent);
    text-shadow: 0 0 7px rgba(var(--accent-rgb), .48), 0 0 16px rgba(var(--accent-rgb), .16);
}

/* ===========================
    Search Container
=========================== */
.playlist-search-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 8px;
    background: linear-gradient(145deg, rgba(7,11,17,.82), rgba(11,16,24,.62));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    box-sizing: border-box;
    z-index: 5;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
}

.playlist-search-container:focus-within {
    border-color: rgba(var(--accent-rgb), .48);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .045), 0 0 18px rgba(var(--accent-rgb), .10);
}

.search-icon {
    font-size: 13px;
    color: var(--text-muted);
    margin-right: 8px;
    user-select: none;
}

#playlistSearch {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 13px;
    padding: 2px 24px 2px 0;
    font-family: inherit;
    min-width: 0;
}

#playlistSearch::placeholder {
    color: var(--text-faint);
}

.search-clear-btn {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0 !important;
    outline: none;
}

.search-clear-btn:hover {
    color: var(--text-primary) !important;
}

#playlistSearch:not(:placeholder-shown) ~ .search-clear-btn {
    display: flex;
}

/* ===========================
    Upload Progressbar
=========================== */
.upload-progress-container {
    padding: 12px 14px;
    background: rgba(11, 13, 16, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    width: 100%;
    z-index: 6;
    position: relative;
    animation: fadeInProgress 0.25s ease-out;
}

@keyframes fadeInProgress {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.upload-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    margin-bottom: 6px;
    font-weight: 500;
}

.upload-progress-text {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

.upload-progress-percent {
    color: var(--accent-color);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.upload-progress-bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.upload-progress-bar-fill {
    width: 0%;
    height: 100%;
    background: var(--accent-color);
    border-radius: 3px;
    box-shadow: 0 0 10px var(--accent-color);
    transition: width 0.1s linear;
}

/* ===========================
    Controls, HUD & Footer
=========================== */
.hud {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(8,13,20,.94), rgba(15,22,32,.88));
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), .30);
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-speed) var(--transition-ease);
    z-index: 100000;
    box-shadow: 0 12px 30px rgba(0,0,0,.42), 0 0 20px rgba(var(--accent-rgb), .08);
}

.hud.show { opacity: 0.85; }

.footer {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 11px;
    z-index: 5;
    letter-spacing: 0.3px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    transition: color var(--transition-speed) var(--transition-ease);
}

#authTriggerBtn {
    grid-column: 2;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    justify-self: center;
}

#infoTriggerBtn {
    grid-column: 3;
    font-style: italic;
    cursor: pointer;
    justify-self: end;
}

#infoTriggerBtn:hover,
#authTriggerBtn:hover {
    color: var(--accent);
}

.custom-player-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 12px;
    background: linear-gradient(145deg, rgba(9,14,21,.84), rgba(14,20,29,.60));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 5px 18px rgba(0,0,0,.14);
}

.time-display {
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.button-group {
    display: flex;
    gap: 12px; /* Reduziert von 20px auf 12px */
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.custom-player-controls .button-group button {
    background: transparent !important;
    border: none !important;
    width: 28px;               
    height: 28px;               
    padding: 0 !important; 
    margin: 0 !important;
    cursor: pointer;
    outline: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.custom-player-controls .button-group button:active {
    transform: scale(0.9);
}

.skip-back-state::before {
    content: "";
    display: block;
    width: 2.5px;
    height: 10px;
    background-color: #d1d5db;
    margin-right: 2px;
}

.skip-back-state::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 7px 5px 0;
    border-color: transparent #d1d5db transparent transparent;
}

#playButton {
    --play-btn-color: #dfe9f1;
}

#playButton.play-state::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 11px;
    border-color: transparent transparent transparent var(--play-btn-color);
    margin-left: 2.5px; 
}

#playButton.pause-state {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

#playButton.pause-state::before,
#playButton.pause-state::after {
    content: "";
    display: block;
    width: 3px;                     
    height: 13px;                  
    background-color: var(--play-btn-color);
    border-radius: 1px;           
}

.skip-next-state::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #d1d5db;
    margin-right: 2px;
}

.skip-next-state::after {
    content: "";
    display: block;
    width: 2.5px;
    height: 10px;
    background-color: #d1d5db;
}

.shuffle-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 9.5px;
    border-radius: 6px;
    font-weight: 500;
    flex-shrink: 0;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    z-index: 10;
}

.shuffle-btn:hover {
    color: var(--text-primary) !important;
    background: rgba(255,255,255,.035) !important;
}

.shuffle-btn.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), .065) !important;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), .07);
}

.repeat-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 9.5px;
    border-radius: 6px;
    transition: all var(--transition-speed) var(--transition-ease);
    font-weight: 500;
    flex-shrink: 0;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    z-index: 10;
}

.repeat-btn:hover {
    color: var(--text-primary, #f3f4f6) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

.repeat-btn.active {
    color: var(--accent-color);
    background: rgba(var(--accent-rgb), 0.065) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.07);
}

.repeat-btn:active {
    transform: scale(0.95);
}

.left-controls {
    display: flex;
    align-items: center;
    gap: 25px;
    width: auto;
    isolation: isolate;
}

.right-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    isolation: isolate;
}

.button-group button:hover::before,
.button-group button:hover::after {
    background-color: var(--accent) !important;
    box-shadow: 0 0 10px rgba(var(--accent-rgb), .28);
}

.button-group button:hover.play-state::before {
    border-left-color: var(--accent) !important;
}

.button-group button:hover.skip-back-state::after {
    border-right-color: var(--accent) !important;
}

.button-group button:hover.skip-next-state::before {
    border-left-color: var(--accent) !important;
}

.volume-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    width: 75px;
    height: 30px;
    flex: 0 0 auto;
}

#volumeSlider {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 13px; 
    right: 0px; 
    width: 75px;
    height: 3px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb),.20), #26313f);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-speed) var(--transition-ease); 
    pointer-events: none;
    z-index: 100;
}

#volumeSlider::-webkit-slider-thumb,
#volumeSlider::-moz-range-thumb {
    width: 9px;                 
    height: 9px;                
    border-radius: 50% !important;
    background: var(--accent);
    box-shadow: 0 0 7px rgba(var(--accent-rgb), .58), 0 0 16px rgba(var(--accent-rgb), .18);
    border: none !important;
    cursor: pointer;
}

.volume-text-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    outline: none !important;
    padding: 0 !important;
    z-index: 2;
}

.volume-text-btn.is-hidden { opacity: 0; pointer-events: none; }
#volumeSlider.is-visible { opacity: 1; pointer-events: auto; }
.volume-text-btn:hover + #volumeSlider, #volumeSlider:hover { opacity: 1; pointer-events: auto; }
.volume-text-btn:hover { color: var(--accent); }

.authLoggedInUser {
    font-size: 13px;
    color: var(--accent-color);
    font-weight: 500;
}

/* ===========================
    Modals & Context Menu
=========================== */
.cover-modal,
.info-modal,
.auth-modal,
.player-confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb),.045), transparent 35%), rgba(2,4,7,.58);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    z-index: 100000;
    justify-content: center;
    align-items: flex-start;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
}

.cover-modal.visible,
.info-modal.visible,
.auth-modal.visible,
.player-confirm-modal.visible,
.track-context-menu.visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.info-modal .info-modal-content,
.player-confirm-modal .player-confirm-content {
    width: 300px;
    background: linear-gradient(145deg, rgba(25,33,45,.98), rgba(8,13,20,.985));
    padding: 20px;
    border-radius: var(--radius-lg);
    box-sizing: border-box;
    border: 1px solid rgba(var(--accent-rgb), .24);
    box-shadow: 0 25px 70px rgba(0,0,0,.58), 0 0 26px rgba(var(--accent-rgb), .10);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    margin-top: 25vh;
}

.info-modal-title,
.player-confirm-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(230,240,248,.50);
    margin-bottom: 12px;
}

.info-modal-body,
.player-confirm-body {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 20px;
    font-weight: 500;
}

.player-confirm-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
}

.player-confirm-btn {
    flex: 1;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
}

.player-confirm-btn.cancel {
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: var(--text-secondary);
}

.player-confirm-btn.cancel:hover {
    border-color: rgba(255,255,255,.25) !important;
    color: var(--text-primary);
}

.player-confirm-btn.danger {
    background: linear-gradient(135deg, rgba(255,80,100,.13), rgba(255,60,80,.06)) !important;
    border: 1px solid rgba(255,90,105,.34) !important;
    color: #ff7383;
}

.info-modal-close-btn {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),.13), rgba(var(--accent-2-rgb),.07)) !important;
    border: 1px solid rgba(var(--accent-rgb),.30) !important;
    color: var(--accent);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
}

.info-modal-close-btn:hover {
    border-color: rgba(var(--accent-rgb),.72);
    box-shadow: 0 0 16px rgba(var(--accent-rgb),.10);
}

.cover-modal .modal-content {
    width: 380px;
    height: 380px;
    background: linear-gradient(145deg, #151d29, #080d14);
    padding: 12px;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    border: 1px solid rgba(var(--accent-rgb), .25);
    box-shadow: 0 25px 70px rgba(0,0,0,.58), 0 0 25px rgba(var(--accent-rgb), .10);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8vh;
}

.modal-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.track-context-menu {
    position: fixed;
    display: none;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(24,31,42,.98), rgba(8,12,18,.985));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 20px 55px rgba(0,0,0,.58);
    z-index: 100000;
    min-width: 190px;
}

.context-menu-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(230,240,248,.48);
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.track-context-menu .context-menu-item {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.track-context-menu .context-menu-item:hover {
    background: linear-gradient(90deg, rgba(var(--accent-rgb),.10), rgba(var(--accent-2-rgb),.045));
    color: var(--accent);
}

/* ===========================
    Skin Selector Dropdown
=========================== */
.skin-select {
    min-height: 36px;
    padding: 8px 34px 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    width: 100%;
    margin: 15px 0;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)), rgba(11, 13, 16, 0.94);
    color: #e8edf2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: border-color var(--transition-speed) var(--transition-ease), background var(--transition-speed) var(--transition-ease);
}

.skin-select:hover {
    border-color: rgba(255, 255, 255, 0.30);
}

.skin-select option,
.skin-select optgroup {
    background-color: #101419;
    color: #e8edf2;
}

/* ===========================
    Skin-Spezifische Anpassungen
=========================== */
/* Light Skin */
body.light-skin {
    --accent-color: #087f86 !important;
    --accent: #087f86;
    --accent-rgb: 8,127,134;
    --accent-2: #5b5bd6;
    --accent-2-rgb: 91,91,214;
    --text-primary: #17202a;
    --text-secondary: #465363;
    --text-muted: #7b8794;
    background: linear-gradient(145deg, #edf3f5, #e4eaee 55%, #f2f5f7);
    color: var(--text-primary);
}

body.light-skin .player-wrapper {
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,241,245,.96));
    border-color: rgba(30,48,62,.13);
}

body.light-skin .playlist {
    background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(244,248,250,.58));
}

body.light-skin .skin-select {
    border-color: rgba(15, 23, 42, 0.16);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(229, 235, 239, 0.96));
    color: #1f2937;
}

/* Bioluminescent Skin */
body.bioluminescent-skin {
    --accent-color: #18f5d0 !important;
    --accent: #18f5d0;
    --accent-rgb: 24,245,208;
    --accent-2: #9b6cff;
    --accent-2-rgb: 155,108,255;
    background:
        radial-gradient(circle at 12% 18%, rgba(24,245,208,.13), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(155,108,255,.16), transparent 30%),
        linear-gradient(145deg, #020608, #050b10 48%, #07050d);
    color: #e4fff9;
}

body.bioluminescent-skin .player-wrapper {
    background: linear-gradient(145deg, rgba(7,27,31,.97), rgba(5,12,20,.98) 52%, rgba(18,8,31,.97));
    border-color: rgba(24,245,208,.30);
}

body.bioluminescent-skin .skin-select {
    border-color: rgba(0, 255, 214, 0.26);
    background: linear-gradient(135deg, rgba(0, 255, 214, 0.075), rgba(118, 67, 255, 0.045)), rgba(2, 8, 11, 0.94);
    color: #d8fff9;
}

/* Pink Skin */
body.pink-skin {
    --accent-color: #ff5fc8 !important;
    --accent: #ff5fc8;
    --accent-rgb: 255,95,200;
    --accent-2: #9a70ff;
    --accent-2-rgb: 154,112,255;
    background:
        radial-gradient(circle at 10% 12%, rgba(255,95,200,.11), transparent 30%),
        radial-gradient(circle at 90% 18%, rgba(154,112,255,.14), transparent 32%),
        linear-gradient(145deg, #0b070e, #120b17 48%, #09070d);
    color: #f7eaf5;
}

body.pink-skin .player-wrapper {
    background: linear-gradient(145deg, rgba(34,24,43,.97), rgba(15,10,22,.985) 52%, rgba(28,12,28,.97));
    border-color: rgba(255,95,200,.24);
}

body.pink-skin .skin-select {
    border-color: rgba(255, 102, 204, 0.26);
    background: linear-gradient(135deg, rgba(255, 102, 204, 0.075), rgba(125, 76, 155, 0.06)), rgba(16, 11, 22, 0.94);
    color: #f2e6f7;
}

/* ===========================
    Alarming Logo Easteregg Styles
=========================== */

/* Der Bass Nuke / Red Alert Modus (Ausgelöst durch Dreifachklick aufs Logo) */
body.bass-nuke-mode {
    --accent: #ff0033 !important;
    --accent-rgb: 255,0,51 !important;
    --accent-color: #ff0033 !important;
}
body.bass-nuke-mode .player-wrapper {
    animation: nukeShake 0.15s infinite alternate ease-in-out;
    border-color: rgba(255, 0, 51, 0.9) !important;
    box-shadow: 0 0 50px rgba(255, 0, 51, 0.6), inset 0 0 25px rgba(255, 0, 51, 0.4) !important;
}
@keyframes nukeShake {
    0% { transform: translate(-3px, 1px) rotate(-0.5deg); filter: contrast(1.3) brightness(1.1); }
    100% { transform: translate(3px, -2px) rotate(0.5deg); filter: contrast(1.5) brightness(1.3); }
}

/* Quantum Cyber-Matrix Laser HUD */
.quantum-laser-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999999;
    background: radial-gradient(circle at 50% 50%, rgba(56,232,255,0.15), transparent 70%);
    box-shadow: inset 0 0 100px rgba(56,232,255,0.25);
    animation: quantumFlash 0.4s ease-out forwards;
}
@keyframes quantumFlash {
    0% { opacity: 0; transform: scale(1.1); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; pointer-events: none; }
}

/* Der leuchtende Cursor-Glow */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 50%;
  pointer-events: none; /* Klicks gehen durch den Glow hindurch */
  z-index: -9999; /* Im Hintergrund, aber über dem Body */
  
  /* Neon-Glow in der Accent-Color (mehrstufig für echten Neon-Effekt) */
  background-color: var(--accent-color);
  box-shadow: 
    0 0 10px var(--accent-color),
    0 0 20px var(--accent-color),
    0 0 40px var(--accent-color);
  
  opacity: 0.4;
  mix-blend-mode: screen; /* Sorgt dafür, dass es auf dunklen Hintergründen intensiv strahlt */
  
  /* Butterweiche Entkopplung der Bewegung */
  transition: transform 0.05s ease-out, opacity 0.3s ease;
  will-change: transform;
}

/* Optional: Verstecken, wenn die Maus das Fenster verlässt */
body:not(:hover) .cursor-glow {
  opacity: 0;
}

/* ===========================
    3D Relief / Weich gemeißelt (Player-Wrapper)
=========================== */
.player-wrapper {
    position: relative;
    z-index: 1;
    
    /* Der Grundrand nimmt die Akzentfarbe auf, wirkt aber durch feine Kontraste plastisch */
    border: 1.5px solid color-mix(in srgb, var(--accent-color) 40%, rgba(0,0,0,0.6)) !important;
    
    /* Der 3D-Relief-Effekt: Kombiniert äußere Tiefe mit inneren Lichtern und Schatten */
    box-shadow: 
        /* 1. Äußerer tiefer Schatten für die schwebende Raumtiefe */
        0 30px 80px rgba(0, 0, 0, 0.65),
        0 10px 25px rgba(0, 0, 0, 0.35),
        
        /* 2. Äußeres Akzent-Glow (sanfter Hof) */
        0 0 20px rgba(var(--accent-rgb), 0.16),
        
        /* 3. INNERES RELIEF (Das Geheimnis des Nach-oben-Wölbens):
           - Ein helles Licht (Highlight) legt sich oben innen an den Rand
           - Ein tiefer Schatten zieht sich unten innen nach unten */
        inset 0 1.5px 3px rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.8),
        inset 0 0 16px rgba(var(--accent-rgb), 0.12) !important;
        
    /* Das Material selbst erhält eine subtile Aufwölbung nach oben (Lichteinfall von schräg oben) */
    background-image: 
        linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.01) 30%, transparent 100%),
        linear-gradient(145deg, rgba(30,39,53,.98), rgba(8,12,18,.99)),
        var(--gradient-panel) !important;
}

/* Bereinigt alte Pseudo-Elemente */
.player-wrapper::before,
.player-wrapper::after {
    display: none !important;
}

/* ===========================
    Innerer Kantenschein für Playlist & Eingabefelder
=========================== */

/* 1. Die Playlist: Edler, tiefer Innenschein an den Rändern */
.playlist {
    box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.65),
        inset 0 0 14px rgba(var(--accent-rgb), 0.12) !important;
    border-color: rgba(var(--accent-rgb), 0.25) !important;
}

/* 2. Alle Texteingabefelder & Suchcontainer (Playlist-Search etc.) */
.playlist-search-container,
.skin-select {
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.7),
        inset 0 0 10px rgba(var(--accent-rgb), 0.10),
        0 1px 2px rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(var(--accent-rgb), 0.3) !important;
}

/* Verstärkter Fokus-Effekt beim Reinklicken in die Suche */
.playlist-search-container:focus-within {
    border-color: rgba(var(--accent-rgb), 0.6) !important;
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.8),
        inset 0 0 14px rgba(var(--accent-rgb), 0.22),
        0 0 12px rgba(var(--accent-rgb), 0.2) !important;
}