:root{
  --bg: #0f1114;
  --panel: #121315;
  --muted: #9aa0a6;
  --accent: #1db954; /* spotify green */
  --accent-2: #10a55a;
  --card: #141617;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, var(--bg), #070708);
  color:#eaeaea;
  font-size:16px;
  line-height:1.4;
}

/* Layout */
.app{display:flex;min-height:calc(100vh - 80px)}
.sidebar{
  width:220px;padding:20px;background:linear-gradient(180deg,#0b0c0d,#0d0f11);
  display:flex;flex-direction:column;gap:16px;
}
.logo{font-weight:700;font-size:20px;padding:8px 0;color:var(--accent);}
.nav-item{display:block;padding:10px 8px;border-radius:8px;color:var(--muted);cursor:pointer;margin-bottom:6px;text-decoration:none}
.nav-item.active{background:rgba(255,255,255,0.03);color:#fff}
.sidebar-footer{margin-top:auto}
.btn{border:0;padding:10px 14px;border-radius:14px;background:transparent;color:inherit;cursor:pointer;font-weight:600;}
.btn.small{padding:6px 10px;border-radius:10px;font-size:13px}
.btn.primary{background:var(--accent);color:#000}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}

.main{flex:1;padding:18px;overflow:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.search input{
  background:var(--panel);border-radius:12px;padding:10px 14px;border:0;min-width:300px;color:#fff;
}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#000}

/* Hero */
.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px;background:linear-gradient(90deg, rgba(29,185,84,0.08), transparent);border-radius:16px;margin-bottom:20px}
.hero-left h1{margin:0;font-size:28px}
.hero-left p{color:var(--muted);margin:8px 0 14px}
.hero-actions{display:flex;gap:12px}
.hero-img{border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.4);}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.card{background:var(--card);padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:all 0.2s}
.card:hover{background:rgba(255,255,255,0.08);transform:scale(1.03)}
.cover{height:140px;border-radius:8px;background:#222 center/cover no-repeat;}

/* Player bar */
.player{position:fixed;left:240px;right:20px;bottom:14px;background:rgba(17,17,17,0.9);height:64px;border-radius:12px;display:flex;align-items:center;padding:10px 16px;gap:12px}
.player-left{flex:1}
.player-center{display:flex;flex-direction:column;align-items:center;gap:6px}
.progress{width:320px;height:6px;background:rgba(255,255,255,0.05);border-radius:6px;overflow:hidden}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6)}
.modal.hidden{display:none}
.modal-card{background:linear-gradient(180deg,#0f1114,#121214);padding:20px;border-radius:12px;min-width:320px;max-width:420px;position:relative}
.modal-close{position:absolute;right:10px;top:8px;background:transparent;border:0;color:var(--muted);font-size:22px}

/* Debug panel */
.exp-debug{position:fixed;right:18px;top:18px;background:rgba(17,17,17,0.85);padding:10px;border-radius:10px;font-size:13px;color:#eee;width:180px;border:1px solid rgba(255,255,255,0.1)}
.debug-actions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.exp-debug button{background:var(--card);color:#ddd;border-radius:6px}

/* Responsive */
@media (max-width:900px){
  .sidebar{display:none}
  .player{left:10px;right:10px}
  .app{flex-direction:column}
}

.hero-img {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.exp-debug {
  background: rgba(17, 17, 17, 0.85);
  color: #eee;
  border: 1px solid rgba(255,255,255,0.1);
}
.exp-debug button {
  background: var(--card);
  color: var(--muted);
}
.card:hover {
  background: rgba(255,255,255,0.08);
  transform: scale(1.03);
  transition: all 0.2s ease;
  cursor: pointer;
}