/* claude-guide-s3-1030 方案3「卡片货架版」教程页样式（由 /root/kw-guides-tpl/render_guides.php 注入，开关见该脚本 2c5 段）
 * 用法：排在 guide-dark.css、guide-nav.css 后面加载，把深色皮肤盖回浅色。
 * 只改样子：不改文字/链接/价格/网址/JSON-LD；顶部胶囊导航（guide-nav.css）不动。
 * 和 override.js 配合：JS 跑完给 <html> 加 class="s3"，正文按 h2 分成一张张白卡；
 * JS 没跑（被拦/出错）时，整篇文章显示成一张大白卡，照样能读。 */

:root{
  --s3-text:#1c2024;--s3-body:#30353d;--s3-muted:#5f6670;--s3-faint:#8a909a;
  --s3-line:#eceef3;--s3-line2:#f2f3f7;--s3-card:#fff;
  --s3-red:#ff4d0d;--s3-red2:#c2410c;--s3-redbg:#fff4ef;--s3-redline:#ffd9c9;
  --s3-link:#1d63ed;--s3-green:#15803d;--s3-greenbg:#ecfdf3;
  --s3-shadow:0 8px 30px rgba(30,30,60,.06);
  --bg:#f3f5fa;--card:#fff;--text:#1c2024;--muted:#5f6670;--line:#eceef3;--brand:#ff4d0d;--brand2:#1d63ed
}

