:root {
  --ink: #11100e;
  --ink-soft: #34312c;
  --paper: #f7f1df;
  --paper-bright: #fffdf6;
  --paper-deep: #e8dfc6;
  --rule: rgba(75, 111, 151, .23);
  --red-rule: rgba(183, 55, 54, .48);
  --muted: #716b60;
  --border: rgba(17, 16, 14, .16);
  --shadow: 0 18px 50px rgba(25, 21, 14, .14);
  --danger: #9c2d26;
  --success: #355f3e;
  --yellow: #e0ba4f;
  --sidebar: #111;
  --sidebar-soft: #242424;
  --editor-size: 19px;
  --editor-line-height: 32px;
  --preview-size: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --topbar-height: 72px;
}

* { box-sizing: border-box; }
html { height: 100%; background: var(--ink); }
body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.08), transparent 28rem),
    #151515;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
/* `manipulation` removes the mobile double-tap-to-zoom delay/gesture while
   preserving normal one-finger scrolling and pinch zoom. */
html, body, button, a, input, textarea, select, label, [role="button"], [contenteditable="true"] { touch-action: manipulation; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(42, 89, 128, .28);
  outline-offset: 2px;
}
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.mobile-only { display: none !important; }

.app-shell {
  --library-width: 310px;
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--library-width) minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
}
.app-shell.library-collapsed { --library-width: 0px; }
.app-shell.library-collapsed .library-panel {
  width: 0;
  min-width: 0;
  overflow: hidden;
  border-right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.library-collapse-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.72);
  font-size: 1rem;
}
.library-collapse-toggle.active {
  background: rgba(255,255,255,.13);
  color: white;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 8px 18px 8px 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), transparent 12rem),
    #0f0f0f;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 25px rgba(0,0,0,.26);
  z-index: 20;
}
.brand {
  flex: 0 0 180px;
  width: 180px;
  height: 54px;
  border: 0;
  border-radius: 8px;
  background: #0c0c0c;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.brand img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  border-radius: 8px;
}
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.sync-state {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  white-space: nowrap;
}
.sync-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #8b8b8b;
  box-shadow: 0 0 0 3px rgba(255,255,255,.07);
}
.sync-state.connected .sync-dot { background: #71a87a; }
.sync-state.syncing .sync-dot { background: var(--yellow); animation: pulse 1s infinite; }
.sync-state.error .sync-dot { background: #c85b50; }
@keyframes pulse { 50% { opacity: .35; } }

.button, .icon-button, .tool-button, .tab, .editor-toolbar button, .performance-toolbar button,
.settings-tabs button, .prompt-card button, .popover button {
  border: 0;
  background: none;
}
.button {
  min-height: 42px;
  border-radius: 8px;
  padding: .72rem 1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.button:hover { transform: translateY(-1px); }
.button.ink { background: #f4f0e6; color: #111; box-shadow: 0 5px 16px rgba(0,0,0,.2); }
.button.paper { background: var(--paper-bright); color: var(--ink); border: 1px solid rgba(0,0,0,.18); }
.button.ghost { color: inherit; border: 1px solid currentColor; background: transparent; opacity: .78; }
.button.record { background: #9f3028; color: white; }
.button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.icon-button {
  width: 42px; height: 42px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  font-size: 1.25rem;
  color: inherit;
  background: rgba(255,255,255,.06);
}
.icon-button:hover { background: rgba(255,255,255,.12); }

.library-panel {
  grid-row: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: rgba(255,255,255,.92);
  background:
    linear-gradient(90deg, rgba(255,255,255,.02), transparent 30%),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.018) 7px 8px),
    var(--sidebar);
  border-right: 1px solid rgba(255,255,255,.12);
  z-index: 15;
}
.library-heading {
  padding: 1rem 1rem .6rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.eyebrow {
  margin: 0 0 .35rem;
  color: #7b766c;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.library-panel .eyebrow { color: rgba(255,255,255,.48); }
h1, h2, h3, p { margin-top: 0; }
.library-heading h1 { margin-bottom: 0; font-family: "Special Elite", serif; font-size: 1.28rem; font-weight: 400; }
.search-box {
  margin: 0 .75rem .55rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .65rem;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
}
.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: white;
}
.search-box input::placeholder { color: rgba(255,255,255,.42); }
.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  padding: 0 .75rem .55rem;
}
.filter-row select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.12);
  background: #1c1c1c;
  color: rgba(255,255,255,.75);
  border-radius: 7px;
  padding: .46rem .52rem;
  font-size: .7rem;
}
.song-list {
  min-height: 0;
  overflow-y: auto;
  padding: 0 .5rem .75rem;
}
.song-card {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .18rem .58rem;
  margin-bottom: .18rem;
  padding: .58rem .62rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,.82);
}
.song-card:hover { background: rgba(255,255,255,.055); }
.song-card.active {
  background: var(--paper);
  color: var(--ink);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
}
.song-card-title {
  font-family: "Special Elite", serif;
  font-size: .86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-card-meta { font-size: .6rem; opacity: .62; text-transform: uppercase; letter-spacing: .07em; }
.song-card-key { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 600 .78rem "IBM Plex Mono", monospace; }
.song-card-snippet {
  grid-column: 1 / -1;
  margin: .08rem 0 0;
  font-size: .66rem;
  opacity: .52;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.library-footer {
  margin-top: auto;
  padding: .85rem 1rem max(.85rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.1);
}
.library-footer .button { width: 100%; }
.library-footer p { margin: .55rem 0 0; text-align: center; font-size: .7rem; color: rgba(255,255,255,.44); }
.library-footer .import-batch-note { margin-top: .45rem; font-size: .62rem; line-height: 1.35; color: rgba(255,255,255,.38); }

.workspace {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 18px 18px,
    #d9d0bb;
}
.song-workspace { min-height: 100%; }
.notebook-page {
  background:
    linear-gradient(90deg, transparent 0 58px, var(--red-rule) 58px 60px, transparent 60px),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
    var(--paper-bright);
  box-shadow: var(--shadow);
}
/* The writing page behaves like real ruled paper: shrinking the type also
   tightens the blue ruling. Other notebook cards keep the classic 32px rule
   because their mixed-size controls do not sit on one consistent baseline. */
.editor-panel.notebook-page {
  background:
    linear-gradient(90deg, transparent 0 58px, var(--red-rule) 58px 60px, transparent 60px),
    var(--paper-bright);
}
.song-header {
  margin: 1rem 1rem 0;
  padding: 1.2rem 1.35rem 1rem 4.8rem;
  border-radius: 9px 9px 0 0;
  position: relative;
}
.song-title-row { display: flex; align-items: flex-start; gap: 1rem; }
.song-title-wrap { flex: 1; min-width: 0; }
.song-title-wrap label, .tag-row label, .meta-grid label, .notes-panel > label, .generator-form label,
.settings-panel > label, .auth-form label {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.song-title-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(17,16,14,.18);
  background: transparent;
  color: var(--ink);
  font-family: "Special Elite", serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  padding: .15rem 0 .25rem;
  outline: 0;
}
.song-menu-wrap { position: relative; }
.song-menu-wrap .icon-button { color: var(--ink); background: rgba(0,0,0,.05); }
.popover {
  position: absolute;
  right: 0;
  top: 48px;
  min-width: 190px;
  z-index: 25;
  padding: .4rem;
  background: #fffdf7;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 14px 38px rgba(0,0,0,.2);
  border-radius: 8px;
}
.popover button {
  width: 100%;
  text-align: left;
  padding: .7rem .75rem;
  border-radius: 6px;
}
.popover button:hover { background: rgba(0,0,0,.06); }
.danger-text { color: var(--danger) !important; }
.meta-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr .7fr .65fr .9fr .65fr .65fr;
  gap: .65rem;
  margin-top: 1rem;
}
.meta-grid input, .meta-grid select, .tag-row input,
.generator-form select, .settings-panel select, .settings-panel input[type="number"], .auth-form input {
  width: 100%;
  margin-top: .25rem;
  min-height: 38px;
  padding: .45rem .55rem;
  border-radius: 5px;
  border: 1px solid rgba(17,16,14,.18);
  background: rgba(255,255,255,.54);
  color: var(--ink);
}
.tag-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: .65rem;
  margin-top: .75rem;
}
.tag-row label { padding-bottom: .65rem; }
.save-note { font-size: .72rem; color: var(--muted); padding-bottom: .62rem; }

