/* =========================================================
   主题系统：简约专业 / 清新账本 / 商务金融 / 轻奢渐变
   每个主题都支持浅色与夜间模式
   ========================================================= */

:root {
    --theme-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
}

body[data-theme] {
    font-family: var(--theme-font);
    background-color: var(--bg);
    background-image: var(--bg-image);
    background-attachment: fixed;
    color: var(--text);
}

/* ---------- 主题 1：简约专业 ---------- */
body[data-theme="saas"] {
    --bg: #f5f7fb;
    --bg-image: radial-gradient(circle at 8% 0%, rgba(79, 70, 229, .10), transparent 30%), radial-gradient(circle at 92% 8%, rgba(99, 102, 241, .07), transparent 28%);
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #eef2ff;
    --border: #e5e7eb;
    --border-strong: #cbd5e1;
    --text: #0f172a;
    --text-muted: #64748b;
    --text-weak: #94a3b8;
    --primary: #4f46e5;
    --primary-2: #6366f1;
    --primary-soft: #eef2ff;
    --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    --success: #16a34a;
    --success-soft: #dcfce7;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --danger: #e11d48;
    --danger-soft: #ffe4e6;
    --info: #0284c7;
    --info-soft: #e0f2fe;
    --header-bg: linear-gradient(135deg, #312e81 0%, #4f46e5 55%, #6366f1 100%);
    --header-text: #ffffff;
    --header-shadow: 0 10px 30px rgba(49, 46, 129, .18);
    --card-radius: 16px;
    --card-border: #e8ecf3;
    --card-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    --card-shadow-hover: 0 14px 36px rgba(15, 23, 42, .10);
    --btn-radius: 12px;
    --input-radius: 12px;
    --nav-bg: rgba(255, 255, 255, .94);
    --nav-border: #e5e7eb;
    --nav-active-bg: #eef2ff;
    --nav-active-text: #4f46e5;
    --nav-shadow: 0 12px 30px rgba(15, 23, 42, .10);
    --table-head-bg: #f8fafc;
    --table-row-alt: #fafbff;
    --login-bg: radial-gradient(circle at 18% 8%, #e0e7ff 0%, transparent 34%), radial-gradient(circle at 82% 92%, #ede9fe 0%, transparent 36%), linear-gradient(135deg, #eef2ff 0%, #f8fafc 52%, #f5f3ff 100%);
    --glass-blur: 0px;
}

/* ---------- 主题 2：清新账本 ---------- */
body[data-theme="fresh"] {
    --bg: #f3faf7;
    --bg-image: radial-gradient(circle at 10% 0%, rgba(13, 148, 136, .10), transparent 32%), radial-gradient(circle at 90% 10%, rgba(45, 212, 191, .08), transparent 30%);
    --surface: #ffffff;
    --surface-2: #f2fbf8;
    --surface-3: #e6f7f1;
    --border: #d9ebe6;
    --border-strong: #b8dcd3;
    --text: #103b36;
    --text-muted: #5f857e;
    --text-weak: #8fb3ac;
    --primary: #0d9488;
    --primary-2: #14b8a6;
    --primary-soft: #e6fbf6;
    --primary-gradient: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    --success: #16a34a;
    --success-soft: #dcfce7;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --danger: #e11d48;
    --danger-soft: #ffe4e6;
    --info: #0e7490;
    --info-soft: #cffafe;
    --header-bg: linear-gradient(135deg, #064e3b 0%, #0f766e 52%, #14b8a6 100%);
    --header-text: #ffffff;
    --header-shadow: 0 10px 30px rgba(6, 78, 59, .18);
    --card-radius: 20px;
    --card-border: #e0f0eb;
    --card-shadow: 0 10px 30px rgba(13, 148, 136, .08);
    --card-shadow-hover: 0 16px 40px rgba(13, 148, 136, .14);
    --btn-radius: 14px;
    --input-radius: 14px;
    --nav-bg: rgba(255, 255, 255, .94);
    --nav-border: #d9ebe6;
    --nav-active-bg: #e6fbf6;
    --nav-active-text: #0f766e;
    --nav-shadow: 0 12px 30px rgba(13, 148, 136, .12);
    --table-head-bg: #f2fbf8;
    --table-row-alt: #f8fdfb;
    --login-bg: radial-gradient(circle at 16% 6%, #ccfbf1 0%, transparent 36%), radial-gradient(circle at 84% 94%, #dcfce7 0%, transparent 34%), linear-gradient(135deg, #ecfdf5 0%, #f8fafc 52%, #f0fdfa 100%);
    --glass-blur: 0px;
}

/* ---------- 主题 3：商务金融 ---------- */
body[data-theme="finance"] {
    --bg: #f2f5fa;
    --bg-image: linear-gradient(180deg, #eef3fb 0%, rgba(242, 245, 250, 0) 240px);
    --surface: #ffffff;
    --surface-2: #f7f9fd;
    --surface-3: #e8eef8;
    --border: #dce4f0;
    --border-strong: #b9c7dc;
    --text: #0f1c33;
    --text-muted: #52627a;
    --text-weak: #8494ab;
    --primary: #1d4ed8;
    --primary-2: #1e40af;
    --primary-soft: #eaf1ff;
    --primary-gradient: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    --success: #15803d;
    --success-soft: #dcfce7;
    --warning: #b45309;
    --warning-soft: #fef3c7;
    --danger: #be123c;
    --danger-soft: #ffe4e6;
    --info: #0369a1;
    --info-soft: #e0f2fe;
    --header-bg: linear-gradient(135deg, #0b1f3a 0%, #173b73 56%, #1d4ed8 100%);
    --header-text: #ffffff;
    --header-shadow: 0 10px 28px rgba(11, 31, 58, .22);
    --card-radius: 12px;
    --card-border: #dfe7f3;
    --card-shadow: 0 4px 16px rgba(15, 42, 95, .07);
    --card-shadow-hover: 0 10px 28px rgba(15, 42, 95, .12);
    --btn-radius: 8px;
    --input-radius: 8px;
    --nav-bg: rgba(255, 255, 255, .96);
    --nav-border: #dce4f0;
    --nav-active-bg: #eaf1ff;
    --nav-active-text: #1d4ed8;
    --nav-shadow: 0 10px 28px rgba(15, 42, 95, .14);
    --table-head-bg: #f4f7fc;
    --table-row-alt: #fafcff;
    --login-bg: linear-gradient(135deg, #eaf1ff 0%, #f7f9fd 55%, #e8eef8 100%);
    --glass-blur: 0px;
}

/* ---------- 主题 4：轻奢渐变 ---------- */
body[data-theme="glass"] {
    --bg: #f6f4ff;
    --bg-image: radial-gradient(circle at 8% 2%, rgba(124, 58, 237, .20), transparent 34%), radial-gradient(circle at 92% 0%, rgba(219, 39, 119, .14), transparent 30%), radial-gradient(circle at 50% 100%, rgba(59, 130, 246, .14), transparent 38%);
    --surface: rgba(255, 255, 255, .72);
    --surface-2: rgba(255, 255, 255, .55);
    --surface-3: rgba(124, 58, 237, .10);
    --border: rgba(148, 163, 184, .28);
    --border-strong: rgba(100, 116, 139, .35);
    --text: #241b3a;
    --text-muted: #685f80;
    --text-weak: #9388aa;
    --primary: #7c3aed;
    --primary-2: #db2777;
    --primary-soft: rgba(124, 58, 237, .12);
    --primary-gradient: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    --success: #16a34a;
    --success-soft: rgba(22, 163, 74, .14);
    --warning: #d97706;
    --warning-soft: rgba(217, 119, 6, .14);
    --danger: #e11d48;
    --danger-soft: rgba(225, 29, 72, .12);
    --info: #2563eb;
    --info-soft: rgba(37, 99, 235, .12);
    --header-bg: linear-gradient(135deg, #4c1d95 0%, #7c3aed 46%, #db2777 100%);
    --header-text: #ffffff;
    --header-shadow: 0 16px 44px rgba(76, 29, 149, .24);
    --card-radius: 24px;
    --card-border: rgba(255, 255, 255, .70);
    --card-shadow: 0 18px 50px rgba(76, 29, 149, .12);
    --card-shadow-hover: 0 26px 64px rgba(76, 29, 149, .18);
    --btn-radius: 16px;
    --input-radius: 16px;
    --nav-bg: rgba(255, 255, 255, .78);
    --nav-border: rgba(255, 255, 255, .70);
    --nav-active-bg: rgba(124, 58, 237, .14);
    --nav-active-text: #6d28d9;
    --nav-shadow: 0 18px 44px rgba(76, 29, 149, .18);
    --table-head-bg: rgba(255, 255, 255, .50);
    --table-row-alt: rgba(255, 255, 255, .34);
    --login-bg: radial-gradient(circle at 18% 10%, rgba(124, 58, 237, .30), transparent 34%), radial-gradient(circle at 84% 88%, rgba(219, 39, 119, .24), transparent 34%), linear-gradient(135deg, #f5f3ff 0%, #fdf2f8 52%, #eff6ff 100%);
    --glass-blur: 16px;
}

/* ---------- 夜间模式变量 ---------- */
body.dark-mode[data-theme="saas"] {
    --bg: #0b1220;
    --bg-image: radial-gradient(circle at 8% 0%, rgba(99, 102, 241, .16), transparent 30%), radial-gradient(circle at 92% 8%, rgba(79, 70, 229, .10), transparent 28%);
    --surface: #111a2e;
    --surface-2: #0f172a;
    --surface-3: #1e1b4b;
    --border: #24304a;
    --border-strong: #334155;
    --text: #e5e7eb;
    --text-muted: #94a3b8;
    --text-weak: #64748b;
    --primary: #818cf8;
    --primary-2: #6366f1;
    --primary-soft: #1e1b4b;
    --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --header-bg: linear-gradient(135deg, #1e1b4b 0%, #312e81 52%, #4338ca 100%);
    --card-border: #1f2a44;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    --card-shadow-hover: 0 16px 40px rgba(0, 0, 0, .38);
    --nav-bg: rgba(17, 26, 46, .94);
    --nav-border: #24304a;
    --nav-active-bg: #1e1b4b;
    --nav-active-text: #a5b4fc;
    --table-head-bg: #0f172a;
    --table-row-alt: #0d1526;
    --login-bg: radial-gradient(circle at 18% 8%, rgba(79, 70, 229, .28), transparent 34%), linear-gradient(135deg, #0b1220 0%, #111a2e 52%, #1e1b4b 100%);
}

body.dark-mode[data-theme="fresh"] {
    --bg: #061a17;
    --bg-image: radial-gradient(circle at 10% 0%, rgba(20, 184, 166, .16), transparent 32%), radial-gradient(circle at 90% 10%, rgba(13, 148, 136, .10), transparent 30%);
    --surface: #0d2621;
    --surface-2: #0a1f1b;
    --surface-3: #12352d;
    --border: #1d4038;
    --border-strong: #2a5a4f;
    --text: #d1fae5;
    --text-muted: #8fc7bd;
    --text-weak: #5f8f87;
    --primary: #2dd4bf;
    --primary-2: #14b8a6;
    --primary-soft: #0f3d36;
    --primary-gradient: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    --header-bg: linear-gradient(135deg, #052e26 0%, #064e3b 50%, #0f766e 100%);
    --card-border: #1d4038;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    --card-shadow-hover: 0 16px 40px rgba(0, 0, 0, .38);
    --nav-bg: rgba(13, 38, 33, .94);
    --nav-border: #1d4038;
    --nav-active-bg: #0f3d36;
    --nav-active-text: #5eead4;
    --table-head-bg: #0a1f1b;
    --table-row-alt: #081b17;
    --login-bg: radial-gradient(circle at 16% 6%, rgba(20, 184, 166, .22), transparent 36%), linear-gradient(135deg, #061a17 0%, #0d2621 52%, #0f3d36 100%);
}

body.dark-mode[data-theme="finance"] {
    --bg: #07111f;
    --bg-image: linear-gradient(180deg, #0a1830 0%, rgba(7, 17, 31, 0) 240px);
    --surface: #0d1b2e;
    --surface-2: #0a1628;
    --surface-3: #10233d;
    --border: #1e3350;
    --border-strong: #2d4a70;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --text-weak: #64748b;
    --primary: #60a5fa;
    --primary-2: #3b82f6;
    --primary-soft: #0f2a4a;
    --primary-gradient: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    --header-bg: linear-gradient(135deg, #07111f 0%, #0b1f3a 52%, #1d4ed8 100%);
    --card-border: #1e3350;
    --card-shadow: 0 6px 20px rgba(0, 0, 0, .30);
    --card-shadow-hover: 0 12px 32px rgba(0, 0, 0, .40);
    --nav-bg: rgba(13, 27, 46, .96);
    --nav-border: #1e3350;
    --nav-active-bg: #0f2a4a;
    --nav-active-text: #93c5fd;
    --table-head-bg: #0a1628;
    --table-row-alt: #081321;
    --login-bg: linear-gradient(135deg, #07111f 0%, #0d1b2e 55%, #0f2a4a 100%);
}

body.dark-mode[data-theme="glass"] {
    --bg: #0b1020;
    --bg-image: radial-gradient(circle at 8% 2%, rgba(124, 58, 237, .30), transparent 34%), radial-gradient(circle at 92% 0%, rgba(219, 39, 119, .22), transparent 30%), radial-gradient(circle at 50% 100%, rgba(59, 130, 246, .18), transparent 38%);
    --surface: rgba(30, 41, 59, .72);
    --surface-2: rgba(15, 23, 42, .55);
    --surface-3: rgba(124, 58, 237, .20);
    --border: rgba(148, 163, 184, .25);
    --border-strong: rgba(148, 163, 184, .38);
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --text-weak: #64748b;
    --primary: #a78bfa;
    --primary-2: #f472b6;
    --primary-soft: rgba(124, 58, 237, .22);
    --primary-gradient: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    --header-bg: linear-gradient(135deg, #2e1065 0%, #4c1d95 46%, #831843 100%);
    --card-border: rgba(148, 163, 184, .22);
    --card-shadow: 0 18px 50px rgba(0, 0, 0, .36);
    --card-shadow-hover: 0 26px 64px rgba(0, 0, 0, .46);
    --nav-bg: rgba(15, 23, 42, .78);
    --nav-border: rgba(148, 163, 184, .22);
    --nav-active-bg: rgba(124, 58, 237, .26);
    --nav-active-text: #e9d5ff;
    --table-head-bg: rgba(15, 23, 42, .60);
    --table-row-alt: rgba(30, 41, 59, .35);
    --login-bg: radial-gradient(circle at 18% 10%, rgba(124, 58, 237, .40), transparent 34%), radial-gradient(circle at 84% 88%, rgba(219, 39, 119, .30), transparent 34%), linear-gradient(135deg, #0b1020 0%, #1e1b4b 52%, #3b0764 100%);
}

/* ---------- 全局主题覆盖 ---------- */
body[data-theme] .app-header {
    background: var(--header-bg);
    color: var(--header-text);
    box-shadow: var(--header-shadow);
}
body[data-theme] .app-header h2 { color: var(--header-text); }
body[data-theme] .app-header .stat-box {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .18);
}
body[data-theme] .app-header .stat-label { color: rgba(255, 255, 255, .82); }
body[data-theme] .app-header .stat-value { color: #ffffff; }

body[data-theme] .card {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    color: var(--text);
}
body[data-theme] .card-title {
    border-bottom-color: var(--border);
    color: var(--text);
}
body[data-theme] .btn {
    background: var(--primary-gradient);
    border-radius: var(--btn-radius);
    box-shadow: 0 8px 20px rgba(79, 70, 229, .18);
}
body[data-theme] .btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--btn-radius);
}
body[data-theme] .btn-danger { background: var(--danger); border-radius: var(--btn-radius); }
body[data-theme] .btn-warning { background: var(--warning); border-radius: var(--btn-radius); }
body[data-theme] .btn-success { background: var(--success); border-radius: var(--btn-radius); }

body[data-theme] .form-group input,
body[data-theme] .form-group select,
body[data-theme] .form-group textarea,
body[data-theme] .query-bar input,
body[data-theme] .query-bar select,
body[data-theme] .debt-table input,
body[data-theme] .debt-table select,
body[data-theme] .compact-row .compact-field input,
body[data-theme] .compact-row .compact-field select,
body[data-theme] .inline-group input,
body[data-theme] .inline-group select,
body[data-theme] .promised-select,
body[data-theme] .promised-date-input {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    border-radius: var(--input-radius);
}
body[data-theme] .form-group input:focus,
body[data-theme] .form-group select:focus,
body[data-theme] .form-group textarea:focus,
body[data-theme] .query-bar input:focus,
body[data-theme] .query-bar select:focus,
body[data-theme] .debt-table input:focus,
body[data-theme] .debt-table select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
    outline: none;
}

body[data-theme] .debt-table th {
    background: var(--table-head-bg);
    color: var(--text-muted);
    border-bottom-color: var(--border);
}
body[data-theme] .debt-table td { border-bottom-color: var(--border); }
@media (min-width: 769px) {
    body[data-theme] .debt-table tbody tr:nth-child(even) { background: var(--table-row-alt); }
}

body[data-theme] .bottom-nav {
    background: var(--nav-bg);
    border-top-color: var(--nav-border);
    box-shadow: var(--nav-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
body[data-theme] .nav-item { color: var(--text-muted); }
body[data-theme] .nav-item.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
}
body[data-theme] .modal-content {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
}
body[data-theme] .user-menu {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
body[data-theme] .user-menu div { color: var(--text); }
body[data-theme] .user-menu div:hover { background: var(--surface-2); }
body[data-theme] .customer-stat { background: var(--surface-2); }
body[data-theme] .customer-stat-label,
body[data-theme] .customer-stat-sub { color: var(--text-muted); }
body[data-theme] .customer-stat-value { color: var(--text); }
body[data-theme] .customer-stat-value.small { color: var(--text-muted); }

body[data-theme] .invoice-group.invoice-even { background: var(--surface); }
body[data-theme] .invoice-group.invoice-odd { background: var(--surface-2); }
body[data-theme] .invoice-header.invoice-header-even { background: var(--primary-soft); }
body[data-theme] .invoice-header.invoice-header-odd { background: var(--surface-2); }

body[data-theme] .chart-tabs { color: var(--text-muted); }
body[data-theme] .chart-tab { background: var(--surface-2); color: var(--text-muted); }
body[data-theme] .chart-tab.active { background: var(--primary); color: #ffffff; }

body[data-theme] .product-list {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
}
body[data-theme] .product-list-item:hover { background: var(--surface-2); }
body[data-theme] .product-list-price { color: var(--text-muted); }

body[data-theme] .width-selector-card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}
body[data-theme] .width-selector-header { border-bottom-color: var(--border); }
body[data-theme] .width-option { background: var(--surface-2); border-color: var(--border); }
body[data-theme] .width-option.active { background: var(--primary-soft); border-color: var(--primary); }
body[data-theme] .width-option-name { color: var(--text); }
body[data-theme] .width-option-size { color: var(--text-muted); }

body[data-theme] .login-container { background: var(--login-bg); }
body[data-theme] .login-card {
    background: var(--surface);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}
body[data-theme] .login-card h2 { color: var(--text); }
body[data-theme] .login-card .form-group label { color: var(--text-muted); }
body[data-theme] .login-card .form-group input {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}
body[data-theme] .login-card .link { color: var(--primary); }

body[data-theme] .info-text { color: var(--text-muted); }
body[data-theme] .info-text.warning-box { color: #856404; }
body.dark-mode[data-theme] .info-text.warning-box { color: #fbbf24; }
body[data-theme] .section-divider { border-top-color: var(--border); }

body[data-theme="glass"] .card,
body[data-theme="glass"] .modal-content,
body[data-theme="glass"] .bottom-nav,
body[data-theme="glass"] .login-card {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

@media (max-width: 768px) {
    body[data-theme] .debt-table tr {
        background: var(--surface);
        border-color: var(--border);
    }
    body[data-theme] .debt-table td::before { color: var(--text-muted); }
}

@media (min-width: 769px) {
    body[data-theme] .card { transition: box-shadow .2s ease, transform .2s ease; }
    body[data-theme] .card:hover { box-shadow: var(--card-shadow-hover); }
    body[data-theme] .bottom-nav {
        bottom: 18px;
        border-radius: 999px;
        border: 1px solid var(--nav-border);
        max-width: 640px;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    body[data-theme] .nav-item { border-radius: 999px; padding: 6px 10px; }
    body[data-theme] .nav-item.active { border-radius: 999px; }
}

/* ---------- 主题选择器 ---------- */
.theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 8px;
    background: var(--surface);
    transition: all .2s ease;
}
.theme-option:hover { border-color: var(--primary); box-shadow: var(--card-shadow); }
.theme-option.active {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.theme-swatches { display: flex; gap: 4px; flex-shrink: 0; }
.theme-swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(255,255,255,.5); }
.theme-option-info { flex: 1; min-width: 0; }
.theme-option-name { font-size: 13px; font-weight: 600; color: var(--text); }
.theme-option-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.theme-option-check { color: var(--primary); font-weight: bold; }

.login-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--primary-gradient);
    box-shadow: 0 12px 28px rgba(79, 70, 229, .28);
}
.login-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin: -4px 0 18px;
}
.body[data-theme] .login-logo { background: var(--primary-gradient); }

.app-icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.header-brand { display: flex; align-items: center; gap: 8px; }
.nav-item span { display: flex; align-items: center; justify-content: center; }
body[data-theme] .card-title:has(> .app-icon) { justify-content: flex-start; gap: 8px; }
body[data-theme] .card-title > .app-icon { flex-shrink: 0; }

/* =========================================================
   更强对比 + 卡片化列表 + 微动效
   ========================================================= */
body[data-theme="saas"] {
    --bg: #edf1f8;
    --border: #d7dfec;
    --card-border: #dfe6f1;
    --card-shadow: 0 10px 28px rgba(15, 23, 42, .08);
    --card-shadow-hover: 0 18px 42px rgba(15, 23, 42, .14);
}
body[data-theme="fresh"] {
    --bg: #e9f6f1;
    --border: #cbe6de;
    --card-border: #d8eee7;
    --card-shadow: 0 10px 28px rgba(13, 148, 136, .10);
    --card-shadow-hover: 0 18px 42px rgba(13, 148, 136, .16);
}
body[data-theme="finance"] {
    --bg: #e8eef8;
    --border: #d0dced;
    --card-border: #d8e2f0;
    --card-shadow: 0 6px 20px rgba(15, 42, 95, .09);
    --card-shadow-hover: 0 14px 34px rgba(15, 42, 95, .15);
}
body[data-theme="glass"] {
    --bg: #f0edff;
    --border: rgba(148, 163, 184, .34);
    --card-border: rgba(255, 255, 255, .82);
    --surface: rgba(255, 255, 255, .82);
    --card-shadow: 0 20px 54px rgba(76, 29, 149, .15);
    --card-shadow-hover: 0 30px 70px rgba(76, 29, 149, .22);
}
body.dark-mode[data-theme="saas"] {
    --bg: #070d19;
    --surface: #13203a;
    --surface-2: #0f1930;
    --border: #2a3a59;
    --card-border: #2a3a59;
}
body.dark-mode[data-theme="fresh"] {
    --bg: #041310;
    --surface: #0f2f29;
    --surface-2: #0b241f;
    --border: #245046;
    --card-border: #245046;
}
body.dark-mode[data-theme="finance"] {
    --bg: #050c17;
    --surface: #0f2139;
    --surface-2: #0b192b;
    --border: #264264;
    --card-border: #264264;
}
body.dark-mode[data-theme="glass"] {
    --bg: #070b16;
    --surface: rgba(30, 41, 59, .84);
    --surface-2: rgba(15, 23, 42, .66);
    --border: rgba(148, 163, 184, .32);
    --card-border: rgba(148, 163, 184, .28);
}

body[data-theme] .card { margin-bottom: 16px; }
body[data-theme] .card .stats .stat-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
}
body[data-theme] .card .stats .stat-box:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow);
}
body[data-theme] .card .stats .stat-box.month-debt {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}
body[data-theme] .card .stats .stat-box.month-paid {
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 22%, var(--border));
}
body[data-theme] .card .stats .stat-box.overdue {
    background: color-mix(in srgb, var(--warning) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 24%, var(--border));
}
body[data-theme] .card .stats .stat-box.total-profit {
    background: color-mix(in srgb, var(--info) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--info) 22%, var(--border));
}
body[data-theme] .card .stats .stat-value { color: var(--text); }
body[data-theme] .card .stats .stat-label { color: var(--text-muted); }
body[data-theme] .card-title {
    position: relative;
    padding-left: 12px;
    border-bottom-color: var(--border);
}
body[data-theme] .card-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 16px;
    transform: translateY(-50%);
    border-radius: 4px;
    background: var(--primary);
}
body[data-theme] .card-title > .app-icon { color: var(--primary); }

/* 客户卡片 */
body[data-theme] .customer-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid transparent;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 10px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: listIn .35s ease both;
}
body[data-theme] .customer-item.has-debt { border-left-color: var(--danger); }
body[data-theme] .customer-item.settled { border-left-color: var(--success); }
body[data-theme] .customer-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--card-shadow-hover);
}
body[data-theme] .customer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
}
body[data-theme] .customer-status {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
}
body[data-theme] .customer-status.has-debt {
    background: color-mix(in srgb, var(--danger) 14%, var(--surface));
    color: var(--danger);
}
body[data-theme] .customer-status.settled {
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    color: var(--success);
}
body[data-theme] .customer-actions { grid-column: 3; align-self: start; }
body[data-theme] .customer-info { min-width: 0; }
body[data-theme] .customer-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform .2s ease, box-shadow .2s ease;
}
body[data-theme] .customer-stat.debt-stat {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
}
body[data-theme] .customer-stat.paid-stat {
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 24%, var(--border));
}
body[data-theme] .customer-stat.prepay-stat {
    background: color-mix(in srgb, var(--info) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--info) 24%, var(--border));
}
body[data-theme] .customer-stat:hover { transform: translateY(-1px); box-shadow: var(--card-shadow); }

/* 商品 / 分类卡片 */
body[data-theme] .product-list-item-card,
body[data-theme] .category-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: listIn .35s ease both;
}
body[data-theme] .product-list-item-card:hover,
body[data-theme] .category-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--card-shadow-hover);
}
body[data-theme] .list-item-icon { color: var(--primary); margin-right: 6px; }
.import-field {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}
.import-table { min-width: 620px; }

/* 单号卡片 */
body[data-theme] .invoice-group {
    border: 1px solid var(--border);
    border-left: 4px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: var(--card-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: listIn .35s ease both;
}
body[data-theme] .invoice-group.invoice-unpaid { border-left-color: var(--danger); }
body[data-theme] .invoice-group.invoice-partial { border-left-color: var(--warning); }
body[data-theme] .invoice-group.invoice-paid { border-left-color: var(--success); }
body[data-theme] .invoice-group:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover);
}
body[data-theme] .summary-item.summary-total strong { color: var(--text); }
body[data-theme] .summary-item.summary-paid strong { color: var(--success); }
body[data-theme] .summary-item.summary-remaining strong { color: var(--danger); }
body[data-theme] .invoice-group.invoice-highlight,
body[data-theme] .invoice-group.query-result-highlight,
body[data-theme] .stat-payment-doc-card.query-result-highlight {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* 按钮与卡片动效 */
body[data-theme] .btn,
body[data-theme] .btn-secondary,
body[data-theme] .btn-danger,
body[data-theme] .btn-warning,
body[data-theme] .btn-success {
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
body[data-theme] .btn:hover,
body[data-theme] .btn-secondary:hover,
body[data-theme] .btn-danger:hover,
body[data-theme] .btn-warning:hover,
body[data-theme] .btn-success:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}
body[data-theme] .btn:active,
body[data-theme] .btn-secondary:active,
body[data-theme] .btn-danger:active,
body[data-theme] .btn-warning:active,
body[data-theme] .btn-success:active {
    transform: scale(.98);
}
body[data-theme] .card {
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
@media (min-width: 769px) {
    body[data-theme] .card:hover { box-shadow: var(--card-shadow-hover); }
}

/* 弹窗 / 列表入场 */
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlide { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes listIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.modal { animation: modalFade .2s ease both; }
.modal-content { animation: modalSlide .24s cubic-bezier(.2, .8, .2, 1) both; }

@media (max-width: 768px) {
    body[data-theme] .customer-item { grid-template-columns: 40px minmax(0, 1fr); }
    body[data-theme] .customer-avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
    body[data-theme] .customer-actions { grid-column: 1 / -1; justify-content: flex-end; width: 100%; }
    body[data-theme] .customer-info { grid-column: 2; }
    body[data-theme] .customer-item > .customer-info + .customer-actions { margin-top: 4px; }
}

/* =========================================================
   顶部浅色玻璃 + 底部导航动效
   ========================================================= */
body[data-theme] .app-header {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--primary) 12%, var(--surface)) 0%,
        color-mix(in srgb, var(--primary-2) 8%, var(--surface)) 50%,
        var(--surface) 100%);
    background-size: 200% 200%;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    animation: headerIn .45s ease both, headerFlow 14s ease infinite;
}
body[data-theme] .app-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--primary-gradient);
    opacity: .65;
}
body[data-theme] .app-header h2 { color: var(--text); }
body[data-theme] .app-header .user-name { color: var(--text); }
body[data-theme] .app-header .theme-toggle {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    transition: transform .25s ease, background .2s ease;
}
body[data-theme] .app-header .theme-toggle:hover { transform: rotate(15deg) scale(1.05); }
body[data-theme] .app-header .stat-box {
    background: color-mix(in srgb, var(--surface) 86%, var(--primary-soft));
    border: 1px solid var(--border);
    color: var(--text);
    transition: transform .2s ease, box-shadow .2s ease;
}
body[data-theme] .app-header .stat-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow);
}
body[data-theme] .app-header .stat-label { color: var(--text-muted); }
body[data-theme] .app-header .stat-value { color: var(--text); }
body[data-theme] .header-brand .app-icon {
    color: var(--primary);
    transition: transform .3s ease;
}
body[data-theme] .header-brand:hover .app-icon { transform: rotate(-8deg) scale(1.1); }
body.dark-mode[data-theme] .app-header { box-shadow: 0 10px 30px rgba(0, 0, 0, .38); }

