.navbar { position: fixed; top: 0; left: 0; right: 0; height: 64px; background: rgba(13, 13, 18, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); z-index: 1000; } .navbar-container { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; } /* Brand */ .navbar-brand { display: flex; align-items: center; gap: 10px; } .brand-icon { font-size: 1.5rem; } .brand-text { font-size: 1.25rem; font-weight: 600; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Tabs */ .navbar-tabs { display: flex; gap: 4px; background: var(--bg-secondary); padding: 4px; border-radius: 10px; } .nav-tab { padding: 8px 20px; background: transparent; border: none; border-radius: 8px; color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .nav-tab:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } .nav-tab.active { background: var(--accent-gradient); color: white; } /* Actions */ .navbar-actions { display: flex; align-items: center; gap: 16px; } .nav-icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-subtle); border-radius: 10px; font-size: 1.1rem; cursor: pointer; transition: all 0.2s ease; } .nav-icon-btn:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border-focus); } .user-avatar { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--accent-gradient); border-radius: 50%; font-size: 0.875rem; font-weight: 600; color: white; cursor: pointer; }