:root{--font-family-base: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--font-weight-regular: 400;--font-size-xs: 12px;--color-bg-page: #ececec;--color-bg-app: #fff1e2;--color-bg-app-fade-88: color-mix(in srgb, var(--color-bg-app) 88%, transparent);--color-bg-app-fade-92: color-mix(in srgb, var(--color-bg-app) 92%, transparent);--color-text-primary: #111;--color-text-heading: #0089fe;--color-surface: color-mix(in srgb, #ffffff 96%, var(--color-text-heading) 4%);--color-surface-inset: color-mix(in srgb, #ffffff 91%, var(--color-text-heading) 9%);--shadow-surface: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(0, 77, 140, .045);--color-text-link: #006dcd;--color-text-muted: #888;--color-text-subtle: #aaa;--color-border-default: #cfcfcf;--color-border-input: #b5b5b5;--color-border-strong: #222;--color-focus: #00529a;--color-song-downloaded: color-mix(in srgb, var(--color-surface) 90%, #0891b2 10%);--color-song-partial: #fffbee;--color-hover-soft: rgba(15, 23, 42, .04);--color-waveform-unplayed: rgba(148, 163, 184, .35);--color-waveform-played: rgba(59, 130, 246, .9);--radius-sm: 8px;--radius-md: 10px}#preload-app-identity{background:var(--color-bg-app)}:root{font-family:var(--font-family-base);line-height:1.4;font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:var(--color-bg-page);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;background:var(--color-bg-page)}a{color:var(--color-text-link)}.footer{position:fixed;bottom:10px;left:0;right:0;text-align:center;font-size:var(--font-size-xs);color:var(--color-text-subtle)}.footer a{color:var(--color-text-muted);text-decoration:none}.footer a:hover{text-decoration:underline}*{box-sizing:border-box}:root{--app-body-top-padding: 36px;--transport-viewport-reserve: calc(134px + env(safe-area-inset-bottom)) }@media(max-width:520px){:root{--transport-viewport-reserve: calc(142px + env(safe-area-inset-bottom)) }}html.song-mode-scroll-lock{height:100%;overflow:hidden;overscroll-behavior:none}html.song-mode-scroll-lock body{margin:0;padding-top:var(--app-body-top-padding);height:100%;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column}html.song-mode-scroll-lock #root{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}html.song-mode-scroll-lock .app-shell.song-mode{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}html.song-mode-scroll-lock .site-footer{display:none}.app-shell{width:100%;max-width:480px;margin:0 auto;min-width:0;min-height:calc(100vh - var(--app-body-top-padding));position:relative;background:var(--color-bg-app);color:var(--color-text-primary)}.app-shell.song-mode{min-height:calc(100vh - var(--app-body-top-padding))}.screen{padding:16px;position:relative}.brand-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.brand-logo{width:40px;height:40px;border-radius:8px;flex-shrink:0}.admin-version-label{position:fixed;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));text-align:right;line-height:1.2;background:var(--color-bg-app-fade-88);padding:4px 6px;border-radius:8px}h1,h2,h3{margin:0 0 12px;color:var(--color-text-heading)}.card,.song-row,.selected-voice-panel,.playback-panel,.sound-room{border:1px solid var(--color-border-default);border-radius:10px;background:var(--color-surface);box-shadow:var(--shadow-surface)}.stack{display:grid;gap:10px}.inline-row{display:flex;gap:8px;align-items:center}.inline-row.wrap{flex-wrap:wrap}.small{font-size:12px}.muted{opacity:.72}button,input{font:inherit}button{border:1px solid var(--color-border-strong);border-radius:10px;background:var(--color-surface);color:var(--color-text-primary);padding:10px 12px;min-height:42px}input[type=text]{flex:1;min-width:230px;border:1px solid var(--color-border-input);border-radius:8px;padding:10px}input[type=range]{width:100%}.admin-actions{display:flex;gap:8px;margin-bottom:8px}.library-songs{margin-bottom:14px}.song-row{padding:10px}.song-row--compact{display:flex;align-items:center;gap:8px;padding:4px 6px;min-height:42px;width:100%;max-width:100%;min-width:0}.song-row--downloaded{background:var(--color-song-downloaded)}.song-row--partial{background:var(--color-song-partial)}.song-row.selected{border-color:var(--color-focus)}.song-main{width:100%;display:grid;text-align:left;justify-items:start;margin-bottom:8px}.song-main.song-main--compact{margin-bottom:0;display:block;position:relative;border:0;border-radius:6px;min-height:32px;padding:4px 8px;background-color:transparent;width:0;max-width:100%;flex:1 1 auto;min-width:0;text-align:left;overflow:hidden}.song-main.song-main--compact:hover{background-color:var(--color-hover-soft)}.song-main.song-main--compact:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}.song-row-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:2px;font-size:.92rem;line-height:1.25}.song-row-status{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:20px}.song-inline-spinner{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;pointer-events:none}.song-inline-spinner .loading-spinner{width:14px;height:14px;border-width:2px}.song-row-actions{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.song-row-action.icon-button{width:42px;height:42px;min-height:42px}.song-row-action.icon-button .material-symbols-rounded{font-size:22px}.song-library-row{align-items:center}.song-library-main{display:block;padding:6px 8px}.song-library-title{padding-right:0}.song-library-toolbar-actions{gap:6px;flex-wrap:wrap}.song-library-top-action{min-height:34px;padding:6px 14px;border-radius:999px;border:1px solid var(--color-border-default);background:var(--color-surface);font-size:.88rem;line-height:1}.song-library-top-action:hover{background:#f8fafc}.song-library-top-action--disconnected{background:#e5e7eb;border-color:#d1d5db}.song-library-top-action--connected{background:var(--color-song-downloaded);border-color:color-mix(in srgb,var(--color-song-downloaded) 55%,#0f172a 45%)}.song-library-top-action--connected:hover{background:color-mix(in srgb,var(--color-song-downloaded) 78%,#ffffff 22%)}.song-library-link-dialog-overlay{position:fixed;inset:0;z-index:40;background:#0f172a73;display:flex;align-items:center;justify-content:center;padding:12px}.song-library-link-dialog{width:min(360px,100%);border-radius:12px;border:1px solid var(--color-border-default);background:var(--color-surface);box-shadow:0 10px 30px #0f172a3d;padding:12px;display:grid;gap:8px}.song-library-link-dialog h3{margin:0;font-size:1rem}.song-library-link-dialog .inline-row{justify-content:flex-end}.song-library-link-dialog.in-app-browser-warning p{margin:0;line-height:1.35}.song-row-action.icon-button:disabled{opacity:.4;border-color:#d1d5db;background:#f3f4f6;color:#9ca3af;box-shadow:none;cursor:not-allowed}.song-row-action.icon-button:disabled:hover,.song-row-action.icon-button:disabled:active{transform:none;background:#f3f4f6;box-shadow:none}.playlist-entry-list{margin:0;padding-left:20px;display:grid;gap:8px}.playlist-entry-list>li{min-width:0}.playlist-entry-item{display:flex;justify-content:space-between;gap:8px;align-items:center;min-width:0}.playlist-entry-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-entry-item .inline-row{flex-shrink:0;gap:4px}.error-banner,.warning-banner{margin-top:8px;border-radius:8px;padding:10px;font-size:14px}.error-banner{border:1px solid #b42318;background:#fee4e2}.warning-banner{border:1px solid #b54708;background:#fffbeb}.song-screen{position:relative;min-height:calc(100vh - var(--app-body-top-padding));display:flex;flex-direction:column;gap:10px;padding:10px}.song-screen.song-screen--transport{min-height:0;height:calc(100dvh - var(--app-body-top-padding) - var(--transport-viewport-reserve));max-height:calc(100dvh - var(--app-body-top-padding) - var(--transport-viewport-reserve));overflow-y:auto}.song-screen--transport .screen-sticky-header,.song-screen--transport .playback-panel{flex-shrink:0}.song-screen--transport .transport-bottom-dock{flex-shrink:0;overflow:visible}.song-screen-lyrics-block{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.song-screen-lyrics-block .lyrics-panel{flex:1;min-height:0;max-height:none;overflow-y:auto}.screen-sticky-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;min-width:0;padding:6px 0;background:linear-gradient(180deg,var(--color-bg-app) 72%,var(--color-bg-app-fade-88) 100%)}.screen-sticky-header h1{margin:0;font-size:1.1rem;min-width:0}.song-book-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.song-book-toolbar-actions{display:inline-flex;align-items:center;gap:4px}.playlist-switch{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:#334155}.playlist-switch-label{white-space:nowrap}.playlist-switch input[type=checkbox]{appearance:none;position:relative;width:38px;height:22px;border-radius:999px;border:1px solid #cbd5e1;background:#e2e8f0;transition:background-color .12s ease,border-color .12s ease;cursor:pointer}.playlist-switch input[type=checkbox]:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:999px;background:var(--color-surface);box-shadow:0 1px 2px #0f172a38;transition:transform .12s ease}.playlist-switch input[type=checkbox]:checked{background:var(--color-focus);border-color:var(--color-focus)}.playlist-switch input[type=checkbox]:checked:after{transform:translate(16px)}.playlist-confirm-modal-overlay{position:fixed;inset:0;z-index:30;background:#0f172a73;display:flex;align-items:center;justify-content:center;padding:16px}.playlist-confirm-modal{width:min(360px,100%);border-radius:12px;border:1px solid #cbd5e1;background:var(--color-surface);box-shadow:0 10px 30px #0f172a3d;padding:14px;display:grid;gap:10px}.playlist-confirm-modal h3{margin:0;font-size:1rem}.playlist-confirm-modal p{margin:0}.icon-button{width:42px;height:42px;min-height:42px;border-radius:999px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid #c8c8c8;background:var(--color-surface);color:#1f2937;transition:transform .12s ease,background-color .12s ease,box-shadow .12s ease}.icon-button:hover{background:#f8fafc;box-shadow:0 1px 3px #0f172a1f}.icon-button:active{transform:scale(.97)}.icon-button .material-symbols-rounded{font-size:22px;line-height:1}.back-button{flex-shrink:0;background:#ffffffe6}.song-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.lyric-source-button{min-width:44px;padding:6px 10px;font-weight:700;border:0;box-shadow:none;background:transparent}.lyric-source-button:hover{background:#0f172a0d}.lyrics-empty-select-button{justify-self:center;border:0;background:transparent;padding:4px 8px;color:#334155;opacity:.8;text-decoration:underline;text-underline-offset:2px}.lyrics-empty-select-button:hover{opacity:1;background:#0f172a0d}button.song-title-row--open-room{display:flex;align-items:center;gap:8px;flex:1;width:100%;min-width:0;margin:0;padding:2px 4px;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left;border-radius:8px;transition:background-color .12s ease}button.song-title-row--open-room:hover{background:#0f172a0d}button.song-title-row--open-room:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.song-title-row-room-icon{flex-shrink:0;font-size:22px;line-height:1;opacity:.85}.lyrics-source-modal-overlay{position:fixed;inset:0;background:#0f172a73;display:grid;place-items:center;z-index:50;padding:12px}.lyrics-source-modal{width:min(400px,100%);max-height:min(70vh,520px);overflow-y:auto;background:var(--color-surface);border-radius:12px;border:1px solid var(--color-border-default);padding:12px;display:grid;gap:10px;box-shadow:0 12px 40px #0f172a33}.lyrics-source-modal h3{margin:0;text-align:center}.lyrics-source-option-list{display:grid;gap:8px;text-align:center}.lyrics-source-option-list .muted{text-align:center}.lyrics-source-option{display:grid;gap:2px;text-align:center;justify-items:center;border:1px solid #cbd5e1;background:#f8fafc;border-radius:8px;padding:8px}.lyrics-source-modal>.button{justify-self:center}.lyrics-source-option:hover{background:#eef2ff}.song-title-compact{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:1rem;line-height:1.25}.sound-room{flex:1;min-height:0;padding:8px 10px 6px;position:relative;display:grid;grid-template-rows:1fr}.song-room-screen{overflow-y:hidden;--transport-viewport-reserve: calc(120px + env(safe-area-inset-bottom)) }.song-room-screen .sound-room{border:0;border-radius:0;background:transparent;box-shadow:none}.voice-room{position:relative;min-height:0;border-radius:8px;background:linear-gradient(180deg,#f4f8ff,#ebf2ff);overflow:visible;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.voice-circle{position:absolute;left:var(--voice-x, 50%);top:var(--voice-y, 50%);z-index:var(--voice-z, 2);transform:translate(-50%,-50%);width:64px;height:64px;min-height:64px;border-radius:999px;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:color-mix(in srgb,var(--color-surface) 82%,transparent)}.voice-circle.active{border-color:#008bfe8c;box-shadow:0 0 0 2.5px #008bfe42,0 0 0 6px #80c5ff24,0 0 11px #008bfe38}.voice-circle.muted{background:#e5e7eb9e;color:#94a3b8}.backing-note-lane{position:absolute;z-index:1;inset:19px 0 32px}.voice-circle--backing{left:50%;top:var(--backing-y, 50%);z-index:var(--voice-z, 1);cursor:ns-resize;width:128px;height:64px;min-height:64px;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none;border:0;background:transparent;box-shadow:none;color:var(--color-text-primary);font-size:56px;font-weight:900;line-height:1;-webkit-tap-highlight-color:transparent}.voice-circle--backing .backing-icon{width:112px;height:56px;display:block;margin:0 auto;object-fit:contain;pointer-events:none}.voice-circle--backing:focus:not(:focus-visible){outline:none}.voice-circle--backing:focus-visible{outline:2px solid rgba(37,99,235,.65);outline-offset:4px;border-radius:6px}.voice-circle--backing-muted{color:#64748b}.voice-circle--backing-muted .backing-icon{opacity:.34;filter:grayscale(1) brightness(.78)}.voice-circle--backing.voice-circle--backing-active{color:var(--color-text-primary);-webkit-text-stroke:4px rgba(37,99,235,.55);paint-order:stroke fill;text-shadow:0 0 8px rgba(59,130,246,.35),0 0 18px rgba(147,197,253,.28)}.voice-circle--backing.voice-circle--backing-muted.voice-circle--backing-active{color:#64748b;-webkit-text-stroke:4px rgba(37,99,235,.48);paint-order:stroke fill;text-shadow:0 0 8px rgba(59,130,246,.28),0 0 18px rgba(147,197,253,.22)}.selected-voice-panel,.playback-panel{padding:10px}.transport-bottom-dock{position:relative;width:100%;padding-bottom:0}.song-room-lyric-row{margin:-2px 0 2px;min-height:24px;padding:2px 8px;color:var(--color-text-primary);font-size:var(--song-room-lyric-font-size, 1rem);line-height:1.35;font-weight:500;opacity:.78;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-room-speed-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin:0 8px 4px}.song-room-speed-label{font-size:.85rem;font-weight:600;color:#475569}.song-room-speed-options{display:flex;gap:6px;min-width:0;overflow-x:auto;padding-bottom:2px}.song-room-speed-option{border:1px solid #cbd5e1;background:#f8fafc;color:#0f172a;border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:600;white-space:nowrap}.song-room-speed-option.active{border-color:#2563eb;background:#dbeafe}.song-room-lyric-text{display:inline-block;flex:0 0 auto;white-space:nowrap}.transport-sticky-bar{position:fixed;left:50%;transform:translate(-50%);width:min(460px,calc(100vw - 20px));bottom:calc(8px + env(safe-area-inset-bottom));z-index:15;padding:10px 12px;border:1px solid color-mix(in srgb,#dbe2eb 70%,var(--color-text-heading) 18%);border-radius:16px;background:color-mix(in srgb,var(--color-surface) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 22px #0f172a1a,0 0 0 1px color-mix(in srgb,var(--color-text-heading) 8%,transparent);display:grid;gap:8px}.transport-button-row{display:flex;justify-content:center;gap:10px}.transport-icon-button.primary{background:var(--color-focus);border-color:var(--color-focus);color:var(--color-surface)}.transport-icon-button--song-nav{border-style:dashed}.transport-icon-button.active{border-color:var(--color-focus);box-shadow:0 0 0 2px #1d4ed829}.slider-label{display:grid;gap:6px;margin-top:10px}.footer{text-align:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}.song-room-heading{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}.song-room-heading-label{flex:0 0 auto;white-space:nowrap}.song-room-header-title{display:block;flex:1 1 auto;font-weight:500;opacity:.8;font-size:.9em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selected-voice-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:12px 36px;text-align:center;font-size:16px;font-weight:600;color:#1113;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.voice-room-loading{position:absolute;inset:0;display:grid;place-content:center;gap:10px;justify-items:center;color:#334155}.songroom-transition-loading{position:fixed;inset:0;z-index:20;display:grid;place-content:center;gap:10px;justify-items:center;background:var(--color-bg-app-fade-92);color:#0f172a;font-weight:600}.loading-spinner{width:28px;height:28px;border:3px solid #cbd5e1;border-top-color:#2563eb;border-radius:999px;animation:spin .9s linear infinite}.compact-slider-label{margin-top:0;gap:0}.compact-slider-label input[type=range]{margin:0}@keyframes spin{to{transform:rotate(360deg)}}.lyrics-panel{overflow-y:auto;border:1px solid color-mix(in srgb,var(--color-border-default) 75%,var(--color-text-heading) 12%);border-radius:8px;background:var(--color-surface-inset);padding:10px;box-shadow:inset 0 1px #ffffff73}.txt-lyrics{white-space:pre-wrap;line-height:1.6}.lrc-lyrics{scroll-behavior:smooth}.lrc-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}.lrc-line{width:100%;border:0;border-radius:8px;padding:8px;min-height:0;display:grid;gap:2px;text-align:left;background:transparent;color:#374151}.lrc-line:hover{background:#eef2ff}.lrc-line.past{color:#6b7280}.lrc-line.active{background:#dbeafe;color:#0f172a;font-weight:700}.lrc-line.pre-roll{background:color-mix(in srgb,#dbeafe 42%,transparent)}.lrc-time{font-size:12px;opacity:.75}.lrc-time.pre-roll{color:#dc2626}.lrc-time.active{color:#000}.waveform-seek-wrap{margin-top:4px;display:grid;gap:0}.waveform-seek-viewport{position:relative;overflow:hidden;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;height:46px;touch-action:none;-webkit-user-select:none;user-select:none}.waveform-time-overlay{position:absolute;top:4px;z-index:2;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#334155;background:#f8fafceb;border-radius:6px;padding:1px 4px;min-width:40px;text-align:center;pointer-events:none}.waveform-time-overlay-copy{pointer-events:auto;cursor:copy}.waveform-time-overlay.left{left:6px}.waveform-time-overlay.right{right:6px}.waveform-seek-viewport.disabled{opacity:.55}.waveform-seek-track{width:var(--waveform-width, 100%);height:100%;transform:translate(var(--waveform-translate-x, 0));will-change:transform}.waveform-seek-track canvas{display:block;height:100%}.waveform-center-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#ef4444;pointer-events:none}.waveform-fallback{margin-top:10px}