/* ════════ 字体加载 ════════ */
@font-face {
    font-family: "Alibaba Sans";
    src: url("../fonts/AlibabaSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Alibaba Sans";
    src: url("../fonts/AlibabaSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Alibaba Sans";
    src: url("../fonts/AlibabaSans-Bold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

/* ════════ CSS 设计令牌 ════════ */
:root {
    --bg: #121417; /* 稍微偏暖、偏中性的极深灰，去掉了原本的冷蓝色调 */
    --bg2: #181a1f; /* 卡片底色同样去蓝光，更沉稳 */
    --bg3: #202329; /* 抽屉和次级面板底色 */
    --bg4: #282c34; /* 悬浮或强调底色 */
    --bd: rgba(255, 255, 255, 0.05); /* 进一步弱化边框线，减少割裂感 */
    --bd2: rgba(255, 255, 255, 0.09); /* 弱化次级边框 */

    /* 核心护眼修改：文字颜色 */
    --t1: #c8d1db; /* 主文字：从刺眼的亮白改为柔和的灰白（防眩光核心） */
    --t2: #8b99a8; /* 次要文字：随之压暗，保持层次 */
    --t3: #617183; /* 弱文字：稍微加深 */

    --accent: #3b82f6; /* 保持主题蓝不变 */
    /* ... 后面颜色保留 ... */
    --up: #f04444;
    --up-bg: rgba(240, 68, 68, 0.12);
    --up-bd: rgba(240, 68, 68, 0.3);
    --up-dim: rgba(240, 68, 68, 0.04);
    --dn: #22c55e;
    --dn-bd: rgba(34, 197, 94, 0.3);
    --flat: #e8edf5;
    --buy: #60a5fa;
    --buy-bg: rgba(59, 130, 246, 0.08);
    --buy-bd: rgba(59, 130, 246, 0.25);
    --buy-dim: rgba(59, 130, 246, 0.15);
    --sell: #f59e0b;
    --sell-bg: rgba(245, 158, 11, 0.08);
    --sell-bd: rgba(245, 158, 11, 0.25);
    --sell-dim: rgba(245, 158, 11, 0.15);
    --warn: #f87171;
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --f-num: "Alibaba Sans", "Helvetica Neue", Arial, sans-serif;
    --f-zh:
        -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
        "Microsoft YaHei", sans-serif;

    /* ═══ 立体质感系统：阴影分级 + 玻璃高光边 + 表面微光（只加光影深度，不改色调/布局） ═══ */
    --inset-hl: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* 顶部一道玻璃高光边 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:
        0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.22);
    --shadow-card:
        var(--inset-hl), 0 1px 2px rgba(0, 0, 0, 0.25),
        0 6px 20px rgba(0, 0, 0, 0.22);
    --shadow-pop: var(--inset-hl), 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-drawer: var(--inset-hl), 0 -12px 48px rgba(0, 0, 0, 0.45);
    /* 主按钮发光（用主题蓝，语义不变） */
    --shadow-glow:
        0 4px 14px rgba(59, 130, 246, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    /* 卡片表面顶部微光渐变（叠在 bg2 上营造隆起感，非改色） */
    --card-sheen: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.025),
        rgba(255, 255, 255, 0) 42%
    );
}

/* ════════ 全局基础 ════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}
body {
    background: var(--bg);
    color: var(--t1);
    font-family: var(--f-zh);
    font-size: 14px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.up {
    color: var(--up);
}
.down {
    color: var(--dn);
}
.flat {
    color: var(--flat);
}
.num {
    font-family: var(--f-num) !important; /* ✅ 新增：防御级优先级，反杀所有劫持插件 */
    font-variant-numeric: tabular-nums; /* 等宽数字：数值跳动时列对齐不抖动 */
    font-feature-settings: "tnum" 1;
}

/* ════════ Header ════════ */
.header {
    position: sticky;
    top: 0;
    z-index: 200;
    padding: calc(var(--sat) + 12px) 16px 12px;
    background: rgba(10, 14, 20, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid color-mix(in srgb, var(--bd) 55%, transparent);
    /* 顶栏退后，指数栏承担主视觉的轻浮起层级 */
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.hd-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}
.hd-title {
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hd-sub {
    font-size: 11px;
    color: var(--t2);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mkt-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--flat);
    flex-shrink: 0;
}
.mkt-dot.open {
    background: var(--dn);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    }
    70% {
        box-shadow: 0 0 0 6px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}
.hd-right {
    text-align: right;
    flex-shrink: 0;
    margin-left: 12px;
}
.hd-time {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hd-date {
    font-size: 10px;
    color: var(--t3);
    margin-top: 3px;
}

/* ════════ 指数栏 ════════ */
.idx-bar {
    width: 100%;
    background: var(--bd);
    border-bottom: 1px solid var(--bd);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
}
/* 源标签：放在 idx-cell 右上角，由 JS 在最后一张卡片注入。
   选择器带 .idx-cell 抬权重——否则被下方后出现的 .src-tag 基础规则整条盖掉 */
/* 只改定位，配色与胶囊底沿用 .src-tag——两处标签视觉必须一致 */
.idx-cell .idx-src-tag {
    position: absolute;
    top: 3px;
    right: 4px;
    margin-left: 0;
    line-height: 1.3;
    pointer-events: none;
}
.idx-cell .idx-src-tag.is-stale {
    background: var(--warn);
}
.idx-bar.is-stale .idx-cell {
    filter: grayscale(1);
}
.idx-bar.is-stale .idx-chg,
.idx-bar.is-stale .idx-price,
.idx-bar.is-stale .idx-lbl {
    color: var(--t3);
}
.idx-bar.is-stale .idx-cell::after {
    background: var(--flat);
    opacity: 0.35;
}
.idx-cell {
    background: var(--card-sheen), var(--bg2);
    padding: 10px 8px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--inset-hl);
}
.idx-cell::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.idx-cell.up::after {
    background: var(--up);
    opacity: 1;
}
.idx-cell.down::after {
    background: var(--dn);
    opacity: 1;
}
.idx-cell.flat::after {
    background: var(--flat);
    opacity: 1;
}
/* 此处代码直接彻底删除，由于使用了 gap，再也不需要手动清除边缘了 */
.idx-lbl {
    font-family: var(--f-zh);
    font-size: 10px;
    color: var(--t2);
    font-weight: 500;
    margin-bottom: 5px;
    white-space: nowrap;
}
.idx-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.idx-chg {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}
.idx-price {
    font-size: 11px;
    font-weight: 400;
    color: var(--t2);
}

/* ════════ 卡片头部栏 ════════ */
.card-header-bar {
    display: none;
    align-items: center;
    padding: 8px 12px;
    margin: -12px -12px 16px -12px;
    background: var(--card-sheen), var(--bg2);
    border-bottom: 1px solid var(--bd2);
    gap: 8px;
    position: sticky;
    top: calc(var(--sat) + 56px);
    z-index: 100;
    overflow: visible;
    box-shadow: var(--inset-hl), var(--shadow-sm);
}
.col-handle {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-1px);
    width: 28px;
    height: 13px;
    background: var(--card-sheen), var(--bg2);
    border: 1px solid var(--bd2);
    border-top: none;
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    color: var(--t3);
    user-select: none;
    line-height: 1;
    box-shadow: var(--shadow-sm);
    transition:
        color 0.2s,
        transform 0.12s ease;
}
.col-handle:active {
    color: var(--t1);
    transform: translateX(-50%) translateY(0);
}
.chb-title {
    font-size: 11px;
    color: var(--t3);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.chb-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.chb-btn {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--bd2);
    background: var(--card-sheen), var(--bg3);
    color: var(--t2);
    font-size: 11px;
    font-family: var(--f-zh);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--inset-hl);
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease,
        filter 0.12s ease;
}
@media (hover: hover) {
    .chb-btn:hover {
        color: var(--t1);
        filter: brightness(1.04);
    }
}
.chb-btn:active {
    background: var(--bg3);
    transform: translateY(1px);
}
#pcProfitArea,
#miniRefBtnPc {
    display: none;
}

