/* =========================================================
   ピアノ上達タブ
   ========================================================= */
#pianoMain .pi-top{ display:grid; grid-template-columns:150px 150px 1fr; gap:10px; margin-bottom:12px; }
#pianoMain .pi-stat{ border:1px solid var(--line); border-radius:12px; padding:12px 16px; background:var(--surface); }
#pianoMain .pi-stat-label{ font-size:12.5px; color:var(--sub); margin-bottom:2px; }
#pianoMain .pi-stat-val{ font-size:24px; font-weight:700; line-height:1.3; }
#pianoMain .pi-stat-val small{ font-size:13px; font-weight:400; color:var(--sub); }
#pianoMain .pi-week{ display:flex; gap:6px; align-items:flex-end; height:52px; margin-top:4px; }
#pianoMain .pi-week-day{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; }
#pianoMain .pi-week-day span{ font-size:11px; color:var(--sub); }
#pianoMain .pi-week-bar{ flex:1; width:100%; max-width:26px; display:flex; align-items:flex-end; background:var(--surface-2); border-radius:4px; overflow:hidden; }
#pianoMain .pi-week-bar i{ display:block; width:100%; background:var(--accent); }

#pianoMain .pi-midi{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 14px; border:1px solid var(--line); border-radius:10px; margin-bottom:12px; font-size:13px; }
#pianoMain .pi-midi-label{ font-weight:600; }
#pianoMain .pi-midi-status{ color:var(--sub); flex:1 1 140px; }

#pianoMain .pi-filters{ margin:18px 0 4px; }
#pianoMain .pi-unit-desc{ margin:0 0 10px; color:var(--sub); font-size:13.5px; }
#pianoMain .pi-lessons{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
#pianoMain .pi-lesson{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px; border:0; background:none; text-align:left; color:var(--text); }
#pianoMain .pi-lesson + .pi-lesson{ border-top:1px solid var(--line); }
#pianoMain button.pi-lesson:hover{ background:var(--hover); }
#pianoMain .pi-lesson.planned{ color:var(--faint); }
#pianoMain .pi-lesson-main{ flex:1; min-width:0; }
#pianoMain .pi-lesson-title{ font-weight:600; font-size:15px; }
#pianoMain .pi-lesson-meta{ font-size:12.5px; color:var(--sub); margin-top:1px; }
#pianoMain .pi-lesson.planned .pi-lesson-meta{ color:var(--faint); }
#pianoMain .pi-lesson-aim{ font-size:13px; color:var(--sub); margin-top:3px; }
#pianoMain .pi-badge{ flex:none; font-size:12px; padding:2px 10px; border-radius:11px; border:1px solid var(--line2); color:var(--sub); }
#pianoMain .pi-badge.ok{ border-color:var(--ok); color:var(--ok); background:var(--ok-bg); }

/* レッスン */
#pianoMain .pi-crumb{ font-size:12.5px; color:var(--sub); margin-bottom:4px; }
#pianoMain .pi-lesson-head h2{ margin:0 0 8px; }
#pianoMain .pi-aim{ margin:0 0 10px; font-size:14.5px; }
#pianoMain .pi-aim b{ display:inline-block; margin-right:10px; font-size:12.5px; font-weight:600; color:var(--accent); }
#pianoMain .pi-theory{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 12px; }
#pianoMain .pi-theory-label{ font-size:12.5px; color:var(--sub); }
#pianoMain .pi-view-opts{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:0 0 12px; font-size:13px; }
#pianoMain .pi-view-opts label{ display:inline-flex; gap:6px; align-items:center; }
#pianoMain .pi-view-today{ margin-left:auto; color:var(--sub); }
#pianoMain .pi-article{ margin-bottom:6px; }
#pianoMain .pi-h{ font-size:17px; margin:28px 0 10px; }
#pianoMain .pi-step h4{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--text); margin:0 0 6px; }
#pianoMain .pi-step-no{ display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; font-size:12px; font-weight:600; border:1px solid var(--line2); color:var(--sub); }

