* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,"PingFang SC","Helvetica Neue",sans-serif; min-height:100vh; display:flex; flex-direction:column; background:#f5f5f0; }

/* 顶部导航 */
.top-nav { background:#fff; border-bottom:1px solid #e5e5e5; padding:0 40px; height:52px; display:flex; align-items:center; justify-content:space-between; }
.top-nav .logo { font-size:18px; font-weight:700; color:#1a1a1a; text-decoration:none; letter-spacing:1px; }
.top-nav .links a { color:#666; text-decoration:none; font-size:13px; margin-left:20px; }
.top-nav .links a:hover { color:#1a1a1a; }

/* 主体 */
.register-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.register-panel { background:#fff; border-radius:16px; padding:40px; width:100%; max-width:480px; box-shadow:0 2px 20px rgba(0,0,0,.06); }
.register-title { font-size:24px; font-weight:700; text-align:center; margin-bottom:6px; color:#1a1a1a; }
.register-subtitle { text-align:center; color:#999; font-size:14px; margin-bottom:28px; }

/* 表单 */
.field { margin-bottom:18px; }
.field label { display:block; font-size:13px; color:#555; margin-bottom:6px; font-weight:500; }
.field label .required { color:#e74c3c; margin-left:2px; }
.field label .optional { color:#bbb; font-size:12px; font-weight:400; }
.field input, .field select { width:100%; height:46px; border:1.5px solid #ddd; border-radius:10px; padding:0 14px; font-size:15px; outline:none; transition:border-color .2s; background:#fff; }
.field input:focus, .field select:focus { border-color:#386641; }
.field input::placeholder { color:#bbb; }

/* 验证码行 */
.code-row { display:flex; gap:10px; }
.code-row input { flex:1; }
.code-btn { height:46px; padding:0 16px; background:#eef5e8; color:#386641; border:1.5px solid #ddebd3; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .2s; }
.code-btn:hover { background:#ddebd3; }
.code-btn:disabled { color:#bbb; background:#f5f5f5; border-color:#eee; cursor:not-allowed; }

/* 密码强度 */
.pwd-strength { display:flex; gap:4px; margin-top:6px; height:3px; }
.pwd-strength span { flex:1; background:#eee; border-radius:2px; transition:background .3s; }
.pwd-strength.weak span:nth-child(1) { background:#e74c3c; }
.pwd-strength.medium span:nth-child(1), .pwd-strength.medium span:nth-child(2) { background:#e67e22; }
.pwd-strength.strong span { background:#386641; }

/* 协议勾选 */
.agreement { display:flex; align-items:flex-start; gap:8px; margin:20px 0; }
.agreement input[type="checkbox"] { margin-top:3px; accent-color:#386641; width:16px; height:16px; }
.agreement label { font-size:13px; color:#666; line-height:1.5; cursor:pointer; }
.agreement label a { color:#386641; text-decoration:none; }
.agreement label a:hover { text-decoration:underline; }

/* 按钮 */
.register-btn { width:100%; height:48px; background:#386641; color:#fff; border:none; border-radius:10px; font-size:16px; font-weight:600; cursor:pointer; transition:all .2s; }
.register-btn:hover { background:#2d5234; }
.register-btn:disabled { background:#ccc; cursor:not-allowed; }

/* 提示 */
.message { text-align:center; font-size:13px; margin-top:12px; min-height:20px; }
.message.error { color:#e74c3c; }
.message.success { color:#386641; }

/* 底部链接 */
.bottom-links { text-align:center; margin-top:20px; font-size:13px; color:#999; }
.bottom-links a { color:#386641; text-decoration:none; }

/* 分隔线 */
.divider { display:flex; align-items:center; gap:12px; margin:24px 0; }
.divider .line { flex:1; height:1px; background:#eee; }
.divider span { font-size:12px; color:#ccc; white-space:nowrap; }

/* 微信注册 */
.wx-register { width:100%; height:48px; background:#07c160; color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .2s; }
.wx-register:hover { background:#06ad56; }
.wx-register svg { width:20px; height:20px; }

/* 页脚 */
.page-footer { text-align:center; padding:20px; font-size:12px; color:#ccc; }
.page-footer a { color:#ccc; text-decoration:none; }
.page-footer a:hover { color:#999; }

@media (max-width:768px) {
  .register-wrap { padding:20px 12px; }
  .register-panel { padding:28px 20px; }
  .top-nav { padding:0 16px; }
  .field input, .field select { height:44px; font-size:15px; }
  .code-btn { height:44px; padding:0 14px; }
}
@media (max-width:480px) {
  .register-panel { padding:20px 16px; }
  .register-title { font-size:20px; }
  .field input, .field select { height:42px; }
}