/* Shared illustrated-theme layer. Theme packs only supply manifest tokens/assets. */
html[data-theme-skin] {
    --skin-radius-card: 20px;
    --skin-radius-panel: 25px;
    --skin-radius-control: 15px;
    --skin-shadow: 0 9px 24px color-mix(in srgb, var(--skin-line) 17%, transparent);
    --skin-line-soft: color-mix(in srgb, var(--skin-line) 24%, transparent);
    --skin-line-strong: color-mix(in srgb, var(--skin-gold) 58%, var(--skin-bg-alt));
    --skin-paper-soft: color-mix(in srgb, var(--skin-bg-alt) 58%, var(--skin-bg));
    --skin-paper-bright: color-mix(in srgb, var(--skin-bg-alt) 30%, var(--skin-bg));
    --skin-highlight: color-mix(in srgb, var(--skin-bg-alt) 92%, transparent);
    --skin-highlight-soft: color-mix(in srgb, var(--skin-bg-alt) 78%, transparent);
    --skin-shadow-soft: color-mix(in srgb, var(--skin-line) 9%, transparent);
    --skin-shadow-mid: color-mix(in srgb, var(--skin-line) 14%, transparent);
    --skin-shadow-deep: color-mix(in srgb, var(--skin-line) 20%, transparent);
    --skin-petal-soft: color-mix(in srgb, var(--skin-petal) 38%, transparent);
    --skin-petal-glass: color-mix(in srgb, var(--skin-petal) 22%, transparent);
    --skin-surface-glass: color-mix(in srgb, var(--skin-bg-alt) 78%, transparent);
    --skin-ink: color-mix(in srgb, var(--skin-line) 72%, var(--skin-bg) 28%);
    --skin-ink-soft: color-mix(in srgb, var(--skin-line) 62%, var(--skin-bg) 38%);
}

/* Reusable component base. A pack only supplies its manifest palette and image variables. */
html[data-theme-skin] :is(.skin-surface, .skin-card, .skin-panel, .mom-card, .ml-card, .fav-card, .moment-editor-card) {
    color: var(--skin-ink);
    border-color: var(--skin-line-soft);
    background-color: var(--skin-paper-soft);
    box-shadow: var(--skin-shadow), inset 0 1px 0 var(--skin-highlight-soft);
}
html[data-theme-skin] :is(.skin-card, .mom-card, .ml-card, .fav-card) { border-radius: var(--skin-radius-card); }
html[data-theme-skin] :is(.skin-panel, .moment-editor-card) { border-radius: var(--skin-radius-panel); }
html[data-theme-skin] .skin-control {
    color: var(--skin-ink);
    border: var(--skin-line-width, 1px) solid var(--skin-line-strong);
    border-radius: var(--skin-radius-control);
    background: linear-gradient(180deg, var(--skin-paper-bright), var(--skin-paper-soft));
    box-shadow: inset 0 1px 0 var(--skin-highlight), 0 3px 10px var(--skin-shadow-soft);
}
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"])) {
    border-color: var(--skin-line-strong);
    border-radius: var(--skin-radius-panel);
    background-color: var(--skin-paper-bright);
    /* 2026-11 宝宝：四边花框一旦被拉长就丑，整框素材不再铺任何面板（见 theme-craft-base.css 二）。 */
    background-image: none;
    box-shadow: 0 16px 40px var(--skin-shadow-deep), inset 0 1px 0 var(--skin-highlight);
}

/* The six app areas share this material layer while retaining their existing page structure. */
html[data-theme-skin] #tab-moments,
html[data-theme-skin] #sub-favorites {
    background-color: var(--skin-bg);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--skin-bg-alt) 20%, transparent), color-mix(in srgb, var(--skin-bg-alt) 58%, transparent)), var(--skin-media-bg);
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}
html[data-theme-skin] #tab-memory {
    background-color: var(--skin-bg);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--skin-bg-alt) 18%, transparent), color-mix(in srgb, var(--skin-bg-alt) 48%, transparent)), var(--skin-media-bg);
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}
html[data-theme-skin] #chat-view,
html[data-theme-skin] :is(#sub-help, .mysec-page) {
    background-color: var(--skin-bg);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--skin-bg-alt) 24%, transparent), color-mix(in srgb, var(--skin-bg) 64%, transparent)), var(--skin-media-bg);
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}
/* 小窝：那层半透明纸纹平铺不要（宝宝：「小窝界面不要加那个半透明的平铺图，好丑」）
   ——房间照片本来就是主角，叠一层纹只显脏。共享层与 atelier 都不许再给 .nh-bg 加背景。 */
html[data-theme-skin] #tab-nest #nest-home .nh-bg::after,
html[data-theme-skin] #tab-nest .nh-bg::after {
    content: none !important;
    display: none !important;
}

/* Home baseline is preserved: no replacement backgrounds on #app, conversation-list or cp-banner. */
/* 花环贴合（宝宝 2026-10-28 真机实锤「头像圈跟头像分开、不贴合」）：
   13 套花环的**内孔比例完全不一样**（0.57~0.90），以前一个固定 inset:-3px + 100% 100% 拉伸，
   薄环那几套（月光/星屑）就被撑成一圈飘在外面的花。
   现在按每套自己的内孔算尺寸（--skin-wreath-inset 由 js/theme-skin.js 的 _SKIN_FIT 注入），
   contain 保持不拉伸 → 环的内缘永远压在头像边缘上，谁都不会飞出去。 */
html[data-theme-skin] :is(.cl-avatar-wrap, .msg-avatar, .mom-avatar, .mom-banner-avatar, .mom-inter-item-avatar)::after {
    content: "";
    position: absolute;
    inset: var(--skin-wreath-inset, -14%);
    z-index: 2;
    pointer-events: none;
    background: var(--skin-icon-frame-avatar) center / contain no-repeat;
}
html[data-theme-skin] :is(.cl-avatar-wrap, .msg-avatar, .mom-avatar, .mom-banner-avatar, .mom-inter-item-avatar) { position: relative; }
html[data-theme-skin] :is(.msg-avatar, .mom-avatar, .mom-banner-avatar) { overflow: visible; }
/* ★ 2026-10-29（宝宝真机实锤：「···」旁边他的头像，花式头像框是被圆包裹在里面的，不是破圆的）：
   那个头像在 chat-render.css 里是 `#typing-indicator .msg-avatar { overflow: hidden }`，
   ID 选择器(1,1,0) 压过上面那行(0,2,1) → 花环 ::after 的 inset:-N% 溢不出去，整圈被圆裁掉。
   这里用同等 ID 权重放行；照片本身仍由下面第 98-99 行的 border-radius:50% !important 切圆，
   不会露出直角。尺寸 36×36 与普通消息头像一致，花环大小天然对齐。 */
