:root {
    --primary: #1e3a5f;
    --primary-light: #2d5a8e;
    --primary-lighter: #e8f0fe;
    --primary-dark: #0f2440;
    --accent: #f59e0b;
    --accent-light: #fbbf24;
    --success: #059669;
    --success-light: #d1fae5;
    --warning: #d97706;
    --warning-light: #fef3c7;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --info: #2563eb;
    --info-light: #dbeafe;
    --bg: #f1f5f9;
    --bg-white: #ffffff;
    --text: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.03);
    --radius: 8px;
    --radius-lg: 12px;
    --radius-sm: 6px;
    --sidebar-width: 240px;
    --header-height: 64px;
    --transition: 0.2s ease;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
    /* 禁用浏览器/系统自带的到顶下拉刷新页面（Chrome/鸿蒙 ArkWeb 默认行为），防误刷新丢表单；内部滚动容器不受影响。 */
    overscroll-behavior-y: none;
    /* 全局防横向溢出：手机/平板不再出现左右拖动 */
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    /* 全局防横向溢出：手机/平板不再出现左右拖动 */
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--primary-light); }

img, video, canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; }
/* 嵌入元素/代码块防横向溢出：限宽；pre 长内容在自身内滚动而非撑破整页 */
iframe, object, embed { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ========== Layout ========== */
.layout {
    display: flex;
    min-height: 100vh;
}

/* ========== Sidebar ========== */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #0f2440 0%, #1a365d 30%, #1e3a5f 70%, #1e3a5f 100%);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-header {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.sidebar-header h1 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #fff 50%, rgba(255,255,255,0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-header p {
    font-size: 11px;
    opacity: 0.5;
    margin-top: 3px;
    font-weight: 400;
}

.sidebar-menu {
    padding: 12px 0;
    flex: 1;
}

.menu-section { margin-bottom: 4px; }

.menu-section-title {
    padding: 12px 20px 6px;
    font-size: 14px;
    text-transform: none;
    color: rgba(255,255,255,0.62);
    letter-spacing: 0.5px;
    font-weight: 700;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: rgba(255,255,255,0.7);
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 13.5px;
    border-left: 3px solid transparent;
    text-decoration: none;
    gap: 10px;
    position: relative;
}

.menu-item i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
}

.menu-item:hover {
    background: rgba(255,255,255,0.08);
    color: white;
    padding-left: 23px;
}

.menu-item.active {
    background: rgba(255,255,255,0.12);
    color: white;
    border-left-color: var(--accent);
    font-weight: 500;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    backdrop-filter: blur(2px);
}

/* ========== Main Content ========== */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ========== Header ========== */
.header {
    background: var(--bg-white);
    padding: 0 24px;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-left h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Sidebar toggle button */
.sidebar-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 18px;
    transition: background var(--transition);
    flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--border); }

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.user-name {
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.3;
}

.user-role {
    font-size: 11px;
    color: var(--text-muted);
}

/* ========== Content Area ========== */
.content {
    padding: 24px;
    flex: 1;
}

/* ========== Card ========== */
.card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    transition: box-shadow 0.3s ease;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
}

.card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.card-title i {
    margin-right: 8px;
    color: var(--primary);
}

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    height: 40px;
    white-space: nowrap;
    user-select: none;
    letter-spacing: 0.2px;
}

.btn i { font-size: 13px; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
    transform: translateY(-1px);
}

