:root {
    --bg: #0c0c0f; --bg2: #13131a; --bg3: #1c1c26;
    --text: #eeeef2; --muted: #7b7b8f; --accent: #8b82f6;
    --border: #ffffff0f; --green: #22c97a;
    --sidebar-w: 240px; --queue-w: 280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    background: var(--bg); color: var(--text); 
    font-family: 'DM Sans', sans-serif; overflow: hidden; height: 100vh; 
}

/* LAYOUT */
.app {
    display: grid;
    grid-template-areas: "top top top" "side main q" "play play play";
    grid-template-columns: var(--sidebar-w) 1fr var(--queue-w);
    grid-template-rows: 60px 1fr 90px;
    height: 100vh;
}

.hidden { display: none !important; }

/* SCREENS */
.screen {
    position: fixed; inset: 0; z-index: 100;
    background: var(--bg); display: flex; align-items: center; justify-content: center;
}

.auth-card, .lobby-card {
    background: var(--bg2); padding: 30px; border-radius: 16px;
    width: 100%; max-width: 400px; border: 1px solid var(--border);
}

/* TOPBAR */
.topbar { grid-area: top; background: var(--bg2); display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--border); justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: bold; }
.logo-mark { background: var(--accent); padding: 5px; border-radius: 6px; }

/* MAIN CONTENT */
.main { grid-area: main; overflow-y: auto; background: var(--bg); }
.search-bar { padding: 20px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
.search-row { display: flex; gap: 10px; }
.search-input { flex: 1; background: var(--bg3); border: 1px solid var(--border); padding: 10px; border-radius: 8px; color: #fff; }
.search-btn { background: var(--accent); border: none; padding: 0 20px; border-radius: 8px; color: #fff; font-weight: 500; cursor: pointer; }

/* TRACK ITEMS */
.track-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; cursor: pointer; border-bottom: 1px solid var(--border); }
.track-item:hover { background: var(--bg2); }
.track-thumb { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
.track-info { flex: 1; }
.track-title { font-size: 14px; font-weight: 500; }
.track-artist { font-size: 12px; color: var(--muted); }

/* PLAYER */
.player { grid-area: play; background: var(--bg2); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 30px; }
.now-playing { width: var(--sidebar-w); display: flex; align-items: center; gap: 12px; }
.np-art { width: 50px; height: 50px; border-radius: 8px; background: var(--bg3); flex-shrink: 0; }
.controls-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ctrl-btns { display: flex; align-items: center; gap: 20px; }
.play-btn { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.progress-wrap { width: 100%; display: flex; align-items: center; gap: 10px; }
.progress-bar { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; position: relative; cursor: pointer; }
.progress-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); width: 0%; }
.time { font-family: 'DM Mono'; font-size: 11px; color: var(--muted); width: 35px; }

/* MOBILE RESPONSIVE */
@media (max-width: 900px) {
    .app {
        grid-template-areas: "top" "main" "play";
        grid-template-columns: 1fr;
        grid-template-rows: 60px 1fr 100px;
    }
    .sidebar, .queue-panel, .desktop-only { display: none; }
    .now-playing { width: auto; flex: 1; }
}

@media (max-width: 600px) {
    .player { flex-direction: column; height: 120px; justify-content: center; gap: 5px; }
    .app { grid-template-rows: 60px 1fr 120px; }
    .now-playing { width: 100%; }
}

/* TOAST */
.toast {
    position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: white; padding: 8px 16px; border-radius: 20px;
    font-size: 13px; font-weight: 500; opacity: 0; transition: 0.3s; pointer-events: none;
}
.toast.show { opacity: 1; bottom: 130px; }