/* ═══════════════════════════════════════════════════════════
   Preview 专用核心样式（不与 Jinja2 引擎产生语法冲突）
   ── 此文件由浏览器直接加载，不经过 Jinja2 渲染管线
   ═══════════════════════════════════════════════════════════ */

/* === 全局加载指示 === */
#page-loading {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: var(--card, #ffffff);
  opacity: 1; transition: opacity .25s ease
}
#page-loading.hide { opacity: 0; pointer-events: none }
#page-loading .pl-spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--line-soft, rgba(15,23,42,.10));
  border-top-color: var(--brand, #0ea371);
  animation: pl-spin .9s linear infinite
}
#page-loading .pl-text { font-size: 13px; color: var(--ink-3, #64748b) }
@keyframes pl-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
  #page-loading .pl-spinner { animation: none }
}