:root {
  --bg: #f6f7fb;
  --bg-2: #eaf0f7;
  --fg: #0f172a;
  --muted: #475569;
  --card: rgba(255, 255, 255, 0.75);
  --card-stroke: rgba(15, 23, 42, 0.08);
  --blur: 12px;
  --accent: #8089f4; /* 绿 */
  --accent-2: #8089f4; /* 青 */
}
meta[name="theme-color"] {
  content: #f6f7fb;
}

/* 启动页 */
.splash {
  position: fixed;
  inset: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(1200px 1200px at 10% 20%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 60%), radial-gradient(900px 900px at 90% 80%, color-mix(in oklab, var(--accent-2) 20%, transparent), transparent 60%), linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.splash.is-leaving {
  opacity: 0;
  transform: scale(1.02);
}

/* 玻璃拟态卡片容器 */
.splash-card {
  position: relative;
  width: min(92vw, 420px);
  margin: 0 auto;
  padding: 24px 20px 20px;
}

/* 双环旋转器 */
.spinner {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 6px auto 14px;
}
.spinner::before,
.spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}
/* 外环：双色渐变 */
.spinner::before {
  border-top-color: var(--accent);
  border-right-color: color-mix(in oklab, var(--accent-2) 80%, var(--accent));
  animation: spin 0.9s linear infinite;
  box-shadow: 0 0 0 1px transparent, 0 0 22px color-mix(in oklab, var(--accent) 35%, transparent);
}
/* 内环：反方向旋转 */
.spinner::after {
  inset: 8px;
  border-left-color: color-mix(in oklab, var(--accent-2) 85%, var(--accent));
  border-bottom-color: color-mix(in oklab, var(--accent) 70%, var(--accent-2));
  animation: spin-rev 1.2s linear infinite;
  opacity: 0.9;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin-rev {
  to {
    transform: rotate(-360deg);
  }
}

.message {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  min-height: 1.5em;
  user-select: none;
}

/* 闪动进度条（不定进度） */
.progress {
  position: relative;
  height: 4px;
  width: min(72vw, 280px);
  margin: 12px auto 4px;
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.progress .bar {
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 20%, transparent) 0%, color-mix(in oklab, var(--accent-2) 60%, transparent) 50%, color-mix(in oklab, var(--accent) 20%, transparent) 100%);
  border-radius: inherit;
  transform: translateX(-100%);
  animation: indeterminate 1.2s ease-in-out infinite;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-2) 40%, transparent);
}
@keyframes indeterminate {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(15%);
  }
  100% {
    transform: translateX(100%);
  }
}

.tips {
  text-align: center;
  font-size: 12px;
  color: color-mix(in oklab, var(--fg) 70%, transparent);
  opacity: 0.85;
  margin-top: 6px;
  min-height: 1.2em;
  user-select: none;
}

#app {
  position: relative;
  z-index: 99;
}

/* 减少动态效果时，停用不必要动画 */
@media (prefers-reduced-motion: reduce) {
  .splash::before,
  .splash::after,
  .spinner::before,
  .spinner::after,
  .progress .bar {
    animation: none !important;
  }
}
/* 小屏优化 */
@media (max-width: 360px) {
  .splash-card {
    padding: 18px 14px 14px;
    border-radius: 14px;
  }
  .spinner {
    width: 48px;
    height: 48px;
  }
}