/**
 * 十香 · Liquid Glass
 * ------------------------------------------------------------------
 * 参照 iOS 26 / macOS 26 的液态玻璃：
 *   1) 材质 = 半透底色 + backdrop blur + saturate，背后内容要透出来；
 *   2) 镜面高光 = 顶边一条亮色 inset，底边一条暗线 inset，模拟光打在玻璃棱上；
 *   3) 大圆角 + 双层阴影（近处收紧、远处扩散）造厚度；
 *   4) 跟随系统明暗。
 * 布局沿用原版（顶栏 / 公告 / 搜索 / 左分类右商品 / 购买弹窗），只换材质与间距。
 *
 * 注意：.card_count_* / .delivery_way_* / .lot_string / .need-login /
 * .page-button / .draftCard / .price_tips / .seckill_* / .race-click /
 * .checked 这些类名由共用的 assets/static/acg.js 动态写入，不能改名。
 */

/* ============================ 令牌 ============================ */
:root {
    --tk-blur: 30px;
    --tk-blur-strong: 44px;
    /* 200%：饱和拉高让壁纸的颜色透进玻璃时依然鲜活，
       低饱和 + 深色壁纸是之前面板发灰发浊的主因 */
    --tk-saturate: 200%;

    --tk-radius-sm: 10px;
    --tk-radius-md: 16px;
    --tk-radius-lg: 22px;
    --tk-radius-xl: 28px;
    --tk-radius-pill: 999px;

    /* 玻璃三层：面板 / 浮层 / 控件。
       面板偏透让壁纸的颜色进来，浮层偏白保内容对比 */
    --tk-glass: rgba(252, 253, 255, 0.55);
    --tk-glass-raised: rgba(252, 253, 255, 0.78);
    --tk-glass-control: rgba(255, 255, 255, 0.48);
    --tk-glass-hover: rgba(255, 255, 255, 0.80);

    --tk-hairline: rgba(255, 255, 255, 0.62);
    --tk-specular: rgba(255, 255, 255, 0.9);
    --tk-underglow: rgba(15, 20, 35, 0.06);

    /* 列表内部用：分隔线 + 悬停填充。比 hairline 更淡，铺满一列也不吵 */
    --tk-line: rgba(16, 20, 35, 0.08);
    --tk-hover: rgba(16, 20, 35, 0.045);

    --tk-text: #1c1d21;
    --tk-text-dim: #5b5f68;
    --tk-text-faint: #8b9099;

    --tk-accent: #0a84ff;
    --tk-accent-soft: rgba(10, 132, 255, 0.14);
    --tk-pink: #ff5fa2;
    --tk-green: #30c48d;
    --tk-amber: #ff9f0a;
    --tk-red: #ff453a;

    --tk-shadow-near: 0 1px 2px rgba(16, 20, 35, 0.06);
    --tk-shadow-far: 0 18px 42px -14px rgba(16, 20, 35, 0.28);
    --tk-shadow-pop: 0 34px 90px -22px rgba(16, 20, 35, 0.42);

    --tk-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* 原来的暗色玻璃和深色背景图太接近，整片发闷、面板边界看不出来。
           压深底色 + 拉开面板/浮层的差值 + 提亮镜面高光。 */
        --tk-glass: rgba(20, 22, 29, 0.66);
        --tk-glass-raised: rgba(32, 35, 44, 0.80);
        --tk-glass-control: rgba(255, 255, 255, 0.08);
        --tk-glass-hover: rgba(255, 255, 255, 0.14);

        --tk-hairline: rgba(255, 255, 255, 0.12);
        --tk-specular: rgba(255, 255, 255, 0.22);
        --tk-underglow: rgba(0, 0, 0, 0.5);

        --tk-line: rgba(255, 255, 255, 0.08);
        --tk-hover: rgba(255, 255, 255, 0.06);

        --tk-text: #f2f3f5;
        --tk-text-dim: #a9aeb8;
        --tk-text-faint: #7b818c;

        --tk-accent: #4aa3ff;
        --tk-accent-soft: rgba(74, 163, 255, 0.20);

        --tk-shadow-near: 0 1px 2px rgba(0, 0, 0, 0.4);
        --tk-shadow-far: 0 18px 42px -14px rgba(0, 0, 0, 0.66);
        --tk-shadow-pop: 0 34px 90px -22px rgba(0, 0, 0, 0.78);
    }
}