.workspace-tabs {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .65rem 1rem;
  background: rgba(218, 210, 191, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.tab, .tool-button {
  min-height: 38px;
  padding: .55rem .85rem;
  border-radius: 7px;
  font-weight: 700;
  color: #5f594e;
}
.tab:hover, .tool-button:hover { background: rgba(255,255,255,.45); }
.tab.active { background: var(--ink); color: var(--paper); }
.tabs-spacer { flex: 1; }
.tool-button { border: 1px dashed rgba(0,0,0,.28); color: var(--ink-soft); }
.count-pill {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px;
  margin-left: .2rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: .68rem;
}
.view-panel { display: none; padding: 0 1rem 2rem; }
.view-panel.active { display: block; }
.write-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
  gap: 1rem;
}
.editor-panel, .notes-panel, .song-sheet, .recorder-card, .recordings-card {
  border-radius: 0 0 9px 9px;
  overflow: hidden;
}
.editor-panel { min-height: calc(100dvh - 258px); }
.editor-toolbar {
  min-height: 47px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .45rem .75rem .45rem 4.75rem;
  border-bottom: 1px solid rgba(17,16,14,.13);
  background: rgba(245,239,222,.92);
}
.toolbar-group { display: flex; align-items: center; gap: .25rem; }
.editor-toolbar button {
  border-radius: 5px;
  padding: .42rem .55rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 700;
}
.editor-toolbar button:hover { background: rgba(0,0,0,.07); }
.chord-insert-group { margin-left: .45rem; padding-left: .45rem; border-left: 1px solid rgba(0,0,0,.13); }
.chord-insert-group button { font-family: "IBM Plex Mono", monospace; }
.write-text-controls {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding-left: .5rem;
  border-left: 1px solid rgba(0,0,0,.13);
}
.write-text-controls > span {
  margin-right: .15rem;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.write-text-controls output {
  min-width: 42px;
  color: var(--ink-soft);
  font: 600 .68rem "IBM Plex Mono", monospace;
  text-align: center;
}
.write-text-controls button { min-width: 34px; }
.toolbar-help { width: 30px; height: 30px; border-radius: 50% !important; border: 1px solid rgba(0,0,0,.2) !important; }
.song-editor {
  display: block;
  width: 100%;
  min-height: calc(100dvh - 305px);
  resize: none;
  border: 0;
  outline: 0;
  padding: 1.05rem 1.4rem 4rem 4.8rem;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 calc(var(--editor-line-height) - 1px),
    var(--rule) calc(var(--editor-line-height) - 1px) var(--editor-line-height)
  );
  background-size: 100% var(--editor-line-height);
  background-position: 0 1.05rem;
  background-attachment: local;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--editor-size);
  line-height: var(--editor-line-height);
  tab-size: 2;
}
.notes-panel {
  align-self: start;
  margin-top: 0;
  min-height: 420px;
  padding: 1.15rem 1.1rem 1.4rem 4.2rem;
  border-radius: 0 0 9px 9px;
}
.notes-heading { display: flex; gap: .5rem; align-items: flex-start; justify-content: space-between; }
.notes-heading h3 { margin-bottom: .7rem; font-family: "Special Elite", serif; font-weight: 400; }
.notes-heading .icon-button { width: 30px; height: 30px; color: var(--ink); background: rgba(0,0,0,.05); }
.notes-panel textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  background: rgba(255,255,255,.42);
  padding: .75rem;
  color: var(--ink-soft);
  font-family: "Special Elite", serif;
  font-size: 1rem;
  line-height: 1.65;
}
.prompt-card {
  margin-top: 1rem;
  padding: .9rem;
  border: 1px dashed rgba(0,0,0,.24);
  background: rgba(231, 208, 100, .16);
  transform: rotate(-.35deg);
}
.prompt-card p:not(.eyebrow) { font-family: "Special Elite", serif; line-height: 1.55; }
.prompt-card button { padding: 0; text-decoration: underline; color: var(--muted); font-size: .76rem; }
.notes-panel.collapsed { min-height: 0; padding-bottom: .8rem; }
.notes-panel.collapsed > label, .notes-panel.collapsed textarea, .notes-panel.collapsed .prompt-card { display: none; }

.performance-toolbar {
  position: sticky;
  top: 51px;
  z-index: 11;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .65rem 1rem;
  margin: 0 -1rem;
  padding: .6rem 1rem;
  background: rgba(218, 210, 191, .94);
  border-bottom: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}
.transpose-controls, .performance-controls { display: flex; align-items: center; gap: .4rem; }
.transpose-controls span { color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.performance-toolbar button, .performance-toolbar select {
  min-height: 36px;
  padding: .4rem .65rem;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.52);
}
.performance-toolbar button.active { background: var(--ink); color: white; }
.custom-scroll-control {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 36px;
  padding: .25rem .45rem;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px;
  background: rgba(255,255,255,.52);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}
.custom-scroll-control input {
  width: 64px;
  min-height: 27px;
  padding: .2rem .3rem;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 4px;
  background: rgba(255,255,255,.78);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  text-align: right;
}
.play-recorder-controls {
  display: flex;
  align-items: center;
  gap: .42rem;
  margin-left: auto;
  padding-left: .65rem;
  border-left: 1px solid rgba(0,0,0,.12);
}
.play-record-status {
  min-width: 4.6rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.play-record-timer {
  min-width: 3.5rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.performance-toolbar .play-record-button {
  min-width: 92px;
  border-color: #83271f;
  background: #9f3028;
  color: white;
  font-weight: 700;
}
.performance-toolbar .play-record-button:hover { background: #86271f; }
.performance-toolbar .play-record-button.recording {
  min-width: 144px;
  border-color: #6e1d18;
  background: #7f211b;
  color: white;
}
.song-sheet {
  max-width: 920px;
  min-height: calc(100dvh - 240px);
  margin: 0 auto;
  padding: 3rem 3rem 7rem 6.2rem;
  border-radius: 0 0 9px 9px;
  font-size: var(--preview-size);
}
.song-sheet-header { border-bottom: 2px solid rgba(0,0,0,.16); margin-bottom: 1.8rem; padding-bottom: 1rem; }
.song-sheet-header h1 { font-family: "Special Elite", serif; font-size: 2.5em; font-weight: 400; margin-bottom: .45rem; }
.song-sheet-meta { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--muted); font-size: .7em; text-transform: uppercase; letter-spacing: .08em; }
.song-section-title {
  margin: 1.5em 0 .65em;
  color: var(--muted);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rendered-line {
  min-height: 1.9em;
  margin: .12em 0 .28em;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  font-family: "Special Elite", serif;
  line-height: 1.25;
}
.rendered-line.plain { display: block; line-height: 1.7; white-space: pre-wrap; }
.lyric-segment {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: .6ch;
  white-space: pre-wrap;
}
.chord-button {
  display: inline-flex;
  align-items: center;
  min-height: 1.2em;
  margin-bottom: .12em;
  padding: 0 .12em;
  border: 0;
  border-radius: 3px;
  background: rgba(218, 186, 72, .22);
  color: #764f15;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72em;
  font-weight: 700;
}
.chord-button:hover { background: rgba(218, 186, 72, .42); }
.song-empty-preview { color: var(--muted); font-family: "Special Elite", serif; text-align: center; padding: 5rem 1rem; }

.audio-layout {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
  gap: 1rem;
}
.recorder-card, .recordings-card {
  min-height: 420px;
  padding: 2rem 1.5rem 2rem 4.8rem;
}
.recorder-card h2, .recordings-card h2 { font-family: "Special Elite", serif; font-weight: 400; }
.subtle { color: var(--muted); line-height: 1.6; }
.recorder-status {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .7rem;
  margin: 2rem 0 1rem;
  padding: 1rem;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.4);
  border-radius: 7px;
}
.record-light { width: 12px; height: 12px; border-radius: 50%; background: #999; }
.record-light.live { background: #b3362d; box-shadow: 0 0 0 6px rgba(179,54,45,.14); animation: pulse 1s infinite; }
.recorder-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.file-button { cursor: pointer; }
.metronome-block {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px dashed rgba(0,0,0,.22);
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
.metronome-block p { margin-bottom: 0; }
.recordings-heading { display: flex; align-items: center; justify-content: space-between; }
.recording-list { display: grid; gap: .7rem; margin-top: 1.1rem; }
.recording-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem .8rem;
  padding: .8rem;
  border: 1px solid rgba(0,0,0,.13);
  border-radius: 7px;
  background: rgba(255,255,255,.48);
}
.recording-item input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.15);
  background: transparent;
  font-family: "Special Elite", serif;
  font-size: 1rem;
}
.recording-item audio { grid-column: 1 / -1; width: 100%; height: 36px; }
.recording-meta { color: var(--muted); font-size: .7rem; }
.recording-actions { display: flex; gap: .3rem; }
.recording-actions button {
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.55);
  border-radius: 5px;
  min-width: 34px;
}
.recording-empty { color: var(--muted); padding: 2rem 0; text-align: center; font-family: "Special Elite", serif; }

.empty-state {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 2rem;
}
.empty-state img { width: min(260px, 60vw); border-radius: 24px; box-shadow: var(--shadow); margin-bottom: 1.5rem; }
.empty-state h2 { font-family: "Special Elite", serif; font-weight: 400; font-size: clamp(1.8rem, 5vw, 3rem); }
.empty-state p:not(.eyebrow) { max-width: 42ch; color: var(--muted); }
.empty-state .button { background: var(--ink); color: white; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(2px);
}
.generator-drawer {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  width: min(520px, 100vw);
  height: 100dvh;
  padding: 1.25rem;
  overflow-y: auto;
  background:
    linear-gradient(90deg, transparent 0 44px, var(--red-rule) 44px 46px, transparent 46px),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
    var(--paper-bright);
  box-shadow: -20px 0 55px rgba(0,0,0,.28);
  transform: translateX(105%);
  transition: transform .25s ease;
}
.generator-drawer.open { transform: translateX(0); }
.generator-drawer > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .3rem 1rem 3rem;
}
.generator-drawer h2 { font-family: "Special Elite", serif; font-weight: 400; }
.generator-drawer .icon-button { color: var(--ink); background: rgba(0,0,0,.06); }
.generator-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  padding-left: 3rem;
}
.generator-form .wide { grid-column: 1 / -1; }
.generated-progression { display: grid; gap: .65rem; margin: 1.4rem 0 1.2rem; padding-left: 3rem; }
.progression-line {
  display: flex;
  gap: .45rem;
  align-items: stretch;
  padding: .65rem;
  border: 1px dashed rgba(0,0,0,.25);
  background: rgba(255,255,255,.44);
  border-radius: 7px;
  cursor: pointer;
}
.progression-line.locked { border-style: solid; background: rgba(219,191,78,.18); }
.progression-line-number { width: 22px; color: var(--muted); font-size: .7rem; padding-top: .38rem; }
.progression-chords { display: flex; flex-wrap: wrap; gap: .35rem; }
.progression-chord {
  border: 0;
  border-radius: 5px;
  background: var(--ink);
  color: white;
  padding: .4rem .55rem;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
}
.generator-actions { display: flex; justify-content: flex-end; gap: .6rem; padding-left: 3rem; }
.generator-actions .button.ink { background: var(--ink); color: white; }
.generator-tip { padding-left: 3rem; margin-top: .8rem; color: var(--muted); font-size: .72rem; }


