:root{
  --bg:#070707;
  --card:rgba(255,255,255,0.05);
  --card-2:rgba(255,255,255,0.035);
  --line:rgba(255,255,255,0.09);
  --text:#f3efe8;
  --muted:rgba(243,239,232,0.68);
  --soft:rgba(243,239,232,0.48);
  --accent:#d4b06f;
  --accent-2:#e7c98d;
  --accent-glow:rgba(214,176,111,0.22);
  --shadow:0 20px 60px rgba(0,0,0,.42);
  --radius:26px;
  --max:1260px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 78% 16%, rgba(219,175,88,.12), transparent 24%),
    radial-gradient(circle at 15% 82%, rgba(190,128,58,.08), transparent 24%),
    linear-gradient(180deg, #050505 0%, #080808 34%, #0a0907 66%, #0a0907 100%);
  min-height:100vh;
  overflow-x:hidden;
}

.page-shell{
  position:relative;
  min-height:100vh;
}

.ambient{
  position:fixed;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
  z-index:0;
}
.ambient-1{
  width:420px;
  height:420px;
  top:70px;
  right:-80px;
  background:rgba(226,182,89,.10);
}
.ambient-2{
  width:320px;
  height:320px;
  left:-100px;
  bottom:80px;
  background:rgba(157,108,51,.08);
}

.page{
  position:relative;
  z-index:1;
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
  padding:34px 0 48px;
}

.layout-grid{
  display:grid;
  grid-template-columns:420px minmax(0, 1fr);
  gap:28px;
  align-items:start;
}

.visual-panel{
  position:sticky;
  top:26px;
}

.visual-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:28px;
  padding:22px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  overflow:hidden;
}

/* УБИРАЕМ верхний Artist / Lo.Krain */
.visual-topline,
.artist-name{
  display:none;
}

.cover-scene{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  isolation:isolate;
}

/* мягкий золотистый ореол под обложкой */
.cover-scene::before{
  content:"";
  position:absolute;
  width:78%;
  height:78%;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(224,182,99,.26) 0%, rgba(224,182,99,.12) 36%, rgba(224,182,99,0) 72%);
  filter:blur(34px);
  z-index:0;
  pointer-events:none;
}

.cover-scene::after{
  content:"";
  position:absolute;
  width:92%;
  height:24%;
  left:50%;
  bottom:-2%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 72%);
  filter:blur(18px);
  z-index:0;
  pointer-events:none;
}

.cover-art{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-width:340px;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:22px;
  box-shadow:
    0 24px 70px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.07);
}

.artist-mini-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.07);
  margin-bottom:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 28px rgba(0,0,0,.18);
}

.artist-mini-photo{
  width:72px;
  height:72px;
  border-radius:18px;
  object-fit:cover;
  display:block;
  flex:0 0 auto;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}

.artist-mini-info{
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* меняем местами: сначала имя, потом ARTIST */
.artist-mini-name{
  order:1;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}

.artist-mini-label{
  order:2;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--soft);
}

.visual-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.visual-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03));
  color:var(--text);
  text-decoration:none;
  transition:.22s ease;
  backdrop-filter:blur(8px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    0 10px 24px rgba(0,0,0,.18),
    0 0 24px rgba(214,176,111,.06);
}

/* мягкое золотистое свечение на кнопках */
.visual-links a:hover{
  transform:translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border-color:rgba(228,193,122,.22);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    0 12px 30px rgba(0,0,0,.22),
    0 0 32px rgba(214,176,111,.14);
}

.content-panel{
  min-width:0;
}

.hero{
  margin-bottom:20px;
}

.eyebrow{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--soft);
  margin-bottom:10px;
}

.album-title{
  margin:0;
  font-size:clamp(52px, 7vw, 82px);
  line-height:.95;
  font-weight:700;
  letter-spacing:-0.04em;
}

.album-meta{
  margin-top:10px;
  color:var(--muted);
  font-size:15px;
}

