/* ============================================================
   戏谱 · 戏曲曲谱管理  —  视觉系统 & 布局
   平板优先 / 极简现代 / 白底 + 蓝 (#2563EB)
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  --blue:#2563EB;
  --blue-weak:#EFF4FF;
  --blue-line:#D6E2FF;
  --red:#C8402F;          /* 戏曲朱红，用于强调/危险 */
  --ink:#1B1E24;
  --ink-2:#4A5160;
  --ink-3:#8A91A0;
  --line:#E7E9EF;
  --line-2:#F1F3F7;
  --bg:#FFFFFF;
  --bg-2:#F7F8FB;
  --paper:#FFFFFF;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --sh-1:0 1px 2px rgba(20,25,40,.05);
  --sh-2:0 6px 20px rgba(20,25,40,.08);
  --sh-3:0 18px 48px rgba(20,25,40,.16);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --tap:44px;                       /* 最小触控尺寸 */
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --font-score:"Songti SC","STSong","SimSun","Source Han Serif SC",serif;
}

/* 看谱主题 */
body[data-theme="sepia"]{ --paper:#F7F1E3; --bg-2:#F3EDDF; }
body[data-theme="dark"]{
  --paper:#15181D; --bg:#101317; --bg-2:#171B21;
  --ink:#EDEFF4; --ink-2:#B4BBC7; --ink-3:#7C8492;
  --line:#262B33; --line-2:#1D2229; --blue-weak:#1A2233; --blue-line:#25334D;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg-2);
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ border:0; background:none; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
.ico{ width:22px; height:22px; display:block; }
.ico-sm{ width:18px; height:18px; }

#app{ position:relative; height:100dvh; overflow:hidden; background:var(--bg-2); }

/* 视图切换 */
.view{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--bg-2);
  transform:translateX(100%);
  opacity:0; visibility:hidden;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), opacity .28s ease, visibility .32s;
  will-change:transform;
}
.view.is-active{ transform:none; opacity:1; visibility:visible; }
#view-library{ transform:none; }
#view-library.is-behind{ transform:translateX(-16%); opacity:.6; }

/* 响应式外壳：大屏居中，模拟平板阅读宽度 */
@media (min-width:900px){
  #app{ background:linear-gradient(160deg,#EDF1F9,#F7F8FB 40%,#F2F5FA); }
  .view{ max-width:none; }
}

/* ============================================================
   ① 曲库主页
   ============================================================ */
