/* ══════════════════════════════════════════════════════════════════════════
   雅之林® 伙伴站群 · **登录卡（唯一源）** · 2026-10-08
   --------------------------------------------------------------------------
   用户选定 **方案 G｜整块克莱因蓝（流光扫过）**，并追加一条：
     「微信登录改成**微信绿色**。」

   🔴 什么叫"一体化"（用户三次迭代后的要求，别再退回拼贴式）：
      整张卡**只有克莱因蓝一个底色**，没有"上面色块 + 下面白身"的分层，
      也没有独立的头部区块 —— 文字、分隔线、按钮**全部落在同一个面上**。
      ⛔ 不要加回 `.yg-hero`（色块头）/ `.yg-badge`（图标）/ `.yg-c4`（四色条）：
         用户已明确「**去掉那个图标**」，四色条也会把"一个面"切断。

   🔴 动效（用户令「要动画特效」）——三条，全部只动 `transform / opacity`：
      ① **两道白色流光错开 2.2 秒斜扫**（复用 `yzl.css` 的 `yzlFlowSheen` ——
         与"四个页面色块"**同一条动效**，全站一套语言，⛔ 别在这里另写一份）
      ② **主按钮轻微呼吸**（`ygBreath`）
      ③ **卡片入场**：上浮 10px + 淡入（340ms）——登录卡出现时不再"啪"地砸出来
      ⚠️ 若 `yzl.css` 没加载（keyframe 不存在），流光只是不动，卡面完好 ⇒ 安全降级。

   🔴🔴🔴 2026-10-16 用户令（改版 + 一条**长期规则**）：
     · 「上下高度，高一点」⇒ `.yg-in` 纵向内边距 24/20 → **34/28**，并放宽各段间距。
     · 「**雅之林®YAZHILIN横排字体高度要一致**」⇒ `.yg-en` 由 11px 提到与 `.yg-cn` **同为 21px**
       （同时把 `letter-spacing` 由 .3em 收到 .14em，否则整行会撑破卡片宽度）。
     · 「**你记住，在所有的文案中不要把 YAZHILIN 缩小**」＝**全站长期规则**：
       ⛔ 任何地方出现「雅之林® YAZHILIN」横排，两段的**字号必须一致**，不许把英文做小做淡。
       （例外：整块锁在极小容器里时必须**两段等比**缩放 —— 见下方 319 兜底档，
         ⛔ 不许只缩英文。）
     · 主色**不变**：仍为克莱因蓝 `#002FA7`（用户当日确认「保持克莱因蓝」——
       登录卡是**全站 9 个页面共用**的门禁卡，只有机构色在各栏目页都不跳）。

   ⚠️ `prefers-reduced-motion` 一律关掉（纯装饰，不值得换眩晕风险）。

   配色：
     · 卡面克莱因蓝 `#002FA7`＝商品中心栏目色，也是雅之林®的机构色。
     · 主按钮**微信绿** `#07C160`（用户指定）——这是全场唯一的"非蓝"色块，
       所以它必须就是唯一的**主行动**；⛔ 别再把次要按钮也上色（次要＝白描边）。
     · 卡面上的白色文字统一用半透明白分层次（100% / 74% / 62% / 50%），⛔ 不用灰。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 卡面（一体化：就这一个面）────────────────────────────────────────── */
#yzlGate .yg-card,
#loginBar .yg-card{
  position:relative;overflow:hidden;
  width:100%;max-width:340px;margin:auto;border-radius:18px;background:#002FA7;
  text-align:center;box-shadow:0 28px 64px -22px rgba(0,0,0,.62);
  animation:ygRise .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ygRise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ── 两道流光（复用 yzl.css 的 yzlFlowSheen）────────────────────────────── */
