:root {
  color-scheme: light;
  --paper: #f8f5ef;
  --card: #fffdf9;
  --ink: #1f1b16;
  --muted: #6b6358;
  --line: #e3dccf;
  --rh: #1f5fbf;
  --rh-soft: #e4eefb;
  --lh: #c9560f;
  --lh-soft: #fcebdd;
  --warn: #8a5a00;
  --warn-soft: #fdf3d7;
  --warn-line: #ecd694;
  --danger: #a32a1f;
  --accent: #1f1b16;
  --radius: 10px;
  --serif: "Palatino Linotype", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3 { font-family: var(--serif); line-height: 1.2; margin: 0; font-weight: 700; }
p { margin: 0; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--rh); outline-offset: 2px; }

/* ---------- Thanh trên cùng ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--card);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0;
  font: 700 20px var(--serif);
}
.brand-keys { display: inline-flex; gap: 2px; }
.brand-keys i { width: 7px; height: 20px; background: var(--ink); border-radius: 0 0 2px 2px; }
.brand-keys i:nth-child(2) { height: 13px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); align-items: center; }
.legend[hidden] { display: none; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.swatch-rh { background: var(--rh); }
.swatch-lh { background: var(--lh); }

main { max-width: 1320px; margin: 0 auto; padding: 28px 24px 60px; }
body.has-player main { padding-bottom: 340px; }

/* ---------- Menu chính ---------- */
.main-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.main-nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 15px; text-decoration: none; }
.main-nav a:hover { color: var(--ink); background: var(--paper); }
.main-nav a[aria-current="page"] { color: var(--ink); background: #efe9dc; }

.learn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 22px; }
.learn-card { display: grid; gap: 4px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--lh); border-radius: var(--radius); color: inherit; text-decoration: none; }
.learn-card + .learn-card { border-left-color: var(--rh); }
.learn-card:hover { border-color: var(--ink); }
.learn-card strong { font: 700 20px/1.25 var(--serif); }
.learn-card span { color: var(--muted); font-size: 14.5px; }

