/* ==========================================================================
   圆圈网 · 页面样式（依赖 tokens.css + ui.css）
   --------------------------------------------------------------------------
   按页面分节，页面之间选择器不重叠，可安全合并加载。
   共享组件（导航 / 按钮 / 课程卡 / 页脚 / CTA）在 ui.css，不在这里重复。
   ========================================================================== */

/* ===================== 首页  index.html ===================== */

  /* ==========================================================
     首页私有样式  ·  公共组件见 assets/ui.css
     ========================================================== */

  /* ---------- Hero ---------- */
  .hero{background:var(--ink);position:relative;overflow:hidden}
  /* 深色区氛围光：左蓝右绿，中间过渡成青。定义在 tokens.css 的 --glow-ambient */
  .hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--glow-ambient);
  }
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:
      linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
    background-size:58px 58px,58px 58px;
    mask-image:radial-gradient(ellipse 76% 66% at 50% 6%,#000 26%,transparent 78%);
  }
  .hero-inner{
    position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
    gap:var(--gap-4xl);padding:64px 0 0;
  }
  .hero-copy{max-width:660px}

  .eyebrow{
    display:inline-flex;align-items:center;gap:9px;color:var(--brand-blue-soft);font-size:var(--fs-sm);
    letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-mono);
    border:1px solid rgba(var(--rgb-blue),.32);background:rgba(var(--rgb-blue),.09);
    padding:5px 13px;border-radius:var(--r-pill);margin-bottom:var(--gap-xl);
  }
  .eyebrow .dots{display:inline-flex;gap:3px}
  .eyebrow .dots i{width:5px;height:5px;border-radius:50%}
  .eyebrow .dots i:nth-child(1){background:var(--brand-blue);box-shadow:0 0 8px var(--brand-blue)}
  .eyebrow .dots i:nth-child(2){background:var(--brand-lime);box-shadow:0 0 8px var(--brand-lime)}
  .eyebrow .dots i:nth-child(3){background:var(--brand-blue);opacity:.45;box-shadow:0 0 8px rgba(var(--rgb-blue),.6)}

  .hero h1{color:#fff;font-size:var(--fs-5xl);line-height:var(--lh-tight);
    letter-spacing:-.025em;font-weight:800}
  .hero h1 em{font-style:normal;color:var(--brand-blue);text-shadow:0 0 38px rgba(var(--rgb-blue),.45)}
  .hero h1 u{text-decoration:none;color:var(--brand-lime);text-shadow:0 0 34px rgba(var(--rgb-lime),.4)}
  .hero p{color:var(--on-ink-2);font-size:var(--fs-md);margin-top:var(--gap-lg);max-width:560px}

  .hero-cta{display:flex;align-items:center;gap:14px;margin-top:var(--gap-xl)}
  .hero-cta .btn{padding:12px 24px;border-radius:var(--r-md);font-size:var(--fs-md)}
  .hero-cta .btn-primary span{transition:transform .18s}
  .hero-cta .btn-primary:hover span{transform:translateX(3px)}

  /* 统计条 */
  /* 顶部工具条：原来这里是四个统计数字，现在换成实用工具入口。
     一行 6 格均分，竖线分隔，与下方深色版块的节奏一致。 */
  .hero-tools{
    position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    margin-top:46px;border-top:1px solid rgba(255,255,255,.09);
  }
  .htool{
    position:relative;display:flex;align-items:center;gap:11px;padding:17px 15px 19px;
    color:#fff;transition:background .2s ease;
  }
  .htool + .htool::before{
    content:"";position:absolute;left:0;top:17px;bottom:19px;width:1px;
    background:rgba(255,255,255,.08);
  }
  .htool:hover{background:rgba(255,255,255,.045)}
  .htool:first-child{padding-left:0}
  .htool-ico{
    width:37px;height:37px;flex:0 0 37px;border-radius:10px;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
    color:var(--brand-blue-soft);transition:var(--t-fast);
  }
  .htool-ico svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;
    stroke-linecap:round;stroke-linejoin:round}
  .htool:nth-child(even) .htool-ico{color:var(--brand-lime)}
  .htool:hover .htool-ico{
    border-color:rgba(var(--rgb-blue),.6);background:rgba(var(--rgb-blue),.18);color:#fff;
    transform:translateY(-1px);
  }
  .htool-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
  .htool-txt b{
    font-size:var(--fs-base);font-weight:600;line-height:1.35;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .htool-txt small{font-size:var(--fs-2xs);color:var(--on-ink-4);letter-spacing:.02em;white-space:nowrap}

  /* 三环装饰 */
  .rings{display:flex;align-items:center;flex:0 0 auto;padding-right:8px}
  .rings i{
    display:block;width:120px;height:120px;border-radius:50%;border:2.5px solid;
    margin-left:-16px;position:relative;
  }
  .rings i:first-child{margin-left:0}
  .rings i:nth-child(1){border-color:var(--brand-blue);color:var(--brand-blue);
    box-shadow:0 0 40px -8px rgba(var(--rgb-blue),.5), inset 0 0 32px -16px rgba(var(--rgb-blue),.85)}
  .rings i:nth-child(2){border-color:var(--brand-lime);color:var(--brand-lime);
    box-shadow:0 0 40px -8px rgba(var(--rgb-lime),.42), inset 0 0 32px -16px rgba(var(--rgb-lime),.85)}
  .rings i:nth-child(3){border-color:rgba(var(--rgb-red),.66);color:var(--brand-red);
    box-shadow:0 0 40px -8px rgba(var(--rgb-red),.4), inset 0 0 32px -16px rgba(var(--rgb-red),.8)}
  .rings i:nth-child(3)::after{width:4px;height:4px;margin:-2px 0 0 -2px;box-shadow:none;opacity:.75}
  .rings i::after{
    content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
    border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;
  }

  /* ---------- 02 精选工作流（白底列表 + 真实封面图） ---------- */
  /* 色板：按工作流 id 取模，视觉像随机色，但刷新/换机器都不变
     --tone-bg 封面底 / --tone-soft 点阵与描边 / --tone-dot 主色 / --tone-ink 深色文字 */
  .tn-blue  {--tone-bg:#EAF2FD;--tone-soft:#CBDFF8;--tone-dot:#3E86D8;--tone-ink:#1E4F86}
  .tn-green {--tone-bg:#E9F7F1;--tone-soft:#C9E7DA;--tone-dot:#3FA97C;--tone-ink:#1F6B4E}
  .tn-amber {--tone-bg:#FDF3E5;--tone-soft:#F1DDC2;--tone-dot:#D89A45;--tone-ink:#8A5320}
  .tn-violet{--tone-bg:#F1EDFB;--tone-soft:#DCD4F4;--tone-dot:#8A78D6;--tone-ink:#4B3A85}
  .tn-rose  {--tone-bg:#FCEEF1;--tone-soft:#F2D4DC;--tone-dot:#D06A85;--tone-ink:#8A2F45}
  .tn-cyan  {--tone-bg:#E8F6F8;--tone-soft:#C9E6E9;--tone-dot:#45AEB4;--tone-ink:#1C666B}
  .tn-sand  {--tone-bg:#F6F2E8;--tone-soft:#E6DDC8;--tone-dot:#A8975C;--tone-ink:#5E5334}
  .tn-slate {--tone-bg:#EEF1F6;--tone-soft:#D7DFEA;--tone-dot:#7E93AC;--tone-ink:#33445A}

  /* 列表容器：整块白底，与页面浅灰底分开 */
  .wf-board{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:var(--gap-xl);box-shadow:var(--sh-1);
  }
  .wf-scenes{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    padding-bottom:var(--gap-lg);margin-bottom:var(--gap-xl);border-bottom:1px solid var(--line);
  }
  .wf-chip{
    display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
    border:1px solid var(--line);background:var(--surface);
    font-size:var(--fs-sm);color:var(--text-2);transition:var(--t-fast);
  }
  .wf-chip i{width:8px;height:8px;border-radius:50%;background:var(--tone-dot);flex:0 0 8px}
  .wf-chip em{
    font-style:normal;font-family:var(--font-mono);font-size:var(--fs-2xs);
    color:var(--text-3);letter-spacing:.02em;
  }
  .wf-chip:hover{border-color:var(--tone-dot);color:var(--text);box-shadow:var(--sh-1);transform:translateY(-1px)}
  .wf-chip-all{color:var(--text-3);border-style:dashed}
  .wf-chip-all em{color:var(--text-3)}
  .wf-chip.is-empty{opacity:.62}
  .wf-chip.is-empty i{background:var(--line-2)}

  /* 卡片：白底 + 灰框，封面用 CSS 画「节点画布」
     卡面垫一层极浅的同心圆环（LOGO 母题的弱化版），白底上隐约透出，不抢内容 */
  .wfx{
    position:relative;overflow:hidden;isolation:isolate;
    display:flex;flex-direction:column;height:100%;padding:10px;
    background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  }
  .wfx:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--tone-dot)}
  /* 右下角双环：LOGO 母题的极淡化版（外环大 / 内环小，同心收在右下角）
     只是白底上一道隐约的弧线，静止不变色、hover 也不变色不放大，绝不抢卡片内容 */
  .wfx::before{
    content:"";position:absolute;right:-46px;bottom:-52px;width:170px;height:170px;
    border-radius:50%;z-index:0;pointer-events:none;
    background:radial-gradient(circle at 50% 50%,transparent 0 60.4%,rgba(var(--rgb-blue),.13) 60.8% 62.0%,transparent 62.4%);
  }
  .wfx::after{
    content:"";position:absolute;right:-1px;bottom:-7px;width:80px;height:80px;
    border-radius:50%;z-index:0;pointer-events:none;
    background:radial-gradient(circle at 50% 50%,transparent 0 57.0%,rgba(var(--rgb-blue),.10) 57.4% 59.6%,transparent 60.0%);
  }
  /* 封面与正文压在装饰之上 */
  .wfx-cover,.wfx-body{position:relative;z-index:1}
  .wfx-cover{
    position:relative;display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;
    border:1px solid var(--tone-soft);
    background:
      radial-gradient(120% 100% at 6% 0%, var(--tone-bg) 0%, #FFFFFF 78%);
  }
  /* 封面用工作流自己的图；没有图时才落到下面那层 CSS 节点画布 */
  .wfx-cover img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .wfx:hover .wfx-cover img{transform:scale(1.045)}
  .wfx-cover::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(var(--tone-soft) 1px,transparent 1px);
    background-size:13px 13px;opacity:.6;
  }
  .wfx-canvas{position:absolute;inset:0;display:block}
  .wfx-node{
    position:absolute;border-radius:5px;background-color:#FFFFFF;
    border:1px solid var(--tone-soft);
    box-shadow:0 3px 8px rgba(16,32,52,.07);
  }
  /* 节点里的两条「参数行」，让空白方块看起来像 ComfyUI 节点 */
  .wfx-node.n1,.wfx-node.n2,.wfx-node.n3{
    background-image:
      linear-gradient(var(--tone-soft),var(--tone-soft)),
      linear-gradient(var(--tone-soft),var(--tone-soft));
    background-size:56% 1.5px,36% 1.5px;
    background-position:13% 64%,13% 82%;
    background-repeat:no-repeat;
  }
  .wfx-node::before{  /* 左侧输入端口 */
    content:"";position:absolute;left:-3.5px;top:50%;width:5px;height:5px;margin-top:-2.5px;
    border-radius:50%;background:var(--tone-dot);box-shadow:0 0 0 1.5px #fff;
  }
  .wfx-node::after{   /* 顶部色条 */
    content:"";position:absolute;left:0;right:0;top:0;height:3.5px;
    border-radius:5px 5px 0 0;background:var(--tone-dot);
  }
  .wfx-node.n1{left:11%;top:23%;width:30%;height:24%}
  .wfx-node.n1::before{left:auto;right:-3.5px}
  .wfx-node.n2{right:8%;top:44%;width:29%;height:24%}
  .wfx-node.n3{left:14%;bottom:10%;width:24%;height:20%;opacity:.92}
  .wfx-link{position:absolute;background:var(--tone-dot);opacity:.42;border-radius:1px}
  .wfx-link.lh1{left:41%;top:35%;width:11%;height:1.5px}
  .wfx-link.lv1{left:52%;top:35%;width:1.5px;height:21%}
  .wfx-link.lh2{left:52%;top:56%;width:11%;height:1.5px}
  .wfx-link.lv2{left:26%;top:47%;width:1.5px;height:23%}
  .wfx-link.lv2::before,.wfx-link.lv2::after{
    content:"";position:absolute;left:-1.75px;width:5px;height:5px;border-radius:50%;
    background:var(--tone-dot);box-shadow:0 0 0 1.5px #fff;opacity:1;
  }
  .wfx-link.lv2::before{top:-2.5px}
  .wfx-link.lv2::after{bottom:-2.5px}
  .wfx-flag{
    position:absolute;left:9px;top:9px;z-index:2;
    font-size:var(--fs-2xs);font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;
    color:var(--tone-ink);background:rgba(255,255,255,.9);border:1px solid var(--tone-soft);
  }
  /* 只有 Pro 会员工作流出标，免费的一律不出标；配色同顶部导航的会员标签 */
  .wfx-pro{
    position:absolute;right:9px;top:9px;z-index:2;
    font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px;
    color:var(--on-lime);background:var(--brand-lime);border:1px solid rgba(51,80,10,.16);
    box-shadow:0 2px 10px -3px rgba(16,32,52,.45);
  }
  .wfx-body{padding:11px 4px 3px;display:flex;flex-direction:column;flex:1}
  .wfx-body h3{
    font-size:var(--fs-md);font-weight:700;line-height:var(--lh-snug);min-height:2.84em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .wfx-body h3 a:hover{color:var(--link)}
  .wfx-tags{display:flex;gap:var(--gap-xs);margin-top:var(--gap-sm);flex-wrap:wrap}
  .wfx-foot{
    display:flex;align-items:center;gap:var(--gap-md);margin-top:auto;padding-top:var(--gap-md);
    color:var(--text-3);font-size:var(--fs-xs);
  }
  /* 卡脚：等级徽标靠左，浏览次数整体推到右侧 */
  .wfx-foot .n{margin-left:auto;font-family:var(--font-mono)}

  /* ---------- 03 节点库（白底大卡：左侧分类 / 右侧跟随切换） ---------- */
  .nlib{
    display:grid;grid-template-columns:306px minmax(0,1fr);
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--sh-1);overflow:hidden;
  }
  .nlib-side{
    display:flex;flex-direction:column;gap:6px;padding:var(--gap-lg);
    background:linear-gradient(180deg,#FCFDFE,#F6F9FC);
    border-right:1px solid var(--line);
  }
  .nlib-tab{
    position:relative;display:flex;align-items:center;gap:11px;width:100%;text-align:left;
    padding:13px 13px 13px 15px;border:1px solid transparent;border-radius:var(--r-md);
    background:transparent;color:var(--text);cursor:pointer;font-family:inherit;
    transition:var(--t-fast);
  }
  .nlib-tab::before{
    content:"";position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 2px 2px 0;
    background:var(--brand-blue);transform:translateY(-50%);transition:height .22s ease;
  }
  .nlib-tab:hover{background:rgba(var(--rgb-blue),.055)}
  .nlib-tab.is-active{background:var(--surface);border-color:var(--line);box-shadow:var(--sh-1)}
  .nlib-tab.is-active::before{height:24px}
  .nlib-tab:focus-visible{outline:2px solid rgba(var(--rgb-blue),.6);outline-offset:2px}
  .nlib-idx{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3);flex:0 0 auto}
  .nlib-tab.is-active .nlib-idx{color:var(--link)}
  .nlib-name{display:flex;flex-direction:column;gap:2px;min-width:0}
  .nlib-name b{font-size:var(--fs-md);font-weight:700;line-height:1.3}
  .nlib-name small{
    font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }
  .nlib-count{
    margin-left:auto;flex:0 0 auto;font-family:var(--font-mono);font-size:var(--fs-sm);
    color:var(--text-3);
  }
  .nlib-tab.is-active .nlib-count{color:var(--text);font-weight:700}
  .nlib-side-foot{
    display:flex;align-items:center;justify-content:space-between;gap:var(--gap-sm);
    margin-top:auto;padding:11px 14px 3px;border-top:1px dashed var(--line);
    color:var(--text-3);font-size:var(--fs-xs);transition:color .18s ease;
  }
  .nlib-side-foot em{
    font-style:normal;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3);
  }
  .nlib-side-foot:hover{color:var(--link)}
  .nlib-side-foot:hover em{color:var(--link)}
  .nlib-main{min-width:0;padding:var(--gap-md) var(--gap-xl) var(--gap-md);display:flex;flex-direction:column}
  .nlib-panel{display:none}
  .nlib-panel.is-active{display:block;animation:nlibIn .22s ease both}
  @keyframes nlibIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  .nlib-head{
    display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md);
    margin-bottom:var(--gap-sm);padding:10px 14px;
    background:linear-gradient(180deg,var(--tint-blue-3),var(--surface-3));
    border:1px solid var(--line);border-radius:var(--r-sm);
  }
  .nlib-head h3{
    font-size:var(--fs-base);font-weight:700;letter-spacing:-.005em;
    display:flex;align-items:center;gap:9px;color:var(--text);
  }
  .nlib-head h3::before{
    content:"";flex:0 0 auto;width:3px;height:15px;border-radius:0 2px 2px 0;
    background:var(--brand-blue);
  }
  .nlib-head a{font-size:var(--fs-sm);color:var(--link);white-space:nowrap}
  .nlib-head a:hover{text-decoration:underline}
  .node-list{display:flex;flex-direction:column}
  .node-row{
    display:flex;align-items:center;gap:14px;padding:11px 4px;border-bottom:1px solid var(--line);
    transition:var(--t-fast);
  }
  .node-row:last-child{border-bottom:none}
  .node-row:hover{padding-left:9px;background:linear-gradient(90deg,rgba(var(--rgb-blue),.06),transparent 60%)}
  .node-row .ng{display:flex;align-items:baseline;gap:var(--gap-md);min-width:0}
  .node-row .nm{font-size:var(--fs-base);font-weight:600;color:var(--text);white-space:nowrap}
  .node-row .en{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .node-row .rt{margin-left:auto;display:flex;align-items:center;gap:var(--gap-md);flex:0 0 auto}
  .node-row .vv{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3)}
  .node-row .tp{
    font-size:var(--fs-2xs);padding:2px 7px;border-radius:var(--r-xs);max-width:170px;
    background:var(--surface-2);color:var(--text-2);border:1px solid var(--line);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* ---------- 04 博客（4 列 × 2 行，立式「书封」卡） ----------
     封面配色直接复用工作流的 --tone-* 变量（按位次轮转）：
     立式 3:4 比例像一本书的书封，渐变底 + 点阵 + 双圆环 + 左侧书脊高光，
     封面上只放标题，没有摘要 / 日期 / 浏览量。 */
  .blog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-lg)}
  .blog-card{
    display:block;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  }
  .blog-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--tone-dot)}
  .blog-card:hover .bc-title{color:var(--link)}
  .blog-cover{
    position:relative;display:flex;flex-direction:column;
    aspect-ratio:3/4;overflow:hidden;padding:20px 16px 14px 20px;
    background:
      linear-gradient(180deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.68) 100%),
      linear-gradient(155deg,var(--tone-soft) 0%,var(--tone-bg) 55%,#FFFFFF 135%);
  }
  /* 点阵底纹 */
  .blog-cover::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(var(--tone-dot) .8px,transparent .8px);
    background-size:12px 12px;opacity:.16;
  }
  /* 书脊：左侧一道细高光，立式封面的「书」感 */
  .blog-cover::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
    background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  }
  .bc-ring{position:absolute;border-radius:50%;border:1.5px solid var(--tone-dot);opacity:.32}
  .bc-ring.r1{width:104px;height:104px;right:-26px;top:-28px}
  .bc-ring.r2{width:58px;height:58px;right:34px;bottom:-20px;opacity:.2}
  /* 标题区：占据封面中段、垂直居中；内部标题块固定 3 行高，
     字数不同的卡片文字都从块顶起排 —— 视觉居中，同时所有标题顶部对齐 */
  .bc-body{
    position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
    justify-content:center;min-height:0;
  }
  .bc-title{
    width:100%;height:4.11em;text-align:center;
    font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1.37;
    color:var(--tone-ink);transition:color .18s ease;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    text-shadow:0 1px 0 rgba(255,255,255,.4);
  }
  /* 封面底栏：分类签 + 浏览数，像书封的出版社信息 */
  .bc-meta{
    position:relative;z-index:1;margin-top:auto;display:flex;align-items:center;gap:8px;
  }
  .bc-type{
    font-size:var(--fs-2xs);font-weight:600;letter-spacing:.02em;
    color:var(--tone-ink);padding:3px 9px;border-radius:var(--r-xs);
    background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;
  }
  .bc-views{
    margin-left:auto;flex:0 0 auto;font-family:var(--font-mono);
    font-size:var(--fs-xs);color:var(--tone-ink);opacity:.82;
  }
  /* 封面右上角：Pro 会员标。与顶部导航的会员标签同色（柠檬绿底 + 墨绿字） */
  .bc-pro{
    position:absolute;z-index:2;top:12px;right:12px;
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 8px;border-radius:var(--r-xs);
    background:var(--brand-lime);color:var(--on-lime);
    border:1px solid rgba(51,80,10,.16);
    font-size:10px;font-weight:800;letter-spacing:.04em;line-height:1.4;
    box-shadow:0 2px 10px -2px rgba(var(--rgb-lime),.7);
  }
  .bc-pro::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}

  /* ---------- 01 精品教程：单本「书」卡 ----------
     封面 / 书脊 / 页口全部用 CSS 画，不加载任何图片：
     底色取深墨渐变，环纹复用 logo 三环（蓝 + 绿），装订线用 1px 高光模拟。 */
  .fbook{
    display:grid;grid-template-columns:292px minmax(0,1fr);gap:var(--gap-4xl);
    align-items:center;padding:var(--gap-3xl) var(--gap-4xl);
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--sh-2);
  }
  .fbook-visual{display:block;justify-self:center;width:100%;max-width:266px}

  /* —— 书本主体 —— */
  .fbook .book{
    position:relative;width:100%;aspect-ratio:5/7;border-radius:3px 6px 6px 3px;
    background:linear-gradient(155deg,#1C2E43 0%,#122132 48%,#0A131F 100%);
    box-shadow:
      0 1px 1px rgba(10,19,32,.2),
      0 20px 36px -20px rgba(10,19,32,.6),
      inset -1px 0 0 rgba(255,255,255,.05);
    transform:perspective(1200px) rotateY(-7deg);
    transform-origin:left center;
    transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;
  }
  .fbook:hover .book{
    transform:perspective(1200px) rotateY(-2deg) translateY(-4px);
    box-shadow:0 2px 2px rgba(10,19,32,.18),0 28px 46px -20px rgba(10,19,32,.62);
  }
  /* 右侧页口：横向叠线，像一叠纸 */
  .fbook .book::after{
    content:"";position:absolute;top:3px;right:-5px;bottom:3px;width:5px;border-radius:0 4px 4px 0;
    background:repeating-linear-gradient(180deg,#F5F8FB 0 2px,#DCE4ED 2px 3px);
    box-shadow:inset -1px 0 0 rgba(14,22,33,.14);
  }
  /* 书脊：竖排标题，弱化成暗部 */
  .fbook .book-spine{
    position:absolute;left:0;top:0;bottom:0;width:27px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;
    font-size:9px;letter-spacing:.24em;color:rgba(233,239,247,.4);
    border-right:1px solid rgba(255,255,255,.07);border-radius:3px 0 0 3px;
    background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.04));
  }
  .fbook .book-face{
    position:relative;height:100%;overflow:hidden;border-radius:3px 6px 6px 3px;
    padding:24px 22px 22px 45px;display:flex;flex-direction:column;
  }
  .fbook .book-imprint{
    font-family:var(--font-mono);font-size:9px;letter-spacing:.26em;
    color:rgba(233,239,247,.46);
  }
  .fbook .book-mid{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start}
  .fbook .book-title{
    font-size:21px;line-height:1.36;font-weight:800;letter-spacing:-.01em;
    color:#F3F8FD;max-width:8.6em;
  }
  /* 英文品牌词单独一行（小字、拉字距），中文书名保持主标题字号，避免拉丁词被拆开 */
  .fbook .book-title .bt-latin{
    display:block;font-family:var(--font-mono);font-size:.6em;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;line-height:1.5;
    color:rgba(233,239,247,.7);margin-bottom:.55em;max-width:14em;
  }
  .fbook .book-title .bt-cn{display:block}
  .fbook .book-rule{display:block;width:32px;height:2px;margin-top:15px;border-radius:2px;background:var(--brand-lime)}
  .fbook .book-sub{
    margin-top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
    color:rgba(233,239,247,.6);
  }
  /* 三环：logo 母题，右下角出血 */
  .fbook .book-marks{position:absolute;right:-30px;bottom:-24px;width:148px;height:148px;opacity:.55;pointer-events:none}
  .fbook .book-marks i{position:absolute;border-radius:50%;border:1px solid rgba(var(--rgb-blue),.6)}
  .fbook .book-marks i:nth-child(1){inset:0}
  .fbook .book-marks i:nth-child(2){inset:23%;border-color:rgba(var(--rgb-blue),.4)}
  .fbook .book-marks i:nth-child(3){inset:46%;border-color:rgba(var(--rgb-lime),.7)}
  .fbook .book-foot{
    margin-top:var(--gap-xl);font-family:var(--font-mono);font-size:9.5px;
    letter-spacing:.14em;color:rgba(233,239,247,.38);
  }

  /* —— 右侧：标题 / 简介 / 目录 / 数据 / 行动 —— */
  .fbook-info{min-width:0}
  .fbook-eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text-3)}
  .fbook-badge{
    font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;color:var(--on-lime);
    background:var(--brand-lime);padding:2.5px 8px;border-radius:var(--r-xs);
  }
  .fbook-title{
    font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;
    line-height:var(--lh-tight);margin-top:11px;
  }
  .fbook-title a:hover{color:var(--link)}
  .fbook-desc{
    color:var(--text-2);font-size:var(--fs-base);line-height:var(--lh-body);
    margin-top:10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .fbook-toc{
    display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap-3xl);
    margin-top:var(--gap-xl);border-top:1px solid var(--line);
  }
  .fbook-toc li{
    display:flex;align-items:baseline;gap:12px;padding:9px 0;
    border-bottom:1px solid var(--line);font-size:var(--fs-base);
  }
  .fbook-toc .n{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3)}
  .fbook-toc .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fbook-meta{
    display:flex;align-items:center;flex-wrap:wrap;gap:var(--gap-md);
    margin-top:var(--gap-lg);color:var(--text-3);font-size:var(--fs-sm);
  }
  .fbook-meta b{color:var(--text);font-family:var(--font-mono);font-weight:600}
  .fbook-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
  .fbook-cta{display:flex;align-items:center;gap:var(--gap-xl);margin-top:var(--gap-xl);flex-wrap:wrap}
  .fbook-link{color:var(--link);font-size:var(--fs-base);font-weight:600}
  .fbook-link:hover{color:var(--link-hover)}

  @media (max-width:1000px){
    .fbook{grid-template-columns:206px minmax(0,1fr);gap:var(--gap-2xl);padding:var(--gap-2xl)}
    .fbook-visual{max-width:194px}
    .fbook .book{transform:none}
    .fbook .book-title{font-size:17.5px}
    .fbook-toc{grid-template-columns:1fr}
    .fbook-toc li:nth-child(n+4){display:none}
  }
  @media (max-width:760px){
    .fbook{grid-template-columns:1fr;gap:var(--gap-xl)}
    .fbook-visual{justify-self:center;max-width:186px}
  }
  @media (max-width:680px){
    .fbook-visual{max-width:166px}
    .fbook .book-title{font-size:16px}
    .fbook .book-face{padding:18px 16px 16px 38px}
    .fbook .book-spine{width:22px}
  }

  /* ---------- 教程中心：书封列表卡 ----------
     封面语言沿用首页精品教程的「书」：书脊 + 页口 + 右下三环 + 亮线分隔，
     配色按位次轮转 6 套深色书衣（墨蓝 / 深棕 / 墨绿 / 紫檀 / 酒红 / 深青），
     不加载任何图片，纯 CSS。 */
  .cbook{display:flex;flex-direction:column;min-width:0}
  .cbook-visual{
    display:block;width:100%;max-width:242px;margin:0 auto var(--gap-lg);
    perspective:1100px;
  }
  /* 初始正面平放，悬停时才立起 3D 视角 */
  .cbook .book{
    position:relative;display:block;aspect-ratio:5/7;border-radius:3px 6px 6px 3px;
    background:linear-gradient(155deg,var(--bk-1) 0%,var(--bk-2) 50%,var(--bk-3) 100%);
    box-shadow:
      0 1px 1px rgba(10,19,32,.18),
      0 10px 22px -16px rgba(10,19,32,.45),
      inset -1px 0 0 rgba(255,255,255,.05);
    transform:perspective(1200px) rotateY(0deg);
    transform-origin:left center;
    transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;
  }
  .cbook:hover .book{
    transform:perspective(1200px) rotateY(-7deg) translateY(-5px);
    box-shadow:0 2px 2px rgba(10,19,32,.16),0 26px 44px -20px rgba(10,19,32,.62);
  }
  /* 右侧页口：一叠纸 */
  .cbook .book::after{
    content:"";position:absolute;top:3px;right:-5px;bottom:3px;width:5px;border-radius:0 4px 4px 0;
    background:repeating-linear-gradient(180deg,#F5F8FB 0 2px,#DCE4ED 2px 3px);
    box-shadow:inset -1px 0 0 rgba(14,22,33,.14);
  }
  /* 书脊：竖排 CIRCLER · 年份 */
  .cbook .cb-spine{
    position:absolute;left:0;top:0;bottom:0;width:24px;z-index:2;
    display:flex;align-items:center;justify-content:center;
    writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;overflow:hidden;
    font-size:8.5px;letter-spacing:.26em;color:rgba(233,239,247,.42);
    border-right:1px solid rgba(255,255,255,.07);border-radius:3px 0 0 3px;
    background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.05));
  }
  .cbook .cb-face{
    position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:3px 6px 6px 3px;
    display:flex;flex-direction:column;padding:18px 16px 16px 38px;
  }
  .cbook .cb-imprint{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:rgba(233,239,247,.55)}
  /* 状态角标（筹备中才出现，与首页「推荐」徽标同色系） */
  .cbook .cb-flag{
    position:absolute;right:14px;top:14px;font-size:12.5px;font-weight:700;letter-spacing:.03em;
    color:var(--on-lime);background:var(--brand-lime);padding:3px 9px;border-radius:var(--r-xs);
  }
  /* 标题块放在 imprint 与底部版权之间的剩余空间里垂直居中（比原来靠上） */
  .cbook .cb-mid{margin-top:auto;margin-bottom:auto;position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
  .cbook .cb-title{
    font-size:20px;line-height:1.36;font-weight:800;letter-spacing:-.01em;color:#F4F8FD;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  }
  .cbook .cb-rule{display:block;width:28px;height:2px;margin-top:12px;border-radius:2px;background:var(--bk-accent,var(--brand-lime))}
  .cbook .cb-sub{margin-top:9px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:rgba(233,239,247,.72)}
  /* 右下角装饰：三圈同色浅线（不抢书名），由外到内逐级变淡 */
  .cbook .cb-marks{position:absolute;right:-26px;bottom:-20px;width:126px;height:126px;pointer-events:none}
  .cbook .cb-marks i{position:absolute;border-radius:50%;border:1px solid rgba(233,239,247,.16)}
  .cbook .cb-marks i:nth-child(1){inset:0}
  .cbook .cb-marks i:nth-child(2){inset:23%;border-color:rgba(233,239,247,.22)}
  .cbook .cb-marks i:nth-child(3){inset:46%;border-color:rgba(233,239,247,.3)}
  .cbook .cb-foot{margin-top:14px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;color:rgba(233,239,247,.34)}

  /* 书衣配色：深底 + 同族亮线 + 同族环，保证与浅色页面有足够反差 */
  .cv-1{--bk-1:#1C2E43;--bk-2:#122132;--bk-3:#0A131F;--bk-ring:rgba(95,189,238,.5);--bk-accent:var(--brand-lime)}
  .cv-2{--bk-1:#3A2117;--bk-2:#28150E;--bk-3:#170B06;--bk-ring:rgba(226,150,86,.42);--bk-accent:#E8B07A}
  .cv-3{--bk-1:#1B3026;--bk-2:#112019;--bk-3:#09130E;--bk-ring:rgba(163,199,110,.42);--bk-accent:#BBD884}
  .cv-4{--bk-1:#2F2340;--bk-2:#211730;--bk-3:#130D1D;--bk-ring:rgba(178,146,236,.42);--bk-accent:#C3A8F0}
  .cv-5{--bk-1:#3D1F29;--bk-2:#2A131B;--bk-3:#180A0F;--bk-ring:rgba(236,120,136,.4);--bk-accent:#F0929F}
  .cv-6{--bk-1:#123037;--bk-2:#0A2126;--bk-3:#041316;--bk-ring:rgba(120,210,220,.4);--bk-accent:#8FD8DE}

  .cbook-body{padding:0 2px;display:flex;flex-direction:column;flex:1}
  .cbook-body p{
    color:var(--text-2);font-size:var(--fs-sm);line-height:var(--lh-body);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .cbook-body .course-meta{margin-top:9px}
  .cbook-go{
    margin-top:auto;padding-top:11px;color:var(--link);font-size:var(--fs-sm);font-weight:600;
    display:inline-flex;align-items:center;gap:5px;
  }
  .cbook-go span{transition:transform .2s ease}
  .cbook:hover .cbook-go span{transform:translateX(3px)}

  @media (max-width:1100px){
    .cbook-visual{max-width:226px}
    .cbook .cb-title{font-size:18px}
  }
  @media (max-width:680px){
    .cbook-visual{max-width:100%}
    .cbook .cb-title{font-size:16px}
    .cbook .cb-face{padding:16px 14px 14px 34px}
    .cbook .cb-spine{width:20px;font-size:8px}
  }

  /* ---------- 响应式 ---------- */
  @media (max-width:1100px){
    .rings{display:none}
    .hero-tools{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:38px}
    .htool:nth-child(3n+1)::before{display:none}
    .htool:nth-child(n+4){border-top:1px solid rgba(255,255,255,.08)}
    .wf-board{padding:var(--gap-lg)}
    .wf-list{grid-template-columns:repeat(2,minmax(0,1fr))}
    .nlib{grid-template-columns:256px minmax(0,1fr)}
    /* 立式书封 2 列变宽，标题相应放大 */
    .bc-title{font-size:25px}
  }
  @media (max-width:900px){
    .nlib{grid-template-columns:1fr}
    .nlib-side{
      flex-direction:row;align-items:center;gap:8px;padding:10px;overflow-x:auto;
      border-right:none;border-bottom:1px solid var(--line);
      background:var(--surface-2);
    }
    .nlib-tab{flex:0 0 auto;width:auto;padding:8px 13px;border-color:var(--line);background:var(--surface)}
    .nlib-tab::before{display:none}
    .nlib-tab.is-active{border-color:var(--brand-blue);box-shadow:none}
    .nlib-idx,.nlib-name small,.nlib-side-foot{display:none}
    .nlib-count{margin-left:4px}
    .nlib-main{padding:var(--gap-md) var(--gap-lg) var(--gap-sm)}
  }
  @media (max-width:680px){
    .hero-inner{padding:38px 0 0}
    .hero p{font-size:var(--fs-base)}
    .hero-cta{flex-wrap:wrap;gap:var(--gap-md)}
    .hero-tools{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px}
    .htool{padding:13px 12px 15px}
    .htool:nth-child(2n+1)::before{display:none}
    .htool:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
    .htool-ico{width:30px;height:30px;flex:0 0 30px}
    .htool-txt b{font-size:var(--fs-sm)}
    .wf-board{padding:14px;border-radius:var(--r-md)}
    .wf-list{grid-template-columns:1fr}
    .wf-scenes{gap:6px;padding-bottom:var(--gap-md);margin-bottom:var(--gap-lg)}
    .wf-chip{padding:5px 9px;font-size:var(--fs-xs)}
    .nlib{border-radius:var(--r-md)}
    .nlib-side{gap:6px;padding:8px}
    .nlib-tab{flex:1 1 0;min-width:0;justify-content:center;gap:6px;padding:8px 6px}
    .nlib-name b{font-size:var(--fs-sm);white-space:nowrap}
    .nlib-count{font-size:var(--fs-2xs);margin-left:0}
    /* 立式书封：小屏改 2 列，仍是竖版封面 */
    .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .blog-cover{padding:14px 11px 11px 15px}
    .bc-title{font-size:15px}
    .bc-type{font-size:10.5px;padding:2px 7px}
    .bc-views{font-size:10.5px}
    .bc-ring.r1{width:64px;height:64px;right:-20px;top:-20px}
    .bc-ring.r2{width:38px;height:38px;right:18px;bottom:-14px}
    .bc-pro{top:8px;right:8px;padding:2px 6px;font-size:9px;gap:3px}
    .bc-pro::before{width:4px;height:4px}
  }

/* ===================== 教程列表  course.html ===================== */

  /* ==========================================================
     教程列表页私有样式
     ========================================================== */

  /* ---------- 页头 ---------- */
  .page-hero{background:var(--ink);position:relative;overflow:hidden;padding:28px 0 40px}
  .page-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--glow-ambient);
  }
  .page-hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
    background-image:
      linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
    background-size:54px 54px;
    mask-image:radial-gradient(ellipse 70% 60% at 30% 0%,#000 20%,transparent 76%);
  }
  .page-hero .wrap{position:relative;z-index:1}
  .ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap-4xl);margin-top:var(--gap-2xl)}
  .ph-copy h1{color:#fff;font-size:var(--fs-4xl);font-weight:800;letter-spacing:-.025em;line-height:var(--lh-tight)}
  .ph-copy p{color:var(--on-ink-2);font-size:var(--fs-md);margin-top:var(--gap-md);max-width:560px}
  .ph-stats{display:flex;align-items:center;gap:var(--gap-lg);margin-top:var(--gap-xl)}
  .ph-stats span{display:flex;align-items:baseline;gap:6px;color:var(--on-ink-4);font-size:var(--fs-sm)}
  .ph-stats b{color:#fff;font-size:var(--fs-lg);font-weight:700;font-family:var(--font-mono)}
  .ph-stats i{width:1px;height:14px;background:rgba(255,255,255,.14)}
  .ph-art{display:flex;align-items:center;flex:0 0 auto;padding-bottom:4px}
  .ph-art i{
    display:block;width:78px;height:78px;border-radius:50%;border:2px solid;margin-left:-12px;position:relative;
  }
  .ph-art i:first-child{margin-left:0}
  .ph-art i:nth-child(1){border-color:var(--brand-blue);
    box-shadow:0 0 30px -6px rgba(var(--rgb-blue),.5), inset 0 0 24px -14px rgba(var(--rgb-blue),.9)}
  .ph-art i:nth-child(2){border-color:var(--brand-lime);
    box-shadow:0 0 30px -6px rgba(var(--rgb-lime),.42), inset 0 0 24px -14px rgba(var(--rgb-lime),.9)}
  .ph-art i:nth-child(3){border-color:var(--brand-red);
    box-shadow:0 0 30px -6px rgba(236,26,64,.4), inset 0 0 24px -14px rgba(236,26,64,.85)}

  /* ---------- 筛选条 ---------- */
  .filterbar{
    position:sticky;top:calc(var(--nav-h) + 3px);z-index:70;
    background:rgba(255,255,255,.94);
    backdrop-filter:saturate(150%) blur(12px);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
    border-bottom:1px solid var(--line);
  }
  .fb-inner{display:flex;align-items:center;gap:var(--gap-lg);height:62px}
  .tabs{display:flex;gap:4px}
  .tabs a,.tabs > span{
    display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-sm);
    font-size:var(--fs-base);color:var(--text-2);transition:var(--t-fast);white-space:nowrap;
  }
  .tabs a i,.tabs > span i{
    font-style:normal;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3);
    background:var(--surface-2);border-radius:4px;padding:1px 5px;min-width:18px;text-align:center;
  }
  .tabs a:hover{background:var(--surface-2);color:var(--text)}
  .tabs a.on,.tabs > span.on{background:var(--ink);color:#fff;font-weight:600}
  .tabs a.on i,.tabs > span.on i{background:rgba(255,255,255,.16);color:#fff}
  .tabs > span{cursor:default}
  .fb-right{margin-left:auto;display:flex;align-items:center;gap:var(--gap-md)}
  .search{
    display:flex;align-items:center;gap:var(--gap-sm);height:36px;padding:0 12px;
    border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
    color:var(--text-3);transition:var(--t-fast);
  }
  .search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;flex:0 0 auto}
  .search input{
    border:none;outline:none;background:none;width:172px;color:var(--text);
    font-family:inherit;font-size:var(--fs-base);
  }
  .search input::placeholder{color:var(--text-3)}
  .search:focus-within{border-color:rgba(var(--rgb-blue),.65);box-shadow:0 0 0 3px rgba(var(--rgb-blue),.12)}
  .sort{
    display:flex;align-items:center;gap:var(--gap-xs);height:36px;padding:0 12px;
    border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
    font-size:var(--fs-base);color:var(--text-2);transition:var(--t-fast);
  }
  .sort:hover{border-color:rgba(var(--rgb-blue),.55);color:var(--text)}
  .sort svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
  /* 排序两档：可点切换，选中档反白强调 */
  .sortgrp{display:flex;align-items:center;gap:6px}
  .sortgrp .sort{text-decoration:none;white-space:nowrap}
  .sortgrp .sort.is-on{
    color:#FFF;font-weight:600;background:var(--brand-blue);border-color:var(--brand-blue);
    box-shadow:0 2px 8px -4px rgba(var(--rgb-blue),.7);
  }
  .sortgrp .sort.is-on:hover{color:#FFF;background:var(--brand-blue-dp);border-color:var(--brand-blue-dp)}

  /* ---------- 继续学习 ---------- */
  .resume{
    display:flex;align-items:center;gap:var(--gap-lg);padding:14px 18px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);
    margin-bottom:var(--gap-3xl);transition:var(--t-fast);position:relative;overflow:hidden;
  }
  .resume::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:linear-gradient(180deg,var(--brand-blue),var(--brand-lime));
  }
  .resume:hover{border-color:rgba(var(--rgb-blue),.5);box-shadow:var(--sh-2)}
  .resume-cover{width:88px;height:64px;border-radius:var(--r-sm);overflow:hidden;flex:0 0 auto}
  .resume-cover img{width:100%;height:100%;object-fit:cover}
  .resume-txt{min-width:0;flex:1}
  .resume-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .resume-k{
    display:inline-block;font-size:var(--fs-2xs);color:var(--link);background:var(--tint-blue);
    padding:1px 6px;border-radius:4px;font-family:var(--font-mono);letter-spacing:.08em;
  }
  .resume-txt b{display:block;font-size:var(--fs-md);font-weight:700;margin-top:5px}
  .resume-txt .ln{
    display:block;color:var(--text-2);font-size:var(--fs-sm);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px;
  }
  .resume-prog{margin-left:auto;width:190px;flex:0 0 auto}
  .bar{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden}
  .bar i{display:block;height:100%;border-radius:3px;
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-lime))}
  .resume-prog .pv{display:flex;justify-content:space-between;margin-top:6px;
    font-size:var(--fs-2xs);color:var(--text-3);font-family:var(--font-mono)}
  .resume .btn{flex:0 0 auto}

  /* ---------- 课程卡补充：进度 ---------- */
  .course-prog{display:flex;align-items:center;gap:var(--gap-md);margin-top:auto;padding-top:var(--gap-lg)}
  .course-prog .bar{flex:1;height:6px;background:var(--line)}
  .course-prog span{font-size:var(--fs-xs);color:var(--text-2);font-family:var(--font-mono);flex:0 0 auto}


  /* ---------- 学习路径 ---------- */
  .path{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-lg)}
  .step{
    display:flex;flex-direction:column;padding:22px 22px 20px;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-md);transition:var(--t-fast);position:relative;overflow:hidden;
  }
  .step:hover{border-color:rgba(var(--rgb-blue),.5);box-shadow:var(--sh-2);transform:translateY(-2px)}
  .step::after{content:"";position:absolute;top:0;left:0;right:0;height:2px}
  .step:nth-child(1)::after{background:var(--brand-blue-lt)}
  .step:nth-child(2)::after{background:var(--brand-blue)}
  .step:nth-child(3)::after{background:var(--brand-lime)}
  .step-n{
    font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;
    color:var(--text-3);
  }
  .step b{display:block;font-size:calc(var(--fs-md) + 3px);font-weight:800;letter-spacing:-.01em;margin-top:10px;line-height:var(--lh-snug)}
  .step p{color:var(--text-2);font-size:var(--fs-sm);margin-top:6px;line-height:var(--lh-body)}
  .step .go{display:inline-flex;align-items:center;gap:5px;color:var(--link);
    font-size:var(--fs-sm);font-weight:600;margin-top:auto;padding-top:14px}

  /* ---------- 响应式 ---------- */
  @media (max-width:900px){
    .ph-art{display:none}
    .path{grid-template-columns:1fr}
    .resume-prog{display:none}
  }
  @media (max-width:680px){
    .page-hero{padding:20px 0 28px}
    .ph-copy p{font-size:var(--fs-base)}
    .ph-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-sm) var(--gap-md)}
    .ph-stats span{font-size:var(--fs-2xs);gap:4px}
    .ph-stats b{font-size:var(--fs-md)}
    .ph-stats i{display:none}
    .sec-head .sec-more{display:none}
    .fb-inner{height:auto;padding:10px 0;flex-wrap:wrap;gap:var(--gap-sm)}
    .tabs{width:100%;overflow-x:auto}
    .fb-right{width:100%}
    .search{flex:1}
    .search input{width:100%}
    .resume{padding:12px;gap:var(--gap-md)}
    .resume-cover{width:64px;height:48px}
    .resume-txt b{white-space:normal;line-height:1.35;font-size:var(--fs-base)}
    .resume-txt .ln{max-width:none}
    .resume .btn{padding:8px 12px;font-size:var(--fs-sm)}
  }

