:root{--bg:#0f0f0f;--bg-card:#1a1a1a;--bg-hover:#252525;--text:#e8e8e8;--text-dim:#888;--accent:#6c5ce7;--accent-hover:#7c6cf7;--danger:#e74c3c;--success:#2ecc71;--border:#333;--radius:8px;--player-height:90px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.login-page{justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{background:var(--bg-card);text-align:center;border-radius:12px;width:100%;max-width:380px;padding:2.5rem}.login-card h1{margin-bottom:.25rem;font-size:2rem}.subtitle{color:var(--text-dim);margin-bottom:1.5rem}.login-card form{flex-direction:column;gap:.75rem;display:flex}.login-error{color:var(--danger);margin-top:.75rem;font-size:.875rem}input[type=text],input[type=password],select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);outline:none;padding:.625rem .75rem;font-size:.9rem;transition:border-color .2s}input:focus,select:focus{border-color:var(--accent)}.btn{border-radius:var(--radius);cursor:pointer;border:none;padding:.625rem 1.25rem;font-size:.9rem;transition:background .2s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-danger{background:var(--danger);color:#fff}.btn-back{background:var(--bg-hover);color:var(--text);margin-bottom:1rem}.btn-logout{color:var(--text-dim);border:1px solid var(--border);background:0 0;padding:.375rem .75rem;font-size:.8rem}.btn-icon{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;padding:.5rem;font-size:1.25rem;transition:background .2s}.btn-icon:hover{background:var(--bg-hover)}.btn-play{font-size:1.5rem}.app{flex-direction:column;min-height:100vh;display:flex}.navbar{background:var(--bg-card);border-bottom:1px solid var(--border);z-index:10;align-items:center;height:56px;padding:0 1.5rem;display:flex;position:sticky;top:0}.nav-brand{margin-right:2rem;font-size:1.25rem;font-weight:700}.nav-links{flex:1;gap:.25rem;display:flex}.nav-link{color:var(--text-dim);cursor:pointer;border-radius:var(--radius);background:0 0;border:none;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.nav-link:hover{color:var(--text);background:var(--bg-hover)}.nav-link.active{color:var(--accent);background:#6c5ce71a}.nav-user{align-items:center;gap:.75rem;font-size:.875rem;display:flex}.role-badge{background:var(--accent);color:#fff;text-transform:uppercase;border-radius:12px;padding:.15rem .5rem;font-size:.7rem}.content{padding:1.5rem;padding-bottom:calc(var(--player-height) + 1.5rem);flex:1;width:100%;max-width:1200px;margin:0 auto}.loading,.loading-screen{min-height:200px;color:var(--text-dim);flex-direction:column;justify-content:center;align-items:center;display:flex}.loading-screen{min-height:100vh}.empty-state{color:var(--text-dim);text-align:center;padding:3rem}.library-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.5rem;display:flex}.library-controls{align-items:center;gap:.5rem;display:flex}.search-input{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);outline:none;width:200px;padding:.5rem .75rem;font-size:.9rem;transition:border-color .2s}.search-input:focus{border-color:var(--accent)}.sort-select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;outline:none;padding:.5rem .75rem;font-size:.85rem}.sort-select:focus{border-color:var(--accent)}.search-results-section{margin-bottom:1.5rem}.search-results-section h3{color:var(--text-dim);text-transform:uppercase;margin-bottom:.5rem;font-size:.85rem}.album-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.25rem;margin-top:1rem;display:grid}.album-card{background:var(--bg-card);border-radius:var(--radius);cursor:pointer;padding:.75rem;transition:background .2s}.album-card:hover{background:var(--bg-hover)}.album-cover,.album-cover-placeholder{aspect-ratio:1;object-fit:cover;border-radius:4px;width:100%}.album-cover-placeholder{background:var(--bg-hover);justify-content:center;align-items:center;font-size:3rem;display:flex}.album-name{text-overflow:ellipsis;white-space:nowrap;margin-top:.5rem;font-size:.9rem;font-weight:600;overflow:hidden}.album-artist{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;overflow:hidden}.album-header{align-items:flex-end;gap:1.5rem;margin-bottom:1.5rem;display:flex}.album-cover-large{border-radius:var(--radius);object-fit:cover;width:200px;height:200px}.song-list{margin-top:1rem}.song-item{border-radius:var(--radius);cursor:pointer;align-items:center;gap:1rem;padding:.625rem .75rem;transition:background .2s;display:flex}.song-item:hover{background:var(--bg-hover)}.song-track{color:var(--text-dim);text-align:right;width:2rem;font-size:.85rem}.song-title{flex:1}.song-artist{color:var(--text-dim);flex:.5}.song-duration{color:var(--text-dim);font-size:.85rem}.playlist-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1rem;display:grid}.playlist-card{background:var(--bg-card);border-radius:var(--radius);cursor:pointer;padding:1rem;transition:background .2s}.playlist-card:hover{background:var(--bg-hover)}.playlist-cover{aspect-ratio:1;object-fit:cover;border-radius:4px;width:100%}.playlist-cover-placeholder{aspect-ratio:1;background:var(--bg-hover);border-radius:4px;justify-content:center;align-items:center;width:100%;font-size:3rem;display:flex}.playlist-name{margin-top:.5rem;font-weight:600}.playlist-count{color:var(--text-dim);font-size:.8rem}.playlist-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.create-playlist{gap:.5rem;margin-bottom:1.5rem;display:flex}.create-playlist input{flex:1}.upload-section{max-width:700px}.drop-zone{border:2px dashed var(--border);text-align:center;cursor:pointer;border-radius:12px;margin-top:1rem;padding:3rem 2rem;transition:all .2s}.drop-zone:hover{border-color:var(--accent);background:#6c5ce70d}.drop-zone-active{border-color:var(--accent);background:#6c5ce71a;transform:scale(1.01)}.drop-icon{margin-bottom:.75rem;font-size:3rem}.drop-text{margin-bottom:.25rem;font-size:1.1rem}.drop-hint{color:var(--text-dim);font-size:.8rem}.upload-list{margin-top:1.5rem}.upload-summary{color:var(--text-dim);margin-bottom:.75rem;font-size:.85rem}.upload-item{border-bottom:1px solid var(--border);align-items:center;gap:1rem;padding:.5rem 0;display:flex}.upload-name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.9rem;overflow:hidden}.upload-bar{background:var(--border);border-radius:2px;width:120px;height:4px;overflow:hidden}.upload-bar-fill{background:var(--accent);height:100%;transition:width .3s}.upload-status-done{color:var(--success);font-size:.85rem;font-weight:600}.upload-status-error{color:var(--danger);font-size:.8rem}.add-role-form{gap:.5rem;margin-bottom:1.5rem;display:flex}.roles-table{border-collapse:collapse;width:100%}.roles-table th,.roles-table td{text-align:left;border-bottom:1px solid var(--border);padding:.75rem}.roles-table th{color:var(--text-dim);text-transform:uppercase;font-size:.85rem;font-weight:600}.player{height:var(--player-height);background:var(--bg-card);border-top:1px solid var(--border);z-index:20;align-items:center;gap:1.5rem;padding:0 1.5rem;display:flex;position:fixed;bottom:0;left:0;right:0}.player-info{align-items:center;gap:.75rem;width:250px;min-width:150px;display:flex}.player-cover{object-fit:cover;border-radius:4px;width:56px;height:56px}.player-text{overflow:hidden}.player-title{text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:600;overflow:hidden}.player-artist{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;overflow:hidden}.player-controls{align-items:center;gap:.25rem;display:flex}.player-progress{flex:1;align-items:center;gap:.5rem;display:flex}.player-progress .time{color:var(--text-dim);text-align:center;width:3rem;font-size:.75rem}.progress-bar,.volume-bar{appearance:none;background:var(--border);cursor:pointer;border-radius:2px;outline:none;height:4px}.progress-bar{flex:1}.volume-bar{width:100px}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:12px;height:12px}.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:12px;height:12px}.player-volume{align-items:center;gap:.5rem;display:flex}.bottom-nav{display:none}@media (width<=768px){.navbar{height:auto;padding:.5rem 1rem;display:flex}.nav-links,.nav-user{display:none}.nav-brand{margin-right:0;font-size:1.1rem}.bottom-nav{background:var(--bg-card);border-top:1px solid var(--border);z-index:30;padding:.25rem 0;padding-bottom:max(.25rem, env(safe-area-inset-bottom));display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-item{color:var(--text-dim);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:.15rem;min-height:52px;padding:.5rem .25rem;font-size:.65rem;transition:color .2s;display:flex}.bottom-nav-item.active{color:var(--accent)}.bottom-nav-icon{font-size:1.25rem;line-height:1}.bottom-nav-label{line-height:1}.content{padding:1rem;padding-bottom:calc(var(--player-height) + 70px)}.library-toolbar{flex-direction:column;align-items:stretch}.library-controls{flex-direction:column}.search-input,.sort-select{width:100%;min-height:44px}.album-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.album-header{flex-direction:column;align-items:flex-start;gap:1rem}.album-cover-large{width:150px;height:150px}.song-item{gap:.75rem;min-height:48px;padding:.75rem}.song-artist{display:none}.player{flex-wrap:wrap;gap:.4rem;height:auto;padding:.5rem .75rem;bottom:52px}.player-info{flex:1;width:auto;min-width:0}.player-cover{width:40px;height:40px}.player-title{font-size:.8rem}.player-artist{font-size:.7rem}.player-controls{gap:0}.btn-icon{padding:.4rem;font-size:1.1rem}.btn-play{font-size:1.3rem}.player-progress{order:10;width:100%}.player-volume{display:none}.playlist-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.create-playlist{flex-direction:column}.drop-zone{padding:2rem 1rem}.drop-icon{font-size:2rem}.add-role-form{flex-direction:column}.roles-table thead{display:none}.roles-table,.roles-table tbody,.roles-table tr,.roles-table td{width:100%;display:block}.roles-table tr{background:var(--bg-card);border-radius:var(--radius);border-bottom:none;margin-bottom:.75rem;padding:.75rem}.roles-table td{border-bottom:none;padding:.25rem 0}.roles-table td:before{color:var(--text-dim);text-transform:uppercase;margin-bottom:.15rem;font-size:.7rem;display:block}.roles-table td:first-child:before{content:"Benutzername"}.roles-table td:nth-child(2):before{content:"Rolle"}.roles-table td:nth-child(3):before{content:"Erstellt am"}.btn{min-height:44px;padding:.625rem 1rem}.btn-back{min-height:40px}.login-card{margin:1rem;padding:2rem 1.5rem}h2{font-size:1.25rem}}@media (width<=380px){.album-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}.album-card{padding:.5rem}.playlist-list{grid-template-columns:1fr 1fr}.bottom-nav-label{font-size:.6rem}.login-card h1{font-size:1.5rem}}.error{color:var(--danger);margin-bottom:1rem}