body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}body,html{overflow-x:hidden}html{scroll-behavior:smooth}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}button,html{touch-action:manipulation}button{-webkit-tap-highlight-color:transparent}.large-button{border:none;border-radius:12px;cursor:pointer;font-size:18px;min-height:60px;transition:all .2s ease}.large-button:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.large-button:active{transform:translateY(0)}*{scrollbar-color:#c1c1c1 #f1f1f1;scrollbar-width:thin}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.sr-only:focus{clip:auto;background:#000;color:#fff;height:auto;margin:0;overflow:visible;padding:.5rem;position:static;white-space:normal;width:auto;z-index:1000}.focus-visible{box-shadow:0 0 0 1px #fff,0 0 0 4px #06c;outline:3px solid #06c;outline-offset:2px}.accessible-button{align-items:center;background:#2196f3;border:2px solid #0000;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;gap:8px;min-height:44px;min-width:44px;padding:12px 16px;text-decoration:none;transition:all .2s ease}.accessible-button:hover{background:#1976d2;transform:translateY(-2px)}.accessible-button:focus{background:#1976d2;outline:3px solid #ff9800;outline-offset:2px}.accessible-button:active{background:#1565c0;transform:translateY(0)}.accessible-button:disabled{background:#ccc;cursor:not-allowed;transform:none}.accessible-button--secondary{background:#fff;border-color:#2196f3;color:#2196f3}.accessible-button--secondary:focus,.accessible-button--secondary:hover{background:#e3f2fd}.accessible-button--danger{background:#f44336;color:#fff}.accessible-button--danger:hover{background:#d32f2f}.accessible-button--danger:focus{background:#d32f2f;outline-color:#ff9800}.accessible-input{border:2px solid #ddd;border-radius:8px;font-size:16px;min-height:44px;padding:12px 16px;transition:border-color .2s ease}.accessible-input:focus{border-color:#2196f3;outline:3px solid #06c;outline-offset:2px}.accessible-input:invalid{border-color:#f44336}.live-region{height:1px;left:-10000px;overflow:hidden;position:absolute;width:1px}@media (prefers-contrast:high){:root{--primary-color:#03a;--secondary-color:#c60;--success-color:#063;--warning-color:#900;--error-color:#900;--text-color:#000;--background-color:#fff}.accessible-button,.btn-error,.btn-primary,.btn-secondary,.btn-success,.btn-warning{border-width:3px;font-weight:700}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-font-size:large){.accessible-button,.accessible-input{font-size:18px;padding:14px 18px}}@media (prefers-color-scheme:dark){.accessible-button{background:#1976d2}.accessible-button--secondary,.accessible-input{background:#333;border-color:#666;color:#fff}}.error-message{background:#ffebee;border:1px solid #ffcdd2;border-radius:4px;color:#d32f2f;font-size:14px;gap:8px;margin-top:4px;max-height:60px;min-height:0;overflow:hidden;padding:8px 12px}.error-message:empty{background:none;border:none;display:none;margin:0;padding:0}.error-message:before{content:"⚠️";flex-shrink:0;font-size:16px}.success-message{align-items:center;color:#2e7d32;display:flex;font-size:14px;gap:4px;margin-top:4px}.success-message:before{content:"✅";font-size:16px}.info-message{align-items:center;color:#1976d2;display:flex;font-size:14px;gap:4px;margin-top:4px}.info-message:before{content:"ℹ️";font-size:16px}.pattern-success{background-image:repeating-linear-gradient(45deg,#0000,#0000 2px,#0596691a 0,#0596691a 4px)}.pattern-warning{background-image:repeating-linear-gradient(-45deg,#0000,#0000 2px,#dc26261a 0,#dc26261a 4px)}.pattern-info{background-image:repeating-linear-gradient(90deg,#0000,#0000 2px,#0066cc1a 0,#0066cc1a 4px)}.status-success:before{color:var(--success-color);content:"✓";font-weight:700;margin-right:.5rem}.status-warning:before{color:var(--warning-color);content:"⚠";font-weight:700;margin-right:.5rem}.status-error:before{color:var(--error-color);content:"✗";font-weight:700;margin-right:.5rem}.status-info:before{color:var(--safe-blue);content:"ⓘ";font-weight:700;margin-right:.5rem}.btn-safe-blue{background-color:var(--safe-blue);border:2px solid var(--safe-blue);color:#fff}.btn-safe-orange{background-color:var(--safe-orange);border:2px solid var(--safe-orange);color:#fff}.btn-safe-purple{background-color:var(--safe-purple);border:2px solid var(--safe-purple);color:#fff}.btn-safe-cyan{background-color:var(--safe-cyan);border:2px solid var(--safe-cyan);color:#fff}.App{background-color:#f5f7fa;color:#333;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;height:100vh;line-height:1.6}.main-content{flex:1 1;min-height:0;overflow-x:hidden;overflow-y:auto;padding:20px}@media (max-width:1024px){.main-content{padding:15px}}@media (max-width:768px){.main-content{padding:10px}}:root{--primary-color:#06c;--primary-hover:#0052a3;--secondary-color:#ff8c00;--secondary-hover:#e67300;--accent-color:#6b46c1;--accent-hover:#553c9a;--success-color:#059669;--warning-color:#dc2626;--warning-hover:#b91c1c;--error-color:#dc2626;--background-color:#f8fafc;--card-color:#fff;--text-color:#1f2937;--text-secondary:#6b7280;--border-color:#e5e7eb;--focus-color:#2563eb;--safe-blue:#06c;--safe-orange:#ff8c00;--safe-purple:#6b46c1;--safe-cyan:#0891b2;--safe-pink:#db2777;--safe-yellow:#eab308}.card{background:#fff;background:var(--card-color);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:16px;box-shadow:0 4px 16px #0000001a;margin-bottom:20px;padding:20px}.button-primary{align-items:center;background:#06c;background:var(--primary-color);border:2px solid #0000;border-radius:12px;color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;min-height:44px;min-width:44px;padding:12px 24px;text-decoration:none;transition:all .2s ease}.button-primary:hover{transform:translateY(-2px)}.button-primary:focus,.button-primary:hover{background:#0052a3;background:var(--primary-hover)}.button-primary:focus{outline:2px solid #2563eb;outline:2px solid var(--focus-color);outline-offset:2px}.button-primary:active{transform:translateY(0)}.button-primary:disabled{background:#ccc;opacity:.6}.button-secondary{align-items:center;background:#ff8c00;background:var(--secondary-color);border:2px solid #0000;border-radius:12px;color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;min-height:44px;min-width:44px;padding:12px 24px;text-decoration:none;transition:all .2s ease}.button-secondary:hover{transform:translateY(-2px)}.button-secondary:focus,.button-secondary:hover{background:#e67300;background:var(--secondary-hover)}.button-secondary:focus{outline:2px solid #2563eb;outline:2px solid var(--focus-color);outline-offset:2px}.button-secondary:active{transform:translateY(0)}.button-secondary:disabled{background:#ccc;cursor:not-allowed;transform:none}@media (prefers-contrast:high){:root{--text-color:#000;--background-color:#fff;--border-color:#000}.button-primary,.button-secondary{border:3px solid #000}.card{border:2px solid #000}}@media (prefers-color-scheme:dark){:root{--background-color:#121212;--card-color:#1e1e1e;--text-color:#fff;--text-secondary:#ccc;--border-color:#444}.App{background-color:#f8fafc;background-color:var(--background-color);color:#1f2937;color:var(--text-color)}}@media (prefers-reduced-motion:reduce){.button-primary,.button-secondary{transition:none}.button-primary:hover,.button-secondary:hover{transform:none}}.navigation{background:linear-gradient(135deg,var(--safe-blue) 0,var(--safe-purple) 100%);box-shadow:0 4px 12px #00000026;color:#fff;padding:15px 0}.nav-container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 auto;max-width:1200px;padding:0 20px}.nav-title{color:#fff;font-size:24px;font-weight:700;margin:0}.nav-links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}.nav-link{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:2px solid #fff3;border-radius:25px;color:#fff;display:inline-flex;font-size:16px;font-weight:600;gap:6px;justify-content:center;min-height:44px;min-width:44px;padding:12px 20px;text-decoration:none;transition:all .3s ease}.nav-link:hover{background:#fff3;box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.nav-link:focus{background:#ffffff4d;border-color:var(--safe-yellow);outline:2px solid var(--safe-yellow);outline-offset:1px}.nav-link.active{background:#ffffff40;border-color:#fff6;box-shadow:0 4px 16px #0000004d;position:relative;transform:translateY(-1px)}.nav-link.active:after{background:var(--safe-yellow);border-radius:1px;bottom:-2px;content:"";height:2px;left:50%;position:absolute;transform:translateX(-50%);width:60%}.nav-link.active:before{content:"●";font-size:.8rem;margin-right:.25rem}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (max-width:768px){.nav-container{flex-direction:column;gap:15px;text-align:center}.nav-title{font-size:20px}.nav-links{justify-content:center}.nav-link{font-size:14px;padding:10px 16px}}@media (prefers-contrast:high){.navigation{background:#000;border-bottom:3px solid #fff}.nav-link{background:#000;border:3px solid #fff}.nav-link:focus,.nav-link:hover{background:#333}.nav-link.active{background:#333;border-color:gold}}@media (prefers-color-scheme:dark){.navigation{background:linear-gradient(135deg,#2c3e50,#34495e)}}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}.nav-link.active,.nav-link:hover{transform:none}}.nav-link:focus-visible{outline:3px solid gold;outline-offset:2px}.sound-collection{margin:0 auto;max-width:1200px;padding-bottom:40px}.sound-collection h2{color:var(--text-color);font-size:28px;line-height:1.3;margin-bottom:10px}.page-description{color:var(--text-secondary);font-size:16px;line-height:1.5;margin-bottom:20px}.collection-actions{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr;margin-bottom:32px}.recording-section,.upload-section{padding:20px;text-align:center}.recording-controls{margin:16px 0 20px}.recording-section h3,.upload-section h3{color:var(--text-color);font-size:20px;margin-bottom:16px}.accessible-button.button-primary.record-btn,.accessible-button.record-btn{align-items:center;background:linear-gradient(135deg,var(--warning-color),var(--warning-hover));border:2px solid #0000;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;min-height:48px;min-width:180px;padding:12px 24px;text-decoration:none;transition:all .2s ease}.accessible-button.button-primary.record-btn:hover,.accessible-button.record-btn:hover{background:linear-gradient(135deg,var(--warning-hover),#b91c1c);box-shadow:0 4px 12px #dc26264d;transform:translateY(-1px)}.accessible-button.button-primary.record-btn:focus,.accessible-button.record-btn:focus{background:linear-gradient(135deg,var(--warning-hover),#b91c1c);border-color:#fff;outline:2px solid var(--focus-color);outline-offset:2px}.accessible-button.button-primary.record-btn:active,.accessible-button.record-btn:active{background:linear-gradient(135deg,#b91c1c,#991b1b);transform:translateY(0)}.sound-collection .accessible-button.button-secondary.stop-btn,.sound-collection .accessible-button.stop-btn{align-items:center!important;background:linear-gradient(135deg,var(--safe-orange),var(--secondary-hover))!important;border:2px solid #0000!important;border-radius:8px!important;color:#fff!important;cursor:pointer;display:inline-flex!important;flex-grow:0!important;flex-shrink:1!important;font-size:16px!important;font-weight:600;gap:8px;height:auto!important;justify-content:center!important;max-height:none!important;max-width:none!important;min-height:48px!important;min-width:180px!important;padding:12px 24px!important;text-decoration:none;transition:all .2s ease;width:auto!important}.sound-collection .accessible-button.button-secondary.stop-btn:hover,.sound-collection .accessible-button.stop-btn:hover{background:linear-gradient(135deg,var(--secondary-hover),#e67300)!important;box-shadow:0 4px 12px #ff8c004d;transform:translateY(-1px)}.sound-collection .accessible-button.button-secondary.stop-btn:focus,.sound-collection .accessible-button.stop-btn:focus{background:linear-gradient(135deg,var(--secondary-hover),#e67300)!important;border-color:#fff;outline:2px solid var(--focus-color);outline-offset:2px}.sound-collection .accessible-button.button-secondary.stop-btn:active,.sound-collection .accessible-button.stop-btn:active{background:linear-gradient(135deg,#e67300,#d85f00)!important;transform:translateY(0)}.upload-section .accessible-button{background:linear-gradient(135deg,var(--safe-blue),var(--primary-hover));border:2px solid #0000;color:#fff;font-size:16px;font-weight:600;min-height:48px;min-width:180px;padding:12px 24px}.upload-section .accessible-button:hover{background:linear-gradient(135deg,var(--primary-hover),#0052a3);box-shadow:0 4px 12px #0066cc4d;transform:translateY(-1px)}.upload-section .accessible-button:focus{background:linear-gradient(135deg,#1976d2,#1565c0);border-color:#fff;outline:2px solid #06c;outline-offset:2px}.recording-status{background:#fff;border:2px solid #ff4757;border-radius:12px;box-shadow:0 4px 12px #ff475726;margin-top:16px;padding:20px}.recording-indicator{align-items:center;background:#ff47571a;border:2px solid #ff47574d;border-radius:8px;color:#ff4757;display:flex;font-size:18px;font-weight:700;gap:10px;justify-content:center;margin-bottom:10px;padding:10px}.pulse-dot{animation:pulse 1.2s infinite;background:#ff4757;border-radius:50%;box-shadow:0 0 8px #ff475780;height:14px;width:14px}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}.recording-editor{background:#fff;border:3px solid var(--accent-color);margin:30px 0;position:relative}.recording-editor:before{background:linear-gradient(45deg,var(--accent-color),var(--primary-color));border-radius:inherit;bottom:-3px;content:"";left:-3px;position:absolute;right:-3px;top:-3px;z-index:-1}.audio-preview{margin:15px 0;width:100%}.form-group{margin-bottom:24px;text-align:left}.form-group label{color:var(--text-color);display:block;font-size:16px;margin-bottom:8px}.required-label .required{color:#dc3545;font-weight:700}.optional{font-weight:400}.help-text,.optional{color:var(--text-secondary);font-size:14px}.help-text{line-height:1.4;margin-top:4px}.validation-message{background:#e3f2fd;border:1px solid #2196f3;border-radius:4px;color:#1976d2;font-size:14px;margin-top:8px;padding:8px 12px}.sound-name-input{border:2px solid var(--border-color);border-radius:8px;font-size:16px;padding:12px;transition:border-color .2s ease;width:100%}.sound-name-input:focus{border-color:var(--accent-color);outline:none}.tag-input-container{align-items:flex-start;gap:8px}.add-tag-btn{min-width:80px}.tags-display{margin-top:12px}.tags-title{color:var(--text-color);font-size:14px;font-weight:600;margin-bottom:8px}.tags-list{list-style:none;margin:0;padding:0}.tag-item{display:inline-block}.tag{background:var(--accent-color);display:inline-flex;font-size:14px;gap:4px}.tag.small{font-size:12px;padding:4px 8px}.remove-tag{align-items:center;background:none;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:18px;justify-content:center;margin-left:4px;padding:0;transition:background-color .2s ease;width:18px}.remove-tag:hover{background:#fff3}.remove-tag:focus{background:#fff3;outline:2px solid #fff;outline-offset:1px}.recent-recordings{margin-top:40px}.recent-recordings h3{color:var(--text-color);font-size:24px;margin-bottom:20px}.no-recordings{background:#f8f9fa;border:2px dashed #dee2e6;border-radius:12px;color:var(--text-secondary);font-size:16px;padding:40px 20px;text-align:center}.recordings-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:20px}.sound-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:20px;transition:all .2s ease}.sound-card:hover{box-shadow:0 6px 20px #00000026;transform:translateY(-2px)}.sound-card:focus-within{outline:3px solid var(--focus-color);outline-offset:2px}.sound-info{margin-bottom:15px}.sound-name{color:var(--text-color);font-size:18px;font-weight:600;line-height:1.3;margin:0 0 8px}.sound-date{color:var(--text-secondary);margin:0 0 8px}.sound-player{text-align:center}.editor-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}.large-button{align-items:center;border-radius:8px;display:inline-flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;min-height:50px;min-width:160px;padding:12px 24px}.ios-notice{background:#e3f2fd;border:2px solid #2196f3;border-radius:8px;font-size:14px;line-height:1.5;margin-bottom:16px;padding:16px}.ios-notice p{margin:0 0 8px}.ios-notice p:last-child{margin-bottom:0}.ios-notice strong{color:#1976d2;font-weight:600}@media (max-width:1024px){.collection-actions{gap:15px;grid-template-columns:1fr}.recordings-grid{gap:15px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.sound-collection h2{font-size:24px}}@media (max-width:768px){.sound-collection{padding:0 10px 20px}.recordings-grid{gap:12px;grid-template-columns:1fr}.large-button{font-size:14px;min-width:140px}.sound-collection .accessible-button.record-btn,.sound-collection .accessible-button.stop-btn{border-radius:8px!important;font-size:16px!important;height:auto!important;min-height:48px!important;min-width:160px!important;padding:12px 20px!important;width:auto!important}.tag-input-container{align-items:stretch;flex-direction:column}.add-tag-btn{min-width:auto}.editor-actions{align-items:center;flex-direction:column}.editor-actions button{max-width:200px;width:100%}}@media (max-width:480px){.sound-collection h2{font-size:20px}.recording-section,.sound-card,.upload-section{padding:15px}.large-button{font-size:14px;min-width:120px;padding:10px 16px}.sound-collection .accessible-button.record-btn,.sound-collection .accessible-button.stop-btn{border-radius:8px!important;font-size:15px!important;height:auto!important;min-width:140px!important;padding:10px 16px!important;width:auto!important}}@media (prefers-contrast:high){.sound-card,.tag{border:2px solid #000}.tag{background:#000;color:#fff}.ios-notice{background:#fff;border:2px solid #000}}@media (prefers-color-scheme:dark){.sound-card{background:#2d2d2d;border-color:#444;color:#fff}.ios-notice{background:#1e3a8a;border-color:#3b82f6;color:#fff}.no-recordings{background:#333;border-color:#555;color:#ccc}.validation-message{background:#1e3a8a;border-color:#3b82f6;color:#fff}}@media (prefers-reduced-motion:reduce){.pulse-dot{animation:none}.sound-card{transition:none}.sound-card:hover{transform:none}}.sound-library{margin:0 auto;max-width:1200px;padding-bottom:40px}.sound-library h2{color:var(--text-color);font-size:28px;margin-bottom:10px}.library-controls{margin-bottom:30px}.filter-section,.search-section{margin-bottom:25px}.filter-section h3,.search-section h3{color:var(--text-color);font-size:20px;margin-bottom:15px}.search-input{border:2px solid var(--border-color);border-radius:25px;font-size:16px;padding:12px 16px;transition:border-color .2s ease;width:100%}.search-input:focus{border-color:var(--accent-color);outline:none}.tag-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px}.tag-filter-btn{border:2px solid var(--border-color);font-weight:500;padding:8px 16px}.tag-filter-btn:hover{color:#fff}.tag-filter-btn.active,.tag-filter-btn:hover{background:var(--accent-color);border-color:var(--accent-color)}.clear-filters-btn{background:var(--warning-color);border:none;border-radius:20px;color:#fff;cursor:pointer;font-weight:700;padding:10px 20px;transition:all .2s ease}.clear-filters-btn:hover{background:var(--warning-hover);transform:translateY(-2px)}.library-stats{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:30px}.stats-card{background:linear-gradient(135deg,var(--safe-blue),var(--safe-purple));border-radius:16px;box-shadow:0 4px 16px #0000001a;color:#fff;padding:20px;text-align:center}.stats-number{display:block;font-size:32px;font-weight:700;margin-bottom:5px}.stats-label{font-size:14px;opacity:.9}.sounds-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.no-sounds{background:var(--card-color);border:2px dashed var(--border-color);border-radius:16px;font-size:18px;grid-column:1/-1;padding:60px 20px}.library-sound-card{background:var(--card-color);border-radius:16px;box-shadow:0 4px 16px #0000001a;cursor:grab;padding:20px;position:relative;transition:all .2s ease}.library-sound-card:hover{box-shadow:0 8px 24px #00000026;transform:translateY(-4px)}.library-sound-card:active{cursor:grabbing}.sound-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px}.sound-header h4{color:var(--text-color);flex:1 1;font-size:18px;margin:0}.sound-actions{gap:8px}.tag-edit-btn{background:var(--accent-color);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;padding:4px 8px;transition:all .2s ease}.tag-edit-btn:hover{background:var(--primary-color);transform:scale(1.05)}.delete-btn{background:var(--warning-color);border:none;border-radius:4px;cursor:pointer;font-size:16px;padding:4px;transition:background .2s ease}.delete-btn:hover{background:#f443361a}.sound-meta{margin-bottom:15px}.sound-date{color:#666;font-size:14px;margin:0 0 10px}.sound-tags{align-items:center;gap:6px}.tag.small{gap:4px;position:relative}.tag-remove-btn,.tag.small{align-items:center;display:inline-flex}.tag-remove-btn{background:#ffffff4d;border:none;border-radius:50%;cursor:pointer;font-size:12px;height:16px;justify-content:center;line-height:1;margin-left:4px;padding:0;transition:background .2s ease;width:16px}.tag-remove-btn:hover{background:#ffffff80}.tag-editor{background:#00000005;border-radius:8px;display:flex;gap:8px;margin-top:10px;padding:10px}.tag-input{border:2px solid var(--border-color);border-radius:6px;flex:1 1;font-size:14px;padding:8px 12px;transition:border-color .2s ease}.tag-input:focus{border-color:var(--accent-color);outline:none}.add-tag-btn{background:var(--accent-color);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;font-weight:700;padding:8px 16px;transition:all .2s ease;white-space:nowrap}.add-tag-btn:hover{background:var(--primary-color);transform:scale(1.05)}.loading{color:#666;font-size:18px;padding:40px;text-align:center}.sound-player{margin-bottom:15px;width:100%}.drag-hint{background:#2196f31a;border:1px dashed var(--accent-color);border-radius:8px;color:#666;font-size:12px;font-style:italic;padding:8px;text-align:center}.delete-confirm-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.delete-confirm-dialog{background:#fff;border-radius:16px;box-shadow:0 8px 32px #0000004d;max-width:400px;padding:30px;text-align:center;width:90%}.delete-confirm-dialog h4{color:var(--warning-color);font-size:20px;margin:0 0 15px}.delete-confirm-actions{display:flex;gap:15px;justify-content:center;margin-top:20px}.confirm-delete-btn{background:var(--warning-color)}.cancel-delete-btn,.confirm-delete-btn{border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:700;padding:12px 24px}.cancel-delete-btn{background:#666}@media (max-width:768px){.sounds-grid{grid-template-columns:1fr}.library-stats{grid-template-columns:repeat(3,1fr)}.tag-filters{justify-content:center}.delete-confirm-actions{flex-direction:column}}.daw-page{display:flex;flex-direction:column;margin:0 auto;max-width:1400px;min-height:calc(100vh - 160px);padding-bottom:40px}.daw-page h2{color:var(--text-color);font-size:28px;margin-bottom:10px}.error-message{align-items:center;background:linear-gradient(135deg,var(--warning-color),var(--error-color));box-shadow:0 2px 8px #dc26264d;color:#fff;display:flex;justify-content:space-between;margin-bottom:20px;padding:12px 16px}.error-message button{background:#fff3;border:none;border-radius:50%;color:#fff;cursor:pointer;height:24px;transition:background .2s ease;width:24px}.error-message button:hover{background:#fff6}.daw-controls{display:flex;flex-direction:column;gap:15px;margin-bottom:20px;padding:20px}.top-controls-row{border-bottom:2px solid var(--border-color);gap:20px;justify-content:space-between;margin-bottom:15px;padding-bottom:15px}.bottom-controls-row,.top-controls-row{align-items:center;display:flex;flex-wrap:wrap}.bottom-controls-row{background:linear-gradient(135deg,#8b45130d,#a0522d0d);border-radius:12px;gap:30px;justify-content:center;padding:20px}.left-controls,.right-controls{align-items:center;display:flex;gap:10px}.timing-controls{flex-direction:row;flex-wrap:wrap;gap:20px}.timing-controls,.transport-controls{align-items:center;display:flex;justify-content:center}.transport-controls{flex-wrap:nowrap;gap:15px}.transport-btn{align-items:center;aspect-ratio:1/1;border:none;border-radius:50%;box-shadow:0 4px 12px #00000026;cursor:pointer;display:flex;flex-shrink:0;font-size:28px;height:70px;justify-content:center;max-width:70px;min-width:70px;transition:all .3s ease;width:70px}.daw-page .play-btn,.play-btn{background:linear-gradient(135deg,var(--success-color),#047857);box-shadow:0 4px 16px #0596694d;color:#fff}.play-btn:hover{box-shadow:0 6px 20px #05966966;transform:scale(1.05)}.play-btn:focus{outline:2px solid var(--focus-color);outline-offset:2px}.play-btn.playing{animation:pulse-play 1.5s infinite;background:linear-gradient(135deg,var(--safe-orange),var(--secondary-hover))}@keyframes pulse-play{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.stop-btn{background:linear-gradient(135deg,var(--error-color),#dc2626);box-shadow:0 4px 16px #dc26264d;color:#fff}.stop-btn:hover{box-shadow:0 6px 20px #dc262666;transform:scale(1.05)}.stop-btn:focus{outline:2px solid var(--focus-color);outline-offset:2px}.daw-page .stop-btn{align-items:center!important;background:linear-gradient(135deg,var(--warning-color),var(--warning-hover));border:none!important;border-radius:50%!important;box-shadow:0 4px 16px #dc26264d;color:#fff;cursor:pointer;display:flex!important;flex-shrink:0!important;font-size:24px;height:60px!important;justify-content:center!important;max-height:60px!important;max-width:60px!important;min-height:60px!important;min-width:60px!important;padding:0!important;transition:all .3s ease;width:60px!important}.daw-page .stop-btn:hover{box-shadow:0 6px 20px #f4433666;transform:scale(1.1)}.daw-page .stop-btn:focus{outline:2px solid var(--focus-color);outline-offset:2px}.bpm-control{align-items:center;background:#fffc;border-radius:25px;box-shadow:inset 0 2px 8px #0000001a;display:flex;gap:10px;min-height:48px;padding:10px 15px;white-space:nowrap}.bpm-control label{color:var(--text-color)}.bpm-control label,.bpm-input{font-size:16px;font-weight:700}.bpm-input{border:2px solid var(--border-color);border-radius:8px;padding:8px 12px;text-align:center;width:80px}.bpm-input:focus{border-color:var(--accent-color);outline:none}.bpm-input:disabled{background-color:#f5f5f5;color:#999;cursor:not-allowed}.time-mode-control{flex-wrap:wrap;gap:15px;justify-content:center}.time-mode-control,.zoom-control{align-items:center;background:#fffc;border-radius:25px;box-shadow:inset 0 2px 8px #0000001a;display:flex;min-height:48px;padding:10px 15px}.zoom-control{gap:10px;white-space:nowrap}.zoom-control span:first-child{color:var(--text-color);font-size:16px;font-weight:700}.zoom-btn{align-items:center;background:#fff;border:2px solid var(--border-color);border-radius:50%;color:var(--text-color);cursor:pointer;display:flex;font-size:24px;font-weight:700;height:40px;justify-content:center;transition:all .2s ease;width:40px}.zoom-btn:hover{background:var(--accent-color);border-color:var(--accent-color);color:#fff;transform:scale(1.1)}.zoom-btn:active{transform:scale(.95)}.zoom-display{color:var(--text-color);font-size:16px;font-weight:700;min-width:60px;text-align:center}.time-mode-toggle{background:linear-gradient(135deg,#6b73ff,#5a67d8);border:none;border-radius:20px;box-shadow:0 2px 8px #6b73ff4d;color:#fff;cursor:pointer;font-size:14px;font-weight:700;padding:8px 16px;transition:all .3s ease}.time-mode-toggle:hover{box-shadow:0 4px 12px #6b73ff66;transform:translateY(-1px)}.time-mode-toggle.active{background:linear-gradient(135deg,#ff6b6b,#ee5a52);box-shadow:0 2px 8px #ff6b6b4d}.time-mode-toggle.active:hover{box-shadow:0 4px 12px #ff6b6b66}.seconds-per-beat-control{align-items:center;display:flex;gap:8px}.seconds-per-beat-control label{color:var(--text-color);font-size:14px;font-weight:700}.seconds-input{border:2px solid var(--border-color);border-radius:6px;font-size:14px;font-weight:700;padding:6px 10px;text-align:center;width:60px}.seconds-input:focus{border-color:var(--accent-color);outline:none}.track-controls{display:flex;gap:10px}.daw-workspace{background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a;display:flex;flex:1 1;height:70vh;margin-bottom:20px;min-height:600px;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}.daw-workspace.panel-hidden{margin-left:-20px}.track-headers{background:#f8f9fa;border-right:2px solid var(--border-color);display:flex;flex-direction:column;height:100%;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth;width:150px}.track-header{background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid var(--border-color);color:#fff;flex-shrink:0;height:80px;padding:15px}.track-header,.track-info{align-items:center;display:flex}.track-info{flex:1 1;justify-content:space-between}.track-info h4{font-size:16px;font-weight:700;margin:0}.remove-track-btn{background:linear-gradient(135deg,#ef5350,#e53935);border:none;border-radius:4px;box-shadow:0 2px 4px #ef53504d;color:#fff;cursor:pointer;padding:4px 8px;transition:all .2s ease}.remove-track-btn:hover{background:linear-gradient(135deg,#f44336,#d32f2f);box-shadow:0 4px 8px #ef535066;transform:translateY(-1px)}.track-add-button-container{align-items:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-bottom:1px solid var(--border-color);display:flex;flex-shrink:0;justify-content:center;padding:15px}.track-add-btn{background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));border:none;border-radius:8px;box-shadow:0 2px 8px #0066cc4d;color:#fff;cursor:pointer;font-size:14px;font-weight:700;padding:12px 20px;transition:all .3s ease}.track-add-btn:hover{box-shadow:0 4px 12px #06c6;color:#fff;transform:translateY(-1px)}.timeline-container{display:flex;flex:1 1;flex-direction:column;height:100%;min-height:500px;overflow:auto;position:relative;scroll-behavior:smooth;transition:all .4s cubic-bezier(.4,0,.2,1)}.timeline-header-spacer{align-items:center;background:#f8f9fa;color:var(--text-color);flex-shrink:0;font-size:14px;font-weight:700;justify-content:center}.timeline,.timeline-header-spacer{border-bottom:2px solid var(--border-color);display:flex;height:60px}.timeline{background:#f0f0f0;position:-webkit-sticky;position:sticky;top:0;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:100}.measure{border-right:2px solid #ddd;min-width:400px;width:400px}.measure-number{align-items:center;background:#e0e0e0;color:var(--text-color);display:flex;font-size:14px;font-weight:700;height:20px;justify-content:center}.time-interval{border-right:2px solid #ddd;min-width:500px;width:500px}.time-number{align-items:center;background:#e0e0e0;color:var(--text-color);display:flex;font-size:14px;font-weight:700;height:20px;justify-content:center}.time-marks{display:flex;height:40px}.time-mark{background:#fff;border-right:1px solid #ccc;display:flex;flex-direction:row;position:relative}.time-main{border-right:1px dotted #bbb;color:#666;font-size:12px}.time-main,.time-sub{align-items:center;display:flex;height:100%;justify-content:center;width:50%}.time-sub{background:#fafafa}.sub-time-marker{color:#999;font-size:8px;opacity:.7}.beats{display:flex;height:40px}.beat{background:#fff;border-right:1px solid #ccc;display:flex;flex-direction:row;position:relative}.beat-main{border-right:1px dotted #bbb;color:#666;font-size:12px}.beat-main,.beat-sub{align-items:center;display:flex;height:100%;justify-content:center;width:50%}.beat-sub{background:#fafafa}.sub-beat-marker{color:#999;font-size:8px;opacity:.7}.beat:first-child .beat-main{background:#f5f5f5;font-weight:700}.tracks-area{background:#fafafa;flex:1 1;min-height:500px;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}.track{background:#fff;border-bottom:1px solid var(--border-color);height:80px;min-height:80px;position:relative;transition:background .2s ease}.track:hover{background:#fafafa}.track-grid{left:0;pointer-events:none;width:100%}.beat-line,.track-grid{height:100%;position:absolute;top:0}.beat-line{background:#e0e0e0;width:1px}.beat-line-main{background:#ccc;width:2px;z-index:2}.beat-line-sub{background:#e8e8e8;border-left:1px dotted #ddd;opacity:.6;width:1px;z-index:1}.beat-line-main.measure-start{background:#999;width:2px;z-index:3}.beat-line-main.first-beat{background:#777;width:4px;z-index:4}.audio-clip{background:linear-gradient(135deg,#2196f3,#1976d2);border-radius:8px;box-shadow:0 2px 8px #2196f34d;cursor:grab;height:60px;overflow:hidden;position:absolute;top:10px;transition:all .2s ease;z-index:2}.audio-clip:active{cursor:grabbing}.audio-clip:hover{box-shadow:0 4px 16px #2196f366;transform:translateY(-2px)}.drag-preview{background:#2196f34d;border:2px dashed #2196f3;border-radius:8px;height:60px;pointer-events:none;position:absolute;transition:all .1s ease;z-index:150}.audio-clip.dragging{opacity:.5;transform:rotate(3deg);z-index:200}.clip-header{align-items:center;background:#fff3;color:#fff;display:flex;font-size:12px;justify-content:space-between;padding:4px 8px}.clip-name{flex:1 1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remove-clip-btn{align-items:center;background:var(--warning-color);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:20px;justify-content:center;transition:background .2s ease;width:20px}.remove-clip-btn:hover{background:#f44336cc}.clip-waveform{align-items:center;display:flex;flex:1 1;justify-content:center;overflow:hidden;padding:5px}.waveform-svg{height:30px;width:100%}.waveform-placeholder{font-size:18px;opacity:.7}.playhead{background:#ff4757;box-shadow:0 0 8px #ff475780;height:100%;pointer-events:none;position:absolute;top:0;width:3px;z-index:200}.instructions{margin-top:20px}.instructions h3{color:var(--text-color);font-size:20px;margin-bottom:15px}.instructions ul{list-style:none;padding:0}.instructions li{color:var(--text-color);font-size:16px;padding:8px 0 8px 25px;position:relative}.instructions li:before{content:"🎵";left:0;position:absolute}.daw-main-area{display:flex;flex:1 1;gap:20px;position:relative}.daw-main-area,.sound-panel{transition:all .4s cubic-bezier(.4,0,.2,1)}.sound-panel{background:#fff;border:2px solid #e0e0e0;border-radius:12px;box-shadow:0 8px 32px #00000026;box-sizing:border-box;flex-shrink:0;max-height:600px;opacity:1;overflow-y:auto;padding:20px;transform:translateX(0);width:280px}.sound-panel.panel-hidden{border:none;box-shadow:none;margin:0;opacity:0;overflow:hidden;padding:0;transform:translateX(-100%);width:0}.sound-panel.panel-hidden *{opacity:0;transition:opacity .2s ease}.sound-panel:hover{box-shadow:0 12px 40px #0003;transform:translateY(-2px)}.sound-panel h3{color:var(--text-color);font-size:18px;font-weight:700;margin:0}.sound-panel-header{align-items:center;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:10px}.sound-panel-close{align-items:center;background:none;border:none;border-radius:50%;color:#666;cursor:pointer;display:flex;font-size:18px;height:30px;justify-content:center;transition:all .2s ease;width:30px}.sound-panel-close:hover{background:#f0f0f0;color:#333}.sound-panel-filters{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;margin-bottom:15px;padding:12px}.tag-filter-label{color:#495057;font-size:13px;font-weight:600;margin-bottom:8px}.tag-filters-compact{display:flex;flex-wrap:wrap;gap:6px}.tag-filter-btn-compact{background:#fff;border:1px solid #dee2e6;border-radius:16px;color:#495057;cursor:pointer;font-size:12px;padding:6px 12px;transition:all .2s ease;white-space:nowrap}.tag-filter-btn-compact:hover{background:#e9ecef;border-color:#adb5bd;transform:translateY(-1px)}.tag-filter-btn-compact.active{border-color:#667eea;font-weight:600}.reset-filter-btn,.tag-filter-btn-compact.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.reset-filter-btn{border:none;border-radius:6px;cursor:pointer;font-size:14px;margin-top:10px;padding:8px 16px;transition:all .2s ease}.reset-filter-btn:hover{box-shadow:0 4px 12px #667eea4d;transform:translateY(-2px)}.sound-list{display:flex;flex-direction:column;gap:12px}.sound-item{-webkit-touch-callout:none;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;box-shadow:0 2px 8px #0000001a;color:#fff;cursor:grab;padding:15px;transition:all .2s ease;-webkit-user-select:none;user-select:none}.sound-item:hover{box-shadow:0 4px 16px #0003;transform:translateY(-2px)}.sound-item:active{cursor:grabbing;transform:scale(.98)}.sound-info h4{font-size:16px;font-weight:700;margin:0 0 8px}.sound-tags{margin-bottom:10px}.sound-tag{background:#ffffff4d;border-radius:12px;font-size:12px;font-weight:500;padding:2px 8px}.sound-actions{display:flex;justify-content:flex-end}.play-sound-btn{align-items:center;background:#fff3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:16px;height:36px;justify-content:center;transition:all .2s ease;width:36px}.play-sound-btn:hover{background:#ffffff4d;transform:scale(1.1)}.play-sound-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.no-sounds{color:#666;padding:40px 20px}.sound-item.dragging{cursor:grabbing;opacity:.7;transform:scale(.95)}.mobile-drag-preview{background:#007bffe6;border:2px solid #ffffff4d;border-radius:6px;box-shadow:0 4px 12px #0000004d;color:#fff;font-size:14px;font-weight:700;padding:8px 12px;pointer-events:none;position:fixed;z-index:1000}.track.drag-over{background-color:#007bff1a;border:2px dashed #007bff;box-shadow:inset 0 0 10px #007bff33}.audio-clip.dragging{opacity:.7;transform:scale(.95);z-index:100}body.dragging{height:100%!important;overflow:hidden!important;position:fixed!important;width:100%!important}body.dragging .timeline-container,body.dragging .tracks-area{overflow:hidden!important;pointer-events:auto}@media (hover:none) and (pointer:coarse){.sound-item{margin-bottom:15px;padding:20px;touch-action:manipulation}.play-sound-btn{font-size:18px;height:44px;width:44px}.audio-clip{min-height:50px;touch-action:manipulation}.remove-clip-btn{font-size:16px;height:30px;width:30px}.track{touch-action:manipulation}.audio-clip.dragging,.sound-item.dragging{touch-action:none}*{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}body{-webkit-overflow-scrolling:touch;overscroll-behavior:none}body.dragging,body.dragging .timeline-container,body.dragging .track,body.dragging .tracks-area{overflow:hidden;touch-action:none}}@media (max-width:1024px){.daw-controls{flex-direction:column;gap:15px}.center-controls,.left-controls,.right-controls{justify-content:center;width:100%}.timing-controls{flex-direction:row;flex-wrap:wrap;gap:10px}.sound-panel{width:250px}.track-headers{width:150px}.track-info h4{font-size:14px}.beat{min-width:80px}.daw-page .play-btn,.daw-page .stop-btn,.transport-btn{height:60px!important;max-width:60px;min-width:60px;width:60px!important}}@media (max-width:768px){.daw-main-area{flex-direction:column}.sound-panel{margin-bottom:20px;max-height:250px;order:-1;position:relative;right:auto;top:auto;width:100%}.sound-panel-header{margin-bottom:15px}.sound-list{flex-direction:row;gap:15px;overflow-x:auto;padding-bottom:10px}.sound-item{flex-shrink:0;min-width:200px}.daw-workspace{flex-direction:column;height:auto;max-height:none;min-height:400px}.track-headers{display:flex;height:auto;overflow-x:auto;width:100%}.track-header{border-bottom:none;border-right:1px solid var(--border-color);min-width:150px}.timeline-container{min-height:300px;overflow-x:auto}.tracks-area{min-height:300px}.transport-btn{font-size:20px;height:50px;width:50px}.daw-page{min-height:auto;padding-bottom:20px}.transport-btn{font-size:20px}.daw-page .play-btn,.daw-page .stop-btn,.transport-btn{height:50px!important;max-width:50px;min-width:50px;width:50px!important}}.mobile-tips{background:#007bff1a;border-left:4px solid #007bff;border-radius:8px;margin-top:20px;padding:15px}.mobile-tips h4{color:#007bff;font-size:16px;margin:0 0 10px}.mobile-tips ul{margin:0;padding-left:20px}.mobile-tips li{color:#666;font-size:14px;margin-bottom:5px}.instructions-collapsible{margin-top:16px}.instructions-summary{align-items:center;background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;padding:10px 12px}.instructions-summary:focus{outline:2px solid #667eea66}.instructions-title{font-weight:700}.instructions-toggle{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;color:#fff;cursor:pointer;padding:6px 10px}#instructions-body{margin-top:10px}@media (max-width:768px){.mobile-tips{display:block}.instructions{font-size:14px}.instructions li{line-height:1.4;margin-bottom:8px}}@media (min-width:769px){.mobile-tips{opacity:.8}}.project-controls{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.file-input-label{align-items:center;cursor:pointer;display:inline-flex;justify-content:center;text-decoration:none}.file-input-label:hover{transform:translateY(-1px)}.button-primary:disabled{background:linear-gradient(135deg,#9e9e9e,#757575);cursor:not-allowed;transform:none}.controls .accessible-button:not(.play-btn):not(.stop-btn),.controls button:not(.play-btn):not(.stop-btn),.daw-controls .accessible-button:not(.play-btn):not(.stop-btn),.daw-controls button:not(.play-btn):not(.stop-btn),.project-controls .accessible-button:not(.play-btn):not(.stop-btn),.project-controls button:not(.play-btn):not(.stop-btn){align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;min-height:48px;min-width:120px;padding:12px 24px;transition:all .3s ease}.button-primary,.controls .btn-primary,.daw-controls .btn-primary{background:linear-gradient(135deg,var(--safe-blue),var(--primary-hover));box-shadow:0 4px 12px #0066cc4d;color:#fff}.button-primary:hover,.controls .btn-primary:hover,.daw-controls .btn-primary:hover{background:linear-gradient(135deg,var(--primary-hover),#0052a3);box-shadow:0 6px 16px #06c6;transform:translateY(-2px)}.button-secondary,.controls .btn-secondary,.daw-controls .btn-secondary{background:linear-gradient(135deg,var(--safe-orange),var(--secondary-hover));box-shadow:0 4px 12px #ff8c004d;color:#fff}.button-secondary:hover,.controls .btn-secondary:hover,.daw-controls .btn-secondary:hover{background:linear-gradient(135deg,var(--secondary-hover),#e67300);box-shadow:0 6px 16px #ff8c0066;transform:translateY(-2px)}.controls .accessible-button:focus,.controls button:focus,.daw-controls .accessible-button:focus,.daw-controls button:focus,.project-controls .accessible-button:focus,.project-controls button:focus{outline:2px solid var(--focus-color);outline-offset:2px}.toggle-panel-btn{align-items:center;background:linear-gradient(135deg,var(--safe-blue),var(--safe-purple));border:none;border-radius:8px;box-shadow:0 4px 12px #0066cc4d;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;min-height:48px;min-width:120px;padding:12px 24px;transition:all .3s ease}.toggle-panel-btn:hover{background:linear-gradient(135deg,var(--primary-hover),#553c9a);box-shadow:0 6px 16px #06c6;transform:translateY(-2px)}.toggle-panel-btn:focus{outline:2px solid var(--focus-color);outline-offset:2px}.button-warning{align-items:center;background:linear-gradient(135deg,var(--safe-orange),var(--secondary-hover));border:none;border-radius:8px;box-shadow:0 4px 12px #ff8c004d;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;min-height:48px;min-width:120px;padding:12px 24px;transition:all .3s ease}.button-warning:hover{background:linear-gradient(135deg,var(--secondary-hover),#e67300);box-shadow:0 6px 16px #ff8c0066;transform:translateY(-2px)}.button-warning:active{box-shadow:0 4px 12px #ff8c004d;transform:translateY(-1px)}.button-warning:focus{outline:2px solid var(--focus-color);outline-offset:2px}.auto-save-info{background:linear-gradient(135deg,#e8f5e8,#f1f8f1);border-left:4px solid #4caf50;border-radius:8px;margin-top:20px;padding:15px}.auto-save-info h4{color:#2e7d32;font-size:16px;margin-bottom:10px}.auto-save-info ul{margin:0;padding-left:20px}.auto-save-info li{color:#388e3c;margin-bottom:5px}@media (max-width:768px){.daw-controls{padding:15px}.top-controls-row{flex-direction:column;gap:15px;text-align:center}.bottom-controls-row{flex-direction:column;gap:20px}.left-controls,.right-controls{justify-content:center;width:100%}.transport-controls{gap:20px}.project-controls{flex-wrap:wrap;gap:10px;justify-content:center}.timing-controls{gap:15px;justify-content:center}}@media (max-width:480px){.transport-btn{font-size:24px;height:60px;max-width:60px;min-width:60px;width:60px}.transport-controls{gap:15px}.project-controls{flex-direction:column;width:100%}.project-controls button,.project-controls label{text-align:center;width:100%}.timing-controls{flex-direction:column;gap:10px}}@media (prefers-reduced-motion:reduce){.play-btn,.stop-btn,.transport-btn{transition:none}.play-btn:hover,.stop-btn:hover{transform:none}.play-btn.playing{animation:none}@keyframes pulse-play{0%,to{transform:scale(1)}50%{transform:scale(1)}}}.modal-overlay{align-items:center;background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal-content{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000004d;margin:20px;max-height:85vh;max-width:500px;overflow-y:auto;width:90%}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{align-items:center;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;padding:20px}.modal-header h3{color:#1e293b;font-size:1.3rem;margin:0}.modal-close-btn{background:none;border:none;border-radius:4px;color:#64748b;cursor:pointer;font-size:1.5rem;padding:5px;transition:all .2s ease}.modal-close-btn:hover{background:#f1f5f9;color:#374151}.modal-body{display:flex;flex-direction:column;gap:20px;padding:20px}.modal-body .form-group{display:flex;flex-direction:column;gap:8px}.modal-body .form-group label{color:#374151;font-size:.95rem;font-weight:600}.modal-body .form-group input{border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;padding:12px 15px;transition:border-color .3s ease}.modal-body .form-group input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.modal-footer{border-top:1px solid #e2e8f0;display:flex;gap:12px;justify-content:flex-end;padding:20px 20px 30px}.modal-footer .button-primary,.modal-footer .button-secondary{border:none;border-radius:6px;cursor:pointer;font-size:.95rem;font-weight:500;padding:10px 20px;transition:all .3s ease}.modal-footer .button-secondary{background:#f1f5f9;color:#64748b}.modal-footer .button-secondary:hover{background:#e2e8f0;color:#475569}.modal-footer .button-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.modal-footer .button-primary:hover:not(:disabled){box-shadow:0 4px 15px #667eea4d;transform:translateY(-2px)}.modal-footer .button-primary:disabled{box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}@media (max-width:768px){.modal-content{margin:10px;max-width:none;width:95%}.modal-footer{flex-direction:column}.modal-footer .button-primary,.modal-footer .button-secondary{text-align:center;width:100%}}.cloud-page{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0 auto;max-width:1200px;padding:20px}.room-join-container{background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a;margin:60px auto;max-width:400px;padding:40px;text-align:center}.room-join-container h2{color:#2c3e50;font-size:1.8rem;margin-bottom:10px}.room-join-container p{color:#7f8c8d;margin-bottom:30px}.room-join-form{display:flex;flex-direction:column;gap:20px}.room-input{border:2px solid #e1e8ed;border-radius:8px;font-size:1.2rem;padding:15px;text-align:center;transition:border-color .3s ease;width:100%}.room-input:focus{border-color:#3498db;outline:none}.join-button{background:linear-gradient(135deg,#3498db,#2980b9);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:15px 30px;transition:all .3s ease}.join-button:hover:not(:disabled){box-shadow:0 4px 15px #3498db4d;transform:translateY(-2px)}.join-button:disabled{cursor:not-allowed;opacity:.6}.cloud-header{align-items:center;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;display:flex;justify-content:space-between;margin-bottom:30px;padding:20px}.cloud-header h2{color:#2c3e50;margin:0}.room-info{align-items:center;color:#34495e;display:flex;font-weight:500;gap:15px}.leave-button{background:#e74c3c;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;padding:8px 16px;transition:background .3s ease}.leave-button:hover{background:#c0392b}.audio-list-section,.search-section,.upload-section{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;margin-bottom:25px;padding:25px}.audio-list-section h3,.upload-section h3{align-items:center;color:#2c3e50;display:flex;font-size:1.3rem;gap:8px;margin-bottom:20px}.upload-form{display:flex;flex-direction:column;gap:20px}.form-row{grid-template-columns:1fr 1fr}.form-group label{color:#34495e}.search-input,.tag-input,.text-input{border:2px solid #e1e8ed;border-radius:6px;font-size:1rem;padding:12px;transition:border-color .3s ease}.search-input:focus,.tag-input:focus,.text-input:focus{border-color:#3498db;outline:none}.tag-input-container{align-items:center;display:flex;gap:10px}.tag-add-button{background:#27ae60;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;padding:12px 16px;transition:background .3s ease;white-space:nowrap}.tag-add-button:hover{background:#229954}.tags-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.tag{background:#ecf0f1;border-radius:20px;color:#2c3e50;font-size:.85rem;gap:6px;padding:6px 12px}.tag,.tag-remove{align-items:center;display:flex}.tag-remove{background:#e74c3c;border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:.7rem;height:18px;justify-content:center;width:18px}.upload-button{align-self:flex-start;background:linear-gradient(135deg,#27ae60,#229954);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:15px 30px;transition:all .3s ease}.upload-button:hover:not(:disabled){box-shadow:0 4px 15px #27ae604d;transform:translateY(-2px)}.upload-button:disabled{cursor:not-allowed;opacity:.6}.search-controls{align-items:center;display:flex;gap:15px}.search-input{flex:1 1;max-width:300px}.search-button{background:#3498db;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;padding:12px 20px;transition:background .3s ease}.search-button:hover{background:#2980b9}.no-files{color:#7f8c8d;font-style:italic;padding:40px 20px;text-align:center}.audio-list{grid-gap:15px;display:grid;gap:15px}.audio-item{align-items:center;background:#f8f9fa;border-left:4px solid #3498db;border-radius:8px;display:flex;justify-content:space-between;padding:20px;transition:transform .2s ease,box-shadow .2s ease}.audio-item:hover{box-shadow:0 4px 15px #0000001a;transform:translateY(-2px)}.audio-info{flex:1 1}.audio-info h4{color:#2c3e50;font-size:1.1rem;margin:0 0 8px}.audio-details{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:8px}.audio-details span{color:#7f8c8d;font-size:.9rem}.audio-tags{display:flex;flex-wrap:wrap;gap:6px}.audio-tag{background:#3498db;border-radius:12px;color:#fff;font-size:.8rem;padding:3px 8px}.audio-actions{gap:10px}.audio-actions,.play-button{align-items:center;display:flex}.play-button{background:#3498db;font-size:1.2rem;height:44px;justify-content:center;min-width:44px;padding:10px 14px;transition:all .3s ease}.play-button:hover{background:#2980b9;transform:scale(1.05)}.play-button:active{transform:scale(.95)}.download-button{background:#27ae60;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;padding:10px 16px;transition:background .3s ease;white-space:nowrap}.download-button:hover{background:#229954}.error-message{background:#fff5f5;border-left:4px solid #e53e3e;color:#e53e3e;margin-top:15px;padding:15px}@media (max-width:768px){.cloud-page{padding:15px}.cloud-header{flex-direction:column;gap:15px;text-align:center}.form-row{grid-template-columns:1fr}.audio-item,.search-controls{align-items:stretch;flex-direction:column}.audio-item{gap:15px}.audio-actions,.audio-details{justify-content:center}}@media (max-width:480px){.room-join-container{margin:20px auto;padding:25px}.audio-details{flex-direction:column;gap:8px}}.library-selection{background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;margin-bottom:20px;padding:20px}.library-selection h4{color:#2c3e50;font-size:1.1rem;margin:0 0 15px}.library-search{margin-bottom:15px}.library-tag-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.tag-filter-btn{background:#fff;border:1px solid #dee2e6;border-radius:20px;cursor:pointer;font-size:.85rem;padding:6px 12px;transition:all .2s ease}.tag-filter-btn:hover{background:#f8f9fa;border-color:#3498db}.tag-filter-btn.active{background:#3498db;border-color:#3498db;color:#fff}.library-sounds-list{background:#fff;border:1px solid #dee2e6;border-radius:6px;max-height:300px;overflow-y:auto}.library-sound-item{align-items:center;border-bottom:1px solid #f1f3f4;cursor:pointer;display:flex;justify-content:space-between;padding:12px 15px;transition:background-color .2s ease}.library-sound-item:hover{background:#f8f9fa}.library-sound-item.selected{background:#e3f2fd;border-left:4px solid #2196f3}.library-sound-item:last-child{border-bottom:none}.sound-info h5{color:#2c3e50;font-size:.95rem;margin:0 0 5px}.sound-tags{display:flex;flex-wrap:wrap;gap:4px}.tag.small{background:#e9ecef;border-radius:10px;color:#6c757d;font-size:.75rem;padding:2px 8px}.mini-audio-player{height:30px;width:150px}.no-sounds{color:#6c757d;font-style:italic;padding:30px;text-align:center}.admin-page{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0 auto;max-width:1400px;padding:20px}.admin-header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;box-shadow:0 4px 20px #667eea4d;color:#fff;margin-bottom:30px;padding:30px;text-align:center}.admin-header h1{font-size:2rem;font-weight:600;margin:0}.admin-nav{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;display:flex;gap:5px;margin-bottom:30px;padding:5px}.nav-tab{background:#0000;border:none;border-radius:8px;color:#64748b;cursor:pointer;flex:1 1;font-size:1rem;font-weight:500;padding:15px 20px;transition:all .3s ease}.nav-tab:hover{background:#f1f5f9;color:#475569}.nav-tab.active{background:#667eea;box-shadow:0 2px 8px #667eea4d;color:#fff}.audio-section,.create-room-section,.rooms-list-section,.songs-section{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;margin-bottom:30px;padding:30px}.audio-section h2,.create-room-section h2,.rooms-list-section h2,.songs-section h2{color:#1e293b;font-size:1.4rem;font-weight:600;margin-bottom:25px}.create-room-form{max-width:800px}.form-row{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:25px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{color:#374151;font-size:.95rem;font-weight:600}.form-group input{border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;padding:12px 15px;transition:border-color .3s ease}.form-group input:focus{border-color:#667eea;outline:none}.create-button{background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:15px 30px;transition:all .3s ease}.create-button:hover:not(:disabled){box-shadow:0 4px 15px #10b9814d;transform:translateY(-2px)}.create-button:disabled{cursor:not-allowed;opacity:.6}.rooms-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.room-card{background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;padding:25px;position:relative;transition:all .3s ease}.room-card:hover{border-color:#667eea;box-shadow:0 8px 25px #0000001a;transform:translateY(-5px)}.room-info h3{color:#1e293b;font-size:1.3rem;margin:0 0 10px}.room-info p{color:#64748b;font-size:.95rem;margin:5px 0}.room-date{color:#9ca3af!important;font-size:.85rem!important;margin-top:10px!important}.room-actions{display:flex;gap:10px;margin-top:20px}.select-button{background:#667eea;border:none;border-radius:6px;color:#fff;cursor:pointer;flex:1 1;font-size:.9rem;font-weight:500;padding:10px 16px;transition:background .3s ease}.select-button:hover{background:#5a67d8}.delete-button{background:#ef4444;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:500;padding:10px 16px;transition:background .3s ease}.delete-button:hover{background:#dc2626}.audio-list,.songs-list{display:flex;flex-direction:column;gap:15px}.audio-item,.song-item{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;display:flex;justify-content:space-between;padding:25px;transition:all .3s ease}.audio-item:hover,.song-item:hover{background:#f1f5f9;border-color:#cbd5e1;box-shadow:0 4px 15px #0000001a;transform:translateY(-2px)}.audio-info,.song-info{flex:1 1}.audio-info h4,.song-info h4{color:#1e293b;font-size:1.2rem;font-weight:600;margin:0 0 10px}.audio-details,.song-details{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:10px}.audio-details span,.song-details span{background:#fff;border:1px solid #e2e8f0;border-radius:4px;color:#64748b;font-size:.9rem;padding:4px 8px}.tags{display:flex;flex-wrap:wrap;gap:8px}.tag{background:#667eea;border-radius:12px;color:#fff;font-size:.8rem;font-weight:500;padding:4px 10px}.audio-actions,.song-actions{align-items:center;display:flex;flex-shrink:0;gap:15px}.audio-actions audio{max-width:300px}.play-button{background:#10b981;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:500;padding:10px 16px;transition:background .3s ease;white-space:nowrap}.play-button:hover{background:#059669}.no-data{color:#9ca3af;font-size:1.1rem;font-style:italic;padding:60px 20px;text-align:center}.error-message{background:#fef2f2;border-left:4px solid #dc2626;border-radius:8px;color:#dc2626;font-weight:500;margin-bottom:25px;padding:15px 20px}.loading-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.loading-spinner{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000004d;color:#1e293b;font-size:1.1rem;font-weight:600;padding:30px 40px}@media (max-width:768px){.admin-page{padding:15px}.admin-header{padding:20px}.admin-header h1{font-size:1.5rem}.admin-nav{flex-direction:column}.form-row,.rooms-grid{grid-template-columns:1fr}.audio-item,.song-item{align-items:stretch;flex-direction:column;gap:20px}.audio-actions,.song-actions{flex-wrap:wrap;justify-content:center}.audio-details,.song-details{justify-content:center}}@media (max-width:480px){.audio-section,.create-room-section,.rooms-list-section,.songs-section{padding:20px}.audio-actions audio{max-width:100%}}
/*# sourceMappingURL=main.2373a28a.css.map*/