/* 練習プレーヤー */
#pianoMain .pi-player{ margin-top:12px; border-top:1px solid var(--line); padding-top:12px; }
#pianoMain .pi-main-btns{ margin-top:0; }
#pianoMain .pi-play{ min-width:84px; }
#pianoMain .pi-count{ min-width:1.4em; font-size:22px; font-weight:700; color:var(--accent); }
#pianoMain .pi-row{ display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap; margin-top:10px; }
#pianoMain .pi-lab{ flex:none; width:5.6em; font-size:12.5px; color:var(--sub); }
#pianoMain .pi-bpm{ display:inline-flex; align-items:center; gap:6px; }
#pianoMain .pi-bpm-val{ min-width:4.4em; text-align:center; font-size:14px; font-variant-numeric:tabular-nums; }
#pianoMain .pi-opt{ display:inline-flex; gap:6px; align-items:center; font-size:13px; }
#pianoMain .pi-loop-range{ font-size:13px; }
#pianoMain .pi-loop-range select{ font-size:13px; padding:3px 6px; border:1px solid var(--line2); border-radius:6px; background:var(--surface); color:var(--text); }
#pianoMain .pi-hint{ font-size:12px; }
#pianoMain .pi-score{ margin-top:12px; overflow-x:auto; overflow-y:hidden; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:4px 0; }
#pianoMain .pi-score svg{ display:block; max-width:none; }
#pianoMain .pi-score .score-finger{ fill:var(--sub); font-size:11px; font-weight:600; font-family:var(--font); }
#pianoMain .pi-score .notehead-group.playing .score-finger{ fill:var(--accent); }
#pianoMain .pi-score .notehead-group.slip .notehead, #pianoMain .pi-score .notehead-group.slip .accidental, #pianoMain .pi-score .notehead-group.slip .flag-glyph{ fill:var(--ng); }
#pianoMain .pi-score .notehead-group.slip .stem{ stroke:var(--ng); }
#pianoMain .pi-score .notehead-group.slip .score-finger{ fill:var(--ng); }
#pianoMain .pi-score .notehead-group.expect .notehead, #pianoMain .pi-score .notehead-group.expect .accidental, #pianoMain .pi-score .notehead-group.expect .flag-glyph{ fill:var(--accent); }
#pianoMain .pi-score .notehead-group.expect .stem{ stroke:var(--accent); }
#pianoMain .pi-score .notehead-group.expect .score-finger{ fill:var(--accent); }

#pianoMain .pi-kb{ margin-top:10px; }
#pianoMain .pk{ display:block; width:100%; height:auto; margin:0 auto; touch-action:none; }
#pianoMain .pk-white{ fill:#f6f6f4; stroke:#8a8a8a; stroke-width:1; }
#pianoMain .pk-black{ fill:#26262a; stroke:#26262a; }
#pianoMain .pk-label{ fill:#8a8a8a; font-size:10px; font-family:var(--font); }
#pianoMain .pk-key.play, #pianoMain .pk-key.on{ fill:var(--accent); stroke:var(--accent); }
#pianoMain .pk-white.hint{ fill:#cfe0fb; stroke:var(--accent); stroke-width:2; }
#pianoMain .pk-black.hint{ fill:var(--accent); stroke:var(--accent); }
#pianoMain .pk-key.wrong{ fill:var(--ng); stroke:var(--ng); }

#pianoMain .pi-foot{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px; font-size:13px; }
#pianoMain .pi-best{ color:var(--sub); }
#pianoMain .pi-wait-msg{ color:var(--sub); flex:1 1 200px; }

/* 確認 */
#pianoMain .pi-check-list{ display:grid; gap:8px; margin:10px 0; }
#pianoMain .pi-check{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; }
#pianoMain .pi-check input{ margin-top:4px; }
#pianoMain .pi-check-state{ font-size:13px; color:var(--sub); }
#pianoMain .pi-nav{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:24px 0 10px; }

