/* =========================
   register.css - 注册页专属
   config.css 只放 :root 变量
   ========================= */

*{ box-sizing:border-box; }

.register-page{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#fff;
  color: var(--text-color);
}

/* 兜底变量（config 没有时也不炸） */
:root{
  --reg-text: #111827;
  --reg-muted: #9CA3AF;
  --reg-line: #E5E7EB;
  --reg-danger: #EF4444;
  --reg-radius: 18px;
  --reg-shadow: 0 24px 60px rgba(0,0,0,.18);
}

/* 布局 */
.page{ position:relative; min-height:100vh; overflow:hidden; }
.bg{ position:absolute; inset:0; z-index:1; }
.bg img{ width:100%; height:100%; object-fit:cover; }

.wrap{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

.card{
  width:520px;
  background:rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-radius: var(--reg-radius);
  box-shadow: var(--reg-shadow);
  padding:28px 28px 24px;
  color: var(--reg-text);
}

/* 顶栏 */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:42px;
  position:relative;
}

.back{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
}
.back:hover{ background:#F3F4F6; }

/* 返回箭头：全局 icon 色 */
.back-ico path{ stroke: var(--icon-color); }

.title{
  text-align:center;
  font-size:34px;
  font-weight:800;
  margin:12px 0 18px;
  color: var(--reg-text);
}

/* 输入框 */
.field{ position:relative; margin:14px 0; }
.input{
  width:100%;
  height:56px;
  border:1px solid var(--reg-line);
  border-radius:12px;
  padding:0 16px 0 52px; /* 给 icon 留位置 */
  font-size:16px;
  outline:none;
  background:#fff;
  color: var(--reg-text);
}
.input::placeholder{ color:#B0B7C3; }

.input:focus{
  border-color: var(--btn-bg);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

/* 图标：统一走全局按钮色（也可改成 var(--icon-color)） */
.icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  pointer-events:none;
}
.icon path,
.icon circle,
.icon rect{
  stroke: var(--btn-bg);
}

/* 错误提示（可选） */
.error-msg{
  display:none;
  margin-top:8px;
  font-size:13px;
  color: var(--reg-danger);
  line-height:1.2;
}
.field.is-error .input{
  border-color: var(--reg-danger);
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}
.field.is-error .error-msg{ display:block; }

/* 手机号 + 区号 */
.phone-row{
  display:flex;
  gap:10px;
  align-items:center;
}

/* 区号 select */
.phone-row .address{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  display:flex;
  align-items:center;

  padding:0 34px 0 40px;
  line-height:56px;
  height:56px;

  background:#fff;
  border:1px solid var(--reg-line);
  border-radius:12px;

  font-weight:600;
  color: var(--reg-text);
  min-width:120px;

  background-image:
    linear-gradient(45deg, transparent 50%, #9CA3AF 50%),
    linear-gradient(135deg, #9CA3AF 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* 验证码行 */
.code-row{
  display:flex;
  gap:10px;
  align-items:center;
}

/* SEND 按钮：用全局色 */
.btn-code{
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  min-width:92px;

  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.18);
  border-radius:12px;

  padding:0 14px;
  cursor:pointer;
  font-weight:800;
  color: var(--reg-text);
  text-decoration:none;
  user-select:none;
  line-height:1;
}
.btn-code:hover{ filter: brightness(0.98); }
.btn-code:active{ transform:translateY(1px); }
.btn-code.disabled{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}

/* 协议 */
.agree{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:10px 2px 16px;
  font-size:13px;
  color:#6B7280;
  line-height:1.4;
}
.agree input{
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color: var(--btn-bg);
  flex:0 0 auto;
}
.agree a{
  color: var(--btn-bg);
  text-decoration:none;
  font-weight:700;
}
.agree a:hover{ text-decoration:underline; }

/* 注册按钮：全局按钮色 */
.btn{
  width:100%;
  height:60px;
  border:none;
  border-radius:12px;
  background: var(--btn-bg);
  color: var(--text-color);
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 12px 22px rgba(0,0,0,.18);
  transition:.15s;
}
.btn:hover{ filter: brightness(0.96); }
.btn:active{ transform:translateY(1px); }

.bottom-link{
  margin-top:14px;
  text-align:center;
  font-size:14px;
  color: var(--reg-muted);
}
.bottom-link a{
  color: var(--btn-bg);
  font-weight:800;
  margin-left:6px;
  text-decoration:none;
}
.bottom-link a:hover{ text-decoration:underline; }

.illu-mobile{ display:none; margin-top:18px; }
.illu-mobile img{ width:100%; height:auto; display:block; }

/* 手机端 */
@media (max-width: 768px){
  .bg{ display:none; }
  .wrap{ padding:14px 18px 18px; align-items:flex-start; }
  .card{
    width:100%;
    max-width:360px;
    margin:0 auto;
    padding:10px 0 0;
    background:#fff;
    box-shadow:none;
    border-radius:0;
  }
  .title{ font-size:30px; margin:14px 0 14px; }
  .field{ margin:12px 0; }
  .input{
    height:48px;
    border-radius:10px;
    font-size:14px;
    padding-left:46px;
  }
  .icon{ left:14px; width:18px; height:18px; }

  .phone-row .address{
    height:48px;
    line-height:48px;
    border-radius:10px;
    padding:0 32px 0 40px;
    min-width:108px;
    font-size:13px;
  }

  .btn-code{
    height:48px;
    border-radius:10px;
    min-width:84px;
    font-size:13px;
  }

  .btn{
    height:52px;
    font-size:16px;
    border-radius:10px;
    box-shadow:none;
  }
  .illu-mobile{ display:block; }
}

/* ===== 语言下拉组件补丁（避免默认铺开） ===== */
.card .nav-right{
  position: relative !important;
  width: auto !important;
  height: auto !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.card .nav-right .nav-menus{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.card .nav-right .language-nav{ position:relative; }
.card .translate_wrapper .current_lang{ cursor:pointer; user-select:none; }
.card .translate_wrapper .current_lang .lang{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color: var(--reg-text);
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
}
.card .translate_wrapper .current_lang .lang:hover{ background:#F3F4F6; }

.card .translate_wrapper .more_lang{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:220px;
  background:rgba(255,255,255,.98);
  border:1px solid var(--reg-line);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.16);
  padding:8px;
  z-index:9999;
  max-height:320px;
  overflow:auto;
}
.card .translate_wrapper .more_lang .lang{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.card .translate_wrapper .more_lang .lang:hover{ background:#F3F4F6; }

.card .translate_wrapper.open .more_lang{ display:block; }

@media (max-width:768px){
  .card .translate_wrapper .more_lang{ width:200px; max-height:260px; }
  .card .translate_wrapper .current_lang .lang{ font-size:13px; }
}