/* ============================================================
   css/theme-craft-base.css
   花式主题「共用精修层」—— 13 套皮肤共用的验收口径（2026-10-28 定）

   ------------------------------------------------------------
   为什么要有这一层：
   宝宝 2026-10-25 在「花漾·暖调」上逐条验收、返工了 5 轮，那 14 条口径
   大多不是「atelier 这套图材才有的问题」，而是**所有皮肤都会犯的同一个错**：
   公共皮肤层用 92% 不透明的米白把素材图糊掉了、头花环缩在头像里、
   底栏变成硬切一刀、每个子页都被铺得满满一层花……。

   所以本文件只放**跟图材无关的口径**（行为层），配色全部走 --skin-* 变量，
   换一套包自动跟着变。某套包自己的像素级调优仍旧写它自己的
   css/theme-<pack>-craft.css，不往这里塞。

   加载顺序（index.html）：
     theme-skin.css  →  theme-craft-base.css  →  theme-atelier-craft.css
   所以 atelier 那 988 行保留原样、优先级更高，一个像素都不会被这里改掉。
   新主题**没有**自己的 craft 文件也照样好看，这就是本层存在的意义。
   ============================================================ */

html[data-theme-skin] {
    /* 遮罩强度：素材图要透出来（公共层原来是 92% 不透明，图全被糊成一片米白） */
    --craft-veil-weak: color-mix(in srgb, var(--skin-bg-alt) 26%, transparent);
    --craft-veil-mid: color-mix(in srgb, var(--skin-bg) 58%, transparent);
    --craft-veil-strong: color-mix(in srgb, var(--skin-bg) 80%, transparent);
    --craft-card-veil: color-mix(in srgb, var(--skin-bg-alt) 30%, transparent);
    --craft-fade-mid: color-mix(in srgb, var(--skin-bg) 42%, transparent);
    --craft-fade-strong: color-mix(in srgb, var(--skin-bg-alt) 82%, transparent);
    /* 纯色主题里「小窝图标圆底」的原值（18c：撤 ≠ 透明，要的是纯色主题那个样子） */
    --craft-nest-disc: rgba(255, 252, 249, 0.62);
    --craft-nest-disc-line: rgba(255, 252, 249, 0.75);
}

/* ============================================================
   一、整页铺图：能平铺的只有 cover；聊天页只铺一张不重复的
   （素材用法见 docs/tasks/TASK-THEME-SKIN-ALL.md §三）
   ============================================================ */
/* ★ 2026-10-29 宝宝：「图6后面那个底图不够高级，就是因为没有隐到后层的那种立体感。
   可以加一些磨砂、模糊、晃动手机微微 3D 的动态；朋友圈的底图也是，特别清晰的图不够高级，
   微微模糊会高级点」。
   做法：整页图不再直接铺在会滚动的页面上（贴着屏幕一起滚 ⇒ 像一张墙纸），
   改成页面背后一块**固定的**模糊层，页面自己只留底色；滚动时图不动、内容动 = 后层退远了。
   晃手机时这块图会轻轻偏移几像素（js/theme-skin.js 里的 deviceorientation，没有传感器就静止）。
   零新增节点、零新增文件，只用伪元素。 */
html[data-theme-skin] #tab-moments,
html[data-theme-skin] #tab-my {
    isolation: isolate;
    background-color: var(--skin-bg);
    background-image: none;
}
/* ★ 2026-10-29（第 7 轮）宝宝原话：
   「底图我要的不是四角花啊，我要的是那张氛围图，我只是说太糊了而已」
   「氛围图是正方形的那个，就是长得很摄影的那个，每个主题都有」
   「朋友圈和"我的"界面的底图还是太模糊了，就不能不要那么模糊吗？
     改成氛围图然后上面模糊渐渐到下面不模糊」。
   → ①换图：底图槽从 bg（940×1672 的四角花）换成 atmosphere（每套那张 1254×1254 的
      摄影静物，跟主题选择器里显示的是同一张。槽位由 tools/build-theme-atmosphere.ps1 生成）；
     ②拆两层：::before 铺**清晰**原图，::after 是同一张图模糊后只盖住上半身、往下渐隐到透明
      → 上面虚、下面清楚，正是她要的「上面模糊渐渐到下面不模糊」；
     ③两层挂同一个 deviceorientation 位移，晃手机时糊层和清层一起动，不会错位。
      零新增节点，仍然只用伪元素。 */
html[data-theme-skin] #tab-moments::before,
html[data-theme-skin] #tab-my::before {
    content: "";
    position: fixed;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    z-index: -2;
    pointer-events: none;
    background-color: var(--skin-bg);
    /* ★ 只用「单个 color-mix」做雾：叠两层 color-mix（比如把 --skin-paper-bright 再喂进去）
       在部分内核里会让整条 background-image 变成无效值 → 图整片消失、只剩底色。
       2026-10-29 探针实测过：单层成立、套娃不成立。 */
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--skin-bg) 6%, transparent), color-mix(in srgb, var(--skin-bg) 22%, transparent) 74%, color-mix(in srgb, var(--skin-bg) 34%, transparent)),
        var(--skin-media-atmosphere, var(--skin-media-cover));
    background-size: 100% 100%, cover;
    background-position: center, center top;
    background-repeat: no-repeat, no-repeat;
    transform: translateX(-50%) scale(1.08) translate3d(var(--skin-depth-x, 0px), var(--skin-depth-y, 0px), 0);
    transform-origin: center 42%;
    will-change: transform;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
