/*
 * CS_Note 公共样式 style.css —— 由 templates/card-template.html 的 <style> 抽离。
 * 收录 66 条『覆盖率>=95% 且声明完全一致』的规则；
 * 卡内动画专属样式（.anim/.ll/.st-*/.m-*/@keyframes flow/.progress 等）留在各卡 <style>。
 */

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  strong{color:var(--ink);font-weight:700}
  em{color:var(--ink-soft)}
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}
  .topbar a{color:var(--accent);text-decoration:none}
  .topbar a:hover{text-decoration:underline}
  .topbar .sep{opacity:.4}
  .topbar .current{color:var(--ink-soft)}
  .page-link{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:999px;
    font-size:12.5px;font-weight:700;background:#fff;border:1px solid var(--line);color:var(--accent);cursor:pointer;
    text-decoration:none;transition:.15s}
  .page-link:hover{background:var(--accent);color:#fff;text-decoration:none;transform:translateY(-1px)}
  .page-link-tip{font-size:12px;color:var(--accent-ink);background:#fff;border:1px solid #eccdbe;border-radius:6px;
    padding:3px 9px;max-width:min(72vw,480px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
  .obs-open:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(193,95,60,.25);background:var(--accent);color:#fff;text-decoration:none}

  .page{max-width:var(--maxw);margin:0 auto;padding:26px 22px 90px}
  .header{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px 22px;margin:0 0 18px}
  .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:10px}
  .title{font-family:var(--serif);font-weight:700;font-size:34px;line-height:1.2;margin:0 0 14px;letter-spacing:-.01em;color:var(--ink)}
  .badges{display:flex;flex-wrap:wrap;gap:8px}
  .badge{font-size:12px;font-weight:500;padding:4px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-soft)}
  .badge.strong{background:#fff;border-color:#eccdbe;color:var(--accent-ink)}
  .badge.tag{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
  .toc a:hover{background:#fff;border-color:#eccdbe;color:var(--accent-ink);text-decoration:none}
  .toc a.active{background:#fff;border-color:var(--accent);color:var(--accent-ink);font-weight:700}

  .quickref{background:#fff;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:14px 18px;margin:0 0 16px;font-size:15.5px;color:var(--ink-soft)}
  .quickref .ql{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
  .kw{background:#fff;color:var(--accent-ink);border:1px solid #eccdbe;font-weight:700;padding:1px 6px;border-radius:5px;white-space:nowrap}

  .sec{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 26px;margin-bottom:16px;scroll-margin-top:120px}
  .chev{flex:0 0 auto;font-size:13px;color:var(--muted);transition:transform .25s;line-height:1}
  .sec.collapsed > h2 .chev{transform:rotate(-90deg)}
  .sec-body{overflow:hidden}
  .sec.collapsed > .sec-body{display:none}
  .sec-exam{border-top:3px solid var(--c-exam)}
  .sec-pitfall{border-top:3px solid var(--c-pit)}
  .sec-conclusion{border-top:3px solid var(--c-con)}
  .sec h3{font-size:16.5px;margin:18px 0 8px;font-weight:600;color:var(--ink)}
  .sec p{margin:10px 0}
  .sec ul,.sec ol{padding-left:22px;margin:10px 0}
  .sec li{margin:6px 0}

  .callout{display:flex;gap:12px;align-items:stretch;border-radius:0 10px 10px 0;padding:13px 16px;margin:14px 0;font-size:15px;border:1px solid transparent;border-left:none}
  .callout .c-bar{flex:0 0 3px;border-radius:3px;align-self:stretch}
  .callout .c-body{flex:1}
  .callout .c-title{font-weight:700;display:block;margin-bottom:3px}
  .callout.note{background:var(--c-quick-bg);border-color:#e6d5c6;color:#7a4a24}.callout.note .c-bar{background:var(--c-quick)}
  .callout.warn{background:var(--c-pit-bg);border-color:#ecc6c0;color:#8a2f22}.callout.warn .c-bar{background:var(--c-pit)}
  .callout.tip{background:var(--c-con-bg);border-color:#c9ddd2;color:#245c4b}.callout.tip .c-bar{background:var(--c-con)}
  .callout.exam{background:var(--c-exam-bg);border-color:#e4d3ac;color:#7a5a17}.callout.exam .c-bar{background:var(--c-exam)}

  .mem-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
  .mem{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:13px 16px;box-shadow:0 1px 2px rgba(60,45,30,.04)}
  .mem .mq{font-weight:700;color:var(--ink);font-size:14px;margin-bottom:4px}
  .mem .mq::before{content:"Q ";color:var(--accent);font-weight:700}
  .mem .ma{color:var(--ink-soft);font-size:14px}
  .mem .ma::before{content:"A ";color:var(--muted);font-weight:600}

  .rel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 26px;margin-top:16px}
  .rel h2{font-family:var(--serif);font-size:18px;margin:0 0 12px}
  .chip{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--accent-ink);border:1px solid #eccdbe;padding:6px 13px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;margin:4px 6px 4px 0;transition:.15s}
  .chip:hover{background:var(--accent);color:#fff;text-decoration:none;transform:translateY(-1px)}
  .rel .hint{font-size:12.5px;color:var(--muted);margin:10px 0 0}
  code{font-family:var(--mono);font-size:.9em;background:#f3ece4;color:#9c4a2c;padding:1px 5px;border-radius:5px}
  pre code{background:none;color:inherit;padding:0}

  .nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
  .nav a{flex:1;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--ink-soft);font-size:14px;box-shadow:var(--shadow);transition:.15s}
  .nav a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
  .nav .dir{font-size:12px;color:var(--muted)}
  .nav .ttl{font-weight:700;margin-top:2px}