/* ==========================================================================
   China Survival Guides — shared stylesheet
   Paste this entire file into Code Snippets → "China Guides — CSS"
   Type: CSS (or "HTML Snippet" wrapped in <style> if your plugin needs it)
   Location: Site-wide / Front-end only.  Do NOT load in admin.
   Scoping: every rule is prefixed .csg / csg- so it cannot fight the theme.
   Version 1.0 — October 2026
   ========================================================================== */

.csg{--csg-ink:#1b1f24;--csg-ink2:#3d444d;--csg-ink3:#687179;
  --csg-line:#e3e7ea;--csg-line2:#eef1f3;--csg-bg:#fff;--csg-soft:#f7f9fa;--csg-soft2:#fbfcfd;
  --csg-blue:#2f6feb;--csg-blue-bg:#eef4ff;--csg-green:#07c160;--csg-green-dk:#05974a;--csg-green-bg:#eafaf1;
  --csg-amber:#b26b00;--csg-amber-bg:#fff6e6;--csg-red:#c0392b;--csg-red-bg:#fdecea;
  --csg-purple:#6b3fa0;--csg-purple-bg:#f3eefb;
  --csg-r:10px;
  --csg-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  color:var(--csg-ink);background:var(--csg-bg);
  font-size:16.5px;line-height:1.75;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  max-width:860px;margin:0 auto;padding:0 4px 8px;overflow-wrap:break-word;}
.csg *{box-sizing:border-box}
.csg p{margin:12px 0}
.csg ul,.csg ol{padding-left:24px}
.csg li{margin:6px 0}
.csg a{color:var(--csg-blue)}
.csg strong{font-weight:650}
.csg em{font-style:italic}
.csg small{font-size:13px;color:var(--csg-ink3)}

/* ---------- head / timeliness ---------- */
.csg-h1{font-size:34px;line-height:1.22;margin:0 0 8px;letter-spacing:-.7px;font-weight:800}
.csg-lead{font-size:18px;color:var(--csg-ink2);line-height:1.62;margin:10px 0 14px}
.csg-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--csg-soft);border:1px solid var(--csg-line);border-radius:var(--csg-r);
  padding:10px 14px;margin:14px 0 6px;font-size:13.4px;color:var(--csg-ink2)}
.csg-meta b{color:var(--csg-ink)}
.csg-disclaimer{font-size:13.2px;color:var(--csg-ink3);border:1px dashed var(--csg-line);
  border-radius:var(--csg-r);padding:10px 14px;margin:10px 0 18px;background:var(--csg-soft2)}

/* ---------- headings ---------- */
.csg-h2{font-size:26px;line-height:1.32;margin:52px 0 10px;padding-top:18px;
  border-top:2px solid var(--csg-line);letter-spacing:-.45px;font-weight:800;scroll-margin-top:80px}
.csg-h3{font-size:19.5px;margin:30px 0 8px;letter-spacing:-.2px;font-weight:700;scroll-margin-top:80px}
.csg-h4{font-size:16.5px;margin:22px 0 6px;font-weight:700;color:var(--csg-ink)}
.csg-goal{font-size:14.6px;color:var(--csg-ink2);margin:0 0 12px;padding:8px 12px;
  background:var(--csg-soft);border-left:3px solid var(--csg-blue);border-radius:0 6px 6px 0}
.csg-goal b{color:var(--csg-blue)}

