/* ═══════════════════════════════════════════════════════════
   SELF MADE — v2  ·  Cinematic Dark Space
   Inspired by the reference image:
   Deep black · Metallic chrome text · Soft bokeh lights
   Circular member portraits · Minimal nav · Immersive hero
   ─────────────────────────────────────────────────────────
   Fonts:
     EN display : Bebas Neue  (massive headers)
     EN body    : Inter       (clean UI text)
     FA display : Sahel       (bold Persian headers)
     FA body    : Estedad     (readable Persian body)
     Mono       : JetBrains Mono (labels, bpm, tags)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/estedad-font@v5.0.1/dist/Estedad.css');
@import url('https://cdn.jsdelivr.net/npm/vazirmatn@33.0.3/Vazirmatn-font-face.css');

/* ── TOKENS ──────────────────────────────────────────────── */
:root, .dark-mode {
  --black:   #080808;
  --black-2: #0d0d0d;
  --black-3: #121212;
  --black-4: #1a1a1a;

  /* Chrome/metallic accent — matches reference image */
  --chrome:      #c8c8c8;
  --chrome-dim:  rgba(200,200,200,0.08);
  --chrome-bdr:  rgba(200,200,200,0.18);
  --chrome-glow: rgba(200,200,200,0.25);

  /* Subtle warm glow (asteroid rim light in reference) */
  --warm:     rgba(255,200,80,0.12);
  --warm-bdr: rgba(255,200,80,0.25);

  /* Glass */
  --g-bg:   rgba(255,255,255,0.04);
  --g-bgh:  rgba(255,255,255,0.08);
  --g-bdr:  rgba(255,255,255,0.08);
  --g-bdrh: rgba(200,200,200,0.3);
  --g-shad: 0 8px 32px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  --lq-bg:  rgba(255,255,255,0.05);
  --lq-bdr: rgba(255,255,255,0.1);
  --lq-shad:0 24px 80px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.07);

  --t1: #ffffff;
  --t2: #888888;
  --t3: #444444;
  --t4: #2a2a2a;

  --sw: 260px;
  --rXL:22px; --rLG:14px; --rMD:9px; --rSM:5px; --rPILL:999px;

  --fEN: 'Bebas Neue', sans-serif;
  --fENb: 'Inter', sans-serif;
  --fFA: 'Vazirmatn', sans-serif;
  --fFAb: 'Estedad', 'Vazirmatn', sans-serif;
  --fMONO: 'JetBrains Mono', monospace;
}

/* Light mode — inverted but still monochrome */
.light-mode {
  --black:   #f5f5f5;
  --black-2: #eeeeee;
  --black-3: #e5e5e5;
  --black-4: #d8d8d8;
  --chrome:      #1a1a1a;
  --chrome-dim:  rgba(0,0,0,0.06);
  --chrome-bdr:  rgba(0,0,0,0.15);
  --chrome-glow: rgba(0,0,0,0.2);
  --g-bg:   rgba(0,0,0,0.04);
  --g-bgh:  rgba(0,0,0,0.08);
  --g-bdr:  rgba(0,0,0,0.1);
  --g-bdrh: rgba(0,0,0,0.3);
  --g-shad: 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
  --lq-bg:  rgba(255,255,255,0.7);
  --lq-bdr: rgba(0,0,0,0.1);
  --lq-shad:0 24px 80px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,1);
  --t1: #0a0a0a;
  --t2: #666666;
  --t3: #aaaaaa;
  --t4: #dddddd;
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--fFAb);
  background:var(--black);color:var(--t1);
  min-height:100vh;overflow-x:hidden;
  transition:background .35s,color .35s;
}
body.lang-en{font-family:var(--fENb);direction:ltr}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}

/* ── GRAIN (subtle film grain like the reference) ─────────── */
.grain-overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;opacity:.032;mix-blend-mode:overlay;
}

/* ── CURSOR ──────────────────────────────────────────────── */
.cursor-glow{
  position:fixed;pointer-events:none;z-index:9999;
  width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle,var(--chrome-glow) 0%,transparent 68%);
  transform:translate(-50%,-50%);
  transition:width .16s,height .16s;
  mix-blend-mode:screen;opacity:.6;
}
.light-mode .cursor-glow{mix-blend-mode:multiply;opacity:.3}

/* ── GLASS SYSTEM ────────────────────────────────────────── */
.glass-panel{background:var(--g-bg);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid var(--g-bdr);box-shadow:var(--g-shad)}
.liquid-glass{background:var(--lq-bg);backdrop-filter:blur(48px) saturate(1.8);-webkit-backdrop-filter:blur(48px) saturate(1.8);border:1px solid var(--lq-bdr);box-shadow:var(--lq-shad)}
.glass-btn{background:var(--g-bg);backdrop-filter:blur(16px);border:1px solid var(--g-bdr);box-shadow:var(--g-shad);color:var(--t1);border-radius:var(--rMD);padding:9px 18px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;position:relative;overflow:hidden;transition:all .2s}
.glass-btn:hover{background:var(--g-bgh);border-color:var(--g-bdrh);transform:translateY(-1px)}
.glass-btn:active{transform:scale(.97)}
.glass-btn-sm{background:var(--g-bg);backdrop-filter:blur(12px);border:1px solid var(--g-bdr);color:var(--t1);border-radius:var(--rSM);padding:5px 11px;font-size:11px;display:inline-flex;align-items:center;justify-content:center;transition:all .18s}
.glass-btn-sm:hover{background:var(--g-bgh);border-color:var(--g-bdrh)}
.glass-chip{background:var(--g-bg);backdrop-filter:blur(10px);border:1px solid var(--g-bdr);border-radius:var(--rPILL);padding:4px 13px;font-size:11px;display:inline-flex;align-items:center;gap:5px}
.glass-pill{background:var(--g-bg);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--g-bdr);box-shadow:var(--g-shad);border-radius:var(--rPILL);padding:4px}
.ripple-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}

/* Landing styles moved to landing.css */

/* ══════════════════════════════════════════════════════════
   MAIN SITE LAYOUT
   ══════════════════════════════════════════════════════════ */
.main-site{display:flex;position:relative;z-index:2;min-height:100vh}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar{
  width:var(--sw);flex-shrink:0;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  border-right:1px solid var(--g-bdr);z-index:50;overflow:hidden;
  background:var(--black-2);
  transition:background .35s;
}
.logo-area{padding:22px 18px 16px;border-bottom:1px solid var(--g-bdr)}
.site-logo{display:flex;align-items:center;gap:11px}
.sidebar-logo-img{width:38px;height:38px;object-fit:contain;filter:brightness(0) invert(1)}
.light-mode .sidebar-logo-img{filter:brightness(0) !important;}
.light-mode .hero-logo-big img{filter:brightness(0) drop-shadow(0 0 20px rgba(0,0,0,.12)) !important;}
.logo-text-main{font-family:var(--fEN);font-size:16px;letter-spacing:.1em;color:var(--t1);display:block}
.logo-text-sub{font-family:var(--fMONO);font-size:8px;color:var(--t3);letter-spacing:.18em;text-transform:uppercase;display:block;margin-top:2px}
.nav-wrap{flex:1;overflow-y:auto;padding:14px 12px}
.nav-section-label{font-family:var(--fMONO);font-size:8px;color:var(--t3);letter-spacing:.2em;text-transform:uppercase;padding:0 10px;margin:12px 0 5px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rMD);font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;user-select:none;transition:all .18s;position:relative}
.nav-icon-wrap{width:28px;height:28px;border-radius:var(--rSM);display:flex;align-items:center;justify-content:center;background:var(--g-bg);border:1px solid var(--g-bdr);font-size:13px;flex-shrink:0;transition:all .18s}
.nav-item:hover{color:var(--t1)}
.nav-item:hover .nav-icon-wrap{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.nav-item.active{color:var(--t1)}
.nav-item.active .nav-icon-wrap{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);box-shadow:0 0 12px rgba(255,255,255,.06)}
.nav-active-dot{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:2px;height:16px;border-radius:2px;background:var(--chrome);opacity:0;transition:opacity .18s}
.nav-item.active .nav-active-dot{opacity:1}
.sidebar-bottom{padding:10px 14px 14px;border-top:1px solid var(--g-bdr);display:flex;flex-direction:column;gap:7px}
.theme-toggle-btn,.cart-sidebar-btn{width:100%;background:var(--g-bg);border:1px solid var(--g-bdr);border-radius:var(--rMD);padding:9px 14px;color:var(--t2);font-size:12px;font-family:inherit;display:flex;align-items:center;gap:8px;transition:all .2s;cursor:pointer}
.theme-toggle-btn:hover,.cart-sidebar-btn:hover{background:var(--g-bgh);border-color:var(--g-bdrh);color:var(--t1)}
.cart-badge{margin-right:auto;min-width:20px;height:20px;border-radius:10px;background:var(--chrome);color:#000;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;font-family:var(--fMONO)}

/* Mini player (sidebar) */
.mini-player{margin:8px 12px 14px;border-radius:var(--rLG);padding:12px;cursor:pointer;position:relative;overflow:hidden;transition:all .22s;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.mini-player::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent);opacity:0;transition:opacity .22s}
.mini-player:hover{border-color:var(--g-bdrh)}
.mini-player:hover::before{opacity:1}
.mp-art-wrap{position:relative;width:40px;height:40px;flex-shrink:0}
.mp-art{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#222,#111);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--g-bdr)}
.mp-eq-bars{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:5px 4px;opacity:0;transition:opacity .2s}
.mini-player.playing .mp-eq-bars{opacity:1}
.mp-eq-bars span{flex:1;border-radius:2px;background:#fff;animation:eqB 1s ease-in-out infinite}
.mp-eq-bars span:nth-child(1){animation-delay:0s}
.mp-eq-bars span:nth-child(2){animation-delay:.12s}
.mp-eq-bars span:nth-child(3){animation-delay:.24s}
.mp-eq-bars span:nth-child(4){animation-delay:.08s}
.mp-eq-bars span:nth-child(5){animation-delay:.18s}
.mini-player.playing .mp-art{opacity:.25}
.mp-info{flex:1;min-width:0;margin:0 8px}
.mp-track{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--fMONO)}
.mp-artist{font-size:9px;color:var(--t2);margin-top:2px;font-family:var(--fMONO)}
.mp-btns{display:flex;align-items:center;gap:4px;width:100%;justify-content:center;margin-top:2px}
.mp-ctrl{background:var(--g-bg);border:1px solid var(--g-bdr);border-radius:var(--rSM);color:var(--t2);font-size:12px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .16s}
.mp-ctrl:hover{background:var(--g-bgh);border-color:var(--g-bdrh);color:var(--t1)}
.mp-ctrl.mp-play{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);color:var(--t1);width:34px;height:34px;border-radius:50%}
.mp-ctrl.mp-play:hover{background:rgba(255,255,255,.14);box-shadow:0 0 16px rgba(255,255,255,.08)}

/* ══════════════════════════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════════════════════════ */
.main-content{flex:1;min-width:0;padding:32px 40px 100px;position:relative}
.tabs-bar{display:flex;align-items:center;gap:2px;margin-bottom:36px;width:fit-content;position:relative}
.tab{padding:9px 22px;font-family:var(--fMONO);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);cursor:pointer;user-select:none;transition:color .25s;position:relative;z-index:1;border-radius:var(--rPILL)}
.tab:hover{color:rgba(212,168,67,.7)}