.idea-drawer {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  width: min(560px, 100vw);
  height: 100dvh;
  padding: 1.25rem;
  overflow-y: auto;
  background:
    linear-gradient(90deg, transparent 0 44px, var(--red-rule) 44px 46px, transparent 46px),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
    var(--paper-bright);
  box-shadow: -20px 0 55px rgba(0,0,0,.28);
  transform: translateX(105%);
  transition: transform .25s ease;
}
.idea-drawer.open { transform: translateX(0); }
.idea-drawer > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .3rem 1rem 3rem;
}
.idea-drawer > header > div { min-width: 0; }
.idea-drawer h2 { font-family: "Special Elite", serif; font-weight: 400; }
.idea-drawer header .subtle { margin-top: .35rem; line-height: 1.5; }
.idea-drawer .icon-button { flex: 0 0 auto; color: var(--ink); background: rgba(0,0,0,.06); }
.idea-mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  margin: .3rem 0 1rem;
  padding-left: 3rem;
}
.idea-mode-tabs button {
  min-width: 0;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 7px;
  padding: .58rem .35rem;
  background: rgba(255,255,255,.45);
  color: var(--muted);
  font: 600 .72rem "Inter", sans-serif;
}
.idea-mode-tabs button.active { background: var(--ink); border-color: var(--ink); color: white; }
.idea-mode-panel { display: none; padding: .25rem 0 1.5rem 3rem; }
.idea-mode-panel.active { display: block; }
.idea-mode-intro { margin-bottom: 1rem; color: var(--muted); line-height: 1.6; }
.idea-title-options { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.idea-title-options label { display: grid; gap: .35rem; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.idea-title-options select { min-width: 150px; }
.idea-result-card {
  min-height: 152px;
  display: grid;
  place-content: center;
  gap: .55rem;
  padding: 1.35rem;
  text-align: center;
  border: 1px dashed rgba(0,0,0,.28);
  border-radius: 10px;
  background: rgba(255,255,255,.5);
}
.idea-result-label { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.idea-result-card strong { font-family: "Special Elite", serif; font-size: clamp(2rem, 8vw, 3.3rem); font-weight: 400; line-height: 1.1; }
.idea-title-card strong { font-size: clamp(1.65rem, 6vw, 2.8rem); }
.idea-prompt-card { min-height: 132px; text-align: left; place-content: center start; }
.idea-prompt-card p { font-family: "Special Elite", serif; font-size: 1.08rem; line-height: 1.6; }
.idea-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.idea-actions.wrap { flex-wrap: wrap; }
.idea-collision-words { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .8rem; }
.idea-collision-words span {
  flex: 1 1 120px;
  padding: .75rem .85rem;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  background: rgba(219,191,78,.18);
  text-align: center;
  font-family: "Special Elite", serif;
  font-size: 1rem;
}
.full-seed { display: grid; gap: .7rem; }
.full-seed > div {
  padding: .9rem 1rem;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.48);
}
.full-seed span { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.full-seed strong { font-family: "Special Elite", serif; font-size: 1.45rem; font-weight: 400; }
.full-seed p { line-height: 1.55; }

.modal {
  width: min(540px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  border: 0;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  color: var(--ink);
}
.modal::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.modal-card {
  position: relative;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  background:
    linear-gradient(90deg, transparent 0 42px, var(--red-rule) 42px 44px, transparent 44px),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
    var(--paper-bright);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 12px;
  box-shadow: 0 28px 90px rgba(0,0,0,.35);
}
.modal-card > *:not(.modal-close) { margin-left: 2.5rem; }
.modal-close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
  font-size: 1.4rem;
}
.chord-modal { width: min(400px, calc(100vw - 2rem)); }
.chord-modal h2 { font-family: "IBM Plex Mono", monospace; font-size: 2.2rem; }
#chordDiagram svg { width: min(280px, 100%); height: auto; display: block; margin: 0 auto; }
.settings-card h2, .help-card h2 { font-family: "Special Elite", serif; font-weight: 400; }
.settings-tabs { display: flex; gap: .4rem; margin-bottom: 1.1rem !important; border-bottom: 1px solid rgba(0,0,0,.15); }
.settings-tabs button { padding: .65rem .7rem; border-bottom: 3px solid transparent; }
.settings-tabs button.active { border-bottom-color: var(--ink); font-weight: 700; }
.settings-panel { display: none; margin-left: 2.5rem; }
.settings-panel.active { display: block; }
.settings-panel > label { margin: 1rem 0; }
.settings-subsection {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.34);
}
.settings-subsection-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .85rem;
}
.settings-subsection-heading h3 { margin: 0 0 .2rem; }
.settings-subsection-heading p { margin: 0; font-size: .78rem; }
.range-setting {
  display: block;
  margin: .85rem 0;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.range-setting > span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
}
.range-setting output {
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0;
}
.range-setting input[type="range"] { width: 100%; }
.button.compact { min-height: 34px; padding: .45rem .65rem; font-size: .72rem; white-space: nowrap; }
.account-defaults-section { background: rgba(231,208,100,.12); }
#accountDefaultsNote[data-status="error"] { color: var(--danger); }
.toggle-row { display: flex !important; align-items: center; justify-content: space-between; gap: 1rem; }
.toggle-row input { width: 20px; height: 20px; }
.auth-form { display: grid; gap: .85rem; margin-top: 1rem; }
.auth-actions, .settings-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.auth-actions .button.ink, .settings-actions .button.ink { background: var(--ink); color: white; }
.form-message { color: var(--danger); font-size: .78rem; min-height: 1.1em; }
.about-app-icon { display: block; width: 150px; border-radius: 22px; margin-bottom: 1rem !important; }
.format-example { padding: 1rem; margin-bottom: 1rem !important; border: 1px dashed rgba(0,0,0,.25); background: rgba(255,255,255,.5); line-height: 1.8; }
.format-example code, code { font-family: "IBM Plex Mono", monospace; }

.toast-region {
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  gap: .5rem;
  pointer-events: none;
}
.toast {
  width: min(360px, calc(100vw - 2rem));
  padding: .8rem 1rem;
  border-radius: 8px;
  background: #111;
  color: white;
  box-shadow: 0 12px 38px rgba(0,0,0,.3);
  animation: toastIn .2s ease;
}
.toast.error { background: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1050px) {
  .app-shell { --library-width: 270px; }
  .write-layout { grid-template-columns: 1fr; }
  .notes-panel { border-radius: 9px; min-height: 0; }
  .meta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audio-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --topbar-height: calc(62px + var(--safe-top)); }
  body { overflow: hidden; }
  .desktop-only { display: none !important; }
  .mobile-only { display: inline-grid !important; }
  .app-shell, .app-shell.library-collapsed { --library-width: 0px; grid-template-columns: 1fr; }
  .app-shell.library-collapsed .library-panel {
    width: min(340px, 92vw);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .topbar {
    min-height: var(--topbar-height);
    padding: calc(6px + var(--safe-top)) max(8px, var(--safe-right)) 6px max(8px, var(--safe-left));
    gap: .45rem;
  }
  .brand { flex-basis: 146px; width: 146px; height: 44px; }
  .topbar-actions { gap: .35rem; }
  .sync-state { display: none; }
  .topbar .button { min-height: 40px; padding: .55rem .72rem; font-size: .78rem; }
  .topbar .icon-button { width: 40px; height: 40px; }
  .library-panel {
    position: fixed;
    inset: var(--topbar-height) auto 0 0;
    width: min(340px, 92vw);
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 20px 0 50px rgba(0,0,0,.35);
  }
  .library-panel.open { transform: translateX(0); }
  .workspace { grid-row: 2; }
  .song-header { margin: .55rem .55rem 0; padding: 1rem .85rem 1rem 2.75rem; }
  .song-title-input { font-size: 2rem; }
  .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tag-row { grid-template-columns: 1fr; align-items: stretch; }
  .tag-row label, .save-note { padding: 0; }
  .workspace-tabs { padding: .45rem .55rem; overflow-x: auto; }
  .tab, .tool-button { white-space: nowrap; font-size: .78rem; padding: .45rem .65rem; }
  .tabs-spacer { display: none; }
  .view-panel { padding: 0 .55rem 1.25rem; }
  .editor-panel { min-height: calc(100dvh - 310px); }
  .editor-toolbar { padding-left: 2.75rem; overflow-x: auto; flex-wrap: nowrap; }
  .editor-toolbar .toolbar-group, .write-text-controls { flex: 0 0 auto; }
  .write-text-controls { margin-left: .35rem; }
  .write-text-controls > span { display: none; }
  .song-editor { min-height: calc(100dvh - 360px); padding: 1rem .75rem 5rem 2.8rem; }
  .notes-panel { padding-left: 2.8rem; }
  .performance-toolbar { top: 49px; flex-direction: column; align-items: stretch; gap: .5rem; }
  .performance-controls { overflow-x: auto; }
  .song-sheet { padding: 2rem 1rem 7rem 3.2rem; }
  .song-sheet-header h1 { font-size: 1.8em; }
  .recorder-card, .recordings-card { padding: 1.5rem .85rem 1.5rem 3rem; }
  .metronome-block { grid-template-columns: 1fr; }
  .generator-drawer, .idea-drawer { padding: .8rem; }
  .generator-drawer > header, .generator-form, .generated-progression, .generator-actions, .generator-tip { padding-left: 2.5rem; }
  .idea-drawer > header, .idea-mode-tabs, .idea-mode-panel { padding-left: 2.5rem; }
}

@media (max-width: 470px) {
  .brand { flex-basis: 126px; width: 126px; }
  .topbar .button.ink { font-size: 0; width: 40px; padding: 0; }
  .topbar .button.ink::before { content: '+'; font-size: 1.3rem; }
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .generator-form { grid-template-columns: 1fr; }
  .generator-form .wide { grid-column: auto; }
  .generator-actions { flex-direction: column-reverse; }
  .generator-actions .button { width: 100%; }
  .modal-card { padding: 1rem .8rem 1.25rem; }
  .modal-card > *:not(.modal-close), .settings-panel { margin-left: 2.25rem; }
}

@media print {
  body { background: white; overflow: visible; }
  .topbar, .library-panel, .workspace-tabs, .performance-toolbar, .write-layout, #audioView { display: none !important; }
  .app-shell { display: block; height: auto; }
  .workspace { overflow: visible; background: white; }
  .view-panel { display: block !important; padding: 0; }
  .song-header { display: none; }
  .song-sheet { box-shadow: none; max-width: none; min-height: 0; margin: 0; padding: 1cm; background: white; }
}

.version-list { display: grid; gap: .65rem; margin-left: 2.5rem; margin-top: 1rem; }
.version-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem .8rem;
  padding: .8rem;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 7px;
  background: rgba(255,255,255,.48);
}
.version-item h3 { margin: 0; font-family: "Special Elite", serif; font-weight: 400; font-size: 1rem; }
.version-item p { grid-column: 1; margin: 0; color: var(--muted); font-size: .72rem; }
.version-actions { grid-row: 1 / 3; grid-column: 2; display: flex; gap: .35rem; align-items: center; }
.version-actions button { min-height: 34px; border: 1px solid rgba(0,0,0,.15); border-radius: 5px; background: rgba(255,255,255,.65); }
.version-actions .restore-version { padding: .35rem .55rem; font-weight: 700; }
.version-empty { padding: 1.5rem 0; color: var(--muted); font-family: "Special Elite", serif; }
.library-footer .import-drop-zone {
  display: grid;
  justify-items: center;
  gap: .08rem;
  width: 100%;
  margin-top: .55rem;
  padding: .55rem .65rem;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.library-footer .import-drop-zone.drag-over {
  border-color: rgba(224,186,79,.88);
  background: rgba(224,186,79,.12);
  transform: translateY(-1px);
}
.library-footer .import-drop-title {
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 700;
}
.library-footer .import-song-button {
  border: 0;
  padding: .08rem .25rem;
  background: transparent;
  color: rgba(255,255,255,.58);
  text-decoration: underline;
  font-size: .68rem;
}
.library-footer .import-song-button:hover,
.library-footer .import-song-button:focus-visible { color: white; }

/* Library modes, song details, and ordered lists */
.library-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  margin: 0 1rem .8rem;
  padding: .25rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}
