/* loading-auth.css —— 加载页（开屏动画）+ 登录 / 注册页 */

/* ====================== 加载页 ====================== */
#page-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: linear-gradient(165deg, #eaf6ff 0%, #ffffff 55%, #f3f0fd 100%);
  color: var(--text-title);
  z-index: 500; overflow: hidden;
}
#page-loading.active { display: flex; }
#page-loading:not(.active) { display: none !important; }

/* 图形主体：一个渐变三角形代表棱镜，外圈一圈柔光彩色光晕缓慢旋转，
   三个小圆点代表分散的光在轻轻脉动——简洁的抽象表达，不再画一堆光线 */
.loading-scene {
  width: 168px; height: 168px; position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
}
.prism-halo {
  position: absolute; inset: 6px; border-radius: 50%;
  background: conic-gradient(from 0deg, #ff5252, #ffb300, #4caf50, #42a5f5, #ab47fc, #ff5252);
  opacity: .18; filter: blur(10px);
  animation: haloSpin 7s linear infinite;
}
@keyframes haloSpin { to { transform: rotate(360deg); } }

.prism-mark { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.prism-triangle {
  width: 86px; height: 76px;
  background: linear-gradient(160deg, var(--primary), var(--accent) 55%, #7e57c2 120%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 0 12px 26px rgba(79,195,247,0.32);
  animation: triFloat 2.6s ease-in-out infinite;
}
@keyframes triFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.prism-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; animation: dotPulse 1.8s ease-in-out infinite; }
.dot-red   { background: #ff5252; top: 4px; right: 0; animation-delay: 0s; }
.dot-green { background: #4caf50; bottom: 16px; left: -8px; animation-delay: .3s; }
.dot-blue  { background: #42a5f5; bottom: 2px; right: 14px; animation-delay: .6s; }
@keyframes dotPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* 品牌信息：小巧克制，不做成怼在正中间的大标题 */
.loading-brand { display: flex; align-items: baseline; gap: 8px; }
.loading-brand-cn {
  font-size: 22px; font-weight: 800; letter-spacing: 4px;
  font-family: var(--font-display); color: var(--text-title);
}
.loading-brand-en { font-size: 10px; letter-spacing: 2px; color: var(--text-tip); text-transform: uppercase; }
.loading-status { font-size: 12px; color: var(--text-tip); letter-spacing: .3px; margin: 10px 0 24px; }
.loading-dots span { opacity: 0; animation: dotBlink 1.4s infinite; }
.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dotBlink { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }

.loading-bar {
  width: 140px; height: 3px; border-radius: 2px; overflow: hidden;
  background: var(--border-light); position: relative;
}
.loading-bar-fill {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, var(--primary), var(--accent), #7e57c2);
  border-radius: 2px;
  animation: barSweep 1.3s ease-in-out infinite;
}
@keyframes barSweep { 0% { left: -40%; } 100% { left: 100%; } }

/* ====================== 登录/注册页 ====================== */
.auth-page { padding: 24px; }
.auth-title {
  font-size: 24px; font-weight: 700; color: var(--text-title);
  margin-bottom: 30px; text-align: center; font-family: var(--font-display);
}
.avatar-select {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.avatar-option {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-page); border: 2px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--accent);
  cursor: pointer; transition: border-color .15s;
}
.avatar-option.selected { border-color: var(--primary); background: #e1f5fe; }
.avatar-option.has-img { background-size: cover; background-position: center; font-size: 0; }
.avatar-upload-tile {
  border-style: dashed; border-color: var(--text-tip); color: var(--text-tip); font-size: 16px;
}
.avatar-upload-tile.has-img { border-style: solid; border-color: var(--primary); }