/* Logo-derived palette; every application surface follows the selected theme. */
:root{color-scheme:light;--bg:#FAF7FD;--card:#FFFFFF;--line:#E8DDED;--text:#2D2038;--muted:#74627F;--accent:#8539CA;--accent-text:#FFFFFF;--pink:#D52C87;--tint:#F4E8FC;--field:#FCFAFE;--button:#F1EAF6;--hover:#E8DCEF;--stage:#FBF6FF;--error:#AC2948;--error-line:#D9869A;--glow:#EEDDF850;--shadow:#40205014;--preview-shadow:#28133840;font-family:Segoe UI,Arial,sans-serif;font-size:14px}
:root[data-theme=dark]{color-scheme:dark;--bg:#17111F;--card:#251B30;--line:#44334F;--text:#F8F0FF;--muted:#BDAEC9;--accent:#BB86F6;--pink:#FF7CBD;--tint:#3B2549;--field:#1C1425;--button:#35263F;--hover:#493456;--stage:#2E1A3E;--error:#FFB5C5;--error-line:#A35B74;--glow:#65328025;--shadow:#00000025;--preview-shadow:#00000080}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0%,var(--glow) 0,transparent 45%),var(--bg);color:var(--text)}main{max-width:1240px;margin:auto;padding:38px 28px}h1,h2,h3,p{margin:0}h1{font-size:29px;letter-spacing:-1px}h2{font-size:18px;font-weight:600}h3{font-size:15px;font-weight:600}.masthead{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;gap:20px}.brand{display:flex;gap:15px;align-items:center}.brand p{color:var(--muted);margin-top:5px}.logo{display:grid;place-items:center;background:var(--accent);color:var(--accent-text);border-radius:14px;width:52px;height:52px;font-size:40px;font-weight:bold}.badge{font-size:10px;color:var(--accent);letter-spacing:1.5px;border:1px solid var(--line);padding:9px 12px;border-radius:30px}.notice{min-height:44px;border:1px solid var(--line);background:var(--field);border-radius:9px;padding:12px 16px;margin-bottom:24px;color:var(--muted)}.notice.error{color:var(--error);border-color:var(--error-line)}.workspace{display:grid;grid-template-columns:350px minmax(0,1fr);gap:24px}aside,.editor{display:flex;flex-direction:column;gap:24px}.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:24px;box-shadow:0 8px 30px var(--shadow)}.section-heading{display:flex;gap:11px;align-items:center;margin-bottom:22px}.step{color:var(--accent);font:12px Consolas,monospace;background:var(--tint);padding:6px 8px;border-radius:6px}.file-picker{display:flex;align-items:center;text-align:center;flex-direction:column;gap:9px;border:1px dashed var(--accent);padding:22px 10px;border-radius:10px;background:var(--tint);cursor:pointer}.file-picker span:last-of-type{font-size:12px;color:var(--muted)}.file-icon{font-size:30px;color:var(--accent)}.file-picker input{max-width:100%;font-size:12px;margin-top:4px}.divider{display:flex;align-items:center;gap:10px;margin:20px 0;color:var(--muted);font-size:14px}.divider:before,.divider:after{content:'';height:1px;flex:1;background:var(--line)}label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}input,textarea,button{font:inherit}input[type=text],input[type=url],input:not([type]),textarea{width:100%;border:1px solid var(--line);border-radius:7px;background:var(--field);color:var(--text);padding:11px 12px}textarea{resize:vertical;line-height:1.6}input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px}button{border:1px solid var(--line);border-radius:7px;background:var(--button);color:var(--text);padding:10px 14px;cursor:pointer;font-weight:600;white-space:nowrap}button:hover:not(:disabled){background:var(--hover)}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:linear-gradient(115deg,#7930BB,#B51E72);border-color:transparent;color:#FFFFFF}.primary:hover:not(:disabled){background:linear-gradient(115deg,#6826A7,#A31964)}.input-action{display:flex;gap:8px}.input-action input{min-width:0}.hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:9px}.track{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;display:flex;flex-direction:column;gap:7px}.track strong{overflow-wrap:anywhere;font-weight:600}.eyebrow{font-size:10px;letter-spacing:1.2px;color:var(--muted)}#source-label{font-size:12px;color:var(--accent)}.clock{font:32px Consolas,monospace;letter-spacing:-1px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.duration{font-size:14px;color:var(--muted);letter-spacing:0}.timeline{width:100%;accent-color:var(--accent);margin:20px 0}.playback{display:flex;gap:10px}.playback button{flex:1}.seek-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0 22px}.seek-controls button{padding:9px 4px;font-size:12px}.apply-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:12px}.apply-bar .hint{margin:0}.rows-header{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:23px;margin-top:23px}.rows-header .hint{margin:0}.count{display:inline-block;font-size:11px;background:var(--tint);padding:4px 8px;border-radius:20px;margin-left:8px;color:var(--muted)}.empty-state{text-align:center;padding:30px 0 18px;color:var(--muted)}.empty-state>span{font-size:30px;display:block;margin-bottom:12px}.empty-state small{display:block;margin-top:8px}.lyric-rows{list-style:none;margin:15px 0 0;padding:0;max-height:560px;overflow:auto}.lyric-row{display:grid;grid-template-columns:26px minmax(0,1fr) 101px auto;gap:10px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}.line-number{font:12px Consolas,monospace;color:var(--muted)}.lyric-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}.timestamp{font:13px Consolas,monospace!important;padding:9px 7px!important}.stamp{font-size:12px;padding:9px 10px}.lyric-row.timed .line-number{color:var(--accent)}.lyric-row.flash{background:var(--tint);transition:background .6s}.export-bar{display:flex;align-items:end;gap:15px}.export-bar>div{flex:1;min-width:0}#output-panel{margin-top:20px}#output{font:13px/1.7 Consolas,monospace}.output-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:12px}.output-actions .hint{margin:0}#youtube-panel{margin-top:20px}#youtube-player iframe{width:100%;min-height:200px;border:0;border-radius:8px}footer{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:11px;margin-top:28px} [hidden]{display:none!important}
.line-actions{display:flex;gap:5px;justify-content:flex-end}.icon-button{display:grid;place-items:center;width:32px;height:32px;padding:6px;flex-shrink:0}.icon-button svg{width:18px;height:18px}.remove-line{color:var(--error)}.line-play{color:var(--accent)}
.lyric-content{display:flex;align-items:center;gap:8px;min-width:0}.lyric-content .lyric-text{flex:1;min-width:0}.lyric-edit-form{display:flex;align-items:center;gap:5px;flex:1;min-width:0}.lyric-edit-form input{min-width:0;padding:8px;font-size:13px}.save-line{color:var(--accent)}
.lyric-row{grid-template-columns:26px minmax(0,1fr) 201px auto}.timestamp-control{display:grid;grid-template-columns:32px 28px 101px 28px;gap:4px;align-items:center}.timestamp-step{width:28px;height:32px;padding:0;font-size:18px}.timestamp-control .timestamp{min-width:0;text-align:center}
.live-preview{background:linear-gradient(135deg,var(--stage),var(--card))}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.preview-heading .section-heading{margin:0}.preview-heading .badge{font-size:10px}.preview-source{overflow-wrap:anywhere}.lyric-stage{text-align:center;padding:24px 12px;min-height:200px;display:flex;flex-direction:column;justify-content:center;gap:14px}.preview-current{font-size:20px;font-weight:600;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}.preview-current.active{color:var(--pink);font-size:26px}.preview-current p+p{margin-top:5px}.preview-context{color:var(--muted);font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.preview-toolbar,.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.preview-buttons{display:flex;gap:8px;flex-wrap:wrap}.preview-position{font:15px Consolas,monospace;color:var(--muted)}.preview-footer{border-top:1px solid var(--line);padding-top:15px;margin-top:17px}.preview-footer .hint{margin:0;flex:1;min-width:180px}.preview-footer button{font-size:12px}.lyric-row.is-current{background:var(--tint);border-left:3px solid var(--pink);padding-left:7px}
.lyric-text.is-blank{color:var(--muted);font-style:italic}
.import-bar{display:flex;flex-wrap:wrap;gap:10px}.import-bar+#lrc-import-status{margin:9px 0 18px;overflow-wrap:anywhere}
dialog{max-width:460px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:15px;background:var(--card);color:var(--text);padding:24px}dialog::backdrop{background:#0009}dialog p{margin:16px 0;line-height:1.6;color:var(--muted)}dialog form{display:flex;gap:10px;justify-content:flex-end}
.session-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-8px 0 18px}.session-bar p{font-size:12px;color:var(--muted);line-height:1.5}.session-bar p.error{color:var(--error)}.session-bar button{font-size:12px}
.session-bar{flex-wrap:wrap}.session-actions,.language-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.language-picker{gap:8px}.language-picker label{margin:0}.language-picker select{font:inherit;font-size:12px;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:7px;padding:9px;max-width:100%}.language-picker select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.language-status{color:var(--error);margin:-8px 0 18px}.file-picker button{white-space:normal}.preview-buttons button,.import-bar button{white-space:normal;text-align:left}
.music-details{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.music-details .hint{margin:0}
@media(min-width:1000px){.player-card{position:sticky;top:20px}}
@media(max-width:900px){.workspace{grid-template-columns:290px minmax(0,1fr)}.card{padding:18px}.lyric-row{grid-template-columns:22px minmax(0,1fr) 201px}.line-actions{grid-column:2/4;justify-self:end}.rows-header{align-items:start;flex-direction:column}.clock{font-size:28px}}
@media(max-width:680px){.lyric-row{grid-template-columns:22px minmax(0,1fr)}.lyric-content,.timestamp-control,.line-actions{grid-column:2}.timestamp-control,.line-actions{justify-self:start}}
@media(max-width:680px){main{padding:24px 16px}.workspace{grid-template-columns:1fr}.badge{display:none}.masthead{margin-bottom:20px}.apply-bar{align-items:start}.export-bar{flex-wrap:wrap}.export-bar>div{flex-basis:100%}.export-bar .primary{width:100%}footer{flex-direction:column}.lyric-rows{max-height:none}}

/* The workflow is a single column; playback remains available while editing. */
:root{--player-height:180px}
main{max-width:none;padding-bottom:calc(var(--player-height) + 40px)}
.workspace{grid-template-columns:minmax(0,1fr);gap:20px}
.workspace>.card{width:100%;min-width:0}
.workspace>.card>.section-heading{margin-bottom:20px}
.workspace>.card.collapsed>.section-heading{margin-bottom:0}
.panel-toggle{margin-left:auto}
.panel-toggle svg{display:block}
.panel-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
#preview-toggle{margin-left:auto;font-size:12px}
#preview-toggle+.panel-toggle{margin-left:0}
.music-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.music-details>.hint{grid-column:1/-1}
.rows-header{border:0;margin:0;padding:0}
.player-card{position:fixed;inset:auto 0 0;z-index:30;border-radius:16px 16px 0 0;padding:14px 28px;background:var(--card);box-shadow:0 -8px 30px var(--shadow);display:flex;align-items:center;gap:20px;max-height:65dvh;overflow:auto}
.player-card>.section-heading{margin:0;flex:0 0 auto}
.player-card h2{font-size:14px}
.player-controls{display:grid;grid-template-columns:auto minmax(180px,1fr) auto minmax(150px,220px);gap:8px 20px;flex:1;min-width:0;align-items:center}
.player-card .clock{font-size:23px;grid-column:1}
.player-card .timeline{margin:0;grid-column:2/-1;min-width:0}
.player-card .playback{grid-column:1;gap:6px}
.player-card .seek-controls{grid-column:2/4;grid-template-columns:repeat(6,minmax(0,1fr));margin:0}
.player-card #jump-form{grid-column:4;grid-row:2}
.player-card #jump-form label,.player-card #jump-hint{display:none}
.player-card button{padding:9px 10px}
.player-card #jump-time{padding:9px 8px}
.player-card #youtube-panel{margin:0;width:240px;min-width:200px;flex-shrink:0}
.player-card #youtube-panel .hint{display:none}
.player-card #youtube-toggle{display:block;width:100%;margin-bottom:8px;font-size:12px}
.player-card #youtube-toggle[aria-expanded="false"]{margin-bottom:0}
.player-card #youtube-player iframe{display:block;height:200px;width:100%}
.live-preview{position:fixed;z-index:40;width:420px;max-width:calc(100vw - 16px);padding:18px;box-shadow:0 15px 60px var(--preview-shadow);overflow:auto}
.preview-heading{margin-bottom:12px}
#preview-drag{display:flex;align-items:center;gap:10px;cursor:grab;touch-action:none;user-select:none;flex:1;min-width:0;border-radius:5px}
#preview-drag:active{cursor:grabbing}
#preview-drag:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#preview-drag>span{color:var(--muted);font-size:22px}
.live-preview .badge{display:inline-block;padding:5px 9px;font-size:9px}
.live-preview .lyric-stage{min-height:140px;padding:18px 8px}
.live-preview .preview-current.active{font-size:23px}
.live-preview .preview-footer{margin-top:10px;padding-top:10px}
.lyric-rows{max-height:none}
@media(max-width:1100px){
.player-card{gap:12px;padding:12px 16px;flex-wrap:wrap}
.player-card>.section-heading{display:none}
.player-controls{grid-template-columns:auto minmax(0,1fr) minmax(140px,190px);gap:10px}
.player-card .seek-controls{grid-column:2}
.player-card #jump-form{grid-column:3}
.player-card #youtube-panel:not([hidden]){width:200px}
}
@media(max-width:680px){
main{padding-bottom:calc(var(--player-height) + 30px)}
.music-details{grid-template-columns:1fr}
.workspace>.card>.section-heading{gap:8px;flex-wrap:wrap}
.player-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.player-card .clock{grid-column:1;font-size:20px}
.player-card .timeline{grid-column:2}
.player-card .playback{grid-column:1;grid-row:2}
.player-card #jump-form{grid-column:2;grid-row:2}
.player-card .seek-controls{grid-column:1/-1;grid-row:3;gap:5px}
.player-card #youtube-panel:not([hidden]){width:100%}
.player-card #youtube-player{max-width:480px;margin:auto}
.player-card button{font-size:12px}
#preview-toggle{white-space:normal;max-width:140px}
}

.live-preview .lyric-stage{position:relative;display:block;overflow:hidden}
.preview-verses{display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:104px}
.preview-outgoing{position:absolute;inset:18px 8px;pointer-events:none}

/* Reserve two lines per slot so wrapped verses do not resize the preview. */
.live-preview .preview-current{height:69px;flex-shrink:0;display:flex;flex-direction:column;justify-content:safe center;overflow:auto}
.live-preview .preview-context{height:39px;flex-shrink:0;display:flex;flex-direction:column;justify-content:safe center;overflow:auto}
.live-preview .preview-context[hidden]{display:flex!important;visibility:hidden}

.verse-progress{width:160px;max-width:100%;height:4px;flex-shrink:0;align-self:center;overflow:hidden;border-radius:3px;background:var(--line)}
.verse-progress-fill{width:100%;height:100%;background:linear-gradient(90deg,var(--accent),var(--pink));transform:scaleX(0);transform-origin:left}

.music-header-source,.music-header-load{display:none}
#music-source.collapsed .music-header-source{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:13px}
#music-source.collapsed .music-header-load{display:block;font-size:12px;white-space:normal}
#music-source.collapsed .panel-toggle{margin-left:0}
@media(max-width:680px){#music-source.collapsed .music-header-source{order:4;flex-basis:100%}#music-source.collapsed .panel-toggle{margin-left:auto}}

/* Soft cards and rounded primary actions echo the companion karaoke palette. */
.logo{display:block;object-fit:contain;flex-shrink:0;background:none;border-radius:12px}
.card{border-radius:18px}.primary{border-radius:24px}
button{border-radius:10px}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.theme-picker{display:flex;align-items:center;gap:8px}.theme-picker label{margin:0}
.theme-picker select,.language-picker select{font:inherit;font-size:12px;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:9px;max-width:100%}
.theme-picker select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.theme-status{color:var(--error);margin:-8px 0 18px}
.notice.success{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;z-index:60;max-width:1184px;margin:0 auto;overflow-wrap:anywhere;box-shadow:0 8px 30px var(--shadow);color:#24633C;border-color:#86B99A;background:#EDF8F0}
.notice.success::before{content:'✓';font-weight:700;margin-right:8px}
:root[data-theme=dark] .notice.success{color:#B4E6C5;border-color:#528566;background:#20382B}
@media(max-width:680px){.session-actions{gap:10px}.masthead{flex-wrap:wrap}.brand{gap:12px}.brand h1{font-size:26px}}