/* ============================================================
   认证页（登录 / 注册）· 暖白炭黑主题
   与首页配色一致：首页背景图 + 暖黑遮罩 + 暖白卡片 + 炭黑按钮
   ============================================================ */
:root{
  --an-ink:#2a2724;
  --an-muted:#7a7267;
  --an-accent:#b08968;
  --an-grad:linear-gradient(135deg,#423b33,#1e1b18);
  --an-font:"ZCOOL KuaiLe","Baloo 2","Varela Round","Yuanti SC","PingFang SC","Microsoft YaHei",sans-serif;
}

html,body{height:100%}
body{
  margin:0;overflow-x:hidden;
  font-family:var(--an-font)!important;
  color:var(--an-ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,button,input,textarea,.auth-tab,.auth-submit,.auth-getcode{font-family:var(--an-font)!important}

/* 整体背景：首页壁纸 + 左右遮罩 */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:44% 56%;
  background:
    linear-gradient(90deg, rgba(26,23,20,.30) 0%, rgba(26,23,20,.14) 44%, rgba(247,243,234,.42) 56%, rgba(247,243,234,.55) 100%),
    url('/bj/desktop-wallpaper.jpg') no-repeat center center fixed;
  background-size:cover, cover;
}

/* 左侧品牌区：暖黑半透明 */
.auth-visual{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:48px 52px;color:#fff;
  background:linear-gradient(150deg, rgba(26,23,20,.92) 0%, rgba(52,46,40,.82) 48%, rgba(92,82,70,.64) 100%);
  backdrop-filter:blur(3px) saturate(90%);
  -webkit-backdrop-filter:blur(3px) saturate(90%);
}
.auth-visual:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, rgba(214,180,145,.22), transparent 32%),
    radial-gradient(circle at 85% 75%, rgba(176,137,104,.24), transparent 34%);
}
.auth-brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px}
.auth-brand .mark{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);font-size:19px;
  backdrop-filter:blur(10px);
}
.auth-mid{position:relative;z-index:1;max-width:420px}
.auth-kicker{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.10);
  border-radius:99px;font-size:12px;font-weight:800;color:#f0e2cf;backdrop-filter:blur(10px);
}
.auth-mid h2{font-size:clamp(28px,3vw,38px);line-height:1.3;margin:22px 0 16px;font-weight:800;letter-spacing:-.5px;color:#fff}
.auth-mid h2 span{background:linear-gradient(90deg,#f7ecdd,#d6bc9c);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-mid p{color:rgba(246,238,226,.84);line-height:1.9;font-size:15px;margin:0}
.auth-points{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px}
.auth-point{display:flex;align-items:center;gap:13px;font-size:14px;color:rgba(255,255,255,.86)}
.auth-point i{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20);font-size:15px;color:#e3c9a8;
}
.auth-foot{position:relative;z-index:1;font-size:12px;color:rgba(255,255,255,.55)}

/* 右侧表单区：暖白半透明 */
.auth-panel{
  position:relative;
  display:flex;align-items:center;justify-content:center;padding:40px 24px;
  background:linear-gradient(180deg, rgba(247,243,234,.34), rgba(240,234,222,.48));
  backdrop-filter:blur(2px);
}
.auth-card{
  width:100%;max-width:400px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.9);
  border-radius:26px;
  box-shadow:0 30px 70px rgba(80,70,58,.20);
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  padding:38px 34px 30px;position:relative;overflow:hidden;
}
.auth-card.auth-card-wide{max-width:460px}
.auth-card:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(120deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 60%);
}
.auth-card > *{position:relative;z-index:1}
/* 验证码图片保持原样：不加滤镜、不透明、不变色 */
.auth-card img{filter:none!important;opacity:1!important;mix-blend-mode:normal!important;background:transparent!important}
.auth-card-head{position:relative;margin-bottom:22px}
.auth-card-head h1{font-size:22px;font-weight:800;color:var(--an-ink);margin:0 0 6px}
.auth-card-head p{margin:0;color:var(--an-muted);font-size:13.5px}
.auth-card-head p a{color:var(--an-accent);font-weight:800}
.auth-tabs{display:flex;gap:8px;margin-bottom:20px;position:relative}
.auth-tab{
  flex:1;text-align:center;padding:10px 0;border-radius:12px;font-size:13.5px;font-weight:800;
  color:var(--an-muted);background:rgba(255,255,255,.55);border:1px solid rgba(120,105,88,.14);
  cursor:pointer;transition:.2s;
}
.auth-tab.active{color:#fff;background:var(--an-grad);border-color:transparent;box-shadow:0 10px 24px rgba(50,44,36,.22)}
.auth-pane{display:none;position:relative}
.auth-pane.active{display:block}
.auth-field{margin-bottom:14px;position:relative}
.auth-row{display:flex;gap:10px}
.auth-row .auth-field{flex:1}
.auth-card .form-control,.auth-card .custom-select,.auth-card .input-group-text{
  border:1px solid rgba(120,105,88,.16)!important;
  background:rgba(255,255,255,.72)!important;
  border-radius:12px!important;
  color:var(--an-ink)!important;
  box-shadow:none!important;
}
.auth-card .form-control:focus{
  border-color:rgba(176,137,104,.5)!important;
  box-shadow:0 0 0 4px rgba(176,137,104,.12)!important;
  background:#fff!important;
}
.auth-card .form-control::placeholder{color:#a89e90}
.auth-submit{
  width:100%;border:0;border-radius:13px;padding:12px 0;font-weight:800;font-size:15px;color:#fff;
  background:var(--an-grad);
  box-shadow:0 14px 32px rgba(50,44,36,.26);
  transition:transform .2s ease,box-shadow .2s ease;cursor:pointer;
}
.auth-submit:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(50,44,36,.34)}
.auth-submit:disabled{opacity:.65;cursor:not-allowed;transform:none}
.auth-getcode{
  border:0;border-radius:11px;padding:0 14px;font-weight:800;font-size:12.5px;color:#fff;
  background:var(--an-grad);cursor:pointer;white-space:nowrap;
}
.auth-card a{color:var(--an-accent)}
.msg-tips{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(42,39,36,.92);color:#fff;padding:12px 25px;border-radius:12px;
  z-index:999999;display:none;backdrop-filter:blur(8px);font-size:14px;font-weight:800;
}

/* 移动端：保持首页同款人物背景 */
@media(max-width:900px){
  .auth-shell{
    grid-template-columns:1fr;
    background:
      linear-gradient(180deg, rgba(247,243,234,.72) 0%, rgba(240,234,222,.82) 100%),
      url('/bj/hero-character.jpg') no-repeat right bottom fixed;
    background-size:cover, auto 46vh;
  }
  .auth-visual{display:none}
  .auth-panel{padding:70px 20px 40px;background:transparent}
}

/* ============ 滑动验证组件 ============ */
.nm-slider{
  position:relative;height:46px;border-radius:12px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(120,105,88,.16);
  overflow:hidden;user-select:none;touch-action:none;
}
.nm-slider .sc-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#a89e90;pointer-events:none;letter-spacing:.4px;
}
.nm-slider .sc-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:12px;
  background:linear-gradient(135deg,rgba(176,137,104,.26),rgba(176,137,104,.12));
}
.nm-slider .sc-btn{
  position:absolute;left:0;top:0;width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,#423b33,#1e1b18);color:#fff;font-size:14px;
  display:flex;align-items:center;justify-content:center;cursor:grab;
  box-shadow:0 6px 16px rgba(50,44,36,.22);z-index:2;transition:left .18s ease;
}
.nm-slider.dragging .sc-btn{transition:none;cursor:grabbing}
.nm-slider.sc-ok .sc-btn{background:linear-gradient(135deg,#4a423a,#2a2724);cursor:default}
.nm-slider.sc-ok .sc-text{color:#2f9d6f}
.nm-slider.sc-ok .sc-fill{background:linear-gradient(135deg,rgba(79,201,138,.22),rgba(79,201,138,.10))}
.nm-slider.sc-loading .sc-btn{opacity:.7}