/* ==========================================================================================
   screens/about.css — 「关于服务器」页 (js/screens/about.js)

   整屏覆盖层；正文用一列可读宽度（约 900px）居中，不套统计页那套 max-width: 760px 的外壳。
   主要区块：服务器怎么维持 / 赞助方式（两个码） / 贡献名单。
   ========================================================================================== */

.sp-about-open .app-root > .screen { visibility: hidden; }

.about {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--bg-deep, #080a09); color: var(--text-md); overflow: hidden;
}
.about__top {
  position: relative; z-index: 1;   /* ★ 必须定位：装饰层 .st__bg 是绝对定位且带 z-index，会盖住未定位的内容（曾导致整页空白） */
  flex: none; display: flex; align-items: center; gap: .2rem;
  padding: .16rem .3rem; border-bottom: 1px solid var(--line);
}
.about__top-left { flex: none; }
.about__top-center { flex: 1 1 auto; text-align: center; }
.about__top-right { flex: none; }

.about__body {
  position: relative; z-index: 1;   /* ★ 同上：必须定位，否则被 .st__bg 盖住 */
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: .18rem;
  padding: .24rem .3rem .4rem;
  width: 100%; max-width: max(12rem, 900px); margin: 0 auto;
}
.about__card {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .2rem .22rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
}
.about__h2 {
  margin: 0 0 .04rem; color: var(--text-hi); font-size: max(.22rem, 16px); font-weight: 700;
  display: flex; align-items: baseline; gap: .12rem;
}
.about__h2 small { color: var(--text-lo); font-size: max(.13rem, 11px); font-weight: 400; }
.about__p { margin: 0; color: var(--text-md); font-size: max(.16rem, 13px); line-height: 1.9; }
.about__thanks { margin: .06rem 0 0; color: var(--mint-400); font-size: max(.17rem, 14px); font-weight: 700; }
.about__note { margin: .04rem 0 0; color: var(--text-lo); font-size: max(.14rem, 12px); line-height: 1.8; }

/* 两个码：图片已经裁成二维码本体，这里只给一个合适的尺寸（原图带页眉页脚时太大） */
.about__codes { display: flex; flex-wrap: wrap; gap: .24rem; align-items: flex-start; }
.about__code { margin: 0; display: flex; flex-direction: column; gap: .06rem; align-items: center; width: max(2.6rem, 210px); }
.about__img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  background: #fff; border: 1px solid var(--line-2); padding: .04rem;
}
.about__code figcaption { display: flex; flex-direction: column; align-items: center; gap: .02rem; text-align: center; }
.about__code figcaption b { color: var(--text-hi); font-size: max(.16rem, 13px); }
.about__code figcaption small { color: var(--text-lo); font-size: max(.13rem, 11px); }
.about__code.is-missing::before {
  content: '码图缺失'; display: grid; place-items: center; width: 100%; height: max(4rem, 260px);
  border: 1px dashed var(--line-2); color: var(--text-lo); font-size: max(.14rem, 12px);
}

/* 贡献名单：一行一位 —— 左边名字，右边金额 */
.about__loading { display: grid; place-items: center; padding: .2rem; }
.about__donors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .04rem; max-width: max(8rem, 620px); }
.about__donor {
  display: flex; align-items: baseline; gap: .14rem; padding: .09rem .16rem;
  border: 1px solid var(--line); background: rgba(63, 214, 165, .05);
}
.about__donor-name { flex: none; color: var(--text-hi); font-size: max(.17rem, 14px); font-weight: 700; }
.about__donor-note { flex: 1 1 auto; min-width: 0; color: var(--text-lo); font-size: max(.12rem, 11px); overflow-wrap: anywhere; }
.about__donor-amount {
  flex: none; margin-left: auto; color: var(--mint-400);
  font-size: max(.17rem, 14px); font-weight: 700; font-variant-numeric: tabular-nums;
}

.about__foot { margin: .1rem 0 0; text-align: center; color: var(--text-dim, var(--text-lo)); font-size: max(.13rem, 11px); }

@media (max-width: 820px) {
  .about__body { padding: .16rem .16rem .3rem; }
  .about__codes { gap: .16rem; }
  .about__code { width: 100%; }
  .about__img { max-height: none; }
}