/**
 * 页脚基础样式
 * @package Westlife
 * @version 1.0.1
 */

/*--------------------------------------------------------------
>>> 左：版权+备案+状态点｜右：6个图标一行
--------------------------------------------------------------*/
.site-footer {
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
  margin-top: 0.1rem;
  width: 100%;
}
.footer-bottom {
  padding: 16px 0;
}
.footer-inner {
  max-width: calc(
    var(--container-width) + var(--container-padding) * 2
  ); /* 1320px 总宽度 */
  margin: 0 auto;
  padding: 0 var(--container-padding); /* 20px 每侧，padding 计入总宽度，但内容区保持 1280px */
  box-sizing: border-box;
}

/* 三列同一行（不换行） */
.footer-credits--split {
  display: flex;
  align-items: center; /* 三列垂直居中 */
  justify-content: space-between; /* 左中右拉开 */
  gap: 1rem 1.25rem;
  flex-wrap: nowrap; /* 关键：整行不换行 */
  width: 100%;
}
.footer-credits--no-stats .footer-center {
  justify-content: center;
}
.footer-credits--no-stats .footer-center .footer-copy {
  color: var(--color-text);
  font-size: 0.95rem;
  white-space: nowrap;
}
.footer-credits--split > * {
  min-width: 0;
} /* 防止子项溢出 */

