*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-primary:#0a0a0f;
  --bg-secondary:#12121a;
  --bg-card:#1a1a25;
  --bg-card-hover:#222233;
  --border:#2a2a3a;
  --text-primary:#f0f0f5;
  --text-secondary:#8888aa;
  --text-muted:#555566;
  --accent:#6c5ce7;
  --accent2:#00cec9;
  --gradient-1:linear-gradient(135deg,#6c5ce7,#a855f7);
  --gradient-2:linear-gradient(135deg,#00cec9,#0984e3);
  --gradient-3:linear-gradient(135deg,#fd79a8,#e84393);
  --gradient-4:linear-gradient(135deg,#00b894,#00cec9);
  --gradient-5:linear-gradient(135deg,#fdcb6e,#e17055);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 8px 32px rgba(0,0,0,0.4);
  --glow:0 0 40px rgba(108,92,231,0.15);
}
body{font-family:'Inter',sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}
.public-body{position:relative}

.public-bg-grid{position:fixed;top:0;left:0;width:100%;height:100%;background-image:
  linear-gradient(rgba(108,92,231,0.03) 1px,transparent 1px),
  linear-gradient(90deg,rgba(108,92,231,0.03) 1px,transparent 1px);
  background-size:60px 60px;pointer-events:none;z-index:0}

.public-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px 40px;
  background:rgba(10,10,15,0.8);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800}
.brand-icon{width:40px;height:40px;border-radius:12px;background:var(--gradient-1);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;box-shadow:0 4px 20px rgba(108,92,231,0.4)}
.nav-links{display:flex;gap:8px}
.nav-link{padding:10px 20px;border-radius:12px;color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:500;transition:all .3s;display:flex;align-items:center;gap:8px}
.nav-link:hover,.nav-link.active{color:var(--text-primary);background:rgba(108,92,231,0.15)}

.public-main{position:relative;z-index:1;padding:100px 40px 60px;max-width:1400px;margin:0 auto}

.hero{display:flex;align-items:center;justify-content:space-between;padding:80px 0 60px;gap:60px}
.hero-content{flex:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;background:rgba(108,92,231,0.15);border:1px solid rgba(108,92,231,0.3);font-size:13px;color:var(--accent);margin-bottom:24px;font-weight:500}
.hero h1{font-size:56px;font-weight:900;line-height:1.1;margin-bottom:16px}
.gradient-text{background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:18px;color:var(--text-secondary);line-height:1.6;max-width:480px}
.hero-stats{display:flex;gap:32px;margin-top:40px}
.stat-item{display:flex;flex-direction:column;align-items:center;padding:20px 28px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border)}
.stat-num{font-size:32px;font-weight:800;background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{font-size:13px;color:var(--text-secondary);margin-top:4px}

.hero-visual{position:relative;width:350px;height:350px;flex-shrink:0}
.floating-card{position:absolute;width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);animation:float 6s ease-in-out infinite}
.fc-1{top:10%;left:10%;background:var(--gradient-1);animation-delay:0s}
.fc-2{top:5%;right:10%;background:var(--gradient-2);animation-delay:1s}
.fc-3{bottom:15%;left:25%;background:var(--gradient-3);animation-delay:2s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}

.content-section{margin-top:20px}
.tab-container{display:flex;gap:8px;margin-bottom:32px;padding:6px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);width:fit-content}
.tab-btn{padding:12px 28px;border-radius:12px;border:none;background:transparent;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif}
.tab-btn.active{background:var(--gradient-1);color:#fff;box-shadow:0 4px 20px rgba(108,92,231,0.4)}
.tab-btn:hover:not(.active){color:var(--text-primary);background:rgba(108,92,231,0.1)}

.tab-content{display:none;animation:fadeIn .4s ease}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.breadcrumb{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding:14px 20px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border);flex-wrap:wrap}
.breadcrumb button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:14px;font-family:'Inter',sans-serif;font-weight:500;padding:4px 8px;border-radius:8px;transition:all .2s}
.breadcrumb button:hover{background:rgba(108,92,231,0.15)}
.breadcrumb span{color:var(--text-muted);font-size:13px}
.breadcrumb span:last-child{color:var(--text-primary);font-weight:500}

.item-grid{display:flex;flex-direction:column;gap:8px}
.grid-card{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .3s}
.grid-card:hover{border-color:rgba(108,92,231,0.4);background:var(--bg-card-hover);transform:translateX(4px);box-shadow:var(--glow)}
.song-card{cursor:default}
.song-card:hover{transform:translateX(4px)}
.song-number{width:36px;height:36px;border-radius:10px;background:rgba(108,92,231,0.15);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--accent);flex-shrink:0}
.card-icon-wrap{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;flex-shrink:0;overflow:hidden}
.card-icon-img{width:100%;height:100%;object-fit:cover}
.gradient-purple{background:var(--gradient-1)}
.gradient-blue{background:var(--gradient-2)}
.gradient-green{background:var(--gradient-4)}
.gradient-orange{background:var(--gradient-5)}
.gradient-pink{background:var(--gradient-3)}
.gradient-teal{background:linear-gradient(135deg,#00b894,#55efc4)}
.card-info{flex:1;min-width:0}
.card-info h3{font-size:15px;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-info p{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-arrow{color:var(--text-muted);transition:all .3s}
.grid-card:hover .card-arrow{color:var(--accent);transform:translateX(4px)}
.download-btn{width:40px;height:40px;border-radius:10px;background:var(--gradient-1);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px;flex-shrink:0;transition:all .3s;box-shadow:0 4px 16px rgba(108,92,231,0.3)}
.download-btn:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(108,92,231,0.5)}
.size-badge{font-size:11px;padding:3px 8px;border-radius:6px;background:rgba(136,136,170,0.1);color:var(--text-secondary);display:inline-block;margin-top:4px}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:var(--text-muted);text-align:center}
.empty-state i{font-size:48px;margin-bottom:16px;opacity:0.3}
.empty-state h3{font-size:18px;margin-bottom:8px;color:var(--text-secondary)}
.empty-state p{font-size:14px}

.public-footer{text-align:center;padding:40px;color:var(--text-muted);font-size:13px;border-top:1px solid var(--border)}

@media(max-width:768px){
  .public-nav{padding:12px 20px;flex-wrap:wrap;gap:12px}
  .nav-links{gap:4px;flex-wrap:wrap}
  .nav-link{padding:8px 12px;font-size:12px}
  .public-main{padding:100px 16px 40px}
  .hero{flex-direction:column;padding:40px 0;gap:30px;text-align:center}
  .hero h1{font-size:32px}
  .hero-visual{width:200px;height:200px}
  .floating-card{width:60px;height:60px;font-size:24px}
  .hero-stats{justify-content:center}
  .tab-container{width:100%;overflow-x:auto}
}