body[data-theme] .bottom-nav {
    animation: navIn .45s ease both;
    padding-left: 10px;
    padding-right: 10px;
}
body[data-theme] .bottom-nav .nav-indicator {
    position: absolute;
    top: 6px;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    width: calc((100% - 20px) / 5);
    border-radius: 999px;
    background: var(--nav-active-bg);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 18%, transparent);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    z-index: 0;
    pointer-events: none;
}
body[data-theme] .nav-item {
    position: relative;
    z-index: 1;
    transition: transform .2s ease, color .2s ease;
}
body[data-theme] .nav-item > span,
body[data-theme] .nav-item > div { position: relative; z-index: 1; }
body[data-theme] .nav-item:hover { transform: translateY(-2px); color: var(--primary); }
body[data-theme] .nav-item.active { background: transparent; color: var(--nav-active-text); }
body[data-theme] .nav-item .app-icon { transition: transform .2s ease, color .2s ease; }
body[data-theme] .nav-item.active .app-icon {
    animation: navBounce .45s cubic-bezier(.2, .8, .2, 1);
    transform: scale(1.12);
}
body[data-theme] .nav-item:active { transform: scale(.96); }
body[data-theme] .nav-item:active::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    animation: navRipple .4s ease;
    z-index: 0;
    pointer-events: none;
}

