/* ===== Design Tokens ===== */
:root {
    /* Primary */
    --color-primary: #409eff;
    --color-primary-light: rgba(64,158,255,0.15);
    --color-primary-lighter: rgba(64,158,255,0.12);
    --color-white: #fff;

    /* Status */
    --color-success: #67c23a;
    --color-success-bg: #f0f9eb;
    --color-danger: #f56c6c;
    --color-danger-bg: #fef0f0;
    --color-warning: #e6a23c;
    --color-info: #909399;

    /* Text */
    --color-text-primary: #333;
    --color-text-secondary: #888;
    --color-text-title: #303133;
    --color-text-medium: #606266;
    --color-text-light: #e0e0e0;
    --color-text-disabled: #ccc;

    /* Backgrounds */
    --color-bg-page: #f0f4f8;
    --color-bg-hover: #edf2f7;
    --color-bg-header: #f5f7fa;
    --color-bg-stripe: #fafafa;
    --color-bg-subtle: #f9fafc;
    --color-bg-input-focus: #f0f7ff;
    --color-bg-carousel: #f5f5f5;

    /* Borders */
    --color-border: #d0d5dd;
    --color-border-table: #ebeef5;
    --color-border-card: #e2e8f0;
    --color-border-light: #f0f0f0;
    --color-border-divider: #f5f5f5;

    /* Shadows */
    --shadow-nav: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-card: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-dropdown: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-mobile-nav: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-mobile-card: 0 1px 4px rgba(0,0,0,0.04);
    --shadow-case-card: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-case-card-hover: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-filter: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-bottom-nav: 0 -2px 8px rgba(0,0,0,0.08);

    /* Overlay */
    --color-overlay: rgba(0,0,0,0.5);
    --color-overlay-dark: rgba(0,0,0,0.92);
    --color-overlay-badge: rgba(0,0,0,0.55);
    --color-overlay-arrow: rgba(0,0,0,0.45);

    /* Scrollbar */
    --color-scrollbar: #c0c4cc;

    /* Color dots */
    --color-dot-red: #DC143C;
    --color-dot-yellow: #F0A030;
    --color-dot-green: #3D8B37;
    --color-dot-blue: #3B5998;
    --color-dot-brown: #A0522D;
    --color-dot-black: #2C2C2C;
    --color-dot-orange: #E67E22;
    --color-dot-purple: #8E44AD;
    --color-dot-gray: #95A5A6;
    --color-dot-other: #888;

    /* Lightbox */
    --color-lightbox-bar: #1a1a1a;
    --color-lightbox-dosage-bg: rgba(99,102,241,0.25);
    --color-lightbox-dosage-text: #a5b4fc;
    --color-lightbox-usage-bg: rgba(34,197,94,0.25);
    --color-lightbox-usage-text: #86efac;
    --color-lightbox-arrow-bg: rgba(255,255,255,0.15);
    --color-lightbox-arrow-bg-hover: rgba(255,255,255,0.3);
    --color-carousel-dot: rgba(255,255,255,0.5);
    --color-text-muted: #999;
    --color-text-strong: #555;
    --color-border-input: #ddd;
    --color-bg-stripe-alt: #eee;
    --color-warning-bg: #fffbe6;
    --color-warning-border: #faad14;
    --color-error-bg: #fee2e2;
    --color-error-border: #fca5a5;
    --color-error-text: #991b1b;
    --color-link: #2563eb;
    --color-primary-focus: #3b82f6;
    --color-primary-bg-light: #eff6ff;
    --color-primary-border-light: #dbeafe;
    --color-amber: #f59e0b;
    --color-amber-border: #d97706;
    --color-amber-bg: #fffbeb;
    --color-amber-border-light: #fef3c7;
    --color-highlight-blue-bg: #f0f9ff;
    --color-highlight-blue-border: #bae6fd;
    --color-bg-subtle-cool: #f8fafc;
    --color-border-card-light: #e2e8f0;
    --color-text-danger: #dc2626;
    --color-badge-red: #dc3545;
    --color-text-dark: #1f2937;
    --color-yellow-border: #eab308;
    --color-yellow: #eab308;
    --color-yellow-bg: #fefce8;
    --color-badge-green: #86efac;
    --color-badge-purple: #a5b4fc;
    --color-bg-warm: #fefce8;
    --color-indigo: #6366f1;
    --color-bg-lightest: #f8f9fa;
    --color-red-bright: #e74c3c;
    --color-green-bright: #27ae60;
    --color-orange: #e67e22;
    --color-purple: #8e44ad;
    --color-red-dark: #c0392b;
    --color-amber-bright: #facc15;
    --color-brown: #a0522d;
    --color-blue-dark: #1976d2;
    --color-bg-green-light: #e8f5e9;
    --color-bg-blue-light: #e3f2fd;
    --color-bg-violet-light: #f9f0ff;
    --color-bg-orange-light: #fff7ed;
    --color-violet: #a855f7;
    --color-bright-orange: #f97316;
    --color-teal: #14b8a6;
    --color-lime: #84cc16;
    --color-pink: #ec4899;
    --color-blue-hover: #337ecc;
    --color-purple-medium: #9b59b6;
    --color-green-forest: #388e3c;
    --color-bright-green: #22c55e;
    --color-bg-almost-white: #fafbfc;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",-apple-system,sans-serif}
body{background:var(--color-bg-page);padding-top:62px}
.nav{position:fixed;top:0;left:0;right:0;z-index:999;background:var(--color-white);padding:6px 12px;box-shadow:var(--shadow-nav);display:flex;align-items:center;justify-content:space-between;gap:8px}
.nav a{display:inline-block;padding:8px 10px;text-decoration:none;color:var(--color-text-primary);border-radius:6px;font-size:14px;white-space:nowrap;min-height:36px;line-height:20px}
.nav a:hover,.nav a:active{background:var(--color-bg-hover);color:var(--color-primary)}
.nav .btn-red{background:var(--color-danger);color:var(--color-white);min-height:34px;padding:6px 12px;font-size:13px}
.nav .user-info{font-size:12px;color:var(--color-text-secondary);white-space:nowrap}
.nav-hamburger{display:none;background:none;border:none;font-size:24px;cursor:pointer;padding:4px 8px;color:var(--color-text-primary);min-height:36px}
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.nav-search{display:inline-flex;align-items:center}
.nav-dropdown{position:relative}
.nav-dropdown-btn{background:none;border:none;padding:8px 10px;font-size:14px;color:var(--color-text-primary);cursor:pointer;border-radius:6px;min-height:36px;line-height:20px;white-space:nowrap}
.nav-dropdown-btn:hover{background:var(--color-bg-hover);color:var(--color-primary)}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--color-white);border-radius:8px;box-shadow:var(--shadow-dropdown);min-width:160px;z-index:1000;padding:4px 0}
.nav-dropdown-menu a{display:block;padding:10px 16px;font-size:14px;border-radius:0}
.nav-dropdown-menu a:hover{background:var(--color-bg-page)}
.nav-dropdown-open{display:block}
.card{max-width:1300px;margin:12px auto;background:var(--color-white);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow-card)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px -4px;padding:0 4px}
.table-wrap::-webkit-scrollbar{height:4px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--color-scrollbar);border-radius:2px}
h3,h4{margin-bottom:14px;font-size:16px}
input,select,textarea{padding:10px 12px;border:1px solid var(--color-border);border-radius:8px;margin:4px 0;font-size:16px;min-height:44px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}
.btn{display:inline-block;padding:10px 16px;background:var(--color-primary);color:var(--color-white);border:none;border-radius:8px;cursor:pointer;text-decoration:none;font-size:14px;white-space:nowrap;margin:3px;min-height:44px;line-height:24px;text-align:center}
.btn:active{opacity:0.8}
.btn-green{background:var(--color-success)}
.btn-red{background:var(--color-danger)}
.btn-copy{background:var(--color-info)}
.btn-warn{background:var(--color-warning)}
table{width:100%;border-collapse:collapse;margin:8px 0;min-width:600px}
th,td{border:1px solid var(--color-border-table);padding:8px 6px;text-align:center;font-size:13px;word-break:keep-all}
th{background:var(--color-bg-header);font-weight:600;position:sticky;top:0}
tr:nth-child(2n){background:var(--color-bg-stripe)}
.sub-table{width:96%;margin:8px auto;background:var(--color-bg-subtle);min-width:400px}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;color:var(--color-white);margin-left:4px;font-weight:bold}
.badge-red{background:var(--color-danger)}
.badge-orange{background:var(--color-warning)}
.alert-success{background:var(--color-success-bg);border:1px solid var(--color-success);padding:12px;border-radius:8px;margin-bottom:12px;font-size:14px}
.alert-error{background:var(--color-danger-bg);border:1px solid var(--color-danger);padding:12px;border-radius:8px;margin-bottom:12px;font-size:14px}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
    body{padding-top:54px}
    .nav{padding:4px 8px;gap:4px}
    .nav-hamburger{display:block}
    .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-white);flex-direction:column;padding:8px;box-shadow:var(--shadow-mobile-nav);gap:0;max-height:80vh;overflow-y:auto}
    .nav-links.nav-open{display:flex}
    .nav-links a{width:100%;padding:12px 16px;border-radius:0;border-bottom:1px solid var(--color-border-light)}
    .nav-right .user-info{display:none}
    .nav-search input{width:100px!important}
    .nav-dropdown-menu{position:static;box-shadow:none;padding-left:16px}
    .nav-dropdown-btn{width:100%;text-align:left;padding:12px 16px;border-bottom:1px solid var(--color-border-light)}
    .card{margin:8px;padding:12px;border-radius:8px}
    h3,h4{font-size:15px}
    input,select,textarea{font-size:16px;padding:10px;min-height:44px}
    .btn{padding:10px 14px;font-size:13px;min-height:42px;line-height:22px}
    th,td{padding:6px 4px;font-size:12px}
    .nav .badge{margin-left:2px;font-size:11px;padding:2px 6px}
}
@media (max-width: 480px) {
    body{padding-top:50px}
    .nav{padding:4px 6px;gap:2px}
    .card{margin:4px;padding:8px;border-radius:6px}
    h3,h4{font-size:14px}
    th,td{padding:5px 3px;font-size:11px}
    .btn{padding:8px 10px;font-size:12px;min-height:38px}
    .nav-links a{padding:10px 12px;font-size:13px}
}