/* 上半身的糊层：同一张图、模糊后从顶部往下渐隐（mask），下半身露出 ::before 的清晰原图。 */
html[data-theme-skin] #tab-moments::after,
html[data-theme-skin] #tab-my::after {
    content: "";
    position: fixed;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--skin-bg) 8%, transparent), transparent 46%),
        var(--skin-media-veil, var(--skin-media-atmosphere, var(--skin-media-cover)));
    background-size: 100% 100%, cover;
    background-position: center, center top;
    background-repeat: no-repeat, no-repeat;
    /* ★ 2026-10-30 宝宝：「还是有模糊好看，必须实时才能模糊吗？不能铺一层模糊上去吗？」
       原来这里是 filter: blur(6px) saturate(1.02) —— 每一帧都要算一次高斯，正是朋友圈／我的
       一往下拉就卡的原因。现在改成铺一张**离线糊好**的 veil 图（tools/theme-veil.py 产，
       宽 220 拉伸铺满，几 KB），观感一致、实时算力归零。绝不许把 filter 加回来。 */
    transform: translateX(-50%) scale(1.08) translate3d(var(--skin-depth-x, 0px), var(--skin-depth-y, 0px), 0);
    transform-origin: center 42%;
    will-change: transform;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, .58) 44%, rgba(0, 0, 0, 0) 72%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, .58) 44%, rgba(0, 0, 0, 0) 72%);
}
html[data-theme-skin][data-theme-mode="dark"] #tab-moments::before,
html[data-theme-skin][data-theme-mode="dark"] #tab-my::before {
    background-image:
        linear-gradient(180deg, rgba(18, 15, 13, .22), rgba(14, 12, 10, .30) 74%, rgba(14, 12, 10, .44)),
        var(--skin-media-atmosphere, var(--skin-media-cover));
}
html[data-theme-skin][data-theme-mode="dark"] #tab-moments::after,
html[data-theme-skin][data-theme-mode="dark"] #tab-my::after {
    background-image:
        linear-gradient(180deg, rgba(18, 15, 13, .18), transparent 46%),
        var(--skin-media-veil, var(--skin-media-atmosphere, var(--skin-media-cover)));
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme-skin] #tab-moments::before,
    html[data-theme-skin] #tab-my::before,
    html[data-theme-skin] #tab-moments::after,
    html[data-theme-skin] #tab-my::after {
        transition: none;
        transform: translateX(-50%) scale(1.04);
    }
}
/* ★ 2026-10-29（第 7 轮）宝宝：「我感觉聊天列表那个主界面的背景、小窝背景也可以加一些轻微的晃动诶，
   那个"我的"的磨砂背景的晃动给我的感觉还不错」。
   这两处没有独立的后层节点：聊天列表是页面自身的背景图、小窝是 .nh-bg 那一层，
   所以直接让 background-position / transform 跟着同一套 --skin-depth-* 位移，零新增节点。 */
html[data-theme-skin] #tab-chat #conversation-list {
    transition: background-position .45s cubic-bezier(.22, .61, .36, 1);
    background-position:
        calc(50% + var(--skin-depth-x, 0px)) calc(50% + var(--skin-depth-y, 0px)),
        calc(50% + var(--skin-depth-x, 0px)) calc(50% + var(--skin-depth-y, 0px));
}
html[data-theme-skin] #tab-nest .nh-bg {
    transform: translate3d(var(--skin-depth-x, 0px), var(--skin-depth-y, 0px), 0) scale(1.08);
    will-change: transform;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme-skin] #tab-chat #conversation-list { transition: none; }
    html[data-theme-skin] #tab-nest .nh-bg { transition: none; transform: none; }
}

/* 记忆库：一屏几十条卡，花纹要压一层颜色弱化（宝宝：「大面积底纹叠一层纯色」） */
html[data-theme-skin] #tab-memory {
    background-color: var(--skin-bg);
    background-image: linear-gradient(var(--craft-veil-mid), var(--craft-veil-strong)), var(--skin-media-cover);
    background-size: auto, 820px auto;
    background-position: center, center top;
    background-repeat: no-repeat, repeat;
    background-attachment: scroll;
}

/* 聊天页 / 设置子页：只铺一张竖版 bg，绝不平铺（平铺会触发「界面有点卡」）。
   ★ 这里**不许带 !important、更不许写 transparent**：她自己设过聊天背景时，
     inline 天然赢；写 !important 会把她设的图一起擦掉（2026-10-25 真机实锤，当晚回滚）。 */
html[data-theme-skin] #chat-view {
    background-color: var(--skin-bg);
    background-image: linear-gradient(var(--craft-veil-weak), var(--craft-veil-mid)), var(--skin-media-bg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
/* 设置子页（宝宝 2026-10-29）：以前跟聊天页共用那条竖版 bg（940×1672 撑满一屏要放大），本身就糊
   → 换成清晰那张氛围图，只压一层很薄的纸色雾。
   ★ 绝对不许给这层加 position / isolation / 伪元素：这几个子页是 #tab-my 里的 flex 子面板
     （.sub-tab-panel{display:none;flex:1}），一旦被改变定位/层叠，几个子页会同时铺在流里 → 整页错乱。 */
html[data-theme-skin] :is(#sub-help, .mysec-page) {
    background-color: var(--skin-bg);
    background-image: linear-gradient(var(--craft-veil-weak), var(--craft-veil-strong)), var(--skin-media-atmosphere, var(--skin-media-cover));
    background-size: 100% 100%, cover;
    background-position: center, center top;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll;
}

/* 「我的」页里的子页面自带不透明底色，会把 #tab-my 的花纹整片挡掉 → 让它们透明。
   收藏页除外：它自己是干净纸面（见文件末尾收口区）。 */
html[data-theme-skin] #sub-home,
html[data-theme-skin] #myh-scroll,
html[data-theme-skin] #sub-help {
    background-color: transparent;
}

/* ============================================================
   二、面板 / 弹层
   ★ 2026-11（宝宝第三次点名，这次是硬口径）：
     「你渲染出来的这些四边花框依旧被拉伸的太严重，我接受不了。范围需要再缩小。
       过度拉伸的场景都不许使用这个。」
   → 从这一版起**整框素材（--skin-media-panel）不再铺任何面板**。理由是硬事实：
     面板的高度全都会变（列表长短、有没有内容、键盘弹不弹），同一个面板今天 390×300、
     明天 390×700，任何「铺满整块」的画法迟早被拉成面条，像素级微调救不了。
   → 所以：**默认只有纸面 + 一道细线边**；需要花饰的地方一律走下面「四角角花」（原比例、不缩放）。
     整框素材只留给工具里的小方块预览，界面上一处都不许再铺。
   ============================================================ */
