/* =========================================================
   VLCMUSIC / MUSIC SITE — PREMIUM DARK 2026
   FULL COMBINED CSS
   Existing HTML + class names preserved
   ========================================================= */


/* =========================================================
   1. GLOBAL RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0 auto;
    padding: 14px 12px 40px;

    max-width: 940px;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 400;
    font-style: normal;

    line-height: 1.6;

    color: #e6edf3;

    text-align: left;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(37, 99, 235, .16),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 30%,
            rgba(124, 58, 237, .08),
            transparent 28%
        ),
        #080b11;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   2. AUDIO PLAYER PROTECTION
   ========================================================= */

#jquery_jplayer_1,
#jp_container_1,
#jp_container_1 *,
#amazingaudioplayer-1,
#amazingaudioplayer-1 * {
    box-sizing: content-box;
}


/* =========================================================
   3. DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    body {
        padding: 24px 20px 55px;
    }
}


/* =========================================================
   4. LINKS
   ========================================================= */

a,
a:link,
a:visited,
a:active {
    color: #cbd5e1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

a:hover {
    color: #ffffff;
}


/* =========================================================
   PREMIUM DARK BREADCRUMBS
   Existing HTML preserved
   ========================================================= */

.breadcrumbs {
    width: 100%;
    margin: 25px 0 14px;
    padding: 10px 13px;

    background:
        linear-gradient(
            135deg,
            rgba(22, 29, 40, .96),
            rgba(13, 18, 27, .96)
        );

    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 9px;

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

.breadcrumbs {
    margin-top: 10px !important;
}
/* Breadcrumb list */

ol.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    list-style: none;

    margin: 0;
    padding: 0;

    gap: 0;
}


/* Individual items */

ol.breadcrumbs li {
    display: flex;
    align-items: center;

    margin: 0;

    color: #8b95a5;

    font-size: 12px;
    line-height: 1.5;

    white-space: nowrap;
}


/* Separator */

ol.breadcrumbs li:not(.last)::after {
    content: "›";

    display: inline-block;

    margin: 0 9px;

    color: #475569;

    font-size: 16px;
    font-weight: 400;

    transform: translateY(-1px);
}


/* Links */

ol.breadcrumbs li a {
    display: inline-block;

    margin: 0;
    padding: 3px 5px;

    color: #94a3b8;

    text-decoration: none;

    border-radius: 5px;

    transition:
        color .18s ease,
        background .18s ease;
}


/* Hover */

ol.breadcrumbs li a:hover {
    color: #60a5fa;

    background: rgba(59, 130, 246, .08);
}


/* Current / last breadcrumb */

ol.breadcrumbs li.last a {
    color: #e2e8f0;

    font-weight: 600;
}

ol.breadcrumbs li.last a:hover {
    color: #93c5fd;

    background: rgba(59, 130, 246, .08);
}


/* Schema span */

ol.breadcrumbs li span[itemprop="name"] {
    display: inline-block;
}


/* Mobile */

@media (max-width: 480px) {

    .breadcrumbs {
        margin: 8px 0 12px;

        padding: 8px 10px;

        border-radius: 8px;
    }

    ol.breadcrumbs li {
        font-size: 11px;
    }

    ol.breadcrumbs li:not(.last)::after {
        margin: 0 6px;

        font-size: 14px;
    }

    ol.breadcrumbs li a {
        padding: 2px 3px;
    }
}


/* =========================================================
   6. SIDE COVER
   ========================================================= */

.sidecover {
    border: 0;

    font-size: .77em;
    line-height: 1.7;

    color: #9ca3af;
}


/* =========================================================
   7. PARAGRAPHS
   ========================================================= */

p {
    margin: 4px;
    padding: 3px;

    font-family:
        Verdana,
        Arial,
        Helvetica,
        sans-serif;

    color: #aeb7c4;

    border: 1px solid rgba(148, 163, 184, .08);

    font-size: 12px;
}

b {
    font-weight: bold;
    color: #f1f5f9;
}


/* =========================================================
   8. HEADINGS
   ========================================================= */
/* =========================================================
   H1 & H2 — EXACT SAME AS .djlooksm (NO CHANGE IN STYLE)
   ========================================================= */

h1,
h2 {
    position: relative;

    margin: 14px 0 10px;

    padding: 13px 15px;

    min-height: 42px;

    font-size: 1rem;

    font-weight: 600;

    color: #f8fafc;

    background:
        linear-gradient(
            135deg,
            rgba(24, 32, 45, .97),
            rgba(13, 18, 27, .97)
        );

    border: 1px solid rgba(148, 163, 184, .14);

    border-radius: 10px;

    letter-spacing: .01em;

    text-align: center;

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

    overflow: hidden;
}

h1::before,
h2::before {
    content: "";

    position: absolute;

    left: 16px;
    right: 16px;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #3b82f6,
            #8b5cf6,
            #3b82f6,
            transparent
        );

    opacity: .85;
}


