:root {
  color-scheme: dark;
  --bg: #070b14;
  --panel: rgba(17, 24, 39, 0.9);
  --line: rgba(148, 163, 184, 0.19);
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #60a5fa;
  --accent-strong: #2563eb;
  --good: #10b981;
  --warn: #f59e0b;
  --bad: #ef4444;
  --missed: #94a3b8;
  --shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.2), transparent 34rem),
    radial-gradient(circle at 92% 24%, rgba(16, 185, 129, 0.1), transparent 30rem),
    var(--bg);
}
button, select, input { font: inherit; }
button, select, input[type="number"] { min-height: 44px; }

.app-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 0 max(42px, env(safe-area-inset-bottom));
}
.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 4px 28px;
}
.eyebrow, .section-kicker, .metric-label {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}
h1, h2, p { margin-top: 0; }
h1 {
  margin-bottom: 10px;
  font-size: clamp(2rem, 7vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.045em;
}
h2 { margin-bottom: 0; font-size: clamp(1.15rem, 3vw, 1.55rem); }
.lead { max-width: 760px; margin-bottom: 0; color: var(--muted); line-height: 1.75; }
.badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(15, 23, 42, .72);
  font-size: .78rem;
  font-weight: 700;
}
.badge.good { color: var(--good); border-color: rgba(16, 185, 129, .4); }
.badge.bad { color: #fb7185; border-color: rgba(251, 113, 133, .4); }
.panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.setup-panel, .transport-panel, .microphone-panel, .score-panel, .guide-panel, .debug-panel {
  padding: clamp(18px, 4vw, 28px);
  margin-bottom: 18px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.button-row { display: flex; gap: 10px; }
.button-row.wrap { flex-wrap: wrap; justify-content: flex-end; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 12px;
  color: var(--text);
  background: rgba(30, 41, 59, .9);
  font-weight: 760;
  cursor: pointer;
}
.button.primary { border-color: transparent; background: linear-gradient(135deg, var(--accent-strong), #3b82f6); }
.button.danger-quiet { color: #fecaca; border-color: rgba(239, 68, 68, .3); }
.button:disabled { opacity: .42; cursor: not-allowed; }
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.control-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, .7fr));
  gap: 14px;
}
.score-controls { grid-template-columns: minmax(220px, 1.3fr) minmax(180px, 1fr) minmax(160px, .7fr) minmax(170px, .8fr); }
.field { display: grid; gap: 8px; }
.field > span { color: var(--muted); font-size: .78rem; font-weight: 750; }
select, input[type="number"] {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
  color: var(--text);
  background: #0f172a;
  padding: 9px 11px;
}
.inline-input { display: flex; align-items: center; gap: 8px; }
.range-line { display: flex; align-items: center; min-height: 44px; gap: 10px; }
.range-line input { min-width: 0; width: 100%; }
.range-line output { min-width: 48px; color: var(--text); font-variant-numeric: tabular-nums; }
.summary {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #dbeafe;
  background: rgba(15, 23, 42, .66);
  line-height: 1.65;
}
.muted-summary { color: var(--muted); }
.status { margin: 14px 0 0; color: var(--muted); line-height: 1.55; }
.status.success { color: #6ee7b7; }
.status.error { color: #fda4af; }
.status.warning { color: #fcd34d; }
.notice { margin: 14px 0 0; color: #cbd5e1; font-size: .88rem; line-height: 1.65; }
.transport-grid { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: end; }
.seek-area { display: grid; gap: 8px; }
.seek-area input { width: 100%; }
.time-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.meter-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.note-card, .metric-card { min-height: 150px; padding: 20px; }
.note-name { font-size: clamp(3rem, 10vw, 5.5rem); font-weight: 900; line-height: .92; letter-spacing: -.05em; }
.metric-card p:nth-child(2) { margin: 12px 0 8px; font-size: clamp(1.7rem, 5vw, 2.7rem); }
.metric-card strong { font-variant-numeric: tabular-nums; }
.metric-card span { color: var(--muted); font-size: .9rem; }
.metric-sub { margin: 8px 0 0; color: var(--muted); font-size: .85rem; }
.level-track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, .18); }
.level-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--good)); transition: width .08s linear; }
.score-heading { align-items: flex-end; }
.result-counts { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.score-viewport {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 16px;
  background: #fff;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.score-stage {
  position: relative;
  min-width: 660px;
  min-height: 340px;
  background: #fff;
  color: #111827;
}
.osmd-container { position: relative; z-index: 1; width: 100%; padding: 12px 8px 24px; }
.osmd-container svg { display: block; max-width: none; }
.wrong-note-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.score-placeholder {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 30px;
  color: #475569;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
}
.score-placeholder[hidden] { display: none !important; }
.score-placeholder span { max-width: 580px; line-height: 1.65; font-size: .9rem; }
.wrong-note-marker {
  position: absolute;
  width: var(--note-width, 13px);
  height: var(--note-height, 9px);
  border-radius: 50%;
  background: var(--bad);
  border: 1px solid #991b1b;
  transform: translate(-50%, -50%) rotate(-13deg);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .17), 0 3px 8px rgba(127, 29, 29, .28);
}
.wrong-note-marker::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 48%;
  width: 2px;
  height: calc(var(--note-height, 9px) * 3.5);
  border-radius: 2px;
  background: #dc2626;
  transform: rotate(13deg);
  transform-origin: bottom center;
}
.wrong-note-marker.stem-down::after { right: auto; left: -1px; top: 48%; bottom: auto; transform-origin: top center; }
.wrong-note-marker .accidental {
  position: absolute;
  right: calc(100% + 3px);
  top: 50%;
  color: #dc2626;
  font-family: serif;
  font-size: calc(var(--note-height, 9px) * 2.2);
  font-weight: 800;
  line-height: 1;
  transform: translateY(-54%) rotate(13deg);
}
.wrong-note-marker .wrong-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  min-width: max-content;
  padding: 3px 6px;
  border-radius: 6px;
  color: #fff;
  background: rgba(185, 28, 28, .92);
  font: 700 10px/1.2 system-ui, sans-serif;
  transform: translateX(-50%) rotate(13deg);
}
.osmd-note-current {
  fill: #2563eb !important;
  stroke: #2563eb !important;
  filter: drop-shadow(0 0 3px rgba(37, 99, 235, .95)) drop-shadow(0 0 7px rgba(37, 99, 235, .72));
}
.osmd-note-upcoming {
  fill: #93c5fd !important;
  stroke: #60a5fa !important;
  filter: drop-shadow(0 0 3px rgba(96, 165, 250, .55));
}
.legend { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: 16px; color: var(--muted); font-size: .8rem; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-note { width: 14px; height: 9px; border-radius: 50%; transform: rotate(-12deg); background: currentColor; }
.legend-note.current { color: #2563eb; }
.legend-note.upcoming { color: #93c5fd; }
.legend-note.correct { color: var(--good); }
.legend-note.close { color: var(--warn); }
.legend-note.wrong { color: var(--bad); }
.legend-note.missed { color: var(--missed); }
.latest-result {
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 14px;
  color: #e2e8f0;
  background: rgba(15, 23, 42, .74);
  line-height: 1.6;
}
.latest-result strong { color: #fff; }
.empty-result { color: var(--muted); }
.result-good { border-color: rgba(16,185,129,.45); }
.result-close { border-color: rgba(245,158,11,.45); }
.result-wrong { border-color: rgba(239,68,68,.5); }
.guide-panel p { color: #cbd5e1; line-height: 1.75; }
.debug-panel summary { cursor: pointer; font-weight: 800; }
.debug-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.debug-grid div { padding: 10px 12px; border-radius: 10px; background: rgba(15,23,42,.72); }
.debug-grid dt { color: var(--muted); font-size: .7rem; }
.debug-grid dd { margin: 5px 0 0; word-break: break-word; }
.log-output { max-height: 240px; overflow: auto; padding: 14px; border-radius: 12px; color: #bfdbfe; background: #020617; font-size: .72rem; white-space: pre-wrap; }

@media (max-width: 860px) {
  .score-controls, .control-grid { grid-template-columns: 1fr 1fr; }
  .meter-grid { grid-template-columns: 1fr 1fr; }
  .transport-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .app-shell { width: min(100% - 18px, 1180px); }
  .hero { display: block; }
  .hero .badge { display: inline-block; margin-top: 16px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .button-row, .button-row.wrap { width: 100%; }
  .button-row .button, .button-row .file-button { flex: 1; }
  .score-controls, .control-grid, .meter-grid { grid-template-columns: 1fr; }
  .note-card, .metric-card { min-height: 126px; }
  .time-row { font-size: .7rem; }
  .score-stage { min-width: 620px; }
  .result-counts { align-self: flex-start; }
  .debug-grid { grid-template-columns: 1fr 1fr; }
}

/* v0.4: score-side transport, countdown and progress cursor */
.score-transport {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 30;
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 16px;
  background: rgba(7, 11, 20, .94);
  box-shadow: 0 12px 34px rgba(2, 6, 23, .42);
  backdrop-filter: blur(14px);
}
.score-transport-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.score-button-row { flex-wrap: wrap; }
.score-transport-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.compact-option {
  display: grid;
  grid-template-columns: auto minmax(88px, auto);
  align-items: center;
  gap: 7px;
}
.compact-option > span,
.toggle-option > span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 750;
  white-space: nowrap;
}
.compact-option select {
  width: auto;
  min-height: 38px;
  padding: 6px 9px;
}
.toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 10px;
  background: rgba(15, 23, 42, .78);
}
.toggle-option input { width: 18px; height: 18px; accent-color: var(--accent-strong); }
.compact-seek { gap: 5px; }
.score-display-wrap { position: relative; }
.score-viewport {
  overflow: auto;
  max-height: min(72vh, 760px);
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  scrollbar-gutter: stable both-edges;
}
.score-viewport:focus-visible { outline: 3px solid rgba(96, 165, 250, .65); outline-offset: 3px; }
.score-stage { min-height: 420px; }
.progress-cursor {
  --cursor-height: 112px;
  position: absolute;
  z-index: 3;
  width: 3px;
  height: var(--cursor-height);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(37, 99, 235, .2), #2563eb 15%, #2563eb 85%, rgba(37, 99, 235, .2));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 12px rgba(37, 99, 235, .7);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: top .08s linear;
}
.progress-cursor[hidden] { display: none !important; }
.progress-cursor span {
  position: absolute;
  left: 50%;
  top: -10px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid #2563eb;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.85));
}
.countdown-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: #fff;
  background: rgba(15, 23, 42, .56);
  backdrop-filter: blur(2px);
  border-radius: 16px;
  pointer-events: none;
}
.countdown-overlay[hidden] { display: none !important; }
.countdown-overlay strong {
  font-size: clamp(5rem, 22vw, 11rem);
  line-height: .86;
  letter-spacing: -.05em;
  text-shadow: 0 7px 30px rgba(0,0,0,.5), 0 0 24px rgba(96,165,250,.7);
}
.countdown-overlay span {
  font-weight: 800;
  letter-spacing: .04em;
}
.score-scroll-hint {
  margin: 9px 2px 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .score-transport-main { align-items: stretch; flex-direction: column; }
  .score-transport-options { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .score-transport {
    top: max(4px, env(safe-area-inset-top));
    padding: 9px;
    border-radius: 14px;
  }
  .score-button-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; width: 100%; gap: 7px; }
  .score-button-row .button { min-width: 0; padding: 8px 7px; font-size: .78rem; }
  .score-button-row .danger-quiet { grid-column: 1 / -1; min-height: 36px; }
  .score-transport-options { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .compact-option { grid-template-columns: auto 1fr; }
  .compact-option select { width: 100%; }
  .toggle-option { grid-column: 1 / -1; justify-content: center; }
  .score-viewport { max-height: 64vh; }
  .progress-cursor { --cursor-height: 96px; }
}

/* v0.4.2: 進行は音符色で表示し、音符切り替え時だけ滑らかに追従 */
.progress-cursor { display: none !important; }
.score-viewport { scroll-behavior: auto; }

/* v0.5: 練習中は楽譜を変更せず、終了後に結果をオーバーレイ表示 */
.button.finish {
  color: #d1fae5;
  border-color: rgba(16, 185, 129, .42);
  background: rgba(5, 150, 105, .22);
}

.current-note-marker {
  position: absolute;
  z-index: 3;
  min-width: 28px;
  min-height: 28px;
  border: 3px solid #2563eb;
  border-radius: 999px;
  background: rgba(59, 130, 246, .10);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .88), 0 0 13px rgba(37, 99, 235, .48);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left .08s linear, top .08s linear, width .08s linear, height .08s linear;
}
.current-note-marker.upcoming {
  border-style: dashed;
  border-color: #60a5fa;
  background: rgba(147, 197, 253, .10);
  box-shadow: 0 0 0 3px rgba(255,255,255,.82);
}
.current-note-marker[hidden] { display: none !important; }

.result-note-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.result-marker {
  --pitch-shift: 0px;
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #111827;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.result-marker::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.result-marker:focus-visible::before {
  outline: 3px solid rgba(37, 99, 235, .62);
  outline-offset: 2px;
}
.result-status-badge {
  position: absolute;
  left: 50%;
  top: 15px;
  display: grid;
  place-items: center;
  min-width: 13px;
  min-height: 13px;
  padding: 2px 4px;
  border-radius: 999px;
  color: #fff;
  font: 800 9px/1 system-ui, sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.93), 0 2px 5px rgba(15,23,42,.26);
  pointer-events: none;
}
.result-correct .result-status-badge {
  width: 11px;
  min-width: 11px;
  height: 11px;
  min-height: 11px;
  padding: 0;
  background: var(--good);
}
.result-close .result-status-badge { background: var(--warn); }
.result-missed .result-status-badge {
  min-width: 17px;
  min-height: 17px;
  padding: 0;
  color: #475569;
  background: #cbd5e1;
  font-size: 13px;
}
.result-wrong-head {
  position: absolute;
  left: 50%;
  top: var(--pitch-shift);
  width: var(--head-width, 13px);
  height: var(--head-height, 9px);
  border: 1px solid #991b1b;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 0 3px rgba(239,68,68,.17), 0 2px 7px rgba(127,29,29,.3);
  transform: translate(-50%, -50%) rotate(-13deg);
  pointer-events: none;
}
.result-wrong-head::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 48%;
  width: 2px;
  height: calc(var(--head-height, 9px) * 3.5);
  border-radius: 2px;
  background: #dc2626;
  transform: rotate(13deg);
  transform-origin: bottom center;
}
.result-marker.stem-down .result-wrong-head::after {
  right: auto;
  left: -1px;
  top: 48%;
  bottom: auto;
  transform-origin: top center;
}
.result-accidental {
  position: absolute;
  right: calc(100% + 3px);
  top: 50%;
  color: #dc2626;
  font-family: serif;
  font-size: calc(var(--head-height, 9px) * 2.2);
  font-weight: 800;
  line-height: 1;
  transform: translateY(-54%) rotate(13deg);
}
.result-pitch-label {
  position: absolute;
  left: 50%;
  top: calc(var(--pitch-shift) + 12px);
  min-width: max-content;
  padding: 3px 6px;
  border-radius: 6px;
  color: #fff;
  background: rgba(185, 28, 28, .94);
  font: 800 10px/1.15 system-ui, sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 2px 5px rgba(127,29,29,.25);
  pointer-events: none;
}
.result-rhythm-label {
  position: absolute;
  left: 50%;
  top: 31px;
  min-width: max-content;
  padding: 2px 5px;
  border-radius: 5px;
  color: #1e3a8a;
  background: rgba(219,234,254,.96);
  border: 1px solid rgba(37,99,235,.28);
  font: 800 9px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
.result-wrong .result-rhythm-label { top: 23px; }

.result-mode-label {
  margin-top: 16px;
  padding: 10px 13px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(15,23,42,.5);
  font-size: .8rem;
  line-height: 1.55;
}
.result-mode-label.judging {
  color: #bfdbfe;
  border-color: rgba(96,165,250,.32);
}
.result-mode-label.shown {
  color: #a7f3d0;
  border-color: rgba(16,185,129,.32);
}

.legend-current-box {
  width: 18px;
  height: 18px;
  border: 2px solid #2563eb;
  border-radius: 50%;
  background: rgba(59,130,246,.12);
}
.legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}
.legend-dot.correct { background: var(--good); }
.legend-dot.close { background: var(--warn); }
.legend-wrong-note {
  position: relative;
  width: 14px;
  height: 9px;
  border-radius: 50%;
  background: var(--bad);
  transform: rotate(-13deg);
}
.legend-wrong-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 2px;
  height: 22px;
  background: var(--bad);
}
.legend-cross {
  color: var(--missed);
  font-size: 18px;
  font-weight: 900;
}
.legend-cross::before { content: "×"; }
.legend-rhythm { color: #93c5fd; font-style: normal; font-weight: 900; }

@media (max-width: 600px) {
  .score-button-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .score-button-row .danger-quiet { grid-column: 1 / -1; }
  .result-pitch-label { font-size: 9px; }
  .result-rhythm-label { font-size: 8px; }
}

/* v0.6: realtime karaoke view + read-only score view */
.workspace-panel {
  padding: clamp(14px, 3vw, 24px);
  margin-bottom: 18px;
}
.workspace-heading { margin-bottom: 14px; }
.view-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 15px;
  background: rgba(2, 6, 23, .55);
}
.view-tab {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
  cursor: pointer;
}
.view-tab.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(37, 99, 235, .96), rgba(59, 130, 246, .88));
  box-shadow: 0 7px 20px rgba(37, 99, 235, .24);
}
.tab-view[hidden] { display: none !important; }
.tab-view.active { display: block; }
.hidden-control { display: none !important; }

