* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --c-dark: #0f2027;
  --c-mid: #203a43;
  --c-blue: #2c5364;
  --c-green: #3d8b7a;
  --c-gold: #c9952f;
  --c-red: #c0392b;
  --c-text: #1a1a2e;
  --c-sub: #3a4a5a;
  --c-light: #778899;
  --c-bg: #eef1f6;
  --c-line: #e4eaf0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.75;
  padding: 24px 14px 64px;
}
.container { max-width: 1080px; margin: 0 auto; }

/* 面包屑 */
.crumb { font-size: 12.5px; color: var(--c-light); margin-bottom: 16px; }
.crumb a { color: var(--c-blue); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb span { margin: 0 6px; color: #aab4bd; }

/* 头部 */
header.hero {
  background: linear-gradient(135deg, #0f2027 0%, #203a43 55%, #2c5364 100%);
  color: #fff;
  padding: 40px 40px 34px;
  border-radius: 18px;
  margin-bottom: 24px;
}
.hero-kicker {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2px;
  background: rgba(201,149,47,.2); border: 1px solid rgba(201,149,47,.55);
  color: #f0c56b; padding: 4px 14px; border-radius: 20px; margin-bottom: 16px;
}
.hero h1 { font-size: 30px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; }
.hero .sub { font-size: 14.5px; color: #a9c4d6; max-width: 720px; }
.hero .tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero .tags span {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  padding: 4px 14px; border-radius: 20px; font-size: 12px; color: #dce9f2;
}

/* 评测维度条 */
.scorebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin: 22px 0 0; }
.scorebar .dim {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 12px 16px;
}
.scorebar .dim .n { font-size: 20px; font-weight: 800; color: #f0c56b; }
.scorebar .dim .l { font-size: 12px; color: #a9c4d6; }

/* 更新信息 */
.update-note {
  background: #fff; border-radius: 12px; padding: 12px 20px; margin-bottom: 22px;
  font-size: 13px; color: var(--c-sub); display: flex; flex-wrap: wrap; gap: 8px 22px;
  border-left: 4px solid var(--c-green);
}
.update-note b { color: var(--c-blue); }

/* 排行榜 */
.rank-list { counter-reset: rank; }
.rank-item {
  counter-increment: rank;
  background: #fff; border-radius: 16px; margin-bottom: 22px;
  border: 1px solid var(--c-line);
  overflow: hidden;
  position: relative;
}
.rank-item::before {
  content: counter(rank);
  position: absolute; top: 18px; left: 18px;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  background: var(--c-blue);
}
.rank-item.top::before { background: var(--c-gold); }
.rank-head { padding: 22px 22px 14px 78px; border-bottom: 1px solid var(--c-line); background: #fbfcfe; }
.rank-head h2 { font-size: 19px; font-weight: 800; color: var(--c-dark); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rank-head .badge {
  font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 8px; color: #fff;
}
.badge.gold { background: var(--c-gold); }
.badge.blue { background: var(--c-blue); }
.badge.green { background: var(--c-green); }
.rank-head .slogan { font-size: 13px; color: var(--c-light); margin-top: 4px; }
.rank-body { padding: 20px 24px 24px; }
.rank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 12px; margin-bottom: 16px; }
.rank-grid .cell {
  background: #f6f9fc; border-radius: 10px; padding: 12px 16px;
}
.rank-grid .cell .k { font-size: 11.5px; color: var(--c-light); }
.rank-grid .cell .v { font-size: 16px; font-weight: 800; color: var(--c-dark); margin-top: 2px; }
.rank-grid .cell .v small { font-size: 11px; font-weight: 400; color: var(--c-light); }
.rank-grid .cell.total .v { color: var(--c-gold); }
.rank-desc { font-size: 14px; color: var(--c-sub); margin-bottom: 14px; }
.rank-desc b { color: var(--c-dark); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.pros-cons .box { border-radius: 10px; padding: 14px 18px; font-size: 13.5px; }
.pros-cons .pros { background: #eef8f3; border-left: 4px solid var(--c-green); }
.pros-cons .cons { background: #fdf1ef; border-left: 4px solid var(--c-red); }
.pros-cons h3 { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.pros-cons .pros h3 { color: #1e7a4d; }
.pros-cons .cons h3 { color: #a33; }
.pros-cons ul { list-style: none; }
.pros-cons li { padding: 3px 0 3px 18px; position: relative; color: var(--c-sub); }
.pros-cons li::before { content: "✓"; position: absolute; left: 0; color: var(--c-green); font-weight: 700; }
.pros-cons .cons li::before { content: "✗"; color: var(--c-red); }
.rank-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* 优化：移动端按钮最小 44px 触控高度 */
.rank-cta a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  text-decoration: none; font-size: 14px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--c-mid), var(--c-blue));
  padding: 10px 28px; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(44,83,100,.25);
}
.rank-cta a.btn:hover { filter: brightness(1.12); }
.rank-cta .kw { font-size: 12px; color: var(--c-light); }

/* 评测说明 */
.method { background: #fff; border-radius: 16px; padding: 28px 32px; margin-bottom: 24px; border: 1px solid var(--c-line); }
.method h2 { font-size: 18px; font-weight: 800; color: var(--c-dark); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 3px solid #e8eef4; }
.method p { font-size: 14px; color: var(--c-sub); margin-bottom: 12px; }
.weight-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.weight-table th, .weight-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #eaeff4; }
.weight-table th { background: #f6f9fc; color: var(--c-blue); font-size: 13px; }
.weight-table td b { color: var(--c-dark); }
.bar { height: 8px; background: #e8eef4; border-radius: 6px; overflow: hidden; width: 140px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-blue), var(--c-green)); border-radius: 6px; }

/* 常见问题 */
.faq { background: #fff; border-radius: 16px; padding: 28px 32px; margin-bottom: 24px; border: 1px solid var(--c-line); }
.faq h2 { font-size: 18px; font-weight: 800; color: var(--c-dark); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 3px solid #e8eef4; }
.faq details { border-bottom: 1px solid #edf1f5; padding: 4px 0; }
.faq details:last-child { border-bottom: none; }
.faq summary {
  list-style: none; cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--c-dark);
  padding: 12px 6px; display: flex; align-items: baseline; gap: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--c-blue); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.faq details p { font-size: 13.5px; color: var(--c-sub); padding: 0 6px 14px 30px; }
.faq details p a { color: var(--c-blue); }

/* 相关推荐 */
.related { background: #fff; border-radius: 16px; padding: 28px 32px; margin-bottom: 24px; border: 1px solid var(--c-line); }
.related h2 { font-size: 18px; font-weight: 800; color: var(--c-dark); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 3px solid #e8eef4; }
.related .links { display: flex; flex-wrap: wrap; gap: 10px; }
.related .links a {
  text-decoration: none; font-size: 13px; color: var(--c-blue);
  background: #eef4fb; border: 1px solid #d4e2f0; padding: 7px 16px; border-radius: 20px;
  min-height: 36px; display: inline-flex; align-items: center;
}
.related .links a:hover { background: var(--c-blue); color: #fff; }

/* 页脚 */
footer {
  background: var(--c-dark); color: #8ba3b5; border-radius: 14px;
  padding: 26px 34px; font-size: 12.5px; line-height: 2;
}
footer b { color: #cfe0eb; }
footer a { color: #9fc0d5; text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  body { padding: 14px 10px 48px; }
  header.hero { padding: 26px 20px; }
  .hero h1 { font-size: 21px; }
  .pros-cons { grid-template-columns: 1fr; }
  .rank-body { padding: 16px; }
  .rank-head { padding-left: 74px; }
  .method, .faq, .related { padding: 20px 16px; }
  .bar { width: 100px; }
}

    /* 核心容器：.frindlink —— 保持原有类名，完全自适应 */
    .frindlink {
      display: flex;
      flex-wrap: wrap;           /* 允许换行，是自适应关键 */
      justify-content: center;   /* 移动端/小屏时水平居中 */
      align-items: center;
      gap: 1rem 1.25rem;        /* 行间距和列间距，现代浏览器支持良好 */
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
      padding: 0.5rem 0;
      list-style: none;          /* 移除默认列表样式 */
    }

    /* 每个 li 项目 —— 弹性尺寸，保持卡片可点击区域舒适 */
    .frindlink li {
      list-style: none;
      flex: 0 1 auto;            /* 不强制占满，根据内容宽度自适应 */
      min-width: 0;              /* 防止内容溢出 */
      /* 小屏上如果一行放不下两个，会自动换行 */
    }

    /* 链接卡片 —— 基础样式 + 自适应边距 */
    .link-card {
      display: inline-block;     /* 让 padding 和宽高正常工作 */
      padding: 0.75rem 1.75rem;
      background: #ffffff;
      color: #1e3c72;
      font-size: 1rem;
      font-weight: 500;
      text-decoration: none;
      border-radius: 60px;       /* 全圆角胶囊样式，更现代 */
      box-shadow: 0 6px 16px rgba(0, 20, 50, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.7);
      transition: all 0.2s ease-in-out;
      white-space: nowrap;       /* 保证文字不换行，卡片宽度适应文本 */
      letter-spacing: 0.3px;
      line-height: 1.4;
      text-align: center;
      /* 加上悬停和触摸反馈 */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    /* 悬停 / 聚焦效果 (桌面端) */
    .link-card:hover,
    .link-card:focus-visible {
      background: #1e3c72;
      color: #ffffff;
      box-shadow: 0 12px 22px rgba(30, 60, 114, 0.25);
      border-color: #1e3c72;
      transform: translateY(-2px);
      outline: none;
    }

    /* 让键盘导航更友好 */
    .link-card:focus-visible {
      outline: 2px solid #4a6fa5;
      outline-offset: 2px;
    }

    /* 针对触摸设备优化点击反馈 */
    .link-card:active {
      transform: scale(0.97);
      background: #132b4a;
      color: #ffffff;
    }

    /* 小屏手机适配：稍微减小内边距，保证卡片不至于太大 */
    @media (max-width: 480px) {
      .frindlink {
        gap: 0.85rem 1rem;      /* 小屏间距略缩小 */
      }

      .link-card {
        padding: 0.65rem 1.35rem;
        font-size: 0.95rem;
        white-space: normal;     /* 如果屏幕极窄允许换行，防止溢出 */
        word-break: break-word;  /* 超长文本(罕见)可断行 */
        line-height: 1.3;
      }
    }

    /* 如果真的是极窄屏幕（比如低于280px），还可以再优化 */
    @media (max-width: 280px) {
      .frindlink {
        flex-direction: column;
        align-items: stretch;
      }

      .link-card {
        display: block;
        width: 100%;
        white-space: normal;
        text-align: center;
      }
    }
	
	  /* 悬浮购买按钮样式 - 底部居中 */
  .floating-buy-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    animation: pulse-glow 2s infinite;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }

  .floating-buy-btn:hover {
    transform: translateX(-50%) translateY(-3px) scale(1.05);
    box-shadow: 0 12px 35px rgba(255, 107, 53, 0.7);
    background: linear-gradient(135deg, #ff7b45, #f9a32e);
  }

  .floating-buy-btn:active {
    transform: translateX(-50%) translateY(-1px) scale(1.02);
  }

  .floating-buy-btn .icon {
    font-size: 22px;
    line-height: 1;
  }

  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5);
    }
    50% {
      box-shadow: 0 8px 35px rgba(255, 107, 53, 0.85), 0 0 25px rgba(255, 107, 53, 0.3);
    }
  }

  /* 移动端适配 */
  @media (max-width: 768px) {
    .floating-buy-btn {
      bottom: 20px;
      padding: 12px 22px;
      font-size: 16px;
      border-radius: 40px;
    }
    .floating-buy-btn .icon {
      font-size: 18px;
    }
  }

  @media (max-width: 380px) {
    .floating-buy-btn {
      bottom: 14px;
      padding: 10px 18px;
      font-size: 14px;
    }
  }

  /* 防止按钮遮挡页脚内容 */
  body {
    padding-bottom: 90px;
  }

  @media (max-width: 768px) {
    body {
      padding-bottom: 80px;
    }
  }