/* ═══════════════════════════════════════════════
   爱的圣乐 · 天主教圣乐离线播放器
   浅色主题 · 象牙白 + 玛利亚蓝 + 礼仪金
   ═══════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface2: #fdfcfa;
  --ink: #26304a;
  --ink2: #47506b;
  --muted: #646c7d;   /* 原 #9aa0b0 对比度仅 2.40，低于无障碍 4.5 标准；此值 4.84 */
  --line: #ece8df;
  --blue: #2d4a77;
  --blue2: #40608f;
  --gold: #b8923e;
  --gold2: #d4b36a;
  --gold3: #f0e2c4;
  --shadow: 0 6px 24px rgba(45, 74, 119, .10);
  --shadow-sm: 0 2px 10px rgba(45, 74, 119, .07);
  --line2: #f3f0e9;
  --press: #faf7f0;
  --ph1: #fbf7ec;
  --ph2: #f0e6cd;
  --topbg: rgba(247, 245, 240, .88);
  --navbg: rgba(255, 255, 255, .95);
  --minibg: rgba(255, 255, 255, .96);
  --stage-glow: #efe6d0;
  --score-bg: #fdfcf9;
  --sc-topbg: rgba(253, 252, 249, .96);
  --page-side: #efece4;
  --side-line: #e5e0d5;
  --tag-blue-bg: #f2f6fc;
  --tag-blue-line: #d5deee;
  --tag-gold-bg: #fdf8ec;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  /* 高度随字号缩放：原先是固定 px，字号放大到 150% 时导航标签与
     迷你条的两行文字会溢出容器 */
  --nav-h: calc(58px * var(--font-scale, 1));
  --mini-h: calc(62px * var(--font-scale, 1));
  --safe-b: env(safe-area-inset-bottom, 0px);
}
html[data-theme="dark"] {
  --bg: #131a28;
  --surface: #1c2537;
  --surface2: #212c42;
  --ink: #e9edf6;
  --ink2: #c4cbdc;
  --muted: #808a9f;
  --line: #2a3550;
  --blue: #8fb0e0;
  --blue2: #5f83b8;
  --gold: #d4b36a;
  --gold2: #e0c583;
  --gold3: #3a3320;
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .28);
  --line2: #242f47;
  --press: #222c42;
  --ph1: #26304a;
  --ph2: #1d2740;
  --topbg: rgba(19, 26, 40, .88);
  --navbg: rgba(22, 29, 44, .95);
  --minibg: rgba(28, 37, 55, .97);
  --stage-glow: #253048;
  --score-bg: #171e2e;
  --sc-topbg: rgba(23, 30, 46, .96);
  --page-side: #0c111c;
  --side-line: #232d44;
  --tag-blue-bg: #1e2a42;
  --tag-blue-line: #33436a;
  --tag-gold-bg: #2e2818;
}
html[data-theme="dark"] .btn.pri,
html[data-theme="dark"] .chip.on {
  background: linear-gradient(135deg, #40608f, #2d4a77);
  color: #fff;
}
html[data-theme="dark"] .topbar h1 { color: var(--gold2); }
html[data-theme="dark"] .al .cov,
html[data-theme="dark"] .alhead .cov,
html[data-theme="dark"] #player .bigcov { border-color: #2a3550; }

/* 主题分段选择 */
.seg { display: flex; gap: 4px; background: var(--line2); border-radius: 14px; padding: 3px; margin-top: 8px; }
.seg button {
  flex: 1; border: 0; background: none; color: var(--muted);
  font-size: .78rem; padding: 7px 0; border-radius: 11px;
}
.seg button.on { background: var(--surface); color: var(--blue); box-shadow: var(--shadow-sm); }

/* 离线管理 */
.off-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
}
.off-row + .off-row { border-top: 1px solid var(--line2); }
.off-row .meta { flex: 1; min-width: 0; }
.off-row .t1 { font-size: .9rem; color: var(--ink); }
.off-row .t2 { font-size: .7rem; color: var(--muted); margin-top: 3px; }
.off-row .act {
  border: 1px solid var(--line); background: var(--surface); color: var(--blue);
  font-size: .74rem; border-radius: 15px; padding: 6px 13px; flex: none;
}
.off-row .act:disabled { opacity: .5; }
.off-row.done .act { color: var(--muted); }
.danger-btn {
  width: 100%; border: 1px solid #e3c1c1; background: var(--surface);
  color: #b05252; border-radius: 22px; padding: 11px 0; font-size: .85rem;
  margin-top: 10px;
}
html[data-theme="dark"] .danger-btn { border-color: #5a3333; color: #d98383; }
/* 根字号随屏宽微调：小屏(320)约 15px，常规 16px，大屏(430+)约 17px */
html { font-size: calc(clamp(15px, 14px + 0.55vw, 17px) * var(--font-scale, 1)); }
body {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
#app {
  /* 末尾再留一截给右下角的 AI 天使，否则它会压住最后一行的专辑名 */
  padding-bottom: calc(var(--nav-h) + var(--mini-h) + var(--safe-b) + 74px);
  /* 兜底：任何意外的横向溢出都不允许整页左右滑动（clip 不会破坏顶栏 sticky） */
  overflow-x: clip;
}
button { font-family: inherit; cursor: pointer; }
a { -webkit-touch-callout: none; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px;
  background: var(--topbg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 {
  font-family: var(--serif);
  font-size: 1.22rem; font-weight: 700; letter-spacing: .06em;
  color: var(--blue);
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .back {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink2);
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 1.2rem; line-height: 1; display: none; flex: none;
  box-shadow: var(--shadow-sm);
}
.topbar.can-back .back { display: block; }
.topbar .cross { color: var(--gold); font-size: 1.1rem; }

/* ---------- 首页横幅 ---------- */
.hero {
  margin: 14px 16px 4px;
  border-radius: 18px;
  padding: 22px 20px 20px;
  color: #fdf9ef;
  background:
    radial-gradient(120% 160% at 88% -20%, rgba(212, 179, 106, .38), transparent 55%),
    linear-gradient(128deg, #33507f 0%, #24406c 55%, #1b3358 100%);
  box-shadow: 0 10px 28px rgba(36, 64, 108, .28);
  position: relative; overflow: hidden;
}
.hero::after {
  content: "✠";
  position: absolute; right: 6px; bottom: -34px;
  font-size: 7.5rem; line-height: 1;
  color: rgba(212, 179, 106, .16);
  font-family: var(--serif);
  pointer-events: none;
}
.hero h2 {
  font-family: var(--serif); font-size: clamp(1.2rem, 5.6vw, 1.5rem); letter-spacing: .1em;
  margin-bottom: 6px; color: #f6ead0;
}
.hero p { font-size: .78rem; opacity: .75; letter-spacing: .03em; }
.hero .hbtn {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 20px;
  padding: 9px 20px;
  font-size: .85rem; font-weight: 600; letter-spacing: .05em;
  color: #3a2f14;
  background: linear-gradient(135deg, #e6cd93, #cfa955);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

/* ---------- 分类横滑 ---------- */
.chips {
  display: flex; gap: 9px; overflow-x: auto;
  padding: 16px 16px 12px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 7px 16px; border-radius: 18px;
  background: var(--surface); color: var(--ink2);
  font-size: .84rem; letter-spacing: .02em;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: all .18s;
}
.chip.on {
  color: #fff; border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue2), var(--blue));
  box-shadow: 0 4px 12px rgba(45, 74, 119, .28);
}
.chipwrap { position: relative; }
.chipwrap .chips { padding-right: 86px; }
.chip-more {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(calc(-50% + 2px));
  text-decoration: none; color: var(--gold);
  border: 1px solid var(--gold2); background: var(--surface);
  font-size: .8rem; padding: 7px 12px; border-radius: 18px;
  box-shadow: -14px 0 14px -6px var(--bg), var(--shadow-sm);
  white-space: nowrap;
}

/* ---------- 专辑网格 ---------- */
.grid {
  display: grid;
  /* 自适应列数：窄屏(≤360px)自动变 2 列，常规手机 3 列，大屏 4 列。
     minmax 的下限用 0 之外的固定值，同时避免 1fr 的 auto 最小宽度被 nowrap 文字顶开 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 18px 12px; padding: 8px 16px 22px;
}
.al {
  display: flex; flex-direction: column; gap: 7px;
  text-decoration: none; color: inherit; min-width: 0;
}
/* 封面基类：容器裁切与图片铺满是所有用法的共性，
   若只写在 .al/.alhead/#mini 各自作用域里，新增用法就会漏掉 */
.cov { position: relative; overflow: hidden; background: var(--gold3); }
.cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cov .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); color: var(--gold);
  background: linear-gradient(140deg, var(--ph1), var(--ph2));
}

.al .cov {
  width: 100%; aspect-ratio: 1; border-radius: 13px; overflow: hidden;
  background: var(--gold3); position: relative;
  box-shadow: var(--shadow);
  border: 1px solid rgba(236, 232, 223, .9);
}
.al .cov img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; }
.al .cov .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.7rem; color: var(--gold);
  background: linear-gradient(140deg, var(--ph1), var(--ph2));
}
.al .nm {
  font-size: .8rem; line-height: 1.35; height: 2.15em; overflow: hidden;
  color: var(--ink); font-weight: 500;
}
.al .sub { font-size: .69rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sec-h {
  display: flex; align-items: baseline; gap: 9px;
  padding: 18px 18px 8px;
}
.sec-h b {
  font-family: var(--serif); font-size: 1.08rem; color: var(--ink);
  letter-spacing: .05em; position: relative; padding-left: 12px;
}
.sec-h b::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .12em;
  width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold2), var(--gold));
}
.sec-h span { font-size: .74rem; color: var(--muted); }

/* ---------- 专辑详情 ---------- */
.alhead { display: flex; gap: 16px; padding: 18px 18px 16px; align-items: center; }
.alhead .cov {
  width: clamp(84px, 28vw, 118px); aspect-ratio: 1; height: auto;
  border-radius: 16px; overflow: hidden; flex: none;
  background: var(--gold3); position: relative;
  box-shadow: 0 10px 26px rgba(45, 74, 119, .18);
  border: 1px solid rgba(236, 232, 223, .9);
}
.alhead .cov img { width: 100%; height: 100%; object-fit: cover; }
.alhead .cov .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 2.2rem; color: var(--gold);
  background: linear-gradient(140deg, var(--ph1), var(--ph2));
}
.alhead .inf { min-width: 0; }
.alhead .inf h2 {
  font-family: var(--serif); font-size: 1.12rem; margin-bottom: 7px;
  color: var(--ink); line-height: 1.4;
}
.alhead .inf p { font-size: .76rem; color: var(--muted); margin-bottom: 3px; }
.albtns { display: flex; gap: 10px; padding: 0 18px 12px; }
.btn {
  flex: 1; border: 1px solid var(--line); border-radius: 22px; padding: 11px 0;
  font-size: .88rem; background: var(--surface); color: var(--ink2);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: var(--shadow-sm);
}
.btn.pri {
  background: linear-gradient(135deg, var(--blue2), var(--blue));
  color: #fff; font-weight: 600; border: 0; letter-spacing: .04em;
  box-shadow: 0 5px 16px rgba(45, 74, 119, .3);
}
.btn:disabled { opacity: .55 }
.dlbar { margin: 0 18px 10px; font-size: .74rem; color: var(--muted); display: none; }
.dlbar .track { height: 4px; border-radius: 2px; background: var(--line); margin-top: 5px; overflow: hidden; }
.dlbar .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold2), var(--gold)); transition: width .3s; }