/* ── GOLDEN ACTIVE TAB ─────────────────────────────────── */
.tab.active{
  background:linear-gradient(135deg,#f5d87a 0%,#c9922a 30%,#e8c060 60%,#a87020 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* خط طلایی زیر tab فعال */
.tab.active::after{
  content:'';position:absolute;bottom:2px;left:20%;right:20%;
  height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#d4a843,transparent);
  animation:goldLineIn .35s cubic-bezier(.22,1,.36,1) forwards;
}
/* هاله گرم پشت tab فعال */
.tab.active::before{
  content:'';position:absolute;inset:0;border-radius:var(--rPILL);
  background:radial-gradient(ellipse at 50% 115%,rgba(184,150,46,.13) 0%,transparent 68%);
  pointer-events:none;
}
@keyframes goldLineIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.tab.active::after{animation:none}}

/* light mode: گرادیانت تیره‌تر */
.light-mode .tab.active{
  background:linear-gradient(135deg,#a86010 0%,#c9922a 40%,#7a4800 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* tab-slider: مخفی می‌شه چون دیگه لازم نیست */
.tab-slider{display:none}
.page{display:none;animation:pgIn .32s ease}
.page.active{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}
.sec-title{font-family:var(--fMONO);font-size:9.5px;color:var(--t2);letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.sec-title::before{content:'';width:18px;height:1.5px;background:var(--chrome)}
.see-all-btn{background:none;border:none;color:var(--t2);font-family:var(--fMONO);font-size:9px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color .15s}
.see-all-btn:hover{color:var(--t1)}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.page-title{font-family:var(--fEN);font-size:44px;color:var(--t1);line-height:1;letter-spacing:.03em}
body:not(.lang-en) .page-title{font-family:var(--fFA);font-size:28px}

/* ── HERO (inside main site) ──────────────────────────────── */
.hero{
  border-radius:var(--rXL);min-height:260px;
  display:flex;align-items:center;padding:48px 52px;margin-bottom:48px;
  position:relative;overflow:hidden;gap:30px;
  background:linear-gradient(145deg,#0a0a0a 0%,#111111 50%,#0d0d0d 100%) !important;
  border:1px solid rgba(255,255,255,.06);
}
.light-mode .hero{background:linear-gradient(145deg,#efefef 0%,#e8e8e8 100%) !important;border-color:rgba(0,0,0,.06)}
.hero-grid{position:absolute;bottom:0;left:-5%;right:-5%;height:55%;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;transform:perspective(500px) rotateX(65deg);transform-origin:bottom center;mask-image:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 80%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 80%);pointer-events:none}
.hero-mesh{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 70% at 90% 50%,rgba(255,255,255,.03) 0%,transparent 60%)}
.hero-content{flex:1;position:relative;z-index:1}
.hero-eyebrow{font-family:var(--fMONO);font-size:9px;color:var(--t3);letter-spacing:.28em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.hero-eyebrow::before{content:'';width:22px;height:1px;background:var(--t3)}
.hero-h1{font-family:var(--fEN);font-size:clamp(56px,7vw,88px);line-height:.92;letter-spacing:.04em;margin-bottom:14px;color:var(--t1)}
.hero-h1 em{font-style:normal;color:var(--chrome)}
.hero-sub{font-size:14px;color:var(--t2);line-height:1.7;margin-bottom:24px;max-width:420px}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap}
.hero-stat{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px}
.hs-val{font-family:var(--fEN);font-size:26px;color:var(--t1)}
.hs-lbl{font-family:var(--fMONO);font-size:8px;color:var(--t3);letter-spacing:.12em;text-transform:uppercase}
.hero-visual{position:relative;z-index:1;flex-shrink:0}
.hero-logo-big{width:150px;height:150px;display:flex;align-items:center;justify-content:center;animation:heroLogo 6s ease-in-out infinite}
.hero-logo-big img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 0 30px rgba(255,255,255,.12))}
@keyframes heroLogo{0%,100%{transform:rotateY(-8deg) rotateX(4deg)}50%{transform:rotateY(8deg) rotateX(-4deg)}}

/* Ticker */
.ticker-strip{background:rgba(255,255,255,.03);border-top:1px solid var(--g-bdr);border-bottom:1px solid var(--g-bdr);padding:8px 0;overflow:hidden;margin-bottom:48px}
.ticker-inner{display:flex;animation:tickR 22s linear infinite;width:max-content}
.ticker-item{font-family:var(--fMONO);font-size:9px;color:var(--t3);letter-spacing:.16em;text-transform:uppercase;padding:0 28px;white-space:nowrap;border-right:1px solid var(--g-bdr)}
@keyframes tickR{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── MEMBER CARDS ─────────────────────────────────────────── */
.members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px;margin-bottom:52px}
.member-card{background:var(--black-3);border:1px solid var(--g-bdr);border-radius:var(--rLG);padding:20px 12px;text-align:center;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.member-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1.5px;background:var(--chrome);transform:scaleX(0);transition:transform .25s;transform-origin:center}
.member-card:hover{border-color:rgba(255,255,255,.15);transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.7)}
.member-card:hover::after{transform:scaleX(1)}
.member-ava{width:68px;height:68px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:28px;border:1px solid var(--g-bdr);transition:all .25s;background:var(--black-4)}
.member-card:hover .member-ava{border-color:rgba(255,255,255,.2);box-shadow:0 0 18px rgba(255,255,255,.06)}
.member-name{font-size:12px;font-weight:700;margin-bottom:5px;font-family:var(--fMONO);letter-spacing:.05em;text-transform:uppercase}
.member-badge{font-family:var(--fMONO);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--rPILL);background:rgba(255,255,255,.05);border:1px solid var(--g-bdr);color:var(--t3);display:inline-block}

/* Gradient sets — monochrome for this theme */
.ga{background:linear-gradient(135deg,#1a1a1a,#0d0d0d)}
.gb{background:linear-gradient(135deg,#1e1e1e,#0a0a0a)}
.gc{background:linear-gradient(135deg,#161616,#0f0f0f)}
.gd{background:linear-gradient(135deg,#1c1c1c,#0b0b0b)}
.ge{background:linear-gradient(135deg,#181818,#0c0c0c)}
.gf{background:linear-gradient(135deg,#141414,#0e0e0e)}
.light-mode .ga,.light-mode .gb,.light-mode .gc,.light-mode .gd,.light-mode .ge,.light-mode .gf{background:linear-gradient(135deg,#e0e0e0,#cccccc)}

/* ── BEATS GRID ───────────────────────────────────────────── */
.beats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(192px,1fr));gap:14px;margin-bottom:52px}
.beat-card{background:var(--black-3);border:1px solid var(--g-bdr);border-radius:var(--rLG);padding:14px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.beat-card:hover{border-color:rgba(255,255,255,.14);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.7)}
.beat-art{width:100%;aspect-ratio:1;border-radius:var(--rMD);margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;overflow:hidden;background:var(--black-4)}
.beat-play-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;border-radius:inherit}
.beat-play-btn{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.beat-play-btn:hover{background:rgba(255,255,255,.2);transform:scale(1.08)}
.beat-card:hover .beat-play-overlay{opacity:1}
.beat-name{font-size:12.5px;font-weight:700;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--fMONO);letter-spacing:.04em}
.beat-row{display:flex;justify-content:space-between;align-items:center}
.beat-by{font-size:10px;color:var(--t2)}
.beat-bpm{font-family:var(--fMONO);font-size:9px;color:var(--chrome);background:var(--chrome-dim);border:1px solid var(--chrome-bdr);padding:2px 7px;border-radius:4px}
.beat-price{font-family:var(--fMONO);font-size:9px;color:#aaa;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:2px 7px;border-radius:4px;margin-top:6px;display:inline-block}
.buy-btn{width:100%;margin-top:8px;padding:7px;background:rgba(255,255,255,.05);border:1px solid var(--chrome-bdr);color:var(--t1);border-radius:var(--rSM);font-size:11px;font-weight:600;font-family:var(--fMONO);letter-spacing:.06em;text-transform:uppercase;transition:all .18s}
.buy-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}

/* ── ARTISTS LIST ─────────────────────────────────────────── */
.search-bar{display:flex;align-items:center;gap:10px;border-radius:var(--rMD);padding:10px 16px;max-width:400px;margin-bottom:22px}
.search-bar input{background:none;border:none;outline:none;color:var(--t1);font-family:inherit;font-size:13px;flex:1}
.search-bar input::placeholder{color:var(--t3)}
.search-icon{font-size:15px;color:var(--t3)}
.artist-list{display:flex;flex-direction:column;gap:2px}
.artist-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--rMD);cursor:pointer;transition:all .18s;border:1px solid transparent}
.artist-row:hover{background:var(--g-bg);border-color:var(--g-bdr)}
.ar-num{font-family:var(--fMONO);font-size:10px;color:var(--t3);width:18px;text-align:center;flex-shrink:0}
.ar-ava{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;border:1px solid var(--g-bdr);background:var(--black-4)}
.ar-name{font-size:14px;font-weight:700;margin-bottom:2px;font-family:var(--fMONO);letter-spacing:.04em}
.ar-sub{font-size:10px;color:var(--t3);font-family:var(--fMONO);letter-spacing:.06em;text-transform:uppercase}
.ar-val{font-family:var(--fMONO);font-size:12px;font-weight:700;color:var(--chrome)}
.ar-lbl{font-family:var(--fMONO);font-size:8px;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}

/* ── PRODUCERS ────────────────────────────────────────────── */
.producers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.prod-card{background:var(--black-3);border:1px solid var(--g-bdr);border-radius:var(--rXL);padding:24px;transition:all .25s;position:relative;overflow:hidden}
.prod-card:hover{border-color:rgba(255,255,255,.12);transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.prod-card-glow{position:absolute;bottom:-50px;left:-50px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.03),transparent);pointer-events:none;transition:transform .4s}
.prod-card:hover .prod-card-glow{transform:scale(2.2)}
.prod-header{display:flex;align-items:center;gap:14px;margin-bottom:18px;position:relative}
.prod-ava{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid var(--g-bdr);background:var(--black-4)}
.prod-name{font-size:16px;font-weight:800;font-family:var(--fMONO);letter-spacing:.04em}
.prod-handle{font-family:var(--fMONO);font-size:9px;color:var(--t3);margin-top:3px}
.prod-beats-list{display:flex;flex-direction:column;gap:8px}
.prod-beat-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--rSM);background:rgba(255,255,255,.02);border:1px solid var(--g-bdr);cursor:pointer;transition:all .15s}
.prod-beat-row:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.pb-art{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:var(--black-4)}
.pb-title{font-size:12px;font-weight:600;font-family:var(--fMONO)}
.pb-bpm{font-family:var(--fMONO);font-size:9px;color:var(--t3);margin-top:1px}
.pb-buy{background:rgba(255,255,255,.08);color:var(--t1);border:1px solid var(--chrome-bdr);padding:4px 10px;border-radius:5px;font-size:10px;font-weight:700;cursor:pointer;font-family:var(--fMONO);transition:all .15s;letter-spacing:.06em}
.pb-buy:hover{background:rgba(255,255,255,.14)}

/* ── RELEASES ─────────────────────────────────────────────── */
.releases-list{display:flex;flex-direction:column;gap:2px}
.release-row{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:var(--rMD);cursor:pointer;transition:all .18s;border:1px solid transparent}
.release-row:hover{background:var(--g-bg);border-color:var(--g-bdr)}
.rel-num{font-family:var(--fMONO);font-size:10px;color:var(--t3);width:18px;text-align:center;flex-shrink:0}
.rel-art{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--black-4);border:1px solid var(--g-bdr)}
.rel-title{font-size:14px;font-weight:700;font-family:var(--fMONO);letter-spacing:.04em}
.rel-by{font-family:var(--fMONO);font-size:10px;color:var(--t3);margin-top:2px}
.rel-dur{font-family:var(--fMONO);font-size:11px;color:var(--t3);margin-right:auto}

/* ── PROFILE ──────────────────────────────────────────────── */
.profile-hero{border-radius:var(--rXL);padding:44px 48px;display:flex;gap:28px;align-items:flex-end;margin-bottom:36px;position:relative;overflow:hidden;background:var(--black-3);border:1px solid var(--g-bdr)}
.profile-bg-gradient{position:absolute;inset:0;opacity:.15;pointer-events:none}
.profile-avatar{width:110px;height:110px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 30px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:50px;flex-shrink:0;background:var(--black-4);position:relative;z-index:1}
.profile-info{flex:1;position:relative;z-index:1}
.profile-tag{font-family:var(--fMONO);font-size:9px;color:var(--t3);letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.profile-name{font-family:var(--fEN);font-size:52px;letter-spacing:.03em;margin-bottom:10px;line-height:1}
.profile-bio{font-size:14px;color:var(--t2);line-height:1.7;max-width:500px;margin-bottom:16px}
.profile-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pstat{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px}
.pstat span{font-family:var(--fEN);font-size:22px;color:var(--t1)}
.pstat small{font-family:var(--fMONO);font-size:8px;color:var(--t3);letter-spacing:.12em;text-transform:uppercase}
.profile-socials{display:flex;gap:8px}
.social-chip{font-family:var(--fMONO);font-size:10px}

/* ── PANEL ────────────────────────────────────────────────── */
.panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.panel-card{border-radius:var(--rXL);padding:24px;background:var(--black-3);border:1px solid var(--g-bdr)}
.panel-card h3{font-size:14px;font-weight:700;margin-bottom:8px;font-family:var(--fMONO);letter-spacing:.05em}
.panel-card p{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:16px}
.panel-empty{font-size:13px;color:var(--t3);font-style:italic}
.upload-btn{border-radius:var(--rPILL) !important}

/* Upload */
.upload-drop{border:2px dashed var(--g-bdr);border-radius:var(--rLG);padding:28px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:14px}
.upload-drop:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.02)}
.drop-icon{font-size:36px;margin-bottom:8px}
.upload-drop p{font-size:13px;color:var(--t2)}
.upload-drop small{font-size:11px;color:var(--t3);display:block;margin-top:4px}
.upload-progress-wrap{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.upload-progress-bar{flex:1;height:4px;background:var(--g-bg);border-radius:2px;overflow:hidden}
.upload-progress-bar div{height:100%;background:var(--chrome);border-radius:2px;transition:width .3s}

/* ══════════════════════════════════════════════════════════
   EXPANDED PLAYER MODAL
   ══════════════════════════════════════════════════════════ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;z-index:900}
.player-modal{width:460px;max-width:94vw;border-radius:28px;padding:36px 30px 26px;position:relative;display:flex;flex-direction:column;gap:20px;background:var(--black-2);border:1px solid rgba(255,255,255,.08)}
.pm-close{position:absolute;top:14px;left:14px;width:30px;height:30px;border-radius:50%;font-size:13px;font-family:var(--fMONO);background:var(--g-bg);border:1px solid var(--g-bdr);color:var(--t1)}
.pm-top{display:flex;gap:18px;align-items:flex-end}
.pm-art-big{width:130px;height:130px;flex-shrink:0;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:54px;background:var(--black-4);border:1px solid var(--g-bdr);animation:artFloat 4s ease-in-out infinite}
@keyframes artFloat{0%,100%{transform:rotateY(-6deg) rotateX(3deg)}50%{transform:rotateY(6deg) rotateX(-3deg)}}
.pm-track-name{font-family:var(--fEN);font-size:28px;line-height:1.1;margin-bottom:5px;letter-spacing:.03em}
.pm-artist-name{font-family:var(--fMONO);font-size:11px;color:var(--t2);margin-bottom:8px}
.pm-bpm-tag{font-family:var(--fMONO);font-size:9px;background:var(--chrome-dim);border:1px solid var(--chrome-bdr);color:var(--chrome);padding:3px 10px;border-radius:var(--rPILL);display:inline-block}
.eq-canvas{width:100%;height:52px;border-radius:10px;background:rgba(0,0,0,.3);display:block}
.pm-progress-section{display:flex;flex-direction:column;gap:6px}
.pm-time-row{display:flex;justify-content:space-between;font-family:var(--fMONO);font-size:9px;color:var(--t3)}
.pm-progress-track{height:4px;border-radius:2px;background:var(--g-bdr);position:relative;cursor:pointer;padding:8px 0;margin:-8px 0}
.pm-progress-fill{height:4px;border-radius:2px;background:var(--chrome);position:absolute;top:8px;left:0;pointer-events:none;transition:width .1s linear}
.pm-progress-thumb{width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:50%;left:0;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .2s}
.pm-progress-track:hover .pm-progress-thumb{opacity:1}
.pm-controls{display:flex;align-items:center;justify-content:center;gap:12px}
.pm-ctrl-btn{width:48px;height:48px;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center;background:var(--g-bg);border:1px solid var(--g-bdr);color:var(--t1);transition:all .2s}
.pm-ctrl-btn:hover{background:var(--g-bgh);border-color:var(--g-bdrh)}
.pm-play-big{width:64px;height:64px;font-size:24px;background:rgba(255,255,255,.1) !important;border:1px solid rgba(255,255,255,.2) !important;box-shadow:0 0 24px rgba(255,255,255,.06)}
.pm-play-big:hover{background:rgba(255,255,255,.18) !important;transform:scale(1.05) !important}
.pm-vol-row{display:flex;align-items:center;gap:10px}
.vol-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.pm-vol-track{flex:1;height:3px;border-radius:2px;background:var(--g-bdr);position:relative;cursor:pointer;padding:8px 0;margin:-8px 0}
.pm-vol-fill{height:3px;border-radius:2px;background:var(--t2);position:absolute;top:8px;left:0;pointer-events:none;width:80%}
.pm-vol-thumb{width:11px;height:11px;border-radius:50%;background:#fff;position:absolute;top:50%;left:80%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .2s}
.pm-vol-track:hover .pm-vol-thumb{opacity:1}
.pm-playlist-section{display:flex;flex-direction:column;gap:10px}
.pm-next-row{display:flex;align-items:center;justify-content:space-between}
.pm-next-label{font-family:var(--fMONO);font-size:9px;color:var(--t3);letter-spacing:.15em;text-transform:uppercase}
.playlist-toggle{font-family:var(--fMONO);font-size:10px;padding:5px 12px;border-radius:var(--rPILL)}
.pm-next-track{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--rMD);background:var(--g-bg);border:1px solid var(--g-bdr);font-size:13px;font-weight:600}
.pm-playlist{max-height:180px;overflow-y:auto;border:1px solid var(--g-bdr);border-radius:var(--rMD);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.pl-item{display:flex;align-items:center;gap:12px;padding:9px 14px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--g-bdr)}
.pl-item:last-child{border-bottom:none}
.pl-item:hover{background:var(--g-bgh)}
.pl-item.pl-active{background:rgba(255,255,255,.06);color:var(--chrome)}
.pl-num{font-family:var(--fMONO);font-size:9px;color:var(--t3);width:16px;text-align:center;flex-shrink:0}
.pl-title{font-size:12px;font-weight:600;flex:1;font-family:var(--fMONO)}
.pl-artist{font-family:var(--fMONO);font-size:10px;color:var(--t3)}

/* ── MODALS ───────────────────────────────────────────────── */
.auth-modal{width:400px;max-width:92vw;border-radius:var(--rXL);padding:36px 30px;display:flex;flex-direction:column;gap:12px;background:var(--black-2);border:1px solid rgba(255,255,255,.08)}
.auth-logo{text-align:center;margin-bottom:4px}
.auth-logo img{filter:brightness(0) invert(1)}
.auth-title{font-family:var(--fEN);font-size:28px;text-align:center;letter-spacing:.08em}
.auth-sub{font-family:var(--fMONO);font-size:10px;color:var(--t3);text-align:center;letter-spacing:.08em}
.auth-field input,.auth-field select{width:100%;padding:12px 16px;background:var(--g-bg);border:1px solid var(--g-bdr);border-radius:var(--rMD);color:var(--t1);font-family:inherit;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s}
.auth-field input:focus{border-color:rgba(255,255,255,.25);box-shadow:0 0 14px rgba(255,255,255,.04)}
.auth-error{background:rgba(255,50,50,.08);border:1px solid rgba(255,50,50,.25);border-radius:var(--rSM);padding:8px 14px;color:#ff6666;font-size:12px;text-align:center;font-family:var(--fMONO)}
.modal-btn{width:100%;padding:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:var(--t1);border-radius:var(--rMD);font-size:13px;font-weight:700;font-family:var(--fMONO);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.modal-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.modal-btn:active{transform:scale(.97)}
.modal-cancel{width:100%;padding:10px;background:transparent;border:1px solid var(--g-bdr);color:var(--t2);border-radius:var(--rMD);font-size:13px;font-family:inherit;cursor:pointer;transition:all .2s}
.modal-cancel:hover{border-color:var(--g-bdrh);color:var(--t1)}
.cart-item-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--g-bdr)}
.cart-item-name{font-size:13px;font-weight:600;font-family:var(--fMONO)}
.cart-item-price{font-family:var(--fMONO);font-size:12px;color:var(--chrome)}
.cart-remove{background:none;border:none;color:rgba(255,80,80,.7);font-size:16px;cursor:pointer}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;padding-top:12px;font-size:14px}
.cart-total-row strong{font-family:var(--fMONO);color:var(--chrome)}

/* Scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* Responsive */
@media(max-width:900px){
  .sidebar{display:none}
  .main-content{padding:20px 16px 80px}
  .landing-nav{padding:18px 20px}
  .nav-links{display:none}
  .family-avatar{width:72px;height:72px}
  .family-name{font-size:9px}
  .hero{flex-direction:column;padding:28px 24px}
  .hero-h1{font-size:44px}
  .hero-visual{display:none}
  .tabs-bar{overflow-x:auto;width:100%}
  .tab{white-space:nowrap}
  .hero-title{font-size:68px}
  .landing-nav-indicators,.scroll-label{display:none}
  .mini-player-bar{min-width:180px;padding:10px 14px 10px 10px}
}

/* ══════════════════════════════════════════════════════════
   FLOATING PLAYER — Spotify / Apple Music style, draggable
   ══════════════════════════════════════════════════════════ */
.float-player {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  width: 320px;
  background: rgba(18,18,18,0.92);
  backdrop-filter: blur(60px) saturate(2);
  -webkit-backdrop-filter: blur(60px) saturate(2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.95),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.3s;
  user-select: none;
  cursor: default;
}
.light-mode .float-player {
  background: rgba(248,248,248,0.94);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.95);
}
.float-player.dragging {
  box-shadow: 0 40px 100px rgba(0,0,0,0.98), 0 0 0 2px rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  transition: none;
}

/* Drag handle bar */
.fp-drag-handle {
  height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  transition: background 0.15s;
}
.fp-drag-handle:hover { background: rgba(255,255,255,0.05); }
.fp-drag-handle:active { cursor: grabbing; }
.light-mode .fp-drag-handle { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }

.fp-drag-dots {
  display: flex; gap: 3px; align-items: center;
}
.fp-drag-dots span {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.light-mode .fp-drag-dots span { background: rgba(0,0,0,0.2); }

/* Main row */
.fp-row {
  display: flex; align-items: center; gap: 0;
  position: relative;
  padding-bottom: 10px;
}

/* Art thumbnail */
.fp-art {
  width: 56px; height: 56px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, #222, #0a0a0a);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  margin: 8px 0 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}
.fp-art::after {
  content: '⤢';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: rgba(255,255,255,0.85);
  opacity: 0; transition: opacity 0.2s;
  border-radius: 8px;
}
.fp-art:hover::after { opacity: 1; }
.light-mode .fp-art { background: linear-gradient(135deg, #ddd, #eee); border-color: rgba(0,0,0,0.1); }

/* Body */
.fp-body {
  flex: 1;
  padding: 8px 10px 8px 12px;
  min-width: 0;
  cursor: pointer;
}
.fp-track {
  font-family: var(--fMONO);
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--t1); margin-bottom: 2px;
}
.fp-artist {
  font-family: var(--fMONO);
  font-size: 8.5px; color: var(--t3);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 7px;
}
.fp-progress {
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.light-mode .fp-progress { background: rgba(0,0,0,0.1); }
.fp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #888, #fff);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s linear;
}
.light-mode .fp-progress-fill { background: linear-gradient(90deg, #555, #111); }

/* Controls */
.fp-controls {
  display: flex; align-items: center; gap: 1px;
  padding: 0 10px;
  flex-shrink: 0;
}
.fp-btn {
  width: 28px; height: 28px;
  background: none; border: none;
  color: var(--t2); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: all 0.15s;
  cursor: pointer;
}
.fp-btn:hover { color: var(--t1); background: rgba(255,255,255,0.08); }
.light-mode .fp-btn:hover { background: rgba(0,0,0,0.07); }
.fp-play-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: #000; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 0 20px rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.4);
  cursor: pointer;
  margin: 0 2px;
}
.fp-play-btn:hover {
  background: #e8e8e8;
  transform: scale(1.08);
  box-shadow: 0 0 30px rgba(255,255,255,0.25), 0 6px 18px rgba(0,0,0,0.5);
}
.light-mode .fp-play-btn { background: #111; color: #fff; box-shadow: 0 0 16px rgba(0,0,0,0.25); }
.light-mode .fp-play-btn:hover { background: #333; }

/* EQ mini bars */
.fp-eq {
  position: absolute;
  bottom: 11px; right: 102px;
  display: flex; align-items: flex-end; gap: 2px;
  height: 10px; pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
}
.float-player.playing .fp-eq { opacity: 1; }
.fp-eq span {
  width: 2px; background: rgba(255,255,255,0.45); border-radius: 1px;
  animation: fpEQ 0.9s ease-in-out infinite;
}
.light-mode .fp-eq span { background: rgba(0,0,0,0.3); }
.fp-eq span:nth-child(1){animation-delay:0s}
.fp-eq span:nth-child(2){animation-delay:.12s}
.fp-eq span:nth-child(3){animation-delay:.24s}
.fp-eq span:nth-child(4){animation-delay:.08s}
.fp-eq span:nth-child(5){animation-delay:.18s}
@keyframes fpEQ { 0%,100%{height:2px} 50%{height:9px} }

/* ── Light mode: float player ─────────────────────────── */
/* ── Fix: remove fp-expand (now using drag handle) ──── */

/* ══════════════════════════════════════════════════════════
   IMMERSIVE PLAYER MODAL — Award-winning full-screen design
   No bars. Pure fluid motion. Aura + particles + liquid waves.
   ══════════════════════════════════════════════════════════ */
.player-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  animation: pmFadeIn .4s ease;
}
@keyframes pmFadeIn { from{opacity:0} to{opacity:1} }

/* Full-screen canvas behind everything */
.ps-bg-canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  pointer-events: none; z-index: 1;
  display: block;
}

/* Radial aura — reacts to bass */
.ps-aura {
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.045) 0%,
    rgba(200,210,230,0.02) 35%,
    transparent 70%
  );
  pointer-events: none; z-index: 2;
  transition: transform .12s ease, opacity .12s ease;
  animation: auraPulse 4s ease-in-out infinite;
}
@keyframes auraPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);   opacity:.7; }
  50%      { transform: translate(-50%,-50%) scale(1.08); opacity:1; }
}

/* Close */
.ps-close {
  position: absolute; top: 24px; right: 24px; z-index: 10;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s;
  font-family: var(--fMONO);
}
.ps-close:hover { background: rgba(255,80,80,0.15); color: #ff8080; border-color: rgba(255,80,80,0.3); }

/* The card — centered, glass */
.ps-card {
  position: relative; z-index: 5;
  width: 420px; max-width: 92vw; max-height: 92vh;
  background: rgba(8,8,8,0.72);
  backdrop-filter: blur(60px) saturate(1.8);
  -webkit-backdrop-filter: blur(60px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 32px;
  padding: 36px 32px 28px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 40px 100px rgba(0,0,0,0.95),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow-y: auto;
  scrollbar-width: none;
  animation: cardIn .5s cubic-bezier(0.22,1,0.36,1) both;
}
.ps-card::-webkit-scrollbar { display: none; }
@keyframes cardIn {
  from { opacity:0; transform: scale(0.92) translateY(24px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

/* Art wrap */
.ps-art-wrap {
  position: relative; width: 200px; height: 200px;
  margin: 0 auto 4px; flex-shrink: 0;
}

/* Orbital rings (react to bass via JS) */
.ps-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
  pointer-events: none;
  animation: ringRot var(--rs,30s) linear infinite;
  top: 50%; left: 50%; transform-origin: center;
}
.r1 { width: 230px; height: 230px; margin: -115px; --rs: 28s; border-color: rgba(255,255,255,0.06); }
.r2 { width: 260px; height: 260px; margin: -130px; --rs: 42s; animation-direction: reverse; border-color: rgba(200,210,230,0.04); border-style: dashed; }
.r3 { width: 295px; height: 295px; margin: -147.5px; --rs: 60s; border-color: rgba(255,255,255,0.025); }
@keyframes ringRot { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Album art */
.ps-art {
  position: relative; z-index: 1;
  width: 200px; height: 200px;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
  background: linear-gradient(145deg, #181818, #070707);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 80px rgba(255,255,255,0.05),
    0 24px 60px rgba(0,0,0,0.95),
    inset 0 1px 0 rgba(255,255,255,0.06);
  animation: artFloat3D 6s ease-in-out infinite;
}
@keyframes artFloat3D {
  0%,100% { transform: rotateY(-5deg) rotateX(3deg) translateY(0px); }
  33%     { transform: rotateY(5deg)  rotateX(-3deg) translateY(-8px); }
  66%     { transform: rotateY(-2deg) rotateX(5deg)  translateY(-4px); }
}

/* Track info */
.ps-info { text-align: center; }
.ps-track {
  font-family: var(--fEN);
  font-size: 24px; letter-spacing: .05em; color: var(--t1);
  margin-bottom: 5px; line-height: 1.1;
}
.ps-artist {
  font-family: var(--fMONO); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--t2);
  margin-bottom: 8px;
}
.ps-tag {
  font-family: var(--fMONO); font-size: 9px; letter-spacing: .1em;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--t3); padding: 3px 12px; border-radius: 999px; display: inline-block;
}

/* Progress */
.ps-progress-wrap { display: flex; flex-direction: column; gap: 8px; }
.ps-time-row {
  display: flex; justify-content: space-between;
  font-family: var(--fMONO); font-size: 9px; color: var(--t3); letter-spacing: .06em;
}
.ps-progress-track {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.08);
  position: relative; cursor: pointer; padding: 10px 0; margin: -10px 0;
}
.ps-progress-fill {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #555, #aaa, #fff);
  position: absolute; top: 10px; left: 0;
  pointer-events: none; transition: width .1s linear;
}
.ps-progress-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.6);
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%,-50%);
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.ps-progress-track:hover .ps-progress-thumb { opacity: 1; }

/* Controls */
.ps-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ps-ctrl-btn {
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--t1); cursor: pointer; transition: all .2s;
}
.ps-ctrl-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); transform: scale(1.07); }
.ps-play-btn {
  width: 68px; height: 68px; border-radius: 50%;
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: none; color: #000;
  box-shadow: 0 0 40px rgba(255,255,255,0.2), 0 8px 24px rgba(0,0,0,0.6);
  cursor: pointer; transition: all .22s;
  animation: playBtnPulse 3s ease-in-out infinite;
}
.ps-play-btn:hover { transform: scale(1.1); box-shadow: 0 0 60px rgba(255,255,255,0.3), 0 12px 32px rgba(0,0,0,0.7); }
@keyframes playBtnPulse {
  0%,100% { box-shadow: 0 0 40px rgba(255,255,255,0.2), 0 8px 24px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 60px rgba(255,255,255,0.3), 0 8px 24px rgba(0,0,0,0.6); }
}

/* Volume */
.ps-vol-row { display: flex; align-items: center; gap: 10px; }
.ps-vol-icon { font-size: 13px; opacity: 0.5; flex-shrink: 0; }
.ps-vol-track {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.08);
  position: relative; cursor: pointer; padding: 8px 0; margin: -8px 0;
}
.ps-vol-fill {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.35);
  position: absolute; top: 8px; left: 0; pointer-events: none; width: 80%;
}
.ps-vol-thumb {
  width: 11px; height: 11px; border-radius: 50%; background: #fff;
  position: absolute; top: 50%; left: 80%;
  transform: translate(-50%,-50%);
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.ps-vol-track:hover .ps-vol-thumb { opacity: 1; }

/* Next section */
.ps-next-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ps-next-label {
  font-family: var(--fMONO); font-size: 8px; color: var(--t3);
  letter-spacing: .22em; text-transform: uppercase;
}
.ps-playlist-toggle {
  font-family: var(--fMONO); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t2);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; padding: 5px 12px; cursor: pointer; transition: all .18s;
}
.ps-playlist-toggle:hover { background: rgba(255,255,255,0.08); color: var(--t1); }

