:root{color-scheme:light dark;--bg: #f5f5f0;--surface: #ffffff;--text: #1a1a1a;--muted: #666;--accent: #2563eb;--chord: #b45309;--border: #ddd;--warning-bg: #fef3c7;--warning-text: #92400e;--error-bg: #fee2e2;--error-text: #991b1b;--missing-bg: #fff7ed;--missing-text: #c2410c}@media(prefers-color-scheme:dark){:root{--bg: #111;--surface: #1c1c1c;--text: #f0f0f0;--muted: #aaa;--border: #333;--warning-bg: #422006;--warning-text: #fcd34d;--error-bg: #450a0a;--error-text: #fca5a5;--missing-bg: #431407;--missing-text: #fdba74}}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}.app-layout{display:flex;min-height:100vh}.app-main{flex:1;min-width:0;max-width:900px;padding:1rem}.song-library{width:280px;flex-shrink:0;border-left:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden}.library-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem .5rem}.library-header-actions{display:flex;align-items:center;gap:.5rem}.library-header h2{margin:0;font-size:1rem}.library-count{font-size:.8rem;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:.1rem .5rem}.library-search{margin:0 1rem .75rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:.9rem}.library-list{list-style:none;margin:0;padding:0 .5rem 1rem;overflow-y:auto;flex:1}.library-list li{display:flex;align-items:stretch;border-radius:6px;margin-bottom:.25rem}.library-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem}.library-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.library-list li.active{background:color-mix(in srgb,var(--accent) 12%,transparent)}.library-list li.missing{background:var(--missing-bg)}.library-list li.missing.active{background:color-mix(in srgb,var(--missing-bg) 70%,var(--accent) 12%)}.missing-badge{font-size:.7rem;color:var(--missing-text);font-weight:600}.library-filter-label{display:flex;flex-direction:column;gap:.25rem;margin:0 1rem .5rem;font-size:.75rem;color:var(--muted)}.library-filter{padding:.45rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:.85rem}.library-reload{padding:.2rem .45rem;border:1px solid var(--border);border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;font-size:.72rem;white-space:nowrap}.library-reload:disabled{opacity:.6;cursor:not-allowed}.library-item:disabled{cursor:not-allowed;opacity:.85}.library-item{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.5rem .6rem;border:none;background:transparent;color:var(--text);cursor:pointer;text-align:left;min-width:0}.library-title{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.library-artist{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.library-source{font-size:.7rem;color:var(--muted)}.library-remove{width:2rem;flex-shrink:0;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:1.2rem;line-height:1;border-radius:4px}.library-remove:hover{background:var(--error-bg);color:var(--error-text)}.library-empty{padding:1rem;color:var(--muted);font-size:.9rem}.chord-diagrams{margin:.75rem 0;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:8px}.chord-diagrams h3{margin:0 0 .75rem;font-size:.95rem}.chord-diagram-grid{display:flex;flex-wrap:wrap;gap:.75rem}.chord-diagram-card{border:1px solid var(--border);border-radius:6px;padding:.25rem;background:var(--bg)}.chord-diagram-card img{display:block;width:108px;height:auto;color:var(--text)}.app{max-width:900px;margin:0 auto;padding:1rem}.app-header h1{margin:0;font-size:1.5rem}.subtitle{color:var(--muted);margin:.25rem 0 1rem}.url-input form{display:flex;gap:.5rem}.url-input input{flex:1;padding:.6rem .8rem;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:1rem}.url-input button,.play-btn,.toggle-btn,.transpose-controls button{padding:.6rem 1rem;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);cursor:pointer;font-size:.95rem}.url-input button[type=submit]{background:var(--accent);color:#fff;border-color:var(--accent)}.url-input button:disabled{opacity:.6;cursor:not-allowed}.rate-limit-banner,.error-banner{margin:.75rem 0;padding:.75rem 1rem;border-radius:6px;font-size:.9rem}.rate-limit-banner.warning{background:var(--warning-bg);color:var(--warning-text)}.rate-limit-banner.exceeded,.error-banner{background:var(--error-bg);color:var(--error-text)}.sticky-controls{position:sticky;top:0;z-index:100;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;margin:1rem 0;box-shadow:0 2px 8px #00000014}.song-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}.song-meta-main{display:flex;flex-direction:column;gap:.25rem}.song-meta-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.rating-badge{font-size:.85rem;color:#b45309}.rating-badge.missing{color:var(--muted);font-size:.8rem}.rating-count{color:var(--muted)}.badge{font-size:.75rem;padding:.15rem .5rem;border-radius:999px;background:var(--bg);color:var(--muted);border:1px solid var(--border)}.badge.cache{color:#15803d;border-color:#86efac}.control-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.control-row label{display:flex;align-items:center;gap:.4rem;font-size:.85rem}.transpose-controls{display:flex;align-items:center;gap:.4rem}.transpose-controls button{width:2rem;height:2rem;padding:0}.play-btn{background:var(--accent);color:#fff;border-color:var(--accent);min-width:5rem}.toggle-btn.active{background:color-mix(in srgb,var(--accent) 15%,var(--surface));border-color:var(--accent)}.wrap-lines-toggle{white-space:nowrap}.wrap-marker{color:var(--muted);font-weight:500;opacity:.85}.line-continuation,.line-wrap-end{position:relative}.song-sheet--wrap-lines .line{overflow-x:hidden;max-width:100%}.song-sheet--wrap-lines pre.line{white-space:pre-wrap;overflow-wrap:anywhere}.song-sheet{--sheet-font-size: 16px;max-height:70vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.5rem;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:var(--sheet-font-size);line-height:1.6}.song-sheet-rtl{direction:rtl;text-align:right}.song-sheet-rtl .line.section{text-align:right}.song-sheet-rtl .line.lyric,.song-sheet-rtl .lyric-block .lyric{width:100%;text-align:right;direction:rtl;unicode-bidi:plaintext;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.45;white-space:pre-wrap}.song-sheet-rtl .lyric-block{width:100%;margin-bottom:1.1em}.song-sheet-rtl .chord-row-pills{position:relative;width:100%;min-height:1.65em;margin-bottom:.2em;direction:rtl;text-align:right;font-family:SF Mono,Fira Code,Consolas,monospace}.chord-pill{position:absolute;top:0;display:inline-block;padding:.12em .5em;border-radius:5px;background:#dceeff;color:#1a5fb4;font-weight:600;font-size:.82em;line-height:1.2;border:1px solid #b8daff;white-space:nowrap}@media(prefers-color-scheme:dark){.chord-pill{background:#1e3a5f;color:#93c5fd;border-color:#2563eb}}.line{margin:0;white-space:pre}.line.blank{height:.45em}.lyric-block{margin-bottom:.35em}.lyric-block .chord-row{margin:0 0 .05em;line-height:1.15;min-height:1.1em}.lyric-block.direction-rtl .chord-row,.lyric-block.direction-rtl .lyric{direction:rtl;text-align:right;unicode-bidi:plaintext;width:100%}.lyric-block.direction-ltr .chord-row,.lyric-block.direction-ltr .lyric{direction:ltr;text-align:left}.chord-token{color:var(--chord);font-weight:600;unicode-bidi:isolate}.add-to-list-menu{position:relative}.add-to-list-menu.compact .add-to-list-trigger{padding:.15rem .35rem;font-size:.75rem}.add-to-list-trigger{padding:.25rem .55rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);cursor:pointer;font-size:.8rem}.add-to-list-popover{position:absolute;top:calc(100% + .25rem);right:0;z-index:200;width:220px;padding:.6rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 8px 24px #0000001f}.popover-title,.popover-empty{margin:0 0 .5rem;font-size:.8rem;color:var(--muted)}.list-options{list-style:none;margin:0 0 .5rem;padding:0;max-height:160px;overflow-y:auto}.list-options label{display:flex;align-items:center;gap:.4rem;font-size:.85rem;padding:.2rem 0}.create-list-row{display:flex;gap:.35rem}.create-list-row input{flex:1;min-width:0;padding:.35rem .5rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:.8rem}.create-list-row button{padding:.35rem .5rem;border:1px solid var(--border);border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;font-size:.8rem}.line.section{font-weight:700;margin:1em 0 .5em;font-family:system-ui,sans-serif}.line.chord-row,.lyric-block .chord-row{color:var(--chord);font-weight:600;margin:0}.line.lyric,.lyric-block .lyric{margin:0 0 .5em}.lyric-block{margin-bottom:.5em}[dir=rtl] .line.lyric,[dir=rtl] .lyric-block .lyric{text-align:right}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}.login-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem}.login-card h1{margin:0}.login-card label{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}.login-card input{padding:.5rem .75rem;border:1px solid var(--border);border-radius:6px;font-size:1rem;background:var(--bg);color:var(--text)}.login-card button{margin-top:.5rem;padding:.6rem 1rem;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer}.login-card button:disabled{opacity:.6;cursor:not-allowed}.library-toggle,.library-backdrop,.library-close{display:none}@media(max-width:768px){.app-layout{flex-direction:column}.app-main{max-width:none;width:100%;padding-top:1rem}.url-input form{flex-direction:column}.url-input button[type=submit]{width:100%}.control-row label{width:100%;justify-content:space-between}.sticky-controls--mobile{padding:.35rem .5rem;margin:.5rem 0}.controls-details-toggle{display:flex;align-items:center;gap:.35rem;width:100%;padding:.15rem 0;border:none;background:transparent;color:var(--text);cursor:pointer;text-align:left;font-size:.85rem}.controls-chevron{flex-shrink:0;width:1rem;color:var(--muted)}.controls-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls-details{padding-top:.25rem}.controls-details .song-meta{margin-bottom:.35rem}.controls-details-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.controls-details-tools label{font-size:.75rem;gap:.3rem}.controls-details-tools .wrap-lines-toggle,.controls-details-tools .toggle-btn{padding:.35rem .5rem;font-size:.72rem}.controls-playback{display:flex;align-items:center;gap:.5rem;padding-top:.25rem;border-top:1px solid var(--border);margin-top:.25rem}.controls-playback .play-btn{min-width:3.5rem;padding:.35rem .55rem;font-size:.85rem}.controls-playback label{flex:1;min-width:0;font-size:.75rem;gap:.3rem}.controls-playback input[type=range]{flex:1;min-width:0}.song-sheet{max-height:none;line-height:1.3;padding:.75rem}.song-sheet .line.section{margin:.45em 0 .2em}.song-sheet .line.blank{height:.2em}.song-sheet .lyric-block,.song-sheet .line.lyric,.song-sheet .lyric-block .lyric{margin-bottom:.15em}.song-sheet-rtl .lyric-block{margin-bottom:.45em}.song-sheet-rtl .lyric-block .lyric{line-height:1.15}.song-sheet-rtl .chord-row-pills{min-height:1.35em;margin-bottom:.1em}.song-library{position:fixed;top:0;right:0;bottom:0;width:min(320px,88vw);z-index:300;transform:translate(100%);transition:transform .2s ease;border-left:1px solid var(--border);box-shadow:-4px 0 24px #0000002e}.song-library.open{transform:translate(0)}.library-toggle{display:flex;align-items:center;justify-content:center;position:fixed;top:50%;right:0;z-index:310;width:2.4rem;height:3.75rem;padding:0;border:1px solid var(--border);border-right:none;border-radius:12px 0 0 12px;background:var(--surface);color:var(--accent);cursor:pointer;box-shadow:-3px 0 14px #0000001f;transform:translateY(-50%);transition:right .2s ease,box-shadow .2s ease}.library-toggle.open{right:min(320px,88vw);box-shadow:-2px 0 10px #00000014}.library-toggle-icon{display:block;width:1.35rem;height:1.35rem}.library-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:250;border:none;padding:0;background:#0006;cursor:pointer}.library-close{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--muted);cursor:pointer;font-size:1.2rem;line-height:1}}