/* ---------- 歌曲列表 ---------- */
.tl {
  margin: 4px 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 4px 0;
}
.tr-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px;
  position: relative;
}
.tr-row + .tr-row::before {
  content: ""; position: absolute; left: 48px; right: 14px; top: 0;
  border-top: 1px solid var(--line2);
}
.tr-row:active { background: var(--press); }
.tr-row .no { width: 28px; text-align: center; font-size: .78rem; color: var(--muted); flex: none; }
.tr-row.playing .no { color: var(--gold); }
.tr-row.playing .t1 { color: var(--blue); font-weight: 600; }
.tr-row .meta { flex: 1; min-width: 0; }
.tr-row .t1 { font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-row .t2 { font-size: .7rem; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-row .fav { border: 0; background: none; color: #b2b7c4; font-size: 1.15rem; flex: none; }
.tr-row .fav.on { color: var(--gold); }
.tr-row .cached {
  color: var(--blue2); font-size: .62rem; flex: none;
  border: 1px solid var(--tag-blue-line); border-radius: 4px; padding: 2px 5px;
  background: var(--tag-blue-bg);
}

/* ---------- 搜索 ---------- */

.searchbox input {
  width: 100%; border: 1px solid var(--line); border-radius: 24px;
  background: var(--surface); color: var(--ink);
  padding: 12px 20px; font-size: .95rem; outline: none;
  box-shadow: var(--shadow-sm);
}
.searchbox input:focus { border-color: var(--gold2); }
.searchbox input::placeholder { color: var(--muted); }
.hint {
  text-align: center; color: var(--muted); font-size: .82rem;
  padding: 34px 24px; line-height: 2;
}

/* ---------- 我的 ---------- */
.mine-sec { padding: 14px 16px 0; }
.mine-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px; margin-bottom: 6px;
  font-size: .82rem; line-height: 1.8; color: var(--ink2);
  box-shadow: var(--shadow-sm);
}
.mine-card b {
  color: var(--blue); font-size: .95rem; display: block; margin-bottom: 4px;
  font-family: var(--serif); letter-spacing: .05em;
}

/* ---------- 迷你播放条 ---------- */
#mini {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(var(--nav-h) + var(--safe-b) + 8px);
  height: var(--mini-h); z-index: 30;
  background: var(--minibg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: none; align-items: center; gap: 11px; padding: 0 10px 0 12px;
  box-shadow: 0 8px 26px rgba(45, 74, 119, .16);
  overflow: hidden;
}
#mini.show { display: flex; }
#mini .cov {
  width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--gold3); display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-family: var(--serif);
}
#mini .cov img { width: 100%; height: 100%; object-fit: cover; }
#mini .meta { flex: 1; min-width: 0; }
#mini .t1 { font-size: .85rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mini .t2 { font-size: .68rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 播放键做成金色圆钮，与播放页的大圆键呼应；下一首用描边图标弱化，
   避免两个同等重量的实心三角互相打架 */
#mini button {
  border: 0; background: none; color: var(--ink2);
  flex: none; display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0;
}
#mini #miniPlay {
  width: 38px; height: 38px; min-width: 38px; min-height: 38px;
  border-radius: 50%; color: #fff;
  background: linear-gradient(150deg, #e2c489, #c9a04b 62%, #b8923e);
  box-shadow: 0 3px 10px rgba(140, 105, 40, .34);
}
#mini #miniPlay .ic { width: 17px; height: 17px; }
#mini #miniNext { color: var(--muted); }
#mini #miniNext .ic { width: 21px; height: 21px; }
#mini button:active { transform: scale(.94); }

/* 进度条贴着底边通铺，并跟随卡片圆角，不再像一截断线 */
#mini .pbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--line2); overflow: hidden;
  border-radius: 0 0 16px 16px;
}
#mini .pbar .fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  transition: width .25s linear;
}

/* ---------- 底部导航 ---------- */
#nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--navbg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex;
}
#nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--muted); font-size: .66rem; letter-spacing: .04em;
}
#nav a svg { width: 22px; height: 22px; fill: currentColor; }
#nav a.on { color: var(--blue); }
#nav a.on svg { fill: var(--gold); }

/* ---------- 全屏播放页 ---------- */
#player {
  position: fixed; inset: 0; z-index: 40;
  background:
    radial-gradient(90% 44% at 50% -6%, var(--stage-glow) 0%, transparent 70%),
    var(--bg);
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 24px calc(24px + var(--safe-b));
  transform: translateY(110%);
  /* 隐藏时彻底移出渲染与命中测试：手机地址栏收放会改变视口，
     只靠位移可能露出一角（长截图里也会被拼进去） */
  visibility: hidden; pointer-events: none;
  transition: transform .32s cubic-bezier(.3, .8, .3, 1), visibility 0s .32s;
}
#player.show { transform: translateY(0);   visibility: visible; pointer-events: auto;
  transition: transform .32s cubic-bezier(.3, .8, .3, 1), visibility 0s;
}
#player .ph-top { display: flex; align-items: center; }
#player .ph-top button {
  border: 0; background: none; color: var(--ink2); font-size: 1.35rem; padding: 8px;
}
#player .ph-top .ttl {
  flex: 1; text-align: center; font-size: .8rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#player .bigcov {
  width: min(70vw, 310px); aspect-ratio: 1; margin: 4vh auto 0;
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(140deg, var(--ph1), var(--ph2));
  box-shadow: 0 22px 54px rgba(45, 74, 119, .3);
  border: 1px solid rgba(236, 232, 223, .9);
  display: flex; align-items: center; justify-content: center;
}
#player .bigcov img { width: 100%; height: 100%; object-fit: cover; }
#player .bigcov .ph { font-family: var(--serif); font-size: 4rem; color: var(--gold); }
#player .song { text-align: center; margin-top: 3.6vh; padding: 0 6px; }
#player .song .t1 {
  font-family: var(--serif); font-size: clamp(1.05rem, 5vw, 1.35rem); margin-bottom: 7px;
  color: var(--ink); letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#player .song .t2 { font-size: .84rem; color: var(--muted); }

#player .prog { display: flex; align-items: center; gap: 10px; font-size: .7rem; color: var(--muted); }
#player .prog input {
  flex: 1; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--gold) var(--pv, 0%), #e5e0d4 var(--pv, 0%));
}
#player .prog input::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 3px solid var(--gold);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
#player .ctrl {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding: 0 8px;
}
#player .ctrl button { border: 0; background: none; color: var(--ink2); }
#player .ctrl .sm { font-size: 1.15rem; color: var(--muted); width: 44px; height: 44px; }
#player .ctrl .md { font-size: 1.9rem; width: 54px; height: 54px; color: var(--blue); }
#player .ctrl .lg {
  font-size: 1.9rem; width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, #e6cd93, #c9a44f); color: #3a2f14;
  box-shadow: 0 8px 22px rgba(184, 146, 62, .42);
}