/* Next card */
.ps-next-card {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 15px; border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer; transition: all .2s;
}
.ps-next-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.ps-next-emoji { font-size: 20px; flex-shrink: 0; }
.ps-next-info { flex: 1; min-width: 0; }
.ps-next-name { font-family: var(--fMONO); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-next-artist { font-family: var(--fMONO); font-size: 9px; color: var(--t3); letter-spacing: .06em; margin-top: 2px; }
.ps-next-arrow { font-size: 16px; color: var(--t3); flex-shrink: 0; transition: transform .2s; }
.ps-next-card:hover .ps-next-arrow { transform: translateX(4px); color: var(--t1); }

/* Playlist */
.ps-playlist-controls { display: flex; flex-direction: column; gap: 8px; }
.ps-playlist {
  max-height: 190px; overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.pl-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid rgba(255,255,255,0.04); font-family: var(--fMONO);
}
.pl-item:last-child { border-bottom: none; }
.pl-item:hover { background: rgba(255,255,255,0.04); }
.pl-item.pl-active { background: rgba(255,255,255,0.07); }
.pl-num { font-size: 9px; color: var(--t3); width: 16px; text-align: center; flex-shrink: 0; }
.pl-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; flex: 1; text-transform: uppercase; }
.pl-artist { font-size: 9px; color: var(--t3); }