.album-lead{
  margin:24px 0 0;
  max-width:680px;
  color:var(--text);
  opacity:.92;
  line-height:1.75;
  font-size:16px;
}

.player-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.player-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:18px;
}

.label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--soft);
  margin-bottom:8px;
}

.value,
.now-playing{
  font-size:18px;
  line-height:1.35;
}

.now-playing{
  text-align:right;
}

.controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:18px;
}

.control-btn,
.play-btn{
  border:0;
  cursor:pointer;
  color:var(--text);
  transition:.2s ease;
}

.control-btn{
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  font-size:28px;
  line-height:1;
}
.control-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.1);
}

.play-btn{
  min-width:130px;
  height:54px;
  padding:0 24px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(219,180,102,.95), rgba(184,143,69,.95));
  color:#17130b;
  font-size:15px;
  font-weight:700;
  box-shadow:0 12px 34px rgba(181,136,58,.24);
}
.play-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}

.progress-row{
  display:grid;
  grid-template-columns:52px 1fr 52px;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.time{
  color:var(--soft);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.time:last-child{text-align:right}

.progress-bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  cursor:pointer;
}

.progress{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}

.playlist{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.track{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  transition:.18s ease;
}

.track:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
}

.track.active{
  background:rgba(216,179,107,.10);
  border-color:rgba(216,179,107,.25);
}

.track-index{
  min-width:28px;
  color:var(--soft);
  font-size:13px;
}

/* слегка выделяем названия песен */
.track-title{
  font-size:16px;
  font-weight:500;
  color:rgba(243,239,232,.96);
  letter-spacing:0.01em;
}

.track-status{
  color:var(--soft);
  font-size:13px;
}

.info-stack{
  margin-top:18px;
  display:grid;
  gap:14px;
}

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.panel summary{
  list-style:none;
  cursor:pointer;
  padding:18px 22px;
  color:var(--text);
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.08em;
  position:relative;
}

.panel summary::-webkit-details-marker{display:none}

.panel summary::after{
  content:"+";
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  color:var(--soft);
  font-size:20px;
  transition:.18s ease;
}

.panel[open] summary::after{
  transform:translateY(-50%) rotate(45deg);
}

.panel-content{
  padding:0 22px 22px;
  color:var(--muted);
  line-height:1.75;
  font-size:15px;
}

.lang-block + .lang-block{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
}

.lang-block h3,
.lyrics-item h3{
  margin:0 0 12px;
  color:var(--text);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.lyrics-grid{
  display:grid;
  gap:18px;
}

.lyrics-item{
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.lyrics-item:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.lyrics-item pre{
  margin:0;
  white-space:pre-wrap;
  font-family:inherit;
  color:var(--muted);
  line-height:1.8;
  font-size:15px;
}

.credits-block p{
  margin:0 0 8px;
}
.credits-block p:last-child{
  margin-bottom:0;
}

@media (max-width: 1080px){
  .layout-grid{
    grid-template-columns:1fr;
  }

  .visual-panel{
    position:relative;
    top:0;
  }

  .visual-card{
    max-width:520px;
    margin:0 auto;
  }
}

@media (max-width: 640px){
  .page{
    width:min(calc(100% - 20px), var(--max));
    padding:22px 0 38px;
  }

  .album-title{
    font-size:56px;
  }

  .album-lead{
    font-size:15px;
    margin-top:20px;
  }

  .visual-card,
  .player-card{
    padding:18px;
    border-radius:22px;
  }

  .cover-art{
    max-width:100%;
  }

  .artist-mini-card{
    gap:12px;
    padding:12px;
  }

  .artist-mini-photo{
    width:64px;
    height:64px;
    border-radius:16px;
  }

  .player-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .now-playing{
    text-align:left;
  }

  .progress-row{
    grid-template-columns:46px 1fr 46px;
    gap:10px;
  }

  .control-btn{
    width:44px;
    height:44px;
  }

  .play-btn{
    min-width:118px;
    height:50px;
  }

  .track{
    padding:13px 14px;
    gap:10px;
  }

  .track-title{
    font-size:15px;
  }
}