/* =========================================================
   导航按钮 / 头像圆形容器
   原 wakatime-theme.css 中与 WakaTime 无关的部分已摘录至此，
   品牌强调色统一为 #ff99cc。
   ========================================================= */

/* 头像：圆形容器修正 */
.js-avatar {
  transition: all 0.5s ease;
  border: 2px solid transparent;
  border-radius: 50%;
}

.ih-item.circle .img {
  border-radius: 50% !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ih-item.circle {
  box-shadow: none !important;
  background: transparent !important;
}

/* 导航按钮：玻璃拟态基础外观 */
.blog-button {
  background: rgba(20, 20, 20, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);

  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  display: inline-block;
}

/* 头像本身也带 .blog-button，需还原为透明 */
.ih-item.circle .blog-button {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 悬停：品牌色描边 + 光晕 */
.navigation__item .blog-button:hover,
.btn-mobile-menu__icon:hover {
  background: rgba(30, 30, 30, 0.6);
  color: rgba(255, 255, 255, 0.95) !important;
  border-color: #ff99cc !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 10px #ff99cc;
  transform: translateY(-2px);
  opacity: 1;
}

.navigation__item a:not(.blog-button):hover {
  color: #ff99cc !important;
  text-shadow: 0 0 8px #ff99cc;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

.ih-item.circle .blog-button:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.panel-cover__subtitle {
  transition: color 0.5s ease;
}

.panel-cover__subtitle:hover {
  color: #ff99cc;
}

/* =========================================================
   入口组：三个悬浮胶囊
   ---------------------------------------------------------
   页面语汇是「照片封面 + 悬浮元素」——头像、标题、引文、社交图标
   全都飘在照片上。所以这组入口也必须飘着。
   ❌ 曾做成一张深色玻璃卡片，被判定"像贴了块黑砖"，已废弃：
      深色矩形是整页唯一的实体方块，把壁纸挡掉一大块，与轻盈感冲突。

   ✅ 统一几何：三个胶囊一律 48px 高、999px 圆角、统一内边距。
   层级只靠颜色区分，不再靠「高度 44/40/32、字号 16/14/12」
   那种每项都不一样的尺寸（那正是最初"难看"的来源）。
   ========================================================= */

/* ⚠️ 父容器在 vno.css 里是 float:left（收缩到内容宽），
   会让这组胶囊失去可靠的居中基准，先掰回正常块级。 */
.navigation-wrapper .cover-navigation--primary {
  display: block !important;
  float: none !important;
  width: 100% !important;
}

/* 排布容器：本身完全透明，不构成任何"块" */
.cover-navigation--primary .navigation {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  float: none !important;
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.cover-navigation--primary .navigation > .navigation__item {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  border: none !important;
}

/* 胶囊本体：统一几何（48px 高 / 999px 圆角 / 统一内边距） */
.cover-navigation--primary .navigation > .navigation__item > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px !important;
  border-radius: 999px !important;
  text-align: center;
  font-size: 0.95rem !important;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-shadow: none;
  color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(18, 18, 20, 0.42) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
  transform: none !important;
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.cover-navigation--primary .navigation > .navigation__item > a > i {
  flex: 0 0 auto;
  font-size: 0.98em;
  opacity: 0.92;
}

/* 主站 —— 唯一的品牌色实心胶囊（本页唯一的"大胆"用在这里） */
.cover-navigation--primary .navigation > .navigation__item > a.nav-cta-primary {
  background: linear-gradient(135deg, #ff99cc, #ff6699) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 20px rgba(255, 102, 153, 0.42) !important;
}

/* 备站 —— 与主站同字号、同几何，靠玻璃质感与品牌色区分 */
.cover-navigation--primary .navigation > .navigation__item > a.nav-cta-secondary {
  color: rgba(255, 255, 255, 0.96) !important;
}

/* 悬停与键盘焦点 */
.cover-navigation--primary .navigation > .navigation__item > a:hover,
.cover-navigation--primary .navigation > .navigation__item > a:focus-visible {
  background-color: rgba(30, 30, 34, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: #fff !important;
  outline: none;
}

.cover-navigation--primary .navigation > .navigation__item > a.nav-cta-primary:hover,
.cover-navigation--primary .navigation > .navigation__item > a.nav-cta-primary:focus-visible {
  background: linear-gradient(135deg, #ffaed6, #ff7aa8) !important;
}

.cover-navigation--primary .navigation > .navigation__item > a:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55) !important;
}

/* 备站胶囊里的小字说明（间距由 flex 的 gap 负责，这里不再加 margin） */
.nav-cta-hint {
  margin-left: 0;
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.68;
}

/* =========================================================
   资源站可达性 / 延迟结论行
   放在导航按钮下方独立一行（由 site-probe.js 注入）。
   曾试过把徽标塞进按钮内部，但桌面端三个按钮 + 徽标共需 777px，
   而内容栏只有 620px，会把整行挤换行/溢出，故改为独立一行。
   ========================================================= */

.probe-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* 宽度自适应 + 自动居中，长文案可换行 */
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 5px 14px;
  border-radius: 16px;
  /* 半透明底衬：壁纸是随机的，有浅色壁纸，纯白文字会糊在背景里 */
  background: rgba(0, 0, 0, 0.32);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.probe-line .pd {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #bdbdbd;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* =========================================================
   状态点：柔光 + 呼吸
   每个状态一道与自身同色的柔光（box-shadow 不占布局，不会撑大胶囊）。
   只有「正常」和「故障」两种状态带呼吸动画：
     · is-ok  → 慢呼吸（2.4s），表示"在线/已测通"
     · is-bad → 稍快（1.5s），表示"异常、需要你注意"
     · warn / slow → 只发光不动，避免整页都在闪
   ========================================================= */

/* 检测中：粉点闪烁 */
.probe-line.is-run  .pd {
  background: #ff99cc;
  animation: probe-blink 1s ease-in-out infinite;
}

/* 正常：绿点 + 柔光呼吸（你要的那个效果） */
.probe-line.is-ok   .pd {
  background: #3ddc97;
  box-shadow: 0 0 0 2px rgba(61, 220, 151, 0.2), 0 0 8px 2px rgba(61, 220, 151, 0.5);
  animation: probe-glow-ok 2.4s ease-in-out infinite;
}

@keyframes probe-glow-ok {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(61, 220, 151, 0.16), 0 0 6px 1px rgba(61, 220, 151, 0.38);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.30), 0 0 13px 3px rgba(61, 220, 151, 0.78);
  }
}

/* 一般 / 偏慢：只发光，不做动画 */
.probe-line.is-warn .pd {
  background: #ffc857;
  box-shadow: 0 0 0 2px rgba(255, 200, 87, 0.2), 0 0 8px 2px rgba(255, 200, 87, 0.5);
}

.probe-line.is-slow .pd {
  background: #ff8a4c;
  box-shadow: 0 0 0 2px rgba(255, 138, 76, 0.2), 0 0 8px 2px rgba(255, 138, 76, 0.5);
}

/* 故障：红点 + 更快一点的呼吸 */
.probe-line.is-bad  .pd {
  background: #ff5c5c;
  box-shadow: 0 0 0 2px rgba(255, 92, 92, 0.22), 0 0 9px 2px rgba(255, 92, 92, 0.6);
  animation: probe-glow-bad 1.5s ease-in-out infinite;
}

@keyframes probe-glow-bad {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255, 92, 92, 0.18), 0 0 7px 1px rgba(255, 92, 92, 0.45);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.32), 0 0 14px 3px rgba(255, 92, 92, 0.8);
  }
}

.probe-line.is-bad  { color: #ffd9d9; }

/* 尊重系统「减弱动态效果」设置：保留柔光，去掉动画 */
@media (prefers-reduced-motion: reduce) {
  .probe-line .pd,
  .probe-line.is-ok .pd,
  .probe-line.is-bad .pd,
  .probe-line.is-run .pd {
    animation: none !important;
  }
}

/* =========================================================
   网络受限 / 被墙提示
   只在「主站探测失败」时出现，与结论行成对使用：
   结论行给数据，这个胶囊给建议。
   保持胶囊语汇（不用深色容器），暖色以区别于结论行的中性色。
   ========================================================= */

.net-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 7px 15px;
  border-radius: 16px;
  background: rgba(52, 36, 8, 0.5);
  border: 1px solid rgba(255, 176, 60, 0.5);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #ffd9a0;
  text-align: center;
}

.net-hint i {
  flex: 0 0 auto;
  font-size: 13px;
  color: #ffb03c;
}

/* 设了 display:flex 后必须显式还原 hidden 的语义 */
.net-hint[hidden] {
  display: none;
}

/* =========================================================
   站点点击统计行（累计引导人次）
   与结论行同一套胶囊语汇，但更轻一档：底衬更淡、文字更暗，
   避免和「网络实测」抢注意力。合计在正文，主站/备站拆分在 title 里。
   ========================================================= */

.stats-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding: 5px 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.84);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.stats-line i {
  flex: 0 0 auto;
  font-size: 11px;
  color: #ff99cc;
}

