:root {
  color-scheme: dark;
  --bg:#020812;
  --panel:#06162a;
  --line:rgba(125,215,255,.24);
  --text:#eef8ff;
  --muted:rgba(238,248,255,.72);
  --cyan:#bdeeff;
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 18% 12%,rgba(48,150,255,.20),transparent 30%),
    radial-gradient(circle at 82% 8%,rgba(0,220,255,.12),transparent 34%),
    linear-gradient(180deg,#020812,#030d1b);
  color:var(--text);
}
.ds14b-page { min-height:100vh; padding:clamp(34px,6vw,78px) 18px; }
.ds14b-wrap { width:min(1180px,100%); margin:0 auto; }
.ds14b-top { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:34px; }
.ds14b-back, .ds14b-status {
  display:inline-flex;
  padding:.55rem .9rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(2,16,30,.72);
  color:var(--text);
  text-decoration:none;
  font-weight:900;
}
.ds14b-status { color:var(--muted); }
.ds14b-kicker {
  display:inline-flex;
  padding:.45rem .78rem;
  border-radius:999px;
  border:1px solid rgba(125,215,255,.38);
  background:rgba(6,22,40,.72);
  color:var(--cyan);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.ds14b-hero h1 {
  margin:18px 0 10px;
  font-size:clamp(2.4rem,7vw,5.4rem);
  line-height:.9;
  letter-spacing:-.07em;
}
.ds14b-hero p {
  max-width:920px;
  margin:0 0 34px;
  color:var(--muted);
  font-size:clamp(1rem,1.45vw,1.18rem);
  line-height:1.68;
}
.ds14b-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.ds14b-card {
  appearance:none;
  text-align:left;
  color:var(--text);
  padding:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  min-height:470px;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(125,215,255,.18);
  background:linear-gradient(180deg,rgba(9,27,49,.94),rgba(2,9,20,.98));
  box-shadow:0 18px 46px rgba(0,0,0,.38);
}
.ds14b-card:hover, .ds14b-card.ds14b-selected {
  border-color:rgba(125,215,255,.60);
  box-shadow:0 20px 58px rgba(0,0,0,.48), 0 0 24px rgba(80,180,255,.18);
}
.ds14b-media {
  display:block;
  min-height:180px;
  background:
    radial-gradient(circle at 50% 20%,rgba(92,200,255,.24),transparent 35%),
    linear-gradient(135deg,rgba(10,35,70,.95),rgba(2,10,22,.98));
  background-size:cover;
  background-position:center;
  border-bottom:1px solid rgba(125,215,255,.13);
}
.ds14b-card-body {
  display:flex;
  flex-direction:column;
  flex:1;
  padding:20px;
}
.ds14b-title {
  font-size:1.22rem;
  font-weight:950;
  line-height:1.05;
  letter-spacing:-.03em;
  margin-bottom:10px;
}
.ds14b-text {
  color:var(--muted);
  line-height:1.5;
  font-size:.94rem;
  margin-bottom:18px;
}
.ds14b-button {
  margin-top:auto;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(125,215,255,.55);
  background:rgba(2,16,30,.86);
  color:var(--text);
  font-weight:900;
}
.ds14b-panels { margin-top:24px; }
.ds14b-panel {
  display:none;
  border-radius:30px;
  border:1px solid rgba(125,215,255,.20);
  background:rgba(5,18,34,.78);
  box-shadow:0 18px 46px rgba(0,0,0,.34);
  padding:clamp(18px,3vw,30px);
}
.ds14b-panel-active { display:block; }
.ds14b-panel h2 {
  margin:14px 0 10px;
  font-size:clamp(1.9rem,5vw,4rem);
  line-height:.95;
  letter-spacing:-.05em;
}
.ds14b-panel p {
  color:var(--muted);
  line-height:1.6;
  max-width:850px;
}
.ds14b-player-box {
  display:grid;
  grid-template-columns:minmax(220px,360px) 1fr;
  gap:16px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(125,215,255,.18);
  background:rgba(255,255,255,.045);
  margin-bottom:18px;
}
.ds14b-now strong {
  display:block;
  font-size:.78rem;
  color:var(--cyan);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ds14b-now span {
  display:block;
  font-weight:950;
  margin-top:4px;
}
#ds14b-player { width:100%; }
.ds14b-folders { display:grid; gap:12px; }
.ds14b-folder {
  border-radius:20px;
  border:1px solid rgba(125,215,255,.16);
  background:rgba(255,255,255,.035);
  overflow:hidden;
}
.ds14b-folder summary {
  cursor:pointer;
  padding:14px 16px;
  font-weight:950;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.ds14b-folder summary span {
  color:var(--muted);
  font-weight:800;
}
.ds14b-folder-tracks {
  display:grid;
  gap:8px;
  padding:0 12px 12px;
}
.ds14b-track {
  appearance:none;
  width:100%;
  text-align:left;
  color:var(--text);
  cursor:pointer;
  display:grid;
  grid-template-columns:52px 1fr 42px;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(125,215,255,.14);
  background:rgba(255,255,255,.045);
}
.ds14b-track:hover {
  border-color:rgba(125,215,255,.45);
  background:rgba(255,255,255,.07);
}
.ds14b-track-num {
  color:rgba(238,248,255,.56);
  font-weight:950;
}
.ds14b-track-info strong {
  display:block;
  margin-bottom:3px;
}
.ds14b-track-info em {
  color:rgba(238,248,255,.52);
  font-size:.82rem;
  font-style:normal;
}
.ds14b-play {
  justify-self:end;
  font-weight:950;
}
.ds14b-empty {
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(125,215,255,.18);
  background:rgba(255,255,255,.045);
  color:var(--muted);
  line-height:1.55;
}
@media(max-width:1180px){
  .ds14b-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px){
  .ds14b-top{align-items:flex-start;flex-direction:column;}
  .ds14b-grid{grid-template-columns:1fr;}
  .ds14b-card{min-height:auto;}
  .ds14b-player-box{grid-template-columns:1fr;}
  .ds14b-track{grid-template-columns:42px 1fr 34px;}
}