.topbar {
    min-height: var(--erp-topbar); display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .75rem 1.4rem; background: color-mix(in srgb, var(--erp-surface) 88%, transparent);
    border-bottom: 1px solid var(--erp-border); backdrop-filter: blur(18px); z-index: 1030;
}
.topbar-left, .topbar-center, .topbar-right { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.topbar-center { flex: 1; justify-content: center; }
.brand-link { display: flex; align-items: center; gap: .7rem; color: var(--erp-text); }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--erp-primary), var(--erp-info)); font-weight: 800; }
.brand-copy strong, .profile-copy strong { display: block; line-height: 1.1; color: var(--erp-text); }
.brand-copy small, .profile-copy small { display: block; font-size: .76rem; color: var(--erp-muted); }
.topbar-search { flex: 1; max-width: 520px; min-width: 250px; position: relative; }
.topbar-search i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--erp-muted); }
.topbar-search .form-control { padding-left: 2.35rem; border-radius: 999px; background: var(--erp-surface-2); }
.context-select { max-width: 180px; }
.notification-dot { position: absolute; right: 9px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--erp-danger); box-shadow: 0 0 0 3px rgba(210,59,79,.16); }
.notification-menu { width: min(380px, 92vw); border: 1px solid var(--erp-border); border-radius: 14px; box-shadow: var(--erp-shadow); overflow: hidden; }
.notification-item { display: flex; gap: .75rem; padding: .9rem 1rem; border-top: 1px solid var(--erp-border); }
.notification-item.unread { background: rgba(36,84,214,.04); }
.notification-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.notification-item p, .notification-item small { color: var(--erp-muted); }
.notification-footer { padding: .75rem; border-top: 1px solid var(--erp-border); }
.profile-btn { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--erp-border); background: var(--erp-surface); border-radius: 999px; padding: .32rem .6rem .32rem .32rem; }
.avatar-ring { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--erp-primary), var(--erp-info)); color: #fff; font-weight: 800; }
.profile-menu { border: 1px solid var(--erp-border); border-radius: 14px; box-shadow: var(--erp-shadow); }