/* ---------- Trang học ---------- */
.learn-page { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.learn-head h1 { font-size: clamp(30px, 5vw, 42px); }
.learn-head .lead { margin-top: 8px; font-size: 17px; color: var(--muted); max-width: 66ch; }
.learn-section { scroll-margin-top: 12px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; }

.chip { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 3px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-root { min-width: 42px; }

.chord-picker { display: grid; gap: 10px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.picker-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.picker-label { color: var(--muted); font-size: 14px; font-weight: 600; }

.chord-hero { display: grid; gap: 16px; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.chord-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.chord-symbol { font: 700 46px/1.1 var(--serif); }
.chord-fullname { color: var(--muted); font-size: 17px; }
.tone-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.tone-list li { display: grid; padding: 9px 12px; background: var(--paper); border-radius: 8px; line-height: 1.35; }
.tone-list b { font-size: 18px; }
.tone-list small { color: var(--muted); font-size: 13px; }
.tone-list span { font-size: 13.5px; margin-top: 3px; }
.tone-list em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.chord-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 20px; }
.chord-facts dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.chord-facts dd { margin: 2px 0 0; font-size: 15px; }

.hand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.hand-card { display: grid; gap: 12px; align-content: start; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--rh); border-radius: var(--radius); min-width: 0; }
.hand-card.lh { border-top-color: var(--lh); }
.hand-card header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.hand-card h3 { font-size: 21px; }
.hand-detail { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.finger-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-weight: 600; font-size: 15px; }
.finger-list li { display: flex; align-items: center; gap: 7px; }
.finger-list small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.finger-badge { width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--rh); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.finger-badge.lh { background: var(--lh); }
.hand-staff { flex: 0 1 170px; }
.hand-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.inversion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.inversion-card { display: grid; gap: 8px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); justify-items: start; min-width: 0; }
.inversion-card h4 { margin: 0; font-size: 16px; }
.inversion-card header { display: grid; }
.inversion-card .keyboard { width: 100%; }

.table-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.chord-table, .duration-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.chord-table th, .chord-table td, .duration-table th, .duration-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.chord-table thead th, .duration-table thead th { color: var(--muted); font-size: 13px; }
.table-group th { background: var(--paper); font-size: 13px; color: var(--muted); }
.chord-table a { font-weight: 700; color: var(--ink); }
.chord-table tr.current { background: #f3ecdd; }
.formula-cell { color: var(--muted); font-variant-numeric: tabular-nums; }
.duration-table tbody th { font-weight: 600; }
.duration-table td { vertical-align: middle; }
.duration-table .staff { width: 76px; display: block; }
.beat-count { font-weight: 600; }

/* ---------- Khuông nhạc ---------- */
.staff { display: block; width: 100%; height: auto; }
.staff-line, .staff-ledger { stroke: #5d554a; stroke-width: 1; }
.staff-bar { stroke: #1f1b16; stroke-width: 1.6; }
.staff-ink { fill: var(--ink); }
.staff-stem { stroke: var(--ink); stroke-width: 1.1; fill: none; }
.staff-label { fill: var(--muted); font-size: 12.5px; font-weight: 600; }
.note-rh { fill: var(--rh); }
.note-lh { fill: var(--lh); }
.staff-clickable { cursor: pointer; }
.staff-clickable:hover path, .staff-clickable:focus-visible path { opacity: 0.6; }
.staff-clickable:focus { outline: none; }
.staff-clickable.selected path { fill: var(--ink); }
.staff-clickable.selected .staff-ledger { stroke: var(--ink); stroke-width: 1.6; }
.staff-scroll { overflow-x: auto; }
.staff-scroll > .staff { margin: 0; }

.note-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 10px 0; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
.note-info strong { font: 700 24px var(--serif); }
.note-info-code { color: var(--muted); font-weight: 600; }
.map-keys { overflow-x: auto; }
.map-keys .keyboard { min-width: 600px; }

.clef-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.clef-card, .labelled-staff { min-width: 0; }
.clef-card { display: grid; gap: 10px; align-content: start; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.clef-card header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.clef-card h3 { font-size: 22px; }
.labelled-staff h4 { margin: 4px 0; font-size: 14.5px; font-weight: 600; }
.clef-grid > .labelled-staff { padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

.accidental-grid, .tip-grid, .time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.accidental-card, .tip-card, .time-card { padding: 13px 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14.5px; min-width: 0; }
.accidental-card { display: grid; gap: 8px; justify-items: start; align-content: start; }
.accidental-card h3 { font-size: 19px; }
.accidental-body { display: flex; align-items: center; gap: 12px; width: 100%; }
.accidental-body .staff { flex: 0 1 136px; min-width: 0; }
.accidental-body .keyboard { flex: 1 1 0; min-width: 0; }
.tip-grid { margin-top: 12px; }
.tip-card h3 { font: 700 15px "Segoe UI", system-ui, sans-serif; margin-bottom: 2px; }
.time-card { display: flex; gap: 14px; align-items: center; }
.time-digits { display: grid; justify-items: center; font: 700 28px/1 var(--serif); }
.time-digits span + span { border-top: 2px solid var(--ink); padding-top: 3px; margin-top: 3px; }

.time-links { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-weight: 600; }
.time-links a { color: var(--ink); }
.time-all { margin-top: 12px; color: inherit; text-decoration: none; }
.learn-card.learn-card-style { border-left-color: var(--ink); }

.style-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.style-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.style-head h2 { font-size: 32px; }
.style-meter { font-weight: 700; }
.variation-row .chip { white-space: normal; text-align: left; }
.style-steps { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.style-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.progression-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.style-now-row { font-weight: 700; min-height: 1.5em; }
.style-grid-slot { min-height: 96px; }
.lane-empty { display: flex; align-items: center; }
.lanes-wide { min-width: 720px; }
.style-keys { overflow-x: auto; }
.style-keys .keyboard { min-width: 620px; max-height: 150px; margin: 0 auto; }
.style-tips { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; display: grid; gap: 3px; }
.style-note { max-width: 75ch; }

.key-view { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.key-staves { flex: 0 1 240px; display: grid; gap: 2px; min-width: 0; }
.key-detail { flex: 1 1 260px; display: grid; gap: 2px; }
.key-detail strong { font: 700 22px var(--serif); }
.key-detail p { margin-top: 6px; font-size: 14.5px; color: var(--muted); }

.quiz-box { display: grid; gap: 10px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); justify-items: center; }
.quiz-top { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.quiz-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.quiz-staff { width: min(100%, 260px); }
.quiz-feedback { min-height: 1.6em; text-align: center; font-weight: 600; }
.quiz-feedback.good { color: #24703d; }
.quiz-feedback.bad { color: var(--danger); }
.quiz-answers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.quiz-answers .btn { min-width: 62px; }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 7px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  font-weight: 600; font-size: 15px; white-space: nowrap;
}
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #3a332a; }
.btn-small { min-height: 32px; padding: 3px 11px; font-size: 14px; }
.btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Trang đầu ---------- */
.home { max-width: 760px; margin: 28px auto 0; }
.home h1 { font-size: clamp(30px, 5vw, 44px); }
.home .lead { margin-top: 12px; font-size: 18px; color: var(--muted); }
.dropzone {
  margin-top: 28px; padding: 44px 24px; border: 2px dashed #bdb2a0; border-radius: 14px;
  background: var(--card); text-align: center; cursor: pointer; display: block; width: 100%;
}
.dropzone:hover, .dropzone.dragging { border-color: var(--ink); background: #fff; }
.dropzone strong { display: block; font: 700 22px var(--serif); }
.dropzone small { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.home-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.home-row .label { color: var(--muted); font-size: 15px; margin-right: 4px; }
.notice { margin-top: 20px; padding: 12px 16px; border-radius: var(--radius); background: var(--warn-soft); border: 1px solid var(--warn-line); color: #5c3d00; font-size: 15px; }
.notice code { background: #fff7; padding: 1px 5px; border-radius: 4px; }
.notice-error { background: #fbe9e6; border-color: #eebfb8; color: var(--danger); }
.tips { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--muted); font-size: 15px; }
.tips li::before { content: "♪ "; }

.muted { color: var(--muted); font-size: 14.5px; }
.account { position: relative; margin-left: auto; display: flex; align-items: center; font-size: 14px; }
.account-button { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); }
.account-button:hover, .account-button[aria-expanded="true"] { border-color: var(--ink); }
.account-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-caret { color: var(--muted); font-size: 12px; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--line); }
.avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; }
.avatar-large { width: 48px; height: 48px; }
.avatar-large.avatar-initial { font-size: 20px; }
.account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 15; width: min(320px, calc(100vw - 32px)); background: var(--card); border: 1px solid #cfc6b6; border-radius: var(--radius); box-shadow: 0 10px 30px #1f1b1626; overflow: hidden; }
.account-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.account-id { display: grid; min-width: 0; line-height: 1.35; }
.account-id strong { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-id span { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-usage { display: grid; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.usage-text { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.usage-text span { color: var(--muted); }
.usage-text b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-bar { height: 5px; margin-top: 4px; border-radius: 99px; background: #eee8dc; overflow: hidden; }
.usage-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ink); }
.usage-bar.full i { background: var(--danger); }
.account-joined { font-size: 13px; }
.account-actions { display: grid; padding: 6px; }
.account-item { padding: 8px 10px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 14.5px; }
.account-item:hover, .account-item:focus-visible { background: var(--paper); }
.toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 20; max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 8px; font-size: 15px; }
.login-box { margin-top: 22px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.login-box > div:first-child { flex: 1 1 280px; }
.login-box p { color: var(--muted); font-size: 14.5px; }
.login-box .notice { margin-top: 0; }
.song-head + .login-box { margin-top: 16px; }

.home-wide { max-width: 980px; }
.create-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.text-input { flex: 1 1 280px; min-height: 42px; padding: 7px 12px; border: 1px solid #bdb2a0; border-radius: 8px; background: #fff; }
.song-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 22px; }
.song-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.song-card:hover { border-color: var(--ink); }
.song-card-name { font: 700 19px/1.25 var(--serif); overflow-wrap: anywhere; }
.song-status { font-size: 13px; font-weight: 600; color: var(--warn); }
.song-status.done { color: #24703d; }
.link-back { border: 0; background: none; padding: 0; margin-bottom: 10px; color: var(--muted); font-size: 14.5px; font-weight: 600; }
.link-back:hover { color: var(--ink); }
.read-box { margin-top: 18px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: var(--radius); display: grid; gap: 10px; justify-items: start; }
.read-box-warn { background: var(--warn-soft); border-color: var(--warn-line); border-left-color: var(--warn); }
.file-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.file-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.file-thumb { flex: none; width: 56px; height: 72px; object-fit: cover; object-position: top; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.file-thumb-pdf { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--danger); }
.file-name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.file-actions { display: flex; gap: 6px; }
.btn:disabled { opacity: 0.4; cursor: default; border-color: var(--line); }

.loading { max-width: 560px; margin: 70px auto; text-align: center; }
.loading h2 { font-size: 26px; }
.loading p { color: var(--muted); margin: 10px 0 20px; }
.spinner-keys { display: inline-flex; gap: 4px; height: 50px; margin-bottom: 18px; align-items: flex-start; }
.spinner-keys i { width: 16px; height: 44px; background: #fff; border: 1px solid #aaa094; border-radius: 0 0 4px 4px; animation: press 1.4s infinite ease-in-out; }
.spinner-keys i:nth-child(2) { animation-delay: .15s; }
.spinner-keys i:nth-child(3) { animation-delay: .3s; }
.spinner-keys i:nth-child(4) { animation-delay: .45s; }
.spinner-keys i:nth-child(5) { animation-delay: .6s; }
@keyframes press { 0%, 60%, 100% { transform: none; background: #fff; } 25% { transform: translateY(5px); background: var(--rh-soft); } }
@media (prefers-reduced-motion: reduce) { .spinner-keys i { animation: none; } }

/* ---------- Kết quả ---------- */
.result { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.result.with-sheet { grid-template-columns: minmax(0, 1fr) minmax(300px, 34%); }
.result-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; min-width: 0; }
.sheet-panel { position: sticky; top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sheet-panel header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
.sheet-pages { max-height: calc(100vh - 340px); min-height: 200px; overflow: auto; background: #fff; }
.sheet-pages img { display: block; width: 100%; }
.sheet-pages iframe { display: block; width: 100%; height: 70vh; border: 0; }

.song-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.song-head h1 { font-size: clamp(28px, 4vw, 38px); }
.song-head .composer { color: var(--muted); margin-top: 4px; }
.song-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 18px; }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px; }
.fact-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.fact-value { font: 700 23px/1.25 var(--serif); margin-top: 2px; }
.fact-note { color: var(--muted); font-size: 14px; margin-top: 3px; line-height: 1.4; }
.confidence { display: inline-block; font-size: 12px; font-weight: 600; padding: 0 7px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); }

.section-title { font-size: 25px; margin-bottom: 4px; }
.section-note { color: var(--muted); margin-bottom: 14px; max-width: 70ch; }

.warn-box { padding: 12px 16px; background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--radius); color: #5c3d00; }
.warn-box strong { display: block; }
.warn-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; counter-reset: step; }
.step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.step h3 { font: 700 16px/1.3 "Segoe UI", system-ui, sans-serif; }
.step h3::before { counter-increment: step; content: counter(step) ". "; }
.step p { color: var(--muted); font-size: 14.5px; flex: 1; }
.step .btn { align-self: flex-start; }

.progression { display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: center; margin-bottom: 16px; }
.prog-chord { display: inline-flex; flex-direction: column; align-items: center; min-width: 44px; padding: 3px 8px; border-radius: 7px; background: var(--card); border: 1px solid var(--line); }
.prog-chord b { font-size: 16px; }
.prog-chord small { color: var(--muted); font-size: 12px; }
.prog-arrow { color: #b4aa9a; font-size: 13px; }

.chord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.chord-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.chord-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chord-name { font: 700 26px var(--serif); }
.chord-type { color: var(--muted); font-size: 13.5px; }
.chord-notes { font-weight: 600; margin: 4px 0 8px; font-size: 15px; }
.chord-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-top: 8px; }

.keyboard { display: block; width: 100%; height: auto; }
.keyboard-mini { max-width: 100%; }
.key { stroke: #8d8476; stroke-width: 0.6; }
.key-white { fill: #fff; }
.key-black { fill: #26221d; }
.key-white.on-rh { fill: #bcd5f6; }
.key-white.on-lh { fill: #f8cfae; }
.key-black.on-rh { fill: #17427f; }
.key-black.on-lh { fill: #7f3709; }
.dot-rh { fill: var(--rh); stroke: #fff; stroke-width: 1; }
.dot-lh { fill: var(--lh); stroke: #fff; stroke-width: 1; }
.dot-label { fill: #fff; font: 700 11px "Segoe UI", system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.middle-c { fill: #a89e8f; }

.pattern-list { display: grid; gap: 10px; }
.pattern { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--lh); border-radius: var(--radius); padding: 11px 16px; }
.pattern b { font-size: 16px; }
.pattern span { color: var(--muted); font-size: 14px; margin-left: 6px; }
.pattern p { font-size: 15px; margin-top: 2px; }
.accomp-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* ---------- Từng ô nhịp ---------- */
.measures { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.measure { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 14px; scroll-margin: 16px 0 320px; }
.measure.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.measure.has-warning { border-color: var(--warn-line); }
.measure-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.measure-head h3 { font: 700 16px "Segoe UI", system-ui, sans-serif; margin-right: auto; }

.lanes-scroll { overflow: auto hidden; margin-top: 8px; }
.lanes { min-width: 520px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 5px 8px; align-items: stretch; }
.lane-label { font-size: 13px; font-weight: 600; color: var(--muted); align-self: center; line-height: 1.2; }
.lane-label.rh { color: var(--rh); }
.lane-label.lh { color: var(--lh); }
.lane { display: grid; gap: 3px 2px; min-height: 20px; }
.count { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.count.main { color: var(--ink); }
.chord-tag { display: flex; align-items: baseline; gap: 6px; padding: 2px 8px; background: #f0ebe1; border-radius: 6px; font-weight: 700; min-width: 0; overflow: hidden; white-space: nowrap; }
.chord-tag small { font-weight: 500; color: var(--muted); font-size: 12px; }
.note-chip { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 3px 5px; border-radius: 6px; min-width: 0; overflow: hidden; font-size: 14px; line-height: 1.25; }
.note-chip.rh { background: var(--rh-soft); }
.note-chip.lh { background: var(--lh-soft); }
.note-chip.rest { background: none; border: 1px dashed var(--line); color: var(--muted); font-size: 12px; }
.note-chip.tied { opacity: 0.7; border-style: dotted; }
.note-line { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; }
.note-line small { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.finger { flex: none; width: 17px; height: 17px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; }
.rh .finger { background: var(--rh); }
.lh .finger { background: var(--lh); }

.how { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.how-text { flex: 1 1 260px; font-size: 15px; }
.how-text b { color: var(--lh); }
.how-seq { display: block; color: var(--muted); font-size: 14px; }
.how-boards { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 1 auto; }
.how-board { flex: none; max-width: 100%; }
.how-board small { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.marks { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.marks b { color: var(--ink); }
.measure-warn { margin-top: 8px; padding: 6px 10px; background: var(--warn-soft); border-radius: 6px; color: #5c3d00; font-size: 14px; }

.edit-box { margin-top: 10px; padding: 12px; background: var(--paper); border-radius: 8px; display: grid; gap: 8px; }
.edit-box label { display: grid; gap: 2px; font-size: 13.5px; font-weight: 600; }
.edit-box input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: 14px Consolas, "Courier New", monospace; width: 100%; }
.edit-help { color: var(--muted); font-size: 13.5px; }
.edit-error { color: var(--danger); font-size: 14px; font-weight: 600; }
.edit-actions { display: flex; gap: 8px; }

/* ---------- Trình phát ---------- */
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--card); border-top: 1px solid #cfc6b6; box-shadow: 0 -6px 18px #1f1b1614; }
.player-controls { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 8px 16px; }
.play-btn { min-width: 112px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: none; min-height: 38px; padding: 4px 12px; font-size: 14px; font-weight: 600; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.speed { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.speed input { width: 110px; accent-color: var(--ink); }
.speed output { min-width: 66px; font-variant-numeric: tabular-nums; color: var(--muted); }
.now { margin-left: auto; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.player-keys { padding: 6px 16px 16px; overflow-x: auto; }
/* Chiều cao theo màn hình: đủ dễ nhìn nhưng vẫn chừa chỗ cho phần ô nhịp phía trên. */
.player-keys .keyboard { min-width: 760px; max-height: clamp(120px, 21vh, 180px); margin: 0 auto; }

@media (max-width: 1050px) {
  .result.with-sheet { grid-template-columns: minmax(0, 1fr); }
  .sheet-panel { position: static; order: -1; }
  .sheet-pages { max-height: 46vh; }
}
@media (max-width: 640px) {
  main { padding: 18px 16px 300px; }
  .topbar { padding: 8px 16px; gap: 8px 16px; }
  .legend .legend-note { display: none; }
  .picker-row, .progression-row { grid-template-columns: minmax(0, 1fr); }
  .style-panel { padding: 14px; }
  .hand-grid, .clef-grid, .accidental-grid { grid-template-columns: minmax(0, 1fr); }
  .main-nav a { padding: 5px 8px; font-size: 14px; }
  .chord-symbol { font-size: 38px; }
  body.has-player main { padding-bottom: 300px; }
  .account-button { padding: 3px; }
  .account-button .account-name, .account-caret { display: none; }
  .now { display: none; }
  .player-controls { padding: 6px 10px; gap: 6px; }
  .play-btn { min-width: 0; padding: 4px 12px; font-size: 14px; min-height: 36px; }
  .seg button { min-height: 36px; padding: 2px 8px; font-size: 13px; }
  .speed input { width: 80px; }
  .player-controls .btn-small { padding: 2px 8px; font-size: 13px; }
  .player-keys { padding: 4px 10px 10px; }
  .player-keys .keyboard { min-width: 620px; max-height: 88px; }
}