*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:#0a0a0a}.looper-app{height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;display:flex;flex-direction:column;overflow:hidden}.looper-interface{padding:2rem 2rem 0rem;width:100%;display:flex;flex-direction:column;height:100%;overflow:hidden}.header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:2rem;gap:2rem;flex-shrink:0;position:sticky;top:0;background:linear-gradient(135deg,#1a1a2e,#16213e);z-index:100;padding-bottom:1rem}.main{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.header-left{display:flex;justify-content:flex-start}.app-name{font-size:2rem;font-weight:700;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.status{display:flex;align-items:center;justify-content:center;gap:1rem;font-size:1.1rem}.mic-indicator{font-size:1.5rem;opacity:.5;transition:all .3s}.mic-indicator.active{opacity:1;animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.tracks-list{margin:0;width:100%;flex:1;overflow-y:auto;overflow-x:hidden;padding-right:1rem}.track-row{background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:15px;padding:.5rem;margin-bottom:1rem;display:flex;flex-direction:column;transition:all .3s;gap:.5rem}.track-main{display:flex;justify-content:flex-start;align-items:center;gap:2rem;overflow:hidden;min-width:0}.track-row.playing{border-color:#4ecdc4;background:#4ecdc41a;box-shadow:0 0 20px #4ecdc433}.track-row.recording{border-color:#ff6b6b;background:#ff6b6b1a;box-shadow:0 0 20px #ff6b6b4d}.track-info{display:flex;flex-direction:column;gap:.5rem;width:fit-content;flex-shrink:0}.track-number{font-size:1.6rem;font-weight:700;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-left:10px}.track-status{font-size:1rem;opacity:.8}.track-controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-start;flex-shrink:0;min-width:0}.audio-controls{display:flex;flex-direction:row;gap:1rem;align-items:flex-start;width:315px;flex-shrink:0}.volume-control{display:flex;flex-direction:row;align-items:center;gap:.5rem;width:100%}.distortion-control{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;width:100%;margin-top:10px}.volume-slider,.distortion-slider{width:100px;height:4px;background:#fff3;border-radius:2px;outline:none;cursor:pointer}.distortion-slider{width:50px;background:#ff6b6b33}.mute-btn,.solo-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.3rem .5rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s;min-width:32px;height:28px;display:flex;align-items:center;justify-content:center}.mute-btn{--bg-base: rgba(255, 255, 255, .1);--bd-base: rgba(255, 255, 255, .2);--bg-solo: rgba(203, 107, 255, .3);--bd-solo: rgba(174, 107, 255, .5);background:var(--bg-base);border:1px solid var(--bd-base)}.solo-btn.solo{background:#ff6b6b4d;border-color:#ff6b6b80}.mute-btn:hover{background:#fff3;transform:scale(1.05)}.mute-btn.muted{background:#ff6b6b4d;border-color:#ff6b6b80}.mute-btn.solo-muted{background:#cb6bff4d;border-color:#ae6bff80;animation:soloPulse 1.2s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.mute-btn.solo-muted{animation:none}}@keyframes soloPulse{0%,to{background:var(--bg-base);border-color:var(--bd-base)}50%{background:var(--bg-solo);border-color:var(--bd-solo)}}.volume-slider.muted{background:#ff6b6b4d}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:linear-gradient(45deg,#3498db,#2980b9);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000004d;margin-top:-6px}.volume-slider::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(45deg,#3498db,#2980b9);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0000004d}.volume-control .volume-slider.muted::-webkit-slider-thumb,.volume-control .volume-slider[data-muted=true]::-webkit-slider-thumb{background:red!important;border:2px solid #ff0000!important}.volume-control .volume-slider.muted::-moz-range-thumb,.volume-control .volume-slider[data-muted=true]::-moz-range-thumb{background:red!important;border:2px solid #ff0000!important}.distortion-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:linear-gradient(45deg,#ff6b6b,#e74c3c);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000004d}.distortion-slider::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(45deg,#ff6b6b,#e74c3c);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0000004d}.volume-label,.distortion-label{font-size:.8rem;opacity:.7;min-width:50px;text-align:center}.distortion-label{color:#ff6b6b}.trim-toggle-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.8rem;border-radius:10px;cursor:pointer;font-size:1.2rem;transition:all .2s;min-width:50px}.trim-toggle-btn:hover{background:#fff3;transform:scale(1.1)}.trim-toggle-btn.active{background:linear-gradient(45deg,#ff9f43,#feca57);border-color:#ff9f43}.reverb-chip{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#ffffffb3;padding:.4rem .8rem;border-radius:20px;cursor:pointer;font-size:.5rem;font-weight:700;transition:all .3s;text-align:center;min-width:60px;-webkit-user-select:none;user-select:none}.reverb-chip:hover{background:#ffffff26;transform:translateY(-1px);box-shadow:0 2px 8px #0003}.reverb-chip.active{background:linear-gradient(45deg,#27ae60,#2ecc71);border-color:#27ae60;color:#fff;box-shadow:0 2px 10px #27ae6066}.eq-chip{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#ffffffb3;padding:.4rem .8rem;border-radius:20px;cursor:pointer;font-size:.5rem;font-weight:700;transition:all .3s;text-align:center;min-width:40px;-webkit-user-select:none;user-select:none}.eq-chip:hover{background:#ffffff26;transform:translateY(-1px);box-shadow:0 2px 8px #0003}.eq-chip.active{background:linear-gradient(45deg,#f39c12,#e74c3c);border-color:#f39c12;color:#fff;box-shadow:0 2px 10px #f39c1266}.octave-chip{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#ffffffb3;padding:.4rem .8rem;border-radius:20px;cursor:pointer;font-size:.8rem;font-weight:700;transition:all .3s;text-align:center;margin-left:.5rem}.octave-chip:hover{background:#ffffff26;transform:translateY(-1px);box-shadow:0 2px 8px #0003}.octave-chip.active{background:linear-gradient(45deg,#8e44ad,#3498db);border-color:#8e44ad;color:#fff;box-shadow:0 2px 10px #8e44ad66}.octave-chip.converting{background:linear-gradient(45deg,#f39c12,#e74c3c);border-color:#f39c12;animation:converting-pulse 1s infinite}.octave-chip.tone-active{background:linear-gradient(45deg,#27ae60,#2ecc71);border-color:#27ae60;box-shadow:0 2px 10px #27ae6066}@keyframes converting-pulse{0%,to{opacity:1}50%{opacity:.6}}.reverb-controls-row{background:#0000004d;border-radius:10px;padding:1rem;margin-top:.5rem;display:flex;justify-content:space-around;align-items:center;gap:1rem}.reverb-section{display:flex;flex-direction:column;align-items:center;gap:.5rem}.reverb-label{font-size:.9rem;font-weight:700;color:#3498db}.reverb-slider{width:80px;height:4px;background:#3498db33;border-radius:2px;outline:none;cursor:pointer}.reverb-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:linear-gradient(45deg,#3498db,#2980b9);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000004d}.reverb-slider::-moz-range-thumb{width:14px;height:14px;background:linear-gradient(45deg,#3498db,#2980b9);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0000004d}.eq-controls-row{background:#0000004d;border-radius:10px;padding:1rem;margin-top:.5rem;display:flex;justify-content:space-around;align-items:center;gap:1rem}.eq-section{display:flex;flex-direction:column;align-items:center;gap:.5rem}.eq-label{font-size:.9rem;font-weight:700;color:#f39c12}.eq-slider{width:80px;height:4px;background:#f39c1233;border-radius:2px;outline:none;cursor:pointer}.eq-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:linear-gradient(45deg,#f39c12,#e74c3c);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000004d}.eq-slider::-moz-range-thumb{width:14px;height:14px;background:linear-gradient(45deg,#f39c12,#e74c3c);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0000004d}.trim-controls-row{background:#0000004d;border-radius:10px;padding:1rem;margin-top:.5rem;display:flex;justify-content:space-around;align-items:center;gap:2rem}.trim-section{display:flex;flex-direction:column;align-items:center;gap:.5rem}.trim-label{font-size:.9rem;font-weight:700;color:#feca57}.trim-buttons{display:flex;gap:.5rem}.trim-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem .8rem;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s;min-width:35px;font-weight:700}.trim-btn:hover{background:#fff3;transform:scale(1.1)}.overlap-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.8rem;border-radius:10px;cursor:pointer;font-size:1.2rem;transition:all .2s;min-width:50px}.overlap-btn:hover{background:#fff3;transform:scale(1.1)}.overlap-btn.active{background:linear-gradient(45deg,#e74c3c,#c0392b);border-color:#e74c3c}.track-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.3rem;border-radius:10px;cursor:pointer;font-size:1.2rem;transition:all .2s;min-width:50px}.track-btn:hover{background:#fff3;transform:scale(1.1)}.track-btn.active{background:linear-gradient(45deg,#4ecdc4,#44a08d);border-color:#4ecdc4}.loop-position-indicator{display:flex;gap:2px;margin:4px 0;padding:2px;background:#ffffff0d;border-radius:4px;height:12px;align-items:center;overflow-x:auto;max-width:100%}.track-segments-container{display:flex;gap:6px;margin:8px 0;padding:8px 0;height:20px;align-items:center;width:100%}.track-segments-right{margin:0;margin-left:1rem;padding:0;width:auto;flex-shrink:0}.track-segment{width:60px;min-width:60px;height:24px;background:#8e44ad66;border-radius:3px;position:relative;overflow:hidden;border:1px solid rgba(142,68,173,.6)}.track-segment.active{background:#8e44ad80;border-color:#8e44adcc}.segment-progress-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#8e44ad,#9b59b6);border-radius:1px;transition:width .1s ease-out}.track-segment.active .segment-progress-fill{background:linear-gradient(90deg,#4ecdc4,#44a08d);box-shadow:0 0 4px #4ecdc480}.track-segment.sync-with-first,.track-segment.skipped{background:#ff6b6b66;border-color:#ff6b6b99}.track-segment.sync-with-first.active{background:#4ecdc480;border-color:#4ecdc4cc}.track-segment.sync-with-first .segment-progress-fill{background:linear-gradient(90deg,#ff6b6b,#e74c3c)}.track-segment.sync-with-first.active .segment-progress-fill{background:linear-gradient(90deg,#4ecdc4,#44a08d);box-shadow:0 0 4px #4ecdc480}.rest-segment{background:#80808066!important;border:1px solid rgba(128,128,128,.6)!important;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.rest-segment:hover{background:#ff6b6b99!important;border-color:#ff6b6bcc!important;transform:scale(1.1)}.rest-segment.rest-completed{background:#a0a0a099!important;border-color:#a0a0a0cc!important}.rest-segment.rest-active{background:#b4b4b4b3!important;border-color:#b4b4b4e6!important}.rest-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);z-index:2}.rest-progress-fill{position:absolute;top:0;left:0;height:100%;background:#c8c8c8cc;border-radius:1px;transition:width .1s ease-out;z-index:1}.rest-plus-btn{width:20px;height:20px;min-width:20px;background:#4caf5099;border:1px solid rgba(76,175,80,.8);border-radius:50%;color:#fff;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;margin:0 2px}.rest-plus-btn:hover{background:#4caf50cc;transform:scale(1.2);box-shadow:0 2px 4px #4caf5066}.big-controls-section{display:flex;justify-content:flex-start;align-items:center;gap:2rem;margin-bottom:1rem;flex-shrink:0;padding:1rem 0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.big-controls-section::-webkit-scrollbar{display:none}@media (max-width: 688px){.big-control-item-shrink{max-width:15%}.big-stop-btn,.big-play-btn,.big-trash-btn{width:40px!important;height:40px!important}.stop-square{border-radius:8px!important}.play-triangle{border-left:40px solid #27ae60!important;border-top:26px solid transparent!important;border-bottom:26px solid transparent!important}}@media (max-width: 480px){.big-controls-section{gap:.05rem;padding:.1rem 0}.looper-interface{padding:.5rem}.header{flex-wrap:wrap;gap:1rem;padding-bottom:.5rem}.big-record-btn,.big-stop-btn,.big-play-btn,.big-trash-btn{width:40px!important;height:40px!important}.noodle-emoji{font-size:1.4rem!important}.stop-square{width:16px!important;height:16px!important}.play-triangle{border-left:20px solid #4ecdc4!important;border-top:12px solid transparent!important;border-bottom:12px solid transparent!important}.trash-can{font-size:1.4rem!important}.control-label{font-size:.5rem!important}.big-control-item{margin:0;padding:0}}.big-control-item{display:flex;flex-direction:column;align-items:center}.big-control-item.invisible{opacity:0;pointer-events:none;transition:opacity .3s ease}.big-record-btn{width:150px;height:150px;border:none;background:transparent;cursor:pointer;transition:all .3s;padding:0}.big-record-btn:hover{transform:scale(1.1)}.record-circle{width:100%;height:100%;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:10rem;transition:all .3s;box-shadow:0 10px 30px #0003;position:relative;overflow:hidden}.noodle-emoji{position:absolute;font-size:9rem;z-index:1;pointer-events:none;transition:all .3s ease;opacity:.75;filter:brightness(.75)}.noodle-emoji.recording-pulse{animation:noodle-pulse .6s ease-in-out infinite alternate}@keyframes noodle-pulse{0%{transform:scale(1);opacity:.9;filter:brightness(.95)}to{transform:scale(1.05);opacity:1;filter:brightness(1.1)}}.loop-progress-ring{position:absolute;top:-10px;left:-10px;width:calc(100% + 20px);height:calc(100% + 20px);pointer-events:none}.big-record-btn.recording .record-circle{background:transparent;box-shadow:0 10px 40px #e74c3c80;filter:brightness(1.05)}.big-record-btn.deferred-recording .record-circle{background:transparent;animation:deferred-pulse 2s infinite;box-shadow:0 10px 40px #8e44ad66}@keyframes deferred-pulse{0%,to{transform:scale(1);box-shadow:0 10px 30px #8e44ad4d}50%{transform:scale(1.02);box-shadow:0 15px 50px #8e44ad80}}.big-record-btn.record-soon-mode .record-circle{background:transparent;animation:record-soon-pulse 1.5s infinite;box-shadow:0 10px 40px #3498db66}.big-record-btn.countdown-active .record-circle{background:transparent;box-shadow:0 10px 40px #8e44ad80;filter:brightness(1.05)}.big-record-btn.beat-flashing .record-circle{background:#6633994d;animation:strong-beat-pulse .15s ease-out;box-shadow:0 0 80px #639;border:4px solid rgba(102,51,153,.8)}.big-record-btn.recording.beat-flashing .record-circle{background:#e74c3c4d!important;animation:strong-red-pulse .15s ease-out!important;box-shadow:0 0 80px #e74c3c!important;border:4px solid rgba(231,76,60,.8)!important;filter:none!important}@keyframes strong-beat-pulse{0%{transform:scale(1);background:#6633991a;box-shadow:0 0 40px #6399;border:2px solid rgba(102,51,153,.4)}50%{transform:scale(1.03);background:#6399;box-shadow:0 0 120px #639;border:6px solid rgba(102,51,153,1);filter:brightness(1.8) saturate(1.5)}to{transform:scale(1);background:#6393;box-shadow:0 0 60px #639c;border:3px solid rgba(102,51,153,.6)}}@keyframes strong-red-pulse{0%{transform:scale(1);background:#e74c3c1a;box-shadow:0 0 40px #e74c3c99;border:2px solid rgba(231,76,60,.4)}50%{transform:scale(1.03);background:#e74c3c99;box-shadow:0 0 120px #e74c3c;border:6px solid rgba(231,76,60,1);filter:brightness(1.8) saturate(1.5)}to{transform:scale(1);background:#e74c3c33;box-shadow:0 0 60px #e74c3ccc;border:3px solid rgba(231,76,60,.6)}}@keyframes record-soon-pulse{0%,to{transform:scale(1);box-shadow:0 10px 30px #3498db4d}50%{transform:scale(1.03);box-shadow:0 15px 50px #3498db80}}@keyframes countdown-flash{0%,50%{transform:scale(1);box-shadow:0 10px 30px #fffc;filter:brightness(1.5)}51%,to{transform:scale(1.1);box-shadow:0 15px 60px #ffffff4d;filter:brightness(.7)}}@keyframes record-pulse{0%,to{transform:scale(1);box-shadow:0 10px 30px #e74c3c4d}50%{transform:scale(1.05);box-shadow:0 15px 60px #e74c3c80}}@keyframes sauce-drip{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(5px) rotate(2deg)}}.big-stop-btn{width:150px;height:150px;border:none;background:transparent;cursor:pointer;transition:all .3s;padding:0}.big-stop-btn:hover{transform:scale(1.1)}.stop-square{width:100%;height:100%;background:#f33;display:flex;align-items:center;justify-content:center;font-size:4rem;transition:all .3s;box-shadow:0 10px 30px #f336;border-radius:20px}.big-stop-btn:hover .stop-square{background:#f66;box-shadow:0 15px 50px #f33c}.big-play-btn{width:150px;height:150px;border:none;background:transparent;cursor:pointer;transition:all .3s;padding:0}.big-play-btn:hover{transform:scale(1.1)}.play-triangle{width:0;height:0;border-left:110px solid #27ae60;border-top:65px solid transparent;border-bottom:65px solid transparent;margin:0 auto;transition:all .3s;filter:drop-shadow(0 10px 30px rgba(39,174,96,.4))}.big-play-btn:hover .play-triangle{border-left-color:#2ecc71;filter:drop-shadow(0 15px 60px rgba(39,174,96,.8))}.big-trash-btn{width:150px;height:150px;border:none;background:transparent;cursor:pointer;transition:all .3s;padding:0}.big-trash-btn:hover{transform:scale(1.1)}.trash-can{width:100%;height:100%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:8rem;transition:all .3s}.big-trash-btn:hover .trash-can{filter:drop-shadow(0 0 20px rgba(231,76,60,.8));color:#e74c3c}.big-trash-btn.confirming .trash-can{color:#e74c3c;animation:pulse-warning 1s infinite}@keyframes pulse-warning{0%,to{transform:scale(1);filter:drop-shadow(0 0 20px rgba(231,76,60,.8))}50%{transform:scale(1.1);filter:drop-shadow(0 0 40px rgba(231,76,60,1))}}.control-label{margin-top:1rem;font-size:1.3rem;font-weight:700;text-align:center;min-height:2.6rem;display:flex;align-items:center;justify-content:center;width:200px;transition:all .3s ease}.control-label.clickable{cursor:pointer;border-radius:10px;padding:.5rem}.control-label.clickable:hover{color:#3498db;background:#3498db1a;transform:translateY(-1px)}.rotation-indicator{margin-top:.5rem;font-size:.9rem;color:#8e44ad;text-align:center;font-weight:700}.loop-progress-container{margin-top:.4rem;width:100%}.loop-progress-bar{width:100%;height:8px;background:#000;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}.loop-progress-fill{height:100%;background:#27ae60;border-radius:3px}.record-stop-square{position:absolute;width:60px;height:60px;background:#000;border-radius:8px;z-index:2}.control-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.8rem 1.5rem;border-radius:25px;cursor:pointer;font-size:1rem;transition:all .2s}.control-btn:hover:not(:disabled){background:#fff3;transform:translateY(-2px)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.active{background:linear-gradient(45deg,#4ecdc4,#44a08d);border-color:#4ecdc4}.master-controls{display:flex;justify-content:center;gap:2rem}.play-all-btn{background:linear-gradient(45deg,#4ecdc4,#44a08d)}.play-all-btn:hover{box-shadow:0 5px 15px #4ecdc466}.stop-all-btn,.clear-all-btn{background:linear-gradient(45deg,#ff6b6b,#ee5a24)}.stop-all-btn:hover,.clear-all-btn:hover{box-shadow:0 5px 15px #ff6b6b66}.group-row{display:flex;align-items:center;gap:12px}.group-label{width:fit-content;font-weight:600}.group-row .volume-control{display:flex;align-items:center;gap:6px;width:20%}.group-record{font-size:18px}.collapse-btn{margin-left:auto;padding:4px 8px;width:fit-content}.collapse-enter-active,.collapse-leave-active{transition:max-height .18s ease;overflow:hidden}.collapse-enter-from,.collapse-leave-to{max-height:0}.collapse-enter-to,.collapse-leave-from{max-height:1000px}.group-row{padding:1rem}@media (max-width: 768px){.big-record-btn{width:150px;height:150px}.record-circle{font-size:3rem}.master-controls{flex-direction:column;align-items:center;gap:1rem}.header h1{font-size:2rem}.track-row{padding:1rem}.track-main{flex-direction:column;gap:1rem;text-align:center}.track-controls{justify-content:center;gap:.25rem}.track-info{text-align:center;width:100%}.volume-control{min-width:100px}.volume-slider{width:80px}.trim-controls-row{flex-direction:column;gap:1rem}.trim-section{text-align:center}}.bg-flash-count-in{background:#40008d}.bg-flash-recording{background:#450000}.header{display:flex;justify-content:space-between;align-items:center;width:100%}.header-left{display:flex;align-items:center;gap:1rem}.current-song{font-size:.9rem;opacity:.7;font-style:italic}.header-right{display:flex;gap:.5rem}.header-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .2s}.header-btn:hover:not(:disabled){background:#fff3;transform:translateY(-1px)}.header-btn:disabled{opacity:.5;cursor:not-allowed}.save-btn{background:linear-gradient(45deg,#27ae60,#2ecc71);border-color:#27ae60}.load-btn{background:linear-gradient(45deg,#3498db,#2980b9);border-color:#3498db}.replay-btn{background:linear-gradient(45deg,#9b59b6,#8e44ad);border-color:#9b59b6}.replay-btn.replay-active{background:linear-gradient(45deg,#e74c3c,#c0392b);border-color:#e74c3c}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:linear-gradient(135deg,#2c3e50,#34495e);border-radius:15px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 40px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem 1rem;border-bottom:1px solid rgba(255,255,255,.1)}.modal-header h3{margin:0;color:#fff;font-size:1.4rem}.modal-close{background:none;border:none;color:#ffffffb3;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:50%;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.modal-close:hover{background:#ffffff1a;color:#fff}.modal-body{padding:1.5rem 2rem 2rem}.no-songs{text-align:center;color:#ffffffb3;padding:2rem 0}.no-songs p{margin:.5rem 0}.songs-list{display:flex;flex-direction:column;gap:1rem}.song-item{display:flex;justify-content:space-between;align-items:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1rem;transition:all .2s}.song-item:hover{background:#ffffff14;transform:translateY(-1px)}.song-item.active{border-color:#4ecdc4;background:#4ecdc41a}.song-info{flex:1}.song-name{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.3rem}.song-date{font-size:.85rem;color:#fff9;margin-bottom:.2rem}.song-tracks{font-size:.8rem;color:#ffffff80}.song-actions{display:flex;gap:.5rem}.action-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem .8rem;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s}.action-btn:hover{background:#fff3;transform:scale(1.05)}.load-song-btn{background:linear-gradient(45deg,#27ae60,#2ecc71);border-color:#27ae60}.delete-btn{background:linear-gradient(45deg,#e74c3c,#c0392b);border-color:#e74c3c}.rename-btn{background:linear-gradient(45deg,#f39c12,#e67e22);border-color:#f39c12}.save-rename-btn{background:linear-gradient(45deg,#27ae60,#2ecc71);border-color:#27ae60}.cancel-rename-btn{background:linear-gradient(45deg,#95a5a6,#7f8c8d);border-color:#95a5a6}.song-name-edit{width:100%}.song-name-input{width:100%;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.3rem .5rem;color:#fff;font-size:1.1rem;font-weight:700}.song-name-input:focus{outline:none;border-color:#3498db;background:#ffffff26}.song-name{cursor:pointer}.song-name:hover{opacity:.8}.rename-actions,.normal-actions{display:flex;gap:.5rem}.save-options-modal{max-width:500px}.save-message{color:#ffffffe6;margin-bottom:.5rem;text-align:center}.save-question{color:#ffffffb3;margin-bottom:2rem;text-align:center;font-size:.95rem}.save-options{display:flex;flex-direction:column;gap:1rem}.save-option-btn{display:flex;align-items:center;gap:1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1rem;color:#fff;cursor:pointer;transition:all .2s;text-align:left}.save-option-btn:hover{background:#ffffff1a;transform:translateY(-2px);box-shadow:0 5px 15px #0000004d}.overwrite-btn{border-color:#3498db4d}.overwrite-btn:hover{border-color:#3498db;background:#3498db1a}.new-song-btn{border-color:#2ecc714d}.new-song-btn:hover{border-color:#2ecc71;background:#2ecc711a}.cancel-btn{border-color:#e74c3c4d}.cancel-btn:hover{border-color:#e74c3c;background:#e74c3c1a}.btn-icon{font-size:2rem;flex-shrink:0}.btn-text{flex:1}.btn-title{font-size:1.1rem;font-weight:700;margin-bottom:.3rem}.btn-desc{font-size:.9rem;opacity:.7}@media (max-width: 768px){.header{flex-direction:column;gap:1rem;text-align:center}.modal-content{width:95%;max-height:90vh}.modal-header,.modal-body{padding:1rem}.song-item{flex-direction:column;gap:1rem;text-align:center}.song-actions{justify-content:center}}