@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");

/* ==========================================================
   NIGHT STUDIO  -  dark glass "music app" theme
   Deep ink background, frosted cards, one neon-lime accent.
   Every song in "Latest Updates" gets its own colour.
   Same class names as before: drop-in replacement.

   Re-tint the whole site by changing --accent (+ --accent-ink,
   --accent-soft, --accent-line) in :root.
   ========================================================== */

:root {
  color-scheme: dark;

  --bg:        #09090f;
  --surface:   #13131c;
  --surface-2: #1a1a26;
  --line:      rgba(255, 255, 255, .08);
  --line-2:    rgba(255, 255, 255, .15);

  --text:      #e9e9f2;
  --white:     #ffffff;
  --muted:     #9c9cb4;
  --faint:     #6c6c86;

  --accent:      #c6ff3d;
  --accent-ink:  #0b1000;
  --accent-soft: rgba(198, 255, 61, .12);
  --accent-line: rgba(198, 255, 61, .38);
  --hot:         #ff4d7d;

  --r-lg: 22px;
  --r:    16px;
  --r-sm: 12px;

  --sh:      0 10px 30px rgba(0, 0, 0, .45);
  --sh-lift: 0 14px 34px rgba(0, 0, 0, .55);

  --glass: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));

  --display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@keyframes djWave { from { transform: scaleY(.4); } to { transform: scaleY(1); } }