/* Playlist controls */
.pl-controls-row { display: flex; gap: 8px; }
.pl-search-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 7px 12px;
}
.pl-search-wrap input { background: none; border: none; outline: none; color: var(--t1); font-family: inherit; font-size: 12px; flex: 1; }
.pl-search-wrap input::placeholder { color: var(--t3); }
.pl-filter-select {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; color: var(--t2); font-family: var(--fMONO); font-size: 10px;
  padding: 7px 10px; outline: none; cursor: pointer;
}

/* Mobile */
@media (max-width: 500px) {
  .ps-card { padding: 28px 20px 24px; border-radius: 24px; }
  .ps-art-wrap, .ps-art { width: 160px; height: 160px; }
  .ps-art { font-size: 58px; border-radius: 20px; }
  .r1 { width: 190px; height: 190px; margin: -95px; }
  .r2 { width: 215px; height: 215px; margin: -107.5px; }
  .r3 { width: 240px; height: 240px; margin: -120px; }
  .float-player { width: calc(100vw - 32px); }
}

/* ─ v4 overrides ────────────────────────────────────────── */

/* Stars need lower opacity for the space aesthetic */
.star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: starP var(--d,3s) var(--dl,0s) ease-in-out infinite;
}
@keyframes starP { 0%,100%{opacity:var(--lo,.04)} 50%{opacity:var(--hi,.3)} }
.stars-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }

