.aoliao-cold-stats {
  margin: 8px 0 12px;
  padding: 3px;
  border: 3px solid #ef5043;
  background: #f3f5fa;
  color: #20263a;
  font: 14px/1.4 "Microsoft YaHei", "PingFang SC", sans-serif;
  scroll-margin-top: 8px;
}

.aoliao-cold-stats .cold-banner {
  padding: 5px 6px;
  border-radius: 18px;
  background: #3157d5 linear-gradient(120deg, #1c3389, #335ad4 58%, #7054de);
  color: #fff;
  text-align: center;
}

.aoliao-cold-stats .cold-banner h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(23px, 5vw, 30px);
  line-height: 1.35;
  letter-spacing: 2px;
}

.aoliao-cold-stats .cold-banner p { margin: 0; color: #f4f6ff; font-size: 12px; }
.aoliao-cold-stats .summary { display: inline-block; margin-top: 3px; padding: 1px 9px; border: 1px solid #8497e8; border-radius: 20px; background: #425cc0; white-space: nowrap; }
.aoliao-cold-stats .summary b { color: #ffe675; font-size: 16px; }
.aoliao-cold-stats .cold-section { margin-top: 5px; padding: 5px; background: #fff; border: 1px solid #e1e5f1; border-radius: 14px; }
.aoliao-cold-stats .cold-section > header { display: flex; align-items: center; flex-wrap: wrap; padding: 2px 3px 5px; border-bottom: 1px solid #e7eaf2; }
.aoliao-cold-stats .badge { padding: 3px 9px; margin-right: 6px; border-radius: 8px; color: #fff; background: #425acb linear-gradient(120deg, #3157d5, #7158dc); font-weight: 700; }
.aoliao-cold-stats h3 { margin: 0; color: #202943; font-size: 15px; }
.aoliao-cold-stats .note { margin-left: auto; padding-left: 4px; color: #54617c; font-size: 11px; }
.aoliao-cold-stats .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.aoliao-cold-stats .number-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aoliao-cold-stats .rank-card, .aoliao-cold-stats .flat-card, .aoliao-cold-stats .group-card { border: 1px solid #e2e6f1; border-radius: 12px; background: #fff; }
.aoliao-cold-stats .rank-card { display: flex; align-items: center; padding: 5px; }
.aoliao-cold-stats .number-card { background: #fff7f7; }
.aoliao-cold-stats .ball, .aoliao-cold-stats .zodiac { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; margin-right: 6px; color: #fff; font-size: 17px; }
.aoliao-cold-stats .ball { border: 2px solid #fff; border-radius: 50%; background: #dc3441 linear-gradient(145deg, #fc6570, #cf192b); }
.aoliao-cold-stats .zodiac { border-radius: 10px; background: #4059ca linear-gradient(125deg, #3157d5, #7054de); }
.aoliao-cold-stats .rank-card strong, .aoliao-cold-stats .rank-card small { display: block; }
.aoliao-cold-stats .rank-card small { color: #626d84; font-size: 11px; }
.aoliao-cold-stats .number-gap { color: #991b2b; }
.aoliao-cold-stats .special-zodiac-gap { color: #17469e; }
.aoliao-cold-stats .flat-zodiac-gap, .aoliao-cold-stats .combined-gap { font-size: 14px; }
.aoliao-cold-stats .flat-zodiac-gap { color: #10603c; }
.aoliao-cold-stats .combined-gap { color: #682781; }
.aoliao-cold-stats .flat-card { padding: 5px; }
.aoliao-cold-stats .flat-title, .aoliao-cold-stats .counts, .aoliao-cold-stats .group-row { display: flex; align-items: center; justify-content: space-between; }
.aoliao-cold-stats .flat-title > b { color: #3852b8; font-size: 18px; }
.aoliao-cold-stats .flat-title strong { font-size: 12px; }
.aoliao-cold-stats .counts span { flex: 1; margin: 4px 1px 0; padding: 2px 0; border-radius: 6px; background: #f1f3fa; color: #5e6880; text-align: center; font-size: 10px; }
.aoliao-cold-stats .counts b { display: block; color: #28354d; font-size: 15px; }
.aoliao-cold-stats .group-card { overflow: hidden; }
.aoliao-cold-stats .group-card h4 { margin: 0; padding: 4px 8px; background: #edf0fe; color: #354895; font-size: 14px; }
.aoliao-cold-stats .group-row { padding: 4px 7px; border-top: 1px solid #edf0f5; }
.aoliao-cold-stats .group-row > b { margin-right: 5px; }
.aoliao-cold-stats .group-row span { color: #52617a; font-size: 11px; }
.aoliao-cold-stats .notice { margin: 0; padding: 8px; text-align: center; color: #56627a; }
.aoliao-cold-stats .notice button { padding: 2px 8px; border: 1px solid #6679c7; border-radius: 5px; color: #334a99; background: #fff; cursor: pointer; font: inherit; }

@media (max-width: 440px) {
  .aoliao-cold-stats .number-card { flex-direction: column; text-align: center; }
  .aoliao-cold-stats .number-card .ball { margin: 0 0 2px; }
}

@media (max-width: 420px) {
  .aoliao-cold-stats .combined { grid-template-columns: 1fr; }
}