/* ===== Responsive Table Card Layout (mobile < 640px) ===== */
@media (max-width: 640px) {
    table.responsive-table thead {
        display: none;
    }
    table.responsive-table tr.data-row {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--color-border-card);
        border-radius: 10px;
        background: var(--color-white);
        box-shadow: var(--shadow-mobile-card);
        padding: 2px 0;
    }
    table.responsive-table tr.data-row:nth-child(2n) {
        background: var(--color-white);
    }
    table.responsive-table tr.data-row td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 12px;
        border: none;
        border-bottom: 1px solid var(--color-border-divider);
        text-align: left;
        font-size: 14px;
        min-height: 38px;
        white-space: normal;
        word-break: break-word;
    }
    table.responsive-table tr.data-row td:last-child {
        border-bottom: none;
    }
    table.responsive-table tr.data-row td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: 12px;
        flex-shrink: 0;
        margin-right: 10px;
        min-width: 56px;
        text-align: left;
    }
    table.responsive-table tr:not(.data-row) td[colspan] {
        display: block;
        overflow-x: auto;
        padding: 8px;
    }
    table.responsive-table tr.data-row td[data-label="操作"] {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-start;
    }
    table.responsive-table tr.data-row td[data-label="操作"] .btn {
        margin: 2px;
        font-size: 12px;
        padding: 7px 10px;
        min-height: 34px;
    }
    table.responsive-table tr.data-row td[data-label="操作"] select {
        margin: 2px;
        font-size: 12px;
        min-height: 34px;
        padding: 6px 8px;
    }
    table.responsive-table tr.data-row td[data-label="地址"] {
        max-width: unset !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    table.responsive-table {
        min-width: unset;
        border: none;
    }
}

