* { box-sizing:border-box; }
body {
  margin:0;
  font-family:system-ui,Arial,sans-serif;
  background:#10131a;
  color:#f4f4f4;
  display:flex;
  min-height:100vh;
}
#sidebar {
  width:280px;
  background:#151a24;
  padding:18px;
  border-right:1px solid #2b3140;
  position:fixed;
  inset:0 auto 0 0;
  overflow:auto;
  z-index:5;
}
h1 { margin:0 0 22px; line-height:1; }
h1 span { color:#8ad7ff; }
.section, .jelly {
  display:block;
  width:100%;
  padding:13px;
  margin:10px 0;
  border:0;
  border-radius:10px;
  background:#232b3a;
  color:white;
  text-align:left;
  font-size:1rem;
  text-decoration:none;
}
.submenu {
  margin:0 0 12px 12px;
}
.submenu a {
  display:block;
  padding:9px 10px;
  color:#cfd7e6;
  text-decoration:none;
  border-radius:8px;
}
.submenu a:hover, .section:hover, .jelly:hover {
  background:#33415a;
}
main {
  margin-left:280px;
  width:calc(100% - 280px);
  min-height:100vh;
  padding-bottom:82px;
}
header {
  display:flex;
  gap:14px;
  align-items:center;
  padding:18px 22px;
  background:#111722cc;
  border-bottom:1px solid #2b3140;
  position:sticky;
  top:0;
  z-index:2;
}
header h2, header p { margin:0; }
header p { color:#aab4c8; }
#menuBtn {
  display:none;
  font-size:1.4rem;
  background:#232b3a;
  color:white;
  border:0;
  border-radius:8px;
  padding:8px 12px;
}
#placeholder {
  padding:28px;
}
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  max-width:760px;
}
.cards a {
  background:#1d2533;
  padding:24px;
  border-radius:14px;
  color:white;
  text-decoration:none;
  border:1px solid #344057;
}
iframe {
  width:100%;
  height:calc(100vh - 160px);
  border:0;
  display:none;
  background:white;
}
#player {
  position:fixed;
  left:280px;
  right:0;
  bottom:0;
  height:72px;
  background:#151a24;
  border-top:1px solid #2b3140;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
}
#player div { flex:1; }
#track {
  display:block;
  color:#aab4c8;
  font-size:.9rem;
}
#player button {
  border:0;
  border-radius:50%;
  width:42px;
  height:42px;
  background:#283247;
  color:white;
  font-size:1rem;
}
@media(max-width:800px){
  #sidebar {
    transform:translateX(-100%);
    transition:.2s;
  }
  #sidebar.open { transform:translateX(0); }
  main {
    margin-left:0;
    width:100%;
  }
  #player {
    left:0;
  }
  #menuBtn {
    display:block;
  }
}