.app-grid{display:grid;grid-template-columns:9fr 3fr;gap:30px;max-width:100%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.main-panel{min-width:0;display:flex;flex-direction:column}.download-sidebar{background:rgba(255,255,255,.15);border-radius:15px;padding:25px;border:1px solid rgba(255,255,255,.25);height:fit-content;max-height:calc(100vh - 60px);overflow-y:auto;position:sticky;top:30px;backdrop-filter:blur(15px);box-shadow:0 8px 32px #0000001a;transition:all .3s ease}.download-sidebar:hover{background:rgba(255,255,255,.2);box-shadow:0 12px 40px #00000026}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:15px;border-bottom:2px solid rgba(255,255,255,.3)}.sidebar-header h2{margin:0;color:#fff;font-size:1.8rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.download-queue,.active-downloads{margin-bottom:25px}.download-queue h3,.active-downloads h3{margin:0 0 15px;color:#fff;font-size:1.3rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.3);display:flex;align-items:center;gap:8px}.download-queue h3:before{content:"📋";font-size:1.1rem}.active-downloads h3:before{content:"⚡";font-size:1.1rem}.queue-item,.download-item{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(8px);box-shadow:0 4px 16px #0000001a;transition:all .3s ease}.queue-item:hover,.download-item:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.queue-item-info,.download-info{display:flex;flex-direction:column;gap:6px}.queue-number,.download-id{font-weight:700;color:#5e17eb;font-size:1rem;text-shadow:0 1px 2px rgba(0,0,0,.2)}.queue-status,.download-time{font-size:.9rem;color:#ffffffe6;font-weight:500}.download-header{display:flex;justify-content:space-between;align-items:center;width:100%}.download-controls{display:flex;align-items:center;gap:10px}.status{font-size:.85rem;padding:4px 8px;border-radius:6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status.processing{background:rgba(94,23,235,.4);color:#fff;box-shadow:0 2px 8px #5e17eb4d}.status.completed{background:rgba(76,175,80,.4);color:#fff;box-shadow:0 2px 8px #4caf504d}.status.queued{background:rgba(255,255,255,.25);color:#fff;box-shadow:0 2px 8px #fff3}.status.cancelled{background:rgba(239,68,68,.4);color:#fff;box-shadow:0 2px 8px #ef44444d}.cancel-btn-small{background:#ef4444;color:#fff;border:none;border-radius:6px;padding:6px 10px;font-size:.9rem;cursor:pointer;min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;font-weight:700;box-shadow:0 2px 8px #ef44444d}.cancel-btn-small:hover{background:#dc2626;transform:scale(1.1);box-shadow:0 4px 12px #ef444466}.download-progress{margin-top:12px;width:100%}.progress-text{font-size:.9rem;color:#ffffffe6;display:block;margin-bottom:6px;font-weight:500}.progress-bar{width:100%;height:6px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar-inner{height:100%;background:linear-gradient(90deg,#5e17eb,#7c3aed);transition:width .3s ease;border-radius:3px;box-shadow:0 1px 3px #5e17eb4d}.progress-bar-indeterminate{width:100%;height:6px;background:linear-gradient(90deg,#5e17eb 25%,transparent 25%,transparent 50%,#5e17eb 50%,#5e17eb 75%,transparent 75%);background-size:24px 6px;animation:loading 1.2s infinite linear;border-radius:3px;box-shadow:inset 0 1px 3px #0003}@keyframes loading{0%{background-position:0 0}to{background-position:24px 0}}.download-completed{display:flex;align-items:center;gap:8px;color:#4caf50;font-size:1rem;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.2)}.completed-icon{font-size:1.2rem}.download-cancelled{display:flex;align-items:center;gap:8px;color:#ef4444;font-size:1rem;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.2)}.cancelled-icon{font-size:1.2rem}.download-empty{text-align:center;color:#fffc;padding:50px 20px;background:rgba(255,255,255,.05);border-radius:12px;border:1px dashed rgba(255,255,255,.3)}.download-empty p{margin:0 0 10px;font-size:1.2rem;font-weight:600}.download-empty small{font-size:1rem;opacity:.8}@media (max-width: 1200px){.app-grid{grid-template-columns:1fr;gap:20px}.download-sidebar{max-height:400px;position:static;order:-1}}.board{display:flex;flex-direction:column;gap:20px;align-items:center;padding:30px;width:100%;min-height:100vh;background:transparent;border-radius:15px;backdrop-filter:blur(10px)}.sequence-display{display:flex;gap:25px;margin:35px 0;flex-wrap:wrap;justify-content:center}.main-note-display{color:#fff;padding:18px 25px;border-radius:12px;font-size:25px;font-weight:700;min-width:80px;text-align:center;background:rgba(94,23,235,.3);border:1px solid rgba(94,23,235,.4);box-shadow:0 4px 20px #5e17eb33;backdrop-filter:blur(10px)}.note-container{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:rgba(255,255,255,.12);border-radius:15px;backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000001a;transition:all .3s ease}.note-container:hover{background:rgba(255,255,255,.18);transform:translateY(-3px);box-shadow:0 12px 40px #00000026}.note-display{background:linear-gradient(135deg,#5e17eb,#7c3aed);color:#fff;padding:18px 25px;border-radius:12px;font-size:18px;font-weight:700;min-width:80px;text-align:center;box-shadow:0 6px 25px #5e17eb66;border:1px solid rgba(255,255,255,.2);transition:all .3s ease}.note-display:hover{transform:translateY(-2px);box-shadow:0 8px 30px #5e17eb80}.note-controls{display:flex;flex-direction:column;gap:10px;width:100%}.note-controls label{display:flex;align-items:center;gap:10px;color:#fff;font-weight:500;font-size:.95rem}.main-btn{background:linear-gradient(135deg,#5e17eb,#7c3aed);color:#fff;border:none;padding:15px 30px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #5e17eb4d;border:1px solid rgba(255,255,255,.2)}.main-btn:hover{background:linear-gradient(135deg,#4a12c4,#6d28d9);transform:translateY(-3px);box-shadow:0 8px 30px #5e17eb66}.stop-btn{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;padding:15px 30px;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;font-weight:700;box-shadow:0 4px 20px #ef44444d;border:1px solid rgba(255,255,255,.2)}.stop-btn:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-3px);box-shadow:0 8px 30px #ef444466}.play-stop-btn{color:#fff;border:none;padding:15px 30px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;border:1px solid rgba(255,255,255,.2);min-width:120px}.play-stop-btn.stopped{background:linear-gradient(135deg,#5e17eb,#7c3aed);box-shadow:0 4px 20px #5e17eb4d}.play-stop-btn.stopped:hover{background:linear-gradient(135deg,#4a12c4,#6d28d9);transform:translateY(-3px);box-shadow:0 8px 30px #5e17eb66}.play-stop-btn.playing{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 20px #ef44444d}.play-stop-btn.playing:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-3px);box-shadow:0 8px 30px #ef444466}.play-stop-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.loading-indicator{color:#fff;font-size:16px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.3)}.progress-bar{width:100%;height:12px;background:rgba(255,255,255,.2);border-radius:6px;margin-top:8px;overflow:hidden;box-shadow:inset 0 2px 4px #0003}.progress-bar-inner{height:100%;background:linear-gradient(90deg,#4caf50,#66bb6a);border-radius:6px;transition:width .3s ease;box-shadow:0 1px 4px #4caf504d}.progress-bar-indeterminate{position:relative;width:100%;height:12px;background:rgba(255,255,255,.2);border-radius:6px;margin-top:8px;overflow:hidden;box-shadow:inset 0 2px 4px #0003}.progress-bar-indeterminate:before{content:"";position:absolute;left:-40%;top:0;height:100%;width:40%;background:linear-gradient(90deg,#4caf50 0%,#66bb6a 100%);animation:indeterminate-bar 1.2s linear infinite;border-radius:6px;box-shadow:0 1px 4px #4caf504d}@keyframes indeterminate-bar{0%{left:-40%}to{left:100%}}.app-header{display:flex;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid rgba(255,255,255,.2)}.app-header h1{margin:0 0 0 15px;color:#fff;font-size:32px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.3)}.hamburger-menu{position:relative;display:inline-block}.hamburger-button{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);cursor:pointer;padding:12px;border-radius:8px;transition:all .3s ease;backdrop-filter:blur(10px)}.hamburger-button:hover{background-color:#fff3;border-color:#fff6;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.hamburger-icon{width:28px;height:22px;position:relative;transform:rotate(0);transition:.3s ease-in-out;cursor:pointer}.hamburger-icon span{display:block;position:absolute;height:4px;width:100%;background:#fff;border-radius:3px;opacity:1;left:0;transform:rotate(0);transition:.25s ease-in-out;box-shadow:0 1px 3px #0000004d}.hamburger-icon span:nth-child(1){top:0px}.hamburger-icon span:nth-child(2){top:9px}.hamburger-icon span:nth-child(3){top:18px}.hamburger-icon.open span:nth-child(1){top:9px;transform:rotate(135deg)}.hamburger-icon.open span:nth-child(2){opacity:0;left:-60px}.hamburger-icon.open span:nth-child(3){top:9px;transform:rotate(-135deg)}.menu-overlay{position:fixed;top:0;left:0;width:100vw;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);backdrop-filter:blur(10px);z-index:1000;animation:fadeIn .3s ease;overflow-y:auto}.menu-content{background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);padding:40px;box-shadow:inset 0 0 100px #ffffff1a}.menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:50px;padding-bottom:30px;border-bottom:2px solid rgba(255,255,255,.2);max-width:1400px;margin-left:auto;margin-right:auto}.menu-header h2{color:#fff;margin:0;font-size:36px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.3)}.close-button{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);color:#fff;font-size:28px;cursor:pointer;padding:12px 16px;border-radius:50%;transition:all .3s ease;line-height:1;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.close-button:hover{background:rgba(255,255,255,.2);transform:rotate(90deg) scale(1.1);box-shadow:0 5px 20px #0000004d}.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;max-width:1400px;margin:0 auto;padding:0 20px}.category-card{background:rgba(255,255,255,.08);border-radius:20px;padding:30px;border:1px solid rgba(255,255,255,.15);transition:all .4s ease;backdrop-filter:blur(15px);box-shadow:0 8px 32px #0000001a;min-height:300px}.category-card:hover{background:rgba(255,255,255,.15);transform:translateY(-8px);box-shadow:0 20px 60px #0000004d;border-color:#ffffff4d}.category-header{display:flex;align-items:center;margin-bottom:25px;padding-bottom:20px;border-bottom:2px solid rgba(255,255,255,.15)}.category-icon{font-size:40px;margin-right:20px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.category-header h3{color:#fff;margin:0;font-size:24px;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.3)}.category-sounds{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sound-item{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;padding:16px 20px;border-radius:12px;cursor:pointer;transition:all .3s ease;text-align:center;font-size:15px;font-weight:500;position:relative;overflow:hidden}.sound-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.sound-item:hover:before{left:100%}.sound-item:hover{background:rgba(255,255,255,.2);transform:translateY(-3px);box-shadow:0 8px 25px #0003;border-color:#ffffff4d}.sound-item.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#fff6;font-weight:700;box-shadow:0 8px 25px #667eea66;transform:translateY(-3px)}.sound-item.active:before{display:none}.current-sound-display{justify-content:space-between;align-items:center;background:rgba(255,255,255,.1);padding:12px 16px;border-radius:8px;margin-bottom:15px;border:1px solid rgba(255,255,255,.2)}.current-sound-info{gap:4px}.current-sound-name{margin:3px;color:#fff;font-weight:500;font-size:14px}.custom-indicator{color:#667eea;font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}.browse-sounds-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;color:#fff;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all .3s ease}.browse-sounds-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.browse-sounds-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-30px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.category-card{animation:cardSlideIn .6s ease forwards}.category-card:nth-child(1){animation-delay:.1s}.category-card:nth-child(2){animation-delay:.2s}.category-card:nth-child(3){animation-delay:.3s}.category-card:nth-child(4){animation-delay:.4s}.category-card:nth-child(5){animation-delay:.5s}.category-card:nth-child(6){animation-delay:.6s}@media (max-width: 1200px){.categories-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px}}@media (max-width: 768px){.categories-grid{grid-template-columns:1fr;gap:20px;padding:0 10px}.menu-content{padding:20px 15px}.menu-header{margin-bottom:30px;padding-bottom:20px}.menu-header h2{font-size:28px}.category-card{padding:25px 20px;min-height:250px}.category-header h3{font-size:20px}.category-icon{font-size:32px;margin-right:15px}.category-sounds{grid-template-columns:1fr;gap:10px}.sound-item{padding:14px 18px;font-size:14px}.close-button{width:50px;height:50px;font-size:24px}}@media (max-width: 480px){.menu-content{padding:15px 10px}.categories-grid{padding:0 5px}.category-card{padding:20px 15px}.menu-header h2{font-size:24px}}.upload-section{margin-bottom:20px}.upload-label{display:block;color:#fff;font-weight:500;margin-bottom:10px;font-size:14px}.file-upload-container{width:100%}.file-upload-zone{border:2px dashed rgba(255,255,255,.3);border-radius:12px;padding:25px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:rgba(255,255,255,.05);backdrop-filter:blur(10px);position:relative;overflow:hidden}.file-upload-zone:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s ease}.file-upload-zone:hover:before{left:100%}.file-upload-zone:hover{border-color:#ffffff80;background:rgba(255,255,255,.1);transform:translateY(-2px);box-shadow:0 8px 25px #0003}.file-upload-zone.drag-over{border-color:#667eea;background:rgba(102,126,234,.1);transform:scale(1.02);box-shadow:0 10px 30px #667eea4d}.file-upload-zone.drag-over:before{display:none}.file-upload-zone.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.upload-icon{font-size:32px;margin-bottom:10px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.upload-text{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}.upload-primary{color:#fff;font-size:16px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.3)}.upload-secondary{color:#fffc;font-size:14px;font-weight:400}.upload-formats{color:#fff9;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.file-upload-zone.drag-over .upload-icon{animation:bounce .6s ease infinite alternate}.file-upload-zone.drag-over .upload-primary{color:#667eea}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-5px)}}@media (max-width: 768px){.file-upload-zone{padding:20px 15px}.upload-icon{font-size:28px}.upload-primary{font-size:15px}.upload-secondary{font-size:13px}}.upload-feedback{margin-top:10px;padding:8px 12px;border-radius:6px;font-size:13px;font-weight:500;text-align:center;animation:fadeInUp .3s ease}.upload-feedback:contains("✅"){background:rgba(76,175,80,.2);border:1px solid rgba(76,175,80,.4);color:#4caf50}.upload-feedback:contains("❌"){background:rgba(244,67,54,.2);border:1px solid rgba(244,67,54,.4);color:#f44336}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.buttons-container{display:flex;flex-direction:column;gap:20px;margin-bottom:25px}.playback-controls{display:flex;gap:15px}.sidebar-upload-section{padding:15px;background:rgba(255,255,255,.08);border-radius:12px;border:1px solid rgba(255,255,255,.15)}.sidebar-upload-label{display:block;color:#fff;font-weight:500;margin-bottom:10px;font-size:13px;text-align:center}.sidebar-upload-section .file-upload-zone{padding:20px 15px;border:2px dashed rgba(255,255,255,.25)}.sidebar-upload-section .upload-icon{font-size:24px;margin-bottom:8px}.sidebar-upload-section .upload-primary{font-size:14px}.sidebar-upload-section .upload-secondary{font-size:12px}.sidebar-upload-section .upload-formats{font-size:11px}.sidebar-upload-section .upload-feedback{margin-top:8px;font-size:12px}@media (max-width: 768px){.sidebar-upload-section{padding:12px}.sidebar-upload-section .file-upload-zone{padding:15px 10px}.sidebar-upload-section .upload-icon{font-size:20px}.playback-controls{gap:10px}.buttons-container{gap:15px}}.eq-preset-selector{width:100%;margin-bottom:15px}.eq-preset-label{display:flex;flex-direction:column;gap:8px;color:#fff;font-weight:500;font-size:.95rem}.eq-preset-dropdown{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;padding:10px 12px;font-size:.9rem;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px)}.eq-preset-dropdown:hover:not(:disabled){background:rgba(255,255,255,.15);border-color:#ffffff80}.eq-preset-dropdown:focus{outline:none;border-color:#5e17eb;box-shadow:0 0 0 2px #5e17eb4d}.eq-preset-dropdown:disabled{opacity:.5;cursor:not-allowed}.eq-preset-dropdown option{background:#2a2a2a;color:#fff;padding:8px}.reset-button{background:linear-gradient(135deg,#ff6b6b,#ee5a52);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);width:100%;justify-content:center;margin-top:10px}.reset-button:hover:not(:disabled){background:linear-gradient(135deg,#ff5252,#e53e3e);transform:translateY(-2px);box-shadow:0 4px 15px #ff6b6b66}.reset-button:active{transform:translateY(0)}.reset-button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}@media (max-width: 768px){.eq-preset-dropdown{padding:8px 10px;font-size:.85rem}.reset-button{padding:8px 12px;font-size:.85rem}}@font-face{font-family:Dina Remaster;src:url(/assets/DinaRemasterII-ebca3d27.ttc) format("truetype-collection");font-weight:400;font-style:normal}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif,Dina Remaster;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;width:100%;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#292929}a:hover{color:#747bff}button{background-color:#f9f9f9}}