/* ============================================================
   万小灵学习站 — 前端实现
   ------------------------------------------------------------
   0. 设计 token
   1. 基础重置
   2. 顶部导航（透明 / 实心 两套变体）
   3. 首页
   4. 文档页（左侧目录 + 正文 + 右侧本页目录）
   5. 课程页
   6. 产品新鲜事页
   7. 案例库页
   8. 页脚 / 通用组件 / 响应式
   ------------------------------------------------------------
   换色只改第 0 节，全站跟着走。
   ============================================================ */

/* ============================================================
   0. 设计 token —— 纸感暖灰 + 品牌青蓝（取自 logo 的青→蓝渐变）
   ============================================================ */
:root{
  /* 文字与纸面 —— 全部改成冷调，和海报的蓝紫底色同温，避免暖灰和冷蓝打架 */
  --ink:#141b2b;            /* 标题 */
  --text:#3d4757;           /* 正文 */
  --muted:#6b7686;          /* 次级说明 */
  --subtle:#9aa4b2;         /* 极弱信息 */
  --line:#e2e9f3;           /* 描边 */
  --line-strong:#cbd6e4;
  --line-soft:#eef3fa;
  --paper:#ffffff;
  --paper-warm:#f8fafd;
  --bg:#f7fafe;             /* 页面底：近白冷调，让海报那种浅蓝卡片能浮出来 */
  --bg-soft:#fbfdff;
  --sidebar:#f8fbff;

  /* 品牌蓝：直接取自海报主色（色相 210° / 225°） */
  /* 品牌色：直接对齐 logo —— logo 是「青 #00C8F8 → 蓝 #0058F8」的渐变，
     主色取其中段，浅色取「主色 + 白」的混合，保证和 logo 同一族。 */
  --brand:#0d8bf2;
  --brand-strong:#0a6ad0;
  --brand-ink:#0b559e;
  --brand-soft:rgba(13,139,242,.14);
  --brand-line:#cfe6fd;
  --brand-line-strong:#a6d3fc;
  --brand-tint:#e8f4fe;
  /* 中性浅灰面板：页头 / 图墙这类"底色块"用它，不带蓝 */
  --panel:#f6f8fa;
  --panel-line:#eef1f5;
  --panel-line-strong:#e3e7ec;
  /* 主按钮：中性深墨。页面已经是灰白底，再压一块饱和蓝会很跳；
     蓝色退到"链接 / 选中 / 标签"这些点上，按钮用深墨最稳。 */
  --btn-grad:linear-gradient(135deg,#26292e 0%,#14171b 100%);
  --btn-grad-h:linear-gradient(135deg,#1a1d21 0%,#0b0d10 100%);
  /* 次按钮：中性灰（页面底色已经是灰白，蓝色底的小按钮现在显得突兀） */
  --btn2-bg:#f3f6fa;
  --btn2-bg-h:#e9eef5;
  --btn2-bd:#e6ebf2;
  --btn2-bd-h:#d7dee7;
  --btn2-fg:#2b3648;

  /* 深蓝（强调块）与亮蓝（海报标题光晕那种青蓝） */
  --deep:#04355e;
  --deep2:#0a5a8c;
  --brand-bright:#00c8f8;
  --brand-bright-soft:#e7f4ff;

  /* 海报上五张功能卡的主题色，给「产物类型」徽标用 */
  --accent-blue:#0d8bf2;
  --accent-pink:#f23c65;
  --accent-orange:#fa6e08;
  --accent-green:#02b56a;
  --accent-purple:#7742ed;

  /* 效果 */
  --shadow-float:0 12px 32px rgba(24,24,27,.08);
  --shadow-card:0 20px 40px -15px rgba(0,0,0,.05),0 0 10px rgba(0,0,0,.01),inset 0 1px 0 rgba(255,255,255,1);
  --shadow-card-h:0 26px 50px -18px rgba(16,90,180,.16),0 0 10px rgba(0,0,0,.02);
  --ease:cubic-bezier(.16,1,.3,1);

  /* 尺寸 */
  --header-h:56px;
  --radius:16px;
  --radius-lg:20px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--text);
  font-family:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.7;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  /* 用 clip 而不是 hidden：hidden 会把 body 变成滚动容器，吸顶导航在里面会失效 */
  overflow-x:clip;
  font-feature-settings:"tnum" 1;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 滚动进场。只在 JS 可用时才隐藏初始状态（html.js 由页面内的内联脚本加上），
   否则脚本挂了整页内容会永久停在 opacity:0 上——宁可没有动画，也不能白屏。 */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ============================================================
   2. 顶部导航
   ------------------------------------------------------------
   .menubar            —— 首页：绝对定位悬浮在 banner 之上，白字
   .menubar.solid      —— 子页面：sticky 实心毛玻璃，深字
   ============================================================ */
.menubar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:36px;
  height:56px;padding:0 28px;background:transparent;
}
/* 首页导航也固定在顶部（和其他页一致）：
   sticky 让它随滚动停住，负的 margin-bottom 抵消它占的高度，
   这样 hero 仍然从 y=0 开始、导航浮在上面。 */
.menubar:not(.solid){position:sticky;top:0;margin-bottom:-56px}
/* 滚动之后给它一块底色，否则文字会压在内容上 */
.menubar.is-stuck{
  background:rgba(252,252,252,.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.menubar .brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:700;
  color:var(--ink);white-space:nowrap}
/* 品牌标记：logo 是蓝白配色，统一装进一个白色圆角胶囊里——
   首页 banner 是深色、子页面导航是浅底，一处样式两种底色都能用。 */
.menubar .brand .brand-mark{display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:32px;height:32px;padding:4px;border-radius:10px;background:#fff;
  box-shadow:0 1px 3px rgba(16,60,120,.14),0 0 0 1px rgba(16,60,120,.1)}
.menubar .brand .brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.menubar .brand .brand-name{letter-spacing:-.01em}
.menubar .brand .brand-sub{font-size:13px;font-weight:500;color:var(--muted)}
.menubar .brand .sep{width:1px;height:1.1em;background:var(--line-strong)}
.menubar .nav{display:flex;align-items:center;gap:6px;height:100%}
.menubar .nav-item{position:relative;height:100%;display:flex;align-items:center}
.menubar .nav-link{display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;
  font-size:15px;font-weight:500;color:var(--text);white-space:nowrap;
  transition:background .2s,color .2s}
.menubar .nav-item:hover>.nav-link{background:var(--btn2-bg);color:var(--ink)}
.menubar .nav-caret{width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.menubar .nav-item:hover .nav-caret{transform:rotate(225deg) translateY(-1px)}
.menubar .dropdown{position:absolute;top:calc(100% - 6px);left:0;min-width:152px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-float);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.menubar .nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.menubar .dropdown a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink);white-space:nowrap}
.menubar .dropdown a:hover{background:var(--btn2-bg);color:var(--ink)}

/* 头部右侧的"进入万小灵"：和左侧导航项同一套文字样式（不是按钮），
   只靠 margin-left:auto 推到最右 */
.enter-wrap{display:contents}
.menubar .enter-btn{margin-left:auto;display:flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:8px;white-space:nowrap;
  font-size:15px;font-weight:500;color:var(--text);text-shadow:none;
  transition:background .2s,color .2s}
/* 图标走 currentColor，颜色永远跟文字一致（悬停变深时一起变） */
.menubar .enter-btn .ar-i{width:19px;height:19px;flex:none;display:block;margin-top:1px}
.menubar .enter-btn:hover{background:var(--btn2-bg);color:var(--ink)}
@media(max-width:760px){
  .menubar .enter-btn{font-size:14px;padding:6px 10px;margin-left:auto}
}
/* —— 子页面实心导航 —— */
.menubar.solid{
  position:sticky;top:0;
  background:rgba(252,252,252,.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.menubar.solid .brand{color:var(--ink);text-shadow:none}
.menubar.solid .brand .sep{background:var(--line-strong)}
.menubar.solid .brand .brand-sub{color:var(--muted)}
.menubar.solid .nav-link{color:var(--text);text-shadow:none}
.menubar.solid .nav-item:hover>.nav-link{background:var(--btn2-bg);color:var(--ink)}
.menubar.solid .nav-link.active{color:var(--ink);font-weight:700}

/* 汉堡按钮（文档页侧栏开关） */
.hdr-burger{display:none;width:34px;height:34px;flex:none;border:1px solid var(--line-strong);
  border-radius:8px;background:#fff;align-items:center;justify-content:center}
.hdr-burger span,.hdr-burger span::before,.hdr-burger span::after{
  content:'';display:block;width:16px;height:1.7px;background:var(--ink);position:relative;transition:.2s}
.hdr-burger span::before{position:absolute;top:-5px}
.hdr-burger span::after{position:absolute;top:5px}

/* ============================================================
   3. 首页
   ============================================================ */
.home-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.home-bg::before,.home-bg::after{content:'';position:absolute;border-radius:50%;filter:blur(120px);opacity:.2}
.home-bg::before{top:-160px;left:-120px;width:520px;height:520px;background:radial-gradient(circle,#8fd8ff,transparent 70%)}
.home-bg::after{top:-120px;right:-140px;width:560px;height:560px;background:radial-gradient(circle,#a9d6fd,transparent 70%);filter:blur(100px)}

/* —— Hero banner：浅蓝渐变 + 柔光晕 + 底部渐隐到白 ——
   原来是深海军蓝，和全站浅色调不统一；换成浅色后标题改深字、导航也跟着改深色，
   行动按钮从「白底」换成「品牌蓝底」，在浅底上才有足够的份量。 */
/* 高度由内容撑开 + min-height 兜底，不再写死 svh：
   写死高度时，1366×768 这类矮屏（44svh≈338px）装不下标题 + 描述 + 按钮，
   内容会顶出 banner 钻到导航底下；超高视口又会把 banner 拉成一整块空深色。
   padding-top 让出绝对定位导航的高度，底部留给云层渐隐。 */
.hero-sky{position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:min(44svh,460px);padding:104px 0 88px;overflow:hidden;
  background:radial-gradient(900px 480px at 18% -10%,#f3faff 0%,#e2f2fe 45%,#c9e4fb 100%)}
.hero-sky::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(420px 260px at 78% 16%,rgba(0,200,248,.26),transparent 70%),
    radial-gradient(560px 320px at 22% 92%,rgba(30,150,245,.2),transparent 72%);
  filter:blur(10px)}
/* 细网格底纹，给深色块一点质感 */
.hero-sky::after{content:'';position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(rgba(10,100,190,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(10,100,190,.07) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%)}
/* Banner 背景图（后台上传，空则用渐变） */
.hero-banner{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-banner:empty{display:none}
.hero-banner img{width:100%;height:100%;object-fit:cover;display:block}
.hero-banner::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.4) 52%,rgba(255,255,255,.86) 100%)}.cloud-fade{position:absolute;left:-4%;right:-4%;bottom:-1px;height:30%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 55%,rgba(255,255,255,.92) 85%,#fff 100%)}
.hero-cap{position:relative;z-index:4;left:auto;right:auto;bottom:auto;text-align:center;padding:0 20px}
.hero-cap .kick{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:5px 14px;border-radius:99px;font-size:12px;font-weight:650;letter-spacing:.04em;
  color:var(--brand-ink);background:rgba(255,255,255,.72);border:1px solid var(--brand-line)}
.hero-cap .kick i{width:6px;height:6px;border-radius:50%;background:#26292e;box-shadow:0 0 0 3px rgba(13,139,242,.18)}
.hero-cap h1{font-size:clamp(24px,3.6vw,40px);font-weight:800;letter-spacing:-.03em;
  color:var(--ink);line-height:1.22}
.hero-cap h1 em{font-style:normal;color:var(--brand)}  /* 深蓝标题 + 亮蓝强调，同海报的"深浅两级蓝" */
.hero-cap p{margin:12px auto 0;max-width:640px;font-size:clamp(13px,1.5vw,15px);
  color:#4c5c72;line-height:1.7}
.hero-cap .acts{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.hero-cap .acts a{display:inline-flex;align-items:center;gap:7px;padding:11px 24px;border-radius:99px;
  font-size:14px;font-weight:700;transition:transform .2s var(--ease),box-shadow .2s}
.hero-cap .acts .p{background:var(--btn-grad);color:#fff;box-shadow:0 10px 26px rgba(14,22,38,.26)}
.hero-cap .acts .p:hover{transform:translateY(-2px);background:var(--btn-grad-h);box-shadow:0 14px 32px rgba(14,22,38,.34)}
.hero-cap .acts .s{color:var(--btn2-fg);border:1px solid var(--btn2-bd);background:#fff}
.hero-cap .acts .s:hover{background:var(--btn2-bg);border-color:var(--btn2-bd-h);transform:translateY(-2px)}

/* —— 首页内容容器与板块标题 —— */
.home{max-width:1120px;margin:0 auto;padding:34px 22px 80px}
.home-sec{margin-top:52px}
.home-sec:first-child{margin-top:8px}
/* 板块标题恢复中性墨色，改用左侧的彩色竖条区分板块——
   四个板块分别取海报的蓝/紫/橙/绿，标题字保持可读的深色 */
.sec-title{display:flex;align-items:baseline;gap:10px;font-size:21px;font-weight:730;
  letter-spacing:-.02em;color:var(--ink);position:relative;padding-left:14px}
.sec-title::before{content:'';position:absolute;left:0;top:.22em;width:5px;height:1.02em;
  border-radius:3px;background:var(--brand)}
.home-sec:nth-of-type(1) .sec-title::before{background:#26292e}
.home-sec:nth-of-type(2) .sec-title::before{background:#26292e}
.home-sec:nth-of-type(3) .sec-title::before{background:#26292e}
.home-sec:nth-of-type(4) .sec-title::before{background:#26292e}
.sec-title .sec-stage{font-size:13px;font-weight:650;color:var(--btn2-fg);background:var(--btn2-bg);
  border:1px solid var(--brand-line);border-radius:6px;padding:3px 9px;transform:translateY(-2px)}
.sec-title .sec-stage::after{content:'｜';margin-left:9px;color:var(--brand-line)}
.sec-title .more{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);
  display:inline-flex;align-items:center;gap:4px;transition:color .18s}
.sec-title .more:hover{color:var(--brand-strong)}
.sec-sub{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.7;max-width:760px}
.block-sub{margin:22px 0 4px;font-size:14.5px;font-weight:680;color:var(--ink);display:flex;align-items:center;gap:8px}
.block-sub .sdot{width:7px;height:7px;border-radius:2px;background:#26292e;flex:none}

.grid2{margin-top:20px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.grid3{margin-top:20px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.grid5{margin-top:20px;display:grid;gap:14px;grid-template-columns:repeat(5,1fr)}

/* —— 顶部：精选视频轮播 + 热门内容 —— */
.home-top{margin-top:6px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:stretch}
.card{background:#fff;border:1px solid #fff;border-radius:20px;
  box-shadow:var(--shadow-card);
  transition:box-shadow .3s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.card:hover{border-color:#e2e7ee;box-shadow:var(--shadow-card-h)}
.card-head{display:flex;align-items:center;gap:9px;padding:16px 20px;font-size:15px;font-weight:700;
  color:var(--ink);border-bottom:1px solid var(--line)}
.card-head .more{margin-left:auto;font-size:12.5px;font-weight:560;color:var(--muted)}

.video-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.video-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;flex:1;min-height:0}
.carousel{position:relative;min-width:0;aspect-ratio:16/9;background:#0c1622;overflow:hidden;border-radius:20px 0 0 20px}
.carousel-track{position:absolute;inset:0;display:flex;transition:transform .55s cubic-bezier(.5,.05,.2,1)}
.cslide{position:relative;flex:0 0 100%;width:100%;height:100%;display:block;overflow:hidden}
.cslide img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.cslide:hover img{transform:scale(1.035)}
.cslide::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,34,0) 42%,rgba(6,20,34,.72) 100%)}
.cslide-cap{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;color:#fff;
  font-size:16px;font-weight:700;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.45);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s}
.cslide.is-active .cslide-cap{opacity:1;transform:translateY(0)}

/* 右侧播放目录 */
.playlist-col{position:relative;min-height:0;border-left:1px solid var(--line)}
.playlist{position:absolute;inset:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:6px}
.playlist::-webkit-scrollbar{width:6px}
.playlist::-webkit-scrollbar-thumb{background:#d3dbe6;border-radius:3px}
.playlist::-webkit-scrollbar-thumb:hover{background:#bcc7d6}
.playlist::-webkit-scrollbar-track{background:transparent}
.playlist{scrollbar-width:thin;scrollbar-color:#d3dbe6 transparent}
.playlist-item{position:relative;isolation:isolate;flex:0 0 auto;min-height:44px;
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;
  border-radius:11px;background:none;font-size:13.5px;color:var(--ink);text-align:left;
  white-space:nowrap;overflow:hidden;transition:background .18s,color .18s}
.playlist-item::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(90deg,rgba(38,41,46,.16),rgba(38,41,46,.07));
  transform:scaleX(0);transform-origin:left center}
.playlist-item.active.progressing::before{animation:playlistLoad 4.5s linear forwards}
.video-body.is-paused .playlist-item.active::before{animation-play-state:paused}
@keyframes playlistLoad{to{transform:scaleX(1)}}
.playlist-item>:not(.dot){overflow:hidden;text-overflow:ellipsis}
.playlist-item:hover{background:var(--btn2-bg)}
.playlist-item.active{background:#eef1f5;color:var(--ink);font-weight:700}
.playlist-item .dot{flex:none;width:6px;height:6px;border-radius:50%;background:#c3cfdd;transition:background .18s}
.playlist-item.active .dot{background:#26292e}

/* 热门内容卡：低饱和浅色 + 轻微 3D 跟随 */
.rank-card{position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid #e6ebf2;border-radius:18px;
  background:#fff;color:var(--ink);
  box-shadow:0 14px 30px rgba(31,60,110,.08),inset 0 1px 0 rgba(255,255,255,.9);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .18s ease-out,box-shadow .28s var(--ease),border-color .28s var(--ease)}
.rank-card::before{content:'';position:absolute;inset:-55% -24% auto 30%;height:210px;
  background:radial-gradient(circle,rgba(120,130,145,.09),transparent 67%);pointer-events:none}
.rank-card:hover{border-color:#dbe1e9;box-shadow:0 20px 40px rgba(31,60,110,.12),inset 0 1px 0 rgba(255,255,255,.95)}
.rank-card .card-head{position:relative;z-index:1;display:flex;align-items:center;gap:9px;
  padding:18px 18px 13px;border-bottom:0;color:#20304a;font-size:17px;font-weight:700;letter-spacing:-.02em}
.rank-period{display:inline-flex;align-items:center;gap:6px;margin-left:2px;
  color:var(--muted);font-size:10px;font-weight:620;letter-spacing:.06em;text-transform:uppercase}
.rank-period::before{content:'';width:5px;height:5px;border-radius:50%;background:#26292e;
  box-shadow:0 0 0 4px rgba(38,41,46,.09)}
.rank-head-icon{display:grid;place-items:center;width:28px;height:28px;margin-left:auto;
  border:1px solid #e6ebf2;border-radius:50%;color:var(--text);background:#f7f9fb}
.rank-head-icon svg{width:14px;height:14px}
.rank{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:space-between;
  padding:0 14px 13px;gap:2px}
.rank-row{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:9px;
  min-height:45px;padding:7px 8px;border-radius:10px;color:inherit;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.rank-row:hover{padding-left:8px;background:#f2f4f7;transform:translateX(2px)}
.rank-no{width:22px;height:22px;border-radius:5px;background:#eef1f5;
  color:var(--muted);font-size:11px;font-weight:720;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.rank-row:first-child .rank-no{background:#26292e;color:#fff}
.rank-row:hover .rank-no{background:#e2e7ee;color:var(--ink)}
.rank-title{display:block;color:#26334a;font-size:13px;font-weight:580;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.rank-row:hover .rank-title{color:var(--ink)}
.rank-heat{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:10.5px;font-weight:650;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-heat svg{width:11px;height:11px;stroke:currentColor;fill:none}
.rank-row:nth-child(4) .rank-heat,.rank-row:nth-child(5) .rank-heat{color:var(--subtle)}

/* —— 知识库三卡：上图下文 —— */
.kb-cards{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (min-width:1100px){
  .kb-cards[data-cols="1"]{grid-template-columns:minmax(0,420px);justify-content:center}
  .kb-cards[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
  .kb-cards[data-cols="4"]{grid-template-columns:repeat(4,1fr);gap:16px}
  .kb-cards[data-cols="4"] .kb-title{font-size:15px}
}
.kb-card{display:flex;flex-direction:column;padding:8px;border:1px solid #fff;border-radius:22px;
  overflow:hidden;background:#fff;box-shadow:var(--shadow-card);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.kb-card:hover{box-shadow:var(--shadow-card-h);transform:translateY(-2px);border-color:var(--brand-line)}
.kb-cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#eff5fc}
.kb-cover img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.kb-card:hover .kb-cover img{transform:scale(1.035)}
.kb-body{display:flex;flex-direction:column;flex:1;padding:12px 12px 8px}
.kb-title{font-size:16.5px;font-weight:760;color:var(--ink);letter-spacing:-.01em;margin:0 0 6px}
.kb-list{display:flex;flex-direction:column}
.kb-list a{display:flex;align-items:center;gap:10px;padding:6px 2px;font-size:13.5px;
  color:var(--text);transition:color .18s var(--ease)}
.kb-list a:hover{color:var(--brand-ink)}
.kb-list .n{flex:none;width:20px;height:20px;border-radius:6px;background:var(--btn2-bg);color:var(--btn2-fg);ink);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.kb-list .tt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-list .ar{flex:none;color:var(--subtle);font-size:12px;opacity:0;transform:translateX(-4px);
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.kb-list a:hover .ar{opacity:1;transform:translateX(0);color:var(--ink)}
.kb-more{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 14px;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--btn2-fg);
  background:var(--btn2-bg);border:1px solid var(--btn2-bd);border-radius:10px;
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.kb-more:hover{background:var(--btn2-bg-h);border-color:var(--btn2-bd-h);transform:translateY(-1px)}
.kb-more .ar{transition:transform .2s var(--ease)}
.kb-more:hover .ar{transform:translateX(3px)}

/* —— 场景实战 tile —— */
.tile{display:flex;flex-direction:column;padding:8px;background:#fff;border:1px solid #fff;
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.tile:hover{transform:translateY(-3px);border-color:var(--brand-line);box-shadow:var(--shadow-card-h)}
.tile-cover{position:relative;height:118px;overflow:hidden;border-radius:12px;background:#eef4fb}
.tile-cover-sm{height:auto;aspect-ratio:16/9}
.tile-cover img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.tile:hover .tile-cover img{transform:scale(1.05)}
.tile-title{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 8px 6px;font-size:14px;font-weight:620;color:var(--ink);text-align:center}
.gbar-arrow{color:var(--brand-strong);font-size:13px;opacity:0;transform:translateX(-4px);
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.tile:hover .gbar-arrow{opacity:1;transform:translateX(0)}

/* —— 长条内容卡（上新 / 课程入口）—— */
.wide{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid #fff;
  border-radius:18px;overflow:hidden;padding:8px;padding-right:22px;margin-top:20px;
  box-shadow:var(--shadow-card);
  transition:border-color .25s,box-shadow .25s,transform .25s}
.wide:hover{border-color:var(--brand-line);box-shadow:var(--shadow-card-h);transform:translateY(-2px)}
.wide-cover{position:relative;width:340px;aspect-ratio:16/9;flex-shrink:0;background:#eef4fb;
  border-radius:13px;overflow:hidden}
.wide-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wide-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:20px 0;min-width:0}
.wide-title{font-size:16px;font-weight:600;color:#1e2732}
.wide-desc{font-size:13.5px;color:var(--muted)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);
  font-size:14px;font-weight:560;border:1px solid var(--line-strong);border-radius:10px;
  padding:10px 18px;flex-shrink:0;transition:border-color .25s,transform .25s}
.btn-ghost:hover{border-color:var(--btn2-bd-h);transform:translateY(-1px)}
/* 上新横幅：封面左上角 NEW 标 */
.whatsnew-banner .wide-cover::after{content:'NEW';position:absolute;top:10px;left:10px;
  padding:4px 12px;border-radius:999px;background:linear-gradient(90deg,var(--brand-bright),var(--brand));
  color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  box-shadow:0 4px 12px rgba(26,109,255,.4)}
.whatsnew-banner .wide-title{font-size:17px;font-weight:700}
.whatsnew-banner .btn-ghost{margin-left:auto}

/* —— 课程直播小卡 —— */
.live-mini{display:flex;flex-direction:column;padding:8px;border:1px solid #fff;border-radius:20px;
  overflow:hidden;background:#fff;box-shadow:var(--shadow-card);color:inherit;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.live-mini:hover{box-shadow:var(--shadow-card-h);transform:translateY(-3px);border-color:var(--brand-line)}
.lm-thumb{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:13px;background:#eff5fc}
.lm-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.live-mini:hover .lm-thumb img{transform:scale(1.04)}
.lm-thumb::after{content:'';position:absolute;inset:0;background:rgba(6,20,40,0);transition:background .25s var(--ease)}
.live-mini:hover .lm-thumb::after{background:rgba(6,20,40,.12)}
.lm-ep{position:absolute;top:10px;left:10px;z-index:2;font-size:11px;font-weight:650;color:#fff;
  background:rgba(6,20,40,.5);border:1px solid rgba(255,255,255,.32);border-radius:999px;
  padding:2px 9px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lm-play{position:relative;z-index:2;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.4);transition:transform .25s var(--ease)}
.live-mini:hover .lm-play{transform:scale(1.1)}
.lm-play svg{width:19px;height:19px;margin-left:2px;fill:var(--brand-strong)}
.lm-body{padding:12px 10px 8px;display:flex;flex-direction:column;gap:6px}
.lm-title{font-size:15px;font-weight:720;color:var(--ink);line-height:1.4}
.lm-desc{font-size:13px;color:var(--muted);line-height:1.65}

/* —— 案例图墙（逐行交叉横向滚动）——
   每一行是一条独立的滚动轨道：相邻行方向相反、各行速度与相位都不同，
   所以任意两行都不会同拍（不是"整面墙一起平移"）。
   纯 CSS 动画驱动，不依赖 JS 或 rAF，任何人打开都在动 ——
   注意本文件末尾 reduced-motion 那段对 .wall-row 做了显式豁免。 */
.case-wall{position:relative;height:560px;border-radius:20px;overflow:hidden;
  background:var(--panel);
  border:1px solid var(--panel-line);perspective:1200px}
/* 四边往浅蓝底上收边，让图块从边缘"化"进背景，而不是被硬切 */
.case-wall::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(234,243,255,.96),transparent 24%),
    linear-gradient(to right,#e2eefc,rgba(226,238,252,0) 12%,rgba(226,238,252,0) 88%,#e2eefc)}
.wall-viewport{position:absolute;inset:-8% 0;display:flex;align-items:center;overflow:hidden}
/* 只保留 rotateX 的纵深：面内再斜切会让横排看起来像"斜着跑"，读不出横向 */
.wall-board{display:flex;flex-direction:column;gap:16px;flex:none;width:max-content;
  transform:perspective(1200px) rotateX(10deg)}
/* 一条轨道 = 一组图块 + 一份复制品；translateX(-50%) 正好走完一组，接回起点无跳变 */
.wall-row{display:flex;flex:none;width:max-content;
  animation:wallScroll var(--dur,44s) linear infinite;
  animation-delay:var(--delay,0s);
  will-change:transform}
/* 反向行：从 -50% 走到 0，视觉上就是往右跑，和相邻行交叉 */
.wall-row.rev{animation-direction:reverse}
@keyframes wallScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 图块改成白卡片：浅色墙面上用投影托起，不再压深色蒙层 */
.wall-tile{position:relative;flex:none;width:184px;margin-right:16px;aspect-ratio:640/346;
  border-radius:11px;overflow:hidden;background:#fff;
  box-shadow:0 10px 24px -12px rgba(16,60,120,.42),0 2px 6px rgba(16,60,120,.1);
  outline:1px solid rgba(20,64,130,.1)}
.wall-tile img{width:100%;height:100%;object-fit:cover;object-position:top left;
  pointer-events:none;-webkit-user-drag:none;user-select:none}
/* 浅底上不要再糊白色蒙层（会把截图洗灰），只用一点点底部加深把卡片"坐"在背景上 */
.wall-tile::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(18,52,104,.12),rgba(18,52,104,0) 46%)}

/* 文案：浅底上换成深色，底部用同色系浅蓝渐隐托住 */
.case-wall-cap{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none;
  padding:34px 26px 22px;
  background:linear-gradient(to top,#e6f0fd 8%,rgba(230,240,253,.96) 48%,rgba(230,240,253,0));
  color:var(--ink)}
.case-wall-cap .t{font-size:19px;font-weight:800;letter-spacing:-.01em}
.case-wall-cap .d{margin-top:6px;font-size:13.5px;color:#55677f;max-width:560px;line-height:1.7}
.case-wall-cap .go{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  background:var(--btn-grad);color:#fff;font-weight:800;font-size:13.5px;padding:9px 18px;
  border-radius:99px;box-shadow:0 8px 22px rgba(14,22,38,.24);transition:transform .2s,box-shadow .2s}
.case-wall-cap .go:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(6,26,58,.42)}

/* ============================================================
   4. 文档页
   ============================================================ */
.shell-doc{display:grid;grid-template-columns:262px minmax(0,1fr);align-items:start;
  max-width:1400px;margin:0 auto}
.side{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));overflow-y:auto;
  background:var(--sidebar);padding:22px 14px 40px;border-right:1px solid var(--line)}
.side-group{margin-bottom:4px;
  --c:#0d8bf2; --cbg:#e6f2ff; --ct:#0b63b8}
.side-group:nth-of-type(3n+1){--c:#0d8bf2; --cbg:#e6f2ff; --ct:#0b63b8}
.side-group:nth-of-type(3n+2){--c:#9160e2; --cbg:#f2ecfd; --ct:#6b3fbf}
.side-group:nth-of-type(3n+3){--c:#31a97c; --cbg:#e7f8f1; --ct:#1b8a64}
.side-glabel{width:100%;display:flex;align-items:center;gap:8px;padding:9px 10px;border:0;border-radius:10px;
  background:transparent;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;
  text-align:left;transition:background .15s}
.side-glabel:hover{background:#f2f7fd}
.side-glabel .dot{width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}
.side-gname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-gno{font-size:11px;font-weight:700;color:var(--c);opacity:.45;letter-spacing:.5px;font-variant-numeric:tabular-nums;flex:none}
.side-caret{position:relative;width:14px;height:14px;flex:none;color:#9db3c9;transition:transform .18s;transform:rotate(-90deg)}
.side-caret::before{content:'';position:absolute;left:3px;top:3px;width:6px;height:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)}
.side-group.is-open .side-caret{transform:rotate(0deg)}
.side-items{display:none;padding:2px 0 6px}
.side-group.is-open .side-items{display:block}
.side-link{display:block;padding:8px 12px 8px 26px;border-radius:9px;font-size:13px;line-height:1.5;
  color:#4a5568;text-decoration:none;transition:background .15s,color .15s}
.side-link:hover{background:var(--cbg);color:var(--ct)}
.side-link.active{background:var(--cbg);color:var(--ct);font-weight:650}
.side-link-cat{color:#7b8b9c;font-size:12.5px}
.side-empty{display:block;padding:6px 12px 8px 26px;font-size:12px;color:#aab6c4}
.side-sub{display:block;padding:9px 10px 4px 18px;font-size:12px;font-weight:650;color:#8b98a8;
  letter-spacing:.2px;cursor:default;user-select:none}
.side-sub.on{color:var(--ct)}
.side-link.is-sub{padding-left:34px;font-size:12.5px}
.side-scrim{display:none}

.doc-wrap{display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:40px;
  padding:34px 44px 90px;max-width:1180px}
.doc-main{min-width:0}
.doc-banner{display:block;width:100%;aspect-ratio:1702/522;object-fit:cover;
  border-radius:16px;margin-bottom:22px;border:1px solid var(--line)}
.crumb{font-size:12.5px;color:#8b98a8;margin-bottom:10px;letter-spacing:.2px}
.crumb::before{content:'';display:inline-block;width:3px;height:12px;border-radius:2px;
  background:var(--brand,#0d8bf2);vertical-align:-2px;margin-right:8px}
.crumb a:hover{color:var(--brand-ink)}
.doc-title{font-size:30px;font-weight:760;letter-spacing:-.03em;color:var(--ink);
  line-height:1.25;margin-bottom:8px}
.doc-lead{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:8px}
.doc-toc{position:sticky;top:calc(var(--header-h) + 28px);align-self:start;height:fit-content;
  max-height:calc(100svh - var(--header-h) - 60px);overflow-y:auto}
.doc-toc .toc-head{font-size:12px;font-weight:700;color:var(--subtle);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:10px}
.doc-toc a{display:block;font-size:13px;line-height:1.5;color:var(--muted);
  padding:5px 0 5px 12px;border-left:2px solid var(--line);transition:color .18s,border-color .18s}
.doc-toc a.lv3{padding-left:24px}
.doc-toc a:hover{color:var(--ink);border-left-color:#cbd5e1}
.doc-toc a.active{color:var(--ink);border-left-color:var(--ink);font-weight:600}

/* 正文排版 */
.prose{font-size:15px;line-height:1.85;color:var(--text)}
.prose h1,.prose h2,.prose h3,.prose h4{color:var(--ink);letter-spacing:-.02em;font-weight:700;
  scroll-margin-top:calc(var(--header-h) + 20px)}
.prose h1{font-size:23px;margin:2.4rem 0 1rem}
.prose h2{font-size:20px;margin:2.6rem 0 1rem;padding-bottom:.4em;border-bottom:1px solid var(--line)}
.prose h3{font-size:17px;margin:1.9rem 0 .7rem}
.prose h4{font-size:15.5px;margin:1.5rem 0 .6rem}
.prose p{margin:.9rem 0}
.prose ul,.prose ol{margin:.9rem 0;padding-left:1.4em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:.35rem 0}
.prose strong{color:var(--ink);font-weight:650}
.prose a{color:var(--brand-ink);text-decoration:underline;
  text-decoration-color:rgba(20,80,170,.35);text-underline-offset:3px}
.prose a:hover{color:var(--brand-strong);text-decoration-color:var(--brand-strong)}
.prose hr{border:none;border-top:1px solid var(--line);margin:2rem 0}
.prose :not(pre)>code{background:#f4f7fc;border:1px solid #dde5f0;border-radius:4px;
  padding:2px 5px;font-size:.88em;color:#3d4757;font-family:'SFMono-Regular',Consolas,monospace}
.prose pre{background:#f6f9fd;border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;overflow-x:auto;margin:1.2rem 0;font-size:13px;line-height:1.7}
.prose pre code{font-family:'SFMono-Regular',Consolas,monospace;color:#2f3844}
.prose blockquote{border-left:3px solid var(--brand);background:var(--paper-warm);
  padding:.6rem 1rem;margin:1.2rem 0;border-radius:0 8px 8px 0;color:var(--muted)}
.prose .doc-shot{margin:1.1rem 0}
.prose .doc-shot img{display:block;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 6px 20px -12px rgba(24,50,90,.28)}

/* 表格 */
.prose .table-wrap{overflow-x:auto;margin:1.2rem 0;border:1px solid var(--line);border-radius:12px}
.prose table{width:100%;border-collapse:collapse;font-size:13.6px}
.prose th,.prose td{padding:10px 14px;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);text-align:left;vertical-align:top}
.prose th:last-child,.prose td:last-child{border-right:none}
.prose tr:last-child td{border-bottom:none}
.prose th{background:var(--paper-warm);color:var(--ink);font-weight:650;white-space:nowrap}
.prose tbody tr:hover{background:#fbfbf9}

/* 提示块 */
.callout{display:flex;gap:12px;background:var(--brand-tint);border:1px solid var(--brand-line);
  border-radius:12px;padding:14px 16px;margin:1.4rem 0}
.callout .ico{flex:none;width:22px;height:22px;border-radius:50%;background:#26292e;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.callout .ct{font-size:15px;line-height:1.7;color:var(--ink);font-weight:550}
.callout .ct strong{color:var(--brand-strong)}

/* 示例卡 */
.demo{border:1px solid var(--line);border-radius:14px;background:var(--paper-warm);
  padding:16px 18px;margin:1.3rem 0}
.demo-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;
  color:var(--brand-ink);margin-bottom:10px}
.demo-head .dico{width:18px;height:18px;border-radius:5px;background:var(--btn2-bg);
  border:1px solid var(--brand-line);display:flex;align-items:center;justify-content:center;font-size:11px}
.demo-prompt{font-size:13.5px;line-height:1.7;color:var(--text);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  white-space:pre-wrap;word-break:break-word}
.demo-note{font-size:12.5px;color:var(--subtle);margin-top:8px}
.prose a.demo-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  background:var(--btn-grad);color:#fff;font-size:13.5px;font-weight:600;border-radius:9px;
  padding:9px 16px;text-decoration:none;transition:background .2s,transform .2s}
.prose a.demo-btn:hover{background:var(--btn-grad-h);transform:translateY(-1px);color:#fff}

/* ============================================================
   5. 课程页
   ============================================================ */
.course-shell{display:block;max-width:1180px;margin:0 auto}
.course-shell .doc-wrap{grid-template-columns:minmax(0,1fr);max-width:none;margin:0 auto}
.series-head{display:flex;align-items:baseline;gap:12px;margin:2.6rem 0 1.1rem;flex-wrap:wrap}
.series-head .idx{font-size:13px;font-weight:700;color:var(--btn2-fg);background:var(--btn2-bg);
  border:1px solid var(--brand-line);border-radius:999px;padding:3px 12px;flex:none}
.series-head h2{font-size:21px;font-weight:760;color:var(--ink);letter-spacing:-.02em;margin:0}
.series-head .cnt{font-size:12.5px;color:var(--subtle)}

.live-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:8px}
.live-card{display:flex;flex-direction:column;padding:8px;border:1px solid #fff;border-radius:22px;
  overflow:hidden;background:#fff;box-shadow:var(--shadow-card);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.live-card:hover{box-shadow:var(--shadow-card-h);transform:translateY(-2px);border-color:var(--brand-line)}
.live-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:14px;background:#f2f5f9}
.live-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.live-card:hover .live-thumb img{transform:scale(1.03)}
.live-thumb::after{content:'';position:absolute;inset:0;background:rgba(6,20,40,0);transition:background .25s var(--ease)}
.live-card:hover .live-thumb::after{background:rgba(6,20,40,.12)}
.live-play{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.45);
  transition:transform .25s var(--ease),background .25s var(--ease)}
.live-card:hover .live-play{transform:translate(-50%,-50%) scale(1.09);background:#fff}
.live-play svg{width:22px;height:22px;margin-left:3px;fill:var(--brand-strong)}
.live-ep{position:absolute;z-index:2;top:12px;left:12px;font-size:11.5px;font-weight:650;color:#fff;
  background:rgba(6,20,40,.5);border:1px solid rgba(255,255,255,.3);border-radius:999px;
  padding:3px 11px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.live-body{padding:14px 12px 10px;display:flex;flex-direction:column;flex:1}
.live-title{font-size:16px;font-weight:720;color:var(--ink);line-height:1.4;margin:0 0 8px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.live-meta{font-size:12px;font-weight:600;color:var(--btn2-fg);background:var(--btn2-bg);
  border:1px solid var(--brand-line);border-radius:6px;padding:2px 8px}
.live-desc{font-size:13px;color:var(--text);line-height:1.7;margin:0 0 10px}
.live-points{margin:0 0 14px;padding:0 0 0 16px;display:flex;flex-direction:column;gap:5px}   /* 整块缩进，和标题/描述错开 */
.live-points > p, .live-points > div{position:relative;margin:0}   /* 只要缩进，不要圆点 */
.live-points li{font-size:12.5px;color:var(--text);line-height:1.6;padding-left:2px}
.live-points li b{font-weight:650;color:var(--ink)}
.live-desc p{margin:0}
.live-desc p+p{margin-top:6px}
.live-desc ul,.live-desc ol{margin:6px 0;padding-left:18px}
.live-desc li{font-size:13px;line-height:1.7}
.live-points ul,.live-points ol{margin:0;padding-left:6px;display:flex;flex-direction:column;gap:5px}
.live-points p{margin:0}
.live-actions{margin-top:auto;display:flex;gap:9px;flex-wrap:nowrap}
.live-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex:1 1 0;min-width:0;white-space:nowrap;font-size:13px;font-weight:650;color:#fff;
  background:var(--btn-grad);border-radius:9px;padding:8px 15px;transition:background .2s var(--ease)}
.live-cta:hover{background:var(--btn-grad-h)}
.live-op-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex:1 1 0;min-width:0;white-space:nowrap;font-size:13px;font-weight:650;
  color:var(--btn2-fg);background:var(--btn2-bg);border:1px solid var(--btn2-bd);
  border-radius:9px;padding:8px 15px;transition:background .2s var(--ease)}
.live-op-btn:hover{background:var(--btn2-bg-h);border-color:var(--btn2-bd-h)}
.live-op-btn .chev{transition:transform .3s var(--ease);font-size:11px}
.live-op-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}


/* 图文速览展开面板 */
.op-panel{display:none;grid-column:1/-1;overflow:hidden;margin:0}
.op-panel.open{display:block;margin:-6px 0 6px;animation:opReveal .4s var(--ease)}
@keyframes opReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.op-inner{border:1px solid var(--brand-line);border-radius:14px;background:var(--paper-warm);padding:16px 16px 6px}
.op-inner .op-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px;flex-wrap:wrap}
.op-inner .op-h .t{font-size:14.5px;font-weight:720;color:var(--ink);display:flex;align-items:center;gap:8px}
.op-inner .op-h .t::before{content:'';width:6px;height:6px;border-radius:2px;background:#26292e;display:inline-block}
.op-zoom{font-size:12.5px;font-weight:650;color:var(--btn2-fg);border:1px solid var(--btn2-bd);
  background:#fff;border-radius:8px;padding:6px 12px;transition:background .2s var(--ease)}
.op-zoom:hover{background:var(--btn2-bg)}
.op-imgbox{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff;
  cursor:zoom-in;margin-bottom:14px}
.op-imgbox img{width:100%;display:block}

/* 灯箱（课程图文速览 / 文档配图通用） */
.lightbox{position:fixed;inset:0;z-index:320;display:none;align-items:flex-start;justify-content:center;
  overflow:auto;padding:44px 16px;background:rgba(8,14,26,.86);backdrop-filter:blur(8px)}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1400px,94vw);width:auto;height:auto;border-radius:12px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.lightbox .lb-close{position:fixed;top:18px;right:22px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);font-size:18px;color:#333;display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);z-index:2}
.lightbox .lb-close:hover{background:#fff}

/* ============================================================
   6. 产品新鲜事页
   ============================================================ */
.wn-shell{align-items:start}
.wn-page{max-width:920px;margin:0 auto;padding:0 8px 72px;min-width:0}
.wn-crumb{margin:22px 0 4px;font-size:13px;color:var(--muted)}
.wn-crumb a{color:var(--brand-ink)}
.wn-crumb a:hover{text-decoration:underline}
/* —— 每期一张卡：海报横幅在上，条目排成双列卡片 ——
   原版是"海报钉在左边 + 右边一列长列表"，读起来像文档；改成卡片墙后节奏更轻。 */
/* —— 杂志式日志：日期当章节标题，条目按实际高度流进两列 ——
   · 不要期号，只有日期
   · 用 CSS 多列（不是 grid）：条目按内容高度自动流向下一列，
     长一条短一条都填得满，不会出现行尾空洞 */
.wn-issue{display:block;margin:0;padding:0 0 46px;background:none;border:0}
.wn-issue+.wn-issue{margin-top:0}

/* 日期章节头：圆点 + 日期 + 一条拉到右边缘的细线；滚动时吸顶，便于知道当前在看哪一天 */
.wn-issue-head{display:flex;align-items:center;gap:12px;margin:0 0 22px;padding:9px 0 11px;border:0;
  position:sticky;top:56px;z-index:3;background:var(--paper)}
.wn-issue-date{display:inline-flex;align-items:center;gap:11px;padding:0;border:0;background:none;
  color:var(--ink);font-size:22px;font-weight:800;letter-spacing:-.025em;white-space:nowrap}
.wn-issue-date::before{content:'';width:9px;height:9px;border-radius:50%;background:#26292e;flex:none}
.wn-issue-head::after{content:'';flex:1;height:1px;background:#edf1f6}
.wn-issue-no{display:none}

/* 条目：单列行式——序号在左、标题正文在右，编号从上往下就是 01 → 02 → 03，
   不会出现"内容分两栏、编号跳着走"的困惑 */
.wn-layout{display:block;margin:0}
.wn-poster-col{display:none}
.wn-list{display:block}
.wn-item{display:flex;gap:15px;align-items:flex-start;
  margin:0;padding:0 0 26px;scroll-margin-top:86px}
.wn-item:last-child{padding-bottom:0}
.wn-no{flex:none;width:28px;height:28px;border-radius:9px;margin:1px 0 0;
  background:#f3f6fa;border:1px solid #e6ebf2;color:var(--btn2-fg);
  font-size:11.5px;font-weight:800;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;transition:background .2s,color .2s,border-color .2s}
.wn-item:hover .wn-no{background:#26292e;border-color:#26292e;color:#fff}
.wn-body{min-width:0;flex:1}
.wn-body h2{margin:1px 0 7px;font-size:15.5px;font-weight:740;letter-spacing:-.012em;
  color:var(--ink);line-height:1.5}
.wn-body p{margin:0;font-size:13.5px;line-height:1.85;color:var(--text);max-width:74ch}

/* 分点：不设高度上限 */
.wn-sub{margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.wn-sub li{display:flex;gap:9px;align-items:flex-start}
.wn-sub-no{flex:none;width:20px;height:20px;border-radius:6px;background:#eef1f5;color:var(--muted);
  font-size:10.5px;font-weight:780;display:grid;place-items:center;margin-top:2px;
  font-variant-numeric:tabular-nums}
.wn-sub p{margin:0;font-size:13px;line-height:1.8;color:var(--text)}
.wn-sub-t{font-weight:740;color:var(--ink)}

/* ============================================================
   7. 案例库页
   ============================================================ */
/* 案例卡的暗面配色。
   原来卡底是高饱和宝蓝、卡上的标签是荧光青（#00deff），两个都高饱和、色相又接近，
   叠在一起就"打架"，还和纸白页面脱节。现在：
   · 卡底降饱和成墨蓝（同一 210° 色相，只把饱和度压下来）——安静、像深色编辑面板；
   · 卡上强调色改成品牌蓝的浅调 #a9c9ff，不再用荧光青——同色系，只在明度上拉开层次；
   · 白字、白按钮保留，靠明度差建立层级，不靠撞色。 */
:root{
  /* 卡片改成白底：原来"浅蓝渐变 + 白色蒙层"叠在一起发花，看着脏。
     白底 + 细描边 + 轻投影最干净，颜色交给截图本身。 */
  --cbg:#ffffff;
  --cscrim:255,255,255;
  --cink:var(--ink);
  --cink2:#4d5f78;
  --cedge:#eceff3;
  --cedge-h:#dfe4ea;
  --cmbox:#f5f7fa;
  --cbadge:rgba(255,255,255,.88);
  --cbadge-fg:var(--brand-ink);
  --cbadge-bd:var(--brand-line);
  --ctag:#d3e4fc;
  --ctag-fg:var(--brand-ink);
}
/* 之前这页的底色用 --bg（近白冷调 247,250,254），和其他四页的纯白不一致，
   左右两侧留白就显出两边色差；现在统一成 --paper，和首页/文档/课程/新鲜事一致 */
body.page-cases{background:var(--paper)}
.shell-cases{max-width:1240px;margin:0 auto;padding:0 22px}

/* 页头：浅色面板 + 一条彩色分隔线；标题用中性墨色，
   色彩交给统计数字（四个数字分别取海报的蓝/紫/橙/绿） */
/* 页头面板：中性浅灰（方案 B）——不铺任何蓝，颜色只留给文字和数字 */
.ph{margin:20px 0 0;padding:26px 28px 24px;border-radius:20px;
  background:var(--panel);border:1px solid var(--panel-line);box-shadow:none}
.ph::after{display:none}
.ph h1{font-size:29px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:7px}
.ph .sub{font-size:14px;color:var(--muted);line-height:1.7}
.ph .stat{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap}
.ph .stat .s{display:flex;align-items:baseline;gap:5px}
.ph .stat .s b{font-size:21px;font-weight:800;letter-spacing:-.02em}
.ph .stat .s span{font-size:12.5px;color:var(--muted)}
/* 四个统计数字 = 海报四个彩色 */
/* 统计数字按位置循环上色：第 5、6 项（后台新增的）也自动有颜色 */
.ph .stat .s:nth-child(6n+1) b{color:#0d8bf2}
.ph .stat .s:nth-child(6n+2) b{color:#9160e2}
.ph .stat .s:nth-child(6n+3) b{color:#dd8a3c}
.ph .stat .s:nth-child(6n+4) b{color:#31a97c}
.ph .stat .s:nth-child(6n+5) b{color:#d8567f}
.ph .stat .s:nth-child(6n+6) b{color:#3594ae}
.ph .stat .s b{color:#0d8bf2}   /* 兜底，避免出现黑色 */

/* HERO：左主推 + 右榜单 */
.hero{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;margin-top:22px}
.spot{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:352px;
  background:var(--cbg);border:1px solid var(--cedge);
  box-shadow:0 1px 2px rgba(16,60,120,.05),0 18px 40px -26px rgba(16,60,120,.25);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.spot:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(16,60,120,.06),0 26px 50px -26px rgba(16,60,120,.3)}
.spot-media{position:absolute;right:-6%;bottom:-5%;width:60%;height:60%;
  border-radius:16px 0 0 0;overflow:hidden;z-index:1;
  transform:perspective(900px) rotate(-2deg) scale(1);
  box-shadow:-16px -18px 42px rgba(4,26,58,.2);
  transition:transform .35s var(--ease),right .35s var(--ease),bottom .35s var(--ease),width .35s var(--ease),height .35s var(--ease),border-radius .35s var(--ease),box-shadow .35s var(--ease)}
/* 悬停：摆正 + 放大 + 贴边（图片铺满，不留白） */
.spot:hover .spot-media,
.spot.is-preview .spot-media{
  right:0; bottom:0; width:76%; height:76%;
  border-radius:18px 0 0 0;
  transform:perspective(900px) rotate(0deg) scale(1)}
.spot-media img{width:100%;height:100%;object-fit:cover;object-position:top left;
  mix-blend-mode:multiply}

/* 悬停：图片铺满框内，不留白 */
.spot:hover .spot-media img, .spot.is-preview .spot-media img{
  object-fit:cover; object-position:center}
/* 蒙层要整块压住、而不只是左侧渐隐：站内截图多为白底界面，
   右侧留 transparent 会顶出一块刺眼的白色方块。配合 multiply 后
   浅色截图会读成「蓝色玻璃面板」，既留信息又不抢文字。 */
.spot-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgb(var(--cscrim)) 0%,rgba(var(--cscrim),.5) 30%,
    rgba(var(--cscrim),.16) 62%,rgba(var(--cscrim),0) 100%)}
.spot-body{position:relative;z-index:2;height:100%;width:68%;padding:26px 26px 24px;
  display:flex;flex-direction:column;align-items:flex-start}
.spot-kick{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  color:#d9862f;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px}
.spot-kick .dot{width:6px;height:6px;border-radius:50%;background:#fa6e08;
  box-shadow:0 0 0 3px rgba(250,110,8,.2);animation:sp 1.8s ease infinite}
@keyframes sp{0%,100%{box-shadow:0 0 0 3px rgba(250,110,8,.2)}50%{box-shadow:0 0 0 7px rgba(250,110,8,.06)}}
.spot h2{font-size:clamp(23px,2.3vw,33px);font-weight:850;color:var(--cink);line-height:1.24;
  letter-spacing:-.028em;margin-bottom:13px}
.spot p{font-size:13.5px;line-height:1.78;color:var(--cink2);max-width:400px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.spot-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
.spot-tags span{padding:5px 12px;border-radius:99px;font-size:11.5px;font-weight:600;
  border:1px solid #d8eef8;color:#3f9cb8;background:#fbfeff}
.spot-tags .sd{background:var(--ctag);border-color:var(--ctag);color:var(--ctag-fg);font-weight:800}
.spot-cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  background:var(--btn-grad);color:#fff;border-radius:99px;padding:10px 20px;
  font-size:13px;font-weight:800;box-shadow:0 10px 26px rgba(14,22,38,.24)}
a.spot{color:inherit;display:block}
a.spot:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 榜单 */
.rank-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 18px;min-height:352px;display:flex;flex-direction:column}
.rank-list .rank-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rank-list .rank-h h4{font-size:14.5px;font-weight:750;color:var(--ink)}
.rank-list .rank-h .tip{font-size:11.5px;color:var(--subtle)}
.rank-list ul{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;gap:2px}
.rank-list li{flex:1;min-height:38px;display:flex}
.rank-list li a{display:flex;align-items:center;gap:11px;flex:1;min-width:0;height:100%;
  padding:0 11px;border-radius:10px;transition:background .18s}
.rank-list li a:hover{background:var(--bg)}
.rank-list li.on a{background:#eef1f5;box-shadow:inset 0 0 0 1px #e2e7ee}
.rank-list .n{width:21px;height:21px;border-radius:6px;display:grid;place-items:center;flex:none;
  font-size:11.5px;font-weight:800;color:var(--subtle);background:var(--bg)}
.rank-list li:nth-child(1) .n{background:#4fb8f5;color:#fff}
.rank-list li:nth-child(2) .n{background:#feecd5;color:#b36d1f}
.rank-list li:nth-child(3) .n{background:#f0edfc;color:#5a45c2}
.rank-list .t{flex:1;min-width:0;font-size:13px;color:var(--ink);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list .k{flex:none}

/* 大 Tab */
.tabs{display:flex;align-items:center;gap:20px;margin-top:32px;padding:0 8px;flex-wrap:wrap}
.tab{font-size:17.5px;font-weight:500;color:var(--subtle);padding-bottom:6px;
  border-bottom:2px solid transparent;transition:.18s;white-space:nowrap}
.tab.on{color:var(--ink);font-weight:800;border-bottom-color:var(--ink)}
.tab .c{font-size:12px;font-weight:600;color:var(--subtle);margin-left:5px;vertical-align:2px}
.fsearch{margin-left:auto;display:flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--line);border-radius:99px;padding:8px 15px;color:var(--subtle);transition:.18s}
.fsearch:focus-within{border-color:#cbd5e1}
.fsearch input{border:none;outline:none;background:none;font-size:12.5px;width:172px;color:var(--ink)}
.fsearch svg{flex:none}

/* 筛选 */
.filters{margin-top:16px;padding:0 8px}
.frow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.frow .fl{font-size:12px;font-weight:700;color:var(--subtle);width:60px;flex:none;line-height:1.5}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;
  background:#fff;border:1px solid var(--line);color:var(--text);font-size:12.5px;font-weight:600;
  transition:.18s;white-space:nowrap}
.chip:hover{border-color:var(--btn2-bd-h);color:var(--ink);background:var(--btn2-bg)}
/* 选中态：跟主按钮同一支石墨色，全站"实心深色块"只有这一种 */
.chip.on{background:#26292e;border-color:#26292e;color:#fff;font-weight:700}
.chip.on .n{opacity:.85}
.chip .n{font-size:10.5px;opacity:.62;font-weight:600}

/* 区块标题 */
.sec{display:flex;align-items:baseline;gap:12px;margin:30px 8px 14px;flex-wrap:wrap}
.sec h3{font-size:17.5px;font-weight:780;color:var(--ink);letter-spacing:-.015em}
.sec .d{font-size:12.5px;color:var(--subtle)}
.sec .scope{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;
  background:var(--brand-bright-soft);color:var(--brand-ink);border:1px solid var(--brand-line)}

/* 案例网格 */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 8px}

/* 案例卡：文字在上、整宽横幅截图收尾
   —— 原来截图塞右上角 + 蒙层，卡片一多就糊成一片；横幅版信息层次更清楚。 */
.card-case{position:relative;display:flex;flex-direction:column;color:inherit;
  border-radius:14px;background:#fff;border:1px solid var(--cedge);overflow:hidden;
  box-shadow:0 1px 2px rgba(16,60,120,.05),0 12px 26px -22px rgba(16,60,120,.2);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.card-case:hover{transform:translateY(-3px);border-color:var(--cedge-h);
  box-shadow:0 1px 2px rgba(16,60,120,.06),0 22px 40px -24px rgba(16,60,120,.28)}

/* 截图横幅：贴底、整宽，白底截图也能靠浅灰衬底框住 */
.card-case .mbox{position:relative;margin-top:auto;width:100%;aspect-ratio:16/7;
  background:#f2f4f7;border-top:1px solid #f0f3f6;overflow:hidden;z-index:1}
.card-case .mbox img{width:100%;height:100%;object-fit:cover;object-position:top left;
  display:block;filter:contrast(1.02) saturate(1.02);transition:transform .45s var(--ease)}
.card-case:hover .mbox img{transform:scale(1.02)}
.card-case .mbox::after{display:none}
.card-case::before{display:none}
.card-case .mbox[data-noimg]{background:linear-gradient(150deg,#eef2f7,#e3e9f1 55%,#d8e0ea)}
.card-case .mbox[data-noimg]::before,.spot-media[data-noimg]::before{
  content:'演示图待补';position:absolute;left:14px;top:14px;z-index:1;
  padding:5px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.03em;
  color:var(--muted);background:rgba(255,255,255,.9);border:1px solid var(--line)}

/* 文字区 */
.card-case .body{padding:15px 16px 11px}
.card-case h4{font-size:14.5px;font-weight:800;color:var(--cink);line-height:1.45;letter-spacing:-.02em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 6px;
  padding-right:76px}   /* 给右上角的产物徽标留位，长标题不会压在徽标下面 */
.card-case p{font-size:12px;line-height:1.65;color:var(--cink2);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 产物类型徽标：钉在卡片右上角 */
.card-case .kind{position:absolute;right:12px;top:12px;z-index:4;font-weight:700}

/* 底栏：行业标签 */
.card-case .foot{display:flex;align-items:center;gap:6px;padding:10px 16px 14px}
.dtag{display:inline-flex;align-items:center;flex:none;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:6px;letter-spacing:.01em;white-space:nowrap;
  background:var(--brand-bright-soft);color:var(--brand-ink);border:1px solid var(--brand-line)}
/* 行业标签：一个行业 = 一个专属色，9 个行业 9 个互不相同的色相（不允许重复）。
   同一个行业在任何页面都是同一个颜色。 */
.dtag[data-d="电商"]{background:#fffbf6;color:#c8792a;border-color:#f9e3cf}
.dtag[data-d="餐饮"]{background:#fffdf5;color:#a8842a;border-color:#f7edcd}
.dtag[data-d="营销"]{background:#fffafb;color:#d8567f;border-color:#fadfe7}
.dtag[data-d="咨询"]{background:#fdfbff;color:#9160e2;border-color:#ebdffd}
.dtag[data-d="行政"]{background:#fbfbff;color:#6f68e2;border-color:#e3e2fc}
.dtag[data-d="零售"]{background:#f5faff;color:#0d8bf2;border-color:#cfe6fd}
.dtag[data-d="金融"]{background:#fafdfe;color:#3594ae;border-color:#d4ecf3}
.dtag[data-d="教育"]{background:#fafefc;color:#31a97c;border-color:#d4eee1}
.dtag[data-d="制造"]{background:#fbfcfd;color:#74879c;border-color:#e5eaf0}
.card-case .dtag{font-weight:800;font-size:11px;padding:4px 11px;border-radius:99px}
/* 空态 */
.case-empty{display:none;padding:70px 20px;text-align:center;color:var(--subtle);font-size:14px}
.case-empty.on{display:block}

/* ============================================================
   8. 通用组件
   ============================================================ */
/* 徽标 */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap}
/* 产物类型徽标：直接取海报上那五张功能卡的主题色，配同色系浅底。
   只在弹窗等浅色小面积里出现，不参与大的版面，所以颜色可以用足一点。 */
/* 产物类型徽标：5 种类型 5 个专属色，互不重复 */
.pill-web{background:#f5faff;color:#0d8bf2;border:1px solid #cfe6fd}     /* 在线网页 = 蓝 */
.pill-vid{background:#fffafb;color:#d8567f;border:1px solid #fadfe7}     /* 演示录屏 = 粉 */
.pill-img{background:#fffbf6;color:#cf8038;border:1px solid #f9e3cf}     /* 图文素材 = 橙 */
.pill-doc{background:#fdfbff;color:#9160e2;border:1px solid #ebdffd}     /* 分析报告 = 紫 */
.pill-tab{background:#fafefc;color:#31a97c;border:1px solid #d4eee1}     /* 表格 = 绿 */
.pill-green{background:#eefaf3;color:#31a97c;border:1px solid #cfeddd}
.pill-line{background:#fff;color:var(--muted);border:1px solid var(--line)}

/* 详情弹窗 */
.cmodal{position:fixed;inset:0;z-index:200;display:none}
.cmodal.on{display:block}
.cmodal-mask{position:absolute;inset:0;background:rgba(12,16,28,.55);backdrop-filter:blur(6px)}
.cmodal-card{
  --mw:min(1440px,94vw);
  --pw:404px;
  --ar:1.75;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--mw);height:calc((var(--mw) - var(--pw)) / var(--ar));
  min-height:430px;max-height:90vh;background:#fff;border-radius:22px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) var(--pw);
  box-shadow:0 40px 90px rgba(10,20,40,.32)}
.cmodal-card.ar-anim{transition:height .3s var(--ease)}
.cmodal-media{background:#eef4fb;position:relative;display:grid;place-items:center;overflow:hidden}

/* 详情弹窗里的多图轮播 */
.cgal{position:absolute;inset:0;display:grid;place-items:center}
.cgal-img{width:100%;height:100%;object-fit:contain;object-position:center;transition:opacity .18s}
.cgal-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  border:0;background:rgba(20,32,48,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .15s,opacity .15s;opacity:.85}
.cgal-nav:hover{background:rgba(20,32,48,.8);opacity:1}
.cgal-prev{left:10px}
.cgal-next{right:10px}
.cgal-no{position:absolute;right:12px;top:12px;padding:3px 9px;border-radius:99px;
  background:rgba(20,32,48,.55);color:#fff;font-size:11.5px;font-variant-numeric:tabular-nums}
.cgal-dl{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;
  padding:7px 13px;border-radius:99px;border:0;cursor:pointer;font-size:12px;font-weight:650;
  background:rgba(255,255,255,.94);color:#1d2b3a;box-shadow:0 2px 10px rgba(10,30,60,.18);
  transition:background .15s,transform .15s}
.cgal-dl:hover{background:#fff;transform:translateY(-1px)}
.cgal-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;gap:6px;padding:5px 9px;border-radius:99px;background:rgba(20,32,48,.4)}
.cgal-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;
  transition:background .15s,width .15s}
.cgal-dots i.on{background:#fff;width:14px;border-radius:3px}
.cmodal-media img{width:100%;height:100%;object-fit:contain;object-position:center}
.cmodal-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--bg-soft)}
.cmodal-head{padding:24px 56px 14px 26px;border-bottom:1px solid var(--line-soft)}
.cmodal-head .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cmodal-head h3{font-size:19px;font-weight:750;color:var(--ink);line-height:1.45;letter-spacing:-.015em}
.cmodal-body{padding:18px 26px;overflow:auto;flex:1;min-height:0}
.cmodal-body .mrow{display:flex;gap:10px;font-size:13px;margin-bottom:10px;align-items:flex-start}
.cmodal-body .mrow .k{color:var(--subtle);flex:none;width:66px;font-weight:600}
.cmodal-body .mrow .v{color:var(--text);line-height:1.7;min-width:0}
.mp-pre{white-space:pre-wrap;word-break:break-word;font-size:12.5px;line-height:1.85;
  color:var(--text);background:#f7f9fc;border:1px solid #eaeff6;border-radius:10px;
  padding:12px 14px;max-height:260px;overflow:auto}
.mp-pre p{margin:0 0 8px}
.mp-pre p:last-child{margin-bottom:0}
.mp-pre ul,.mp-pre ol{margin:6px 0;padding-left:18px}
.mp-head{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.mp-head span{font-size:12.5px;font-weight:700;color:var(--muted)}
.mp-copy{font-size:12px;font-weight:700;color:var(--btn2-fg);background:var(--btn2-bg);
  border:1px solid var(--brand-line);border-radius:99px;padding:4px 12px;transition:.18s}
.mp-copy:hover{background:#d8ecff}
.cmodal-body pre{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.75;
  color:var(--text);white-space:pre-wrap;word-break:break-word}
.cmodal-foot{padding:16px 26px 22px;border-top:1px solid var(--line-soft);display:flex;gap:10px;align-items:center}
.cmodal-x{position:absolute;right:14px;top:14px;z-index:5;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:15px;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.btn-mint{display:inline-flex;align-items:center;gap:8px;background:var(--btn-grad);color:#fff;
  border-radius:99px;padding:12px 24px;font-weight:800;font-size:14px;
  transition:transform .2s,box-shadow .2s;box-shadow:0 10px 26px rgba(14,22,38,.26)}
.btn-mint:hover{transform:translateY(-2px);background:var(--btn-grad-h);box-shadow:0 14px 32px rgba(14,22,38,.34)}

/* toast */
.ctoast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:340;
  background:var(--deep);color:var(--brand-bright);padding:11px 22px;border-radius:99px;font-size:13px;
  font-weight:600;opacity:0;pointer-events:none;transition:.25s var(--ease)}
.ctoast.on{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   9. 右侧悬浮窗（二维码）+ 回到顶部
   ------------------------------------------------------------
   .dock 固定定位，不跟随滚动；二维码面板可关闭（状态存 localStorage），
   关闭后留一个"关注"小胶囊可以再打开。回到顶部按钮滚动超过 400px 才出现。
   ============================================================ */
.dock{position:fixed;right:18px;bottom:26px;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.qr-panel{position:relative;width:152px;padding:26px 9px 10px;border-radius:16px;
  max-height:calc(100vh - 160px);overflow-y:auto;overscroll-behavior:contain;
  background:#ffffff;
  border:1px solid #e6ebf2;
  box-shadow:0 18px 40px -24px rgba(20,26,40,.28)}
.qr-close{position:absolute;left:6px;top:6px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;color:var(--subtle);font-size:14px;line-height:1;transition:.18s}
.qr-close:hover{background:var(--btn2-bg-h);color:var(--ink)}
.qr-head{font-size:12px;font-weight:700;color:var(--ink);text-align:center;
  letter-spacing:.04em;margin-bottom:8px}
.qr-card{margin:0 0 8px;background:#fff;border:1px solid #e9edf3;border-radius:10px;
  padding:6px 6px 4px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.qr-card:last-child{margin-bottom:0}
.qr-card:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(20,26,40,.28)}
.qr-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:6px}
.qr-card figcaption{margin-top:5px;font-size:11px;font-weight:600;line-height:1.4;
  color:var(--text);text-align:center}
.qr-card figcaption span{display:block;font-weight:500;font-size:10.5px;color:var(--muted)}
/* 收起二维码后的"展开"入口：做成圆形图标按钮，比原来写"关注"两个字清楚 */
.dock-reopen{display:none;place-items:center;width:42px;height:42px;border-radius:50%;
  background:#fff;border:1px solid #e6ebf2;color:var(--ink);
  box-shadow:0 12px 28px -18px rgba(20,26,40,.3);
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.dock-reopen:hover{background:var(--btn2-bg-h);transform:translateY(-2px);
  box-shadow:0 16px 32px -18px rgba(20,26,40,.38)}
.dock-reopen svg{width:20px;height:20px}
.dock.closed .qr-panel{display:none}
.dock.closed .dock-reopen{display:grid}

/* 回到顶部：圆形 + 描边箭头，和悬浮窗同一套质感 */
.to-top{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid #e6ebf2;color:var(--ink);
  box-shadow:0 12px 28px -18px rgba(20,26,40,.32);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.92);
  transition:opacity .25s var(--ease),transform .25s var(--ease),
             visibility .25s,background .2s var(--ease),box-shadow .2s var(--ease)}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--btn2-bg-h);transform:translateY(-2px);
  box-shadow:0 16px 32px -18px rgba(20,26,40,.4)}
.to-top:active{transform:translateY(0) scale(.96)}
.to-top svg{width:18px;height:18px}
/* 手机屏幕太窄，二维码窗会盖住正文：只保留回到顶部 */
/* 窄屏（含小尺寸笔记本）隐藏二维码窗：正文是文字排版，浮窗压上去会挡字 */
@media(max-width:1100px){
  .dock{right:12px;bottom:16px}
  .qr-panel,.dock-reopen{display:none!important}
}
/* 页脚 */
/* 页脚。必须写标签限定 footer.foot：卡片底栏也叫 .card-case .foot，
   裸 .foot 会把这里的白底、内边距、居中全部套到卡片底栏上。 */
footer.foot{margin-top:56px;padding:26px 22px 38px;border-top:1px solid var(--line);
  text-align:center;color:var(--subtle);font-size:12.5px;line-height:1.95;background:var(--bg-soft)}
footer.foot .foot-line{font-size:13px;color:var(--text);letter-spacing:.01em}
footer.foot .foot-sep{margin:0 7px;color:var(--line-strong)}
footer.foot .icp{color:var(--btn2-fg);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
footer.foot .icp:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
footer.foot .foot-note{margin-top:7px;font-size:12px;color:var(--muted)}

/* ============================================================
   9. 响应式
   ============================================================ */
@media(max-width:1080px){
  .home-top{grid-template-columns:minmax(0,1fr)}
  .video-body{grid-template-columns:minmax(0,1fr)}
  .carousel{border-radius:20px 20px 0 0}
  .playlist-col{border-left:0;border-top:1px solid var(--line)}
  .playlist{position:static;max-height:280px}
  .playlist-item{flex:none}
  .rank-card{height:auto}
  .hero{grid-template-columns:minmax(0,1fr)}
  .rank-list{min-height:0}
  .doc-wrap{grid-template-columns:minmax(0,1fr);padding:28px 28px 80px}
  .doc-toc{display:none}
  .kb-cards{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:960px){
  .live-grid{grid-template-columns:repeat(2,1fr)}
  .wn-shell{grid-template-columns:1fr}
  .wn-side{position:static;height:auto;width:100%;max-width:920px;margin:0 auto;
    padding:12px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .carousel{border-radius:16px 16px 0 0}
}

@media(max-width:900px){
  .case-wall{height:500px}
}

@media(max-width:860px){
  .grid5{grid-template-columns:repeat(3,1fr)}
  .wide{flex-direction:column;align-items:stretch;gap:14px;padding:7px 7px 16px}
  .wide-cover{width:100%;height:auto;aspect-ratio:16/9}
  .wide-body{padding:0 12px}
  .wide .btn-ghost{margin:0 12px;justify-content:center}
}

@media(max-width:760px){
  /* 菜单栏：实心 + 可横向滑动的分类条 */
  .menubar,.menubar.solid{
    position:sticky;top:0;z-index:50;
    flex-wrap:wrap;row-gap:0;column-gap:10px;
    height:auto;min-height:52px;padding:8px 12px 0;overflow:visible;
    background:rgba(252,252,252,.98);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(24,24,27,.04)}
  .menubar .brand,.menubar.solid .brand{min-width:0;gap:8px;flex:0 0 auto;
    color:var(--ink);text-shadow:none}
  .menubar .brand .brand-mark,.menubar.solid .brand .brand-mark{width:28px;height:28px;padding:3px;border-radius:9px}
  .menubar .brand .sep,.menubar.solid .brand .sep,
  .menubar .brand .brand-sub,.menubar.solid .brand .brand-sub{display:none}
  .menubar .nav,.menubar.solid .nav{
    order:3;flex:1 1 100%;min-width:0;
    display:flex;align-items:center;gap:2px;height:auto;
    margin:4px -12px 0;padding:2px 10px 8px;
    overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    background:transparent;border:0;box-shadow:none}
  .menubar .nav::-webkit-scrollbar,.menubar.solid .nav::-webkit-scrollbar{display:none}
  .menubar .nav-item,.menubar.solid .nav-item{height:auto;min-width:0;flex:0 0 auto;scroll-snap-align:start}
  .menubar .nav-link,.menubar.solid .nav-link{
    width:auto;height:auto;padding:7px 13px;border-radius:999px;
    color:var(--text);text-shadow:none;font-size:13.5px;font-weight:600;line-height:20px;
    white-space:nowrap;border:1px solid transparent;background:#f3f6fa;
    transition:background .2s,color .2s,border-color .2s}
  .menubar .nav-link.active,.menubar.solid .nav-link.active{
    color:var(--ink);background:#e8edf3;border-color:#dfe4ea}
  .menubar .nav-item:hover>.nav-link,.menubar.solid .nav-item:hover>.nav-link{
    background:#e9eff7;color:var(--brand-ink)}
  .menubar .nav-caret,.menubar .dropdown{display:none!important}

  /* 首页 */
  .hero-sky{min-height:0;padding:124px 0 78px}
  .hero-cap{padding:0 18px}
  .cloud-fade{height:22%}
  .home{padding:24px 14px 52px}
  .home-sec{margin-top:38px}
  .home-sec:first-child{margin-top:0}
  .sec-title{font-size:20px;align-items:center;flex-wrap:wrap}
  .sec-sub{font-size:13.5px;line-height:1.65}
  .home-top{gap:16px}
  .rank-card .card-head{padding:16px 14px 10px}
  .rank{padding:0 10px 11px}
  .playlist{position:static;max-height:none;flex-direction:column;overflow:visible;padding:8px;gap:4px}
  .playlist-item{flex:none;width:100%;min-height:44px;padding:10px 12px;white-space:normal}
  .kb-cards{gap:14px}
  .case-wall{height:420px;border-radius:20px}
  .case-wall-cap{padding:20px 18px 18px}
  .case-wall-cap .t{font-size:17px}
  .case-wall-cap .d{font-size:12.5px;line-height:1.55}
  .grid2,.grid3{grid-template-columns:1fr}
  .grid5{grid-template-columns:repeat(2,1fr)}

  /* 文档页 */
  .hdr-burger{display:flex}
  .shell-doc{grid-template-columns:1fr}
  .side{position:fixed;top:var(--header-h);left:0;bottom:0;width:min(86vw,320px);height:auto;
    z-index:80;transform:translateX(-100%);transition:transform .25s var(--ease);
    border-right:1px solid var(--line)}
  .side.open{transform:none;box-shadow:var(--shadow-float)}
  .side-scrim.show{display:block;position:fixed;inset:var(--header-h) 0 0 0;
    background:rgba(0,0,0,.28);z-index:79}
  .doc-wrap{padding:22px 16px 54px}
  .doc-banner{border-radius:13px;margin-bottom:18px}
  .doc-title{font-size:27px;overflow-wrap:anywhere}
  .prose{font-size:15px;line-height:1.8}
  .prose h1{font-size:22px;margin:2rem 0 .85rem}
  .prose h2{font-size:19px;margin:2.2rem 0 .85rem}
  .prose .table-wrap{-webkit-overflow-scrolling:touch}
  .prose .table-wrap table{min-width:560px}

  /* 课程页 */
  .live-grid{grid-template-columns:1fr;gap:16px}
  .series-head{gap:8px;margin:2rem 0 1rem}
  .series-head h2{font-size:20px}
  .live-card{padding:7px;border-radius:18px}
  .live-thumb{border-radius:12px}
  .live-play{width:50px;height:50px}
  .live-body{padding:13px 10px 9px}
  .live-title{font-size:15px}
  .live-actions{gap:8px}
  .live-cta,.live-op-btn{padding:10px 8px;font-size:12.5px}
  .op-inner{padding:13px 12px 4px}

  /* 产品新鲜事 */
  .wn-page{padding:0 4px 56px}
  .wn-crumb{margin:14px 0 2px}
  /* 这页的新版式（日期左 / 条目右）在文件末尾单独适配，这里只保留外壳与隐藏侧栏 */
  .wn-side{display:none}

  /* 案例库 */
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid.feat .card-case.lead{grid-column:span 2;grid-row:span 1;aspect-ratio:2/1}
  .grid.feat .card-case.lead h4{font-size:21px}
  .grid.feat .card-case.lead .lprompt{display:none}
  .grid .card-case:not(.lead) .mbox{width:76%;height:66%}
  .grid.feat .card-case.lead .mbox{width:56%;height:76%}
  .spot{min-height:320px}
  .cmodal-card{--mw:min(760px,94vw);width:var(--mw);height:auto;min-height:0;max-height:92vh;
    grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .cmodal-media{aspect-ratio:var(--ar);width:100%}
  .cmodal-media img{height:100%}
}

@media(max-width:680px){
  .grid{grid-template-columns:1fr}
  .card-case{aspect-ratio:16/10}
  .card-case .body{width:84%}
  .grid.feat .card-case.lead{grid-column:span 1;grid-row:span 1;aspect-ratio:4/3}
  .grid.feat .card-case.lead h4{font-size:17px}
  .grid.feat .card-case.lead .body{width:84%;padding:18px 18px 0}
  /* 窄屏首卡变扁后，底栏不能再竖排（标签 + CTA 两行会顶到正文上），
     改成一行左右分布 */
  .grid.feat .card-case.lead .foot{left:18px;right:18px;bottom:14px;
    display:flex;align-items:center;justify-content:space-between;gap:10px}
  .grid.feat .card-case.lead .lcta{margin-top:0;padding:7px 14px;font-size:12px}
  .grid .card-case .mbox,.grid.feat .card-case.lead .mbox{width:82%;height:74%}
  .spot-body{width:100%;background:linear-gradient(180deg,rgba(var(--cscrim),.2),rgba(var(--cscrim),.9))}
  .spot-media{width:100%;height:52%;right:0;bottom:0;border-radius:0}
  .ph h1{font-size:24px}
  .tab{font-size:16px}
  .fsearch{width:100%;margin-left:0}
  .fsearch input{width:100%;flex:1}
  .cmodal-card{--mw:100vw;width:100vw;height:100svh;max-height:100svh;border-radius:0}
  .cmodal-media{max-height:44svh}
  .cgal-nav{width:30px;height:30px;font-size:18px}
  .cgal-dl{padding:6px 11px;font-size:11.5px}
  .cmodal-head{padding:18px 52px 12px 18px}
  .cmodal-body{padding:14px 18px}
  .cmodal-foot{padding:12px 18px calc(14px + env(safe-area-inset-bottom))}
  .cmodal-x{right:10px;top:10px}
  .case-wall{height:330px}
}

@media(max-width:560px){
  .kb-cards{grid-template-columns:1fr}
  .tile-title{font-size:13px;padding:9px 5px 5px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  /* 例外：案例图墙是这块区域的唯一动效，产品要求必须自动滚。
     上面的 * 通配会把任何 CSS 动画压成 0.001ms，这里用类选择器 + !important 顶回来。 */
  .wall-row{animation-duration:var(--dur,44s)!important;
    animation-iteration-count:infinite!important;
    animation-name:wallScroll!important}
}

@media(max-width:900px){
  .wn-list{columns:1}
  .wn-item{margin-bottom:20px}
  .wn-issue{padding-bottom:34px}
  .wn-issue-date{font-size:20px}
}
/* ============================================================
   彩色强调：与案例库同一套色板
   ------------------------------------------------------------
   案例库里有 9 个行业色 + 5 个产物色，这里把它们抽成"通用强调色"，
   只用在**小面积**元素上（序号方块、圆点、标题色条、徽标），
   大面积底色仍然是白/浅灰 —— 不然又会变成之前那种"整块蓝"。
   ============================================================ */

/* —— 产品新鲜事：条目序号 01→06 轮六色 —— */
.wn-item:nth-child(6n+1) .wn-no{background:#eef6ff;border-color:#cfe6fd;color:#0d8bf2}
.wn-item:nth-child(6n+2) .wn-no{background:#f8f1ff;border-color:#ebdcfd;color:#9160e2}
.wn-item:nth-child(6n+3) .wn-no{background:#fff5f8;border-color:#fadfe7;color:#d8567f}
.wn-item:nth-child(6n+4) .wn-no{background:#fff8ef;border-color:#f9e3cf;color:#c8792a}
.wn-item:nth-child(6n+5) .wn-no{background:#eefaf3;border-color:#d4eee1;color:#31a97c}
.wn-item:nth-child(6n+6) .wn-no{background:#eef9fc;border-color:#d4ecf3;color:#3594ae}
.wn-item:hover .wn-no{color:#fff}

/* —— 产品新鲜事：日期圆点按日期轮色 —— */
.wn-issue:nth-of-type(6n+1) .wn-issue-date::before{background:#0d8bf2}
.wn-issue:nth-of-type(6n+2) .wn-issue-date::before{background:#9160e2}
.wn-issue:nth-of-type(6n+3) .wn-issue-date::before{background:#d8567f}
.wn-issue:nth-of-type(6n+4) .wn-issue-date::before{background:#c8792a}
.wn-issue:nth-of-type(6n+5) .wn-issue-date::before{background:#31a97c}
.wn-issue:nth-of-type(6n+6) .wn-issue-date::before{background:#3594ae}

/* —— 首页：板块标题前的色条恢复四色（蓝 / 紫 / 橙 / 绿） —— */
.home-sec:nth-of-type(1) .sec-title::before{background:#0d8bf2}
.home-sec:nth-of-type(2) .sec-title::before{background:#9160e2}
.home-sec:nth-of-type(3) .sec-title::before{background:#dd8a3c}
.home-sec:nth-of-type(4) .sec-title::before{background:#31a97c}

/* —— 首页：kb 卡片里的 ①② 序号轮色 —— */
.kb-list li:nth-child(5n+1) .n{background:#eef6ff;border-color:#cfe6fd;color:#0d8bf2}
.kb-list li:nth-child(5n+2) .n{background:#f8f1ff;border-color:#ebdcfd;color:#9160e2}
.kb-list li:nth-child(5n+3) .n{background:#fff5f8;border-color:#fadfe7;color:#d8567f}
.kb-list li:nth-child(5n+4) .n{background:#fff8ef;border-color:#f9e3cf;color:#c8792a}
.kb-list li:nth-child(5n+5) .n{background:#eefaf3;border-color:#d4eee1;color:#31a97c}

/* —— 侧栏分组前的方块：三色轮换（文档页 / 新鲜事） —— */

/* —— 场景实战小方点 / 课程系列标识 也给点颜色 —— */
.block-sub .sdot{background:#dd8a3c}
.series-head .idx{background:#eef6ff;border-color:#cfe6fd;color:#0d8bf2}

/* —— 页脚备案号：颜色和旁边的公司名保持一致（靠下划线表示可点） —— */
footer.foot .icp{color:var(--text);border-bottom:1px solid transparent}
footer.foot .icp:hover{color:var(--ink);border-bottom-color:var(--line-strong)}