/* ===== Bottom Tab Bar (mobile < 640px) ===== */
@media (max-width: 640px) {
    body {
        padding-bottom: 70px;
    }
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: var(--color-white);
        box-shadow: var(--shadow-bottom-nav);
        justify-content: space-around;
        align-items: center;
        padding: 4px 0;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
    }
    .bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--color-text-secondary);
        font-size: 11px;
        padding: 4px 0;
        min-width: 56px;
        min-height: 48px;
        border-radius: 8px;
        gap: 2px;
    }
    .bottom-nav a .tab-icon {
        font-size: 22px;
        line-height: 1;
    }
    .bottom-nav a.active {
        color: var(--color-primary);
        font-weight: 600;
    }
    .nav {
        padding: 4px 8px;
        justify-content: center;
    }
}
@media (min-width: 641px) {
    .bottom-nav {
        display: none;
    }
}

/* Pagination */
.pagination svg {
    width: 14px;
    height: 14px;
}
.pagination .page-link {
    padding: 6px 10px;
    font-size: 13px;
}
.pagination .w-5 { width: 14px !important; }
.pagination .h-5 { height: 14px !important; }

.pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 !important;
    gap: 4px !important;
    justify-content: center !important;
}
.pagination li {
    display: inline-block !important;
    margin: 0 !important;
}
.pagination .page-link {
    display: inline-block !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    min-height: unset !important;
    min-width: unset !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    background: var(--color-white) !important;
    color: var(--color-text-primary) !important;
}
.pagination .page-item.active .page-link {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
}
.pagination .page-item.disabled .page-link {
    color: var(--color-text-disabled) !important;
    cursor: not-allowed !important;
}
.pagination .page-link:hover {
    background: var(--color-bg-header) !important;
    border-color: var(--color-primary) !important;
}