html[data-theme-skin] #typing-indicator .msg-avatar { overflow: visible; }
/* 头像本身必须是圆的：花环要包在外面，容器只能 overflow:visible，
   于是照片四周的直角会露在花环外（宝宝截图里那个方头像就是这么来的）→ 直接给照片切圆。 */
html[data-theme-skin] :is(.cl-avatar, .cl-avatar-wrap > *, .msg-avatar, .msg-avatar > *, .mom-avatar, .mom-avatar > *, .mom-banner-avatar, .mom-banner-avatar > *, .mom-inter-item-avatar, .mom-inter-item-avatar > *) {
    border-radius: 50% !important;
}

/* Distinct flower-paper chat bubbles. Pseudo ornaments never participate in message sizing. */
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell),
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell) {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: var(--skin-line-width, 1px) solid var(--skin-line-strong);
    border-radius: var(--skin-radius-control);
    background-clip: padding-box;
    box-shadow: 0 5px 14px var(--skin-shadow-mid), inset 0 1px 0 var(--skin-highlight), inset 0 -2px 5px var(--skin-shadow-soft);
}
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell) {
    background: linear-gradient(145deg, var(--skin-paper-bright), var(--skin-bg-alt) 68%, color-mix(in srgb, var(--skin-bg-alt) 76%, var(--skin-petal)));
    border-bottom-left-radius: 8px;
}
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell) {
    background: linear-gradient(145deg, color-mix(in srgb, var(--skin-bg-alt) 52%, var(--skin-petal)), color-mix(in srgb, var(--skin-petal) 76%, var(--skin-line)));
    border-bottom-right-radius: 8px;
}
/* 气泡上的蝴蝶结 / 尾巴（宝宝 2026-10-30：「有一些贴着有一些不贴，难道做不到一个一个去放置吗」）：
   前几次都错在「一个方盒子通吃 19 套」——素材画布不是方的（128×112~128×128），图里上下留白
   也不同（蝴蝶结内容只占画布 68%~92%），`contain` 之后每套画出来的**实际高度差 7px**
   （21~28px）：底边虽然都对齐，眼睛看到的却是「有的贴着、有的飘在半空」。
   现在改成逐套量、逐套写数：--skin-bow-w / --skin-bow-h / --skin-bow-push 由 js/theme-skin.js
   的 _SKIN_FIT 按每套自己的 alpha 包围盒算好，盒子尺寸**正好等于画布缩放后的尺寸**
   + background-size: 100% 100%。
   ★ 2026-11-01 宝宝第五次定标（原话「你是把每一张全都按我说的改了高度吗请问，我一张一张调的
   最后你又搞成统一，我真的累了」）：我错把「她指的两侧档位」当成「19 套统一」，把她一张一张
   调好的 14 套全推平了。现在只有**她点名的 5 套**（morning / atelier / cyber / forest / marble）
   在 _SKIN_FIT 里多配一个 bowPushUser（她的气泡 22px、他的气泡 18px），其余 14 套没有这个字段，
   走 `var(--skin-bow-push-user, var(--skin-bow-push))` 的回落＝跟助手侧完全同一个值，位置一个字不动。
   铁律：位置类改动只改她点名的套，绝不统一。 */
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell)::before,
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell)::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: var(--skin-bow-w, 34px);
    height: var(--skin-bow-h, 31px);
    top: auto;
    bottom: calc(100% - var(--skin-bow-push, 10.6px));
    pointer-events: none;
    background: var(--skin-icon-line-bow) center bottom / 100% 100% no-repeat;
}
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell)::before { left: calc(var(--skin-bow-w, 34px) * -0.42); }
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell)::after { right: calc(var(--skin-bow-w, 34px) * -0.42); transform: scaleX(-1); bottom: calc(100% - var(--skin-bow-push-user, var(--skin-bow-push, 10.6px))); }
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell)::after,
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell)::before {
    content: "";
    position: absolute;
    width: var(--skin-tail-w, 16.7px);
    height: var(--skin-tail-h, 13.9px);
    bottom: calc(0px - var(--skin-tail-bottom, 6.6px));
    pointer-events: none;
    background: var(--skin-icon-line-bubbletail) center top / 100% 100% no-repeat;
    opacity: .68;
}
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.assistant .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell)::after { left: calc(var(--skin-tail-w, 16.7px) * -0.35); }
html[data-theme-skin][data-skin-bubble="floral-frame"] .msg.user:not(.msg-failed) .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell)::before { right: calc(var(--skin-tail-w, 16.7px) * -0.35); transform: scaleX(-1); }
html[data-theme-skin] .msg.assistant .bubble-wrap,
html[data-theme-skin] .msg.user .bubble-wrap { position: relative; }

/* Chat controls keep their original icon nodes visible; the theme dresses only their shared surfaces. */
html[data-theme-skin] #input-area .circle-btn {
    border: var(--skin-line-width, 1px) solid var(--skin-line-soft);
    background: linear-gradient(145deg, var(--skin-paper-bright), var(--skin-paper-soft));
    box-shadow: inset 0 1px 0 var(--skin-highlight), 0 3px 8px var(--skin-shadow-soft);
}
/* ★ 2026-10-29 删掉 html[data-theme-skin] #send-btn::before 加的那个 17px 图标：
   发送键本身就是文字按钮「发送」，再塞一个纸飞机图标 = 左边多出来一节、字被挤歪。 */
/* 发送键：保持纯色模式那种「实心药丸」，只借皮肤的投影；不做描边玻璃款
   （原来它跟着 mom-card-menu-btn 一起吃了 border + inset 高光，看着发虚、不像实心） */