/* ============================ 底层 ============================ */
.tk-body {
    min-height: 100vh;
    margin: 0;
    background-color: #eef1f6;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: var(--tk-text);
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

@media (prefers-color-scheme: dark) {
    .tk-body {
        background-color: #0d1017;
    }
}

/* 商家没配背景图时的兜底。液态玻璃背后必须有东西可折射，
   纯色底会让所有毛玻璃层糊成一片死灰。 */
.tk-body.is-default {
    background-image:
            radial-gradient(1100px 620px at 12% -8%, #cfe4ff 0%, transparent 62%),
            radial-gradient(900px 560px at 88% 4%, #ffd9ec 0%, transparent 58%),
            radial-gradient(1000px 700px at 50% 112%, #d6f5e8 0%, transparent 60%),
            linear-gradient(168deg, #f4f7fc 0%, #eaeef7 100%);
}

@media (prefers-color-scheme: dark) {
    .tk-body.is-default {
        background-image:
                radial-gradient(1100px 620px at 12% -8%, #16304f 0%, transparent 62%),
                radial-gradient(900px 560px at 88% 4%, #3a1c36 0%, transparent 58%),
                radial-gradient(1000px 700px at 50% 112%, #10322a 0%, transparent 60%),
                linear-gradient(168deg, #0e1119 0%, #0a0d14 100%);
    }
}

/* 缓慢漂移的光斑，给玻璃一点可折射的层次 */
.tk-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.tk-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    will-change: transform;
}

.tk-orb-a {
    width: 46vmax;
    height: 46vmax;
    top: -14vmax;
    left: -10vmax;
    background: radial-gradient(circle, rgba(90, 160, 255, 0.55), transparent 70%);
    animation: tk-drift-a 26s var(--tk-ease) infinite alternate;
}

.tk-orb-b {
    width: 40vmax;
    height: 40vmax;
    top: 6vmax;
    right: -12vmax;
    background: radial-gradient(circle, rgba(255, 120, 190, 0.45), transparent 70%);
    animation: tk-drift-b 32s var(--tk-ease) infinite alternate;
}

.tk-orb-c {
    width: 44vmax;
    height: 44vmax;
    bottom: -18vmax;
    left: 28vmax;
    background: radial-gradient(circle, rgba(70, 220, 180, 0.40), transparent 70%);
    animation: tk-drift-c 38s var(--tk-ease) infinite alternate;
}

@keyframes tk-drift-a {
    to { transform: translate3d(7vmax, 5vmax, 0) scale(1.12); }
}

@keyframes tk-drift-b {
    to { transform: translate3d(-6vmax, 8vmax, 0) scale(1.08); }
}

@keyframes tk-drift-c {
    to { transform: translate3d(5vmax, -7vmax, 0) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .tk-orb {
        animation: none;
    }
}

#app {
    position: relative;
    z-index: 1;
}

/* ======================= 玻璃材质基类 ======================= */
.glass {
    position: relative;
    background: var(--tk-glass);
    -webkit-backdrop-filter: blur(var(--tk-blur)) saturate(var(--tk-saturate));
    backdrop-filter: blur(var(--tk-blur)) saturate(var(--tk-saturate));
    border: 1px solid var(--tk-hairline);
    border-radius: var(--tk-radius-lg);
    /* 顺序：贴边高光(上) -> 收边暗线(下) -> 近阴影 -> 远阴影 */
    box-shadow:
            inset 0 1px 0 var(--tk-specular),
            inset 0 -1px 0 var(--tk-underglow),
            var(--tk-shadow-near),
            var(--tk-shadow-far);
}

/* 顶部那道细长镜面反光，是液态玻璃辨识度最高的一笔。
   注意必须 inset:0 铺满整个盒子、让渐变自己在 46% 处收尾，
   不能写成 inset:0 0 auto 0 + height:46%：
   border-radius:inherit 继承的是数值，浏览器再按 min(宽,高)/2 收敛，
   高度只有父元素 46% 的话圆角也只剩一半（顶栏实测 28px -> 13px），
   两个上角就会从父元素的大圆角里探出来一块。
   也不能靠 overflow:hidden 裁——那会把语言下拉菜单一起裁掉。 */
.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 46%);
    pointer-events: none;
    opacity: 0.9;
}

@media (prefers-color-scheme: dark) {
    .glass::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 46%);
    }
}

/* backdrop-filter 不支持时退化成不透明底，别让文字糊在背景图上 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
        background: rgba(255, 255, 255, 0.92);
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    @media (prefers-color-scheme: dark) {
        .glass {
            background: rgba(24, 26, 33, 0.94);
        }
    }
}

/* ============================ 顶栏 ============================ */
.tk-nav-shell {
    position: sticky;
    top: 0;
    z-index: 60;
    /* 左右留白交给里面的 .container，这里只管上边距 */
    padding: 12px 0 0;
}

/* 宽度不写死：外面套了 bootstrap 的 .container，
   这样顶栏边缘和下面的卡片边缘在每个断点都严丝合缝。 */
.tk-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    padding: 8px 14px;
    border-radius: var(--tk-radius-pill);
}

.glass-nav {
    -webkit-backdrop-filter: blur(var(--tk-blur-strong)) saturate(var(--tk-saturate));
    backdrop-filter: blur(var(--tk-blur-strong)) saturate(var(--tk-saturate));
    background: var(--tk-glass-raised);
}

.tk-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 4px 10px 4px 4px;
    border-radius: var(--tk-radius-pill);
    color: var(--tk-text);
    text-decoration: none;
    transition: background .24s var(--tk-ease);
}

.tk-brand:hover {
    background: var(--tk-glass-hover);
    color: var(--tk-text);
    text-decoration: none;
}

.tk-brand-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--tk-hairline), var(--tk-shadow-near);
}

