/* ============================================================
 * 红豆商城 · 设计系统 v36 ——「多皮肤 · Multi-Skin」
 *
 * v36 起照 acg-faka（lizhipay/acg-faka）的布局与组件结构重构：
 *   · 顶栏 = 悬浮胶囊玻璃条（品牌 / 导航 / 搜索 / 皮肤 / 亮暗 / 抽屉）
 *   · 主体 = 1180 容器内的玻璃面板 .panel（panel-header 图标+标题 / panel-body）
 *   · 首页 = 公告面板 + 购买面板（分类 chip 横排 + 商品网格）
 *   · 商品卡 = 大封面 + 徽标行 + 标题 + 价格 + 库存/销量
 *
 * 皮肤系统（本次新增）：
 *   html[data-skin]  = glass（液态玻璃·acg-faka 原味）| sakura（樱雪琉璃）| neon（霓虹赛博）
 *   html[data-theme] = light | dark（跟随系统为 auto，由脚本落地成 light/dark）
 *   两者正交：任意皮肤都能配任意亮暗；选择存 localStorage，全站同步。
 *
 * 兼容：所有既有 class 名全部保留，JS / HTML 无需改动即可生效。
 * ============================================================ */

/* ==================== 1. 设计令牌 ==================== */
/* 基础层：只放「与皮肤无关」的东西——字体、圆角、动效、布局尺寸、语义色。
 * 颜色一律走下面的 [data-skin] 覆盖层，切换皮肤时零 JS 参与。 */
:root {
    /* 字体 */
    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
                 "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
                 "Liberation Mono", "Courier New", monospace;
    /* 宋体族：只用于商品标题与价格等大字号，小字仍走黑体保证可读性 */
    --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
                  "SimSun", "Noto Serif", Georgia, serif;

    /* 圆角：整体放大，配合毛玻璃 */
    --r-xs: 10px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-pill: 999px;

    /* 动效 */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .18s;

    /* 布局 */
    --wrap: 1180px;
    --nav-h: 60px;

    /* 语义色（亮暗态各有一份，走 [data-theme] 覆盖） */
    --ok:           #12A67A;
    --ok-soft:      #E4F7F0;
    --warn:         #B7791F;
    --warn-soft:    #FDF3E2;
    --danger:       #D6456B;
    --danger-soft:  #FDECF1;
    --info:         #4F6BEF;
    --info-soft:    #EBEFFE;
}

/* ---------- 皮肤令牌：已抽到共享文件 assets/css/theme-tokens.css ----------
 * 入口页与商城共用同一份，避免两套令牌各写各的（v40 修复入口页换肤失效）。
 * 新增/修改皮肤请改 theme-tokens.css（旧 3 套）或 isekai.css / themes-v39.css（新 4 套）。 */

/* ==================== 2. 基础 ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    font-feature-settings: "tnum" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--paper);
    min-height: 100vh;
    /* v35 樱雪光晕：樱粉 / 雾紫 / 冰青三层柔光 + 一层极轻网点维持质感。
     * 三层光斑刻意避开中轴 pp，保证中间商品区不被色块干扰。 */
    background-image:
        radial-gradient(circle at 18% -6%,  var(--halo-pink)   0, transparent 55%),
        radial-gradient(circle at 88% 6%,   var(--halo-violet) 0, transparent 55%),
        radial-gradient(circle at 50% 104%, var(--halo-cyan)   0, transparent 60%),
        radial-gradient(rgba(120, 100, 170, .045) 1px, transparent 1px);
    background-size: auto, auto, auto, 22px 22px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-attachment: fixed, fixed, fixed, scroll;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.container {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 16px;
}

/* 通用图标 */
.i { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: -3px; }
.i-lg { width: 22px; height: 22px; }

/* 等宽文本（订单号 / 查询码 / 卡密） */
.mono { font-family: var(--font-mono); font-feature-settings: normal; letter-spacing: .01em; }

/* 小标签（全大写观感，仅用于拉丁字符） */
.eyebrow {
    font-size: 11.5px; font-weight: 600; color: var(--ink-3);
    letter-spacing: .08em; text-transform: uppercase;
}

/* ==================== 3. 导航栏 ====================
 * v36 照 acg-faka 的 .uc-topbar / .shop-nav 重写：
 * 整条栏是「悬浮胶囊玻璃」——不占满通栏、四周留白、999px 圆角，
 * 与下面的玻璃面板形成同一套语言（旧版是通栏矩形 + 底边描边）。 */
#site-nav {
    position: sticky; top: 0; z-index: 200;
    padding: 12px 14px 6px;
    background: transparent;
    border: none;
    box-shadow: none;
}
.navbar {
    display: flex; align-items: center; gap: 10px;
    max-width: var(--wrap); margin: 0 auto;
    height: var(--nav-h);
    padding: 0 8px 0 14px;
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter-strong, var(--glass-filter));
    backdrop-filter: var(--glass-filter-strong, var(--glass-filter));
    border: 1px solid var(--line);
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar { background: var(--surface-3); }
}
.navbar-brand {
    display: flex; align-items: center; gap: 9px;
    font-size: 16px; font-weight: 700; letter-spacing: -.01em;
    color: var(--ink); flex-shrink: 0;
    padding: 5px 10px 5px 5px; margin-left: -5px;
    border-radius: 999px;
    transition: background var(--dur) var(--ease);
}
/* v49：品牌区也是能点的（回首页），hover 给底色 + logo 轻抬头 */
.navbar-brand:hover { background: var(--surface-2); }
.navbar-brand:hover .brand-logo { transform: scale(1.07) rotate(-5deg); }
.brand-logo {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; background: var(--surface-2);
    transition: transform var(--dur) var(--ease);
}
.brand-name { color: var(--ink); white-space: nowrap; }
.brand-name em { font-style: normal; color: var(--accent); }
/* v30：详情页 / 收银台用「购物」按钮取代 logo 位（跳转回商城）。
 * v50：给足按钮形态 —— 主色浅底 + 主色描边、加大一档，一眼就知道能点。 */
.nav-brand-shop {
    color: var(--accent-ink); font-weight: 700;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
    padding: 10px 26px; margin-left: 6px; font-size: 17px;
}
.nav-brand-shop .pi { width: 18px; height: 18px; }
.nav-brand-shop:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.nav-brand-shop:hover .brand-name { color: #fff; }
@supports not (border-color: color-mix(in srgb, red 30%, transparent)) {
    .nav-brand-shop { border-color: var(--line-2); }
}

.nav-menu { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* v30：顶部导航入口统一为轻巧的小胶囊（订单 / 客服）
 * v36.3：加大一档——顶栏总高度不变，但这两个入口更醒目 */
.nav-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--line-2); background: var(--surface-2);
    font-size: 13.5px; font-weight: 500; color: var(--ink-2);
    white-space: nowrap; cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-pill .pi { width: 15px; height: 15px; }
.nav-pill:hover { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }
.nav-pill.active { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
/* 客服：三入口里最重的一档（浅底主色 + 主色描边），hover 转实心 */
.nav-pill-accent {
    color: var(--accent-ink); background: var(--accent-soft); font-weight: 600;
    border-color: color-mix(in srgb, var(--accent) 36%, transparent);
}
.nav-pill-accent:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 已登录：账号胶囊醒一点，和「登录」区分开 */
.nav-pill.is-signed-in {
    color: var(--accent-ink); background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
@supports not (border-color: color-mix(in srgb, red 30%, transparent)) {
    .nav-pill-accent, .nav-pill.is-signed-in { border-color: var(--line-2); }
}

/* 搜索：固定偏短的宽度（v50 再收一档 250px，不再伸展吃掉中间空间；
 * 中部空档改由 .nav-feats 服务承诺条填充） */
.nav-search { flex: 0 1 250px; min-width: 150px; position: relative; }
.nav-search .form-control {
    padding-left: 36px; border-radius: var(--r-pill); height: 36px;
    background: var(--surface-2); border-color: transparent;
}
.nav-search .form-control:focus { background: var(--surface); }
.nav-search .search-ico {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--ink-4); pointer-events: none; width: 16px; height: 16px;
}
/* 中部服务承诺条（v49）：搜索缩短后留下的空档，用「一眼可信」的信息补白。
 * 纯展示、不可点 —— 所以刻意不带按钮形态（无描边、无底色、无光标）。 */
.nav-feats {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 10px; overflow: hidden;
}
.nav-feat {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 500; color: var(--ink-3);
    white-space: nowrap; letter-spacing: .01em;
}
.nav-feat .i { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.nav-feat:not(:first-child)::before {
    content: ""; width: 3px; height: 3px; border-radius: 50%;
    background: var(--ink-4); opacity: .55; margin-right: 12px; flex-shrink: 0;
}

/* 主题控制组：界面风格（palette）+ 浅色/深色分段（v49） */
.nav-theme { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.theme-seg {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px; border-radius: 999px;
    border: 1px solid var(--line-2); background: var(--surface-2);
}
.theme-seg__btn {
    display: inline-flex; align-items: center; justify-content: center;
    /* v98：原来是 30×26，拇指 tapping 目标偏小 —— 高度抬到 30~34px 并跟着屏幕缩放 */
    width: clamp(32px, 8.6vw, 38px); height: clamp(30px, 8vw, 34px); padding: 0;
    border: 0; border-radius: 999px;
    background: transparent; color: var(--ink-3);
    cursor: pointer; line-height: 1;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.theme-seg__btn .i { width: 15px; height: 15px; }
.theme-seg__btn:hover { color: var(--accent-ink); background: var(--accent-soft); }
.theme-seg__btn.is-active {
    background: var(--surface); color: var(--accent);
    box-shadow: 0 1px 3px rgba(20, 16, 30, .12);
}
.theme-seg__btn.is-active .i { stroke-width: 1.9; }
/* 主题组与导航入口之间的竖分隔（随 nav-menu 一起在手机上隐藏） */
.nav-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--line-2); flex-shrink: 0; }

/* 承诺条分级收敛：不够宽先减到两条，再窄整组收起 */
@media (max-width: 1199px) { .nav-feats .nav-feat:nth-child(3) { display: none; } }
@media (max-width: 1023px) { .nav-feats { display: none; } }

/* 图标按钮（皮肤 / 菜单）：34px 视觉、描边 + 浅底 —— 一眼就是按钮 */
.nav-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--line-2); border-radius: 50%;
    background: var(--surface-2); color: var(--ink-2);
    cursor: pointer; line-height: 1;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-icon-btn:hover {
    background: var(--accent-soft); color: var(--accent-ink);
    border-color: var(--accent); transform: translateY(-1px);
}
.nav-icon-btn .i { width: 17px; height: 17px; }
@media (max-width: 899px) {
    /* 手机上把点击区撑到 40px，视觉尺寸不变 */
    .nav-icon-btn { width: 40px; height: 40px; }
}

/* 皮肤切换的浮层菜单 */
.skin-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 240;
    min-width: 168px; padding: 6px;
    border-radius: var(--r-md);
    background: var(--surface-3);
    -webkit-backdrop-filter: var(--glass-filter-strong, var(--glass-filter));
    backdrop-filter: var(--glass-filter-strong, var(--glass-filter));
    border: 1px solid var(--line);
    box-shadow: var(--sh-3);
    display: none;
}
.skin-menu.open { display: block; animation: menuIn .16s var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.skin-menu__item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; border: none; border-radius: var(--r-sm);
    background: transparent; color: var(--ink-2);
    font-size: 13px; font-weight: 500; cursor: pointer; text-align: left;
}
.skin-menu__item:hover { background: var(--accent-soft); color: var(--ink); }
.skin-menu__item.is-active { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.skin-menu__dot {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid var(--line-2);
}
.skin-menu__sep { height: 1px; margin: 5px 6px; background: var(--line-2); }

/* 汉堡：仅窄屏出现 */
.nav-toggle { display: none; }

/* 窄屏：导航/搜索收进抽屉，顶栏只留品牌 + 图标按钮 + 汉堡 */
.shop-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 260;
    width: 78%; max-width: 300px;
    padding: 18px 16px;
    background: var(--surface-3);
    -webkit-backdrop-filter: var(--glass-filter-strong, var(--glass-filter));
    backdrop-filter: var(--glass-filter-strong, var(--glass-filter));
    border-right: 1px solid var(--line);
    box-shadow: var(--sh-3);
    transform: translateX(-100%);
    transition: transform .24s var(--ease);
    display: none;
}
body.drawer-open .shop-drawer { transform: none; }
.drawer-brand {
    display: flex; align-items: center; gap: 9px;
    font-size: 16px; font-weight: 700; color: var(--ink);
    padding: 0 4px 14px;
}
.drawer-link {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; margin-bottom: 2px;
    border-radius: var(--r-sm);
    color: var(--ink-2); font-size: 14.5px; font-weight: 500;
}
.drawer-link .i { width: 18px; height: 18px; }
.drawer-link:hover, .drawer-link.active { background: var(--accent-soft); color: var(--accent-ink); }
.drawer-search { padding: 4px 4px 14px; position: relative; }
.drawer-search .form-control { padding-left: 36px; border-radius: var(--r-pill); }
.drawer-search .search-ico {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--ink-4); pointer-events: none; width: 16px; height: 16px;
}
.drawer-shade {
    position: fixed; inset: 0; z-index: 250;
    background: rgba(0, 0, 0, .38);
    display: none;
}
body.drawer-open .drawer-shade { display: block; }

