/* ==========================================================================
   REMIX4MUSIC — COMPLETE MODERN DARK BLUE CSS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');


/* ==========================================================================
   ROOT VARIABLES
   ========================================================================== */

:root {

    --bg: #030712;
    --bg-soft: #070b14;
    --card: #0b1220;
    --card-soft: #0d1324;

    --white: #ffffff;
    --text: #f1f5f9;
    --muted: #94a3b8;

    --cyan: #00e5ff;
    --blue: #00a8ff;
    --blue-dark: #0047ff;

    --border: rgba(255,255,255,0.06);
    --border-blue: rgba(0,229,255,0.14);

    --shadow:
        0 10px 30px rgba(0,0,0,.45);

}


/* ==========================================================================
   GLOBAL
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {

    background:
        radial-gradient(
            circle at top,
            rgba(0,168,255,.055),
            transparent 35%
        ),
        var(--bg);

    margin: 0;
    padding: 0;

    font-size: 13px;
    line-height: 24px;

    color: var(--text);

    font-family:
        'Plus Jakarta Sans',
        Arial,
        Helvetica,
        sans-serif;
}

body * {

    margin: 0;
    padding: 0;

    font-family:
        'Plus Jakarta Sans',
        Arial,
        Helvetica,
        sans-serif;

    box-sizing: border-box;
}


a {

    text-decoration: none;

    color: var(--cyan);

    transition:
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

a:hover {

    color: var(--blue);

    text-shadow: none;
}


a img,
:link img,
:visited img {

    border: none;
}


body,
td {

    margin: 0;
    padding: 0;

    font-size: 13px;

    text-transform: capitalize;
}


b {
    font-weight: 700;
}


/* ==========================================================================
   INPUTS
   ========================================================================== */

input,
select,
textarea {

    padding: 10px 16px;

    border-radius: 10px;

    border:
        1px solid
        rgba(0,229,255,.10);

    background:
        var(--card);

    color: #fff;

    outline: none;

    font-size: 13px;

    transition: all .3s ease;
}


input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 12px
        rgba(0,168,255,.12);
}


/* ==========================================================================
   LOGO AREA — COMPACT
   ========================================================================== */

.logo {

    background:
        linear-gradient(
            165deg,
            #020711 0%,
            #061525 60%,
            #03233a 100%
        );

    padding:
        6px 10px 4px;

    text-align:
        center;

    border-bottom:
        2px solid
        rgba(0,229,255,.16);

    box-shadow:
        0 5px 20px
        rgba(0,168,255,.07);

    line-height:
        0;

    position:
        relative;
}


/* Small bottom accent */

.logo:after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -2px;

    transform:
        translateX(-50%);

    width: 120px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00a8ff,
            #00e5ff,
            #00a8ff,
            transparent
        );
}


.logo a {

    display:
        inline-block;

    line-height:
        0;

    text-decoration:
        none;
}


.logo img {

    display:
        block;

    width:
        280px;

    height:
        90px;

    max-width:
        100%;

    object-fit:
        contain;

    margin:
        0 auto;

    filter:
        drop-shadow(
            0 3px 8px
            rgba(0,0,0,.75)
        );

    transition:
        transform .3s ease;
}


.logo a:hover img {

    transform:
        scale(1.015);

    filter:
        drop-shadow(
            0 4px 10px
            rgba(0,168,255,.18)
        );
}


/* ==========================================================================
   HEADINGS
   ========================================================================== */

h1,
h2,
h3,
h4,
.title {

    font-family:
        'Orbitron',
        sans-serif;

    padding:
        5px 7px;

    font-weight:
        700;

    color:
        #ffffff;

    margin-top:
        8px;

    margin-bottom:
        8px;

    text-align:
        left;

    border:
        none;

    border-radius:
        8px;

    letter-spacing:
        .8px;

    text-shadow:
        0 2px 4px rgba(0,0,0,.6);

    box-shadow:
        0 4px 20px rgba(0,0,0,.32);

}


/* H1 */

h1 {

    font-size:
        14.5px;

    background:
        linear-gradient(
            135deg,
            #0066ff,
            #0047ff 60%,
            #00e5ff
        );
}


/* H2 */

h2 {

    font-size:
        14px;

    background:
        linear-gradient(
            135deg,
            #0047ff,
            #00a8ff 60%,
            #00c8ff
        );
}