/* Float player sits above everything on landing too */
.float-player { z-index: 800; position: fixed !important; }

/* Main site background stays dark */
.main-site { background: var(--black); }
.main-content { background: var(--black); }

/* Landing image layers get pointer-events:none already in .css */
/* Make sure landing rocks don't block content clicks */
.landing-rock-left,
.landing-rock-right,
.landing-rock-tl,
.landing-rock-tr,
.landing-bg-asteroids,
.chrome-orb,
.orbital-ring,
.landing-ghost-text,
.wireframe-geo { pointer-events: none !important; }

/* Smooth scroll to main site */
#main-site { scroll-margin-top: 0; }

/* Landing minimum height on small screens */
@media (max-height: 700px) {
  .hero-title { font-size: 80px; }
  .family-avatar { width: 80px; height: 80px; }
  .family-avatar .avatar-emoji { font-size: 36px; }
}

/* ══════════════════════════════════════════════════════════
   PREMIUM PLAYER — Button & Visualizer Upgrades  v5
   ══════════════════════════════════════════════════════════ */

/* Play button — larger glow ring, more premium feel */
.ps-play-btn {
  position: relative;
  width: 72px !important; height: 72px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  font-size: 24px !important;
  box-shadow:
    0 0 0 8px rgba(255,255,255,0.03),
    0 0 0 16px rgba(255,255,255,0.015),
    0 12px 40px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !important;
}
.ps-play-btn:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.45) !important;
  box-shadow:
    0 0 0 8px rgba(255,255,255,0.05),
    0 0 0 18px rgba(255,255,255,0.025),
    0 0 50px rgba(255,255,255,0.12),
    0 12px 40px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: scale(1.07) !important;
}
.ps-play-btn:active { transform: scale(0.96) !important; }

/* Prev/Next buttons — glass morphism exact */
.ps-ctrl-btn {
  width: 48px !important; height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 17px !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: all 0.22s !important;
  backdrop-filter: blur(8px) !important;
}
.ps-ctrl-btn:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.95) !important;
  box-shadow:
    0 0 20px rgba(255,255,255,0.06),
    0 4px 20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transform: translateY(-1px) !important;
}

/* Volume icon buttons */
.ps-vol-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  font-size: 13px;
  transition: all 0.18s;
}
.ps-vol-icon:hover { background: rgba(255,255,255,0.08); }

/* Volume track — thicker, more tactile */
.ps-vol-track {
  flex: 1; height: 4px !important;
  border-radius: 2px;
  background: rgba(255,255,255,0.08) !important;
  position: relative; cursor: pointer;
  padding: 10px 0 !important; margin: -10px 0 !important;
}
.ps-vol-fill {
  height: 4px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.85)) !important;
  border-radius: 2px;
  position: absolute; top: 10px; left: 0;
  pointer-events: none; width: 80%;
  box-shadow: 0 0 6px rgba(255,255,255,0.15);
}
.ps-vol-thumb {
  width: 14px !important; height: 14px !important;
  border-radius: 50%; background: #fff !important;
  box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* Progress track improvements */
.ps-progress-fill {
  background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.9) 100%) !important;
  box-shadow: 0 0 8px rgba(255,255,255,0.2) !important;
}
.ps-progress-thumb {
  width: 14px !important; height: 14px !important;
  box-shadow: 0 0 12px rgba(255,255,255,0.6), 0 2px 8px rgba(0,0,0,0.5) !important;
}

/* EQ canvas container gets a subtle bg */
.ps-eq-canvas {
  background: rgba(255,255,255,0.015) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Player stage left gets a bit more depth */
.ps-left {
  background: linear-gradient(
    160deg,
    rgba(18,18,18,1) 0%,
    rgba(10,10,10,1) 100%
  ) !important;
}

/* Floating player improvements */
.fp-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.95) !important;
}

/* ══════════════════════════════════════════════════════════
   AWWWARDS FEATURES — v6
   2. Custom cursor with states
   3. Magnetic buttons
   4. Character-by-character text reveal
   5. Scroll-driven animations
   6. Micro-interactions
   7. Page transitions
   ══════════════════════════════════════════════════════════ */

/* ── 2. CUSTOM CURSOR ─────────────────────────────────────── */
/* cursor restored to default */

.cursor-dot {
  position: fixed; z-index: 99990; pointer-events: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: width .18s, height .18s, opacity .18s;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed; z-index: 99989; pointer-events: none;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  transform: translate(-50%, -50%);
  transition: width .35s cubic-bezier(.4,0,.2,1),
              height .35s cubic-bezier(.4,0,.2,1),
              border-color .25s,
              background .25s;
}
.cursor-label {
  position: fixed; z-index: 99991; pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: #000; text-transform: uppercase;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .2s; white-space: nowrap;
  mix-blend-mode: difference;
}

/* Hover states */
body.cursor-hover .cursor-ring {
  width: 72px; height: 72px;
  border-color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.06);
}
body.cursor-hover .cursor-dot { opacity: 0; }
body.cursor-hover .cursor-label { opacity: 1; }

body.cursor-click .cursor-ring {
  width: 28px; height: 28px;
  background: rgba(255,255,255,.2);
}

/* ── 3. MAGNETIC BUTTONS ──────────────────────────────────── */
.magnetic {
  transition: transform .4s cubic-bezier(.23,1,.32,1) !important;
  display: inline-block;
}

/* ── 4. TEXT REVEAL (char-by-char) ───────────────────────── */
.reveal-text { overflow: hidden; display: block; }
.reveal-char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .7s cubic-bezier(.22,1,.36,1),
              opacity .5s ease;
  transition-delay: var(--cd, 0s);
}
.reveal-char.visible {
  transform: translateY(0);
  opacity: 1;
}
/* Word spacing preservation */
.reveal-char.space { display: inline; width: .28em; }

/* ── 5. SCROLL-DRIVEN ANIMATIONS ─────────────────────────── */
.scroll-fade {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--sd, 0s);
}
.scroll-fade.visible { opacity: 1; transform: translateY(0); }

.scroll-fade-left {
  opacity: 0; transform: translateX(-32px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--sd, 0s);
}
.scroll-fade-left.visible { opacity: 1; transform: translateX(0); }

.scroll-scale {
  opacity: 0; transform: scale(.92);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--sd, 0s);
}
.scroll-scale.visible { opacity: 1; transform: scale(1); }

/* ── 6. MICRO-INTERACTIONS ────────────────────────────────── */

/* Member card ripple */
.family-member { position: relative; overflow: hidden; }
.ripple-circle {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.12);
  transform: scale(0); pointer-events: none;
  animation: rippleOut .6s ease-out forwards;
}
@keyframes rippleOut {
  to { transform: scale(4); opacity: 0; }
}

/* Beat card shine */
.beat-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.07) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: none; pointer-events: none;
  border-radius: inherit;
}
.beat-card:hover::after {
  transform: translateX(100%);
  transition: transform .5s ease;
}

/* Nav link underline slide */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: rgba(255,255,255,.6);
  transition: width .3s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Join button glow pulse on idle */
.join-btn {
  animation: joinPulse 4s ease-in-out infinite;
}
@keyframes joinPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 20px 4px rgba(255,255,255,.06); }
}

/* ── 7. PAGE TRANSITION ───────────────────────────────────── */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: #000;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .7s cubic-bezier(.77,0,.18,1);
  pointer-events: none;
}
.page-transition-overlay.active {
  clip-path: circle(150% at 50% 50%);
  pointer-events: all;
}
.page-transition-overlay.fade-out {
  clip-path: circle(0% at 50% 50%);
}

/* ── SCROLL PROGRESS BAR (top of page) ───────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.8));
  transition: width .1s linear;
  pointer-events: none;
}

/* ── NOISE on all glass elements (film grain) ─────────────── */
.glass-panel::after,
.liquid-glass::after,
.float-player::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px;
  opacity: .018; pointer-events: none;
  mix-blend-mode: overlay;
}

/* ── AMBIENT VIDEO BG (placeholder style) ────────────────── */
.ambient-glow {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(
    ellipse 40% 35% at var(--mx, 50%) var(--my, 40%),
    rgba(255,255,255,.022) 0%, transparent 65%
  );
  pointer-events: none;
  transition: background .3s ease;
}


/* ══════════════════════════════════════════════════════════
   v7 FIXES
   ══════════════════════════════════════════════════════════ */

/* ── Typography SELF MADE — super custom legible ─────────── */
/* Remove blur/unreadable effects, go for crisp chrome */
.hero-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(100px, 16vw, 200px) !important;
  line-height: 0.84 !important;
  letter-spacing: 0.08em !important;
  background: linear-gradient(
    180deg,
    #ffffff  0%,
    #f0f0f0  8%,
    #e0e2e6  20%,
    #c8ccd4  34%,
    #9aa0ab  50%,
    #c8ccd4  64%,
    #e8eaed  76%,
    #ffffff  88%,
    #d0d4da  100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter:
    drop-shadow(0 2px 1px rgba(0,0,0,0.95))
    drop-shadow(0 8px 20px rgba(0,0,0,0.85))
    drop-shadow(0 0 40px rgba(255,255,255,0.07)) !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}
/* Ghost text behind — subtle, not blurry */
.hero-title-wrap::before {
  filter: blur(6px) !important;
  opacity: 0.06 !important;
}