@media (max-width: 899px) {
    .navbar { gap: 6px; padding: 0 6px 0 12px; }
    .nav-menu, .nav-search { display: none; }
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0;
        border: 1px solid var(--line-2); border-radius: 50%;
        background: var(--surface-2); color: var(--ink-2);
        cursor: pointer; line-height: 1;
    }
    .nav-toggle:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
    .nav-toggle .i { width: 22px; height: 22px; }
    .shop-drawer { display: block; }
}

/* ==================== 4. 按钮 ==================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; padding: 0 16px;
    border: 1px solid transparent; border-radius: var(--r-md);
    font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
    cursor: pointer; white-space: nowrap;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.btn .i { width: 16px; height: 16px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn-lg { height: 48px; padding: 0 22px; font-size: 16px; }
.btn-block { width: 100%; }

.btn-primary,
.btn-gradient {           /* 旧 class 保留，统一收口到樱雪渐变 */
    background: var(--grad-cta); color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(255, 111, 165, .28);
}
.btn-primary:hover,
.btn-gradient:hover { background: var(--grad-cta); filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active,
.btn-gradient:active { background: var(--grad-cta); filter: brightness(.94); }

/* 描边按钮（二级）：边框加深一档 + 轻投影，「一看就是能点的」。
 * 两级写法：前一条给旧浏览器兜底，后一条 color-mix 支持时生效。 */
.btn-outline {
    background: var(--surface); color: var(--ink);
    border-color: var(--line-2);
    border-color: color-mix(in srgb, var(--ink-3) 48%, transparent);
    box-shadow: var(--sh-1);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--surface-2); }

/* 文字按钮（三级）：无底无框、用主题色文字标识可点性。
 * btn-text 为新名字，btn-ghost 是旧名字（保留兼容，别处可能还在用）。 */
.btn-ghost, .btn-text {
    background: transparent; color: var(--accent-ink);
    border-color: transparent; box-shadow: none;
}
.btn-ghost:hover, .btn-text:hover { background: var(--accent-soft); color: var(--accent-ink); }

.btn:disabled, .btn[disabled] {
    opacity: .45; cursor: not-allowed;
    background: var(--surface-3); color: var(--ink-3); border-color: transparent;
}
.btn-primary:disabled, .btn-gradient:disabled { background: var(--surface-3); color: var(--ink-3); }

/* ==================== 5. 面板 / 分区 ====================
 * v36：对齐 acg-faka 的 .panel——玻璃卡 + 图标圆章标题头 + 内胆留白。 */
.panel {
    background: var(--glass-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-top: 16px;
    overflow: hidden;
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .45);
    /* v35 毛玻璃。只对大面板启用 backdrop-filter：
     * 低端安卓上同屏几十个 blur 滤镜会明显掉帧，
     * 所以商品小卡片（.item-card）只用半透明底色，不加 blur。 */
    backdrop-filter: var(--glass-filter);
    -webkit-backdrop-filter: var(--glass-filter);
}
.panel-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
/* acg-faka 的 panel-header .icon 是一枚圆形图标章 */
.panel-header .icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-ink);
    flex-shrink: 0;
}
.panel-header .icon .i { width: 15px; height: 15px; }
.panel-title { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.panel-body { padding: 16px 18px; }

.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin: 24px 0 12px;
}
.section-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.section-head .eyebrow { margin-bottom: 2px; }

/* 公告 */
.notice-bar {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; border-radius: var(--r-md);
    background: var(--warn-soft); border: 1px solid rgba(150, 97, 15, .18);
    color: var(--warn); font-size: 13.5px; line-height: 1.6;
}
.notice-bar .i { margin-top: 2px; }
.notice-text { color: inherit; font-size: inherit; }

/* ===== v52：公告首访弹层（notice toast）=====
 * 首次进商城页在右下角弹出公告卡，右上角是「圆环倒计时」关闭按钮，
 * 倒计时结束自动收起为右下角小入口（v150 起不再完全消失）；点击公告卡任意位置 → 放大为居中弹窗查看全文，
 * 放大版不倒计时、只能手动叉掉。同一浏览器会话（sessionStorage）只自动弹一次。 */
