/* =========================================================
   MEDIA BROWSER — BASE
   DARK SLATE / BLUE ACCENT
   ========================================================= */

:root {
    /* =====================================================
       BACKGROUND
       ===================================================== */

    --bg: #080a0f;
    --bg-soft: #0d1118;

    /* =====================================================
       SURFACES
       ===================================================== */

    --surface: #121722;
    --surface-solid: #151b27;
    --surface-hover: #1b2331;
    --surface-raised: #202938;

    /* =====================================================
       BORDERS
       ===================================================== */

    --border: rgba(180, 195, 220, .11);
    --border-hover: rgba(180, 205, 235, .22);
    --border-strong: rgba(180, 205, 235, .30);

    /* =====================================================
       TEXT HIERARCHY
       ===================================================== */

    --text: #f5f7fb;
    --text-soft: #c5ccda;
    --text-muted: #7f899b;
    --text-faint: #596274;

    /* =====================================================
       PRIMARY — INDIGO / VIOLET
       Main actions and selected states
       ===================================================== */

    --primary: #8b9cff;
    --primary-hover: #a3b0ff;
    --primary-soft: rgba(139, 156, 255, .13);
    --primary-glow: rgba(139, 156, 255, .25);

    /* Keep old names working */
    --accent: var(--primary);
    --accent-soft: var(--primary-soft);
    --accent-glow: var(--primary-glow);

    /* =====================================================
       SECONDARY — CYAN / TEAL
       Information and secondary interaction
       ===================================================== */

    --secondary: #4fd1c5;
    --secondary-hover: #67e8dc;
    --secondary-soft: rgba(79, 209, 197, .11);
    --secondary-glow: rgba(79, 209, 197, .22);

    /* =====================================================
       ATTENTION — AMBER
       Processing / screenshot / notable actions
       ===================================================== */

    --warning: #f4b860;
    --warning-hover: #ffc978;
    --warning-soft: rgba(244, 184, 96, .12);

    /* =====================================================
       STATUS
       ===================================================== */

    --success: #65d99b;
    --success-soft: rgba(101, 217, 155, .11);

    --danger: #ff747c;
    --danger-soft: rgba(255, 116, 124, .11);

    /* =====================================================
       RADII
       ===================================================== */

    --radius-sm: 9px;
    --radius-md: 14px;
    --radius-lg: 18px;

    /* =====================================================
       SHADOWS
       ===================================================== */

    --shadow-sm:
        0 4px 18px rgba(0, 0, 0, .20);

    --shadow-md:
        0 14px 45px rgba(0, 0, 0, .32);

    --shadow-lg:
        0 24px 70px rgba(0, 0, 0, .42);

    /* =====================================================
       TRANSITION
       ===================================================== */

    --transition:
        180ms cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(110, 168, 254, .075),
            transparent 34%
        ),
        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


/* =========================================================
   HEADER
   ========================================================= */

header {
    position: sticky;
    top: 0;
    z-index: 100;

    padding: 20px 24px;

    background:
        linear-gradient(
            180deg,
            rgba(20, 26, 38, .96),
            rgba(15, 20, 29, .94)
        );

    border-bottom:
        1px solid rgba(139,156,255,.13);

    box-shadow:
        0 8px 30px rgba(0,0,0,.22);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


.header-inner {

    max-width:
        1400px;

    margin:
        auto;
}


h1 {

    margin:
        0 0 17px;

    color:
        var(--text);

    font-size:
        24px;

    font-weight:
        700;

    letter-spacing:
        -.035em;
}


/* =========================================================
   SEARCH
   ========================================================= */

#search {

    width:
        100%;

    max-width:
        720px;

    padding:
        13px 16px;

    border:
        1px solid var(--border);

    border-radius:
        11px;

    outline:
        none;

    background:
        #0B0F15;

    color:
        var(--text);

    font:
        inherit;

    font-size:
        14px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


#search::placeholder {

    color:
        var(--text-muted);
}


#search:hover {

    border-color:
        var(--border-hover);
}


#search:focus {

    border-color:
        var(--accent);

    background:
        #0D121A;

    box-shadow:
        0 0 0 3px var(--accent-soft),
        0 10px 30px rgba(0,0,0,.18);

    transform:
        translateY(-1px);
}


/* =========================================================
   MAIN
   ========================================================= */

main {

    position:
        relative;

    max-width:
        1400px;

    margin:
        0 auto;

    padding:
        32px 24px 80px;
}


/* =========================================================
   PAGE VISIBILITY
   ========================================================= */

#browserPage,
#playerPage,
#infoPage {

    display:
        none;
}


#browserPage {

    display:
        block;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {

    background:
        rgba(110,168,254,.28);

    color:
        #FFFFFF;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width:
        10px;

    height:
        10px;
}


::-webkit-scrollbar-track {

    background:
        transparent;
}


::-webkit-scrollbar-thumb {

    background:
        #252D3A;

    border:
        3px solid var(--bg);

    border-radius:
        999px;
}


::-webkit-scrollbar-thumb:hover {

    background:
        #3B485B;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;
    }
}