html[data-theme-skin] #send-btn {
    background: var(--accent-gradient);
    color: #fff;
    border: none;
    box-shadow: 0 3px 10px var(--skin-shadow-soft);
}
html[data-theme-skin] #input-area,
html[data-theme-skin] #bottom-panel,
html[data-theme-skin] #bottom-panel-plus,
html[data-theme-skin] #bottom-panel-emoji {
    border-color: var(--skin-line-soft);
    background-color: var(--skin-paper-bright);
    box-shadow: 0 -3px 14px var(--skin-shadow-soft), inset 0 1px 0 var(--skin-highlight);
}
html[data-theme-skin] #bottom-panel-plus .plus-item-icon {
    border: var(--skin-line-width, 1px) solid var(--skin-line-soft);
    border-radius: calc(var(--skin-radius-control) + 3px);
    background: linear-gradient(145deg, var(--skin-paper-bright), var(--skin-bg-alt));
    box-shadow: inset 0 1px 0 var(--skin-highlight), 0 4px 12px var(--skin-shadow-soft);
}
/* 加号面板：深色主题里「深色线条 / 深色实心」的图标压在深底上等于没画（宝宝实锤：
   黑西装那套第二页一片白）。
   ★ 2026-11-02 宝宝当场纠正：「黑西装那一套不要搞亮色遮罩啊，要图标黑色，但是外圈有扩散的
   白色描边就好了嘛。」—— 所以不是把图漂白，而是给图加一圈白色晕染：形状和原色全部保留，
   只在轮廓外面发光，深底上就看得清，也跟她主题里「黑图标 + 白晕染」是一路的。
   浅色主题不加这个属性，一个像素都不动。口径见 js/theme-skin.js 的 plusPanelIsDark。 */
html[data-theme-skin] .plus-item[data-plus-lit] .plus-item-icon > img {
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95))
            drop-shadow(0 0 3px rgba(255, 255, 255, .82))
            drop-shadow(0 0 6px rgba(255, 255, 255, .5));
}

/* Moments: post cards, author frame, like/comment controls, detail and editor. */
html[data-theme-skin] #tab-moments .mom-card,
html[data-theme-skin] .mom-detail-full-card .mom-card,
html[data-theme-skin] .moment-editor-card {
    position: relative;
    border: var(--skin-line-width, 1px) solid var(--skin-line-soft);
    border-radius: var(--skin-radius-card);
    background-image: linear-gradient(150deg, var(--skin-highlight), var(--skin-paper-soft)), var(--skin-media-card), var(--skin-media-paper);
    background-size: auto, cover, 180px 180px;
    box-shadow: var(--skin-shadow), inset 0 1px 0 var(--skin-highlight);
}
/* 每条朋友圈只留一个装饰（2026-10-28 宝宝：「保留右下角那个小装饰就好了，另一个不要了，反正长得都一样」）。
   这里原来在右上角又挂了一个同一张角饰，跟右下角那个（见 theme-craft-base.css 里 mom-card 的 background-position）
   长得一模一样、一上一下两个 → 删掉上面那个，只留右下。 */
html[data-theme-skin] :is(.mom-avatar, .mom-banner-avatar, .mom-inter-item-avatar) { position: relative; }
html[data-theme-skin] .mom-comment-input button::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background: var(--skin-icon-icon-send) center / contain no-repeat; }
html[data-theme-skin] .moments-post-bar { background: linear-gradient(180deg, transparent, var(--skin-highlight) 40%); border-top: var(--skin-line-width, 1px) solid var(--skin-line-soft); }
html[data-theme-skin] :is(.mom-comment-input input, .moment-editor-textarea, .personal-moments-search input) {
    border-color: var(--skin-line-soft);
    border-radius: var(--skin-radius-control);
    background-color: var(--skin-paper-bright);
    box-shadow: inset 0 1px 3px var(--skin-shadow-soft);
}
html[data-theme-skin] .moments-empty-deco::before {
    content: "";
    display: block;
    width: 76px;
    height: 60px;
    margin: 0 auto 5px;
    background: var(--skin-icon-icon-empty) center / contain no-repeat;
}
html[data-theme-skin] .moments-empty::after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    top: 20%;
    right: 10%;
    pointer-events: none;
    background: var(--skin-icon-wreath) center / contain no-repeat;
    opacity: .22;
}
html[data-theme-skin] .moments-empty { position: relative; }

/* Nest: add soft material and floral details without replacing a user-selected room background. */
/* 「小窝」两字下面原来挂了一条 76×26 的绶带图（line-banner，就是那条带玫瑰的粉彩带）：
   素材 128×128 里绶带只占中间一条窄带，缩到 26px 高以后不过是「一小截看不清的粉带子」，
   宝宝 2026-10-28 原话「顶部中间为啥有个彩带？干啥的莫名其妙在那」。它不承载任何信息 → 去掉。 */
html[data-theme-skin] #tab-nest .nh-icon-circle {
    border-color: var(--skin-highlight);
    background: linear-gradient(150deg, var(--skin-surface-glass), color-mix(in srgb, var(--skin-petal) 30%, var(--skin-bg)));
    box-shadow: 0 3px 8px var(--skin-shadow-mid), 0 8px 20px var(--skin-shadow-mid), inset 0 1px 0 var(--skin-highlight);
}
html[data-theme-skin] #tab-nest .nh-icon-circle[data-icon="calendar"]::after {
    content: ""; position: absolute; inset: -2px; pointer-events: none;
    background: var(--skin-icon-icon-calendar) center / 18px no-repeat; opacity: .45;
}
html[data-theme-skin] #tab-nest .nh-icon-circle[data-icon="calls"]::after {
    content: ""; position: absolute; inset: -2px; pointer-events: none;
    background: var(--skin-icon-icon-online) right bottom / 12px no-repeat;
}