/* ── Light mode: apply to FULL page including landing ─────── */
.light-mode .landing {
  background: linear-gradient(180deg, #f5f5f5 0%, #eeeeee 100%) !important;
}
.light-mode .landing::after {
  background:
    radial-gradient(ellipse 30% 60% at 35% 0%, rgba(0,0,0,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 20% 50% at 65% 0%, rgba(0,0,0,0.04) 0%, transparent 55%) !important;
}
.light-mode .landing-bg-asteroids {
  mix-blend-mode: multiply !important;
  opacity: 0.3 !important;
  filter: brightness(0.6) contrast(1.2) !important;
}
.light-mode .landing-rock-left img,
.light-mode .landing-rock-right img,
.light-mode .landing-rock-tl img,
.light-mode .landing-rock-tr img {
  filter: brightness(0.55) contrast(1.3) saturate(0) !important;
  mix-blend-mode: multiply !important;
}
.light-mode .hero-title {
  background: linear-gradient(180deg, #111 0%, #333 30%, #666 55%, #333 75%, #111 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}
.light-mode .hero-welcome,
.light-mode .hero-tagline { color: rgba(0,0,0,0.5) !important; }
.light-mode .hero-ghost-text { -webkit-text-stroke-color: rgba(0,0,0,0.04) !important; }
.light-mode .landing-ghost-text { -webkit-text-stroke-color: rgba(0,0,0,0.04) !important; }
.light-mode .cta-btn {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.2) !important;
  color: #111 !important;
}
.light-mode .family-member:hover .family-avatar {
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 0 10px rgba(0,0,0,0.05);
}
.light-mode .family-avatar {
  border-color: rgba(0,0,0,0.15) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
.light-mode .family-avatar::after { display: none; }
.light-mode .family-role { color: rgba(0,0,0,0.4) !important; }
.light-mode .family-label { color: rgba(0,0,0,0.3) !important; }
.light-mode .nav-link { color: rgba(0,0,0,0.5) !important; }
.light-mode .nav-link:hover, .light-mode .nav-link.active { color: #000 !important; }
.light-mode .join-btn {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.2) !important;
  color: #111 !important;
}
.light-mode .nav-logo-text { color: #111 !important; border-color: rgba(0,0,0,0.25) !important; }
.light-mode .nav-logo-img { filter: brightness(0) !important; }
.light-mode .auth-logo img { filter: brightness(0) !important; }
.light-mode .scroll-label { color: rgba(0,0,0,0.3) !important; }
.light-mode .orbital-ring { border-color: rgba(0,0,0,0.1) !important; }
.light-mode .chrome-orb {
  background: radial-gradient(circle at 32% 28%, #bbb 0%, #888 40%, #444 70%, #222 100%) !important;
}

/* ── Float player — fix RTL direction ─────────────────────── */
.float-player {
  direction: ltr !important;
}

/* ── Light mode: cart badge, numbers visible ─────────────── */
.light-mode .cart-badge { background: #111 !important; color: #fff !important; }
.light-mode .hs-val     { color: #111 !important; }
.light-mode .hs-lbl     { color: #555 !important; }
.light-mode .beat-bpm   { color: #333 !important; background: rgba(0,0,0,.07) !important; border-color: rgba(0,0,0,.15) !important; }
.light-mode .beat-price { color: #333 !important; background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.12) !important; }
.light-mode .member-badge { color: #333 !important; background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.15) !important; }
.light-mode .member-name  { color: #111 !important; }

/* ── Light mode: playlist names visible ──────────────────── */
.light-mode .pl-title    { color: #111 !important; }
.light-mode .pl-artist   { color: #555 !important; }
.light-mode .pl-bpm      { color: #333 !important; }
.light-mode .pl-item     { border-color: rgba(0,0,0,.08) !important; }
.light-mode .pl-item:hover { background: rgba(0,0,0,.04) !important; }
.light-mode .pl-item.pl-active { background: rgba(0,0,0,.08) !important; color: #111 !important; }
.light-mode .pl-group-header { color: #555 !important; border-color: rgba(0,0,0,.08) !important; }
.light-mode .ps-playlist { border-color: rgba(0,0,0,.1) !important; }
.light-mode .ps-playlist-controls { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.1) !important; }

/* ── Visualizer — remove any remaining bar styles ─────────── */
/* The wave is handled in JS — just ensure canvas has no bg bars */
.ps-eq-canvas { image-rendering: crisp-edges; }

/* ── Playlist controls styling ───────────────────────────── */
.ps-playlist-controls {
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  margin-bottom: 8px;
  display: none;
}
.pl-controls-row {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 8px;
}
.pl-search-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 6px 10px;
}
.pl-search-wrap input {
  background: none; border: none; outline: none;
  color: var(--t1); font-family: var(--fMONO); font-size: 10px;
  letter-spacing: .06em; flex: 1;
}
.pl-search-wrap input::placeholder { color: var(--t3); }
.pl-filter-select {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 6px 10px;
  color: var(--t1); font-family: var(--fMONO);
  font-size: 10px; letter-spacing: .06em;
  outline: none; cursor: pointer;
}
.pl-filter-select option { background: #111; color: #fff; }
.light-mode .pl-filter-select option { background: #fff; color: #111; }
.pl-artist-row { }

/* Playlist group header */
.pl-group-header {
  font-family: var(--fMONO); font-size: 8px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--t3);
  padding: 8px 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
/* Type dots */
.pl-type-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.dot-beat  { background: rgba(255,255,255,.4); }
.dot-track { background: rgba(255,200,80,.6); }
.pl-info { flex: 1; min-width: 0; }
.pl-bpm, .pl-dur {
  font-family: var(--fMONO); font-size: 9px;
  color: var(--t3); flex-shrink: 0;
}

/* ── Panel manage rows ────────────────────────────────────── */
.manage-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--g-bdr);
  font-family: var(--fMONO); font-size: 11px; color: var(--t1);
}
.manage-actions { display: flex; gap: 6px; }
.manage-btn {
  background: var(--g-bg); border: 1px solid var(--g-bdr);
  border-radius: var(--rSM); padding: 4px 8px;
  font-size: 13px; cursor: pointer; transition: all .18s;
}
.edit-btn:hover { background: rgba(255,200,80,.12); border-color: rgba(255,200,80,.3); }
.del-btn:hover  { background: rgba(255,60,60,.12);  border-color: rgba(255,60,60,.3); }

/* ── Image filters — better blend ────────────────────────── */
.landing-rock-left img {
  filter: brightness(0.32) contrast(1.55) saturate(0) !important;
  mix-blend-mode: lighten;
}
.landing-rock-right img {
  filter: brightness(0.28) contrast(1.6) saturate(0) !important;
  mix-blend-mode: lighten;
}
.landing-rock-tl img, .landing-rock-tr img {
  filter: brightness(0.35) contrast(1.5) saturate(0) !important;
  mix-blend-mode: screen;
}
.landing-bg-asteroids {
  filter: brightness(0.28) contrast(1.5) !important;
  mix-blend-mode: screen !important;
}

/* ══════════════════════════════════════════════════════════
   RELEASES SEARCH BAR
   ══════════════════════════════════════════════════════════ */
.releases-search-wrap {
  margin-bottom: 24px;
}
.releases-search-bar {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 12px 18px;
  max-width: 520px;
  transition: border-color .2s, box-shadow .2s;
}
.releases-search-bar:focus-within {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 20px rgba(255,255,255,0.03);
}
.rs-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  color: rgba(255,255,255,0.3);
}
.releases-search-bar input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--t1); font-family: var(--fMONO);
  font-size: 12px; letter-spacing: .04em;
}
.releases-search-bar input::placeholder { color: rgba(255,255,255,0.25); }
.rs-clear {
  background: none; border: none;
  color: rgba(255,255,255,0.3); font-size: 12px;
  cursor: pointer; padding: 2px 4px;
  transition: color .15s; line-height: 1;
}
.rs-clear:hover { color: rgba(255,255,255,0.7); }
.releases-empty {
  font-family: var(--fMONO); font-size: 11px;
  color: rgba(255,255,255,0.2); letter-spacing: .1em;
  text-align: center; padding: 40px 0;
}
.light-mode .releases-search-bar {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
.light-mode .releases-search-bar:focus-within { border-color: rgba(0,0,0,0.25); }
.light-mode .rs-icon { color: rgba(0,0,0,0.3); }
.light-mode .releases-search-bar input { color: #111; }
.light-mode .releases-search-bar input::placeholder { color: rgba(0,0,0,0.25); }


/* ═══════════════════════════════════════════════════════════
   FEATURES PATCH CSS
   ═══════════════════════════════════════════════════════════ */

/* ── WAVEFORM on beat cards ─────────────────────────────── */
.beat-art { position:relative; overflow:hidden; }

/* Old waveform bars — replaced by galaxy canvas system */
.beat-waveform {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  z-index:3;
}
.beat-waveform .wv-bar { display:none; }
.beat-emoji-bg {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  transition:opacity 0.4s ease;
  z-index:2;
}

/* Waveform hover animation — bars dance */
@keyframes wvDance {
  0%,100% { transform:scaleY(1); }
  50%      { transform:scaleY(1.6); }
}
.beat-card:hover .wv-bar {
  animation:wvDance .6s ease-in-out infinite;
  animation-delay:calc(var(--wv-idx) * 0.04s);
  fill:rgba(255,255,255,.85);
}

/* ── SKELETON LOADER ─────────────────────────────────────── */
.beat-card-skeleton { pointer-events:none; cursor:default; }
.sk-pulse {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 75%
  );
  background-size:200% 100%;
  animation:skShimmer 1.4s ease-in-out infinite;
  animation-delay:var(--sk-delay,0s);
  border-radius:6px;
}
@keyframes skShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
.sk-art  { width:100%; aspect-ratio:1; border-radius:10px; margin-bottom:10px; }
.sk-line { height:11px; margin-bottom:7px; }
.sk-line-title { width:75%; }
.sk-line-half  { width:48%; }
.sk-line-sm    { width:30%; height:9px; }
.sk-row        { display:flex; gap:8px; margin-bottom:6px; }
.sk-btn        { width:100%; height:36px; margin-top:8px; border-radius:8px; }

/* ── MANIFESTO PAGE ──────────────────────────────────────── */
.manifesto-wrap {
  max-width:780px;
  margin:0 auto;
  padding:40px 24px 80px;
}
.manifesto-eyebrow {
  font-family:var(--fMONO);
  font-size:10px;
  letter-spacing:.4em;
  color:var(--t3);
  text-transform:uppercase;
  margin-bottom:16px;
}
.manifesto-title {
  font-family:'Bebas Neue', var(--fDISPLAY), sans-serif;
  font-size:clamp(56px,8vw,96px);
  letter-spacing:-.01em;
  line-height:1;
  color:var(--t1);
  margin-bottom:32px;
}
.manifesto-body {
  font-size:15px;
  line-height:2;
  color:var(--t2);
  font-family:system-ui,sans-serif;
  margin-bottom:48px;
  max-width:620px;
}
.manifesto-map-section {
  margin-bottom:48px;
}
.manifesto-map-label {
  font-family:var(--fMONO);
  font-size:9px;
  letter-spacing:.3em;
  color:var(--t3);
  margin-bottom:20px;
}
.iran-map-wrap {
  max-width:320px;
  margin:0 auto;
}
.iran-svg { width:100%; height:auto; }
.iran-shape {
  fill:rgba(255,255,255,.04);
  stroke:rgba(255,255,255,.18);
  stroke-width:1.5;
}
.city-dot {
  fill:rgba(255,255,255,.9);
  filter:drop-shadow(0 0 4px rgba(255,255,255,.6));
}
.city-tehran { fill:#fff; r:9; }
.city-name {
  font-family:var(--fMONO);
  font-size:9px;
  fill:rgba(255,255,255,.5);
}
.pulse-ring {
  fill:none;
  stroke:rgba(255,255,255,.4);
  stroke-width:1.5;
  animation:mapPulse 2s ease-out infinite;
}
.pulse-ring-2 { animation-delay:.7s; }
@keyframes mapPulse {
  0%   { r:9; stroke-opacity:.6; }
  100% { r:28; stroke-opacity:0; }
}
.manifesto-stats-row {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.mf-stat {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mf-val {
  font-family:'Bebas Neue',sans-serif;
  font-size:40px;
  line-height:1;
  color:var(--t1);
}
.mf-lbl {
  font-family:var(--fMONO);
  font-size:9px;
  letter-spacing:.2em;
  color:var(--t3);
  text-transform:uppercase;
}
.manifesto-quote {
  border-right:3px solid rgba(255,255,255,.2);
  padding-right:24px;
  margin:0;
  font-family:system-ui,sans-serif;
  font-size:18px;
  line-height:1.8;
  color:var(--t2);
  font-style:italic;
}

/* ── MERCH PAGE ──────────────────────────────────────────── */
.merch-coming-wrap {
  max-width:680px;
  margin:0 auto;
  padding:40px 24px 80px;
  text-align:center;
  position:relative;
}
.merch-bg-text {
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(80px,18vw,200px);
  letter-spacing:-.02em;
  color:rgba(255,255,255,.025);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  z-index:0;
}
.merch-icon-wrap {
  position:relative;
  width:100px;
  height:100px;
  margin:0 auto 32px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.merch-icon-ring {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.12);
  animation:spinRing 8s linear infinite;
}
.merch-icon-ring-2 {
  inset:-16px;
  border-color:rgba(255,255,255,.07);
  animation-duration:14s;
  animation-direction:reverse;
}
@keyframes spinRing { to { transform:rotate(360deg); } }
.merch-logo-img {
  width:50px; height:50px;
  filter:brightness(0) invert(1);
  object-fit:contain;
  position:relative;
  z-index:2;
}
.merch-eyebrow {
  font-family:var(--fMONO);
  font-size:9px;
  letter-spacing:.5em;
  color:var(--t3);
  margin-bottom:16px;
  position:relative;
  z-index:1;
}
.merch-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,9vw,88px);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--t1);
  margin-bottom:20px;
  position:relative;
  z-index:1;
}
.merch-sub {
  font-size:14px;
  color:var(--t3);
  line-height:1.8;
  margin-bottom:40px;
  position:relative;
  z-index:1;
}
.merch-preview-row {
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:44px;
  position:relative;
  z-index:1;
}
.merch-preview-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.merch-preview-art {
  width:90px;
  height:90px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .3s;
}
.merch-preview-art svg { width:70%; height:70%; }
.merch-preview-art:hover {
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  transform:translateY(-4px);
}
.merch-preview-label {
  font-family:var(--fMONO);
  font-size:9px;
  letter-spacing:.2em;
  color:var(--t3);
  text-transform:uppercase;
}
.merch-notify-wrap { position:relative; z-index:1; }
.merch-notify-label {
  font-family:var(--fMONO);
  font-size:10px;
  letter-spacing:.25em;
  color:var(--t3);
  margin-bottom:14px;
  text-transform:uppercase;
}
.merch-email-row {
  display:flex;
  gap:0;
  max-width:400px;
  margin:0 auto 10px;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(12px);
}
.merch-email-input {
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  padding:14px 20px;
  font-family:var(--fMONO);
  font-size:11px;
  letter-spacing:.05em;
  color:var(--t1);
  direction:ltr;
  text-align:left;
}
.merch-email-input::placeholder { color:var(--t3); }
.merch-notify-btn {
  background:rgba(255,255,255,.1);
  border:none;
  border-right: 1.5px solid rgba(255,255,255,.18);
  padding:0 24px;
  font-family:var(--fMONO);
  font-size:10px;
  letter-spacing:.18em;
  color:#fff;
  cursor:pointer;
  transition:background .2s;
  white-space:nowrap;
}
.merch-notify-btn:hover { background:rgba(255,255,255,.18); }
.merch-privacy {
  font-family:var(--fMONO);
  font-size:9px;
  color:rgba(255,255,255,.2);
  letter-spacing:.1em;
  margin-bottom:32px;
}
.merch-count-wrap {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  position:relative;
  z-index:1;
}
.merch-count-num {
  font-family:'Bebas Neue',sans-serif;
  font-size:48px;
  color:var(--t1);
  line-height:1;
  transition:transform .3s, color .3s;
}
.merch-count-num.merch-count-bump {
  transform:scale(1.2);
  color:rgba(255,255,255,.5);
}
.merch-count-label {
  font-family:var(--fMONO);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--t3);
  text-transform:uppercase;
}

/* ── RTL fix for merch email ────────────────────────────── */
html[dir="ltr"] .merch-notify-btn { border-right:none; border-left:1.5px solid rgba(255,255,255,.18); }



/* ═══════════════════════════════════════════════════════════
   FEATURES PATCH v2 — CSS
   ═══════════════════════════════════════════════════════════ */

/* ── WAVEFORM (موج‌شکل سینوسی) ─────────────────────────── */
.beat-art { position:relative; overflow:hidden; }

.beat-waveform {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  z-index:3;
}
/* Galaxy wave canvas — injected by JS on hover */
.galaxy-wave-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
}

.wv-line { fill:none; }
.wv-line-shadow { display:none; }
.wv-line-main   { display:none; }

.beat-emoji-bg {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  transition:opacity 0.4s ease;
  z-index:2;
}

/* Galaxy hover: emoji fades, play button lifts */
.beat-card:hover .beat-emoji-bg   { opacity: 0; }
.beat-card:hover .beat-play-overlay { opacity: 1; z-index: 6; }
.beat-card:hover .beat-play-btn {
  transform: scale(1.12);
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 20px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.1);
}

/* Beat card glow lift on hover */
.beat-card:hover {
  box-shadow:
    0 20px 50px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 60px rgba(120,80,255,.12);
}

/* ── SKELETON LOADER ─────────────────────────────────────── */
.beat-card-skeleton { pointer-events:none; cursor:default; }
.sk-pulse {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 75%
  );
  background-size:200% 100%;
  animation:skShimmer 1.4s ease-in-out infinite;
  animation-delay:var(--sk-delay,0s);
  border-radius:6px;
}
@keyframes skShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
.sk-art  { width:100%; aspect-ratio:1; border-radius:10px; margin-bottom:10px; }
.sk-line { height:11px; margin-bottom:7px; }
.sk-line-title { width:75%; }
.sk-line-half  { width:48%; }
.sk-line-sm    { width:30%; height:9px; }
.sk-row        { display:flex; gap:8px; margin-bottom:6px; }
.sk-btn        { width:100%; height:36px; margin-top:8px; border-radius:8px; }

/* ── PROFILE EDIT BUTTON ─────────────────────────────────── */
.profile-edit-btn {
  display:flex;
  align-items:center;
  gap:8px;
  position:absolute;
  top:16px;
  left:16px;
  font-family:var(--fMONO);
  font-size:10px;
  letter-spacing:.12em;
  padding:8px 16px;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:var(--t2);
  cursor:pointer;
  z-index:10;
  transition:all .2s;
}
.profile-edit-btn:hover {
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.3);
  color:var(--t1);
}
/* موبایل: بالای پروفایل‌هیرو قرار بگیره */
.profile-hero { position:relative; }

/* ── PROFILE SOCIAL LINK ────────────────────────────────── */
.profile-social-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  font-size:11px;
  font-family:var(--fMONO);
  letter-spacing:.1em;
  padding:7px 16px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--t2);
  text-decoration:none;
  transition:all .2s;
}
.profile-social-link:hover {
  background:rgba(255,255,255,.12);
  color:var(--t1);
}

/* ── PROFILE EDIT MODAL ─────────────────────────────────── */
.profile-edit-modal-inner {
  max-width:480px;
  width:92%;
  max-height:88vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
.pe-header {
  margin-bottom:20px;
}
.pe-member-name {
  font-family:var(--fMONO);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--t3);
  margin-top:4px;
}

/* عکس پروفایل در modal */
.pe-photo-section {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.pe-photo-preview {
  width:90px;
  height:90px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:border-color .2s;
}
.pe-photo-preview:hover { border-color:rgba(255,255,255,.3); }
.pe-photo-preview img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  position:absolute;
  inset:0;
}
.pe-photo-overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  opacity:0;
  transition:opacity .2s;
  font-size:.9rem;
  cursor:pointer;
}
.pe-photo-preview:hover .pe-photo-overlay { opacity:1; }
.pe-photo-overlay-text {
  font-family:var(--fMONO);
  font-size:9px;
  letter-spacing:.12em;
  color:#fff;
}
.pe-photo-hint {
  font-family:var(--fMONO);
  font-size:9px;
  color:var(--t3);
  letter-spacing:.08em;
}

/* فیلدهای modal */
.pe-label {
  display:block;
  font-family:var(--fMONO);
  font-size:9px;
  letter-spacing:.2em;
  color:var(--t3);
  margin-bottom:6px;
  text-transform:uppercase;
}
.pe-textarea {
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  color:var(--t1);
  font-family:system-ui,sans-serif;
  font-size:13px;
  line-height:1.7;
  padding:10px 12px;
  resize:vertical;
  min-height:72px;
  outline:none;
  direction:rtl;
  transition:border-color .2s;
}
.pe-textarea:focus { border-color:rgba(255,255,255,.25); }
.pe-row {
  display:flex;
  gap:12px;
}
.pe-save-row {
  display:flex;
  gap:10px;
  margin-top:20px;
}
.pe-save-row .modal-btn { flex:1; }
.pe-note {
  font-family:var(--fMONO);
  font-size:9px;
  color:var(--t3);
  letter-spacing:.06em;
  margin-top:12px;
  line-height:1.8;
  text-align:center;
}

/* ── MANIFESTO PAGE ──────────────────────────────────────── */
.manifesto-wrap {
  max-width:780px;
  margin:0 auto;
  padding:40px 24px 80px;
}
.manifesto-eyebrow {
  font-family:var(--fMONO);
  font-size:10px;
  letter-spacing:.4em;
  color:var(--t3);
  text-transform:uppercase;
  margin-bottom:16px;
}
.manifesto-title {
  font-family:'Bebas Neue',var(--fDISPLAY),sans-serif;
  font-size:clamp(56px,8vw,96px);
  letter-spacing:-.01em;
  line-height:1;
  color:var(--t1);
  margin-bottom:32px;
}
.manifesto-body {
  font-size:15px;
  line-height:2;
  color:var(--t2);
  font-family:system-ui,sans-serif;
  margin-bottom:48px;
  max-width:620px;
}
.manifesto-map-section { margin-bottom:48px; }
.manifesto-map-label {
  font-family:var(--fMONO);
  font-size:9px;
  letter-spacing:.3em;
  color:var(--t3);
  margin-bottom:20px;
}
.iran-map-wrap { max-width:320px; margin:0 auto; }
.iran-svg { width:100%; height:auto; }
.iran-shape {
  fill:rgba(255,255,255,.04);
  stroke:rgba(255,255,255,.18);
  stroke-width:1.5;
}
.city-dot { fill:rgba(255,255,255,.9); filter:drop-shadow(0 0 4px rgba(255,255,255,.6)); }
.city-tehran { r:9; }
.city-name { font-family:var(--fMONO); font-size:9px; fill:rgba(255,255,255,.5); }
.pulse-ring { fill:none; stroke:rgba(255,255,255,.4); stroke-width:1.5; animation:mapPulse 2s ease-out infinite; }
.pulse-ring-2 { animation-delay:.7s; }
@keyframes mapPulse { 0% { r:9;stroke-opacity:.6; } 100% { r:28;stroke-opacity:0; } }
.manifesto-stats-row { display:flex; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.mf-stat { display:flex; flex-direction:column; gap:4px; }
.mf-val { font-family:'Bebas Neue',sans-serif; font-size:40px; line-height:1; color:var(--t1); }
.mf-lbl { font-family:var(--fMONO); font-size:9px; letter-spacing:.2em; color:var(--t3); text-transform:uppercase; }
.manifesto-quote {
  border-right:3px solid rgba(255,255,255,.2);
  padding-right:24px;
  margin:0;
  font-family:system-ui,sans-serif;
  font-size:18px;
  line-height:1.8;
  color:var(--t2);
  font-style:italic;
}

/* ── MERCH PAGE ──────────────────────────────────────────── */
.merch-coming-wrap { max-width:680px; margin:0 auto; padding:40px 24px 80px; text-align:center; position:relative; }
.merch-bg-text { position:absolute; top:0;left:50%;transform:translateX(-50%);font-family:'Bebas Neue',sans-serif;font-size:clamp(80px,18vw,200px);letter-spacing:-.02em;color:rgba(255,255,255,.025);pointer-events:none;user-select:none;white-space:nowrap;z-index:0; }
.merch-icon-wrap { position:relative;width:100px;height:100px;margin:0 auto 32px;display:flex;align-items:center;justify-content:center; }
.merch-icon-ring { position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.12);animation:spinRing 8s linear infinite; }
.merch-icon-ring-2 { inset:-16px;border-color:rgba(255,255,255,.07);animation-duration:14s;animation-direction:reverse; }
@keyframes spinRing { to { transform:rotate(360deg); } }
.merch-logo-img { width:50px;height:50px;filter:brightness(0) invert(1);object-fit:contain;position:relative;z-index:2; }
.merch-eyebrow { font-family:var(--fMONO);font-size:9px;letter-spacing:.5em;color:var(--t3);margin-bottom:16px;position:relative;z-index:1; }
.merch-title { font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,9vw,88px);line-height:1;letter-spacing:-.01em;color:var(--t1);margin-bottom:20px;position:relative;z-index:1; }
.merch-sub { font-size:14px;color:var(--t3);line-height:1.8;margin-bottom:40px;position:relative;z-index:1; }
.merch-preview-row { display:flex;justify-content:center;gap:20px;margin-bottom:44px;position:relative;z-index:1; }
.merch-preview-item { display:flex;flex-direction:column;align-items:center;gap:10px; }
.merch-preview-art { width:90px;height:90px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:all .3s; }
.merch-preview-art svg { width:70%;height:70%; }
.merch-preview-art:hover { background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);transform:translateY(-4px); }
.merch-preview-label { font-family:var(--fMONO);font-size:9px;letter-spacing:.2em;color:var(--t3);text-transform:uppercase; }
.merch-notify-wrap { position:relative;z-index:1; }
.merch-notify-label { font-family:var(--fMONO);font-size:10px;letter-spacing:.25em;color:var(--t3);margin-bottom:14px;text-transform:uppercase; }
.merch-email-row { display:flex;max-width:400px;margin:0 auto 10px;border:1.5px solid rgba(255,255,255,.18);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.03);backdrop-filter:blur(12px); }
.merch-email-input { flex:1;background:transparent;border:none;outline:none;padding:14px 20px;font-family:var(--fMONO);font-size:11px;letter-spacing:.05em;color:var(--t1);direction:ltr;text-align:left; }
.merch-email-input::placeholder { color:var(--t3); }
.merch-notify-btn { background:rgba(255,255,255,.1);border:none;border-right:1.5px solid rgba(255,255,255,.18);padding:0 24px;font-family:var(--fMONO);font-size:10px;letter-spacing:.18em;color:#fff;cursor:pointer;transition:background .2s;white-space:nowrap; }
.merch-notify-btn:hover { background:rgba(255,255,255,.18); }
.merch-privacy { font-family:var(--fMONO);font-size:9px;color:rgba(255,255,255,.2);letter-spacing:.1em;margin-bottom:32px; }
.merch-count-wrap { display:flex;align-items:baseline;justify-content:center;gap:10px;position:relative;z-index:1; }
.merch-count-num { font-family:'Bebas Neue',sans-serif;font-size:48px;color:var(--t1);line-height:1;transition:transform .3s,color .3s; }
.merch-count-num.merch-count-bump { transform:scale(1.2);color:rgba(255,255,255,.5); }
.merch-count-label { font-family:var(--fMONO);font-size:10px;letter-spacing:.2em;color:var(--t3);text-transform:uppercase; }
html[dir="ltr"] .merch-notify-btn { border-right:none;border-left:1.5px solid rgba(255,255,255,.18); }


/* ══════════════════════════════════════════════════════════
   CITY CARDS — replaces Iran SVG map
   ══════════════════════════════════════════════════════════ */
.city-cards-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  max-width: 500px; margin: 0 auto;
  padding: 8px 0;
}
.city-card {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px;
  transition: all 0.22s;
  animation: cityCardIn 0.5s var(--ci,0.1s) cubic-bezier(0.22,1,0.36,1) both;
}
.city-card:nth-child(1){--ci:0.05s} .city-card:nth-child(2){--ci:0.12s}
.city-card:nth-child(3){--ci:0.19s} .city-card:nth-child(4){--ci:0.26s}
.city-card:nth-child(5){--ci:0.33s} .city-card:nth-child(6){--ci:0.40s}
@keyframes cityCardIn {
  from { opacity:0; transform:translateY(10px) scale(0.9); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.city-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
.city-card-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 16px rgba(255,255,255,0.3);
  animation: cityDotPulse 2.5s ease-in-out infinite;
}
.city-card:nth-child(2) .city-card-dot { animation-delay:.4s }
.city-card:nth-child(3) .city-card-dot { animation-delay:.8s }
.city-card:nth-child(4) .city-card-dot { animation-delay:1.2s }
.city-card:nth-child(5) .city-card-dot { animation-delay:1.6s }
.city-card:nth-child(6) .city-card-dot { animation-delay:2.0s }
@keyframes cityDotPulse {
  0%,100% { transform:scale(1);   box-shadow:0 0 8px rgba(255,255,255,.8); }
  50%      { transform:scale(1.4); box-shadow:0 0 14px rgba(255,255,255,1),0 0 28px rgba(255,255,255,.5); }
}
.city-card-name {
  font-family: 'Vazirmatn', sans-serif;
  font-size: 13px; color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.city-card-en {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: .1em;
  color: rgba(255,255,255,0.3); text-transform: uppercase;
}
.light-mode .city-card { background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.1); }
.light-mode .city-card:hover { background:rgba(0,0,0,0.08); }
.light-mode .city-card-dot { background:#111; box-shadow:0 0 8px rgba(0,0,0,0.5); }
.light-mode .city-card-name { color:rgba(0,0,0,0.8); }
.light-mode .city-card-en { color:rgba(0,0,0,0.35); }

/* ══════════════════════════════════════════════════════════
   BEAT WAVEFORM
   ══════════════════════════════════════════════════════════ */
.beat-waveform {
  display: block;
  width: 100%; height: 32px;
  margin: 6px 0 2px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s;
}
/* galaxy canvas handles waveform display */

/* ══════════════════════════════════════════════════════════
   PROFILE EDIT MODAL
   ══════════════════════════════════════════════════════════ */
.pedit-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
}
.pedit-overlay.visible { opacity: 1; }

.pedit-card {
  width: 460px; max-width: 94vw; max-height: 92vh;
  background: rgba(12,12,14,0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  overflow-y: auto; scrollbar-width: none;
  box-shadow: 0 40px 100px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: scale(0.94) translateY(16px);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  padding: 0 0 24px;
}
.pedit-card::-webkit-scrollbar { display: none; }
.pedit-overlay.visible .pedit-card { transform: scale(1) translateY(0); }

.pedit-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0; z-index: 2;
  background: rgba(12,12,14,0.98);
  backdrop-filter: blur(20px);
}
.pedit-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: rgba(255,255,255,0.9);
}
.pedit-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s;
}
.pedit-close:hover { background: rgba(255,60,60,0.15); color: #ff7070; }

/* Photo section */
.pedit-photo-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 24px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pedit-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, #1c1c1c, #080808);
  border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8);
  flex-shrink: 0;
  overflow: hidden;
}
.pedit-photo-actions { display: flex; gap: 10px; align-items: center; }
.pedit-upload-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .1em;
  padding: 8px 16px; border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  cursor: pointer; transition: all .18s;
}
.pedit-upload-btn:hover { background: rgba(255,255,255,0.12); }
.pedit-remove-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .08em;
  padding: 8px 14px; border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.3);
  cursor: pointer; transition: all .18s;
}
.pedit-remove-btn:hover { border-color: rgba(255,60,60,0.3); color: #ff8080; }
.pedit-photo-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: .08em;
  color: rgba(255,255,255,0.2); text-align: center;
}

