/* ============================================================
   gate.css —— 访问墙（中性纸感 / 克制玻璃）
   只服务 #authView，不覆盖 style.css 的其它规则
   ============================================================ */
#authView.gate-view{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#f4f2ef;
  overflow:auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:#1f232b;
  -webkit-font-smoothing:antialiased;
}

/* 极淡环境光，替代原来的彩色漂移色团 */
#authView.gate-view::before{
  content:"";
  position:fixed;
  left:50%;
  top:44%;
  width:150vmax;
  height:150vmax;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 50%, rgba(226,222,214,.55) 0%, rgba(226,222,214,0) 62%);
  pointer-events:none;
  z-index:0;
}

/* 细网格，边缘径向淡出 */
#authView.gate-view::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(31,35,43,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,35,43,.05) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  pointer-events:none;
  z-index:0;
}

/* 鼠标跟随柔光，默认不显示 */
.gate-spot{
  position:fixed;
  width:520px;
  height:520px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%);
  opacity:0;
  transform:translate(-50%,-50%);
  transition:opacity .5s ease;
  z-index:1;
}

/* ---------- 主卡片 ---------- */
.gate-box{
  position:relative;
  z-index:2;
  width:100%;
  max-width:392px;
  padding:38px 34px 30px;
  border-radius:20px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  backdrop-filter:blur(22px) saturate(130%);
  border:1px solid rgba(28,32,40,.07);
  box-shadow:
    0 1px 2px rgba(28,32,40,.04),
    0 14px 40px -12px rgba(28,32,40,.14);
  animation:gateIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.gate-box::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.95), transparent);
  pointer-events:none;
}
.gate-box > *{animation:gateRise .5s cubic-bezier(.2,.7,.3,1) both;}
.gate-box > *:nth-child(1){animation-delay:.04s;}
.gate-box > *:nth-child(2){animation-delay:.08s;}
.gate-box > *:nth-child(3){animation-delay:.12s;}
.gate-box > *:nth-child(4){animation-delay:.16s;}
.gate-box > *:nth-child(5){animation-delay:.20s;}

/* ---------- 标识 ---------- */
.gate-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin:0 0 18px;
  border-radius:15px;
  background:#1f232b;
  color:#fff;
  font-size:18px;
  font-weight:600;
  letter-spacing:.02em;
  user-select:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
  animation:logoIn .55s cubic-bezier(.2,.7,.3,1) both;
}
.gate-logo:hover{transform:translateY(-2px) rotate(-2deg);}

.gate-tip{
  margin:0 0 22px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.6;
  color:#5b616d;
}

/* ---------- 表单 ---------- */
.gate-input{
  display:block;
  width:100%;
  height:48px;
  padding:0 14px;
  margin-bottom:12px;
  box-sizing:border-box;
  border:1px solid rgba(28,32,40,.12);
  border-radius:12px;
  background:rgba(249,249,250,.9);
  font-size:14.5px;
  font-family:inherit;
  color:#1f232b;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance:none;
}
.gate-input::placeholder{color:#9aa0ab;}
.gate-input:hover{border-color:rgba(28,32,40,.2);}
.gate-input:focus{
  background:#fff;
  border-color:#1f232b;
  box-shadow:0 0 0 3px rgba(31,35,43,.07);
}

/* 验证码行：输入框 + 获取按钮 */
.gate-row{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin-bottom:12px;
}
.gate-row .gate-input{margin-bottom:0;flex:1;min-width:0;}
#authSendCode{
  flex:0 0 auto;
  height:48px;
  padding:0 16px;
  border:1px solid rgba(28,32,40,.12);
  border-radius:12px;
  background:rgba(249,249,250,.9);
  color:#3d434e;
  font-size:13.5px;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
#authSendCode:hover{border-color:rgba(28,32,40,.24);background:#fff;color:#1f232b;}
#authSendCode:disabled{opacity:.5;cursor:default;}

/* 主按钮 */
#authSubmit.gate-btn{
  display:block;
  width:100%;
  height:48px;
  margin-top:6px;
  border:0;
  border-radius:12px;
  background:#1f232b;
  color:#fff;
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
  font-family:inherit;
  cursor:pointer;
  transition:background .2s ease, transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
  box-shadow:0 1px 2px rgba(28,32,40,.12);
}
#authSubmit.gate-btn:hover{background:#2b3038;transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(28,32,40,.3);}
#authSubmit.gate-btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(28,32,40,.12);}
#authSubmit.gate-btn:disabled,#authSubmit.gate-btn.is-busy{
  opacity:.6;
  cursor:default;
  transform:none;
  box-shadow:none;
}
#authSubmit.gate-btn.is-busy{animation:gatePulse 1.1s ease-in-out infinite;}

/* 错误提示 */
.gate-err{
  min-height:18px;
  margin:12px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#c0392b;
}
.gate-err:empty{min-height:0;margin:0;}