/* ════════ 工具栏 ════════ */
.toolbar {
    background: var(--card-sheen), var(--bg2);
    border-top: 1px solid var(--bd);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    box-shadow: var(--inset-hl);
}
body.collapsed-mode .toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px calc(var(--sab) + 10px);
    z-index: 150;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
body.collapsed-mode main {
    padding-bottom: calc(var(--sab) + 68px);
}
.search-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    background: var(--card-sheen), var(--bg3);
    border: 1px solid var(--bd2);
    border-radius: 12px;
    padding: 0 12px;
    gap: 8px;
    box-shadow: var(--inset-hl);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.search-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--buy-dim);
}
.search-wrap input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--t1);
    font-size: 14px;
    padding: 9px 0;
    letter-spacing: 1px;
}
.search-wrap input::placeholder {
    color: var(--t3);
    font-family: var(--f-zh);
    font-size: 13px;
    letter-spacing: 0;
}
.si {
    color: var(--t3);
    font-size: 14px;
    flex-shrink: 0;
}
.tbtn {
    padding: 9px 13px;
    border-radius: 12px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--f-zh);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
        opacity 0.15s,
        transform 0.12s ease,
        filter 0.12s ease;
}
@media (hover: hover) {
    .tbtn:hover {
        filter: brightness(1.04);
    }
}
.tbtn:active {
    opacity: 0.7;
    transform: translateY(1px);
}
.tbtn-p {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-glow);
}

