:root {
  --bg: #f6f5f2;
  --panel: #ffffff;
  --ink: #1f2328;
  --muted: #6b6f76;
  --line: #e2e0da;
  --primary: #2f5d8a;
  --primary-ink: #ffffff;
  --accent: #d6336c;      /* pink progress line / current note */
  --sel: #1c7ed6;
  --ok: #2b8a3e;
  --warn: #b35c00;
  --err: #c92a2a;
  --radius: 8px;
  font-family: "Malgun Gothic", "맑은 고딕", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; }
#app { height: 100%; display: flex; flex-direction: column; }
.boot, .fatal { margin: auto; padding: 40px; text-align: center; color: var(--muted); }
button { font: inherit; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.warn { color: var(--warn); }
.err, .error { color: var(--err); }
.grow { flex: 1 1 auto; }
.row { display: flex; align-items: center; }
.row.gap { gap: 8px; }
.row.tight { gap: 4px; }
.row.wrap { flex-wrap: wrap; }
.center { align-items: center; }
.path { font-family: Consolas, monospace; font-size: 12px; color: var(--muted); word-break: break-all; }
.empty { color: var(--muted); padding: 24px; text-align: center; }
kbd { font-family: Consolas, monospace; background: #eee; border: 1px solid #ccc; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 12px; }

/* ---------- buttons & inputs */
.btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 6px; padding: 6px 12px; cursor: pointer; line-height: 1.3; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: #b9b5ab; background: #faf9f6; }
.btn:focus-visible, .tab:focus-visible, .page-card:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover:not(:disabled) { background: #264d73; }
.btn.danger { color: var(--err); border-color: #f0c4c4; }
.btn.danger.primary, .modal .btn.danger { background: var(--err); color: #fff; border-color: var(--err); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.sm { padding: 3px 9px; font-size: 13px; }
.btn.lg { padding: 10px 18px; font-size: 15px; }
.btn.icon { padding: 4px 9px; min-width: 32px; }
.btn.on { background: #e7f0fa; border-color: var(--sel); color: #0b4f91; }
.link { background: none; border: none; color: var(--primary); cursor: pointer; text-decoration: underline; padding: 0 4px; }
.sel, input[type=text], input[type=number], input[type=search] { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: #fff; font: inherit; }
.num { width: 64px; }
.num.bpm { width: 64px; font-size: 16px; font-weight: 700; text-align: center; }
.full { width: 100%; }
.check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.slider { display: inline-flex; align-items: center; gap: 6px; }
.slider input[type=range] { width: 120px; }
.slider output { min-width: 44px; font-variant-numeric: tabular-nums; }
.lbl { color: var(--muted); font-size: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.seg-group { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg-btn { border: none; background: #fff; padding: 4px 10px; cursor: pointer; border-right: 1px solid var(--line); }
.seg-btn:last-child { border-right: none; }
.seg-btn.on { background: var(--primary); color: #fff; }
.seg-btn:disabled { opacity: .4; cursor: default; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; cursor: pointer; }
.chip.warn { border-color: #f2c38f; color: var(--warn); background: #fff8ef; }
.badge { font-size: 11px; border-radius: 999px; padding: 1px 8px; background: #eee; color: #444; white-space: nowrap; }
.st-pending { background: #eceae4; }
.st-run { background: #e3efff; color: #0b4f91; }
.st-ok { background: #e3f4e6; color: var(--ok); }
.st-fail { background: #fde8e8; color: var(--err); }
.rv-needs_review, .rv-unreviewed { background: #fff2dc; color: var(--warn); }
.rv-reviewed { background: #e3f4e6; color: var(--ok); }

/* ---------- top bar */
.topbar { display: flex; align-items: center; gap: 16px; padding: 6px 14px; background: #fff; border-bottom: 1px solid var(--line); flex: 0 0 auto; min-height: 48px; flex-wrap: wrap; }
.brand { font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.logo { color: var(--accent); font-size: 18px; }
.tabs { display: flex; gap: 2px; }
.tab { border: none; background: transparent; padding: 8px 12px; border-radius: 6px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.tab.active { background: #eef3f8; color: var(--primary); font-weight: 700; }
.tab:disabled { opacity: .35; cursor: default; }
.proj { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; }
.proj-title { border: none; background: none; font-weight: 700; font-size: 15px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.proj-file { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-state { font-size: 12px; color: var(--ok); white-space: nowrap; }
.save-state.dirty { color: var(--warn); }
.actions { display: flex; gap: 6px; align-items: center; }
.job-chip { border: 1px solid #b8d4f2; background: #e7f0fa; color: #0b4f91; border-radius: 999px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
.banners { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0; }
.banner { padding: 6px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
.banner.info { background: #f1f6fb; }
.banner.warn { background: #fff6e8; color: #7a4200; }
.banner.error { background: #fdeeee; color: var(--err); }
.banners .link { align-self: flex-end; font-size: 12px; margin: 2px 10px; }
main { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ---------- library */
.library { max-width: 980px; margin: 0 auto; padding: 24px; }
.lib-hero { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; }
.lib-hero h1 { margin: 0 0 6px; }
.lib-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 8px; }
.lib-head h2 { margin: 0; font-size: 16px; }
.search { width: 260px; }
.recent-list { display: flex; flex-direction: column; gap: 6px; }
.recent-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.recent-item.missing { opacity: .6; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.card h3 { margin: 0 0 8px; font-size: 15px; }
.card.recovery { border-color: #f2c38f; background: #fffaf2; }
.card.recovery .recent-item { margin-top: 6px; }

.library { max-width: 1240px; }
.lib-modes { margin: 4px 0 10px; }
.lib-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
.lib-card { display: flex; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.lib-card.current { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel); }
.lib-card.missing { opacity: .6; }
.lib-thumb { flex: 0 0 96px; height: 128px; background: #f2f1ed; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lib-thumb .xml-thumb { font-size: 34px; color: #bbb; }
.lib-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lib-title { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stars { color: #f59f00; letter-spacing: 1px; font-size: 13px; }
.badge.src { background: #e7f5ff; color: #1864ab; }
.badge.web { background: #e6f4ea; color: #1e6b3a; }
.star-input { display: inline-flex; align-items: center; gap: 2px; }
.star-input .star { border: none; background: none; font-size: 24px; color: #ddd; cursor: pointer; padding: 0 2px; line-height: 1; }
.star-input .star.on { color: #f59f00; }
.meta-form { display: flex; flex-direction: column; gap: 10px; white-space: normal; }
.meta-form textarea { font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; resize: vertical; }
.src-box { background: #f7f6f2; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.batchbox { background: #f4f8fd; border: 1px solid #c9dcf2; border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.batch-items { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 180px; overflow: auto; }
.b-stage { display: inline-block; min-width: 72px; font-weight: 700; }
.batch-item.st-완료 .b-stage { color: var(--ok); }
.batch-item.st-실패 .b-stage { color: var(--err); }
.batch-item.st-인식\ 중 .b-stage, .batch-item.st-가져오는\ 중 .b-stage { color: #1c7ed6; }
.card.notice { background: #fff9db; border-color: #ffe066; }
.cat-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cat-row { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.import-list { white-space: normal; display: flex; flex-direction: column; gap: 10px; }
.import-list .tbl input[type=text] { padding: 3px 6px; }

/* ---------- pages */
.pages-view { padding: 14px 18px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.phase { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; flex-wrap: wrap; }
.phase-chip { font-weight: 700; border-radius: 999px; padding: 2px 10px; background: #eee; }
.ph-running { background: #e3efff; color: #0b4f91; }
.ph-partial, .ph-review, .ph-failed { background: #fff2dc; color: var(--warn); }
.ph-playable { background: #e3f4e6; color: var(--ok); }
.jobbox { background: #f4f8fd; border: 1px solid #c9dcf2; border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; }
.countbar { display: flex; gap: 3px; margin-top: 8px; }
.countbar .seg { flex: 1; height: 8px; border-radius: 2px; background: #dfe4ea; }
.seg-done { background: var(--ok) !important; }
.seg-failed { background: var(--err) !important; }
.seg-recognizing, .seg-preprocessing { background: #74a9e6 !important; animation: pulse 1.2s infinite; }
.seg-cancelled, .seg-skipped { background: #bbb !important; }
@keyframes pulse { 50% { opacity: .45; } }
.selbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 34px; padding: 4px 0; }
.hint { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.page-card { background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: 6px; user-select: none; }
.page-card.selected { border-color: var(--sel); background: #f3f8fe; }
.page-card.drop-before { box-shadow: -5px 0 0 var(--accent); }
.page-card.drop-after { box-shadow: 5px 0 0 var(--accent); }
.card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pno { font-weight: 700; font-size: 16px; min-width: 22px; }
.thumb { height: 200px; display: flex; align-items: center; justify-content: center; background: #f2f1ed; border-radius: 6px; overflow: hidden; }
.thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.xml-thumb { color: var(--muted); font-weight: 700; }
.fname { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.failbox { background: #fff5f5; border: 1px solid #f3c7c7; border-radius: 6px; padding: 6px 8px; cursor: default; }
.failbox ul { margin: 4px 0; padding-left: 18px; }
.notes { color: var(--warn); }
.log { max-height: 160px; overflow: auto; background: #222; color: #ddd; padding: 6px; font-size: 11px; white-space: pre-wrap; }
.dropzone { grid-column: 1 / -1; border: 2px dashed #c8c3b8; border-radius: 12px; padding: 60px 20px; text-align: center; cursor: pointer; background: #fff; }
.dropzone .big { font-size: 17px; margin-bottom: 6px; }
body.dropping::after { content: '여기에 놓으면 사진을 추가합니다'; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #0b4f91; background: rgba(231, 240, 250, .85); border: 4px dashed var(--sel); pointer-events: none; z-index: 50; }

/* ---------- review */
.review-view { display: flex; flex-direction: column; height: 100%; padding: 8px 12px; gap: 6px; }
.review-head { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.review-notes { flex: 0 0 auto; font-size: 13px; }
.notes-list { margin: 4px 0; padding-left: 18px; color: var(--warn); }
.split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; }
.split.mode-image { grid-template-columns: 1fr; }
.split.mode-image .score-pane { display: none; }
.split.mode-score { grid-template-columns: 1fr; }
.split.mode-score .img-pane { display: none; }
.split.narrow.mode-split { grid-template-columns: 1fr; }
.split.narrow.mode-split .img-pane { display: none; }
.split.narrow.mode-split::before { content: '창이 좁아 새 악보만 표시합니다. 위의 보기 방식에서 원본 사진으로 전환하세요.'; font-size: 12px; color: var(--muted); }
.pane { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.img-tools { padding: 8px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.img-scroll { flex: 1; overflow: auto; background: #e9e7e2; display: flex; justify-content: center; align-items: flex-start; padding: 8px; }
.img-wrap { position: relative; display: inline-block; }
.img-wrap img { max-width: 100%; display: block; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.img-wrap.cropping { cursor: crosshair; touch-action: none; }
.img-scroll.fit { overflow: hidden; align-items: center; }
.img-scroll.fit .img-wrap { height: 100%; display: flex; align-items: center; justify-content: center; }
.img-scroll.fit .img-wrap img { max-height: 100%; max-width: 100%; object-fit: contain; }
.apply-state { min-width: 70px; }
/* full-window crop editor */
.crop-modal { position: fixed; inset: 0; z-index: 120; background: #1e1f22; display: flex; flex-direction: column; }
.crop-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.crop-area { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 28px; }
.crop-stage { position: relative; display: inline-block; touch-action: none; cursor: crosshair; max-width: 100%; max-height: 100%; }
.crop-stage img { display: block; max-width: calc(100vw - 56px); max-height: calc(100vh - 120px); user-select: none; }
.crop-svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.crop-handle { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #f06595; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); cursor: grab; }
.crop-handle:active { cursor: grabbing; }
.crop-mag { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); background-repeat: no-repeat; pointer-events: none; }
.crop-mag::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border: 2px solid #f06595; border-radius: 50%; }
.ed-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ed-tab { border: none; background: transparent; padding: 5px 10px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--muted); }
.ed-tab.on { border-bottom-color: var(--primary); color: var(--primary); font-weight: 700; }
.btn.sym { font-family: "Times New Roman", serif; font-style: italic; font-weight: 700; min-width: 40px; }
.score-pane { position: relative; }
.score-status { flex: 0 0 auto; }
.score-msg { padding: 24px; color: var(--muted); }
.score-msg.error { color: var(--err); }
.score-scroll { flex: 1 1 auto; overflow: auto; position: relative; min-height: 120px; }
.edit-panel { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 8px 10px; background: #fbfaf8; display: flex; flex-direction: column; gap: 8px; max-height: 50%; overflow: auto; }
.ed-sec { display: flex; flex-direction: column; gap: 5px; }
.ed-title { font-weight: 700; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.val { min-width: 20px; text-align: center; font-weight: 700; }

/* ---------- score rendering */
.score-host { position: relative; }
.osmd-inner { position: relative; }
.score-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
.progress-line { position: absolute; left: 0; top: 0; width: 3px; margin-left: -1px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 6px rgba(214, 51, 108, .6); will-change: transform; }
.measure-sel { position: absolute; border: 2px solid rgba(28, 126, 214, .55); border-radius: 4px; background: rgba(28, 126, 214, .06); }
.measure-warn { position: absolute; border-bottom: 3px solid rgba(179, 92, 0, .7); background: rgba(255, 200, 120, .12); border-radius: 3px; }
.score-host .ev-ok path, .score-host .ev-ok rect, .score-host .ev-ok use { fill: #2b8a3e !important; stroke: #2b8a3e !important; }
.score-host .ev-off path, .score-host .ev-off rect, .score-host .ev-off use { fill: #e8590c !important; stroke: #e8590c !important; }
.score-host .ev-bad path, .score-host .ev-bad rect, .score-host .ev-bad use { fill: #e03131 !important; stroke: #e03131 !important; }
.range-box { position: absolute; background: rgba(28, 126, 214, .09); border-top: 3px solid rgba(28, 126, 214, .55); border-bottom: 3px solid rgba(28, 126, 214, .55); }
.score-host .cur path, .score-host .cur rect, .score-host .cur use { fill: var(--accent) !important; stroke: var(--accent) !important; }
.score-host .sel path, .score-host .sel rect, .score-host .sel use { fill: var(--sel) !important; stroke: var(--sel) !important; }
.score-host svg { cursor: pointer; }

/* ---------- practice */
.practice-view { display: flex; flex-direction: column; height: 100%; position: relative; }
.countin-big { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-size: 120px; font-weight: 800; line-height: 1; color: var(--accent); background: rgba(255, 255, 255, .88); border: 3px solid var(--accent); border-radius: 28px; padding: 18px 48px; pointer-events: none; box-shadow: 0 6px 30px rgba(0, 0, 0, .15); z-index: 6; }
.practice-bar { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.btn.play { min-width: 128px; font-size: 15px; font-weight: 700; }
.tools-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 6px; }
.tool-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 8px; background: #f7f6f2; border: 1px solid var(--line); border-radius: 8px; }
.tool-group .num { width: 58px; padding: 3px 6px; }
.tool-group .sel { padding: 3px 6px; }
.tool-group input[type=range] { width: 90px; }
/* recording & replay */
.rec-dot { color: #c92a2a; }
.rec-state { min-width: 0; color: var(--muted); }
.rec-state.on { color: #c92a2a; font-weight: 700; animation: pulse 1.2s infinite; }
.replay-seek { width: 140px; }
.mono { font-variant-numeric: tabular-nums; }
.tool-group .sel[aria-label='녹음 목록'] { max-width: 260px; }

/* microphone check */
.miccheck { display: flex; flex-direction: column; gap: 10px; white-space: normal; }
.mc-meter-row { display: flex; align-items: center; gap: 8px; }
.mc-meter { position: relative; flex: 1; height: 16px; background: #eceae4; border-radius: 8px; overflow: hidden; }
.mc-zone { position: absolute; left: 41.7%; width: 48.3%; top: 0; bottom: 0; background: rgba(43, 138, 62, .12); }
.mc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width 60ms linear; }
.mc-fill.low { background: #adb5bd; }
.mc-fill.good { background: #37b24d; }
.mc-fill.hot { background: #e03131; }
.mc-peak { position: absolute; top: 0; bottom: 0; width: 2px; background: #333; }
.mc-db { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.mc-tuner { text-align: center; padding: 10px; background: #f7f6f2; border-radius: 10px; }
.mc-note { font-size: 40px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.mc-scale { display: flex; align-items: center; gap: 8px; margin: 8px auto 2px; max-width: 420px; font-size: 11px; color: var(--muted); }
.mc-track { position: relative; flex: 1; height: 22px; background: linear-gradient(90deg, #ffe3e3, #fff4e6 30%, #d3f9d8 42%, #d3f9d8 58%, #fff4e6 70%, #ffe3e3); border-radius: 6px; }
.mc-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #2b8a3e; }
.mc-needle { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: #e8590c; border-radius: 2px; transition: left 80ms linear; }
.mc-needle.in { background: #2b8a3e; }
.mc-checks { list-style: none; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.mc-checks li::before { content: '○ '; color: var(--muted); }
.mc-checks li.ok { color: var(--ok); font-weight: 700; }
.mc-checks li.ok::before { content: '✓ '; color: var(--ok); }
.mc-advice .tip { padding: 6px 10px; border-radius: 6px; margin-top: 4px; }
.mc-advice .tip.warn { background: #fff4e6; color: #a34700; }
.mc-advice .tip.info { background: #e7f5ff; color: #1864ab; }
.mc-advice .tip.ok { background: #ebfbee; color: #2b8a3e; }
.eval-live { font-variant-numeric: tabular-nums; min-width: 260px; color: #0b4f91; }
.sep { width: 1px; height: 24px; background: var(--line); }
.bpm-box input[type=range] { width: 160px; }
.pos-label { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.beat-dots { display: inline-flex; gap: 4px; }
.beat-dots .dot { width: 12px; height: 12px; border-radius: 50%; background: #ddd; }
.beat-dots .dot.first { box-shadow: inset 0 0 0 2px #bbb; }
.beat-dots .dot.on { background: var(--accent); }
.beat-dots .dot.on.first { background: #a61e4d; }
.countin { font-weight: 700; color: var(--accent); }
.practice-info { flex: 0 0 auto; padding: 4px 14px; display: flex; flex-direction: column; gap: 4px; }
.practice-info .banner { border: 1px solid var(--line); border-radius: 6px; }
.practice-score { flex: 1 1 auto; background: #fff; margin: 0 12px 12px; border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- settings */
.settings-view { max-width: 860px; margin: 0 auto; padding: 20px; }
.tbl { border-collapse: collapse; width: 100%; }
.tbl td { padding: 4px 8px; border-bottom: 1px solid #f0eee9; vertical-align: top; }

/* ---------- modal & toast */
.modal-back { position: fixed; inset: 0; background: rgba(20, 20, 20, .35); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #fff; border-radius: 12px; padding: 18px 20px; width: min(480px, 92vw); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.modal.wide { width: min(720px, 94vw); }
.modal h2 { margin: 0 0 10px; font-size: 17px; }
.modal h3 { font-size: 14px; margin: 10px 0 4px; }
.modal-body { overflow: auto; white-space: pre-line; }
.modal-body ul { padding-left: 20px; margin: 4px 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: #2b2f33; color: #fff; padding: 10px 14px; border-radius: 8px; max-width: 420px; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); transition: opacity .3s; }
.toast.ok { background: #245c32; }
.toast.warn { background: #7a4200; }
.toast.out { opacity: 0; }

@media (max-width: 1240px) {
  .proj-file { display: none; }
  .brand { font-size: 0; }
  .brand .logo { font-size: 20px; }
  .tab { padding: 8px 9px; }
  .proj-title { max-width: 160px; }
}

/* ---------- print */
#print-area { position: fixed; left: -10000px; top: 0; width: 760px; background: #fff; }
.print-title { font-size: 20px; text-align: center; margin: 0 0 4px; }
.print-sub { text-align: center; font-size: 12px; color: #555; margin-bottom: 8px; }
@media print {
  @page { size: A4; margin: 12mm; }
  body.printing { overflow: visible; }
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing #print-area { position: static; width: auto; }
  body.printing .score-overlay { display: none; }
}

.tips { white-space: normal; }
.tips li { margin-bottom: 6px; }
.range-bar { padding: 4px 6px; background: #eef5fd; border: 1px solid #cfe2f7; border-radius: 6px; }
.nav-sec { border-top: 1px dashed var(--line); padding-top: 6px; }
.clef-warn { background: #fff4e6; border: 1px solid #ffd8a8; border-radius: 6px; padding: 4px 6px; }
.dir-chip { cursor: default; display: inline-flex; align-items: center; gap: 2px; }
.chip-x { border: none; background: transparent; color: var(--err); font-weight: 700; cursor: pointer; padding: 0 2px; margin-left: 2px; font-size: 14px; line-height: 1; }
.chip-x:hover { background: #ffe3e3; border-radius: 50%; }
.note-strip { padding: 2px 0; }
.note-chip { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 1px 6px; font-size: 12px; cursor: pointer; }
.note-chip.on { border-color: var(--sel); background: #e7f0fa; color: #0b4f91; font-weight: 700; }
.note-chip.ghost { border-color: #ffa94d; background: #fff4e6; }
.ok-len { color: var(--ok); }