/* Fields */
.pedit-fields {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 24px;
}
.pedit-field { display: flex; flex-direction: column; gap: 6px; }
.pedit-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .14em;
  color: rgba(255,255,255,0.35); text-transform: uppercase;
  display: flex; justify-content: space-between;
}
.pedit-char-count { color: rgba(255,255,255,0.2); }
.pedit-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: rgba(255,255,255,0.9);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; padding: 11px 14px;
  outline: none; transition: border-color .18s, box-shadow .18s;
  width: 100%;
}
.pedit-input:focus {
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}
.pedit-select { cursor: pointer; }
.pedit-textarea {
  resize: vertical; min-height: 72px; max-height: 120px;
  font-size: 12px; line-height: 1.6;
}
.pedit-input-prefix {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; overflow: hidden;
  transition: border-color .18s;
}
.pedit-input-prefix:focus-within {
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}
.pedit-prefix {
  padding: 0 12px; font-family: 'JetBrains Mono', monospace;
  font-size: 14px; color: rgba(255,255,255,0.3);
  border-right: 1px solid rgba(255,255,255,0.06);
  height: 100%; display: flex; align-items: center;
}
.pedit-input-inner {
  flex: 1; background: transparent; border: none;
  border-radius: 0; padding-left: 10px;
  box-shadow: none !important;
}
.pedit-input-inner:focus { border-color: transparent; box-shadow: none; }

