.music-list{display:grid;gap:1rem;padding:1rem 0}.music-list-empty{text-align:center;padding:4rem 2rem;color:#b3b3b3}.music-item{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;padding:.75rem;background-color:#181818;border-radius:8px;cursor:pointer;transition:background-color .2s;align-items:center}.music-item:hover{background-color:#282828}.music-item.active{background-color:#1a3a1a;border:1px solid #1db954}.music-item-cover{position:relative;width:60px;height:60px;border-radius:4px;overflow:hidden}.music-item-cover img{width:100%;height:100%;object-fit:cover}.music-item-play-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;opacity:0;transition:opacity .2s}.music-item:hover .music-item-play-overlay,.music-item.active .music-item-play-overlay{opacity:1}.music-item-info{overflow:hidden}.music-item-info h4{margin:0;font-size:1rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-item-info p{margin:.25rem 0 0;font-size:.875rem;color:#b3b3b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-item-album{font-size:.75rem!important}.music-item-language{font-size:.75rem!important;color:#4ade80!important}.music-item-votes{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}.music-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;text-align:right}.vote-btn{display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .75rem;background:linear-gradient(135deg,#ffffff0d,#ffffff05);border:1.5px solid rgba(255,255,255,.15);border-radius:20px;color:#fff;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #0000001a}.vote-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #0003}.vote-btn:active:not(:disabled){transform:translateY(0)}.vote-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.vote-btn.upvote{border-color:#4ade804d}.vote-btn.upvote:hover:not(:disabled){border-color:#4ade80;background:linear-gradient(135deg,#4ade8033,#4ade801a);box-shadow:0 4px 12px #4ade804d}.vote-btn.downvote{border-color:#ef44444d}.vote-btn.downvote:hover:not(:disabled){border-color:#ef4444;background:linear-gradient(135deg,#ef444433,#ef44441a);box-shadow:0 4px 12px #ef44444d}.vote-icon{font-size:1rem;line-height:1}.vote-count{font-weight:600;font-size:.875rem;min-width:20px;text-align:center}.music-item-genres{font-size:.75rem;color:#1db954;align-self:center;text-align:center;min-width:100px}.music-item-duration{font-size:.875rem;color:#b3b3b3}@media (max-width: 768px){.music-item{grid-template-columns:auto 1fr auto;gap:.75rem}.music-item-cover{width:50px;height:50px;grid-row:1}.music-item-info{grid-column:2;grid-row:1}.music-item-info .music-item-votes{display:none}.music-item-meta{grid-column:3;grid-row:1;align-items:flex-end;min-width:auto}.music-item-votes{display:flex!important;grid-column:1 / -1;grid-row:2;justify-content:center;gap:.75rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.1)}.vote-btn{padding:.375rem .75rem;font-size:.75rem;border-radius:16px}.vote-icon{font-size:.875rem}.vote-count{font-size:.75rem;min-width:18px}.music-item-info h4{font-size:.875rem}.music-item-info p{font-size:.75rem}.music-item-genres{font-size:.7rem}.music-item-duration{font-size:.75rem}}.genre-filter{margin-bottom:2rem}.search-box{margin-bottom:1.5rem}.search-input{width:100%;padding:.75rem 1rem;background-color:#181818;border:1px solid #282828;border-radius:24px;color:#fff;font-size:1rem;outline:none;transition:border-color .2s}.search-input:focus{border-color:#1db954}.search-input::placeholder{color:#b3b3b3}.genre-chips{display:flex;flex-wrap:wrap;gap:.5rem}.genre-chip{padding:.5rem 1rem;background-color:#181818;border:1px solid #282828;border-radius:20px;color:#fff;font-size:.875rem;cursor:pointer;transition:all .2s}.genre-chip:hover{background-color:#282828;border-color:#1db954}.genre-chip.active{background-color:#1db954;border-color:#1db954;font-weight:600}@media (max-width: 768px){.genre-chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.5rem}.genre-chips::-webkit-scrollbar{height:4px}.genre-chips::-webkit-scrollbar-track{background:#181818}.genre-chips::-webkit-scrollbar-thumb{background:#282828;border-radius:2px}.genre-chip:focus{outline:none;background-color:#181818;border-color:#282828}.genre-chip:focus.active{background-color:#1db954;border-color:#1db954}.genre-chip:active{background-color:#181818;border-color:#282828}.genre-chip:active.active{background-color:#1db954;border-color:#1db954}}.player{position:fixed;bottom:0;left:0;right:0;background-color:#181818;border-top:1px solid #282828;padding:1rem;z-index:1000}.player-empty{text-align:center;color:#b3b3b3;padding:1rem}.player-track-info{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.player-cover{width:60px;height:60px;object-fit:cover;border-radius:4px}.player-details h3{margin:0;font-size:1rem;color:#fff}.player-details p{margin:.25rem 0 0;font-size:.875rem;color:#b3b3b3}.player-album{font-size:.75rem!important;color:gray!important;font-style:italic}.player-controls{display:flex;align-items:center;gap:1rem}.player-play-button{background-color:#1db954;border:none;border-radius:50%;width:40px;height:40px;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s;flex-shrink:0}.player-play-button:hover{background-color:#1ed760}.player-progress{display:flex;align-items:center;gap:.5rem;flex:1}.player-time{font-size:.75rem;color:#b3b3b3;min-width:40px}.player-slider{flex:1;height:4px;border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none}.player-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer}.player-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.player-volume{display:flex;align-items:center;gap:.5rem;min-width:150px}.volume-slider{width:100px;background:linear-gradient(to right,#1db954,#1db954 100%,#404040,#404040)}@media (max-width: 768px){.player{padding:.75rem}.player-track-info{margin-bottom:.75rem}.player-cover{width:50px;height:50px}.player-details h3{font-size:.875rem}.player-details p{font-size:.75rem}.player-volume{display:none}}.home-page{min-height:100vh;padding:2rem;padding-bottom:200px}.home-header{margin-bottom:2rem;text-align:center}.home-header h1{font-size:3rem;margin:0;color:#1db954;font-weight:700}.home-header p{font-size:1.25rem;margin:.5rem 0 0;color:#b3b3b3}.filters-container{display:flex;gap:1rem;align-items:center;margin:1rem 0;padding:1rem;background-color:#181818;border-radius:8px}.language-filter{display:flex;align-items:center;gap:1rem}.language-filter label{font-size:1rem;color:#fff;font-weight:600}.language-select{padding:.5rem 1rem;background-color:#282828;border:1px solid #1db954;border-radius:20px;color:#fff;font-size:.875rem;cursor:pointer;outline:none;transition:all .2s}.language-select:hover{background-color:#333;border-color:#1ed760}.artist-filter{display:flex;align-items:center;gap:1rem}.artist-filter label{font-size:1rem;color:#fff;font-weight:600}.artist-select{padding:.5rem 1rem;background-color:#282828;border:1px solid #1db954;border-radius:20px;color:#fff;font-size:.875rem;cursor:pointer;outline:none;transition:all .2s}.artist-select:hover{background-color:#333;border-color:#1ed760}.language-select:hover{background-color:#333}.language-select:focus{border-color:#1ed760;box-shadow:0 0 0 2px #1ed76033}.loading,.error{text-align:center;padding:4rem 2rem;color:#b3b3b3;font-size:1.25rem}.error{color:#f44}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:2rem;padding:1rem}.pagination button{padding:.5rem 1rem;background-color:#1db954;border:none;border-radius:20px;color:#fff;font-weight:600;cursor:pointer;transition:background-color .2s}.pagination button:hover:not(:disabled){background-color:#1ed760}.pagination button:disabled{opacity:.5;cursor:not-allowed}.pagination span{color:#b3b3b3}@media (max-width: 768px){.home-page{padding:1rem;padding-bottom:180px}.home-header h1{font-size:2rem}.home-header p{font-size:1rem}.filters-container{flex-direction:column;align-items:stretch}.language-filter,.artist-filter{flex-direction:column;align-items:flex-start;width:100%}.language-select,.artist-select{width:100%;-webkit-tap-highlight-color:transparent}.language-select:focus,.artist-select:focus{outline:none}}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}.login-container{width:100%;max-width:400px;padding:2rem;background-color:#181818;border-radius:8px}.login-container h1{text-align:center;color:#1db954;margin-bottom:2rem}.login-container form{display:flex;flex-direction:column;gap:1rem}.login-container .form-group{display:flex;flex-direction:column;gap:.5rem}.login-container label{color:#fff;font-size:.875rem;font-weight:500}.login-container input{padding:.75rem;background-color:#282828;border:1px solid #404040;border-radius:4px;color:#fff;font-size:1rem}.login-container input:focus{outline:none;border-color:#1db954}.login-container button{padding:1rem;background-color:#1db954;border:none;border-radius:24px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s}.login-container button:hover:not(:disabled){background-color:#1ed760}.login-container button:disabled{opacity:.6;cursor:not-allowed}.login-container .back-button{background-color:#282828}.login-container .back-button:hover{background-color:#404040}.admin-music-form{max-width:600px;margin:0 auto;padding:2rem;background-color:#181818;border-radius:8px}.admin-music-form h2{margin-top:0;color:#fff}.form-error{padding:1rem;background-color:#f44;color:#fff;border-radius:4px;margin-bottom:1rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:#fff;font-size:.875rem;font-weight:500}.form-group input[type=text],.form-group input[type=number],.form-group input[type=date],.form-group input[type=url],.form-group input[type=file],.form-group select{width:100%;padding:.75rem;background-color:#282828;border:1px solid #404040;border-radius:4px;color:#fff;font-size:1rem}.form-group input[type=text]:focus,.form-group input[type=number]:focus,.form-group input[type=date]:focus,.form-group input[type=url]:focus,.form-group select:focus{outline:none;border-color:#1db954}.genre-select{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;padding:1rem;background-color:#282828;border-radius:4px}.genre-checkbox{display:flex;align-items:center;gap:.5rem;color:#fff;cursor:pointer}.genre-checkbox input[type=checkbox]{cursor:pointer}.form-buttons{display:flex;gap:1rem;margin-top:2rem}.submit-button{flex:1;padding:1rem;background-color:#1db954;border:none;border-radius:24px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s}.submit-button:hover:not(:disabled){background-color:#1ed760}.submit-button:disabled{opacity:.6;cursor:not-allowed}.cancel-button{padding:1rem 2rem;background-color:#404040;border:none;border-radius:24px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s}.cancel-button:hover{background-color:#505050}.admin-page{min-height:100vh;padding:2rem}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #282828}.admin-header h1{color:#1db954;margin:0}.admin-header-actions{display:flex;align-items:center;gap:1rem;color:#fff}.logout-button{padding:.5rem 1rem;background-color:#f44;border:none;border-radius:20px;color:#fff;cursor:pointer;font-weight:600;transition:background-color .2s}.logout-button:hover{background-color:#f66}.admin-music-list{margin-top:3rem}.admin-music-list h2{color:#fff;margin-bottom:1rem}.admin-table{overflow-x:auto}.admin-table table{width:100%;background-color:#181818;border-radius:8px;overflow:hidden}.admin-table th,.admin-table td{padding:1rem;text-align:left;border-bottom:1px solid #282828}.admin-table th{background-color:#282828;color:#fff;font-weight:600}.admin-table td{color:#b3b3b3}.admin-table tr.editing{background-color:#1a3a1a;border-left:3px solid #1db954}.action-buttons{display:flex;gap:.5rem}.edit-button{padding:.5rem 1rem;background-color:#1db954;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;transition:background-color .2s}.edit-button:hover{background-color:#1ed760}.delete-button{padding:.5rem 1rem;background-color:#f44;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.875rem;transition:background-color .2s}.delete-button:hover{background-color:#f66}@media (max-width: 768px){.admin-page{padding:1rem}.admin-header{flex-direction:column;align-items:flex-start;gap:1rem}}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input,textarea,select{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#121212;color:#fff}.app{min-height:100vh}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#121212}::-webkit-scrollbar-thumb{background:#282828;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#404040}