/* 全站统一的加载转圈。
   - 默认透明，延迟 0.5 秒才出现：内容在 0.5 秒内加载完时，学生什么都不会看到。
   - 屏幕上不显示文字；使用时在元素上加 role="status" aria-label="正在加载"，读屏软件会读出来。
   用法：
     大块内容区  <div class="app-loading" role="status" aria-label="正在加载"></div>   （占位块内居中一个 32px 转圈）
     单独的转圈  <span class="app-spinner" role="status" aria-label="正在加载"></span>  （32px，行内）
     小位置      <span class="app-loading-sm" role="status" aria-label="正在加载"></span> （16px，行内）
   占位块的高度用 :where() 写，任何页面自己的 min-height 都能直接覆盖它。 */
:where(.app-loading) { display:grid; place-items:center; min-height:160px; }
.app-loading::after, .app-spinner, .app-loading-sm {
  box-sizing:border-box; width:32px; height:32px; border:3px solid #e3e4ea; border-top-color:#5b50ff; border-radius:50%;
  opacity:0; animation:app-loading-in 0s linear .5s forwards, app-loading-spin .8s linear infinite;
}
.app-loading::after { content:''; }
.app-spinner, .app-loading-sm { display:inline-block; vertical-align:middle; }
.app-loading-sm { width:16px; height:16px; border-width:2px; }
@keyframes app-loading-in { to { opacity:1; } }
@keyframes app-loading-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .app-loading::after, .app-spinner, .app-loading-sm { animation:app-loading-in 0s linear .5s forwards; }
}