.stats-line[hidden] {
  display: none;
}

@keyframes probe-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* 主站明显更差时：备站胶囊染一层淡金底 + 金色描边，说明文字高亮为推荐语 */
.nav-cta-hint--pick {
  color: #ffe08a !important;
  opacity: 1 !important;
}

.cover-navigation--primary .navigation > .navigation__item > a.nav-cta--recommended {
  background-color: rgba(255, 199, 87, 0.2) !important;
  border-color: rgba(255, 199, 87, 0.62) !important;
}

.cover-navigation--primary .navigation > .navigation__item > a.nav-cta--recommended > i {
  color: #ffc857;
  opacity: 1;
}

/* =========================================================
   推广区「等高双条」结构
   ---------------------------------------------------------
   两张推广卡同宽、图片统一显示高度 → 卡片完全等高，不再一高一矮。
   · VPN 原图 7.03:1，312px 宽时自然高约 44px，基本不用裁
   · 桔风云原图 2.97:1，自然高 105px，用 object-fit:cover 居中裁到同高，
     保留中段的品牌与标题，裁掉上下留白
   （若之后把桔风云重做成 ~7:1 的图，这套样式无需改动，依旧是等高双条）
   ========================================================= */

.ad-banner .ad-img {
  display: block;
  width: 100%;
  height: 45px;
  object-fit: cover;
  object-position: center;
}