/* ---------- 播放列表抽屉 ---------- */
#queue {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-height: 62vh; overflow-y: auto;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 16px 10px calc(16px + var(--safe-b));
  transform: translateY(110%);
  visibility: hidden; pointer-events: none;
  transition: transform .28s ease, visibility 0s .28s;
  box-shadow: 0 -10px 34px rgba(45, 74, 119, .22);
}
#queue.show {
  transform: translateY(0);
  visibility: visible; pointer-events: auto;
  transition: transform .28s ease, visibility 0s;
}
#queue .q-head { display: flex; align-items: center; padding: 0 12px 10px; }
#queue h3 {
  font-size: .92rem; color: var(--blue); flex: 1; padding: 0;
  font-family: var(--serif); letter-spacing: .06em;
}
#queue h3 span { font-size: .72rem; color: var(--muted); font-family: inherit; }
#queueClear {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: .72rem; border-radius: 13px; padding: 5px 12px;
}
.qdel {
  border: 0; background: none; color: var(--muted);
  font-size: .85rem; padding: 8px; flex: none;
}
#queue .tr-row { padding: 10px 12px; }
#qmask { position: fixed; inset: 0; z-index: 45; background: rgba(38, 48, 74, .35); display: none; }
#qmask.show { display: block; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--mini-h) + 34px);
  transform: translateX(-50%); z-index: 60;
  background: rgba(38, 48, 74, .94);
  color: #fdf9ef; font-size: .82rem; letter-spacing: .02em;
  padding: 10px 20px; border-radius: 22px; opacity: 0;
  transition: opacity .25s; pointer-events: none; max-width: 84vw; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
#toast.show { opacity: 1; }

.loading { text-align: center; padding: 70px 20px; color: var(--muted); font-size: .9rem; }

/* ---------- 播放页：封面/歌词舞台 ---------- */
#player .stage {
  height: min(70vw, 310px, 38vh);
  margin-top: 3.5vh;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
#player .bigcov {
  width: auto; height: 100%; aspect-ratio: 1; margin: 0;
}
.lyricbox {
  position: absolute; inset: 0;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  text-align: center; padding: 30px 10px;
  scrollbar-width: none;
}
.lyricbox::-webkit-scrollbar { display: none; }
.lyricbox p {
  font-size: .92rem; line-height: 1.7; color: var(--muted);
  padding: 5px 0; transition: color .2s, transform .2s;
}
.lyricbox p.cur {
  color: var(--blue); font-weight: 600; transform: scale(1.06);
  font-family: var(--serif);
}
.lyricbox .plain { font-size: .9rem; color: var(--ink2); white-space: pre-wrap; line-height: 1.9; }

/* 播放页小工具行 */
.ptools {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2.4vh; gap: 8px;
}
.ptools .pt {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink2); font-size: .72rem;
  min-width: 44px; height: 30px; border-radius: 15px; padding: 0 10px;
  box-shadow: var(--shadow-sm);
}
.ptools .pt.on { color: var(--gold); border-color: var(--gold2); }
/* 旧版页签样式已由 #player .ptabs 取代（改版后此处会多画一层底色）*/

/* 歌曲行歌谱标记 */
.tr-row .has-score {
  color: var(--gold); font-size: .62rem; flex: none;
  border: 1px solid var(--gold2); border-radius: 4px; padding: 2px 5px;
  background: var(--tag-gold-bg);
}

/* ---------- 歌谱查看器 ---------- */
#score {
  position: fixed; inset: 0; z-index: 55;
  background: var(--score-bg);
  display: none; flex-direction: column;
}
#score.show { display: flex; }
.sc-top {
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  background: var(--sc-topbg);
  border-bottom: 1px solid var(--line);
}
.sc-top button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink2);
  width: 34px; height: 34px; border-radius: 50%; font-size: 1.1rem;
}
.sc-top .ttl {
  flex: 1; text-align: center; font-family: var(--serif);
  font-size: .95rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-body {
  flex: 1; overflow: auto; padding: 10px 0 40px;
  -webkit-overflow-scrolling: touch;
}
.sc-body img {
  display: block; width: 100%; margin: 0 auto 12px;
  background: #fff;
}
.sc-body.zoom img { width: 170%; max-width: none; }
.sc-body .hint { padding-top: 40vh; }

/* ---------- 横屏 / 矮屏：压缩播放页，保证控件不被挤出屏幕 ---------- */
@media (max-height: 520px) {
  #player { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  #player .stage { height: min(46vh, 190px); margin-top: 1vh; }
  #player .song { margin-top: 1.4vh; }
  #player .song .t1 { font-size: 1.05rem; margin-bottom: 3px; }
  #player .song .t2 { font-size: .75rem; }
  #player .ptools { margin-top: 1.2vh; }
  #player .ctrl { margin-top: 8px; }
  #player .ctrl .lg { width: 56px; height: 56px; font-size: 1.5rem; }
  #player .ctrl .md { width: 46px; height: 46px; font-size: 1.5rem; }
  #queue { max-height: 78vh; }
}

/* ---------- 极窄屏（iPhone SE 等 ≤ 340px） ---------- */
@media (max-width: 340px) {
  .grid { gap: 14px 10px; padding: 8px 12px 20px; }
  .chips { padding: 14px 12px 10px; }
  .chipwrap .chips { padding-right: 72px; }
  .hero { margin: 12px 12px 4px; padding: 18px 16px 16px; }
  .alhead { gap: 12px; padding: 14px 14px 12px; }
  .albtns { padding: 0 14px 10px; gap: 8px; }
  .btn { font-size: .82rem; }
  .tl { margin: 4px 10px 16px; }
  #player { padding-left: 18px; padding-right: 18px; }
  #player .ctrl .sm { width: 38px; }
}

/* ---------- 响应式：手机 / 平板 / 电脑三档 ----------
   内容栏宽度统一由 --col 驱动，固定元素（导航、迷你条、播放页、各类抽屉）
   全部对齐到同一条栏，避免出现「内容居中但控件贴边」的割裂感。
   旧规则是 700px 以上一律锁死 520px，导致平板被拉伸、电脑只用中间一条。 */
:root { --col: 100%; --colgap: 0px; }

@media (min-width: 600px) {
  :root { --col: 640px; }
}
@media (min-width: 1024px) {
  :root { --col: 900px; }
}

@media (min-width: 600px) {
  body { background: var(--page-side); }
  #app {
    max-width: var(--col); margin: 0 auto; min-height: 100vh;
    background: var(--bg);
    border-left: 1px solid var(--side-line); border-right: 1px solid var(--side-line);
    box-shadow: 0 0 46px rgba(45, 74, 119, .09);
  }
  #nav, #player, #score, #queue, #sheet, #plpick, #mpick {
    max-width: var(--col); left: 0; right: 0;
    margin-left: auto; margin-right: auto;
  }
  #mini {
    max-width: calc(var(--col) - 24px); left: 0; right: 0;
    margin-left: auto; margin-right: auto;
  }
  #player { border-left: 1px solid var(--side-line); border-right: 1px solid var(--side-line); }

}

@media (min-width: 1024px) {
  .hero2 { min-height: 240px; }
  .hero2-in { padding: 34px 30px 28px; }
}

/* 经文与歌词是拿来读的，行太长反而费劲，单独限制阅读宽度 */
.praytxt, .prayhead { max-width: 620px; margin-left: auto; margin-right: auto; }


/* ---------------- 操作面板（分享 / 下载） ---------------- */
#shmask { position: fixed; inset: 0; z-index: 65; background: rgba(38, 48, 74, .38); display: none; }
#shmask.show { display: block; }
#sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 16px 12px calc(12px + var(--safe-b));
  transform: translateY(110%);
  visibility: hidden; pointer-events: none;
  transition: transform .28s ease, visibility 0s .28s;
  box-shadow: 0 -10px 34px rgba(45, 74, 119, .22);
}
#sheet.show {
  transform: translateY(0);
  visibility: visible; pointer-events: auto;
  transition: transform .28s ease, visibility 0s;
}
.sh-ttl {
  font-family: var(--serif); font-size: .95rem; color: var(--blue);
  padding: 2px 8px 12px; border-bottom: 1px solid var(--line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sh-item {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; padding: 13px 8px;
  border-bottom: 1px solid var(--line);
}
.sh-item b { display: block; font-size: .92rem; font-weight: 600; color: var(--fg); }
.sh-item i { display: block; font-size: .74rem; color: var(--muted); font-style: normal; margin-top: 3px; }
.sh-item:disabled { opacity: .4; }
.sh-cancel {
  display: block; width: 100%; margin-top: 10px; padding: 13px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg); color: var(--muted); font-size: .9rem;
}
/* 曲目行的「⋯」按钮 */
.trmore { border: 0; background: none; color: var(--muted); font-size: 1.05rem; flex: none; }


/* 曲目行的直接下载按钮 */
.trdl { border: 0; background: none; color: var(--muted); font-size: .95rem; flex: none; }
.trdl:active { color: var(--blue); }

/* 区块标题右侧的操作按钮（如「下载全部」） */
.sec-h .secbtn {
  margin-left: auto;
  border: 1px solid var(--gold2); background: var(--surface); color: var(--gold);
  font-size: .74rem; border-radius: 15px; padding: 6px 13px; white-space: nowrap;
}
.sec-h .secbtn.running { border-color: var(--blue2); color: var(--blue); }


/* 歌词搜索 */
.lyzone { padding: 16px 16px 4px; }
.lyzone .btn { width: 100%; }
.lysnip {
  font-size: .72rem; color: var(--muted); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* 歌单选择器 */
#plpick {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 16px 12px calc(12px + var(--safe-b));
  transform: translateY(110%);
  visibility: hidden; pointer-events: none;
  transition: transform .28s ease, visibility 0s .28s;
  box-shadow: 0 -10px 34px rgba(45, 74, 119, .22);
  max-height: 70vh; overflow-y: auto;
}
#plpick.show {
  transform: translateY(0);
  visibility: visible; pointer-events: auto;
  transition: transform .28s ease, visibility 0s;
}