@keyframes headerIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes headerFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes navIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes navBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.28); }
    70% { transform: scale(.94); }
    100% { transform: scale(1.12); }
}
@keyframes navRipple {
    from { opacity: .7; transform: scale(.8); }
    to { opacity: 0; transform: scale(1.15); }
}

/* =========================================================
   弹窗 / 下拉 / 表格主题适配
   ========================================================= */
body[data-theme] { color-scheme: light; }
body.dark-mode[data-theme] { color-scheme: dark; }

body[data-theme] .modal {
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body[data-theme] .modal-content {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow-hover);
    position: relative;
}
body[data-theme] .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
    border-radius: 20px 20px 0 0;
    opacity: .85;
    pointer-events: none;
}
body[data-theme] .modal-header {
    color: var(--text);
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}
body[data-theme] .modal-header .close { color: var(--text-muted); }
body[data-theme] .modal-header .close:hover { color: var(--primary); }
body[data-theme] .modal-content .form-group label,
body[data-theme] .compact-row .compact-field label,
body[data-theme] .floating-checkbox label { color: var(--text-muted); }
body[data-theme] .floating-price-modal .product-name-display {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}
body[data-theme] .person-tag { background: var(--surface-2); color: var(--text); }
body[data-theme] .person-tag.selected { background: var(--primary); color: #ffffff; }
body[data-theme] .import-area {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
}
body[data-theme] .import-area:hover {
    border-color: var(--primary);
    color: var(--primary);
}
body[data-theme] .reset-option-title { border-bottom-color: var(--border); }
body[data-theme] .user-table-container,
body[data-theme] .invite-table-container { border-color: var(--border); }
body[data-theme] .user-table th { background: var(--surface-2); color: var(--text-muted); }
body[data-theme] .user-table td { border-bottom-color: var(--border); }
body[data-theme] .payment-record-item { border-bottom-color: var(--border); }
body[data-theme] .current-price-box {
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
    color: var(--text);
}
body[data-theme] .initial-price-box {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--text);
}
body[data-theme] .conflict-item {
    border-color: var(--border);
    background: var(--surface-2);
}
body[data-theme] .reset-select select {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
body[data-theme] .backup-list-container {
    background: var(--surface-2);
    border-color: var(--border);
}
body[data-theme] .backup-item {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
body[data-theme] .backup-item:hover,
body[data-theme] .backup-item.backup-selected {
    background: var(--surface-2);
    border-color: var(--primary);
}
body[data-theme] .backup-meta { color: var(--text-muted); }
body[data-theme] .backup-bottom-buttons { border-top-color: var(--border); }
body[data-theme] .announcement-item,
body[data-theme] .announcement-list-item {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}
body[data-theme] .announcement-content,
body[data-theme] .announcement-list-content,
body[data-theme] .announcement-meta { color: var(--text-muted); }

body[data-theme] input::placeholder,
body[data-theme] textarea::placeholder { color: var(--text-weak); }
body[data-theme] .hms-select {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
body[data-theme] .hms-select.open { border-color: var(--primary); }
body[data-theme] .hms-panel {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--card-shadow-hover);
}
body[data-theme] .hms-item { color: var(--text); }
body[data-theme] .hms-item:hover { background: var(--surface-2); }
body[data-theme] .hms-item.selected,
body[data-theme] .hms-item.selected .hms-item-name { color: var(--primary); }
body[data-theme] .hms-item input[type=checkbox] { accent-color: var(--primary); }
body[data-theme] .hms-placeholder,
body[data-theme] .hms-arrow,
body[data-theme] .hms-empty,
body[data-theme] .hms-item-name small { color: var(--text-muted); }
body[data-theme] .hms-footer {
    border-top-color: var(--border);
    background: var(--surface);
}

body[data-theme] .invoice-body .product-item:nth-child(odd) { background: var(--surface); }
body[data-theme] .invoice-body .product-item:nth-child(even) { background: var(--surface-2); }
body[data-theme] .invoice-body .product-item:hover { background: var(--primary-soft); }

/* 覆盖旧版深色模式里的固定 !important 颜色，让所有深色主题统一 */
body.dark-mode[data-theme] .modal-content {
    background: var(--surface) !important;
    border-color: var(--card-border) !important;
}
body.dark-mode[data-theme] .modal-header {
    border-bottom-color: var(--border) !important;
    color: var(--text) !important;
}
body.dark-mode[data-theme] .close { color: var(--text-muted) !important; }
body.dark-mode[data-theme] .form-group label { color: var(--text-muted) !important; }
body.dark-mode[data-theme] .form-group input,
body.dark-mode[data-theme] .form-group select,
body.dark-mode[data-theme] .form-group textarea,
body.dark-mode[data-theme] .debt-table input,
body.dark-mode[data-theme] .debt-table select,
body.dark-mode[data-theme] .compact-row .compact-field input,
body.dark-mode[data-theme] .compact-row .compact-field select,
body.dark-mode[data-theme] .query-bar input,
body.dark-mode[data-theme] .query-bar select,
body.dark-mode[data-theme] .hms-select,
body.dark-mode[data-theme] .hms-panel {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
body.dark-mode[data-theme] input[readonly] {
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}
body.dark-mode[data-theme] .debt-table th {
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border-bottom-color: var(--border) !important;
}
body.dark-mode[data-theme] .debt-table td { border-bottom-color: var(--border) !important; }
body.dark-mode[data-theme] .total-row,
body.dark-mode[data-theme] .debt-table .total-row { background: var(--surface-2) !important; }
body.dark-mode[data-theme] .total-row td,
body.dark-mode[data-theme] .debt-table .total-row td {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-top-color: var(--border) !important;
}
body.dark-mode[data-theme] .product-list {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
body.dark-mode[data-theme] .product-list-item {
    border-bottom-color: var(--border) !important;
    color: var(--text) !important;
}
body.dark-mode[data-theme] .product-list-item:hover { background: var(--surface-2) !important; }
body.dark-mode[data-theme] .product-list-price { color: var(--text-muted) !important; }
body.dark-mode[data-theme] .hms-item { color: var(--text) !important; }
body.dark-mode[data-theme] .hms-item:hover { background: var(--surface-2) !important; }
body.dark-mode[data-theme] .hms-footer {
    background: var(--surface) !important;
    border-top-color: var(--border) !important;
}
body.dark-mode[data-theme] .hms-placeholder,
body.dark-mode[data-theme] .hms-arrow,
body.dark-mode[data-theme] .hms-empty,
body.dark-mode[data-theme] .hms-item-name small { color: var(--text-muted) !important; }
body.dark-mode[data-theme] .info-text {
    background: transparent !important;
    color: var(--text-muted) !important;
}
body.dark-mode[data-theme] .btn-add-row {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--primary) !important;
}
body.dark-mode[data-theme] .user-menu {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
body.dark-mode[data-theme] .user-menu div { color: var(--text) !important; }
body.dark-mode[data-theme] .user-menu div:hover { background: var(--surface-2) !important; }
body.dark-mode[data-theme] .floating-price-modal .product-name-display {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
body.dark-mode[data-theme] .modal-content .user-table,
body.dark-mode[data-theme] .modal-content .user-table td {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}
body.dark-mode[data-theme] .modal-content .user-table th {
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border-bottom-color: var(--border) !important;
}
body.dark-mode[data-theme] .modal-content .user-table tr:hover td { background: var(--surface-2) !important; }
body.dark-mode[data-theme] .modal-content .user-table-container,
body.dark-mode[data-theme] .modal-content .invite-table-container {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
body.dark-mode[data-theme] .modal-content .invite-table,
body.dark-mode[data-theme] .modal-content .invite-table td {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}
body.dark-mode[data-theme] .modal-content .invite-table th {
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border-bottom-color: var(--border) !important;
}
body.dark-mode[data-theme] .modal-content .invite-table tr:hover td { background: var(--surface-2) !important; }
body.dark-mode[data-theme] .modal-content .user-table .action-buttons .btn-sm,
body.dark-mode[data-theme] .modal-content .user-mgr-buttons .btn-secondary {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
body.dark-mode[data-theme] .modal-content .user-table .action-buttons .btn-danger {
    background: var(--danger) !important;
    color: #ffffff !important;
}
body.dark-mode[data-theme] .modal-content .announcement-item,
body.dark-mode[data-theme] .modal-content .announcement-list-item {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* =========================================================
   主题化下拉选择 / 日期选择
   ========================================================= */
.theme-select-trigger,
.theme-date-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.theme-select-trigger:hover,
.theme-date-trigger:hover { border-color: var(--primary); }
.theme-select-trigger.open,
.theme-date-trigger.open {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.theme-select-trigger.disabled,
.theme-date-trigger.disabled { opacity: .55; cursor: not-allowed; }
.theme-select-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.theme-select-value.placeholder,
.theme-date-trigger.empty { color: var(--text-muted); }
.theme-select-arrow,
.theme-date-icon { color: var(--text-muted); flex-shrink: 0; }
.theme-select-trigger.open .theme-select-arrow { transform: rotate(180deg); }
.theme-select-arrow { transition: transform .2s ease; }

.query-bar .theme-select-trigger,
.query-bar .theme-date-trigger {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    padding: 6px;
    border-radius: 8px;
    font-size: 12px;
}
.compact-row .compact-field .theme-select-trigger,
.compact-row .compact-field .theme-date-trigger {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
}
.reset-select .theme-select-trigger { width: 100%; }
.promised-date-input.theme-date-trigger { width: 100%; }

.theme-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: modalFade .2s ease both;
}
.theme-picker-panel {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--card-border);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--card-shadow-hover);
    animation: modalSlide .24s cubic-bezier(.2, .8, .2, 1) both;
}
.theme-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    font-weight: 600;
}
.theme-picker-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.theme-picker-close:hover { color: var(--primary); }
.theme-select-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 60vh;
    overflow-y: auto;
}
.theme-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.theme-select-option:hover { background: var(--surface-2); }
.theme-select-option.active {
    background: var(--primary-soft);
    border-color: color-mix(in srgb, var(--primary) 24%, transparent);
    color: var(--primary);
    font-weight: 600;
}
.theme-select-option.disabled { opacity: .5; cursor: not-allowed; }
.theme-select-check { color: var(--primary); flex-shrink: 0; }
.theme-select-empty {
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
    font-size: 13px;
}

.theme-date-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.theme-date-nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.theme-date-nav-btn:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}
.theme-date-month { font-size: 14px; font-weight: 600; }
.theme-date-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}
.theme-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.theme-date-day {
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.theme-date-day:hover { background: var(--surface-2); }
.theme-date-day.today {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.theme-date-day.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    font-weight: 600;
}
.theme-date-day.empty { visibility: hidden; pointer-events: none; }
.theme-date-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.theme-date-spacer { flex: 1; }
.theme-date-actions .btn-sm { width: auto; }

@media (min-width: 769px) {
    .theme-picker-overlay { align-items: center; padding: 20px; }
    .theme-picker-panel {
        width: 420px;
        max-width: 92%;
        max-height: 80vh;
        border-radius: 20px;
        padding-bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* =========================================================
   手机端查询结果卡片统一布局
   ========================================================= */
@media (max-width: 768px) {
    body[data-theme] .app-header {
        padding: 10px 12px;
    }
    body[data-theme] .app-header .header-top {
        margin-bottom: 6px;
    }
    body[data-theme] .app-header .stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        margin-top: 6px;
        overflow: visible;
    }
    body[data-theme] .app-header .stats .stat-box {
        min-width: 0;
        padding: 5px 3px;
        text-align: center;
        border-radius: 8px;
    }
    body[data-theme] .app-header .stats .stat-value {
        font-size: clamp(10px, 3vw, 12px);
        letter-spacing: -.2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body[data-theme] .app-header .stats .stat-label {
        font-size: 8.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    body[data-theme] .card .stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
    }
    body[data-theme] .card .stats .stat-box {
        min-width: 0;
        width: auto;
        padding: 10px 8px;
        text-align: center;
    }
    body[data-theme] .card .stats .stat-value {
        font-size: clamp(13px, 4vw, 16px);
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        font-variant-numeric: tabular-nums;
    }
    body[data-theme] .card .stats .stat-label {
        font-size: 11px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.35;
    }
    body[data-theme] .report-kpi-grid .stat-box:nth-child(5) {
        grid-column: 1 / -1;
    }

    body[data-theme] .mobile-list-scroll {
        max-height: none !important;
        overflow: visible !important;
    }

    /* 客户卡片 */
    body[data-theme] .customer-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px 10px;
        align-items: start;
        padding: 12px;
        border-radius: 14px;
    }
    body[data-theme] .customer-avatar {
        grid-row: 1;
        align-self: start;
    }
    body[data-theme] .customer-info {
        grid-column: 2;
        min-width: 0;
    }
    body[data-theme] .customer-info > strong {
        font-size: 15px;
        line-height: 1.4;
    }
    body[data-theme] .customer-info > small {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.55;
        color: var(--text-muted);
        word-break: break-word;
    }
    body[data-theme] .customer-info .info-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }
    body[data-theme] .customer-status { margin-left: 6px; }
    body[data-theme] .customer-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }
    body[data-theme] .customer-stat {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        padding: 8px;
    }
    body[data-theme] .customer-stat-label {
        font-size: 10px;
        line-height: 1.3;
    }
    body[data-theme] .customer-stat-value {
        font-size: 13px;
        line-height: 1.35;
        word-break: break-all;
    }
    body[data-theme] .customer-stat-value.small { font-size: 12px; }
    body[data-theme] .customer-stat-sub {
        font-size: 10px;
        line-height: 1.45;
        word-break: break-word;
    }
    body[data-theme] .customer-stat.debt-stat,
    body[data-theme] .customer-stat.prepay-stat,
    body[data-theme] .customer-stat.paid-stat {
        grid-column: auto;
        order: initial;
    }
    body[data-theme] .customer-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 8px;
        width: 100%;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px dashed var(--border);
        justify-content: stretch;
    }
    body[data-theme] .customer-actions .btn-sm {
        width: 100%;
        margin: 0;
    }

    /* 商品 / 分类卡片 */
    body[data-theme] .product-list-item-card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }
    body[data-theme] .product-info-card {
        width: 100%;
        min-width: 0;
        line-height: 1.6;
    }
    body[data-theme] .product-info-card > strong { font-size: 14px; }
    body[data-theme] .product-info-card > small {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.55;
        color: var(--text-muted);
        word-break: break-word;
    }
    body[data-theme] .product-actions-card {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
        gap: 8px;
        padding-top: 8px;
        border-top: 1px dashed var(--border);
    }
    body[data-theme] .product-actions-card .btn-sm { width: 100%; }
    body[data-theme] .category-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }
    body[data-theme] .category-content {
        width: 100%;
        min-width: 0;
    }
    body[data-theme] .category-name { font-size: 15px; }
    body[data-theme] .category-meta {
        flex-wrap: wrap;
        overflow: visible;
        gap: 6px 12px;
        white-space: normal;
    }
    body[data-theme] .category-meta-item { white-space: normal; }
    body[data-theme] .category-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 8px;
        border-top: 1px dashed var(--border);
    }
    body[data-theme] .category-actions .btn-sm { width: 100%; }

    /* 单号卡片头部 */
    body[data-theme] .invoice-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px;
    }
    body[data-theme] .invoice-info {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "check no badges expand"
            "customer customer customer customer";
        align-items: center;
        gap: 7px 8px;
        width: 100%;
    }
    body[data-theme] .invoice-info .invoice-checkbox {
        grid-area: check;
        align-self: center;
        margin: 0;
    }
    body[data-theme] .invoice-info .invoice-no {
        grid-area: no;
        justify-self: start;
        max-width: 100%;
        padding: 4px 9px;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body[data-theme] .invoice-info .invoice-badges {
        grid-area: badges;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 5px;
    }
    body[data-theme] .invoice-info .invoice-badges .overdue-mark,
    body[data-theme] .invoice-info .invoice-badges .status-badge { margin: 0; }
    body[data-theme] .invoice-info .expand-icon {
        grid-area: expand;
        justify-self: end;
        align-self: center;
        margin: 0 !important;
    }
    body[data-theme] .invoice-info .customer-info.invoice-customer-info {
        grid-area: customer;
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        min-width: 0;
        font-size: 13px;
        line-height: 1.45;
    }
    body[data-theme] .invoice-customer-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        color: var(--text);
        font-weight: 600;
        word-break: break-word;
    }
    body[data-theme] .invoice-customer-line .invoice-handler {
        font-weight: 400;
        color: var(--text-muted);
    }
    body[data-theme] .invoice-amount-line {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 12px;
    }
    body[data-theme] .invoice-total,
    body[data-theme] .invoice-paid {
        margin-left: 0;
        font-size: 12px;
        color: var(--text-muted);
    }
    body[data-theme] .invoice-paid { color: var(--success); }
    body[data-theme] .invoice-total strong,
    body[data-theme] .invoice-paid strong {
        font-size: 15px;
        color: inherit;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    body[data-theme] .invoice-remaining {
        margin-left: 0;
        font-size: 12px;
        color: var(--text-muted);
    }
    body[data-theme] .invoice-remaining strong {
        font-size: 17px;
        color: var(--danger);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    body[data-theme] .invoice-prepay {
        margin-left: 0;
        font-size: 12px;
        color: var(--success);
        white-space: nowrap;
    }

    body[data-theme] .invoice-body { padding: 10px 12px; }
    body[data-theme] .invoice-date-status {
        padding: 10px 12px;
        gap: 5px;
        font-size: 12px;
    }
    body[data-theme] .invoice-date-status > div {
        display: flex;
        align-items: center;
        gap: 5px;
        width: 100%;
    }
    body[data-theme] .invoice-footer {
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.5;
        word-break: break-word;
    }
    body[data-theme] .invoice-summary {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 12px;
    }
    body[data-theme] .invoice-summary .summary-item {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        font-size: 13px;
    }
    body[data-theme] .invoice-summary .summary-item strong {
        margin-left: auto;
        font-size: 14px;
    }

    body[data-theme] .mobile-buttons-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 8px;
        justify-content: stretch;
        padding: 10px 12px;
        margin-top: 8px;
    }
    body[data-theme] .mobile-buttons-row .btn-secondary.btn-sm,
    body[data-theme] .mobile-buttons-row .btn-danger.btn-sm {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 9px 8px;
        font-size: 12px;
        border-radius: 10px;
        white-space: normal;
        line-height: 1.3;
    }

    /* 收款商品行 */
    body[data-theme] .repay-page .product-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "check name"
            "check details"
            "check actions";
        align-items: start;
        gap: 4px 10px;
        padding: 12px 0;
    }
    body[data-theme] .repay-page .product-checkbox {
        grid-area: check;
        margin: 2px 0 0;
    }
    body[data-theme] .repay-page .product-name-row {
        grid-area: name;
        margin: 0;
    }
    body[data-theme] .repay-page .product-detail-row {
        grid-area: details;
        margin: 0;
        gap: 4px 10px;
        font-size: 12px;
    }
    body[data-theme] .repay-page .product-actions {
        grid-area: actions;
        justify-content: flex-start;
        margin-top: 4px;
    }

    /* 统计欠款明细 */
    body[data-theme] .debt-detail-row {
        gap: 6px;
        padding: 12px;
        border-radius: 12px;
        margin-bottom: 8px;
    }
    body[data-theme] .debt-detail-info > div { line-height: 1.5; }
    body[data-theme] .debt-detail-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    body[data-theme] .debt-detail-actions .btn-sm { width: 100%; }

    /* 统计欠款排行 */
    body[data-theme] .report-page .debt-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    body[data-theme] .report-page .debt-row > div:first-child { min-width: 0; }
    body[data-theme] .report-page .debt-row .debt-amount {
        margin-left: auto;
        white-space: nowrap;
        font-size: 15px;
    }

    /* 收款记录 */
    body[data-theme] .payment-history-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    body[data-theme] .payment-record-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 14px;
    }
    body[data-theme] .payment-record-item .record-info {
        width: 100%;
        min-width: 0;
    }
    body[data-theme] .payment-record-item .record-amount {
        font-size: 18px;
        font-weight: 700;
        color: var(--text);
    }
    body[data-theme] .payment-record-item .record-date,
    body[data-theme] .payment-record-item .record-operator,
    body[data-theme] .payment-record-item .record-notes {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
        word-break: break-word;
    }
    body[data-theme] .payment-record-item > div:last-child {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        align-items: stretch;
        flex-direction: row !important;
    }
    body[data-theme] .payment-record-item > div:last-child .btn-secondary.btn-sm { width: 100%; }
    body[data-theme] .payment-record-item .delete-record-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0;
        padding: 8px;
        border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
        border-radius: 10px;
        color: var(--danger);
        background: transparent;
    }

    /* 客户详情 */
    body[data-theme] .customer-detail-debt { padding: 10px 0; }
    body[data-theme] .customer-detail-main {
        gap: 8px;
        font-size: 13px;
    }
    body[data-theme] .customer-detail-main span { word-break: break-word; }
    body[data-theme] .customer-detail-main strong { font-size: 14px; }

    /* 公告列表 */
    body[data-theme] .announcement-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    body[data-theme] .announcement-actions .btn-sm { width: 100%; }
    body[data-theme] .announcement-content,
    body[data-theme] .announcement-meta { line-height: 1.5; word-break: break-word; }

    /* 记账商品下拉 */
    body[data-theme] .debt-table .product-list {
        min-width: 0;
        max-width: 100%;
    }
    body[data-theme] .debt-table .product-list-item { white-space: normal; }
    body[data-theme] .debt-table .product-list-name {
        white-space: normal;
        word-break: break-word;
    }

    /* 弹窗数据表改为卡片 */
    body[data-theme] .user-table-container,
    body[data-theme] .invite-table-container {
        max-height: none;
        overflow: visible;
        border: 0;
    }
    body[data-theme] .prepay-ledger-scroll {
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) {
        display: block;
        min-width: 0;
        width: 100%;
        font-size: 13px;
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) thead {
        display: none;
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) tbody,
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) tr,
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) td {
        display: block;
        width: 100%;
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) tr {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 12px;
        margin-bottom: 10px;
        background: var(--surface-2);
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) tr:last-child {
        margin-bottom: 0;
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        border: 0;
        padding: 4px 0;
        white-space: normal;
        text-align: left;
        word-break: break-word;
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 11px;
        line-height: 1.5;
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) td.action-buttons {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 6px;
        padding-top: 8px;
        margin-top: 4px;
        border-top: 1px dashed var(--border);
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) td.action-buttons::before {
        display: none;
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) td.action-buttons .btn-sm {
        width: 100%;
        margin: 0;
        padding: 7px 6px;
        font-size: 11px;
        white-space: normal;
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) td[colspan] {
        display: block;
        padding: 10px 0;
        text-align: center;
    }
    body[data-theme] :is(.user-card-table, .invite-card-table, .prepay-card-table, .log-card-table) td[colspan]::before {
        display: none;
    }
    body[data-theme] .log-card-table td { font-size: 12px; }
    body[data-theme] .prepay-card-table td[data-label="金额"] {
        font-size: 14px;
        font-weight: 600;
    }
}


