/* Sonata v2 — one stylesheet. Tokens first, then layout, then components. */

:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --surface-3: #e6ebf2;
  --line: #dde3ec;
  --line-strong: #c6cfdc;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --accent: #4a72c4;
  --accent-strong: #36599f;
  --accent-soft: #eaf0fa;
  --accent-mid: #c9d7f0;
  --accent-ink: #ffffff;
  --chord: #3a5fa8;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --success: #15803d;
  --warning: #b45309;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(15, 23, 42, .06);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .22);
  --radius: 14px;
  --radius-sm: 10px;
  --ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --chart-size: 16px;
  --chart-line: 1.55;
  --top-h: 64px;
  --nav-h: 64px;
  --sw-blue: #4a72c4; --sw-teal: #3d8f88; --sw-violet: #7a64c4; --sw-rose: #c2607a; --sw-amber: #b9802f;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f17;
  --surface: #131a26;
  --surface-2: #1a2232;
  --surface-3: #232d40;
  --line: #263147;
  --line-strong: #34405a;
  --text: #e8edf6;
  --text-2: #c0cadb;
  --muted: #8a97ad;
  --accent: #7c9fdc;
  --accent-strong: #a3bde8;
  --accent-soft: rgba(124, 159, 220, .14);
  --accent-mid: rgba(124, 159, 220, .32);
  --accent-ink: #0b0f17;
  --chord: #a3bde8;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .14);
  --success: #4ade80;
  --warning: #fbbf24;
  --shadow-sm: none;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .02);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
}

