.topbar { height: var(--topbar-height); background: var(--surface); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-lg); gap: var(--space-md); flex-shrink: 0; }
.topbar-left { display: flex; align-items: center; gap: var(--space-md); }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.hamburger span { width: 22px; height: 2px; background: var(--text-primary); border-radius: 1px; }
.breadcrumb { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.9rem; color: var(--text-secondary); }
.breadcrumb svg { width: 12px; height: 12px; color: var(--text-muted); }
.topbar-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.trend-ticker { display: flex; align-items: center; gap: var(--space-sm); background: var(--bg-2); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-md); max-width: 420px; overflow: hidden; }
.ticker-badge { font-size: 0.65rem; padding: 2px 6px; background: var(--emerald); color: #0c0c0e; border-radius: var(--radius-sm); flex-shrink: 0; }
.ticker-mask { flex: 1; overflow: hidden; }
.ticker-inner { display: flex; animation: ticker 30s linear infinite; white-space: nowrap; }
.ticker-inner span { padding-right: 2em; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.topbar-right { display: flex; align-items: center; gap: var(--space-sm); }
.topbar-action-btn { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--accent); color: #0c0c0e; border-radius: var(--radius-md); font-weight: 600; font-size: 0.85rem; }
.topbar-action-btn svg { width: 16px; height: 16px; }
.icon-btn { padding: var(--space-sm); border-radius: var(--radius-md); color: var(--text-secondary); position: relative; }
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.icon-btn svg { width: 20px; height: 20px; }
.notif-pip { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--rose); border-radius: 50%; }
@media (max-width: 768px) { .hamburger { display: flex; } .topbar-center { display: none; } }