/* 文件用途（白话）：集中定义认证结果未确定或网络不可用时的独立页面外观，不与登录密码输入框样式混在一起。 */

/* 代码作用（白话）：在极少数应用已挂载但路由仍未完成的时序中，保持中性背景而不向视觉界面显示认证提示文字。关联文件：App.js、main.js、index.html。关联逻辑（调用链/数据流）：HTML 启动底图 -> Vue 挂载前等待路由 -> 此样式作为 App 认证分支的视觉兜底 -> 实际路由页面。 */
.auth-loading {
  min-height: 100vh;
  font-size: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* 代码作用（白话）：在认证服务不可连接时展示独立的重试页面，避免错误地显示后台或跳转登录页。关联文件：App.js、auth-store.js、router/index.js。关联逻辑（调用链/数据流）：会话请求网络失败 -> connectionError=true -> App 网络异常分支 -> 用户重新连接。 */
.auth-network-error {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  color: #e8eefc;
  background: radial-gradient(circle at 20% 15%, rgba(92, 118, 173, .2), transparent 32%), radial-gradient(circle at 82% 78%, rgba(98, 77, 148, .18), transparent 28%), #0d1524;
}

.auth-network-error__panel {
  width: min(420px, 100%);
  padding: 34px;
  border: 1px solid rgba(226, 232, 240, .12);
  border-radius: 16px;
  text-align: center;
  background: rgba(18, 28, 48, .72);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
}

.auth-network-error__panel h1 { margin: 0; font-size: 22px; }
.auth-network-error__panel p { margin: 14px 0 24px; color: rgba(226, 232, 240, .72); line-height: 1.7; }
.auth-network-error__panel button { min-width: 112px; height: 38px; border: 0; border-radius: 7px; color: #fff; background: #5b7ed0; cursor: pointer; }
