@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@500&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:400;700&display=swap";.confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999;padding:20px;animation:fadeIn .2s ease-out}.confirm-dialog{background-color:var(--bg-primary);color:var(--text-primary);padding:1.5rem;border-radius:20px;box-shadow:0 20px 25px -5px #0003,0 10px 10px -5px #0000001a;max-width:340px;width:100%;text-align:center;border:1px solid var(--border-primary);animation:scaleIn .2s cubic-bezier(.175,.885,.32,1.275)}.confirm-message{font-size:1.2rem;font-weight:700;margin-bottom:.75rem;color:var(--text-primary);line-height:1.3}.confirm-description{font-size:.95rem;color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.4}.confirm-actions{display:flex;flex-direction:column;gap:8px}.confirm-button{padding:.8rem 1.5rem;border:none;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;width:100%}.confirm-button.primary{background-color:#ef4444;color:#fff;order:1}.confirm-button.cancel{background-color:transparent;color:var(--text-secondary);order:2}.confirm-button.primary:active{transform:scale(.96);background-color:#dc2626}.confirm-button.cancel:active{background-color:var(--bg-tertiary)}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@media (min-width: 480px){.confirm-actions{flex-direction:row;gap:12px}.confirm-button.cancel{order:1;background-color:var(--bg-tertiary)}.confirm-button.primary{order:2}}.loading-music-screen{position:fixed;top:0;left:0;width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:var(--bg-tertiary);color:var(--text-primary);font-family:Poppins,sans-serif;z-index:9999}.vinyl{width:100px;height:100px;border:6px solid #444;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#222 40%,#111);box-shadow:0 0 15px #ffffff1a}.vinyl-icon{font-size:2rem;color:#ff4b91}.loading-music-text{margin-top:20px;font-size:1.2rem;font-weight:500;color:var(--text-primary)}.equalizer{display:flex;gap:4px;margin-top:20px}.bar{width:6px;height:30px;background:linear-gradient(to top,#ff4b91,#ffcc70);border-radius:3px;transform-origin:bottom}:root{--font-main: "Inter", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--color-chord: #60a5fa}*{box-sizing:border-box;-webkit-font-smoothing:antialiased}html,body{overscroll-behavior-y:contain;touch-action:pan-x pan-y}body,#root{min-height:100dvh;margin:0;font-family:var(--font-main);background-color:var(--bg-main);color:var(--text-main)}.app-container{display:flex;flex-direction:column;width:100%;max-width:2144px;margin:0 auto}.main-content{flex:1;display:flex;flex-direction:row;gap:24px;padding:24px;background-color:var(--bg-main)}@media (max-width: 768px){.main-content{flex-direction:column;padding:16px}}.editor-textarea{flex:1;width:100%;min-height:400px;padding:20px;border-radius:16px;border:1px solid var(--border-color);background-color:var(--bg-input);color:var(--text-main);font-family:var(--font-mono);font-size:1rem;line-height:1.6;resize:none;outline:none;transition:border-color .2s}.editor-textarea:focus{border-color:var(--primary-orange)}.previewer-container{flex:1;min-width:320px;border:1px solid var(--border-color);border-radius:16px;overflow-y:auto;padding:24px;background-color:var(--bg-card)}.btn-base{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.btn-primary{background-color:var(--primary-orange);color:#fff}.btn-primary:hover{background-color:var(--primary-orange-hover);transform:translateY(-1px)}.chord-line{white-space:pre;font-family:var(--font-mono);color:var(--color-chord);font-weight:700;margin-bottom:-4px}.lyric-line{white-space:pre-wrap;font-family:var(--font-main);color:var(--text-main);margin-bottom:12px}.annotation-text{color:var(--text-secondary);font-style:italic;font-size:.9rem;border-left:3px solid var(--primary-orange);padding-left:10px;margin:16px 0 8px}.tab-navigation{display:flex;gap:8px;margin-bottom:20px;background:var(--bg-input);padding:6px;border-radius:12px}.tab-button{flex:1;background:transparent;border:none;padding:8px;color:var(--text-secondary);font-weight:600;border-radius:8px;cursor:pointer}.tab-button.active{background:var(--bg-card);color:var(--primary-orange);box-shadow:0 4px 12px #0003}input:focus-visible,textarea:focus-visible{outline:none}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.mb-2{margin-bottom:.5rem}.items-center{align-items:center}.gap-2{gap:.5rem}.mt-1{margin-top:.25rem}.text-sm{font-size:.875rem}.font-bold{font-weight:700}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border-b{border-bottom:1px solid}.border-gray-100{border-color:#f3f4f6}.bg-black-5{background-color:#0000000d}.dark .dark\:border-white-10{border-color:#ffffff1a}.dark .dark\:bg-white-5{background-color:#ffffff0d}.text-red-500{color:#ef4444}@font-face{font-family:Fira Code;src:url(/assets/FiraCode-Regular-jAL9VymT.woff2) format("woff2"),url(/assets/FiraCode-Regular-B8-kG0vS.woff) format("woff"),url(/assets/FiraCode-Regular-CzoQJ4O7.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Fira Code;src:url(/assets/FiraCode-Bold-DzhvDiv4.woff2) format("woff2"),url(/assets/FiraCode-Bold-DeMYoWdo.woff) format("woff"),url(/assets/FiraCode-Bold-BenPBVE7.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}.textarea-editor{font-family:var(--font-mono);white-space:pre}.chord-line,.chord-text,.lyric-line,.annotation-text,.plain-text-line{font-family:var(--font-mono);white-space:pre-wrap}.chord-line,.annotation-chord{font-weight:700}.dark{--color-background: #111827;--color-background-secondary: #1f2937;--color-background-tertiary: #374151;--color-text: #f9fafb;--color-text-light: #d1d5db;--color-text-muted: #9ca3af;--color-shadow: rgba(0, 0, 0, .3);--primary-color: #818cf8;--primary-color-light: #a5b4fc;--primary-color-dark: #6366f1;--color-secondary: #22d3ee;--color-secondary-light: #67e8f9;--color-secondary-dark: #06b6d4;--color-accent-green: #4ade80;--color-accent-green-dark: #22c55e;--color-chord: #67e8f9;--color-chord-live-mode: #67e8f9;--color-live-mode-text: #f9fafb;--color-live-mode-bg: #1f2937;--color-live-mode-controls-border: rgba(255, 255, 255, .2)}body{margin:0;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-background);color:var(--color-text);line-height:1.5;transition:background-color .3s ease,color .3s ease;min-height:100vh;display:flex;flex-direction:column}code{font-family:var(--font-mono)}*{box-sizing:border-box}button{border:none;background:none;cursor:pointer;padding:0;margin:0;font-family:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.app-container{min-height:100vh;display:flex;flex-direction:column;color:var(--color-text)}.app-main-content{flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;max-width:80rem;margin:0 auto;width:100%;gap:2rem}@media (min-width: 768px){.app-main-content{flex-direction:row;align-items:flex-start;padding:2.5rem 2rem}}.h2-title{font-size:1.5rem;font-weight:700;color:var(--color-text);margin-bottom:1rem;text-align:center}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:Inter,sans-serif;color:var(--color-text-dark);background-color:var(--color-background-light);min-height:100vh;display:flex;flex-direction:column;transition:background-color var(--transition-speed) var(--transition-timing),color var(--transition-speed) var(--transition-timing)}.app-container{display:flex;flex-direction:column;min-height:100vh;width:100%;max-width:100vw;overflow:hidden}.main-layout{flex-grow:1;display:flex;flex-direction:column;width:100%;overflow:hidden;height:calc(100vh - var(--header-height-mobile-top) - var(--header-height-mobile-bottom))}.main-content{flex-grow:1;display:flex;flex-direction:column;width:100%;overflow:hidden}.main-container{height:100%}.loading-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background-color:var(--color-background-light);color:var(--color-text-medium);font-size:1.2rem}.loading-spinner{animation:spin 1.5s linear infinite;font-size:3rem;color:var(--color-primary)}.loading-text{font-weight:500}h1,h2,h3,h4,h5,h6{color:var(--color-text-dark)}h2.h2-title{font-size:1.8rem;font-weight:700;text-align:center;color:var(--color-primary);margin-bottom:var(--spacing-lg)}button:active:not(:disabled){filter:brightness(.95)}button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-base,button{font-size:14px}.btn-base{background-color:var(--bg-primary);border:1px solid var(--bg-tertiary);border-radius:var(--border-radius-lg);color:var(--editor-text);font-size:14px;padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-base{display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem;cursor:pointer;transition:background-color .2s ease,color .2s ease}.btn-base:hover{color:var(--color-white);background-color:var(--button-bg)}.btn-base.active{background-color:var(--brand-primary);color:var(--color-gray-50)}.btn-small{padding:var(--spacing-sm) var(--spacing-md);font-size:.85rem}.back-button{background:none;border:none;color:var(--color-text-medium);padding:var(--spacing-sm);display:flex;align-items:center;gap:var(--spacing-xs);font-size:1rem}.back-button:hover{color:var(--color-primary);background-color:transparent;box-shadow:none}.input-small,.select-small{padding:var(--spacing-xs) var(--spacing-sm);font-size:.9rem;width:auto}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--color-text-medium) var(--color-background-medium)}.custom-scrollbar::-webkit-scrollbar{width:8px;height:8px}.custom-scrollbar::-webkit-scrollbar-track{background:var(--color-background-medium);border-radius:var(--border-radius-base)}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-text-medium);border-radius:var(--border-radius-base);border:2px solid var(--color-background-medium)}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--color-primary)}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease-out}.modal-content{background-color:var(--bg-secondary);padding:var(--spacing-lg);border-radius:var(--border-radius-base);box-shadow:0 8px 30px var(--color-shadow-light);position:relative;max-width:90vw;max-height:90vh;overflow-y:auto;transform:scale(.95);animation:zoomIn .3s cubic-bezier(.175,.885,.32,1.275) forwards;display:flex;flex-direction:column;gap:var(--spacing-md)}.close-modal-button{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:none;border:none;font-size:1.8rem;color:var(--color-text-medium);cursor:pointer;line-height:1;padding:var(--spacing-xs);transition:color var(--transition-speed)}.close-modal-button:hover{color:var(--color-danger)}@keyframes zoomIn{0%{transform:scale(.95);opacity:.8}to{transform:scale(1);opacity:1}}@media (min-width: 1025px){.main-layout{height:calc(100vh - var(--header-height-desktop))}.main-content{flex-direction:row;flex-grow:1}}.feedback-modal{display:flex;align-items:center;justify-content:center;position:fixed;width:100%;height:100%;top:0;left:0;background:var(--bg-primary);border:1px solid var(--border-color);padding:24px;border-radius:8px;box-shadow:0 4px 12px #0003;z-index:1000;text-align:center;max-width:100%;color:var(--text-color)}.feedback-content p{font-size:1.1em;margin-bottom:16px}.feedback-modal .btn-login-google{margin:auto}.feedback-modal .close-button{position:absolute;top:8px;right:8px;background:none;border:none;cursor:pointer;color:var(--text-color)}.flex{display:flex}.song-list-container{width:100%}.song-list-wrapper{display:flex;flex-direction:column;gap:8px}.song-list-container.card .song-list-wrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.song-title-row{display:flex;align-items:center;gap:4px}.card-fork-indicator{position:absolute;top:5px;right:5px;background:#2463ebe6;color:#fff;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0003}.view-card .song-thumbnail{position:relative}.song-list-item{background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:12px;cursor:pointer;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,border-color .2s ease,box-shadow .3s ease}.song-list-item:hover{background-color:var(--bg-tertiary);border-color:var(--border-primary-hover);box-shadow:0 4px 12px #0000001a}.song-list-item:active{transform:scale(.98)}.song-list-item.dragging{opacity:.9;scale:1.05;z-index:9999;box-shadow:0 10px 25px #0003;border-color:var(--brand-primary)}.song-list-item:hover .song-thumbnail img{transform:scale(1.1);transition:transform .5s ease-in-out}.song-list-item:active{transform:scale(.96)}.view-line{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;animation:all .3s ease-in-out}.view-line .song-item-main-wrapper{display:flex;align-items:center;gap:12px;flex:1;overflow:hidden}.view-line .song-thumbnail{flex-shrink:0;width:48px;height:48px;border-radius:6px;overflow:hidden}.view-line .song-thumbnail img{width:100%}.view-line .song-item-info{display:flex;flex-direction:column;overflow:hidden}.view-line .song-title-row{display:flex;align-items:center}.view-line .song-list-item-top{font-size:.9rem;font-weight:700;color:var(--text-muted);margin-right:8px}.view-line .song-title-text{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.view-line .song-artist-text{font-size:.85rem;color:var(--text-secondary)}.view-card{display:flex;flex-direction:column;padding:12px;text-align:center;height:100%}.view-card .song-item-main-wrapper{display:flex;flex-direction:column;gap:10px}.view-card .song-thumbnail{width:100%;aspect-ratio:1 / 1;position:relative;border-radius:10px;overflow:hidden;background-color:var(--color-gray-100)}.view-card .song-thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.view-card .song-item-info{display:flex;flex-direction:column;gap:4px;margin-top:4px}.view-card .song-title-text{font-size:.95rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.view-card .song-artist-text{font-size:.8rem;color:var(--text-secondary)}.card-ranking-badge{position:absolute;top:6px;left:6px;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:700;z-index:2}.view-card .song-list-actions{margin-top:auto;padding-top:10px;border-top:1px solid var(--border-primary);justify-content:center;width:100%;display:flex;gap:8px}.view-card:hover{transform:translateY(-6px)}.is-drag-handle{display:flex;align-items:center;padding:4px;color:var(--text-muted);cursor:grab;transition:color .2s}.is-drag-handle:active{cursor:grabbing}.song-list-actions{display:flex;gap:4px}.song-list-actions button,.setlist-actions button{background:transparent;border:none;padding:8px;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.song-list-actions button:hover,.setlist-actions button:hover{background-color:var(--bg-primary);color:var(--brand-primary)}.song-list-delete-button:hover{color:var(--status-danger, #ff4444)!important;background-color:#ff44441a!important}.song-thumbnail img[src*=placeholder]{opacity:.5;filter:grayscale(1)}.section-separator-container{display:flex;align-items:center;gap:12px;background-color:var(--bg-secondary, #f1f5f9);border-left:4px solid #3b82f6;padding:10px 16px;margin:20px 0 10px;border-radius:8px;transition:transform .2s ease,box-shadow .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.section-separator-container.is-dragging{opacity:.5;box-shadow:0 5px 15px #0000001a;cursor:grabbing}.separator-drag-handle{display:flex;align-items:center;justify-content:center;color:#94a3b8;cursor:grab;padding:4px}.separator-drag-handle:active{cursor:grabbing}.separator-content{flex:1}.separator-label{font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;color:#475569;font-family:Inter,sans-serif}.separator-delete-btn{background:transparent;border:none;color:#cbd5e1;cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.separator-delete-btn:hover{background-color:#fee2e2;color:#ef4444}.song-list-container.syncing-order{pointer-events:none;cursor:wait}.song-list-container.syncing-order .song-item{opacity:.7}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-backdrop .modal-content{background-color:var(--bg-secondary)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-title{font-size:1.5rem;font-weight:600;margin:0;flex-grow:1}.modal-close-button{background:none;border:none;color:var(--text-color);cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.modal-close-button:hover{background-color:var(--background-color)}.modal-body{flex-grow:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.playlist-list{list-style:none;padding:0;margin:0}.playlist-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background-color:var(--color-gray-100);border-radius:8px;margin-bottom:8px;transition:background-color .2s ease}.dark .playlist-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background-color:var(--color-gray-700);border-radius:8px;margin-bottom:8px;transition:background-color .2s ease}.playlist-item:hover{background-color:var(--bg-tertiary)}.playlist-name{text-align:left;flex-grow:1;font-size:1rem;font-weight:500}.playlist-toggle-button{background:none;color:var(--text-color);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease,color .2s ease}.playlist-toggle-button.active{color:var(--color-blue-500)}.no-playlists-message{text-align:center;color:var(--text-secondary-color);padding:20px 0}.modal-footer{padding-top:20px;border-top:1px solid var(--border-color)}.modal-controls{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);width:100%}.search-container{position:relative;flex:2;display:flex;align-items:center}.search-icon-inside{position:absolute;left:12px;color:var(--color-text-medium);pointer-events:none}.create-playlist-input,.search-playlist-input,.search-input{width:100%;height:40px;padding:0 12px;border:1px solid var(--bg-tertiary);border-radius:var(--border-radius-base);background-color:var(--bg-tertiary);color:var(--color-text-dark);font-size:14px;box-sizing:border-box;transition:border-color .2s}.search-playlist-input,.search-input{padding-left:38px}.create-playlist-input:focus,.search-input:focus{border-color:var(--color-primary);outline:none}.create-playlist-form{display:flex;flex:1.5;gap:var(--spacing-xs);align-items:center}.create-playlist-button{height:40px;padding:0 16px;background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius-base);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px;transition:opacity .2s}.create-playlist-button:hover{opacity:.9}.create-playlist-button:disabled{background-color:var(--color-text-medium);cursor:not-allowed}.playlist-list{max-height:300px;overflow-y:auto;margin-top:10px}.spinner-small{border:3px solid var(--color-gray-400);border-top:3px solid var(--color-blue-500);border-radius:50%;width:14px;height:14px;animation:spin 1s linear infinite;display:inline-block;margin-right:5px}.playlist-toggle-button{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 10px}.homepage-container,.playlists-container{display:flex;flex-direction:column;padding:var(--spacing-md);flex:1;padding-bottom:90px}.container{width:100%;max-width:1200px;margin:0 auto}.homepage-header,.playlists-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:24px}.homepage-title,.playlists-title{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.homepage-search-wrapper{width:100%;margin-top:16px;margin-bottom:8px}.search-input-container{position:relative;display:flex;align-items:center;width:100%}.search-playlist-input,.home-search-input{width:100%;height:48px;padding:0 45px 0 42px;border-radius:12px;border:1px solid var(--border-primary);background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;outline:none;transition:all .2s ease}.search-playlist-input:focus,.home-search-input:focus,.search-input-container:focus-within .home-search-input{border-color:var(--brand-primary);background:var(--bg-primary);box-shadow:0 0 0 3px rgba(var(--brand-primary-rgb),.1)}.search-icon-inside,.search-icon-home{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none;z-index:2}.clear-search-home{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;z-index:2}.playlists-actions-bar{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:8px}.search-container{position:relative;flex:1}.search-icon-inside{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.search-playlist-input,.home-search-input{width:100%;height:48px;padding:0 16px 0 42px;border-radius:12px;border:1px solid var(--border-primary);background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;outline:none;transition:border-color .2s}.search-playlist-input:focus{border-color:var(--brand-primary)}.action-group-main{display:flex;gap:10px;width:100%}.btn-action-primary,.btn-action-outline{height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none}.btn-action-primary{flex:1.5;background-color:var(--brand-primary);color:#fff}.btn-action-outline{flex:1;background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-primary)}.btn-action-primary:active,.btn-action-outline:active{transform:scale(.98)}.sheet-form{display:flex;flex-direction:column;gap:16px;padding:10px 0 20px}.sheet-description{font-size:.95rem;color:var(--text-secondary);line-height:1.4;margin-bottom:var(--spacing-md)}.create-playlist-input-large{width:100%;height:54px;padding:0 16px;font-size:1.1rem;border-radius:12px;border:2px solid var(--border-primary);background:var(--bg-tertiary);color:var(--text-primary)}.create-playlist-button-full{width:100%;height:52px;background:var(--brand-primary);color:#fff;border-radius:12px;font-weight:700;font-size:1rem}@media (min-width: 810px){.playlists-container{padding:var(--spacing-xl)}.playlists-header{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;margin-bottom:32px}.playlists-actions-bar{flex-direction:row;width:auto;margin-top:0;gap:16px;flex:1;justify-content:flex-end}.search-container{max-width:350px}.action-group-main{width:auto}.btn-action-primary,.btn-action-outline{padding:0 24px;flex:none}}.empty-list-message{text-align:center;padding:60px 20px;color:var(--text-secondary)}.icon-loading{animation:spin 1s linear infinite}:root{--bpm-pulse-active-color: var(--color-blue-500);--bpm-pulse-inactive-color: var(--color-gray-800);--bpm-ring-active-color: var(--color-blue-400);--bpm-ring-inactive-color: var(--color-gray-700);--bpm-focus-glow: var(--color-blue-400);--bpm-beat-active-color-strong: var(--color-yellow-300);--bpm-beat-active-color-weak: var(--color-yellow-500);--bpm-beat-inactive-color: var(--color-gray-600);--play-btn-bg-start: var(--color-blue-600);--play-btn-bg-end: var(--color-blue-800);--play-btn-hover-start: var(--color-blue-500);--play-btn-hover-end: var(--color-blue-700);--pause-btn-bg-start: var(--color-red-600);--pause-btn-bg-end: var(--color-red-800);--pause-btn-hover-start: var(--color-red-500);--pause-btn-hover-end: var(--color-red-700);--tap-btn-bg-start: var(--color-purple-600);--tap-btn-bg-end: var(--color-purple-800);--tap-btn-hover-start: var(--color-purple-500);--tap-btn-hover-end: var(--color-purple-700);--icon-btn-bg: var(--color-gray-700);--icon-btn-hover: var(--color-gray-600);--color-green-400-rgb: 74, 222, 128;--color-yellow-300-rgb: 253, 224, 71;--color-yellow-500-rgb: 245, 158, 11;--color-blue-400-rgb: 96, 165, 250;--bpm-pulse-color-rgb: 59, 130, 246;--color-blue-300-rgb: 147, 197, 253;--ease-in-out-smooth: cubic-bezier(.4, 0, .2, 1);--transition-speed: .3s;--transition-timing: var(--ease-in-out-smooth)}.bpm-visualizer-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--bg-primary),var(--bg-tertiary));color:var(--text-primary);padding:var(--spacing-md);font-family:var(--font-sans);text-align:center;overflow:hidden;padding-bottom:4em}.bpm-header{display:flex;flex-direction:column;align-items:center;margin-bottom:var(--spacing-lg);gap:var(--spacing-sm)}.bpm-title{font-size:2.8rem;font-weight:800;margin:0;color:var(--text-primary);text-shadow:2px 2px 6px var(--shadow-primary)}.bpm-sub{font-size:1.1rem;color:var(--text-secondary);margin-top:var(--spacing-xs)}.bpm-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md);align-items:center}.play-btn,.icon-btn{border:none;border-radius:var(--border-radius-base);padding:var(--spacing-sm) var(--spacing-md);font-size:1.2rem;font-weight:600;cursor:pointer;transition:transform var(--transition-speed) var(--transition-timing),box-shadow var(--transition-speed) var(--transition-timing),background .3s var(--transition-timing);display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);width:50px;height:50px;color:var(--color-white)}.play-btn:focus,.icon-btn:focus,.tap-tempo:focus{outline:none}.play-btn{background:linear-gradient(180deg,var(--play-btn-bg-start),var(--play-btn-bg-end));border-radius:50%;width:60px;height:60px;font-size:1.5rem;box-shadow:0 6px 15px #0006}.play-btn:hover{background:linear-gradient(180deg,var(--play-btn-hover-start),var(--play-btn-hover-end));transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px #00000080}.play-btn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 5px #0003}.play-btn.active{background:linear-gradient(180deg,var(--pause-btn-bg-start),var(--pause-btn-bg-end))}.play-btn.active:hover{background:linear-gradient(180deg,var(--pause-btn-hover-start),var(--pause-btn-hover-end))}.icon-btn{background-color:var(--icon-btn-bg);color:var(--color-white);border-radius:50%;width:45px;height:45px;font-size:1.3rem;box-shadow:0 3px 8px #00000040}.icon-btn:hover{background-color:var(--icon-btn-hover);transform:translateY(-1px) scale(1.02);box-shadow:0 5px 12px #00000059}.icon-btn:active{transform:translateY(0) scale(.98);box-shadow:0 1px 3px #00000026}.pulse-indicator{width:12rem;height:12rem;border-radius:50%;background-color:var(--bpm-pulse-inactive-color);border:5px solid var(--bpm-pulse-inactive-color);display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:800;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--text-primary);transition:background-color .4s var(--ease-in-out-smooth),border-color .4s var(--ease-in-out-smooth),box-shadow .4s var(--ease-in-out-smooth);margin:var(--spacing-xl) auto;position:relative;overflow:hidden;will-change:transform,box-shadow,background-color,border-color}.pulse-indicator.tap-feedback{background-color:var(--bpm-pulse-active-color);border-color:var(--bpm-pulse-active-color);animation:pulseStrong .4s var(--ease-in-out-smooth) forwards}@keyframes pulseStrong{0%{transform:scale(1);box-shadow:0 0 5px var(--bpm-pulse-active-color);opacity:1}50%{background-color:var(--bpm-beat-active-color-weak);border-color:var(--bpm-beat-active-color-strong);transform:scale(1.09);box-shadow:0 0 20px var(bpm-beat-active-color-strong);opacity:.7}to{transform:scale(1);box-shadow:0 0 5px var(--bpm-pulse-active-color);opacity:1}}@keyframes pulseWeak{0%{transform:scale(1);background-color:var(--bpm-beat-active-color-weak);opacity:.85;box-shadow:0 2px 5px #0000004d}50%{transform:scale(1.45);background-color:var(--bpm-beat-active-color-weak);opacity:1;box-shadow:0 0 18px var(--bpm-beat-active-color-weak),0 0 30px 5px rgba(var(--color-yellow-300-rgb),.3)}80%{transform:scale(1.2);opacity:.75;box-shadow:0 0 15px var(--bpm-beat-active-color-weak),0 0 20px 3px rgba(var(--color-yellow-300-rgb),.2)}to{transform:scale(1);background-color:var(--bpm-beat-inactive-color);opacity:.7;box-shadow:0 2px 5px #0000004d}}@keyframes pulseQuick{0%{transform:scale(1);box-shadow:0 0 5px var(--bpm-pulse-active-color);opacity:1}50%{background-color:var(--bpm-beat-active-color-weak);border-color:var(--bpm-beat-active-color-strong);transform:scale(1.09);box-shadow:0 0 20px var(bpm-beat-active-color-strong);opacity:.7}to{transform:scale(1);box-shadow:0 0 5px var(--bpm-pulse-active-color);opacity:1}}.pulse-indicator.pulsing-strong{background-color:var(--bpm-pulse-active-color);border-color:var(--bpm-pulse-active-color);animation:pulseStrong .4s var(--ease-in-out-smooth) forwards}.pulse-indicator.pulsing-weak{background-color:var(--bpm-pulse-active-color);border-color:var(--bpm-pulse-active-color);animation:pulseWeak .4s var(--ease-in-out-smooth) forwards}.pulse-indicator.pulsing-quick{animation:pulseQuick .15s ease-out forwards}.tap-tempo{background:linear-gradient(180deg,var(--tap-btn-bg-start),var(--tap-btn-bg-end));color:var(--color-white);border:none;border-radius:var(--border-radius-base);padding:.7rem var(--spacing-lg);font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform var(--transition-speed) var(--transition-timing),background .3s var(--transition-timing),box-shadow var(--transition-speed) var(--transition-timing);box-shadow:0 4px 10px #0000004d;width:100%;margin-top:var(--spacing-md);will-change:transform,box-shadow,background}.tap-tempo:hover{background:linear-gradient(180deg,var(--tap-btn-hover-start),var(--tap-btn-hover-end));transform:translateY(-2px);box-shadow:0 6px 15px #0006}.tap-tempo:active{transform:translateY(0);box-shadow:0 2px 5px #0003}.bpm-value{color:var(--color-white)}.controls-right{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);width:100%;max-width:400px;margin:0 auto}.beat-indicators-wrapper{display:flex;gap:var(--spacing-sm);margin:var(--spacing-md) 0;justify-content:center;align-items:center;min-height:1.5rem}.beat-indicator{display:flex;justify-content:center;align-items:center;font-family:Inter,Courier New,Courier,monospace;font-weight:700;color:var(--color-white);width:1.2rem;height:1.2rem;padding:20px;border-radius:50%;background-color:var(--bpm-beat-inactive-color);transition:background-color .3s var(--ease-in-out-smooth),transform .3s var(--ease-in-out-smooth),box-shadow .3s var(--ease-in-out-smooth);box-shadow:0 2px 5px #0000004d;will-change:transform,box-shadow,background-color}@keyframes beatPulseStrong{0%{transform:scale(1);background-color:var(--bpm-beat-active-color-weak);opacity:.85}50%{transform:scale(1);background-color:var(--bpm-beat-active-color-weak);opacity:1}to{transform:scale(1);background-color:var(--bpm-beat-inactive-color);opacity:.7}}@keyframes beatPulseWeak{0%{transform:scale(1);background-color:var(--bpm-beat-active-color-weak);opacity:.85}50%{transform:scale(1);background-color:var(--bpm-beat-active-color-weak);opacity:1}to{transform:scale(1);background-color:var(--bpm-beat-inactive-color);opacity:.7}}.beat-indicator.hit-strong{animation:beatPulseStrong .4s var(--ease-in-out-smooth) forwards}.beat-indicator.hit-weak{animation:beatPulseWeak .4s var(--ease-in-out-smooth) forwards}.config-panel{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;padding:var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--border-radius-base);box-shadow:0 4px 10px #0003}.config-panel>div{display:flex;flex-direction:column;gap:var(--spacing-xs)}.beats-buttons{display:flex;align-items:center;justify-content:center;gap:10px}.beats-value{font-weight:700}.label{font-weight:600;margin-bottom:.25rem;color:var(--text-secondary);font-size:.9rem;text-align:left}.bpm-input,.time-signature-select{width:100%;padding:.5rem .75rem;font-size:1.1rem;border-radius:var(--border-radius-sm);border:1.5px solid var(--border-color-base);background-color:var(--bg-primary);color:var(--text-primary);transition:border-color .3s ease;font-weight:600}.bpm-input:focus,.time-signature-select:focus{outline:none;border-color:var(--bpm-ring-active-color);box-shadow:0 0 5px var(--bpm-ring-active-color)}.bpm-info-text{margin-top:2em;color:var(--text-muted)}.tap-info{background:var(--bg-secondary);color:var(--text-muted);padding:6px 12px;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;max-width:300px}@media (max-width: 480px){.pulse-indicator{width:10rem;height:10rem;font-size:3rem}.play-btn{width:50px;height:50px;font-size:1.3rem}.icon-btn{width:50px;height:50px;font-size:1.1rem}.bpm-actions{gap:var(--spacing-xs)}.bpm-header{margin-bottom:var(--spacing-md)}.config-panel{padding:var(--spacing-sm)}}.chord-context-menu{position:fixed;z-index:1000;border-radius:.5rem;padding:1rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;transition:background-color .2s ease,border-color .2s ease,color .2s ease;background-color:var(--modal-menu-bg);border:1px solid var(--modal-menu-border);color:var(--modal-menu-text)}.chord-context-menu-input{width:100%;padding:.5rem .75rem;margin-bottom:.5rem;border-radius:.25rem;border:1px solid var(--modal-menu-input-border);background-color:var(--modal-menu-input-bg);color:var(--modal-menu-text);font-size:1rem}.chord-context-menu-input::-moz-placeholder{color:var(--modal-menu-placeholder)}.chord-context-menu-input::placeholder{color:var(--modal-menu-placeholder)}.chord-context-menu-input:focus{outline:none;border-color:var(--button-bg);box-shadow:0 0 0 2px #4f46e54d}.chord-list-container{max-height:12rem;overflow-y:auto}.chord-list-item-button{display:block;width:100%;text-align:left;padding:.5rem;border-radius:.25rem;cursor:pointer;background-color:transparent;border:none;font-size:1rem;color:var(--modal-menu-text);transition:background-color .15s ease,color .15s ease}.dark .chord-list-item-button{color:var(--modal-menu-text)}.chord-list-item-button:hover,.dark .chord-list-item-button:hover{background-color:var(--modal-menu-hover)}.chord-menu-message{font-size:.875rem;padding:.5rem 0;color:var(--modal-menu-placeholder)}.dark .chord-menu-message{color:var(--modal-menu-placeholder)}.insert-chord-button{margin-top:.75rem;width:100%;padding:.5rem 1rem;border-radius:.375rem;font-weight:700;cursor:pointer;border:none;transition:background-color .2s ease,opacity .2s ease;background-color:var(--button-bg);color:#fff}.insert-chord-button:hover{background-color:var(--button-hover)}.insert-chord-button:disabled{opacity:.5;cursor:not-allowed}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}.custom-scrollbar::-webkit-scrollbar{width:8px}.custom-scrollbar::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:10px;border:2px solid var(--scrollbar-track)}.dark .custom-scrollbar{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}.dark .custom-scrollbar::-webkit-scrollbar-track{background:var(--scrollbar-track)}.dark .custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-color:var(--scrollbar-track)}.chord-list-item-button.highlighted{background-color:var(--primary-color);color:var(--primary-text-color);border:1px solid var(--primary-border-color)}.chord-context-menu{z-index:1000;position:fixed}.chord-context-menu.centered-modal{top:50%;left:50%;transform:translate(-50%,-50%)}.editor-container{display:flex;flex-direction:column;flex-grow:1;padding:var(--spacing-md);gap:var(--spacing-md)}.editor-toolbar{display:flex;flex-flow:column;padding:var(--spacing-sm);gap:var(--spacing-sm);border-radius:var(--border-radius-base);background-color:var(--editor-toolbar-bg)}.title-artist-inputs,.youtube-input{cursor:text;caret-color:var(--color-primary);display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.title-input,.artist-input,.link-input{flex-grow:1;padding:10px 20px;font-size:1.1rem;font-weight:500;cursor:text;caret-color:var(--color-primary);border:1px solid var(--editor-border);border-radius:var(--border-radius-lg);background-color:var( --editor-bg );color:var(--editor-text);transition:all var(--transition-speed) var(--transition-timing)}.link-input{width:100%}.title-input:focus,.artist-input:focus,.link-input:focus{outline:none;border-color:var(--color-primary)}html.dark .title-input,html.dark .artist-input,html.dark .link-input{color:var(--color-text-light)}html.dark .title-input:focus,html.dark .artist-input:focus,html.dark .link-input:focus{border-color:var(--color-primary)}.image-input-section{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm);width:100%}.image-input-section .link-input{flex:1;margin-bottom:0}.image-preview-container{width:52px;height:52px;min-width:52px;border-radius:var(--border-radius-lg);border:1px solid var(--editor-border);background-color:var(--editor-bg);overflow:hidden;display:flex;align-items:center;justify-content:center}.image-preview-container img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}@media (max-width: 504px){.image-input-section{flex-direction:row;align-items:center}.image-preview-container{width:48px;height:48px;min-width:48px}}.btn-editor{background-color:var(--editor-bg);border:1px solid var(--editor-border);border-radius:6px;color:var(--editor-text);font-size:14px;padding:8px 12px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.editor-buttons,.tag-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--spacing-sm)}.btn-editor:hover:not(:disabled){background-color:var(--bg-secondary);border-color:var(--color-border-dark)}.btn-editor:disabled{opacity:.5;cursor:not-allowed}.textarea-editor{flex-grow:1;width:100%;min-height:250px;max-height:80vh;padding:14px;font-family:Courier New,monospace;font-size:1rem;line-height:1.8;border-radius:var(--border-radius-lg);background-color:var(--editor-bg);color:var(--editor-text);border:1px solid var(--editor-border);resize:vertical;overflow-y:auto;transition:.2s;font-weight:400;cursor:text;caret-color:var(--color-primary)}.textarea-editor:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.2)}.textarea-editor::-moz-placeholder{color:var(--text-placeholder)}.textarea-editor::placeholder{color:var(--text-placeholder)}html.dark .textarea-editor::-moz-placeholder{color:var(--text-placeholder)}html.dark .textarea-editor::placeholder{color:var(--text-placeholder)}@media (min-width: 1025px){.textarea-editor{min-height:400px;max-height:none}.editor-buttons,.tag-buttons{justify-content:flex-start}}@media (max-width: 1024px){.editor-container{padding-bottom:90px}.textarea-editor{min-height:100vh;padding-bottom:40px}}@media (max-width: 810px){.editor-buttons,.tag-buttons{justify-content:left;gap:10px}}@media (max-width: 504px){.editor-buttons,.tag-buttons{gap:10px}.btn-editor{max-width:100%;padding:10px 14px}}.replace-modal-overlay{z-index:9999}.mobile-fixed-toolbar{position:fixed;right:20px;top:50%;transform:translateY(-50%);gap:10px;display:flex;flex-direction:column;z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out,transform .3s ease-in-out}.mobile-fixed-toolbar.show{opacity:1;pointer-events:auto;transform:translateY(-50%)}.mobile-tags-container{display:flex;flex-direction:column;gap:4px}.fixed-save-button{position:fixed;bottom:20px;left:50%;transform:translate(-50%);text-align:center;background-color:var(--color-blue-500);color:#fff;box-shadow:0 4px 10px #0000004d;padding:12px 30px;border:none;border-radius:50px;font-weight:700;z-index:1000;transition:background-color .2s;display:flex;align-items:center;gap:8px}.fixed-save-button:hover{background-color:var(--color-blue-600)!important}@media (max-width: 1024px){.fixed-save-button{bottom:90px;padding:10px 20px}}:root{--background-modal-overlay: rgba(0, 0, 0, .5)}.replace-modal{background-color:var(--bg-secondary);padding:24px;box-shadow:var(--modal-box-shadow);border-radius:var(--border-radius-base);transition:background-color .2s ease,border-color .2s ease,color .2s ease;background-color:var(--modal-menu-bg);width:90%;max-width:400px}.replace-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;background-color:var(--modal-menu-bg);padding:24px;box-shadow:var(--modal-box-shadow);border-radius:var(--border-radius-base);border:1px solid var(--modal-menu-border);width:90%;max-width:400px}.replace-modal .title{display:flex;gap:3px;align-items:center;margin-top:0;margin-bottom:16px;color:var(--text-primary)}.replace-modal .icon{display:flex;align-items:center;color:var(--text-primary)}.modal-input-group{margin-bottom:16px}.modal-input-group label{display:block;margin-bottom:8px;color:var(--text-secondary)}.modal-input-group input{width:100%;padding:.5rem .75rem;margin-bottom:.5rem;border-radius:.25rem;border:1px solid var(--modal-menu-input-border);background-color:var(--modal-menu-input-bg);color:var(--modal-menu-text);font-size:1rem}.replace-modal .nav-buttons{display:flex;margin-top:10px;gap:3px}.modal-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.replace-modal .nav-buttons button{padding:8px 16px;border:none;border-radius:var(--border-radius-base);cursor:pointer;background-color:var(--secondary-button-bg);color:var(--text-primary)}.replace-modal .modal-buttons button{padding:8px 16px;border:none;border-radius:var(--border-radius-base);cursor:pointer;background-color:var(--primary-button-bg);color:var(--primary-button-text)}.replace-modal .modal-buttons button:last-child{background-color:var(--secondary-button-bg);color:var(--secondary-button-text)}.replace-modal .modal-buttons button:disabled{opacity:.5;cursor:not-allowed}.replace-count{font-size:.9rem;color:var(--text-secondary);margin-top:16px}.editor-container .find.textarea-editor::-moz-selection{background-color:var(--color-yellow-200);color:var(--text-primary)}.editor-container .find.textarea-editor::selection{background-color:var(--color-yellow-200);color:var(--text-primary)}.app-close-button{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:var(--spacing-sm);border-radius:var(--border-radius-base);color:var(--color-text-medium);transition:background-color var(--transition-speed) var(--transition-timing),color var(--transition-speed) var(--transition-timing)}.app-close-button:hover,.app-close-button:focus{color:var(--color-primary);background-color:var(--color-background-medium);outline:none}html.dark .app-close-button{color:var(--color-text-medium)}html.dark .app-close-button:hover,html.dark .app-close-button:focus{color:var(--color-primary);background-color:var(--color-background-medium)}.bottom-sheet-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transition-speed) var(--transition-timing)}.bottom-sheet-overlay.is-open{opacity:1;pointer-events:auto;z-index:9999}.bottom-sheet-content{position:relative;width:100%;max-width:500px;background-color:var(--bg-secondary);color:var(--color-text-dark);border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg);box-shadow:0 -8px 30px var(--color-shadow-light);padding:var(--spacing-lg);transform:translateY(100%);transition:transform var(--transition-speed) cubic-bezier(.175,.885,.32,1.275);z-index:999;box-sizing:border-box;border-top:1px solid var(--color-border);border:1px solid var(--bg-tertiary);border-bottom:none;box-shadow:0 2px 6px #00000026}.bottom-sheet-content.is-open{transform:translateY(0);padding-bottom:var(--spacing-lg)}.bottom-sheet-content.is-open .gap-sm{gap:4px}.bottom-sheet-content.is-open .btn-base{padding:5px 12px;height:40px;gap:4px}.bottom-sheet-title{font-size:1.5rem;font-weight:700;color:var(--color-text-dark);margin:0;font-family:var(--font-family-primary)}.bottom-sheet-close-button{background:none;border:none;color:var(--color-text-medium);padding:var(--spacing-sm);border-radius:var(--border-radius-base);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--transition-speed) var(--transition-timing),color var(--transition-speed) var(--transition-timing)}.bottom-sheet-close-button:hover{color:var(--color-primary);background-color:var(--color-background-medium)}.bottom-sheet-body{padding-top:var(--spacing-sm);overflow-y:auto;max-height:calc(90vh - 120px)}@media (max-width: 600px){.bottom-sheet-content{max-width:100vw;border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg)}}.bottom-sheet-drag-handle{width:40px;height:5px;background-color:var(--color-border);border-radius:10px;margin:-10px auto 15px;cursor:pointer}.bottom-sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border)}.bottom-sheet-drag-handle:hover{background-color:var(--text-muted)}.toggle-video-switch{display:flex;align-items:center;justify-content:center;padding:8px;gap:10px;font-family:inherit;color:var(--text-primary)}.video-container{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;overflow:hidden;transition:all .4s ease}.video-container.theater-mode{max-width:900px;box-shadow:0 20px 50px #00000080}.player-embed{width:100%;height:100%;border:none;display:block}.video-container{width:100%;aspect-ratio:16 / 9;background:#000;border-radius:12px;overflow:hidden;transition:all .4s ease}.video-container.theater-mode{box-shadow:0 20px 50px #00000080}.thumbnail-container{position:relative;width:100%;height:100%;cursor:pointer;overflow:hidden}.thumbnail-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s ease}.thumbnail-container:hover .thumbnail-image{transform:scale(1.05)}.play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#e50914e6;border-radius:50%;width:68px;height:68px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px #e5091466;transition:all .3s ease;z-index:2}.thumbnail-container:hover .play-overlay{transform:translate(-50%,-50%) scale(1.15);background:#ff0a16}.play-icon{color:#fff;font-size:32px;margin-left:4px}.player-controls{position:absolute;top:12px;left:12px;display:flex;gap:8px;z-index:10;opacity:.8;transition:opacity .3s}.video-container:hover .player-controls{opacity:1}.player-controls button{background:#0f0f0fbf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.1);padding:6px 12px;border-radius:20px;cursor:pointer;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:5px;transition:all .2s ease}.player-controls button:hover{background:#fff3;transform:translateY(-2px)}.player-controls button.active{background:#e50914;border-color:#ff0a16}.video-container:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;box-shadow:inset 0 0 40px #0003}.draggable-container{background-color:var(--bg-secondary);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 8px 16px #0003;min-width:250px;min-height:100px;display:flex;flex-direction:column;overflow:hidden;transition:width .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1);will-change:left,top,width,height}.draggable-container.is-restricted{border:2px solid var(--color-primary-half)}.player-wrapper{position:relative;width:100%;height:100%}.draggable-container.dragging{box-shadow:0 12px 24px #0000004d}.draggable-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--color-border);-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none}.draggable-header{touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.header-title{display:flex;align-items:center;font-weight:700}.handle-icon{margin-right:8px}.header-controls{display:flex;gap:4px}.control-button{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s,color .2s}.control-button:hover{color:var(--text-secondary)}.draggable-content{flex-grow:1;overflow:auto}.text-switch-container{display:flex;align-items:center;position:relative;overflow:hidden;box-sizing:border-box;box-shadow:inset 0 2px 4px rgba(0,0_0,.3);transition:border-color .3s ease;-webkit-tap-highlight-color:transparent}.text-switch-container:hover{border-color:#555!important}.text-switch-container span{display:flex;justify-content:center;align-items:center;height:100%;letter-spacing:.5px;text-align:center;z-index:2;pointer-events:none}.text-switch-container div:first-child{box-shadow:0 2px 8px #0006;transition:transform .35s cubic-bezier(.4,0,.2,1),background-color .3s ease!important}@media (max-width: 768px){.text-switch-container{min-height:32px}}.chord-lyric-line-wrapper{display:flex;flex-wrap:wrap;margin-bottom:1em;row-gap:.5em}.chord-lyric-pair{display:inline-flex;flex-direction:column;white-space:pre;min-width:0}.chord-inner{font-weight:700;line-height:1.2;min-height:1.2em}.lyric-inner{line-height:1.2}.clickable-chord:hover{text-decoration:underline}.tab-block-container{scrollbar-width:thin;scrollbar-color:var(--color-blue-500) transparent}.tab-block-container::-webkit-scrollbar{height:6px}.tab-block-container::-webkit-scrollbar-thumb{background-color:var(--color-blue-500);border-radius:10px}.tab-block-container pre{word-wrap:normal;overflow-wrap:normal}.pages{display:flex;flex-direction:column;align-items:center;padding-bottom:50vh}.folha{position:relative;background-color:#fff;box-shadow:0 0 8px #0003;box-sizing:border-box;margin:auto auto 20pt;display:flex;flex-direction:column;flex-shrink:0;padding:40pt}.folha:last-child{margin-bottom:0}.cifra_header{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;margin-bottom:20pt}.cifra_header .left{text-align:left}.cifra_header .right{text-align:right}.pdf-columns{display:grid;gap:30pt;width:100%;flex:1}.pdf-column-content{font-family:FiraCode,monospace!important;font-size:10pt;line-height:1.4;white-space:pre}.cifra_header h1,.cifra_header h2,.cifra_header small{font-family:Inter,sans-serif!important}@media print{@page{size:A4 portrait;margin:15mm}.pdf-viewer-page .pdf-controls,.pdf-viewer-page .pdf-viewer-header,.pdf-preview-controls,.pdf-preview-header,.app-header,.mobile-pdf-controls{display:none!important}html,body{font-size:2em!important;padding:0!important;margin:0!important;background:#fff!important}.pdf-preview-container,.pdf-content-area,.pages{display:block!important;overflow:visible!important;padding:0!important;margin:0 auto!important;background:#fff!important;width:100%!important;max-width:none!important;transform:none!important}.folha{width:21cm!important;min-height:29.7cm!important;height:auto!important;padding:0!important;margin:0 auto!important;box-shadow:none!important;background:#fff!important;display:block!important;page-break-before:always!important;page-break-inside:avoid!important;page-break-after:always!important}.folha:first-child{page-break-before:auto!important}.folha:last-child{page-break-after:auto!important}.cifra_header{margin-bottom:15pt!important;page-break-inside:avoid!important}.pdf-columns{-moz-column-fill:auto!important;column-fill:auto!important;-moz-column-break-inside:avoid!important;break-inside:avoid-column!important;height:auto!important}}.fretboard-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fretboard-modal-header{display:flex;justify-content:center;align-items:center;margin-bottom:20px;position:relative}.fretboard-modal-header h3{margin:0;font-size:1.4rem;font-weight:600;color:#3b82f6;text-transform:uppercase;letter-spacing:1px}.fretboard-modal-header button{position:absolute;right:-10px;top:-5px}.fretboard-display-wrapper{display:flex;align-items:center;justify-content:center;gap:20px}.fretboard-content-with-info{color:var(--text-primary);background:var(--bg-primary);border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:center;flex:1;min-height:320px}.fretboard-content-with-info svg{width:100%;height:auto;max-height:280px}.fretboard-nav-button{background:#3b82f6;color:#fff;border:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #3b82f64d}.fretboard-nav-button:hover:not(:disabled){background:#2563eb;transform:scale(1.1)}.fretboard-nav-button:active:not(:disabled){transform:scale(.95)}.fretboard-nav-button:disabled{background:#333;color:#666;cursor:not-allowed;box-shadow:none;opacity:.5}.fretboard-variation-info{margin-top:15px;font-size:.85rem;font-weight:700;color:#aaa;background:#1e1e1e;padding:6px 16px;border-radius:20px;border:1px solid #333}.no-chord-message{color:#ef4444;text-align:center;font-size:.9rem;padding:40px 0}.chord-name{text-align:center}.btn-icon-compact{color:var(--color-text)}.flex-row,.flex-column{display:flex;flex-direction:row}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-xs{gap:var(--spacing-xs)}.align-items-center{align-items:center}.preview-title{text-align:center;margin:auto}.preview-subtitle{display:flex;justify-content:center;text-align:center;margin:auto}.preview-more-options-sheet-content{display:flex;flex:1;flex-direction:column;gap:var(--spacing-sm)}.guest .preview-container{padding:var(--spacing-md)}.preview-container .chords-lyrics-renderer,.textarea-editor{font-size:16px}.preview-controls-compact{display:flex;padding:var(--spacing-md);align-items:center;gap:10px}.preview-controls-compact button{padding:var(--spacing-sm)}.preview-controls-compact .current-key{display:block;width:40px;text-align:center}.align-items-center{display:flex;align-items:center;justify-content:center}span.detected-key-info,.preview-info.preview-info{display:flex;align-items:center;justify-content:center;gap:8px}@media (max-width: 1024px){.preview-container{padding:var(--spacing-md);padding-bottom:90px}}.toast-download{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:8px;box-shadow:0 4px 8px #0003;z-index:1000;font-size:.9em;animation:fadeInOut 8s forwards;white-space:nowrap;text-align:center;min-width:250px;justify-content:space-between}.toast-download.info{background-color:#2196f3;color:#fff}.toast-download.success{background-color:#4caf50;color:#fff}.toast-download.error{background-color:#f44336;color:#fff}.toast-download .toast-content{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.toast-progress{width:100%;height:4px;background-color:#ffffff4d;border-radius:2px;overflow:hidden}.toast-progress div{height:100%;background-color:#fff;transition:width .3s ease-out;border-radius:2px}.toast-download .btn-open{background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.5);padding:6px 12px;border-radius:6px;cursor:pointer;text-decoration:none;transition:background-color .3s ease,border-color .3s ease;font-size:.85em;flex-shrink:0}.toast-download .btn-open:hover{background-color:#ffffff4d;border-color:#fffc}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(20px)}10%{opacity:1;transform:translate(-50%) translateY(0)}90%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-20px)}}.btn-base.loading{cursor:not-allowed;opacity:.7;background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:20px 20px;animation:loading-stripe 1s linear infinite}@keyframes loading-stripe{0%{background-position:0 0}to{background-position:20px 20px}}@media (max-width: 600px){.toast-download{left:50%;transform:translate(-50%);width:calc(100% - 40px);flex-direction:column;align-items:center;right:auto}.toast-download .toast-content{align-items:center;text-align:center;width:100%}.toast-progress{width:80%}.toast-download .btn-open{margin-top:10px}}.pdf-preview-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.pdf-preview-content{background-color:#f1f1f1;color:var(--color-text-dark);border-radius:none;box-shadow:0 10px 20px var(--color-shadow-light);display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden;animation:fadeInScaleUp var(--transition-speed) ease-out forwards;border:1px solid var(--color-border)}.pdf-preview-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--border-color);flex-wrap:wrap;gap:10px}.pdf-preview-header h3{margin:0;font-size:1.5em;color:var(--header-color);flex-grow:1}.preview-header-mobile{padding:var(--spacing-sm) var(--spacing-md)}.pdf-preview-controls label{font-size:.9em;white-space:nowrap}.pdf-preview-controls .input-small,.pdf-preview-controls .select-small,.pdf-preview-controls .color-input{padding:6px 8px;border-radius:var(--border-radius-sm);border:1px solid var(--border-color);background-color:var(--input-background);color:var(--text-color);font-size:.9em}.pdf-preview-controls .color-input{width:40px;height:28px;padding:2px}.pdf-content-area{flex-grow:1;overflow-y:auto;padding:0}.pdf-simulated-print-container{background-color:#fff;padding:50pt;margin:20px auto;width:595pt;min-height:842pt;box-shadow:0 4px 12px #0000001a;overflow-y:auto;flex-grow:1;display:flex;flex-direction:column;-moz-column-count:var(--pdf-columns, 1);column-count:var(--pdf-columns, 1);-moz-column-gap:30pt;column-gap:30pt;line-height:1.5;color:var(--pdf-text-color, #000000)}.pdf-simulated-print-container h3.pdf-title-simulated{font-size:calc(var(--pdf-font-size, 10pt) * 1.6);font-weight:700;text-align:left;margin-bottom:.5em;color:var(--pdf-text-color, #000000);-moz-column-break-after:avoid;break-after:avoid;column-break-after:avoid}.pdf-simulated-print-container p.pdf-artist-simulated,.pdf-simulated-print-container p.pdf-key-simulated{font-size:calc(var(--pdf-font-size, 10pt) * 1.1);text-align:left;margin-bottom:1em;color:var(--pdf-text-color, #000000);-moz-column-break-after:avoid;break-after:avoid;column-break-after:avoid}.pdf-simulated-print-container .chord-line-pdf,.pdf-simulated-print-container .lyric-line-pdf,.pdf-simulated-print-container .comment-line-pdf,.pdf-simulated-print-container .plain-text-line-pdf,.pdf-simulated-print-container .line-group-pdf,.pdf-simulated-print-container .interleaved-line-pdf,.pdf-simulated-print-container .standalone-chords-line-pdf,.pdf-simulated-print-container .section-annotation-pdf{margin-bottom:.7em;page-break-inside:avoid;column-break-inside:avoid}.pdf-simulated-print-container .annotation-chord-pdf{font-weight:700;color:var(--pdf-chord-color, #2463eb)}.pdf-simulated-print-container .section-annotation-pdf{font-weight:700;text-align:left;margin-top:1.5em;margin-bottom:1em;font-size:calc(var(--pdf-font-size, 10pt) * 1.2);column-break-before:always;page-break-inside:avoid;column-break-inside:avoid}.pdf-simulated-print-container .lyric-line-pdf,.pdf-simulated-print-container .plain-text-line-pdf,.pdf-simulated-print-container .comment-line-pdf,.pdf-simulated-print-container .interleaved-line-pdf{text-align:justify}.pdf-simulated-print-container .chord-line-pdf{text-align:left}.pdf-preview-mobile .pdf-preview-content{width:95%;height:95%;max-width:none;max-height:none;margin:0;border-radius:0;display:flex;flex-direction:column}.pdf-preview-mobile .pdf-preview-header{flex-shrink:0;padding:0;margin:0}.pdf-preview-mobile .pdf-preview-controls{flex-wrap:wrap;justify-content:center;gap:8px}.pdf-preview-mobile .pdf-simulated-print-container{flex-grow:1;width:auto;max-height:100%;padding:20pt;font-size:var(--pdf-font-size-mobile, 9pt)}.pdf-content-area .mobile-pdf-action .mobile-pdf-text{margin-bottom:1em;font-size:1em;color:var(--text-color-secondary);text-align:center}.pdf-content-area .mobile-pdf-action .btn-large{padding:12px 24px;font-size:1.1em}.pdf-error-message{text-align:center;margin-top:20px;color:var(--danger-color);font-weight:700}.pdf-simulated-print-container.custom-scrollbar::-webkit-scrollbar{width:8px;height:8px}.pdf-simulated-print-container.custom-scrollbar::-webkit-scrollbar-track{background:var(--background-color-dark);border-radius:4px}.pdf-simulated-print-container.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:4px}.pdf-simulated-print-container.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--primary-color-dark)}.pdf-preview-mobile .btn-small{padding:8px 12px;font-size:.8em}@media (max-width: 768px){.pdf-preview-content{padding:15px}.pdf-preview-header{flex-direction:column;align-items:flex-start;gap:8px}.pdf-preview-controls{width:100%;justify-content:space-around}.pdf-simulated-print-container{padding:15pt;width:100%;margin:10px auto}}.pdf-viewer{font-family:Fira Code,monospace;font-size:10pt;color:#000;margin:40px}.header .title{font-weight:700;font-size:18pt;margin-bottom:4px}.header .artist{font-weight:400;font-size:10pt;color:#2463eb;margin-bottom:10px}.header .info{font-size:10pt;margin-bottom:20px}.content.two-columns{display:flex;gap:20px}.column{flex:1;display:flex;flex-direction:column;gap:6px}.section{display:block}.section.blank{height:15px}.section.annotation{display:flex;gap:4px;font-weight:700;font-size:9pt}.section.chord-lyric .chords{display:flex;gap:8px;font-weight:700;color:#2463eb}.section.chord-lyric .lyrics{margin-top:2px}.section.plain-text{font-weight:400}p.pdf-key-info-simulated{margin-bottom:1em}.pdf-preview-container{position:relative;height:100%;overflow:auto}.pdf-loading-message{text-align:center;margin-top:20px;font-style:italic;color:var(--text-color-secondary)}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;display:flex;justify-content:center;align-items:center;z-index:9999;font-size:1.2rem;color:#333}.pdf-preview-content{color:var(--color-text-dark);border-radius:none;box-shadow:0 10px 20px var(--color-shadow-light);display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden;animation:fadeInScaleUp var(--transition-speed) ease-out forwards;border:1px solid var(--color-border)}.pdf-content-area{flex-grow:1;overflow-y:auto;padding:1rem;display:flex;justify-content:center;align-items:flex-start}.toggle-container{display:flex;align-items:center;justify-content:flex-start;gap:8px}.toggle-icon{font-size:24px;color:#ccc}.current-playing-info{background:var(--bg-secondary);padding:4px 8px;border-radius:6px;border:1px solid var(--border-color)}.current-key{color:var(--accent-color);font-size:1.1em}.preview-header-desktop{background:var(--bg-secondary);padding:20px;border-radius:16px;margin-bottom:20px;border:1px solid var(--border-color)}.header-top-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.preview-controls-bar{display:flex;gap:15px;align-items:center}.control-card{display:flex;align-items:center;background:var(--bg-tertiary);padding:6px 15px;border-radius:12px;gap:15px;box-shadow:0 2px 8px #0000000d}.control-item{display:flex;flex-direction:column}.control-item .label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:2px}.current-key-badge{color:var(--accent-color);font-size:1.2rem}.transpose-controls{display:flex;align-items:center;gap:10px}.transpose-controls button{background:none;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;display:flex;padding:4px;color:var(--text-primary)}.view-mode-card{display:flex;background:var(--bg-tertiary);padding:4px;border-radius:10px;gap:2px}.mode-btn{padding:6px 12px;border-radius:8px;border:none;background:transparent;cursor:pointer;font-size:13px;transition:all .2s}.mode-btn.active{background:var(--bg-primary);color:var(--accent-color);box-shadow:0 2px 4px #0000001a}.playlist-nav-banner{display:flex;align-items:center;justify-content:space-between;background-color:var(--bg-secondary);padding:.75rem 1rem;border-radius:8px;margin-bottom:1.5rem;border:1px solid var(--border-color)}.playlist-nav-banner .nav-info{font-size:.9rem;color:var(--text-secondary);text-align:center}.playlist-nav-banner .btn-nav{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--border-radius-lg);background:var(--bg-tertiary);color:var(--text-primary);border:none;cursor:pointer;transition:opacity .2s;font-weight:500}.playlist-nav-banner .btn-nav:disabled{opacity:.4;cursor:not-allowed}.playlist-nav-banner .btn-nav:hover:not(:disabled){filter:brightness(1.1)}.preview-header-mobile{padding:.5rem;border-bottom:1px solid var(--border-color)}.playlist-badge{display:block;font-size:.7rem;text-transform:uppercase;text-align:center;color:var(--accent-purple);margin-top:2px}.nav-group-mobile{display:flex;align-items:center;gap:2px}.v-divider{width:1px;height:20px;background-color:var(--border-color);margin:0 4px}.btn-icon-compact{display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);background:transparent;border:1px solid transparent;color:var(--text-primary);cursor:pointer}.btn-icon-compact:active{background:var(--bg-secondary)}.btn-icon-compact:disabled{color:var(--text-tertiary);opacity:.5}.playlist-nav-sheet{background:var(--bg-secondary);border-radius:12px;margin-bottom:1rem}.playlist-nav-sheet label{display:block;margin-bottom:.5rem;font-size:.85rem;font-weight:600;color:var(--text-secondary)}.gap-sm{gap:8px}.flex-1{flex:1}.bottom-sheet-content.is-open .control-group{display:flex;justify-content:space-between;align-items:center}.playlist-navigation-overlays{position:fixed;top:50%;left:0;right:0;pointer-events:none;display:flex;justify-content:space-between;align-items:center;padding:0 10px;z-index:100;transform:translateY(-50%)}.nav-overlay-btn{pointer-events:auto;background:rgba(var(--bg-rgb),.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--border-color);color:var(--text-primary);width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 4px 12px #0003;cursor:pointer}.nav-overlay-btn:hover:not(:disabled){background:var(--accent-color);color:#fff;transform:scale(1.1)}.nav-overlay-btn:disabled{opacity:0;cursor:default}@media (max-width: 768px){.nav-overlay-btn{width:50px;height:50px;background:rgba(var(--bg-rgb),.9)}.playlist-navigation-overlays{top:90px;bottom:auto;transform:none}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--color-overlay-dark);display:flex;justify-content:center;align-items:center;z-index:2000;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:1;visibility:visible;transition:opacity var(--transition-speed) ease-in-out,visibility var(--transition-speed) ease-in-out}@keyframes fadeInScaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.pdf-preview-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);background-color:var( --color-background-light );border-bottom:1px solid var(--color-border);flex-shrink:0;position:relative}.pdf-preview-header h3{margin:0;font-size:1.3rem;font-weight:600;color:var(--color-text-dark)}.pdf-preview-controls .control-group{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.9rem;color:var(--color-text-medium)}.pdf-preview-controls label{font-weight:500;white-space:nowrap}.pdf-preview-controls .input-small,.pdf-preview-controls .select-small{width:70px;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-surface);color:var(--color-text-dark);font-size:.9rem;transition:border-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.pdf-preview-controls .input-small:focus,.pdf-preview-controls .select-small:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.3)}.pdf-preview-controls .app-close-button{padding:var(--spacing-xs);font-size:1.5rem;color:var(--color-text-medium);transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease;border-radius:50%;width:36px;height:36px;position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);box-shadow:none}.pdf-preview-controls .app-close-button:hover{background-color:var(--color-background-medium);color:var(--color-text-dark)}.pdf-iframe-container{flex-grow:1;display:flex;justify-content:center;align-items:center;padding:var(--spacing-md);background-color:var( --color-background-light );overflow:hidden}.pdf-iframe-container iframe{width:100%;height:100%;border:1px solid var(--color-border);border-radius:var(--border-radius-base);box-shadow:inset 0 0 8px #0000001a}.pdf-preview-footer{display:flex;justify-content:flex-end;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-background-light);border-top:1px solid var(--color-border);flex-shrink:0}.preview-title{font-size:1.8rem;font-weight:700;color:var(--color-text-dark);margin-bottom:var(--spacing-sm);text-align:center}.preview-info{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-md);font-size:.9rem;color:var(--color-text-medium);padding-bottom:var(--spacing-md)}.preview-info span strong{color:var(--color-primary);font-weight:600}html.dark .preview-info{border-bottom-color:var(--color-background-medium)}.display-mode-options,.action-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.preview-container{flex-grow:1;overflow-y:auto;line-height:1.6;white-space:pre-wrap;word-break:break-word}html.dark .preview-container{background-color:var(--color-background-medium);border-color:var(--color-border)}.line-group{display:flex;flex-direction:column}.chord-line{font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-xs);line-height:1.2;font-size:1em}.lyric-line{color:var(--color-text-dark);line-height:1.5}.preview-container .comment-line,.preview-container .section-annotation{color:var(--color-text-light);text-align:left;margin-top:var(--spacing-xs)}.plain-text-line{color:var(--color-text-dark)}.blank-line{height:var(--spacing-sm);width:100%}.standalone-chords-line{font-weight:700;color:var(--color-primary);line-height:1.3}.chord-text{cursor:pointer;transition:color var(--transition-speed),text-decoration-color var(--transition-speed)}.chord-text:hover{color:var(--color-accent);text-decoration-color:var(--color-accent)}.chord-text.annotation-chord{text-decoration:none;font-style:normal}.chord-text.annotation-chord:hover{color:var(--color-primary)}@media (min-width: 768px){.pdf-preview-header{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg)}.pdf-preview-header h3{text-align:left;margin-bottom:0}.pdf-preview-controls{flex-wrap:nowrap;justify-content:flex-end}.pdf-preview-controls .app-close-button{position:static;margin-left:var(--spacing-md)}.pdf-preview-footer{flex-direction:row;justify-content:flex-end}}@media (max-width: 767px){.pdf-preview-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-md)}.pdf-preview-header h3{width:100%;text-align:center;margin-bottom:var(--spacing-sm)}.pdf-preview-controls{width:100%;justify-content:space-between;gap:var(--spacing-sm)}.pdf-preview-controls .control-group{flex-grow:1;justify-content:center}.pdf-preview-controls .btn-small{flex-grow:1}.pdf-preview-controls .app-close-button{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm)}.pdf-preview-footer{flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-md)}.pdf-preview-footer .btn-base{width:100%}}html.dark .modal-overlay{background-color:var( --color-overlay-light )}html.dark .pdf-preview-content{background-color:var(--color-surface);box-shadow:0 10px 20px var(--color-shadow-light);border-color:var(--color-border)}html.dark .pdf-preview-header{background-color:var( --color-background-medium );border-bottom-color:var(--color-border)}html.dark .pdf-preview-header h3,html.dark .pdf-preview-controls label{color:var(--color-text-dark)}html.dark .pdf-preview-controls .input-small,html.dark .pdf-preview-controls .select-small{background-color:var( --color-background-light );color:var(--color-text-dark);border-color:var(--color-border)}html.dark .pdf-preview-controls .input-small:focus,html.dark .pdf-preview-controls .select-small:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.3)}html.dark .pdf-preview-controls .app-close-button{color:var(--color-text-medium)}html.dark .pdf-preview-controls .app-close-button:hover{background-color:var(--color-background-medium);color:var(--color-text-dark)}html.dark .pdf-iframe-container{background-color:var( --color-background-medium )}html.dark .pdf-iframe-container iframe{border-color:var(--color-border);box-shadow:inset 0 0 8px #ffffff0d}html.dark .pdf-preview-footer{background-color:var( --color-background-medium );border-top-color:var(--color-border)}.pdf-content-area{font-family:Fira Code,monospace;line-height:1.4;color:var(--text-primary);background:#fff}.pdf-page-sheet{width:210mm;height:297mm;padding:40pt;margin:10px auto;box-shadow:var(--modal-box-shadow);background:#fff;position:relative;overflow:hidden}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:3000}.fretboard-modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--color-border);margin-bottom:10px}.fretboard-modal-header h3{margin:0;color:var(--text-primary);font-size:1.5em}.fretboard-modal-header .close-button{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;font-size:1.5em;color:var(--text-secondary);transition:color var(--transition-speed)}.fretboard-modal-header .close-button:hover{color:var(--color-primary)}.fretboard-display-area{display:flex;justify-content:center;align-items:center}.chord-navigator-container{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}.fretboard-wrapper{display:flex;justify-content:center;flex-direction:column;align-items:center;gap:10px}.fretboard-nav-button{background-color:var(--button-nav-bg);color:var(--button-nav-text);border:none;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color var(--transition-speed) var(--transition-timing);flex-shrink:0;padding:0}.fretboard-nav-button:hover:not(:disabled){background-color:var(--button-nav-hover-bg)}.fretboard-nav-button:disabled{background-color:var(--button-nav-disabled-bg);color:var(--button-nav-disabled-text);cursor:not-allowed;opacity:.5}.fretboard-variation-info{color:var(--text-muted);font-size:.9em;text-align:center;margin-top:5px}.no-chord-message{color:var(--text-muted);text-align:center}@media (max-width: 600px){.fretboard-modal-content{max-width:95%;padding:15px}.chord-navigator-container{flex-direction:column;gap:15px}.fretboard-nav-button.prev-button{order:-1}.fretboard-nav-button.next-button{order:1}}.pdf-preview-controls{position:fixed;top:80px;right:30px;padding:20px;background-color:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:8px;z-index:999}.mobile-pdf-controls{position:fixed;width:100%;bottom:0;left:0;padding:20px;background-color:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:14px 14px 0 0;z-index:1000}.pdf-preview-controls .controls-container,.mobile-pdf-controls .controls-container{display:flex;flex-direction:column;gap:.1rem}.mobile-pdf-controls .controls-container{max-height:70vh;overflow-y:auto;padding-bottom:80px}.pdf-preview-controls .control-group,.mobile-pdf-controls .control-group{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}.pdf-preview-controls .control-group.pdf-color-controls,.mobile-pdf-controls .control-group.pdf-color-controls{flex-direction:column;align-items:flex-start}.pdf-preview-controls .button-group-modal,.mobile-pdf-controls .button-group-modal{display:flex;justify-content:space-between;align-items:center;gap:5px;flex-grow:1}@media (max-width: 1025px){.button-group-modal button{width:100%}}.pdf-preview-controls .pdf-font-controls,.mobile-pdf-controls .pdf-font-controls{display:flex;align-items:center;gap:4px;background-color:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:8px;flex-grow:1;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md)}.pdf-preview-controls .pdf-font-text,.mobile-pdf-controls .pdf-font-text{min-width:50px;text-align:center;display:inline-block}.pdf-preview-controls .color-options-group,.mobile-pdf-controls .color-options-group{display:flex;align-items:center;gap:8px}.color-option-button{width:14px;height:14px;border-radius:50%;padding:1px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--bg-tertiary);transition:all .2s ease-in-out}.color-input-custom{width:24px;height:24px;border-radius:50%;padding:2px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.color-input-custom::-webkit-color-swatch-wrapper{padding:0}.color-input-custom::-webkit-color-swatch{border:none;border-radius:50%}.switch{position:relative;cursor:pointer;display:flex;align-items:center;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:999px;box-sizing:border-box;background:#ffffff08;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 2px 5px #0000004d;transition:background-color .4s cubic-bezier(.4,0,.2,1)}.switch:active .slider{transform:scale(.9)!important}.switch:hover{filter:brightness(1.2);box-shadow:inset 0 2px 5px #0000004d,0 0 10px #ffffff1a}.switch .slider{border-radius:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;background:#fff;box-shadow:0 4px 10px #0006;border:1px solid rgba(0,0,0,.1);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.switch .icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:color .3s ease}.switch .icon svg{width:100%!important;height:100%!important;display:block}.theory-container{background-color:var(--bg-primary);color:var(--text-primary);padding:60px 80px;width:100%;min-height:100vh;font-family:var(--font-sans);line-height:1.7}.theory-content-wrapper{max-width:1144px;margin:0 auto}.btn-close{background:none;border:1px solid var(--border-primary);padding:8px 15px;border-radius:8px;font-size:.9em;cursor:pointer;color:var(--text-secondary);margin-bottom:20px;transition:all .2s}.btn-close:hover{background-color:var(--bg-secondary);border-color:var(--brand-primary);color:var(--brand-primary-dark)}.theory-container p{margin-bottom:15px}.theory-container ul{margin-bottom:15px;list-style-type:none;padding-left:0}.theory-container li{margin-bottom:8px}@media (max-width: 768px){.theory-container{padding:var(--spacing-lg) var(--spacing-md)}}.theory-container h2{font-family:var(--font-sans);color:var(--brand-primary-dark);border-bottom:3px solid #93c5fd;padding-bottom:15px;margin-bottom:30px;font-weight:800;font-size:2.8em;display:flex;align-items:center;gap:12px}.theory-container h3{font-family:var(--font-sans);color:var(--brand-primary);margin-top:50px;margin-bottom:25px;font-weight:700;font-size:2em;border-left:4px solid var(--color-red-500);padding-left:15px}.theory-container h4{font-family:var(--font-sans);color:var(--text-primary);margin-top:30px;margin-bottom:15px;font-weight:600;font-size:1.5em;padding-bottom:5px;border-bottom:1px solid var(--border-primary)}.theory-container strong{font-weight:700}.function-tag{display:inline-block;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.85em;font-weight:600}.tag-tônica{background-color:#d1fae5;color:var(--color-green-700)}.tag-subdominante{background-color:#fef3c7;color:var(--color-yellow-800)}.tag-dominante{background-color:#fee2e2;color:var(--color-red-700)}.roman-numeral{color:var(--color-blue-500);font-weight:700}.substitutes-cell,.feeling-cell{color:var(--text-secondary);white-space:normal}.tip-box{background-color:var(--bg-tertiary);border:1px solid var(--border-primary);padding:var(--spacing-md);border-radius:var(--border-radius-base);margin-top:25px;display:flex;gap:10px;align-items:flex-start}.tip-icon{font-size:1.5em;line-height:1}.example-block{background-color:var(--bg-tertiary);padding:var(--spacing-md);border-left:5px solid var(--color-red-500);border-radius:var(--border-radius-sm);margin-top:25px}.example-block p{margin-top:10px;margin-bottom:0}.formula-inline{font-family:var(--font-mono);font-weight:600}.theory-table{width:100%;border-collapse:collapse;border-radius:var(--border-radius-base);overflow:hidden;box-shadow:0 4px 15px var(--shadow-primary)}.theory-table th{background-color:var(--brand-primary);color:var(--color-white);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:12px 15px;text-align:left;border-bottom:1px solid var(--border-primary);white-space:nowrap}.theory-table td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--border-primary);white-space:nowrap}.theory-table td.allow-wrap{white-space:normal}.theory-table tr:nth-child(2n){background-color:var(--bg-tertiary)}.theory-table tr:hover{background-color:var(--bg-tertiary)}.theory-cards-mobile{display:none}.theory-table-desktop{display:block}@media (max-width: 768px){.theory-table-desktop{display:none}.theory-cards-mobile{display:flex;flex-direction:column;gap:20px;padding:5px 0}.harmonic-card{background-color:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--border-radius-base);box-shadow:0 2px 8px #0000000d;padding:var(--spacing-md)}.card-header{font-size:24px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding-bottom:10px;margin-bottom:10px;border-bottom:2px solid var(--color-blue-300)}.chord-name-mobile{font-weight:800;font-size:1.2em;color:var(--brand-primary-dark);line-height:1}.card-row{display:flex;gap:15px;margin-bottom:15px}.card-item{display:flex;flex-direction:column;gap:4px;padding:5px 0;line-height:1.3}.feeling-cell-mobile{border-top:1px dashed var(--border-primary);padding-top:15px}}.fretboard-container{background-color:#1f2937;padding:20px;border-radius:10px;color:#fff;font-family:var(--font-mono);overflow-x:auto;margin:20px 0;box-shadow:0 4px 10px #0006}.fretboard-title{font-size:1.2em;font-weight:700;color:var(--color-red-500);margin-bottom:10px;text-align:center;text-transform:uppercase}.fretboard-tabs pre{margin:0;padding:0;line-height:1.2;font-size:.9em;white-space:pre;color:#a0aec0}.fretboard-tabs .highlight{color:#48bb78;font-weight:700}.fretboard-tabs .natural-7th{color:#3b82f6;font-weight:700}.fretboard-tabs .alteration{color:var(--color-red-500);font-weight:700}.theory-content-container{padding:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;max-width:100%;margin:0 auto}.controls-container{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.controls-container>div{width:100%}select{padding:10px;border-radius:6px;border:1px solid var(--border-primary);font-size:16px;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bg-tertiary)}label{font-weight:700;margin-bottom:5px;display:block}.scale-info-box{margin-top:20px;padding:15px;background:#333;border-radius:10px;color:#fff}.scale-info-box h3{margin-top:0;color:#a7f3d0}@media (min-width: 768px){.theory-content-container{padding:30px}.controls-container{flex-direction:row;justify-content:flex-start}.controls-container>div{width:45%}}.dualpane-container{display:grid;grid-template-columns:var(--splitter-width, 50%) 2px 1fr;width:100%;padding-bottom:120px}.dualpane-pane{height:100%;position:relative}.dualpane-resizer-container{width:10px;margin:0 -5px;cursor:col-resize;z-index:100;display:flex;justify-content:center;transition:background-color .2s}.dualpane-resizer-line{width:2px;height:100%;position:relative;background-color:var(--color-border);transition:all .2s}.dualpane-resizer-line:after{content:"⋮";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--color-text-muted);font-size:12px}.dualpane-resizer-container:hover .dualpane-resizer-line,.is-resizing .dualpane-resizer-line{background-color:var(--color-primary);width:4px;box-shadow:0 0 10px var(--color-primary-alpha)}.editor-pane{min-width:0;width:100%}.editor-container{height:100%}.previewer-pane{position:relative;height:100%;overflow-y:auto;overflow-x:hidden;min-width:0;padding:var(--spacing-md)}.dualpane-pane.editor-pane,.dualpane-pane.previewer-pane{padding:var(--spacing-md)}.dualpane-pane .preview-container,.dualpane-pane .editor-container{padding:var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--border-radius-lg)}.is-resizing{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.is-resizing .dualpane-pane{pointer-events:none}.dualpane-mobile{width:100%;height:100%}.containers{overflow:auto;height:100%}.beat-bars-container{display:flex;gap:4px;width:100%;height:10px;padding:0 5px;justify-content:center;align-items:center}.beat-bar{flex-grow:1;height:100%;background-color:#fff3;border-radius:2px;transition:background-color .1s ease-out}.beat-bar.downbeat-active{background-color:var(--color-yellow-500, #ffd600)}.beat-bar.upbeat-even-active{background-color:var(--color-white, #f7f7f7)}.beat-bar.upbeat-odd-active{background-color:var(--color-blue-500, #007bff)}.live-mode-bpm-indicator-container.minimized .beat-bars-container{display:none}:root{--bpm-accent: #ffd600;--bpm-bg: rgba(20, 20, 20, .85);--bpm-border: rgba(255, 255, 255, .1)}.live-mode-bpm-indicator-container{position:fixed;background:var(--bpm-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--bpm-border);border-radius:24px;color:#fff;z-index:2000;box-shadow:0 8px 32px #0006;overflow:hidden;transition:left .4s cubic-bezier(.18,.89,.32,1.28),top .4s cubic-bezier(.18,.89,.32,1.28),width .3s ease,height .3s ease}.live-mode-bpm-indicator-container.minimized{width:140px;height:48px;padding:4px 8px}.minimized-content{display:flex;align-items:center;justify-content:space-between;height:100%;width:100%}.bpm-play-circle{width:34px;height:34px;border-radius:50%;border:none;background:#333;color:var(--bpm-accent);display:flex;align-items:center;justify-content:center;transition:all .2s}.bpm-info-mini{display:flex;flex-direction:column;align-items:center;flex-grow:1}.bpm-value{font-weight:800;font-size:1.1rem;line-height:1}.bpm-label{font-size:.6rem;opacity:.6;letter-spacing:1px}.live-mode-bpm-indicator-container.maximized{width:220px;padding:16px;border-radius:28px}.max-header{display:flex;justify-content:space-between;margin-bottom:15px;opacity:.7}.max-title{font-size:.7rem;text-transform:uppercase;letter-spacing:1px}.bpm-large{font-size:3.5rem;font-weight:900;text-align:center;position:relative;margin:10px 0;color:var(--bpm-accent)}.tap-hint{position:absolute;bottom:-5px;left:50%;transform:translate(-50%);font-size:.6rem;background:#ffffff1a;padding:2px 8px;border-radius:10px;color:#fff}.controls-grid{display:flex;align-items:center;gap:12px;margin-top:20px}.main-play-btn{flex-grow:1;height:45px;border-radius:15px;border:none;background:var(--bpm-accent);color:#000;font-size:1.5rem;display:flex;padding:0;align-items:center;justify-content:center}.secondary-actions{display:flex;flex-direction:column;gap:5px}.action-btn{background:#ffffff0d;border:none;color:#fff;padding:8px;border-radius:10px}.action-btn.active{color:var(--bpm-accent);background:#ffd6001a}.live-mode-bpm-indicator-container button{padding:0}@keyframes ring-strong{0%{box-shadow:0 0 #ffd60099;transform:scale(1)}10%{transform:scale(1.1)}to{box-shadow:0 0 0 15px #ffd60000;transform:scale(1)}}.pulse-strong{background:var(--bpm-accent)!important;color:#000!important;animation:ring-strong .2s ease-out}.pulse-soft{background:#555!important;transform:scale(1.05)}.drag-handle-pill{position:absolute;top:0;left:0;width:100%;height:20px;display:flex;justify-content:center;align-items:center;opacity:.3;cursor:grab;z-index:10}:root{--safe-area-bottom: env(safe-area-inset-bottom, 0px);--hub-bg: rgba(30, 41, 59, .85);--hub-blur: blur(15px);--border-glass: rgba(255, 255, 255, .12)}.mobile-live-mode-container{display:flex;flex-direction:column;height:100dvh;width:100%;overflow:hidden;background-color:var(--color-bg-primary);position:fixed;font-family:Inter,sans-serif;touch-action:none}.mobile-live-mode-content{width:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:var(--bg-secondary);padding:80px 20px calc(220px + var(--safe-area-bottom)) 20px;touch-action:pan-y;scroll-behavior:auto!important}.preview-header-mobile-live{margin-bottom:30px}.song-title-mini{font-size:1.4rem;font-weight:700;display:block}.song-artist-mini{font-size:.9rem}.mobile-live-mode-exit-button-fixed{position:fixed;top:15px;left:15px;z-index:1200;background:var(--hub-bg);backdrop-filter:var(--hub-blur);-webkit-backdrop-filter:var(--hub-blur);color:#fff;border:1px solid var(--border-glass);border-radius:50%;width:45px;height:45px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000004d}.mobile-live-menu-hub.unified{position:fixed;bottom:calc(15px + var(--safe-area-bottom));left:50%;transform:translate(-50%);z-index:1100;display:flex;flex-direction:column;align-items:center;width:auto;min-width:280px;max-width:95%;background:var(--hub-bg);backdrop-filter:var(--hub-blur);-webkit-backdrop-filter:var(--hub-blur);padding:0 16px 12px;border-radius:32px;border:1px solid var(--border-glass);box-shadow:0 12px 40px #00000080;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease}.mobile-live-menu-hub.unified.hidden{transform:translate(-50%,150%);opacity:0}.menu-handle{width:32px;height:4px;background:#fff3;border-radius:2px;margin:4px 0 12px;flex-shrink:0}.playlist-nav-mobile-bar-internal{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#0f172af2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.1);width:-moz-max-content;width:max-content;max-width:90%;min-width:180px;justify-content:space-between;box-shadow:0 4px 15px #0006;pointer-events:auto;z-index:10}.playlist-info-center{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:150px}.playlist-index{font-size:10px;font-weight:700;color:#3b82f6;letter-spacing:.5px}.next-song-preview{font-size:11px;font-weight:500;color:#fff;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}.playlist-nav-mobile-bar-internal button{background:#ffffff0d;border:none;color:#fff;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;transition:background .2s}.playlist-nav-mobile-bar-internal button:active{background:#fff3}.playlist-nav-mobile-bar-internal button:disabled{opacity:.2}.main-menu-row{display:flex;gap:8px;width:100%;justify-content:space-around;align-items:center}.menu-button{background:transparent;border:none;color:#94a3b8;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;padding:4px;transition:all .2s ease}.menu-button span{font-size:10px;font-weight:600}.menu-button.active{color:#fff}.menu-button.active svg{color:#3b82f6;transform:translateY(-2px)}.menu-button:active{transform:scale(.9)}.sub-menu-row{justify-content:space-between!important;padding:4px 0}.main-menu-row .control-group{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.control-group.border-left{border-left:1px solid var(--border-glass)}.control-label{font-size:10px;font-weight:700;color:#fff;opacity:.7;text-transform:uppercase}.control-buttons{display:flex;gap:12px;align-items:center}.control-buttons .menu-button{min-width:40px}.mobile-live-video-wrapper{width:100%;aspect-ratio:16 / 9;background:#000;z-index:1002;box-shadow:0 4px 10px #00000080}.mobile-live-video-wrapper iframe{width:100%;height:100%}.mobile-live-video-wrapper.minimized{position:fixed;top:15px;right:15px;width:160px;z-index:1050;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.2)}.disabled-opacity{opacity:.3;pointer-events:none;filter:grayscale(1)}.menu-button.active-scroll{color:#fbbf24!important}.menu-button.active-scroll svg{filter:drop-shadow(0 0 8px rgba(251,191,36,.4));animation:pulse-scroll 2s infinite}@keyframes pulse-scroll{0%,to{transform:translateY(0)}50%{transform:translateY(2px)}}.scroll-speed-slider-container{display:flex;align-items:center;gap:10px;background:#ffffff0d;padding:8px 12px;border-radius:20px;flex-grow:1}@media (max-width: 360px){.menu-button span{display:none}.mobile-live-menu-hub.unified{min-width:220px}}.sub-menu-row{display:flex;align-items:center;width:100%}.control-actions-group{display:flex;gap:4px;margin-left:8px;padding-left:8px;border-left:1px solid var(--border-glass)}.reset-action{color:#94a3b8!important}.reset-action:active{color:#ef4444!important}.control-label{font-size:9px;margin-bottom:2px}:root{--primary-color-dark: #4a90e2;--secondary-color-dark: #b0bec5;--text-color-dark: #e0e0e0;--bg-color-dark: #1a1a1a;--accent-color: #8bc34a;--text-muted: #9e9e9e;--text-placeholder: #78909c;--color-live-mode-bg: var(--bg-color-dark);--color-live-mode-text: var(--text-color-dark);--color-chord-live-mode: var(--primary-color-dark);--button-primary-main-bg: #4a90e2;--button-primary-main-text: white;--button-primary-main-hover: #357bd8;--button-text: #e0e0e0;--button-hover: #505050;--danger-color: #e57373;--danger-color-darker: #d32f2f;--shadow-color: rgba(0, 0, 0, .4);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px}.live-mode-container{display:flex;flex-direction:column;height:100%;width:100%;background-color:var(--bg-primary);color:var(--text-primary);overflow:hidden;position:fixed;top:0;left:0;z-index:999;font-family:Inter,sans-serif}.live-mode-header{flex-shrink:0;padding:20px;text-align:center;background-color:transparent;position:relative;z-index:10;transition:all .4s cubic-bezier(.4,0,.2,1);margin-top:0}.live-mode-container:has(.visible-controls) .live-mode-header{padding-top:100px}.live-mode-header.hide-header-info{transform:translateY(-50px);opacity:0;pointer-events:none}.live-mode-title{font-size:2.2rem;font-weight:800;margin-bottom:5px;background:linear-gradient(to right,#fff,#888);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.live-mode-key-info{font-size:1.2em;color:var(--text-muted)}.live-mode-key-original,.live-mode-key-current,.live-mode-key-transpose{font-weight:700;color:var(--accent-color)}.live-mode-content-scroll-area{line-height:1.5;padding-bottom:20vh;padding-top:20vh;text-align:left;flex-grow:1;overflow-y:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;font-size:1.125rem;line-height:1.6;transition:font-size .2s ease-in-out;margin-left:auto;margin-right:auto;width:100%;height:100%;box-sizing:border-box;padding:40px 20px;will-change:scroll-position;backface-visibility:hidden;transform:translateZ(0)}.live-mode-content-scroll-area{scroll-behavior:auto!important;overflow-y:auto;will-change:transform;display:flex;flex-direction:column;align-items:center}.live-mode-content-scroll-area.live-mode-font-size-0{font-size:1.25rem;line-height:1.4}.live-mode-content-scroll-area.live-mode-font-size-1{font-size:1.5rem;line-height:1.4}.live-mode-content-scroll-area.live-mode-font-size-2{font-size:1.875rem;line-height:1.5}.live-mode-content-scroll-area.live-mode-font-size-3{font-size:2.25rem;line-height:1.5}.live-mode-content-scroll-area.live-mode-font-size-4{font-size:3rem;line-height:1.6}.live-mode-content-scroll-area.live-mode-font-size-5{font-size:3.75rem;line-height:1.6}.live-mode-content-scroll-area::-webkit-scrollbar{width:8px;background-color:transparent}.live-mode-content-scroll-area::-webkit-scrollbar-thumb{background-color:#fff3;border-radius:4px}.live-mode-content-scroll-area::-webkit-scrollbar-thumb:hover{background-color:#fff6}.live-mode-content-scroll-area .chords-lyrics-renderer{font-family:Fira Code,"monospace",Courier New,Courier,monospace;white-space:pre-wrap;line-height:1.5em;max-width:900px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}.live-mode-content-scroll-area .toggle-group{max-width:900px;margin:auto;gap:var(--spacing-md)}.playlist-nav-fixed{position:fixed;top:50%;transform:translateY(-50%);z-index:9999;background:var(--button-primary-main-bg);color:#fff;border:none;border-radius:50%;padding:10px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.playlist-nav-fixed:hover{background:var(--button-primary-main-hover);scale:1.1}.playlist-nav-fixed.prev{left:20px}.playlist-nav-fixed.next{right:20px}.modal-overlay~.playlist-nav-fixed{display:none}.live-mode-chord-line,.live-mode-chord-line-group .chord-segment{color:var(--color-chord-live-mode);font-weight:700;padding:0 .2em;text-align:left}.live-mode-lyric-line,.live-mode-chord-line-group .lyric-segment{color:var(--color-live-mode-text);text-align:left}.live-mode-annotation-text{color:var(--secondary-color-dark);font-style:italic;margin-top:1rem;margin-bottom:.5rem;text-align:left}.live-mode-annotation-chord{font-weight:700;color:var(--color-chord-live-mode);font-size:1em;padding-left:.2em;padding-right:.2em}.live-mode-annotation-text .text-segment{color:var(--secondary-color-dark);font-style:italic;font-size:1em}.live-mode-empty-song-message{font-size:1.5em;color:var(--text-muted);text-align:center;padding-top:50px}.live-mode-empty-song-sub-message{font-size:.8em;color:var(--text-placeholder);display:block;margin-top:5px}.live-mode-fixed-header-container{top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;z-index:1000;transition:transform .3s ease-out,opacity .3s ease-out}.live-mode-fixed-header-container.hidden-header-controls{transform:translateY(-100%);opacity:0;pointer-events:none}.live-mode-button{background-color:var(--button-primary-main-bg);color:var(--button-primary-main-text);border:none;border-radius:8px;padding:10px 15px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color .2s ease,transform .1s ease,box-shadow .2s ease;min-width:40px;height:40px;box-shadow:0 2px 5px var(--shadow-color)}.live-mode-button:hover{background-color:var(--button-primary-main-hover);box-shadow:0 4px 8px #0000004d}.live-mode-button:active{box-shadow:0 1px 3px #0003}.live-mode-exit-button{background-color:#6c757d;padding:8px 12px}.live-mode-exit-button:hover{background-color:#5a6268}.live-mode-toggle-controls-button{background-color:#6f42c1;padding:8px 12px}.live-mode-toggle-controls-button:hover,.live-mode-button:hover{background-color:#5e35a1}.live-mode-transpose-value{font-weight:700;color:var(--accent-color);min-width:25px;text-align:center}.live-transpose-button{background-color:var(--button-bg);color:var(--button-text);padding:0}.live-transpose-button:hover{background-color:var(--button-hover)}.live-mode-reset-button{background-color:var(--button-bg);color:var(--button-text);padding:8px 12px}.live-mode-reset-button:hover{background-color:var(--button-hover)}.live-mode-footer-controls{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:center;padding:15px 20px;background-color:#1a1a1ae6;box-shadow:0 -2px 10px var(--shadow-color);z-index:990;transition:opacity .3s ease-in-out,transform .3s ease-out}.live-mode-speed-font-controls.control-group{display:flex;flex-wrap:wrap;gap:30px;align-items:center;max-width:900px;width:100%;justify-content:center}.live-mode-control-item{display:flex;align-items:center;gap:10px;color:var(--text-color-dark);font-size:1.1rem;flex-grow:1;justify-content:center}.live-mode-range-input{width:150px;-webkit-appearance:none;height:8px;background:var(--button-hover);border-radius:5px;outline:none;opacity:.7;transition:opacity .2s}.live-mode-range-input:hover{opacity:1}.live-mode-range-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-color-dark);cursor:pointer;box-shadow:0 0 5px #0003;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.live-mode-range-input::-webkit-slider-thumb:hover{background-color:var(--button-primary-main-hover)}.live-mode-range-input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary-color-dark);cursor:pointer;box-shadow:0 0 5px #0003;-moz-transition:background-color .2s ease;transition:background-color .2s ease}.live-mode-range-input::-moz-range-thumb:hover{background-color:var(--button-primary-main-hover)}.live-mode-control-value{font-weight:700;min-width:20px;text-align:center}.live-mode-top-controls-group.visible-controls{opacity:1;pointer-events:auto;transform:translate(-50%)}.live-mode-top-controls-group.hidden-controls{opacity:0;pointer-events:none;transform:translate(-50%) translateY(-20px)}.live-mode-footer-controls.visible-controls{opacity:1;pointer-events:auto;transform:translateY(0)}.live-mode-footer-controls.hidden-controls{opacity:0;pointer-events:none;transform:translateY(20px)}.live-mode-button .button-text-label{display:inline-block}:root{color-scheme:light dark;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-gray-950: #030712;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-blue-50: #eff6ff;--color-blue-100: #dbeafe;--color-blue-200: #bfdbfe;--color-blue-300: #93c5fd;--color-blue-400: #60a5fa;--color-blue-500: #3b82f6;--color-blue-600: #2563eb;--color-blue-700: #1d4ed8;--color-blue-800: #1e40af;--color-blue-900: #1e3a8a;--color-blue-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #fbbf24;--color-yellow-500: #f59e0b;--color-yellow-600: #eab308;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--color-cyan-50: #f0f9ff;--color-cyan-100: #e0f8ff;--color-cyan-200: #cffafe;--color-cyan-300: #a5f3fc;--color-cyan-400: #67e8f9;--color-cyan-500: #06b6d4;--color-cyan-600: #0891b2;--color-cyan-700: #0e7490;--color-cyan-800: #155e75;--color-cyan-900: #164e63;--color-cyan-950: #083344;--color-purple-50: #faf5ff;--color-purple-100: #f3e8ff;--color-purple-200: #e9d5ff;--color-purple-300: #d8b4fe;--color-purple-400: #c084fc;--color-purple-500: #a855f7;--color-purple-600: #9333ea;--color-purple-700: #7e22ce;--color-purple-800: #6b21a8;--color-purple-900: #581c87;--color-purple-950: #3b0764;--color-primary: var(--color-blue-600);--color-surface: #ffffff;--color-white: #ffffff;--color-black: #000000;--color-border: #e0e0e0;--bg-primary: var(--color-gray-50);--bg-secondary: var(--color-surface);--bg-tertiary: var(--color-gray-200);--bg-input: var(--color-surface);--text-primary: var(--color-gray-950);--text-secondary: var(--color-gray-600);--text-muted: var(--color-gray-400);--text-placeholder: var(--color-gray-400);--brand-primary: var(--color-primary);--brand-primary-dark: var(--color-blue-700);--brand-primary-active: var(--color-blue-800);--brand-secondary: var(--color-cyan-500);--brand-secondary-dark: var(--color-cyan-600);--status-success: var(--color-green-600);--status-danger: var(--color-red-600);--status-warning: var(--color-yellow-400);--status-info: var(--color-blue-500);--border-primary: var(--color-gray-100);--border-input: var(--color-gray-200);--border-primary-hover: var(--color-gray-200);--border-input-hover: var(--color-gray-300);--shadow-primary: rgba(0, 0, 0, .08);--color-chord: var(--color-blue-500);--scrollbar-thumb: var(--color-gray-600);--scrollbar-track: var(--bg-primary);--live-mode-bg: var(--color-gray-950);--live-mode-text: var(--color-gray-100);--live-mode-chords: var(--color-yellow-300);--live-mode-controls-bg: rgba(245, 245, 245, .5);--live-mode-controls-border: rgba(255, 255, 255, .15);--transition-speed: .2s;--transition-timing: ease-in-out;--border-radius-base: 8px;--border-radius-sm: 4px;--border-radius-lg: 15px;--border-radius-xl: 20px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-sans: "Inter", sans-serif;--font-mono: "Consolas", monospace;--button-nav-bg: var(--color-blue-600);--button-nav-text: var(--color-surface);--button-nav-hover-bg: var(--color-blue-700);--button-nav-disabled-bg: var(--color-gray-300);--button-nav-disabled-text: var(--color-gray-500);--button-bg: var(--color-primary);--button-text: var(--color-white);--primary-bg-color: var(--color-blue-500);--primary-text-color: var(--color-gray-200);--primary-bg-color-hover: var(--color-blue-600);--primary-text-color-hover: var(--color-gray-100);--primary-button-bg: var(--color-primary);--primary-button-text: var(--color-white);--secondary-button-bg: var(--color-gray-300);--secondary-button-text: var(--color-gray-800);--editor-border: var(--color-gray-300);--editor-bg: var(--color-white);--editor-toolbar-bg: var(--color-gray-100);--editor-text: #000;--editor-icons: var(--color-gray-500);--modal-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--modal-menu-bg: #ffffff;--modal-menu-border: #e2e8f0;--modal-menu-text: #1a202c;--modal-menu-input-bg: #f9fafb;--modal-menu-input-border: #d1d5db;--modal-menu-hover: #e0e7ff;--modal-menu-placeholder: #6b7280;--button-bg: #4f46e5;--button-hover: #4338ca;--scrollbar-thumb: #6366f1;--scrollbar-track: #f3f4f6;--max-width-container: 1440px;--container-padding: var(--spacing-sm)}html.dark,:root[data-theme=dark]{color-scheme:dark;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-gray-950: #030712;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-blue-50: #eff6ff;--color-blue-100: #dbeafe;--color-blue-200: #bfdbfe;--color-blue-300: #93c5fd;--color-blue-400: #60a5fa;--color-blue-500: #3b82f6;--color-blue-600: #2563eb;--color-blue-700: #1d4ed8;--color-blue-800: #1e40af;--color-blue-900: #1e3a8a;--color-blue-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #fbbf24;--color-yellow-500: #f59e0b;--color-yellow-600: #eab308;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--color-cyan-50: #f0f9ff;--color-cyan-100: #e0f8ff;--color-cyan-200: #cffafe;--color-cyan-300: #a5f3fc;--color-cyan-400: #67e8f9;--color-cyan-500: #06b6d4;--color-cyan-600: #0891b2;--color-cyan-700: #0e7490;--color-cyan-800: #155e75;--color-cyan-900: #164e63;--color-cyan-950: #083344;--color-purple-50: #faf5ff;--color-purple-100: #f3e8ff;--color-purple-200: #e9d5ff;--color-purple-300: #d8b4fe;--color-purple-400: #c084fc;--color-purple-500: #a855f7;--color-purple-600: #9333ea;--color-purple-700: #7e22ce;--color-purple-800: #6b21a8;--color-purple-900: #581c87;--color-purple-950: #3b0764;--color-primary: var(--color-blue-400);--color-surface: var(--color-gray-900);--color-white: #ffffff;--color-black: #000000;--color-border: #444444;--bg-primary: var(--color-gray-950);--bg-secondary: var(--color-surface);--bg-tertiary: var(--color-gray-800);--bg-input: var(--color-surface);--text-primary: var(--color-gray-50);--text-secondary: var(--color-gray-300);--text-muted: var(--color-gray-500);--text-placeholder: var(--color-gray-500);--brand-primary: var(--color-primary);--brand-primary-dark: var(--color-blue-500);--brand-primary-active: var(--color-blue-600);--brand-secondary: var(--color-cyan-400);--brand-secondary-dark: var(--color-cyan-500);--status-success: var(--color-green-400);--status-danger: var(--color-red-500);--status-warning: var(--color-yellow-400);--status-info: var(--color-blue-400);--border-primary: var(--color-gray-900);--border-input: var(--color-gray-700);--border-primary: var(--color-gray-800);--border-input: var(--color-gray-600);--border-primary-hover: var(--color-gray-900);--border-input-hover: var(--color-gray-700);--shadow-primary: rgba(0, 0, 0, .4);--color-chord: var(--color-blue-400);--scrollbar-thumb: var(--color-gray-500);--scrollbar-track: var(--bg-primary);--live-mode-bg: var(--color-gray-950);--live-mode-text: var(--color-gray-50);--live-mode-chords: var(--color-yellow-300);--live-mode-controls-bg: rgba(0, 0, 0, .75);--live-mode-controls-border: rgba(255, 255, 255, .1);--button-nav-bg: var(--color-blue-400);--button-nav-text: var(--color-gray-900);--button-nav-hover-bg: var(--color-blue-500);--button-nav-disabled-bg: var(--color-gray-800);--button-nav-disabled-text: var(--color-gray-500);--button-bg: var(--color-primary);--button-text: var(--color-white);--primary-bg-color: var(--color-blue-500);--primary-text-color: var(--color-gray-200);--primary-bg-color-hover: var(--color-blue-600);--primary-text-color-hover: var(--color-gray-100);--primary-button-bg: var(--color-primary);--primary-button-text: var(--color-white);--secondary-button-bg: var(--bg-tertiary);--secondary-button-text: var(--color-gray-100);--editor-border: var(--color-gray-700);--editor-bg: var(--color-gray-900);--editor-toolbar-bg: var(--color-gray-800);--editor-text: var(--color-gray-50);--editor-icons: var(--color-gray-400);--modal-menu-bg: #374151;--modal-menu-border: #4b5563;--modal-menu-text: #f9fafb;--modal-menu-input-bg: #1f2937;--modal-menu-input-border: #4b5563;--modal-menu-hover: #4f46e5;--modal-menu-placeholder: #9ca3af;--scrollbar-thumb: #818cf8;--scrollbar-track: #1f2937}@media (min-width: 1024px){:root{--container-padding: var(--spacing-xl)}}.container{width:100%;max-width:var(--max-width-container);margin:0 auto;padding-left:var(--container-padding);padding-right:var(--container-padding)}.g-1{gap:1px}.g-2{gap:2px}.g-3{gap:3px}.g-4{gap:4px}.g-5{gap:5px}.g-6{gap:6px}.g-7{gap:7px}.g-8{gap:8px}.g-9{gap:9px}.g-10{gap:10px}.full-width,.f-w{width:100%}.col{display:flex;flex-direction:column}.row{display:flex;flex-direction:row}.btn-primary{color:var(--primary-text-color);background-color:var(--primary-bg-color)}.btn-primary:hover{color:var(--primary-text-color-hover);background-color:var(--primary-bg-color-hover)}.bg-primary{color:var(--color-white);background-color:var(--bg-primary)}.bg-primary:hover{color:var(--color-white);background-color:var(--bg-secondary)}.bg-secondary{background-color:var(--bg-secondary)}.bg-tertiary{background-color:var(--bg-tertiary)}.bg-input{background-color:var(--bg-input)}.bg-brand-primary{background-color:var(--brand-primary)}.bg-brand-secondary{background-color:var(--brand-secondary)}.bg-status-success{background-color:var(--status-success)}.bg-status-danger{background-color:var(--status-danger)}.bg-status-warning{background-color:var(--status-warning)}.bg-status-info{background-color:var(--status-info)}.bg-live-mode{background-color:var(--live-mode-bg)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-placeholder{color:var(--text-placeholder)}.text-brand-secondary{color:var(--brand-secondary)}.text-status-success{color:var(--status-success)}.text-status-danger{color:var(--status-danger)}.text-status-warning{color:var(--status-warning)}.text-status-info{color:var(--status-info)}.text-chord{color:var(--color-chord)}.text-live-mode{color:var(--live-mode-text)}.text-live-mode-chords{color:var(--live-mode-chords)}.border-primary{border-color:var(--border-primary)}.border-input{border-color:var(--border-input)}.shadow-primary{box-shadow:0 4px 6px var(--shadow-primary)}.hover\:bg-brand-primary-dark:hover{background-color:var(--brand-primary-dark)}.hover\:bg-brand-secondary-dark:hover{background-color:var(--brand-secondary-dark)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-950{background-color:var(--color-gray-950)}.text-gray-50{color:var(--color-gray-50)}.text-gray-100{color:var(--color-gray-100)}.text-gray-950{color:var(--color-gray-950)}.border-gray-50{border-color:var(--color-gray-50)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-950{border-color:var(--color-gray-950)}html,body{margin:0;padding:0;height:100%;box-sizing:border-box;font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);transition:background-color var(--transition-speed) var(--transition-timing),color var(--transition-speed) var(--transition-timing)}.live-mode-button,.live-mode-exit-button,.live-mode-toggle-controls-button,.live-mode-edit-button{pointer-events:auto;background:#ffffff14!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1)!important;color:var(--color-text-light)!important;border-radius:12px!important;padding:8px 15px;transition:all .3s cubic-bezier(.4,0,.2,1)!important}.live-mode-exit-button:hover,.live-mode-edit-button:hover{background:var(--color-primary)!important;border-color:var(--color-primary)!important;transform:translateY(-2px)}.live-mode-toggle-controls-button.inactive{opacity:.5}.live-mode-footer-controls.unified{position:fixed;bottom:30px;left:50%;transform:translate(-50%);width:auto;min-width:500px;max-width:90%;display:flex;flex-direction:column;gap:15px;padding:15px 25px;background:#121212e6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:24px;box-shadow:0 20px 50px #00000080;z-index:1000;transition:all .4s cubic-bezier(.4,0,.2,1)}.footer-top-row{display:flex;justify-content:center;align-items:center;gap:20px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.05)}.footer-slider-item{display:flex;align-items:center;gap:10px}.slider-label{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--color-primary);opacity:.8}.modern-slider-mini{-webkit-appearance:none;width:100px;height:3px;background:#ffffff1a;border-radius:2px}.modern-slider-mini::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 0 8px #ffffff4d}.slider-value{font-family:JetBrains Mono,monospace;font-size:.75rem;color:#888;min-width:35px}.footer-main-row{display:flex;justify-content:space-between;align-items:center;gap:40px}.footer-nav-group{display:flex;align-items:center;gap:12px}.nav-icon-btn{background:transparent;border:none;color:#fff;opacity:.6;cursor:pointer;transition:all .2s}.nav-icon-btn:hover:not(:disabled){opacity:1;transform:scale(1.1)}.nav-icon-btn:disabled{opacity:.1;cursor:not-allowed}.nav-indicator{font-family:JetBrains Mono,monospace;font-size:.85rem;color:#aaa;background:#ffffff0d;padding:2px 10px;border-radius:20px}.footer-center-play{position:relative}.unified-play-btn{width:56px;height:56px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 15px #0000004d;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.unified-play-btn.start{background:#22c55e;color:#fff}.unified-play-btn.stop{background:#ef4444;color:#fff}.unified-play-btn:hover{transform:scale(1.1);filter:brightness(1.1)}.footer-actions-group{display:flex;align-items:center;gap:20px}.footer-transpose-mini{display:flex;align-items:center;background:#ffffff0d;padding:4px 10px;border-radius:12px;gap:8px}.footer-transpose-mini button{background:transparent;border:none;color:var(--color-primary);cursor:pointer}.transpose-val{font-family:JetBrains Mono,monospace;font-weight:700;font-size:.9rem;color:#fff;min-width:25px;text-align:center}.reset-mini{color:#f44!important;opacity:.6}.live-mode-footer-controls.hidden-controls{opacity:0;transform:translate(-50%) translateY(120px);pointer-events:none}.footer-divider-v{width:1px;height:15px;background:#ffffff1a}@media (max-width: 768px){.live-mode-footer-controls.unified{min-width:95%;padding:15px}.footer-top-row{gap:15px}.modern-slider-mini{width:70px}.button-text-label{display:none}}.live-mode-fixed-header-container{position:fixed;top:25px;left:0;right:0;padding:0 25px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:1100}.live-mode-button{pointer-events:auto;display:flex;align-items:center;gap:8px;background:#ffffff14!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1)!important;color:var(--color-text-light)!important;border-radius:12px!important;padding:8px 16px;height:40px;transition:all .3s cubic-bezier(.4,0,.2,1)!important;cursor:pointer}.live-mode-button.inactive{background:#ffffff08!important;opacity:.7}.live-mode-button.inactive:hover{opacity:1}.button-text-label{font-size:.75rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.live-mode-content-scroll-area{cursor:pointer}.live-mode-content-scroll-area>*{cursor:default}.chord-manager-page{width:100%;height:100%;display:flex;padding:var(--spacing-xl);padding-bottom:4rem;flex-direction:column;min-height:100vh;font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);overflow:auto}.manager-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;margin-bottom:var(--spacing-md)}.manager-header h1{margin:0;font-size:1.8rem;font-family:var(--font-sans);color:var(--text-primary)}.manager-main-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}.chord-list-panel .search-container{width:100%;max-width:100%;margin-bottom:var(--spacing-sm)}.chord-details-panel{position:static}.creator-form{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:10px;background-color:var(--bg-secondary);padding:var(--spacing-md);border-radius:var(--border-radius-base)}.creator-form label{display:flex;flex-direction:column;font-weight:500;color:var(--text-secondary);font-size:.9em}.creator-form input{padding:var(--spacing-sm);border:1px solid var(--border-input);border-radius:var(--border-radius-sm);margin-top:var(--spacing-xs);background-color:var(--bg-input);color:var(--text-primary);transition:border-color var(--transition-speed)}.creator-form input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-primary) 20%,transparent)}.creator-form button{padding:var(--spacing-md);background-color:var(--brand-primary);color:var(--color-white);border:none;border-radius:var(--border-radius-sm);cursor:pointer;font-weight:600;transition:background-color var(--transition-speed)}.creator-form button:hover{background-color:var(--brand-primary-dark)}.creator-form .cancel-edit-btn{background-color:var(--color-gray-500)}.creator-form .cancel-edit-btn:hover{background-color:var(--color-gray-600)}.creator-preview,.preview-placeholder{padding:var(--spacing-md);background-color:var(--bg-tertiary);border-radius:var(--border-radius-sm);text-align:center;height:auto;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.chord-list-panel::-webkit-scrollbar{width:8px}.chord-list-panel::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:4px}.chord-list-panel::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.chord-group{border:1px solid var(--border-primary);border-radius:var(--border-radius-sm);padding:var(--spacing-sm);background-color:var(--bg-secondary);margin-bottom:var(--spacing-sm)}.chord-group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-primary);padding-bottom:var(--spacing-sm)}.chord-group-header h3{margin:0;font-size:1.1em;color:var(--text-primary)}.chord-group-header button{background:none;border:none;cursor:pointer;color:var(--text-muted);transition:color var(--transition-speed)}.chord-group-header button:hover{color:var(--status-danger)}.chord-variations{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);padding-top:var(--spacing-sm)}.chord-variation-item{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-primary);border-radius:var(--border-radius-base);cursor:pointer;font-size:.9em;transition:background-color var(--transition-speed),box-shadow var(--transition-speed),color var(--transition-speed);display:flex;align-items:center;gap:var(--spacing-sm);border:1px solid var(--border-primary);color:var(--text-secondary)}.chord-variation-item:hover{background-color:var(--bg-tertiary);box-shadow:0 2px 4px var(--shadow-primary)}.chord-variation-item.active{background-color:var(--brand-primary);color:var(--color-white);font-weight:600;border-color:var(--brand-primary-dark)}.chord-variation-item.active button{color:var(--color-white)}.chord-variation-item button{border:none;cursor:pointer;color:var(--text-muted);transition:all ease-in-out var(--transition-speed);padding:var(--spacing-sm);margin-left:10px;background-color:var(--bg-tertiary);border-radius:var(--border-radius-base)}.chord-variation-item button:hover{color:var(--color-white);background-color:var(--status-danger)}.fretboard-display-area{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.variation-navigator{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-sm)}.variation-navigator button{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--button-nav-bg);color:var(--button-nav-text);border:none;border-radius:var(--border-radius-sm);cursor:pointer;font-weight:500;transition:background-color var(--transition-speed)}.variation-navigator button:hover:not(:disabled){background-color:var(--button-nav-hover-bg)}.variation-navigator button:disabled{background-color:var(--button-nav-disabled-bg);color:var(--button-nav-disabled-text);cursor:not-allowed}.chord-notes-list,.chord-suggestions-list{text-align:center}.fretboard-display-area{margin:auto}.creator-group-container{position:relative;overflow:auto;max-height:960px;scrollbar-width:none;-ms-overflow-style:none}.creator-group-container::-webkit-scrollbar{display:none}.creator-group-container:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:60px;background:linear-gradient(to bottom,#fff0,#fff 80%);z-index:1;pointer-events:none;opacity:0;transition:opacity .3s ease-in-out}.creator-group-container.has-gradient:after{opacity:1}@media (min-width: 901px){.manager-main-content{flex-direction:row;justify-content:space-between;align-items:flex-start}.chord-creator-panel{flex-grow:.3;flex-basis:0}.chord-list-panel{flex-grow:1;flex-basis:0}.chord-details-panel{flex-grow:1.5;flex-basis:0;position:sticky;top:var(--spacing-lg);height:-moz-fit-content;height:fit-content}}.modal-actions{display:flex;justify-content:space-between;gap:15px}.modal-button{padding:10px 15px;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease-in-out}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--bg-primary);padding:var(--spacing-lg);border-radius:12px;width:480px;max-width:90vw;text-align:center;box-shadow:0 4px 20px #0003;transform:scale(.95);animation:modal-fade-in .3s forwards}@keyframes modal-fade-in{to{transform:scale(1);opacity:1}}.modal-title{color:var(--text-primary);margin-top:0;font-size:1.5rem}.modal-message{color:var(--text-secondary);font-size:1rem;margin-bottom:25px}.modal-actions{display:flex;justify-content:end;gap:15px}.modal-button{flex:none;padding:10px 15px;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease-in-out}.modal-button{display:flex;align-items:center;justify-content:center;gap:8px}.button-icon{display:flex;align-items:center;justify-content:center}.modal-button.cancel{background-color:var(--color-surface);color:var(--text-secondary)}.modal-button.cancel:hover{background-color:#d1d5db}.modal-button.confirm{background-color:#ef4444;color:#fff}.modal-button.confirm:hover{background-color:#dc2626}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-in-out}.modal-close-button{position:absolute;top:1rem;right:1rem;background:none;border:none;cursor:pointer;color:var(--text-secondary);transition:color .2s;padding:.5rem}.modal-close-button:hover{color:var(--text-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.login-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.modal-close-x{position:absolute;top:-40px;right:0;background:none;border:none;color:#737373;cursor:pointer;transition:color .2s}.modal-close-x:hover{color:#fff}.login-modal-overlay .login-card{box-shadow:0 20px 50px #00000080;animation:modalSlideUp .4s cubic-bezier(.16,1,.3,1)}.premium-loader-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0a0acc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:10000;transition:all .5s ease}.premium-loader-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.audio-visualizer{display:flex;align-items:flex-end;gap:6px;height:40px}.audio-visualizer .bar{width:5px;height:10px;background:linear-gradient(to top,#6366f1,#a855f7);border-radius:10px;animation:audio-pulse 1.2s ease-in-out infinite}.audio-visualizer .bar:nth-child(1){animation-delay:.1s}.audio-visualizer .bar:nth-child(2){animation-delay:.3s}.audio-visualizer .bar:nth-child(3){animation-delay:.2s}.audio-visualizer .bar:nth-child(4){animation-delay:.4s}.audio-visualizer .bar:nth-child(5){animation-delay:.1s}@keyframes audio-pulse{0%,to{height:10px;opacity:.5}50%{height:40px;opacity:1}}.premium-loader-text{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:1.1rem;letter-spacing:.5px;color:#fff;margin:0;background:linear-gradient(90deg,#fff,#a855f7,#fff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer-text 2s linear infinite}@keyframes shimmer-text{to{background-position:200% center}}.premium-progress-container{width:180px;height:2px;background:#ffffff1a;border-radius:10px;overflow:hidden;position:relative}.premium-progress-bar{width:40%;height:100%;background:#a855f7;position:absolute;left:-40%;border-radius:10px;animation:progress-move 1.5s cubic-bezier(.445,.05,.55,.95) infinite;box-shadow:0 0 10px #a855f780}@keyframes progress-move{0%{left:-40%}to{left:100%}}.minimal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(var(--bg-primary),.8);backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);display:flex;align-items:center;justify-content:center;z-index:10000;animation:loaderFadeIn .3s var(--transition-timing)}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.circular-loader{width:50px;height:50px;animation:rotate 2s linear infinite}.loader-path-bg{stroke:var(--border-input);opacity:.3}.loader-path{stroke:var(--brand-primary);stroke-dasharray:1,150;stroke-dashoffset:0;animation:dash 1.5s cubic-bezier(.4,0,.2,1) infinite;filter:drop-shadow(0 0 3px var(--brand-primary))}.loader-text{font-family:var(--font-sans);font-size:.85rem;font-weight:500;color:var(--text-secondary);letter-spacing:1px;text-transform:uppercase;animation:pulseText 2s var(--transition-timing) infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes pulseText{0%,to{opacity:.5;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}@keyframes loaderFadeIn{0%{opacity:0}to{opacity:1}}:root{--font-mono: "Fira Code", monospace, "Courier New", Courier;--icon-button-size: 40px;--nav-button-icon-size: 20px;--safe-area-padding-base: 16px;--header-height-desktop: 70px}.app-header{background-color:var(--bg-secondary);border-bottom:1px solid var(--bg-tertiary);box-shadow:0 2px 8px var(--color-shadow-light);padding:var(--spacing-sm) var(--spacing-md);display:flex;flex-direction:column;flex-shrink:0;z-index:500}.top-bar,.top-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);width:100%;padding:var(--spacing-sm) 0}.flex-1{display:flex;align-items:center;flex-grow:1}.app-logo{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:700;cursor:pointer;color:var(--color-primary);transition:transform .2s ease;white-space:nowrap}.logo-img{height:40px;-o-object-fit:contain;object-fit:contain}.logo-text{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.icon-buttons-container{display:flex;align-items:center;gap:var(--spacing-sm)}.icon-button{background-color:transparent;border:none;color:var(--color-text-medium);border-radius:var(--border-radius-sm);display:flex;align-items:center;justify-content:center;width:var(--icon-button-size);height:var(--icon-button-size);flex-shrink:0;box-sizing:border-box;cursor:pointer;transition:all var(--transition-speed) var(--transition-timing)}.icon-button:hover:not(:disabled){background-color:var(--bg-tertiary);color:var(--color-primary);border-radius:50%}.icon-button:disabled{cursor:not-allowed;opacity:.5}.icon-button.text-button{background-color:var(--color-primary);color:var(--color-surface);padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-xs);width:auto;height:auto;border-radius:var(--border-radius-base)}.icon-button.text-button span{margin-left:6px;font-weight:500}.user-profile-desktop{display:flex;align-items:center;gap:12px;margin-left:16px;border-left:1px solid var(--border-color)}.user-info-text{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;line-height:1;margin-right:8px}.user-name-header{font-size:14px;font-weight:700;color:var(--text-main);margin-bottom:2px}.header-plan-badge{transform:scale(.85);transform-origin:right;padding:2px 6px!important;font-size:8px!important}.logout-btn{color:#ef4444!important;opacity:.8}.logout-btn:hover{opacity:1;background-color:#ef44441a!important}.search-input{width:100%;border:1px solid var(--bg-tertiary);border-radius:var(--border-radius-lg);background-color:var(--bg-tertiary);font-size:16px;color:var(--color-text-dark)}.search-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.2)}.dropdown-menu,.dropdown-menu-top-mobile{top:calc(100% + 8px);right:0;min-width:220px;background-color:var(--bg-secondary);border:1px solid var(--border-color, rgba(255, 255, 255, .1));border-radius:16px;position:absolute;box-shadow:0 10px 40px -10px #00000080,0 0 20px #0000001a;z-index:2000;overflow:hidden;animation:fadeInScale .2s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:99999}.dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:none;background:transparent;font-size:.95rem;font-weight:500;color:var(--text-primary);cursor:pointer;text-align:left;transition:all .2s ease}.dropdown-item svg{color:var(--color-primary);opacity:.8}.dropdown-item:hover{background-color:var(--bg-tertiary)}.dropdown-divider{height:1px;background-color:var(--border-color, rgba(0, 0, 0, .1));margin:4px 0}@media (max-width: 768px){.dropdown-menu-top-mobile{right:10px;min-width:240px}}.dropdown-container-header{display:flex;align-items:center}.relative{position:relative}.app-header .key-transpose-dropdown{position:absolute;top:calc(100% + 10px);right:0;z-index:2100;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 10px 25px -5px #0000004d;min-width:220px;padding:16px;animation:fadeInScale .2s ease-out}@media (max-width: 768px){.app-header .key-transpose-dropdown{right:-10px;min-width:250px}}.top-bar-mobile{display:flex;align-items:center;justify-content:space-between;background-color:var(--bg-secondary);position:sticky;top:0;z-index:100}.top-bar-mobile .left{display:flex;flex-direction:row}.top-bar-ios-safe-area{padding-top:calc(var(--safe-area-padding-base) + env(safe-area-inset-top));padding-left:env(safe-area-inset-left,var(--spacing-md));padding-right:env(safe-area-inset-right,var(--spacing-md))}.float-menu{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:space-around;gap:4px;width:auto;min-width:280px;max-width:95%;background:#1e293bd9;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);padding:8px 16px;border-radius:32px;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px #0006;z-index:1100;transition:all .3s cubic-bezier(.4,0,.2,1)}.nav-button{background:transparent;border:none;color:#94a3b8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 10px;border-radius:16px;min-width:55px;transition:all .2s ease}.nav-button span{font-size:10px;font-weight:600}.nav-button.active{color:#fff}.nav-button.active svg{color:#3b82f6;transform:translateY(-2px)}.loading-spinner{animation:spin 1s linear infinite;display:block}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.app-logo-mobile{display:flex}}@media (min-width: 1025px){.app-header{flex-direction:row;padding:var(--spacing-sm) var(--spacing-lg)}.top-bar-mobile{display:none}}.dropdown-menu,.dropdown-menu-mobile{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:12px;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;min-width:240px;transition:all .2s ease-in-out}.dark .dropdown-menu,.dark .dropdown-menu-mobile{background:#1e1e1ef2;border-color:#ffffff1a;color:#e5e7eb}.dropdown-item{padding:8px 12px;border-radius:8px;transition:background .2s ease}.dropdown-info-header{font-size:.75rem;color:#6b7280;border-bottom:1px solid rgba(0,0,0,.05);margin-bottom:8px;padding-bottom:8px}.dark .dropdown-info-header{color:#9ca3af;border-color:#ffffff0d}.small-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:#f3f4f6;color:#374151;border:none;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.dark .small-button{background:#374151;color:#f3f4f6}.small-button:hover{background:#3b82f6;color:#fff;transform:translateY(-1px);box-shadow:0 4px 6px -1px #3b82f64d}.small-button:active{transform:translateY(0)}.value-display{font-family:Inter,sans-serif;font-weight:700;font-size:1rem;min-width:35px;text-align:center;color:#111827}.dark .value-display{color:#fff}.action-button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;padding:10px;font-size:.875rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:background .2s}.btn-reset{color:#2563eb;background:transparent}.btn-reset:hover{background:#2563eb1a}.btn-close{color:#dc2626;background:transparent}.btn-close:hover{background:#dc26261a}.dropdown-menu-mobile{width:100%;border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.badge-plan{display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.8px;line-height:1;padding:3px 8px;box-shadow:0 2px 4px #00000026;border:1px solid rgba(255,255,255,.1);white-space:nowrap;transition:all .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:6px;position:relative;overflow:hidden}.badge-plan:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.2),transparent);transform:rotate(45deg);animation:shimmer 3s infinite}@keyframes shimmer{0%{transform:translate(-100%) rotate(45deg)}to{transform:translate(100%) rotate(45deg)}}.playlist-view-container{display:flex;flex-direction:column;padding:var(--spacing-md);flex:1;padding-bottom:90px}.playlist-view-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.playlist-view-title{font-size:1.5rem;font-weight:800;color:var(--text-primary);margin:0;flex:1;min-width:150px}.playlist-header-actions{display:flex;gap:8px;align-items:center}.btn-add-separator{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;border:none;font-weight:600;font-size:.85rem;cursor:pointer;color:#fff;background-color:#8b5cf6;transition:all .2s ease}.btn-add-separator:active{transform:scale(.95);opacity:.9}@media (max-width: 480px){.btn-add-music,.btn-play-playlist,.btn-add-separator{padding:8px 10px;flex:1;justify-content:center}.btn-add-music span,.btn-play-playlist span,.btn-add-separator span{font-size:.75rem}}.btn-add-music,.btn-play-playlist{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;border:none;font-weight:600;font-size:.85rem;cursor:pointer;color:#fff;transition:opacity .2s}.btn-add-music{background-color:#10b981}.btn-play-playlist{background-color:#3b82f6}.btn-add-music:active,.btn-play-playlist:active{transform:scale(.95)}@media (max-width: 480px){.playlist-view-header{flex-direction:column;align-items:flex-start}.playlist-header-actions{width:100%;justify-content:flex-start}.btn-add-music,.btn-play-playlist{flex:1;justify-content:center}}@media (min-width: 810px){.playlist-view-container{padding:var(--spacing-xl);padding-bottom:120px}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:1000;padding:var(--spacing-md)}.modal-content{background-color:var(--bg-secondary);max-width:500px;width:95%;border-radius:16px;box-shadow:var(--modal-box-shadow);border:1px solid var(--border-primary);overflow:hidden;animation:modalSlideUp .3s var(--transition-timing)}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{padding:20px;border-bottom:1px solid var(--border-primary);display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.2rem;font-weight:700;color:var(--text-primary);margin:0}.modal-close-button{background:var(--bg-tertiary, #f1f5f9);color:var(--text-secondary);border:none;border-radius:50%;padding:5px;cursor:pointer;display:flex;transition:all var(--transition-speed)}.tab-navigation{display:flex;background:var(--bg-primary, #f8fafc);padding:5px;gap:5px}.tab-button{flex:1;padding:10px;border:none;border-radius:10px;background:transparent;color:var(--text-secondary, #64748b);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.3s}.tab-button.active{background:var(--bg-secondary, #fff);color:var(--brand-primary, #2196f3);box-shadow:0 2px 8px #0000000d}.search-container{position:relative;display:flex;align-items:center;width:100%}.search-icon-fixed{position:absolute;left:14px;color:#94a3b8;z-index:1}.modal-input{width:100%;background-color:var(--bg-input, #ffffff);color:var(--text-primary)!important;border:2px solid var(--border-input, #e2e8f0);border-radius:10px;padding:12px 16px;font-size:14px;transition:all .2s;outline:none}.modal-input.with-icon{padding-left:40px}.modal-input:focus{border-color:var(--brand-primary, #2196f3);box-shadow:0 0 0 4px #2196f31a}.btn-import{padding:10px 20px;border-radius:10px;background:var(--brand-primary, #2196f3);color:#fff;border:none;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 2px 4px #2196f34d;transition:.2s}.btn-import.success{background:#10b981;box-shadow:0 2px 4px #10b9814d}.song-list{max-height:40vh;overflow-y:auto;margin-top:15px;list-style:none;padding:0}.song-item{display:flex;justify-content:space-between;padding:14px;border-radius:10px;margin-bottom:5px;background:var(--bg-secondary, #fff);border:1px solid var(--border-primary, #f1f5f9);cursor:pointer;transition:.2s}.song-item:hover{background:#f1f7ff}.song-item{-moz-user-select:none;user-select:none;-webkit-user-select:none;cursor:pointer;transition:background .2s}.song-item:active{background-color:var(--bg-tertiary);transform:scale(.98)}.info-box{margin-top:30px;padding:15px;background:#eff6ff;border-radius:12px;border-left:4px solid #2196f3;color:#1e40af;font-size:12px;line-height:1.5}.spinner-mini{width:14px;height:14px;border:2px solid #2196f3;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.setlist-wrapper{display:flex;flex-direction:column;gap:12px;touch-action:pan-y;padding-bottom:100px}.setlist-card{background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--border-radius-lg);padding:var(--spacing-md);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer;position:relative;overflow:hidden;touch-action:pan-y;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.setlist-card:hover{border-color:var(--brand-primary);transform:translateY(-2px);box-shadow:var(--modal-box-shadow)}.setlist-card.dragging{box-shadow:0 8px 20px #00000026;border-color:var(--brand-primary);background:var(--bg-card-highlight);z-index:999;transform:scale(1.02)}.setlist-header{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;width:100%}.setlist-info-col{flex:1;display:flex;flex-direction:column;text-align:left}.setlist-title{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin:0;line-height:1.2}.setlist-description{font-size:.9rem;color:var(--text-secondary);margin-top:4px;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.setlist-actions{display:flex;gap:4px;align-items:center;margin-left:auto}.drag-handle{display:flex;align-items:center;justify-content:center;padding:8px 8px 8px 0;cursor:grab;color:var(--text-muted);touch-action:none;transition:color .2s}.drag-handle:hover{color:var(--brand-primary)}.drag-handle:active{cursor:grabbing}.setlist-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--border-primary);margin-top:8px}.footer-left{display:flex;gap:12px;align-items:end}.attendees-list{display:flex;align-items:center;flex-direction:row-reverse}.attendee-avatar{background:#444;border:2px solid var(--bg-secondary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.footer-right{display:flex;align-items:center;min-width:60px;justify-content:flex-end}.attendee-avatar,.attendee-extra{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg-secondary);margin-left:-10px;overflow:hidden;font-size:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary, #333);color:var(--text-primary);box-shadow:0 2px 4px #0003;position:relative;z-index:1}.attendee-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.attendees-avatars-stack{display:flex;align-items:center;flex-direction:row-reverse;justify-content:flex-end;padding-top:10px;padding-right:5px}.attendee-avatar-circle{width:32px;height:32px;border-radius:50%;border:2px solid var(--bg-secondary);margin-left:-10px;position:relative;background:var(--bg-tertiary);overflow:visible!important;display:flex;align-items:center;justify-content:center}.leader-crown{position:absolute;top:-10px;right:-6px;z-index:20;background:var(--bg-secondary);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000004d}.modal-member-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;width:100%}.member-name-label{flex:1;text-align:left;font-size:.95rem;color:var(--text-primary)}.avatar-placeholder{font-weight:700;text-transform:uppercase;display:flex;justify-content:center;align-items:center}.attendee-extra{background:var(--brand-primary);color:#fff;font-weight:700;z-index:0}.setlist-meta-item{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-muted)}.setlist-meta-item svg{color:var(--brand-primary)}.homepage-buttons-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-bottom:var(--spacing-md)}.btn-new-song,.btn-toggle-source,.btn-setlists{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:var(--border-radius-base);font-weight:600;flex:1;min-width:110px;white-space:nowrap;transition:all .2s ease;border:1px solid transparent}.btn-new-song{background-color:var(--brand-primary);color:#fff}.btn-toggle-source,.btn-setlists{background-color:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-primary)}.action-group-compact{display:flex;gap:8px}.btn-icon-only{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--border-radius-base);color:var(--text-secondary)}.btn-icon-only.active{color:var(--brand-primary);border-color:var(--brand-primary);background-color:var(--bg-highlight-subtle)}@media (max-width: 600px){.btn-new-song,.btn-toggle-source,.btn-setlists{flex:1 1 calc(33.33% - 8px);font-size:.8rem;gap:4px}.action-group-compact{width:100%;margin-top:4px}.btn-icon-only{flex:1}}@media (max-width: 400px){.btn-new-song{flex:1 1 100%}.btn-toggle-source,.btn-setlists{flex:1}}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.text-status-success{color:#10b981}.text-brand-primary{color:var(--brand-primary)}.text-status-danger{color:#ef4444}.btn-icon:disabled{opacity:.5;cursor:not-allowed}.attendees-avatars-stack{display:flex;align-items:center;flex-direction:row-reverse;justify-content:flex-end}.attendee-avatar-circle{width:32px;height:32px;border-radius:50%;border:2px solid var(--bg-secondary);position:relative;background:var(--bg-tertiary);overflow:visible}.member-img{width:100%;height:100%;border-radius:50%;-o-object-fit:cover;object-fit:cover}.attendee-avatar-circle{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%}.leader-crown{position:absolute;top:-8px;right:-4px;z-index:10}.leader-crown{position:absolute;top:-8px;right:-4px;font-size:12px;background:var(--bg-secondary);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0003}.attendee-extra-badge{width:32px;height:32px;border-radius:50%;background:var(--brand-primary-light);color:var(--brand-primary);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-secondary);margin-left:-12px}.attendee-avatar-circle.is-leader{border-color:var(--brand-primary);margin-left:-12px}.attendee-avatar-circle.is-leader.modal{border-color:var(--brand-primary);margin-left:-10px}@media (max-width: 600px){.setlist-footer{flex-direction:column;align-items:flex-start;gap:8px}.footer-left{width:100%;justify-content:space-between;flex-wrap:wrap;gap:8px}.footer-right{width:100%;justify-content:flex-start;margin-top:4px;padding-left:10px}.setlist-meta-item span{font-size:.75rem}}.share-modal-body{padding:0 20px 30px}.pulse-animation{animation:pulse-redesign 2s infinite}@keyframes pulse-redesign{0%{transform:scale(.95);box-shadow:0 0 #4f46e566}70%{transform:scale(1);box-shadow:0 0 0 15px #4f46e500}to{transform:scale(.95);box-shadow:0 0 #4f46e500}}.share-icon-circle{width:70px;height:70px;background:var(--brand-primary-light);color:var(--brand-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}.code-display-wrapper{background:var(--bg-secondary);border:2px dashed var(--brand-primary);border-radius:12px;padding:15px;display:flex;align-items:center;justify-content:center;gap:15px;cursor:pointer;margin-top:10px}.actual-code{font-family:"Monospace",monospace;font-size:1.8rem;font-weight:800;letter-spacing:4px}.attendees-section{margin-top:25px;border-top:1px solid var(--border-primary);padding-top:15px}.attendees-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.attendees-list-manager{max-height:200px;overflow-y:auto}.member-item{display:flex;align-items:center;justify-content:space-between;padding:10px;background:var(--bg-secondary);border-radius:10px;margin-bottom:2px}.member-info{display:flex;align-items:center;gap:10px}.member-avatar{width:32px;height:32px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex-shrink:0}.member-avatar-placeholder{width:32px;height:32px;min-width:35px;background:var(--brand-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.member-details{display:flex;flex-direction:column;overflow:hidden}.member-name{font-weight:600;font-size:.95rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.member-date{font-size:.75rem;color:var(--text-secondary)}.btn-remove-member{background:transparent;border:none;color:var(--status-danger);cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:opacity .2s}.btn-remove-member:hover{opacity:.7}.btn-leave-session{width:100%;margin-top:20px;padding:12px;background:#fff1f2;color:#e11d48;border:1px solid #fda4af;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;transition:all .2s}.btn-leave-session:hover{background:#ffe4e6}.empty-attendees{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 10px;text-align:center;background:var(--bg-secondary);border-radius:12px;border:1px dashed var(--border-primary)}.empty-icon-sub{color:var(--text-tertiary);margin-bottom:12px;opacity:.5}.empty-attendees p{font-size:.95rem;font-weight:600;color:var(--text-secondary);margin:0}.empty-attendees span{font-size:.8rem;color:var(--text-tertiary);margin-top:4px;max-width:80%}.attendees-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.attendees-list-manager::-webkit-scrollbar{width:4px}.attendees-list-manager::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:10px}.session-code-container{display:flex;align-items:center;gap:12px;margin-top:10px}.code-display-wrapper{flex:1;background:var(--bg-secondary);border:2px dashed var(--brand-primary);border-radius:12px;padding:15px;display:flex;align-items:center;justify-content:center;gap:15px;cursor:pointer;text-transform:uppercase}.actual-code{font-family:Inter,sans-serif;font-size:2rem;font-weight:900;letter-spacing:6px;color:var(--text-primary)}.btn-refresh-code{width:50px;height:50px;border-radius:12px;border:1px solid var(--border-primary);background:#fff;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 6px -1px #0000001a}.btn-refresh-code:hover{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary);transform:rotate(15deg)}.btn-refresh-code:active{transform:scale(.9)}.toast-container{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:9999;display:flex;justify-content:center;pointer-events:none}.toast{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-radius:var(--border-radius-lg);box-shadow:var(--modal-box-shadow);font-family:var(--font-sans);font-size:.95rem;font-weight:500;min-width:300px;max-width:90vw;transition:all .5s cubic-bezier(.2,.8,.2,1);opacity:0;transform:translateY(-50px);pointer-events:auto;border:1px solid rgba(255,255,255,.1)}.toast.visible{opacity:1;transform:translateY(0)}.toast-content{display:flex;align-items:center;gap:var(--spacing-md)}.toast.success{background-color:var(--status-success);color:var(--color-white)}.toast.error{background-color:var(--status-danger);color:var(--color-white)}.toast.warning{background-color:var(--status-warning);color:var(--color-gray-950)}.toast.info{background-color:var(--status-info);color:var(--color-white)}.toast-icon{display:flex;align-items:center;justify-content:center;animation:popIn .5s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.toast-dismiss-button{background:none;border:none;cursor:pointer;color:inherit;opacity:.7;margin-left:var(--spacing-lg);padding:4px;border-radius:50%;transition:all var(--transition-speed);display:flex}.toast-dismiss-button:hover{opacity:1;background-color:#ffffff26}.fretboard-wrapper.scales{display:block;overflow-x:auto;overflow-y:hidden;width:100%;margin:0!important;padding:0!important;border:1px solid #555;border-radius:12px;background:#1f1f1f;-webkit-overflow-scrolling:touch}.fretboard-wrapper.scales svg{display:block}.fretboard-note-group{cursor:pointer;transition:transform .1s ease-in-out}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background-color:var(--bg-primary);color:var(--text-primary);padding:var(--container-padding);font-family:var(--font-sans);transition:background-color var(--transition-speed),color var(--transition-speed)}.login-content{width:100%;max-width:420px;animation:fadeIn .8s var(--transition-timing)}.login-branding{text-align:center;margin-bottom:var(--spacing-xl)}.brand-logo{width:72px;height:72px;background:linear-gradient(135deg,var(--color-yellow-500) 0%,var(--color-red-600) 100%);border-radius:var(--border-radius-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-md);box-shadow:0 10px 30px var(--shadow-primary)}.brand-name{font-size:2.5rem;font-weight:800;margin-bottom:var(--spacing-xs);letter-spacing:-1px;color:var(--text-primary)}.brand-tagline{color:var(--text-secondary);font-size:1.1rem}.login-card{background:var(--bg-secondary);padding:var(--spacing-xl);border-radius:var(--border-radius-xl);border:1px solid var(--border-primary);text-align:center;box-shadow:var(--modal-box-shadow)}.login-card h2{font-size:1.6rem;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.login-card p{color:var(--text-secondary);line-height:1.6;margin-bottom:var(--spacing-lg)}.btn-login-google{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--color-white);color:var(--color-black);border:1px solid var(--color-gray-300);border-radius:var(--border-radius-lg);font-weight:700;font-size:1.05rem;cursor:pointer;transition:all var(--transition-speed)}.btn-login-google:hover{background:var(--color-gray-100);transform:translateY(-2px)}.login-divider{margin:var(--spacing-lg) 0;display:flex;align-items:center;color:var(--text-muted);text-transform:uppercase;font-size:.7rem;font-weight:800;letter-spacing:1px}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--border-primary);margin:0 var(--spacing-sm)}.auth-form{display:flex;flex-direction:column;gap:var(--spacing-sm);text-align:left}.input-container{position:relative;display:flex;align-items:center}.input-container svg{position:absolute;left:var(--spacing-md);color:var(--text-muted)}.input-container input{width:100%;padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) 48px;background:var(--bg-input);border:1px solid var(--border-input);border-radius:var(--border-radius-lg);color:var(--text-primary);font-size:.95rem;transition:border-color var(--transition-speed)}.input-container input:focus{outline:none;border-color:var(--brand-primary)}.btn-register-submit{width:100%;padding:var(--spacing-md);background:var(--brand-primary);color:var(--color-white);border:none;border-radius:var(--border-radius-lg);font-weight:700;font-size:1rem;cursor:pointer;margin-top:var(--spacing-xs);transition:all var(--transition-speed)}.btn-register-submit:hover{background:var(--brand-primary-dark);transform:translateY(-2px)}.login-features-list{list-style:none;padding:0;text-align:left;display:inline-block}.login-features-list li{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-secondary);margin-bottom:var(--spacing-sm);font-size:.95rem}.login-features-list li svg{color:var(--status-success)}.auth-footer{text-align:center;margin-top:var(--spacing-lg);color:var(--text-secondary)}.auth-footer a{color:var(--brand-primary);text-decoration:none;font-weight:700}.login-footer{margin-top:var(--spacing-md);display:flex;justify-content:center}.feature-badge{display:flex;align-items:center;gap:var(--spacing-xs);background:var(--bg-tertiary);padding:var(--spacing-xs) var(--spacing-md);border-radius:100px;color:var(--text-muted);font-size:.75rem;font-weight:700;border:1px solid var(--border-primary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}