/* music.css (v5)
   Fixes:
   - restore link styling (no default blue/purple)
   - hover-effects glow works again (when data-hover-color is present)
   - keep dark-mode audio inversion
   - ADD: album.php layout + tracklist styling (album_page)
*/

/* ----------- Critical: stop browser default link colors ----------- */
.music_page a,
.music_page a:visited{
  color: inherit;
}
.music_page a{
  text-decoration: none;
}
.music_page a:hover{
  text-decoration: underline;
}

/* ------------------------------
   Head
------------------------------ */
.music_page .music_wrap{ width: 100%; }

.music_page .music_head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin: 6px 0 14px 0;
}

.music_page .music_head_title{
  font-size: 42px;
  letter-spacing: 2px;
  font-weight: 800;
  line-height: 1.05;
}

.music_page .music_head_meta{
  margin-top: 6px;
  opacity: .75;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ------------------------------
   Streams + Notice
------------------------------ */
.music_page .music_streams{
  width: 100%;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0;
}

.music_page .music_streams_title{ margin-bottom: 8px; }

.music_page .music_streams_links{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
}

.music_page .music_streams_links a{
  display:inline-block;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.music_page .music_streams_links a:hover{
  text-decoration: underline;
}

.music_page .music_notice{
  width: 100%;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 18px 0;
  line-height: 1.45;
  color: #565656;
}

/* ------------------------------
   Buttons
------------------------------ */
.music_page .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.70);
  color: #565656;
  font-weight: 800;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
}

.music_page .btn:hover{ text-decoration: underline; }
.music_page .btn.btn_dark{ background: rgba(0,0,0,.04); }

.music_page button.btn{
  appearance: none;
  -webkit-appearance: none;
}

/* ------------------------------
   HERO
------------------------------ */
.music_page .p_hero{ width: 100%; margin: 10px 0 14px 0; }

.music_page .p_hero_media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
}

.music_page .p_hero_media img{
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.music_page .p_hero_overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 15%, rgba(0,0,0,0.62) 100%);
  color: #fff;
}

.music_page .p_hero_title{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1.12;
}

.music_page .p_hero_chips{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.music_page .chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.20);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .4px;
}

.music_page .p_hero_actions{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* ------------------------------
   Global player
------------------------------ */
.music_page .player_bar{
  width: 100%;
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px 12px;
  margin: 14px 0 18px 0;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
}

.music_page .player_cover{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
}

.music_page .player_meta{ min-width: 180px; line-height: 1.2; }
.music_page .player_title{ font-weight: 900; letter-spacing: .2px; color:#565656; }
.music_page .player_hint{ opacity: .70; font-size: 13px; margin-top: 3px; color:#565656; }

.music_page #globalPlayer{
  width: 100%;
  max-width: 560px;
}

body.dark_mode.music_page #globalPlayer{
  filter: invert(1) hue-rotate(180deg);
}

body.dark_mode.music_page .player_bar{
  background: rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.14);
}
body.dark_mode.music_page .player_title,
body.dark_mode.music_page .player_hint{
  color: #e9e9e9;
}

/* ------------------------------
   Sections
------------------------------ */
.music_page .p_section{ margin-top: 20px; }

.music_page .p_section_head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.music_page .p_section_title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
}

.music_page .p_section_meta{
  margin-top: 4px;
  opacity: .70;
  font-size: 13px;
}

/* ------------------------------
   Shelves / cards
------------------------------ */
.music_page .shelf{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.music_page .shelf.shelf_novinki{
  grid-template-columns: repeat(5, 1fr);
}

.music_page .card{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.music_page .card_media{
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow:hidden;
}

.music_page .card_media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform 300ms ease;
}

.music_page .card:hover .card_media img{
  transform: scale(1.03);
}

.music_page .card_play{
  position:absolute;
  left: 10px;
  bottom: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.38);
  color: #fff;
  cursor:pointer;
  font-weight: 900;
}

