/* Classic v2 look. Colours come from the classic colour set (--primary ...), purple is the fallback. */

/* ---------- page-wide (only the classic structure) ---------- */
body.lay-classic{background:var(--bg,#fff);color:var(--text,#222)}
body.lay-classic h1,body.lay-classic h2,body.lay-classic h3,body.lay-classic footer{background:var(--primary,#5a4fc4);color:#fff;text-align:center;font-size:calc(14px*var(--ts,1));font-weight:700;padding:7px 8px;border:0;margin:0}
body.lay-classic h1 a,body.lay-classic h2 a,body.lay-classic h3 a,body.lay-classic footer a{color:#fff}
body.lay-classic .catRow{background:var(--surface,#fff);border-bottom:1px solid var(--border,#e4e4ee)}
body.lay-classic .catRow a{color:var(--primary,#5a4fc4);font-weight:700;padding:11px 12px}
body.lay-classic .catRow:hover{background:var(--surface2,#f4f3fc)}
body.lay-classic .path{background:var(--surface2,#f1f0fb);border:0;border-top:1px solid var(--border,#e4e4ee);color:var(--text,#222)}
body.lay-classic .path a{color:var(--primary,#5a4fc4)}
body.lay-classic .page_btn{background:var(--surface,#fff);border:1px solid var(--primary,#5a4fc4);color:var(--primary,#5a4fc4);border-radius:6px}
body.lay-classic .page_btn_current{background:var(--primary,#5a4fc4);border-color:var(--primary,#5a4fc4);color:#fff;border-radius:6px}

/* ---------- search pill ---------- */
.cp-search{padding:12px 8px 10px;text-align:center;background:var(--surface,#fff)}
.cp-search form{display:inline-flex;align-items:center;max-width:96%;margin:0}
.cp-search input[type=text]{width:240px;max-width:62vw;padding:7px 12px;border:1px solid var(--primary,#5a4fc4);border-right:0;border-radius:20px 0 0 20px;outline:none;font-size:calc(12px*var(--ts,1));background:var(--surface,#fff);color:var(--text,#222)}
.cp-search button{padding:8px 14px;border:1px solid var(--primary,#5a4fc4);background:var(--primary,#5a4fc4);color:#fff;border-radius:0 20px 20px 0;font-weight:700;font-size:calc(12px*var(--ts,1));cursor:pointer;margin:0}

/* ---------- bars ---------- */
.cp-bar{background:var(--primary,#5a4fc4);color:#fff;text-align:center;font-weight:700;font-size:calc(14px*var(--ts,1));padding:7px 10px;line-height:1.35;word-break:break-word}
.cp-bar i{margin-right:4px}
.cp-wrap{background:var(--surface,#fff);color:var(--text,#222)}

/* ---------- cover ---------- */
.cp-cover{text-align:center;padding:12px 8px;background:var(--surface,#fff)}
.cp-cover img{width:165px;height:165px;max-width:70vw;object-fit:cover;border:1px solid var(--border,#bbb);border-radius:4px;padding:1px;box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* ---------- WhatsApp share card ---------- */
.cp-share{text-align:center;padding:10px 8px 12px;background:var(--surface,#fff)}
.cp-share-list{max-width:270px;margin:0 auto;max-height:96px;overflow-y:auto;text-align:left;border:1px solid var(--border,#dcdce8);border-radius:8px;box-shadow:0 2px 8px rgba(60,50,140,.18);background:var(--surface,#fff)}
.cp-share-i{display:flex;gap:8px;align-items:center;padding:7px 8px;border-bottom:1px solid var(--border,#eee);font-size:calc(11px*var(--ts,1));line-height:1.35;color:var(--text,#222)}
.cp-share-i:last-child{border-bottom:0}
.cp-share-i .ic{flex:0 0 22px;height:22px;border-radius:5px;background:var(--primary,#5a4fc4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(11px*var(--ts,1))}
.cp-share-i .tx{min-width:0;word-break:break-word}
.cp-copy-src{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cp-copy-btn{margin:7px auto 0;display:inline-block;background:var(--primary,#5a4fc4);color:#fff;border:0;border-radius:6px;padding:6px 14px;font-weight:700;font-size:calc(12px*var(--ts,1));cursor:pointer}
.cp-copy-btn:hover{filter:brightness(1.1)}

/* ---------- sort tabs ---------- */
.cp-tabs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:7px 6px;background:var(--surface,#fff);border-bottom:1px solid var(--border,#e4e4ee)}
.cp-tabs a{padding:4px 10px;font-size:calc(11px*var(--ts,1));border:1px solid var(--border,#c8c8d8);border-radius:5px;color:var(--primary,#5a4fc4);background:var(--surface,#fff);font-weight:400}
.cp-tabs a.on{background:var(--primary,#5a4fc4);border-color:var(--primary,#5a4fc4);color:#fff;font-weight:700}

/* ---------- song / album row ---------- */
.cp-row{display:flex;align-items:center;gap:8px;padding:7px 8px;background:var(--surface,#fff);border-bottom:1px solid var(--border,#e4e4ee);color:var(--primary,#5a4fc4);text-decoration:none}
.cp-row:hover{background:var(--surface2,#f6f5fd)}
.cp-th{flex:0 0 52px;width:52px;height:52px;border:1px solid var(--border,#555);border-radius:3px;overflow:hidden;background:#111}
.cp-th img{display:block;width:100%;height:100%;object-fit:cover}
.cp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cp-title{font-size:calc(11px*var(--ts,1));font-weight:700;color:var(--primary,#5a4fc4);line-height:1.35;word-break:break-word}
.cp-badge{height:10px;width:30px;margin-left:5px;border:0}
.cp-sub{font-size:calc(11px*var(--ts,1));color:#0a8a2a;font-style:italic;line-height:1.3}
.cp-cat{font-size:calc(10px*var(--ts,1));color:var(--muted,#777)}
.cp-meta{font-size:calc(11px*var(--ts,1));color:var(--text,#111);display:flex;gap:10px;align-items:center}
.cp-meta b{font-weight:400}
.cp-meta span{color:var(--muted,#777);font-size:calc(10px*var(--ts,1))}
.cp-soon{font-size:calc(11px*var(--ts,1));color:#0a8a2a}
.cp-go.pill{background:var(--primary,#5a4fc4);color:#fff;border-radius:14px;padding:3px 10px;font-size:calc(11px*var(--ts,1));font-weight:700}
.cp-row.cat .cp-title{font-size:calc(12px*var(--ts,1));text-transform:none}
.cp-arrow{font-size:calc(20px*var(--ts,1));color:var(--primary,#5a4fc4);padding-right:4px}
.cp-empty{padding:14px;text-align:center;color:#c00;font-size:calc(12px*var(--ts,1))}

/* ---------- download page ---------- */
.cp-dl-top{text-align:center;padding:12px 8px 4px;background:var(--surface,#fff)}
.cp-dl-top img.cv{width:200px;height:200px;max-width:70vw;object-fit:cover;border-radius:6px;border:1px solid var(--border,#bbb);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.cp-player{text-align:center;padding:6px 10px;background:var(--surface,#fff)}
.cp-player audio,.cp-player video{width:96%;max-width:520px}
.cp-actions{text-align:center;padding:8px 8px 12px;background:var(--surface,#fff)}
.cp-dl-btn{display:inline-block;background:linear-gradient(135deg,var(--primary,#5a4fc4),var(--primary2,#7a6ee0));color:#fff!important;font-weight:700;font-size:calc(15px*var(--ts,1));padding:11px 28px;border-radius:30px;box-shadow:0 3px 10px rgba(90,79,196,.4);text-decoration:none}
.cp-dl-btn:hover{filter:brightness(1.08)}
.cp-dl-btn i{margin-right:6px}
.cp-wait{color:#ed461c;font-size:calc(12px*var(--ts,1));padding:6px}
.cp-wait span{color:#0088cc;font-weight:700}
.cp-soonbox{display:inline-block;background:var(--surface2,#f1f0fb);border:1px dashed var(--primary,#5a4fc4);border-radius:10px;padding:10px 16px;color:var(--text,#222)}
.cp-kv{background:var(--surface,#fff)}
.cp-kv-i{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border,#eee);font-size:calc(12px*var(--ts,1));color:var(--text,#222)}
.cp-kv-i .ic{flex:0 0 26px;height:26px;border-radius:6px;background:var(--primary,#5a4fc4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(12px*var(--ts,1))}
.cp-kv-i .k{flex:0 0 78px;color:var(--muted,#777)}
.cp-kv-i .v{flex:1;font-weight:700;word-break:break-word}
.cp-kv-i .v a{color:var(--primary,#5a4fc4);padding:0}
.cp-desc{background:var(--surface2,#f7f7fb);color:var(--text,#444);padding:9px 12px;font-size:calc(11px*var(--ts,1));line-height:1.7;border-bottom:1px solid var(--border,#e4e4ee)}
.cp-report{text-align:center;padding:8px;background:var(--surface,#fff)}
.cp-report a{color:#e5440b;font-weight:700;font-size:calc(12px*var(--ts,1))}
.cp-more{text-align:center;padding:9px;background:var(--surface,#fff);border-bottom:1px solid var(--border,#e4e4ee)}
.cp-more a{color:var(--primary,#5a4fc4);font-weight:700}
.cp-cut{background:var(--surface,#fff);text-align:center;padding:8px}
.cp-cut input[type=number]{width:70px;padding:8px;border:1px solid var(--border,#ccc);border-radius:8px;text-align:center;font-size:calc(16px*var(--ts,1))}
.cp-cut button{border:0;color:#fff;padding:8px 12px;margin:5px;border-radius:6px;cursor:pointer;font-weight:700;background:#dd8020}
.cp-cut button.dn{background:#0088cc}.cp-cut button.dn a{color:#fff;padding:0}
.cp-cut small{display:block;color:var(--muted,#777)}

/* ---------- latest updates ---------- */
.lu{background:var(--surface,#fff)}
/* simple list */
.lu-li{display:block;padding:9px 12px;border-bottom:1px solid var(--border,#e4e4ee);font-size:calc(12px*var(--ts,1));color:var(--text,#222);text-decoration:none}
.lu-li:hover{background:var(--surface2,#f6f5fd)}
.lu-li .a{color:#d0021b;font-style:normal}.lu-li .c{color:#1f4fd0;font-style:normal}.lu-li b{color:var(--text,#111)}.lu-li u{color:#e0127f;font-weight:700;text-decoration:none}
/* album tags */
.lu-tag{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid var(--border,#e4e4ee);text-decoration:none}
.lu-tag:hover{background:var(--surface2,#f6f5fd)}
.lu-tag .t{flex:0 0 auto;max-width:34%;background:hsl(var(--h),70%,92%);color:hsl(var(--h),65%,30%);border-radius:5px;padding:2px 8px;font-size:calc(10px*var(--ts,1));font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lu-tag .n{flex:1;min-width:0;font-size:calc(12px*var(--ts,1));font-weight:700;color:var(--text,#111);line-height:1.3;word-break:break-word}
.lu-tag .b{flex:0 0 auto;background:#16a34a;color:#fff;border-radius:14px;padding:3px 10px;font-size:calc(11px*var(--ts,1));font-weight:700}
/* numbered chart */
.lu-ch{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--border,#e4e4ee);text-decoration:none}
.lu-ch:hover{background:var(--surface2,#f6f5fd)}
.lu-ch .no{flex:0 0 32px;font-size:calc(22px*var(--ts,1));font-weight:800;color:var(--primary,#5a4fc4);text-align:center;opacity:.85}
.lu-ch .m{flex:1;min-width:0;display:flex;flex-direction:column}
.lu-ch .m b{font-size:calc(12px*var(--ts,1));color:var(--text,#111);line-height:1.3;word-break:break-word}
.lu-ch .m small{font-size:calc(10px*var(--ts,1));color:var(--muted,#777)}
.lu-ch .d{flex:0 0 32px;height:32px;border-radius:50%;background:var(--primary,#5a4fc4);color:#fff;display:flex;align-items:center;justify-content:center}
.lu-ch:nth-child(-n+3) .no{color:#e0127f;opacity:1}
/* cover grid */
.lu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px}
.lu-gd{display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:0;min-width:0}
.lu-gd .p{display:block;aspect-ratio:1/1;border-radius:6px;overflow:hidden;border:1px solid var(--border,#ccc);background:#111}
.lu-gd .p img{display:block;width:100%;height:100%;object-fit:cover}
.lu-gd b{font-size:calc(11px*var(--ts,1));color:var(--primary,#5a4fc4);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.lu-gd small{font-size:calc(10px*var(--ts,1));color:var(--muted,#777);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* slider */
.lu-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 8px;-webkit-overflow-scrolling:touch}
.lu-sl{flex:0 0 118px;scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:0}
.lu-sl .p{position:relative;display:block;width:118px;height:118px;border-radius:8px;overflow:hidden;border:1px solid var(--border,#ccc);background:#111}
.lu-sl .p img.cp-badge{position:absolute;left:4px;top:4px;margin:0}
.lu-sl .p img{display:block;width:100%;height:100%;object-fit:cover}
.lu-sl .p img.cp-badge{width:30px;height:10px}
.lu-sl b{font-size:calc(11px*var(--ts,1));color:var(--primary,#5a4fc4);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.lu-sl small{font-size:calc(10px*var(--ts,1));color:var(--muted,#777);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* timeline */
.lu-day{background:var(--surface2,#f1f0fb);color:var(--primary,#5a4fc4);font-weight:700;font-size:calc(12px*var(--ts,1));padding:6px 12px;border-bottom:1px solid var(--border,#e4e4ee)}
.lu-tl{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border,#e4e4ee);text-decoration:none;position:relative}
.lu-tl:hover{background:var(--surface2,#f6f5fd)}
.lu-tl .dot{flex:0 0 10px;height:10px;border-radius:50%;background:var(--primary,#5a4fc4);box-shadow:0 0 0 3px rgba(90,79,196,.18)}
.lu-tl .m{flex:1;min-width:0;display:flex;flex-direction:column}
.lu-tl .m b{font-size:calc(12px*var(--ts,1));color:var(--text,#111);line-height:1.3;word-break:break-word}
.lu-tl .m small{font-size:calc(10px*var(--ts,1));color:var(--muted,#777)}
.lu-tl .fa{color:var(--primary,#5a4fc4);font-size:calc(18px*var(--ts,1))}
.lu-more{text-align:center;padding:9px;background:var(--surface,#fff);border-bottom:1px solid var(--border,#e4e4ee)}
.lu-more a{color:var(--primary,#5a4fc4);font-weight:700}

@media(min-width:700px){
  .lu-grid{grid-template-columns:repeat(5,1fr)}
  .cp-title{font-size:calc(12px*var(--ts,1))}
}

/* ---------- red flag (Trending Songs) ---------- */
.cp-flag{align-self:flex-start;background:#d6264a;color:#fff;font-size:calc(9px*var(--ts,1));font-weight:700;padding:0 4px;border-radius:2px;line-height:14px;margin-top:2px}
.cp-more-btn{padding:6px 8px;background:var(--surface,#fff);border-bottom:1px solid var(--border,#e4e4ee)}
.cp-more-btn a{display:inline-block;background:var(--primary,#5a4fc4);color:#fff;font-weight:700;font-size:calc(11px*var(--ts,1));padding:4px 10px;border-radius:6px}

/* ---------- Top Release slider ---------- */
.tr-track{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 4px;background:var(--surface,#fff);-webkit-overflow-scrolling:touch}
.tr-card{flex:0 0 106px;width:106px;display:flex;flex-direction:column;padding:0;text-decoration:none;border:1px solid var(--primary,#5a4fc4);background:var(--primary,#5a4fc4);scroll-snap-align:start}
.tr-card .p{display:block;width:106px;height:106px;background:#111;overflow:hidden}
.tr-card .p img{display:block;width:100%;height:100%;object-fit:cover}
.tr-card .t{display:flex;align-items:center;justify-content:center;text-align:center;height:34px;padding:2px 3px;color:#fff;font-size:calc(9px*var(--ts,1));font-weight:700;line-height:1.2;overflow:hidden}
.tr-card:hover{filter:brightness(1.1)}

/* ---------- latest: DjDunia style ---------- */
.lu-dd{display:block;padding:7px 8px;border-bottom:1px solid var(--border,#d8d8e4);font-size:calc(11px*var(--ts,1));line-height:1.7;color:var(--text,#111);text-decoration:none}
.lu-dd:hover{background:var(--surface2,#f6f5fd)}
.lu-dd .hand{color:#555;margin-right:2px}
.lu-dd .c{color:var(--text,#111);font-weight:700}
.lu-dd .sep{color:var(--muted,#666);font-weight:700}
.lu-dd .n{color:var(--primary,#5a4fc4);font-weight:700}
.lu-dd em{font-style:normal;font-size:calc(9px*var(--ts,1));font-weight:700;padding:1px 5px;border-radius:9px;color:#fff;white-space:nowrap}
.lu-dd em.dn{background:#e30613}
.lu-dd em.nw{background:#f1b0bd;color:#b0123a;border-radius:2px;font-size:calc(8px*var(--ts,1))}
.lu-dd small{font-size:calc(9px*var(--ts,1));color:#0a8a2a;font-weight:700}

/* category rows: folder icon in the theme colour instead of a cover photo */
.cp-th.fold{display:flex;align-items:center;justify-content:center;font-size:calc(28px*var(--ts,1));color:var(--primary,#8e24aa);background:var(--surface2,#1b1b1b)}
.cp-th.fold i{color:inherit}

/* ---- v12: new latest-update styles ---- */
.lu-cd{display:flex;align-items:center;gap:12px;margin:8px;padding:10px;background:var(--surface,#fff);border:1px solid var(--border,#e4e4ee);border-radius:var(--radius,12px);text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.lu-cd .p{flex:0 0 64px;height:64px;border-radius:10px;overflow:hidden}
.lu-cd .p img{width:100%;height:100%;object-fit:cover}
.lu-cd .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lu-cd b{color:var(--text,#222);font-size:calc(15px*var(--ts,1))}
.lu-cd small{color:var(--muted,#777)}
.lu-cd small i{color:var(--accent,#ed461c)}
.lu-cd .d{background:var(--primary,#5a4fc4);color:var(--on-primary,#fff);padding:8px 12px;border-radius:999px;font-weight:700;font-size:calc(12px*var(--ts,1));white-space:nowrap}
.lu-pills,.lu-pl{display:inline-block}
.lu-pills{padding:8px}
.lu-pl{margin:4px;padding:6px 12px;border-radius:999px;background:var(--surface2,#f1f0fb);color:var(--text,#222);border:1px solid var(--border,#e4e4ee);font-size:calc(13px*var(--ts,1));text-decoration:none}
.lu-pl em{font-style:normal;font-weight:700;color:#fff;background:var(--accent,#ed461c);border-radius:999px;padding:1px 8px;margin-right:4px;font-size:calc(11px*var(--ts,1))}
.lu-rk{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--border,#e4e4ee);text-decoration:none}
.lu-rk:nth-child(even){background:var(--surface2,#f6f5fd)}
.lu-rk .f{flex:0 0 58px;text-align:center;font-size:calc(11px*var(--ts,1));font-weight:800;color:#fff;border-radius:6px;padding:4px 0}
.lu-rk .f.nw{background:#e53935}.lu-rk .f.ht{background:#fb8c00}
.lu-rk .m{display:flex;flex-direction:column;min-width:0}.lu-rk b{color:var(--text,#222)}.lu-rk small{color:var(--muted,#777)}

/* ---- v12: folder icon before category names (plain list) ---- */
.abx-fi{color:var(--primary,#5a4fc4);margin-right:4px;font-size:1.05em}
.catRow:hover .abx-fi{color:var(--accent,#ed461c)}

/* ---- v12: text follows the theme, with deliberate contrast colours ---- */
body{color:var(--text)}
body .fl,body .catRow,body .odd,body .row,body p,body td,body li{color:var(--text)}
body .fl small,body .fl span,body .muted,body small{color:var(--muted)}
body a{color:var(--link,var(--primary))}
body a:hover{color:var(--accent)}
body .fl b,body .fhd b,body .catRow b{color:var(--text)}
.cp-new,.new,.nw,.badge-new{color:#fff;background:#e53935}
.cp-hot,.hot,.badge-hot{color:#fff;background:#fb8c00}
.cp-size,.size,.dsize{color:var(--accent)}
.cp-cat,.catname{color:var(--accent)}
.dcount,.downloads,.cp-dl{color:#e53935}

/* ---- v13: DjDunia colourful latest style (each song its own colour, NEW UPDATE blinks) ---- */
.lu-dc .n{font-weight:700}
.lu-dc .c{color:var(--text,#111)}
.lu-dc .hand{color:#444}
.lu-dd em.nw.blink{background:#f4a9bb;color:#b0123a;animation:luBlink 1s steps(1,end) infinite}
@keyframes luBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.lu-dd em.nw.blink{animation:none}}
.lu-more{padding:6px 8px;background:var(--surface,#fff);border-bottom:1px solid var(--border,#e4e4ee)}
.lu-more a{display:inline-block;background:var(--primary,#5a4fc4);color:#fff;font-weight:700;font-size:calc(11px*var(--ts,1));padding:5px 10px;border-radius:5px}

/* ---- v13: DjDunia home page ---- */
.hd-top{background:#555;color:#fff;text-align:center;padding:7px 6px 8px;margin-top:6px;border-top:1px solid #333}
.hd-top b{display:block;font-size:calc(12px*var(--ts,1));margin-bottom:4px}
.hd-tabs{font-size:calc(11px*var(--ts,1));font-weight:700}
.hd-tabs a{color:#fff;margin:0 7px;text-decoration:none}
.hd-tabs a:hover{text-decoration:underline;color:#ffd54f}
.hd-tabs span{color:#f0a63c}
.cp-bar.hd-sel{text-align:center;font-size:calc(13px*var(--ts,1))}
.hd-cat{display:flex;align-items:center;gap:8px;padding:10px 6px;background:var(--surface,#fff);border-bottom:1px solid var(--border,#e0e0e8);color:var(--primary,#5a4fc4);text-decoration:none;font-size:calc(11px*var(--ts,1));font-weight:700}
.hd-cat:hover{background:var(--surface2,#f6f5fd)}
.hd-cat>i{color:var(--primary,#5a4fc4);font-size:calc(12px*var(--ts,1))}
.hd-cat .t{flex:1;min-width:0;word-break:break-word}
.hd-cat .t em.soon{font-style:normal;color:#e53935;font-size:calc(10px*var(--ts,1))}
.hd-cat .t img.cp-badge{height:10px;width:30px;margin-left:4px;vertical-align:middle}
.hd-cat .go{flex:0 0 auto;width:16px;height:16px;border-radius:3px;background:#8a8a8a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(8px*var(--ts,1))}
.hd-svc{background:var(--surface,#fff)}
.hd-svc a{display:block;padding:8px 6px;font-size:calc(11px*var(--ts,1));font-weight:700;color:var(--primary,#5a4fc4);text-decoration:none;border-bottom:1px solid var(--border,#e0e0e8)}
.hd-svc a:hover{background:var(--surface2,#f6f5fd)}
.hd-float{position:fixed;right:8px;bottom:12px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.hd-pill{background:var(--primary,#5a4fc4);color:#fff;border-radius:999px;padding:9px 14px;font-size:calc(11px*var(--ts,1));font-weight:700;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.hd-pill:hover{color:#fff;filter:brightness(1.12)}
.hd-lib{position:fixed;right:8px;bottom:104px;z-index:60;width:min(320px,92vw);max-height:60vh;overflow:auto;background:var(--surface,#fff);border:2px solid var(--primary,#5a4fc4);border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.hd-lib-h{display:flex;justify-content:space-between;align-items:center;background:var(--primary,#5a4fc4);color:#fff;padding:7px 10px;font-size:calc(13px*var(--ts,1))}
.hd-lib-h a{color:#fff;font-size:calc(20px*var(--ts,1));line-height:1;text-decoration:none}
.hd-lib-i{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border,#e0e0e8);font-size:calc(11px*var(--ts,1))}
.hd-lib-i a{flex:1;min-width:0;font-weight:700;word-break:break-word}
.hd-lib-i button{border:0;background:#e53935;color:#fff;border-radius:4px;padding:2px 7px;cursor:pointer}
.hd-lib-e{padding:14px;text-align:center;font-size:calc(12px*var(--ts,1));opacity:.7}
.hd-save{display:block;margin:8px auto;border:0;background:var(--primary,#5a4fc4);color:#fff;border-radius:999px;padding:8px 16px;font-weight:700;font-size:calc(12px*var(--ts,1));cursor:pointer}

/* ---- v13: more DjDunia-style latest updates ---- */
/* boxed */
.lu-bx{display:flex;flex-direction:column;gap:3px;margin:6px 8px;padding:8px 10px 8px 12px;background:var(--surface,#fff);border:1px solid var(--border,#e0e0e8);border-left:5px solid var(--c,#5a4fc4);border-radius:8px;text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.lu-bx:hover{background:var(--surface2,#f6f5fd)}
.lu-bx .a{font-size:calc(11px*var(--ts,1));font-weight:700;color:var(--text,#111)}
.lu-bx .a i{color:#555;margin-right:3px}
.lu-bx .n{font-size:calc(13px*var(--ts,1));font-weight:700;color:var(--c,#5a4fc4);line-height:1.35;word-break:break-word}
.lu-bx .t{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.lu-bx em,.lu-st em,.lu-gl em,.lu-al em{font-style:normal;font-size:calc(9px*var(--ts,1));font-weight:700;padding:1px 6px;border-radius:9px;color:#fff;white-space:nowrap}
.lu-bx em.dn,.lu-st em.dn,.lu-gl em.dn{background:#e30613}
.lu-bx em.nw,.lu-st em.nw,.lu-gl em.nw{background:#f4a9bb;color:#b0123a;border-radius:3px;font-size:calc(8px*var(--ts,1))}
.lu-bx small,.lu-st small,.lu-gl small{font-size:calc(9px*var(--ts,1));color:#0a8a2a;font-weight:700}
.blink{animation:luBlink 1s steps(1,end) infinite}
/* album */
.lu-al em.la{background:#e30613}
.lu-al small{color:#0a8a2a}
.lu-al em.nw{background:#f4a9bb;color:#b0123a;border-radius:3px;font-size:calc(8px*var(--ts,1))}
/* rainbow */
.lu-st{display:flex;align-items:center;gap:9px;padding:8px 9px;text-decoration:none;background:hsl(var(--h),85%,95%);border-bottom:1px solid hsl(var(--h),55%,85%)}
.lu-st:hover{background:hsl(var(--h),85%,91%)}
.lu-st .no{flex:0 0 26px;height:26px;border-radius:50%;background:hsl(var(--h),65%,40%);color:#fff;font-weight:800;font-size:calc(12px*var(--ts,1));display:flex;align-items:center;justify-content:center}
.lu-st .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lu-st .n{font-size:calc(12px*var(--ts,1));color:hsl(var(--h),70%,30%);line-height:1.3;word-break:break-word}
.lu-st .s i{font-style:normal;font-size:calc(10px*var(--ts,1));font-weight:700;color:var(--text,#111)}
/* glow */
.lu-gl{display:block;padding:8px 8px;border-bottom:1px solid var(--border,#d8d8e4);font-size:calc(11px*var(--ts,1));line-height:1.8;color:var(--text,#111);text-decoration:none}
.lu-gl:hover{background:var(--surface2,#f6f5fd)}
.lu-gl .hand{color:#e30613;display:inline-block;animation:luHand .8s ease-in-out infinite alternate}
@keyframes luHand{from{transform:translateX(0)}to{transform:translateX(4px)}}
.lu-gl .c{font-weight:700}.lu-gl .sep{font-weight:700;color:var(--muted,#666)}.lu-gl .n{font-weight:700}
.lu-gl em.dn{display:inline-block;position:relative;overflow:hidden;vertical-align:middle;background:linear-gradient(90deg,#e30613,#ff5a36)}
.lu-gl em.dn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:luShine 2s linear infinite}
@keyframes luShine{to{left:130%}}
.blink2{animation:luBlink2 1.1s linear infinite}
@keyframes luBlink2{0%,100%{background:#f4a9bb;color:#b0123a;opacity:1}45%{background:#ffe08a;color:#7a4b00;opacity:1}50%,60%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.blink,.blink2,.lu-gl .hand,.lu-gl em.dn::after{animation:none}}

/* =====================================================================
   v29: bigger readable text, meaningful colours, own download-button colour, new home designs
   ===================================================================== */
body{font-size:calc(14px*var(--ts,1))}
.cp-title{font-size:calc(13.5px*var(--ts,1))}
.cp-row.cat .cp-title{font-size:calc(14px*var(--ts,1))}
.cp-sub{font-size:calc(12.5px*var(--ts,1))}
.cp-cat{font-size:calc(12px*var(--ts,1))}
.cp-meta{font-size:calc(12.5px*var(--ts,1))}
.cp-meta span{font-size:calc(12px*var(--ts,1))}
.cp-soon{font-size:calc(12.5px*var(--ts,1))}
.cp-tabs a{font-size:calc(12.5px*var(--ts,1));padding:5px 11px}
.cp-go.pill{font-size:calc(12.5px*var(--ts,1));padding:5px 12px}
.cp-kv-i{font-size:calc(13.5px*var(--ts,1))}.cp-kv-i .k{flex-basis:88px}
.cp-desc{font-size:calc(12.5px*var(--ts,1))}
.cp-share-i{font-size:calc(12.5px*var(--ts,1))}
.cp-more a,.cp-report a{font-size:calc(13.5px*var(--ts,1))}
.lu-dd,.lu-gl{font-size:calc(13px*var(--ts,1))}
.lu-dd small,.lu-gl small,.lu-bx small,.lu-st small{font-size:calc(11px*var(--ts,1))}
.lu-dd em,.lu-bx em,.lu-st em,.lu-gl em,.lu-al em{font-size:calc(10.5px*var(--ts,1))}
.lu-dd em.nw,.lu-bx em.nw,.lu-st em.nw,.lu-gl em.nw{font-size:calc(10px*var(--ts,1))}
.lu-li{font-size:calc(13.5px*var(--ts,1))}.lu-tag .n,.lu-ch .m b,.lu-tl .m b{font-size:calc(13.5px*var(--ts,1))}
.lu-bx .a{font-size:calc(12.5px*var(--ts,1))}.lu-bx .n{font-size:calc(14.5px*var(--ts,1))}.lu-st .n{font-size:calc(13.5px*var(--ts,1))}
.lu-ch .m small,.lu-tl .m small,.lu-tag .t,.lu-gd small,.lu-sl small{font-size:calc(11.5px*var(--ts,1))}
.lu-gd b,.lu-sl b{font-size:calc(12.5px*var(--ts,1))}
.lu-more a,.cp-more-btn a{font-size:calc(12.5px*var(--ts,1))}
.tr-card .t{font-size:calc(11px*var(--ts,1));height:38px}
.cp-flag{font-size:calc(10.5px*var(--ts,1));line-height:16px}
.cp-search input[type=text],.cp-search button{font-size:calc(14px*var(--ts,1))}
.cp-bar{font-size:calc(15px*var(--ts,1))}
.catRow a{font-size:calc(14px*var(--ts,1))}
/* DjDunia home - clearly bigger */
.hd-top b{font-size:calc(14px*var(--ts,1))}.hd-tabs{font-size:calc(13px*var(--ts,1))}
.hd-cat{font-size:calc(14px*var(--ts,1));padding:12px 8px}.hd-cat>i{font-size:calc(15px*var(--ts,1))}
.hd-cat .t em.soon{font-size:calc(12px*var(--ts,1))}
.hd-cat .go{width:20px;height:20px;font-size:calc(10px*var(--ts,1))}
.hd-svc a{font-size:calc(14px*var(--ts,1));padding:11px 8px}
.hd-pill{font-size:calc(13px*var(--ts,1))}.hd-lib-i{font-size:calc(13px*var(--ts,1))}.hd-lib-h{font-size:calc(14px*var(--ts,1))}.hd-lib-e{font-size:calc(13.5px*var(--ts,1))}

/* meaningful colours (not the theme colour): file size red, downloads blue, folder name orange */
.cp-meta b,.cp-kv-i.k-size .v,.cp-size,.size,.dsize{color:#d91e36;font-weight:700}
.cp-meta .cp-dlc,.cp-meta span{color:#0b6fd1;font-weight:600}
.cp-cat{color:#c2410c}
.cp-kv-i .v.sz{color:#d91e36}
.dcount,.downloads,.cp-dl{color:#0b6fd1}

/* download buttons: own colour per theme (--dl / --dl2 are set by the theme), never the theme's main colour */
.cp-dl-btn{background:linear-gradient(135deg,var(--dl,#16a34a),var(--dl2,#22c55e))!important;box-shadow:0 3px 12px rgba(0,0,0,.28)}
.cp-go.pill{background:var(--dl,#16a34a);color:#fff}
.cp-cut button.dn{background:var(--dl,#16a34a)}
.dwnLink1 a{background:linear-gradient(135deg,var(--dl,#16a34a),var(--dl2,#22c55e))!important;color:#fff!important}
.hc-rk .go{background:var(--dl,#16a34a)}

/* Top Chart home */
.hc-rk{display:flex;align-items:center;gap:9px;padding:8px 8px;background:var(--surface,#fff);border-bottom:1px solid var(--border,#e4e4ee);text-decoration:none}
.hc-rk:hover{background:var(--surface2,#f6f5fd)}
.hc-rk .no{flex:0 0 30px;height:30px;border-radius:50%;background:var(--surface2,#eee);color:var(--text,#222);font-weight:800;font-size:calc(14px*var(--ts,1));display:flex;align-items:center;justify-content:center}
.hc-rk.r1 .no{background:#f5b50a;color:#fff}.hc-rk.r2 .no{background:#9aa3ad;color:#fff}.hc-rk.r3 .no{background:#c27a3a;color:#fff}
.hc-rk .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hc-rk .m>b{font-size:calc(13.5px*var(--ts,1));color:var(--primary,#5a4fc4);line-height:1.3;word-break:break-word}
.hc-rk .go{flex:0 0 34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(15px*var(--ts,1))}
.hc-chips{display:flex;flex-wrap:wrap;gap:7px;padding:10px 8px;background:var(--surface,#fff)}
.hc-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--primary,#5a4fc4);color:var(--primary,#5a4fc4);font-size:calc(13.5px*var(--ts,1));font-weight:700;text-decoration:none;background:var(--surface,#fff)}
.hc-chip small{background:var(--primary,#5a4fc4);color:#fff;border-radius:9px;padding:0 7px;font-size:calc(11px*var(--ts,1))}
.hc-chip:hover{background:var(--surface2,#f6f5fd)}
.hc-chip img.cp-badge{margin-left:2px}

/* Cover Cards home */
.hk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px 8px;background:var(--surface,#fff)}
.hk-card{display:flex;flex-direction:column;gap:3px;text-decoration:none;padding:0;min-width:0}
.hk-card .p{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--border,#ccc);background:#111;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.hk-card .p img{display:block;width:100%;height:100%;object-fit:cover}
.hk-card .p img.cp-badge{position:absolute;left:5px;top:5px;width:30px;height:10px;margin:0;height:auto}
.hk-card .t{font-size:calc(13.5px*var(--ts,1));font-weight:700;color:var(--primary,#5a4fc4);line-height:1.3;word-break:break-word}
.hk-card small{font-size:calc(12px*var(--ts,1));color:#0b6fd1;font-weight:600}
.hk-card small.soon{color:#e53935}
@media(min-width:600px){.hk-grid{grid-template-columns:repeat(4,1fr)}}

/* v30: folder rows use the same small folder icon as the home page categories; red song count */
.cp-row.cat{min-height:0;padding:11px 10px;gap:8px;align-items:center}
.cp-row.cat .cp-th{display:none}
.cp-row.cat .cp-title{display:flex;align-items:center;gap:7px;font-size:calc(14px*var(--ts,1));font-weight:700}
.cp-row.cat .cp-fi{color:var(--primary,#8e24aa);font-size:calc(15px*var(--ts,1));flex:0 0 auto}
.cp-row.cat .cp-fcnt{margin-top:2px;display:block}
.cp-row.cat .cp-fcnt b{color:#d91e36}
.hd-n{color:#d91e36;font-weight:700;font-size:.92em}
.catRow .hd-n,.hd-cat .hd-n{margin-left:2px}

/* v31: look of the DjDunia reference for song rows and category rows */
.cp-row{font-family:Arial,Helvetica,sans-serif;gap:9px;padding:7px 8px}
.cp-row:not(.cat) .cp-th{flex:0 0 70px;width:70px;height:70px;border:1px solid #444;border-radius:4px;background:#fff}
.cp-row:not(.cat) .cp-th img{border-radius:3px}
.cp-row:not(.cat) .cp-info{gap:2px}
.cp-row:not(.cat) .cp-title{font-size:calc(14px*var(--ts,1));font-weight:700;color:var(--primary,#3300c4);line-height:1.3}
.cp-row .cp-sub{font-size:calc(14px*var(--ts,1));color:#0a7d12;font-style:italic}
.cp-row .cp-meta{font-size:calc(14px*var(--ts,1))}
.cp-row .cp-meta b{font-size:calc(14px*var(--ts,1))}
.cp-row .cp-flag{align-self:flex-start;background:none;color:#d0021b;font-size:calc(12.5px*var(--ts,1));font-style:italic;font-weight:700;padding:0;border-radius:0;line-height:1.3;margin-top:1px}
.cp-more-btn a{background:var(--primary,#3300c4);font-size:calc(13px*var(--ts,1));padding:6px 12px;border-radius:6px}
/* category lists: "Name [123]" bold, count in the same colour, grey arrow box */
.hd-cat{font-family:Arial,Helvetica,sans-serif;font-size:calc(13.5px*var(--ts,1));padding:12px 8px;border-bottom:1px solid #ddd}
.hd-cat .t{font-weight:700;color:var(--primary,#3300c4)}
.hd-cat>i{font-size:calc(13px*var(--ts,1))}
.hd-n,.hd-cat .hd-n,.catRow .hd-n{color:inherit;font-weight:700;font-size:1em}
.hd-cat .go{width:20px;height:20px;border-radius:3px;background:#8a8a8a;font-size:calc(10px*var(--ts,1))}
.catRow{font-family:Arial,Helvetica,sans-serif}

/* v32: blinking red label (Trending Songs etc.) */
@keyframes abxBlink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.cp-row .cp-flag{animation:abxBlink 1s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){.cp-row .cp-flag,.ab-tg{animation:none}}

/* v33: folder rows = same look as home categories: "Name [123]" in one colour */
.cp-row.cat .cp-title{font-weight:700;color:var(--primary,#3300c4)}
.cp-row.cat .cp-title .hd-n{color:inherit;font-weight:700;font-size:1em}