@layer utilities {
  /* PC端导航链接 - 美化样式 */
  .nav-link {
    @apply px-4 py-2 rounded-lg text-gray-700 hover:bg-primary/5 hover:text-primary transition-all duration-300 relative overflow-hidden;
  }
  .nav-link-active {
    @apply bg-gradient-to-r from-primary to-primary/90 text-white hover:bg-primary/95 shadow-sm;
  }

  /* 移动端导航链接 - 美化样式 */
  .mobile-nav-link {
    @apply px-4 py-3 rounded-lg text-gray-700 hover:bg-primary/5 hover:text-primary transition-all duration-300;
  }
  .mobile-nav-link-active {
    @apply bg-primary/10 text-primary font-medium border-l-4 border-primary;
  }

  /* 移动端菜单按钮 - 美化样式 */
  .mobile-menu-btn {
    @apply w-12 h-12 flex items-center justify-center 
           bg-gradient-to-r from-primary/10 to-primary/5 rounded-full shadow-sm 
           text-primary hover:bg-primary/20 hover:shadow-md 
           active:scale-95 transition-all duration-300;
  }
}

/* 主题色兜底 */
:root {
  --tw-color-primary: #165DFF;
  --tw-color-secondary: #FF7D00;
}
.bg-primary { background-color: var(--tw-color-primary) !important; }
.text-primary { color: var(--tw-color-primary) !important; }
.bg-primary/5 { background-color: rgba(22, 93, 255, 0.05) !important; }
.bg-primary/10 { background-color: rgba(22, 93, 255, 0.1) !important; }
.bg-primary/20 { background-color: rgba(22, 93, 255, 0.2) !important; }
.bg-primary/90 { background-color: rgba(22, 93, 255, 0.9) !important; }
.bg-primary/95 { background-color: rgba(22, 93, 255, 0.95) !important; }
.border-primary { border-color: var(--tw-color-primary) !important; }