.music_page .card_body{
  padding: 10px 12px 12px 12px;
}

.music_page .card_title{
  font-weight: 900;
  margin-bottom: 8px;
  line-height: 1.2;
}

.music_page .card_title_link{
  text-decoration:none;
}

.music_page .card_title_link:hover{
  text-decoration: underline;
}

.music_page .card_meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  font-size: 13px;
  opacity: .85;
}

/* Links inside meta should look “UI”, not default hyperlinks */
.music_page .meta_link{
  text-decoration: none;
  opacity: .80;
  font-weight: 800;
}
.music_page .meta_link:hover{
  opacity: 1;
  text-decoration: underline;
}

/* ------------------------------
   Album cards grid (links)
------------------------------ */
.music_page .album_cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.music_page a.album_card{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  cursor:pointer;
  text-decoration:none;
  color: inherit;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.music_page .album_card_media{ aspect-ratio: 1/1; overflow:hidden; }

.music_page .album_card_media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform 300ms ease;
}

.music_page a.album_card:hover .album_card_media img{
  transform: scale(1.03);
}

.music_page .album_card_body{ padding: 10px 12px 12px 12px; }
.music_page .album_card_title{ font-weight: 900; margin-bottom: 6px; }
.music_page .album_card_meta{ opacity: .75; font-size: 13px; }

/* ------------------------------
   Play buttons used in rows etc
------------------------------ */
.music_page .play_btn{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.70);
  color: #565656;
  cursor: pointer;
  font-weight: 900;
  border-radius: 10px;
  padding: 6px 10px;
  line-height: 1;
}
.music_page .play_btn.is_playing{
  border-color: rgba(0,0,0,.22);
}
.music_page .play_btn:hover{
  opacity: .85;
}

/* ==============================
   ALBUM PAGE (album.php)
   - this is what was missing, so the cover + tracklist looked broken
============================== */
.music_page.album_page .album_topbar{
  margin: 6px 0 12px 0;
}

.music_page.album_page .album_back{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
  font-weight: 900;
  text-decoration: none;
}

.music_page.album_page .album_back:hover{
  text-decoration: underline;
}

.music_page.album_page .album_head{
  display:grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 16px;
  align-items:start;
  margin: 10px 0 14px 0;
}

.music_page.album_page .album_cover{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
}

.music_page.album_page .album_cover img{
  width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  object-fit: cover;
  display:block;
}

.music_page.album_page .album_info{
  min-width: 0;
}

.music_page.album_page .album_title{
  font-size: 36px;
  font-weight: 900;
  letter-spacing: .6px;
  line-height: 1.1;
}

.music_page.album_page .album_meta{
  margin-top: 6px;
  opacity: .75;
  font-size: 14px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.music_page.album_page .album_streams{
  margin-top: 12px;
}

.music_page.album_page .album_text{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
  line-height: 1.5;
}

/* Track list */
.music_page.album_page .album_tracks{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.music_page.album_page .song_row{
  display:grid;
  grid-template-columns: 56px 52px 1fr auto;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
}

.music_page.album_page .song_thumb{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow:hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.10);
}

.music_page.album_page .album_image2{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.music_page.album_page .song_name{
  font-weight: 900;
  line-height: 1.2;
}

.music_page.album_page .song_title_link{
  min-width: 0;
  text-decoration: none;
}

.music_page.album_page .song_title_link:hover{
  text-decoration: underline;
}

.music_page.album_page .song_links{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
  font-size: 13px;
  opacity: .85;
}

.music_page.album_page .song_links a{
  font-weight: 900;
  opacity: .85;
  text-decoration: none;
}
.music_page.album_page .song_links a:hover{
  opacity: 1;
  text-decoration: underline;
}

/* Dark mode for album blocks */
body.dark_mode.music_page.album_page .album_back,
body.dark_mode.music_page.album_page .album_cover,
body.dark_mode.music_page.album_page .album_text,
body.dark_mode.music_page.album_page .song_row{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.12);
  color: #e9e9e9;
}

body.dark_mode.music_page.album_page .song_thumb{
  border-color: rgba(255,255,255,.12);
}

/* ------------------------------
   Dark mode blocks (general)
------------------------------ */
body.dark_mode.music_page .music_streams,
body.dark_mode.music_page .music_notice,
body.dark_mode.music_page .card,
body.dark_mode.music_page a.album_card{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.12);
  color: #e9e9e9;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

body.dark_mode.music_page .music_streams_links a{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.14);
  color: #e9e9e9;
}

