*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#0a0a10;--color-bg-elevated:#0d0d14;--color-surface:#131320;--color-surface-1:#181826;--color-surface-2:#1f1f2e;--color-surface-hover:#1a1a28;--color-text:#fffffff0;--color-text-secondary:#ffffff8f;--color-text-muted:#ffffff57;--color-text-subtle:#ffffff2e;--color-border:#ffffff12;--color-border-hover:#ffffff1f;--color-border-strong:#ffffff2e;--color-primary:#8b45ff;--color-primary-hover:#9a5cff;--color-primary-active:#7b2fff;--color-primary-light:#8b45ff24;--color-primary-lighter:#8b45ff12;--color-primary-ring:#8b45ff59;--color-primary-glow:#8b45ff47;--color-chord:#c6a9ff;--color-accent:#47bfff;--color-accent-light:#47bfff24;--color-accent-soft:#7dd3fc;--color-favorite:#f59e0b;--color-favorite-soft:#fbbf24;--color-danger:#f87171;--color-danger-strong:#ef4444;--color-danger-light:#ef44441f;--color-success:#4ade80;--color-success-strong:#22c55e;--color-success-light:#22c55e1f;--color-tag-bg:#ffffff0d;--radius-xs:6px;--radius-sm:8px;--radius:10px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;--space-0-5:2px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--text-2xs:.6875rem;--text-xs:.75rem;--text-sm:.8125rem;--text-base:.9375rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.625rem;--text-3xl:2rem;--text-4xl:2.75rem;--dur-fast:.12s;--dur:.18s;--dur-slow:.28s;--ease-std:cubic-bezier(.2, 0, 0, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--shadow-xs:0 1px 2px #0000004d;--shadow-sm:0 1px 3px #00000059;--shadow:0 2px 8px #0000006b;--shadow-md:0 4px 16px #00000073;--shadow-lg:0 8px 32px #00000080;--shadow-xl:0 16px 48px #0000008c;--shadow-ring:0 0 0 3px var(--color-primary-ring);--shadow-glow:0 0 24px var(--color-primary-glow);--shadow-inset-hi:inset 0 1px 0 #ffffff0f;--z-sticky:50;--z-header:100;--z-overlay:150;--z-modal:200;--z-popover:300;--z-toast:400;--max-width:820px;--header-height:56px;--tab-bar-height:64px;--font-mono:"SF Mono", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;--font-sans:-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-display:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{font-family:var(--font-sans);background:radial-gradient(ellipse 80% 60% at 50% -10%, #8b45ff14, transparent 70%), radial-gradient(ellipse 60% 40% at 100% 100%, #47bfff0a, transparent 60%), var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01", "cv11";text-rendering:optimizelegibility;background-attachment:fixed;line-height:1.55}::selection{background:var(--color-primary-ring);color:#fff}a{color:inherit;text-decoration:none}:focus{outline:none}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[role=button]:focus-visible{box-shadow:var(--shadow-ring);outline:none}*{scrollbar-width:thin;scrollbar-color:var(--color-border-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:var(--radius-pill);background-clip:padding-box;border:2px solid #0000}::-webkit-scrollbar-thumb:hover{background:#8b45ff59 padding-box padding-box;border:2px solid #0000}.layout{flex-direction:column;min-height:100vh;display:flex}.header{-webkit-backdrop-filter:blur(24px)saturate(140%);border-bottom:1px solid var(--color-border);z-index:var(--z-header);background:#0a0a10b8;position:sticky;top:0}.header-inner{max-width:var(--max-width);justify-content:space-between;align-items:center;height:56px;margin:0 auto;padding:0 1.5rem;display:flex}.logo{color:#fff;letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.nav{gap:.5rem;display:flex}.nav-link{border-radius:var(--radius);color:var(--color-text-secondary);padding:.375rem .75rem;font-size:.875rem;font-weight:500;transition:color .15s,background .15s}.main{max-width:var(--max-width);flex:1;width:100%;margin:0 auto;padding:2rem 1.5rem}.hero{text-align:center;padding:var(--space-12) 0 var(--space-8);position:relative}.hero:before{content:"";background:radial-gradient(ellipse at center top, var(--color-primary-light), transparent 60%);pointer-events:none;z-index:-1;width:min(640px,100%);height:360px;position:absolute;top:-2rem;left:50%;transform:translate(-50%)}.hero h1{font-family:var(--font-display);font-size:var(--text-4xl);letter-spacing:-.035em;color:var(--color-text);margin-bottom:var(--space-3);background:linear-gradient(#fff 0%,#ffffffd1 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:800;line-height:1.02}.hero-subtitle{font-size:var(--text-lg);color:var(--color-text-secondary);margin-bottom:var(--space-8);letter-spacing:-.005em}.search-bar{gap:.5rem;max-width:560px;margin:0 auto;display:flex}.search-bar-large{max-width:640px}.search-input{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);outline:none;flex:1;padding:.625rem 1rem;font-size:1rem;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.search-bar-large .search-input{padding:.875rem 1.25rem;font-size:1.125rem}.search-button{background:var(--color-primary);color:#fff;border-radius:var(--radius);cursor:pointer;border:none;padding:.625rem 1.25rem;font-size:.9375rem;font-weight:600;transition:background .15s}.search-button:hover{background:var(--color-primary-hover)}.search-bar-large .search-button{padding:.875rem 1.5rem;font-size:1rem}.browse-section{margin-top:1rem}.browse-section h2{margin-bottom:1rem;font-size:1.5rem;font-weight:700}.tag{background:var(--color-tag-bg);border:1px solid var(--color-border);border-radius:var(--radius-pill);font-size:var(--text-xs);color:var(--color-text-secondary);letter-spacing:-.005em;align-items:center;padding:.1875rem .5625rem;display:inline-flex}.badge{background:var(--color-primary-light);border-radius:var(--radius-pill);font-size:var(--text-2xs);color:var(--color-chord);text-transform:uppercase;letter-spacing:.04em;padding:.125rem .5rem;font-weight:600;display:inline-block}.favorite-btn{cursor:pointer;color:var(--color-text-secondary);background:0 0;border:none;padding:.25rem;font-size:1.375rem;line-height:1;transition:color .15s,transform .15s;position:absolute;top:1rem;right:1rem}.favorite-btn-active{color:var(--color-favorite)}.song-page{max-width:720px}.song-topbar{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.back-link{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:.875rem;transition:color .15s;display:inline-block}.back-link:hover{color:var(--color-primary)}.song-header{margin-bottom:var(--space-6)}.song-header h1{font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:-.025em;margin-bottom:var(--space-1);font-weight:800;line-height:1.1}.song-artist{font-size:var(--text-lg);color:var(--color-text-secondary);margin-bottom:var(--space-3);letter-spacing:-.005em}.song-meta{gap:var(--space-2);flex-wrap:wrap;display:flex}.song-header-actions{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:.5rem;display:flex}.song-header-actions-row{align-items:center;gap:.5rem;display:flex}.song-action-btn,.song-header-actions .favorite-btn,.song-header-actions .share-btn,.song-header-actions .youtube-btn,.song-header-actions .add-to-room-btn,.song-header-actions .transpose-btn,.song-header-actions .autoscroll-icon-btn,.song-toolbar-row .transpose-btn,.song-toolbar-row .autoscroll-icon-btn{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-tag-bg);width:36px;min-width:36px;height:36px;min-height:36px;color:var(--color-text-secondary);cursor:pointer;transition:background var(--dur) var(--ease-std), color var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std), transform 0;justify-content:center;align-items:center;margin:0;padding:0;font-family:inherit;font-size:1rem;font-weight:500;line-height:1;display:inline-flex;position:static}.song-action-btn:hover,.song-header-actions .favorite-btn:hover,.song-header-actions .share-btn:hover,.song-header-actions .youtube-btn:hover,.song-header-actions .add-to-room-btn:hover:not(:disabled),.song-header-actions .transpose-btn:hover,.song-header-actions .autoscroll-icon-btn:hover,.song-toolbar-row .transpose-btn:hover,.song-toolbar-row .autoscroll-icon-btn:hover{color:var(--color-text);border-color:var(--color-border-hover);background:#ffffff14;transform:none}.song-action-btn.is-active,.song-header-actions .favorite-btn-active,.song-header-actions .add-to-room-btn.is-done,.song-header-actions .transpose-btn-current,.song-header-actions .autoscroll-icon-btn-on,.song-toolbar-row .transpose-btn-current,.song-toolbar-row .autoscroll-icon-btn-on{background:var(--color-primary-light);color:var(--color-chord);border-color:var(--color-primary-ring)}.song-header-actions .favorite-btn{font-size:1.25rem}.song-header-actions .favorite-btn-active{color:var(--color-favorite)}.share-btn{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:.25rem;line-height:1;transition:color .15s,transform .15s;display:flex}.share-btn:hover{color:var(--color-text);transform:scale(1.15)}.add-to-room-wrap{align-items:center;display:flex;position:relative}.add-to-room-btn{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:.25rem;line-height:1;transition:color .15s,transform .15s;display:flex}.add-to-room-btn:hover:not(:disabled){color:var(--color-text);transform:scale(1.15)}.add-to-room-btn:disabled{opacity:.5;cursor:progress}.add-to-room-status{background:var(--color-text);color:var(--color-bg,#fff);white-space:nowrap;pointer-events:none;z-index:50;border-radius:.35rem;padding:.3rem .55rem;font-size:.8rem;position:absolute;top:calc(100% + .35rem);right:0;box-shadow:0 4px 12px #0000002e}.btn-delete{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:.25rem;line-height:1;transition:color .15s,transform .15s;display:flex}.btn-delete:hover{color:#e53935;transform:scale(1.15)}.share-backdrop{z-index:200;-webkit-backdrop-filter:blur(20px);background:#00000080;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.share-modal{background:var(--color-surface-hover);border:1px solid var(--color-border-hover);text-align:center;border-radius:14px;width:100%;max-width:320px;padding:1.5rem;animation:.2s share-fade-in;position:relative}@keyframes share-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.share-modal-close{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;align-items:center;padding:.25rem;transition:color .15s;display:flex;position:absolute;top:.75rem;right:.75rem}.share-modal-close:hover{color:var(--color-text)}.share-modal-header{margin-bottom:1.25rem;padding-right:1.5rem}.share-modal-title{color:var(--color-text);margin-bottom:.125rem;font-size:1rem;font-weight:600}.share-modal-artist{color:var(--color-text-secondary);font-size:.8125rem}.share-modal-qr{margin-bottom:1.25rem}.share-modal-qr img{border-radius:10px}.share-modal-qr-placeholder{background:#ffffff0a;border-radius:10px;width:200px;height:200px;margin:0 auto}.share-modal-copy{width:100%;color:var(--color-text);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff14;border-radius:10px;padding:.625rem;font-size:.8125rem;font-weight:500;transition:background .15s}.share-modal-copy:hover{background:#ffffff1a}.tab-selector{border:1px solid var(--color-border);border-radius:var(--radius-pill);margin-bottom:var(--space-5);background:#ffffff0a;gap:2px;padding:3px;display:inline-flex}.tab-btn{border-radius:var(--radius-pill);font-size:var(--text-base);color:var(--color-text-secondary);cursor:pointer;transition:color var(--dur) var(--ease-std), background var(--dur) var(--ease-std);background:0 0;border:none;padding:.375rem 1rem;font-family:inherit;font-weight:500}.tab-btn:hover{color:var(--color-text)}.tab-btn-active{color:var(--color-chord);background:var(--color-primary-light);box-shadow:var(--shadow-inset-hi)}.lyrics-view{font-size:1.0625rem;line-height:1.8}.lyrics-paragraph{margin-bottom:1.5rem}.chord-sheet{font-size:1rem;line-height:1.4}.chord-sheet-toolbar{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-border);top:var(--header-height);-webkit-backdrop-filter:blur(16px);z-index:var(--z-sticky);background:linear-gradient(#0a0a10f2,#0a0a10d1);display:flex;position:sticky}.autoscroll-icon-btn{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-tag-bg);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;transition:background var(--dur) var(--ease-std), color var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std);justify-content:center;align-items:center;padding:0;display:inline-flex}.autoscroll-icon-btn:hover{color:var(--color-text);border-color:var(--color-border-hover);background:#ffffff14}.autoscroll-icon-btn-on{background:var(--color-primary-light);color:var(--color-chord);border-color:var(--color-primary-ring);box-shadow:var(--shadow-inset-hi)}.autoscroll-icon-btn-on:hover{color:var(--color-chord);background:#8b45ff38;border-color:#8b45ff80}.song-toolbar-row{margin:0 0 var(--space-3);flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.song-toolbar-row .transpose-toolbar{margin-left:auto}.chord-version-nav{color:var(--color-text-secondary);align-items:center;gap:6px;margin:0;font-size:13px;display:inline-flex}.chord-version-counter{text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.02em;min-width:56px}.chord-version-quality{opacity:.7;margin-left:4px}.chordpro{font-family:var(--font-mono);padding:1rem;line-height:1.5}.chords-original{font-family:var(--font-mono);color:var(--color-text);white-space:pre-wrap;word-wrap:break-word;margin:0;padding:1rem;line-height:1.5}.cp-section{text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary);margin:1.5rem 0 .5rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.75rem;font-weight:700}.cp-section:first-child{margin-top:0}.cp-blank{height:.875rem}.cp-line{margin-bottom:.125rem;line-height:1.5}.cp-line.cp-has-chords{margin-bottom:.375rem;line-height:1.2}.cp-line.cp-chorus{border-left:3px solid #863bff40;padding-left:1.5rem}.cp-segment{vertical-align:bottom;flex-direction:column;align-items:flex-start;display:inline-flex}.cp-chord{color:var(--color-chord);border-radius:var(--radius-xs);white-space:nowrap;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-inset-hi), 0 1px 2px #00000059;letter-spacing:-.01em;background:linear-gradient(#8b45ff38,#8b45ff1f);padding:.0625rem .375rem;font-size:.875em;font-weight:700;line-height:1.4;display:inline-block}.cp-text{white-space:pre-wrap}@media (width<=720px){.chordpro{padding:.75rem}}.piano-sheet{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.25rem}.piano-sheet-content{font-family:var(--font-mono);white-space:pre-wrap;font-size:.875rem;line-height:1.6;overflow-x:auto}.piano-sheet-pdf{padding:0;overflow:hidden}.piano-sheet-pdf-frame{background:var(--color-surface);border:0;width:100%;min-height:80vh;display:block}.piano-sheet-pdf-actions{border-top:1px solid var(--color-border);flex-wrap:wrap;gap:1rem;padding:.75rem 1rem;display:flex}.piano-sheet-external{text-align:center}.piano-sheet-external-note{color:var(--color-text-secondary);margin:0 0 1rem;font-size:.9375rem}.piano-sheet-external-actions{flex-direction:column;align-items:center;gap:.75rem;display:flex}.piano-sheet-download-btn{background:var(--color-primary,#4f46e5);color:#fff;border-radius:var(--radius);padding:.75rem 1.5rem;font-weight:600;text-decoration:none;display:inline-block}.piano-sheet-download-btn:hover{filter:brightness(1.1)}.piano-sheet-source-link{color:var(--color-text-secondary);font-size:.875rem;text-decoration:underline}.search-page .search-bar{margin-bottom:1.5rem}.results-count{color:var(--color-text-secondary);margin-bottom:1rem;font-size:.875rem}.mode-toggle{background:#ffffff0a;border:1px solid #ffffff0f;border-radius:20px;padding:2px;display:flex}.mode-toggle-btn{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:18px;padding:.25rem .75rem;font-size:.8125rem;font-weight:500;transition:background .15s,color .15s}.mode-toggle-btn:hover{color:var(--color-text)}.mode-toggle-btn.is-active{color:var(--color-chord);background:#863bff40}.results-section{margin-bottom:2.5rem}.results-heading{margin-bottom:.75rem;font-size:1.25rem;font-weight:700}.web-section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.web-section-header .results-heading{margin-bottom:0}.web-results-list{flex-direction:column;gap:1rem;display:flex}.web-result-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color var(--dur) var(--ease-std), background var(--dur) var(--ease-std);background:linear-gradient(#ffffff09,#ffffff04)}.web-result-card:hover{border-color:var(--color-border-hover)}.web-result-header{gap:1rem;margin-bottom:1rem;display:flex}.web-result-artwork{border-radius:var(--radius);object-fit:cover;flex-shrink:0;width:72px;height:72px}.web-result-info{flex:1;min-width:0}.web-result-title{margin-bottom:.125rem;font-size:1.0625rem;font-weight:600}.web-result-artist{color:var(--color-text);margin-bottom:.125rem;font-size:.9375rem}.web-result-album{color:var(--color-text-secondary);margin-bottom:.5rem;font-size:.8125rem}.web-result-badges{flex-wrap:wrap;gap:.375rem;display:flex}.tag-source{background:var(--color-primary-light);color:var(--color-primary);font-weight:500}.web-result-preview{background:var(--color-bg);border-radius:var(--radius);border:1px solid var(--color-border);margin-bottom:1rem;padding:.875rem}.web-result-lyrics{color:var(--color-text);white-space:pre-wrap;word-wrap:break-word;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.875rem;line-height:1.6}.web-result-expand{color:var(--color-primary);cursor:pointer;background:0 0;border:none;margin-top:.5rem;padding:0;font-size:.8125rem;font-weight:500;display:block}.web-result-expand:hover{text-decoration:underline}.web-result-actions{justify-content:space-between;align-items:center;gap:1rem;display:flex}.import-btn{background:linear-gradient(180deg, var(--color-primary-hover), var(--color-primary));color:#fff;border-radius:var(--radius);font-size:var(--text-sm);cursor:pointer;box-shadow:var(--shadow-inset-hi), 0 1px 4px #8b45ff40;transition:transform 80ms var(--ease-std), box-shadow var(--dur) var(--ease-std), background var(--dur) var(--ease-std);border:none;padding:.5rem 1rem;font-family:inherit;font-weight:600}.import-btn:hover:not(:disabled){background:linear-gradient(180deg, #a56dff, var(--color-primary-hover));box-shadow:var(--shadow-inset-hi), 0 2px 8px #8b45ff59}.import-btn:active:not(:disabled){transform:scale(.97)}.import-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.web-result-link{color:var(--color-text-secondary);font-size:.8125rem;transition:color .15s}.web-result-link:hover{color:var(--color-primary)}.web-result-open-btn{background:linear-gradient(180deg, var(--color-primary-hover), var(--color-primary));color:#fff;border-radius:var(--radius);font-size:var(--text-base);cursor:pointer;box-shadow:var(--shadow-inset-hi), 0 2px 8px #8b45ff4d;transition:transform 80ms var(--ease-std), box-shadow var(--dur) var(--ease-std), background var(--dur) var(--ease-std);border:none;flex:1;padding:.75rem 1.25rem;font-family:inherit;font-weight:600}.web-result-open-btn:hover:not(:disabled){background:linear-gradient(180deg, #a56dff, var(--color-primary-hover));box-shadow:var(--shadow-inset-hi), 0 4px 16px #8b45ff66}.web-result-open-btn:active:not(:disabled){transform:scale(.98)}.web-result-open-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.web-result-source-link{color:var(--color-text-secondary);white-space:nowrap;font-size:.8125rem;text-decoration:underline}.web-result-source-link:hover{color:var(--color-primary)}.favorites-page h1{margin-bottom:1.5rem;font-size:2rem;font-weight:800}.loading{text-align:center;color:var(--color-text-secondary);padding:3rem 0}.error-message{text-align:center;color:#f87171;padding:2rem 0}.empty-state{text-align:center;color:var(--color-text-secondary);padding:3rem 0;font-size:1.0625rem}@media (width<=640px){.hero h1{font-size:1.75rem}.hero-subtitle{font-size:1rem}.song-list{grid-template-columns:1fr}.song-header h1{font-size:1.5rem}}html,body{overscroll-behavior-y:contain}body{padding-left:var(--safe-left);padding-right:var(--safe-right)}.layout{padding-bottom:var(--safe-bottom)}.header{padding-top:var(--safe-top)}.header-inner{height:56px;max-width:var(--max-width);padding:0 1rem}.main{max-width:var(--max-width);padding:1rem}@media (width>=720px){.main{padding:2rem 1.5rem}}.search-bar{align-items:stretch;gap:.5rem;width:100%;max-width:640px;margin:0 auto;display:flex}.search-bar-input-wrap{flex:1;align-items:center;display:flex;position:relative}.search-bar-icon{color:var(--color-text-secondary);pointer-events:none;position:absolute;left:14px}.search-bar .search-input{width:100%;font-size:var(--text-md);border:1px solid var(--color-border-hover);border-radius:var(--radius-pill);color:var(--color-text);transition:border-color var(--dur) var(--ease-std), box-shadow var(--dur) var(--ease-std), background var(--dur) var(--ease-std);-webkit-appearance:none;letter-spacing:-.005em;background:#ffffff0a;outline:none;padding:.875rem 2.5rem .875rem 2.75rem;font-family:inherit}.search-bar .search-input::placeholder{color:var(--color-text-muted)}.search-bar .search-input::-webkit-search-cancel-button{display:none}.search-bar .search-input:focus{border-color:var(--color-primary-ring);box-shadow:0 0 0 4px var(--color-primary-light), 0 8px 24px #8b45ff26;background:#ffffff0f}.search-bar-clear{width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;background:#ffffff14;border:0;border-radius:999px;justify-content:center;align-items:center;font-size:20px;line-height:1;display:flex;position:absolute;top:50%;right:6px;transform:translateY(-50%)}.search-bar-submit{background:linear-gradient(180deg, var(--color-primary-hover), var(--color-primary));color:#fff;border-radius:var(--radius-pill);font-size:var(--text-base);cursor:pointer;white-space:nowrap;letter-spacing:-.005em;min-height:44px;box-shadow:var(--shadow-inset-hi), 0 2px 8px #8b45ff4d;transition:transform 80ms var(--ease-std), box-shadow var(--dur) var(--ease-std), background var(--dur) var(--ease-std);border:0;padding:0 1.25rem;font-family:inherit;font-weight:600}.search-bar-submit:hover{background:linear-gradient(180deg, #a56dff, var(--color-primary-hover));box-shadow:var(--shadow-inset-hi), 0 4px 16px #8b45ff66}.search-bar-submit:active{transform:scale(.97)}.search-bar-large .search-bar-input-wrap .search-input{padding:1rem 2.5rem 1rem 2.75rem;font-size:1.0625rem}.search-page{flex-direction:column;gap:1rem;display:flex}.search-page-header{z-index:10;background:var(--color-bg);flex-direction:column;gap:.5rem;padding-top:.25rem;padding-bottom:.5rem;display:flex;position:sticky;top:0}.search-hint{color:var(--color-text-secondary);text-align:center;padding:2rem 1rem}.search-history-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.search-history-title{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.8125rem;font-weight:600}.search-history-clear{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;padding:.25rem .5rem;font-size:.8125rem}.search-history-clear:hover{color:var(--color-text)}.search-history-list{flex-direction:column;display:flex}.search-history-item{border-bottom:1px solid var(--color-border);align-items:center;display:flex}.search-history-item:last-child{border-bottom:none}.search-history-query{text-align:left;color:var(--color-text);cursor:pointer;background:0 0;border:none;flex:1;padding:.625rem 0;font-size:.9375rem}.search-history-remove{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;padding:.5rem;font-size:1.125rem;line-height:1}.search-history-remove:hover{color:var(--color-text)}.result-count{color:var(--color-text-secondary);padding:0 .25rem;font-size:.8125rem}.result-count-loading{color:var(--color-primary)}.result-list{flex-direction:column;gap:.5rem;display:flex}.load-more-btn{width:100%;color:var(--color-primary,#2563eb);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;background:0 0;margin-top:1rem;padding:.75rem;font-size:.9375rem;font-weight:500;transition:background .15s;display:block}.load-more-btn:hover{background:var(--color-surface)}.result-row{align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;text-align:left;width:100%;color:inherit;transition:transform var(--dur-fast) var(--ease-std), box-shadow var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std), background var(--dur) var(--ease-std);background:linear-gradient(#ffffff0a,#ffffff05);min-height:72px;font-family:inherit;display:flex;position:relative}.result-row:hover:not(:disabled){border-color:var(--color-border-hover);box-shadow:var(--shadow-md);background:linear-gradient(#ffffff0f,#ffffff08);transform:translateY(-1px)}.result-row:active:not(:disabled){transition-duration:80ms;transform:translateY(0)scale(.995)}.result-row.is-busy{opacity:.7;cursor:wait}.result-row-art{border-radius:var(--radius);background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);width:52px;height:52px;box-shadow:var(--shadow-inset-hi), 0 1px 3px #0006;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.result-row-art:after{content:"";pointer-events:none;background:radial-gradient(circle at 30% 20%,#ffffff2e,#0000 60%);position:absolute;inset:0}.result-row-art img{object-fit:cover;z-index:1;width:100%;height:100%;display:block;position:relative}.result-row-art-placeholder{color:#ffffffd9;letter-spacing:-.02em;z-index:1;text-shadow:0 1px 2px #0000004d;font-size:22px;font-weight:600;position:relative}.result-row-body{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.result-row-title{font-weight:600;font-size:var(--text-base);color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em;overflow:hidden}.result-row-artist{font-size:var(--text-sm);color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.result-row-badges{gap:var(--space-1);flex-wrap:wrap;margin-top:6px;display:flex}.result-row-badge{font-size:var(--text-2xs);border-radius:var(--radius-pill);background:var(--color-primary-light);color:var(--color-chord);letter-spacing:.01em;padding:2px 8px;font-weight:600;line-height:1.4;display:inline-block}.result-row-badge-sheet{background:var(--color-accent-light);color:var(--color-accent-soft)}.result-row-badge-lyrics{color:#15803d;background:#dcfce7}.result-row-badge-saved{color:var(--color-text-secondary);background:#ffffff0f}.result-row-chevron{color:var(--color-text-muted);padding-right:var(--space-1);transition:transform var(--dur) var(--ease-std), color var(--dur) var(--ease-std);flex-shrink:0;font-size:22px;line-height:1}.result-row:hover:not(:disabled) .result-row-chevron{color:var(--color-text);transform:translate(2px)}.search-status{color:var(--color-text-secondary);text-align:center;flex-direction:column;align-items:center;gap:1rem;padding:3rem 1rem;display:flex}.spinner{border:2.5px solid var(--color-primary-light);border-top-color:var(--color-primary);border-right-color:var(--color-primary);width:36px;height:36px;filter:drop-shadow(0 0 12px var(--color-primary-glow));border-radius:50%;animation:.9s cubic-bezier(.5,.1,.5,.9) infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.logo{letter-spacing:-.02em;font-size:1.125rem}.nav-link{align-items:center;min-height:36px;padding:.5rem .875rem;display:inline-flex}@media (width<=720px){.piano-sheet-pdf-frame{min-height:72vh}.song-page .tab-selector{-webkit-overflow-scrolling:touch;flex-wrap:nowrap;overflow-x:auto}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}.result-row,.search-bar-submit{transition:none}}.bottom-tab-bar{z-index:var(--z-sticky);padding:var(--space-2) 0 calc(var(--space-3) + var(--safe-bottom));-webkit-backdrop-filter:blur(24px)saturate(140%);border-top:1px solid var(--color-border);transition:transform var(--dur-slow) var(--ease-out);background:#0d0d14c7;justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-tab-bar-hidden{transform:translateY(100%)}.bottom-tab{min-width:52px;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:var(--color-text-muted);letter-spacing:.01em;-webkit-tap-highlight-color:transparent;transition:color var(--dur) var(--ease-std);flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:500;text-decoration:none;display:flex}.bottom-tab:hover{color:var(--color-text-secondary)}.bottom-tab-active{color:var(--color-primary)}.bottom-tab-active svg{filter:drop-shadow(0 0 8px var(--color-primary-glow))}@media (width>=821px){.bottom-tab-bar{display:none}.desktop-only{display:flex}}@media (width<=820px){.layout{padding-bottom:calc(64px + var(--safe-bottom))}.desktop-only{display:none}}.header-actions{align-items:center;gap:.5rem;display:flex}.settings-btn{width:36px;height:36px;color:var(--color-text-secondary);cursor:pointer;background:#ffffff0f;border:none;border-radius:9px;justify-content:center;align-items:center;transition:background .15s;display:flex}.settings-btn:hover{background:#ffffff1a}.settings-backdrop{z-index:200;background:#00000080;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.settings-sheet{background:var(--color-surface-2);border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-top:1px solid var(--color-border-hover);width:100%;max-width:480px;padding:12px 20px calc(20px + var(--safe-bottom));box-shadow:var(--shadow-xl);animation:slide-up .32s var(--ease-out)}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.settings-handle{background:#ffffff1f;border-radius:2px;width:36px;height:4px;margin:0 auto 16px}.settings-title{color:var(--color-text);font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:-.015em;margin-bottom:var(--space-5)}.settings-group{margin-bottom:var(--space-5)}.settings-label{color:var(--color-text-muted);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-2);font-weight:600}.settings-toggle-row{gap:.375rem;display:flex}.settings-opt{text-align:center;border-radius:var(--radius-sm);font-size:var(--text-sm);cursor:pointer;transition:background var(--dur) var(--ease-std), color var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std);flex:1;padding:.5rem;font-family:inherit;font-weight:500}.settings-opt-active{background:var(--color-primary-light);border:1px solid var(--color-primary-ring);color:var(--color-chord);box-shadow:var(--shadow-inset-hi)}.settings-opt-inactive{background:var(--color-tag-bg);border:1px solid var(--color-border);color:var(--color-text-secondary)}.settings-opt-inactive:hover{color:var(--color-text);background:#ffffff14}.settings-slider-row{align-items:center;gap:10px;display:flex}.settings-slider-row input[type=range]{accent-color:var(--color-primary);flex:1}.settings-slider-label{color:var(--color-text-muted)}.settings-slider-label-sm{font-size:.625rem}.settings-slider-label-lg{font-size:1.375rem}.settings-row{justify-content:space-between;align-items:center;padding:.25rem 0;display:flex}.settings-row-text{color:var(--color-text);font-size:.8125rem}.settings-row-sub{color:var(--color-text-secondary);font-size:.6875rem}.settings-toggle{cursor:pointer;border:none;border-radius:11px;flex-shrink:0;width:40px;height:22px;transition:background .2s;position:relative}.settings-toggle-on{background:var(--color-primary)}.settings-toggle-off{background:#ffffff14}.settings-toggle:after{content:"";border-radius:50%;width:18px;height:18px;transition:left .2s,background .2s;position:absolute;top:2px}.settings-toggle-on:after{background:#fff;left:20px}.settings-toggle-off:after{background:#ffffff4d;left:2px}.settings-scroll-speed{opacity:0;max-height:0;margin-top:0;transition:max-height .3s,opacity .3s,margin .3s;overflow:hidden}.settings-scroll-speed-visible{opacity:1;max-height:60px;margin-top:.75rem}.song-row-list{flex-direction:column;display:flex}.song-row{border-bottom:1px solid var(--color-border);transition:background var(--dur) var(--ease-std);position:relative}.song-row:last-child{border-bottom:none}.song-row:hover{background:#ffffff05}.song-row-link{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-10) var(--space-3) var(--space-2);color:inherit;text-decoration:none;display:flex}.song-row-art{border-radius:var(--radius);background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);color:#ffffffe6;width:44px;height:44px;box-shadow:var(--shadow-inset-hi), 0 1px 2px #00000059;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;display:flex;position:relative}.song-row-art:after{content:"";border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 30% 20%,#fff3,#0000 60%);position:absolute;inset:0}.song-row-info{flex:1;min-width:0}.song-row-title{font-size:var(--text-base);color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em;font-weight:500;overflow:hidden}.song-row-artist{font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:2px}.song-row-badges{gap:4px;margin-top:4px;display:flex}.badge-sm{text-transform:uppercase;letter-spacing:.3px;border-radius:6px;padding:2px 7px;font-size:.5625rem;font-weight:600}.badge-chords{background:var(--color-primary-light);color:var(--color-chord)}.badge-sheets{color:#7dd3fc;background:#47bfff1f}.song-row-chevron{color:var(--color-text-muted);flex-shrink:0;font-size:20px}.song-row .favorite-btn{font-size:1.125rem;position:absolute;top:50%;right:0;transform:translateY(-50%)}.song-row.has-propose .song-row-link{padding-right:5rem}.song-row-propose{background:var(--color-primary-light);border-radius:var(--radius);width:30px;height:30px;color:var(--color-primary);cursor:pointer;border:1px solid #863bff33;justify-content:center;align-items:center;font-family:inherit;font-size:1rem;font-weight:700;transition:background .15s,border-color .15s;display:flex;position:absolute;top:50%;right:2.25rem;transform:translateY(-50%)}.song-row-propose:hover:not(:disabled){background:#863bff38;border-color:#863bff59}.song-row-propose:disabled{cursor:default}.song-row-propose.is-proposed{color:#4ade80;background:#22c55e1f;border-color:#22c55e40}.song-row-propose.is-error{color:#f87171;background:#ef44441f;border-color:#ef444440;font-size:.625rem;font-weight:500}.song-row-propose.is-create,.result-row-propose.is-create{border-style:dashed;border-color:#863bff66}.add-to-room-btn.is-create{color:var(--color-primary)}.add-to-room-btn.is-done{color:#4ade80}.add-to-room-check{font-size:1.125rem;font-weight:700;line-height:1}.transpose-toolbar{align-items:center;gap:4px;display:flex}.transpose-btn{background:var(--color-tag-bg);color:var(--color-text-secondary);border:1px solid var(--color-border);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-xs);cursor:pointer;text-align:center;min-width:32px;min-height:28px;transition:background var(--dur) var(--ease-std), color var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std);font-family:inherit;font-weight:500}.transpose-btn:hover{color:var(--color-text);border-color:var(--color-border-hover);background:#ffffff14}.transpose-btn-current{background:var(--color-primary-light);color:var(--color-chord);border-color:var(--color-primary-ring);box-shadow:var(--shadow-inset-hi);font-weight:600}.chord-blocks{border-bottom:1px solid var(--color-border);flex-direction:column;gap:.5rem;padding:.75rem 1rem;display:flex}.chord-block{flex-wrap:wrap;align-items:baseline;gap:.75rem;display:flex}.chord-block-item{color:var(--color-primary);letter-spacing:.02em;font-size:1.75rem;font-weight:700}.chord-sheet-content{touch-action:pinch-zoom pan-y;padding:0}.cp-line-active{background:#863bff0f;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}.chordpro-inline{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.8}.cp-line-inline{margin-bottom:.25rem;line-height:1.8}.cp-chord-badge{color:var(--color-chord);border-radius:var(--radius-xs);font-size:.875em;font-weight:700;font-family:var(--font-mono);vertical-align:baseline;letter-spacing:-.02em;box-shadow:var(--shadow-inset-hi), 0 1px 2px #00000059;background:linear-gradient(#8b45ff3d,#8b45ff24);margin:0 1px;padding:.125rem .4375rem;display:inline-block}.cp-chord-only{margin-bottom:.25rem}.cp-chord-standalone{background:0 0;margin-right:.75em;padding:0}.autoscroll-control{bottom:calc(1.25rem + var(--safe-bottom));-webkit-backdrop-filter:blur(20px)saturate(140%);border:1px solid var(--color-border-hover);border-radius:var(--radius-pill);padding:var(--space-1);box-shadow:var(--shadow-lg), var(--shadow-inset-hi);z-index:var(--z-sticky);background:#181826d9;align-items:center;gap:2px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.autoscroll-control-btn{width:2rem;height:2rem;color:var(--color-text-secondary);cursor:pointer;background:#ffffff0f;border:none;border-radius:50%;justify-content:center;align-items:center;font-family:inherit;font-size:1rem;display:flex}.autoscroll-control-btn:hover:not(:disabled){background:#ffffff1f}.autoscroll-control-btn:disabled{opacity:.3;cursor:default}.autoscroll-control-speed{text-align:center;min-width:1.5rem;color:var(--color-primary);font-variant-numeric:tabular-nums;font-size:.8125rem;font-weight:600}.autoscroll-control-play{width:2rem;height:2rem;color:var(--color-primary);cursor:pointer;background:#78b4ff2e;border:none;border-radius:50%;justify-content:center;align-items:center;margin-left:4px;display:flex}.autoscroll-control-play:hover{background:#78b4ff47}.autoscroll-control-stop{color:#ff6b6b;cursor:pointer;background:#ff505026;border:none;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;margin-left:2px;font-size:.625rem;display:flex}.autoscroll-control-stop:hover{background:#ff505040}.section-label,.room-page-section-title,.search-history-title{color:var(--color-text-muted);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-3);font-weight:600}.room-pill{background:var(--color-primary-light);color:var(--color-chord);border:1px solid var(--color-border-hover);border-radius:999px;align-items:center;gap:.5rem;max-width:max-content;margin:.5rem auto;padding:.375rem .875rem;font-size:.8125rem;text-decoration:none;transition:background .15s,border-color .15s;display:inline-flex}.room-pill:hover{background:#863bff38;border-color:#863bff59}.room-pill-dot{background:currentColor;border-radius:50%;width:.5rem;height:.5rem;box-shadow:0 0 6px}.room-pill-sep{color:var(--color-text-muted)}.room-pill-count{color:var(--color-text-secondary)}.room-pill-leave{border:1px solid var(--color-border-hover);color:var(--color-text-secondary);cursor:pointer;background:0 0;border-radius:999px;margin-left:.5rem;padding:.125rem .5rem;font-size:.75rem;transition:background .15s,color .15s}.room-pill-leave:hover{background:var(--color-surface-hover);color:var(--color-text)}.room-pill-wrap{justify-content:center;padding:0 1rem;display:flex}.nickname-input{border:1px solid var(--color-border-hover);width:100%;color:var(--color-text);box-sizing:border-box;background:#ffffff0a;border-radius:10px;margin:.75rem 0;padding:.625rem .75rem;font-size:1rem;transition:border-color .15s,background .15s}.nickname-input:focus{border-color:var(--color-primary);background:#ffffff0f;outline:none}.nickname-input::placeholder{color:var(--color-text-muted)}.nickname-actions{gap:.5rem;display:flex}.nickname-reroll{color:var(--color-text);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff14;border-radius:10px;flex:none;padding:.5rem .875rem;font-size:.9375rem;transition:background .15s}.nickname-reroll:hover{background:#ffffff1a}.nickname-actions .share-modal-copy{flex:auto}.room-page{padding:var(--space-4);max-width:var(--max-width);color:var(--color-text);margin:0 auto}.room-page-header{justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6);display:flex}.room-page-title{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.02em;color:var(--color-text);margin:0;font-weight:700}.room-page-title:before{content:"";background:var(--color-success-strong);width:8px;height:8px;box-shadow:0 0 8px var(--color-success-strong);margin-right:var(--space-2);vertical-align:middle;border-radius:50%;animation:2.4s ease-in-out infinite pulse-dot;display:inline-block}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.room-page-sub{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--space-1);margin-left:calc(8px + var(--space-2))}.room-page-actions{gap:.5rem;display:flex}.room-page-qr{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:1rem;display:flex}.room-page-qr img{border-radius:10px}.room-page-qr-url{color:var(--color-text-secondary);font-size:.8125rem;font-family:var(--font-mono)}.room-page-section{margin-bottom:2rem}.room-page-section-title{text-transform:uppercase;letter-spacing:1px;color:var(--color-text-secondary);margin-bottom:.5rem;font-size:.6875rem}.room-members{flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.room-member{background:var(--color-tag-bg);color:var(--color-text-secondary);border-radius:999px;align-items:center;gap:.25rem;padding:.25rem .625rem;font-size:.8125rem;display:inline-flex}.room-member-role{color:var(--color-favorite)}.room-songs{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.room-song{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);align-items:center;gap:.5rem;padding:.625rem .875rem;transition:background .15s,border-color .15s;display:flex}.room-song:hover{background:var(--color-surface-hover);border-color:var(--color-border-hover)}.room-song-link{color:inherit;flex:1;text-decoration:none}.room-song-title{color:var(--color-text);font-weight:500}.room-song-artist{color:var(--color-text-secondary);font-size:.875rem}.room-song-by{color:var(--color-text-muted);margin-top:.125rem;font-size:.75rem}.room-song-remove{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;padding:.25rem .5rem;font-size:1.25rem;transition:color .15s}.room-song-remove:hover{color:var(--color-text)}.room-page-joining{background:var(--color-surface-hover);border:1px solid var(--color-border-hover);color:var(--color-text);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1rem 2rem;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.share-modal-secondary{border:1px solid var(--color-border-hover);background:0 0;margin-top:.5rem}.share-room-create{border-top:1px solid var(--color-border);margin-top:.75rem;padding-top:.75rem}.share-room-toggle{color:var(--color-text-secondary);cursor:pointer;align-items:center;gap:.5rem;font-size:.9375rem;display:flex}.share-room-toggle input[type=checkbox]{accent-color:var(--color-primary)}.share-room-fields{align-items:center;gap:.5rem;margin-top:.5rem;display:flex}.share-room-fields .nickname-input{flex:1;margin:0}.share-room-fields .nickname-reroll{flex:none}.share-room-fields .share-modal-copy{flex:none;width:auto;padding-left:.875rem;padding-right:.875rem}.share-modal-status{text-align:center;color:var(--color-text-secondary);margin-top:.5rem;font-size:.8125rem}.cp-line-text{white-space:pre-wrap;font-family:inherit;line-height:1.55}.logo-group{align-items:center;display:flex;position:relative}.logo-btn{cursor:pointer;border-radius:var(--radius-sm);color:inherit;-webkit-tap-highlight-color:transparent;transition:background var(--dur) var(--ease-std);background:0 0;border:none;align-items:center;gap:2px;padding:.25rem .375rem .25rem .25rem;display:flex}.logo-btn:hover{background:#ffffff0a}.logo-btn:hover .logo-icon{transform:rotate(-6deg)scale(1.08)}.logo-icon{transition:transform var(--dur-slow) var(--ease-spring);filter:drop-shadow(0 0 8px var(--color-primary-glow));display:block}.logo-mode-label{color:var(--color-text-secondary);letter-spacing:.04em;vertical-align:super;text-transform:lowercase;margin-left:2px;font-size:.625rem;font-weight:600;line-height:1}.logo-dropdown-backdrop{z-index:199;position:fixed;inset:0}.logo-dropdown{z-index:200;background:var(--color-surface-hover);border:1px solid var(--color-border-hover);border-radius:var(--radius);min-width:120px;box-shadow:var(--shadow-lg);padding:4px;animation:.15s share-fade-in;position:absolute;top:calc(100% + 4px);left:0}.logo-dropdown-item{text-align:left;width:100%;color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:.5rem .75rem;font-family:inherit;font-size:.875rem;transition:background .12s,color .12s;display:block}.logo-dropdown-item:hover{color:var(--color-text);background:#ffffff0f}.logo-dropdown-item.is-active{color:var(--color-primary);background:var(--color-primary-light);font-weight:600}.header-room-pill{align-items:center;gap:var(--space-2);background:var(--color-primary-light);color:var(--color-chord);border-radius:var(--radius-pill);font-size:var(--text-xs);cursor:pointer;transition:background var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std), transform var(--dur) var(--ease-std);box-shadow:var(--shadow-inset-hi);border:1px solid #8b45ff33;padding:.3125rem .6875rem;font-family:inherit;font-weight:600;display:inline-flex}.header-room-pill:hover{background:#8b45ff38;border-color:#8b45ff66;transform:translateY(-1px)}.header-room-dot{background:var(--color-success-strong);width:7px;height:7px;box-shadow:0 0 6px var(--color-success-strong);border-radius:50%;animation:2.4s ease-in-out infinite pulse-dot}.header-room-code{font-family:var(--font-mono);letter-spacing:.05em}.header-room-badge{color:#fff;background:#ef4444;border-radius:999px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 4px;font-size:.625rem;font-weight:700;line-height:1;display:inline-flex}.bottom-tab-room-icon{display:inline-flex;position:relative}.bottom-tab-room-dot{background:var(--color-primary);border:1.5px solid #111118f2;border-radius:50%;width:7px;height:7px;position:absolute;top:-2px;right:-4px}.result-row-wrap{flex-wrap:wrap;align-items:stretch;gap:6px;display:flex}.result-row-badge-versions{color:var(--color-primary);background:#863bff2e;border-color:#863bff4d}.result-row-versions-toggle{border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;background:0 0;flex:none;padding:0 12px;font-family:inherit;font-size:.75rem;font-weight:500;transition:background .15s,color .15s,border-color .15s}.result-row-versions-toggle:hover{color:var(--color-text-primary);background:#ffffff0a}.result-row-versions-toggle.is-open{background:var(--color-primary-light);color:var(--color-primary);border-color:#863bff59}.result-row-versions{flex-direction:column;flex-basis:100%;gap:4px;margin:0;padding:0;list-style:none;display:flex}.result-row-version{align-items:stretch;gap:4px;display:flex}.result-row-version-btn{border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text-primary);text-align:left;cursor:pointer;background:#ffffff08;flex:1;align-items:center;gap:10px;padding:10px 14px;font-family:inherit;font-size:.875rem;transition:background .15s,border-color .15s;display:flex}.result-row-version-btn:hover:not(:disabled){background:#863bff14;border-color:#863bff4d}.result-row-version-btn:disabled{cursor:default;opacity:.6}.result-row-version-source{font-weight:500}.result-row-version-quality{color:var(--color-text-secondary);background:#ffffff0d;border-radius:999px;padding:2px 8px;font-size:.75rem}.result-row-version-best{color:#facc15;margin-left:auto;font-size:.875rem}.result-row-version-link{border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text-secondary);flex:0 0 36px;justify-content:center;align-items:center;font-size:.875rem;text-decoration:none;transition:background .15s,color .15s;display:flex}.result-row-version-link:hover{color:var(--color-text-primary);background:#ffffff0a}.result-row-wrap .result-row{flex:1;min-width:0}.result-row-propose{background:var(--color-primary-light);border-radius:var(--radius);color:var(--color-primary);cursor:pointer;border:1px solid #863bff33;flex:0 0 36px;justify-content:center;align-items:center;font-family:inherit;font-size:1.125rem;font-weight:700;transition:background .15s,border-color .15s;display:flex}.result-row-favorite{border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text-secondary);cursor:pointer;background:#ffffff0a;flex:0 0 36px;justify-content:center;align-items:center;font-family:inherit;font-size:1.125rem;line-height:1;transition:background .15s,border-color .15s,color .15s;display:flex}.result-row-favorite:hover:not(:disabled){border-color:var(--color-border-hover);color:var(--color-text);background:#ffffff14}.result-row-favorite:disabled{cursor:default}.result-row-favorite.is-active{color:var(--color-favorite);background:#ffc83c1a;border-color:#ffc83c59}.result-row-propose:hover:not(:disabled){background:#863bff38;border-color:#863bff59}.result-row-propose:disabled{cursor:default}.result-row-propose.is-proposed{color:#4ade80;background:#22c55e1f;border-color:#22c55e40}.result-row-propose.is-error{color:#f87171;background:#ef44441f;border-color:#ef444440;font-size:.625rem;font-weight:500}.version-rating-buttons{align-items:stretch;gap:var(--space-1);flex:none;display:inline-flex}.version-rating-btn{justify-content:center;align-items:center;gap:var(--space-1);min-width:44px;min-height:32px;padding:0 var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text-secondary);cursor:pointer;background:#ffffff0a;font-family:inherit;font-size:.8125rem;font-weight:500;line-height:1;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.version-rating-btn:hover:not(:disabled){border-color:var(--color-border-hover);color:var(--color-text);background:#ffffff14}.version-rating-btn:disabled{cursor:default;opacity:.6}.version-rating-good.is-active{color:var(--color-success);background:var(--color-success-light);border-color:#22c55e59}.version-rating-bad.is-active{color:var(--color-danger);background:var(--color-danger-light);border-color:#ef444459}.version-rating-icon{font-weight:700}.version-rating-count{font-variant-numeric:tabular-nums}.rooms-page{flex-direction:column;align-items:center;padding-top:2rem;display:flex}.rooms-list{width:100%;max-width:360px;padding:0 var(--space-4) var(--space-4)}.rooms-list-title{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.02em;margin:0 0 var(--space-3);text-align:center;font-weight:700}.rooms-list-items{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.rooms-list-btn{background:var(--color-bg-elevated,#ffffff0a);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;text-align:left;width:100%;color:var(--color-text);transition:background var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std);justify-content:space-between;align-items:baseline;gap:.75rem;padding:.75rem 1rem;font-family:inherit;display:flex}.rooms-list-btn:hover{background:var(--color-primary-light);border-color:#863bff4d}.rooms-list-code{font-family:var(--font-mono,ui-monospace, SFMono-Regular, monospace);font-weight:700;font-size:var(--text-md);letter-spacing:.05em;color:var(--color-primary)}.rooms-list-meta{color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;overflow:hidden}.rooms-empty{text-align:center;max-width:360px;padding:var(--space-8) var(--space-4);flex-direction:column;align-items:center;display:flex}.rooms-empty-icon{color:var(--color-primary);margin-bottom:var(--space-5);opacity:.7;filter:drop-shadow(0 0 16px var(--color-primary-glow))}.rooms-empty-title{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.02em;margin-bottom:var(--space-2);font-weight:700}.rooms-empty-text{color:var(--color-text-secondary);font-size:var(--text-base);margin-bottom:var(--space-6);line-height:1.5}.rooms-create-fields{gap:.5rem;width:100%;margin-bottom:1rem;display:flex}.rooms-create-fields .nickname-input{flex:1;margin:0}.rooms-create-btn{background:linear-gradient(180deg, var(--color-primary-hover), var(--color-primary));color:#fff;border-radius:var(--radius);width:100%;font-size:var(--text-md);cursor:pointer;letter-spacing:-.005em;box-shadow:var(--shadow-inset-hi), 0 2px 8px #8b45ff4d;transition:transform 80ms var(--ease-std), box-shadow var(--dur) var(--ease-std), background var(--dur) var(--ease-std);border:none;padding:.75rem;font-family:inherit;font-weight:600}.rooms-create-btn:hover:not(:disabled){background:linear-gradient(180deg, #a56dff, var(--color-primary-hover));box-shadow:var(--shadow-inset-hi), 0 4px 16px #8b45ff66}.rooms-create-btn:active:not(:disabled){transform:scale(.98)}.rooms-create-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.rooms-create-error{color:#f87171;margin-top:.5rem;font-size:.875rem}.login-page{min-height:100dvh;padding:var(--space-6);justify-content:center;align-items:center;display:flex;position:relative}.login-page:before{content:"";background:radial-gradient(ellipse at center, var(--color-primary-glow), transparent 65%);pointer-events:none;z-index:0;width:520px;height:320px;position:absolute;top:30%;left:50%;transform:translate(-50%)}.login-card{text-align:center;gap:var(--space-3);z-index:1;width:100%;max-width:360px;padding:var(--space-8) var(--space-6);background:var(--color-surface-2);border:1px solid var(--color-border-hover);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl), var(--shadow-inset-hi);flex-direction:column;display:flex;position:relative}.login-card h1{font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:-.035em;margin-bottom:var(--space-1);background:linear-gradient(#fff,#ffffffd1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:800}.login-sub{color:var(--color-text-secondary);font-size:var(--text-base);margin-bottom:var(--space-4)}.login-btn{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius);border:1px solid var(--color-border-hover);background:var(--color-tag-bg);color:var(--color-text);font-size:var(--text-md);cursor:pointer;transition:background var(--dur) var(--ease-std), transform 80ms var(--ease-std);padding:.75rem 1rem;font-family:inherit;font-weight:500;display:inline-flex}.login-btn:hover:not(:disabled){background:#ffffff14}.login-btn:active:not(:disabled){transform:scale(.98)}.login-btn:disabled{opacity:.45;cursor:not-allowed}.login-btn-google{color:#1f1f1f;background:#fff;border:1px solid #ffffffeb;box-shadow:0 1px 3px #0000004d}.login-btn-google:hover:not(:disabled){background:#f7f7f7;box-shadow:0 2px 8px #0006}.login-btn-apple{color:#fff;background:#000;border:1px solid #000;box-shadow:0 1px 3px #00000080}.login-btn-apple:hover:not(:disabled){background:#1a1a1a;box-shadow:0 2px 8px #0009}.login-foot{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2)}.login-glyph{width:56px;height:56px;margin:0 auto var(--space-2);border-radius:var(--radius);color:var(--color-text-secondary);background:#ffffff0f;place-items:center;display:grid}.login-soon{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);margin-left:auto}.login-form{gap:var(--space-2);margin-bottom:var(--space-2);flex-direction:column;display:flex}.login-input{border-radius:var(--radius);border:1px solid var(--color-border-hover);background:var(--color-surface);width:100%;color:var(--color-text);font-size:var(--text-base);transition:border-color var(--dur) var(--ease-std), background var(--dur) var(--ease-std);padding:.75rem 1rem;font-family:inherit}.login-input::placeholder{color:var(--color-text-muted)}.login-input:focus{border-color:var(--color-primary,#6366f1);background:#ffffff08;outline:none}.login-input:disabled{opacity:.55;cursor:not-allowed}.login-toggle{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none;cursor:pointer;padding:var(--space-1) 0;display:inline-flex}.login-toggle input[type=checkbox]{cursor:pointer;width:16px;height:16px}.login-toggle input[type=checkbox]:disabled{cursor:not-allowed}.login-error{border-radius:var(--radius-sm);background:var(--color-danger-light,#ef44441f);color:var(--color-danger,#ef4444);font-size:var(--text-sm);text-align:left;padding:.5rem .75rem}.login-btn-primary{background:var(--color-primary,#6366f1);color:#fff;border:1px solid var(--color-primary,#6366f1);font-weight:600}.login-btn-primary:hover:not(:disabled){background:var(--color-primary-hover,#4f46e5);border-color:var(--color-primary-hover,#4f46e5)}.login-divider{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);margin:var(--space-2) 0;display:flex}.login-divider:before,.login-divider:after{content:"";background:var(--color-border,#ffffff14);flex:1;height:1px}.account-page{max-width:640px;padding:var(--space-8) var(--space-4);margin:0 auto}.account-page h2{font-size:var(--text-xl);letter-spacing:-.015em;margin-bottom:var(--space-3);font-weight:700}.account-header{align-items:center;gap:var(--space-4);margin-bottom:var(--space-8);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex}.account-avatar{border:2px solid var(--color-border-hover);width:64px;height:64px;box-shadow:var(--shadow-sm), 0 0 0 4px var(--color-primary-light);border-radius:50%}.account-name{font-size:var(--text-xl);letter-spacing:-.015em;color:var(--color-text);font-weight:600}.account-email{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:2px}.account-section{margin-bottom:var(--space-8)}.account-identities{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:0;list-style:none;overflow:hidden}.account-identities li{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);font-size:var(--text-base);justify-content:space-between;align-items:center;display:flex}.account-identities li:last-child{border-bottom:none}.account-identities button{border:1px solid var(--color-border-hover);background:var(--color-tag-bg);color:var(--color-text-secondary);border-radius:var(--radius-sm);font-size:var(--text-sm);cursor:pointer;transition:background var(--dur) var(--ease-std), color var(--dur) var(--ease-std);padding:.375rem .75rem;font-family:inherit}.account-identities button:hover:not(:disabled){background:var(--color-danger-light);color:var(--color-danger);border-color:#ef44444d}.account-identities button:disabled{opacity:.45;cursor:not-allowed}.account-link-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.account-link-row button{border:1px solid var(--color-border-hover);background:var(--color-tag-bg);color:var(--color-text);border-radius:var(--radius);font-size:var(--text-sm);cursor:pointer;transition:background var(--dur) var(--ease-std);padding:.5rem .875rem;font-family:inherit}.account-link-row button:hover:not(:disabled){background:#ffffff14}.account-link-row button:disabled{opacity:.45;cursor:not-allowed}.account-logout{border:1px solid var(--color-border-hover);color:var(--color-text);border-radius:var(--radius);cursor:pointer;font-family:inherit;font-size:var(--text-base);transition:background var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std);background:0 0;padding:.625rem 1.25rem}.account-logout:hover{background:var(--color-danger-light);color:var(--color-danger);border-color:#ef44444d}.layout-user-chip{background:linear-gradient(135deg, var(--color-primary), var(--color-accent));color:#fff;width:32px;height:32px;font-weight:600;font-size:var(--text-sm);box-shadow:var(--shadow-inset-hi), 0 1px 3px #0000004d;transition:transform var(--dur) var(--ease-std), box-shadow var(--dur) var(--ease-std);border-radius:50%;justify-content:center;align-items:center;text-decoration:none;display:inline-flex;overflow:hidden}.layout-user-chip:hover{box-shadow:var(--shadow-inset-hi), var(--shadow-glow);transform:scale(1.05)}.layout-user-chip img{object-fit:cover;width:100%;height:100%}.layout-login-btn{border:1px solid var(--color-border-hover);background:var(--color-tag-bg);color:var(--color-text);border-radius:var(--radius-pill);font-size:var(--text-sm);cursor:pointer;white-space:nowrap;transition:background var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std);padding:.4375rem .875rem;font-family:inherit;font-weight:600}.layout-login-btn:hover{border-color:var(--color-border-strong);background:#ffffff14}.sheet-page-section{margin-top:var(--space-5);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.sheet-section-title{font-size:var(--text-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 var(--space-3);font-weight:600}.sheet-secondary-link{color:var(--color-text-secondary);cursor:pointer;font:inherit;text-align:left;background:0 0;border:none;padding:0;display:inline-block}.sheet-secondary-link:hover{color:var(--color-text)}.sheet-version-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.sheet-version-item{border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface-2);width:100%;color:var(--color-text);cursor:pointer;font:inherit;text-align:left;transition:border-color var(--dur) var(--ease-std), background var(--dur) var(--ease-std);flex-direction:column;align-items:flex-start;gap:.25rem;padding:.75rem 1rem;display:flex}.sheet-version-item:hover{border-color:var(--color-border-hover)}.sheet-version-item.is-active{border-color:var(--color-primary);background:var(--color-primary-light)}.sheet-version-label{font-weight:600}.sheet-version-source{font-size:var(--text-sm);color:var(--color-text-muted)}.sheet-actions-section{padding:var(--space-3) var(--space-4)}.sheet-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.sheet-download-btn{border-radius:var(--radius);background:var(--color-primary);color:#fff;transition:filter var(--dur) var(--ease-std), transform 80ms var(--ease-std);border:1px solid #0000;align-items:center;gap:.5rem;padding:.625rem 1.125rem;font-weight:600;text-decoration:none;display:inline-flex}.sheet-download-btn:hover{filter:brightness(1.08)}.sheet-download-btn:active{transform:scale(.98)}.sheet-source-btn{border-radius:var(--radius);border:1px solid var(--color-border-hover);background:var(--color-tag-bg);color:var(--color-text);align-items:center;padding:.625rem 1.125rem;font-weight:500;text-decoration:none;display:inline-flex}.sheet-source-btn:hover{background:#ffffff14}.rating{gap:var(--space-2);flex-direction:column;display:flex}.rating-stars{color:var(--color-primary);gap:.25rem;display:flex}.rating-star{cursor:pointer;color:inherit;opacity:.55;background:0 0;border:none;padding:.125rem;transition:opacity 80ms,transform 80ms}.rating-star:hover:not(:disabled){opacity:1;transform:scale(1.06)}.rating-star.is-filled{opacity:1}.rating-star:disabled{cursor:default}.rating-meta{font-size:var(--text-sm);color:var(--color-text-secondary);align-items:center;gap:.5rem;display:flex}.rating-count{color:var(--color-text-muted)}.rating-clear{color:var(--color-text-muted);cursor:pointer;font:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.rating-clear:hover{color:var(--color-text)}.rating-hint{font-size:var(--text-sm);color:var(--color-text-muted)}.sheet-preview-section{padding:0;overflow:hidden}.sheet-preview-section .sheet-section-title{padding:var(--space-3) var(--space-4) 0}.sheet-preview-toggle{width:100%;padding:var(--space-4);border:none;border-top:1px dashed var(--color-border);color:var(--color-text-secondary);font:inherit;cursor:pointer;background:0 0;display:block}.sheet-preview-toggle:hover{background:var(--color-surface-2);color:var(--color-text)}.empty-state,.loading{text-align:center;color:var(--color-text-secondary);padding:var(--space-12) var(--space-4);font-size:var(--text-base);font-weight:400;line-height:1.6}.error-message{text-align:center;color:var(--color-danger);padding:var(--space-8) var(--space-4);font-size:var(--text-base);background:var(--color-danger-light);border-radius:var(--radius-lg);margin:var(--space-4) 0;border:1px solid #ef44442e}.rooms-create-error{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--color-danger-light);color:var(--color-danger);border-radius:var(--radius-sm);font-size:var(--text-sm);border:1px solid #ef44442e}.chord-block-item{font-family:var(--font-mono);font-size:var(--text-xl);color:var(--color-chord);letter-spacing:-.015em;border-radius:var(--radius-sm);box-shadow:var(--shadow-inset-hi), 0 1px 2px #0000004d;background:linear-gradient(#8b45ff33,#8b45ff1a);padding:.125rem .625rem;font-weight:700}.chord-blocks{padding:var(--space-3) var(--space-4)}.chord-block{gap:var(--space-2) var(--space-3)}.nav-link{border-radius:var(--radius);font-size:var(--text-sm);color:var(--color-text-muted);transition:color var(--dur) var(--ease-std), background var(--dur) var(--ease-std);padding:.5rem .875rem;font-weight:500}.nav-link:hover{color:var(--color-text);background:#ffffff0d}.nav-link.active{color:var(--color-chord);background:var(--color-primary-light)}.settings-btn{border:1px solid var(--color-border);border-radius:var(--radius);transition:background var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std), transform var(--dur) var(--ease-std)}.settings-btn:hover{border-color:var(--color-border-hover);color:var(--color-text);background:#ffffff14}.settings-btn:active{transform:scale(.95)}.room-page-qr{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);gap:var(--space-3);box-shadow:var(--shadow-md);background:linear-gradient(#ffffff08,#ffffff04)}.room-page-qr img{border-radius:var(--radius);padding:var(--space-2);background:#fff}.room-page-qr-url{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.02em}.room-song{padding:var(--space-3) var(--space-4);gap:var(--space-3);border-radius:var(--radius);background:linear-gradient(#ffffff08,#ffffff04)}.room-song:hover{border-color:var(--color-border-hover);background:linear-gradient(#ffffff0f,#ffffff08)}.room-song-title{font-size:var(--text-base);letter-spacing:-.01em;font-weight:600}.room-song-artist{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:2px}.room-song-by{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:4px}.room-member{padding:var(--space-1) var(--space-3);background:var(--color-tag-bg);border:1px solid var(--color-border);border-radius:var(--radius-pill);font-size:var(--text-sm);color:var(--color-text-secondary)}.room-member-role{color:var(--color-favorite);font-size:var(--text-xs);margin-left:2px}.favorites-page h1{font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:-.025em;margin-bottom:var(--space-5);background:linear-gradient(#fff,#ffffffd1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:800;line-height:1.1}.back-link{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);margin-left:calc(var(--space-2) * -1);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-text-muted);transition:color var(--dur) var(--ease-std), background var(--dur) var(--ease-std);display:inline-flex}.back-link:hover{color:var(--color-text);background:var(--color-tag-bg)}.search-history{margin-top:var(--space-6)}.search-history-clear{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);transition:color var(--dur) var(--ease-std), background var(--dur) var(--ease-std)}.search-history-clear:hover{color:var(--color-text);background:var(--color-tag-bg)}.search-history-query{padding:var(--space-3) var(--space-2);transition:color var(--dur) var(--ease-std)}.search-history-query:hover{color:var(--color-chord)}.load-more-btn{margin-top:var(--space-6);padding:var(--space-3) var(--space-4);border:1px dashed var(--color-border-hover);border-radius:var(--radius);color:var(--color-text-secondary);transition:background var(--dur) var(--ease-std), color var(--dur) var(--ease-std), border-color var(--dur) var(--ease-std);background:0 0;font-weight:500}.load-more-btn:hover{background:var(--color-primary-lighter);border-color:var(--color-primary-ring);color:var(--color-chord);border-style:solid}.cp-line-active{background:linear-gradient(90deg, transparent, var(--color-primary-light) 20%, var(--color-primary-light) 80%, transparent);border-radius:var(--radius-sm)}.mode-toggle{background:var(--color-tag-bg);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:3px}.mode-toggle-btn{border-radius:var(--radius-pill);font-size:var(--text-sm);padding:var(--space-1) var(--space-3);transition:background var(--dur) var(--ease-std), color var(--dur) var(--ease-std);font-family:inherit;font-weight:500}.mode-toggle-btn.is-active{background:var(--color-primary-light);color:var(--color-chord);box-shadow:var(--shadow-inset-hi)}.favorite-btn{transition:color var(--dur) var(--ease-std), transform var(--dur) var(--ease-spring)}.favorite-btn:hover{transform:scale(1.2)}.favorite-btn:active{transform:scale(.9)}.favorite-btn-active{color:var(--color-favorite);filter:drop-shadow(0 0 8px #f59e0b66)}.logo-dropdown{background:var(--color-surface-2);border:1px solid var(--color-border-hover);border-radius:var(--radius);padding:var(--space-1);box-shadow:var(--shadow-lg), var(--shadow-inset-hi);animation:dropdown-in .18s var(--ease-out)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.logo-dropdown-item{border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:500}@media (width<=720px){.share-btn,.btn-delete,.favorite-btn,.youtube-btn{justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}.song-header-actions .favorite-btn{font-size:1.5rem}.transpose-btn{min-height:32px}.chord-sheet-toolbar{top:calc(var(--safe-top) + var(--header-height))}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.hero h1,.login-card h1,.favorites-page h1{-webkit-text-fill-color:currentColor;color:var(--color-text);background:0 0}}@media (width>=721px){.main{position:relative}}.song-page{scroll-margin-top:calc(var(--header-height) + 60px)}.top100-tabs{gap:6px;margin:12px 0 20px;display:flex}.top100-tab{background:var(--color-surface,#ffffff0a);border:1px solid var(--color-border,#ffffff14);color:var(--color-text-muted,#fff9);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:500;text-decoration:none;transition:background .12s,color .12s,border-color .12s}.top100-tab:hover{background:var(--color-surface-hover,#ffffff12);color:var(--color-text,#fff)}.top100-tab.active{background:var(--color-accent,#4f7cff);color:#fff;border-color:#0000}.top100-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.top100-row{background:var(--color-surface,#ffffff0a);border:1px solid var(--color-border,#ffffff14);border-radius:10px;grid-template-columns:40px 1fr auto auto auto;align-items:center;gap:16px;padding:12px 16px;transition:background .12s,border-color .12s;display:grid}.top100-row:hover{background:var(--color-surface-hover,#ffffff12);border-color:var(--color-border-strong,#ffffff29)}.top100-rank{font-variant-numeric:tabular-nums;color:var(--color-text-muted,#ffffff80);text-align:right;font-weight:600}.top100-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.top100-artist{color:var(--color-text-muted,#fff9);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.top100-title{color:var(--color-text,#fff);white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:500;overflow:hidden}.top100-source{color:var(--color-text-muted,#ffffff73);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-size:12px;overflow:hidden}.top100-size{color:var(--color-text-muted,#fff6);font-variant-numeric:tabular-nums;text-align:right;min-width:60px;font-size:12px}.top100-open{background:var(--color-accent,#4f7cff);color:#fff;border-radius:8px;align-items:center;padding:6px 12px;font-size:13px;font-weight:500;text-decoration:none;transition:background .12s;display:inline-flex}.top100-open:hover{background:var(--color-accent-hover,#6991ff)}@media (width<=720px){.top100-row{grid-template-columns:32px 1fr auto;grid-template-areas:"rank meta open"".src size";gap:6px 12px;padding:10px 12px}.top100-rank{grid-area:rank}.top100-meta{grid-area:meta}.top100-source{grid-area:src;max-width:none}.top100-size{grid-area:size}.top100-open{grid-area:open;padding:6px 10px;font-size:12px}}.toast-container{left:0;right:0;bottom:calc(var(--tab-bar-height) + var(--safe-bottom) + var(--space-3));align-items:center;gap:var(--space-2);pointer-events:none;z-index:var(--z-toast);padding:0 var(--space-3);flex-direction:column-reverse;display:flex;position:fixed}.toast{pointer-events:auto;min-width:200px;max-width:min(420px,92vw);padding:var(--space-3) var(--space-4);background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border-hover);border-radius:var(--radius);box-shadow:var(--shadow-lg), var(--shadow-inset-hi);font-size:var(--text-sm);letter-spacing:-.005em;animation:toast-in var(--dur-slow) var(--ease-out);align-items:center;gap:var(--space-2);font-weight:500;line-height:1.4;display:flex}.toast-success{background:linear-gradient(180deg, #22c55e14, #22c55e05), var(--color-surface-2);border-color:#22c55e59}.toast-error{background:linear-gradient(180deg, #ef44441a, #ef444405), var(--color-surface-2);border-color:#ef444466}.toast-info{border-color:var(--color-border-hover)}.toast-message{flex:1}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width>=721px){.toast-container{left:auto;right:var(--space-4);bottom:calc(var(--safe-bottom) + var(--space-4));align-items:flex-end;padding:0}}@media (prefers-reduced-motion:reduce){.toast{animation:none}}.error-state{justify-content:center;align-items:center;gap:var(--space-3);text-align:center;padding:var(--space-6) var(--space-4);color:var(--color-text-secondary);flex-direction:column;display:flex}.error-state-icon{color:var(--color-danger);opacity:.85}.error-state-message{font-size:var(--text-base);max-width:38ch;line-height:1.5}.error-state-retry{margin-top:var(--space-1);min-height:44px;padding:0 var(--space-5);background:linear-gradient(180deg, var(--color-primary-hover), var(--color-primary));color:#fff;border-radius:var(--radius-pill);font-size:var(--text-base);cursor:pointer;letter-spacing:-.005em;box-shadow:var(--shadow-inset-hi), 0 2px 8px #8b45ff4d;transition:transform 80ms var(--ease-std), box-shadow var(--dur) var(--ease-std);border:0;font-family:inherit;font-weight:600}.error-state-retry:hover{box-shadow:var(--shadow-inset-hi), 0 4px 16px #8b45ff66}.error-state-retry:active{transform:scale(.97)}.skeleton{background:linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface-1) 50%, var(--color-surface) 100%);border-radius:var(--radius-xs);background-size:200% 100%;animation:1.4s linear infinite skeleton-shimmer;display:inline-block}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.skeleton{background:var(--color-surface-1);animation:none}}.chord-version-skeleton{gap:var(--space-4);padding:var(--space-3) 0;flex-direction:column;display:flex}.chord-version-skeleton-toolbar{gap:var(--space-2);align-items:center;display:flex}.chord-version-skeleton-lines{gap:var(--space-3);flex-direction:column;display:flex}.chord-version-skeleton-row{gap:var(--space-1);flex-direction:column;display:flex}.search-bar-clear:after{content:"";position:absolute;inset:-8px}.favorite-btn,.share-btn,.youtube-btn,.btn-delete{justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}.song-row .favorite-btn{min-width:36px;min-height:36px}.settings-btn{justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}.layout-login-btn,.layout-user-chip{min-height:44px}.kbd-help-backdrop{z-index:var(--z-modal,100);-webkit-backdrop-filter:blur(8px)saturate(120%);animation:kbd-help-fade-in var(--dur,.18s) var(--ease-out,ease-out);background:#08080e9e;justify-content:center;align-items:center;padding:1.25rem;display:flex;position:fixed;inset:0}@keyframes kbd-help-fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.kbd-help-backdrop{animation:none}}.kbd-help-sheet{background:var(--color-bg,#0a0a10);border:1px solid var(--color-border,#ffffff14);border-radius:var(--radius-lg,14px);width:min(420px,100%);max-height:calc(100vh - 2.5rem);padding:1.5rem 1.25rem 1.25rem;position:relative;overflow-y:auto;box-shadow:0 24px 64px #0000008c}.kbd-help-close{width:36px;height:36px;color:var(--color-text-secondary,#ffffffb3);cursor:pointer;background:0 0;border:none;border-radius:9px;justify-content:center;align-items:center;transition:background .15s,color .15s;display:inline-flex;position:absolute;top:.5rem;right:.5rem}.kbd-help-close:hover{color:var(--color-text,#fff);background:#ffffff14}.kbd-help-title{color:var(--color-text,#fff);margin-bottom:1rem;padding-right:2.5rem;font-size:1.05rem;font-weight:700}.kbd-help-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.kbd-help-row{border-bottom:1px solid #ffffff0a;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem .25rem;display:flex}.kbd-help-row:last-child{border-bottom:none}.kbd-help-label{color:var(--color-text-secondary,#ffffffc7);font-size:.875rem}.kbd-help-keys{flex-shrink:0;gap:.25rem;display:inline-flex}.kbd-help-key{min-width:28px;height:26px;color:var(--color-text,#fff);font-family:var(--font-mono,ui-monospace, monospace);background:#ffffff12;border:1px solid #ffffff1f;border-radius:6px;justify-content:center;align-items:center;padding:0 .5rem;font-size:.8125rem;font-weight:600;line-height:1;display:inline-flex}.recently-viewed{width:100%}.recently-viewed-header{margin-bottom:var(--space-3,.75rem);justify-content:space-between;align-items:baseline;display:flex}.recently-viewed-title{color:var(--color-text-muted,#ffffff8c);font-size:var(--text-2xs,.6875rem);text-transform:uppercase;letter-spacing:.1em;font-weight:600}.recently-viewed-clear{color:var(--color-text-muted,#ffffff8c);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:.25rem .5rem;font-size:.75rem;transition:color .15s,background .15s}.recently-viewed-clear:hover{color:var(--color-text,#fff);background:#ffffff0f}.recently-viewed-list{flex-direction:column;gap:0;margin:0;padding:0;list-style:none;display:flex}.recently-viewed-item{border-bottom:1px solid #ffffff0a}.recently-viewed-item:last-child{border-bottom:none}.recently-viewed-link{color:inherit;border-radius:8px;flex-direction:column;gap:2px;padding:.625rem .5rem;text-decoration:none;transition:background .15s;display:flex}.recently-viewed-link:hover{background:#ffffff0a}.recently-viewed-song-title{color:var(--color-text,#fff);font-size:.9375rem;font-weight:500}.recently-viewed-song-artist{color:var(--color-text-secondary,#ffffffb3);font-size:.8125rem}.print-btn{min-width:44px;min-height:44px;color:var(--color-text-secondary,#ffffffc7);cursor:pointer;background:#ffffff0f;border:none;border-radius:9px;justify-content:center;align-items:center;transition:background .15s,color .15s;display:inline-flex}.print-btn:hover{color:var(--color-text,#fff);background:#ffffff1a}@media print{.header,.bottom-tab-bar,.toast-container,.share-btn,.print-btn,.settings-btn,.youtube-btn,.favorite-btn,.add-to-room-btn,.back-link,.autoscroll-icon-btn,.autoscroll-control,.song-topbar,.tab-selector,.chord-version-nav,.transpose-toolbar,.song-toolbar-row,.layout-user-chip,.layout-login-btn,.kbd-help-backdrop,.share-backdrop,.settings-backdrop{display:none!important}html,body{color:#000!important;background:#fff!important;font-family:serif!important}body{background-image:none!important}.main,.song-page,.home-page,.search-page{max-width:100%!important;margin:0!important;padding:0!important}.song-header{background:0 0!important;border:none!important;padding:0 0 .5cm!important}.song-header h1{color:#000!important;margin:0 0 .1cm!important;font-size:18pt!important}.song-artist{color:#000!important;margin:0 0 .2cm!important;font-size:12pt!important}.chord-sheet,.chord-sheet-content,.chordpro,.chords-original{color:#000!important;background:0 0!important;padding:0!important;font-size:12pt!important;line-height:1.4!important}.cp-section{color:#000!important;margin-top:.3cm!important}.cp-chord,.cp-chord-badge,.cp-chord-standalone,.chord-token{box-shadow:none!important;color:#000!important;background:0 0!important;padding:0 .15em!important;font-weight:700!important}.cp-line,.cp-line.cp-has-chords,.chord-line,.chord-sheet-line{page-break-inside:avoid}.tag,.song-meta .tag{color:#000!important;background:0 0!important;border:1px solid #999!important;padding:.05cm .15cm!important}a{color:#000!important;text-decoration:none!important}button{display:none!important}}