/* ===================== 课程详情  course_list.html ===================== */

  /* ==========================================================
     教程详情页私有样式
     ========================================================== */

  /* ---------- 页头 ---------- */
  .detail-hero{background:var(--ink);position:relative;overflow:hidden;padding:26px 0 44px}
  .detail-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--glow-ambient);
  }
  .detail-hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.38;
    background-image:
      linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
    background-size:54px 54px;
    mask-image:radial-gradient(ellipse 68% 60% at 26% 0%,#000 20%,transparent 78%);
  }
  .detail-hero .wrap{position:relative;z-index:1}
  .dh-row{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:var(--gap-4xl);margin-top:var(--gap-2xl);align-items:start}
  .dh-tags{display:flex;gap:var(--gap-xs);flex-wrap:wrap;margin-bottom:var(--gap-md)}
  .dh-tags .badge{backdrop-filter:none}
  .dh-copy h1{
    color:#fff;font-size:var(--fs-4xl);font-weight:800;letter-spacing:-.025em;
    line-height:1.22;
  }
  .dh-copy > p{color:var(--on-ink-2);font-size:var(--fs-md);margin-top:var(--gap-md);max-width:600px}
  .dh-meta{display:flex;align-items:center;gap:var(--gap-md);flex-wrap:wrap;
    margin-top:var(--gap-xl);color:var(--on-ink-4);font-size:var(--fs-sm)}
  .dh-meta b{color:var(--on-ink);font-family:var(--font-mono);font-weight:600}
  .dh-meta .sep{width:1px;height:12px;background:rgba(255,255,255,.14)}
  .dh-actions{display:flex;align-items:center;gap:var(--gap-md);margin-top:var(--gap-xl)}
  .dh-actions .btn{padding:12px 24px;border-radius:var(--r-md);font-size:var(--fs-md)}

  /* 封面 */
  .dh-cover{
    position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;
    background:var(--cover);box-shadow:0 24px 60px -28px rgba(0,0,0,.85);
    border:1px solid rgba(255,255,255,.10);
  }
  .dh-cover img{width:100%;height:100%;object-fit:cover}
  .dh-cover::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,19,32,.10) 40%,rgba(10,19,32,.72) 100%);
  }
  .dh-cover-foot{
    position:absolute;left:14px;right:14px;bottom:12px;z-index:2;display:flex;
    align-items:center;justify-content:space-between;color:#fff;font-size:var(--fs-xs);
  }
  .dh-cover-foot .k{font-family:var(--font-mono);color:rgba(255,255,255,.8)}

  /* ---------- 主体两栏 ---------- */
  .detail-body{padding:var(--gap-3xl) 0 var(--gap-5xl)}
  .db-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--gap-3xl);align-items:start}
  .db-main{min-width:0}

  /* 学习进度条 */
  .learn-bar{
    display:flex;align-items:center;gap:var(--gap-lg);padding:16px 18px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:var(--gap-2xl);
    position:relative;overflow:hidden;
  }
  .learn-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:linear-gradient(180deg,var(--brand-blue),var(--brand-lime))}
  .lb-txt b{display:block;font-size:var(--fs-md);font-weight:700}
  .lb-txt span{display:block;color:var(--text-2);font-size:var(--fs-sm);margin-top:2px}
  .lb-prog{margin-left:auto;width:170px;flex:0 0 auto}
  .bar{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden}
  .bar i{display:block;height:100%;border-radius:3px;
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-lime))}
  .lb-prog .pv{display:flex;justify-content:space-between;margin-top:6px;
    font-size:var(--fs-2xs);color:var(--text-3);font-family:var(--font-mono)}

  /* ---------- 章节目录 ---------- */
  .block-head{display:flex;align-items:baseline;gap:var(--gap-md);margin-bottom:var(--gap-lg)}
  .block-head h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.015em}
  .block-head span{color:var(--text-3);font-size:var(--fs-sm);font-family:var(--font-mono)}

  .chapters{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
  .ch-group + .ch-group{border-top:1px solid var(--line)}
  .ch-group-head{
    display:flex;align-items:center;gap:var(--gap-md);padding:14px 18px;
    background:linear-gradient(180deg,var(--surface-3),var(--surface-3));border-bottom:1px solid var(--line);
  }
  .ch-group-head h3{font-size:var(--fs-md);font-weight:700}
  .ch-group-head span{margin-left:auto;color:var(--text-3);font-size:var(--fs-xs);font-family:var(--font-mono)}
  .ch{
    display:flex;align-items:center;gap:var(--gap-md);padding:12px 18px;
    border-bottom:1px solid var(--line);transition:var(--t-fast);position:relative;
  }
  .ch:last-child{border-bottom:none}
  .ch:hover{background:rgba(var(--rgb-blue),.045)}
  .ch-idx{
    width:26px;height:26px;flex:0 0 26px;border-radius:var(--r-xs);display:grid;place-items:center;
    font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3);
    background:var(--surface-2);border:1px solid var(--line);
  }
  /* 标题只占内容宽，让 Pro 标紧跟标题；浏览量靠 margin-left:auto 顶到最右 */
  .ch-t{flex:0 1 auto;min-width:0;font-size:var(--fs-base);color:var(--text);line-height:var(--lh-snug)}
  .ch-meta{color:var(--text-3);font-size:var(--fs-xs);font-family:var(--font-mono);flex:0 0 auto;margin-left:auto}
  .ch-tag{
    flex:0 0 auto;font-size:var(--fs-2xs);padding:2px 7px;border-radius:4px;
    border:1px solid var(--line);color:var(--text-3);background:var(--surface);
  }
  /* 只有 Pro 会员章有标；免费章不再出标。配色同顶部导航的会员标签 */
  .ch-tag.vip{background:var(--brand-lime);color:var(--on-lime);border-color:transparent;
    font-weight:700;letter-spacing:.02em}

  .ch.done .ch-idx{background:var(--tint-lime);color:var(--ok);border-color:var(--tint-lime-2);font-size:var(--fs-sm)}
  .ch.done .ch-t{color:var(--text-2)}

  .ch.locked .ch-t{color:var(--text-3)}
  .ch.locked .ch-idx{background:var(--surface-2);color:var(--text-3)}
  .ch.locked .ch-meta{opacity:.6}
  .ch.locked:hover{background:rgba(var(--rgb-blue),.05)}

  /* 付费墙 */
  .paywall{
    margin:0;padding:26px 22px;text-align:center;
    background:linear-gradient(180deg,#FFFFFF 0%,var(--tint-blue-3) 100%);
    border-bottom:1px solid var(--line);position:relative;
  }
  .paywall::before{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--rgb-blue),.55),transparent);
  }
  .pw-ico{
    width:42px;height:42px;border-radius:var(--r-sm);margin:0 auto 12px;display:grid;place-items:center;
    background:var(--tint-blue);border:1px solid var(--tint-blue-2);
  }
  .pw-ico svg{width:20px;height:20px;stroke:var(--link);fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .paywall h3{font-size:var(--fs-lg);font-weight:700;color:var(--text)}
  .paywall p{color:var(--text-2);font-size:var(--fs-sm);margin-top:var(--gap-xs);max-width:400px;margin-left:auto;margin-right:auto}
  .pw-actions{display:flex;align-items:center;justify-content:center;gap:var(--gap-md);margin-top:var(--gap-lg)}
  .pw-price{font-family:var(--font-mono);color:var(--text);font-size:var(--fs-md)}
  .pw-price b{font-size:var(--fs-2xl);font-weight:700}
  .pw-note{margin-top:var(--gap-md);color:var(--text-3);font-size:var(--fs-2xs)}

  .ch-more{
    display:flex;align-items:center;justify-content:center;gap:var(--gap-sm);
    padding:14px;background:var(--surface);border-top:1px solid var(--line);
    color:var(--text-2);font-size:var(--fs-sm);font-weight:600;transition:var(--t-fast);
  }
  .ch-more:hover{color:var(--link);background:var(--surface-3)}

  /* ---------- 课程介绍 ---------- */
  .about{margin-top:var(--gap-3xl)}
  .about-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 24px 8px;
  }
  .about-card p{color:var(--text-2);font-size:var(--fs-base);line-height:var(--lh-loose);margin-bottom:16px}
  .about-card p b{color:var(--text);font-weight:600}
  .about-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-xl);margin:6px 0 22px}
  .about-col{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;background:var(--surface-3)}
  .about-col h4{font-size:var(--fs-base);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:7px}
  .about-col h4::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand-blue)}
  .about-col:nth-child(2) h4::before{background:var(--brand-lime)}
  .about-col ul{list-style:none;display:flex;flex-direction:column;gap:7px}
  .about-col li{position:relative;padding-left:16px;color:var(--text-2);font-size:var(--fs-sm);line-height:1.55}
  .about-col li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;
    background:var(--line-2)}

  /* ---------- 侧栏 ---------- */
  .db-side{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:var(--gap-lg)}
  .sub-card{
    position:relative;overflow:hidden;border-radius:var(--r-md);padding:22px;
    background:linear-gradient(165deg,var(--ink-2),var(--ink));
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
  }
  .sub-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--spectrum)}
  .sub-card::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(260px 180px at 104% -6%, rgba(var(--rgb-blue),.22), transparent 68%),
      radial-gradient(220px 160px at -6% 108%, rgba(var(--rgb-lime),.12), transparent 68%);
  }
  .sub-card > *{position:relative;z-index:1}
  .sub-k{
    display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
    font-size:var(--fs-2xs);letter-spacing:.14em;color:var(--brand-lime);
  }
  .sub-k::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-lime);
    box-shadow:0 0 8px var(--brand-lime)}
  .sub-card h3{color:#fff;font-size:var(--fs-lg);font-weight:700;margin-top:10px;line-height:var(--lh-snug)}
  .sub-price{display:flex;align-items:baseline;gap:5px;margin-top:14px;color:#fff;font-family:var(--font-mono)}
  .sub-price b{font-size:36px;font-weight:700;letter-spacing:-.03em}
  .sub-price span{color:var(--on-ink-4);font-size:var(--fs-base)}
  .sub-card ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin:16px 0 18px}
  .sub-card li{position:relative;padding-left:18px;color:var(--on-ink-2);font-size:var(--fs-sm)}
  .sub-card li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand-lime);
    font-weight:800;font-size:var(--fs-xs)}
  .sub-card .btn{width:100%}
  .sub-note{display:block;text-align:center;color:var(--on-ink-4);font-size:var(--fs-2xs);margin-top:10px}

  .info-card,.author-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;
  }
  .info-card h4,.author-card h4{
    font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;color:var(--text-3);
    font-family:var(--font-mono);margin-bottom:var(--gap-md);
  }
  .info-list{display:flex;flex-direction:column}
  .info-row{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md);
    padding:8px 0;font-size:var(--fs-sm);color:var(--text-2);border-bottom:1px dashed var(--line)}
  .info-row:last-child{border-bottom:none}
  .info-row b{color:var(--text);font-weight:600;font-family:var(--font-mono);font-size:var(--fs-sm)}
  .author-card{display:flex;align-items:center;gap:var(--gap-md)}
  .author-card img{width:42px;height:42px;border-radius:var(--r-sm);object-fit:contain;
    background:var(--surface-2);padding:4px}
  .author-card b{display:block;font-size:var(--fs-base);font-weight:700}
  .author-card span{display:block;color:var(--text-3);font-size:var(--fs-2xs);margin-top:2px}

  /* ---------- 配套工作流 ---------- */
  .related{padding:var(--gap-4xl) 0;border-top:1px solid var(--line)}

  /* ---------- 响应式 ---------- */
  @media (max-width:1020px){
    .dh-row{grid-template-columns:1fr;gap:var(--gap-2xl)}
    .dh-cover{max-width:420px}
    .db-grid{grid-template-columns:1fr}
    .db-side{position:static}
    .sub-card{max-width:none}
  }
  @media (max-width:680px){
    .detail-hero{padding:18px 0 30px}
    .dh-copy h1{font-size:var(--fs-3xl)}
    .dh-copy > p{font-size:var(--fs-base)}
    .dh-actions{flex-wrap:wrap}
    .dh-actions .btn{padding:11px 18px;font-size:var(--fs-base)}
    .learn-bar{flex-wrap:wrap;gap:var(--gap-md)}
    .lb-prog{margin-left:0;width:100%}
    .learn-bar .btn{width:100%}
    .dh-meta{gap:var(--gap-sm)}
    .dh-meta .sep{display:none}
    .ch-meta{display:none}
    .ch{padding:11px 14px;gap:var(--gap-sm)}
    .ch-t{font-size:var(--fs-sm)}
    .about-cols{grid-template-columns:1fr}
    .ch-group-head{padding:12px 14px}
    .paywall{padding:22px 16px}
    .pw-actions{flex-direction:column;gap:var(--gap-md)}
  }

