/* ═══════════════════════════════════════════════════════════════
   字醒啦 · 故障页共用底座（断网 / 空 / 骨架）
   --------------------------------------------------------------
   2026-11-02 第十版（她：照参考做一比一复刻，但不要机型那一套）：
   三页各照一张参考 ——
     断网  → 安卓「壁纸不可用」：左对齐 7%、图标、标题、灰码、实心白按钮
     空    → iOS「敏感内容」：居中、图标、标题、三行正文
     骨架  → 蓝屏：左对齐 12%、巨大的 :(、多行说明、底部停止码

   这一版只放三页共用的东西：黑底、白字、站头压黑、灰码、实心按钮。
   版式（对齐、字号、间距）各页自己写在自己的 <style> 里 ——
   因为三张参考本来就不是一套版式，硬合成一套就不像了。

   没有状态栏、没有 5/10 页码、没有左上角 ×、没有二维码：
   那是机型的壳，不是设计。网页上对应的东西是站头。
   ═══════════════════════════════════════════════════════════════ */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:#000; }
body{
  min-height:100vh; background:#000; color:#fff;
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow-x:hidden;
}
a{ color:inherit; }
::selection{ background:#fff; color:#000; }

/* 站头压在黑底上（和 404 同一套做法） */
.sitebar{ background:transparent !important; border-bottom:0 !important; }
.sitebar, .sitebar a{ color:rgba(255,255,255,.72); }
.sitebar .brand .cn{ color:rgba(255,255,255,.45); }
.sitebar nav{ border-color:rgba(255,255,255,.16); }
.sitebar nav a{ border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.62); }
.sitebar nav a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.sitebar .go{ border-color:rgba(255,255,255,.34); color:#fff; }
.sitebar .go:hover{ background:transparent; color:#fff; border-color:#fff; }

/* 内容区：让开站头，剩下的交给各页。默认上下居中 ——
   参考里三块内容都压在中段（中心约在 49%），不是贴着顶。 */
.stage{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--bar-h) + 6vh); padding-bottom:8vh;
}

/* 灰色错误码：模板里唯一的一档灰（实测 #7A7A7A，约 50% 白） */
.code{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  color:#7a7a7a;
}

/* 实心白按钮：模板里唯一的一种按钮（黑底上唯一一块白） */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 26px;
  background:#fff; color:#000; border:0; border-radius:2px;
  font-family:inherit; font-size:15px; font-weight:500; letter-spacing:.02em;
  cursor:pointer; transition:opacity .18s ease;
}
.btn:hover{ opacity:.82; }
.btn:focus-visible{ outline:1px dotted #fff; outline-offset:4px; }
.btn[disabled]{ opacity:.45; cursor:default; }

/* 次要出口：一条细下划线，白 66% */
.alt{
  font-size:15px; color:rgba(255,255,255,.66); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:3px;
  transition:color .18s ease, border-color .18s ease;
}
.alt:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.7); }
.alt:focus-visible{ outline:1px dotted #fff; outline-offset:4px; }

/* 页面进场：很轻，不抢字 */
main{ animation:pageIn .6s ease-out both; }
@keyframes pageIn{ from{ opacity:0 } }

@media (max-width:760px){
  .stage{ padding-top:calc(var(--bar-h-sm) + 5vh); padding-bottom:6vh; }
}