h3,
h4,
h5,
h6,
h7 {
    margin: 0;

    font-size: 12px;
}


/* =========================================================
   9. YOUTUBE
   ========================================================= */

.youtube_img iframe {
    display: block;

    width: 100%;
    max-width: 1024px;

    height: 300px;
    max-height: 100%;

    border: 0;

    border-radius: 10px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .28);
}


/* =========================================================
   10. TOP BAR
   ========================================================= */

.brd {
    min-height: 36px;

    margin-top: 3px;

    padding: 5px 10px;

    line-height: 26px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #05070a,
            #111827
        );

    border: 1px solid rgba(148, 163, 184, .12);

    border-bottom: 2px solid #3b82f6;

    border-radius: 8px;

    font-weight: bold;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .25);
}


/* =========================================================
   11. HEADER
   ========================================================= */

div.headertop {
    position: relative;

    height: 42px;

    padding: 0 10px;

    line-height: 39px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #030507,
            #111827
        );

    border: 1px solid rgba(148, 163, 184, .10);

    border-bottom: 2px solid #3b82f6;

    border-radius: 8px;

    font-weight: bold;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .22);
}

div.headertop::after {
    content: "";

    position: absolute;

    left: 15%;
    right: 15%;
    bottom: -2px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #3b82f6,
            #8b5cf6,
            transparent
        );
}

.style1 {
    color: #ffffff;

    font-size: 16px;

    padding: 6px;
}


/* =========================================================
   12. DJ LOOK HEADERS
   ========================================================= */

.djlooksm,
.djlook,
.djlook0,
.djlook1,
.djlook2,
.djlook3,
.djlook4,
.djlook5,
.djlook6,
.djlook7,
.djlook8,
.djlook9,
.djlook10,
.djlook11,
.djlook12,
.djlook13,
.djlook14,
.djlook15,
.djlook16,
.djlook17,
.djlook18,
.djlook19,
.djlook20,
.djlook21,
.djlook22,
.djlook23,
.djlook24,
.djlook25,
.djlook26,
.djlook27,
.djlook28,
.djlook29 {
    position: relative;

    margin: 14px 0 10px;

    padding: 13px 15px;

    min-height: 42px;

    font-size: 1rem;

    font-weight: 600;

    color: #f8fafc;

    background:
        linear-gradient(
            135deg,
            rgba(24, 32, 45, .97),
            rgba(13, 18, 27, .97)
        );

    border: 1px solid rgba(148, 163, 184, .14);

    border-radius: 10px;

    letter-spacing: .01em;

    text-align: left;

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

    overflow: hidden;
}

.djlooksm {
    text-align: center;
}

.djlook {
    text-align: center;
}

.djlook::before,
.djlooksm::before {
    content: "";

    position: absolute;

    left: 16px;
    right: 16px;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #3b82f6,
            #8b5cf6,
            #3b82f6,
            transparent
        );

    opacity: .85;
}