/* 大字投影模式 */
#proj {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg); display: none;
  flex-direction: column;
}
#proj.show { display: flex; }
.pj-top {
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  border-bottom: 1px solid var(--line);
}
.pj-top button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink2);
  border-radius: 14px; padding: 6px 12px; font-size: .82rem; flex: none;
}
.pj-ttl {
  flex: 1; font-family: var(--serif); color: var(--blue); font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pj-body {
  flex: 1; overflow-y: auto;
  padding: 34vh 20px 40vh;
  text-align: center;
  font-size: var(--pj-size, 2rem);
  line-height: 1.9;
}
.pj-body p { color: var(--muted); margin: .5em 0; transition: color .2s, transform .2s; }
.pj-body p.cur { color: var(--blue); font-weight: 700; transform: scale(1.06); }
.pj-body .plain { color: var(--ink); white-space: pre-wrap; text-align: center; }


/* ---------------- 屏保氛围模式 ---------------- */
#ambient {
  position: fixed; inset: 0; z-index: 95;
  display: none; align-items: center; justify-content: center;
  background: #0b111c; color: #e9edf6; overflow: hidden;
}
#ambient.show { display: flex; }
.am-bg {
  position: absolute; inset: -12%;
  background-size: cover; background-position: center;
  filter: blur(38px) brightness(.42) saturate(1.2);
  transform: scale(1.12);
}
.am-inner {
  position: relative; text-align: center; padding: 24px;
  max-width: 90vw;
}
.am-clock {
  font-family: var(--serif); font-size: clamp(2.4rem, 12vw, 4.6rem);
  letter-spacing: .06em; color: #f2e6c9; line-height: 1;
}
.am-cov {
  width: min(52vw, 210px); aspect-ratio: 1; margin: 22px auto 18px;
  border-radius: 16px; background-size: cover; background-position: center;
  background-color: #1b2438;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
}
.am-t1 {
  font-family: var(--serif); font-size: 1.15rem; color: #f4efe3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.am-t2 { font-size: .82rem; color: #9aa5bd; margin-top: 6px; }
.am-lrc {
  margin-top: 20px; font-size: 1rem; color: #d4b36a;
  min-height: 1.5em; line-height: 1.5;
}
.am-hint {
  position: absolute; bottom: calc(20px + var(--safe-b));
  left: 0; right: 0; text-align: center;
  font-size: .7rem; color: #5c6780;
}


/* 设置页 */
.set-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; margin: 12px 16px; padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.set-card > b {
  display: block; font-family: var(--serif); font-size: .95rem;
  color: var(--blue); margin-bottom: 4px; letter-spacing: .04em;
}
.set-card .desc { font-size: .74rem; color: var(--muted); line-height: 1.6; }
.set-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-top: 1px solid var(--line2);
}
.set-row:first-of-type { border-top: 0; }
.set-row .lb { flex: 1; font-size: .86rem; color: var(--ink); }
.set-row .lb i { display: block; font-size: .7rem; color: var(--muted); font-style: normal; margin-top: 3px; }
.set-row .act {
  border: 1px solid var(--line); background: var(--bg); color: var(--blue);
  font-size: .76rem; border-radius: 15px; padding: 7px 14px; flex: none;
}
.fsz { display: flex; align-items: center; gap: 8px; flex: none; }
.fsz button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--blue); font-size: .9rem;
}
.fsz span { min-width: 3.2em; text-align: center; font-size: .8rem; color: var(--muted); }


/* ═══════════════════════════════════════════════
   2026 改版：设计系统
   ═══════════════════════════════════════════════ */
.ic { width: 1em; height: 1em; vertical-align: -.125em; flex: none; }

/* ---------- 页面头部（大标题 + 副题 + 装饰） ---------- */
.phead {
  position: relative; overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 18px;
  background: linear-gradient(180deg, var(--head1) 0%, var(--bg) 100%);
}
.phead h2 {
  font-family: var(--serif); font-size: clamp(1.5rem, 7vw, 1.9rem);
  letter-spacing: .08em; color: var(--blue); line-height: 1.2;
}
.phead p {
  margin-top: 6px; font-size: .8rem; color: var(--gold);
  letter-spacing: .08em;
}
.phead .deco {
  position: absolute; right: -10px; top: 0; height: 100%; width: 55%;
  opacity: .5; pointer-events: none;
}
:root { --head1: #fbf6ea; }
html[data-theme="dark"] { --head1: #1b2437; }

/* ---------- 区块标题 ---------- */
.sect {
  display: flex; align-items: center; gap: 9px;
  padding: 20px 18px 12px;
}
.sect .bar {
  width: 4px; height: 17px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, var(--gold2), var(--gold));
}
.sect b {
  font-family: var(--serif); font-size: 1.06rem; color: var(--ink);
  letter-spacing: .05em;
}
.sect .cnt { font-size: .74rem; color: var(--muted); }
.sect .more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  font-size: .76rem; color: var(--muted); text-decoration: none;
}
.sect .more .ic { width: .85em; height: .85em; }

/* ---------- 带图标的分类胶囊 ---------- */
.ichips {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 6px 16px 14px; scrollbar-width: none;
}
.ichips::-webkit-scrollbar { display: none; }
.ichip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 17px; border-radius: 22px;
  background: var(--surface); color: var(--ink2);
  border: 1px solid var(--line); font-size: .85rem;
  box-shadow: var(--shadow-sm); text-decoration: none;
  white-space: nowrap;
}
.ichip .ic { width: 1.05em; height: 1.05em; color: var(--gold); }
.ichip.on {
  color: #fff; border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue2), var(--blue));
  box-shadow: 0 5px 14px rgba(45, 74, 119, .3);
}
.ichip.on .ic { color: var(--gold2); }
.ichip.ghost { color: var(--gold); border-color: var(--gold2); background: var(--tag-gold-bg); }