/* 说明文字统一压成一行，保证两张卡高度严格一致 */
.ad-banner .ad-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media all and (max-width: 960px) {
  /* ---- 移动端：站点入口不再藏在汉堡菜单后面 ----
     原主题把 .navigation-wrapper 整体 display:none，
     访客进页面看不到任何入口，必须先点右上角汉堡。
     对名片页来说这等于把核心目的藏起来了，故常驻显示。 */
  .btn-mobile-menu {
    display: none !important;
  }

  .navigation-wrapper {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 24px;
    background: transparent !important;
    border-bottom: none !important;
  }

  .navigation-wrapper .cover-navigation {
    float: none;
  }

  /* ⚠️ 必须清掉 vno.css 基础规则里的 float:left。
     否则 <ul class="navigation"> 会浮出父 div，父 div 高度塌成 0，
     紧随其后的社交导航容器 (.iUp) 会上移覆盖这三个按钮，
     导致按钮「看得见、点不动」（透明度 0.8 的容器仍然吃掉点击）。 */
  .navigation-wrapper .navigation {
    display: block;
    float: none;
    width: 100%;
  }

  /* 双保险：父容器清除浮动，确保高度被撑开 */
  .navigation-wrapper .cover-navigation::after {
    content: "";
    display: block;
    clear: both;
  }

  /* 注：入口组现在统一走上面的「玻璃卡片」布局（全宽度同一套），
     原先为对抗 vno.css 的 `li { width: 80% }` 而写的
     `.cover-navigation--primary .navigation > .navigation__item` 覆盖已不再需要。 */

  /* 窄屏：两个胶囊纵向堆叠，并**固定宽度**。
     原来撑满整个内容栏（390 屏上 312px，占屏宽 80%），显得太长。
     260px 取自内容实测：备站那行「备用站点 · 主站无法访问时用」自然宽 236px，
     留出余量给「按当前网络建议走这里」这种更长的推荐语。
     min(100%, 260px) 保证极窄屏（列宽不足 260px）时自动退让，不会溢出。 */
  .cover-navigation--primary .navigation {
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }

  .cover-navigation--primary .navigation > .navigation__item {
    width: min(100%, 260px) !important;
  }

  .cover-navigation--primary .navigation > .navigation__item > a {
    padding: 0 18px !important;
  }

  .navigation-wrapper .navigation__item a {
    display: block;
    text-align: center;
  }

  .navigation-wrapper.navigation--social,
  .navigation-wrapper .navigation--social {
    padding-top: 4px;
  }

  /* 面板允许纵向滚动 */
  .panel-cover {
    overflow-y: auto;
  }

  /* =========================================================
     首屏布局：名片主体占满一屏并垂直居中，推广区顺排在其下
     ---------------------------------------------------------
     原来是整块内容用 table-cell + vertical-align:middle 垂直居中。
     推广位一加、内容高度超过视口，居中就失效了 ——
     内容只能从顶部往下排，头像被顶到只剩 44px 留白的最上沿。

     拆成两块：
       .card-part  = 头像 / 名字 / 引文 / 入口胶囊 / 实测结论行 → 占满一屏并居中
       .promo-part = 分隔线 + 两张推广卡 → 首屏之下，滚动才可见
     ========================================================= */

  .panel-main,
  .panel-main__inner {
    display: block !important;
    height: auto !important;
  }

  .panel-main__inner {
    /* ⚠️ 只清垂直内边距（那部分改由 .card-part / .promo-part 负责），
       水平方向必须保留原来的 10%——它就是手机端内容栏 312px 的来源
       （390 × 80%）。清成 0 会让内容贴到屏幕两边。 */
    padding: 0 10% !important;
  }

  .card-part {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;   /* iOS 地址栏收放时按实际可视高度算 */
    padding: 40px 0;
  }

  /* 溢出安全的垂直居中：两个零高伪元素分走富余空间。
     内容不满一屏 → 居中；内容超过一屏 → auto 边距归零，从顶部开始，
     不会像 justify-content:center 那样把顶部内容顶出屏幕且滚不回去。 */
  .card-part::before,
  .card-part::after {
    content: "";
    flex: 0 0 0;
  }

  .card-part::before { margin-top: auto; }
  .card-part::after  { margin-bottom: auto; }

  .promo-part {
    width: 100%;
    padding-bottom: 48px;
  }
}