/* ════════ 基金卡片 (移动端) ════════ */
main {
    padding: 12px;
    width: 100%;
}
.card-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.fund-card {
    background: var(--card-sheen), var(--bg2);
    border: 1px solid var(--bd2);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    width: 100%;
    box-shadow: var(--shadow-card);
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.fund-card:active:not(.sortable-chosen):not(.sortable-fallback) {
    transform: translateY(1px);
}
@media (hover: hover) {
    .fund-card:hover {
        transform: translateY(-1px);
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.16), 0 10px 28px rgba(0, 0, 0, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
}
.fund-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--flat);
    transition: background 0.3s ease; /* 涨跌翻转时左侧色条平滑换色 */
}
.fund-card.up-card::before {
    background: var(--up);
}
.fund-card.down-card::before {
    background: var(--dn);
}
.fund-card .card-top {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;
}
.card-info {
    flex: 1;
    min-width: 0;
}
.card-name-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.card-name {
    font-size: 16px;
    font-weight: 600;
    word-break: break-word;
}
.card-code {
    font-size: 10px;
    color: var(--t3);
    font-weight: 400;
}
.card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.drag-handle {
    color: var(--t3);
    cursor: grab;
    font-size: 18px;
    padding: 4px 7px;
    line-height: 1;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    flex-shrink: 0;
    border-radius: 8px;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}
.drag-handle:active {
    background: var(--bg3);
    color: var(--t2);
}
.del-btn {
    font-size: 11px;
    color: var(--t3);
    background: var(--card-sheen), var(--bg3);
    border: 1px solid var(--bd2);
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
    box-shadow: var(--inset-hl);
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
}
.del-btn:active {
    color: var(--up);
    border-color: var(--up-bd);
    transform: translateY(1px);
}

.card-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 1px;
    border-top: 1px solid var(--bd);
    background: var(--bd);
}
.data-half {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 10px;
    gap: 6px;
    overflow: hidden;
    background: var(--card-sheen), var(--bg2);
}
.data-half.stale {
    opacity: 0.35;
    filter: grayscale(1);
}
.data-half.stale .dh-pct {
    color: var(--t3) !important;
}
.data-half:first-child {
    background: var(--card-sheen), var(--buy-bg), var(--bg2);
}
.dh-label {
    font-size: 11px;
    color: var(--t3);
    font-weight: 500;
}
/* 旁路 2.0 百分位：数字在上，降级时「备用」落在其正下方 */
.pe-bypass2 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    margin-left: 4px;
    vertical-align: top;
    font-size: 10px;
    font-weight: 600;
    color: var(--t3);
}
.pe-bypass2 .src-tag {
    margin-left: 0;
}

/* 源标签。D-020 起主线路也出声，做成实心小胶囊——描边字在 9px 下几乎看不清，
   底色撑起对比度。文字用 --bg2（页面底色）而非固定白：浅色主题下是白字，
   深色主题下自动变深字，两边都对胶囊底色形成最大反差，不必写死颜色。 */
.src-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 500;
    color: var(--bg2);
    background: var(--t3);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
    letter-spacing: 0.2px;
}
/* 卡片视图的官方数据源标签（手机）。与 .col-handle 同一套路：absolute 挂在 sticky 的
   .card-header-bar 下沿，**浮在原有空隙里，不占布局高度**——初版做成独立块级行，
   把卡片整体往下推了 22px，用户判为撑开。现在只多出 2px 的 top 间距。
   右对齐到 12px = 与「估算」按钮(#cycleBtn)右边缘、卡片右边缘同一条竖线。
   左侧 .col-handle 在 left:50%，两者不会碰。 */
