* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --c1: #36d1dc;
  --c2: #5b86e5;
  --c3: #ff9a9e;
  --c4: #fbc687;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: #1f2d3d;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 渐变背景 + 浮动光斑 */
.bg-scene {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(135deg, #a8edea 0%, #c2e9fb 35%, #e0c3fc 70%, #fbc2eb 100%);
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: 0.65;
  animation: float 14s ease-in-out infinite;
}
.b1 { width: 420px; height: 420px; background: var(--c1); top: -120px; left: -80px; }
.b2 { width: 380px; height: 380px; background: var(--c2); bottom: -140px; left: 20%; animation-delay: -3s; }
.b3 { width: 360px; height: 360px; background: var(--c3); top: 10%; right: -100px; animation-delay: -6s; }
.b4 { width: 300px; height: 300px; background: var(--c4); bottom: -80px; right: 12%; animation-delay: -9s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -40px) scale(1.08); }
}

.auth-wrap {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px;
}

.brand { text-align: center; margin-bottom: 26px; color: #1c3a5e; }
.brand-logo {
  width: 72px; height: 72px; margin: 0 auto 12px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 14px 30px rgba(91, 134, 229, 0.45);
  padding: 14px;
}
.brand-logo svg { width: 100%; height: 100%; }
.brand h1 { font-size: 30px; letter-spacing: 1px; font-weight: 800; }
.brand p { margin-top: 6px; font-size: 14px; opacity: 0.75; }

.glass-card {
  width: 100%; max-width: 400px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 26px;
  padding: 28px 28px 24px;
  box-shadow: 0 20px 50px rgba(70, 110, 180, 0.22);
}

.tabs {
  display: flex; gap: 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 14px; padding: 5px; margin-bottom: 22px;
}
.tab {
  flex: 1; border: 0; background: transparent;
  padding: 10px 0; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: #5a7089;
  cursor: pointer; transition: all 0.25s;
}
.tab.active {
  color: #2b5fb2;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(91, 134, 229, 0.25);
}

.form { display: none; flex-direction: column; gap: 14px; }
.form.active { display: flex; }

.field {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  padding: 0 14px;
  transition: all 0.2s;
}
.field:focus-within {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 3px rgba(91, 134, 229, 0.18);
}
.field-ico { width: 20px; height: 20px; color: #7b93b0; flex-shrink: 0; }
.field-ico svg { width: 100%; height: 100%; }
.field input {
  flex: 1; border: 0; background: transparent; outline: none;
  height: 46px; font-size: 15px; color: #233;
}
.field input::placeholder { color: #93a4b8; }

.btn-primary {
  margin-top: 4px;
  height: 48px; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 3px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(91, 134, 229, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:active { transform: scale(0.97); }

.auth-msg {
  margin-top: 14px; min-height: 20px;
  text-align: center; font-size: 13px; color: #e04f5f;
}
.auth-msg.ok { color: #1f9d68; }

.copyright { margin-top: 24px; font-size: 12px; color: #4a6483; opacity: 0.7; }

@media (max-width: 420px) {
  .brand h1 { font-size: 24px; }
  .glass-card { padding: 22px 18px; border-radius: 22px; }
}