h2 a {

    color:
        #fff;

    border-bottom:
        1px dashed
        rgba(255,255,255,.45);
}


h2 a:hover {

    color:
        #00e5ff;

    text-shadow:
        none;
}


/* H3 */

h3 {

    font-size:
        13.5px;

    background:
        linear-gradient(
            135deg,
            #061525,
            #0b2940 50%,
            #0077ff
        );

    border-left:
        4px solid
        #00e5ff;
}


/* H4 */

h4 {

    font-size:
        13px;

    background:
        linear-gradient(
            135deg,
            #03152b,
            #005bff 50%,
            #00d9ff
        );
}


/* Main title */

.title {

    background:
        linear-gradient(
            90deg,
            #006cff,
            #00c8ff
        );
}


/* ==========================================================================
   HEAD SECTIONS
   ========================================================================== */

div.head3 {

    font-family:
        'Orbitron',
        sans-serif;

    background:
        #07111f;

    color:
        #00e5ff;

    font-weight:
        700;

    padding:
        14px 16px;

    border-top:
        3px solid
        #00a8ff;

    font-size:
        13px;

    border-radius:
        8px;

    letter-spacing:
        .5px;
}


.headblue {

    font-family:
        'Orbitron',
        sans-serif;

    padding:
        12px 16px;

    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #0077ff
        );

    font-weight:
        700;

    color:
        #030712;

    margin-top:
        6px;

    text-transform:
        capitalize;

    text-align:
        left;

    border-radius:
        8px;

    letter-spacing:
        .5px;
}


/* ==========================================================================
   LISTINGS
   ========================================================================== */

.list,
.infoline,
.fl,
.catRow,
.catRowHome,
.artistRow {

    background:
        rgba(13,19,36,.72);

    border-bottom:
        1px solid
        rgba(255,255,255,.02);

    padding:
        14px 16px;

    transition:
        all .25s ease;
}


.list:hover,
.fl:hover,
.catRow:hover,
.catRowHome:hover,
.artistRow:hover {

    background:
        rgba(255,255,255,.035);

    backdrop-filter:
        blur(8px);

    padding-left:
        20px;
}


.catRow a,
.catRowHome a,
.artistRow a,
.fl a {

    display:
        block;

    font-weight:
        700;

    color:
        #e2e8f0;

    padding:
        2px 0;
}


.catRow a div span,
.catRow span.arn,
.fl span.ar {

    color:
        #00a8ff;

    font-weight:
        700;
}


.fl span.alb {

    color:
        #00e5ff;

    font-style:
        italic;
}


.path {

    background:
        #07111f;

    padding:
        12px 16px;

    text-align:
        left;

    border:
        1px solid
        rgba(0,229,255,.10);

    color:
        #00e5ff;

    font-weight:
        700;

    border-radius:
        8px;

    margin:
        10px 0;
}


/* ==========================================================================
   ALBUM / THUMBNAILS
   ========================================================================== */

.albumInfo,
.albumCoverSmall {

    text-align:
        center;
}


.albumCoverSmall img,
.absmiddle {

    width:
        220px;

    height:
        240px;

    object-fit:
        cover;

    border:
        2px solid
        rgba(255,255,255,.05);

    padding:
        5px;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.55);

    border-radius:
        16px;

    margin:
        18px auto;

    background:
        #0b1220;
}


.fl a img {

    border-radius:
        50%;

    margin-right:
        12px;

    vertical-align:
        middle;

    border:
        2px solid
        rgba(0,229,255,.15);

    padding:
        2px;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.5);

    max-width:
        60px;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button,
.fi,
.more2,
.donate {

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-weight:
        800;

    border-radius:
        30px;

    color:
        #fff;

    padding:
        10px 24px;

    text-align:
        center;

    display:
        inline-block;

    cursor:
        pointer;

    border:
        none;

    transition:
        all .3s ease;
}


.fi {

    background:
        linear-gradient(
            135deg,
            #00e5ff,
            #0077ff
        );

    color:
        #030712;

    margin-bottom:
        20px;

    box-shadow:
        0 4px 15px
        rgba(0,168,255,.22);
}


.fi:hover {

    background:
        #00a8ff;

    color:
        #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 18px
        rgba(0,168,255,.28);
}


