/* =========================================================
   YOHAN RECORDS — MODERN DESIGN SYSTEM v2
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root{
  --bg: #07070c;
  --bg-elev-1: #0e0e18;
  --bg-elev-2: #14141f;
  --surface: rgba(255,255,255,0.045);
  --surface-strong: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.09);
  --text: #f4f3fb;
  --text-dim: #a9a7c2;
  --text-faint: #75738f;
  --accent: #d4af6a;
  --accent-2: #8c6bff;
  --accent-3: #ff6b8b;
  --like: #ff5577;
  --gradient-brand: linear-gradient(135deg, var(--accent-2), var(--accent-3) 55%, var(--accent));
  --shadow-lg: 0 20px 50px -22px rgba(0,0,0,0.6);
  --shadow-sm: 0 6px 18px -10px rgba(0,0,0,0.5);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --sidebar-w: 220px;
  --header-h: 60px;
  --player-h: 72px;
  --ease: cubic-bezier(.22,1,.36,1);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:2.75rem; --sp-8:3.75rem;

  --fs-xs:.74rem; --fs-sm:.82rem; --fs-base:.92rem; --fs-md:1rem;
  --fs-lg:1.12rem; --fs-xl: clamp(1.3rem,2vw,1.6rem); --fs-hero: clamp(1.55rem,3.4vw,2.35rem);
}

body.light-theme{
  --bg: #f5f4f9;
  --bg-elev-1: #ffffff;
  --bg-elev-2: #ffffff;
  --surface: rgba(15,15,25,0.035);
  --surface-strong: rgba(15,15,25,0.06);
  --border: rgba(15,15,25,0.09);
  --text: #17161f;
  --text-dim: #55536b;
  --text-faint: #8b899e;
  --shadow-lg: 0 20px 50px -24px rgba(20,15,50,0.22);
  --shadow-sm: 0 6px 18px -12px rgba(20,15,50,0.18);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); }

body{
  margin:0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--text);
  transition: background .3s var(--ease), color .3s var(--ease);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before{
  content:"";
  position: fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1000px 560px at 85% -10%, rgba(140,107,255,.20), transparent 60%),
    radial-gradient(820px 480px at -5% 10%, rgba(212,175,106,.14), transparent 55%),
    radial-gradient(650px 460px at 50% 120%, rgba(255,107,139,.09), transparent 60%);
}
body.light-theme::before{
  background:
    radial-gradient(1000px 560px at 85% -10%, rgba(140,107,255,.13), transparent 60%),
    radial-gradient(820px 480px at -5% 10%, rgba(212,175,106,.13), transparent 55%),
    radial-gradient(650px 460px at 50% 120%, rgba(255,107,139,.07), transparent 60%);
}

h1,h2,h3,h4,h5{ font-family:'Playfair Display', serif; letter-spacing:.2px; margin:0; }
a{ text-decoration:none; color:inherit; }
p{ color: var(--text-dim); line-height:1.65; font-size: var(--fs-base); }
::selection{ background: var(--accent-2); color:#fff; }
img{ max-width:100%; }
button{ font-family:inherit; }

.glow{ text-shadow: 0 0 20px rgba(140,107,255,.32), 0 0 50px rgba(212,175,106,.14); }
.glow2{ background: var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--accent-2); color:#fff;
  padding:.6rem 1.1rem; border-radius:0 0 10px 0; z-index:999; font-weight:700; font-size:.85rem;
}
.skip-link:focus{ left:0; }

.wrap{ max-width:1280px; margin:0 auto; padding:0 1.5rem; }
.wrap-narrow{ max-width:960px; margin:0 auto; padding:0 1.5rem; }

/* -------------------- Header -------------------- */
.header{
  position: fixed; top:0; left:0; right:0; height: var(--header-h);
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  height:100%; max-width:1600px; margin:0 auto; padding:0 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.header-brand{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.header-brand .logo{ height:32px; width:32px; object-fit:cover; border-radius:9px; box-shadow: var(--shadow-sm); flex:none; }
.header-brand .website-name{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.05rem; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-actions{ display:flex; align-items:center; gap:.6rem; flex:none; }

.theme-toggle{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background: var(--surface); color: var(--text); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: transform .3s var(--ease), background .3s;
}
.theme-toggle:hover{ transform: rotate(18deg) scale(1.06); background: var(--surface-strong); }

/* -------------------- Layout -------------------- */
.content{
  margin-left: var(--sidebar-w);
  padding-top: var(--header-h);
  padding-bottom: calc(var(--player-h) + 2rem);
  min-height: 100vh;
}
.section{ max-width:1240px; margin:0 auto; padding: 0 1.5rem 3rem; }
.section:first-of-type{ padding-top: .5rem; }

/* -------------------- Hero -------------------- */
.hero{
  position: relative; padding: 3.4rem 1.5rem 3rem; text-align:center; overflow:hidden; isolation:isolate;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(560px 260px at 50% 0%, rgba(140,107,255,.16), transparent 70%);
}
.hero-logo{
  width:76px; height:76px; object-fit:cover; border-radius:22px; margin-bottom:1.1rem;
  box-shadow: var(--shadow-lg); border:1px solid var(--border);
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.hero h1{ font-size: var(--fs-hero); margin: 0 0 .65rem; font-weight:700; }
.hero p{ max-width: 560px; margin: 0 auto 1.4rem; font-size: .96rem; }

.btn-prime{
  display:inline-block; background: var(--gradient-brand); border:none; color:#fff !important; font-weight:700;
  padding:.62rem 1.5rem; border-radius: 100px; letter-spacing:.2px; font-size:.88rem; cursor:pointer;
  box-shadow: 0 12px 26px -12px rgba(140,107,255,.5); transition: transform .22s var(--ease), box-shadow .22s;
}
.btn-prime:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(140,107,255,.6); color:#fff; }
.btn-prime.btn-lg{ padding:.75rem 1.8rem; font-size:.94rem; }
.btn-ghost{
  display:inline-block; padding:.6rem 1.4rem; border-radius:100px; font-weight:700; font-size:.86rem;
  border:1px solid var(--border); color: var(--text); background: var(--surface);
}

/* -------------------- Section titles -------------------- */
.section-title{
  font-size: var(--fs-xl); text-align:center; margin-bottom: .5rem; font-weight:700; position:relative;
}
.section-title::after{
  content:""; display:block; width:52px; height:3px; margin:.55rem auto 0; border-radius:3px;
  background: var(--gradient-brand);
}
.section-sub{ text-align:center; color: var(--text-faint); margin-bottom:1.6rem; font-size:.86rem; }
.section-sub-lead{
  font-size:.98rem; color: var(--text-dim); max-width:34rem; margin:0 auto 1.8rem; padding-top:.2rem;
}

/* -------------------- Quick links (home) -------------------- */
.quicklinks{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; max-width:880px; margin:0 auto 3rem; }
.quicklink{
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
  padding:1.3rem 1rem; border-radius: var(--radius-lg); background: var(--surface); border:1px solid var(--border);
  transition: transform .25s var(--ease), border-color .25s;
}
.quicklink:hover{ transform: translateY(-4px); border-color: rgba(140,107,255,.35); }
.quicklink i{ font-size:1.3rem; }
.quicklink span{ font-weight:700; font-size:.86rem; }

/* -------------------- Track / Media Cards -------------------- */
.track-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(215px,1fr)); gap:1.1rem; }
.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position:relative;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(140,107,255,.32); }
.card-media{ position:relative; }
.card-img-top{ width:100%; aspect-ratio: 1/1; object-fit:cover; display:block; background: var(--bg-elev-2); }
.card-body{ padding:.85rem .95rem .95rem; }
.card-title{ font-size:.92rem; margin:0 0 .1rem; font-weight:700; line-height:1.32; }
.card-subtitle{ font-size:.76rem; color: var(--text-faint); margin:0 0 .7rem; font-weight:600; }

.track-play-row{
  display:flex; align-items:center; gap:.6rem; background: var(--surface-strong);
  border-radius: 100px; padding:.32rem .5rem .32rem .32rem;
}
.play-btn{
  flex:none; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background: var(--gradient-brand); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; transition: transform .2s var(--ease);
}
.play-btn:hover{ transform: scale(1.08); }
.track-mini-meta{ flex:1; min-width:0; }
.track-mini-title{ font-size:.68rem; font-weight:700; color: var(--text-faint); letter-spacing:.3px; }
.track-mini-bar{ height:3px; border-radius:4px; background: var(--border); overflow:hidden; margin-top:4px; }
.track-mini-bar i{ display:block; height:100%; width:0%; background: var(--gradient-brand); }

.like-btn{
  flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); cursor:pointer;
  background: var(--surface); color: var(--text-faint); display:flex; align-items:center; justify-content:center;
  font-size:.78rem; transition: transform .2s var(--ease), color .2s, border-color .2s, background .2s;
}
.like-btn:hover{ transform: scale(1.08); color: var(--like); border-color: rgba(255,85,119,.4); }
.like-btn.liked{ color:#fff; background: var(--like); border-color: var(--like); }
.like-btn.liked i{ font-weight:900; }
.like-btn.pop{ animation: likePop .38s var(--ease); }
@keyframes likePop{ 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} }