body.dark_mode.music_page .btn{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.14);
  color: #e9e9e9;
}

body.dark_mode.music_page .meta_link{
  color: #e9e9e9;
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 1100px){
  .music_page .shelf{ grid-template-columns: repeat(3, 1fr); }
  .music_page .shelf.shelf_novinki{ grid-template-columns: repeat(3, 1fr); }
  .music_page .album_cards{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px){
  .music_page.album_page .album_head{
    grid-template-columns: 1fr;
  }
  .music_page.album_page .album_cover{
    max-width: 420px;
  }
  .music_page.album_page .song_row{
    grid-template-columns: 56px 52px 1fr;
    grid-auto-rows: auto;
  }
  .music_page.album_page .song_links{
    grid-column: 1 / -1;
    justify-content:flex-start;
    opacity: .9;
    margin-top: 2px;
  }
}

@media (max-width: 820px){
  .music_page .music_head_title{ font-size: 34px; }
  .music_page .p_hero_media img{ height: 280px; }

  .music_page .shelf{ grid-template-columns: repeat(2, 1fr); }
  .music_page .shelf.shelf_novinki{ grid-template-columns: repeat(2, 1fr); }
  .music_page .album_cards{ grid-template-columns: repeat(2, 1fr); }

  .music_page.album_page .album_title{ font-size: 30px; }
}
/* ==============================
   ALBUM PAGE — stats + other albums aside
   Append to bottom of music.css
============================== */

.music_page.album_page .album_info_grid{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}

.music_page.album_page .album_stats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.music_page.album_page .stat_pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  opacity: .92;
}

.music_page.album_page .stat_pill strong{
  font-weight: 900;
}

.music_page.album_page .stat_icon{
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.music_page.album_page .album_panel{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 12px 14px;
}

.music_page.album_page .album_panel_title{
  font-weight: 900;
  letter-spacing: .4px;
  margin-bottom: 10px;
  opacity: .9;
}

.music_page.album_page .album_other_grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.music_page.album_page a.mini_album{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  text-decoration: none;
  color: inherit;
}

.music_page.album_page a.mini_album:hover{
  text-decoration: underline;
}

.music_page.album_page a.mini_album img{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.10);
}

.music_page.album_page .mini_album_text{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.music_page.album_page .mini_album_title{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music_page.album_page .mini_album_meta{
  font-size: 12px;
  opacity: .70;
}

/* Dark mode */
body.dark_mode.music_page.album_page .stat_pill,
body.dark_mode.music_page.album_page .album_panel,
body.dark_mode.music_page.album_page a.mini_album{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.12);
  color: #e9e9e9;
}

body.dark_mode.music_page.album_page a.mini_album img{
  border-color: rgba(255,255,255,.12);
}

@media (max-width: 1100px){
  .music_page.album_page .album_info_grid{
    grid-template-columns: 1fr;
  }
}
/* ==============================
   SONG PAGE (song.php) + Karaoke
   Append to bottom of music.css
============================== */

.music_page.song_page .music_layout{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 980px){
  .music_page.song_page .music_layout{
    grid-template-columns: 1fr;
  }
}

/* Breadcrumbs */
.music_page.song_page .song_breadcrumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  opacity: .80;
  font-weight: 800;
  margin: 4px 0 10px 0;
}
.music_page.song_page .song_breadcrumbs a{
  text-decoration: none;
}
.music_page.song_page .song_breadcrumbs a:hover{
  text-decoration: underline;
}
.music_page.song_page .song_breadcrumbs .sep{
  opacity: .55;
}