/* 左列：内部上下两行（版权一行 + 备案/状态一行） */
.footer-left {
  flex: 0 0 auto; /* 按内容宽度 */
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.footer-left .footer-copy {
  color: var(--color-text-light);
  opacity: 0.9; /* 略微朦胧，降低存在感 */
  font-size: 0.9rem; /* 略微缩小 */
  white-space: nowrap;
}
.footer-left .footer-copy a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.footer-left .footer-copy a:hover {
  color: var(--color-primary);
}

/* ========================================
   备案信息胶囊面板（与右侧图标一致的风格）
   - 面板触发按钮
   - 面板容器与内容
   ======================================== */
.icp-toggle-wrapper {
  position: relative;
  display: inline-block;
}
.icp-toggle-btn.info-icon {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 0;
}
/* 激活状态保持中性底色与边框，不反白 */
.icp-toggle-btn.info-icon.active {
  background: var(--color-background-light) !important;
  border-color: var(--color-border) !important;
  color: inherit !important;
}
.icp-toggle-btn.info-icon .icp-icon {
  width: 13px;
  height: 13px;
  object-fit: contain;
  /* 默认统一为灰色风格 */
  filter: grayscale(100%) opacity(0.65);
  transition: all 0.3s ease;
}
.icp-toggle-btn.info-icon:hover {
  transform: translateY(-2px) scale(1.08);
  /* 悬浮保持中性底色，不染成主题色 */
  background: var(--color-background-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--color-border);
}
/* 悬浮/激活：显示原图颜色 */
.icp-toggle-btn.info-icon:hover .icp-icon,
.icp-toggle-btn.info-icon.active .icp-icon {
  filter: none !important;
}
.icp-toggle-btn:focus {
  outline: none;
}
.icp-toggle-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 面板容器 */
.icp-info-panel {
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 100%;
  transform: translate(
    -50%,
    10px
  ); /* 初始在按钮下方 10px，激活上移到正上方 => 从下到上 */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.5rem; /* 与按钮保持间距 */
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0.4rem 0.6rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  max-width: calc(100vw - 32px); /* 安全限制，防止极端内容导致溢出 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="dark"] .icp-info-panel {
  background: rgba(30, 41, 59, 0.98);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.icp-info-panel.active {
  transform: translate(-50%, 0); /* 上移归位，完成从下到上的出现动画 */
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

/* 面板内容与单项胶囊 */
.icp-info-content {
  display: flex;
  align-items: center;
  gap: 0.4rem; /* 胶囊之间也更紧凑 */
}
.icp-info-panel .icp-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  /* 改为中性浅灰底与边框，降低存在感 */
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  color: var(--color-text, #1f2937);
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.18s ease;
  will-change: transform;
  white-space: nowrap;
}
[data-theme="dark"] .icp-info-panel .icp-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
.icp-info-panel .icp-item:hover {
  transform: scale(1.06); /* 悬浮仅放大单个胶囊 */
}
/* 深色下仍仅放大，不改底色 */
[data-theme="dark"] .icp-info-panel .icp-item:hover {
  transform: scale(1.06);
}
.icp-info-panel .icp-item .icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  flex-shrink: 0;
}
.icp-info-panel .icp-item span {
  line-height: 1.2;
}

/* 面板响应式 */
@media (max-width: 768px) {
  .icp-info-panel {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 100%;
    transform: translate(-50%, 10px);
    margin-left: 0;
    margin-right: 0; /* 重置桌面端的右外边距 */
    margin-bottom: 0.5rem;
  }
  .icp-info-panel.active {
    transform: translate(-50%, 0);
  }
  .icp-info-content {
    flex-direction: column;
    gap: 0.4rem;
  }
  .icp-info-panel .icp-item {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
  }
  .icp-toggle-btn .icp-icon {
    width: 18px;
    height: 18px;
  }
  .icp-info-panel .icp-item .icon {
    width: 10px;
    height: 10px;
  }
}
@media (max-width: 480px) {
  .icp-info-panel .icp-item {
    font-size: 0.6rem;
    padding: 0.2rem 0.45rem;
    gap: 0.25rem;
  }
}

.footer-meta-small {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  color: var(--color-text-light);
  font-size: 0.82rem;
}

/* 状态绿点（轻微脉冲） */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  display: inline-block;
  position: relative;
  top: 1px;
  animation: status-pulse 1.6s ease-out infinite;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.status-dot:hover {
  transform: scale(1.15);
  filter: brightness(1.05);
}
@keyframes status-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* 访客信息（总浏览量 + 最近访客来源） */
.footer-visitor-info {
  display: inline-flex; /* 水平单行 */
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem; /* 更小的文字 */
  color: var(--color-text-light); /* 不起眼的颜色 */
  margin-top: -0.35rem; /* 放在 footer-copy 下方的间距 */
  white-space: nowrap; /* 不换行显示 */
}
.footer-visitor-info .total-views {
  color: var(--color-text-light);
  opacity: 0.85;
}
.footer-visitor-info .recent-visitor {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0.75; /* 更弱化 */
}
.footer-visitor-info .country-flag {
  font-size: 0.95rem;
  line-height: 1;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .footer-visitor-info {
    font-size: 0.72rem; /* 移动端更小 */
    gap: 0.35rem;
  }
  .footer-visitor-info .country-flag {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .footer-visitor-info {
    font-size: 0.68rem;
    gap: 0.3rem;
  }
  .footer-visitor-info .total-views,
  .footer-visitor-info .recent-visitor {
    font-size: 0.68rem;
  }
}

/* 右列：仅图标（6个一行不换行，靠最右） */
.footer-right {
  flex: 0 0 auto; /* 按内容宽度 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.6rem;
  text-align: right;
  margin-left: auto; /* 推到最右 */
  overflow: visible;
}
/* 右侧图标群外层：胶囊/玻璃质感板块 */
.footer-right .footer-icons-block {
  padding: 6px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
[data-theme="dark"] .footer-right .footer-icons-block {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.footer-right .info-icons {
  z-index: 1;
  display: flex;
  flex-wrap: nowrap; /* 关键：不换行，避免5+1 */
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap; /* 双保险不换行 */
}
.footer-right .info-icons li {
  flex: 0 0 auto;
}
.footer-right .info-icon {
  width: 24px;
  height: 24px;
  box-sizing: border-box; /* 外尺寸含边框 => 正好 24×24 */
  aspect-ratio: 1 / 1; /* 双保险：宽高比为 1 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  overflow: hidden; /* 裁切内部，确保圆边界干净 */
  line-height: 0; /* 消除基线影响，图标精确居中 */
  transform-origin: center center; /* 放大以中心为轴 */
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    color 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
}
.footer-right .info-icon i {
  font-size: 13px;
  line-height: 1;
}
.footer-right .info-icon:hover {
  transform: translateY(-2px) scale(1.08);
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: 50%; /* 悬浮保持正圆 */
  box-shadow: 0 6px 14px rgba(var(--color-primary-rgb, 1, 102, 204), 0.18);
}

/* ICP 切换按钮在右侧图标区悬浮也保持中性，不染主题色 */
.footer-right .icp-toggle-btn.info-icon:hover {
  background: var(--color-background-light) !important;
  border-color: var(--color-border) !important;
  color: inherit !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* =====================
   服务器信息面板（Server）
   ===================== */
.server-toggle-wrapper {
  position: relative;
  display: inline-block;
}
.server-toggle-btn.info-icon {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.18s ease;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 0;
}
.server-toggle-btn .server-icon-wrap {
  position: relative; /* 作为徽标的定位参照 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.server-toggle-btn.info-icon:hover {
  transform: translateY(-2px) scale(1.08);
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.server-toggle-btn.info-icon.active {
  background: var(--color-background-light) !important;
  border-color: var(--color-border) !important;
  color: inherit !important;
}

/* 服务器图标右上角小徽标（可显示响应时间或负载简要） */
.server-toggle-btn {
  position: relative;
}
.server-toggle-btn .server-badge {
  position: absolute;
  top: 0; /* 放到按钮内部右上角，避免被 overflow 裁剪 */
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--color-background);
  pointer-events: none; /* 避免遮挡点击 */
  z-index: 1;
}
[data-theme="dark"] .server-toggle-btn .server-badge {
  box-shadow: 0 0 0 2px var(--color-background);
}

.server-info-panel {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 10px);
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  padding: 0.6rem 0.7rem;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.server-info-panel.active {
  transform: translate(-50%, 0);
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
[data-theme="dark"] .server-info-panel {
  background: rgba(30, 41, 59, 0.98);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.server-info-content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.server-info-content .metric-row {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
}
[data-theme="dark"] .server-info-content .metric-row {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.server-info-content .metric {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
}
.server-info-content .metric-row {
  /* 左圆右文的水平卡片 */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  text-align: left;
  min-height: 82px; /* 统一卡片高度 */
}
.server-info-content .metric-row .circle {
  position: relative;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
}
.server-info-content .metric-row .circle .hover-readout {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  text-align: center;
  font-size: 10px;
  line-height: 1.15;
  color: var(--color-text-light);
  pointer-events: none;
}
.metric-load .circle:hover .hover-readout {
  display: block;
}
.metric-load .circle:hover .arc-5m,
.metric-load .circle:hover .arc-15m {
  opacity: 0.35;
}
.metric-load .circle .arc-5m,
.metric-load .circle .arc-15m {
  transition: opacity 0.18s ease;
}
.server-info-content .metric-row .center-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font-weight: 800;
  color: #1f7d32; /* 绿色版数值 */
}
.server-info-content .metric-row .center-value .num {
  font-size: 22px;
  line-height: 1;
}
.server-info-content .metric-row .center-value .unit {
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.9;
  line-height: 1;
}
.server-info-content .metric-row .meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.server-info-content .metric-row .meta .label {
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 600;
}
.server-info-content .metric-row .meta .sub {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

/* 内存 legend 放在右文区，行内点样式 */
.server-info-content .metric .mem-legend {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.server-info-content .metric .mem-legend .legend-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-light);
}
.server-info-content .metric .mem-legend .legend-row .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.server-info-content .metric .mem-legend .legend-row.cache .dot {
  background: #60a5fa;
}
.server-info-content .metric .mem-legend .legend-row.free .dot {
  background: rgba(0, 0, 0, 0.35);
}
/* 复合负载环：三层同心弧（外=15m，中=5m，内=1m） */
.server-info-content .metric .ring-multi {
  --size: 56px;
  --thick: 6px;
  width: var(--size);
  height: var(--size);
  position: relative;
}
.server-info-content .metric .ring-multi .layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(
    var(--cc, #16a34a) calc(var(--pp, 0) * 1%),
    rgba(0, 0, 0, 0.1) 0
  );
}
.server-info-content .metric .ring-multi .layer.outer {
  --pp: var(--p15);
  --cc: var(--c15);
  width: var(--size);
  height: var(--size);
  mask: radial-gradient(
    circle at center,
    transparent calc(50% - var(--thick)),
    black calc(50% - var(--thick)),
    black 100%
  );
}
.server-info-content .metric .ring-multi .layer.mid {
  --pp: var(--p5);
  --cc: var(--c5);
  width: calc(var(--size) - 12px);
  height: calc(var(--size) - 12px);
  mask: radial-gradient(
    circle at center,
    transparent calc(50% - var(--thick)),
    black calc(50% - var(--thick)),
    black 100%
  );
}
.server-info-content .metric .ring-multi .layer.inner {
  --pp: var(--p1);
  --cc: var(--c1);
  width: calc(var(--size) - 24px);
  height: calc(var(--size) - 24px);
  mask: radial-gradient(
    circle at center,
    transparent calc(50% - var(--thick)),
    black calc(50% - var(--thick)),
    black 100%
  );
}
.server-info-content .metric .load-legend {
  margin: 0.35rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: center;
  font-size: 0.74rem;
  color: var(--color-text-light);
}
/* 圆下方的数值（用于内存等） */
.server-info-content .value-below {
  font-weight: 700;
  color: var(--color-text);
}
.server-info-content .metric .load-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.server-info-content .metric .load-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.server-info-content .metric .load-legend .dot-5 {
  background: var(--c5, #60a5fa);
}
.server-info-content .metric .load-legend .dot-15 {
  background: var(--c15, #16a34a);
}
.server-info-content .metric .label {
  font-size: 0.68rem;
  color: var(--color-text);
}
[data-theme="dark"] .server-info-content .metric .label {
  color: rgba(255, 255, 255, 0.9);
}
.server-info-content .metric .sub {
  font-size: 0.62rem;
  color: var(--color-text-light);
}
/* 已移除 provider 区块 */

/* SVG 圈通用样式：统一尺寸与线条 */
.server-info-content .ring-svg {
  width: 72px;
  height: 72px;
  display: block;
}
.server-info-content .ring-svg .track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 6;
}
.server-info-content .ring-svg .arc {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}

/* 移动端紧凑：缩小圆和卡片最小高度 */
@media (max-width: 768px) {
  .server-info-content .metric-row {
    min-height: 74px;
    gap: 0.6rem;
  }
  .server-info-content .metric-row .circle {
    width: 64px;
    height: 64px;
  }
  .server-info-content .ring-svg {
    width: 64px;
    height: 64px;
  }
  .server-info-content .metric-row .center-value .num {
    font-size: 20px;
  }
}
.server-info-content .ring-svg .digit {
  font: 700 14px/1 var(--font-sans, ui-sans-serif, system-ui);
  text-anchor: middle;
}
.server-info-content .ring-svg .digit .digit-sub {
  opacity: 0.9;
}
.server-info-content .metric-load-svg + .load-legend {
  margin-left: 0.5rem;
}
.server-info-content .metric-mem-svg + .label {
  margin-top: 0.15rem;
}
.server-info-content .metric-mem .mem-legend {
  margin-left: 0.25rem;
}

/* 环形进度：纯 CSS（两段扇形 + 旋转） */
.server-info-content .ring {
  --size: 46px; /* 外径 */
  --thick: 6px; /* 线宽 */
  --p: 0; /* 百分比 0-100 */
  --c: #16a34a; /* 颜色 */
  width: var(--size);
  height: var(--size);
  position: relative;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--c) calc(var(--p) * 1%),
    rgba(0, 0, 0, 0.08) 0
  );
}
.server-info-content .ring::before {
  content: "";
  position: absolute;
  inset: calc(var(--thick));
  background: var(--color-background);
  border-radius: 50%;
}
[data-theme="dark"] .server-info-content .ring::before {
  background: var(--color-background);
}
.server-info-content .ring .value {
  position: relative;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text);
}
.server-info-content .ring .value .unit {
  font-size: 0.7em;
  margin-left: 1px;
  opacity: 0.8;
}

/* 内存：分段堆叠（已用(不含缓存)=绿，缓存=蓝） */
.server-info-content .metric-mem {
  align-items: flex-start;
}
.server-info-content .metric .ring-stacked {
  --size: 56px;
  --thick: 6px;
  --p-used: 0;
  --p-cache: 0;
  --c-used: #16a34a;
  --c-cache: #60a5fa;
  width: var(--size);
  height: var(--size);
  position: relative;
  display: grid;
  place-items: center;
}
.server-info-content .metric .ring-stacked::before,
.server-info-content .metric .ring-stacked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* 底层背景圈（总计灰） */
.server-info-content .metric .ring-stacked::before {
  background: conic-gradient(rgba(0, 0, 0, 0.1) 100%, transparent 0);
}
/* 顶层绘制：先缓存蓝，再已用绿（两段相加） */
.server-info-content .metric .ring-stacked::after {
  background: conic-gradient(
      var(--c-cache) calc(var(--p-cache) * 1%),
      transparent 0
    ),
    conic-gradient(var(--c-used) calc((var(--p-used)) * 1%), transparent 0);
  mask: radial-gradient(
    circle at center,
    transparent calc(50% - var(--thick)),
    black calc(50% - var(--thick)),
    black 100%
  );
}
.server-info-content .metric .ring-stacked .value {
  position: relative;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}
.server-info-content .metric .mem-legend {
  margin-left: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--color-text-light);
}
.server-info-content .metric .mem-legend .legend-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.server-info-content .metric .mem-legend .legend-row .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.server-info-content .metric .mem-legend .legend-row.cache .dot {
  background: var(--c-cache, #60a5fa);
}
.server-info-content .metric .mem-legend .legend-row.free .dot {
  background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .server-info-content {
    flex-wrap: wrap;
    justify-content: center;
  }
  .server-info-panel {
    left: 50%;
    transform: translate(-50%, 10px);
  }
  .server-info-panel.active {
    transform: translate(-50%, 0);
  }
  .server-info-content .ring {
    --size: 42px;
    --thick: 6px;
  }
}
@media (max-width: 480px) {
  .server-info-content .ring {
    --size: 40px;
    --thick: 5px;
  }
}

/* 右侧图标：统一尺寸与颜色（跟随 currentColor） */
.footer-right .info-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.footer-right .info-icon svg path {
  fill: currentColor !important;
}

/* 右下角：备案信息内联（不明显、单行、悬浮彩色） */
.footer-right .icp-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  opacity: 0.9; /* 略淡 */
}
.footer-right .icp-inline .icp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.45rem;
  font-size: 0.72rem;
  color: var(--color-text-light);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.18s ease;
}
.footer-right .icp-inline .icp-chip .icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.65);
  transition: filter 0.18s ease, transform 0.18s ease;
}
.footer-right .icp-inline .icp-chip:hover {
  color: var(--color-text);
  background: var(--color-background-light);
  border-color: var(--color-border);
  transform: translateY(-1px);
}
.footer-right .icp-inline .icp-chip:hover .icon {
  filter: grayscale(0%) opacity(1);
}
[data-theme="dark"] .footer-right .icp-inline .icp-chip {
  background: var(--color-background);
  border-color: var(--color-border);
}

/* 移动端：备案内联也保持紧凑 */
.footer-right .icp-inline {
  gap: 0.35rem;
}
.footer-right .icp-inline .icp-chip {
  font-size: 0.68rem;
  padding: 0.16rem 0.4rem;
}

/* 移动端：分三行显示，简化内容 */
@media (max-width: 768px) {
  .footer-credits--split {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
  }

  /* 第一行：版权信息 */
  .footer-left {
    order: 1;
    align-items: center;
  }

  .footer-left .footer-copy {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }

  .footer-left .footer-meta-small {
    font-size: 0.75rem;
    opacity: 0.8;
  }

  /* 第二行：技术图标 */
  .footer-right {
    order: 2;
    align-items: center;
    text-align: center;
    margin-left: 0; /* 取消桌面端推到最右 */
    width: 100%; /* 让内部内容更容易水平居中 */
  }

  .footer-right .footer-icons-block {
    padding: 6px 8px;
    border-radius: 14px;
  }

  .footer-right .info-icons {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow-x: visible;
  }

  .footer-right .info-icon {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    min-width: auto;
  }

  /* 第三行：统计信息（移动端尽量一行，不行则自动换行） */
  .footer-center {
    order: 3;
    justify-content: center;
  }

  /* 默认尝试单行显示，尽量压缩不换行 */
  .site-footer .footer-center .site-stats {
    flex-wrap: nowrap; /* 单行 */
    justify-content: center;
    overflow-x: hidden; /* 避免出现横向滚动条 */
    gap: 0.4rem;
  }

  .footer-center .stat-item {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }

  /* 移动端精简：隐藏备案胶囊 */
  .footer-left .footer-meta-small .icp-info,
  .footer-credits--no-stats .footer-center .icp-info {
    display: none !important;
  }

  /* 保证移动端备案胶囊可见且可换行 */
  .footer-left .footer-meta-small {
    display: flex;
  }
  .footer-left .icp-info {
    display: flex;
    flex-wrap: wrap;
  }
  .footer-left .icp-info a {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
  }
}

/* 超小屏幕：保留统计信息，继续缩小并允许换行 */
@media (max-width: 480px) {
  .footer-center {
    display: flex;
    justify-content: center;
  }

  .site-footer .footer-center .site-stats {
    justify-content: center;
    overflow-x: hidden;
    gap: 0.35rem;
  }

  .footer-center .stat-item {
    font-size: 0.72rem;
    padding: 0.18rem 0.36rem;
  }

  /* 极小屏保持隐藏备案胶囊 */
  .footer-left .footer-meta-small .icp-info,
  .footer-credits--no-stats .footer-center .icp-info {
    display: none !important;
  }

  /* 极小屏也确保备案胶囊显示 */
  .footer-left .footer-meta-small {
    display: flex;
  }
  .footer-left .icp-info {
    display: flex;
    flex-wrap: wrap;
  }
  .footer-left .icp-info a {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
  }

  .footer-right .info-icons {
    gap: 0.3rem;
  }

  .footer-right .info-icon {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
  }

  .footer-left .footer-copy {
    font-size: 0.8rem;
  }
}

/* 极小屏：不能单行时改为严格三行（每项独占一行） */
@media (max-width: 420px) {
  .site-footer .footer-center .site-stats {
    flex-wrap: wrap; /* 允许换行 */
  }
  .site-footer .footer-center .site-stats .stat-item {
    width: 100%; /* 每行一个，恰好三行 */
    justify-content: center;
  }
}

/* 深色模式 */
[data-theme="dark"] .site-footer {
  background: var(--color-background);
}
[data-theme="dark"] .footer-center .stat-item,
[data-theme="dark"] .footer-right .info-icon,
[data-theme="dark"] .footer-left .icp-info a {
  background: var(--color-background);
  border-color: var(--color-border);
}

/* 页脚：站点名徽标默认高亮，悬浮仅放大 */
/* 网站名称徽章 - 悬停提示框样式 */
.footer-left .footer-copy .site-name-badge-wrapper {
  position: relative;
  display: inline-block;
}

.footer-left .footer-copy .site-name-badge {
  display: inline;
  font-family: "Source Han Serif CN", "Tencent Sans", "PingFang SC",
    "Microsoft YaHei", serif;
  font-weight: 700;
  font-style: normal;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.2s ease;
}

.footer-left .footer-copy .site-name-badge:hover {
  color: var(--color-primary);
}

/* 悬停提示框 */
.footer-left .footer-copy .site-name-tooltip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(8px);
  margin-bottom: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
}