.card-top-actions{ position:absolute; top:.55rem; right:.55rem; z-index:2; }
.card-top-actions .like-btn{ background: rgba(10,10,16,.55); border-color: rgba(255,255,255,.18); color:#fff; backdrop-filter: blur(4px); }
.card-top-actions .like-btn.liked{ background: var(--like); border-color: var(--like); }

audio{ display:none; }

/* -------------------- Album accordion -------------------- */
.album-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:1.2rem; align-items:start; }
.album-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  overflow:hidden; cursor:pointer; transition: box-shadow .3s var(--ease), border-color .3s; grid-column: span 1;
}
.album-card:hover{ border-color: rgba(212,175,106,.4); }
.album-card.active{ grid-column: 1 / -1; box-shadow: var(--shadow-lg); }
.album-cover{ position:relative; aspect-ratio: 16/9; overflow:hidden; }
.album-card:not(.active) .album-cover{ aspect-ratio: 1/1; }
.album-cover img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.album-card:hover .album-cover img{ transform: scale(1.04); }
.album-cover::after{
  content:"\f04b"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; inset:auto auto 12px 12px;
  width:38px; height:38px; border-radius:50%; background: var(--gradient-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.75rem; box-shadow: var(--shadow-sm);
}
.album-info{ padding:.9rem 1rem; }
.album-title{ font-size:.98rem; font-weight:700; }
.album-title + .album-title{ font-size:.78rem; color: var(--text-faint); font-weight:600; margin-top:2px; }
.album-artist{ font-size:.78rem; color: var(--text-dim); margin:.3rem 0 0; font-weight:600; }
.album-details{ display:none; border-top:1px solid var(--border); background: var(--bg-elev-2); }
.album-card.active .album-details{ display:block; animation: fadeIn .3s var(--ease); }
@keyframes fadeIn{ from{opacity:0; transform: translateY(-5px);} to{opacity:1; transform:none;} }
.tracklist{ list-style:none; margin:0; padding:.35rem; }
.tracklist li{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius: var(--radius-sm);
  transition: background .2s;
}
.tracklist li:hover{ background: var(--surface); }
.track-num{ font-size:.74rem; color: var(--text-faint); width:1.3rem; text-align:center; flex:none; }
.track-name{ flex:1; min-width:0; font-size:.86rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* -------------------- Gallery -------------------- */
.gallery-grid{ column-count: 4; column-gap: .9rem; }
@media (max-width: 1200px){ .gallery-grid{ column-count:3; } }
@media (max-width: 820px){ .gallery-grid{ column-count:2; } }
@media (max-width: 520px){ .gallery-grid{ column-count:1; } }
.gallery-item{
  break-inside: avoid; margin-bottom:.9rem; border-radius: var(--radius-md); overflow:hidden;
  position:relative; border:1px solid var(--border); cursor: zoom-in; background: var(--bg-elev-2);
}
.gallery-item img{ width:100%; display:block; transition: transform .5s var(--ease); -webkit-user-drag:none; user-select:none; }
.gallery-item:hover img{ transform: scale(1.04); }
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:.65rem .75rem;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
  color:#fff; font-size:.74rem; font-weight:600; opacity:0; transform: translateY(6px);
  transition: all .3s var(--ease); display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.gallery-item:hover .cap{ opacity:1; transform:none; }
.gallery-item .cap span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery-item .protect-mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition: opacity .3s;
}
.gallery-item:hover .protect-mark{ opacity:1; }
.gallery-item .protect-mark span{
  transform: rotate(-28deg); font-size:.66rem; letter-spacing:2px; color: rgba(255,255,255,.5);
  font-weight:800; text-transform:uppercase; white-space:nowrap;
}

/* Lightbox */
.lb-overlay{
  position: fixed; inset:0; background: rgba(4,4,8,.92); backdrop-filter: blur(6px); z-index:200;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .3s;
}
.lb-overlay.show{ opacity:1; pointer-events:auto; }
.lb-overlay img{ max-width:88vw; max-height:80vh; border-radius:12px; box-shadow: var(--shadow-lg); user-select:none; -webkit-user-drag:none; pointer-events:none; }
.lb-close, .lb-nav{
  position:absolute; background: var(--surface-strong); border:1px solid var(--border); color:#fff;
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lb-close{ top:20px; right:22px; }
.lb-nav.prev{ left:16px; top:50%; transform: translateY(-50%); }
.lb-nav.next{ right:16px; top:50%; transform: translateY(-50%); }
.lb-cap{ position:absolute; bottom:24px; left:0; right:0; text-align:center; color:#e8e6f5; font-size:.82rem; }
.lb-watermark{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  color: rgba(255,255,255,.06); font-weight:800; font-size:2.1rem; letter-spacing:5px; transform: rotate(-20deg);
}

/* -------------------- Video grid -------------------- */
.video-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap:1.2rem; }
.video-card{
  border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border); background: var(--surface);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); position:relative;
}
.video-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.video-card video{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#000; }
.remix-card-body{ padding:.85rem 1rem .95rem; display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.remix-card-body .txt{ min-width:0; }
.remix-card-body .card-title{ font-size:.9rem; }
.remix-card-body .card-subtitle{ margin-bottom:0; }

/* -------------------- Software cards -------------------- */
.software-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap:1.1rem; }
.software-card{
  background: var(--surface) !important; border:1px solid var(--border) !important; border-radius: var(--radius-lg);
  padding: 1.4rem 1.2rem; text-align:center; color: var(--text) !important;
}
.software-card i{ font-size:1.55rem; margin-bottom:.6rem; background: var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.software-card .card-title{ color: var(--text) !important; font-size:.94rem; }
.software-card .card-text{ color: var(--text-dim) !important; font-size:.82rem; margin:0; }
.badge-soon{
  display:inline-block; margin-top:.8rem; padding:.28rem .75rem; border-radius:100px; font-size:.66rem;
  font-weight:800; letter-spacing:.5px; text-transform:uppercase; background: var(--surface-strong); color: var(--accent);
  border:1px solid var(--border);
}

/* -------------------- Utility / effects -------------------- */
#stars-container, #particle2, #particles-js{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; }
.star{ position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:.6; animation: twinkle 3s infinite ease-in-out; }
@keyframes twinkle{ 0%,100%{opacity:.15;} 50%{opacity:.9;} }
body.light-theme .star{ background:#6a63a8; }

.reveal{ opacity:0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

.privacy-shield{
  position: fixed; inset:0; z-index: 500; background: var(--bg);
  display:flex; align-items:center; justify-content:center; text-align:center;
  opacity:0; pointer-events:none; transition: opacity .25s;
}
.privacy-shield.show{ opacity:1; pointer-events:auto; }
.privacy-shield .msg{ max-width:340px; }
.privacy-shield i{ font-size:1.8rem; color: var(--accent-2); margin-bottom:.7rem; }
.privacy-shield p{ font-size:.9rem; }

/* Touch devices have no hover: keep gallery captions + like buttons visible */
@media (hover: none){
  .gallery-item .cap{ opacity:1; transform:none; }
  .gallery-item .protect-mark{ opacity:.7; }
}
.gallery-item .cap .like-btn{ background: rgba(10,10,16,.55); border-color: rgba(255,255,255,.2); color:#fff; }
.gallery-item .cap .like-btn.liked{ background: var(--like); border-color: var(--like); }

/* =========================================================
   ORIGINAL LOOK, INHERITED: hero image, effects, motions, sidebar
   ========================================================= */
@keyframes floatInOut{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} }
@keyframes fadeInDown{ from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:none;} }
@keyframes fadeInUp{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:none;} }
/* stars: full-screen twinkle layer behind everything, as in the original */
#stars-container{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; opacity:1; }
.star{ opacity:.8; }
body.light-theme #stars-container{ opacity:.35; }

/* hero: original background image with a readability overlay */
.hero{
  background: url('../assets/images/thumbnail/3music3.jpg') center / cover no-repeat;
  min-height: 30vh; display:flex; flex-direction:column; justify-content:center;
  padding: 2.6rem 1.25rem; color:#fff;
}
.hero::after{
  background: linear-gradient(180deg, rgba(7,7,12,.55), rgba(7,7,12,.72) 70%, var(--bg));
  z-index:0;
}
.hero-home{ min-height: 46vh; }
.hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero #particles-js, .hero #particle2{
  position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:1;
}
.hero-logo{ animation: floatInOut 4s ease-in-out infinite; will-change: transform; margin-bottom:.8rem; }
.hero-logo-wide{ width:min(320px, 70vw); height:auto; border-radius:0; border:none; box-shadow:none; background:none; }
.hero h1{ animation: fadeInUp 1.4s ease-in-out both; }
/* A single, restrained entrance — no ongoing pulse or neon flicker. The
   shadow is fixed (not animated) and only there to keep the title legible
   over the photo behind it; the underline is the one accent touch. */
.hero h1.glow{
  animation: fadeInUp 1.1s ease-out both;
  color:#fff; font-weight:700; letter-spacing:.2px; font-size: clamp(1.7rem, 4.6vw, 2.85rem);
  text-shadow: 0 2px 4px rgba(0,0,0,.35), 0 10px 32px rgba(0,0,0,.4);
  position:relative; display:inline-block;
}
.hero h1.glow::after{
  content:""; position:absolute; left:50%; bottom:-.65rem; transform:translateX(-50%);
  width:2.75rem; height:2px; border-radius:2px; background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
  opacity:.75;
}
.hero p{ color:#fff; animation: fadeInUp 1.8s ease-in-out both; max-width:640px; }
.hero .btn-prime{ animation: fadeInUp 2s ease-in-out both; }
.hero-social{ display:flex; gap:.6rem; margin-top:1.3rem; animation: fadeInUp 2.2s ease-in-out both; }
.hero-social .social-icon{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color:#fff; }

/* cards: clean glass surface, consistent in both themes (a refined,
   single-tone replacement for the original site's multi-color card gradient) */
.card{
  background: linear-gradient(165deg, var(--surface-strong), var(--surface) 60%);
  border-color: var(--border);
}
.card:hover{ border-color: rgba(140,107,255,.4); }

@media (prefers-reduced-motion: reduce){
  .hero-logo, .hero h1, .hero p, .hero-social, .star{ animation:none !important; }
}

/* =========================================================
   v4 FOUNDATION: scalable units, header, sidebar, layout, player, footer
   ========================================================= */
:root{
  --sidebar-w:15rem; --sidebar-rail:4.6rem; --sidebar-gap:.75rem;
  --header-h:3.75rem; --player-h:4.6rem; --maxw:1240px;
  --sb-bg:rgba(16,16,28,.74); --sb-solid:#12121e; --sb-border:rgba(255,255,255,.08);
  --sb-hover:rgba(255,255,255,.06); --sb-ico:rgba(255,255,255,.06);
  --sb-active-bg:linear-gradient(90deg,rgba(140,107,255,.24),rgba(255,107,139,.1));
  --sb-shadow:0 24px 50px -22px rgba(0,0,0,.7);
}
body.light-theme{
  --sb-bg:rgba(255,255,255,.84); --sb-solid:#ffffff; --sb-border:rgba(20,15,50,.09);
  --sb-hover:rgba(20,15,50,.05); --sb-ico:rgba(20,15,50,.05);
  --sb-active-bg:linear-gradient(90deg,rgba(140,107,255,.18),rgba(255,107,139,.08));
  --sb-shadow:0 22px 46px -24px rgba(20,15,50,.3);
}
body{ --sb-space:calc(var(--sidebar-w) + var(--sidebar-gap) * 2); }
@media (min-width:992px){ body.sb-collapsed{ --sidebar-w:var(--sidebar-rail); } }
body.no-scroll{ overflow:hidden; }

/* ---------- Header ---------- */
.header{ height:var(--header-h); transition:box-shadow .3s; }
.header.scrolled{ box-shadow:0 12px 30px -20px rgba(0,0,0,.65); }
.header-inner{ max-width:none; padding:0 clamp(.75rem,2vw,1.5rem); }
.header-brand{ gap:.65rem; }
.icon-btn, .theme-toggle, .menu-icon{
  width:2.35rem; height:2.35rem; border-radius:.75rem; border:1px solid var(--border);
  background:var(--surface); color:var(--text); display:grid; place-items:center; cursor:pointer;
  font-size:.95rem; transition:background .2s, transform .25s var(--ease); padding:0;
}
.icon-btn:hover, .theme-toggle:hover, .menu-icon:hover{ background:var(--surface-strong); transform:translateY(-1px); }
.theme-toggle:hover{ transform:rotate(14deg); }
.header-brand .logo{ height:2.1rem; width:2.1rem; }
.btn-mini{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 1rem; border-radius:100px; font-weight:700;
  font-size:.8rem; background:var(--gradient-brand); color:#fff !important; box-shadow:0 10px 22px -12px rgba(140,107,255,.7);
  transition:transform .2s var(--ease);
}
.btn-mini:hover{ transform:translateY(-2px); }

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed; z-index:55; top:calc(var(--header-h) + var(--sidebar-gap)); left:var(--sidebar-gap);
  bottom:var(--sidebar-gap); width:var(--sidebar-w); display:flex; flex-direction:column; padding:0;
  background:var(--sb-bg); border:1px solid var(--sb-border); border-radius:1.25rem; box-shadow:var(--sb-shadow);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  overflow:hidden; transition:width .3s var(--ease), transform .35s var(--ease);
}
.sb-head{ display:none; align-items:center; justify-content:space-between; padding:.9rem .9rem .3rem 1rem; }
.sb-head .website-name{ font-family:'Playfair Display',serif; font-weight:700; }
.sb-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; padding:.6rem .7rem .5rem; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.sb-label{
  margin:0; padding:.95rem .75rem .4rem; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--text-faint); white-space:nowrap;
}
.sb-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; }
.sb-item{ position:relative; }
.sb-link{
  width:100%; display:flex; align-items:center; gap:.75rem; padding:.42rem .55rem; border:0; background:transparent;
  border-radius:.85rem; color:var(--text-dim); font:600 .88rem 'Manrope',sans-serif; cursor:pointer; position:relative;
  text-align:left; transition:background .2s, color .2s;
}
.sb-ico{
  flex:none; width:2.15rem; height:2.15rem; border-radius:.7rem; background:var(--sb-ico); display:grid; place-items:center;
  font-size:.85rem; color:var(--accent-2); transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.sb-link:hover{ background:var(--sb-hover); color:var(--text); }
.sb-link:hover .sb-ico{ transform:scale(1.08) rotate(-4deg); }
.sb-link:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }
.sb-item.active > .sb-link{ background:var(--sb-active-bg); color:var(--text); }
.sb-item.active > .sb-link .sb-ico{ background:var(--gradient-brand); color:#fff; box-shadow:0 10px 20px -10px rgba(140,107,255,.9); }
.sb-item.active > .sb-link::before{
  content:""; position:absolute; left:-.7rem; top:22%; bottom:22%; width:3px; border-radius:0 3px 3px 0; background:var(--gradient-brand);
}
.sb-text{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-caret{ font-size:.6rem; color:var(--text-faint); transition:transform .3s var(--ease); }
.has-sub.open > .sb-link .sb-caret{ transform:rotate(180deg); }
.sb-sub{ list-style:none; margin:0; padding:0 0 0 1.05rem; max-height:0; overflow:hidden; transition:max-height .32s var(--ease); position:relative; }
.has-sub.open > .sb-sub{ max-height:14rem; }
.sb-sub::before{ content:""; position:absolute; left:1.75rem; top:.15rem; bottom:.55rem; width:1px; background:var(--sb-border); }
.sb-sub a{
  position:relative; display:flex; align-items:center; margin:.12rem 0; padding:.42rem .6rem .42rem 2.3rem; border-radius:.65rem;
  font-size:.82rem; font-weight:600; color:var(--text-faint); transition:background .2s, color .2s;
}
.sb-sub a::before{ content:""; position:absolute; left:1.45rem; width:.36rem; height:.36rem; border-radius:50%; background:var(--border); transition:background .2s, transform .2s; }
.sb-sub a:hover{ background:var(--sb-hover); color:var(--text); }
.sb-sub a:hover::before{ transform:scale(1.4); }
.sb-sub a.active{ color:var(--text); background:var(--sb-hover); }
.sb-sub a.active::before{ background:var(--gradient-brand); }
.sb-foot{ padding:.7rem; border-top:1px solid var(--sb-border); }
.sb-cta{
  display:flex; align-items:center; gap:.7rem; padding:.7rem .75rem; border-radius:1rem; background:var(--gradient-brand); color:#fff;
  font-weight:800; font-size:.84rem; box-shadow:0 14px 26px -14px rgba(140,107,255,.85); transition:transform .25s var(--ease);
}
.sb-cta:hover{ transform:translateY(-2px); }
.sb-cta i{ font-size:1rem; width:2.15rem; text-align:center; flex:none; }
.sb-cta small{ display:block; font-weight:500; opacity:.85; font-size:.7rem; margin-top:1px; }

@media (min-width:992px){
  body.sb-collapsed .sidebar{ overflow:visible; }
  body.sb-collapsed .sb-scroll{ overflow:visible; padding-inline:.6rem; }
  body.sb-collapsed .sb-label{ height:1px; padding:0; margin:.7rem .5rem; background:var(--sb-border); font-size:0; overflow:hidden; }
  body.sb-collapsed .sb-text, body.sb-collapsed .sb-caret, body.sb-collapsed .sb-cta span{ display:none; }
  body.sb-collapsed .sb-link{ justify-content:center; padding:.4rem; }
  body.sb-collapsed .sb-item.active > .sb-link::before{ left:-.6rem; }
  body.sb-collapsed .sb-foot{ padding:.6rem; }
  body.sb-collapsed .sb-cta{ justify-content:center; padding:.6rem; }
  body.sb-collapsed .sb-cta i{ width:auto; }
  body.sb-collapsed .sb-link[data-tip]:not(.is-parent):hover::after{
    content:attr(data-tip); position:absolute; left:calc(100% + .8rem); top:50%; transform:translateY(-50%); white-space:nowrap;
    background:var(--sb-solid); color:var(--text); border:1px solid var(--sb-border); padding:.35rem .7rem; border-radius:.55rem;
    font-size:.78rem; font-weight:700; box-shadow:var(--shadow-sm); pointer-events:none; z-index:5;
  }
  body.sb-collapsed .sb-sub{
    position:absolute; left:100%; top:0; margin-left:.65rem; min-width:10.5rem; padding:.4rem; max-height:none; overflow:visible; display:none;
    background:var(--sb-solid); border:1px solid var(--sb-border); border-radius:.9rem; box-shadow:var(--sb-shadow); z-index:6;
  }
  body.sb-collapsed .sb-sub::before{ left:-.7rem; top:0; bottom:0; width:.7rem; background:transparent; }
  body.sb-collapsed .has-sub:hover > .sb-sub, body.sb-collapsed .has-sub:focus-within > .sb-sub{ display:block; }
  body.sb-collapsed .sb-sub a{ padding-left:1.7rem; }
  body.sb-collapsed .sb-sub a::before{ left:.75rem; }
}

.sidebar-backdrop{ position:fixed; inset:0; z-index:75; background:rgba(3,3,8,.6); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .3s; }
.sidebar-backdrop.show{ opacity:1; pointer-events:auto; }

/* ---------- Layout ---------- */
.content{ margin-left:var(--sb-space); margin-right:0; padding-bottom:calc(var(--player-h) + 2.5rem); transition:margin-left .3s var(--ease); }
.section{ max-width:var(--maxw); padding-inline:clamp(1rem,2.4vw,2rem); }
.footer{ margin-left:var(--sb-space); transition:margin-left .3s var(--ease); }

/* ---------- Player ---------- */
.player-bar{
  position:fixed; left:var(--sb-space); right:0; bottom:0; z-index:70; min-height:var(--player-h);
  display:flex; align-items:center; gap:1rem; padding:.5rem clamp(.8rem,1.6vw,1.3rem) calc(.5rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg-elev-1) 90%,transparent); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-top:1px solid var(--border); transform:translateY(120%); transition:transform .4s var(--ease), left .3s var(--ease);
}
.player-bar.active{ transform:none; }
.pb-track{ display:flex; align-items:center; gap:.7rem; min-width:0; flex:0 1 15rem; }
.player-art{ width:2.8rem; height:2.8rem; border-radius:.6rem; object-fit:cover; flex:none; background:var(--bg-elev-2); }
.player-meta{ min-width:0; }
.player-meta .t{ font-size:.84rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-meta .s{ font-size:.72rem; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-actions, .pb-controls{ display:flex; align-items:center; gap:.3rem; flex:none; }
.p-btn{
  border:none; background:transparent; color:var(--text); font-size:.92rem; cursor:pointer; width:2.1rem; height:2.1rem;
  border-radius:50%; display:grid; place-items:center; transition:background .2s, color .2s; position:relative;
}
.p-btn:hover{ background:var(--surface); }
.p-btn.main{ width:2.6rem; height:2.6rem; background:var(--gradient-brand); color:#fff; font-size:.95rem; box-shadow:0 10px 20px -10px rgba(140,107,255,.8); }
.p-btn.repeat.is-on, .p-btn.shuffle.is-on{ color:var(--accent-2); }
.p-btn.repeat.is-one::after{
  content:"1"; position:absolute; bottom:.1rem; right:.05rem; font-size:.5rem; font-weight:800; background:var(--accent-2); color:#fff;
  width:.85rem; height:.85rem; border-radius:50%; display:grid; place-items:center;
}
.pb-seek{ flex:1; display:flex; align-items:center; gap:.55rem; min-width:0; }
.pb-seek span{ font-size:.68rem; color:var(--text-faint); font-variant-numeric:tabular-nums; min-width:2rem; text-align:center; }
.seek-track{ flex:1; height:.28rem; background:var(--border); border-radius:5px; position:relative; cursor:pointer; padding:.5rem 0; background-clip:content-box; }
.seek-fill{ position:absolute; left:0; top:.5rem; height:.28rem; width:0; background:var(--gradient-brand); border-radius:5px; }
.seek-thumb{ position:absolute; top:50%; width:.7rem; height:.7rem; border-radius:50%; background:#fff; left:0; transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(140,107,255,.35); }
.pb-vol{ display:flex; align-items:center; gap:.5rem; flex:none; color:var(--text-faint); font-size:.8rem; }
.vol-track{ width:4.5rem; height:.28rem; background:var(--border); border-radius:5px; position:relative; cursor:pointer; background-clip:content-box; padding:.5rem 0; }
.vol-fill{ position:absolute; left:0; top:.5rem; height:.28rem; width:85%; background:var(--text-dim); border-radius:5px; }

/* ---------- Footer ---------- */
.footer{ background:var(--bg-elev-1); border-top:1px solid var(--border); padding:2.6rem 0 1.6rem; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,2.4vw,2rem); }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2rem; }
.footer-col h5{ font-family:'Manrope',sans-serif; font-weight:800; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text); margin-bottom:.85rem; }
.footer-col p, .footer-col li, .footer-col a{ color:var(--text-dim); font-size:.86rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.footer-col a:hover{ color:var(--text); }
.footer-cta{ padding:1.1rem 1.2rem; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); }
.footer-cta p{ margin:0 0 .9rem; }
.footer-social{ display:flex; gap:.6rem; justify-content:center; margin-top:2.2rem; }
.footer-bottom{ text-align:center; margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--border); }
.footer-bottom p{ margin:0; font-size:.8rem; color:var(--text-faint); }

/* =========================================================
   v4 COMPONENTS: social row, pills, toast, comments, filters, strip, trending, contact
   ========================================================= */
html:not(.yr-online) .online-only{ display:none !important; }
b:empty{ display:none; }

.social-row{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
.stat, .like-btn, .cmt-btn, .share-btn{
  display:inline-flex; align-items:center; gap:.35rem; height:2rem; min-width:2rem; padding:0 .6rem; justify-content:center;
  border-radius:100px; font-size:.75rem; font-weight:700; line-height:1;
}
.stat{ color:var(--text-faint); background:var(--surface); border:1px solid transparent; padding:0 .65rem; }
.like-btn, .cmt-btn, .share-btn{
  border:1px solid var(--border); background:var(--surface); color:var(--text-dim); cursor:pointer;
  transition:transform .2s var(--ease), color .2s, border-color .2s, background .2s;
}
.like-btn b, .cmt-btn b, .stat b{ font-weight:800; font-size:.72rem; }
.cmt-btn:hover, .share-btn:hover{ color:var(--text); border-color:rgba(140,107,255,.5); transform:translateY(-1px); }
.like-btn:hover{ transform:translateY(-1px) scale(1.04); color:var(--like); border-color:rgba(255,85,119,.5); }
.like-btn.liked{ color:#fff; background:var(--like); border-color:var(--like); }
.like-btn.liked i{ font-weight:900; }
.card .stat, .card .like-btn:not(.liked), .card .cmt-btn, .card .share-btn{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.12); color:#e6e1f8; }
body.light-theme .card .stat, body.light-theme .card .like-btn:not(.liked), body.light-theme .card .cmt-btn, body.light-theme .card .share-btn{
  background:var(--surface); border-color:var(--border); color:var(--text-dim);
}
.social-row .share-btn{ margin-left:auto; }
.tracklist .like-btn, .tracklist .cmt-btn{ height:1.8rem; min-width:1.8rem; padding:0 .5rem; }
.tracklist .stat{ background:none; padding:0 .3rem; height:1.8rem; }
.flash{ animation:flash 2.4s ease-out; }
@keyframes flash{ 0%,40%{ box-shadow:0 0 0 3px var(--accent-2), 0 0 40px rgba(140,107,255,.6); } 100%{ box-shadow:none; } }

.track-mini-title.is-live{ color:var(--accent); }
.play-btn.is-current{ box-shadow:0 0 0 3px rgba(140,107,255,.35); }

/* toast */
.toast-wrap{ position:fixed; z-index:700; left:50%; bottom:calc(var(--player-h) + 1.2rem + env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none; width:max-content; max-width:92vw; }
.toast{
  pointer-events:auto; background:var(--bg-elev-1); color:var(--text); border:1px solid var(--border); padding:.65rem 1rem; border-radius:.9rem;
  font-size:.84rem; font-weight:600; box-shadow:var(--shadow-lg); animation:toastIn .3s var(--ease); display:flex; gap:.6rem; align-items:center;
}
.toast.error{ border-color:rgba(255,85,119,.6); }
.toast.ok i{ color:#3ddc97; } .toast.error i{ color:var(--like); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* comments drawer */
.cd-overlay{ position:fixed; inset:0; z-index:650; background:rgba(3,3,8,.6); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .25s; display:flex; justify-content:flex-end; }
.cd-overlay.show{ opacity:1; pointer-events:auto; }
.cd-panel{
  width:min(28rem,100vw); height:100%; display:flex; flex-direction:column; background:var(--bg-elev-1); border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform .35s var(--ease);
}
.cd-overlay.show .cd-panel{ transform:none; }
.cd-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 1.1rem .8rem; border-bottom:1px solid var(--border); }
.cd-head h3{ font-family:'Manrope',sans-serif; font-size:1rem; font-weight:800; }
.cd-count{ color:var(--text-faint); font-weight:700; margin-left:.3rem; }
.cd-title{ margin:.2rem 0 0; font-size:.78rem; color:var(--text-faint); }
.cd-close{ width:2.1rem; height:2.1rem; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; flex:none; }
.cd-list{ flex:1; overflow-y:auto; padding:.8rem 1.1rem; display:flex; flex-direction:column; gap:1rem; }
.cd-empty{ text-align:center; color:var(--text-faint); padding:2.5rem 1rem; font-size:.86rem; }
.cm{ display:flex; gap:.7rem; }
.cm-av{ flex:none; width:2.15rem; height:2.15rem; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.8rem; }
.cm-body{ min-width:0; flex:1; }
.cm-meta{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; font-size:.75rem; color:var(--text-faint); }
.cm-name{ font-weight:800; color:var(--text); font-size:.8rem; }
.cm-owner{ background:var(--gradient-brand); color:#fff; padding:.08rem .45rem; border-radius:100px; font-size:.62rem; font-weight:800; letter-spacing:.04em; }
.cm-text{ margin:.2rem 0 0; font-size:.86rem; color:var(--text-dim); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.cm-replies{ margin-top:.8rem; display:flex; flex-direction:column; gap:.8rem; }
.cd-form{ padding:.8rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.55rem; background:var(--bg-elev-2); }
.cd-form input, .cd-form textarea, .fld input, .fld select, .fld textarea{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:.75rem; padding:.65rem .8rem;
  font:500 .88rem 'Manrope',sans-serif; transition:border-color .2s, box-shadow .2s;
}
.cd-form textarea{ resize:vertical; min-height:3.4rem; max-height:9rem; }
.cd-form input:focus, .cd-form textarea:focus, .fld input:focus, .fld select:focus, .fld textarea:focus{ outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(140,107,255,.2); }
.cd-form .hp, .hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.cd-actions{ display:flex; align-items:center; justify-content:space-between; }
.cd-left{ font-size:.72rem; color:var(--text-faint); }
.cd-err{ color:var(--like); font-size:.78rem; min-height:1em; }

/* filters */
.filter-bar{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:0 0 1.2rem; }
.search-box{ position:relative; flex:1 1 14rem; max-width:24rem; }
.search-box i{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:.8rem; }
.search-box input, .sort-select{
  width:100%; height:2.5rem; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:100px;
  padding:0 1rem 0 2.4rem; font:600 .84rem 'Manrope',sans-serif;
}
.sort-select{ width:auto; padding:0 1rem; cursor:pointer; }
.sort-select option{ background:var(--bg-elev-1); color:var(--text); }
.search-box input:focus, .sort-select:focus{ outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(140,107,255,.2); }
.empty-note{ text-align:center; color:var(--text-faint); padding:2rem 0; font-size:.9rem; }

/* home: stats strip + trending */
.stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:0 auto 2.6rem; max-width:60rem; }
.stat-tile{ padding:1.1rem 1rem; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); text-align:center; }
.stat-tile b{ display:block; font-family:'Playfair Display',serif; font-size:clamp(1.3rem,2.4vw,1.8rem); }
.stat-tile b:empty{ display:block; } .stat-tile b:empty::before{ content:"0"; }
.stat-tile span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
.trend-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(18rem,1fr)); gap:.9rem; margin-bottom:2.6rem; }
.trend-item{ display:flex; align-items:center; gap:.8rem; padding:.7rem; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); transition:transform .25s var(--ease), border-color .25s; }
.trend-item:hover{ transform:translateY(-3px); border-color:rgba(140,107,255,.4); }
.trend-rank{ width:1.4rem; text-align:center; font-family:'Playfair Display',serif; font-weight:700; color:var(--accent); flex:none; }
.trend-item img{ width:3.2rem; height:3.2rem; border-radius:.6rem; object-fit:cover; flex:none; background:var(--bg-elev-2); }
.trend-meta{ min-width:0; flex:1; }
.trend-meta strong{ display:block; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trend-meta small{ color:var(--text-faint); font-size:.74rem; }

/* contact page */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:1.5rem; align-items:start; }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(1.1rem,2.4vw,1.8rem); }
.panel h3{ font-size:1.15rem; margin-bottom:.4rem; }
.info-list{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.info-list li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.88rem; color:var(--text-dim); }
.info-list i{ width:2.2rem; height:2.2rem; border-radius:.7rem; background:var(--sb-ico); color:var(--accent-2); display:grid; place-items:center; flex:none; font-size:.85rem; }
.info-list strong{ display:block; color:var(--text); font-size:.8rem; }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.95rem; margin-top:1.1rem; }
.fld{ display:flex; flex-direction:column; gap:.35rem; }
.fld.full{ grid-column:1/-1; }
.fld label{ font-size:.76rem; font-weight:700; color:var(--text-dim); }
.fld label em{ color:var(--like); font-style:normal; }
.fld textarea{ min-height:8rem; resize:vertical; }
.fld .err{ color:var(--like); font-size:.72rem; min-height:.9em; }
.fld.bad input, .fld.bad select, .fld.bad textarea{ border-color:var(--like); }
.check{ display:flex; gap:.6rem; align-items:flex-start; font-size:.8rem; color:var(--text-dim); }
.check input{ width:auto; margin-top:.2rem; accent-color:var(--accent-2); }
.form-foot{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.1rem; }
.form-status{ font-size:.84rem; font-weight:600; }
.form-status.ok{ color:#3ddc97; } .form-status.bad{ color:var(--like); }
.success-panel{ text-align:center; padding:2rem 1rem; }
.success-panel i{ font-size:2.4rem; color:#3ddc97; margin-bottom:.8rem; }
.btn-prime:disabled{ opacity:.6; cursor:progress; transform:none; }

/* lightbox action bar */
.lb-bar{ position:absolute; bottom:3.6rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; z-index:2; }
.lb-bar .like-btn, .lb-bar .cmt-btn, .lb-bar .share-btn{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; }
.lb-bar .like-btn.liked{ background:var(--like); border-color:var(--like); }
.gallery-item .cap .like-btn, .gallery-item .cap .cmt-btn{ height:1.8rem; min-width:1.8rem; background:rgba(10,10,16,.55); border-color:rgba(255,255,255,.2); color:#fff; }
.gallery-item .cap .like-btn.liked{ background:var(--like); border-color:var(--like); }
.gallery-item .cap .btns{ display:flex; gap:.3rem; flex:none; }
.video-card .remix-card-body{ flex-direction:column; }
.video-card .social-row{ margin-top:.5rem; }

/* =========================================================
   v4 RESPONSIVE: 4K / large / desktop / laptop / tablet / phone / landscape / touch
   ========================================================= */
@media (min-width:1400px){ :root{ --maxw:1400px; } }
@media (min-width:1800px){ html{ font-size:112.5%; } :root{ --maxw:1680px; } .gallery-grid{ column-count:5; } }
@media (min-width:2400px){ html{ font-size:130%; } :root{ --maxw:2100px; } .gallery-grid{ column-count:6; } }

@media (max-width:1199px){
  .track-grid{ grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr)); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid .footer-col:first-child{ grid-column:1/-1; }
  .pb-vol{ display:none; }
}

/* tablet and below: sidebar becomes a slide-in drawer */
@media (max-width:991px){
  body{ --sb-space:0px; }
  .sidebar{
    top:0; left:0; bottom:0; width:min(84vw,19rem); z-index:80; border-radius:0 1.4rem 1.4rem 0; transform:translateX(-105%);
    padding-top:env(safe-area-inset-top); background:var(--sb-solid); backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .sidebar.open{ transform:none; }
  .sb-head{ display:flex; }
  .content, .footer{ margin-left:0; }
  .player-bar{ left:0; }
  .stats-strip{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .quicklinks{ grid-template-columns:repeat(4,1fr); }
  .hero{ min-height:26vh; }
  .hero-home{ min-height:38vh; }
}

@media (max-width:768px){
  .section{ padding-inline:1.1rem; }
  .track-grid{ grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr)); gap:.85rem; }
  .video-grid{ grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); }
  .album-grid{ grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); }
  .trend-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .btn-mini span{ display:none; }
  .btn-mini{ padding:.55rem .7rem; }
}

