/* Available before the application bundle and its theme stylesheet arrive. */
body { margin: 0; }
.app-bootstrap {
  --boot-bg: #f5f7fa;
  --boot-surface: #fff;
  --boot-text: #253447;
  --boot-muted: #75818c;
  --boot-line: #e2e8ef;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: clamp(56px, 16vh, 160px) 24px 48px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 210, 74, .1), transparent 55%), var(--bg, var(--boot-bg));
  color: var(--text, var(--boot-text));
  font-family: var(--font-ui, "PingFang SC"), "Microsoft YaHei", sans-serif;
  line-height: 1.7;
  text-align: center;
  overflow-wrap: anywhere;
}
:root[data-theme="dark"] .app-bootstrap { --boot-bg: #151d29; --boot-surface: #1c2838; --boot-text: #edf2f8; --boot-muted: #a5b4c8; --boot-line: #354255; }
.bootstrap-brand { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted, var(--boot-muted)); }
.bootstrap-mark { display: grid; place-items: center; padding: 10px; border: 1px solid var(--line, var(--boot-line)); border-radius: 24px; background: var(--surface, var(--boot-surface)); box-shadow: 0 8px 28px rgba(37, 52, 71, .06); }
.bootstrap-mark img { display: block; width: 64px; height: 64px; border-radius: 16px; }
.app-bootstrap h1 { margin: 8px 0 0; font-size: clamp(23px, 4vw, 28px); font-weight: 650; line-height: 1.4; }
.app-bootstrap p { max-width: 440px; margin: 0; color: var(--muted, var(--boot-muted)); font-size: 14px; }
.app-bootstrap .bootstrap-help { font-size: 12px; }
.bootstrap-indicator { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; }
.bootstrap-indicator > span { width: 6px; height: 6px; border-radius: 50%; background: #e3b332; animation: bootstrap-dot 1.5s ease-in-out infinite; }
.bootstrap-indicator > span:nth-child(2) { animation-delay: .18s; }
.bootstrap-indicator > span:nth-child(3) { animation-delay: .36s; }
.app-bootstrap .bootstrap-retry { min-height: 44px; margin-top: 4px; padding: 10px 24px; border: 1px solid #efc650; border-radius: 11px; background: linear-gradient(150deg, #ffdf72, #ffd24a); color: #253447; font: inherit; font-weight: 600; cursor: pointer; }
.bootstrap-retry:focus-visible { outline: 2px solid #6289ae; outline-offset: 3px; }
.bootstrap-retry:disabled { opacity: .6; cursor: wait; }
@keyframes bootstrap-dot { 0%, 100% { opacity: .4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 480px) { .app-bootstrap { padding-top: 16vh; padding-inline: 20px; } }
@media (prefers-reduced-motion: reduce) { .bootstrap-indicator > span { animation: none; opacity: .75; } }