.tk-brand-name {
    font-weight: 650;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34vw;
}

.tk-balance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--tk-radius-pill);
    background: var(--tk-glass-control);
    border: 1px solid var(--tk-hairline);
    box-shadow: inset 0 1px 0 var(--tk-specular);
    color: var(--tk-green);
    font-weight: 650;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background .24s var(--tk-ease), transform .24s var(--tk-ease);
}

.tk-balance:hover {
    background: var(--tk-glass-hover);
    color: var(--tk-green);
    text-decoration: none;
    transform: translateY(-1px);
}

.tk-balance-login,
.tk-balance-login:hover {
    color: var(--tk-accent);
}

.tk-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-wrap: wrap;
}

.tk-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border: 0;
    border-radius: var(--tk-radius-pill);
    background: transparent;
    color: var(--tk-text-dim);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .24s var(--tk-ease), color .24s var(--tk-ease);
}

.tk-nav-link:hover,
.tk-nav-link:focus-visible {
    background: var(--tk-glass-hover);
    color: var(--tk-text);
    text-decoration: none;
    outline: none;
}

/* --------- 语言切换 --------- */
.tk-lang {
    position: relative;
}

.tk-lang-toggle [data-lang-label] {
    font-weight: 700;
    letter-spacing: .01em;
}

.tk-lang.is-open .tk-lang-toggle {
    background: var(--tk-glass-hover);
    color: var(--tk-text);
}

.tk-lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 70;
    display: none;
    min-width: 168px;
    padding: 7px;
    border-radius: var(--tk-radius-md);
}

.glass-menu {
    background: var(--tk-glass-raised);
    -webkit-backdrop-filter: blur(var(--tk-blur-strong)) saturate(var(--tk-saturate));
    backdrop-filter: blur(var(--tk-blur-strong)) saturate(var(--tk-saturate));
    box-shadow:
            inset 0 1px 0 var(--tk-specular),
            var(--tk-shadow-near),
            var(--tk-shadow-pop);
}

.tk-lang.is-open .tk-lang-menu {
    display: block;
    animation: tk-menu-in .22s var(--tk-ease);
}

@keyframes tk-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-lang.is-open .tk-lang-menu {
        animation: none;
    }
}

.tk-lang-item {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: var(--tk-radius-sm);
    color: var(--tk-text);
    font-size: 0.88rem;
    text-decoration: none;
    transition: background .2s var(--tk-ease);
}

.tk-lang-item:hover {
    background: var(--tk-glass-hover);
    color: var(--tk-text);
    text-decoration: none;
}

/* ready.js 给当前语言加 .active */
.tk-lang-item.active {
    font-weight: 700;
    background: var(--tk-accent-soft);
}

.tk-lang-item.active::after {
    content: "\2713";
    margin-left: auto;
    font-weight: 700;
    color: var(--tk-accent);
}

/* ============================ 主体 ============================ */
/* 大屏放宽整体宽度，并把分类栏改成定宽。
   bootstrap 的 .container 到 xl 就停在 1140px，两栏按 25%/75% 分，
   分类栏只剩 255px——多级缩进之后分类名很容易被截断；
   而商品表是「单价/库存/操作」三列定宽 + 一个名称列，宽度本来就富余。
   这里只在 ≥1200px 生效：992~1199 仍走 bootstrap 的 960 容器，
   否则容器会比视口还宽。顶栏也在同一个 .container 里，跟着一起变，边缘不会错位。 */
@media (min-width: 1200px) {
    .container {
        max-width: 1280px;
    }

    .tk-row > .col-lg-3 {
        flex: 0 0 380px;
        max-width: 380px;
    }

    .tk-row > .col-lg-9 {
        flex: 1 1 0;
        max-width: none;
    }
}

.tk-main {
    padding: 18px 0 32px;
}

.tk-row {
    row-gap: 16px;
}

.tk-row > [class^="col"],
.tk-row > [class*=" col"] {
    display: flex;
}

.tk-row > [class^="col"] > .card,
.tk-row > [class*=" col"] > .card {
    width: 100%;
}

/* 覆盖 bootstrap 的 .card：原版是白底实心，这里换成玻璃 */
.glass-card {
    overflow: hidden;
    border-radius: var(--tk-radius-xl);
}

/* macOS 窗口式材质分层：左侧分类栏保持通透（壁纸透进来），
   右侧商品面板用更白的浮层材质——内容可读性和层次感一起拿到 */
.tk-row > .col-lg-9 > .glass-card {
    background: var(--tk-glass-raised);
}

/* i.css:1253 用 !important 给 .card-header 画了一条 1px dashed #efefef 的虚线，
   还顺手锁死了上下 padding（.card-block 同理）。那条虚线看着很旧，
   但它在 !important 上，只能同样用 !important 压回去，换成本主题的发丝线。 */
.glass-card .card-header {
    padding: 15px 20px 12px !important;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tk-line) !important;
}

.glass-card .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--tk-text);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.glass-card .card-title .fa {
    color: var(--tk-accent);
}