.library-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,.58);
  font-size: .76rem;
  font-weight: 700;
}
.library-tabs button.active {
  background: var(--paper-bright);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.library-pane {
  display: none;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.library-pane.active { display: flex; }
.library-pane .song-list { flex: 1; }
.list-library-intro {
  padding: 0 1rem .65rem;
  color: rgba(255,255,255,.5);
  font-size: .73rem;
  line-height: 1.5;
}
.list-library-intro p { margin-bottom: 0; }
.list-card .song-card-key {
  min-width: 28px;
  text-align: center;
  border-radius: 999px;
  padding: .25rem .4rem;
  background: rgba(255,255,255,.09);
}
.list-card.active .song-card-key,
.list-card:hover .song-card-key { background: rgba(0,0,0,.08); }

.song-header-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.details-toggle {
  min-height: 38px;
  padding: .4rem .65rem;
  border: 1px solid rgba(0,0,0,.13);
  border-radius: 7px;
  background: rgba(255,255,255,.38);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}
.details-toggle:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.song-header.details-collapsed .meta-grid,
.song-header.details-collapsed .tag-row { display: none; }
.song-header.details-collapsed { padding-bottom: .75rem; }
.song-header.details-collapsed .song-title-wrap label { display: none; }
.song-header.details-collapsed .song-title-input {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  border-bottom-color: transparent;
  padding-bottom: 0;
}

.list-dialog { width: min(760px, calc(100vw - 2rem)); }
.list-editor-card { min-height: min(680px, calc(100dvh - 2rem)); }
.list-editor-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .75rem;
  margin-bottom: 1rem !important;
}
.list-title-input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.2);
  background: transparent;
  font-family: "Special Elite", serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1.15;
}
.list-editor-heading select,
.list-add-row input,
.list-notes-label textarea {
  width: 100%;
  border: 1px solid rgba(0,0,0,.17);
  border-radius: 6px;
  background: rgba(255,255,255,.55);
}
.list-editor-heading select { min-height: 40px; padding: .5rem; }
.list-notes-label {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.list-notes-label textarea {
  min-height: 74px;
  margin-top: .3rem;
  padding: .65rem;
  resize: vertical;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.list-add-block {
  margin: 1.25rem 0 0 !important;
  padding-top: 1rem;
  border-top: 1px dashed rgba(0,0,0,.18);
}
.list-add-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .55rem;
}
.list-add-heading strong {
  font-family: "Special Elite", serif;
  font-size: .9rem;
  font-weight: 400;
}
.list-add-heading span {
  color: var(--muted);
  font-size: .66rem;
}
.list-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
  margin-bottom: .45rem;
}
.list-add-row input { min-height: 42px; padding: .55rem .65rem; color: var(--ink); }
.list-add-row .button.ink { background: var(--ink); color: white; white-space: nowrap; }
.list-song-picker {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 7px;
  background: rgba(255,255,255,.4);
}
.list-song-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .48rem .6rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  cursor: pointer;
}
.list-song-choice:last-child { border-bottom: 0; }
.list-song-choice:hover { background: rgba(255,255,255,.6); }
.list-song-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.list-song-choice span { min-width: 0; display: grid; gap: .08rem; }
.list-song-choice strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.list-song-choice small { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.list-song-picker-empty { margin: 0; padding: .8rem; color: var(--muted); font-size: .75rem; }
.ordered-song-list { display: grid; gap: .5rem; margin-top: .5rem !important; }
.ordered-song-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "position title actions"
    "position meta actions";
  align-items: center;
  gap: .15rem .65rem;
  padding: .65rem .7rem;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 7px;
  background: rgba(255,255,255,.5);
}
.list-position {
  grid-area: position;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font: 600 .75rem "IBM Plex Mono", monospace;
}
.list-song-title {
  grid-area: title;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  color: var(--ink);
  font-family: "Special Elite", serif;
  font-size: 1rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-song-title:hover { text-decoration: underline; }
.list-song-meta { grid-area: meta; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.list-song-actions { grid-area: actions; display: flex; gap: .25rem; }
.list-song-actions button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 5px;
  background: rgba(255,255,255,.72);
}
.list-song-actions button:disabled { opacity: .28; cursor: default; }
.list-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem !important;
  padding-top: 1rem;
  border-top: 1px dashed rgba(0,0,0,.22);
}
.play-exit { font-weight: 700; }