html[data-theme-skin] :is(.modal-content, .drawer-panel, .context-menu, .moments-context-menu, .mom-inter-panel, .mom-detail-full-panel, .personal-moments-panel, .pc-panel, .emoji-modal-panel, .money-modal, .money-sheet, .nh-bgsheet-panel, .ml-help-panel, .watch-drawer, .fav-detail-panel, [class*="-context-menu"], [class*="-drawer"], [class*="-sheet"], [class*="-modal"]:not([class*="-scrim"])) {
    background-color: var(--skin-paper-bright);
    background-image: none;
}
html[data-theme-skin] :is(.skin-panel, .modal-card, .sheet-panel) {
    background-color: var(--skin-paper-bright);
    background-image: none;
}

/* ★ 2026-10-29 宝宝：「选项弹窗不要那个花边底图，要不然会被压缩不好看——本来窗口就小，
   还加一圈花边就丑了」。四角花框是给大面板画的，压到两百多像素宽的小弹窗上花角全被按扁。
   小弹窗 / 右键菜单一律只要纸面 + 一道细边（同 §十二「更多」面板的处理）。 */
html[data-theme-skin] :is(.confirm-panel, .context-menu, .moments-context-menu, [class*="-context-menu"]) {
    background-color: var(--skin-paper-bright);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--skin-paper-bright) 70%, transparent), transparent);
    background-size: 100% 100%;
    border: var(--skin-line-width, 1px) solid var(--skin-line-soft);
    box-shadow: 0 14px 32px -12px var(--skin-shadow-deep), inset 0 1px 0 var(--skin-highlight);
}

/* ★ 2026-11 宝宝：「点击头像进入的那个朋友圈页能不能不要那个花边啊，明显被拉伸好丑啊。
   这个四边的素材只要被拉伸就很丑，通话界面也这样，啊啊丑死了。」
   → panel 那张四角花金框本来是照「接近方形的弹窗」画的。可朋友圈整页 / 通话里弹出的下bar
   是被拉到 390×700 的长条，花角被竖着按扁、横边被拉成横杠 —— 这就是「拉伸很丑」的来源。
   宝宝拍板：改成四角角花、原比例不变形。所以：
   A. 整页级面板 → 撤掉拉伸花框，四个角各贴一朵原比例角花（同一张 46px，只改位置不缩放）。
   B. 抽屉 / 下bar sheet → 一律只要纸面 + 一道细边，角花也不贴（它们本来就是临时层，
      底角还压在安全区上，贴花等于给手指添乱）。 */
/* ★ 2026-11（宝宝第二次点名 · 这次是「点他的头像进去的那个页」）：
   `.pc-panel`（他的资料卡 = 封面 + 头像 + 朋友圈入口，几乎整屏高）漏在上面那份名单外面，
   一直吃通用规则的 `--skin-media-panel` 拉伸铺图 → 四边花框被竖着拉成 390×700 的长条。
   （旧说明只作历史留档：下面 246 行起是 2026-11-01 的最终口径 —— 按「容器长宽比 vs 原图 4:3」分档。） */
/* ★ 2026-11-01 宝宝第二次纠正（原话）：「我的意思不是花框以后不用了，我的意思是，
   如果超出过多原图的长宽比，就不能拉伸去作用」。
   → 上一版「界面上一个整框都不许铺」是我理解偏了。正确口径：
     整框素材是 1400×1050（4:3 横图），**容器长宽比和它差得不多时照用整框**；
     差得太多（长条、整页、抽屉）才换成四角角花。
   → 长宽比只能量，CSS 量不了，所以由 js/theme-skin.js 里的 `_frameSync` 实时算：
     给面板挂 `.skin-frame-full`（该铺整框）或 `.skin-frame-corner`（该贴角花）；
     没挂 class 时按纸面色 + 细线边算（宁可素，绝不拉）。
   判据：|容器长宽比 / 1.3333 - 1| ≤ 0.2 才算「差不多」→ 铺整框；否则角花。 */
/* A. 该铺整框：容器比例接近素材比例 */
html[data-theme-skin] :is(.modal-content, .skin-panel, .modal-card, .sheet-panel, .moments-empty,
    .confirm-panel, .context-menu, .moments-context-menu, .money-modal, .money-sheet,
    .emoji-modal-panel, .nh-bgsheet-panel, .ml-help-panel, .fav-detail-panel,
    [class*="-context-menu"], [class*="-modal"]:not([class*="-scrim"])).skin-frame-full {
    background-color: var(--skin-paper-bright) !important;
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--skin-paper-bright) 30%, transparent), transparent 55%),
        var(--skin-media-panel) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-position: center, center !important;
    background-repeat: no-repeat !important;
}
/* B. 该贴角花：长宽比差太多，整框会被拉成面条 */
html[data-theme-skin] :is(.modal-content, .skin-panel, .modal-card, .sheet-panel, .moments-empty,
    .confirm-panel, .context-menu, .moments-context-menu, .money-modal, .money-sheet,
    .emoji-modal-panel, .nh-bgsheet-panel, .ml-help-panel, .fav-detail-panel,
    [class*="-context-menu"], [class*="-modal"]:not([class*="-scrim"])).skin-frame-corner {
    background-color: var(--skin-paper-bright) !important;
    /* ★ 2026-10-30 宝宝：「四角装饰真的好丑，为什么角度都不换一下，尤其一图6个图标的那张素材」
       → 四角不再贴同一张。四个角各一件不同的花饰（从上到下依次是左上/右上/左下/右下，顺序必须和
       background-position 一一对齐），由 js/theme-skin.js 注入 --skin-icon-corner-*，素材由
       tools/theme-corner-ornaments.py 从每套自己的图标里挑四件、并按方位翻好方向（都朝纸外开）。
       没注入时（新包还没跑那个工具）退回原来那张 line-corner，绝不留空白。 */
    background-image:
        var(--skin-icon-corner-tl, var(--skin-corner-ornament, var(--skin-icon-line-corner))),
        var(--skin-icon-corner-tr, var(--skin-corner-ornament, var(--skin-icon-line-corner))),
        var(--skin-icon-corner-bl, var(--skin-corner-ornament, var(--skin-icon-line-corner))),
        var(--skin-icon-corner-br, var(--skin-corner-ornament, var(--skin-icon-line-corner))) !important;
    background-size: 46px 46px !important;
    background-position: left 5px top 5px, right 5px top 5px, left 5px bottom 5px, right 5px bottom 5px !important;
    background-repeat: no-repeat !important;
}
html[data-theme-skin] :is(.co-sheet, .drawer-panel, .watch-drawer, .nh-bgsheet-panel, .ml-help-panel, .fav-detail-panel) {
    background-color: var(--skin-paper-bright) !important;
    background-image: none !important;
    border: var(--skin-line-width, 1px) solid var(--skin-line-soft);
}