.notice-toast {
    position: fixed; right: 18px; bottom: 18px; z-index: 900;
    max-width: 360px; width: calc(100vw - 36px);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .16);
    padding: 14px 16px;
    cursor: pointer; /* 点卡体 = 放大查看 */
    animation: noticeIn .3s var(--ease);
}
.notice-toast.is-leaving { animation: noticeOut .35s var(--ease) forwards; pointer-events: none; }
@keyframes noticeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes noticeOut { to { opacity: 0; transform: translateY(10px); } }
.notice-toast-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
    color: var(--accent-ink); font-size: 15px; font-weight: 800;
}
.notice-toast-head .i { width: 18px; height: 18px; color: var(--accent); }
/* 圆环倒计时关闭按钮：中心 ×，外圈朱红圆环随时间走完 */
.notice-timer {
    position: relative; margin-left: auto;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%; background: var(--surface-3);
    cursor: pointer; flex-shrink: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.notice-timer svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform: rotate(-90deg); /* 从 12 点方向顺时针走 */
}
.notice-timer .ring-track { fill: none; stroke: var(--line-2); stroke-width: 3; }
.notice-timer .ring-bar { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.notice-timer-x { font-size: 12px; line-height: 1; color: var(--ink-2); }
/* v150：公告正文加视觉冲击——更大字号、更粗字重、强调底色高亮 */
.notice-toast-body {
    font-size: 16px; font-weight: 800; line-height: 1.55;
    color: var(--ink-1);
    background: var(--accent-soft);
    border-radius: 8px;
    padding: 10px 12px;
    word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* v150：右下角常驻小入口——公告收起后仍可一键点开
 * v151：配色改用主题 accent 系（浅底+主色描边+主色文字），随主题变化且对比清晰 */
.notice-mini {
    position: fixed; right: 18px; bottom: 18px; z-index: 890;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border: 1.5px solid var(--accent); border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 13px; font-weight: 800; line-height: 1;
    cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    animation: noticeIn .3s var(--ease);
}
.notice-mini:hover { background: var(--accent); color: var(--accent-ink); }
.notice-mini.is-hidden { display: none; }
.notice-mini .i { width: 15px; height: 15px; }
/* 放大查看的居中弹窗：无倒计时，只能手动关闭 */
.notice-modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 15, 20, .5);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: noticeFade .2s var(--ease);
}
@keyframes noticeFade { from { opacity: 0; } to { opacity: 1; } }
.notice-modal-card {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-top: 4px solid var(--accent);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
    max-width: 520px; width: 100%;
    padding: 18px 20px 20px;
    animation: noticeIn .25s var(--ease);
}
.notice-modal-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
    color: var(--accent-ink); font-size: 16px; font-weight: 700;
}
.notice-modal-head .i { width: 18px; height: 18px; color: var(--accent); }
.notice-modal-close {
    margin-left: auto;
    width: 30px; height: 30px;
    border: 0; border-radius: 8px; background: var(--surface-3);
    color: var(--ink-2); font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.notice-modal-close:hover { background: var(--surface-2); color: var(--ink-1); }
.notice-modal-body {
    font-size: 17px; font-weight: 700; line-height: 1.85;
    color: var(--ink-1);
    word-break: break-word;
    max-height: 60vh; overflow: auto;
}
@media (max-width: 600px) {
    .notice-toast { right: 12px; bottom: 12px; max-width: none; }
    .notice-mini { right: 12px; bottom: 12px; }
}

/* ==================== 6. 商城布局：侧栏分类 + 商品网格 ==================== */
.shop-layout { display: block; }

/* v31：胶囊自适应铺满改为纯 CSS flex 实现——换行由浏览器按真实渲染宽度决定，
   剩余空间由 flex-grow 填满。零 JS 测量，不受字体加载时序 / 浏览器文字放大影响，
   任何浏览器表现一致（此前 JS 测量方案在部分手机浏览器上因测量时机导致错乱）。 */
.cats {
    display: flex; gap: 5px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px 7px 6px; border-radius: 10px; /* v52: 胶囊改矩形轻微倒角，与二级分类统一 */
    border: 1px solid var(--line-2); background: var(--surface);
    color: var(--ink-2); font-size: 12.5px; font-weight: 500;
    cursor: pointer; transition: all var(--dur) var(--ease);
    min-height: 38px;
}
.chip:hover { border-color: var(--ink-4); color: var(--ink); }
html[data-theme="dark"] .cats .chip:not(.is-primary) { color: var(--ink); }
.chip-icon {
    width: 24px; height: 24px; border-radius: 7px; /* v52: 圆形图标框同步改方形倒角 */
    background-color: var(--surface-3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1; color: var(--ink-3);
    overflow: hidden; flex-shrink: 0;
}
.chip-icon .i { width: 11px; height: 11px; }
.chip-icon .chip-img {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
}
.chip.is-primary {
    background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
}
.chip.is-primary .chip-icon { background-color: rgba(255, 255, 255, .22); color: inherit; }

/* ===== 二级分类行：内嵌在分类流里，紧跟选中的一级胶囊 =====
 * v36.1：不再强制独占一行（flex-basis:100%）——桌面端会把「内核/直装」
 * 挤成独立一行、把后面的一级分类顶到下一行，用户反馈排版错乱。
 * 改成随流内联：全部/三角洲/[全部·内核·直装]/和平精英… 同一行自然换行。 */
.subcats {
    display: inline-flex; flex-wrap: wrap; gap: 5px;
    padding: 2px 0 4px;
    animation: subIn .22s var(--ease);
}
@keyframes subIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.subcat {
    display: inline-flex; align-items: center;
    padding: 7px 16px;
    font-size: 12px; font-weight: 500; color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px; /* v51: 999px 胶囊改矩形轻微倒角 */
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    min-height: 34px;
    transition: all var(--dur) var(--ease);
}
.subcat:hover { border-color: var(--accent); color: var(--accent-ink); }
/* <=899px（手机/平板，横排分类）：每行胶囊 flex-grow 拉伸铺满整行，内容居中。
   桌面端(>=900px)分类是左侧竖排导航，保持自然宽度不拉伸。 */
@media (max-width: 899px) {
    .cats .chip, .subcats .subcat { flex: 1 1 auto; justify-content: center; }
}
/* 二级选中 = 浅红强调，不与一级的实心红抢焦点 */
.subcat.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-ink); font-weight: 600;
}
html[data-theme="dark"] .subcats .subcat:not(.is-active) { color: var(--ink); }

/* v36：分类不再分「桌面竖排 / 手机横排」两套——与 acg-faka 一致，
 * 任何宽度都是面板内顶部的横排胶囊，换行由浏览器决定（零 JS 测量）。
 * 少一套布局 = 少一类只在某个断点才出现的 bug。 */

/* ==================== 7. 商品卡片 ====================
 * v36：对齐 acg-faka 的 .acg-card——封面占主导（1:1）、信息区收紧、
 * 悬停整卡上浮而不是只放大封面（放大封面在触屏上没有任何反馈）。 */