/* ==========================================================================
   站点适配层（Django 模板专用，原型里没有）
   --------------------------------------------------------------------------
   1. 移动端汉堡菜单（原型是小屏直接隐藏导航，线上需要能点到栏目）
   2. 导航右侧登录链接
   3. 页脚底栏链接色
   4. 空状态 / 分页等模板循环兜底
   ========================================================================== */

/* ---------- 导航：汉堡按钮 ---------- */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:34px;height:34px;margin-left:auto;padding:0 7px;border-radius:var(--r-xs)}
.nav-burger span{display:block;height:2px;border-radius:2px;background:var(--on-ink-3);
  transition:transform .2s ease,opacity .2s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- 导航：登录态链接 ---------- */
.nav-login{color:var(--on-ink-2);font-size:var(--fs-md);font-weight:600;
  padding:8px 6px;transition:var(--t-fast);white-space:nowrap;max-width:120px;
  overflow:hidden;text-overflow:ellipsis}
.nav-login:hover{color:var(--brand-blue)}

/* ---------- 导航：会员头像 + 类型 + 下拉菜单 ---------- */
.nav-user{position:relative;flex:0 0 auto}
.nav-user__btn{display:flex;align-items:center;gap:9px;height:38px;padding:0 10px 0 4px;
  border:1px solid transparent;border-radius:999px;background:transparent;cursor:pointer;
  font-family:inherit;transition:var(--t-fast)}
.nav-user__btn:hover,.nav-user.open .nav-user__btn{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.10)}
.nav-user__avatar{position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:rgba(var(--rgb-blue),.20);border:1px solid rgba(var(--rgb-blue),.46)}
.nav-user__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.nu-ini{font-size:13px;font-weight:700;line-height:1;color:var(--brand-blue-soft)}
.nav-user__meta{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.nav-user__meta b{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;font-weight:600;color:var(--on-ink)}
.nu-type{font-style:normal;font-size:10px;font-weight:700;line-height:1;letter-spacing:.02em;
  padding:2px 5px;border-radius:4px}
.nu-type.t0{background:rgba(255,255,255,.10);color:var(--on-ink-3)}
.nu-type.t1{background:rgba(var(--rgb-blue),.20);color:var(--brand-blue-soft)}
.nu-type.t2{background:rgba(var(--rgb-lime),.22);color:var(--brand-lime)}
.nu-type.t3{background:var(--brand-lime);color:var(--on-lime)}
.nu-caret{flex:0 0 auto;color:var(--on-ink-3);transition:transform .2s ease,color .2s ease}
.nav-user:hover .nu-caret,.nav-user.open .nu-caret{transform:rotate(180deg);color:var(--on-ink-2)}

.nav-user__menu{position:absolute;right:0;top:calc(100% + 10px);z-index:95;width:210px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nav-user__menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-user:hover .nav-user__menu,.nav-user.open .nav-user__menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.nu-card{padding:6px;border-radius:12px;background:#0E1B2C;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.85)}
.nu-mail{margin:0;padding:9px 10px 11px;font-size:11.5px;color:var(--on-ink-4);
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nu-item{display:flex;align-items:center;gap:8px;width:100%;margin-top:2px;padding:9px 10px;
  border:0;border-radius:8px;background:none;cursor:pointer;font-family:inherit;
  font-size:13px;color:var(--on-ink-2);text-align:left;transition:var(--t-fast)}
.nu-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nu-item svg{flex:0 0 auto;opacity:.85}
.nu-item--out:hover{background:rgba(var(--rgb-red),.15);color:#FF9AAA}
.nu-card form{margin:0}

/* ---------- 页脚底栏链接 ---------- */
.foot-bot a{color:var(--foot-dim);transition:var(--t-fast)}
.foot-bot a:hover{color:var(--brand-blue)}

/* ---------- 空状态 ---------- */
.empty{grid-column:1/-1;text-align:center;padding:56px 20px;
  border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--surface)}
.empty h3{font-size:var(--fs-lg);font-weight:700;color:var(--text)}
.empty p{color:var(--text-3);font-size:var(--fs-base);margin-top:8px}

@media (max-width:960px){
  .nav-user__meta{display:none}
  .nav-user__btn{gap:5px;padding:0 8px 0 4px}
}

/* 导航在 900 及以下切换为汉堡菜单：原来卡在 680，680~900 这段（平板竖屏、
   小窗口）五个导航项 + 登录/订阅按钮本来就很挤，加上导航搜索框后直接换行错位，
   所以把折叠阈值提前到 900。 */
@media (max-width:900px){
  .nav-burger{display:flex;margin-left:auto}
  .nav-right{margin-left:10px}
  .site-nav .nav-inner{position:relative}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:90;
    flex-direction:column;gap:2px;margin-left:0;padding:10px var(--wrap-pad) 16px;
    background:var(--ink);border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 30px -18px rgba(0,0,0,.8);
  }
  .site-nav.open .nav-links{display:flex}
  .nav-links a{padding:11px 10px;font-size:var(--fs-base)}
  .nav-links a.active::after{display:none}
  .nav-right{gap:8px}
}
/* 只有超窄屏（<430）才把「登录」收起来给「订阅会员」让位，平板/大屏手机保留 */
@media (max-width:430px){
  .nav-login{display:none}
}

/* ---------- 场景卡：图标版（真实数据没有场景配图，用图标卡代替封面图） ---------- */
.scene.scene-ico{
  background:var(--surface);border:1px solid var(--line);
  aspect-ratio:auto;min-height:126px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:15px 16px;transition:var(--t-fast);
}
.scene.scene-ico::after{display:none}
.scene.scene-ico:hover{border-color:rgba(var(--rgb-blue),.55);box-shadow:var(--sh-2);transform:translateY(-2px)}
.scene.scene-ico .si-ico{
  width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--tint-blue);color:var(--link);border:1px solid var(--tint-blue-2);font-size:15px;
}
.scene.scene-ico:nth-child(2n) .si-ico{background:var(--tint-lime);color:var(--ok);border-color:var(--tint-lime-2)}
.scene.scene-ico .scene-in{position:static;padding:0;margin-top:11px;justify-content:flex-start}
.scene.scene-ico .scene-in b{color:var(--text);font-size:var(--fs-md)}
.scene.scene-ico .scene-in span{color:var(--text-3);font-family:inherit;font-size:var(--fs-xs);margin-top:3px}
.scene.all.scene-ico{background:var(--ink);border-color:transparent}
.scene.all.scene-ico .scene-in{position:static;align-items:flex-start;justify-content:flex-start;padding:0}
.scene.all.scene-ico .si-ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--brand-blue)}
.scene.all.scene-ico .scene-in b{color:var(--brand-blue)}
.scene.all.scene-ico .scene-in span{color:var(--on-ink-4)}