/* ---------- 精选歌单：大卡 ---------- */
.fgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; padding: 0 16px 4px;
}
.fcard { text-decoration: none; color: inherit; min-width: 0; display: block; }
.fcard .ph-img {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: linear-gradient(140deg, var(--ph1), var(--ph2));
  box-shadow: var(--shadow);
}
.fcard .ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 只在左下角压一层很淡的暗角，保证白色播放键可见，不遮挡封面本身的文字 */
.fcard .ph-img::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 62%; height: 46%;
  background: radial-gradient(circle at 18% 82%, rgba(0,0,0,.42), transparent 68%);
  pointer-events: none;
}
.fcard .pbtn {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.32); border: 0;
}
.fcard .pbtn .ic { width: 15px; height: 15px; }
.ftxt { padding: 9px 2px 0; }
.fnm {
  font-size: .84rem; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fsg {
  font-size: .7rem; color: var(--muted); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 更多歌单：小卡 ---------- */
.mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 14px 10px; padding: 0 16px 6px;
}
.mcard { text-decoration: none; color: inherit; min-width: 0; display: block; }
.mcard .ph-img {
  aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: linear-gradient(140deg, var(--ph1), var(--ph2));
  box-shadow: var(--shadow-sm);
}
.mcard .ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mnm {
  margin-top: 7px; font-size: .76rem; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg { font-size: .66rem; color: var(--muted); margin-top: 3px; }

/* ---------- 礼仪节期行 ---------- */
.litlist { padding: 0 16px; }
.litrow {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 13px 15px; margin-bottom: 11px;
  text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
}
.litrow .badge {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.litrow .badge .ic { width: 24px; height: 24px; }
.litrow .meta2 { flex: 1; min-width: 0; }
.litrow .t1 { font-family: var(--serif); font-size: 1rem; color: var(--ink); letter-spacing: .04em; }
.litrow .t2 { font-size: .74rem; color: var(--muted); margin-top: 4px; }
.litrow .arw { color: var(--muted); }
.litrow .arw .ic { width: 18px; height: 18px; }

/* ---------- 搜索页 ---------- */
.sbox2 { padding: 4px 18px 8px; }
.sbox2 .wrap {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--gold2); border-radius: 26px;
  background: var(--surface); padding: 12px 18px;
  box-shadow: var(--shadow-sm);
}
.sbox2 .wrap .ic { width: 19px; height: 19px; color: var(--gold); }
.sbox2 input {
  flex: 1; border: 0; outline: 0; background: none;
  font-size: .92rem; color: var(--ink); font-family: inherit;
}
.stat {
  text-align: center; padding: 22px 20px 6px;
  font-size: .88rem; color: var(--ink2); letter-spacing: .04em;
}
.stat b { color: var(--gold); font-family: var(--serif); font-size: 1.1rem; margin: 0 4px; }
.stat i { display: block; font-style: normal; font-size: .76rem; color: var(--muted); margin-top: 8px; }
.hchips { display: flex; flex-wrap: wrap; gap: 9px; padding: 4px 18px 8px; }
.hchip {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink2); font-size: .8rem; border-radius: 18px; padding: 8px 16px;
  box-shadow: var(--shadow-sm);
}

/* ---------- 存储环形进度 ---------- */
.ring { width: 54px; height: 54px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .bg2 { fill: none; stroke: var(--line); stroke-width: 4; }
.ring .fg { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.ring span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .66rem; color: var(--muted);
}


/* ---------- 首页头图 ---------- */
.hero2 {
  position: relative; overflow: hidden; display: block; width: calc(100% - 32px);
  border: 0; padding: 0; text-align: left; font: inherit; cursor: pointer;
  margin: 10px 16px 6px; border-radius: 16px;
  /* 压扁成小横幅：原来 200px 高，一进首页就吃掉大半屏 */
  min-height: 104px; box-shadow: 0 8px 22px rgba(36, 64, 108, .18);
}
.hero2:active { transform: scale(.99); }
/* 用图片时按图的比例撑高，文字层收起——那些字图里已经有了 */
.hero2.photo { min-height: 0; aspect-ratio: 1200 / 397; }
.hero2.photo .hero2-in { display: none; }
.hero-img, .hero-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* 没有 art/hero.png 时才画那张手绘图，免得两层叠着 */
.hero-art { display: none; }
.hero2.drawn .hero-art { display: block; }
.hero2-in {
  position: relative; z-index: 2;
  padding: 16px 18px 15px;
  text-shadow: 0 2px 10px rgba(255, 255, 255, .55);
}
.hero2-in h2 {
  font-family: var(--serif); font-size: clamp(1.25rem, 5.6vw, 1.6rem);
  letter-spacing: .09em; color: #23406e; line-height: 1.15;
}
.hero2-in p {
  margin-top: 4px; font-size: .74rem; color: #3d5c8c; letter-spacing: .05em;
}
.hbtn2 {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 24px; padding: 11px 24px;
  font-size: .88rem; font-weight: 600; letter-spacing: .05em;
  color: #45340f; text-shadow: none;
  background: linear-gradient(135deg, #f0dba4, #cfa955);
  box-shadow: 0 5px 16px rgba(120, 90, 30, .35);
}
.hbtn2 .ic { width: 1.05em; height: 1.05em; }
html[data-theme="dark"] .hero2-in { text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .hero2-in h2 { color: #f2e7cf; }
html[data-theme="dark"] .hero2-in p { color: #cdd8ea; }
html[data-theme="dark"] .hero-art { filter: brightness(.62) saturate(.85); }


/* ═══════════ 播放页改版 ═══════════ */
#player .ph-top button { font-size: 1.15rem; color: var(--ink2); }
#player .bigcov {
  border: 3px solid transparent; border-radius: 18px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, #e8cf96, #b8923e 55%, #e8cf96) border-box;
  box-shadow: 0 14px 34px rgba(60, 45, 15, .28);
}

/* 歌名下方的装饰分隔 */
#player .song .orn {
  margin: 12px auto 0; width: min(62%, 230px);
  color: var(--gold2); opacity: .9;
}
#player .song .orn svg { width: 100%; height: 16px; display: block; }

/* 四个带标签的操作按钮 */
.pacts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; padding: 20px 22px 6px;
}
.pacts button {
  border: 0; background: none; color: var(--ink2);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: .72rem; letter-spacing: .04em;
}
.pacts button .i { display: block; line-height: 0; color: var(--ink2); }
.pacts button .i .ic { width: 24px; height: 24px; }
.pacts button .l { color: var(--muted); }
.pacts button.on .i, .pacts button.on .l { color: var(--gold); }
.pacts button:active .i { transform: scale(.92); }

/* 控制区：中间金色大圆 */
#player .ctrl {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 6px clamp(12px, 5vw, 26px) 4px;
}
#player .ctrl button {
  border: 0; background: none; color: var(--ink2);
  display: flex; align-items: center; justify-content: center;
  flex: none;                      /* 不允许被 flex 压缩，否则圆键会变椭圆 */
}
#player .ctrl .sm { color: var(--muted); }
#player .ctrl .sm .ic { width: 22px; height: 22px; }
#player .ctrl .sm.on { color: var(--gold); }
#player .ctrl .md .ic { width: 34px; height: 34px; }
#player .ctrl .lg {
  width: 74px; height: 74px; min-width: 74px; border-radius: 50%;
  background: linear-gradient(150deg, #f0d79c, #c9a04b 60%, #b8923e);
  box-shadow: 0 8px 22px rgba(120, 90, 30, .42), inset 0 2px 4px rgba(255,255,255,.5);
  color: #fff;
}
#player .ctrl .lg .ic { width: 32px; height: 32px; }
#player .ctrl .lg:active { transform: scale(.96); }

/* 底部工具条 */
#player .ptools {
  display: flex; align-items: center; gap: 6px;
  padding: 14px clamp(8px, 3.5vw, 20px) calc(10px + var(--safe-b));
}
#player .ptools .pt {
  border: 0; background: none; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .74rem; flex: none; min-width: 36px; padding: 0;
}
#player .ptools .pt b { font-size: .85rem; color: var(--ink2); font-weight: 600; }
#player .ptools .pt i { font-style: normal; font-size: .64rem; }
#player .ptools .pt .ic { width: 22px; height: 22px; }
#player .ptabs {
  flex: 1; min-width: 0; display: flex; justify-content: center; gap: 6px;
}
#player .ptabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 20px;
  padding: 8px clamp(8px, 3vw, 15px);
  font-size: .78rem;
  white-space: nowrap;             /* 「歌词」不允许竖排成两行 */
  min-width: 0; flex: 0 1 auto; overflow: hidden;
}
#player .ptabs button .ic { width: 16px; height: 16px; }
#player .ptabs button.on {
  color: var(--gold); border-color: var(--gold2); background: var(--tag-gold-bg);
}
#player .ptabs button:disabled { opacity: .4; }

/* 进度条配色改为金色 */
#player .prog { padding: 8px 22px 0; }
#player .prog input[type=range] { accent-color: var(--gold); }


/* ---------- 热门推荐卡 ---------- */
.hotcard {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; padding: 15px 8px 12px;
  text-decoration: none; color: inherit; min-width: 0;
  box-shadow: var(--shadow-sm); text-align: center;
}
.hotcard .hicon {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 3px;
}
.hotcard .hicon .ic { width: 22px; height: 22px; }
.hotcard .hnm {
  font-family: var(--serif); font-size: .84rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.hotcard .hsub {
  font-size: .62rem; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hotcard .hcnt { font-size: .68rem; color: var(--gold); margin-top: 2px; }

/* ---------- 设置 / 我的 行图标 ---------- */
.set-card > b { display: flex; align-items: center; gap: 8px; }
.set-card > b .ic { width: 19px; height: 19px; color: var(--gold); }
.set-row .ric {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--tag-gold-bg); color: var(--gold);
}
.set-row .ric .ic { width: 17px; height: 17px; }
.mine-card > b { display: flex; align-items: center; gap: 8px; }
.mine-card > b .ic { width: 19px; height: 19px; color: var(--gold); }
.mine-head { display: flex; align-items: center; gap: 12px; }
.mine-head .txt { flex: 1; min-width: 0; }


/* ═══════════ 启动欢迎页 ═══════════ */
#splash {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 18%, #fffaf0 0%, #fdf6e6 45%, #f8efdd 100%);
  transition: opacity .55s ease, visibility .55s;
  padding: 24px;
}
#splash.hide { opacity: 0; visibility: hidden; }
.sp-in { text-align: center; max-width: 420px; width: 100%; }
#spLogo {
  width: min(52vw, 200px); height: auto; display: block; margin: 0 auto;
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(150, 115, 45, .22);
  animation: spIn .9s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes spIn { from { opacity: 0; transform: scale(.9) translateY(10px); } }