/* ============================================================
   三、头像花环：整个框要**包住**头像（公共层只给 -3px，缩在里面像贴纸）
   ============================================================ */
/* ============================================================
   三、头像花环：整个框要**包住**头像，而且每套皮肤的花环胖瘦不一样
   ★ 2026-10-28 宝宝真机实锤「有的不贴合、每个图长得不一样要单独检查」：
     原来这里写死 -8 / -10 / -11 / -14px，可是 13 套花环的内孔比例从 0.57 到 0.90，
     同一个 -10px 在薄环那几套上就是把一圈花推开飘在头像外面。
     现在统一改用 --skin-wreath-inset（js/theme-skin.js 读 _SKIN_FIT 逐套算出来的 %），
     % 还会跟着头像尺寸自动缩放（列表 40px / 聊天 44px / 朋友圈 68px 一套代码通吃）。
   ============================================================ */
html[data-theme-skin] #tab-chat #conversation-list .cl-avatar-wrap::after,
html[data-theme-skin] .msg-avatar::after,
html[data-theme-skin] .mom-avatar::after,
html[data-theme-skin] .mom-banner-avatar::after {
    inset: var(--skin-wreath-inset, -18%) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
/* 花环挂件本身不许露出方块底色，只留花 */
html[data-theme-skin] :is(.cl-avatar-wrap, .msg-avatar, .mom-avatar, .mom-banner-avatar)::after {
    background-color: transparent !important;
}
html[data-theme-skin] #tab-chat #conversation-list .cl-avatar-wrap {
    overflow: visible !important;
}
/* 朋友圈封面那个大号头像：花环跟着比例走就够了，不再单独写死一圈 */
html[data-theme-skin] .mom-banner-avatar {
    overflow: visible !important;
    /* ★ 2026-10-29 宝宝真机：「最中间我的那个头像有一圈白边，花式主题下不要白边，直接透出背景，
       要不感觉像是没被填满」——白边有两处：panels-moments.css 的 border:3px solid #fff，
       和 theme-skin.css 第 557 行给头像加的那圈 outline。两处一起撤掉：
       68px 的框里照片从此铺满整格，装饰交给花环 ::after，框外直接透出背景。 */
    border: 0 !important;
    outline: 0 !important;
}
html[data-theme-skin][data-avatar-frame="on"] .mom-banner-avatar {
    border-radius: 50% !important;
}
/* 花环包在外面 → 容器不能让照片被裁，于是照片自己要切圆（否则露出四个直角，宝宝截图里那个方头像）
   ★ 2026-10-29 宝宝：「关掉头像外框以后，希望聊天界面和主界面恢复成图1那样方形圆角，
   而不是这样的圆形看着笨笨的」——切圆只在花环开着的时候做，关掉就跟着容器走回方形圆角。 */
/* ★ 2026-10-31 宝宝图10 实锤：「头像框未能完全覆盖头像，kstar 公告那个白色头像对比非常明显，
   头像框内部还有边角的小空余，能看出里面的头像是正方形」——
   原来切圆挂的条件是 [data-avatar-frame="on"]，可聊天列表那条路径上这个属性并不保证在场，
   属性一缺三张头像就退回方角，花环是圆的、照片是方的，四个角从环里露出来。
   改成「只要不是明确关掉就切圆」，跟花环自己的显示条件对齐。 */
html[data-theme-skin]:not([data-avatar-frame="off"]) .mom-banner-avatar img,
html[data-theme-skin]:not([data-avatar-frame="off"]) .mom-banner-avatar > div,
html[data-theme-skin]:not([data-avatar-frame="off"]) .mom-avatar img,
html[data-theme-skin]:not([data-avatar-frame="off"]) .msg-avatar img,
html[data-theme-skin]:not([data-avatar-frame="off"]) .cl-avatar img,
html[data-theme-skin]:not([data-avatar-frame="off"]) .cl-avatar > div,
html[data-theme-skin]:not([data-avatar-frame="off"]) .cl-avatar-inner {
    border-radius: 50% !important;
}
html[data-theme-skin][data-avatar-frame="off"] :is(
    #tab-chat #conversation-list .cl-avatar-wrap,
    #tab-chat #conversation-list .cl-avatar,
    .msg-avatar,
    .mom-avatar
) {
    border-radius: 12px !important;
}
html[data-theme-skin][data-avatar-frame="off"] .mom-banner-avatar {
    border-radius: 16px !important;
}
html[data-theme-skin][data-avatar-frame="off"] :is(.mom-banner-avatar, .mom-avatar, .msg-avatar, .cl-avatar) img,
html[data-theme-skin][data-avatar-frame="off"] .mom-banner-avatar > div {
    border-radius: inherit !important;
}

/* 头像花环开关（设置 → 外观与声音 → 头像花环，默认开）
   关掉时一处残留都不许留：4 种头像的花环同时收掉。素材图本身不动。 */