/* ---------- 详情页：热门章节 / 空章节 ---------- */
.hot-list{display:flex;flex-direction:column}
.hot-list a{display:flex;align-items:flex-start;gap:var(--gap-sm);padding:9px 0;
  border-bottom:1px dashed var(--line)}
.hot-list a:last-child{border-bottom:none}
.hot-list .rk{width:18px;flex:0 0 18px;font-family:var(--font-mono);font-size:var(--fs-2xs);
  color:var(--text-3);line-height:1.7}
.hot-list a:nth-child(-n+3) .rk{color:var(--link);font-weight:700}
.hot-list strong{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text);
  line-height:var(--lh-snug);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hot-list a:hover strong{color:var(--link)}
.hot-list a div span{font-size:var(--fs-2xs);color:var(--text-3);font-family:var(--font-mono)}
.ch-empty{padding:16px;color:var(--text-3);font-size:var(--fs-sm);text-align:center;
  border-bottom:1px solid var(--line)}

/* ---------- 工作流：数据不足时的补齐引导卡 ---------- */
.wf-more{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-sm);
  aspect-ratio:4/3;border-radius:var(--r-sm);background:var(--ink);
  border:1px solid rgba(255,255,255,.08);text-align:center;padding:var(--gap-xl);
  transition:var(--t-fast);
}
.wf-more:hover{background:var(--ink-2);border-color:rgba(var(--rgb-blue),.45)}
.wf-more b{color:#fff;font-size:var(--fs-md);font-weight:700}
.wf-more span{color:var(--on-ink-4);font-size:var(--fs-xs)}
.wf-more em{
  font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--rgb-blue),.14);border:1px solid rgba(var(--rgb-blue),.4);color:var(--brand-blue);
}