.glass-card .card-block {
    position: relative;
    z-index: 1;
    padding: 12px 20px 16px !important;
}

/* ---------- 顶栏图标按钮 + 气泡 ---------- */
.tk-icon-btn {
    padding: 7px 11px;
}

.tk-icon-btn > i {
    font-size: 0.95rem;
}

.tk-pop {
    position: relative;
}

.tk-pop.is-open > .tk-icon-btn {
    background: var(--tk-glass-hover);
    color: var(--tk-text);
}

.tk-pop-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 70;
    display: none;
    padding: 10px;
    border-radius: var(--tk-radius-lg);
}

.tk-pop.is-open > .tk-pop-panel {
    display: block;
    animation: tk-menu-in .22s var(--tk-ease);
}

@media (prefers-reduced-motion: reduce) {
    .tk-pop.is-open > .tk-pop-panel {
        animation: none;
    }
}

/* 搜索气泡给够宽度，不然输入框只剩一条缝 */
.tk-pop-panel.is-search {
    width: min(420px, calc(100vw - 40px));
}

/* ---------- 公告弹层 ---------- */
.tk-notice-pop {
    padding: 26px 28px 28px;
}

.tk-notice-pop-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--tk-line);
    color: var(--tk-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.tk-notice-pop-title .fa {
    color: var(--tk-accent);
}

.tk-notice-pop-body {
    max-height: min(60vh, 520px);
    overflow-y: auto;
    color: var(--tk-text-dim);
    font-size: 0.88rem;
    line-height: 1.75;
}

.tk-notice-pop-body :last-child {
    margin-bottom: 0;
}

.tk-notice-pop-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tk-radius-sm);
}

/* ---------- 搜索控件 ---------- */
.tk-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 14px;
    border-radius: var(--tk-radius-pill);
    background: var(--tk-glass-control);
    border: 1px solid var(--tk-hairline);
    box-shadow: inset 0 1px 0 var(--tk-specular);
    transition: border-color .24s var(--tk-ease), box-shadow .24s var(--tk-ease);
}

.tk-search:focus-within {
    border-color: var(--tk-accent);
    box-shadow: inset 0 1px 0 var(--tk-specular), 0 0 0 4px var(--tk-accent-soft);
}

.tk-search-icon {
    color: var(--tk-text-faint);
    flex-shrink: 0;
}

/* 原版 .commodity-search 是固定 60% 宽 + text-align:center，窄屏挤成一条缝，交给 flex */
.tk-search .commodity-search {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--tk-text);
    font-size: 0.9rem;
    text-align: left;
}

.tk-search .commodity-search:focus {
    outline: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--tk-text);
}

.tk-search .commodity-search::placeholder {
    color: var(--tk-text-faint);
}

.tk-search .commodity-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.tk-search .search-btn {
    flex-shrink: 0;
    height: 34px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--tk-radius-pill);
    background: var(--tk-accent);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 34px;
    box-shadow: 0 6px 16px -6px var(--tk-accent);
    transition: transform .24s var(--tk-ease), filter .24s var(--tk-ease);
}

.tk-search .search-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #fff;
}

.tk-search .search-btn:active {
    transform: translateY(0) scale(.97);
}

.tk-search .search-btn:focus {
    outline: none;
    box-shadow: 0 6px 16px -6px var(--tk-accent), 0 0 0 4px var(--tk-accent-soft);
}

/* ---------- 分类 / 商品列表 ----------
   做法：不再「卡片里套一堆小卡片」，改成 iOS 26 那种分组列表——
   一整块承载面 + 发丝分隔线，高亮只留给悬停和选中。
   行卡片堆叠会把视觉噪点乘以行数，列表一长就很脏。 */

/* bootstrap 的 .row 默认 align-items:stretch，右侧商品卡会被拉到和
   十几项的侧栏一样高，只有一两个商品时下面就是一大片死白。 */
.tk-row {
    align-items: flex-start;
}

.tk-side {
    align-self: flex-start;
}

.category-list {
    user-select: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: min(70vh, 760px);
    /* 分隔线贴着卡片内边距走，滚动时不被裁掉 */
    margin: 0 -6px;
    padding: 0 6px;
}

/* 商品列表一次显示完，不给它自己的滚动条——面板内套一层滚动会把列表
   截成一小格，还要在页面滚动条之外再滚一次。整页滚就行。 */
.shop-content {
    overflow: visible;
    max-height: none;
}

.shop-content .layui-table {
    width: 100%;
    margin: 0;
    background: transparent;
    border: 0;
    border-collapse: collapse;
}

.shop-content .layui-table td,
.shop-content .layui-table th {
    border: 0;
    background: transparent;
    vertical-align: middle;
}

/* 表头做成面板上的微标签，不再是一条独立的深色横条。
   不再 sticky：列表已经没有自己的滚动容器，sticky 会改成吸附在视口顶部，
   跟同样 sticky 的顶栏叠在一起，而且面板滚出屏幕后表头还悬着，很怪。 */