.card-src-tags {
    position: absolute;
    top: 100%;
    right: 12px;
    padding-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.card-src-tags:empty {
    display: none;
}
.card-src-tags .src-tag {
    margin-left: 0;
}

/* 备用源：数字能用但打了折扣，换告警底色与主源区分 */
.src-tag.is-alt {
    color: var(--bg2);
    background: var(--warn);
}
/* 陈旧不是异常，只是不新鲜：底色降到 --bg4 配常规文字，比主源弱、比告警轻 */
.src-tag.is-stale {
    color: var(--t2);
    background: var(--bg4);
}
.dh-pct {
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 0;
    margin: 0;
    text-align: center;
}
.dh-meta {
    font-size: 10px;
    color: var(--t3);
    white-space: nowrap;
    display: flex;
    gap: 8px;
    opacity: 0.8;
}
.dh-meta b {
    color: var(--t2);
}
.inline-pct {
    display: none;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 68px;
    text-align: right;
}

.fund-card.collapsed .card-data {
    display: none;
}
.fund-card.collapsed .card-top {
    min-height: 40px;
    padding: 6px 10px 6px 7px;
    gap: 6px;
    align-items: center;
}
.fund-card.collapsed .card-name {
    font-size: 13px;
    line-height: 1.2;
}
.fund-card.collapsed .card-code,
.fund-card.collapsed .del-btn {
    display: none;
}
.fund-card.collapsed .inline-pct {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 2px 0;
}
/* ════════ 空状态与加载动效 ════════ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--t3);
    min-height: 250px;
}
.empty-icon {
    font-size: 52px;
    margin-bottom: 16px;
    opacity: 0.9;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}
@keyframes pulseOpacity {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}
.loading-pulse {
    animation: pulseOpacity 1.5s ease-in-out infinite;
}
.sortable-ghost {
    opacity: 0.22;
    background: var(--bg3);
    border: 1px dashed var(--accent);
    box-shadow: none;
}
.sortable-chosen .drag-handle {
    cursor: grabbing;
}
.sortable-drag {
    opacity: 0.18;
    transition: none !important;
}
.sortable-fallback {
    opacity: 0.96 !important;
    background: var(--card-sheen), var(--bg2);
    border: 1px solid var(--bd2);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    pointer-events: none;
    z-index: 900 !important;
    transition: none !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@keyframes flashUp {
    0% {
        background: rgba(240, 68, 68, 0.28);
    }
    100% {
        background: transparent;
    }
}
@keyframes flashDown {
    0% {
        background: rgba(34, 197, 94, 0.28);
    }
    100% {
        background: transparent;
    }
}
.flash-up {
    animation: flashUp 0.8s ease-out;
}
.flash-down {
    animation: flashDown 0.8s ease-out;
}

/* ════════ 表格视图 (PC端) ════════ */
.table-view {
    display: none;
}
.fund-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0;
    background: transparent;
    border: none;
}
.fund-table th {
    padding: 0 20px 8px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    color: var(--t3);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-bottom: none;
}
.fund-table td {
    padding: 5px 20px 7px;
    background: var(--bg2);
    border-top: 1px solid var(--bd);
    border-bottom: 1px solid var(--bd);
    vertical-align: middle;
    transition: background 0.2s;
}
.fund-table td:first-child {
    border-left: 4px solid var(--flat);
    border-radius: 8px 0 0 8px;
}
.fund-table td:last-child {
    border-right: 1px solid var(--bd);
    border-radius: 0 8px 8px 0;
}
.fund-table tbody tr:hover td {
    background: var(--bg3);
}
.fund-table tbody tr.up-row td:first-child {
    border-left-color: var(--up);
}
.fund-table tbody tr.down-row td:first-child {
    border-left-color: var(--dn);
}

.tbl-drag {
    color: var(--t3);
    cursor: grab;
    font-size: 18px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
}
.tbl-name {
    font-size: 15px;
    font-weight: 600;
}
.tbl-code {
    font-size: 11px;
    color: var(--t3);
    margin-top: 4px;
}
.tbl-pct {
    font-size: 22px;
    font-weight: 600;
    border-radius: 6px;
    padding: 0 4px;
    margin-left: -4px;
}
.tbl-nav {
    font-size: 13px;
    color: var(--t2);
    margin-top: 2px;
}
.tbl-nav .nv {
    color: var(--t1);
    font-weight: 500;
}
.tbl-time {
    font-size: 11px;
    color: var(--t2);
    margin-top: 3px;
}
.tbl-del {
    font-size: 12px;
    color: var(--t3);
    background: transparent;
    border: 1px solid var(--bd2);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
}
.tbl-del:hover {
    color: var(--up);
    border-color: var(--up-bd);
    background: var(--up-bg);
}