/* Footer */
.pedit-footer {
  display: flex; gap: 10px; padding: 4px 24px 0;
}
.pedit-cancel {
  flex: 1; padding: 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .12em;
  color: rgba(255,255,255,0.4);
  cursor: pointer; transition: all .18s;
}
.pedit-cancel:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.07); }
.pedit-save {
  flex: 2; padding: 13px;
  background: #fff; border: none;
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: #000; cursor: pointer; transition: all .2s;
  box-shadow: 0 4px 20px rgba(255,255,255,0.15);
}
.pedit-save:hover { background: #e8e8e8; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(255,255,255,0.2); }
.pedit-save:active { transform: translateY(0); }

/* Profile edit button — injected into profile hero */
.profile-edit-btn {
  position: absolute; top: 16px; right: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .1em;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75);
  cursor: pointer; transition: all .2s; z-index: 5;
}
.profile-edit-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff; border-color: rgba(255,255,255,0.3);
}

/* Profile extras added by edit system */
.profile-city-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .08em;
  color: rgba(255,255,255,0.4); margin-top: 6px;
}
.profile-instagram {
  display: inline-block; margin-top: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .08em;
  color: rgba(255,255,255,0.35);
  text-decoration: none; transition: color .18s;
}
.profile-instagram:hover { color: rgba(255,255,255,0.75); }

/* Light mode overrides */
.light-mode .pedit-card {
  background: rgba(248,248,250,0.98);
  border-color: rgba(0,0,0,0.1);
}
.light-mode .pedit-header { background: rgba(248,248,250,0.99); }
.light-mode .pedit-title { color: #111; }
.light-mode .pedit-label { color: rgba(0,0,0,0.4); }
.light-mode .pedit-input {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1);
  color: #111;
}
.light-mode .pedit-input:focus { border-color: rgba(0,0,0,0.3); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
.light-mode .pedit-prefix { color: rgba(0,0,0,0.3); border-color: rgba(0,0,0,0.08); }
.light-mode .pedit-upload-btn { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: #333; }
.light-mode .pedit-save { background: #111; color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.light-mode .pedit-save:hover { background: #333; }
.light-mode .pedit-cancel { color: rgba(0,0,0,0.4); }

/* ══════════════════════════════════════════════════════════
   PANEL PROFILE CARD
   ══════════════════════════════════════════════════════════ */
.panel-profile-card {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 24px; margin-bottom: 24px;
  border-radius: 18px; position: relative;
}
.ppc-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #1c1c1c, #080808);
  border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.7);
}
.ppc-info { flex: 1; min-width: 0; }
.ppc-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .06em;
  color: var(--t1); margin-bottom: 3px;
}
.ppc-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t3); margin-bottom: 6px;
}
.ppc-bio {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--t2); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ppc-edit-btn {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .1em;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  cursor: pointer; transition: all .2s;
}
.ppc-edit-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ══════════════════════════════════════════════════════════
   UPLOAD COVER ART ROW
   ══════════════════════════════════════════════════════════ */
.upload-modal-inner { max-width: 440px !important; }
.up-cover-row {
  display: flex; gap: 16px; align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px; padding: 14px;
  margin-bottom: 4px; cursor: default;
}
.up-cover-preview {
  width: 72px; height: 72px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; cursor: pointer; overflow: hidden;
  position: relative; transition: border-color .2s;
}
.up-cover-preview:hover { border-color: rgba(255,255,255,0.4); }
.up-cover-hint {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 8px;
  letter-spacing: .1em; color: rgba(255,255,255,0.7);
  opacity: 0; transition: opacity .2s; text-align: center;
  border-radius: 10px;
}
.up-cover-preview:hover .up-cover-hint { opacity: 1; }
.up-cover-info { flex: 1; }
.up-cover-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--t1); margin-bottom: 4px;
}
.up-cover-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: .06em;
  color: var(--t3); margin-bottom: 10px;
}
.up-cover-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .1em;
  padding: 7px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--t1); cursor: pointer; transition: all .18s;
}
.up-cover-btn:hover { background: rgba(255,255,255,0.13); }