/* ═══════════════════════════════════════════════════════════
   seo.css —— 课后甜点「被搜到：SEO 与 GEO」篇章令牌
   背景：本章复用审美工程的组件体系（taste.css 的 .toy / .duel /
   .quiz-* / .mockwin 等全部按 var(--ct-*) 取色），跨章重写一遍
   只会制造新的漂移源。
   设计意图：taste.css 之后引入，只覆写颜色令牌把全章染成靛蓝，
   再补状态跳变动画的公共关键帧与跨章引用卡；组件结构样式
   一概不重复定义。
   约束：引入顺序必须是 lesson.css → taste.css → seo.css；
   页面特有样式写在各页 <style> 中。
   ═══════════════════════════════════════════════════════════ */

:root{
  --ct:#4338ca;            /* 章主色：靛蓝 */
  --ct-deep:#312e81;       /* 深靛蓝：正文里的强调字 */
  --ct-soft:rgba(67,56,202,.08);
  --ct-line:rgba(67,56,202,.25);
}

/* ── 状态跳变动画公共关键帧：只在跳变那一下播一次 ── */
@keyframes seo-pop{
  0%{transform:scale(.92);opacity:0;}
  60%{transform:scale(1.03);}
  100%{transform:scale(1);opacity:1;}
}
@keyframes seo-slide-up{
  from{transform:translateY(12px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
.seo-pop{animation:seo-pop .3s cubic-bezier(.34,1.56,.64,1) both;}
.seo-slide-up{animation:seo-slide-up .25s ease-out both;}

@media (prefers-reduced-motion:reduce){
  .seo-pop,.seo-slide-up{animation:none;}
}

/* ── 跨章引用卡：域名与备案在 OPC 讲过，口碑在雷军课讲过，指路不重教 ── */
.xref{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px 20px;border:1.5px dashed var(--ct-line);border-radius:14px;background:var(--ct-soft);text-decoration:none;transition:border-color .18s,transform .18s;}
.xref:hover{border-color:var(--ct);transform:translateY(-2px);}
.xref .xref-ic{width:28px;height:28px;border-radius:9px;background:#fff;color:var(--ct);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.xref .xref-ic svg{width:15px;height:15px;}
.xref .xref-t{font-size:13.5px;font-weight:800;color:var(--ct-deep);margin-bottom:2px;}
.xref .xref-d{font-size:13px;color:var(--sub);line-height:1.7;}

/* ── 数据口径注：本章所有站内数字必须挂日期，样式统一在这 ── */
.data-note{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:var(--sub);background:rgba(0,0,0,.05);border-radius:6px;padding:1px 8px;white-space:nowrap;vertical-align:1px;}