.shop-content .layui-table .head th {
    padding: 6px 10px 10px;
    background: transparent;
    color: var(--tk-text-dim);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.shop-content .layui-table .head {
    position: relative;
}

.shop-content .item td {
    padding: 13px 10px;
    font-size: 0.86rem;
    color: var(--tk-text);
    border-bottom: 1px solid var(--tk-line);
    transition: background .18s var(--tk-ease);
}

.shop-content .item:last-child td {
    border-bottom: 0;
}

.shop-content .item:last-child td {
    border-bottom: 0;
}

.shop-content .item:hover td {
    background: var(--tk-hover);
}

.shop-content .item td:first-child {
    border-top-left-radius: var(--tk-radius-sm);
    border-bottom-left-radius: var(--tk-radius-sm);
}

.shop-content .item td:last-child {
    border-top-right-radius: var(--tk-radius-sm);
    border-bottom-right-radius: var(--tk-radius-sm);
}

.commodity-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    object-fit: cover;
    margin-right: 10px;
    vertical-align: -8px;
    background: var(--tk-hover);
}

/* ---------- 多级分类树 ---------- */
.tk-cat-tree,
.tk-cat-children {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 层级不靠 padding 硬缩进，用一条竖向引导线，父子关系一眼能看出来 */
.tk-cat-children {
    margin-left: 23px;
    padding-left: 9px;
    border-left: 1px solid var(--tk-line);
}

.tk-cat-row {
    display: flex;
    align-items: center;
    gap: 2px;
    /* 去掉了行间分隔线，改用留白分组：竖向引导线 + 图标已经够建立节奏，
       两套线叠一起会切出断断续续的阶梯感 */
    margin-bottom: 2px;
    padding: 8px 10px;
    border-radius: var(--tk-radius-sm);
    color: var(--tk-text);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s var(--tk-ease), color .18s var(--tk-ease);
}

.tk-cat-row:hover {
    background: var(--tk-hover);
}

.tk-cat-row:focus-visible {
    outline: none; /* 压掉浏览器默认的青色 focus ring，用下面的 accent 光环替代 */
    outline: none;
    box-shadow: 0 0 0 3px var(--tk-accent-soft);
}

/* 叶子也占住箭头的位置，图标才对得齐 */
.tk-cat-caret {
    flex: 0 0 15px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--tk-text-faint);
    visibility: hidden;
    transition: transform .22s var(--tk-ease);
}

.tk-cat-row.has-children > .tk-cat-caret {
    visibility: visible;
}

.tk-cat-node.is-open > .tk-cat-row > .tk-cat-caret {
    transform: rotate(90deg);
}

.tk-cat-row .commodity-icon {
    width: 24px;
    height: 24px;
    margin-right: 9px;
    vertical-align: middle;
}

/* 子级图标收一号，层级更明确 */
.tk-cat-children .tk-cat-row .commodity-icon {
    width: 21px;
    height: 21px;
    border-radius: 6px;
}

.tk-cat-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-cat-count {
    flex: 0 0 auto;
    margin-left: 8px;
    color: var(--tk-text-faint);
    font-size: 0.76rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* 空分类不显示「0」——一列 0 全是噪点，靠 :has 做，不支持的浏览器只是照旧显示 */
.tk-cat-row:has(.tk-cat-count.is-zero) .tk-cat-count {
    opacity: 0;
}

.tk-cat-row:hover .tk-cat-count.is-zero {
    opacity: .5;
}

.tk-cat-children {
    display: none;
}

.tk-cat-node.is-open > .tk-cat-children {
    display: block;
}

/* 选中的分类。acg.js 只加 .checked 这一个类，不能改名 */
.checked {
    color: var(--tk-accent) !important;
    font-weight: 700 !important;
}

.tk-cat-row.checked {
    background: var(--tk-accent-soft);
    box-shadow: none;
    border: 0; /* i.css 给全局 .checked 画了一条青绿虚线边，必须压掉 */
}

.tk-cat-row.checked > .tk-cat-caret,
.tk-cat-row.checked > .tk-cat-count {
    color: var(--tk-accent);
}

/* 商品表：名称 / 单价 / 库存 / 操作 */
.shop-content .item td:nth-child(1) {
    font-weight: 650;
}

.shop-content .item td:nth-child(2),
.shop-content .item td:nth-child(3) {
    width: 118px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 价格统一用强调蓝：荧光粉和按钮蓝双强调色在壁纸上打架，
   整页只保留一个彩色系统，粉色让位给徽章场景 */
.shop-content .item td:nth-child(2) {
    color: var(--tk-accent);
    font-weight: 700;
}

.shop-content .item td:nth-child(3) {
    color: var(--tk-text-dim);
    font-weight: 600;
}

/* 库存语义色（stock_state：0=售罄 1=紧张 2=一般 3/4=充足；数字库存也按同一梯度） */
.shop-content .item td.tk-stock-0 {
    color: var(--tk-text-faint);
}

.shop-content .item td.tk-stock-1 {
    color: var(--tk-red);
}

.shop-content .item td.tk-stock-2 {
    color: var(--tk-amber);
}

.shop-content .item td.tk-stock-3,
.shop-content .item td.tk-stock-4 {
    color: var(--tk-green);
}

.shop-content .item td:nth-child(4) {
    width: 104px;
    text-align: right;
}

.shop-content .layui-table .head th:nth-child(2),
.shop-content .layui-table .head th:nth-child(3) {
    text-align: right;
}

/* App Store「获取」按钮形态：常态是浅 tint 胶囊 + 强调色文字，
   悬停才填充实色。一屏十几个实心蓝按钮压在壁纸上太塑料，tint 态安静得多 */
.shop-content .item td:nth-child(4) a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--tk-radius-pill);
    background: var(--tk-accent-soft);
    color: var(--tk-accent);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s var(--tk-ease), color .18s var(--tk-ease),
    transform .18s var(--tk-ease), box-shadow .18s var(--tk-ease);
}