/* ---------- 详情页：章节编号用 CSS 计数器跨组连续（模板不再输出序号） ---------- */
.chapters{counter-reset:chap}
.ch{counter-increment:chap}
.ch .ch-idx::before{content:counter(chap);font-size:var(--fs-2xs);font-family:var(--font-mono)}

/* 课程介绍富文本兜底（后台富文本可能带图/表/标题） */
.about-card{overflow:hidden}
.about-card img{max-width:100%;height:auto;border-radius:var(--r-sm);margin:6px 0 16px}
.about-card h3,.about-card h4{font-size:var(--fs-md);font-weight:700;margin:18px 0 8px;color:var(--text)}
.about-card ul,.about-card ol{padding-left:20px;margin-bottom:16px;color:var(--text-2);font-size:var(--fs-base);line-height:var(--lh-loose)}
.about-card a{color:var(--link)}
.about-card table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:var(--fs-sm);display:block;overflow-x:auto}
.about-card td,.about-card th{border:1px solid var(--line);padding:7px 10px;text-align:left}

/* ---------- 封面信息条：封面素材常自带大字，加一层底保证可读 ---------- */
.cover-foot .ch{
  background:rgba(10,19,32,.52);padding:2.5px 8px;border-radius:var(--r-xs);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.dh-cover-foot span:first-child{
  max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:rgba(10,19,32,.5);padding:2px 8px;border-radius:var(--r-xs);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}

/* ==========================================================================
   全站通用页面骨架
   --------------------------------------------------------------------------
   栏目列表页（工作流 / 节点库 / 博客 / 提示词）与详情页（章节阅读 / 工作流 /
   节点 / 文章）共用以下组件。所有值取 tokens.css，页面不再出现硬编码色值。
   分层：.sheet 面板 → .side-card 侧栏卡 → .prose 富文本
   ========================================================================== */

/* ---------- 面板 ---------- */
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.sheet + .sheet{margin-top:var(--gap-xl)}
.sheet-head{
  display:flex;align-items:center;gap:var(--gap-md);flex-wrap:wrap;
  padding:15px 20px;border-bottom:1px solid var(--line);background:var(--surface-3);
}
.sheet-head h2,.sheet-head h3{font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em}
.sheet-head .cnt{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3)}
.sheet-body{padding:20px}

/* ---------- 深色页头：搜索 / 排序（列表页共用） ---------- */
.ph-search{display:flex;align-items:center;gap:var(--gap-sm);margin-top:var(--gap-xl);max-width:520px}
.ph-search input[type=text],
.ph-search input[type=search]{
  flex:1;min-width:0;height:40px;padding:0 14px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:#fff;font-family:inherit;font-size:var(--fs-base);outline:none;
  transition:var(--t-fast);
}
.ph-search input::placeholder{color:var(--on-ink-4)}
.ph-search input:focus{border-color:rgba(var(--rgb-blue),.7);background:rgba(var(--rgb-blue),.10);
  box-shadow:0 0 0 3px rgba(var(--rgb-blue),.14)}
.ph-search button{
  height:40px;padding:0 18px;border-radius:var(--r-sm);flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dp));
  color:var(--on-brand);font-size:var(--fs-base);font-weight:700;transition:var(--t-fast);
}
.ph-search button:hover{background:linear-gradient(135deg,var(--brand-blue-dp),var(--brand-blue-dp2))}
/* 搜索框内的清空小叉：有输入才出现，点一下清掉关键词
   （用 .ph-search .ph-clear 提高特异性，避免被 .ph-search button 的搜索按钮样式盖掉） */
.ph-search .ph-field{position:relative;flex:1;min-width:0;display:block}
.ph-search .ph-field input[type=text],
.ph-search .ph-field input[type=search]{width:100%;padding-right:34px}
.ph-search .ph-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;padding:0;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.58);background:rgba(255,255,255,.10);
  transition:var(--t-fast);
}
.ph-search .ph-clear svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.ph-search .ph-clear:hover{color:#fff;background:rgba(255,255,255,.24)}
.ph-search .ph-clear[hidden]{display:none}

/* 排序：深底胶囊组 */
.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);margin-top:var(--gap-md)}
.seg a{padding:5px 11px;border-radius:var(--r-xs);font-size:var(--fs-sm);color:var(--on-ink-3);transition:var(--t-fast)}
.seg a:hover{color:#fff}
.seg a.on{background:rgba(255,255,255,.14);color:#fff;font-weight:600}

/* ---------- 双栏：侧栏 + 主区 ---------- */
.lib{display:grid;grid-template-columns:246px minmax(0,1fr);gap:var(--gap-3xl);align-items:start;
  padding:var(--gap-3xl) 0 var(--gap-5xl)}
/* 筛选侧栏不做内部滚动：和右侧列表一起随整页滚动，避免出现第二条滚动条 */
.lib-side{display:flex;flex-direction:column;gap:var(--gap-lg)}
/* 列表主区：白色面板承载，内容与面板边缘留出内部距离 */
.lib-main{
  min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 24px 26px;
  box-shadow:var(--sh-1);
}
/* 筛选卡：内部留白加大，分组内容不再贴边 */
.lib-side .side-card{padding:20px 22px;box-shadow:var(--sh-1)}
.lib-side .filter-grp{padding:0 2px}
@media (max-width:1000px){
  .lib{grid-template-columns:1fr;gap:var(--gap-2xl)}
  .lib-side{position:static;flex-direction:row;flex-wrap:wrap;order:2;max-height:none;overflow:visible}
  .lib-side .side-card{flex:1 1 240px}
  .lib-main{padding:16px}
}

/* ---------- 侧栏卡 ---------- */
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.side-head{display:flex;align-items:center;gap:var(--gap-sm);margin-bottom:var(--gap-md)}
.side-head h3{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;color:var(--text-3);
  font-family:var(--font-mono)}
.side-head a{margin-left:auto;font-size:var(--fs-xs);color:var(--link)}
.side-head a:hover{color:var(--link-hover)}
.side-note{color:var(--text-2);font-size:var(--fs-sm);line-height:var(--lh-body)}

/* 侧栏分类行 */
.side-nav{display:flex;flex-direction:column}
.side-nav a{display:flex;align-items:center;gap:var(--gap-sm);padding:7px 0;
  border-bottom:1px dashed var(--line);font-size:var(--fs-sm);color:var(--text-2);transition:var(--t-fast)}
.side-nav a:last-child{border-bottom:none}
.side-nav a:hover{color:var(--link);padding-left:4px}
.side-nav a.on{color:var(--link);font-weight:600}
.side-nav em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3)}

/* 浅底排序按钮组：工作流列表页 bar-head 右侧（与 course 页 .sortgrp 同语言） */
.sortseg{display:inline-flex;align-items:center;gap:6px}
.sortseg a{
  padding:6px 13px;border-radius:var(--r-sm);font-size:var(--fs-sm);
  color:var(--text-2);background:var(--surface);border:1px solid var(--line);
  transition:var(--t-fast);white-space:nowrap;text-decoration:none;
}
.sortseg a:hover{border-color:rgba(var(--rgb-blue),.55);color:var(--text);transform:translateY(-1px)}
.sortseg a.is-on{
  color:#FFF;font-weight:600;background:var(--brand-blue);border-color:var(--brand-blue);
  box-shadow:0 2px 8px -4px rgba(var(--rgb-blue),.7);
}
.sortseg a.is-on:hover{color:#FFF;background:var(--brand-blue-dp);border-color:var(--brand-blue-dp)}
/* 紧凑版：节点库列表排序，三个小按钮，配色对齐下方翻页（白底灰边，选中深墨底白字） */
.sortseg--sm{gap:5px}
.sortseg--sm a{padding:5px 11px;font-size:12.5px;border-radius:var(--r-xs)}
.sortseg--sm a.is-on{
  background:var(--ink);border-color:var(--ink);color:#FFF;font-weight:600;box-shadow:none;
}
.sortseg--sm a.is-on:hover{background:var(--ink);border-color:var(--ink);color:#FFF}

/* ---------- 结果条（主区顶部） ---------- */
.bar-head{display:flex;align-items:flex-end;gap:var(--gap-lg);flex-wrap:wrap;
  padding-bottom:var(--gap-md);border-bottom:1px solid var(--line);margin-bottom:var(--gap-xl)}
.bar-head h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em}
.bar-head p{color:var(--text-3);font-size:var(--fs-sm);margin-top:3px}
.bar-head .right{margin-left:auto;display:flex;align-items:center;gap:var(--gap-sm)}

/* 浅底小控件：排序下拉 */
.select{
  height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text-2);font-family:inherit;font-size:var(--fs-sm);
  outline:none;transition:var(--t-fast);
}
.select:focus{border-color:rgba(var(--rgb-blue),.65);box-shadow:0 0 0 3px rgba(var(--rgb-blue),.12)}

/* ---------- 行列表（相关 / 热门 / 目录） ---------- */
.rowlist{display:flex;flex-direction:column}
.rowlist a{display:flex;align-items:flex-start;gap:var(--gap-md);padding:11px 0;
  border-bottom:1px dashed var(--line);transition:var(--t-fast)}
.rowlist a:last-child{border-bottom:none}
.rowlist a:hover strong{color:var(--link)}
.rowlist .no{flex:0 0 20px;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3);
  line-height:1.9}
.rowlist strong{display:block;font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-snug);color:var(--text)}
.rowlist span.sub{display:block;font-size:var(--fs-2xs);color:var(--text-3);
  font-family:var(--font-mono);margin-top:3px}

/* ---------- 阅读页 ---------- */
.reader{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap-3xl);align-items:stretch;
  padding:var(--gap-3xl) 0 var(--gap-5xl)}
.reader-main{min-width:0}
/* 侧栏：整列随页面滚动，只有内层 .side-sticky（目录 + 订阅）常驻 */
.reader-side{display:flex;flex-direction:column;gap:var(--gap-lg);min-width:0}
.side-sticky{
  position:sticky;top:calc(var(--nav-h) + 18px);
  display:flex;flex-direction:column;gap:var(--gap-lg);
  /* 上限贴着视口：内容再长也在内部滚，保证「立即订阅」始终点得到 */
  max-height:calc(100vh - var(--nav-h) - 34px);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;
  padding-right:2px;
}
.side-sticky::-webkit-scrollbar{width:6px}
.side-sticky::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.side-sticky::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
@media (max-width:1020px){
  .reader{grid-template-columns:1fr;gap:var(--gap-2xl)}
  .reader-side{flex-direction:row;flex-wrap:wrap}
  .side-sticky{
    position:static;max-height:none;overflow:visible;padding-right:0;
    flex-direction:row;flex-wrap:wrap;flex:1 1 100%;
  }
  .reader-side .side-card,.reader-side .side-sticky > *{flex:1 1 260px}
}

/* 用户协议页：条款小标题（内容里的 span）提为分节标题 */
.agreement-body span{display:block;margin-top:1.6em;font-weight:800;font-size:var(--fs-lg);
  color:var(--text);letter-spacing:-.01em}
.agreement-body span:first-child{margin-top:0}

/* 课程详情页：正文卡内边距比通用 sheet 再大 10px */
.reader-main .sheet-body{padding:30px}
.reader-main .sheet-head{padding:15px 30px}
.reader-main .sheet .rowlist[style]{padding:6px 30px 14px !important}

/* 富文本：课程正文 / 工作流说明 / 文章正文共用 */
.prose{font-size:var(--fs-md);line-height:var(--lh-loose);color:var(--text-2);overflow-wrap:break-word}
.prose > * + *{margin-top:1.05em}
.prose h2,.prose h3,.prose h4{color:var(--text);font-weight:800;letter-spacing:-.015em;
  line-height:var(--lh-snug);margin-top:1.7em}
.prose h2{font-size:var(--fs-xl)}
.prose h3{font-size:var(--fs-lg)}
.prose h4{font-size:var(--fs-md)}
.prose p{margin:0}
.prose strong,.prose b{color:var(--text);font-weight:700}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--link-hover)}
.prose ul,.prose ol{padding-left:1.35em}
.prose li + li{margin-top:.4em}
.prose img{max-width:100%;height:auto;border-radius:var(--r-sm);margin:1.1em 0;
  border:1px solid var(--line)}
.prose blockquote{margin:1.2em 0;padding:12px 16px;border-left:3px solid var(--brand-blue);
  background:var(--tint-blue-3);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--text-2)}
.prose code{font-family:var(--font-mono);font-size:.92em;background:var(--surface-2);
  padding:1.5px 5px;border-radius:4px;color:var(--text)}
.prose pre{background:var(--ink);color:#DCE8F4;padding:16px 18px;border-radius:var(--r-sm);
  overflow-x:auto;font-size:var(--fs-sm);line-height:1.7}
.prose pre code{background:none;padding:0;color:inherit}
.prose hr{border:none;border-top:1px solid var(--line);margin:1.8em 0}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:var(--fs-sm);
  display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
.prose th{background:var(--surface-3);font-weight:700;color:var(--text)}
/* 宽表容器：列多的表在窄屏横向滚动，而不是被压成竖排 */
.prose .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2em 0}
.prose .tbl-wrap > table{display:table;width:100%;margin:0}
/* 标题前的留白：.prose > * + * 的特异性比 .prose h2 高，必须在这里单独提权 */
.prose > * + h2{margin-top:2em}
.prose > * + h3{margin-top:1.5em}
@media (max-width:680px){
  .prose .tbl-wrap > table{min-width:540px}
  .prose th,.prose td{padding:7px 8px}
}

/* ---------- 文章详情：正文放大、段距拉开、内边距加宽 ----------
   只作用于文章详情（.article-body），不影响课程 / 工作流说明的排版 */
.article-body{padding:30px 34px 34px}          /* 原 .sheet-body 20px，左右再放宽一档 */
.article-body .prose{font-size:17px;line-height:1.95;color:var(--text-2)}
.article-body .prose > * + *{margin-top:1.55em}
/* 正文首段（导语）：比正文略大、颜色更深，作为进入文章的「抓手」 */
.article-body .prose .article-detail-v2__lead{
  font-size:1.06em;line-height:1.9;color:var(--text);
}
.article-body .prose h2{font-size:var(--fs-2xl);margin-top:1.7em}
.article-body .prose h3{font-size:var(--fs-xl);margin-top:1.5em}
.article-body .prose > * + h2{margin-top:2.1em}
.article-body .prose > * + h3{margin-top:1.7em}
.article-body .prose li + li{margin-top:.6em}
.article-body .prose blockquote{font-size:1em;padding:14px 18px}
@media (max-width:900px){
  .article-body{padding:26px 24px 28px}
}
@media (max-width:680px){
  .article-body{padding:20px 18px 22px}
  .article-body .prose{font-size:16px;line-height:1.9}
  .article-body .prose > * + *{margin-top:1.35em}
}

/* ---------- 文章详情右侧栏：只放大「板块标题」，列表项保持全站默认 ----------
   标题＝文章分类 / 热门文章 / 相关文章（.side-head h3）；只挂 .art-side，
   课程 / 工作流 / 节点详情的侧栏不受影响 */
.art-side .side-head{margin-bottom:12px;padding-bottom:10px;position:relative}
.art-side .side-head::after{           /* 标题下一道细线：把板块「立」起来 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent);
}
.art-side .side-head h3{
  font-size:15.5px;font-weight:700;letter-spacing:.01em;color:var(--text);
  line-height:1.4;
  /* 板块标题用微软雅黑（Windows），Mac / 移动端回落到苹方 */
  font-family:"Microsoft YaHei","微软雅黑",-apple-system,BlinkMacSystemFont,
              "PingFang SC","Hiragino Sans GB",sans-serif;
}
.art-side .side-head a{font-size:12px}

/* 详情页底部：上一篇 / 下一篇 + 返回列表 */
.art-pager{margin-top:var(--gap-2xl)}
.art-back{
  display:inline-block;margin-top:var(--gap-lg);
  font-size:var(--fs-sm);color:var(--text-3);transition:var(--t-fast);
}
.art-back:hover{color:var(--link)}
/* 精选徽标：品牌红底白字；原创沿用蓝底（.badge.hot） */
.badge.pick{background:var(--brand-red);color:#fff;border-color:transparent;
  box-shadow:0 2px 10px -2px rgba(var(--rgb-red),.55)}