/* =========================================================
   13. INFO / MARQUEE
   ========================================================= */

div[style*="background:#eee"] {
    margin: 14px 0 !important;

    padding: 13px 15px !important;

    color: #aab4c2 !important;

    background:
        linear-gradient(
            135deg,
            rgba(22, 27, 34, .94),
            rgba(13, 17, 23, .94)
        ) !important;

    border: 1px solid rgba(148, 163, 184, .13) !important;

    border-radius: 10px;

    font-size: .88rem;

    text-align: center;

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

    overflow: hidden;
}

/* =========================================================
   ARTIST TOP BOX (.artisttop)
   ========================================================= */

.artisttop {
    margin: 12px 0;
    padding: 10px 14px;
    background: rgba(22, 27, 34, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #e2e8f0;
}

 /* =========================================================
   GLOBAL LINK STYLES (AS YOU REQUESTED)
   ========================================================= */

a:link, 
a:active, 
a:visited {
    color: #f8fafc;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

a:hover, 
a:focus {
    color: #3b82f6;
    text-decoration: none;
}   
.artisttop b {
    font-weight: 600;
}
/* =========================================================
   14. ABOUT SONG
   ========================================================= */

.aboutsong {


    padding: 14px;

    color: #cbd5e1;

    background:
        linear-gradient(
            135deg,
            rgba(24, 31, 42, .95),
            rgba(15, 20, 29, .95)
        );

    border: 1px solid rgba(148, 163, 184, .14);

    border-radius: 10px;

    font-size: small;

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


/* =========================================================
   15. MRJ SONG LIST
   ========================================================= */

a.mrj {
    display: block;

    width: 100%;

    margin: 0 0 7px;

    padding: 10px;

    color: #dbe4ee;

    background:
        linear-gradient(
            135deg,
            rgba(20, 27, 38, .97),
            rgba(14, 19, 28, .97)
        );

    border: 1px solid rgba(148, 163, 184, .12);

    border-radius: 10px;

    font-size: 12px;

    box-sizing: border-box;

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

a.mrj:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(30, 64, 175, .30),
            rgba(67, 56, 202, .20)
        );

    border-color: rgba(96, 165, 250, .32);

    transform: translateY(-2px);

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

ul.mrj {
    display: block;

    margin: 1em 0;

    padding-left: 4px;
}

.mrj_btn {
    display: inline-block;

    margin: 5px 0;

    padding: 6px 11px;

    color: #dbeafe;

    background: #151c27;

    border: 1px solid #334155;

    border-radius: 7px;

    font-family:
        Verdana,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: normal;

    vertical-align: middle;

    transition: .18s ease;
}

.mrj_btn:hover {
    color: #ffffff;

    background: #1e3a8a;

    border-color: #3b82f6;
}


/* =========================================================
   16. ALBUM COVERS
   ========================================================= */

img.albumcover {
    width: 60px;
    height: 60px;

    object-fit: cover;

    border: 0;

    border-radius: 9px;

    float: left;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, .30);
}

img.albumcover2 {
    width: 60px;
    height: 60px;

    object-fit: cover;

    border: 0;

    border-radius: 50%;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, .30);
}


/* =========================================================
   17. TRACKS
   ========================================================= */

.tracks {
    width: 70%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    float: left;

    padding-left: 10px;

    color: #e2e8f0;
}


/* =========================================================
   18. TABLE
   ========================================================= */

table.tip {
    width: 100%;

    background: transparent;

    border-collapse: collapse;
}

td.tip {
    padding: 5px;
}

tr.tip {
    border-bottom: 1px solid rgba(148, 163, 184, .10);
}


/* =========================================================
   19. TUNES
   ========================================================= */

.tunes {
    margin-bottom: 10px;

    padding: 11px 13px;

    text-align: center;

    color: #f8fafc;

    background:
        linear-gradient(
            135deg,
            #182334,
            #111827
        );

    border: 1px solid rgba(148, 163, 184, .14);

    border-radius: 9px;

    font-weight: bold;

    text-transform: capitalize;

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

.tunesmp3 {
    margin-top: 5px;

    padding: 10px 12px;

    text-align: left;

    color: #f8fafc;

    background:
        linear-gradient(
            135deg,
            #172033,
            #101722
        );

    border: 1px solid rgba(148, 163, 184, .12);

    border-radius: 8px;

    font-weight: bold;

    text-transform: capitalize;
}


/* =========================================================
   20. LOGO
   ========================================================= */

.logo {
    padding: 9px;

    color: #e5e7eb;

    background:
        linear-gradient(
            135deg,
            #151b25,
            #0e131b
        );

    border-bottom: 2px solid #3b82f6;

    border-radius: 7px;

    font-weight: bold;
}


/* =========================================================
   21. SEPARATOR
   ========================================================= */

.sprt {
    margin: 5px 0;

    border-bottom: 1px dashed #334155;
}


/* =========================================================
   PAGINATION / JUMP TO PAGE BOX (.matrow pagination)
   ========================================================= */

.matrow {
    margin: 14px 0;
    padding: 14px 16px;
    background: linear-gradient(
        135deg,
        rgba(22, 27, 34, .94),
        rgba(13, 17, 23, .94)
    );
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 10px;
    text-align: center;
    font-size: .9rem;
    color: #cbd5e1;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
}

.matrow b {
    display: inline-block;
    margin-bottom: 4px;
    color: #f1f5f9;
    font-size: .95rem;
}

.matrow form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
    width: 100%;
}

/* Page Number Input Box */
.matrow input[type="text"] {
    width: 55px;
    height: 38px;
    padding: 6px 8px;
    color: #f8fafc !important;
    background: #0b1017 !important;
    border: 1px solid #303b4d !important;
    border-radius: 8px !important;
    text-align: center;
    font-size: .92rem;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.matrow input[type="text"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15) !important;
}

/* Go Submit Button */
.matrow input[type="submit"] {
    height: 38px;
    padding: 0 16px;
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        #2563eb,
        #4f46e5
    ) !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(37, 99, 235, .25);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.matrow input[type="submit"]:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .32);
}

