/* ================================================================
 *  天工云擎 · 主题系统
 *  日间: 暖米色 / 暗色: 温黑 (参考 Material Design & Apple HIG)
 * ================================================================ */

/* ---- CSS 自定义属性: 日间 (默认) ---- */
:root {
    --bg-page: #faf9f5;
    --bg-block: #f5f4ed;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #eeede8;
    --bg-active: #e8e7e2;
    --border: #e5e3dc;
    --border-light: #f0efeb;
    --border-focus: #141413;
    --text-primary: #141413;
    --text-secondary: #6b6966;
    --text-tertiary: #9d9b97;
    --text-placeholder: #bfbdb8;
    --text-inverse: #ffffff;
    --accent: #141413;
    --accent-hover: #2a2a28;
    --accent-soft: #f0efea;
    --accent-border: #d4d2ca;
    --success: #10b981;
    --success-soft: #ecfdf5;
    --success-border: #a7f3d0;
    --danger: #ef4444;
    --danger-soft: #fef2f2;
    --danger-border: #fecaca;
    --pink: #db2777;
    --pink-soft: #fdf2f8;
    --blue: #3b82f6;
    --purple: #8b5cf6;
    --orange: #f97316;
    --header-bg: rgba(250, 249, 245, 0.85);
    --nav-bg: rgba(250, 249, 245, 0.92);
    --overlay: rgba(20, 20, 19, 0.4);
    --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.04);
    --shadow-md: 0 4px 12px rgba(20, 20, 19, 0.06);
    --shadow-lg: 0 12px 32px rgba(20, 20, 19, 0.1);
}

