.navbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;padding:12px 0;position:sticky;top:0}.navbar-container{justify-content:space-between;align-items:center;max-width:100%;padding:0 16px;display:flex}.navbar-logo{letter-spacing:1px;color:var(--accent);text-transform:lowercase;white-space:nowrap;min-width:fit-content;font-size:28px;font-weight:700;text-decoration:none}.navbar-logo:hover{opacity:.8}.navbar-right{align-items:center;gap:8px;display:flex}.user-menu-wrapper{position:relative}.user-avatar{background:var(--accent);border:2px solid var(--accent);width:32px;height:32px;color:var(--bg);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;transition:all .2s;display:flex}.user-avatar:hover{border-color:var(--accent);opacity:.9}.user-menu-dropdown{background:var(--surface);border:1px solid var(--border);z-index:101;border-radius:8px;min-width:180px;margin-top:8px;position:absolute;top:100%;right:0;box-shadow:0 8px 24px #00000026}.dropdown-header{padding:12px 16px}.dropdown-username{color:var(--text);margin:0;font-size:13px;font-weight:600}.dropdown-email{color:var(--muted);margin:4px 0 0;font-size:11px}.dropdown-divider{border:none;border-top:1px solid var(--border);margin:0}.dropdown-item{width:100%;color:var(--accent);text-align:left;cursor:pointer;background:0 0;border:none;padding:12px 16px;font-size:13px;font-weight:500;text-decoration:none;transition:all .2s;display:block}.dropdown-item:hover{background:var(--bg)}.logout-btn{color:#ff6b6b}.logout-btn:hover{background:#ff6b6b0d}.mobile-nav{background:var(--surface);border-top:1px solid var(--border);z-index:100;display:none;position:fixed;bottom:0;left:0;right:0}.mobile-nav-item{color:var(--muted);cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;padding:12px;text-decoration:none;transition:all .2s;display:flex}.mobile-nav-item svg{stroke:currentColor;fill:none;width:20px;height:20px}.mobile-nav-item:hover{color:var(--text)}.mobile-nav-item.upload-item{font-size:18px}.mobile-menu-overlay{z-index:101;background:#00000080;animation:.2s fadeIn;display:none;position:fixed;inset:0}.mobile-menu{background:var(--surface);border-top:1px solid var(--border);border-radius:12px 12px 0 0;max-height:50vh;padding:16px;animation:.3s slideUp;position:absolute;bottom:0;left:0;right:0;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.mobile-menu-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.mobile-menu-header h3{color:var(--accent);margin:0;font-size:16px;font-weight:600}.close-btn{color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0;font-size:20px;transition:all .2s}.close-btn:hover{opacity:.6}.menu-divider{border:none;border-top:1px solid var(--border);margin:8px 0}.mobile-menu-item{width:100%;color:var(--accent);text-align:left;cursor:pointer;background:0 0;border:none;padding:12px 0;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:block}.mobile-menu-item:hover{color:var(--muted)}.logout-item{color:#ff6b6b}.logout-item:hover{color:#ff8787}@media (max-width:768px){.navbar-right{display:none}.mobile-nav{display:flex}.mobile-menu-overlay{display:block}body{overflow-x:hidden}main{padding-bottom:60px}}