/* claude-guide-s4-1030 教程页排版二期样式（叠在 guide-s3.css 后面；由 /root/kw-guides-tpl/render_guides.php 2c6 段注入，开关 s4.on / s4.off）
 * 只改样子：字号、颜色、折叠、货架、价格表、文末区块、电脑右侧目录。依赖 JS 的样式都挂在 html.s4 或 JS 新加的 s4- 类名上，JS 没跑时只有字号/颜色生效。 */

/* ---------- 颜色：灰色小字、小号橙色价格加深（白底和浅灰底上对比度都 ≥4.5） ---------- */
:root{--s3-faint:#646a75;--s4-red-s:#c2410c}
.price{color:var(--s4-red-s)!important}

/* ---------- 1. 折叠：事实卡、汇率说明 ---------- */
.s4-tg{flex:none;height:34px;padding:0 16px;border:1px solid #dfe2e8;border-radius:999px;background:#fff;color:var(--s3-text);font:600 14px/32px Inter,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.s4-tg:hover{border-color:#c9cdd6}
.s4-tg:after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.s4-open>.s4-tg:after{transform:rotate(-135deg);margin-bottom:-1px}
.s3-card.s4-fold{padding-top:26px;padding-bottom:26px}
.s3-card.s4-fold>h2{margin:0!important;padding-right:104px!important;font-size:21px!important;cursor:pointer}
.s3-card.s4-fold>.s4-tg{position:absolute;right:32px;top:24px}
.s3-card.s4-fold>h2 .s4-h2s{display:block;margin-top:4px;font-size:14px;font-weight:500;line-height:1.5;color:var(--s3-muted)}
.s3-card.s4-fold.s4-open>.s4-fold-b{margin-top:18px}
.s4-fold-b[hidden]:not([hidden=until-found]){display:none}
.s4-fx{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px}
.s4-fx>p{flex:1 1 auto;min-width:0;margin:0!important}
.s4-fx:not(.s4-open)>p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.s4-fx>.s4-tg{height:30px;padding:0 12px;font-size:14px;line-height:28px;margin-top:-1px}

/* ---------- 2. 首屏：货架每格只写档位（商品名大卡上已有），核对来源挪到结论下面 ---------- */
.s3-sku .s4-x{display:none!important}
.s3-sku.s4-dur .n i{color:var(--s3-text);font-weight:700}
html.s4 .s3-sku{min-height:70px}
html.s4 .s4-src{margin:12px 0 0!important}

/* ---------- 5. 文末「读完了？」 ---------- */
.s4-end{margin:32px 0 0}
.s4-end-t{margin:0 4px 14px;font:800 26px/1.35 Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--s3-text)}
.s4-end .s4-end-buy{margin:0 0 16px}
.s4-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.s4-rel-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.s4-rel-1{grid-template-columns:1fr}
.s4-rel a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--s3-line);border-radius:20px;background:#fff;box-shadow:var(--s3-shadow);text-decoration:none!important;transition:border-color .15s,box-shadow .15s}
.s4-rel a:hover{border-color:#ffb79a;box-shadow:0 6px 18px rgba(255,77,13,.10)}
.s4-rel b{font-size:16px;line-height:1.5;font-weight:700;color:var(--s3-text)}
.s4-rel a:hover b{color:var(--s3-red2)}
.s4-rel span{font-size:14px;line-height:1.6;color:var(--s3-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 6. 价格表：电脑上不变（按钮列不显示） ---------- */
.s4-pt-bc,.s4-more{display:none}

/* ---------- 7. 电脑 ≥1280：右侧本文目录 + 小价格卡（放在正文右边空白里，不挤正文） ---------- */
.s4-side{display:none}
@media (min-width:1280px){
  html.s4 .s4-side{display:flex;flex-direction:column;gap:12px;position:fixed;z-index:40;top:104px;left:calc(50% + 452px);width:clamp(160px,calc(50vw - 484px),248px);max-height:calc(100vh - 124px);font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
  .s4-side-toc{display:flex;flex-direction:column;min-height:0;padding:14px 6px 10px 12px;border:1px solid var(--s3-line);border-radius:20px;background:rgba(255,255,255,.92);box-shadow:var(--s3-shadow)}
  .s4-side-t{margin:0 0 8px 2px;font-size:14px;font-weight:800;color:var(--s3-text)}
  .s4-toc{min-height:0;overflow:auto;padding-right:6px;overscroll-behavior:contain;scrollbar-width:thin}
  .s4-toc a{display:block;margin:0 0 2px;padding:6px 8px 6px 10px;border-left:2px solid transparent;border-radius:0 10px 10px 0;font-size:14px;line-height:1.45;color:var(--s3-muted)!important;text-decoration:none!important}
  .s4-toc a:hover{color:var(--s3-text)!important;background:#f5f6f9}
  .s4-toc a.on{border-left-color:var(--s3-red);background:var(--s3-redbg);color:var(--s3-red2)!important;font-weight:700}
  .s4-side-buy{flex:none;padding:14px 14px 14px 16px;border:1px solid var(--s3-redline);border-radius:20px;background:#fff;box-shadow:var(--s3-shadow);transition:opacity .2s,visibility .2s}
  .s4-side-buy .nm{font-size:14px;font-weight:700;line-height:1.4;color:var(--s3-text)}
  .s4-side-buy .pr{margin-top:2px;font:800 28px/1.15 Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--s3-red)}
  .s4-side-buy a{display:flex;align-items:center;justify-content:center;height:44px;margin-top:10px;border-radius:12px;background:#111;color:#fff!important;font-size:15px;font-weight:800;text-decoration:none!important}
  .s4-side-buy a:hover{background:#2a2a2a}
  body.s4-buy-in .s4-side-buy,body.s4-end-in .s4-side-buy{opacity:0;visibility:hidden}
}

/* ---------- 3. 手机/平板：顶部导航下滑收起、上滑出来 ---------- */
@media (max-width:1023px){
  html.s4 .yy-gnav{transition:transform .25s ease}
  html.s4 .yy-gnav.s4-nav-up{transform:translateY(calc(-100% - 30px))}
}

/* ---------- 手机 ---------- */
@media (max-width:767px){
  /* 文末购买卡在屏幕上时，底部「去开通」条先藏起来（和首屏一样，不同时出现两个） */
  body.s4-end-in .yy-gbar{transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none}
}
@media (max-width:600px){
  /* 4. 字号：正文统一 16.5px，表格 16px，小字不小于 14px */
  body{font-size:16.5px}
  .tldr,.tip,.warn,.stat{font-size:16.5px!important}
  html .s3-qa-a p{font-size:16.5px}
  table{font-size:16px!important}
  table.s3-stk td{font-size:16px}
  table.s3-stk td:before{font-size:14px}
  .crumb{font-size:14px!important}
  .meta{font-size:14px!important}
  footer a{font-size:14px}
  .s3-faqall{font-size:14px}

  /* 1. 折叠 */
  .s3-card.s4-fold{padding-top:18px;padding-bottom:18px}
  .s3-card.s4-fold>h2{font-size:17px!important;line-height:1.5!important;padding-right:88px!important}
  .s3-card.s4-fold>.s4-tg{right:14px;top:16px;height:32px;padding:0 12px;line-height:30px}
  .s4-fx{gap:8px}

  /* 2. 货架：一行排完（四档一行四格、三档一行三格），每格只写档位 + 价格 */
  html.s4 .s3-shelf.s4-shelf,html.s4 .s3-shelf.s4-shelf.s3-n3{display:flex;gap:6px;margin-top:10px}
  html.s4 .s4-shelf .s3-sku,html.s4 .s4-shelf.s3-n3 .s3-sku{flex:1 1 0;min-width:0;min-height:0;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:9px 2px;border-radius:14px;text-align:center}
  html.s4 .s4-shelf .s3-sku .n{max-width:100%;font-size:13.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.s4 .s4-shelf .s3-sku .n i,html.s4 .s4-shelf.s3-n3 .s3-sku .n i{display:inline;margin:0}
  html.s4 .s4-shelf .s3-sku.s4-dur .n i{font-size:14px}
  html.s4 .s4-shelf .s3-sku .p{font-size:16.5px;color:var(--s4-red-s)}
  html.s4 .s3-buy .yy-gcta{padding:16px!important;gap:12px}
  html.s4 .s3-buy .s3-pr{font-size:38px}
  html.s4 .s3-buy .yy-gcta-btn{height:52px}

  /* 5. 文末 */
  .s4-end{margin-top:24px}
  .s4-end-t{font-size:22px;margin-bottom:12px}
  .s4-rel,.s4-rel-2{grid-template-columns:1fr;gap:10px}
  .s4-rel a{padding:14px 16px;border-radius:18px}

  /* 6. 价格表：一行一档（名称 | 价格 | 去开通），其他列缩成名称下面的小字；本页主商品以外的收进「其他会员价格」 */
  .tw:has(table.s4-pt){overflow:visible;background:#fff!important}
  table.s4-pt,table.s4-pt.wide,table.s4-pt tbody{display:block;min-width:0!important;width:100%}
  table.s4-pt thead{display:none}
  table.s4-pt tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:10px;row-gap:3px;padding:12px 12px 12px 14px;border-bottom:1px solid var(--s3-line2)}
  table.s4-pt tbody tr:last-child{border-bottom:0}
  table.s4-pt td{display:block;min-width:0!important;padding:0!important;border:0!important;white-space:normal!important}
  table.s4-pt td:before{content:none}
  table.s4-pt td.s4-pt-n{grid-column:1;grid-row:1;font-size:16px;font-weight:700;line-height:1.45;color:var(--s3-text)!important}
  table.s4-pt td.s4-pt-p{grid-column:2;grid-row:1;text-align:right;white-space:nowrap!important;font-size:17px}
  table.s4-pt td.s4-pt-bc{display:block;grid-column:3;grid-row:1}
  table.s4-pt td.s4-pt-x{grid-column:1/-1;font-size:14px;line-height:1.6;color:var(--s3-muted)!important}
  table.s4-pt td.s4-pt-x:before{content:attr(data-th) "  ";font-weight:600;color:var(--s3-faint)}
  table.s4-pt td.s4-pt-lk{display:none}
  table.s4-pt:not(.s4-pt-open) tr.s4-pt-other{display:none}
  .s4-pt-b{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:10px;background:#111;color:#fff!important;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none!important}
  .s4-more{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:12px 14px;border:0;border-top:1px solid var(--s3-line);border-radius:0 0 15px 15px;background:#fafbfc;color:var(--s3-text);font:600 15px/1.4 Inter,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .s4-more-s{color:var(--s3-link)}
  .s4-more-s:after{content:"";display:inline-block;width:6px;height:6px;margin:0 2px 3px 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  .s4-more[aria-expanded=true] .s4-more-s:after{transform:rotate(-135deg);margin-bottom:-1px}
}