.footer-left .footer-copy .site-name-badge-wrapper:hover .site-name-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.footer-left .footer-copy .site-name-tooltip::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1e293b;
}

[data-theme="dark"] .footer-left .footer-copy .site-name-tooltip::before {
  border-top-color: #334155;
}

.footer-left .footer-copy .site-name-tooltip > div,
.footer-left .footer-copy .site-name-tooltip {
  background: #1e293b;
  width: max-content;
  max-width: 320px;
  color: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .footer-left .footer-copy .site-name-tooltip > div,
[data-theme="dark"] .footer-left .footer-copy .site-name-tooltip {
  background: #334155;
}

.footer-left .footer-copy .site-name-tooltip .tooltip-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.footer-left .footer-copy .site-name-tooltip .tooltip-text {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

/* 保持链接样式一致 */
.footer-left .footer-copy a.site-name-badge,
.footer-left .footer-copy a.site-name-badge:visited {
  color: var(--color-text);
  text-decoration: none;
}

.footer-left .footer-copy a.site-name-badge:hover,
.footer-left .footer-copy a.site-name-badge:focus,
.footer-left .footer-copy a.site-name-badge:active {
  color: var(--color-primary);
}

/* 深色模式 */
[data-theme="dark"] .footer-left .footer-copy .site-name-badge {
  color: var(--color-text);
}

/* 页脚备案小图标统一尺寸与间距 */
.footer-left .icp-info svg.icon,
.footer-left .icp-info img.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}
/* 让 SVG 颜色跟随文字色，覆盖内联 fill 以保证可读性 */
.footer-left .icp-info svg.icon path {
  fill: currentColor !important;
}

/* 返回顶部按钮样式已迁移至 header 进度按钮，旧样式移除 */

/* 移动端：分三行显示，简化内容（重复块，保持一致覆盖） */
@media (max-width: 768px) {
  .footer-bottom {
    padding: 1rem 0;
  }

  /* 容器内边距兼容安全区 */
  .footer-inner {
    padding-left: calc(var(--container-padding) + env(safe-area-inset-left));
    padding-right: calc(var(--container-padding) + env(safe-area-inset-right));
  }

  .footer-credits--split {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
  }

  /* 第一行：版权信息 */
  .footer-left {
    order: 1;
    align-items: center;
  }

  .footer-left .footer-copy {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }

  .footer-left .footer-meta-small {
    font-size: 0.75rem;
    opacity: 0.8;
  }

  /* 第二行：技术图标 */
  .footer-right {
    order: 2;
    align-items: center;
    text-align: center;
    margin-left: 0; /* 取消桌面端推到最右 */
    width: 100%; /* 让内部内容更容易水平居中 */
  }

  .footer-right .info-icons {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow-x: visible;
  }

  .footer-right .info-icon {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    min-width: auto;
    width: 30px;
    height: 30px;
  }

  /* 第三行：统计信息（移动端尽量一行，不行则自动换行） */
  .footer-center {
    order: 3;
    justify-content: center;
  }

  /* 默认尝试单行显示，尽量压缩不换行 */
  .site-footer .footer-center .site-stats {
    flex-wrap: nowrap; /* 单行 */
    justify-content: center;
    overflow-x: hidden; /* 避免出现横向滚动条 */
    gap: 0.4rem;
  }

  .footer-center .stat-item {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }

  /* 备案小胶囊与图标尺寸微调 */
  .footer-left .icp-info a {
    padding: 0.1rem 0.38rem;
    font-size: 0.7rem;
  }
  .footer-left .icp-info .icon {
    width: 16px;
    height: 16px;
  }
}

/* 超小屏幕：保留统计信息，继续缩小并允许换行（重复块覆盖） */
@media (max-width: 480px) {
  .footer-center {
    display: flex;
    justify-content: center;
  }

  .site-footer .footer-center .site-stats {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    row-gap: 0.35rem;
    column-gap: 0.35rem;
  }

  .footer-center .stat-item {
    font-size: 0.72rem;
    padding: 0.18rem 0.36rem;
  }

  .footer-right .info-icons {
    gap: 0.3rem;
  }

  .footer-right .info-icon {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    width: 28px;
    height: 28px;
  }

  .footer-left .footer-copy {
    font-size: 0.8rem;
  }
}