html[data-theme-skin][data-avatar-frame="off"] :is(
    #tab-chat #conversation-list .cl-avatar-wrap,
    .msg-avatar,
    .mom-avatar,
    .mom-banner-avatar
)::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   四、底栏与页面底部：内容滚到栏前要柔和收一层，不许硬切一刀
   ============================================================ */
html[data-theme-skin] #bottom-nav {
    background: var(--skin-surface-glass) !important;
    border-top: none !important;
    box-shadow: 0 -1px 0 var(--skin-highlight-soft) inset, 0 -10px 26px var(--skin-shadow-soft) !important;
    backdrop-filter: blur(24px) saturate(128%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(128%) !important;
}
/* ★ 2026-10-28 宝宝真机实锤「往上滑，那个渐变也跟着上去卡在页面上了」：
   原来把渐变挂在 #tab-chat/#tab-moments/#tab-my 的 ::after 上，那几个容器**自己是滚动容器**，
   于是渐变跟着内容一起滚，滚到中间就是一条卡住不动的白带。
   现在挂到 #bottom-nav::before（底栏是 flex 里的固定项、永不滚动），
   它永远停在底栏正上方那一截，跟内容滚到哪儿无关。 */
html[data-theme-skin] #bottom-nav {
    position: relative;
}
html[data-theme-skin] #bottom-nav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 56px;
    pointer-events: none;
    z-index: 0;
    /* ★ 渐变的颜色必须取「页面底色」，不能取墨色：取墨色在浅色那几套上是往纸上糊一层黑灰，
       宝宝会看成一道脏印子。这样浅套变浅、深套变深，永远跟页面同色系地虚过去。 */
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--skin-bg) 42%, transparent) 46%,
        color-mix(in srgb, var(--skin-bg) 88%, transparent) 100%);
}

/* 聊天列表顶栏透明：原来一块不透明纸色，跟下面的花纹之间就是一道白 */
html[data-theme-skin] #tab-chat #conversation-list .cl-header {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ============================================================
   五、设置子页：花纹别铺太满，叠一层纸色薄雾；导语标题必须是中文衬线体
   （原来只写 Georgia / Songti SC，手机上俩都没有 → 掉回系统黑体，看着廉价）
   ★ 收藏页也算 .mysec-page，但它要「干净纸面」→ 这里排除（收口区在文件末尾）
   ============================================================ */
html[data-theme-skin] :is(#sub-help, .mysec-page):not(#sub-favorites) {
    /* 图就在元素自己身上（见上面那条），这里只把纸色雾加重一点点，保证字清楚。 */
    background-image: linear-gradient(var(--craft-veil-weak), var(--craft-veil-mid)), var(--skin-media-atmosphere, var(--skin-media-cover)) !important;
    background-size: 100% 100%, cover !important;
    background-position: center, center top !important;
    background-repeat: no-repeat, no-repeat !important;
}
html[data-theme-skin] .ui3-intro .ui3-lead-title {
    font-family: 'Playfair Display', Georgia, 'Noto Serif SC', 'Songti SC', 'STSong', 'PingFang SC', serif !important;
    font-size: 23px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    color: var(--skin-ink) !important;
    text-shadow: 0 1px 0 var(--skin-highlight-soft) !important;
}

/* ============================================================
   六、朋友圈：封面与列表接一段柔和渐变；卡片干净纸面 + 一个角落小装饰
   ============================================================ */
html[data-theme-skin] #tab-moments .mom-banner {
    position: relative;
}
/* ★ 2026-10-28 宝宝真机实锤「封面和下面的板块没有任何过渡，资料那里一条交界线卡在中间」：
   原来在封面上盖一条「从透明渐变到纸色」的色带 —— 可是封面下面那层是花纹底 + 薄雾，
   色带的纸色跟它永远差一点，于是反而画出一条硬边。
   现在改成**把照片自己虚化掉**（mask 往下渐隐到透明），底下是什么颜色就透出什么颜色，
   13 套皮肤同一段代码都对，永远不会再有交界线。 */
html[data-theme-skin] #tab-moments .mom-banner::after {
    content: none;
}
html[data-theme-skin] #tab-moments .mom-banner-cover {
    -webkit-mask-image: linear-gradient(180deg, #000 54%, rgba(0, 0, 0, .55) 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 54%, rgba(0, 0, 0, .55) 78%, transparent 100%);
}
html[data-theme-skin] #tab-moments .mom-banner-info {
    background: transparent !important;
}

/* 每条内容不要底纹（太花太乱）：干净纸面 + 右下角一个小枝丫，一处装饰就够 */
html[data-theme-skin] #tab-moments .mom-card {
    background-color: var(--skin-paper-bright) !important;
    background-image: var(--skin-corner-ornament, var(--skin-icon-line-corner)) !important;
    background-size: 30px 30px !important;
    background-position: right 10px bottom 8px !important;
    background-repeat: no-repeat !important;
    border-color: var(--skin-line-soft) !important;
}

/* 最下方「写下一段时光」：按钮材质回到纯色主题那套，去掉它上面那道横线 */
html[data-theme-skin] .moments-post-bar {
    background: none !important;
    border-top: none !important;
    box-shadow: none !important;
}
html[data-theme-skin] .moments-post-btn {
    background-image: none !important;
    box-shadow: none !important;
    /* ★ 2026-10-29 宝宝真机：「『写下一段时光』太透了，稍微稍微实一些，要不然有点丑」
       ——原来底色吃的是 theme-skin.css 第 535 行的 --skin-petal-glass（花瓣玻璃＝半透明），
       换成同族的实色 --skin-petal；边框与内高光不动，所以还是花式主题那张纸，只是不透光了。 */
    background-color: var(--skin-petal) !important;
}

/* ============================================================
   七、小窝：完全回到纯色主题那套（宝宝原话「字效果、图标边框都不好看」）
   撤 ≠ 透明：圆底、白边、暖阴影、标签白字柔影，一个都不少，只换图标本身。
   ============================================================ */