.shop-content .item td:nth-child(4) a:hover {
    background: var(--tk-accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px var(--tk-accent);
    text-decoration: none;
}

.shop-content .item td:nth-child(4) a:active {
    transform: scale(.96);
}

.keguan {
    width: 100%;
    padding: 52px 0;
    text-align: center;
    color: var(--tk-text-faint);
    font-size: 0.9rem;
}

.keguan.is-empty {
    color: var(--tk-text-faint);
}

/* ======================= 购买 / 查单弹窗 ======================= */
/* layui 的浮层：整体换成液态玻璃 */
.layui-layer[type=page],
.layui-layer.layui-layer-page {
    border-radius: var(--tk-radius-xl) !important;
    background: var(--tk-glass-raised) !important;
    -webkit-backdrop-filter: blur(var(--tk-blur-strong)) saturate(var(--tk-saturate)) !important;
    backdrop-filter: blur(var(--tk-blur-strong)) saturate(var(--tk-saturate)) !important;
    border: 1px solid var(--tk-hairline) !important;
    box-shadow:
            inset 0 1px 0 var(--tk-specular),
            var(--tk-shadow-pop) !important;
}

.layui-layer-content {
    border-radius: var(--tk-radius-xl) !important;
}

/* 弹窗高度上限用 CSS 的 max-height，不要用 JS 写死 height。
   JS 写高度会触发：出现滚动条 -> 内容区变窄 -> SKU 胶囊少折一行 -> 高度又变
   的反馈环，最后要么内容只有 641 却撑着 760 空一块，要么来回抖。 */
.layui-layer-page[type=page] .layui-layer-content {
    max-height: min(76vh, 760px);
    overflow-y: auto;
}

.layui-layer-title {
    background: transparent !important;
    border-bottom: 1px solid var(--tk-hairline) !important;
    color: var(--tk-text) !important;
    font-weight: 700 !important;
}

.layui-layer-hui {
    border-radius: var(--tk-radius-md) !important;
    background: var(--tk-glass-raised) !important;
    -webkit-backdrop-filter: blur(20px) saturate(var(--tk-saturate)) !important;
    backdrop-filter: blur(20px) saturate(var(--tk-saturate)) !important;
    border: 1px solid var(--tk-hairline) !important;
    color: var(--tk-text) !important;
    font-weight: 600 !important;
}

.open-commodity,
.open-query {
    padding: 34px 30px;
}

.commodity_name {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tk-hairline);
    color: var(--tk-text);
    font-size: 1.28rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

.commodity-di .general,
.draft_status {
    margin-bottom: 11px;
    color: var(--tk-text-dim);
    font-size: 0.86rem;
    line-height: 1.9;
}

.share_url {
    color: var(--tk-accent);
    cursor: pointer;
    font-size: 0.82rem;
    text-align: center;
}

.description,
.description p {
    color: var(--tk-text-dim);
    font-size: 0.84rem !important;
    margin-bottom: 0 !important;
}

.description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tk-radius-sm);
}

.seckill_end_time {
    color: var(--tk-green) !important;
    font-weight: 650;
}

.seckill_start_time {
    color: var(--tk-amber) !important;
    font-weight: 650;
}

.seckill_end {
    color: var(--tk-text-faint) !important;
}

.commodity-di .price {
    color: var(--tk-accent);
    font-weight: 800;
    font-size: 1.5rem !important;
    letter-spacing: -.01em;
}

.commodity-di .price_tips {
    color: var(--tk-accent);
    font-size: 0.82rem;
    font-weight: 600;
}

/* acg.js 写入的发货方式徽标 */
.delivery_way_hand,
.delivery_way_auto {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--tk-radius-pill);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 650;
}

.delivery_way_hand {
    background: var(--tk-amber);
}

.delivery_way_auto {
    background: var(--tk-green);
}

/* 输入控件：胶囊玻璃 */
.acg-input,
.layui-layer-page input[type=text],
.commodity-di input[type=number],
.commodity-di input[type=password],
.commodity-di input[type=email] {
    display: inline-block !important;
    width: 240px;
    max-width: 100%;
    height: 34px;
    padding: 0 13px !important;
    border: 1px solid var(--tk-hairline) !important;
    border-radius: var(--tk-radius-pill) !important;
    background: var(--tk-glass-control) !important;
    box-shadow: inset 0 1px 0 var(--tk-specular);
    color: var(--tk-text);
    font-size: 0.86rem;
    transition: border-color .24s var(--tk-ease), box-shadow .24s var(--tk-ease);
}

