/* 一体机同款：服务器卡片 + 排行榜桌面/移动双布局 */

.server-compact-overview {
  position: relative;
  height: 184px;
  min-width: 0;
  margin: 0 -10px;
  overflow: hidden;
  background: #e9eef5;
  border-bottom: 1px solid rgba(74, 144, 226, 0.18);
}

.server-compact-overview.no-thumb::before {
  content: "暂无地图预览";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
  background: linear-gradient(135deg, #edf4fb 0%, #dfeaf5 100%);
}

.server-map-thumb {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #f8f9fa;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.server-map-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.server-map-summary {
  min-width: 0;
  padding: 1px 2px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
  gap: 3px 8px;
  background: #fff;
}

.server-map-summary span {
  grid-column: 1 / -1;
  color: #7b8796;
  font-size: 10px;
  font-weight: 850;
}

.server-map-summary b {
  min-width: 0;
  color: #17263a;
  font-size: 16px;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-map-summary small {
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  background: #278ccc;
  font-size: 10px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.server-metric {
  min-width: 0;
  padding: 8px 4px;
  border-radius: 6px;
  background: #f5f8fb;
  border: 1px solid #edf2f7;
  text-align: center;
}

.server-metric span {
  display: block;
  color: #7f8c8d;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.15;
}

.server-metric b {
  display: block;
  margin-top: 2px;
  color: #2c3e50;
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-metric .score-display {
  color: #3498db;
  font-size: 12px;
  letter-spacing: 0;
}

.server-player-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 34px;
  border-radius: 7px;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  box-shadow: 0 2px 10px rgba(243, 156, 18, 0.25);
  width: 100%;
  font-size: 12px;
}

.server-card .server-details {
  padding: 0 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  flex: 1;
  min-height: 0;
}

.server-card .server-header {
  justify-content: center;
  padding: 10px 14px !important;
  gap: 8px !important;
}

@media (min-width: 721px) {
  .server-card .server-header { min-height: 56px; }
}

.server-number-display {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  font-variant-numeric: tabular-nums;
}

.server-card .server-name {
  flex: 1;
  min-width: 0;
  font-size: 13px !important;
  font-weight: bold;
  color: #fff !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.server-card .server-status {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.server-player-btn {
  min-height: 34px !important;
  font-size: 12px !important;
}

/* ===== Rank desktop / mobile ===== */
.rank {
  width: 100%;
  max-width: 1400px;
  background-color: var(--card-bg, #fff);
  margin: auto;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(74, 144, 226, 0.2);
}

.rank-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px;
  background: rgba(74, 144, 226, 0.05);
  border-radius: 10px;
  margin-bottom: 20px;
  align-items: center;
  border: 1px solid rgba(74, 144, 226, 0.16);
}

.rank-controls button {
  background: linear-gradient(135deg, #4a90e2 0%, #e74c3c 100%);
  border: none;
  color: #fff;
  padding: 12px 25px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
}

.rank-controls select {
  background: #fff;
  border: 1px solid #4a90e2;
  color: #2c3e50;
  padding: 12px 15px;
  border-radius: 25px;
  outline: none;
  cursor: pointer;
}

.rank-sort-mobile {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 14px;
  border-radius: 14px;
  border: 2px solid rgba(243, 156, 18, 0.55);
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.16) 0%, rgba(230, 126, 34, 0.1) 50%, rgba(74, 144, 226, 0.08) 100%);
  box-sizing: border-box;
}

.rank-sort-mobile-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rank-sort-mobile-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-sort-mobile-copy strong {
  display: block;
  font-size: 16px;
  font-weight: 950;
  color: #d35400;
}

.rank-sort-mobile-copy span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.rank-sort-mobile-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.rank-sort-chip {
  width: 100%;
  border: 2px solid rgba(74, 144, 226, 0.35);
  background: #fff;
  color: #2c3e50;
  padding: 10px 8px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  position: relative;
}

.rank-sort-chip.active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.rank-sort-chip.active.asc::after,
.rank-sort-chip.active.desc::after {
  content: "↓";
  margin-left: 4px;
  font-weight: 900;
}

.rank-sort-chip.active.asc::after {
  content: "↑";
}

.rank-scroll {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.rank-table {
  min-width: 1240px;
}

/* 仅作用于首页排行榜容器，避免污染 /user /census 等页 */
.rank-header,
.rank-table .rank_list {
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  border-radius: 10px;
}

.rank-header {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.2) 0%, rgba(52, 152, 219, 0.2) 100%);
  padding: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  border: 2px solid #4a90e2;
}

.rank-table .rank_list {
  background: rgba(74, 144, 226, 0.05);
  padding: 6px 10px;
  margin-bottom: 4px;
  border: 1px solid rgba(74, 144, 226, 0.3);
}

.rank-table .rank_no,
.rank-header .rank_no {
  width: 60px;
  min-width: 60px;
  padding: 2px;
  font-weight: bold;
  color: var(--gold, #d4ac0d);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-table .rank_detail_head,
.rank-header .rank_detail_head {
  width: 80px;
  min-width: 80px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-table .rank_detail_head img,
.rank-header .rank_detail_head img,
.rank-avatar-shell img {
  width: 40px;
  height: 40px;
  border-radius: 12%;
  border: 2px solid #4a90e2;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(74, 144, 226, 0.3);
}

.rank-avatar-shell {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rank-table .rank_detail,
.rank-header .rank_detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 300px;
  min-width: 240px;
  padding: 2px 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  color: var(--text-primary, #2c3e50);
}

.rank-table .rank_detail_kda,
.rank-header .rank_detail_kda {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 80px;
  min-width: 80px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary, #2c3e50);
}

.rank-row > .rank_detail_kda.rank-kda-val {
  color: #dc2626 !important;
  font-weight: 700;
}

.rank-mobile-stats {
  display: none;
}

.rank-name-text {
  display: block;
  flex: 0 0 180px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  line-height: 28px;
}

/* 桌面：名字在左、军衔在右同一行对齐 */
.rank-mobile-mr {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.rank-mobile-mr .mr-hours {
  display: none;
}
.rank-header .rank_detail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 14px;
}

.rank-row.rank-1 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.26) 0%, rgba(255, 248, 220, 0.42) 100%) !important;
  border: 3px solid var(--gold, #d4ac0d);
  min-height: 92px;
  box-shadow: 0 8px 26px rgba(214, 137, 16, 0.22);
}

.rank-row.rank-2 {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.24) 0%, rgba(248, 250, 252, 0.5) 100%) !important;
  border: 3px solid #c0c0c0;
  min-height: 84px;
}

.rank-row.rank-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.24) 0%, rgba(255, 247, 237, 0.5) 100%) !important;
  border: 3px solid #cd7f32;
  min-height: 84px;
}

