/* ==========================================================
   套图宝 · 卖家指南 ops.css — 运营设计系统原样收编（勿手改）
   来源：运营交付包「套图宝-指南站-待部署.zip」assets/style.css（Design System v2）
   + assets/design2.css（Design System v3 第二批扩展组件），逐字节合并。
   正文组件样式以本文件为准；品牌色由 guide.css 尾部覆盖段统一换官网紫金。
   更新流程：运营出新版 → 整体替换本文件 → guide.css ?v= 升号。
   ========================================================== */

/* ==========================================================
   套图宝 · 卖家指南 — Design System v2
   ========================================================== */
:root{
  /* ink */
  --ink:#0d1117;
  --ink2:#36404e;
  --muted:#69737f;
  --faint:#9aa4b1;
  /* surface */
  --paper:#f6f7f9;
  --card:#ffffff;
  --line:#e5e8ee;
  --line2:#f0f2f6;
  /* brand */
  --brand:#2563eb;
  --brand-deep:#1e3a8a;
  --brand-soft:#eef3ff;
  --brand-tint:#f7f9ff;
  /* accents */
  --warm:#c2410c;
  --warm-soft:#fff4ec;
  --ok:#0f766e;
  --ok-soft:#e9f7f4;
  --risk:#b91c1c;
  --risk-soft:#fdeeee;
  /* misc */
  --r-sm:10px;
  --r:14px;
  --r-lg:18px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.10);
  --shadow-lg:0 2px 4px rgba(16,24,40,.04), 0 18px 40px -20px rgba(16,24,40,.16);
  --max:1080px;
  --read:760px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16.5px; line-height:1.9; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
a{color:var(--brand); text-decoration:none; transition:color .15s;}
a:hover{color:var(--brand-deep);}
img{max-width:100%;}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em; background:#f1f3f7; color:#c2410c;
  padding:2px 6px; border-radius:5px;
}