/* Memory library and detail: paper card, spine, stamp, section separators and state art. */
html[data-theme-skin] #tab-memory .ml-card,
html[data-theme-skin] #tab-memory .ml-detail-body {
    position: relative;
    border: var(--skin-line-width, 1px) solid var(--skin-line-soft);
    border-radius: var(--skin-radius-card);
    background-image: linear-gradient(145deg, var(--skin-highlight), var(--skin-paper-soft)), var(--skin-media-paper);
    background-size: auto, 180px 180px;
    box-shadow: var(--skin-shadow), inset 0 1px 0 var(--skin-highlight);
}
html[data-theme-skin] #tab-memory .ml-card-spine::after { content: ""; position: absolute; inset: 0 auto 0 -4px; width: 12px; background: var(--skin-icon-line-ribbon) center / 100% 100% no-repeat; opacity: .82; pointer-events: none; }
html[data-theme-skin] #tab-memory .ml-card::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 34px;
    height: 34px;
    pointer-events: none;
    background: var(--skin-icon-seal) center / contain no-repeat;
    opacity: .56;
}
html[data-theme-skin] #tab-memory .ml-search::before {
    content: ""; position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%);
    background: var(--skin-icon-icon-search) center / contain no-repeat;
}
html[data-theme-skin] #tab-memory .ml-search svg { opacity: .28; }
html[data-theme-skin] #tab-memory .ml-search { position: relative; }
html[data-theme-skin] #tab-memory .ml-detail-hero::after {
    content: ""; display: block; width: 82px; height: 34px; margin: 8px auto 0;
    background: var(--skin-icon-line-arch) center / contain no-repeat;
}
html[data-theme-skin] #tab-memory .ml-card-date::before {
    content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px;
    background: var(--skin-icon-icon-clock) center / contain no-repeat;
}
html[data-theme-skin] #tab-memory .ml-section-head::before {
    content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 7px; vertical-align: -4px;
    background: var(--skin-icon-icon-nav-memory) center / contain no-repeat;
}
html[data-theme-skin] #tab-memory .ml-card-check .ml-check-box { background-image: var(--skin-icon-icon-check); background-size: contain; }
html[data-theme-skin] #tab-memory .ml-card-badges::before {
    content: ""; display: inline-block; width: 18px; height: 18px; vertical-align: -4px;
    background: var(--skin-icon-icon-badge) center / contain no-repeat;
}
html[data-theme-skin] #tab-memory .ml-empty-deco::before,
html[data-theme-skin] #tab-memory .ml-detail-sub-empty::before {
    content: ""; display: block; width: 56px; height: 50px; margin: 0 auto 5px;
    background: var(--skin-icon-icon-empty) center / contain no-repeat;
}
html[data-theme-skin] #tab-memory .ml-pull-spinner { background: var(--skin-icon-icon-loading) center / contain no-repeat; }
html[data-theme-skin] #tab-memory .ml-empty-text::before { content: ""; display: block; width: 24px; height: 24px; margin: 0 auto 5px; background: var(--skin-icon-icon-notice) center / contain no-repeat; }
html[data-theme-skin] #tab-memory .ml-card-groups::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: -2px; background: var(--skin-icon-icon-pin) center / contain no-repeat; }
html[data-theme-skin] #tab-memory .ml-persona-avatar { position: relative; }
html[data-theme-skin] #tab-memory .ml-persona-avatar::after {
    content: ""; position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px;
    background: var(--skin-icon-icon-level) center / contain no-repeat;
}

/* 收藏页（宝宝 2026-10-28 真机实锤）：
   ① 顶部那张「大图」原来是 band 素材拉伸铺满 → 又大又糊；改成干净纸面 + 右侧一张完整方图，
      方图左边用纸色渐变虚化过去（不裁切、不拉伸、不糊）。
   ② 每条收藏原来都铺一层底图（780px 平铺）→ 太花，去掉，只留右上角火漆。 */
html[data-theme-skin] #sub-favorites .fav-intro {
    position: relative;
    background-color: var(--skin-paper-bright) !important;
    background-image:
        linear-gradient(90deg,
            var(--skin-paper-bright) 0%,
            var(--skin-paper-bright) 34%,
            color-mix(in srgb, var(--skin-paper-bright) 62%, transparent) 62%,
            transparent 84%),
        var(--skin-media-cover) !important;
    background-size: auto, 112px 112px !important;
    background-position: center, right 12px center !important;
    background-repeat: no-repeat !important;
    padding-right: 136px !important;
}
html[data-theme-skin] #sub-favorites .fav-card {
    position: relative;
    border: var(--skin-line-width, 1px) solid var(--skin-line-soft);
    background-color: var(--skin-paper-bright) !important;
    background-image: none !important;
}
html[data-theme-skin] #sub-favorites .fav-card::after {
    content: ""; position: absolute; top: 5px; right: 5px; width: 35px; height: 35px;
    pointer-events: none; background: var(--skin-icon-seal) center / contain no-repeat; opacity: .48;
}
html[data-theme-skin] #sub-favorites .fk-photo {
    background-image: linear-gradient(150deg, var(--skin-highlight), var(--skin-paper-soft)), var(--skin-media-cover), var(--skin-media-card);
}
html[data-theme-skin] #sub-favorites .fk-photo::before,
html[data-theme-skin] #sub-favorites .fk-book::before {
    content: ""; position: absolute; left: 5px; bottom: 5px; width: 46px; height: 46px;
    pointer-events: none; background: var(--skin-icon-bloom) center / contain no-repeat; opacity: .5;
}
html[data-theme-skin] #sub-favorites .fav-search-ico { background: var(--skin-icon-icon-search) center / contain no-repeat; }
html[data-theme-skin] #sub-favorites .fav-search-ico { flex-basis: 15px; height: 15px; }
html[data-theme-skin] #sub-favorites .fav-search-ico svg { opacity: .28; }
/* 子标签选中态：原来是「一个生硬的方块 + 字底下一个小贴图」，两样都去掉，改成柔和的胶囊底 */
html[data-theme-skin] #sub-favorites .fav-index .fav-filter-tab {
    border-radius: 999px !important;
}
html[data-theme-skin] #sub-favorites .fav-index .fav-filter-tab.active {
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--skin-petal) 40%, transparent) !important;
    box-shadow: inset 0 0 0 1px var(--skin-line-soft) !important;
    color: var(--skin-ink) !important;
}
html[data-theme-skin] #sub-favorites .fav-index .fav-filter-tab.active::after {
    content: none !important;
    display: none !important;
}

/* Shared icons for headings, menus, notice/online status and separators across the six pages. */
/* ★ 2026-11-02（宝宝实锤「图标变成了并排」）：#more-btn 的内容是文字 `···`，
   皮肤图案是 background-image 贴上去的 → 图案和三个点同时在场 = 并排。
   这里保留文字点（「更多」的通用写法，读屏也念得出来），不再贴皮肤图案。 */