.rank-row.rank-1 .rank_no { font-size: 48px; }
.rank-row.rank-2 .rank_no,
.rank-row.rank-3 .rank_no { font-size: 42px; }
.rank-row.rank-1 .rank_detail_head img { width: 72px; height: 72px; }
.rank-row.rank-2 .rank_detail_head img,
.rank-row.rank-3 .rank_detail_head img { width: 66px; height: 66px; }
.rank-row.rank-1 .rank_detail { font-size: 21px; font-weight: 950; color: #d35400; }
.rank-row.rank-2 .rank_detail { font-size: 19px; font-weight: 950; color: #64748b; }
.rank-row.rank-3 .rank_detail { font-size: 19px; font-weight: 950; color: #a0522d; }

/* Tablet / mid width: card layout */
@media (min-width: 769px) and (max-width: 1280px) {
  .rank { padding: 20px; max-width: 100%; overflow: hidden; }
  .rank-scroll { overflow-x: hidden; padding-bottom: 0; }
  .rank-table { min-width: 0; width: 100%; }
  .rank-header { display: none !important; }
  .rank-sort-mobile { display: flex !important; }
  .rank-row {
    display: grid !important;
    grid-template-columns: 58px 70px minmax(0, 1fr) !important;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 14px;
  }
  .rank-row > .rank_no {
    grid-column: 1;
    grid-row: 1;
    width: 52px;
    min-width: 0;
    height: 52px;
    padding: 0;
    border-radius: 13px;
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.28);
    font-size: 22px;
    align-self: start;
  }
  .rank-row > .rank_detail_head {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    padding: 0;
    align-self: start;
  }
  .rank-row > .rank_detail_head img { width: 64px; height: 64px; }
  .rank-row > .rank_detail {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    flex: none;
    padding: 0 !important;
    justify-content: flex-start !important;
    text-align: left;
    font-size: 16px;
  }
  .rank-name-text {
    display: flex;
    align-items: center;
    width: auto;
    max-width: 60%;
    text-align: left;
    font-size: 17px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rank-row > .rank_detail {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0 !important;
  }
  .rank-mobile-mr {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex: 0 1 auto;
    gap: 6px;
    margin-left: 0 !important;
    min-width: 0;
  }
  .rank-mobile-mr .mr-badge {
    font-size: 15px !important;
    padding: 0 8px !important;
    width: 5.5em;
    height: 26px;
    border-radius: 4px !important;
  }
  .rank-mobile-mr .mr-hours {
    display: inline !important;
    font-size: 14px;
    font-weight: 850;
    color: #64748b;
    white-space: nowrap;
  }
  .rank-mobile-stats-playtime {
    display: none !important;
  }
  .rank-row > .rank_detail_kda { display: none; }
  .rank-mobile-stats {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .rank-mobile-stats span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 8px 4px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid rgba(74, 144, 226, 0.14);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rank-mobile-stats span.sort-active {
    border-color: #f39c12;
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.18) 0%, rgba(230, 126, 34, 0.12) 100%);
    box-shadow: 0 0 0 1px rgba(243, 156, 18, 0.25);
  }
  .rank-mobile-stats b {
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
  }
  .rank-mobile-stats strong {
    color: #2c3e50;
    font-size: 13px;
    font-weight: 950;
  }
  .rank-mobile-stats .score strong { color: #d68910; font-size: 14px; }
  .rank-mobile-stats .kda strong { color: #dc2626; font-size: 14px; }
}

/* Phone */
@media (max-width: 768px) {
  .rank { padding: 12px; }
  .rank-scroll { overflow-x: hidden; }
  .rank-table { min-width: 0; width: 100%; }
  .rank-header { display: none !important; }
  .rank-sort-mobile { display: flex !important; }
  .server-compact-overview { height: 160px; }
  .server-section-title { font-size: 22px !important; }
  .rank-row {
    display: grid !important;
    grid-template-columns: 44px 52px minmax(0, 1fr) !important;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 14px;
  }
  .rank-row > .rank_no {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    min-width: 0;
    height: 40px;
    font-size: 18px;
    border-radius: 12px;
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.28);
    align-self: start;
  }
  .rank-row > .rank_detail_head {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    padding: 0;
  }
  .rank-row > .rank_detail_head img { width: 48px !important; height: 48px !important; }
  .rank-row > .rank_detail {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    flex: none;
    justify-content: flex-start !important;
    text-align: left;
    font-size: 15px;
    padding: 0 !important;
  }
  .rank-name-text {
    display: flex;
    align-items: center;
    width: auto;
    max-width: 55%;
    text-align: left;
    font-size: 15px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rank-row > .rank_detail {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0 !important;
  }
  .rank-mobile-mr {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex: 0 1 auto;
    gap: 5px;
    margin-left: 0 !important;
    min-width: 0;
  }
  .rank-mobile-mr .mr-badge {
    font-size: 14px !important;
    padding: 0 7px !important;
    width: 5em;
    height: 24px;
    border-radius: 4px !important;
    font-weight: 900 !important;
  }
  .rank-mobile-mr .mr-hours {
    display: inline !important;
    font-size: 13px;
    font-weight: 850;
    color: #64748b;
    white-space: nowrap;
  }
  .rank-mobile-stats-playtime {
    display: none !important;
  }
  .rank-row > .rank_detail_kda { display: none !important; }
  .rank-mobile-stats {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }
  .rank-mobile-stats span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(74, 144, 226, 0.16);
    cursor: pointer;
  }
  .rank-mobile-stats span.sort-active {
    border-color: #f39c12;
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.2) 0%, rgba(230, 126, 34, 0.14) 100%);
  }
  .rank-mobile-stats b { color: #64748b; font-size: 10px; font-weight: 900; }
  .rank-mobile-stats strong { color: #2c3e50; font-size: 12px; font-weight: 950; }
  .rank-mobile-stats .score strong { color: #d68910; }
  .rank-mobile-stats .kda strong { color: #dc2626; }
  .rank-row.rank-1,
  .rank-row.rank-2,
  .rank-row.rank-3 { min-height: 0; }
  .rank-row.rank-1 .rank_no { width: 44px; height: 44px; font-size: 22px; }
  .rank-row.rank-1 .rank_detail_head img { width: 52px !important; height: 52px !important; }
}

@media (max-width: 480px) {
  .rank-row { grid-template-columns: 36px 40px minmax(0, 1fr) !important; gap: 7px; padding: 8px; }
  .rank-row > .rank_no { width: 32px; height: 32px; font-size: 12px; }
  .rank-row > .rank_detail_head img { width: 36px !important; height: 36px !important; }
  .rank-name-text { font-size: 14px; max-width: min(52%, 9em); }
  .rank-mobile-mr .mr-badge {
    font-size: 12px !important;
    padding: 0 8px !important;
    height: 22px;
    border-radius: 4px !important;
  }
  .rank-mobile-mr .mr-hours { font-size: 11px; }
  .rank-mobile-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .rank-mobile-stats b { font-size: 9px; }
  .rank-mobile-stats strong { font-size: 11px; }
  .rank-sort-mobile-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .rank-sort-chip { font-size: 11px; padding: 8px 4px; }
}

html[data-theme-resolved="dark"] .rank-sort-chip {
  background: #1c232c;
  color: #e8eef5;
  border-color: rgba(255,255,255,0.14);
}
html[data-theme-resolved="dark"] .rank-sort-chip.active {
  color: #fff;
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  border-color: transparent;
}
html[data-theme-resolved="dark"] .rank-sort-mobile-copy span { color: #9aa7b5; }

/* Dark theme overrides */
html[data-theme-resolved="dark"] .server-compact-overview {
  background: #10151a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme-resolved="dark"] .server-compact-overview.no-thumb::before {
  background: linear-gradient(135deg, #14191f 0%, #1a2027 100%);
  color: #9ca8b5;
}
html[data-theme-resolved="dark"] .server-map-summary,
html[data-theme-resolved="dark"] .server-metric,
html[data-theme-resolved="dark"] .rank-mobile-stats span {
  background: #1a2027 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #d8dee7 !important;
}
html[data-theme-resolved="dark"] .server-map-summary b,
html[data-theme-resolved="dark"] .server-metric b,
html[data-theme-resolved="dark"] .rank-mobile-stats strong {
  color: #f4f7fa !important;
}
html[data-theme-resolved="dark"] .server-map-summary span,
html[data-theme-resolved="dark"] .server-metric span,
html[data-theme-resolved="dark"] .rank-mobile-stats b {
  color: #9ca8b5 !important;
}

/* 深色：军衔色阶（覆盖 mobile strong 的统一浅色） */
html[data-theme-resolved="dark"] .rank_detail_kda.rank_playtime {
  color: inherit !important;
}
html[data-theme-resolved="dark"] .mr-tone-rookie .mr-badge {
  color: #94a3b8 !important;
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme-resolved="dark"] .mr-tone-low .mr-badge {
  color: #5eead4 !important;
  background: #134e4a !important;
  border-color: #0f766e !important;
}
html[data-theme-resolved="dark"] .mr-tone-mid .mr-badge {
  color: #93c5fd !important;
  background: #1e3a5f !important;
  border-color: #3b82f6 !important;
}
html[data-theme-resolved="dark"] .mr-tone-high .mr-badge {
  color: #fdba74 !important;
  background: #5c3d16 !important;
  border-color: #d97706 !important;
}
html[data-theme-resolved="dark"] .mr-tone-elite .mr-badge {
  color: #fff7ed !important;
  background: linear-gradient(135deg, #92400e 0%, #b45309 50%, #c2410c 100%) !important;
  border-color: #f59e0b !important;
}
html[data-theme-resolved="dark"] .rank-mobile-mr .mr-hours {
  color: #9ca8b5 !important;
}

/* 首页签到 / 积分入口（对齐一体机） */
.home-flash {
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 14px;
  font-weight: 700;
  text-align: center;
}
.home-flash.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.home-flash.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.points-entry-guide {
  margin: 0 0 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 3px solid #f39c12;
  background: linear-gradient(135deg, #fff3cd 0%, #fffaf0 48%, #eef6ff 100%);
  color: #475569;
  line-height: 1.6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  box-shadow: 0 8px 28px rgba(243, 156, 18, 0.26);
}
.points-entry-copy { display: grid; gap: 4px; min-width: 0; }
.points-entry-kicker { color: #d35400; font-size: 13px; font-weight: 950; letter-spacing: 0.5px; }
.points-entry-title { color: #b45309; font-size: 24px; line-height: 1.2; font-weight: 950; }
.points-entry-desc { color: #475569; font-size: 14px; font-weight: 850; }
.points-entry-bonus { margin-top: 4px; color: #0f766e; font-size: 13px; font-weight: 950; line-height: 1.45; }
.points-entry-bonus b,
.points-entry-guide b { color: #d68910; font-weight: 950; }
.points-entry-guide > a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 12px;
  color: #fff !important;
  text-decoration: none;
  font-size: 17px;
  font-weight: 950;
  white-space: nowrap;
  background: linear-gradient(135deg, #d4ac0d 0%, #f39c12 100%);
  box-shadow: 0 5px 18px rgba(212, 172, 13, 0.34);
}
.points-entry-cta-muted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
  background: linear-gradient(135deg, #94a3b8 0%, #7f8c8d 100%);
}
.home-checkin-form { margin: 0; }
.home-checkin-btn {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #16a085 0%, #27ae60 100%);
  box-shadow: 0 4px 16px rgba(22, 160, 133, 0.25);
  font-family: inherit;
  font-size: 18px;
  font-weight: 950;
}
.home-checkin-btn:disabled {
  cursor: not-allowed;
  background: #94a3b8;
  box-shadow: none;
}

.home-checkin-panel {
  display: grid;
  grid-template-columns: minmax(250px, 0.35fr) minmax(0, 0.65fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 20px;
  border-radius: 15px;
  padding: 16px;
  background: linear-gradient(135deg, #ecfdf5 0%, #eef6ff 100%);
  border: 2px solid rgba(22, 160, 133, 0.28);
  box-shadow: 0 4px 20px rgba(22, 160, 133, 0.14);
}
.home-checkin-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.home-checkin-kicker { color: #0f766e; font-size: 13px; font-weight: 950; }
.home-checkin-title { color: #164e63; font-size: 22px; font-weight: 950; line-height: 1.18; }
.home-checkin-sub { color: #64748b; font-size: 13px; font-weight: 750; line-height: 1.6; }
.home-checkin-action { margin-top: auto; }
.home-checkin-side { display: grid; gap: 10px; min-width: 0; }
.home-checkin-stats,
.home-checkin-goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-checkin-stat,
.home-checkin-goal {
  background: #fff;
  border: 1px solid rgba(22, 160, 133, 0.16);
  border-radius: 10px;
  padding: 10px;
  min-width: 0;
}
.home-checkin-stat b { display: block; color: #0f766e; font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.home-checkin-stat span { display: block; margin-top: 4px; color: #64748b; font-size: 12px; font-weight: 850; }
.home-checkin-goal.reached { border-color: #bfe8d0; background: #ecfdf5; }
.home-checkin-goal.next { border-color: #f5c16c; background: #fff8e8; }
.home-checkin-goal b { display: block; color: #2c3e50; font-size: 12px; margin-bottom: 3px; }
.home-checkin-goal span { color: #1e8449; font-size: 13px; font-weight: 950; }

html[data-theme-resolved="dark"] .home-flash.ok { background: #10241c; color: #6ee7b7; border-color: #047857; }
html[data-theme-resolved="dark"] .home-flash.err { background: #2a1515; color: #fca5a5; border-color: #b91c1c; }
html[data-theme-resolved="dark"] .points-entry-guide {
  background: linear-gradient(135deg, #2a2112 0%, #1f2933 100%);
  border-color: rgba(245, 158, 11, 0.45);
}
html[data-theme-resolved="dark"] .points-entry-title { color: #fbbf24; }
html[data-theme-resolved="dark"] .points-entry-desc { color: #cbd5e1; }
html[data-theme-resolved="dark"] .home-checkin-panel {
  background: linear-gradient(135deg, #10241c 0%, #151c24 100%);
  border-color: rgba(16, 185, 129, 0.28);
}
html[data-theme-resolved="dark"] .home-checkin-title { color: #e8eef5; }
html[data-theme-resolved="dark"] .home-checkin-stat,
html[data-theme-resolved="dark"] .home-checkin-goal {
  background: #151c24;
  border-color: #2c3642;
}
html[data-theme-resolved="dark"] .home-checkin-goal b { color: #e8eef5; }

@media (max-width: 860px) {
  .points-entry-guide { grid-template-columns: 1fr; }
  .points-entry-title { font-size: 19px; }
  .points-entry-guide > a { width: 100%; }
  .home-checkin-panel { grid-template-columns: 1fr; padding: 12px; gap: 10px; }
  .home-checkin-stats, .home-checkin-goals { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .home-checkin-stat b { font-size: 17px; }
  .home-checkin-stat span, .home-checkin-goal b { font-size: 10px; }
}

.home-makeup-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #fff8e8;
  border: 1px solid #f5c16c;
  display: grid;
  gap: 10px;
}
.home-makeup-text { color: #92400e; font-size: 13px; font-weight: 750; line-height: 1.55; }
.home-makeup-btn {
  border: 0;
  border-radius: 10px;
  min-height: 42px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 900;
  color: #7a3b00;
  background: linear-gradient(135deg, #ffe9b8 0%, #f6c453 100%);
}
.home-makeup-btn:disabled { opacity: .65; cursor: not-allowed; }
html[data-theme-resolved="dark"] .home-makeup-box {
  background: #2a2112;
  border-color: #d68910;
}
html[data-theme-resolved="dark"] .home-makeup-text { color: #fbbf24; }

/* ===== 服务器区块：最热首行 + 其余一行最多5个铺满 ===== */
.servers-block {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto 20px;
  padding: 0 8px;
  box-sizing: border-box;
}

.servers-hot-row {
  width: 100%;
  margin: 0 0 16px;
}

.servers-hot-row .server-card--hot {
  flex: none !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.server-card--hot {
  border-color: rgba(230, 126, 34, 0.55) !important;
  box-shadow:
    0 10px 28px rgba(230, 126, 34, 0.18),
    0 0 0 1px rgba(243, 156, 18, 0.22) !important;
  background:
    linear-gradient(180deg, #fff9f1 0%, #ffffff 42%) !important;
}

/* 一体机有人在线的服：瞩目高亮（不独占一行、不放大尺寸，不改变卡片高度） */
.server-card--active {
  border-color: rgba(230, 126, 34, 0.5) !important;
  box-shadow:
    0 6px 18px rgba(230, 126, 34, 0.14),
    0 0 0 1px rgba(243, 156, 18, 0.2) !important;
  background: linear-gradient(180deg, #fffaf2 0%, #ffffff 50%) !important;
}
.server-card--active .server-header {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 60%, #d35400 100%) !important;
}
/* 在线徽章：绝对定位贴在地图缩略图左上角内部，不挡 header 服号/状态 */
.server-active-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  font-size: 19px;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #7c2d12;
  background: linear-gradient(90deg, #fff7e6 0%, #ffd591 50%, #fff7e6 100%);
  border: 1.5px solid rgba(230, 126, 34, 0.7);
  border-radius: 14px;
  white-space: nowrap;
  box-shadow:
    0 5px 16px rgba(230, 126, 34, 0.35),
    0 0 0 3px rgba(255, 237, 213, 0.55);
}
.server-active-badge-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e67e22;
  box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.55);
  animation: server-hot-pulse 1.6s ease-out infinite;
}
html[data-theme-resolved="dark"] .server-card--active {
  border-color: rgba(243, 156, 18, 0.4) !important;
  box-shadow:
    0 6px 18px rgba(230, 126, 34, 0.18),
    0 0 0 1px rgba(243, 156, 18, 0.22) !important;
  background: linear-gradient(180deg, #2a1d12 0%, #1a1410 55%) !important;
}
html[data-theme-resolved="dark"] .server-active-badge {
  color: #fdba74;
  background: linear-gradient(90deg, #2a1d12 0%, #3a2716 50%, #2a1d12 100%);
  border-color: rgba(243, 156, 18, 0.6);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(243, 156, 18, 0.12);
}

.server-card--hot .server-header {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 55%, #d35400 100%) !important;
  min-height: 52px !important;
  padding: 10px 18px !important;
}

/* 最热卡片：各项文字统一放大 */
.server-card--hot .server-number-display {
  min-width: 42px !important;
  height: 38px !important;
  font-size: 18px !important;
  padding: 0 12px !important;
}
.server-card--hot .server-name {
  font-size: 20px !important;
  font-weight: 900 !important;
}
.server-card--hot .server-status {
  font-size: 15px !important;
  font-weight: 800 !important;
}

.server-card.server-card--hot .server-compact-overview {
  height: 260px !important;
}

.server-hot-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  font-size: 19px;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #7c2d12;
  background: linear-gradient(90deg, #fff7e6 0%, #ffd591 50%, #fff7e6 100%);
  border: 1.5px solid rgba(230, 126, 34, 0.7);
  border-radius: 14px;
  white-space: nowrap;
  box-shadow:
    0 5px 16px rgba(230, 126, 34, 0.35),
    0 0 0 3px rgba(255, 237, 213, 0.55);
}

.server-hot-badge-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e67e22;
  box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.55);
  animation: server-hot-pulse 1.6s ease-out infinite;
}

@keyframes server-hot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(230, 126, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); }
}

.server-card--hot .server-metric {
  padding: 12px 10px !important;
  border-radius: 8px !important;
}
.server-card--hot .server-metric span {
  font-size: 14px !important;
  font-weight: 800 !important;
}
.server-card--hot .server-metric b,
.server-card--hot .server-metric .score-display {
  font-size: 20px !important;
  font-weight: 900 !important;
  margin-top: 6px !important;
}

.server-card--hot .server-metric--hot {
  background: linear-gradient(180deg, #fff4e5 0%, #ffecd2 100%) !important;
  border-color: rgba(230, 126, 34, 0.35) !important;
}

.server-card--hot .server-metric--hot span { color: #b45309 !important; }
.server-card--hot .server-metric--hot b {
  color: #c2410c !important;
  font-size: 22px !important;
}

.server-card--hot .server-details {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "map summary"
    "map metrics"
    "map action";
  align-items: stretch;
  gap: 12px 18px !important;
  padding: 14px 16px 16px !important;
  text-align: left !important;
}

.server-card--hot .server-compact-overview {
  grid-area: map;
  align-self: stretch;
  margin: 0 !important;
  border-radius: 8px;
  border: 1px solid rgba(230, 126, 34, 0.2);
}

.server-card--hot .server-map-summary {
  grid-area: summary;
  align-self: start;
  background: transparent;
  gap: 6px 10px;
}
.server-card--hot .server-map-summary span {
  font-size: 14px !important;
  font-weight: 800 !important;
}
.server-card--hot .server-map-summary b {
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}
.server-card--hot .server-map-summary small {
  font-size: 14px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

.server-card--hot .server-metrics {
  grid-area: metrics;
  align-self: stretch;
  gap: 10px !important;
}
.server-card--hot .server-metric {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.server-card--hot .server-player-btn {
  grid-area: action;
  align-self: stretch;
  min-height: 44px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
}

html[data-theme-resolved="dark"] .server-card--hot {
  background: linear-gradient(180deg, #2a2118 0%, #151c24 50%) !important;
  border-color: rgba(243, 156, 18, 0.45) !important;
}
html[data-theme-resolved="dark"] .server-hot-badge {
  color: #fdba74;
  background: linear-gradient(90deg, #2a1d12 0%, #3a2716 50%, #2a1d12 100%);
  border-color: rgba(243, 156, 18, 0.6);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(243, 156, 18, 0.12);
}
html[data-theme-resolved="dark"] .server-card--hot .server-metric--hot {
  background: #2a2118 !important;
  border-color: rgba(243, 156, 18, 0.35) !important;
}
html[data-theme-resolved="dark"] .server-card--hot .server-metric--hot span { color: #fdba74 !important; }
html[data-theme-resolved="dark"] .server-card--hot .server-metric--hot b { color: #fb923c !important; }

.servers-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.server-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  /* 最少占 1/5，不足 5 个时 flex-grow 铺满整行 */
  flex: 1 1 calc((100% - 56px) / 5) !important;
  min-width: calc((100% - 56px) / 5) !important;
  max-width: 100% !important;
  width: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid rgba(74, 144, 226, 0.24) !important;
  box-shadow: 0 8px 22px rgba(24, 55, 88, 0.12) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.server-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(24, 55, 88, 0.16) !important;
}

.server-card .server-compact-overview {
  display: block !important;
  height: 184px !important;
}

html[data-theme-resolved="dark"] .server-card {
  background: #151c24 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme-resolved="dark"] .server-card .server-map-summary {
  background: #151c24 !important;
}
html[data-theme-resolved="dark"] .server-card .server-map-summary b { color: #e8eef5 !important; }
html[data-theme-resolved="dark"] .server-card .server-metric {
  background: #1a222c !important;
  border-color: #2c3642 !important;
}
html[data-theme-resolved="dark"] .server-card .server-metric b { color: #f4f7fa !important; }

@media (max-width: 1280px) {
  .servers-block { max-width: 1200px; }
  .server-card {
    flex-basis: calc((100% - 42px) / 4) !important;
    min-width: calc((100% - 42px) / 4) !important;
  }
  .servers-hot-row .server-card--hot {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 980px) {
  .servers-block { max-width: 920px; }
  .server-card {
    flex-basis: calc((100% - 28px) / 3) !important;
    min-width: calc((100% - 28px) / 3) !important;
  }
  .servers-hot-row .server-card--hot {
    min-width: 0 !important;
    width: 100% !important;
  }
  .server-card--hot .server-details {
    grid-template-columns: 1fr;
    grid-template-areas:
      "map"
      "summary"
      "metrics"
      "action";
  }
  .server-card.server-card--hot .server-compact-overview { height: 220px !important; }
}

@media (max-width: 720px) {
  .servers-block { max-width: none; }
  .servers-container { gap: 12px !important; }
  .server-card {
    flex-basis: calc((100% - 12px) / 2) !important;
    min-width: calc((100% - 12px) / 2) !important;
  }
  .servers-hot-row .server-card--hot {
    min-width: 0 !important;
    width: 100% !important;
  }
  .server-card .server-compact-overview { height: 160px !important; }
  .server-card.server-card--hot .server-compact-overview { height: 180px !important; }
}

@media (max-width: 480px) {
  .servers-block { max-width: 420px; }
  .server-card {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }
  .servers-hot-row .server-card--hot {
    min-width: 0 !important;
    width: 100% !important;
  }
  .server-card.server-card--hot .server-compact-overview { height: 150px !important; }
}