/* ---------- 底色：柔和渐变（同商品页 item/5） ---------- */
html{background:#f1f4fa linear-gradient(165deg,#fff3ee 0,#f6f7fb 520px,#f1f4fa 1100px) no-repeat!important;color:var(--s3-text)!important}
body{background:transparent!important;color:var(--s3-text)!important;font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif!important;font-size:17px;line-height:1.8;-webkit-font-smoothing:antialiased}
body:before{content:none!important;display:none!important}
a{color:var(--s3-link)}
b,strong{color:var(--s3-text)}

/* ---------- 版心：卡片宽 856（卡内正文约 760） ---------- */
main{max-width:880px!important;margin:0 auto!important;padding:0 12px!important}
.crumb{margin:22px 0 0!important;font-size:14px!important;color:var(--s3-faint)!important}
.crumb a{color:var(--s3-muted)!important}

/* 没跑 JS 时：整篇一张大白卡 */
article,.box{background:var(--s3-card)!important;border:1px solid var(--s3-line)!important;border-radius:28px!important;padding:40px 48px!important;margin:16px 0 24px!important;box-shadow:var(--s3-shadow)!important}
/* 跑了 JS：文章本身透明，分成一张张卡 */
html.s3 article{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;margin:0 0 24px!important;box-shadow:none!important}
.s3-card{background:var(--s3-card);border:1px solid var(--s3-line);border-radius:28px;padding:40px 48px 30px;margin:0 0 20px;box-shadow:var(--s3-shadow);position:relative}
.s3-card>:first-child{margin-top:0!important}
.s3-card>:last-child{margin-bottom:0!important}

/* ---------- 标题 ---------- */
h1{margin:14px 0 0!important;padding:0!important;font-size:38px!important;line-height:1.3!important;font-weight:800!important;letter-spacing:-.01em!important;color:var(--s3-text)!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor}
html.s3 h1{padding:0 4px!important}
.meta{margin:12px 0 22px!important;font-size:14px!important;color:var(--s3-faint)!important}
html.s3 .meta{padding:0 4px}
h2{position:relative;margin:44px 0 18px!important;padding:0 0 0 16px!important;border:0!important;font-size:26px!important;line-height:1.4!important;font-weight:800!important;letter-spacing:0!important;color:var(--s3-text)!important}
h2:before{content:"";position:absolute;left:0;top:.28em;width:5px;height:1.05em;border-radius:3px;background:linear-gradient(180deg,#ff7a45,var(--s3-red))}
h3{margin:28px 0 8px!important;font-size:19px!important;line-height:1.5!important;font-weight:700!important;color:var(--s3-text)!important}

/* ---------- 正文 ---------- */
article p,article li{color:var(--s3-body)}
article p{margin:0 0 16px}
article ul,article ol{margin:0 0 18px}
main p[style]{color:var(--s3-muted)!important}
main [style*="color:#5d6475"]{color:var(--s3-muted)!important}
main p[style*="font-size:14px"]{font-size:15px!important;line-height:1.75!important}
main p[style*="font-size:13px"]{font-size:14px!important;line-height:1.7!important}
main span[style*="font-size:14px"]{font-size:15px!important}
.yy-src{color:var(--s3-faint)!important}
.yy-src a{color:var(--s3-muted)!important;text-decoration:underline;text-decoration-color:#d5d8df;text-underline-offset:3px}
code{background:#f3f4f7!important;color:#1f2937!important;border:1px solid #e8eaf0!important;border-radius:6px!important;padding:1px 6px!important;font-size:.88em!important;word-break:normal!important;overflow-wrap:anywhere}

/* 无序列表：红色小圆点 */
article ul{list-style:none;padding-left:0}
article ul>li{position:relative;padding-left:22px;margin:0 0 8px}
article ul>li:before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--s3-red)}

/* 有序列表：圆形数字 + 竖线连起来的步骤 */
article ol,article ol.steps{list-style:none!important;padding-left:0!important;counter-reset:s3n!important}
article ol>li,article ol.steps>li{position:relative;counter-increment:s3n!important;padding:2px 0 18px 52px!important;margin:0!important}
article ol>li:before,article ol.steps>li:before{content:counter(s3n)!important;position:absolute;left:0;top:0;width:34px!important;height:34px!important;border-radius:50%!important;background:var(--s3-redbg)!important;color:var(--s3-red2)!important;border:1.5px solid var(--s3-redline);box-sizing:border-box;font:800 15px/31px Inter,-apple-system,sans-serif!important;text-align:center}
article ol.steps>li:before{background:var(--s3-red)!important;color:#fff!important;border-color:var(--s3-red)}
article ol>li:after{content:"";position:absolute;left:16px;top:38px;bottom:2px;width:2px;border-radius:2px;background:var(--s3-line)}
article ol>li:last-child{padding-bottom:4px!important}
article ol>li:last-child:after{display:none}

/* ---------- 提示框 ---------- */
.tldr,.stat,.tip,.warn,.tw,.faq,.list,.yy-gcta{box-shadow:none!important}
.tldr{background:var(--s3-redbg)!important;border:1px solid var(--s3-redline)!important;border-radius:20px!important;padding:20px 24px!important;margin:0 0 16px!important;font-size:17px!important;color:var(--s3-body)!important;line-height:1.8}
.tldr b{color:var(--s3-red2)!important}
.stat{background:var(--s3-greenbg)!important;border:1px solid #c9eed8!important;border-radius:16px!important;padding:12px 18px!important;margin:16px 0!important;color:var(--s3-green)!important;font-size:16px!important;font-weight:600}
.tip,.warn{position:relative;border:0!important;border-radius:16px!important;padding:16px 20px 16px 24px!important;margin:18px 0!important;font-size:16px!important;line-height:1.8}
.tip{background:#f2f6ff!important;color:var(--s3-body)!important}
.warn{background:#fff7ea!important;color:var(--s3-body)!important}
.tip:before,.warn:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 3px 3px 0;background:#5b8def!important}
.warn:before{background:#f0a020!important}
blockquote.tip{margin:18px 0!important}

/* ---------- 表格：浅色圆角表（手机可左右滑，右边缘有阴影提示） ---------- */
.tw{margin:18px 0!important;padding:0!important;border:1px solid var(--s3-line)!important;border-radius:16px!important;overflow-x:auto;background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/40px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(20,25,40,.14),transparent) 0 0/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(20,25,40,.14),transparent) 100% 0/12px 100% no-repeat scroll,#fff!important}
table{width:100%;margin:0!important;border-collapse:collapse;font-size:16px!important;line-height:1.7}
th,td{border:0!important;border-bottom:1px solid var(--s3-line2)!important;padding:13px 16px!important;color:var(--s3-body)!important;text-align:left;vertical-align:top}
th{background:#f7f8fb!important;color:var(--s3-muted)!important;font-size:14px!important;font-weight:700!important;border-bottom:1px solid var(--s3-line)!important}
tr:last-child td{border-bottom:0!important}
th:first-child,td:first-child{min-width:5.5em}
td b{color:var(--s3-text)}
.price{color:var(--s3-red)!important;font-weight:800!important;font-size:17px}

/* ---------- 按钮 ---------- */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 8px!important}
.btn{display:inline-flex!important;align-items:center;justify-content:center;height:52px;padding:0 28px!important;border-radius:14px!important;font-size:16px!important;font-weight:700!important;text-decoration:none!important}
.btn.p{background:#111!important;color:#fff!important;border:0!important}
.btn.p:hover{background:#2a2a2a!important;opacity:1}
.btn.s{background:#fff!important;color:var(--s3-text)!important;border:1px solid #dfe2e8!important}

/* ---------- 图片 ---------- */
figure{margin:18px 0!important}
figure img{border:1px solid var(--s3-line)!important;border-radius:16px!important;box-shadow:0 4px 18px rgba(30,30,60,.06)}
figcaption{font-size:14px!important;color:var(--s3-faint)!important;margin-top:8px}

/* ---------- 首屏购买卡（JS 把页内原有的「去开通」条挪进来，并从页内价格表复制几档） ---------- */
.yy-gcta{background:#fff!important;border:1px solid var(--s3-line)!important;border-radius:16px!important;padding:12px 14px 12px 18px!important;margin:0 0 16px!important;font-size:15px!important;color:var(--s3-muted)!important}
.yy-gcta b{color:var(--s3-text)!important}
.yy-gcta-btn{background:#111!important;color:#fff!important;border-radius:12px!important;padding:9px 18px!important;font-size:15px!important}
.s3-buy{background:#fff;border:1px solid var(--s3-line);border-radius:28px;padding:24px;margin:0 0 20px;box-shadow:0 10px 36px rgba(30,30,60,.08)}
.s3-buy .yy-gcta{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:16px 24px;margin:0!important;padding:20px 24px!important;background:var(--s3-redbg)!important;border:1px solid var(--s3-redline)!important;border-radius:20px!important;font-size:15px!important;line-height:1.5!important}
.s3-buy .yy-gcta>span{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0}
.s3-buy .s3-ey{flex:0 0 100%;font-size:14px;color:var(--s3-muted)}
.s3-buy .yy-gcta b{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-weight:700}
.s3-buy .s3-nm{font-size:20px;font-weight:800;color:var(--s3-text)}
.s3-buy .s3-pr{font:800 44px/1.05 Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--s3-red);letter-spacing:-.01em}
.s3-buy .s3-how{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--s3-greenbg);color:var(--s3-green);font-size:14px;font-weight:600}
.s3-buy .s3-how:before{content:"";width:7px;height:7px;border-radius:50%;background:#16a34a;flex:none}
.s3-buy .yy-gcta-btn{display:inline-flex!important;align-items:center;justify-content:center;height:56px;min-width:180px;padding:0 30px!important;border-radius:16px!important;background:#111!important;color:#fff!important;font-size:18px!important;font-weight:800!important;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.s3-buy .yy-gcta-btn:hover{background:#2a2a2a!important;text-decoration:none}
.s3-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:16px 0 0}
.s3-sku{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:84px;padding:14px 16px;border:1px solid var(--s3-line);border-radius:18px;background:#fff;color:var(--s3-text)!important;text-decoration:none!important;transition:border-color .15s,box-shadow .15s}
.s3-sku:hover{border-color:#ffb79a;box-shadow:0 6px 18px rgba(255,77,13,.10)}
.s3-sku .n{font-size:14px;font-weight:700;line-height:1.45;color:var(--s3-text)}
.s3-sku .n i{display:block;font-style:normal;font-weight:500;color:var(--s3-muted)}
.s3-sku .p{font:800 20px/1.1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--s3-red)}
.s3-all{display:flex;justify-content:flex-end;margin:10px 4px 0;font-size:14px}
.s3-all a{color:var(--s3-muted)!important;font-weight:600}

/* ---------- 常见问题：点开看答案 ---------- */
.faq{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important}
.faq h3:first-child{margin-top:0!important}
.s3-qa{border-bottom:1px solid var(--s3-line)}
.s3-qa:first-of-type{border-top:1px solid var(--s3-line)}
.s3-qa>summary{list-style:none;cursor:pointer;position:relative;padding:18px 44px 18px 0;-webkit-tap-highlight-color:transparent}
.s3-qa>summary::-webkit-details-marker{display:none}
.s3-qa>summary h3{margin:0!important;font-size:18px!important;line-height:1.55!important}
.s3-qa>summary:after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-8px;border-right:2px solid var(--s3-faint);border-bottom:2px solid var(--s3-faint);transform:rotate(45deg);transition:transform .2s}
.s3-qa[open]>summary:after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--s3-red)}
.s3-qa>summary:hover h3{color:var(--s3-red2)!important}
.s3-qa-a{padding:0 8px 16px 0}
.s3-qa-a p{font-size:16px}
.s3-faqall{position:absolute;right:40px;top:40px;height:34px;padding:0 14px;border:1px solid #dfe2e8;border-radius:999px;background:#fff;color:var(--s3-muted);font:600 14px/32px Inter,-apple-system,"PingFang SC",sans-serif;cursor:pointer}
.s3-faqall:hover{color:var(--s3-text);border-color:#c9cdd6}

/* ---------- 目录页 / 个别页面专用元素（盖回浅色） ---------- */
.list{background:transparent!important;border:0!important;padding:0!important}
.list a{border-bottom:1px solid var(--s3-line)!important;color:var(--s3-text)!important}
.list a b{color:var(--s3-link)!important}
.list a span{color:var(--s3-muted)!important}
.list a:hover b{color:var(--s3-red2)!important}
.chk{color:var(--s3-faint)!important}
.acct tr.grp td{background:#f7f8fb!important;color:var(--s3-muted)!important}
.acct tr.sum td{background:var(--s3-redbg)!important;color:var(--s3-text)!important}
.acct small{color:var(--s3-faint)!important}
.fgi{background:#fff!important;border:1px solid var(--s3-line)!important;border-radius:16px!important}
.fgi img{background:#f7f8fb!important;border:0!important;border-radius:10px!important;box-shadow:none}
.cmd-t{color:var(--s3-muted)!important}

/* ---------- 页脚：链接做成小胶囊 ---------- */
footer{max-width:880px!important;margin:8px auto 0!important;padding:8px 12px 56px!important;border-top:0!important;text-align:center;font-size:14px!important;color:var(--s3-faint)!important;line-height:1.6}
footer a{display:inline-block;margin:0 4px 10px!important;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--s3-line);color:var(--s3-muted)!important;font-size:14px}
footer a:hover{color:var(--s3-text)!important;text-decoration:none;background:#fff}

/* ---------- 顶部胶囊导航：不改，只把阴影调轻一点配浅底 ---------- */
.yy-gnav-bar{box-shadow:0 6px 20px rgba(20,25,40,.18)!important}

/* ---------- 手机 ---------- */
@media (max-width:767px){
  /* 底部固定「去开通」条（页里本来就有，换成浮起的白色圆角条） */
  .yy-gbar{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;height:62px!important;padding:0 8px 0 16px!important;box-sizing:border-box!important;gap:10px!important;border-radius:20px!important;background:rgba(255,255,255,.97)!important;border:1px solid var(--s3-line)!important;box-shadow:0 10px 30px rgba(20,25,40,.16)!important;-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);color:var(--s3-muted)!important;transition:transform .25s ease,opacity .25s ease}
  .yy-gbar-t{display:flex!important;flex-wrap:wrap;align-items:baseline;align-content:center;line-height:1.25!important;white-space:nowrap;overflow:hidden}
  .yy-gbar-t b{display:contents}
  .yy-gbar-t .s3-pr{order:-1;flex:0 0 100%;font:800 22px/1.1 Inter,-apple-system,sans-serif;color:var(--s3-red)}
  .yy-gbar-t .s3-nm{font-size:13px;font-weight:600;color:var(--s3-body)}
  .yy-gbar-t .s3-how{margin-left:4px;font-size:13px;color:var(--s3-faint)}
  .yy-gbar-btn{display:inline-flex!important;align-items:center;height:46px;padding:0 22px!important;border-radius:14px!important;background:#111!important;color:#fff!important;font-size:16px!important;font-weight:800!important}
  .yy-gbar-x{width:30px!important;height:30px!important;line-height:30px!important;font-size:18px!important;background:#f2f3f6!important;color:var(--s3-faint)!important}
  body.s3-buy-in .yy-gbar{transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none}
  body.yy-gbar-on footer{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
}
@media (max-width:600px){
  body{font-size:16px}
  main{padding:0 10px!important}
  .crumb{margin:16px 2px 0!important;font-size:13.5px!important;line-height:1.6}
  article,.box{padding:22px 18px!important;border-radius:22px!important}
  .s3-card{padding:24px 18px 18px;border-radius:22px;margin-bottom:14px}
  h1{font-size:26px!important;line-height:1.35!important;margin-top:10px!important}
  .meta{margin:8px 0 16px!important;font-size:13.5px!important}
  h2{margin:34px 0 14px!important;font-size:22px!important;padding-left:14px!important}
  h3{font-size:18px!important}
  .tldr{padding:16px 18px!important;font-size:16px!important}
  .tip,.warn{font-size:15.5px!important;padding:14px 16px 14px 20px!important}
  table{font-size:15px!important}
  table.wide:not(:has(th:nth-child(4))){min-width:0!important}
  /* 手机上表格改成一行一张小卡（JS 给每格标上表头 data-th；有合并单元格的表不改，仍可左右滑） */
  .tw:has(table.s3-stk){overflow:visible;background:#fff!important}
  table.s3-stk,table.s3-stk.wide,table.s3-stk.cmp{display:block;min-width:0!important;width:100%}
  table.s3-stk thead{display:none}
  table.s3-stk tbody,table.s3-stk tr{display:block}
  table.s3-stk tr{padding:12px 14px;border-bottom:1px solid var(--s3-line2)}
  table.s3-stk tr:last-child{border-bottom:0}
  table.s3-stk td{display:block;min-width:0!important;border:0!important;padding:3px 0!important;font-size:15px;white-space:normal!important}
  table.s3-stk td:first-child{font-weight:700;color:var(--s3-text)!important}
  table.s3-stk td:before{content:attr(data-th);color:var(--s3-faint);font-size:13.5px;font-weight:600;line-height:1.5}
  table.s3-stk-side td{position:relative;padding-left:5.6em!important}
  table.s3-stk-side td:before{position:absolute;left:0;top:5px;width:5.2em}
  table.s3-stk-top td:before{display:block;margin-top:6px}
  table.s3-stk-top td:first-child:before{margin-top:0}
  th,td{padding:11px 12px!important}
  th{font-size:13.5px!important}
  article ol>li{padding-left:46px!important}
  article ol>li:before,article ol.steps>li:before{width:32px!important;height:32px!important;line-height:29px!important;font-size:14px!important}
  article ol>li:after{left:15px;top:36px}
  .btn{width:100%;height:52px}
  .s3-buy{padding:14px;border-radius:22px;margin-bottom:14px}
  .s3-buy .yy-gcta{grid-template-columns:1fr;padding:18px!important;gap:14px}
  .s3-buy .s3-nm{font-size:18px}
  .s3-buy .s3-pr{font-size:40px}
  .s3-buy .yy-gcta-btn{width:100%;height:54px;min-width:0}
  .s3-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
  /* 三档（Pro / Claude）：手机上一档一行，名称在左、价格在右，免得两列空一格 */
  .s3-shelf.s3-n3{grid-template-columns:1fr;gap:8px}
  .s3-shelf.s3-n3 .s3-sku{flex-direction:row;align-items:center;min-height:0;padding:12px 16px}
  .s3-shelf.s3-n3 .s3-sku .n i{display:inline;margin-left:4px}
  .s3-sku{min-height:78px;padding:12px 14px;border-radius:16px}
  .s3-sku .p{font-size:19px}
  .s3-qa>summary{padding:16px 36px 16px 0}
  .s3-qa>summary h3{font-size:17px!important}
  .s3-qa-a p{font-size:15.5px}
  .s3-faqall{right:16px;top:22px;height:32px;line-height:30px;padding:0 12px;font-size:13.5px}
  footer{padding:4px 10px 40px!important}
  footer a{font-size:13.5px;padding:6px 12px}
}