/* ==========================================================================
   gate.css —— 演示访问口令（登录门）样式
   与 tokens.css 配套使用，主题色 #C7000B
   ========================================================================== */

/* 未通过口令时隐藏页面内容，避免闪现 */
html.gate-pending body > *:not(#acicGate) { display: none !important; }
html.gate-pending body { background: var(--brand-grad-d); overflow: hidden; }

#acicGate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 18px;
  background:
    radial-gradient(1000px 520px at 18% -10%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(820px 460px at 92% 8%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 64%),
    var(--brand-grad-d);
  animation: gateIn .3s ease;
}
@keyframes gateIn { from { opacity: 0; } to { opacity: 1; } }

.gate-card {
  width: min(430px, 100%);
  background: #fff; border-radius: 24px;
  padding: 30px 30px 26px;
  box-shadow: 0 30px 70px rgba(10,0,2,.34);
  text-align: center;
}
.gate-brand { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 22px; }
.gate-brand img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.gate-bt { font-size: 15px; font-weight: 800; letter-spacing: .3px; color: var(--ink); }
.gate-bs { margin-top: 4px; font-size: 11.5px; color: var(--ink-4); }

.gate-lock { display: flex; justify-content: center; margin-bottom: 14px; }
.gate-lock::before {
  content: ""; width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7000B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10.5' width='16' height='10.5' rx='2'/><path d='M8 10.5V7.2A4 4 0 0 1 16 7.2v3.3'/></svg>") center / 26px 26px no-repeat;
}

.gate-title { font-size: 18px; font-weight: 800; letter-spacing: .2px; color: var(--ink); }
.gate-note { margin-top: 9px; font-size: 12px; color: var(--ink-4); line-height: 1.65; }

.gate-input {
  width: 100%; height: 48px; margin-top: 20px;
  border-radius: 12px; border: 1.5px solid var(--line-3);
  background: var(--bg-2); padding: 0 16px;
  font-size: 15px; letter-spacing: 2px; text-align: center; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gate-input::placeholder { letter-spacing: 0; color: var(--ink-5); }
.gate-input:focus { outline: none; border-color: var(--brand-400); background: #fff; box-shadow: 0 0 0 4px var(--brand-50); }
.gate-input.shake { animation: gateShake .4s cubic-bezier(.36,.07,.19,.97); border-color: var(--danger); }
@keyframes gateShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

.gate-err { min-height: 18px; margin-top: 10px; font-size: 12px; color: var(--danger); font-weight: 600; }

.gate-btn {
  width: 100%; height: 48px; margin-top: 6px;
  border-radius: 12px; border: 0;
  background: var(--brand-grad); color: #fff;
  font-size: 15.5px; font-weight: 700; letter-spacing: .5px;
  box-shadow: 0 8px 20px rgba(199,0,11,.28);
  transition: filter .15s ease, transform .15s ease;
}
.gate-btn:hover { filter: brightness(1.07); }
.gate-btn:active { transform: scale(.985); filter: brightness(.96); }

.gate-hint { margin-top: 16px; font-size: 11.5px; color: var(--ink-4); line-height: 1.6; }

.gate-foot {
  margin-top: 26px; font-size: 11.5px; letter-spacing: .3px;
  color: rgba(255,255,255,.62); text-align: center;
}

@media (max-width: 480px) {
  .gate-card { padding: 24px 20px 22px; border-radius: 20px; }
  .gate-title { font-size: 16.5px; }
}