/* 老编辑器残留：表格单元格用内联白色文字，白底面板上会「隐形」，强制回归墨色 */
.article-body .prose td,.article-body .prose th{color:var(--text)}
.article-body .prose td span,.article-body .prose th span,
.article-body .prose td font,.article-body .prose th font{color:inherit !important}
.article-body .prose span[style*="hsl(0,0%,100%)"],
.article-body .prose span[style*="rgb(255"]{color:inherit !important}

/* 正文分页：上一篇 / 下一篇 */
.pager-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-md);margin-top:var(--gap-xl)}
.pager-nav a,.pager-nav span{
  display:block;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);transition:var(--t-fast);min-width:0;
}
.pager-nav a:hover{border-color:rgba(var(--rgb-blue),.55);box-shadow:var(--sh-1)}
.pager-nav small{display:block;font-size:var(--fs-2xs);color:var(--text-3);
  font-family:var(--font-mono);letter-spacing:.06em;margin-bottom:5px}
.pager-nav strong{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text);
  line-height:var(--lh-snug);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager-nav .next{text-align:right}
.pager-nav span.dim{opacity:.55}
.pager-nav span.dim strong{color:var(--text-3);font-weight:500}
@media (max-width:680px){.pager-nav{grid-template-columns:1fr}}

/* 付费 / 登录提示条（提示不是错误，用蓝不用红） */
.notice{display:flex;align-items:flex-start;gap:var(--gap-md);padding:16px 18px;
  border:1px solid var(--tint-blue-2);border-radius:var(--r-md);
  background:linear-gradient(180deg,#fff,var(--tint-blue-3))}
.notice .ico{width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-sm);display:grid;
  place-items:center;background:var(--tint-blue);border:1px solid var(--tint-blue-2);color:var(--link)}
.notice .ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.notice b{display:block;font-size:var(--fs-md);color:var(--text)}
.notice p{color:var(--text-2);font-size:var(--fs-sm);margin-top:4px;line-height:var(--lh-body)}
.notice .act{display:flex;gap:var(--gap-sm);margin-top:var(--gap-md);flex-wrap:wrap}
.notice .bar{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.notice .bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-lime))}

/* ---------- 节点中英文对比（节点详情页专用） ----------
   这一块是 ComfyUI 界面的等比例还原：深灰底、彩色口子、内嵌胶囊控件。
   深色是 ComfyUI 的固有外观，不属于全站浅色体系，所以本组件自带一组局部变量，
   只作用于 .nodecmp-grid 内部，不污染 tokens.css 的全局色板。
   改色只改下面这五行。 */
.nodecmp-grid{
  --cn-panel:#333333;        /* 面板底 */
  --cn-pill:#222222;         /* 控件胶囊底 */
  --cn-pill-line:#646464;    /* 控件胶囊描边（参考图里的灰框） */
  --cn-div:#242424;          /* 标题下方的黑线（比面板底深两档，1:1 下也看得清） */
  --cn-text:#E7EDF4;         /* 面板主文字 */
  --cn-dim:#93A1B0;          /* 面板次要文字（空值、占位） */
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-xl);margin-top:var(--gap-lg);
}
.nodecmp-lead{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-3);margin:0 0 var(--gap-lg)}
.nodecmp-lead b{color:var(--text-2);font-weight:600;letter-spacing:.06em}

/* 单侧：小标题 + 深色面板 */
.nodecmp-col{min-width:0}
.nodecmp-cap{display:flex;align-items:baseline;gap:var(--gap-sm);margin-bottom:9px}
.nodecmp-cap span{font-size:var(--fs-sm);font-weight:700;color:var(--text);letter-spacing:-.01em}
.nodecmp-cap em{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3)}

.cnpanel{
  background:var(--cn-panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);
  overflow:hidden;box-shadow:0 14px 30px -20px rgba(10,19,32,.6);
}
.cnpanel-head{
  display:flex;align-items:center;gap:9px;padding:13px 14px 12px;
  color:var(--cn-text);font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em;
  border-bottom:1px solid var(--cn-div);   /* ComfyUI 标题下的黑线 */
}
.cnpanel-head .cndot{width:10px;height:10px}
.cnpanel-body{padding:10px}

/* 圆点（输入 / 输出口） */
.cndot{display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(0,0,0,.28);vertical-align:middle}
.cndot--sq{border-radius:2px}
.cndot--end{opacity:.95}

/* 输入 / 输出行：一行里左边放输入，右边放输出（输出贴右边缘，同 ComfyUI）
   注意：输出不是单独一段，它和输入共用同一行，第 1 个输出就落在第 1 行右侧。 */
.cnrow{display:flex;align-items:center;gap:8px;padding:2px 0;min-height:24px;
  font-size:var(--fs-sm);color:var(--cn-text)}
.cnrow-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnrow-outname{margin-left:auto;flex:0 0 auto;max-width:50%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--cn-text)}

/* 控件胶囊：◀ 名称 ⋯ 值 ▶（灰框 + 深底，照 ComfyUI 的控件长相） */
.cnpanel-widgets{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.cnwid{
  display:flex;align-items:center;gap:8px;min-height:29px;padding:0 10px;
  background:var(--cn-pill);border:1px solid var(--cn-pill-line);border-radius:10px;
}
.cnwid-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-sm);color:#DCE3EB}
.cnwid-val{margin-left:auto;flex:0 0 auto;font-size:var(--fs-sm);color:#DCE3EB;
  max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnwid-val.is-empty{color:var(--cn-dim)}
.cnwid--plain{padding-right:12px}
.cnwid--plain .cnwid-val{margin-left:auto}
.cnwid--file .cnwid-val{color:var(--cn-dim);font-size:var(--fs-2xs);font-family:var(--font-mono)}

/* 左右切换三角：用边框画，缩放不掉清晰度 */
.cnwid-ar{flex:0 0 auto;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}
.cnwid-ar--l{border-right:5px solid #B9C4D1}
.cnwid-ar--r{border-left:5px solid #B9C4D1}

.cnpanel-empty{margin:6px 0 0;font-size:var(--fs-sm);color:var(--cn-dim)}

/* 图例 + 备注：回到浅色体系 */
.nodecmp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-md) var(--gap-lg);
  margin-top:var(--gap-lg);padding-top:var(--gap-md);border-top:1px dashed var(--line);
  font-size:var(--fs-2xs);color:var(--text-3)}
.nodecmp-legend span{display:inline-flex;align-items:center;gap:6px}
.nodecmp-legend .cndot{box-shadow:0 0 0 1px rgba(14,22,33,.12)}
.nodecmp-legend .cnwid-ar{border-top-width:3px;border-bottom-width:3px}
.nodecmp-legend .cnwid-ar--l{border-right:4px solid var(--text-3)}
.nodecmp-legend .cnwid-ar--r{border-left:4px solid var(--text-3)}
.nodecmp-legend b{color:var(--text-2);font-weight:600}
.nodecmp-legend .lg-text{color:var(--text-3)}
.nodecmp-note{margin:var(--gap-sm) 0 0;font-size:var(--fs-2xs);color:var(--text-3);line-height:var(--lh-body)}

@media (max-width:860px){
  .nodecmp-grid{grid-template-columns:1fr;gap:var(--gap-xl)}
}

/* 参数说明：输入 / 输出 / 控件 三段 */
.param-lead{margin:0 0 var(--gap-md);font-size:var(--fs-sm);color:var(--text-3);line-height:var(--lh-body)}
.param-lead code{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-2);
  background:var(--surface-3);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

.param-sec{
  --ps-bg:var(--surface-3);--ps-fg:var(--text-2);--ps-bar:var(--line-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;
}
.param-sec + .param-sec{margin-top:var(--gap-lg)}
/* 三类的色只在本组件内定义，不外溢到全局色板 */
.param-sec--in{--ps-bg:#EAF3FB;--ps-fg:#27688F;--ps-bar:#5FBDEE}
.param-sec--out{--ps-bg:#F1F7E2;--ps-fg:#566A19;--ps-bar:#C2D964}
.param-sec--wid{--ps-bg:#FBF1E3;--ps-fg:#8B5A1B;--ps-bar:#E0A85C}

.param-sec > header{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--ps-bg);border-left:3px solid var(--ps-bar);
  font-size:var(--fs-sm);font-weight:700;color:var(--ps-fg);letter-spacing:.01em;
}
.param-sec > header em{
  margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-2xs);
  font-weight:400;color:var(--ps-fg);opacity:.86;letter-spacing:.02em;
}

.param-rows{display:flex;flex-direction:column}
.prow{
  display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:var(--gap-md);
  padding:11px 14px;border-top:1px solid var(--line);
}
.prow:first-child{border-top:none}
.prow:hover{background:var(--surface-3)}
.pname{display:flex;flex-direction:column;gap:3px;min-width:0}
.pname strong{font-size:var(--fs-base);font-weight:700;color:var(--text-1);line-height:var(--lh-snug);
  overflow-wrap:anywhere}
.pname .mono{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3);
  overflow-wrap:anywhere}
.pdesc{font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh-body);align-self:center}
.pdesc--empty{color:var(--text-3)}
@media (max-width:620px){
  .prow{grid-template-columns:1fr;gap:6px}
  .pdesc{align-self:start}
}

/* ---------- 提示词工具 ---------- */
.prompt{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--gap-xl);align-items:start}
@media (max-width:1020px){.prompt{grid-template-columns:1fr}}
.prompt-lists{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-md)}
@media (max-width:760px){.prompt-lists{grid-template-columns:1fr}}
.prompt-col{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.prompt-col h4{padding:10px 12px 10px 14px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
  color:var(--text-2);background:var(--surface-2);border-bottom:1px solid var(--line);
  font-family:var(--font-mono);box-shadow:inset 3px 0 0 var(--brand-blue)}
.prompt-col ul{list-style:none;max-height:340px;overflow-y:auto}
.prompt-col li{padding:8px 12px;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer;
  border-bottom:1px solid var(--line);transition:var(--t-fast)}
.prompt-col li:last-child{border-bottom:none}
.prompt-col li:hover{background:var(--tint-blue-3);color:var(--link)}
.prompt-col li.on{background:var(--tint-blue);color:var(--link);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand-blue)}
.prompt-col li.placeholder{color:var(--text-3);cursor:default;font-size:var(--fs-xs)}
.prompt-col li.placeholder:hover{background:none;color:var(--text-3)}
.prompt-out{display:flex;flex-direction:column;gap:var(--gap-md)}
@media (min-width:1021px){.prompt-out{position:sticky;top:calc(var(--nav-h) + 18px)}}
.prompt-block{border:1px solid var(--line);border-radius:var(--r-md);padding:15px 17px;background:var(--surface);
  transition:var(--t-fast)}
.prompt-block:hover{box-shadow:var(--sh-2)}
.prompt-block h4{font-size:var(--fs-xs);letter-spacing:.08em;color:var(--text-2);font-weight:700;
  font-family:var(--font-mono);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.prompt-block h4::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--brand-blue);flex:0 0 auto}
.prompt-block.h4-lime h4::before{background:var(--brand-lime)}
.prompt-block p{font-size:var(--fs-base);color:var(--text);line-height:1.75;min-height:2.4em}
.prompt-block.dark{background:var(--ink);border-color:transparent}
.prompt-block.dark h4{color:var(--on-ink-3)}
.prompt-block.dark h4::before{background:var(--brand-red)}
.prompt-block.dark p{color:var(--on-ink);font-family:var(--font-mono);font-size:var(--fs-sm);
  line-height:1.72;word-break:break-word}
.prompt-acts{display:flex;flex-wrap:wrap;gap:var(--gap-sm);margin-top:var(--gap-lg)}

/* ---------- 价格 / 会员卡（详情页侧栏共用） ---------- */
.price{display:flex;align-items:baseline;gap:5px;color:#fff;font-family:var(--font-mono);
  margin-top:10px}
.price b{font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.03em}
.price span{color:var(--on-ink-4);font-size:var(--fs-base)}
.perks{list-style:none;display:flex;flex-direction:column;gap:7px;margin:14px 0 16px}
.perks li{position:relative;padding-left:18px;color:var(--on-ink-2);font-size:var(--fs-sm);
  line-height:var(--lh-body)}
.perks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand-lime);
  font-weight:800;font-size:var(--fs-xs)}

/* ---------- 单栏页头（章节阅读页） ---------- */
.dh-row--single{grid-template-columns:minmax(0,1fr)}

/* ---------- 侧栏目录（章节阅读页） ---------- */
.toc{max-height:min(52vh,520px);overflow-y:auto;margin:0 -4px;padding:0 4px}
.toc-group + .toc-group{margin-top:var(--gap-md);padding-top:var(--gap-md);border-top:1px solid var(--line)}
.toc-group-head{font-size:var(--fs-2xs);color:var(--text-3);font-family:var(--font-mono);
  letter-spacing:.08em;margin-bottom:6px}
.toc-row{display:flex;align-items:flex-start;gap:var(--gap-sm);padding:6px 8px;border-radius:var(--r-xs);
  font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh-snug);transition:var(--t-fast)}
.toc-row:hover{background:var(--surface-2);color:var(--text)}
.toc-row.on{background:var(--tint-blue);color:var(--link);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand-blue)}
.toc-no{flex:0 0 18px;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3);
  line-height:1.7}
.toc-row.on .toc-no{color:var(--link)}
.toc-t{flex:1;min-width:0}
.toc-vip{flex:0 0 auto;font-size:var(--fs-2xs);color:var(--ok);background:var(--tint-lime);
  border-radius:3px;padding:1px 5px}

/* ---------- 侧栏筛选项（radio / checkbox） ---------- */
.filter-grp + .filter-grp{margin-top:var(--gap-lg);padding-top:var(--gap-lg);border-top:1px solid var(--line)}
.filter-grp h4{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;color:var(--text-3);
  font-family:var(--font-mono);margin-bottom:8px}
.filter-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:0 -8px;border-radius:var(--r-xs);
  font-size:var(--fs-sm);color:var(--text-2);cursor:pointer;transition:var(--t-fast)}
.filter-opt:hover{background:var(--surface-2);color:var(--text)}
.filter-opt input{accent-color:var(--brand-blue-dp);width:13px;height:13px;flex:0 0 auto;cursor:pointer}
.filter-opt.on{background:var(--tint-blue);color:var(--link);font-weight:600}
.filter-opt em{margin-left:auto;font-style:normal;font-family:var(--font-mono);
  font-size:var(--fs-2xs);color:var(--text-3)}
.filter-opt.on em{color:var(--link)}
.filter-submit{width:100%;margin-top:var(--gap-lg)}

/* ---------- 节点类型筛选（节点库：三类，卡片式单选项，三原色区分） ---------- */
.ntype-card .side-head{margin-bottom:12px}
.ntype-list{display:flex;flex-direction:column;gap:7px}
.ntype{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:1px 8px;padding:9px 11px 9px 27px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  cursor:pointer;transition:var(--t-fast);
}
/* 左侧常驻小色点：未选中也能看出这一类属于哪个原色 */
.ntype::before{
  content:"";position:absolute;left:12px;top:14px;width:6px;height:6px;border-radius:50%;
  background:var(--line-2);transition:var(--t-fast);
}
.ntype.t1::before{background:var(--brand-blue)}
.ntype.t2::before{background:var(--brand-lime)}
.ntype.t3::before{background:var(--brand-red)}
.ntype input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ntype:hover{border-color:rgba(var(--rgb-blue),.5);background:var(--surface-2);transform:translateY(-1px)}
.ntype:hover::before{transform:scale(1.25)}
.nt-name{font-size:var(--fs-sm);font-weight:600;line-height:1.45;color:var(--text)}
.nt-sub{grid-column:1;font-size:var(--fs-xs);line-height:1.45;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntype em{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-style:normal;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3)}

/* 「全部节点」：中性墨色，不与三类争色 */
.ntype.on{border-color:var(--line-2);background:var(--surface-2);box-shadow:0 0 0 3px rgba(16,32,52,.05)}
.ntype.on .nt-name,.ntype.on em{color:var(--text)}
.ntype.on .nt-sub{color:var(--text-2)}
.ntype.on::before{width:8px;height:8px;left:11px;top:13px;background:var(--text-3)}
/* 原生 = 品牌蓝 */
.ntype.t1.on{border-color:rgba(var(--rgb-blue),.62);background:var(--tint-blue);
  box-shadow:0 0 0 3px rgba(var(--rgb-blue),.10)}