input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    flex: 0 0 18px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background-color: #ffffff;
    background-image: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="checkbox"]:checked {
    border-color: #4f46e5;
    background-color: #4f46e5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .22);
}
input[type="checkbox"]:disabled {
    opacity: .55;
    cursor: not-allowed;
}
body.dark-mode input[type="checkbox"] {
    border-color: #475569;
    background-color: #0f172a;
}
body.dark-mode input[type="checkbox"]:checked {
    border-color: #818cf8;
    background-color: #4f46e5;
}
body[data-theme] input[type="checkbox"] {
    border-color: var(--border-strong);
    background-color: var(--surface);
}
body[data-theme] input[type="checkbox"]:checked {
    border-color: var(--primary);
    background-color: var(--primary);
}
body.dark-mode[data-theme] input[type="checkbox"] {
    border-color: var(--border-strong);
    background-color: var(--surface-2);
}
body.dark-mode[data-theme] input[type="checkbox"]:checked {
    border-color: var(--primary);
    background-color: var(--primary);
}


.confirm-modal { z-index: 1300; }
.confirm-dialog { max-width: 380px; width: 92%; padding: 22px; }
.confirm-title { font-size: 17px; font-weight: 700; color: var(--text, #1f2937); margin-bottom: 10px; }
.confirm-message { font-size: 14px; line-height: 1.65; color: var(--text-muted, #555); white-space: pre-wrap; word-break: break-word; }
.confirm-actions { display: flex; gap: 10px; margin-top: 20px; }
.confirm-actions .btn-secondary,
.confirm-actions .btn-danger,
.confirm-actions .btn { flex: 1; width: auto; margin: 0; padding: 11px 12px; border-radius: 12px; font-size: 14px; }
body.dark-mode .confirm-title { color: var(--text, #e2e8f0); }


.remember-login { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; font-size: 13px; color: var(--text-muted, #666); cursor: pointer; user-select: none; }
.remember-login input { margin: 0; }
.remember-login small { font-size: 11px; color: var(--text-weak, #999); }


.app-pull-refresh { position: fixed; top: -64px; left: 50%; z-index: 6000; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 999px; background: var(--surface, #fff); color: var(--text-muted, #64748b); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); font-size: 12px; pointer-events: none; opacity: 0; transform: translateX(-50%); transition: top .18s ease, opacity .18s ease, background .18s ease, color .18s ease; }
.app-pull-refresh.visible { top: calc(10px + env(safe-area-inset-top, 0px)); opacity: 1; }
.app-pull-refresh.ready { color: var(--success, #16a34a); border-color: rgba(22, 163, 74, .28); }
.pull-spinner { width: 15px; height: 15px; border: 2px solid var(--border, #d1d5db); border-top-color: var(--primary, #4f46e5); border-radius: 50%; }
.app-pull-refresh.refreshing .pull-spinner { animation: pullSpin .8s linear infinite; }
@keyframes pullSpin { to { transform: rotate(360deg); } }
body.dark-mode .app-pull-refresh { background: var(--surface, #1e293b); border-color: var(--border, #334155); }


.app-download-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 12px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(255,255,255,.16); color: #ffffff; text-decoration: none; font-size: 12px; font-weight: 700; white-space: nowrap; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.app-download-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.26); box-shadow: 0 5px 14px rgba(15, 23, 42, .16); }
.app-download-btn:active { transform: translateY(0); }
.app-download-btn .app-icon { flex-shrink: 0; }
body[data-theme] .app-download-btn { background: var(--primary-soft); color: var(--primary); border-color: var(--border); }
body[data-theme] .app-download-btn:hover { background: var(--surface-2); color: var(--primary); border-color: var(--primary); }
body.dark-mode[data-theme] .app-download-btn { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
@media (max-width: 768px) { .app-download-btn { display: none !important; } }

.setup-card { max-width: 460px; }
.setup-help { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, #f8fafc); color: var(--text-muted, #64748b); font-size: 11px; line-height: 1.6; }

.prompt-dialog { max-width: 420px; width: 92%; }
.prompt-title { font-size: 17px; font-weight: 700; color: var(--text, #1f2937); margin-bottom: 8px; }
.prompt-input { width: 100%; margin-top: 12px; padding: 11px 12px; border: 1px solid var(--border, #d1d5db); border-radius: 10px; background: var(--surface, #fff); color: var(--text, #111827); font-size: 14px; outline: none; }
.prompt-input:focus { border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px var(--primary-soft, #eef2ff); }

.history-detail-content > .modal-header { flex-shrink: 0; }
.history-detail-content { max-width: 780px; width: 94%; max-height: 88vh; display: block !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.history-detail-content .payment-history-list { max-height: none; overflow: visible; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; padding-bottom: 18px; }
.history-detail-content .payment-document-card { display: block !important; padding: 0; border: 1px solid var(--border, #e5e7eb); border-radius: 14px; overflow: hidden; background: var(--surface, #fff); }
.payment-document-header { display: flex; align-items: flex-start; gap: 10px; padding: 14px; cursor: pointer; background: var(--surface-2, #f8fafc); }
.payment-document-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.payment-document-type { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--primary, #4f46e5); background: var(--primary-soft, #eef2ff); }
.payment-document-no { font-size: 11px; color: var(--text-muted, #64748b); font-family: monospace; }
.payment-document-amounts { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0; }
.payment-document-amounts .record-amount { color: var(--success, #16a34a); font-size: 16px; font-weight: 700; }
.record-original { color: var(--text-muted, #64748b); font-size: 12px; }
.record-range { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted, #64748b); margin: 3px 0; }
.payment-document-count { font-size: 12px; color: var(--primary, #4f46e5); margin-top: 5px; }
.payment-document-toggle { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; color: var(--text-muted, #64748b); }
.payment-document-toggle .app-icon { transition: transform .2s ease; }
.payment-document-toggle .app-icon.open { transform: rotate(180deg); }
.payment-document-body { padding: 12px; border-top: 1px solid var(--border, #e5e7eb); }
.history-invoice-list { display: flex; flex-direction: column; gap: 9px; }
.history-invoice-card { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; overflow: hidden; background: var(--surface, #fff); }
.history-invoice-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; cursor: pointer; background: var(--surface-2, #f8fafc); }
.history-invoice-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.history-invoice-main strong { font-size: 13px; color: var(--text, #1f2937); overflow-wrap: anywhere; }
.history-invoice-main small { font-size: 10px; color: var(--text-muted, #64748b); }
.history-invoice-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: var(--text-muted, #64748b); white-space: nowrap; }
.history-invoice-toggle { color: var(--primary, #4f46e5); font-weight: 600; }
.history-invoice-items { padding: 9px 11px; border-top: 1px dashed var(--border, #e5e7eb); display: flex; flex-direction: column; gap: 6px; }
.history-line-item { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; border-bottom: 1px dashed var(--border, #eef2f7); font-size: 12px; color: var(--text-muted, #475569); }
.history-line-item:last-child { border-bottom: none; padding-bottom: 0; }
.history-line-main { display: flex; justify-content: space-between; gap: 10px; }
.history-line-main strong { color: var(--text, #1f2937); white-space: nowrap; }
.history-payment-meta { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 11px; line-height: 1.5; color: var(--text-muted, #64748b); }
.payment-history-count { color: var(--text-muted, #64748b); font-size: 11px; }
.history-flat-items { display: flex; flex-direction: column; gap: 6px; }
.payment-document-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff); }
@media (max-width: 600px) {
    .history-detail-content { width: 96%; max-height: 90vh; padding: 14px; }
    .payment-document-header { padding: 11px; }
    .history-invoice-header { align-items: flex-start; flex-direction: column; gap: 5px; }
    .history-invoice-meta { justify-content: flex-start; white-space: normal; }
    .payment-document-actions { padding: 9px 11px; }
    .payment-document-actions .btn-secondary.btn-sm { flex: 1; }
    .payment-document-actions .delete-record-btn { flex: 1; justify-content: center; }
}

.stat-payment-doc-list { display: flex; flex-direction: column; gap: 10px; }
.stat-payment-doc-card { padding: 13px; border: 1px solid var(--border, #e5e7eb); border-radius: 14px; background: var(--surface, #fff); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.stat-payment-doc-card:hover { transform: translateY(-1px); border-color: var(--primary, #4f46e5); box-shadow: var(--card-shadow, 0 6px 18px rgba(15,23,42,.08)); }
.stat-payment-doc-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.stat-payment-doc-top strong { margin-left: auto; color: var(--success, #16a34a); font-size: 17px; font-variant-numeric: tabular-nums; }
.stat-payment-doc-date { color: var(--text-muted, #64748b); font-size: 11px; }
.stat-payment-doc-info { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 7px; font-size: 12px; color: var(--text-muted, #64748b); }
.stat-payment-doc-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border, #e5e7eb); font-size: 11px; color: var(--text-muted, #64748b); }
.stat-payment-doc-meta .link-text { margin-left: auto; color: var(--primary, #4f46e5); }
@media (max-width: 480px) { .stat-payment-doc-card { padding: 11px; } .stat-payment-doc-top strong { font-size: 15px; } .stat-payment-doc-meta .link-text { margin-left: 0; } }

.stat-payment-doc-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border, #e5e7eb); }
.paid-bulk-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 10px; padding: 9px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--surface-soft, #f8fafc); font-size: 12px; color: var(--text-muted, #64748b); }
.paid-bulk-toolbar .paid-select-all { display: inline-flex; align-items: center; gap: 6px; color: var(--text, #334155); font-weight: 600; cursor: pointer; }
.paid-bulk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.paid-bulk-actions .btn-sm { width: auto; padding: 6px 10px; font-size: 11px; }
.stat-payment-doc-check { width: 16px; height: 16px; margin: 0 2px 0 0; flex: 0 0 auto; cursor: pointer; accent-color: var(--primary, #4f46e5); }
@media (max-width: 640px) { .paid-bulk-actions { margin-left: 0; } }
.stat-payment-doc-actions .btn-secondary.btn-sm { width: auto; margin: 0; padding: 6px 12px; font-size: 11px; }
.payment-document-type.batch-payment-type { color: #dc2626; background: #fee2e2; }
.stat-payment-doc-card.batch-payment-card { border-left: 4px solid #ef4444; }
.stat-payment-doc-card.batch-payment-card.is-open { border-color: #ef4444; }
.payment-document-actions .btn-secondary.btn-sm { white-space: nowrap; }
.stat-payment-doc-card.is-open { border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #4f46e5) 12%, transparent); }
.stat-payment-doc-detail { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border, #e5e7eb); }
.stat-payment-doc-group { padding: 9px 0; border-bottom: 1px dashed var(--border, #e5e7eb); }
.stat-payment-doc-group:last-child { border-bottom: none; padding-bottom: 0; }
.stat-payment-doc-group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.stat-payment-doc-group-head strong:first-child { color: var(--text, #334155); }
.stat-payment-doc-group-head strong:last-child { margin-left: auto; color: var(--success, #16a34a); }
.stat-payment-doc-group-head span { color: var(--text-muted, #64748b); font-size: 11px; }
.stat-payment-doc-note { margin: 5px 0; color: var(--text-muted, #64748b); font-size: 11px; }
.stat-payment-doc-count { color: var(--text-muted, #64748b); font-size: 11px; }
.stat-payment-doc-item { display: flex; flex-direction: column; gap: 3px; padding: 6px 0 6px 8px; font-size: 12px; color: var(--text, #334155); border-bottom: 1px dashed var(--border, #eef2f7); }
.stat-payment-doc-item:last-child { border-bottom: none; }
.stat-payment-doc-item-main { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.stat-payment-doc-item-main span:nth-child(2) { color: var(--text-muted, #64748b); font-size: 11px; }
.stat-payment-doc-item-main span:last-child { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.stat-payment-doc-item-meta { display: flex; flex-wrap: wrap; gap: 3px 14px; color: var(--text-muted, #64748b); font-size: 11px; line-height: 1.5; }
@media (max-width: 480px) { .stat-payment-doc-item-main { grid-template-columns: 1fr auto; } .stat-payment-doc-item-main span:nth-child(2) { display: none; } }


/* Shared muted night palette for all four themes */
body.dark-mode[data-theme] {
    --danger: #c98f9c;
    --danger-soft: rgba(201, 143, 156, .14);
    --warning: #d1b074;
    --warning-soft: rgba(209, 176, 116, .14);
    --success: #8fc7b0;
    --success-soft: rgba(143, 199, 176, .14);
    --info: #8ba9cc;
    --info-soft: rgba(139, 169, 204, .14);
}


/* Header KPI colors must beat the generic header stat box background */
body[data-theme] .app-header .stats .header-card-debt { background:var(--primary-soft); color:var(--text); border:1px solid var(--border); box-shadow:inset 3px 0 0 var(--primary); }
body[data-theme] .app-header .stats .header-card-product { background:var(--info-soft); color:var(--text); border:1px solid var(--border); box-shadow:inset 3px 0 0 var(--info); }
body[data-theme] .app-header .stats .header-card-today { background:var(--warning-soft); color:var(--text); border:1px solid var(--border); box-shadow:inset 3px 0 0 var(--warning); }
body[data-theme] .app-header .stats .header-card-profit { background:var(--success-soft); color:var(--text); border:1px solid var(--border); box-shadow:inset 3px 0 0 var(--success); }
body.dark-mode[data-theme] .app-header .stats .header-card-debt { background:var(--primary-soft); color:var(--text); border-color:var(--primary); }
body.dark-mode[data-theme] .app-header .stats .header-card-product,
body.dark-mode[data-theme] .app-header .stats .header-card-today,
body.dark-mode[data-theme] .app-header .stats .header-card-profit { background:var(--surface-3); color:var(--text); }
body.dark-mode[data-theme] .app-header .stats .header-card-product { border-color:var(--info); }
body.dark-mode[data-theme] .app-header .stats .header-card-today { border-color:var(--warning); }
body.dark-mode[data-theme] .app-header .stats .header-card-profit { border-color:var(--success); }
body[data-theme] .app-header .stats .header-card-debt .stat-value,
body[data-theme] .app-header .stats .header-card-product .stat-value,
body[data-theme] .app-header .stats .header-card-today .stat-value,
body[data-theme] .app-header .stats .header-card-profit .stat-value { color:inherit; }

@media (max-width: 768px) {
    body[data-theme] .app-header .header-stats-grid { grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
}


/* Colored KPI cards need readable theme text, not the white header default */
body[data-theme] .app-header .stats .header-card-debt .stat-label,
body[data-theme] .app-header .stats .header-card-product .stat-label,
body[data-theme] .app-header .stats .header-card-today .stat-label,
body[data-theme] .app-header .stats .header-card-profit .stat-label,
body[data-theme] .app-header .stats .customer-half .stat-label,
body[data-theme] .app-header .stats .supplier-half .stat-label { color:var(--text-muted); }
body[data-theme] .app-header .stats .customer-half .stat-value,
body[data-theme] .app-header .stats .supplier-half .stat-value { color:var(--text); }


/* Final night-mode pass: tabs, mobile query buttons, page-adjust dialog */
body.dark-mode[data-theme] .chart-tab { background:var(--surface-2) !important; color:var(--text-muted) !important; border:1px solid var(--border) !important; }
body.dark-mode[data-theme] .chart-tab.active { background:var(--primary-soft) !important; color:var(--primary) !important; border-color:var(--primary) !important; }
body.dark-mode[data-theme] .mobile-buttons-row .btn-secondary,
body.dark-mode[data-theme] .repay-page .mobile-buttons-row .btn-secondary,
body.dark-mode[data-theme] .report-page .mobile-buttons-row .btn-secondary { background:var(--surface-3) !important; color:var(--text) !important; border:1px solid var(--border) !important; }
body.dark-mode[data-theme] .mobile-buttons-row .btn-danger,
body.dark-mode[data-theme] .repay-page .mobile-buttons-row .btn-danger,
body.dark-mode[data-theme] .report-page .mobile-buttons-row .btn-danger { background:#4a2430 !important; color:#e7b8c2 !important; border:1px solid #6b3545 !important; }
body.dark-mode[data-theme] .debt-detail-actions .btn-sm { background:var(--surface-3) !important; color:var(--text) !important; border:1px solid var(--border) !important; }
body.dark-mode[data-theme] .width-selector-header { background:var(--surface-3) !important; color:var(--text) !important; border-bottom-color:var(--border) !important; }
body.dark-mode[data-theme] .width-option { background:var(--surface-2) !important; border-color:var(--border) !important; }
body.dark-mode[data-theme] .width-option:hover { background:var(--surface-3) !important; }
body.dark-mode[data-theme] .width-option.active { background:var(--primary-soft) !important; border-color:var(--primary) !important; color:var(--primary) !important; }
body.dark-mode[data-theme] .width-option-check { color:var(--success) !important; }


@media (max-width: 768px) {
    body[data-theme] .app-header .header-stats-grid { grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
    body[data-theme] .stock-overview-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
    body[data-theme] .stock-overview-grid > .stat-box { grid-column:auto !important; }
}

body[data-theme] .bottom-nav.sales-nav .nav-indicator { width: calc((100% - 20px) / 5); }