/* ============================================================
   睡愈力 — 注册页 · 暖北欧风格
   与登录页完全一致的色板 & 哑光语言，仅适配注册表单元素
   ============================================================ */

/* ---- 变量（与登录页共用色板） ---- */
:root {
  --bg-deep:      #1a1b1f;
  --bg-surface:   #23242a;
  --bg-elevated:  #2c2d34;
  --text-primary: #e8e4df;
  --text-secondary: #9d9892;
  --text-muted:   #6b6560;
  --accent-copper: #c4815c;
  --accent-ember:  #d4946a;
  --accent-deep:   #a05e3d;
  --moon-amber:    #f0d9b5;
  --moon-cream:    #faf3e8;
  --error:         #d4735a;
  --success:       #7a9a7e;
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     24px;
  --font-serif:    "Noto Serif SC","STSong","SimSun","Songti SC","宋体",serif;
  --font-sans:     "PingFang SC","Microsoft YaHei","微软雅黑","Hiragino Sans GB","STHeiti",sans-serif;
  --transition:    220ms cubic-bezier(0.4,0,0.2,1);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background-color:var(--bg-deep);
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.003) 2px,rgba(255,255,255,0.003) 4px),
    radial-gradient(ellipse at 50% 30%,rgba(196,129,92,0.06) 0%,transparent 70%);
  font-family:var(--font-sans);
  color:var(--text-primary);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  padding:24px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
input{font-family:inherit;font-size:inherit;color:inherit;}

/* ---- 哑光环境光 ---- */
.ambient{position:fixed;border-radius:50%;filter:blur(180px);pointer-events:none;z-index:0;}
.ambient--top{width:700px;height:500px;top:-200px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(196,129,92,0.10) 0%,rgba(196,129,92,0.04) 40%,transparent 70%);}
.ambient--low{width:600px;height:400px;bottom:-150px;right:-100px;background:radial-gradient(ellipse at center,rgba(196,129,92,0.08) 0%,rgba(196,129,92,0.03) 40%,transparent 70%);}
.ambient--mid{width:500px;height:500px;top:40%;left:-150px;filter:blur(200px);background:radial-gradient(ellipse at center,rgba(240,217,181,0.05) 0%,transparent 70%);}

/* ---- 卡片 ---- */
.card{
  position:relative;z-index:1;
  display:flex;width:100%;max-width:880px;min-height:560px;
  background:var(--bg-surface);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 2px 40px rgba(0,0,0,0.45),0 1px 4px rgba(0,0,0,0.30);
}

/* ---- 左栏（与登录页完全一致） ---- */
.card__left{
  flex:0 0 48%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 36px;position:relative;
  background:
    radial-gradient(ellipse at 50% 55%,rgba(196,129,92,0.07) 0%,transparent 70%),
    var(--bg-elevated);
  border-right:1px solid rgba(255,255,255,0.04);
}
.brand-logo{display:block;margin-bottom:40px;text-decoration:none;}
.brand-logo img{height:36px;width:auto;display:block;opacity:0.90;transition:opacity var(--transition);}
.brand-logo:hover img{opacity:1;}