.btn-secondary {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}
.btn-secondary:hover {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, #047857 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}
.btn-success:hover {
    background: linear-gradient(135deg, #047857 0%, var(--success) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, #b91c1c 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}
.btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, var(--danger) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    transform: translateY(-1px);
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, #b45309 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
}
.btn-warning:hover {
    background: linear-gradient(135deg, #b45309 0%, var(--warning) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
    transform: translateY(-1px);
}

.btn-outline {
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
}
.btn-outline:hover {
    background: var(--primary-lighter);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    height: 32px;
    min-width: auto;
}

.btn-lg {
    padding: 12px 28px;
    font-size: 15px;
    height: 48px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-group {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* ========== Forms ========== */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--text);
}

.form-group label .required {
    color: var(--danger);
    margin-left: 2px;
}

.form-control {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    transition: all 0.25s ease;
    height: 40px;
    line-height: 1.5;
    color: var(--text);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.form-control.error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-control[readonly] {
    background: var(--bg);
    cursor: not-allowed;
}

/* ===== 合同文档 拖拽上传框 ===== */
.doc-dropzone {
    border: 2px dashed var(--primary-light, #94a3b8);
    border-radius: 14px;
    background: #f8fafc;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .22s ease;
    position: relative;
    margin-top: 4px;
}
.doc-dropzone:hover { border-color: var(--primary); background: var(--primary-lighter); }
.doc-dropzone.dz-hover,
.doc-dropzone:focus {
    border-color: var(--primary);
    background: var(--primary-lighter);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
    outline: none;
}
.doc-dropzone .dz-icon { font-size: 34px; color: var(--primary-light); margin-bottom: 8px; }
.doc-dropzone .dz-title { font-size: 15px; font-weight: 600; color: var(--primary); }
.doc-dropzone .dz-sub { font-size: 12px; color: #94a3b8; margin-top: 6px; }
.doc-dropzone .dz-btn {
    margin-top: 14px; padding: 8px 18px; font-size: 13px; font-weight: 600;
    color: #fff; background: var(--primary); border: none; border-radius: 10px;
    cursor: pointer; transition: all .2s ease; display: inline-flex; align-items: center; gap: 6px;
}
.doc-dropzone .dz-btn:hover { background: var(--primary-light); }
.doc-preview-list {
    margin-top: 12px; display: flex; flex-direction: column; gap: 8px;
}
.dz-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    padding: 9px 12px;
}
.dz-item-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); flex: 1; min-width: 0; }
.dz-item-info small { color: #94a3b8; margin-left: 4px; }
.dz-item-remove {
    border: none; background: var(--danger-light); color: var(--danger);
    width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.dz-item-remove:hover { background: var(--danger); color: #fff; }

/* ===== 合同文档 正方形方框展示（不可下载；尺寸与产品图片一致 132px）===== */
.contract-doc-item{width:132px;}
.doc-thumb{
    width:132px;height:132px;border-radius:10px;border:1px solid var(--border);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    cursor:pointer;color:#ea580c;background:linear-gradient(160deg,#fff7ed,#fff);
    transition:all .18s ease;text-align:center;
}
.doc-thumb:hover{box-shadow:0 4px 14px rgba(30,58,95,.14);transform:translateY(-1px);border-color:var(--primary-light);}
.doc-thumb i{font-size:34px;}
.doc-thumb-img{object-fit:cover;background:#f1f5f9;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;}
.doc-thumb-meta{font-size:10px;color:#78716c;}
.doc-thumb-name{margin-top:6px;font-size:11px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.doc-thumb-ctrl{margin-top:4px;display:flex;align-items:center;gap:4px;}
.doc-thumb-ctrl input{flex:1;min-width:0;padding:3px 6px;font-size:11px;border:1px solid var(--border);border-radius:6px;}
.doc-thumb-ctrl button{border:1px solid var(--border);background:#f8fafc;color:#0f172a;border-radius:6px;font-size:11px;padding:3px 7px;cursor:pointer;line-height:1;}
.doc-thumb-ctrl button:hover{background:#eef2f7;}
/* 上传方框 */
.doc-drop-square{
    width:100px;height:100px;border:2px dashed var(--primary-light, #94a3b8);border-radius:12px;
    background:#fbfdff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    cursor:pointer;color:#2563eb;transition:all .18s ease;
}
.doc-drop-square:hover{border-color:var(--primary);background:var(--primary-lighter);color:var(--primary);}
.doc-drop-square i{font-size:26px;}
.doc-drop-square:first-of-type{color:#ea580c;}
.doc-drop-square:first-of-type:hover{color:#c2410c;background:#fff7ed;}
.doc-drop-label{font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;}
.doc-drop-label small{font-size:10px;color:#94a3b8;font-weight:400;}
/* 翻阅浮层 */
#docViewer .dv-nav{
    position:fixed;top:50%;transform:translateY(-50%);z-index:10;
    width:44px;height:56px;border:none;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;
    font-size:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:4px;
    transition:background .15s;
}
#docViewer .dv-nav:hover{background:rgba(255,255,255,.3);}
#docViewer .dv-prev{left:12px;}
#docViewer .dv-next{right:12px;}
#docViewer .dv-close{
    position:fixed;top:14px;right:18px;z-index:11;border:none;background:rgba(255,255,255,.16);color:#fff;
    width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1;
}
#docViewer .dv-close:hover{background:rgba(255,255,255,.32);}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
    height: auto;
}

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.form-row .form-group {
    flex: 1;
    min-width: 200px;
    padding: 0 10px;
}

.form-error {
    color: var(--danger);
    font-size: 12px;
    margin-top: 4px;
}

.form-help {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px;
}

/* ========== Filter Bar ========== */
.filter-bar {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.filter-bar form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.filter-bar .form-group {
    margin-bottom: 0;
    min-width: 140px;
}

.filter-bar .form-control {
    height: 38px;
    font-size: 13px;
    background: var(--bg-white);
}

.filter-bar .btn {
    height: 38px;
}

/* ========== Table ========== */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
    padding: 0 4px;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

table th,
table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

table th {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: none;
    white-space: nowrap;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--border);
}

table tbody tr {
    transition: background 0.2s ease;
}

table tbody tr:hover {
    background: rgba(30, 58, 95, 0.025);
}

table tbody tr:last-child td {
    border-bottom: none;
}

table .actions {
    white-space: nowrap;
    text-align: right;
}

table .actions .btn {
    height: 30px;
    min-width: auto;
    padding: 4px 10px;
    font-size: 12px;
}
table .actions .btn + .btn {
    margin-left: 6px;
}

/* ========== 全局表格字段框体统一 ==========
   依据 td[data-label] 属性 + 专项类，统一各字段的对齐、换行、宽度、字号。
   配合 JS autoShrinkCells，实现"超宽自动缩小字号一行显示"，覆盖所有列表页。 */

/* 通用单行钩子：配合 JS 超宽时缩小字号 */
table .cell-nowrap,
table .cell-partner {
    white-space: nowrap;
    overflow: hidden;
}

/* 单号 / 编号 / 税号 / 发票号 / 合同号 / 电话 / 邮箱 / ID / IP / 关联：单行 + 等宽数字 */
table td[data-label*="号"],
table td[data-label*="电话"],
table td[data-label*="邮箱"],
table td[data-label*="IP"],
table td[data-label="ID"],
table td[data-label*="关联"] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 日期 / 时间 / 交期：单行 + 等宽数字 */
table td[data-label*="日期"],
table td[data-label*="时间"],
table td[data-label="交期"] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 金额 / 税额 / 税率 / 费用 / 合计 / 已收付款：右对齐 + 单行 + 等宽数字 */
table td[data-label*="金额"],
table td[data-label*="合计"],
table td[data-label="税额"],
table td[data-label="税率"],
table td[data-label="费用"],
table td[data-label="已收款"],
table td[data-label="已付款"],
table td[data-label="已付/收款"] {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 名称 / 公司 / 单位 / 客户 / 供应商 / 联系人：单行 */
table td[data-label*="名称"],
table td[data-label*="公司"],
table td[data-label*="单位"],
table td[data-label*="客户"],
table td[data-label*="供应商"],
table td[data-label*="联系人"] {
    white-space: nowrap;
}

/* 状态 / 类型 / 方式：单行 */
table td[data-label*="状态"],
table td[data-label*="类型"],
table td[data-label*="方式"] {
    white-space: nowrap;
}

/* 合同名称 / 关联合同：含对方编号、项目名等长内容，允许多行整齐显示，避免与相邻列重叠 */
table td[data-label="合同名称"],
table td[data-label="关联合同"] {
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
    vertical-align: top;
}

/* 桌面端：统一各字段框体宽度 + 字号；超宽内容由 JS 缩小字号适配一行 */
@media (min-width: 768px) {
    table td[data-label*="号"],
    table td[data-label*="电话"],
    table td[data-label*="邮箱"],
    table td[data-label*="IP"],
    table td[data-label="ID"],
    table td[data-label*="关联"] {
        max-width: 150px;
    }
    table td[data-label*="日期"],
    table td[data-label*="时间"],
    table td[data-label="交期"] {
        max-width: 105px;
        font-size: 12.5px;
    }
    table td[data-label*="金额"],
    table td[data-label*="合计"],
    table td[data-label="税额"],
    table td[data-label="税率"],
    table td[data-label="费用"],
    table td[data-label="已收款"],
    table td[data-label="已付款"],
    table td[data-label="已付/收款"] {
        max-width: 130px;
    }
    table td[data-label*="名称"],
    table td[data-label*="公司"],
    table td[data-label*="单位"],
    table td[data-label*="客户"],
    table td[data-label*="供应商"],
    table td[data-label*="联系人"] {
        max-width: 180px;
    }
    table td[data-label*="状态"],
    table td[data-label*="类型"],
    table td[data-label*="方式"] {
        max-width: 110px;
    }

    /* 长文本字段：多行整齐显示（备注 / 描述 / 详情 / 交货要求 / 说明 / 地址） */
    table td[data-label="备注"],
    table td[data-label="操作描述"],
    table td[data-label="描述"],
    table td[data-label="详情"],
    table td[data-label="交货要求"],
    table td[data-label="说明"],
    table td[data-label*="地址"] {
        white-space: normal;
        word-break: break-word;
        line-height: 1.5;
        min-width: 120px;
        max-width: 280px;
        vertical-align: top;
        text-align: left;
    }

    /* 合同名称 / 关联合同：多行显示，限定宽度避免挤压相邻列 */
    table td[data-label="合同名称"],
    table td[data-label="关联合同"] {
        min-width: 140px;
        max-width: 240px;
    }
}

/* ========== 进度条图例 ========== */
.progress-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 24px;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px dashed var(--border);
    background: #fafbfc;
}
.progress-legend .legend-caption {
    font-weight: 600;
    color: var(--text-primary, #1e3a5f);
}
.progress-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.progress-legend .legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.progress-legend .legend-note {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

/* 物流公司列：单行显示，超宽自动缩小字号适配 */
.logistics-cell {
    white-space: nowrap;
    font-size: 12.5px;
}
.logistics-cell .logistics-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

/* ========== 合同列表增强（浅色调 + 行间距） ========== */
/* 对方编号：用紫色与内部合同编号区分，不再使用文字标签 */
.contract-ext-no {
    color: #805ad5;
    font-size: 12px;
    font-weight: 500;
    margin-top: 3px;
    letter-spacing: 0.2px;
}

/* 签订日期：缩小字号，单行显示 */
.cell-sign-date {
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-secondary);
}

/* 物流单号：缩小字号，单行显示 */
.cell-logistics-no {
    white-space: nowrap;
    font-size: 12px;
}
.cell-logistics-no .logistics-no-value {
    font-family: monospace;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 合同列表行：增加行间距、浅色分隔，hover 浅灰 */
.contract-table tbody tr {
    border-bottom: 1px solid var(--border-light);
}
.contract-table tbody tr:hover {
    background: #f8fafc;
}
.contract-table td[data-label="合同名称"] {
    max-width: 220px;
}

/* 桌面/平板：增大合同行垂直留白，避免上下过挤 */
@media (min-width: 768px) {
    .contract-table td {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* 手机端：合同列表卡片化强化 */
@media (max-width: 767px) {
    .contract-table tbody tr {
        border: 1px solid var(--border-light);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: var(--shadow-sm);
        margin-bottom: 14px;
        padding: 16px;
        position: relative;
        overflow: hidden;
    }
    .contract-table tbody tr:hover {
        background: #ffffff;
    }
    .contract-table td {
        padding: 7px 0;
    }
    .contract-table td[data-label="合同编号"] {
        align-items: flex-start;
    }
    .contract-table td[data-label="合同编号"] a {
        font-size: 14px;
        font-weight: 700;
    }
    .contract-table td[data-label="合同名称"] {
        max-width: none;
    }
}

/* ========== Badge ========== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 20px;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.badge-draft,
.badge-pending {
    background: var(--warning-light);
    color: #92400e;
}

.badge-active,
.badge-confirmed,
.badge-quoted,
.badge-accepted {
    background: var(--success-light);
    color: #065f46;
}

.badge-completed,
.badge-issued {
    background: var(--info-light);
    color: #1e40af;
}

.badge-cancelled,
.badge-void,
.badge-rejected {
    background: var(--danger-light);
    color: #991b1b;
}

.badge-archived {
    background: #f1f5f9;
    color: #475569;
}

.badge-pending_confirmed {
    background: #fff7ed;
    color: #9a3412;
}

.badge-deal {
    background: #ecfdf5;
    color: #065f46;
}

.badge-expired {
    background: #f1f5f9;
    color: #475569;
}

.badge-processing {
    background: #dbeafe;
    color: #1e40af;
}

.badge-closed {
    background: #f1f5f9;
    color: #475569;
}

/* 售后状态机阶段2：待客户确认 */
.badge-wait_confirm {
    background: #ede9fe;
    color: #6d28d9;
}

.badge-purchase,
.badge-sales {
    font-weight: 600;
    padding: 2px 10px;
}

.badge-purchase {
    background: #dcfce7;
    color: #166534;
}

.badge-sales {
    background: #fce7f3;
    color: #9d174d;
}

/* ========== Alert ========== */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    border: 1px solid transparent;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.alert i { font-size: 16px; flex-shrink: 0; }

.alert-success {
    background: var(--success-light);
    color: #065f46;
    border-color: #a7f3d0;
}

.alert-error {
    background: var(--danger-light);
    color: #991b1b;
    border-color: #fecaca;
}

.alert-warning {
    background: var(--warning-light);
    color: #92400e;
    border-color: #fde68a;
}

.alert-info {
    background: var(--info-light);
    color: #1e40af;
    border-color: #bfdbfe;
}

/* ========== Pagination ========== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    transition: all var(--transition);
    text-decoration: none;
}

.pagination a:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.pagination .current {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    font-weight: 600;
}

.pagination .disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pagination .jump-input {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.pagination .jump-input input {
    width: 50px;
    height: 36px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    outline: none;
    padding: 0 4px;
}

.pagination .jump-input input:focus {
    border-color: var(--primary);
}

.pagination .jump-input .btn-jump {
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition);
}

.pagination .jump-input .btn-jump:hover {
    border-color: var(--primary);
    color: var(--primary);
}

@media (max-width: 768px) {
    .pagination .jump-input input {
        width: 40px;
        height: 32px;
        font-size: 12px;
    }
    .pagination .jump-input .btn-jump {
        height: 32px;
        padding: 0 8px;
        font-size: 11px;
    }
}

/* ========== Stats Grid ========== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: linear-gradient(135deg, var(--bg-white) 0%, #f8fafc 100%);
    padding: 22px 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 0 0 0 100%;
    opacity: 0.04;
    pointer-events: none;
}

.stat-card:nth-child(1)::after { background: var(--info); }
.stat-card:nth-child(2)::after { background: var(--success); }
.stat-card:nth-child(3)::after { background: var(--success); }
.stat-card:nth-child(4)::after { background: var(--danger); }
.stat-card:nth-child(5)::after { background: var(--warning); }
.stat-card:nth-child(6)::after { background: var(--danger); }

.stat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--primary-lighter);
}

a.stat-card {
    color: inherit;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.stat-info h3 {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: none;
    letter-spacing: 0.3px;
}

.stat-info p {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin: 0;
    padding: 4px 0;
}

.stat-info small {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.stat-icon.blue {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: var(--info);
}

.stat-icon.green {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: var(--success);
}

.stat-icon.orange {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: var(--warning);
}

.stat-icon.red {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: var(--danger);
}

/* ========== Detail ========== */
.detail-section {
    margin-bottom: 28px;
}

.detail-section h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-lighter);
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-section h3 i { color: var(--primary); font-size: 16px; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.detail-item {
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

.detail-item:hover {
    border-color: var(--primary-lighter);
    box-shadow: var(--shadow-sm);
}

.detail-item label {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0.3px;
}

.detail-item p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

/* ========== Amount colors ========== */
.amount-positive {
    color: var(--danger);
    font-weight: 600;
}

.amount-negative {
    color: var(--success);
    font-weight: 600;
}

.text-amount { font-variant-numeric: tabular-nums; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--primary); }
.text-nowrap { white-space: nowrap; }
.small { font-size: 12px; }

/* ========== Quick Actions ========== */
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.quick-actions .btn {
    border-radius: var(--radius);
    font-weight: 500;
    padding: 10px 22px;
    transition: all 0.25s ease;
}
.quick-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-quick {
    color: #fff !important;
    border: none !important;
}

.btn-quick-contract { background: linear-gradient(135deg, #1e3a5f, #2d5a8e); }
.btn-quick-quotation { background: linear-gradient(135deg, #e11d48, #be123c); }
.btn-quick-inquiry { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.btn-quick-payment { background: linear-gradient(135deg, #059669, #047857); }
.btn-quick-receivable { background: linear-gradient(135deg, #d97706, #b45309); }
.btn-quick-invoice { background: linear-gradient(135deg, #0d9488, #0f766e); }

/* ========== Tab ========== */
.tab-nav {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-item {
    padding: 12px 22px;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    font-size: 14px;
}

.tab-item:hover { color: var(--primary); }

.tab-item.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* ========== Modal ========== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.modal.show { display: flex; }

.modal-content {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-title {
    font-size: 17px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}
.modal-close:hover {
    background: var(--danger-light);
    color: var(--danger);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* ========== Empty State ========== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.2;
    display: block;
    background: linear-gradient(135deg, var(--text-muted), var(--border));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-state h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.empty-state p {
    color: var(--text-muted);
    font-size: 14px;
}

/* ========== File Preview ========== */
.file-preview-box {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-white);
}

.file-preview-header {
    padding: 10px 14px;
    background: var(--primary-lighter);
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.file-preview-body {
    padding: 12px;
}

.file-preview-body img {
    max-height: 400px;
    object-fit: contain;
}

/* ========== Loading ========== */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.loading::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2.5px solid var(--primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== Progress Bar ========== */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    margin: 4px 0;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.progress-bar-fill.full {
    background: linear-gradient(90deg, var(--success), #047857);
}

.progress-bar-fill.partial {
    background: linear-gradient(90deg, var(--warning), var(--accent));
}

.progress-bar-fill.empty {
    background: linear-gradient(90deg, #cbd5e1, #94a3b8);
}

/* ========== Chart ========== */
.chart-container {
    background: var(--bg-white);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.chart-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
}

/* ========== Report ========== */
.report-filters {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.report-table {
    background: var(--bg-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--border);
}

.report-table-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
}

.report-table-header h3 {
    margin: 0;
    font-size: 15px;
    color: var(--text);
}

.report-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.report-links .card {
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.report-links .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.report-links .card i {
    font-size: 24px;
    margin-bottom: 8px;
}

/* ========== Reminder Grid (Dashboard) ========== */
.reminder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    padding: 16px 24px;
}

.reminder-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    min-width: 0;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease;
}

.reminder-card:hover {
    box-shadow: var(--shadow-md);
}

.reminder-card h4 {
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    margin: 0;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

.reminder-card h4 i {
    font-size: 14px;
}

.reminder-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition);
    gap: 8px;
}

.reminder-link:hover {
    background: var(--bg-white);
}

.reminder-link:last-of-type {
    border-bottom: none;
}

.reminder-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reminder-value {
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
}

.reminder-value.red { color: var(--danger); }
.reminder-value.blue { color: var(--primary); }
.reminder-value.yellow { color: var(--warning); }
.reminder-value.green { color: var(--success); }

.reminder-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.reminder-empty {
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.reminder-empty i {
    font-size: 20px;
    display: block;
    margin-bottom: 6px;
    color: var(--success);
}

.reminder-amount {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card header accent colors */
.card-expiring h4 { color: #d97706; background: #fef3c7; }
.card-payment h4 { color: var(--danger); background: var(--danger-light); }
.card-receivable h4 { color: #d97706; background: #fef3c7; }
.card-invoice h4 { color: var(--primary); background: var(--info-light); }
.card-unreceived h4 { color: #d97706; background: #fef3c7; }
.card-reminder h4 { color: #7c3aed; background: #f5f3ff; }

/* Reminder events two-col layout */
.reminder-events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 14px;
}

.reminder-event-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text);
    padding: 4px 0;
    border-bottom: 1px solid #ede9fe;
    gap: 8px;
}

.reminder-event-item:last-child {
    border-bottom: none;
}

.reminder-event-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: var(--text);
    text-decoration: none;
    min-width: 0;
}

.reminder-event-meta {
    font-size: 10px;
    color: var(--text-muted);
}

.reminder-event-date {
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.reminder-event-date.overdue { color: #dc2626; }
.reminder-event-date.normal { color: #7c3aed; }

@media (max-width: 767px) {
    .reminder-grid {
        grid-template-columns: 1fr;
        padding: 12px 14px;
        gap: 12px;
    }

    .reminder-card h4 {
        font-size: 12px;
        padding: 8px 12px;
    }

    .reminder-link {
        padding: 6px 12px;
        font-size: 11px;
        flex-wrap: wrap;
    }

    .reminder-value {
        font-size: 11px;
    }

    .reminder-events-grid {
        grid-template-columns: 1fr;
    }

    .reminder-empty {
        padding: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .reminder-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* ========== Login ========== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f2440 0%, #1e3a5f 40%, #2d5a8e 100%);
    padding: 20px;
}

.login-box {
    background: var(--bg-white);
    padding: 44px 40px;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 420px;
    animation: modalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.login-box h1 {
    text-align: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
    font-size: 24px;
    font-weight: 700;
}

.login-box h2 {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 32px;
    font-size: 14px;
    font-weight: 400;
}

.login-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    justify-content: center;
}

.login-logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.login-header-text h1 {
    text-align: left;
    margin-bottom: 2px;
    font-size: 24px;
    font-weight: 700;
}

.login-header-text h2 {
    text-align: left;
    color: var(--text-muted);
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
}

/* ========== Install ========== */
.install-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f2440 0%, #1e3a5f 100%);
    padding: 20px;
}

.install-box {
    background: var(--bg-white);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 600px;
}

.install-box h1 {
    text-align: center;
    color: var(--text);
    margin-bottom: 4px;
}

.install-box h2 {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 32px;
    font-weight: 400;
    font-size: 14px;
}

.install-box .actions {
    text-align: center;
    margin-top: 24px;
}

.messages { margin: 20px 0; }
.message {
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
}
.message.success {
    background: var(--success-light);
    color: #065f46;
}
.message.error {
    background: var(--danger-light);
    color: #991b1b;
}

/* ========== Margin helpers ========== */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

.hidden { display: none !important; }

/* ===================================================================
   RESPONSIVE UTILITIES & ENHANCEMENTS
   =================================================================== */

/* Card header action buttons group */
.card-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Flex wrap utility for inline flex containers */
.flex-wrap {
    flex-wrap: wrap;
}

/* Text truncation */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Full width on mobile */
.w-full-mobile {
    width: 100%;
}

/* Dashboard external links */
.dashboard-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.dashboard-link i {
    font-size: 13px;
}

/* Dashboard year selector form */
.dashboard-year-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Overflow auto container */
.overflow-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========== Print ========== */
@media print {
    .sidebar,
    .header,
    .no-print,
    .filter-bar,
    .btn,
    .actions { display: none !important; }
    .main-content { margin-left: 0; }
    .content { padding: 0; }
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
}

/* ===================================================================
   RESPONSIVE DESIGN
   =================================================================== */

/* Tablet & below */
@media (max-width: 1023px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.show {
        display: block;
    }

    .main-content {
        margin-left: 0;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .content {
        padding: 16px;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-info p {
        font-size: 22px;
    }

    .card {
        padding: 18px;
    }

    .header {
        padding: 0 16px;
    }

    .header-left h2 {
        font-size: 16px;
    }

    .form-row .form-group {
        min-width: 180px;
    }

    /* Tablet: keep action buttons inline but allow wrap */
    .card-header .card-header-actions {
        flex-wrap: wrap;
    }

    /* Tablet: inline flex containers should wrap */
    [style*="display: flex"]:not(.sidebar):not(.header):not(.main-content):not(.layout) {
        flex-wrap: wrap;
    }

    /* Tablet: table horizontal scroll */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tablet: ensure pagination doesn't overflow */
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .content {
        padding: 12px;
    }

    .card {
        padding: 14px;
        border-radius: var(--radius);
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .card-title {
        font-size: 15px;
    }

    .header {
        padding: 0 12px;
        height: 56px;
    }

    .header-left h2 {
        font-size: 15px;
    }

    .header-right .user-info .user-name,
    .header-right .user-info .user-role {
        display: none;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* Mobile: header title truncation */
    .header-left h2 {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Mobile: stats grid → single column */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-info p {
        font-size: 20px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* Mobile: filter bar collapse */
    .filter-bar {
        padding: 12px 14px;
    }

    .filter-bar form {
        flex-direction: column;
        gap: 8px;
    }

    .filter-bar .form-group,
    .filter-bar .form-control,
    .filter-bar .btn {
        width: 100%;
        min-width: 100%;
    }

    /* Mobile: form rows */
    .form-row {
        flex-direction: column;
        margin: 0;
    }

    .form-row .form-group {
        min-width: 100%;
        padding: 0;
    }

    /* Mobile: table becomes card */
    .table-container {
        margin: 0;
        padding: 0;
        overflow-x: visible;
        max-height: none;
    }

    table, thead, tbody, th, td, tr {
        display: block;
    }

    table thead {
        display: none;
    }

    table tbody tr {
        background: var(--bg-white);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 14px;
        margin-bottom: 12px;
        box-shadow: var(--shadow-sm);
    }

    table tbody tr:hover {
        background: var(--bg-white);
    }

    table tbody tr:last-child td {
        border-bottom: 1px solid var(--border);
    }

    table td {
        padding: 6px 0;
        border: none !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        min-height: 32px;
    }

    table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 11.5px;
        flex-shrink: 0;
        min-width: 70px;
    }

    table td.text-right {
        text-align: left;
        justify-content: space-between;
    }

    table td.actions {
        justify-content: flex-end;
        padding-top: 10px;
        border-top: 1px solid var(--border) !important;
        margin-top: 8px;
        gap: 8px;
    }

    table td.actions::before {
        display: none;
    }

    /* Mobile: table cell progress bar and small text */
    table td .progress-bar-container {
        width: 100%;
    }

    table td small,
    table td .text-muted {
        font-size: 11px;
    }

    /* Mobile: detail grid */
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-item {
        padding: 12px 14px;
    }

    /* Mobile: quick actions */
    .quick-actions {
        flex-direction: column;
        gap: 8px;
    }

    .quick-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Mobile: tab nav */
    .tab-nav {
        gap: 0;
    }

    .tab-item {
        padding: 10px 16px;
        font-size: 13px;
    }

    /* Mobile: modal */
    .modal-content {
        padding: 20px;
        margin: 10px;
        max-height: 90vh;
    }

    /* Mobile: pagination */
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }

    .pagination a,
    .pagination span {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* Mobile: report */
    .report-filters {
        flex-direction: column;
        padding: 14px;
    }

    .report-summary {
        grid-template-columns: 1fr;
    }

    .report-links {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Mobile: empty state */
    .empty-state {
        padding: 40px 16px;
    }

    .empty-state i {
        font-size: 40px;
    }

    /* Mobile: button groups */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
        justify-content: center;
    }

    /* Mobile: select in filter */
    select.form-control {
        font-size: 14px;
    }

    /* Mobile: form spacing */
    .form-group {
        margin-bottom: 14px;
    }

    /* Mobile: alert messages */
    .alert {
        padding: 12px 14px;
        font-size: 13px;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Mobile: inline flex containers (catch-all for common patterns) */
    [style*="display: flex"]:not(.sidebar):not(.header):not(.main-content):not(.layout):not(.card-header) {
        flex-wrap: wrap !important;
    }

    /* Mobile: badge in table cells */
    table td .badge {
        font-size: 11px;
        padding: 2px 8px;
    }

    /* Mobile: ensure buttons in table cells don't overflow */
    table td .btn {
        white-space: nowrap;
        font-size: 12px;
        padding: 4px 10px;
    }

    /* Mobile: card header inline button groups — 操作按钮自动均分一行，不再整宽堆叠 */
    .card-header > div:not(.card-header-actions) {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-header > div:not(.card-header-actions) > .btn,
    .card-header > div:not(.card-header-actions) > button {
        width: auto;
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Mobile: form labels */
    label {
        font-size: 13px;
    }

    /* Mobile: file preview */
    .file-preview-body img {
        max-height: 200px;
    }

    /* Mobile: invoice progress text */
    .progress-bar-container + small {
        display: block;
        text-align: left;
        margin-top: 2px;
    }

    /* Dashboard: charts stack */
    .dashboard-charts-row {
        grid-template-columns: 1fr !important;
    }

    /* Dashboard: reminders left/right stack */
    .reminders-two-col {
        grid-template-columns: 1fr !important;
    }

    /* Evidence cards */
    .evidence-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Reminder rows */
    .reminder-row {
        flex-direction: column !important;
    }
    .reminder-row .form-group {
        min-width: 100% !important;
    }
}

/* Small mobile */
@media (max-width: 400px) {
    .content {
        padding: 8px;
    }

    .card {
        padding: 12px;
    }

    table tbody tr {
        padding: 10px;
    }

    table td {
        font-size: 12px;
        padding: 5px 0;
        min-height: 28px;
    }

    table td::before {
        font-size: 10.5px;
        min-width: 60px;
    }

    .report-links {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-info p {
        font-size: 18px;
    }

    .header-left h2 {
        max-width: 120px;
        font-size: 13px;
    }

    .header {
        padding: 0 8px;
        height: 50px;
    }

    .sidebar-toggle {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .user-avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .btn {
        font-size: 12px;
        padding: 6px 12px;
    }

    .filter-bar {
        padding: 8px 10px;
    }

    .pagination a,
    .pagination span {
        min-width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .tab-item {
        padding: 8px 12px;
        font-size: 12px;
    }

    .modal-content {
        padding: 16px;
        margin: 6px;
    }

    .empty-state {
        padding: 30px 12px;
    }

    .empty-state i {
        font-size: 32px;
    }
}

/* ========== Large screens (≥1600px) ==========
   大屏/超大屏：限制内容最大宽度并居中，提升可读性，避免表格过度拉伸 */
@media (min-width: 1600px) {
    .content {
        max-width: 1680px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* Fix for iOS safe areas */
@supports (padding: env(safe-area-inset-bottom)) {
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Smooth scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
    width: 4px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}

/* ========== Loading States ========== */

/* Skeleton Screen */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-table {
    pointer-events: none;
    opacity: 0.6;
}

.skeleton-table td, .skeleton-table th {
    position: relative;
}

.skeleton-table td:not(:first-child):before {
    content: '';
    display: block;
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    max-width: 120px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Loading Spinner */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(2px);
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-spinner.large {
    width: 60px;
    height: 60px;
    border-width: 5px;
}

.loading-spinner.small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 16px;
    color: #64748b;
    font-size: 14px;
    text-align: center;
}

/* Inline Loading */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading:after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* Progress Bar */
.progress-bar-container {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-bar.success {
    background: linear-gradient(90deg, #059669, #10b981);
}

.progress-bar.warning {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

.progress-bar.danger {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

/* Loading Row in Tables */
.loading-row td {
    text-align: center;
    padding: 40px 16px !important;
    color: #94a3b8;
}

.loading-row .loading-spinner {
    margin: 0 auto 12px;
}

/* Badge styles for operation logs */
.badge-success, .badge-warning, .badge-danger, .badge-default, .badge-info {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-success {
    background: #dcfce7;
    color: #059669;
}

.badge-warning {
    background: #fef3c7;
    color: #d97706;
}

.badge-danger {
    background: #fef2f2;
    color: #dc2626;
}

.badge-secondary {
    background: #f1f5f9;
    color: #64748b;
}

.badge-info {
    background: #dbeafe;
    color: #2563eb;
}

.badge-default {
    background: #f1f5f9;
    color: #64748b;
}

/* ===================================================================
   跨设备强化：触控热区、悬停降级、动效偏好、超大屏
   =================================================================== */

/* 触控设备（手机/微信/平板）：放大点击热区，符合 44px 级可点目标 */
@media (pointer: coarse) {
    .btn { min-height: 44px; }
    input.form-control, select.form-control { height: 44px; }
    .menu-item { min-height: 46px; }
    .sidebar-toggle { width: 44px; height: 44px; }
    .tab-item { min-height: 44px; }
    .pagination a, .pagination span { min-width: 40px; height: 40px; line-height: 40px; }
    table td .btn { min-height: 36px; padding: 6px 12px; }
    input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
}

/* 无悬停介质（触屏）：取消 hover 位移/阴影，改用 :active 反馈，避免“卡住”的悬停态 */
@media (hover: none) {
    .btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover {
        transform: none;
        box-shadow: none;
    }
    .btn-outline:hover {
        background: var(--bg-white);
        border-color: var(--border);
        color: var(--text-secondary);
        box-shadow: none;
    }
    .btn:active { transform: scale(0.97); }
    .menu-item:hover { padding-left: 46px; background: transparent; color: rgba(255,255,255,0.7); }
    .menu-item:active { background: rgba(255,255,255,0.08); color: #fff; padding-left: 49px; }
}

/* 尊重系统“减少动效”设置 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* 超大屏（2K/4K）：适度放宽内容宽度上限，保持居中与留白 */
@media (min-width: 1920px) {
    .content { max-width: 1760px; }
}

/* ============================================================
   操作端整体 UI 精修（增量覆盖，不破坏既有布局）
   目标：电脑端更精致、手机端更易用，统一卡片质感
   ============================================================ */
/* 内容留白与层次 */
.content { padding: 18px 16px 40px; }
.page-title { margin-bottom: 18px; }

/* 卡片统一质感：更柔和的圆角与阴影 */
.card {
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow-lg); }
.card-header {
    border-radius: 14px 14px 0 0;
    padding: 14px 18px;
    background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
}
.card-title { font-size: 15px; letter-spacing: .2px; color: var(--primary); }
.card-body { padding: 18px; }

/* 表格：行悬停 + 斑马纹，更疏朗的间距；容器内纵向滚动以冻结首行（表头） */
.table-container { border: 1px solid var(--border-light); border-radius: 10px; overflow: auto; max-height: calc(100vh - 320px); }
.table-container table thead th {
    position: sticky; top: 0; z-index: 6;
    background: #f5f7fb;
    box-shadow: 0 1px 0 var(--border);
}
.table-container table tbody tr:nth-child(even) { background: #fbfcfe; }
.table-container table tbody tr:hover { background: var(--primary-lighter); }
.table-container table th, .table-container table td {
    padding: 10px 14px; font-size: 13.5px;
}
/* 通用表格加强（非手机卡片模式）：长文本跨行完整显示；列总宽超出容器时由容器横向滚动查看后端列，不裁剪隐藏。
   容器（.table-container/.table-scroll）本身即可横向滚动，此规则确保长内容在单元格内换行而不把内容挤出框外。 */
.table-container th, .table-container td,
.table-scroll th, .table-scroll td { word-break: break-word; }

/* 按钮：统一圆角与轻量抬升 */
.btn { border-radius: 8px; letter-spacing: .3px; }
.btn:active { transform: translateY(0); }

/* 筛选栏：手机端自动换行对齐 */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 16px; }
.filter-bar form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; width: 100%; }
.filter-bar .form-group { margin-bottom: 0; }

/* 统计卡：数字更醒目 */
.stat-card { border-radius: 12px; }
.stat-info h3 { font-size: 12px; letter-spacing: .5px; color: var(--text-secondary); }
.stat-info p { font-size: 22px; font-weight: 700; color: var(--primary); }

/* 空状态与分页：居中、更友好 */
.empty-state { padding: 36px 16px; }
.pagination { margin-top: 14px; }
.pagination a, .pagination .current, .pagination .disabled {
    min-width: 34px; height: 34px; line-height: 32px; border-radius: 8px;
}

/* 详情区网格：手机单列、电脑多列 */
.detail-section { margin-top: 18px; }
.detail-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.detail-item { padding: 10px 14px; border: 1px solid var(--border-light); border-radius: 10px; background: #fbfcfe; }
.detail-item label { color: var(--text-muted); font-size: 11.5px; }
.detail-item p { font-size: 14px; margin-top: 3px; word-break: break-all; }

/* 徽章统一 */
.badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; letter-spacing: .3px; }

/* 长文本列强制多行换行、不挤压相邻列（高优先级，覆盖任何通用 nowrap） */
.table-container td[data-label="合同名称"],
.table-container td[data-label="关联合同"],
.table-container td[data-label="备注"],
.table-container td[data-label="描述"],
.table-container td[data-label="详情"],
.table-container td[data-label="说明"],
.table-container td[data-label*="地址"],
.table-container td[data-label*="交货要求"] {
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
    vertical-align: top;
}

/* ---------- 手机端精修（仅 ≤480px 窄屏手机；PAD/桌面一律电脑端可左右滑表格） ---------- */
@media (max-width: 480px) {
    .content { padding: 8px 8px 90px; }
    .card { border-radius: 12px; }
    .card-header { padding: 12px 14px; }
    .card-header { flex-wrap: wrap; gap: 8px; }
    .card-body { padding: 14px; }
    /* 手机端表格：文字略小、单元格更紧凑，依然可横向滚动 */
    .table-container { border-radius: 8px; }
    .table-container table th, .table-container table td { padding: 8px 10px; font-size: 12.5px; }
    /* 全系统手机端精简卡片：编号/名称/对方/操作独占整行，其余短字段多列并排 */
    .table-container{overflow-x:hidden !important;}
    .table-container tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 10px;margin:0 0 6px;padding:7px 10px;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:0 2px 8px rgba(15,40,76,.05);}
    .table-container tbody tr td{box-sizing:border-box;word-break:break-word;line-height:1.35;}
    .table-container tbody td[data-label]::before{content:attr(data-label);color:#94a3b8;font-size:11px;}
    .table-container tbody td[data-label="选择"]{grid-column:1/-1;display:block;text-align:left;padding:0 0 4px;}
    .table-container tbody td[data-label*="编号"], .table-container tbody td[data-label*="名称"], .table-container tbody td[data-label*="对方"], .table-container tbody td[data-label="操作"]{grid-column:1/-1;display:block;}
    .table-container tbody td[data-label="操作"] .actions{justify-content:flex-start;flex-wrap:wrap;}
    /* 筛选栏与统计卡改为紧凑单行/两栏 */
    .filter-bar { padding: 10px 12px; }
    .stat-info p { font-size: 19px; }
    .stat-card { min-height: 78px; }
    .detail-grid { grid-template-columns: 1fr 1fr; }
    .pagination { flex-wrap: wrap; }
    /* 触屏可用性：统一触控命中区，操作列允许换行避免挤压 */
    .btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-sm { min-height: 32px; }
    .actions { white-space: normal; }
    .actions .btn { margin: 2px 2px; }
    .card-header > div { flex-wrap: wrap; gap: 6px; }
    .table-container { -webkit-overflow-scrolling: touch; }
    a, button, input[type=submit] { -webkit-tap-highlight-color: rgba(0,0,0,0); }
}
@media (max-width: 480px) {
    .detail-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
    .detail-item { padding: 8px 10px; }
    /* 卡片头部操作按钮紧凑化，窄屏整行放下不换行 */
    .card-header .btn, .card-header > div > button { padding: 8px 12px; font-size: 12.5px; }
    .detail-item p { font-size: 13px; margin-top: 2px; }
    .detail-section h3 { font-size: 13px; }
    .stat-card { margin-bottom: 8px; }
    .btn-sm { padding: 4px 8px; font-size: 12px; }
    .table-container table th, .table-container table td { padding: 7px 8px; }
    .content { padding-bottom: 76px; }
}
/* 平板 / 横屏手机 / 小屏PAD（768–1199）：三档列布局，操作列自适应不越界 */
@media (min-width: 769px) and (max-width: 1199px) {
    .detail-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .filter-bar form { gap: 8px; }
    .stat-info p { font-size: 20px; }
    .table-container table th, .table-container table td { font-size: 13px; }
}
/* 大屏 PAD / 小电脑竖屏向内：控制最大宽度，避免表格过宽 */
@media (min-width: 1200px) {
    .content { padding-left: 20px; padding-right: 20px; }
}
/* ===== 通用表格移动端滚动加固 =====
   无需逐页改，JS 会把未包进滚动容器的宽表自动包进 .table-scroll */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
    .table-scroll table { min-width: max-content; }
}
/* 物流信息等卡片纵向高度修正：
   - 窄屏手机（竖屏卡片式）整页滚动，容器不再设内滚 max-height，避免内容只显示上半截；
   - 手机横屏/矮视口（横躺时视口高度很小，calc(100vh-320px) 会变成很小甚至负值）同理放开。 */
@media (max-width: 480px) {
    .table-container { max-height: none !important; }
}
@media (orientation: landscape) and (max-height: 560px) {
    .table-container { max-height: none !important; }
}

/* =====================================================================
   ██ ⭐ UI 精炼商务版 2.0 — 设计系统增量覆盖
   在既有 1.x 基础之上做整体质感升级，不破坏任何页面选择器。
   方向：精炼商务风 —— 柔和层级阴影、清晰字阶、克制的留白、
         一致圆角、精致微交互、明确的焦点与按压反馈。
   ===================================================================== */
:root {
    /* 主色：从深蓝微调为更显商务的靛蓝藏青 */
    --primary: #1d3a5f;
    --primary-light: #2e5e96;
    --primary-dark: #0c2035;
    --primary-lighter: #e9f0fb;
    --accent: #f2a20b;
    --brand-grad: linear-gradient(135deg, #14324f 0%, #1d3a5f 45%, #2e5e96 100%);

    /* 阴影：更柔和的“环境光”层级 */
    --shadow-sm: 0 1px 2px rgba(16, 34, 55, .06);
    --shadow: 0 1px 3px rgba(16, 34, 55, .07), 0 1px 2px rgba(16, 34, 55, .04);
    --shadow-md: 0 6px 16px rgba(16, 34, 55, .08), 0 2px 6px rgba(16, 34, 55, .05);
    --shadow-lg: 0 16px 40px rgba(16, 34, 55, .14), 0 4px 12px rgba(16, 34, 55, .06);
    --shadow-ring: 0 0 0 3px rgba(30, 90, 150, .16);

    /* 圆角：整体略放大，更亲和 */
    --radius: 10px;
    --radius-lg: 16px;
    --radius-sm: 8px;
    --radius-blob: 14px;
}

/* 背景：更轻盈的冷灰蓝渐变，替代纯平 */
body {
    background: linear-gradient(180deg, #f4f7fb 0%, #eef2f7 220px, #e9eef5 100%) fixed;
}

/* ---------- 布局与内容区 ---------- */
.main-content { background: transparent; }
.content { position: relative; }

/* 页面标题 */
.page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
    margin-left: 8px;
}

/* ---------- 卡片：精致商务质感 ---------- */
.card {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(2px);
    border: 1px solid #eef1f6;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: #e3e9f2;
}
.card-header {
    padding: 16px 22px;
    background: linear-gradient(180deg, #fbfcfe, #f5f8fc);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px solid #eef1f6;
}
.card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .2px;
}
.card-title i { color: var(--primary-light); }

/* ---------- 侧边栏：更细腻的品牌渐变 + 当前项发光 ---------- */
.sidebar {
    background: linear-gradient(180deg, #0b1d31 0%, #132b47 42%, #1a3a5c 100%);
    box-shadow: 2px 0 24px rgba(10, 25, 45, .18);
}
.sidebar-header {
    padding: 24px 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sidebar-header h1 {
    font-size: 19px;
    letter-spacing: .6px;
    background: linear-gradient(135deg, #ffffff 0%, #b7d3ef 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sidebar-header p {
    font-size: 11.5px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .55);
    margin-top: 4px;
}
.menu-section-title {
    color: rgba(255, 255, 255, .62);
    letter-spacing: 0.5px;
}
.menu-item {
    border-radius: 0 10px 10px 0;
    margin: 2px 10px 2px 0;
    font-size: 13.5px;
}
.menu-item i { opacity: .85; }
.menu-item.active {
    background: linear-gradient(90deg, rgba(45, 94, 150, .35), rgba(45, 94, 150, .06));
    border-left-color: var(--accent);
    box-shadow: inset 3px 0 0 0 var(--accent), inset 0 0 0 1px rgba(255, 255, 255, .02);
    color: #fff;
    font-weight: 600;
}
.menu-item:hover:not(.active) {
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .95);
}

/* ---------- 顶部栏 ---------- */
.header {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eef1f6;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 10px rgba(16, 34, 55, .04);
}
.header-left h2 { font-size: 19px; font-weight: 700; color: var(--primary-dark); }
.user-avatar {
    background: var(--brand-grad);
    box-shadow: 0 2px 6px rgba(20, 50, 79, .3);
    letter-spacing: .5px;
}

/* ---------- 按钮：统一圆角、按压反馈、轻量动效 ---------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    gap: 7px;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn-primary { box-shadow: 0 1px 2px rgba(20, 50, 79, .12), 0 4px 12px rgba(20, 50, 79, .18); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(20, 50, 79, .28); }
.btn-success, .btn-danger, .btn-warning { box-shadow: 0 1px 2px rgba(20, 50, 79, .08), 0 4px 12px rgba(20, 50, 79, .14); }
.btn-outline { background: #fff; border-width: 1.5px; }

/* ---------- 表单：更清晰的焦点态 ---------- */
.form-control {
    border-radius: 10px;
    border-color: #e2e8f0;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-ring);
}
.form-group label { font-weight: 600; letter-spacing: .2px; }
textarea.form-control, .form-control[readonly] { background: #f7fafc; }

/* ---------- 筛选栏：玻璃质感 ---------- */
.filter-bar {
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(246, 249, 253, .9));
    backdrop-filter: blur(4px);
    border: 1px solid #eef1f6;
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow);
    padding: 18px 20px;
}
.filter-bar .form-control { background: #fff; }

/* ---------- 表格：疏朗、呼吸感、聚焦行 ---------- */
.table-container {
    border: 1px solid #eef1f6;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}
.table-container table thead th {
    position: sticky;
    top: 0;
    z-index: 6;
    background: linear-gradient(180deg, #f7f9fc, #eef2f8);
    color: #47566b;
    font-weight: 700;
    letter-spacing: .5px;
    border-bottom: 1px solid #e2e8f0;
}
.table-container table tbody tr {
    transition: background .15s ease;
}
.table-container table tbody tr:nth-child(even) { background: #fbfcfe; }
.table-container table tbody tr:hover { background: var(--primary-lighter); }

/* 行接入详情链接时给出视觉提示 */
.table-container tr[data-href] td { cursor: pointer; }

/* ---------- 徽章：柔和色块 + 圆角胶囊 ---------- */
.badge {
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: .3px;
    padding: 4px 10px;
}
.badge-purchase, .badge-sales { border-radius: 8px; }

/* ---------- 统计卡：图标容器更立体、数字更醒目 ---------- */
.stat-card {
    border-radius: var(--radius-blob);
    background: linear-gradient(150deg, #ffffff 0%, #f7f9fd 100%);
    border: 1px solid #eef1f6;
    box-shadow: var(--shadow);
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.stat-info h3 { color: #5c6b82; font-weight: 700; letter-spacing: .3px; }
.stat-info p { color: var(--primary-dark); }
.stat-icon {
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(30, 90, 150, .12), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* ---------- 详情区 ---------- */
.detail-item {
    background: linear-gradient(160deg, #f8fafd, #f2f6fb);
    border: 1px solid #ecf0f6;
    border-radius: 12px;
}
.detail-item p { font-weight: 600; color: #24344d; }
.detail-section h3 {
    border-bottom: 1px solid #eef1f6;
    color: var(--primary);
    font-weight: 700;
}

/* ---------- 分页：主色胶囊当前页 ---------- */
.pagination a, .pagination span {
    border-radius: 10px;
    border-color: #e2e8f0;
    font-weight: 500;
}
.pagination a:hover, .pagination .current {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(20, 50, 79, .2);
}

/* ---------- 待办提醒卡片：少量彩色点缀，保持克制 ---------- */
.reminder-card { border-radius: 12px; border: 1px solid #eef1f6; box-shadow: var(--shadow-sm); }
.reminder-card h4 { font-weight: 700; }
.reminder-link { transition: background .15s ease, transform .12s ease; }
.reminder-link:hover { background: #f5f8fc; }

/* ---------- 空状态 ---------- */
.empty-state i { opacity: .25; }
.empty-state h3 { color: var(--primary-dark); }

/* ---------- 页面揭示动画（克制，仅一次） ---------- */
@keyframes pageReveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card, .stat-card, .alert { animation: pageReveal .4s ease both; }
.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .08s; }
@media (prefers-reduced-motion: reduce) { .card, .stat-card, .alert { animation: none !important; } }

/* ---------- Toast 全局轻提示 ---------- */
.toast-wrap {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(92vw, 460px);
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(20, 34, 55, .92);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(16, 34, 55, .25);
    animation: toastIn .3s cubic-bezier(.34, 1.56, .64, 1) both;
    pointer-events: auto;
}
.toast.out { animation: toastOut .28s ease both; }
.toast i { font-size: 15px; }
.toast-success { background: linear-gradient(135deg, #0ea878, #0c9369); }
.toast-error { background: linear-gradient(135deg, #e64545, #cf2f2f); }
.toast-warning { background: linear-gradient(135deg, #e8930c, #d57e0a); }
.toast-info { background: linear-gradient(135deg, #2e6bd6, #2456b5); }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-12px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* ---------- 悬浮快捷操作组（返回上一页 / 刷新 / 仪表盘 / 回到顶部） ---------- */
.fab-group {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.fab-group.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

.fab-group .fab-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px) scale(.94);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(.22,.9,.36,1.08);
}
.fab-group.expanded .fab-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.fab-group .back-top,
.fab-group .fab-btn,
.fab-group .fab-main {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-grad);
    box-shadow: 0 8px 18px rgba(20, 50, 79, .28);
    transition: box-shadow .2s ease, transform .15s ease, background .2s ease;
}
.fab-group .fab-btn { background: rgba(20, 34, 55, .92); backdrop-filter: blur(6px); }
.fab-group .fab-main { background: var(--brand-grad); }
.fab-group .back-top:hover,
.fab-group .fab-btn:hover,
.fab-group .fab-main:hover { box-shadow: 0 12px 26px rgba(20, 50, 79, .36); }
.fab-group .back-top:active,
.fab-group .fab-btn:active,
.fab-group .fab-main:active { transform: translateY(1px) scale(.95); }

/* 触屏下整组更靠右上，避开右下可能存在的冲突 */
@media (pointer: coarse) { .fab-group { bottom: 88px; } }

/* ---------- 移动端精修覆盖 ---------- */
@media (max-width: 767px) {
    .card { border-radius: 14px; }
    .card-header { padding: 14px 16px; border-radius: 14px 14px 0 0; }
    .page-title { font-size: 18px; }
    .fab-group { right: 14px; bottom: 96px; gap: 8px; }
    .fab-group .fab-menu { gap: 8px; }
    .fab-group .back-top,
    .fab-group .fab-btn,
    .fab-group .fab-main { width: 40px; height: 40px; font-size: 15px; border-radius: 11px; }
    /* 手机端表格卡片化后：保持可读、留有对齐 */
    .table-container table tbody tr { box-shadow: var(--shadow-sm); border: 1px solid #eef1f6; }
}

/* 尊重系统“减少动效” */
@media (prefers-reduced-motion: reduce) {
    .card, .stat-card, .alert { animation: none !important; }
}

/* =====================================================================
   仪表盘 · 欢迎横幅（精炼商务）
   ===================================================================== */
.hero-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    border-radius: 18px;
    padding: 20px 26px;
    background: var(--brand-grad);
    color: #fff;
    box-shadow: 0 18px 44px rgba(15, 32, 55, .32);
}
.hero-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .5px;
    flex-shrink: 0;
}
.hero-title i { opacity: .9; }
.hero-card::after {
    content: '';
    position: absolute;
    right: -60px; top: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 65%);
    pointer-events: none;
}
.hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 220px at 85% -40%, rgba(242, 162, 11, .22), transparent 60%),
        radial-gradient(480px 240px at 10% 130%, rgba(80, 150, 220, .28), transparent 60%);
    pointer-events: none;
}
.hero-links {
    position: relative;
    z-index: 2;
    display: flex; gap: 10px; flex-wrap: wrap;
}
.hero-year {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.9);
}
.hero-year select.form-control { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.hero-year select.form-control option { color: #24344d; background: #fff; }
/* 横幅内的 outline 按钮：适配深色背景 */
.hero-card .btn-outline {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}
.hero-card .btn-outline:hover {
    background: rgba(255,255,255,.24);
    border-color: rgba(255,255,255,.65);
    color: #fff;
}
/* 首次登录欢迎横幅（仅显示一次） */
.welcome-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 11px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(29, 58, 95, .06), rgba(46, 94, 150, .10));
    border: 1px solid #dbe7f5;
    border-left: 4px solid var(--primary-light);
    color: #33475f;
    font-size: 13.5px;
    box-shadow: var(--shadow-sm);
}
.welcome-banner > i { color: var(--primary-light); }
.welcome-banner span span { font-weight: 700; color: var(--primary); }
.welcome-close {
    margin-left: auto;
    border: none;
    background: rgba(29, 58, 95, .10);
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
}
.welcome-close:hover { background: rgba(29, 58, 95, .2); }
@media (max-width: 767px) {
    .hero-card { padding: 18px 16px; gap: 12px; }
    .hero-title { font-size: 18px; width: 100%; }
    .hero-links { width: 100%; }
    .hero-year { margin-left: 0; margin-top: 4px; }
    .welcome-banner { font-size: 13px; }
    .welcome-close { margin-left: 0; }
}

/* =====================================================================
   登录页精修（精炼商务）
   ===================================================================== */
.login-page {
    position: relative;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(46, 94, 150, .25), transparent 60%),
        radial-gradient(1000px 500px at 110% 110%, rgba(242, 162, 11, .12), transparent 55%),
        linear-gradient(135deg, #0b1d31 0%, #15324f 50%, #1e3d63 100%);
    padding: 24px;
    /* 动态视口高度：兼容独立手机浏览器(Chrome/Safari)的可缩放工具栏，
       避免 100vh 高出可视区导致的上下滑动。 */
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    min-height: 100vh;
    /* 固定：禁止任何方向滑动，保持页面整洁 */
    overflow: hidden;
    overscroll-behavior: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}
/* 呼吸光斑装饰 */
.login-page::before,
.login-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
.login-page::before {
    width: 380px; height: 380px;
    top: -120px; right: -80px;
    background: rgba(46, 94, 150, .35);
    animation: loginFloat 12s ease-in-out infinite;
}
.login-page::after {
    width: 320px; height: 320px;
    bottom: -100px; left: -60px;
    background: rgba(20, 90, 130, .3);
    animation: loginFloat 16s ease-in-out infinite reverse;
}
@keyframes loginFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-24px) scale(1.06); }
}
.login-box {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(2, 12, 25, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
    padding: 42px 40px 38px;
    position: relative;
    z-index: 2;
    max-width: 420px;
    width: 100%;
    box-sizing: border-box;
    /* 极矮屏时登录框内部滚动，页面本身保持固定不被顶乱 */
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
}
.login-logo {
    box-shadow: 0 10px 28px rgba(20, 50, 79, .24), inset 0 0 0 3px rgba(255, 255, 255, .7);
    padding: 2px;
    background: #fff;
}
.login-header-text h1 {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: .4px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.login-header-text h2 { color: #7a8799; letter-spacing: .2px; }
.login-box .form-group label { color: #40506a; }
.login-box .btn-primary {
    height: 48px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 12px;
}
@media (max-width: 480px) {
    .login-page { padding: 14px; }
    .login-box { padding: 28px 22px 26px; border-radius: 16px; max-width: 100%; }
    .login-logo { width: 78px; height: 78px; }
    .login-header-row { gap: 10px; margin-bottom: 22px; }
    .login-header-text h1 { font-size: 20px; }
    .login-header-text h2 { font-size: 13px; }
    .login-box .btn-primary { height: 46px; font-size: 15px; }
    /* 验证码行：避免固定宽度挤压输入框导致横向溢出 */
    .login-box .form-group .captcha-row { flex-wrap: nowrap; }
    .login-box .captcha-row img { width: 96px; height: 38px; }
}
@media (max-width: 380px) {
    .login-box { padding: 24px 18px 22px; }
    .login-logo { width: 68px; height: 68px; }
    .login-header-text h1 { font-size: 18px; }
    .login-header-text h2 { font-size: 12px; }
    .login-box .captcha-row img { width: 84px; height: 36px; }
    .login-input .form-control { padding-left: 38px; padding-right: 34px; }
}

/* =====================================================================
   移动端专项适配（合同列表 · 逾期预警明细 · 图表）
   ===================================================================== */

/* —— 仪表盘：图表区域手机端改为单列堆叠 —— */
@media (max-width: 860px) {
    .dashboard-charts-row { grid-template-columns: 1fr !important; }
}

/* —— 逾期预警明细：手机端避免横向溢出，右侧信息换行对齐 —— */
.overdue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid #dc2626;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.overdue-item-main { min-width: 0; overflow: hidden; flex: 1; }
.overdue-item-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overdue-item-right { flex-shrink: 0; text-align: right; font-size: 13px; }
@media (max-width: 540px) {
    .overdue-item { flex-wrap: wrap; }
    .overdue-item-title { white-space: normal; word-break: break-all; }
    .overdue-item-right {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: 10px;
        border-top: 1px dashed #f3e2e2;
        padding-top: 7px;
        margin-top: 3px;
    }
}

/* —— 手机端合同列表（自适应紧凑卡片）——
   卡片改为 2 列字段网格：一行容纳两个数据，大幅缩减单卡高度；
   合同编号作卡头整行显示，操作栏整行沉底；复选框浮动于卡头左上角。*/
@media (max-width: 767px) {
    .contract-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 7px 10px;
        padding: 13px 14px 14px;
    }
    .contract-table td[data-label="选择"] {
        display: block !important;
        position: absolute;
        top: 15px;
        left: 13px;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0;
    }
    .contract-table td[data-label="选择"]::before { display: none !important; }
    .contract-table td[data-label="选择"] input { width: 17px; height: 17px; cursor: pointer; }

    /* 除卡头/操作外，其余字段统一为半宽单元格：上行小标签、下行数值 */
    .contract-table td:not([data-label="选择"]):not([data-label="合同编号"]):not([data-label="操作"]) {
        display: block;
        width: calc(50% - 5px);
        padding: 2px 0;
        border: none !important;
    }
    .contract-table td::before {
        display: block;
        font-size: 10.5px;
        font-weight: 400;
        color: #93a2b6;
        letter-spacing: .2px;
        margin-bottom: 1px;
        min-width: 0;
    }

    /* 合同编号：整行卡头（百分比 + 编号 + 对方编号），编号允许完整换行 */
    .contract-table td[data-label="合同编号"] {
        display: block;
        width: 100%;
        padding: 0 2px 3px 28px;
        border: none !important;
        border-bottom: 1px dashed #eef1f6 !important;
        margin-bottom: 3px;
    }
    .contract-table td[data-label="合同编号"]::before { display: none; }
    .contract-table td[data-label="合同编号"] a {
        display: inline-block;
        max-width: 100%;
        font-size: 14px;
        word-break: break-all;
        line-height: 1.35;
    }
    .contract-table td[data-label="合同编号"] > div { margin: 1px 0; }
    .contract-ext-no { word-break: break-all; white-space: normal; }

    /* 数值/金额类字段取消右对齐，避免挤压 */
    .contract-table td.text-right.amount,
    .contract-table td.text-amount,
    .contract-table td.text-right { text-align: left; }

    /* 操作：整行沉底，分段分隔 */
    .contract-table td[data-label="操作"] {
        display: flex;
        width: 100%;
        gap: 8px;
        margin-top: 6px;
        padding-top: 9px;
        border: none !important;
        border-top: 1px dashed #eef1f6 !important;
    }
    .contract-table td[data-label="操作"]::before { display: none; }
    .contract-table td .logistics-line,
    .contract-table td .logistics-no-value { margin: 1px 0; }
    .contract-table .cell-sign-date,
    .contract-table [data-label="签订日期"] { font-size: 12.5px; }
}

/* =====================================================================
   ⭐ 精炼商务 2.1 — 卡片式操作 + 全终端自适应收敛
   兼容：手机 / 平板 / 电脑 / 安卓 / 鸿蒙 / iOS / 微信
   ===================================================================== */

/* —— 超宽屏可读宽度（内容居中，不占满整个视野） —— */
@media (min-width: 1600px) {
    .content { max-width: 1680px; margin: 0 auto; }
}

/* —— 输入控件 iOS/鸿蒙 原生圆角与阴影收敛，居中一致 ——
   select 保留原生下拉指示箭头，不重置 appearance */
.form-control,
input[type="date"].form-control,
textarea.form-control {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 10px;
}
select.form-control { border-radius: 10px; }
/* 日期控件在 iOS 上文字保持可读高度 */
input[type="date"].form-control { -webkit-appearance: none; }

/* —— 键盘可达性：焦点明确（无障碍） —— */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2.5px solid rgba(46, 94, 150, .45);
    outline-offset: 2px;
}

/* —— 卡片式操作：格子内动作按钮统一为方形图标胶囊 —— */
.card-header .btn-group { justify-content: flex-start; }
.card-header .btn-group .btn { white-space: nowrap; }
.table-container td.actions,
.table-container td[data-label="操作"] { white-space: nowrap; }
.table-container td.actions .btn {
    height: 32px; min-width: 32px;
    padding: 0 10px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
}
.table-container td.actions .btn i { font-size: 13px; }

/* —— 批量操作栏：选项给出卡片胶囊反馈 —— */
#batchBar .btn { flex-shrink: 0; }

/* —— 详情页分区：统一卡片聚集感 —— */
.detail-section .detail-grid { align-items: stretch; }
.detail-section .btn-group { flex-wrap: wrap; }

/* —— 筛选栏：平板/手机全自适 —— */
@media (max-width: 860px) {
    .filter-bar .form-group { min-width: 118px; }
    .filter-bar .form-control { height: 40px; }
}
@media (max-width: 560px) {
    .filter-bar { padding: 14px 12px; }
    .filter-bar .form-group { flex: 1 1 100%; min-width: 0; }
    .filter-bar .btn { flex: 1 1 47%; height: 42px; justify-content: center; }
    .filter-bar input[name="search"] { width: 100%; }
}

/* —— 手机端：页头操作按钮触控热区放大、与标题分区 —— */
@media (max-width: 767px) {
    .card-header .btn-group { width: 100%; margin-top: 2px; }
    .card-header .btn-group .btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 9px 12px;
        min-width: 0;
    }
    .card-header .btn-group .btn i { margin-right: 4px; }
    #batchBar > div { gap: 8px; }
    #batchBar .btn { flex: 1 1 auto; justify-content: center; padding: 9px 10px; }
    /* 弹层内联排版：内容不溢出 */
    .modal-content { width: 92%; }
    .confirm-modal { width: 91%; max-width: 430px; }
}

/* —— 键盘弹层：避免被浏览器底部栏遮挡（微信/移动端） —— */
@media (max-width: 767px) {
    #batchConfirmModal > div,
    #multiShareDurModal > div,
    #multiShareModal > div,
    .confirm-modal {
        max-height: 92vh;
        overflow-y: auto;
    }
}

/* —— 桌面端关键数值增强可读性 —— */
@media (min-width: 768px) {
    .table-container td.text-amount { font-weight: 600; color: var(--primary-dark); }
}

/* —— 微信内置浏览器 字号异常复位 —— */
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* =====================================================================
   ██ 布局优化 3.0 — 外壳对齐 + 全尺寸收束
   统一手机 / 平板 / 电脑 / 大屏的视觉与操作一致性。
   ===================================================================== */

/* —— 超宽屏：顶栏与内容区块在同一可读宽度内对齐 ——
   内容已限宽居中（1680px），此处让顶栏控件与其对齐，
   避免“顶栏拉满全宽、内容居中缩窄”的错位感。
   约 1920px 起内容区真正居中，故以 1921px 为分界，用 max() 保证恒非负。 */
@media (min-width: 1921px) {
    .header {
        padding-inline: max(24px, calc((100vw - 1920px) / 2 + 24px));
    }
}

/* —— 平板（768–1023）：顶栏间距收敛、内容留白适中 —— */
@media (min-width: 768px) and (max-width: 1023px) {
    .header { padding-inline: 18px; }
    .header-right { gap: 12px; }
    .content { padding: 18px; }
}

/* —— 手机：快捷操作改为横向滑动胶囊栏 ——
   全部常用入口置于一行，左右滑动即可选用，避免竖向排布占用过高。 */
@media (max-width: 767px) {
    .quick-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .quick-actions::-webkit-scrollbar { display: none; }
    .quick-actions .btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 16px;
    }
}

/* —— 手机：表格行纵向呼吸感增强，降低触控误点、提升可读性 —— */
@media (max-width: 767px) {
    .table-container table tbody td {
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

/* —— 手机：内容底部为拇指/返回顶留出安全空间 —— */
@media (max-width: 767px) {
    .content { padding-bottom: 64px; }
}

/* —— 动效降级：尊重系统“减少动态效果”设置，兼顾老设备流畅度 —— */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   ██ 合同列表 · 移动端紧凑化（销售/采购合同通用，作用域限定不串扰其他页）
   ===================================================================== */

/* —— 统计卡：手机端一行两列 ——
   销售：合同总数 / 销售合同总额 / 累计收款 / 销售待收款 → 2×2
   采购：合同总数 / 采购合同总额 / 累计付款 / 采购待付款 → 2×2
   隐藏图标，把横向空间留给金额，保证半宽下不溢出。 */
@media (max-width: 767px) {
    .contracts-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }
    .contracts-stats .stat-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 12px 14px;
        border-radius: var(--radius);
    }
    .contracts-stats .stat-icon { display: none; }
    .contracts-stats .stat-info p {
        font-size: 15px;
        line-height: 1.25;
        word-break: break-all;
        margin: 0;
    }
    .contracts-stats .stat-info small { font-size: 10.5px; }
}

/* —— 手机端：卡片头操作按钮（新增/导入/导出…）同一行 —— */
@media (max-width: 767px) {
    .card-header .btn-group {
        display: flex;
        flex-wrap: nowrap !important;   /* 覆盖基础 .btn-group 的 wrap!important */
        gap: 6px;
        width: 100%;
    }
    .card-header .btn-group .btn {
        flex: 1 1 0;
        min-width: 0;
        height: 42px;
        padding: 0 6px;
        font-size: 12.5px;
        overflow: visible;          /* 杜绝窄屏下文字被裁切 */
        justify-content: center;
        white-space: nowrap;
    }
    .card-header .btn-group .btn i { margin-right: 4px; font-size: 14px; }
}

/* —— 搜索/筛选：手机端弹性排布，控件加大、标签完整可见 ——
   第1行：搜索框（整行）；其后状态×3、日期×3 每行放 3 个；
   筛选/清除按钮自然跟在后方，行数随内容自适应，控件永不挤压。 */
@media (max-width: 767px) {
    /* 隐藏字段不占空间（防布局错位） */
    .filter-bar form input[type="hidden"] { display: none; }
    .filter-bar form {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        align-items: center;
    }
    .filter-bar .form-group {
        flex: 1 1 31%;
        min-width: 86px;                 /* 保证至少能容纳 4 字标签 */
        margin: 0 !important;
    }
    /* 首字段（多为搜索框）独占一行（nth-of-type 在 div 中计数，hidden 已排除） */
    .filter-bar form > .form-group:nth-of-type(1) { flex: 1 1 100%; }
    .filter-bar .form-control {
        min-width: 0;
        height: auto;
        min-height: 48px;
        font-size: 15px;
        line-height: 1.3;
        padding: 10px 13px;
    }
    .filter-bar .btn {
        height: 48px;
        margin: 0;
        padding: 0 18px;
        font-size: 15px;
        justify-content: center;
        white-space: nowrap;
    }
}

/* —— 表格列表：卡片更紧凑、密而不拥挤 —— */
@media (max-width: 767px) {
    .contract-table tbody tr { gap: 6px 8px; padding: 11px 12px 12px; }
    .contract-table td:not([data-label="选择"]):not([data-label="合同编号"]):not([data-label="操作"]) { padding: 2px 0; }
    .contract-table td::before { font-size: 10px; letter-spacing: .2px; }
    .contract-table .badge { padding: 3px 8px; font-size: 11px; }
    .contract-table .cell-sign-date { font-size: 12px; }
}

/* —— 合同编号：默认一行，屏幕太窄才自动折为两行 —— */
@media (max-width: 767px) {
    .contract-table td[data-label="合同编号"] a {
        display: inline-block;
        max-width: 100%;
        word-break: normal;
        overflow-wrap: anywhere;
        line-height: 1.3;
    }
    .contract-table td[data-label="合同编号"] > div { white-space: nowrap; }
    .contract-ext-no { white-space: normal; word-break: break-all; }
}

/* =====================================================================
   仪表盘 · 竖屏（手机/PAD 任意宽度）卡片化 / 大屏化适配
   ===================================================================== */

/* —— 统计卡：竖屏卡片居中、等高等宽，图标与数据上下居中自适应 —— */
@media (orientation: portrait) and (max-width: 1023px) {
    .stats-grid { grid-auto-rows: 1fr; }
    .stats-grid .stat-card {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 4px;
        padding: 14px 10px;
        min-height: 0;
        border-radius: 14px;
    }
    .stats-grid .stat-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 10px;
        margin-bottom: 1px;
    }
    .stats-grid .stat-info { width: 100%; min-width: 0; text-align: center; }
    .stats-grid .stat-info h3 { font-size: 11.5px; margin: 0 0 2px; letter-spacing: .3px; }
    .stats-grid .stat-info p { font-size: 18px; line-height: 1.2; margin: 0 0 2px; overflow-wrap: anywhere; }
    .stats-grid .stat-info small { font-size: 10px; line-height: 1.3; white-space: normal; }
}
@media (orientation: portrait) and (max-width: 767px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1023px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* —— 快捷操作（新增合同/报价/询价/付款/收款/发票）：竖屏 2 列卡片化（6 个 = 3 行），横屏保持横滑胶囊 —— */
@media (orientation: portrait) and (max-width: 1023px) {
    .quick-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        overflow: visible;
        flex-wrap: wrap;
        padding-bottom: 0;
    }
    .quick-actions .btn {
        flex: 1 1 auto;
        white-space: normal;
        justify-content: center;
        align-items: center;
        padding: 12px 6px;
        min-height: 46px;
        margin: 0;
        border-radius: 12px;
        text-align: center;
    }
}

/* —— 待办提醒：竖屏两列卡片，链接上下堆叠更紧凑 —— */
@media (orientation: portrait) and (max-width: 767px) {
    .reminder-grid { grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 10px; }
    .reminder-card h4 { font-size: 11.5px; padding: 8px 10px; flex-wrap: wrap; row-gap: 0; }
    .reminder-card h4 i { font-size: 12px; }
    .reminder-link { flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 10px; }
    .reminder-link .reminder-main { width: 100%; font-size: 11px; line-height: 1.3; word-break: break-word; }
    .reminder-link .reminder-value { font-size: 11px; white-space: nowrap; }
}

/* —— 报告入口：竖屏 3 列紧凑卡 —— */
@media (orientation: portrait) and (max-width: 767px) {
    .report-links { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .report-links .card { padding: 12px 6px; border-radius: 12px; }
    .report-links .card i { font-size: 20px; }
    .report-links .card h4 { font-size: 13px; margin: 6px 0 2px; }
    .report-links .card small { font-size: 10.5px; }
}

/* —— 账龄面板：极窄竖屏仍单列、不横向溢出 —— */
@media (orientation: portrait) and (max-width: 480px) {
    .dashboard-charts-row { gap: 10px; }
}

/* =====================================================================
   ██ 全局统一列表方案（合同列表规范的通用化）
   让每个 .table-container 列表在手机竖屏出卡片、桌面/大屏容器内吸顶滚动，
   481–1279 横屏窄屏由 main.js 的 initUnifiedTable() 动态计算高度 + 横向滑动提示；
   "每页显示"下拉条由 JS 统一注入，跨所有 list 页一致。
   ===================================================================== */
/* 每页显示条数选择条 */
.per-page-bar{display:flex;align-items:center;gap:8px;padding:10px 2px 2px;font-size:13px;color:var(--text-secondary);flex-wrap:wrap;}
.per-page-bar .pp-txt{color:var(--text-secondary);}
.per-page-bar .per-page-select{border:1px solid #dbe3ee;border-radius:7px;padding:5px 8px;font-size:13px;color:#1e293b;background:#fff;cursor:pointer;}
.per-page-bar .pp-total{margin-left:auto;color:var(--text-secondary);}
.per-page-bar + .pagination{margin-top:8px;}
@media (max-width:767px){
  .per-page-bar{justify-content:center;padding:12px 2px 4px;}
  .per-page-bar .pp-total{margin-left:0;width:100%;text-align:center;}
}

/* 表头吸顶精确取整：容器相对定位，供提示条绝对定位 */
.table-container{position:relative;}
@media (max-width:480px){ .table-container{position:relative;} }

/* 横屏滑动提示条：仅当表格确实可横向滚动时由 JS 添加 .show */
.h-scroll-hint{display:none;position:absolute;right:10px;bottom:10px;z-index:6;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:rgba(30,58,95,.86);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.3px;pointer-events:none;box-shadow:0 3px 10px rgba(0,0,0,.18);}
.h-scroll-hint.show{display:inline-flex;animation:hscroll-pulse 2.2s ease-in-out infinite;}
.h-scroll-hint i{animation:hscroll-nudge 1.4s ease-in-out infinite;}
@keyframes hscroll-pulse{0%,100%{opacity:.85;}50%{opacity:1;}}
@keyframes hscroll-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}

/* 横屏窄屏（481–1279px）通用：恢复 table 语义、长文本列限宽折行、避免整表撑出视口。
   与合同列表一致；标签含"号/电话/金额/日期"等单行，长文本列允许多行。 */
@media (min-width:481px) and (max-width:1279px){
  .table-container > table:not(.contract-table){display:table !important;width:100% !important;border-collapse:separate;border-spacing:0;table-layout:auto;}
  .table-container > table:not(.contract-table) thead{display:table-header-group !important;}
  .table-container > table:not(.contract-table) tbody{display:table-row-group !important;}
  .table-container > table:not(.contract-table) tfoot{display:table-footer-group !important;}
  .table-container > table:not(.contract-table) tfoot tr{display:table-row !important;margin:0;padding:0;border-radius:0;box-shadow:none;border:none !important;}
  .table-container > table:not(.contract-table) tfoot td{display:table-cell !important;width:auto !important;border:none !important;vertical-align:middle !important;}
  .table-container > table:not(.contract-table) thead tr{display:table-row !important;}
  .table-container > table:not(.contract-table) thead th{
    display:table-cell !important;position:sticky !important;top:0 !important;z-index:5;
    background:#f5f7fb !important;box-shadow:0 1px 0 rgba(15,40,76,.15);white-space:nowrap !important;
  }
  .table-container > table:not(.contract-table) tbody tr{display:table-row !important;margin:0;padding:0;border-radius:0;box-shadow:none;border:none !important;}
  .table-container > table:not(.contract-table) tbody td{display:table-cell !important;width:auto !important;border:none !important;vertical-align:middle !important;}
  .table-container > table:not(.contract-table) td[data-label]::before,
  .table-container > table:not(.contract-table) th::before{content:none !important;}
  .table-container > table:not(.contract-table) th,
  .table-container > table:not(.contract-table) td{white-space:nowrap !important;overflow-wrap:normal !important;word-break:normal !important;}
  /* 长文本列限宽多行，避免断在半个字上 */
  .table-container > table:not(.contract-table) td[data-label*="名称"],
  .table-container > table:not(.contract-table) td[data-label*="公司"],
  .table-container > table:not(.contract-table) td[data-label*="订单"],
  .table-container > table:not(.contract-table) td[data-label*="地址"],
  .table-container > table:not(.contract-table) td[data-label*="备注"],
  .table-container > table:not(.contract-table) td[data-label*="描述"],
  .table-container > table:not(.contract-table) td[data-label*="详情"],
  .table-container > table:not(.contract-table) td[data-label*="说明"],
  .table-container > table:not(.contract-table) td[data-label*="关联合同"]{white-space:normal !important;word-break:break-word !important;overflow-wrap:anywhere !important;min-width:120px;max-width:200px;}
  .table-container > table:not(.contract-table) td[data-label="选择"]{width:40px;min-width:40px;max-width:40px;text-align:center;padding-left:6px;padding-right:6px;}
}
/* 桌面（≥1280px）：普通列表沿用通用容器内吸顶滚动（max-height 由 style.css 通用规则 calc 提供），
   表头 sticky 冻结由通用规则承担即可，无需在此覆盖，避免破坏冻结表头。 */

/* =====================================================================
   ██ 列表统一批量操作 + 操作列 2×2 网格（勾选 / 批量删除 / CSV / PDF）
   ===================================================================== */

/* 批量操作栏（由 main.js unifiedInit 注入） */
#batchBar.batch-bar {
    display: none;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #eef4ff;
    border-bottom: 1px solid var(--border);
}
#batchBar.batch-bar .batch-bar-count { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
#batchBar.batch-bar .batch-bar-count span { font-weight: 700; color: #2563eb; }
#batchBar.batch-bar .batch-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-end; }

/* 操作列 2×2 网格：查看 | 修改 / 功能1 | 功能2 */
table .actions.actions-grid {
    white-space: normal;
    text-align: left;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    min-width: 120px;
}
table .actions.actions-grid .btn {
    margin: 0 !important;
    justify-content: center;
    gap: 4px;
    height: 30px;
    padding: 4px 6px;
    font-size: 12px;
    white-space: nowrap;
    width: 100%;
}
table .actions.actions-grid .btn i { font-size: 12px; }
@media (max-width: 767px) {
    table .actions.actions-grid { min-width: 0; }
    table .actions.actions-grid .btn { height: 34px; font-size: 12.5px; }
}
/* ========== 顶栏显式刷新按钮（替代易误触的“下拉刷新”手势；默认仅触屏显示） ========== */
.page-refresh-btn {
    display: none;            /* 桌面（精确指针）默认隐藏 */
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    transition: background var(--transition);
}
.page-refresh-btn:active { background: var(--border); }
.page-refresh-btn.spinning i { animation: btnSpin .8s linear infinite; }
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (hover: none), (pointer: coarse) {
    .page-refresh-btn { display: inline-flex; }
}

/* 移动端输入框防聚焦缩放：iOS 对字号 <16px 的输入框聚焦会自动放大页面，窄屏统一 16px */
@media (max-width: 767px) {
    input, select, textarea, .form-control, .totp-input {
        font-size: 16px;
    }
}

/* ============================================================
   全站移动端兜底 + UI 强化（2026.09 全量核查）
   全局断点已完善，此处只补「内联漏网兜底 + 触控/视觉精修」，
   保证每一页（含后加模块）在手机上都单列、可点、不溢出。
   ============================================================ */

/* ① 内联多列 grid 兜底：页面里写 style="grid-template-columns:1fr 1fr( 1fr)"
   的表单/信息网格，窄屏一律单列；用 auto/固定宽度的步进器、按钮组不受影响 */
@media (max-width: 767px) {
    [style*="1fr 1fr"],
    [style*="1fr  1fr"],
    [style*="repeat(2, 1fr"],
    [style*="repeat(2,1fr"],
    [style*="repeat(3, 1fr"],
    [style*="repeat(3,1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* 数据管理卡片：窄屏收紧内边距，按钮够高、好点 */
    .data-mgr-card { padding: 14px !important; }
    .data-mgr-card .btn { min-height: 40px; }
}

/* ② 裸 table 兜底：未包 .table-container 的内联表格自动可横滚，防止撑破版面 */
@media (max-width: 767px) {
    .card-body > table,
    .card > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ③ 模态/弹层：窄屏全宽、内部可滚动、底部按钮够大（不强制改变现有对齐位置） */
@media (max-width: 767px) {
    .modal { padding: 12px !important; }
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-footer { flex-wrap: wrap; gap: 8px; }
    .modal-footer .btn { flex: 1; min-width: 120px; min-height: 42px; }
}

/* ④ 触控目标：触屏可点元素不小于 40px，操作更顺手 */
@media (pointer: coarse) {
    .btn, button.btn, a.btn { min-height: 40px; }
    .pagination a, .pagination span, .pagination button { min-width: 40px; min-height: 40px; }
    input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
}

/* ⑤ 视觉精修（全尺寸，仅微调不改变结构）：圆角更柔和、卡片有轻微浮起反馈 */
.card { border-radius: var(--radius-lg); }
.data-mgr-card { transition: box-shadow .18s ease; }
.data-mgr-card:hover { box-shadow: var(--shadow-md); }

/* ⑥ 超窄屏（≤480）：分页器允许换行居中，模态头尾收紧，杜绝横向溢出 */
@media (max-width: 480px) {
    .pagination { flex-wrap: wrap; justify-content: center; }
    .modal-header, .modal-footer { padding: 12px 14px; }
}

/* ===== 回到顶部“一键直显”：下滑后不必展开“+”，直接点 ↑ 回顶 ===== */
/* 菜单容器常显（覆盖原先“未展开即整体隐藏”），只把 返回/刷新/仪表盘 三项收进“+”，回顶部始终可见 */
.fab-group .fab-menu { opacity: 1; transform: none; pointer-events: auto; }
.fab-group:not(.expanded) .fab-menu .fab-btn { display: none; }
.fab-group.expanded .fab-menu .fab-btn { display: flex; opacity: 1; transform: none; pointer-events: auto; }
.fab-group .fab-menu .back-top { display: flex; opacity: 1; transform: none; pointer-events: auto; }


/* ===== 手机端（≤480px）明细表保持原生表格 + 横向滑动 =====
   详情页等明细表（收款/发票/物流/关联合同等）td 不带 data-label，卡片化后表头被隐藏、字段无标签；
   给容器加 .table-sticky 类：恢复语义化表格并允许横向滚动（表头吸顶、单元格单行），
   与列表页带 data-label 的卡片表格互不影响。 */
@media (max-width: 480px) {
    .table-container.table-sticky {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .table-container.table-sticky > table {
        display: table !important;
        width: 100% !important;
        min-width: max-content;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: auto;
    }
    .table-container.table-sticky > table thead {
        display: table-header-group !important;
    }
    .table-container.table-sticky > table tfoot {
        display: table-footer-group !important;
    }
    .table-container.table-sticky > table tbody {
        display: table-row-group !important;
    }
    .table-container.table-sticky > table thead tr,
    .table-container.table-sticky > table tfoot tr,
    .table-container.table-sticky > table tbody tr {
        display: table-row !important;
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        border: none !important;
        background: transparent;
    }
    .table-container.table-sticky > table thead th {
        display: table-cell !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 5;
        background: #f5f7fb !important;
        box-shadow: 0 1px 0 rgba(15,40,76,.15);
        white-space: nowrap !important;
        text-align: left;
    }
    .table-container.table-sticky > table tbody td,
    .table-container.table-sticky > table tfoot td {
        display: table-cell !important;
        width: auto !important;
        border: none !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
    .table-container.table-sticky > table tfoot tr {
        font-weight: 600;
        background: #f7fafc;
    }
    .table-container.table-sticky > table td::before,
    .table-container.table-sticky > table th::before {
        content: none !important;
    }
}


/* ===== 手机端（≤480）顶栏收窄：杜绝 header-right 溢出导致整页左右滑动 ===== */
@media (max-width: 480px) {
    .header-right { gap: 6px; }
    .header-right .gs-trigger { padding: 6px 8px; }
    .header-right .gs-trigger-txt,
    .header-right .gs-trigger-kbd { display: none !important; }
    .header-right .header-clock { display: none !important; }
    .header-right .user-info { gap: 6px; }
    .header-right .btn { padding: 5px 9px; font-size: 12px; }
}

/* ===== 侧边栏一级分组折叠（2026-09-21 手风琴版）=====
   一级：不可跳页的图标分组小标题（图标 + 折叠箭头），点击仅切换展开/收起
   二级：缩进 + 引导竖线，当前页只高亮二级菜单项 */
.sidebar .menu-section-title.menu-section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 20px;
    transition: color .15s ease;
}
.sidebar .menu-section-title.menu-section-toggle > i:first-child {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    opacity: .85;
}
.sidebar .menu-section-title.menu-section-toggle > span {
    flex: 1 1 auto;
    min-width: 0;
}
.sidebar .menu-section-title.menu-section-toggle .menu-caret {
    font-size: 12px;
    opacity: .55;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.sidebar .menu-section-title.menu-section-toggle:hover { color: rgba(255,255,255,0.65); }
.sidebar .menu-section.collapsed > .menu-section-title.menu-section-toggle .menu-caret { transform: rotate(-90deg); }
.sidebar .menu-section.collapsed > .menu-item { display: none; }

/* 二级菜单：缩进 + 引导竖线（含触屏 hover 降级覆盖，保持缩进不跳变） */
.sidebar .menu-section .menu-item {
    padding-left: 46px;
}
.sidebar .menu-section .menu-item::before {
    content: '';
    position: absolute;
    left: 26px;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 1px;
    background: rgba(255,255,255,0.10);
    transition: background .15s ease;
}
.sidebar .menu-section .menu-item:hover { padding-left: 49px; }
.sidebar .menu-section .menu-item.active::before { background: var(--accent); }

/* ============================================================
   桌面端左侧菜单整栏折叠（仅图标模式）
   - 仅对 ≥769px 生效；≤768px 维持原有抽屉式滑出逻辑
   - 折叠状态由 body.sidebar-collapsed 控制，JS 写 localStorage
   ============================================================ */
@media (min-width: 769px) {
    /* 桌面端也显示汉堡按钮，用于整栏折叠 */
    .sidebar-toggle { display: inline-flex; }

    .sidebar, .main-content {
        transition: width .22s ease, margin-left .22s ease;
    }

    body.sidebar-collapsed .sidebar { width: 72px; }
    body.sidebar-collapsed .main-content { margin-left: 72px; }

    /* 隐藏标题/分组文字 */
    body.sidebar-collapsed .sidebar-header { padding: 20px 0; text-align: center; }
    body.sidebar-collapsed .sidebar-header h1,
    body.sidebar-collapsed .sidebar-header p,
    body.sidebar-collapsed .menu-section-title { display: none; }

    /* 菜单项：只居中显示图标，隐藏裸文字节点 */
    body.sidebar-collapsed .menu-item {
        justify-content: center;
        padding: 11px 0;
        margin: 2px 8px;
        gap: 0;
        font-size: 0;
        border-left-width: 3px;
    }
    body.sidebar-collapsed .menu-item i {
        font-size: 16px;
        width: auto;
    }
    body.sidebar-collapsed .menu-item:hover { padding-left: 0; }
    /* 图标折叠态隐藏二级引导竖线 */
    body.sidebar-collapsed .menu-item::before { display: none; }

    /* 折叠态 hover 浮出菜单名提示 */
    body.sidebar-collapsed .menu-item::after {
        content: attr(data-label);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        background: #0b1d31;
        color: #fff;
        font-size: 12.5px;
        line-height: 1;
        padding: 8px 12px;
        border-radius: 8px;
        white-space: nowrap;
        box-shadow: 0 6px 18px rgba(0,0,0,.25);
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease;
        z-index: 2000;
    }
    body.sidebar-collapsed .menu-item:hover::after { opacity: 1; }
}


/* ============================================================
   手机/平板端：左侧抽屉菜单字体放大，整体可读
   （与桌面端 ≥1024px 折叠/展开互不影响）
   ============================================================ */
@media (max-width: 1023px) {
    /* 分组标题：概览 / 销售管理 / 采购管理 等 */
    .sidebar .menu-section-title {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 0.8px;
        padding: 18px 20px 8px;
    }
    /* 菜单项文字与图标（含二级缩进） */
    .sidebar .menu-item {
        font-size: 15.5px;
        padding: 13px 20px 13px 46px;
        min-height: 48px;
    }
    .sidebar .menu-item i {
        font-size: 17px;
        width: 22px;
    }
    /* 分组标题图标随文字放大 */
    .sidebar .menu-section-title.menu-section-toggle > i:first-child {
        font-size: 16px;
        width: 22px;
    }
    .sidebar .menu-section-title.menu-section-toggle .menu-caret { font-size: 14px; }
    /* 系统名副标题 */
    .sidebar-header h1 { font-size: 18px; }
    .sidebar-header p { font-size: 11px; }

    /* 页面主标题与正文在小屏上略放大，提升可读性 */
    .page-title { font-size: 19px; }
    .content { font-size: 14.5px; }
    .card { font-size: 14px; }
}

/* 询价列表/详情：移动端保持真表格 + 横向滑动（覆盖全局卡片化） */
@media (max-width: 767px) {
    .table-container.keep-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 4px; margin: 0 -4px; }
    .table-container.keep-scroll table { display: table; width: 100%; min-width: 780px; }
    .table-container.keep-scroll thead { display: table-header-group; }
    .table-container.keep-scroll tbody { display: table-row-group; }
    .table-container.keep-scroll tr { display: table-row; }
    .table-container.keep-scroll th,
    .table-container.keep-scroll td { display: table-cell; }
    .table-container.keep-scroll td::before { content: none; }
}

/* 询价表格：卡片式下左对齐 + 值完整不裁切（和报价/合同一致） */
@media (max-width: 767px) {
    .inq-card td {
        white-space: normal !important;
        word-break: break-word;
        overflow: visible;
        text-align: left !important;
        justify-content: flex-start;
    }
    .inq-card td::before { text-align: left; }
    .inq-card td[data-label="时间"],
    .inq-card td[data-label*="时间"],
    .inq-card td[data-label*="金额"],
    .inq-card td[data-label*="合计"] { text-align: left !important; }
}

/* ==========================================================================
   UI 统一升级层  v2026.09.30
   --------------------------------------------------------------------------
   目标：① 全站视觉统一（卡片/表格/按钮/表单/徽章/分页/工具栏同一套语言）
        ② 增强人机交互手感（焦点环、按下反馈、悬停反馈、骨架屏、空状态）
        ③ 无障碍与降级（键盘可达、减少动效、打印友好、移动端触控）
   原则：本段全部为「增量增强 + 温和覆盖」，不改动既有选择器的语义，
        仅追加新类或在既有样式上补 hover/focus/transition，确保不破坏任何页面。
   ========================================================================== */

/* ---------- 1. 设计令牌补充（后定义覆盖前值，安全） ---------- */
:root {
    --radius-xl: 16px;
    --ring: 0 0 0 3px rgba(30, 58, 95, 0.16);
    --ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.18);
    --shadow-hover: 0 8px 24px rgba(15, 40, 76, 0.10), 0 2px 6px rgba(15, 40, 76, 0.05);
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --surface-muted: #f8fafc;
    --hairline: rgba(148, 163, 184, 0.35);
}

/* ---------- 2. 无障碍：统一键盘焦点环（鼠标点击不显示，键盘可达才显示） ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}
.btn:focus-visible { box-shadow: var(--ring); }

/* ---------- 3. 滚动条统一（桌面端细窄样式，移动端保持系统默认） ---------- */
@media (hover: hover) and (min-width: 768px) {
    .table-container::-webkit-scrollbar,
    .sidebar::-webkit-scrollbar,
    .content ::-webkit-scrollbar { height: 9px; width: 9px; }
    .table-container::-webkit-scrollbar-thumb,
    .sidebar::-webkit-scrollbar-thumb,
    .content ::-webkit-scrollbar-thumb {
        background: #cbd5e0; border-radius: 6px; border: 2px solid transparent; background-clip: content-box;
    }
    .table-container::-webkit-scrollbar-thumb:hover,
    .content ::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
    .table-container::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- 4. 卡片：统一呼吸感与悬停反馈 ---------- */
.card { transition: box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); }
.card:hover { box-shadow: var(--shadow-hover); border-color: #dbe3ee; }
.card-header { gap: 14px; }
.card-title { letter-spacing: .2px; }
.card-body { padding-top: 4px; }

/* 卡片内嵌分区标题（详情页分块统一用） */
.card-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--text);
    margin: 22px 0 12px; padding-left: 10px;
    border-left: 3px solid var(--primary);
    line-height: 1.3;
}
.card-section-title:first-child { margin-top: 0; }
.card-section-title i { color: var(--primary); font-size: 13px; }

/* ---------- 5. 表格：统一观感 + 可选粘性表头 ---------- */
table th {
    position: relative;
    user-select: none;
}
table tbody tr { transition: background .18s var(--ease-out); }
table tbody tr:hover { background: rgba(30, 58, 95, 0.045); }
/* 悬停行左侧强调条：提升"我在看这一行"的指向感 */
table tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--primary-light); }

/* 粘性表头（按需给 .table-container 增加 .table-sticky 启用） */
.table-sticky { max-height: calc(100vh - 210px); overflow: auto; }
.table-sticky thead th {
    position: sticky; top: 0; z-index: 6;
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
    box-shadow: 0 1px 0 var(--border), 0 2px 6px rgba(15, 40, 76, .06);
}
@media (max-width: 767px) {
    .table-sticky { max-height: none; }
    .table-sticky thead th { position: static; }
}

/* 斑马纹（可选，长列表建议加 .table-zebra） */
.table-zebra tbody tr:nth-child(even) { background: #fcfdfe; }
.table-zebra tbody tr:nth-child(even):hover { background: rgba(30, 58, 95, 0.045); }

/* 表格内数字统一等宽，避免跳动 */
table td.num, table .c-num, table td[data-label*="金额"], table td[data-label*="合计"] {
    font-variant-numeric: tabular-nums;
}

/* ---------- 6. 按钮：按下反馈 + 统一禁用态 ---------- */
.btn { transition: all .18s var(--ease-out); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.btn:disabled, .btn.disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { box-shadow: 0 1px 2px rgba(30, 58, 95, .18); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(30, 58, 95, .22); }
.btn-sm { font-weight: 500; }

/* 按钮加载态：提交后防连点，明确"正在处理" */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
    border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
    border-radius: 50%; animation: btnSpin .6s linear infinite;
}
.btn.btn-outline.is-loading::after,
.btn.btn-secondary.is-loading::after {
    border-color: rgba(30,58,95,.25); border-top-color: var(--primary);
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ---------- 7. 表单：统一聚焦手感与占位符 ---------- */
.form-control::placeholder { color: #a9b6c8; }
.form-control:hover:not(:disabled):not([readonly]) { border-color: #cbd5e0; }
.form-control:disabled { background: var(--border-light); color: var(--text-muted); cursor: not-allowed; }
textarea.form-control { min-height: 88px; line-height: 1.6; }
select.form-control { cursor: pointer; }
.form-group label { color: #334155; }
.form-help { color: var(--text-muted); font-size: 12px; margin-top: 5px; }
/* 移动端输入框 ≥16px，防 iOS/鸿蒙聚焦缩放 */
@media (max-width: 767px) {
    .form-control, select.form-control, textarea.form-control { font-size: 16px; }
}

/* ---------- 8. 徽章 / 状态：统一成"色块 + 语义色" ---------- */
.badge { border: 1px solid transparent; font-weight: 600; letter-spacing: .3px; }
.badge-draft, .badge-pending { border-color: #fde68a; }
.badge-active, .badge-confirmed, .badge-quoted, .badge-accepted { border-color: #a7f3d0; }
.badge-completed, .badge-issued { border-color: #bfdbfe; }
.badge-cancelled, .badge-void, .badge-rejected { border-color: #fecaca; }

/* 带圆点的状态标签（详情页推荐） */
.status-dot-inline {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: #334155; white-space: nowrap;
}
.status-dot-inline::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted); flex: 0 0 auto;
}
.status-dot-inline.ok::before   { background: var(--success); }
.status-dot-inline.warn::before { background: var(--warning); }
.status-dot-inline.err::before  { background: var(--danger); }
.status-dot-inline.info::before { background: var(--info); }

/* ---------- 9. 分页：当前页更明确 ---------- */
.pagination a, .pagination span { font-weight: 500; }
.pagination .active,
.pagination span.current {
    background: var(--primary); color: #fff; border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(30, 58, 95, .2);
}
.pagination a:hover { transform: translateY(-1px); }

/* ---------- 10. 布局工具类：让各页面结构趋于一致 ---------- */
.page-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.page-toolbar .toolbar-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-toolbar .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 991px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* 键值信息列表（详情页统一用，替代各种手写 div） */
.kv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kv-item {
    background: var(--surface-muted); border: 1px solid var(--border-light);
    border-radius: 10px; padding: 10px 14px; min-width: 0;
}
.kv-item .k { font-size: 11.5px; color: var(--text-muted); display: block; margin-bottom: 3px; }
.kv-item .v { font-size: 14px; font-weight: 600; color: #24344d; word-break: break-word; }
.kv-item.wide { grid-column: 1 / -1; }

.divider { height: 1px; background: var(--border); margin: 18px 0; border: 0; }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- 11. 空状态 / 骨架屏 ---------- */
.empty-state { padding: 40px 18px; }
.empty-state i { opacity: .22; }
.empty-state h3 { font-size: 15px; }
.empty-state p { font-size: 13px; }
.empty-state .btn { margin-top: 12px; }

.skeleton {
    background: linear-gradient(90deg, #eef2f7 25%, #f7fafc 37%, #eef2f7 63%);
    background-size: 400% 100%;
    animation: skShine 1.3s ease infinite;
    border-radius: 6px; color: transparent !important;
}
@keyframes skShine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- 12. 提示条：统一圆角与图标 ---------- */
.alert { border-radius: 10px; border: 1px solid transparent; }
.alert-success { border-color: #a7f3d0; }
.alert-error   { border-color: #fecaca; }
.alert-warning { border-color: #fde68a; }
.alert-info    { border-color: #bfdbfe; }

/* ---------- 13. 动效降级：尊重系统"减少动效"设置 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 14. 打印：隐藏操作区，保证对账单/合同打印干净 ---------- */
@media print {
    .sidebar, .header-right, .fab-group, .page-toolbar .toolbar-right,
    .sidebar-overlay, .bd-bell, .toast-wrap, .pagination, .filter-bar,
    .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .card { box-shadow: none !important; border-color: #ddd !important; break-inside: avoid; }
    body { background: #fff !important; }
    table { font-size: 12px; }
    a[href]:after { content: ''; }
}

/* 展开按钮默认隐藏（仅移动端卡片模式显示，避免桌面端多出无用按钮） */
.td-more { display: none; }
.mchip-row { display: none; }

/* ==========================================================================
   移动端分层卡片列表  v2026.09.30
   --------------------------------------------------------------------------
   问题：原实现把每个 td 变成「标签 | 值」一整行，合同列表有 8–13 列时
        单卡高达 400–470px，一屏只能看 1.5 条，且主次信息没有视觉层级，扫读困难。

   方案：卡片内部改为「两列网格 + 信息分层」
        ① 复合主键列（合同编号等，无 data-label）与操作列 → 整行全宽
        ② 其余字段两列并排，标签小字在上、值在下，行高减半
        ③ 字段超过 9 列时，JS 自动把次要字段收起，卡底给「展开 N 项」
        ④ 操作按钮等分横排，触控区 ≥44px
   预期：单卡高度下降约 35%–40%，且金额/状态/日期等对齐成列，可纵向扫读。
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- 卡片骨架：两列网格（紧凑版：优先一屏多看几条） ---- */
    table tbody tr,
    .contract-table tbody tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
        row-gap: 0;
        padding: 10px 12px 8px !important;
        margin-bottom: 9px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-white);
        box-shadow: var(--shadow-sm);
        overflow: visible;
        line-height: 1.35;
        position: relative;   /* 供勾选框绝对定位 */
    }

    /* ---- 单元格：默认占一列，标签堆叠在值上方 ---- */
    table tbody td[data-label] {
        grid-column: span 1;
        display: block !important;
        padding: 2px 0 3px !important;
        min-height: 0 !important;
        border: none !important;
        text-align: left !important;
        font-size: 12.5px;
        line-height: 1.3;
        min-width: 0;
    }
    table tbody td[data-label]::before {
        display: block;
        content: attr(data-label);
        font-size: 10px;
        font-weight: 500;
        color: var(--text-muted);
        line-height: 1.25;
        margin-bottom: 1px;
        min-width: 0;
        flex: none;
        letter-spacing: .2px;
    }
    /* 值区统一左对齐、可换行，避免被右侧标签挤压 */
    table tbody td[data-label] > * {
        max-width: 100%;
        word-break: break-word;
    }

    /* ---- 长文本字段（名称/标题/地址/备注）整行显示，避免两列里挤成窄条 ---- */
    table tbody td[data-label="合同名称"],
    table tbody td[data-label="对方名称"],
    table tbody td[data-label="客户名称"],
    table tbody td[data-label="供应商名称"],
    table tbody td[data-label="客户"],
    table tbody td[data-label="供应商"],
    table tbody td[data-label="标题"],
    table tbody td[data-label="地址"],
    table tbody td[data-label="备注"],
    table tbody td[data-label="备注/说明"],
    table tbody td[data-label="问题描述"] {
        grid-column: 1 / -1;
    }

    /* ---- 复合主键列（如合同编号，无 data-label）：整行，作为卡片头部 ---- */
    table tbody td:not([data-label]) {
        grid-column: 1 / -1;
        display: block !important;
        padding: 1px 0 6px !important;
        padding-right: 26px !important;   /* 给右上角勾选框留出位置，避免文字被压 */
        border: none !important;
    }
    table tbody td:not([data-label])::before { content: none; }

    /* ---- 勾选框：绝对定位到卡片右上角，不再独占一整行（省下约 34px/卡） ---- */
    table tbody td[data-label="选择"] {
        position: absolute;
        top: 9px;
        right: 10px;
        left: auto;
        width: auto;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        grid-column: auto;
        min-height: 0 !important;
        z-index: 2;
    }
    table tbody td[data-label="选择"]::before { display: none; }
    table tbody td[data-label="选择"] input[type="checkbox"] {
        width: 20px; height: 20px; margin: 0; cursor: pointer;
    }

    /* ---- 金额数字：等宽 + 稍大，便于纵向比对 ---- */
    table tbody td[data-label*="金额"],
    table tbody td[data-label*="合计"],
    table tbody td[data-label*="已收"],
    table tbody td[data-label*="已付"] {
        font-variant-numeric: tabular-nums;
    }

    /* ---- 操作列：整行置底，按钮等分、触控区 ≥44px ---- */
    table tbody td.actions,
    table tbody td[data-label="操作"] {
        grid-column: 1 / -1;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        padding-top: 7px !important;
        margin-top: 5px;
        border-top: 1px solid var(--border-light) !important;
        text-align: left !important;
    }
    table tbody td.actions::before,
    table tbody td[data-label="操作"]::before { display: none; }
    /* 操作按钮等分撑满：触控区大、不用瞄，是移动端最要紧的手感 */
    table tbody td.actions .btn,
    table tbody td.actions a.btn,
    table tbody td.actions button.btn {
        height: 34px;
        min-height: 34px;
        padding: 0 10px;
        font-size: 12.5px;
        margin: 0 !important;
        flex: 1 1 0;
        justify-content: center;
    }
    /* 图标按钮（无文字）不参与等分 */
    table tbody td.actions .btn.icon-only { flex: 0 0 38px; padding: 0; }

    /* ---- 次要字段折叠（JS 打上 .td-extra）---- */
    table tbody td.td-extra { display: none !important; }
    table tbody tr.expanded td.td-extra { display: block !important; }

    /* ---- 展开/收起按钮 ---- */
    table tbody .td-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        height: 34px;
        padding: 0 10px;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        border: 1px dashed var(--border);
        background: #f8fafc;
        color: var(--text-secondary);
        border-radius: 8px;
        font-size: 12.5px;
        cursor: pointer;
        white-space: nowrap;
    }
    table tbody .td-more:active { background: var(--border-light); }

    /* ---- 横向滑动的快捷筛选条（JS 生成）---- */
    .mchip-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 0 10px;
        margin: 0 -4px;
    }
    .mchip-row::-webkit-scrollbar { display: none; }
    .mchip {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 36px;
        padding: 0 14px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--text-secondary);
        font-size: 13px;
        text-decoration: none;
        white-space: nowrap;
        transition: all .18s ease;
    }
    .mchip:active { transform: translateY(1px); }
    .mchip.on {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(30, 58, 95, .22);
    }
    .mchip .cnt {
        font-size: 11px;
        opacity: .8;
        font-variant-numeric: tabular-nums;
    }

    /* ---- 移动端整体紧凑化：手机屏幕小，减少无谓留白以提升信息密度 ---- */
    .content { padding: 12px 10px 24px; }
    .card { padding: 14px 12px; margin-bottom: 12px; border-radius: 12px; }
    .card-header { margin-bottom: 12px; padding-bottom: 10px; gap: 8px; }
    .card-title { font-size: 15.5px; }
    .page-toolbar { margin-bottom: 10px; gap: 8px; }

    /* 筛选栏：输入框与下拉并排占满，按钮整行，避免来回缩放 */
    .filter-bar { padding: 10px 12px; margin-bottom: 12px; }
    .filter-bar form { gap: 8px; }
    .filter-bar .form-group { margin-bottom: 0; min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); }
    .filter-bar .form-control,
    .filter-bar select.form-control { height: 38px; font-size: 15px; }
    .filter-bar .btn { height: 38px; }
    /* 搜索框整行 */
    .filter-bar .filter-search { flex: 1 1 100%; min-width: 100%; }

    /* 统计卡：两列并排，减少纵向滚动 */
    .stat-card { padding: 12px 14px; }
    .stat-card .stat-value, .stat-card h3 { font-size: 20px; }

    /* 表格总高压缩：长文本最多 2 行，避免单卡被撑高 */
    table tbody td[data-label] > div,
    table tbody td[data-label] > span { overflow: hidden; }
    table tbody td[data-label="合同名称"] { max-height: none; }

    /* 分页按钮加大触控区，横排不换行 */
    .pagination { gap: 5px; margin-top: 16px; padding-top: 12px; flex-wrap: wrap; }
    .pagination a, .pagination span { min-width: 34px; height: 34px; font-size: 13px; }
}

/* ============================================================
   合同详情页信息区组件（ct-*）
   2026-10-12 由 pages/contracts/detail.php 内联 <style> 上收至此，
   以便报价 / 询价 / 售后等详情页复用同一套紧凑布局。
   组成：摘要头 ct-hero、分组 ct-group、属性网格 ct-meta-grid、
        对方信息条 ct-party、金额区 ct-amount、双进度条 ct-progress、
        关联统计卡 ct-link-stats；以及 ≤640px 按钮图标化、
        ≤480px 双列精修两组移动端规则。
   注意：分享长图走 detail.php 内联的 ls-*（#longshotRoot），与此处无关。
   ============================================================ */

/* 摘要头：合同名称 + 状态徽章 + 身份行 */
.ct-hero{padding:2px 2px 14px;border-bottom:1px solid var(--border-light);}
.ct-hero-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.ct-hero-name{font-size:19px;font-weight:700;color:var(--text);line-height:1.4;word-break:break-all;}
.ct-free-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;background:#fff7ed;color:#c2410c;font-size:12px;font-weight:700;border:1px dashed #fdba74;white-space:nowrap;}
.ct-hero-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:9px;}
.ct-hero-meta{margin-top:9px;display:flex;gap:5px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-muted);line-height:1.6;}
.ct-hero-meta .ct-meta-kv{display:inline-flex;align-items:center;gap:5px;}
.ct-hero-meta b{color:var(--text);font-weight:600;}
.ct-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.2px;}
.ct-link{color:#2563eb;text-decoration:none;font-weight:600;}
.ct-link:hover{text-decoration:underline;}
.ct-meta-dim{color:#94a3b8;}

/* 分组小标题：替代原嵌套 detail-section 的 h3 + 2px 粗下边框 */
.ct-group{margin-top:16px;}
.ct-group-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#334155;margin-bottom:10px;line-height:1.4;}
.ct-group-title i{color:var(--primary);font-size:12px;}

/* 紧凑属性网格：无卡片底框，标签/值两行紧凑排布 */
.ct-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 20px;}
.ct-meta-cell{min-width:0;}
.ct-meta-cell label{display:block;font-size:11.5px;color:var(--text-muted);margin-bottom:3px;letter-spacing:.2px;}
.ct-meta-cell p{margin:0;font-size:13.5px;font-weight:500;color:var(--text);word-break:break-all;line-height:1.45;}
.ct-empty{color:#a0aec0;font-weight:400;}
.ct-pill{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:600;}
.ct-pill-gray{background:#eef1f5;color:#64748b;}

/* 对方信息条：名称 + 经办人 + 电话 一行流式排布 */
.ct-party{display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid var(--border-light);border-radius:10px;}
.ct-party-avatar{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2563eb,#1e40af);color:#fff;font-size:16px;box-shadow:0 3px 8px rgba(37,99,235,.22);}
.ct-party-body{min-width:0;flex:1;}
.ct-party-name{font-size:15.5px;font-weight:700;color:#1e3a5f;word-break:break-all;line-height:1.35;}
.ct-party-sub{margin-top:5px;display:flex;gap:5px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-muted);line-height:1.6;}
.ct-h-item{display:inline-flex;align-items:center;gap:5px;}
.ct-h-item>i{color:#94a3b8;font-size:11px;}
.ct-h-item b{color:#334155;font-weight:600;}
.ct-h-tel{display:inline-flex;align-items:center;gap:4px;color:#475569;font-variant-numeric:tabular-nums;}
.ct-h-tel i{font-size:10px;}

/* 冷归档提示（原为大边框块，改为统一风格提示条） */
.ct-cold-note{margin-top:14px;padding:12px 14px;border:1px solid #bfdbfe;border-radius:10px;background:linear-gradient(135deg,#eff6ff,#f5f9ff);}
.ct-cold-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#1d4ed8;margin-bottom:5px;}
.ct-cold-note p{margin:0;font-size:12.5px;color:#475569;line-height:1.65;}

/* 金额信息：主金额突出 + KPI 横排 + 双进度条 */
.ct-amount{padding:14px 16px;background:linear-gradient(135deg,#fbfdff,#f4f7fb);border:1px solid var(--border-light);border-radius:12px;}
.ct-amount-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.ct-amount-lab{display:block;font-size:11.5px;color:var(--text-muted);margin-bottom:2px;}
.ct-amount-main{font-size:30px;font-weight:800;color:#1a365d;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.6px;}
.ct-amount-sub{margin-top:4px;display:flex;gap:12px;flex-wrap:wrap;font-size:12px;}
.ct-amt-deduct{color:#dc2626;font-weight:600;}
.ct-amount-kpis{margin-top:14px;padding-top:12px;border-top:1px dashed #dbe3ee;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px 16px;}
.ct-amt-kpi{min-width:0;}
.ct-amt-kpi label{display:block;font-size:11.5px;color:var(--text-muted);margin-bottom:2px;}
.ct-amt-kpi-val{font-size:16px;font-weight:700;color:#24344d;font-variant-numeric:tabular-nums;word-break:break-all;line-height:1.3;}
.ct-amt-kpi-val.is-in{color:#dc2626;}
.ct-amt-kpi-val.is-out{color:#059669;}
.ct-amt-kpi-val.is-deduct{color:#dc2626;}
.ct-progress{margin-top:14px;padding-top:12px;border-top:1px dashed #dbe3ee;display:grid;gap:12px;}
.ct-prog-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px;}
.ct-prog-lab{font-size:12.5px;font-weight:600;color:#334155;}
.ct-prog-pct{font-size:14px;font-weight:800;color:#1e3a5f;font-variant-numeric:tabular-nums;}
.ct-prog-amt{margin-left:auto;font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.ct-free-note{margin-top:14px;padding:11px 13px;background:#fff7ed;border:1px dashed #fdba74;border-radius:9px;color:#9a3412;font-size:12.5px;line-height:1.75;}
.ct-remark{padding:12px 14px;background:#f8fafc;border:1px solid var(--border-light);border-radius:10px;font-size:13px;color:#334155;line-height:1.7;word-break:break-word;}

/* 金额模糊（非免密角色查看对端合同）：同步覆盖新增的 ct-* 口径 */
.amt-lock .ct-amt-val,.amt-lock .ct-amt-kpi-val,.amt-lock .ct-amt-sub{filter:blur(6px);-webkit-filter:blur(6px);user-select:none;}

/* 关联合同统计卡：横排等宽（原为 flex + 各卡 width:100% 竖排，手机上三张卡各占一行） */
.ct-link-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.ct-link-stats .stat-card{flex:1 1 180px;min-width:0;}
.ct-link-stats .stat-info h3{font-size:12px;}
.ct-link-stats .stat-info p{font-size:19px;}
.ct-diff-val{font-size:24px;font-weight:700;}

/* 操作按钮组：窄屏图标化（保留 title 提示，避免一排按钮占满整行） */
@media (max-width:640px){
    .ct-actions{flex-wrap:wrap;gap:8px;}
    .ct-actions .btn{padding:7px 10px;font-size:12px;}
    .ct-actions .btn:not(.keep-txt) .txt{display:none;}
}

/* 手机端（≤480px）精修 */
@media (max-width:480px){
    .ct-hero-name{font-size:17px;}
    .ct-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;}
    .ct-amount{padding:12px 13px;}
    .ct-amount-main{font-size:26px;}
    .ct-amount-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;}
    .ct-amt-kpi-val{font-size:15px;}
    .ct-prog-head{gap:6px;}
    .ct-prog-amt{margin-left:0;width:100%;}
    .ct-party{padding:11px 12px;gap:10px;}
    .ct-party-avatar{width:34px;height:34px;border-radius:9px;font-size:14px;}
    .ct-party-name{font-size:14.5px;}
    .ct-party-sub{font-size:12px;gap:4px 12px;}
    .ct-link-stats{gap:8px;}
    .ct-link-stats .stat-card{flex:1 1 0;min-width:88px;}
    .ct-link-stats .stat-info h3{font-size:10.5px;}
    .ct-link-stats .stat-info p{font-size:15px;}
    .ct-diff-val{font-size:18px;}
}