/* style.css —— 妙色AI音乐 v1 原型：深色紫蓝渐变，与妙色AI曲库物料同调性 */

:root {
  --bg1: #0b0716;
  --bg2: #0d1230;
  --bg3: #131038;
  --card: rgba(255, 255, 255, .045);
  --card2: rgba(255, 255, 255, .07);
  --line: rgba(139, 92, 246, .26);
  --txt: #e8e6f2;
  --dim: #9a94b8;
  --purple: #8b5cf6;
  --blue: #3b82f6;
  --ok: #22c55e;
  --warn: #eab308;
  --bad: #ef4444;
  --fs: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  font-size: var(--fs);
  line-height: 1.7;
  color: var(--txt);
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 58%, var(--bg3) 100%);
  background-attachment: fixed;
}

/* ---------------- 顶部原型标识 ---------------- */
.ribbon {
  position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 60;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  font-size: 13px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .28), rgba(59, 130, 246, .22));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.ribbon .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--warn);
  box-shadow: 0 0 10px var(--warn);
}
.ribbon-sub { color: var(--dim); }
.ribbon .btn-ghost { margin-left: auto; }
.ribbon .btn-ghost.only-mobile { margin-left: 0; }  /* 移动端「☰ 菜单」不吃 auto 间距，右侧留白归「说明」 */

/* ---------------- 说明抽屉 ---------------- */
.drawer {
  position: fixed; top: 38px; right: 0; bottom: 0; width: 460px; max-width: 92vw; z-index: 55;
  background: rgba(11, 7, 22, .97); border-left: 1px solid var(--line);
  /* 关闭态用 visibility:hidden —— hidden 的盒子【不参与可滚动溢出计算】，从根上消掉「离屏抽屉撑宽页面」，
     而不是用 html,body{overflow-x:hidden} 捂盖子。visibility 一并写进 transition，滑入/滑出动画不受影响。 */
  transform: translateX(102%); visibility: hidden; transition: transform .28s ease, visibility .28s ease;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.drawer-body { padding: 14px 18px 30px; overflow-y: auto; font-size: 13px; }
.drawer-body h4 { color: #c4b5fd; margin: 14px 0 6px; font-size: 14px; }
.drawer-body ul { padding-left: 20px; color: #cfcbe4; }
.drawer-body li { margin-bottom: 5px; }
.drawer-foot {
  margin-top: 16px; padding: 10px 12px; border-radius: 10px; font-size: 12px;
  color: #cbb8ff; background: rgba(139, 92, 246, .12); border: 1px solid var(--line);
}

/* ---------------- 布局 ---------------- */
.layout { display: flex; padding-top: 38px; min-height: 100vh; }

.sidenav {
  position: fixed; top: 38px; bottom: 0; left: 0; width: 208px;
  padding: 18px 12px; display: flex; flex-direction: column; gap: 6px;
  background: rgba(9, 6, 20, .78); border-right: 1px solid var(--line);
  backdrop-filter: blur(8px); overflow-y: auto;
}
.brand {
  font-size: 18px; font-weight: 700; letter-spacing: .5px; padding: 4px 8px 14px;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand span { display: block; font-size: 12px; color: var(--dim); -webkit-text-fill-color: var(--dim); letter-spacing: 0; }
.navitem {
  display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--txt);
  background: transparent; border: 1px solid transparent; font-family: inherit;
}
.navitem i {
  font-style: normal; font-size: 12px; width: 20px; height: 20px; line-height: 20px;
  text-align: center; border-radius: 6px; background: rgba(139, 92, 246, .18); color: #c4b5fd;
}
.navitem:hover { background: var(--card); border-color: var(--line); }
.navitem.active { background: linear-gradient(90deg, rgba(139, 92, 246, .35), rgba(59, 130, 246, .18)); border-color: var(--line); }
.navitem.active i { background: var(--purple); color: #fff; }
.navfoot { margin-top: auto; padding: 12px 10px; border-top: 1px solid var(--line); font-size: 12px; }
.navfoot .tag { color: var(--dim); }
.navfoot .dim { margin-top: 4px; }

.content { flex: 1; margin-left: 208px; padding: 26px 30px 60px; max-width: 1500px; }

/* ---------------- 通用元素 ---------------- */
.view { display: none; }
.view.active { display: block; }
h2 { font-size: 22px; margin-bottom: 4px; letter-spacing: .5px; }
.lead { color: var(--dim); margin-bottom: 18px; font-size: 13px; }
.dim { color: var(--dim); font-size: 13px; }
.right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.sub { color: var(--dim); font-size: 13px; margin: 10px 0 6px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 16px;
}
.cardhead {
  display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; font-size: 14px;
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }

input[type=text], textarea, select {
  background: rgba(255, 255, 255, .06); color: var(--txt); font-family: inherit;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-size: 14px;
  outline: none; min-width: 180px; flex: 1;
}
textarea { width: 100%; line-height: 1.9; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--purple); }
input:disabled, textarea:disabled { opacity: .5; }
input[type=range] { flex: 1; max-width: 420px; accent-color: var(--purple); }

.btn, .btn-big, .btn-ghost {
  font-family: inherit; font-size: 14px; cursor: pointer; border-radius: 10px;
  padding: 9px 16px; color: var(--txt); border: 1px solid var(--line);
  background: var(--card2); white-space: nowrap;
}
.btn:hover, .btn-ghost:hover { border-color: var(--purple); }
.btn-big {
  font-size: 15px; font-weight: 700; padding: 12px 30px; border: 0; color: #fff;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  box-shadow: 0 6px 18px rgba(139, 92, 246, .3);
}
.btn-big:disabled, .btn:disabled, .btn-ghost:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-ghost { padding: 5px 11px; font-size: 13px; background: transparent; }

.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; }
.check input { accent-color: var(--purple); width: 15px; height: 15px; cursor: pointer; }

.actionbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 14px; margin: 18px 0 8px;
  background: rgba(139, 92, 246, .1); border: 1px solid var(--line);
  position: sticky; bottom: 12px;
}
.msg { font-size: 13px; }
.msg.err { color: #fca5a5; }
.msg.ok { color: #86efac; }
.hint { color: var(--dim); font-size: 13px; margin-top: 8px; }
.badge-warn {
  font-size: 12px; padding: 2px 8px; border-radius: 999px; color: #fde68a;
  background: rgba(234, 179, 8, .14); border: 1px solid rgba(234, 179, 8, .4);
}
.badge-core {
  font-size: 12px; padding: 2px 8px; border-radius: 999px; color: #a5f3fc;
  background: rgba(34, 211, 238, .14); border: 1px solid rgba(34, 211, 238, .4);
}

/* ---------------- 主题区（一个输入框 + AI 帮想主题，2026-09-29 乐爷「压缩成一个」） ----------------
 * 大按钮 + 单输入框：员工是资深音乐人但电脑操作是短板 ⇒ 输入框尽量宽、按钮尽量大。 */
.topic-input {
  flex: 1 1 260px; min-width: 0; font-size: 16px; padding: 10px 12px;
}
.ai-topic { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #2a3040; }
.ai-topic #aiTopicToggle { font-size: 14px; padding: 8px 12px; }
.ai-topic-box { margin-top: 10px; }
.ai-topic-box input[type=text], .ai-topic-box textarea {
  width: 100%; box-sizing: border-box; font-size: 15px; padding: 9px 12px;
}
.ai-status.ok { color: #86efac; }
.ai-status.bad { color: #fca5a5; }

/* ---------------- AI 主题的 5 张可点选卡片（乐爷 2026-09-29「一次出5个主题我选」） ----------------
 * 员工是电脑小白 ⇒ 卡片要「够大、够亮、点一下就有明显反馈」：
 *   未选中 = 细边框 + 暗底 + 灰色「点一下选中」提示；
 *   选中   = 加粗紫边框 + 亮底 + 外发光 + 绿色「已选中 ✓」（不看文字也看得出哪张被选了）。 */
.topic-cards { margin: 8px 0 10px; }
.topic-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
  background: var(--card); color: var(--txt); font-size: 15px; line-height: 1.6;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.topic-card:hover { border-color: var(--purple); background: var(--card2); }
.topic-card.on {
  border: 2px solid var(--purple); background: rgba(139, 92, 246, .18);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .25); font-weight: 700;
}
.topic-card-no { display: inline-block; color: var(--dim); font-size: 13px; font-weight: 700; }
.topic-card-txt { display: block; margin-top: 2px; }
.topic-card-flag { display: inline-block; margin-top: 6px; color: var(--ok); font-size: 13px; font-weight: 700; }
.topic-card-tip { display: inline-block; margin-top: 6px; color: var(--dim); font-size: 13px; }
.topic-cards .dim { padding: 2px 0; }

/* 进度条 */
.bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 8px 0; }
.bar.small { height: 8px; flex: 1; margin: 0; }
.bar i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--blue)); transition: width .3s; }

/* chips（关键词 / 曲风 / 节拍 / 模型） */
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  padding: 4px 10px; border-radius: 999px; color: #ddd6fe;
  background: rgba(139, 92, 246, .16); border: 1px solid var(--line);
}
.chip b { cursor: pointer; color: var(--dim); }
.chip b:hover { color: var(--bad); }