.karaoke-display-wrap {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, .25);
  border-radius: 18px;
  background: #07101f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.karaoke-canvas {
  display: block;
  width: 100%;
  height: 360px;
  touch-action: none;
}
.karaoke-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: #cbd5e1;
  text-align: center;
  background: radial-gradient(circle at center, rgba(30, 64, 175, .14), transparent 62%);
  pointer-events: none;
}
.karaoke-placeholder[hidden] { display: none !important; }
.karaoke-placeholder span { color: var(--muted); font-size: .86rem; }
.karaoke-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 11px 2px 16px;
  color: var(--muted);
  font-size: .78rem;
}
.karaoke-legend span { display: inline-flex; align-items: center; gap: 7px; }
.karaoke-swatch { display: inline-block; width: 24px; height: 8px; border-radius: 999px; }
.karaoke-swatch.target { background: #60a5fa; box-shadow: 0 0 8px rgba(96,165,250,.45); }
.karaoke-swatch.voice { height: 6px; background: #34d399; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 0 8px rgba(52,211,153,.55); }
.karaoke-line.silence { display: inline-block; width: 25px; height: 0; border-top: 3px dashed #94a3b8; }
.karaoke-line.now { display: inline-block; width: 3px; height: 18px; border-radius: 3px; background: #f8fafc; }
#practiceView .meter-grid { margin: 0; }
#practiceView .note-card,
#practiceView .metric-card {
  background: rgba(15,23,42,.72);
  box-shadow: none;
}
#practiceView .score-transport {
  position: sticky;
  top: max(5px, env(safe-area-inset-top));
}
.score-view-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 2px 12px;
}
.score-view-heading h3 { margin: 0 0 5px; }
.score-view-heading p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
#scoreView .score-viewport { max-height: min(74vh, 820px); }
#scoreView .current-note-marker { display: none !important; }

.results-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}
.empty-results { margin: 0; padding: 18px; color: var(--muted); text-align: center; border: 1px dashed rgba(148,163,184,.24); border-radius: 13px; }
.result-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 13px;
  color: var(--text);
  text-align: left;
  background: rgba(15,23,42,.68);
  cursor: pointer;
}
.result-row:hover { border-color: rgba(96,165,250,.42); }
.result-row-status {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
}
.result-row.correct .result-row-status { background: var(--good); }
.result-row.close .result-row-status { background: var(--warn); }
.result-row.wrong .result-row-status { background: var(--bad); }
.result-row.missed .result-row-status { color: #334155; background: #cbd5e1; }
.result-row-main { min-width: 0; }
.result-row-main strong { display: block; margin-bottom: 3px; }
.result-row-main span { display: block; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.result-row-value { color: #dbeafe; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-legend { margin-top: 18px; }

@media (max-width: 700px) {
  .workspace-panel { padding: 10px; border-radius: 17px; }
  .workspace-heading { padding: 5px 4px 0; }
  .karaoke-display-wrap { min-height: 300px; border-radius: 14px; }
  .karaoke-canvas { height: 300px; }
  #practiceView .meter-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  #practiceView .note-card,
  #practiceView .metric-card { min-height: 112px; padding: 14px; border-radius: 15px; }
  #practiceView .note-name { font-size: 3.4rem; }
  .result-row { grid-template-columns: auto minmax(0, 1fr); }
  .result-row-value { grid-column: 2; }
}

@media (max-width: 430px) {
  .karaoke-display-wrap { min-height: 270px; }
  .karaoke-canvas { height: 270px; }
  #practiceView .meter-grid { grid-template-columns: 1fr 1fr; }
  #practiceView .metric-card p:nth-child(2) { font-size: 1.65rem; }
  .score-button-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep inactive tabs measurable so the score renderer can map notes off-screen. */
.workspace-panel { position: relative; }
.tab-view:not(.active) {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 90px;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

/* v0.7: measure guides, scrollable result timeline and practice sound modes */
.karaoke-display-wrap.review-mode {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(96, 165, 250, .65) rgba(15, 23, 42, .65);
}
.karaoke-display-wrap.review-mode .karaoke-canvas {
  max-width: none;
  touch-action: pan-x;
}
.review-scroll-hint {
  margin: 9px 3px 4px;
  padding: 9px 12px;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 10px;
  color: #bfdbfe;
  background: rgba(30, 64, 175, .16);
  font-size: .78rem;
  line-height: 1.55;
}
.review-scroll-hint[hidden] { display: none !important; }
.karaoke-line.measure {
  display: inline-block;
  width: 2px;
  height: 18px;
  border-left: 2px dashed rgba(226, 232, 240, .72);
}
.accompaniment-file-option {
  grid-template-columns: auto minmax(130px, 190px);
}
.accompaniment-file-option input[type="file"] {
  width: 100%;
  min-height: 38px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(15, 23, 42, .78);
  font-size: .7rem;
}
.accompaniment-file-option input[type="file"]::file-selector-button {
  margin-right: 7px;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  color: #eff6ff;
  background: rgba(37, 99, 235, .82);
  font-weight: 800;
}
.inline-offset {
  display: grid;
  grid-template-columns: minmax(72px, 92px) auto;
  align-items: center;
  gap: 5px;
}
.inline-offset input {
  width: 100%;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 9px;
  color: var(--text);
  background: rgba(15, 23, 42, .78);
  font-variant-numeric: tabular-nums;
}
.inline-offset span { color: var(--muted); font-size: .72rem; }
#scoreView .result-note-overlay,
#scoreView .current-note-marker { display: none !important; }

@media (max-width: 700px) {
  .accompaniment-file-option,
  .accompaniment-offset-option { grid-column: 1 / -1; }
  .accompaniment-file-option { grid-template-columns: auto minmax(0, 1fr); }
  .sound-mode-option { grid-column: 1 / -1; }
}