.ntype.t1.on .nt-name,.ntype.t1.on em{color:var(--link)}
.ntype.t1.on .nt-sub{color:#2A8FBF}
/* 额外 = 品牌黄绿（文字用深橄榄，保证浅底可读） */
.ntype.t2.on{border-color:#C9DC86;background:var(--tint-lime);
  box-shadow:0 0 0 3px rgba(var(--rgb-lime),.26)}
.ntype.t2.on .nt-name,.ntype.t2.on em{color:var(--ok)}
.ntype.t2.on .nt-sub{color:#6E8A2A}
/* 第三方 = 品牌红（浅底深红字，不做纯色底） */
.ntype.t3.on{border-color:var(--danger-line);background:var(--danger-bg);
  box-shadow:0 0 0 3px rgba(var(--rgb-red),.10)}
.ntype.t3.on .nt-name,.ntype.t3.on em{color:var(--danger)}
.ntype.t3.on .nt-sub{color:#D9455F}
@media (max-width:1000px){
  .ntype-list{flex-direction:row;flex-wrap:wrap}
  .ntype{flex:1 1 210px}
}

/* ---------- 节点卡（节点库列表） ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-lg)}
.nodecard{display:flex;flex-direction:column;padding:16px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);transition:var(--t-fast)}
.nodecard:hover{border-color:rgba(var(--rgb-blue),.5);box-shadow:var(--sh-2);transform:translateY(-2px)}
.nodecard .top{display:flex;align-items:center;gap:var(--gap-sm);margin-bottom:8px}
.nodecard h3{font-size:var(--fs-md);font-weight:700;line-height:var(--lh-snug)}
.nodecard h3 a:hover{color:var(--link)}
.nodecard p{color:var(--text-2);font-size:var(--fs-base);line-height:var(--lh-body);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nodecard .foot{display:flex;align-items:center;gap:var(--gap-md);margin-top:auto;padding-top:12px;
  color:var(--text-3);font-size:var(--fs-xs);font-family:var(--font-mono)}
.nodecard .foot em{font-style:normal;margin-left:auto}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* 节点库页头：统计数字 */
.ph-nums{display:flex;gap:var(--gap-2xl);margin-top:var(--gap-lg);flex-wrap:wrap}
.ph-nums div{display:flex;align-items:baseline;gap:6px}
.ph-nums b{color:#fff;font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:700}
.ph-nums span{color:var(--on-ink-4);font-size:var(--fs-sm)}
/* 节点库页头：五个统计量（全部 / 原生 / 额外 / 第三方 / 浏览），竖线分隔、数字稍收 */
.ph-nums--stat{gap:0;align-items:center;row-gap:10px}
.ph-nums--stat div{position:relative;padding:0 15px}
.ph-nums--stat div:first-child{padding-left:0}
.ph-nums--stat div + div::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:20px;background:rgba(255,255,255,.16);
}
.ph-nums--stat b{font-size:var(--fs-lg)}
@media (max-width:680px){
  .ph-nums--stat div{padding:0 11px}
  .ph-nums--stat b{font-size:var(--fs-md)}
}

/* ---------- 结果不足时的说明条 ---------- */
.tip-band{display:flex;align-items:center;gap:var(--gap-lg);flex-wrap:wrap;
  margin-top:var(--gap-xl);padding:16px 18px;border:1px dashed var(--line-2);
  border-radius:var(--r-md);background:var(--surface-3)}
.tip-band b{display:block;font-size:var(--fs-md);color:var(--text)}
.tip-band p{color:var(--text-2);font-size:var(--fs-sm);margin-top:3px;line-height:var(--lh-body)}
.tip-band .btn{margin-left:auto;flex:0 0 auto}

/* ---------- 文章列表卡（博客） ---------- */
.artlist{display:flex;flex-direction:column;gap:var(--gap-lg)}
.artcard{display:grid;grid-template-columns:206px minmax(0,1fr);gap:var(--gap-lg);
  padding-bottom:var(--gap-lg);border-bottom:1px solid var(--line)}
.artcard:last-child{border-bottom:none;padding-bottom:0}
.artcard--text{grid-template-columns:1fr}
.artcard .thumb{display:block;aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line)}
.artcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--t-base)}
.artcard:hover .thumb img{transform:scale(1.04)}
.artcard h3{font-size:var(--fs-lg);font-weight:700;line-height:var(--lh-snug);letter-spacing:-.01em}
.artcard h3 a:hover{color:var(--link)}
.artcard p{color:var(--text-2);font-size:var(--fs-base);line-height:var(--lh-body);margin-top:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.artcard .foot{display:flex;align-items:center;gap:var(--gap-md);flex-wrap:wrap;
  margin-top:11px;color:var(--text-3);font-size:var(--fs-xs);font-family:var(--font-mono)}
.artcard .foot .sp{margin-left:auto}
@media (max-width:680px){
  .artcard{grid-template-columns:1fr}
  .artcard .thumb{aspect-ratio:16/9}
  .artcard h3{font-size:var(--fs-md)}
}

/* ---------- 文章列表页：复用首页书封卡 ----------
   主区比首页窄，四列时把封面内边距 / 双环 / 标题按比例收一档，
   保持和首页同一观感（立式书封 + 标题居中 + 底栏分类与浏览数）。 */
.lib-main .blog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-md)}
.lib-main .blog-card{border-radius:var(--r-sm)}
.lib-main .blog-cover{padding:16px 13px 11px 16px}
.lib-main .blog-cover::after{width:6px}
.lib-main .bc-title{font-size:17px;line-height:1.34;height:4.02em}
.lib-main .bc-ring.r1{width:82px;height:82px;right:-22px;top:-24px}
.lib-main .bc-ring.r2{width:46px;height:46px;right:26px;bottom:-16px}
.lib-main .bc-type{font-size:10.5px;padding:2px 7px}
.lib-main .bc-views{font-size:11.5px}
@media (max-width:1180px){
  .lib-main .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .lib-main .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .lib-main .blog-cover{padding:14px 11px 10px 14px}
  .lib-main .bc-title{font-size:15px;line-height:1.34;height:4.02em}
  .lib-main .bc-ring.r1{width:64px;height:64px;right:-18px;top:-18px}
  .lib-main .bc-ring.r2{width:38px;height:38px;right:18px;bottom:-14px}
}

/* 标签云 */
.tagcloud{display:flex;flex-wrap:wrap;gap:6px}
.tagcloud a{font-size:var(--fs-2xs);color:var(--text-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:3px 8px;transition:var(--t-fast)}
.tagcloud a:hover{color:var(--link);border-color:rgba(var(--rgb-blue),.5);background:var(--tint-blue)}

/* 右置侧栏变体（博客列表 / 工作流列表）：
   桌面端 1fr + 262px，侧栏固定排第二列；小屏收成单列时侧栏垫底 */
.lib--right{grid-template-columns:minmax(0,1fr) 262px}
.lib--right .lib-side{order:2}
@media (max-width:1000px){
  .lib--right{grid-template-columns:1fr}
}

/* 侧栏行：长名称换行时计数不被挤压 */
.side-nav a span{flex:1;min-width:0;line-height:var(--lh-snug)}
.side-nav em{flex:0 0 auto;white-space:nowrap;padding-left:4px}
/* 无封面文章行更宽松一些 */
.artcard--text{padding-bottom:var(--gap-xl)}

/* ---------- 详情页图库 ---------- */
.gal-main{position:relative;background:var(--ink);border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:16/10;display:grid;place-items:center}
.gal-main img{width:100%;height:100%;object-fit:contain}
.gal-cap{position:absolute;left:14px;bottom:12px;color:rgba(255,255,255,.78);
  font-size:var(--fs-xs);font-family:var(--font-mono)}
.galthumbs{display:flex;align-items:center;gap:var(--gap-sm);margin-top:var(--gap-md)}
.galthumbs .nav{width:30px;height:30px;flex:0 0 30px;border:1px solid var(--line);border-radius:var(--r-xs);
  display:grid;place-items:center;background:var(--surface);color:var(--text-2);transition:var(--t-fast)}
.galthumbs .nav:hover{border-color:rgba(var(--rgb-blue),.5);color:var(--link)}
.galthumbs .nav svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.galthumbs .track{display:flex;gap:var(--gap-sm);overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.galthumbs .track::-webkit-scrollbar{display:none}
.galthumb{flex:0 0 96px;aspect-ratio:16/10;border-radius:var(--r-xs);overflow:hidden;
  border:2px solid transparent;background:var(--surface-2);opacity:.7;transition:var(--t-fast)}
.galthumb img{width:100%;height:100%;object-fit:cover}
.galthumb.on{border-color:var(--brand-blue);opacity:1}
.galthumb:hover{opacity:1}

/* ---------- 节点小卡（详情页侧栏） ---------- */
.node-mini{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface-3);
  font-size:var(--fs-sm);transition:var(--t-fast);position:relative}
a.node-mini:hover{border-color:rgba(var(--rgb-blue),.5);background:var(--tint-blue-3)}
.node-mini .idx{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3)}
.node-mini .nm{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-mini .fn{grid-column:1/-1;color:var(--text-3);font-size:var(--fs-2xs);line-height:1.5;
  display:none}
.node-mini:hover .fn{display:block}
.node-mini.dim{opacity:.6}

/* 详情页信息表 */
.kv{display:flex;flex-direction:column}
.kv div{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap-md);
  padding:8px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-sm)}
.kv div:last-child{border-bottom:none}
.kv dt,.kv span{color:var(--text-3);flex:0 0 auto}
.kv dd,.kv b{color:var(--text);font-weight:600;text-align:right;font-family:var(--font-mono);
  font-size:var(--fs-sm);min-width:0;word-break:break-word}

/* ---------- 提示词工具：选择列表（沿用模板原有 id 与 selected 类） ---------- */
#categoryList, #subCategoryList, #keywordList{list-style:none;max-height:360px;overflow-y:auto}
#categoryList li, #subCategoryList li, #keywordList li{
  padding:8px 12px;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer;
  border-bottom:1px solid var(--line);transition:var(--t-fast);line-height:var(--lh-snug)
}
#categoryList li:last-child, #subCategoryList li:last-child, #keywordList li:last-child{border-bottom:none}
#categoryList li:hover, #subCategoryList li:hover, #keywordList li:hover{
  background:var(--tint-blue-3);color:var(--link)}
#categoryList li.selected, #subCategoryList li.selected, #keywordList li.selected{
  background:var(--tint-blue);color:var(--link);font-weight:600;box-shadow:inset 3px 0 0 var(--brand-blue)}
#categoryList li.is-placeholder, #subCategoryList li.is-placeholder, #keywordList li.is-placeholder{
  color:var(--text-3);cursor:default;font-size:var(--fs-xs)}
#categoryList li.is-placeholder:hover, #subCategoryList li.is-placeholder:hover, #keywordList li.is-placeholder:hover{
  background:none;color:var(--text-3)}
.prompt-out .prompt-block p{white-space:pre-wrap;max-height:220px;overflow-y:auto}

/* 提示词三列等高 */
.prompt-col{display:flex;flex-direction:column}
#categoryList, #subCategoryList, #keywordList{flex:1;min-height:288px}
.prompt-block p{min-height:64px}

/* ==========================================================================
   会员登录 / 注册弹层（includes/auth_modal.html）
   深墨遮罩 + 白卡，配色与按钮完全沿用品牌令牌
   ========================================================================== */
html.auth-lock{overflow:hidden}
.authmodal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:24px}
.authmodal[hidden]{display:none}
.authmodal__mask{position:absolute;inset:0;background:rgba(6,13,22,.62);backdrop-filter:blur(6px);
  opacity:0;transition:opacity var(--t-base)}
.authmodal.is-open .authmodal__mask{opacity:1}
.authmodal__panel{
  position:relative;z-index:1;width:100%;max-width:398px;max-height:calc(100vh - 48px);
  overflow-y:auto;padding:26px 26px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-3);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity var(--t-base),transform var(--t-base);
}
.authmodal.is-open .authmodal__panel{opacity:1;transform:none}
.authmodal__close{position:absolute;right:12px;top:12px;width:28px;height:28px;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:none;border-radius:50%;background:var(--surface-2);color:var(--text-3);
  transition:var(--t-fast)}
.authmodal__close svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round}
.authmodal__close:hover{background:var(--line-2);color:var(--text)}

.authmodal__head{text-align:center;margin-bottom:18px}
.authmodal__rings{display:inline-flex;gap:3px;margin-bottom:12px}
.authmodal__rings i{width:11px;height:11px;border-radius:50%;display:block}
.authmodal__rings i:nth-child(1){background:var(--brand-blue)}
.authmodal__rings i:nth-child(2){background:var(--brand-lime)}
.authmodal__rings i:nth-child(3){background:var(--brand-red)}
.authmodal__head h2{font-size:var(--fs-xl);font-weight:700;color:var(--text);line-height:1.35}
.authmodal__head p{margin-top:6px;font-size:var(--fs-sm);color:var(--text-3);line-height:1.6}

/* 登录 / 注册 切换 */
.authmodal__tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;
  background:var(--surface-2);border-radius:var(--r-pill);margin-bottom:16px}
.authmodal__tab{border:none;background:transparent;cursor:pointer;border-radius:var(--r-pill);
  height:34px;font-size:var(--fs-md);font-weight:600;color:var(--text-2);
  font-family:var(--font-sans);transition:var(--t-fast)}
.authmodal__tab.is-on{background:var(--surface);color:var(--text);
  box-shadow:0 1px 3px rgba(14,22,33,.12)}
.authmodal__tab:hover{color:var(--text)}

.authform{display:none}
.authform.is-on{display:block}
.authfield{display:block;margin-bottom:12px}
.authfield > span:not(.authfield__code){display:block;margin-bottom:6px;font-size:var(--fs-xs);
  letter-spacing:.04em;color:var(--text-3)}
.authfield input{width:100%;height:42px;padding:0 12px;font-size:var(--fs-base);
  font-family:var(--font-sans);color:var(--text);
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:var(--t-fast);outline:none}
.authfield input::placeholder{color:#A9B4C2}
.authfield input:focus{background:var(--surface);border-color:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(var(--rgb-blue),.16)}
.authfield__code{display:flex;gap:8px;align-items:center}
.authfield__code input{flex:1;min-width:0;letter-spacing:.18em;font-family:var(--font-mono)}
.authcode{flex:0 0 auto;height:42px;padding:0 12px;cursor:pointer;white-space:nowrap;
  font-size:var(--fs-sm);font-family:var(--font-sans);font-weight:600;color:var(--link);
  background:var(--tint-blue);border:1px solid var(--tint-blue-2);border-radius:var(--r-sm);
  transition:var(--t-fast)}
.authcode:hover:not(:disabled){background:var(--tint-blue-2)}
.authcode:disabled{cursor:default;color:var(--text-3);background:var(--surface-2);
  border-color:var(--line)}

.authnote{display:none;margin:2px 0 10px;padding:8px 10px;font-size:var(--fs-sm);
  line-height:1.55;border-radius:var(--r-xs);background:var(--surface-2);color:var(--text-2)}
.authnote.is-show{display:block}
.authnote.is-err{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line)}
.authnote.is-ok{background:var(--tint-lime);color:var(--ok);border:1px solid var(--tint-lime-2)}

.authsubmit{width:100%;height:44px;border:none;cursor:pointer;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:700;font-family:var(--font-sans);color:#fff;
  background:linear-gradient(135deg,var(--brand-blue-lt),var(--brand-blue-dp));
  box-shadow:0 8px 20px -12px rgba(var(--rgb-blue),.9);
  transition:var(--t-fast)}
.authsubmit:hover:not(:disabled){background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dp2))}
.authsubmit:disabled{opacity:.65;cursor:default}

.authswitch{margin-top:12px;text-align:center;font-size:var(--fs-sm);color:var(--text-3)}
.authswitch a{color:var(--link);font-weight:600}
.authswitch a:hover{color:var(--link-hover);text-decoration:underline}

.authmodal__foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  text-align:center;font-size:var(--fs-2xs);color:var(--text-3)}
.authmodal__foot a{color:var(--text-2)}
.authmodal__foot a:hover{color:var(--link)}

@media (max-width:680px){
  .authmodal{padding:16px;align-items:flex-end}
  .authmodal__panel{max-width:none;padding:22px 18px 18px;border-radius:16px;
    max-height:calc(100vh - 32px)}
  .authmodal__head h2{font-size:var(--fs-lg)}
}

/* ==========================================================================
   会员中心（/home/ 会员信息 · /home/pro/ 开通 Pro · /home/orders/ 订单管理）
   --------------------------------------------------------------------------
   与首页同一套深墨 Hero + 白卡；三个页面共用 .mem-tabs 做导航，
   不再引入任何第三方后台框架，全部用 tokens 里的颜色 / 圆角 / 阴影。
   ========================================================================== */

/* ---------- Hero：状态行 + 三页导航 ---------- */
.mem-hero{padding-bottom:26px}
.mem-hstatus{display:flex;align-items:center;gap:10px;margin-top:var(--gap-lg);flex-wrap:wrap}
.mem-hbadge{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.02em;
  padding:4px 9px;border-radius:var(--r-pill);
  color:var(--on-ink-3);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.mem-hbadge.is-pro{color:var(--brand-lime);background:rgba(var(--rgb-lime),.16);
  border-color:rgba(var(--rgb-lime),.38)}
.mem-hmeta{font-size:var(--fs-sm);color:var(--on-ink-3)}

.mem-tabs{display:inline-flex;align-items:center;gap:4px;margin-top:var(--gap-xl);
  padding:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10)}