.item-list {
    display: grid; gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 14px;
}
@media (min-width: 620px)  { .item-list { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1180px) { .item-list { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.item-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
    box-shadow: var(--sh-1);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.item-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: var(--surface-2);
    position: relative;
    transition: transform .3s var(--ease);
}
/* 手机上（<620px）改 1:1 大封面 —— v55: 图片整体拉大；徽章回信息区后
 * 信息区约 75px，1:1 图高约 170px ≈ 2.3:1，正好是店主要的上图:下文 2:1 */
@media (max-width: 619px) {
    .item-thumb { aspect-ratio: 1 / 1; }
    /* v70: 徽章动态填充留白 —— 字号恢复 10px（可读），宽度自适应；
     * 库存/已售固定 10px 靠右完整显示；放不下时 fitTagsRows 缩档兜底 */
    .item-card .item-info { padding: 6px 9px 5px; gap: 2px; }
    .item-card .price { font-size: 15px; }
    .item-card .goods-title { font-size: 12.5px; -webkit-line-clamp: 1; }
    .price-row { line-height: 1.1; }
    .stock-mini { font-size: 10px; gap: 4px; }
    .item-tags { gap: 4px; }
    .item-tags .sold-mini { font-size: 10px; }
    .stock-dot { width: 5px; height: 5px; margin-right: 3px; }
    .item-tags .badge-soft { padding: 1.5px 7px; font-size: 10.5px; line-height: 1.7; }
    /* fitTagsRows 缩档兜底（极端窄屏） */
    .item-tags.tags-s2 .badge-soft { font-size: 9.5px; padding: 1px 6px; }
    .item-tags.tags-s2 .stock-mini, .item-tags.tags-s2 .sold-mini { font-size: 9px; }
    .item-tags.tags-s2 { gap: 3px; }
    .item-tags.tags-s2 .stock-dot { width: 4.5px; height: 4.5px; margin-right: 2px; }
    .item-tags.tags-s3 .badge-soft { font-size: 9px; padding: 1px 5px; }
    .item-tags.tags-s3 .stock-mini, .item-tags.tags-s3 .sold-mini { font-size: 8.5px; }
    .item-tags.tags-s3 { gap: 2px; }
    .item-tags.tags-s3 .stock-dot { width: 4px; height: 4px; margin-right: 2px; }
}
/* v71: 信息区 3 行 —— 徽章行 / 标题 / 价格行。
 * 徽章行整体动态缩放（JS fitTagsRows）：测内容自然宽 vs 可用宽，
 * transform scale 等比缩放——宽屏微放大填满留白、窄屏等比缩小，
 * 徽章/库存/已售三个元素在一切机型上都完整显示且正好填满整行。 */
.item-info { padding: 8px 11px 9px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.item-tags {
    display: flex; align-items: center; gap: 5px;
    flex-wrap: nowrap; min-width: 0;
    transform-origin: left center;
    white-space: nowrap;
}
.stock-mini {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--ink-3); font-size: 11.5px; white-space: nowrap;
}
.sold-mini { flex-shrink: 0; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.goods-title {
    font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.price { color: var(--accent); font-weight: 700; letter-spacing: -.01em; }
.price .unit { font-size: .72em; font-weight: 600; margin-right: 1px; }
.item-card .price { font-size: 17px; }

/* v65: 价格 + 库存/已售同行（价格左、库存已售靠右）。
 * 价格过长放不下时整组换行：库存行靠右、价格保持原行 —— 不挤不破。 */
.price-row {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between;
    gap: 2px 6px; margin-top: auto;
    line-height: 1.15;
}
.price-row .price { flex-shrink: 0; min-width: 0; }
.stat-bottom {
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    color: var(--ink-3); font-size: 11.5px;
    white-space: nowrap; margin-left: auto;
}
.stock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 5px; }
.stock-dot.is-out { background: var(--ink-4); }

.badge-soft {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1.5px 7px; border-radius: var(--r-xs);
    font-size: 10.5px; font-weight: 600; line-height: 1.7;
}
.badge-soft-success { background: var(--ok-soft); color: var(--ok); }
.badge-soft-primary { background: var(--info-soft); color: var(--info); }
.badge-soft-info    { background: var(--info-soft); color: var(--info); }
.badge-soft-warning { background: var(--warn-soft); color: var(--warn); }
.badge-soft-danger  { background: var(--danger-soft); color: var(--danger); }

/* 售罄：去色 + 平贴标签（不用旋转丝带） */
.item-card.soldout .item-thumb { filter: grayscale(1); opacity: .55; }
.item-card.soldout .goods-title { color: var(--ink-3); }
.item-card.soldout .price { color: var(--ink-3); }
.soldout-ribbon {
    position: absolute; top: 10px; left: 10px;
    background: rgba(60, 45, 95, .78); color: #fff;
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    padding: 3px 9px; border-radius: var(--r-pill);
}

/* 主推角标（recommend 商品）：恢复贴角三角样式。 */
.featured-badge {
    position: absolute; top: 0; left: 0; z-index: 2;
    width: 37px; height: 37px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: linear-gradient(135deg, #ff2d00 0%, #ff6a00 100%);
    pointer-events: none;
}
.fb-ribbon {
    position: absolute; top: 6.5px; left: -9.5px; width: 42px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; line-height: 1;
    font-family: "Source Han Sans CN Heavy", "Source Han Sans SC Heavy", "Noto Sans SC",
                 "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 9.5px; font-weight: 900; letter-spacing: .04em;
    -webkit-text-stroke: .45px currentColor;
    text-shadow: 0 1px 0 rgba(120, 25, 0, .55), 0 0 8px rgba(255, 205, 100, .6);
    transform: rotate(-45deg);
}

@media (hover: hover) {
    .item-card:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-3px); }
}
.item-card:active { background: var(--surface-2); }

/* 加载编排：卡片依次淡入（唯一一处入场动画） */
/* v46：入场动画改用独立 translate 属性（不是 transform）。
 * 原因：animation ... both/forwards 会把 transform 永久锁死在动画末帧，
 * 导致按下去 :active 的 scale 永远不生效（点了没反应）。 */
@keyframes cardIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.item-card.animate-in { animation: cardIn .38s var(--ease) both; }

.empty-tip { padding: 40px 0; text-align: center; color: var(--ink-3); font-size: 14.5px; }

/* ==================== 8. 表单 ==================== */
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.form-control {
    width: 100%; height: clamp(42px, 11.5vw, 48px); padding: 0 13px;
    font-size: clamp(14.5px, 3.8vw, 15.5px); font-family: inherit;
    border: 1px solid var(--line-2); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink);
    outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.form-control::placeholder { color: var(--ink-4); }
.form-control:disabled { background: var(--surface-2); color: var(--ink-3); }
textarea.form-control { height: auto; padding: 10px 13px; line-height: 1.6; }
/* v107：下单页「联系方式」输入框稍微拉高 —— 原来和旁边的支付胶囊差了一截，
 * 看着像被压扁。改成同一套「随屏宽缩放」的流体高度（46 / 52px），
 * 只改 item 页下单表单，登录、查询、后台那些输入框保持原样。 */
.page-item .form-vstack .form-control { height: clamp(46px, 12vw, 52px); font-size: 15.5px; }

.qty-group {
    display: inline-flex; align-items: stretch;
    border-radius: var(--r-md); overflow: hidden;
    border: 1px solid var(--line-2); background: var(--surface);
}
.qty-group button {
    width: clamp(44px, 12vw, 54px); border: none; background: var(--surface); color: var(--ink-2);
    font-size: clamp(17px, 4.6vw, 20px); cursor: pointer; line-height: 1;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.qty-group button:hover { background: var(--surface-2); color: var(--accent); }
.qty-group button:disabled { color: var(--ink-4); cursor: not-allowed; background: var(--surface); }
.qty-group input {
    width: clamp(58px, 16vw, 74px); border: none; border-left: 1px solid var(--line);
    border-right: 1px solid var(--line); text-align: center;
    font-size: clamp(15px, 4.1vw, 17px); font-weight: 600; outline: none; -moz-appearance: textfield;
    font-feature-settings: "tnum" 1;
}
.qty-group input::-webkit-outer-spin-button,
.qty-group input::-webkit-inner-spin-button { -webkit-appearance: none; }

.captcha-group { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.captcha-group .form-control { border: none; width: 150px; border-radius: 0; }
.captcha-group canvas { width: 90px; height: 40px; cursor: pointer; border-left: 1px solid var(--line); }

/* 支付方式：分段选择 */
.pay-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* 商品规格选择器（直装 / 内核 ...），与支付方式同一套分段视觉 */
.variant-wrap { margin: 10px 0; }
.variant-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.variant-item {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 8px 14px; border-radius: var(--r-md);
    border: 1px solid var(--line-2); background: var(--surface);
    cursor: pointer; font-size: 14px; color: var(--ink-2); font-weight: 500;
    transition: all var(--dur) var(--ease);
}
.variant-item small { font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
.variant-item:hover { border-color: var(--ink-4); }
.variant-item.is-active {
    border-color: var(--accent); background: var(--accent-soft);
    color: var(--accent-ink); font-weight: 600;
    box-shadow: 0 0 0 1px var(--accent);
}
.variant-item.is-active small { color: var(--accent); opacity: .75; }
.variant-item.is-out { opacity: .45; cursor: not-allowed; }
.variant-item.is-out small { color: var(--danger); }
.pay {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: var(--r-md);
    border: 1px solid var(--line-2); background: var(--surface);
    cursor: pointer; font-size: 14px; color: var(--ink-2); font-weight: 500;
    transition: all var(--dur) var(--ease);
    /* v97：高度不再钉死 44px —— 流体值，小屏收、大屏封顶，跟整体比例走 */
    min-height: clamp(44px, 12vw, 52px);
}
.pay img { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; }
.pay:hover { border-color: var(--ink-4); }
.pay.is-active {
    border-color: var(--accent); background: var(--accent-soft);
    color: var(--accent-ink); font-weight: 600;
    box-shadow: 0 0 0 1px var(--accent);
}

/* ==================== 9. 商品详情 ==================== */
.item-detail-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) {
    .item-detail-layout { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 32px; }
    /* v36.2 封面跟随右栏高度；v36.3 加上限——右栏高时封面等比截断（object-fit:cover
     * 不变形），避免窄长条感；上下居中，视觉重心稳定 */
    .item-cover-wrap { display: flex; align-items: center; }
    .item-cover { height: 100%; aspect-ratio: auto; flex: 1; max-height: 560px; }
}
.item-cover {
    width: 100%; border-radius: var(--r-lg); aspect-ratio: 1 / 1;
    object-fit: cover; background: var(--surface-2);
    border: 1px solid var(--line); cursor: zoom-in;
}
.item-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
/* v36.2：分享收成圆形图标钮（文字版太占宽度，徽标行更清爽） */
.shared-button {
    cursor: pointer; margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border-radius: 50%;
    font-size: 12.5px; font-weight: 500; color: var(--ink-2);
    border: 1px solid var(--line-2); background: var(--surface);
    transition: all var(--dur) var(--ease);
}
.shared-button:hover { border-color: var(--ink-4); color: var(--ink); }
.shared-button .i { width: 15px; height: 15px; }

.item-name { font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.35; }
@media (min-width: 900px) { .item-name { font-size: 24px; } }

/* v36.2：价格区只留价格，整体上提收紧（徽标行承担库存/规格展示） */
.abacus { margin: 12px 0 14px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.abacus .price { font-size: 30px; line-height: 1.1; }
.abacus .price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.abacus-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.abacus-row .form-label { margin-bottom: 0; }
.abacus-total { font-size: 13.5px; color: var(--ink-2); display: flex; align-items: baseline; gap: 6px; }
.abacus-total span { color: var(--accent); font-size: 19px; font-weight: 700; }

.btn-buy { width: 100%; height: clamp(50px, 13vw, 56px); font-size: clamp(15.5px, 4.1vw, 17px); font-weight: 700; letter-spacing: .02em; }

.assure-list {
    display: grid; grid-template-columns: 1fr; gap: 7px;
    margin-top: 14px; padding: 13px 15px;
    border-radius: var(--r-md); background: var(--ok-soft);
    border: 1px solid rgba(31, 122, 82, .16);
}
@media (min-width: 620px) { .assure-list { grid-template-columns: 1fr 1fr; gap: 7px 18px; } }
.assure-item { font-size: 13px; color: var(--ok); display: flex; align-items: flex-start; gap: 6px; line-height: 1.5; }
.assure-item .i { width: 14px; height: 14px; margin-top: 3px; }

.form-vstack { display: flex; flex-direction: column; gap: 12px; }
.cash-pay { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; }
/* v36.2：支付方式平分行宽——两个渠道各占一半，右侧不再大片留白
 * （取 acg-faka pay-list 的「渠道卡」精华，保留本站的选中描边态）
 * v97：胶囊高度改流体值 —— 手机端约为原来的两倍（46 → 约 88px，跟屏幕宽度走），
 * 窄屏自动收、宽屏封顶 92px，任何机型都不会被固定 px 挤破或显得太扁；
 * 图标 / 字号 / 圆角同步放大，保持「高胶囊」内部比例协调。 */
/* v99：min 值下调到 118px —— 原 150px 会让 320px 窄屏掉成单列（和别的机型不一致），
 * 118 足够放下「图标 + 支付宝/微信」，四档视口都是稳定的两列。 */
.cash-pay .pay-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
/* v102：胶囊高度回调 —— 上一版 58~70px 太高，占了半个屏；回到 40~52px
 * （原 34px 的约 1.2~1.5 倍），比老版顺眼但不再喧宾夺主。
 *
 * 关键改动：图标和文字不再各自独立的 clamp()，而是全部由 --pay-h 推导。
 * 老问题是三者各自缩放不同步（高 70px 时图标才 23px），看上去像「字贴在大块里」。
 * 现在 icon = 0.5×高、字号 = 0.37×高、间距 = 0.22×高，任何屏幕都是同一套比例。 */
.cash-pay .pay {
    --pay-h: clamp(40px, 12.5vw, 52px);
    width: 100%;
    min-height: var(--pay-h);
    padding: 0 calc(var(--pay-h) * 0.34);
    gap: calc(var(--pay-h) * 0.22);
    /* v107：胶囊宽度撑满格子后内容是靠左的，视觉上像没对齐；
     * 这里居中，横竖都与整块居中，和支付宝那颗保持同一节奏。 */
    justify-content: center;
    /* 0.32 而不是严格等比 —— 等比算出来 390px 下是 18px，反而盖过下方「立即支付」
     * （16px）。渠道名应弱于 CTA，取 0.32 后是 12.8 / 14.4 / 15.7px，主次不会乱。 */
    font-size: calc(var(--pay-h) * 0.32);
    border-radius: var(--r-lg);
}
.cash-pay .pay img {
    width: calc(var(--pay-h) * 0.5); height: auto; aspect-ratio: 1 / 1;
    border-radius: 6px; flex-shrink: 0;
}
.cash-pay .pay span { line-height: 1.3; }

.acg-rich { overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.acg-rich :where(p, ul, ol) { margin-bottom: 1em; }
.acg-rich :where(ul, ol) { padding-left: 1.6em; }
.acg-rich :where(h1, h2, h3, h4, h5, h6) { margin: 1.2em 0 .6em; font-weight: 700; color: var(--ink); }

/* 手机端吸底购买栏 */
.buy-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: none; align-items: center; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--glass-bg); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px rgba(120, 100, 170, .12);
    backdrop-filter: var(--glass-filter);
    -webkit-backdrop-filter: var(--glass-filter);
}
.buy-bar-price { font-size: 19px; font-weight: 700; color: var(--accent-ink); line-height: 1.2; }
.buy-bar-price small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.buy-bar .btn { flex: 1; height: clamp(46px, 12vw, 52px); }
@media (max-width: 768px) {
    body.has-buybar { padding-bottom: 84px; }
    .buy-bar { display: flex; }
}

/* 待付款订单提示 */
.pending-tip-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pending-tip-title { font-size: 14.5px; font-weight: 600; color: var(--warn); display: flex; align-items: center; gap: 6px; }
.pending-tip-desc { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.55; }
.pending-tip-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* ==================== 10. 订单查询 ==================== */
.query-wrap { max-width: 780px; margin: 20px auto; }
.query-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .query-grid { grid-template-columns: 1.5fr 1.1fr auto; align-items: end; } }
.query-form-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .query-form-row { grid-template-columns: 1fr 1fr auto; align-items: end; } }
/* v108：两个表单各去掉一个「查询码」输入框后只剩 1 个字段，三列栅格会留下空洞 →
 * 单字段版本改成「输入框 + 按钮」两列。 */
@media (min-width: 700px) { .query-grid--single { grid-template-columns: 1fr auto; } }
@media (min-width: 700px) { .query-form-row--single { grid-template-columns: 1fr auto; } }
.query-hint { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.6; }

.order-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-top: 14px; overflow: hidden; }
.order-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 14px 16px; border-bottom: 1px solid var(--line); gap: 12px;
}
.status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--r-xs); font-size: 12px; font-weight: 600;
}
.status-badge .i { width: 13px; height: 13px; }
.status-pending { background: var(--warn-soft); color: var(--warn); }
.status-paid    { background: var(--ok-soft); color: var(--ok); }
.status-dead    { background: var(--surface-3); color: var(--ink-3); }