.music_page.song_page .song_title_big{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1.1;
  margin: 0 0 6px 0;
}
.music_page.song_page .song_meta_line{
  opacity: .75;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 12px;
}

/* Card */
.music_page.song_page .song_card{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  overflow: hidden;
  padding: 14px;
}

@media (max-width: 980px){
  .music_page.song_page .song_card{
    grid-template-columns: 1fr;
  }
}

.music_page.song_page .song_cover img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  border: 1px solid rgba(0,0,0,.10);
}

.music_page.song_page .song_audio{
  width: 100%;
  max-width: 820px;
}

/* Actions row (already used elsewhere) */
.music_page .music_actions_row{
  margin-top: 10px;
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap: wrap;
}
.music_page .action_link,
.music_page .action_link:visited{
  color: inherit;
  text-decoration:none;
  font-weight: 900;
}
.music_page .action_link:hover{
  text-decoration: underline;
}
.music_page .action_btn{
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font-weight: 900;
  cursor: pointer;
}
.music_page .action_btn:hover{
  opacity: .75;
}
.music_page .action_status{
  opacity:.70;
  font-size: 13px;
}

/* Platforms block */
.music_page .song_platforms{
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
  padding: 10px 12px;
}
.music_page .song_platforms_title{
  opacity:.80;
  margin-bottom: 8px;
}
.music_page .song_platforms_links{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* Lyrics + karaoke */
.music_page.song_page .lyrics_block{
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
  padding: 14px;
}
.music_page.song_page .lyrics_title{
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: .3px;
}

.music_page .karaoke_wrap{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  padding: 10px;
  max-height: 520px;
  overflow-y: auto;
}

.music_page .k_line{
  padding: 7px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .12s ease, opacity .12s ease;
}

.music_page .k_line:hover{
  background: rgba(0,0,0,.06);
}

.music_page .k_line.k_active{
  background: rgba(0,0,0,.10);
  font-weight: 900;
}

.music_page .k_line.k_past{
  opacity: .62;
}

.music_page .k_gap{
  height: 10px;
}

.music_page .karaoke_hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .70;
}

/* Prev/Next */
.music_page.song_page .nav_block{
  margin-top: 14px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.music_page.song_page .nav_block a{
  text-decoration: none;
  font-weight: 900;
}
.music_page.song_page .nav_block a:hover{
  text-decoration: underline;
}

/* Dark mode */
body.dark_mode.music_page.song_page .song_card,
body.dark_mode.music_page.song_page .lyrics_block,
body.dark_mode.music_page .song_platforms{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.12);
  color: #e9e9e9;
}

body.dark_mode.music_page .karaoke_wrap{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

body.dark_mode.music_page .k_line:hover{
  background: rgba(255,255,255,.08);
}

body.dark_mode.music_page .k_line.k_active{
  background: rgba(255,255,255,.12);
}
/* ==============================
   Song cards: image is link + fixed last row for (страница/mp3)
============================== */

.music_page .card_media_link{
  display:block;
  width:100%;
  height:100%;
}

.music_page .card_meta_top{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  font-size: 13px;
  opacity: .90;
}

.music_page .card_meta_top .meta_tag{
  font-weight: 900;
  opacity: .85;
}

.music_page .card_meta_top .meta_song{
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .95;
}

/* Always last row, always one line */
.music_page .card_meta_links{
  margin-top: 10px;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:flex-start;

  flex-wrap: nowrap;
  white-space: nowrap;
}

.music_page .card_meta_links .meta_link{
  font-weight: 900;
  opacity: .82;
  text-decoration: none;
}
.music_page .card_meta_links .meta_link:hover{
  opacity: 1;
  text-decoration: underline;
}