/* ============================================================
   注册页 — 深海蓝流动海洋 · Deep Ocean Flow
   独特配色：深海蓝 → 电光青 → 波浪渐变
   流动感觉 + 左右分栏布局 + 步骤可视化
   ============================================================ */

.register-page {
  --r-bg: #06121a;
  --r-surface: #0a1a26;
  --r-card: #0e1f30;
  --r-primary: #00b4d8;
  --r-accent: #48cae4;
  --r-coral: #ff6b6b;
  --r-text: #8ca8b8;
  --r-title: #d8f0ff;
  --r-border: rgba(0,180,216,.15);
  --r-input-bg: rgba(255,255,255,.025);
  background: var(--r-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  position: relative;
}

/* 流动海洋背景 */
.register-page::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,180,216,.05), transparent),
    radial-gradient(ellipse 40% 40% at 20% 0%, rgba(72,202,228,.04), transparent),
    radial-gradient(ellipse 30% 30% at 80% 30%, rgba(0,180,216,.03), transparent);
  pointer-events: none; z-index: 0;
}
.register-page #site-header,
.register-page main,
.register-page #site-footer { position: relative; z-index: 1; }

.register-page main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 20px 40px;
}

/* 双栏卡片 */
.r-card {
  background: var(--r-card);
  border: 1px solid var(--r-border);
  border-radius: 24px;
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
@media (max-width: 700px) {
  .r-card { grid-template-columns: 1fr; max-width: 440px; }
}

/* 左侧品牌区 */
.r-card__left {
  background: linear-gradient(160deg, #0a1e30, #061825);
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.r-card__left::before {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,216,.06), transparent);
  pointer-events: none;
}
/* Logo — 与首页一致 */
.r-card__left-logo {
  margin-bottom: 24px;
}
.r-card__left-logo .header__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.r-card__left h2 {
  font-size: 28px; font-weight: 800;
  color: var(--r-title); margin-bottom: 10px;
}
.r-card__left p {
  font-size: 14px; color: #6a8a9a;
  line-height: 1.6;
  margin-bottom: 28px;
}
/* 三个步骤 */
.r-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.r-step {
  display: flex;
  align-items: center;
  gap: 14px;
}
.r-step__num {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px; font-weight: 800;
  color: var(--r-title);
  flex-shrink: 0;
}
.r-step:nth-child(1) .r-step__num { background: linear-gradient(135deg, #00b4d8, #48cae4); }
.r-step:nth-child(2) .r-step__num { background: linear-gradient(135deg, #00b4d8, #0096c7); }
.r-step:nth-child(3) .r-step__num { background: linear-gradient(135deg, #48cae4, #00b4d8); }
.r-step__text { font-size: 13px; color: #7a9aa8; }
.r-step__text strong { color: #b8e0f0; display: block; }

/* 右侧表单 */
.r-card__right {
  padding: 48px 36px;
}
.r-card__right-top { margin-bottom: 28px; }
.r-card__right-top h3 {
  font-size: 24px; font-weight: 800;
  color: var(--r-title); margin-bottom: 4px;
}
.r-card__right-top p {
  font-size: 13px; color: #6a8a9a;
}

.r-form .form-group { margin-bottom: 16px; }
.r-form label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: #8ca8b8; margin-bottom: 6px;
}
.r-form .r-input {
  width: 100%;
  padding: 13px 16px;
  font-size: 14px;
  color: var(--r-title);
  background: var(--r-input-bg);
  border: 1px solid var(--r-border);
  border-radius: 10px;
  outline: none;
  transition: all .3s;
}
.r-form .r-input:focus {
  border-color: rgba(0,180,216,.45);
  box-shadow: 0 0 0 4px rgba(0,180,216,.06);
}
.r-form .r-input::placeholder { color: #3a5a6a; }
.r-form .r-hint {
  font-size: 11px; color: #5a7a88;
  margin-top: 4px;
}

.r-btn {
  width: 100%;
  padding: 15px 0;
  font-size: 16px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #00b4d8, #48cae4);
  border: none; border-radius: 12px;
  cursor: pointer;
  transition: all .35s;
  box-shadow: 0 8px 28px rgba(0,180,216,.3);
  margin-top: 8px;
}
.r-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,180,216,.45);
}

.r-card__footer {
  text-align: center; margin-top: 22px;
  font-size: 14px; color: #6a8a9a;
}
.r-card__footer a {
  color: var(--r-accent); font-weight: 600;
  text-decoration: none;
}
.r-card__footer a:hover { text-decoration: underline; }

.r-error {
  font-size: 12px; color: #ff8a80;
  margin-top: 3px; display: none;
}

/* 返回首页按钮 — 卡片内醒目版 */
.auth-home-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 28px; margin-top: 20px;
  font-size: 14.5px; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  border: 1px solid rgba(6,182,212,.35);
  border-radius: 12px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(6,182,212,.22);
  transition: all .3s;
}
.auth-home-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(6,182,212,.42);
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
}