/* 月亮（与登录页同结构：光晕 → 月体 → 暗影） */
.moon-container{position:relative;width:120px;height:120px;margin-bottom:40px;}
.moon-glow{
  position:absolute;inset:-30px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(240,217,181,0.18) 0%,rgba(240,217,181,0.06) 50%,transparent 70%);
  filter:blur(20px);
  animation:moonBreathe 8s ease-in-out infinite;
}
@keyframes moonBreathe{0%,100%{opacity:0.7;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
.moon-body{
  position:absolute;width:100px;height:100px;top:10px;left:10px;border-radius:50%;
  background:radial-gradient(ellipse at 35% 35%,var(--moon-cream) 0%,var(--moon-amber) 40%,#d4b896 70%,#b8956e 100%);
  box-shadow:inset 0 0 30px rgba(0,0,0,0.15),0 0 60px rgba(240,217,181,0.12);
}
.moon-shadow{
  position:absolute;width:100px;height:100px;top:10px;left:28px;border-radius:50%;
  background:var(--bg-elevated);
  box-shadow:-8px 0 20px 8px var(--bg-elevated);
}

/* 文案 */
.card__poem{
  font-family:var(--font-serif);font-size:22px;font-weight:600;
  color:var(--text-primary);text-align:center;
  line-height:1.7;letter-spacing:0.06em;margin-bottom:16px;
}
.card__note{font-size:13px;color:var(--text-muted);text-align:center;line-height:1.8;letter-spacing:0.03em;}

/* ---- 右栏 ---- */
.card__right{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 40px;
}

.form-head{margin-bottom:28px;}
.form-head h2{font-family:var(--font-serif);font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:4px;}
.form-head p{font-size:14px;color:var(--text-muted);}

.form-body{display:flex;flex-direction:column;gap:18px;}

/* ---- 表单控件 ---- */
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:13px;font-weight:600;color:var(--text-secondary);}

/* 输入行 */
.input-row{
  display:flex;align-items:center;
  border-radius:var(--radius-sm);
  background:var(--bg-elevated);
  border:1px solid rgba(255,255,255,0.06);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.input-row:focus-within{border-color:var(--accent-copper);box-shadow:0 0 0 3px rgba(196,129,92,0.08);}
.input-row__prefix{padding:11px 0 11px 14px;font-size:14px;color:var(--text-muted);flex-shrink:0;user-select:none;}
.input-row input{
  flex:1;width:100%;padding:11px 14px;
  border:none;outline:none;background:none;
  font-size:14px;color:var(--text-primary);
}
.input-row input::placeholder{color:var(--text-muted);}
.input-row input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--bg-elevated) inset;-webkit-text-fill-color:var(--text-primary);}

/* 密码切换按钮 */
.input-row__action{padding:0 12px;flex-shrink:0;color:var(--text-muted);background:none;border:none;cursor:pointer;transition:color var(--transition);}
.input-row__action:hover{color:var(--text-secondary);}

/* 提示 */
.field__tip{font-size:12px;color:var(--error);opacity:0;max-height:0;overflow:hidden;transition:opacity 0.25s,max-height 0.25s;}
.field__tip.visible{opacity:1;max-height:18px;}

/* ---- 短信验证码按钮 ---- */
.input-row--with-btn{padding-right:8px;}
.sms-btn{
  flex-shrink:0;
  padding:7px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--accent-copper);
  background:transparent;
  color:var(--accent-ember);font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:all var(--transition);
}
.sms-btn:hover{background:rgba(196,129,92,0.08);}
.sms-btn:disabled{color:var(--text-muted);border-color:rgba(255,255,255,0.08);cursor:not-allowed;background:transparent;}

/* ---- 提交按钮 ---- */
.btn-submit{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:14px 0;
  border:none;border-radius:100px;
  background:linear-gradient(135deg,var(--accent-ember),var(--accent-copper));
  color:#fff;font-size:15px;font-weight:700;
  letter-spacing:0.06em;cursor:pointer;
  box-shadow:0 2px 16px rgba(196,129,92,0.18);
  transition:transform var(--transition),box-shadow var(--transition),opacity var(--transition);
  margin-top:4px;
}
.btn-submit:hover{transform:translateY(-1px);box-shadow:0 4px 24px rgba(196,129,92,0.28);}
.btn-submit:active{transform:translateY(0);}
.btn-submit:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none;}

/* ---- 反馈消息 ---- */
.form-msg{padding:12px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;text-align:center;}
.form-msg--error{background:rgba(212,115,90,0.10);color:var(--error);border:1px solid rgba(212,115,90,0.18);}
.form-msg--success{background:rgba(122,154,126,0.10);color:var(--success);border:1px solid rgba(122,154,126,0.18);}

/* ---- 底部链接 ---- */
.form-foot{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;color:var(--text-muted);}
.form-foot a{color:var(--accent-ember);font-weight:500;transition:color var(--transition);}
.form-foot a:hover{color:var(--text-primary);}

/* ---- 响应式 ---- */
@media (max-width:720px){
  body{padding:16px;align-items:flex-start;}
  .card{flex-direction:column;max-width:440px;min-height:auto;}
  .card__left{flex:auto;padding:24px 20px 0;flex-direction:row;flex-wrap:wrap;gap:12px;background:rgba(0,0,0,0.12);}
  .brand-logo{margin-bottom:0;}
  .moon-container{width:60px;height:60px;margin-bottom:0;}
  .moon-body,.moon-shadow{width:48px;height:48px;top:6px;}
  .moon-body{left:6px;}
  .moon-shadow{left:18px;}
  .moon-glow{inset:-14px;}
  .card__poem{font-size:15px;margin-bottom:0;}
  .card__note{display:none;}
  .card__right{padding:20px 20px 32px;}
  .form-head{margin-bottom:20px;}
}

@media (max-width:400px){
  .card__left{padding:18px 14px 0;}
  .card__right{padding:14px 14px 24px;}
}