#splash h1 {
  margin-top: 26px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.25rem, 6vw, 1.6rem); letter-spacing: .1em;
  color: #8a6a26;
  animation: spUp .7s .25s both;
}
.sp-orn { color: #d9bc7c; width: 62%; margin: 14px auto 0; animation: spUp .7s .38s both; }
.sp-orn svg { width: 100%; height: 15px; display: block; }
.sp-verse {
  margin-top: 18px; font-family: var(--serif);
  font-size: clamp(.92rem, 4.2vw, 1.05rem); line-height: 1.9;
  color: #7d6634; letter-spacing: .04em;
  animation: spUp .7s .5s both;
}
.sp-ref {
  margin-top: 9px; font-size: .76rem; color: #b09a68; letter-spacing: .08em;
  animation: spUp .7s .6s both;
}
@keyframes spUp { from { opacity: 0; transform: translateY(12px); } }
.sp-load { display: flex; gap: 7px; justify-content: center; margin-top: 34px; }
.sp-load span {
  width: 7px; height: 7px; border-radius: 50%; background: #d9bc7c;
  animation: spDot 1.1s infinite ease-in-out both;
}
.sp-load span:nth-child(2) { animation-delay: .16s; }
.sp-load span:nth-child(3) { animation-delay: .32s; }
@keyframes spDot { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
html[data-theme="dark"] #splash {
  background: radial-gradient(120% 90% at 50% 18%, #1e293c 0%, #161f31 55%, #101827 100%);
}
html[data-theme="dark"] #splash h1 { color: #e6cf95; }
html[data-theme="dark"] .sp-verse { color: #cbb98f; }
html[data-theme="dark"] .sp-ref { color: #8d7d5c; }


/* ---------- 图文混排按钮的对齐（专辑页 / 离线管理页）---------- */
.btn, .act, .danger-btn, .secbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn .ic, .act .ic, .danger-btn .ic, .secbtn .ic { width: 1.05em; height: 1.05em; flex: none; }

/* 曲目行的三个图标按钮 */
.tr-row .fav .ic { width: 19px; height: 19px; }
.tr-row .trdl .ic { width: 18px; height: 18px; }
.tr-row .trmore .ic { width: 18px; height: 18px; }
/* 长辈友好：三个按钮原先都不到 44px 且紧挨着，中间是下载键，误触会直接开始下载 */
.tr-row .fav, .tr-row .trdl, .tr-row .trmore {
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 44px; padding: 0;
}
.tr-row { gap: 2px; }
.tr-row .meta { margin-right: 2px; }




/* PDF 歌谱 */
.scpdf { padding: 18px 16px 26px; text-align: center; }
.scpdf p { font-size: .84rem; color: var(--muted); margin-bottom: 12px; }
.scpdf .btn { display: inline-flex; text-decoration: none; }
.scpdf iframe {
  width: 100%; height: 68vh; margin-top: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}


/* 提示条必须高于投影(90)与屏保(95)，否则这两种模式下的提示看不见 */
#toast { z-index: 120; }


/* ---------- 首页：今日礼仪节期 ---------- */
.litbar {
  display: flex; align-items: center; gap: 11px;
  margin: 10px 16px 2px; padding: 12px 15px;
  border-radius: 15px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--lc, var(--gold));
}
.lb-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--lc, var(--gold));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lc, #b8923e) 18%, transparent);
}
.lb-txt { flex: 1; min-width: 0; }
.lb-txt b {
  display: block; font-family: var(--serif); font-size: .95rem;
  color: var(--ink); letter-spacing: .04em;
}
.lb-txt i {
  display: block; font-style: normal; font-size: .72rem;
  color: var(--muted); margin-top: 3px;
}
.lb-arw { color: var(--muted); flex: none; }
.lb-arw .ic { width: 17px; height: 17px; }


/* 歌谱：多级缩放（配合双指缩放使用） */
.sc-body { touch-action: pan-x pan-y pinch-zoom; }
.sc-body img { transition: width .18s ease; }
.sc-body.z1 img { width: 100%; }
.sc-body.z2 img { width: 150%; max-width: none; }
.sc-body.z3 img { width: 220%; max-width: none; }
.sc-body.z4 img { width: 320%; max-width: none; }
.sc-zlabel {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  background: rgba(0,0,0,.55); color: #fff; font-size: .72rem;
  padding: 5px 11px; border-radius: 14px; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.sc-zlabel.show { opacity: 1; }


/* ---------------- 常用经文 ---------------- */
.prayhead { padding: 18px 20px 6px; text-align: center; }
.prayhead h2 {
  font-family: var(--serif); font-size: 1.35rem; color: var(--blue);
  letter-spacing: .06em; line-height: 1.4;
}
.prayhead .pgrp {
  display: inline-block; margin-top: 9px;
  font-size: .7rem; color: var(--gold);
  border: 1px solid var(--gold2); background: var(--tag-gold-bg);
  border-radius: 12px; padding: 3px 12px;
}
.praytxt {
  padding: 16px 22px 8px;
  font-size: 1.1rem; line-height: 2.25; color: var(--ink);
  letter-spacing: .03em;
  /* 经文要能长按选中复制，不同于其他界面 */
  user-select: text; -webkit-user-select: text;
}
.prayentry {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 16px 4px; padding: 14px 16px;
  border-radius: 15px; text-decoration: none; color: inherit;
  background: linear-gradient(120deg, var(--tag-gold-bg), var(--surface));
  border: 1px solid var(--gold2); box-shadow: var(--shadow-sm);
}
.prayentry .pi {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--gold);
}
.prayentry .pi .ic { width: 21px; height: 21px; }
.prayentry .pt2 { flex: 1; min-width: 0; }
.prayentry .pt2 b {
  display: block; font-family: var(--serif); font-size: .98rem;
  color: var(--ink); letter-spacing: .04em;
}
.prayentry .pt2 i {
  display: block; font-style: normal; font-size: .72rem;
  color: var(--muted); margin-top: 3px;
}
.prayentry .arw { color: var(--gold); flex: none; }
.prayentry .arw .ic { width: 17px; height: 17px; }


/* 经文诵念：逐句与当前句高亮 */
.praytxt .pl {
  margin: 0 0 .35em; padding: 4px 8px; border-radius: 8px;
  transition: background .25s, color .25s;
}
.praytxt .pl.cur {
  background: var(--tag-gold-bg);
  color: var(--gold);
  font-weight: 600;
}
.prayspeed {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px 2px; font-size: .76rem; color: var(--muted);
}
.prayspeed input { flex: 1; accent-color: var(--gold); }
.prayspeed b { color: var(--gold); font-size: .78rem; min-width: 3.4em; text-align: right; }


/* ---------------- 长列表内查找与筛选 ---------------- */
.lfilter { padding: 4px 16px 10px; }
.lf-box {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--surface); padding: 9px 15px;
  box-shadow: var(--shadow-sm);
}
.lf-box .ic { width: 17px; height: 17px; color: var(--muted); flex: none; }
.lf-box input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: .86rem; color: var(--ink); font-family: inherit;
}
.lf-box button {
  border: 0; background: none; color: var(--muted);
  font-size: .9rem; padding: 2px 4px; flex: none;
}
.lf-tags { display: flex; gap: 8px; margin-top: 9px; }
.lf-tag {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 16px; padding: 6px 13px;
  font-size: .75rem;
}
.lf-tag .ic { width: 14px; height: 14px; }
.lf-tag.on {
  color: var(--gold); border-color: var(--gold2); background: var(--tag-gold-bg);
}
.lf-count { margin-top: 9px; font-size: .74rem; color: var(--muted); padding-left: 4px; }


/* ---------------- 应用内对话框 ---------------- */
/* 微信、QQ 的内置浏览器会屏蔽原生 prompt()，按钮点了毫无反应，
   而二维码分发正是走微信，所以必须用自绘对话框。 */
#dlgmask {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(38, 48, 74, .42); display: none;
}
#dlgmask.show { display: block; }
#dlg {
  position: fixed; z-index: 135;
  left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.96);
  width: min(86vw, 380px);
  background: var(--surface); border-radius: 20px;
  padding: 22px 22px 16px;
  box-shadow: 0 18px 50px rgba(30, 40, 66, .3);
  visibility: hidden; opacity: 0;
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
#dlg.show {
  visibility: visible; opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.dlg-ttl {
  font-family: var(--serif); font-size: 1.06rem; color: var(--blue);
  letter-spacing: .04em; margin-bottom: 10px;
}
.dlg-msg { font-size: .88rem; color: var(--ink2); line-height: 1.75; }
.dlg-msg:empty { display: none; }
#dlgInput {
  width: 100%; margin-top: 14px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink);
  font-size: .95rem; font-family: inherit; outline: none;
}
#dlgInput:focus { border-color: var(--gold2); }
#dlgInput[hidden] { display: none; }
.dlg-btns { display: flex; gap: 10px; margin-top: 18px; }
.dlg-btns button {
  flex: 1; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink2); border-radius: 14px; padding: 12px 0;
  font-size: .9rem; font-family: inherit; min-height: 44px;
}
.dlg-btns button.pri {
  border: 0; color: #45340f; font-weight: 600;
  background: linear-gradient(135deg, #f0dba4, #cfa955);
}


/* 队列内上下移动 */
#queueList .qmv {
  border: 0; background: none; color: var(--muted);
  font-size: .72rem; flex: none;
  min-width: 34px; min-height: 42px;
  display: flex; align-items: center; justify-content: center;
}
#queueList .qmv:disabled { opacity: .22; }
#queueList .qmv:active:not(:disabled) { color: var(--gold); }
#queueList .qdel { min-width: 38px; min-height: 42px; }
#queueList .tr-row { gap: 0; }