/* ---------- inline helpers ---------- */
.csg-ui{font-family:var(--csg-mono);font-size:.88em;background:#f2f5f7;border:1px solid var(--csg-line);
  border-radius:5px;padding:1px 5px;color:#a03a5a;white-space:nowrap}
.csg-zh{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
.csg-path{font-family:var(--csg-mono);font-size:12.6px;background:#f2f5f7;border:1px solid var(--csg-line);
  border-radius:6px;padding:2px 7px;display:inline-block;margin:2px 0}

.csg-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
  letter-spacing:.03em;vertical-align:middle;white-space:nowrap}
.csg-badge.is-yes{background:var(--csg-green-bg);color:var(--csg-green-dk);border:1px solid #b9e9ce}
.csg-badge.is-no{background:var(--csg-red-bg);color:#a83224;border:1px solid #f4c6bf}
.csg-badge.is-mid{background:var(--csg-amber-bg);color:var(--csg-amber);border:1px solid #f0daab}
.csg-badge.is-info{background:var(--csg-blue-bg);color:var(--csg-blue);border:1px solid #cddffd}
.csg-badge.is-new{background:var(--csg-purple-bg);color:var(--csg-purple);border:1px solid #ddd0f0}
.csg-fluid{font-size:11.5px;font-weight:700;letter-spacing:.04em;background:var(--csg-amber-bg);
  color:var(--csg-amber);border:1px solid #f0daab;border-radius:5px;padding:1px 6px;white-space:nowrap}

/* ---------- key figures strip ---------- */
.csg-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
@media(max-width:760px){.csg-kpi{grid-template-columns:repeat(2,1fr)}}
.csg-kpi>div{border:1px solid var(--csg-line);border-radius:var(--csg-r);padding:14px 10px;
  text-align:center;background:var(--csg-soft2)}
.csg-kpi .v{font-size:21px;font-weight:800;color:var(--csg-green-dk);display:block;line-height:1.2}
.csg-kpi .l{font-size:12.2px;color:var(--csg-ink3);line-height:1.35;display:block;margin-top:4px}

/* ---------- table of contents ---------- */
.csg-toc{background:var(--csg-soft);border:1px solid var(--csg-line);border-radius:var(--csg-r);padding:14px 18px;margin:18px 0}
.csg-toc>strong{display:block;margin-bottom:6px;font-size:15px}
.csg-toc ol{margin:6px 0 0;padding-left:20px;font-size:14.6px}
.csg-toc li{margin:3px 0}

/* ---------- callouts ---------- */
.csg-callout{border-radius:var(--csg-r);padding:13px 16px;margin:16px 0;border:1px solid;font-size:15.2px}
.csg-callout .hd{font-weight:700;margin-bottom:3px;font-size:12.6px;letter-spacing:.05em;text-transform:uppercase}
.csg-callout>*:first-of-type{margin-top:0}
.csg-callout>*:last-child{margin-bottom:0}
.csg-callout.is-tip{background:var(--csg-green-bg);border-color:#b9e9ce;color:#0d6b3c}
.csg-callout.is-tip .hd{color:var(--csg-green-dk)}
.csg-callout.is-note{background:var(--csg-blue-bg);border-color:#cddffd;color:#1c4f9e}
.csg-callout.is-note .hd{color:var(--csg-blue)}
.csg-callout.is-warn{background:var(--csg-amber-bg);border-color:#f3ddb0;color:#8a5200}
.csg-callout.is-warn .hd{color:var(--csg-amber)}
.csg-callout.is-danger{background:var(--csg-red-bg);border-color:#f6c9c2;color:#96271b}
.csg-callout.is-danger .hd{color:var(--csg-red)}

/* ---------- 中文要点 block ---------- */
.csg-cn{background:#f8fafc;border-left:4px solid #c8d3dd;border-radius:0 8px 8px 0;padding:12px 16px;
  margin:16px 0;font-size:14.4px;color:var(--csg-ink2);line-height:1.7}
.csg-cn .hd{font-size:11.5px;letter-spacing:.1em;color:#7b8794;font-weight:700;text-transform:uppercase;margin-bottom:4px}
.csg-cn strong{color:#25313d}

/* ---------- tables ---------- */
.csg-tw{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch}
.csg-table{width:100%;border-collapse:collapse;font-size:14.4px;min-width:560px}
.csg-table caption{caption-side:top;text-align:left;font-size:13px;color:var(--csg-ink3);padding:0 0 6px}
.csg-table th,.csg-table td{border-bottom:1px solid var(--csg-line);padding:9px 12px;text-align:left;vertical-align:top}
.csg-table th{background:var(--csg-soft);font-size:12.4px;letter-spacing:.04em;text-transform:uppercase;color:var(--csg-ink3);font-weight:700}
.csg-table tbody tr:hover{background:#fafcfe}
.csg-table.is-zebra tbody tr:nth-child(even){background:var(--csg-soft2)}
.csg-table td.w{white-space:normal;min-width:230px}

/* ---------- numbered steps ---------- */
.csg-steps{counter-reset:csgstep;list-style:none;padding:0;margin:18px 0}
.csg-steps>li{counter-increment:csgstep;position:relative;padding:12px 16px 12px 54px;
  border:1px solid var(--csg-line);border-radius:var(--csg-r);margin-bottom:9px;background:var(--csg-bg)}
.csg-steps>li::before{content:counter(csgstep);position:absolute;left:14px;top:12px;width:26px;height:26px;
  background:var(--csg-green);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700}
.csg-steps>li>*:first-child{margin-top:0}
.csg-steps>li>*:last-child{margin-bottom:0}
.csg-expect{display:block;margin-top:6px;font-size:13.2px;color:var(--csg-ink3)}
.csg-expect b{color:var(--csg-ink2);font-weight:650}

/* ---------- checklists ---------- */
.csg-chk{list-style:none;padding:0;margin:12px 0}
.csg-chk li{position:relative;padding-left:30px;margin:7px 0}
.csg-chk li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;
  border:1.8px solid #b9c4cd;border-radius:4px}

/* ---------- heading number chip ---------- */
.csg-num{display:inline-block;min-width:34px;color:var(--csg-green-dk);font-variant-numeric:tabular-nums;
  font-weight:800;margin-right:4px}

/* ---------- generic card / grids (used by the WeChat guide) ---------- */
.csg-card{border:1px solid var(--csg-line);border-radius:var(--csg-r);padding:18px 20px;
  background:var(--csg-bg);margin:16px 0}
.csg-card.is-soft{background:var(--csg-soft)}
.csg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.csg-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.csg-grid2,.csg-grid3{grid-template-columns:1fr}}

/* ---------- pitfall item (WeChat guide "40 traps") ---------- */
.csg-pit{border:1px solid var(--csg-line);border-left:4px solid var(--csg-amber);border-radius:0 8px 8px 0;
  padding:12px 16px;margin:12px 0;background:var(--csg-bg)}
.csg-pit.is-fatal{border-left-color:var(--csg-red)}
.csg-pit.is-costly{border-left-color:var(--csg-purple)}
.csg-pit .t{font-weight:700;font-size:15.2px;margin:0 0 3px}
.csg-pit .why{font-size:14.2px;color:var(--csg-ink2);margin:0}
.csg-pit .fix{font-size:14.2px;margin:6px 0 0;color:var(--csg-green-dk)}
.csg-pit .fix::before{content:"✅ Do this → ";font-weight:700}

/* ---------- small inline bits ---------- */
.csg-sev{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--csg-red)}
.csg-tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.csg-tag{font-size:11.5px;background:var(--csg-soft);border:1px solid var(--csg-line);
  border-radius:6px;padding:2px 7px;color:var(--csg-ink3)}

/* ---------- FAQ ---------- */
.csg-faq{border:1px solid var(--csg-line);border-radius:var(--csg-r);margin:9px 0;background:var(--csg-bg)}
.csg-faq>summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:15.4px;list-style:none}
.csg-faq>summary::-webkit-details-marker{display:none}
.csg-faq>summary::before{content:"＋ ";color:var(--csg-green-dk);font-weight:800}
.csg-faq[open]>summary::before{content:"－ "}
.csg-faq[open]>summary{border-bottom:1px solid var(--csg-line2)}
.csg-faq .b{padding:4px 16px 14px;font-size:14.8px;color:var(--csg-ink2)}
.csg-faq .b>*:first-child{margin-top:8px}
.csg-faq .b>*:last-child{margin-bottom:0}

/* ---------- figures / screenshots ---------- */
.csg-fig{margin:20px 0;border:1px solid var(--csg-line);border-radius:var(--csg-r);overflow:hidden;background:var(--csg-bg)}
.csg-fig img{display:block;width:100%;height:auto}
.csg-fig figcaption{font-size:13px;color:var(--csg-ink3);padding:8px 14px;background:var(--csg-soft);border-top:1px solid var(--csg-line)}
.csg-fig figcaption b{color:var(--csg-ink2)}

/* ---------- community quote ---------- */
.csg-quote{border-left:4px solid #c8d3dd;background:var(--csg-soft2);padding:10px 14px;margin:14px 0;
  font-size:14.6px;color:var(--csg-ink2);border-radius:0 8px 8px 0}
.csg-quote cite{display:block;margin-top:6px;font-size:12.6px;color:var(--csg-ink3);font-style:normal}

/* ---------- sources ---------- */
.csg-src{font-size:13px;color:var(--csg-ink3);margin:10px 0 0}
.csg-src b{color:var(--csg-ink2);font-weight:650}

/* ---------- ad slot (empty by design; empty slots collapse to zero height) ---------- */
.csg-ad{margin:34px 0;clear:both}
.csg-ad:empty{display:none}          /* production: unfilled slots take no space */
.csg-ad:not(:empty){min-height:90px} /* filled slots reserve space to avoid CLS */
/* Authoring aid — uncomment to see every slot while you place ads:
.csg-ad:empty{display:block;min-height:60px;outline:1px dashed var(--csg-line);
  border-radius:var(--csg-r);background:repeating-linear-gradient(45deg,#fafbfc,#fafbfc 8px,#f2f5f7 8px,#f2f5f7 16px)}
*/
@media(max-width:600px){.csg-ad{margin:26px 0}}

/* ---------- series nav ---------- */
.csg-series{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
@media(max-width:760px){.csg-series{grid-template-columns:1fr}}
.csg-series a{display:block;border:1px solid var(--csg-line);border-radius:var(--csg-r);padding:14px;
  text-decoration:none;background:var(--csg-soft2);color:var(--csg-ink)}
.csg-series a:hover{background:#eef4ff;border-color:#cddffd}
.csg-series .t{font-weight:700;font-size:14.6px;display:block;margin-bottom:3px;color:var(--csg-blue)}
.csg-series .d{font-size:13px;color:var(--csg-ink3);display:block;line-height:1.5}
.csg-series a.is-current{background:#fff;border-color:var(--csg-green);cursor:default}
.csg-series a.is-current .t{color:var(--csg-green-dk)}

/* ---------- footer ---------- */
.csg-foot{font-size:13px;color:var(--csg-ink3);border-top:1px solid var(--csg-line);margin-top:46px;padding-top:16px}

/* ---------- print ---------- */
@media print{
  .csg-ad,.csg-series{display:none!important}
  .csg{max-width:100%;font-size:11pt}
  .csg-h2{page-break-before:auto;page-break-after:avoid}
  .csg-table,.csg-callout,.csg-fig,.csg-faq{break-inside:avoid}
}