.header{background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.header-content{max-width:1400px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{font-size:24px;font-weight:700;color:var(--primary);letter-spacing:-.5px}.filter-nav{display:flex;gap:8px;flex:1;justify-content:center}.filter-nav button{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;color:var(--text-secondary);transition:all .2s}.filter-nav button:hover{background:var(--bg-hover);color:var(--text-primary)}.filter-nav button.active{background:var(--primary);color:var(--bg-dark)}.header-actions{display:flex;align-items:center;gap:12px}.view-toggle{display:flex;gap:4px;background:var(--bg-hover);border-radius:20px;padding:4px}.view-toggle button{padding:6px 12px;border-radius:16px;color:var(--text-secondary);transition:all .2s}.view-toggle button:hover{color:var(--text-primary)}.view-toggle button.active{background:var(--primary);color:var(--bg-dark)}.btn-upload{display:flex;align-items:center;gap:8px;padding:8px 20px;border-radius:20px;background:var(--primary);color:var(--bg-dark);font-weight:600;transition:all .2s}.btn-upload:hover{background:var(--primary-hover);transform:scale(1.05)}.btn-secondary{padding:8px 24px;border-radius:20px;background:transparent;border:1px solid var(--text-secondary);color:var(--text-primary);font-weight:600;transition:all .2s}.btn-secondary:hover{border-color:var(--text-primary);transform:scale(1.05)}@media (max-width: 768px){.header-content{flex-wrap:wrap;gap:12px}.logo{font-size:20px}.filter-nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:4px}.filter-nav button{padding:6px 12px;font-size:14px;white-space:nowrap}.header-actions{gap:8px}.view-toggle button,.btn-upload,.btn-secondary{padding:6px 12px;font-size:14px}.btn-upload span{display:none}}.modal-content{background:var(--bg-card);border-radius:12px;max-width:500px;width:90%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.create-playlist-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;background:var(--primary);color:var(--bg-dark);border-radius:8px;font-weight:600;transition:all .2s;margin-bottom:20px}.create-playlist-btn:hover{background:var(--primary-hover);transform:scale(1.02)}.playlist-list{display:flex;flex-direction:column;gap:8px}.playlist-item{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg-hover);border-radius:8px;text-align:left;transition:all .2s}.playlist-item:hover{background:var(--border);transform:translate(4px)}.track-count{color:var(--text-secondary);font-size:14px}.create-form{display:flex;flex-direction:column;gap:16px}.create-form input{padding:12px;background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-family:inherit;font-size:14px}.create-form input:focus{outline:none;border-color:var(--primary)}@media (max-width: 768px){.modal-content{width:95%;max-height:90vh}.modal-header{padding:16px}.modal-header h3{font-size:18px}.modal-body{padding:16px}.create-playlist-btn{padding:14px;font-size:14px}.playlist-item{padding:14px}.create-form input{padding:10px;font-size:13px}.form-actions{flex-direction:column;gap:8px}.form-actions button{width:100%;padding:10px}}.content-section h2{font-size:24px;margin-bottom:20px}.content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.content-card{background:var(--bg-card);border-radius:8px;overflow:hidden;transition:all .2s}.content-card:hover{background:var(--bg-hover);transform:translateY(-4px)}.content-card.playing{border:2px solid var(--primary)}.content-thumbnail{position:relative;width:100%;aspect-ratio:1;overflow:hidden}.content-thumbnail img{width:100%;height:100%;object-fit:cover}.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--primary);color:var(--bg-dark);display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s}.content-card:hover .play-btn{opacity:1}.content-info{padding:16px}.content-info h3{font-size:18px;margin-bottom:8px}.content-description{color:var(--text-secondary);font-size:14px;margin-bottom:12px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.content-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}.content-type{text-transform:capitalize;color:var(--primary);font-weight:600}.content-duration{display:flex;align-items:center;gap:4px;color:var(--text-secondary)}.content-actions{display:flex;gap:8px;align-items:center}.action-btn{color:var(--text-secondary);transition:all .2s;padding:6px;border-radius:50%}.action-btn:hover{color:var(--text-primary);background:var(--bg-hover);transform:scale(1.1)}.action-btn.liked,.action-btn.saved{color:var(--primary)}.like-btn.liked:hover{color:#f44}.content-list{display:flex;flex-direction:column;gap:12px}.content-list .content-card{display:flex;flex-direction:row;align-items:center;padding:12px;gap:16px}.content-list .content-card:hover{transform:translate(4px)}.content-list .content-thumbnail{width:80px;height:80px;min-width:80px;aspect-ratio:1;border-radius:8px}.content-list .content-info{flex:1;display:flex;flex-direction:column;gap:8px;padding:0}.content-list .content-info h3{font-size:16px;margin:0}.content-list .content-description{margin:0;-webkit-line-clamp:1}.content-list .content-footer{margin:0}.content-list .play-btn{width:48px;height:48px}@media (max-width: 768px){.content-section h2{font-size:20px;margin-bottom:16px}.content-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.content-list .content-card{padding:8px;gap:12px}.content-list .content-thumbnail{width:60px;height:60px;min-width:60px}.content-list .content-info h3{font-size:14px}.content-list .content-description,.content-meta{font-size:12px}.content-actions{gap:4px}.action-btn{padding:4px}.content-list .play-btn{width:40px;height:40px}}.continue-listening{margin-bottom:40px}.continue-listening h2{font-size:24px;margin-bottom:20px}.continue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.continue-card{background:var(--bg-card);border-radius:8px;padding:16px;transition:all .2s;cursor:pointer}.continue-card:hover{background:var(--bg-hover)}.continue-card.playing{border:2px solid var(--primary)}.continue-thumbnail{position:relative;width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;margin-bottom:12px}.continue-thumbnail img{width:100%;height:100%;object-fit:cover}.play-overlay{position:absolute;bottom:8px;right:8px;width:48px;height:48px;border-radius:50%;background:var(--primary);color:var(--bg-dark);display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s;transform:translateY(8px)}.continue-card:hover .play-overlay{opacity:1;transform:translateY(0)}.continue-info h3{font-size:16px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continue-meta{display:flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:14px}@media (max-width: 768px){.continue-listening h2{font-size:20px;margin-bottom:16px}.continue-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.continue-card{padding:12px}.continue-info h3{font-size:14px}.continue-meta{font-size:12px}.play-overlay{width:40px;height:40px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:var(--bg-card);border-radius:12px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border)}.modal-header h3{font-size:20px;margin:0}.close-btn{color:var(--text-secondary);transition:all .2s}.close-btn:hover{color:var(--text-primary);transform:scale(1.1)}.modal-body{padding:20px;overflow-y:auto}.upload-modal{max-width:600px;width:90%}.upload-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:600;color:var(--text-primary)}.form-group input,.form-group textarea{padding:12px;background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-family:inherit;font-size:14px}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary)}.type-selector{display:flex;gap:12px}.type-selector button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--bg-hover);border:2px solid var(--border);border-radius:8px;color:var(--text-secondary);transition:all .2s}.type-selector button:hover{border-color:var(--text-secondary)}.type-selector button.active{background:var(--primary);border-color:var(--primary);color:var(--bg-dark)}.file-input{position:relative;display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-hover);border:2px dashed var(--border);border-radius:8px;cursor:pointer;transition:all .2s}.file-input:hover{border-color:var(--primary)}.file-input input[type=file]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.file-input span{color:var(--text-secondary);font-size:14px}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}.form-actions button{padding:10px 24px;border-radius:20px;font-weight:600;transition:all .2s}.btn-primary{background:var(--primary);color:var(--bg-dark)}.duration-info{color:var(--primary);font-size:13px;margin-top:8px;display:block}@media (max-width: 768px){.upload-modal{width:95%;max-height:90vh}.modal-header{padding:16px}.modal-header h3{font-size:18px}.modal-body{padding:16px}.form-group label{font-size:13px}.form-group input,.form-group textarea,.type-selector button{padding:10px;font-size:13px}.file-input{padding:10px}.file-input span{font-size:12px}.form-actions{flex-direction:column;gap:8px}.form-actions button{width:100%}}.dashboard{max-width:1400px;margin:0 auto}.dashboard-main{padding:20px}.audio-player{position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);border-top:1px solid var(--border);z-index:200}.player-content{max-width:1400px;margin:0 auto;padding:16px 20px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;align-items:center}.player-track-info{display:flex;gap:12px;align-items:center}.player-track-info img{width:56px;height:56px;border-radius:4px;object-fit:cover}.player-track-info h4{font-size:14px;margin-bottom:4px}.player-track-info p{font-size:12px;color:var(--text-secondary);text-transform:capitalize}.player-controls{display:flex;flex-direction:column;gap:8px}.control-buttons{display:flex;justify-content:center;gap:16px;align-items:center}.control-buttons button{color:var(--text-secondary);transition:all .2s}.control-buttons button:hover{color:var(--text-primary);transform:scale(1.1)}.play-pause-btn{width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--bg-dark);display:flex;align-items:center;justify-content:center}.play-pause-btn:hover{background:var(--primary-hover);transform:scale(1.1)}.progress-bar{display:flex;align-items:center;gap:12px}.time{font-size:12px;color:var(--text-secondary);min-width:40px}.seek-bar,.volume-bar{flex:1;height:4px;border-radius:2px;background:var(--border);outline:none;-webkit-appearance:none}.seek-bar::-webkit-slider-thumb,.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--primary);cursor:pointer}.player-volume{display:flex;align-items:center;gap:12px;justify-content:flex-end}.volume-bar{width:100px}@media (max-width: 768px){.player-content{grid-template-columns:1fr;gap:12px;padding:12px}.player-track-info{order:1}.player-controls{order:2}.player-volume{order:3;justify-content:center}.player-track-info img{width:48px;height:48px}.player-track-info h4{font-size:13px}.player-track-info p{font-size:11px}.control-buttons{gap:12px}.play-pause-btn{width:36px;height:36px}.time{font-size:11px;min-width:35px}.volume-bar{width:80px}}.admin-login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a0a,#1a1a1a)}.login-container{background:var(--bg-card);border-radius:16px;padding:40px;width:90%;max-width:400px;box-shadow:0 8px 32px #0006}.login-header{text-align:center;margin-bottom:32px}.login-header h1{font-size:32px;color:var(--primary);margin-bottom:8px}.login-header p{color:var(--text-secondary);font-size:16px}.login-form{display:flex;flex-direction:column;gap:20px}.error-message{padding:12px;background:#ff44441a;border:1px solid #ff4444;border-radius:8px;color:#f44;font-size:14px;text-align:center}.form-field{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;transition:all .2s}.form-field:focus-within{border-color:var(--primary)}.form-field svg{color:var(--text-secondary)}.form-field input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:15px}.login-btn{padding:14px;background:var(--primary);color:var(--bg-dark);border-radius:8px;font-weight:600;font-size:16px;transition:all .2s;margin-top:8px}.login-btn:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-2px)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.back-btn{width:100%;padding:12px;margin-top:16px;background:transparent;border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;transition:all .2s}.back-btn:hover{border-color:var(--text-primary);color:var(--text-primary)}.admin-dashboard{min-height:100vh;background:var(--bg-dark)}.admin-header{background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.admin-header-content{max-width:1400px;margin:0 auto;padding:20px;display:flex;justify-content:space-between;align-items:center}.admin-header h1{font-size:28px;color:var(--primary)}.admin-actions{display:flex;align-items:center;gap:16px}.admin-email{color:var(--text-secondary);font-size:14px}.logout-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;background:transparent;border:1px solid var(--border);color:var(--text-primary);border-radius:8px;transition:all .2s}.logout-btn:hover{border-color:#f44;color:#f44}.admin-main{max-width:1400px;margin:0 auto;padding:40px 20px}.upload-section{margin-bottom:48px}.upload-section h2{font-size:24px;margin-bottom:8px}.upload-hint{color:var(--text-secondary);margin-bottom:24px}.upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 40px;background:var(--bg-card);border:2px dashed var(--border);border-radius:12px;cursor:pointer;transition:all .3s;position:relative}.upload-area:hover{border-color:var(--primary);background:var(--bg-hover)}.upload-area input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.upload-area svg{color:var(--primary)}.upload-area span{font-size:18px;font-weight:600}.upload-area small{color:var(--text-secondary);font-size:14px}.content-section{margin-top:48px}.content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}.content-header h2{font-size:24px}.filter-buttons{display:flex;gap:8px}.filter-buttons button{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;transition:all .2s}.filter-buttons button:hover{border-color:var(--text-primary);color:var(--text-primary)}.filter-buttons button.active{background:var(--primary);border-color:var(--primary);color:var(--bg-dark)}.content-table{display:flex;flex-direction:column;gap:12px}.content-row{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-card);border-radius:8px;transition:all .2s}.content-row:hover{background:var(--bg-hover)}.content-row img{width:80px;height:80px;border-radius:8px;object-fit:cover}.content-details{flex:1}.content-details h3{font-size:16px;margin-bottom:4px}.content-details p{color:var(--text-secondary);font-size:14px;margin-bottom:8px}.content-meta{display:flex;gap:12px;align-items:center;font-size:13px}.type-badge{padding:4px 12px;background:var(--primary);color:var(--bg-dark);border-radius:12px;font-weight:600;text-transform:capitalize}.delete-btn{padding:10px;background:transparent;border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;transition:all .2s}.delete-btn:hover{border-color:#f44;color:#f44;background:#ff44441a}@media (max-width: 768px){.admin-header-content{flex-direction:column;gap:16px;align-items:flex-start}.admin-actions{width:100%;justify-content:space-between}.upload-area{padding:40px 20px}.content-header,.content-row{flex-direction:column;align-items:flex-start}.content-row img{width:100%;height:200px}.delete-btn{width:100%}}.upload-queue{margin-top:24px;background:var(--bg-hover);border-radius:8px;padding:20px}.queue-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.queue-header h3{font-size:16px;margin:0}.queue-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--bg-card);border-radius:6px;margin-bottom:8px;transition:all .2s}.queue-item.uploading{border-left:3px solid var(--primary)}.queue-item.completed{border-left:3px solid #4caf50}.queue-item.failed{border-left:3px solid #f44336}.queue-item-info{flex:1;display:flex;flex-direction:column;gap:4px}.queue-item-info strong{font-size:14px}.file-details{font-size:12px;color:var(--text-secondary)}.queue-actions{display:flex;gap:8px}.btn-icon{padding:6px;border-radius:4px;background:transparent;color:var(--text-secondary);transition:all .2s}.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary)}.upload-progress{display:flex;align-items:center;gap:12px;min-width:200px}.progress-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--primary);transition:width .3s ease}.progress-text{font-size:12px;color:var(--text-secondary);min-width:40px;text-align:right}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600}.status-badge.success{background:#4caf5020;color:#4caf50}.status-badge.error{background:#f4433620;color:#f44336}.btn-primary{padding:8px 20px;background:var(--primary);color:var(--bg-dark);border-radius:6px;font-weight:600;transition:all .2s}.btn-primary:hover{background:var(--primary-hover);transform:scale(1.05)}.metadata-modal{max-width:500px;width:90%}.metadata-modal .form-group{margin-bottom:16px}.metadata-modal label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}.metadata-modal input,.metadata-modal select,.metadata-modal textarea{width:100%;padding:10px;background:var(--bg-hover);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:inherit}.metadata-modal input:focus,.metadata-modal select:focus,.metadata-modal textarea:focus{outline:none;border-color:var(--primary)}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.form-actions button{padding:8px 20px;border-radius:6px;font-weight:600;transition:all .2s}.form-actions button:first-child{background:transparent;border:1px solid var(--border);color:var(--text-primary)}.form-actions button:first-child:hover{background:var(--bg-hover)}.app{min-height:100vh;padding-bottom:100px}@media (max-width: 768px){.app{padding-bottom:140px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#0a0a0a;color:#fff;line-height:1.6}:root{--primary: #1db954;--primary-hover: #1ed760;--bg-dark: #0a0a0a;--bg-card: #181818;--bg-hover: #282828;--text-primary: #ffffff;--text-secondary: #b3b3b3;--border: #282828}button{cursor:pointer;border:none;background:none;font-family:inherit}a{text-decoration:none;color:inherit}