/* 《空号》公共样式：只放所有平台页面共用的部分，各页面自己的风格写在页面内的 <style> 里 */

* { margin:0; padding:0; box-sizing:border-box; }

body { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }

/* 进度徽章（右上角固定） */
.progress-badge {
  position:fixed; top:16px; right:20px; z-index:99999;
  background:rgba(18,18,20,.82); color:#e8e8ea;
  font-size:13px; font-weight:500; padding:5px 12px; border-radius:30px;
  font-family:ui-monospace,Consolas,monospace; letter-spacing:.5px;
  box-shadow:0 2px 10px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.16);
  white-space:nowrap; cursor:default;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

/* 通用头像（无图时用首字） */
.ava {
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:600; border-radius:50%; overflow:hidden; flex-shrink:0;
}

/* ===== 手机框架（落地页 / 微信等手机界面共用） ===== */
body.phone-bg {
  background:#111114; display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:20px;
}
.phone {
  width:400px; height:820px; margin:0 auto;
  background:#fff; border-radius:46px; overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 10px #2a2a2e, 0 0 0 12px #111;
  position:relative; display:flex; flex-direction:column;
}
.phone .status {
  height:46px; flex-shrink:0; padding:0 26px 0 30px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; font-weight:600; color:#111;
  position:relative; z-index:5;
}
.phone .status .icons { display:flex; align-items:center; gap:5px; font-size:11px; letter-spacing:-1px; }
.phone .notch {
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:104px; height:28px; background:#111; border-radius:16px; z-index:6;
}
.phone .screen { flex:1; overflow-y:auto; overflow-x:hidden; position:relative; }
.phone .screen::-webkit-scrollbar { width:0; }

/* 深色沉浸（夜间/恐怖段落用） */
body.dark { background:#0a0a0c; color:#c8c8cc; }

/* 图片已丢失占位
   本作刻意不补配图——照片看不了本身就是表现手法。
   不要用渐变或色块假装成照片。 */
.img-lost {
  background:#26262a;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; color:#5a5a62; font-size:11px; letter-spacing:1px; text-align:center;
}
.img-lost::before { content:"🗑"; font-size:17px; opacity:.5; }
.img-lost.light { background:#e8e6e0; color:#a8a49a; }