:root {
  --bg: #0e0a1f;
  --bg-elevated: #1a1330;
  --accent: #ec4899;
  --accent-hover: #f472b6;
  --accent-secondary: #22c55e;
  --text-primary: #ffffff;
  --text-secondary: #b8aed4;
  --text-tertiary: #7c6fa0;
  --card-radius: 10px;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Helvetica Neue', Arial, sans-serif; }
body { background: radial-gradient(circle at 20% 0%, #3b1e6d 0%, var(--bg) 45%); color:var(--text-primary); overflow-x:hidden; }

.navbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 48px; background:linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
  transition: background 0.3s ease;
}
.nav-left { display:flex; align-items:center; gap:44px; }
.logo-img { height: 46px; object-fit: contain; }
.nav-links a {
  color:var(--text-secondary); text-decoration:none; margin-right:28px;
  font-size:14px; font-weight:500; transition:color 0.2s; padding-bottom:4px;
}
.nav-links a.active { color:var(--text-primary); font-weight:700; border-bottom:2px solid var(--accent-secondary); }
.nav-links a:hover { color:var(--text-primary); }
.nav-right { display:flex; align-items:center; gap:20px; }
.search-box {
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); border-radius:6px;
  padding:10px 14px; color:var(--text-primary); font-size:13px; width:240px; transition:all 0.2s;
}
.search-box:focus { outline:none; border-color:var(--accent); background:rgba(255,255,255,0.12); }
.search-box::placeholder { color:var(--text-tertiary); }
.profile-icon {
  font-size:20px; cursor:pointer; width:38px; height:38px; border-radius:6px;
  background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center;
}

.hero {
  position:relative; height:56vh; min-height:420px; max-height:640px;
  background-size:cover; background-position:center;
  display:flex; align-items:center; padding:0 72px;
}
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to top, var(--bg) 8%, transparent 55%), linear-gradient(to right, rgba(0,0,0,0.85), rgba(0,0,0,0.2) 55%, transparent 75%);
}
.hero-content { position:relative; z-index:2; max-width:600px; margin-top:70px; }
.hero-tag {
  color:var(--accent); font-weight:700; font-size:13px; letter-spacing:2.5px; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.hero-tag::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--accent-secondary); animation: pulse 1.4s infinite; }
.hero-content h1 { font-size:52px; font-weight:800; margin-bottom:18px; line-height:1.1; letter-spacing:-0.5px; }
.hero-content p { font-size:16px; color:var(--text-secondary); line-height:1.6; margin-bottom:30px; max-width:480px; }
.hero-buttons { display:flex; gap:14px; }
.hero-buttons button {
  padding:14px 32px; font-size:15px; font-weight:700; border:none; border-radius:6px;
  cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:all 0.2s;
}
.btn-play { background:var(--accent); color:#101418; }
.btn-play:hover { background:var(--accent-hover); transform:translateY(-1px); }
.btn-info { background:rgba(255,255,255,0.12); color:var(--text-primary); border:1px solid rgba(255,255,255,0.2); }
.btn-info:hover { background:rgba(255,255,255,0.2); }

.content { padding: 0 48px 140px; position:relative; z-index:2; margin-top:20px; }
.row-section { margin-bottom:52px; transition: opacity 0.2s ease; }
.row-section h2 {
  font-size:21px; margin-bottom:18px; font-weight:700; padding-left:2px;
  display:flex; align-items:center; justify-content:space-between;
}

.card-grid {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; padding:6px 2px 16px;
}

.card {
  position:relative; width:100%; height:150px; border-radius:var(--card-radius); overflow:hidden;
  cursor:pointer; transition: transform 0.28s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.28s ease, border-color 0.28s ease;
  background:var(--bg-elevated); border:0.5px solid rgba(236,72,153,0.12);
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.card:hover {
  transform: scale(1.08) translateY(-6px); box-shadow:0 16px 32px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(236,72,153,0.3);
  border-color: rgba(236,72,153,0.35);
  z-index:5;
}
.card img { width:100%; height:100%; object-fit:contain; display:block; opacity:1; }
.card .card-overlay {
  position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.92) 5%, rgba(0,0,0,0.15) 55%, transparent 75%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:14px;
  opacity:0; transition:opacity 0.25s ease;
}
.no-touch .card:hover .card-overlay { opacity:1; }
.card .card-title { font-size:15px; font-weight:700; line-height:1.3; }
.card .card-sub { font-size:12px; color:var(--text-secondary); margin-top:4px; font-weight:400; }
.card .live-badge {
  position:absolute; top:10px; left:10px; background:var(--accent-secondary); color:#03211d; font-size:10px;
  font-weight:700; padding:3px 8px; border-radius:4px; letter-spacing:0.8px; box-shadow:0 2px 6px rgba(0,0,0,0.4);
  opacity:0; transition:opacity 0.25s ease;
}
.no-touch .card:hover .live-badge { opacity:1; }

.player-bar {
  position:fixed; bottom:0; left:0; right:0; height:76px; background:rgba(18,18,20,0.98);
  backdrop-filter: blur(10px); border-top:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:space-between; padding:0 40px; z-index:200;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.player-info { display:flex; align-items:center; gap:14px; }
.player-info img { width:48px; height:48px; border-radius:6px; object-fit:cover; background:var(--bg-elevated); }
#player-title { font-size:14px; font-weight:700; margin-bottom:2px; }
#player-sub { font-size:12px; color:var(--text-tertiary); }
#play-pause {
  width:44px; height:44px; border-radius:50%; background:var(--accent); color:#101418; border:none;
  font-size:16px; cursor:pointer; transition:background 0.2s;
}
#play-pause:hover { background:var(--accent-hover); }
#play-pause:disabled { opacity:0.6; cursor:default; }
#play-pause.loading {
  position: relative;
  color: transparent;
}
#play-pause.loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--accent-secondary); display:none; }
.live-dot.on { display:inline-block; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%{opacity:1;} 50%{opacity:0.35;} 100%{opacity:1;} }