@media (max-width:640px){
  .header-brand .website-name{ font-size:.95rem; }
  .hero{ padding:2.2rem .9rem 2rem; }
  .hero-logo{ width:3.8rem; height:3.8rem; border-radius:1rem; }
  .hero-logo-wide{ width:min(15rem,70vw); height:auto; }
  .quicklinks{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ text-align:center; }
  .footer-col ul{ align-items:center; }
  .form-grid{ grid-template-columns:1fr; }
  .filter-bar{ flex-direction:column; align-items:stretch; }
  .search-box{ max-width:none; }
  .sort-select{ width:100%; }

  .player-bar{
    display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"track actions close" "controls controls controls" "seek seek seek";
    row-gap:.2rem; column-gap:.4rem; padding-top:.55rem;
  }
  .pb-track{ grid-area:track; }
  .pb-actions{ grid-area:actions; }
  .pb-controls{ grid-area:controls; justify-content:center; gap:.7rem; }
  .pb-seek{ grid-area:seek; }
  #pClose{ grid-area:close; }
  .content{ padding-bottom:10.5rem; }
  .toast-wrap{ bottom:calc(9.5rem + env(safe-area-inset-bottom)); }
  .cd-overlay{ align-items:flex-end; }
  .cd-panel{ width:100%; height:86vh; border-left:0; border-top:1px solid var(--border); border-radius:1.4rem 1.4rem 0 0; transform:translateY(100%); }
  .cd-overlay.show .cd-panel{ transform:none; }
  .stat-tile{ padding:.9rem .6rem; }
  .lb-bar{ bottom:3rem; }
}

