*{box-sizing:border-box;padding:0}*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#2a2a34;color:#fff;font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow:hidden}#root,body{height:100vh}#root{display:flex;flex-direction:column}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.main-page{-webkit-overflow-scrolling:touch;align-items:center;background-color:#2a2a34;bottom:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;left:0;overflow-y:auto;padding:max(20px,env(safe-area-inset-top)) 20px calc(70px + env(safe-area-inset-bottom));position:fixed;right:0;top:0}@media (min-width:1024px){.main-page{border-radius:24px;padding-bottom:20px;position:relative}}.page-header{color:#fff;margin-bottom:15px;max-width:400px;text-align:center;width:100%}.page-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#9dd982,#b579d3);-webkit-background-clip:text;background-clip:text;font-size:clamp(24px,6vw,32px);font-weight:700;line-height:1.2;margin:0 0 8px}.page-header h1,.page-header p{font-family:Montserrat,sans-serif}.page-header p{color:#b0b0b0;font-size:clamp(14px,3.5vw,16px);line-height:1.4;margin:0}.notes-grid{grid-gap:clamp(10px,3vw,15px);display:grid;gap:clamp(10px,3vw,15px);grid-template-columns:repeat(4,1fr);justify-items:center;max-width:400px;width:100%}.note-card{display:flex;flex-direction:column;max-width:90px;position:relative;width:100%}.note-button{-webkit-tap-highlight-color:transparent;align-items:center;background-color:#57566a;border:2px solid #57566a;border-radius:clamp(12px,3vw,15px);color:#fff;cursor:pointer;display:flex;font-family:Montserrat,sans-serif;font-size:clamp(18px,5vw,24px);font-weight:700;justify-content:center;margin-bottom:5px;min-height:clamp(60px,15vw,80px);padding:clamp(15px,4vw,20px);touch-action:manipulation;transition:all .2s ease;-webkit-user-select:none;user-select:none}.note-button:focus,.note-button:hover{background-color:#6a6980;border-color:#6a6980;outline:none;transform:translateY(-2px)}.note-button:active{background-color:#5a5970;transform:translateY(0)}.favorite-btn{-webkit-tap-highlight-color:transparent;align-items:center;align-self:center;background:none;border:none;border-radius:50%;color:#666;cursor:pointer;display:flex;font-size:clamp(14px,4vw,16px);height:clamp(26px,7vw,30px);justify-content:center;padding:clamp(4px,1vw,5px);touch-action:manipulation;transition:all .2s ease;width:clamp(26px,7vw,30px)}.favorite-btn:focus,.favorite-btn:hover{background-color:#ffd7001a;color:gold;outline:none}.favorite-btn:active{transform:scale(.95)}.favorite-btn.active{color:gold}.favorite-btn.active:hover{color:orange}.favorites-counter{align-items:center;background-color:#ffd7001a;border:1px solid #ffd7004d;border-radius:20px;color:gold;display:flex;font-family:Montserrat,sans-serif;font-size:clamp(12px,3vw,14px);font-weight:600;gap:8px;justify-content:center;margin-top:15px;padding:clamp(6px,2vw,8px) clamp(12px,3vw,16px)}.favorites-counter i{font-size:clamp(14px,3.5vw,16px)}@media (max-width:480px){.main-page{padding:max(15px,env(safe-area-inset-top)) 15px calc(70px + env(safe-area-inset-bottom))}.page-header{margin-bottom:15px}.notes-grid{gap:12px}}@media (max-width:360px){.main-page{padding:12px}.notes-grid{gap:10px}.page-header{margin-bottom:10px}}@media (max-height:500px) and (orientation:landscape){.main-page{padding:10px}.page-header{margin-bottom:10px}.page-header h1{font-size:24px}.page-header p{font-size:14px}.notes-grid{gap:8px}.note-button{font-size:18px;min-height:50px;padding:12px}}@media (min-width:1024px){.page-header h1{font-size:42px}.page-header p{font-size:18px}.notes-grid{gap:20px;max-width:500px}.note-button{border-radius:18px;font-size:28px;min-height:90px}.note-button:hover{box-shadow:0 8px 25px #0000004d;transform:translateY(-4px)}.favorite-btn{font-size:18px}}.metronome-controls{background-color:#3a3a4a;border-radius:15px;color:#fff;flex-shrink:0;font-family:Montserrat,sans-serif;margin:10px 15px;padding:15px}.metronome-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px}.metronome-info{flex:1 1}.metronome-title{color:#9dd982;display:block;font-size:16px;font-weight:700;margin-bottom:5px}.beat-indicator{align-items:center;display:flex;gap:10px}.chord-info{color:#b0b0b0;font-size:12px}.beat-dots{display:flex;gap:4px}.beat-dot{background-color:#666;border-radius:50%;height:8px;transition:all .1s ease;width:8px}.beat-dot.active{background-color:#9dd982;transform:scale(1.3)}.play-btn{-webkit-tap-highlight-color:transparent;align-items:center;background-color:#9dd982;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:20px;height:45px;justify-content:center;touch-action:manipulation;transition:all .2s ease;width:45px}.play-btn:hover{background-color:#8bc76a;transform:scale(1.05)}.play-btn:active{transform:scale(.95)}.play-btn.playing{background-color:#eb7e7a}.play-btn.playing:hover{background-color:#e66b67}.metronome-settings{align-items:center;display:flex;flex-wrap:wrap;gap:20px}.beats-control,.bpm-control{display:flex;flex-direction:column;gap:8px}.beats-control label,.bpm-control label{color:#b0b0b0;font-size:12px;font-weight:600}.bpm-input-group{align-items:center;display:flex;gap:5px}.bpm-btn{-webkit-tap-highlight-color:transparent;background-color:#57566a;border-radius:8px;font-size:16px;font-weight:700;height:30px;touch-action:manipulation;transition:all .2s ease;width:30px}.bpm-btn:hover{background-color:#6a6980}.bpm-input{background-color:#2a2a34;border:1px solid #57566a;border-radius:8px;color:#fff;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;height:30px;text-align:center;width:60px}.bpm-input:focus{border-color:#9dd982;outline:none}.beats-buttons{display:flex;gap:5px}.beats-btn{-webkit-tap-highlight-color:transparent;background-color:#57566a;border:1px solid #57566a;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;height:30px;touch-action:manipulation;transition:all .2s ease;width:35px}.beats-btn:hover{background-color:#6a6980;border-color:#6a6980}.beats-btn.active{background-color:#9dd982;border-color:#9dd982;color:#2a2a34}.beats-btn:active{transform:scale(.95)}.reset-btn{-webkit-tap-highlight-color:transparent;align-items:center;background-color:initial;border:1px solid #666;border-radius:8px;color:#666;cursor:pointer;display:flex;font-size:12px;font-weight:600;gap:5px;height:35px;justify-content:center;margin-top:10px;touch-action:manipulation;transition:all .2s ease;width:100%}.reset-btn:hover{border-color:#9dd982;color:#9dd982}.reset-btn:active{transform:scale(.98)}@media (max-width:480px){.metronome-settings{align-items:stretch;flex-direction:column;gap:15px}.beats-control,.bpm-control{align-items:center}}@media (min-width:1024px){.metronome-controls{background-color:#2a2a34;border-radius:20px;flex-shrink:0;margin:0;padding:20px 30px}.metronome-title{font-size:18px}.chord-info{font-size:14px}.beat-dot{height:10px;width:10px}.play-btn{font-size:22px;height:50px;width:50px}.bpm-btn{height:36px;width:36px}.bpm-input{font-size:16px;height:36px;width:70px}.beats-btn{font-size:15px;height:36px;width:42px}}.songs-modal-backdrop{align-items:center;animation:fadeIn .2s ease;background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.songs-modal-content{background-color:#2d2d3a;border-radius:15px;display:flex;flex-direction:column;max-height:80vh;max-width:400px;overflow:hidden;width:100%}.songs-modal-header{align-items:center;border-bottom:1px solid #3a3a4a;display:flex;justify-content:space-between;padding:15px 20px}.songs-modal-header h3{color:#fff;font-family:Montserrat,sans-serif;font-size:18px;font-weight:700;margin:0}.close-btn{align-items:center;background-color:initial;border:none;border-radius:8px;color:#888;cursor:pointer;display:flex;font-size:20px;height:32px;justify-content:center;transition:all .2s ease;width:32px}.close-btn:hover{background-color:#ffffff1a;color:#fff}.save-new-btn{align-items:center;background-color:initial;border:2px dashed #9dd982;border-radius:10px;color:#9dd982;cursor:pointer;display:flex;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;gap:8px;justify-content:center;margin:15px 20px;padding:12px 16px;transition:all .2s ease}.save-new-btn:hover{background-color:#9dd9821a}.save-new-btn.disabled,.save-new-btn:disabled{border-color:#666;color:#666;cursor:not-allowed}.save-new-btn.disabled:hover,.save-new-btn:disabled:hover{background-color:initial}.save-form{border-bottom:1px solid #3a3a4a;padding:15px 20px}.current-chords-preview{background-color:#3a3a4a;border-radius:8px;display:flex;flex-direction:column;gap:5px;margin-bottom:12px;padding:10px}.preview-label{color:#888;font-family:Montserrat,sans-serif;font-size:12px}.preview-chords{color:#9dd982;font-weight:600;word-break:break-word}.preview-chords,.song-name-input{font-family:Montserrat,sans-serif;font-size:14px}.song-name-input{background-color:#2a2a34;border:1px solid #57566a;border-radius:8px;box-sizing:border-box;color:#fff;padding:12px;width:100%}.song-name-input:focus{border-color:#9dd982;outline:none}.song-name-input::placeholder{color:#666}.save-form-buttons{display:flex;gap:10px;margin-top:12px}.cancel-btn,.confirm-save-btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;flex:1 1;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;gap:6px;justify-content:center;padding:10px;transition:all .2s ease}.cancel-btn{background-color:#57566a;color:#fff}.cancel-btn:hover{background-color:#6a6980}.confirm-save-btn{background-color:#9dd982;color:#2a2a34}.confirm-save-btn:hover{background-color:#8bc76a}.confirm-save-btn:disabled{background-color:#57566a;color:#888;cursor:not-allowed}.songs-list{flex:1 1;overflow-y:auto;padding:10px 20px 20px}.empty-state{justify-content:center}.empty-state i{margin-bottom:10px}.empty-state p{font-size:14px;margin:0}.song-item{align-items:center;background-color:#3a3a4a;border-radius:10px;cursor:pointer;display:flex;justify-content:space-between;margin-bottom:10px;padding:12px;transition:all .2s ease}.song-item:hover{background-color:#4a4a5a;transform:translateX(5px)}.song-item:last-child{margin-bottom:0}.song-name{color:#fff;font-size:14px;font-weight:700;margin-bottom:4px}.song-chords,.song-name{display:block;font-family:Montserrat,sans-serif}.song-chords{color:#888;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-song-btn{background-color:initial;border-radius:8px;color:#888;font-size:16px;height:32px;margin-left:10px;transition:all .2s ease;width:32px}.scales-page{background-color:#2a2a34;bottom:0;box-sizing:border-box;color:#fff;display:flex;flex-direction:column;left:0;overflow:hidden;padding-bottom:calc(60px + env(safe-area-inset-bottom));padding-top:env(safe-area-inset-top);position:fixed;right:0;top:0}@media (min-width:1024px){.scales-page{background-color:initial;gap:15px;overflow-y:auto;padding:20px;position:relative}}.header{background:#0000;flex-shrink:0;height:clamp(45px,12vw,50px);justify-content:space-between;padding:0 clamp(12px,3vw,15px)}.header,.header-center{align-items:center;display:flex}.header-center{gap:clamp(8px,2vw,10px)}.header-btn{-webkit-tap-highlight-color:transparent;align-items:center;background:#0000;border:none;border-radius:clamp(8px,2vw,10px);color:#fff;cursor:pointer;display:flex;font-size:clamp(18px,5vw,20px);height:clamp(34px,9vw,38px);justify-content:center;touch-action:manipulation;transition:background-color .2s;width:clamp(34px,9vw,38px)}.header-btn:focus,.header-btn:hover{background-color:#ffffff1a;outline:none}.header-btn:active{transform:scale(.95)}.dynamic-island{-webkit-tap-highlight-color:transparent;background-color:#57566a;border:none;border-radius:clamp(8px,2vw,10px);color:#fff;cursor:pointer;font-family:Montserrat,sans-serif;font-size:clamp(16px,4vw,18px);font-weight:700;padding:clamp(6px,2vw,8px) clamp(20px,5vw,24px);touch-action:manipulation;transition:all .2s}.dynamic-island:focus,.dynamic-island:hover{background-color:#6a6980;outline:none}.dynamic-island:active{transform:scale(.98)}.scales-small-container{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;flex-shrink:0;margin:clamp(3px,1vw,5px) 0;overflow-x:auto;overflow-y:hidden;padding:0 clamp(8px,2vw,10px);scrollbar-width:none}.scales-small-container::-webkit-scrollbar{display:none}.scales-small-grid{display:flex;flex-wrap:nowrap;gap:clamp(6px,2vw,8px);padding:0 clamp(3px,1vw,5px);width:-webkit-max-content;width:max-content}@media (min-width:768px) and (max-width:1023px){.scales-small-container{display:flex;justify-content:center}.scales-small-grid{justify-content:center}}.scale-small-item{-webkit-tap-highlight-color:transparent;background-color:#57566a;border:5px solid #57566a;border-radius:clamp(8px,2vw,10px);box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;flex-shrink:0;height:clamp(55px,14vw,60px);min-width:clamp(55px,14vw,60px);padding:2px;position:relative;touch-action:manipulation;transition:all .2s;width:clamp(55px,14vw,60px)}.scale-small-item:focus,.scale-small-item:hover{background-color:#6a6980}.scale-small-item:active{transform:scale(.95)}.scale-small-item.selected{border-color:#4caf50}.scale-small-name{color:#fff;font-family:Montserrat,sans-serif;font-size:12px;font-weight:700;left:4px;position:absolute;top:2px}.scale-small-dot{border-radius:50%;bottom:4px;height:12px;left:4px;position:absolute;width:12px}.scale-small-degree{bottom:0;font-family:Montserrat,sans-serif;font-size:12px;font-weight:700;position:absolute;right:4px}.selected-scales-section{display:flex;flex:1 1;flex-direction:column;min-height:0;overflow:hidden;position:relative}.notes-header{align-items:center;background:#0000;box-sizing:border-box;display:flex;flex-shrink:0;height:50px;justify-content:space-between;padding:clamp(8px,2vw,10px) clamp(12px,3vw,15px)}.notes-label{color:#fff;font-family:Montserrat,sans-serif;font-size:clamp(14px,4vw,16px);font-weight:700}.organizers{display:flex;gap:clamp(4px,1vw,5px)}.organizer-btn{-webkit-tap-highlight-color:transparent;align-items:center;background:#0000;border:2px solid gray;border-radius:clamp(8px,2vw,10px);color:gray;cursor:pointer;display:flex;font-size:clamp(14px,3.5vw,16px);height:clamp(28px,7vw,32px);justify-content:center;touch-action:manipulation;transition:all .2s;width:clamp(28px,7vw,32px)}.organizer-btn.active{border-color:#4caf50;color:#4caf50}.organizer-btn:focus,.organizer-btn:hover{border-color:#4caf50;color:#4caf50;outline:none}.organizer-btn:active{transform:scale(.95)}.selected-scales-container{-webkit-overflow-scrolling:touch;bottom:0;flex:1 1;left:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:0 clamp(12px,3vw,15px) clamp(12px,3vw,15px);position:absolute;right:0;top:50px}.selected-scales-grid{grid-gap:clamp(8px,2vw,10px);display:grid;gap:clamp(8px,2vw,10px)}.selected-scales-grid.span-1{grid-template-columns:1fr}.selected-scales-grid.span-2{grid-template-columns:repeat(2,1fr)}.selected-scales-grid.flex-mode{-webkit-overflow-scrolling:touch;display:flex;flex-direction:row;gap:clamp(8px,2vw,10px);overflow-x:auto;overflow-y:hidden;padding-bottom:clamp(8px,2vw,10px)}.selected-scales-grid.flex-mode .selected-scale-item{flex-shrink:0;min-width:clamp(120px,30vw,150px)}.selected-scale-item{align-items:center;background-color:#57566a;border-radius:clamp(12px,3vw,15px);display:flex;justify-content:space-between;min-height:clamp(80px,20vw,100px);padding:clamp(20px,5vw,25px);position:relative}.remove-scale-btn{align-items:center;background-color:#eb7e7ae6;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:clamp(14px,3.5vw,16px);height:clamp(24px,6vw,28px);justify-content:center;opacity:.8;position:absolute;right:clamp(6px,1.5vw,8px);top:clamp(6px,1.5vw,8px);transition:all .2s;width:clamp(24px,6vw,28px);z-index:10}.remove-scale-btn:hover{background-color:#eb7e7a;opacity:1;transform:scale(1.1)}.remove-scale-btn:active{transform:scale(.95)}.selected-scale-name{color:#fff;font-family:Montserrat,sans-serif;font-size:clamp(24px,6vw,32px);font-weight:900}.selected-scale-degree{font-family:Montserrat,sans-serif;font-size:clamp(14px,4vw,18px);font-weight:700}.overlay-backdrop{align-items:flex-start;animation:fadeIn .25s ease;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding-left:clamp(10px,3vw,20px);padding-right:clamp(10px,3vw,20px);padding-top:clamp(40px,10vh,50px);position:fixed;right:0;top:0;z-index:1000}.overlay-content{background-color:#2d2d3a;border-radius:clamp(12px,3vw,15px);max-width:clamp(280px,80vw,300px);padding:clamp(8px,2vw,10px);width:100%}.overlay-notes-grid{grid-gap:clamp(8px,2vw,10px);display:grid;gap:clamp(8px,2vw,10px);grid-template-columns:repeat(4,1fr)}.overlay-note-btn{-webkit-tap-highlight-color:transparent;aspect-ratio:1;background-color:#57566a;border:none;border-radius:clamp(12px,3vw,15px);color:#fff;cursor:pointer;font-family:Montserrat,sans-serif;font-size:clamp(10px,3vw,12px);font-weight:700;min-height:clamp(40px,12vw,50px);touch-action:manipulation;transition:all .2s}.overlay-note-btn:focus,.overlay-note-btn:hover{background-color:#6a6980;outline:none;transform:scale(1.05)}.overlay-note-btn:active{transform:scale(.95)}.submenu-content{background-color:#3a3a4a;border-radius:clamp(12px,3vw,15px);padding:clamp(4px,1vw,5px)}.submenu-options{display:flex;gap:clamp(8px,2vw,10px);justify-content:center}.submenu-option-btn{-webkit-tap-highlight-color:transparent;background-color:#57566a;border:none;border-radius:clamp(12px,3vw,15px);color:#fff;cursor:pointer;font-family:Montserrat,sans-serif;font-size:clamp(10px,3vw,12px);font-weight:700;height:clamp(45px,12vw,50px);touch-action:manipulation;transition:all .2s;width:clamp(45px,12vw,50px)}.submenu-option-btn:focus,.submenu-option-btn:hover{background-color:#6a6980;outline:none;transform:scale(1.05)}.submenu-option-btn:active{transform:scale(.95)}.header-btn.favorite-btn{color:#666;transition:all .2s ease}.header-btn.favorite-btn:focus,.header-btn.favorite-btn:hover{background-color:#ffd7001a;color:gold}.header-btn.favorite-btn:active{transform:scale(.95)}.header-btn.favorite-btn.active{color:gold}.header-btn.favorite-btn.active:hover{color:orange}.header-btn.metronome-btn{color:#fff;transition:all .2s ease}.header-btn.metronome-btn:focus,.header-btn.metronome-btn:hover{background-color:#9dd9821a;color:#9dd982}.header-btn.metronome-btn:active{transform:scale(.95)}.header-btn.metronome-btn.active{background-color:#9dd98233;color:#9dd982}.header-btn.songs-btn{color:#fff;transition:all .2s ease}.header-btn.songs-btn:focus,.header-btn.songs-btn:hover{background-color:#b579d31a;color:#b579d3}.header-btn.songs-btn:active{transform:scale(.95)}.header-btn.songs-btn.active{background-color:#b579d333;color:#b579d3}.header-right{align-items:center;display:flex;gap:clamp(5px,1.5vw,8px)}@media (max-width:480px){.overlay-notes-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:360px){.scales-small-grid{gap:4px}.scale-small-item{height:55px;min-width:55px;width:55px}}@media (max-height:500px) and (orientation:landscape){.header{height:40px}.scales-small-container{margin:2px 0}.notes-header{padding:5px 15px}.selected-scales-container{padding:0 15px 10px}.overlay-backdrop{padding-top:20px}}.selected-scale-item.pulse-active{background-color:#9dd982!important;box-shadow:0 0 20px #9dd98299;transform:scale(1.05);transition:all .1s ease}.selected-scale-item.pulse-active .selected-scale-degree,.selected-scale-item.pulse-active .selected-scale-name{color:#2a2a34!important}.selected-scale-item{transition:all .1s ease}@media (min-width:1024px){.header{background-color:#2a2a34;border-radius:20px;flex-shrink:0;height:auto;justify-content:flex-start;padding:20px 30px}.header,.header-center{gap:15px}.header-btn{font-size:22px;height:44px;width:44px}.header-btn.back-btn{display:none}.dynamic-island{border-radius:14px;font-size:24px;padding:12px 35px}.header-right{margin-left:auto}.scales-small-container{background-color:#2a2a34;border-radius:20px;flex-shrink:0;justify-content:flex-start;margin:0;padding:20px 30px}.scales-small-grid{gap:12px;justify-content:flex-start}.scale-small-item{border-radius:14px;height:75px;min-width:75px;width:75px}.scale-small-item:hover{box-shadow:0 4px 15px #0000004d;transform:scale(1.08)}.scale-small-name{font-size:14px}.scale-small-degree{font-size:13px}.selected-scales-section{background-color:#2a2a34;border-radius:20px;flex:1 1;min-height:0}.notes-header{height:auto;padding:20px 30px}.notes-label{font-size:20px}.organizer-btn{border-radius:10px;font-size:18px;height:38px;width:38px}.selected-scales-container{padding:0 30px 30px;top:65px}.selected-scales-grid{gap:15px}.selected-scales-grid.span-2{grid-template-columns:repeat(3,1fr)}.selected-scale-item{border-radius:16px;min-height:100px;padding:25px 30px;transition:all .2s ease}.selected-scale-item:hover{box-shadow:0 6px 25px #00000040;transform:translateY(-3px)}.selected-scale-name{font-size:32px}.selected-scale-degree{font-size:18px}.metronome-controls{background-color:#2a2a34;border-radius:20px;margin:0}}.songs-page{background-color:#2a2a34;bottom:0;box-sizing:border-box;display:flex;flex-direction:column;left:0;padding:max(20px,env(safe-area-inset-top)) 20px calc(70px + env(safe-area-inset-bottom));position:fixed;right:0;top:0}@media (min-width:1024px){.songs-page{border-radius:24px;padding-bottom:20px;position:relative}}.songs-page-header{color:#fff;margin-bottom:20px;text-align:center}.songs-page-header h1{color:#b579d3;font-family:Montserrat,sans-serif;font-size:clamp(24px,6vw,32px);font-weight:700;margin:0 0 8px}.songs-page-header p{color:#888;font-family:Montserrat,sans-serif;font-size:clamp(14px,3.5vw,16px);margin:0}.songs-page-content{-webkit-overflow-scrolling:touch;flex:1 1;overflow-y:auto}.songs-empty-state{align-items:center;color:#666;display:flex;flex-direction:column;justify-content:center;padding:60px 20px;text-align:center}.songs-empty-state i{color:#555;font-size:64px;margin-bottom:15px}.songs-empty-state p{color:#888;font-family:Montserrat,sans-serif;font-size:18px;font-weight:600;margin:0 0 10px}.songs-empty-state span{color:#666;font-family:Montserrat,sans-serif;font-size:14px}.songs-page-list{display:flex;flex-direction:column;gap:12px}.songs-page-item{-webkit-tap-highlight-color:transparent;align-items:center;background-color:#3a3a4a;border-radius:12px;cursor:pointer;display:flex;justify-content:space-between;padding:15px;touch-action:manipulation;transition:all .2s ease}.songs-page-item:hover{background-color:#4a4a5a;transform:translateX(5px)}.songs-page-item:active{transform:scale(.98)}.songs-page-item-info{display:flex;flex:1 1;flex-direction:column;gap:6px;min-width:0}.songs-page-item-name{color:#fff;font-family:Montserrat,sans-serif;font-size:16px;font-weight:700}.songs-page-item-chords{color:#888;font-family:Montserrat,sans-serif;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.songs-page-delete-btn{align-items:center;background-color:initial;border:none;border-radius:10px;color:#666;cursor:pointer;display:flex;flex-shrink:0;font-size:18px;height:40px;justify-content:center;margin-left:10px;transition:all .2s ease;width:40px}.songs-page-delete-btn:hover{background-color:#eb7e7a33;color:#eb7e7a}.songs-page-delete-btn:active{transform:scale(.95)}@media (min-width:1024px){.songs-page{padding:40px}.songs-page-header h1{font-size:36px}.songs-page-header p{font-size:18px}.songs-page-content{margin:0 auto;max-width:600px;width:100%}.songs-page-item{border-radius:16px;padding:20px}.songs-page-item:hover{box-shadow:0 4px 20px #0003;transform:translateX(8px)}.songs-page-item-name{font-size:18px}.songs-page-item-chords{font-size:14px}.empty-state i{font-size:80px}.empty-state p{font-size:20px}}.advanced-editor{background-color:#2a2a34;bottom:0;box-sizing:border-box;display:flex;flex-direction:column;left:0;overflow:hidden;padding-bottom:calc(60px + env(safe-area-inset-bottom));position:fixed;right:0;top:0}.advanced-editor.fullscreen-visualizer{background-color:#1e1e26;bottom:0;left:0;padding-bottom:0;position:fixed;right:0;top:0;z-index:9999}.floating-buttons{display:flex;flex-direction:row;gap:12px;position:fixed;right:20px;top:max(20px,env(safe-area-inset-top) + 10px);z-index:10000}.floating-btn{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#2a2a3499;border:1px solid #ffffff1a;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:20px;height:48px;justify-content:center;opacity:.6;transition:all .3s;width:48px}.floating-btn:hover{background-color:#2a2a34e6;opacity:1;transform:scale(1.1)}.floating-btn:active{transform:scale(.95)}.floating-btn.exit-btn:hover{background-color:#eb7e7acc;border-color:#eb7e7a}.floating-btn.play-btn{background-color:#9dd98299}.floating-btn.play-btn:hover{background-color:#9dd982e6;border-color:#9dd982;opacity:1}.floating-btn.pause-btn{background-color:#9dd98299}.floating-btn.pause-btn:hover{background-color:#9dd982e6;border-color:#9dd982;opacity:1}.floating-btn.settings-btn:hover{background-color:#79b4d3cc;border-color:#79b4d3}@media (min-width:1024px){.advanced-editor{border-radius:24px;padding-bottom:20px;position:relative}.advanced-editor.fullscreen-visualizer{border-radius:0;padding-bottom:0;position:fixed}.floating-buttons{flex-direction:row;gap:15px;right:30px;top:30px}.floating-btn{font-size:22px;height:56px;width:56px}}.editor-header{align-items:center;background-color:#1e1e26;border-bottom:1px solid #3a3a4a;display:flex;flex-shrink:0;gap:12px;padding:max(12px,env(safe-area-inset-top)) 15px 12px}.editor-header .back-btn{align-items:center;background:#0000;border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:20px;height:40px;justify-content:center;width:40px}.editor-header .back-btn:hover{background-color:#ffffff1a}.song-info{flex:1 1;min-width:0}.song-info h1{color:#fff;font-family:Montserrat,sans-serif;font-size:18px;font-weight:700;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-meta{display:flex;gap:8px}.bpm-badge,.capo-badge,.key-badge{border-radius:6px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:600;padding:2px 8px}.key-badge{background-color:#9dd98233;color:#9dd982}.bpm-badge{background-color:#b579d333;color:#b579d3}.capo-badge{background-color:#79b4d333;color:#79b4d3}.bpm-badge.clickable,.capo-badge.clickable{align-items:center;cursor:pointer;display:flex;gap:4px;transition:all .2s}.bpm-badge.clickable{border:1px solid #b579d34d}.capo-badge.clickable{border:1px solid #79b4d34d}.bpm-badge.clickable:hover{background-color:#b579d34d;transform:scale(1.05)}.capo-badge.clickable:hover{background-color:#79b4d34d;transform:scale(1.05)}.bpm-badge.clickable i,.capo-badge.clickable i{font-size:14px}.playback-controls{display:flex;gap:8px}.control-btn{align-items:center;background-color:#3a3a4a;border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:18px;height:40px;justify-content:center;transition:all .2s;width:40px}.control-btn:hover{background-color:#4a4a5a}.control-btn.play{background-color:#9dd982;color:#2a2a34}.control-btn.play:hover{background-color:#8bc970}.control-btn.active{background-color:#79b4d3;color:#fff}.control-btn.active:hover{background-color:#6aa3c2}.visualizer-container{-webkit-overflow-scrolling:touch;background-color:#1e1e26;border-bottom:1px solid #3a3a4a;flex-shrink:0;overflow-x:auto;padding:20px 15px}.fullscreen-visualizer .visualizer-container{border-bottom:none;bottom:0;display:flex;flex-direction:column;left:0;overflow-y:auto;padding:max(20px,env(safe-area-inset-top) + 10px) 15px calc(20px + env(safe-area-inset-bottom));position:fixed;right:0;top:0}.fullscreen-visualizer .visualizer-chords{flex:1 1;justify-content:center}.fullscreen-visualizer .visualizer-chords,.visualizer-chords{display:flex;flex-direction:column;gap:20px}.visualizer-section{background-color:#2a2a34;border-radius:12px;padding:15px}.visualizer-section-header{align-items:center;display:flex;gap:8px;margin-bottom:12px}.visualizer-section-dot{border-radius:50%;height:10px;width:10px}.visualizer-section-name{color:#fff;font-family:Montserrat,sans-serif;font-size:13px;font-weight:700}.visualizer-repeat{background-color:#b579d333;border-radius:4px;color:#b579d3;font-family:Montserrat,sans-serif;font-size:11px;font-weight:600;padding:2px 6px}.visualizer-chords-grid{grid-gap:12px;display:grid;gap:12px}.visualizer-chord{align-items:center;background-color:#3a3a4a;border-radius:10px;display:flex;flex-direction:column;justify-content:center;min-height:80px;padding:20px 12px;text-align:center;transition:all .3s}.visualizer-chord.playing{animation:visualizerPulse .3s ease-in-out;background-color:#9dd982;box-shadow:0 0 25px #9dd982b3;transform:scale(1.05)}.visualizer-chord.playing .visualizer-chord-degree,.visualizer-chord.playing .visualizer-chord-name{color:#2a2a34}@keyframes visualizerPulse{0%,to{transform:scale(1.05)}50%{transform:scale(1.1)}}.visualizer-chord-name{color:#fff;font-family:Montserrat,sans-serif;font-size:24px;font-weight:700;margin-bottom:6px}.visualizer-chord-degree{font-family:Montserrat,sans-serif;font-size:13px;font-weight:600}.sections-container{-webkit-overflow-scrolling:touch;display:flex;flex:1 1;flex-direction:column;gap:15px;min-height:0;overflow-y:auto;padding:15px}.empty-sections{align-items:center;color:#666;display:flex;flex-direction:column;justify-content:center;padding:60px 20px}.empty-sections i{font-size:48px;margin-bottom:15px}.empty-sections p{color:#888;font-family:Montserrat,sans-serif;font-size:16px}.section-card{background-color:#3a3a4a;border-left:4px solid;border-radius:12px;flex-shrink:0;overflow:hidden}.section-header{background-color:#0003;justify-content:space-between;padding:12px 15px}.section-header,.section-title{align-items:center;display:flex}.section-title{gap:10px}.section-color-dot{border-radius:50%;height:12px;width:12px}.section-name{color:#fff;font-size:14px;font-weight:700}.section-duration,.section-name{font-family:Montserrat,sans-serif}.section-duration{color:#888;font-size:12px}.section-controls{align-items:center;display:flex;gap:10px}.repeat-control{align-items:center;background-color:#2a2a34;border-radius:8px;display:flex;gap:6px;padding:4px 8px}.repeat-control button{align-items:center;background:#0000;border:none;border-radius:4px;color:#888;cursor:pointer;display:flex;font-size:14px;height:24px;justify-content:center;width:24px}.repeat-control button:hover{background-color:#ffffff1a;color:#fff}.repeat-control span{color:#b579d3;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;min-width:24px;text-align:center}.delete-section-btn{align-items:center;background:#0000;border:none;border-radius:8px;color:#666;cursor:pointer;display:flex;font-size:16px;height:32px;justify-content:center;width:32px}.delete-section-btn:hover{background-color:#eb7e7a33;color:#eb7e7a}.add-chord-header-btn{align-items:center;background:#0000;border:none;border-radius:8px;color:#666;cursor:pointer;display:flex;font-size:16px;height:32px;justify-content:center;transition:all .2s;width:32px}.add-chord-header-btn:hover{background-color:#9dd98233;color:#9dd982}.chords-grid{display:flex;flex-wrap:wrap;gap:10px;padding:15px}.chord-item{background-color:#57566a;border-radius:10px;cursor:grab;display:flex;flex-direction:column;gap:4px;padding:10px;position:relative;touch-action:none;transition:all .2s;width:70px}.chord-item:active{cursor:grabbing}.chord-item.dragging{opacity:.5;transform:scale(1.05)}.chord-item.playing{animation:pulse .3s ease-in-out;background-color:#9dd982;box-shadow:0 0 20px #9dd98299}.chord-item.playing .chord-beats button,.chord-item.playing .chord-beats span,.chord-item.playing .chord-degree,.chord-item.playing .chord-name{color:#2a2a34}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.chord-name{color:#fff;font-size:16px;font-weight:700;margin-bottom:4px;word-break:break-word}.chord-degree,.chord-name{font-family:Montserrat,sans-serif;text-align:center}.chord-degree{font-size:11px;font-weight:600;margin-bottom:8px}.chord-actions{gap:4px;margin-bottom:4px}.bass-note-btn,.chord-actions{align-items:center;display:flex;justify-content:center}.bass-note-btn{background-color:#79b4d333;border:1px solid #79b4d34d;border-radius:6px;color:#79b4d3;cursor:pointer;font-size:12px;height:24px;transition:all .2s;width:24px}.bass-note-btn:hover{background-color:#79b4d34d;border-color:#79b4d3}.remove-bass-btn{align-items:center;background-color:#eb7e7a33;border:1px solid #eb7e7a4d;border-radius:6px;color:#eb7e7a;cursor:pointer;display:flex;font-size:12px;height:24px;justify-content:center;transition:all .2s;width:24px}.remove-bass-btn:hover{background-color:#eb7e7a4d;border-color:#eb7e7a}.chord-beats{background-color:#0000004d;border-radius:6px;gap:4px;padding:4px}.chord-beats,.chord-beats button{align-items:center;display:flex;justify-content:center}.chord-beats button{background:#0000;border:none;border-radius:4px;color:#888;cursor:pointer;font-size:14px;font-weight:700;height:20px;width:20px}.chord-beats button:hover{background-color:#ffffff1a;color:#fff}.chord-beats span{color:#9dd982;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;min-width:16px;text-align:center}.remove-chord-btn{align-items:center;background-color:#eb7e7a;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:12px;height:20px;justify-content:center;opacity:0;position:absolute;right:-6px;top:-6px;transition:opacity .2s;width:20px}.chord-item:hover .remove-chord-btn{opacity:1}.add-chord-btn{display:none}.chord-picker{background-color:#2a2a34;border-radius:10px;margin:0 15px 15px;overflow:hidden}.chord-picker-header{align-items:center;background-color:#0000004d;display:flex;justify-content:space-between;padding:10px 12px}.chord-picker-header span{color:#888;font-family:Montserrat,sans-serif;font-size:12px}.chord-picker-header button{align-items:center;background:#0000;border:none;border-radius:6px;color:#888;cursor:pointer;display:flex;font-size:16px;height:28px;justify-content:center;width:28px}.chord-picker-header button:hover{background-color:#ffffff1a;color:#fff}.chord-picker-grid{display:flex;flex-wrap:wrap;gap:8px;padding:12px}.chord-picker-item{background-color:#57566a;border:none;border-radius:8px;cursor:pointer;padding:10px 8px;transition:all .2s;width:60px}.chord-picker-item:hover{background-color:#6a6980;transform:scale(1.05)}.picker-chord-name{color:#fff;font-size:14px;font-weight:700}.picker-chord-degree,.picker-chord-name{display:block;font-family:Montserrat,sans-serif;text-align:center}.picker-chord-degree{font-size:10px;font-weight:600;margin-top:2px}.add-section-btn{align-items:center;background-color:initial;border:2px dashed #57566a;border-radius:12px;color:#888;cursor:pointer;display:flex;flex-shrink:0;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;gap:8px;justify-content:center;padding:15px;transition:all .2s}.add-section-btn:hover{border-color:#b579d3;color:#b579d3}.presets-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:16px}.preset-btn{align-items:center;background-color:#3a3a4a;border:2px solid #0000;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;gap:8px;padding:12px;transition:all .2s}.preset-btn:hover{background-color:#4a4a5a}.preset-dot{border-radius:50%;height:12px;width:12px}.advanced-editor .modal-backdrop{align-items:center;background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.advanced-editor .modal-content{background-color:#2d2d3a;border-radius:16px;max-width:400px;padding:24px;width:100%}.advanced-editor .modal-content h2{color:#fff;font-family:Montserrat,sans-serif;font-size:20px;font-weight:700;margin:0 0 20px;text-align:center}.advanced-editor .form-group{margin-bottom:16px}.advanced-editor .form-group label{color:#888;display:block;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;margin-bottom:6px}.advanced-editor .form-group input{background-color:#3a3a4a;border:2px solid #0000;border-radius:10px;box-sizing:border-box;color:#fff;font-family:Montserrat,sans-serif;font-size:14px;padding:12px;width:100%}.advanced-editor .form-group input:focus{border-color:#b579d3;outline:none}.advanced-editor .modal-actions{display:flex;gap:12px;margin-top:24px}.advanced-editor .btn-cancel,.advanced-editor .btn-create{border:none;border-radius:10px;cursor:pointer;flex:1 1;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;padding:12px}.advanced-editor .btn-cancel{background-color:#3a3a4a;color:#888}.advanced-editor .btn-create{background:linear-gradient(135deg,#b579d3,#79b4d3);color:#fff}@media (min-width:1024px){.editor-header{border-radius:24px 24px 0 0;padding:16px 25px}.song-info h1{font-size:22px}.bpm-badge,.key-badge{font-size:12px;padding:4px 10px}.control-btn{font-size:20px;height:48px;width:48px}.sections-container{gap:20px;overflow-y:auto;padding:25px}.section-card{border-left-width:5px;border-radius:16px;flex-shrink:0}.section-header{padding:15px 20px}.section-name{font-size:16px}.chords-grid{gap:15px;padding:20px}.chord-item{border-radius:12px;padding:12px;width:85px}.chord-item:hover{box-shadow:0 4px 15px #0000004d;transform:scale(1.05)}.chord-name{font-size:18px}.add-chord-btn{border-radius:12px;height:95px;width:85px}.add-section-btn{border-radius:16px;font-size:16px;padding:20px}.chord-picker{border-radius:14px;margin:0 20px 20px}.chord-picker-item{border-radius:10px;padding:12px 10px;width:70px}.picker-chord-name{font-size:16px}.visualizer-container{padding:25px}.fullscreen-visualizer .visualizer-container{padding:40px 30px}.visualizer-section{border-radius:16px;padding:20px}.visualizer-section-name{font-size:15px}.visualizer-chords-grid{gap:15px}.visualizer-chord{border-radius:12px;min-height:100px;padding:25px 15px}.visualizer-chord-name{font-size:28px}.visualizer-chord-degree{font-size:14px}}.key-badge.clickable{align-items:center;border:1px solid #9dd9824d;cursor:pointer;display:flex;gap:4px;transition:all .2s}.key-badge.clickable:hover{background-color:#9dd9824d;transform:scale(1.05)}.key-badge.clickable i{font-size:14px}.key-selector-modal{max-height:80vh;max-width:600px;overflow-y:auto}.transpose-warning{align-items:center;background-color:#9dd9821a;border:1px solid #9dd9824d;border-radius:10px;color:#9dd982;display:flex;font-size:13px;gap:8px;margin-bottom:20px;padding:12px}.transpose-warning i{font-size:18px}.keys-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(6,1fr);margin-bottom:20px}.key-option{background-color:#3a3a4a;border:2px solid #0000;border-radius:10px;color:#fff;cursor:pointer;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;padding:12px 8px;text-align:center;transition:all .2s}.key-option:hover{background-color:#4a4a5a;border-color:#9dd982;transform:scale(1.05)}.key-option.current{background-color:#9dd98233;border-color:#9dd982;color:#9dd982}@media (max-width:480px){.keys-grid{gap:8px;grid-template-columns:repeat(4,1fr)}.key-option{font-size:13px;padding:10px 6px}.key-selector-modal{max-height:70vh}}.bpm-editor-modal{max-width:400px}.bpm-editor{gap:20px;margin-bottom:20px}.bpm-btn,.bpm-editor{align-items:center;display:flex;justify-content:center}.bpm-btn{background-color:#3a3a4a;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:20px;height:48px;transition:all .2s;width:48px}.bpm-btn:hover{background-color:#4a4a5a;transform:scale(1.05)}.bpm-btn:active{transform:scale(.95)}.bpm-display{align-items:center;display:flex;flex-direction:column;gap:4px}.bpm-display input{background-color:#3a3a4a;border:2px solid #b579d3;border-radius:12px;box-sizing:border-box;color:#fff;font-family:Montserrat,sans-serif;font-size:32px;font-weight:700;padding:12px;text-align:center;width:100px}.bpm-display input:focus{border-color:#9dd982;outline:none}.bpm-display span{color:#888;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase}.bpm-presets{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:20px}.bpm-presets button{background-color:#3a3a4a;border:2px solid #0000;border-radius:10px;color:#fff;cursor:pointer;font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;padding:12px;transition:all .2s}.bpm-presets button:hover{background-color:#4a4a5a;border-color:#b579d3;transform:scale(1.05)}.visualizer-settings-modal{max-height:80vh;max-width:400px;overflow-y:auto}.chords-per-row-selector-modal{display:flex;gap:10px;justify-content:center}.row-btn-modal{background-color:#3a3a4a;border:2px solid #0000;border-radius:10px;color:#fff;cursor:pointer;font-family:Montserrat,sans-serif;font-size:18px;font-weight:600;height:48px;transition:all .2s;width:60px}.row-btn-modal:hover{background-color:#4a4a5a;border-color:#79b4d3}.row-btn-modal.active{background-color:#79b4d3;border-color:#79b4d3;color:#fff}.sections-visibility-list{display:flex;flex-direction:column;gap:8px}.section-visibility-item{align-items:center;background-color:#3a3a4a;border:2px solid #0000;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;gap:10px;padding:12px 15px;text-align:left;transition:all .2s;width:100%}.section-visibility-item:hover{background-color:#4a4a5a}.section-visibility-item.hidden{background-color:#2a2a34;opacity:.5}.section-visibility-item.hidden .section-visibility-name{color:#888;text-decoration:line-through}.section-visibility-dot{border-radius:50%;flex-shrink:0;height:12px;width:12px}.section-visibility-name{flex:1 1}.section-visibility-item i{color:#9dd982;font-size:18px}.section-visibility-item.hidden i{color:#888}.bass-note-picker-modal{max-height:85vh;max-width:500px;overflow-y:auto}.modal-description{color:#888;font-family:Montserrat,sans-serif;font-size:13px;margin-bottom:20px;text-align:center}.bass-notes-section,.chord-extensions-section{margin-bottom:24px}.bass-notes-section h3,.chord-extensions-section h3{color:#9dd982;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;letter-spacing:.5px;margin:0 0 12px;text-transform:uppercase}.chord-extensions-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin-bottom:8px}.extension-option{background-color:#3a3a4a;border:2px solid #0000;border-radius:10px;color:#fff;cursor:pointer;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;padding:14px 8px;text-align:center;transition:all .2s}.extension-option:hover{background-color:#4a4a5a;border-color:#9dd982;transform:scale(1.05)}.bass-notes-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(6,1fr)}.bass-note-option{background-color:#3a3a4a;border:2px solid #0000;border-radius:10px;color:#fff;cursor:pointer;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;padding:12px 8px;text-align:center;transition:all .2s}.bass-note-option:hover{background-color:#4a4a5a;border-color:#79b4d3;transform:scale(1.05)}@media (max-width:480px){.chord-extensions-grid{gap:8px;grid-template-columns:repeat(2,1fr)}.bass-notes-grid{gap:8px;grid-template-columns:repeat(4,1fr)}.bass-note-option,.extension-option{font-size:13px;padding:10px 6px}.bass-note-picker-modal{max-height:80vh}}.capo-selector-modal{max-height:80vh;max-width:500px;overflow-y:auto}.capo-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:20px}.capo-option{background-color:#3a3a4a;border:2px solid #0000;border-radius:10px;color:#fff;cursor:pointer;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;padding:14px 12px;text-align:center;transition:all .2s}.capo-option:hover{background-color:#4a4a5a;border-color:#79b4d3;transform:scale(1.05)}.capo-option.current{background-color:#79b4d333;border-color:#79b4d3;color:#79b4d3}@media (max-width:480px){.capo-grid{gap:8px;grid-template-columns:repeat(1,1fr)}.capo-option{font-size:13px;padding:12px 10px}.capo-selector-modal{max-height:70vh}}.advanced-page{background-color:#2a2a34;bottom:0;box-sizing:border-box;display:flex;flex-direction:column;left:0;overflow:hidden;padding:max(20px,env(safe-area-inset-top)) 20px calc(60px + env(safe-area-inset-bottom));position:fixed;right:0;top:0}@media (min-width:1024px){.advanced-page{border-radius:24px;padding-bottom:20px;position:relative}}.advanced-header{flex-shrink:0;margin-bottom:20px;text-align:center}.advanced-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#b579d3,#79b4d3);-webkit-background-clip:text;background-clip:text;font-family:Montserrat,sans-serif;font-size:clamp(24px,6vw,32px);font-weight:700;margin:0 0 8px}.advanced-header p{color:#888;font-family:Montserrat,sans-serif;font-size:14px;margin:0}.create-song-btn{align-items:center;background:linear-gradient(135deg,#b579d3,#79b4d3);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-family:Montserrat,sans-serif;font-size:16px;font-weight:600;gap:8px;justify-content:center;margin:0 auto 20px;max-width:400px;padding:15px 20px;transition:all .2s;width:100%}.create-song-btn:hover{box-shadow:0 4px 15px #b579d34d;transform:translateY(-2px)}.create-song-btn:active{transform:scale(.98)}.advanced-songs-list{-webkit-overflow-scrolling:touch;display:flex;flex:1 1;flex-direction:column;gap:12px;margin:0 auto;max-width:500px;min-height:0;overflow-y:auto;width:100%}.empty-state{align-items:center;color:#666;display:flex;flex-direction:column;padding:40px 20px;text-align:center}.empty-state i{color:#555;font-size:48px;margin-bottom:15px}.empty-state p{color:#888;font-family:Montserrat,sans-serif;font-size:16px;font-weight:600;margin:0 0 8px}.empty-state span{color:#666;font-size:14px}.advanced-song-card{align-items:center;background-color:#3a3a4a;border-radius:12px;cursor:pointer;display:flex;justify-content:space-between;padding:15px;transition:all .2s}.advanced-song-card:hover{background-color:#4a4a5a;transform:translateX(5px)}.song-card-info{flex:1 1;min-width:0}.song-card-name{color:#fff;display:block;font-family:Montserrat,sans-serif;font-size:16px;font-weight:700;margin-bottom:6px}.song-card-meta{display:flex;gap:10px;margin-bottom:8px}.song-card-bpm,.song-card-key,.song-card-sections{color:#888;font-family:Montserrat,sans-serif;font-size:12px}.song-card-key{color:#9dd982;font-weight:600}.song-card-sections-preview{display:flex;flex-wrap:wrap;gap:6px}.section-tag{border-radius:6px;color:#fff;font-family:Montserrat,sans-serif;font-size:10px;font-weight:600;padding:3px 8px}.section-tag.more{background-color:#57566a}.delete-song-btn{align-items:center;background:#0000;border:none;border-radius:10px;color:#666;cursor:pointer;display:flex;flex-shrink:0;font-size:18px;height:40px;justify-content:center;transition:all .2s;width:40px}.delete-song-btn:hover{background-color:#eb7e7a33;color:#eb7e7a}.modal-backdrop{align-items:center;background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.modal-content{background-color:#2d2d3a;border-radius:16px;max-width:400px;padding:24px;width:100%}.modal-content h2{color:#fff;font-family:Montserrat,sans-serif;font-size:20px;font-weight:700;margin:0 0 20px;text-align:center}.form-group{margin-bottom:16px}.form-group label{color:#888;display:block;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;margin-bottom:6px}.form-group input,.form-group select{background-color:#3a3a4a;border:2px solid #0000;border-radius:10px;box-sizing:border-box;color:#fff;font-family:Montserrat,sans-serif;font-size:14px;padding:12px;transition:border-color .2s;width:100%}.form-group input:focus,.form-group select:focus{border-color:#b579d3;outline:none}.form-row{display:flex;gap:12px}.form-row .form-group{flex:1 1}.modal-actions{display:flex;gap:12px;margin-top:24px}.btn-cancel,.btn-create{border:none;border-radius:10px;cursor:pointer;flex:1 1;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;padding:12px;transition:all .2s}.btn-cancel{background-color:#3a3a4a;color:#888}.btn-cancel:hover{background-color:#4a4a5a;color:#fff}.btn-create{background:linear-gradient(135deg,#b579d3,#79b4d3);color:#fff}.btn-create:hover:not(:disabled){transform:translateY(-2px)}.btn-create:disabled{cursor:not-allowed;opacity:.5}@media (min-width:1024px){.advanced-page{padding:40px}.advanced-header h1{font-size:36px}.advanced-header p{font-size:18px}.create-song-btn{border-radius:16px;font-size:18px;max-width:500px;padding:18px 24px}.create-song-btn:hover{box-shadow:0 8px 30px #b579d366;transform:translateY(-4px)}.advanced-songs-list{max-width:600px}.advanced-song-card{border-radius:16px;padding:20px}.advanced-song-card:hover{box-shadow:0 4px 20px #0003;transform:translateX(8px)}.song-card-name{font-size:18px}.modal-content{border-radius:20px;max-width:450px;padding:30px}.modal-content h2{font-size:24px}}.tuner-container{background-color:#2a2a34;border-radius:clamp(12px,3vw,16px);margin:clamp(15px,4vw,20px);padding:clamp(15px,4vw,20px)}.tuner-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:clamp(15px,4vw,20px)}.tuner-header h3{color:#fff;font-family:Montserrat,sans-serif;font-size:clamp(16px,4vw,18px);font-weight:700;margin:0}.tuner-coming-soon{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,10vw,60px) clamp(20px,5vw,30px);text-align:center}.tuner-coming-soon i{color:#79b4d3;font-size:clamp(48px,12vw,64px);margin-bottom:clamp(15px,4vw,20px)}.tuner-coming-soon h4{color:#fff;font-family:Montserrat,sans-serif;font-size:clamp(20px,5vw,24px);font-weight:700;margin:0 0 clamp(10px,2.5vw,15px)}.tuner-coming-soon p{color:#888;font-family:Montserrat,sans-serif;font-size:clamp(14px,3.5vw,16px);line-height:1.6;margin:0;max-width:400px}.tuner-toggle{align-items:center;background-color:#3a3a4a;border:2px solid #3a3a4a;border-radius:clamp(8px,2vw,10px);color:#fff;cursor:pointer;display:flex;font-family:Montserrat,sans-serif;font-size:clamp(13px,3.5vw,14px);font-weight:600;gap:8px;padding:clamp(8px,2vw,10px) clamp(15px,4vw,20px);transition:all .2s}.tuner-toggle:hover{background-color:#4a4a5a;border-color:#9dd982}.tuner-toggle.active{background-color:#9dd98233;border-color:#9dd982;color:#9dd982}.tuner-toggle i{font-size:clamp(16px,4vw,18px)}.tuner-display{flex-direction:column;gap:clamp(15px,4vw,20px)}.note-display,.tuner-display{align-items:center;display:flex}.note-display{background-color:#3a3a4a;border:4px solid #3a3a4a;border-radius:50%;color:#fff;font-family:Montserrat,sans-serif;font-size:clamp(40px,10vw,48px);font-weight:700;height:clamp(100px,25vw,120px);justify-content:center;transition:all .3s;width:clamp(100px,25vw,120px)}.note-display.in-tune{background-color:#9dd98233;border-color:#9dd982;box-shadow:0 0 20px #9dd98266;color:#9dd982}.note-display.flat,.note-display.sharp{background-color:#eb7e7a33;border-color:#eb7e7a;color:#eb7e7a}.frequency-display{color:#888;font-family:Montserrat,sans-serif;font-size:clamp(14px,3.5vw,16px);font-weight:600}.tuning-meter{max-width:300px;width:100%}.meter-marks{display:flex;justify-content:space-between;margin-bottom:8px;padding:0 10px}.meter-marks .mark{color:#666;font-family:Montserrat,sans-serif;font-size:clamp(16px,4vw,18px);font-weight:700}.meter-marks .mark.center{color:#9dd982}.meter-bar{background-color:#3a3a4a;border-radius:4px;height:8px;overflow:visible;position:relative;width:100%}.meter-center{background-color:#9dd982;border-radius:2px;height:16px;left:50%;width:3px}.meter-center,.meter-indicator{position:absolute;top:50%;transform:translate(-50%,-50%)}.meter-indicator{background-color:#fff;border-radius:50%;box-shadow:0 2px 8px #0000004d;height:12px;transition:left .1s ease-out;width:12px}.meter-indicator.in-tune{background-color:#9dd982;box-shadow:0 0 12px #9dd98299}.meter-indicator.flat,.meter-indicator.sharp{background-color:#eb7e7a}.cents-display{font-family:Montserrat,sans-serif;font-size:clamp(13px,3.5vw,14px);font-weight:600;min-height:20px}.cents-display .in-tune{color:#9dd982}.cents-display .flat,.cents-display .sharp{color:#eb7e7a}.tuner-instructions{align-items:center;color:#888;display:flex;flex-direction:column;gap:10px;padding:clamp(20px,5vw,30px);text-align:center}.tuner-instructions i{color:#666;font-size:clamp(32px,8vw,40px)}.tuner-instructions p{font-family:Montserrat,sans-serif;font-size:clamp(13px,3.5vw,14px);margin:0}@media (min-width:1024px){.tuner-container{margin:20px 0}.tuner-toggle:hover{transform:scale(1.05)}.note-display{font-size:56px;height:140px;width:140px}}.tuner-page{background-color:#1e1e26;box-sizing:border-box;display:flex;flex-direction:column;min-height:100vh;padding-bottom:calc(60px + env(safe-area-inset-bottom))}.tuner-page-header{background:linear-gradient(135deg,#9dd9821a,#79b4d31a);border-bottom:1px solid #3a3a4a;padding:clamp(20px,5vw,30px) clamp(15px,4vw,20px);text-align:center}.tuner-page-header h1{color:#fff;font-family:Montserrat,sans-serif;font-size:clamp(24px,6vw,32px);font-weight:700;margin:0 0 clamp(8px,2vw,10px)}.tuner-page-header p{color:#888;font-family:Montserrat,sans-serif;font-size:clamp(14px,3.5vw,16px);margin:0}.tuner-page-content{align-items:center;display:flex;flex:1 1;justify-content:center;padding:clamp(15px,4vw,20px)}.tuner-page-content .tuner-container{margin:0;max-width:500px;width:100%}@media (min-width:1024px){.tuner-page{padding-bottom:0;padding-left:250px}.tuner-page-content,.tuner-page-header{padding:40px 30px}}.auth-modal-backdrop{align-items:center;animation:fadeIn .2s ease-out;background-color:#000c;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:2000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.auth-modal-content{animation:slideUp .3s ease-out;background:linear-gradient(135deg,#2d2d3a,#1e1e26);border-radius:20px;box-shadow:0 20px 60px #00000080;max-width:420px;padding:40px 30px;position:relative;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.auth-close-btn{align-items:center;background:#0000;border:none;border-radius:8px;color:#888;cursor:pointer;display:flex;font-size:20px;height:36px;justify-content:center;position:absolute;right:15px;top:15px;transition:all .2s;width:36px}.auth-close-btn:hover{background-color:#ffffff1a;color:#fff}.auth-header{margin-bottom:30px;text-align:center}.auth-header h2{color:#fff;font-size:26px;font-weight:700;margin:0 0 8px}.auth-header h2,.auth-header p{font-family:Montserrat,sans-serif}.auth-header p{color:#888;font-size:14px;margin:0}.auth-form{gap:16px}.auth-form,.form-field{display:flex;flex-direction:column}.form-field{gap:6px}.form-field label{color:#9dd982;font-family:Montserrat,sans-serif;font-size:13px;font-weight:600}.form-field input{background-color:#ffffff0d;border:2px solid #ffffff1a;border-radius:12px;box-sizing:border-box;color:#fff;font-family:Montserrat,sans-serif;font-size:15px;padding:14px 16px;transition:all .2s;width:100%}.form-field input:focus{background-color:#9dd9820d;border-color:#9dd982;outline:none}.form-field input::placeholder{color:#666}.auth-error{background-color:#eb7e7a33;border:1px solid #eb7e7a66;border-radius:10px;color:#eb7e7a}.auth-error,.auth-message{font-family:Montserrat,sans-serif;font-size:13px;padding:12px;text-align:center}.auth-message{background-color:#9dd98233;border:1px solid #9dd98266;border-radius:10px;color:#9dd982}.auth-submit-btn{background:linear-gradient(135deg,#9dd982,#79b4d3);border:none;border-radius:12px;color:#1e1e26;cursor:pointer;font-family:Montserrat,sans-serif;font-size:16px;font-weight:700;margin-top:8px;padding:16px;transition:all .2s;width:100%}.auth-submit-btn:hover:not(:disabled){box-shadow:0 8px 20px #9dd98266;transform:translateY(-2px)}.auth-submit-btn:active:not(:disabled){transform:translateY(0)}.auth-submit-btn:disabled{cursor:not-allowed;opacity:.6}.rotating{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.auth-footer{border-top:1px solid #ffffff1a;display:flex;flex-direction:column;gap:12px;margin-top:24px;padding-top:24px}.auth-link{background:#0000;border:none;color:#888;cursor:pointer;font-family:Montserrat,sans-serif;font-size:14px;text-align:center;transition:color .2s}.auth-link:hover{color:#9dd982}.auth-link strong{color:#9dd982;font-weight:600}@media (max-width:480px){.auth-modal-content{padding:30px 20px}.auth-header h2{font-size:22px}}.user-profile-btn{align-items:center;background:linear-gradient(135deg,#9dd982,#79b4d3);border:none;border-radius:12px;color:#1e1e26;cursor:pointer;display:flex;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;gap:8px;padding:10px 16px;transition:all .2s}.user-profile-btn:hover{box-shadow:0 4px 12px #9dd98266;transform:translateY(-2px)}.user-icon{flex-shrink:0;height:20px;width:20px}.user-text{display:block;white-space:nowrap}.user-profile{position:relative;width:100%}.user-avatar{align-items:center;background:linear-gradient(135deg,#9dd982,#79b4d3);border:none;border-radius:50%;color:#1e1e26;cursor:pointer;display:flex;font-family:Montserrat,sans-serif;font-size:16px;font-weight:700;height:40px;justify-content:center;transition:all .2s;width:40px}.user-avatar:hover{box-shadow:0 4px 12px #9dd98266;transform:scale(1.1)}.menu-backdrop{bottom:0;left:0;position:fixed;right:0;top:0;z-index:999}.user-menu{animation:slideDown .2s ease-out;background:linear-gradient(135deg,#2d2d3a,#1e1e26);border-radius:16px;box-shadow:0 10px 40px #00000080;position:absolute;right:0;top:calc(100% + 10px);width:280px;z-index:1000}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-menu-header{align-items:center;display:flex;gap:12px;padding:20px}.user-avatar-large{align-items:center;background:linear-gradient(135deg,#9dd982,#79b4d3);border-radius:50%;color:#1e1e26;display:flex;flex-shrink:0;font-family:Montserrat,sans-serif;font-size:20px;font-weight:700;height:50px;justify-content:center;width:50px}.user-info{flex:1 1;min-width:0}.user-name{color:#fff;font-size:16px;font-weight:700}.user-email,.user-name{font-family:Montserrat,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-email{color:#888;font-size:12px;margin-top:2px}.user-menu-divider{background-color:#ffffff1a;height:1px;margin:0 12px}.user-menu-item{align-items:center;background:#0000;border:none;color:#888;cursor:pointer;display:flex;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;gap:12px;padding:14px 20px;text-align:left;transition:all .2s;width:100%}.user-menu-item:hover{background-color:#ffffff0d;color:#fff}.user-menu-item i{font-size:18px}@media (max-width:1023px){.user-profile-btn{border-radius:50%;height:40px;justify-content:center;padding:0;width:40px}.user-text{display:none}.user-icon{height:22px;width:22px}.user-menu{left:50%;right:auto;transform:translateX(-50%)}}@media (min-width:1024px){.user-profile-btn{justify-content:center;padding:12px 16px;width:100%}.user-icon{height:20px;width:20px}.user-text{display:block}.user-profile{width:100%}.user-avatar{border-radius:12px;font-size:18px;height:48px;width:100%}.user-avatar:hover{transform:translateY(-2px)}.user-menu{left:calc(100% + 10px);right:auto;top:0}}.navbar{align-items:center;background-color:#1e1e26;border-top:1px solid #3a3a4a;bottom:0;display:flex;justify-content:space-between;left:0;padding:6px 15px max(6px,env(safe-area-inset-bottom));position:fixed;right:0;z-index:100}.nav-acordes-section,.nav-spacer{display:none}.nav-item,.nav-user{align-items:center;display:flex;justify-content:center}.nav-item{-webkit-tap-highlight-color:transparent;background:none;border:none;border-radius:8px;color:#666;cursor:pointer;flex-direction:column;font-family:Montserrat,sans-serif;font-size:10px;font-weight:600;gap:2px;min-width:50px;padding:8px 12px;touch-action:manipulation;transition:all .2s ease}.nav-icon{flex-shrink:0;height:22px;width:22px}.nav-text{display:none}.nav-item:hover{color:#888}.nav-item.active{color:#9dd982}.nav-item:active{transform:scale(.95)}@media (min-width:1024px){.navbar{align-items:stretch;border-right:1px solid #3a3a4a;border-top:none;bottom:0;flex-direction:column;gap:8px;justify-content:flex-start;left:0;padding:20px 12px;position:fixed;right:auto;top:0;width:220px}.navbar:before{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#9dd982,#b579d3);-webkit-background-clip:text;background-clip:text;content:"Perfect Sound";display:block;font-family:Montserrat,sans-serif;font-size:20px;font-weight:700;padding:10px 15px 30px;text-align:center}.nav-spacer{flex:1 1}.nav-user{border-bottom:1px solid #ffffff1a;border-top:1px solid #ffffff1a;padding:20px 12px}.nav-acordes-section{display:block;padding:20px 12px 0}.nav-acordes-header{align-items:center;display:flex;justify-content:flex-start;margin-bottom:12px}.nav-acordes-title{color:#888;font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.nav-acordes-list{display:flex;flex-direction:column;gap:4px}.nav-acordes-empty{color:#666;font-family:Montserrat,sans-serif;font-size:12px;padding:12px;text-align:center}.nav-acordes-item{align-items:flex-start;background:#0000;border:none;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:10px 12px;text-align:left;transition:all .2s}.nav-acordes-item:hover{background-color:#ffffff0d}.nav-acordes-name{color:#fff;font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.nav-acordes-meta{font-size:11px}.nav-acordes-meta,.nav-acordes-more{color:#888;font-family:Montserrat,sans-serif}.nav-acordes-more{background:#0000;border:1px dashed #fff3;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;margin-top:4px;padding:8px 12px;transition:all .2s}.nav-acordes-more:hover{background-color:#9dd9820d;border-color:#9dd982;color:#9dd982}.nav-item{border-radius:12px;flex-direction:row;font-size:14px;gap:12px;justify-content:flex-start;padding:14px 18px}.nav-icon{height:20px;width:20px}.nav-text{display:block}.nav-item:hover{background-color:#ffffff0d;color:#fff}.nav-item.active{background-color:#9dd98226;color:#9dd982}.nav-item:active{transform:none}}.App{background-color:#1e1e26;bottom:0;color:#fff;display:flex;flex-direction:column;left:0;overflow:hidden;position:fixed;right:0;top:0}@media (min-width:1024px){.App{flex-direction:row;padding-left:220px}.App>.advanced-editor,.App>.advanced-page,.App>.main-page,.App>.songs-page{background-color:#2a2a34;border-radius:24px;box-shadow:0 4px 30px #0000004d;flex:1 1;margin:20px;overflow:hidden}.App>.scales-page{background-color:initial;border-radius:0;box-shadow:none;flex:1 1;margin:0}}