/* ---- CSS 自定义属性: 暗色 ---- */
.dark {
    --bg-page: #141413;
    --bg-block: #1e1d1b;
    --bg-elevated: #262523;
    --bg-input: #1a1917;
    --bg-hover: #2a2927;
    --bg-active: #333130;
    --border: #333130;
    --border-light: #2a2927;
    --border-focus: #f5f4ed;
    --text-primary: #e8e6e3;
    --text-secondary: #9d9b97;
    --text-tertiary: #6b6966;
    --text-placeholder: #555350;
    --text-inverse: #141413;
    --accent: #f5f4ed;
    --accent-hover: #ffffff;
    --accent-soft: rgba(245, 244, 237, 0.08);
    --accent-border: #555350;
    --success: #34d399;
    --success-soft: rgba(16, 185, 129, 0.12);
    --success-border: rgba(16, 185, 129, 0.3);
    --danger: #f87171;
    --danger-soft: rgba(239, 68, 68, 0.1);
    --danger-border: rgba(239, 68, 68, 0.25);
    --pink: #f472b6;
    --pink-soft: rgba(219, 39, 119, 0.1);
    --blue: #60a5fa;
    --purple: #a78bfa;
    --orange: #fb923c;
    --header-bg: rgba(20, 20, 19, 0.85);
    --nav-bg: rgba(20, 20, 19, 0.92);
    --overlay: rgba(0, 0, 0, 0.55);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ================================================================
 *  全局重置 & 基础
 * ================================================================ */
[v-cloak] { display: none !important; }
.vue-unmounted [v-if], .vue-unmounted [v-show], .vue-unmounted [v-for] { display: none !important; }

* { -webkit-tap-highlight-color: transparent; }
html { background: var(--bg-page); }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", "PingFang SC",
                 "Microsoft YaHei", sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, select, input, textarea, a {
    touch-action: manipulation;
    color: inherit;
}

.min-w-0 { min-width: 0; overflow-wrap: break-word; }
.shrink-0 { flex-shrink: 0; }

/* ================================================================
 *  全局 Tailwind 类覆写 —— 日间 (bg-white → 卡片, bg-gray-50 → 页面...)
 * ================================================================ */

/* -- 背景 -- */
.bg-white           { background-color: var(--bg-block) !important; }
.bg-gray-50         { background-color: var(--bg-page) !important; }
.bg-gray-50\/50     { background-color: var(--bg-active) !important; }
.bg-emerald-50      { background-color: var(--accent-soft) !important; }
.bg-emerald-100     { background-color: var(--accent-soft) !important; }
.bg-pink-50\/50     { background-color: var(--pink-soft) !important; }
.bg-black\/40       { background-color: var(--overlay) !important; }
.bg-black\/50       { background-color: var(--overlay) !important; }

/* 强调色按钮 */
.bg-emerald-500     { background-color: var(--accent) !important; }
.bg-blue-500        { background-color: var(--blue) !important; }
.bg-purple-500      { background-color: var(--purple) !important; }
.bg-orange-500      { background-color: var(--orange) !important; }

/* active 态按钮背景 */
.active\:bg-gray-50:active, .active\:bg-gray-100:active { background-color: var(--bg-hover) !important; }
.active\:bg-emerald-600:active { background-color: var(--accent-hover) !important; }
.active\:bg-blue-600:active    { background-color: #2563eb !important; }
.active\:bg-purple-600:active  { background-color: #7c3aed !important; }
.active\:bg-orange-600:active  { background-color: #ea580c !important; }
.active\:bg-red-50:active      { background-color: var(--danger-soft) !important; }

/* -- 文字 -- */
.text-gray-800       { color: var(--text-primary) !important; }
.text-gray-700       { color: var(--text-primary) !important; }
.text-gray-600       { color: var(--text-secondary) !important; }
.text-gray-500       { color: var(--text-secondary) !important; }
.text-gray-400       { color: var(--text-tertiary) !important; }
.text-gray-300       { color: var(--text-tertiary) !important; }
.text-white          { color: #ffffff !important; }

.text-emerald-600    { color: var(--accent) !important; }
.text-emerald-500    { color: var(--accent) !important; }
.text-emerald-700    { color: var(--accent) !important; }
.text-red-400        { color: var(--danger) !important; }
.text-red-500        { color: var(--danger) !important; }
.text-pink-400       { color: var(--pink) !important; }
.text-pink-500       { color: var(--pink) !important; }
.text-pink-700       { color: var(--pink) !important; }

/* -- 边框 -- */
.border-gray-200     { border-color: var(--border) !important; }
.border-gray-100     { border-color: var(--border-light) !important; }
.border-gray-300     { border-color: var(--border) !important; }
.border-gray-50      { border-color: var(--border-light) !important; }
.border-emerald-200  { border-color: var(--accent-border) !important; }
.border-emerald-300  { border-color: var(--accent-border) !important; }
.border-emerald-400  { border-color: var(--accent) !important; }
.border-red-200      { border-color: var(--danger-border) !important; }

/* -- 分割线 (divide) -- */
.divide-gray-50 > * + * { border-color: var(--border-light) !important; }

/* -- 占位符 -- */
.placeholder-gray-400::placeholder,
input::placeholder,
textarea::placeholder { color: var(--text-placeholder) !important; }

/* -- focus ring -- */
.focus\:ring-emerald-400:focus {
    --tw-ring-color: var(--border-focus) !important;
}
.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px var(--border-focus) !important;
}

/* -- selection / accent color for checkboxes -- */
.accent-emerald-500 { accent-color: var(--accent); }

/* ================================================================
 *  暗色模式覆写
 * ================================================================ */

/* -- 背景暗色覆写 -- */
.dark .bg-white                        { background-color: var(--bg-block) !important; }
.dark .bg-gray-50                      { background-color: var(--bg-page) !important; }
.dark .bg-gray-50\/50                  { background-color: var(--bg-active) !important; }
.dark .bg-gray-750                     { background-color: var(--bg-hover) !important; }
.dark .bg-gray-800                     { background-color: var(--bg-block) !important; }
.dark .bg-gray-700                     { background-color: var(--bg-input) !important; }
.dark .bg-gray-800\/90                 { background-color: rgba(30, 29, 27, 0.9) !important; }
.dark .bg-gray-800\/95                 { background-color: rgba(30, 29, 27, 0.95) !important; }
.dark .bg-gray-900                     { background-color: var(--bg-page) !important; }
.dark .bg-emerald-50                   { background-color: var(--accent-soft) !important; }
.dark .bg-emerald-100                  { background-color: var(--accent-soft) !important; }
.dark .bg-emerald-900\/20              { background-color: var(--accent-soft) !important; }
.dark .bg-emerald-900\/30              { background-color: rgba(245, 244, 237, 0.1) !important; }
.dark .bg-pink-50\/50                  { background-color: var(--pink-soft) !important; }
.dark .bg-pink-900\/10                 { background-color: var(--pink-soft) !important; }
.dark .bg-black\/40                    { background-color: rgba(0, 0, 0, 0.6) !important; }
.dark .bg-black\/50                    { background-color: rgba(0, 0, 0, 0.7) !important; }

/* active 暗色覆写 */
.dark .active\:bg-gray-100:active     { background-color: var(--bg-active) !important; }
.dark .active\:bg-gray-50:active      { background-color: var(--bg-active) !important; }
.dark .dark\:active\:bg-gray-700:active { background-color: var(--bg-hover) !important; }
.dark .dark\:active\:bg-emerald-900\/20:active { background-color: var(--accent-soft) !important; }
.dark .dark\:active\:bg-red-900\/20:active     { background-color: var(--danger-soft) !important; }

/* -- 文字暗色覆写 -- */
.dark .text-gray-800       { color: var(--text-primary) !important; }
.dark .text-gray-700       { color: var(--text-primary) !important; }
.dark .text-gray-600       { color: var(--text-secondary) !important; }
.dark .text-gray-500       { color: var(--text-secondary) !important; }
.dark .text-gray-400       { color: var(--text-tertiary) !important; }
.dark .text-gray-300       { color: var(--text-tertiary) !important; }
.dark .dark\:text-white    { color: #ffffff !important; }
.dark .dark\:text-gray-100 { color: var(--text-primary) !important; }
.dark .dark\:text-gray-200 { color: var(--text-secondary) !important; }
.dark .dark\:text-gray-300 { color: var(--text-secondary) !important; }
.dark .dark\:text-gray-400 { color: var(--text-tertiary) !important; }
.dark .dark\:text-gray-500 { color: var(--text-tertiary) !important; }
.dark .dark\:text-gray-600 { color: var(--text-placeholder) !important; }

.dark .text-emerald-600    { color: var(--accent) !important; }
.dark .dark\:text-emerald-400 { color: var(--accent) !important; }
.dark .dark\:text-emerald-300 { color: var(--accent) !important; }
.dark .text-pink-500       { color: var(--pink) !important; }
.dark .dark\:text-pink-300 { color: var(--pink) !important; }

/* -- 边框暗色覆写 -- */
.dark .border-gray-200     { border-color: var(--border) !important; }
.dark .border-gray-100     { border-color: var(--border-light) !important; }
.dark .border-gray-300     { border-color: var(--border) !important; }
.dark .border-gray-50      { border-color: var(--border-light) !important; }
.dark .dark\:border-gray-600  { border-color: var(--border) !important; }
.dark .dark\:border-gray-700  { border-color: var(--border-light) !important; }
.dark .dark\:border-gray-750  { border-color: var(--border-light) !important; }
.dark .dark\:border-emerald-600 { border-color: var(--accent-border) !important; }
.dark .dark\:border-emerald-800 { border-color: var(--accent-border) !important; }
.dark .dark\:border-red-800 { border-color: var(--danger-border) !important; }

.dark .divide-gray-50 > * + * { border-color: var(--border-light) !important; }
.dark .dark\:divide-gray-750 > * + * { border-color: var(--border-light) !important; }

/* -- 暗色模式强调色按钮上的文字 -- */
.dark .bg-emerald-500          { background-color: var(--accent) !important; }
/* 暗色模式下 accent=浅色，按钮上文字应为深色 */
.dark .bg-emerald-500.text-white {
    color: var(--text-inverse) !important;
}

/* -- 暗色模式选中按钮 (原本 bg-emerald-500 text-white, 在暗色下用浅底深字) -- */
.dark .bg-emerald-500.text-white { color: var(--text-inverse) !important; }

/* -- header / nav 暗色 -- */
.dark .sticky.top-0.bg-white\/90,
.dark .dark\:bg-gray-800\/90,
.dark .dark\:bg-gray-800\/95 {
    background-color: var(--header-bg) !important;
}
/* 底部导航栏暗色适配 */
.dark nav.fixed.bottom-0 {
    background-color: var(--nav-bg) !important;
    border-color: var(--border) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.35) !important;
}
/* 通用 bg-white/90 暗色兜底 (loading 遮罩等) */
.dark .bg-white\/90 {
    background-color: var(--bg-block) !important;
}
/* 底部导航按钮 active 态文字颜色 */
.dark .active\:text-gray-600:active {
    color: var(--text-primary) !important;
}
.dark .active\:text-gray-700:active {
    color: var(--text-primary) !important;
}

/* Toast 暗色 — bg-gray-800 在暗色下与页面趋同，提升对比度 */
.dark .bg-gray-800.text-white {
    background-color: #3d3b38 !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

/* bg-gray-200 暗色 — 设置页 toggle 非选中态等 */
.dark .bg-gray-200 { background-color: var(--border) !important; }

/* border-red-100 暗色 — 退出登录等危险按钮边框 */
.dark .border-red-100 { border-color: var(--danger-border) !important; }

/* active:bg-red-100 暗色 — 删除按钮交互态 */
.dark .active\:bg-red-100:active { background-color: var(--danger-soft) !important; }

/* active:text-red-400 暗色确保可见 */
.dark .active\:text-red-400:active { color: var(--danger) !important; }

/* -- input/textarea/select in dark -- */
.dark input[type="text"],
.dark input[type="number"],
.dark input[type="search"],
.dark select,
.dark textarea {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}
.dark input[type="text"]::placeholder,
.dark input[type="number"]::placeholder,
.dark textarea::placeholder {
    color: var(--text-placeholder) !important;
}

/* 价格模糊 */
.blur-price {
    filter: blur(6px);
    -webkit-filter: blur(6px);
    user-select: none;
    -webkit-user-select: none;
    transition: filter 0.2s ease;
}

/* ================================================================
 *  自定义选择器 (Custom Select)
 * ================================================================ */

/* 小号 (筛选) */
.custom-select-wrap {
    position: relative;
    flex-shrink: 0;
}
.custom-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-block);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    user-select: none;
}
.custom-select-trigger:hover {
    border-color: var(--text-tertiary);
}
.custom-select-wrap.open .custom-select-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.custom-select-arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform 0.2s;
}
.custom-select-wrap.open .custom-select-arrow {
    transform: rotate(180deg);
    color: var(--accent);
}

/* 大号 (报单客户选择) */
.custom-select-wrap--large .custom-select-trigger {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 14px;
    justify-content: space-between;
}

/* 下拉面板 */
.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 50;
    padding: 6px;
}

/* 搜索输入框 (带搜索的下拉) */
.custom-select-search {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    margin-bottom: 4px;
}
.custom-select-search:focus {
    border-color: var(--accent);
}

/* 选项 */
.custom-select-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 8px;
    color: var(--text-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.custom-select-option:hover {
    background: var(--bg-hover);
}
.custom-select-option.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.custom-select-option--empty {
    color: var(--text-tertiary);
    font-style: italic;
    pointer-events: none;
}

/* 客户选择器 - 选项含副文本 */
.custom-select-option-sub {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-top: 1px;
}

/* 滚动条美化 */
.custom-select-dropdown::-webkit-scrollbar { width: 4px; }
.custom-select-dropdown::-webkit-scrollbar-track { background: transparent; }
.custom-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.custom-select-dropdown::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ================================================================
 *  按钮 / 交互状态增强
 * ================================================================ */
button {
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
button:active {
    transform: scale(0.97);
}
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 卡片悬浮 */
.bg-white.rounded-xl:not(.cursor-pointer),
div[class*="bg-white"] {
    transition: box-shadow 0.2s;
}

/* ================================================================
 *  表单元素全局样式
 * ================================================================ */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border);
    transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent) !important;
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* 原生 select 保底美化 (报货单表格内小select) */
select:not(.custom-select-trigger) {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 6px;
    font-size: 12px;
    cursor: pointer;
}
select:not(.custom-select-trigger) option {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* 历史板块日期弹出面板暗色 */
.dark .history-date-popup {
    background: var(--bg-elevated) !important;
    border-color: var(--border) !important;
}
.dark .history-date-popup button {
    color: var(--text-secondary) !important;
}
.dark .history-date-popup input[type="text"] {
    background: var(--bg-input) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

/* 收款弹窗暗色 */
.dark .payment-modal-card {
    background: var(--bg-elevated) !important;
}
.dark .payment-modal-card .bg-gray-50 {
    background: var(--bg-input) !important;
}

/* 历史板块筛选器：select 和 input 暗色 */
.dark .history-filter-select {
    background: var(--bg-input) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.dark .history-filter-select option {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}
.dark .history-filter-input {
    background: var(--bg-input) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.dark .history-filter-input::placeholder {
    color: var(--text-tertiary) !important;
}

/* ================================================================
 *  动画
 * ================================================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-fadeIn  { animation: fadeIn .15s cubic-bezier(.16, 1, .3, 1) forwards; }
.animate-slideUp { animation: slideUp .25s ease-out; }
.animate-spin    { animation: spin 1s linear infinite; }
.animate-dropdownIn { animation: dropdownIn .18s cubic-bezier(.16, 1, .3, 1) forwards; }

/* ================================================================
 *  打印样式
 * ================================================================ */
@media print {
    /* 页面设置：自动纸张，5mm 边距 */
    @page { margin: 5mm; size: auto; }

    html, body {
        background: white !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 隐藏所有非打印元素：导航、按钮、固定/吸顶元素、弹窗背景 */
    .no-print, .no-print *,
    header, aside, nav,
    .fixed, .sticky,
    [class*="fixed"],
    button:not(.print-only),
    .print-modal-close,
    .print-actions,
    .mobile-bottom-nav,
    .bottom-nav,
    .bg-black\/40, .bg-black\/50, .bg-black\/60 {
        display: none !important;
    }

    /* 强制去除阴影、边框、背景装饰 */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* 打印卡片本身 */
    .print-receipt-card {
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        background: white !important;
    }

    /* 确保打印内容不被截断 */
    .print-content, .print-content * {
        overflow: visible !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    /* 表格打印优化 */
    table {
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }
    th, td {
        border: none !important;
        padding: 2px 1px !important;
    }

    /* 不打印二维码/条码占位图 */
    .print-receipt-card img,
    .print-receipt-card svg[class*="qr"] { display: none !important; }

    /* 防止链接打印出 URL */
    a[href]:after { content: none !important; }

    /* 模态框/遮罩层不遮挡 */
    .modal, .modal-backdrop, [class*="modal"] {
        background: transparent !important;
        position: static !important;
        overflow: visible !important;
    }
    .modal > *, .modal-backdrop > * {
        box-shadow: none !important;
    }
}

/* ================================================================
 *  小票 / 杂项
 * ================================================================ */
.thermal-font { font-family: 'Courier New', Courier, monospace, "SimSun", "宋体"; }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* 开关 toggle */
.toggle-switch {
    width: 40px; height: 24px;
    border-radius: 12px;
    position: relative;
    transition: background 0.25s;
    cursor: pointer;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transition: transform 0.25s;
}

/* 响应式: 桌面端居中 */
@media (min-width: 640px) {
    #app {
        max-width: 480px;
        margin: 0 auto;
        box-shadow: var(--shadow-md);
        min-height: 100vh;
    }
    nav.fixed {
        max-width: 480px;
        left: 50% !important;
        transform: translateX(-50%);
    }
}

/* ================================================================
 *  补充兼容: Tailwind CDN 漏掉的便捷类
 * ================================================================ */
.bg-gray-750 { background-color: #2d3748; }
.dark .bg-gray-750 { background-color: var(--bg-hover) !important; }

.touch-manipulation { touch-action: manipulation; }
.transition-colors { transition-property: color, background-color, border-color; transition-duration: 0.2s; }

/* backface-visibility for potential 3D transforms */
.backdrop-blur {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}