@charset "utf-8";
/* ==========================================================================
   21曲谱 · 歌词频道样式  /21qupu/style/css/geci.css
   配色沿用原站：主色 #CC6600 / 深 #993300 / 链接蓝 #069 / 辅助 #1487f4
   ========================================================================== */

/* ------------------------------ 通用 ------------------------------ */
.gc-clear:after { content: ""; display: block; clear: both; }

/* ------------------------------ 列表页 ------------------------------ */
.gc-head { border-top: #ccc 2px solid; border-bottom: #ececec 1px solid;
  padding: 14px 0 12px; position: relative; margin-bottom: 16px; }
.gc-head:after { content: ""; position: absolute; left: 0; top: -2px; width: 100px; height: 2px; background: #CC6600; }
.gc-head h1 { font-size: 22px; font-weight: normal; color: #CC6600; line-height: 1.3; }
.gc-head h1 span { font-size: 13px; color: #999; margin-left: 10px; }

.gc-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.gc-search { flex: 1; min-width: 240px; display: flex; border: 1px solid #e0e0e0; border-radius: 3px; overflow: hidden; background: #fff; }
.gc-search input { flex: 1; border: 0; outline: none; height: 36px; line-height: 36px; padding: 0 12px; font-size: 14px; font-family: inherit; }
.gc-search button { border: 0; background: #CC6600; color: #fff; width: 74px; font-size: 14px; cursor: pointer; font-family: inherit; }
.gc-search button:hover { background: #B35A00; }

.gc-tabs { display: flex; border: 1px solid #e0e0e0; border-radius: 3px; overflow: hidden; background: #fff; }
.gc-tabs a { padding: 0 16px; height: 36px; line-height: 36px; font-size: 14px; color: #666; border-right: 1px solid #f0f0f0; }
.gc-tabs a:last-child { border-right: 0; }
.gc-tabs a:hover { color: #CC6600; text-decoration: none; }
.gc-tabs a.on { background: #CC6600; color: #fff; }

.gc-list { margin-bottom: 10px; }
.gc-item { padding: 16px 18px; border: 1px solid #f0f0f0; border-left: 3px solid transparent;
  border-radius: 4px; margin-bottom: 10px; background: #fff; transition: all .15s; }
.gc-item:hover { border-color: #F1DCC4; border-left-color: #CC6600; background: #FFFDFA; }
.gc-item h2 { font-size: 17px; font-weight: normal; line-height: 1.4; margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-item h2 a { color: #069; }
.gc-item h2 a:hover { color: #CC6600; text-decoration: none; }
.gc-item h2 em { font-style: normal; font-size: 13px; color: #bbb; margin-left: 8px; }
.gc-meta { font-size: 13px; color: #999; line-height: 20px; margin-bottom: 8px; }
.gc-meta a { color: #CC6600; }
.gc-meta i { font-style: normal; color: #ddd; margin: 0 7px; }
.gc-preview { font-size: 14px; color: #666; line-height: 1.9;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.gc-empty { padding: 60px 20px; text-align: center; color: #999; font-size: 15px; background: #FAFAFA; border-radius: 4px; }

/* 分页（沿用站点 .pagelist 习惯） */
.pagelist { text-align: center; padding: 26px 0 10px; font-size: 14px; }
.pagelist a, .pagelist b, .pagelist i { display: inline-block; min-width: 34px; height: 34px;
  line-height: 34px; padding: 0 10px; margin: 0 3px; border: 1px solid #e6e6e6;
  border-radius: 3px; color: #666; background: #fff; font-weight: normal; font-style: normal; }
.pagelist a:hover { border-color: #CC6600; color: #CC6600; text-decoration: none; }
.pagelist b.dq { background: #CC6600; border-color: #CC6600; color: #fff; }
.pagelist b.disabled { color: #ccc; }
.pagelist i { border: 0; background: none; min-width: 20px; }

/* ------------------------------ 详情页 · 歌曲信息头 ------------------------------ */
.lyr-head { display: flex; gap: 20px; padding: 22px; border-radius: 4px;
  background: linear-gradient(135deg, #FFF6EC 0%, #FFFDF9 60%, #FFF 100%);
  border: 1px solid #F1E0CC; position: relative; overflow: hidden; }
.lyr-head:before { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
  border-radius: 50%; background: #CC6600; opacity: .04; }
.lyr-cover { width: 104px; height: 104px; border-radius: 4px; flex: 0 0 104px; overflow: hidden;
  background: linear-gradient(135deg, #CC6600, #E8933F); position: relative;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(204,102,0,.18); }
.lyr-cover span { color: #fff; font-size: 42px; opacity: .95; font-family: Georgia, serif; line-height: 1; }
.lyr-meta { flex: 1; min-width: 0; position: relative; z-index: 1; }
.lyr-meta h1 { font-size: 24px; color: #222; font-weight: normal; line-height: 1.35; margin-bottom: 10px; }
.lyr-meta h1 em { font-style: normal; color: #CC6600; }
.lyr-sub { font-size: 13px; color: #888; line-height: 26px; margin-bottom: 10px; }
.lyr-sub b { font-weight: normal; color: #CC6600; }
.lyr-sub .dot { color: #ddd; margin: 0 8px; }
.lyr-sub a { color: #069; }
.lyr-tags { margin-bottom: 14px; overflow: hidden; }
.lyr-tags i { font-style: normal; display: inline-block; font-size: 12px; color: #CC6600;
  background: #FFF1E2; border: 1px solid #F6DFC6; border-radius: 12px; padding: 2px 10px; margin: 0 6px 6px 0; }
.lyr-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-block; font-size: 14px; line-height: 34px; height: 34px; padding: 0 18px;
  border-radius: 3px; border: 1px solid #E0D8CE; color: #666; background: #fff; cursor: pointer;
  font-family: inherit; transition: .15s; }
.btn:hover { border-color: #CC6600; color: #CC6600; text-decoration: none; }
.btn-main { background: #CC6600; border-color: #CC6600; color: #fff; }
.btn-main:hover { background: #B35A00; border-color: #B35A00; color: #fff; text-decoration: none; }

/* ------------------------------ 详情页 · 工具条 ------------------------------ */
.lyr-tool { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 10px 14px; background: #FAFAFA; border: 1px solid #ececec; border-radius: 4px; }
.seg { display: flex; border: 1px solid #e0e0e0; border-radius: 3px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: transparent; font: 14px "Microsoft YaHei", Arial; color: #666;
  padding: 0 14px; height: 30px; cursor: pointer; }
.seg button.on { background: #CC6600; color: #fff; }
.tool-label { font-size: 13px; color: #999; }
.fs-btn { width: 32px; height: 30px; border: 1px solid #e0e0e0; background: #fff; border-radius: 3px;
  cursor: pointer; color: #666; font-size: 14px; font-family: inherit; }
.fs-btn:hover { border-color: #CC6600; color: #CC6600; }
.fs-val { font-size: 13px; color: #CC6600; min-width: 44px; text-align: center; }
.tool-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mini { border: 1px solid #e0e0e0; background: #fff; color: #666; font-size: 13px; height: 30px;
  padding: 0 12px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.mini:hover { border-color: #CC6600; color: #CC6600; }

/* ------------------------------ 详情页 · 歌词正文 ------------------------------ */
.lyr-body { margin-top: 16px; background: #FFFDF9; border: 1px solid #F3E7D8; border-radius: 6px;
  padding: 38px 46px 46px; position: relative; }
.lyr-body:before { content: "\201C"; position: absolute; left: 14px; top: 4px;
  font: 64px/1 Georgia, serif; color: #F6E3CB; }
.lyr-sec { margin-bottom: 30px; position: relative; }
.lyr-sec:last-child { margin-bottom: 0; }
.sec-tag { display: inline-block; font-size: 12px; color: #B37A38; background: #FBF1E4;
  border-radius: 2px; padding: 2px 9px; margin-bottom: 10px; letter-spacing: 1px; }
.lyr-line { font-size: 17px; line-height: 2.15; color: #333; letter-spacing: .4px;
  padding: 1px 12px; border-left: 3px solid transparent; border-radius: 0 3px 3px 0;
  transition: background .15s, border-color .15s; word-break: break-word; }
.lyr-line:hover { background: #FFF4E6; border-left-color: #CC6600; }
.lyr-body.lrc .lyr-line:before { content: attr(data-t); display: inline-block; width: 74px;
  font-size: 12px; color: #C9C9C9; font-family: Consolas, Monaco, monospace; letter-spacing: 0; }
.lyr-body.lrc .lyr-line.cur { background: #FFF1E0; border-left-color: #CC6600; color: #8A4B00; }
.lyr-body.lrc .lyr-line.cur:before { color: #CC6600; }

/* 无 LRC 时的提示 */
.lyr-notice { font-size: 12px; color: #bbb; padding: 0 12px 6px; }

/* 复制提示 */
.gc-toast { position: fixed; left: 50%; top: 24px; transform: translateX(-50%);
  background: rgba(50,50,50,.92); color: #fff; font-size: 13px; padding: 9px 20px;
  border-radius: 20px; opacity: 0; transition: .25s; pointer-events: none; z-index: 9999; }
.gc-toast.show { opacity: 1; }

/* ------------------------------ 详情页 · 同曲简谱 ------------------------------ */
.same-pu { display: flex; gap: 16px; align-items: center; margin-top: 18px; padding: 14px 18px;
  background: #fff; border: 1px solid #ececec; border-left: 3px solid #CC6600; border-radius: 4px; }
.same-pu .thumb { width: 96px; height: 64px; flex: 0 0 96px; overflow: hidden; border-radius: 3px;
  background: #F3F3F3 center/cover no-repeat; display: flex; align-items: center; justify-content: center;
  color: #cfcfcf; font-size: 26px; }
.same-pu .txt { flex: 1; min-width: 0; }
.same-pu .txt a { font-size: 16px; color: #069; display: block; margin-bottom: 6px; }
.same-pu .txt a:hover { color: #CC6600; }
.same-pu .txt p { font-size: 13px; color: #999; line-height: 1.7; }
.same-pu .go { font-size: 14px; color: #CC6600; white-space: nowrap; }

/* ------------------------------ 详情页 · 上下篇 ------------------------------ */
.pn { display: flex; gap: 12px; margin: 20px 0; }
.pn a { flex: 1; display: block; padding: 12px 16px; border: 1px solid #ececec;
  border-radius: 4px; background: #fff; overflow: hidden; }
.pn a:hover { border-color: #F1D6B4; text-decoration: none; }
.pn em { font-style: normal; font-size: 12px; color: #CC6600; display: block; margin-bottom: 6px; }
.pn b { font-weight: normal; font-size: 15px; color: #333; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn a:hover b { color: #CC6600; }

/* ------------------------------ 侧栏 ------------------------------ */
.sider-sec { margin-bottom: 26px; }
.singer-card { display: flex; gap: 12px; align-items: center; padding: 12px;
  background: #FFFDF9; border: 1px solid #F3E7D8; border-radius: 4px; margin-bottom: 12px; }
.singer-card .av { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
  background: linear-gradient(135deg, #CC6600, #E8933F); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center; }
.singer-card .txt { min-width: 0; }
.singer-card b { display: block; font-weight: normal; font-size: 15px; color: #333; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.singer-card small { color: #999; font-size: 12px; }
.song-list li { line-height: 34px; border-bottom: 1px dotted #ececec; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-list li a { color: #555; }
.song-list li a:hover { color: #CC6600; }
.song-list li em { font-style: normal; color: #ccc; font-size: 12px; margin-left: 6px; }
.hot-rank { counter-reset: hr; }
.hot-rank li { line-height: 34px; font-size: 14px; border-bottom: 1px dotted #ececec;
  padding-left: 28px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-rank li:before { counter-increment: hr; content: counter(hr, decimal-leading-zero);
  position: absolute; left: 0; top: 0; width: 20px; text-align: center;
  font-family: arial; font-style: italic; color: #bbb; }
.hot-rank li:nth-child(1):before, .hot-rank li:nth-child(2):before, .hot-rank li:nth-child(3):before { color: #f63; font-weight: bold; }

/* ------------------------------ 移动端 ------------------------------ */
@media screen and (max-width: 650px) {
  .gc-head h1 { font-size: 19px; }
  .gc-item { padding: 13px 14px; }
  .gc-item h2 { font-size: 16px; }
  .gc-preview { font-size: 13px; -webkit-line-clamp: 2; }

  .lyr-head { flex-direction: column; gap: 14px; padding: 16px; }
  .lyr-cover { width: 68px; height: 68px; flex: 0 0 68px; }
  .lyr-cover span { font-size: 30px; }
  .lyr-meta h1 { font-size: 19px; }
  .lyr-acts .btn { flex: 1; text-align: center; padding: 0 8px; }

  .lyr-tool { position: sticky; top: 40px; z-index: 8; gap: 8px; padding: 8px 10px; }
  .tool-right { margin-left: 0; width: 100%; justify-content: flex-start; }

  .lyr-body { padding: 24px 16px 30px; }
  .lyr-body:before { font-size: 48px; left: 4px; }
  .lyr-line { font-size: 16px; line-height: 2.05; padding: 1px 8px; }
  .lyr-body.lrc .lyr-line:before { width: 58px; font-size: 11px; }

  .same-pu { padding: 12px; gap: 12px; }
  .same-pu .thumb { width: 72px; height: 48px; flex: 0 0 72px; }
  .same-pu .go { display: none; }

  .pn { flex-direction: column; }
  .pn a { width: 100%; }
}