html[data-theme-skin] #tab-nest,
html[data-theme-skin] #nest-home,
html[data-theme-skin] #nest-home .nh-title-area {
    background-image: none !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}
html[data-theme-skin] #nest-home .nh-icon-circle {
    background-image: none !important;
    background-color: var(--craft-nest-disc) !important;
    border: 1px solid var(--craft-nest-disc-line) !important;
    box-shadow: 0 1px 2px rgba(30, 28, 26, 0.08), 0 4px 14px rgba(30, 28, 26, 0.14) !important;
}
html[data-theme-skin] #nest-home .nh-icon-label {
    color: #FCFAF6 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 5px rgba(30, 28, 26, 0.45) !important;
}
/* 花式主题的小窝图标是 128px 手绘插图（不是线条），30px 会把细节糊掉 → 给它多一点位置。
   共享线性图标（纯色主题 / 还没配图的花式包）不走这条，保持原尺寸。 */
html[data-theme-skin] #nest-home .nh-icon-circle img {
    width: 32px !important;
    height: 32px !important;
}
@media (max-width: 369px) {
    html[data-theme-skin] #nest-home .nh-icon-circle img {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ============================================================
   八、「我的」页入口小方块 / 分区标题
   ============================================================ */
html[data-theme-skin] #tab-my .myh-space-btn {
    background-color: var(--skin-paper-bright) !important;
    background-image: var(--skin-corner-ornament, var(--skin-icon-line-corner)) !important;
    background-size: 30px 30px !important;
    background-position: right 9px bottom 7px !important;
    background-repeat: no-repeat !important;
    border-color: var(--skin-line-soft) !important;
    box-shadow: 0 2px 10px var(--skin-shadow-soft) !important;
}
html[data-theme-skin] #tab-my .myh-space-btn:active {
    transform: scale(.985);
}

/* 表情面板最右边那个小花（公共层在 .ep-group-bar 右侧挂了个小图标）—— 不要了 */
html[data-theme-skin] .ep-group-bar::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   九、皮肤气泡 × 外观六档质感
   皮肤负责「纸面底色 + 花边」，质感负责「表面」，两件事正交，叠起来谁也不吃掉谁。
   （公共皮肤选择器特异性高于 css/chat/bubble-styles.css，不加这一段六档会全部没反应）
   ============================================================ */
/* 磨砂玻璃：纸面让出一点透明度（★ 2026-10-30 不再叠 backdrop-filter，理由同 bubble-styles.css：
   每个气泡一层实时模糊会把整页绘制缓存打失效，宝宝实机「聊久了往上翻特别卡」的元凶） */
html[data-theme-skin][data-skin-bubble][data-bubble="frost"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell):not(.emoji-bubble) {
    background-color: color-mix(in srgb, var(--skin-paper-bright) 88%, transparent) !important;
    background-image: linear-gradient(160deg, var(--craft-veil-weak) 0%, color-mix(in srgb, var(--skin-bg-alt) 88%, transparent) 100%) !important;
}
html[data-theme-skin][data-skin-bubble][data-bubble="frost"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell):not(.emoji-bubble) {
    background-color: color-mix(in srgb, var(--skin-petal) 86%, transparent) !important;
    background-image: linear-gradient(150deg, color-mix(in srgb, var(--skin-petal) 78%, transparent) 0%, color-mix(in srgb, var(--skin-petal) 92%, transparent) 100%) !important;
}
/* 纸感哑光：纸面上再压一层极淡斜光 */
html[data-theme-skin][data-skin-bubble][data-bubble="matte"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell):not(.emoji-bubble) {
    background-image:
        linear-gradient(160deg, var(--skin-highlight-soft), transparent 58%),
        linear-gradient(160deg, var(--skin-paper-bright) 0%, var(--skin-bg-alt) 60%, var(--skin-paper-soft) 100%) !important;
}
html[data-theme-skin][data-skin-bubble][data-bubble="matte"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell):not(.emoji-bubble) {
    background-image:
        linear-gradient(160deg, var(--skin-highlight-soft), transparent 58%),
        linear-gradient(150deg, color-mix(in srgb, var(--skin-petal) 82%, var(--skin-bg-alt)) 0%, var(--skin-petal) 55%, color-mix(in srgb, var(--skin-petal) 88%, var(--skin-line)) 100%) !important;
}
/* 丝绒：斜向柔影，比哑光更明显一点 */
html[data-theme-skin][data-skin-bubble][data-bubble="velvet"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell):not(.emoji-bubble) {
    background-image:
        linear-gradient(145deg, var(--skin-highlight) 0%, transparent 42%, var(--skin-shadow-soft) 100%),
        linear-gradient(160deg, var(--skin-paper-bright) 0%, var(--skin-bg-alt) 60%, var(--skin-paper-soft) 100%) !important;
}
html[data-theme-skin][data-skin-bubble][data-bubble="velvet"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell):not(.emoji-bubble) {
    background-image:
        linear-gradient(145deg, var(--skin-highlight) 0%, transparent 42%, var(--skin-shadow-mid) 100%),
        linear-gradient(150deg, color-mix(in srgb, var(--skin-petal) 82%, var(--skin-bg-alt)) 0%, var(--skin-petal) 55%, color-mix(in srgb, var(--skin-petal) 88%, var(--skin-line)) 100%) !important;
}
/* 描金细线：沿内圈加一道金线，纸面和花边都保留 */
html[data-theme-skin][data-skin-bubble][data-bubble="goldline"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell):not(.emoji-bubble) {
    box-shadow:
        inset 0 0 0 1px var(--skin-line-strong),
        inset 0 1px 0 var(--skin-highlight),
        0 8px 20px -13px var(--skin-shadow-deep) !important;
}
html[data-theme-skin][data-skin-bubble][data-bubble="goldline"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell):not(.emoji-bubble) {
    box-shadow:
        inset 0 0 0 1px var(--skin-line-strong),
        inset 0 1px 0 var(--skin-highlight),
        0 8px 20px -13px var(--skin-shadow-deep) !important;
}
/* 透明描边：纸面本身就是主角，真做成全透明会连花边一起消失
   → 这一档解释成「极淡纸面 + 完整花边」 */
