*{box-sizing:border-box}body{margin:0;background:#0a0a0a;color:#fff;font-family:Arial,sans-serif}a{text-decoration:none;color:#9fdcff}img{max-width:100%}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:#111;border-bottom:1px solid #1f1f1f;position:sticky;top:0;z-index:30}.topbar nav{display:flex;gap:14px;flex-wrap:wrap}
.brand{font-size:28px;font-weight:700;background:linear-gradient(90deg,#00d1ff,#7b2cff);-webkit-background-clip:text;color:transparent}.brand span{font-size:14px;color:#aaa;background:none;-webkit-text-fill-color:#aaa}
.layout{display:grid;grid-template-columns:300px 1fr;gap:20px;padding:20px;max-width:1400px;margin:0 auto 120px}.hero{grid-column:1/-1}.card{background:#111;border:1px solid #1c1c1c;border-radius:22px;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.sidebar ul,.playlist-grid{list-style:none;padding:0;margin:12px 0 0}.sidebar li,.playlist-grid li{padding:10px 12px;border-radius:14px;background:#181818;margin-bottom:8px}
.section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}.section-title input,.auth-card input,#playlist-form input,.admin-row input,.card input{width:100%;padding:12px 14px;border-radius:14px;border:1px solid #262626;background:#0e0e0e;color:#fff}
.track{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid #1c1c1c;gap:12px}.track-main{display:flex;align-items:center;gap:14px;cursor:pointer;min-width:0}.track-main img{width:64px;height:64px;object-fit:cover;border-radius:14px;background:#202020}.track-main span{display:block;color:#aaa;margin-top:6px}.track-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.icon-btn,.btn-primary,.btn-secondary,.btn-danger{border:0;border-radius:14px;padding:10px 14px;cursor:pointer;color:#fff}.icon-btn,.btn-secondary{background:#1a1a1a}.btn-primary{background:linear-gradient(90deg,#00d1ff,#7b2cff)}.btn-danger{background:#6e1f1f}
.player-bar{position:fixed;left:0;right:0;bottom:0;background:#101010;border-top:1px solid #1e1e1e;padding:12px 18px;display:grid;grid-template-columns:1fr 1fr 260px;align-items:center;gap:16px;z-index:40}.now-playing{display:flex;align-items:center;gap:12px;min-width:0}.cover-mini{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#00d1ff,#7b2cff);object-fit:cover}.player-controls{display:grid;gap:10px}.control-row{display:flex;gap:10px;justify-content:center}#progress{width:100%}.player-right{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.queue-panel{position:fixed;right:16px;bottom:90px;width:320px;max-height:50vh;overflow:auto;background:#111;border:1px solid #262626;border-radius:20px;padding:14px;display:none;z-index:41}.queue-panel.open{display:block}.queue-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.queue-item{display:flex;flex-direction:column;width:100%;text-align:left;background:#181818;border:1px solid #232323;color:#fff;border-radius:14px;padding:12px;margin-bottom:8px;cursor:pointer}.queue-item.active{outline:1px solid #00d1ff}
.auth-page{display:grid;place-items:center;min-height:100vh}.auth-card{width:min(420px,92vw)}.alert{background:#251818;color:#ffc7c7;padding:12px 14px;border-radius:12px;margin-bottom:12px}.container{max-width:1100px;margin:40px auto;padding:0 16px}.page-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.admin-list{display:grid;gap:14px}.admin-row{display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1fr auto auto auto;gap:10px;align-items:center;padding:12px;border:1px solid #202020;border-radius:16px;background:#151515}.toggle-wrap{display:flex;align-items:center;gap:8px;white-space:nowrap}
.mobile-queue-toggle{display:none}
@media (max-width:1100px){.admin-row{grid-template-columns:1fr 1fr}.player-bar{grid-template-columns:1fr;gap:10px}.player-right{justify-content:flex-start}}
@media (max-width:900px){.layout{grid-template-columns:1fr;padding-bottom:120px}.queue-panel{left:12px;right:12px;width:auto;bottom:84px}.mobile-queue-toggle{display:inline-block}.track{flex-direction:column;align-items:flex-start}.track-actions{width:100%;justify-content:space-between}}