.mem-tabs a{padding:8px 16px;border-radius:var(--r-pill);font-size:var(--fs-sm);
  font-weight:600;color:var(--on-ink-2);transition:var(--t-fast);white-space:nowrap}
.mem-tabs a:hover{color:#fff;background:rgba(255,255,255,.08)}
.mem-tabs a.is-on{background:#fff;color:var(--ink)}

/* ---------- 主体 ---------- */
.mem-body{padding:var(--gap-3xl) 0 var(--gap-5xl)}
.mem-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--gap-xl);align-items:start}
.mem-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--gap-xl);box-shadow:var(--sh-1)}
.mem-card--recent{margin-top:var(--gap-xl)}

.mem-head h2{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em;color:var(--text)}
.mem-head p{margin-top:6px;font-size:var(--fs-sm);color:var(--text-3);line-height:var(--lh-body)}
.mem-head--row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap-lg)}
.mem-more{font-size:var(--fs-sm);font-weight:600;color:var(--link);white-space:nowrap;flex:0 0 auto}
.mem-more:hover{color:var(--link-hover)}

/* ---------- 会员信息：身份卡 ---------- */
.mem-idrow{display:flex;align-items:center;gap:14px}
.mem-avatar{flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--tint-blue);border:1px solid var(--tint-blue-2)}
.mem-avatar i{font-style:normal;font-size:22px;font-weight:700;color:var(--link)}
.mem-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.mem-idmeta{min-width:0}
.mem-idmeta h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-idmeta p{margin-top:4px;font-size:var(--fs-sm);color:var(--text-3);word-break:break-all}
.mem-state{flex:0 0 auto;margin-left:auto;font-size:var(--fs-2xs);font-weight:700;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-2);
  color:var(--text-2);border:1px solid var(--line-2)}
.mem-state.is-pro{background:var(--tint-lime);color:var(--ok);border-color:var(--tint-lime-2)}

.mem-kv{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--gap-lg);
  border-top:1px solid var(--line)}
.mem-kv>div{padding:12px 0;border-bottom:1px solid var(--line)}
.mem-kv dt{font-size:var(--fs-xs);color:var(--text-3)}
.mem-kv dd{margin-top:4px;font-size:var(--fs-base);font-weight:600;color:var(--text)}
.mem-dim{font-size:var(--fs-xs);font-weight:400;color:var(--text-3)}
.mem-num{font-family:var(--font-mono)}
.mem-actions{display:flex;gap:10px;margin-top:var(--gap-lg);flex-wrap:wrap}

/* ---------- 账号设置表单 ---------- */
.mem-form{display:flex;flex-direction:column;gap:13px;margin-top:var(--gap-lg)}
.mem-field{display:flex;flex-direction:column;gap:6px}
.mem-field>span{font-size:var(--fs-xs);color:var(--text-3)}
.mem-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mem-form .input{height:38px;width:100%;padding:0 11px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:var(--fs-base);transition:var(--t-fast)}
.mem-form .input::placeholder{color:var(--text-3)}
.mem-form .input:focus{outline:none;border-color:rgba(var(--rgb-blue),.65);
  box-shadow:0 0 0 3px rgba(var(--rgb-blue),.14)}
.mem-form .input:disabled{background:var(--surface-3);color:var(--text-3);cursor:not-allowed}
.mem-form-foot{display:flex;align-items:center;gap:14px;margin-top:4px}
.mem-msg{flex:1;font-size:var(--fs-sm);color:var(--text-3)}
.mem-msg.is-ok{color:var(--ok)}
.mem-msg.is-bad{color:var(--danger)}

/* ---------- 订单表 ---------- */
.mem-table{display:flex;flex-direction:column;margin-top:var(--gap-lg);border-top:1px solid var(--line)}
.mem-tr{display:grid;grid-template-columns:1.5fr 1.1fr .55fr .7fr 1fr;gap:12px;align-items:center;
  padding:11px 4px;border-bottom:1px solid var(--line);
  font-size:var(--fs-base);color:var(--text-2)}
.mem-tr--head{padding-top:9px;padding-bottom:9px;background:var(--surface-3);
  font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
.mem-table--orders .mem-tr{grid-template-columns:1.4fr 1fr .5fr .55fr .9fr .5fr}
.mem-ono{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-time{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3)}
.mem-op{text-align:right}
.mem-sumline{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-xs);
  color:var(--text-3);flex:0 0 auto}
.mem-sumline b{font-size:var(--fs-xl);color:var(--text)}

.mem-empty{text-align:center;padding:44px 20px;margin-top:var(--gap-lg);
  border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--surface-3)}
.mem-empty p{font-size:var(--fs-base);color:var(--text-3);margin-bottom:14px}

/* ---------- 开通 Pro：单价买断（终身） ---------- */
.pro-layout{display:flex;flex-direction:column;gap:var(--gap-xl)}

.pro-card{position:relative;display:grid;grid-template-columns:1.22fr .78fr;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-2)}
.pro-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--spectrum);z-index:2}

.pro-main{position:relative;padding:34px 34px 30px;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(var(--rgb-blue),.10), transparent 58%),
    radial-gradient(90% 90% at 100% 100%, rgba(var(--rgb-lime),.13), transparent 60%),
    var(--surface)}

.pro-eyebrow{display:inline-flex;align-items:center;font-size:var(--fs-2xs);font-weight:800;
  letter-spacing:.10em;color:var(--link);background:var(--tint-blue);
  border:1px solid var(--tint-blue-2);padding:4px 9px;border-radius:var(--r-pill)}
.pro-title{margin-top:14px;font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;color:var(--text)}
.pro-desc{margin-top:8px;max-width:46em;font-size:var(--fs-base);line-height:var(--lh-loose);color:var(--text-2)}

.pro-price{display:flex;align-items:flex-end;gap:14px;margin-top:22px}
.pro-price__now{display:flex;align-items:baseline;gap:2px;line-height:1;
  font-family:var(--font-mono);font-size:54px;font-weight:800;letter-spacing:-.04em;color:var(--text)}
.pro-price__now i{font-style:normal;font-size:24px;font-weight:700;letter-spacing:0;margin-right:2px}
.pro-price__meta{display:flex;flex-direction:column;gap:7px;padding-bottom:6px}
.pro-price__meta s{font-size:var(--fs-sm);color:var(--text-3);text-decoration-thickness:1px}
.pro-price__meta em{font-style:normal;align-self:flex-start;font-size:var(--fs-2xs);font-weight:700;
  padding:2px 7px;border-radius:4px;background:var(--brand-lime);color:var(--on-lime)}
.pro-price__once{margin-top:10px;font-size:var(--fs-sm);color:var(--text-3)}

.pro-cta{margin-top:24px}
.pro-cta .btn{min-width:220px}
.pro-cta__note{display:flex;align-items:center;gap:6px;margin-top:10px;
  font-size:var(--fs-xs);color:var(--text-3)}
.pro-msg{margin-top:8px;font-size:var(--fs-sm);color:var(--danger);min-height:1px}
.pro-msg:empty{display:none}

.pro-pending{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:18px;padding:10px 13px;border:1px dashed var(--line-2);border-radius:var(--r-sm);
  background:var(--surface-3);font-size:var(--fs-sm);color:var(--text-3);transition:var(--t-fast)}
.pro-pending:hover{border-color:rgba(var(--rgb-blue),.55);background:var(--tint-blue-3)}
.pro-pending b{color:var(--link);font-weight:700;white-space:nowrap}

.pro-side{padding:32px 28px;background:var(--surface-3);border-left:1px solid var(--line)}
.pro-side h3{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em;color:var(--text)}

.mem-blist{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:11px}
.mem-blist li{display:flex;gap:9px;font-size:var(--fs-base);color:var(--text-2);line-height:1.6}
.mem-tick{position:relative;flex:0 0 auto;width:16px;height:16px;margin-top:3px;
  border-radius:50%;background:var(--tint-lime);border:1px solid var(--tint-lime-2)}
.mem-tick::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;
  border:solid var(--ok);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.pro-side__foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--text-3);line-height:1.65}

/* 已开通（终身） */
.pro-card--owned{display:block}
.pro-owned{padding:56px 28px;text-align:center}
.pro-owned__mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;
  border-radius:50%;background:var(--tint-lime);border:1px solid var(--tint-lime-2);color:var(--ok)}
.pro-owned h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;color:var(--text)}
.pro-owned p{margin-top:10px;font-size:var(--fs-base);color:var(--text-3);line-height:var(--lh-loose)}
.pro-owned__actions{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}

/* 常见问题 */
.pro-faq h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;color:var(--text)}
.pro-faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.pro-faq__item{padding:18px 20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);transition:var(--t-fast)}
.pro-faq__item:hover{border-color:var(--line-2);box-shadow:var(--sh-1)}
.pro-faq__item h3{position:relative;padding-left:12px;font-size:var(--fs-md);font-weight:700;color:var(--text)}
.pro-faq__item h3::before{content:"";position:absolute;left:0;top:4px;width:3px;height:12px;
  border-radius:2px;background:var(--brand-blue)}
.pro-faq__item p{margin-top:8px;font-size:var(--fs-sm);line-height:var(--lh-loose);color:var(--text-2)}

/* 会员状态小字 */
.mem-life{display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:2px 7px;
  border-radius:4px;background:var(--tint-lime);color:var(--ok);border:1px solid var(--tint-lime-2)}

/* ---------- 收银台 ---------- */
.pay-card{display:grid;grid-template-columns:330px 1fr;max-width:800px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-2)}
.pay-card__qr{padding:32px 22px;text-align:center;background:var(--tint-blue-3);
  border-right:1px solid var(--line)}
.pay-qr{position:relative;width:232px;height:232px;margin:0 auto;padding:9px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
.pay-qr img{display:block;width:100%;height:100%}
.pay-qr__corner{position:absolute;width:15px;height:15px;border:0 solid var(--brand-blue)}
.pay-qr__corner.tl{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px;border-top-left-radius:4px}
.pay-qr__corner.tr{right:-1px;top:-1px;border-right-width:2px;border-top-width:2px;border-top-right-radius:4px}
.pay-qr__corner.bl{left:-1px;bottom:-1px;border-left-width:2px;border-bottom-width:2px;border-bottom-left-radius:4px}
.pay-qr__corner.br{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px;border-bottom-right-radius:4px}
.pay-qr__tip{margin-top:16px;font-size:var(--fs-md);font-weight:700;color:var(--text-2)}
.pay-qr__sub{margin-top:5px;font-size:var(--fs-xs);color:var(--text-3)}

.pay-card__info{padding:32px 32px 28px}
.pay-tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);font-weight:700;
  padding:3px 8px;border-radius:var(--r-pill);background:var(--tint-lime);
  color:var(--ok);border:1px solid var(--tint-lime-2)}
.pay-card__info h2{margin-top:12px;font-size:var(--fs-xl);font-weight:800;
  letter-spacing:-.01em;color:var(--text)}
.pay-amount{display:flex;align-items:baseline;gap:2px;margin-top:16px;
  font-family:var(--font-mono);font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.pay-amount i{font-style:normal;font-size:19px;font-weight:700;margin-right:2px}
.pay-amount__note{margin-top:6px;font-size:var(--fs-sm);color:var(--text-3)}
.pay-meta{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line)}
.pay-meta>div{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:var(--fs-sm)}
.pay-meta dt{color:var(--text-3);flex:0 0 auto}
.pay-meta dd{color:var(--text-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pay-state{display:flex;align-items:center;gap:8px;margin-top:18px;padding:10px 13px;
  border-radius:var(--r-sm);background:var(--tint-blue);color:var(--link);
  font-size:var(--fs-sm);font-weight:600}
.pay-state__dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:payPulse 1.4s ease-in-out infinite}
.pay-state.is-ok{background:var(--tint-lime);color:var(--ok)}
.pay-state.is-ok .pay-state__dot{animation:none}
@keyframes payPulse{0%,100%{opacity:.3}50%{opacity:1}}

.pay-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.mem-pay-error{max-width:520px;margin:0 auto}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .mem-grid{grid-template-columns:1fr}
  .pro-card{grid-template-columns:1fr}
  .pro-side{border-left:0;border-top:1px solid var(--line);padding:26px 28px}
  .pay-card{grid-template-columns:1fr}
  .pay-card__qr{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:680px){
  .mem-body{padding:var(--gap-xl) 0 var(--gap-3xl)}
  .mem-card{padding:16px}
  .mem-tabs{display:flex;width:100%;margin-top:var(--gap-lg);overflow-x:auto;scrollbar-width:none}
  .mem-tabs::-webkit-scrollbar{display:none}
  .mem-tabs a{flex:1 0 auto;padding:7px 12px;font-size:var(--fs-xs);text-align:center}
  .pro-main{padding:24px 20px 22px}
  .pro-title{font-size:var(--fs-xl)}
  .pro-price__now{font-size:42px}
  .pro-cta .btn{min-width:0;width:100%}
  .pro-faq__grid{grid-template-columns:1fr}
  .pay-card__info{padding:24px 20px}
  .pay-card__qr{padding:24px 18px}
  .pay-qr{width:200px;height:200px}
  .pay-actions .btn{flex:1 1 100%}
  .mem-field-row{grid-template-columns:1fr}
  .mem-idrow{flex-wrap:wrap}
  .mem-state{margin-left:0}
  .mem-kv{grid-template-columns:1fr 1fr}
  .mem-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mem-tr{min-width:560px}
  .mem-table--orders .mem-tr{min-width:640px}
  .mem-form-foot{flex-direction:column;align-items:stretch;gap:10px}
}

/* ==========================================================================
   节点页 · 常见问题（FAQ）
   与 JSON-LD 的 FAQPage 一一对应：既给用户看，也给 AI 搜索抽取引用。
   用的是 .sheet 外壳，所以这里只处理问答本身的排版。
   ========================================================================== */
.faq-list{margin:0;display:flex;flex-direction:column;gap:0}
.faq-item{padding:16px 0;border-bottom:1px solid var(--line, #E8EAF0)}
.faq-item:first-child{padding-top:4px}
.faq-item:last-child{padding-bottom:2px;border-bottom:0}
.faq-item dt{
  font-weight:700;font-size:15px;line-height:1.6;color:var(--ink,#1A1D24);
  margin:0 0 6px;letter-spacing:.01em;
}
.faq-item dt::before{
  content:"Q";display:inline-block;width:20px;height:20px;margin-right:8px;
  font-size:11px;font-weight:800;line-height:20px;text-align:center;
  color:var(--on-lime,#33500A);background:var(--brand-lime,#CCE373);
  border-radius:6px;vertical-align:1px;
}
.faq-item dd{
  margin:0 0 0 28px;font-size:14px;line-height:1.85;
  color:var(--ink-2,#4A5160);
}
@media (max-width:640px){
  .faq-item{padding:14px 0}
  .faq-item dd{margin-left:0}
}

/* 节点页 · 同类节点互链：让 1804 个节点页互相串联，不再是搜索孤岛 */
.sib-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sib-card{
  display:flex;flex-direction:column;gap:3px;padding:12px 14px;
  border:1px solid var(--line,#E8EAF0);border-radius:10px;
  background:var(--surface,#fff);text-decoration:none;
  transition:border-color .16s ease,transform .16s ease;
}
.sib-card:hover{border-color:var(--brand-lime,#CCE373);transform:translateY(-1px)}
.sib-card strong{font-size:14px;font-weight:700;color:var(--ink,#1A1D24);line-height:1.5}
.sib-card .mono{
  font-size:11px;color:var(--ink-3,#8A91A0);
  font-family:var(--font-mono,ui-monospace,monospace);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sib-card em{
  font-style:normal;font-size:12px;line-height:1.6;color:var(--ink-2,#4A5160);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:640px){
  .sib-grid{grid-template-columns:1fr}
}

/* 工作流页 · 使用步骤（与 HowTo 结构化数据对应） */
.step-list{margin:0;padding:0;list-style:none;counter-reset:step}
.step-list li{position:relative;padding:0 0 18px 42px;counter-increment:step}
.step-list li:last-child{padding-bottom:0}
.step-list li::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--on-lime,#33500A);background:var(--brand-lime,#CCE373);
}
.step-list li::after{
  content:"";position:absolute;left:13px;top:30px;bottom:2px;width:1px;
  background:var(--line,#E8EAF0);
}
.step-list li:last-child::after{display:none}
.step-list b{display:block;font-size:14px;font-weight:700;color:var(--ink,#1A1D24);line-height:1.7;margin-bottom:2px}
.step-list span{display:block;font-size:13px;line-height:1.85;color:var(--ink-2,#4A5160)}