[data-v-1540f6ba]{margin:0;padding:0;box-sizing:border-box}.container[data-v-1540f6ba]{max-width:1200px;margin:0 auto;padding:20px;font-family:Arial,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;min-height:100vh}.header[data-v-1540f6ba]{text-align:center;margin-bottom:30px}.header h1[data-v-1540f6ba]{font-size:2.5rem;margin-bottom:10px;color:gold}.back-btn[data-v-1540f6ba]{position:fixed;top:20px;left:20px;display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:linear-gradient(135deg,#1a7b86,#2a9d8f);color:#fff;text-decoration:none;border-radius:25px;font-weight:600;font-size:.95rem;box-shadow:0 4px 15px #1a7b8666;transition:all .3s ease;z-index:1000}.back-btn[data-v-1540f6ba]:hover{background:linear-gradient(135deg,#2a9d8f,#1a7b86);transform:translate(-3px);box-shadow:0 6px 20px #1a7b8699}.back-btn[data-v-1540f6ba]:before{content:"";display:inline-block;width:0;height:0}.sequencer-header[data-v-1540f6ba]{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.sequencer-header h3[data-v-1540f6ba]{color:gold;margin:0}.select-pattern-btn[data-v-1540f6ba]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:10px 20px;border-radius:25px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea66}.select-pattern-btn[data-v-1540f6ba]:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.modal-overlay[data-v-1540f6ba]{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content[data-v-1540f6ba]{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:20px;width:90%;max-width:800px;max-height:85vh;overflow:hidden;box-shadow:0 20px 60px #00000080;border:1px solid rgba(255,255,255,.1)}.modal-header[data-v-1540f6ba]{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.1)}.modal-header h3[data-v-1540f6ba]{margin:0;color:gold;font-size:1.5rem}.close-btn[data-v-1540f6ba]{background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s}.close-btn[data-v-1540f6ba]:hover{background:#ffffff1a;transform:rotate(90deg)}.modal-body[data-v-1540f6ba]{padding:25px;overflow-y:auto;max-height:calc(85vh - 80px)}.preset-categories[data-v-1540f6ba]{display:flex;flex-direction:column;gap:20px}.preset-category[data-v-1540f6ba]{background:#ffffff08;border-radius:12px;padding:15px 20px}.preset-category h4[data-v-1540f6ba]{margin:0 0 12px;color:#4ecdc4;font-size:1rem;font-weight:600}.preset-category .preset-buttons[data-v-1540f6ba]{display:flex;flex-wrap:wrap;gap:10px;margin:0}.preset-category .preset-btn[data-v-1540f6ba]{background:linear-gradient(135deg,#74b9ff,#0984e3);border:none;padding:8px 16px;border-radius:20px;color:#fff;font-weight:500;cursor:pointer;transition:all .3s;font-size:.9rem}.preset-category .preset-btn[data-v-1540f6ba]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #74b9ff66}.preset-grid[data-v-1540f6ba]{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px;padding:10px}.preset-card[data-v-1540f6ba]{background:linear-gradient(135deg,#74b9ff1a,#0984e31a);border:1px solid rgba(116,185,255,.3);border-radius:12px;padding:15px 10px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:all .3s}.preset-card[data-v-1540f6ba]:hover{transform:translateY(-3px);box-shadow:0 6px 20px #74b9ff4d;border-color:#74b9ff99}.preset-name[data-v-1540f6ba]{color:#fff;font-weight:600;font-size:.95rem;text-align:center;min-height:40px;display:flex;align-items:center;justify-content:center}.preset-actions[data-v-1540f6ba]{display:flex;gap:8px;width:100%}.preset-actions button[data-v-1540f6ba]{flex:1;padding:8px 10px;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s}.preview-btn[data-v-1540f6ba]{background:linear-gradient(135deg,#00b894,#00a383);color:#fff}.preview-btn[data-v-1540f6ba]:hover{background:linear-gradient(135deg,#00a383,#00b894);transform:scale(1.05)}.select-btn[data-v-1540f6ba]{background:linear-gradient(135deg,#fdcb6e,#e17055);color:#fff}.select-btn[data-v-1540f6ba]:hover{background:linear-gradient(135deg,#e17055,#fdcb6e);transform:scale(1.05)}.export-section-main[data-v-1540f6ba]{display:flex;justify-content:center;gap:20px;margin:20px 0;padding:20px;background:#ffffff0d;border-radius:10px}.export-section-main .export-btn[data-v-1540f6ba]{background:#00b894;padding:12px 30px;font-size:1rem}.export-section-main .export-btn[data-v-1540f6ba]:hover{background:#00a383}.tab-content[data-v-1540f6ba]{min-height:400px;animation:fadeIn-1540f6ba .3s ease}.tab-pane[data-v-1540f6ba]{width:100%}@keyframes fadeIn-1540f6ba{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.export-card[data-v-1540f6ba]{background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;box-shadow:0 8px 32px #0003}.export-card-header[data-v-1540f6ba]{text-align:center;margin-bottom:30px}.export-icon-wrap[data-v-1540f6ba]{width:72px;height:72px;margin:0 auto 16px;background:linear-gradient(135deg,#74b9ff,#0984e3);border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px #74b9ff4d}.export-main-icon[data-v-1540f6ba]{font-size:2.2rem}.export-card-header h3[data-v-1540f6ba]{font-size:1.4rem;color:#fff;margin-bottom:8px}.export-card-header p[data-v-1540f6ba]{color:#fff9;font-size:.9rem}.export-section[data-v-1540f6ba]{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}.export-format-group[data-v-1540f6ba]{display:flex;flex-direction:column;gap:14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px 20px;transition:all .2s}.export-format-group[data-v-1540f6ba]:hover{background:#ffffff1a;border-color:#74b9ff4d}.format-info[data-v-1540f6ba]{display:flex;align-items:center;gap:14px;width:100%}.format-icon[data-v-1540f6ba]{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}.wav-icon[data-v-1540f6ba]{background:linear-gradient(135deg,#00b8944d,#00a3834d);border:1px solid rgba(0,184,148,.4)}.midi-icon[data-v-1540f6ba]{background:linear-gradient(135deg,#fdcb6e4d,#e170554d);border:1px solid rgba(253,203,110,.4)}.format-details[data-v-1540f6ba]{flex:1;min-width:0}.format-name[data-v-1540f6ba]{color:#fff;font-weight:600;font-size:1rem;margin-bottom:4px;line-height:1.4}.format-desc[data-v-1540f6ba]{color:#ffffff80;font-size:.8rem;line-height:1.5;word-break:break-word}.format-btn[data-v-1540f6ba]{width:100%!important;padding:12px 20px!important;border:none!important;border-radius:10px!important;color:#fff!important;font-weight:600!important;font-size:.9rem!important;cursor:pointer;transition:all .2s!important;transform:none!important}.wav-btn[data-v-1540f6ba]{background:linear-gradient(135deg,#00b894,#00a383)!important;box-shadow:0 4px 12px #00b8944d}.wav-btn[data-v-1540f6ba]:hover{background:linear-gradient(135deg,#00d2a3,#00b894)!important;transform:translateY(-1px)!important;box-shadow:0 6px 16px #00b89466}.midi-btn[data-v-1540f6ba]{background:linear-gradient(135deg,#fdcb6e,#e17055)!important;box-shadow:0 4px 12px #e170554d}.midi-btn[data-v-1540f6ba]:hover{background:linear-gradient(135deg,#ffb142,#e17055)!important;transform:translateY(-1px)!important;box-shadow:0 6px 16px #e1705566}.export-tip[data-v-1540f6ba]{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#74b9ff1a;border:1px solid rgba(116,185,255,.2);border-radius:12px;color:#fffc;font-size:.85rem}.tip-icon[data-v-1540f6ba]{font-size:1.1rem}.bottom-nav[data-v-1540f6ba]{position:fixed;bottom:0;left:0;right:0;display:flex;background:#141428f2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.1);padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:100;box-shadow:0 -4px 20px #0000004d}.nav-item[data-v-1540f6ba]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 0;cursor:pointer;transition:all .2s;position:relative}.nav-icon[data-v-1540f6ba]{font-size:1.4rem;transition:all .2s;filter:grayscale(.5);opacity:.6}.nav-label[data-v-1540f6ba]{font-size:.7rem;color:#ffffff80;font-weight:500;letter-spacing:.5px;transition:all .2s}.nav-item.active .nav-icon[data-v-1540f6ba]{filter:grayscale(0);opacity:1;transform:translateY(-2px)}.nav-item.active .nav-label[data-v-1540f6ba]{color:#74b9ff;font-weight:600}.nav-item[data-v-1540f6ba]:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%) scaleX(0);width:24px;height:3px;background:linear-gradient(90deg,#74b9ff,#0984e3);border-radius:0 0 3px 3px;transition:all .2s}.nav-item.active[data-v-1540f6ba]:before{transform:translate(-50%) scaleX(1)}.nav-item[data-v-1540f6ba]:active{background:#ffffff0d}.container[data-v-1540f6ba]{padding-bottom:80px!important}.controls[data-v-1540f6ba]{margin-bottom:20px}.controls-card[data-v-1540f6ba]{background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;box-shadow:0 8px 32px #0003}.control-section[data-v-1540f6ba]{display:flex;flex-direction:column;gap:18px;margin-bottom:24px}.control-row[data-v-1540f6ba]{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.control-item[data-v-1540f6ba]{display:flex;flex-direction:column;gap:8px}.control-label[data-v-1540f6ba]{font-size:.85rem;color:#ffffffb3;font-weight:500;padding-left:4px;letter-spacing:.5px}.control-input-wrap[data-v-1540f6ba]{display:flex;align-items:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:12px;overflow:hidden;height:48px;transition:all .2s}.control-input-wrap[data-v-1540f6ba]:focus-within{border-color:#74b9ff99;background:#ffffff26;box-shadow:0 0 0 3px #74b9ff26}.control-input-wrap input[data-v-1540f6ba]{flex:1;border:none;background:transparent;text-align:center;font-size:1.1rem;font-weight:600;color:#fff;outline:none;width:100%;min-width:0;-moz-appearance:textfield}.control-input-wrap input[data-v-1540f6ba]::-webkit-outer-spin-button,.control-input-wrap input[data-v-1540f6ba]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.step-btn[data-v-1540f6ba]{background:#ffffff14!important;border:none!important;color:#fffc!important;width:40px!important;height:100%!important;font-size:1.2rem!important;font-weight:300!important;cursor:pointer;transition:all .2s!important;border-radius:0!important;padding:0!important;transform:none!important}.step-btn[data-v-1540f6ba]:hover{background:#74b9ff4d!important;color:#fff!important;transform:none!important}.step-btn[data-v-1540f6ba]:active{background:#74b9ff80!important}.beat-selector[data-v-1540f6ba]{display:flex;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:12px;overflow:hidden;height:48px;padding:4px;gap:4px}.beat-option[data-v-1540f6ba]{flex:1;background:transparent!important;border:none!important;color:#ffffffb3!important;font-size:.9rem!important;font-weight:500!important;cursor:pointer;border-radius:8px!important;transition:all .2s!important;padding:0!important;transform:none!important}.beat-option[data-v-1540f6ba]:hover{background:#ffffff14!important;color:#fff!important;transform:none!important}.beat-option.active[data-v-1540f6ba]{background:linear-gradient(135deg,#74b9ff,#0984e3)!important;color:#fff!important;box-shadow:0 2px 8px #74b9ff66;transform:none!important}.action-buttons[data-v-1540f6ba]{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px;margin-top:20px;background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 8px 32px #0003}.action-btn[data-v-1540f6ba]{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:64px!important;border:none!important;border-radius:14px!important;font-size:.85rem!important;font-weight:600!important;cursor:pointer;transition:all .2s!important;padding:8px!important;transform:none!important;color:#fff!important}.action-icon[data-v-1540f6ba]{font-size:1.4rem;line-height:1}.action-text[data-v-1540f6ba]{font-size:.8rem;letter-spacing:.5px}.play-btn[data-v-1540f6ba]{background:linear-gradient(135deg,#00b894,#00a383)!important;box-shadow:0 4px 12px #00b8944d}.play-btn[data-v-1540f6ba]:hover{background:linear-gradient(135deg,#00d2a3,#00b894)!important;transform:translateY(-1px)!important;box-shadow:0 6px 16px #00b89466}.play-btn.active[data-v-1540f6ba]{background:linear-gradient(135deg,#fdcb6e,#e17055)!important;box-shadow:0 4px 12px #e1705566;animation:pulse-1540f6ba 1.5s ease-in-out infinite}@keyframes pulse-1540f6ba{0%,to{box-shadow:0 4px 12px #e1705566}50%{box-shadow:0 4px 20px #e1705599}}.stop-btn[data-v-1540f6ba]{background:linear-gradient(135deg,#636e72,#2d3436)!important;box-shadow:0 4px 12px #2d34364d}.stop-btn[data-v-1540f6ba]:hover{background:linear-gradient(135deg,#b2bec3,#636e72)!important;transform:translateY(-1px)!important;box-shadow:0 6px 16px #2d343666}.clear-btn[data-v-1540f6ba]{background:linear-gradient(135deg,#ff7675,#d63031)!important;box-shadow:0 4px 12px #d630314d}.clear-btn[data-v-1540f6ba]:hover{background:linear-gradient(135deg,#ff5252,#c0392b)!important;transform:translateY(-1px)!important;box-shadow:0 6px 16px #d6303166}.library-btn[data-v-1540f6ba]{background:linear-gradient(135deg,#a29bfe,#6c5ce7)!important;box-shadow:0 4px 12px #6c5ce74d}.library-btn[data-v-1540f6ba]:hover{background:linear-gradient(135deg,#b8b3ff,#7d70f0)!important;transform:translateY(-1px)!important;box-shadow:0 6px 16px #6c5ce766}@media(max-width:768px){.controls-card[data-v-1540f6ba]{padding:18px;border-radius:16px}.control-row[data-v-1540f6ba]{grid-template-columns:1fr}.action-buttons[data-v-1540f6ba]{gap:8px;grid-template-columns:repeat(4,1fr);padding:16px}.action-btn[data-v-1540f6ba]{height:60px!important}.action-text[data-v-1540f6ba]{font-size:.7rem}}@media(max-width:480px){.action-buttons[data-v-1540f6ba]{grid-template-columns:repeat(2,1fr)}}button[data-v-1540f6ba]{padding:10px 20px;border:none;border-radius:5px;background:#ff6b6b;color:#fff;font-weight:700;cursor:pointer;transition:all .3s}button[data-v-1540f6ba]:hover{background:#ff5252;transform:translateY(-2px)}button.active[data-v-1540f6ba]{background:#4ecdc4}.drum-pad[data-v-1540f6ba]{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;padding:10px 0;scrollbar-width:thin;scrollbar-color:#4ecdc4 rgba(255,255,255,.1)}.drum-pad[data-v-1540f6ba]::-webkit-scrollbar{height:6px}.drum-pad[data-v-1540f6ba]::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.drum-pad[data-v-1540f6ba]::-webkit-scrollbar-thumb{background:#4ecdc4;border-radius:3px}.pad[data-v-1540f6ba]{min-width:80px;height:80px;background:linear-gradient(145deg,#2d3436,#636e72);border:none;border-radius:8px;color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .1s;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 2px 8px #0000004d;flex-shrink:0}.pad[data-v-1540f6ba]:hover{transform:scale(1.05)}.pad.active[data-v-1540f6ba]{background:linear-gradient(145deg,#e17055,#fdcb6e);transform:scale(.95)}.pad .note[data-v-1540f6ba]{font-size:.8rem;opacity:.8}.sequencer[data-v-1540f6ba]{background:#ffffff0d;padding:20px;border-radius:10px;margin-bottom:20px;overflow-x:auto}.sequencer h3[data-v-1540f6ba]{margin-bottom:15px;color:gold}.sequencer-grid[data-v-1540f6ba]{display:flex;flex-direction:column;gap:8px;margin-bottom:15px;min-width:max-content}.beat-marker[data-v-1540f6ba]{min-width:100px;text-align:center;padding:10px;background:#ffffff0d;border-radius:5px;font-weight:700;color:gold}.beat-cell[data-v-1540f6ba]{min-width:40px;text-align:center;padding:5px;background:#ffffff05;border-radius:3px;font-size:.8rem;color:#ffffffb3;border-right:2px solid rgba(255,255,255,.1)}.beat-cell.current[data-v-1540f6ba]{background:#ffd70066!important;box-shadow:0 0 10px gold}.sequencer-row[data-v-1540f6ba]{display:flex;align-items:center;gap:0px;min-width:max-content}.drum-name[data-v-1540f6ba]{min-width:100px;text-align:center;padding:10px;background:#ffffff1a;border-radius:5px;font-weight:700;cursor:pointer;transition:all .2s}.drum-name[data-v-1540f6ba]:hover{background:#fff3}.step-cell[data-v-1540f6ba]{min-width:40px;aspect-ratio:1;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-right:2px solid rgba(255,255,255,.1);border-radius:5px;cursor:pointer;transition:all .2s;padding:5px}.step-cell[data-v-1540f6ba]:hover{background:#fff3}.step-cell.active[data-v-1540f6ba]{background:#4ecdc4;border-color:#4ecdc4}.step-cell.current[data-v-1540f6ba]{border-color:gold;box-shadow:0 0 10px gold}.presets[data-v-1540f6ba]{background:#ffffff1a;padding:20px;border-radius:10px}.presets h3[data-v-1540f6ba]{margin-bottom:15px;color:gold}.preset-buttons[data-v-1540f6ba]{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}.preset-btn[data-v-1540f6ba]{background:#74b9ff}.preset-btn[data-v-1540f6ba]:hover{background:#5aa3e8}.export-section[data-v-1540f6ba]{display:flex;gap:10px;margin-top:10px}.export-btn[data-v-1540f6ba]{background:#00b894}.export-btn[data-v-1540f6ba]:hover{background:#00a383}.status[data-v-1540f6ba]{text-align:center;margin-top:20px;font-size:1.1rem;color:gold}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;min-height:100vh}