/* ---------------- 经文诵念控件（吸顶） ---------------- */
/* 原先放在正文下方，早课晚课那种长经文得滚到底才能开始念，顺序是反的 */
.praybar {
  position: sticky; top: 0; z-index: 12;
  padding: 10px 16px 12px;
  background: var(--topbg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.pb-main { display: flex; gap: 10px; }
.pb-main .btn { flex: 1; min-height: 46px; }
.pb-main .pb-tog { flex: 0 0 52px; }
.pb-main .pb-tog.on { color: var(--gold); border-color: var(--gold2); background: var(--tag-gold-bg); }
.pb-extra { padding-top: 10px; }
.pb-extra[hidden] { display: none; }

/* ---------------- 弥撒单分段 ---------------- */
.msecs { padding: 4px 16px 24px; }
.msec {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; margin-bottom: 12px; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.msec-h {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 15px; border-bottom: 1px solid var(--line2);
}
.msec-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
}
.msec-h b {
  font-family: var(--serif); font-size: .96rem; color: var(--ink);
  letter-spacing: .05em;
}
.msec-n { font-size: .72rem; color: var(--muted); flex: 1; }
.msec-add {
  border: 1px solid var(--gold2); background: var(--tag-gold-bg);
  color: var(--gold); font-size: .75rem; border-radius: 15px;
  padding: 7px 13px; flex: none; min-height: 34px;
}
.msec-empty { padding: 14px 15px; font-size: .76rem; color: var(--muted); }
.msec-row {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 15px;
}
.msec-row + .msec-row { border-top: 1px solid var(--line2); }
.mr-name {
  flex: 1; min-width: 0; font-size: .88rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mr-singer { font-size: .7rem; color: var(--muted); flex: none; max-width: 34%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-del {
  border: 0; background: none; color: var(--muted); font-size: .85rem;
  flex: none; min-width: 38px; min-height: 40px;
}

/* 弥撒单选歌面板 */
#mpick {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 16px 12px calc(12px + var(--safe-b));
  transform: translateY(110%);
  visibility: hidden; pointer-events: none;
  transition: transform .28s ease, visibility 0s .28s;
  box-shadow: 0 -10px 34px rgba(45, 74, 119, .22);
  max-height: 78vh; display: flex; flex-direction: column;
}
#mpick.show {
  transform: translateY(0);
  visibility: visible; pointer-events: auto;
  transition: transform .28s ease, visibility 0s;
}
#mpick .mp-search {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--bg); padding: 10px 15px; margin: 10px 4px;
}
#mpick .mp-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: .9rem; color: var(--ink); font-family: inherit;
}
#mpList { flex: 1; overflow-y: auto; }
.mp-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  border: 0; background: none; text-align: left;
  padding: 12px 10px; border-bottom: 1px solid var(--line2);
  min-height: 46px;
}
.mp-n { flex: 1; min-width: 0; font-size: .9rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-s { font-size: .72rem; color: var(--muted); flex: none; max-width: 36%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ---------- 网格随栏宽放大（必须位于所有 .mgrid 定义之后） ----------
   同优先级下后写的规则生效，早前放在媒体查询里被后面的 .mgrid 覆盖过。 */
@media (min-width: 600px) {
  .mgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
@media (min-width: 1024px) {
  .mgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}


/* 投影模式顶栏按钮变多，收紧间距并允许换行 */
.pj-top { flex-wrap: wrap; gap: 6px; }
.pj-top button { padding: 6px 10px; font-size: .78rem; }
.pj-ttl { min-width: 40%; }
/* 全屏投影时隐去顶栏，鼠标/手指移动再显示 */
#proj:fullscreen .pj-top { opacity: .18; transition: opacity .25s; }
#proj:fullscreen .pj-top:hover { opacity: 1; }
#proj:fullscreen .pj-body { padding: 30vh 6vw 34vh; }


/* 启动页手动朗读按钮（自动朗读被 iOS 拦下时才出现） */
#spSpeak {
  margin-top: 22px; padding: 11px 24px;
  border: 1px solid #d9bc7c; border-radius: 22px;
  background: rgba(255, 255, 255, .55);
  color: #8a6a26; font-size: .88rem; font-family: inherit;
  letter-spacing: .06em; min-height: 44px;
  animation: spUp .5s both;
}
#spSpeak:disabled { opacity: .55; }
html[data-theme="dark"] #spSpeak {
  background: rgba(255, 255, 255, .08); color: #e6cf95; border-color: #6b5a33;
}


/* ---------------- 访问计数 ---------------- */
/* 访问统计：设置页「关于」卡片底部的一行，随页面滚动 */
.vc-line {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line2);
  font-size: .72rem; color: var(--muted); letter-spacing: .04em;
}
.vc-line b { color: var(--gold); font-weight: 600; }
.vc-dot { opacity: .5; }


/* ---------------- 选歌助手 ---------------- */
.hp-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px 2px; }
.hp-bar select {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .88rem;
  padding: 11px 12px; min-height: 44px;
}
.hp-bar .btn { flex: none; }
.hp-now { padding: 10px 18px 2px; font-size: .78rem; color: var(--muted); }
.hp-now b { color: var(--gold); }
.hp-note { padding: 2px 18px 8px; font-size: .74rem; line-height: 1.5; color: var(--muted); }


/* ---------------- 站内助手 ---------------- */
.ask-bar { padding: 8px 16px 2px; }
.ask-bar .wrap {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); padding: 4px 6px 4px 12px;
}
.ask-bar .wrap svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ask-bar input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: .92rem; padding: 12px 0; min-height: 44px;
}
.ask-bar #askGo {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: var(--gold); color: #fff; cursor: pointer;
}
.ask-bar #askGo svg { width: 20px; height: 20px; color: #fff; }

.ask-tips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 4px; }
.ask-tip {
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink2, var(--ink));
  font: inherit; font-size: .8rem; padding: 9px 14px; min-height: 36px; cursor: pointer;
}
.ask-tip:active { background: var(--gold-soft, rgba(0,0,0,.04)); }