/* ===== Application Cases Page ===== */
.page-container{max-width:1280px;margin:0 auto;padding:0 1rem}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:0.75rem}
.page-title{font-size:1.25rem;font-weight:700;color:var(--color-text-title)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.case-card{background:var(--color-white);border-radius:8px;box-shadow:var(--shadow-case-card);overflow:hidden;transition:box-shadow 0.2s}
.case-card:hover{box-shadow:var(--shadow-case-card-hover)}
.case-card-img{width:100%;height:180px;object-fit:cover;cursor:pointer;display:block}
.case-card-body{padding:0.75rem}
.case-card-title{font-weight:500;color:var(--color-text-title);font-size:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.case-card-badge{position:absolute;top:0.5rem;right:0.5rem;background:var(--color-overlay-badge);color:var(--color-white);font-size:0.75rem;padding:0.125rem 0.5rem;border-radius:9999px}
.case-card-relative{position:relative}
.carousel-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:var(--color-bg-carousel)}
.carousel-img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;border-radius:50%;background:var(--color-overlay-arrow);color:var(--color-white);font-size:20px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;opacity:0;transition:opacity 0.2s}
.case-card:hover .carousel-arrow{opacity:1}
.carousel-prev{left:8px}
.carousel-next{right:8px}
.carousel-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--color-carousel-dot);cursor:pointer;transition:background 0.2s}
.carousel-dot.active,.carousel-dot:hover{background:var(--color-white)}
.color-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.color-dot-red{background:var(--color-dot-red)}
.color-dot-yellow{background:var(--color-dot-yellow)}
.color-dot-green{background:var(--color-dot-green)}
.color-dot-blue{background:var(--color-dot-blue)}
.color-dot-brown{background:var(--color-dot-brown)}
.color-dot-black{background:var(--color-dot-black)}
.color-dot-orange{background:var(--color-dot-orange)}
.color-dot-purple{background:var(--color-dot-purple)}
.color-dot-gray{background:var(--color-dot-gray)}
.color-dot-other{background:var(--color-dot-other)}

/* Filter bar */
.filter-bar{background:var(--color-white);border-radius:8px;box-shadow:var(--shadow-filter);padding:1rem;margin-bottom:1.5rem}
.filter-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}
.filter-tag{padding:0.25rem 1rem;border-radius:9999px;border:1px solid var(--color-border);font-size:0.875rem;cursor:pointer;background:var(--color-white);color:var(--color-text-medium);transition:all 0.15s;white-space:nowrap}
.filter-tag:hover{border-color:var(--color-primary);color:var(--color-primary)}
.filter-tag.active{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}
.filter-search{width:100%;padding:0.5rem 0.75rem;border:1px solid var(--color-border);border-radius:8px;font-size:1rem;outline:none}
.filter-search:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-lighter)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:var(--color-overlay);z-index:100;display:flex;align-items:center;justify-content:center}
.modal-panel{background:var(--color-white);border-radius:12px;padding:1.5rem;width:600px;max-width:95vw;max-height:90vh;overflow-y:auto}
.modal-panel-sm{width:400px}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.modal-title{font-size:1.125rem;font-weight:700;color:var(--color-text-title)}
.modal-close{cursor:pointer;color:var(--color-info);font-size:1.5rem;line-height:1;background:none;border:none;padding:0}
.modal-close:hover{color:var(--color-text-medium)}

