/* T-MALL-PERF-1020 合并物 — 由 01_脚本/scripts/08_工具/css合并.py 生成, 禁止手改。
 * 源清单 (顺序=原加载顺序, theme/bg_layer/lightbox 优先级依赖此顺序): layout.css + card.css + category.css + product.css + cart.css + order.css + articles.css + share_dock.css + glass.css + animation.css + liquid.css + theme.css + bg_layer.css + lightbox.css + poster.css + modal.css */

/* ===== source: layout.css (md5 8db809531687) ===== */
/* ============================================================
   幼师藏宝箱 · 商城 — layout.css (Apple 风格)
   站点骨架: 变量 / 头部(毛玻璃) / 导航 / 底部导航 / 登录弹窗 / 页脚
   ============================================================ */

/* ---- Apple 系统色 (light) ---- */
:root {
    /* T-MALL-VIP-AVATAR-01: VIP 等级头像色板 (日间; 夜间/黑白覆盖见 theme.css。
       组件 SVG 全部 currentColor, 禁硬编码色值散落组件内) */
    --vip-ring-silver: #8b949e;      /* 月度银环 */
    --vip-ring-gold: #d4a72c;        /* 季度金环 / 年度内圈金 */
    --vip-ring-purple: #8250df;      /* 年度紫环 (紫金外圈) */
    --vip-ring-gold-deep: #bf8700;   /* 终身皇冠环 */
    --vip-tier-bronze: #c98153;      /* Lv1-3 铜星 */
    --vip-tier-silver: #a8b3c2;      /* Lv4-6 银星 */
    --vip-tier-gold: #e3b341;        /* Lv7-9 金星 */
    --vip-tier-moon: #6cb2ff;        /* Lv10-12 月亮 */
    --vip-tier-star: #ffd33d;        /* Lv13+ 星星 */
    --vip-warn-bg: #bf8700;          /* 到期预警「剩N天」琥珀 */
    --vip-expired-bg: #6e7681;       /* 失效「已过期」灰 */
    --vip-badge-bg: rgba(0, 0, 0, 0.55); /* 成长徽章小圆底 */
    --sys-blue: #007AFF;
    --sys-green: #34C759;
    --sys-red: #FF3B30;
    --sys-orange: #FF9500;
    --sys-yellow: #FFCC00;
    --sys-gray: #8E8E93;

    --mall-primary: #E07D00; /* T-IPCOLOR3-WEB-1012 (三次裁定 2026-10-12): 锚点=商品卡「即将上市」徽章 #FF9500, 主色=同色相(H33)加深一档 S100 纯橙, 白字 2.96:1≈3:1; 前两轮描边棕/低饱和棕均已废止 */
    --mall-primary-dark: #C86E00; /* T-IPCOLOR3-WEB-1012: 徽章加深两档 H33 S100, 白字 3.69:1 */
    /* T-MALL-BTN-HOVER-0927: 主按钮 hover 专用深绿 — 白字对比 5.08:1 (WCAG AA 4.5:1)。
       原 --mall-primary-dark #248A3D 白字仅 4.40:1 不达标, 且夜间被 theme.css 覆写为亮绿,
       故 hover 态单独设令牌, 不改动 --mall-primary-dark 其他消费方 (promo-bar/btn-download 等)。 */
    --mall-primary-hover: #C86E00; /* T-IPCOLOR3-WEB-1012: hover/active/选中 = 徽章加深两档, 白字 3.69:1 */
    --mall-secondary: #5856D6;
    --mall-accent: #E07D00; /* T-IPCOLOR3-WEB-1012: 全站 IP 日间主色 (同 --mall-primary) */
    /* T-MALL-NIGHT-01: 语义色令牌 — payment.php/orders.php 内联 var(--mall-danger,#cf222e)
       等此前全站未定义, 永远回退日间硬编码 → 夜间对比度不足。现定义日/夜两态,
       夜间值在 layout.css 系统深色块 + theme.css body[data-night] 覆写。 */
    --mall-danger: #cf222e;
    --mall-muted: #8b949e;
    --mall-fg-muted: #656d76;
    --mall-bg: #F2F2F7;
    --mall-card-bg: #FFFFFF;
    --mall-text: #1C1C1E;
    --mall-text-muted: #6E6E73; /* T-MALL-VISUAL-WCAG-1011: 原 #8E8E93 3.26:1 不达标, 改 5.07:1 */
    --mall-border: #8A8A8E; /* T-MALL-VISUAL-WCAG-1011: 原 rgba(60,60,67,0.12) 合成后 vs 白仅 1.23:1, 改 3.44:1 / vs 页面底 3.08:1 (UI 图形 3:1 达标) */
    /* T-ARTDARK-0922: 次级表面变量 (日间) — articles.css 引用, 此前只有硬编码
       fallback, 现显式定义; 夜间值在 theme.css body[data-night]。 */
    --mall-bg-secondary: #f9fafb;
    --mall-card-border: #8A8A8E; /* T-MALL-VISUAL-WCAG-1011: 原 #eef0f2 vs 白 1.14:1 不达标, 改 3.44:1 */
    --mall-bg-hover: #f3f4f6;
    /* T-MALL-VISUAL-Q2-1008: 柔和表面变量 — articles.css 两处引用 --mall-bg-soft 此前
       全站未定义, 回退 rgba(0,0,0,0.03) 与页面底 #F2F2F7 色差 <2% (空态/节日 chip 不可见)。
       日间=纯白卡片底 (比页面底亮一档); 夜间/系统深色=次级表面 #2C2C2E。 */
    --mall-bg-soft: var(--mall-card-bg);
    --mall-radius: 14px;
    --mall-radius-sm: 10px;
    --mall-radius-lg: 18px;
    --mall-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06);
    --mall-shadow-hover: 0 10px 34px rgba(0,0,0,0.14);
    --mall-header-height: 60px;
    --mall-bottom-nav-height: 56px;
    --mall-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ---- Apple 系统色 (dark) ---- */
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    :root:not([data-theme="day"]) {
        --sys-blue: #0A84FF;
        --sys-green: #30D158;
        --sys-red: #FF453A;
        --sys-orange: #FF9F0A;
        --sys-gray: #98989D;

        --mall-primary: #FF9F0A; /* T-IPCOLOR3-WEB-1012: 夜间主色 = 与「即将上市」徽章 #FF9500 同族 H35 S100, 深底 8.28:1 */
        --mall-primary-dark: #C86E00; /* T-IPCOLOR3-WEB-1012: 与 theme.css body[data-night] 一致 */
        --mall-accent: #FF9F0A;
        /* T-MALL-NIGHT-01: 语义色夜间值 (Primer 深色主题对应色, 深底 AA 达标) */
        --mall-danger: #f85149;
        --mall-muted: #98989D;
        --mall-fg-muted: #98989D;
        --mall-bg: #000000;
        --mall-card-bg: #1C1C1E;
        --mall-text: #FFFFFF;
        --mall-text-muted: #98989D;
        --mall-border: rgba(84, 84, 88, 0.36);
        --mall-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.5);
        --mall-shadow-hover: 0 10px 34px rgba(0,0,0,0.6);
        /* T-ARTDARK-0922: 系统深色下同步夜间次级表面变量 (与日间 :root 对齐) */
        --mall-bg-secondary: #2C2C2E;
        --mall-card-border: rgba(255, 255, 255, 0.12);
        --mall-bg-hover: #3A3A3C;
        /* T-MALL-VISUAL-Q2-1008: 系统深色下柔和表面走次级表面 (与 body[data-night] 一致) */
        --mall-bg-soft: var(--mall-bg-secondary);
        /* T-MALL-VIP-AVATAR-01: VIP 头像色板系统深色值 (与 theme.css body[data-night] 一致) */
        --vip-ring-silver: #b1bac4;
        --vip-ring-gold: #e3b341;
        --vip-ring-purple: #a371f7;
        --vip-ring-gold-deep: #e3b341;
        --vip-tier-bronze: #db8b60;
        --vip-tier-silver: #cdd9e5;
        --vip-tier-gold: #f0c64f;
        --vip-tier-moon: #79c0ff;
        --vip-tier-star: #ffdf5d;
        --vip-warn-bg: #d29922;
        --vip-expired-bg: #768390;
        --vip-badge-bg: rgba(255, 255, 255, 0.22);
    }

}

/* ---- 基础 ---- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "PingFang SC", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
    background: var(--mall-bg);
    color: var(--mall-text);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s var(--mall-ease), color 0.3s var(--mall-ease);
}

/* ---- 站点头部 (毛玻璃) ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--mall-border);
}
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    :where(html:not([data-theme="day"])) .site-header { background: rgba(28, 28, 30, 0.72); }

}
.site-logo svg { flex-shrink: 0; }
/* T-MALL-HEADER-ALIGN: logo 文字 nowrap — 原 flex-shrink:1 + white-space:normal 导致
   窄屏(375px)下 "幼师藏宝箱" 被压成每字一行的竖排 (logo 高 135px, 整行 167px),
   右侧按钮区被挤到视觉第二行。nowrap 保证 logo 始终单行。 */
.site-logo { white-space: nowrap; }
.site-logo:hover { opacity: 0.85; }

/* T-MALL-HEADER-ALIGN: 搜索框容器 (基础规则) — 原规则只存在于旧单体 mall.css (头部未加载),
   导致 .search-box 退化为 block div, input+button 上下堆叠 → 高 68px, 与 39px 按钮错位 14.5px。
   现统一: 高 39px (与 theme-toggle-btn/login-btn 等高) + flex 单行横排, input 与按钮并排。
   宽度桌面 150px 可收缩 (flex:0 1 auto + min-width:0), 移动端见下方 <600 断点。 */
.search-box {
    height: 39px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius-sm);
    overflow: hidden;
    background: var(--mall-card-bg);
    width: 150px;
    flex: 0 1 auto;
    min-width: 0;
}
/* 容器内 input 覆盖 #search-input 基础规则 (ID 选择器特异性更高, 须用 .search-box #search-input 压制):
   去边框/内边距/底色, 由容器统一提供边框与聚焦环。 */
.search-box #search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    padding: 0 10px;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--mall-text);
}
.search-box #search-input::placeholder { color: var(--mall-text-muted); }
.search-box #search-input:focus { border: none; box-shadow: none; }
.search-box:focus-within {
    border-color: var(--mall-primary);
    box-shadow: 0 0 0 3px rgba(224, 125, 0, 0.18);
}
.search-box #search-btn {
    height: 100%;
    border: none;
    padding: 0 12px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--mall-text-muted);
    flex-shrink: 0;
}
.search-box #search-btn:hover { color: var(--mall-primary); }
/* T-MALL-BI-1007: 搜索图标 (111 生成 PNG, 与侧边栏同套) 尺寸锁定 16px;
   onerror 兜底切 bi bi-search (Bootstrap Icons 字体图标) 同尺寸同色 */
.search-box #search-btn .search-icon { width: 16px; height: 16px; object-fit: contain; display: block; }
.search-box #search-btn .search-icon-bi { font-size: 16px; line-height: 1; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }

/* T-MALL-HEADER-0916: logo 图固定高度等比 (全断点) — 后台配置 logo 宽高比不一 (宽幅/窄幅),
   原先 theme.css .site-logo-img (0,1,0, 后加载) 的 max-width:120px 限宽会令宽幅图高度缩水、
   移动端 layout.css 的 height:auto 又进一步失高 → 各处出图占比不一致 (过大/过小)。
   现固定 height:32px + width:auto 等比缩放, 用 .site-header 前缀抬特异性 (0,2,0) 压制
   theme.css 同名规则; 移动端 (≤767px) 降为 28px。 */
.site-header .site-logo-img {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}
@media (max-width: 767px) {
    .site-header .site-logo-img { height: 28px; }
}

/* T-MALL-HEADER-0916: 商品页分类筛选按钮 (products.php 顶部, 标题左侧; 替代已删除的 header 汉堡) —
   39px 高与 .theme-toggle-btn/.login-btn 统一; 内联 SVG 兜底渲染 (FA6 fa-sliders 字体由
   t_mall_icons_0916 统一加载后 class 可无缝切换)。 */
.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius-sm);
    background: var(--mall-card-bg);
    color: var(--mall-text-muted);
    cursor: pointer;
    padding: 0;
}
.filter-btn:hover { color: var(--mall-primary); border-color: var(--mall-primary); }
/* T-MALL-HEADER-0916-FIX: 桌面端隐藏筛选按钮 — 桌面 .category-drawer 是左栏常显 (非抽屉),
   .open 的 transform 只在 ≤767px 媒体查询内定义, 桌面点按钮无效果, 故隐藏 (仅移动端显示)。
   T-MALL-PERF-1020: 桌面断点 768→1025 (平板归移动端, 左栏在 768-1024 已是抽屉形态, 按钮须显示)。 */
@media (min-width: 1025px) {
    .filter-btn { display: none; }
}

/* T-MALL-HEADER-ALIGN: 移动端 (<600) — logo 仅留图标 (隐藏文字/促销徽章, 给搜索框腾出宽度)
   + 搜索框自适应吃满剩余宽度, 保证 375px 单行不溢出。
   预算 (375px): logo 图标 ~56px + 行间距 + 右侧 [theme 39 + search + login 82 + menu 56 + 3×gap 36]
   → search 最低 60px 时整行 ~341px < 375px, 单行成立。 */
@media (max-width: 599px) {
    .site-logo .h3 { display: none; }
    .site-logo .promo-badge { display: none; }
    /* logo 图限宽 — 用 .site-header 前缀抬特异性 (0,2,0), 压制 theme.css 的 .site-logo-img
       (0,1,0, 后加载会覆盖同名规则); 后台配置 logo 为宽幅图(104x32), 移动端限宽 88px 等高缩放。
       T-MALL-HEADER-0916: height:auto → 28px (与上方 ≤767px 规则一致, 小屏再限宽 88px)。 */
    .site-header .site-logo-img { height: 28px; max-width: 88px; }
    /* 右侧按钮区容器 min-width:0 — 默认 min-width:auto 使其不能收缩到内容最小宽(429px)以下,
       导致 375px 溢出。设 0 后容器可缩到可用宽, 内部 .search-box 随之 flex 到 60px 最小宽。 */
    .site-header .container-lg > .d-flex > .d-flex:last-child { min-width: 0; }
    .search-box { width: auto; flex: 1 1 auto; min-width: 60px; }
}

/* ---- 搜索框 ---- */
#search-input {
    border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius-sm);
    padding: 7px 12px;
    background: var(--mall-bg);
    font-size: 14px;
    transition: border-color 0.2s var(--mall-ease), box-shadow 0.2s var(--mall-ease);
}
#search-input:focus {
    border-color: var(--mall-primary);
    box-shadow: 0 0 0 3px rgba(224, 125, 0, 0.18);
    outline: none;
    background: var(--mall-card-bg);
}
#search-input:hover { border-color: var(--sys-gray); }

/* ---- 导航链接 ---- */
.nav-link {
    color: var(--mall-text);
    text-decoration: none;
    padding: 7px 14px;
    border-radius: var(--mall-radius-sm);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s var(--mall-ease), color 0.2s var(--mall-ease);
}
.nav-link:hover { background: var(--mall-bg); color: var(--mall-primary); }
.nav-link.color-fg-accent {
    color: var(--mall-primary);
    font-weight: 600;
    background: rgba(224, 125, 0, 0.12);
}

/* ---- 移动端菜单 ---- */
/* T-MALL-MOBILE-0920: 抽屉打开动画 — 基础态 opacity:0 + 上移 8px, mall.js 切换时
   打开: 去 d-none → 强制 reflow → 加 .show (淡入下滑); 关闭: 先去 .show,
   transitionend (或 300ms 兜底) 后再加 d-none。 */
.mobile-menu {
    background: var(--mall-card-bg);
    border-bottom: 1px solid var(--mall-border);
    padding: 8px 0;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.mobile-menu.show {
    transform: translateY(0);
    opacity: 1;
}
/* T-MALL-MOBILE-0920: 未登录 header「登录」按钮移动端去重 — 抽屉内已有「登录 / 注册」。
   任务书指定加 d-md-none, 但 Primer d-md-none 语义为 ≥768px 隐藏 (方向相反),
   直接生效会隐藏桌面端入口; 故此处用媒体查询实现正确行为:
   <768 隐藏 (移动端唯一入口=抽屉), ≥768 恢复 (覆盖 d-md-none 的 !important,
   本文件在 primer.min.css 之后加载, 且选择器特异性 0,3,0 > 0,1,0)。 */
/* T-MALL-PERF-1020: 去重/恢复断点 768→1025 — 登录按钮属桌面导航, <1025 (含平板) 隐藏
   (抽屉内已有「登录 / 注册」), ≥1025 桌面恢复 (覆盖 d-lg-none 的 !important)。 */
@media (max-width: 1024.98px) {
    .login-btn--guest { display: none !important; }
}
@media (min-width: 1025px) {
    .login-btn.login-btn--guest.d-lg-none { display: inline-flex !important; }
}
.mobile-nav-link {
    display: block; padding: 13px 16px; color: var(--mall-text);
    text-decoration: none; font-size: 15px; border-radius: var(--mall-radius-sm);
    transition: background 0.15s var(--mall-ease);
}
.mobile-nav-link:hover { background: var(--mall-bg); }

/* ---- 主内容区 (大留白) ---- */
.site-main {
    min-height: calc(100vh - var(--mall-header-height) - 60px);
    padding-bottom: 88px;
}
/* T-MALL-744BP: 断点 768→744 — iPad mini5 Safari 竖屏 CSS 视口=744px (非768), 与下方 bottom-nav 隐藏断点同步
   T-MALL-PERF-1020: 断点 744→1025 — 平板 (768-1024) 归移动端, 底部导航显示区间扩到 <1025,
   底部留白让位区间同步收窄到桌面 (≥1025, 导航隐藏后)。 */
@media (min-width: 1025px) { .site-main { padding-bottom: 48px; } }

/* ============================================================
   T-MALL-ALIGN: 响应式断点 (手机 <600 / 平板 600-1023 / 桌面 1024-1439 / 宽屏 ≥1440)
   宽屏整体宽度增大 (覆盖 Primer .container-lg 1012px 上限), 卡片内容区加宽。
   ============================================================ */
/* 桌面 (≥1024): 整体宽度增大到 1200px */
@media (min-width: 1024px) {
    .site-main > .container-lg,
    .container-lg { max-width: 1200px; }
}
/* 宽屏 (≥1440): 整体宽度进一步增大到 1440px, 卡片内容区加宽 */
@media (min-width: 1440px) {
    .site-main > .container-lg,
    .container-lg { max-width: 1440px; }
    /* 卡片内容区加宽: 标题字号/行高/内边距提升, 信息更舒展 */
    /* T-MALL-HEIGHT: 标题字号/行高改走变量, 让 card.css 的 2 行固定高度同步跟随 */
    /* T-MALL-RESP-DEVICES: 标题字号全设备统一 14px (用户决策: 先 14px, 手机看效果再说) —
       原 16px/1.5 与 <1440 的 14px 双轨, 现宽屏也走 14px, 行高 1.4 与 card.css 默认 var(--card-title-lh,1.45) 量级一致 */
    .product-card .card-body { padding: 16px 18px 18px; --card-title-size: 14px; --card-title-lh: 1.4; }
    .product-card .card-price { font-size: 19px; }
    .product-card .card-meta-row { margin-bottom: 10px; }
    .grade-chip { font-size: 12px; padding: 3px 11px; }
}
/* T-MALL-RESP-DEVICES: 平板小屏 (600-743, T-MALL-744BP: 原 600-767) — 底部导航仍显示
   (隐藏断点已从 768 下调到 744, 见下方 bottom-nav 规则), 主内容区底部留白须给导航 (56px + safe-area) 让位,
   保持与基础 88px 一致, 避免最后一行卡片被底部导航遮挡 (原 600-1023 统一 40px 在此区间偏小)。
   平板大屏 (≥744) 导航已隐藏, 落到上方 min-width:744 的 48px。 */
@media (min-width: 600px) and (max-width: 743px) {
    .site-main { padding-bottom: 88px; }
}

/* ---- 底部导航 (移动端, 毛玻璃) ---- */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    /* T-MALL-TAB-0917: 总高 = 56px + safe-area (border-box 下 padding-bottom 不再挤压内容区,
       iPhone X+ safe-area=34px 时图标+文字不再溢出 tab 栏) */
    height: calc(var(--mall-bottom-nav-height) + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--mall-border);
    display: flex; justify-content: space-around; align-items: center;
    z-index: 200; padding-bottom: env(safe-area-inset-bottom);
}
/* T-MALL-744BP: iPad mini5 Safari 竖屏 CSS 视口=744px (非768), Primer d-md-none 的 ≥768 隐藏
   在 744 失效导致 iPad 真机误显底部导航 (与顶部搜索重复)。744-767 区间仅 iPad 系设备
   (iPhone 最大 430px), 故此处显式 ≥744 隐藏, 不影响手机。
   T-MALL-PERF-1020: 隐藏断点 744→1025 — 平板归移动端, 底部导航在 <1025 (含平板) 显示,
   仅桌面 (≥1025) 隐藏 (与 footer d-lg-none / 顶部 d-lg-flex 同口径)。 */
@media (min-width: 1025px) { .bottom-nav { display: none !important; } }
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    :where(html:not([data-theme="day"])) .bottom-nav { background: rgba(28, 28, 30, 0.8); }

}
.bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 12px; color: var(--mall-text-muted); text-decoration: none;
    font-size: 10px; transition: color 0.2s var(--mall-ease);
}
.bottom-nav-item.active, .bottom-nav-item:hover { color: var(--mall-primary); }

/* ---- Spinner ---- */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ============================================================
   T-MALL-ANIMATION: 现代视觉动画层 (淡入淡出 / 滚动显现 / 微交互)
   性能铁律: 只动画 transform/opacity (不触发 reflow); will-change 慎用;
   不阻塞首屏 (能力检测在 head 首帧前完成, 动画 JS 在 footer 加载)。
   夜间模式: 动画色走 --mall-* / --ripple-color (theme.css 覆盖)。
   prefers-reduced-motion: 末尾媒体查询统一关闭所有动画。
   ============================================================ */

/* ---- 动画 token ---- */
:root {
    --mall-anim-duration: 0.2s;              /* 按钮/链接 hover 统一时长 */
    --ripple-color: rgba(0, 122, 255, 0.25); /* 点赞点击涟漪 (夜间在 theme.css 覆盖) */
}

/* ---- 页面级淡入: body 加载 fade-in 300ms (仅 mall-anim 档, 纯 opacity) ---- */
@keyframes mall-page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
html.mall-anim body {
    animation: mall-page-fade-in 0.3s var(--mall-ease);
}

/* ---- 按钮/链接 hover 统一 200ms ease (补齐未统一的交互元素) ---- */
.mobile-nav-link,
.theme-toggle-btn,
.dropdown-item {
    transition: background 0.2s var(--mall-ease), color 0.2s var(--mall-ease), border-color 0.2s var(--mall-ease);
}

/* ---- 微交互: 点赞点击涟漪 (transform+opacity, 纯合成层) ----
   JS (mall.js) 点击时动态插入 .mall-ripple span, 播放后移除。 */
.mall-ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--ripple-color);
    transform: scale(0);
    opacity: 0.6;
    pointer-events: none;
    animation: mall-ripple 0.5s var(--mall-ease) forwards;
}
@keyframes mall-ripple {
    to { transform: scale(2.6); opacity: 0; }
}
/* 点赞按钮按压回弹 keyframe (transform-only 弹跳, 由 mall.js 加 .mall-pop 触发, 规则见 card.css) */
@keyframes mall-pop {
    0%   { transform: scale(0.88); }
    45%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* ============================================================
   T-MALL-PAGES-404: 底部 4 页 (关于我们/使用条款/隐私政策/帮助中心)
   统一简约版式 + 自定义 404 页共享样式。
   版式: 大标题 + 分节卡片 (.static-page__card) + 滚动 fade-up
   (复用 glass.css 的 .reveal/.reveal-in + data-reveal-delay stagger)。
   夜间模式: 全部走 --mall-* 变量, 自动适配。
   ============================================================ */

/* ---- 页面容器 ---- */
.static-page { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; }

/* ---- 大标题区 (eyebrow + 标题 + 副标) ---- */
.static-page__hero { text-align: center; margin-bottom: 28px; }
.static-page__eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
    /* T-MALL-CONTRAST-1007: 原 color=--mall-primary 绿字 + 半透明绿胶囊底 — 顶部液态玻璃色晕
       (liquid.css lp-blob) 漂过文字区时，绿字压绿晕实测对比度仅 1.49(白天)/3.57(夜间)，
       远低于 WCAG 4.5。改实色胶囊底 + 深/浅绿文字，底色不受色晕影响，对比度恒定:
       白天 #166534 on #DCF5E3 = 6.18; 夜间 #86EFAC on #12351E = 9.63。 */
    color: #166534;
    background: #DCF5E3;
    border-radius: 999px;
    padding: 4px 14px;
    margin-bottom: 12px;
}
/* T-MALL-CONTRAST-1007: 夜间 (JS 切换 body[data-night] 与系统深色两机制都覆盖) */
body[data-night] .static-page__eyebrow { color: #86EFAC; background: #12351E; }
@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="day"])) .static-page__eyebrow { color: #86EFAC; background: #12351E; }
}
/* 黑白悼念态: 回退灰阶，保持可读 */
body[data-theme="mono"] .static-page__eyebrow { color: #424a53; background: #e1e4e8; }
body[data-night][data-theme="mono"] .static-page__eyebrow { color: #adbac7; background: #1c2128; }
.static-page__title {
    font-size: 34px; font-weight: 700; letter-spacing: -0.02em;
    margin: 0 0 10px; color: var(--mall-text);
}
.static-page__subtitle {
    font-size: 15px; line-height: 1.7; color: var(--mall-text-muted);
    margin: 0 auto; max-width: 520px;
}
@media (max-width: 599px) {
    .static-page__title { font-size: 27px; }
}

/* ---- T-LOGO-SYNC-0913: 关于我们页 logo 展示区 (顶部居中, 品牌名+logo) ----
   横版锁定 logo (图标+文字, 宽高比>1.8) 限宽避免撑爆; 方形/单独 logo 限高。
   响应式 320/375/768/1024: 容器 max-width 随断点收缩, 图片 max-width:100% 自适应。 */
.about-logo { margin: 0 auto 18px; text-align: center; max-width: 320px; }
.about-logo__img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .about-logo { max-width: 240px; margin-bottom: 14px; }
}
@media (max-width: 375px) {
    .about-logo { max-width: 200px; margin-bottom: 12px; }
}
@media (max-width: 319px) {
    .about-logo { max-width: 160px; margin-bottom: 10px; }
}

/* ---- 分节卡片 (统一简约卡片, 替代旧 profile-card 内联样式) ---- */
.static-page__card {
    background: var(--mall-card-bg);
    border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius-lg);
    box-shadow: var(--mall-shadow);
    padding: 22px 24px;
    margin-bottom: 16px;
    color: var(--mall-text);
    transition: transform 0.2s var(--mall-ease), box-shadow 0.2s var(--mall-ease);
}
.static-page__card:hover { box-shadow: var(--mall-shadow-hover); }
.static-page__card h2 {
    font-size: 18px; font-weight: 600;
    margin: 0 0 10px; color: var(--mall-text);
    display: flex; align-items: center; gap: 8px;
}
.static-page__card h2 .static-page__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 8px;
    background: rgba(224, 125, 0, 0.14);
    color: var(--mall-primary);
    font-size: 13px; font-weight: 700;
}
.static-page__card p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.85; }
.static-page__card p:last-child { margin-bottom: 0; }
.static-page__card ul { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.9; }
.static-page__card ul li { margin-bottom: 4px; }
.static-page__card a { color: var(--mall-primary); text-decoration: none; }
.static-page__card a:hover { text-decoration: underline; }
/* T-IPCOLOR2-WEB-1012 (用户二次裁定 2026-10-12): 联系绿方案作废 — about「联系与服务」卡不绿底;
   删除 .static-page__card--contact 绿底白字/夜间绿底深字全部规则, 恢复与普通卡片一致样式。 */
.static-page__meta {
    font-size: 12.5px; color: var(--mall-text-muted);
    text-align: center; margin: 0 0 18px;
}
.static-page__foot {
    font-size: 13px; color: var(--mall-text-muted); line-height: 1.8;
    text-align: center; margin-top: 20px;
}
.static-page__foot a { color: var(--mall-primary); text-decoration: none; }
.static-page__foot a:hover { text-decoration: underline; }
@media (max-width: 599px) {
    .static-page__card { padding: 18px 16px; }
}

/* ---- 联系区 (邮箱 + 公众号, 双胶囊卡片) ---- */
.static-page__contact {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px;
}
.static-page__contact-item {
    flex: 1 1 220px;
    display: flex; align-items: center; gap: 12px;
    background: var(--mall-bg);
    border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius);
    padding: 14px 16px;
    transition: transform 0.2s var(--mall-ease), box-shadow 0.2s var(--mall-ease);
}
.static-page__contact-item:hover { transform: translateY(-2px); box-shadow: var(--mall-shadow); }
.static-page__contact-icon {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 12px;
    background: rgba(224, 125, 0, 0.14);
    color: var(--mall-primary);
}
.static-page__contact-label { font-size: 12px; color: var(--mall-text-muted); }
.static-page__contact-value { font-size: 14.5px; font-weight: 600; color: var(--mall-text); word-break: break-all; }

/* ---- 关于我们: 品牌故事时间线 (滚动时逐节点点亮) ---- */
.static-page__timeline { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.static-page__timeline::before {
    content: '';
    position: absolute; left: 15px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--mall-border);
}
.static-page__timeline li {
    position: relative;
    padding: 0 0 18px 44px;
}
.static-page__timeline li:last-child { padding-bottom: 0; }
.static-page__timeline-dot {
    position: absolute; left: 8px; top: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--mall-card-bg);
    border: 3px solid var(--mall-primary);
    transition: transform 0.4s var(--mall-ease), background 0.4s var(--mall-ease);
}
.static-page__timeline li.reveal-in .static-page__timeline-dot {
    background: var(--mall-primary);
    transform: scale(1.15);
}
.static-page__timeline-year { font-size: 13px; font-weight: 700; color: var(--mall-primary); }
.static-page__timeline-text { font-size: 14.5px; line-height: 1.8; color: var(--mall-text); margin-top: 2px; }

/* ---- 关于我们: 头图 (ComfyUI 装饰插画) ---- */
.static-page__hero-img {
    display: block;
    width: 100%; max-width: 560px;
    margin: 0 auto 24px;
    border-radius: var(--mall-radius-lg);
    box-shadow: var(--mall-shadow);
}

/* ---- 帮助中心: FAQ 折叠 (grid-rows 高度动画, 纯 CSS 无 JS) ---- */
.faq-item {
    background: var(--mall-card-bg);
    border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius);
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--mall-shadow);
    transition: box-shadow 0.2s var(--mall-ease);
}
.faq-item:hover { box-shadow: var(--mall-shadow-hover); }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px;
    font-size: 15px; font-weight: 600; color: var(--mall-text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-item__chevron {
    flex-shrink: 0;
    color: var(--mall-text-muted);
    transition: transform 0.3s var(--mall-ease);
}
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s var(--mall-ease);
}
.faq-item[open] .faq-item__body { grid-template-rows: 1fr; }
.faq-item__inner { overflow: hidden; }
.faq-item__inner p {
    margin: 0 0 8px; padding: 0 18px;
    font-size: 14.5px; line-height: 1.85; color: var(--mall-text);
}
.faq-item__inner p:last-child { margin-bottom: 0; padding-bottom: 16px; }
.faq-item__inner a { color: var(--mall-primary); text-decoration: none; }
.faq-item__inner a:hover { text-decoration: underline; }

/* ---- 404 页 ---- */
.page-404 { text-align: center; padding: 48px 16px 56px; }
.page-404__num {
    font-size: 108px; font-weight: 800; line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--mall-primary), var(--mall-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}
@media (max-width: 599px) { .page-404__num { font-size: 76px; } }
.page-404__title { font-size: 24px; font-weight: 700; margin: 14px 0 8px; color: var(--mall-text); }
.page-404__subtitle { font-size: 15px; color: var(--mall-text-muted); margin: 0 auto 24px; max-width: 420px; line-height: 1.7; }
.page-404__img {
    width: 220px; max-width: 60%;
    margin: 0 auto 8px;
    display: block;
    border-radius: var(--mall-radius-lg);
}
.page-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.page-404__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 26px;
    border-radius: 999px;
    font-size: 15px; font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s var(--mall-ease), box-shadow 0.2s var(--mall-ease);
}
.page-404__btn:hover { transform: translateY(-2px); }
.page-404__btn--primary {
    /* T-MALL-VISUAL-WCAG-1011: 白字 on #34C759 仅 2.22:1, 改 --mall-primary-hover (#1a7f37 白字 5.08:1) */
    background: var(--mall-primary-hover);
    color: #fff;
    box-shadow: 0 4px 14px rgba(224, 125, 0, 0.35);
}
.page-404__btn--primary:hover { box-shadow: 0 8px 22px rgba(224, 125, 0, 0.45); }
.page-404__btn--ghost {
    background: var(--mall-card-bg);
    color: var(--mall-text);
    border: 1px solid var(--mall-border);
    box-shadow: var(--mall-shadow);
}
.page-404__btn--ghost:hover { box-shadow: var(--mall-shadow-hover); }

/* ---- prefers-reduced-motion: 统一关闭所有动画 ----
   标准"近零时长"模式: 保留 forwards 终态 (避免 .card-anim.in 失去 fill 变透明),
   仅把时长压到 0.01ms (等效即时完成)。 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html.mall-anim body { animation: none; }
    .mall-ripple { display: none; }
    /* FAQ 折叠: 关闭高度过渡, 开合即时 */
    .faq-item__body { transition: none; }
    /* 时间线圆点: 直接终态 (点亮) */
    .static-page__timeline-dot { background: var(--mall-primary); transform: scale(1.15); }
}


/* ---- T-MALL-HEADER-FIX: 头部三按钮统一 39px 高 (与搜索输入框 .form-control 等高) + 垂直居中 ---- */
.theme-toggle-btn {
    height: 39px;
    box-sizing: border-box;
}
.login-btn {
    height: 39px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}

/* ---- T-MALL-FOOTER-PAD-0916: 手机底部版权让位 ----
   .bottom-nav fixed 56px + safe-area (z-index:200) 遮挡页脚版权行,
   手机 (<768, 导航显示区间) 给 .site-footer 加底部内边距让位。
   T-MALL-PERF-1020: 让位区间 767→1024 — 平板归移动端, 导航显示区间扩到 <1025。 */
@media (max-width: 1024px) {
    .site-footer { padding-bottom: calc(var(--mall-bottom-nav-height) + env(safe-area-inset-bottom) + 16px); }
}

/* ---- T-MALL-PAD-0917 (问题A): 移动端容器水平 padding ----
   Primer .container-lg 只有 max-width+margin auto, 无水平 padding;
   .site-main 也仅有 padding-bottom → 375px 下卡片贴屏幕边缘。
   移动端给 header/main 的 .container-lg 补 16px 左右内边距。
   T-MALL-PERF-1020: 区间 767→1024 — 平板归移动端 (header 导航容器同口径)。 */