/* Ordered list performance mode */
.list-play-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 !important;
  padding: .85rem;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px;
  background: rgba(255,255,255,.52);
}
.list-play-row > div { display: grid; gap: .2rem; min-width: 0; }
.list-play-row strong { font-family: "Special Elite", serif; font-size: 1rem; font-weight: 400; }
.list-play-row span { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.list-play-row .button { flex: 0 0 auto; }

.list-play-controls {
  order: -3;
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: .55rem;
  padding: .45rem;
  border: 1px solid rgba(0,0,0,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.48);
}
.list-play-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .08rem .75rem;
  align-items: center;
  min-width: 0;
}
.list-play-status span {
  overflow: hidden;
  font-family: "Special Elite", serif;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-play-status strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}
.list-play-status small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--muted);
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.performance-toolbar .list-play-controls button { font-weight: 700; white-space: nowrap; }
.performance-toolbar .list-play-controls .list-play-end { background: var(--ink); color: white; }
body.list-playback-active .song-sheet { border-top: 3px solid var(--ink); }

/* Backdrops belong behind drawers, not on top of them. */
.drawer-backdrop { z-index: 40; }
.generator-drawer, .idea-drawer { z-index: 60; }

@media (max-width: 760px) {
  .library-panel { z-index: 55; }

  /* Move the notebook rule left and keep all writing comfortably to its right. */
  .notebook-page {
    background:
      linear-gradient(90deg, transparent 0 28px, var(--red-rule) 28px 30px, transparent 30px),
      repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
      var(--paper-bright);
  }
  .editor-panel.notebook-page {
    background:
      linear-gradient(90deg, transparent 0 28px, var(--red-rule) 28px 30px, transparent 30px),
      var(--paper-bright);
  }
  .song-header { padding-left: 2.9rem; }
  .editor-toolbar { padding-left: 2.9rem; }
  .song-editor { padding-left: 2.95rem; }
  .notes-panel { padding-left: 2.95rem; }
  .song-sheet { padding-left: 3rem; }
  .recorder-card, .recordings-card { padding-left: 3rem; }

  .song-title-row { align-items: center; }
  .song-header-actions { align-self: flex-start; }
  .details-toggle { width: 40px; min-width: 40px; padding: 0; font-size: 0; }
  .details-toggle::before { content: '⌄'; font-size: 1rem; }
  .song-header.details-collapsed .details-toggle::before { content: '›'; }

  .modal-card {
    background:
      linear-gradient(90deg, transparent 0 24px, var(--red-rule) 24px 26px, transparent 26px),
      repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
      var(--paper-bright);
  }

  /* iOS home-screen apps can otherwise place dialogs beneath the status area. */
  .modal {
    width: min(540px, calc(100vw - 1rem - var(--safe-left) - var(--safe-right)));
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1rem);
  }
  #settingsDialog.modal {
    margin: calc(var(--safe-top) + .5rem) auto calc(var(--safe-bottom) + .5rem);
  }
  #settingsDialog .settings-card {
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1rem);
    scroll-padding-top: 3.4rem;
  }
  #settingsDialog .settings-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-top: .2rem;
    background: rgba(255, 253, 246, .97);
    box-shadow: 0 5px 8px rgba(247, 241, 223, .92);
  }
  .modal-card > *:not(.modal-close),
  .settings-panel,
  .version-list { margin-left: 1.65rem; }
  .settings-subsection-heading { flex-direction: column; }
  .settings-subsection-heading .button { width: 100%; }
  .generator-drawer, .idea-drawer {
    padding: calc(.8rem + var(--safe-top)) calc(.8rem + var(--safe-right)) calc(.8rem + var(--safe-bottom)) calc(.8rem + var(--safe-left));
    background:
      linear-gradient(90deg, transparent 0 24px, var(--red-rule) 24px 26px, transparent 26px),
      repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
      var(--paper-bright);
  }
  .generator-drawer > header,
  .generator-form,
  .generated-progression,
  .generator-actions,
  .generator-tip,
  .idea-drawer > header,
  .idea-mode-tabs,
  .idea-mode-panel { padding-left: 1.7rem; }

  .list-editor-heading { grid-template-columns: 1fr; }
  .list-play-row { align-items: stretch; flex-direction: column; }
  .list-play-row .button { width: 100%; }
  .list-add-row { grid-template-columns: 1fr; }
  .list-editor-footer { align-items: stretch; flex-direction: column; }
  .list-editor-footer .button { width: 100%; }

  /* Play mode becomes the whole mobile app, with one clear way back. */
  body.mobile-play-mode { overflow: hidden; background: var(--paper-bright); }
  body.mobile-play-mode .app-shell {
    display: block;
    height: 100dvh;
  }
  body.mobile-play-mode .topbar,
  body.mobile-play-mode .library-panel,
  body.mobile-play-mode .song-header,
  body.mobile-play-mode .workspace-tabs,
  body.mobile-play-mode #writeView,
  body.mobile-play-mode #audioView { display: none !important; }
  body.mobile-play-mode .workspace {
    height: 100dvh;
    overflow: auto;
    background: var(--paper-bright);
  }
  body.mobile-play-mode .song-workspace,
  body.mobile-play-mode #playView { min-height: 100dvh; }
  body.mobile-play-mode #playView { display: block !important; padding: 0; }
  body.mobile-play-mode .performance-toolbar {
    top: 0;
    margin: 0;
    padding: max(.5rem, var(--safe-top)) .55rem .55rem;
    border-radius: 0;
    background: rgba(247,241,223,.97);
  }
  body.mobile-play-mode .list-play-controls {
    order: -3;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    padding: .35rem;
  }
  body.mobile-play-mode .list-play-controls .list-play-end { display: none; }
  body.mobile-play-mode .list-play-status span { font-size: .9rem; }
  body.mobile-play-mode .list-play-status small { font-size: .62rem; }
  body.mobile-play-mode .performance-toolbar .play-exit {
    order: -2;
    display: inline-flex !important;
    align-self: flex-start;
    min-height: 34px;
    padding: .35rem .65rem;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    background: var(--ink);
    color: white;
  }
  body.mobile-play-mode .transpose-controls,
  body.mobile-play-mode .performance-controls,
  body.mobile-play-mode .play-recorder-controls { width: 100%; }
  body.mobile-play-mode .performance-controls { overflow-x: auto; padding-bottom: .1rem; }
  body.mobile-play-mode .custom-scroll-control { flex: 0 0 auto; }
  body.mobile-play-mode .play-recorder-controls {
    order: -1;
    margin-left: 0;
    padding: 0 0 .5rem;
    border-left: 0;
    border-bottom: 1px solid rgba(0,0,0,.12);
  }
  body.mobile-play-mode .play-record-status { min-width: 4.4rem; }
  body.mobile-play-mode .play-record-button { margin-left: auto; min-width: 108px; }
  body.mobile-play-mode .play-record-button.recording { min-width: 148px; }
  body.mobile-play-mode .song-sheet {
    min-height: calc(100dvh - 126px);
    margin: 0;
    padding: 1.6rem max(1rem, var(--safe-right)) max(6rem, var(--safe-bottom)) max(3rem, calc(2.2rem + var(--safe-left)));
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 470px) {
  body.mobile-play-mode .list-play-controls {
    grid-template-columns: 42px minmax(0, 1fr) 68px;
    gap: .35rem;
  }
  body.mobile-play-mode .list-play-controls > button {
    min-width: 0;
    padding: .35rem .4rem;
    font-size: .68rem;
  }
  body.mobile-play-mode .list-play-controls #listPlayPrevious { font-size: 0; }
  body.mobile-play-mode .list-play-controls #listPlayPrevious::after { content: '←'; font-size: .9rem; }
  .ordered-song-item {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "position title"
      "position meta"
      "actions actions";
  }
  .list-song-actions { justify-content: flex-end; padding-top: .35rem; }
}

.release-date-field input { font-variant-numeric: tabular-nums; }


