/* ============================================================
 *  TwinS歌曲视听中心（mic.php / mic_view.php / play.php 共用）
 *  金黄顶栏原色 #EDBC1A，专辑面板复刻原站灰色浮雕表格
 * ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #ffffff;
  font-family: "宋体", SimSun, "NSimSun", serif;
  font-size: 12px;
  color: #000000;
}
a { text-decoration: none; }
a:link    { color: #0000cc; }
a:visited { color: #551a8b; }
a:hover   { color: #ff6600; text-decoration: underline; }
img { border: 0; }
ul { list-style: none; }

#page { width: 803px; margin: 0 auto; background: #ffffff; }

/* ============ 金黄顶栏（本页原色 #EDBC1A） ============ */
.top-bar {
  display: flex;
  align-items: stretch;
  width: 803px;
  margin: 0 auto;
}
.top-bar .cap { flex: none; display: block; }
.top-bar .cap img { display: block; width: 7px; height: 23px; }
.top-bar .welcome {
  flex: 1;
  background: #EDBC1A;
  color: #ffffff;
  line-height: 23px;
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.top-bar .tools {
  background: #EDBC1A;
  color: #ffffff;
  line-height: 23px;
  padding: 0 8px;
  white-space: nowrap;
}
.top-bar .tools span { margin: 0 2px; }
.top-bar .sitemap {
  flex: none;
  background: #F7F7F7;
  display: flex;
  align-items: center;
  padding-right: 2px;
}
.top-bar .sitemap img { display: block; width: 67px; height: 23px; }

/* ============ 头图横幅（site-banner，全站统一） ============ */
.flash-header {
  height: 150px;
  position: relative;
  overflow: hidden;
  background: #e8380d url(../images/banner.jpg) center / cover no-repeat;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 46px;
  text-align: left;
  border-bottom: 2px solid #cc3300;
}
.flash-header .site-title {
  font-family: "黑体", SimHei, sans-serif;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 6px;
  text-shadow: 2px 2px 3px rgba(120, 20, 0, .55);
}
.flash-header .site-sub {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 3px;
  color: #fff3cc;
}
.flash-header .site-url {
  margin-top: 8px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 2px;
}

/* ============ 主导航 ============ */
.main-nav {
  display: flex;
  width: 803px;
  margin: 0 auto;
}
.main-nav a {
  flex: 1;
  display: block;
  text-align: center;
  line-height: 33px;
  height: 33px;
  color: #000000;
  background: linear-gradient(#fdfdfd, #e2e2e2);
  border: 1px solid #c6c6c6;
  margin-left: -1px;
  white-space: nowrap;
}
.main-nav a:first-child { margin-left: 0; }
.main-nav a:hover { color: #ff6600; text-decoration: underline; }
.main-nav .bbs { color: #7E2DA9; font-weight: bold; }
.main-nav .bbs:hover { color: #7E2DA9; }
.main-nav .here { font-weight: bold; color: #cc6600; }

/* ============ 专辑列表面板（原灰色浮雕表格 cellpadding=8 cellspacing=1；一行两列网格） ============ */
.album-panel {
  width: 803px;
  box-sizing: border-box;
  margin: 14px auto 0;
  padding: 8px;
  background: #f2f2f2;
  border: 1px solid #999999;
}
.album-panel-head {
  width: auto;
  margin: 0;
  background: #ffffff;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 0;
}
/* 列表容器：默认单列白底（mic_view 曲目页也复用此类），列表页加 .cols 启用两列网格 */
.album-list {
  width: auto;
  margin: 0;
  background: #ffffff;
}
/* 两列网格：1px 间隙露出灰底当分隔线（仿原 cellspacing=1） */
.album-list.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #e3e3e3;
  border-top: 1px solid #e3e3e3;
}
/* 行卡片：75x75 封面在左，信息在右 */
.album-row {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-bottom: 1px solid #e3e3e3;
}
.album-row:last-child { border-bottom: 0; }
.album-row:hover { background: #F6F6F6; }
.album-list.cols .album-row {
  background: #ffffff;
  border-bottom: 0;   /* 网格的 1px 灰色间隙已承担分隔 */
}
.album-list.cols .album-row.full { grid-column: 1 / -1; }
.album-cover { flex: none; width: 75px; }
.album-cover img {
  display: block;
  width: 75px;
  height: 75px;
  object-fit: cover;      /* 统一正方形：不够裁边，比例不齐也保 75x75 */
  border: 1px solid #999999;
}
.album-cover a:hover img { border-color: #ff6600; }
.album-info { flex: 1; min-width: 0; }
.album-info table { border-collapse: collapse; width: 100%; }
.album-info td { padding: 2px 0; vertical-align: top; }
.album-info .lbl { width: 62px; white-space: nowrap; }
.album-info .name { word-break: break-all; }
.album-info .name a { font-weight: bold; color: #CC6600; }
.album-info .name a:visited { color: #CC6600; }
.album-info .name a:hover { color: #ff6600; }
.album-info .arrow { color: red; }
.album-info .meta { text-align: right; white-space: nowrap; }

/* ============ 分页条 ============ */
.pagebar {
  background: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 8px 0 6px;
  color: #333;
}
.pagebar a { color: #00c; }
.pagebar a:visited { color: #551A8B; }
.pagebar a:hover { color: #ff6600; }
.pagebar .off { color: #999; }
.pagebar .cur { color: #CC6600; }

/* ============ 专辑详情头（mic_view.php） ============ */
.album-head {
  display: flex;
  gap: 12px;
  padding: 12px 10px;
  border-bottom: 1px solid #e3e3e3;
  background: #fbfbfb;
}
.album-head .cover img {
  display: block;
  width: 110px;
  border: 1px solid #999999;
}
.album-head .cover .no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border: 1px solid #999999;
  background: #f2f2f2;
  color: #999999;
}
.album-head .hd-info { flex: 1; padding-top: 2px; }
.album-head .hd-info table { border-collapse: collapse; }
.album-head .hd-info td { padding: 3px 0; white-space: nowrap; }
.album-head .hd-info .lbl { width: 68px; color: #666666; }
.album-head .hd-name { font-weight: bold; font-size: 14px; color: #CC6600; padding-bottom: 4px; }
.back-line { padding: 6px 10px; border-bottom: 1px solid #e3e3e3; background: #ffffff; }

/* ============ 曲目列表（mic_view.php） ============ */
.track-table { width: 100%; border-collapse: collapse; background: #ffffff; }
.track-table th {
  background: #efefef;
  border-bottom: 1px solid #d5d5d5;
  padding: 5px 8px;
  font-weight: bold;
  text-align: left;
}
.track-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #eeeeee;
}
.track-table tr:hover td { background: #F6F6F6; }
.track-table td.num {
  width: 46px;
  text-align: center;
  color: #888888;
  font-variant-numeric: tabular-nums;
}
.track-table td.op { width: 120px; text-align: right; white-space: nowrap; }
.track-table td.op a { color: #CC6600; font-weight: bold; }
.track-table td.op a:visited { color: #CC6600; }
.track-table td.op a:hover { color: #ff6600; }
.track-table td.op .na { color: #999999; }

/* ============ 试听页（play.php） ============ */
.play-panel { padding: 26px 20px 30px; background: #ffffff; }
.play-panel .crumb { margin-bottom: 16px; color: #888888; }
.play-panel .crumb a { color: #0000cc; }
.play-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border: 1px solid #e0d9bd;
  background: linear-gradient(#fffdf4, #fbf5e2);
  padding: 18px;
  border-radius: 6px;
}
.play-box .pv {
  flex: none;
  width: 150px;
  height: 150px;
  border: 1px solid #999999;
  background: #f2f2f2 center / cover no-repeat;
}
.play-box .pv.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  background: #f2f2f2;
}
.play-box .px { flex: 1; min-width: 0; }
.play-box .px .p-album { color: #888888; margin-bottom: 4px; }
.play-box .px .p-album a { color: #888888; }
.play-box .px .p-album a:hover { color: #ff6600; }
.play-box .px .p-title { font-weight: bold; font-size: 18px; font-family: "黑体", SimHei, sans-serif; color: #333333; margin-bottom: 12px; }
.play-box .px .p-note { color: #b06a00; margin: 10px 0 4px; }
.play-box .px .p-copy { color: #cc3300; font-weight: bold; margin-top: 4px; }
.play-box .px .p-noaudio { color: #999999; font-size: 14px; padding: 26px 0 6px; }
.play-box .px audio { width: 100%; margin-top: 4px; }
.play-box .px .p-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 22px;
  border: 1px solid #cc9900;
  border-radius: 3px;
  background: linear-gradient(#fff6d8, #ffe89a);
  color: #7a5200;
  font-weight: bold;
  cursor: pointer;
  font-size: 13px;
}
.play-box .px .p-btn:hover { text-decoration: none; background: linear-gradient(#fff0b8, #ffdf7a); }
.play-sec { margin-top: 8px; color: #999999; }
.play-sec b { color: #cc6600; }

/* ============ 页脚（原 bottom.gif 金黄装饰条 + 暖调圆角面板） ============ */
.foot-gold {
  display: block;
  width: 803px;
  height: 18px;
  margin: 18px auto 0;
}
.site-footer {
  width: 803px;
  margin: 12px auto 16px;
  border: 1px solid #ddce96;
  border-radius: 6px;
  background: linear-gradient(#fdfaf0, #f4eeda);
  text-align: center;
  padding: 14px 0 16px;
  line-height: 1.9;
}
.site-footer .green { color: #008000; font-weight: bold; }
.site-footer .pink  { color: #f65a93; font-weight: bold; }
.site-footer .site-mark b { color: #0066ff; }
.site-footer .site-mark i { color: #f4790b; font-style: normal; font-weight: bold; }

/* ============ 试听播放器（play.php，2005 暖金质感） ============ */
.mpl {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid #d8c98f; border-radius: 6px;
  background: linear-gradient(#fffdf4, #fbf0cd);
}
.mpl-btn {
  flex: none; width: 34px; height: 34px;
  border: 1px solid #c9a53e; border-radius: 50%;
  background: linear-gradient(#fff3c4, #ffc93e);
  color: #7a4c00; font-size: 13px; line-height: 1; cursor: pointer;
  font-family: SimSun, serif;
}
.mpl-btn:hover { background: linear-gradient(#fff8dc, #ffd76a); }
.mpl-btn:active { background: linear-gradient(#ffd76a, #ffb400); }
.mpl-mid { flex: 1; min-width: 0; }
.mpl-bar {
  position: relative; height: 12px; cursor: pointer;
  border: 1px solid #c9b978; border-radius: 6px;
  background: linear-gradient(#f4ecd4, #e9dcb2);
  overflow: hidden;
}
.mpl-fill {
  height: 100%; width: 0%;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(#ffe08a, #ffb400);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.mpl-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 5px; font-size: 11px; color: #99884f;
}
.mpl-time b { color: #b06a00; }
.mpl-state { color: #b06a00; }