@keyframes djPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 255, 61, .45); } 50% { box-shadow: 0 0 0 7px rgba(198, 255, 61, 0); } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: #3a3a52 transparent;
}
html::before {                               /* soft coloured glow behind everything */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 38% at 12% -4%,  rgba(124, 92, 255, .24), transparent 62%),
    radial-gradient(46% 32% at 100% 6%,  rgba(198, 255, 61, .07), transparent 62%),
    radial-gradient(60% 40% at 50% 112%, rgba(255, 77, 125, .12), transparent 62%);
}
body {
  max-width: 760px; margin: 0 auto; padding: 0 14px 40px;
  background: transparent; color: var(--text);
  font-family: var(--body); font-size: 15px; line-height: 1.55; word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body * { margin: 0; padding: 0; font-family: inherit; }
td { font-size: inherit; }
a img, :link img, :visited img { border: none; }
img { vertical-align: middle; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .15s, background .15s, border-color .15s, box-shadow .2s, transform .2s; }
a:hover { color: var(--accent); text-decoration: none; }
b { font-weight: 700; color: var(--white); }
p { padding: 4px 0; }
::selection { background: var(--accent); color: var(--accent-ink); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background: #34344a; border-radius: 9px; }

.active { color: var(--accent); font-weight: 600; }
.clr { clear: both; }
.tCenter { text-align: center; }
.red { color: var(--hot); }
.link1, .button { color: var(--accent); font-weight: 600; }
a.top { color: var(--accent); font-weight: 600; }
.devider { height: 8px; }
#online { padding: 8px; text-align: center; color: var(--faint); font-size: 13px; }
.absmiddle, .thumbimg { vertical-align: middle; border: none; border-radius: 12px; }
.ct { margin-right: 4px; vertical-align: middle; padding: 1px; border: 1px solid var(--line-2); border-radius: 5px; }
.odd, .even, .sl { vertical-align: middle; }
.odd { background: rgba(255, 255, 255, .03); }
.even { background: transparent; }
hr { height: 1px; margin: 18px 0; border: 0; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

cd, u {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-decoration: none;
}
cd { background: rgba(255, 77, 125, .16); color: #ff8aa9; }
u  { background: var(--accent-soft); color: var(--accent); }

/* ---------- Headings: glowing dot + fading hairline ---------- */
h1, h2 {
  display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; padding: 0;
  background: none; border: 0; box-shadow: none; color: var(--white);
  font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-align: left;
}
h1::before, h2::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 16px var(--accent);
}
h1::after, h2::after { content: ""; flex: 1; min-width: 20px; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
h2 a { color: inherit; }
h3 {
  margin: 22px 0 10px; padding: 0 0 8px; border-bottom: 1px solid var(--line-2);
  color: var(--white); font-family: var(--display); font-size: 16px; font-weight: 700;
}
h2 + div:not([class]) {
  margin-bottom: 6px; padding: 14px 16px; background: var(--glass), var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); color: var(--muted); line-height: 1.9;
}

/* the Related Tags box comes with inline colours (dark green, 10px) made for a white page */
h2 + div:not([class]) span { font-size: 12.5px !important; }
h2 + div:not([class]) span span { color: var(--accent) !important; font-weight: 600; }

/* ---------- Logo + notices ---------- */
.logo {
  margin: 16px 0 10px; padding: 16px 14px; text-align: center;
  background: var(--glass), var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--sh);
}
.logo a { color: var(--white); font-family: var(--display); font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.logo a:hover { color: var(--white); }
.logo img { max-height: 58px; width: auto; max-width: 100%; }

.bookmark {
  margin: 10px 0; padding: 9px 16px; text-align: center;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.bookmark::before { content: "\2605"; margin-right: 7px; }

.toptitle div, .Zup {
  margin: 8px 0; padding: 11px 16px; background: var(--glass), var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}

/* ---------- Search ---------- */
.search { margin: 14px 0; padding: 0; background: none; border: 0; box-shadow: none; text-align: left; }
.search form { display: flex; align-items: stretch; gap: 8px; }
.search input[type="text"], .search input[type="search"] {
  flex: 1; width: auto; min-width: 0; height: 50px; padding: 0 18px 0 46px;
  border: 1px solid var(--line-2); border-radius: 999px; outline: 0;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239c9cb4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 17px center / 18px no-repeat;
  color: var(--white); font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.search input[type="text"]::placeholder { color: var(--faint); }
.search input[type="text"]:focus, .search input[type="search"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(198, 255, 61, .14); }
.search input[type="submit"], .search input[type="button"], .search button {
  height: 50px; margin: 0; padding: 0 24px; cursor: pointer;
  border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--display); font-size: 14px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(198, 255, 61, .22); transition: transform .15s, box-shadow .15s, filter .15s;
}
.search input[type="submit"]:hover { filter: brightness(1.08); box-shadow: 0 8px 26px rgba(198, 255, 61, .34); }
.search input[type="submit"]:active { transform: scale(.97); }

/* ---------- Forms + tables ---------- */
textarea {
  width: 100%; padding: 12px 14px; outline: 0; font-size: small; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(198, 255, 61, .14); }

table { width: 100%; margin: 12px auto; border-collapse: separate; border-spacing: 0; background: var(--glass), var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
th { padding: 11px 14px; background: rgba(255, 255, 255, .05); color: var(--muted); font-size: 12px; font-weight: 700; text-align: left; letter-spacing: .06em; text-transform: uppercase; }
td { padding: 11px 14px; border-top: 1px solid var(--line); }

/* ---------- Text blocks ---------- */
.description, .filedescription, .paglu {
  margin: 10px 0; padding: 14px 16px; text-align: center; color: var(--muted);
  background: var(--glass), var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.paglu { color: var(--text); }
.description a, .paglu a, .filedescription a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.showimage, .fshow { padding: 14px; text-align: center; background: transparent; border: 0; }
.showimage img, .fshow img { border: 1px solid var(--line-2); border-radius: 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 40px rgba(124, 92, 255, .2); }
.db { padding: 6px; text-align: center; color: var(--muted); font-size: small; }
.info { padding: 12px 14px; text-align: center; color: #ff8aa9; background: rgba(255, 77, 125, .1); border-radius: var(--r-sm); font-weight: 600; }
.error { margin: 10px 0; padding: 13px 14px; text-align: center; color: #ff8aa9; background: rgba(255, 77, 125, .1); border: 1px solid rgba(255, 77, 125, .35); border-radius: var(--r-sm); font-weight: 600; }
.fhd { display: inline-block; margin: 12px 0 4px; padding: 4px 14px; background: rgba(255, 255, 255, .07); color: var(--text); border-radius: 999px; font-weight: 600; }

/* ---------- Sort tabs ---------- */
.dtype {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
  width: fit-content; max-width: 100%; margin: 16px auto; padding: 4px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 999px; font-size: 0; text-align: center;
}
.dtype a, .dtype span { display: inline-block; padding: 8px 17px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.dtype a:hover { color: var(--white); }
.dtype a.active, .dtype span { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px rgba(198, 255, 61, .25); }

/* ---------- Cards ---------- */
.catRow, .catRowHome, .fl, .update-item {
  position: relative; margin: 9px 0;
  background: var(--glass), var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.catRow:hover, .catRowHome:hover, .fl:hover, .update-item:hover {
  border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--sh-lift);
}

/* category rows: round folder icon + name + chevron */
.catRow a, .catRowHome a { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: none; color: var(--white); font-weight: 600; }
.catRow a:hover, .catRowHome a:hover { color: var(--white); }
.catRow a > div, .catRowHome a > div { display: block; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.catRow a::before, .catRowHome a::before {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6ff3d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.catRow a::after, .catRowHome a::after { content: "\203A"; flex: none; color: var(--faint); font-size: 24px; line-height: 1; transition: transform .2s, color .15s; }
.catRow:hover a::after, .catRowHome:hover a::after { color: var(--accent); transform: translateX(3px); }
.catRow div img, .catRowHome div img { padding-right: 6px; }
.catRow a div span, .catRowHome a div span { display: inline-block; margin-left: 4px; padding: 1px 9px; background: rgba(255, 255, 255, .08); color: var(--muted); border-radius: 999px; font-size: x-small; font-weight: 600; }

/* file rows */
.fl a { position: relative; display: block; padding: 12px 64px 12px 12px; vertical-align: middle; }
.fl a:hover { color: inherit; }
.fl a > div { display: flex; align-items: center; gap: 14px; }
.fl a > div > div { display: block; vertical-align: middle; }
.fl a > div > div:first-child { flex: none; }
.fl a > div > div:last-child { flex: 1; min-width: 0; color: var(--white); font-weight: 600; line-height: 1.4; word-break: break-word; }
.fl a img, .fl img {
  display: block; width: 58px; height: 58px; margin: 0; padding: 0; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
}
.fl img[src*="new."], .fl img[src*="updated."], .catRow img[src*="new."], .catRow img[src*="updated."], .catRowHome img[src*="new."] {
  display: inline-block; width: auto; height: 16px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.fl span { font-weight: normal; }
.fl span.ar { color: var(--muted); font-style: italic; }
.tblimg { width: 58px; text-align: center; }
.fileName { font-weight: 600; }
.fileName span { display: inline-block; margin-top: 5px; padding: 2px 10px; background: rgba(255, 255, 255, .07); color: var(--muted); border-radius: 999px; font-size: 12px; font-weight: 500; text-decoration: none; }
.fileName img { padding-right: 0; }

/* download chip (file rows + update rows) */
.fl a::after, .update-item::after {
  content: "\2193"; position: absolute; right: 14px; top: 50%; width: 38px; height: 38px; margin-top: -19px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--chip-bg, var(--accent-soft)); color: var(--chip, var(--accent));
  box-shadow: inset 0 0 0 1px var(--chip-line, var(--accent-line));
  font-size: 17px; font-weight: 700; line-height: 1; transition: background .15s, color .15s, transform .2s;
}
.fl:hover a::after, .update-item:hover::after { background: var(--chip, var(--accent)); color: var(--accent-ink); transform: translateY(2px); }

.updates div { padding: 11px 16px; background: var(--glass), var(--surface); border-bottom: 1px solid var(--line); }

/* ---------- Latest updates: every song its own colour ---------- */
.update-wrapper { margin: 6px 0 10px; }
.update-container { padding: 0; background: none; border: 0; box-shadow: none; }
.update-empty { padding: 18px; text-align: center; color: var(--muted); background: var(--glass), var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r); }

.update-item {
  --c: var(--accent);
  display: block; margin: 0 0 10px; padding: 13px 62px 13px 16px;
  border-left: 3px solid var(--c);
}
.update-item::after { --chip: var(--c); --chip-bg: rgba(255, 255, 255, .06); --chip-line: var(--line-2); }
.update-item:last-child { margin-bottom: 0; }
.update-item:nth-of-type(8n+1) { --c: #ff7b9c; }   /* pink   */
.update-item:nth-of-type(8n+2) { --c: #ffb35c; }   /* orange */
.update-item:nth-of-type(8n+3) { --c: #f4e25f; }   /* yellow */
.update-item:nth-of-type(8n+4) { --c: #6ee7a0; }   /* green  */
.update-item:nth-of-type(8n+5) { --c: #5fd8f5; }   /* cyan   */
.update-item:nth-of-type(8n+6) { --c: #8aa4ff; }   /* blue   */
.update-item:nth-of-type(8n+7) { --c: #c79bff; }   /* violet */
.update-item:nth-of-type(8n+8) { --c: #ff9a85; }   /* coral  */
.update-item:hover { border-color: var(--line-2); border-left-color: var(--c); }

.update-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.update-folder {
  display: inline-block; max-width: 100%; padding: 2px 11px; background: rgba(255, 255, 255, .08); color: #d6d6e6;
  border-radius: 999px; font-size: 12px; font-weight: 600; overflow-wrap: anywhere;
}
.new-update-badge {
  display: inline-flex; align-items: center; padding: 2px 9px; background: var(--hot); color: #fff; border-radius: 999px;
  font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255, 77, 125, .4);
}
.new-update-badge::before { content: ""; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #fff; }
.upload-time { color: var(--faint); font-size: 12px; font-weight: 500; white-space: nowrap; }
@media (min-width: 481px) { .upload-time { margin-left: auto; } }
.update-song-title { display: block; color: var(--c, var(--white)); font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }

.more-updates { margin: 18px 0; text-align: center; }
.more-updates a {
  display: inline-block; padding: 10px 24px; background: rgba(255, 255, 255, .06); color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 999px; font-size: 14px; font-weight: 600;
}
.more-updates a:hover { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px rgba(198, 255, 61, .25); }

/* ---------- Pagination ---------- */
.pgn { padding: 18px 0 4px; background: transparent; text-align: center; }
.pgn a, .pgn span {
  display: inline-block; min-width: 40px; margin: 3px 2px; padding: 8px 13px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 12px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.pgn a:hover { border-color: var(--accent); color: var(--accent); }
.pgn span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(198, 255, 61, .25); }
.pgn div { padding-top: 8px; color: var(--muted); font-size: 13px; }

/* ---------- Breadcrumb ---------- */
.path {
  margin: 24px 0 10px; padding: 13px 16px; background: var(--glass), var(--surface); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
}
.path a { color: var(--accent); font-weight: 600; }

/* ---------- Bars + footer ---------- */
.top21, .ad1 {
  margin: 10px 0; padding: 11px 16px; background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: var(--r-sm); font-weight: 600;
}
.top21 a, .ad1 a { color: var(--accent); font-weight: 700; }
.f1 {
  position: relative; margin-top: 28px; padding: 22px 16px; text-align: center; color: var(--muted);
  background: var(--glass), var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 13px; font-weight: 500;
}
.f1::before { content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.f1 a { color: var(--accent); font-weight: 600; }
.fb { font-weight: 700; }

/* ---------- Legacy download buttons ---------- */
.downLink { margin: 12px 0; text-align: center; }
.dwnLink { font-weight: 700; }
.dwnLink1, .dwnLink2, .dwnLink3, .dwnLink4 {
  display: inline-block; width: 160px; max-width: 100%; margin: 4px; padding: 12px 10px;
  border-radius: 999px; color: #0b0b12; font-size: 14px; font-weight: 700; text-align: center; text-shadow: none;
  transition: transform .2s, filter .2s, box-shadow .2s;
}
.dwnLink1:hover, .dwnLink2:hover, .dwnLink3:hover, .dwnLink4:hover { color: #0b0b12; transform: translateY(-2px); filter: brightness(1.08); }
.dwnLink1 { background: var(--accent); box-shadow: 0 8px 22px rgba(198, 255, 61, .25); }
.dwnLink2 { background: #5fd8f5; box-shadow: 0 8px 22px rgba(95, 216, 245, .22); }
.dwnLink3 { background: #c79bff; box-shadow: 0 8px 22px rgba(199, 155, 255, .22); }
.dwnLink4 { background: #ffb35c; box-shadow: 0 8px 22px rgba(255, 179, 92, .22); }

/* ---------- App banner ---------- */
.app-upload-banner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 66px; margin: 14px 0; padding: 12px 14px;
  background: var(--glass), var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
}
.upload-left { min-width: 0; display: flex; align-items: center; gap: 12px; }
.upload-icon { width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); border-radius: 50%; font-size: 19px; box-shadow: inset 0 0 0 1px var(--accent-line); }
.upload-title { min-width: 0; color: var(--white); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-cta-btn {
  height: 40px; min-width: 92px; margin-left: 10px; padding: 0 18px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none;
  box-shadow: 0 6px 18px rgba(198, 255, 61, .25); transition: transform .15s, filter .15s;
}
.app-cta-btn:hover { color: var(--accent-ink); transform: translateY(-1px); filter: brightness(1.08); }

/* ==========================================================
   DOWNLOAD PAGE  (download.php)
   ========================================================== */

.dj-modern { margin: 0; padding: 0; color: var(--text); }

/* hero: the song's own cover, blurred, becomes the ambient backdrop */
.dj-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 16px 0 10px; padding: 24px 22px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 28px; box-shadow: var(--sh);
}
.dj-hero::before {
  content: ""; position: absolute; inset: -40px; z-index: -2;
  background: var(--cover, linear-gradient(135deg, #3b2a7a, #0f3b45)) center / cover no-repeat;
  filter: blur(38px) saturate(1.6); opacity: .6; transform: scale(1.15);
}
.dj-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9, 9, 15, .15) 0%, rgba(9, 9, 15, .78) 100%);
}
.dj-hero-inner { display: flex; align-items: center; gap: 24px; }
.dj-main-cover {
  width: 180px; height: 180px; flex: 0 0 180px; overflow: hidden;
  border-radius: 22px; box-shadow: 0 22px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .18);
}
.dj-main-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dj-hero-content { flex: 1; min-width: 0; }
.dj-label {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 4px 12px;
  background: rgba(255, 255, 255, .1); color: var(--white); border: 1px solid var(--line-2); border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
.dj-hero-title {
  display: block; margin: 0; padding: 0; background: none; box-shadow: none; color: var(--white);
  font-family: var(--display); font-size: 27px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; text-align: left; word-break: break-word;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.dj-hero-title::before, .dj-hero-title::after { display: none; }
.dj-hero-category { margin-top: 10px; color: #d2d2e2; font-size: 14px; }
.dj-hero-category a { color: var(--accent); font-weight: 700; }
.dj-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dj-meta-pill {
  display: inline-flex; align-items: center; padding: 5px 12px;
  background: rgba(255, 255, 255, .1); color: var(--white); border: 1px solid var(--line-2); border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; font-weight: 600;
}

.dj-content { padding: 4px 0 18px; }

.dj-section-title {
  display: flex; align-items: center; gap: 12px; margin: 30px 0 12px; padding: 0;
  color: var(--white); font-family: var(--display); font-size: 16px; font-weight: 700;
}
.dj-section-title::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--accent); }
.dj-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }

/* info card */
.dj-info-card { overflow: hidden; background: var(--glass), var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.dj-info-row { display: grid; grid-template-columns: 140px 1fr; min-height: 48px; border-bottom: 1px solid var(--line); }
.dj-info-row:last-child { border-bottom: 0; }
.dj-info-label { display: flex; align-items: center; padding: 10px 16px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.dj-info-value { display: flex; align-items: center; padding: 10px 16px; color: var(--white); font-size: 14px; font-weight: 600; word-break: break-word; }
.dj-info-value a { color: var(--accent); }
.dj-hit { padding: 1px 10px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; font-weight: 700; }
.dj-report { display: block; margin: 14px 0; text-align: center; color: var(--faint); font-size: 12px; font-weight: 600; }
.dj-report:hover { color: var(--hot); }

/* player */
.dj-player-card { margin: 14px 0; padding: 16px; background: var(--glass), var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.dj-player-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dj-player-icon {
  width: 48px; height: 48px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink); border-radius: 50%; font-size: 22px; font-weight: 800;
}
.is-playing .dj-player-icon { animation: djPulse 1.6s ease-out infinite; }
.dj-player-details { min-width: 0; flex: 1; }
.dj-player-name { display: block; color: var(--white); font-family: var(--display); font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-player-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.dj-wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.dj-wave i {
  display: block; width: 4px; background: var(--accent); border-radius: 4px;
  animation: djWave .8s ease-in-out infinite alternate; animation-play-state: paused;
}
.is-playing .dj-wave i { animation-play-state: running; }
.dj-wave i:nth-child(1) { height: 12px; }
.dj-wave i:nth-child(2) { height: 22px; animation-delay: .1s; }
.dj-wave i:nth-child(3) { height: 30px; animation-delay: .2s; }
.dj-wave i:nth-child(4) { height: 18px; animation-delay: .3s; }
.dj-wave i:nth-child(5) { height: 26px; animation-delay: .4s; }
.dj-audio { display: block; width: 100%; height: 44px; }
.dj-player-buttons { margin-top: 12px; text-align: center; }
.dj-pbtn {
  margin: 4px 3px; padding: 8px 15px; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: var(--text); border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 12px; font-weight: 600; transition: background .15s, color .15s, border-color .15s;
}
.dj-pbtn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

/* main download button */
.dj-download-box { margin: 24px 0; text-align: center; }
.dj-download-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 280px; padding: 16px 30px;
  background: var(--accent); color: var(--accent-ink) !important; border-radius: 999px;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  box-shadow: 0 12px 34px rgba(198, 255, 61, .3);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.dj-download-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 44px rgba(198, 255, 61, .42); }
.dj-download-btn span { font-weight: 500; opacity: .75; }

/* bitrate + social */
.dj-bitrate { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0; }
.dj-bitrate a { padding: 8px 17px; background: rgba(255, 255, 255, .06); color: var(--text); border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; font-weight: 600; }
.dj-bitrate a:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

.dj-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0; }
.dj-social a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 112px; padding: 10px 16px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; font-weight: 600;
}
.dj-social a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.dj-social a:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1); }
.dj-social .dj-facebook { color: #6aa5ff; }
.dj-social .dj-whatsapp { color: #4ee08a; }
.dj-social .dj-telegram { color: #5fd0f5; }

/* share */
.dj-share-card { margin-top: 16px; padding: 16px; background: var(--glass), var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.dj-share-heading { margin-bottom: 10px; color: var(--white); font-family: var(--display); font-size: 14.5px; font-weight: 700; }
.dj-share-text {
  display: block; width: 100%; min-height: 175px; padding: 12px; resize: vertical; outline: 0;
  background: rgba(0, 0, 0, .3); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.65;
}
.dj-copy {
  display: block; margin: 14px auto 0; padding: 10px 24px; cursor: pointer;
  background: transparent; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px;
  font-size: 13px; font-weight: 700; transition: background .15s, color .15s;
}
.dj-copy:hover { background: var(--accent); color: var(--accent-ink); }

/* tags */
.dj-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; }
.dj-tag {
  display: inline-block; max-width: 100%; min-width: 0; padding: 6px 14px;
  background: rgba(255, 255, 255, .06); color: var(--muted) !important; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; word-break: break-word;
}
.dj-tag:hover { background: var(--accent-soft); color: var(--accent) !important; border-color: var(--accent-line); }

/* related songs */
.dj-related { padding: 0; background: none; border: 0; box-shadow: none; }
.dj-related-item {
  display: flex; align-items: center; gap: 13px; margin: 0 0 10px; padding: 11px 14px;
  background: var(--glass), var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dj-related-item:last-child { margin-bottom: 0; }
.dj-related-item:hover { color: var(--text); border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--sh-lift); }
.dj-related-image {
  position: relative; width: 58px; height: 58px; flex: 0 0 58px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
}
.dj-related-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dj-related-image::after {
  content: "\25B6"; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 9px; opacity: 0; transition: opacity .15s;
}
.dj-related-item:hover .dj-related-image::after { opacity: 1; }
.dj-related-info { min-width: 0; flex: 1; }
.dj-related-name { color: var(--white); font-size: 14.5px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.dj-related-meta { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.dj-remixer { color: var(--accent); font-weight: 600; }
.dj-related-arrow { flex: none; color: var(--faint); font-size: 24px; line-height: 1; transition: transform .2s, color .15s; }
.dj-related-item:hover .dj-related-arrow { color: var(--accent); transform: translateX(3px); }
.dj-new {
  display: inline-block; margin-left: 7px; padding: 1px 8px; vertical-align: middle;
  background: var(--hot); color: #fff; border-radius: 999px;
  font-family: var(--display); font-size: 9.5px; font-weight: 700; line-height: 15px; letter-spacing: .05em;
  box-shadow: 0 4px 12px rgba(255, 77, 125, .4);
}

/* description + breadcrumb */
.dj-description {
  padding: 14px 16px; background: var(--glass), var(--surface); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r); font-size: 12.5px; line-height: 1.85;
}
.dj-breadcrumb {
  margin: 24px 0 10px; padding: 13px 16px; background: var(--glass), var(--surface); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
}
.dj-breadcrumb a { color: var(--accent); font-weight: 600; }
.dj-breadcrumb strong { color: var(--white); font-weight: 600; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .dj-hero { padding: 22px 14px 22px; border-radius: 24px; }
  .dj-hero-inner { display: block; text-align: center; }
  .dj-main-cover { width: 170px; height: 170px; margin: 0 auto 18px; }
  .dj-hero-title { font-size: 21px; text-align: center; }
  .dj-hero-meta { justify-content: center; margin-top: 12px; }
  .dj-meta-pill { padding: 4px 11px; font-size: 11.5px; }
  .dj-info-row { grid-template-columns: 108px 1fr; }
  .dj-info-label, .dj-info-value { padding: 10px 12px; font-size: 13px; }
  .dj-download-btn { width: 100%; min-width: 0; padding: 16px 14px; font-size: 15px; }
  .dj-social a { flex: 1; min-width: 0; padding: 10px 6px; }
  .dj-related-image { width: 52px; height: 52px; flex-basis: 52px; }
  .dj-related-name { font-size: 13.5px; }
}
@media (max-width: 480px) {
  body { font-size: 14px; padding: 0 12px 34px; }
  .logo a { font-size: 21px; }
  .fl a { padding-right: 58px; }
  .fl a img, .fl img { width: 52px; height: 52px; }
  .fl a::after, .update-item::after { width: 34px; height: 34px; margin-top: -17px; right: 12px; font-size: 15px; }
  .update-item { padding: 12px 56px 12px 14px; }
  .update-song-title { font-size: 15px; }
  .catRow a::before, .catRowHome a::before { width: 36px; height: 36px; }
  .search input[type="submit"] { padding: 0 18px; }
  .dtype a, .dtype span { padding: 7px 12px; }
  .dwnLink1, .dwnLink2, .dwnLink3, .dwnLink4 { width: 46%; }
}
@media (max-width: 380px) {
  .dj-main-cover { width: 150px; height: 150px; }
  .dj-info-row { grid-template-columns: 94px 1fr; }
}

/* ---------- Long-text safety: long unbroken words wrap inside the page ---------- */
.dj-tags, .dj-related-info, .dj-hero-content, .update-item, .fl a > div > div:last-child { min-width: 0; }
h1, h2, h3,
.dj-section-title, .dj-description, .dj-breadcrumb, .dj-hero-category, .dj-meta-pill,
.dj-related-name, .dj-info-value, .dj-report,
.catRow a, .path, .description, .filedescription,
h2 + div { overflow-wrap: anywhere; word-break: break-word; }

/* ==========================================================
   HOME EXTRAS  -  Top Artist / Top Downloads / Trending
   (moved out of PHP; Night Studio look)
   ========================================================== */
.home-extra-section { width: 100%; margin: 0 auto 18px; padding: 0 12px; }

.home-extra-title {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 43px; margin: 13px 0 9px; padding: 10px 14px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--line-2); color: var(--white);
  font-family: var(--display); font-size: 15px; font-weight: 700; line-height: 20px;
}
.home-extra-title i { color: var(--accent); font-size: 14px; }

/* shared card look */
.top-artist-item, .trending-item {
  --c: var(--accent);
  position: relative; display: flex; align-items: center; width: 100%;
  margin: 0 0 8px; padding: 8px 12px; border-radius: var(--r);
  background: var(--glass), var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c);
  box-shadow: var(--sh); text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.top-artist-item:hover, .trending-item:hover { transform: translateY(-2px); border-color: var(--c); background: var(--glass), var(--surface-2); }

.top-artist-pic, .trending-pic {
  flex: none; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2);
  border: 1px solid var(--line-2); margin-right: 13px;
}
.top-artist-pic { width: 66px; height: 66px; }
.trending-pic   { width: 72px; height: 72px; }
.top-artist-pic img, .trending-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.top-artist-info, .trending-info { flex: 1; min-width: 0; padding-right: 8px; }
.top-artist-name, .trending-name {
  display: block; width: 100%; color: var(--c); font-size: 15px; font-weight: 700; line-height: 20px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-artist-meta, .trending-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.top-artist-count, .trending-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--muted);
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.trending-badge i { font-size: 10px; color: var(--c); }

.top-artist-badge, .top-file-badge {
  display: inline-flex; align-items: center; justify-content: center; height: 21px; padding: 0 9px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink) !important; -webkit-text-fill-color: var(--accent-ink) !important;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1; white-space: nowrap;
}

.top-artist-arrow, .trending-play { flex: none; width: 30px; text-align: center; color: var(--faint); }
.top-artist-arrow { font-size: 12px; }
.trending-play { font-size: 24px; color: var(--c); transition: transform .18s ease; }
.top-artist-item:hover .top-artist-arrow { color: var(--c); }
.trending-item:hover .trending-play { transform: scale(1.12); }

/* each trending row gets its own colour, like Latest Updates */
.trending-item:nth-of-type(8n+1), .top-artist-item:nth-of-type(8n+1) { --c: #ff7b9c; }
.trending-item:nth-of-type(8n+2), .top-artist-item:nth-of-type(8n+2) { --c: #ffb35c; }
.trending-item:nth-of-type(8n+3), .top-artist-item:nth-of-type(8n+3) { --c: #f4e25f; }
.trending-item:nth-of-type(8n+4), .top-artist-item:nth-of-type(8n+4) { --c: #6ee7a0; }
.trending-item:nth-of-type(8n+5), .top-artist-item:nth-of-type(8n+5) { --c: #5fd8f5; }
.trending-item:nth-of-type(8n+6), .top-artist-item:nth-of-type(8n+6) { --c: #8aa4ff; }
.trending-item:nth-of-type(8n+7), .top-artist-item:nth-of-type(8n+7) { --c: #c79bff; }
.trending-item:nth-of-type(8n+8), .top-artist-item:nth-of-type(8n+8) { --c: #ff9a85; }

/* Top Downloads marquee */
.top-downloads-marquee { width: 100%; overflow: hidden; padding: 1px 0 4px; }
.top-downloads-track { display: flex; align-items: stretch; width: max-content; gap: 10px; will-change: transform; animation: topDownloadsMove 32s linear infinite; }
@keyframes topDownloadsMove { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.top-downloads-marquee:hover .top-downloads-track { animation-play-state: paused; }

.top-download-card {
  position: relative; display: flex; flex-direction: column; flex: none; width: 142px; height: 184px; padding: 6px;
  border-radius: var(--r); overflow: hidden; background: var(--glass), var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh); text-decoration: none; transition: transform .18s ease, border-color .18s ease;
}
.top-download-card:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.top-download-cover { position: relative; flex: none; width: 100%; height: 128px; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); }
.top-download-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.top-download-count {
  position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: rgba(9, 9, 15, .72); color: var(--white) !important; font-size: 10.5px; font-weight: 600; white-space: nowrap;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.top-download-count i { font-size: 9px; color: var(--accent) !important; }
.top-download-name { display: block; height: 40px; margin-top: 6px; padding: 0 2px; overflow: hidden; text-align: center; overflow-wrap: anywhere; font-size: 12px; font-weight: 700; line-height: 17px; }
.top-download-name.rgb1 { color: #ff7b9c !important; -webkit-text-fill-color: #ff7b9c !important; }
.top-download-name.rgb2 { color: #ffb35c !important; -webkit-text-fill-color: #ffb35c !important; }
.top-download-name.rgb3 { color: #f4e25f !important; -webkit-text-fill-color: #f4e25f !important; }
.top-download-name.rgb4 { color: #6ee7a0 !important; -webkit-text-fill-color: #6ee7a0 !important; }
.top-download-name.rgb5 { color: #5fd8f5 !important; -webkit-text-fill-color: #5fd8f5 !important; }
.top-download-name.rgb6 { color: #8aa4ff !important; -webkit-text-fill-color: #8aa4ff !important; }
.top-download-name.rgb7 { color: #c79bff !important; -webkit-text-fill-color: #c79bff !important; }

@media (max-width: 480px) {
  .home-extra-section { padding: 0 7px; }
  .top-artist-item, .trending-item { padding: 7px 9px; }
  .trending-pic { width: 64px; height: 64px; margin-right: 10px; }
  .top-artist-pic { width: 60px; height: 60px; margin-right: 10px; }
  .top-artist-name, .trending-name { font-size: 14px; }
  .top-download-card { width: 128px; height: 168px; }
  .top-download-cover { height: 114px; }
  .top-downloads-track { animation-duration: 26s; }
}

/* ==========================================================
   TOP 20 FILES  -  Today / Yesterday / Week / Month
   ========================================================== */
.top20-section { width: 100%; margin: 15px 0; padding: 0 10px; }

.top20-title {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 12px; padding: 13px 12px; border-radius: var(--r);
  background: var(--glass), var(--surface); border: 1px solid var(--line-2);
  color: var(--white); font-family: var(--display); font-size: 16px; font-weight: 700; text-align: center;
}
.top20-title i { margin: 0; color: #ffd24a; text-shadow: 0 0 14px rgba(255, 210, 74, .6); }

.top20-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 14px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.top20-tab {
  display: inline-flex; align-items: center; justify-content: center; min-width: 74px; padding: 8px 14px; border-radius: 999px;
  color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: color .15s, background .15s;
}
.top20-tab:hover { color: var(--white); background: rgba(255,255,255,.07); }
.top20-tab.active { color: var(--accent-ink) !important; background: var(--accent); font-weight: 800; box-shadow: 0 0 18px rgba(198,255,61,.35); }

.top20-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.top20-item {
  --c: var(--accent);
  display: flex; align-items: center; width: 100%; min-height: 66px; padding: 8px 10px; border-radius: var(--r);
  background: var(--glass), var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c);
  box-shadow: var(--sh); text-decoration: none; transition: transform .18s ease, border-color .18s ease;
}
.top20-item:hover { transform: translateY(-2px); border-color: var(--c); }
.top20-item:nth-of-type(8n+1) { --c: #ff7b9c; }
.top20-item:nth-of-type(8n+2) { --c: #ffb35c; }
.top20-item:nth-of-type(8n+3) { --c: #f4e25f; }
.top20-item:nth-of-type(8n+4) { --c: #6ee7a0; }
.top20-item:nth-of-type(8n+5) { --c: #5fd8f5; }
.top20-item:nth-of-type(8n+6) { --c: #8aa4ff; }
.top20-item:nth-of-type(8n+7) { --c: #c79bff; }
.top20-item:nth-of-type(8n+8) { --c: #ff9a85; }

.top20-number { flex: none; width: 34px; text-align: center; color: var(--faint); font-family: var(--display); font-size: 13px; font-weight: 800; }
.top20-item:nth-of-type(1) .top20-number { color: #ffd24a; text-shadow: 0 0 12px rgba(255,210,74,.55); }
.top20-item:nth-of-type(2) .top20-number { color: #d5dae6; }
.top20-item:nth-of-type(3) .top20-number { color: #e59a62; }

.top20-icon { flex: none; width: 46px; height: 46px; margin-right: 11px; overflow: hidden; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); }
.top20-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.top20-info { flex: 1; min-width: 0; }
.top20-name { display: block; width: 100%; color: var(--c); font-size: 14px; font-weight: 700; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top20-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.top20-size, .top20-views {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1;
}
.top20-views i { color: var(--c); }
.top20-arrow { flex: none; width: 24px; text-align: center; color: var(--faint); font-size: 12px; }
.top20-item:hover .top20-arrow { color: var(--c); }

.top20-empty { padding: 30px 10px; text-align: center; color: var(--muted); border-radius: var(--r); background: var(--glass), var(--surface); border: 1px dashed var(--line-2); }
.top20-empty i { display: block; margin-bottom: 8px; font-size: 28px; color: var(--faint); }
.top20-empty-text { font-size: 13px; }

@media (max-width: 480px) {
  .top20-section { padding: 0 7px; }
  .top20-tab { min-width: 0; padding: 8px 11px; font-size: 12px; }
  .top20-number { width: 28px; font-size: 12px; }
  .top20-icon { width: 42px; height: 42px; margin-right: 9px; }
  .top20-name { font-size: 13px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}