html[data-accent="teal"] { --accent: #3d8f88; --accent-strong: #2c6f69; --accent-soft: #e6f3f1; --accent-mid: #c2e0dc; --chord: #2f7770; }
html[data-accent="violet"] { --accent: #7a64c4; --accent-strong: #5d4aa3; --accent-soft: #efebf9; --accent-mid: #d8cff0; --chord: #6150a8; }
html[data-accent="rose"] { --accent: #c2607a; --accent-strong: #9e4660; --accent-soft: #f9ecef; --accent-mid: #efcfd8; --chord: #a24c65; }
html[data-accent="amber"] { --accent: #b9802f; --accent-strong: #8f6122; --accent-soft: #f8f0e3; --accent-mid: #ecd9b8; --chord: #8f6122; }
html[data-theme="dark"][data-accent="teal"] { --accent: #6fbcb3; --accent-strong: #9dd3cc; --accent-soft: rgba(111, 188, 179, .14); --accent-mid: rgba(111, 188, 179, .3); --chord: #9dd3cc; }
html[data-theme="dark"][data-accent="violet"] { --accent: #a493dc; --accent-strong: #c3b7ea; --accent-soft: rgba(164, 147, 220, .14); --accent-mid: rgba(164, 147, 220, .3); --chord: #c3b7ea; }
html[data-theme="dark"][data-accent="rose"] { --accent: #d88a9d; --accent-strong: #e8b0bd; --accent-soft: rgba(216, 138, 157, .14); --accent-mid: rgba(216, 138, 157, .3); --chord: #e8b0bd; }
html[data-theme="dark"][data-accent="amber"] { --accent: #d2a660; --accent-strong: #e3c48f; --accent-soft: rgba(210, 166, 96, .14); --accent-mid: rgba(210, 166, 96, .3); --chord: #e3c48f; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 500 15px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
img, svg { display: block; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
.icon { width: 20px; height: 20px; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 700; }
.skip-link:focus { top: 8px; }
.boot-error { padding: 16px; background: var(--danger-soft); color: var(--danger); text-align: center; font-weight: 700; }

/* ---------- Buttons & controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-weight: 650; font-size: 14px; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn .icon, .btn [data-icon] .icon { width: 18px; height: 18px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn.small { min-height: 34px; padding: 0 10px; font-size: 13px; }
.btn.wide { width: 100%; }
label.btn { cursor: pointer; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-2);
  transition: background .15s, color .15s;
}
.icon-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.icon-btn.small { width: 32px; height: 32px; }
.icon-btn.small .icon { width: 17px; height: 17px; }
.icon-btn.big { width: 52px; height: 52px; border: 1px solid var(--line); background: var(--surface); }
.icon-btn.fav.on { color: #f59e0b; }
.input, .select {
  width: 100%; min-height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 500;
}
textarea.input { padding: 10px 12px; resize: vertical; line-height: 1.45; }
.input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.input.tiny { width: 70px; min-height: 34px; padding: 0 8px; text-align: center; }
.range { width: 100%; accent-color: var(--accent); height: 28px; }
.segmented {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 12px; background: var(--surface-3);
}
.segmented button {
  min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font-weight: 650; font-size: 13.5px; white-space: nowrap;
}
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .segmented button.active { background: var(--surface-2); }
.segmented.full { display: flex; width: 100%; }
.segmented.full button { flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text-2); font-size: 13.5px; font-weight: 600;
}
button.chip:hover { border-color: var(--accent); color: var(--accent-strong); }
.chip code { font-family: var(--mono); font-size: 12px; color: var(--chord); }
.chip.static { min-height: 28px; padding: 0 10px; font-size: 13px; }
.chip.key { color: var(--accent-strong); background: var(--accent-soft); border-color: transparent; font-weight: 700; }
.chip.key small { font-weight: 700; opacity: .8; }
.chip.muted { color: var(--muted); }
.chord-chip { font-family: var(--mono); font-weight: 700; color: var(--chord); }
.chord-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.switch input, .toggle { accent-color: var(--accent); width: 18px; height: 18px; }
.key-badge {
  display: inline-grid; place-items: center; flex: none;
  min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-strong);
  font: 800 14px/1 var(--mono);
}
.key-badge.small { min-width: 30px; height: 26px; font-size: 12px; border-radius: 7px; }

/* ---------- Shell ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  height: var(--top-h); padding: 0 20px; padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.wordmark { font-weight: 800; font-size: 19px; letter-spacing: -.03em; }
.tabs { justify-self: center; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-3); }
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font-weight: 650; font-size: 14px;
}
.tab .icon { width: 18px; height: 18px; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .tab.active { background: var(--surface-2); }
.top-actions { display: flex; align-items: center; gap: 6px; }
.present-btn.btn.primary { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); box-shadow: none; }
.present-btn.btn.primary:hover { background: var(--accent-mid); border-color: transparent; }
.account-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 12px 0 6px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-weight: 650; font-size: 13.5px; color: var(--text-2);
}
.account-btn:hover { border-color: var(--line-strong); }
.account-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); overflow: hidden; }
.account-avatar .icon { width: 17px; height: 17px; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-btn[data-status="synced"] .account-label { color: var(--success); }
.account-btn[data-status="expired"] .account-label, .account-btn[data-status="error"] .account-label { color: var(--warning); }
.sync-dot { position: absolute; left: 26px; top: 6px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--surface); background: var(--muted); }
.sync-dot[data-status="syncing"], .sync-dot[data-status="connecting"] { background: var(--accent); animation: pulse 1s infinite; }
.sync-dot[data-status="expired"], .sync-dot[data-status="error"] { background: var(--warning); }
@keyframes pulse { 50% { opacity: .35; } }
.main { flex: 1; min-width: 0; }
.view { display: none; }
.app[data-view="songs"] #view-songs, .app[data-view="editor"] #view-editor, .app[data-view="tools"] #view-tools,
.app[data-view="theory"] #view-theory, .app[data-view="play"] #view-play { display: block; }
.page { max-width: 1180px; margin: 0 auto; padding: 24px 20px 48px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 28px; font-weight: 800; }
.page-sub { margin-top: 4px; color: var(--muted); font-size: 14px; max-width: 62ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bottom-nav { display: none; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2 { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 750; }
.card-head h2 .icon { color: var(--accent); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.card-text { color: var(--text-2); font-size: 14px; margin-bottom: 14px; }
.card-hint { margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.field { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.field > span:first-child { display: flex; justify-content: space-between; }
.field.inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field.inline .select { width: auto; min-width: 110px; }
.field.small { margin: 0; font-size: 12px; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field { margin-top: 12px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.stat-label { display: block; font-size: 12px; font-weight: 650; color: var(--muted); line-height: 1.25; }
.stat strong { display: block; margin-top: 2px; font-size: 16px; font-weight: 800; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper .icon-btn { border: 1px solid var(--line); background: var(--surface); }
.stepper output { min-width: 54px; text-align: center; font: 800 18px var(--mono); color: var(--text); }
.mini-label { margin: 16px 0 8px; font-size: 11.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* ---------- Library ---------- */
.library-toolbar { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; margin-bottom: 14px; }
.search { position: relative; display: block; }
.search [data-icon] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search .icon { width: 18px; height: 18px; }
.search input { width: 100%; min-height: 44px; padding: 0 12px 0 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 15px; }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#librarySort { width: auto; min-width: 120px; }
.library-list { display: grid; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: border-color .15s;
}
.row:hover { border-color: var(--line-strong); }
.row.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px; border: 0; background: none; text-align: left; border-radius: 10px; }
.row-text { min-width: 0; display: grid; }
.row-title { font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-3); color: var(--text-2); flex: none; }
.empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.empty-art { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }
.empty-art .icon { width: 30px; height: 30px; }
.empty h2 { font-size: 18px; }
.empty p { margin: 6px auto 16px; max-width: 46ch; color: var(--muted); }
.empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- Editor ---------- */
#view-editor { padding: 16px 20px 24px; max-width: 1480px; margin: 0 auto; }
.banner, .setlist-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 650; font-size: 14px; flex-wrap: wrap; }
.banner-text { flex: 1; min-width: 160px; }
.setlist-bar { padding: 4px; }
.setlist-bar-title { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.setlist-bar-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setlist-bar .icon-btn { color: var(--accent-strong); }
.editor-head { margin-bottom: 10px; }
.title-row { display: flex; align-items: center; gap: 12px; }
.title-input { flex: 1; min-width: 0; padding: 2px 0; border: 0; background: transparent; font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.title-input:focus { outline: none; }
.title-input::placeholder { color: var(--muted); opacity: .6; }
.save-state { flex: none; font-size: 12.5px; font-weight: 650; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.save-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.save-state[data-state="saving"]::before { background: var(--accent); animation: pulse 1s infinite; }
.save-state[data-state="error"]::before { background: var(--danger); }
.save-state[data-state="readonly"]::before { background: var(--warning); }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.meta-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.editor-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.tool-group { display: flex; align-items: center; gap: 2px; }
.key-control { padding: 2px; border-radius: 12px; background: var(--surface-2); }
.key-pill { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .key-pill { background: var(--surface-3); }
.key-pill-label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.key-pill strong { font: 800 17px var(--mono); color: var(--accent-strong); }
.view-mode { margin-left: auto; }
.pane-switch { display: none; }
.chord-bar { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: none; }
.chord-bar::-webkit-scrollbar { display: none; }
.chord-bar .chip { min-height: 32px; flex: none; }
.editor-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; height: calc(100dvh - var(--top-h) - 236px); min-height: 420px; }
.pane { position: relative; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.chart-input {
  flex: 1; width: 100%; min-height: 0; padding: 18px 20px; border: 0; resize: none;
  background: transparent; color: var(--text);
  font: 450 var(--chart-size)/var(--chart-line) var(--mono); tab-size: 2; white-space: pre; overflow: auto;
}
.chart-input:focus { outline: none; }
.pane-edit:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.quickstart { position: absolute; inset: auto 16px 16px 16px; padding: 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.quickstart-title { font-weight: 800; font-size: 16px; }
.quickstart-text { margin: 4px 0 12px; color: var(--muted); font-size: 13.5px; }
.quickstart-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--line); }
.preview-label { font-size: 12.5px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#preview { flex: 1; overflow: auto; padding: 18px 20px 40px; }

/* Chart typography (preview, stage, print) */
.chart { font: 450 var(--chart-size)/var(--chart-line) var(--mono); color: var(--text); }
.chart .ln { white-space: pre-wrap; min-height: calc(var(--chart-line) * 1em); }
.chart .ln-empty { height: .7em; min-height: 0; }
.chart .ln-header { font: 800 1.3em/1.25 var(--ui); margin: .4em 0 .3em; letter-spacing: -.02em; white-space: normal; }
.chart .ln-section { margin: .9em 0 .25em; }
.chart .ln-section span { display: inline-block; padding: .1em .6em; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); font: 800 .78em/1.6 var(--ui); text-transform: uppercase; letter-spacing: .06em; }
.chart .ln-note { font: italic 500 .9em/1.5 var(--ui); color: var(--muted); border-left: 3px solid var(--line-strong); padding-left: .7em; margin: .2em 0; white-space: normal; }
.chart .ln-divider { border: 0; border-top: 1px dashed var(--line-strong); margin: .8em 0; }
.chart .ch { color: var(--chord); font-weight: 700; }
.chart .ch-mark { color: var(--muted); font-weight: 500; }
.chart .ln-chords { color: var(--chord); }
.chart .ln-pair { display: flex; flex-wrap: wrap; white-space: pre; }
.chart .seg { display: inline-flex; flex-direction: column; white-space: pre; }
.chart .seg-c { min-height: calc(var(--chart-line) * 1em); line-height: var(--chart-line); }
.chart .seg-l { line-height: var(--chart-line); }
.chart-empty { color: var(--muted); font-family: var(--ui); text-align: center; padding: 40px 0; }

/* ---------- Tools ---------- */
.bpm-display { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 0 10px; }
.bpm-value { display: grid; justify-items: center; }
.bpm-value input { width: 140px; border: 0; background: none; text-align: center; font: 800 52px/1 var(--mono); letter-spacing: -.04em; color: var(--text); -moz-appearance: textfield; }
.bpm-value input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bpm-value input:focus { outline: none; color: var(--accent-strong); }
.bpm-value span { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .1em; }
.beat-dots { display: flex; gap: 8px; justify-content: center; margin: 12px 0 4px; flex-wrap: wrap; }
.beat-dots span { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3); transition: background .06s, transform .06s; }
.beat-dots span.down { box-shadow: inset 0 0 0 2px var(--accent); }
.beat-dots span.mid { box-shadow: inset 0 0 0 2px var(--line-strong); }
.beat-dots span.on { background: var(--accent); transform: scale(1.25); }
.export-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
[data-spelling="sharp"], [data-spelling="flat"] { font-size: 17px !important; }

/* ---------- Theory ---------- */
.theory-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 16px; align-items: start; }
.circle-wrap { position: relative; display: grid; place-items: center; padding: 20px; }
.circle-tools { justify-self: end; display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lock-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font-weight: 700; font-size: 13px; box-shadow: var(--shadow-sm); }
.lock-btn .icon { width: 17px; height: 17px; }
.lock-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.lock-hint { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: center; }
.circle { width: 100%; max-width: 580px; aspect-ratio: 1; }
.circle-svg { width: 100%; height: 100%; overflow: visible; user-select: none; }
.wedge { cursor: pointer; outline: none; }
.wedge path { fill: var(--surface-2); stroke: var(--surface); stroke-width: 2.5; transition: fill .2s; }
.wedge.minor path { fill: var(--surface-3); }
.wedge.dim path { fill: color-mix(in srgb, var(--surface-3) 80%, var(--line)); }
.wedge.family path { fill: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.wedge.family.minor path { fill: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.wedge.family.dim path { fill: color-mix(in srgb, var(--accent) 26%, var(--surface)); }
.wedge.tonic path { fill: var(--accent); }
html[data-theme="dark"] .wedge.family path { fill: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
html[data-theme="dark"] .wedge.family.minor path { fill: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
html[data-theme="dark"] .wedge.family.dim path { fill: color-mix(in srgb, var(--accent) 36%, var(--surface)); }
.wedge.ping path { animation: wping .45s ease-out; }
@keyframes wping { 30% { fill: var(--accent-mid); } }
.wedge:hover path, .wedge:focus-visible path { filter: brightness(.94); }
html[data-theme="dark"] .wedge:hover path { filter: brightness(1.25); }
.wedge text { text-anchor: middle; dominant-baseline: middle; font-family: var(--ui); font-weight: 750; fill: var(--muted); pointer-events: none; }
.wedge.family text { fill: var(--text); }
.wedge.tonic text { fill: var(--accent-ink); }
.wedge text.num { font-weight: 700; fill: var(--accent-strong); }
.wedge.tonic text.num { fill: var(--accent-ink); opacity: .9; }
.hub { fill: var(--surface); stroke: var(--line); }
.hub-key { text-anchor: middle; font: 800 30px var(--ui); fill: var(--text); }
.hub-sub { text-anchor: middle; font: 700 15px var(--ui); fill: var(--muted); }
.key-panel { position: sticky; top: calc(var(--top-h) + 16px); }
.key-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 10px; }
.key-btn { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-weight: 750; font-size: 14px; }
.key-btn:hover { border-color: var(--accent); }
.key-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); }
.key-title { margin: 18px 0 6px; font-size: 24px; font-weight: 800; }
.key-facts { display: grid; gap: 8px; margin: 0; }
.key-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.key-facts dt { color: var(--muted); font-size: 13.5px; font-weight: 650; }
.key-facts dd { margin: 0; font-weight: 750; text-align: right; }
.diatonic { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia { display: grid; gap: 2px; justify-items: center; padding: 8px 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.dia:hover { border-color: var(--accent); }
.dia.tonic { background: var(--accent-soft); border-color: transparent; }
.dia-num { font-size: 11.5px; font-weight: 800; color: var(--accent-strong); }
.dia-name { font: 750 13px var(--mono); }

/* ---------- Play ---------- */
.play-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.play-controls .select { width: auto; min-width: 150px; }
.song-chords { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.instrument-card { margin-bottom: 16px; }
.piano-scroll, .fretboard-scroll { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.piano { position: relative; min-width: 720px; height: 190px; user-select: none; touch-action: pan-x; }
.pk-whites { display: flex; height: 100%; gap: 2px; }
.pk { border: 0; padding: 0; display: flex; align-items: flex-end; justify-content: center; font: 700 12px var(--ui); }
.pk.white { flex: 1; border-radius: 0 0 8px 8px; background: linear-gradient(#fff, #f3f5f9); color: #64748b; box-shadow: inset 0 -4px 0 #dfe4ec, 0 0 0 1px #d4dae4; padding-bottom: 10px; }
.pk-blacks { position: absolute; inset: 0 0 auto 0; height: 62%; pointer-events: none; }
.pk.black { position: absolute; top: 0; height: 100%; width: calc(100% / var(--whites) * .62); left: calc(100% / var(--whites) * var(--i) - (100% / var(--whites) * .31)); border-radius: 0 0 6px 6px; background: linear-gradient(#2a3142, #0f141d); color: #cbd5e1; box-shadow: inset 0 -5px 0 #05070b; pointer-events: auto; padding-bottom: 8px; font-size: 10.5px; z-index: 1; }
.pk sub { font-size: 9px; margin-left: 1px; opacity: .7; }
.pk.on.white { background: linear-gradient(#fff, color-mix(in srgb, var(--accent) 15%, #fff)); color: var(--accent-strong); }
.pk.on.black { background: linear-gradient(color-mix(in srgb, var(--accent) 55%, #2a3142), color-mix(in srgb, var(--accent) 40%, #141922)); color: #fff; }
.pk.root.white { background: linear-gradient(#fff, color-mix(in srgb, var(--accent) 28%, #fff)); }
.pk.root span { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 13px; background: var(--accent); color: var(--accent-ink); }
.pk.down.white { background: color-mix(in srgb, var(--accent) 40%, #fff); box-shadow: inset 0 -1px 0 #dfe4ec, 0 0 0 1px #d4dae4; }
.pk.down.black { background: var(--accent-strong); box-shadow: none; }
html[data-theme="dark"] .pk.white { background: linear-gradient(#e9edf3, #d5dbe5); box-shadow: inset 0 -4px 0 #b9c2d0, 0 0 0 1px #0b0f17; }
.fretboard { min-width: 760px; user-select: none; touch-action: pan-x; }
.fb-row { display: grid; grid-template-columns: 46px repeat(15, minmax(0, 1fr)); }
.fb-nums { margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
.fb-num.mark { color: var(--text); }
.fb-board { position: relative; border-radius: 10px; background: linear-gradient(180deg, #4a3222, #2e1f15); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); overflow: hidden; }
.fb-inlays { position: absolute; inset: 0; display: grid; grid-template-columns: 46px repeat(15, minmax(0, 1fr)); pointer-events: none; }
.fb-inlays span { position: relative; border-left: 2px solid #b8b0a2; }
.fb-inlays span:first-child { border: 0; background: #e8dcc4; }
.fb-inlays span:nth-child(2) { border-left: 5px solid #f1ead9; }
.fb-inlays .dot::after, .fb-inlays .dbl::before, .fb-inlays .dbl::after { content: ""; position: absolute; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: rgba(240, 232, 214, .55); }
.fb-inlays .dot::after { top: calc(50% - 6px); }
.fb-inlays .dbl::before { top: calc(30% - 6px); }
.fb-inlays .dbl::after { top: calc(70% - 6px); }
.fb-string { position: relative; height: 34px; }
.fb-string::before { content: ""; position: absolute; left: 46px; right: 0; top: 50%; height: var(--g); transform: translateY(-50%); background: linear-gradient(#f5f1e8, #9a917f); box-shadow: 0 1px 1px rgba(0,0,0,.5); }
.fc { position: relative; z-index: 1; display: grid; place-items: center; border: 0; padding: 0; background: transparent; }
.fc span { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 3px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 14%, #fff); color: #0f172a; font: 800 11px var(--ui); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.fc.root span { background: var(--accent); color: #fff; }
.fc.open span { background: #fff; }
.fc.open.root span { background: var(--accent); color: #fff; }
.fc.down::after { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; animation: ping .5s ease-out forwards; }
@keyframes ping { to { transform: scale(1.5); opacity: 0; } }
.tuner { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; grid-template-areas: "gauge readout" "gauge actions" "label label" "strings strings"; gap: 4px 20px; align-items: center; }
.tuner-gauge { grid-area: gauge; }
.tuner-gauge svg { width: 100%; height: auto; }
.tuner-gauge .track { fill: none; stroke: var(--surface-3); stroke-width: 14; stroke-linecap: round; }
.tuner-gauge .zone { fill: none; stroke: color-mix(in srgb, var(--success) 55%, transparent); stroke-width: 14; }
.tuner-gauge .tick { stroke: var(--line-strong); stroke-width: 2; }
.tuner-gauge .tick.zero { stroke: var(--success); stroke-width: 3; }
.tuner-gauge .g-lbl { font: 800 16px var(--ui); fill: var(--muted); }
.tuner-gauge .needle { transform-origin: 120px 120px; transition: transform .12s ease-out; }
.tuner-gauge .needle line { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.tuner-gauge .needle circle { fill: var(--accent); }
.tuner-gauge .needle.idle { opacity: .35; }
.tuner.good .needle line, .tuner.good .needle circle { stroke: var(--success); fill: var(--success); }
.tuner-readout { grid-area: readout; }
.tuner-note { font: 800 64px/1 var(--ui); letter-spacing: -.04em; }
.tuner-note sub { font-size: 22px; color: var(--muted); margin-left: 2px; }
.tuner-note.good { color: var(--success); }
.tuner-detail { margin-top: 6px; color: var(--muted); font-weight: 650; font-variant-numeric: tabular-nums; }
.tuner-actions { grid-area: actions; }
.tuner > .mini-label { grid-area: label; }
.tuner-strings { grid-area: strings; display: flex; gap: 8px; flex-wrap: wrap; }
.string-btn { display: inline-flex; align-items: baseline; gap: 2px; min-width: 54px; min-height: 44px; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 800; font-size: 16px; }
.string-btn small { font-size: 11px; color: var(--muted); }
.string-btn:hover { border-color: var(--accent); }
.string-btn.target { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }

/* ---------- Sheet (dialog) ---------- */
.sheet { width: min(520px, calc(100vw - 24px)); max-height: min(86dvh, 820px); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.sheet.wide { width: min(720px, calc(100vw - 24px)); }
.sheet::backdrop { background: rgba(8, 12, 20, .5); backdrop-filter: blur(3px); }
.sheet[open] { animation: rise .2s ease-out; }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
.sheet-inner { display: flex; flex-direction: column; max-height: inherit; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 12px 8px 22px; }
.sheet-head h2 { font-size: 19px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-body { padding: 4px 22px 18px; overflow-y: auto; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 18px; border-top: 1px solid var(--line); }
.sheet-text { color: var(--text-2); }
.sheet-sub { font-size: 17px; margin-bottom: 6px; }
.form > .field:first-child { margin-top: 0; }
.form > .field-row:first-child .field, .settings > .field-row .field { margin-top: 8px; }
.group-title { margin: 22px 0 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.settings .group-title:first-child { margin-top: 4px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 650; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.swatches { display: flex; gap: 10px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); background: var(--sw); box-shadow: 0 0 0 1px var(--line); }
.swatch.on { box-shadow: 0 0 0 2px var(--text); }
.menu-sheet .sheet-body { padding: 0 10px 12px; }
.menu-list { display: grid; }
.menu-item { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 14px; border: 0; border-radius: 12px; background: none; font-weight: 650; font-size: 15px; text-align: left; }
.menu-item:hover { background: var(--surface-2); }
.menu-item .icon { color: var(--muted); }
.menu-item.danger, .menu-item.danger .icon { color: var(--danger); }
.link-row { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 6px; margin-bottom: 6px; }
.key-sheet .big-key { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--accent-soft); text-align: center; }
.key-sheet .big-key .mini-label { margin: 0; }
.key-sheet .big-key strong { font-size: 28px; font-weight: 800; color: var(--accent-strong); }
.key-sheet .stepper { justify-content: center; }
.share { display: grid; gap: 12px; }
.qr-box { display: grid; place-items: center; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.qr-box svg { width: min(280px, 70vw); height: auto; }
.qr-box p { padding: 24px; text-align: center; color: #475569; }
.share-link { display: flex; gap: 8px; }
.share-link .input { font-size: 13px; color: var(--muted); }
.share-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.share-actions .btn { flex: 1; }
.set-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.set-item { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border: 1px solid var(--line); border-radius: 12px; }
.set-num { width: 22px; font: 800 13px var(--mono); color: var(--muted); }
.set-name { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-empty { padding: 12px; border: 1px dashed var(--line-strong); border-radius: 12px; text-align: center; }
.pick-list { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; margin-top: 6px; }
.pick { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; text-align: left; font-weight: 650; }
.pick:hover { background: var(--surface-2); }
.pick .icon { color: var(--accent); width: 18px; height: 18px; }
.pick .muted { margin-left: auto; font-size: 13px; font-weight: 500; }
.import-list { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 4px; }
.account { display: grid; gap: 14px; }
.account-hero { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); }
.account-hero .icon { width: 32px; height: 32px; }
.btn.google { background: #fff; color: #1f2937; border-color: #dadce0; min-height: 46px; }
.btn.google:hover { background: #f8fafc; }
.profile { display: flex; align-items: center; gap: 12px; }
.profile img, .avatar-fallback { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.avatar-fallback { display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 20px; }
.profile div { display: grid; }
.status-line { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 650; font-size: 14px; }
.status-line.synced { color: var(--success); }
.status-line.expired, .status-line.error { color: var(--warning); }
.error-text { color: var(--danger); font-weight: 650; font-size: 14px; }
.about-head { display: flex; gap: 14px; align-items: center; }
.about-head img { border-radius: 14px; }
.about-head h3 { font-size: 22px; }
.version { font: 700 13px var(--mono); color: var(--muted); }
.about-points { margin: 16px 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-2); }
.verse { padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; font-style: italic; color: var(--text-2); }
.verse span { display: block; margin-top: 4px; font-style: normal; font-weight: 700; font-size: 13px; color: var(--muted); }
.changelog details { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.changelog summary { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; background: var(--surface-2); }
.changelog summary::-webkit-details-marker { display: none; }
.changelog .log-lead { padding: 10px 14px 0; font-weight: 650; color: var(--text-2); }
.changelog ul { margin: 8px 0 12px; padding: 0 14px 0 32px; display: grid; gap: 4px; color: var(--text-2); font-size: 14px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #0f172a; color: #f8fafc; box-shadow: var(--shadow-lg); font-weight: 600; font-size: 14px; pointer-events: auto; animation: rise .2s ease-out; transition: opacity .25s, transform .25s; }
html[data-theme="dark"] .toast { background: #e8edf6; color: #0b0f17; }
.toast .icon { width: 18px; height: 18px; flex: none; }
.toast-success .icon { color: #4ade80; }
.toast-error .icon { color: #f87171; }
html[data-theme="dark"] .toast-success .icon { color: #15803d; }
html[data-theme="dark"] .toast-error .icon { color: #dc2626; }
.toast span { flex: 1; }
.toast-action { border: 0; background: none; color: #93c5fd; font-weight: 800; padding: 4px 6px; }
html[data-theme="dark"] .toast-action { color: #1d4ed8; }
.toast.leaving { opacity: 0; transform: translateY(8px); }

/* ---------- Stage ---------- */
.stage { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #000; color: #f3f4f6; --stage-font: 40px; --chord: #9bb8e8; --muted: #8b95a7; --accent-soft: rgba(124, 180, 255, .16); --accent-strong: #9cc6ff; --line-strong: #333a46; --text: #f3f4f6; }
.stage[data-theme="dark"] { background: #10141c; }
.stage[data-theme="light"] { background: #fbfbf8; color: #0f172a; --chord: #3a5fa8; --muted: #5b6678; --accent-soft: #e3ecff; --accent-strong: #1d4ed8; --line-strong: #cfd6e0; --text: #0f172a; }
.stage-top, .stage-dock { display: flex; align-items: center; gap: 10px; padding: 10px 14px; transition: opacity .25s, transform .25s; background: rgba(20, 24, 32, .9); backdrop-filter: blur(10px); }
.stage[data-theme="light"] .stage-top, .stage[data-theme="light"] .stage-dock { background: rgba(240, 242, 246, .94); }
.stage-top { padding-top: calc(10px + env(safe-area-inset-top)); flex-wrap: wrap; }
.stage-dock { padding-bottom: calc(10px + env(safe-area-inset-bottom)); justify-content: center; }
.stage.chrome-hidden .stage-top { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.stage.chrome-hidden .stage-dock { opacity: 0; transform: translateY(100%); pointer-events: none; }
.stage-title { flex: 1; min-width: 140px; display: grid; }
.stage-title strong { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-title span { font-size: 13px; color: var(--muted); }
.stage-tools, .stage-nav, .stage-group { display: flex; align-items: center; gap: 6px; }
.stage-tools { flex-wrap: wrap; }
.stage-btn { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.06); color: inherit; font-weight: 800; }
.stage[data-theme="light"] .stage-btn { border-color: #d5dbe4; background: #fff; }
.stage-btn:hover { background: rgba(255,255,255,.14); }
.stage-btn.on { background: var(--chord); color: #000; border-color: var(--chord); }
.stage-btn.exit { background: rgba(220, 38, 38, .85); border-color: transparent; color: #fff; }
.stage-key { min-width: 52px; text-align: center; font: 800 20px var(--mono); color: var(--chord); }
.stage-count { font: 800 14px var(--mono); color: var(--muted); }
.stage-select { min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: inherit; font-weight: 700; }
.stage[data-theme="light"] .stage-select { background: #fff; border-color: #d5dbe4; }
.stage-select option { color: #0f172a; }
.stage-scroll { flex: 1; overflow-y: auto; padding: 24px max(20px, 5vw) 40vh; outline: none; }
.stage-chart { --chart-size: var(--stage-font); --chart-line: 1.4; max-width: 1400px; margin: 0 auto; }
.stage-chart .ln-section span { background: rgba(124,180,255,.16); }
.stage-range { width: min(260px, 40vw); }
.stage-divider { width: 1px; height: 28px; background: rgba(255,255,255,.16); }
.stage-bpm { font: 800 15px var(--mono); min-width: 32px; }
.stage-beat { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.15); }
.stage-beat.on { animation: beat .18s ease-out; }
.stage-beat.on.down { background: var(--chord); }
@keyframes beat { from { background: var(--chord); transform: scale(1.4); } }
body.stage-open { overflow: hidden; }

/* ---------- Sona ---------- */
.sona { position: fixed; left: 0; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; width: var(--w, 60px); transform: translateX(var(--x, 0)); pointer-events: none; }
.sona-body { position: relative; display: block; width: 100%; aspect-ratio: 24 / 16; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; }
.sona-sprite { position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated; transform: scaleX(calc(var(--face, 1) * -1)); }
.sona-shadow { position: absolute; left: 18%; right: 18%; bottom: -3px; height: 4px; border-radius: 50%; background: rgba(15, 23, 42, .18); }
.sona.beat .sona-sprite { animation: bob .18s ease-out; }
.sona.hop .sona-body { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
.sona[data-state="sleep"] .sona-sprite { filter: saturate(.7); }
@keyframes bob { 40% { transform: scaleX(calc(var(--face, 1) * -1)) translateY(-8%) scaleY(1.04); } }
@keyframes hop { 40% { transform: translateY(-40%); } }
.sona-notes { position: absolute; left: 0; right: 0; bottom: 70%; height: 60px; pointer-events: none; }
.sona-note { position: absolute; bottom: 0; font: 800 16px var(--ui); color: var(--accent); animation: float 1.6s ease-out forwards; }
.sona-note.z { font-size: 13px; color: var(--muted); }
@keyframes float { to { transform: translate(10px, -46px) rotate(12deg); opacity: 0; } }
.sona-bubble { position: absolute; bottom: calc(100% + 12px); left: var(--bx, 0); padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); color: var(--text); font-size: 14px; font-weight: 600; pointer-events: auto; animation: rise .2s ease-out; }
.sona-actions { display: flex; gap: 6px; margin-top: 10px; }
.sona-actions button { flex: 1; min-height: 32px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); font-size: 12.5px; font-weight: 700; }
.sona-actions .sona-next { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Print ---------- */
.print-area { display: none; }
@media print {
  @page { margin: 14mm; }
  body > *:not(.print-area) { display: none !important; }
  .print-area { display: block; color: #000; }
  .print-song { break-after: page; }
  .print-song:last-child { break-after: auto; }
  .print-song h1 { font: 800 22pt var(--ui); }
  .print-meta { margin: 2pt 0 12pt; color: #555; font: 600 10pt var(--ui); }
  .print-chart { --chart-size: 11pt; --chord: #1d4ed8; --muted: #555; --accent-soft: #e8efff; --accent-strong: #1d4ed8; column-count: var(--print-cols, 1); column-gap: 10mm; }
  .print-chart .ln-pair, .print-chart .ln-section { break-inside: avoid; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .tab { padding: 0 11px; }
  .account-label { display: none; }
  .account-btn { padding: 0 6px; }
  .sync-dot { left: 24px; }
}
@media (max-width: 960px) {
  :root { --top-h: 56px; }
  .topbar { grid-template-columns: auto 1fr; gap: 8px; padding-left: 14px; padding-right: 10px; }
  .tabs { display: none; }
  .top-actions { justify-self: end; }
  .present-btn span:last-child { display: none; }
  .present-btn { width: 40px; padding: 0; }
  .bottom-nav {
    position: fixed; min-width: 0; left: 0; right: 0; bottom: 0; z-index: 25;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .bn { min-width: 0; overflow: hidden; display: grid; justify-items: center; align-content: center; gap: 3px; border: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 700; }
  .bn .icon { width: 22px; height: 22px; }
  .bn.active { color: var(--accent-strong); }
  .bn.active [data-icon] { padding: 2px 14px; border-radius: 999px; background: var(--accent-soft); }
  .main { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); }
  .sona { bottom: calc(var(--nav-h) + 6px + env(safe-area-inset-bottom)); }
  .theory-layout { grid-template-columns: 1fr; }
  .key-panel { position: static; }
  .editor-panes { height: auto; grid-template-columns: 1fr; min-height: 0; }
  .editor-panes[data-pane="edit"] .pane-preview, .editor-panes[data-pane="preview"] .pane-edit { display: none; }
  .pane { min-height: max(320px, calc(100dvh - var(--top-h) - var(--nav-h) - 250px)); }
  /* Keep Sona out of the way of instruments and typing on small screens. */
  .app[data-view="play"] ~ .sona, .app[data-view="theory"] ~ .sona, .app[data-view="tools"] ~ .sona, .app:has(.chart-input:focus) ~ .sona, .app:has(input:focus) ~ .sona { display: none; }
  .pane-switch { display: inline-flex; }
  .view-mode { margin-left: 0; }
  /* Mobile editor: one compact toolbar, the page scrolls instead of the text box. */
  #view-editor[data-pane="edit"] .view-mode, #view-editor[data-pane="preview"] .chord-bar { display: none; }
  .editor-panes, .pane { min-height: 0; height: auto; overflow: visible; }
  .pane-edit { min-height: 340px; }
  .chart-input { flex: none; overflow-x: auto; overflow-y: hidden; min-height: 320px; font-size: min(var(--chart-size), 15px); }
  #preview { overflow: visible; }
  .quickstart { position: static; margin: 0 12px 12px; }
  .pane-edit:has(.quickstart:not([hidden])) .chart-input { min-height: 140px; }
  .editor-toolbar { position: sticky; top: calc(var(--top-h) + 6px); z-index: 5; }
  .meta-row { flex-wrap: nowrap; }
  .meta-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .meta-chips::-webkit-scrollbar { display: none; }
  .meta-chips .chip { flex: none; }
  .details-btn span:last-child { display: none; }
  .details-btn { width: 36px; padding: 0; flex: none; }
  /* Sona keeps to the song list on small screens. */
  .app:not([data-view="songs"]) ~ .sona { display: none; }
}
@media (max-width: 640px) {
  .page { padding: 16px 14px 32px; }
  #view-editor { padding: 12px 12px 16px; }
  .page-head h1 { font-size: 24px; }
  .title-input { font-size: 22px; }
  .library-toolbar { grid-template-columns: 1fr 1fr; }
  .library-toolbar .search { grid-column: 1 / -1; }
  #librarySort { min-width: 0; width: 100%; }
  .library-toolbar .segmented { width: 100%; }
  .library-toolbar .segmented button { flex: 1; padding: 0 6px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .editor-toolbar { gap: 4px; padding: 6px; }
  .editor-toolbar .icon-btn { width: 36px; height: 36px; }
  .key-pill { padding: 0 8px; }
  .pane-switch button { padding: 0 9px; }
  .view-mode { order: 5; width: 100%; display: flex; }
  .view-mode button { flex: 1; padding: 0 4px; font-size: 13px; }
  .pane-switch { margin-left: auto; }
  .editor-toolbar { flex-wrap: wrap; }
  .key-control .icon-btn { width: 34px; }
  .key-pill-label { display: none; }
  .key-pill { min-width: 44px; justify-content: center; }
  .tool-group:first-child .icon-btn { width: 32px; }
  .title-input { font-size: 21px; }
  .save-state { font-size: 0; gap: 0; }
  .save-state::before { width: 8px; height: 8px; }
  .chord-bar { padding-top: 8px; }
  .library-toolbar { grid-template-columns: 1fr auto; }
  .library-toolbar .segmented { width: auto; }
  .row-main { gap: 10px; }
  .key-badge { min-width: 36px; height: 36px; }
  .row .icon-btn { width: 36px; height: 36px; }
  .link-row { grid-template-columns: 1fr auto; }
  .link-row [data-k="url"] { grid-column: 1; }
  .link-row .icon-btn { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .key-picker { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .key-btn { min-height: 36px; font-size: 13px; }
  .circle-wrap { padding: 10px 8px 12px; }
  .tuner-strings { flex-wrap: nowrap; gap: 6px; }
  .string-btn { flex: 1; min-width: 0; padding: 0 2px; }
  .tuner-gauge { max-width: 240px; }
  .tuner-note { font-size: 48px; }
  .fretboard { min-width: 640px; }
  .fb-row, .fb-inlays { grid-template-columns: 38px repeat(15, minmax(0, 1fr)); }
  .fb-string::before { left: 38px; }
  .fb-string { height: 32px; }
  .fc span { min-width: 23px; height: 23px; font-size: 10px; }
  .piano { min-width: 600px; height: 170px; }
  .instrument-card .card-head { flex-wrap: wrap; }
  .page-head { margin-bottom: 14px; }
  .play-controls .segmented { flex: none; }
  .chart-input, #preview { padding: 14px; }
  .quickstart { inset: auto 10px 10px 10px; padding: 14px; }
  .card { padding: 14px; }
  .card-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr 1fr; }
  .stat { padding: 8px; }
  .stat strong { font-size: 14px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .diatonic { grid-template-columns: repeat(4, 1fr); }
  .tuner { grid-template-columns: 1fr; grid-template-areas: "gauge" "readout" "actions" "label" "strings"; text-align: center; }
  .tuner-gauge { max-width: 280px; margin: 0 auto; }
  .tuner-strings { justify-content: center; }
  .tuner-note { font-size: 54px; }
  .play-controls { width: 100%; }
  .play-controls .select { flex: 1; }
  .sheet { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .sheet-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .sheet-foot .btn { flex: 1; }
  .stage-top { gap: 8px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .stage-title { order: -2; flex-basis: calc(100% - 60px); }
  .stage-btn.exit { order: -1; }
  .stage-tools { width: 100%; justify-content: space-between; }
  .stage-btn { min-width: 40px; height: 40px; padding: 0 8px; }
  .stage-scroll { padding: 16px 14px 40vh; }
  .stage-chart { --chart-size: min(var(--stage-font), 7vw); }
  .wordmark { font-size: 17px; }
}
@media (max-width: 380px) {
  .stage-btn { min-width: 36px; height: 36px; padding: 0 6px; }
  .stage-select { min-height: 36px; }
  .stage-tools { gap: 4px; }
  .bpm-display { gap: 10px; }
  .bpm-value input { width: 104px; font-size: 44px; }
  .icon-btn.big { width: 46px; height: 46px; }
  .card-actions .btn { flex: 1 1 auto; }
  #themeBtn { display: none; }
  .bn span:last-child { font-size: 10px; }
}

/* ---------- Compact pass (2.0.2): smaller, tighter controls on small screens ---------- */
@media (max-width: 960px) {
  :root { --top-h: 50px; --nav-h: 56px; --radius: 12px; --radius-sm: 9px; }
  body { font-size: 14px; }
  .btn { min-height: 36px; padding: 0 11px; font-size: 13px; gap: 6px; }
  .btn.small { min-height: 30px; padding: 0 8px; font-size: 12.5px; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn.small { width: 30px; height: 30px; }
  .input, .select { min-height: 38px; font-size: 14px; }
  .segmented button { min-height: 30px; padding: 0 10px; font-size: 13px; }
  .chip { min-height: 30px; padding: 0 10px; font-size: 13px; }
  .brand img { width: 28px; height: 28px; }
  .present-btn { width: 36px; }
  .bn { font-size: 10.5px; gap: 2px; }
  .bn .icon { width: 20px; height: 20px; }
  .bn.active [data-icon] { padding: 1px 12px; }
}
@media (max-width: 640px) {
  :root { --chart-size: 15px; }
  .page { padding: 12px 10px 24px; }
  #view-editor { padding: 8px 8px 12px; }
  .page-head { margin-bottom: 10px; }
  .page-head h1 { font-size: 21px; }
  .card { padding: 11px; border-radius: 12px; }
  .card-grid { gap: 10px; }
  .editor-toolbar .icon-btn { width: 32px; height: 32px; }
  .editor-toolbar .icon-btn .icon { width: 17px; height: 17px; }
  .row .icon-btn { width: 32px; height: 32px; }
  .key-badge { min-width: 32px; height: 32px; font-size: 13px; }
  .key-btn { min-height: 32px; font-size: 12.5px; }
  .tab, .tuner-strings .string-btn { min-height: 34px; }
  .piano { min-width: 480px; height: 150px; }
  .pk.white { padding-bottom: 6px; font-size: 11px; }
  .fretboard { min-width: 520px; }
  .fb-row, .fb-inlays { grid-template-columns: 30px repeat(15, minmax(0, 1fr)); }
  .fb-string::before { left: 30px; }
  .fb-string { height: 28px; }
  .fc span { min-width: 20px; height: 20px; font-size: 9.5px; }
  .tuner-note { font-size: 44px; }
  .tuner-gauge { max-width: 220px; }
  .stat { padding: 6px; }
  .sheet { max-height: 90dvh; }
}
@media (max-width: 380px) {
  .page { padding: 10px 8px 20px; }
  .piano { min-width: 440px; height: 140px; }
  .fretboard { min-width: 480px; }
  .btn { padding: 0 9px; }
}

/* ---------- Circle auto-rotate ---------- */
@property --rot { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.circle { --rot: 0deg; transition: --rot .8s cubic-bezier(.3, .7, .2, 1); }
.circle[data-rotate="1"] .circle-svg { transform: rotate(var(--rot)); }
.circle[data-rotate="1"] .wedge text, .circle[data-rotate="1"] .hub-key, .circle[data-rotate="1"] .hub-sub { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--rot) * -1)); }
@media (prefers-reduced-motion: reduce) { .circle { transition: none; } }

/* ---------- Type scale: clear steps from caption to display, scaled by Settings → Interface text ---------- */
:root { --ts: 1; --fs-2xs: calc(10.5px * var(--ts)); --fs-xs: calc(11.5px * var(--ts)); --fs-sm: calc(12.5px * var(--ts)); --fs-md: calc(14px * var(--ts)); --fs-lg: calc(16px * var(--ts)); --fs-xl: calc(20px * var(--ts)); --fs-2xl: calc(26px * var(--ts)); --fs-3xl: calc(34px * var(--ts)); }
html[data-text="s"] { --ts: .92; }
html[data-text="l"] { --ts: 1.12; }
body { font-size: var(--fs-md); }
.page-head h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.page-sub, .card-text { font-size: var(--fs-sm); color: var(--muted); }
.card-head h2, .key-title { font-size: var(--fs-lg); font-weight: 750; }
.key-title { font-size: var(--fs-xl); }
.mini-label, .stat-label, .field > span:first-child, .group-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.btn, .tab, .segmented button, .chip, .lock-btn { font-size: var(--fs-sm); }
.input, .select { font-size: var(--fs-md); }
.title-input { font-size: var(--fs-3xl); }
.stat strong { font-size: var(--fs-lg); }
.bn { font-size: var(--fs-2xs); }
.dia-name { font-size: var(--fs-md); } .dia-num { font-size: var(--fs-xs); }
.chord-chip { font-size: var(--fs-sm); }
.cp-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.cp-type { width: auto; min-width: 110px; flex: none; min-height: 32px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-sm); }
.cp-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.cp-chips::-webkit-scrollbar { display: none; }
.cp-chips .chip { flex: none; }
.chord-bar .cp-type { align-self: center; flex: none; }
.inst-tabs { margin-bottom: 10px; }
.inst-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.inst-tabs .icon { width: 16px; height: 16px; }
.chord-player { margin-bottom: 4px; }
.quickstart { position: static; order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); inset: auto; }
.quickstart-text { margin: 0; font-size: var(--fs-xs); flex: 1 1 100%; }
.quickstart-chips { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.quickstart-chips::-webkit-scrollbar { display: none; }
.quickstart-chips .chip { flex: none; min-height: 30px; }
.chart-input { flex: 1; }
@media (max-width: 640px) {
  :root { --fs-2xl: calc(22px * var(--ts)); --fs-3xl: calc(24px * var(--ts)); --fs-xl: calc(18px * var(--ts)); }
  .quickstart { position: static; margin: 0; inset: auto; padding: 6px 8px; }
  .pane-edit:has(.quickstart:not([hidden])) .chart-input { min-height: 200px; }
}
@media (max-width: 640px) { .circle { max-width: 330px; } .circle-tools .lock-btn { min-height: 34px; padding: 0 10px; font-size: var(--fs-xs); } }

/* ---------- Pressed and chord notes: darker, easy to see ---------- */
.chord-readout { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 44px; margin: 2px 0 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.chord-readout[data-state="playing"] { background: var(--accent-soft); border-color: var(--accent); }
.ro-name { font: 800 var(--fs-xl) var(--ui); letter-spacing: -.02em; color: var(--text); min-width: 2.2ch; }
.ro-notes { font: 700 var(--fs-md) var(--mono); color: var(--text-2); }
.ro-notes em { font: 600 var(--fs-xs) var(--ui); font-style: normal; color: var(--muted); margin-left: 4px; }
.n-root { color: var(--accent-strong); }
.n-bass { color: #b45309; text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .n-bass { color: #fbbf24; }
/* Piano */
.pk.on.white { background: linear-gradient(#fff, color-mix(in srgb, var(--accent) 38%, #fff)); color: var(--accent-strong); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--accent) 55%, #dfe4ec), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, #d4dae4); }
.pk.on.black { background: linear-gradient(color-mix(in srgb, var(--accent) 75%, #1a2030), color-mix(in srgb, var(--accent) 55%, #0f141d)); }
.pk.root.white { background: linear-gradient(#fff, color-mix(in srgb, var(--accent) 55%, #fff)); }
.pk.down.white, .pk.lit.white { background: linear-gradient(var(--accent), var(--accent-strong)); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px var(--accent-strong); }
.pk.down.black, .pk.lit.black { background: linear-gradient(var(--accent), var(--accent-strong)); color: #fff; box-shadow: 0 0 0 2px var(--accent-soft); }
.pk.down.white span, .pk.lit.white span { background: #fff; color: var(--accent-strong); }
.pk.lit { transition: background .65s ease-out, box-shadow .65s ease-out; }
.pk.bass.white::after { content: ""; position: absolute; top: 8px; width: 10px; height: 10px; border-radius: 2px; background: #d97706; }
.pk.bass.black::after { content: ""; position: absolute; bottom: 24px; width: 8px; height: 8px; border-radius: 2px; background: #fbbf24; }
.pk { position: relative; }
.pk.bass span { box-shadow: 0 0 0 2px #d97706; }
/* Fretboard */
.fc span { background: color-mix(in srgb, var(--accent) 38%, #fff); }
.fc.root span { background: var(--accent-strong); color: #fff; }
.fc.bass span { border-radius: 5px; background: #d97706; color: #fff; box-shadow: 0 0 0 2px #fde68a, 0 1px 3px rgba(0,0,0,.4); }
.fc.down span, .fc.lit span { background: var(--accent-strong); color: #fff; transform: scale(1.22); box-shadow: 0 0 0 3px var(--accent-mid), 0 2px 6px rgba(0,0,0,.45); }
.fc span { transition: transform .12s, background .5s; }
.fc:not(.on).down::before, .fc:not(.on).lit::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-mid), 0 2px 6px rgba(0,0,0,.4); }
.chord-chip.on, .chord-chip.on:hover, button.chip.chord-chip.on:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }