* { margin: 0; padding: 0; box-sizing: border-box; }
    .navbar-fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1030;
      background-color: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    body { padding-top: 0; }
    .nav-link-custom {
      color: #333;
      font-weight: 500;
      padding: 0.5rem 1rem !important;
      text-decoration: none;
    }
    .nav-link-custom:hover { color: #0d6efd; }
    .navbar-brand img { max-height: 40px; width: auto; }

    .dropdown-toggle { display: flex; align-items: center; }
    .btn { border-radius: 3px; padding: 0.5rem 1rem; }
    .card { border-radius: 3px; padding: 0.5rem 1rem; border: none; }

    .footer-link-hover a { transition: color 0.2s ease; }
    .footer-link-hover a:hover { color: #0d6efd !important; text-decoration: underline; }

    /* ===== Vue / Element UI ===== */
    [v-cloak] { display: none; }
    .el-tabs__content { padding: 20px 16px !important; }
    .el-textarea__inner { font-size: 14px !important; }
    .btn-pulse {
      animation: pulse-ring 1.5s ease-in-out infinite;
      box-shadow: 0 0 0 0 rgba(13,110,253,0.5);
    }
    @keyframes pulse-ring {
      0% { box-shadow: 0 0 0 0 rgba(13,110,253,0.5); }
      70% { box-shadow: 0 0 0 12px rgba(13,110,253,0); }
      100% { box-shadow: 0 0 0 0 rgba(13,110,253,0); }
    }

    /* ===== Mega Menu ===== */
    .nav-mega-btn {
      color: #333; font-weight: 500; padding: 0.5rem 1rem;
      text-decoration: none; display: inline-flex; align-items: center;
      gap: 4px; cursor: pointer; background: none; border: none;
      font-size: inherit; position: relative; transition: color 0.2s;
    }
    .nav-mega-btn:hover, .nav-mega-btn.active { color: #0d6efd; }
    .nav-mega-btn .arrow-icon {
      font-size: 0.7em; transition: transform 0.3s ease;
    }
    .nav-mega-btn.active .arrow-icon { transform: rotate(180deg); }

    .mega-panel {
      position: fixed; top: 0; left: 0; width: 100vw;
      background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,0.08);
      z-index: 1031; overflow: hidden;
      transform: translateY(-20px); opacity: 0;
      transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
      pointer-events: none;
    }
    .mega-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .mega-panel.closing { transform: translateY(-20px); opacity: 0; pointer-events: none; }
    .mega-panel-inner { padding: 2rem 0; }
    .mega-panel-scroll { max-height: 360px; overflow-y: auto; overflow-x: hidden; padding-right: 0.5rem; }

    .mega-intro-card {
      background: linear-gradient(135deg,#0d6efd 0%,#3d8bfd 100%);
      color: #fff; border-radius: 3px; padding: 1.5rem; height: 220px;
      display: flex; flex-direction: column; justify-content: flex-start;
    }
    .mega-intro-card h5 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
    .mega-intro-card p { font-size: 0.85rem; opacity: 0.9; line-height: 1.6; }

    .mega-list-col { min-width: 0; }
    .mega-list-title {
      font-size: 0.95rem; font-weight: 600; color: #333;
      padding-bottom: 0.5rem; margin-bottom: 0.75rem;
      border-bottom: 2px solid #0d6efd; display: inline-block;
    }
    .mega-item {
      display: block; padding: 0.5rem 0; text-decoration: none; color: #333;
      transition: color 0.15s; border-radius: 3px;
    }
    .mega-item:hover { color: #0d6efd; background: rgba(13,110,253,0.03); }
    .mega-item .item-name { font-size: 0.9rem; font-weight: 500; display: block; }
    .mega-item .item-desc { font-size: 0.78rem; color: #888; display: block; margin-top: 2px; }
    .mega-item:hover .item-desc { color: #6ea8fe; }

    /* ===== 移动端汉堡 ===== */
    .hamburger-btn {
      display: none; background: none; border: none; padding: 0.5rem; cursor: pointer;
    }
    .hamburger-btn span {
      display: block; width: 22px; height: 2px; background: #333;
      margin: 5px 0; transition: all 0.3s ease; border-radius: 2px;
    }
    .hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
    .hamburger-btn.active span:nth-child(2) { opacity: 0; }
    .hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

    .mobile-drawer {
      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
      background: #fff; z-index: 1028; overflow-y: auto;
      transform: translateX(-100%);
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); padding: 0;
    }
    .mobile-drawer.open { transform: translateX(0); }
    .mobile-nav-item { border-bottom: 1px solid #f0f0f0; }
    .mobile-nav-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.25rem; font-weight: 500; color: #333;
      cursor: pointer; user-select: none; transition: background 0.15s;
    }
    .mobile-nav-header:hover { background: #f8f9fa; }
    .mobile-nav-header .chevron { transition: transform 0.3s ease; font-size: 0.75em; color: #999; }
    .mobile-nav-header.expanded .chevron { transform: rotate(180deg); }
    .mobile-nav-body {
      max-height: 0; overflow: hidden;
      transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1); background: #fafbfc;
    }
    .mobile-nav-body.expanded { max-height: 400px; overflow-y: auto; }
    .mobile-sub-title {
      font-size: 0.85rem; font-weight: 600; color: #0d6efd;
      padding: 0.6rem 1.25rem 0.3rem;
    }
    .mobile-sub-link {
      display: block; padding: 0.5rem 1.25rem 0.5rem 1.75rem;
      color: #555; text-decoration: none; font-size: 0.9rem;
      transition: color 0.15s, background 0.15s;
    }
    .mobile-sub-link:hover { color: #0d6efd; background: rgba(13,110,253,0.03); }
    .mobile-user-section { padding: 1rem 1.25rem; border-bottom: 1px solid #f0f0f0; }

    @media (max-width: 767.98px) {
      .hamburger-btn { display: block; }
      .nav-desktop-links { display: none !important; }
      .nav-desktop-user { display: none !important; }
    }
    @media (min-width: 768px) {
      .mobile-drawer { display: none !important; }
      .hamburger-btn { display: none !important; }
    }