.layui-layer-page input:focus,
.acg-input:focus {
    outline: none;
    border-color: var(--tk-accent) !important;
    box-shadow: inset 0 1px 0 var(--tk-specular), 0 0 0 4px var(--tk-accent-soft);
}

.layui-layer-page input::placeholder {
    color: var(--tk-text-faint) !important;
}

.layui-layer-page textarea {
    border: 1px solid var(--tk-hairline);
    border-radius: var(--tk-radius-md);
    background: var(--tk-glass-control);
    color: var(--tk-text);
    padding: 10px 12px;
}

.layui-layer-page textarea:focus {
    outline: none;
    border-color: var(--tk-accent);
}

.purchase_num {
    width: 92px !important;
}

.captcha-input {
    width: 128px !important;
}

.commodity-di .captcha {
    position: relative;
    top: -1px;
    height: 34px;
    border-radius: var(--tk-radius-sm);
    cursor: pointer;
    vertical-align: middle;
    box-shadow: 0 0 0 1px var(--tk-hairline);
}

/* acg.js 写入的库存状态色。充足绿要 !important：
   列表第三列的 text-dim 列级样式否则会把它盖成灰色 */
.card_count {
    color: var(--tk-green) !important;
}

.card_count_general {
    color: var(--tk-amber) !important;
}

.card_count_immediately {
    color: var(--tk-red) !important;
}

.card_count_unknown {
    color: var(--tk-accent) !important;
}

.card_count_empty {
    color: var(--tk-text-faint) !important;
}

.purchase_count {
    display: none;
    color: var(--tk-accent);
}

.trade_amount {
    color: var(--tk-accent);
    font-weight: 800;
}

/* SKU / 宝贝类型 胶囊 */
.race-click {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 4px 14px;
    border: 1px solid var(--tk-hairline);
    border-radius: var(--tk-radius-pill);
    background: var(--tk-glass-control);
    box-shadow: inset 0 1px 0 var(--tk-specular), var(--tk-shadow-near);
    color: var(--tk-text);
    font-size: 0.82rem;
    cursor: pointer;
    user-select: none;
    text-align: center;
    transition: all .24s var(--tk-ease);
}

.race-click:hover {
    background: var(--tk-glass-hover);
    transform: translateY(-1px);
}

.race-click.checked {
    /* 完整覆盖 border：只改颜色的话，i.css 全局 .checked 的 dashed 线型会保留下来 */
    border: 1px solid var(--tk-accent) !important;
    background: var(--tk-accent-soft) !important;
}

.qq-service,
.web-service {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    padding: 2px 10px;
    border-radius: var(--tk-radius-pill);
    background: var(--tk-glass-control);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.qq-service {
    color: var(--tk-accent);
}

.web-service {
    color: var(--tk-pink);
}

.qq-service:hover,
.web-service:hover {
    background: var(--tk-glass-hover);
    text-decoration: none;
}

.lot {
    padding: 0;
    list-style: none;
    color: var(--tk-green);
    font-size: 0.78rem;
}

.lot_string {
    padding: 2px 0;
}

/* 预选卡密 */
.draft_status {
    display: none;
}

.draft_status table {
    margin: 10px 0 5px;
}

.draft_status .draftCard label {
    color: var(--tk-text-dim);
    font-size: 0.84rem;
}

.draft_premium {
    color: var(--tk-red);
}

.draft_status button[type=button],
.page-button button[type=button] {
    padding: 3px 13px;
    border: 1px solid var(--tk-hairline);
    border-radius: var(--tk-radius-pill);
    background: var(--tk-glass-control);
    box-shadow: inset 0 1px 0 var(--tk-specular);
    color: var(--tk-text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s var(--tk-ease);
}

.draft_status button[type=button]:hover:not(:disabled),
.page-button button[type=button]:hover:not(:disabled) {
    background: var(--tk-glass-hover);
}

.draft_status button[type=button]:focus,
.page-button button[type=button]:focus {
    outline: none;
    box-shadow: inset 0 1px 0 var(--tk-specular), 0 0 0 4px var(--tk-accent-soft);
}

.draft_status button[type=button]:disabled,
.page-button button[type=button]:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.need-login {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--tk-radius-md);
    background: var(--tk-accent-soft);
    color: var(--tk-text);
    font-size: 0.84rem;
    font-weight: 600;
}

.need-login a {
    color: var(--tk-accent);
    font-weight: 700;
}

/* ---------- 付款区 ---------- */
.pay-content {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--tk-hairline);
}

.pay-content label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--tk-text-dim);
    font-size: 0.88rem;
    font-weight: 700;
}

.pay_list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 12px;
}

.pay-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border: 1px solid var(--tk-hairline);
    border-radius: var(--tk-radius-pill);
    background: var(--tk-glass-control);
    box-shadow: inset 0 1px 0 var(--tk-specular), var(--tk-shadow-near);
    color: var(--tk-text);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: all .24s var(--tk-ease);
}