.more2 {

    background:
        linear-gradient(
            135deg,
            #0047ff,
            #00a8ff
        );

    box-shadow:
        0 4px 15px
        rgba(0,71,255,.22);
}


.more2:hover {

    filter:
        brightness(1.12);

    transform:
        translateY(-2px);
}


/* ==========================================================================
   DOWNLOAD LINKS
   ========================================================================== */

.dwnLink1,
.dwnLink2,
.dwnLink3,
.dwnLink4,
.dwnLink5,
.dwnLink11,
.dwnLink12,
.dwnLink13,
.dwnLink14,
.dwnLink15,
.dwnLink16 {

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-weight:
        800;

    border-radius:
        30px;

    color:
        #fff !important;

    display:
        inline-block;

    margin:
        6px;

    padding:
        12px 26px;

    text-align:
        center;

    box-shadow:
        0 4px 15px
        rgba(0,0,0,.32);

    transition:
        all .3s ease;
}


.dwnLink1,
.dwnLink11 {
    background:
        linear-gradient(
            135deg,
            #0066ff,
            #06b6d4
        );
}


.dwnLink2,
.dwnLink12 {
    background:
        linear-gradient(
            135deg,
            #00a8ff,
            #0047ff
        );
}


.dwnLink3,
.dwnLink13 {
    background:
        linear-gradient(
            135deg,
            #0077ff,
            #00c88a
        );
}


.dwnLink4,
.dwnLink14 {
    background:
        linear-gradient(
            135deg,
            #0066ff,
            #00c8ff
        );
}


.dwnLink5,
.dwnLink15 {
    background:
        linear-gradient(
            135deg,
            #0047ff,
            #001eff
        );
}


.dwnLink16 {
    background:
        linear-gradient(
            135deg,
            #00e5ff,
            #0066ff
        );
}


.dwnLink1:hover,
.dwnLink2:hover,
.dwnLink3:hover,
.dwnLink4:hover,
.dwnLink5:hover,
.dwnLink11:hover,
.dwnLink12:hover,
.dwnLink13:hover,
.dwnLink14:hover,
.dwnLink15:hover,
.dwnLink16:hover {

    transform:
        translateY(-2px) scale(1.01);

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

    filter:
        brightness(1.08);
}


.dwnLink11,
.dwnLink12,
.dwnLink13,
.dwnLink14,
.dwnLink15,
.dwnLink16 {

    width:
        85%;

    max-width:
        280px;

    padding:
        10px 20px;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

.mail {

    margin:
        15px;
}


.mail input,
.mail select,
.mail textarea {

    padding:
        10px;

    background:
        #0b1220;

    color:
        #fff;

    border:
        1px solid
        rgba(255,255,255,.05);

    border-radius:
        8px;

    width:
        90%;

    max-width:
        350px;
}


.mail input[type=submit] {

    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #0077ff
        );

    color:
        #030712;

    border:
        none;

    border-radius:
        30px;

    font-weight:
        800;

    width:
        auto;

    padding:
        10px 24px;

    cursor:
        pointer;
}


.mail input[type=reset] {

    background:
        #ef4444;

    border:
        none;

    border-radius:
        30px;

    color:
        #fff;

    font-weight:
        700;

    width:
        auto;

    padding:
        10px 24px;

    cursor:
        pointer;
}


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

.search {

    background:
        #070b14;

    padding:
        14px 16px;

    border-radius:
        10px;

    border:
        1px solid
        rgba(255,255,255,.04);
}


.search input {

    border:
        1px solid
        rgba(255,255,255,.08);

    padding:
        8px 16px;

    background:
        #0b1220;

    border-radius:
        24px;

    width:
        60%;
}


.search input:focus {

    border-color:
        #00a8ff;
}


.search input[type=submit] {

    background:
        linear-gradient(
            90deg,
            #00a8ff,
            #0047ff
        );

    color:
        #fff;

    border:
        none;

    padding:
        8px 20px;

    width:
        auto;

    margin-left:
        6px;

    cursor:
        pointer;
}


/* ==========================================================================
   MODERN SEARCH FORM
   ========================================================================== */

.modern-search-form {

    display:
        flex;

    align-items:
        center;

    background:
        #0b1220;

    border-radius:
        30px;

    padding:
        5px 7px 5px 14px;

    border:
        1px solid
        rgba(0,229,255,.10);
}