/* v1.11 批次隔离：已选条目上的主题徽标（本批 / 上一批）+ 跨批警示边框
 * 目的：换主题后遗留在 state.picked 里的旧主题选中要「一眼看出不是本批的」，
 * 别让创始人以为 AI 跑题了（实证缺陷，2026-09-30）。 */
.pick-badge {
  font-size: 11px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  color: #ddd6fe; background: rgba(139, 92, 246, .22); border: 1px solid var(--line);
}
.pick-badge-old {
  color: #fde68a; background: rgba(234, 179, 8, .16); border: 1px solid rgba(234, 179, 8, .45);
  font-weight: 700;
}
.pick-badge-unknown { color: var(--dim); background: transparent; }
.chip.picked-old {
  color: #fecaca; background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .55);
}
.grid-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.grid-chips .pick {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px;
  padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
}
.grid-chips .pick.on { background: linear-gradient(90deg, rgba(139, 92, 246, .35), rgba(59, 130, 246, .2)); border-color: var(--purple); }
.grid-chips .pick.off { opacity: .45; cursor: not-allowed; }

/* 卡片网格（出词进度 / 曲库） */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.mcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.mcard .mhead { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.mcard .state { margin-left: auto; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.state.wait { background: rgba(255, 255, 255, .1); color: var(--dim); }
.state.run { background: rgba(59, 130, 246, .2); color: #93c5fd; }
.state.done { background: rgba(34, 197, 94, .18); color: #86efac; }
.mcard .meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--dim); margin-top: 6px; }
.mcard .excerpt { font-size: 13px; color: #cfcbe4; margin-top: 8px; white-space: pre-wrap; line-height: 1.8; }

/* 评分色 */
.sc-ok { color: var(--ok); } .sc-mid { color: var(--warn); } .sc-bad { color: var(--bad); }

/* 对比页 */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tab { font-size: 13px; padding: 7px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--txt); font-family: inherit; }
.tab.on { background: linear-gradient(90deg, rgba(139, 92, 246, .4), rgba(59, 130, 246, .22)); border-color: var(--purple); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--dim); margin-bottom: 12px; }
.lg { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.lg.p0 { color: #fca5a5; border-color: rgba(239, 68, 68, .5); }
.lg.p1 { color: #fdba74; border-color: rgba(249, 115, 22, .5); }
.lg.p2 { color: #fde68a; border-color: rgba(234, 179, 8, .45); }
.lg.ok { color: #86efac; border-color: rgba(34, 197, 94, .45); }
.lg.mid { color: #fde68a; border-color: rgba(234, 179, 8, .45); }
.lg.bad { color: #fca5a5; border-color: rgba(239, 68, 68, .5); }

/* 列宽自适应：内容区够宽时 4 列并排（≈1500px），≤1400px 自动降到 3 列，窄屏 1 列，永不横向滚动
   （QA 建议 #1：原 1280px 下 4 列要横滚） */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }
.col { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px; }
.col.bad { border-color: rgba(239, 68, 68, .5); }
.col-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.col-head .mname { font-weight: 700; }
.col-head .title { color: #c4b5fd; font-size: 13px; }
.score-badge { margin-left: auto; font-weight: 700; font-size: 15px; }
.qcline { font-size: 12px; color: var(--dim); border-bottom: 1px dashed var(--line); padding-bottom: 7px; margin-bottom: 8px; }
.sec { margin-bottom: 10px; }
.sec-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c4b5fd; }
.sec-head .lab { font-weight: 700; }
.sec-line { font-size: 13px; color: #dfdcef; padding-left: 4px; }
.sec-line.hook { color: #fff; background: rgba(139, 92, 246, .22); border-radius: 6px; padding: 2px 6px; font-weight: 700; }
.sec-line.deviate { color: #fca5a5; background: rgba(239, 68, 68, .1); border-radius: 6px; padding: 2px 6px; }
.use-btn { font-size: 12px; padding: 2px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card2); color: var(--txt); font-family: inherit; }
.use-btn.used { background: var(--ok); border-color: transparent; color: #fff; }
.issues { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.issue { font-size: 12px; margin-bottom: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(0, 0, 0, .25); }
.issue .lv { font-weight: 700; margin-right: 5px; }
.issue.p0 .lv { color: #fca5a5; } .issue.p1 .lv { color: #fdba74; } .issue.p2 .lv { color: #fde68a; }
.issue .where { color: var(--dim); }
.issue .quote { color: #e9d5ff; }
.issue .sug { color: #86efac; }

/* v1.2 对比页多选（整首）：已选计数条 / 采用 checkbox / 选中态高亮 / 就地编辑器 */
.pickbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 10px; padding: 9px 14px; border-radius: 12px; font-size: 13px;
  background: rgba(139, 92, 246, .12); border: 1px dashed var(--purple);
}
.pickbar b { font-size: 15px; }
.pick-song {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card2); white-space: nowrap;
}
.pick-song input { accent-color: var(--purple); width: 15px; height: 15px; cursor: pointer; }
.pick-song.on { background: var(--ok); border-color: transparent; color: #fff; font-weight: 700; }
.col.picked { border-color: var(--purple); box-shadow: 0 0 0 1px rgba(139, 92, 246, .55); }
.col.real { border-color: rgba(34, 211, 238, .45); }
.pickedit { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.pickedit textarea { min-height: 200px; font-size: 13px; }

/* ============================ v1.3 歌词返工循环 ============================ */
/* 版本条：V1/V2/V3 徽章 + 各版质检分并列（点徽章切换查看该版；分数爬升一眼可见） */
.vbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 8px; }
.verbadge {
  font-family: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; color: var(--dim);
  background: var(--card2); border: 1px solid var(--line);
}
.verbadge:hover { border-color: var(--purple); }
.verbadge.on {
  background: linear-gradient(90deg, rgba(139, 92, 246, .4), rgba(59, 130, 246, .22));
  border-color: var(--purple); color: #fff; font-weight: 700;
}
/* 返工状态行（终态「⚠ 人工处理」/ 返工后过关） */
.rwline {
  font-size: 12px; margin: 2px 0 8px; padding: 6px 9px; border-radius: 8px; line-height: 1.6;
  background: rgba(234, 179, 8, .1); border: 1px solid rgba(234, 179, 8, .35);
}
.rwline .sc-ok, .rwline .sc-bad { font-weight: 700; }
/* 「⚠ 人工处理」高亮卡（返工 2 轮仍未达标，需人工定夺） */
.col.manual { border-color: rgba(234, 179, 8, .85); box-shadow: 0 0 0 1px rgba(234, 179, 8, .5); }
.col.manual .score-badge { color: #fde68a; }
/* 统计页「自动返工成效」四指标（口径：列） */
.rwgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rwcell {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px;
  background: rgba(139, 92, 246, .08); border: 1px solid var(--line);
}
.rwcell .bn {
  font-size: 26px; font-weight: 800; line-height: 1.2;
  background: linear-gradient(90deg, #c4b5fd, #93c5fd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rwcell .dim { font-size: 12px; }
.model-groups { display: flex; flex-direction: column; gap: 8px; }
.fam-head {
  font-size: 12px; font-weight: 700; color: #c4b5fd; margin-top: 6px;
  padding: 4px 10px; border-radius: 8px; width: fit-content;
  background: rgba(139, 92, 246, .14); border: 1px solid var(--line);
}
.rlab { font-size: 11px; padding: 0 6px; border-radius: 999px; color: #a5f3fc;
  background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .35); }
.oklab { font-size: 11px; color: #86efac; }
.mcard .mlab { margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  color: #fde68a; background: rgba(234, 179, 8, .14); border: 1px solid rgba(234, 179, 8, .4); }
.state.fail { background: rgba(239, 68, 68, .2); color: #fca5a5; }
.preview {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 13px;
  background: rgba(0, 0, 0, .34); white-space: pre-wrap; line-height: 1.95; color: #e5e2f5;
  max-height: 300px; overflow-y: auto;
}

/* 出歌页 */
.stage { display: flex; flex-direction: column; gap: 10px; }
.stagerow { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.stagerow span { width: 76px; color: var(--dim); }
.stagerow b { width: 48px; text-align: right; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 7px 8px; border-bottom: 1px solid rgba(139, 92, 246, .16); }
.tbl th { color: var(--dim); font-weight: 400; font-size: 12px; }
.tbl .st { padding: 1px 8px; border-radius: 999px; font-size: 12px; }
.st.wait { background: rgba(255, 255, 255, .1); color: var(--dim); }
.st.run { background: rgba(59, 130, 246, .2); color: #93c5fd; }
.st.done { background: rgba(34, 197, 94, .18); color: #86efac; }
.st.fail { background: rgba(239, 68, 68, .2); color: #fca5a5; }
.genlist-wrap { max-height: 380px; overflow-y: auto; }

/* 曲库 */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
/* 曲库分页条（乐爷 2026-09-30：306 首一页显示不全 ⇒ 30 首一页）。
 * 节点由 views-library.js 在运行时插到 #libGrid 前后（index.html 禁改 ⇒ 不写死进去）。
 * scroll-margin-top：翻页后 scrollIntoView 到列表顶，给固定顶栏让出位置，别把第一行压在栏底下。 */
.libpagerwrap { scroll-margin-top: 64px; }
#libGrid { scroll-margin-top: 64px; }
.libpager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 14px 0; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card2);
}
.libpager-info { font-size: 13px; }
.libpager-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* 翻页按钮沿用既有 .btn 的观感（禁用态 .btn:disabled 已置灰 + 禁点），这里只补尺寸 */
.libpager .btn { font-size: 14px; padding: 9px 16px; }
.libpager-cur { font-size: 14px; font-weight: 700; padding: 0 4px; }
.libpager-note { margin-top: 0; flex: 1 1 100%; }
.libcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.libcard.r-A { border-color: rgba(34, 197, 94, .6); }
.libcard.r-B { border-color: rgba(234, 179, 8, .55); }
.libcard.r-C { border-color: rgba(239, 68, 68, .55); }
.libcard h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.libmeta { font-size: 12px; color: var(--dim); margin: 6px 0 8px; }
.libcard audio { width: 100%; height: 36px; border-radius: 8px; }
.rating-bar { display: flex; gap: 7px; margin-top: 10px; }
.rbtn {
  flex: 1; padding: 6px 0; border-radius: 9px; cursor: pointer; font-size: 13px; font-family: inherit;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--txt);
}
.rbtn.on { color: #fff; border-color: transparent; }
.rbtn.on-A { background: var(--ok); } .rbtn.on-B { background: var(--warn); }
.rbtn.on-C { background: var(--bad); } .rbtn.on-N { background: var(--purple); }
.empty { text-align: center; color: var(--dim); padding: 50px 0; }

/* 统计 */
.stat-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.st-label { color: var(--dim); font-size: 13px; }
.st-num { font-size: 30px; font-weight: 700;
  background: linear-gradient(90deg, #c4b5fd, #93c5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bars { display: flex; flex-direction: column; gap: 9px; }
.brow { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.brow .bl { width: 120px; color: var(--dim); }
.brow .bb { flex: 1; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.brow .bb i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--blue)); }
.brow .bn { width: 46px; text-align: right; font-weight: 700; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .two-col, .stat-cards, .rwgrid { grid-template-columns: 1fr 1fr; } }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 90;
  transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none;
  background: rgba(34, 197, 94, .94); color: #06210f; font-weight: 700; font-size: 14px;
  padding: 11px 24px; border-radius: 999px; transition: all .28s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================ batch 1 新增 ============================ */

/* ① 小白引导：每页顶部一句大白话 */
.plainline {
  font-size: 14px; color: #ded9f2; background: rgba(139, 92, 246, .1);
  border-left: 3px solid var(--purple); border-radius: 8px;
  padding: 8px 12px; margin: 8px 0 14px;
}
/* ① 小白引导：底部高亮「下一步」按钮 */
.nextbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 16px 0 8px; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .18), rgba(59, 130, 246, .12));
  border: 1px dashed var(--purple);
}
.nextbar .nx-label { color: var(--dim); font-size: 13px; }
.btn-next {
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  padding: 11px 24px; border-radius: 12px; border: 0; color: #fff;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  box-shadow: 0 6px 18px rgba(139, 92, 246, .35); white-space: nowrap;
}
.btn-next:hover { filter: brightness(1.08); }
.btn-next:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ② 术语悬停解释（口语化） */
.term { border-bottom: 1px dashed currentColor; cursor: help; position: relative; }
.term::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: 135%; z-index: 85;
  width: max-content; min-width: 200px; max-width: 300px; white-space: normal;
  background: rgba(14, 9, 28, .98); color: #e8e6f2; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 11px; font-size: 12px; font-weight: 400; line-height: 1.6;
  /* 未悬停时【不生成盒子】：display:none 的 ::after 不参与可滚动溢出计算，从根上消掉
     「离屏提示把文档撑宽」（1440px 下 library / compare 两视图曾各溢出 38 / 28px；提示是 absolute 盒，
     即便 opacity:0 也照旧计入溢出）。注意 visibility:hidden 无效（盒子仍在、仍计入），故用 display。 */
  display: none; pointer-events: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
.term:hover::after, .term:focus::after { display: block; animation: tipfade .15s ease; }
/* v1.2 D1：右缘术语的提示盒翻转向左展开（JS initTermTips 量位置后加 .tip-right）——
 * 锚 right:0 后提示盒右缘 = 术语右缘 ≤ 视口右缘，悬停时刻不再把页面撑宽（不是捂盖子）。
 * D2：.tip-open 由触屏点按加/撤——tap 一律显示底部固定条（见 768px 断点），不赌浏览器合成 hover。 */
.term.tip-right::after { left: auto; right: 0; }
.term.tip-open::after { display: block; animation: tipfade .15s ease; }
@keyframes tipfade { from { opacity: 0; } to { opacity: 1; } }

/* ③ 歌词结构打钩区 */
.struct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 8px; margin-top: 8px; }
.struct-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); font-size: 13px; cursor: pointer;
}
.struct-item.on { border-color: var(--purple); background: rgba(139, 92, 246, .16); }
.struct-item input { accent-color: var(--purple); width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; cursor: pointer; }
.struct-item b { display: block; font-size: 13px; }
.struct-item .st-plain { color: var(--dim); font-size: 12px; line-height: 1.5; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.seq-lane { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.seq-tag { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(59, 130, 246, .18); border: 1px solid var(--line); color: #bfdbfe; overflow-wrap: anywhere; }
.seq-tag.inst { background: rgba(234, 179, 8, .14); color: #fde68a; }
.inst-note { font-size: 12px; color: var(--dim); margin-top: 8px; }
.structcheck { font-size: 12px; color: var(--dim); border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 6px; }
.structcheck .ok { color: #86efac; }
.structcheck .no { color: #fca5a5; }

/* ④ 出歌数量贯穿显示：本次任务摘要卡 */
.tasksummary {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .15), rgba(59, 130, 246, .08));
}
.tasksummary .ts-head { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; font-size: 14px; }
.tasksummary .ts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 18px; font-size: 13px; }
.tasksummary .ts-k { color: var(--dim); font-size: 12px; display: block; }
.tasksummary .ts-v { font-weight: 700; }
/* 兜底：摘要卡里的长英文标签串（如 [Verse][Pre-Chorus]…）在窄屏强制断行，避免贴边/横向溢出 */
.tasksummary .dim { overflow-wrap: anywhere; }
.tasksummary .ts-num {
  font-size: 26px; font-weight: 800; line-height: 1.2;
  background: linear-gradient(90deg, #c4b5fd, #93c5fd); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tasksummary .ts-edit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tasksummary input[type=number] { min-width: 88px; width: 88px; flex: 0 0 auto; }
.tasksummary .lock { display: inline-flex; align-items: center; gap: 4px; color: #fde68a; font-size: 12px; cursor: help; }
.tasksummary .quicknums { display: inline-flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* ============================ v1.1 第 1 项：三级角色 + ABC 封存语义 ============================ */
/* 顶栏身份切换器（纯前端演示，非真隔离） */
.roleswitch { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.rolebtn {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(139, 92, 246, .14); border: 1px solid var(--line); color: inherit;
}
.rolebtn.on { background: rgba(139, 92, 246, .4); border-color: var(--purple); font-weight: 700; }
.role-demo { font-size: 11px; white-space: nowrap; }
/* 无权限：置灰（不阻断点击，点击由各能力函数给出「需要什么身份」的提示） */
.role-denied { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }
/* 管理员批量改评工具条（无权限时整条隐藏） */
.bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.bulk-check { font-size: 12px; color: var(--dim); margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
/* C 分类顶部说明（封存 = 素材池，不是丢弃） */
.c-note {
  border: 1px dashed rgba(234, 179, 8, .5); background: rgba(234, 179, 8, .08);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; line-height: 1.7;
}
.c-seal { color: #fde68a; background: rgba(234, 179, 8, .14); }
/* C 类卡片上的「回收为 A / B」按钮组 */
.recycle { display: inline-flex; gap: 6px; margin-left: 10px; flex-wrap: wrap; }
/* 非管理员身份的试听锁提示 */
.lockline { font-size: 11px; margin-top: 4px; }

/* ============================ v1.1 第 4 项：13 态生产流程链条 + 推进按钮 ============================ */
.lifechain { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.lifehead { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.lifesteps { display: flex; flex-wrap: wrap; gap: 5px; }
.lifestep {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px; font-size: 10px;
  background: rgba(148, 163, 184, .14); border: 1px solid var(--line); color: var(--dim);
}
.lifestep.done { background: rgba(59, 130, 246, .45); border-color: rgba(59, 130, 246, .6); color: #dbeafe; }
.lifestep.cur { background: rgba(139, 92, 246, .8); border-color: var(--purple); color: #fff; font-weight: 700; }
.lifemeta { font-size: 12px; color: var(--dim); margin-top: 6px; }
.lifepanel { margin-top: 8px; }
.lifefields { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.lifefields label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--dim); }
.lifefields input { width: 92px; }
.lifebar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lifebar .lifedim { display: inline-flex; align-items: center; font-size: 12px; }
.lifebtn {
  font-size: 12px; padding: 5px 12px; border-radius: 8px; cursor: pointer;
  background: rgba(59, 130, 246, .16); border: 1px solid var(--line); color: inherit;
}
.lifebtn:disabled { opacity: .4; cursor: not-allowed; }

/* 权限预演清单 */
.perm-flag { font-size: 11px; padding: 1px 6px; border-radius: 999px; margin-left: 4px;
  color: #fde68a; background: rgba(234, 179, 8, .14); border: 1px solid rgba(234, 179, 8, .4); }
.perm-flag.eng { color: #a5f3fc; background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .4); }
.perm-lvl { font-size: 11px; padding: 1px 6px; border-radius: 999px; margin-right: 4px;
  color: #fca5a5; background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .4); }
.perm-lvl.gate { color: #fff; background: rgba(139, 92, 246, .5); border-color: var(--purple); }

/* ============================ 移动端响应式（v1.1 第 7 项提前增量 · 仅布局，不改任何行为） ============================ */
/* 仅移动端出现的元素（顶栏「☰ 菜单」）：桌面隐藏 */
.only-mobile { display: none; }
/* 移动端侧栏遮罩：默认隐藏，展开侧栏时出现，点一下收起 */
.nav-overlay {
  position: fixed; left: 0; right: 0; top: 38px; bottom: 0; z-index: 49;
  background: rgba(0, 0, 0, .55); display: none;
}
.nav-overlay.show { display: block; }
/* 宽表格套一层局部横向滚动容器，避免撑破整页（桌面足够宽不触发） */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
  /* —— 顶栏瘦身：长句隐藏，避免挤爆；只留「原型·演示数据」+「☰ 菜单」+「📋 说明」 —— */
  .ribbon-sub { display: none; }
  .only-mobile { display: inline-flex; }
  /* 顶栏加高到 48px 以容纳 ≥44px 的触控按钮；固定锚点随之同步 */
  .ribbon { height: 48px; }
  .layout { padding-top: 48px; }
  .drawer { top: 48px; }
  .nav-overlay { top: 48px; }

  /* —— 侧栏折叠为抽屉：默认滑出屏外，加 .open 滑入 —— */
  .sidenav {
    top: 48px; width: 240px; max-width: 82vw; z-index: 50;
    transform: translateX(-102%); transition: transform .26s ease;
    box-shadow: 6px 0 26px rgba(0, 0, 0, .5);
  }
  .sidenav.open { transform: translateX(0); }
  /* —— 内容区不再为固定侧栏留白（375px 横向溢出的根因） —— */
  .content { margin-left: 0; padding: 16px 14px 84px; }

  /* —— 多列容器一律降单列 —— */
  .two-col, .stat-cards, .compare-grid, .tasksummary .ts-grid,
  .grid-cards, .lib-grid, .struct-grid, .rwgrid { grid-template-columns: 1fr; }

  /* —— 说明抽屉满屏 —— */
  .drawer { width: 100%; max-width: 100%; }

  /* —— 触控目标：可点元素最小高度 ≥44px、字号 ≥14px —— */
  .navitem, .btn, .btn-big, .btn-ghost, .btn-next, .tab, .rbtn, .use-btn, .grid-chips .pick, .pick-song, .verbadge {
    min-height: 44px; font-size: 14px;
  }
  .pick-song { font-size: 13px; }
  .navitem { padding: 12px 14px; }
  .btn-ghost { padding: 10px 14px; }
  /* 曲库分页条：手机上一个手指点得中 ⇒ 按钮 ≥44px 高、字号 ≥14px；
     一条放不下就换行（flex 1 1 auto 撑满），绝不横向溢出。 */
  .libpager .btn { min-height: 44px; font-size: 14px; padding: 10px 14px; flex: 1 1 auto; }
  .libpager-info { flex: 1 1 100%; }

  /* —— 允许标题/头行换行，避免长文案把行撑破 —— */
  .cardhead, .sec-head, .drawer-head { flex-wrap: wrap; }
  /* v1.2：卡头右侧按钮排（inline-flex 默认不换行）——四个模型预设按钮在窄屏会
     把卡片撑到 ~550px 引发整页横向溢出，这里允许按钮排自身换行 */
  .cardhead .right { flex-wrap: wrap; justify-content: flex-start; margin-left: 0; }

  /* —— 宽内容改局部滚动 / 收窄，绝不让整页横向滚动 —— */
  .tasksummary input[type=number] { min-width: 0; width: 100%; max-width: 130px; }
  .genlist-wrap { overflow-x: auto; }
  .stagerow span { width: 60px; }
  .brow .bl { width: 88px; }
  /* 术语气泡：手机无 hover，改为底部固定条——既不溢出视口，点/悬停也能看解释；
     v1.2 D2：.tip-open（点按）与 :hover/:focus 同权显示；tip-right 的翻转在手机上还原成满宽底部条 */
  .term::after {
    position: fixed; left: 10px; right: 10px; bottom: 12px; top: auto;
    width: auto; min-width: 0; max-width: none;
  }
  .term.tip-right::after { left: 10px; right: 10px; }
  h2 { font-size: 20px; }

  /* —— v1.1 三级角色：顶栏切换器在窄屏收窄（诚实标注改悬停，不占宽） —— */
  .rolebtn { padding: 3px 8px; font-size: 11px; min-height: 40px; }
  .roleswitch .role-demo { display: none; }
  .roleswitch .dim:first-child { display: none; }
  .recycle { margin-left: 0; width: 100%; }
  .bulk-check { margin-left: 0; }

  /* —— v1.1 第 4 项：13 态链条窄屏 —— 圆点换行、推广输入框纵向堆叠、不横向溢出 —— */
  .lifesteps { gap: 4px; }
  .lifestep { width: 18px; height: 18px; font-size: 10px; }
  .lifefields { flex-direction: column; align-items: stretch; }
  .lifefields label { justify-content: space-between; }
  .lifefields input { width: 100%; max-width: 100%; }
  .lifebar .lifebtn { flex: 1 1 auto; }
}

/* ==========================================================================
   正式版新增（views-api.js / 登录浮层 / 模式横幅 / 容量标 / 曲库浏览弹窗）
   —— 仅追加，不改动任何既有选择器（防回归）。
   ========================================================================== */

/* 顶部模式横幅 */
.modebanner {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 8px;
  vertical-align: middle;
  color: #c9ccd4;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}
.modebanner.server { color: #b9f6cf; background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .4); }
.modebanner.demo { color: #ffe0a3; background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .4); }
/* T3：探测失败 → 醒目红色，配「重试连接」按钮（显式降级，绝不静默假装正常） */
.modebanner.bad { color: #ffd9d9; background: rgba(239, 68, 68, .18); border-color: rgba(239, 68, 68, .6); font-weight: 600; }
.modebanner.bad .ms-retry { margin-left: 6px; padding: 1px 8px; font-size: 11px; color: #fff; border-color: rgba(255, 255, 255, .55); }

/* 顶栏容量标 */
.capbadge {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 8px;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, .12);
  color: #c9ccd4;
}
.capbadge.ok { color: #b9f6cf; border-color: rgba(34, 197, 94, .4); }
.capbadge.warn { color: #ffe0a3; border-color: rgba(245, 158, 11, .5); }
.capbadge.bad { color: #ffd9d9; border-color: rgba(239, 68, 68, .55); }

/* 登录浮层 */
#loginOverlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, .86);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
#loginOverlay .loginbox {
  width: 320px;
  max-width: 90vw;
  background: #171a21;
  border: 1px solid #2a2f3a;
  border-radius: 14px;
  padding: 22px;
}
#loginOverlay .loginbox h2 { margin: 0 0 14px; font-size: 17px; }
#loginOverlay .loginbox input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid #3a4150;
  background: #10131a;
  color: #fff;
}
#loginOverlay .loginbox .btn-next { width: 100%; }
.loginmsg { min-height: 18px; font-size: 12px; color: #ff9c9c; margin-top: 8px; }
.login-foot { font-size: 12px; margin-top: 8px; line-height: 1.6; }

/* 改密浮层（复用登录浮层视觉；z-index 略低于登录层，登录层出现时它在其下） */
#pwOverlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, .86);
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
}
#pwOverlay .loginbox {
  width: 340px;
  max-width: 92vw;
  background: #171a21;
  border: 1px solid #2a2f3a;
  border-radius: 14px;
  padding: 22px;
}
#pwOverlay .loginbox h2 { margin: 0 0 6px; font-size: 17px; }
.pwfield { display: flex; gap: 8px; margin-bottom: 10px; }
.pwfield input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid #3a4150;
  background: #10131a;
  color: #fff;
}
.pwfield .btn-ghost { flex: none; padding: 9px 10px; }

/* 账号管理：状态徽标（正常/需改密/已停用） */
.acbadge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #3a4150;
  margin-left: 8px;
  vertical-align: 2px;
}
.acbadge.ok { color: #b9f6cf; border-color: rgba(34, 197, 94, .4); }
.acbadge.warn { color: #ffe0a3; border-color: rgba(245, 158, 11, .5); }
.acbadge.bad { color: #ffd9d9; border-color: rgba(239, 68, 68, .55); }

/* server 模式隐藏 demo 专属入口（角色切换器 + Key 卡片）—— 不改既有选择器 */
html.ms-server .roleswitch { display: none !important; }
html.ms-server #soleKeyCard,
html.ms-server #ptKeyCard { display: none !important; }

/* 曲库目录只读浏览弹窗 */
.ms-storage .drawer-body { max-height: 70vh; overflow: auto; }
.ms-list { list-style: none; padding-left: 0; }
.ms-list li { padding: 4px 0; border-bottom: 1px dashed #232733; font-size: 13px; }
.ms-list a { color: #9db8ff; }

/* v1.4：对比页「本批结果」汇总条 + 「示例数据」折叠区 + 示例徽标 + 一键采纳按钮 */
.batchsummary {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  padding: 8px 12px; margin: 8px 0; border-radius: 10px; font-size: 13px;
  background: rgba(120, 140, 255, .08); border: 1px solid #2a3040;
}
.batchsummary .sep { color: #4a5160; }
.demowrap { margin: 14px 0 4px; padding-top: 10px; border-top: 1px dashed #2a3040; }
.badge-demo {
  display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 11px;
  color: #c9b6ff; background: rgba(150, 120, 255, .16);
  border: 1px solid rgba(150, 120, 255, .35); margin: 0 4px;
}
.btn-ghost.adopt { border-color: rgba(120, 180, 255, .45); color: #a9ccff; }
.btn-ghost.adopt:hover { border-color: rgba(120, 180, 255, .8); }

/* v1.4：出歌页「模拟演示，未真正出歌」显著横幅（诚实底线） */
.simwarn {
  margin: 8px 0; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.75;
  color: #ffd9a0; background: rgba(255, 150, 40, .12); border: 1px solid rgba(255, 150, 40, .45);
}

/* v1.4：出歌收尾提示「部分成功」提醒色（非错误红，是提醒） */
.hint.gennote-warn {
  color: var(--warn);
  border-left: 3px solid var(--warn);
  padding-left: 10px;
}

/* v1.6：曲库卡片逐字歌词（卡拉OK 同步）——开关条 / 歌词盒 / 行 / 逐字词 / 状态标注 */
.lyrbar { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.lyrbar .btn-ghost { padding: 4px 10px; font-size: 13px; }
.lyricbox {
  /* 🔴 position: relative 不能删：跟随滚动用「歌词行相对本盒的偏移」算 scrollTop。
   * 没有它 ⇒ offsetTop 变成相对整个页面（曲库页歌多时数值几千）⇒ scrollTop 被钳到最底部
   * ⇒ 歌词停在末尾、正在唱的那行在中间看不见（乐爷 2026-09-28 手机实测反馈的「看不出唱到哪」）。 */
  position: relative;
  max-height: 180px; overflow-y: auto; margin: 6px 0 2px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); font-size: 13px; line-height: 2;
  scroll-behavior: smooth;
}
.lyrline { color: #7f8896; white-space: pre-wrap; transition: color .15s ease; }
/* 手机屏小、盒子只能露 6 行 ⇒ 只靠「变白加粗」不够醒目，补一条紫色底衬，一眼看到唱到哪 */
.lyrline.on {
  color: #fff; font-weight: 600;
  background: rgba(139, 92, 246, .22); border-radius: 6px;
  padding-left: 6px; margin-left: -6px;
}
.lyrw { border-radius: 3px; }
.lyrw.sung { color: #a9ccff; }
.lyrtag { color: #8a93a3; font-size: 12px; padding: 2px 0 6px; }




/* ==========================================================================
   v1.9 历史批次「角落折叠抽屉」（views-history.js）—— 乐爷 2026-09-28：
   「每一个环节的历史数据…折叠在角落里…随时可以再次调出来进行下一步」。
   只复用既有 .drawer 骨架；新增类名一律 .ms-history* 前缀，不污染全局、不改既有选择器。
   ========================================================================== */

/* 右下角常驻悬浮小按钮：贴边、不挡内容。
   bottom 绝不能取 12px：窄屏下 .term::after（术语条）是 position:fixed; bottom:12px;
   left:10px; right:10px 的一整条，取 12px 会直接压在它上面（撞位，点谁都点不准）。 */
.ms-history-fab {
  position: fixed; right: 12px; bottom: 72px; z-index: 58;
  padding: 10px 14px; min-height: 44px; border-radius: 999px;
  background: rgba(139, 92, 246, .92); color: #fff; border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.ms-history-fab:hover { background: rgba(139, 92, 246, 1); }

/* 历史抽屉：骨架全部复用 .drawer / .drawer.open / .drawer-head / .drawer-body / .drawer-foot */
.drawer.ms-history { z-index: 59; }
.ms-history-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.ms-history-fold {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; min-height: 44px; font-size: 14px;
  background: rgba(139, 92, 246, .10); color: var(--txt); border: 0;
}
.ms-history-item.open .ms-history-fold { background: rgba(139, 92, 246, .22); }
.ms-history-detail { padding: 10px 14px 14px; font-size: 13px; }
.ms-history-detail .dim { margin: 3px 0; }
.ms-history-ops { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.ms-history-ops .btn-next, .ms-history-ops .btn-ghost { flex: 1 1 auto; min-height: 44px; font-size: 14px; }
.ms-history-lyric { margin-top: 8px; }
.ms-history-lyric-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.ms-history-lyric-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ms-history-lyric-text {
  white-space: pre-wrap; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--card); color: #cfcbe4; font-size: 13px; line-height: 1.8;
  max-height: 160px; overflow-y: auto;
}
.ms-history-err {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px;
  color: #ffd7d7; background: rgba(239, 68, 68, .14); border: 1px solid var(--line);
}
/* 模块 1 / 模块 2 的说明行：「为什么这个按钮点不了」「这批歌词是救回来的」——一律中文讲人话 */
.ms-history-note {
  flex: 1 1 100%; margin-top: 2px; padding: 6px 10px; border-radius: 8px;
  font-size: 12px; line-height: 1.7; border: 1px solid var(--line); background: var(--card);
}
.ms-history-warn {
  color: #ffe6bd; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35);
}

/* 窄屏：既有 @media (max-width:768px) 里 .drawer{width:100%;max-width:100%} 会把抽屉撑成全屏，
   手机上就再也看不到「点旁边关掉」的那条边 ⇒ 历史抽屉压回 88%，留一条边让人点回去。
   （选择器写成 .drawer.ms-history：两个类，特异性高于单类的 .drawer，与书写顺序无关。） */
@media (max-width: 560px) {
  .drawer.ms-history { width: 88%; max-width: 88%; }
  .ms-history-fab { right: 10px; bottom: 74px; font-size: 13px; padding: 8px 12px; }
}

/* ---------------- ⓘ 说明折叠（乐爷 2026-10-03：括号说明/技术参数默认不显示，点 ⓘ 或悬停再看） ---------------- */
.hi { display: inline-block; margin-left: 4px; color: #8b8ba7; cursor: pointer; font-style: normal; font-weight: normal; user-select: none; position: relative; }
.hi-pop { display: none; position: absolute; left: 0; top: 1.5em; z-index: 60; min-width: 220px; max-width: 320px; background: #fff; color: #444; border: 1px solid #e2e2f0; border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.6; box-shadow: 0 4px 16px rgba(0,0,0,.12); font-weight: normal; white-space: normal; cursor: default; }
.hi.on .hi-pop { display: block; }
@media (hover: hover) { .hi:hover .hi-pop { display: block; } }

/* ---------------- 网站结构重组（乐爷 2026-10-03）----------------
 * 管理台板块小标题（.admsec）+ 审核台大评级按钮（.rv-btn）
 * + 普通用户个人中心（.mb-*，🔴 手机竖屏第一优先：单列、卡片大而少、
 *   主按钮全宽、点击区 ≥48px、字号 ≥16px、底部留安全区）。
 * 只新增、不改任何既有规则；正负分色按中国股市约定：收入红（.mb-up）、支出绿（.mb-down）。 */

/* 管理台三个板块的中文小标题 */
.admsec {
  margin: 20px 0 10px; padding-left: 10px;
  font-size: 16px; font-weight: 800; color: #cfcbe4;
  border-left: 4px solid var(--purple);
}

/* 审核台 / 个人中心共用：单列窄栏（手机上自然全宽） */
.mb-wrap { max-width: 620px; margin: 0 auto; }
.mb-card { margin-bottom: 14px; }
.mb-center { text-align: center; }

/* 大数字（待审 N 首 / 积分余额） */
.mb-bignum { font-size: 44px; font-weight: 800; color: #e9e9f2; line-height: 1.25; padding: 6px 0 2px; }

/* 主按钮：宽度 100%、最小点击区 48px、字号 ≥16px */
.mb-btn {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 48px; font-size: 16px; margin-top: 10px;
}
.mb-tier { flex: 1 1 28%; min-height: 48px; font-size: 16px; }

/* 个人中心里的输入框 / 下拉：全宽 + 48px 点击区（手机竖屏好按） */
.mb-wrap input, .mb-wrap select {
  width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; margin-top: 8px;
}

/* 明细行（积分流水 / 卖歌申请 / 充值申请） */
.mb-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.6; text-align: left;
}
.mb-row:last-child { border-bottom: none; }
.mb-grow { flex: 1 1 auto; min-width: 0; }

/* 正负分色（中国股市约定：涨红跌绿 ⇒ 收入用红、支出用绿） */
.mb-up { color: #e0453a; font-weight: 700; }
.mb-down { color: #2fa36b; font-weight: 700; }

.mb-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; border: 1px solid var(--line); white-space: nowrap;
}
.mb-muted { color: #9aa0b4; font-size: 13px; }

/* 底部安全区占位（iPhone 全面屏底部横条不挡内容） */
.mb-safe { height: 24px; }

/* 审核台：A/B/C/D 四个大评级按钮（两个一行，手机也好按） */
.rv-btn { flex: 1 1 40%; min-height: 48px; font-size: 16px; font-weight: 700; }
.rv-ratebar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* 手机竖屏强化（乐爷硬要求：手机竖屏使用非常方便） */
@media (max-width: 640px) {
  .mb-wrap { max-width: 100%; }
  .mb-bignum { font-size: 52px; }
  .mb-card { font-size: 16px; }
  .mb-row { font-size: 16px; }
  .rv-btn { flex: 1 1 44%; min-height: 52px; font-size: 17px; }
  .mb-safe { height: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------- 三态互斥（乐爷 2026-10-03）：下载前风险提示大号弹层 ----------------
 * 复用「居中大卡」弹层模式，手机竖屏适配：主按钮全宽、点击区 ≥48px、字号 ≥16px。
 * 只新增、不改任何既有规则。 */
.rc-dl-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 18, .72); padding: 16px; box-sizing: border-box;
}
.rc-dl-card {
  width: 100%; max-width: 440px; box-sizing: border-box;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 20px 18px; text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.rc-dl-title { font-size: 20px; font-weight: 800; color: #ffd7d7; line-height: 1.5; }
.rc-dl-text { margin-top: 12px; font-size: 16px; line-height: 1.9; color: #e9e9f2; }
.rc-dl-btn {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 48px; font-size: 16px; margin-top: 12px;
}
@media (max-width: 640px) {
  .rc-dl-card { max-width: 100%; padding: 20px 16px 16px; }
  .rc-dl-title { font-size: 19px; }
  .rc-dl-btn { min-height: 52px; font-size: 17px; }
}