.pay-button:hover {
    background: var(--tk-glass-hover);
    color: var(--tk-text);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 var(--tk-specular), var(--tk-shadow-far);
}

.pay-button:active {
    transform: translateY(0) scale(.97);
}

.pay-button.is-balance {
    background: var(--tk-accent-soft);
    border-color: var(--tk-accent);
    color: var(--tk-accent);
}

.pay-button img {
    height: 22px;
    border-radius: 6px;
}

/* ---------- 查单弹窗（共用 acg.js 渲染） ---------- */
.open-query .search-page,
.open-query .hr-top {
    border-bottom: 1px solid var(--tk-hairline);
}

.open-query .search-page {
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.open-query .hr-top {
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.open-query .search-value {
    width: 280px;
    max-width: 100%;
}

.open-query .search-query,
.open-query .getCard {
    padding: 5px 15px;
    border: 0;
    border-radius: var(--tk-radius-pill);
    background: var(--tk-accent);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px var(--tk-accent);
    transition: filter .2s var(--tk-ease), transform .2s var(--tk-ease);
}

.open-query .search-query:hover,
.open-query .getCard:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.open-query .search-query:focus {
    outline: none;
    box-shadow: 0 6px 14px -6px var(--tk-accent), 0 0 0 4px var(--tk-accent-soft);
}

.open-query .card-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--tk-hairline);
    border-radius: var(--tk-radius-md);
    background: var(--tk-glass-control);
    color: var(--tk-text);
    font-size: 0.84rem;
}

/* ============================ 页脚 ============================ */
.content-icp {
    position: relative;
    z-index: 1;
    padding: 6px 0 26px;
    color: var(--tk-text-faint);
    font-size: 0.76rem;
    text-align: center;
}

p {
    font-size: 0.88rem;
}

/* ============================ 滚动条 ============================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--tk-radius-pill);
    background: rgba(120, 128, 140, 0.36);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 128, 140, 0.58);
    background-clip: content-box;
}

/* ============================ 响应式 ============================ */
@media (max-width: 991.98px) {
    /* 窄屏分类在上、商品在下，分类不能占满一屏，收一点 */
    .category-list {
        max-height: 300px;
    }
}

@media (max-width: 767.98px) {
    .tk-nav-shell {
        padding: 10px 0 0;
    }

    .tk-nav {
        gap: 8px;
        padding: 8px 10px;
        border-radius: var(--tk-radius-xl);
    }

    .tk-nav-links {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        gap: 0;
    }

    .tk-nav-link {
        padding: 7px 9px;
        font-size: 0.8rem;
    }

    /* 窄屏导航是 space-between，搜索图标会落在中间；气泡还按 right:0 锚在图标上
       就会往左溢出屏幕。改成贴着导航条本身左右拉满（.tk-nav 有 .glass 的
       position:relative，正好当定位基准）。 */
    .tk-pop {
        position: static;
    }

    .tk-pop-panel {
        top: calc(100% + 8px);
        left: 10px;
        right: 10px;
        width: auto;
    }

    .tk-pop-panel.is-search {
        width: auto;
    }

    .tk-brand-name {
        max-width: 40vw;
    }

    .glass-card {
        border-radius: var(--tk-radius-lg);
    }

    .glass-card .card-header {
        padding: 13px 15px 10px !important;
    }

    .glass-card .card-block {
        padding: 10px 15px 14px !important;
    }

    .open-commodity,
    .open-query {
        padding: 20px 16px;
    }

    .layui-layer[type=page],
    .layui-layer.layui-layer-page {
        border-radius: 0 !important;
    }

    /* 手机上单价/库存不再固定宽右对齐，跟着内容走 */
    .shop-content .item td:nth-child(2),
    .shop-content .item td:nth-child(3),
    .shop-content .item td:nth-child(4) {
        width: auto;
    }

    .acg-input,
    .layui-layer-page input[type=text] {
        width: 100% !important;
    }

    .purchase_num,
    .captcha-input {
        width: 92px !important;
    }
}

/* ==========================================================================
   商品标签（#807）
   ========================================================================== */
.tk-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.tk-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    background: rgba(var(--tk-tag-rgb), .14);
    color: rgb(var(--tk-tag-rgb));
    border: 1px solid rgba(var(--tk-tag-rgb), .26);
}

.tk-tag--red    { --tk-tag-rgb: 206, 44, 49; }
.tk-tag--orange { --tk-tag-rgb: 204, 78, 0; }
.tk-tag--green  { --tk-tag-rgb: 24, 121, 78; }
.tk-tag--cyan   { --tk-tag-rgb: 0, 111, 137; }
.tk-tag--blue   { --tk-tag-rgb: 13, 116, 206; }
.tk-tag--purple { --tk-tag-rgb: 126, 66, 175; }
.tk-tag--pink   { --tk-tag-rgb: 194, 41, 138; }
.tk-tag--gray   { --tk-tag-rgb: 85, 88, 96; }