:root {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --bg-main: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --radius: 12px;
}

/* =========================================
   1. BASE & TYPOGRAPHY
   ========================================= */
body {
    color: var(--text-main);
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    background: var(--bg-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a, a:link, a:active, a:visited {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover, a:focus {
    color: var(--primary-hover);
    text-decoration: none;
}

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

p {
    margin: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 14px;
}

b { 
    font-weight: 600;
}

/* =========================================
   2. HEADINGS & TITLES
   ========================================= */
h1 {
    text-align: left;
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    color: #fff;
    margin: 12px 16px;
    font-size: 16px;
    padding: 12px 16px;
    font-weight: 700;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

h2, .section-title {
    text-align: left;
    padding: 12px 16px;
    background: #eef2ff;
    border-left: 4px solid var(--primary);
    font-weight: 600;
    color: var(--primary);
    margin: 16px 16px 8px 16px;
    font-size: 15px;
    border-radius: 0 8px 8px 0;
}

h3, h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin: 12px 16px;
    padding: 0;
    line-height: 1.4;
}

h5, h6, h7 {
    color: #fff;
    margin: 10px 16px;
    font-weight: 600;
    font-size: 13px;
    background: var(--primary);
    padding: 8px 12px;
    border-radius: 6px;
}

div.headertop {
    background-color: #0f172a;
    color: #fff;
    height: auto;
    padding: 10px 16px;
    border-bottom: 3px solid #E4A915;
    font-weight: 600;
    border-radius: var(--radius) var(--radius) 0 0;
    margin: 12px 16px 0;
}

.mainTitle {
    background: #eef2ff;
    color: var(--text-main);
    font-weight: 600;
    padding: 10px 16px;
    border-top: 3px solid var(--primary);
    border-radius: 6px;
    margin: 12px 16px;
}

/* =========================================
   3. HEADER, NAV & BREADCRUMBS
   ========================================= */
.tophead {
    background: #0f172a;
    padding: 14px 20px;
    border-bottom: 2px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tophead a {
    display: inline-flex;
    align-items: center;
    color: white;
}

.tophead img {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: transform 0.2s ease;
}

.tophead img:hover {
    transform: scale(1.03);
}

.logo { 
    background: var(--card-bg); 
    border-bottom: 2px solid var(--primary);
    font-weight: bold;
    color: var(--text-main);
    padding: 12px 16px; 
    border-radius: var(--radius) var(--radius) 0 0;
}

/* Top Navigation (Modernized) */
.topnav {
    overflow: hidden;
    background-color: #1e293b;
    border-radius: 8px;
    margin: 12px 16px;
}
.topnav a {
    float: left;
    display: block;
    color: #f8fafc;
    text-align: center;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
}
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: var(--primary);
    color: white;
}
.topnav .active {
    background-color: var(--primary);
    color: white;
}
.topnav .icon { display: none; }

.dropdown { float: left; overflow: hidden; }
.dropdown .dropbtn {
    font-size: 15px;    
    border: none;
    outline: none;
    color: white;
    padding: 12px 16px;
    background-color: inherit;
    font-weight: 500;
    margin: 0;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--card-bg);
    min-width: 160px;
    box-shadow: 0px 8px 24px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 99;
    border: 1px solid var(--border-color);
}
.dropdown-content a {
    float: none;
    color: var(--text-main);
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.dropdown-content a:hover {
    background-color: #f1f5f9;
    color: var(--primary);
}
.dropdown:hover .dropdown-content { display: block; }

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn { display: none; }
    .topnav a.icon { float: right; display: block; }
    .topnav.responsive { position: relative; }
    .topnav.responsive .icon { position: absolute; right: 0; top: 0; }
    .topnav.responsive a { float: none; display: block; text-align: left; }
    .topnav.responsive .dropdown { float: none; }
    .topnav.responsive .dropdown-content { position: relative; }
    .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; }
}

/* Breadcrumbs Combined Style */
ol.breadcrumbs, ul.breadcrumb {
    list-style: none;
    background: var(--card-bg);
    margin: 12px 16px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
ol.breadcrumbs li, ul.breadcrumb li {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
}
ol.breadcrumbs li:after, ul.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: #94a3b8;
}
ol.breadcrumbs li.last:after { content: none; }
ol.breadcrumbs a, ul.breadcrumb a {
    color: var(--primary);
    font-weight: 500;
}

div.breadcrumbs {
    background: var(--card-bg);
    margin: 12px 16px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 13.5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

div.breadcrumbs div[itemprop="itemListElement"] {
    display: inline-flex !important; 
    align-items: center;
}

div.breadcrumbs a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

div.breadcrumbs a:hover {
    color: var(--primary-hover);
}

div.breadcrumbs span[itemprop="name"] {
    color: inherit;
}

/* =========================================
   4. SEARCH
   ========================================= */
.searchwrap {
    width: 92%;
    max-width: 600px;
    margin: 14px auto;
}
.searchbar {
    width: 100%;
    display: flex;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    overflow: hidden;
}
.searchTerm {
    width: 100%;
    border: none;
    padding: 12px 16px;
    font-size: 14px;
    outline: none;
    background: transparent;
    color: var(--text-main);
}
.searchButton {
    border: none;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.searchButton:hover {
    background: var(--primary-hover);
}
.jattsearch {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 22 22' fill='white' xmlns='http://www.w3.org/2000/svg'><path d='M18.677 19.607l-5.715-5.716a6 6 0 0 1-7.719-9.133a6 6 0 0 1 9.134 7.718l5.715 5.716l-1.414 1.414l-.001.001zM9.485 5a4 4 0 1 0 2.917 1.264l.605.6l-.682-.68l-.012-.012A3.972 3.972 0 0 0 9.485 5z'/></svg>");
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* =========================================
   5. MEDIA (AUDIO/VIDEO/IMAGES)
   ========================================= */
audio {
    width: 100%;
    border-radius: 30px;
    outline: none;
    margin: 10px 0;
}
audio::-internal-media-controls-download-button { display: none; }
audio::-webkit-media-controls-enclosure { overflow: hidden; }
audio::-webkit-media-controls-panel { width: calc(100% + 30px); }

.videoboxmini { float: left; width: 100%; padding: 12px; box-sizing: border-box; }
.wrapper { width: 100%; max-width: 700px; padding: 10px; box-sizing: border-box; margin: 0 auto; }
.youtube {
    background-color: #000;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.youtube img { width: 100%; top: -16.82%; left: 0; opacity: 0.8; position: absolute; transition: opacity 0.3s; }
.youtube:hover img { opacity: 1; }
.youtube .play-button {
    width: 90px; height: 60px; background-color: #e52d27; box-shadow: 0 0 30px rgba(0,0,0,0.6); 
    z-index: 1; opacity: 0.9; border-radius: 12px; position: absolute;
    top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); transition: background 0.3s;
}
.youtube:hover .play-button { background-color: #ff0000; opacity: 1; }
.youtube .play-button:before {
    content: ""; border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent #fff;
    position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);
}
.youtube iframe { height: 100%; width: 100%; top: 0; left: 0; position: absolute; }

/* Image Covers */
.albumcover, .albumcover2, .albumCover img, .albumCoverSmall img {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    object-fit: cover;
}
img.albumcover { width: 70px; height: 70px; float: left; }
img.albumcover2 { width: 60px; height: 60px; border-radius: 50%; }
.albumCover img { width: 100px; height: 100px; float: left; }
.albumCoverSmall img { width: 120px; height: 120px; float: left; }
.albumInfo { float: left; padding-left: 14px; }
.thumb { float: left; border-radius: 6px; }

/* =========================================
   6. LISTS, LINKS & ITEMS (Riskyjatt, Pendu)
   ========================================= */
a.riskyjatt, div.riskyjatt, .riskyjatt2 {
    background: var(--card-bg);
    margin: 6px 16px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-main);
    display: block;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
a.riskyjatt:hover, div.riskyjatt:hover, .riskyjatt2:hover {
    background: #f1f5f9;
    border-color: var(--primary);
    color: var(--primary-hover);
}
div.riskyjatt a {
    color: inherit; text-decoration: none; display: block; width: 100%;
}

/* Image fixes for folder icon vs mp3 icon */
.riskyjatt img {
    display: none !important;
}

/* Make full area clickable and add hover */
a:has(> .riskyjatt) { 
    display: block; 
    text-decoration: none; 
}
a:hover .riskyjatt { 
    background: #f1f5f9; 
    border-color: var(--primary); 
    color: var(--primary-hover); 
}

/* Old Lists Modernized */
.catRow {
    margin: 6px 16px;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    transition: background 0.2s;
}
.catRow:hover { background: #f8fafc; }
a .catRow { display: block; color: var(--primary); font-weight: 500; }

div.catRow {
    background: var(--card-bg);
    margin: 12px 16px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 14.5px;
    text-align: left; 
    color: var(--text-muted); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

div.catRow a {
    display: inline-block;
    padding: 6px 10px;
    margin: 0 4px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
}

div.catRow a:hover {
    background: #f1f5f9;
    color: var(--primary-hover) !important;
}

.sideitem  {
    border: 0;

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

    color: #64748b;
}
/* Pendu 0-29 Combined & Modernized */
.pendu, .pendu0, .pendu1, .pendu2, .pendu3, .pendu4, .pendu5, .pendu6, .pendu7, .pendu8, .pendu9, .pendu10, .pendu11, .pendu12, .pendu13, .pendu14, .pendu15, .pendu16, .pendu17, .pendu18, .pendu19, .pendu20, .pendu21, .pendu22, .pendu23, .pendu24, .pendu25, .pendu26, .pendu27, .pendu28, .pendu29 {
    text-align: left;
    padding: 12px 16px;
    background: #eef2ff;
    border-left: 4px solid var(--primary);
    font-weight: 600;
    color: var(--primary);
    margin: 16px 16px 8px 16px;
    font-size: 15px;
    border-radius: 0 8px 8px 0;
}
.pendu1 { text-align: center; background: var(--primary); color: #fff; border: none; }
.pendu img, .pendu0 img, .pendu1 img, .pendu2 img, .pendu3 img, .pendu4 img, .pendu5 img, .pendu6 img, .pendu7 img, .pendu8 img, .pendu9 img, .pendu10 img, .pendu11 img, .pendu12 img, .pendu13 img, .pendu14 img, .pendu15 img, .pendu16 img, .pendu17 img, .pendu18 img, .pendu19 img, .pendu20 img, .pendu21 img, .pendu22 img, .pendu23 img, .pendu24 img, .pendu25 img, .pendu26 img, .pendu27 img, .pendu28 img, .pendu29 img {
    display: none !important;
}



/* Updates Section */
.updateitems {
    background: var(--card-bg); margin: 12px 16px; padding: 14px 16px;
    border-radius: var(--radius); border: 1px solid var(--border-color);
    font-size: 14px; line-height: 1.7; text-align: left;
}
.updatecat { font-weight: 600; color: #e01d22; display: inline-block; margin-right: 4px; }
.updatear { color: #168c00; font-size: 13px; font-weight: 500; }

/* Tunes Headers */
.tunes {
    margin: 12px 16px; text-align: center; padding: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 8px; font-weight: bold; color: #fff;
    text-transform: capitalize; box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}
.tunesmp3 {
    margin: 12px 16px; text-align: left; padding: 10px 14px;
    background: linear-gradient(135deg, #fe642e, #ea580c);
    border-radius: 8px; font-weight: bold; color: #fff;
    text-transform: capitalize; box-shadow: 0 4px 10px rgba(254, 100, 46, 0.2);
}

/* =========================================
   7. BUTTONS & DOWNLOAD LINKS
   ========================================= */
.down, .down2 { display: inline-block; margin: 8px 16px; }
.down a, .down2 a {
    color: #fff;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s, background 0.2s;
}
.down a { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.down a:hover { background: #005cbf; transform: translateY(-2px); }
.down2 a { background: linear-gradient(135deg, #f857a6, #ff5858); }
.down2 a:hover { background: #d6336c; transform: translateY(-2px); }

.btn {
    background: var(--primary); border: none; border-radius: 6px;
    color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 8px 16px; display: inline-block; transition: background 0.2s;
}
.btn:hover, input[type="button"]:hover { background: var(--primary-hover); }

input[type="button"][value*="Go Back"] {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin: 12px 16px;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
    transition: all 0.2s ease;
}

input[type="button"][value*="Go Back"]:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.3);
}

div[style*="padding-top: 15px;"] a[href*="songsplay"] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff !important;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 600;
    display: inline-block;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    transition: all 0.2s ease;
}

div[style*="padding-top: 15px;"] a[href*="songsplay"]:hover {
    background: #047857;
    transform: translateY(-2px);
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.4);
}

/* =========================================
   8. CONTENT BLOCKS (Info, Lyrics, Forms)
   ========================================= */
.info-box {
    display: flex; gap: 14px; padding: 14px 16px; align-items: flex-start;
    background: var(--card-bg); margin: 12px 16px;
    border: 1px solid var(--border-color); border-radius: var(--radius);
}
.detail-cover { width: 205px; height: 205px; object-fit: cover; flex: 0 0 205px; border-radius: 8px; }
.info { line-height: 1.5; flex: 1; }
.info div { border-bottom: 1px solid #f1f5f9; padding: 6px 4px; font-size: 14px; color: var(--text-muted); }
.info div:last-child { border-bottom: none; }
.info div b { color: var(--text-main); }

.description {
    padding: 14px 16px; background: var(--card-bg); font-size: 14px;
    color: var(--text-muted); margin: 12px 16px; border: 1px solid var(--border-color); border-radius: var(--radius);
}
.songlyrics { 
    font-family: inherit; font-size: 15px; line-height: 1.8; white-space: pre-wrap; 
    background: var(--card-bg); padding: 16px; margin: 12px 16px; 
    border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-main); 
}
div.entry { margin: 10px 16px; overflow: auto; background: var(--card-bg); padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); }

.atext {
    padding: 16px 20px;
    line-height: 1.7;
    color: var(--text-main);
    background: var(--card-bg);
    margin: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-align: left;
    font-size: 14.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

/* Cut Ringtone Form */
.cut_r {
    display: block; margin: 12px 16px; padding: 20px 16px; background: var(--card-bg);
    border: 1px solid var(--border-color); border-radius: var(--radius); text-align: left;
}
.cut_r p { margin: 10px 0; font-size: 14px; color: var(--text-muted); border: none; }
.cut_r label { font-weight: 600; color: var(--text-main); margin-right: 8px; background: transparent; padding: 0; }
.cut_r input[type="text"], .cut_r select, .cut_r input {
    border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 6px;
    background: var(--bg-main); color: var(--text-main); outline: none; box-shadow: none;
}
.pad.cut_r span { background: var(--primary); color: #fff; padding: 6px 10px; border-radius: 4px; }

/* =========================================
   9. SOCIAL ICONS & SHARE
   ========================================= */
.icon-bar, .share {
    margin: 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; align-items: center;
}
.icon-bar a, .share a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; color: white; font-size: 18px; border-radius: 50%;
    transition: transform 0.2s, opacity 0.2s;
}
.icon-bar a:hover, .share a:hover { opacity: 0.8; transform: scale(1.05); background-color: inherit; }
.facebook { background: #1877f2; }
.twitter { background: #000000; }
.qrcode { background: #334155; }
.whatsapp { background: #25d366; }
.envelope, .copy { background: #64748b; }
.email { background: #ea4335; }
.selected { background-color: var(--primary); }

/* Copy URL input field design */
.icon-bar input[type="text"] {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-main);
    width: 100%;
    max-width: 280px;
    outline: none;
    font-size: 13px;
}

@media (max-width: 600px) {
    .share { width: auto; justify-content: center; margin: 16px auto !important; }
}

/* =========================================
   10. UTILITIES & MISC
   ========================================= */
.red { color: #e01d22; font-weight: 600; }
.green { color: #168c00; font-weight: 600; }
.style1 { color: #fff; font-size: 16px; padding: 6px; font-weight: 600; }
.style18 { color: var(--text-muted); }
.style24 { color: #CE3B3B; font-weight: bold !important; }
.margin { margin: 0; }
.smallgray { font-size: 12px; color: #94a3b8; }
.nocol { color: var(--text-main); }
.nodec { text-decoration: none !important; }
.tdesc { float: left; font-size: 14px; padding: 1px; margin-left: 8px; color: var(--text-main); }
.tracks { width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; padding-left: 10px; font-weight: 500; }
table.tip { background-color: transparent; width: 100%; border-collapse: collapse; margin: 10px 0; }
td.tip { padding: 8px; border: 1px solid var(--border-color); }
tr.tip { border: 1px solid var(--border-color); background: var(--card-bg); }
.sprt { border-bottom: 1px dashed var(--border-color); margin: 6px 0; }
.gen { padding: 8px; background: var(--card-bg); border-radius: 6px; margin: 4px 0; }
.buttons { margin: 16px 0; padding: 10px 0; display: flex; gap: 10px; }
.adz { width: 100%; max-width: 300px; margin: 16px auto; text-align: center; }
.adz img { border-radius: 8px; }

/* =========================================
   11. FOOTER
   ========================================= */
.footer {
    background: #0f172a; color: #94a3b8; text-align: center;
    padding: 24px 16px; font-size: 14px; margin-top: 30px;
    border-top: 1px solid var(--border-color);
}
.footer a, .footer a:visited, .footer a:hover, .footer a:active { color: #cbd5e1 !important; text-decoration: none; font-weight: 500; }
.copyright {
    text-align: center; background: #090d16; color: #64748b;
    font-size: 13px; padding: 16px; font-weight: 500; margin-top: 0;
}

/* Mobile Fixes */
@media(max-width: 650px){
    .info-box { flex-direction: column; align-items: center; text-align: center; }
    .detail-cover { width: 175px; height: 175px; flex-basis: auto; margin: 0 auto; }
    .info { width: 100%; text-align: center; }
    .info div { text-align: center; }
    .icon-bar { justify-content: center; }
}

/* फोटो वाले बॉक्स को थीम के बराबर 16px की जगह देने के लिए */
div:has(> img[style*="170px"]) {
    padding-left: 16px !important;
}

/* फोटो को गोल किनारों और शैडो के साथ प्रीमियम लुक देने के लिए */
img[style*="170px"] {
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Rating Box को फोटो के बराबर खिसकाने और लेफ्ट साइड अलाइन करने के लिए */
div:has(> .starrr),
div[style*="padding: .3em; clear:both"] {
    margin: 16px 16px !important; /* यह पूरे बॉक्स को किनारे से 16px खिसका देगा */
    text-align: left !important; /* यह टेक्स्ट और स्टार्स को बीच (center) से हटाकर बिल्कुल फोटो की सीध में कर देगा */
    padding: 16px !important;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    clear: both;
}

/* 1. सिर्फ "Tags" वाले हिस्से को खिसकाने के लिए (बाकी पर लागू नहीं होगा) */
div[style="padding: 5px;"]:has(> b) {
    margin: 10px 16px !important;
    padding: 0 !important;
    text-align: left !important;
}

/* 2. H2, H3, H4 वाले बॉक्स की फालतू पैडिंग (pegging) और मार्जिन को पूरी तरह हटाने के लिए */
div[style="padding: 5px;"]:has(> h2),
div[style="padding: 5px;"]:has(> h3),
div[style="padding: 5px;"]:has(> h4) {
    padding: 0 !important;
    margin: 0 !important;
}
/* Audio Player को दोनों तरफ से 16px अंदर करने के लिए */
audio {
    width: calc(100% - 32px) !important; /* 100% में से दोनों तरफ के 16-16px (32px) घटाने के लिए */
    margin: 12px 16px !important; /* ऊपर-नीचे 12px और दाएं-बाएं 16px की जगह */
    display: block;
    border-radius: 30px;
    outline: none;
}

/* लाल और हरे रंग वाले फॉन्ट को मॉडर्न और बोल्ड बनाने के लिए */
font[color="red"] {
    color: #e01d22 !important; /* आपकी थीम का डार्क लाल रंग */
    font-weight: 600 !important; /* टेक्स्ट को हल्का मोटा (Bold) करने के लिए */
}

font[color="green"] {
    color: #168c00 !important; /* आपकी थीम का डार्क हरा रंग */
    font-weight: 600 !important;
}

/* "You may also like" वाले बाहरी बॉक्स का डिज़ाइन */
div[style*="border:1px solid #ccc"] {
    border: 1px solid var(--border-color) !important; /* नया थीम वाला हल्का बॉर्डर */
    border-radius: var(--radius) !important; /* गोल किनारे (12px) */
    background: var(--card-bg) !important; /* वाइट बैकग्राउंड */
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important; /* बहुत हल्की सी प्रीमियम शैडो */
    margin: 16px !important; /* आपकी थीम के 16px मार्जिन के बराबर */
    padding: 8px 0 !important; /* अंदर के कार्ड्स को थोड़ी अच्छी स्पेस देने के लिए */
}

/* अगर pendu क्लास के अंदर H1 या H2 है, तो pendu का डिज़ाइन हटा दें */
div[class*="pendu"]:has(h1), 
div[class*="pendu"]:has(h2) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* "Get It" और "Make RingTone" के 3 बटन्स का नया डिज़ाइन */
.cut_r input[type="button"][value="Get It"],
.cut_r input[type="submit"][value*="Make RingTone"] {
    background: var(--primary) !important; /* थीम का रंग (नीला/पर्पल) */
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important;
    height: auto !important; /* पुरानी 25px हाइट हटाने के लिए */
    width: auto !important; /* पुरानी width हटाने के लिए */
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2) !important;
    transition: all 0.2s ease !important;
    margin-left: 8px !important; /* इनपुट बॉक्स से थोड़ा गैप देने के लिए */
}

/* माउस ले जाने (Hover) पर डिज़ाइन */
.cut_r input[type="button"][value="Get It"]:hover,
.cut_r input[type="submit"][value*="Make RingTone"]:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.3) !important;
}

/* Make RingTone वाले बटन को बीच (Center) में करने के लिए */
.cut_r p:has(> input[value*="Make RingTone"]) {
    text-align: left !important;
    margin-top: 20px !important;
}

/* मोबाइल के लिए स्पेशल फिक्स: ताकि Start/End Time वाली लाइन और Get It बटन एक ही लाइन में रहें */
@media (max-width: 600px) {
    .cut_r p {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        gap: 4px !important;
        overflow-x: auto !important;
    }
    .cut_r p label {
        font-size: 12px !important;
    }
    .cut_r p input[type="text"] {
        width: 32px !important;
        padding: 4px 2px !important;
        font-size: 12px !important;
    }
    .cut_r input[type="button"][value="Get It"] {
        padding: 6px 10px !important;
        font-size: 12px !important;
        margin-left: 4px !important;
    }
}
div:has(> img[style*="150px"]) {
    padding-left: 16px !important;
}

img[style*="150px"] {
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}




/* Fix the MRJ card layout container */
a.mrj {
    display: flex !important;
    align-items: center !important;
    background: var(--card-bg) !important;
    margin: 8px 16px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
}

/* Hover state */
a.mrj:hover {
    background: #f1f5f9 !important;
    border-color: var(--primary) !important;
}

/* Fix album cover image inside mrj */
a.mrj img.albumcover {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    float: none !important;
    margin-right: 14px !important;
    border: 1px solid var(--border-color) !important;
}

/* Fix tracks text container */
a.mrj .tracks {
    width: calc(100% - 74px) !important;
    float: none !important;
    padding-left: 0 !important;
}

/* Song title styling */
a.mrj .tracks span:first-child {
    color: var(--text-main) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Artist name styling */
a.mrj .tracks span:nth-child(2),
a.mrj .tracks span:nth-child(3) {
    color: var(--text-muted) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    display: block !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ringtone cutter main wrapper card matching your theme */
.cutter {
    background: var(--card-bg) !important;
    margin: 12px 16px !important;
    padding: 14px 16px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Time inputs inside the cutter box */
.cutter input {
    width: 48% !important;
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    outline: none !important;
}

/* Main slider track */
#slider-range {
    height: 8px !important;
    background: var(--border-color) !important;
    margin: 12px 0 6px 0 !important;
    border-radius: 10px !important;
    border: none !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Selected active range fill */
.ui-slider-horizontal .ui-slider-range {
    background: var(--primary) !important;
    height: 100% !important;
    border-radius: 10px !important;
}

/* Slider handles / draggable thumbs */
#slider-range span, 
#slider-range .ui-slider-handle {
    width: 18px !important;
    height: 18px !important;
    background: var(--primary) !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    top: -5px !important;
    outline: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    position: absolute !important;
    z-index: 2;
    transition: background 0.2s ease, transform 0.2s ease;
}

/* Hover effect on handles */
#slider-range span:hover, 
#slider-range .ui-slider-handle:hover {
    background: var(--primary-hover) !important;
    transform: scale(1.1);
}

.home-link-wrap {
    text-align: left;
    margin: 16px;
}

.home-link-wrap a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.search-form{display:flex;gap:6px;margin:12px 16px;padding:10px;background:var(--card-bg,#fff);border:1px solid var(--border-color,#cbd5e1);border-radius:10px}.search-form input[type="text"]{flex:1;min-width:0;padding:6px 10px;border:1px solid var(--border-color,#cbd5e1);border-radius:6px;outline:none;font-size:14px}.search-form select{padding:6px 8px;border:1px solid var(--border-color,#cbd5e1);border-radius:6px;background:var(--bg-main,#f8fafc);font-size:14px}.search-form input[type="submit"]{padding:6px 12px;background:var(--primary,#4f46e5);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;font-size:14px}
/* JPlayer Container Margin Fix - Keep it at the bottom of your CSS */
#jp_container_1 {
    margin-left: 16px !important;
    margin-right: 16px !important;
}