.order-basic { margin-top: 9px; font-size: 12.5px; color: var(--ink-3); display: grid; gap: 3px; }
.order-no { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.order-amount { text-align: right; flex-shrink: 0; }
.amount-label { display: block; font-size: 11.5px; color: var(--ink-3); }
.amount-value { font-size: 19px; font-weight: 700; color: var(--accent); }
.amount-number { font-size: 21px; }

.goods-section { display: flex; gap: 14px; padding: 13px 16px; align-items: center; border-bottom: 1px solid var(--line); }
.goods-thumb img { width: 56px; height: 56px; border-radius: var(--r-md); object-fit: cover; background: var(--surface-2); }
.goods-name { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.goods-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.goods-sku { display: inline-block; padding: 2px 9px; border-radius: var(--r-xs); font-size: 11.5px; font-weight: 600; }
.a-badge-success { background: var(--ok-soft); color: var(--ok); }
.a-badge-primary { background: var(--info-soft); color: var(--info); }
.a-badge-warning { background: var(--warn-soft); color: var(--warn); }

.card-section { margin: 0 16px 16px; padding-top: 13px; }
.card-header { margin-bottom: 9px; }
.shipment-title { display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; font-weight: 600; gap: 10px; }
.shipment-badge { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-xs); }
.shipment-waiting { background: var(--warn-soft); color: var(--warn); }
.shipment-paid { background: var(--ok-soft); color: var(--ok); }
.ship-to-line {
    display: flex; align-items: center; gap: 7px; font-size: 13px;
    color: var(--ok); background: var(--ok-soft);
    border: 1px solid rgba(31, 122, 82, .18); border-radius: var(--r-sm);
    padding: 8px 11px; margin-bottom: 9px; line-height: 1.5;
}
.ship-to-line .i { width: 15px; height: 15px; }

.card-display {
    font-family: var(--font-mono); font-size: 13.5px; line-height: 1.8;
    white-space: pre-wrap; word-break: break-all;
    padding: 13px 15px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--line-2);
    user-select: text; -webkit-user-select: text; color: var(--ink);
}
.no-results, .loading-state { text-align: center; padding: 40px 0; color: var(--ink-3); }

.mine-list { display: flex; flex-direction: column; gap: 8px; }
.mine-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--line);
}
.mine-row code { font-family: var(--font-mono); font-size: 12.5px; }
/* v108：查询码已从界面撤掉，.mine-code 两条死样式一并删除 */
.mine-row .btn { margin-left: auto; }
.mine-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ==================== 11. 收银台 ==================== */
.pay-wrap { max-width: 460px; margin: 24px auto; }
.pay-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: 24px 22px;
    text-align: center; box-shadow: var(--sh-1);
}
.pay-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.pay-sub { color: var(--ink-3); font-size: 13px; margin-top: 5px; }

.pay-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 13px; border-radius: var(--r-pill);
    font-size: 13px; font-weight: 600; margin: 16px 0 4px;
}
.pay-status .i { width: 15px; height: 15px; }
.pay-status.is-wait   { background: var(--warn-soft); color: var(--warn); }
.pay-status.is-done   { background: var(--ok-soft); color: var(--ok); }
.pay-status.is-dead   { background: var(--surface-3); color: var(--ink-3); }

.qr-box {
    width: 208px; min-height: 208px; margin: 14px auto 12px;
    border: 1px solid var(--line-2); border-radius: var(--r-lg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--surface); padding: 10px; box-sizing: border-box; gap: 8px;
}
.qr-box canvas, .pay-qr-img { width: 178px; height: 178px; object-fit: contain; border-radius: var(--r-sm); display: block; background: #fff; }
.pay-qr-tip { font-size: 12px; color: var(--ink-2); }
.pay-qr-empty { padding: 8px 6px; }
.pay-qr-empty .i { width: 30px; height: 30px; color: var(--ink-4); margin-bottom: 6px; }
.pay-qr-empty-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pay-qr-empty-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin-top: 5px; }

/* ---- 在线支付（v34）：主通道按钮 + 静态码降级为备用 ---- */
.pay-online-btn {
    width: 100%; max-width: 320px;
    margin: 2px auto 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.pay-online-btn .i { width: 17px; height: 17px; }
.pay-qr-alt { margin-top: 10px; width: 100%; max-width: 320px; text-align: center; }
.pay-qr-alt > summary {
    cursor: pointer; list-style: none;
    font-size: 12.5px; color: var(--ink-3); padding: 5px 0;
}
.pay-qr-alt > summary::-webkit-details-marker { display: none; }
.pay-qr-alt > summary::before { content: "› "; }
.pay-qr-alt[open] > summary::before { content: "⌄ "; }
.pay-qr-alt .pay-qr-img { margin: 6px auto 4px; }

.pay-amount { font-size: 34px; font-weight: 700; color: var(--accent); letter-spacing: -.02em; line-height: 1.1; }
.pay-amount-label { font-size: 12px; color: var(--ink-3); margin-bottom: 3px; }

.pay-fields {
    display: grid; gap: 8px; margin: 16px 0 4px;
    text-align: left;
}
.pay-field {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--line);
}
.pay-field-label { font-size: 12px; color: var(--ink-3); flex-shrink: 0; }
.pay-field-val {
    flex: 1; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
    color: var(--ink); word-break: break-all; letter-spacing: .02em;
}
.pay-field .btn-icon {
    width: 30px; height: 30px; padding: 0; flex-shrink: 0;
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.pay-field .btn-icon:hover { border-color: var(--accent); color: var(--accent); }
.pay-field .btn-icon .i { width: 14px; height: 14px; }

.pay-countdown { font-size: 12.5px; color: var(--warn); margin-top: 12px; }
.pay-countdown-bar {
    height: 3px; border-radius: 2px; background: var(--surface-3);
    margin: 6px auto 0; width: 160px; overflow: hidden;
}
.pay-countdown-bar span { display: block; height: 100%; background: var(--warn); transition: width 1s linear; }

.pay-tip { font-size: 13px; color: var(--ink-2); margin-top: 14px; line-height: 1.7; text-align: left; }
.pay-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.pay-actions .btn { min-width: 100px; }

/* 下单：务必保存提示 */
.buy-warn {
    font-size: 12.5px; color: var(--warn); line-height: 1.6;
    background: var(--warn-soft); border: 1px solid rgba(150, 97, 15, .2);
    border-radius: var(--r-md); padding: 10px 12px;
    display: flex; gap: 7px; align-items: flex-start;
}
.buy-warn .i { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; }

/* ==================== 12. 弹窗 ==================== */
.hd-layer {
    position: fixed; inset: 0; z-index: 999;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    /* v113：刘海屏 / 手势条安全区，避免弹层内容被系统 UI 压住 */
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
/* v113：矮屏（含手机软键盘顶起后的真实可视高度）改成顶部对齐 ——
 * 垂直居中时超高内容会被推到屏幕外，按钮（弹层最下方）就"消失"了。
 * --vh-real 由 app.js 按 visualViewport 实时写入。 */
@media (max-height: 660px) { .hd-layer { align-items: flex-start; } }
.hd-layer-mask { position: absolute; inset: 0; background: rgba(22, 24, 29, .52); opacity: 0; transition: opacity .2s var(--ease); }
.cover-zoom { position: fixed; inset: 0; z-index: 998; background: rgba(22, 24, 29, .88); display: flex; align-items: center; justify-content: center; opacity: 1; cursor: zoom-out; }
.cover-zoom img { max-width: 92%; max-height: 92%; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.hd-layer.show .hd-layer-mask { opacity: 1; }

.hd-layer-body {
    position: relative; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-xl);
    width: 100%; max-width: 460px; max-height: 86vh; overflow: auto;
    /* v113：用真实可视高度兜底（软键盘弹起时 vh 是不变的，内容会被顶出屏幕） */
    max-height: calc(var(--vh-real, 100vh) * 0.88);
    padding: 20px; box-shadow: var(--sh-3);
    /* 弹层内部滚动留出底部余量，滚动条不会压住最后一行按钮 */
    padding-bottom: 22px;
    transform: translateY(10px); opacity: 0; transition: transform .22s var(--ease), opacity .22s var(--ease);
    overscroll-behavior: contain;
}
.hd-layer.show .hd-layer-body { transform: none; opacity: 1; }
.hd-layer-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 12px; }
.hd-layer-close {
    position: absolute; top: 14px; right: 14px;
    width: 30px; height: 30px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--dur) var(--ease);
}
.hd-layer-close:hover { border-color: var(--ink-4); color: var(--ink); }
.hd-layer-close .i { width: 15px; height: 15px; }

.save-dialog__title { font-size: 16px; font-weight: 700; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.save-dialog__warn { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin-bottom: 14px; }
.save-dialog__warn b { color: var(--accent); }
.save-dialog__row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 9px;
}
.save-dialog__label { font-size: 12px; color: var(--ink-3); flex-shrink: 0; }
.save-dialog__val {
    flex: 1; font-family: var(--font-mono); font-size: 13.5px; font-weight: 600;
    color: var(--ink); word-break: break-all; letter-spacing: .02em;
}
.save-dialog__actions { display: flex; gap: 9px; margin-top: 14px; }
.save-dialog__actions .btn { flex: 1; height: 44px; }

