/* =========================================
   1. IMPORTS & VARIABLES
   ========================================= */
@import url('/static/css/nunito.css');

:root {
    --plyr-color-main: #3b82f6; 
    --plyr-video-background: rgba(0, 0, 0, 0.2);
    --plyr-menu-background: rgba(15, 23, 42, 0.9);
    --plyr-menu-color: #ffffff;
}

/* =========================================
   2. BASE STYLES
   ========================================= */
[x-cloak] { display: none !important; }

body { 
    font-family: 'Nunito', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
    scroll-behavior: smooth; 
}

/* =========================================
   3. GLASSMORPHISM COMPONENTS
   ========================================= */
.glass-panel { 
    background: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(24px); 
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6); 
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07); 
}

.glass-menu { 
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(24px); 
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8); 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); 
}

@media (prefers-color-scheme: dark) {
    .glass-panel { 
        background: rgba(15, 23, 42, 0.65); 
        border: 1px solid rgba(255, 255, 255, 0.1); 
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5); 
    }
    .glass-menu { 
        background: rgba(30, 41, 59, 0.85); 
        border: 1px solid rgba(255, 255, 255, 0.15); 
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); 
    }
}

/* =========================================
   4. BACKGROUND BLOBS & ANIMATIONS
   ========================================= */
.blob-1 { 
    position: fixed; top: -10%; left: -10%; 
    width: 50vw; height: 50vw; 
    background: radial-gradient(circle, rgba(59,130,246,0.2) 0%, transparent 70%); 
    z-index: -1; filter: blur(40px); 
    animation: float 10s infinite alternate ease-in-out; 
}
.blob-2 { 
    position: fixed; bottom: -10%; right: -10%; 
    width: 60vw; height: 60vw; 
    background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, transparent 70%); 
    z-index: -1; filter: blur(40px); 
    animation: float 12s infinite alternate-reverse ease-in-out; 
}

@media (prefers-color-scheme: dark) {
    .blob-1 { background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%); }
    .blob-2 { background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, transparent 70%); }
}

@keyframes float { 
    0% { transform: translate(0, 0) scale(1); } 
    100% { transform: translate(30px, 30px) scale(1.1); } 
}

@keyframes indeterminate { 
    0% { transform: translateX(-100%); width: 30%; } 
    50% { width: 50%; } 
    100% { transform: translateX(400%); width: 10%; } 
}

/* =========================================
   5. UTILITIES (SCROLLBARS & SPACING)
   ========================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(156, 163, 175, 0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(156, 163, 175, 0.5); }

.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* =========================================
   6. PLYR MEDIA PLAYER CUSTOMIZATIONS
   ========================================= */
.plyr { 
    border-radius: 1rem; 
    overflow: visible !important; 
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); 
    width: 100%; 
}
.plyr__video-wrapper { 
    border-radius: 1rem; 
    overflow: hidden;
    height: 100%;
}
.plyr-fixed-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plyr-fixed-video video {
    max-height: 100%;
    width: 100%;
    object-contain: contain;
}
.plyr--video {
    height: 100%;
}
.plyr__controls { 
    backdrop-filter: blur(10px) !important; 
    background: rgba(15, 23, 42, 0.6) !important; 
    padding: 10px !important; 
}
.plyr--audio .plyr__controls { 
    border-radius: 1rem; 
    background: rgba(15, 23, 42, 0.7) !important; 
}

/* Fullscreen fix for Plyr when inside modals/containers */
.plyr--fullscreen-active {
    z-index: 999999 !important;
}

:fullscreen .plyr, :-webkit-full-screen .plyr, :-moz-full-screen .plyr, :-ms-fullscreen .plyr {
    width: 100% !important;
    height: 100% !important;
}

@media (prefers-color-scheme: light) {
    .plyr--audio .plyr__controls { 
        background: rgba(255, 255, 255, 0.8) !important; 
        color: #1e293b !important; 
    }
}

/* =========================================
   7. CHANGELOG & MARKDOWN STYLES
   ========================================= */
.changelog-body {
    line-height: 1.6;
}
.changelog-body h1, .changelog-body h2, .changelog-body h3 {
    color: inherit;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.changelog-body h1 { font-size: 1.25rem; }
.changelog-body h2 { font-size: 1.125rem; }
.changelog-body h3 { font-size: 1rem; }
.changelog-body ul, .changelog-body ol {
    margin-left: 1.25rem;
    margin-bottom: 1rem;
}
.changelog-body li {
    margin-bottom: 0.25rem;
}
.changelog-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
    padding: 0.2rem 0.4rem;
    border-radius: 0.375rem;
    background-color: rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
    .changelog-body code {
        background-color: rgba(255, 255, 255, 0.1);
    }
}