﻿<style>
/* ── TOKENS ──────────────────────────────── */
:root { --ease: cubic-bezier(.4,0,.2,1); --dur: .25s; }

[data-theme="dark"] {
  --bg:        #0d0d12;
  --surface:   #15151e;
  --surface2:  #1c1c28;
  --border:    rgba(255,255,255,.07);
  --text:      #eeeef5;
  --sub:       #9090b0;
  --accent:    #e8365d;
  --accent-lo: rgba(232,54,93,.12);
  --gold:      #f0b429;
  --shadow:    0 2px 20px rgba(0,0,0,.55);
  --nav-bg:    rgba(13,13,18,.92);
  --pill-bg:   #1c1c28;
}
[data-theme="light"] {
  --bg:        #f5f5f9;
  --surface:   #ffffff;
  --surface2:  #eeeef5;
  --border:    rgba(0,0,0,.08);
  --text:      #0d0d12;
  --sub:       #7070a0;
  --accent:    #d42b52;
  --accent-lo: rgba(212,43,82,.08);
  --gold:      #c99800;
  --shadow:    0 2px 20px rgba(0,0,0,.08);
  --nav-bg:    rgba(245,245,249,.94);
  --pill-bg:   #eeeef5;
}

/* ── RESET ───────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg); color:var(--text);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
  overflow-x:hidden; line-height:1.5;
  width:100%;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}

/* ── LAYOUT ──────────────────────────────── */
.wrap{max-width:1160px;margin:0 auto;padding:0 1.25rem;width:100%}

/* ── NAV ─────────────────────────────────── */
nav{
  position:sticky;top:0;z-index:200;
  background:var(--nav-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex;align-items:center;gap:.75rem;
  padding:.65rem 1.25rem;
}

/* Logo — subtle glow ring on hover */
.nav-logo{
  display:flex;align-items:center;flex-shrink:0;
  padding:.2rem;border-radius:10px;
  transition:background var(--dur);
}
.nav-logo:hover{background:var(--accent-lo)}
.nav-logo img{
  height:34px;width:auto;object-fit:contain;
  transition:filter var(--dur),transform var(--dur);
}
.nav-logo:hover img{transform:scale(1.04)}
[data-theme="dark"] .nav-logo img{filter:brightness(0) invert(1)}

/* ── TOP-LEVEL MENU ──────────────────────── */
.nav-links{
  display:flex;gap:.05rem;list-style:none;margin-left:.5rem;
  position:relative;
}
.nav-links > li { position:relative; }
.nav-links > li > a{
  display:flex;align-items:center;gap:.28rem;
  padding:.42rem .72rem;border-radius:8px;
  font-size:.8rem;font-weight:600;letter-spacing:.1px;
  color:var(--text);white-space:nowrap;
  position:relative;
  transition:background var(--dur),color var(--dur);
}
.nav-links > li > a:hover,
.nav-links > li:hover > a{
  background:var(--accent-lo);
  color:var(--accent);
}
/* bottom line indicator */
.nav-links > li > a::after{
  content:'';
  position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
  width:0;height:2px;border-radius:2px;
  background:var(--accent);
  transition:width .2s var(--ease);
}
.nav-links > li > a:hover::after,
.nav-links > li:hover > a::after,
.nav-links > li.active > a::after{width:65%}

/* ── MEGA MENU ─────────────────────────── */
.has-mega{position:relative}
.nav-links>li>a svg{opacity:.5;margin-left:.15rem;transition:transform .2s,opacity .2s}
.has-mega:hover>a svg{transform:rotate(180deg);opacity:1}
.mega-menu{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(8px);
  width:680px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:500;
}
.has-mega:hover .mega-menu{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.mega-menu::before{
  content:'';position:absolute;top:-7px;left:50%;
  width:12px;height:12px;background:var(--surface);
  border-left:1.5px solid var(--border);border-top:1.5px solid var(--border);
  transform:translateX(-50%) rotate(45deg);
}
/* Prevent left overflow — anchor to left edge for first mega item */
.nav-links>li:nth-child(2) .mega-menu{
  left:0;transform:translateY(8px);
}
.nav-links>li:nth-child(2):hover .mega-menu{
  transform:translateY(0);
}
.nav-links>li:nth-child(2) .mega-menu::before{left:80px}
.mega-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:.5rem}
.mega-col{padding:.8rem .7rem}
.mega-col+.mega-col{border-left:1px solid var(--border)}
.mega-col-title{font-size:.6rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin:.2rem 0 .6rem;padding-bottom:.35rem;border-bottom:1px solid var(--border)}
.mega-link{display:flex;align-items:center;gap:.6rem;padding:.42rem .5rem;border-radius:8px;text-decoration:none;color:var(--text);transition:background .15s;margin-bottom:.1rem}
.mega-link:hover{background:var(--accent-lo)}
.mega-link:hover .ml-title{color:var(--accent)}
.ml-ico{font-size:1.1rem;width:28px;text-align:center;flex-shrink:0}
.ml-title{font-size:.79rem;font-weight:700;line-height:1.2}
.ml-sub{font-size:.63rem;color:var(--sub);margin-top:.1rem}
.mega-featured{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--border)}
.mf-label{font-size:.58rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub);margin-bottom:.45rem}
.mf-card{display:flex;align-items:center;gap:.6rem;background:var(--accent-lo);border:1.5px solid rgba(232,54,93,.2);border-radius:9px;padding:.5rem .7rem;text-decoration:none;color:var(--text);transition:background .15s}
.mf-card:hover{background:rgba(232,54,93,.15)}
.mf-img{width:34px;height:34px;border-radius:7px;background:linear-gradient(135deg,var(--accent),#c0183a);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.mf-title{font-size:.76rem;font-weight:800;color:var(--accent)}
.mf-artist{font-size:.63rem;color:var(--sub)}

/* Nav right */
.nav-right{display:flex;align-items:center;gap:.4rem;flex-shrink:0;margin-left:auto}
.theme-btn{width:36px;height:20px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);position:relative;padding:0;flex-shrink:0;cursor:pointer}
.theme-btn::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--sub);transition:transform .3s,background .3s}
[data-theme="light"] .theme-btn::after{transform:translateX(16px);background:var(--accent)}
.t-ico{position:absolute;top:50%;transform:translateY(-50%);font-size:8px;left:3px;pointer-events:none}
[data-theme="light"] .t-ico{left:auto;right:3px}
.btn-up{background:var(--accent);color:#fff;border:none;padding:.42rem .9rem;border-radius:7px;font-size:.76rem;font-weight:700;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:opacity var(--dur)}
.btn-up:hover{opacity:.88}
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;width:34px;height:34px;background:none;border:1px solid var(--border);border-radius:7px;gap:4px;flex-shrink:0;cursor:pointer}
.hamburger span{width:15px;height:2px;background:var(--text);border-radius:2px;transition:all .3s;display:block}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* Mobile nav */
.mobile-nav{display:none;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--border);padding:.5rem 1.25rem 1.2rem;gap:.04rem;max-height:80vh;overflow-y:auto}
.mobile-nav.open{display:flex}
.mob-section-title{font-size:.6rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);padding:.7rem .4rem .3rem;margin-top:.3rem}
.mob-sep{height:1px;background:var(--border);margin:.35rem 0}
.mob-direct{display:block;padding:.42rem .5rem;font-size:.82rem;font-weight:600;color:var(--sub);border-radius:8px;transition:background .15s,color .15s}
.mob-direct:hover{background:var(--accent-lo);color:var(--accent)}