/* ---------- v96：多规格商品的可切换胶囊（单规格商品不显示） ---------- */
.item-specs__list { display: flex; flex-wrap: wrap; gap: 8px; }
.item-spec {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: var(--r-md); cursor: pointer;
    border: 1px solid var(--line-2); background: var(--surface-2);
    color: var(--ink-2); font-size: 13.5px; font-weight: 600;
    transition: all var(--dur) var(--ease);
}
.item-spec:hover { border-color: var(--accent); color: var(--accent); }
.item-spec.is-active {
    border-color: var(--accent); color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.item-spec i {
    font-style: normal; font-size: 11.5px; font-weight: 600;
    padding: 1px 6px; border-radius: 999px;
    background: var(--surface); color: var(--ink-3); border: 1px solid var(--line);
}
.item-spec.is-active i { background: var(--accent); color: #fff; border-color: transparent; }
.item-spec i.out { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ---------- v96：本站数字验证弹层 ---------- */
.hd-captcha__box { max-width: 340px; text-align: center; }
.hd-captcha__title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.hd-captcha__hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin-bottom: 14px; }
.hd-captcha__row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hd-captcha__img {
    flex: 1; height: 48px; border-radius: var(--r-md);
    border: 1px solid var(--line-2); background: #FBF7F2; object-fit: contain;
    user-select: none; -webkit-user-drag: none;
}
.hd-captcha__refresh {
    flex-shrink: 0; height: 48px; padding: 0 12px; cursor: pointer;
    border: 1px solid var(--line-2); border-radius: var(--r-md);
    background: var(--surface-2); color: var(--ink-2); font-size: 13px;
    transition: all var(--dur) var(--ease);
}
.hd-captcha__refresh:hover { border-color: var(--accent); color: var(--accent); }
.hd-captcha__input {
    width: 100%; height: 46px; text-align: center; font-size: 18px; font-weight: 600;
    letter-spacing: .08em; border: 1px solid var(--line-2); border-radius: var(--r-md);
    background: var(--surface-2); color: var(--ink); outline: none;
    transition: border-color var(--dur) var(--ease);
}
.hd-captcha__input:focus { border-color: var(--accent); background: var(--surface); }
.hd-captcha__error {
    display: none; margin-top: 8px; font-size: 12px; color: var(--danger); line-height: 1.6;
}
.hd-captcha__actions { display: flex; gap: 9px; margin-top: 14px; }
.hd-captcha__actions .btn { flex: 1; height: 44px; }

/* ---------- v105：弹层收银台（一站式：付款 + 自动发货，不跳转） ---------- */
.hd-checkout__box {
    max-width: 340px; text-align: center;
    display: flex; flex-direction: column; gap: 10px;
    max-height: min(86vh, 640px); overflow: auto;
    /* v113：真实可视高度兜底 + 保证「立即支付」按钮永远在可视区内 */
    max-height: min(calc(var(--vh-real, 100vh) * 0.9), 640px);
    overscroll-behavior: contain;
}
.hd-checkout__title {
    font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    color: var(--ink-2);
}
.hd-checkout__amount {
    font-size: clamp(30px, 8vw, 36px); font-weight: 700;
    color: var(--accent); letter-spacing: -.02em; line-height: 1.05;
    font-feature-settings: "tnum" 1;
}
.hd-checkout__amount i { font-style: normal; font-size: .58em; margin-right: 2px; }
.hd-checkout__sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.hd-checkout__state {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    align-self: center;
    font-size: 13px; font-weight: 600; color: var(--warn);
    background: var(--warn-soft, rgba(217, 119, 6, .1));
    border-radius: 999px; padding: 6px 14px;
}
.hd-checkout__state svg { width: 15px; height: 15px; }
.hd-checkout__pay { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hd-checkout__go { width: 100%; min-height: 46px; }
.hd-checkout__paytip { font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.hd-checkout__paytip b { color: var(--accent); }
/* v113：支付平台自己的提示页可能要求"等 5 秒 + 点我已知晓"，说清楚免得以为卡死 */
.hd-checkout__link {
    display: block; width: 100%; margin-top: 2px;
    font-size: 12px; line-height: 1.6; color: var(--ink-3);
    border: 1px dashed var(--line-2); border-radius: var(--r-md);
    background: transparent; padding: 8px 10px; cursor: pointer; text-align: center;
    min-height: 42px;
}
.hd-checkout__link:active { border-color: var(--accent); color: var(--accent); }
.hd-checkout__qr {
    /* 二维码按真实可视高度收缩，矮屏也不会顶掉下面的按钮 */
    width: clamp(140px, 46vw, 200px); max-width: calc(var(--vh-real, 100vh) * 0.32);
    height: auto; border-radius: var(--r-md);
    border: 1px solid var(--line-2); background: #fff; display: block; margin: 0 auto;
}
/* v114：我们自己渲染的支付二维码（绕开支付平台的风控挑战页） */
.hd-checkout__qrcode {
    align-self: center;
    width: clamp(150px, 52vw, 186px); height: auto; aspect-ratio: 1 / 1;
    max-width: calc(var(--vh-real, 100vh) * 0.3);
    display: flex; align-items: center; justify-content: center;
    padding: 8px; border-radius: var(--r-md);
    background: #fff; border: 1px solid var(--line-2);
}
.hd-checkout__qrcode canvas,
.hd-checkout__qrcode img { width: 100% !important; height: auto !important; display: block; }
/* v119：通道不可用时的提示条 */
.hd-checkout__warn {
    display: flex; align-items: flex-start; gap: 6px; text-align: left;
    font-size: 12px; line-height: 1.6; color: var(--warn, #b26a22);
    background: var(--warn-soft, rgba(217, 119, 6, .1));
    border: 1px solid rgba(217, 119, 6, .28);
    border-radius: var(--r-md); padding: 7px 10px;
}
.hd-checkout__warn svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 3px; }
.hd-checkout__alt { width: 100%; }
.hd-checkout__alt > summary {
    cursor: pointer; font-size: 12.5px; color: var(--ink-3); user-select: none;
    padding: 8px 4px; min-height: 40px; line-height: 24px; text-align: center;
}
.hd-checkout__alt > summary::-webkit-details-marker { display: none; }
.hd-checkout__alt > summary::before { content: "› "; }
.hd-checkout__alt[open] > summary::before { content: "⌄ "; }
.hd-checkout__alt[open] { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hd-checkout__count { font-size: 12px; color: var(--ink-3); font-feature-settings: "tnum" 1; min-height: 1em; }

/* 卡密弹窗（treasure） */
.acg-secret { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.acg-secret__code {
    font-family: var(--font-mono); font-size: 13.5px; line-height: 1.8;
    white-space: pre-wrap; word-break: break-all;
    padding: 14px 15px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--line-2);
    max-height: 280px; overflow: auto; user-select: text; -webkit-user-select: text;
    color: var(--ink);
}
.acg-secret__bar { display: flex; justify-content: flex-end; gap: 8px; }
.acg-secret__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px; border-radius: var(--r-sm); cursor: pointer;
    font-size: 13px; font-weight: 500; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--line-2);
    transition: all var(--dur) var(--ease); min-height: 38px;
}
.acg-secret__btn:hover { border-color: var(--accent); color: var(--accent); }
.acg-secret__btn .i { width: 15px; height: 15px; }
.acg-secret__note {
    border-radius: var(--r-md); padding: 12px 14px;
    background: var(--surface-2); border: 1px solid var(--line);
}
.acg-secret__note-title { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; font-weight: 600; }
.acg-secret__note-title .i { width: 14px; height: 14px; }
.acg-secret__note-body { font-size: 13px; line-height: 1.7; white-space: pre-line; word-break: break-word; max-height: 180px; overflow: auto; color: var(--ink-2); }
.acg-secret__ship {
    display: flex; align-items: flex-start; gap: 9px;
    border-radius: var(--r-md); padding: 11px 13px;
    background: var(--ok-soft); border: 1px solid rgba(31, 122, 82, .2);
    color: var(--ok); font-size: 13px; line-height: 1.55;
}
.acg-secret__ship .i { width: 17px; height: 17px; margin-top: 1px; }
.acg-secret__ship b { font-weight: 700; }

/* ==================== 13. 提示 Toast ==================== */
.hd-message {
    position: fixed; left: 50%; bottom: 28px;
    transform: translate(-50%, 14px);
    z-index: 1200; display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: var(--r-md);
    font-size: 14px; font-weight: 500; color: #fff;
    background: var(--ink); box-shadow: var(--sh-3);
    opacity: 0; transition: opacity .2s var(--ease), transform .22s var(--ease);
    max-width: min(90vw, 420px); line-height: 1.5;
}
.hd-message.show { opacity: 1; transform: translate(-50%, 0); }
.hd-message .i { width: 16px; height: 16px; flex-shrink: 0; }
.hd-message-success .i { color: #58D19B; }
.hd-message-error   .i { color: #FF8B7E; }
.hd-message-info    .i { color: #9CC4EA; }
@media (max-width: 768px) { .hd-message { bottom: calc(20px + env(safe-area-inset-bottom)); } }

/* ==================== 14. 状态：Loading / Empty / Error ==================== */
.state-box { padding: 40px 16px; text-align: center; }
.state-icon {
    width: 52px; height: 52px; margin: 0 auto 14px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--ink-3);
}
.state-icon .i { width: 24px; height: 24px; }
.state-box.state-error .state-icon { background: var(--danger-soft); color: var(--danger); }
.state-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.state-desc { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.65; }
.state-retry { margin-top: 14px; }
.state-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.state-box.state-error .state-title { color: var(--danger); }

/* 加载中：旋转环 */
.spinner {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--surface-3); border-top-color: var(--accent);
    animation: spin .7s linear infinite; display: inline-block;
}
.state-icon .spinner { width: 24px; height: 24px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state .spinner { margin-right: 8px; vertical-align: -4px; }

/* 骨架屏 */
.sk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 620px) { .sk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .sk-grid { grid-template-columns: repeat(4, 1fr); } }
.sk-card { border-radius: var(--r-lg); padding: 0; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.sk-thumb { aspect-ratio: 4 / 3; background: var(--surface-2); }
.sk-line { height: 11px; border-radius: 5px; background: var(--surface-2); margin-bottom: 9px; }
.sk-line.w70 { width: 70%; }
.sk-line.w40 { width: 40%; }
.sk-body { padding: 13px; }
@keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.sk-card { animation: shimmer 1.5s ease-in-out infinite; }

/* ==================== 15. 页脚 ==================== */
.site-footer {
    margin-top: 40px; padding: 24px 16px 32px;
    border-top: 1px solid var(--line);
    text-align: center; color: var(--ink-3); font-size: 12.5px; line-height: 1.8;
}
.footer-brand { font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }

/* ==================== 16. 手机端底部 Tab ==================== */
/* v30：底部 tabbar 整体取消（导航全部收到顶部一行） */
#site-tabbar { display: none !important; }
#site-tabbar .tabbar-inner { display: flex; }
#site-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; height: 48px; font-size: 11px; font-weight: 500; color: var(--ink-3);
    transition: color var(--dur) var(--ease);
}

/* ==================== 17. 响应式 ==================== */
@media (max-width: 900px) {
    .item-detail-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    /* 上下留白 8px + 压缩整体高度（适配刘海屏安全区）。
     * 注意：导航元素是 class="navbar container"，同媒体块里后面的 .container 规则
     * 会把 padding 重置为 0 14px（同优先级后者胜），所以这里必须用 #site-nav
     * 提升优先级，否则导航内边距不生效！ */
    /* v30：顶部一行 = 左槽（logo 或购物）+ 搜索 + 订单/客服胶囊
     * v36：导航/搜索收进抽屉，顶栏只留 品牌 + 皮肤 + 亮暗 + 汉堡；
     * 刘海安全区改由 #site-nav 的顶部内边距承担，胶囊本身不变形。 */
    #site-nav { padding-top: calc(10px + env(safe-area-inset-top)); }
    #site-nav .navbar {
        gap: 4px;
        padding: 0 6px 0 12px;
        height: 52px;
        flex-wrap: nowrap;
    }
    .navbar-brand { font-size: 14.5px; gap: 6px; flex-shrink: 1; min-width: 0; }
    .brand-logo { width: 22px; height: 22px; border-radius: 6px; }
    .brand-name { overflow: hidden; text-overflow: ellipsis; }
    .nav-brand-shop { padding: 7px 14px; margin-left: 2px; }
    .nav-brand-shop .pi { width: 15px; height: 15px; }
    .nav-pill { padding: 3px 8px; font-size: 11px; gap: 3px; }
    .nav-pill .pi { width: 12px; height: 12px; }

    .container { padding: 0 14px; }
    .panel { border-radius: var(--r-md); }
    .panel-body { padding: 14px; }
    .pay-card { padding: 20px 16px; border-radius: var(--r-lg); }
    .pay-wrap { margin: 16px auto; }
    .item-name { font-size: 19px; }
    .abacus .price { font-size: 27px; }
    .pay-amount { font-size: 30px; }
    .order-header { flex-direction: column; gap: 10px; }
    .order-amount { text-align: left; }
    .pending-tip-actions { margin-left: 0; width: 100%; }
    .pay-actions .btn { flex: 1 1 40%; }
    .save-dialog__actions { flex-direction: column-reverse; }
    .hd-message { bottom: 16px; }
}
@media (max-width: 400px) {
    .navbar-brand { font-size: 16px; }
    .brand-logo { width: 26px; height: 26px; }
    .nav-link { padding: 6px 8px; font-size: 13px; }
    .item-list { gap: 10px; }
    .item-card .price { font-size: 16px; }
}

/* 平板竖屏：商品 3 列更合适 */
@media (min-width: 768px) and (max-width: 899px) {
    .item-list { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
 * 附录 A. 商品详情页升级 v28 ——「朱印 · 详情页」
 *
 * 作用域：body.page-item（只作用于 shop/item.html）
 * 商城首页 / 收银台 / 订单查询 / 后台 一律不受影响。
 * 既有 class 与 id 全部保留，item.js 逻辑零改动。
 *
 * 改动要点
 *   1. 主图从 1:1 压到 16:11 —— 价格与规格能进手机首屏
 *   2. 商品标题与价格换宋体并收紧字距，强化「朱印」气质
 *   3. 手机端拆掉外层大白板，改为「暖纸 + 卡片流」
 *   4. 规格选择卡片化，选中态带朱砂实心勾
 *   5. 吸底购买栏改毛玻璃 + 胶囊 CTA
 * ============================================================ */

/* ---------- A1. 主图 ---------- */
.page-item .item-cover {
    aspect-ratio: 16 / 11;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    box-shadow: var(--sh-1);
}
@media (min-width: 900px) {
    .page-item .item-cover { aspect-ratio: 1 / 1; border-radius: var(--r-lg); }
}

/* ---------- A2. 标题 ---------- */
.page-item .item-name {
    font-family: var(--font-serif);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: .01em;
}
@media (max-width: 768px) {
    .page-item .item-name { font-size: 21px; }
}
.page-item .item-head { margin: 12px 0 0; }
/* 「已售 N 件」改为暖中性，蓝色徽标在暖纸上是唯一的冷色噪音 */
.page-item .item-head .badge-soft-primary {
    background: var(--surface-2);
    color: var(--ink-2);
}

/* ---------- A3. 手机端：拆掉外层大白板，卡片直接落在暖纸上 ---------- */
@media (max-width: 768px) {
    .page-item #item-panel,
    .page-item #desc-panel {
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .page-item #item-panel { margin-top: 4px; }
    .page-item #item-panel > .panel-body { padding: 0; }
    /* 详情区保留白卡，只是不再和外层大白板套娃 */
    .page-item #desc-panel {
        margin-top: 18px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
    }
    .page-item #desc-panel > .panel-body { padding: 14px 15px; }
}

/* ---------- A4. 价格卡 ---------- */
.page-item .abacus {
    margin: 16px 0;
    padding: 16px;
    border-radius: 18px;
    background: var(--surface-2);
    border: 1px solid transparent;
}
.page-item .abacus .price {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
}
.page-item .price-row { align-items: center; margin-bottom: 0; }
.page-item .price-row #item-stock { margin-left: auto; }
@media (max-width: 768px) {
    /* 手机端价格区提升为独立白卡，成为首屏视觉焦点 */
    .page-item .abacus {
        margin: 14px 0;
        padding: 15px;
        background: var(--surface);
        border-color: var(--line);
        box-shadow: var(--sh-1);
    }
    .page-item .abacus .price { font-size: 30px; }
}

/* ---------- A5. 规格选择（直装 / 内核） ---------- */
.page-item .variant-wrap { margin: 16px 0 0; }
.page-item .variant-wrap > .form-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
}
.page-item .variant-list { margin-top: 0; gap: 10px; }
.page-item .variant-item {
    position: relative;
    flex: 0 1 auto;
    min-width: 132px;
    min-height: 44px;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 38px 12px 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}
.page-item .variant-item small {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-3);
}
.page-item .variant-item.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-ink);
    box-shadow: none;
}
.page-item .variant-item.is-active small { color: var(--accent); opacity: .8; }
/* 未选中：空心圆 */
.page-item .variant-item::after {
    content: "";
    position: absolute;
    top: 50%; right: 11px;
    width: 18px; height: 18px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.4px solid var(--line-2);
    transform: translateY(-50%);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-item .variant-item.is-active::after {
    background: var(--accent);
    border-color: var(--accent);
}
/* 选中：白色实心勾 */
.page-item .variant-item::before {
    content: "";
    position: absolute;
    top: 50%; right: 16px;
    width: 8px; height: 4px;
    border-left: 1.8px solid #fff;
    border-bottom: 1.8px solid #fff;
    transform: translateY(-75%) rotate(-45deg);
    opacity: 0;
    z-index: 1;
    transition: opacity var(--dur) var(--ease);
}
.page-item .variant-item.is-active::before { opacity: 1; }
.page-item .variant-item.is-out { opacity: .5; }
.page-item .variant-item.is-out::after { border-style: dashed; }

/* ---------- A6. 数量与合计 ---------- */
.page-item .abacus-row { margin: 16px 0 0; }
.page-item .abacus-total {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    font-size: 13px;
}
.page-item .abacus-total span {
    margin-left: auto;
    font-family: var(--font-serif);
    font-size: 22px;
    letter-spacing: -.01em;
}

/* ---------- A7. 下单表单卡（手机端） ---------- */
@media (max-width: 768px) {
    .page-item .form-vstack {
        gap: 16px;
        padding: 16px;
        margin-bottom: 14px;
        border-radius: 18px;
        background: var(--surface);
        border: 1px solid var(--line);
        box-shadow: var(--sh-1);
    }
    .page-item .form-vstack .cash-pay {
        background: transparent;
        border: 0;
        padding: 0;
    }
}

/* ---------- A8. 主 CTA 与信任说明 ---------- */
.page-item .btn-buy {
    border-radius: var(--r-pill);
    letter-spacing: .1em;
    box-shadow: 0 6px 18px var(--accent-ring);
}
.page-item .btn-buy:disabled { box-shadow: none; }
.page-item .assure-list {
    margin-top: 16px;
    border-radius: 14px;
    border-color: rgba(31, 122, 82, .14);
}

/* 桌面端只收紧购买信息，保持左侧商品图的尺寸、比例和裁切逻辑不变。 */
@media (min-width: 900px) {
    .page-item .item-info-col { align-self: start; }
    .page-item .item-head { margin-top: 8px; }
    .page-item .abacus { margin: 10px 0; padding: 12px 14px; border-radius: 14px; }
    .page-item .abacus-row { margin-top: 10px; }
    .page-item .form-vstack { gap: 9px; }
    .page-item .form-vstack .form-control { height: 46px; }
    .page-item .cash-pay { padding: 10px 12px; }
    .page-item .cash-pay .pay { --pay-h: 44px; }
    .page-item .buy-warn { padding: 6px 9px; }
    .page-item .btn-buy { height: 50px; }
    .page-item .assure-list { margin-top: 10px; padding: 10px 12px; }
}

/* ---------- A9. 商品详情区 ---------- */
.page-item .panel-title { font-family: var(--font-serif); letter-spacing: .02em; }

/* ---------- A10. 吸底购买栏 ---------- */
.page-item .buy-bar {
    gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 14px rgba(107, 92, 71, .10);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .page-item .buy-bar { background: var(--surface); }
}
.page-item .buy-bar-price {
    font-family: var(--font-serif);
    font-size: 22px;
    letter-spacing: -.01em;
}
.page-item .buy-bar-price::before {
    content: "合计 ";
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-2);
}
.page-item .buy-bar-price small {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-2);
    margin-top: 1px;
}
.page-item .buy-bar .btn {
    height: 50px;
    border-radius: var(--r-pill);
    letter-spacing: .1em;
    box-shadow: 0 6px 16px var(--accent-ring);
}
.page-item .buy-bar .btn:disabled { box-shadow: none; }
@media (max-width: 768px) {
    /* 吸底栏变高，页面底部留白同步抬高，避免最后一屏被压住 */
    body.has-buybar.page-item { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ==================== 17b. 商品详情页：手机端「一屏买」紧凑布局 ====================
 * 目标：把「浏览 → 选规格 → 填联系方式 → 选支付 → 付款」整条路径压缩进首屏，
 *       用户无需长滚动即可完成下单（原布局 390px 下总高 1640px ≈ 2 屏）。
 * 手段：
 *   1. 封面图从 16:11 大图改为左侧 104px 缩略图（点击仍可放大看原图）
 *   2. item-info-col 用 display:contents 解散，使标题/徽标能与缩略图同排
 *   3. 价格区改为 flex 流式：价格+库存一行、规格一行、数量与合计同行
 *   4. 表单收紧间距与主按钮（中部按钮让位给吸底栏，桌面端仍保留）
 *   5. 商品详情区折叠（<details> 原生实现，零 JS）、信任说明单行化
 * 仅作用于手机端；桌面端（>=900px）保持原两列版式不变。
 * ========================================================================== */
@media (max-width: 768px) {
    /* ---- 1. 外层容器整体收紧 ---- */
    .page-item .panel { margin-top: 9px; border-radius: var(--r-md); }
    .page-item .panel-body { padding: 12px 14px; }

    /* ---- 2. 封面左置 + 标题徽标同排 ---- */
    .page-item .item-info-col { display: contents; }
    .page-item .item-detail-layout {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        column-gap: 10px; row-gap: 0;
        align-items: start;
    }
    .page-item .item-cover-wrap { grid-column: 1; grid-row: 1 / span 2; }
    .page-item .item-cover {
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        box-shadow: var(--sh-1);
    }
    .page-item .item-name {
        grid-column: 2; grid-row: 1;
        margin: 0; align-self: end;
        font-size: 16px; line-height: 1.4;
        /* 最多两行，超长标题不撑开版式 */
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .page-item .item-head {
        grid-column: 2; grid-row: 2;
        margin: 6px 0 0; gap: 5px;
    }
    .page-item .item-head .badge-soft { padding: 2px 8px; font-size: 11.5px; }
    /* v98：分享键抬到 32~34px（原 30/28），和主题切换键一致的手指友好尺寸 */
    .page-item .shared-button { padding: 0; width: clamp(32px, 8.6vw, 34px); height: clamp(32px, 8.6vw, 34px); }
    /* v36.4：手机端徽标行保留「发货方式 + 已售 + 库存」；只藏规格徽标
     * （规格已在下方规格卡选择，且缩略图旁空间小放不下），库存必须可见 */
    .page-item #item-variant { display: none !important; }
    .page-item .shared-button .i { width: 13px; height: 13px; }

    /* ---- 3. 价格区：三行结构 ---- */
    .page-item .abacus,
    .page-item .form-vstack,
    .page-item .assure-list { grid-column: 1 / -1; }
    .page-item .abacus {
        margin: 8px 0 0; padding: 8px 10px;
        border-radius: 14px;
        display: flex; flex-wrap: wrap; align-items: center;
        column-gap: 10px; row-gap: 0;
    }
    .page-item .price-row { flex: 1 1 auto; margin: 0; gap: 8px; }
    .page-item .abacus .price { font-size: 25px; }
    .page-item .variant-wrap { flex: 1 0 100%; margin: 6px 0 0; }
    .page-item .variant-wrap .form-label { margin-bottom: 3px; font-size: 11.5px; }
    .page-item .variant-list { gap: 6px; margin-top: 4px; }
    .page-item .variant-item { min-width: 112px; min-height: 38px; padding: 7px 36px 7px 12px; font-size: 13px; gap: 5px; border-radius: 10px; }
    .page-item .variant-item small { font-size: 11px; }
    .page-item .abacus-row { flex: 0 0 auto; margin: 7px 0 0; gap: 8px; }
    .page-item .abacus-row .form-label { font-size: 12px; }
    .page-item .qty-group button { width: 32px; font-size: 15px; }
    .page-item .qty-group input { width: 44px; font-size: 14px; height: 36px; }
    /* 合计并入数量同一行，靠右对齐 */
    .page-item .abacus-total {
        margin: 9px 0 0; margin-left: auto;
        padding-top: 0; border-top: 0;
        font-size: 12px; gap: 4px;
    }
    .page-item .abacus-total span { font-size: 18px; }

    /* ---- 4. 下单表单收紧 ---- */
    .page-item .form-vstack { gap: 8px; padding: 10px 11px; margin-bottom: 0; border-radius: 14px; }
    .page-item .form-vstack .form-label { margin-bottom: 4px; font-size: 12px; }
    /* v33：人机验证已从表单里移除（改为进站一次验证），支付方式图标自带名称 → 去掉标题省高度 */
    .page-item .cash-pay > .form-label { display: none; }
    .page-item .form-vstack .form-control { height: clamp(44px, 12vw, 50px); font-size: 15px; }
    .page-item .pay-list { gap: 8px; }
    /* v102：这里原本有一条 .page-item .pay 的覆盖，和 .cash-pay .pay 特异性相同、
     * 位置更靠后，把它压回了矮胶囊 —— 正是上一版「改了没效果」的根因。
     * 胶囊尺寸现在只有一处来源（上面的 --pay-h），这里不再重复定义。 */
    .page-item .buy-warn { margin-top: 0; padding: 3px 9px; font-size: 10.5px; line-height: 1.5; }
    .page-item .buy-warn .i { width: 13px; height: 13px; margin-top: 2px; }
    /* 手机端已有常驻吸底购买栏，中部按钮冗余 → 隐藏（桌面端保留） */
    .page-item #btn-buy { display: none; }

    /* ---- 5. 信任说明单行化 ---- */
    .page-item .assure-list {
        margin-top: 7px; padding: 4px 9px;
        border-radius: 11px;
        display: flex; flex-wrap: wrap;
        gap: 1px 12px;
    }
    .page-item .assure-item { font-size: 11.5px; line-height: 1.5; gap: 4px; }
    .page-item .assure-item .i { width: 12px; height: 12px; margin-top: 2px; }

    /* ---- 6. 商品详情：默认展开（v33 去掉折叠箭头）----
     * 正文超过 128px 才收口，底部给「展开全文」，既不藏内容也不撑爆首屏。 */
    .page-item #desc-panel { margin-top: 7px; border-radius: var(--r-md); }
    .page-item #desc-panel > .panel-header {
        padding: 8px 14px;
        border-bottom: 1px solid var(--line);
    }
    .page-item #desc-panel .panel-title { font-size: 13px; }
    .page-item #desc-panel .panel-body { padding: 9px 14px 11px; }
    .page-item .desc-scroll { position: relative; max-height: 128px; overflow: hidden; }
    .page-item .desc-scroll.is-open { max-height: none; }
    .page-item .desc-scroll:not(.is-open)::after {
        content: "";
        position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface));
        pointer-events: none;
    }
    .page-item .desc-more {
        display: block; width: 100%;
        margin: 5px 0 0; padding: 5px 0;
        border: 0; background: transparent;
        font-family: inherit; font-size: 12px; font-weight: 600;
        color: var(--ink-3); cursor: pointer;
    }
    .page-item .desc-more:active { color: var(--accent); }
    .page-item .acg-rich { font-size: 13px; line-height: 1.7; }
    .page-item .acg-rich :where(p, ul, ol) { margin-bottom: .7em; }

    /* ---- 7. 页脚与吸底栏压缩 ---- */
    .page-item .site-footer { margin-top: 8px; padding: 6px 16px 9px; font-size: 11px; line-height: 1.45; }
    .page-item .buy-bar {
        gap: 10px;
        padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
    }
    .page-item .buy-bar-price { font-size: 20px; }
    .page-item .buy-bar .btn { height: 44px; }
    body.has-buybar.page-item { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
    .page-item .item-head { gap: 4px; }
    .page-item .item-head .badge-soft { padding: 2px 6px; font-size: 11px; }
    .page-item .shared-button { width: 32px; height: 32px; }
}
@media (max-width: 339px) {
    .page-item #item-sold { display: none; }
}

/* ==================== 19. 人机验证弹层（v33） ====================
 * 进站时已在后台无感换好通行证，所以页面上不再常驻验证控件；
 * 只有通行证失效（过期 / 换网络）时，下单前才弹出这个可见验证层。
 * =============================================================== */
/* 静默验证用的宿主容器：不可见但必须真实存在于文档里，Turnstile 才能工作 */
.captcha-host-hidden {
    position: fixed; left: 0; bottom: 0;
    width: 1px; height: 1px;
    overflow: hidden; opacity: 0; pointer-events: none; z-index: -1;
}
.captcha-error { margin-top: 10px; font-size: 12px; color: var(--danger); line-height: 1.6; }

/* ==================== 18. 减少动效偏好 ==================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .spinner { animation: spin .7s linear infinite !important; }
}

/* v146: preserve the transparent brand character silhouette. */
html[data-skin] .brand-logo { width:36px; height:36px; border-radius:0; object-fit:contain; background:transparent; flex-shrink:0; }