/* ============================================================
  GOLDEX · 登录封面（未登录进入前端前的门户页）
  ------------------------------------------------------------
  · 封面模式（.gate）：Logo + 语言切换 + 居中登录 / 注册卡片
  · 弹窗模式（.gate.mod）：前端内再次唤起登录时，退化为毛玻璃遮罩 + 居中卡片
  · 封面一律禁止滚动（桌面 / 移动端均一屏放下）
  颜色全部走 style.css / premium.css 的主题令牌，自动适配白天 / 夜晚。
  ============================================================ */

.gate {
  position: fixed; inset: 0; z-index: 380;
  display: flex; flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(1100px 640px at 8% -14%, rgba(230, 176, 74, .16), transparent 62%),
    radial-gradient(900px 560px at 98% 6%, rgba(179, 154, 255, .10), transparent 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 58%, var(--bg0) 100%);
  animation: gateIn .4s ease;
}
html[data-theme="light"] .gate {
  background:
    radial-gradient(1100px 640px at 8% -14%, rgba(0, 178, 111, .12), transparent 62%),
    radial-gradient(900px 560px at 98% 6%, rgba(230, 176, 74, .16), transparent 60%),
    linear-gradient(180deg, #f7faf6 0%, #eaf1ea 58%, #f7faf6 100%);
}
html.gate-skip .gate,
.gate.hide { display: none; }
body.gate-open { overflow: hidden; }
/* 提示条需浮在封面之上；在线客服浮层（z-index 980/990）在封面期间隐藏 */
#toasts { z-index: 420; }
body.gate-open .cs-fab,
body.gate-open .cs-panel { display: none; }
@keyframes gateIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 背景装饰：网格 + 光晕 ---------- */
.gate-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gb-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(1100px 620px at 32% 6%, #000, transparent 76%);
          mask-image: radial-gradient(1100px 620px at 32% 6%, #000, transparent 76%);
}
/* 性能：光球本身是径向渐变（自带柔边），去掉 72px 高斯模糊，视觉几乎无差、GPU 大幅减负 */
.gb-orb { position: absolute; border-radius: 50%; opacity: .5; will-change: transform; }
.gb-o1 {
  width: 520px; height: 520px; top: -170px; left: -130px;
  background: radial-gradient(circle, rgba(230, 176, 74, .46), transparent 72%);
  animation: gbFloat 16s ease-in-out infinite;
}
.gb-o2 {
  width: 470px; height: 470px; bottom: -190px; right: -90px;
  background: radial-gradient(circle, rgba(157, 123, 255, .32), transparent 72%);
  animation: gbFloat 22s ease-in-out infinite reverse;
}
@keyframes gbFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(26px, 22px, 0); }
}

/* ---------- 封面顶栏：品牌 + 语言切换 ---------- */
.gate-bar { position: relative; z-index: 2; flex: none; display: flex; align-items: center;
  gap: 14px; padding: 18px 30px; flex-wrap: wrap; }
.gate-bar .grow { flex: 1; }
.gate-langs { display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); }
.gate-langs button { border: none; background: transparent; color: var(--txt3); font-family: inherit;
  font-size: 11.5px; font-weight: 750; padding: 6px 11px; border-radius: 999px;
  cursor: pointer; transition: .15s; white-space: nowrap; }
.gate-langs button:hover { color: var(--txt); }
.gate-langs button.on { color: #fff; background: linear-gradient(135deg, var(--acc), var(--acc-deep));
  box-shadow: 0 4px 12px -6px var(--acc-glow); }
/* 语言切换主按钮：常亮金色胶囊，点一下 英语 ⇄ 日语 互切 */
.gate-langs #gateLangBtn { color: #fff;
  background: linear-gradient(135deg, var(--acc), var(--acc-deep));
  box-shadow: 0 4px 12px -6px var(--acc-glow); }
.gate-langs #gateLangBtn:hover { color: #fff; filter: brightness(1.08); }

/* ---------- 主体：登录 / 注册卡片（居中，一屏放下不滚动） ---------- */
.gate-wrap { position: relative; z-index: 2; flex: 1 1 auto; width: 100%; max-width: 560px;
  margin: 0 auto; padding: 8px 24px calc(26px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 0; overflow: hidden; }

/* 右栏：登录 / 注册卡片区 */
.gate-panel { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gate .amask { position: static; inset: auto; z-index: auto; display: grid; place-items: center;
  width: 100%; padding: 0; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
.gate .amodal { width: min(430px, 100%); padding: 26px 28px 20px;
  box-shadow: 0 30px 70px -32px rgba(0, 0, 0, .85), 0 0 46px -26px var(--acc-glow); }
/* 封面模式下不需要关闭按钮（未登录无法进入前端） */
.gate:not(.mod) .am-x { display: none; }

/* ---------- 弹窗模式：前端内再次唤起登录 ---------- */
.gate.mod { display: grid; place-items: center; padding: 22px; overflow: hidden;
  background: rgba(3, 6, 12, .55);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  animation: gateFade .16s ease; }
html[data-theme="light"] .gate.mod { background: rgba(18, 40, 30, .34); }
@keyframes gateFade { from { opacity: 0; } to { opacity: 1; } }
.gate.mod .gate-bg,
.gate.mod .gate-bar { display: none; }
.gate.mod .gate-wrap { display: block; width: 100%; max-width: none; margin: 0; padding: 0;
  overflow: visible; }
.gate.mod .gate-panel { display: block; }
.gate.mod .amodal { width: min(408px, 100%); padding: 22px 24px 18px; animation: amPop .18s ease; }

/* ---------- 响应式 ---------- */
/* 手机：压缩顶栏与卡片内边距，保证一屏放下、不可滚动 */
@media (max-width: 620px) {
  .gate-bar { padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 10px; gap: 10px; }
  .gate-bar .logo-tx small { display: none; }
  .gate-wrap { padding: 2px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .gate .amodal { padding: 20px 18px 14px; }
}

/* 小屏手机（≤400）：进一步收窄 */
@media (max-width: 400px) {
  .gate-bar { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px; }
  .gate-langs button { padding: 6px 9px; font-size: 11px; }
  .gate-wrap { padding: 0 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .gate .amodal { padding: 18px 14px 12px; }
}