/* ============================================================================
   闸门遮罩样式层 —— 2026-10-08 新增。

   ═══ 为什么需要这个文件 ═══
   闸门改到服务端之后（按页面审查 F0-F1 🔴 → `app/core/gate.py`），未核验访客拿到的
   是 `templates/gate_shell.html`，**它不加载任何 `pages/*.css`**（那是各页面自己的
   `{% block page_css %}`）。而 `.zo-gate` / `html.zo-locked` 的样式历来是**每个页面
   各自复制一份**的（`pages/index.css`、`radar.css`、`rank.css`、`trend.css` 里各有一套
   完全相同的块，「跨页一致对拍」由 `_recon/theme_consistency.py` B 组守着）。

   ⇒ 结果：闸门壳里 `html.zo-locked .zo-gate{position:fixed;inset:0;…}` 这条**根本没生效**，
     闸门退化成普通文档流里的一个 div —— 大图标、PRIVATE ACCESS、表单、按钮依次铺开，
     顶栏被挤到中间、底栏掉到最下面，窄屏还横向溢出。**页面不报错、HTML 结构也全对**，
     只有真机量盒子才看得出来。

   ═══ 为什么是「新增文件」而不是改 `pages/*.css` ═══
   `static/css/pages/*.css` 是**冻结区**（`theme_consistency.py` A 组用 sha256 钉死）。
   本仓约定：改观感只能**新增样式层**（先例 `.zo-hero` → `pages/index-hero.css`）。
   新文件不在 A 组清单里、也不进 B 组对拍，所以它不会让任何既有断言变红。

   ═══ 与 theme.css 的分工 ═══
   配色权威层仍是 `static/css/theme.css`（第 11 节有 `.zo-gate-*` 的颜色覆盖 +
   `body.gate-shell .zo-hold{min-height:70vh}`）。本文件**只管结构与几何**
   （display / position / inset / 栅格 / 尺寸 / 响应式断点），与页面里那几份**逐字一致**
   —— 任何一处差异都会让「闸门壳」与「页内闸门」长得不一样。

   ⚠ 只被 `templates/gate_shell.html` 引用。各页面的 `pages/*.css` 保持原样不动
     （它们里面的闸门样式在「已核验」态下永远不会触发 —— 那是冻结文件，不改）。
   ============================================================================ */

/* ---------- 锁页：不可读、不可点、不可滚 ---------- */
html.zo-locked{overflow:hidden;overscroll-behavior:none}
html.zo-locked body{overflow:hidden}
.zo-gate{display:none}
/* 75% 不透明度遮罩 + 背景模糊：背后内容不可读、不可点、不可滚 */
html.zo-locked .zo-gate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:22px;
  background:rgba(8,7,6,.75);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.zo-gate-panel{position:relative;width:min(430px,100%);max-height:calc(100vh - 44px);overflow-y:auto;
  padding:32px 30px 26px;text-align:center;border-radius:20px;
  background:linear-gradient(180deg,#1B1917 0%,#141312 100%);
  border:1px solid rgba(252,251,248,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.62),0 0 0 1px rgba(224,192,131,.05)}
.zo-gate-ic{display:grid;place-items:center;width:54px;height:54px;margin:0 auto;border-radius:50%;
  background:rgba(201,123,42,.14);border:1px solid rgba(224,192,131,.36);color:var(--gold-soft)}
.zo-gate-ic svg{width:24px;height:24px;display:block}
.zo-gate-kicker{display:block;margin:16px 0 0;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.2em;color:var(--ink-4)}
.zo-gate-h{margin:7px 0 0;font-family:var(--serif);font-size:21px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink)}
.zo-gate-p{margin:11px 0 0;font-size:12.5px;line-height:1.9;color:var(--ink-3)}
.zo-gate-p b{color:var(--gold-soft);font-weight:600}
.zo-gate-form{display:flex;flex-direction:column;gap:10px;margin:20px 0 0}
.zo-gate-form input{width:100%;padding:12px 15px;border-radius:12px;outline:none;text-align:center;
  background:var(--bg);border:1px solid var(--line-2);color:var(--ink);font-family:inherit;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s,box-shadow .2s}
.zo-gate-form input::placeholder{color:var(--ink-4);letter-spacing:0;text-transform:none}
.zo-gate-form input:focus{border-color:rgba(224,192,131,.6);box-shadow:0 0 0 4px rgba(224,192,131,.1)}
.zo-gate-form button{padding:12px 18px;border:0;border-radius:12px;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:700;color:#16130E;background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  transition:transform .2s,box-shadow .2s;box-shadow:0 8px 22px rgba(201,123,42,.3)}
.zo-gate-form button:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(201,123,42,.42)}
.zo-gate-err{min-height:17px;margin:10px 0 0;font-size:11.5px;line-height:1.5;color:#E5836F}
.zo-gate-note{margin:13px 0 0;font-size:11.5px;color:var(--ink-4)}
.zo-gate-note a{color:var(--gold-soft);text-decoration:none;
  border-bottom:1px solid rgba(224,192,131,.42);padding-bottom:1px;transition:.25s}
.zo-gate-note a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.zo-gate-legal{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line);
  font-size:10.5px;line-height:1.7;color:var(--ink-4)}
@keyframes zoShake{0%,100%{transform:translateX(0)}22%{transform:translateX(-7px)}
  44%{transform:translateX(6px)}66%{transform:translateX(-4px)}88%{transform:translateX(3px)}}
.zo-gate-panel.zo-shake{animation:zoShake .44s cubic-bezier(.36,.07,.19,.97)}

/* ---------- 断点（与 pages/index.css 的同名块逐字对齐） ---------- */
@media (max-width:620px){
  .zo-gate{padding:16px}
  .zo-gate-panel{padding:26px 20px 22px;border-radius:16px}
  .zo-gate-h{font-size:19px}
  .zo-gate-p{font-size:12px}
}
@media (max-width:400px){
  .zo-gate-panel{padding:22px 16px 18px}
  .zo-gate-ic{width:48px;height:48px}
  .zo-gate-h{font-size:18px}
}
@media (prefers-reduced-motion: reduce){
  .zo-gate-panel.zo-shake{animation:none}
}