/* 启动闪屏：HTML 解析即渲染，替代刷新时的纯白；React 挂载后自动淡出 */
#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #efede9;
  transition: opacity 0.25s ease;
}
/* 浏览器标签下隐藏原生启动屏复刻件，只显示小印章 */
#boot-splash .boot-appicon,
#boot-splash .boot-appname {
  display: none;
}
#boot-splash .boot-seal {
  width: 64px;
  height: 64px;
  display: block;
  /* 图记（/logo.svg）自带圆角方印与渐变，此处只管尺寸与落位。
     ⚠️ 阴影必须用 drop-shadow：它跟随 <img> 的 alpha 轮廓；
        box-shadow 会按矩形盒投出一圈方角阴影，把圆角印面衬成方块 */
  filter: drop-shadow(0 6px 14px rgba(150, 44, 34, 0.30));
}
/* 品牌名：拉丁字母用较紧的字距，避免比中文双字时显得松散 */
#boot-splash p {
  margin: 0;
  color: #8a867f;
  font: 500 12px/1 'Inter Tight', system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}
/* PWA 独立模式：原生启动屏（Android 画）消失的瞬间网页已绘制，
   本屏用同款图标 + 同构图（居中图标 ≈36vw、底部应用名）复刻原生屏，交接无缝 */
@media (display-mode: standalone) {
  #boot-splash .boot-seal,
  #boot-splash p {
    display: none;
  }
  #boot-splash .boot-appicon {
    display: block;
    width: clamp(120px, 36vw, 168px);
    height: auto;
    /* 图标用 icon-512.png：PNG 已按 logo.svg 的 rx 13.3/48 烘焙圆角，
       这里同步成同一半径（27.7%），两者叠加不会互相裁切 */
    border-radius: 27.7%;
  }
  #boot-splash .boot-appname {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
    text-align: center;
    color: #46433e;
    font: 400 14px/1.4 system-ui, sans-serif;
    letter-spacing: 0.08em;
  }
}
/* React 渲染完成（root 非空）→ 闪屏淡出并移除交互 */
#root:not(:empty) + #boot-splash {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s 0.25s;
}

/* ── 界面主题：暗色 ────────────────────────────────────────────────
   data-ui-theme 由 index.html 的首帧引导脚本在样式表之前落好，
   所以这里能真正挡住「暗色用户刷新时先闪一帧亮色闪屏」。
   取值与 src/index.css 的 --ui-* 面板保持一致。 */
html[data-ui-theme='dark'] #boot-splash {
  background: #131316;
}
html[data-ui-theme='dark'] #boot-splash p {
  color: #85848d;
}
@media (display-mode: standalone) {
  html[data-ui-theme='dark'] #boot-splash .boot-appname {
    color: #a6a5ad;
  }
}