#askLog { padding: 10px 16px 0; }
.ask-row { display: flex; margin: 10px 0; }
.ask-row.me { justify-content: flex-end; }
.ask-bub {
  max-width: 88%; border-radius: 16px; padding: 12px 14px;
  font-size: .88rem; line-height: 1.7; word-break: break-word;
}
.ask-row.ai .ask-bub { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.ask-row.me .ask-bub { background: var(--gold); color: #fff; border-radius: 16px 16px 4px 16px; }
.ask-row.ai .ask-bub b { color: var(--gold); }
.ask-bub .tl { margin: 10px -6px 2px; }
.ask-bub .grid { margin: 10px 0 2px; }
.ask-note { font-size: .78rem; color: var(--muted); margin-top: 8px; }
.ask-wait { color: var(--muted); }
.ask-go {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px; padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .82rem; color: var(--gold); text-decoration: none;
}
.ask-go svg { width: 15px; height: 15px; }
.ask-plist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ask-pitem {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 12px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--ink);
}
.ask-pitem i { font-style: normal; font-size: .76rem; color: var(--muted); }


/* ---------------- 站内助手 · AI 天使 ---------------- */
/* 常驻名牌：教友第一眼就知道这里能问问题，不必先猜图标是什么 */
#fabAsk {
  position: fixed; right: 12px; z-index: 29;
  bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
  display: flex; align-items: center; gap: 6px;
  /* 做小一点：它常驻在右下角，块头大了会压住底下那一行的歌名 */
  padding: 4px 11px 4px 4px; border-radius: 999px;
  background: linear-gradient(150deg, #fffaf0, #fdf0d2);
  border: 1px solid var(--gold);
  box-shadow: 0 6px 20px rgba(176, 137, 44, .26);
  text-decoration: none; color: var(--gold-ink, #8a6a1d);
  font-size: .74rem; line-height: 1.2; letter-spacing: .02em;
  max-width: calc(100vw - 24px);
  transition: transform .18s, opacity .18s;
}
#fabAsk img { width: 32px; height: 32px; flex: none; object-fit: contain; }
#fabAsk span { white-space: nowrap; font-weight: 600; font-size: .68rem; }
#fabAsk:active { transform: scale(.95); }
#fabAsk.hide { opacity: 0; pointer-events: none; transform: scale(.8); }
#mini.show ~ #fabAsk { bottom: calc(var(--nav-h) + var(--safe-b) + var(--mini-h) + 20px); }

/* 语音 */
.ask-bar #askMic {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.ask-bar #askMic svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ask-bar #askMic.on { background: var(--gold); color: #fff; animation: askPulse 1.1s infinite; }
@keyframes askPulse { 50% { opacity: .55; } }
.ask-voice { display: flex; align-items: center; gap: 10px; padding: 10px 18px 0; }
.ask-sw { display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--muted); min-height: 36px; cursor: pointer; }
.ask-sw input { width: 18px; height: 18px; accent-color: var(--gold); }
.ask-nov { font-size: .74rem; color: var(--muted); }
.ask-say {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; padding: 7px 12px; min-height: 34px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: .76rem; cursor: pointer;
}
.ask-say svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* ---------------- 弥撒单全文 ---------------- */
.md-item {
  margin: 10px 16px 16px; padding: 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
}
.md-h { display: flex; align-items: center; gap: 10px; }
.md-play {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--gold); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.md-play svg { width: 18px; height: 18px; }
.md-nm { display: flex; flex-direction: column; min-width: 0; }
.md-nm b { font-size: .92rem; color: var(--ink); }
.md-nm i { font-style: normal; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.md-lrc {
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--bg); border-radius: 12px;
  font: inherit; font-size: .86rem; line-height: 1.85; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.md-none { margin-top: 10px; font-size: .78rem; color: var(--muted); }
.md-score { margin-top: 12px; }
.md-score img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 10px; margin-top: 8px;
}
.md-pdf {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 10px 14px; min-height: 42px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .82rem; color: var(--gold); text-decoration: none;
}
.md-pdf svg { width: 16px; height: 16px; }

/* 打印时只留曲目单本身 */
@media print {
  .topbar, #nav, #mini, #fabAsk, .albtns, .hint, .phead p, .md-play { display: none !important; }
  .md-item { break-inside: avoid; border-color: #ccc; }
  #view { padding: 0 !important; }
  body { background: #fff; }
}


/* 选歌助手 · 增删 */
.tr-row .trdel {
  flex: none; width: 34px; height: 34px; margin-left: 2px;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: .9rem; line-height: 1; cursor: pointer;
}
.tr-row .trdel:active { background: rgba(0, 0, 0, .06); }
.hp-add { padding: 4px 16px 6px; }
.hp-addbtn {
  width: 100%; min-height: 44px; padding: 11px 14px;
  border: 1px dashed var(--line); border-radius: 14px;
  background: transparent; color: var(--gold);
  font: inherit; font-size: .84rem; cursor: pointer;
}
.hp-addbtn:active { background: rgba(201, 162, 39, .08); }


/* ---------------- 每日一歌 ---------------- */
.daily {
  margin: 10px 16px 0; padding: 12px 14px 14px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(155deg, #fffdf7, var(--surface));
}
.dl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dl-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600; color: var(--gold);
}
.dl-tag svg { width: 14px; height: 14px; }
.dl-date { font-size: .7rem; color: var(--muted); }
.dl-b { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.dl-go {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.cov.dl-cov { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.dl-meta { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.dl-meta b {
  font-size: .94rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-meta i {
  font-style: normal; font-size: .74rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-badges { display: flex; gap: 5px; }
.dl-badges em {
  font-style: normal; font-size: .62rem; line-height: 1;
  padding: 3px 5px; border-radius: 5px;
  border: 1px solid var(--gold); color: var(--gold);
}
.dl-play {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--gold); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dl-play svg { width: 20px; height: 20px; margin-left: 2px; }
.dl-play:active { transform: scale(.94); }


/* ---------------- 敬礼月 · 教会日历 ---------------- */
.dl-dev {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 9px 12px; min-height: 42px;
  border-radius: 12px; background: rgba(201, 162, 39, .09);
  text-decoration: none; color: var(--ink);
}
.dl-dev b { font-size: .8rem; color: var(--gold); flex: none; }
.dl-dev i {
  flex: 1; min-width: 0; font-style: normal; font-size: .72rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-dev svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
a.dl-date { text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
a.dl-date svg { width: 13px; height: 13px; }

.devbar {
  margin: 6px 16px 2px; padding: 12px 14px;
  border-radius: 16px; border: 1px solid var(--gold);
  background: rgba(201, 162, 39, .07);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.devbar b { font-size: .92rem; color: var(--gold); }
.devbar i { font-style: normal; font-size: .76rem; color: var(--muted); }
.devbar a {
  flex-basis: 100%; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px;
  font-size: .78rem; color: var(--gold); text-decoration: none; min-height: 32px;
}
.devbar a svg { width: 14px; height: 14px; }

.cal-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 14px 16px 6px;
}
.cal-nav b { font-size: 1rem; color: var(--ink); min-width: 118px; text-align: center; }
.cal-pn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--gold);
  font-size: 1.3rem; text-decoration: none; line-height: 1;
}
.cal-wk {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 4px 12px; gap: 4px;
}
.cal-wk span { text-align: center; font-size: .7rem; color: var(--muted); }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px; padding: 2px 12px 8px;
}
.cal-x { min-height: 52px; }
.cal-d {
  min-height: 52px; padding: 5px 2px 4px 5px;
  border: 1px solid var(--line); border-left: 3px solid var(--lc, var(--line));
  border-radius: 9px; background: var(--surface);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: inherit; cursor: pointer; overflow: hidden;
}
.cal-d .cd-n { font-size: .84rem; color: var(--ink); }
.cal-d .cd-f {
  font-size: .55rem; line-height: 1.15; color: var(--muted);
  text-align: left; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cal-d.f1 { background: rgba(201, 162, 39, .13); }
.cal-d.f1 .cd-f { color: var(--gold); }
.cal-d.f2 { background: rgba(90, 120, 180, .10); }
.cal-d.on .cd-n { font-weight: 700; color: var(--gold); }
.cal-d.sel { outline: 2px solid var(--gold); outline-offset: -1px; }

.cal-leg {
  display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 18px 2px;
  font-size: .7rem; color: var(--muted); align-items: center;
}
.cal-leg span { display: inline-flex; align-items: center; gap: 4px; }
.cal-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cal-leg i.l1 { background: rgba(201, 162, 39, .45); }
.cal-leg i.l2 { background: rgba(90, 120, 180, .35); }
.cal-leg i.l3 { background: var(--line); }
.cal-leg .cal-tip { color: var(--muted); opacity: .8; }

.cal-det {
  margin: 10px 16px 0; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
}
.cdt-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cdt-h b { font-size: .96rem; color: var(--ink); }
.cdt-h span {
  font-size: .74rem; color: var(--muted);
  border-left: 3px solid var(--lc, var(--line)); padding-left: 7px;
}
.cdt-f {
  margin-top: 9px; padding: 8px 11px; border-radius: 10px;
  font-size: .86rem; color: var(--ink);
  background: var(--bg); display: flex; align-items: center; gap: 8px;
}
.cdt-f em {
  font-style: normal; font-size: .62rem; padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--line); color: var(--muted);
}
.cdt-f.f1 { background: rgba(201, 162, 39, .12); }
.cdt-f.f1 em { border-color: var(--gold); color: var(--gold); }
.cdt-s {
  display: flex; align-items: center; gap: 9px;
  margin-top: 8px; padding: 10px 4px 4px; min-height: 40px;
  border-top: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.cdt-lb { font-size: .72rem; color: var(--muted); flex: none; }
.cdt-nm {
  flex: 1; min-width: 0; font-size: .84rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdt-s .arw svg { width: 15px; height: 15px; color: var(--muted); }


/* ---------------- 首页「今日」卡（合并礼仪节期 / 每日一歌 / 敬礼月） ---------------- */
.today {
  margin: 10px 16px 4px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(155deg, #fffdf7, var(--surface));
  overflow: hidden;
}
.td-h {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 14px; min-height: 48px;
  text-decoration: none; color: inherit;
  border-left: 4px solid var(--lc, var(--gold));
}
.td-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--lc, var(--gold));
}
.td-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-t b { font-size: .9rem; color: var(--ink); }
.td-t i {
  font-style: normal; font-size: .72rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.td-d { font-size: .72rem; color: var(--muted); flex: none; }
.td-h svg { width: 16px; height: 16px; color: var(--muted); flex: none; }

.td-song {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-top: 1px solid var(--line);
}
.td-dev {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; min-height: 42px;
  border-top: 1px solid var(--line);
  background: rgba(201, 162, 39, .07);
  text-decoration: none; color: inherit;
}
.td-dev b { font-size: .78rem; color: var(--gold); flex: none; }
.td-dev i {
  flex: 1; min-width: 0; font-style: normal; font-size: .7rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.td-dev svg { width: 15px; height: 15px; color: var(--gold); flex: none; }

/* ---------------- 分类页入口：两列格子，不再四条横幅 ---------------- */
.entgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; padding: 6px 16px 8px;
}
.ent {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 13px 14px; min-height: 88px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); text-decoration: none; color: inherit;
}
.ent .ei {
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201, 162, 39, .13); color: var(--gold);
}
.ent .ei svg { width: 17px; height: 17px; }
.ent b { font-size: .86rem; color: var(--ink); }
.ent i {
  font-style: normal; font-size: .68rem; line-height: 1.4; color: var(--muted);
}


/* ---------------- 最近在听（横向一行） ---------------- */
.hrow {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  padding: 2px 16px 10px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.hrow::-webkit-scrollbar { display: none; }
.hcd {
  flex: none; width: 82px; border: 0; background: transparent; padding: 0;
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  scroll-snap-align: start; text-align: left;
}
.cov.hcd-cov { width: 82px; height: 82px; border-radius: 12px; }
.hcd-n {
  font-size: .7rem; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hcd:active .cov { transform: scale(.96); }

/* ---------------- 歌单列表的排序条 ---------------- */
.sortbar { display: flex; gap: 8px; padding: 8px 16px 4px; flex-wrap: wrap; }
.sortb {
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: .78rem; padding: 8px 14px; min-height: 36px; cursor: pointer;
}
.sortb.on { background: var(--gold); border-color: var(--gold); color: #fff; }

/* 滚动时天使收成小图标，不压住内容 */
#fabAsk.mini { padding: 4px; gap: 0; }
#fabAsk.mini span { display: none; }


/* 首页隐藏顶栏；子页面照旧（返回键在那儿） */
.topbar.gone { display: none; }

/* 今日卡压成两行后的收紧 */
.today .td-h { padding: 10px 13px; min-height: 42px; }
.today .td-t b { font-size: .86rem; }
.today .td-t i { font-size: .68rem; }
.today .td-song { padding: 9px 13px; gap: 10px; }
.today .cov.dl-cov { width: 46px; height: 46px; border-radius: 10px; }
.today .dl-meta b { font-size: .88rem; }
.today .dl-meta i { font-size: .68rem; }
.today .dl-play { width: 40px; height: 40px; }
.today .dl-play svg { width: 17px; height: 17px; }


/* 手绘兜底时的文字层（用图片时整层隐藏） */
.hero2-in { display: block; }
.hero2-in .h2 {
  display: block; font-family: var(--serif);
  font-size: clamp(1.25rem, 5.6vw, 1.6rem);
  letter-spacing: .09em; color: #23406e; line-height: 1.15;
}
.hero2-in .hp {
  display: block; margin-top: 4px;
  font-size: .74rem; color: #3d5c8c; letter-spacing: .05em;
}