:root {
  color-scheme: dark;
  --bg: #0d1411;
  --surface: #131d18;
  --surface-2: #1a2821;
  --line: #2a3a32;
  --text: #f4f2e9;
  --muted: #9aa79f;
  --lime: #c9f15a;
  --lime-dark: #91bd23;
  --coral: #ff826d;
  --paper: #f3efdf;
  --ink: #182019;
  --shadow: 0 20px 70px rgba(0, 0, 0, .28);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 75% 10%, rgba(201, 241, 90, .09), transparent 27rem), var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(201, 241, 90, .65); outline-offset: 2px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .8rem 1rem; background: var(--lime); color: #101810; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.hidden { display: none !important; }
button:disabled { opacity: .55; cursor: not-allowed; }
.main:focus { outline: none; }
.offline-status { margin: .7rem .3rem 0; color: var(--lime); font-size: .72rem; line-height: 1.5; }
.hero-copy > .install-hint { font-size: .78rem; margin-top: 1.5rem; }
.file-button:focus-within { outline: 3px solid var(--lime); outline-offset: 2px; }
.song-item { flex-shrink: 0; }

.app-shell { min-height: 100vh; display: grid; grid-template: 76px minmax(0, 1fr) / 285px minmax(0, 1fr); grid-template-areas: "top top" "side main"; }
.topbar { grid-area: top; position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 0 1.4rem; border-bottom: 1px solid var(--line); background: rgba(13, 20, 17, .9); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: .8rem; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px 12px 12px 3px; color: #101810; background: var(--lime); font-family: Georgia, serif; font-size: 1.55rem; font-weight: 800; transform: rotate(-4deg); }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: -.02em; font-size: 1.05rem; }
.brand small { margin-top: .08rem; color: var(--muted); font-size: .72rem; }
.top-actions, .toolbar-actions, .hero-actions, .modal-actions { display: flex; align-items: center; gap: .65rem; }
.button, .file-button { min-height: 40px; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font-weight: 750; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.button:hover, .file-button:hover { transform: translateY(-1px); border-color: #52675b; }
.button.primary { border-color: var(--lime); background: var(--lime); color: #111810; }
.button.secondary { border-color: rgba(201, 241, 90, .35); background: rgba(201, 241, 90, .09); }
.button.ghost { background: transparent; }
.button.danger { color: #ffab9d; }
.button.large, .file-button { min-height: 48px; padding-inline: 1.2rem; }
.button.compact { min-height: 34px; padding: .45rem .7rem; font-size: .82rem; }
.network-pill { padding: .34rem .65rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: .75rem; }
.network-pill.online::before, .network-pill.offline::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: var(--lime); }
.network-pill.offline::before { background: var(--coral); }

.sidebar { grid-area: side; position: sticky; top: 76px; height: calc(100vh - 76px); display: flex; flex-direction: column; padding: 1.25rem 1rem 1rem; border-right: 1px solid var(--line); background: rgba(15, 23, 19, .72); overflow-y: auto; }
.search-wrap label { display: block; margin: 0 0 .45rem .15rem; color: var(--muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #0e1712; color: var(--text); }
input, select { height: 42px; padding: 0 .75rem; }
textarea { padding: .8rem; line-height: 1.55; resize: vertical; }
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; margin: 1rem 0; }
.filter { display: flex; justify-content: space-between; gap: .2rem; padding: .65rem .35rem; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-size: .75rem; }
.filter:hover, .filter.active { background: var(--surface-2); color: var(--text); }
.filter.active { box-shadow: inset 3px 0 var(--lime); }
.filter span { color: var(--muted); font-size: .75rem; }
.library-heading { display: flex; justify-content: space-between; align-items: center; margin: .25rem .2rem .5rem; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button:hover { color: var(--text); border-color: #52675b; }
.large-icon { width: 42px; height: 42px; font-size: 1.4rem; }
.song-list { flex: 1; display: grid; align-content: start; gap: .4rem; overflow-y: auto; padding-right: .25rem; min-height: 135px; }
.song-list > [role="listitem"] { min-width: 0; }
.library-empty { padding: 1rem .5rem; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.library-result-count { margin: .5rem .3rem 0; color: var(--muted); font-size: .7rem; }
.folder-actions { display: flex; gap: .35rem; }
.offline-action { align-self: flex-start; margin: .5rem .3rem 0; padding: .3rem 0; border: 0; background: transparent; color: var(--lime); text-align: left; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-size: .72rem; }
.welcome-guide { padding: clamp(1.3rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.welcome-guide h2 { font-family: Georgia, serif; font-size: 2.2rem; line-height: 1.15; margin: 1rem 0 1.8rem; font-weight: 500; }
.welcome-guide ol { list-style: none; counter-reset: guide; padding: 0; display: grid; gap: 1.6rem; }
.welcome-guide li { counter-increment: guide; padding-left: 2.9rem; position: relative; }
.welcome-guide li::before { content: "0" counter(guide); position: absolute; left: 0; top: 0; color: var(--lime); font-family: monospace; font-size: 1rem; }
.welcome-guide li strong, .welcome-guide li span { display: block; }
.welcome-guide li strong { font-size: .95rem; }
.welcome-guide li span { color: var(--muted); font-size: .82rem; line-height: 1.65; margin-top: .4rem; }
.guide-note { border-top: 1px solid var(--line); padding-top: 1.2rem; margin: 1.6rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.7; }
kbd { padding: .15rem .3rem; border: 1px solid var(--line); border-radius: 4px; font-size: .7rem; color: var(--text); }
.service-panel { display: flex; align-items: center; justify-content: space-between; gap: .8rem; border: 1px solid var(--line); background: var(--bg); padding: .75rem; border-radius: 10px; margin-top: 1rem; }
.service-panel p { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--muted); }
.service-panel [data-state="ready"] { color: var(--lime); }
.service-panel [data-state="unavailable"] { color: #ffab9d; }
.service-panel button { flex-shrink: 0; font-size: .7rem; }
.import-progress { min-height: 1rem; color: var(--lime); font-size: .78rem; }
.song-item { width: 100%; padding: .72rem .75rem; border: 1px solid transparent; border-radius: 11px; background: transparent; cursor: pointer; text-align: left; }
.song-item:hover, .song-item.active { border-color: var(--line); background: var(--surface-2); }
.song-item strong, .song-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-item strong { font-size: .9rem; }
.song-item span { margin-top: .18rem; color: var(--muted); font-size: .75rem; }
.song-item .favorite-star { float: right; color: var(--lime); }
.sidebar-note { margin: .8rem .3rem 0; color: #708078; font-size: .67rem; line-height: 1.45; }

.main { grid-area: main; min-width: 0; padding: clamp(1.4rem, 4vw, 4rem); }
.welcome-view { min-height: calc(100vh - 150px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .8fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); max-width: 1240px; margin: 0 auto; }
.eyebrow { display: inline-block; color: var(--lime); font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.hero-copy h1, .viewer-toolbar h1, .editor-header h1 { margin: .65rem 0 1rem; font-size: clamp(2.7rem, 6vw, 5.6rem); line-height: .93; letter-spacing: -.055em; }
.hero-copy h1 em { color: var(--lime); font-family: Georgia, serif; font-weight: 500; }
.hero-copy > p { max-width: 660px; color: var(--muted); font-size: clamp(1rem, 2vw, 1.28rem); line-height: 1.65; }
.hero-actions { margin-top: 1.8rem; }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.feature-strip strong, .feature-strip span { display: block; }
.feature-strip strong { font-size: .9rem; }
.feature-strip span { margin-top: .25rem; color: var(--muted); font-size: .72rem; }

.viewer-view, .editor-view { max-width: 1120px; margin: 0 auto; }
.viewer-view { max-width: none; }
.viewer-toolbar, .editor-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-bottom: 1.5rem; }
.viewer-toolbar h1, .editor-header h1 { margin-block: .4rem; font-size: clamp(2.3rem, 5vw, 4.5rem); }
.song-meta { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--muted); font-size: .8rem; }
.song-meta span { padding: .28rem .55rem; border: 1px solid var(--line); border-radius: 99px; }
.practice-bar { position: sticky; top: 88px; z-index: 5; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.2rem; padding: .75rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(19, 29, 24, .94); backdrop-filter: blur(12px); }
.control-group { display: flex; align-items: center; gap: .4rem; padding-right: .75rem; border-right: 1px solid var(--line); }
.control-group > span { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; }
.control-group button { min-height: 30px; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; }
.control-group strong { min-width: 2.6rem; text-align: center; }
.control-group input { width: 76px; height: auto; }
.chord-sheet { min-width: 0; max-width: 100%; min-height: 65vh; padding: clamp(1rem, 2vw, 1.8rem); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 1rem; line-height: 1.4; white-space: pre; overflow-wrap: normal; word-break: normal; overflow-x: auto; }
.chord-sheet.has-inline-chords { line-height: 2.1; }
.sheet-viewport { min-width: 0; }
.chord-sheet:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.reading-hint { margin: -.4rem 0 .75rem; color: var(--muted); font-size: .72rem; }
#readingModeButton[aria-pressed="true"], #columnsButton[aria-pressed="true"], #overviewButton[aria-pressed="true"], #repeatChorusButton[aria-pressed="true"] { color: var(--lime); border-color: #688b34; }
.chord-sheet.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: clamp(1rem, 3vw, 2.5rem); }
.sheet-column { min-width: 0; overflow-x: auto; }
.sheet-column + .sheet-column { border-left: 1px solid #cdd2be; padding-left: clamp(1rem, 2vw, 1.6rem); }
.has-inline-chords .sheet-column { padding-top: .9em; }
.sheet-column:focus-visible { outline: 2px solid #688b34; outline-offset: 2px; }
.chord-sheet .chord { position: relative; top: -.85em; margin-right: .08em; color: #4e7511; font-weight: 900; white-space: nowrap; }
.chord-sheet .chord-line b { color: #4e7511; }
.folder-tree { display: grid; gap: .2rem; max-height: 28vh; flex-shrink: 0; overflow: auto; }
.folder-item { width: 100%; text-align: left; padding: .55rem .6rem; padding-left: calc(.6rem + var(--depth, 0) * .8rem); border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: .82rem; overflow-wrap: anywhere; }
.folder-item:hover { background: var(--surface-2); color: var(--text); }
.folder-item[aria-pressed="true"] { color: var(--lime); background: var(--surface-2); border-color: var(--line); }
.modal-card > label { display: grid; gap: .45rem; margin: .8rem 0; }
.chord-sheet .directive { display: block; margin: .8rem 0 .2rem; color: #5b665f; font-family: Inter, sans-serif; font-size: .7em; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.compact-sheet { min-height: 240px; margin-top: .6rem; padding: 1.5rem; font-size: .85rem; box-shadow: none; }
.source-card { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: .82rem; }
.source-card a { color: var(--lime); }

.editor-view { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .8fr); gap: 1.2rem; }
.editor-header { grid-column: 1 / -1; }
#songForm, .preview-pane { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
label { display: grid; gap: .4rem; color: #c3ccc7; font-size: .75rem; font-weight: 750; }
.content-label { margin: .9rem 0; }
.content-label span { color: var(--muted); font-weight: 500; }
code { color: var(--lime); }
.form-error { min-height: 1.2rem; margin: .7rem 0 0; color: #ffab9d; font-size: .78rem; }

.modal { width: min(680px, calc(100% - 2rem)); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(3, 8, 5, .76); backdrop-filter: blur(6px); }
.modal-card { padding: 1.5rem; }
.compact-modal { max-width: 560px; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; }
.modal-header h2 { margin: .4rem 0; font-size: 2rem; letter-spacing: -.04em; }
.modal-card > p { color: var(--muted); line-height: 1.55; }
.import-tabs { display: flex; gap: .4rem; margin: 1rem 0; padding: .35rem; border-radius: 11px; background: #0e1712; }
.import-tab { flex: 1; padding: .55rem; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.import-tab.active { background: var(--surface-2); color: var(--text); }
.hint { color: var(--muted); font-size: .72rem; }
.consent { grid-template-columns: auto 1fr; align-items: start; margin: 1rem 0; font-weight: 500; line-height: 1.45; }
.consent input { width: 18px; height: 18px; }
.modal-actions { justify-content: flex-end; }
.backup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.file-button { display: grid; place-items: center; position: relative; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 50; transform: translate(-50%, 130%); padding: .75rem 1rem; border: 1px solid #4b604f; border-radius: 10px; background: #203128; box-shadow: var(--shadow); opacity: 0; transition: .25s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 940px) {
  .app-shell { grid-template: auto auto minmax(0, 1fr) / 1fr; grid-template-areas: "top" "side" "main"; }
  .topbar { padding: .65rem .8rem; gap: .65rem; flex-wrap: wrap; }
  .brand small, .network-pill { display: none; }
  .top-actions { flex-wrap: wrap; }
  .sidebar { position: static; height: auto; padding: .8rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .main { padding: 1.2rem; }
  .welcome-view { grid-template-columns: 1fr; padding-block: 2rem; }
  .editor-view { grid-template-columns: 1fr; }
  .preview-pane { grid-column: 1; }
}

@media (max-width: 620px) {
  .brand strong { font-size: .88rem; }
  .top-actions { gap: .35rem; }
  .topbar { position: static; }
  .top-actions { width: 100%; }
  .top-actions .button { flex: 1; }
  .button { padding-inline: .7rem; }
  .top-actions .button { font-size: .75rem; }
  .welcome-view { min-height: auto; }
  .hero-copy h1 { font-size: 3.2rem; }
  .hero-actions, .viewer-toolbar, .editor-header { flex-direction: column; align-items: stretch; }
  .feature-strip { gap: .5rem; }
  .form-grid, .backup-grid { grid-template-columns: 1fr; }
  .practice-bar { top: .5rem; }
  .control-group { border-right: 0; }
  .chord-sheet { padding: 1.2rem; }
  .source-card { flex-direction: column; }
  .service-panel { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Real-size text flows into complete pages. Only the current page is cloned. */
.fit-only, .reading-source, .paged-sheet { display: none; }
body.fit-page { min-height: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.app-shell.page-reading { display: block; height: 100%; min-height: 0; }
.page-reading > .topbar, .page-reading > .sidebar { display: none; }
.page-reading > .main { height: 100%; padding: clamp(.5rem, 1vw, .9rem); }
.page-reading .viewer-view { height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: .5rem; }
.page-reading .viewer-toolbar { display: block; margin: 0; }
.page-reading .viewer-toolbar h1 { margin: 0; font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.2; letter-spacing: -.025em; }
.page-reading .viewer-toolbar > div:first-child { min-width: 0; }
.page-reading .viewer-toolbar h1 { overflow-wrap: anywhere; }
.page-reading .viewer-toolbar .eyebrow, .page-reading .song-meta, .page-reading .toolbar-actions,
.page-reading .source-card, .page-reading .fit-hide { display: none; }
.page-reading .fit-only { display: flex; }
.page-reading #chordSheet { display: none; }
.page-reading .practice-bar { position: static; min-width: 0; gap: .4rem; margin: 0; padding: .45rem; border-radius: 10px; }
.page-reading .practice-bar .button { min-height: 32px; padding: .4rem .6rem; font-size: .75rem; }
.page-reading .reading-hint { margin: 0; font-size: .68rem; line-height: 1.3; }
.page-reading .sheet-viewport { position: relative; min-height: 0; overflow: hidden; }
.page-reading .reading-source { display: block; position: absolute; top: 0; left: 0; width: max-content; max-width: none; height: auto; min-height: 0; padding: 0; margin: 0; border: 0; visibility: hidden; pointer-events: none; }
.page-reading .paged-sheet { display: grid; width: 100%; height: 100%; min-height: 0; padding: 1rem; gap: 2rem; overflow: hidden; align-items: stretch; }
.page-column { min-width: 0; min-height: 0; white-space: pre; overflow-wrap: normal; word-break: normal; }
.reading-row { display: block; width: max-content; min-width: 100%; min-height: 1.4em; margin: 0; line-height: 1.4; white-space: pre; }
.reading-row[data-kind="blank"] { height: .7em; min-height: .7em; line-height: .7; }
.reading-row[data-kind="heading"] { font-weight: 700; }
.reading-row.with-chords { padding-top: .85em; }
.reading-row .directive { margin: 0; line-height: 1.4; font-size: .8em; }
.page-columns { gap: .5rem; align-items: center; color: var(--muted); font-size: .75rem; }
.page-columns select { width: auto; min-height: 32px; padding: .3rem 1.5rem .3rem .5rem; font-size: .75rem; }
.page-navigation { gap: 1rem; justify-content: center; align-items: center; }
.page-navigation #pageStatus { min-width: 7rem; color: var(--muted); font-size: .8rem; text-align: center; }
.page-navigation .button { min-height: 36px; padding: .4rem .7rem; font-size: .8rem; }
@media (max-width: 600px) {
  .page-reading .paged-sheet { padding: .65rem; gap: 1rem; }
  .page-navigation { gap: .4rem; }
}
@media (max-height: 450px) {
  .page-reading .reading-hint { display: none; }
  .page-reading .viewer-view { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: .3rem; }
  .page-reading .viewer-toolbar h1 { font-size: 1rem; }
}
@media (max-width: 600px), (max-height: 450px) {
  .page-reading .control-group { padding-right: 0; border-right: 0; }
  .page-reading .control-group > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-reading .practice-bar { gap: .35rem; padding: .35rem; }
}
@media (max-height: 450px) {
  .page-reading .practice-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .page-reading .practice-bar > * { flex: 0 0 auto; }
  .page-reading .page-navigation .button { min-height: 30px; padding-block: .25rem; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reading-row.soft-wrap { width: auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reading-row.with-chords.soft-wrap { line-height: 2.35; padding-top: .2em; }
.page-navigation .button { white-space: nowrap; }
@media (max-width: 360px) {
  .page-navigation #pageStatus { min-width: 0; font-size: .72rem; }
  .page-navigation .button { padding-inline: .5rem; }
}
/* Song parts: badges, jump highlight, chips and editor tools */
.reading-row[data-kind="marker"], .reading-row.is-collapsed { display: none; }
.paged-sheet.has-parts .page-column { padding-left: 1.6em; }
.page-column .reading-row[data-part] { position: relative; }
.page-column .reading-row[data-part]::before {
  content: attr(data-part); position: absolute; left: calc(-1.6em / .6); top: .15em;
  min-width: 1.9em; padding: .1em .25em; border-radius: 5px;
  background: #dfe7c8; color: #3f5f0c; font: 800 .6em/1.35 Inter, ui-sans-serif, system-ui, sans-serif; text-align: center;
}
.page-column .reading-row.part-focus { animation: part-focus 1.8s ease-out; }
@keyframes part-focus { 0%, 35% { background: rgba(201, 241, 90, .55); } 100% { background: transparent; } }
.page-navigation { flex-wrap: wrap; }
.parts-bar { display: flex; gap: .3rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.parts-bar[hidden] { display: none; }
.part-chip { flex: 0 0 auto; min-width: 2.2rem; min-height: 32px; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-weight: 800; font-size: .8rem; cursor: pointer; }
.part-chip.on-page { border-color: var(--lime-dark); color: var(--text, #eef3ea); }
.part-chip.current { background: var(--lime); border-color: var(--lime); color: #101810; }
.part-chip .chip-short { display: none; }
.part-chip:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.nav-mode { align-items: center; }
.nav-mode select { width: auto; min-height: 32px; padding: .3rem 1.5rem .3rem .5rem; font-size: .75rem; }
@media (hover: none) and (pointer: coarse) { .page-reading .nav-mode { display: none; } }
.part-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: -.3rem 0 .9rem; }
.part-tools > span { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-right: .2rem; }
.part-tools .hint { flex: 1 0 100%; margin: .1rem 0 0; }
.page-reading .paged-sheet { position: relative; }
.paged-sheet.continues::after { content: "continua →"; position: absolute; right: .8rem; bottom: .2rem; color: #5b665f; font: 700 .62rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; }
/* Phones: give the sheet as much height as possible. */
@media (max-width: 600px) {
  .page-reading .reading-hint { display: none; }
  .page-reading .viewer-view { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: .35rem; }
  .page-reading .practice-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .page-reading .practice-bar > * { flex: 0 0 auto; }
  .page-reading .page-navigation { flex-wrap: nowrap; gap: .3rem; }
  .page-reading .parts-bar { flex: 1 1 auto; min-width: 0; }
  .page-reading .page-navigation .nav-word { display: none; }
  .page-reading .page-navigation .button { min-width: 40px; padding-inline: .5rem; }
  .page-reading .page-navigation #pageStatus { min-width: 0; flex: 0 1 auto; font-size: .7rem; }
  .page-reading .part-chip { min-width: 2rem; padding-inline: .4rem; }
  .part-chip .chip-long { display: none; }
  .part-chip .chip-short { display: inline; }
  /* Controls used while playing come first; the rest scroll into view. */
  .page-reading #backToLibraryButton { order: 0; }
  .page-reading .practice-bar .control-group { order: 1; }
  .page-reading #readingModeButton { order: 2; }
  .page-reading #overviewButton { order: 1; }
  .page-reading #repeatChorusButton { order: 2; }
  .page-reading .practice-bar .page-columns { order: 3; }
  .page-reading .practice-bar .nav-mode { order: 4; }
}
/* Normal reading: the practice bar hides while scrolling down. */
.practice-bar { transition: transform .22s ease, opacity .22s ease; }
.practice-bar.bar-hidden { transform: translateY(calc(-100% - 100px)); opacity: 0; pointer-events: none; }
.page-reading .practice-bar.bar-hidden { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .practice-bar { transition: none; } }
/* Whole-song view: columns read top to bottom, separated by a thin rule. */
.paged-sheet.overview { gap: 1.2rem; }
.paged-sheet.overview .page-column + .page-column { border-left: 1px solid #d9d3bd; padding-left: .9rem; }
.paged-sheet.overview .page-column { overflow: hidden !important; }
.paged-sheet.overview.has-parts .page-column + .page-column { padding-left: calc(1.6em + .9rem); }
/* Chorus shown again after a stanza: same text and chords, marked as a repeat. */
#repeatChorusButton[hidden] { display: none !important; }
.page-column .reading-row.repeat-copy { color: #2c3a2e; }
.page-column .reading-row.repeat-copy[data-part]::before { background: #ece6cf; color: #6b7a3a; }

/* ===== Library: sidebar navigation, folder tree and folder view ===== */
.nav-section { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.library-nav { display: grid; gap: .1rem; margin: 1.1rem 0 1.1rem; }
.library-nav > .nav-section { margin: 0 .55rem .45rem; }
.filter { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; width: 100%; padding: .5rem .55rem; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: .86rem; text-align: left; cursor: pointer; }
.filter:hover { background: var(--surface-2); color: var(--text); }
.filter.active { background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 var(--lime); }
.filter .nav-label { overflow: hidden; color: inherit; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.filter .nav-icon { color: #75867c; font-size: .85rem; text-align: center; }
.filter.active .nav-icon { color: var(--lime); }
.nav-count { color: #75867c; font-size: .72rem; font-variant-numeric: tabular-nums; }
.folder-section { display: flex; flex: 1 0 auto; flex-direction: column; }
.nav-section-row { display: flex; align-items: center; justify-content: space-between; margin: 0 .15rem .35rem .2rem; }
.section-toggle { display: flex; align-items: center; gap: .35rem; padding: .25rem .3rem; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.section-toggle:hover .nav-section { color: var(--text); }
.section-chevron { color: var(--muted); font-size: .65rem; transition: transform .15s ease; }
.section-toggle[aria-expanded="false"] .section-chevron { transform: rotate(-90deg); }
.icon-button.small { width: 28px; height: 28px; border-radius: 7px; font-size: 1rem; line-height: 1; }
.folder-tree { display: block; flex: none; max-height: none; overflow: visible; }
.folder-list, .folder-children { margin: 0; padding: 0; list-style: none; }
.folder-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: center; padding-left: calc(var(--depth, 0) * .9rem); }
.folder-toggle { width: 1.25rem; height: 1.7rem; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #75867c; font-size: 1.05rem; line-height: 1; cursor: pointer; transition: transform .15s ease; }
.folder-toggle:hover { color: var(--text); }
.folder-toggle[aria-expanded="true"] { transform: rotate(90deg); }
.folder-toggle-spacer { width: 1.25rem; }
.folder-tree .folder-item { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; width: 100%; padding: .42rem .5rem .42rem .3rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: .86rem; text-align: left; cursor: pointer; }
.folder-tree .folder-item:hover { background: var(--surface-2); color: var(--text); }
.folder-row.active .folder-item { background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 var(--lime); }
.folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-glyph { position: relative; display: inline-block; width: 1rem; height: .74rem; margin-top: .12rem; border-radius: 1px 3px 3px 3px; background: #557047; }
.folder-glyph::before { content: ""; position: absolute; left: 0; top: -.17rem; width: .46rem; height: .22rem; border-radius: 2px 3px 0 0; background: inherit; }
.folder-row.active .folder-glyph, .folder-card:hover .folder-glyph { background: var(--lime-dark); }
.folder-empty { margin: .2rem .55rem; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.sidebar-note { margin-top: 1rem; }
[data-drop-folder].drop-target { outline: 2px dashed var(--lime); outline-offset: -2px; background: rgba(201, 241, 90, .1) !important; color: var(--text) !important; }

.library-view { max-width: 1120px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; margin: 0 0 .5rem -.35rem; color: var(--muted); font-size: .8rem; }
.crumb { padding: .2rem .35rem; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
button.crumb:hover { background: var(--surface-2); color: var(--text); }
.crumb[aria-current="page"] { color: var(--text); font-weight: 700; cursor: default; }
.crumb-separator { color: #56665d; }
.library-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 1.5rem; margin-bottom: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.library-title { flex: 1 1 320px; min-width: 0; }
.library-title h1 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; }
.library-summary { margin: .45rem 0 0; color: var(--muted); font-size: .9rem; }
.library-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.library-actions .button { min-height: 38px; padding: .5rem .85rem; font-size: .85rem; }
.list-heading { margin: 0 0 .7rem; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.list-count { color: #6f7f76; letter-spacing: 0; }
.subfolder-section { margin-bottom: 1.8rem; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.folder-card { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.folder-card:hover { border-color: #52675b; background: var(--surface-2); }
.folder-card .folder-glyph { flex: 0 0 auto; width: 1.35rem; height: 1rem; }
.folder-card .folder-glyph::before { top: -.22rem; width: .6rem; height: .28rem; }
.folder-card-text { display: grid; gap: .15rem; min-width: 0; }
.folder-card-text strong { overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.folder-card-text span { color: var(--muted); font-size: .75rem; }
.list-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-bottom: .3rem; }
.list-toolbar .list-heading { margin: 0; }
.sort-control { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .78rem; }
.sort-control select { width: auto; min-height: 34px; padding: .3rem 1.8rem .3rem .6rem; font-size: .8rem; }
.song-table-head, .library-view .song-item { display: grid; grid-template-columns: 1.1rem minmax(0, 1.6fr) 3.2rem minmax(0, 1fr) 4.4rem; align-items: center; gap: .9rem; }
.song-table-head { padding: .5rem .9rem; border-bottom: 1px solid var(--line); color: #6f7f76; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.library-view .song-list { display: block; min-height: 0; max-height: none; overflow: visible; padding: 0; }
.library-view .song-item { width: 100%; padding: .7rem .9rem; border: 0; border-bottom: 1px solid rgba(42, 58, 50, .7); border-radius: 0; background: transparent; color: var(--text); cursor: pointer; }
.library-view .song-item:hover { background: var(--surface); }
.library-view .song-item:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.library-view .song-item span { margin-top: 0; }
.library-view .song-main { display: grid; gap: .12rem; min-width: 0; }
.library-view .song-main strong { overflow: hidden; color: var(--text); font-size: .93rem; text-overflow: ellipsis; white-space: nowrap; }
.library-view .song-artist, .library-view .song-folder, .library-view .song-date { overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.library-view .song-key { justify-self: start; min-width: 2.3rem; padding: .12rem .4rem; border: 1px solid var(--line); border-radius: 6px; color: var(--lime); font-size: .78rem; font-weight: 800; text-align: center; }
.library-view .song-fav .favorite-star { float: none; color: var(--lime); }
.library-view .library-empty { padding: 1.6rem .9rem; }
body.dragging-song .library-view .song-item { cursor: grabbing; }
.library-tip { margin: 1rem .9rem 0; color: #6f7f76; font-size: .75rem; }
.library-footer { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.library-footer a { color: var(--lime); }
.library-footer .footer-note { flex: 1 0 100%; color: #6f7f76; }
@media (max-width: 940px) {
  .library-nav { display: flex; gap: .3rem; margin: .7rem 0; overflow-x: auto; scrollbar-width: none; }
  .library-nav > .nav-section { display: none; }
  .library-nav .filter { flex: 0 0 auto; grid-template-columns: auto auto auto; width: auto; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px; }
  .library-nav .filter.active { box-shadow: none; border-color: var(--lime-dark); }
  .folder-tree { max-height: 45vh; overflow: auto; }
  .sidebar-note { display: none; }
}
@media (max-width: 700px) {
  .song-table-head { display: none; }
  .library-view .song-item { grid-template-columns: 1rem minmax(0, 1fr) 2.8rem; gap: .6rem; padding-inline: .5rem; }
  .library-view .song-folder, .library-view .song-date { display: none; }
  .library-actions { width: 100%; }
  .library-actions .button { flex: 1 1 auto; }
  .library-footer { display: none; }
}