.modern-search-form input {

    border:
        none;

    background:
        transparent;

    flex:
        1;

    padding:
        8px;

    color:
        #fff;
}


.modern-search-form input:focus {

    border:
        none;

    box-shadow:
        none;
}


.modern-search-form button {

    border:
        none;

    background:
        linear-gradient(
            90deg,
            #00a8ff,
            #0047ff
        );

    color:
        #fff;

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    cursor:
        pointer;

    box-shadow:
        0 4px 12px
        rgba(0,168,255,.20);
}


/* ==========================================================================
   UPLOAD
   ========================================================================== */

.upload input[type=file] {

    background:
        #0b1220;

    color:
        #94a3b8;

    border:
        1px dashed
        rgba(0,229,255,.20);

    border-radius:
        10px;

    padding:
        12px;
}


.upload .input {

    background:
        #0b1220;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:
        10px;

    padding:
        10px;
}


.upload .button {

    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #0066ff
        );

    border-radius:
        30px;

    padding:
        10px 22px;
}


.upload .addmore input {

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:
        24px 0 0 24px;

    padding:
        10px 16px;
}


.upload .addmore .button {

    background:
        linear-gradient(
            90deg,
            #00c8ff,
            #0066ff
        );

    border-radius:
        0 24px 24px 0;

    padding:
        10px 22px;
}


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pgn,
.pgn2 {

    text-align:
        left;

    padding:
        14px;

    background:
        #070b14;

    border-radius:
        8px;

    margin-top:
        12px;

    border:
        1px solid
        rgba(255,255,255,.04);
}


.pgn a,
.pgn span,
.pgn2 a,
.pgn2 span {

    border:
        1px solid
        rgba(255,255,255,.06);

    padding:
        6px 12px;

    margin:
        0 4px;

    background:
        #0b1220;

    border-radius:
        8px;

    color:
        #f1f5f9;

    font-weight:
        700;
}


.pgn a:hover,
.pgn2 a:hover,
.pgn span,
.pgn2 span.active {

    background:
        linear-gradient(
            90deg,
            #00a8ff,
            #0047ff
        );

    border-color:
        transparent;

    color:
        #fff;

    box-shadow:
        0 0 10px
        rgba(0,168,255,.18);
}


/* ==========================================================================
   SORTING
   ========================================================================== */

.sort-wrapper {

    display:
        flex;

    justify-content:
        flex-start;

    gap:
        8px;

    padding:
        12px 0;
}


.sort-pill {

    padding:
        7px 16px;

    border-radius:
        24px;

    font-size:
        12px;

    color:
        #94a3b8;

    background:
        #0b1220;

    border:
        1px solid
        rgba(255,255,255,.05);

    font-weight:
        700;
}


.sort-pill.active,
.sort-pill:hover {

    background:
        linear-gradient(
            90deg,
            #00a8ff,
            #0047ff
        );

    color:
        #fff;

    border-color:
        transparent;

    box-shadow:
        0 4px 10px
        rgba(0,168,255,.18);
}


/* ==========================================================================
   GLASS CARD
   ========================================================================== */

.glass-card {

    background:
        rgba(13,19,36,.78);

    backdrop-filter:
        blur(14px);

    border:
        1px solid
        rgba(255,255,255,.04);

    border-radius:
        16px;

    margin:
        14px;

    padding:
        18px;

    box-shadow:
        0 12px 40px
        rgba(0,0,0,.45);
}


.flex-row {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}


.file-thumb-container img {

    width:
        65px;

    height:
        65px;

    border-radius:
        12px;

    object-fit:
        cover;

    border:
        2px solid
        rgba(255,255,255,.06);

    box-shadow:
        0 6px 16px
        rgba(0,0,0,.5);
}


.file-name {

    font-weight:
        700;

    color:
        #fff;

    font-size:
        14px;
}


.meta {

    font-size:
        11px;

    color:
        #94a3b8;

    margin-top:
        5px;
}


.meta .hits {

    color:
        #00e5ff;

    margin-left:
        14px;

    font-weight:
        700;
}


/* ==========================================================================
   AUDIO PLAYER
   ========================================================================== */

#audioPlayer {

    background:
        #070b14 !important;

    border:
        1px solid
        rgba(0,229,255,.14) !important;

    border-radius:
        30px !important;

    padding:
        8px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.55);

    width:
        100%;

    max-width:
        500px;

    display:
        block;

    margin:
        18px auto;
}