/* Upload drop zone */
.drop-zone{border:2px dashed var(--color-border);border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:border-color 0.15s;margin-bottom:1rem}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--color-primary);background:var(--color-bg-input-focus)}
.drop-zone-icon{width:48px;height:48px;margin:0 auto;color:var(--color-scrollbar);margin-bottom:0.5rem}
.upload-preview-img{max-height:160px;margin:0 auto;border-radius:8px;display:block;margin-bottom:0.5rem}

/* Progress bar */
.progress-bar-wrap{width:100%;background:var(--color-border-table);border-radius:9999px;height:0.625rem;overflow:hidden}
.progress-bar-fill{background:var(--color-primary);height:100%;border-radius:9999px;transition:width 0.3s}

/* Image selector list */
.image-selector{border:1px solid var(--color-border-card);border-radius:8px;padding:0.5rem;max-height:260px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;gap:2px}

/* Lightbox */
.lightbox-overlay {
    position: fixed; inset: 0; background: var(--color-overlay-dark);
    z-index: 200; display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.lightbox-body {
    display: flex; flex-direction: column; align-items: center;
    max-width: 90vw; max-height: 90vh;
    cursor: default;
}
.lightbox-img {
    max-width: 90vw; max-height: 75vh;
    object-fit: contain; border-radius: 8px 8px 0 0;
}
.lightbox-bar {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; background: var(--color-lightbox-bar); border-radius: 0 0 8px 8px;
    box-sizing: border-box;
}
.lightbox-counter {
    color: var(--color-white); font-size: 16px; font-weight: 700;
}
.lightbox-caption {
    color: var(--color-text-light); font-size: 15px; font-weight: 500;
    display: flex; gap: 16px;
}
.lightbox-caption .lbc-dosage {
    background: var(--color-lightbox-dosage-bg); color: var(--color-lightbox-dosage-text); padding: 3px 10px; border-radius: 4px; font-size: 14px;
}
.lightbox-caption .lbc-usage {
    background: var(--color-lightbox-usage-bg); color: var(--color-lightbox-usage-text); padding: 3px 10px; border-radius: 4px; font-size: 14px;
}
.lightbox-close {
    position: absolute; top: 1rem; right: 1rem;
    color: var(--color-white); font-size: 2.5rem; cursor: pointer; line-height: 1; z-index: 10001;
}
.lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px; border: none; border-radius: 50%;
    background: var(--color-lightbox-arrow-bg); color: var(--color-white); font-size: 32px;
    cursor: pointer; z-index: 10001; transition: background 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-arrow:hover { background: var(--color-lightbox-arrow-bg-hover); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.hidden { display: none !important; }


/* ===== 移动端订单列表增强（2026-10-24）=====
   现有响应式适配已把表格转成卡片（data-label 作为字段名），
   但仍有三处可以提升：

   1. 卡片之间缺少视觉分隔，10 条订单挤在一起难分辨
   2. 关键状态（出库/收款）不够醒目
   3. 卡片内字段的行距偏挤

   注意：表格卡片化原有规则用了 display:block !important，
   本段追加在文件末尾以保证优先级。
*/
@media (max-width: 640px) {
    /* 卡片分隔与留白 */
    table.responsive-table tr.data-row {
        border-bottom: 1px solid var(--color-border-light) !important;
        padding: 8px 0 !important;
        margin-bottom: 2px;
    }
    table.responsive-table tr.data-row td {
        padding: 4px 6px !important;
        line-height: 1.5;
    }
    /* 字段名右对齐，值左对齐，形成清晰的键值对 */
    table.responsive-table tr.data-row td::before {
        display: inline-block;
        min-width: 68px;
        margin-right: 8px;
        color: var(--color-text-tertiary);
        font-size: 12px;
    }
    /* 订单号作为卡片标题独占一行 */
    table.responsive-table tr.data-row td[data-label="订单号"] {
        font-weight: 700 !important;
        font-size: 15px !important;
        color: var(--color-text-primary) !important;
        padding-bottom: 6px !important;
    }
    table.responsive-table tr.data-row td[data-label="订单号"]::before {
        content: '订单号' !important;
    }
    /* 状态加醒目底色 */
    table.responsive-table tr.data-row td[data-label="出库状态"]::after,
    table.responsive-table tr.data-row td[data-label="收款状态"]::after {
        display: inline-block;
        margin-left: 6px;
        padding: 1px 8px;
        border-radius: 10px;
        font-size: 11px;
        line-height: 18px;
    }
    table.responsive-table tr.data-row td[data-label="出库状态"]::after {
        content: '出库';
        background: var(--color-info-bg, #e8f4ff);
        color: var(--color-primary-focus);
    }
    table.responsive-table tr.data-row td[data-label="收款状态"]::after {
        content: '收款';
        background: var(--color-warning-bg);
        color: var(--color-warning-text);
    }
    /* 复选框所在行紧凑些 */
    table.responsive-table tr.data-row td[data-label="选择"] {
        padding: 2px 6px !important;
    }
    table.responsive-table tr.data-row td[data-label="选择"]::before {
        content: '' !important;
        min-width: 0;
    }
}


/* ===== 企微账号绑定（账号管理页）===== */
.wc-auto-bind{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:12px 0;padding:12px 14px;
  background:var(--color-bg-page);border:1px solid var(--color-border);border-radius:8px;
}
.wc-auto-bind .btn{margin:0;white-space:nowrap}
.wc-hint{font-size:12px;color:var(--color-text-tertiary);line-height:1.5}
.wc-bound{
  display:inline-block;padding:2px 8px;margin-right:6px;
  background:var(--color-primary-light,rgba(37,99,235,.1));
  color:var(--color-primary,#2563eb);
  border-radius:4px;font-family:ui-monospace,Menlo,monospace;font-size:12px;
}
/* 绑定输入框：用 max-width 而非固定宽度，避免撑破窄屏表格 */
.wc-bind-form{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin:0}
.wc-bind-form input[name="wecom_userid"]{
  width:auto;max-width:180px;min-width:0;flex:1 1 120px;margin:0;
}
.wc-bind-form .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:768px){
  .wc-bind-form input[name="wecom_userid"]{max-width:100%;flex:1 1 100%}
  .wc-bind-form .btn{flex:1 1 auto}
  .wc-auto-bind{flex-direction:column;align-items:stretch}
  .wc-auto-bind .btn{width:100%}
}

/* ===== 账号管理页（移动端卡片化微调）===== */
.wc-users-table{width:100%}
.wc-users-table input[name="wecom_userid"]{
  box-sizing:border-box;max-width:100%;
}
@media (max-width:768px){
  /* 卡片化后：操作列按钮横向排布，不换行 */
  .wc-users-table td[data-label="操作"]{
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  }
  .wc-users-table td[data-label="操作"] .btn{flex:0 0 auto}
  /* 绑定表单在卡片里占满一行 */
  .wc-users-table td[data-label="企业微信 UserID"] .wc-bind-form{
    display:flex;width:100%;
  }
  .wc-users-table td[data-label="企业微信 UserID"] .wc-bind-form input{
    flex:1 1 auto;min-width:0;width:auto;
  }
  .wc-users-table td[data-label="企业微信 UserID"] .wc-bind-form .btn{
    flex:0 0 auto;padding:6px 14px;
  }
}

/* ===== 页脚（含 ICP 备案号）===== */
.wc-footer{
  margin-top:24px;padding:14px 16px 20px;
  border-top:1px solid var(--color-border-divider,var(--color-border));
  font-size:12px;color:var(--color-text-tertiary);
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  text-align:center;
}
.wc-footer a{color:var(--color-text-tertiary);text-decoration:none}
.wc-footer a:hover{text-decoration:underline}
@media (max-width:768px){
  .wc-footer{flex-direction:column;gap:2px}
  .wc-footer-sep{display:none}
}

/* ===== 移动端订单列表字段精简（2026-10-27）=====
   实测：订单列表在 390px 手机上渲染成 7330px（15 单 × 12 字段），
   老板要滚很久才能看完一屏订单。
   改法（只影响 ≤640px，PC 端完全不受影响）：
     · 隐藏次要字段 —— 手机号、销售、时间
       （这三个在卡片里不参与决策，点「展开」也能看到明细）
     · 「产品」列提升为卡片标题级 —— 老板最想知道的是「订了什么」
   注意：隐藏用的是 data-label 精确匹配，
   因为订单列表与首页待办表格共用 responsive-table 机制，
   用 data-pri 属性选择器会误伤首页。
*/
@media (max-width: 640px) {
    /* ★ 2026-10-28 修正回归：
         上一版用的是全局选择器 td[data-label="销售"]，
         结果命中了【所有】responsive-table 表格 —— 客户列表的「销售」列
         被一起隐藏了，老板在客户卡片上根本看不到客户归属谁。
         现在限定作用域为 .wc-orders-table（订单列表专用），
         客户列表的「销售」列恢复正常显示。 */
    table.wc-orders-table tr.data-row td[data-label="手机号"],
    table.wc-orders-table tr.data-row td[data-label="销售"],
    table.wc-orders-table tr.data-row td[data-label="时间"] {
        display: none !important;
    }

    /* 产品作为卡片主标题 */
    table.wc-orders-table tr.data-row td[data-label="产品"] {
        font-weight: 600 !important;
        font-size: 14px !important;
        color: var(--color-text-primary) !important;
        padding-bottom: 6px !important;
        border-bottom: 1px dashed var(--color-border-light, #eee);
        margin-bottom: 4px;
    }
    table.wc-orders-table tr.data-row td[data-label="产品"]::before {
        content: '产品' !important;
        color: var(--color-text-tertiary) !important;
        font-weight: 400 !important;
    }
}

/* ===== 客户卡片：归属销售徽标（2026-10-28）=====
   需求：客户卡片上要能一眼看出「这个客户属于哪个销售」。
   客户是销售的核心资产 —— 归属不清会导致撞单、抢单、重复联系客户。
   做法：把「销售」字段在卡片里渲染成醒目的徽标，而不是普通文本行。
*/
@media (max-width: 640px) {
    table.wc-cust-table tr.data-row td[data-label="销售"] {
        display: block !important;
        margin-top: 6px;
    }
    table.wc-cust-table tr.data-row td[data-label="销售"]::before {
        content: '' !important;
        display: inline-block !important;
        min-width: 0 !important;
        margin-right: 6px !important;
    }
    /* 徽标样式：内层 span 由视图输出 */
    table.wc-cust-table tr.data-row td[data-label="销售"] .wc-owner-badge {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        background: var(--color-background-info);
        color: var(--color-text-info);
        border: 0.5px solid var(--color-border-info);
    }
    /* 客户编码作为卡片主标题 */
    table.wc-cust-table tr.data-row td[data-label="客户编码"] {
        font-weight: 600 !important;
        font-size: 13px !important;
        color: var(--color-text-primary) !important;
        padding-bottom: 4px !important;
    }
    /* 公司名更醒目 */
    table.wc-cust-table tr.data-row td[data-label="公司"] {
        font-weight: 500 !important;
        font-size: 15px !important;
    }
}

/* ===== 产品表单布局表（2026-10-27）=====
   产品新建/编辑页用的是「label 列 + 输入列」的表单布局表（无表头），
   不能用 responsive-table 卡片化（会让表单散架），
   但全局 table{min-width:600px} 会让它在 390px 手机上横向溢出 222px。
   处理：单独取消最小宽度，label 列固定，input 列自适应撑满。
*/
table.wc-form-table {
    min-width: 0 !important;
    width: 100%;
    table-layout: fixed;
}
table.wc-form-table td:first-child {
    width: 110px;
    vertical-align: top;
    padding-top: 8px;
}
table.wc-form-table td:last-child {
    /* 输入列占满剩余空间 */
    width: auto;
}
/* 表单里的控件统一撑满输入列，不再写死 210px */
table.wc-form-table select,
table.wc-form-table input[type=text],
table.wc-form-table input[type=number],
table.wc-form-table textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    table.wc-form-table td:first-child {
        width: 84px;
        font-size: 13px;
    }
    table.wc-form-table td {
        padding: 6px 4px;
    }
}