#yzlGate .yg-card::before,
#yzlGate .yg-card::after,
#loginBar .yg-card::before,
#loginBar .yg-card::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:38%;
  pointer-events:none;z-index:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 42%,
    rgba(255,255,255,.10) 64%,rgba(255,255,255,0) 100%);
  animation:yzlFlowSheen 5.4s cubic-bezier(.33,0,.2,1) infinite;
}
#yzlGate .yg-card::after,
#loginBar .yg-card::after{animation-delay:2.2s}
/* 卡内所有内容抬到流光之上（绝对定位的伪元素永远画在普通流内容之上） */
#yzlGate .yg-card > *,
#loginBar .yg-card > *{position:relative;z-index:1}

/* ── 卡内排版 ─────────────────────────────────────────────────────────── */
#yzlGate .yg-in,
#loginBar .yg-in{padding:46px 18px 40px}
/* 🔴🔴🔴 2026-10-08 用户令（原话）：「**雅之林®YAZHILIN，横排，一排。**」
   ⇒ 品牌名从"上下两行"（上行 `YAZHILIN` / 下行 `雅之林®`）改成**同一行**。
   做法：外面套一个 `.yg-brand` 柔排容器，两个名字仍各用原来的类（`.yg-cn` / `.yg-en`），
   `align-items:baseline` ⇒ 两段**基线对齐**。
   🔴 2026-10-16：两段**同为 21px**（用户令「横排字体高度要一致／不要缩小 YAZHILIN」）
      ⇒ 英文的 `letter-spacing` 必须同步收窄（.3em → .14em），否则 320px 视口下整行会溢出。
      实测 320 视口：卡内可用宽 ≈244px，该行 ≈228px ⇒ 余量 16px ✓。
   ⚠️ 品牌写法是「雅之林® YAZHILIN」，⛔ 中间**不加「·」**（用户 2026-10-06 令）。
      🔴 2026-10-16 用户令「**中英文中间的空格去掉**」⇒ 卡面锁版 `gap:0`，
         两段**紧贴**（就是用户自己写的「雅之林®YAZHILIN」那种紧排）；
         ⛔ 别再插「·」、也别加回 `gap`。
   ⚠️ `flex-wrap:nowrap` + 两段各自 `white-space:nowrap`：这条 brand 行**永远单行**。
      实测 300px 视口下这一行总宽 ≈164px，卡内可用宽 228px ⇒ 余量 64px；
      下面的窄屏档位是给"极端小字/大字号系统设置"兜底的，⛔ 别删。 */
#yzlGate .yg-brand,
#loginBar .yg-brand{
  display:flex;align-items:baseline;justify-content:center;
  gap:0;flex-wrap:nowrap;min-width:0;
}
#yzlGate .yg-cn,
#loginBar .yg-cn{font:900 21px/1.1 var(--f);color:#fff;white-space:nowrap;flex:none}
#yzlGate .yg-cn sup,
#loginBar .yg-cn sup{font-size:.5em;vertical-align:super}
#yzlGate .yg-en,
#loginBar .yg-en{
  font:700 21px/1 var(--f);letter-spacing:.14em;
  color:#fff;white-space:nowrap;flex:none;
  /* 🔴 2026-10-16 用户令「中英文中间的空格去掉」⇒ 上一条已把 `gap` 归零，
     这里再去掉 `text-indent`（它会在英文段前面留出 .14em 的空白）。
     `margin-right:-.14em` 是**负 margin 抵消行尾 letter-spacing**：否则末尾那个
     看不见的字距会把整行向右挤 ~1.5px，居中就不再精确。⛔ 别只删 text-indent 而漏掉它。 */
  margin-right:-.14em;
}
/* 极窄屏兜底：只缩字号，⛔ 不换行（换行就回到用户要毙掉的"两行"了）。
   🔴 档位为什么是 319 而不是 339：实测横排行**只需要 160px**，而 320 视口下卡内可用 240px
      ⇒ 余量 80px，**根本不需要缩**。339 会把 iPhone SE（视口正好 320）也算进来、
      白白缩小字号 —— 那不是"兜底"，那是无谓地变小。319 只覆盖真·极端窄的机器。 */