/* ════════ PE 栏 ════════ */
.pe-bar {
    background: var(--card-sheen), var(--bg2);
    border-bottom: 1px solid var(--bd2);
    padding: 9px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--inset-hl), var(--shadow-sm);
    position: relative;
    z-index: 1;
}
.pe-bar-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.pe-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.pe-bar-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.pe-label {
    font-size: 11px;
    color: var(--t3);
    white-space: nowrap;
}
.pe-value {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    transition: color 0.3s ease;
}
.pe-value.pe-danger-up {
    color: var(--sell);
}
.pe-value.pe-danger-dn {
    color: var(--buy);
}
.pe-value.pe-normal {
    color: var(--t1);
}
.pe-status {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--inset-hl);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}
.pe-status.triggered-buy {
    background: var(--buy-bg);
    color: var(--buy);
    border: 1px solid var(--buy-bd);
}
.pe-status.triggered-sell {
    background: var(--sell-bg);
    color: var(--sell);
    border: 1px solid var(--sell-bd);
}
.pe-status.normal {
    background: var(--bg3);
    color: var(--t3);
    border: 1px solid var(--bd);
}
.pe-track {
    flex: 1;
    max-width: 200px;
    height: 10px;
    background: var(--bg3);
    border-radius: 5px;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.pe-track-marker {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--t1);
    border: 2px solid var(--bg2);
    transform: translate(-50%, -50%);
    transition:
        left 0.3s,
        background 0.3s;
    animation: peMarkerPulse 2s infinite;
    z-index: 2;
}
@keyframes peMarkerPulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--t1) 67%, transparent);
    }
    70% {
        box-shadow: 0 0 0 5px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}
.pe-track-lo {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--buy);
    border-radius: 2px;
    transition: left 0.3s;
    z-index: 1;
}
.pe-track-hi {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sell);
    border-radius: 2px;
    transition: left 0.3s;
    z-index: 1;
}
.pe-track-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-sheen), var(--bg2);
    border: 1px solid var(--bd2);
    border-radius: 8px;
    padding: 6px 12px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 100;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}
.pe-input-btn {
    font-size: 11px;
    color: var(--t2);
    background: var(--card-sheen), var(--bg3);
    border: 1px solid var(--bd2);
    border-radius: 999px;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: var(--inset-hl);
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease,
        filter 0.12s ease;
}
@media (hover: hover) {
    .pe-input-btn:hover {
        color: var(--t1);
        filter: brightness(1.04);
    }
}
.pe-input-btn:active {
    background: var(--bg3);
    transform: translateY(1px);
}
#holdingBtn {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    color: var(--t2);
}

/* ════════ 抽屉 & 弹窗 ════════ */
.drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.drawer-mask.open {
    opacity: 1;
    pointer-events: all;
}

.drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 501;
    background: var(--card-sheen), var(--bg2);
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--bd2);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0);
    box-shadow: var(--shadow-drawer);
    overflow: hidden;
}
.drawer.open {
    transform: translateY(0);
}

.drawer-handle {
    width: 36px;
    height: 4px;
    background: var(--bd2);
    border-radius: 2px;
    margin: 12px auto 0;
    box-shadow: var(--inset-hl);
}
.drawer-header {
    padding: 12px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-sheen), var(--bg2);
    border-bottom: 1px solid var(--bd2);
    flex-shrink: 0;
}
.drawer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
}
.drawer-close {
    font-size: 20px;
    color: var(--t3);
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    box-shadow: var(--inset-hl);
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
}
.drawer-close:active {
    color: var(--t1);
    border-color: var(--bd2);
    transform: translateY(1px);
}
.drawer-body {
    overflow-y: auto;
    padding: 12px;
    flex: 1;
    background: var(--bg);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.drawer-footer {
    padding: 8px 16px calc(var(--sab) + 8px);
    background: var(--card-sheen), var(--bg2);
    border-top: 1px solid var(--bd2);
    flex-shrink: 0;
    display: flex;
    gap: 8px;
}

.drawer-footer-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: 10px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--f-zh);
    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}