#pianoMain.pi-hide-finger .score-finger{ display:none; }
#pianoMain.pi-hide-kb .pi-kb{ display:none; }

@media (max-width:760px){
  #pianoMain .pi-top{ grid-template-columns:1fr 1fr; }
  #pianoMain .pi-stat-wide{ grid-column:1 / -1; }
  #pianoMain .pi-lab{ width:100%; }
  #pianoMain .pi-view-today{ margin-left:0; width:100%; }
  #pianoMain .pi-nav .btn{ width:100%; white-space:normal; height:auto; min-height:34px; padding:6px 14px; }
}

/* テンポ判定 */
#pianoMain [hidden]{ display:none !important; }
#pianoMain .pi-jrow .pi-off{ display:inline-flex; align-items:center; gap:6px; font-size:13px; }
#pianoMain .pi-off-val{ min-width:4.4em; text-align:center; font-variant-numeric:tabular-nums; }
#pianoMain .pi-score .notehead-group.res-good .notehead, #pianoMain .pi-score .notehead-group.res-good .accidental, #pianoMain .pi-score .notehead-group.res-good .flag-glyph{ fill:var(--ok); }
#pianoMain .pi-score .notehead-group.res-good .stem{ stroke:var(--ok); }
#pianoMain .pi-score .notehead-group.res-fair .notehead, #pianoMain .pi-score .notehead-group.res-fair .accidental, #pianoMain .pi-score .notehead-group.res-fair .flag-glyph{ fill:var(--accent); }
#pianoMain .pi-score .notehead-group.res-fair .stem{ stroke:var(--accent); }
#pianoMain .pi-score .notehead-group.res-bad .notehead, #pianoMain .pi-score .notehead-group.res-bad .accidental, #pianoMain .pi-score .notehead-group.res-bad .flag-glyph{ fill:var(--ng); }
#pianoMain .pi-score .notehead-group.res-bad .stem{ stroke:var(--ng); }
#pianoMain .pi-score .notehead-group.res-miss .notehead, #pianoMain .pi-score .notehead-group.res-miss .accidental, #pianoMain .pi-score .notehead-group.res-miss .flag-glyph{ fill:var(--ng); opacity:.35; }
#pianoMain .pi-score .notehead-group.res-miss .stem{ stroke:var(--ng); opacity:.35; }
#pianoMain .pi-score .score-res-tag{ fill:var(--accent); font-size:10px; font-weight:700; font-family:var(--font); }
#pianoMain .pi-score .score-res-tag.bad{ fill:var(--ng); }

#pianoMain .pi-result{ margin-top:12px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:14px; }
#pianoMain .pi-res-head{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:10px; }
#pianoMain .pi-res-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:10px; }
#pianoMain .pi-res-stat{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--surface-2); }
#pianoMain .pi-res-stat span{ display:block; font-size:12px; color:var(--sub); }
#pianoMain .pi-res-stat b{ font-size:18px; font-variant-numeric:tabular-nums; }
#pianoMain .pi-res-verdict{ margin:0 0 6px; font-weight:600; }
#pianoMain .pi-res-verdict.ok{ color:var(--ok); }
#pianoMain .pi-res-sub{ margin:4px 0; font-size:13px; }
#pianoMain .pi-res-issues{ margin:8px 0 4px; padding-left:1.2em; list-style:disc; font-size:13px; }
#pianoMain .pi-res-issues li{ margin:2px 0; }
#pianoMain .pi-res-issues li.bad{ color:var(--ng); }
#pianoMain .pi-res-legend{ margin:8px 0 0; font-size:12px; }
@media (max-width:760px){
  #pianoMain .pi-res-stats{ grid-template-columns:1fr 1fr; }
}