.matrow input[type="submit"]:active {
    transform: scale(.97);
}


/* =========================================================
   23. GENERAL CONTENT
   ========================================================= */

.gen {
    padding: 6px;
}

.thumb {
    float: left;
}

div.entry {
    margin: 10px 2px;

    overflow: auto;

    background: rgba(15, 23, 42, .45);

    border-radius: 8px;
}

.tdesc {
    float: left;

    margin-left: 7px;

    padding: 2px;

    font-size: 100%;

    color: #cbd5e1;
}

.atext {
    padding: 10px;

    line-height: 1.5;

    color: #cbd5e1;
}

a.nodec {
    text-decoration: none;
}

p.nocol {
    color: #e5e7eb;
}

.smallgray {
    color: #7c8797;

    font-size: 10px;
}


/* =========================================================
   24. RIKWAP
   ========================================================= */

.rikwap {
    margin: 0;

    padding: 11px 7px;

    color: #cbd5e1;

    border-bottom: 1px dashed #334155;
}

/* =========================================================
   SONG ARTIST / BRACKET TEXT
   Premium dark theme
   ========================================================= */

.mobiletul font[style*="color"] {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: .15px;
    transition: color .18s ease;
}

.mobiletul:hover font[style*="color"] {
    color: #93c5fd !important;
}

/* =========================================================
   PREMIUM BLACK AUDIO PLAYER
   MATCHES EXISTING DARK CSS
   ========================================================= */

audio {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 46px;

    margin: 14px 0 18px;

    background: #000 !important;

    border: 1px solid #252b35 !important;
    border-radius: 9px;

    color-scheme: dark;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .03);

    accent-color: #3b82f6;
}

/* Chrome / Edge / Safari */