@media only screen and (min-width:768px) {

    #audioPlayer {
        width:
            50%;
    }

}


/* ==========================================================================
   MISC
   ========================================================================== */

.sr-wow {

    font-family:
        'Orbitron',
        sans-serif;

    padding:
        5px 14px;

    font-size:
        10px;

    font-weight:
        700;

    color:
        #fff;

    margin:
        6px 0;

    border-radius:
        40px;

    background:
        linear-gradient(
            90deg,
            #00a8ff,
            #0047ff
        );

    display:
        inline-block;

    box-shadow:
        0 4px 10px
        rgba(0,168,255,.18);
}


/* ==========================================================================
   COLOR LABELS
   ========================================================================== */

.gray {

    background:
        #0b1220;

    color:
        #cbd5e1;

    border:
        1px solid
        rgba(255,255,255,.05);
}


.red {

    background:
        rgba(239,68,68,.08);

    color:
        #f87171;

    border:
        1px solid
        rgba(239,68,68,.15);
}


.blue {

    background:
        rgba(14,165,233,.08);

    color:
        #38bdf8;

    border:
        1px solid
        rgba(14,165,233,.15);
}


.purple {

    background:
        rgba(168,85,247,.08);

    color:
        #c084fc;

    border:
        1px solid
        rgba(168,85,247,.15);
}


.yellow {

    background:
        rgba(234,179,8,.08);

    color:
        #ffd166;

    border:
        1px solid
        rgba(234,179,8,.15);
}


.green {

    background:
        rgba(16,185,129,.08);

    color:
        #34d399;

    border:
        1px solid
        rgba(16,185,129,.15);
}


/* ==========================================================================
   FILE NAME
   ========================================================================== */

.fileName {

    font-weight:
        700;

    color:
        #00a8ff;
}


.fileName span {

    color:
        #94a3b8;
}


/* ==========================================================================
   CHECKBOX
   ========================================================================== */

.checkmark {

    position:
        absolute;

    top:
        0;

    left:
        0;

    height:
        20px;

    width:
        20px;

    background-color:
        #0b1220;

    border:
        2px solid
        #1e293b;

    border-radius:
        5px;
}


.container:hover input ~ .checkmark {

    background-color:
        #1e293b;
}


.container input:checked ~ .checkmark {

    background-color:
        #00a8ff;

    border-color:
        #00a8ff;

    box-shadow:
        0 0 8px
        rgba(0,168,255,.45);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .logo {

        padding:
            5px 8px 3px;
    }

    .logo img {

        width:
            280px;

        height:
            90px;

        max-width:
            92vw;
    }

    .glass-card {

        margin:
            10px;

        padding:
            14px;
    }

    .flex-row {

        gap:
            10px;
    }

    .albumCoverSmall img,
    .absmiddle {

        width:
            190px;

        height:
            210px;
    }

}


@media (max-width: 480px) {

    body,
    td {

        font-size:
            12px;
    }

    .logo img {

        width:
            260px;

        height:
            82px;
    }

    h1,
    h2,
    h3,
    h4,
    .title {

        margin-top:
            6px;

        margin-bottom:
            6px;
    }

    .pgn,
    .pgn2 {

        padding:
            10px;
    }

    .pgn a,
    .pgn span,
    .pgn2 a,
    .pgn2 span {

        padding:
            5px 9px;

        margin:
            2px;
    }

    .dwnLink1,
    .dwnLink2,
    .dwnLink3,
    .dwnLink4,
    .dwnLink5,
    .dwnLink11,
    .dwnLink12,
    .dwnLink13,
    .dwnLink14,
    .dwnLink15,
    .dwnLink16 {

        margin:
            4px;

        padding:
            10px 18px;
    }

}


/* ==========================================================================
   EXTRA SMALL DEVICES
   ========================================================================== */

@media (max-width: 360px) {

    .logo img {

        width:
            235px;

        height:
            74px;
    }

    .albumCoverSmall img,
    .absmiddle {

        width:
            170px;

        height:
            190px;
    }

}

/* ==========================================================================
   REMIX4MUSIC — PREMIUM NAV OVERRIDE
   Add this section at the end to upgrade the top navigation buttons.
   ========================================================================== */

.sort-wrapper {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding:16px 10px;
}