/* 今日のメニュー */
#pianoMain .pi-menu{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:14px 16px; margin-bottom:12px; }
#pianoMain .pi-menu-head{ display:flex; gap:12px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; margin-bottom:8px; }
#pianoMain .pi-menu-title{ font-weight:700; font-size:16px; }
#pianoMain .pi-menu-sub{ font-size:12.5px; color:var(--sub); margin-top:1px; }
#pianoMain .pi-menu-mins{ display:flex; gap:6px; flex-wrap:wrap; }
#pianoMain .pi-menu-list{ list-style:none; margin:0 0 10px; padding:0; border-top:1px solid var(--line); }
#pianoMain .pi-menu-list li + li{ border-top:1px solid var(--line); }
#pianoMain .pi-menu-row{ display:flex; align-items:center; gap:12px; width:100%; padding:9px 4px; border:0; background:none; color:var(--text); text-align:left; }
#pianoMain .pi-menu-row:hover{ background:var(--hover); }
#pianoMain .pi-menu-kind{ flex:none; width:7.5em; font-size:12px; color:var(--accent); font-weight:600; }
#pianoMain .pi-menu-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
#pianoMain .pi-menu-main b{ font-size:14.5px; font-weight:600; }
#pianoMain .pi-menu-main small{ font-size:12px; color:var(--sub); }
#pianoMain .pi-menu-min{ flex:none; font-size:12.5px; color:var(--sub); }
#pianoMain .pi-menu-state{ flex:none; min-width:3.6em; text-align:right; font-size:12.5px; color:var(--accent); }
#pianoMain .pi-menu-list li.done .pi-menu-state{ color:var(--ok); }
#pianoMain .pi-menu-list li.done .pi-menu-main b{ color:var(--sub); font-weight:500; }
#pianoMain .pi-menu-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#pianoMain .pi-menu-fin{ font-size:13.5px; color:var(--ok); }
#pianoMain .pi-menubar{ position:sticky; top:0; z-index:5; display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 12px; margin:0 0 12px; border:1px solid var(--accent); border-radius:10px; background:var(--surface); font-size:13px; }
#pianoMain .pi-menubar-no{ font-weight:700; color:var(--accent); }
#pianoMain .pi-menubar-main{ flex:1 1 160px; color:var(--sub); }
#pianoMain .pi-menubar-main b{ color:var(--text); font-weight:600; }
@media (max-width:760px){
  #pianoMain .pi-menu-kind{ width:5.5em; }
  #pianoMain .pi-menu-min{ display:none; }
}

/* ---- 週の目標・レベル診断 ---- */
#pianoMain .pi-goal, #pianoMain .pi-diag-card, #pianoMain .pi-sight-card, #pianoMain .pi-weak{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:14px 16px; margin-bottom:12px; }
#pianoMain .pi-goal-head{ display:flex; gap:12px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; margin-bottom:10px; }
#pianoMain .pi-goal-set{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#pianoMain .pi-goal-lab{ font-size:12.5px; color:var(--sub); }
#pianoMain .pi-goal-days{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
#pianoMain .pi-goal-day{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:var(--sub); }
#pianoMain .pi-goal-day i{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line2); box-sizing:border-box; }
#pianoMain .pi-goal-day.done i{ background:var(--accent); border-color:var(--accent); }
#pianoMain .pi-goal-day.today i{ border-color:var(--accent); }
#pianoMain .pi-goal-day.today span{ color:var(--text); font-weight:700; }
#pianoMain .pi-goal-day.future i{ border-style:dashed; opacity:.55; }
#pianoMain .pi-diag-card, #pianoMain .pi-sight-card{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
#pianoMain .pi-diag-main, #pianoMain .pi-sight-main{ flex:1 1 260px; min-width:0; }
#pianoMain .pi-diag-main .chip-row{ margin-top:8px; }
#pianoMain .pi-diag-link{ margin:-4px 0 12px; font-size:13px; }
#pianoMain .pi-diag-form{ display:flex; flex-direction:column; gap:12px; }
#pianoMain .pi-diag-q{ border:0; border-top:1px solid var(--line); margin:0; padding:10px 0 0; display:flex; gap:6px 18px; flex-wrap:wrap; align-items:center; }
#pianoMain .pi-diag-q legend{ float:left; width:100%; padding:0; margin-bottom:6px; font-weight:600; font-size:14.5px; display:flex; gap:8px; align-items:flex-start; }
#pianoMain .pi-diag-q legend .pi-step-no{ flex:none; }
#pianoMain .pi-diag-picks{ list-style:none; margin:8px 0; padding:0; border-top:1px solid var(--line); }
#pianoMain .pi-diag-picks li + li{ border-top:1px solid var(--line); }

