* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #2c3e50; background: #f6f8fb; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.topbar { background: #fff; border-bottom: 1px solid #e8ecf1; position: sticky; top: 0; z-index: 100; }
.topbar .container { max-width: 1280px; }
.topbar .nav { display: flex; align-items: center; height: 62px; }
.brand { font-size: 19px; font-weight: 700; color: #2563eb; margin-right: 30px; }
.nav-links { display: flex; gap: 22px; flex: 1; }
.nav-links a { color: #4a5568; font-size: 14.5px; }
.nav-links a:hover, .nav-links a.active { color: #2563eb; }
.nav-user { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.btn { display: inline-block; padding: 8px 20px; border-radius: 6px; font-size: 14px; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-outline { border-color: #2563eb; color: #2563eb; }
.btn-outline:hover { background: #eff6ff; }
.btn-lg { padding: 12px 30px; font-size: 16px; }
.hero { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%); color: #fff; padding: 74px 0 84px; text-align: center; }
.hero h1 { font-size: 40px; margin-bottom: 16px; }
.hero p { font-size: 17px; opacity: .9; margin-bottom: 8px; max-width: 720px; margin-left: auto; margin-right: auto; }
.hero .actions { margin-top: 30px; display: flex; gap: 16px; justify-content: center; }
.btn-white { background: #fff; color: #2563eb; }
.btn-ghost { border: 1px solid rgba(255,255,255,.6); color: #fff; }
.notice { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 10px 18px; border-radius: 8px; margin: 22px auto; max-width: 1120px; font-size: 14px; }
.section { padding: 52px 0; }
.section-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; text-align: center; }
.section-sub { color: #718096; text-align: center; margin-bottom: 34px; font-size: 14.5px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card { background: #fff; border-radius: 10px; border: 1px solid #e8ecf1; padding: 22px; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: 0 8px 24px rgba(37,99,235,.10); transform: translateY(-3px); }
.card h4 { font-size: 16px; margin-bottom: 8px; }
.card .desc { color: #718096; font-size: 13.5px; min-height: 42px; }
.card .meta { margin-top: 14px; font-size: 13px; color: #a0aec0; display: flex; justify-content: space-between; align-items: center; }
.price { color: #dc2626; font-weight: 700; font-size: 16px; }
.price.free { color: #16a34a; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; background: #eff6ff; color: #2563eb; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.feature { background: #fff; border-radius: 10px; border: 1px solid #e8ecf1; padding: 24px; }
.feature h4 { font-size: 16px; margin-bottom: 8px; }
.feature p { color: #718096; font-size: 14px; }
.footer { background: #1e293b; color: #a5b4cb; padding: 34px 0; text-align: center; font-size: 13.5px; margin-top: 20px; }
.footer a { color: #cbd5e1; }
.center { text-align: center; }
.mt20 { margin-top: 20px; }

/* ===== 开发者中心 / 通用表单表格 ===== */
.form-row { margin-bottom: 14px; }
.form-row label { display: block; margin-bottom: 6px; color: #4a5568; font-size: 14px; }
.form-row input[type=text], .form-row input[type=number], .form-row input[type=password], .form-row input[type=email], .form-row select, .form-row textarea {
  width: 100%; padding: 9px 12px; border: 1px solid #d1d9e6; border-radius: 6px; font-size: 14px; box-sizing: border-box; background: #fff;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: #2563eb; }
.btn-plain { background: #fff; border: 1px solid #d1d9e6; color: #4a5568; }
.btn-plain:hover { border-color: #2563eb; color: #2563eb; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.table th { background: #f8fafc; color: #4a5568; font-size: 13px; text-align: left; padding: 12px 16px; border-bottom: 1px solid #e8ecf1; }
.table td { padding: 12px 16px; border-bottom: 1px solid #eef2f7; font-size: 14px; color: #334155; }
.table tr:last-child td { border-bottom: none; }
.tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.tabs a { padding: 8px 18px; border-radius: 6px; font-size: 14px; color: #4a5568; border: 1px solid #d1d9e6; background: #fff; }
.tabs a.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.empty { text-align: center; color: #a0aec0; padding: 40px; }

/* ===== 提示条 ===== */
.tip { padding: 10px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.tip-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.tip-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.tip-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }

.tag-orange { background: #ffedd5; color: #ea580c; }
.tag-gray { background: #f1f5f9; color: #64748b; }

/* ===== 通用表单输入框 ===== */
.input {
  width: 100%; padding: 10px 14px; border: 1px solid #d1d9e6; border-radius: 8px;
  font-size: 14px; box-sizing: border-box; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.input:hover { border-color: #94a3b8; }
.input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.input::placeholder { color: #a0aec0; }

/* ===== 金额输入框（带人民币前缀） ===== */
.amount-input { position: relative; display: flex; align-items: center; }
.amount-input .prefix {
  position: absolute; left: 14px; color: #94a3b8; font-size: 15px; font-weight: 600; pointer-events: none;
}
.amount-input input[type=number] {
  width: 200px; padding: 10px 14px 10px 32px; border: 1px solid #d1d9e6; border-radius: 8px;
  font-size: 15px; box-sizing: border-box; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.amount-input input[type=number]:hover { border-color: #94a3b8; }
.amount-input input[type=number]:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.amount-input input[type=number]::-webkit-outer-spin-button,
.amount-input input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-input input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* ===== 充值快捷金额按钮 ===== */
.amount-quick {
  padding: 9px 18px; border-radius: 8px; border: 1px solid #d1d9e6; background: #fff;
  color: #4a5568; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.amount-quick:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.amount-quick.active { border-color: #2563eb; background: #2563eb; color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.25); }

/* ============================================
   响应式适配 - 平板 (768px - 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .container { max-width: 100%; padding: 0 16px; }
  .nav-links { gap: 18px; }
  .brand { margin-right: 20px; font-size: 17px; }
  .hero { padding: 56px 0 64px; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 15px; }
  .features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .section { padding: 40px 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
}

/* ============================================
   响应式适配 - 手机 (< 768px)
   ============================================ */
@media (max-width: 768px) {
  /* 全局 */
  .container { padding: 0 12px; }
  body { font-size: 14px; }

  /* 顶部导航 */
  .topbar {
    position: relative;
    z-index: 100;
  }
  .topbar .nav {
    flex-wrap: nowrap;
    height: auto;
    padding: 10px 0;
    gap: 8px;
  }
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #d1d9e6;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    color: #4a5568;
    flex-shrink: 0;
  }
  .brand {
    margin-right: 0;
    font-size: 15px;
    flex: 1;
    text-align: left;
    padding-left: 4px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-user {
    gap: 8px;
    font-size: 13px;
    flex-shrink: 0;
  }
  .nav-user .btn { padding: 6px 12px; font-size: 13px; }
  .topbar .nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-top: 1px solid #e8ecf1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
    padding: 0 20px 12px;
  }
  .topbar .nav .nav-links.open {
    display: flex !important;
  }
  .topbar .nav .nav-links a {
    padding: 12px 4px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
  }
  .topbar .nav .nav-links a:last-child { border-bottom: none; }

  /* Hero区域 */
  .hero { padding: 36px 0 44px; }
  .hero h1 { font-size: 22px; margin-bottom: 10px; }
  .hero p { font-size: 13.5px; margin-bottom: 5px; }
  .hero .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero .actions .btn {
    width: 100%;
    padding: 10px 12px;
    font-size: 13.5px;
  }

  /* 功能区 */
  .features { grid-template-columns: 1fr; gap: 14px; }
  .feature { padding: 18px; }
  .feature h4 { font-size: 15px; }
  .feature p { font-size: 13px; }

  /* 卡片网格 */
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 18px; }
  .card h4 { font-size: 15px; }
  .card .desc { font-size: 13px; min-height: auto; }

  /* 区块标题 */
  .section { padding: 32px 0; }
  .section-title { font-size: 20px; }
  .section-sub { font-size: 13.5px; margin-bottom: 24px; }

  /* 表格 - 横向滚动 */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 600px; font-size: 13px; }
  .table th, .table td { padding: 10px 12px; white-space: nowrap; }

  /* 表单 */
  .form-row { margin-bottom: 12px; }
  .form-row label { font-size: 13px; }
  .form-row input, .form-row select, .form-row textarea {
    padding: 10px 12px;
    font-size: 14px;
  }
  .btn { padding: 9px 18px; font-size: 13.5px; }
  .btn-lg { padding: 11px 24px; font-size: 15px; }

  /* Tabs */
  .tabs {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tabs a { padding: 7px 14px; font-size: 13px; }

  /* 金额输入 */
  .amount-input input[type=number] { width: 100%; }
  .amount-quick { padding: 8px 14px; font-size: 12.5px; }

  /* 提示条 */
  .notice { margin: 16px 12px; padding: 10px 14px; font-size: 13px; }
  .tip { padding: 10px 14px; font-size: 13px; }

  /* 页脚 */
  .footer { padding: 24px 0; font-size: 12.5px; }

  /* 空状态 */
  .empty { padding: 30px 16px; font-size: 13px; }
}

/* ============================================
   响应式适配 - 小屏手机 (< 480px)
   ============================================ */
@media (max-width: 480px) {
  .hero h1 { font-size: 20px; }
  .hero p { font-size: 13px; }
  .section-title { font-size: 18px; }
  .card { padding: 16px; }
  .feature { padding: 16px; }
  .btn { padding: 8px 16px; font-size: 13px; }
  .btn-lg { padding: 10px 20px; font-size: 14px; }
  .table { min-width: 500px; font-size: 12.5px; }
  .table th, .table td { padding: 8px 10px; }
}

/* 导航切换按钮默认隐藏（大屏） */
.nav-toggle { display: none; }

/* ============================================
   用户中心 - 左侧导航栏 + 右侧内容
   ============================================ */
.user-center { padding: 24px 0; min-height: calc(100vh - 200px); }
.user-container { max-width: 1100px; margin: 0 auto; display: flex; gap: 24px; align-items: flex-start; padding: 0 20px; }
.user-sidebar { width: 240px; flex-shrink: 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
.user-card { padding: 24px 20px; text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
.user-avatar-big { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; margin: 0 auto 12px; overflow: hidden; }
.user-avatar-big img { width: 100%; height: 100%; object-fit: cover; }
.user-card-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.user-card-role { font-size: 13px; opacity: 0.9; }
.user-menu { padding: 8px 0; }
.user-menu-item { display: flex; align-items: center; gap: 10px; padding: 12px 20px; color: #4b5563; text-decoration: none; font-size: 14px; transition: all 0.2s; border-left: 3px solid transparent; }
.user-menu-item:hover { background: #f9fafb; color: #2563eb; }
.user-menu-item.active { background: #eff6ff; color: #2563eb; border-left-color: #2563eb; font-weight: 500; }
.user-menu-icon { font-size: 16px; }
.user-menu-divider { height: 1px; background: #f3f4f6; margin: 8px 16px; }
.user-content { flex: 1; min-width: 0; }
.user-content-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 24px; margin-bottom: 20px; }
.user-content-title { font-size: 18px; font-weight: 600; color: #111827; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.overview-item { background: #f9fafb; border-radius: 8px; padding: 16px; }
.overview-label { font-size: 13px; color: #6b7280; margin-bottom: 6px; }
.overview-value { font-size: 16px; font-weight: 600; color: #111827; word-break: break-all; }
.overview-value.money { color: #dc2626; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; padding: 20px; text-align: center; color: #fff; text-decoration: none; transition: transform 0.2s; }
.stat-card:hover { transform: translateY(-2px); }
.stat-icon { font-size: 28px; margin-bottom: 8px; }
.stat-num { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.stat-label { font-size: 13px; opacity: 0.9; }
.info-subtitle { font-size: 15px; font-weight: 600; color: #374151; margin: 0 0 16px; }
.login-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.login-info-item { display: flex; flex-direction: column; gap: 4px; }
.login-info-label { font-size: 12px; color: #9ca3af; }
.login-info-value { font-size: 14px; color: #374151; word-break: break-all; }

/* 移动端用户菜单切换按钮 */
.user-menu-toggle {
  display: none;
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  transition: all 0.2s;
}
.user-menu-toggle:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.user-menu-toggle-icon {
  font-size: 18px;
}
.user-menu-toggle-text {
  font-weight: 500;
}

@media (max-width: 768px) {
  .user-container { flex-direction: column; padding: 0 12px; }
  .user-menu-toggle { display: flex; }
  .user-sidebar {
    display: none;
    width: 100%;
  }
  .user-sidebar.active {
    display: block;
  }
}

/* ============================================
   开关按钮（全局通用）
   ============================================ */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.toggle-track {
  position: relative;
  width: 50px;
  height: 26px;
  background: #cbd5e1;
  border-radius: 13px;
  transition: background 0.3s;
}
.toggle-track.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-track.active .toggle-thumb {
  transform: translateX(24px);
}
.toggle-label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}


/* ==================== 论坛风格身份徽章 ==================== */
.user-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.user-badges-small .forum-badge { transform: scale(0.85); transform-origin: left center; }
.user-badges-large .forum-badge { transform: scale(1.15); transform-origin: left center; }

.forum-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; color: #fff;
  position: relative; overflow: hidden;
  cursor: default; transition: all 0.2s ease;
  white-space: nowrap;
}
.forum-badge:hover { transform: translateY(-1px); filter: brightness(1.1); }
.forum-badge .badge-icon { font-size: 14px; line-height: 1; }
.forum-badge .badge-text { line-height: 1; }

/* 盾牌样式 - 等级徽章 */
.badge-shield {
  background: linear-gradient(135deg, var(--badge-color), var(--badge-gradient, var(--badge-color)));
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
  border-radius: 4px 4px 6px 6px;
  padding: 4px 12px;
}
.badge-shield::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent);
  pointer-events: none;
}

/* 奖章样式 - 荣誉徽章 */
.badge-medal {
  background: linear-gradient(135deg, var(--badge-color), var(--badge-gradient, var(--badge-color)));
  border-radius: 50%;
  padding: 5px 9px;
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.3);
}
.badge-medal .badge-text { font-size: 11px; }

/* 丝带样式 - 身份徽章 */
.badge-ribbon {
  background: linear-gradient(180deg, var(--badge-color), var(--badge-gradient, var(--badge-color)));
  border-radius: 3px 3px 0 0;
  padding: 4px 14px 5px;
  position: relative;
}
.badge-ribbon::before, .badge-ribbon::after {
  content: ''; position: absolute; bottom: -5px; width: 0; height: 0; border-style: solid;
}
.badge-ribbon::before { left: 0; border-width: 5px 0 0 5px; border-color: var(--badge-color) transparent transparent transparent; }
.badge-ribbon::after { right: 0; border-width: 5px 5px 0 0; border-color: var(--badge-color) transparent transparent transparent; }

/* 发光样式 - 特殊徽章 */
.badge-glow {
  background: linear-gradient(135deg, var(--badge-color), var(--badge-gradient, var(--badge-color)));
  animation: badge-glow-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--badge-color), 0 0 16px var(--badge-color);
  border: 1px solid rgba(255,255,255,0.4);
}
@keyframes badge-glow-pulse {
  0%, 100% { box-shadow: 0 0 5px var(--badge-color), 0 0 10px var(--badge-color); }
  50% { box-shadow: 0 0 15px var(--badge-color), 0 0 30px var(--badge-color), 0 0 40px var(--badge-color); }
}

/* 徽章墙（用户主页） */
.badge-wall { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
.badge-wall .forum-badge {
  padding: 8px 16px; font-size: 14px;
  flex-direction: column; gap: 6px;
  min-width: 100px; text-align: center;
}
.badge-wall .forum-badge .badge-icon { font-size: 28px; }
.badge-wall .badge-shield { border-radius: 8px 8px 12px 12px; padding: 12px 16px; }
.badge-wall .badge-medal { border-radius: 12px; padding: 12px; }
.badge-wall .badge-ribbon { border-radius: 6px 6px 0 0; padding: 12px 20px 14px; }

/* ========== 钻石闪光徽章（高端炫酷） ========== */
.badge-diamond {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding: 5px 12px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.4) 0%,
    var(--badge-gradient) 30%,
    var(--badge-color) 50%,
    var(--badge-gradient) 70%,
    rgba(255,255,255,0.3) 100%);
  background-size: 200% 200%;
  border: 1.5px solid rgba(255,255,255,0.6);
  box-shadow:
    0 0 8px var(--badge-color),
    0 0 16px var(--badge-color),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.1);
  animation: diamond-shine 3s ease-in-out infinite, diamond-glow 2s ease-in-out infinite;
}

/* 钻石切割面高光 */
.badge-diamond::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.6) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  animation: diamond-sweep 2.5s ease-in-out infinite;
}

/* 星光闪烁点1 */
.badge-diamond::after {
  content: '✦';
  position: absolute;
  top: -2px; right: 4px;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 8px var(--badge-color);
  animation: star-twinkle 1.5s ease-in-out infinite;
}

/* 第二个星光点（用badge-icon的伪元素实现） */
.badge-diamond .badge-icon {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.8));
}

.badge-diamond .badge-text {
  position: relative;
  z-index: 2;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* 动画：背景渐变流动 */
@keyframes diamond-shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 动画：发光脉冲 */
@keyframes diamond-glow {
  0%, 100% {
    box-shadow:
      0 0 8px var(--badge-color),
      0 0 16px var(--badge-color),
      inset 0 1px 0 rgba(255,255,255,0.5);
    filter: brightness(1);
  }
  50% {
    box-shadow:
      0 0 12px var(--badge-color),
      0 0 24px var(--badge-color),
      0 0 36px var(--badge-color),
      inset 0 1px 0 rgba(255,255,255,0.6);
    filter: brightness(1.15);
  }
}

/* 动画：扫光 */
@keyframes diamond-sweep {
  0% { left: -100%; }
  50%, 100% { left: 150%; }
}

/* 动画：星光闪烁 */
@keyframes star-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(180deg);
  }
}

/* 徽章墙中的钻石样式放大 */
.badge-wall .badge-diamond {
  padding: 14px 20px;
  border-radius: 14px;
}
.badge-wall .badge-diamond::after {
  font-size: 14px;
  top: 2px; right: 8px;
}

/* ===== 博客列表卡片 ===== */
.blog-list { display: flex; flex-direction: column; gap: 14px; }
.blog-card {
  display: flex;
  gap: 20px;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 14px;
  padding: 20px 22px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.blog-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #667eea, #764ba2);
  opacity: 0;
  transition: opacity .25s;
}
.blog-card:hover {
  box-shadow: 0 10px 30px rgba(37,99,235,.12);
  transform: translateY(-3px);
  border-color: #dbe4f5;
}
.blog-card:hover::before { opacity: 1; }
.blog-card-top::before { opacity: 1; background: linear-gradient(180deg, #f59e0b, #ef4444); }
.blog-card-cover {
  flex: 0 0 200px;
  width: 200px;
  min-height: 118px;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f5f9;
  align-self: center;
}
.blog-card-cover img {
  width: 100%;
  height: 100%;
  min-height: 118px;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.blog-card:hover .blog-card-cover img { transform: scale(1.05); }
.blog-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.blog-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.blog-card-title h3 {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.45;
  font-weight: 600;
  color: #1f2937;
  transition: color .2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card:hover .blog-card-title h3 { color: #667eea; }
.blog-badge-top {
  flex-shrink: 0;
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
}
.blog-card-summary {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: #9ca3af;
}
.blog-cat {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 500;
}
.blog-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}
.blog-author:hover { text-decoration: underline; }
.blog-author-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: inline-block;
}
.blog-author-dot-admin { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.blog-badge-official {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
}
.blog-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9ca3af;
}

/* ===== 分页 ===== */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination li { margin: 0; }
.pagination li > a,
.pagination li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #4b5563;
  font-size: 13.5px;
  text-decoration: none;
  transition: all .2s;
  box-sizing: border-box;
}
.pagination li > a:hover {
  border-color: #667eea;
  color: #667eea;
  background: #f5f3ff;
  transform: translateY(-1px);
}
.pagination li.active > span {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(102,126,234,.35);
}
.pagination li.disabled > span {
  color: #c4c9d4;
  background: #f9fafb;
  border-color: #f0f1f4;
  cursor: not-allowed;
}
@media (max-width: 768px) {
  .blog-card { flex-direction: column; gap: 12px; padding: 16px; }
  .blog-card-cover { flex: none; width: 100%; min-height: 0; }
  .blog-card-cover img { min-height: 0; height: auto; }
  .pagination li > a, .pagination li > span { min-width: 34px; height: 34px; font-size: 13px; }
}

/* ===== 首页魔方风 ===== */
.hero-new{background:linear-gradient(135deg,#0b1030 0%,#14245c 45%,#1d4ed8 100%);color:#fff;padding:86px 0 74px;text-align:center;position:relative;overflow:hidden}
.hero-new::before{content:'';position:absolute;top:-180px;left:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 65%);pointer-events:none}
.hero-new::after{content:'';position:absolute;bottom:-200px;right:-140px;width:560px;height:560px;background:radial-gradient(circle,rgba(139,92,246,.28),transparent 65%);pointer-events:none}
.hero-new .container{position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);font-size:13px;color:#e0e7ff;margin-bottom:22px}
.hero-new h1{font-size:44px;font-weight:800;margin:0 0 18px;line-height:1.25;letter-spacing:.5px}
.hero-new h1 b{background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-new .sub{font-size:17.5px;color:rgba(255,255,255,.85);max-width:720px;margin:0 auto 12px;line-height:1.8}
.hero-new .sub2{font-size:14px;color:rgba(255,255,255,.6);margin:0 auto 34px}
.hero-new .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:52px}
.stat-bar{display:flex;justify-content:center;gap:0;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:34px}
.stat-item{padding:0 44px;text-align:center;position:relative}
.stat-item+.stat-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:44px;background:rgba(255,255,255,.16)}
.stat-num{font-size:30px;font-weight:800;color:#fff;line-height:1.1}
.stat-num i{font-style:normal;font-size:18px;font-weight:600;color:#93c5fd;margin-left:2px}
.stat-label{font-size:13px;color:rgba(255,255,255,.62);margin-top:6px}
.trust-grid{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px}
.trust-card{flex:1 1 240px;min-width:220px;background:#fff;border:1px solid #e8ecf1;border-radius:14px;padding:26px 24px;transition:box-shadow .25s,transform .25s}
.trust-card:hover{box-shadow:0 12px 30px rgba(30,64,175,.08);transform:translateY(-3px)}
.trust-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.trust-card h4{font-size:16.5px;color:#111827;margin:0 0 8px}
.trust-card p{font-size:13.5px;color:#64748b;line-height:1.75;margin:0}
.platform-grid{display:flex;gap:24px;flex-wrap:wrap;margin-top:8px}
.platform-card{flex:1 1 420px;min-width:320px;border-radius:18px;padding:34px 30px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.platform-card.idc{background:linear-gradient(160deg,#eff6ff,#eef2ff 60%,#f5f3ff);border:1px solid #dbe7ff}
.platform-card.kvm{background:linear-gradient(160deg,#ecfdf5,#f0fdfa 60%,#eff6ff);border:1px solid #bbf7d0}
.platform-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.platform-ico{width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;flex-shrink:0}
.platform-card.idc .platform-ico{background:linear-gradient(135deg,#2563eb,#3b82f6);box-shadow:0 10px 24px rgba(37,99,235,.28)}
.platform-card.kvm .platform-ico{background:linear-gradient(135deg,#0d9488,#14b8a6);box-shadow:0 10px 24px rgba(13,148,136,.28)}
.platform-name{font-size:22px;font-weight:800;color:#111827}
.platform-tag{font-size:12px;color:#64748b;margin-top:2px}
.platform-desc{font-size:14px;color:#475569;line-height:1.85;margin:0 0 20px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip{font-size:12.5px;color:#334155;background:#fff;border:1px solid #e2e8f0;padding:5px 13px;border-radius:999px}
.platform-card.idc .chip{border-color:#dbe7ff;background:rgba(255,255,255,.8)}
.platform-card.kvm .chip{border-color:#bbf7d0;background:rgba(255,255,255,.8)}
.news-grid{display:flex;gap:24px;flex-wrap:wrap;margin-top:8px}
.news-card{flex:1 1 340px;min-width:300px;background:#fff;border:1px solid #e8ecf1;border-radius:14px;padding:24px}
.news-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.news-head h3{margin:0;font-size:18px;color:#111827;display:inline-flex;align-items:center;gap:8px}
.news-head h3::before{content:'';width:4px;height:18px;border-radius:2px;background:linear-gradient(180deg,#2563eb,#7c3aed);display:inline-block}
.news-link{font-size:13px;color:#2563eb;text-decoration:none;white-space:nowrap}
.news-list{margin-top:10px}
.news-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #f1f5f9}
.news-item:last-child{border-bottom:none}
.news-item a{flex:1;color:#334155;text-decoration:none;font-size:14px;line-height:1.5;transition:color .2s}
.news-item a:hover{color:#2563eb}
.news-item .date{color:#94a3b8;font-size:13px;white-space:nowrap}
.market-duo{display:flex;gap:24px;flex-wrap:wrap}
.market-duo .market-col{flex:1 1 420px;min-width:320px}
.market-item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #f1f5f9}
.market-item:last-child{border-bottom:none}
.market-item .m-name{flex:1;color:#334155;font-size:14.5px;font-weight:600;text-decoration:none}
.market-item .m-name:hover{color:#2563eb}
.market-item .m-desc{color:#94a3b8;font-size:12.5px}
.cta-banner{background:linear-gradient(135deg,#1d4ed8,#6d28d9);border-radius:20px;padding:52px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;top:-120px;right:-80px;width:320px;height:320px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%)}
.cta-banner h2{font-size:28px;margin:0 0 10px;font-weight:800}
.cta-banner p{font-size:15px;color:rgba(255,255,255,.82);margin:0 0 28px}
.cta-banner .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width: 900px){
.hero-new h1{font-size:32px}
.stat-item{padding:0 22px}
.stat-num{font-size:24px}
}
@media (max-width: 640px){
.hero-new{padding:60px 0 54px}
.hero-new h1{font-size:26px}
.hero-new .sub{font-size:15px}
.stat-item{padding:8px 16px}
.stat-item+.stat-item::before{display:none}
.cta-banner{padding:40px 22px}
}