/* Key-aware solo guide */
.solo-tool-button span { font-family: "IBM Plex Mono", monospace; }
.solo-dialog { width: min(1040px, calc(100vw - 2rem)); }
.solo-card { max-height: min(900px, calc(100dvh - 2rem)); overflow-y: auto; }
.solo-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  align-items: end;
  gap: 1rem;
}
.solo-heading h2 { margin-bottom: .35rem; font-family: "Special Elite", serif; font-size: clamp(2rem, 5vw, 3.15rem); font-weight: 400; }
.solo-heading label {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.solo-heading select {
  width: 100%;
  min-height: 42px;
  margin-top: .3rem;
  padding: .55rem .65rem;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 6px;
  background: rgba(255,255,255,.6);
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}
.solo-scale-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .75fr);
  gap: 1rem;
  align-items: center;
  margin-top: 1.1rem !important;
  padding: .9rem 1rem;
  border: 1px dashed rgba(0,0,0,.22);
  background: rgba(231,208,100,.15);
}
.solo-note-strip { display: flex; flex-wrap: wrap; gap: .4rem; }
.solo-note {
  min-width: 42px;
  padding: .42rem .55rem;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  font: 600 .78rem "IBM Plex Mono", monospace;
  text-align: center;
}
.solo-note.root { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.solo-scale-tip { margin: 0; color: var(--ink-soft); font-family: "Special Elite", serif; line-height: 1.55; }
.solo-section { margin-top: 1.2rem !important; padding-top: 1rem; border-top: 1px dashed rgba(0,0,0,.22); }
.solo-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.solo-section-heading h3 { margin-bottom: 0; font-family: "Special Elite", serif; font-size: 1.35rem; font-weight: 400; }
.solo-section-heading > p { max-width: 34ch; margin-bottom: 0; text-align: right; }
.solo-fretboard-wrap {
  margin-top: .75rem;
  overflow-x: auto;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 8px;
  background: #2a241d;
  box-shadow: inset 0 0 28px rgba(0,0,0,.25);
}
.solo-fretboard {
  min-width: 790px;
  display: grid;
  grid-template-columns: 38px repeat(13, minmax(52px, 1fr));
  color: rgba(255,255,255,.86);
}
.fret-corner, .fret-number, .string-label, .fret-cell { min-height: 38px; display: grid; place-items: center; }
.fret-corner, .fret-number { min-height: 30px; color: rgba(255,255,255,.56); font: 500 .65rem "IBM Plex Mono", monospace; }
.string-label { border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72); font: 600 .72rem "IBM Plex Mono", monospace; }
.fret-cell {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.14);
  border-left: 2px solid rgba(212,191,145,.42);
  background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 50%, rgba(0,0,0,.08));
}
.fret-cell.open { border-left-width: 4px; border-left-color: rgba(238,224,190,.88); }
.fret-cell::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(232,219,184,.54); }
.fret-note {
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d8aa3f;
  color: #211a10;
  box-shadow: 0 2px 7px rgba(0,0,0,.32);
  font: 700 .63rem "IBM Plex Mono", monospace;
}
.fret-note.root { background: #111; color: white; outline: 2px solid #efe2bd; }
.solo-riff-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .75rem; }
.solo-riff-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  padding: .8rem;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px;
  background: rgba(255,255,255,.5);
}
.solo-riff-card h4 { margin: 0 0 .25rem; font-family: "Special Elite", serif; font-size: 1rem; font-weight: 400; }
.solo-riff-card p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.riff-notes { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .55rem; }
.riff-note {
  min-width: 28px;
  padding: .25rem .32rem;
  border-radius: 4px;
  background: rgba(224,186,79,.22);
  font: 600 .67rem "IBM Plex Mono", monospace;
  text-align: center;
}
.riff-rest { color: var(--muted); background: rgba(0,0,0,.05); }
.play-riff-button {
  align-self: center;
  min-height: 38px;
  padding: .45rem .62rem;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 6px;
  background: var(--ink);
  color: white;
  font-weight: 700;
}
.play-riff-button.active { background: var(--danger); }
.solo-footer { display: flex; align-items: center; gap: 1rem; margin-top: 1rem !important; }
.solo-footer p { margin: 0; }

/* Explicit PWA installation controls */
.install-app-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem !important;
  padding: 1rem;
  border: 1px dashed rgba(0,0,0,.24);
  background: rgba(231,208,100,.14);
}
.install-app-card h3 { margin-bottom: .25rem; font-family: "Special Elite", serif; font-weight: 400; }
.install-app-card p { margin-bottom: 0; }
.install-app-card .button.ink, .install-dialog-card .button.ink { flex: 0 0 auto; background: var(--ink); color: white; }
.install-steps { margin: .8rem 0 1rem 4.1rem !important; padding-left: 1.1rem; line-height: 1.65; }
.install-dialog-card { max-width: 620px; }

@media (max-width: 760px) {
  .solo-heading, .solo-scale-summary { grid-template-columns: 1fr; }
  .solo-section-heading { align-items: flex-start; flex-direction: column; }
  .solo-section-heading > p { text-align: left; }
  .solo-riff-list { grid-template-columns: 1fr; }
  .solo-footer { align-items: stretch; flex-direction: column; }
  .solo-footer .button { width: 100%; }
  .install-app-card { align-items: stretch; flex-direction: column; }
  .install-app-card .button { width: 100%; }
}

@media (max-width: 470px) {
  .solo-dialog { width: calc(100vw - .5rem); }
  .solo-card { max-height: calc(100dvh - .5rem); }
}

