:root{--bg:#000;--surface:#121212;--surface-2:#181818;--surface-3:#282828;--text:#fff;--muted:#b3b3b3;--accent:#8eb4ff;--accent-strong:#6c9eff;--on-accent:#061024;--border:#ffffff1a;--danger:#f15e6c;--font:"Manrope", system-ui, sans-serif;--display:"Instrument Serif", Georgia, serif;--sidebar:280px;--player:90px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font);color:var(--text);background:#000;line-height:1.45;overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}img{max-width:100%;display:block}.app-shell{grid-template-columns:var(--sidebar) 1fr;grid-template-rows:1fr var(--player);background:#000;gap:.5rem;height:100vh;padding:.5rem;display:grid}.sidebar{background:var(--surface);border-radius:12px;flex-direction:column;grid-row:1/2;gap:.75rem;padding:1rem .75rem;display:flex;overflow:auto}.brand{letter-spacing:-.02em;align-items:center;gap:.65rem;padding:.55rem .7rem .85rem;font-weight:700;display:flex}.brand img{border-radius:8px;width:32px;height:32px}.nav-block{background:var(--surface);border-radius:10px;flex-direction:column;gap:.15rem;display:flex}.nav-item{color:var(--muted);border-radius:8px;align-items:center;gap:.85rem;padding:.75rem .85rem;font-size:.95rem;font-weight:700;display:flex}.nav-item:hover,.nav-item.active{color:var(--text)}.nav-ico{text-align:center;opacity:.9;width:1.25rem}.lib-panel{background:var(--surface);border-radius:10px;flex:1;min-height:0;padding:.35rem;overflow:auto}.lib-panel__head{color:var(--muted);padding:.7rem .85rem;font-size:.95rem;font-weight:700}.main{background:linear-gradient(180deg, #1c2330 0%, var(--surface) 28%, var(--surface) 100%);border-radius:12px;grid-row:1/2;padding:1.25rem 1.5rem 1.5rem;overflow:auto}.player-bar{background:#000;grid-column:1/-1;grid-template-columns:1.15fr 1.5fr 1fr;align-items:center;gap:1rem;padding:.55rem .75rem .35rem;display:grid}.page-title{font-family:var(--display);letter-spacing:-.03em;margin-bottom:1.1rem;font-size:clamp(2rem,4vw,3.4rem);font-weight:400}.section-title{letter-spacing:-.02em;margin:1.5rem 0 .9rem;font-size:1.35rem;font-weight:800}.card-row{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1rem;display:grid}.playlist-card{background:var(--surface-2);border-radius:10px;padding:.9rem;transition:background .15s,transform .15s}.playlist-card:hover{background:var(--surface-3);transform:translateY(-2px)}.playlist-card__cover{aspect-ratio:1;background:#2a2a2a;border-radius:8px;margin-bottom:.85rem;position:relative;overflow:hidden;box-shadow:0 8px 24px #00000073}.playlist-card__cover img{object-fit:cover;width:100%;height:100%}.playlist-card__play{background:var(--accent);width:44px;height:44px;color:var(--on-accent);opacity:0;border-radius:999px;place-items:center;font-size:1rem;transition:all .15s;display:grid;position:absolute;bottom:.55rem;right:.55rem;transform:translateY(6px);box-shadow:0 8px 20px #00000059}.playlist-card:hover .playlist-card__play{opacity:1;transform:translateY(0)}.playlist-card__name{white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:700;overflow:hidden}.playlist-card__meta{color:var(--muted);margin-top:.2rem;font-size:.8rem}.track-table-head,.track-row{grid-template-columns:40px minmax(0,3fr) minmax(0,2fr) 80px 90px;align-items:center;gap:.75rem;padding:.45rem .75rem;display:grid}.track-table-head{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--border);margin-bottom:.35rem;font-size:.75rem;font-weight:650}.track-list{flex-direction:column;display:flex}.track-row{border-radius:6px}.track-row:hover,.track-row.active{background:#ffffff14}.track-row__idx{color:var(--muted);text-align:center;font-size:.9rem}.track-row__cover{background:#2a2a2a;border-radius:4px;flex-shrink:0;width:40px;height:40px;overflow:hidden}.track-row__cover img{object-fit:cover;width:100%;height:100%}.track-row__meta{align-items:center;gap:.75rem;min-width:0;display:flex}.track-row__title{white-space:nowrap;text-overflow:ellipsis;font-weight:650;overflow:hidden}.track-row__artist,.track-row__album,.track-row__dur{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.88rem;overflow:hidden}.btn{border-radius:999px;justify-content:center;align-items:center;gap:.4rem;padding:.65rem 1.25rem;font-size:.9rem;font-weight:700;display:inline-flex}.btn--primary{background:var(--accent);color:var(--on-accent)}.btn--primary:hover{background:var(--accent-strong);transform:scale(1.02)}.btn--ghost{border:1px solid var(--border);color:var(--text)}.btn--ghost:hover{background:#ffffff0f}.btn--block{width:100%}.btn--icon{width:40px;height:40px;color:var(--text);border-radius:999px;place-items:center;display:grid}.btn--play{background:var(--accent);width:48px;height:48px;color:var(--on-accent);border-radius:999px;place-items:center;font-size:1.05rem;display:grid}.btn--play:hover{transform:scale(1.06)}.auth-page{background:radial-gradient(60% 45% at 50% 0,#8eb4ff29,#0000 60%),#000;place-items:center;min-height:100vh;padding:1.5rem;display:grid;overflow:auto}.auth-back{font-weight:650;position:absolute;top:1.2rem;left:1.2rem}.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:min(420px,100%);padding:2rem 1.6rem}.auth-card h1{font-family:var(--display);margin:.6rem 0 .3rem;font-size:2rem;font-weight:400}.auth-card p{color:var(--muted);margin-bottom:1.4rem}.field{flex-direction:column;gap:.35rem;margin-bottom:.9rem;display:flex}.field label{color:var(--muted);font-size:.85rem;font-weight:600}.field input{border:1px solid var(--border);background:#000;border-radius:8px;outline:none;padding:.8rem .9rem}.field input:focus{border-color:var(--accent)}.error{color:var(--danger);margin-bottom:.8rem;font-size:.9rem}.search-hero{margin-bottom:1.2rem}.search-box{color:#111;background:#fff;border-radius:999px;align-items:center;gap:.75rem;max-width:420px;padding:.75rem 1.1rem;display:flex}.search-box input{color:#111;background:0 0;border:none;outline:none;flex:1;font-weight:600}.search-box input::placeholder{color:#666}.muted{color:var(--muted)}.pill{color:var(--accent);background:#8eb4ff24;border-radius:999px;padding:.2rem .55rem;font-size:.75rem;font-weight:650}.player-now{align-items:center;gap:.85rem;min-width:0;display:flex}.player-now img{object-fit:cover;background:#2a2a2a;border-radius:4px;width:56px;height:56px}.player-now__text{min-width:0}.player-now__text strong,.player-now__text span{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.player-now__text span{color:var(--muted);font-size:.85rem}.player-controls{flex-direction:column;align-items:center;gap:.35rem;display:flex}.player-controls__btns{align-items:center;gap:.55rem;display:flex}.player-seek{width:min(520px,100%);color:var(--muted);align-items:center;gap:.55rem;font-size:.72rem;display:flex}.player-seek input[type=range]{accent-color:var(--accent);flex:1}.hero-playlist{background:linear-gradient(#8eb4ff59,#0000 85%);grid-template-columns:232px 1fr;align-items:end;gap:1.5rem;margin:-1.25rem -1.5rem 1.5rem;padding:2.2rem 1.5rem 1.4rem;display:grid}.hero-playlist img{object-fit:cover;background:#2a2a2a;border-radius:6px;width:232px;height:232px;box-shadow:0 18px 50px #0000008c}.sidebar-foot{border-top:1px solid var(--border);flex-direction:column;gap:.5rem;margin-top:auto;padding:.7rem .55rem .35rem;display:flex}.sidebar-foot .email{color:var(--muted);text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.greeting{letter-spacing:-.02em;margin-bottom:1rem;font-size:1.75rem;font-weight:800}.search-result{border-radius:8px;grid-template-columns:56px 1fr auto auto;align-items:center;gap:.9rem;padding:.55rem .65rem;display:grid}.search-result:hover{background:#ffffff14}.search-result img{object-fit:cover;background:#2a2a2a;border-radius:4px;width:56px;height:56px}@media (width<=900px){.app-shell{grid-template-columns:1fr;grid-template-rows:1fr auto var(--player);gap:0;padding:0}.sidebar{border-radius:0;flex-direction:row;grid-row:2;align-items:center;padding:.45rem;overflow-x:auto}.brand,.sidebar-foot,.lib-panel__head{display:none}.lib-panel{display:contents}.nav-block{flex-direction:row}.main{border-radius:0}.player-bar{grid-template-columns:1fr auto}.player-extra{display:none}.hero-playlist{grid-template-columns:1fr;margin:-1.25rem -1rem 1rem;padding:1.2rem 1rem}.hero-playlist img{width:160px;height:160px}.track-table-head,.track-row{grid-template-columns:32px minmax(0,1fr) auto}.track-row__album,.track-row__dur,.track-table-head span:nth-child(3),.track-table-head span:nth-child(4){display:none}}