@media (max-width: 1024px) {
    .site-main > .container-lg,
    .site-header .container-lg {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---- T-MALL-DEV-0917: 移动端字体策略 ----
   移动端 (≤767px) 优先系统字体栈: 去掉 "SF Pro Text"/"SF Pro Display" 等自定义
   webfont 依赖, 避免弱网下 webfont 加载慢导致首屏文字回退闪烁 (FOUT);
   -apple-system/BlinkMacSystemFont/PingFang SC 均为设备内置, 零下载。
   桌面端保持现有字体栈不变 (全特效/完整字重体验)。 */
@media (max-width: 767px) {
    body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif; }
}

/* ---- T-MALL-LND-0917: iPhone 横屏锁定提示 overlay ----
   iOS Safari 无法真正禁止横屏; 横屏且小屏时由 primer_footer.php 内联脚本
   显示本遮罩 (display:flex), 点"仍要横屏浏览"后 localStorage 持久化关闭。 */
.landscape-hint { position: fixed; inset: 0; z-index: 9998; background: var(--mall-bg, #fff); display: flex; align-items: center; justify-content: center; }
.landscape-hint__inner { text-align: center; padding: 32px; color: var(--mall-text, #1f2328); max-width: 320px; }
.landscape-hint__icon { margin: 0 auto 16px; animation: landscape-rotate 2s ease-in-out infinite; }
@keyframes landscape-rotate { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }
.landscape-hint__text { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.landscape-hint__close { padding: 8px 20px; border: 1px solid var(--mall-border, #d0d7de); border-radius: 8px; background: transparent; color: var(--mall-text-muted, #57606a); font-size: 13px; cursor: pointer; }
body[data-night] .landscape-hint { background: #1c1c1e; }

/* t_fix_final0922_01: 移动端菜单按钮 三横线→叉号 过渡动画 (补 t_bug_menu_0922 未落盘改动)
   结构: #mobile-menu-toggle .mbar-wrap > .mbar.mbar-top/.mbar-mid/.mbar-bot (见 primer_header.php)。
   currentColor 自动继承按钮文字色, 夜间模式无需额外规则。 */
#mobile-menu-toggle .mbar-wrap { display:inline-block; width:24px; height:24px; position:relative; }
#mobile-menu-toggle .mbar { position:absolute; left:0; width:24px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .3s ease, opacity .3s ease; }
#mobile-menu-toggle .mbar-top { top:6px; }
#mobile-menu-toggle .mbar-mid { top:11px; }
#mobile-menu-toggle .mbar-bot { top:16px; }
#mobile-menu-toggle.is-open .mbar-top { transform:translateY(5px) rotate(45deg); }
#mobile-menu-toggle.is-open .mbar-mid { opacity:0; transform:scaleX(0); }
#mobile-menu-toggle.is-open .mbar-bot { transform:translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  #mobile-menu-toggle .mbar { transition:none; }
}

/* ============================================================
   T-MALL-PERF-1020: 京东式自适应布局骨架 (2026-10-20)
   桌面 (≥1025px): 固定最窄宽度 1200px, 视口再窄走横向滚动;
   平板 (≤1024px): 归移动端布局 (底部 tab / 汉堡 / 抽屉 / 登录去重)。
   注: Primer lg 断点 = 1012px (非 1024), d-lg-* 在 1012-1024 区间
   (iPad mini 横屏 1024 等) 会提前切桌面形态 → 下方区间规则还原移动端,
   与 body min-width 的 1025 口径统一。
   ============================================================ */
@media (min-width: 1025px) { body { min-width: 1200px; } }
@media (min-width: 1012px) and (max-width: 1024px) {
    .bottom-nav { display: flex !important; }
    .site-header .site-nav-desktop { display: none !important; }
    .site-header .user-dropdown { display: none !important; }
    .login-btn--guest { display: none !important; }
    #mobile-menu-toggle { display: inline-block !important; }
}

/* ===== source: card.css (md5 9fd68deb49d7) ===== */
/* ============================================================
   幼师藏宝箱 · 商城 — card.css (Apple 风格)
   商品卡片 / 瀑布流 masonry / 徽章 / 划线价 / 空状态
   ============================================================ */

/* ---- 等高卡片网格 (T-MALL-HEIGHT: CSS grid, 每行卡片等高, 不再用 CSS columns) ---- */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
.masonry-grid .masonry-item { min-width: 0; }
.masonry-grid .masonry-item > a.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
/* T-MALL-RESP-DEVICES: 平板小屏 (600-767, iPad mini 6/7=744) — 2 列更舒展
   (744 下 3 列卡片约 220px 偏窄), 间距略放宽到 16px; 基础规则本就 2 列, 此处显式声明 + 加宽间距 */
@media (min-width: 600px) and (max-width: 767px) { .masonry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 768px) { .masonry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .masonry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .masonry-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* T-MALL-RESP-DEVICES: iPad 宽度列数结论 (均落在已有断点, 无需新增规则) —
   iPad 9/10=820 / Air/Pro11=834 → ≥768 区 3 列 (≈260-278px/卡, 可接受);
   iPad Pro 12.9=1024 → ≥1024 区 4 列 (≈256px/卡, 可接受) */
/* T-MALL-HEIGHT: 空状态/加载占位 (JS 注入的 .col-12) 跨满整行, 不再只占首格 */
.masonry-grid > .col-12 { grid-column: 1 / -1; }

/* 通用瀑布流 (详情页预览区复用) */
.masonry { column-count: 2; column-gap: 12px; }
.masonry-item { break-inside: avoid; margin-bottom: 12px; }
@media (min-width: 768px) { .masonry { column-count: 3; } }
@media (min-width: 1200px) { .masonry { column-count: 4; } }

/* ---- 商品卡片 ---- */
.product-card {
    background: var(--mall-card-bg);
    border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius);
    overflow: hidden;
    /* T-MALL-ANIM-0913: hover 进入动画补全 — 基态显式 transform 初始值保证 transition 双向生效;
       时长 0.25s→0.4s, 弹性缓动 (回弹感) 让"浮起"进入有位移感 (原仅阴影变化, 无位移感) */
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s var(--mall-ease);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
/* T-MALL-PAD-0917 (问题B): hover 位移/阴影包进 @media (hover:hover) —
   触屏设备 tap 会触发 :hover 且不释放, translateY(-6px) 让卡片上移卡住。
   基态 transform:translateY(0) 与 transition 保留在查询外 (上方 .product-card),
   触屏无 hover 效果, 桌面端体验不变。与 mall CSS 现有 (hover:hover) 同体系。 */
@media (hover: hover) {
    .product-card:hover {
        box-shadow: 0 12px 28px rgba(0,0,0,0.15);
        transform: translateY(-6px);
        /* T-MALL-VISUAL-WCAG-1011: hover 不再让边框消失 (原 transparent) — 改品牌绿描边 */
        border-color: var(--mall-primary);
    }
    /* T-MALL-ANIM-0913: 夜间模式 hover 阴影加深 (本站夜间实为 body[data-night], 非 data-theme) */
    body[data-night] .product-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.5); }
    /* T-MALL-PREP-HOVER-0917: 未上架卡片 hover 不浮起/不投影/不缩放 — 与 cursor:not-allowed 语义一致 */
    .product-card.card-preparing:hover {
        box-shadow: none;
        transform: translateY(0);
    }
    .product-card.card-preparing:hover .card-image img { transform: none; }
}
/* T-MALL-0912-10 (问题9): 移除卡片 hover 玻璃拟态 blur 层 — hover 不再模糊封面。
   原 T-MALL-ANIMATION-3 @media (hover:hover) .card-image::after blur(4px) 块已删;
   liquid.css 中针对该 ::after 的 liquidMorph 规则随之失效 (元素不存在), 无需改动。 */
.product-card .card-image {
    width: 100%;
    aspect-ratio: 3 / 4; /* T-MALL-HEIGHT: 封面固定 3:4, 不随内容变 */
    object-fit: cover;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(90,200,250,0.10));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    :where(html:not([data-theme="day"])) .product-card .card-image { background: linear-gradient(135deg, rgba(10,132,255,0.14), rgba(120,84,255,0.16)); }

}
.product-card .card-image img {
    width: 100%; height: 100%; object-fit: cover;
    /* T-MALL-ANIM-0913: 封面图缩放与卡片 hover 时长一致 0.4s (原 0.25s) */
    transition: transform 0.4s var(--mall-ease);
}
/* T-MALL-VISUAL-WCAG-1011: 删除封面 hover 内部放大 (用户拍板取消) —
   卡片 hover 仅保留上移 + 阴影; 原 T-MALL-PAD-0917 (问题B) 缩放块整体移除 */
.product-card .card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.product-card .card-title {
    /* T-MALL-HEIGHT: 标题字号/行高走变量, 固定占 2 行高, 短标题也占 2 行, 保证卡片等高 */
    font-size: var(--card-title-size, 14px);
    font-weight: 600; line-height: var(--card-title-lh, 1.45);
    color: var(--mall-text); margin: 0 0 6px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(var(--card-title-size, 14px) * var(--card-title-lh, 1.45) * 2);
}
.product-card .card-meta { font-size: 12px; color: var(--mall-text-muted); margin-bottom: 8px; }
.product-card .card-meta-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: nowrap; } /* T-MALL-CARD-01: 改 nowrap — 收藏/点赞行永不折行, 溢出走计数省略号 (取代 BADGE-NOWRAP-1011 的整行换行) */
.grade-chip {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; /* T-MALL-CARD-01: 窄行溢出时 chip 省略号收缩 (原 flex-shrink:0 把溢出挤给按钮, like 按钮戳出行外) */
    background: rgba(0, 122, 255, 0.18); color: #0060C0; /* T-MALL-VISUAL-1012: alpha 0.1→0.18 加深圆角底 (原太淡看不见); 文字色保持 T-MALL-VISUAL-WCAG-1011 达标值 6.11:1 */
}
/* T-STORE-FEED: 内容类型徽章 (课程/幼小衔接/安全教案/绘本视频) — 与年级 chip 并排,
   暖色(琥珀)区分年级(蓝), 对标幼师贝壳卡片"类型徽章"。浅底用 12% 琥珀底 + 琥珀字, 深底提亮。 */
.content-type-chip {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; /* T-MALL-CARD-01: 窄行溢出时 chip 省略号收缩 (同 grade-chip) */
    background: rgba(224, 125, 0, 0.20); color: var(--mall-accent, #E07D00); /* T-MALL-VISUAL-1012: 原琥珀 0.14 太淡看不见, 改 IP 深橙 20% 淡底呼应主色; 文字色仍走 WCAG 达标变量 */
}
/* T-STORE-FEED: 夜间/单色主题提亮 (与 theme.css 的 .grade-chip 门控一致) */
body[data-night] .content-type-chip { background: rgba(255, 184, 72, 0.26); color: #FFB340; } /* T-MALL-VISUAL-1012: 夜间 alpha 同步 +0.06 一档 */
body[data-theme="mono"] .content-type-chip { background: rgba(87, 96, 106, 0.12); color: #8A94A6; }
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */
    :where(html:not([data-theme="day"])) .content-type-chip { background: rgba(255, 184, 72, 0.26); color: #FFB340; } /* T-MALL-VISUAL-1012: 夜间 alpha 同步 +0.06 一档 */
    :where(html:not([data-theme="day"])) .grade-chip { background: rgba(10, 132, 255, 0.24); color: #0A84FF; } /* T-MALL-VISUAL-1012: 夜间 alpha 同步 +0.06 一档 */

}
.product-card .card-price {
    font-size: 17px; font-weight: 700; color: var(--mall-accent);
    /* T-MALL-HEIGHT: 宝箱币/按钮贴底 (flex 剩余空间上移) */
    margin-top: auto;
    flex-shrink: 0;
    /* T-MALL-CARD-01: 价格区等高 — 以两行结构(碎片价"N 碎片开箱"折行)为准固定 min-height,
       单行结构(¥9.9/免费)flex 垂直居中 → 上方 meta 行基线全卡对齐
       T-MALL-TXT-1014: 删"集齐"后文案仍可能折行(长数字+碎片开箱), min-height 保留不变 */
    display: flex; flex-wrap: wrap; align-items: center; align-content: center;
    justify-content: center; /* T-MALL-TXT2-1014: 价格行整体水平居中 (flex item 不受 text-align 影响) */
    text-align: center; /* T-MALL-TXT2-1014: 价格区文案居中 (折行时第二行同居中; flex item 位置不受影响) */
    line-height: 1.3;
    min-height: 2.6em; /* 17px × 1.3 × 2 行 */
}
.product-card .card-price .currency { font-size: 13px; }
.product-card .card-price .original-price {
    font-size: 12px; color: var(--mall-text-muted); text-decoration: line-through;
    font-weight: 400; margin-left: 6px;
}

/* ---- 商品徽章 ---- */
/* T-MALL-CARD-UX: 状态胶囊统一右上角 (left:10px → right:10px; top:10px 保持) */
.product-badge {
    position: absolute; top: 10px; right: 10px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600; color: #fff; z-index: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.badge-new { background: rgba(0, 122, 255, 0.92); }
.badge-hot { background: rgba(255, 59, 48, 0.92); }
.badge-free { background: rgba(52, 199, 89, 0.92); }
.badge-preorder { background: rgba(255, 149, 0, 0.92); }
/* T-MALL-CARD-UX: 促销角标 (右上角最外, 与状态胶囊相邻; 品牌红, 白字) */
.badge-promo { background: var(--mall-primary, #E07D00); }
/* T-MALL-BUNDLE: 多买阶梯折扣角标 "满3件9折/满5件85折" (走商城 CSS 变量, 禁硬编码颜色) */
.badge-tier { background: var(--mall-accent, #FF9F0A); color: #fff; }
/* T-MALL-CARD-UX: 右上角胶囊竖排容器 — 促销角标(上) + 状态胶囊(下) 相邻竖排, 右对齐 */
.badge-stack {
    position: absolute; top: 10px; right: 10px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    z-index: 2;
    pointer-events: none;
}
.badge-stack .product-badge { position: static; }
/* T-MALL-ALIGN (COVER-SYNC): 未封装商品 "资源准备中" 徽章 + 提示 */
.badge-preparing { background: rgba(120, 120, 128, 0.92); }
/* T-MALL-PREP-OVERLAY: 准备中卡片 — 去"准备中"胶囊+去暗幕, 文案常显于封面 2/3 处,
   卡片背景色+底部色带标记不可用 (夜间模式本站实为 body[data-night], 非 data-theme="night") */
.card-preparing .card-image { position: relative; }
/* T-CARDSHADOW-0922: 移除底部 3px 色带 (视觉呈"底部阴影") — 仅保留灰底 + not-allowed 标记不可用 */
.card-preparing {
    cursor: not-allowed;
    background: var(--card-unavailable-bg, #e9e9eb);
}
/* T-MALL-CLICK-SYNC (t_mall_click_sync_0930): 未就绪卡片 <a> 去掉 href 后仍可能残留下划线,
   显式去除 (与 .product-card 基态 text-decoration:none 双保险) */
.card-preparing { text-decoration: none; }
/* 常显提示条 (封面 2/3 处, 白字+半透明黑底, 日夜通用) */
.card-preparing .prep-tip {
    position: absolute; top:66%; left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    opacity: 1;
    z-index: 2;
    white-space: nowrap;
}
/* 夜间模式: 卡片背景色 (T-CARDSHADOW-0922: 底部色带已移除, 仅保留背景) */
body[data-night] .card-preparing { background: #1c1c1e; }
.preparing-hint {
    font-size: 13px; font-weight: 600; color: #8e8e93;
    background: rgba(120, 120, 128, 0.10); padding: 3px 10px; border-radius: 8px;
}
/* T-MALL-PREORDER-1011: pre_order 卡片价格区"即将上市"提示 (复用 preparing-hint 字号/基调) */
.preorder-hint {
    font-size: 13px; font-weight: 600; color: var(--mall-text-muted);
    background: rgba(120, 120, 128, 0.10); padding: 3px 10px; border-radius: 8px;
}
/* T-MALL-TXT2-1014 (推翻 T-MALL-TXT-1014 两档方案): 用户裁定 2026-10-14 —
   「即将上市」「碎片开箱」「资源准备中, 即将上架」三类文案全部对齐 .preparing-hint 13px 基准,
   全部居中显示, 响应式适配。原 卡片17px/详情30px 两行覆盖已删除。
   badge-preorder/badge-preparing 右上角状态胶囊 11px 不动 (与 hot/new 同组)。
   价格数字本体 (.coin-price-num/.detail-price) 与划线价字号不动。 */
.product-card .card-price .coin-unit { font-size: 13px; } /* 卡片"碎片开箱"文案 13px (数字仍继承 17px) */
.preparing-hint, .preorder-hint { text-align: center; max-width: 100%; } /* T-MALL-TXT2-1014: 胶囊内文案居中; max-width 防窄卡溢出 (超长时胶囊内折行, 仍居中) */
/* 提示胶囊在价格区水平居中 (flex item 用 margin auto, 不依赖 :has) */
.product-card .card-price > .preparing-hint,
.product-card .card-price > .preorder-hint,
.detail-price-row > .preparing-hint,
.detail-price-row > .preorder-hint { margin: 0 auto; }
/* 响应式: ≤599px 三类文案保持 13px 居中, 收窄 padding 防折行溢出 */
@media (max-width: 599px) {
    .preparing-hint, .preorder-hint { font-size: 13px; padding: 3px 8px; }
}

/* ---- 划线价 (平台价) ---- */
.xhs-price-strike {
    font-size: 12px; color: var(--mall-text-muted); text-decoration: line-through;
    font-weight: 400; margin-left: 6px;
}

/* ============================================================
   T-MALL-ANIMATION: 卡片点赞/收藏行 + 点赞微交互 (涟漪/回弹)
   样式原在已弃用的 monolithic mall.css (页面不再引用, 线上点赞按钮曾无样式),
   迁移至此 (card.css 为已加载模块) 并增强微交互。
   ============================================================ */
.card-meta-row {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px; min-height: 20px;
    flex-wrap: nowrap; /* T-MALL-CARD-01: 375/768/1440 三档均不折行 — 溢出由计数省略号吸收 */
}
.card-meta-row__spacer { flex: 1; }
/* T-FAV-DEDUP-1010: 独立 .card-fav 星标按钮规则块删除 — 与 .card-fav-count 功能重叠
   (t_mall_fav_hover_1009 副作用: 每卡两个星)。收藏控件合并为 .card-fav-count 单控件。 */
/* 点赞按钮 (卡片内, 阻止跳转; position:relative 供涟漪定位) */
.card-like {
    position: relative;
    overflow: hidden;
    display: inline-flex; align-items: center; gap: 3px;
    border: none; background: transparent; cursor: pointer;
    color: #cf222e; font-size: 12px; font-weight: 500;
    padding: 2px 6px; border-radius: 12px;
    transition: background-color 0.2s var(--mall-ease), color 0.2s var(--mall-ease);
    line-height: 1;
}
.card-like:hover { background: rgba(207, 34, 46, 0.1); color: #cf222e; }
/* T-PREVIEW-GATE (2026-10-06): 未封装 (preparing/previewable) 卡片点赞按钮禁用 — 置灰 (title"资源准备中") */
.card-like.is-disabled,
.card-like:disabled {
    color: #b0b0b5; cursor: not-allowed; pointer-events: auto;
}
.card-like.is-disabled:hover,
.card-like:disabled:hover { background: transparent; }
.card-like.is-liked { color: #cf222e; }
.card-like.is-liked:hover { background: rgba(207, 34, 46, 0.16); }
.card-like__icon { font-size: 13px; line-height: 1; }
.card-like__count { font-variant-numeric: tabular-nums; }
/* T-MALL-ANIMATION: 点赞点击回弹 (transform-only, keyframe mall-pop 见 layout.css) */
.card-like.mall-pop { animation: mall-pop 0.45s var(--mall-ease); }
/* T-MALL-SOCIAL-DATA: 收藏总数 (心形+数字, 与点赞按钮并排)
   T-FAVHOVER-1009: 可点击切换收藏 (mall.js capture 委托), hover 背景高亮与 .card-like 一致 */
.card-fav-count {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--mall-text-muted); font-size: 12px; font-weight: 500;
    line-height: 1; user-select: none;
    padding: 2px 6px; border-radius: 12px; cursor: pointer;
    transition: background-color 0.2s var(--mall-ease), color 0.2s var(--mall-ease);
}
.card-fav-count:hover { background: rgba(207, 34, 46, 0.08); color: #cf222e; }
.card-fav-count.is-fav-self { color: #cf222e; }
/* T-FAV-DEDUP-1010: 星标双字形显隐 — 未收藏灰色空心星, 已收藏红色实心星 (JS/SSR 只 toggle is-fav-self) */
/* T-MALL-CARD-01: 空心/实心统一为同码位 U+2605 — 空心用 -webkit-text-stroke 描边
   (原 U+2606 文本尖角 vs U+2B50 emoji 圆角, 两个码位字形体系不同, 切换时形状突变) */
.card-fav-count__off { display: inline; -webkit-text-stroke: 1px currentColor; -webkit-text-fill-color: transparent; }
.card-fav-count__on { display: none; }
.card-fav-count.is-fav-self .card-fav-count__off { display: none; }
.card-fav-count.is-fav-self .card-fav-count__on { display: inline; }
/* T-FAVHOVER-1009: 夜间模式 hover 背景 (本站夜间为 body[data-night], 同 L63 既有写法) */
body[data-night] .card-fav-count:hover { background: rgba(207, 34, 46, 0.18); }
.card-fav-count__off, .card-fav-count__on { font-size: 13px; line-height: 1; }
.card-fav-count__num { font-variant-numeric: tabular-nums; }
/* T-MALL-CARD-01: meta 行 nowrap 后溢出保护 — chip 省略号收缩吸收溢出, 按钮保持完整不缩,
   计数过宽时仍省略号截断, 整行不折行 */
.card-fav-count, .card-like { flex-shrink: 0; }
.card-fav-count__num, .card-like__count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 空状态 ---- */
.empty-state { text-align: center; padding: 64px 24px; color: var(--mall-text-muted); }
.empty-state .empty-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.5; line-height: 1; }
.empty-state svg.empty-svg { width: 64px; height: 64px; margin-bottom: 16px; opacity: 0.5; }
.empty-state h3 { font-size: 18px; font-weight: 600; color: var(--mall-text); margin-bottom: 8px; margin-top: 0; }
.empty-state p { font-size: 14px; margin-bottom: 20px; }
.empty-state .btn { min-width: 140px; }
.empty-state svg { margin-bottom: 16px; opacity: 0.5; }

/* ============================================================
   T-MALL-ALIGN: 卡片封面占位符 / 骨架屏 / 入场动画
   ============================================================ */

/* 无封面时的占位符 (居中 emoji, 柔和渐变底) */
.card-cover-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 56px; opacity: 0.5;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(90,200,250,0.10));
}
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    :where(html:not([data-theme="day"])) .card-cover-placeholder { background: linear-gradient(135deg, rgba(10,132,255,0.14), rgba(120,84,255,0.16)); }

}

/* ---- 骨架屏 (加载占位, shimmer) ---- */
.skeleton-card { pointer-events: none; }
.skeleton-block {
    position: relative; overflow: hidden;
    background: var(--mall-bg);
    border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */
 :where(html:not([data-theme="day"])) .skeleton-block { background: rgba(120,120,128,0.16); } 
}
.skeleton-block::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.4s infinite;
}
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    :where(html:not([data-theme="day"])) .skeleton-block::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); }

}
.skeleton-cover { width: 100%; aspect-ratio: 3/4; border-radius: 0; }
.skeleton-line { height: 14px; margin-bottom: 8px; }
.skeleton-line--short { width: 60%; }
.skeleton-price { width: 40%; height: 18px; margin-bottom: 0; }
@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}

/* ---- 入场动画 (stagger 从左到右滑入) ----
   .card-anim 初始隐藏 (左侧偏移); JS IntersectionObserver 进入视口加 .in 触发。
   --stagger 由 JS 按行内位置设置 (每卡 +50ms), 实现每行从左到右依次滑入。
   T-MALL-CARDS-PRELOAD-0918: 由"淡入+上移"改为"淡入+左移" (translateX(-20px)→0)。 */
.card-anim {
    opacity: 0;
    transform: translateX(-20px);
}
.card-anim.in {
    animation: card-fade-in 0.5s var(--mall-ease) forwards;
    animation-delay: var(--stagger, 0ms);
}
@keyframes card-fade-in {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* 尊重系统"减少动态效果"偏好: 直接显示, 不播放动画 */
@media (prefers-reduced-motion: reduce) {
    .card-anim { opacity: 1; transform: none; }
    .card-anim.in { animation: none; }
    .skeleton-block::after { animation: none; }
    .card-like.mall-pop { animation: none; }
    /* T-MALL-ANIM-0913: 卡片 hover 浮起降级 — 关闭位移过渡, 保留静态阴影 */
    .product-card { transition: none; }
    .product-card:hover { transform: none; }
}


/* ===== source: category.css (md5 0631f80ee9bc) ===== */
/* ============================================================
   幼师藏宝箱 · 商城 — category.css (Apple 风格)
   左侧分类栏 (仿管理端 NavigationDrawer) / 顶部分类 pills / Banner
   ============================================================ */

/* ---- 商城布局: 左分类 + 右内容 ---- */
.mall-shell {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.mall-shell__main { flex: 1; min-width: 0; }

/* ---- 左侧分类栏 (sticky, 毛玻璃) ---- */
.category-drawer {
    flex: 0 0 220px;
    position: sticky;
    top: calc(var(--mall-header-height) + 16px);
    max-height: calc(100vh - var(--mall-header-height) - 32px);
    overflow-y: auto;
    /* T-MALL-SIDEBAR-CONTRAST-1011: 硬编码 rgba(255,255,255,0.72) 与 #F2F2F7 页面底
       合成后仅 1.08:1 无层次 → 统一走 --glass-* 变量 (白天实色白 + 3:1 深边框, 夜间由
       theme.css body[data-night] 覆盖), 与 glass.css 后加载规则同值互为备份。 */
    background: var(--glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--mall-radius-lg);
    padding: 14px 12px;
    box-shadow: var(--mall-shadow);
}
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    :where(html:not([data-theme="day"])) .category-drawer { background: rgba(28, 28, 30, 0.72); }

}
.category-drawer__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mall-text-muted);
    padding: 4px 12px 10px;
    margin: 0;
}
.category-drawer__group {
    /* T-MALL-SIDEBAR-CONTRAST-1011: 分组间加分隔线 (年级/内容类型/排序 此前无任何分隔) */
    margin-bottom: 14px;
    border-top: 1px solid var(--glass-border);
    padding-top: 12px;
    margin-top: 12px;
}
/* 首组去线: 左栏首组前是 h3 标题 (相邻兄弟), 筛选面板首组是容器首子 (:first-child) */
.category-drawer__group:first-child,
.category-drawer__title + .category-drawer__group {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}
.category-drawer__group-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mall-text-muted);
    padding: 6px 12px 4px;
    margin: 0;
}
.category-drawer__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--mall-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--mall-text);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.2s var(--mall-ease), color 0.2s var(--mall-ease);
}
/* T-MALL-VISUAL-1012: 原 var(--mall-bg)=#F2F2F7 与侧栏白底(glass.css --glass-bg:#fff)仅 1.14:1 几乎不可见;
   T-IPCOLOR2-WEB-1012 (用户实测 10% 淡底合成 #F6EEE7 仍不可见): 加深到 18% 淡底 + 文字同步变深橙, 双通道可见。
   夜间分支 theme.css body[data-night] 已有 --mall-bg-hover, 保持不动。 */
.category-drawer__item:hover { background: rgba(224, 125, 0, 0.18); color: #C86E00; }
.category-drawer__item.active {
    /* T-MALL-VISUAL-WCAG-1011: 白字 on #34C759 仅 2.22:1, 改 --mall-primary-hover (#1a7f37 白字 5.08:1) */
    background: var(--mall-primary-hover);
    color: #fff;
    font-weight: 600;
}
.category-drawer__icon {
    font-size: 15px;
    line-height: 1;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
/* T-FILTERICON-0922: 彩色 RGBA 图标 (111 节点 Qwen2.1 生成), 替代 emoji; 夜间模式无需反相 */
.category-drawer__icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
    vertical-align: middle;
}
.category-drawer__count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--mall-text-muted);
    background: var(--mall-bg);
    border-radius: 20px;
    padding: 1px 8px;
}
.category-drawer__item.active .category-drawer__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
/* T-MALL-ANIMATION: 分类栏骨架 (shimmer 占位, 页面静态渲染; buildDrawer 加载成功后整体替换) */
.category-drawer__skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 12px;
}

/* ---- 移动端: 分类栏抽屉化 (T-MALL-IPHONE-0913) ----
   原实现把 .category-drawer 变顶部横向滚动条 (占两行, 挤压主区)。
   现改为左侧滑出抽屉: 默认 translateX(-100%) 隐藏, .open 滑入;
   汉堡按钮 (.mobile-menu-btn, 仅移动端显示) + 遮罩 (.drawer-overlay) 控制开合;
   主区 .mall-shell__main 全宽, 不再受侧栏挤压。
   注意: 遮罩基础态 (display:none) 须写在媒体查询之前 — 同特异性下后写的规则胜出,
   若基础态在 @media 之后会压掉移动端 .drawer-overlay.show 的 display:block。 */
/* 遮罩基础态: 默认隐藏 (桌面永不显示; 移动端 .show 时显示, 见下方媒体查询) */
.drawer-overlay { display: none; }
/* T-MALL-PERF-1020: 抽屉化断点 767→1024 — 平板归移动端, 分类左栏在 ≤1024 均为抽屉形态。 */
@media (max-width: 1024px) {
    .mall-shell { flex-direction: column; gap: 0; }
    .mall-shell__main { width: 100%; }
    .category-drawer {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px;
        flex: none;
        max-height: none;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s var(--mall-ease);
        z-index: 1000;
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--mall-border);
        padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
        box-shadow: 0 0 40px rgba(0,0,0,0.18);
    }
    .category-drawer.open { transform: translateX(0); }
    /* 遮罩 (移动端): 盖住全屏 (z-index 999, 低于抽屉 1000), 点击关闭 */
    .drawer-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.45);
        z-index: 999;
    }
    .drawer-overlay.show { display: block; }
}

/* ---- 汉堡按钮: 仅移动端显示 (桌面隐藏) ----
   放在 header 左侧 (logo 前), 点击 toggleCategoryDrawer() 滑出分类抽屉。 */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--mall-text);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.mobile-menu-btn:hover { background: var(--mall-bg); }
/* T-MALL-PERF-1020: 断点 767→1024 — 平板归移动端, 抽屉入口按钮在 ≤1024 显示。 */
@media (max-width: 1024px) {
    .mobile-menu-btn { display: inline-flex; }
}

/* ---- 顶部分类 pills (首页/列表页横排) ---- */
.category-nav { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 0; }
.category-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
    color: var(--mall-text); background: var(--mall-card-bg);
    border: 1px solid var(--mall-border); text-decoration: none;
    transition: all 0.2s var(--mall-ease); white-space: nowrap;
}
.category-pill:hover { border-color: var(--mall-primary); color: var(--mall-primary); }
.category-pill.active {
    /* T-MALL-VISUAL-WCAG-1011: 白字 on #34C759 仅 2.22:1, 改 --mall-primary-hover (白字 5.08:1) */
    background: var(--mall-primary-hover); color: #fff; border-color: var(--mall-primary-hover);
}

/* ---- Banner ----
   T-MALL-BANNER-CLEAN: 去掉绿色容器渐变 — 纯圆角无边框无背景 (参考 brand-band 18px 圆角)。
   容器 padding=0 (图片铺满); 无图时 .banner-default 默认态保留自己的渐变背景兜底 (见下方)。 */
.mall-banner {
    border-radius: var(--mall-radius-lg); overflow: hidden;
    background: transparent;
    /* T-MALL-VISUAL-Q2-1008: 白底 banner 图压 #F2F2F7 页面底边界不可辨 (Q2 主诉) —
       补 1px 变量边框 + 变量阴影, 日夜两态均与页面背景拉开边界 */
    border: 1px solid var(--mall-border);
    /* T-MALL7-01 (Q1): 白天 banner 阴影加深一档 — 与下方节日卡片 (轻阴影) 形成深度差,
       拉开视觉层次; 夜间由下方 body[data-night] 规则回退到变量阴影。 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 12px 30px rgba(0,0,0,0.12);
    color: #fff; padding: 0; margin-bottom: 28px;
    position: relative;
}
body[data-night] .mall-banner { box-shadow: var(--mall-shadow); }
.mall-banner h1 { font-size: 30px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.mall-banner p { font-size: 16px; opacity: 0.92; margin-bottom: 18px; }
.mall-banner .btn-banner {
    background: #fff; color: #1C1C1E; padding: 11px 26px;
    border-radius: 20px; font-weight: 600; text-decoration: none;
    display: inline-block; transition: transform 0.2s var(--mall-ease), box-shadow 0.2s var(--mall-ease);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.mall-banner .btn-banner:hover { transform: scale(1.04); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }

/* Banner 轮播 (动态图片) */
#mall-banner .banner-slide { display: block; width: 100%; }
/* T-MALL-BANNER-FIX-0921: height auto + object-fit:contain — 图片完整显示, 无左右/上下裁剪。
   6 张 banner 图均为 2048x480 同比例 (4.27:1), 轮播无高度跳动。
   (旧 285px 固定高度 + cover 导致周边裁剪, 见 t_mall_banner_fix_0921) */
#mall-banner .banner-slide img {
    width: 100%; display: block; height: auto; max-height: none;
    aspect-ratio: auto; object-fit: contain;
}
#mall-banner .banner-default {
    background: linear-gradient(135deg, #E07D00 0%, #F4B942 100%); /* T-MALL-WARM-01: 品牌 banner 绿蓝→暖橙金 */
    color: #fff; padding: 44px 36px;
}
/* T-MALL-BANNER-FIX-0921: 移动端同样 height auto + contain, 取消固定 180px (旧规则裁掉图片左右约 51% 边缘) */
@media (max-width: 599px) {
    #mall-banner .banner-slide img {
        aspect-ratio: auto; height: auto; object-fit: contain;
    }
}

/* T-MALL-BANNER-CLEAN: 轮播增强 (fade/slide 双样式 · 左右箭头 · 底部圆点指示器)。
   多张图时 JS 给 #mall-banner 加 .is-carousel (启用轨道定位/箭头/圆点); 单张或默认态不加, 保持静态。 */
#mall-banner.is-carousel {
    position: relative;
    padding: 0;
}
#mall-banner .banner-track {
    position: relative;
    width: 100%;
    overflow: hidden;
}
#mall-banner .banner-track .banner-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
#mall-banner .banner-track .banner-slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* slide 样式: 轨道 translateX 滑动 (slide 态下 slide 保持相对定位, 由轨道位移驱动) */
#mall-banner.is-carousel[data-style="slide"] .banner-track {
    display: flex;
    width: auto;
    transition: transform 0.55s ease;
}
#mall-banner.is-carousel[data-style="slide"] .banner-track .banner-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    transition: none;
}
#mall-banner.is-carousel[data-style="slide"] .banner-track .banner-slide.is-active {
    z-index: 2;
}

/* T-MALL-BANNER-THEME-0916: vertical(垂直滑动) — 轨道纵向 flex, translateY 驱动。
   轨道高度固定 = 图片 slide 高度 (桌面 285px / 移动 180px): brand-band slide 为内容高度
   (~271px), 纵向排列时会比图片 slide 矮一截, 固定轨道高度保证每张 slide 占满 100% 轨道。 */
#mall-banner.is-carousel[data-style="vertical"] .banner-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 285px;
    transition: transform 0.55s ease;
}
#mall-banner.is-carousel[data-style="vertical"] .banner-track .banner-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
    transition: none;
}
#mall-banner.is-carousel[data-style="vertical"] .banner-track .banner-slide img {
    height: 100%;
}
@media (max-width: 599px) {
    #mall-banner.is-carousel[data-style="vertical"] .banner-track {
        height: 180px;
    }
}

/* T-MALL-BANNER-THEME-0916: zoom(缩放) — 当前张放大入场 (scale 1.08→1), 其余缩小淡出。
   与 fade 同为叠放结构 (absolute + is-active), 仅过渡曲线不同 (transform 主导)。 */
#mall-banner.is-carousel[data-style="zoom"] .banner-track .banner-slide {
    transform: scale(1.08);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
#mall-banner.is-carousel[data-style="zoom"] .banner-track .banner-slide.is-active {
    transform: scale(1);
}

/* T-MALL-BANNER-THEME-0916: coverFlow(3D 折叠) — 当前张居中, 上一张(左)向右倾、下一张(右)向左倾退后。
   叠放结构 + perspective 容器; is-prev/is-next 类由轮播 JS 按相对位置标记。 */
#mall-banner.is-carousel[data-style="coverFlow"] .banner-track {
    perspective: 1200px;
}
#mall-banner.is-carousel[data-style="coverFlow"] .banner-track .banner-slide {
    transform: translateX(0) rotateY(0) translateZ(0);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
#mall-banner.is-carousel[data-style="coverFlow"] .banner-track .banner-slide.is-active {
    z-index: 2;
    transform: translateX(0) rotateY(0) translateZ(0);
}
#mall-banner.is-carousel[data-style="coverFlow"] .banner-track .banner-slide.is-prev {
    opacity: 0.55;
    transform: translateX(-14%) rotateY(28deg) translateZ(-120px);
}
#mall-banner.is-carousel[data-style="coverFlow"] .banner-track .banner-slide.is-next {
    opacity: 0.55;
    transform: translateX(14%) rotateY(-28deg) translateZ(-120px);
}
#mall-banner.is-carousel[data-style="coverFlow"] .banner-track .banner-slide:not(.is-active):not(.is-prev):not(.is-next) {
    opacity: 0;
    transform: translateZ(-200px);
}

/* 左右箭头 (octicon 内联 svg, hover 显示; 触屏常显) */
#mall-banner .banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    border-radius: 50%;
    /* T-MALL-ARROW-0913: 0.35→0.55 加深圆盘 (当时误判为对比度问题)。
       T-MALL-ARROW-FIX-0921: 真正根因是 index.php ARROW_RIGHT 路径减号被误改为空格,
       下臂整条不渲染 — 已恢复官方 octicons 路径, 见 index.php 注释 */
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    padding: 0;
}
#mall-banner .banner-arrow svg { width: 20px; height: 20px; fill: currentColor; }
#mall-banner .banner-arrow--prev { left: 12px; }
#mall-banner .banner-arrow--next { right: 12px; }
#mall-banner.is-carousel:hover .banner-arrow,
#mall-banner.is-carousel .banner-arrow:focus-visible { opacity: 1; }
#mall-banner .banner-arrow:hover { background: rgba(0, 0, 0, 0.75); }
@media (hover: none) {
    /* 触屏设备无 hover, 箭头常显 */
    #mall-banner.is-carousel .banner-arrow { opacity: 0.8; }
}

/* 底部圆点指示器 (当前高亮, 可点击跳转) */
#mall-banner .banner-dots {
    position: absolute;
    left: 0; right: 0;
    bottom: 12px;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}
#mall-banner .banner-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
#mall-banner .banner-dot.is-active {
    background: #fff;
    transform: scale(1.25);
}
#mall-banner .banner-dot:hover { background: rgba(255, 255, 255, 0.85); }

/* ---- T-MALL-FLT-0917: 全屏筛选面板 (smzdm 风格, 移动端) ----
   .filter-btn (仅移动端显示) 点击 → openFilterSheet() (mall.js) 弹出全屏面板,
   替代原侧边抽屉交互; 头部 返回按钮 + 标题 + 图标关闭, 主体 年级/活动类型/排序三组
   (home.js/products.js 经 window.__filterSheetData 注入数据), 底部 应用筛选按钮。
   选项 chip 直接复用 .category-drawer__item / __group-label 现有样式, 视觉与左栏一致。
   桌面端 (≥768px) 不启用: .filter-btn 在该断点已隐藏, 此处再兜底强制 display:none。 */