audio::-webkit-media-controls-enclosure {
    background: #000 !important;
    border-radius: 8px;
}

audio::-webkit-media-controls-panel {
    background: #000 !important;
}

/* Native controls */

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button {
    filter: none;
}

audio::-webkit-media-controls-timeline {
    filter: none;
}

audio::-webkit-media-controls-volume-slider {
    filter: none;
}

/* Mobile */

@media (max-width: 480px) {

    audio {
        height: 44px;
        margin: 12px 0 16px;
        border-radius: 8px;
    }
}
/* =========================================================
   25. MOBILE MENU
   ========================================================= */

.mobiletul,
.mobiletul2 {
    position: relative;

    display: block;

    width: 100%;

    min-height: 50px;

    margin-bottom: 8px;

    padding: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    letter-spacing: .02em;

    font-size: 14px;

    color: #e8edf3;

    background:
        linear-gradient(
            135deg,
            rgba(22, 29, 40, .97),
            rgba(13, 18, 27, .97)
        );

    border: 1px solid rgba(148, 163, 184, .13);

    border-radius: 10px;

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

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

.mobiletul::before,
.mobiletul2::before {
    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 3px;

    height: 22px;

    transform: translateY(-50%);

    border-radius: 0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            #3b82f6,
            #8b5cf6
        );

    opacity: .75;

    transition:
        height .18s ease,
        opacity .18s ease;
}

.mobiletul a,
a .mobiletul,
.mobiletul2 a,
a .mobiletul2 {
    display: block;

    padding: 14px 12px 14px 15px;

    color: #e8edf3;
}

.mobiletul:hover,
.mobiletul2:hover,
a:hover .mobiletul,
a:hover .mobiletul2 {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(30, 64, 175, .42),
            rgba(67, 56, 202, .28)
        );

    border-color: rgba(96, 165, 250, .38);

    transform: translateY(-2px);

    box-shadow:
        0 9px 25px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(59, 130, 246, .05);
}

.mobiletul:hover::before,
.mobiletul2:hover::before,
a:hover .mobiletul::before,
a:hover .mobiletul2::before {
    height: 30px;

    opacity: 1;
}

.mobiletul a:hover,
.mobiletul2 a:hover {
    color: #ffffff;
}


/* =========================================================
   26. DOWNLOAD BUTTONS
   ========================================================= */

.down,
.down2 {
    float: left;
}

.down a,
.down2 a {
    display: inline-block;

    margin: 5px;

    padding: 10px 18px;

    color: #ffffff;

    border: 0;

    border-radius: 8px;

    font-weight: bold;

    text-decoration: none;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .22);

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}

.down a {
    background:
        linear-gradient(
            135deg,
            #0284c7,
            #2563eb
        );
}

.down2 a {
    background:
        linear-gradient(
            135deg,
            #9333ea,
            #db2777
        );
}

