*,:before,:after{box-sizing:border-box}:root{--bg:#161109;--bg2:#211a15;--bg3:#2d2520;--border:#3a2f24;--text:#f2ede3;--text2:#c0a882;--accent:#d4893c;--accent2:#e8b06e;--danger:#d94f3d;--radius:10px;--radius-sm:6px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--font:system-ui, -apple-system, sans-serif;--mono:ui-monospace, "Cascadia Code", monospace;--serif:Georgia, "Times New Roman", serif;--ease:.15s ease-out;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:16px}body{background:var(--bg);min-height:100svh;padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);background-image:radial-gradient(100vw 60vh at 50% 100%,oklch(55% .18 50/.14) 0%,#0000 70%),radial-gradient(60vw 30vh at 50% 0,oklch(52% .12 55/.04) 0%,#0000 70%);margin:0}#root{flex-direction:column;min-height:100svh;display:flex}.page{flex-direction:column;width:100%;max-width:700px;min-height:100svh;margin:0 auto;display:flex}.app-header{padding:12px var(--space-md) 10px;padding-top:max(12px, env(safe-area-inset-top));border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:var(--space-sm);background:var(--bg);z-index:10;background-image:radial-gradient(260px 60px at 60px 100%,oklch(62% .2 52/.3) 0%,#0000 100%),radial-gradient(80px 40px at 0 60%,oklch(58% .18 48/.12) 0%,#0000 70%);display:flex;position:sticky;top:0}.app-title{font-size:22px;font-weight:700;font-family:var(--serif);color:var(--accent2);letter-spacing:.02em;text-shadow:0 0 28px oklch(60% .16 55/.4);flex-shrink:0;margin:0;font-style:italic}.header-actions{flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:6px;display:flex}.search-wrap{padding:12px var(--space-md) 8px}.search-input{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);font-size:16px;font-family:var(--font);min-height:44px;transition:border-color var(--ease);outline:none;padding:11px 14px}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px oklch(62% .14 55/.14)}.search-input::placeholder{color:var(--text2)}.view-toggle{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;overflow:hidden}.view-toggle button{color:var(--text2);cursor:pointer;min-width:40px;min-height:40px;transition:background var(--ease), color var(--ease);background:0 0;border:none;justify-content:center;align-items:center;padding:0 8px;font-size:15px;display:flex}.view-toggle button.active{background:var(--accent);color:var(--bg)}.view-toggle button:not(.active):hover{background:var(--bg3);color:var(--text)}.btn-icon{flex-shrink:0;width:18px;height:18px}.import-wrap{align-items:center;gap:var(--space-sm);display:flex}.import-btn{background:var(--accent);color:var(--bg);border-radius:var(--radius);min-height:40px;font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;white-space:nowrap;transition:background var(--ease), opacity var(--ease), transform .1s ease-out;border:none;align-items:center;gap:6px;padding:0 12px;display:flex}.import-btn:disabled{opacity:.45;cursor:wait}.import-btn:hover:not(:disabled){background:var(--accent2)}.import-btn:active:not(:disabled){transform:scale(.96)}.import-error{color:var(--danger);font-size:13px}.export-btn{background:var(--bg2);color:var(--text2);border:1px solid var(--border);border-radius:var(--radius);min-height:40px;font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;white-space:nowrap;transition:background var(--ease), color var(--ease), border-color var(--ease), opacity var(--ease), transform .1s ease-out;align-items:center;gap:6px;padding:0 12px;display:flex}.export-btn:disabled{opacity:.45;cursor:wait}.export-btn:hover:not(:disabled){background:var(--bg3);color:var(--text);border-color:color-mix(in srgb, var(--accent) 30%, var(--border))}.export-btn:active:not(:disabled){transform:scale(.96)}.song-list-wrap{padding:0 var(--space-md) var(--space-xl);flex:1}.song-list{flex-direction:column;display:flex}.song-grid{padding-top:var(--space-sm);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;display:grid}.song-card-list{padding:14px var(--space-sm);border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--ease), opacity .12s ease-out;border-radius:var(--radius-sm);align-items:center;gap:14px;min-height:76px;display:flex}.song-card-list:hover{background:color-mix(in srgb, var(--accent) 8%, var(--bg2))}.song-card-list:active{background:color-mix(in srgb, var(--accent) 12%, var(--bg2))}.song-card-list:last-child{border-bottom:none}.song-card-list-logo{border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;width:46px;height:46px}.song-card-list-placeholder{border-radius:var(--radius-sm);background:radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--accent) 32%, var(--bg3)) 0%, var(--bg3) 100%);width:46px;height:46px;color:var(--accent2);flex-shrink:0;justify-content:center;align-items:center;font-size:18px;display:flex;box-shadow:inset 0 0 12px oklch(60% .2 52/.18)}.song-card-list-info{flex-direction:column;gap:2px;min-width:0;display:flex}.song-card-tile{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color var(--ease), transform .1s ease-out;position:relative;overflow:hidden}.song-card-tile:hover{border-color:var(--accent);transform:translateY(-2px)}@media (prefers-reduced-motion:reduce){.song-card-tile{transition:border-color var(--ease)}.song-card-tile:hover{transform:none}}.song-card-tile-img{aspect-ratio:1;background:radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--accent) 16%, var(--bg3)) 0%, var(--bg3) 100%);justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.song-card-tile-img img{object-fit:cover;width:100%;height:100%}.song-card-tile-placeholder{color:color-mix(in srgb, var(--accent) 72%, var(--text2));filter:drop-shadow(0 2px 10px oklch(58% .18 52/.3));font-size:40px}.song-card-tile-info{flex-direction:column;gap:3px;padding:10px 12px 12px;display:flex}.song-name{font-size:16px;font-weight:700;font-family:var(--serif);color:var(--text);white-space:nowrap;text-overflow:ellipsis;letter-spacing:.01em;font-style:italic;line-height:1.25;overflow:hidden}.song-author{color:var(--text2);white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.4;overflow:hidden}.empty-state{color:var(--text2);text-align:center;background-image:radial-gradient(340px 280px at 50% 30%,oklch(55% .18 50/.13) 0%,#0000 70%);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:64px 40px 80px;display:flex}.empty-icon{filter:drop-shadow(0 4px 32px oklch(60% .2 52/.7))drop-shadow(0 0 16px oklch(72% .16 60/.45));margin-bottom:8px;font-size:68px;line-height:1}.empty-state p{max-width:30ch;margin:0;font-size:16px;line-height:1.65}.empty-state strong{color:var(--text)}.state-msg{text-align:center;color:var(--text2);padding:40px}.select-mode-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-size:14px;font-weight:600;font-family:var(--font);border-radius:var(--radius);cursor:pointer;min-height:40px;transition:background var(--ease), color var(--ease), border-color var(--ease);white-space:nowrap;padding:0 12px}.select-mode-btn:hover{background:var(--bg3);color:var(--text)}.select-mode-btn.active{background:var(--bg3);color:var(--text);border-color:var(--border)}.select-check{border:2px solid var(--border);width:24px;height:24px;color:var(--text2);transition:background var(--ease), border-color var(--ease), color var(--ease);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;display:flex}.select-check.checked{background:var(--accent);border-color:var(--accent);color:var(--bg)}.tile-check{top:var(--space-sm);right:var(--space-sm);z-index:2;background:var(--bg);border:2px solid var(--border);width:24px;height:24px;color:var(--text2);transition:background var(--ease), border-color var(--ease), color var(--ease);border-radius:50%;justify-content:center;align-items:center;font-size:12px;display:flex;position:absolute}.tile-check.checked{background:var(--accent);border-color:var(--accent);color:var(--bg)}.song-card-list.selected{background:color-mix(in srgb, var(--accent) 10%, transparent)}.song-card-tile.selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--bg2))}.delete-bar{gap:var(--space-sm);padding:12px var(--space-md);padding-bottom:max(12px, env(safe-area-inset-bottom));background:var(--bg2);border-top:1px solid var(--border);z-index:20;display:flex;position:sticky;bottom:0}.delete-bar-btn{padding:0 var(--space-md);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg3);min-height:48px;color:var(--text);font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background var(--ease), opacity var(--ease);flex:1}.delete-bar-btn:disabled{opacity:.3;cursor:default}.delete-bar-btn:not(:disabled):hover{background:color-mix(in srgb, var(--text) 8%, var(--bg3))}.delete-bar-btn.danger{background:color-mix(in srgb, var(--danger) 14%, var(--bg3));border-color:color-mix(in srgb, var(--danger) 35%, transparent);color:var(--danger)}.delete-bar-btn.danger:not(:disabled):hover{background:color-mix(in srgb, var(--danger) 22%, var(--bg3))}.delete-bar-btn.secondary{color:var(--text2);background:var(--bg2)}.delete-bar-btn.secondary:hover{color:var(--text);background:var(--bg3)}.delete-bar-btn.ghost{color:var(--text2);background:var(--bg2);letter-spacing:.05em;flex:0 0 48px;padding:0}.delete-bar-btn.ghost:hover{color:var(--text);background:var(--bg3)}.install-banner{justify-content:space-between;align-items:center;gap:var(--space-sm);padding:14px var(--space-md);background:color-mix(in srgb, var(--accent) 20%, var(--bg2));border-bottom:1px solid color-mix(in srgb, var(--accent) 50%, var(--border));display:flex}.install-banner-text{flex-direction:column;gap:2px;font-size:13px;line-height:1.4;display:flex}.install-banner-text strong{color:var(--text);font-size:14px}.install-banner-text span{color:var(--text2)}.install-banner-actions{align-items:center;gap:var(--space-sm);flex-shrink:0;display:flex}.install-banner-btn{border-radius:var(--radius-sm);border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);background:color-mix(in srgb, var(--accent) 18%, var(--bg3));color:var(--accent2);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background var(--ease);padding:8px 16px}.install-banner-btn:hover{background:color-mix(in srgb, var(--accent) 28%, var(--bg3))}.install-banner-dismiss{width:32px;height:32px;color:var(--text2);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--ease), background var(--ease);background:0 0;border:none;justify-content:center;align-items:center;font-size:14px;display:flex}.install-banner-dismiss:hover{color:var(--text);background:var(--bg3)}.confirm-bar{padding:14px var(--space-md);padding-bottom:max(14px, env(safe-area-inset-bottom));background:var(--bg2);border-top:1px solid color-mix(in srgb, var(--danger) 35%, var(--border));z-index:20;position:sticky;bottom:0}.confirm-bar-msg{color:var(--text);margin:0 0 12px;font-size:14px;line-height:1.5}.confirm-bar-actions{gap:var(--space-sm);display:flex}.song-view{padding-bottom:48px}.song-header{padding:12px var(--space-md);padding-top:max(12px, env(safe-area-inset-top));border-bottom:1px solid var(--border);background:var(--bg);z-index:10;justify-content:space-between;align-items:center;gap:var(--space-sm);display:flex;position:sticky;top:0}.back-btn{color:var(--accent2);font-size:17px;font-weight:600;font-family:var(--font);cursor:pointer;padding:0 var(--space-sm);border-radius:var(--radius-sm);min-height:44px;transition:background var(--ease);background:0 0;border:none;align-items:center;gap:4px;display:flex}.back-btn:hover{background:var(--bg2)}.chord-toggle{background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-size:14px;font-weight:600;font-family:var(--font);border-radius:var(--radius);cursor:pointer;min-height:44px;transition:background var(--ease), color var(--ease), border-color var(--ease);padding:0 14px}.chord-toggle:hover{background:var(--bg3);color:var(--text)}.chord-toggle.active{background:var(--accent);border-color:var(--accent);color:var(--bg)}.song-hero{align-items:center;gap:var(--space-md);padding:22px var(--space-md) 18px;border-bottom:1px solid var(--border);background-image:radial-gradient(380px 120px at 50% 130%,oklch(60% .18 52/.22) 0%,#0000 70%);display:flex}.song-hero>div{flex:1;min-width:0}.song-logo{border-radius:var(--radius);object-fit:cover;flex-shrink:0;width:64px;height:64px}.song-title{font-size:22px;font-weight:700;font-family:var(--serif);color:var(--text);letter-spacing:.02em;text-wrap:balance;overflow-wrap:break-word;margin:0 0 4px;font-style:italic;line-height:1.2}.song-view .song-author{color:var(--text2);margin:0;font-size:15px}.song-title--edit,.song-author--edit{border:none;border-bottom:1px solid var(--text2);width:100%;color:inherit;background:0 0;outline:none;padding:0 0 2px;font-family:inherit;display:block}.song-title--edit{font-size:22px;font-weight:700;font-family:var(--serif);letter-spacing:.02em;margin:0 0 4px;font-style:italic;line-height:1.2}.song-author--edit{color:var(--text2);font-size:15px}.lyrics-wrap{padding:16px var(--space-md) 0;max-width:65ch;overflow-x:hidden}.lyrics-plain p{font-family:var(--mono);font-size:var(--lyrics-font-size,15px);white-space:pre-wrap;color:var(--text);margin:0;line-height:1.75}.lyrics-chords{font-family:var(--mono);font-size:var(--lyrics-font-size,15px)}.lyric-line{flex-wrap:wrap;align-items:flex-end;min-height:1.7em;display:flex}.chord-only-line{flex-wrap:wrap;gap:6px 10px;margin-top:4px;margin-bottom:2px;display:flex;overflow-x:hidden}.plain-line{color:var(--text);white-space:pre-wrap;line-height:1.7}.lyric-blank{height:.75em}.lyric-blank--chords{height:2.25em}.lyric-segment{flex-direction:column;align-items:flex-start;display:inline-flex;position:relative}.chord-badge{background:color-mix(in srgb, var(--accent) 12%, var(--bg3));border:1px solid color-mix(in srgb, var(--accent) 70%, transparent);color:var(--accent2);font-size:calc(var(--lyrics-font-size,15px) * .73);font-weight:700;font-family:var(--font);border-radius:var(--radius-sm);white-space:nowrap;letter-spacing:.02em;margin-bottom:3px;padding:1px 6px;line-height:1.4;display:inline-block;box-shadow:0 0 8px oklch(62% .2 52/.28)}.lyric-text{color:var(--text);white-space:pre-wrap;line-height:1.6}.section-marker{font-family:var(--mono);font-size:var(--lyrics-font-size,15px);color:var(--text2);font-style:italic;line-height:1.7}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.empty-headline{font-size:24px;font-weight:700;font-family:var(--serif);color:var(--text);letter-spacing:.01em;text-shadow:0 0 32px oklch(62% .18 54/.5);margin:0 0 2px;font-style:italic}.empty-state .import-wrap,.empty-state-action{margin-top:var(--space-md)}@media (width<=520px){.btn-label{display:none}.import-btn,.export-btn{justify-content:center;min-width:40px;padding:0}.import-error{text-align:right;max-width:100px;font-size:11px}.import-wrap{flex-direction:column;align-items:flex-end}}@media (width<=360px){.chord-toggle,.edit-toggle{padding:0 10px;font-size:13px}.back-btn{padding:0 4px;font-size:15px}.song-header{gap:4px}}.chord-toggle{transition:background var(--ease), color var(--ease), border-color var(--ease), transform .12s ease-out}.chord-toggle:active{transform:scale(.96)}.chord-toggle.active{transition:background var(--ease), color var(--ease), border-color var(--ease), transform .12s ease-out}.song-card-list:active{opacity:.88}.chord-badge{animation:.14s ease-out both chord-appear}@keyframes chord-appear{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}.select-check{transition:background var(--ease), border-color var(--ease), color var(--ease), transform .1s ease-out}.select-check.checked{transform:scale(1.1)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:0s!important;animation:none!important}}.font-size-btns{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;overflow:hidden}.font-size-btn{color:var(--text2);font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;min-width:44px;min-height:44px;transition:background var(--ease), color var(--ease);letter-spacing:-.5px;background:0 0;border:none;justify-content:center;align-items:center;padding:0 10px;display:flex}.font-size-btn:hover:not(:disabled){background:var(--bg3);color:var(--text)}.font-size-btn:disabled{opacity:.3;cursor:default}.font-size-btn+.font-size-btn{border-left:1px solid var(--border)}.edit-toggle{background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-size:14px;font-weight:600;font-family:var(--font);border-radius:var(--radius);cursor:pointer;min-height:44px;transition:background var(--ease), color var(--ease), border-color var(--ease), transform .12s ease-out;padding:0 14px}.edit-toggle:hover{background:var(--bg3);color:var(--text)}.edit-toggle:active{transform:scale(.96)}.edit-toggle.active{background:color-mix(in srgb, var(--accent) 20%, var(--bg2));border-color:var(--accent);color:var(--accent2)}.chord-badge--editable{cursor:pointer}.chord-badge--editable:hover{background:color-mix(in srgb, var(--accent) 30%, var(--bg3));border-color:var(--accent)}.chord-badge--active{background:var(--accent);color:var(--bg);border-color:var(--accent2)}.lyric-word--editable{cursor:pointer;border-bottom:1px dashed color-mix(in srgb, var(--accent) 50%, transparent);border-radius:2px}.lyric-word--editable:hover,.lyric-word--editable:active{background:color-mix(in srgb, var(--accent) 12%, transparent)}.chord-popover{z-index:9999;background:var(--bg2);border:1px solid var(--accent);border-radius:var(--radius);white-space:nowrap;align-items:center;gap:6px;padding:6px;display:flex;box-shadow:0 4px 20px #00000080}.chord-popover-input{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:16px;font-family:var(--mono);border-radius:4px;outline:none;width:88px;min-height:40px;padding:6px 10px}.chord-popover-input:focus{border-color:var(--accent)}.chord-popover-input--invalid,.chord-popover-input--invalid:focus{border-color:var(--danger)}.chord-popover-btn--confirm:disabled{opacity:.35;cursor:not-allowed}.chord-popover-actions{gap:4px;display:flex}.chord-popover-btn{cursor:pointer;min-width:40px;min-height:40px;transition:background var(--ease);border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;font-size:16px;display:flex}.chord-popover-btn--confirm{background:var(--accent);color:var(--bg)}.chord-popover-btn--confirm:hover{background:var(--accent2)}.chord-popover-btn--delete{background:color-mix(in srgb, var(--danger) 15%, var(--bg3));color:var(--danger);border-color:color-mix(in srgb, var(--danger) 30%, transparent)}.chord-popover-btn--delete:hover{background:color-mix(in srgb, var(--danger) 25%, var(--bg3))}.header-menu-wrap{position:relative}.header-menu-btn{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;width:40px;height:40px;transition:background var(--ease), border-color var(--ease);flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;display:flex}.header-menu-btn:hover{background:var(--bg3);border-color:color-mix(in srgb, var(--accent) 30%, var(--border))}.header-menu-btn.active{background:var(--bg3);border-color:var(--accent)}.burger-line{background:var(--text2);width:16px;height:1.5px;transition:background var(--ease);border-radius:2px;display:block}.header-menu-btn:hover .burger-line,.header-menu-btn.active .burger-line{background:var(--text)}.header-menu-dropdown{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);z-index:100;flex-direction:column;gap:2px;min-width:200px;padding:6px;animation:.12s ease-out both menu-appear;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 4px 12px #0000008c}@keyframes menu-appear{0%{opacity:0;transform:translateY(-6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.header-menu-dropdown{animation:none}}.header-menu-item{align-items:center;display:flex}.header-menu-item .import-wrap{flex-direction:row;align-items:center;width:100%}.header-menu-item .import-btn,.header-menu-item .export-btn{border-radius:var(--radius-sm);width:100%;color:var(--text);background:0 0;border:none;justify-content:flex-start;min-height:40px;padding:0 10px;font-size:14px;font-weight:500}.header-menu-item .import-btn .btn-label,.header-menu-item .export-btn .btn-label{display:inline}.header-menu-item .import-btn:hover:not(:disabled),.header-menu-item .export-btn:hover:not(:disabled){background:var(--bg3);color:var(--text)}.header-menu-item .import-error{max-width:120px;font-size:11px}.header-menu-divider{background:var(--border);height:1px;margin:4px 0}.view-toggle-row{justify-content:space-between;padding:4px 10px}.header-menu-label{color:var(--text2);font-size:13px;font-weight:500}.header-menu-action{text-align:left;width:100%;color:var(--text);font-size:14px;font-weight:500;font-family:var(--font);border-radius:var(--radius-sm);cursor:pointer;min-height:40px;transition:background var(--ease);background:0 0;border:none;padding:0 10px}.header-menu-action:hover{background:var(--bg3)}