/* 静态开机占位（与开机幕布 .boot-screen 同一套观感）。
         为什么要手写在这里：React 挂在 #root 里，#root 在 JS 下载/解析期间是空的，
         页面只剩浏览器默认白底——每次打开都先白一下；万一模块加载失败（典型诱因是
         陈旧 service worker 按 preCache 吐出已被新版本删掉的 chunk），这块白就永久停在
         那里，用户既看不到原因也没法自救。这段 HTML/CSS 不依赖任何 JS 与样式表，
         浏览器排版完就能画，把「白屏」变成「有内容的等待」，失败时再换成可重试的提示。 */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#root {
  min-height: 100%;
}
.boot-fallback {
  display: grid;
  min-height: 100vh;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 32px;
  box-sizing: border-box;
  /* 与 styles.css .boot-screen 同规：配色跟随用户主题设置。首帧时
           applyTheme 尚未写入 :root，由 <head> 的定调脚本在排版前同步读出
           localStorage 里的已存主题，把 --phone-accent / --phone-background /
           --phone-text 写到 :root；下面的 var() 兜底只在读不到主题（首次打开、
           隐私模式、损坏数据）时生效，等于默认主题「玫瑰玻璃」。
           占位自带底色（background: var(--boot-surface)），不像 React 幕布
           那样靠壳底，底色与动画色始终成套。 */
  --boot-ink: var(--phone-text, #34242b);
  --boot-accent: var(--phone-accent, #007aff);
  --boot-surface: var(--phone-background, #f2f2f7);
  color: color-mix(in srgb, var(--boot-ink) 80%, transparent);
  text-align: center;
  background: var(--boot-surface);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
/* 毛玻璃双圆加载动画：与 styles.css 的 .glass-loader 同款，颜色吃
         用户主题的强调色（定调脚本已把它写到 :root 的 --phone-accent）。 */
.boot-fallback-loader {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
}
.boot-fallback-loader > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: boot-fallback-drift 2s ease-in-out infinite;
}
.boot-fallback-loader > span:first-child {
  background: var(--boot-accent);
}
.boot-fallback-loader > span:last-child {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: color-mix(in srgb, var(--boot-accent) 8%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation-delay: -1s;
}
@keyframes boot-fallback-drift {
  0%,
  100% {
    transform: translateX(-38px);
  }
  50% {
    transform: translateX(38px);
  }
}
/* 「减少动态效果」下不停掉，只放慢：加载动画是这块占位唯一的反馈。 */
@media (prefers-reduced-motion: reduce) {
  .boot-fallback-loader > span {
    animation-duration: 8s !important;
    animation-iteration-count: infinite !important;
  }
}
/* 启动失败 / 过慢：同一槽位换成可操作的提示，别把用户留在空白里。 */
.boot-fallback-failed {
  gap: 14px;
}
.boot-fallback-failed-title {
  margin: 0;
  color: var(--boot-ink);
  font-size: 16px;
  font-weight: 600;
}
.boot-fallback-failed-hint {
  margin: 0;
  max-width: 15em;
  line-height: 1.6;
}
.boot-fallback-retry {
  margin-top: 4px;
  padding: 9px 22px;
  border: 0;
  border-radius: 99px;
  color: var(--phone-on-accent, #fff);
  background: var(--boot-accent);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
/* 禁止复制：与全局策略同源（styles.css / tokens.css 的
         * { user-select: none !important }）。这一屏必须自带一份——它排在应用
         样式表之前，而且模块加载失败时应用样式表与 main.tsx 的全局事件拦截都
         不会执行，失败态里的提示文字与「重新加载」按钮就成了整页仅存的可选中、
         可复制文本（长按还会弹出系统 callout 菜单）。后代选择器覆盖看门狗用
         innerHTML 注入的那几个节点。 */
.boot-fallback,
.boot-fallback * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}