.down a:hover,
.down2 a:hover {
    color: #ffffff;

    filter: brightness(1.1);

    transform: translateY(-2px);

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


/* =========================================================
   27. BUTTONS
   ========================================================= */

.buttons {
    margin: 10px 0 20px;

    padding: 10px 0;
}

input[type="Back"]:hover {
    color: #ffffff;

    background: #1f2937;
}


/* =========================================================
   28. AD AREA
   ========================================================= */

.adz {
    width: 180px;
}

.adz img {
    max-width: 300px;
}


/* =========================================================
   29. CUT / FORM
   ========================================================= */

.cut_r {
    display: block;

    margin: 7px;

    padding: 0;

    color: #cbd5e1;
}

.cut_r p {
    margin: 2px 0;

    padding: 5px 4px;

    border-bottom: 1px solid rgba(148, 163, 184, .10);
}

.cut_r label {
    display: inline-block;

    padding: 7px 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    border-radius: 6px;
}

.pad.cut_r span {
    display: inline-block;

    padding: 6px 7px;

    color: #ffffff;

    background: #111827;

    border-radius: 5px;

    vertical-align: 1px;
}

.cut_r input,
.cut_r select {
    min-height: 34px;

    padding: 6px 8px;

    color: #e5e7eb;

    background: #0b1017;

    border: 1px solid #303b4d;

    border-radius: 6px;

    text-align: center;

    outline: none;

    box-shadow: none;
}

.cut_r input:focus,
.cut_r select:focus {
    border-color: #3b82f6;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, .14);
}

.cut_r select {
    margin: 0 4px;
}


/* =========================================================
   30. GENERAL BUTTON
   ========================================================= */

.btn {
    padding: 7px 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    border: 0;

    border-radius: 7px;

    font-size: 11px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 5px 13px rgba(37, 99, 235, .25);

    transition:
        transform .18s ease,
        filter .18s ease;
}

.btn:hover {
    color: #ffffff;

    filter: brightness(1.1);

    transform: translateY(-1px);
}


/* =========================================================
   31. ALBUM
   ========================================================= */

.albumCover,
.albumInfo,
.albumCoverSmall {
    float: left;
}

.albumCover img {
    width: 100px;
    height: 100px;

    object-fit: cover;

    border: 0;

    border-radius: 10px;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .35);
}

.albumCoverSmall img {
    width: 120px;
    height: 120px;

    object-fit: cover;

    border: 0;

    border-radius: 10px;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .35);
}


/* =========================================================
   32. TEXT STYLES
   ========================================================= */

.style24 {
    color: #f87171;

    font-weight: bold !important;
}

.style18 {
    color: #aeb7c4;
}


/* =========================================================
   33. SHARE
   ========================================================= */

.share a {
    display: inline-block;
}

.share a:hover,
.share a:active {
    background: rgba(255, 255, 255, .06);

    border-radius: 7px;
}

.shareicon {
    margin: 10px;
}

.share-btn.web-share {
    width: auto;

    cursor: pointer;
}

a:hover .share-btn.web-share {
    color: #60a5fa;
}

.share-buttons {
    display: none;

    justify-content: space-between;

    gap: 8px;
}

.share-btn.whatsapp {
    margin: 0 8px 0 0;

    color: #ffffff;

    background: #25d366;

    border-radius: 7px;
}

.share-btn.twitter {
    margin: 0 8px 0 0;

    color: #ffffff;

    background: #55acee;

    border-radius: 7px;
}


/* =========================================================
   34. KHANROW / PAGINATION
   ========================================================= */

.khanrow {
    margin: 18px 0;

    padding: 18px;

    color: #b7c0cc;

    background:
        linear-gradient(
            145deg,
            rgba(22, 27, 34, .97),
            rgba(15, 23, 42, .95)
        );

    border: 1px solid rgba(148, 163, 184, .14);

    border-radius: 12px;

    text-align: center;

    font-size: .9rem;

    box-shadow:
        0 7px 22px rgba(0, 0, 0, .20);
}

.khanrow b {
    display: block;

    margin-bottom: 6px;

    color: #f1f5f9;

    font-size: .98rem;
}

.khanrow form {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 8px;
}

