:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;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}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}.navbar{display:flex;justify-content:space-between;align-items:center;background-color:#333;padding:10px;width:100%;box-sizing:border-box;position:fixed;top:0;left:0;z-index:1000}.brand{color:#fff;font-size:1.2rem;font-weight:700}.nav-buttons{display:flex;gap:.5em}.nav-button{padding:.4em .8em;border-radius:4px;background-color:transparent;border:none;cursor:pointer;font-size:.9em}.nav-button:hover{background-color:#404040}.nav-icon{width:20px;height:20px}body{margin:0;padding:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;display:flex;flex-direction:column;height:100%}#contentArea{flex-grow:1;padding:30px 2px 2px;overflow-y:auto}.addInput[type=text]{flex:1;padding:.5rem .75rem;border:1px solid #ccc;border-radius:6px;font-size:1rem;transition:border .2s,box-shadow .2s;width:88%;display:flex;justify-content:space-between;gap:1ch;margin-bottom:2px}.addInput[type=text]:focus{border-color:#5a67d8;box-shadow:0 0 0 3px #5a67d833;outline:none}.add-button{padding:.5rem .75rem;border:1px solid #ccc;border-radius:6px;cursor:pointer;transition:background-color .2s,transform .1s;display:flex;justify-content:space-between;gap:1ch;margin-bottom:2px}.add-button:hover{background-color:#404040}.add-button:active{transform:scale(.98)}.card{padding:2em;display:flex;flex-wrap:wrap;gap:10px}.card button{padding:15px;font-size:16px;border-radius:8px;border:1px solid #383838;background-color:#2d2d2d;cursor:pointer}.card button:hover{background-color:#404040}.search-bar{width:50%;padding:8px;margin-bottom:10px;margin-top:3px}.combined-filter{width:30%;padding:8px;margin-bottom:10px;margin-top:3px}.sound-container{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}.sound-card{position:relative;border:1px solid #ccc;border-radius:8px;padding:5px;margin:8px;display:flex;flex-direction:column;align-items:center}.delete-button{position:absolute;top:4px;right:6px;cursor:pointer;font-size:14px;color:#999;background:transparent;border:none;font-weight:700}.delete-button:hover{color:red}.sound-button{margin-bottom:8px;padding:6px 12px;font-size:16px;align-self:center}.volume-slider{width:70%;margin-top:5px}.checkbox-group{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.checkbox-label{display:flex;align-items:center;font-size:14px}.player-Sound-button{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.player-button{margin:2px;padding:2px 6px;font-size:12px;background-color:#444;color:#fff;border:none;border-radius:4px;cursor:pointer}.player-button:hover{background-color:#666}.audio-toggle-wrapper{display:flex;align-items:center;gap:.5rem;margin-left:1rem}.switch{position:relative;display:inline-block;width:42px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.switch-text{font-size:.9rem;color:#eee}.dropdown-menu{position:absolute;top:48px;right:10px;background:#222;border:1px solid #444;border-radius:8px;padding:10px;z-index:1000;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 10px #00000080}.dropdown-menu.hidden{display:none}.dropdown-item{background:#333;color:#fff;border:none;padding:6px 12px;border-radius:4px;text-align:left;cursor:pointer;font-size:14px}.dropdown-item:hover{background-color:#555}.dropdown-section{margin-bottom:8px}