@media (hover: hover) {
    .drawer-footer-btn:hover {
        filter: brightness(1.04);
    }
}
.drawer-footer-btn:active {
    transform: translateY(1px);
    filter: brightness(0.93);
}
.drawer-footer-btn--cancel {
    flex: 1;
    border: 1px solid var(--bd2);
    background: var(--bg3);
    color: var(--t2);
    font-weight: 400;
    box-shadow: var(--inset-hl);
}
.drawer-footer-btn--primary {
    flex: 2;
    box-shadow: var(--shadow-glow);
}

.dr-lbl {
    font-size: 12px;
    font-weight: 400;
    color: var(--t3);
}
.dr-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    word-break: break-word;
}
.dr-val {
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
}
.dr-val.lg {
    font-size: 18px;
}

.pe-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pe-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
.pe-modal-box {
    position: relative;
    background: var(--bg2);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 320px;
    border: 1px solid var(--bd2);
    box-shadow: var(--shadow-pop);
    animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.pe-modal-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}
.pe-modal-sub {
    font-size: 12px;
    color: var(--t3);
    margin-bottom: 16px;
}
.pe-modal-input,
.pe-modal-select {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--bd2);
    border-radius: 10px;
    color: var(--t1);
    font-weight: 600;
    padding: 12px 16px;
    outline: none;
}
.pe-modal-select {
    font-family: var(--f-zh);
    font-size: 14px;
    appearance: none;
    cursor: pointer;
}
.pe-modal-input,
.pe-modal-select {
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.pe-modal-input:focus,
.pe-modal-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--buy-dim);
}
.pe-modal-btns {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.pe-modal-cancel {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--bd2);
    background: transparent;
    color: var(--t2);
    font-size: 14px;
    font-family: var(--f-zh);
    cursor: pointer;
    outline: none;
}
.pe-modal-confirm {
    flex: 2;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--f-zh);
    cursor: pointer;
    outline: none;
    box-shadow: var(--shadow-glow);
}
.pe-modal-confirm,
.pe-modal-cancel {
    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}
.pe-modal-confirm:active,
.pe-modal-cancel:active {
    transform: translateY(1px);
    filter: brightness(0.94);
}

.stale-text {
    opacity: 0.35;
    filter: grayscale(1);
}

.token-textarea {
    width: 100%;
    height: 80px;
    background: var(--bg3);
    border: 1px solid var(--bd2);
    border-radius: 10px;
    color: var(--t1);
    font-size: 12px;
    padding: 12px;
    outline: none;
    resize: none;
    word-break: break-all;
}
.modal-btn-zh {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--f-zh);
    cursor: pointer;
    box-shadow: var(--shadow-glow);
}
.modal-btn-cancel {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--bd2);
    background: transparent;
    color: var(--t2);
    font-size: 14px;
    font-family: var(--f-zh);
    cursor: pointer;
}