.filter-sheet {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: var(--mall-bg, #F2F2F7);
    display: flex;
    flex-direction: column;
}
.filter-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
    border-bottom: 1px solid var(--mall-border, rgba(60, 60, 67, 0.12));
    background: var(--mall-card-bg, #fff);
}
.filter-sheet__back {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--mall-primary, #E07D00);
    font-size: 15px;
    cursor: pointer;
    padding: 8px;
}
.filter-sheet__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mall-text, #1C1C1E);
}
.filter-sheet__close {
    border: none;
    background: transparent;
    color: var(--mall-text-muted, #8E8E93);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.filter-sheet__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}
/* 组容器: 复用左栏分组间距 (margin-bottom 由 .category-drawer__group 提供) */
.filter-sheet__body .category-drawer__group { margin-bottom: 20px; }
.filter-sheet__body .category-drawer__group-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mall-text-muted);
    padding: 0 12px 8px;
}
.filter-sheet__foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mall-border, rgba(60, 60, 67, 0.12));
    background: var(--mall-card-bg, #fff);
}
.filter-sheet__apply {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    /* T-MALL-VISUAL-WCAG-1011: 白字 on 绿仅 2.22:1, 改 --mall-primary-hover (白字 5.08:1) */
    background: var(--mall-primary-hover, #C86E00);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
body[data-night] .filter-sheet { background: #1c1c1e; }
/* 桌面端兜底: 左栏筛选常显, 全屏面板永不启用
   T-MALL-PERF-1020: 断点 768→1025 — 平板归移动端, 全屏筛选面板在 ≤1024 可用。 */
@media (min-width: 1025px) {
    .filter-sheet { display: none !important; }
}


/* ===== source: product.css (md5 0189f5149a00) ===== */
/* ============================================================
   幼师藏宝箱 · 商城 — product.css (Apple 风格)
   商品详情页 / 登录弹窗 / 登录按钮 / 用户下拉
   ============================================================ */

/* ---- 详情页布局 (左预览瀑布 + 右信息卡) ---- */
.detail-layout { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) {
    .detail-layout { flex-direction: row; align-items: flex-start; gap: 24px; }
    .detail-preview-col { flex: 0 0 58%; }
    /* T-MALL-DETAIL-02: 右栏「资源明细」目录树随左列高度撑出窗口 → 无法整屏浏览。
       sticky + max-height(视口-头部-边距) + overflow-y:auto → 目录树在视口内独立滚动。
       移动端 (<768px) 本 media 块外天然 static, 无需额外恢复。 */
    .detail-info-col { flex: 1; position: sticky; top: calc(var(--mall-header-height, 64px) + 16px); max-height: calc(100vh - var(--mall-header-height, 64px) - 32px); overflow-y: auto; }
}
.detail-preview { }
/* T-MALL-DETAIL-02: 预览瀑布流 → 单图轮播跑马灯。笔记合成页均为竖版 3:4,
   固定 aspect-ratio 3/4 容器 + object-fit: contain → 完整显示零裁剪 (原 cover 把
   横版 PPT 合成图左右裁头的问题随数据源收窄+contain 一并消除)。
   全部 <img> 保留在 DOM (SEO/无JS 可读), 非活跃页 opacity:0 堆叠隐藏;
   自动播放(5s, T-Q13-CAROUSEL-1010)/悬停暂停/箭头/触摸滑动由 detail_core.js initPreviewCarousel 驱动。 */
.detail-preview-carousel {
    position: relative; aspect-ratio: 3/4; overflow: hidden;
    border-radius: var(--mall-radius); background: var(--mall-bg);
    box-shadow: var(--mall-shadow);
    /* T-MALL-BORDER-01: 原无 border 仅 box-shadow, 白天白底对比度不清。
       补 1px var(--mall-border) (#8A8A8E, 同首页 .product-card 边框源);
       夜间 --mall-border 由 theme.css body[data-night] 覆写, 自动跟随。 */
    border: 1px solid var(--mall-border);
}
.detail-preview-carousel .detail-preview-item {
    position: absolute; inset: 0; margin-bottom: 0;
    /* T-Q13-CAROUSEL-1010: 淡入淡出 0.45s→0.8s — 切换更柔和 (配合 5s 间隔的舒缓节奏) */
    opacity: 0; transition: opacity 0.8s var(--mall-ease);
    border-radius: 0; box-shadow: none; background: transparent;
    /* 堆叠项全部 absolute inset:0 → 非活跃项必须 pointer-events:none,
       否则 DOM 最末项 (opacity:0) 盖住活跃图, 点击进灯箱会命中错误的图 */
    pointer-events: none;
}
.detail-preview-carousel .detail-preview-item.is-active { opacity: 1; pointer-events: auto; }
/* T-MALL-WM-DOUBLE-1011: 删除轮播容器 ::after 的 CSS 水印层 —
   后端 xhs_note_compose.py 已对全部笔记合成页烘焙 45° 平铺水印
   (TILE_ALL_WM alpha 0.30 / 封面 COVER_WM 0.35, 幂等标记 .xhs_wm_v4),
   前端再叠同角度 SVG 平铺 → 预览图水印双重加深, 故仅保留烘焙水印一层。 */
.detail-preview-carousel .detail-preview-item img {
    width: 100%; height: 100%; display: block; object-fit: contain;
    transition: none;
}
.detail-preview-carousel .detail-preview-item:hover img { transform: none; }
/* 左右箭头 */
.carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 15px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, opacity 0.2s;
}
.carousel-arrow:hover { background: rgba(0, 0, 0, 0.55); }
.carousel-arrow--prev { left: 10px; }
.carousel-arrow--next { right: 10px; }
/* 页码指示 "3/8" 底部居中 */
.carousel-counter {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
    padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600;
    color: #fff; background: rgba(0, 0, 0, 0.45); pointer-events: none;
}
/* prefers-reduced-motion: 不自动播放 (JS 判定), 淡入过渡也取消 */
@media (prefers-reduced-motion: reduce) {
    .detail-preview-carousel .detail-preview-item { transition: none; }
}
/* T-PREVIEW-FULLSET 子项② (已随 T-MALL-DETAIL-02 轮播化退役): 原 column-count 瀑布流 +
   is-collapsed 折叠隐藏第 13 张起 + "显示全部"按钮 — 保留样式定义兼容旧缓存 DOM, 不再产生新节点。 */
.detail-preview-items { column-count: 2; column-gap: 12px; }
.detail-preview.is-collapsed .detail-preview-items .detail-preview-item:nth-child(n + 13) { display: none; }
/* "显示全部（共 X 张）"按钮 — 全宽 (多列容器外的兄弟节点), 折叠/展开切换 */
.preview-show-all {
    width: 100%; margin-top: 4px; padding: 11px 18px;
    font-size: 14px; font-weight: 600; color: var(--mall-text, #333);
    background: var(--mall-card-bg, #fff); border: 1px solid var(--mall-border, #e5e5ea);
    border-radius: var(--mall-radius, 12px); cursor: pointer;
    box-shadow: var(--mall-shadow, none); transition: opacity 0.2s;
}
.preview-show-all:hover { opacity: 0.85; }
.detail-preview-item {
    break-inside: avoid; margin-bottom: 12px; position: relative;
    border-radius: var(--mall-radius); overflow: hidden;
    background: var(--mall-bg);
    box-shadow: var(--mall-shadow);
}
.detail-preview-item img {
    width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover;
    transition: transform 0.35s var(--mall-ease);
}
.detail-preview-item:hover img { transform: scale(1.05); }

/* T-DETAIL-PREVIEW-0930: 移除未登录"预 览"水印 (.preview-watermark) —
   原 18% 白蒙层 (rgba(255,255,255,0.18)) 让整张预览图发灰/偏白, 降低获取意愿。
   预览图全量公开 (无登录门槛), 故水印整体移除, 不再覆盖任何预览图。 */
.preview-more-hint {
    text-align: center; padding: 12px; font-size: 13px; color: var(--mall-text-muted);
    background: var(--mall-card-bg); border-radius: var(--mall-radius-sm); margin-top: 4px;
    border: 1px solid var(--mall-border);
}
/* T-DETAIL-PREV-0922: 预览区底部 CTA 按钮 (登录/获取/下载三态, 替代原固定文案) */
.preview-cta-row {
    margin-top: 12px; display: flex; justify-content: center;
}
.preview-cta-row .btn-preview-cta {
    width: 100%; max-width: 320px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 18px; font-size: 15px; font-weight: 600;
    border-radius: var(--mall-radius); border: none; cursor: pointer;
    text-decoration: none;
    white-space: nowrap; min-width: max-content;
}
/* T-MALL7-08 (Q7): 「开通会员获取全部/完整教案」CTA 防折行 — PHP 文案无 span 包裹,
   窄屏不改文案, 改 13px + nowrap (11字×13px+图标+padding ≈ 200px < 320px 上限,
   320px 视口可用宽 ~288px 仍容纳); <992px 按钮行整体已由 .detail-actions
   flex-wrap:wrap + 各按钮 min-width:max-content 保证整按钮换行、文字不拆行 */
@media (max-width: 991.98px) {
    .preview-cta-row .btn-preview-cta { font-size: 13px; padding: 11px 14px; }
}

/* T-MALL7-08 (2026-10-09): 按钮 FA 图标字重修复。
   根因: primer.min.css `.btn i { font-weight: var(--base-text-weight-medium, 500) }`
   (特异度 0,1,1) 覆盖 fa-all.min.css `.fa-solid,.fas { font-weight: 900 }` (0,1,0)
   → 按钮图标计算字重 500, 浏览器回退 fa-regular-400 面渲染; regular 面 cmap 缺
   U+F07A (cart-shopping) → 购物车图标渲染成带叉方块 (收藏星 U+F005 / 心 U+F004
   在 regular 面存在, 故看似正常实为描边版)。!important 强制全部按钮图标回 solid 面,
   购物车恢复实心, 收藏/点赞同步统一为实心版。 */
.btn i.fa-solid, .btn i.fas, .btn i.fa-regular, .btn i.far { font-weight: 900 !important; }

/* 商品信息卡 */
.detail-info-card {
    background: var(--mall-card-bg); border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius-lg); padding: 22px;
    box-shadow: var(--mall-shadow);
}
.detail-title { font-size: 21px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; letter-spacing: -0.01em; }
.detail-price-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 14px; text-align: center; } /* T-MALL-TXT2-1014: 价格区容器居中 (三类文案 13px 居中裁定) */
/* T-MALL-BUNDLE: 详情页多买优惠提示行 (走商城 CSS 变量, 禁硬编码颜色) */
.detail-tier-hint {
    display: inline-block; margin-bottom: 14px; padding: 6px 12px;
    border-radius: 8px; font-size: 13px; font-weight: 600;
    background: color-mix(in srgb, var(--mall-accent) 12%, transparent);
    color: var(--mall-accent); border: 1px solid color-mix(in srgb, var(--mall-accent) 35%, transparent);
}
.detail-price { font-size: 30px; font-weight: 700; color: var(--mall-accent); }
.detail-price .currency { font-size: 16px; }
/* T-MALL-TXT2-1014: 详情页"碎片开箱"文案并入 13px 基准 (价格数字 30px 本体不动) */
.detail-price .coin-unit { font-size: 13px; font-weight: 600; }
.detail-price-free { font-size: 26px; font-weight: 700; color: var(--mall-primary); }
.detail-xhs-price { font-size: 14px; color: var(--mall-text-muted); text-decoration: line-through; }
.detail-xhs-label { font-size: 12px; color: var(--mall-text-muted); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* T-MALL-DETAIL-01: 使用须知黄框与下方领域/班级标签间距 */
.detail-usage-notice { margin-bottom: 14px; }
.detail-tag {
    padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 600;
    border: 1px solid transparent;
}
.tag-free { background: rgba(52,199,89,0.14); color: #1a7f37; border-color: rgba(52,199,89,0.3); }
.tag-member { background: rgba(255,204,0,0.16); color: #9a6700; border-color: rgba(255,204,0,0.4); }
.tag-paid { background: var(--mall-bg); color: var(--mall-text-muted); border-color: var(--mall-border); }
.tag-preorder { background: rgba(255,149,0,0.14); color: #bc4c00; border-color: rgba(255,149,0,0.35); }
.tag-gray { background: var(--mall-bg); color: var(--mall-text-muted); border-color: var(--mall-border); }
.detail-desc { font-size: 14px; color: var(--mall-text-muted); line-height: 1.7; margin-bottom: 16px; white-space: pre-line; }
/* T-BUG-BTN-0922: 加购/收藏/点赞三按钮同行等宽 — flex 容器 gap 8px, 窄屏换行各自 100% */
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* T-BUG-BTN-0922: 三按钮统一尺寸 — 等宽 flex:1, 相同 padding/font-size/line-height/border-radius;
   高度由 flex 行 stretch 对齐 (同排等高), 图标统一 16x16 (见下方 svg 规则) */
.btn-add-cart-main, .btn-fav, .btn-like {
    flex: 1 1 0; min-width: max-content;
    padding: 12px; font-size: 13px; font-weight: 600; line-height: 1;
    border-radius: 6px; text-align: center; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
/* T-MALL7-08 (Q7): 同排全部按钮防文字折行 — nowrap + min-width:max-content 保证
   按钮不被 flex 压到文字宽度以下 (原 min-width:0 下 1280px 视口加购仅 ~83px → 折两行);
   容器放不下时由 .detail-actions 既有 flex-wrap:wrap 整按钮换行, 文字永不拆行 */
.detail-actions .btn { white-space: nowrap; min-width: max-content; }
/* T-MALL-ICON-0920: 按钮图标与文字统一 inline-flex 横向对齐 (SVG 16x16 + gap 6px) */
/* T-BUG-BTN-0922: 加购按钮背景显式走 --mall-primary (夜间 #30D158), 不依赖 primer 变量;
   与收藏/点赞同排时视觉重量一致, 夜间模式背景/边框/文字色自洽 */
.btn-add-cart-main {
    flex: 1 1 0; min-width: 0; padding: 12px; text-align: center;
    background: var(--mall-primary, #E07D00); border-color: var(--mall-primary, #E07D00); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1;
}
.btn-preorder {
    flex: 1; min-width: 140px; padding: 13px; text-align: center;
    background: rgba(255,149,0,0.12); color: #bc4c00; border: 1px solid rgba(255,149,0,0.35);
    border-radius: var(--mall-radius-sm); font-weight: 600; cursor: not-allowed;
    font-size: 13px; /* T-MALL-TXT2-1014: "即将上市，敬请期待" 并入 13px 基准, 居中 */
}
/* T-MALL-ALIGN (COVER-SYNC): 未封装商品 "资源准备中" 按钮(替代加购) */
.btn-preparing {
    flex: 1; min-width: 140px; padding: 13px; text-align: center;
    background: rgba(120,120,128,0.12); color: #6e6e73; border: 1px solid rgba(120,120,128,0.35);
    border-radius: var(--mall-radius-sm); font-weight: 600; cursor: not-allowed;
    font-size: 13px; /* T-MALL-TXT2-1014: "资源准备中, 即将上架" 并入 13px 基准, 居中 */
}
/* T-MALL-TXT2-1014: 详情页 CTA 按钮内"资源准备中，即将上架"文字并入 13px 基准
   (图标 16px 与按钮整体高度不变) */
.cta-preparing-text { font-size: 13px; }
/* T-PREVIEW-GATE (2026-10-06): 详情页未封装 (preparing/previewable) 商品按钮禁用态 —
   置灰 + not-allowed (禁下载/加购/点赞; 收藏按钮保持可用)。
   .btn-preview-cta / .btn-acquire-main / .btn-like 共用 .is-disabled。 */
.btn-preview-cta.is-disabled,
.btn-acquire-main.is-disabled,
.btn-like.is-disabled,
.btn-preview-cta:disabled,
.btn-acquire-main:disabled,
.btn-like:disabled {
    background: rgba(120,120,128,0.12); color: #8e8e93; border-color: rgba(120,120,128,0.35);
    cursor: not-allowed; opacity: 1;
}
body[data-night] .btn-preview-cta.is-disabled,
body[data-night] .btn-acquire-main.is-disabled,
body[data-night] .btn-like.is-disabled,
body[data-night] .btn-preview-cta:disabled,
body[data-night] .btn-acquire-main:disabled,
body[data-night] .btn-like:disabled {
    background: rgba(120,120,128,0.20); color: #98989d; border-color: rgba(120,120,128,0.40);
}

/* 验证码行 */
.captcha-row { display: flex; gap: 8px; align-items: center; }
/* Q24: 360px 窄屏下 input(min-width:auto) + img(flex-shrink:0) 撑破容器
   → 注册页验证码行横向溢出 8px。允许两者收缩。 */
.captcha-row .form-control { flex: 1; min-width: 0; }
.captcha-row img {
    height: 40px; width: auto; border-radius: var(--mall-radius-sm); cursor: pointer;
    border: 1px solid var(--mall-border); flex-shrink: 1; min-width: 0;
    /* T-CAPTCHA-0922: 空 src/加载失败时也有底色, 不露破碎图标 */
    background: #f0f0f0; min-width: 72px;
}
.field-hint { font-size: 12px; color: var(--mall-text-muted); margin-top: 4px; }

/* ---- 登录/注册 弹窗 ---- */
.login-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 1000; align-items: center; justify-content: center; padding: 20px;
}
.login-modal-overlay.show { display: flex; animation: overlayFadeIn 0.2s var(--mall-ease); }
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
.login-modal {
    background: var(--mall-card-bg); border-radius: var(--mall-radius-lg);
    padding: 32px; width: 100%; max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    position: relative; animation: modalSlideIn 0.28s var(--mall-ease);
    /* T-MALL-MODAL-H-0916: 注册 tab 7 字段在 iPhone SE(667px) 超屏, 加 max-height+滚动 */
    /* T-MODAL-DVH-1013: 100vh→min(100vh,100dvh) — 地址栏收起/弹出按实际视口算 */
    max-height: calc(min(100vh, 100dvh) - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-modal { max-height: min(90vh, 90dvh); overflow-y: auto; overscroll-behavior: contain; }
.auth-tabs { margin-bottom: 16px; }
.login-modal-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: var(--mall-bg); color: var(--mall-text-muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s var(--mall-ease);
}
.login-modal-close:hover { background: var(--mall-border); color: var(--mall-text); }
.login-modal-header { text-align: center; margin-bottom: 24px; padding-top: 8px; }
.login-modal-logo { margin-bottom: 12px; }
/* T-MALL-LOGO-0922: 弹窗内真实 logo 图 (与 header .site-logo-img 同规格) */
.login-modal-logo-img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.login-modal-header h2 { font-size: 20px; font-weight: 700; color: var(--mall-text); margin: 0 0 6px; }
.login-modal-header p { font-size: 14px; color: var(--mall-text-muted); margin: 0; }
.login-modal .login-error {
    display: none; padding: 10px 14px; border-radius: var(--mall-radius-sm);
    background: rgba(255,59,48,0.1); color: #cf222e; font-size: 14px; margin-bottom: 16px; text-align: center;
}
.login-success {
    display: none; padding: 10px 14px; border-radius: var(--mall-radius-sm);
    background: rgba(52,199,89,0.12); color: #1a7f32; font-size: 14px; margin-bottom: 16px;
}
/* T-MALL-NICK-0916: 昵称重名黄色提醒条 (非 error, 不阻断注册/修改) */
.login-nick-warning {
    display: none; padding: 8px 14px; border-radius: var(--mall-radius-sm);
    background: rgba(210,153,34,0.12); color: #d29922; font-size: 13px; margin-bottom: 16px;
}
.login-modal-btn { padding: 13px; border-radius: var(--mall-radius-sm); font-size: 15px; font-weight: 600; }
.login-modal-footer {
    text-align: center; font-size: 13px; color: var(--mall-text-muted);
    margin-top: 16px; margin-bottom: 0;
}
.login-modal-footer a { color: var(--mall-primary); text-decoration: none; }
.login-modal-footer a:hover { text-decoration: underline; }
/* T-MALL-AUTH-UX: 登录弹窗输入框补边框 — vendor primer.min.css 有全局
   .form-control{border:none;box-shadow:none;margin-left:8px;padding:0} 覆盖,
   登录弹窗(.form-control)输入框因此无边框。用双类选择器(特异性 0,2,0)压过
   primer 的 .form-control(0,1,0), 不动全局 form-control, 只修登录弹窗。 */
.login-modal .login-modal-input {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    padding: 8px 10px;
    border: 1px solid var(--mall-border, #d0d7de);
    border-radius: 6px;
    background: var(--mall-card-bg, #fff);
    color: var(--mall-text, #1f2328);
    box-shadow: none;
    font-size: 14px;
    line-height: 1.5;
    /* T-MALL-AUTHMODAL-UNIFY-0927: 补 height:auto — Primer .form-select 固定 height:32px,
       本覆盖改了 padding 8px/line-height 1.5 未重设 height → 内容区仅 14px 放 21px 行高,
       select 默认项「请选择安全问题」文字底部被裁。 */
    height: auto;
}
/* T-MALL-AUTHMODAL-UNIFY-0927: 弹窗内 select 单独兜底 — 确保 form-select 不被 Primer height:32px 限制 */
.login-modal .form-select {
    height: auto;
    min-height: 36px;
}
.login-modal .login-modal-input:focus {
    outline: none;
    border-color: var(--mall-primary, #E07D00);
    box-shadow: 0 0 0 3px rgba(224, 125, 0, 0.15);
}
/* T-MALL-AUTH-UX: 登录/注册 tab (全局登录弹窗 + 详情 auth 弹窗共用) */
.login-tabs {
    display: flex; gap: 4px; margin-bottom: 16px;
    background: var(--mall-bg, #f6f8fa); border-radius: 10px; padding: 4px;
}
.login-tab {
    flex: 1; padding: 8px 12px; border: none; border-radius: 7px;
    background: transparent; color: var(--mall-text-muted, #6e6e73);
    font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s var(--mall-ease);
}
.login-tab.active {
    background: var(--mall-card-bg, #fff); color: var(--mall-text, #1f2328);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.login-tab:hover:not(.active) { color: var(--mall-text, #1f2328); }
/* T-MALL-AUTH-UX: 新手教程弹窗 (复用 login-modal 外观) */
.onboarding-modal { text-align: center; }
.onboarding-step { padding: 8px 0 16px; }
.onboarding-icon { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.onboarding-step h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: var(--mall-text, #1f2328); }
.onboarding-step p { font-size: 14px; color: var(--mall-text-muted, #6e6e73); line-height: 1.6; margin: 0; min-height: 44px; }
.onboarding-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.onboarding-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mall-border, #d0d7de); transition: all 0.2s var(--mall-ease);
}
.onboarding-dot.active { background: var(--mall-primary, #E07D00); width: 22px; border-radius: 5px; }
/* T-MALL-AUTH-UX: 付费商品"免费下载"按钮 (新客 1 次免费额度) */
.btn-free-dl {
    flex: 1 1 0; min-width: 0; padding: 12px; text-align: center;
    background: rgba(224, 125, 0, 0.12); color: #C86E00; /* T-MALL-WARM-01: 免费下载 CTA 走主色橙系 (语义色, 非成功态) */
    border: 1px solid rgba(224, 125, 0, 0.4); border-radius: 6px;
    font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transition: all 0.2s var(--mall-ease);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-free-dl:hover { background: var(--mall-primary, #E07D00); color: #fff; border-color: var(--mall-primary, #E07D00); }
/* T-MALL-BTN-HOVER-0927: 免费下载 hover 对比度修复 — 原 --mall-primary (日间 #34C759 白字 2.22:1 /
   夜间 #30D158 白字 2.02:1) 均不达标, 改 --mall-primary-hover (#1a7f37 白字 5.08:1), 与 .btn-primary hover 同色 */
.btn-free-dl:hover { background: var(--mall-primary-hover, #C86E00); color: #fff; border-color: var(--mall-primary-hover, #C86E00); }

/* ---- 登录按钮 ---- */
.login-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 39px; box-sizing: border-box;
    padding: 7px 15px; border-radius: 20px;
    border: 1px solid var(--mall-border); background: var(--mall-card-bg);
    color: var(--mall-text); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.2s var(--mall-ease); white-space: nowrap;
}
.login-btn:hover { background: var(--mall-bg); border-color: var(--mall-primary); color: var(--mall-primary); }
.login-btn--guest {
    border-color: var(--mall-primary); color: var(--mall-primary);
    background: rgba(224, 125, 0, 0.08);
}
.login-btn--guest:hover { background: var(--mall-primary); color: #fff; border-color: var(--mall-primary); }
.login-btn--logged { border-color: transparent; background: transparent; padding: 7px 10px; height: 39px; box-sizing: border-box; }
.login-btn--logged:hover { background: var(--mall-bg); color: var(--mall-text); border-color: var(--mall-border); }

/* ---- 用户下拉菜单 ---- */
.dropdown-arrow { transition: transform 0.2s var(--mall-ease); margin-left: 2px; }
.user-dropdown { position: relative; }
.user-dropdown-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 180px; background: var(--mall-card-bg);
    border: 1px solid var(--mall-border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16); padding: 6px; z-index: 300;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.user-dropdown-menu.show { display: block; animation: dropdownFadeIn 0.15s var(--mall-ease); }
@keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: var(--mall-radius-sm);
    color: var(--mall-text); text-decoration: none; font-size: 13px;
    cursor: pointer; border: none; background: none; width: 100%; text-align: left;
    transition: background 0.15s var(--mall-ease);
}
.dropdown-item:hover { background: var(--mall-bg); }
.dropdown-item--danger { color: #cf222e; }
.dropdown-item--danger:hover { background: rgba(255,59,48,0.08); }
.dropdown-divider { height: 1px; background: var(--mall-border); margin: 4px 0; }
.dropdown-icon { flex-shrink: 0; opacity: 0.6; font-size: 14px; }
/* T-MALL-DROPDOWN-0916: 下拉菜单顶部用户信息行 (头像+用户名, 灰字13px, 不可点击) */
.dropdown-user-info {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px 10px; border-bottom: 1px solid var(--mall-border); margin-bottom: 4px;
}
/* T-MALL-VIP-AVATAR-01: 原绿底首字圈样式移入组件 .vip-avatar-core;
   外层容器改为透明包裹 (避免与组件底色叠加成双圈) */
.dropdown-user-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.dropdown-user-name {
    font-size: 13px; color: var(--mall-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   T-MALL-VIP-AVATAR-01: VIP 等级头像组件 (SVG 叠加)
   双维度: 套餐环 (membership_type: 月银/季金/年紫金/终身皇冠) +
           成长徽章 (level: 铜/银/金星 → 月 → 星, 数量随级递增, 回退同步降级)。
   到期: warn 窗口内显琥珀「剩N天」; 过期灰环 + 「已过期」角标 (点击跳续费)。
   全部颜色走 --vip-* 变量 (夜间/黑白覆盖见 theme.css), SVG 用 currentColor。
   ============================================================ */
.vip-avatar {
    position: relative; display: inline-flex;
    width: 28px; height: 28px; flex-shrink: 0;
    /* 环/角标溢出头像边界, 不能 clip */
}
.vip-avatar--lg { width: 36px; height: 36px; }
.vip-avatar-core {
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    background: var(--vip-avatar-bg, var(--mall-primary)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; line-height: 1;
}
.vip-avatar--lg .vip-avatar-core { font-size: 16px; }
.vip-avatar-core img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 套餐环 (付费维度) */
.vip-ring { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); pointer-events: none; }
.vip-ring--monthly   { color: var(--vip-ring-silver); }
.vip-ring--quarterly { color: var(--vip-ring-gold); }
.vip-ring--annual    { color: var(--vip-ring-purple); }
.vip-ring--annual .vip-ring-inner { stroke: var(--vip-ring-gold); }
.vip-ring--lifetime  { color: var(--vip-ring-gold-deep); }
.vip-crown {
    position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
    width: 14px; height: 9px; color: var(--vip-ring-gold-deep);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); pointer-events: none;
}
/* 月/季/年角标 (右上) */
.vip-type-badge {
    position: absolute; top: -3px; right: -4px;
    min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px;
    font-size: 9px; line-height: 13px; text-align: center; font-weight: 700; color: #fff;
    pointer-events: none;
}
.vip-type-badge--monthly   { background: var(--vip-ring-silver); }
.vip-type-badge--quarterly { background: var(--vip-ring-gold); }
.vip-type-badge--annual    { background: var(--vip-ring-purple); }
/* 成长等级徽章 (消费维度, 左下小圆徽) */
.vip-level-badge {
    position: absolute; bottom: -3px; left: -4px;
    display: flex; align-items: center; gap: 0.5px;
    height: 12px; padding: 0 3px; border-radius: 6px;
    background: var(--vip-badge-bg, rgba(0,0,0,0.55));
    pointer-events: none;
}
.vip-level-badge svg { width: 8px; height: 8px; display: block; }
.vip-tier--bronze svg { color: var(--vip-tier-bronze); }
.vip-tier--silver svg { color: var(--vip-tier-silver); }
.vip-tier--gold   svg { color: var(--vip-tier-gold); }
.vip-tier--moon   svg { color: var(--vip-tier-moon); }
.vip-tier--star   svg { color: var(--vip-tier-star); }
/* 到期预警 (琥珀「剩N天」) / 失效态 (灰环 + 已过期角标, 点击跳续费) */
.vip-warn-badge {
    position: absolute; bottom: -4px; right: -6px;
    height: 13px; padding: 0 4px; border-radius: 7px;
    background: var(--vip-warn-bg, #bf8700); color: #fff;
    font-size: 9px; line-height: 13px; font-weight: 600; white-space: nowrap;
    pointer-events: none;
}
.vip-expired-badge {
    position: absolute; bottom: -4px; right: -6px;
    height: 13px; padding: 0 4px; border-radius: 7px;
    background: var(--vip-expired-bg, #6e7681); color: #fff;
    font-size: 9px; line-height: 13px; font-weight: 600; white-space: nowrap;
    text-decoration: none;
}
.vip-avatar--expired .vip-ring,
.vip-avatar--expired .vip-crown,
.vip-avatar--expired .vip-type-badge { filter: grayscale(1) opacity(0.55); }
.vip-avatar--expired .vip-level-badge svg { filter: grayscale(1) opacity(0.7); }
/* 移动端 36px 档: 角标略放大 */
.vip-avatar--lg .vip-type-badge { min-width: 15px; height: 15px; line-height: 15px; font-size: 10px; border-radius: 8px; }
.vip-avatar--lg .vip-level-badge { height: 14px; border-radius: 7px; }
.vip-avatar--lg .vip-level-badge svg { width: 9px; height: 9px; }
.vip-avatar--lg .vip-warn-badge,
.vip-avatar--lg .vip-expired-badge { height: 15px; line-height: 15px; font-size: 10px; }

/* ---- 移动端用户信息 ---- */
.mobile-user-info { border-top: 1px solid var(--mall-border); margin-top: 8px; }
/* T-MALL-VIP-AVATAR-01: 底色样式移入组件 .vip-avatar-core, 外层仅占位 */
.mobile-user-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.mobile-login-btn {
    display: block; text-align: center; padding: 12px 16px;
    background: var(--mall-primary); color: #fff; border: none;
    border-radius: var(--mall-radius-sm); font-size: 14px; font-weight: 600;
    cursor: pointer; margin: 8px 16px;
}

/* ============================================================
   T-FIX-ORPHANED-CSS: 详情页点赞/收藏按钮 + 会员状态条
   样式原在已废弃的 monolithic mall.css (页面不再引用, 线上曾无样式),
   迁移至此 (product.css 为已加载模块)。
   ============================================================ */
.btn-fav {
    flex: 1 1 0; min-width: 0; padding: 12px; text-align: center;
    background: var(--mall-bg, #f6f8fa); color: var(--mall-text-muted, #57606a);
    border: 1px solid var(--mall-border, #d0d7de); border-radius: 6px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1;
}
.btn-fav:hover { border-color: #cf222e; color: #cf222e; }
.btn-fav.is-favorited { background: #ffebe9; color: #cf222e; border-color: #ff818266; }
.btn-fav.is-favorited:hover { color: #cf222e; }
.btn-like {
    flex: 1 1 0; min-width: 0; padding: 12px; text-align: center;
    background: var(--mall-bg, #f6f8fa); color: var(--mall-text-muted, #57606a);
    border: 1px solid var(--mall-border, #d0d7de); border-radius: 6px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1;
}
.btn-like:hover { border-color: #cf222e; color: #cf222e; }
.btn-like.is-liked { background: #ffebe9; color: #cf222e; border-color: #ff818266; }
.btn-like.is-liked:hover { color: #cf222e; }
/* T-MALL-ICON-0920: 按钮内 SVG 图标统一 16x16, 取消 .mr-2 额外 margin (间距由 gap 控制) */
.btn-fav svg, .btn-like svg, .btn-add-cart-main svg { width: 16px; height: 16px; flex: none; margin: 0; }
.btn-like__icon { flex: none; }
.btn-like__count { font-variant-numeric: tabular-nums; opacity: 0.85; }
.member-status-bar {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    background: linear-gradient(135deg, #C86E00 0%, #F4B942 100%); /* T-MALL-WARM-01: 会员状态条绿蓝→暖橙金 */
    color: #fff; border-radius: var(--mall-radius); padding: 20px 24px; margin-bottom: 24px;
}
.member-status-bar .msb-item { font-size: 14px; }
.member-status-bar .msb-item .msb-label { opacity: 0.85; font-size: 12px; display: block; }
.member-status-bar .msb-item .msb-value { font-size: 18px; font-weight: 700; }
.member-status-bar .msb-cta { margin-left: auto; }
.member-status-bar .btn { background: #fff; color: var(--mall-primary); font-weight: 700; }
.plan-quota {
    display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 12px;
    background: #fff8c5; color: #9a6700; font-size: 12px; font-weight: 600;
}
/* T-MALL-MODAL-H-0916: 移动端登录/注册弹窗压缩 — 缩小 padding/logo/标题, 减少超屏 */
@media (max-width: 480px) {
    .login-modal { padding: 20px 16px; }
    .login-modal-header { margin-bottom: 14px; }
    .login-modal-logo svg, .login-modal-logo-img { width: 32px; height: 32px; }
    .login-modal-header h2 { font-size: 18px; }
    /* T-BUG-BTN-0922: 窄屏三按钮换行, 各自占满一行 */
    .detail-actions .btn-add-cart-main,
    .detail-actions .btn-free-dl,
    .detail-actions .btn-fav,
    .detail-actions .btn-like { flex: 1 1 100%; }
}
/* T-MALL-CART-NIGHT-0922: 夜间模式加购按钮对比度修复 — 亮绿 #30D158 底+白字仅 1.75:1 (WCAG 需 4.5:1),
   改深绿底+白字, 夜间达标且不刺眼; 日间不变 */
/* T-MALL-THEMECOMPAT-0924: 夜间加购按钮跟随主题色 (原硬编码绿 #1a3a24/#2e7d4f 无视 --mall-primary,
   红主题夜间显示绿按钮 = 用户所见 bug)。夜间 --mall-primary 是提亮变体, 白字对比不足,
   故底用 color-mix 压暗 (主题色 55% + 黑) 保 WCAG, hover 回提亮主色; color-mix 不支持时
   回退上一行 --mall-primary-dark (仍为主题色系, 深底白字达标) */
body[data-night] .btn-add-cart-main { background:var(--mall-primary-dark); border-color:var(--mall-primary-dark); color:#fff; }
body[data-night] .btn-add-cart-main { background:color-mix(in srgb, var(--mall-primary) 55%, #000); border-color:color-mix(in srgb, var(--mall-primary) 55%, #000); color:#fff; }
body[data-night] .btn-add-cart-main:hover { background:var(--mall-primary-dark); }
body[data-night] .btn-add-cart-main:hover { background:color-mix(in srgb, var(--mall-primary) 72%, #000); }
/* T-MALL-BTN-HOVER-0927: 夜间加购 hover 对比度修复 — 原 color-mix 72% (#25983b) 白字 3.73:1
   不达标, 改深绿 #1a7f37 (白字 5.08:1 达标), 与日间 .btn-primary hover 同色 */
body[data-night] .btn-add-cart-main:hover { background:#C86E00; }
/* T-MALL-FAVLIKE-NIGHT-0922: 夜间模式收藏/点赞按钮红色突兀修复 — hover 深红 #cf222e 对比度低,
   is-favorited/is-liked 浅粉底 #ffebe9 在夜间黑底上刺眼; 改提亮红 #ff6b6b + 半透明红底, 夜间不刺眼; 日间不变 */
body[data-night] .btn-fav:hover, body[data-night] .btn-like:hover { border-color:#ff6b6b; color:#ff6b6b; }
body[data-night] .btn-fav.is-favorited, body[data-night] .btn-like.is-liked { background:rgba(255,69,58,0.18); color:#ff6b6b; border-color:rgba(255,69,58,0.35); }
body[data-night] .btn-fav.is-favorited:hover, body[data-night] .btn-like.is-liked:hover { color:#ff6b6b; }
/* T-MALL-BTN-HOVER-0927: 商城 CTA 按钮 hover 白底白字修复 (Primer 令牌未激活)。
   根因: Primer .btn-primary:hover (0,2,0) 的 background-color 取
   var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg)), 这两个变量
   在 vendor/primer.min.css 中仅定义于 [data-color-mode=...][data-*-theme=...] 属性选择器下
   (:root 级定义数=0, 已 grep 验证), 商城从未设置 data-color-mode → 声明计算期失效 →
   background-color=transparent → 白卡片透出 + 文字仍 color:#fff = 白底白字。
   修复: 此处 (0,2,0) 与 Primer 持平, product.css 在 primer.min.css 之后加载 → 后加载胜。
   颜色走新令牌 --mall-primary-hover (layout.css :root, 深绿 #1a7f37, 白字对比 5.08:1 达标)。
   不用 --mall-primary-dark: 日间值 #248A3D 白字仅 4.40:1 不达标, 夜间被 theme.css 覆写为
   亮绿 #28CD4F 白字仅 2.11:1 更差, 且它还有 promo-bar/btn-download 等其他消费方不宜改动。
   夜间: 夜间 preview-cta hover 由 theme.css body[data-night] 规则 (0,3,0) 继续覆盖, 不受影响;
   夜间加购按钮 hover 由 product.css 上方 T-MALL-THEMECOMPAT-0924 规则 (0,3,0) 覆盖, 不受影响;
   夜间其余 .btn-primary (如登录弹窗) hover 落本规则: #1a7f37 深绿底+白字 5.08:1 达标。
   mono 黑白态: body filter:grayscale(1) 整体降彩, 绿变灰, 无需单独处理。
   覆盖按钮: 加入购物车/登录查看完整/开通会员获取/免费下载 (detail_render.php:61-65,120;
   detail/sidebar.php:71,74)。不采用 <html> 加 data-color-mode 方案 (影响面大, 需全站回归)。 */
.btn.btn-primary:hover { background-color: var(--mall-primary-hover, #C86E00); border-color: var(--mall-primary-hover, #C86E00); color: #fff; }
.btn.btn-primary:focus { background-color: var(--mall-primary-hover, #C86E00); border-color: var(--mall-primary-hover, #C86E00); color: #fff; }

/* T-STORE-DETAIL-MANIFEST (2026-10-06): 资源明细目录树 (对标幼师贝壳"资源明细")。
   右栏信息卡内, 按 lesson_type 动态分组; 未登录也显示 (仅下载需登录)。
   折叠: .manifest-group.is-collapsed 隐藏文件列表 + 箭头旋转 (JS 委托切 class)。 */
.detail-manifest {
    margin-top: 18px; padding: 14px 16px;
    background: var(--mall-card-bg); border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius-lg);
}
.detail-manifest__header { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.detail-manifest__title { font-size: 15px; font-weight: 700; }
.detail-manifest__total { font-size: 12px; color: var(--mall-text-muted); }
/* T-DETAILUX-1012: 整卡抽屉总开关 — 收起态只留 header 摘要 (大小+文件数), 隐藏全部分组。
   颜色走 --mall-primary 变量, 夜间自动适配。 */
.detail-manifest__toggle {
    margin-left: auto; flex: 0 0 auto;
    border: 1px solid var(--mall-primary); color: var(--mall-primary);
    background: transparent; border-radius: 999px;
    font-size: 12px; line-height: 1.4; padding: 2px 12px; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.detail-manifest__toggle:hover { background: var(--mall-primary); color: var(--mall-card-bg, #fff); }
.detail-manifest.is-folded .manifest-group { display: none; }
.detail-manifest.is-folded .detail-manifest__header { margin-bottom: 0; }
.manifest-group { border-top: 1px solid var(--mall-border); }
.manifest-group:first-of-type { border-top: none; }
.manifest-group__head {
    display: flex; align-items: center; gap: 8px; padding: 9px 2px; cursor: pointer;
    user-select: none; -webkit-user-select: none;
}
.manifest-group__head:hover .manifest-group__label { color: var(--mall-primary); }
.manifest-group__arrow { font-size: 10px; color: var(--mall-text-muted); transition: transform .18s ease; display: inline-block; }
.manifest-group.is-collapsed .manifest-group__arrow { transform: rotate(-90deg); }
.manifest-group__label { font-size: 13px; font-weight: 600; }
.manifest-group__meta { margin-left: auto; font-size: 11px; color: var(--mall-text-muted); white-space: nowrap; }
.manifest-group__files { list-style: none; margin: 0 0 8px 0; padding: 0 0 0 18px; max-height: 260px; overflow-y: auto; }
.manifest-group.is-collapsed .manifest-group__files { display: none; }
.manifest-file { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.manifest-file__icon { font-size: 14px; width: 18px; text-align: center; flex: 0 0 18px; }
.manifest-file__name {
    font-size: 12.5px; flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.manifest-file__size { font-size: 11px; color: var(--mall-text-muted); white-space: nowrap; flex: 0 0 auto; }
body[data-night] .detail-manifest { background: var(--mall-card-bg); border-color: var(--mall-border); }


/* ===== source: cart.css (md5 b8a5295b476f) ===== */
/* ============================================================
   幼师藏宝箱 · 商城 — cart.css (Apple 风格)
   购物车 / 游客购物车 / 支付页
   ============================================================ */

/* ---- 购物车商品 ---- */
.cart-item {
    display: flex; gap: 16px; padding: 16px;
    border: 1px solid var(--mall-border); border-radius: var(--mall-radius);
    background: var(--mall-card-bg); margin-bottom: 12px;
    transition: box-shadow 0.25s var(--mall-ease);
}
.cart-item:hover { box-shadow: var(--mall-shadow); }
.cart-item-image {
    width: 80px; height: 80px; border-radius: var(--mall-radius-sm); object-fit: cover;
    flex-shrink: 0; background: var(--mall-bg); overflow: hidden;
}
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title {
    font-weight: 600; font-size: 14px; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.cart-item-title a { color: var(--mall-text); text-decoration: none; }
.cart-item-title a:hover { color: var(--mall-primary); }
.cart-item-price { color: var(--mall-accent); font-weight: 700; font-size: 16px; }
.cart-item-price .xhs-price-strike { font-size: 12px; }
.cart-item-preorder-badge {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    background: rgba(255,149,0,0.14); color: #bc4c00; font-size: 11px; font-weight: 600;
    margin-left: 8px; vertical-align: middle;
}
.cart-item-disabled { opacity: 0.75; }
.cart-item-disabled .qty-group, .cart-item-disabled .btn-remove-cart { display: none; }
.cart-subtotal-excluded { color: var(--mall-text-muted); font-style: italic; }
/* T-MALL-BUNDLE: 结算页多买优惠行金额 (走商城 CSS 变量, 禁硬编码颜色) */
.cart-tier-discount { font-size: 13px; color: var(--mall-primary); font-weight: 600; }

/* 数量选择器 */
.qty-group { gap: 4px; }
.qty-group .btn { border-radius: 8px; }
.qty-input { text-align: center; }

/* ---- 购物车汇总 (sticky, 毛玻璃) ---- */
.cart-summary {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius-lg); padding: 20px;
    position: sticky; bottom: 16px; box-shadow: var(--mall-shadow);
}
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    :where(html:not([data-theme="day"])) .cart-summary { background: rgba(28, 28, 30, 0.8); }

}
/* T-NIGHT-CARTCSS-1011: 站内手动夜间 (body[data-night], localStorage app-theme, 独立于系统)
   根因: 深色表面只写在 @media(prefers-color-scheme:dark) (系统级), 浅色系统开应用夜间时
   汇总条仍是白玻璃, 而 --mall-text 已被 theme.css body[data-night] 翻成白色 → 白字压白底。
   补 body[data-night] 等价规则 (与 theme.css 夜间写法同特异性 (0,2,1), theme.css 后加载靠
   源码顺序取胜走 --glass-bg-strong 变量; 本条为文件内自洽备份)。 */
body[data-night] .cart-summary { background: rgba(28, 28, 30, 0.8); }

/* ---- 游客购物车提示 ---- */
.guest-cart-hint {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; margin-bottom: 12px;
    background: rgba(0,122,255,0.08); border: 1px solid rgba(0,122,255,0.2);
    border-radius: var(--mall-radius); color: #0969da; font-size: 13px;
}
.guest-cart-hint a { color: #0969da; font-weight: 600; text-decoration: none; }
.guest-cart-hint a:hover { text-decoration: underline; }

/* ---- 支付页 ---- */
.payment-status-icon { font-size: 64px; margin-bottom: 16px; }
.payment-steps {
    background: var(--mall-bg); border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius); padding: 16px; margin: 16px 0;
}
.payment-steps h4 { margin: 0 0 10px; font-size: 15px; }
.payment-steps ol { margin: 0; padding-left: 20px; }
.payment-steps li { font-size: 13px; color: var(--mall-text); line-height: 1.9; }
.payment-steps li strong { color: var(--mall-accent); }
.member-hint {
    padding: 12px 14px; border-radius: var(--mall-radius-sm); margin: 12px 0;
    background: rgba(255,204,0,0.12); border: 1px solid rgba(255,204,0,0.35);
    color: #9a6700; font-size: 13px;
}
.payment-success-box { text-align: center; padding: 24px 0; }
.payment-success-box .ok-icon { font-size: 56px; margin-bottom: 12px; }

/* ---- 响应式 ---- */
/* T-MALL-RESP-DEVICES: 768 边界统一 — max-width:768 → 767, 避免 768 宽 (iPad mini 5 竖屏)
   与 min-width:768 两套规则同时命中 (生效取决于加载顺序, 边界不干净)
   T-MALL-PERF-1020: 断点 767→1024 — 平板归移动端, 底部导航显示区间扩到 <1025,
   悬浮结算栏须同步让位到导航上方。 */
@media (max-width: 1024px) {
    .cart-item { flex-direction: column; }
    .cart-item-image { width: 100%; height: 120px; }
    .cart-summary {
        /* T-MALL-TAB-0917: 同步 layout.css — 悬浮栏停在导航栏(含 safe-area)上方, 不压进安全区 */
        position: fixed; bottom: calc(var(--mall-bottom-nav-height) + env(safe-area-inset-bottom));
        left: 0; right: 0; border-radius: var(--mall-radius) var(--mall-radius) 0 0; z-index: 199;
    }
}


/* ===== source: order.css (md5 a347c08f7268) ===== */
/* ============================================================
   幼师藏宝箱 · 商城 — order.css (Apple 风格)
   订单 / 下载 / 会员 / 登录页 / 个人中心 / 页脚
   ============================================================ */

/* ---- 订单卡 ---- */
.order-card {
    background: var(--mall-card-bg); border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius); margin-bottom: 16px; overflow: hidden;
    transition: box-shadow 0.25s var(--mall-ease);
}
.order-card:hover { box-shadow: var(--mall-shadow); }
.order-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 16px; background: var(--mall-bg);
    border-bottom: 1px solid var(--mall-border); font-size: 13px;
}
.order-status { padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-pending { background: rgba(255,204,0,0.18); color: #9a6700; }
.status-paid { background: rgba(52,199,89,0.16); color: #1a7f37; }
.status-shipped { background: rgba(0,122,255,0.14); color: #0969da; }
.status-completed { background: var(--mall-bg); color: var(--mall-text-muted); }
.status-cancelled { background: rgba(255,59,48,0.12); color: #cf222e; }
.status-downloading { background: rgba(0,122,255,0.14); color: #0969da; }
.status-delivered { background: rgba(0,122,255,0.14); color: #0969da; }
.status-expired { background: var(--mall-bg); color: var(--mall-text-muted); }
.order-items { padding: 16px; }
.order-item { display: flex; gap: 12px; padding: 8px 0; align-items: center; }
.order-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 16px; border-top: 1px solid var(--mall-border);
}

/* 订单商品名列表 */
.order-product-names { padding: 8px 16px 0; font-size: 13px; color: var(--mall-text); line-height: 1.6; }
.order-product-names .muted { color: var(--mall-text-muted); }

/* 待支付说明 */
.order-pay-note {
    padding: 11px 16px; margin: 0 16px 12px;
    background: rgba(255,204,0,0.12); border: 1px solid rgba(255,204,0,0.35);
    border-radius: var(--mall-radius-sm); color: #9a6700; font-size: 13px; line-height: 1.6;
}

/* ---- 下载按钮 ---- */
.btn-download {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--mall-radius-sm); font-size: 14px; font-weight: 600;
    background: var(--mall-primary); color: #fff; text-decoration: none;
    border: none; cursor: pointer; transition: background 0.2s var(--mall-ease), transform 0.2s var(--mall-ease);
}
.btn-download:hover { background: var(--mall-primary-dark); transform: translateY(-1px); }
.btn-download:disabled { background: var(--sys-gray); cursor: not-allowed; transform: none; }
.btn-download--ghost { background: transparent; color: var(--mall-primary); border: 1px solid var(--mall-primary); }
.btn-download--ghost:hover { background: rgba(224, 125, 0,0.08); }
.download-expiry-hint { font-size: 12px; color: var(--mall-text-muted); margin-top: 6px; }
.download-expired-note {
    padding: 10px 14px; border-radius: var(--mall-radius-sm); margin-top: 8px;
    background: rgba(255,59,48,0.1); color: #cf222e; font-size: 13px;
}

/* ---- 会员权益卡片 ---- */
.benefit-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.benefit-card {
    flex: 1 1 200px; min-width: 180px;
    background: var(--mall-card-bg); border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius); padding: 18px;
    transition: box-shadow 0.25s var(--mall-ease), transform 0.25s var(--mall-ease);
}
.benefit-card:hover { box-shadow: var(--mall-shadow); transform: translateY(-2px); }
.benefit-card .benefit-icon { font-size: 28px; margin-bottom: 8px; }
.benefit-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.benefit-card p { margin: 0; font-size: 13px; color: var(--mall-text-muted); line-height: 1.6; }
.benefit-card .benefit-quota { margin-top: 8px; font-size: 13px; color: var(--mall-primary); font-weight: 600; }

/* ---- 登录页 ---- */
.login-wrapper {
    min-height: calc(100vh - 120px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-card {
    background: var(--mall-card-bg); border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius-lg); padding: 34px; width: 100%; max-width: 400px;
    box-shadow: var(--mall-shadow);
}
.login-error {
    display: none; padding: 10px 14px; border-radius: var(--mall-radius-sm);
    background: rgba(255,59,48,0.1); color: #cf222e; font-size: 14px; margin-bottom: 16px;
}

/* ---- 个人中心 ---- */
.profile-header {
    background: linear-gradient(135deg, #E07D00 0%, #F4B942 100%); /* T-MALL-WARM-01: 个人中心头部绿蓝→暖橙金 */
    padding: 34px; text-align: center; color: #fff;
    border-radius: var(--mall-radius-lg) var(--mall-radius-lg) 0 0;
}
.profile-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255,255,255,0.22); display: flex;
    align-items: center; justify-content: center; margin: 0 auto 12px;
    font-size: 28px;
}

/* ---- 页脚 ---- */
.site-footer { background: var(--mall-bg); border-top: 1px solid var(--mall-border); margin-top: 32px; }
.site-footer--enriched {
    background: var(--mall-card-bg); border-top: 1px solid var(--mall-border);
    margin-top: 48px; font-size: 14px; color: var(--mall-text-muted);
}
.site-footer__main {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 32px; padding: 48px 24px 32px;
}
.site-footer__col-title { font-size: 15px; font-weight: 700; color: var(--mall-text); margin: 0 0 16px; }
.site-footer__about { line-height: 1.7; }
.site-footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.site-footer__brand { font-size: 16px; font-weight: 700; color: var(--mall-text); }
.site-footer__desc { margin: 0 0 8px; font-size: 13px; line-height: 1.6; }
.site-footer__icp-notice { font-size: 12px; color: var(--mall-text-muted); opacity: 0.7; margin: 0; }
.site-footer__links { list-style: none; padding: 0; margin: 0; }
.site-footer__links li { margin-bottom: 10px; }
.site-footer__links a { color: var(--mall-text-muted); text-decoration: none; transition: color 0.2s var(--mall-ease); font-size: 13px; }
.site-footer__links a:hover { color: var(--mall-primary); text-decoration: underline; }
.site-footer__contact { list-style: none; padding: 0; margin: 0; }
.site-footer__contact li { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.site-footer__contact li svg { flex-shrink: 0; opacity: 0.6; }
/* T-IPCOLOR2-WEB-1012 (用户二次裁定 2026-10-12): 联系绿方案作废 — 页脚是整体底部,
   联系方式列不得单独绿底; 删除 .site-footer__col--contact 绿底白字/夜间绿底深字全部规则,
   恢复与其它 footer 列一致 (走 .site-footer__col / .site-footer__contact 通用样式)。 */
.site-footer__qrcode { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.site-footer__qr-placeholder {
    padding: 12px; border: 1px dashed var(--mall-border); border-radius: var(--mall-radius-sm);
    display: flex; align-items: center; justify-content: center; background: var(--mall-bg);
}
.site-footer__qr-text { font-size: 12px; color: var(--mall-text-muted); margin: 0; }
/* T-MALL-APK-DL-0915: footer 二维码 (PHP 生成) + 下载App 按钮 */
.site-footer__qr-img {
    width: 120px; height: 120px; border-radius: 8px; display: block;
    background: #fff; padding: 4px; image-rendering: pixelated;
}
.site-footer__qr-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 120px; height: 120px;
}
.site-footer__download-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px; padding: 8px 18px; border-radius: 999px;
    background: var(--mall-primary); color: #fff; font-size: 13px; font-weight: 600;
    text-decoration: none; transition: transform 0.2s var(--mall-ease), opacity 0.2s var(--mall-ease);
}
.site-footer__download-btn svg { flex-shrink: 0; }
.site-footer__download-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.site-footer__bottom { border-top: 1px solid var(--mall-border); background: var(--mall-bg); }
.site-footer__bottom .container-lg {
    padding: 16px 24px; display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 8px;
}
.site-footer__copyright { font-size: 13px; margin: 0; color: var(--mall-text-muted); }
.site-footer__icp { font-size: 12px; margin: 0; color: var(--mall-text-muted); opacity: 0.7; }
@media (max-width: 1024px) {
    .site-footer__main { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 32px 16px 24px; }
}
@media (max-width: 600px) {
    .site-footer__main { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px; }
    .site-footer__col { text-align: center; }
    .site-footer__logo { justify-content: center; }
    .site-footer__contact li { justify-content: center; }
    .site-footer__bottom .container-lg { flex-direction: column; text-align: center; gap: 4px; }
}

/* ============================================================
   T-MALL-APK-DL-0915: 下载页 (download.php) + 首页/关于 下载App 入口
   ============================================================ */
/* 首页 banner 双 CTA 容器 (主 CTA + 下载App 幽灵按钮) */
.brand-band__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-delivery--ghost {
    background: transparent; color: inherit;
    box-shadow: none; border: 1.5px solid currentColor;
    padding: 13px 28px; display: inline-flex; align-items: center; gap: 8px;
}
.btn-delivery--ghost:hover { box-shadow: none; opacity: 0.85; }

/* 下载页整体 */
.dl-page { max-width: 880px; margin: 0 auto; padding: 40px 24px 64px; }
.dl-hero { text-align: center; margin-bottom: 40px; }
.dl-hero__icon {
    width: 96px; height: 96px; margin: 0 auto 20px; border-radius: 22px;
    overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    background: var(--mall-card-bg, #fff);   /* T-DL-NIGHT-0916: 原硬编码 #fff → 变量 (夜间深底) */
}
.dl-hero__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-hero__eyebrow {
    display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    /* T-MALL-CONTRAST-1007: 同 static-page__eyebrow — 绿字压浅色背景对比度不足，
       白天 #166534 on body(237,244,228)=6.34; 夜间 #30D158 on body(17,45,31)=7.32 已达标保持变量 */
    color: #166534; margin-bottom: 10px;
}
body[data-night] .dl-hero__eyebrow { color: var(--mall-primary); }
@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="day"])) .dl-hero__eyebrow { color: var(--mall-primary); }
}
body[data-theme="mono"] .dl-hero__eyebrow { color: #424a53; }
body[data-night][data-theme="mono"] .dl-hero__eyebrow { color: #adbac7; }
.dl-hero__title { font-size: 32px; font-weight: 800; margin: 0 0 12px; color: var(--mall-text); }
.dl-hero__subtitle { font-size: 16px; line-height: 1.7; color: var(--mall-text-muted); margin: 0 auto; max-width: 560px; }

/* 功能亮点 2x2 */
.dl-features {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 40px;
}
.dl-feature {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px; border-radius: var(--mall-radius, 12px);
    background: var(--mall-bg); border: 1px solid var(--mall-border);
}
.dl-feature__icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(224, 125, 0, 0.12);
    color: var(--mall-primary);
}
.dl-feature__title { font-size: 15px; font-weight: 700; color: var(--mall-text); margin-bottom: 4px; }
.dl-feature__desc { font-size: 13px; line-height: 1.6; color: var(--mall-text-muted); }

/* 下载区: 二维码 + 按钮 */
.dl-download {
    display: flex; align-items: center; justify-content: center; gap: 48px;
    padding: 32px; border-radius: 16px;
    background: var(--mall-bg); border: 1px solid var(--mall-border);
    margin-bottom: 24px;
}
.dl-download__qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dl-download__qr img {
    /* 二维码必须保留白底 (扫码识别需要); 日间加浅描边, 夜间加深色描边包裹避免白块突兀 */
    width: 180px; height: 180px; border-radius: 12px; background: #fff;
    padding: 8px; display: block; image-rendering: pixelated;
    border: 1px solid var(--mall-border);
}
.dl-download__qr-text { font-size: 13px; color: var(--mall-text-muted); }
.dl-download__action { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.dl-download__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 40px; border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-gold, #F4B942), var(--brand-gold-deep, #E0A22E));
    color: var(--brand-navy, #1B2A4A); font-size: 17px; font-weight: 700; text-decoration: none;
    box-shadow: 0 6px 18px rgba(244, 185, 66, 0.4);
    transition: transform 0.2s var(--mall-ease), box-shadow 0.2s var(--mall-ease);
}
.dl-download__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(244, 185, 66, 0.5); }
.dl-download__meta { font-size: 14px; color: var(--mall-text); margin: 0; }
.dl-download__ver { font-weight: 700; color: var(--mall-primary); }
.dl-download__file { font-size: 13px; color: var(--mall-text-muted); margin: 0; }
.dl-download__filelink { color: var(--mall-primary); text-decoration: underline; }
.dl-tip { font-size: 13px; color: var(--mall-text-muted); text-align: center; margin: 0; line-height: 1.6; }

/* ============================================================
   T-DL-NIGHT-0916: 客户端下载矩阵 (download.php 3 项, 2 列网格, 移动端 1 列; T-MALL-PADRM-1013 移除安卓平板项)
   每项卡片 = 平台图标 + 名称 + 状态角标 (已上架=绿 / 开发中=灰) + 按钮 + 副文案。
   全部颜色走 --mall-* 变量 → 夜间/黑白/深色底自动跟随, 无硬编码色 (二维码白底除外, 见上)。
   ============================================================ */
.dl-clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 40px; }
.dl-client {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 20px; border-radius: var(--mall-radius, 12px);
    background: var(--mall-bg); border: 1px solid var(--mall-border);
}
.dl-client__icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(224, 125, 0, 0.12); color: var(--mall-primary);
}
.dl-client__name { font-size: 15px; font-weight: 700; color: var(--mall-text); }
.dl-client__badge {
    position: absolute; top: 14px; right: 14px;
    padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
/* 状态角标: 已上架=绿 / 开发中=灰 (rgba 底 + 深字, 日夜两态可读; adapting 随平板项移除, T-MALL-PADRM-1013) */
.dl-client__badge--live    { background: rgba(52, 199, 89, 0.16);  color: #1a7f37; }
.dl-client__badge--dev     { background: rgba(142, 142, 147, 0.16); color: #6e7681; }
.dl-client__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-gold, #F4B942), var(--brand-gold-deep, #E0A22E));
    color: var(--brand-navy, #1B2A4A); font-size: 15px; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 14px rgba(244, 185, 66, 0.35);
    transition: transform 0.2s var(--mall-ease), box-shadow 0.2s var(--mall-ease);
}
.dl-client__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(244, 185, 66, 0.45); }
.dl-client__btn:disabled, .dl-client__btn[aria-disabled="true"] {
    background: var(--sys-gray); color: var(--mall-card-bg);
    box-shadow: none; cursor: not-allowed; transform: none;
}
.dl-client__note { font-size: 13px; color: var(--mall-text-muted); margin: 0; line-height: 1.6; }

/* dl-night (T-DL-NIGHT-0916): 下载页夜间模式兼容块 — dl-* 区 data-night 覆盖
   ============================================================
   T-DL-NIGHT-0916: 下载页夜间模式兼容 (dl-* 区)
   根因: dl-* 区原 0 处 data-night 覆盖 + 2 处硬编码白底 (.dl-hero__icon / 二维码, 已改变量/描边);
   关键 bug: .dl-download__btn 文字走 --brand-navy, 夜间被 theme.css 翻成 #FDF8F0 (浅米)
   → 金字浅字不可读。夜间固定深藏青文字 (与日间同值, 金底深字两态都成立)。
   深色静态底 (data-bg-base="dark", 非夜间): dl-* 表面走 --mall-bg/--mall-border 变量,
   与 footer 同机制 (glass.css body[data-bg-base="dark"] 规则) 自动跟随, 文字 --mall-text 不变,
   无需额外覆盖 (组合验证: 6 背景类型 × 夜间开/关 均达标, 见任务记录)。
   ============================================================ */
body[data-night] .dl-hero__icon { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
body[data-night] .dl-download__btn { color: #1B2A4A; }
body[data-night] .dl-client__btn { color: #1B2A4A; }
body[data-night] .dl-client__badge--live { background: rgba(48, 209, 88, 0.18); color: #30D158; }
body[data-night] .dl-client__badge--dev { background: rgba(152, 152, 157, 0.18); color: #98989D; }

/* 关于我们页 下载App 卡片 */
.static-page__card--download { padding: 0; overflow: hidden; }
/* T-ABOUT-DLCOLOR-1008 (Q13): 下载卡片按钮「绿字压金底」对比度崩坏修复
   根因: layout.css `.static-page__card a { color: var(--mall-primary) }` 特异性 (0,1,1)
   高于 glass.css `.btn-delivery { color: var(--brand-navy) }` (0,1,0) → 本卡片按钮文字
   被翻成绿色, 压金色渐变底, Playwright 实测对比度仅 1.25(白天 #34C759)/1.14(夜间
   #30D158), 远低于 WCAG 4.5。卡片底本身夜间已是 --mall-card-bg #1C1C1E 深底(实测),
   违和源即按钮绿字。
   修复: 只 scope 到本卡片 (不动全局 .btn-delivery), 按钮文字固定深藏青 — 与
   theme.css:117 brand-band 夜间配方同法。JS 夜间 body[data-night] 与系统深色两机制
   都覆盖 (T-MALL-CONTRAST-1007 惯例)。对比度: #1F3A5F on #F4B942 = 6.49,
   on #E8A93A = 5.56, 均 >= 4.5 达标。黑白悼念态走灰阶底, 深字 4.76/5.62 达标。 */
.static-page__card--download .btn-delivery { color: #1F3A5F; }
body[data-night] .static-page__card--download .btn-delivery {
    background: linear-gradient(135deg, #F4B942, #E8A93A);
    color: #1F3A5F;
}
@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="day"])) .static-page__card--download .btn-delivery {
        background: linear-gradient(135deg, #F4B942, #E8A93A);
        color: #1F3A5F;
    }
}
body[data-theme="mono"] .static-page__card--download .btn-delivery { color: #24292f; }
body[data-night][data-theme="mono"] .static-page__card--download .btn-delivery { color: #161b22; }
.about-download {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 28px 32px; flex-wrap: wrap;
}
.about-download__text h2 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--mall-text); }
.about-download__text p { font-size: 14px; line-height: 1.7; color: var(--mall-text-muted); margin: 0; max-width: 520px; }
.about-download__action { flex-shrink: 0; }

@media (max-width: 767px) {
    .dl-page { padding: 28px 16px 48px; }
    .dl-hero__title { font-size: 26px; }
    .dl-features { grid-template-columns: 1fr; }
    .dl-clients { grid-template-columns: 1fr; }   /* T-DL-NIGHT-0916: 矩阵移动端 1 列 */
    .dl-download { flex-direction: column; gap: 24px; padding: 24px 16px; }
    .about-download { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
}

/* ============================================================
   T-PROFILE-ORDER-0916: 订单中心增强
   状态 tab / 时间筛选 / 详情入口 / 删除按钮 / 重新生成 / 订单详情页
   ============================================================ */

/* ---- 状态 tab (全部/待支付/已完成/已取消) ---- */
/* T-MALL-ORDERS-UI-0918: 与上方 banner 加 16px 间距 (原 margin-bottom:4px 无上间距, tab 贴 banner);
   补 display:flex + gap:8px — 原 HTML 的 gap-2 在 Primer 中未定义 (死类), tab 间无水平间隔。 */
.order-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; margin-bottom: 4px; }
.order-tab { font-weight: 600; }

/* ---- 时间筛选 (按创建时间) ---- */
/* T-MALL-ORDERS-UI-0918: 改 flex 布局 + align-items:center + gap:8px —
   原 HTML 的 d-flex/gap-2/align-items-center 中 gap-2、align-items-center 在 Primer 未定义 (死类),
   导致「下单时间」行元素无水平间隔、且 label/input/按钮未垂直居中对齐。 */
.order-time-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: var(--mall-card-bg); border: 1px solid var(--mall-border); border-radius: var(--mall-radius); }
.order-time-filter__label { font-size: 13px; color: var(--mall-text-muted); font-weight: 600; }
.order-time-filter__input {
    background: var(--mall-bg); color: var(--mall-text); border: 1px solid var(--mall-border);
    border-radius: 8px; padding: 6px 10px; font-size: 13px; color-scheme: dark;
}
.order-time-filter__sep { font-size: 13px; color: var(--mall-text-muted); }

/* ---- 详情入口 (订单卡头部) ---- */
.order-detail-link {
    font-size: 12px; color: var(--fgColor-accent, #4493f8); text-decoration: none;
    padding: 3px 10px; border: 1px solid var(--glass-border); border-radius: 20px; white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.order-detail-link:hover { background: rgba(68, 147, 248, 0.12); color: #6cb0ff; }

/* ---- 删除订单按钮 (仅已完成订单) ---- */
.order-delete {
    background: transparent; color: var(--fgColor-danger, #f85149);
    border: 1px solid rgba(248, 81, 73, 0.4); border-radius: 8px; font-weight: 600;
    transition: background 0.2s, border-color 0.2s;
}
.order-delete:hover { background: rgba(248, 81, 73, 0.12); border-color: var(--fgColor-danger, #f85149); }
.order-delete:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- 重新生成链接按钮 (下载失效时) ---- */
.order-regen { font-weight: 600; }
.order-regen:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- 订单详情页 (od-*) ---- */
.od-card {
    background: var(--mall-card-bg); border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius); overflow: hidden; margin-top: 16px;
}
.od-card__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 18px; background: var(--mall-bg); border-bottom: 1px solid var(--mall-border); font-size: 14px;
}
.od-card__foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 15px 18px; border-top: 1px solid var(--mall-border); font-size: 13px;
}
.od-section { padding: 16px 18px; border-bottom: 1px solid var(--mall-border); }
.od-section:last-of-type { border-bottom: none; }
.od-section__title {
    font-size: 13px; font-weight: 700; color: var(--mall-text-muted);
    margin-bottom: 12px; letter-spacing: 0.5px;
}

/* 商品快照 */
.od-item { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.od-item__img {
    width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
    background: var(--mall-bg); border: 1px solid var(--mall-border);
}
.od-item__img--ph { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.od-item__info { flex: 1; min-width: 0; }
.od-item__name { font-size: 14px; font-weight: 600; color: var(--mall-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-item__meta { font-size: 12px; color: var(--mall-text-muted); margin-top: 3px; }
.od-item__sub { font-size: 14px; font-weight: 700; color: var(--mall-text); white-space: nowrap; }
.od-empty { font-size: 13px; color: var(--mall-text-muted); }

/* 金额明细 */
.od-amount-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 14px; color: var(--mall-text); }
.od-amount-row__neg { color: var(--fgColor-success, #3fb950); font-weight: 600; }
.od-amount-row--total { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--mall-border); font-size: 15px; font-weight: 700; }
.od-amount-row__total { color: var(--mall-accent); font-size: 18px; }

/* 支付状态 */
.od-pay-method { font-size: 13px; color: var(--mall-text-muted); margin-bottom: 10px; }
.od-pay-note { font-size: 13px; color: var(--mall-text-muted); line-height: 1.6; margin-bottom: 12px; padding: 10px 12px; background: var(--mall-bg); border-radius: 8px; }
.od-paid-ok { font-size: 14px; font-weight: 600; color: var(--fgColor-success, #3fb950); }
.od-cancelled { font-size: 14px; font-weight: 600; color: var(--fgColor-danger, #f85149); }

/* 下载链接区 */
.od-dl-countdown { font-size: 12px; color: var(--mall-text-muted); margin-top: 8px; }
.od-dl-expired { font-size: 14px; font-weight: 600; color: var(--fgColor-danger, #f85149); margin-bottom: 10px; }
.od-dl-tip { font-size: 12px; color: var(--mall-text-muted); margin-top: 8px; }
.od-dl-na { font-size: 13px; color: var(--mall-text-muted); }

/* ---- 订单课件下载页 (download.php?order_id=N, dl-order__*) ---- */
.dl-order__expired {
    font-size: 15px; font-weight: 700; color: var(--fgColor-danger, #f85149);
    padding: 12px 14px; background: rgba(248, 81, 73, 0.1); border: 1px solid rgba(248, 81, 73, 0.3);
    border-radius: 10px; margin-bottom: 14px;
}
.dl-order__tip { font-size: 12px; color: var(--mall-text-muted); margin-top: 10px; }
.dl-order__na { font-size: 14px; color: var(--mall-text-muted); }
.dl-order__countdown { font-size: 12px; color: var(--mall-text-muted); margin-top: 8px; }

/* 夜间模式兼容 (T-PROFILE-ORDER-0916) */
body[data-night] .order-time-filter__input { color-scheme: dark; }
body[data-night] .od-item__img--ph { background: rgba(255,255,255,0.04); }

@media (max-width: 767px) {
    .order-time-filter { flex-wrap: wrap; }
    .order-time-filter__input { flex: 1; min-width: 120px; }
    .od-card__head, .od-card__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
    .od-item__name { white-space: normal; }
}


/* ===== source: articles.css (md5 87ea6d62d7ff) ===== */
/* ============================================================
   T-ARTICLE-MODULE-0918: 商城首页「幼教文章」栏目 (类什么值得买)
   T-MALL-ARTCARD-0919: 曾改横向布局 — 左配图 + 右标题简介, 单列列表
   T-ART-01-0922: 改小红书式瀑布流多列 — 上图下文字竖卡, 不锁封面分辨率;
                 列表卡片去掉内嵌推荐商品 (商品推荐收敛到详情页)
   ============================================================ */

/* ---- 栏目区 ---- */
.article-section { margin-top: 36px; }
.article-section__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.article-section__title {
    font-size: 22px; font-weight: 700; margin: 0; color: var(--mall-text, #1f2933);
    display: flex; align-items: center; gap: 8px;
}
.article-section__title::before { content: "📚"; font-size: 22px; }
.article-section__more {
    font-size: 13px; color: var(--mall-text-muted, #6b7280); text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.article-section__more:hover { color: var(--mall-accent, #E07D00); }

/* ---- T-ART-01-0922: 小红书式瀑布流多列 (上图下文字竖卡, 不锁封面分辨率) ---- */
/* T-MALL-ARTLIST-1015: 每断点列数必须为偶数 (品牌视觉规范) —
   原 768px 档 3 列为奇数违规, 改 2 / 4 / 4。column-count 让各卡高度随封面自然错落。 */
.article-masonry {
    column-count: 2;
    column-gap: 14px;
}
@media (min-width: 768px) { .article-masonry { column-count: 4; } }
@media (min-width: 1024px) { .article-masonry { column-count: 4; } }
.article-masonry__item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    width: 100%;
    margin-bottom: 16px;
    display: block;
}

/* ---- 文章卡片 (竖卡: 上图 + 下文字) ---- */
/* T-MALL-ARTCARD-0919: 卡片本体为 div (外层 <a> 会因嵌套锚点被浏览器强制截断) */
.article-card {
    background: var(--mall-card-bg, #fff);
    border: 1px solid var(--mall-card-border, #8A8A8E);
    border-radius: 14px;
    overflow: hidden;
    color: inherit;
    display: block;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform .18s ease, box-shadow .18s ease;
}
.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.article-card--v { display: block; }
/* T-ART-01-0922: 封面在上 — width:100% height:auto 不锁分辨率, 保持瀑布流多列 (各卡高度随图自然变化) */
.article-card__cover-link {
    display: block;
    width: 100%;
    text-decoration: none;
}
.article-card__cover {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    background: linear-gradient(135deg, #ffe8d6, #ffd6a5);
}
/* 无图占位: 用 aspect-ratio 给个默认高度, 避免空卡塌缩 */
.article-card__cover--placeholder {
    aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px;
    background: linear-gradient(135deg, #fff4e6, #ffe0b3);
}
.article-card__body { padding: 12px 14px 14px; }
.article-card__title {
    font-size: 15px; font-weight: 600; line-height: 1.45; margin: 0 0 6px;
    color: var(--mall-text, #1f2933);
    /* T-ARTICLE-MASONRY-0930: 去掉固定 2 行 clamp — 标题按实际长度自然换行,
       与封面多比例叠加出真正的不规则瀑布流高度差 (用户 2026-09-30: 卡片高度不能全一致) */
}
.article-card__title-link {
    color: inherit; text-decoration: none;
}
.article-card__title-link:hover { color: var(--mall-accent, #E07D00); }
.article-card__summary {
    font-size: 13px; line-height: 1.55; color: var(--mall-text-muted, #6b7280); margin: 0 0 10px;
    /* T-ARTICLE-MASONRY-0930: 去掉固定 3 行 clamp — 简介按实际长度自适应行数
       (长简介多行、短简介少行), 配合封面多比例让列内各卡高度明显错落 */
}
.article-card__meta {
    display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mall-text-muted, #9ca3af);
    padding-top: 6px;
}
.article-card__meta .author { font-weight: 500; }
.article-card__meta .dot { opacity: .5; }

/* ============================================================
   T-BBE74F4C-1008 (Q7): 文章列表横板样式 (article_list.php)
   每行一条: 左 16:9 缩略图 (桌面 200px / 移动端 120px) + 右 标题/摘要/日期/标签。
   单列固定行高, 替代瀑布流多列; 颜色全部走 --mall-* 变量, 白天/夜间两模式自适应。
   ============================================================ */
.article-rows { display: flex; flex-direction: column; gap: 14px; }
.article-row {
    display: flex; align-items: stretch; gap: 16px;
    min-height: 132px;                   /* 行高随内容自适应, 短标题仍保持 132 观感 */
    background: var(--mall-card-bg, #fff);
    border: 1px solid var(--mall-card-border, #8A8A8E);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform .18s ease, box-shadow .18s ease;
}
.article-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.article-row__cover-link {
    flex: 0 0 200px;                      /* 桌面缩略图约 200px 宽 */
    /* T-ART-LISTCOVER: 不写 height:100%（对 auto 行高解析失败会塌回图片固有比例高），
       靠 .article-row 的 align-items:stretch 撑满行高，图内 height:100% 再解析 */
    display: block; text-decoration: none;
}
.article-row__cover {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    background: linear-gradient(135deg, #ffe8d6, #ffd6a5);
}
.article-row__cover--ph {
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    background: linear-gradient(135deg, #fff4e6, #ffe0b3);
}
.article-row__body {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 12px 16px 12px 0;
}
.article-row__title {
    font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 6px;
    color: var(--mall-text, #1f2933);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-row__summary {
    font-size: 13px; line-height: 1.5; color: var(--mall-text-muted, #6b7280); margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-row__meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--mall-text-muted, #9ca3af);
}
.article-row__meta .author { font-weight: 500; }
.article-row__meta .dot { opacity: .5; }
.article-row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.article-row__tag {
    font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 10px;
    color: var(--mall-text-muted, #6b7280);
    background: var(--mall-bg-secondary, #f9fafb);
    border: 1px solid var(--mall-card-border, #8A8A8E);
}
/* 移动端 (<768px): 缩略图缩至 120px, 行高略降, 摘要最多 2 行 */
@media (max-width: 767px) {
    .article-row { min-height: 108px; gap: 12px; }
    .article-row__cover-link { flex: 0 0 120px; }
    .article-row__body { padding: 10px 12px 10px 0; }
    .article-row__title { font-size: 15px; }
    .article-row__summary { -webkit-line-clamp: 2; margin-bottom: 6px; }
    .article-row__tags { margin-top: 6px; }
}
/* 夜间模式: 变量已自适应, 仅补封面占位渐变与行阴影对比 (与 new-arrivals 夜间修复同思路) */
body[data-night] .article-row { box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
body[data-night] .article-row:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.5); }
body[data-night] .article-row__cover,
body[data-night] .article-row__cover--ph { background: linear-gradient(135deg, #3a2a1a, #2C2C2E); }

/* ---- 内嵌「推荐商品」小卡片 (什么值得买式) — 详情页 .article-detail__recs 仍复用 .rec-card 基础样式 ---- */
/* T-MALL-RECCARD-0919: 推荐商品卡 — 封面 72px / 标题 15px 两行截断 */
.recs-list { display: flex; flex-direction: column; gap: 12px; }
.rec-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--mall-bg-secondary, #f9fafb);
    border: 1px solid var(--mall-card-border, #8A8A8E);
    border-radius: 12px; padding: 10px; text-decoration: none; color: inherit;
    transition: background .15s ease;
}
.rec-card:hover { background: var(--mall-bg-hover, #f3f4f6); }
.rec-card__img {
    width: 72px; height: 72px; border-radius: 8px; object-fit: cover; flex: 0 0 auto;
    background: var(--mall-bg-hover, #f3f4f6); /* T-MALL-WARM-01: 硬编码灰收敛走变量 */
}
.rec-card__img--ph {
    display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.rec-card__info { flex: 1 1 auto; min-width: 0; }
.rec-card__name {
    font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--mall-text, #1f2933);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rec-card__price { font-size: 16px; font-weight: 700; color: var(--mall-accent, #E07D00); margin-top: 2px; }
.rec-card__price .cur { font-size: 11px; }
.rec-card__cta {
    flex: 0 0 auto; font-size: 13px; font-weight: 600; color: #fff;
    background: var(--mall-accent, #E07D00); border-radius: 14px; padding: 4px 12px;
    white-space: nowrap;
}

/* ---- 空状态 ---- */
.article-section__empty {
    text-align: center; color: var(--mall-text-muted, #9ca3af); font-size: 14px;
    padding: 40px 0;
}

/* ============================================================
   文章详情页 (articles.php)
   ============================================================ */
/* T-MALL-ARTBG-0919: 正文背景卡片 — 日间白卡/夜间深卡, 主题变量自动适配 (mono 黑白态同样走变量)
   T-ARTDOCK-A-1013 (用户裁决方案A): 去掉写死 max-width:760px + margin:0 auto 居中 —
   正文行宽随 .detail-with-dock 网格左列自适应 (container-lg 内, ≥1024 屏约 956px);
   <1024px 网格为块级堆叠, 卡片占满 container 宽度, 堆叠行为不变。 */
.article-detail { padding: 12px 12px 40px; }
.article-detail__inner {
    background: var(--mall-card-bg, #fff);
    border: 1px solid var(--mall-border, #8A8A8E);
    border-radius: 16px;
    padding: 28px 24px 32px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden; /* 顶部通栏封面按卡片圆角裁切 */
}
body[data-night] .article-detail__inner {
    background: var(--mall-card-bg, #1c1c1e);
    border-color: var(--mall-bg-secondary, #2c2c2e);
    box-shadow: none;
}
.article-detail__cover {
    /* 卡片内顶部通栏: 负 margin 抵消卡片 padding, 由 overflow:hidden 按卡片圆角裁切
       width 须加回左右 padding 2×24px, 否则 100% 只到内容盒, 右侧露白边 */
    width: calc(100% + 48px); object-fit: cover; margin: -28px -24px 20px;
    background: linear-gradient(135deg, #fff4e6, #ffe0b3);
}
.article-detail__title { font-size: 26px; font-weight: 700; line-height: 1.35; margin: 0 0 12px; color: var(--mall-text, #1f2933); }
.article-detail__meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 13px; color: var(--mall-text-muted, #6b7280);
    padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--mall-card-border, #8A8A8E);
}
.article-detail__meta .author { font-weight: 600; color: var(--mall-text, #374151); }
.article-detail__content { font-size: 15px; line-height: 1.8; color: var(--mall-text, #374151); }
.article-detail__content h2 { font-size: 20px; margin: 24px 0 12px; font-weight: 700; }
.article-detail__content h3 { font-size: 17px; margin: 18px 0 10px; font-weight: 600; }
.article-detail__content p { margin: 12px 0; }
.article-detail__content ul, .article-detail__content ol { margin: 12px 0 12px 24px; }
.article-detail__content li { margin: 6px 0; }
.article-detail__content strong { font-weight: 700; }

/* T-ART-01-0922: SEO 引流块 — 正文后自然内文, 视觉与正文区分 (浅底 + 顶部留白) */
.article-detail__seo {
    margin-top: 28px; padding: 18px 18px 6px;
    background: var(--mall-bg-secondary, #f9fafb);
    border: 1px solid var(--mall-card-border, #8A8A8E);
    border-radius: 12px;
    font-size: 14px; line-height: 1.8; color: var(--mall-text-muted, #6b7280);
}
.article-detail__seo h2 { font-size: 18px; margin: 0 0 10px; font-weight: 700; color: var(--mall-text, #1f2933); }
.article-detail__seo h3 { font-size: 15px; margin: 14px 0 6px; font-weight: 600; color: var(--mall-text, #374151); }
.article-detail__seo p { margin: 8px 0; }
.article-detail__seo strong { color: var(--mall-text, #374151); font-weight: 700; }

/* 详情页内嵌商品卡片 */
.article-detail__recs { margin-top: 28px; }
.article-detail__recs-title { font-size: 18px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 6px; }
.article-detail__recs-title::before { content: "🛒"; }
/* T-RECVERT-0922: 详情页推荐卡改竖版网格 — 封面大图 160px 高, 显示全貌 (基础 .rec-card 横排样式保留, 仅覆盖详情页作用域) */
.article-detail__recs .recs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.article-detail__recs .rec-card { flex-direction: column; align-items: stretch; padding: 10px; }
.article-detail__recs .rec-card__img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; }
.article-detail__recs .rec-card__info { width: 100%; margin-top: 8px; }
.article-detail__recs .rec-card__name { font-size: 14px; -webkit-line-clamp: 2; }
.article-detail__recs .rec-card__price { font-size: 15px; margin-top: 4px; }
.article-detail__recs .rec-card__cta { align-self: flex-start; margin-top: 6px; font-size: 12px; padding: 3px 10px; }
@media (max-width: 400px) {
    .article-detail__recs .recs-list { grid-template-columns: 1fr; }
}

/* T-MALL-ADMINLEAK-0922: .article-detail__plans / .plan-link 样式已随「关联教案」区块删除 (防死代码) */

/* ============================================================
   T-20A48000-1008 (Q8): 详情页 返回文章列表 / 返回顶部 / 桌面端 sticky 侧栏
   - 顶部返回文章列表入口 (.article-detail__topbar)
   - <1024px 操作组由 share_dock 组件悬浮组接管 (share_dock.css; T-MALL-SHARE-01)
   - 桌面端(>=1024px)两栏: 正文 1fr + 推荐 sticky 侧栏 300px; 移动端 __layout/__main/__side 无样式=原底部堆叠
   配色全部走 --mall-* 变量 (日间/夜间/mono 自动适配)。
   ============================================================ */
.article-detail__topbar { display: flex; margin: 0 0 12px; }
.article-detail__back-list {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 14px; text-decoration: none;
    color: var(--mall-text-muted, #6b7280);
    padding: 6px 12px; border-radius: 8px;
    background: var(--mall-card-bg, #fff);
    border: 1px solid var(--mall-border, #8A8A8E);
}
.article-detail__back-list:hover { color: var(--mall-primary, #E07D00); border-color: var(--mall-primary, #E07D00); }

/* T-MALL-SHARE-01: 旧 .article-float 悬浮组 / .article-actions 侧栏操作组样式已删除 —
   操作组收敛为 share_dock 公共组件 (样式在 share_dock.css)。.art-share 微信弹窗样式保留
   (share_dock 弹窗复用, primer_header 全站加载 articles.css)。 */

/* 分享到微信弹窗 */
.art-share { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.art-share[hidden] { display: none; }
.art-share__mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.art-share__panel {
    position: relative; width: 320px; max-width: 100%;
    padding: 24px 20px 20px; border-radius: 16px;
    background: var(--mall-card-bg, #fff);
    border: 1px solid var(--mall-border, #8A8A8E);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    text-align: center;
}
.art-share__close {
    position: absolute; top: 8px; right: 10px;
    width: 32px; height: 32px; border: none; background: transparent;
    font-size: 24px; line-height: 1; cursor: pointer;
    color: var(--mall-text-muted, #6b7280);
}
.art-share__close:hover { color: var(--mall-text, #1f2933); }
.art-share__title { margin: 0 0 14px; font-size: 17px; color: var(--mall-text, #1f2933); }
.art-share__qr { width: 200px; height: 200px; image-rendering: pixelated; border: 1px solid var(--mall-border, #8A8A8E); border-radius: 8px; background: #fff; }
.art-share__hint { margin: 10px 0 0; font-size: 13px; color: var(--mall-text-muted, #6b7280); }
.art-share__wx-tip { margin: 6px 0 14px; font-size: 14px; color: var(--mall-text, #1f2933); }
.art-share__link-row { display: flex; gap: 8px; margin-top: 14px; }
.art-share__link {
    flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--mall-border, #8A8A8E);
    background: var(--mall-bg, #f9fafb); color: var(--mall-text-muted, #6b7280);
    font-size: 12px;
}
.art-share__copy {
    flex: none; padding: 8px 14px; border-radius: 8px; cursor: pointer;
    font-size: 13px; font-family: inherit;
    /* T-MALL-VISUAL-WCAG-1011: 白字 on 绿仅 2.22:1, 改 --mall-primary-hover (白字 5.08:1) */
    color: #fff; background: var(--mall-primary-hover, #C86E00);
    border: 1px solid var(--mall-primary-hover, #C86E00);
}
.art-share__copy:hover { filter: brightness(1.08); }
body[data-night] .art-share__panel { background: var(--mall-card-bg, #1c1c1e); border-color: var(--mall-bg-secondary, #2c2c2e); box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
body[data-night] .art-share__title { color: #e5e5ea; }
body[data-night] .art-share__close { color: #8e8e93; }
body[data-night] .art-share__close:hover { color: #e5e5ea; }
body[data-night] .art-share__hint { color: #8e8e93; }
body[data-night] .art-share__wx-tip { color: #e5e5ea; }
body[data-night] .art-share__link { background: var(--mall-bg-secondary, #2c2c2e); border-color: var(--mall-bg-hover, #3a3a3c); color: #8e8e93; }

/* 桌面端两栏: 正文 1fr + 侧栏 300px, 推荐区 sticky */
@media (min-width: 1024px) {
    /* T-ARTDOCK-A-1013: 原 max-width:1100px 一并移除 — 正文宽度完全随
       .detail-with-dock 网格左列自适应 (container-lg 1200/1440 内, dock 前
       留 24px grid gap), 1920 屏不再出现正文与 dock 间额外空白 */
    /* T-ART-SIDE-BTNS-1010: __inner 的 overflow:hidden (通栏封面圆角裁切) 会把 sticky
       侧栏的滚动容器锁死在卡片内 → sticky 失效, 侧栏按钮随页面滚走。桌面端改
       overflow:visible 让 sticky 相对视口生效; 封面裁切改由封面自身 border-radius 完成
       (封面恒为卡片首元素, 只需上圆角)。移动端保持 overflow:hidden 原样。 */
    .article-detail__inner { overflow: visible; }
    .article-detail__cover { border-radius: 16px 16px 0 0; }
    .article-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
    .article-detail__side { position: sticky; top: 80px; }
    /* 封面通栏在侧栏出现后不再向右溢出到 gap */
    .article-detail__cover { width: calc(100% + 24px); margin: -28px 0 20px -24px; }
    /* 侧栏内推荐卡: 单列竖排, 收窄间距 */
    .article-detail__recs { margin-top: 0; }
    .article-detail__recs .recs-list { grid-template-columns: 1fr; gap: 12px; }
    .article-detail__recs .rec-card__img { height: 150px; }
    /* T-ART-SIDE-RAIL-1010: 无推荐商品时侧栏列不再收起 — 操作组常驻右列 (300px),
       正文不再 760px 窄栏居中, 封面统一走上方 calc(100% + 24px) 规则
       T-ARTDOCK-1012: 操作组已移出卡片走 .detail-with-dock 220px 右列 (share_dock.css),
       aside 只剩推荐商品卡 — 无推荐时 --noside 收起侧栏列, 正文占满卡片单列 */
    .article-detail__layout--noside { grid-template-columns: minmax(0, 1fr); }
}

/* T-MALL-SHARE-01: <1024px 桌面容器隐藏规则已随组件收敛到 share_dock.css (旧 .article-actions 死代码删除) */

/* ============================================================
   T-MALL-ARTLIST-0919: 文章独立栏目页 (article_list.php)
   顶部栏 (标题+副标题+排序tab) + masonry 复用 .article-masonry
   + 底部分页。无交互功能 (无评论/回复/点赞/收藏)。
   ============================================================ */
.article-list { padding-bottom: 40px; }
.article-list__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.article-list__title {
    font-size: 24px; font-weight: 700; margin: 0; color: var(--mall-text, #1f2933);
    display: flex; align-items: center; gap: 8px;
}
.article-list__title::before { content: "📚"; font-size: 24px; }
.article-list__subtitle {
    font-size: 13px; color: var(--mall-text-muted, #6b7280); margin: 6px 0 0;
}
.article-list__tabs { display: flex; gap: 8px; }
.article-list__tab {
    font-size: 13px; font-weight: 500; color: var(--mall-text-muted, #6b7280);
    text-decoration: none; padding: 6px 14px; border-radius: 16px;
    border: 1px solid var(--mall-card-border, #8A8A8E);
    background: var(--mall-card-bg, #fff);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.article-list__tab:hover { color: var(--mall-accent, #E07D00); border-color: var(--mall-accent, #E07D00); }
.article-list__tab.is-active {
    color: #fff; background: var(--mall-accent, #E07D00); border-color: var(--mall-accent, #E07D00);
}
/* T-ART-AUD-1014: 受众 tab 与排序 tab 之间的分隔线 */
.article-list__tab-sep {
    align-self: stretch; width: 1px; margin: 4px 4px;
    background: var(--mall-card-border, #8A8A8E); opacity: .5;
}
.article-list__pager {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; flex-wrap: wrap; margin-top: 28px;
}
.pager-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    font-size: 13px; color: var(--mall-text, #374151); text-decoration: none;
    border: 1px solid var(--mall-card-border, #8A8A8E); border-radius: 8px;
    background: var(--mall-card-bg, #fff);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pager-link:hover { color: var(--mall-accent, #E07D00); border-color: var(--mall-accent, #E07D00); }
.pager-link--active {
    color: #fff; background: var(--mall-accent, #E07D00); border-color: var(--mall-accent, #E07D00);
}
.pager-link--disabled {
    color: var(--mall-text-muted, #c0c4cc); border-color: transparent; background: transparent;
    pointer-events: none;
}

/* ============================================================
   T-MALL-ARTLIST-1015: 筛选抽屉 (原 T-ART-02-0922 桌面左栏/移动顶部条合并)
   顶部「筛选」按钮 → 左滑抽屉 (桌面+移动端同款交互, 复用 category-drawer
   视觉体系: --glass-* 背景 / --mall-* 变量族, 夜间 body[data-night] 自动跟随)。
   抽屉/遮罩 fixed 层由页内 JS 挂到 body 级 (摆脱 html.mall-anim .site-main
   transform 包含块劫持, 照 mall.js placeDrawer / share_dock.php 先例)。
   ============================================================ */
.article-list__body { display: block; }
.article-list__main { min-width: 0; }

/* ---- 顶部「筛选」按钮 (与 .article-list__tab 同尺寸体系, 走 --mall-* 变量) ---- */
.article-filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; color: var(--mall-text-muted, #6b7280);
    padding: 6px 14px; border-radius: 16px;
    border: 1px solid var(--mall-card-border, #8A8A8E);
    background: var(--mall-card-bg, #fff);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.article-filter-btn:hover { color: var(--mall-accent, #E07D00); border-color: var(--mall-accent, #E07D00); }
.article-filter-btn__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    font-size: 11px; font-weight: 700;
    /* 徽标反色: 日间白字压橙, 夜间 --mall-card-bg 变深色自动压亮橙 (同 feed-pager 夜间配方) */
    color: var(--mall-card-bg, #fff);
    background: var(--mall-primary, #E07D00);
}

/* ---- 遮罩基础态: 默认隐藏 (.show 时显示; 基础态须在媒体查询之前, 同 category.css 教训) ---- */
.article-filter-overlay { display: none; }
.article-filter-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
}
.article-filter-overlay.show { display: block; }

/* ---- 抽屉: 左滑出 (fixed 挂 body 级后相对视口定位) ---- */
.article-filter-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 300px;
    max-width: 86vw;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.3s var(--mall-ease);
    z-index: 1000;
    background: var(--glass-bg, var(--mall-card-bg, #fff));
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 1px solid var(--mall-card-border, #8A8A8E);
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
}
.article-filter-drawer.open { transform: translateX(0); }
.article-filter-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.article-filter-drawer__title {
    font-size: 16px; font-weight: 700; color: var(--mall-text, #374151);
}
.article-filter-drawer__close {
    border: none; background: transparent;
    color: var(--mall-text-muted, #6b7280);
    font-size: 16px; cursor: pointer; padding: 6px 10px;
    border-radius: 8px;
}
.article-filter-drawer__close:hover { color: var(--mall-accent, #E07D00); background: var(--mall-bg-hover, #f3f4f6); }

/* ---- 抽屉内筛选组 (领域/年级/类型; chip 样式沿用原侧边栏类) ---- */
.article-sidebar__group + .article-sidebar__group {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--mall-card-border, #8A8A8E);
}
.article-sidebar__title {
    font-size: 13px; font-weight: 700; color: var(--mall-text, #374151);
    margin-bottom: 8px;
}
.article-sidebar__opts {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.article-sidebar__opt {
    flex: 0 0 auto;
    font-size: 13px; color: var(--mall-text-muted, #6b7280); text-decoration: none;
    padding: 6px 12px; border-radius: 14px; white-space: nowrap;
    border: 1px solid var(--mall-card-border, #8A8A8E);
    background: var(--mall-bg-secondary, #f9fafb);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.article-sidebar__opt:hover { color: var(--mall-accent, #E07D00); border-color: var(--mall-accent, #E07D00); }
.article-sidebar__opt.is-active {
    color: #fff; background: var(--mall-accent, #E07D00); border-color: var(--mall-accent, #E07D00);
}
.article-sidebar__clear {
    display: inline-block; margin-top: 12px;
    font-size: 12px; color: var(--mall-text-muted, #6b7280); text-decoration: none;
}
.article-sidebar__clear:hover { color: var(--mall-accent, #E07D00); }


/* ============================================================
   T-MALL-HOME-NEW-0918: 首页「今天上新」栏目
   位置: 首屏 banner 下方 / 商品列表前 (index.php #new-arrivals)
   卡片复用 .product-card (card.css); 网格 ≤6 个, 超出由「查看更多」承接。
   ============================================================ */
.new-arrivals { margin-top: 28px; margin-bottom: 28px; }
.new-arrivals__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.new-arrivals__title {
    font-size: 22px; font-weight: 700; margin: 0; color: var(--mall-text, #1f2933);
    display: flex; align-items: center; gap: 8px;
}
.new-arrivals__title::before { content: "🆕"; font-size: 22px; }
.new-arrivals__more {
    font-size: 13px; color: var(--mall-text-muted, #6b7280); text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.new-arrivals__more:hover { color: var(--mall-accent, #E07D00); }
.new-arrivals__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
@media (min-width: 600px) { .new-arrivals__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .new-arrivals__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .new-arrivals__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.new-arrivals__item { min-width: 0; }
.new-arrivals__item .masonry-item { height: 100%; }
.new-arrivals__item .product-card { height: 100%; }
.new-arrivals__empty {
    grid-column: 1 / -1; text-align: center; padding: 36px 16px;
    color: var(--mall-text-muted, #98989D); font-size: 14px;
    background: var(--mall-bg-soft, rgba(0,0,0,0.03));
    border: 1px dashed var(--mall-border, #8A8A8E); border-radius: 12px;
}

/* T-MALL-NEWARR-NIGHT-0922: 夜间模式今天上新对比度修复 */
body[data-night] .new-arrivals__item .product-card { background:var(--mall-bg-secondary, #2C2C2E); border:1px solid rgba(255,255,255,0.08); }
body[data-night] .new-arrivals__title { color:#FFF; text-shadow:0 1px 3px rgba(0,0,0,0.5); }

/* ============================================================
   T-STORE-FEED: 节日/节气专题入口 + 内容 feed 分页
   位置: 今天上新下方 / 商品 feed 前 (#festival-strip); 分页按钮在 feed 末 (#feed-pager)
   ============================================================ */
.festival-strip { margin-top: 8px; margin-bottom: 22px; }
.festival-strip__head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.festival-strip__title {
    font-size: 22px; font-weight: 700; margin: 0; color: var(--mall-text, #1f2933);
    display: inline-flex; align-items: center; gap: 8px;
}
.festival-strip__title::before { content: "\1F389"; font-size: 22px; }
.festival-strip__sub { font-size: 13px; color: var(--mall-text-muted, #6b7280); }
.festival-strip__track {
    /* T-MALL7-07 (Q6): flex+min-width:96px+overflow-x:auto → 1200px 轨道只占约 530px,
       右侧大片空白且多余卡片靠横向滚动。改 grid: 列数由 --fest-cols 按断点控制
       (默认8 / 1600-1999:6 / 1200-1599:5 / 768-1199:4 / <768:3), 超出列数的卡片在
       对应断点 display:none — 任何屏宽卡片恰好撑满轨道, 无滚动、无右侧空白。 */
    display: grid; grid-template-columns: repeat(var(--fest-cols, 8), minmax(0, 1fr));
    gap: 10px;
    /* T-MALL7-01 (Q1): hover translateY(-2px)+box-shadow 被 overflow 轨道裁切 (实测 chip 顶部被裁 2px,
       阴影在轨道边缘被切) — 上/下留白给上移与阴影空间, 负 margin 抵消轨道整体下移。 */
    padding: 8px 0 18px; margin-top: -8px;
}
/* T-MALL7-07 (Q6): 响应式列数 + 超出列数的卡片隐藏 (8列不隐藏) */
@media (max-width: 1999px) {
    .festival-strip__track { --fest-cols: 6; }
    .festival-strip__track > .festival-chip:nth-child(n+7) { display: none; }
}
@media (max-width: 1599px) {
    .festival-strip__track { --fest-cols: 5; }
    .festival-strip__track > .festival-chip:nth-child(n+6) { display: none; }
}
@media (max-width: 1199px) {
    .festival-strip__track { --fest-cols: 4; }
    .festival-strip__track > .festival-chip:nth-child(n+5) { display: none; }
}
@media (max-width: 767px) {
    .festival-strip__track { --fest-cols: 3; }
    .festival-strip__track > .festival-chip:nth-child(n+4) { display: none; }
}
.festival-chip {
    min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 12px 14px; border-radius: 14px; text-decoration: none;
    background: var(--mall-bg-soft, rgba(0,0,0,0.03));
    border: 1px solid var(--mall-border, #8A8A8E);
    /* T-MALL7-01 (Q1): 白天卡片轻阴影 (banner 阴影加深一档拉开层次) + 毛玻璃质感 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.festival-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.festival-chip__name { font-size: 16px; font-weight: 700; color: var(--mall-text, #1f2933); /* T-MALL7-07 (Q6): 窄列防挤压 */ min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.festival-chip__tag {
    font-size: 11px; font-weight: 600; color: var(--mall-text-muted, #6b7280);
    background: rgba(0,0,0,0.04); padding: 1px 7px; border-radius: 10px;
    /* T-MALL7-07 (Q6): 窄列防挤压 */ min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.festival-chip__days { font-size: 12px; color: var(--mall-text-muted, #6b7280); /* T-MALL7-07 (Q6): 窄列防挤压 */ min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.festival-chip__soon {
    font-size: 12px; font-weight: 700; color: #fff;
    background: var(--mall-accent, #E07D00); padding: 1px 9px; border-radius: 10px;
}
/* 即将 (≤14 天) — 置顶强调: 品牌色描边 + 微光晕 */
.festival-chip.is-upcoming {
    border-color: var(--mall-accent, #E07D00);
    /* T-MALL7-01 (Q1): 原 rgba(232,89,12,0.07) 仅 7% 不透明度 → 粒子/SVG 背景直接透出。
       改为不透明白底上叠同色 7% tint, 视觉色值不变, 背景不再透出。 */
    background: linear-gradient(rgba(224, 125, 0,0.07), rgba(224, 125, 0,0.07)), #fff;
    box-shadow: 0 0 0 1px var(--mall-accent, #E07D00), 0 4px 14px rgba(224, 125, 0, 0.18);
}
/* 夜间 / 单色主题 */
body[data-night] .festival-strip__title { color: #FFF; }
/* T-MALL-FEST-NIGHT-1011: 夜间普通 chip(距节日>14天) 边框 0.08 压 #2C2C2E 深底几乎不可见 → 提升至 0.22 */
body[data-night] .festival-chip { background: var(--mall-bg-secondary, #2C2C2E); border-color: rgba(255,255,255,0.22); }
/* T-MALL7-01 (Q1): 夜间 is-upcoming 显式覆盖 — 基础规则改不透明白底后,
   若不在夜间重定义, 白底+白字不可读。深色 #2C2C2E 底上叠橙色 tint, 不透出背景。 */
body[data-night] .festival-chip.is-upcoming { background: linear-gradient(rgba(255, 159, 10,0.14), rgba(255, 159, 10,0.14)), #2C2C2E; border-color: var(--mall-accent, #FF9F0A); }
body[data-night] .festival-chip__name { color: #FFF; }
body[data-night] .festival-chip__tag { background: rgba(255,255,255,0.08); color: #C7C7CC; }
body[data-night] .festival-chip__days { color: #C7C7CC; }
body[data-theme="mono"] .festival-chip__soon { background: #57606a; }
body[data-theme="mono"] .festival-chip.is-upcoming { border-color: #57606a; background: linear-gradient(rgba(87,96,106,0.1), rgba(87,96,106,0.1)), #fff; box-shadow: 0 0 0 1px #57606a; }
/* T-MALL7-01 (Q1): 黑白+夜间叠加 — mono 白底在夜间会白字压白底, 深色底上叠灰 tint */
body[data-night][data-theme="mono"] .festival-chip.is-upcoming { background: linear-gradient(rgba(110,118,129,0.25), rgba(110,118,129,0.25)), #2C2C2E; }
/* T-MALL-FEST-NAV-01 (2026-10-12): .festival-chip--cta 已随两张 CTA 卡移出节日栏目而删除
   (海报定制/环创引流位改用 category-drawer__link, 无复用) */

/* T-STORE-FEED: 内容 feed 分页按钮 (对标幼师贝壳"下一页") */
.feed-pager {
    display: flex; justify-content: center; padding: 22px 0 8px;
}
.feed-pager[hidden] { display: none; }
.feed-pager__btn {
    min-width: 200px; padding: 12px 26px; border: none; border-radius: 24px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    color: #fff; background: var(--mall-accent, #E07D00);
    box-shadow: 0 4px 14px rgba(0,0,0,0.14);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.feed-pager__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.feed-pager__btn:active { transform: translateY(0); }
.feed-pager__btn:disabled, .feed-pager__btn[hidden] { opacity: .55; cursor: default; }
body[data-night] .feed-pager__btn { background: #FF9F0A; color: #1C1200; }


/* ===== source: share_dock.css (md5 6cc2acd444f7) ===== */
/* ============================================================
   T-MALL-SHARE-01: 全站「回到顶部/分享」独立容器组件 (share_dock)
   裁决 (2026-10-12): 操作组单独放 .share-dock 独立容器, 不与推荐等混排。
   - 桌面端 (>=1024px): 文章页 aside 列内直排常显; 商品详情页走
     .detail-with-dock 网格第三列 (.share-dock--sticky 变体) sticky 常显。
   - 移动端 (<1024px): .share-dock 隐藏, .share-dock-float 悬浮组接管
     (滚动>600px 由 JS 加 --show; fixed 挂载由 JS 移到 body 级)。
   配色全部走 --mall-* 变量 (日间/夜间/mono 自动适配, body[data-night])。
   微信弹窗复用 articles.css 的 .art-share 样式 (articles.css 全站加载)。
   ============================================================ */

/* ---- 桌面端独立容器 (文章页 aside 内 / 商品页网格列内) ---- */
.share-dock {
    display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px;
    padding: 14px; border-radius: 14px;
    background: var(--mall-card-bg, #fff);
    border: 1px solid var(--mall-border, #8A8A8E);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.share-dock__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px; border-radius: 12px; cursor: pointer;
    font-size: 14px; font-family: inherit; text-decoration: none;
    color: var(--mall-text, #1f2933);
    background: var(--mall-bg, #f9fafb);
    border: 1px solid var(--mall-border, #8A8A8E);
    transition: color .2s ease, border-color .2s ease, transform .15s ease;
}
.share-dock__btn:hover {
    color: var(--mall-primary, #E07D00);
    border-color: var(--mall-primary, #E07D00);
    transform: translateY(-1px);
}
.share-dock__icon { font-size: 16px; line-height: 1; }
/* T-HCSHARE-ICON2-1013: 微信按钮改官方品牌绿 SVG (fill=#07C160 固定, 夜间不变);
   其余内联 SVG 图标随 currentColor 自适应夜间模式。T-HCSHARE-ICON-1013 的
   logo 图片类已无引用, 随本次删除。 */
.share-dock__icon svg { width: 16px; height: 16px; display: block; }
.share-dock-float__btn svg { width: 20px; height: 20px; display: block; }
body[data-night] .share-dock { background: var(--mall-card-bg, #1c1c1e); border-color: var(--mall-bg-secondary, #2c2c2e); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
body[data-night] .share-dock__btn { background: var(--mall-bg-secondary, #2c2c2e); border-color: var(--mall-bg-hover, #3a3a3c); color: #e5e5ea; }
body[data-night] .share-dock__btn:hover { color: var(--mall-primary, #E07D00); border-color: var(--mall-primary, #E07D00); }

/* ---- 商品详情页: 独立 sticky 列 (不与信息卡/推荐同容器) ---- */
.detail-with-dock { display: block; }
@media (min-width: 1024px) {
    .detail-with-dock { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; }
    /* T-DOCK-ICON-1014: sticky 由 top 改 bottom — 容器随滚动钉在视口底部
       (与移动端悬浮组行为一致)。sticky 挂在内层 .share-dock 上, 其包含块 = 全高 wrap
       网格项: 网格 align-items:start 会把列高压成容器自身高 → 无下移空间 sticky 失效;
       wrap 用 align-self:stretch 撑满整行, 内层才能贴到视口底部。 */
    .detail-with-dock .share-dock-wrap--sticky { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
    .detail-with-dock .share-dock--sticky { position: sticky; bottom: 16px; margin: 0; }
}
/* <1024px 桌面容器隐藏, 悬浮组接管 */
@media (max-width: 1023px) {
    .share-dock-wrap { display: none; }
    .share-dock { display: none; }
}

/* ---- 移动端 (<1024px) 悬浮组: 滚动>600px 显示; 桌面端隐藏 ---- */
.share-dock-float {
    position: fixed; right: 16px; bottom: 96px; z-index: 999;
    display: none; flex-direction: column; gap: 10px;
}
.share-dock-float--show { display: flex; }
.share-dock-float__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--mall-border, #8A8A8E);
    background: var(--mall-card-bg, #fff);
    color: var(--mall-text, #1f2933);
    font-size: 20px; line-height: 1; text-decoration: none; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.share-dock-float__btn:hover { color: var(--mall-primary, #E07D00); border-color: var(--mall-primary, #E07D00); }
body[data-night] .share-dock-float__btn { background: var(--mall-card-bg, #1c1c1e); border-color: var(--mall-bg-secondary, #2c2c2e); color: #e5e5ea; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
@media (min-width: 1024px) { .share-dock-float { display: none !important; } }


/* ===== source: glass.css (md5 928e2f822666) ===== */
/* ============================================================
   幼师藏宝箱 · 商城 — glass.css (T-MALL-VISUAL / T-MALL-GLASS-0913)
   毛玻璃降级体系 / 发货背景 / Apple 风滚动动画 / 品牌色 token
   依赖: layout.css (先加载, 提供 --mall-* 变量)
   降级档位由 primer_header.php 内联脚本在首帧前写入 <html>:
     html.mall-glass-full  高端: 完整毛玻璃 (blur 20px + saturate 180%)
     html.mall-glass-lite  中端: 轻量毛玻璃 (blur 12px, 无 saturate)
     html.mall-glass-low   低端: 无模糊, 半透明纯色
     html.mall-glass-none  极简: 纯实色 + 关闭动画 (reduced-motion)
   无 JS / 检测失败: 默认实色 (安全兜底, 无白屏)

   T-MALL-GLASS-0913: 毛玻璃覆盖大幅扩张
     新增玻璃表面: 分类抽屉 .category-drawer / 详情页右卡 .detail-info-card /
                   登录弹窗 .login-modal / 购物车结算条 .cart-summary
     日夜切换: 全部表面背景/边框改走 --glass-* 变量 (theme.css 定义日间默认,
               body[data-night] 覆盖为更深更冷色), 切换 0.3s 过渡
     降级: 档位 class 体系 (JS 能力检测) + @supports not (backdrop-filter)
           纯 CSS 兜底 (无 JS 老浏览器 → 半透明不模糊, 永不白屏/不可读)
   ============================================================ */

/* ---- 品牌色 token (00_规范/品牌IP_T-MALL-BRAND/03_品牌规范.md) ---- */
:root {
    --brand-gold: #F4B942;      /* 宝藏金: 强调/CTA */
    --brand-gold-deep: #E8A93A; /* 金渐变尾 */
    --brand-navy: #1F3A5F;      /* 守护藏青: 深色文字/反白场景 */
    --brand-coral: #F08A5D;     /* 温暖珊瑚: 点缀 */
    --brand-green: #7FB069;     /* 成长嫩绿: 成功状态 */
    --brand-cream: #FDF8F0;     /* 米白: 品牌浅底 */
    --brand-ink: #2B2B2B;       /* 深灰: 正文 */
    --brand-mist: #E9E4DA;      /* 浅灰: 分割线 */
    --brand-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============================================================
   〇、毛玻璃 token (T-MALL-GLASS-0913)
   日间默认值在此; 夜间覆盖在 theme.css body[data-night] (后加载)。
   所有玻璃表面统一引用这组变量 → 日夜切换只换变量, 一处生效。
   ============================================================ */
:root {
    /* 玻璃背景 (半透明, 供 backdrop-filter 透出背景) */
    /* T-MALL-SIDEBAR-CONTRAST-1011: 白天抽屉实色白 — 原 rgba(255,255,255,0.72)
       与 #F2F2F7 页面底合成后仅 #FAFAFB (1.08:1), 容器与页面底无层次; 改实色白拉开层次,
       边界对比由 --glass-border 承担 (WCAG 1.4.11 图形 3:1)。夜间覆盖在 theme.css 不动。 */
    --glass-bg: #ffffff;
    --glass-bg-strong: rgba(255, 255, 255, 0.86);
    --glass-bg-card: rgba(255, 255, 255, 0.6);
    --glass-bg-chip: rgba(255, 255, 255, 0.55);
    --glass-bg-modal: rgba(255, 255, 255, 0.82);
    /* 玻璃细边框 (日间更亮) */
    /* T-MALL-SIDEBAR-CONTRAST-1011: 原 rgba(255,255,255,0.25) 白边框压白抽屉完全不可见。
       改 rgba(60,60,67,0.6): 合成后 vs 白 3.44:1 / vs 页面底 #F2F2F7 3.08:1 (WCAG 1.4.11
       图形 3:1 达标, 与 layout.css --mall-border #8A8A8E 同值体系)。
       ⚠ 任务书推荐 0.28 实测合成仅 1.67:1 不达 3:1, 按验收标准 (≥3:1) 取 0.6。 */
    --glass-border: rgba(60, 60, 67, 0.6);
    --glass-border-strong: rgba(255, 255, 255, 0.55);
    /* 模糊档位 (blur 半径; saturate 只在 full 档加) */
    --glass-blur: blur(20px);
    --glass-blur-lite: blur(12px);
    --glass-saturate: saturate(180%);
    /* 圆角 (12-16px 区间) */
    --glass-radius: 16px;
    --glass-radius-sm: 12px;
}

/* ============================================================
   一、毛玻璃降级 — 站点头部 / 底部导航
   默认(无 class)= 实色; JS 按设备能力升级。
   覆盖 layout.css 的无条件 rgba+blur 规则 (本文件后加载)。
   T-MALL-GLASS-0913: 背景/边框改走 --glass-* 变量 (日夜切换)。
   ============================================================ */
.site-header {
    background: var(--mall-card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.bottom-nav {
    background: var(--mall-card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* T-FOOTER-ANIM-0915: 底部 footer 毛玻璃 (frosted glass) — 全站所有页面 (primer_footer.php 统一输出)。
   默认(无档位 class)= 半透明实色兜底 (无模糊, 永不白屏); JS 按设备能力升级:
   full 档 blur(20px)+saturate / lite 档 blur(12px) / low 档半透明纯色。
   配方: 浅色 rgba(255,255,255,0.65) / 深色 rgba(0,0,0,0.45) (任务规格) + 细边框 (--glass-border)。
   特异性: html.mall-glass-* (0,1,1) 高于下方默认 (0,0,1) → 档位升级生效;
   theme.css body[data-night] (0,1,1) 与本块同特异性, theme.css 后加载 → 夜间配方靠源码顺序取胜。
   注意: body[data-bg="solid"] 时 body 为不透明纯色, 毛玻璃背后无内容可透 → 视觉=半透明纯色 (正确降级)。 */
.site-footer {
    background: rgba(255, 255, 255, 0.65);
    border-top: 1px solid var(--glass-border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.mall-glass-full .site-footer {
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: var(--glass-saturate) blur(12px);
    backdrop-filter: var(--glass-saturate) blur(12px);
}
html.mall-glass-lite .site-footer {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
html.mall-glass-low .site-footer { background: rgba(255, 255, 255, 0.94); }
/* T-FOOTER-ANIM-0915: 深色纯色底混搭 (data-bg-base="dark", 非夜间) — footer 同步深色毛玻璃,
   避免「深色背景 + 浅色 footer」硬切 (与夜间同配方; bg_layer.css 后加载, 本规则靠特异性取胜:
   html.mall-glass-full body[data-bg-base="dark"] = (0,2,2) 高于下方 (0,1,1)/(0,2,1)) */
body[data-bg-base="dark"]:not([data-night]) .site-footer {
    background: rgba(0, 0, 0, 0.45);
    border-top-color: var(--glass-border);
}
html.mall-glass-full body[data-bg-base="dark"]:not([data-night]) .site-footer {
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: var(--glass-saturate) blur(12px);
    backdrop-filter: var(--glass-saturate) blur(12px);
}
html.mall-glass-lite body[data-bg-base="dark"]:not([data-night]) .site-footer {
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
html.mall-glass-low body[data-bg-base="dark"]:not([data-night]) .site-footer { background: rgba(0, 0, 0, 0.8); }
body[data-bg-base="dark"]:not([data-night]) .site-footer__qr-placeholder { background: rgba(255, 255, 255, 0.06); }
body[data-bg-base="dark"]:not([data-night]) .site-footer__bottom { background: rgba(255, 255, 255, 0.04); }
/* 深色底日间态: footer 文字翻浅色 (日间 --mall-text 是深色, 压深 footer 不可读) */
body[data-bg-base="dark"]:not([data-night]) .site-footer { color: rgba(255, 255, 255, 0.72); }
body[data-bg-base="dark"]:not([data-night]) .site-footer__col-title,
body[data-bg-base="dark"]:not([data-night]) .site-footer__brand { color: #fff; }
body[data-bg-base="dark"]:not([data-night]) .site-footer__desc,
body[data-bg-base="dark"]:not([data-night]) .site-footer__icp-notice,
body[data-bg-base="dark"]:not([data-night]) .site-footer__links a,
body[data-bg-base="dark"]:not([data-night]) .site-footer__contact li,
body[data-bg-base="dark"]:not([data-night]) .site-footer__qr-text,
body[data-bg-base="dark"]:not([data-night]) .site-footer__copyright,
body[data-bg-base="dark"]:not([data-night]) .site-footer__icp { color: rgba(255, 255, 255, 0.62); }
body[data-bg-base="dark"]:not([data-night]) .site-footer__links a:hover { color: #fff; }
/* 夜间: 深色毛玻璃 (任务规格 rgba(0,0,0,0.45) 基调, 略加深保证文字对比) */
body[data-night] .site-footer {
    background: rgba(0, 0, 0, 0.45);
    border-top-color: var(--glass-border);
}
html.mall-glass-full body[data-night] .site-footer {
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: var(--glass-saturate) blur(12px);
    backdrop-filter: var(--glass-saturate) blur(12px);
}
html.mall-glass-lite body[data-night] .site-footer {
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
html.mall-glass-low body[data-night] .site-footer { background: rgba(0, 0, 0, 0.8); }
/* footer 内部子表面: 原 var(--mall-bg) 实色块改半透明, 让毛玻璃透出 (日间白块/夜间深块) */
.site-footer__qr-placeholder { background: rgba(255, 255, 255, 0.35); }
.site-footer__bottom { background: rgba(255, 255, 255, 0.3); }
body[data-night] .site-footer__qr-placeholder { background: rgba(255, 255, 255, 0.06); }
body[data-night] .site-footer__bottom { background: rgba(255, 255, 255, 0.04); }
/* 顶部导航: 滚动后毛玻璃 (sticky 已在 layout.css; 细边框 + 日夜变量) */
.site-header {
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.3s var(--brand-ease), border-color 0.3s var(--brand-ease);
}
/* 高端: 完整毛玻璃 */
html.mall-glass-full .site-header {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-saturate) var(--glass-blur);
    backdrop-filter: var(--glass-saturate) var(--glass-blur);
}
html.mall-glass-full .bottom-nav {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-saturate) var(--glass-blur);
    backdrop-filter: var(--glass-saturate) var(--glass-blur);
}
/* 中端: 轻量毛玻璃 (小半径, 无 saturate) */
html.mall-glass-lite .site-header {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);
}
html.mall-glass-lite .bottom-nav {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);
}
/* 低端: 半透明纯色 (无模糊) */
html.mall-glass-low .site-header { background: rgba(255, 255, 255, 0.94); }
html.mall-glass-low .bottom-nav { background: rgba(255, 255, 255, 0.96); }

@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    html:not([data-theme="day"]).mall-glass-full .site-header { background: rgba(28, 28, 30, 0.72); }
    html:not([data-theme="day"]).mall-glass-full .bottom-nav { background: rgba(28, 28, 30, 0.8); }
    html:not([data-theme="day"]).mall-glass-lite .site-header { background: rgba(28, 28, 30, 0.86); }
    html:not([data-theme="day"]).mall-glass-lite .bottom-nav { background: rgba(28, 28, 30, 0.9); }
    html:not([data-theme="day"]).mall-glass-low .site-header { background: rgba(28, 28, 30, 0.94); }
    html:not([data-theme="day"]).mall-glass-low .bottom-nav { background: rgba(28, 28, 30, 0.96); }

}

/* ============================================================
   二、毛玻璃卡片 .glass-card (发货卡 / 订单卡 / 筛选条)
   默认实色; full/lite 档升级为玻璃。
   T-MALL-GLASS-0913: 背景/边框走 --glass-* 变量 + 日夜 0.3s 过渡。
   ============================================================ */
.glass-card {
    background: var(--mall-card-bg);
    border: 1px solid var(--mall-border);
    box-shadow: var(--mall-shadow);
    transition: background 0.3s var(--brand-ease), border-color 0.3s var(--brand-ease);
}
html.mall-glass-full .glass-card {
    background: var(--glass-bg-card);
    border-color: var(--glass-border-strong);
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
    backdrop-filter: var(--glass-blur) var(--glass-saturate);
}
html.mall-glass-lite .glass-card {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);
}
html.mall-glass-low .glass-card { background: rgba(255, 255, 255, 0.9); }

@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    html:not([data-theme="day"]).mall-glass-full .glass-card {
        background: rgba(44, 44, 46, 0.55);
        border-color: rgba(84, 84, 88, 0.5);
    }
    html:not([data-theme="day"]).mall-glass-lite .glass-card { background: rgba(44, 44, 46, 0.78); }
    html:not([data-theme="day"]).mall-glass-low .glass-card { background: rgba(28, 28, 30, 0.92); }

}

/* 毛玻璃胶囊 (筛选按钮) */
.glass-chip {
    background: var(--mall-card-bg);
    border: 1px solid var(--mall-border);
    transition: background 0.3s var(--brand-ease), border-color 0.3s var(--brand-ease);
}
html.mall-glass-full .glass-chip {
    background: var(--glass-bg-chip);
    border-color: var(--glass-border);
    -webkit-backdrop-filter: blur(16px) var(--glass-saturate);
    backdrop-filter: blur(16px) var(--glass-saturate);
}
html.mall-glass-lite .glass-chip {
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    html:not([data-theme="day"]).mall-glass-full .glass-chip { background: rgba(44, 44, 46, 0.55); border-color: rgba(84, 84, 88, 0.5); }
    html:not([data-theme="day"]).mall-glass-lite .glass-chip { background: rgba(44, 44, 46, 0.75); }

}

/* ============================================================
   二之二、毛玻璃覆盖扩张 (T-MALL-GLASS-0913)
   分类抽屉 / 详情页右卡 / 登录弹窗 / 购物车结算条 — 统一玻璃配方:
   半透明背景 + backdrop-filter (按档位降级) + 圆角 12-16px + 细边框
   (日间 rgba(255,255,255,0.25) / 夜间 rgba(255,255,255,0.12), 走 --glass-border)。
   背景/边框全部引用 --glass-* 变量 → theme.css body[data-night] 一处覆盖
   即完成日夜切换 (0.3s 过渡见各元素 transition)。
   ============================================================ */

/* ---- 分类选项卡 (.category-drawer) — 桌面左栏 sticky / 移动端横向滚动条 ----
   覆盖 category.css 的无条件 rgba+blur (本文件后加载); 圆角 16px, 细边框。 */
.category-drawer {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    transition: background 0.3s var(--brand-ease), border-color 0.3s var(--brand-ease);
}
html.mall-glass-full .category-drawer {
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
    backdrop-filter: var(--glass-blur) var(--glass-saturate);
}
html.mall-glass-lite .category-drawer {
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);
}
/* 低端/无 JS: 半透明纯色 (无模糊), 保证可读 */
html.mall-glass-low .category-drawer { background: rgba(255, 255, 255, 0.94); }

/* ---- 商品详情页右侧信息卡 (.detail-info-card, 自带 .glass-card 类) ----
   在 .glass-card 玻璃之上补: 圆角 16px + 玻璃细边框 (日夜变量)。 */
.detail-info-card {
    border-radius: var(--glass-radius);
    /* T-MALL-BORDER-01: 玻璃细边框改 --mall-border 等效实色 (#8A8A8E, 同首页卡片),
       原 --glass-border 在白卡上对比不足。夜间由 body[data-night] 块覆写, 不动。 */
    border-color: var(--mall-border);
    transition: background 0.3s var(--brand-ease), border-color 0.3s var(--brand-ease);
}
html.mall-glass-full .detail-info-card {
    background: var(--glass-bg-card);
    /* T-MALL-BORDER-01: 原 --glass-border-strong rgba(255,255,255,0.55) 白边压白卡
       完全不可见 → 边框实色化走 --mall-border (玻璃底/模糊保留) */
    border-color: var(--mall-border);
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
    backdrop-filter: var(--glass-blur) var(--glass-saturate);
}
html.mall-glass-lite .detail-info-card {
    background: rgba(255, 255, 255, 0.78);
    border-color: var(--mall-border); /* T-MALL-BORDER-01: 同 full 档, 白边实色化 */
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);
}

/* ---- 登录/注册弹窗 (.login-modal) — 玻璃面板 (覆盖 product.css 实色底) ---- */
.login-modal {
    background: var(--glass-bg-modal);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    transition: background 0.3s var(--brand-ease), border-color 0.3s var(--brand-ease);
}
html.mall-glass-full .login-modal {
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
    backdrop-filter: var(--glass-blur) var(--glass-saturate);
}
html.mall-glass-lite .login-modal {
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);
}

/* ---- 购物车结算条 (.cart-summary) — 玻璃面板 (覆盖 cart.css 无条件 blur) ---- */
.cart-summary {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    transition: background 0.3s var(--brand-ease), border-color 0.3s var(--brand-ease);
}
html.mall-glass-full .cart-summary {
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
    backdrop-filter: var(--glass-blur) var(--glass-saturate);
}
html.mall-glass-lite .cart-summary {
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);
}

/* ---- 夜间模式 (body[data-night], localStorage 切换, 独立于系统) ----
   更深 + 更冷色调 (与 theme.css --mall-bg #000 / --mall-card-bg #1C1C1E 协调):
   背景 rgba(20,25,40,0.72) 系, 细边框 rgba(255,255,255,0.12)。
   theme.css 后加载, 其 body[data-night] 规则同特异性靠源码顺序取胜;
   此处集中声明全部玻璃表面的夜间配方, 与 theme.css 夜间变量层互为备份。 */
body[data-night] .site-header { background: rgba(20, 25, 40, 0.72); border-bottom-color: rgba(255, 255, 255, 0.12); }
body[data-night] .bottom-nav { background: rgba(20, 25, 40, 0.8); }
body[data-night] .category-drawer { background: rgba(20, 25, 40, 0.72); border-color: rgba(255, 255, 255, 0.12); }
body[data-night] .detail-info-card { background: rgba(20, 25, 40, 0.6); border-color: rgba(255, 255, 255, 0.12); }
body[data-night] .login-modal { background: rgba(20, 25, 40, 0.82); border-color: rgba(255, 255, 255, 0.12); }
body[data-night] .cart-summary { background: rgba(20, 25, 40, 0.8); border-color: rgba(255, 255, 255, 0.12); }

/* ============================================================
   二之三、@supports 纯 CSS 兜底 (T-MALL-GLASS-0913 降级铁律)
   老浏览器 (无 backdrop-filter, 含无 -webkit- 前缀) 且无 JS 时,
   档位 class 不会写入 → 新表面保持实色兜底 (上方默认规则)。
   若浏览器支持 backdrop-filter 但 JS 未跑 (无 JS 档), 仍给半透明
   不模糊背景 (不启用 blur), 保证可读且不白屏。
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* 不支持模糊: 新玻璃表面退化为半透明纯色 (无 blur), 边框保留 */
    .category-drawer { background: rgba(255, 255, 255, 0.92); }
    .detail-info-card { background: rgba(255, 255, 255, 0.92); }
    .login-modal { background: rgba(255, 255, 255, 0.96); }
    .cart-summary { background: rgba(255, 255, 255, 0.94); }
    body[data-night] .category-drawer { background: rgba(20, 25, 40, 0.94); }
    body[data-night] .detail-info-card { background: rgba(20, 25, 40, 0.9); }
    body[data-night] .login-modal { background: rgba(20, 25, 40, 0.96); }
    body[data-night] .cart-summary { background: rgba(20, 25, 40, 0.94); }
}

/* ============================================================
   二之四、响应式断点 (T-MALL-GLASS-0913 响应式铁律: 320/375/768/1024)
   所有新增玻璃元素无固定宽度 (100% / flex 自适应), 此处按断点核对
   并微调, 保证 4 断点无溢出/遮挡。
   ============================================================ */
/* 320px: 玻璃卡片全宽; 分类选项卡横向滚动 (category.css 已实现 overflow-x) */
@media (max-width: 375px) {
    /* 小屏: 弹窗/右卡内边距收紧, 玻璃面板全宽不溢出 */
    .login-modal { padding: 24px 18px; }
    .detail-info-card { padding: 18px 16px; }
    /* 分类抽屉横向滚动条: 圆角只留底部 (全宽贴边), 避免顶角悬空 */
    .category-drawer { border-radius: 0 0 var(--glass-radius) var(--glass-radius); }
}
/* 376-767px: 平板竖屏 — 分类抽屉仍为横向滚动条, 玻璃面板默认即可 */
@media (min-width: 376px) and (max-width: 767px) {
    .category-drawer { border-radius: 0 0 var(--glass-radius) var(--glass-radius); }
}
/* 768px: 详情页右卡与主内容并排 (product.css .detail-layout 已 row);
   右卡 sticky + 玻璃, 无固定宽度 (flex:1 自适应), 默认即可 */
@media (min-width: 768px) and (max-width: 1023px) {
    .detail-info-card { padding: 20px; }
}
/* 1024px: 标准布局 — 桌面左分类栏 sticky + 玻璃, 默认即可 */
@media (min-width: 1024px) {
    .detail-info-card { padding: 22px; }
}

/* ============================================================
   三、发货/下载背景 (.delivery-hero)
   背景图: core/assets/img/delivery_bg_treasure.jpg (宝箱星光, 支付/下载页)
           core/assets/img/delivery_bg_sunrise.jpg  (晨曦暖阳, 订单页)
   图片为 ComfyUI 纯背景 (无文字), 文字/卡片全部由 DOM 叠加。
   ============================================================ */
.delivery-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--mall-radius-lg, 18px);
    isolation: isolate;
}
.delivery-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}
.delivery-hero__bg--treasure {
    background-image: url('/mall/core/assets/img/delivery_bg_treasure.jpg');
}
/* T-MALL-ORDERS-UI-0918: sunrise hero 背景由 JPG (delivery_bg_sunrise.jpg) 改 CSS 线性渐变 —
   根治夜间模式浅色图与深色 UI 违和 + 白字对比度 (暖色 sunrise 主题, 深底保证白字 WCAG AA)。
   夜间深色变体见 theme.css (body[data-night])。不再引用图片。 */
.delivery-hero__bg--sunrise {
    background-image: linear-gradient(135deg, #C86E00 0%, #BE185D 55%, #831843 100%);
    background-position: center top;
}
/* 内容层: 保证文字在图上可读 (图上留白区 + 轻渐变兜底) */
.delivery-hero__inner {
    position: relative;
    padding: 40px 16px 48px;
}
.delivery-hero--strip .delivery-hero__inner {
    padding: 32px 16px 28px;
}
/* T-MALL-ORDERS-UI-0918: sunrise 条幅文字固定白字 + 轻投影 (深暖渐变底, WCAG AA)。
   作用域限 --strip (仅 orders/order_detail/download 三页 sunrise hero 使用),
   不影响 payment 页 treasure hero (无 --strip/--sunrise)。特异性 (0,4,0) 高于
   theme.css body[data-night] 的 (0,3,0) → 夜间不翻色, 白字始终可读。 */
.delivery-hero--strip .delivery-hero__bg--sunrise ~ .delivery-hero__inner .delivery-hero__title {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.delivery-hero--strip .delivery-hero__bg--sunrise ~ .delivery-hero__inner .delivery-hero__sub {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.delivery-hero__title {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--brand-navy);
}
.delivery-hero__sub {
    font-size: 15px;
    color: rgba(31, 58, 95, 0.72);
    margin: 0;
}
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    :where(html:not([data-theme="day"])) .delivery-hero__title { color: #FDF8F0; }
    :where(html:not([data-theme="day"])) .delivery-hero__sub { color: rgba(253, 248, 240, 0.75); }

}
/* 窄屏: 背景裁切更靠上, 避免主体被卡片完全遮挡 */
@media (max-width: 600px) {
    .delivery-hero__bg { background-position: center 18%; }
    .delivery-hero__inner { padding: 28px 12px 36px; }
}

/* ============================================================
   三之二、品牌内容带 (.brand-band) — Apple 官网风格内容展示
   首页 banner 下方: 大图背景 (晨曦暖阳) + 简洁文案 + 金色 CTA,
   随滚动 fade-up 入场。
   ============================================================ */
/* T-MALL-BANNER-MERGE: brand-band 并入 #mall-banner 区顶部 — 外边距归 0 (间距由 .mall-banner 容器 margin-bottom 提供),
   圆角交给 .mall-banner 容器统一裁切 (本区块贴容器顶, 自身再设圆角会在底部产生内凹缺口),
   配色/文字设计保留。夜间固定浅色配色见 theme.css。 */
.brand-band {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    margin: 0;
    text-align: center;
    isolation: isolate;
}
.brand-band__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/mall/core/assets/img/delivery_bg_sunrise.jpg') center 20% / cover no-repeat;
}
.brand-band__inner {
    /* T-BANNER-REGEN-0930: 原 56/64 padding (共120px) 按 285px 死值高度调过, 只在
       1200px 容器宽下恰好放下, 768–1199px 溢出裁字。现高度由 aspect-ratio 2048/480
       决定且 slide 是 flex 垂直居中 → 垂直 padding 归零, 只留水平 20px 文字呼吸。 */
    padding: 0 20px;
}
.brand-band__title {
    font-size: clamp(30px, 5.4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--brand-navy);
}
.brand-band__sub {
    font-size: clamp(15px, 2vw, 18px);
    color: rgba(31, 58, 95, 0.72);
    margin: 0 0 26px;
}
@media (prefers-color-scheme: dark) {
/* T-MALL-DAYMODE-0922: 门控 — 用户显式选白天 (html[data-theme=day]) 时系统深色媒体规则不生效
   (防白字压浅底); :where() 零特异性, 不改变级联; 旧浏览器不支持 :where 时整条规则失效=保持浅色, 安全。 */

    :where(html:not([data-theme="day"])) .brand-band__title { color: #FDF8F0; }
    :where(html:not([data-theme="day"])) .brand-band__sub { color: rgba(253, 248, 240, 0.78); }

}
/* T-MALL-BANNER-HEIGHT-FIX: 移动端断点由 600px 对齐到 599px (与图片 slide 的 180px
   断点一致), 避免 600px 宽时 brand-band(285px) 与图片 slide(180px) 高度跳变。 */
@media (max-width: 599px) {
    .brand-band { margin: 0; }
    /* T-BANNER-REGEN-0930: 原 16/20 padding 按 180px 死值高度调过, 已废弃 —
       现高度由 aspect-ratio 决定, padding 统一见下方 .brand-band__inner 规则
       (桌面 0 20px / 移动 0 12px, flex 垂直居中)。 */
    /* 注: 移动端 slide 高度须与图片 slide 同源 (aspect-ratio 2048/480),
       见下方 #mall-banner .brand-band-slide 规则。 */
}

/* ============================================================
   T-MALL-BANNER-SLIDE: brand-band 并入轮播 — .brand-band-slide 变体。
   复用上方 .brand-band__* 视觉 (晨曦背景/标题/副标题/金色 CTA),
   此处只补轮播轨道内的布局: flex 垂直居中 (slide 模式下轨道拉伸到
   最高 slide 高度时内容保持居中), isolation 把 z-index:-1 的背景
   锁在 slide 自身层叠上下文内。
   选择器带 #mall-banner 前缀: 与 category.css 的
   #mall-banner .banner-slide{display:block} 同特异性, 本文件后加载取胜。
   夜间固定浅色配色见 theme.css (选择器已扩展 .brand-band-slide)。
   ============================================================ */
#mall-banner .brand-band-slide {
    position: relative;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    /* T-BANNER-REGEN-0930: 高度基准从死值 285px 改为与图片 slide 同源 —
       aspect-ratio: 2048/480 (6 张 store_banners 图的实际比例, 2026-09-30 实测)。
       旧 285px 是按 mall.css:920 的"统一 285px"对齐的, 但 mall.css 从未被任何页面
       <link> (死文件), 图片 slide 实际是 height:auto (category.css T-MALL-BANNER-FIX-0921),
       自然高 = 容器宽/4.2667 → 轮播切到 brand-band 时轨道高度跳变 → 整页上下抖动
       (iPhone 375px: 180px vs 88px, 差 92px)。aspect-ratio 随宽度自适应, 任意宽度下
       brand-band 与图片 slide 同高, 抖动数学上归零; 断点无需分叉。 */
    height: auto;
    aspect-ratio: 2048 / 480;
}
/* T-BANNER-REGEN-0930: 移动端 180px 死值规则删除 — aspect-ratio 天然随宽度自适应,
   375px 下 brand-band 高 80px 与图片 slide 一致 (旧规则 180px 是 92px 抖动的来源)。
   代价: 窄屏下 slide 高度随宽度缩小。原为 285px 死值调过的 56/64 大 padding (共 120px)
   只在 1200px 容器宽 (=281px 高) 下恰好放下, 768–1199px 区间 slide 高度不足 → 溢出裁字。
   根因: 大 padding 是"死值高度时代"的产物; 现在高度由 aspect-ratio 决定且 slide 已是
   flex 垂直居中, 内容无需 padding 定位 → 垂直 padding 归零 (见上方 .brand-band__inner
   基础规则 0 20px), 任意宽度下内容 (≈153px) 都小于 slide 高度, flex 居中, 不裁切。 */
@media (max-width: 640px) {
    /* ≤640px 下 slide 高度 (4.27:1) 不足以容纳 标题+副标题+双CTA 三行内容
       (600px 实测内容 135px > slide 133px) → 隐藏副标题 (其文案「海量公开课课件」
       在 6 张图片 banner 上已重复出现, 移动端丢失不影响信息), 保留标题 + 双 CTA
       (功能性链接必须保留), 字号压到 slide 高度内不裁切。
       实测 375/390/450/560/600/640px fits=true; 641px 起副标题恢复显示且 slide 足够高。 */
    .brand-band__sub { display: none; }
    .brand-band-slide .btn-delivery { font-size: 13px; padding: 8px 18px; }
    .brand-band__title { font-size: 20px; margin-bottom: 6px; }
    .brand-band__inner { padding: 0 12px; }
}

/* ============================================================
   四、品牌 CTA (.btn-delivery) — 金色胶囊, Apple 风
   ============================================================ */
.btn-delivery {
    display: inline-block;
    background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-deep));
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    padding: 14px 36px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(244, 185, 66, 0.4);
    transition: transform 0.2s var(--brand-ease), box-shadow 0.2s var(--brand-ease);
}
.btn-delivery:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(244, 185, 66, 0.5);
}
.btn-delivery:active { transform: translateY(0); }
.btn-delivery:disabled,
.btn-delivery[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================================
   五、滚动动画 (.reveal) — Apple 风 fade-up
   JS (mall.js initReveal) 用 IntersectionObserver 加 .reveal-in。
   仅 html.mall-anim 档启用 (JS 按能力开启); 无 JS / reduced-motion
   时元素始终可见, 无动画。
   ============================================================ */
html.mall-anim .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--brand-ease), transform 0.7s var(--brand-ease);
    will-change: opacity, transform;
}
html.mall-anim .reveal-in {
    opacity: 1;
    transform: none;
}
/* 交错延迟 (data-reveal-delay: 0-5) */
html.mall-anim .reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
html.mall-anim .reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
html.mall-anim .reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }
html.mall-anim .reveal[data-reveal-delay="4"] { transition-delay: 0.32s; }
html.mall-anim .reveal[data-reveal-delay="5"] { transition-delay: 0.4s; }

/* 微交互: 卡片 hover 上浮 (仅鼠标设备)
   T-MALL-ANIMATION: hover 过渡统一 200ms ease (原 0.35s), 与按钮/链接一致 */
@media (hover: hover) {
    html.mall-anim .order-card.reveal-in,
    html.mall-anim .product-card.reveal-in {
        transition: opacity 0.7s var(--brand-ease), transform 0.2s var(--mall-ease), box-shadow 0.2s var(--mall-ease);
    }
    html.mall-anim .order-card.reveal-in:hover {
        transform: translateY(-3px);
        box-shadow: var(--mall-shadow-hover);
    }
}

/* 尊重系统减弱动态效果: 任何档位都关闭动画 */
@media (prefers-reduced-motion: reduce) {
    html.mall-anim .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .btn-delivery, .nav-link, .product-card { transition: none !important; }
}

/* ============================================================
   四、T-MALL-DEV-0917: 老浏览器能力降级 (no-glass / no-canvas)
   primer_header.php head 内联检测 (bg_parallax.js 在 footer defer, 无法首帧生效):
   - no-glass: 不支持 backdrop-filter (含 -webkit- 前缀) → 毛玻璃表面换实色底,
     液态玻璃叠加层/液滴隐藏, banner slide 回实色 (防半透明白屏)。
   - no-canvas: canvas 2d 不可用 → 隐藏粒子背景 #mall-bg-canvas (bg_parallax.js
     自身已有 bg-static 兜底, 此处双保险, 防 JS 已建 canvas 后渲染异常)。
   桌面/移动同一套规则; 桌面端正常浏览器不受影响 (class 不写入)。 */
html.no-glass .bottom-nav { background: rgba(255, 255, 255, 0.98); }
html.no-glass .site-footer { background: rgba(255, 255, 255, 0.98); }
html.no-glass .liquid-banner, html.no-glass .liquid-blob { display: none; }
html.no-glass .banner-slide { background: var(--mall-bg, #fff); }
html.no-glass body[data-night] .bottom-nav { background: rgba(28, 28, 30, 0.96); }
html.no-glass body[data-night] .site-footer { background: rgba(28, 28, 30, 0.96); }
html.no-canvas #mall-bg-canvas { display: none; }


/* ===== source: animation.css (md5 4d2a7337dfa2) ===== */
/* ============================================================
   T-MALL-ANIMATION-2: 动画深化层 (页面级转场 / 列表 stagger 增强 /
   数字滚动 count-up / 按钮 ripple / banner 轮播过渡 / ComfyUI 装饰图)
   加载顺序: 在 card.css / category.css / glass.css 之后 (同特异性覆盖生效),
   theme.css 之前 (夜间模式变量层仍可覆盖)。
   性能铁律: 只动画 transform/opacity/filter (GPU 合成, 不触发 reflow);
   prefers-reduced-motion 下全部降级为静态 (见下方媒体查询)。
   与旧单体 mall.css 末尾同名区块保持同步 (源码一致性约定)。
   ============================================================ */

/* ---- 1) 页面级转场 (page-transition): 页面 load 时 .site-main 淡入 + 方向滑动 ----
   方向由 mall.js 依据 history/sessionStorage 判断: 前进 slide-in-right /
   后退/刷新/直达 中性淡入。仅 transform+opacity, 不触发 reflow。 */
@keyframes page-transition-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes page-transition-in-right {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes page-transition-in-left {
    from { opacity: 0; transform: translateX(-26px); }
    to   { opacity: 1; transform: none; }
}
html.mall-anim .site-main {
    animation: page-transition-in 0.4s var(--mall-ease, cubic-bezier(0.25, 0.1, 0.25, 1)) both;
}
html.mall-anim .site-main.page-transition-right {
    animation-name: page-transition-in-right;
}
html.mall-anim .site-main.page-transition-left {
    animation-name: page-transition-in-left;
}

/* ---- 2) 列表 stagger 增强: 卡片入场叠加轻微 scale (0.98→1), 与 fade-left 组合 ----
   覆盖 card.css 的 card-fade-in (同特异性, 本文件后加载生效)。
   延迟由 --stagger 控制 (home.js/products.js 按行内位置每卡 +50ms)。
   T-MALL-CARDS-PRELOAD-0918: 由"上移+scale"改为"左移+scale" (translateX(-20px)→0), 从左到右滑入。 */
.card-anim.in {
    animation: card-fade-in-up 0.5s var(--mall-ease, cubic-bezier(0.25, 0.1, 0.25, 1)) both;
    animation-delay: var(--stagger, 0ms);
}
@keyframes card-fade-in-up {
    from { opacity: 0; transform: translateX(-20px) scale(0.98); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
/* 卡片封面图: 进入视口时 blur(8px)→0 + opacity 0→1 (随卡片 .in 同触发) */
html.mall-anim .card-anim .card-image img {
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.6s ease, filter 0.6s ease;
}
html.mall-anim .card-anim.in .card-image img {
    opacity: 1;
    filter: blur(0);
}

/* ---- 3) 数字滚动 (number-roll / count-up): 宝箱币/统计从 0 滚到目标值 ----
   JS (mall.js initNumberRoll) 对 [data-count] 元素用 rAF 逐帧写 textContent;
   本层只负责视觉: tabular-nums 防位宽抖动 + 滚动中轻微上浮。 */
[data-count] {
    font-variant-numeric: tabular-nums;
    display: inline-block;
}
[data-count].number-roll {
    animation: number-roll-in 0.3s var(--mall-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
}
@keyframes number-roll-in {
    from { transform: translateY(4px); opacity: 0.4; }
    to   { transform: none; opacity: 1; }
}

/* ---- 4) 按钮 ripple (主要按钮点击水波纹) ----
   JS (mall.js bindRipple) 对 .btn-primary/.btn-delivery 点击动态插入 .btn-ripple span。
   容器需 position:relative + overflow:hidden (下方补齐); 波纹纯 transform+opacity。 */
.btn-primary, .btn-delivery {
    position: relative;
    overflow: hidden;
}
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--ripple-color, rgba(255, 255, 255, 0.5));
    transform: scale(0);
    opacity: 0.55;
    pointer-events: none;
    animation: ripple-expand 0.55s var(--mall-ease, cubic-bezier(0.25, 0.1, 0.25, 1)) forwards;
}
@keyframes ripple-expand {
    to { transform: scale(2.6); opacity: 0; }
}
/* 金色 CTA 用深色波纹 (白波纹在金色底上对比不足) */
.btn-delivery .btn-ripple {
    background: rgba(31, 58, 95, 0.28);
}

/* ---- 5) banner 轮播过渡动画 (fade 样式: 淡入 + 轻微放大 Ken Burns) ----
   仅 fade 模式加 transform (slide 模式轨道 translateX 由 category.css 驱动, 不受影响)。
   data-style 由 index.php 轮播 JS 设置为 'fade'/'slide'。 */
#mall-banner.is-carousel[data-style="fade"] .banner-track .banner-slide {
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: scale(1.035);
}
#mall-banner.is-carousel[data-style="fade"] .banner-track .banner-slide.is-active {
    transform: scale(1);
}
/* brand-band slide 背景层: 缓慢上下漂移 (banner 区装饰动效, 纯 transform) */
@keyframes banner-bg-drift {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
#mall-banner .brand-band-slide .brand-band__bg {
    inset: -12px 0 0 0;
    animation: banner-bg-drift 18s ease-in-out infinite;
}
/* brand-band slide 内容层提到装饰层之上 (文字不被 blend 影响) */
#mall-banner .brand-band-slide .brand-band__inner {
    position: relative;
    z-index: 1;
}
/* T-MALL-ANIMATION-3: brand-band slide hover 缩放 (背景层 scale 1→1.03, 纯 transform GPU 合成;
   需鼠标设备, 触屏无 hover 不受影响) */
@media (hover: hover) {
    #mall-banner .brand-band-slide .brand-band__bg {
        transition: transform 1.2s var(--brand-ease, cubic-bezier(0.25, 0.1, 0.25, 1));
    }
    #mall-banner .brand-band-slide:hover .brand-band__bg {
        transform: scale(1.03);
    }
}
/* T-MALL-ANIMATION-3: 自动播放进度条 (圆点下方细条, index.php 轮播 JS 用 rAF 驱动 scaleX 0→1;
   transform-origin:left 从左向右生长; 纯 transform 不触发 reflow) */
#mall-banner .banner-progress {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    z-index: 10;
    width: 56px;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
    pointer-events: none;
}
#mall-banner .banner-progress__bar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.92);
    transform: scaleX(0);
    transform-origin: left center;
}

/* ---- 6) ComfyUI 装饰图 (core/assets/img/decor/, 111 节点生成, 品牌调: 暖色晨曦/扁平/无文字) ----
   6a) banner 区背景装饰层: 半透明 soft-light 叠加在晨曦照片上, 不挡文字 */
.banner-decor-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/mall/core/assets/img/decor/decor_banner_bg.jpg') center / cover no-repeat;
    opacity: 0.35;
    mix-blend-mode: soft-light;
    pointer-events: none;
}
/* 6c) 关于我们区配图 — 复用 layout.css .static-page__hero-img (已含 reveal fade-up),
   about.php 直接引用 decor/decor_about.jpg, 无需额外样式。 */
/* 6d) 空状态插画 (搜索无结果/购物车空/订单空), 替代纯 emoji 图标 */
.empty-state .empty-decor {
    width: 148px;
    height: 148px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0 auto 14px;
    opacity: 0.92;
}

/* ---- 7) 骨架屏扩展: 购物车/订单 列表页占位 (复用 card.css .skeleton-block shimmer) ---- */
.skeleton-row {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius, 12px);
    background: var(--mall-card-bg);
    margin-bottom: 12px;
    pointer-events: none;
}
.skeleton-row .skeleton-row-img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    aspect-ratio: auto;
}
.skeleton-row .skeleton-row-body { flex: 1; min-width: 0; }
.skeleton-order {
    border: 1px solid var(--mall-border);
    border-radius: var(--mall-radius, 12px);
    background: var(--mall-card-bg);
    margin-bottom: 16px;
    overflow: hidden;
    pointer-events: none;
}
.skeleton-order .skeleton-order-head {
    height: 44px;
    border-radius: 0;
    border-bottom: 1px solid var(--mall-border);
}
.skeleton-order .skeleton-order-body { padding: 16px; }

/* 7b) 商品详情页骨架 (T-BUG-ANIM-0922): 左封面 + 右信息行 (复用 .skeleton-block shimmer)
   detail/header.php 在 SEO 无商品时输出; detail_core.js 渲染后整体替换。 */
.detail-skeleton {
    display: flex;
    gap: 24px;
    padding: 8px 0;
    pointer-events: none;
}
.detail-skeleton__cover {
    width: 300px;
    max-width: 45%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}
.detail-skeleton__body { flex: 1; min-width: 0; }
.detail-skeleton__title { height: 26px; width: 70%; margin-bottom: 16px; }
.detail-skeleton__line { height: 14px; margin-bottom: 12px; }
.detail-skeleton__line--short { width: 50%; }
.detail-skeleton__price { height: 30px; width: 35%; margin-top: 20px; }
@media (max-width: 768px) {
    .detail-skeleton { flex-direction: column; }
    .detail-skeleton__cover { width: 100%; max-width: none; aspect-ratio: 3 / 4; }
}

/* ---- 8) 入场 stagger (T-BUG-ANIM-0922): data-in-view 区块/卡片 scroll 进入视口淡入上移 ----
   与 .card-anim(商品卡) / .reveal(区块) 互斥: 只标在尚未有入场动画的元素上 (文章卡/详情块)。
   隐藏态门控在 html.mall-anim (无 JS / reduced-motion 无此档 → 内容直接可见, 不遮挡)。
   JS (mall.js initInView) IntersectionObserver 加 .in-view, --stagger 按索引 +50ms。
   仅 transform/opacity (GPU 合成, 不触发 reflow)。 */
html.mall-anim [data-in-view] {
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
}
html.mall-anim [data-in-view].in-view {
    animation: in-view-in 0.5s var(--mall-ease, cubic-bezier(0.25, 0.1, 0.25, 1)) both;
    animation-delay: var(--stagger, 0ms);
}
/* T-MALL-ARTLIST-0922: 多列瀑布流 (.article-masonry, column-count) 内 IntersectionObserver
   相交计算不可靠 + 移动端视口小, 第二张卡常停在 opacity:0 不可见 (闪烁后消失)。
   豁免: 多列容器内文章卡直接可见, 不依赖 IO; 单列/详情页 data-in-view 动画保留。 */
html.mall-anim .article-masonry [data-in-view] {
    opacity: 1;
    transform: none;
    will-change: auto;
}
/* T-ARTICLE-MASONRY-0930: 多列瀑布流内封面豁免 shimmer 隐藏 (同 data-in-view 豁免思路)。
   iOS Safari + column-count 下, shimmer 的 opacity:0→1 淡入与懒图落定重排叠加,
   造成滚动时封面「时隐时现」。多列容器内封面直接 opacity:1 (牺牲淡入换稳定);
   配合 article_card.php 的 aspect-ratio 预留 + loading="eager", 重排根因一并消除。
   单列/详情页 .img-shimmer 淡入不受影响。 */
html.mall-anim .article-masonry .img-shimmer::before { display: none; }
html.mall-anim .article-masonry .img-shimmer img {
    opacity: 1;
    transition: none;
}
@keyframes in-view-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ---- 9) 图片懒加载占位 shimmer (T-BUG-ANIM-0922) ----
   容器加 .img-shimmer: 懒图加载完成前显示 shimmer 底, 完成后 JS 加 .img-loaded 淡入真图。
   ::before 走 skeleton-shimmer 同款 translateX 扫光 (纯 transform); img opacity 0→1 淡入。
   隐藏态门控在 html.mall-anim (JS 可用档): 无 JS / reduced-motion 无此档 → 不隐藏图,
   加载失败也不会白屏 (JS 另加 onerror 兜底直接 .img-loaded)。 */
.img-shimmer { position: relative; overflow: hidden; }
html.mall-anim .img-shimmer::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.4s infinite;
    pointer-events: none;
}
html.mall-anim .img-shimmer img {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}
html.mall-anim .img-shimmer.img-loaded img { opacity: 1; }
html.mall-anim .img-shimmer.img-loaded::before { display: none; }
/* 夜间: shimmer 高光降透明度 (深底上白扫光太刺眼, 与 .skeleton-block 夜间配方一致) */
body[data-night] .img-shimmer::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

/* ---- 10) 加载 spinner (T-BUG-ANIM-0922): 上拉加载更多 / 下拉刷新 / 异步请求 ----
   .mall-spinner: 圆环旋转 (transform:rotate, GPU 合成); 尺寸/描边走变量。
   .load-more-spinner: 列表底部"加载更多"占位 (JS 插入, 请求中显示, 完成/无更多移除)。 */
@keyframes mall-spin { to { transform: rotate(360deg); } }
.mall-spinner {
    display: inline-block;
    width: 22px; height: 22px;
    border: 2.5px solid var(--mall-border);
    border-top-color: var(--mall-primary);
    border-radius: 50%;
    animation: mall-spin 0.7s linear infinite;
    vertical-align: middle;
}
.mall-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.load-more-spinner {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 20px 0;
    color: var(--mall-text-muted); font-size: 13px;
}
body[data-night] .mall-spinner {
    border-color: rgba(84, 84, 88, 0.36);
    /* T-MALL-THEMECOMPAT-0924: 转环亮色跟随主题色 (原硬编码绿 #30D158) */
    border-top-color: var(--mall-primary);
}

/* ---- prefers-reduced-motion: 新增动画全部降级为静态 ---- */
@media (prefers-reduced-motion: reduce) {
    html.mall-anim .site-main,
    html.mall-anim .site-main.page-transition-right,
    html.mall-anim .site-main.page-transition-left {
        animation: none;
    }
    .card-anim, .card-anim.in {
        opacity: 1;
        transform: none;
        animation: none;
    }
    html.mall-anim .card-anim .card-image img,
    html.mall-anim .card-anim.in .card-image img {
        opacity: 1;
        filter: none;
        transition: none;
    }
    [data-count].number-roll { animation: none; }
    .btn-ripple { display: none; }
    #mall-banner.is-carousel[data-style="fade"] .banner-track .banner-slide {
        transform: none;
        transition: none;
    }
    #mall-banner .brand-band-slide .brand-band__bg { animation: none; }
    #mall-banner .brand-band-slide .brand-band__bg { transition: none; }
    #mall-banner .brand-band-slide:hover .brand-band__bg { transform: none; }
    #mall-banner .banner-progress { display: none; }
    /* T-BUG-ANIM-0922: 新增入场 stagger / 图片 shimmer / spinner 降级 */
    html.mall-anim [data-in-view],
    html.mall-anim [data-in-view].in-view {
        opacity: 1;
        transform: none;
        animation: none;
    }
    html.mall-anim .img-shimmer::before { animation: none; }
    html.mall-anim .img-shimmer img { opacity: 1; transition: none; }
    .mall-spinner { animation: none; }
}


/* ===== source: liquid.css (md5 c54faa98a250) ===== */
/* ============================================================
   T-MALL-ANIMATION-3: Liquid Glass 液态玻璃层 (banner + 卡片)
   加载顺序: animation.css 之后 / theme.css 之前 (同特异性覆盖生效,
   theme.css 夜间变量层仍可覆盖颜色)。
   性能铁律:
   - backdrop-filter 仅高端档 html.mall-glass-full 启用 (首帧前能力检测);
   - 无限动画只走 transform/border-radius (GPU 合成, 不触发 reflow);
   - will-change 仅用于持续动画的液滴装饰 (≤2 个元素), 其余不用;
   - 移动端 (≤599px) 降级: 关 backdrop-filter / 液滴, 保留纯色/渐变;
   - prefers-reduced-motion 下全部降级为静态。
   ============================================================ */

/* ---- 1) liquidMorph 有机圆角 keyframes (border-radius 非对称值循环, 8s ease-in-out infinite) ----
   供 banner 玻璃叠加层 + 卡片 hover 玻璃拟态复用; 值域控制在容器圆角内, 不露角。 */
@keyframes liquidMorph {
    0%   { border-radius: 22px 14px 20px 16px / 16px 20px 14px 22px; }
    25%  { border-radius: 14px 22px 16px 20px / 20px 14px 22px 16px; }
    50%  { border-radius: 20px 16px 22px 14px / 14px 22px 16px 20px; }
    75%  { border-radius: 16px 20px 14px 22px / 22px 16px 20px 14px; }
    100% { border-radius: 22px 14px 20px 16px / 16px 20px 14px 22px; }
}

/* ---- 2) banner 液态玻璃叠加层 (.liquid-banner, index.php brand-band slide 内静态元素) ----
   层级: z-index 0 — 在 .brand-band__bg(z:-1)/.banner-decor-bg(z:0) 之上,
   .brand-band__inner(z:1) 之下, 不挡文字与 CTA; pointer-events:none 不挡点击。
   效果: backdrop-filter blur(24px) saturate(180%) brightness(1.1) + 顶部渐变高光
   + 有机边缘 (liquidMorph 圆角循环); 仅高端档启用模糊, 其余档退化为纯渐变高光。 */
.liquid-banner {
    position: absolute;
    inset: 10px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.16) 100%);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 24px rgba(31, 58, 95, 0.10);
    border-radius: 22px 14px 20px 16px / 16px 20px 14px 22px;
}
html.mall-glass-full .liquid-banner {
    -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.1);
    backdrop-filter: blur(24px) saturate(180%) brightness(1.1);
    animation: liquidMorph 8s ease-in-out infinite;
}
html.mall-glass-lite .liquid-banner {
    -webkit-backdrop-filter: blur(12px) brightness(1.05);
    backdrop-filter: blur(12px) brightness(1.05);
    animation: liquidMorph 8s ease-in-out infinite;
}

/* ---- 3) 背景液滴装饰 (.liquid-blob) — T-Q14-BLOB-RM-1008 已注释 ----
   全站 grep 确认: .liquid-blob 仅 about/help/privacy/terms 四静态页 HTML 使用,
   四页引用已删除后本层无任何消费者, 按任务要求整段注释 (备份见工作区 backups/)。
   原规则: 品牌色半透明圆斑 liquidMorph 圆角循环 + liquid-drift 缓慢漂移。
@keyframes liquid-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(14px, -10px) scale(1.08); }
    66%  { transform: translate(-10px, 8px) scale(0.94); }
    100% { transform: translate(0, 0) scale(1); }
}
.liquid-blob {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    display: none;
    border-radius: 42% 58% 60% 40% / 45% 42% 58% 55%;
    will-change: transform, border-radius;
    animation: liquidMorph 8s ease-in-out infinite, liquid-drift 13s ease-in-out infinite;
}
html.mall-glass-full .liquid-blob { display: block; }
.liquid-blob--gold {
    width: 130px; height: 130px;
    top: -34px; right: 8%;
    background: radial-gradient(circle at 35% 35%, rgba(244, 185, 66, 0.55), rgba(244, 185, 66, 0.12) 70%);
}
.liquid-blob--coral {
    width: 96px; height: 96px;
    bottom: -26px; left: 12%;
    background: radial-gradient(circle at 40% 40%, rgba(240, 138, 93, 0.5), rgba(240, 138, 93, 0.10) 70%);
    animation-delay: -4s, -6s;
}
---- 3) 注释结束 ---- */

/* ---- 4) 卡片 hover 液态玻璃 (liquidMorph 圆角循环, 叠加在 card.css 的玻璃拟态层上) ----
   仅高端档 + 鼠标设备: hover 时 .card-image::after 玻璃层圆角随 liquidMorph 循环,
   与 blur+saturate 拟态组合成"液态玻璃"观感; 非 hover 不跑动画 (省渲染)。 */
@media (hover: hover) {
    html.mall-glass-full .product-card:hover .card-image::after {
        animation: liquidMorph 8s ease-in-out infinite;
    }
}

/* ---- 5) 移动端 (≤599px) 降级: 关 backdrop-filter / 液滴, 保留纯色/渐变高光 ---- */
@media (max-width: 599px) {
    html.mall-glass-full .liquid-banner,
    html.mall-glass-lite .liquid-banner {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        animation: none;
        border-radius: 18px;
        inset: 8px;
    }
    html.mall-glass-full .liquid-blob { display: none; }
}
@media (max-width: 599px) and (hover: hover) {
    html.mall-glass-full .product-card:hover .card-image::after {
        animation: none;
    }
}

/* ---- 6) prefers-reduced-motion: 液态动画全部降级为静态 ---- */
@media (prefers-reduced-motion: reduce) {
    html.mall-glass-full .liquid-banner,
    html.mall-glass-lite .liquid-banner {
        animation: none;
    }
    .liquid-blob {
        animation: none;
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
    html.mall-glass-full .product-card:hover .card-image::after {
        animation: none;
    }
}

/* ---- 7) T-IMG-0912-13: 静态页 (关于我们/使用条款/隐私政策/帮助中心) 液态玻璃内容背景 ----
   结构 (4 个 static-page 各一处, 均为 aria-hidden 装饰层, 不挡交互):
     <div class="static-page">
         <div class="static-page__liquid-bg" aria-hidden="true">
             <svg class="static-page__liquid-svg">…有机液滴 blob (viewBox 400x520)…</svg>
             <span class="liquid-blob liquid-blob--gold"></span>
             <span class="liquid-blob liquid-blob--coral"></span>
         </div>
         …hero / 卡片…
     </div>
   层级: .static-page__liquid-bg z-index 0 (含 SVG 液滴 + 复用第 3 节 .liquid-blob 漂移液滴),
   .static-page__hero 提升为 z-index 1 玻璃面板 (backdrop-filter 模糊背景液滴 → 液态玻璃观感)。
   颜色走 --mall-* 变量 → 夜间模式由 theme.css 变量层自动适配, 无需额外规则。
   性能铁律同 banner: backdrop-filter 仅高端档; 无限动画仅 transform/border-radius;
   移动端 (≤599px) 关模糊; prefers-reduced-motion 全静态。 */
.static-page { position: relative; }
.static-page__liquid-bg {
    position: absolute;
    top: -10px;
    /* Q24: 旧 left/right:-10px 让液滴层横向出血到视口外,
       在 help/about/privacy/terms 造成 6-10px 横向滚动条
       (含 iPad mini 5 竖版 768 断点)。改为贴边, 视觉无损。 */
    left: 0; right: 0;
    height: 540px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
/* SVG 液滴层: 铺满背景层, 高斯模糊成柔和"液态"色晕 (品牌色, 夜间自动换色)。
   preserveAspectRatio slice 裁切两侧, 液滴集中在顶部 (hero 背后)。 */
.static-page__liquid-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: blur(46px);
    opacity: 0.5;
}
/* SVG 液滴颜色走 --mall-* 变量 (夜间自动换绿/橙/靛) —
   presentation attribute 不支持 var(), 必须经 class 走 CSS。 */
.static-page__liquid-svg .lp-blob-a { fill: var(--mall-primary); }
.static-page__liquid-svg .lp-blob-b { fill: var(--mall-accent); }
.static-page__liquid-svg .lp-blob-c { fill: var(--mall-secondary); }
/* 内容层提到背景液滴之上: liquid-bg 是定位元素 (z-index 0), 会盖在
   静态定位的正文上 → 除 liquid-bg 外的直接子元素统一 relative + z-index 1。 */
.static-page > *:not(.static-page__liquid-bg) {
    position: relative;
    z-index: 1;
}
/* 标题区玻璃面板: 与第 2 节 .liquid-banner 同款高光/描边, 有机圆角走 liquidMorph 循环 */
.static-page__hero {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    padding: 26px 24px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.16) 100%);
    /* T-MALL-VISUAL-Q2-1008: 原白色边框 rgba(255,255,255,0.42) 压浅色页面底不可见 —
       改走 --mall-border (白天深灰细边可见); 夜间 theme.css .static-page__hero 已有
       rgba(84,84,88,0.5) 覆盖 (body[data-night] 特异性更高), fallback 保留原白边兜底 */
    border: 1px solid var(--mall-border, rgba(255, 255, 255, 0.42));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 24px rgba(31, 58, 95, 0.10);
    border-radius: 22px 14px 20px 16px / 16px 20px 14px 22px;
}
html.mall-glass-full .static-page__hero {
    -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.1);
    backdrop-filter: blur(24px) saturate(180%) brightness(1.1);
    /* T-Q14-BLOB-RM-1008: 用户要求去掉包裹 logo 容器的动态圆角方块动画 —
       移除 liquidMorph 无限循环, 保留静态玻璃面板 (渐变高光/描边/固定圆角)。 */
}
html.mall-glass-lite .static-page__hero {
    -webkit-backdrop-filter: blur(12px) brightness(1.05);
    backdrop-filter: blur(12px) brightness(1.05);
}
/* 移动端 (≤599px) 降级: 关 hero 模糊, 保留渐变高光 + 静态圆角 (背景液滴保留, 尺寸小开销低) */
@media (max-width: 599px) {
    html.mall-glass-full .static-page__hero,
    html.mall-glass-lite .static-page__hero {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        animation: none;
        border-radius: 18px;
        padding: 20px 16px;
    }
}
/* prefers-reduced-motion: 静态页液态动画全部降级为静态 */
@media (prefers-reduced-motion: reduce) {
    html.mall-glass-full .static-page__hero,
    html.mall-glass-lite .static-page__hero {
        animation: none;
    }
}


/* ===== source: theme.css (md5 2fe87a1cb974) ===== */
/* ============================================================
   幼师藏宝箱 · 商城 — theme.css (T-MALL-THEME 三态主题)
   body[data-theme="mono"]  全站黑白 (后台 app_settings.store_theme_mode=mono, 节日悼念等)
   body[data-night="1"]     夜间模式 (用户本地 localStorage app-theme=night, 独立于黑白)
   叠加优先级: mono+night > mono > night > color(默认)
   依赖: layout.css (--mall-*) / glass.css (--brand-*) / primer.min.css (--fgColor-*)
   ============================================================ */

/* ---- 夜间模式: Apple 深色 (与 layout.css prefers-color-scheme:dark 变量一致) ---- */
body[data-night] {
    --mall-primary: #FF9F0A; /* T-IPCOLOR3-WEB-1012: 夜间主色 = 与「即将上市」徽章 #FF9500 同族 H35 S100, 深底 8.28:1 */
    --mall-primary-dark: #C86E00; /* T-IPCOLOR3-WEB-1012: 夜间加深态 (hover #FFB340 见 hover 规则) */
    --mall-accent: #FF9F0A; /* T-IPCOLOR3-WEB-1012 */
    /* T-MALL-NIGHT-01: 语义色夜间值 — 与 layout.css 系统深色块一致 (Primer 深色对应色,
       深底 #1C1C1E/rgba(20,25,40,.72) 上 WCAG AA ≥4.5:1: danger 5.08 / muted 5.93)。
       修复 payment.php/orders.php 内联 var(--mall-danger)/var(--mall-muted) 此前
       全站未定义 → 永远回退日间 #cf222e/#8b949e 的夜间对比度不足问题。 */
    --mall-danger: #f85149;
    --mall-muted: #98989D;
    --mall-fg-muted: #98989D;
    --mall-bg: #000000;
    --mall-card-bg: #1C1C1E;
    --mall-text: #FFFFFF;
    --mall-text-muted: #98989D;
    --mall-border: rgba(84, 84, 88, 0.36);
    --mall-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.5);
    --mall-shadow-hover: 0 10px 34px rgba(0,0,0,0.6);
    /* T-ARTDARK-0922: 夜间次级表面变量 — articles.css 大量引用这 3 个变量,
       此前夜间未定义 → 回退到硬编码浅色 fallback (#f9fafb/#eef0f2/#f3f4f6),
       导致文章详情页「浏览全部幼教教案/文中推荐商品/关联教案」3 块夜间仍浅底。
       与日间 :root (layout.css) 同名变量值对齐, 夜间值对齐 Apple 深色层级
       (--mall-card-bg #1C1C1E < 次级底 #2C2C2E < hover #3A3A3C)。 */
    --mall-bg-secondary: #2C2C2E;
    --mall-card-border: rgba(255, 255, 255, 0.12);
    --mall-bg-hover: #3A3A3C;
    /* T-MALL-VISUAL-Q2-1008: 夜间柔和表面走次级表面 (与 layout.css 系统深色块一致) */
    --mall-bg-soft: var(--mall-bg-secondary);
    /* T-MALL-GLASS-0913: 毛玻璃变量 (夜间更深 + 更冷色调) — glass.css 全部玻璃表面
       引用这组变量, 日夜切换只换变量 (0.3s 过渡见 glass.css 各元素 transition)。
       冷色调 rgba(20,25,40,x) 与 --mall-bg #000 / --mall-card-bg #1C1C1E 协调;
       细边框夜间降为 rgba(255,255,255,0.12) (日间 0.25, 见 glass.css :root)。 */
    --glass-bg: rgba(20, 25, 40, 0.72);
    --glass-bg-strong: rgba(20, 25, 40, 0.8);
    --glass-bg-card: rgba(20, 25, 40, 0.6);
    --glass-bg-chip: rgba(20, 25, 40, 0.55);
    --glass-bg-modal: rgba(20, 25, 40, 0.82);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-strong: rgba(255, 255, 255, 0.18);
    /* 品牌色 (glass.css --brand-*) */
    --brand-gold: #F4B942;
    --brand-navy: #FDF8F0;
    --brand-coral: #F08A5D;
    --brand-cream: #1C1C1E;
    --brand-ink: #F2F2F7;
    --brand-mist: #3A3A3C;
    /* Primer token (商城页 color-fg-* / color-bg-* / color-border-* 类) */
    --fgColor-default: #f0f6fc;
    --fgColor-muted: #8b949e;
    --bgColor-default: #000000;
    --bgColor-inset: #0d1117;
    --borderColor-default: #30363d;
    --fgColor-accent: #4493f8;
    --bgColor-attention-emphasis: #9e6a03;
    --bgColor-danger-emphasis: #b62324;
    --bgColor-success-emphasis: #1a7f37;
    --bgColor-neutral-emphasis: #6e7681;
    --fgColor-danger: #f85149;
    --fgColor-success: #3fb950;
    /* T-MALL-VIP-AVATAR-01: VIP 头像色板夜间值 — 深底提亮保证环/徽章可辨
       (银环 #8b949e→#b1bac4, 金 #d4a72c→#e3b341, 紫 #8250df→#a371f7,
        琥珀预警 #bf8700→#d29922; 徽章小圆底改浅半透) */
    --vip-ring-silver: #b1bac4;
    --vip-ring-gold: #e3b341;
    --vip-ring-purple: #a371f7;
    --vip-ring-gold-deep: #e3b341;
    --vip-tier-bronze: #db8b60;
    --vip-tier-silver: #cdd9e5;
    --vip-tier-gold: #f0c64f;
    --vip-tier-moon: #79c0ff;
    --vip-tier-star: #ffdf5d;
    --vip-warn-bg: #d29922;
    --vip-expired-bg: #768390;
    --vip-badge-bg: rgba(255, 255, 255, 0.22);
}
/* T-LOGO-NIGHT-0913: 夜间模式 logo 兜底 — 深色透明底 logo 在深底不可读。
   主路径: JS 把 src 换成夜间版 (浅色透明底, 同形状) 并打 data-logo-night-applied。
   无 JS / JS 未就绪时, 用 invert(1) hue-rotate(180deg) 把深色 logo 反相成浅色 (近似夜间版)。
   排除已被 JS 换成夜间版的图 (data-logo-night-applied), 避免二次反相变回深色。
   仅当存在夜间版 (data-logo-night 非空) 才反相 — SVG 等无夜间版的 logo 不反相 (避免颜色错乱)。 */
body[data-night] img[data-logo-day][data-logo-night]:not([data-logo-night-applied]) {
    filter: invert(1) hue-rotate(180deg);
}
/* T-MALL-GLASS-0913: 头部/底导/分类抽屉夜间背景统一走 --glass-bg (更深更冷,
   与 glass.css body[data-night] 配方一致), 细边框走 --glass-border。 */
body[data-night] .site-header,
body[data-night] .bottom-nav,
body[data-night] .category-drawer {
    background: var(--glass-bg);
}
body[data-night] .site-header { border-bottom-color: var(--glass-border); }
body[data-night] .category-drawer { border-color: var(--glass-border); }
body[data-night] #search-input {
    background: var(--mall-card-bg);
}
body[data-night] #search-input:focus {
    /* T-MALL-THEMECOMPAT-0924: 焦点光环跟随主题色 (原硬编码绿 rgba(48,209,88,.18));
       color-mix 不支持时回退上一行绿色值, 页面正常 */
    box-shadow: 0 0 0 3px rgba(255, 159, 10, 0.18);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mall-primary) 28%, transparent);
}
/* T-MALL-CARD-UX: 搜索框容器 (夜间) — 深底 + 深按钮, 边框走夜间 --mall-border */
body[data-night] .search-box {
    background: var(--mall-card-bg);
    border-color: rgba(84, 84, 88, 0.6);
}
body[data-night] .search-box button {
    background: #2C2C2E;
    color: #98989D;
}
body[data-night] .search-box button:hover {
    background: #3A3A3C;
    /* T-MALL-THEMECOMPAT-0924: hover 字色跟随主题色 (原硬编码绿 #30D158) */
    color: var(--mall-primary);
}
body[data-night] .brand-band__sub { color: rgba(253, 248, 240, 0.72); }

/* ============================================================
   T-MALL-BANNER-MERGE: banner 区夜间排除 (夜间模式不作用于 banner 配色)
   根因: brand-band 背景是浅色晨曦图 (delivery_bg_sunrise.jpg), 但 body[data-night]
   把 --brand-navy 翻成浅色 #FDF8F0, 标题/CTA 文字变浅 → 浅字压浅底不可见。
   修复: 固定 brand-band 文字为浅色模式原配色 (深藏青文字 + 金色 CTA)。
   与上方第 66 行夜间审计规则同特异性 (0,2,1), 靠源码顺序在后取胜;
   亦高于 glass.css 系统级 dark 媒体查询 (0,1,0)。夜间保持原配色不翻色。
   ============================================================ */
body[data-night] .brand-band__title,
body[data-night] .brand-band-slide .brand-band__title { color: #1F3A5F; }
body[data-night] .brand-band__sub,
body[data-night] .brand-band-slide .brand-band__sub { color: rgba(31, 58, 95, 0.72); }
body[data-night] .brand-band .btn-delivery,
body[data-night] .brand-band-slide .btn-delivery {
    background: linear-gradient(135deg, #F4B942, #E8A93A);
    color: #1F3A5F;
}

/* ============================================================
   T-MALL-NIGHT-AUDIT: 夜间模式表面色补全
   根因: 夜间是 body[data-night] (localStorage 切换, 独立于系统),
   但 glass/card/cart 的深色表面色只写在 @media(prefers-color-scheme:dark)
   (系统级)。用户在浅色系统开应用夜间 → 表面仍是浅色玻璃, 而 --mall-text
   已被 body[data-night] 翻成白色 → 白字压白玻璃, 内容不可见 (只剩 emoji)。
   修复: 给这些表面补 body[data-night] 等价规则 (theme.css 最后加载,
   与 html.mall-glass-* 同特异性, 靠源码顺序取胜)。
   ============================================================ */

/* 毛玻璃卡片 (.glass-card): 详情页信息卡 / 订单卡 / 发货卡 — 夜间统一深玻璃
   T-MALL-GLASS-0913: 改走 --glass-* 变量 (更深更冷, 与 glass.css 夜间配方一致) */
body[data-night] .glass-card {
    background: var(--glass-bg-card);
    border-color: var(--glass-border-strong);
}
/* 毛玻璃胶囊 (.glass-chip): 筛选条 — 夜间深玻璃 (走变量) */
body[data-night] .glass-chip {
    background: var(--glass-bg-chip);
    border-color: var(--glass-border);
}
/* 购物车结算条 (.cart-summary) — 夜间深玻璃 (走变量) */
body[data-night] .cart-summary {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border);
}
/* T-MALL-GLASS-0913: 新增玻璃表面夜间配方 (与 glass.css body[data-night] 互为备份,
   theme.css 后加载靠源码顺序取胜; 日夜 0.3s 过渡由 glass.css 各元素 transition 提供) */
body[data-night] .detail-info-card {
    background: var(--glass-bg-card);
    border-color: var(--glass-border);
}
body[data-night] .login-modal {
    background: var(--glass-bg-modal);
    border-color: var(--glass-border);
}

/* 卡片封面占位渐变 (.card-image / .card-cover-placeholder) — 夜间加深, 与深色卡底协调 */
body[data-night] .product-card .card-image,
body[data-night] .card-cover-placeholder {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.14), rgba(120, 84, 255, 0.16));
}
/* 年级标签 (.grade-chip) — 夜间提亮, 深底可读 (原 #007AFF 深蓝字在深卡上发暗) */
body[data-night] .grade-chip { background: rgba(10, 132, 255, 0.24); color: #0A84FF; } /* T-MALL-VISUAL-1012: 夜间 alpha 同步 +0.06 一档 */
/* 游客购物车提示 (.guest-cart-hint) — 夜间提亮 (原 #0969da 深蓝在深底发暗) */
body[data-night] .guest-cart-hint {
    background: rgba(10, 132, 255, 0.14);
    border-color: rgba(10, 132, 255, 0.3);
    color: #58a6ff;
}
body[data-night] .guest-cart-hint a { color: #58a6ff; }
/* 骨架屏 (.skeleton-block) — 夜间深色块 + 弱高光 shimmer */
body[data-night] .skeleton-block { background: rgba(120, 120, 128, 0.16); }
body[data-night] .skeleton-block::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}
/* 发货/下载 hero 副标题 (.delivery-hero__sub) — 夜间浅字 (标题走 --brand-navy 已覆盖) */
body[data-night] .delivery-hero__sub { color: rgba(253, 248, 240, 0.75); }
/* T-MALL-ORDERS-UI-0918: sunrise hero 夜间深色渐变变体 (替代白天暖橙渐变),
   与深色 UI 融合不再违和; 白字在深底上对比度更高 (WCAG AA)。
   特异性 (0,2,1) 高于 glass.css .delivery-hero__bg--sunrise (0,2,0) → 夜间生效。 */
body[data-night] .delivery-hero__bg--sunrise {
    background-image: linear-gradient(135deg, #4a2c17 0%, #3a2140 55%, #241a2e 100%);
}

/* ============================================================
   T-MALL-NIGHT-AUDIT: 统一 Toast (原 5 处 JS 内联硬编码色 → CSS 类)
   实心胶囊 + 白字, 亮/夜两态都可读 (背景不依赖页面底色)。
   ============================================================ */
.mall-toast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    padding: 10px 24px; border-radius: 12px;
    font-size: 14px; font-weight: 500; z-index: 9999;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease;
    max-width: calc(100vw - 32px); text-align: center;
}
.mall-toast--success { background: rgba(52, 199, 89, 0.95); color: #fff; }
.mall-toast--error   { background: rgba(255, 59, 48, 0.95); color: #fff; }
.mall-toast--neutral { background: rgba(0, 0, 0, 0.82); color: #fff; }

/* 已获取"更新时间"提示条 (detail_core.js 注入) — 亮/夜两态可读 */
.purchase-update-hint {
    padding: 8px 16px; margin: 8px 0; border-radius: 12px;
    font-size: 13px; display: flex; align-items: center; gap: 6px;
    background: rgba(52, 199, 89, 0.12); color: #1a7f37;
}
body[data-night] .purchase-update-hint {
    background: rgba(48, 209, 88, 0.14); color: #30D158;
}

/* ---- 全站黑白: 品牌色变量映射灰阶 (节日悼念等全站降彩) ---- */
body[data-theme="mono"] {
    --mall-primary: #57606a;
    --mall-primary-dark: #424a53;
    --mall-secondary: #6e7681;
    --mall-accent: #6e7681;
    --brand-gold: #8b949e;
    --brand-gold-deep: #6e7681;
    --brand-navy: #24292f;
    --brand-coral: #8b949e;
    --brand-green: #6e7681;
    /* T-MALL-NIGHT-01: 语义色令牌同步灰阶 */
    --mall-danger: #424a53;
    --mall-muted: #6e7681;
    --mall-fg-muted: #6e7681;
    /* T-MALL-VIP-AVATAR-01: VIP 头像色板同步灰阶 (全站黑白/节日悼念: 环/徽章/预警全部降彩) */
    --vip-ring-silver: #6e7681;
    --vip-ring-gold: #6e7681;
    --vip-ring-purple: #57606a;
    --vip-ring-gold-deep: #6e7681;
    --vip-tier-bronze: #8b949e;
    --vip-tier-silver: #8b949e;
    --vip-tier-gold: #8b949e;
    --vip-tier-moon: #8b949e;
    --vip-tier-star: #8b949e;
    --vip-warn-bg: #57606a;
    --vip-expired-bg: #6e7681;
    /* Primer 品牌色 → 灰阶 */
    --fgColor-accent: #57606a;
    --bgColor-attention-emphasis: #57606a;
    --bgColor-danger-emphasis: #424a53;
    --bgColor-success-emphasis: #57606a;
    --fgColor-danger: #424a53;
    --fgColor-success: #424a53;
    --fgColor-attention: #57606a;
}
/* 黑白态: 默认 banner 渐变 / logo / 选中态 同步降彩 */
body[data-theme="mono"] #mall-banner .banner-default {
    background: linear-gradient(135deg, #6e7681 0%, #424a53 100%);
}
body[data-theme="mono"] .site-logo svg rect { fill: #57606a; }
body[data-theme="mono"] .nav-link.color-fg-accent { background: rgba(87, 96, 106, 0.12); }
body[data-theme="mono"] #search-input:focus {
    border-color: var(--mall-primary);
    box-shadow: 0 0 0 3px rgba(87, 96, 106, 0.18);
}
/* T-MALL-CARD-UX: 搜索框容器 (黑白态) — 灰阶边框/按钮, 与全站降彩一致 */
body[data-theme="mono"] .search-box {
    border-color: #57606a;
}
body[data-theme="mono"] .search-box button {
    background: #eaeef2;
    color: #57606a;
}
body[data-theme="mono"] .search-box button:hover {
    background: #d0d7de;
    color: #424a53;
}
/* 黑白+夜间叠加: 夜间深底优先 */
body[data-night][data-theme="mono"] .search-box {
    background: var(--mall-card-bg);
    border-color: rgba(139, 148, 158, 0.5);
}
/* 黑白态: banner 图片 / 品牌背景图 灰度滤镜 (可选增强) */
body[data-theme="mono"] .banner-slide img,
body[data-theme="mono"] .brand-band__bg {
    filter: grayscale(1);
}
/* T-MALL-NIGHT-AUDIT: 黑白态年级标签降彩 (原 #007AFF 蓝色在 mono 下不降彩) */
body[data-theme="mono"] .grade-chip { background: rgba(87, 96, 106, 0.12); color: #57606a; }

/* ---- 黑白 + 夜间叠加: 夜间深色底优先, 品牌色保持灰阶 ---- */
body[data-night][data-theme="mono"] {
    --mall-primary: #8b949e;
    --mall-primary-dark: #6e7681;
    --mall-accent: #8b949e;
    --brand-gold: #8b949e;
    --brand-coral: #8b949e;
    --brand-green: #8b949e;
    --brand-navy: #e6edf3;
    --fgColor-accent: #8b949e;
    --bgColor-attention-emphasis: #6e7681;
    --bgColor-danger-emphasis: #6e7681;
    --bgColor-success-emphasis: #6e7681;
    --fgColor-danger: #8b949e;
    --fgColor-success: #8b949e;
}
body[data-night][data-theme="mono"] .site-logo svg rect { fill: #8b949e; }
body[data-night][data-theme="mono"] #mall-banner .banner-default {
    background: linear-gradient(135deg, #6e7681 0%, #2d333b 100%);
}

/* ---- 夜间切换按钮 (对齐管理端 header-icon-btn 风格) ---- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    background: none;
    border: 1px solid var(--mall-border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--mall-text-muted);
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.15s var(--mall-ease), border-color 0.15s var(--mall-ease), color 0.15s var(--mall-ease);
}
.theme-toggle-btn:hover {
    background: var(--mall-bg);
    border-color: var(--mall-primary);
    color: var(--mall-primary);
}

/* ============================================================
   T-ADMIN-STORE-SETUP: 商城 Logo 图片 + 全站促销横幅条
   ============================================================ */

/* 后台配置 Logo (app_settings.store_logo) — 替换默认爱心占位符, 高度对齐 32px */
.site-logo-img {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}

/* 全站促销横幅条 (header 下方, 所有页面): 有横幅图则铺图, 否则品牌色纯色条 + 文案 */
.promo-bar {
    width: 100%;
    background: var(--mall-primary);
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
}
.promo-bar__label {
    display: inline-block;
    padding: 8px 16px;
    letter-spacing: 0.5px;
}
.promo-bar__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: cover;
}
/* 黑白态: 促销条同步降彩 */
body[data-theme="mono"] .promo-bar {
    background: #57606a;
}
body[data-theme="mono"] .promo-bar__img {
    filter: grayscale(1);
}
/* 夜间态: 促销条深色底, 文案保持可读 */
body[data-night] .promo-bar {
    /* T-MALL-THEMECOMPAT-0924: 跟随主题色 (原硬编码绿 #28CD4F); 夜间 --mall-primary-dark=日间原色, 深底白字达标 */
    background: var(--mall-primary-dark);
}
body[data-night][data-theme="mono"] .promo-bar {
    background: #6e7681;
}

/* T-MALL-PROMO: 全站促销小徽章 — header 内 APP 名「幼师藏宝箱」前的小胶囊 (12px 字/圆角/品牌色) */
.promo-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mall-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    vertical-align: middle;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
/* 黑白态: 徽章同步降彩 */
body[data-theme="mono"] .promo-badge {
    background: #57606a;
}
/* 夜间态: 徽章提亮保持可读 */
body[data-night] .promo-badge {
    /* T-MALL-THEMECOMPAT-0924: 跟随主题色 (原硬编码绿 #28CD4F) */
    background: var(--mall-primary-dark);
}
body[data-night][data-theme="mono"] .promo-badge {
    background: #6e7681;
}

/* T-MALL-ANIMATION: 夜间模式涟漪色 (亮绿, 匹配夜间主色, 深底可读) */
body[data-night] {
    --ripple-color: rgba(255, 159, 10, 0.28);
}

/* ============================================================
   T-BUG-ANIM-0922: 主题切换动画 (日/夜)
   1) 平滑过渡: 切换瞬间 body 加 .theme-switching (JS 触发, 600ms 后移除),
      期间给关键表面/文字加 background-color/color/border-color 0.4s 过渡,
      避免整站颜色"硬切"。只过渡颜色类属性 (不触发 reflow, 仅 repaint)。
   2) 一次性 radial 光晕扩散: 从屏幕中心向外淡出的柔光 (transform+opacity,
      GPU 合成), 覆盖切换的 600ms, 强化"主题已切换"的感知。
   3) prefers-reduced-motion: 全部禁用 (直接硬切, 无光晕)。
   注意: 过渡只挂在 .theme-switching 期间, 平时零开销 (无 transition 监听)。
   ============================================================ */
body.theme-switching,
body.theme-switching .site-header,
body.theme-switching .bottom-nav,
body.theme-switching .category-drawer,
body.theme-switching .glass-card,
body.theme-switching .glass-chip,
body.theme-switching .product-card,
body.theme-switching .article-card,
body.theme-switching .detail-info-card,
body.theme-switching .cart-summary,
body.theme-switching .search-box,
body.theme-switching .skeleton-block {
    transition: background-color 0.4s ease, color 0.4s ease,
                border-color 0.4s ease, box-shadow 0.4s ease;
}
/* radial 光晕层: 由 JS 注入 .theme-burst 元素 (fixed 全屏, pointer-events:none) */
@keyframes theme-burst {
    from { opacity: 0.9; transform: scale(0); }
    to   { opacity: 0;   transform: scale(1); }
}
.theme-burst {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: radial-gradient(circle at 50% 40%,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.12) 38%,
        transparent 70%);
    transform: scale(0);
    transform-origin: 50% 40%;
    animation: theme-burst 0.6s var(--mall-ease, cubic-bezier(0.25, 0.1, 0.25, 1)) forwards;
}
/* 夜间切换时光晕用冷色调 (白晕在纯黑底上偏脏, 冷蓝更贴合夜间 UI) */
body[data-night] .theme-burst {
    background: radial-gradient(circle at 50% 40%,
        rgba(120, 170, 255, 0.22) 0%,
        rgba(120, 170, 255, 0.08) 38%,
        transparent 70%);
}
/* mono 黑白态: 光晕降彩 (灰晕, 与全站降彩一致) */
body[data-theme="mono"] .theme-burst {
    background: radial-gradient(circle at 50% 40%,
        rgba(139, 148, 158, 0.25) 0%,
        rgba(139, 148, 158, 0.10) 38%,
        transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
    body.theme-switching,
    body.theme-switching .site-header,
    body.theme-switching .bottom-nav,
    body.theme-switching .category-drawer,
    body.theme-switching .glass-card,
    body.theme-switching .glass-chip,
    body.theme-switching .product-card,
    body.theme-switching .article-card,
    body.theme-switching .detail-info-card,
    body.theme-switching .cart-summary,
    body.theme-switching .search-box,
    body.theme-switching .skeleton-block {
        transition: none;
    }
    .theme-burst { display: none; }
}

/* ============================================================
   T-IMG-0912-13: 静态页液态玻璃背景 — 夜间/黑白态适配
   liquid.css 第 7 节: .static-page__liquid-bg (SVG 液滴 + 漂移液滴)
   + .static-page__hero 玻璃面板。亮态白色高光在夜间深底 (#000) 上
   会发灰发脏 → 夜间翻成深玻璃 (与 T-MALL-NIGHT-AUDIT .glass-card 同配方);
   SVG 液滴颜色走 --mall-primary/--mall-accent 变量已自动换夜间绿/橙,
   这里仅降透明度 (深底上亮色液滴 0.5 太刺眼); 黑白态全站降彩 → 灰度。
   ============================================================ */
body[data-night] .static-page__liquid-svg {
    opacity: 0.42;
}
body[data-night] .static-page__hero {
    background: linear-gradient(160deg, rgba(44, 44, 46, 0.55) 0%, rgba(28, 28, 30, 0.25) 42%, rgba(44, 44, 46, 0.45) 100%);
    border-color: rgba(84, 84, 88, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 24px rgba(0, 0, 0, 0.45);
}
/* 黑白态: 背景液滴 + 玻璃面板同步降彩 (与 .promo-bar__img 灰度处理一致) */
body[data-theme="mono"] .static-page__liquid-bg {
    filter: grayscale(1);
}
body[data-theme="mono"] .static-page__hero {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.12) 100%);
    border-color: rgba(87, 96, 106, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 24px rgba(66, 74, 83, 0.12);
}

/* ============================================================
   T-DETAIL-PREV-0922: 详情页预览区 CTA 按钮 — 夜间模式颜色同步
   按钮底色走 --mall-primary (夜间绿), 文字深底反白; 黑白态同步降彩。
   T-DETAIL-PREVIEW-0930: 原 .preview-watermark 夜间/mono 分支已随水印整体移除。
   ============================================================ */
body[data-night] .preview-cta-row .btn-preview-cta {
    background: var(--mall-primary);
    color: #000000;
}
body[data-night] .preview-cta-row .btn-preview-cta:hover {
    /* T-MALL-BTN-HOVER-0927: 原 --mall-primary-dark 配黑字仅 2.11:1 不达标, 改深底 hover + 白字;
       T-MALL-WARM-01: 深绿 #1a7f37 → 深橙 #C86E00 (白字 5.18:1 达标), 与日间 hover 同色 */
    background: #C86E00;
    color: #fff;
}
/* 黑白态: CTA 按钮降彩 (与全站 mono 一致) */
body[data-theme="mono"] .preview-cta-row .btn-preview-cta {
    filter: grayscale(1);
}

/* ============================================================
   T-MALL-VISUAL-Q2-1008: 夜间模式视觉层次补强 (Q2 全站对比度审计)
   1) 顶部夜间切换按钮: 原 background:none + --mall-border (rgba(84,84,88,0.36))
      压夜间 header 玻璃 rgba(20,25,40,0.72) → 按钮几乎隐形。补深卡片底 +
      提亮边框 (--glass-border-strong 0.18), 图标色 --mall-text-muted 不变。
   2) 分类抽屉夜间: 边框 0.12→0.18 提亮边界; hover/计数胶囊原走 --mall-bg
      (夜间=#000, 压 rgba(20,25,40,0.72) 抽屉反而更黑/完全不可见) → 改走
      --mall-bg-hover (#3A3A3C, 比抽屉亮一档)。
   全部走 --mall-* / --glass-* 变量, 零新增硬编码色值。
   ============================================================ */
body[data-night] .theme-toggle-btn {
    background: var(--mall-card-bg);
    border-color: var(--glass-border-strong);
}
body[data-night] .category-drawer {
    border-color: var(--glass-border-strong);
}
body[data-night] .category-drawer__item:hover {
    background: var(--mall-bg-hover);
}
body[data-night] .category-drawer__count {
    background: var(--mall-bg-hover);
    color: var(--mall-text-muted);
}

/* T-MALL7-02: primer.min.css 全局 a:hover { text-decoration: underline } 是全站 hover 下划线唯一元凶。
   本规则特异性 (0,1,1) 与 primer 相同, theme.css 在 primer 之后加载 → 后者胜, 全站 hover 不再出下划线。
   刻意下划线例外 (layout.css/order.css/product.css/cart.css 中带具体选择器的 underline, 特异性更高) 不受影响:
   .static-page__card a:hover / .static-page__foot a:hover / .faq-item__inner a:hover /
   .site-footer__links a:hover / .dl-download__filelink / .login-modal-footer a:hover / .guest-cart-hint a:hover */
a:hover { text-decoration: none; }

/* ============================================================
   T-MALL-NIGHT-01 (2026-10-12): 支付页/订单弹窗夜间模式对比度修复
   1) 根因A: payment.php/orders.php 内联 var(--mall-danger,#cf222e) /
      var(--mall-muted,#8b949e) / var(--mall-fg-muted,#656d76) 此前全站
      未定义 → 永远回退日间硬编码, 夜间深底 #cf222e 仅 3.18:1。
      令牌日/夜值已在 layout.css :root + 系统深色块、本文件
      body[data-night]/mono 块补齐 (夜间 danger #f85149 = 5.08:1)。
   2) 根因B: 订单状态徽章/待支付说明/会员提示等 #9a6700 琥珀、#1a7f37
      深绿、#0969da 深蓝、#cf222e 深红在夜间深底 (#1C1C1E /
      rgba(20,25,40,.72)) 上 3.2~3.5:1 不达标 → body[data-night] 覆写为
      Primer 深色对应色: 琥珀 #e3b341 (8.74:1) / 绿 #30d158 (8.42:1) /
      蓝 #58a6ff (6.74:1) / 红 #f85149 (5.08:1), 全部 WCAG AA ≥4.5:1。
   3) 根因C: mall.js:908-920 注入的额度弹窗 .mqm-* 全站 CSS 无定义
      (grep 0 命中, 仅借 .login-modal 外壳) → 补完整定义, 颜色全走
      --mall-* 变量, 夜间自动切换。
   mono 黑白态: body filter:grayscale(1) 整体降彩, 无需单独分支。
   ============================================================ */

/* ---- 额度弹窗 (.mqm-*) 完整定义 (日间; 夜间走变量自动切换) ---- */
.quota-modal { max-width: 420px; }
.mqm-head { text-align: center; margin-bottom: 18px; padding-top: 4px; }
.mqm-icon { font-size: 40px; line-height: 1.2; margin-bottom: 8px; }
.mqm-title { font-size: 18px; font-weight: 700; color: var(--mall-text); }
.mqm-sub { font-size: 13px; color: var(--mall-text-muted); margin-top: 6px; }
.mqm-body { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.mqm-path {
    padding: 14px; border-radius: var(--mall-radius-sm);
    background: var(--mall-bg-secondary, #f9fafb);
    border: 1px solid var(--mall-border, #d0d7de);
}
.mqm-path-title { font-size: 14px; font-weight: 700; color: var(--mall-text); margin-bottom: 6px; }
.mqm-path-desc { font-size: 13px; color: var(--mall-text-muted); line-height: 1.6; margin-bottom: 8px; }
.mqm-path-desc b { color: var(--mall-text); }
.mqm-path-hint { font-size: 12px; color: var(--mall-accent); margin-bottom: 10px; }
.mqm-path .btn { display: block; text-align: center; }
/* 夜间: 弹窗路径卡走次级表面, 与深色弹窗底 (rgba(20,25,40,.82)) 分层 */
body[data-night] .mqm-path { background: var(--mall-bg-secondary); border-color: var(--glass-border); }

/* ---- 订单状态徽章 (order.css .status-*) ---- */
body[data-night] .status-pending { color: #e3b341; }
body[data-night] .status-paid { color: #30d158; }
body[data-night] .status-shipped,
body[data-night] .status-downloading,
body[data-night] .status-delivered { color: #58a6ff; }
body[data-night] .status-cancelled { color: #f85149; }

/* ---- 支付页/订单: 琥珀提示区 (member-hint / order-pay-note) + 红色告警区 ---- */
body[data-night] .member-hint,
body[data-night] .order-pay-note {
    background: rgba(255, 204, 0, 0.10);
    border-color: rgba(255, 204, 0, 0.28);
    color: #e3b341;
}
body[data-night] .download-expired-note,
body[data-night] .login-error {
    background: rgba(255, 69, 58, 0.12);
    color: #f85149;
}
body[data-night] .login-success {
    background: rgba(48, 209, 88, 0.12);
    color: #30d158;
}

/* ---- 详情页标签 / 套餐额度徽章 / 下载端角标 ---- */
body[data-night] .tag-member { color: #e3b341; border-color: rgba(255, 204, 0, 0.35); }
body[data-night] .tag-free { color: #30d158; }
body[data-night] .plan-quota { background: rgba(255, 204, 0, 0.14); color: #e3b341; }
body[data-night] .dl-client__badge--live { color: #30d158; }
body[data-night] .dl-client__badge--adapting { color: #e3b341; }

/* ---- 危险操作文字 (下拉删除 / 卡片点赞收藏计数) ---- */
body[data-night] .dropdown-item--danger { color: #f85149; }
body[data-night] .card-like,
body[data-night] .card-fav-count.is-fav-self { color: #f85149; }

/* ---- 页面级内联 style 块 (login/register/forgot/feedbacks/profile/membership/points/settings) ----
   这些页的内联 <style> 在 theme.css 之后加载, 但本组规则特异性 (0,2,1)/(0,3,1)
   高于页内类选择器 (0,1,0)/(0,2,0) → 夜间稳定覆盖。 */
body[data-night] .feedback-result.success { background: rgba(48, 209, 88, 0.12); color: #30d158; }
body[data-night] .feedback-result.error { background: rgba(255, 69, 58, 0.12); color: #f85149; }
body[data-night] .profile-reminder-item,
body[data-night] .member-reminder-item { background: rgba(255, 69, 58, 0.06); border-color: rgba(255, 69, 58, 0.22); }
body[data-night] .profile-reminder-item.rn-urgent,
body[data-night] .member-reminder-item.rn-urgent { background: rgba(255, 69, 58, 0.10); border-color: rgba(248, 81, 73, 0.5); }
body[data-night] .profile-reminder-item.rn-level,
body[data-night] .member-reminder-item.rn-level { background: rgba(210, 153, 34, 0.10); border-color: rgba(212, 167, 44, 0.5); }
body[data-night] .points-tx-change.minus { color: #f85149; }
body[data-night] .points-tx-change.plus { color: #30d158; }
body[data-night] .points-coupon-status.expired { color: #f85149; }
body[data-night] .points-coupon-status.unused { color: #30d158; }
body[data-night] .set-device-del,
body[data-night] .set-danger-title { color: #f85149; }
body[data-night] .set-device-del:hover { background: rgba(255, 69, 58, 0.12); }


/* ===== source: bg_layer.css (md5 f4d7a35d2bdf) ===== */
/* ============================================================
   幼师藏宝箱 · 商城 — bg_layer.css (T-MALL-BG-0913 全站动态背景层)
   职责:
     1) #mall-bg-canvas — 固定定位 canvas 背景层 (z-index:-1, pointer-events:none)
        由 bg_parallax.js 创建并填充粒子; 此处只声明定位/层级/不遮挡交互。
     2) body.bg-static — 降级静态渐变 (prefers-reduced-motion / canvas 不支持 / 低端机)
        日间: 暖白→淡黄; 夜间: 深灰→暗蓝。
   层级原理:
     canvas 为 position:fixed + z-index:-1, 参与根堆叠上下文的「负 z-index 阶段」,
     绘制在 body 背景 (var(--mall-bg) 传播到画布) 之上、所有正文内容之下 →
     背景可见且不遮挡任何交互 (pointer-events:none 双保险)。
   响应式铁律: 覆盖 320/375/768/1024 断点, 无固定宽度; canvas 尺寸由 JS resize 监听自适应。
   降级铁律: 无 JS / 不支持 canvas 时 body.bg-static 提供静态渐变, 页面永不空白。
   ============================================================ */

/* ---- 动态背景 canvas 层 (bg_parallax.js 创建) ---- */
#mall-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;            /* 负 z-index: 在 body 背景之上, 内容之下 */
    pointer-events: none;   /* 永不拦截点击/滚动/触摸 */
    display: block;
    /* 视差位移由 JS 用 transform: translate3d 写入 (GPU 合成, 不触发重排) */
    will-change: transform;
}

/* ---- 降级: 静态渐变背景 (无动画) ----
   日间 (默认): 暖白 → 淡黄, 顶部略暖, 向下渐淡。
   夜间 (body[data-night]): 深灰 → 暗蓝, 与 Apple 深色基调一致。 */
body.bg-static {
    background: linear-gradient(180deg, #FFFDF7 0%, #FDF3D8 55%, #F7F2E6 100%) !important;
}
body[data-night].bg-static {
    background: linear-gradient(180deg, #1C1C1E 0%, #0E1526 60%, #0A1020 100%) !important;
}

/* ---- 响应式断点 (320/375/768/1024) ----
   canvas 为 100%/100% 视口尺寸, 无固定宽度; 此处按断点微调降级渐变的视觉密度,
   并保证小屏下渐变方向不产生横向溢出。 */
@media (max-width: 375px) {
    /* 手机竖屏: 渐变纵向更柔和, 避免小屏顶部过亮 */
    body.bg-static {
        background: linear-gradient(180deg, #FFFDF7 0%, #FCF1D4 60%, #F6F0E3 100%) !important;
    }
    body[data-night].bg-static {
        background: linear-gradient(180deg, #1C1C1E 0%, #0D1424 65%, #090E1C 100%) !important;
    }
}
@media (min-width: 376px) and (max-width: 767px) {
    /* 平板竖屏: 默认渐变即可, 保持 */
}
@media (min-width: 768px) and (max-width: 1023px) {
    /* 平板横屏: 默认渐变即可, 保持 */
}
@media (min-width: 1024px) {
    /* 桌面: 默认渐变即可, 保持 */
}

/* ============================================================
   T-MALL-THEME-0913 + T-FOOTER-ANIM-0915: 主题效果背景 (store_theme_bg 6 值)
   particles      canvas 粒子 (bg_parallax.js, 见本文件顶部)
   glass_flow     玻璃方块流动: 原 glass 改动画 (方块缓慢漂移 + 光晕透明度呼吸)
   gradient_breath 渐变呼吸: 原 static 改动画 (多色光晕相位缓慢循环)
   aurora         极光流动: 多色光带缓慢漂移 (blur 柔化)
   starfield      星空粒子: 细小光点闪烁 + 缓慢平移 (无缝循环)
   colorful_balloons 多彩气球: 7 气球底部上浮 + 摇摆 (T-BGANIM-0922)
   colorful_stars  多彩五角星: 9 星漂移 + 旋转 + 呼吸 (T-BGANIM-0922)
   collision_stars 自动碰撞黄色五角星: canvas + JS 物理 (bg_collision_stars.js, T-BGANIM-0922)
   solid          纯色背景: 无动画, 仅纯色 (与主题色混搭 = 动画层 + 纯色底)
   off            关闭: 无背景层, body 保持 --mall-bg 实色
   实现铁律:
     - 纯 CSS (零 JS, 首帧即正确); 动画只用 transform/opacity (GPU 合成, 不触发重排);
       color-mix() 不支持时该层透明 → 退化为纯色底, 页面正常。
     - 动画层 .mall-bg-anim 固定 z-index:-1 (与 #mall-bg-canvas 同层: body 背景之上,
       内容之下), 由 primer_header.php 按 data-bg 输出, 全站所有页面生效。
     - 主题色走 --mall-primary/--brand-gold 变量 → 换主题色自动跟随;
       mono 黑白态整层 grayscale(1); 夜间整体降透明度。
     - 降级: prefers-reduced-motion → 全部动画停 (静态层); ≤767px 移动端降级
       (极光降 blur/减速, 星空关闪烁副层, 玻璃关呼吸副层)。
   ============================================================ */

/* ---- 动画层容器 (T-ADMIN-THEME-BG-0918: SSR 全量 7 层, 默认隐藏, 按 body[data-bg] 切换) ----
   每层 .mall-bg-anim.mbg-<style> 内是一个内联 SVG (.mall-bg-svg, 内嵌 <style> CSS @keyframes)。
   默认 display:none (不 layout/不 paint → feGaussianBlur 不栅格化 → 零 GPU 开销);
   body[data-bg="<style>"] 对应层 display:block (见下方切换规则)。 */
.mall-bg-anim {
    position: fixed;
    inset: 0;
    z-index: -1;                       /* 与 #mall-bg-canvas 同层级: body 背景之上, 内容之下 */
    pointer-events: none;
    overflow: hidden;
    display: none;                     /* T-ADMIN-THEME-BG-0918: 默认隐藏, 按 data-bg 切换 */
}
/* SVG 铺满容器 (slice 缩放覆盖, 不留白边) */
.mall-bg-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* ---- data-bg 切换: 仅显示当前风格对应的 SVG 层 ---- */
body[data-bg="glass_flow"] .mbg-glass_flow,
body[data-bg="gradient_breath"] .mbg-gradient_breath,
body[data-bg="aurora"] .mbg-aurora,
body[data-bg="starfield"] .mbg-starfield,
body[data-bg="glass_blocks"] .mbg-glass_blocks,
body[data-bg="glass_bubbles"] .mbg-glass_bubbles,
body[data-bg="geometric"] .mbg-geometric,
body[data-bg="colorful_balloons"] .mbg-colorful_balloons,
body[data-bg="colorful_stars"] .mbg-colorful_stars {
    display: block;
}

/* ---- 纯色底 (solid 值 + 动画混搭的 body 底) ----
   T-FOOTER-ANIM-0915 混搭机制: 纯色底由主题色明度决定 (primer_header.php 按主题色 hex
   相对明度输出 body[data-bg-base="dark|light"], 阈值 0.35):
     深色主题色 (藏青/红/紫/深色自定义) → 深色纯色底 (「极光动画 + 深色纯色底」)
     浅色主题色 (绿/金/浅色自定义)     → 浅色纯色底
   纯色底 = 主题色 tint (color-mix), 与主题色体系一致 → 换主题色自动跟随。
   solid 值 = 仅纯色底无动画层; 7 种 SVG 动画值 = 纯色底 + SVG 动画层叠加 (混搭)。
   !important 覆盖 layout.css body 变量底; 夜间统一深底 (夜间本就是深基调)。 */
body[data-bg-base="light"][data-bg="glass_flow"],
body[data-bg-base="light"][data-bg="gradient_breath"],
body[data-bg-base="light"][data-bg="aurora"],
body[data-bg-base="light"][data-bg="starfield"],
body[data-bg-base="light"][data-bg="glass_blocks"],
body[data-bg-base="light"][data-bg="glass_bubbles"],
body[data-bg-base="light"][data-bg="geometric"],
body[data-bg-base="light"][data-bg="colorful_balloons"],
body[data-bg-base="light"][data-bg="colorful_stars"],
body[data-bg-base="light"][data-bg="collision_stars"],
body[data-bg-base="light"][data-bg="solid"] {
    background: color-mix(in srgb, var(--mall-primary) 8%, #FDF8F0) !important;
}
body[data-bg-base="dark"][data-bg="glass_flow"],
body[data-bg-base="dark"][data-bg="gradient_breath"],
body[data-bg-base="dark"][data-bg="aurora"],
body[data-bg-base="dark"][data-bg="starfield"],
body[data-bg-base="dark"][data-bg="glass_blocks"],
body[data-bg-base="dark"][data-bg="glass_bubbles"],
body[data-bg-base="dark"][data-bg="geometric"],
body[data-bg-base="dark"][data-bg="colorful_balloons"],
body[data-bg-base="dark"][data-bg="colorful_stars"],
body[data-bg-base="dark"][data-bg="collision_stars"],
body[data-bg-base="dark"][data-bg="solid"] {
    background: color-mix(in srgb, var(--mall-primary) 30%, #0B0E14) !important;
}
/* T-BG-COLLISION-1006: collision_stars 补入夜间/mono/主题底选择器 —
   canvas 星体本身夜间降透明 0.5 (bg_collision_stars.js starColors), 页面背景层
   深色化此前漏配 → 夜间切碰撞星背景时页面背景不变深色。
   5 组选择器 (bg-base light/dark + night + mono + night-mono) 与其余 9 种背景对齐。 */
body[data-night][data-bg="glass_flow"],
body[data-night][data-bg="gradient_breath"],
body[data-night][data-bg="aurora"],
body[data-night][data-bg="starfield"],
body[data-night][data-bg="glass_blocks"],
body[data-night][data-bg="glass_bubbles"],
body[data-night][data-bg="geometric"],
body[data-night][data-bg="colorful_balloons"],
body[data-night][data-bg="colorful_stars"],
body[data-night][data-bg="collision_stars"],
body[data-night][data-bg="solid"] {
    background: color-mix(in srgb, var(--mall-primary) 16%, #0B0E14) !important;
}
/* mono 黑白态: 纯色底转中性灰 (与全站黑白一致) */
body[data-theme="mono"][data-bg="glass_flow"],
body[data-theme="mono"][data-bg="gradient_breath"],
body[data-theme="mono"][data-bg="aurora"],
body[data-theme="mono"][data-bg="starfield"],
body[data-theme="mono"][data-bg="glass_blocks"],
body[data-theme="mono"][data-bg="glass_bubbles"],
body[data-theme="mono"][data-bg="geometric"],
body[data-theme="mono"][data-bg="colorful_balloons"],
body[data-theme="mono"][data-bg="colorful_stars"],
body[data-theme="mono"][data-bg="collision_stars"],
body[data-theme="mono"][data-bg="solid"] {
    background: color-mix(in srgb, #8b949e 12%, #F2F2F7) !important;
}
body[data-night][data-theme="mono"][data-bg="glass_flow"],
body[data-night][data-theme="mono"][data-bg="gradient_breath"],
body[data-night][data-theme="mono"][data-bg="aurora"],
body[data-night][data-theme="mono"][data-bg="starfield"],
body[data-night][data-theme="mono"][data-bg="glass_blocks"],
body[data-night][data-theme="mono"][data-bg="glass_bubbles"],
body[data-night][data-theme="mono"][data-bg="geometric"],
body[data-night][data-theme="mono"][data-bg="colorful_balloons"],
body[data-night][data-theme="mono"][data-bg="colorful_stars"],
body[data-night][data-theme="mono"][data-bg="collision_stars"],
body[data-night][data-theme="mono"][data-bg="solid"] {
    background: color-mix(in srgb, #8b949e 10%, #0B0E14) !important;
}

/* ---- off: 关闭 ----
   不输出任何背景层 (所有 .mall-bg-anim 默认 display:none, 粒子 JS 不加载),
   body 保持 --mall-bg 实色 (layout.css 默认)。此处无需规则, 仅留档说明。 */

/* ---- 状态覆盖: 夜间降透明度 / mono 整层灰阶 (T-ADMIN-THEME-BG-0918: 容器级, 覆盖全部 7 SVG 层) ----
   各 SVG 内嵌 CSS 已做元素级夜间/mono 适配 (星色/网格色/面板降透明); 此处容器级再统一
   降整体强度 (夜间 opacity 0.75) / 整层灰阶 (mono), 与旧 .mall-bg-anim__layer 同基调。
   仅作用于当前可见层 (其余 display:none 无影响)。 */
body[data-night] .mall-bg-anim .mall-bg-svg { opacity: 0.75; }
body[data-theme="mono"] .mall-bg-anim .mall-bg-svg { filter: grayscale(1); }
/* T-THEME-NIGHT-0916: particles 夜间 — canvas 透明, 垫在 body --mall-bg (夜间 #000) 之上;
   粒子配色由 bg_parallax.js 切夜间调色板 (青/紫), 此处 CSS 再降整体萤光强度 20%
   (亮青/紫萤光在纯黑底上偏刺眼, 与动画层 0.75 降透明同基调); mono+夜间组合同样生效。 */
body[data-night] #mall-bg-canvas { opacity: 0.8; }

/* ---- 降级铁律: 系统减弱动效 → 全部动画停 (保留静态层, 页面正常) ----
   T-ADMIN-THEME-BG-0918: 各 SVG 内嵌 CSS 已含 prefers-reduced-motion 规则 (元素级);
   此处容器级兜底 — 停所有 SVG 内动画元素 (双保险, 防个别元素漏配)。 */
@media (prefers-reduced-motion: reduce) {
    .mall-bg-anim .mall-bg-svg * { animation: none !important; }
}

/* ---- 移动端降级 (≤767px): 降复杂度保流畅 (T-ADMIN-THEME-BG-0918: 容器级降透明, 省合成) ---- */
@media (max-width: 767px) {
    /* 极光: 降整体强度 (feGaussianBlur 栅格面积大, 小屏降透明省合成开销) */
    body[data-bg="aurora"] .mall-bg-anim .mall-bg-svg { opacity: 0.7; }
    /* 星空: 降整体强度 (星点密集, 小屏降透明) */
    body[data-bg="starfield"] .mall-bg-anim .mall-bg-svg { opacity: 0.7; }
    /* 玻璃方块/圆形: 降整体强度 (元素多, 小屏降透明) */
    body[data-bg="glass_blocks"] .mall-bg-anim .mall-bg-svg,
    body[data-bg="glass_bubbles"] .mall-bg-anim .mall-bg-svg { opacity: 0.7; }
    /* T-BGANIM-0922: 多彩气球/五角星: 降整体强度 (小屏降透明省合成) */
    body[data-bg="colorful_balloons"] .mall-bg-anim .mall-bg-svg,
    body[data-bg="colorful_stars"] .mall-bg-anim .mall-bg-svg { opacity: 0.7; }
    /* T-BG-SVG-FIX-0930: 两新层加了 CSS blur (星 4px / 光斑 10px) → 栅格化面积增加,
       小屏 (≤767px) 降 blur 半径 (不是只降 opacity): 直接覆盖内嵌 CSS 的 filter 值。
       静态层 (prefers-reduced-motion) 仍保留 blur 观感 (此处只降半径, 不清零)。 */
    body[data-bg="colorful_stars"] .mbg-colorful_stars .cstar { filter: blur(2px) !important; }
    body[data-bg="colorful_balloons"] .mbg-colorful_balloons .bal-balloon { filter: blur(5px) !important; }
    /* mono 态在移动端: 保持 blur+grayscale 合并书写 (陷阱 1: 同一 filter 属性不可拆两条声明) */
    body[data-theme="mono"][data-bg="colorful_stars"] .mbg-colorful_stars .cstar { filter: blur(2px) grayscale(1) !important; }
    body[data-theme="mono"][data-bg="colorful_balloons"] .mbg-colorful_balloons .bal-balloon { filter: blur(5px) grayscale(1) !important; }
}


/* ===== source: lightbox.css (md5 708f0929d201) ===== */
/* ============================================================
   幼师藏宝箱 · 商城 — lightbox.css (T-MALL-LIGHTBOX-0913)
   笔记图片灯箱: 点击放大 + 左右切换 + 夜间对比度
   依赖: layout.css (--mall-radius / --mall-ease) / theme.css (body[data-night])
   层级: z-index 9999 — 高于登录弹窗(1000)/底导(200)/分类抽屉(50), 全站最顶层。
   降级: 灯箱为纯 DOM + CSS, 无 backdrop-filter/canvas; 老浏览器 display:flex
         不支持时回退为 block (图片仍居中, 见 .lightbox-overlay 兜底)。
   ============================================================ */

/* ---- 灯箱遮罩层 (fixed inset:0, 背景 rgba(0,0,0,0.92)) ---- */
.lightbox-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s var(--mall-ease);
    -webkit-tap-highlight-color: transparent;
}
.lightbox-overlay.show { display: flex; opacity: 1; animation: lightboxFadeIn 0.2s var(--mall-ease); }
@keyframes lightboxFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- 触发图片 (详情页预览图/封面图): 手型光标提示可点击放大 ---- */
img[data-lightbox] { cursor: zoom-in; }

/* ---- 当前图片 (居中, object-fit:contain) ---- */
.lightbox-img {
    max-width: 90vw;
    /* T-MODAL-DVH-1013: vh→min(vh,dvh) — 移动端地址栏弹出时 dvh 跟随实际视口, 防图片顶出窗口 */
    max-height: min(85vh, 85dvh);
    overscroll-behavior: contain;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: var(--mall-radius);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    cursor: zoom-out;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---- 左右切换按钮 (◀ ▶, 左右两侧垂直居中, 48px 触控区, hover 0.6→1) ---- */
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff; border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s var(--mall-ease), background 0.2s var(--mall-ease);
    z-index: 2;
    padding: 0;
}
.lightbox-nav:hover, .lightbox-nav:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.24); }
.lightbox-nav:active { opacity: 1; }
.lightbox-nav--prev { left: 16px; }
.lightbox-nav--next { right: 16px; }

/* ---- 关闭按钮 (右上角) ---- */
.lightbox-close {
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff; border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 26px; line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s var(--mall-ease), background 0.2s var(--mall-ease);
    z-index: 2;
    padding: 0;
}
.lightbox-close:hover, .lightbox-close:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.24); }

/* ---- 索引指示器 "3/8" (底部居中) ---- */
.lightbox-counter {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px; font-weight: 600;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 14px; border-radius: 20px;
    letter-spacing: 1px;
    z-index: 2;
    pointer-events: none;
}

/* ---- 加载态 spinner (图片加载中显示) ---- */
.lightbox-spinner {
    position: absolute; top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lightboxSpin 0.8s linear infinite;
    display: none;
    z-index: 1;
    pointer-events: none;
}
@keyframes lightboxSpin { to { transform: rotate(360deg); } }

/* ---- 加载失败占位文字 (降级) ---- */
.lightbox-error {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px; text-align: center; line-height: 1.8;
    display: none;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   夜间模式 (body[data-night]) — 背景加深 + 图片对比度提升
   背景 0.92 → 0.95; 图片 contrast(1.1) brightness(1.05)
   ============================================================ */
body[data-night] .lightbox-overlay { background: rgba(0, 0, 0, 0.95); }
body[data-night] .lightbox-img { filter: contrast(1.1) brightness(1.05); }
body[data-night] .lightbox-nav,
body[data-night] .lightbox-close {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
}

/* ============================================================
   响应式断点 (320 / 375 / 768 / 1024) — 移动端按钮缩小(40px), 图片占满宽度
   ============================================================ */
/* ≤375px (主流手机): 按钮 40px, 图片占满宽度, 导航按钮贴边 */
@media (max-width: 375px) {
    .lightbox-img { max-width: 100vw; max-height: min(80vh, 80dvh); border-radius: 0; }
    .lightbox-nav { width: 40px; height: 40px; font-size: 15px; }
    .lightbox-nav--prev { left: 8px; }
    .lightbox-nav--next { right: 8px; }
    .lightbox-close { width: 40px; height: 40px; top: 12px; right: 12px; font-size: 24px; }
    .lightbox-counter { bottom: 14px; font-size: 13px; }
}
/* ≤320px (小屏手机): 进一步收紧, 导航按钮半透明悬浮避免遮挡图片 */
@media (max-width: 320px) {
    .lightbox-nav { width: 38px; height: 38px; font-size: 14px; background: rgba(255, 255, 255, 0.08); }
    .lightbox-nav--prev { left: 4px; }
    .lightbox-nav--next { right: 4px; }
    .lightbox-img { max-height: min(78vh, 78dvh); }
}
/* 376-767px (大屏手机/小平板): 按钮 44px, 图片 94vw */
@media (min-width: 376px) and (max-width: 767px) {
    .lightbox-img { max-width: 94vw; }
    .lightbox-nav { width: 44px; height: 44px; }
    .lightbox-nav--prev { left: 10px; }
    .lightbox-nav--next { right: 10px; }
}
/* 768-1023px (平板): 按钮 48px, 图片 88vw */
@media (min-width: 768px) and (max-width: 1023px) {
    .lightbox-img { max-width: 88vw; }
    .lightbox-nav { width: 48px; height: 48px; }
    .lightbox-nav--prev { left: 20px; }
    .lightbox-nav--next { right: 20px; }
}
/* ≥1024px (桌面): 默认 48px 按钮, 图片 90vw (基态) */
@media (min-width: 1024px) {
    .lightbox-nav { width: 48px; height: 48px; }
    .lightbox-nav--prev { left: 24px; }
    .lightbox-nav--next { right: 24px; }
}


/* ===== source: poster.css (md5 186584b722f3) ===== */
/* ============================================================
   T-MALL-POSTER-1007: 商城宣传海报弹窗 (左预览 / 右编辑文字)
   颜色全部走商城 CSS 变量 (--mall-text / --mall-card-bg / --mall-border),
   夜间模式 (theme.css body[data-night]) 自动适配。
   ============================================================ */
/* z-index 900: 低于登录弹窗 (product.css .login-modal-overlay 1000) —
   未登录点保存时登录框须盖在海报弹窗之上 */
.poster-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 900;
    background: rgba(0, 0, 0, 0.55);
    align-items: center; justify-content: center; padding: 16px;
}
.poster-modal-overlay.show { display: flex; animation: overlayFadeIn 0.2s var(--mall-ease); }

.poster-modal {
    position: relative;
    /* T-MODAL-DVH-1013: vh→min(vh,dvh) + overscroll-behavior 防滚动穿透 */
    width: min(960px, 96vw); max-height: min(92vh, 92dvh); overflow: auto; overscroll-behavior: contain;
    background: var(--mall-card-bg, #fff); color: var(--mall-text, #1c1c1e);
    border: 1px solid var(--mall-border, rgba(60,60,67,.12));
    border-radius: var(--mall-radius-lg, 18px);
    box-shadow: var(--mall-shadow-hover, 0 10px 34px rgba(0,0,0,.14));
}
.poster-modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--mall-border, #d0d7de);
    background: var(--mall-bg, #f6f8fa); color: var(--mall-text-muted, #57606a);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.poster-modal-header { padding: 22px 26px 6px; }
.poster-modal-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--mall-text, #1c1c1e); }
.poster-modal-sub { margin: 6px 0 0; font-size: 13px; color: var(--mall-text-muted, #8e8e93); }

/* T-MALL-POSTER-UX-01 (t_posterux_1011): 弹窗双列 左 2/3 预览 / 右 1/3 文字调整
   (原 1fr:1fr; poster.php 编辑弹窗与 poster_modal.php 宣传海报弹窗共用本骨架) */
.poster-modal-body {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 22px; padding: 14px 26px 26px;
}

/* 左列: 预览 */
.poster-preview-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.poster-preview-wrap {
    position: relative; border-radius: var(--mall-radius, 14px); overflow: hidden;
    border: 1px solid var(--mall-border, #d0d7de); background: var(--mall-bg, #f6f8fa);
    display: flex; justify-content: center;
}
#poster-preview-canvas { display: block; width: 100%; height: auto; max-height: 68vh; }
.poster-preview-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--mall-text-muted, #8e8e93);
    background: var(--mall-bg, #f6f8fa);
}
.poster-preview-loading.is-hidden { display: none; }
.poster-tpl-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.poster-tpl-thumb {
    width: 56px; height: 99px; border-radius: 8px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: var(--mall-bg, #f6f8fa); padding: 0;
}
.poster-tpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-tpl-thumb.is-active { border-color: var(--mall-primary, #E07D00); }

/* 右列: 表单 */
.poster-form-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.poster-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--mall-text-muted, #8e8e93); }
.poster-field input {
    padding: 10px 12px; font-size: 14px;
    color: var(--mall-text, #1c1c1e);
    background: var(--mall-bg, #f6f8fa);
    border: 1px solid var(--mall-border, #d0d7de);
    border-radius: var(--mall-radius-sm, 10px);
    outline: none;
}
.poster-field input:focus { border-color: var(--mall-primary, #E07D00); }
.poster-form-actions { margin-top: 6px; }
.poster-save-btn { width: 100%; justify-content: center; }
.poster-save-btn.is-busy { opacity: .6; pointer-events: none; }
.poster-save-hint { margin: 8px 0 0; font-size: 12px; color: var(--mall-text-muted, #8e8e93); text-align: center; }

/* 详情页「宣传海报」入口按钮 (与 .btn-fav 同款外观; 类名独立防 bindFavorite 误绑) */
.btn-poster {
    flex: 1 1 0; min-width: 0; padding: 12px; text-align: center;
    background: var(--mall-bg, #f6f8fa); color: var(--mall-text-muted, #57606a);
    border: 1px solid var(--mall-border, #d0d7de); border-radius: 6px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1;
    cursor: pointer;
}
.btn-poster:hover { border-color: var(--mall-primary, #E07D00); color: var(--mall-primary, #E07D00); }

/* 移动端: 单列 (预览在上, 表单在下) */
@media (max-width: 767px) {
    .poster-modal-body { grid-template-columns: 1fr; }
    #poster-preview-canvas { max-height: 52vh; }
}

/* ============================================================
   T-POSTER-TEXT-1020: 自由文本图层 — 磁吸参考线 + 坐标读数
   ============================================================ */
.poster-guide {
    position: absolute; display: none; pointer-events: none; z-index: 5;
}
.poster-guide--v { top: 0; bottom: 0; width: 0; border-left: 1px dashed #ff3b30; }
.poster-guide--h { left: 0; right: 0; height: 0; border-top: 1px dashed #ff3b30; }
.poster-coord {
    margin: 0; font-size: 12px; text-align: center;
    color: var(--mall-text-muted, #8e8e93);
    font-variant-numeric: tabular-nums;
}


/* ===== source: modal.css (md5 d2772174f6ee) ===== */
/* ============================================================
   T-MALL-MODAL-01 (t_mallmodal_1012): 统一确认弹窗样式
   Primer 风格卡片 + 标题/正文/取消·确认双按钮。
   日间: primer --fgColor-* 中性色 + --mall-primary 主按钮;
   夜间: body[data-night] 走 --mall-card-bg/--mall-text/--mall-border (theme.css 已定义);
   响应式: <768px 底部抽屉式 (bottom sheet)。
   JS 本体: core/assets/js/mall/modal.js (mallConfirm/mallAlert)。
   ============================================================ */
.mall-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.mall-modal__mask {
    position: absolute; inset: 0;
    background: rgba(1, 4, 9, 0.5);
    opacity: 0; transition: opacity 0.2s ease;
}
.mall-modal--in .mall-modal__mask { opacity: 1; }

.mall-modal__card {
    position: relative;
    width: 100%; max-width: 400px;
    /* T-MODAL-DVH-1013: 长文案卡片补 max-height+滚动 — 原无上限, flex 居中上下都被裁切且无法滚动 */
    max-height: min(88vh, 88dvh); overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    border: 1px solid var(--borderColor-default, #d0d7de);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(1, 4, 9, 0.25);
    padding: 22px 22px 18px;
    opacity: 0; transform: translateY(12px) scale(0.97);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mall-modal--in .mall-modal__card { opacity: 1; transform: none; }

.mall-modal__title {
    font-size: 16px; font-weight: 600; line-height: 1.4;
    color: var(--fgColor-default, #1F2328);
    margin-bottom: 8px;
}
.mall-modal__body {
    font-size: 14px; line-height: 1.6;
    color: var(--fgColor-muted, #59636e);
    word-break: break-word;
}
.mall-modal__actions {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 20px;
}
.mall-modal__btn {
    appearance: none; cursor: pointer;
    min-width: 84px; padding: 8px 18px;
    font-size: 14px; font-weight: 500; line-height: 1.4;
    border-radius: 8px; border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.mall-modal__btn--cancel {
    background: var(--bgColor-neutral-muted, rgba(181, 184, 197, 0.16));
    border-color: var(--borderColor-default, #d0d7de);
    color: var(--fgColor-default, #1F2328);
}
.mall-modal__btn--cancel:hover { background: var(--bgColor-neutral-emphasis, rgba(135, 146, 165, 0.3)); }
.mall-modal__btn--ok {
    background: var(--mall-primary, #E07D00);
    color: #fff;
}
.mall-modal__btn--ok:hover { background: var(--mall-primary-dark, #C86E00); }
.mall-modal__btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- 夜间模式 (body[data-night], 与 theme.css 变量族一致) ---- */
body[data-night] .mall-modal__mask { background: rgba(0, 0, 0, 0.62); }
body[data-night] .mall-modal__card {
    background: var(--mall-card-bg, #1C1C1E);
    border-color: var(--mall-card-border, rgba(255, 255, 255, 0.12));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
body[data-night] .mall-modal__title { color: var(--mall-text, #FFFFFF); }
body[data-night] .mall-modal__body { color: var(--mall-text-muted, #98989D); }
body[data-night] .mall-modal__btn--cancel {
    background: var(--mall-bg-hover, #3A3A3C);
    border-color: var(--mall-border, rgba(84, 84, 88, 0.36));
    color: var(--mall-text, #FFFFFF);
}
body[data-night] .mall-modal__btn--cancel:hover { background: var(--mall-bg-secondary, #2C2C2E); }

/* ---- 黑白悼念态: 主按钮走灰阶 (与 --mall-primary mono 值一致) ---- */
body[data-theme="mono"] .mall-modal__btn--ok { background: #57606a; }
body[data-theme="mono"] .mall-modal__btn--ok:hover { background: #41464d; }

/* ---- 响应式: <768px 底部抽屉式 ---- */
@media (max-width: 767px) {
    .mall-modal { padding: 0; align-items: flex-end; }
    .mall-modal__card {
        max-width: none;
        /* T-MODAL-DVH-1013: 底部抽屉态同样限高可滚 */
        max-height: min(88vh, 88dvh); overflow-y: auto; overscroll-behavior: contain;
        border-radius: 16px 16px 0 0;
        border-left: none; border-right: none; border-bottom: none;
        padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
        transform: translateY(24px);
    }
    .mall-modal--in .mall-modal__card { transform: none; }
    .mall-modal__actions { flex-direction: column-reverse; }
    .mall-modal__btn { width: 100%; min-width: 0; padding: 11px 18px; }
}

/* toast 多行文案保留换行 (原 alert 内 \n 文案) */
.mall-toast { white-space: pre-line; }