#topbar-role-mode-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.95;
  text-transform: uppercase;
}

body.role-superadmin .navbar-glass {
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.92), rgba(146, 64, 14, 0.88)) !important;
  border-bottom: 3px solid #fbbf24;
  box-shadow: 0 2px 12px rgba(185, 28, 28, 0.25);
}

body.role-superadmin #topbar-role-mode-label,
body.role-superadmin .brand-logo .site-logo-text {
  color: #fef3c7 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.role-line_owner .navbar-glass {
  background: linear-gradient(90deg, rgba(67, 56, 202, 0.14), rgba(99, 102, 241, 0.1)) !important;
  border-bottom: 2px solid #6366f1;
}

body.role-line_owner #topbar-role-mode-label,
body.role-line_owner .brand-logo .site-logo-text {
  color: #4338ca !important;
}

body.role-staff .navbar-glass {
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.16), rgba(34, 197, 94, 0.1)) !important;
  border-bottom: 2px solid #22c55e;
}

body.role-staff #topbar-role-mode-label,
body.role-staff .brand-logo .site-logo-text {
  color: #15803d !important;
}

body.role-seller .navbar-glass {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.2), rgba(56, 189, 248, 0.12)) !important;
  border-bottom: 2px solid #0ea5e9;
}

body.role-seller #topbar-role-mode-label,
body.role-seller .brand-logo .site-logo-text {
  color: #0369a1 !important;
}

body.role-customer .navbar-glass {
  background: rgba(100, 116, 139, 0.1) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.5);
}

body.role-customer #topbar-role-mode-label,
body.role-customer .brand-logo .site-logo-text {
  color: #475569 !important;
}