.player-bar.player-error { border-top:1px solid rgba(239,68,68,0.5); }
.player-bar.player-error #player-sub { color:#f87171; }
.player-bar.player-error #play-pause { background:#ef4444; }

.no-results {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
  color: var(--text-secondary);
}
.no-results.show { display: flex; }
.no-results-icon { font-size: 40px; margin-bottom: 16px; opacity: 0.6; }
.no-results p { font-size: 15px; margin-bottom: 20px; }
.btn-clear-search {
  padding: 10px 24px; font-size: 13px; font-weight: 600; border-radius: 6px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: var(--text-primary); cursor: pointer; transition: all 0.2s;
}
.btn-clear-search:hover { background: var(--accent); border-color: var(--accent); color: #101418; }

.card-fav-btn {
  position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.5); border:none; color:#fff;
  font-size:16px; width:28px; height:28px; border-radius:50%; cursor:pointer; z-index:6;
  display:flex; align-items:center; justify-content:center; transition:all 0.2s;
  opacity:0;
}
.no-touch .card:hover .card-fav-btn { opacity:1; }
.card-fav-btn.active { opacity:1; color:var(--accent); }

.player-controls { display:flex; align-items:center; gap:14px; }
.skip-btn {
  background:transparent; border:none; color:var(--text-secondary); font-size:18px; cursor:pointer;
  transition:color 0.2s;
}
.skip-btn:hover { color:var(--text-primary); }
.fav-btn {
  background:transparent; border:none; color:var(--text-secondary); font-size:20px; cursor:pointer;
  transition:color 0.2s;
}
.fav-btn:hover { color:var(--accent); }
.fav-btn.active { color:var(--accent); }

.volume-control { display:flex; align-items:center; gap:8px; margin-left:10px; }
.volume-icon { font-size:16px; }
#volume-slider {
  width:90px; accent-color:var(--accent); cursor:pointer;
}

.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:500;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.show { display:flex; }
.modal-box {
  background:var(--bg-elevated); border-radius:12px; max-width:680px; max-height:80vh; overflow-y:auto;
  padding:40px; position:relative; border:1px solid rgba(255,255,255,0.08);
}
.modal-box h2 { font-size:22px; margin-bottom:16px; }
.modal-box h3 { font-size:17px; margin:20px 0 10px; }
.modal-box p { font-size:14px; color:var(--text-secondary); line-height:1.7; margin-bottom:14px; }
.modal-box ul { margin:0 0 14px 20px; }
.modal-box li { font-size:14px; color:var(--text-secondary); line-height:1.7; margin-bottom:4px; }
.modal-box li strong { color:var(--text-primary); }
.modal-close {
  position:absolute; top:16px; right:16px; background:rgba(255,255,255,0.08); border:none; color:var(--text-primary);
  width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer;
}
.modal-close:hover { background:rgba(255,255,255,0.18); }

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  .navbar { padding:18px 28px; }
  .nav-links a { margin-right:20px; }
  .search-box { width:180px; }
  .hero { padding:0 40px; height:64vh; }
  .hero-content h1 { font-size:42px; }
  .content { padding:0 28px 140px; }
  .card-grid { grid-template-columns:repeat(4, 1fr); }
  .card { height:130px; }
}