html[data-theme-skin] #more-btn { background-image: none; }
html[data-theme-skin] .mysec-back svg,
html[data-theme-skin] .ml-detail-back svg { background: var(--skin-icon-icon-back) center / contain no-repeat; }
/* 换成皮肤图标时，必须把 SVG 自己画的线条藏掉：以前两条叠在一起，
   宝宝看到的就是「皮肤图案贴在返回键上、和原生箭头重叠」（2026-10-29 真机实锤）。
   判据：皮肤图标一定先于 data-theme-skin 挂好（applyPack 在 manifest 到手之后才设属性），所以这里不会空。 */
html[data-theme-skin] :is(.mysec-back, .ml-detail-back) svg > * { display: none; }
html[data-theme-skin] button[title*="设置"]::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 5px; vertical-align: -4px; background: var(--skin-icon-icon-settings) center / contain no-repeat; }
html[data-theme-skin] button[title*="通知"]::before { content: ""; display: inline-block; width: 17px; height: 17px; margin-right: 4px; vertical-align: -3px; background: var(--skin-icon-icon-bell) center / contain no-repeat; }
html[data-theme-skin] button[title*="删除"]::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background: var(--skin-icon-icon-delete) center / contain no-repeat; }
html[data-theme-skin] button[title*="关闭"]::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background: var(--skin-icon-icon-close) center / contain no-repeat; }
/* ★ 2026-11-02（宝宝实锤「图标变成了并排」）：给「原图标是内联 svg」的那批按钮贴皮肤图标时，
   必须把原图藏掉，否则就是两枚图标并排（她点名：日程设置、日信删除…「可能还有很多」）。
   只藏 svg、不动按钮里的文字——图标＋文字标签是正常样式，不算并排。 */
html[data-theme-skin] :is(button[title*="设置"], button[title*="通知"], button[title*="删除"], button[title*="关闭"]) > svg { display: none; }
/* ★ 2026-11-02 终审补漏（小知点名）：上面四条装饰规则会命中**纯文字**按钮——阅读设置的「Aa」、
   小游戏里的「×」删除键，它们里面没有 svg，上面那条「藏 svg」自然管不到，
   于是皮肤图案 + 原文字符号照样并排。判据只能是「这按钮里到底有没有 svg」：
   有 svg → 贴皮肤图案、藏原图（一枚）；没有 svg → 一个字都不贴，原符号照旧。 */
html[data-theme-skin] :is(button[title*="设置"], button[title*="通知"], button[title*="删除"], button[title*="关闭"]):not(:has(svg))::before {
    content: none !important;
    display: none !important;
}
/* ★ 2026-11-02 删掉原来这条 `button[title*="播放"]::before`：全项目命中它的只有 5 处，
   全是**带状态**的键——#mini-player-play / #music-ctrl-play（播放/暂停两枚 svg）、
   #music-ctrl-mode / #bgm-mode-btn（顺序/随机/单曲，图标按模式动态换）。
   皮肤素材里没有「暂停」「播放模式」这两枚图，替换上去必然丢掉状态表达，
   所以这两类**保留原线稿图标、不做替换**（宝宝 2026-11-02 拍板）。 */
html[data-theme-skin] .moment-editor-privacy::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background: var(--skin-icon-icon-lock) center / contain no-repeat; }
html[data-theme-skin] .cl-live-dot { background: var(--skin-icon-icon-online) center / contain no-repeat; }
html[data-theme-skin] .ml-imp-or::before { background: var(--skin-icon-line-fleuron) center / contain no-repeat; height: 16px; opacity: .7; }
html[data-theme-skin] .fav-countline::before { content: ""; width: 26px; height: 15px; background: var(--skin-icon-line-chain) center / contain no-repeat; }
html[data-theme-skin] .ml-detail-title::after { content: ""; display: block; width: 40px; height: 14px; margin: 6px auto 0; background: var(--skin-icon-line-gold) center / contain no-repeat; }
/* 收藏导语右上角那个花环贴图：有方图当主角了，不用再贴一枚小图（宝宝：「字下小贴图突兀」） */
html[data-theme-skin] #sub-favorites .fav-intro::after { content: none !important; display: none !important; }
html[data-theme-skin] #tab-memory .ml-persona-avatar::before { content: ""; position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; background: var(--skin-icon-icon-crown) center / contain no-repeat; }
html[data-theme-skin] #tab-memory .ml-detail-tags::before { content: ""; display: block; width: 30px; height: 18px; background: var(--skin-icon-line-stem) center / contain no-repeat; }
html[data-theme-skin] .moments-empty-sub::before { content: ""; display: inline-block; width: 18px; height: 14px; margin-right: 4px; vertical-align: -3px; background: var(--skin-icon-icon-heart) center / contain no-repeat; }
html[data-theme-skin] #tab-moments .mom-inter-item-avatar { position: relative; }
/* mom-inter-item-avatar 的花环已并入文件上方统一那段（2026-10-28），这里不再单独写 */
html[data-theme-skin] #sub-favorites .fav-countline::after { content: ""; width: 20px; height: 20px; margin-left: auto; background: var(--skin-icon-icon-bookmark) center / contain no-repeat; }
html[data-theme-skin] .moment-editor-header { background-image: linear-gradient(var(--skin-highlight), var(--skin-highlight)), var(--skin-media-paper); background-size: auto, 180px 180px; }
html[data-theme-skin] #bottom-panel-plus .plus-item-icon img { object-fit: contain; }
html[data-theme-skin] #bottom-panel-plus .plus-item:active .plus-item-icon { transform: translateY(1px) scale(.97); }
html[data-theme-skin] #input-area textarea,
html[data-theme-skin] #input-area input { border-color: var(--skin-line-soft); border-radius: var(--skin-radius-control); background: var(--skin-surface-glass); }
html[data-theme-skin] .mom-card-menu-btn,
html[data-theme-skin] .moments-post-btn { border-radius: 999px; border: var(--skin-line-width, 1px) solid var(--skin-line-soft); box-shadow: inset 0 1px 0 var(--skin-highlight), 0 3px 9px var(--skin-shadow-soft); }
html[data-theme-skin] #tab-chat #conversation-list .cl-avatar-wrap { overflow: visible; }
html[data-theme-skin] #tab-chat #conversation-list .cl-avatar { border-radius: 50%; }

