* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background-color: #f9fafc;
      color: #1e293b;
      line-height: 1.5;
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
    }
    
    /* 用户中心导航栏 */
    /* ===== 顶部导航栏 (用户中心专用) ===== */
    .top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid #e2e8f0;
      background-color: white;
      margin-bottom: 30px;
      border-radius: 0 0 24px 24px;
      box-shadow: 0 4px 12px -8px rgba(0,0,0,0.05);
    }

    .top-bar .logo-area {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .top-bar .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 1.5rem;
      color: #0f1825;
      text-decoration: none;
    }

    .top-bar .logo i {
      color: #3b82f6;
      font-size: 1.8rem;
    }

    .top-bar .badge {
      background: #e6f0ff;
      color: #2563eb;
      padding: 6px 16px;
      border-radius: 40px;
      font-size: 0.8rem;
      font-weight: 600;
    }

    .top-bar .user-menu {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .top-bar .notification-icon {
      background: #f1f5f9;
      padding: 10px 12px;
      border-radius: 40px;
      position: relative;
      cursor: pointer;
    }

    .top-bar .red-dot {
      position: absolute;
      top: 6px;
      right: 8px;
      width: 8px;
      height: 8px;
      background: #ef4444;
      border-radius: 50%;
    }

    .top-bar .user-profile {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #f8fafc;
      padding: 6px 18px 6px 12px;
      border-radius: 40px;
      cursor: pointer;
      position:relative;	
    }

    .top-bar .avatar {
      width: 38px;
      height: 38px;
      border-radius: 38px;
      background: #3b82f6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }
    
	.dropdown-menu {
	    position: absolute;
	    top: calc(100% + 10px);
	    right: 0;
	    background: white;
	    border-radius: 20px;
	    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.02);
	    min-width: 160px;
	    z-index: 100;
	    overflow: hidden;
	    opacity: 0;
	    visibility: hidden;
	    transform: translateY(-10px);
	    transition: all 0.2s ease;
	    border: 1px solid #eef2f6;
	  }
	  .dropdown-menu.show {
	    opacity: 1;
	    visibility: visible;
	    transform: translateY(0);
	  }
	  .dropdown-item {
	    display: flex;
	    align-items: center;
	    gap: 12px;
	    padding: 12px 20px;
	    color: #1e293b;
	    text-decoration: none;
	    transition: background 0.1s;
	    font-size: 0.95rem;
	  }
	  .dropdown-item i {
	    width: 20px;
	    color: #64748b;
	  }
	  .dropdown-item:hover {
	    background: #f8fafc;
	  }
	  .dropdown-item:active {
	    background: #f1f5f9;
	  }

    /* 导航栏 */
    .navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      border-bottom: 1px solid #eef2f6;
      flex-wrap: wrap;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 1.6rem;
      letter-spacing: -0.02em;
      color: #0f1825;
    }

    .logo i {
      color: #3b82f6;
      font-size: 2rem;
    }

    .nav-links {
      display: flex;
      gap: 40px;
      font-weight: 500;
    }

    .nav-links a {
      text-decoration: none;
      color: #334155;
      font-size: 1rem;
      transition: color 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-links a i {
      font-size: 0.9rem;
      color: #64748b;
    }

    .nav-links a:hover {
      color: #3b82f6;
    }

    .nav-links a:hover i {
      color: #3b82f6;
    }
    
    .nav-links .active{
		color: #3b82f6;
    }

    .btn-cta {
      background-color: #3b82f6;
      color: white !important;
      padding: 10px 24px;
      border-radius: 40px;
      font-weight: 600;
      font-size: 0.95rem;
      border: none;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }

    .btn-cta i {
      color: white !important;
    }

    .btn-cta:hover {
      background-color: #2563eb;
      transform: scale(1.02);
    }
    
/* 语言切换器 */
    .language-switcher {
      display: flex;
      align-items: center;
      background: #f1f5f9;
      border-radius: 40px;
      padding: 4px;
      gap: 4px;
    }
    .lang-option {
      padding: 6px 14px;
      border-radius: 30px;
      font-size: 0.9rem;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.1s;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .lang-option i {
      font-size: 0.9rem;
      color: #64748b;
    }
    .lang-option.active {
      background: #3b82f6;
      color: white;
    }
    .lang-option.active i {
      color: white;
    }
    .lang-option:hover:not(.active) {
      background: #e2e8f0;
    }
    
    
    
/* ===== 侧边栏 + 主内容布局 ===== */
.dashboard-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* 侧边导航 */
.sidebar {
  flex: 0 0 260px;
  background: white;
  border-radius: 32px;
  padding: 24px 16px;
  box-shadow: 0 15px 30px -15px rgba(0,0,0,0.1);
  position: sticky;
  top: 20px;
}

.sidebar-menu {
  list-style: none;
}

.sidebar-item {
  margin: 8px 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 30px;
  color: #475569;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.15s;
}

.sidebar-link i {
  width: 22px;
  color: #64748b;
}

.sidebar-link.active {
  background: #3b82f6;
  color: white;
}
.sidebar-link.active i {
  color: white;
}

.sidebar-link:hover:not(.active) {
  background: #f1f6fd;
  color: #2563eb;
}

.sidebar-divider {
  height: 1px;
  background: #e9edf2;
  margin: 20px 0;
}    
    

/* ===== 主内容区 ===== */
.main-content {
  flex: 1;
  min-width: 0;
}

    
/* ===== 页面头部 ===== */
.page-header {
  padding: 40px 0 20px;
}

.page-header h1 {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(145deg, #0f1825, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-header h1 i {
  background: #dbeafe;
  padding: 12px;
  border-radius: 60%;
  color: #2563eb;
  font-size: 2rem;
  -webkit-text-fill-color: #2563eb;
}

.breadcrumb {
  color: #64748b;
  margin-bottom: 24px;
}

.breadcrumb a {
  color: #3b82f6;
  text-decoration: none;
}

.header-desc {
  font-size: 1.2rem;
  color: #334155;
  max-width: 800px;
  margin: 20px 0 40px;
}
    

/* footer */
.footer {
  border-top: 1px solid #e2e8f0;
  padding: 40px 0;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #475569;
}
    
    
 .footer-mini {
  border-top: 1px solid #e2e8f0;
  padding: 24px 0;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  color: #64748b;
}

/* 响应式调整 */
@media (max-width: 800px) {
  .navbar {
    flex-direction: column;
    gap: 16px;
  }
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
  .hero-content h1 {
    font-size: 2.4rem;
  }
}