.khanrow input[type="text"] {
    width: 58px;
    height: 38px;

    padding: 6px 9px;

    color: #f8fafc;

    background: #0b1017;

    border: 1px solid #303946;

    border-radius: 8px;

    text-align: center;

    font-size: .92rem;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.khanrow input[type="text"]:focus {
    border-color: #3b82f6;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, .15);
}

.khanrow input[type="submit"] {
    height: 38px;

    padding: 0 15px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    border: 0;

    border-radius: 8px;

    font-weight: 650;

    cursor: pointer;

    box-shadow:
        0 5px 14px rgba(37, 99, 235, .24);

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}

.khanrow input[type="submit"]:hover {
    filter: brightness(1.1);

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(37, 99, 235, .32);
}

.khanrow input[type="submit"]:active {
    transform: scale(.97);
}


/* =========================================================
   35. IMAGES
   ========================================================= */

img {
    max-width: 100%;
    height: auto;

    border-radius: 10px;
}


/* =========================================================
   36. FOOTER
   ========================================================= */

div.djlook[align="center"]:last-of-type {
    margin-top: 30px;

    padding: 10px 5px;

    color: #697586;

    background: transparent;

    border: 0;

    font-size: .82rem;

    font-weight: 400;

    box-shadow: none;
}


/* =========================================================
   37. FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #60a5fa;

    outline-offset: 2px;
}

a:focus-visible {
    outline: none;
}

a:focus-visible .mobiletul,
a:focus-visible .mobiletul2 {
    border-color: #60a5fa;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, .22),
        0 8px 22px rgba(0, 0, 0, .25);
}


/* =========================================================
   38. SELECTION
   ========================================================= */

::selection {
    color: #ffffff;

    background: rgba(59, 130, 246, .65);
}


/* =========================================================
   39. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #080b11;
}

::-webkit-scrollbar-thumb {
    background: #263142;

    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3b4a60;
}


/* =========================================================
   40. MOBILE — 600px
   ========================================================= */

@media (max-width: 600px) {

    body {
        padding: 9px 9px 30px;
    }

    .share {
        width: 96%;

        overflow: auto;

        margin: 0 auto !important;

        padding: 0 !important;
    }

    .share a {
        width: 16%;

        float: left;

        text-align: center;
    }

    .shareicon {
        margin: 10px 0 !important;
    }

    .tracks {
        width: calc(100% - 70px);
    }

    .youtube_img iframe {
        height: 230px;
    }

    .albumCover img {
        width: 85px;
        height: 85px;
    }

    .albumCoverSmall img {
        width: 95px;
        height: 95px;
    }

    .mobiletul,
    .mobiletul2 {
        min-height: 48px;

        font-size: 13px;
    }
}


/* =========================================================
   41. MOBILE — 480px
   ========================================================= */

@media (max-width: 480px) {

    body {
        padding: 8px 8px 30px;
    }

    .djlook,
    .djlook0,
    .djlook1,
    .djlook2,
    .djlook3,
    .djlook4,
    .djlook5,
    .djlook6,
    .djlook7,
    .djlook8,
    .djlook9,
    .djlook10,
    .djlook11,
    .djlook12,
    .djlook13,
    .djlook14,
    .djlook15,
    .djlook16,
    .djlook17,
    .djlook18,
    .djlook19,
    .djlook20,
    .djlook21,
    .djlook22,
    .djlook23,
    .djlook24,
    .djlook25,
    .djlook26,
    .djlook27,
    .djlook28,
    .djlook29 {
        margin: 15px 0 10px;

        padding: 12px 13px;

        font-size: .96rem;

        border-radius: 10px;
    }

    .mobiletul,
    .mobiletul2 {
        min-height: 48px;

        padding: 12px 14px;

        font-size: .91rem;

        border-radius: 10px;
    }

    .mobiletul a,
    a .mobiletul,
    .mobiletul2 a,
    a .mobiletul2 {
        padding: 13px 11px 13px 14px;
    }

    .mobiletul::before,
    .mobiletul2::before {
        margin-right: 10px;
    }

    .khanrow {
        padding: 15px 12px;
    }

    .khanrow input[type="text"] {
        width: 54px;
    }

    .khanrow input[type="submit"] {
        padding: 0 13px;
    }
}


/* =========================================================
   42. REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   GOOGLE CSE SEARCH — DARK PREMIUM
   ========================================================= */

.gcse-search {
    width: 100% !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Main Google search container */
.gsc-control-cse {
    width: 100% !important;

    padding: 12px !important;

    background: #111827 !important;

    border: 1px solid rgba(148, 163, 184, .16) !important;

    border-radius: 12px !important;

    box-shadow:
        0 7px 22px rgba(0, 0, 0, .25) !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;
}

/* Search table */
.gsc-search-box {
    margin-bottom: 0 !important;
}

/* Search input area */
.gsc-input-box {
    height: 42px !important;

    background: #0b1017 !important;

    border: 1px solid #303b4d !important;

    border-radius: 8px !important;

    box-shadow: none !important;
}

/* Input */
.gsc-input-box input.gsc-input {
    height: 40px !important;

    padding: 8px 12px !important;

    color: #f8fafc !important;

    background: transparent !important;

    font-size: 14px !important;
}

/* Placeholder */
.gsc-input-box input.gsc-input::placeholder {
    color: #7c8797 !important;
}

/* Input focus */
.gsc-input-box:focus-within {
    border-color: #3b82f6 !important;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, .14) !important;
}

/* Search button */
.gsc-search-button-v2 {
    min-width: 44px !important;
    height: 42px !important;

    margin-left: 7px !important;

    padding: 9px 14px !important;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        ) !important;

    border: 0 !important;

    border-radius: 8px !important;

    box-shadow:
        0 5px 14px rgba(37, 99, 235, .25) !important;

    transition:
        transform .18s ease,
        filter .18s ease !important;
}

.gsc-search-button-v2:hover {
    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #6366f1
        ) !important;

    filter: brightness(1.08) !important;

    transform: translateY(-1px) !important;
}