.sort-pill {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:145px;
    padding:12px 22px;
    color:#fff !important;
    background:linear-gradient(135deg,rgba(0,229,255,.13),rgba(0,71,255,.22));
    border:1px solid rgba(0,229,255,.24);
    border-radius:14px;
    font-family:'Plus Jakarta Sans',Arial,sans-serif;
    font-size:12px;
    font-weight:800;
    letter-spacing:.25px;
    text-decoration:none;
    box-shadow:0 8px 25px rgba(0,0,0,.35),
               inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    overflow:hidden;
    transition:transform .3s ease,
               background .3s ease,
               border-color .3s ease,
               box-shadow .3s ease;
}

.sort-pill::before {
    content:"";
    position:absolute;
    top:0;
    left:-130%;
    width:75%;
    height:100%;
    background:linear-gradient(110deg,transparent,rgba(255,255,255,.28),transparent);
    transform:skewX(-20deg);
    transition:left .65s ease;
}

.sort-pill::after {
    content:"";
    position:absolute;
    left:15%;
    right:15%;
    bottom:0;
    height:2px;
    background:linear-gradient(90deg,transparent,#00e5ff,#0077ff,transparent);
    box-shadow:0 0 10px rgba(0,229,255,.7);
    opacity:.8;
}

.sort-pill:hover {
    color:#fff !important;
    transform:translateY(-4px) scale(1.025);
    background:linear-gradient(135deg,rgba(0,229,255,.27),rgba(0,71,255,.38));
    border-color:rgba(0,229,255,.65);
    box-shadow:0 14px 35px rgba(0,71,255,.32),
               0 0 22px rgba(0,229,255,.12),
               inset 0 1px 0 rgba(255,255,255,.12);
}

.sort-pill:hover::before {
    left:140%;
}

.sort-pill.active {
    color:#030712 !important;
    background:linear-gradient(135deg,#00e5ff,#0077ff,#0047ff);
    border-color:transparent;
    box-shadow:0 8px 28px rgba(0,168,255,.35),
               0 0 20px rgba(0,229,255,.18);
}

/* Premium download buttons */
.dwnLink1,.dwnLink2,.dwnLink3,.dwnLink4,.dwnLink5,
.dwnLink11,.dwnLink12,.dwnLink13,.dwnLink14,.dwnLink15,.dwnLink16 {
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 8px 24px rgba(0,0,0,.35),
               inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.dwnLink1::before,.dwnLink2::before,.dwnLink3::before,
.dwnLink4::before,.dwnLink5::before,.dwnLink11::before,
.dwnLink12::before,.dwnLink13::before,.dwnLink14::before,
.dwnLink15::before,.dwnLink16::before {
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;
    background:linear-gradient(110deg,transparent,rgba(255,255,255,.25),transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
}

.dwnLink1:hover::before,.dwnLink2:hover::before,.dwnLink3:hover::before,
.dwnLink4:hover::before,.dwnLink5:hover::before,.dwnLink11:hover::before,
.dwnLink12:hover::before,.dwnLink13:hover::before,.dwnLink14:hover::before,
.dwnLink15:hover::before,.dwnLink16:hover::before {
    left:140%;
}

/* Premium cards */
.glass-card {
    background:linear-gradient(145deg,rgba(13,25,45,.88),rgba(6,13,27,.88));
    border:1px solid rgba(0,229,255,.09);
    box-shadow:0 18px 45px rgba(0,0,0,.48),
               inset 0 1px 0 rgba(255,255,255,.035);
}

/* Premium pagination */
.pgn a,.pgn span,.pgn2 a,.pgn2 span {
    border-radius:10px;
    transition:all .25s ease;
}

.pgn a:hover,.pgn2 a:hover,
.pgn span,.pgn2 span.active {
    transform:translateY(-2px);
}

/* Premium search */
.modern-search-form {
    box-shadow:0 8px 28px rgba(0,0,0,.30),
               inset 0 1px 0 rgba(255,255,255,.04);
}

/* Premium mobile navigation */
@media (max-width:600px) {
    .sort-wrapper {
        gap:8px;
        padding:12px 6px;
    }

    .sort-pill {
        min-width:calc(50% - 8px);
        padding:10px 12px;
        font-size:11px;
        border-radius:12px;
    }
}

@media (max-width:360px) {
    .sort-pill {
        min-width:100%;
    }
}