html[data-theme-skin][data-skin-bubble][data-bubble="outline"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell):not(.emoji-bubble) {
    background-color: color-mix(in srgb, var(--skin-paper-bright) 55%, transparent) !important;
    background-image: none !important;
}
html[data-theme-skin][data-skin-bubble][data-bubble="outline"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell):not(.emoji-bubble) {
    background-color: color-mix(in srgb, var(--skin-petal) 52%, transparent) !important;
    background-image: none !important;
}
/* hover：补回被压掉的内圈金线 */
html[data-theme-skin][data-skin-bubble] .msg .bubble:not([class*="-bubble"]):not([class*="-shell"]):hover {
    box-shadow:
        inset 0 0 0 1px var(--skin-line-soft),
        inset 0 1px 0 var(--skin-highlight),
        0 10px 24px -12px var(--skin-shadow-deep),
        0 0 0 1px var(--skin-line-soft);
}

/* ============================================================
   十、记忆库 / 百科全书：条目卡原来是纯白块，跟花纹底脱节 → 铺素材纸
   ★ 收藏页不在这里：宝宝 2026-10-28 定「每条收藏还铺一层底图太花」，
     收藏条就是干净纸面（见 css/theme-skin.css 收藏那一段）
   ============================================================ */
html[data-theme-skin] #tab-memory :is(.ml-card, .ml-today-card, .ml-featured-card, .ml-stat, .ml-persona-card, .ml-persona-map-card, .ml-persona-field-card, .ml-persona-edit-card, .ml-persona-rel-row, .ui3mem-card, .ui3mem-today, .ui3mem-featured, .ui3mem-entry),
html[data-theme-skin] #sub-help :is(.help-tut-card, .help-summary-card) {
    background-color: var(--skin-paper-bright) !important;
    background-image: linear-gradient(var(--craft-card-veil), var(--craft-card-veil)), var(--skin-media-cover) !important;
    background-size: auto, 780px auto !important;
    background-position: center, center top !important;
    background-repeat: no-repeat, repeat !important;
    border-color: var(--skin-line-soft) !important;
}

/* ============================================================
   收口区 —— 必须留在文件最末
   收藏同时命中上面 `:is(#sub-help, .mysec-page)` 那条（同特异性、但更靠前），
   「干净纸面」只有写在这里才赢。宝宝：「里面不要最底下那个纹了，有点重复，不太干净」
   ============================================================ */
html[data-theme-skin] #sub-favorites {
    background-color: var(--skin-paper-bright);
    background-image: none;
}

/* ============================================================
   十一、聊天列表（主界面）：2026-10-28 第二次真机实锤
   「主界面排版都做好了，只要换个图就好了」「日历和列表变窄了、暖调主题的背景图也被改了」
   —— 上一版在这里另造了一套「纸卡 + 缩窄」的排版，把宝宝认可的那套挤掉了。改法：
   版式、宽度、留白、字号一律交回 home-visual.css（暖调那套，一个像素都不动），
   这里只把那一套用到的 --home-* 素材换成当前主题自己的图，等于「同一张版式、换一套图」。
   新主题不需要在这里加任何排版规则；素材齐了（media + wreath/bloom/fleuron）就自动换上。
   ============================================================ */
/* ★ 2026-10-29 宝宝真机对比：「花漾暖调现在的图没有之前的图好看了」——
   暖调那套用的是她自己给的**真实花艺照片**（assets/library/2026-10-24/），
   其它 12 套才是 AI 生成的插画。所以暖调（skin=atelier）从这个「换图」里排除，
   版式和素材都交回 home-visual.css 那一套原样，一个像素都别动。 */
html[data-theme-skin][data-active-theme]:not([data-theme-skin="atelier"]) #tab-chat #conversation-list {
    --home-bg-light: var(--skin-media-bg);
    --home-bg-warm: var(--skin-media-bg);
    --home-bg-dark: var(--skin-media-bg);
    --home-card-light: var(--skin-media-card);
    --home-card-still-life: var(--skin-media-card);
    --home-card-dark: var(--skin-media-card);
    --home-band: var(--skin-media-band);
    --home-line-bouquet: var(--skin-icon-line-fleuron);
    --home-wreath: var(--skin-icon-wreath);
    --home-bloom: var(--skin-icon-bloom);
    --home-ink: var(--skin-ink);
    --home-rose: var(--skin-line);
    --home-gold: var(--skin-gold);
}
/* 陪伴卡（展开态/收起态）原来写死奶白纸色 #fcf7f1 和一层奶白雾，套到深色主题上会发白发脏。
   位置、圆角、内边距、高度动画全部照 home-visual 原样不动，只把纸色和雾换成该主题自己的纸色；
   展开态仍用卡面花图（--home-card-*），收起态仍用那条窄带图（--home-band），两者是两张不同的图。 */
html[data-theme-skin][data-active-theme]:not([data-theme-skin="atelier"]) #tab-chat #conversation-list .cp-banner {
    background-color: var(--skin-paper-bright);
    border-color: color-mix(in srgb, var(--skin-line) 42%, transparent);
    background-image:
        linear-gradient(180deg,
            color-mix(in srgb, var(--skin-paper-bright) 10%, transparent) 0%,
            color-mix(in srgb, var(--skin-paper-bright) 34%, transparent) 30%,
            color-mix(in srgb, var(--skin-paper-bright) 96%, transparent) 72%,
            var(--skin-paper-bright) 100%),
        var(--home-card-light);
    /* ★ 2026-10-31 宝宝真机实锤「陪伴天数收起时图片未居中铺开、下方空白」：
       这里只换了 background-image，尺寸仍是 .cp-banner 的默认 auto —— 卡面是整张摄影大图，
       auto 在卡片框里只露出左上角一小片、还平铺，看着就是「没铺开 + 底下一条空」。
       补上「雾层拉满、图 cover 居中」，跟老主题（floral/atelier）的观感对齐。 */
    background-size: 100% 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