@media (max-width:319px){
  #yzlGate .yg-brand,#loginBar .yg-brand{gap:0}
  #yzlGate .yg-cn,#loginBar .yg-cn{font-size:18px}
  #yzlGate .yg-en,#loginBar .yg-en{font-size:18px;letter-spacing:.12em;margin-right:-.12em}
}
#yzlGate .yg-sub,
#loginBar .yg-sub{margin-top:16px;font:600 12.5px/1.6 var(--f);color:rgba(255,255,255,.78)}
#yzlGate .yg-rule,
#loginBar .yg-rule{height:1px;background:rgba(255,255,255,.22);margin:24px 0 22px}

/* ── 按钮 ─────────────────────────────────────────────────────────────── */
#yzlGate .yg-btn,
#loginBar .yg-btn{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;
  padding:0 14px;border:0;border-radius:11px;cursor:pointer;box-sizing:border-box;
  font:900 15.5px/1 var(--f);-webkit-appearance:none;appearance:none;
}
#yzlGate .yg-btn:active,
#loginBar .yg-btn:active{transform:scale(.985)}
/* 主按钮：微信绿（用户令「微信登录改成微信绿色」）—— 全场唯一非蓝块 ⇒ 唯一主行动 */
#yzlGate .yg-wx,
#loginBar .yg-wx{
  background:#07C160;color:#fff;
  box-shadow:0 10px 20px -12px rgba(7,193,96,.9);
  animation:ygBreath 3.6s ease-in-out infinite;
}
@keyframes ygBreath{0%,100%{opacity:1}50%{opacity:.9}}
/* 次按钮：白描边（⛔ 不上色 —— 再上一个颜色就把主次打平了） */
#yzlGate .yg-ghost,
#loginBar .yg-ghost{
  margin-top:14px;background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.5);
}
#yzlGate .yg-cap,
#loginBar .yg-cap{display:block;margin-top:18px;font:600 11px/1.6 var(--f);color:rgba(255,255,255,.5)}

/* ── 底部「权益区」（2026-10-16 用户令：卡做成竖长条，把这组文案设计进来）──────
   🔴 为什么放**按钮下方**：上面回答"怎么进"（登录动作），下面回答"进去有什么"（权益）——
      顺着「看到 → 登录 → 拿到」的顺序读。⛔ 别挪到按钮上方：那会把主行动挤下去，
      而这张卡的首要任务永远是"让人点登录"。
   🔴 三道分隔后的三段式：品牌 / 动作 / 权益 —— 卡因此成为**竖长条**（见下方实测）。
   ⚠️ 按格式锁：全 px、chip 行 `flex-wrap:wrap` + `overflow:hidden`（窄屏换行不溢出）。 */
#yzlGate .yg-feat,
#loginBar .yg-feat{margin-top:18px}
#yzlGate .yg-feat-t,
#loginBar .yg-feat-t{font:600 12px/1.5 var(--f);color:rgba(255,255,255,.62);text-align:center}
#yzlGate .yg-feat-row,
#loginBar .yg-feat-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;overflow:hidden;
}
#yzlGate .yg-chip,
#loginBar .yg-chip{
  font:700 12px/1 var(--f);color:#fff;background:rgba(255,255,255,.14);
  border-radius:999px;padding:10px 15px;white-space:nowrap;flex:none;
}

/* ── 无障碍：减少动效 ⇒ 全部关掉（静态卡片仍然完整可读）────────────── */
@media (prefers-reduced-motion: reduce){
  #yzlGate .yg-card,#loginBar .yg-card{animation:none}
  #yzlGate .yg-card::before,#yzlGate .yg-card::after,
  #loginBar .yg-card::before,#loginBar .yg-card::after{animation:none;content:none}
  #yzlGate .yg-wx,#loginBar .yg-wx{animation:none}
  #yzlGate .yg-btn:active,#loginBar .yg-btn:active{transform:none}
}