.lib-header{
  padding:calc(var(--safe-t) + 14px) calc(var(--safe-r) + 20px) 8px calc(var(--safe-l) + 20px);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.lib-title-row{ display:flex; align-items:center; gap:12px; }
.brand{
  font-size:26px; font-weight:700; letter-spacing:.5px;
  display:flex; align-items:center; gap:10px;
}
.brand-mark{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--blue),#4F82F0);
  color:#fff; font-size:20px; font-weight:700;
  box-shadow:0 4px 14px rgba(37,99,235,.32);
}
.lib-actions{ display:flex; gap:8px; align-items:center; }
.icon-btn{
  width:var(--tap); height:var(--tap); border-radius:12px;
  display:grid; place-items:center; color:var(--ink-2);
  position:relative; transition:background .18s;
}
.icon-btn:active{ background:var(--blue-weak); color:var(--blue); }
.sync-dot{
  position:absolute; top:9px; right:9px; width:7px; height:7px; border-radius:50%;
  background:var(--ink-3); transition:background .3s;
}
.sync-dot.on{ background:#16A34A; box-shadow:0 0 0 3px rgba(22,163,74,.16); }
.sync-dot.busy{ background:#F59E0B; animation:pulse 1s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* 搜索栏：与「戏谱」标题同行，水平居中 */
.search-row{ flex:1 1 auto; min-width:0; max-width:560px; margin:0 auto; }
.search-box{
  display:flex; align-items:center; gap:10px;
  height:46px; padding:0 14px; border-radius:14px;
  background:var(--bg-2); color:var(--ink-3);
  border:1px solid transparent; transition:.2s;
}
.search-box:focus-within{ background:var(--blue-weak); border-color:var(--blue-line); color:var(--blue); }
.search-box input{
  flex:1; border:0; background:none; outline:none; font-size:16px; color:var(--ink);
}
.search-box input::-webkit-search-cancel-button{ display:none; }
.search-clear{ display:none; font-size:22px; line-height:1; color:var(--ink-3); padding:0 2px; }
.search-box.has-val .search-clear{ display:block; }

.chips{
  display:flex; gap:8px; overflow-x:auto; padding:12px 0 4px; margin:0 -20px; padding-left:20px; padding-right:20px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; height:36px; padding:0 16px; border-radius:18px;
  background:var(--bg-2); color:var(--ink-2); font-size:15px; font-weight:500;
  border:1px solid var(--line); transition:.18s; white-space:nowrap;
}
.chip.is-active{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 3px 10px rgba(37,99,235,.26); }

.lib-body{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px calc(var(--safe-r) + 20px) calc(var(--safe-b) + 96px) calc(var(--safe-l) + 20px);
}

/* 快捷入口 */
.quick-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.quick-card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  box-shadow:var(--sh-1); transition:.2s; min-height:96px;
}
.quick-card:active{ transform:scale(.975); background:var(--blue-weak); border-color:var(--blue-line); }
.qc-ico{ font-size:20px; color:var(--blue); line-height:1; }
.qc-label{ font-size:15px; font-weight:600; }
.qc-count{ font-size:13px; color:var(--ink-3); }

.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-head h2{ font-size:18px; font-weight:650; }
.section-tools{ display:flex; gap:8px; }
.mini-btn{
  height:34px; padding:0 13px; border-radius:10px; font-size:14px; color:var(--ink-2);
  background:var(--bg); border:1px solid var(--line); transition:.18s;
}
.mini-btn:active{ background:var(--blue-weak); color:var(--blue); }

/* 曲目卡片墙 */
.score-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.score-card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--sh-1); transition:.2s; position:relative;
  display:flex; flex-direction:column;
}
.score-card:active{ transform:scale(.98); box-shadow:var(--sh-2); }
.sc-cover{
  aspect-ratio:4/3; background:linear-gradient(160deg,#F2F5FB,#E8EDF7);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
body[data-theme="dark"] .sc-cover{ background:linear-gradient(160deg,#1A1F27,#14181E); }
.sc-cover img{ width:100%; height:100%; object-fit:cover; }
.sc-cover .cover-glyph{ font-family:var(--font-score); font-size:44px; color:var(--blue); opacity:.35; }
.sc-badges{ position:absolute; top:8px; left:8px; display:flex; gap:5px; }
.badge{
  height:22px; padding:0 8px; border-radius:7px; font-size:11px; font-weight:600;
  display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--ink-2);
  backdrop-filter:blur(6px); box-shadow:var(--sh-1);
}
.badge.drama{ background:rgba(37,99,235,.92); color:#fff; }
.badge.digital{ background:rgba(200,64,47,.92); color:#fff; }
.sc-fav{
  position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:9px;
  display:grid; place-items:center; font-size:16px; color:var(--ink-3);
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px); box-shadow:var(--sh-1);
}
.sc-fav.on{ color:#E8A400; }
.sc-body{ padding:12px 13px 14px; display:flex; flex-direction:column; gap:5px; }
.sc-name{
  font-size:16px; font-weight:650; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sc-meta{ font-size:13px; color:var(--ink-3); display:flex; gap:8px; align-items:center; }
.sc-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); }
.sc-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:2px; }
.tag{
  font-size:11px; color:var(--blue); background:var(--blue-weak);
  padding:2px 7px; border-radius:6px; font-weight:500;
}
.sc-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 13px 12px; font-size:12px; color:var(--ink-3);
}

/* 空状态 */
.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-3); }
.empty-ico{
  width:76px; height:76px; margin:0 auto 18px; border-radius:22px;
  display:grid; place-items:center; font-family:var(--font-score); font-size:36px;
  background:var(--blue-weak); color:var(--blue); opacity:.85;
}
.empty-title{ font-size:17px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.empty-desc{ font-size:14px; }

/* 悬浮新增 */
.fab{
  position:absolute; right:calc(var(--safe-r) + 24px); bottom:calc(var(--safe-b) + 24px);
  width:60px; height:60px; border-radius:20px; color:#fff;
  background:linear-gradient(150deg,var(--blue),#4F82F0);
  box-shadow:0 10px 26px rgba(37,99,235,.42);
  display:grid; place-items:center; transition:.2s; z-index:20;
}
.fab:active{ transform:scale(.93); }
.fab .ico{ width:26px; height:26px; }

/* 悬浮：今日排剧（左下角） */
.fab-left{
  left:calc(var(--safe-l) + 24px); right:auto;
  background:linear-gradient(150deg,#0E9F94,#17BEB0);
  box-shadow:0 10px 26px rgba(14,159,148,.42);
}
.fab-left.is-on{
  background:linear-gradient(150deg,#0B7F77,#0E9F94);
  box-shadow:0 0 0 4px rgba(14,159,148,.22), 0 10px 26px rgba(14,159,148,.45);
}
.fab-badge{
  position:absolute; top:-6px; right:-6px; min-width:24px; height:24px; padding:0 7px;
  border-radius:12px; background:#EF4444; color:#fff;
  font-size:12px; font-weight:700; line-height:24px; text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.fab-badge[data-zero="1"]{ display:none; }
.fab-tip{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% + 10px); white-space:nowrap;
  padding:6px 12px; border-radius:10px; font-size:13px; font-weight:600;
  background:rgba(0,0,0,.72); color:#fff; opacity:0; pointer-events:none; transition:.2s;
}
.fab-left:active .fab-tip{ opacity:0; }
.fab-left:hover .fab-tip{ opacity:1; }

/* ============================================================
   ② 看谱视图
   ============================================================ */
#view-reader{ background:#2A2E36; }
.reader-stage{
  position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  touch-action:none;
}
.reader-canvas{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  transform-origin:center center;
  transition:transform .1s linear;
  will-change:transform;
}
.reader-canvas.no-anim{ transition:none; }

/* 图片谱：横向分页轨道 */
.img-stack{
  display:flex; height:100%; width:100%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.img-stack.no-anim{ transition:none; }
.img-page{
  flex:0 0 100%; height:100%; display:grid; place-items:center;
  padding:56px 0 52px;
}
/* 默认按屏幕宽度适配：宽度铺满，高度自然，竖向可平移 */
.img-page img{
  width:100%; height:auto; max-height:none; object-fit:contain;
  background:var(--paper); box-shadow:var(--sh-3); border-radius:4px;
}
.img-page .ph{
  width:76%; max-width:640px; aspect-ratio:3/4; border-radius:8px;
  background:repeating-linear-gradient(135deg,#F3F5F9,#F3F5F9 14px,#ECEFF5 14px,#ECEFF5 28px);
  display:grid; place-items:center; color:var(--ink-3); font-size:15px;
  box-shadow:var(--sh-2);
}

/* 数字谱 */
.digital-wrap{
  width:min(1040px,100%); height:100%; overflow-y:auto; padding:70px 24px 90px;
  touch-action:pan-y;
  background:var(--paper); box-shadow:var(--sh-3);
}
.digital-sheet{ font-family:var(--font-score); color:var(--ink); }
.ds-head{ text-align:center; margin-bottom:26px; }
.ds-title{ font-size:26px; font-weight:700; letter-spacing:2px; }
.ds-sub{ font-size:14px; color:var(--ink-3); margin-top:6px; letter-spacing:1px; }
.ds-row{
  display:flex; align-items:flex-end; gap:0; margin-bottom:18px;
  padding-bottom:6px; border-bottom:1px dashed var(--line);
}
.ds-bar{
  font-size:15px; color:var(--ink-3); width:44px; flex:0 0 44px; padding-bottom:22px;
  font-family:var(--font);
}
.ds-notes{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:2px; flex:1; }
.note{
  position:relative; min-width:30px; padding:28px 3px 8px;
  text-align:center; font-size:24px; line-height:1.1; font-weight:500;
}
.note .dot-up, .note .dot-dn{
  position:absolute; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--ink);
}
.note .dot-up{ top:12px; }
.note .dot-dn{ top:12px; }
/* 附点 */
.note .augdot{ margin-left:2px; font-size:20px; }
/* 减时线（下划线）*/
.note .ul{
  position:absolute; left:12%; right:12%; height:2px; background:var(--ink);
  border-radius:2px;
}
.note .ul-1{ bottom:4px; }
.note .ul-2{ bottom:0; }
/* 小节线 */
.ds-bar-line{
  align-self:stretch; width:2px; background:var(--ink); opacity:.55;
  margin:6px 8px 0; border-radius:2px; min-height:44px;
}
.ds-bar-line.end{ width:3px; opacity:.85; }
/* 延音线 */
.note .tie{ position:absolute; right:-9px; top:6px; font-size:20px; color:var(--ink); }
.ds-lyric{
  font-family:var(--font); font-size:13px; color:var(--ink-2);
  display:flex; flex-wrap:wrap; gap:2px; margin:-8px 0 20px 44px;
}
.ds-lyric span{ min-width:30px; text-align:center; }
.ds-key-row{
  display:flex; gap:24px; justify-content:center; margin-bottom:18px;
  font-family:var(--font); font-size:14px; color:var(--ink-2);
}
.ds-key-row b{ color:var(--ink); font-weight:650; }

/* 顶部细条：返回 → 标题(左) → 滚谱/循环/打印 → 全屏 → 标注 → 更多 */
.reader-top{
  position:absolute; top:0; left:0; right:0; z-index:12;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 12px) 8px calc(var(--safe-l) + 12px);
  background:linear-gradient(to bottom, rgba(255,255,255,.97), rgba(255,255,255,.86));
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
  transition:opacity .22s, transform .22s;
}
body[data-theme="dark"] .reader-top{
  background:linear-gradient(to bottom, rgba(22,26,32,.97), rgba(22,26,32,.86));
}
#view-reader.ui-hidden .reader-top{ opacity:0; transform:translateY(-100%); pointer-events:none; }
#view-reader.ui-hidden .reader-foot{ opacity:0; transform:translateY(100%); pointer-events:none; }
#view-reader.ui-hidden .switch-hint{ opacity:0; }

.rt-btn{
  width:var(--tap); height:var(--tap); border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; color:var(--ink-2); transition:background .18s;
}
.rt-btn:active{ background:var(--blue-weak); color:var(--blue); }
.rt-btn.is-active{ background:var(--blue); color:#fff; }

/* 标题：紧跟返回按钮、左对齐 */
.rt-left{ flex:1 1 90px; min-width:0; text-align:left; }
.rt-title{ font-size:21px; font-weight:700; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rt-sub{ font-size:12.5px; color:var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rt-sub:empty{ display:none; }
.rt-right{ display:flex; align-items:center; gap:4px; margin-left:auto; }

/* 顶栏演奏控件：滚谱 / 速度 / 循环 / 打印（位于全屏按钮之前） */
.rt-perform{ display:flex; align-items:center; gap:4px; }
.rt-pf{
  display:flex; align-items:center; gap:5px; height:38px; padding:0 11px;
  border-radius:11px; font-size:14px; font-weight:600; color:var(--ink-2);
  transition:.18s; white-space:nowrap;
}
.rt-pf:active{ background:var(--blue-weak); }
.rt-pf.is-active{ background:var(--blue); color:#fff; box-shadow:0 3px 10px rgba(37,99,235,.3); }
.rt-pf-ico{ font-size:16px; line-height:1; }
.rt-pf-label{ font-size:14px; }

/* 调式条 */
.key-bar{
  position:absolute; top:calc(var(--safe-t) + 68px); left:50%; transform:translateX(-50%);
  z-index:11; display:flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:14px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
  box-shadow:var(--sh-2); border:1px solid var(--line);
  font-size:14px; transition:opacity .22s, transform .22s;
}
body[data-theme="dark"] .key-bar{ background:rgba(24,28,35,.97); }
#view-reader.ui-hidden .key-bar{ opacity:0; transform:translate(-50%,-14px); pointer-events:none; }
.key-btn{
  height:34px; padding:0 12px; border-radius:9px; font-size:14px; font-weight:600;
  background:var(--blue-weak); color:var(--blue);
}
.key-btn:active{ background:var(--blue); color:#fff; }
.key-val{ font-weight:700; min-width:66px; text-align:center; color:var(--ink); font-variant-numeric:tabular-nums; }
.key-sep{ width:1px; height:20px; background:var(--line); }
.tempo-val{ color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* 底部页码 */
.reader-foot{
  position:absolute; bottom:0; left:0; right:0; z-index:12;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 16px);
  background:linear-gradient(to top, rgba(255,255,255,.97), rgba(255,255,255,.86));
  backdrop-filter:blur(14px); border-top:1px solid var(--line);
  transition:opacity .22s, transform .22s;
}
/* 底栏左：切谱（上一页/页码/下一页） · 右：排剧清单 */
.foot-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.foot-right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.rf-set{
  display:flex; align-items:center; gap:6px; height:46px; padding:0 14px;
  border-radius:12px; font-size:14px; font-weight:600;
  color:var(--blue); background:var(--blue-weak); border:1px solid var(--blue-line);
  transition:.18s;
}
.rf-set:active{ filter:brightness(.96); }
.rf-set-ico{ font-size:15px; line-height:1; }
.rf-set-count{ font-size:12px; font-weight:500; color:var(--muted); }
body[data-theme="dark"] .reader-foot{
  background:linear-gradient(to top, rgba(22,26,32,.97), rgba(22,26,32,.86));
}
.rf-arrow{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  color:var(--ink-2); background:var(--bg-2); transition:.18s;
}
.rf-arrow:active{ background:var(--blue-weak); color:var(--blue); }
.rf-arrow:disabled{ opacity:.35; }
.rf-page{
  min-width:96px; height:46px; border-radius:12px; font-size:17px; font-weight:650;
  background:var(--blue-weak); color:var(--blue); font-variant-numeric:tabular-nums;
  padding:0 14px;
}
.rf-dots{ display:flex; gap:5px; align-items:center; max-width:180px; overflow:hidden; }
.rf-dots i{
  width:7px; height:7px; border-radius:50%; background:var(--line); flex:0 0 auto; display:block;
  transition:.2s;
}
.rf-dots i.on{ background:var(--blue); width:20px; border-radius:4px; }

/* 切谱提示 */
.switch-hint{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 62px); z-index:10;
  font-size:12px; color:#fff; background:rgba(0,0,0,.42);
  padding:5px 12px; border-radius:12px; backdrop-filter:blur(6px);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.switch-hint.show{ opacity:1; }

/* 标注画布 */
.annot-layer{
  position:absolute; inset:0; z-index:8; touch-action:none;
}
.annot-layer.drawing{ pointer-events:auto; }

/* 标注工具条 */
.pen-bar{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 66px); z-index:14;
  display:flex; align-items:center; gap:6px;
  padding:8px; border-radius:16px;
  background:rgba(255,255,255,.98); backdrop-filter:blur(14px);
  border:1px solid var(--line); box-shadow:var(--sh-3);
}
/* 折叠/展开：transform 已被 translateX(-50%) 占用，故用 opacity + visibility 过渡 */
.pen-bar{
  opacity:0; visibility:hidden;
  transition:opacity .22s, visibility .22s;
}
.pen-bar.is-open{ opacity:1; visibility:visible; }
body[data-theme="dark"] .pen-bar{ background:rgba(24,28,35,.98); }
/* 折叠态小圆按钮：标注模式激活时常显，点击展开工具条 */
.pen-fab{
  position:absolute; right:calc(var(--safe-r) + 18px); bottom:calc(var(--safe-b) + 78px);
  z-index:15; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:rgba(200,64,47,.94); backdrop-filter:blur(10px);
  box-shadow:var(--sh-3); transition:transform .18s, opacity .22s;
}
.pen-fab:active{ transform:scale(.94); }
.pen-fab[hidden]{ display:none; }
.pen-tool{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  color:var(--ink-2); transition:.18s;
}
.pen-tool:active,.pen-tool.is-active{ background:var(--blue-weak); color:var(--blue); }
.pen-tool.is-active{ box-shadow:inset 0 0 0 1.5px var(--blue); }
.pen-sep{ width:1px; height:24px; background:var(--line); margin:0 3px; }
.pen-colors{ display:flex; gap:5px; }
.pen-color{
  width:28px; height:28px; border-radius:8px; border:2px solid transparent; transition:.18s;
}
.pen-color.is-active{ border-color:var(--ink); transform:scale(1.08); }

/* ============================================================
   ③ 切谱抽屉
   ============================================================ */
.sheet-mask{
  position:absolute; inset:0; z-index:40; background:rgba(12,16,24,.42);
  backdrop-filter:blur(2px); opacity:0; transition:opacity .26s;
}
.sheet-mask.show{ opacity:1; }
.switch-sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:41;
  max-height:72%; display:flex; flex-direction:column;
  background:var(--bg); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 -12px 40px rgba(20,25,40,.2);
  transform:translateY(102%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
  padding-bottom:var(--safe-b);
}
.switch-sheet.show{ transform:none; }
.sheet-grip{ width:40px; height:5px; border-radius:3px; background:var(--line); margin:10px auto 4px; }
.sheet-head{ padding:8px 20px 12px; }
.sheet-head h3{ font-size:17px; font-weight:650; margin-bottom:12px; }
.sheet-head input{
  width:100%; height:42px; padding:0 14px; border-radius:12px; outline:none;
  background:var(--bg-2); border:1px solid transparent; font-size:15px;
}
.sheet-head input:focus{ border-color:var(--blue-line); background:var(--blue-weak); }
.sheet-body{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:4px 16px 20px; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
.sheet-item{
  display:flex; gap:12px; align-items:center; padding:10px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg); transition:.18s; text-align:left;
}
.sheet-item.is-current{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
/* 排剧清单：可长按拖动排序，右侧显示拖动把手 */
.si-grip{ margin-left:auto; font-size:15px; color:var(--muted); cursor:grab; padding:0 2px; }
.sheet-item.is-dragging{ opacity:.28; }
.si-drag-clone{
  position:fixed; z-index:1200; pointer-events:none;
  box-shadow:0 12px 32px rgba(0,0,0,.22); opacity:.96;
  border-color:var(--blue); background:var(--bg);
}
.sheet-tip{ margin:8px 0 0; font-size:12px; line-height:1.55; color:var(--muted); }
.sheet-tip strong{ color:var(--ink-2); }
.sheet-item:active{ background:var(--blue-weak); border-color:var(--blue-line); }
.si-thumb{
  width:46px; height:58px; border-radius:7px; flex:0 0 auto; overflow:hidden;
  background:linear-gradient(160deg,#EEF2FA,#E2E8F4); display:grid; place-items:center;
  font-family:var(--font-score); color:var(--blue); opacity:.7;
}
body[data-theme="dark"] .si-thumb{ background:linear-gradient(160deg,#1B2029,#151A21); }
.si-thumb img{ width:100%; height:100%; object-fit:cover; }
.si-info{ min-width:0; }
.si-name{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-meta{ font-size:12px; color:var(--ink-3); margin-top:3px; }

/* ============================================================
   ④ 弹窗 / 表单
   ============================================================ */
.modal-mask{
  position:absolute; inset:0; z-index:50; background:rgba(12,16,24,.44);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .24s;
}
.modal-mask.show{ opacity:1; }
.modal{
  position:absolute; z-index:51; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.96);
  width:min(620px,calc(100% - 40px)); max-height:88%;
  display:flex; flex-direction:column;
  background:var(--bg); border-radius:var(--radius-lg);
  box-shadow:var(--sh-3); opacity:0; visibility:hidden;
  transition:opacity .24s, transform .24s, visibility .24s;
}
.modal.show{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.modal-narrow{ width:min(480px,calc(100% - 40px)); }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px 14px; flex:0 0 auto;
}
.modal-head h3{ font-size:19px; font-weight:650; }
.modal-x{
  width:36px; height:36px; border-radius:10px; font-size:24px; color:var(--ink-3);
  display:grid; place-items:center; line-height:1;
}
.modal-x:active{ background:var(--bg-2); }
.modal-body{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 22px 8px; display:flex; flex-direction:column; gap:16px;
}
.modal-foot{
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  padding:16px 22px calc(20px + var(--safe-b)); flex:0 0 auto;
  border-top:1px solid var(--line-2); margin-top:8px;
}
.foot-spacer{ flex:1; }

.type-pick{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.type-card{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:16px 14px;
  display:flex; flex-direction:column; gap:5px; align-items:flex-start;
  background:var(--bg); transition:.18s; text-align:left;
}
.type-card.is-active{ border-color:var(--blue); background:var(--blue-weak); }
.tc-ico{ font-size:22px; line-height:1; }
.tc-t{ font-size:15px; font-weight:650; }
.tc-d{ font-size:12px; color:var(--ink-3); line-height:1.4; }

.field{ display:flex; flex-direction:column; gap:7px; }
.field > span{ font-size:13px; font-weight:600; color:var(--ink-2); }
.field input,.field select,.field textarea{
  width:100%; min-height:46px; padding:11px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--bg-2); outline:none; font-size:15px;
  transition:.18s; resize:vertical;
}
.field textarea{ line-height:1.6; font-family:var(--font-score); font-size:17px; letter-spacing:1px; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue); background:var(--blue-weak);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-hint{ margin:-2px 0 2px; font-size:12px; line-height:1.55; color:var(--ink-3); }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } .type-pick{ grid-template-columns:1fr; } }

.drop-zone{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:26px; border:1.5px dashed var(--line); border-radius:var(--radius);
  background:var(--bg-2); cursor:pointer; transition:.18s;
}
.drop-zone:active,.drop-zone.dragover{ border-color:var(--blue); background:var(--blue-weak); }
.dz-ico{ font-size:26px; color:var(--blue); line-height:1; }
.dz-t{ font-size:15px; font-weight:600; }
.dz-d{ font-size:12px; color:var(--ink-3); }
.file-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.file-item{
  display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2);
  padding:7px 10px; background:var(--bg-2); border-radius:9px;
}
.file-item .fi-n{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-item .fi-x{
  background:none; border:none; color:var(--ink-3); font-size:20px; line-height:1;
  padding:0; width:32px; height:32px; border-radius:8px; flex:0 0 auto; transition:.15s;
}
.file-item .fi-x:active{ background:var(--blue-weak); color:var(--blue); }

.btn-primary{
  height:48px; padding:0 26px; border-radius:13px; font-size:16px; font-weight:650;
  color:#fff; background:linear-gradient(150deg,var(--blue),#4F82F0);
  box-shadow:0 5px 16px rgba(37,99,235,.32); transition:.18s;
}
.btn-primary:active{ transform:scale(.97); }
.btn-primary:disabled{ opacity:.45; box-shadow:none; }
.btn-ghost{
  height:48px; padding:0 20px; border-radius:13px; font-size:15px; font-weight:600;
  color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); transition:.18s;
}
.btn-ghost:active{ background:var(--blue-weak); color:var(--blue); }
.btn-danger{
  height:48px; padding:0 20px; border-radius:13px; font-size:15px; font-weight:600;
  color:var(--red); background:rgba(200,64,47,.08); transition:.18s;
}
.btn-danger:active{ background:rgba(200,64,47,.16); }

/* 批量导入（粘贴文本 → 多曲谱） */
.bulk-format{
  padding:12px 14px; margin-bottom:14px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius);
}
.bulk-format-title{ font-size:13px; font-weight:650; color:var(--ink-2); margin-bottom:8px; }
.bulk-sample{
  margin:0 0 8px; padding:10px 12px; border-radius:10px;
  background:var(--bg); border:1px solid var(--line-2);
  font-family:var(--font-score); font-size:13px; line-height:1.75; color:var(--ink-2);
  white-space:pre-wrap; word-break:break-all;
}
.bulk-format code, .field-hint code{
  padding:1px 5px; border-radius:5px; background:var(--blue-weak);
  color:var(--blue); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px;
}
.bulk-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:10px; flex-wrap:wrap;
}
.bulk-stat{ font-size:14px; color:var(--ink-2); }
.bulk-parse-btn{ height:38px; padding:0 16px; font-size:14px; border-radius:10px; }
.bulk-preview{
  display:flex; flex-direction:column; gap:8px;
  max-height:38vh; overflow-y:auto; margin-top:12px; padding-right:2px;
}
.bulk-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 12px; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--line-2);
}
.bulk-item.is-dup{ background:rgba(200,64,47,.06); border-color:rgba(200,64,47,.3); }
.bulk-item.is-skip{ opacity:.5; }
/* 剧目分组 */
.bulk-drama-group{
  display:flex; flex-direction:column; gap:6px;
  padding-left:10px; border-left:2px solid var(--line-2);
}
.bulk-drama-group + .bulk-drama-group{ margin-top:4px; }
.bulk-drama{
  display:flex; align-items:center; flex-wrap:wrap;
  font-size:13.5px; font-weight:700; color:var(--ink-2); letter-spacing:.02em;
}
/* 冲突项（该剧该唱段已存在） */
.bulk-item.is-conflict{
  background:rgba(201,132,10,.07);
  border-color:rgba(201,132,10,.32);
  align-items:center;
}
/* 添加 / 覆盖 / 跳过 */
.bi-acts{ flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.bi-act{
  padding:5px 12px; border-radius:9px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  background:var(--bg); border:1px solid var(--line-2);
  transition:.15s;
}
.bi-act:hover{ border-color:var(--blue); color:var(--blue); }
.bi-act:active{ transform:translateY(1px); }
.bi-act.is-active{
  background:var(--blue); border-color:var(--blue); color:#fff;
}
.bi-idx{
  flex:0 0 auto; width:24px; height:24px; border-radius:8px;
  display:grid; place-items:center; font-size:12px; font-weight:650;
  background:var(--blue-weak); color:var(--blue);
}
.bulk-item.is-dup .bi-idx{ background:rgba(200,64,47,.14); color:var(--red); }
.bi-main{ min-width:0; flex:1; }
.bi-title{ font-size:15px; font-weight:600; color:var(--ink); }
.bi-meta{ margin-top:3px; font-size:12.5px; color:var(--ink-3); line-height:1.6; word-break:break-all; }
.bi-tag{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:6px;
  background:var(--blue-weak); color:var(--blue); font-size:11.5px; font-weight:600;
}
.bi-tag.is-dup{ background:rgba(200,64,47,.12); color:var(--red); }
.bulk-warn{
  padding:9px 12px; border-radius:10px; font-size:13px; line-height:1.6;
  background:rgba(200,64,47,.07); color:var(--red);
}

/* 设置组 */
.set-group{ display:flex; flex-direction:column; gap:4px; }
.set-group h4{
  font-size:13px; font-weight:650; color:var(--blue); text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:6px;
}
.set-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line-2); font-size:15px;
}
.set-status{ color:var(--ink-3); font-size:14px; }
.set-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.set-note{ font-size:12px; color:var(--ink-3); text-align:center; padding:16px 0 4px; }
.seg{ display:flex; gap:2px; background:var(--bg-2); padding:3px; border-radius:11px; }
.seg button{
  height:34px; padding:0 13px; border-radius:8px; font-size:13px; font-weight:600;
  color:var(--ink-2); transition:.18s;
}
.seg button.is-active{ background:var(--bg); color:var(--blue); box-shadow:var(--sh-1); }
input[type=range]{ width:130px; accent-color:var(--blue); }

/* 上下文菜单 */
.ctx-menu{
  position:absolute; z-index:60; min-width:170px; padding:6px;
  background:var(--bg); border-radius:14px; box-shadow:var(--sh-3);
  border:1px solid var(--line); opacity:0; transform:scale(.94);
  transform-origin:top right; transition:.16s;
}
.ctx-menu.show{ opacity:1; transform:scale(1); }
.ctx-menu button{
  display:block; width:100%; text-align:left; padding:11px 14px;
  border-radius:9px; font-size:15px; color:var(--ink-2); transition:.15s;
}
.ctx-menu button:active{ background:var(--blue-weak); color:var(--blue); }
.ctx-menu button.danger{ color:var(--red); }
.ctx-menu button.danger:active{ background:rgba(200,64,47,.1); }

/* Toast */
.toast{
  position:absolute; left:50%; bottom:calc(var(--safe-b) + 90px); transform:translate(-50%,12px);
  z-index:80; padding:11px 20px; border-radius:13px; font-size:14px; font-weight:500;
  color:#fff; background:rgba(24,28,36,.94); backdrop-filter:blur(10px);
  box-shadow:var(--sh-2); opacity:0; transition:.24s; pointer-events:none;
  max-width:80%; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* 横屏平板优化 */
@media (min-width:1024px) and (orientation:landscape){
  .score-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .quick-row{ grid-template-columns:repeat(3,minmax(0,220px)); }
  .digital-wrap{ width:min(1180px,100%); }
}
/* 竖屏平板 */
@media (min-width:768px) and (orientation:portrait){
  .score-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .lib-body{ padding-left:calc(var(--safe-l) + 32px); padding-right:calc(var(--safe-r) + 32px); }
  .lib-header{ padding-left:calc(var(--safe-l) + 32px); padding-right:calc(var(--safe-r) + 32px); }
}
/* 手机 */
@media (max-width:480px){
  .score-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .sc-name{ font-size:14px; }
  .brand{ font-size:22px; }
  .quick-card{ padding:12px; min-height:82px; }
  .qc-label{ font-size:13px; }
}

/* ============================================================
   ⑤ 演奏辅助（顶栏内 .rt-perform；此处为滚谱速度调节）
   ============================================================ */
/* 滚谱速度调节 */
.pf-speed{
  display:flex; align-items:center; gap:1px;
  background:var(--bg-2); border-radius:11px; padding:2px;
}
.pf-sstep{
  width:28px; height:34px; border-radius:8px; display:grid; place-items:center;
  font-size:17px; font-weight:700; color:var(--ink-2); transition:.15s;
}
.pf-sstep:active{ background:var(--blue); color:#fff; }
.pf-speed-val{
  min-width:32px; text-align:center; font-size:14px; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.pf-bpm{ display:flex; align-items:center; gap:2px; background:var(--bg-2); border-radius:10px; padding:2px; }
.pf-step{
  width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  font-size:16px; font-weight:600; color:var(--ink-2);
}
.pf-step:active{ background:var(--bg); color:var(--blue); }
.pf-bpm-val{
  min-width:42px; text-align:center; font-size:15px; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.pf-beats{ display:flex; gap:5px; align-items:center; }
.pf-beats i{
  width:11px; height:11px; border-radius:50%; background:var(--line);
  display:block; transition:transform .08s, background .08s;
}
.pf-beats i.on{ background:var(--blue); transform:scale(1.25); }
.pf-beats i.on.accent{ background:var(--red); transform:scale(1.45); }

/* 滚谱进度条 */
.scroll-track{
  position:absolute; left:0; right:0; top:0; height:3px;
  background:transparent; z-index:15;
}
.scroll-track i{ display:block; height:100%; width:0; background:var(--blue); transition:width .1s linear; }

/* ============================================================
   ⑥ 剧目单卡片
   ============================================================ */
.set-cover{ padding:10px; }
.set-thumbs{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:4px; width:100%; height:100%;
}
.set-thumbs img{ width:100%; height:100%; object-fit:cover; border-radius:5px; }
.set-thumbs .mini-glyph{
  display:grid; place-items:center; background:var(--bg-2); border-radius:5px;
  color:var(--blue); font-family:var(--font-score); font-size:17px; opacity:.65;
}
.set-card .sc-foot{ gap:8px; }
.set-card .sc-foot .mini-btn{ flex:1; }

/* 剧目单弹窗 */
.set-list{
  display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto;
  padding:4px 0;
}
.set-item{
  display:flex; align-items:center; gap:9px; padding:9px 11px;
  background:var(--bg-2); border-radius:11px; font-size:14px;
  cursor:pointer; transition:background .16s, box-shadow .16s;
}
/* 点击曲目名选中 */
.set-item.is-sel{ background:var(--blue-weak); box-shadow:inset 0 0 0 1px var(--blue-line); }
.set-item.is-sel .set-item-name{ color:var(--blue); font-weight:650; }
.set-order{
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  background:var(--blue-weak); color:var(--blue); font-size:12px; font-weight:700; flex:0 0 auto;
}
.set-item-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.set-item-meta{ font-size:12px; color:var(--ink-3); flex:0 0 auto; }
.set-mini{
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  color:var(--ink-2); font-size:15px; background:var(--bg); flex:0 0 auto;
}
.set-mini:active{ background:var(--blue-weak); color:var(--blue); }
.set-mini.danger{ color:var(--red); }
.pick-empty{ text-align:center; color:var(--ink-3); font-size:14px; padding:24px 0; }
.pic-note{ grid-column:1/-1; text-align:center; color:var(--ink-3); font-size:14px; padding:28px 0; }

/* 选择曲目 */
.pick-search{
  width:100%; height:42px; padding:0 14px; border-radius:12px; outline:none;
  background:var(--bg-2); border:1px solid transparent; font-size:15px; margin-bottom:10px;
}
.pick-search:focus{ border-color:var(--blue-line); background:var(--blue-weak); }
.pick-list{ display:flex; flex-direction:column; gap:5px; max-height:320px; overflow-y:auto; }
.pick-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:11px; background:var(--bg-2); font-size:14px; text-align:left;
  border:1.5px solid transparent; transition:.16s;
}
.pick-item.on{ border-color:var(--blue); background:var(--blue-weak); }
.pick-item.is-in{ opacity:.55; }
.pick-check{
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  border:1.5px solid var(--line); font-size:13px; font-weight:700; color:var(--blue);
  background:var(--bg); flex:0 0 auto;
}
.pick-item.on .pick-check{ background:var(--blue); color:#fff; border-color:var(--blue); }
.pick-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick-meta{ font-size:12px; color:var(--ink-3); }

/* 切谱抽屉增强 */
.sheet-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sheet-title-row h3{ margin:0; }
.sheet-tabs{ display:flex; gap:2px; background:var(--bg-2); padding:3px; border-radius:11px; }
.sheet-tabs button{
  height:32px; padding:0 14px; border-radius:8px; font-size:13px; font-weight:600;
  color:var(--ink-2); transition:.18s;
}
.sheet-tabs button.is-active{ background:var(--bg); color:var(--blue); box-shadow:var(--sh-1); }
.set-strip{
  display:flex; gap:7px; overflow-x:auto; padding:10px 0 2px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.set-strip::-webkit-scrollbar{ display:none; }
.set-chip{
  flex:0 0 auto; height:32px; padding:0 13px; border-radius:16px; font-size:13px;
  font-weight:500; background:var(--bg-2); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap;
}
.set-chip.is-active{ background:var(--blue); color:#fff; border-color:var(--blue); }
.set-strip-empty{ font-size:13px; color:var(--ink-3); padding:4px 0; }
.si-order{
  width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
  background:var(--blue-weak); color:var(--blue); font-size:11px; font-weight:700;
  flex:0 0 auto;
}

/* 数字输入 */
.num-in{
  width:80px; height:36px; padding:0 10px; border-radius:9px; text-align:center;
  border:1px solid var(--line); background:var(--bg-2); outline:none;
  font-variant-numeric:tabular-nums;
}
.num-in:focus{ border-color:var(--blue); background:var(--blue-weak); }
.wide-btn{ width:100%; margin-top:10px; }
input[type=checkbox]{ width:22px; height:22px; accent-color:var(--blue); }
.sync-dot.warn{ background:var(--red); box-shadow:0 0 0 3px rgba(200,64,47,.16); }

/* 打印预览容器（iframe 兜底） */
@media print{
  .view, .modal, .switch-sheet, .sheet-mask, .modal-mask, .toast, .ctx-menu{ display:none !important; }
}

/* 响应式：窄屏下顶栏演奏控件只留图标，并整体换到第二行 */
@media (max-width:900px){
  .rt-pf-label{ display:none; }
  .rt-pf{ padding:0 9px; }
}
@media (max-width:760px){
  .rt-perform{
    order:10; flex:1 0 100%; justify-content:center; gap:6px;
    margin-top:2px; padding-top:6px; border-top:1px solid var(--line);
  }
  .rt-pf-label{ display:inline; }
  .rt-pf{ padding:0 12px; }
}
@media (max-width:640px){
  .pf-beats{ display:none; }
  .set-thumbs{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ============================================================
   全屏沉浸按钮（看谱顶栏）
   进入全屏后图标旋转 180° 表示「退出」，蓝色高亮表示激活态
   ============================================================ */
#reader-fullscreen .ico{ transition:transform .22s; }
#reader-fullscreen.is-active .ico{ transform:rotate(180deg); }
#reader-fullscreen.is-active{ color:var(--blue); background:var(--blue-weak); }

/* ============================================================
   登录弹层（邮箱登录：密码 / 验证码 / 注册 / 找回）
   ============================================================ */
.auth-modal{
  display:none;
  position:fixed; inset:0; z-index:1000;
  align-items:center; justify-content:center;
  background:rgba(20,22,28,.46);
  backdrop-filter:blur(3px);
  padding:20px;
}
.auth-card{
  width:min(420px,calc(100% - 32px));
  /* 注册模式字段较多（邮箱/密码/确认密码/验证码），小屏必须可滚动，否则底部被裁掉 */
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bg,#fff);
  border-radius:18px;
  padding:24px 22px 20px;
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  animation:authIn .22s ease;
}
@keyframes authIn{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{ opacity:1; transform:none;} }
.auth-card h2{ font-size:20px; margin:0 0 6px; }
.auth-hint{ font-size:13px; color:var(--muted,#777); margin:0 0 16px; line-height:1.5; }
.auth-tabs{ display:flex; gap:6px; margin-bottom:16px; }
.auth-tab{
  flex:1; padding:8px 0; font-size:13px; cursor:pointer;
  border:1px solid var(--line,#e6e6e6); background:var(--bg-2,#f6f6f8);
  border-radius:10px; color:var(--text,#222);
}
.auth-tab.active{ background:var(--blue,#2563EB); color:#fff; border-color:var(--blue,#2563EB); }
.auth-body .form-group{ margin-bottom:12px; }
.auth-body label{ display:block; font-size:12px; color:var(--muted,#777); margin-bottom:5px; }
.auth-body input[type=email], .auth-body input[type=password], .auth-body input[type=text]{
  width:100%; padding:10px 12px; font-size:14px;
  border:1px solid var(--line,#e6e6e6); border-radius:10px;
  background:var(--bg,#fff); color:var(--text,#222); box-sizing:border-box;
}
.auth-body input:focus{ outline:none; border-color:var(--blue,#2563EB); }
.code-row{ display:flex; gap:8px; }
.code-row input{ flex:1; }
/* 注册模式下高亮验证码区，防止用户误以为没有输入框 */
#authCodeGroup.code-focus{
  padding:10px 12px; margin:0 -4px 12px;
  border:1px dashed var(--blue,#2563EB); border-radius:12px; background:rgba(37,99,235,.05);
}
#authCodeGroup.code-focus label{ color:var(--blue,#2563EB); font-weight:600; }
#authCodeGroup.code-focus .auth-tip{ color:var(--ink-2,#444); }
.auth-tip{ margin:8px 0 0; font-size:12px; line-height:1.55; color:var(--ink-3); }
.auth-submit:disabled{ opacity:.6; cursor:default; }
.auth-submit{ width:100%; margin-top:6px; padding:11px 0; font-size:15px; font-weight:600;
  background:var(--blue,#2563EB); color:#fff; border:none; border-radius:11px; cursor:pointer; }
.auth-submit:active{ filter:brightness(.94); }
.auth-msg{ min-height:18px; margin-top:10px; font-size:13px; text-align:center; }
.auth-msg.ok{ color:#1f9d55; }
.auth-msg.err{ color:#d23b3b; }
#authForgotGroup{ margin-top:-4px; margin-bottom:10px; }
#authForgotGroup a{ font-size:12px; color:var(--blue,#2563EB); text-decoration:none; }
/* 密码登录失败后的补救入口（验证码注册的账号没有密码） */
.auth-recover{
  margin:10px 0 0; padding:9px 12px; text-align:center;
  font-size:12px; line-height:1.6; color:var(--muted,#777);
  background:var(--bg-2,#f6f6f8); border-radius:10px;
}
.auth-recover[hidden]{ display:none; }
.auth-recover a{ color:var(--blue,#2563EB); text-decoration:none; font-weight:600; }

/* ============================================================
   触屏优化 + 响应式缩放（根据屏幕大小自适应）
   ============================================================ */

/* 触控目标：最小 44px，去除 300ms 点击延迟 */
button, .mini-btn, .icon-btn, .set-mini, .rt-btn, .rf-arrow, .rt-pf, .pf-sstep, .pen-tool,
input, select, textarea, .drop-zone, .quick-card, .score-card{
  touch-action:manipulation;
}
button, .mini-btn, .icon-btn, .set-mini, .rt-btn, .rf-arrow, .rt-pf, .pen-tool{
  min-height:var(--tap,44px); min-width:var(--tap,44px);
}
input, select, textarea, .drop-zone{ min-height:var(--tap,44px); }

/* 弹窗滚动：内容超出时 body 内滚动，脚部固定 */
.modal{ max-height:94dvh; }
.modal-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* 新增弹窗：嵌套字段 / 来源分隔 / 排剧提示 */
.field.sub{ margin:8px 0 0 14px; }
.field.sub > span{ font-size:13px; color:var(--ink-2); }
.src-sep{
  display:flex; align-items:center; gap:10px; margin:14px 0 8px;
  color:var(--ink-3); font-size:12px;
}
.src-sep::before, .src-sep::after{ content:""; flex:1; height:1px; background:var(--line); }
.set-tip{ font-size:12.5px; color:var(--ink-3); line-height:1.5; margin:2px 0 8px; }
.set-tip strong{ color:var(--blue); }

/* 排剧单：长按拖动态 */
.set-item{ touch-action:pan-y; transition:background .15s; }
.set-item.set-dragging{ opacity:.35; }
.set-item.set-drop-target{ box-shadow:inset 0 3px 0 var(--blue); background:var(--blue-weak); }
.set-drag-clone{
  position:fixed; z-index:9000; pointer-events:none;
  background:var(--bg); border:1px solid var(--blue-line); border-radius:var(--radius-sm);
  box-shadow:var(--sh-3); opacity:.96;
  display:flex; align-items:center; gap:8px; padding:10px 12px;
}

/* ---------- 响应式：按屏幕大小缩放布局 ---------- */
/* 中大屏（平板横屏 / 桌面） */
@media (min-width:1024px){
  :root{ --tap:48px; }
  #app{ font-size:17px; }
  .score-grid{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }
  .lib-body{ max-width:1100px; margin:0 auto; }
  .modal{ width:min(560px,calc(100vw - 48px)); }
  .reader-top .rt-title{ font-size:23px; }
}
/* 中等屏（小平板） */
@media (min-width:768px) and (max-width:1023px){
  .score-grid{ grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); }
  .lib-body{ max-width:880px; margin:0 auto; }
  .reader-top .rt-title{ font-size:22px; }
}
/* 小屏手机 */
@media (max-width:480px){
  :root{ --tap:42px; }
  #app{ font-size:14px; }
  .lib-body{ padding:10px 10px 96px; }
  .score-grid{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; }
  .lib-header{ padding:10px 12px calc(8px + var(--safe-t)); }
  .lib-title-row{ gap:8px; }
  .brand{ font-size:20px; gap:7px; }
  .brand-mark{ width:32px; height:32px; border-radius:9px; font-size:17px; }
  .search-box{ height:40px; padding:0 11px; border-radius:12px; }
  .search-box input{ font-size:15px; }
  .lib-actions{ gap:2px; }
  .fab{ right:16px; bottom:calc(18px + var(--safe-b)); width:54px; height:54px; }
  .fab-left{ left:16px; }
  .modal, .modal-narrow{ width:calc(100vw - 16px); border-radius:18px; max-height:92dvh; }
  .modal-body{ padding:14px 14px 16px; }
  .field > span, .field.sub > span{ font-size:13px; }
  .quick-row{ grid-template-columns:repeat(2,1fr); }
  .set-item{ padding:12px 10px; }
  .set-mini{ width:40px; height:40px; }
  .reader-top .rt-title{ font-size:18px; }
  .rt-sub{ display:none; }
  .rt-perform{ order:10; flex:1 0 100%; justify-content:center; gap:4px;
    margin-top:2px; padding-top:5px; border-top:1px solid var(--line); }
  .rt-pf{ height:34px; padding:0 10px; }
  .rt-pf-label{ display:none; }
  .pf-sstep{ width:26px; height:30px; font-size:15px; }
  .pf-speed-val{ min-width:28px; font-size:13px; }
}
/* 超小屏 */
@media (max-width:360px){
  .score-grid{ grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:8px; }
  .quick-card .qc-label{ font-size:12px; }
}
/* 横屏且高度受限时压缩顶/底栏 */
@media (max-height:480px) and (orientation:landscape){
  .reader-top{ padding-top:calc(6px + var(--safe-t)); }
  .reader-foot{ padding-bottom:6px; }
  .rt-perform{ order:0; flex:0 1 auto; flex-wrap:nowrap; border-top:none; margin-top:0; padding-top:0; }
  .rt-pf{ height:34px; }
}