/* Remove Googles white result background */
.gsc-results {
    background: transparent !important;
}

.gsc-resultsbox-visible {
    background: transparent !important;
}

/* Search results */
.gsc-webResult.gsc-result {
    margin: 8px 0 !important;

    padding: 12px !important;

    background: #111827 !important;

    border: 1px solid rgba(148, 163, 184, .12) !important;

    border-radius: 9px !important;
}

/* Result title */
.gs-title,
.gs-title b {
    color: #60a5fa !important;
}

.gs-title:hover,
.gs-title:hover b {
    color: #93c5fd !important;
}

/* Result text */
.gs-snippet {
    color: #aab4c2 !important;
}

/* URL */
.gs-visibleUrl {
    color: #64748b !important;
}

/* Result divider */
.gsc-above-wrapper-area,
.gsc-result-info {
    color: #7c8797 !important;

    border-color: rgba(148, 163, 184, .10) !important;
}

/* Tabs */
.gsc-tabHeader.gsc-tabhActive {
    color: #60a5fa !important;

    border-bottom-color: #3b82f6 !important;
}

.gsc-tabHeader {
    color: #94a3b8 !important;
}

/* Google branding area */
.gsc-branding,
.gsc-branding-text {
    background: transparent !important;
}

/* Clear button */
.gsc-clear-button {
    background-color: transparent !important;
}

/* Mobile */
@media (max-width: 480px) {

    .gsc-control-cse {
        padding: 9px !important;

        border-radius: 10px !important;
    }

    .gsc-input-box {
        height: 40px !important;
    }

    .gsc-search-button-v2 {
        height: 40px !important;

        min-width: 42px !important;

        padding: 8px 11px !important;
    }
}

/* =========================================================
   CUSTOM SEARCH BOX (.vlcserch)
   ========================================================= */

.vlcserch {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.vlcserch input[type="text"] {
    flex: 1;
    min-width: 140px;
    height: 38px;
    padding: 6px 12px;
    color: #f8fafc !important;
    background: #0b1017 !important;
    border: 1px solid #303b4d !important;
    border-radius: 8px !important;
    font-size: 13px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.vlcserch input[type="text"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15) !important;
}

.vlcserch select {
    height: 38px;
    padding: 6px 10px;
    color: #f8fafc !important;
    background: #0b1017 !important;
    border: 1px solid #303b4d !important;
    border-radius: 8px !important;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.vlcserch select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15) !important;
}

.vlcserch input[type="submit"] {
    height: 38px;
    padding: 0 16px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(37, 99, 235, .25);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.vlcserch input[type="submit"]:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .32);
}

.vlcserch input[type="submit"]:active {
    transform: scale(.97);
}