/* =========================================================
   页脚备案号 / 修正页脚定位
   vno.css 里 .remark 是 position:absolute; bottom:0，
   但它最近的定位祖先是 .panel-main__inner（position:relative），
   而非 #panel，所以页脚挂在「内容区底部」而不是「视口底部」——
   内容一高就被推到视口外（实测 y=961 / 视口 900），整块页脚看不见。

   这里把定位基准拉回视口，并修掉移动端被整块隐藏的问题。
   ========================================================= */

/* vno.css 的 .iUp 入场动画是 transform: translate3d(0,80px,0) → 0。
   页脚是最后一批触发动画的元素，实测动画未结束时仍带 translateY(60px)，
   导致整块页脚被推到视口下方完全看不见（fixed 定位也被 transform 牵连）。
   页脚本来就在视口底部，不需要入场位移动画，直接锁定。 */
.remark.iUp,
.remark.iUp.up {
  transform: none !important;
}

/* 备案号按工信部要求需全设备可见，vno.css 在 ≤960px 把整块 .remark 隐藏了，
   这里放开。字号沿用 .power 的 10px，不抢正文视觉。 */
.remark {
  position: fixed;
  bottom: 0;
  left: auto;
  right: 5px;
  z-index: 900;
  display: block !important;
  text-align: center;
  color: #fff;
  opacity: .6 !important;
  padding-bottom: 3px;
  padding-right: 18px;
  /* 原 letter-spacing:-3px 是为单行排版用的 hack，两行文字会挤在一起 */
  letter-spacing: normal;
  font-size: 0;
}

@media screen and (max-width: 960px) {
  .remark {
    /* 移动端空间窄，改为居中通栏，避免被内容盖住 */
    left: 0;
    right: 0;
    text-align: center;
    padding-right: 0;
  }
}

/* 备案号：单独一行，继承 .power 的字号与颜色 */
.remark .icp {
  display: block;
  margin-top: 2px;
  letter-spacing: normal;
}

.remark .icp a {
  color: #fff !important;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.remark .icp a:hover {
  text-decoration: underline;
  opacity: 0.85;
}