/* =========================
   login.css - 登录页专属
   config.css 只放 :root 变量
   ========================= */

*{ box-sizing:border-box; }

.login-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{
  --login-text: #111827;
  --login-muted: #9CA3AF;
  --login-line: #E5E7EB;
  --login-danger: #EF4444;
  --login-radius: 18px;
  --login-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; }

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

.login-card{
  width:520px;
  background:rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-radius:var(--login-radius);
  box-shadow:var(--login-shadow);
  padding:28px 28px 24px;
  color: var(--login-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-color / btn-bg） */
.back-ico path{
  stroke: var(--icon-color);
}

.hint{
  text-align:center;
  font-size:15px;
  color:var(--login-muted);
  margin-top:6px;
}

.login-logo{
  height:100px;
  max-width:100%;
  object-fit:contain;
}

.title{
  text-align:center;
  font-size:36px;
  font-weight:800;
  margin:8px 0 22px;
  color: var(--login-text);
}

/* 表单 */
.field{ position:relative; margin:16px 0; }
.input{
  width:100%;
  height:56px;
  border:1px solid var(--login-line);
  border-radius:12px;
  padding:0 16px 0 52px;
  font-size:16px;
  outline:none;
  background:#fff;
  color: var(--login-text);
}
.input::placeholder{ color: var(--login-muted); }

.input:focus{
  border-color: var(--btn-bg);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06); /* 不指定颜色，给轻阴影 */
}

/* 图标：统一用全局色（btn-bg / icon-color） */
.icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
}
.icon path,
.icon circle,
.icon rect{
  stroke: var(--btn-bg);
}

.error-msg{
  display:none;
  margin-top:8px;
  font-size:13px;
  color: var(--login-danger);
  line-height:1.2;
}
.field.is-error .input{
  border-color: var(--login-danger);
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}
.field.is-error .error-msg{ display:block; }

/* 记住我 */
.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  color:#6B7280;
  margin:12px 2px 18px;
}
.remember{ display:flex; align-items:center; gap:8px; }
.remember input{ width:16px; height:16px; accent-color: var(--btn-bg); }

.forgot{ color:var(--login-muted); text-decoration:none; }
.forgot:hover{ color:#6B7280; }

/* 按钮：全局色 */
.btn{
  width:100%;
  height:60px;
  border:none;
  border-radius:12px;
  background: var(--btn-bg);
  color: var(--text-color);
  font-size:18px;
  font-weight:700;
  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); }
.btn:disabled{ opacity:.7; cursor:not-allowed; }

/* 注册 */
.signup{
  margin-top:16px;
  text-align:center;
  font-size:14px;
  color: var(--login-muted);
}
.signup a{
  color: var(--btn-bg);
  font-weight:700;
  margin-left:6px;
  text-decoration:none;
}
.signup 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; }
  .login-wrap{ padding:14px 18px 18px; align-items:flex-start; }
  .login-card{
    width:100%;
    max-width:360px;
    margin:0 auto;
    padding:10px 0 0;
    background:#fff;
    box-shadow:none;
    border-radius:0;
  }
  .title{ font-size:34px; margin:6px 0 14px; }
  .hint{ font-size:14px; margin-top:10px; }
  .login-logo{ height:80px; }
  .field{ margin:12px 0; }
  .input{
    height:48px;
    border-radius:10px;
    font-size:14px;
    padding-left:46px;
  }
  .icon{ left:14px; width:18px; height:18px; }
  .btn{ height:52px; font-size:16px; border-radius:10px; box-shadow:none; }
  .illu-mobile{ display:block; }
}

/* =========================================================
   语言下拉组件补丁（不改 public/lang.html）
   ========================================================= */
.login-card .nav-right{
  position: relative !important;
  width: auto !important;
  height: auto !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.login-card .nav-right .nav-menus{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.login-card .nav-right .language-nav{ position:relative; }

.login-card .translate_wrapper .current_lang{
  cursor:pointer;
  user-select:none;
}

.login-card .translate_wrapper .current_lang .lang{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color: var(--login-text);
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
}
.login-card .translate_wrapper .current_lang .lang:hover{
  background:#F3F4F6;
}

/* 默认隐藏下拉 */
.login-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(--login-line);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.16);
  padding:8px;
  z-index:9999;
  max-height:320px;
  overflow:auto;
}

.login-card .translate_wrapper .more_lang .lang{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.login-card .translate_wrapper .more_lang .lang:hover{
  background:#F3F4F6;
}

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

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