/* 乐谱库页面自身样式。谱面与控件行由 score-player.css 提供。 */
.sm-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;
}
.sm-card a{
  display:flex;flex-direction:column;gap:8px;height:100%;
  padding:16px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;text-decoration:none;color:inherit;
  transition:transform .12s,border-color .12s,box-shadow .12s;
}
.sm-card a:hover{transform:translateY(-2px);border-color:#c7d2fe;box-shadow:var(--shadow)}
.sm-card-title{font-size:16px;font-weight:700;color:var(--ink)}
.sm-card-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)}
.sm-card-meta span{white-space:nowrap}
.sm-card-meta span + span::before{content:"·";margin-right:8px;color:var(--line)}

.sm-facts{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  margin:0 0 18px;padding:14px 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--paper);
}
.sm-fact dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sm-fact dd{margin:2px 0 0;font-size:14px;font-weight:650;color:var(--ink)}

/* ---------- 索引页：主线、难度徽章、会员墙 ---------- */
.sm-card a{position:relative}
.sm-card-tags{display:flex;flex-wrap:wrap;gap:6px}

.sm-badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:650;line-height:1.4;
  white-space:nowrap;
}
.sm-badge--beginner{background:#eef0ff;color:#4f46e5}
.sm-badge--elementary{background:#fff7ed;color:#b45309}
.sm-badge--intermediate{background:#f6f2ea;color:#1e2433;border:1px solid var(--line)}
.sm-badge--premium{background:#1e2433;color:#fff}

/* 主线：一行一首，用序号节奏，和下方卡片网格区分开 */
.sm-start{background:#fbf7ef;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sm-start-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:760px}
.sm-start-item a{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);text-decoration:none;color:inherit;
  transition:border-color .12s,transform .12s,box-shadow .12s;
}
.sm-start-item a:hover{transform:translateY(-1px);border-color:#c7d2fe;box-shadow:var(--shadow)}
.sm-start-num{
  font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--accent);letter-spacing:.06em;flex:none;
}
.sm-start-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.sm-start-title{font-size:15px;font-weight:650;color:var(--ink);display:flex;gap:8px;align-items:center}
.sm-start-meta{font-size:12px;color:var(--muted)}

/* 难度分组之间留出节奏 */
.sm-level-group + .sm-level-group{margin-top:28px}
.sm-level-more{list-style:none;display:flex;gap:16px;flex-wrap:wrap;margin:20px 0 0;padding:0;font-size:13px}

/* 会员谱：谱面下的一张说明卡，不遮住已经给出的前 4 小节 */
.sm-gate{
  margin:16px 0 0;padding:18px 20px;
  border:1px dashed var(--line);border-radius:12px;background:#fbf7ef;
}
.sm-gate-title{margin:8px 0 6px;font-size:16px;font-weight:700;color:var(--ink)}
.sm-gate-body{margin:0 0 12px;font-size:13.5px;line-height:1.7;color:var(--ink2)}
.sm-gate-actions{display:flex;flex-wrap:wrap;gap:10px}
.sm-gate-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 16px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper);
  font:650 13px/1 inherit;color:var(--ink);text-decoration:none;
  transition:border-color .16s,background .16s,color .16s;
}
.sm-gate-btn:hover{border-color:var(--accent)}
.sm-gate-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sm-gate-btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.sm-gate-btn--primary:hover{background:#4338ca;border-color:#4338ca}
.sm-gate[hidden]{display:none}

/* 筛选隐藏后不再占位 */
.sm-grid [hidden],.sm-level-group[hidden],.nf-group[hidden],.nf-card[hidden]{display:none!important}

@media (max-width:760px){
  .nf-toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .nf-search{width:100%}
  .nf-chips{flex-wrap:wrap}
  .sm-start-list{max-width:none}
  .sm-start-item a{padding:10px 12px;gap:10px}
  .sm-start-title{font-size:14px}
}

/* 分组标题是三级：比「全部曲目」低一档 */
.sm-level-group .nf-group-head h3{
  margin:0;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
}

/* 分组标题链到对应难度页，给搜索引擎和读者一条固定路径 */
.sm-level-group .nf-group-head h3 a{color:inherit;text-decoration:none}
.sm-level-group .nf-group-head h3 a:hover{color:var(--accent)}
.sm-level-group .nf-group-head h3 a::after{content:"→";margin-left:6px;font-size:15px;color:var(--muted)}
.sm-level-group .nf-group-head h3 a:hover::after{color:var(--accent)}

/* 会员谱点「打印/导出」时，说明卡脉冲一下把人引过去 */
.sm-gate{scroll-margin:96px}
.sm-gate.is-flash{animation:sm-gate-flash 1.4s ease-out}
@keyframes sm-gate-flash{
  0%   {border-color:var(--accent);box-shadow:0 0 0 0 rgba(79,70,229,.35)}
  70%  {border-color:var(--accent);box-shadow:0 0 0 10px rgba(79,70,229,0)}
  100% {border-color:var(--line);box-shadow:0 0 0 0 rgba(79,70,229,0)}
}
@media (prefers-reduced-motion:reduce){
  .sm-gate.is-flash{animation:none;border-color:var(--accent)}
}

/* 演奏区：整块方框铺满可用宽度，但按钮行与说明留在内容列宽内居中。
   谱面因此能一行放更多小节，不用横向滚动。 */
.sp-section .wrap{width:auto;max-width:none;padding-inline:20px}
.sp-section .sm-facts,
.sp-section .sm-gate{max-width:1120px;margin-inline:auto}
.sp .ctl-row{max-width:1120px;margin-inline:auto}

/* 演奏区铺满后，小节标题跟着内容列走，不要贴到屏幕左侧 */
.sp-section .wrap > h2{max-width:1120px;margin-inline:auto;margin-bottom:10px}

@media print{
  /* 纸面只要曲名，不要「乐谱」这个小节标题 */
  .sp-section .wrap > .sm-section-title{display:none!important}
}

/* 详情页：难度与练法 */
.sm-answer{max-width:720px;margin:6px 0 0}
.sm-tip-list{display:grid;gap:14px;max-width:820px;margin-top:18px}
.sm-tip{
  border:1px solid var(--line);border-radius:12px;
  background:var(--paper);padding:16px 18px;
}
.sm-tip h3{margin:0 0 6px;font-size:15px;font-weight:650;color:var(--ink)}
/* 单曲页独有的练习步骤 */
.sm-guide-steps-title{margin:26px 0 10px;font-size:15px;font-weight:650;color:var(--ink)}
.sm-guide-steps{max-width:820px;margin:0;padding-left:22px;color:var(--ink2)}
.sm-guide-steps li{font-size:13.5px;line-height:1.75;margin-bottom:8px}
.sm-tip p{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink2)}
@media (max-width:620px){
  .sm-tip{padding:14px 14px}
  .sm-tip p{font-size:13px}
}

/* 同难度其他曲子：横向列表，补内链 */
.sm-related{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.sm-related a{
  display:flex;align-items:baseline;gap:8px;
  padding:9px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);color:var(--ink);text-decoration:none;font-size:13.5px;
  transition:border-color .12s,transform .12s,box-shadow .12s;
}
.sm-related a:hover{transform:translateY(-1px);border-color:#c7d2fe;box-shadow:var(--shadow)}
.sm-related-meta{font-size:11.5px;color:var(--muted)}
.sm-related-all{display:inline-block;margin-top:14px;font-size:13px;font-weight:650}