html[data-theme-skin][data-active-theme]:not([data-theme-skin="atelier"]) #tab-chat #conversation-list .cp-banner.cp-collapsed {
    background-color: color-mix(in srgb, var(--skin-paper-bright) 90%, var(--skin-bg-alt));
    border-color: color-mix(in srgb, var(--skin-line) 36%, transparent);
    background-image:
        linear-gradient(90deg,
            color-mix(in srgb, var(--skin-paper-bright) 42%, transparent),
            color-mix(in srgb, var(--skin-paper-bright) 18%, transparent) 52%,
            color-mix(in srgb, var(--skin-paper-bright) 42%, transparent)),
        var(--home-band);
    /* 同上：收起态那条窄带图是 2:1 的横幅，容器比它扁得多，必须 cover + 居中才铺满 */
    background-size: 100% 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
/* 列表底纹上面那层「雾」原来写死成奶白（rgba 255,252,250），套到深色主题上会发灰发脏。
   版式一点不动，只把这层雾换成该主题自己的纸色；深色模式下换成暗雾。 */
html[data-theme-skin][data-active-theme]:not([data-theme-skin="atelier"]) #tab-chat #conversation-list {
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--skin-paper-bright) 24%, transparent), color-mix(in srgb, var(--skin-paper-bright) 76%, transparent)),
        var(--skin-media-bg);
}
html[data-theme-skin][data-active-theme]:not([data-theme-skin="atelier"])[data-theme-mode="dark"] #tab-chat #conversation-list {
    background-image:
        linear-gradient(180deg, rgba(18, 15, 13, .30), rgba(14, 12, 10, .58)),
        var(--skin-media-bg);
}

/* ============================================================
   十二、「更多」面板：宝宝 2026-10-28 实锤
   「你根本没做聊天界面右上角三个点更多界面的美化」
   —— 之前 #more-panel 是 background:none 纯底色、每行也是平的一块。
   ============================================================ */
html[data-theme-skin] #more-panel,
html[data-theme-skin] #more-panel #more-menu {
    background-color: var(--skin-paper-bright) !important;
    /* ★ 不许把 panel 那张四角花框铺在这个面板上：它是给大弹窗画的，铺到这么小的一条上
       花枝会把标题整个盖住（预览里「更多」两个字直接埋在花里）。这里只要纸面 + 一道金线。 */
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--skin-paper) 55%, transparent),
        transparent 42%) !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
html[data-theme-skin] #more-panel {
    box-shadow: 0 -12px 34px var(--skin-shadow-soft) !important;
}
html[data-theme-skin] #more-panel #more-menu::before {
    content: "";
    display: block;
    width: 74px;
    height: 1px;
    margin: 0 auto 12px;
    background: linear-gradient(90deg, transparent, var(--skin-gold), transparent);
    opacity: .75;
}
html[data-theme-skin] #more-panel #more-title {
    font-family: 'Playfair Display', Georgia, 'Noto Serif SC', 'Songti SC', 'STSong', serif !important;
    color: var(--skin-ink) !important;
    letter-spacing: .08em;
}
html[data-theme-skin] #more-panel .more-menu-subtitle {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-style: italic;
    letter-spacing: .16em;
    color: color-mix(in srgb, var(--skin-ink) 62%, transparent) !important;
}
html[data-theme-skin] #more-panel .more-menu-card {
    border: var(--skin-line-width, 1px) solid var(--skin-line-soft) !important;
    border-radius: var(--skin-radius-card) !important;
    background-color: color-mix(in srgb, var(--skin-paper-bright) 82%, transparent) !important;
    background-image: none !important;
    box-shadow: 0 4px 12px var(--skin-shadow-soft), inset 0 1px 0 var(--skin-highlight) !important;
}
html[data-theme-skin] #more-panel .more-menu-card:active {
    background-color: var(--skin-petal-glass) !important;
}
html[data-theme-skin] #more-panel .more-card-icon {
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--skin-petal) 30%, transparent);
    box-shadow: inset 0 0 0 1px var(--skin-line-soft);
}
html[data-theme-skin] #more-panel .more-card-label {
    font-family: 'Playfair Display', Georgia, 'Noto Serif SC', 'Songti SC', 'STSong', serif !important;
    color: var(--skin-ink) !important;
    letter-spacing: .02em;
}
html[data-theme-skin] #more-panel .more-card-hint {
    color: color-mix(in srgb, var(--skin-ink) 66%, transparent) !important;
}
html[data-theme-skin] #more-panel .more-card-arrow { color: var(--skin-ink) !important; opacity: .5; }

/* ============================================================
   十二、「我的」页 · 小红花黑板：板面/板框跟着主题走
   （宝宝 2026-10-29：「小黑板也可以跟随主题变变色，都是墨绿黑也不好看」）
   板面底色 = 该套的次要底色（bg-alt）兑一点深色 → 暖调出暖木、月夜出深靛、红玫瑰出酒黑，
   深色主题依旧是深板面，粉笔字（--kf-chalk 奶白）照样看得清；
   板框 = 该套的线条色兑木色。暖调那套另有专属木托板（theme-atelier-craft.css 七、），
   那份后加载、会盖过这里，保持她验收过的样子。
   ============================================================ */
html[data-theme-skin] .kf-board-frame {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--skin-line) 46%, #d8cdbf),
        color-mix(in srgb, var(--skin-line) 34%, #94867a));
}

html[data-theme-skin] .kf-board {
    background:
        radial-gradient(125% 92% at 50% 0%,
            color-mix(in srgb, var(--skin-bg-alt) 22%, #2f2a26) 0%,
            color-mix(in srgb, var(--skin-bg-alt) 12%, #221d1a) 100%);
}