/* ============================================================
   文华晨风官网 - 登录/注册模块样式
   依赖页面 :root 中的主题变量
   ============================================================ */

/* 独立样式表：自带 border-box 重置，
   不依赖宿主页面的全局 *{box-sizing:border-box}，
   避免因页面重置失效导致弹窗内边距左右不对称 */
.nav-auth,.nav-auth *,.auth-modal,.auth-modal *{box-sizing:border-box}

/* ---------- 导航栏登录入口 ---------- */
/* 未登录时整个入口都不占位（连「登录 / 注册」按钮也不出现）；
   只有已登录（例如管理员从 /admin 返回官网）才加 .show 显示登录人信息 */
.nav-auth{position:relative;display:none}
.nav-auth.show{display:block}
.nav-auth-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:10px;font-size:15px;font-weight:500;
  background:transparent;border:1px solid var(--outline-border);
  color:var(--text-muted);cursor:pointer;
  transition:all .25s ease;font-family:inherit;
}
.nav-auth-btn:hover{border-color:var(--accent);color:var(--accent-light);background:rgba(6,182,212,.08)}
.nav-auth-btn svg{width:16px;height:16px}
.nav-auth-btn.logged-in{color:var(--text-light);border-color:rgba(6,182,212,.35)}
.nav-auth-avatar{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-blue));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:700;
}
.nav-user-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:190px;
  background:var(--dropdown-bg);backdrop-filter:blur(16px);
  border:1px solid rgba(6,182,212,.18);border-radius:12px;padding:8px;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .22s ease;z-index:1200;
}
.nav-auth.open .nav-user-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-user-head{padding:10px 12px;border-bottom:1px solid var(--hairline);margin-bottom:6px}
.nav-user-head .nm{display:block;font-size:14px;font-weight:600;color:var(--text-light)}
.nav-user-head .rl{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}
.nav-user-item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 12px;border-radius:8px;font-size:14px;
  color:var(--text-muted);cursor:pointer;transition:all .2s ease;
  background:none;border:none;font-family:inherit;text-align:left;
}
.nav-user-item:hover{background:rgba(6,182,212,.1);color:var(--accent-light)}
.nav-user-item svg{width:15px;height:15px;flex-shrink:0}

/* ---------- 弹窗 ---------- */
/* 由遮罩层滚动，弹窗本身不产生滚动条，
   这样 padding 左右恒等，不会因滚动条挤占而左右不对称 */
.auth-modal{
  position:fixed;inset:0;z-index:2000;
  display:flex;justify-content:center;padding:24px;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  background:rgba(3,7,18,.7);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;
}
.auth-modal.show{opacity:1;visibility:visible}
.auth-dialog{
  width:100%;max-width:420px;position:relative;margin:auto;
  background:var(--bg-card);border-radius:20px;
  border:1px solid var(--border);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  padding:36px 32px 32px;
  transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.auth-modal.show .auth-dialog{transform:translateY(0) scale(1)}
.auth-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;
  border-radius:8px;border:none;background:transparent;cursor:pointer;
  color:var(--text-muted);display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
.auth-close:hover{background:rgba(6,182,212,.1);color:var(--accent-light)}
.auth-close svg{width:18px;height:18px}

.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.auth-brand-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-blue));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px var(--accent-glow);
}
.auth-brand-icon svg{width:26px;height:26px}
.auth-brand-text .cn{display:block;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:.5px}
.auth-brand-text .en{display:block;font-size:10px;color:var(--accent-light);letter-spacing:1.2px;text-transform:uppercase}

.auth-tabs{display:flex;gap:6px;background:var(--surface-1);padding:4px;border-radius:12px;margin-bottom:22px}
.auth-tab{
  flex:1;padding:10px;border-radius:9px;border:none;background:transparent;
  font-size:15px;font-weight:600;color:var(--text-muted);cursor:pointer;
  transition:all .25s ease;font-family:inherit;
}
.auth-tab.active{background:var(--bg-card);color:var(--accent-dark);box-shadow:0 2px 8px rgba(0,0,0,.08)}
[data-theme="light"] .auth-tab.active{background:#fff;color:var(--accent-dark)}

.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-field{position:relative;display:flex;flex-direction:column;gap:6px}
.auth-field label{font-size:13px;font-weight:600;color:var(--text-secondary)}
.auth-field input{
  width:100%;padding:13px 15px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-light);
  font-size:15px;font-family:inherit;color:var(--text-primary);
  transition:border-color .22s ease,box-shadow .22s ease;
}
.auth-field input::placeholder{color:var(--text-muted);opacity:.75}
.auth-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.auth-field .hint{font-size:12px;color:var(--text-muted)}

.auth-submit{
  margin-top:6px;width:100%;padding:14px;border-radius:11px;border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-blue));
  color:#fff;font-size:16px;font-weight:600;cursor:pointer;
  box-shadow:0 6px 18px var(--accent-glow);transition:all .25s ease;font-family:inherit;
}
.auth-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px var(--accent-glow)}
.auth-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}

.auth-msg{
  padding:11px 14px;border-radius:9px;font-size:13px;line-height:1.5;
  display:none;word-break:break-all;
}
.auth-msg.show{display:block}
.auth-msg.error{background:rgba(239,68,68,.1);color:#dc2626;border:1px solid rgba(239,68,68,.25)}
.auth-msg.success{background:rgba(16,185,129,.1);color:#059669;border:1px solid rgba(16,185,129,.25)}
[data-theme="light"] .auth-msg.error{color:#b91c1c}
[data-theme="light"] .auth-msg.success{color:#047857}

.auth-switch{text-align:center;font-size:13px;color:var(--text-muted);margin-top:4px}
.auth-switch a{color:var(--accent-dark);font-weight:600;cursor:pointer}
.auth-switch a:hover{color:var(--accent-light)}

/* ---------- 联系表单提交反馈 ---------- */
.form-msg{
  padding:11px 14px;border-radius:9px;font-size:14px;line-height:1.5;
  display:none;margin-top:4px;
}
.form-msg.show{display:block}
.form-msg.error{background:rgba(239,68,68,.1);color:#dc2626;border:1px solid rgba(239,68,68,.25)}
.form-msg.success{background:rgba(16,185,129,.1);color:#059669;border:1px solid rgba(16,185,129,.25)}
[data-theme="light"] .form-msg.error{color:#b91c1c}
[data-theme="light"] .form-msg.success{color:#047857}
.contact-form button:disabled{opacity:.65;cursor:not-allowed;transform:none}

/* ---------- 移动端 ---------- */
@media(max-width:968px){
  .nav-auth{width:100%;margin-top:8px}
  .nav-auth-btn{width:100%;justify-content:center}
  .nav-user-menu{position:static;opacity:1;visibility:visible;transform:none;display:none;margin-top:8px;box-shadow:none}
  .nav-auth.open .nav-user-menu{display:block}
}
@media(max-width:480px){
  .auth-dialog{padding:28px 20px 24px;border-radius:16px}
}