.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border);z-index:40;flex-direction:column;height:100vh;padding:20px 12px;display:flex;position:fixed;top:0;left:0}.sidebar-logo{align-items:center;gap:10px;margin-bottom:24px;padding:8px 12px;display:flex}.sidebar-logo-icon{color:var(--accent);animation:8s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sidebar-logo-text{background:var(--accent-gradient);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:800}.sidebar-create-btn{background:var(--accent-gradient);color:#fff;border-radius:var(--radius-md);align-items:center;gap:10px;margin-bottom:24px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s;display:flex;box-shadow:0 2px 12px #7c3aed4d}.sidebar-create-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px #7c3aed66}.sidebar-nav-container{flex-direction:column;flex:1;gap:28px;padding-bottom:24px;display:flex;overflow-y:auto}.sidebar-section{flex-direction:column;display:flex}.sidebar-section.mt-auto{margin-top:auto}.sidebar-label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:10px;padding:0 14px;font-size:11px;font-weight:700}.sidebar-nav{flex-direction:column;gap:4px;display:flex}.sidebar-nav-item{border-radius:var(--radius-md);color:var(--text-secondary);align-items:center;gap:12px;padding:10px 14px;font-size:14px;font-weight:500;transition:all .15s;display:flex;position:relative}.sidebar-nav-item:hover{background:var(--bg-card);color:var(--text-primary)}.sidebar-nav-item.active{background:var(--accent-soft);color:var(--accent-glow)}.sidebar-nav-indicator{background:var(--accent);border-radius:var(--radius-full);width:3px;height:20px;position:absolute;top:50%;right:0;transform:translateY(-50%)}.sidebar-footer{border-top:1px solid var(--border);padding-top:12px}.logout-desktop-btn{cursor:pointer;color:#fca5a5;background:0 0;border:none;width:100%}.logout-desktop-btn:hover{color:#f87171;background:#f871711a}@media (max-width:768px){.sidebar{display:none}}
.mobile-header{height:var(--header-height);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:50;background:#0f0f13cc;justify-content:space-between;align-items:center;padding:0 16px;display:none;position:fixed;top:0;left:0;right:0}.mobile-header-logo{align-items:center;display:flex}.mobile-header-right{position:relative}.mobile-avatar-btn{width:36px;height:36px;color:var(--text-secondary);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;overflow:hidden}.mobile-avatar-btn:active{transform:scale(.92)}.mobile-avatar-img{object-fit:cover;border-radius:50%;width:100%;height:100%}.mobile-profile-dropdown{-webkit-backdrop-filter:blur(24px);z-index:100;background:#141419f2;border:1px solid #ffffff14;border-radius:14px;width:200px;padding:6px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 16px 48px #00000080}.dropdown-item{color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:12px;width:100%;padding:10px 14px;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s;display:flex}.dropdown-item:hover{background:#ffffff0f}.dropdown-item:active{background:#ffffff1a;transform:scale(.98)}.dropdown-divider{background:#ffffff0f;height:1px;margin:4px 8px}.dropdown-logout{color:#fca5a5}.dropdown-logout:hover{background:#f8717114}.mobile-bottom-nav{bottom:env(safe-area-inset-bottom,12px);-webkit-backdrop-filter:blur(24px);z-index:50;background:#0f0f13d9;border:1px solid #ffffff14;border-radius:22px;justify-content:space-around;align-items:center;height:68px;padding:0 4px;display:none;position:fixed;left:12px;right:12px;box-shadow:0 -4px 32px #0000004d}.mobile-nav-item{color:var(--text-muted);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:14px;flex-direction:column;align-items:center;gap:3px;min-width:56px;padding:6px 12px;font-size:10px;font-weight:500;text-decoration:none;transition:color .15s;display:flex;position:relative}.mobile-nav-item.active{color:#fff}.mobile-nav-item.active:after{content:"";background:var(--accent-gradient);border-radius:2px;width:20px;height:2px;position:absolute;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 0 8px #8b5cf666}.create-tab{min-width:unset;padding:0;position:relative}.create-btn-icon{background:var(--accent-gradient);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:flex;box-shadow:0 4px 20px #8b5cf666}.create-tab:active .create-btn-icon{transform:scale(.9);box-shadow:0 2px 12px #8b5cf64d}.nav-profile-avatar{object-fit:cover;border:1.5px solid #ffffff26;border-radius:50%;width:24px;height:24px}.mobile-nav-item.active .nav-profile-avatar{border-color:var(--accent);box-shadow:0 0 8px #8b5cf64d}.create-overlay{-webkit-backdrop-filter:blur(4px);z-index:200;background:#00000080;position:fixed;inset:0}.create-sheet{background:var(--bg-secondary);padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom,12px));z-index:201;border:1px solid #ffffff14;border-bottom:none;border-top-left-radius:20px;border-top-right-radius:20px;position:fixed;bottom:0;left:0;right:0}.create-sheet-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.create-sheet-title{font-family:var(--font-heading);color:var(--text-primary);font-size:1.1rem;font-weight:700}.create-sheet-close{width:36px;height:36px;color:var(--text-secondary);cursor:pointer;background:#ffffff0f;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background .15s;display:flex}.create-sheet-close:hover{background:#ffffff1a}.create-sheet-options{flex-direction:column;gap:10px;display:flex}.create-option{background:#ffffff08;border:1px solid #ffffff0f;border-radius:14px;align-items:center;gap:16px;padding:16px;text-decoration:none;transition:all .15s;display:flex}.create-option:active{background:#ffffff0f;transform:scale(.98)}.create-option-icon{border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.co-request{color:var(--yellow);background:#f6c4531f;border:1px solid #f6c45326}.co-playlist{color:var(--violet);background:#8b5cf61f;border:1px solid #8b5cf626}.co-upload{color:#22c55e;background:#22c55e1f;border:1px solid #22c55e26}.create-option-text{flex-direction:column;gap:2px;display:flex}.create-option-label{color:var(--text-primary);font-size:15px;font-weight:600}.create-option-desc{color:var(--text-muted);font-size:13px}@media (max-width:768px){.mobile-header,.mobile-bottom-nav{display:flex}}
.app-shell{min-height:100vh;display:flex}.main-content{margin-left:var(--sidebar-width);flex:1;max-width:900px;min-height:100vh;padding:32px 40px}@media (max-width:768px){.main-content{max-width:100%;margin-left:0;padding:76px 14px 100px}}