/* Google Drive backup (v11) */
.settings-tabs {
  overflow-x: auto;
  scrollbar-width: thin;
}
.settings-tabs button { flex: 0 0 auto; }
.backup-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.backup-heading h3 { margin-bottom: .25rem; }
.backup-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
  min-width: 150px;
}
.backup-counts span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .3rem .5rem;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
}
.connection-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .3rem .55rem;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.connection-badge.connected {
  border-color: rgba(37,112,63,.28);
  background: rgba(37,112,63,.12);
  color: #225f38;
}
.connection-badge.muted { opacity: .68; }
.backup-option {
  margin: .75rem 0 !important;
  padding: .7rem .75rem;
  border-radius: 7px;
  background: rgba(255,255,255,.35);
}
.backup-option span { display: grid; gap: .16rem; }
.backup-option small {
  max-width: 52ch;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
.backup-actions { margin-top: 1rem; }
.backup-progress {
  margin-top: 1rem;
  padding: .75rem;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 7px;
  background: rgba(255,255,255,.4);
}
.backup-progress progress {
  width: 100%;
  height: 12px;
  accent-color: var(--ink);
}
.backup-progress p { margin: .4rem 0 0; }
.backup-message { margin: .75rem 0 .25rem; }
.backup-message.success { color: #225f38; }
.backup-last { margin: .5rem 0; }
.future-provider { opacity: .8; }

@media (max-width: 760px) {
  .backup-heading { flex-direction: column; }
  .backup-counts { justify-content: flex-start; min-width: 0; }
  .backup-actions .button { width: 100%; }
  .connection-badge { align-self: flex-start; }
}


/* Managed artist / project catalog */
.project-settings-heading { margin-bottom: 1rem; }
.project-create-form { margin: 0 0 1rem 2.5rem; }
.project-create-form > label { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.project-create-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; margin-top: .45rem; }
.project-create-row input,
.project-manager-main input { width: 100%; min-height: 42px; padding: .65rem .75rem; border: 1px solid rgba(0,0,0,.2); border-radius: 5px; background: rgba(255,255,255,.7); color: var(--ink); font: inherit; }
.project-manager-list { display: grid; gap: .7rem; margin-left: 2.5rem; }
.project-manager-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; padding: 1rem; border: 1px solid rgba(0,0,0,.14); border-radius: 7px; background: rgba(255,255,255,.35); }
.project-manager-row.archived { opacity: .7; background: rgba(0,0,0,.035); }
.project-manager-main label { display: block; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.project-manager-main p { margin: .4rem 0 0; color: var(--muted); font-size: .82rem; }
.project-manager-actions { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.project-manager-actions button:disabled { opacity: .35; cursor: not-allowed; }
.project-manager-help { margin: 1rem 0 0 2.5rem; }
@media (max-width: 760px) {
  .project-create-form,
  .project-manager-list,
  .project-manager-help { margin-left: 2.25rem; }
  .project-manager-row { grid-template-columns: 1fr; align-items: stretch; }
  .project-manager-actions { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .project-create-row { grid-template-columns: 1fr; }
  .project-create-row .button { width: 100%; }
}


@media (max-width: 560px) {
  .idea-mode-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idea-actions, .idea-actions.wrap { flex-direction: column-reverse; }
  .idea-actions .button { width: 100%; }
  .idea-result-card { min-height: 132px; }
}


/* Composed identity */
.settings-brand-note {
  margin: -.4rem 0 .8rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Mobile Play is a focus surface rather than another stacked app screen. */
@media (max-width: 760px) {
  body.mobile-play-mode .performance-toolbar {
    position: static;
    top: auto;
    z-index: auto;
    display: block;
    min-height: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }

  body.mobile-play-mode .performance-toolbar .play-exit {
    position: fixed;
    top: max(.55rem, var(--safe-top));
    right: max(.65rem, var(--safe-right));
    z-index: 45;
    display: grid !important;
    place-items: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 0 .08rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(16,16,16,.9);
    box-shadow: 0 8px 24px rgba(0,0,0,.24);
    color: white;
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1;
    backdrop-filter: blur(12px);
  }

  body.mobile-play-mode .transpose-controls,
  body.mobile-play-mode .play-recorder-controls {
    display: none !important;
  }

  body.mobile-play-mode .performance-controls {
    position: fixed;
    left: 50%;
    bottom: max(.65rem, var(--safe-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    width: max-content;
    max-width: calc(100vw - max(1rem, var(--safe-left)) - max(1rem, var(--safe-right)));
    padding: .38rem;
    gap: .32rem;
    overflow-x: auto;
    border: 1px solid rgba(0,0,0,.13);
    border-radius: 12px;
    background: rgba(247,241,223,.96);
    box-shadow: 0 10px 32px rgba(0,0,0,.2);
    transform: translateX(-50%);
    transition: opacity .18s ease, transform .18s ease;
    backdrop-filter: blur(14px);
  }

  body.mobile-play-mode .performance-controls #wakeLockButton {
    display: none;
  }

  body.mobile-play-mode .performance-controls button,
  body.mobile-play-mode .performance-controls select {
    flex: 0 0 auto;
    min-height: 40px;
    padding: .42rem .58rem;
    font-size: .74rem;
  }

  body.mobile-play-mode .performance-controls #fontDown,
  body.mobile-play-mode .performance-controls #fontUp,
  body.mobile-play-mode .performance-controls .play-fullscreen-button {
    min-width: 40px;
    padding-inline: .45rem;
  }

  body.mobile-play-mode .custom-scroll-control {
    flex: 0 0 auto;
    min-height: 40px;
  }

  body.mobile-play-mode .list-play-controls {
    position: fixed;
    left: max(.65rem, var(--safe-left));
    right: max(.65rem, var(--safe-right));
    bottom: calc(max(.65rem, var(--safe-bottom)) + 58px);
    z-index: 39;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 72px;
    align-items: center;
    width: auto;
    margin: 0;
    padding: .35rem;
    gap: .35rem;
    border: 1px solid rgba(0,0,0,.13);
    border-radius: 12px;
    background: rgba(247,241,223,.96);
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    transition: opacity .18s ease, transform .18s ease;
    backdrop-filter: blur(14px);
  }

  body.mobile-play-mode .list-play-controls.hidden { display: none; }
  body.mobile-play-mode .list-play-controls .list-play-end { display: none; }
  body.mobile-play-mode .list-play-controls > button {
    min-width: 0;
    min-height: 40px;
    padding: .35rem .4rem;
    font-size: .68rem;
  }
  body.mobile-play-mode .list-play-controls #listPlayPrevious { font-size: 0; }
  body.mobile-play-mode .list-play-controls #listPlayPrevious::after { content: '←'; font-size: .95rem; }
  body.mobile-play-mode .list-play-status span { font-size: .78rem; }
  body.mobile-play-mode .list-play-status strong { font-size: .72rem; }
  body.mobile-play-mode .list-play-status small { display: none; }

  body.mobile-play-mode .song-sheet {
    min-height: 100dvh;
    margin: 0;
    padding:
      max(1.45rem, calc(var(--safe-top) + .8rem))
      max(3.6rem, calc(var(--safe-right) + 3.15rem))
      max(7.4rem, calc(var(--safe-bottom) + 6.4rem))
      max(3rem, calc(var(--safe-left) + 2.2rem));
    border-radius: 0;
    box-shadow: none;
  }

  body.mobile-play-mode.list-playback-active .song-sheet {
    padding-bottom: max(10.8rem, calc(var(--safe-bottom) + 9.8rem));
  }

  body.mobile-play-mode .song-sheet-header {
    margin-bottom: 1.15rem;
    padding-bottom: .72rem;
  }

  body.mobile-play-mode .song-sheet-header h1 {
    max-width: calc(100vw - 7.2rem);
    margin-bottom: .32rem;
    font-size: 1.65em;
    line-height: 1.05;
  }

  body.mobile-play-mode .song-sheet-meta {
    gap: .35rem .6rem;
    font-size: .58em;
  }

  body.mobile-play-mode.play-immersive-mode .performance-controls,
  body.mobile-play-mode.play-immersive-mode .list-play-controls {
    opacity: 0;
    pointer-events: none;
  }

  body.mobile-play-mode.play-immersive-mode .performance-controls {
    transform: translate(-50%, 18px);
  }

  body.mobile-play-mode.play-immersive-mode .list-play-controls {
    transform: translateY(18px);
  }

  body.mobile-play-mode.play-immersive-mode.play-controls-visible .performance-controls,
  body.mobile-play-mode.play-immersive-mode.play-controls-visible .list-play-controls {
    opacity: 1;
    pointer-events: auto;
  }

  body.mobile-play-mode.play-immersive-mode.play-controls-visible .performance-controls {
    transform: translateX(-50%);
  }

  body.mobile-play-mode.play-immersive-mode.play-controls-visible .list-play-controls {
    transform: translateY(0);
  }

  body.mobile-play-mode.play-immersive-mode .song-sheet {
    padding-bottom: max(2.75rem, calc(var(--safe-bottom) + 2rem));
  }

  body.mobile-play-mode.play-immersive-mode .song-sheet-header {
    margin-bottom: .9rem;
    padding-bottom: .55rem;
  }

  body.mobile-play-mode.play-immersive-mode .song-sheet-meta {
    display: none;
  }
}


/* v1.0.25 — chord-shape key detection and concert-chord view */
.meta-field { min-width: 0; }
.meta-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
}
.meta-label-row label { margin: 0; }
.meta-inline-button {
  min-height: 24px;
  padding: .18rem .42rem;
  border: 1px solid rgba(17,16,14,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.52);
  color: var(--ink-soft);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.meta-inline-button:disabled { opacity: .48; cursor: default; }
.key-detection-field small {
  display: block;
  min-height: 2.2em;
  margin-top: .28rem;
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.3;
}
#concertChordButton {
  min-width: 112px;
  font-weight: 750;
}
#concertChordButton:disabled { opacity: .48; cursor: default; }

@media (max-width: 760px) {
  body.mobile-play-mode #concertChordButton {
    flex: 0 0 auto;
    min-width: 104px;
  }
}

/* The Study integration --------------------------------------------------- */
.study-switcher {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: white;
  text-decoration: none;
}
.study-switcher img { width: 42px; height: 42px; border-radius: 10px; flex: 0 0 auto; }
.study-switcher span { display: flex; flex-direction: column; line-height: 1; }
.study-switcher small { color: rgba(255,255,255,.5); font-size: .55rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.study-switcher strong { margin-top: 5px; font-family: "Special Elite", serif; font-size: 1rem; font-weight: 400; }
.composed-wordmark {
  flex: 0 0 auto;
  width: auto;
  height: 44px;
  min-width: 132px;
  padding: 4px 13px 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-left: 1px solid rgba(255,255,255,.13);
  border-radius: 0;
  background: transparent;
  color: white;
}
.composed-wordmark > span { font: 500 1rem/1 "Special Elite", serif; letter-spacing: .1em; }
.composed-wordmark > small { margin-top: 5px; color: rgba(255,255,255,.45); font-size: .52rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.composed-wordmark:hover { background: rgba(255,255,255,.035); }
.notebook-page { box-shadow: 0 18px 48px rgba(0,0,0,.18); }
@media (max-width: 740px) {
  .study-switcher span { display: none; }
  .study-switcher img { width: 38px; height: 38px; }
  .composed-wordmark { min-width: 0; padding: 3px 8px; }
  .composed-wordmark > span { font-size: .88rem; letter-spacing: .07em; }
  .composed-wordmark > small { display: none; }
}
@media (max-width: 480px) {
  .topbar { gap: .45rem; padding-right: 8px; padding-left: 8px; }
  .composed-wordmark { display: none; }
}


/* v1.0.26 — fitted column layout for Play view */
.play-layout-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 7px;
  background: rgba(255,255,255,.42);
}
.performance-controls .play-layout-toggle button {
  min-height: 30px;
  padding: .32rem .56rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
}
.performance-controls .play-layout-toggle button.active {
  background: var(--ink);
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.song-sheet-body { min-width: 0; }
.song-sheet.is-column-layout {
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: 1.35rem 1.25rem 1.25rem;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
    var(--paper-bright);
  font-size: var(--column-preview-size, var(--preview-size));
}
.song-sheet.is-column-layout .song-sheet-header {
  margin-bottom: .85rem;
  padding-bottom: .65rem;
}
.song-sheet.is-column-layout .song-sheet-header h1 {
  margin-bottom: .25rem;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.05;
}
.song-sheet.is-column-layout .song-sheet-meta {
  gap: .3rem .65rem;
  font-size: .62rem;
}
.song-sheet.is-column-layout .song-sheet-body {
  overflow: hidden;
  column-fill: auto;
  column-rule: 1px solid rgba(0,0,0,.12);
}
.song-sheet.is-column-layout .rendered-line,
.song-sheet.is-column-layout .song-section-title,
.song-sheet.is-column-layout .song-empty-preview {
  break-inside: avoid-column;
  page-break-inside: avoid;
}
.song-sheet.is-column-layout .song-section-title {
  margin-top: .8em;
  break-after: avoid-column;
}
.song-sheet.is-column-layout .rendered-line {
  min-height: 1.55em;
  margin: .05em 0 .16em;
  line-height: 1.12;
}
.song-sheet.is-column-layout .rendered-line.plain { line-height: 1.35; }
.song-sheet.is-column-layout .column-fit-overflow {
  overflow-x: auto;
  scrollbar-width: thin;
}
body.play-columns-mode #autoScrollButton,
body.play-columns-mode #scrollSpeed,
body.play-columns-mode #customScrollWrap { display: none !important; }
body.play-columns-mode #playView {
  padding-right: .65rem;
  padding-left: .65rem;
}

@media (max-width: 760px) {
  body.mobile-play-mode.play-columns-mode .song-sheet {
    min-height: 100dvh;
    height: 100dvh;
    padding:
      max(.8rem, calc(var(--safe-top) + .45rem))
      max(.65rem, var(--safe-right))
      max(.7rem, var(--safe-bottom))
      max(.65rem, var(--safe-left));
  }
  body.mobile-play-mode.play-columns-mode .song-sheet-header h1 {
    max-width: calc(100vw - 4rem);
    font-size: 1.35rem;
  }
  body.mobile-play-mode.play-columns-mode .song-sheet-meta {
    max-width: calc(100vw - 4rem);
    font-size: .52rem;
  }
  body.mobile-play-mode .performance-controls .play-layout-toggle button {
    min-height: 36px;
    padding: .38rem .5rem;
    font-size: .66rem;
  }
}


/* v1.0.27 — collapsible library + dedicated iPad layout ------------------ */
body.ipad-device {
  --topbar-height: calc(66px + var(--safe-top));
}
body.ipad-device .app-shell { --library-width: 252px; }
body.ipad-device .app-shell.library-collapsed { --library-width: 0px; }
body.ipad-device .topbar {
  min-height: var(--topbar-height);
  gap: .55rem;
  padding:
    calc(7px + var(--safe-top))
    max(12px, var(--safe-right))
    7px
    max(12px, var(--safe-left));
}
body.ipad-device .study-switcher img { width: 40px; height: 40px; }
body.ipad-device .composed-wordmark { display: none; }
body.ipad-device .topbar-actions { gap: .42rem; }
body.ipad-device .topbar .button,
body.ipad-device .topbar .icon-button,
body.ipad-device .library-collapse-toggle,
body.ipad-device .tab,
body.ipad-device .tool-button,
body.ipad-device .performance-toolbar button,
body.ipad-device .performance-toolbar select {
  min-height: 44px;
}
body.ipad-device .library-collapse-toggle { width: 44px; height: 44px; }
body.ipad-device .library-heading { padding: 1rem 1rem .65rem; }
body.ipad-device .song-card { padding: .64rem .68rem; }
body.ipad-device .workspace-tabs { padding: .5rem .7rem; gap: .28rem; }
body.ipad-device .tab,
body.ipad-device .tool-button { padding: .52rem .68rem; font-size: .76rem; }
body.ipad-device .song-header { margin: .7rem .7rem 0; }
body.ipad-device .view-panel { padding-right: .7rem; padding-left: .7rem; }
body.ipad-device .write-layout { grid-template-columns: 1fr; }
body.ipad-device .notes-panel { min-height: 0; }
body.ipad-device .meta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Play on iPad is a stage-sized surface, not an enlarged phone view. */
body.ipad-device.ipad-play-mode .song-header { display: none; }
body.ipad-device.ipad-play-mode .workspace-tabs {
  top: 0;
  padding-top: .4rem;
  padding-bottom: .4rem;
}
body.ipad-device.ipad-play-mode .performance-toolbar {
  top: 53px;
  gap: .45rem .6rem;
  margin-right: -.7rem;
  margin-left: -.7rem;
  padding: .45rem .7rem;
}
body.ipad-device.ipad-play-mode .performance-controls,
body.ipad-device.ipad-play-mode .transpose-controls,
body.ipad-device.ipad-play-mode .play-recorder-controls {
  gap: .32rem;
}
body.ipad-device.ipad-play-mode .performance-toolbar button,
body.ipad-device.ipad-play-mode .performance-toolbar select {
  padding: .42rem .58rem;
  font-size: .72rem;
}
body.ipad-device.ipad-play-mode .song-sheet {
  margin-top: 0;
  min-height: calc(100dvh - var(--topbar-height) - 106px);
}
body.ipad-device.ipad-play-mode.play-columns-mode #playView {
  padding-right: .4rem;
  padding-left: .4rem;
}
body.ipad-device.ipad-play-mode.play-columns-mode .song-sheet {
  min-height: calc(100dvh - var(--topbar-height) - 106px);
  height: calc(100dvh - var(--topbar-height) - 106px);
  padding: 1rem 1rem .85rem;
}

@media (orientation: portrait) {
  body.ipad-device .app-shell { --library-width: 228px; }
  body.ipad-device .sync-state { min-width: 16px; }
  body.ipad-device .sync-state #syncText { display: none; }
  body.ipad-device #checkpointButton { display: none !important; }
  body.ipad-device .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ipad-device.ipad-play-mode .performance-toolbar {
    align-items: stretch;
  }
  body.ipad-device.ipad-play-mode .play-recorder-controls {
    flex: 1 0 100%;
    margin-left: 0;
    padding-top: .4rem;
    padding-left: 0;
    border-top: 1px solid rgba(0,0,0,.1);
    border-left: 0;
  }
}

@media (orientation: landscape) {
  body.ipad-device.ipad-play-mode .song-sheet:not(.is-column-layout) {
    max-width: 1040px;
  }
}


/* v1.0.32 — mobile library drawer repair ----------------------------------
   Keep the song library as a contained mobile surface instead of allowing
   desktop sidebar styles / iOS viewport changes to make its white type appear
   to float over the workspace. */
@media (max-width: 760px) {
  body.mobile-library-open { overscroll-behavior: none; }
  body.mobile-library-open .drawer-backdrop { z-index: 70; }

  .library-panel {
    inset: 0 auto 0 0;
    z-index: 80;
    width: min(360px, calc(100vw - 38px));
    max-width: 94vw;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    isolation: isolate;
    border-right: 1px solid rgba(255,255,255,.14);
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), transparent 180px),
      #111;
    box-shadow: 18px 0 48px rgba(0,0,0,.48);
    transform: translate3d(-104%, 0, 0);
    will-change: transform;
  }
  .library-panel.open { transform: translate3d(0, 0, 0); }

  .library-heading {
    flex: 0 0 auto;
    align-items: center;
    padding:
      calc(.72rem + var(--safe-top))
      max(.75rem, var(--safe-right))
      .55rem
      max(.85rem, var(--safe-left));
    border-bottom: 1px solid rgba(255,255,255,.075);
    background: #111;
  }
  .library-heading h1 { font-size: 1.14rem; }
  .library-heading .eyebrow { margin-bottom: .2rem; font-size: .58rem; }
  .library-heading .icon-button {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.075);
  }

  .library-tabs {
    flex: 0 0 auto;
    margin: .6rem .75rem .55rem;
  }
  .library-tabs button { min-height: 38px; }

  .library-pane,
  .library-pane.active {
    min-height: 0;
    overflow: hidden;
  }
  .library-pane.active { display: flex; }
  .search-box { flex: 0 0 auto; margin: 0 .75rem .5rem; }
  .filter-row { flex: 0 0 auto; padding: 0 .75rem .5rem; }
  .list-library-intro { flex: 0 0 auto; padding: 0 .85rem .55rem; }

  .library-pane .song-list {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 .5rem .55rem;
  }
  .song-card {
    min-height: 44px;
    padding: .55rem .62rem;
  }

  .library-footer {
    flex: 0 0 auto;
    margin-top: 0;
    padding: .65rem .8rem calc(.65rem + var(--safe-bottom));
    border-top-color: rgba(255,255,255,.09);
    background: #111;
  }
  .library-footer .button { min-height: 40px; }
  .library-footer .import-drop-zone { margin-top: .45rem; padding: .42rem .55rem; }
  .library-footer .import-batch-note { display: none; }
  .library-footer p { margin-top: .4rem; font-size: .62rem; }
}


/* v1.0.33 — iOS-safe mobile library layer ---------------------------------
   iOS Safari/PWA can composite a blurred backdrop in front of a transformed
   fixed sibling even when the intended z-index order is the opposite. Keep the
   mobile library on its own opaque layer and use a separate, non-blurred scrim. */
.library-scrim { display: none; }

@media (max-width: 760px) {
  body.mobile-library-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.mobile-library-open .library-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0,0,0,.56);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    touch-action: none;
  }

  .library-panel,
  .app-shell.library-collapsed .library-panel {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: -100vw !important;
    z-index: 10000 !important;
    width: min(360px, calc(100vw - 38px)) !important;
    max-width: 94vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    color: rgba(255,255,255,.94) !important;
    background: #111 !important;
    background-color: #111 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 18px 0 48px rgba(0,0,0,.52) !important;
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: isolate;
    transition: left .22s ease;
    will-change: left;
  }

  .library-panel.open,
  .app-shell.library-collapsed .library-panel.open {
    left: 0 !important;
  }

  .library-panel .library-heading,
  .library-panel .library-tabs,
  .library-panel .search-box,
  .library-panel .filter-row,
  .library-panel .library-pane,
  .library-panel .library-footer {
    position: relative;
    z-index: 1;
  }

  .library-panel .library-heading,
  .library-panel .library-footer,
  .library-panel .library-pane {
    background-color: #111 !important;
  }
}