/* ── TICKER ──────────────────────────────── */
.ticker{background:var(--accent);overflow:hidden;padding:.38rem 0;width:100%;position:relative}
.ticker-track{display:flex;width:max-content;min-width:200%;animation:tick 38s linear infinite;white-space:nowrap;will-change:transform}
.ticker-track span{flex-shrink:0}
.ticker-track span{font-size:.72rem;letter-spacing:.5px;color:rgba(255,255,255,.92);padding:0 2rem}
.ticker-track .dot{opacity:.45}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── HERO ────────────────────────────────── */
.hero{
  padding:2rem 0 1.5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
}
.hero-left{}
.hero h1{
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:800;line-height:1.0;letter-spacing:-2px;
  margin-bottom:.9rem;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-desc{color:var(--sub);font-size:.92rem;line-height:1.75;max-width:420px;margin:0 0 1.4rem}
.hero-btns{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-start}

/* Hero right — stats panel */
.hero-right{
  display:flex;flex-direction:column;gap:.75rem;
}
.hero-stat-row{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
}
.hero-stat{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:14px;padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.3rem;
}
.hero-stat .hs-num{
  font-size:1.6rem;font-weight:800;letter-spacing:-1px;color:var(--text);
}
.hero-stat .hs-num em{font-style:normal;color:var(--accent)}
.hero-stat .hs-label{font-size:.72rem;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.8px}
.hero-featured{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:14px;padding:1rem 1.2rem;
  display:flex;align-items:center;gap:1rem;
}
.hf-icon{
  width:48px;height:48px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#1a1230,#2a1c3a);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
[data-theme="light"] .hf-icon{background:linear-gradient(135deg,#ddd0ee,#c8aedd)}
.hf-info h4{font-size:.88rem;font-weight:700;margin-bottom:.15rem}
.hf-info p{font-size:.74rem;color:var(--sub)}
.hf-badge{
  margin-left:auto;flex-shrink:0;
  background:var(--accent-lo);color:var(--accent);
  font-size:.65rem;font-weight:800;padding:.25rem .55rem;
  border-radius:6px;letter-spacing:.5px;
}
.btn-primary{
  background:var(--accent);color:#fff;border:none;
  padding:.75rem 1.6rem;border-radius:10px;
  font-size:.88rem;font-weight:700;
  box-shadow:0 4px 18px rgba(232,54,93,.35);
  transition:transform var(--dur),box-shadow var(--dur);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(232,54,93,.45)}
.btn-ghost{
  background:transparent;color:var(--text);
  border:1.5px solid var(--border);
  padding:.75rem 1.6rem;border-radius:10px;
  font-size:.88rem;font-weight:600;
  transition:border-color var(--dur),background var(--dur);
}
.btn-ghost:hover{border-color:var(--sub);background:var(--surface2)}

/* Player card */
.player{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:1.4rem;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.player::before{
  content:'';position:absolute;top:-50px;right:-50px;
  width:160px;height:160px;
  background:radial-gradient(circle,var(--accent-lo),transparent 70%);
  pointer-events:none;
}
.np-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.68rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.np-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.song-art{
  width:100%;aspect-ratio:1;border-radius:14px;
  background:linear-gradient(135deg,#1a1230,#2a1c3a);
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;margin-bottom:1.1rem;
  position:relative;overflow:hidden;cursor:pointer;
}
[data-theme="light"] .song-art{background:linear-gradient(135deg,#ddd0ee,#c8aedd)}
.song-art-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);border-radius:14px;opacity:0;transition:opacity var(--dur);
}
.song-art:hover .song-art-overlay{opacity:1}
.play-circle{
  width:54px;height:54px;border-radius:50%;
  background:var(--accent);border:none;color:#fff;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
}
.song-row{display:flex;justify-content:space-between;align-items:flex-start}
.song-row h3{font-size:1rem;font-weight:700;margin-bottom:.15rem}
.heart{background:none;border:none;font-size:1.1rem;color:var(--sub);transition:color var(--dur)}
.heart.on{color:var(--accent)}
.song-artist{font-size:.78rem;color:var(--sub);margin-bottom:.9rem}
.prog-wrap{height:3px;background:var(--border);border-radius:3px;cursor:pointer;position:relative;margin-bottom:.4rem}
.prog-fill{
  width:42%;height:100%;
  background:linear-gradient(90deg,var(--accent),#ff6b35);
  border-radius:3px;position:relative;
}
.prog-fill::after{
  content:'';position:absolute;right:-5px;top:-4px;
  width:11px;height:11px;border-radius:50%;background:var(--accent);
}
.time-row{display:flex;justify-content:space-between;font-size:.7rem;color:var(--sub);margin-bottom:.9rem}
.controls{display:flex;justify-content:center;align-items:center;gap:1rem}
.ctrl{background:none;border:none;color:var(--sub);font-size:.95rem;padding:.35rem;transition:color var(--dur)}
.ctrl:hover{color:var(--text)}
.ctrl-play{
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);border:none;color:#fff;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(232,54,93,.4);
  transition:transform var(--dur);
}
.ctrl-play:hover{transform:scale(1.08)}

/* ── HERO BANNER SEARCH (ikman style) ───── */
.hero-search-banner{
  background:linear-gradient(135deg,var(--accent) 0%,#c0183a 100%);
  padding:2.2rem 0 2rem;
  margin-bottom:0;
}
.hero-search-inner{
  max-width:1160px;margin:0 auto;padding:0 1.25rem;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  text-align:center;
}
.hero-search-inner .hero-eyebrow{
  background:rgba(255,255,255,.18);color:#fff;
  border:none;
}
.hero-search-inner h1{
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:800;line-height:1.1;letter-spacing:-1.5px;
  color:#fff;margin-bottom:.2rem;
}
.hero-search-inner h1 em{font-style:normal;color:rgba(255,255,255,.75)}
.hero-search-inner .hero-desc{
  color:rgba(255,255,255,.8);font-size:.9rem;
  max-width:500px;margin:0 0 .5rem;
}
.hero-search-wrap{
  width:100%;max-width:780px;
  position:relative;
}
.hero-search-wrap input{
  width:100%;
  padding:.9rem 3.8rem .9rem 1.4rem;
  border-radius:50px;
  border:none;
  background:#fff;
  color:#111;
  font-family:inherit;font-size:.95rem;
  outline:none;
  box-shadow:0 4px 24px rgba(0,0,0,.18);
}
.hero-search-wrap input::placeholder{color:#aaa}
.hero-search-wrap input:focus{box-shadow:0 6px 32px rgba(0,0,0,.22)}
.hero-search-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:var(--accent);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:opacity var(--dur),transform var(--dur);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.hero-search-btn:hover{opacity:.88;transform:translateY(-50%) scale(1.06)}
.hero-search-btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hero-search-drop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:#fff;border:1px solid #eee;
  border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.15);
  z-index:300;display:none;overflow:hidden;
}
.hero-search-drop.show{display:block}
.hsd-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.65rem 1.1rem;font-size:.84rem;
  transition:background .15s;color:#111;
}
.hsd-item:hover{background:#f5f5f5}
.hsd-item .hsd-ico{font-size:1rem;flex-shrink:0}
.hsd-item h5{font-size:.84rem;font-weight:700;margin-bottom:.1rem;color:#111}
.hsd-item p{font-size:.72rem;color:#888}
.hsd-footer{
  display:block;text-align:center;padding:.6rem;
  font-size:.76rem;font-weight:800;color:var(--accent);
  border-top:1px solid #eee;letter-spacing:.5px;
}
.hsd-footer:hover{background:#f9f9f9}
.hero-search-btns{
  display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;
  margin-top:.4rem;
}
.hero-search-btns .btn-primary{
  background:#fff;color:var(--accent);
  box-shadow:0 4px 18px rgba(0,0,0,.15);
}
.hero-search-btns .btn-primary:hover{background:#f5f5f5}
.hero-search-btns .btn-ghost{
  background:rgba(255,255,255,.15);
  color:#fff;border-color:rgba(255,255,255,.4);
}
.hero-search-btns .btn-ghost:hover{background:rgba(255,255,255,.25)}
.sec{padding:1.4rem 0}
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.sec-title{font-size:1.2rem;font-weight:800;letter-spacing:-.4px}
.see-all{font-size:.75rem;font-weight:700;color:var(--accent);letter-spacing:.5px}
.see-all:hover{text-decoration:underline}

/* Exclusive nav item */
.nav-exclusive{
  background:linear-gradient(135deg,var(--accent),#ff6b35) !important;
  color:#fff !important;
  border-radius:8px;
  padding:.4rem .8rem !important;
}
.nav-exclusive:hover{opacity:.88;color:#fff !important;background:linear-gradient(135deg,var(--accent),#ff6b35) !important}
.nav-exclusive::after{color:#fff !important}

/* Category icon — single accent color */
.cat-icon-wrap{
  width:54px;height:54px;border-radius:14px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  box-shadow:0 4px 14px rgba(232,54,93,.25);
  transition:transform var(--dur),box-shadow var(--dur);
}
.cat-card:hover .cat-icon-wrap{
  transform:scale(1.08);
  box-shadow:0 6px 20px rgba(232,54,93,.4);
}
.stats-row{
  display:flex;gap:.75rem;flex-wrap:wrap;
  padding:1.2rem 0 .5rem;align-items:stretch;
}
.stats-row .hero-stat{flex:1;min-width:90px}
.stats-row .hero-featured{flex:2;min-width:180px}

/* ── CATEGORIES ──────────────────────────── */
.cat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.cat-card{
  display:flex;align-items:center;gap:.9rem;
  padding:.9rem 1rem;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:12px;cursor:pointer;text-decoration:none;
  transition:transform var(--dur),border-color var(--dur),box-shadow var(--dur),background var(--dur);
}
.cat-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 6px 20px rgba(232,54,93,.1);
  background:var(--accent-lo);
}
.cat-icon-wrap{
  width:44px;height:44px;min-width:44px;border-radius:10px;
  background:var(--accent-lo);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  transition:transform var(--dur),background var(--dur);
}
.cat-card:hover .cat-icon-wrap{
  background:var(--accent);
  transform:scale(1.06);
}
.cat-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cat-label{font-size:.82rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-count{font-size:.7rem;color:var(--sub);font-weight:500}

/* ── SONG GRID ───────────────────────────── */
.song-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.song-card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:14px;padding:.9rem;cursor:pointer;
  position:relative;
  transition:transform var(--dur),border-color var(--dur),box-shadow var(--dur);
}
.song-card:hover{transform:translateY(-4px);border-color:rgba(232,54,93,.3);box-shadow:0 12px 32px var(--shadow)}
.thumb{
  aspect-ratio:1;border-radius:12px;
  background:linear-gradient(135deg,#c8b4e8,#a990d4);
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;margin-bottom:.8rem;
  position:relative;overflow:hidden;
}
[data-theme="dark"] .thumb{background:linear-gradient(135deg,#2a1c3a,#1a1230)}
.thumb-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);border-radius:12px;
  opacity:0;transition:opacity var(--dur);
}
.song-card:hover .thumb-play{opacity:1}
.thumb-play-btn{
  width:42px;height:42px;border-radius:50%;
  background:var(--accent);border:none;color:#fff;
  font-size:1rem;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(232,54,93,.5);
}
.badge{
  position:absolute;top:-1px;right:-1px;
  background:var(--accent);color:#fff;
  font-size:.6rem;font-weight:800;padding:3px 8px;
  border-radius:0 13px 0 8px;
  letter-spacing:.5px;z-index:2;
}
.s-name{font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.2rem}
.s-artist{font-size:.74rem;color:var(--sub)}
.s-stats{display:flex;gap:.7rem;margin-top:.45rem;font-size:.68rem;color:var(--sub)}

.c-badge-new{
  background:var(--accent);color:#fff;
  font-size:.6rem;font-weight:800;padding:2px 7px;
  border-radius:5px;letter-spacing:.5px;flex-shrink:0;
}

/* ── TABS ────────────────────────────────── */
.tab-btns{display:flex;gap:.4rem;flex-wrap:wrap}
.tab-btn{
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--sub);font-family:inherit;font-size:.8rem;font-weight:700;
  padding:.45rem 1rem;border-radius:50px;cursor:pointer;
  transition:all var(--dur);white-space:nowrap;
  display:flex;align-items:center;gap:.3rem;
}
.tab-btn:hover{border-color:var(--accent);color:var(--accent)}
.tab-btn.active{
  background:var(--accent);border-color:var(--accent);
  color:#fff;box-shadow:0 4px 12px rgba(232,54,93,.3);
}
.tab-ico{font-size:.95rem}
.tab-panel{display:none}
.tab-panel.active{display:block}
.tab-panel .chart-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.4rem;
}
@media(max-width:640px){
  .tab-panel .chart-list{grid-template-columns:1fr}
}
@media(max-width:580px){
  .tab-txt{display:none}
  .tab-btn{padding:.45rem .7rem;font-size:1.1rem}
  .tab-ico{font-size:1.1rem}
}

/* ── TWO COL ─────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem}

/* ── CHART LIST ──────────────────────────── */
.chart-list{display:flex;flex-direction:column;gap:.4rem}
.chart-row{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem .9rem;background:var(--surface);
  border:1.5px solid var(--border);border-radius:12px;
  cursor:pointer;transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur);
}
.chart-row:hover{border-color:rgba(232,54,93,.3);transform:translateX(3px);box-shadow:0 4px 16px var(--shadow)}
.c-num{font-size:1.1rem;font-weight:800;color:var(--sub);min-width:26px;letter-spacing:-1px}
.c-num.gold{
  background:linear-gradient(135deg,#f0b429,#f59e0b);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.c-thumb{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#c8b4e8,#a990d4);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
[data-theme="dark"] .c-thumb{background:linear-gradient(135deg,#2a1c3a,#1a1230)}
.c-info{flex:1;min-width:0}
.c-info h4{font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-info p{font-size:.72rem;color:var(--sub)}
.c-stat{font-size:.72rem;color:var(--sub);flex-shrink:0;font-weight:600}

/* ── FEATURED ARTIST ─────────────────────── */
.featured-artist{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2rem;align-items:center;
  background:linear-gradient(135deg,var(--accent) 0%,#c0183a 100%);
  border-radius:20px;padding:2rem 2.5rem;
  position:relative;overflow:hidden;
}
.featured-artist::before{
  content:'';position:absolute;right:-40px;top:-40px;
  width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.07);pointer-events:none;
}
.featured-artist::after{
  content:'';position:absolute;right:60px;bottom:-60px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.05);pointer-events:none;
}
.fa-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.2);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;padding:.3rem .8rem;
  border-radius:100px;margin-bottom:.9rem;
}
.fa-left h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:#fff;margin-bottom:.4rem;letter-spacing:-1px}
.fa-left p{color:rgba(255,255,255,.8);font-size:.88rem;line-height:1.65;margin-bottom:1.2rem;max-width:360px}
.fa-songs{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.4rem}
.fa-song{
  display:flex;align-items:center;gap:.7rem;
  background:rgba(255,255,255,.12);border-radius:10px;
  padding:.5rem .8rem;color:#fff;
  transition:background var(--dur);cursor:pointer;
}
.fa-song:hover{background:rgba(255,255,255,.22)}
.fa-song-ico{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.fa-song-info{flex:1;min-width:0}
.fa-song-info h5{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-song-info span{font-size:.7rem;opacity:.75}
.fa-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;color:var(--accent);
  border:none;padding:.65rem 1.4rem;border-radius:50px;
  font-size:.84rem;font-weight:800;cursor:pointer;
  transition:transform var(--dur),box-shadow var(--dur);
}
.fa-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.fa-right{
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
}
.fa-avatar{
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;
  border:3px solid rgba(255,255,255,.3);
  box-shadow:0 0 0 8px rgba(255,255,255,.08);
}

/* ── NEWS & EVENTS ───────────────────────── */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.news-card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:14px;overflow:hidden;cursor:pointer;
  transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur);
}
.news-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px var(--shadow);border-color:rgba(232,54,93,.25)}
.news-thumb{
  height:140px;background:linear-gradient(135deg,var(--accent),#c0183a);
  display:flex;align-items:center;justify-content:center;font-size:2.8rem;
  position:relative;
}
.news-cat{
  position:absolute;top:10px;left:10px;
  background:rgba(0,0,0,.45);color:#fff;
  font-size:.62rem;font-weight:800;padding:3px 8px;
  border-radius:5px;letter-spacing:.5px;text-transform:uppercase;
}
.news-body{padding:.9rem 1rem}
.news-body h4{font-size:.88rem;font-weight:700;line-height:1.4;margin-bottom:.4rem}
.news-body p{font-size:.76rem;color:var(--sub);line-height:1.5}
.news-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1rem .8rem;font-size:.7rem;color:var(--sub);
  border-top:1px solid var(--border);
}

/* ── AD BANNER ───────────────────────────── */
.ad-banner{
  background:var(--surface2);border:2px dashed var(--border);
  border-radius:14px;padding:1.5rem 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  transition:border-color var(--dur);
}
.ad-banner:hover{border-color:var(--accent)}
.ad-left{}
.ad-left .ad-tag{
  font-size:.65rem;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--accent);margin-bottom:.4rem;
}
.ad-left h3{font-size:1.1rem;font-weight:800;margin-bottom:.3rem}
.ad-left p{font-size:.82rem;color:var(--sub)}
.ad-btn{
  background:var(--accent);color:#fff;border:none;
  padding:.65rem 1.4rem;border-radius:10px;
  font-size:.84rem;font-weight:700;cursor:pointer;
  white-space:nowrap;flex-shrink:0;
  transition:opacity var(--dur),transform var(--dur);
}
.ad-btn:hover{opacity:.88;transform:translateY(-1px)}

/* ── NEWSLETTER ──────────────────────────── */
.newsletter{
  background:linear-gradient(135deg,#0d0d12 0%,#1a1230 100%);
  border-radius:20px;padding:2rem 2.5rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
  margin-bottom:0;
}
[data-theme="light"] .newsletter{
  background:linear-gradient(135deg,#1a0a20 0%,#2d1240 100%);
}
.nl-left{}
.nl-left .nl-tag{
  font-size:.68rem;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;
}
.nl-left h3{font-size:1.3rem;font-weight:800;color:#fff;margin-bottom:.3rem}
.nl-left p{font-size:.84rem;color:rgba(255,255,255,.6);max-width:360px}
.nl-form{display:flex;gap:.5rem;flex-wrap:wrap}
.nl-input{
  flex:1;min-width:220px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:10px;padding:.7rem 1.1rem;
  color:#fff;font-family:inherit;font-size:.88rem;outline:none;
  transition:border-color var(--dur);
}
.nl-input::placeholder{color:rgba(255,255,255,.4)}
.nl-input:focus{border-color:var(--accent)}
.nl-btn{
  background:var(--accent);color:#fff;border:none;
  padding:.7rem 1.6rem;border-radius:10px;
  font-size:.88rem;font-weight:700;cursor:pointer;
  white-space:nowrap;
  transition:opacity var(--dur),transform var(--dur);
  box-shadow:0 4px 14px rgba(232,54,93,.4);
}
.nl-btn:hover{opacity:.88;transform:translateY(-1px)}

/* ── GENRE TAGS ──────────────────────────── */
.genre-row{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem 0}
.genre-tag{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--surface);border:1.5px solid var(--border);
  color:var(--sub);font-size:.78rem;font-weight:700;
  padding:.4rem .9rem;border-radius:50px;cursor:pointer;
  text-decoration:none;
  transition:all var(--dur);white-space:nowrap;
}
.genre-tag:hover,.genre-tag.active{
  background:var(--accent);border-color:var(--accent);
  color:#fff;box-shadow:0 4px 12px rgba(232,54,93,.3);
}

/* ── SITE STATS ──────────────────────────── */
.stats-band{
  background:linear-gradient(135deg,var(--accent) 0%,#c0183a 100%);
  padding:2rem 0;margin:1rem 0;
}
.stats-band-inner{
  max-width:1160px;margin:0 auto;padding:0 1.25rem;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1rem;text-align:center;
}
.stat-item{}
.stat-num{
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:800;color:#fff;
  letter-spacing:-1px;line-height:1;
  margin-bottom:.3rem;
}
.stat-num span{color:rgba(255,255,255,.7);font-size:.6em}
.stat-label{font-size:.78rem;color:rgba(255,255,255,.75);font-weight:600;letter-spacing:.5px;text-transform:uppercase}

/* ── TRENDING ────────────────────────────── */
.trending-list{display:flex;flex-direction:column;gap:.4rem}
.trending-item{
  display:flex;align-items:center;gap:.85rem;
  padding:.7rem .9rem;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:12px;cursor:pointer;
  transition:border-color var(--dur),transform var(--dur);
  text-decoration:none;color:var(--text);
}
.trending-item:hover{border-color:var(--accent);transform:translateX(3px)}
.tr-rank{
  font-size:.7rem;font-weight:800;
  background:var(--accent-lo);color:var(--accent);
  width:26px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.tr-thumb{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#c8b4e8,#a990d4);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
[data-theme="dark"] .tr-thumb{background:linear-gradient(135deg,#2a1c3a,#1a1230)}
.tr-info{flex:1;min-width:0}
.tr-info h4{font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.15rem}
.tr-info p{font-size:.72rem;color:var(--sub)}
.tr-fire{font-size:1rem;flex-shrink:0}
.tr-stat{font-size:.72rem;color:var(--sub);flex-shrink:0;font-weight:600}

@media(max-width:580px){
  .stats-band-inner{grid-template-columns:repeat(2,1fr)}
  .stat-num{font-size:1.8rem}
}

/* ── LANGUAGE TOGGLE ─────────────────────── */
.lang-btn{
  display:flex;align-items:center;gap:.3rem;
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:8px;padding:.38rem .65rem;
  font-size:.75rem;font-weight:700;color:var(--sub);
  cursor:pointer;transition:all var(--dur);flex-shrink:0;
}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
.lang-btn .lang-flag{font-size:.9rem}
[data-lang="si"] .lang-en{display:none}
[data-lang="en"] .lang-si{display:none}

/* Bilingual text */
.si{display:inline}
.en{display:none}
[data-lang="en"] .si{display:none}
[data-lang="en"] .en{display:inline}

/* ── COOKIE BANNER ───────────────────────── */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);
  border-top:2px solid var(--accent);
  padding:1rem 1.5rem;
  display:none;
  align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  z-index:9999;
  box-shadow:0 -4px 24px rgba(0,0,0,.15);
}
.cookie-banner.show{display:flex}
@media(max-width:768px){
  .cookie-banner{bottom:70px;flex-direction:column;text-align:center;padding:.9rem 1.1rem}
}
.cookie-text{flex:1;min-width:200px}
.cookie-text p{font-size:.82rem;color:var(--sub);line-height:1.5}
.cookie-text a{color:var(--accent);text-decoration:underline}
.cookie-btns{display:flex;gap:.5rem;flex-shrink:0}
.cookie-accept{
  background:var(--accent);color:#fff;border:none;
  padding:.5rem 1.2rem;border-radius:8px;
  font-size:.8rem;font-weight:700;cursor:pointer;
  transition:opacity var(--dur);
}
.cookie-accept:hover{opacity:.88}
.cookie-decline{
  background:transparent;color:var(--sub);
  border:1.5px solid var(--border);
  padding:.5rem 1rem;border-radius:8px;
  font-size:.8rem;font-weight:600;cursor:pointer;
  transition:border-color var(--dur);
}
.cookie-decline:hover{border-color:var(--sub)}

/* ── SOCIAL LINKS ────────────────────────── */
.social-links-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.social-link-card{
  display:flex;align-items:center;gap:.75rem;
  padding:.9rem 1rem;border-radius:14px;
  text-decoration:none;color:#fff;
  transition:transform var(--dur),box-shadow var(--dur),opacity var(--dur);
}
.social-link-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:.92}
.social-link-card.fb{background:#1877f2}
.social-link-card.ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.social-link-card.yt{background:#ff0000}
.social-link-card.tw{background:#000}
.sl-icon{width:38px;height:38px;background:rgba(255,255,255,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sl-info{flex:1;min-width:0}
.sl-name{font-size:.84rem;font-weight:800;white-space:nowrap}
.sl-handle{font-size:.7rem;opacity:.8}
.sl-btn{
  background:rgba(255,255,255,.2);
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff;padding:.3rem .7rem;border-radius:6px;
  font-size:.72rem;font-weight:700;white-space:nowrap;flex-shrink:0;
}
@media(max-width:768px){.social-links-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.social-links-row{grid-template-columns:1fr}}

/* ── SCROLL TO TOP ───────────────────────── */
.scroll-top{
  position:fixed;bottom:90px;right:1.2rem;
  width:42px;height:42px;border-radius:50%;
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--sub);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:998;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s,background var(--dur),color var(--dur);
  transform:translateY(10px);
}
.scroll-top.show{opacity:1;pointer-events:all;transform:translateY(0)}
.scroll-top:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.scroll-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:769px){
  .scroll-top{bottom:1.5rem}
}

/* ── MOBILE BOTTOM NAV ───────────────────── */
.mob-bottom-nav{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  width:100%;
  background:var(--nav-bg);
  border-top:1.5px solid var(--border);
  padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom));
  z-index:999;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 -4px 20px rgba(0,0,0,.12);
}
.mob-bottom-nav ul{
  display:flex;justify-content:space-around;align-items:center;
  list-style:none;margin:0;padding:0 .25rem;
}
.mob-bottom-nav ul li{flex:1}
.mob-bottom-nav ul li a{
  display:flex;flex-direction:column;align-items:center;gap:.18rem;
  padding:.35rem .1rem;border-radius:10px;
  text-decoration:none;color:var(--sub);
  transition:color var(--dur);
  position:relative;
}
.mob-bottom-nav ul li a:hover,
.mob-bottom-nav ul li a.active{color:var(--accent)}
.mob-bottom-nav ul li a.active .mbn-label{color:var(--accent);font-weight:800}
.mob-bottom-nav ul li a.active::after{
  content:'';
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:2.5px;border-radius:0 0 3px 3px;
  background:var(--accent);
}
.mbn-icon{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
}
.mbn-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mbn-label{font-size:.6rem;font-weight:600;letter-spacing:.1px}

@media(max-width:768px){
  .mob-bottom-nav{display:block}
  body{padding-bottom:68px}
}
@media(max-width:400px){
  .mbn-icon svg{width:22px;height:22px}
  .mbn-label{font-size:.56rem}
}

/* ── FOOTER ──────────────────────────────── */
footer{
  background:var(--surface);
  border-top:3px solid var(--accent);
  margin-top:1rem;padding:2rem 0 0;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr 1fr 1fr;
  gap:2rem;padding-bottom:2.5rem;
}
.foot-brand{}
.foot-brand p{
  font-size:.82rem;color:var(--sub);line-height:1.7;
  margin-top:.7rem;max-width:240px;
}
.foot-logo img{height:30px;width:auto;object-fit:contain}
[data-theme="dark"] .foot-logo img{filter:brightness(0) invert(1)}
.socials{display:flex;gap:.5rem;margin-top:1.2rem}
.soc{
  width:34px;height:34px;border-radius:8px;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;color:var(--sub);
  transition:all var(--dur);
}
.soc:hover{border-color:var(--accent);color:#fff;background:var(--accent)}

.foot-col h5{
  font-size:.68rem;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--text);
  margin-bottom:1rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--accent);
  display:inline-block;
}
.foot-col a{
  display:block;font-size:.82rem;color:var(--sub);
  margin-bottom:.55rem;
  transition:color var(--dur),padding-left var(--dur);
}
.foot-col a:hover{color:var(--accent);padding-left:4px}
.foot-bottom{
  border-top:1px solid var(--border);
  padding:1.1rem 1.25rem;
  display:flex;justify-content:center;align-items:center;
  text-align:center;font-size:.76rem;color:var(--sub);
  gap:1rem;flex-wrap:wrap;
}

@media(max-width:960px){
  .featured-artist{grid-template-columns:1fr}
  .fa-right{display:none}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .ad-banner{flex-direction:column;text-align:center}
  .newsletter{flex-direction:column;text-align:center}
  .nl-form{justify-content:center}
}
@media(max-width:580px){
  .news-grid{grid-template-columns:1fr}
  .featured-artist{padding:1.5rem}
  .newsletter{padding:1.5rem}
  .nl-input{min-width:100%}
}

/* ── RESPONSIVE ──────────────────────────── */
@media(max-width:1060px){
  .nav-links > li > a{padding:.38rem .5rem;font-size:.74rem}
}
@media(max-width:960px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .hero-search-banner{padding:1.8rem 0 1.6rem}
  .hero-search-inner h1{font-size:1.8rem;letter-spacing:-.5px}
  .cat-row{grid-template-columns:repeat(4,1fr)}
  .song-grid{grid-template-columns:repeat(3,1fr)}
  .two-col{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
}
@media(max-width:580px){
  /* NAV */
  .btn-up{display:none}
  .nav-right{gap:.3rem}
  .nav-inner{padding:.55rem .9rem;gap:.4rem}
  .nav-logo img{height:28px}

  /* HERO */
  .hero-search-banner{padding:1.4rem 0 1.2rem}
  .hero-search-inner{gap:.7rem}
  .hero-search-inner h1{font-size:1.5rem;letter-spacing:-.3px}
  .hero-search-inner .hero-desc{display:none}
  .hero-search-wrap input{font-size:.85rem;padding:.72rem 3rem .72rem 1rem}
  .hero-search-btns{gap:.5rem;flex-wrap:wrap;justify-content:center}
  .hero-search-btns .btn-primary,.hero-search-btns .btn-ghost{padding:.62rem 1.2rem;font-size:.84rem}

  /* SECTIONS */
  .sec{padding:1.2rem 0}
  .sec-head{margin-bottom:.8rem}
  .sec-title{font-size:1.05rem}
  .tab-btns{gap:.3rem}
  .tab-btn{font-size:.72rem;padding:.38rem .75rem}

  /* CAT GRID */
  .cat-row{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .cat-card{padding:.75rem .85rem;gap:.65rem;border-radius:12px}
  .cat-icon-wrap{width:38px;height:38px;min-width:38px;font-size:1.15rem;border-radius:9px}
  .cat-label{font-size:.78rem;font-weight:700}
  .cat-count{font-size:.66rem}

  /* SONGS */
  .song-grid{grid-template-columns:repeat(2,1fr)}
  .chart-row{padding:.55rem .7rem;gap:.55rem}
  .c-num{font-size:.9rem;min-width:20px}
  .c-thumb{width:36px;height:36px;font-size:.9rem;border-radius:8px}
  .c-info h4{font-size:.78rem}
  .c-info p{font-size:.66rem}
  .c-stat{font-size:.65rem}
  .c-badge-new{font-size:.55rem;padding:2px 5px}

  /* NEWS */
  .news-grid{grid-template-columns:1fr}
  .news-thumb{height:110px}
  .news-body{padding:.75rem .85rem}
  .news-body h4{font-size:.82rem}
  .news-body p{font-size:.72rem}
  .news-meta{padding:.5rem .8rem .65rem;font-size:.65rem}

  /* OTHER */
  .ad-banner{flex-direction:column;text-align:center;padding:1.1rem 1.2rem;gap:1rem}
  .ad-left h3{font-size:.95rem}
  .ad-left p{font-size:.76rem}
  .featured-artist{padding:1.2rem;gap:1rem}
  .newsletter{padding:1.2rem;gap:1rem;border-radius:14px}
  .nl-left h3{font-size:1rem}
  .nl-left p{font-size:.76rem}
  .nl-form{flex-direction:column;width:100%}
  .nl-input{min-width:100%;font-size:.84rem;padding:.65rem .9rem}
  .nl-btn{width:100%;font-size:.84rem;padding:.65rem}

  /* FOOTER */
  .foot-grid{grid-template-columns:repeat(2,1fr);padding-bottom:1.2rem}
  footer{margin-top:.5rem;padding:1.2rem 0 0}
  .foot-bottom{padding:.8rem 1rem}
}

@media(max-width:400px){
  .wrap{padding:0 .75rem}
  .nav-inner{padding:.5rem .75rem;gap:.3rem}
  .nav-logo img{height:26px}
  .hero-search-inner h1{font-size:1.25rem}
  .hero-search-wrap input{font-size:.8rem;padding:.65rem 2.6rem .65rem .9rem}
  .hero-search-btn{width:34px;height:34px;font-size:.85rem}
  .cat-row{gap:.4rem}
  .cat-card{padding:.65rem .7rem;gap:.5rem}
  .cat-icon-wrap{width:34px;height:34px;min-width:34px;font-size:1rem}
  .cat-label{font-size:.72rem}
  .song-grid{grid-template-columns:1fr;gap:.45rem}
  .song-card{padding:.65rem;display:flex;align-items:center;gap:.85rem}
  .thumb{width:52px;height:52px;min-width:52px;aspect-ratio:unset;margin-bottom:0;border-radius:9px;font-size:1.2rem}
  .song-card .badge{top:3px;right:3px;font-size:.52rem;padding:2px 5px}
  .s-name{font-size:.8rem}
  .s-artist{font-size:.7rem}
  .s-stats{margin-top:.25rem;font-size:.65rem}
  .chart-row{padding:.48rem .55rem;gap:.45rem}
  .c-num{font-size:.85rem;min-width:18px}
  .c-thumb{width:32px;height:32px;font-size:.8rem}
  .c-info h4{font-size:.74rem}
  .c-info p{font-size:.62rem}
  .c-stat{font-size:.62rem}
  .foot-grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .foot-col h5{font-size:.6rem}
  .foot-col a{font-size:.72rem;margin-bottom:.35rem}
  .foot-bottom{font-size:.65rem;padding:.75rem}
  .sec-title{font-size:.9rem}
  .ticker-track span{font-size:.6rem;padding:0 .7rem}
  .hf-badge{display:none}
  .ad-banner{padding:.9rem 1rem}
  .nl-left h3{font-size:.95rem}
  .newsletter{padding:1.1rem}
}
/* Audio listing — requires body.pg-audio-list (see page-scopes.css) */
/* Design: public_html/Design/audio.php */
/* ── HERO BAND ───────────────────── */
.audio-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2rem 0 1.8rem;position:relative;overflow:hidden}
.audio-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.audio-hero::after{content:'';position:absolute;left:20%;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.hero-inner{position:relative;z-index:1}
.hero-text h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:.3rem}
.hero-text p{font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:.9rem}
.hero-text .h-meta{display:flex;gap:.6rem;flex-wrap:wrap}
.h-stat{background:rgba(255,255,255,.15);color:#fff;font-size:.74rem;font-weight:700;padding:.28rem .75rem;border-radius:50px}

/* ── PAGE SEARCH BAR ─────────────── */
.page-search{
  position:relative;
  display:flex;align-items:center;
}
.page-search input{
  width:100%;
  padding:.75rem 2.8rem .75rem 2.6rem;
  border-radius:50px;
  border:2px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-family:inherit;font-size:.9rem;
  outline:none;
  transition:border-color var(--dur),box-shadow var(--dur);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.page-search input:focus{border-color:var(--accent);box-shadow:0 4px 20px rgba(232,54,93,.12)}
.page-search input::placeholder{color:var(--sub)}
.ps-ico{
  position:absolute;left:.9rem;
  width:16px;height:16px;
  stroke:var(--sub);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;flex-shrink:0;
}
.ps-clear{
  position:absolute;right:.9rem;
  color:var(--sub);font-size:.8rem;font-weight:700;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur);
}
.ps-clear:hover{color:var(--accent);border-color:var(--accent)}

/* ── SONG OF THE DAY ─────────────── */
.sotd{
  display:flex;align-items:center;gap:1.2rem;
  background:linear-gradient(135deg,var(--accent) 0%,#9b0c30 100%);
  border-radius:14px;padding:1.1rem 1.3rem;
  margin:.8rem 0;position:relative;overflow:hidden;
  text-decoration:none;
}
.sotd::before{content:'';position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.sotd-badge{font-size:.62rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:.2rem}
.sotd-thumb{width:52px;height:52px;border-radius:11px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.sotd-info{flex:1;min-width:0}
.sotd-info h3{font-size:1rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.15rem}
.sotd-info p{font-size:.76rem;color:rgba(255,255,255,.75)}
.sotd-btn{background:rgba(255,255,255,.2);color:#fff;border:1.5px solid rgba(255,255,255,.3);padding:.4rem .9rem;border-radius:7px;font-size:.74rem;font-weight:700;white-space:nowrap;flex-shrink:0;transition:background var(--dur)}
.sotd:hover .sotd-btn{background:rgba(255,255,255,.3)}

/* ── GENRE DESCRIPTION ───────────── */
.genre-desc{
  background:var(--surface);border:1.5px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;
  padding:.75rem 1rem;margin-bottom:.8rem;
  font-size:.82rem;color:var(--sub);line-height:1.65;
}
.genre-desc strong{color:var(--text)}

/* ── POPULAR ARTISTS ─────────────── */
.artists-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.artist-chip{
  display:flex;align-items:center;gap:.4rem;
  background:var(--surface);border:1.5px solid var(--border);
  padding:.3rem .75rem .3rem .5rem;border-radius:50px;
  font-size:.74rem;font-weight:700;color:var(--sub);
  text-decoration:none;transition:all var(--dur);
}
.artist-chip:hover{border-color:var(--accent);color:var(--accent)}
.artist-chip .ac-avatar{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ff6b35);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#fff;font-weight:800;flex-shrink:0}

/* ── AD SPACES ───────────────────── */
.ad-slot{
  width:100%;border-radius:12px;
  border:1.5px dashed var(--border);
  background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem 1.2rem;
  margin:.8rem 0;
  transition:border-color var(--dur);
  text-decoration:none;
  overflow:hidden;position:relative;
}
.ad-slot:hover{border-color:var(--accent)}
.ad-slot::before{
  content:'AD';
  position:absolute;top:6px;left:8px;
  font-size:.55rem;font-weight:800;letter-spacing:1.5px;
  color:var(--sub);opacity:.5;
}
.ad-slot-left{display:flex;align-items:center;gap:.9rem}
.ad-slot-img{
  width:60px;height:60px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#ff6b35);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
}
.ad-slot-text h4{font-size:.88rem;font-weight:700;margin-bottom:.2rem}
.ad-slot-text p{font-size:.74rem;color:var(--sub)}
.ad-slot-btn{
  background:var(--accent);color:#fff;border:none;
  padding:.4rem 1rem;border-radius:7px;
  font-size:.76rem;font-weight:700;cursor:pointer;
  white-space:nowrap;flex-shrink:0;
  transition:opacity var(--dur);
}
.ad-slot-btn:hover{opacity:.88}

/* Banner ad (leaderboard) */
.ad-banner-slot{
  width:100%;min-height:90px;border-radius:12px;
  border:1.5px dashed var(--border);
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  margin:.8rem 0;position:relative;overflow:hidden;
  cursor:pointer;transition:border-color var(--dur);
}
.ad-banner-slot:hover{border-color:var(--accent)}
.ad-banner-slot .ad-label{
  font-size:.7rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--sub);opacity:.6;
}
.ad-banner-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:.9rem 1.4rem;gap:1rem;
  background:linear-gradient(135deg,var(--accent) 0%,#c0183a 100%);
  position:relative;overflow:hidden;
}
.ad-banner-inner::after{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.07)}
.ad-banner-inner h4{font-size:.95rem;font-weight:800;color:#fff;margin-bottom:.2rem}
.ad-banner-inner p{font-size:.76rem;color:rgba(255,255,255,.8)}
.ad-banner-btn{background:#fff;color:var(--accent);border:none;padding:.4rem 1rem;border-radius:7px;font-size:.76rem;font-weight:800;cursor:pointer;flex-shrink:0;white-space:nowrap}
.rx-bottom-promo{border:none!important;background:transparent!important;min-height:0;padding:0;margin-top:1rem;margin-bottom:.5rem}
.rx-bottom-promo .ad-banner-inner{width:100%;border-radius:12px}
.rx-bottom-promo .ad-banner-inner::before{content:'AD';position:absolute;top:6px;right:10px;font-size:.52rem;font-weight:800;letter-spacing:1px;color:rgba(255,255,255,.5);z-index:2}

@media(max-width:580px){
  .ad-slot-img{display:none}
  .ad-banner-inner h4{font-size:.84rem}
  .ad-banner-inner p{display:none}
}

/* ── BREADCRUMB ──────────────────── */
.breadcrumb{display:flex;align-items:center;gap:.4rem;padding:.9rem 0 .3rem;font-size:.76rem;color:var(--sub)}
.breadcrumb a{color:var(--sub);transition:color var(--dur)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{opacity:.4}

/* ── FILTERS ─────────────────────── */
.filters-bar{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:14px;padding:1rem 1.2rem;
  margin:1rem 0;display:flex;flex-direction:column;gap:.8rem;
}
.filter-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.filter-label{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);flex-shrink:0;min-width:44px}
.pills{display:flex;gap:.3rem;flex-wrap:wrap}
.pill{
  background:transparent;border:1.5px solid var(--border);
  color:var(--sub);padding:.3rem .75rem;border-radius:50px;
  font-size:.74rem;font-weight:700;cursor:pointer;
  font-family:inherit;white-space:nowrap;
  text-decoration:none;display:inline-block;
  transition:all var(--dur);
}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 10px rgba(232,54,93,.28)}
.divider{height:1px;background:var(--border)}

/* ── RESULTS HEADER ──────────────── */
.results-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0 .8rem;gap:1rem;flex-wrap:wrap}
.rh-left{font-size:.82rem;color:var(--sub)}
.rh-left strong{color:var(--text)}

/* ── SONG LIST ───────────────────── */
.song-list{display:flex;flex-direction:column;gap:.35rem}
.song-card{
  display:flex;align-items:center;gap:.9rem;
  padding:.8rem 1rem;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:12px;
  transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);
  position:relative;
}
.song-card:hover{border-color:rgba(232,54,93,.25);box-shadow:0 4px 20px var(--shadow);background:var(--surface2)}

/* Number */
.sc-num{font-size:.75rem;font-weight:800;color:var(--sub);min-width:22px;text-align:center;flex-shrink:0}

/* Thumb */
.sc-thumb{
  width:46px;height:46px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#c8b4e8,#9e80c8);
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;position:relative;overflow:hidden;cursor:pointer;
}
[data-theme="dark"] .sc-thumb{background:linear-gradient(135deg,#2a1c3a,#1c1028)}
.sc-thumb .sc-play{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--dur);border-radius:10px;
}
.sc-thumb .sc-play svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.song-card:hover .sc-play{opacity:1}

/* Info */
.sc-info{flex:1;min-width:0}
.sc-title{font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.15rem;display:flex;align-items:center;gap:.45rem}
.sc-artist{font-size:.74rem;color:var(--sub)}
.sc-new{background:var(--accent);color:#fff;font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:4px;letter-spacing:.4px;flex-shrink:0}

/* Tags */
.sc-tags{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.sc-genre{font-size:.66rem;font-weight:700;background:var(--surface2);color:var(--sub);padding:2px 8px;border-radius:5px;border:1px solid var(--border)}
.sc-dur{font-size:.72rem;color:var(--sub);min-width:34px;text-align:right}
.sc-dl{font-size:.72rem;color:var(--sub);display:flex;align-items:center;gap:.2rem;min-width:50px;justify-content:flex-end}
.sc-dl svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Download btn */
.sc-dl-btn{
  display:flex;align-items:center;gap:.3rem;
  background:var(--accent);color:#fff;border:none;
  padding:.42rem .9rem;border-radius:8px;
  font-size:.75rem;font-weight:700;flex-shrink:0;
  transition:opacity var(--dur),transform var(--dur);
  white-space:nowrap;
}
.sc-dl-btn:hover{opacity:.88;transform:translateY(-1px)}
.sc-dl-btn svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ── EMPTY ───────────────────────── */
.empty{text-align:center;padding:3rem 1rem;color:var(--sub)}
.empty .e-icon{font-size:2.5rem;margin-bottom:.8rem}
.empty h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.4rem}

/* ── PAGINATION ──────────────────── */
.pagination{display:flex;justify-content:center;align-items:center;gap:.35rem;padding:1.8rem 0 1rem}
.pg{width:34px;height:34px;border-radius:8px;background:var(--surface);border:1.5px solid var(--border);color:var(--sub);font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:all var(--dur)}
.pg:hover{border-color:var(--accent);color:var(--accent)}
.pg.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 10px rgba(232,54,93,.3)}
.pg.off{opacity:.3;pointer-events:none}
.pg-sep{color:var(--sub);font-size:.8rem;padding:0 .1rem}

/* ── MOBILE BOTTOM NAV ───────────── */
.mob-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--nav-bg);border-top:1px solid var(--border);padding:.45rem 0 calc(.45rem + env(safe-area-inset-bottom));z-index:999;backdrop-filter:blur(18px)}
.mob-bottom-nav ul{display:flex;justify-content:space-around;list-style:none;padding:0 .5rem}
.mob-bottom-nav ul li{flex:1}
.mob-bottom-nav ul li a{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.3rem .15rem;color:var(--sub);text-decoration:none;transition:color var(--dur);position:relative}
.mob-bottom-nav ul li a.active,.mob-bottom-nav ul li a:hover{color:var(--accent)}
.mob-bottom-nav ul li a.active::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent)}
.mbn-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.mbn-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mbn-label{font-size:.56rem;font-weight:600}

/* ── RESPONSIVE ──────────────────── */
@media(max-width:960px){
  .nav-links{display:none}.hamburger{display:flex}
  .sc-dur,.sc-genre{display:none}
}
@media(max-width:768px){.mob-bottom-nav{display:block}body{padding-bottom:72px}}
@media(max-width:580px){
  .btn-up{display:none}
  .audio-hero{padding:1.4rem 0 1.3rem}
  .hero-text h1{font-size:1.4rem}
  .sc-dl{display:none}
  .sc-dl-btn span{display:none}
  .sc-dl-btn{padding:.42rem .6rem}
  .song-card{padding:.65rem .75rem;gap:.65rem}
  .sc-thumb{width:40px;height:40px}
  .sc-title{font-size:.82rem}
}
@media(max-width:400px){
  .wrap{padding:0 .75rem}
  .nav-inner{padding:.55rem .75rem}
  .filters-bar{padding:.8rem .9rem}
}

/* ── FOOTER ──────────────────────── */
footer{background:var(--surface);border-top:3px solid var(--accent);margin-top:3rem;padding:2.5rem 0 0}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.5rem;width:100%}
.foot-brand p{font-size:.82rem;color:var(--sub);line-height:1.7;margin-top:.7rem;max-width:240px}
.foot-logo{display:flex;align-items:center}
.foot-logo img{height:30px;width:auto;object-fit:contain}
[data-theme="dark"] .foot-logo img{filter:brightness(0) invert(1)}
.foot-socials{display:flex;gap:.5rem;margin-top:1rem}
.foot-soc{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--sub);transition:all var(--dur);text-decoration:none}
.foot-soc:hover{border-color:var(--accent);color:#fff;background:var(--accent)}
.foot-soc svg{width:14px;height:14px}
.foot-col h5{font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent);display:inline-block}
.foot-col a{display:block;font-size:.82rem;color:var(--sub);margin-bottom:.55rem;transition:color var(--dur),padding-left var(--dur)}
.foot-col a:hover{color:var(--accent);padding-left:4px}
.foot-bottom{border-top:1px solid var(--border);padding:1rem 1.25rem;text-align:center;font-size:.76rem;color:var(--sub)}
@media(max-width:960px){.foot-grid{grid-template-columns:repeat(3,1fr)!important;gap:1.5rem!important}}
@media(max-width:768px){.foot-grid{grid-template-columns:repeat(2,1fr)!important;gap:1.2rem!important;padding-bottom:1.5rem}}
@media(max-width:580px){.foot-grid{grid-template-columns:1fr 1fr!important;gap:.8rem!important}.foot-brand{grid-column:1/-1!important}.foot-brand p{max-width:100%}}

/* SCROLL TO TOP */
.scroll-top{position:fixed;bottom:90px;right:1.2rem;width:42px;height:42px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border);color:var(--sub);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9990;box-shadow:0 4px 16px rgba(0,0,0,.12);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:translateY(10px)}
.scroll-top.show{opacity:1;pointer-events:all;transform:translateY(0)}
.scroll-top:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.scroll-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:769px){.scroll-top{bottom:1.5rem}}

/* ── BREADCRUMB ──────────────────── */
.breadcrumb{display:flex;align-items:center;gap:.4rem;padding:.9rem 0 .5rem;font-size:.76rem;color:var(--sub);flex-wrap:wrap}
.breadcrumb a{color:var(--sub);transition:color var(--dur)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{opacity:.4}

/* Audio detail — requires body.pg-audio-detail (see page-scopes.css) */
/* Design: public_html/Design/song.php */
/* ── SONG HERO ───────────────────── */
.song-hero{
  display:grid;grid-template-columns:280px 1fr;
  gap:2.5rem;align-items:start;
  padding:1.5rem 0 2rem;
}
.song-cover{
  width:100%;aspect-ratio:1;border-radius:20px;
  background:linear-gradient(135deg,#c8b4e8,#9060c0);
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  position:relative;overflow:hidden;flex-shrink:0;
}
[data-theme="dark"] .song-cover{background:linear-gradient(135deg,#2a1c3a,#1c1028)}
.song-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,54,93,.15),transparent)}
.sh-genre-badge{
  position:absolute;top:12px;right:12px;
  background:rgba(0,0,0,.5);color:#fff;
  font-size:.65rem;font-weight:800;padding:3px 9px;
  border-radius:6px;letter-spacing:.5px;backdrop-filter:blur(8px);
}
.sh-new{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-size:.62rem;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:.4px}

.song-hero .song-details{
  background:transparent;border:none;border-radius:0;
  margin:0;padding:0;overflow:visible;
}
.song-hero .song-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  position:relative;z-index:1;border-radius:20px;
}
.sd-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:.5rem}
.sd-title{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;letter-spacing:-.8px;line-height:1.1;margin-bottom:.4rem}
.sd-artist{font-size:1rem;color:var(--sub);margin-bottom:1.2rem}
.sd-artist a{color:var(--accent);font-weight:700}
.sd-artist a:hover{text-decoration:underline}

/* Stats row */
.sd-stats{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.sd-stat{display:flex;flex-direction:column;gap:.15rem}
.sd-stat .sv{font-size:1.1rem;font-weight:800;color:var(--text);letter-spacing:-.3px}
.sd-stat .sk{font-size:.65rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub)}

/* Meta chips */
.sd-meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.5rem}
.meta-chip{display:flex;align-items:center;gap:.3rem;background:var(--surface2);border:1px solid var(--border);padding:.3rem .75rem;border-radius:6px;font-size:.74rem;font-weight:600;color:var(--sub)}
.meta-chip svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}

/* Action buttons */
.sd-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.8rem}
.btn-dl-main{
  display:flex;align-items:center;gap:.5rem;
  background:var(--accent);color:#fff;border:none;
  padding:.8rem 1.8rem;border-radius:10px;
  font-size:.9rem;font-weight:800;
  box-shadow:0 6px 20px rgba(232,54,93,.35);
  transition:transform var(--dur),box-shadow var(--dur),opacity var(--dur);
}
.btn-dl-main:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(232,54,93,.45)}
.btn-dl-main svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.btn-secondary{
  display:flex;align-items:center;gap:.4rem;
  background:var(--surface);border:1.5px solid var(--border);
  color:var(--sub);padding:.8rem 1.2rem;border-radius:10px;
  font-size:.84rem;font-weight:700;
  transition:border-color var(--dur),color var(--dur);
}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-secondary svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-like{background:var(--surface);border:1.5px solid var(--border);color:var(--sub);padding:.8rem 1rem;border-radius:10px;font-size:.84rem;font-weight:700;display:flex;align-items:center;gap:.35rem;transition:all var(--dur)}
.btn-like.liked{background:var(--accent-lo);border-color:var(--accent);color:var(--accent)}
.btn-like:hover{border-color:var(--accent);color:var(--accent)}

/* Description */
.sd-desc{font-size:.84rem;color:var(--sub);line-height:1.7;max-width:500px}

/* ── CONTENT GRID ────────────────── */
.content-grid{display:grid;grid-template-columns:1fr 320px;gap:2rem;margin-top:1.5rem}

/* ── SONG INFO TABS ──────────────── */
.info-tabs{}
.tab-nav{display:flex;gap:.3rem;border-bottom:2px solid var(--border);margin-bottom:1.2rem}
.tab-nav button{background:none;border:none;padding:.6rem 1rem;font-size:.82rem;font-weight:700;color:var(--sub);position:relative;transition:color var(--dur);border-bottom:2px solid transparent;margin-bottom:-2px}
.tab-nav button:hover{color:var(--text)}
.tab-nav button.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-content{display:none}
.tab-content.active{display:block}

/* Details table */
.details-table{width:100%;border-collapse:collapse}
.details-table tr{border-bottom:1px solid var(--border);display:flex;align-items:center}
.details-table tr:last-child{border-bottom:none}
.details-table td{padding:.5rem .5rem;font-size:.82rem}
.details-table td:first-child{color:var(--sub);font-weight:700;width:120px;min-width:120px;font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0}
.details-table td:last-child{color:var(--text);font-weight:600;flex:1}

/* Lyrics preview */
.lyrics-box{
  background:var(--surface2);border-radius:12px;padding:1.2rem;
  font-size:.88rem;line-height:1.9;color:var(--text);
  white-space:pre-line;position:relative;
}
.lyrics-blur{
  position:absolute;bottom:0;left:0;right:0;height:80px;
  background:linear-gradient(transparent,var(--surface2));
  border-radius:0 0 12px 12px;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:1rem;
}
.lyrics-link{background:var(--accent);color:#fff;padding:.4rem 1rem;border-radius:7px;font-size:.76rem;font-weight:700;text-decoration:none}

/* Download options */
.download-options{display:flex;flex-direction:column;gap:.5rem}
.dl-option{
  display:flex;align-items:center;gap:.9rem;
  padding:.8rem 1rem;background:var(--surface2);
  border:1.5px solid var(--border);border-radius:10px;cursor:pointer;
  transition:border-color var(--dur),background var(--dur);text-decoration:none;
}
.dl-option:hover{border-color:var(--accent);background:var(--accent-lo)}
.dl-option-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.dl-option-info{flex:1;min-width:0}
.dl-option-info h4{font-size:.84rem;font-weight:700;margin-bottom:.1rem}
.dl-option-info p{font-size:.72rem;color:var(--sub)}
.dl-option-size{font-size:.72rem;color:var(--sub);flex-shrink:0;font-weight:600}
.dl-arrow{color:var(--sub);flex-shrink:0}
.dl-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Share buttons */
.share-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.share-btn{display:flex;align-items:center;gap:.35rem;padding:.4rem .85rem;border-radius:7px;font-size:.74rem;font-weight:700;color:#fff;border:none;cursor:pointer;transition:opacity var(--dur)}
.share-btn:hover{opacity:.88}
.share-btn.fb{background:#1877f2}
.share-btn.wa{background:#25d366}
.share-btn.tw{background:#000}
.share-btn.cp{background:var(--surface2);color:var(--sub);border:1.5px solid var(--border)}
.share-btn.cp:hover{border-color:var(--accent);color:var(--accent)}

/* ── SIDEBAR ─────────────────────── */
.sidebar{}
.sidebar-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1rem}
.sidebar-card-head{padding:.8rem 1rem;border-bottom:1px solid var(--border);font-size:.75rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub)}
.sidebar-card-body{padding:.75rem}

/* Related songs */
.related-song{display:flex;align-items:center;gap:.7rem;padding:.55rem .5rem;border-radius:9px;cursor:pointer;transition:background var(--dur);text-decoration:none;color:var(--text)}
.related-song:hover{background:var(--surface2)}
.rs-thumb{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#c8b4e8,#9060c0);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
[data-theme="dark"] .rs-thumb{background:linear-gradient(135deg,#2a1c3a,#1c1028)}
.rs-info{flex:1;min-width:0}
.rs-info h4{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.1rem}
.rs-info p{font-size:.7rem;color:var(--sub)}
.rs-dl{font-size:.68rem;color:var(--sub);flex-shrink:0}

/* Ad sidebar */
.ad-sidebar{background:linear-gradient(135deg,var(--accent),#c0183a);border-radius:14px;padding:1.2rem;text-align:center;margin-bottom:1rem;cursor:pointer;text-decoration:none;display:block;transition:opacity var(--dur)}
.ad-sidebar:hover{opacity:.92}
.ad-sidebar h4{font-size:.9rem;font-weight:800;color:#fff;margin-bottom:.3rem}
.ad-sidebar p{font-size:.74rem;color:rgba(255,255,255,.8);margin-bottom:.8rem}
.ad-sidebar button{background:#fff;color:var(--accent);border:none;padding:.4rem 1rem;border-radius:7px;font-size:.76rem;font-weight:800}
.ad-sidebar-learn{background:linear-gradient(135deg,#7c3aed,#5b21b6)!important}
.ad-sidebar-learn button{color:#5b21b6}

.song-player-bar{margin-top:1rem;width:100%}
.song-player-bar audio{width:100%;height:42px;border-radius:10px}
.btn-secondary.is-playing{border-color:var(--accent);color:var(--accent);background:var(--accent-lo)}

.details-more-ad{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem;padding:.85rem 1rem;background:var(--accent-lo);border:1.5px solid rgba(232,54,93,.2);border-radius:10px;text-decoration:none;position:relative;transition:border-color var(--dur)}
.details-more-ad:hover{border-color:var(--accent)}
.details-more-ad-ico{font-size:1.4rem;flex-shrink:0}
.details-more-ad-text{flex:1;min-width:0}
.details-more-ad-title{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:.15rem}
.details-more-ad-sub{font-size:.72rem;color:var(--sub)}
.details-more-ad-link{font-size:.72rem;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0}

/* ── FOOTER ──────────────────────── */
footer{background:var(--surface);border-top:3px solid var(--accent);margin-top:3rem;padding:2.5rem 0 0}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.5rem;width:100%}
.foot-brand p{font-size:.82rem;color:var(--sub);line-height:1.7;margin-top:.7rem;max-width:240px}
.foot-logo{display:flex;align-items:center}
.foot-logo img{height:30px;width:auto;object-fit:contain}
[data-theme="dark"] .foot-logo img{filter:brightness(0) invert(1)}
.foot-socials{display:flex;gap:.5rem;margin-top:1rem}
.foot-soc{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--sub);transition:all var(--dur);text-decoration:none}
.foot-soc:hover{border-color:var(--accent);color:#fff;background:var(--accent)}
.foot-soc svg{width:14px;height:14px}
.foot-col h5{font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent);display:inline-block}
.foot-col a{display:block;font-size:.82rem;color:var(--sub);margin-bottom:.55rem;transition:color var(--dur),padding-left var(--dur)}
.foot-col a:hover{color:var(--accent);padding-left:4px}
.foot-bottom{border-top:1px solid var(--border);padding:1rem 1.25rem;text-align:center;font-size:.76rem;color:var(--sub)}
@media(max-width:960px){.foot-grid{grid-template-columns:repeat(3,1fr)!important;gap:1.5rem!important}}
@media(max-width:768px){.foot-grid{grid-template-columns:repeat(2,1fr)!important;gap:1.2rem!important;padding-bottom:1.5rem}}
@media(max-width:580px){.foot-grid{grid-template-columns:1fr 1fr!important;gap:.8rem!important}.foot-brand{grid-column:1/-1!important}.foot-brand p{max-width:100%}}
@media(max-width:400px){.foot-grid{grid-template-columns:1fr 1fr!important}}

/* ── MOBILE BOTTOM NAV ───────────── */
.mob-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--nav-bg);border-top:1px solid var(--border);padding:.45rem 0 calc(.45rem + env(safe-area-inset-bottom));z-index:999;backdrop-filter:blur(18px)}
.mob-bottom-nav ul{display:flex;justify-content:space-around;list-style:none;padding:0 .5rem}
.mob-bottom-nav ul li{flex:1}
.mob-bottom-nav ul li a{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.3rem .15rem;color:var(--sub);text-decoration:none;transition:color var(--dur);position:relative}
.mob-bottom-nav ul li a.active,.mob-bottom-nav ul li a:hover{color:var(--accent)}
.mob-bottom-nav ul li a.active::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent)}
.mbn-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.mbn-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mbn-label{font-size:.56rem;font-weight:600}

/* ── RESPONSIVE ──────────────────── */
@media(max-width:960px){
  .nav-links{display:none}.hamburger{display:flex}
  .content-grid{grid-template-columns:1fr}
  .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .ad-sidebar{grid-column:1/-1}
}
@media(max-width:768px){
  .mob-bottom-nav{display:block}
  body{padding-bottom:72px}
  .song-hero{grid-template-columns:1fr;gap:1.2rem;padding:1rem 0 1.5rem}
  .song-cover{width:180px;margin:0 auto;font-size:3.5rem}
  .song-details{text-align:center}
  .sd-stats{justify-content:center}
  .sd-meta{justify-content:center}
  .sd-actions{justify-content:center}
  .sd-desc{margin:0 auto}
}
@media(max-width:580px){
  .btn-up{display:none}
  .sd-title{font-size:1.5rem}
  .song-cover{width:140px;font-size:2.8rem}
  .btn-dl-main{padding:.65rem 1.2rem;font-size:.82rem}
  .sidebar{grid-template-columns:1fr}
  .tab-nav button{padding:.5rem .7rem;font-size:.76rem}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:400px){
  .wrap{padding:0 .75rem}
  .nav-inner{padding:.55rem .75rem}
  .sd-actions{flex-wrap:wrap}
  .foot-grid{grid-template-columns:1fr}
}
/* ── FOOTER ──────────────────────── */
footer{background:var(--surface);border-top:3px solid var(--accent);margin-top:3rem;padding:2.5rem 0 0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;gap:1.5rem;padding-bottom:2.5rem}
.foot-brand p{font-size:.82rem;color:var(--sub);line-height:1.7;margin-top:.7rem;max-width:240px}
.foot-logo-img{height:28px;width:auto;object-fit:contain}
[data-theme="dark"] .foot-logo-img{filter:brightness(0) invert(1)}
.foot-socials{display:flex;gap:.5rem;margin-top:1rem}
.foot-soc{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--sub);transition:all var(--dur);text-decoration:none}
.foot-soc:hover{border-color:var(--accent);color:#fff;background:var(--accent)}
.foot-soc svg{width:14px;height:14px;fill:currentColor}
.foot-col h5{font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent);display:inline-block}
.foot-col a{display:block;font-size:.82rem;color:var(--sub);margin-bottom:.55rem;transition:color var(--dur),padding-left var(--dur)}
.foot-col a:hover{color:var(--accent);padding-left:4px}
.foot-bottom{border-top:1px solid var(--border);padding:1rem 1.25rem;text-align:center;font-size:.76rem;color:var(--sub)}
@media(max-width:960px){.foot-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
@media(max-width:580px){.foot-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.foot-brand{grid-column:1/-1}}
@media(max-width:400px){.foot-grid{grid-template-columns:1fr}}

/* SCROLL TO TOP */
.scroll-top{position:fixed;bottom:90px;right:1.2rem;width:42px;height:42px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border);color:var(--sub);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9990;box-shadow:0 4px 16px rgba(0,0,0,.12);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:translateY(10px)}
.scroll-top.show{opacity:1;pointer-events:all;transform:translateY(0)}
.scroll-top:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.scroll-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:769px){.scroll-top{bottom:1.5rem}}

/* CONTACT */
.contact-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2.5rem 0 2.2rem;position:relative;overflow:hidden;text-align:center}
.contact-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.contact-hero::after{content:'';position:absolute;left:10%;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.contact-hero .ch-inner{position:relative;z-index:1}
.contact-hero .ch-inner h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:#fff;letter-spacing:-.8px;margin-bottom:.4rem}
.contact-hero .ch-inner p{font-size:.9rem;color:rgba(255,255,255,.8);max-width:500px;margin:0 auto .9rem}
.contact-main{padding-bottom:2rem}
.contact-types{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.5rem 0}
.ct-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1.2rem 1rem;text-align:center;cursor:pointer;transition:all var(--dur);text-decoration:none;color:var(--text);display:block}
.ct-card:hover,.ct-card.active{border-color:var(--accent);background:var(--accent-lo)}
.ct-card.active .ct-icon{background:var(--accent);color:#fff}
.ct-icon{width:48px;height:48px;border-radius:12px;background:var(--surface2);display:flex;align-items:center;justify-content:center;margin:0 auto .7rem;font-size:1.3rem;transition:all var(--dur)}
.ct-label{font-size:.82rem;font-weight:700;margin-bottom:.2rem}
.ct-desc{font-size:.7rem;color:var(--sub);line-height:1.4}
.contact-layout{display:grid;grid-template-columns:1fr 340px;gap:2rem;margin-top:.5rem}
.contact-form-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:2rem}
.cf-title{font-size:1.1rem;font-weight:800;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.76rem;font-weight:700;color:var(--sub);margin-bottom:.4rem;letter-spacing:.3px;text-transform:uppercase}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.72rem 1rem;border-radius:9px;border:1.5px solid var(--border);background:var(--surface2);color:var(--text);font-family:inherit;font-size:.88rem;outline:none;transition:border-color var(--dur),box-shadow var(--dur)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lo)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--sub)}
.form-group textarea{resize:vertical;min-height:140px;line-height:1.6}
.form-group select option{background:var(--surface);color:var(--text)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.btn-submit{width:100%;background:var(--accent);color:#fff;border:none;padding:.85rem;border-radius:10px;font-size:.92rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:opacity var(--dur),transform var(--dur);margin-top:.5rem;cursor:pointer}
.btn-submit:hover{opacity:.88;transform:translateY(-1px)}
.btn-submit svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.alert{padding:.9rem 1.1rem;border-radius:10px;margin-bottom:1.2rem;font-size:.84rem;font-weight:600;display:flex;align-items:center;gap:.6rem}
.alert-success{background:rgba(16,185,129,.12);border:1.5px solid rgba(16,185,129,.3);color:#10b981}
.alert-error{background:rgba(232,54,93,.1);border:1.5px solid rgba(232,54,93,.25);color:var(--accent)}
.alert svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.cs-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1.3rem;margin-bottom:1rem}
.cs-title{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.cs-item{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:1rem}
.cs-item:last-child{margin-bottom:0}
.cs-icon{width:38px;height:38px;border-radius:10px;background:var(--accent-lo);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cs-icon svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cs-info h4{font-size:.84rem;font-weight:700;margin-bottom:.15rem}
.cs-info p{font-size:.76rem;color:var(--sub);line-height:1.5}
.cs-info a{color:var(--accent);font-weight:600}
.faq-item{border-bottom:1px solid var(--border);padding:.8rem 0}
.faq-item:last-child{border-bottom:none;padding-bottom:0}
.faq-q{font-size:.84rem;font-weight:700;margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem}
.faq-q::before{content:'Q';background:var(--accent-lo);color:var(--accent);font-size:.62rem;font-weight:800;padding:1px 5px;border-radius:4px;flex-shrink:0}
.faq-a{font-size:.78rem;color:var(--sub);line-height:1.6;padding-left:1.3rem}
.social-contact{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.sc-btn{display:flex;align-items:center;gap:.35rem;padding:.4rem .85rem;border-radius:7px;font-size:.74rem;font-weight:700;color:#fff;text-decoration:none;transition:opacity var(--dur)}
.sc-btn:hover{opacity:.88}
.sc-btn.fb{background:#1877f2}
.sc-btn.ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743)}
.sc-btn.yt{background:#ff0000}
.sc-btn.tw{background:#000}
@media(max-width:960px){.contact-layout{grid-template-columns:1fr}.contact-types{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.contact-types{grid-template-columns:repeat(2,1fr)}.form-row{grid-template-columns:1fr}.contact-form-card{padding:1.2rem}}
@media(max-width:400px){.contact-types{grid-template-columns:1fr}}

/* NEWS */
.news-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2.2rem 0 2rem;position:relative;overflow:hidden}
.news-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.news-hero::after{content:'';position:absolute;left:20%;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.nh-inner{position:relative;z-index:1}
.nh-inner h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:.3rem}
.nh-inner p{font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:.8rem}
.nh-cat{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.4rem}
.nh-stats{display:flex;gap:.6rem;flex-wrap:wrap}
.nh-stat{background:rgba(255,255,255,.15);color:#fff;font-size:.74rem;font-weight:700;padding:.28rem .75rem;border-radius:50px}
.news-main,.news-detail-main{padding-bottom:2rem}
.news-section-label{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:.7rem}
.cat-pills{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.cat-pill{background:var(--surface);border:1.5px solid var(--border);color:var(--sub);padding:.3rem .8rem;border-radius:50px;font-size:.74rem;font-weight:700;text-decoration:none;transition:all var(--dur)}
.cat-pill:hover,.cat-pill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.news-layout,.article-layout{display:grid;grid-template-columns:1fr 280px;gap:2rem;margin-top:.5rem}
.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}
.feat-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;transition:transform var(--dur),border-color var(--dur);text-decoration:none;color:var(--text);display:block}
.feat-card:hover{transform:translateY(-3px);border-color:rgba(232,54,93,.3)}
.feat-card.big{grid-column:1/-1}
.fc-img,.nc-img,.article-img,.ns-thumb{position:relative}
.fc-img,.nc-img,.article-img{aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;font-size:3rem;overflow:hidden}
.nc-img{aspect-ratio:16/9;font-size:2rem}
.feat-card.big .fc-img{font-size:4rem}
.fc-img-photo,.nc-img-photo,.article-img-photo,.ns-thumb-photo{background:var(--surface2)}
.fc-img img,.nc-img img,.article-img img,.ns-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ns-thumb{aspect-ratio:1;font-size:1.1rem;overflow:hidden;border-radius:8px}
.article-img{aspect-ratio:16/7;font-size:5rem;border-radius:14px;margin-bottom:1.5rem}
.fc-cat,.nc-cat{position:absolute;top:.7rem;left:.7rem;background:var(--accent);color:#fff;font-size:.62rem;font-weight:800;padding:2px 8px;border-radius:5px;letter-spacing:.3px;z-index:1}
.nc-cat{top:.5rem;left:.5rem;font-size:.58rem;padding:1px 6px}
.fc-body{padding:.9rem 1rem}
.fc-title{font-size:.92rem;font-weight:800;margin-bottom:.3rem;line-height:1.4}
.feat-card.big .fc-title{font-size:1.1rem}
.fc-excerpt{font-size:.78rem;color:var(--sub);line-height:1.6;margin-bottom:.6rem}
.fc-meta,.nc-meta{display:flex;align-items:center;gap:.6rem;font-size:.68rem;color:var(--sub)}
.fc-meta .dot,.nc-meta .dot{opacity:.4}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.news-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;transition:transform var(--dur),border-color var(--dur);text-decoration:none;color:var(--text);display:block}
.news-card:hover{transform:translateY(-3px);border-color:rgba(232,54,93,.3)}
.nc-body{padding:.75rem .85rem}
.nc-title{font-size:.82rem;font-weight:700;margin-bottom:.3rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-cat{display:inline-flex;align-items:center;gap:.3rem;background:var(--accent);color:#fff;font-size:.7rem;font-weight:800;padding:.25rem .75rem;border-radius:5px;margin-bottom:.7rem}
.article-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.5px;line-height:1.25;margin-bottom:.7rem}
.article-meta{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;font-size:.76rem;color:var(--sub);margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.article-meta .dot{opacity:.4}
.article-gallery{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}
.article-gallery-item img{width:100%;height:auto;border-radius:12px;display:block}
.article-content{font-size:.9rem;color:var(--sub);line-height:1.9}
.article-content p{margin-bottom:1.1rem}
.article-content img{max-width:100%;height:auto;border-radius:10px}
.article-share{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}
.sh-btn{display:flex;align-items:center;gap:.3rem;padding:.38rem .85rem;border-radius:7px;font-size:.74rem;font-weight:700;color:#fff;border:none;cursor:pointer}
.sh-btn.fb{background:#1877f2}
.sh-btn.wa{background:#25d366}
.sh-btn.tw{background:#000}
.sh-btn.cp{background:var(--surface2);color:var(--sub);border:1.5px solid var(--border)}
.ns-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1rem}
.ns-head{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub)}
.ns-body{padding:.6rem}
.ns-item{display:flex;align-items:flex-start;gap:.65rem;padding:.5rem .4rem;border-radius:9px;transition:background var(--dur);text-decoration:none;color:var(--text)}
.ns-item:hover{background:var(--surface2)}
.ns-info h4{font-size:.78rem;font-weight:700;line-height:1.4;margin-bottom:.2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ns-info p{font-size:.65rem;color:var(--sub)}
.ns-ad{background:linear-gradient(135deg,var(--accent),#c0183a);border-radius:14px;padding:1.1rem;text-align:center;margin-bottom:1rem;display:block;text-decoration:none;transition:opacity var(--dur)}
.ns-ad:hover{opacity:.92}
.ns-ad-label{font-size:.58rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.4rem}
.ns-ad h4{font-size:.88rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.ns-ad p{font-size:.73rem;color:rgba(255,255,255,.8);margin-bottom:.75rem}
.ns-ad-btn{display:inline-block;background:#fff;color:var(--accent);padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800}
.breadcrumb-current{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.news-related{margin-top:2.5rem}
@media(max-width:960px){.news-layout,.article-layout{grid-template-columns:1fr}.news-grid{grid-template-columns:1fr 1fr}.featured-grid{grid-template-columns:1fr}}
@media(max-width:580px){.news-grid{grid-template-columns:1fr}}

/* ABOUT */
.about-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:3rem 0;position:relative;overflow:hidden}
.about-hero::before{content:'';position:absolute;right:-100px;top:-100px;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.about-hero::after{content:'';position:absolute;left:5%;bottom:-80px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.ah-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.ah-left h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;letter-spacing:-1px;line-height:1.1;margin-bottom:.8rem}
.ah-left h1 span{color:rgba(255,255,255,.6)}
.ah-left p{font-size:.95rem;color:rgba(255,255,255,.8);line-height:1.75;margin-bottom:1.3rem}
.ah-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.ah-btn-primary{background:#fff;color:var(--accent);padding:.65rem 1.4rem;border-radius:9px;font-size:.84rem;font-weight:800;display:inline-block;transition:opacity var(--dur);text-decoration:none}
.ah-btn-primary:hover{opacity:.88}
.ah-btn-sec{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3);padding:.65rem 1.4rem;border-radius:9px;font-size:.84rem;font-weight:700;display:inline-block;transition:background var(--dur);text-decoration:none}
.ah-btn-sec:hover{background:rgba(255,255,255,.25)}
.ah-right{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ah-stat-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:1.1rem;text-align:center;backdrop-filter:blur(8px)}
.ah-stat-card .num{font-size:1.8rem;font-weight:800;color:#fff;letter-spacing:-1px;margin-bottom:.2rem}
.ah-stat-card .lbl{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.5px;text-transform:uppercase}
.ah-stat-card .ico{font-size:1.3rem;margin-bottom:.3rem}
.about-main{padding-bottom:2rem}
.about-sec-divider{border-top:1px solid var(--border)}
.sec{padding:2.5rem 0}
.sec-title{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;margin-bottom:.4rem}
.sec-sub{font-size:.88rem;color:var(--sub);margin-bottom:2rem;max-width:600px}
.sec-label{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent-lo);color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:.3rem .8rem;border-radius:50px;margin-bottom:.7rem}
.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.mission-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:1.5rem;transition:transform var(--dur),border-color var(--dur)}
.mission-card:hover{transform:translateY(-4px);border-color:rgba(232,54,93,.3)}
.mc-icon{width:52px;height:52px;border-radius:14px;background:var(--accent-lo);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1rem}
.mc-title{font-size:.95rem;font-weight:800;margin-bottom:.5rem}
.mc-desc{font-size:.82rem;color:var(--sub);line-height:1.7}
.story-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.story-text p{font-size:.88rem;color:var(--sub);line-height:1.85;margin-bottom:1rem}
.story-text p strong{color:var(--text)}
.story-visual{background:linear-gradient(135deg,var(--accent),#c0183a);border-radius:20px;padding:2rem;text-align:center;position:relative;overflow:hidden}
.story-visual::before{content:'';position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.sv-emoji{font-size:4rem;margin-bottom:.8rem;display:block}
.sv-text{font-size:1rem;font-weight:800;color:#fff;margin-bottom:.3rem}
.sv-sub{font-size:.78rem;color:rgba(255,255,255,.75)}
.sv-grid{margin-top:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.sv-grid-item{background:rgba(255,255,255,.12);border-radius:10px;padding:.8rem;text-align:center}
.sv-grid-num{font-size:1.4rem;font-weight:800;color:#fff}
.sv-grid-lbl{font-size:.68rem;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.5px}
.timeline-wrap{max-width:600px}
.timeline{position:relative;padding-left:2rem}
.timeline::before{content:'';position:absolute;left:.4rem;top:0;bottom:0;width:2px;background:var(--border);border-radius:2px}
.tl-item{position:relative;margin-bottom:1.8rem}
.tl-item:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:-1.65rem;top:.2rem;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2.5px solid var(--accent);transition:all var(--dur)}
.tl-item:hover .tl-dot{background:var(--accent)}
.tl-year{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:.2rem}
.tl-title{font-size:.92rem;font-weight:800;margin-bottom:.25rem}
.tl-desc{font-size:.8rem;color:var(--sub);line-height:1.6}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.team-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:1.5rem;text-align:center;transition:transform var(--dur),border-color var(--dur)}
.team-card:hover{transform:translateY(-4px);border-color:rgba(232,54,93,.3)}
.tc-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ff6b35);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto .9rem;box-shadow:0 6px 20px rgba(232,54,93,.25)}
.tc-name{font-size:.92rem;font-weight:800;margin-bottom:.2rem}
.tc-role{font-size:.75rem;color:var(--sub);margin-bottom:.5rem}
.tc-since{display:inline-block;background:var(--accent-lo);color:var(--accent);font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:4px}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.value-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:1.2rem;text-align:center;transition:border-color var(--dur)}
.value-card:hover{border-color:var(--accent)}
.vc-icon{font-size:1.8rem;margin-bottom:.6rem}
.vc-title{font-size:.84rem;font-weight:800;margin-bottom:.3rem}
.vc-desc{font-size:.74rem;color:var(--sub);line-height:1.55}
.about-cta{background:linear-gradient(135deg,var(--accent) 0%,#c0183a 100%);border-radius:20px;padding:3rem 2.5rem;text-align:center;position:relative;overflow:hidden;margin:2rem 0}
.about-cta::before{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.about-cta::after{content:'';position:absolute;left:-40px;bottom:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.about-cta h2{font-size:1.8rem;font-weight:800;color:#fff;margin-bottom:.5rem;position:relative;z-index:1}
.about-cta p{font-size:.9rem;color:rgba(255,255,255,.8);margin-bottom:1.5rem;position:relative;z-index:1}
.cta-btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.cta-btn-w{background:#fff;color:var(--accent);padding:.7rem 1.6rem;border-radius:9px;font-size:.88rem;font-weight:800;display:inline-block;transition:opacity var(--dur);text-decoration:none}
.cta-btn-w:hover{opacity:.88}
.cta-btn-t{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3);padding:.7rem 1.6rem;border-radius:9px;font-size:.88rem;font-weight:700;display:inline-block;transition:background var(--dur);text-decoration:none}
.cta-btn-t:hover{background:rgba(255,255,255,.25)}
@media(max-width:960px){.ah-inner{grid-template-columns:1fr;text-align:center}.ah-btns{justify-content:center}.mission-grid{grid-template-columns:repeat(2,1fr)}.story-layout{grid-template-columns:1fr}.team-grid{grid-template-columns:repeat(2,1fr)}.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.mission-grid{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr 1fr}.values-grid{grid-template-columns:1fr 1fr}.ah-right{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.team-grid{grid-template-columns:1fr}}

/* LEGAL */
.legal-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2.5rem 0;position:relative;overflow:hidden;text-align:center}
.legal-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.legal-hero::after{content:'';position:absolute;left:5%;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.lh-inner{position:relative;z-index:1}
.lh-inner h1{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;color:#fff;letter-spacing:-.8px;margin-bottom:.4rem}
.lh-inner p{font-size:.88rem;color:rgba(255,255,255,.8)}
.lh-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.15);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .9rem;border-radius:50px;margin-bottom:.8rem}
.legal-main{padding-bottom:2rem}
.legal-layout{display:grid;grid-template-columns:240px 1fr;gap:2.5rem;margin-top:1.5rem;align-items:start}
.toc-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1.2rem;position:sticky;top:80px}
.toc-title{font-size:.7rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--sub);margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.toc-list{display:flex;flex-direction:column;gap:.15rem}
.toc-link{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:7px;font-size:.78rem;font-weight:600;color:var(--sub);transition:all var(--dur);text-decoration:none}
.toc-link:hover,.toc-link.active{background:var(--accent-lo);color:var(--accent)}
.toc-link span{font-size:.82rem}
.legal-intro{background:var(--surface);border:1.5px solid var(--border);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:1.1rem 1.3rem;margin-bottom:2rem;font-size:.84rem;color:var(--sub);line-height:1.7}
.legal-intro strong{color:var(--text)}
.legal-section{margin-bottom:2.5rem;scroll-margin-top:90px}
.ls-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.ls-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-lo);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.ls-title{font-size:1.1rem;font-weight:800;letter-spacing:-.3px}
.legal-section h3{font-size:.9rem;font-weight:800;margin:1.2rem 0 .5rem}
.legal-section p{font-size:.84rem;color:var(--sub);line-height:1.8;margin-bottom:.8rem}
.legal-section p:last-child{margin-bottom:0}
.legal-section ul{margin:.5rem 0 .8rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.legal-section ul li{font-size:.84rem;color:var(--sub);line-height:1.65}
.legal-section ul li::marker{color:var(--accent)}
.legal-section a{color:var(--accent);font-weight:600}
.legal-section a:hover{text-decoration:underline}
.ls-divider{height:1px;background:var(--border);margin-bottom:2.5rem}
.highlight-box{background:var(--accent-lo);border:1.5px solid rgba(232,54,93,.2);border-radius:10px;padding:.9rem 1.1rem;margin:.8rem 0;font-size:.82rem;color:var(--sub);line-height:1.7}
.highlight-box strong{color:var(--accent)}
.warning-box{background:rgba(245,158,11,.08);border:1.5px solid rgba(245,158,11,.25);border-radius:10px;padding:.9rem 1.1rem;margin:.8rem 0;font-size:.82rem;color:var(--sub);line-height:1.7}
.warning-box strong{color:#f59e0b}
.info-box{background:rgba(14,165,233,.08);border:1.5px solid rgba(14,165,233,.25);border-radius:10px;padding:.9rem 1.1rem;margin:.8rem 0;font-size:.82rem;color:var(--sub);line-height:1.7}
.info-box strong{color:#0ea5e9}
.cookie-table{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.8rem}
.cookie-table th{background:var(--surface2);padding:.55rem .8rem;text-align:left;font-size:.68rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--sub);border-bottom:2px solid var(--border)}
.cookie-table td{padding:.55rem .8rem;border-bottom:1px solid var(--border);color:var(--sub);line-height:1.5}
.cookie-table tr:last-child td{border-bottom:none}
.cookie-table td:first-child{font-weight:700;color:var(--text)}
.legal-contact-block{background:var(--surface2);border-radius:12px;padding:1.2rem 1.4rem;margin-top:.8rem}
.legal-contact-line{font-size:.84rem;margin-bottom:.6rem}
.legal-contact-line:last-child{margin-bottom:0}
.legal-contact-actions{margin-top:1.2rem;display:flex;gap:.6rem;flex-wrap:wrap}
.legal-btn-primary{background:var(--accent);color:#fff;padding:.6rem 1.3rem;border-radius:8px;font-size:.82rem;font-weight:700;text-decoration:none;display:inline-block}
.legal-btn-sec{background:var(--surface2);color:var(--sub);border:1.5px solid var(--border);padding:.6rem 1.3rem;border-radius:8px;font-size:.82rem;font-weight:700;text-decoration:none;display:inline-block}
@media(max-width:960px){.legal-layout{grid-template-columns:1fr}.toc-card{position:static}}

/* RINGTONE — body.pg-rt-list / body.pg-rt-detail | Design: ringtone.php */
.rt-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2.5rem 0 2rem;position:relative;overflow:hidden}
.rt-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.rt-hero--detail{padding:2rem 0 1.6rem}
.rt-hero .rth-inner{position:relative;z-index:1;text-align:left}
.rth-inner{position:relative;z-index:1}
.rth-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.15);color:#fff;font-size:.72rem;font-weight:800;padding:.28rem .9rem;border-radius:50px;margin-bottom:.7rem}
.rt-hero .rth-inner h1{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin:0 0 .3rem;text-align:left}
.rt-hero .rth-inner p{font-size:.86rem;color:rgba(255,255,255,.75);margin:0 0 .9rem;text-align:left}
.rth-inner h1{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:.3rem}
.rth-inner p{font-size:.86rem;color:rgba(255,255,255,.75);margin-bottom:.9rem}
.rth-stats{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-start}
.rth-stat{background:rgba(255,255,255,.15);color:#fff;font-size:.74rem;font-weight:700;padding:.28rem .75rem;border-radius:50px}
.rt-main{padding-bottom:2rem}
.rt-section-label{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:.7rem}
.type-tabs{display:flex;gap:.5rem;margin:.8rem 0 .5rem;flex-wrap:wrap}
.type-tab{display:flex;align-items:center;gap:.35rem;background:var(--surface);border:1.5px solid var(--border);padding:.45rem 1.1rem;border-radius:50px;font-size:.76rem;font-weight:700;color:var(--sub);text-decoration:none;white-space:nowrap;transition:all var(--dur)}
.type-tab:hover,.type-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.filters-bar{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:.65rem 1rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.rt-filters-bar{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:.65rem 1rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.rt-filters-bar .pill{background:var(--surface2)}
.rt-fsep{width:1px;height:18px;background:var(--border);flex-shrink:0;align-self:center}
.fsep{width:1px;height:18px;background:var(--border);flex-shrink:0}
.rt-layout,.rt-single-layout{display:grid;grid-template-columns:1fr 280px;gap:2rem;margin-top:.5rem}
.feat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1.5rem}
.fs-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;transition:transform var(--dur),border-color var(--dur);text-decoration:none;color:var(--text);display:block}
.fs-card:hover{transform:translateY(-3px);border-color:rgba(232,54,93,.3)}
.fsc-img,.rtr-thumb,.rs-thumb{position:relative;overflow:hidden}
.fsc-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.fsc-img-photo,.rtr-thumb-photo,.rs-thumb-photo,.rt-cover-photo,.fsc-img img,.rtr-thumb img,.rs-thumb img,.rt-cover img{width:100%;height:100%;object-fit:cover;display:block}
.rtr-thumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.fsc-type-badge{position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:4px;color:#fff;background:var(--accent);white-space:nowrap}
.fsc-body{padding:.7rem .8rem}
.fsc-title{font-size:.8rem;font-weight:800;margin-bottom:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsc-artist{font-size:.68rem;color:var(--accent);font-weight:700;margin-bottom:.25rem}
.fsc-dl{font-size:.64rem;color:var(--sub)}
.rt-row{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;margin-bottom:.45rem;transition:border-color var(--dur),box-shadow var(--dur);text-decoration:none;color:var(--text)}
.rt-row:hover{border-color:rgba(232,54,93,.25);box-shadow:0 4px 16px var(--shadow)}
.rtr-info{flex:1;min-width:0}
.rtr-title{font-size:.88rem;font-weight:800;margin-bottom:.1rem;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.rtr-meta{font-size:.72rem;color:var(--sub);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.badge-new{background:#10b981;color:#fff;font-size:.55rem;font-weight:800;padding:1px 5px;border-radius:3px}
.badge-hot{background:var(--accent);color:#fff;font-size:.55rem;font-weight:800;padding:1px 5px;border-radius:3px}
.badge-type{font-size:.6rem;font-weight:800;padding:1px 6px;border-radius:4px;color:#fff;flex-shrink:0}
.rtr-title-link{color:var(--text);text-decoration:none}
.rtr-title-link:hover{color:var(--accent)}
.rtr-thumb-link{flex-shrink:0;text-decoration:none}
.rtr-play{width:36px;height:36px;border-radius:50%;background:var(--accent-lo);border:1.5px solid rgba(232,54,93,.2);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;transition:all var(--dur);cursor:pointer;font-family:inherit}
.rtr-play:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.rtr-play.playing{background:var(--accent);color:#fff;animation:rt-pulse .8s infinite}
@keyframes rt-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.rtr-stats{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;flex-shrink:0}
.rtr-dl-count,.rtr-dur{font-size:.7rem;color:var(--sub)}
.rtr-btn{background:var(--accent);color:#fff;padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800;flex-shrink:0;text-decoration:none;display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.rtr-btn:hover{opacity:.88}
.rt-empty{text-align:center;padding:3rem 1rem;color:var(--sub)}
.rt-empty-ico{font-size:2.5rem;margin-bottom:.8rem}
.rt-empty-title{font-size:1rem;font-weight:700;color:var(--text)}
.rt-single-top{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1.5rem;margin-bottom:1.2rem;display:grid;grid-template-columns:180px 1fr;gap:1.5rem;align-items:start}
.rt-cover{width:180px;height:180px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:5rem;overflow:hidden}
.rt-type-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:800;padding:.25rem .75rem;border-radius:5px;color:#fff;background:var(--accent);margin-bottom:.5rem}
.rt-title{font-size:1.4rem;font-weight:800;letter-spacing:-.3px;margin-bottom:.2rem}
.rt-artist{font-size:.88rem;color:var(--accent);font-weight:700;margin-bottom:.7rem}
.rt-meta-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.75rem;color:var(--sub);margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.rt-detail-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.rt-codes-section{margin-bottom:1.5rem}
.rt-codes-intro{font-size:.84rem;color:var(--sub);margin-bottom:1rem;line-height:1.7}
.rt-carrier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
.rt-carrier-card{background:var(--surface);border:2px solid var(--border);border-radius:14px;padding:1.2rem 1rem;text-align:center}
.rt-carrier-logo{width:56px;height:56px;margin:0 auto .6rem;border-radius:10px;overflow:hidden;background:var(--surface2);display:flex;align-items:center;justify-content:center}
.rt-carrier-logo img{width:100%;height:100%;object-fit:contain}
.rt-carrier-fallback{width:100%;height:100%;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.2rem}
.rt-carrier-label{font-size:.72rem;font-weight:700;color:var(--sub);margin-bottom:.35rem}
.rt-carrier-code{font-size:1.05rem;font-weight:800;color:var(--text);word-break:break-all;line-height:1.3}
.how-to-box{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.2rem}
.htb-header{padding:.8rem 1rem;border-bottom:1px solid var(--border);font-size:.8rem;font-weight:800}
.htb-tabs{display:flex;border-bottom:1px solid var(--border)}
.htb-tab{flex:1;padding:.55rem;font-size:.76rem;font-weight:700;text-align:center;color:var(--sub);cursor:pointer;transition:all var(--dur);border:none;background:none;font-family:inherit}
.htb-tab.active{color:var(--accent);border-bottom:2px solid var(--accent)}
.htb-content{padding:1rem;font-size:.82rem;color:var(--sub);line-height:1.7;display:none}
.htb-content.show{display:block}
.player-box{background:var(--surface2);border-radius:12px;padding:1rem;margin-bottom:1.2rem;border:1.5px solid var(--border)}
.player-title{font-size:.74rem;font-weight:800;color:var(--sub);text-transform:uppercase;letter-spacing:1px;margin-bottom:.8rem}
.player-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:40px;margin-bottom:.8rem}
.player-wave span{width:4px;border-radius:2px;background:var(--accent);opacity:.4;transition:all var(--dur)}
.player-wave.playing span{animation:rt-wave .8s ease-in-out infinite;opacity:1}
.player-wave span:nth-child(1){animation-delay:0s}
.player-wave span:nth-child(2){animation-delay:.1s}
.player-wave span:nth-child(3){animation-delay:.2s}
.player-wave span:nth-child(4){animation-delay:.3s}
.player-wave span:nth-child(5){animation-delay:.4s}
.player-wave span:nth-child(6){animation-delay:.3s}
.player-wave span:nth-child(7){animation-delay:.2s}
.player-wave span:nth-child(8){animation-delay:.1s}
@keyframes rt-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.player-controls{display:flex;align-items:center;justify-content:center;gap:.8rem}
.play-btn{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all var(--dur);box-shadow:0 4px 16px rgba(232,54,93,.3);cursor:pointer;font-family:inherit}
.play-btn:hover{transform:scale(1.08);opacity:.9}
.player-hint{text-align:center;font-size:.72rem;color:var(--sub);margin-top:.5rem}
.rt-dl-options .dl-opt{display:flex;align-items:center;gap:.85rem;background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:.75rem 1rem;margin-bottom:.45rem}
.rt-dl-options .dl-opt-info{flex:1;min-width:0}
.rt-dl-options .dl-opt-title{font-size:.86rem;font-weight:800;margin-bottom:.1rem}
.rt-dl-options .dl-opt-sub{font-size:.7rem;color:var(--sub)}
.rt-dl-options .dl-btn{background:var(--accent);color:#fff;border:none;padding:.42rem 1rem;border-radius:7px;font-size:.78rem;font-weight:800;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;flex-shrink:0}
.rt-dl-options .dl-btn:hover{opacity:.88}
.rt-song-banner{border:none;background:transparent;padding:0;margin-top:1rem}
.rs-dl{font-size:.7rem;color:var(--accent);font-weight:700;flex-shrink:0}
.htb-step{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.6rem}
.htb-num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rs-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1rem}
.rs-head{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub)}
.rs-body{padding:.6rem}
.rs-item{display:flex;align-items:center;gap:.65rem;padding:.5rem .4rem;border-radius:9px;transition:background var(--dur);text-decoration:none;color:var(--text)}
.rs-item:hover{background:var(--surface2)}
.rs-thumb{width:40px;height:40px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem}
.rs-info{flex:1;min-width:0}
.rs-info h4{font-size:.78rem;font-weight:700;margin-bottom:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-info p{font-size:.65rem;color:var(--sub)}
.rs-more{padding:.3rem .4rem}
.rs-more a{font-size:.74rem;color:var(--accent);font-weight:700;text-decoration:none}
.rs-empty-hint{font-size:.72rem;color:var(--sub);padding:.35rem .4rem .5rem}
.rs-ad{background:linear-gradient(135deg,var(--accent),#c0183a);border-radius:14px;padding:1.1rem;text-align:center;margin-bottom:1rem;display:block;text-decoration:none;transition:opacity var(--dur)}
.rs-ad:hover{opacity:.92}
.rs-ad-label{font-size:.58rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.3rem}
.rs-ad h4{font-size:.88rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.rs-ad p{font-size:.73rem;color:rgba(255,255,255,.8);margin-bottom:.75rem}
.rs-ad-btn{display:inline-block;background:#fff;color:var(--accent);padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800}
.rt-related{margin-top:2rem}
@media(max-width:960px){.rt-layout,.rt-single-layout{grid-template-columns:1fr}.feat-strip{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.rt-single-top{grid-template-columns:1fr;text-align:center}.rt-cover{margin:0 auto}.rt-detail-actions{justify-content:center}}
@media(max-width:580px){.feat-strip{grid-template-columns:1fr 1fr}.rtr-stats{display:none}}

/* CLASSIC SONGS — body.pg-classic-list / body.pg-classic-detail | Design: classic.php */
.classic-hero{background:linear-gradient(135deg,#1a0a00 0%,#4a1500 40%,var(--accent) 100%);padding:2.8rem 0 2.2rem;position:relative;overflow:hidden}
.classic-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:rgba(255,215,0,.04);pointer-events:none}
.classic-hero::after{content:'';position:absolute;left:10%;bottom:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,215,0,.03);pointer-events:none}
.classic-hero--detail{padding:2rem 0 1.6rem}
.classic-hero .ch-inner{position:relative;z-index:1;text-align:left}
.classic-hero .ch-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,215,0,.15);color:#ffd700;font-size:.72rem;font-weight:800;padding:.28rem .9rem;border-radius:50px;margin-bottom:.7rem;letter-spacing:.5px;border:1px solid rgba(255,215,0,.3)}
.classic-hero .ch-inner h1{font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin:0 0 .3rem;text-align:left}
.classic-hero .ch-inner p{font-size:.86rem;color:rgba(255,255,255,.75);margin:0 0 .9rem;max-width:none;text-align:left}
.classic-hero .ch-stats{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-start}
.classic-hero .ch-stat{background:rgba(255,215,0,.1);color:#ffd700;font-size:.74rem;font-weight:700;padding:.28rem .75rem;border-radius:50px;border:1px solid rgba(255,215,0,.2)}
.era-bar{display:flex;gap:.4rem;margin:.5rem 0 1rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:none}
.era-bar::-webkit-scrollbar{display:none}
.era-pill{display:flex;align-items:center;gap:.35rem;background:var(--surface);border:1.5px solid var(--border);padding:.4rem 1rem;border-radius:50px;font-size:.76rem;font-weight:700;color:var(--sub);text-decoration:none;white-space:nowrap;transition:all var(--dur)}
.era-pill:hover,.era-pill.on{background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(255,215,0,.05));border-color:rgba(255,215,0,.4);color:#ffd700}
.era-pill .era-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background var(--dur)}
.era-pill.on .era-dot,.era-pill:hover .era-dot{background:#ffd700}
.cl-filters-bar{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:.65rem 1rem;margin-bottom:1.2rem;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem .4rem}
.cl-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.cl-fsep{width:1px;height:18px;background:var(--border);flex-shrink:0;align-self:center}
.cl-filters-bar .pill{background:var(--surface2)}
.classic-layout,.song-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:2rem;margin-top:.5rem}
.cl-section-label{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:.7rem}
.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}
.feat-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;transition:transform var(--dur),border-color var(--dur);text-decoration:none;color:var(--text);display:block}
.feat-card:hover{transform:translateY(-3px);border-color:rgba(255,215,0,.3)}
.feat-card.big{grid-column:1/-1}
.fc-img{aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;font-size:3.5rem;position:relative;overflow:hidden}
.feat-card.big .fc-img{font-size:5rem}
.fc-img-photo,.cr-thumb-photo,.song-cover-photo,.cs-thumb-photo{width:100%;height:100%;object-fit:cover;display:block}
.fc-era{position:absolute;top:.7rem;left:.7rem;background:rgba(255,215,0,.2);color:#ffd700;font-size:.62rem;font-weight:800;padding:2px 8px;border-radius:5px;border:1px solid rgba(255,215,0,.3);z-index:2}
.fc-body{padding:.9rem 1rem}
.fc-title{font-size:.92rem;font-weight:800;margin-bottom:.2rem}
.feat-card.big .fc-title{font-size:1.1rem}
.fc-artist{font-size:.78rem;color:var(--accent);font-weight:700;margin-bottom:.5rem}
.fc-meta{display:flex;align-items:center;gap:.5rem;font-size:.68rem;color:var(--sub);flex-wrap:wrap}
.fc-year{font-size:.7rem;font-weight:800;background:rgba(255,215,0,.1);color:#ffd700;border:1px solid rgba(255,215,0,.2);padding:1px 7px;border-radius:4px}
.classic-row{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;margin-bottom:.45rem;text-decoration:none;color:var(--text);transition:border-color var(--dur),box-shadow var(--dur)}
.classic-row:hover{border-color:rgba(255,215,0,.25);box-shadow:0 4px 16px var(--shadow)}
.cr-num{font-size:.8rem;font-weight:800;color:var(--sub);min-width:24px;text-align:center;flex-shrink:0}
.cr-thumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;overflow:hidden}
.cr-info{flex:1;min-width:0}
.cr-title{font-size:.88rem;font-weight:800;margin-bottom:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-meta{font-size:.72rem;color:var(--sub);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.cr-era-tag{font-size:.62rem;font-weight:800;background:rgba(255,215,0,.1);color:#ffd700;border:1px solid rgba(255,215,0,.2);padding:1px 6px;border-radius:4px}
.cr-stats{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;flex-shrink:0}
.cr-dl{font-size:.7rem;color:var(--sub)}
.cr-rating{font-size:.72rem;color:#f59e0b}
.cr-btn{background:var(--accent-lo);color:var(--accent);border:1.5px solid rgba(232,54,93,.2);padding:.35rem .8rem;border-radius:7px;font-size:.72rem;font-weight:700;flex-shrink:0;transition:all var(--dur)}
.classic-row:hover .cr-btn{background:var(--accent);color:#fff}
.cl-empty{text-align:center;padding:3rem;color:var(--sub)}
.cl-empty-ico{font-size:2.5rem;margin-bottom:.8rem}
.cl-empty-title{font-weight:700;color:var(--text);margin-bottom:.4rem}
.song-top{display:grid;grid-template-columns:220px 1fr;gap:1.5rem;margin-bottom:1.2rem;align-items:start}
.song-top .song-cover{width:220px;height:220px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:5rem;flex-shrink:0;border:2px solid rgba(255,215,0,.2);overflow:hidden;aspect-ratio:unset;box-shadow:none}
.song-top .song-cover::after{display:none}
.gold-badge{display:inline-flex;align-items:center;gap:.3rem;background:rgba(255,215,0,.12);color:#ffd700;border:1px solid rgba(255,215,0,.3);font-size:.7rem;font-weight:800;padding:.25rem .75rem;border-radius:5px;margin-bottom:.5rem}
.song-title{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:800;letter-spacing:-.5px;margin-bottom:.2rem}
.song-artist{font-size:.9rem;color:var(--accent);font-weight:700;margin-bottom:.6rem}
.song-meta-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.75rem;color:var(--sub);margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.song-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.2rem}
.cl-btn-primary{text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.cl-btn-primary svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.song-layout .song-details{background:var(--surface2);border-radius:12px;overflow:hidden;border:1.5px solid var(--border);margin-bottom:1.2rem}
.sdt-row{display:flex;align-items:center;padding:.55rem 1rem;border-bottom:1px solid var(--border);font-size:.82rem}
.sdt-row:last-child{border-bottom:none}
.sdt-label{font-weight:700;color:var(--sub);min-width:130px;flex-shrink:0}
.song-desc{font-size:.86rem;color:var(--sub);line-height:1.8;margin-bottom:1.2rem}
.cl-block-label{font-size:.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:.5rem}
.classic-sidebar .cs-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1rem}
.classic-sidebar .cs-head{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub)}
.classic-sidebar .cs-body{padding:.6rem}
.classic-sidebar .cs-item{display:flex;align-items:center;gap:.65rem;padding:.5rem .4rem;border-radius:9px;transition:background var(--dur);text-decoration:none;color:var(--text)}
.classic-sidebar .cs-item:hover{background:var(--surface2)}
.classic-sidebar .cs-thumb{width:40px;height:40px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;overflow:hidden}
.classic-sidebar .cs-info{flex:1;min-width:0}
.classic-sidebar .cs-info h4{font-size:.78rem;font-weight:700;margin-bottom:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.classic-sidebar .cs-info p{font-size:.65rem;color:var(--sub)}
.classic-sidebar .cs-ad{background:linear-gradient(135deg,#1a0a00,var(--accent));border-radius:14px;padding:1.1rem;text-align:center;margin-bottom:1rem;display:block;text-decoration:none;transition:opacity var(--dur)}
.classic-sidebar .cs-ad:hover{opacity:.92}
.classic-sidebar .cs-ad-label{font-size:.58rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.3rem}
.classic-sidebar .cs-ad h4{font-size:.88rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.classic-sidebar .cs-ad p{font-size:.73rem;color:rgba(255,255,255,.8);margin-bottom:.75rem}
.classic-sidebar .cs-ad-btn{display:inline-block;background:#ffd700;color:#1a0a00;padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800}
.cs-era-more{padding:.3rem .4rem}
.cs-era-more a{font-size:.74rem;color:var(--accent);font-weight:700;text-decoration:none}
.classic-sidebar .dl-btn.outline{background:none;border:1.5px solid var(--border);color:var(--sub)}
.classic-sidebar .dl-btn.outline:hover{border-color:var(--accent);color:var(--accent)}
.share-btns{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
@media(max-width:960px){
  .classic-layout,.song-layout{grid-template-columns:minmax(0,1fr)}
  .featured-grid{grid-template-columns:1fr 1fr}
  .song-top{grid-template-columns:1fr}
}
@media(max-width:768px){
  .featured-grid{grid-template-columns:1fr}
  .fc-img{aspect-ratio:16/8;font-size:3rem}
  .feat-card.big .fc-img{aspect-ratio:16/8;font-size:3.5rem}
}
@media(max-width:580px){
  .classic-hero{padding:1.6rem 0 1.4rem}
  .cl-filters-bar{gap:.35rem;padding:.5rem .65rem}
  .cl-fsep{display:none}
  .cl-filters-bar .pill{font-size:.64rem;padding:.2rem .52rem}
  .featured-grid{grid-template-columns:1fr;gap:.45rem}
  .feat-card,.feat-card.big{display:flex;flex-direction:row;align-items:center;border-radius:11px}
  .fc-img{aspect-ratio:unset!important;width:80px;min-width:80px;height:80px;border-radius:11px 0 0 11px;font-size:1.8rem;flex-shrink:0}
  .feat-card.big .fc-img{width:90px;min-width:90px;height:90px;font-size:2.2rem}
  .fc-body{padding:.55rem .7rem;flex:1;min-width:0}
  .classic-row{padding:.65rem .8rem}
  .cr-stats,.cr-btn{display:none}
  .song-top .song-cover{margin:0 auto;width:180px;height:180px}
}

/* NEW RELEASES — body.pg-nr-list / body.pg-nr-detail | Design: new-releases.php */
.nr-filters-bar{
  background:var(--surface);border:1.5px solid var(--border);border-radius:12px;
  padding:.65rem 1rem;margin-bottom:1.2rem;
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem .4rem;
}
.nr-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.nr-fsep{width:1px;height:18px;background:var(--border);flex-shrink:0;align-self:center}
.nr-filters-bar .pill{background:var(--surface2)}
.nr-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2.5rem 0 2rem;position:relative;overflow:hidden}
.nr-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.nr-hero::after{content:'';position:absolute;left:20%;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.nr-hero--detail{padding:2rem 0 1.6rem}
.nrh{position:relative;z-index:1}
.nrh-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.15);color:#fff;font-size:.72rem;font-weight:800;padding:.28rem .9rem;border-radius:50px;margin-bottom:.7rem}
.nrh h1{font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:.3rem}
.nrh p{font-size:.86rem;color:rgba(255,255,255,.75);margin-bottom:.9rem}
.nrh-stats{display:flex;gap:.6rem;flex-wrap:wrap}
.nrh-stat{background:rgba(255,255,255,.15);color:#fff;font-size:.74rem;font-weight:700;padding:.28rem .75rem;border-radius:50px}
.nr-layout,.release-layout{display:grid;grid-template-columns:1fr 280px;gap:2rem;margin-top:.5rem}
.nr-section-label{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:.7rem}
.fsc-new{position:absolute;top:.5rem;left:.5rem;background:var(--accent);color:#fff;font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:4px;z-index:2}
.fsc-type{position:absolute;top:.5rem;right:.5rem;background:rgba(0,0,0,.5);color:#fff;font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:4px;backdrop-filter:blur(4px);z-index:2}
.fsc-meta{font-size:.64rem;color:var(--sub);display:flex;gap:.3rem;flex-wrap:wrap}
.nr-row{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;margin-bottom:.45rem;text-decoration:none;color:var(--text);transition:border-color var(--dur),box-shadow var(--dur)}
.nr-row:hover{border-color:rgba(232,54,93,.3);box-shadow:0 4px 16px var(--shadow)}
.nr-thumb{width:48px;height:48px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;overflow:hidden;position:relative}
.nr-thumb-photo,.release-cover-photo,.sc-thumb-photo{width:100%;height:100%;object-fit:cover;display:block}
.nr-info{flex:1;min-width:0}
.nr-title{font-size:.9rem;font-weight:800;margin-bottom:.12rem;display:flex;align-items:center;gap:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr-meta{font-size:.72rem;color:var(--sub);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.badge-type{background:var(--surface2);border:1px solid var(--border);color:var(--sub);font-size:.6rem;font-weight:800;padding:1px 6px;border-radius:4px;flex-shrink:0}
.nr-stats{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;flex-shrink:0}
.nr-dl{font-size:.7rem;color:var(--sub)}
.nr-date{font-size:.65rem;color:var(--sub)}
.nr-btn{background:var(--accent-lo);color:var(--accent);border:1.5px solid rgba(232,54,93,.2);padding:.35rem .8rem;border-radius:7px;font-size:.72rem;font-weight:700;flex-shrink:0;transition:all var(--dur)}
.nr-row:hover .nr-btn{background:var(--accent);color:#fff}
.nr-empty{text-align:center;padding:3rem;color:var(--sub)}
.nr-empty-ico{font-size:2.5rem;margin-bottom:.8rem}
.nr-empty-title{font-weight:700;color:var(--text);margin-bottom:.4rem}
.release-top{display:grid;grid-template-columns:220px 1fr;gap:1.5rem;margin-bottom:1.2rem;align-items:start}
.release-cover{width:220px;height:220px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:5rem;flex-shrink:0;overflow:hidden}
.release-type-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:800;padding:.25rem .75rem;border-radius:5px;margin-bottom:.5rem;color:#fff}
.release-title{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;letter-spacing:-.5px;margin-bottom:.2rem}
.release-artist{font-size:.9rem;color:var(--accent);font-weight:700;margin-bottom:.6rem}
.release-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.75rem;color:var(--sub);margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.release-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.2rem}
.nr-btn-primary{text-decoration:none}
.nr-btn-primary svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.release-details{background:var(--surface2);border-radius:12px;overflow:hidden;border:1.5px solid var(--border);margin-bottom:1.2rem}
.rdt-row{display:flex;align-items:center;padding:.55rem 1rem;border-bottom:1px solid var(--border);font-size:.82rem}
.rdt-row:last-child{border-bottom:none}
.rdt-label{font-weight:700;color:var(--sub);min-width:120px;flex-shrink:0}
.release-desc{font-size:.86rem;color:var(--sub);line-height:1.8;margin-bottom:1.2rem}
.nr-block-label{font-size:.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:.5rem}
.dl-opts{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem}
.dl-opt{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1.5px solid var(--border);padding:.6rem 1rem;border-radius:9px;gap:.75rem}
.dl-q{font-size:.84rem;font-weight:700}
.dl-s{font-size:.72rem;color:var(--sub);margin-top:.1rem}
.dl-btn{background:var(--accent);color:#fff;border:none;padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800;cursor:pointer;transition:opacity var(--dur);text-decoration:none;display:inline-block}
.dl-btn:hover{opacity:.88}
.dl-btn.out{background:none;border:1.5px solid var(--border);color:var(--sub)}
.dl-btn.out:hover{border-color:var(--accent);color:var(--accent)}
.share-row{display:flex;gap:.4rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid var(--border)}
.sh-btn{display:flex;align-items:center;gap:.3rem;padding:.38rem .85rem;border-radius:7px;font-size:.74rem;font-weight:700;color:#fff;border:none;cursor:pointer;transition:opacity var(--dur)}
.sh-btn:hover{opacity:.88}
.sh-btn.fb{background:#1877f2}
.sh-btn.wa{background:#25d366}
.sh-btn.tw{background:#000}
.sh-btn.cp{background:var(--surface2);color:var(--sub);border:1.5px solid var(--border)}
.sc-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1rem}
.sc-head{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub)}
.sc-body{padding:.6rem}
.sc-item{display:flex;align-items:center;gap:.65rem;padding:.5rem .4rem;border-radius:9px;transition:background var(--dur);text-decoration:none;color:var(--text)}
.sc-item:hover{background:var(--surface2)}
.sc-thumb{width:40px;height:40px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;overflow:hidden}
.sc-info{flex:1;min-width:0}
.sc-info h4{font-size:.78rem;font-weight:700;margin-bottom:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-info p{font-size:.65rem;color:var(--sub)}
.sc-ad{background:linear-gradient(135deg,var(--accent),#c0183a);border-radius:14px;padding:1.1rem;text-align:center;margin-bottom:1rem;display:block;text-decoration:none;transition:opacity var(--dur)}
.sc-ad:hover{opacity:.92}
.sc-ad-label{font-size:.58rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.3rem}
.sc-ad h4{font-size:.88rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.sc-ad p{font-size:.73rem;color:rgba(255,255,255,.8);margin-bottom:.75rem}
.sc-ad-btn{display:inline-block;background:#fff;color:var(--accent);padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800}
.sc-quick-links{padding:.8rem!important;display:flex;flex-direction:column;gap:.15rem}
.sc-quick-links a{display:flex;align-items:center;gap:.5rem;padding:.4rem;border-radius:7px;font-size:.8rem;font-weight:700;color:var(--sub);text-decoration:none;transition:background var(--dur),color var(--dur)}
.sc-quick-links a:hover{background:var(--surface2);color:var(--accent)}
@media(max-width:960px){.nr-layout,.release-layout{grid-template-columns:1fr}}
@media(max-width:768px){.release-top{grid-template-columns:1fr}.release-cover{margin:0 auto;width:180px;height:180px}}
@media(max-width:580px){
  .nr-hero{padding:1.6rem 0 1.4rem}
  .nr-filters-bar{gap:.35rem;padding:.5rem .65rem}
  .nr-fsep{display:none}
  .nr-filters-bar .pill{font-size:.64rem;padding:.2rem .52rem}
  .feat-strip{grid-template-columns:1fr;gap:.45rem;margin-bottom:1rem}
  .fs-card{display:flex;flex-direction:row;align-items:center;border-radius:11px}
  .fsc-img{aspect-ratio:unset!important;width:80px;min-width:80px;height:80px;border-radius:11px 0 0 11px;font-size:2rem;flex-shrink:0}
  .fsc-body{padding:.55rem .75rem;flex:1;min-width:0}
  .nr-row{padding:.65rem .8rem;gap:.65rem}
  .nr-thumb{width:42px;height:42px;font-size:1.1rem}
  .nr-title{font-size:.82rem}
  .nr-stats{display:none}
  .nr-btn{padding:.3rem .65rem;font-size:.67rem}
}

/* ADVERTISING */
.adv-hero{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 40%,var(--accent) 100%);padding:3.5rem 0 3rem;position:relative;overflow:hidden;text-align:center}
.adv-hero::before{content:'';position:absolute;right:-100px;top:-100px;width:350px;height:350px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.adv-hero::after{content:'';position:absolute;left:5%;bottom:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.adv-hero .ah-inner{
  position:relative;z-index:1;
  display:block;text-align:center;
  grid-template-columns:unset;gap:0;
}
.adv-hero .badge{
  position:static;top:auto;right:auto;left:auto;
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:.72rem;font-weight:800;padding:.3rem .9rem;
  border-radius:50px;margin:0 auto .9rem;letter-spacing:.5px;
  border:none;z-index:1;
}
.adv-hero .ah-inner h1{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;color:#fff;letter-spacing:-1px;line-height:1.1;margin-bottom:.6rem}
.adv-hero .ah-inner h1 span{color:rgba(255,255,255,.6)}
.adv-hero .ah-inner p{font-size:.95rem;color:rgba(255,255,255,.8);max-width:560px;margin:0 auto 1.5rem;line-height:1.7}
.ah-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.ah-btn-w{background:#fff;color:#312e81;padding:.7rem 1.6rem;border-radius:9px;font-size:.88rem;font-weight:800;display:inline-block;transition:opacity var(--dur);text-decoration:none}
.ah-btn-w:hover{opacity:.9}
.ah-btn-t{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3);padding:.7rem 1.6rem;border-radius:9px;font-size:.88rem;font-weight:700;display:inline-block;transition:background var(--dur);text-decoration:none}
.ah-btn-t:hover{background:rgba(255,255,255,.25)}
.adv-main{padding-bottom:2rem}
.sec-label{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent-lo);color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:.3rem .8rem;border-radius:50px;margin-bottom:.7rem}
.sec-title{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;margin-bottom:.4rem}
.sec-sub{font-size:.88rem;color:var(--sub);margin-bottom:2rem;max-width:600px}
.adv-section{margin-top:2rem}
.adv-main .stats-band{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:1.5rem 2rem;margin:2rem 0}
.stats-band-head{text-align:center;margin-bottom:1.2rem}
.stats-band-title{font-size:1.1rem;font-weight:800}
.adv-stats-inner,.stats-inner{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;text-align:center}
.stat-item .sn{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;color:var(--text);margin-bottom:.2rem}
.stat-item .si{font-size:1.2rem;margin-bottom:.2rem}
.stat-item .sk{font-size:.68rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--sub)}
.ad-types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:3rem}
.ad-type-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1.3rem;transition:transform var(--dur),border-color var(--dur)}
.ad-type-card:hover{transform:translateY(-3px);border-color:rgba(232,54,93,.3)}
.atc-icon{font-size:1.8rem;margin-bottom:.7rem}
.atc-name{font-size:.9rem;font-weight:800;margin-bottom:.3rem}
.atc-desc{font-size:.78rem;color:var(--sub);line-height:1.6}
.packages-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:3rem}
.pkg-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:1.5rem;position:relative;transition:transform var(--dur),border-color var(--dur)}
.pkg-card:hover{transform:translateY(-4px)}
.pkg-card.popular{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lo)}
.pkg-popular-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.65rem;font-weight:800;padding:.25rem .8rem;border-radius:50px;white-space:nowrap;letter-spacing:.5px}
.pkg-icon{font-size:1.8rem;margin-bottom:.6rem}
.pkg-name{font-size:.88rem;font-weight:800;color:var(--sub);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.pkg-price{font-size:1.8rem;font-weight:800;letter-spacing:-1px;margin-bottom:.1rem}
.pkg-period{font-size:.75rem;color:var(--sub);margin-bottom:1rem}
.pkg-features{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.2rem}
.pkg-feature{display:flex;align-items:flex-start;gap:.4rem;font-size:.78rem;color:var(--sub)}
.pkg-feature::before{content:'✓';color:var(--accent);font-weight:800;flex-shrink:0}
.pkg-btn{display:block;text-align:center;padding:.6rem;border-radius:8px;font-size:.8rem;font-weight:800;transition:all var(--dur);text-decoration:none}
.pkg-btn-accent{background:var(--accent);color:#fff}
.pkg-btn-accent:hover{opacity:.88}
.pkg-btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--sub)}
.pkg-btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.adv-layout{display:grid;grid-template-columns:1fr 320px;gap:2rem;margin-top:1rem}
.adv-form-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:2rem}
.af-title{font-size:1rem;font-weight:800;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.adv-form-card .form-group{margin-bottom:1rem}
.adv-form-card .form-group label{text-transform:none;font-size:.75rem}
.adv-form-card .form-group textarea{min-height:120px}
.btn-submit-gradient{background:linear-gradient(135deg,var(--accent),#c0183a);box-shadow:0 6px 20px rgba(232,54,93,.3);margin-top:.3rem}
.as-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1.2rem;margin-bottom:1rem}
.as-title{font-size:.7rem;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--sub);margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.contact-item{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.9rem}
.contact-item:last-child{margin-bottom:0}
.ci-icon{width:36px;height:36px;border-radius:9px;background:var(--accent-lo);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem}
.ci-info h4{font-size:.8rem;font-weight:700;margin-bottom:.1rem}
.ci-info p{font-size:.74rem;color:var(--sub)}
.ci-info a{color:var(--accent)}
.why-item{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.6rem;font-size:.78rem;color:var(--sub);line-height:1.5}
.why-item:last-child{margin-bottom:0}
.why-item .wi{font-size:.9rem;flex-shrink:0;margin-top:.05rem}
.banner-size-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.78rem}
.banner-size-row:last-child{border-bottom:none}
.bs-name{font-weight:700}
.bs-place{color:var(--sub);font-size:.7rem}
.bs-dim{font-size:.72rem;color:var(--accent);font-weight:700;background:var(--accent-lo);padding:2px 8px;border-radius:5px}
.adv-cta{background:linear-gradient(135deg,#1e1b4b,#312e81);border-radius:20px;padding:2.5rem;text-align:center;margin:2rem 0;position:relative;overflow:hidden}
.adv-cta::before{content:'';position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.adv-cta h2{font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:.4rem;position:relative;z-index:1}
.adv-cta p{font-size:.88rem;color:rgba(255,255,255,.75);margin-bottom:1.2rem;position:relative;z-index:1}
.adv-cta-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.adv-cta-btn-w{background:#fff;color:#312e81;padding:.65rem 1.5rem;border-radius:9px;font-size:.88rem;font-weight:800;text-decoration:none}
.adv-cta-btn-t{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3);padding:.65rem 1.5rem;border-radius:9px;font-size:.88rem;font-weight:700;text-decoration:none}
.adv-cta-btn-t:hover{background:rgba(255,255,255,.25)}
@media(max-width:960px){.packages-grid{grid-template-columns:repeat(2,1fr)}.adv-layout{grid-template-columns:1fr}.adv-stats-inner,.stats-inner{grid-template-columns:repeat(3,1fr)}.ad-types-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.packages-grid{grid-template-columns:1fr}.ad-types-grid{grid-template-columns:1fr}.adv-stats-inner,.stats-inner{grid-template-columns:repeat(2,1fr)}.adv-form-card{padding:1.2rem}}

/* SUBMIT MUSIC */
.submit-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2.5rem 0 2.2rem;position:relative;overflow:hidden;text-align:center}
.submit-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.submit-hero::after{content:'';position:absolute;left:10%;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.sh-inner{position:relative;z-index:1}
.sh-inner h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:#fff;letter-spacing:-.8px;margin-bottom:.4rem}
.sh-inner p{font-size:.9rem;color:rgba(255,255,255,.8);max-width:500px;margin:0 auto .9rem}
.sh-stats{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.sh-stat{background:rgba(255,255,255,.15);color:#fff;font-size:.74rem;font-weight:700;padding:.28rem .85rem;border-radius:50px}
.submit-main{padding-bottom:2rem}
.submit-how-head{margin:1rem 0 .5rem}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0 0 2rem}
.how-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1.2rem;text-align:center;position:relative}
.how-num{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;width:26px;height:26px;border-radius:50%;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.how-icon{font-size:1.8rem;margin:.3rem 0 .6rem}
.how-title{font-size:.84rem;font-weight:800;margin-bottom:.3rem}
.how-desc{font-size:.74rem;color:var(--sub);line-height:1.5}
.artist-portal-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--accent-lo);border:1.5px solid rgba(232,54,93,.25);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.5rem}
.artist-portal-banner strong{display:block;font-size:.88rem;margin-bottom:.2rem}
.artist-portal-banner span{font-size:.78rem;color:var(--sub)}
.artist-portal-banner.guest{background:var(--surface2);border-color:var(--border)}
.artist-portal-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.submit-layout{display:grid;grid-template-columns:1fr 320px;gap:2rem;margin-top:.5rem}
.submit-form-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:2rem}
.sf-title{font-size:1rem;font-weight:800;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.sf-section{margin-bottom:1.5rem}
.sf-section-label{font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem;display:flex;align-items:center;gap:.4rem}
.submit-form-card .form-group label{text-transform:none;font-size:.75rem;letter-spacing:.3px}
.submit-form-card .form-group label .req{color:var(--accent)}
.form-hint{font-size:.7rem;color:var(--sub);margin-top:.3rem}
.form-hint a{color:var(--accent)}
.file-drop{border:2px dashed var(--border);border-radius:12px;padding:2rem;text-align:center;cursor:pointer;transition:all var(--dur);position:relative}
.file-drop-sm{padding:1.2rem}
.file-drop:hover,.file-drop.dragover{border-color:var(--accent);background:var(--accent-lo)}
.file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.fd-icon{font-size:2rem;margin-bottom:.6rem}
.fd-title{font-size:.88rem;font-weight:700;margin-bottom:.3rem}
.fd-sub{font-size:.74rem;color:var(--sub)}
.fd-max{margin-top:.4rem;font-size:.68rem}
.fd-formats{display:flex;gap:.3rem;justify-content:center;margin-top:.6rem;flex-wrap:wrap}
.fd-fmt{background:var(--surface2);border:1px solid var(--border);padding:2px 8px;border-radius:4px;font-size:.66rem;font-weight:700;color:var(--sub)}
.btn-submit-main{width:100%;background:linear-gradient(135deg,var(--accent),#c0183a);color:#fff;border:none;padding:.9rem;border-radius:11px;font-size:.95rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:opacity var(--dur),transform var(--dur);box-shadow:0 6px 20px rgba(232,54,93,.3);margin-top:.5rem;cursor:pointer}
.btn-submit-main:hover{opacity:.9;transform:translateY(-1px)}
.btn-submit-main svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.agree-box{background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:.9rem 1rem;margin-bottom:1rem;font-size:.78rem;color:var(--sub);line-height:1.6}
.agree-label{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;font-weight:400}
.agree-label input{width:auto;margin-top:2px;accent-color:var(--accent);flex-shrink:0}
.agree-label a{color:var(--accent)}
.submit-sidebar{}
.ss-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1.2rem;margin-bottom:1rem}
.ss-title{font-size:.7rem;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--sub);margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.req-item{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.8rem}
.req-item:last-child{margin-bottom:0}
.req-icon{width:32px;height:32px;border-radius:8px;background:var(--accent-lo);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.req-info h4{font-size:.8rem;font-weight:700;margin-bottom:.1rem}
.req-info p{font-size:.72rem;color:var(--sub);line-height:1.5}
.tip-item{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.6rem;font-size:.78rem;color:var(--sub);line-height:1.5}
.tip-item:last-child{margin-bottom:0}
.tip-item::before{content:'✓';color:var(--accent);font-weight:800;flex-shrink:0;margin-top:.05rem}
.ss-ad{background:linear-gradient(135deg,var(--accent),#c0183a);border-radius:14px;padding:1.2rem;text-align:center;margin-bottom:1rem;display:block;text-decoration:none;transition:opacity var(--dur)}
.ss-ad:hover{opacity:.92}
.ss-ad-label{font-size:.58rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.4rem}
.ss-ad h4{font-size:.9rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.ss-ad p{font-size:.74rem;color:rgba(255,255,255,.8);margin-bottom:.75rem}
.ss-ad-btn{display:inline-block;background:#fff;color:var(--accent);padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800}
.ss-help-text{font-size:.8rem;color:var(--sub);margin-bottom:.8rem;line-height:1.6}
.ss-help-link{display:block;text-align:center;background:var(--accent-lo);color:var(--accent);border:1.5px solid rgba(232,54,93,.2);padding:.55rem;border-radius:8px;font-size:.8rem;font-weight:700;text-decoration:none;transition:all var(--dur)}
.ss-help-link:hover{background:var(--accent);color:#fff}
.upload-processing{text-align:center;padding:1rem;font-size:.88rem;color:var(--sub);background:var(--surface2);border-radius:10px;margin-top:.5rem}
.type-tabs .type-tab{border:none;font-family:inherit}
@media(max-width:960px){.submit-layout{grid-template-columns:1fr}.how-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.how-grid{grid-template-columns:1fr 1fr}.submit-form-card{padding:1.2rem}.artist-portal-banner{flex-direction:column;align-items:flex-start}}
@media(max-width:400px){.how-grid{grid-template-columns:1fr}}

/* ARTIST AUTH & PORTAL */
.auth-hero,.ap-hero{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,var(--accent) 100%);padding:2.2rem 0;text-align:center;position:relative;overflow:hidden}
.auth-hero h1,.ap-hero h1{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:800;color:#fff;margin-bottom:.35rem}
.auth-hero p,.ap-hero p{font-size:.9rem;color:rgba(255,255,255,.8);max-width:520px;margin:0 auto}
.auth-main{padding:2rem 0 3rem;display:flex;justify-content:center}
.auth-main-wide .auth-card{max-width:640px}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:2rem}
.auth-card .form-group{margin-bottom:1rem}
.auth-card .form-group label{text-transform:none;font-size:.75rem}
.auth-links{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem;font-size:.82rem;color:var(--sub)}
.auth-links a{color:var(--accent);font-weight:700}
.auth-foot{margin-top:1rem;text-align:center;font-size:.78rem;color:var(--sub)}
.auth-foot a{color:var(--accent);font-weight:700}
.role-checks{display:flex;flex-wrap:wrap;gap:.6rem;margin:.5rem 0 1rem}
.role-check{font-size:.78rem;font-weight:600;color:var(--sub);display:flex;align-items:center;gap:.35rem;cursor:pointer}
.role-check input{accent-color:var(--accent)}
.usertype-select{width:100%}
.nav-artist-link{font-size:.76rem;font-weight:700;color:var(--sub);padding:.4rem .65rem;border-radius:7px;white-space:nowrap;transition:color var(--dur),background var(--dur)}
.nav-artist-link:hover{color:var(--accent);background:var(--accent-lo)}
.ap-main{padding-bottom:2.5rem}
.ap-layout{display:grid;grid-template-columns:240px 1fr;gap:1.5rem;align-items:start}
.ap-sidebar{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1rem;position:sticky;top:80px}
.ap-user-card{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.ap-avatar{width:48px;height:48px;border-radius:12px;object-fit:cover}
.ap-avatar-ph{background:var(--accent-lo);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.ap-user-name{font-size:.88rem;font-weight:800}
.ap-user-role{font-size:.7rem;color:var(--sub)}
.ap-nav{display:flex;flex-direction:column;gap:.2rem}
.ap-nav-link{display:block;padding:.5rem .65rem;border-radius:8px;font-size:.8rem;font-weight:700;color:var(--sub);text-decoration:none;transition:all var(--dur)}
.ap-nav-link:hover,.ap-nav-link.on{background:var(--accent-lo);color:var(--accent)}
.ap-nav-danger:hover{color:#ef4444;background:rgba(239,68,68,.1)}
.ap-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.2rem}
.ap-stat{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:1rem;text-align:center}
.ap-stat-n{display:block;font-size:1.6rem;font-weight:800;color:var(--accent)}
.ap-stat-l{font-size:.68rem;font-weight:700;text-transform:uppercase;color:var(--sub);letter-spacing:.5px}
.ap-panel{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1rem}
.ap-panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.ap-panel-head h2{font-size:1rem;font-weight:800}
.ap-table-wrap{overflow-x:auto}
.ap-table{width:100%;border-collapse:collapse;font-size:.8rem}
.ap-table th{text-align:left;padding:.55rem .6rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--sub);border-bottom:2px solid var(--border)}
.ap-table td{padding:.6rem;border-bottom:1px solid var(--border);vertical-align:middle}
.ap-badge{display:inline-block;padding:2px 8px;border-radius:50px;font-size:.65rem;font-weight:800}
.ap-badge-ok{background:rgba(16,185,129,.15);color:#10b981}
.ap-badge-pending{background:rgba(245,158,11,.15);color:#f59e0b}
.ap-actions{display:flex;gap:.35rem;flex-wrap:wrap}
.ap-btn-sm{padding:.3rem .65rem;border-radius:6px;font-size:.72rem;font-weight:700;background:var(--accent-lo);color:var(--accent);text-decoration:none}
.ap-btn-sm:hover{background:var(--accent);color:#fff}
.ap-btn-danger:hover{background:#ef4444;color:#fff}
.ap-empty{font-size:.86rem;color:var(--sub);padding:1rem 0}
.ap-empty a{color:var(--accent);font-weight:700}
.ap-profile-preview p{font-size:.84rem;color:var(--sub);line-height:1.7}
.ap-socials{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.ap-socials a{font-size:.74rem;font-weight:700;color:var(--accent)}
.req{color:var(--accent)}
@media(max-width:960px){.ap-layout{grid-template-columns:1fr}.ap-sidebar{position:static}.ap-stat-row{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:580px){.auth-card{padding:1.2rem}.ap-stat-row{grid-template-columns:1fr}}

/* REMIX — body.pg-remix-list / body.pg-remix-detail | Design: remix.php */
.remix-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2.2rem 0 2rem;position:relative;overflow:hidden}
.remix-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
.remix-hero::after{content:'';position:absolute;left:15%;bottom:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.remix-hero--detail{padding:2rem 0 1.6rem}
.remix-hero .rh-inner{position:relative;z-index:1;text-align:left}
.remix-hero .rh-inner h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin:0 0 .3rem;text-align:left}
.remix-hero .rh-inner p{font-size:.85rem;color:rgba(255,255,255,.75);margin:0 0 .9rem;max-width:none;text-align:left}
.remix-hero .rh-detail-badge{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.4rem}
.remix-hero .rh-meta{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-start}
.remix-hero .rh-stat{background:rgba(255,255,255,.15);color:#fff;font-size:.74rem;font-weight:700;padding:.28rem .75rem;border-radius:50px}
.rx-filters-bar{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:.65rem 1rem;margin:.5rem 0 1rem;display:flex;flex-direction:column;gap:.55rem}
.rx-filter-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.rx-filter-row--sort{justify-content:space-between}
.rx-filter-label{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);flex-shrink:0;min-width:44px}
.rx-fsep{height:1px;background:var(--border)}
.rx-filters-bar .pill{background:var(--surface2)}
.rx-result-meta{font-size:.78rem;color:var(--sub);margin-left:auto;white-space:nowrap}
.rx-result-meta strong{color:var(--text)}
.rx-result-meta a{color:var(--accent);font-size:.72rem;font-weight:700}
.remix-list{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.remix-card{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;transition:border-color var(--dur),box-shadow var(--dur);position:relative;text-decoration:none;color:var(--text)}
.remix-card:hover{border-color:rgba(232,54,93,.3);box-shadow:0 4px 20px var(--shadow)}
.rc-num{font-size:.75rem;font-weight:800;color:var(--sub);min-width:22px;text-align:center;flex-shrink:0}
.rc-thumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;position:relative;overflow:hidden}
.rc-thumb-photo{width:100%;height:100%;object-fit:cover;border-radius:10px}
.rc-thumb .rc-play{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur);border-radius:10px}
.rc-thumb .rc-play svg{width:16px;height:16px}
.remix-card:hover .rc-play{opacity:1}
.rc-info{flex:1;min-width:0}
.rc-title{font-size:.88rem;font-weight:700;margin-bottom:.12rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.rc-sub{font-size:.73rem;color:var(--sub)}
.rc-sub span{color:var(--text);font-weight:600}
.rc-new{background:var(--accent);color:#fff;font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:4px;letter-spacing:.4px;flex-shrink:0}
.rc-tags{display:flex;align-items:center;gap:.4rem;flex-shrink:0;flex-wrap:wrap}
.rc-genre{font-size:.64rem;font-weight:700;background:var(--surface2);color:var(--sub);padding:2px 8px;border-radius:5px;border:1px solid var(--border)}
.rc-bpm{font-size:.68rem;color:var(--sub);background:var(--surface2);padding:2px 7px;border-radius:5px;border:1px solid var(--border);font-weight:700}
.rc-dur{font-size:.72rem;color:var(--sub)}
.rc-dl{font-size:.72rem;color:var(--sub);display:flex;align-items:center;gap:.2rem}
.rc-dl svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0}
.rc-btn{display:flex;align-items:center;gap:.3rem;background:var(--accent);color:#fff;border:none;padding:.42rem .9rem;border-radius:8px;font-size:.75rem;font-weight:700;flex-shrink:0;transition:opacity var(--dur),transform var(--dur);white-space:nowrap;text-decoration:none}
.rc-btn:hover{opacity:.88;transform:translateY(-1px)}
.rc-btn svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.rx-mid-ad{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:var(--surface);border:1.5px dashed var(--border);border-radius:12px;text-decoration:none;color:var(--text);position:relative;transition:border-color var(--dur)}
.rx-mid-ad:hover{border-color:var(--accent)}
.rx-mid-ad::after{content:'AD';position:absolute;top:6px;right:8px;font-size:.52rem;font-weight:800;letter-spacing:1px;color:var(--sub);opacity:.5}
.rx-mid-ad-ico{font-size:1.4rem;flex-shrink:0}
.rx-mid-ad-title{font-size:.82rem;font-weight:700;margin-bottom:.1rem}
.rx-mid-ad-sub{font-size:.72rem;color:var(--sub)}
.rx-mid-ad-cta{font-size:.72rem;font-weight:700;color:var(--accent);white-space:nowrap;margin-left:auto}
.rx-empty{text-align:center;padding:3rem 1rem;color:var(--sub)}
.rx-empty-ico{font-size:2.5rem;margin-bottom:.8rem}
.rx-empty-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.remix-detail-layout{display:grid;grid-template-columns:1fr 300px;gap:2rem;margin-top:1rem;margin-bottom:2.5rem}
.rd-cover{width:100%;aspect-ratio:1;max-width:320px;border-radius:20px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.rd-cover-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem}
.rd-cover-photo{width:100%;height:100%;object-fit:cover}
.rd-cover-emoji{font-size:4rem}
.rd-cover-label{font-size:.72rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.7)}
.waveform{display:flex;align-items:center;gap:3px;height:32px;margin:0 auto}
.wave-bar{width:4px;border-radius:2px;background:rgba(255,255,255,.7);animation:rx-wave 1.2s ease-in-out infinite}
.wave-bar:nth-child(1){height:12px;animation-delay:0s}
.wave-bar:nth-child(2){height:22px;animation-delay:.15s}
.wave-bar:nth-child(3){height:28px;animation-delay:.3s}
.wave-bar:nth-child(4){height:18px;animation-delay:.45s}
.wave-bar:nth-child(5){height:32px;animation-delay:.6s}
.wave-bar:nth-child(6){height:22px;animation-delay:.45s}
.wave-bar:nth-child(7){height:28px;animation-delay:.3s}
.wave-bar:nth-child(8){height:16px;animation-delay:.15s}
.wave-bar:nth-child(9){height:10px;animation-delay:0s}
@keyframes rx-wave{0%,100%{transform:scaleY(.4);opacity:.6}50%{transform:scaleY(1);opacity:1}}
.rd-hero-section{display:flex;gap:2rem;align-items:start;margin-bottom:1.5rem}
.rd-badge{display:inline-flex;align-items:center;gap:.35rem;background:var(--accent-lo);color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:.3rem .8rem;border-radius:50px;margin-bottom:.6rem}
.rd-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.5px;margin-bottom:.25rem}
.rd-artist{font-size:.9rem;color:var(--sub);margin-bottom:.6rem}
.rd-artist a{color:var(--accent);font-weight:700}
.rd-original{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:var(--surface2);border:1px solid var(--border);padding:.5rem .85rem;border-radius:8px;margin-bottom:1rem;font-size:.8rem;color:var(--sub)}
.rd-original svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.rd-original a{color:var(--accent);font-weight:700}
.rd-stats{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.rd-stat .rv{font-size:1.1rem;font-weight:800;color:var(--text);letter-spacing:-.3px}
.rd-stat .rk{font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub)}
.bpm-bar{background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:.75rem 1rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:1rem}
.bpm-label{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);flex-shrink:0}
.bpm-value{font-size:1.3rem;font-weight:800;color:var(--accent);letter-spacing:-1px;flex-shrink:0}
.bpm-track{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.bpm-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),#ff6b35);transition:width .5s}
.rd-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.3rem}
.rd-chip{background:var(--surface2);border:1px solid var(--border);padding:.3rem .75rem;border-radius:6px;font-size:.74rem;font-weight:600;color:var(--sub)}
.rd-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.btn-dl-main{display:flex;align-items:center;gap:.5rem;background:var(--accent);color:#fff;border:none;padding:.75rem 1.6rem;border-radius:10px;font-size:.88rem;font-weight:800;box-shadow:0 6px 20px rgba(232,54,93,.35);transition:transform var(--dur),box-shadow var(--dur);text-decoration:none;cursor:pointer}
.btn-dl-main:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(232,54,93,.45)}
.btn-dl-main svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.btn-sec-outline{display:flex;align-items:center;gap:.4rem;background:var(--surface);border:1.5px solid var(--border);color:var(--sub);padding:.75rem 1.1rem;border-radius:10px;font-size:.84rem;font-weight:700;cursor:pointer;transition:all var(--dur);font-family:inherit}
.btn-sec-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-sec-outline svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.rd-section-label{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:.7rem}
.dl-options{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.2rem}
.dl-opt{display:flex;align-items:center;gap:.85rem;padding:.75rem 1rem;background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;transition:border-color var(--dur),background var(--dur);text-decoration:none;color:var(--text)}
.dl-opt:hover{border-color:var(--accent);background:var(--accent-lo)}
.dl-opt-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.dl-opt-icon--hq{background:linear-gradient(135deg,var(--accent),#c0183a)}
.dl-opt-icon--std{background:linear-gradient(135deg,#0ea5e9,#0284c7)}
.dl-opt-info{flex:1;min-width:0}
.dl-opt-info h4{font-size:.84rem;font-weight:700;margin-bottom:.1rem}
.dl-opt-info p{font-size:.72rem;color:var(--sub)}
.dl-opt-size{font-size:.72rem;color:var(--sub);flex-shrink:0;font-weight:600;margin-left:auto}
.dl-opt-arr{color:var(--sub);flex-shrink:0}
.dl-opt-arr svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
.rs-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1rem}
.rs-head{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub)}
.rs-body{padding:.6rem}
.rs-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .4rem;border-radius:9px;transition:background var(--dur);text-decoration:none;color:var(--text)}
.rs-item:hover{background:var(--surface2)}
.rs-thumb{width:44px;height:44px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;overflow:hidden}
.rs-thumb-photo{width:100%;height:100%;object-fit:cover}
.rs-info{flex:1;min-width:0}
.rs-info h4{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.1rem}
.rs-info p{font-size:.68rem;color:var(--sub)}
.rs-bpm{font-size:.68rem;font-weight:700;color:var(--sub);flex-shrink:0;background:var(--surface2);padding:2px 6px;border-radius:4px;border:1px solid var(--border)}
.rs-ad{background:linear-gradient(135deg,var(--accent),#c0183a);border-radius:14px;padding:1.1rem;text-align:center;margin-bottom:1rem;display:block;text-decoration:none;transition:opacity var(--dur)}
.rs-ad:hover{opacity:.92}
.rs-ad-label{font-size:.58rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.4rem}
.rs-ad h4{font-size:.88rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.rs-ad p{font-size:.72rem;color:rgba(255,255,255,.8);margin-bottom:.7rem}
.rs-ad-btn{display:inline-block;background:#fff;color:var(--accent);border:none;padding:.35rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800}
.rs-track-info{padding:.8rem 1rem}
.rs-track-info table{width:100%;border-collapse:collapse;font-size:.8rem}
.rs-track-info td{padding:.45rem .3rem;border-bottom:1px solid var(--border);vertical-align:top}
.rs-track-info tr:last-child td{border-bottom:none}
.rs-track-info td:first-child{color:var(--sub);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;width:45%}
.rs-track-info td:last-child{color:var(--text);font-weight:600}
.share-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.sh-btn{display:flex;align-items:center;gap:.3rem;padding:.38rem .85rem;border-radius:7px;font-size:.74rem;font-weight:700;color:#fff;border:none;cursor:pointer;transition:opacity var(--dur);font-family:inherit}
.sh-btn:hover{opacity:.88}
.sh-btn.fb{background:#1877f2}
.sh-btn.wa{background:#25d366}
.sh-btn.tw{background:#000}
.sh-btn.cp{background:var(--surface2);color:var(--sub);border:1.5px solid var(--border)}
.sh-btn.cp:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:960px){
  .remix-detail-layout{grid-template-columns:1fr}
  .rd-hero-section{flex-direction:column;align-items:center;text-align:center}
  .rd-stats,.rd-chips,.rd-actions,.rd-original{justify-content:center}
  .rd-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .rs-ad{grid-column:1/-1}
  .rc-dur,.rc-bpm{display:none}
}
@media(max-width:580px){
  .rd-cover{max-width:220px}
  .rd-title{font-size:1.4rem}
  .rd-sidebar{grid-template-columns:1fr}
  .rc-genre,.rc-dl{display:none}
  .remix-card{padding:.65rem .75rem;gap:.65rem}
  .rc-thumb{width:40px;height:40px}
  .rc-btn span{display:none}
  .rc-btn{padding:.42rem .6rem}
  .rx-filters-bar .rx-result-meta{width:100%;margin-left:0;margin-top:.25rem}
}
.rx-bottom-ad{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.4rem;margin-top:1rem;margin-bottom:.5rem;
  background:linear-gradient(135deg,var(--accent),#b01030);
  border-radius:12px;text-decoration:none;color:#fff;
  position:relative;overflow:hidden;transition:opacity var(--dur),transform var(--dur);
}
.rx-bottom-ad:hover{opacity:.95;transform:translateY(-1px)}
.rx-bottom-ad-glow{position:absolute;right:-20px;top:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.rx-bottom-ad-tag{position:absolute;top:6px;right:10px;font-size:.52rem;font-weight:800;letter-spacing:1px;color:rgba(255,255,255,.5)}
.rx-bottom-ad-text{position:relative;z-index:1;min-width:0}
.rx-bottom-ad-title{font-size:.9rem;font-weight:800;color:#fff;margin-bottom:.2rem}
.rx-bottom-ad-sub{font-size:.76rem;color:rgba(255,255,255,.8)}
.rx-bottom-ad-btn{
  position:relative;z-index:1;background:#fff;color:var(--accent);
  padding:.45rem 1.1rem;border-radius:8px;font-size:.78rem;font-weight:800;
  white-space:nowrap;flex-shrink:0;
}
@media(max-width:580px){
  .rx-bottom-ad{flex-direction:column;align-items:flex-start;text-align:left}
  .rx-bottom-ad-btn{align-self:stretch;text-align:center}
}

/* VIDEO — body.pg-video-list / body.pg-video-detail | Design: video.php */
.video-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2.2rem 0 2rem;position:relative;overflow:hidden}
.video-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.video-hero::after{content:'';position:absolute;left:20%;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.video-hero .vh-inner{position:relative;z-index:1;text-align:left}
.video-hero .vh-inner h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:.3rem}
.video-hero .vh-inner p{font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:.9rem}
.video-hero .vh-meta{display:flex;gap:.6rem;flex-wrap:wrap}
.video-hero .vh-stat{background:rgba(255,255,255,.15);color:#fff;font-size:.74rem;font-weight:700;padding:.28rem .75rem;border-radius:50px}
.vh-detail-badge{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.4rem}
.vd-filters-bar{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:.65rem 1rem;margin:.5rem 0 1rem;display:flex;flex-direction:column;gap:.55rem}
.vd-filter-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.vd-filter-label{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);flex-shrink:0;min-width:44px}
.vd-fsep{height:1px;background:var(--border)}
.vd-filters-bar .pill{background:var(--surface2)}
.vd-result-meta{margin-left:auto;font-size:.78rem;color:var(--sub);white-space:nowrap}
.vd-result-meta strong{color:var(--text)}
.vd-result-meta a{color:var(--accent);font-size:.72rem}
.vd-mid-ad{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:var(--surface);border:1.5px dashed var(--border);border-radius:12px;text-decoration:none;margin:.5rem 0;color:var(--text);transition:border-color var(--dur)}
.vd-mid-ad:hover{border-color:var(--accent)}
.vd-mid-ad-ico{font-size:1.4rem;flex-shrink:0}
.vd-mid-ad-title{font-size:.82rem;font-weight:700;margin-bottom:.1rem}
.vd-mid-ad-sub{font-size:.72rem;color:var(--sub)}
.vd-mid-ad-cta{font-size:.72rem;font-weight:700;color:var(--accent);white-space:nowrap;margin-left:auto}
.vd-empty{text-align:center;padding:3rem 1rem;color:var(--sub)}
.vd-empty-ico{font-size:2.5rem;margin-bottom:.8rem}
.vd-empty-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:.5rem}
.video-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;transition:transform var(--dur),border-color var(--dur),box-shadow var(--dur);cursor:pointer;text-decoration:none;color:var(--text);display:block}
.video-card:hover{transform:translateY(-4px);border-color:rgba(232,54,93,.3);box-shadow:0 10px 30px var(--shadow)}
.vc-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.vc-thumb-bg,.vc-thumb-img{width:100%;height:100%;display:block;object-fit:cover}
.vc-thumb-bg{display:flex;align-items:center;justify-content:center;font-size:2.5rem;transition:transform .4s}
.video-card:hover .vc-thumb-bg{transform:scale(1.05)}
.video-card:hover .vc-thumb-img{transform:scale(1.05)}
.vc-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);transition:background var(--dur);pointer-events:none}
.video-card:hover .vc-play{background:rgba(0,0,0,.5)}
.vc-play-btn{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:transform var(--dur)}
.video-card:hover .vc-play-btn{transform:scale(1.1)}
.vc-play-btn svg{width:18px;height:18px;fill:var(--accent);stroke:none;margin-left:2px}
.vc-dur{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);color:#fff;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:5px;backdrop-filter:blur(4px)}
.vc-new{position:absolute;top:8px;left:8px;background:var(--accent);color:#fff;font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:5px;letter-spacing:.4px}
.vc-info{padding:.8rem .9rem}
.vc-title{font-size:.88rem;font-weight:700;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-artist{font-size:.74rem;color:var(--sub);margin-bottom:.5rem}
.vc-meta{display:flex;align-items:center;justify-content:space-between;font-size:.68rem;color:var(--sub)}
.vc-genre{background:var(--surface2);border:1px solid var(--border);padding:2px 7px;border-radius:5px;font-weight:700}
.video-layout{display:grid;grid-template-columns:1fr 320px;gap:2rem;margin-top:1rem}
.video-player-wrap{background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/9;position:relative}
.video-player-wrap iframe{width:100%;height:100%;border:none;display:block}
.video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur)}
.video-overlay-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-overlay-shade{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.55),rgba(13,13,18,.75))}
.vo-play{position:relative;z-index:1;width:72px;height:72px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,0,0,.5);transition:transform var(--dur)}
.video-overlay:hover .vo-play{transform:scale(1.1)}
.vo-play svg{width:28px;height:28px;fill:var(--accent);stroke:none;margin-left:4px}
.vo-thumb-text{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:1;color:#fff;font-size:.82rem;font-weight:700;white-space:nowrap;background:rgba(0,0,0,.4);padding:.3rem .9rem;border-radius:50px;backdrop-filter:blur(4px)}
.video-info{margin-top:1rem}
.vi-artist{font-size:.9rem;color:var(--sub);margin-bottom:.8rem}
.vi-artist a{color:var(--accent);font-weight:700}
.vi-stats{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:1rem}
.vi-stat .sv{font-size:1rem;font-weight:800}
.vi-stat .sk{font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub)}
.vi-meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.vi-chip{background:var(--surface2);border:1px solid var(--border);padding:.28rem .75rem;border-radius:6px;font-size:.74rem;font-weight:600;color:var(--sub)}
.vi-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.video-info .vi-actions .btn-primary{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--accent);color:#fff;border:none;
  padding:.65rem 1.3rem;border-radius:9px;
  font-size:.82rem;font-weight:700;text-decoration:none;
  box-shadow:0 4px 14px rgba(232,54,93,.3);
  transition:opacity var(--dur),transform var(--dur);
}
.video-info .vi-actions .btn-primary:hover{opacity:.88;transform:translateY(-1px)}
.video-info .vi-actions .btn-primary svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.video-info .vi-actions .btn-outline{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--surface);border:1.5px solid var(--border);color:var(--sub);
  padding:.65rem 1.1rem;border-radius:9px;
  font-size:.82rem;font-weight:700;cursor:pointer;
  font-family:inherit;line-height:1.2;text-decoration:none;
  transition:border-color var(--dur),color var(--dur),background var(--dur);
}
.video-info .vi-actions .btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.video-info .vi-actions .btn-outline svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.video-sidebar .vs-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1rem}
.video-sidebar .vs-head{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub)}
.video-sidebar .vs-body{padding:.6rem}
.video-sidebar .vs-item{display:flex;align-items:center;gap:.65rem;padding:.5rem .4rem;border-radius:9px;text-decoration:none;color:var(--text);transition:background var(--dur)}
.video-sidebar .vs-item:hover{background:var(--surface2)}
.video-sidebar .vs-thumb{width:60px;min-width:60px;aspect-ratio:16/9;border-radius:7px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1rem;position:relative;background:#111}
.video-sidebar .vs-thumb-img{width:100%;height:100%;object-fit:cover}
.video-sidebar .vs-play-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);opacity:0;transition:opacity var(--dur);border-radius:7px}
.video-sidebar .vs-play-icon svg{width:14px;height:14px;fill:#fff;stroke:none}
.video-sidebar .vs-item:hover .vs-play-icon{opacity:1}
.video-sidebar .vs-info{flex:1;min-width:0}
.video-sidebar .vs-info h4{font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.1rem}
.video-sidebar .vs-info p{font-size:.68rem;color:var(--sub)}
.video-sidebar .vs-ad{background:linear-gradient(135deg,var(--accent),#c0183a);border-radius:14px;padding:1.1rem;text-align:center;margin-bottom:1rem;text-decoration:none;display:block;transition:opacity var(--dur)}
.video-sidebar .vs-ad:hover{opacity:.92}
.video-sidebar .vs-ad-label{font-size:.58rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.4rem}
.video-sidebar .vs-ad h4{font-size:.88rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.video-sidebar .vs-ad p{font-size:.73rem;color:rgba(255,255,255,.8);margin-bottom:.75rem}
.video-sidebar .vs-ad-btn{display:inline-block;background:#fff;color:var(--accent);border:none;padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800}
@media(max-width:960px){
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .video-layout{grid-template-columns:1fr}
}
@media(max-width:768px){
  .video-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .video-sidebar .vs-ad{grid-column:1/-1}
}
@media(max-width:580px){
  .video-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .vc-info{padding:.65rem .75rem}
  .vc-title{font-size:.82rem}
  .video-sidebar{grid-template-columns:1fr}
  .vd-filters-bar .vd-result-meta{width:100%;margin-left:0;margin-top:.25rem}
}
@media(max-width:400px){
  .video-grid{grid-template-columns:1fr}
}
.remix-card .rc-btn--muted{background:var(--surface2);color:var(--sub);border:1.5px solid var(--border)}
.remix-card .rc-btn--muted span{display:inline}

/* LYRICS — body.pg-lyrics-list / body.pg-lyrics-detail | Design: lyrics.php */
.lyrics-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2rem 0 1.8rem;position:relative;overflow:hidden}
.lyrics-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.lyrics-hero::after{content:'';position:absolute;left:20%;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.lh-inner{position:relative;z-index:1}
.lh-inner h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:.3rem}
.lh-inner p{font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:.9rem}
.lh-meta{display:flex;gap:.6rem;flex-wrap:wrap}
.lh-stat{background:rgba(255,255,255,.15);color:#fff;font-size:.74rem;font-weight:700;padding:.28rem .75rem;border-radius:50px}
.lh-detail-badge{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.4rem}
.lh-hero-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.lh-btn-primary{display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--accent);padding:.5rem 1.1rem;border-radius:8px;font-size:.8rem;font-weight:800;text-decoration:none;border:none;cursor:pointer;transition:opacity var(--dur)}
.lh-btn-primary:hover{opacity:.88}
.lh-btn-primary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lh-btn-ghost{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3);padding:.5rem 1.1rem;border-radius:8px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background var(--dur)}
.lh-btn-ghost:hover{background:rgba(255,255,255,.22)}
.lh-btn-ghost svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.ly-filters-bar{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:.65rem 1rem;margin:.5rem 0 1rem;display:flex;flex-direction:column;gap:.55rem}
.ly-filter-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.ly-filter-label{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);flex-shrink:0;min-width:44px}
.ly-fsep{height:1px;background:var(--border)}
.ly-filters-bar .pill{background:var(--surface2)}
.ly-result-meta{margin-left:auto;font-size:.78rem;color:var(--sub);white-space:nowrap}
.ly-result-meta strong{color:var(--text)}
.ly-result-meta a{color:var(--accent);font-size:.72rem}
.lyrics-list{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.5rem}
.lyric-row{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;transition:border-color var(--dur),box-shadow var(--dur);text-decoration:none;color:var(--text)}
.lyric-row:hover{border-color:rgba(232,54,93,.25);box-shadow:0 4px 16px var(--shadow)}
.lr-icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#c8b4e8,#9060c0);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
[data-theme="dark"] .lr-icon{background:linear-gradient(135deg,#2a1c3a,#1c1028)}
.lr-info{flex:1;min-width:0}
.lr-title{font-size:.88rem;font-weight:700;margin-bottom:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-artist{font-size:.74rem;color:var(--sub)}
.lr-tags{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.lr-genre{font-size:.66rem;font-weight:700;background:var(--surface2);color:var(--sub);padding:2px 8px;border-radius:5px;border:1px solid var(--border)}
.lr-views{font-size:.72rem;color:var(--sub)}
.lr-btn{display:flex;align-items:center;gap:.3rem;background:var(--accent-lo);color:var(--accent);border:1.5px solid rgba(232,54,93,.2);padding:.38rem .85rem;border-radius:8px;font-size:.74rem;font-weight:700;flex-shrink:0;transition:all var(--dur)}
.lyric-row:hover .lr-btn{background:var(--accent);color:#fff;border-color:var(--accent)}
.ly-mid-ad{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:var(--surface);border:1.5px dashed var(--border);border-radius:12px;text-decoration:none;margin:.35rem 0;color:var(--text);transition:border-color var(--dur);position:relative}
.ly-mid-ad:hover{border-color:var(--accent)}
.ly-mid-ad-ico{font-size:1.4rem;flex-shrink:0}
.ly-mid-ad-title{font-size:.82rem;font-weight:700;margin-bottom:.1rem}
.ly-mid-ad-sub{font-size:.72rem;color:var(--sub)}
.ly-mid-ad-cta{font-size:.72rem;font-weight:700;color:var(--accent);white-space:nowrap;margin-left:auto}
.ly-empty{text-align:center;padding:3rem 1rem;color:var(--sub)}
.ly-empty-ico{font-size:2.5rem;margin-bottom:.8rem}
.ly-empty-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.lyrics-layout{display:grid;grid-template-columns:1fr 300px;gap:2rem;margin-top:1rem}
.lyrics-text-wrap{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;overflow:hidden}
.ltw-header{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.2rem;border-bottom:1px solid var(--border)}
.ltw-header span{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub)}
.ltw-copy{background:var(--surface2);border:1.5px solid var(--border);color:var(--sub);padding:.3rem .75rem;border-radius:6px;font-size:.72rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;font-family:inherit;transition:all var(--dur)}
.ltw-copy:hover{border-color:var(--accent);color:var(--accent)}
.ltw-copy svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.lyrics-text{padding:1.5rem;font-size:.95rem;line-height:2.2;color:var(--text);white-space:pre-line}
.lyrics-image{display:block;width:100%;max-width:100%;height:auto;border-radius:10px;margin-bottom:1rem}
.lyrics-text-fallback{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);font-size:.88rem;line-height:1.9;color:var(--sub)}
.lyrics-empty-msg{color:var(--sub);font-size:.9rem;line-height:1.7}
.ltw-footer{padding:.7rem 1.2rem;border-top:1px solid var(--border);font-size:.72rem;color:var(--sub);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.lyrics-dl-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.lyrics-main .btn-dl{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent);color:#fff;border:none;padding:.65rem 1.3rem;border-radius:9px;font-size:.82rem;font-weight:700;text-decoration:none;transition:opacity var(--dur),transform var(--dur)}
.lyrics-main .btn-dl:hover{opacity:.88;transform:translateY(-1px)}
.lyrics-main .btn-dl svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lyrics-main .btn-sec{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1.5px solid var(--border);color:var(--sub);padding:.65rem 1.1rem;border-radius:9px;font-size:.82rem;font-weight:700;text-decoration:none;transition:all var(--dur)}
.lyrics-main .btn-sec:hover{border-color:var(--accent);color:var(--accent)}
.lyrics-main .btn-sec svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.lyrics-sidebar .ls-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1rem}
.lyrics-sidebar .ls-card-head{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub)}
.lyrics-sidebar .ls-card-body{padding:.75rem}
.lyrics-sidebar .ls-song{display:flex;align-items:center;gap:.65rem;padding:.5rem .4rem;border-radius:8px;text-decoration:none;color:var(--text);transition:background var(--dur)}
.lyrics-sidebar .ls-song:hover{background:var(--surface2)}
.lyrics-sidebar .ls-thumb{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,#c8b4e8,#9060c0);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
[data-theme="dark"] .lyrics-sidebar .ls-thumb{background:linear-gradient(135deg,#2a1c3a,#1c1028)}
.lyrics-sidebar .ls-info{flex:1;min-width:0}
.lyrics-sidebar .ls-info h4{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.1rem}
.lyrics-sidebar .ls-info p{font-size:.7rem;color:var(--sub)}
.lyrics-sidebar .ls-empty{font-size:.78rem;color:var(--sub);padding:.5rem;text-align:center}
.lyrics-sidebar .ls-artist-link{margin-top:.5rem;text-align:center}
.lyrics-sidebar .ls-artist-link a{font-size:.74rem;color:var(--accent);font-weight:700}
.lyrics-sidebar .ls-ad{background:linear-gradient(135deg,var(--accent),#c0183a);border-radius:14px;padding:1.1rem;text-align:center;margin-bottom:1rem;text-decoration:none;display:block;transition:opacity var(--dur)}
.lyrics-sidebar .ls-ad:hover{opacity:.92}
.lyrics-sidebar .ls-ad-label{font-size:.58rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.4rem}
.lyrics-sidebar .ls-ad h4{font-size:.88rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.lyrics-sidebar .ls-ad p{font-size:.73rem;color:rgba(255,255,255,.8);margin-bottom:.75rem}
.lyrics-sidebar .ls-ad-btn{display:inline-block;background:#fff;color:var(--accent);border:none;padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800}
@media(max-width:960px){
  .lyrics-layout{grid-template-columns:1fr}
  .lr-views{display:none}
  .ly-filters-bar .ly-result-meta{width:100%;margin-left:0;margin-top:.25rem}
}
@media(max-width:768px){
  .lyrics-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .lyrics-sidebar .ls-ad{grid-column:1/-1}
}
@media(max-width:580px){
  .lr-genre{display:none}
  .lyric-row{padding:.65rem .75rem;gap:.65rem}
  .lr-icon{width:38px;height:38px}
  .lyrics-sidebar{grid-template-columns:1fr}
}

/* TOP 10 — body.pg-top10-list / body.pg-top10-detail | Design: top10.php */
.chart-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2.5rem 0 2rem;position:relative;overflow:hidden}
.chart-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.chart-hero::after{content:'';position:absolute;left:20%;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.ch-inner{position:relative;z-index:1}
.ch-inner h1{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:.3rem}
.ch-inner p{font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:.8rem}
.ch-inner p strong{color:#fff}
.ch-meta{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.ch-stat{background:rgba(255,255,255,.15);color:#fff;font-size:.74rem;font-weight:700;padding:.28rem .75rem;border-radius:50px}
.ch-updated{font-size:.72rem;color:rgba(255,255,255,.65)}
.ch-detail-badge{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.4rem}
.ch-hero-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.ch-btn-primary{display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--accent);padding:.5rem 1.1rem;border-radius:8px;font-size:.8rem;font-weight:800;text-decoration:none;border:none;cursor:pointer;font-family:inherit}
.ch-btn-primary:hover{opacity:.88}
.ch-btn-primary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ch-btn-ghost{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3);padding:.5rem 1.1rem;border-radius:8px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none}
.ch-btn-ghost:hover{background:rgba(255,255,255,.22)}
.ch-btn-ghost svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.chart-hero .cr-move{font-weight:700}
.chart-hero .cr-move--up{color:#86efac}
.chart-hero .cr-move--down{color:#fecaca}
.chart-hero .cr-move--flat{color:rgba(255,255,255,.7)}
.chart-tabs{display:flex;gap:.5rem;flex-wrap:nowrap;overflow-x:auto;margin:1rem 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:.2rem}
.chart-tabs::-webkit-scrollbar{display:none}
.chart-tab{display:flex;align-items:center;gap:.35rem;background:var(--surface);border:1.5px solid var(--border);padding:.5rem 1rem;border-radius:9px;font-size:.8rem;font-weight:700;color:var(--sub);text-decoration:none;transition:all var(--dur);flex-shrink:0;white-space:nowrap}
.chart-tab:hover,.chart-tab.active{background:var(--accent-lo);border-color:var(--accent);color:var(--accent)}
.chart-fallback-note{font-size:.78rem;color:var(--sub);margin:0 0 .5rem;padding:.5rem .75rem;background:var(--surface2);border-radius:8px;border:1px solid var(--border)}
.chart-layout{display:grid;grid-template-columns:1fr 280px;gap:2rem;margin-top:1rem}
.chart-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.chart-title{font-size:1.1rem;font-weight:800}
.chart-desc{font-size:.76rem;color:var(--sub)}
.chart-date{font-size:.72rem;color:var(--sub);flex-shrink:0;white-space:nowrap}
.t10-ad-banner{margin-bottom:1rem}
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1.5rem}
.podium-item{border-radius:16px;padding:1.2rem;text-align:center;position:relative;overflow:hidden;border:1.5px solid var(--border);text-decoration:none;color:var(--text);transition:border-color var(--dur),box-shadow var(--dur)}
.podium-item:hover{border-color:rgba(232,54,93,.25);box-shadow:0 4px 16px var(--shadow)}
.podium-item.p1{border-color:rgba(255,215,0,.3);background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(255,215,0,.03))}
.podium-item.p2{border-color:rgba(192,192,192,.3);background:linear-gradient(135deg,rgba(192,192,192,.07),rgba(192,192,192,.02))}
.podium-item.p3{border-color:rgba(205,127,50,.3);background:linear-gradient(135deg,rgba(205,127,50,.07),rgba(205,127,50,.02))}
.pd-crown{font-size:1.5rem;margin-bottom:.4rem}
.pd-rank{font-size:2.5rem;font-weight:800;line-height:1;margin-bottom:.4rem}
.p1 .pd-rank{color:gold;text-shadow:0 2px 8px rgba(255,215,0,.4)}
.p2 .pd-rank{color:silver}
.p3 .pd-rank{color:#cd7f32}
.pd-thumb{width:56px;height:56px;border-radius:12px;margin:0 auto .6rem;display:flex;align-items:center;justify-content:center;font-size:1.4rem;overflow:hidden}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-title{font-size:.85rem;font-weight:800;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-artist{font-size:.72rem;color:var(--sub);margin-bottom:.5rem}
.pd-stats{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.pd-stat{font-size:.65rem;font-weight:700;background:var(--surface2);padding:2px 6px;border-radius:4px;color:var(--sub)}
.pd-btn{display:block;margin-top:.7rem;background:var(--accent);color:#fff;padding:.38rem .7rem;border-radius:7px;font-size:.72rem;font-weight:700;text-align:center}
.pd-body{flex:1;min-width:0}
.chart-rows{display:flex;flex-direction:column;gap:.35rem}
.chart-row{display:flex;align-items:center;gap:.9rem;padding:.75rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;transition:border-color var(--dur),box-shadow var(--dur);text-decoration:none;color:var(--text)}
.chart-row:hover{border-color:rgba(232,54,93,.25);box-shadow:0 4px 16px var(--shadow)}
.cr-rank{font-size:1.1rem;font-weight:800;min-width:28px;text-align:center;flex-shrink:0}
.cr-rank.top3{color:var(--accent)}
.cr-change{min-width:36px;text-align:center;flex-shrink:0;font-size:.75rem;font-weight:700}
.cr-move--up{color:#10b981}
.cr-move--down{color:var(--accent)}
.cr-move--flat{color:var(--sub)}
.cr-thumb{width:44px;height:44px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;overflow:hidden}
.cr-thumb img{width:100%;height:100%;object-fit:cover}
.cr-info{flex:1;min-width:0;overflow:hidden}
.cr-title{font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.4rem;margin-bottom:.12rem}
.cr-artist{font-size:.73rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-badge-hot{background:var(--accent);color:#fff;font-size:.55rem;font-weight:800;padding:1px 5px;border-radius:3px;flex-shrink:0}
.cr-badge-new{background:#10b981;color:#fff;font-size:.55rem;font-weight:800;padding:1px 5px;border-radius:3px;flex-shrink:0}
.cr-stats{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;flex-shrink:0}
.cr-dl{font-size:.72rem;font-weight:700;color:var(--text)}
.cr-wk{font-size:.65rem;color:var(--sub)}
.cr-btn{display:flex;align-items:center;gap:.3rem;background:var(--surface2);color:var(--sub);border:1.5px solid var(--border);padding:.35rem .65rem;border-radius:7px;font-size:.7rem;font-weight:700;flex-shrink:0;white-space:nowrap;transition:all var(--dur)}
.chart-row:hover .cr-btn{background:var(--accent);color:#fff;border-color:var(--accent)}
.cr-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
.chart-sidebar .cs-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1rem}
.chart-sidebar .cs-head{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub)}
.chart-sidebar .cs-body{padding:.6rem}
.chart-sidebar .cs-item{display:flex;align-items:center;gap:.65rem;padding:.5rem .4rem;border-radius:9px;text-decoration:none;color:var(--text);transition:background var(--dur)}
.chart-sidebar .cs-item:hover{background:var(--surface2)}
.chart-sidebar .cs-num{font-size:.82rem;font-weight:800;color:var(--accent);min-width:20px;text-align:center;flex-shrink:0}
.chart-sidebar .cs-thumb{width:38px;height:38px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.chart-sidebar .cs-info{flex:1;min-width:0}
.chart-sidebar .cs-info h4{font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.1rem}
.chart-sidebar .cs-info p{font-size:.68rem;color:var(--sub)}
.chart-sidebar .cs-empty{font-size:.78rem;color:var(--sub);padding:.5rem;text-align:center}
.chart-sidebar .cs-ad{background:linear-gradient(135deg,var(--accent),#c0183a);border-radius:14px;padding:1.1rem;text-align:center;margin-bottom:1rem;text-decoration:none;display:block;transition:opacity var(--dur)}
.chart-sidebar .cs-ad:hover{opacity:.92}
.chart-sidebar .cs-ad-label{font-size:.58rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.4rem}
.chart-sidebar .cs-ad h4{font-size:.88rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.chart-sidebar .cs-ad p{font-size:.73rem;color:rgba(255,255,255,.8);margin-bottom:.75rem}
.chart-sidebar .cs-ad-btn{display:inline-block;background:#fff;color:var(--accent);border:none;padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800}
.cs-other-charts{padding:.8rem!important}
.cs-other-link{display:flex;align-items:center;justify-content:space-between;padding:.5rem .4rem;border-radius:8px;font-size:.8rem;font-weight:700;color:var(--sub);text-decoration:none;transition:background var(--dur)}
.cs-other-link:hover{background:var(--surface2);color:var(--accent)}
.cs-other-arrow{color:var(--accent)}
.t10-empty{text-align:center;padding:3rem 1rem;color:var(--sub)}
.t10-empty-ico{font-size:2.5rem;margin-bottom:.8rem}
.t10-empty-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.t10-detail-card{display:flex;gap:1.5rem;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:1.25rem;flex-wrap:wrap}
.t10-detail-cover{width:160px;min-width:160px;aspect-ratio:1;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative;overflow:hidden}
.t10-detail-cover img{width:100%;height:100%;object-fit:cover}
.t10-detail-rank{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.65);color:#fff;font-size:.9rem;font-weight:800;padding:.25rem .55rem;border-radius:6px}
.t10-detail-info{flex:1;min-width:220px}
.t10-detail-info h2{font-size:1.4rem;font-weight:800;margin-bottom:.25rem}
.t10-detail-artist{font-size:.9rem;color:var(--sub);margin-bottom:1rem}
.t10-detail-artist a{color:var(--accent);font-weight:700}
.t10-chart-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}
.t10-cs{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.5rem;text-align:center}
.t10-cs-val{display:block;font-size:1rem;font-weight:800}
.t10-cs-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sub)}
.t10-song-stats{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.t10-detail-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.t10-detail-layout .chart-main .btn-dl{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent);color:#fff;border:none;padding:.65rem 1.3rem;border-radius:9px;font-size:.82rem;font-weight:700;cursor:pointer;font-family:inherit}
.t10-detail-layout .chart-main .btn-dl svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
.t10-detail-layout .chart-main .btn-sec{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1.5px solid var(--border);color:var(--sub);padding:.65rem 1.1rem;border-radius:9px;font-size:.82rem;font-weight:700;text-decoration:none}
.t10-detail-layout .chart-main .btn-sec:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:960px){
  .chart-layout{grid-template-columns:1fr}
  .cr-stats{display:none}
  .t10-chart-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .chart-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .chart-sidebar .cs-ad{grid-column:1/-1}
  .podium{gap:.5rem}
  .podium-item{padding:.9rem .7rem}
}
@media(max-width:580px){
  .chart-date{display:none}
  .podium{grid-template-columns:1fr;gap:.4rem;margin-bottom:1rem}
  .podium-item{display:flex;flex-direction:row;align-items:center;gap:.75rem;padding:.7rem .9rem;text-align:left;border-radius:12px}
  .pd-crown{display:none}
  .pd-rank{font-size:1.1rem;min-width:32px;margin-bottom:0}
  .pd-thumb{width:46px;height:46px;margin:0;font-size:1.2rem}
  .pd-btn{display:block;width:100%;text-align:center;margin-top:.4rem}
  .lr-genre,.cr-stats{display:none}
  .chart-row{padding:.6rem .75rem;gap:.5rem}
  .cr-btn{display:none}
  .chart-sidebar{grid-template-columns:1fr}
  .t10-detail-card{flex-direction:column}
  .t10-detail-cover{width:100%;max-width:200px;margin:0 auto}
}

/* ARTISTS — body.pg-artists-list / body.pg-artist-detail | Design: artists.php */
.artists-hero{background:linear-gradient(135deg,var(--accent) 0%,#b01030 100%);padding:2rem 0 1.8rem;position:relative;overflow:hidden}
.artists-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.artists-hero::after{content:'';position:absolute;left:20%;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.ah-hero-inner{position:relative;z-index:1}
.ah-hero-inner h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:.3rem}
.ah-hero-inner p{font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:.9rem}
.ah-hero-inner .h-meta{display:flex;gap:.6rem;flex-wrap:wrap}
.ar-filters-bar{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:.65rem 1rem;margin:.5rem 0 1rem;display:flex;flex-direction:column;gap:.55rem}
.ar-filter-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.ar-filter-label{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);flex-shrink:0;min-width:44px}
.ar-fsep{height:1px;background:var(--border)}
.ar-filters-bar .pill{background:var(--surface2)}
.ar-result-meta{margin-left:auto;font-size:.78rem;color:var(--sub);white-space:nowrap}
.ar-result-meta strong{color:var(--text)}
.ar-result-meta a{color:var(--accent);font-size:.72rem}
.artists-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:.5rem}
.artist-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:1.4rem 1rem 1.1rem;text-align:center;text-decoration:none;color:var(--text);display:block;transition:transform var(--dur),border-color var(--dur),box-shadow var(--dur)}
.artist-card:hover{transform:translateY(-4px);border-color:rgba(232,54,93,.3);box-shadow:0 10px 30px var(--shadow)}
.ac-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ff6b35);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;color:#fff;margin:0 auto .9rem;box-shadow:0 6px 20px rgba(232,54,93,.3);overflow:hidden}
.ac-avatar img{width:100%;height:100%;object-fit:cover}
.ac-name{font-size:.95rem;font-weight:800;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center;gap:.25rem}
.ac-genre{display:inline-block;font-size:.66rem;font-weight:700;background:var(--surface2);color:var(--sub);padding:2px 9px;border-radius:5px;border:1px solid var(--border);margin-bottom:.7rem}
.ac-stats{display:flex;justify-content:center;gap:1.2rem}
.ac-stat{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.ac-stat .av{font-size:.88rem;font-weight:800;color:var(--text)}
.ac-stat .ak{font-size:.6rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--sub)}
.verified{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#10b981;border-radius:50%;flex-shrink:0}
.verified svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.verified-sm{width:14px;height:14px}
.verified-sm svg{width:8px;height:8px}
.ar-mid-ad{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:var(--surface);border:1.5px dashed var(--border);border-radius:12px;text-decoration:none;margin:.5rem 0;color:var(--text);transition:border-color var(--dur)}
.ar-mid-ad:hover{border-color:var(--accent)}
.ar-mid-ad--bottom{margin-top:1rem}
.ar-mid-ad-ico{font-size:1.4rem;flex-shrink:0}
.ar-mid-ad-title{font-size:.82rem;font-weight:700;margin-bottom:.1rem}
.ar-mid-ad-sub{font-size:.72rem;color:var(--sub)}
.ar-mid-ad-cta{font-size:.72rem;font-weight:700;color:var(--accent);white-space:nowrap;margin-left:auto}
.ar-empty{text-align:center;padding:3rem 1rem;color:var(--sub)}
.ar-empty-ico{font-size:2.5rem;margin-bottom:.8rem}
.ar-empty h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.artist-hero{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:start;padding:1.5rem 0 2rem}
.ah-avatar{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ff6b35);display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:800;color:#fff;flex-shrink:0;box-shadow:0 10px 32px rgba(232,54,93,.35);overflow:hidden}
.ah-avatar img{width:100%;height:100%;object-fit:cover}
.ah-genre{display:inline-block;font-size:.68rem;font-weight:800;background:var(--accent-lo);color:var(--accent);padding:.25rem .75rem;border-radius:50px;margin-bottom:.5rem;letter-spacing:.5px;text-transform:uppercase}
.ah-name{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:-.8px;margin-bottom:.3rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.ah-since{font-size:.78rem;color:var(--sub);margin-bottom:.9rem}
.ah-stats{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1rem}
.ah-stat .av{font-size:1.1rem;font-weight:800;color:var(--text);letter-spacing:-.3px}
.ah-stat .ak{font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub)}
.ah-bio{font-size:.84rem;color:var(--sub);line-height:1.7;max-width:500px;margin-bottom:1.1rem}
.ah-social{display:flex;gap:.5rem;flex-wrap:wrap}
.ah-soc{display:flex;align-items:center;gap:.3rem;background:var(--surface2);border:1.5px solid var(--border);color:var(--sub);padding:.35rem .8rem;border-radius:7px;font-size:.74rem;font-weight:700;text-decoration:none;transition:all var(--dur)}
.ah-soc:hover{border-color:var(--accent);color:var(--accent)}
.artist-songs-head{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:.8rem}
.songs-table-wrap{overflow-x:auto;border:1.5px solid var(--border);border-radius:12px;background:var(--surface)}
.songs-table{width:100%;border-collapse:collapse}
.songs-table th{font-size:.65rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);padding:.6rem .8rem;text-align:left;border-bottom:2px solid var(--border);background:var(--surface2)}
.songs-table tr:not(:last-child) td{border-bottom:1px solid var(--border)}
.songs-table td{padding:.7rem .8rem;font-size:.84rem;vertical-align:middle}
.songs-table .st-num{color:var(--sub);font-weight:800;width:30px}
.songs-table .st-title{font-weight:700}
.songs-table .st-title a{color:inherit;text-decoration:none}
.songs-table .st-title a:hover{color:var(--accent)}
.songs-table .st-genre{font-size:.68rem;background:var(--surface2);color:var(--sub);padding:2px 7px;border-radius:5px;border:1px solid var(--border);white-space:nowrap}
.songs-table .st-dur,.songs-table .st-dl{color:var(--sub);font-size:.78rem;white-space:nowrap}
.st-dl-btn{display:inline-flex;align-items:center;gap:.25rem;background:var(--accent);color:#fff;border:none;padding:.35rem .75rem;border-radius:7px;font-size:.72rem;font-weight:700;text-decoration:none;transition:opacity var(--dur);white-space:nowrap}
.st-dl-btn:hover{opacity:.88}
.st-dl-btn svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
.artist-songs-more{margin-top:.8rem;text-align:center}
.artist-songs-more a{font-size:.78rem;color:var(--accent);font-weight:700}
.artist-media-section{margin:2rem 0 1rem}
.artist-media-title{font-size:.95rem;font-weight:800;margin-bottom:.75rem}
.artist-media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem}
.artist-media-card{display:flex;align-items:center;gap:.65rem;padding:.65rem;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);transition:border-color var(--dur)}
.artist-media-card:hover{border-color:rgba(232,54,93,.25)}
.artist-media-card img,.artist-media-card>span{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface2);font-size:1.1rem}
.artist-media-card h4{font-size:.8rem;font-weight:700;margin-bottom:.1rem}
.artist-media-card p{font-size:.68rem;color:var(--sub)}
@media(max-width:960px){
  .artists-grid{grid-template-columns:repeat(2,1fr)}
  .ar-filters-bar .ar-result-meta{width:100%;margin-left:0;margin-top:.25rem}
}
@media(max-width:768px){
  .artist-hero{grid-template-columns:1fr;text-align:center;gap:1rem;padding:1rem 0 1.5rem}
  .ah-avatar{margin:0 auto;width:90px;height:90px;font-size:2.2rem}
  .ah-stats{justify-content:center}
  .ah-social{justify-content:center}
  .ah-bio{margin:0 auto 1rem;font-size:.8rem}
  .ah-name{justify-content:center}
  .artist-media-grid{grid-template-columns:1fr}
}
@media(max-width:580px){
  .artists-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .ac-avatar{width:56px;height:56px;font-size:1.3rem}
  .artist-card{padding:1rem .75rem}
  .songs-table{font-size:.78rem}
  .st-dl-btn{padding:.3rem .55rem;font-size:.66rem}
}

/* SEARCH — body.pg-search | Design: search.php */
body.pg-search .search-hero{padding:2.5rem 0 2rem;text-align:center}
body.pg-search .search-hero h1{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;margin-bottom:1.2rem;letter-spacing:-.5px}
body.pg-search .search-hero h1 span{color:var(--accent)}
body.pg-search .big-search{position:relative;max-width:680px;margin:0 auto}
body.pg-search .big-search input{width:100%;padding:1rem 3.5rem 1rem 1.4rem;border-radius:50px;border:2px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:1rem;outline:none;box-shadow:0 4px 24px rgba(0,0,0,.08);transition:border-color var(--dur),box-shadow var(--dur)}
body.pg-search .big-search input:focus{border-color:var(--accent);box-shadow:0 6px 32px rgba(232,54,93,.12)}
body.pg-search .big-search input::placeholder{color:var(--sub)}
body.pg-search .big-search .bs-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:var(--accent);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity var(--dur)}
body.pg-search .big-search .bs-btn:hover{opacity:.88}
body.pg-search .big-search .bs-btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
body.pg-search .popular-searches{margin-top:1.2rem;display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap}
body.pg-search .ps-label{font-size:.72rem;font-weight:700;color:var(--sub);letter-spacing:.5px}
body.pg-search .ps-tag{background:var(--surface);border:1.5px solid var(--border);color:var(--sub);padding:.25rem .75rem;border-radius:50px;font-size:.74rem;font-weight:600;text-decoration:none;transition:all var(--dur)}
body.pg-search .ps-tag:hover{border-color:var(--accent);color:var(--accent)}
body.pg-search .filter-tabs{display:flex;gap:.35rem;margin:1.2rem 0 1rem;border-bottom:2px solid var(--border);padding-bottom:0;flex-wrap:wrap}
body.pg-search .ft-btn{background:none;border:none;padding:.55rem 1rem;font-size:.82rem;font-weight:700;color:var(--sub);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--dur);white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem;text-decoration:none}
body.pg-search .ft-btn:hover{color:var(--text)}
body.pg-search .ft-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
body.pg-search .ft-count{background:var(--surface2);color:var(--sub);font-size:.65rem;font-weight:800;padding:1px 6px;border-radius:10px}
body.pg-search .ft-btn.active .ft-count{background:var(--accent-lo);color:var(--accent)}
body.pg-search .results-info{font-size:.82rem;color:var(--sub);margin-bottom:1rem}
body.pg-search .results-info strong{color:var(--text)}
body.pg-search .search-block{margin-bottom:1.2rem}
body.pg-search .search-block-label{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:.6rem}
body.pg-search .result-list{display:flex;flex-direction:column;gap:.35rem}
body.pg-search .song-result{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;transition:border-color var(--dur),box-shadow var(--dur)}
body.pg-search .song-result:hover{border-color:rgba(232,54,93,.25);box-shadow:0 4px 16px var(--shadow)}
body.pg-search .sr-thumb{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,#c8b4e8,#9060c0);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;position:relative;overflow:hidden;text-decoration:none;color:inherit}
[data-theme="dark"] body.pg-search .sr-thumb{background:linear-gradient(135deg,#2a1c3a,#1c1028)}
body.pg-search .sr-thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px}
body.pg-search .sr-play{position:absolute;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur);border-radius:10px}
body.pg-search .sr-play svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
body.pg-search .song-result:hover .sr-play{opacity:1}
body.pg-search .sr-info{flex:1;min-width:0}
body.pg-search .sr-title{font-size:.88rem;font-weight:700;margin-bottom:.15rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
body.pg-search .sr-title a{color:inherit;text-decoration:none}
body.pg-search .sr-title a:hover{color:var(--accent)}
body.pg-search .sr-artist{font-size:.74rem;color:var(--sub)}
body.pg-search .sr-artist a{color:var(--sub);text-decoration:none}
body.pg-search .sr-artist a:hover{color:var(--accent)}
body.pg-search .sr-new{background:var(--accent);color:#fff;font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:4px}
body.pg-search .sr-hl{background:rgba(232,54,93,.2);color:var(--accent);border-radius:3px;padding:0 2px}
body.pg-search .sr-tags{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
body.pg-search .sr-genre{font-size:.66rem;font-weight:700;background:var(--surface2);color:var(--sub);padding:2px 8px;border-radius:5px;border:1px solid var(--border)}
body.pg-search .sr-dur{font-size:.72rem;color:var(--sub)}
body.pg-search .sr-dl-btn{display:flex;align-items:center;gap:.3rem;background:var(--accent);color:#fff;border:none;padding:.4rem .85rem;border-radius:8px;font-size:.74rem;font-weight:700;flex-shrink:0;text-decoration:none;transition:opacity var(--dur)}
body.pg-search .sr-dl-btn:hover{opacity:.88}
body.pg-search .sr-dl-btn svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
body.pg-search .artist-result{display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;transition:border-color var(--dur),box-shadow var(--dur);text-decoration:none;color:var(--text)}
body.pg-search .artist-result:hover{border-color:rgba(232,54,93,.25);box-shadow:0 4px 16px var(--shadow)}
body.pg-search .sar-avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ff6b35);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:#fff;flex-shrink:0;overflow:hidden}
body.pg-search .sar-avatar img{width:100%;height:100%;object-fit:cover}
body.pg-search .sar-info{flex:1;min-width:0}
body.pg-search .sar-info h4{font-size:.9rem;font-weight:700;margin-bottom:.15rem}
body.pg-search .sar-info p{font-size:.74rem;color:var(--sub)}
body.pg-search .sar-badge{background:var(--surface2);border:1px solid var(--border);color:var(--sub);font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:6px;flex-shrink:0}
body.pg-search .sar-arrow{color:var(--sub);flex-shrink:0}
body.pg-search .sar-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
body.pg-search .no-results{text-align:center;padding:3.5rem 1rem}
body.pg-search .no-results .nr-icon{font-size:3rem;margin-bottom:1rem}
body.pg-search .no-results h3{font-size:1.1rem;font-weight:800;margin-bottom:.4rem}
body.pg-search .no-results p{font-size:.84rem;color:var(--sub);margin-bottom:1.2rem}
body.pg-search .no-results .suggestions{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
body.pg-search .no-results .sug-tag{background:var(--surface);border:1.5px solid var(--border);color:var(--sub);padding:.3rem .8rem;border-radius:50px;font-size:.76rem;font-weight:600;text-decoration:none;transition:all var(--dur)}
body.pg-search .no-results .sug-tag:hover{border-color:var(--accent);color:var(--accent)}
body.pg-search .search-empty{text-align:center;padding:2rem 0 2.5rem}
body.pg-search .search-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem;max-width:700px;margin:0 auto}
body.pg-search .search-browse-card{display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;font-size:.82rem;font-weight:700;color:var(--sub);text-decoration:none;transition:all var(--dur)}
body.pg-search .search-browse-card:hover{border-color:var(--accent);color:var(--accent)}
body.pg-search .sbc-ico{font-size:1.1rem;flex-shrink:0}
@media(max-width:960px){body.pg-search .sr-dur{display:none}}
@media(max-width:580px){
  body.pg-search .sr-genre{display:none}
  body.pg-search .sr-dl-btn span{display:none}
  body.pg-search .sr-dl-btn{padding:.4rem .6rem}
  body.pg-search .song-result{padding:.65rem .75rem;gap:.65rem}
  body.pg-search .sr-thumb{width:40px;height:40px}
  body.pg-search .filter-tabs{overflow-x:auto;padding-bottom:.5rem;flex-wrap:nowrap}
  body.pg-search .sar-badge{display:none}
}

/* HOME — body.pg-home | Design: index.php */
body.pg-home .stats-band{
  background:linear-gradient(135deg,var(--accent) 0%,#c0183a 100%);
  border:none;border-radius:0;padding:2rem 0;margin:1rem 0;
}
body.pg-home .stats-band-inner{
  max-width:1160px;margin:0 auto;padding:0 1.25rem;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1rem;text-align:center;
}
body.pg-home .stat-num{
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:#fff;
  letter-spacing:-1px;line-height:1;margin-bottom:.3rem;
}
body.pg-home .stat-num span{color:rgba(255,255,255,.7);font-size:.6em}
body.pg-home .stat-label{font-size:.78rem;color:rgba(255,255,255,.75);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
body.pg-home .c-thumb img,body.pg-home .tr-thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
body.pg-home .news-card-link{text-decoration:none;color:inherit;display:block}
body.pg-home .news-thumb.has-img{background-size:cover;background-position:center}
@media(max-width:580px){
  body.pg-home .stats-band-inner{grid-template-columns:repeat(2,1fr)}
  body.pg-home .stat-num{font-size:1.8rem}
}

/* NEWS — body.pg-news-list / body.pg-news-detail | Design: industry-news.php */
body.pg-news-list .ns-body-cats,body.pg-news-detail .ns-body-cats{padding:.8rem}
body.pg-news-list .ns-cat-link,body.pg-news-detail .ns-cat-link{
  display:flex;justify-content:space-between;align-items:center;
  padding:.42rem .4rem;border-radius:7px;font-size:.8rem;font-weight:600;
  color:var(--sub);text-decoration:none;transition:background var(--dur);
}
body.pg-news-list .ns-cat-link:hover,body.pg-news-detail .ns-cat-link:hover{background:var(--surface2)}
body.pg-news-list .ns-cat-count,body.pg-news-detail .ns-cat-count{
  background:var(--surface2);padding:1px 7px;border-radius:10px;font-size:.68rem;font-weight:700;
}
body.pg-news-list .ns-body-events,body.pg-news-detail .ns-body-events{padding:.8rem}
body.pg-news-list .ns-event-link,body.pg-news-detail .ns-event-link{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .4rem;border-radius:8px;
  text-decoration:none;color:var(--text);transition:background var(--dur);
}
body.pg-news-list .ns-event-link:hover,body.pg-news-detail .ns-event-link:hover{background:var(--surface2)}
body.pg-news-list .ns-event-ico{font-size:1.2rem;flex-shrink:0}
body.pg-news-list .ns-event-title{font-size:.8rem;font-weight:700}
body.pg-news-list .ns-event-sub{font-size:.68rem;color:var(--sub)}
body.pg-news-list .news-empty{text-align:center;padding:2.5rem 1rem;color:var(--sub);font-size:.88rem}
body.pg-news-list .news-main-col{min-width:0}
body.pg-news-list .news-pagination{
  justify-content:center;flex-wrap:wrap;
  padding:1.5rem 0 1rem;width:100%;max-width:100%;
}
body.pg-news-detail .article-layout{margin-top:1rem}
body.pg-news-detail .article-main{min-width:0}
body.pg-news-detail .ns-ad-submit{text-decoration:none}
body.pg-news-list .ns-ad .ns-ad-btn,
body.pg-news-detail .ns-ad .ns-ad-btn,
body.pg-news-list .ns-ad button,
body.pg-news-detail .ns-ad button{
  display:inline-block;background:#fff;color:var(--accent);
  padding:.38rem .9rem;border-radius:7px;font-size:.74rem;font-weight:800;
  border:none;cursor:pointer;
}

/* ADVERTISING — body.pg-advertising | Design: advertising.php */
body.pg-advertising .adv-hero .ah-inner{
  display:block;text-align:center;
  grid-template-columns:unset;gap:0;max-width:720px;margin:0 auto;
}
body.pg-advertising .adv-hero .badge{
  position:static;top:auto;right:auto;left:auto;
  display:inline-flex;margin:0 auto .9rem;
}
body.pg-advertising .adv-hero .ah-inner p{margin-left:auto;margin-right:auto}
body.pg-advertising .adv-form-card .btn-submit{
  background:linear-gradient(135deg,var(--accent),#c0183a);
  box-shadow:0 6px 20px rgba(232,54,93,.3);
}
body.pg-advertising .adv-main .stats-band{margin:2rem 0}