/* ---------- progress ---------- */
.pbar{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:99;
  background:linear-gradient(90deg,var(--brand),#7aa7ff);
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--max); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:22px;
}
.brand{
  display:flex; align-items:center; gap:9px;
  font-weight:800; font-size:15.5px; color:var(--ink); letter-spacing:-.01em;
}
.brand::before{
  content:""; width:20px; height:20px; border-radius:6px;
  background:linear-gradient(135deg,#2563eb,#60a5fa);
  box-shadow:0 2px 6px rgba(37,99,235,.35);
}
.brand span{color:var(--faint); font-weight:500; font-size:12.5px; margin-left:2px; padding-left:9px; border-left:1px solid var(--line);}
.nav-links{display:flex; gap:4px; font-size:13.5px; margin-left:auto;}
.nav-links a{color:var(--muted); padding:6px 11px; border-radius:8px;}
.nav-links a:hover{color:var(--ink); background:#f2f4f8;}
.nav-cta{
  font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  padding:8px 16px; border-radius:9px;
  box-shadow:0 4px 12px -4px rgba(37,99,235,.5);
}
.nav-cta:hover{color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px -4px rgba(37,99,235,.55);}

/* ---------- layout ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
.narrow{max-width:var(--read); margin:0 auto;}
.layout{
  display:grid; grid-template-columns:minmax(0,1fr) 198px;
  gap:56px; align-items:start; padding:44px 0 0;
}
.layout>*{min-width:0;}

/* ---------- hero ---------- */
.ahero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 340px at 12% -10%, #e8efff 0%, transparent 62%),
    radial-gradient(700px 300px at 88% 0%, #f0f7ff 0%, transparent 58%),
    linear-gradient(180deg,#ffffff 0%, #f8fafd 100%);
  border-bottom:1px solid var(--line);
}
.ahero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(37,99,235,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37,99,235,.055) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(600px 280px at 78% 20%, #000 0%, transparent 78%);
  mask-image:radial-gradient(600px 280px at 78% 20%, #000 0%, transparent 78%);
}
.ahero-in{position:relative; z-index:1; padding:34px 0 40px;}
.crumb{font-size:12.5px; color:var(--faint);}
.crumb a{color:var(--faint);}
.crumb i{font-style:normal; margin:0 7px; color:#ccd3dd;}
.crumb a:hover{color:var(--brand);}

.kicker{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em;
  color:var(--brand); background:rgba(255,255,255,.7);
  border:1px solid #d9e4ff; padding:5px 12px; border-radius:100px;
  margin:20px 0 16px; backdrop-filter:blur(4px);
}
.kicker::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--brand);}

h1{
  font-size:clamp(27px, 3.2vw, 36px); line-height:1.36;
  letter-spacing:-.028em; font-weight:800; margin:0 0 18px;
  max-width:880px; color:var(--ink); text-wrap:balance;
}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  font-size:12px; color:var(--ink2); background:#fff;
  border:1px solid var(--line); padding:5px 11px; border-radius:7px;
  box-shadow:0 1px 1px rgba(16,24,40,.03);
}
.chip.solid{background:var(--brand-soft); border-color:#dbe6ff; color:var(--brand-deep); font-weight:600;}

/* ---------- toc ---------- */
.toc{
  position:sticky; top:78px; font-size:13px; padding-top:6px;
}
.toc b{
  display:block; font-size:11px; letter-spacing:.12em; color:var(--faint);
  font-weight:700; margin-bottom:12px;
}
.toc a{
  display:block; color:var(--muted); padding:6px 0 6px 14px;
  border-left:2px solid var(--line); line-height:1.55;
}
.toc a:hover{color:var(--ink); border-left-color:#c9d4ea;}
.toc a.active{color:var(--brand); border-left-color:var(--brand); font-weight:600;}

/* ---------- article ---------- */
article{padding-bottom:40px; max-width:var(--read); min-width:0;}
h2{
  font-size:23px; line-height:1.5; margin:52px 0 16px;
  letter-spacing:-.018em; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:12px;
}
h2::before{
  content:""; flex:0 0 4px; width:4px; height:20px; border-radius:2px;
  background:linear-gradient(180deg,var(--brand),#93b4f7);
}
h3{font-size:17.5px; margin:32px 0 10px; letter-spacing:-.01em; font-weight:700;}
h4{font-size:15.5px; margin:24px 0 8px; font-weight:700;}
p{margin:0 0 17px; color:var(--ink2);}
strong{color:var(--ink); font-weight:600;}
ul,ol{margin:0 0 18px; padding-left:21px; color:var(--ink2);}
li{margin-bottom:9px;}
li::marker{color:#b9c4d4;}
hr{border:0; border-top:1px solid var(--line); margin:44px 0;}

/* ---------- tldr ---------- */
.tldr{
  position:relative; background:var(--card);
  border:1px solid #dde7fb; border-radius:var(--r-lg);
  padding:22px 26px 20px; margin:0 0 34px;
  box-shadow:var(--shadow);
  background-image:linear-gradient(180deg,#fbfcff,#fff);
}
.tldr .label{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:800; letter-spacing:.12em;
  color:var(--brand); margin-bottom:12px;
  background:var(--brand-soft); padding:4px 10px; border-radius:100px;
}
.tldr p{margin:0 0 11px; color:#22344f; font-size:15.5px; line-height:1.85;}
.tldr p:last-child{margin:0;}
.tldr b{color:#132b63; font-weight:700;}

/* ---------- callouts ---------- */
.note,.ok{
  position:relative; border-radius:var(--r); padding:17px 20px 17px 50px;
  margin:24px 0; font-size:14.5px; line-height:1.8;
}
.note{background:var(--warm-soft); border:1px solid #f6dfcd; color:#7c3d10;}
.note b{color:#5f2c08;}
.note::before{
  content:"!"; position:absolute; left:18px; top:17px;
  width:20px; height:20px; border-radius:50%;
  background:var(--warm); color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.ok{background:var(--ok-soft); border:1px solid #cdeae3; color:#12564f;}
.ok b{color:#0b423d;}
.ok::before{
  content:"✓"; position:absolute; left:18px; top:17px;
  width:20px; height:20px; border-radius:50%;
  background:var(--ok); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- key figures ---------- */
.kg{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:11px; margin:26px 0 30px;
}
.kg>div{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 17px; box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.kg b{
  display:block; font-size:18.5px; line-height:1.4; font-weight:800;
  letter-spacing:-.02em; color:var(--ink); margin-bottom:3px;
}
.kg i{font-style:normal; font-size:12.5px; font-weight:600; color:var(--muted); margin-left:2px; letter-spacing:0;}
.kg span{font-size:12.5px; color:var(--muted); line-height:1.5; display:block;}
.kg .hl b{color:var(--brand);}
.kg .warm b{color:var(--warm);}
.kg .okc b{color:var(--ok);}

/* ---------- tables ---------- */
.twrap{
  overflow-x:auto; margin:24px 0;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
}
table{border-collapse:collapse; width:100%; font-size:13.5px; min-width:560px;}
caption{
  caption-side:top; text-align:left; padding:15px 18px 0;
  font-size:12px; color:var(--faint); line-height:1.6;
}
th{
  background:#f6f8fc; text-align:left; font-weight:600; font-size:12px;
  color:var(--muted); padding:12px 15px; border-bottom:1px solid var(--line);
  white-space:nowrap; letter-spacing:.02em;
}
td{
  padding:12px 15px; border-bottom:1px solid var(--line2);
  color:var(--ink2); vertical-align:top; line-height:1.7;
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:nth-child(even) td{background:#fcfdff;}
tbody tr:hover td{background:#f6f9ff;}
td:first-child{color:var(--ink); font-weight:600;}
td b{color:var(--ink); font-weight:700;}
.nowrap{white-space:nowrap;}
.num{font-variant-numeric:tabular-nums;}

/* badges */
.b{
  display:inline-block; font-size:11px; font-weight:700; line-height:1.5;
  padding:2px 8px; border-radius:6px; white-space:nowrap;
}
.b-low{background:#e8f6ec; color:#137a3c;}
.b-mid{background:#fdf3e2; color:#a05a05;}
.b-high{background:var(--risk-soft); color:var(--risk);}
.b-blue{background:var(--brand-soft); color:var(--brand-deep);}

/* ---------- steps ---------- */
.steps{counter-reset:s; margin:24px 0; padding:0; list-style:none;}
.steps>li{
  counter-increment:s; position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:17px 20px 15px 58px; margin-bottom:11px;
  color:var(--ink2); box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:border-color .18s, box-shadow .18s;
}
.steps>li:hover{border-color:#cfdcf3; box-shadow:var(--shadow);}
.steps>li::before{
  content:counter(s); position:absolute; left:19px; top:17px;
  width:25px; height:25px; border-radius:8px;
  background:linear-gradient(135deg,#2563eb,#4f83f1); color:#fff;
  font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px -3px rgba(37,99,235,.6);
}
.steps>li>b{display:block; color:var(--ink); margin-bottom:4px; font-size:15.5px;}
.steps>li p{margin:6px 0 0; font-size:14.5px;}
.steps>li p:last-child{margin-bottom:0;}
.steps>li ul{margin:8px 0 0; font-size:14.5px;}

/* ---------- timeline ---------- */
.tl{list-style:none; padding:0 0 0 26px; margin:24px 0; position:relative;}
.tl::before{
  content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--brand),#dbe4f5);
}
.tl>li{position:relative; margin-bottom:18px; color:var(--ink2); font-size:14.5px;}
.tl>li::before{
  content:""; position:absolute; left:-26px; top:8px;
  width:10px; height:10px; border-radius:50%;
  background:#fff; border:2px solid var(--brand);
}
.tl b{display:block; color:var(--ink); font-size:14.5px; margin-bottom:2px;}

/* ---------- bars ---------- */
.bars{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin:24px 0; box-shadow:var(--shadow);}
.bars h4{margin:0 0 16px; font-size:14px; color:var(--muted); font-weight:600; letter-spacing:.02em;}
.bar-row{display:grid; grid-template-columns:104px 1fr 96px; gap:14px; align-items:center; font-size:13px; margin-bottom:11px;}
.bar-row:last-child{margin-bottom:0;}
.bar-row .lbl{color:var(--ink2); font-weight:600;}
.bar{height:9px; border-radius:99px; background:#eef1f6; overflow:hidden;}
.bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#2563eb,#7aa7ff);}
.bar.warm i{background:linear-gradient(90deg,#c2410c,#fb923c);}
.bar.ok i{background:linear-gradient(90deg,#0f766e,#5eead4);}
.bar-row .val{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:700; font-size:13px;}
.bars .scale{font-size:11.5px; color:var(--faint); margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);}

/* ---------- vs compare ---------- */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:0; margin:24px 0; align-items:stretch;}
.vs>div{
  background:var(--card); border:1px solid var(--line); padding:22px 24px;
}
.vs>div:first-child{border-radius:var(--r) 0 0 var(--r);}
.vs>div:last-child{border-radius:0 var(--r) var(--r) 0; border-left:0;}
.vs h4{margin:0 0 6px; font-size:15px;}
.vs .sub{font-size:12.5px; color:var(--muted); margin:0 0 12px;}
.vs ul{margin:0; padding-left:17px; font-size:13.5px;}
.vs ul li{margin-bottom:6px;}
.vs .tagv{
  display:inline-block; font-size:11px; font-weight:700; padding:2px 8px;
  border-radius:5px; margin-bottom:10px;
}
.vs .blue{color:var(--brand-deep); background:var(--brand-soft);}
.vs .warmc{color:var(--warm); background:var(--warm-soft);}

/* ---------- diagram ---------- */
figure.diagram{
  margin:28px 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px 22px 16px; box-shadow:var(--shadow);
}
figure.diagram svg{display:block; width:100%; height:auto;}
figure.diagram figcaption{
  font-size:12.5px; color:var(--muted); text-align:center;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line2); line-height:1.7;
}

/* ---------- faq ---------- */
.faq{margin:24px 0 0;}
.faq details{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:0 20px; margin-bottom:10px; transition:border-color .18s, box-shadow .18s;
}
.faq details:hover{border-color:#cfdcf3;}
.faq details[open]{border-color:#cfdcf3; box-shadow:var(--shadow);}
.faq summary{
  cursor:pointer; font-weight:600; color:var(--ink); font-size:15px;
  list-style:none; display:flex; justify-content:space-between; gap:14px;
  padding:16px 0; align-items:flex-start; line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+"; flex:0 0 22px; height:22px; border-radius:50%;
  background:#f2f5fa; color:var(--muted); font-weight:400; font-size:16px;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.faq details[open] summary::after{content:"–"; background:var(--brand-soft); color:var(--brand);}
.faq details p{margin:0 0 18px; font-size:14.5px; color:var(--ink2); line-height:1.85;}

/* ---------- pull ---------- */
.pull{
  font-size:18.5px; line-height:1.75; font-weight:600; color:var(--ink);
  border-left:3px solid var(--brand); padding:6px 0 6px 20px;
  margin:30px 0; letter-spacing:-.01em;
}

/* ---------- cta ---------- */
.cta{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 58%,#3b82f6 100%);
  border-radius:var(--r-lg); padding:32px 34px; margin:48px 0 8px;
  box-shadow:0 20px 40px -24px rgba(30,58,138,.7);
}
.cta::after{
  content:""; position:absolute; right:-40px; top:-60px; width:240px; height:240px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
}
.cta h3{color:#fff; margin:0 0 9px; font-size:19px; letter-spacing:-.01em;}
.cta p{color:rgba(255,255,255,.86); font-size:14.5px; margin:0 0 20px; max-width:540px;}
.cta a{
  position:relative; z-index:1;
  display:inline-block; background:#fff; color:var(--brand-deep); font-weight:700;
  font-size:14px; padding:11px 24px; border-radius:10px;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.35); transition:transform .18s;
}
.cta a:hover{transform:translateY(-1px); color:var(--brand-deep);}
.cta small{display:block; margin-top:14px; font-size:12px; color:rgba(255,255,255,.62);}

/* ---------- related ---------- */
.related{margin:48px 0 0; padding-top:28px; border-top:1px solid var(--line);}
.related h3{font-size:12px; margin:0 0 14px; color:var(--faint); font-weight:700; letter-spacing:.12em;}
.related ul{list-style:none; padding:0; margin:0; display:grid; gap:9px;}
.related li{margin:0;}
.related a{
  display:block; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 18px; font-size:14.5px; color:var(--ink);
  font-weight:600; transition:border-color .18s, transform .18s, box-shadow .18s;
  padding-right:42px; position:relative;
}
.related a span{display:block; font-size:12.5px; color:var(--muted); margin-top:3px; font-weight:400;}
.related a::after{
  content:"→"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  color:var(--faint); transition:transform .18s, color .18s;
}
.related a:hover{border-color:#c9d8f5; box-shadow:var(--shadow); text-decoration:none;}
.related a:hover::after{color:var(--brand); transform:translateY(-50%) translateX(3px);}

/* ---------- index page ---------- */
.hero{padding:76px 0 44px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:radial-gradient(900px 400px at 10% -20%, #e8efff 0%, transparent 60%), linear-gradient(180deg,#fff,#f8fafd);}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(to right,rgba(37,99,235,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,99,235,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(700px 320px at 80% 10%, #000, transparent 75%);
  mask-image:radial-gradient(700px 320px at 80% 10%, #000, transparent 75%);
}
.hero>*{position:relative; z-index:1;}
.hero .kicker{margin-top:0;}
.hero h1{font-size:clamp(28px,4vw,42px); margin:0 0 20px; max-width:780px;}
.hero p{font-size:17px; color:var(--ink2); max-width:700px; margin:0 0 26px;}
.hero .stats{display:flex; gap:40px; flex-wrap:wrap; margin-top:30px;}
.hero .stats div b{display:block; font-size:26px; color:var(--ink); line-height:1.25; letter-spacing:-.02em; font-weight:800;}
.hero .stats div span{font-size:12.5px; color:var(--muted);}

.sect{padding:46px 0 6px;}
.sect-head{display:flex; align-items:baseline; gap:12px; margin-bottom:10px;}
.sect-head h2{
  border:0; padding:0 0 0 13px; margin:0; font-size:22px;
  border-left:4px solid var(--brand); line-height:1.4;
}
.sect-head h2::before{display:none;}
.sect-head .count{font-size:12px; color:var(--faint);}
.sect-desc{color:var(--muted); font-size:14px; margin:0 0 22px;}

.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.cards>.card:last-child:nth-child(odd){grid-column:1 / -1;}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px; display:block; position:relative; overflow:hidden;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.card:hover{border-color:#c9d8f5; text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow);}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#2563eb,#7aa7ff);}
.card.cost::before{background:linear-gradient(180deg,#c2410c,#fb923c);}
.card.howto::before{background:linear-gradient(180deg,#0f766e,#5eead4);}
.card h3{margin:0 0 7px; font-size:16px; color:var(--ink); line-height:1.55; letter-spacing:-.01em;}
.card p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.75;}
.card .k{display:inline-block; font-size:11px; font-weight:700; color:var(--brand-deep); background:var(--brand-soft); padding:3px 9px; border-radius:5px; margin-bottom:11px;}
.card.cost .k{color:var(--warm); background:var(--warm-soft);}
.card.howto .k{color:var(--ok); background:var(--ok-soft);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); margin-top:60px; padding:32px 0 64px; font-size:12.5px; color:var(--muted); background:#fff;}
footer .fl{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px;}
footer a{color:var(--muted);}
footer a:hover{color:var(--brand);}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .layout{display:block; padding-top:36px;}
  .toc{display:none;}
}
@media (max-width:820px){
  body{font-size:15.5px; line-height:1.85;}
  h1{font-size:25px; letter-spacing:-.02em;}
  h2{font-size:19.5px; margin-top:40px;}
  h3{font-size:16.5px;}
  .ahero-in{padding:24px 0 30px;}
  .wrap{padding:0 18px;}
  .nav-in{padding:10px 18px; gap:12px;}
  .nav-links{display:none;}
  .nav-cta{margin-left:auto;}
  .twrap{max-width:100%; -webkit-overflow-scrolling:touch;}
  table{font-size:12.5px; min-width:470px;}
  th,td{padding:10px 12px;}
  .cta{padding:26px 22px;}
  .tldr{padding:18px 20px;}
  .note,.ok{padding:16px 18px 16px 46px;}
  .kg{grid-template-columns:repeat(2,1fr);}
  .vs{grid-template-columns:1fr;}
  .vs>div:first-child{border-radius:var(--r) var(--r) 0 0;}
  .vs>div:last-child{border-radius:0 0 var(--r) var(--r); border-left:1px solid var(--line); border-top:0;}
  .steps>li{padding:15px 16px 13px 52px;}
  .steps>li::before{left:15px; top:15px;}
  .bar-row{grid-template-columns:80px 1fr 78px; gap:10px; font-size:12px;}
  .cards{grid-template-columns:1fr;}
  .hero{padding:48px 0 34px;}
  .hero .stats{gap:26px;}
}
@media print{
  .nav,.cta,.related,.toc,.pbar{display:none;}
  body{background:#fff; font-size:12pt;}
  .ahero{background:#fff;}
  .ahero::after{display:none;}
  .twrap{box-shadow:none;}
  h2{page-break-after:avoid;}
  table{page-break-inside:avoid;}
}

/* ====== 以下为 design2.css（v3 扩展组件）====== */

/* ==========================================================
   套图宝 · 卖家指南 — Design System v3（第二批扩展组件）
   仅在新增页面上与 style.css 一起加载，不影响既有页面
   ========================================================== */

/* ---------- 尺寸比例卡（平台规格篇） ---------- */
.ratios{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin:26px 0 30px;
}
.ratio{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 16px; box-shadow:0 1px 2px rgba(16,24,40,.03);
  display:flex; flex-direction:column; gap:12px;
}
.ratio .box{
  height:104px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#fbfcff,#f4f7fd); border-radius:9px;
  border:1px dashed #d9e2f2;
}
.ratio .box i{
  display:block; background:linear-gradient(150deg,#dbe6ff,#b9cffd);
  border:1.5px solid #8fb2f5; border-radius:4px;
}
.ratio b{font-size:14px; letter-spacing:-.01em; color:var(--ink);}
.ratio span{font-size:12.5px; color:var(--muted); line-height:1.55; display:block; margin-top:3px;}
.ratio .why{
  font-size:11.5px; color:var(--brand-deep); background:var(--brand-soft);
  border-radius:6px; padding:4px 8px; align-self:flex-start; font-weight:600;
  margin-top:auto;
}

/* ---------- 色值 / 参数卡 ---------- */
.swatches{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; margin:24px 0 28px;
}
.sw{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.sw .chipc{height:58px; position:relative; border-bottom:1px solid var(--line);}
.sw .chipc em{
  position:absolute; right:10px; bottom:8px; font-style:normal;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:2px 7px; border-radius:4px; background:rgba(255,255,255,.9);
  color:var(--ink); border:1px solid rgba(16,24,40,.08);
}
.sw .txt{padding:12px 15px 14px;}
.sw b{display:block; font-size:13.5px; color:var(--ink); margin-bottom:2px; letter-spacing:-.01em;}
.sw span{font-size:12px; color:var(--muted); line-height:1.5; display:block;}

/* ---------- 六宫格成片模拟 ---------- */
.grid6{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:26px 0 8px;
}
.grid6 figure{
  margin:0; border-radius:11px; overflow:hidden; position:relative;
  border:1px solid var(--line); background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.grid6 .ph{
  aspect-ratio:3/4; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.grid6 .shell{
  width:64%; height:82%; border-radius:16% / 11%;
  position:relative; overflow:hidden;
  box-shadow:0 10px 22px -10px rgba(16,24,40,.45), inset 0 0 0 1.5px rgba(255,255,255,.5);
}
.grid6 .shell::after{
  content:""; position:absolute; left:0; right:0; top:0; height:46%;
  background:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,0) 62%);
  pointer-events:none;
}
.grid6 .cam{
  position:absolute; left:9%; top:7%; width:38%; height:23%;
  background:#12161c; border-radius:26%;
  box-shadow:0 0 0 2.5px rgba(255,255,255,.35);
}
.grid6 .cam::before,.grid6 .cam::after{
  content:""; position:absolute; border-radius:50%; background:#2b323d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.grid6 .cam::before{width:36%; padding-bottom:36%; left:10%; top:16%;}
.grid6 .cam::after{width:26%; padding-bottom:26%; right:10%; bottom:14%;}
.grid6 figcaption{
  padding:8px 10px 9px; font-size:11.5px; color:var(--muted);
  border-top:1px solid var(--line2); line-height:1.45; background:#fcfdff;
}
.grid6 figcaption b{color:var(--ink); font-weight:700;}
.grid6 figcaption em{font-style:normal; color:var(--faint);}

/* ---------- 流程条 ---------- */
.flow{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:0; margin:26px 0; align-items:stretch;
}
.flow>div{
  background:var(--card); border:1px solid var(--line); padding:16px 16px 15px;
  position:relative; font-size:13px; color:var(--ink2);
}
.flow>div:first-child{border-radius:var(--r) 0 0 var(--r);}
.flow>div:last-child{border-radius:0 var(--r) var(--r) 0;}
.flow>div+div{border-left:0;}
.flow b{display:block; color:var(--ink); font-size:13.5px; margin-bottom:4px; letter-spacing:-.01em;}
.flow .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:6px; background:var(--brand-soft);
  color:var(--brand-deep); font-size:11px; font-weight:800; margin-bottom:8px;
}
.flow .m{color:var(--faint); font-size:11.5px; display:block; margin-top:5px;}

/* ---------- 勾选清单 ---------- */
.checklist{list-style:none; padding:0; margin:22px 0;}
.checklist li{
  position:relative; padding:11px 16px 11px 44px; font-size:14.5px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  margin-bottom:8px; color:var(--ink2);
}
.checklist li::before{
  content:""; position:absolute; left:16px; top:14px;
  width:15px; height:9px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok);
  transform:rotate(-45deg);
}
.checklist li b{color:var(--ink);}
.checklist li em{font-style:normal; color:var(--faint); font-size:12.5px; margin-left:4px;}

/* ---------- 文件规格矩阵 ---------- */
.matrix{
  display:grid; grid-template-columns:126px 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin:24px 0;
}
.matrix>div{background:var(--card); padding:13px 16px; font-size:13.5px; color:var(--ink2);}
.matrix>div.k{
  background:#fafbfe; font-weight:700; color:var(--ink); font-size:13px;
  display:flex; align-items:center;
}
.matrix>div b{color:var(--ink);}
.matrix>div em{font-style:normal; color:var(--risk); font-weight:600; font-size:12.5px;}

/* ---------- 三栏对比（决策篇） ---------- */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:26px 0 30px;}
.trio>div{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 20px 18px; box-shadow:0 1px 2px rgba(16,24,40,.03);
  display:flex; flex-direction:column;
}
.trio .head{
  font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--faint);
  margin-bottom:9px; text-transform:uppercase;
}
.trio b.name{font-size:16px; letter-spacing:-.02em; display:block; margin-bottom:4px;}
.trio .price{
  font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--ink);
  margin:10px 0 2px; font-variant-numeric:tabular-nums;
}
.trio .price i{font-style:normal; font-size:12.5px; font-weight:600; color:var(--muted); margin-left:2px;}
.trio .per{font-size:11.5px; color:var(--faint); margin-bottom:12px;}
.trio ul{margin:0 0 0; padding-left:16px; font-size:13px; color:var(--ink2); flex:1;}
.trio ul li{margin-bottom:6px; line-height:1.6;}
.trio .verdict{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:12.5px; color:var(--muted); line-height:1.6;
}
.trio .verdict b{color:var(--ink); display:block; margin-bottom:2px; font-size:12.5px;}
.trio>div.pick{border-color:#c9d9f8; box-shadow:0 2px 10px -4px rgba(37,99,235,.28);}

/* ---------- 数据表（A/B 篇） ---------- */
.dataset{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:0; overflow:hidden; margin:24px 0; box-shadow:var(--shadow);
}
.dataset .hd{
  padding:14px 20px; border-bottom:1px solid var(--line); background:#fafbfe;
  font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; gap:12px;
}
.dataset .hd b{color:var(--ink); font-size:13px;}
.dataset table{min-width:0;}
.dataset th,.dataset td{font-size:13px; padding:10px 20px;}

/* ---------- 术语定义块（行业篇） ---------- */
.def{
  background:linear-gradient(180deg,#ffffff,#fbfcff);
  border:1px solid #dde7fb; border-left:4px solid var(--brand);
  border-radius:var(--r); padding:20px 24px; margin:24px 0;
}
.def .t{
  font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--brand);
  display:block; margin-bottom:8px;
}
.def p{margin:0; font-size:16px; line-height:1.85; color:#16233a;}
.def p b{color:#0f2a63;}

/* ---------- 通用小工具 ---------- */
.mini{font-size:12.5px; color:var(--faint); margin-top:10px; line-height:1.6;}
.center{text-align:center;}
.mt0{margin-top:0;}

@media (max-width:820px){
  .flow{grid-auto-flow:row; grid-auto-columns:auto;}
  .flow>div{border-left:1px solid var(--line); border-top:0;}
  .flow>div:first-child{border-radius:var(--r) var(--r) 0 0;}
  .flow>div:last-child{border-radius:0 0 var(--r) var(--r);}
  .flow>div+div{border-left:1px solid var(--line); border-top:0;}
  .trio{grid-template-columns:1fr;}
  .grid6{grid-template-columns:repeat(2,1fr);}
  .matrix{grid-template-columns:104px 1fr;}
  .matrix>div{padding:11px 12px; font-size:13px;}
}
@media (max-width:520px){
  .grid6{grid-template-columns:repeat(2,1fr); gap:8px;}
  .ratio .box{height:78px;}
}

/* ---------- 透明棋盘格 / 图案示意卡 ---------- */
.alpha{
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#e7ecf4 25%,transparent 25%),
    linear-gradient(-45deg,#e7ecf4 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e7ecf4 75%),
    linear-gradient(-45deg,transparent 75%,#e7ecf4 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0;
}
.sw.tall .chipc{height:136px; display:flex; align-items:center; justify-content:center;}
.sw .demo{
  width:56px; height:96px; border-radius:12px; position:relative;
  box-shadow:0 6px 14px -6px rgba(16,24,40,.35);
}
.sw .demo.none{background:transparent; border:1.5px dashed #9aa4b1;}
.sw .demo.white{background:#fff; border:1.5px solid #dfe4ec;}
.sw .demo.color{background:linear-gradient(150deg,#f9a8d4,#c084fc 55%,#60a5fa);}