/* ════════ 抽屉内部结构组件 ════════ */
.dr-sec {
    margin-bottom: 16px;
}
.dr-section {
    margin-bottom: 14px;
}
.dr-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}
.dr-section-title {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 5px 11px;
    margin-bottom: 7px;
    border: 1px solid var(--bd2);
    border-radius: 999px;
    background: var(--card-sheen), var(--bg3);
    color: var(--t1);
    font-family: var(--f-zh);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: var(--inset-hl), var(--shadow-sm);
}
.dr-section-head .dr-section-title {
    margin-bottom: 0;
    flex-shrink: 0;
}
.dr-section-title.buy {
    color: var(--buy);
    background: var(--buy-bg);
    border-color: var(--buy-bd);
}
.dr-section-title.sell {
    color: var(--sell);
    background: var(--sell-bg);
    border-color: var(--sell-bd);
}
.dr-section-meta {
    min-width: 0;
    color: var(--t3);
    font-family: var(--f-zh);
    font-size: 12px;
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
}
.dr-section-meta .num {
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
}
.dr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.dr-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    background: var(--card-sheen), var(--bg3);
    border: 1px solid var(--bd2);
    border-radius: 8px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    box-shadow: var(--inset-hl), var(--shadow-sm);
}
.dr-tag.buy {
    color: var(--buy);
    background: var(--buy-bg);
    border-color: var(--buy-bd);
}
.dr-tag.sell {
    color: var(--sell);
    background: var(--sell-bg);
    border-color: var(--sell-bd);
}
.dr-card {
    background: var(--card-sheen), var(--bg3);
    border-radius: 12px;
    border: 1px solid var(--bd2);
    overflow: hidden;
    box-shadow: var(--inset-hl), var(--shadow-card);
}
.dr-pad {
    padding: 10px 14px;
}
.dr-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dr-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dr-summary-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    min-height: 92px;
}
.dr-summary-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.dr-grid-holding {
    display: grid;
    grid-template-columns: minmax(80px, 1.3fr) minmax(65px, 1fr) 52px minmax(
            85px,
            1.2fr
        );
    gap: 8px;
}
.dr-table-card {
    padding: 4px 0;
}
.dr-table-head {
    align-items: center;
    padding: 7px 12px;
    background: var(--bg2);
    border-bottom: 1px solid var(--bd);
    color: var(--t3);
    font-family: var(--f-zh);
    font-size: 11px;
    font-weight: 400;
}
.dr-table-row {
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid var(--bd);
}
.dr-table-head + .dr-table-row {
    border-top: none;
}
.dr-product-name {
    min-width: 0;
    overflow: hidden;
    color: var(--t1);
    font-family: var(--f-zh);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dr-config-row {
    align-items: center;
    padding: 8px 12px;
}
.dr-config-row + .dr-config-row {
    border-top: 1px dashed var(--bd2);
}
.dr-input-ghost {
    flex: 1;
    min-width: 0;
    background: var(--bg2);
    border: 1px solid transparent;
    border-radius: 6px;
    outline: none;
    color: var(--t1);
    padding: 3px 6px;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.dr-input-ghost:focus {
    background: var(--bg2);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.dr-card input[type="number"] {
    box-shadow: var(--inset-hl);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.dr-card input[type="number"]:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent);
}
.dr-priority-pill {
    width: 34px;
    height: 24px;
    border: 1px solid var(--bd2);
    border-radius: 6px;
    font-family: var(--f-zh);
    font-size: 11px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}
.dr-priority-pill:active {
    transform: translateY(1px);
}
.dr-mini-input {
    width: 40px;
    height: 24px;
    border: 1px solid var(--bd2);
    border-radius: 6px;
    background: var(--bg2);
    color: var(--t1);
    font-size: 13px;
    text-align: center;
    outline: none;
}
.dr-mini-input--accent {
    color: var(--accent);
    font-weight: 600;
}
.dr-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--bd2);
}
.dr-badge.gray {
    background: var(--card-sheen), var(--bg2);
    color: var(--t3);
}
.dr-plan-box {
    padding: 12px 16px;
    background: var(--card-sheen), var(--bg2);
    border-radius: 10px;
    border: 1px solid var(--buy-bd);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--inset-hl), var(--shadow-card);
}
.dr-plan-box.sell {
    border-color: var(--sell-bd);
}
.dr-plan-card {
    padding: 12px;
    background: var(--card-sheen), var(--bg3);
}
.dr-plan-card.buy {
    border-color: var(--buy-bd);
}
.dr-plan-card.sell {
    border-color: var(--sell-bd);
}
.dr-flow-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dr-flow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--bd);
    border-radius: 10px;
    background: var(--bg2);
    box-shadow: var(--inset-hl);
}
.dr-flow-main {
    min-width: 0;
    overflow: hidden;
    color: var(--t1);
    font-family: var(--f-zh);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dr-flow-main span {
    font-weight: 400;
}
.dr-flow-main b {
    font-weight: 600;
}
.dr-flow-main em {
    color: var(--t3);
    font-style: normal;
    margin-left: 4px;
}
.dr-flow-shares {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}
.dr-flow-shares.buy {
    color: var(--buy);
}
.dr-flow-shares.sell {
    color: var(--sell);
}
.dr-flow-shares span {
    margin-left: 2px;
    color: var(--t2);
    font-family: var(--f-zh);
    font-size: 11px;
    font-weight: 400;
}
.dr-plan-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
    color: var(--t2);
    font-family: var(--f-zh);
    font-size: 13px;
}
.dr-plan-foot b {
    color: var(--t1);
    font-size: 14px;
    font-weight: 600;
}
.dr-plan-foot b.warn {
    color: var(--warn);
}
.dr-cloud-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.dr-cloud-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--bd2);
    border-radius: 10px;
    background: var(--card-sheen), var(--bg3);
    box-shadow: var(--inset-hl), var(--shadow-sm);
    font-family: var(--f-zh);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}
