.claw-page { background: #eaf5ff; padding-bottom: 40px; color: #181818; font-family: "PingFang SC","Microsoft YaHei",Arial,sans-serif; }
/*.claw-wrap { width: min(1280px, calc(100% - 32px)); margin: 0 auto; }*/
.claw-wrap { width: min(1540px, calc(100% - 32px)); margin: 0 auto; }
.claw-hero-wrap { padding-top: 0; }
.claw-hero { display: block; position: relative; }
.claw-hero img { width: 100%; display: block; }
.claw-hero-query-btn {
  position: absolute;
  left: 70px;
  top: 219px;
  height: 50px;
  line-height: 50px;
  padding: 0 60px;
  border-radius: 6px;
  background: #1366ec;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.claw-hero-query-btn:hover{text-decoration: none; color: #fff; opacity: .9;}

.claw-tabs { display: flex; background: #fff; height: 52px; }
.claw-tab { flex: 1; color: #181818; text-decoration: none; font-size: 14px; line-height: 52px; text-align: center; border-bottom: 3px solid transparent; transition: all .2s; }
.claw-tab:hover {text-decoration: none; }
.claw-tab.is-active { color: #1366ec; border-bottom-color: #1366ec; font-weight: 600;  text-decoration: none;}
.claw-tabs.claw-tabs-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.claw-tabs-placeholder {
  display: none;
  height: 52px;
}

.claw-section { padding-top: 40px; }
.claw-section-title { margin-bottom: 20px; text-align: center; font-size: 34px; line-height: 1.2; font-weight: 600; }
.claw-section-sub { margin: 0 auto 20px; text-align: center; font-size: 14px; line-height: 1.6; color: #181818; }

.claw-card-panel { background: #e8f3ff; border-radius: 14px; padding: 18px; box-shadow: 0 4px 20px #002e781a;}
.claw-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 25px; }
.claw-card { display: block; text-decoration: none; background: #fff; border-radius: 8px; padding: 12px; background-image: url("../images/claw-card-bg.png"); background-repeat: no-repeat; background-position: right bottom; background-size: contain; border: 1px solid #edf2f8;  text-align: center;}
.claw-card:hover { box-shadow: 0 6px 18px rgba(19,102,236,.12); transform: translateY(-1px); text-decoration: none;}
.claw-card-name { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 500; color: #141414; }
.claw-card-name b { font-weight: 600; background: linear-gradient(32.72deg, #387aff 0, #ff8ea0 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.claw-card-desc { margin: 4px 0 0; font-size: 12px; line-height: 1.3; color: #7e8794; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.claw-actions { margin-top: 30px; text-align: center; }
.claw-refresh { border: 1px solid #d6e3f2; background: #fff; color: #3e5d87; border-radius: 6px; height: 32px; padding: 0 18px; font-size: 13px; cursor: pointer;  font-size: 16px;}
.claw-refresh:hover { color: #1366ec; border-color: #bcd5f2; }
.claw-refresh.is-rotating { transform: rotate(360deg); transition: transform .45s ease; }

.suffix-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.suffix-card { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 14px; min-height: 116px; }
.suffix-img { width: 78px; height: 78px; object-fit: contain; border-radius: 10px; }
.suffix-title { margin: 0; font-size: 22px; line-height: 1.1; font-weight: 500; color: #3d3d3d; }
.suffix-desc { margin: 6px 0 10px; font-size: 12px; line-height: 1.4; color: #8c8c8c; }
.suffix-btn { font-size: 14px; color: #1366ec; text-decoration: none; }
.suffix-btn:hover { text-decoration: underline; }
.claw-more-link { text-align: center; margin-top: 20px; }
.claw-more-link a { color: #1366ec; text-decoration: none; font-size: 13px; }

.guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.guide-card { text-decoration: none; color: #181818; background: #fff; padding: 20px; border-radius: 2px; border: 1px solid #e9e9e9;}
.guide-card:hover { text-decoration: none; }
.guide-title { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; }
.guide-desc { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: #8c8c8c; }

@media (max-width: 1024px) {
  .claw-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 768px) {
  .claw-wrap { width: calc(100% - 10px); }
  .claw-hero-query-btn {
    left: 10.33vw;
    top: 50vw;
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    font-size: 14px;
    border-radius: 6px;
  }
  .claw-tabs { height: 44px; overflow-x: auto; white-space: nowrap; }
  .claw-tabs-placeholder { height: 44px; }
  .claw-tab { flex: none; min-width: 25%; padding: 0 8px; line-height: 44px; font-size: 12px; }
  .claw-section { padding-top: 20px; }
  .claw-section-title { font-size: 24px; }
  .claw-section-sub { margin: 12px auto 16px; font-size: 13px; }
  .claw-card-panel { padding: 10px; border-radius: 10px; }
  .claw-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .claw-card { border-radius: 6px; padding: 8px; }
  .claw-card-name { font-size: 16px; }
  .claw-card-desc { font-size: 11px; }
  .suffix-grid, .guide-grid { grid-template-columns: 1fr; gap: 10px; }
  .suffix-card { min-height: 98px; padding: 10px; }
  .suffix-img { width: 60px; height: 60px; }
  .suffix-title { font-size: 18px; }
}