@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap";:root{--bg-void: #0b0a10;--bg-surface: #16151e;--bg-raised: #1c1a24;--bg-hover: #262432;--line: rgba(255, 255, 255, .08);--text-primary: #ffffff;--text-secondary: #9999a8;--text-faint: #6f707e;--accent: #d4f34a;--accent-hover: #c1e237;--accent-ink: #10100a;--amber: #f0a83c;--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background-color:var(--bg-void);background-image:radial-gradient(circle at 12% 0%,rgba(160,70,200,.16) 0%,transparent 45%),radial-gradient(circle at 88% 10%,rgba(110,60,210,.12) 0%,transparent 40%),radial-gradient(circle at 50% 100%,rgba(60,30,90,.2) 0%,transparent 55%);background-attachment:fixed;color:var(--text-primary);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}::selection{background:var(--accent);color:var(--accent-ink)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--bg-raised);border-radius:8px}::-webkit-scrollbar-track{background:transparent}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input{font-family:inherit;font-size:16px;color:var(--text-primary);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-sm)}a{color:inherit;text-decoration:none}.mono{font-family:Space Mono,monospace}.glass{background:#1c1a24b8;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08)}.app-shell{display:grid;grid-template-columns:240px 1fr;grid-template-rows:1fr 92px;height:100vh;height:100dvh}.mobile-nav,.mobile-play-toggle{display:none}.sidebar{grid-row:1 / 2;background:#0000002e;border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:22px;overflow-y:auto}.brand{display:flex;align-items:baseline;gap:8px;padding:0 8px}.brand-mark{width:10px;height:10px;background:var(--accent);border-radius:2px;display:inline-block;transform:rotate(45deg)}.brand-name{font-weight:800;font-size:18px;letter-spacing:-.02em}.nav-list{display:flex;flex-direction:column;gap:2px}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;color:var(--text-secondary);font-weight:600;font-size:14px;text-align:left;width:100%}.nav-item:hover{background:var(--bg-raised);color:var(--text-primary)}.nav-item.active{background:var(--accent);color:var(--accent-ink)}.sidebar-section-label{font-size:11px;color:var(--text-faint);padding:0 12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.playlist-list{display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1}.playlist-item{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:999px;color:var(--text-secondary);font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-item:hover,.playlist-item.active{background:var(--bg-raised);color:var(--text-primary)}.create-playlist-btn{display:flex;align-items:center;gap:8px;padding:9px 12px;color:var(--text-secondary);font-size:13.5px;font-weight:600;border-radius:999px}.create-playlist-btn:hover{background:var(--bg-raised);color:var(--text-primary)}.main-pane{grid-row:1 / 2;overflow-y:auto}.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:#0b0a1099}.search-field{display:flex;align-items:center;gap:10px;background:#ffffff0f;border:1px solid var(--line);border-radius:999px;padding:10px 18px;width:min(440px,60vw)}.search-field input{border:none;background:none;width:100%;font-size:16px;padding:0}.search-field input:focus-visible{outline:none}.search-field svg{flex-shrink:0;color:var(--text-faint)}.user-chip{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary)}.user-avatar-ring{position:relative;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#c83cb4,#7c3ce0);padding:2px;flex-shrink:0}.user-avatar{width:100%;height:100%;border-radius:50%;background:var(--bg-raised);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--text-primary)}.logout-btn{color:var(--text-faint);font-size:12px;font-weight:600}.logout-btn:hover{color:var(--text-primary)}.page{padding:8px 28px 40px}.page-title{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:8px 0 4px}.page-subtitle{color:var(--text-secondary);font-size:14px;margin-bottom:22px}.page-header{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px}.page-header-title{font-size:17px;font-weight:800;letter-spacing:-.01em}.page-header-btn{width:40px;height:40px;border-radius:50%;background:var(--bg-raised);display:flex;align-items:center;justify-content:center;color:var(--text-primary);flex-shrink:0}.page-header-btn:hover{background:var(--bg-hover)}.page-header-spacer{width:40px;height:40px;flex-shrink:0}.playlist-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 4px;border-radius:var(--radius-md)}.playlist-row:hover{background:#ffffff0d}.playlist-row-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1}.playlist-row-art{width:54px;height:54px;border-radius:var(--radius-md);object-fit:cover;background:linear-gradient(135deg,#cca8fd,#6e3ce0);box-shadow:inset 0 0 0 1px #ffffff1a;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px}.playlist-row-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-row-sub{font-size:12px;color:var(--text-secondary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-row-dot{color:var(--text-faint);font-weight:700;margin:0 5px}.home-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.home-header-actions{display:flex;align-items:center;gap:10px}.home-icon-btn{width:40px;height:40px;border-radius:50%;background:#ffffff0f;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.home-icon-btn:hover{color:var(--text-primary);background:#ffffff1a}.home-greeting{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:4px 0 24px}.home-section{margin-bottom:28px}.home-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.home-section-title h2{font-size:16px;font-weight:700}.home-see-all{font-size:12px;color:var(--text-faint);font-weight:600}.home-see-all:hover{color:var(--text-primary)}.hero-card{position:relative;border-radius:var(--radius-lg);background:linear-gradient(135deg,#cca8fd,#9b6ee8);padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:#201335}.hero-card-title{font-size:19px;font-weight:800;margin-bottom:4px}.hero-card-sub{font-size:12.5px;font-weight:600;opacity:.8;max-width:75%}.hero-play-btn{width:42px;height:42px;border-radius:50%;background:#201335;color:#fff;display:flex;align-items:center;justify-content:center;margin-top:16px}.hero-play-btn:disabled{opacity:.45}.track-list{display:flex;flex-direction:column;gap:2px}.track-row{display:flex;align-items:center;gap:14px;padding:6px 4px;border-radius:var(--radius-md)}.track-row:hover{background:#ffffff0d}.track-row.is-playing .track-title{color:var(--accent)}.track-thumb{width:54px;height:54px;border-radius:var(--radius-md);object-fit:cover;background:var(--bg-raised);box-shadow:inset 0 0 0 1px #ffffff1a;flex-shrink:0}.track-meta{min-width:0;flex:1}.track-title{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.track-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;position:relative}.icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-secondary);flex-shrink:0}.icon-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.icon-btn.liked{color:var(--accent)}.play-btn-inline{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-raised);color:var(--text-secondary);flex-shrink:0}.play-btn-inline:hover{background:var(--accent);color:var(--accent-ink)}.empty-state{border:1px dashed var(--line);border-radius:var(--radius-lg);padding:40px 20px;text-align:center;color:var(--text-secondary);margin-top:20px}.empty-state-title{color:var(--text-primary);font-weight:700;margin-bottom:6px}.section-tabs{display:flex;gap:8px;margin-bottom:18px}.section-tab{padding:9px 18px;border-radius:999px;font-size:13px;font-weight:700;background:var(--bg-raised);color:var(--text-secondary);border:1px solid var(--line)}.section-tab.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}.player-bar{grid-column:1 / 3;grid-row:2 / 3;margin:0 16px 12px;border-radius:var(--radius-lg);display:grid;grid-template-columns:1fr minmax(320px,2fr) 1fr;align-items:center;padding:0 20px;gap:18px;cursor:pointer;box-shadow:0 16px 36px #0006}.now-playing{display:flex;align-items:center;gap:12px;min-width:0}.now-playing img{width:52px;height:52px;border-radius:12px;object-fit:cover}.now-playing-meta{min-width:0}.now-playing-title{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-artist{font-size:12px;color:var(--text-secondary)}.player-center{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}.player-controls{display:flex;align-items:center;gap:18px}.play-toggle{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}.play-toggle:hover{background:var(--accent-hover)}.play-toggle:disabled{opacity:.4}.control-btn{color:var(--text-secondary)}.control-btn:hover{color:var(--text-primary)}.progress-row{display:flex;align-items:center;gap:8px;width:100%}.progress-time{font-size:11px;color:var(--text-faint);width:34px;text-align:center}.progress-track{flex:1;height:4px;border-radius:2px;background:#ffffff1f;position:relative;cursor:pointer}.progress-fill{position:absolute;top:0;left:0;height:100%;border-radius:2px;background:var(--accent)}.player-right{display:flex;align-items:center;justify-content:flex-end;gap:10px}.volume-track{width:90px;height:4px;border-radius:2px;background:#ffffff1f;position:relative;cursor:pointer}.volume-fill{position:absolute;top:0;left:0;height:100%;border-radius:2px;background:var(--text-secondary)}.now-playing-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:var(--bg-void);display:flex;flex-direction:column;padding:max(16px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom))}.now-playing-overlay:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 20%,rgba(200,120,90,.16) 0%,rgba(130,70,180,.12) 45%,transparent 70%),radial-gradient(circle at 50% 95%,rgba(90,40,120,.22) 0%,transparent 60%);pointer-events:none}.np-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.np-icon-btn{width:40px;height:40px;border-radius:50%;background:#ffffff14;display:flex;align-items:center;justify-content:center;color:var(--text-primary)}.np-icon-btn:hover{background:#ffffff24}.np-icon-btn.liked{color:var(--accent)}.np-title{font-size:13px;font-weight:600;color:var(--text-secondary);letter-spacing:.02em}.np-art-wrap{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}.np-art{width:min(64vw,280px);height:min(64vw,280px);border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.15);box-shadow:0 20px 45px -10px #000c,0 0 60px 5px #d28c5a26}.np-art img{width:100%;height:100%;object-fit:cover}.np-meta{position:relative;z-index:1;text-align:center;margin:8px 0 4px;flex-shrink:0}.np-track-title{font-size:22px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}.np-track-artist{font-size:14px;color:var(--text-secondary);font-weight:500}.np-progress{position:relative;z-index:1;flex-shrink:0;margin-top:12px}.np-controls{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:28px;margin-top:8px;flex-shrink:0}.np-control-btn{color:var(--text-secondary)}.np-control-btn:hover{color:var(--text-primary)}.np-play-toggle{width:68px;height:68px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px #d4f34a61}.np-play-toggle:hover{background:var(--accent-hover)}.np-play-toggle:disabled{opacity:.4}.auth-screen{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}.auth-card{width:100%;max-width:380px;background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px}.auth-title{font-size:22px;font-weight:800;margin-bottom:4px;letter-spacing:-.02em}.auth-subtitle{color:var(--text-secondary);font-size:13.5px;margin-bottom:24px}.field-label{font-size:12.5px;color:var(--text-secondary);font-weight:600;margin-bottom:6px;display:block}.field-group{margin-bottom:16px}.field-group input{width:100%;padding:10px 12px;font-size:16px}.auth-submit{width:100%;padding:12px;background:var(--accent);color:var(--accent-ink);font-weight:700;border-radius:999px;font-size:14px}.auth-submit:hover{background:var(--accent-hover)}.auth-submit:disabled{opacity:.6;cursor:default}.auth-switch{margin-top:18px;font-size:13px;color:var(--text-secondary);text-align:center}.auth-switch button{color:var(--accent);font-weight:600}.auth-error{background:#f05a5a1a;border:1px solid rgba(240,90,90,.3);color:#f08d8d;font-size:13px;padding:9px 12px;border-radius:var(--radius-sm);margin-bottom:16px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060599;display:flex;align-items:center;justify-content:center;z-index:20}.modal-card{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:340px}.modal-title{font-weight:700;font-size:16px;margin-bottom:16px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.btn-ghost{padding:8px 14px;color:var(--text-secondary);font-weight:600;font-size:13px}.btn-ghost:hover{color:var(--text-primary)}.btn-primary{padding:9px 18px;background:var(--accent);color:var(--accent-ink);font-weight:700;border-radius:999px;font-size:13px}.add-menu{position:absolute;background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:0 10px 30px #0006;z-index:15;min-width:180px;padding:4px}.add-menu button{display:block;width:100%;text-align:left;padding:8px 10px;font-size:13px;border-radius:8px;color:var(--text-primary)}.add-menu button:hover{background:var(--bg-hover)}@media (max-width: 720px){.app-shell{grid-template-columns:1fr;grid-template-rows:1fr auto auto}.sidebar{display:none}.main-pane{grid-column:1;grid-row:1}.player-bar{grid-column:1;grid-row:2;grid-template-columns:1fr auto;margin:0 10px 6px;padding:8px 10px 8px 8px;gap:10px;border-radius:999px}.player-center,.player-right{display:none}.mobile-play-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);flex-shrink:0}.mobile-play-toggle:disabled{opacity:.4}.mobile-nav{display:flex;grid-column:1;grid-row:3;justify-content:space-around;align-items:center;margin:0 16px max(10px,env(safe-area-inset-bottom));padding:8px;border-radius:999px;box-shadow:0 16px 36px #00000073}.mobile-nav-item{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--text-faint);transition:background .15s ease,color .15s ease}.mobile-nav-item.active{background:var(--accent);color:var(--accent-ink)}.page{padding:4px 16px 24px}.topbar{padding:max(12px,env(safe-area-inset-top)) 16px 10px}.topbar-hide-mobile{display:none}.search-field{width:100%}.home-header,.page-header{margin-top:max(4px,env(safe-area-inset-top))}}