/* Small tablet / large phone (768px and below) */
@media (max-width: 768px) {
  .navbar { padding:14px 18px; }
  .nav-links { display:none; }
  .search-box { width:140px; font-size:12px; padding:8px 12px; }
  .hero { padding:0 20px; height:56vh; min-height:360px; }
  .hero-content h1 { font-size:30px; }
  .hero-content p { font-size:13px; max-width:100%; }
  .hero-buttons button { padding:12px 22px; font-size:13px; }
  .content { padding:0 18px 150px; margin-top:0; }
  .row-section { margin-bottom:38px; }
  .row-section h2 { font-size:17px; margin-bottom:12px; }
  .card-grid { grid-template-columns:repeat(3, 1fr); gap:10px; }
  .card { height:100px; }
  .card .card-title { font-size:12px; }
  .card .card-sub { font-size:10px; }
  .player-bar { padding:0 14px; height:68px; }
  .player-info img { width:38px; height:38px; }
  #player-title { font-size:13px; }
  #player-sub { font-size:11px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .player-controls { gap:12px; }
  #play-pause { width:38px; height:38px; font-size:14px; }
  .logo-img { height:26px; }
  .volume-control { display:none; }
}

/* Small phone (480px and below) */
@media (max-width: 480px) {
  .navbar { padding:12px 14px; }
  .search-box { display:none; }
  .profile-icon { width:32px; height:32px; font-size:16px; }
  .hero { height:52vh; min-height:320px; padding:0 16px; }
  .hero-content h1 { font-size:24px; }
  .hero-content p { font-size:12px; }
  .hero-buttons { flex-direction:column; gap:10px; }
  .hero-buttons button { width:100%; justify-content:center; padding:12px 0; }
  .content { padding:0 14px 150px; }
  .card-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
  .card { height:88px; }
  .card .card-overlay { padding:8px; }
  .card .card-title { font-size:11px; }
  .card .card-sub { font-size:9px; }
  .player-bar { padding:0 10px; }
  .player-info { gap:8px; }
  #player-sub { max-width:80px; }
  .player-controls { gap:8px; }
}
.btn-account {
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:var(--text-primary);
  padding:9px 18px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.btn-account:hover { background:var(--accent); border-color:var(--accent); color:#101418; }

.account-box { display:flex; align-items:center; gap:10px; }
.account-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--bg-elevated); }
.account-name { font-size:13px; font-weight:600; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-logout {
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:var(--text-secondary);
  padding:7px 14px; border-radius:6px; font-size:12px; cursor:pointer; transition:all 0.2s;
}
.btn-logout:hover { background:#ef4444; border-color:#ef4444; color:#fff; }

.members-tag {
  display:inline-block; background:rgba(236,72,153,0.15); color:var(--accent); font-size:11px;
  font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:0.5px; vertical-align:middle; margin-left:8px;
}

.auth-box { max-width:400px; }
.btn-google {
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#1f1f1f; border:none; border-radius:6px; padding:12px; font-size:14px; font-weight:600;
  cursor:pointer; margin-bottom:20px; transition:opacity 0.2s;
}
.btn-google:hover { opacity:0.9; }
.auth-divider { display:flex; align-items:center; text-align:center; color:var(--text-tertiary); font-size:12px; margin-bottom:18px; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; border-bottom:1px solid rgba(255,255,255,0.1); }
.auth-divider span { padding:0 10px; }
.auth-input {
  width:100%; padding:12px 14px; margin-bottom:12px; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15); border-radius:6px; color:var(--text-primary); font-size:14px;
}
.auth-input:focus { outline:none; border-color:var(--accent); }
.auth-error { color:#f87171; font-size:13px; margin-bottom:10px; min-height:16px; }
.btn-auth-submit {
  width:100%; background:var(--accent); color:#101418; border:none; border-radius:6px; padding:13px;
  font-size:14px; font-weight:700; cursor:pointer; transition:background 0.2s; margin-bottom:16px;
}
.btn-auth-submit:hover { background:var(--accent-hover); }
.auth-toggle { text-align:center; font-size:13px; color:var(--text-secondary); }
.auth-toggle a { color:var(--accent); font-weight:600; text-decoration:none; margin-left:4px; }
.auth-toggle a:hover { text-decoration:underline; }

.card.locked { position:relative; }
.card.locked::after {
  content:'🔒'; position:absolute; top:10px; right:10px; font-size:14px; background:rgba(0,0,0,0.6);
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:6;
}