@media (max-width:520px){
  .gallery-grid{ column-count:2; column-gap:.6rem; }
  .gallery-item{ margin-bottom:.6rem; }
  .gallery-item .cap{ padding:.4rem .5rem; }
  .gallery-item .cap span{ display:none; }
}

@media (max-width:400px){
  :root{ --header-h:3.4rem; }
  .track-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .card-body{ padding:.65rem .65rem .75rem; }
  .card-title{ font-size:.82rem; }
  .card-subtitle{ font-size:.7rem; }
  .social-row{ gap:.25rem; }
  .stat, .like-btn, .cmt-btn, .share-btn{ height:1.85rem; min-width:1.85rem; padding:0 .45rem; }
  .header-brand .website-name{ display:none; }
}

/* short landscape screens (phones on their side) */
@media (max-height:520px) and (orientation:landscape){
  :root{ --header-h:3.2rem; }
  .hero, .hero-home{ min-height:0; padding:1.4rem 1rem 1.2rem; }
  .hero p{ display:none; }
  .sb-label{ padding-top:.5rem; }
  .player-bar{ display:flex; }
  .player-bar .pb-seek{ order:0; }
  .content{ padding-bottom:5rem; }
}

/* touch: comfortable tap targets, no hover-only UI */
@media (pointer:coarse){
  .p-btn{ width:2.5rem; height:2.5rem; }
  .p-btn.main{ width:2.9rem; height:2.9rem; }
  .sb-link{ padding-block:.5rem; }
  .stat, .like-btn, .cmt-btn, .share-btn{ height:2.2rem; min-width:2.2rem; }
  .seek-track{ padding:.8rem 0; } .seek-fill{ top:.8rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .sidebar, .content, .footer, .player-bar{ transition:none; }
}

.play-btn.is-playing{ box-shadow:0 0 0 4px rgba(140,107,255,.25); }
.play-btn.is-playing i{ animation:pulseIcon 1.6s ease-in-out infinite; }
@keyframes pulseIcon{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.88); } }