/* ---- 苦手な小節 ---- */
#pianoMain .pi-weak-head{ margin-bottom:8px; }
#pianoMain .pi-weak-title{ font-weight:700; font-size:16px; }
#pianoMain .pi-weak-sub{ font-size:12.5px; color:var(--sub); margin-top:1px; }
#pianoMain .pi-weak-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
#pianoMain .pi-weak-list li + li{ border-top:1px solid var(--line); }
#pianoMain .pi-weak-row{ display:flex; align-items:center; gap:12px; width:100%; padding:9px 4px; border:0; background:none; color:var(--text); text-align:left; cursor:pointer; font:inherit; }
#pianoMain .pi-weak-row:hover{ background:var(--hover); }
#pianoMain .pi-weak-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
#pianoMain .pi-weak-main b{ font-size:14.5px; font-weight:600; }
#pianoMain .pi-weak-main small{ font-size:12px; color:var(--sub); }
#pianoMain .pi-weak-pct{ flex:none; font-size:12.5px; color:var(--ng); font-variant-numeric:tabular-nums; }
#pianoMain .pi-weak-go{ flex:none; font-size:12.5px; color:var(--accent); }
#pianoMain .pi-res-weak{ margin:8px 0; padding-top:6px; border-top:1px solid var(--line); }

/* ---- 初見練習 ---- */
#pianoMain .pi-sight-levels{ margin-bottom:12px; }
#pianoMain .pi-sight-meta{ margin:0 0 6px; font-size:12.5px; }
#pianoMain .pi-sight-act{ align-items:center; margin-top:10px; }
#pianoMain .pi-sight-prog{ font-size:12.5px; }

/* ---- 演奏の重ね表示 ---- */
#pianoMain .pi-roll{ margin-top:10px; border-top:1px solid var(--line); padding-top:8px; }
#pianoMain .pi-roll-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
#pianoMain .pi-roll-svg{ display:block; max-width:none; }
#pianoMain .pr-beat{ stroke:var(--line); stroke-width:.5; }
#pianoMain .pr-bar{ stroke:var(--line2); stroke-width:1; }
#pianoMain .pr-barno, #pianoMain .pr-clab{ fill:var(--sub); font-size:10px; }
#pianoMain .pr-c{ stroke:var(--line2); stroke-width:.6; stroke-dasharray:2 3; }
#pianoMain .pr-exp{ fill:none; stroke:var(--sub); stroke-width:1; }
#pianoMain .pr-p, #pianoMain .pr-v{ fill:var(--accent); }
#pianoMain .pr-p.g-good, #pianoMain .pr-v.g-good{ fill:var(--ok); }
#pianoMain .pr-p.g-fair, #pianoMain .pr-v.g-fair{ fill:var(--accent); }
#pianoMain .pr-p.g-bad, #pianoMain .pr-v.g-bad, #pianoMain .pr-p.g-extra, #pianoMain .pr-v.g-extra{ fill:var(--ng); }
#pianoMain .pr-p{ opacity:.85; }
#pianoMain .pr-head{ stroke:var(--accent); stroke-width:1.5; }
@media (max-width:760px){
  #pianoMain .pi-goal-set{ width:100%; }
  #pianoMain .pi-weak-go{ display:none; }
}