/* ============================================================
   试听（music）—— 独立页样式
   版式对齐全站栏目（视频/文章同语言）：白底页面 + 768px 面板
   加浅蓝线框 #9db8d2 分层；TD 9pt；链接黑字无下划线 hover 红；
   曲目表 cellspacing=1 #0066CC 出蓝线，表头 #006699 白字。
   ============================================================ */

html, body { margin: 0; padding: 0; }
body.mus-page {
  background: #FFFFFF;
  font-family: SimSun, "Microsoft YaHei", sans-serif;
  font-size: 9pt;
  color: #000;
}
body.mus-page td { color: #000; font-size: 9pt; }
body.mus-page a { color: #000; text-decoration: none; }
body.mus-page a:hover { color: #FF0000; text-decoration: none; }
body.mus-page input {
  background-color: #ffffff; height: 20px; position: relative;
  font-size: 9pt; border: 1px solid #0099CC;
}
body.mus-page input[type="checkbox"] { width: auto; height: auto; }
body.mus-page input[type="button"] { height: 22px; padding: 0 8px; cursor: pointer; }
body.mus-page select { background: #fff; font-size: 9pt; }

.mus-page center { width: 100%; }

/* ---------- 顶部头部：logo + Banner(后台可控/轮播) + 收藏本站/管理 ---------- */
.mus-topbar {
  width: 768px;
  margin: 6px auto 4px;
  background: #FFFFFF;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
}
.mt-logo { flex: 0 0 139px; line-height: 0; }
.mt-logo img { max-width: 100%; height: auto; }
.mt-banner { flex: 1 1 auto; text-align: center; overflow: hidden; }
.mt-banner .bn-item { display: block; opacity: 0; transition: opacity .9s ease; line-height: 0; grid-area: auto; }
.mt-banner { display: grid; }
.mt-banner .bn-item { grid-area: 1 / 1; }
.mt-banner .bn-item.on { opacity: 1; }
.mt-banner .bn-item img { max-width: 100%; height: auto; }
.mt-links { flex: 0 0 auto; text-align: right; line-height: 1.9; font-size: 9pt; }
.mt-links a { display: block; color: #000; text-decoration: none; }
.mt-links a:hover { color: #F00; }
@media (max-width: 820px) {
  .mus-topbar { width: auto; margin: 6px 4px 4px; }
  .mt-links { font-size: 12px; }
}

/* ---------- 通用 768 白底面板：浅蓝线框分层（与全站 module-page 同语言） ---------- */
.mus-w {
  background: #FFFFFF;
  margin: 0 auto 6px;
  border: 1px solid #9db8d2;
  box-sizing: border-box;
}
table.mus-w { border-collapse: separate; }

/* ---------- 1. 导航条（与全站 main-nav 同款：LI2.JPG 全宽铺满 + 768 内容等分） ---------- */
.mus-mainnav {
  background: url('../images/site/LI2.JPG') repeat-x #1B4F79; /* 兜底色同主站渐变基调 */
}
.mus-mainnav ul {
  width: 768px; margin: 0 auto; padding: 0;
  list-style: none; display: flex; flex-wrap: wrap;
}
.mus-mainnav li {
  flex: 1; text-align: center; height: 26px;
  border-right: 1px solid #999;
}
.mus-mainnav li:last-child { border-right: 0; }
.mus-mainnav a {
  display: block; line-height: 26px;
  color: #000; font-weight: bold; font-size: 9pt;
  text-decoration: none;
}
.mus-mainnav a:hover { color: #F00; }
.mus-mainnav a.on { color: #FF6600; }

/* 移动端汉堡按钮（桌面隐藏） */
.mus-navbtn { display: none; }

/* ---------- 2. 页头 ---------- */
.mus-w .hdr { background: #fff; }

/* ---------- 3. 9 分类按钮：hover 淡入（原 nereidFade） ---------- */
.mus-cat { width: 69px; height: 23px; }
.mus-cat img {
  opacity: 0;
  transition: opacity .4s ease;
}
.mus-cat:hover img { opacity: 1; }

/* ---------- 4. 面包屑 ---------- */
.crumb { font-size: 9pt; }
.crumb .red { color: #FF0000; }

/* ---------- 5. 主面板 ---------- */
.mus-left { padding: 0 0 12px; }
.mus-left > img { display: block; margin: 0 auto; }
.mus-left br + br { line-height: 1; }

/* 最新更新专辑 3 大卡 */
.mus-alb { padding: 4px 2px 10px; vertical-align: top; }
.mus-alb .cov {
  max-width: 120px; max-height: 120px;
  border: 1px solid #99BBDD;
}
.mus-alb .cov-ph, .mv-card .cov-ph {
  display: inline-block; width: 100px; height: 100px; line-height: 100px;
  background: #E8EEF5; border: 1px solid #99BBDD; font-size: 40px;
}
.mus-alb .cov-ph.big, .mv-card .cov-ph.big { width: 130px; height: 130px; line-height: 130px; font-size: 56px; }

/* 曲目表（原版蓝线表） */
.mst {
  background: #0066CC;
  border-collapse: separate;
  border-spacing: 1px;
  font-size: 9pt;
}
.mst .mst-h td { background: #006699; color: #FFFFFF; font-size: 9pt; padding: 3px 2px; }
.mst .mst-h td a { color: #fff; }
.mst .mst-r td { background: #FFFFFF; padding: 3px 4px; }
.mst .mst-r.off td { color: #888; }
.mst .mst-r.off a { color: #888; }
.mst img { vertical-align: middle; }
.mst input[type="checkbox"] { border: 0; }

/* 分类 / 专辑视图 */
.mv-head {
  margin: 10px auto 8px; width: 98%;
  background: #006699; color: #fff;
  font-weight: bold; font-size: 10pt;
  padding: 5px 8px; text-align: left;
}
.mv-head span { font-weight: normal; font-size: 9pt; color: #CFE6F5; }
.mv-card { vertical-align: top; }
.mv-card .cov { max-width: 100px; max-height: 100px; border: 1px solid #99BBDD; }
.mv-empty { padding: 20px 0; text-align: center; color: #555; }
.mv-back { margin: 8px 0; font-size: 9pt; }
.dim { color: #888; }
.alb-meta td { border: 1px solid #A9C6E2; padding: 3px 6px; background: #fff; }
.alb-meta td.k { background: #DCE9F5; width: 72px; color: #003366; text-align: center; }

/* ---------- 右栏 192 侧栏 ---------- */
.mus-right { padding: 6px 0 12px; }
.mus-right table { border-collapse: separate; }
.sb-h { line-height: 0; }
.hbg {
  background: url('') #DCE9F5; /* hbg.gif 由模板内联引入背景图更可靠，这里兜底浅蓝 */
  padding: 0;
}
.hbg.tall { height: 56px; }
.sb-note { padding: 6px 4px; line-height: 1.7; text-align: left; }

/* ---------- 6. 页脚 ---------- */
.mus-foot {
  background: #FFFFFF;
  margin: 0 auto 10px;
  border: 1px solid #9db8d2;
  box-sizing: border-box;
}
.mus-foot .sep { height: 1px; background: #E1E1E1; margin-top: 10px; }
.mus-foot .ft { text-align: center; line-height: 1.9; padding: 8px 0 14px; }

/* ---------- 播放条（与全站 site.css 同款，独立页自带） ---------- */
.player-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; height: 58px;
  background: linear-gradient(#0e2439, #0a1a2b); border-top: 2px solid #336699;
  display: flex; align-items: center; gap: 10px; padding: 0 14px; box-shadow: 0 -3px 14px rgba(0,0,0,.35); }
.player-bar[hidden] { display: none; }
.pb-btn { background: none; border: 1px solid #3d6288; color: #cfe3f5; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; font-size: 13px; line-height: 1; }
.pb-btn:hover { background: #336699; color: #fff; }
.pb-play { width: 42px; height: 42px; font-size: 16px; background: #336699; border-color: #336699; }
.pb-info { flex: 1; min-width: 0; color: #cfe3f5; }
.pb-title { font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-progress { position: relative; height: 6px; background: #1d3a57; border-radius: 3px; margin: 4px 0 2px; cursor: pointer; }
.pb-progress > div { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.pb-loaded { background: #2c527a; }
.pb-played { background: #e33; background: linear-gradient(90deg, #cc2222, #ff5544); }
.pb-time { font-size: 11px; color: #7d9ab8; }
.pb-rate { width: auto; border-radius: 15px; padding: 0 10px; font-size: 12px; }
.pb-vol-wrap { display: flex; align-items: center; gap: 4px; }
.pb-vol-ico { color: #7d9ab8; font-size: 14px; }
.pb-vol-wrap input[type=range] { width: 70px; accent-color: #cc2222; }
.pb-close { border-color: transparent; color: #587a9d; }
body.mus-page .pb-btn { height: 32px; }

/* ---------- 移动端 ---------- */
@media (max-width: 820px) {
  body.mus-page { padding: 0 6px 70px; }
  .mus-navbtn {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 34px; margin: 6px auto 6px 0; /* 贴左上，与主站导航一致 */
    background: #0d3a66; border: 1px solid #3d6288; border-radius: 4px;
    cursor: pointer; padding: 0 8px;
  }
  .mus-navbtn span { display: block; height: 3px; background: #cfe3f5; border-radius: 2px; transition: transform .25s; }
  .mus-navbtn.x span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mus-navbtn.x span:nth-child(2) { opacity: 0; }
  .mus-navbtn.x span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* 移动端导航：点汉堡全宽下拉（与主站交互一致） */
  .mus-mainnav { display: none; background-image: none; background: #0d3a66; }
  .mus-mainnav.open { display: block; }
  .mus-mainnav ul { width: 100%; display: block; padding: 2px 0 6px; }
  .mus-mainnav li { border-right: 0; border-bottom: 1px solid #1d4a78; height: auto; }
  .mus-mainnav li:last-child { border-bottom: 0; }
  .mus-mainnav a { color: #cfe3f5; padding: 9px 0; }

  .mus-w, .mus-foot { width: 100% !important; }

  /* 主面板两栏转上下：table/tbody/tr/td 整条链转 block，内层表格保持表格布局 */
  .mus-main, .mus-main > tbody, .mus-main > tbody > tr { display: block; }
  .mus-main > tbody > tr > td { display: block; width: auto !important; }
  .mus-main td[bgcolor="#333333"] { display: none; }
  /* 内层定宽表格全部压满屏宽（页头 766 / 面包屑 740 等） */
  .mus-w table, .mus-foot table { width: 100% !important; }
  .mus-w td[width="561"], .mus-w td[width="715"], .mus-w td[width="187"] { width: auto !important; }
  .mus-w img { max-width: 100%; height: auto; }
  .mus-left { padding: 8px 4px; }
  .mus-left img { max-width: 100%; height: auto; }
  .mus-right { padding: 0 4px 12px; }
  .mus-right > table { width: 100% !important; }
  .mus-right > table td[width="72%"] { width: 72% !important; }

  /* 曲目表横向滚动 */
  .mst-wrap, .mus-left form { display: block; overflow-x: auto; }
  .mst { min-width: 560px; }
  .mus-alb .cov { max-width: 90px; max-height: 90px; }
}

/* ---------- 专辑简介 & 歌词列 ---------- */
.alb-meta .alb-desc { line-height: 1.8; color: #333; }
.dim-img { opacity: .25; filter: grayscale(1); }

/* ---------- 单曲歌词浮层（与 zl.css 通用浮层同名同款） ---------- */
.zl-pop { position: fixed; inset: 0; z-index: 9980; }
.zl-pop[hidden] { display: none; }
.zl-pop-mask {
  position: absolute; inset: 0;
  background: rgba(10, 16, 24, .72);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.zl-pop-box {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, 94vw); max-height: 86vh;
  display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid #9DB8D2;
  box-shadow: 0 14px 46px rgba(0, 0, 0, .45);
  animation: musPopIn .16s ease-out;
}
@keyframes musPopIn { from { transform: translate(-50%, -47%); opacity: .4; } to { transform: translate(-50%, -50%); opacity: 1; } }
.zl-pop-h {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px;
  background: #F2F6FB; border-bottom: 2px solid #336699;
}
.zl-pop-h span { color: #172E5B; font-size: 14px; font-weight: 700; letter-spacing: 1px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-pop-x { color: #336699; font-size: 18px; line-height: 1; text-decoration: none; padding: 0 4px; }
.zl-pop-x:hover { color: #C0392B; }
.zl-pop-b {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 14px 18px; background: #FFFFFF;
  color: #000000; font-size: 12px; line-height: 1.85;
}
.zl-pop-b img { max-width: 100% !important; height: auto !important; }
.zl-pop-b table { max-width: 100%; }
.zl-pop-f {
  flex: 0 0 auto; display: flex; justify-content: center; gap: 8px;
  padding: 8px 10px; background: #F2F6FB; border-top: 1px solid #C7D6E5;
}
.zl-pop-f button {
  font-size: 12px; padding: 4px 18px; cursor: pointer;
  border: 1px solid #9DB8D2; background: #FFFFFF; color: #336699;
}
.zl-pop-f button:hover { background: #336699; border-color: #336699; color: #FFFFFF; }

/* 歌词打印：只打浮层正文 */
@media print {
  body.zl-pop-printing > *:not(.zl-pop),
  body.zl-pop-printing .zl-pop-mask { display: none !important; }
  body.zl-pop-printing .zl-pop { position: static !important; }
  body.zl-pop-printing .zl-pop-box {
    position: static; transform: none; width: auto; max-height: none;
    border: 0; box-shadow: none; display: block;
  }
  body.zl-pop-printing .zl-pop-h { border-bottom: 1px solid #999; }
  body.zl-pop-printing .zl-pop-f { display: none; }
  body.zl-pop-printing .zl-pop-b { overflow: visible; padding: 0; }
}