.dr-cloud-btn:disabled {
    cursor: not-allowed;
}
@media (hover: hover) {
    .dr-cloud-btn:not(:disabled):hover {
        filter: brightness(1.04);
    }
}
.dr-cloud-btn:active {
    transform: translateY(1px);
}
.pri-btn {
    font-size: 13px;
    height: 30px;
    width: 80px;
    border-radius: 6px;
    border: 1px solid var(--bd2);
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}
.pri-btn.active {
    color: var(--sell);
    border-color: var(--sell);
    background: var(--sell-bg);
}

/* ════════ 浅色模式 ════════ */
@media (prefers-color-scheme: light) {
    :root {
        --bg: #f0f4f8;
        --bg2: #ffffff;
        --bg3: #f0f4f8;
        --bg4: #e2e8f0;
        --bd: rgba(0, 0, 0, 0.08);
        --bd2: rgba(0, 0, 0, 0.14);
        --t1: #1a202c;
        --t2: #4a5568;
        --t3: #718096;
        --accent: #2563eb;
        --flat: #1a202c;
        --up: #e62e2e;
        --up-bg: rgba(230, 46, 46, 0.08);
        --up-bd: rgba(230, 46, 46, 0.3);
        --up-dim: rgba(230, 46, 46, 0.04);
        --dn: #15a34a;
        --dn-bd: rgba(21, 163, 74, 0.3);
        --buy: #2563eb;
        --buy-bg: rgba(37, 99, 235, 0.08);
        --buy-bd: rgba(37, 99, 235, 0.25);
        --buy-dim: rgba(37, 99, 235, 0.15);
        --sell: #d97706;
        --sell-bg: rgba(217, 119, 6, 0.08);
        --sell-bd: rgba(217, 119, 6, 0.25);
        --sell-dim: rgba(217, 119, 6, 0.15);
        --warn: #ef4444;
        /* 浅色模式立体：阴影更轻，白色高光更亮（白底上做顶部玻璃光泽） */
        --inset-hl: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.1);
        --shadow-card: var(--inset-hl), 0 1px 2px rgba(0, 0, 0, 0.06),
            0 6px 18px rgba(0, 0, 0, 0.08);
        --shadow-pop: var(--inset-hl), 0 16px 48px rgba(0, 0, 0, 0.18);
        --shadow-drawer: var(--inset-hl), 0 -10px 40px rgba(0, 0, 0, 0.12);
        --shadow-glow: 0 4px 14px rgba(37, 99, 235, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
        --card-sheen: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0) 42%
        );
    }
    .header,
    .card-header-bar {
        background: var(--card-sheen), rgba(240, 244, 248, 0.95);
    }
    .toolbar {
        background: var(--card-sheen), rgba(255, 255, 255, 0.95);
    }
}

/* ════════ 桌面端 ════════ */
@media (min-width: 768px) {
    .drawer {
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        max-width: 480px;
        border-radius: 16px 16px 0 0;
    }
    .drawer.open {
        transform: translateX(-50%) translateY(0);
    }
    .idx-bar {
        grid-template-columns: repeat(6, 1fr);
    }
    /* 此处代码直接彻底删除。桌面端只需保留 .idx-bar 的 repeat(6, 1fr) 即可，gap 自动处理 5 条竖线，0 条横线 */
    .card-header-bar,
    #cycleBtn,
    #colBtn,
    .card-src-tags,
    .card-view {
        display: none !important;
    }
    #pcProfitArea,
    .table-view {
        display: flex !important;
    }
    #miniRefBtnPc {
        display: block !important;
    }
    .table-view {
        display: block !important;
    }
    main {
        padding: 14px 24px 14px;
        max-width: 1200px;
        margin: 0 auto;
    }
    body.collapsed-mode .toolbar {
        position: static;
        padding: 10px 12px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body.collapsed-mode main {
        padding-bottom: 0;
    }
}

/* ════════ 移动端 ════════ */
@media (max-width: 767px) {
    .toolbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 12px calc(var(--sab) + 10px);
        z-index: 150;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    main {
        padding-bottom: calc(var(--sab) + 68px);
    }
}

/* ════════ 质感打磨 · 全局细节 ════════ */
::selection {
    background: var(--buy-dim);
    color: var(--t1);
}
/* 细腻滚动条（WebKit 覆盖式，不占布局） */
.drawer-body::-webkit-scrollbar {
    width: 6px;
}
.drawer-body::-webkit-scrollbar-thumb {
    background: var(--bd2);
    border-radius: 3px;
}
.drawer-body::-webkit-scrollbar-track {
    background: transparent;
}
/* 尊重系统"减弱动态效果"：位移/缩放类动效退化为瞬时，避免眩晕 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}