/* 底部切换 */
.gate-switch{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(28,32,40,.08);
  font-size:13.5px;
  color:#6b7280;
  text-align:center;
}
.gate-switch a,
.gate-switch button{
  display:inline;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:#1f232b;
  text-decoration:none;
  border-bottom:1px solid rgba(31,35,43,.28);
  cursor:pointer;
  transition:border-color .2s ease;
}
.gate-switch a:hover,
.gate-switch button:hover{border-bottom-color:#1f232b;}

/* ---------- 动效 ---------- */
@keyframes gateIn{
  from{opacity:0;transform:translateY(10px) scale(.99);}
  to{opacity:1;transform:none;}
}
@keyframes gateRise{
  from{opacity:0;transform:translateY(7px);}
  to{opacity:1;transform:none;}
}
@keyframes logoIn{
  from{opacity:0;transform:translateY(6px) rotate(-4deg);}
  to{opacity:1;transform:none;}
}
@keyframes gatePulse{
  0%,100%{opacity:.6;}
  50%{opacity:.85;}
}
@keyframes is-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}
.is-shake{animation:is-shake .4s ease;}
.is-spin{animation:gateSpin .9s linear infinite;}
@keyframes gateSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

/* ---------- 彩蛋（保留，配色统一墨色系） ---------- */
.gate-star{
  position:fixed;
  z-index:5;
  font-size:16px;
  color:rgba(31,35,43,.55);
  pointer-events:none;
  animation:starFly 1.1s ease-out forwards;
}
@keyframes starFly{
  from{opacity:1;transform:translate(0,0) scale(1);}
  to{opacity:0;transform:translate(var(--dx,0px),var(--dy,-60px)) scale(.4);}
}
.gate-egg-ico{
  position:fixed;
  z-index:6;
  font-size:18px;
  cursor:pointer;
  user-select:none;
  opacity:.5;
  transition:transform .3s ease, opacity .3s ease;
  animation:eggBob 3.4s ease-in-out infinite;
}
.gate-egg-ico:hover{opacity:1;transform:scale(1.15) rotate(8deg);}
@keyframes eggBob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
.gate-egg{
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(31,35,43,.95);
  animation:eggIn .32s ease both;
}
@keyframes eggIn{from{opacity:0;}to{opacity:1;}}
.gate-egg-card{
  max-width:340px;
  width:100%;
  padding:28px 26px;
  border-radius:16px;
  background:#f7f6f4;
  color:#1f232b;
  text-align:center;
  font-size:14px;
  line-height:1.75;
  box-shadow:0 20px 50px -14px rgba(0,0,0,.5);
  animation:gateRise .38s cubic-bezier(.2,.7,.3,1) both;
}
.gate-egg-mark{
  display:inline-block;
  margin-bottom:12px;
  padding:3px 10px;
  border-radius:6px;
  background:#1f232b;
  color:#fff;
  font-size:11.5px;
  letter-spacing:.1em;
}
.gate-egg-title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:600;
  letter-spacing:.02em;
  color:#1f232b;
}
.gate-egg-desc{
  margin:0;
  font-size:13.5px;
  line-height:1.75;
  color:#5b616d;
}
.is-pop{animation:gatePop .34s cubic-bezier(.2,.8,.3,1.1) both;}
@keyframes gatePop{
  from{opacity:0;transform:scale(.94);}
  to{opacity:1;transform:none;}
}

/* ---------- 桌面端 ---------- */
@media (min-width:900px){
  .gate-box{max-width:404px;padding:44px 40px 34px;}
  .gate-logo{width:56px;height:56px;border-radius:16px;font-size:19px;}
  .gate-tip{font-size:15.5px;margin-bottom:24px;}
}

/* ---------- 矮屏 ---------- */
@media (max-height:680px){
  #authView.gate-view{padding:16px;align-items:flex-start;}
  .gate-box{margin:12px auto;padding:26px 24px 20px;border-radius:16px;}
  .gate-logo{width:44px;height:44px;border-radius:13px;font-size:16px;margin-bottom:12px;}
  .gate-tip{font-size:14px;margin-bottom:16px;}
  .gate-input{height:44px;margin-bottom:10px;}
  #authSendCode{height:44px;}
  #authSubmit.gate-btn{height:44px;}
}

/* ---------- 移动端窄屏 ---------- */
@media (max-width:400px){
  .gate-box{padding:30px 22px 24px;border-radius:16px;}
  .gate-row{gap:8px;}
  #authSendCode{padding:0 12px;font-size:13px;}
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  #authView.gate-view::before,
  #authView.gate-view::after,
  .gate-box,
  .gate-box::after,
  .gate-box > *,
  #authSubmit.gate-btn.is-busy,
  .gate-egg-ico{animation:none !important;}
  .gate-input,
  #authSubmit.gate-btn,
  .gate-logo,
  .gate-egg-card{transition:none !important;}
}