/* Shared site chrome and recurring surfaces. These selectors are pack-agnostic and manifest-driven. */
html[data-theme-skin] #app { background-color: var(--skin-bg); }
html[data-theme-skin] :is(#header, .mysec-head, .ml-detail-header, .kp-topbar, .cl-header, .mysec-page) {
    border-color: var(--skin-line-soft);
    background-color: var(--skin-paper-bright);
    box-shadow: inset 0 1px 0 var(--skin-highlight-soft);
}
html[data-theme-skin] :is(#header, .mysec-head, .ml-detail-header, .kp-topbar) { border-bottom: var(--skin-line-width, 1px) solid var(--skin-line-soft); }
html[data-theme-skin] :is(.mysec-title, .kp-topbar-title, .ml-detail-title-mini, .cl-title-cn, .settings-card-title) { color: var(--skin-ink); }
html[data-theme-skin] :is(.mysec-back, .ml-back-btn, .kp-back, #header .h-back-btn, #header .h-more-btn) {
    color: var(--skin-ink);
    border-color: var(--skin-line-soft);
    border-radius: var(--skin-radius-control);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
html[data-theme-skin] :is(.mysec-back, .ml-back-btn, .kp-back, #header .h-back-btn, #header .h-more-btn):active { background-color: var(--skin-petal-glass); }
html[data-theme-skin] #tab-chat #conversation-list .cl-header { background-color: var(--skin-surface-glass); }
html[data-theme-skin] #tab-chat #conversation-list .cl-item {
    border-color: var(--skin-line-soft);
    box-shadow: inset 0 calc(-1 * var(--skin-line-width, 1px)) 0 var(--skin-line-soft);
}
html[data-theme-skin] #tab-chat #conversation-list :is(.cl-title-cn, .cl-preview, .cl-time) { color: var(--skin-ink); }
html[data-theme-skin] #tab-chat #conversation-list .cl-preview { opacity: .78; }
html[data-theme-skin] #tab-chat #conversation-list .cl-time { opacity: .68; }
html[data-theme-skin] #tab-chat #conversation-list .cl-badge,
html[data-theme-skin] .nav-tab .nav-badge {
    color: var(--skin-ink);
    background: var(--skin-petal);
    border: var(--skin-line-width, 1px) solid var(--skin-line-soft);
    box-shadow: 0 2px 7px var(--skin-shadow-soft);
}
html[data-theme-skin] .nav-tab.active { color: var(--skin-accent); }
html[data-theme-skin] .nav-tab.active::before { background: var(--skin-gold); box-shadow: 0 0 0 3px var(--skin-petal-glass); }
html[data-theme-skin] .nav-tab .nav-icon { transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease; }
html[data-theme-skin] .nav-tab.active .nav-icon { filter: drop-shadow(0 2px 5px var(--skin-shadow-soft)); }
html[data-theme-skin] #tab-chat #conversation-list .cp-banner {
    border-color: var(--skin-line-strong);
    box-shadow: inset 0 0 0 2px var(--skin-highlight-soft), inset 0 1px 0 var(--skin-highlight), 0 8px 24px var(--skin-shadow-mid);
}
html[data-theme-skin] #tab-chat #conversation-list .cp-banner .cp-full { border-radius: var(--skin-radius-panel); }
html[data-theme-skin] :is(.cl-guest-btn, #weather-chip-host .wx-chip, .cp-collapse-btn) {
    color: var(--skin-ink);
    border-color: var(--skin-line-soft);
    background-color: var(--skin-paper-bright);
    box-shadow: inset 0 1px 0 var(--skin-highlight), 0 3px 10px var(--skin-shadow-soft);
}
html[data-theme-skin] :is(.announcement-card, .ann-card, .kp-card, .kp-list-item) {
    border-color: var(--skin-line-soft);
    background-color: var(--skin-paper-soft);
    box-shadow: var(--skin-shadow), inset 0 1px 0 var(--skin-highlight-soft);
}
html[data-theme-skin] .kp-page {
    color: var(--skin-ink);
    background-color: var(--skin-bg);
    background-image: linear-gradient(var(--skin-highlight-soft), var(--skin-highlight-soft)), var(--skin-media-bg);
    background-size: cover;
    background-attachment: scroll;
}

/* Chat: all bubble families get the pack frame; special card interiors and media stay intact. */
html[data-theme-skin] .msg .bubble {
    color: var(--skin-ink);
    border-color: var(--skin-line-soft);
    box-shadow: 0 4px 14px var(--skin-shadow-soft), inset 0 1px 0 var(--skin-highlight-soft);
    overflow-wrap: anywhere;
    word-break: break-word;
}
html[data-theme-skin] .msg .bubble:not([class*="-bubble"]):not([class*="-shell"]):not(.diary-shell) { background-color: var(--skin-paper-soft); }
html[data-theme-skin] .msg :is(.time, .msg-quote, .reply-quote) { color: var(--skin-ink-soft); }
html[data-theme-skin] .msg :is(.msg-quote, .reply-quote) { border-color: var(--skin-gold); background-color: var(--skin-petal-glass); }
html[data-theme-skin] .msg .bubble :is(a, .mention, .at-name) { color: var(--skin-accent); }
html[data-theme-skin] .msg :is(.voice-bubble, .emoji-bubble, .sys-note, .music-interrupt-card) { border-color: var(--skin-line-soft); }
html[data-theme-skin] .msg .bubble :is(.file-preview, .img-carousel, .emoji-msg-img) { border-radius: var(--skin-radius-control); }
html[data-theme-skin] .msg :is(.voice-bubble, .emoji-bubble, .bookmark-bubble, .memory-card-bubble, .finance-card-bubble, .diary-shell, .sys-note) {
    border: var(--skin-line-width, 1px) solid var(--skin-line-soft);
    border-radius: var(--skin-radius-card);
}
html[data-theme-skin] #typing-indicator .bubble,
html[data-theme-skin] :is(.loading-state, .loading-card, .ml-pull-spinner, .vtp-loading) { color: var(--skin-ink-soft); }
html[data-theme-skin] :is(#input-area, #bottom-panel, #bottom-panel-plus, #bottom-panel-emoji) { border-color: var(--skin-line-soft); }
html[data-theme-skin] :is(.ep-group-bar, .plus-header) { border-color: var(--skin-line-soft); background-color: var(--skin-paper-bright); }
html[data-theme-skin] .ep-group-bar { position: relative; }
html[data-theme-skin] .ep-group-bar::after {
    content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px;
    background: var(--skin-icon-icon-emoji) center / contain no-repeat;
}
html[data-theme-skin] .plus-header-cn::before {
    content: ""; display: inline-block; width: 16px; height: 16px; margin-inline-end: 5px; vertical-align: -3px;
    background: var(--skin-icon-icon-plus) center / contain no-repeat;
}

/* Moments, Nest, My, memory, favorites and encyclopedia share one surface language. */
html[data-theme-skin] :is(.mom-action-btn, .mom-card-menu-btn, .moments-post-btn, .fav-filter-tab, .settings-card, .ml-kind-opt, .nh-bgsheet-row, .pf-select, .pf-select-opt, .kp-back, .mysec-action) {
    border-color: var(--skin-line-soft);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html[data-theme-skin] :is(.mom-action-btn, .mom-card-menu-btn, .moments-post-btn, .settings-card, .mysec-action, .pf-select, .kp-back) {
    border-radius: var(--skin-radius-control);
    box-shadow: inset 0 1px 0 var(--skin-highlight-soft), 0 3px 10px var(--skin-shadow-soft);
}
html[data-theme-skin] :is(.mom-action-btn, .mom-card-menu-btn, .moments-post-btn, .fav-filter-tab.active, .settings-card.active, .ml-kind-opt.active, .nh-bgsheet-row:active, .pf-select:active) {
    color: var(--skin-accent);
    border-color: var(--skin-line-strong);
    background-color: var(--skin-petal-glass);
}
html[data-theme-skin] :is(.mom-banner-info, .fav-intro, .pf-card, .settings-card, .settings-group, .ml-detail-body, .help-entry-card, .kp-detail-body) {
    color: var(--skin-ink);
    border-color: var(--skin-line-soft);
    background-color: var(--skin-paper-soft);
}
html[data-theme-skin] :is(.pf-input, .pf-textarea, .settings-group input, .settings-group textarea, .settings-group select, .mom-comment-input input, .moment-editor-textarea, .fav-search-input, .ml-search input, .kp-search-input) {
    color: var(--skin-ink);
    caret-color: var(--skin-accent);
    border-color: var(--skin-line-soft);
    border-radius: var(--skin-radius-control);
    background-color: var(--skin-surface-glass);
    box-shadow: inset 0 1px 3px var(--skin-shadow-soft);
}
html[data-theme-skin] :is(.pf-input, .pf-textarea, .settings-group input, .settings-group textarea, .settings-group select, .mom-comment-input input, .moment-editor-textarea, .fav-search-input, .ml-search input, .kp-search-input):focus {
    border-color: var(--skin-gold);
    box-shadow: 0 0 0 3px var(--skin-petal-glass), inset 0 1px 3px var(--skin-shadow-soft);
}
html[data-theme-skin] :is(input[type="checkbox"], input[type="radio"], [role="switch"], .toggle-switch, .switch-track) { accent-color: var(--skin-accent); }
html[data-theme-skin] :is(.pf-label, .pf-block-zh, .settings-group label, .settings-card-title, .help-entry-title, .ml-detail-title, .fav-intro-zh) { color: var(--skin-ink); }
html[data-theme-skin] :is(.pf-block-en, .pf-hint, .settings-group .hint, .help-entry-subtitle, .ml-detail-en, .fav-intro-en) { color: var(--skin-ink-soft); }
html[data-theme-skin] :is(.pf-avatar-frame, .profile-avatar, .my-avatar, .ml-persona-avatar, .mom-avatar, .mom-banner-avatar) { outline: var(--skin-line-width, 1px) solid var(--skin-line-strong); outline-offset: 2px; }
html[data-theme-skin] :is(.tag, .chip, .badge, .pill, .pf-level, .ml-card-badges, .fav-src-chip, .sc-badge, .cl-badge) {
    color: var(--skin-ink);
    border-color: var(--skin-line-soft);
    background-color: var(--skin-petal-glass);
}
html[data-theme-skin] :is(.empty-state, .moments-empty, .ml-empty, .fav-empty, .empty-hint, .empty-card) {
    border-color: var(--skin-line-soft);
    color: var(--skin-ink-soft);
}
html[data-theme-skin] :is(.empty-state, .moments-empty, .ml-empty, .fav-empty) :is(h1, h2, h3, .title, .empty-title) { color: var(--skin-ink); }
html[data-theme-skin] :is(.loading-state, .loading-card, .ml-pull-spinner, .vtp-loading, #typing-indicator) { border-color: var(--skin-line-soft); }
html[data-theme-skin] :is(.settings-group, .settings-card, .pf-card, .mysec-page, .help-entry-card, .ml-detail-body, .fav-card, .mom-card) {
    box-shadow: var(--skin-shadow), inset 0 1px 0 var(--skin-highlight-soft);
}
html[data-theme-skin] :is(.task-card, .schedule-card, .calendar-card, .nest-card, .book-card, .memory-card, .encyclopedia-card, .help-entry-card, .pf-card, .settings-card) {
    border-radius: var(--skin-radius-card);
    border-color: var(--skin-line-soft);
}
html[data-theme-skin] :is(.task-card, .schedule-card, .calendar-card, .task-list-item, .schedule-item, .calendar-day, .nest-entry, .book-card, .encyclopedia-card, .kp-list-item) {
    color: var(--skin-ink);
    background-color: var(--skin-paper-soft);
    box-shadow: inset 0 1px 0 var(--skin-highlight-soft), 0 5px 16px var(--skin-shadow-soft);
}
html[data-theme-skin] :is(.task-page, .schedule-page, .calendar-page, .nest-page, .memory-page, .favorites-page, .encyclopedia-page) {
    color: var(--skin-ink);
    background-color: var(--skin-bg);
    background-image: linear-gradient(var(--skin-highlight-soft), var(--skin-highlight-soft)), var(--skin-media-bg);
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}
html[data-theme-skin] :is(.task-page, .schedule-page, .calendar-page, .nest-page, .memory-page, .favorites-page, .encyclopedia-page) :is(h1, h2, h3, .page-title, .section-title, .section-label) { color: var(--skin-ink); }
html[data-theme-skin] :is(.task-page, .schedule-page, .calendar-page, .nest-page, .memory-page, .favorites-page, .encyclopedia-page) :is(.divider, hr, .separator, .section-divider) { border-color: var(--skin-line-soft); }
html[data-theme-skin] :is(.context-menu, .moments-context-menu, .long-press-menu, [role="menu"]) :is(button, [role="menuitem"]) {
    color: var(--skin-ink);
    border-color: var(--skin-line-soft);
    border-radius: var(--skin-radius-control);
}
html[data-theme-skin] :is([class$="-card"], [class*="-card "]) {
    color: var(--skin-ink);
    border-color: var(--skin-line-soft);
    background-color: var(--skin-paper-soft);
    box-shadow: var(--skin-shadow-soft), inset 0 1px 0 var(--skin-highlight-soft);
}
html[data-theme-skin] button:not(.circle-btn):not(.nav-tab):not(.nh-icon),
html[data-theme-skin] [class*="-btn"] { border-color: var(--skin-line-soft); }
html[data-theme-skin] button:focus-visible,
html[data-theme-skin] [role="button"]:focus-visible,
html[data-theme-skin] input:focus-visible,
html[data-theme-skin] textarea:focus-visible,
html[data-theme-skin] select:focus-visible { outline: var(--skin-line-width, 1px) solid var(--skin-gold); outline-offset: 2px; }
html[data-theme-skin] .msg.system .bubble,
html[data-theme-skin] .msg.sys-note .bubble { color: var(--skin-ink); background-color: var(--skin-paper-soft); border-color: var(--skin-line-soft); }
html[data-theme-skin] :is(.time-divider, .chat-date-divider) { color: var(--skin-ink-soft); border-color: var(--skin-line-soft); }
html[data-theme-skin] #sub-help :is(.help-entry-card, .help-card, .encyclopedia-card) { border-radius: var(--skin-radius-card); }
html[data-theme-skin] .moment-editor-header::after {
    content: ""; width: 20px; height: 20px; margin-inline-start: auto;
    background: var(--skin-icon-icon-edit) center / contain no-repeat;
}
html[data-theme-skin] .moment-editor-close::before,
html[data-theme-skin] button[title*="设置"]::before,
html[data-theme-skin] button[title*="通知"]::before,
html[data-theme-skin] button[title*="删除"]::before,
html[data-theme-skin] button[title*="关闭"]::before,
html[data-theme-skin] button[title*="播放"]::before { opacity: .76; }
html[data-theme-skin] :is(.sub-tab-bar, .ml-section-head, .ui3mem-sec-head, .settings-group) { border-color: var(--skin-line-soft); }
html[data-theme-skin] #sub-help :is(.mysec-head, .mysec-body, .help-entry-card) { background-color: var(--skin-paper-bright); }

/* Icon sizes and corners stay decorative and outside the original hit targets. */
html[data-theme-skin] :is(.mom-card, .ml-card, .fav-card, .moment-editor-card, .ml-persona-avatar) { overflow: visible; }
html[data-theme-skin] :is(.mom-card, .ml-card, .fav-card, .moment-editor-card)::before,
html[data-theme-skin] :is(.mom-card, .ml-card, .fav-card, .moment-editor-card)::after { pointer-events: none; }
/* ============================================================
   深色模式：公告 / 站内消息的详情页（2026-10-28 宝宝真机实锤「深色模式下点开具体公告和消息的详情页根本看不到写了啥」）
   根因：皮肤把整站底色换成了主题纸面（浅色），而详情页那几行正文在深色模式里被写成了浅灰（#c0b8a8），
   那就是「浅字压浅纸」→ 一片糊。这里按同一套纸面 + 墨色口径把它拉回来，明暗两态都读得清。
   ============================================================ */
html[data-theme-skin] .ann-detail-panel {
    background: var(--skin-paper-bright);
}
html[data-theme-skin] .ann-detail-title,
html[data-theme-skin] .ann-detail-title-en,
html[data-theme-skin] .ann-author-name,
html[data-theme-skin] .ann-author-date,
html[data-theme-skin] .ann-thread-empty {
    color: var(--skin-ink);
}
html[data-theme-skin] .ann-detail-content {
    color: var(--skin-ink);
    background: linear-gradient(transparent 26px, color-mix(in srgb, var(--skin-line) 12%, transparent) 26px);
    background-size: 100% 28px;
    border-left-color: color-mix(in srgb, var(--skin-petal) 34%, transparent);
}
html[data-theme-skin] .ann-thread-msg.ai {
    background: color-mix(in srgb, var(--skin-petal) 24%, var(--skin-paper-bright));
    color: var(--skin-ink);
}
html[data-theme-skin] .ann-thread-msg.user {
    background: color-mix(in srgb, var(--skin-line) 12%, var(--skin-paper-bright));
    color: var(--skin-ink);
}
html[data-theme-skin] .ann-detail-reply-input {
    background: var(--skin-paper-soft);
    border-color: var(--skin-line-soft);
    color: var(--skin-ink);
}

/* 收藏页：右侧那条竖向滚动条会把内容挤窄（宝宝 2026-10-28：「有右侧的滑动栏导致页面被压缩，隐藏这个滑动栏」） */
html[data-theme-skin] #sub-favorites,
html[data-theme-skin] #sub-favorites .mysec-body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html[data-theme-skin] #sub-favorites::-webkit-scrollbar,
html[data-theme-skin] #sub-favorites .mysec-body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

@media (max-width: 370px) {
    html[data-theme-skin] #tab-moments .moments-timeline { padding-inline: 12px; }
    html[data-theme-skin] #tab-moments .mom-card { padding-inline: 14px; }
    html[data-theme-skin] #tab-nest .nh-col-left { left: 10px; }
    html[data-theme-skin] #tab-nest .nh-col-right { right: 10px; }
}