/* ===== 共享办公系统 — Apple 极简风格 ===== */
:root {
    --bg: #f5f5f7;
    --card: #ffffff;
    --sidebar-bg: rgba(245,245,247,0.72);
    --text: #1d1d1f;
    --text-secondary: #86868b;
    --text-tertiary: #aeaeb2;
    --accent: #0071e3;
    --accent-hover: #0077ed;
    --success: #34c759;
    --warning: #ff9f0a;
    --danger: #ff3b30;
    --border: rgba(0,0,0,0.06);
    --border-strong: rgba(0,0,0,0.10);
    --sidebar-w: 248px;
    --header-h: 52px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
    --transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}
a { color: var(--accent); text-decoration:none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }

/* ===== SVG 图标（内联） ===== */
.icon-svg { display:inline-block; width:20px; height:20px; vertical-align:-0.25em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.icon-svg.sm { width:16px; height:16px; }
.icon-svg.lg { width:24px; height:24px; }
.icon-svg.xl { width:32px; height:32px; }

/* ===== 登录页 ===== */
.login-page {
    display:flex; align-items:center; justify-content:center; min-height:100vh;
    background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 50%, #dcdce0 100%);
}
.login-card {
    background: rgba(255,255,255,0.84);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    width: 400px;
    max-width: 92vw;
    box-shadow: var(--shadow-lg);
}
.login-card .logo { text-align:center; margin-bottom:8px; color: var(--accent); }
.login-card h1 { text-align:center; font-size:22px; font-weight:600; letter-spacing:-0.02em; margin-bottom:4px; }
.login-card .subtitle { text-align:center; color:var(--text-secondary); margin-bottom:32px; font-size:14px; font-weight:400; }
.login-card .field { margin-bottom:14px; }
.login-card .field label { display:block; font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.04em; }
.login-card .field input {
    width:100%; padding:13px 14px; background:#f5f5f7; border:1px solid rgba(0,0,0,0.08);
    border-radius:var(--radius-sm); font-size:15px; outline:none; transition:all var(--transition);
}
.login-card .field input:focus { background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,0.12); }
.login-card button {
    width:100%; padding:13px; margin-top:8px;
    background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm);
    font-size:15px; font-weight:500; cursor:pointer; letter-spacing:-0.01em;
    transition:all var(--transition);
}
.login-card button:hover { background:var(--accent-hover); transform:translateY(-0.5px); box-shadow:0 4px 12px rgba(0,113,227,0.25); }
.login-card .error { color:var(--danger); text-align:center; margin-top:10px; font-size:13px; min-height:20px; }

/* ===== 主布局 ===== */
.app-layout { display:none; min-height:100vh; }
.app-layout.active { display:flex; }

/* 侧边栏 — 毛玻璃 */
.sidebar {
    width:var(--sidebar-w);
    background:rgba(29,29,31,0.94);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    color:rgba(255,255,255,0.92);
    position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:100;
    display:flex; flex-direction:column;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.sidebar-header { padding:24px 22px 20px; }
.sidebar-header .wordmark { font-size:17px; font-weight:600; letter-spacing:-0.02em; display:flex; align-items:center; gap:10px; }
.sidebar-header .wordmark-icon { color: var(--accent); }
.sidebar-header .role-tag {
    display:inline-block; padding:2px 10px; background:rgba(255,255,255,0.12);
    border-radius:100px; font-size:11px; font-weight:500; margin-top:6px; letter-spacing:0.02em;
}
.sidebar-divider { height:1px; background:rgba(255,255,255,0.08); margin:4px 16px; }
.sidebar-section { padding:16px 22px 4px; font-size:10px; font-weight:600; text-transform:uppercase; color:rgba(255,255,255,0.36); letter-spacing:0.08em; }
.sidebar-nav { flex:1; padding:6px 0; }
.sidebar-nav a {
    display:flex; align-items:center; gap:10px; padding:9px 22px; margin:1px 10px;
    color:rgba(255,255,255,0.68); font-size:13px; font-weight:450; border-radius:var(--radius-sm);
    transition:all var(--transition); letter-spacing:-0.01em;
}
.sidebar-nav a:hover { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.92); text-decoration:none; }
.sidebar-nav a.active { background:rgba(255,255,255,0.12); color:#fff; font-weight:500; }
.sidebar-footer { padding:16px 22px 20px; border-top:1px solid rgba(255,255,255,0.06); }
.sidebar-footer .user-name { font-size:13px; font-weight:500; margin-bottom:4px; }
.sidebar-footer .user-role { font-size:11px; color:rgba(255,255,255,0.44); margin-bottom:10px; }
.sidebar-footer button {
    width:100%; padding:7px 0; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.68);
    border:1px solid rgba(255,255,255,0.10); border-radius:var(--radius-sm);
    cursor:pointer; font-size:12px; font-weight:500; transition:all var(--transition);
}
.sidebar-footer button:hover { background:rgba(255,255,255,0.14); color:#fff; }

/* 主内容区 */
.main-content { flex:1; margin-left:var(--sidebar-w); min-height:100vh; }
.top-bar {
    background:rgba(245,245,247,0.72);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid var(--border);
    padding:0 28px; height:var(--header-h);
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:50;
}
.top-bar h3 { font-size:16px; font-weight:600; letter-spacing:-0.02em; }
.top-bar .user-pill {
    display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); font-weight:450;
}

.page-content { padding:28px; max-width:1400px; }
.page-section { display:none; animation: fadeIn 0.25s ease; }
.page-section.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }

/* ===== 卡片 ===== */
.card {
    background:var(--card); border-radius:var(--radius-lg);
    padding:24px; box-shadow:var(--shadow); margin-bottom:20px;
    border: 1px solid var(--border);
}
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.card-header h4 { font-size:15px; font-weight:600; letter-spacing:-0.02em; display:flex; align-items:center; gap:8px; }
.card-header h4 .icon-svg { color: var(--text-secondary); }

/* 统计卡片 */
.stats-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:24px; }
.stat-card {
    background:var(--card); border-radius:var(--radius-lg); padding:22px 24px;
    box-shadow:var(--shadow); border:1px solid var(--border);
    transition:all var(--transition);
}
.stat-card:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.stat-card .stat-label { font-size:12px; color:var(--text-secondary); font-weight:500; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.stat-card .stat-value { font-size:30px; font-weight:700; letter-spacing:-0.03em; color:var(--text); margin-bottom:2px; }
.stat-card .stat-sub { font-size:12px; color:var(--text-tertiary); }

/* ===== 表格 ===== */
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th {
    text-align:left; padding:8px 14px 10px;
    border-bottom:1px solid var(--border-strong);
    color:var(--text-secondary); font-weight:500; font-size:11px;
    text-transform:uppercase; letter-spacing:0.05em;
}
tbody td { padding:11px 14px; border-bottom:1px solid var(--border); color:var(--text); }
tbody tr { transition:background var(--transition); }
tbody tr:hover { background:rgba(0,0,0,0.012); }

/* ===== 按钮 ===== */
.btn {
    display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
    border-radius:100px; font-size:13px; font-weight:500; cursor:pointer;
    border:none; background:var(--bg); color:var(--text);
    letter-spacing:-0.01em; transition:all var(--transition);
}
.btn:hover { background:#e8e8ed; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); box-shadow:0 4px 12px rgba(0,113,227,0.25); }
.btn-success { background:var(--success); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-ghost { background:transparent; border:1px solid var(--border-strong); }
.btn-ghost:hover { background:rgba(0,0,0,0.03); }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-group { display:flex; gap:8px; }

/* ===== 标签 ===== */
.tag {
    display:inline-flex; align-items:center; gap:4px; padding:2px 10px;
    border-radius:100px; font-size:11px; font-weight:500; letter-spacing:0.01em;
}
.tag-neutral { background:rgba(0,0,0,0.04); color:var(--text-secondary); }
.tag-success { background:rgba(52,199,89,0.10); color:var(--success); }
.tag-warning { background:rgba(255,159,10,0.10); color:var(--warning); }
.tag-danger { background:rgba(255,59,48,0.10); color:var(--danger); }
.tag-accent { background:rgba(0,113,227,0.08); color:var(--accent); }

/* ===== 表单 ===== */
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:4px; font-size:12px; font-weight:500; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.04em; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:10px 14px; background:var(--bg); border:1px solid rgba(0,0,0,0.08);
    border-radius:var(--radius-sm); font-size:14px; outline:none; transition:all var(--transition);
    font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,0.10);
}
.form-group textarea { resize:vertical; min-height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ===== 模态窗 ===== */
.modal-backdrop {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.32);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    z-index:200; align-items:center; justify-content:center;
}
.modal-backdrop.active { display:flex; }
.modal {
    background:var(--card); border-radius:var(--radius-xl); padding:32px;
    width:580px; max-width:92vw; max-height:82vh; overflow-y:auto;
    box-shadow:var(--shadow-lg); border:1px solid var(--border);
    animation: modalIn 0.2s ease;
}
@keyframes modalIn { from{opacity:0;transform:scale(0.96) translateY(8px);} to{opacity:1;transform:scale(1) translateY(0);} }
.modal h3 { font-size:18px; font-weight:600; letter-spacing:-0.02em; margin-bottom:20px; }
.modal .modal-foot { display:flex; gap:8px; justify-content:flex-end; margin-top:24px; padding-top:16px; border-top:1px solid var(--border); }

/* ===== 搜索栏 ===== */
.search-row { display:flex; gap:10px; margin-bottom:18px; }
.search-row input { flex:1; padding:9px 14px; background:var(--bg); border:1px solid rgba(0,0,0,0.06); border-radius:100px; font-size:13px; outline:none; transition:all var(--transition); }
.search-row input:focus { background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,0.08); }
.search-row select { padding:9px 14px; background:var(--bg); border:1px solid rgba(0,0,0,0.06); border-radius:100px; font-size:13px; outline:none; }

/* ===== 上传区域 ===== */
.drop-zone {
    border:2px dashed rgba(0,0,0,0.12); border-radius:var(--radius-lg); padding:48px;
    text-align:center; cursor:pointer; transition:all var(--transition); background:rgba(0,0,0,0.01);
}
.drop-zone:hover { border-color:var(--accent); background:rgba(0,113,227,0.02); }
.drop-zone .drop-icon { color:var(--text-tertiary); margin-bottom:10px; }
.drop-zone .drop-text { font-size:14px; color:var(--text-secondary); }
.drop-zone .drop-hint { font-size:12px; color:var(--text-tertiary); margin-top:4px; }

/* ===== OCR结果 ===== */
.ocr-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; margin-top:16px; }
.ocr-card h5 { font-size:13px; font-weight:600; margin-bottom:12px; letter-spacing:-0.01em; }
.ocr-card .ocr-field { display:flex; padding:5px 0; font-size:13px; }
.ocr-card .ocr-field-key { width:72px; color:var(--text-secondary); font-weight:500; flex-shrink:0; }
.ocr-card .ocr-confidence { margin-top:10px; font-size:11px; color:var(--text-tertiary); display:flex; align-items:center; gap:4px; }

/* ===== 通知 ===== */
.toast {
    position:fixed; top:20px; right:20px; padding:12px 20px; border-radius:var(--radius);
    color:#fff; font-size:13px; font-weight:500; z-index:300;
    box-shadow:var(--shadow-lg); animation:slideIn 0.3s ease;
}
.toast-info { background:var(--accent); }
.toast-success { background:var(--success); }
.toast-error { background:var(--danger); }
@keyframes slideIn { from{transform:translateX(120%);opacity:0;} to{transform:translateX(0);opacity:1;} }

/* ===== 工具 ===== */
.loading-state { text-align:center; padding:48px 20px; color:var(--text-tertiary); font-size:14px; }
.empty-state { text-align:center; padding:56px 20px; color:var(--text-tertiary); }
.empty-state svg { margin-bottom:12px; }
.pill { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; background:var(--text-tertiary); }
.pill-active { background:var(--success); }
.pill-pending { background:var(--warning); }
.pill-danger { background:var(--danger); }

.amount-positive { color:var(--success); font-weight:600; }
.amount-negative { color:var(--danger); font-weight:600; }
.mono { font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }

/* ===== 响应式 ===== */
@media (max-width:768px) {
    .sidebar { width:64px; }
    .sidebar-header .wordmark span:not(.wordmark-icon), .sidebar-header .role-tag,
    .sidebar-nav a .nav-label, .sidebar-section, .sidebar-footer { display:none; }
    .sidebar-nav a { justify-content:center; padding:10px; }
    .main-content { margin-left:64px; }
    .form-row { grid-template-columns:1fr; }
    .stats-row { grid-template-columns:1fr 1fr; }
    .page-content { padding:16px; }
}


/* ===== 增量补丁（2026-08-08 功能样式，恢复时保留合并） ===== */

/* ===== 表格排序 ===== */
th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 20px !important; }
th.sortable:hover { color: var(--accent); }
th.sortable::after { content: '↕'; position: absolute; right: 4px; font-size: 10px; opacity: 0.3; }
th.sortable.asc::after { content: '↑'; opacity: 1; color: var(--accent); }
th.sortable.desc::after { content: '↓'; opacity: 1; color: var(--accent); }

/* ===== 行hover操作 ===== */
tr.data-row { transition: background 0.15s; }
tr.data-row:hover { background: rgba(0,113,227,0.04); }
tr.data-row .row-actions { opacity: 0; transition: opacity 0.15s; display: inline-flex; gap: 4px; margin-left: 8px; }
tr.data-row:hover .row-actions { opacity: 1; }

/* ===== 批量选择 ===== */
.batch-bar { display: none; padding: 8px 14px; background: var(--accent); color: #fff; border-radius: 8px; margin-bottom: 12px; align-items: center; gap: 12px; font-size: 13px; }
.batch-bar.active { display: flex; }
.batch-bar button { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 4px 12px; border-radius: 100px; cursor: pointer; font-size: 12px; }

/* ===== 仪表盘增强 ===== */
.dash-todo-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; transition: background 0.15s; }
.dash-todo-item:hover { background: rgba(0,113,227,0.03); }
.dash-todo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-todo-dot.warn { background: var(--warning); }
.dash-todo-dot.danger { background: var(--danger); }
.dash-todo-dot.info { background: var(--accent); }

/* ===== impeccable 补丁（2026-08-23）=====
   1. 暗色模式：JS toggleTheme 切换 body.dark，此前无任何 CSS 定义（功能空转）
   2. 补齐 JS 动态使用但未定义的类：theme-toggle / prd-* / del-* / follow-cb
   侧边栏为固定深色毛玻璃设计，亮暗模式均不变。 */

/* --- 暗色模式变量覆盖 --- */
body.dark {
    --bg: #000000;
    --card: #1c1c1e;
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --text-tertiary: #6e6e73;
    --accent: #0a84ff;
    --accent-hover: #409cff;
    --success: #30d158;
    --warning: #ffd60a;
    --danger: #ff453a;
    --border: rgba(255,255,255,0.10);
    --border-strong: rgba(255,255,255,0.16);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.55);
}
body.dark .card,
body.dark .modal {
    border: 1px solid var(--border);
}
body.dark input,
body.dark select,
body.dark textarea {
    color-scheme: dark;
}

/* --- 主题切换按钮 --- */
.theme-toggle {
    width: 100%; padding: 7px 0;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.68);
    border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-sm);
    cursor: pointer; font-size: 12px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background var(--transition);
}
.theme-toggle:hover { background: rgba(255,255,255,0.14); }

/* --- 表格明细单元格（产品/交货行） --- */
.prd-name, .del-name { font-weight: 500; color: var(--text); }
.prd-qty, .del-qty { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.prd-remark, .del-remark { color: var(--text-secondary); font-size: 12px; }

/* --- 跟进复选框 --- */
.follow-cb { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* --- 动效偏好降级 --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ============================================================
   AWWW-LEVEL APPLE MINIMALISM — 设计增强层 (2026-08-23)
   参考: Apple 官方设计系统 (popular-web-designs/apple.md)
   原则: 纯追加覆盖，不改原规则；暗色模式自动继承变量
   ============================================================ */

/* ---------- 1. 动效曲线体系（awww 标配 easeOutExpo） ---------- */
:root {
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);
    --duration-fast: 0.18s;
    --duration-med: 0.38s;
    --duration-slow: 0.7s;
}

/* ---------- 2. 登录页 —— 去渐变（Apple 禁区），签名阴影，入场动效 ---------- */
.login-page {
    background: #f5f5f7;  /* Apple: 纯色，禁渐变/纹理 */
}
body.dark .login-page { background: #000; }

.login-card {
    border: none;  /* Apple: 卡片不用 border，靠阴影与背景分层 */
    border-radius: 20px;
    padding: 52px 44px 44px;
    box-shadow: rgba(0,0,0,0.10) 0 12px 40px, rgba(0,0,0,0.04) 0 2px 8px;
    animation: loginSettle var(--duration-slow) var(--ease-out-expo) both;
}
body.dark .login-card {
    background: rgba(28,28,30,0.86);
    box-shadow: rgba(0,0,0,0.5) 0 12px 40px;
}
@keyframes loginSettle {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card h1 {
    font-size: 28px; font-weight: 600;
    letter-spacing: -0.022em; line-height: 1.14;  /* Apple Display 字阶 */
    margin: 10px 0 6px;
}
.login-card .subtitle { margin-bottom: 28px; letter-spacing: -0.01em; }
.login-card button {
    border-radius: 980px;  /* Apple 签名 pill */
    padding: 13px 20px;
    transition: transform var(--duration-fast) var(--ease-settle),
                background var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}
.login-card button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,113,227,0.30);
}
.login-card button:active { transform: scale(0.98); box-shadow: none; }

/* ---------- 3. 卡片 —— 去 border（浅色），柔和扩散阴影 ---------- */
.card, .stat-card {
    border: none;
    box-shadow: rgba(0,0,0,0.04) 0 1px 3px, rgba(0,0,0,0.02) 0 1px 2px;
    transition: box-shadow var(--duration-med) var(--ease-settle),
                transform var(--duration-med) var(--ease-settle);
}
body.dark .card, body.dark .stat-card { border: 1px solid var(--border); }  /* 暗色保留细边框分层 */
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: rgba(0,0,0,0.10) 3px 8px 30px;  /* Apple 签名扩散阴影 */
}
.stat-card .stat-value { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.028em; }
.stat-card .stat-label { letter-spacing: 0.06em; }

/* ---------- 4. 页面切换 —— 分层 stagger 入场 ---------- */
.page-section.active > * {
    animation: riseIn var(--duration-med) var(--ease-out-expo) both;
}
.page-section.active > *:nth-child(2) { animation-delay: 0.05s; }
.page-section.active > *:nth-child(3) { animation-delay: 0.10s; }
.page-section.active > *:nth-child(4) { animation-delay: 0.15s; }
@keyframes riseIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 统计卡片逐个浮起 */
.page-section.active .stat-card { animation: riseIn 0.45s var(--ease-out-expo) both; }
.page-section.active .stat-card:nth-child(2) { animation-delay: 0.06s; }
.page-section.active .stat-card:nth-child(3) { animation-delay: 0.12s; }
.page-section.active .stat-card:nth-child(4) { animation-delay: 0.18s; }

/* ---------- 5. 骨架屏 —— 替代"加载中..."文字 ---------- */
.loading-state {
    font-size: 0; padding: 28px 8px;  /* 藏文字，呈现 shimmer */
}
.loading-state::before,
.loading-state::after {
    content: ''; display: block; height: 14px; border-radius: 7px;
    background: linear-gradient(90deg,
        rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    margin: 10px 0; max-width: 560px;
}
.loading-state::after { max-width: 380px; animation-delay: 0.15s; }
body.dark .loading-state::before,
body.dark .loading-state::after {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
}
@keyframes shimmer {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

/* ---------- 6. 侧栏 —— 活跃项指示条 + 精修 ---------- */
.sidebar-nav a { position: relative; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; }
.sidebar-nav a.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 2px; background: var(--accent);
}
.sidebar-nav a { will-change: background; }
.sidebar-nav a:active { transform: scale(0.985); }
.nav-group-body a.active { position: relative; }
.nav-group-body a.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 16px; border-radius: 2px; background: var(--accent);
}

/* ---------- 7. 顶栏 —— 更通透的玻璃 ---------- */
.top-bar {
    background: rgba(245,245,247,0.62);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
}
body.dark .top-bar { background: rgba(0,0,0,0.55); }

/* ---------- 8. 表格 —— 更安静的层级 ---------- */
thead th { letter-spacing: 0.06em; font-weight: 600; color: var(--text-tertiary); }
tbody td { padding: 12px 14px; }
tbody tr:hover { background: rgba(0,113,227,0.028); }
body.dark tbody tr:hover { background: rgba(10,132,255,0.08); }
tr.data-row:hover { background: rgba(0,113,227,0.035); }

/* ---------- 9. 按钮 —— active 微反馈 ---------- */
.btn { transition: transform var(--duration-fast) var(--ease-settle), background var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.btn:active { transform: scale(0.97); }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(0,113,227,0.28); }

/* ---------- 10. 模态窗 —— 更柔和的入场 ---------- */
.modal { animation: modalIn 0.32s var(--ease-out-expo); }
.modal-backdrop { transition: background 0.2s ease; }
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.955) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- 11. 表单 —— focus 环统一 Apple 蓝 ---------- */
.login-card .field input:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.search-row input:focus {
    box-shadow: 0 0 0 3.5px rgba(0,113,227,0.14);
    border-color: var(--accent);
}
body.dark .login-card .field input,
body.dark .form-group input, body.dark .form-group select, body.dark .form-group textarea,
body.dark .search-row input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
body.dark .login-card .field input:focus,
body.dark .form-group input:focus, body.dark .form-group select:focus,
body.dark .form-group textarea:focus, body.dark .search-row input:focus { background: rgba(255,255,255,0.09); }

/* ---------- 12. 全局精修 ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(0,113,227,0.18); }
body.dark ::selection { background: rgba(10,132,255,0.32); }

/* 细滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); }
::-webkit-scrollbar-track { background: transparent; }
body.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* 上传区 hover 更精致 */
.drop-zone { transition: border-color var(--duration-med) ease, background var(--duration-med) ease, transform var(--duration-med) var(--ease-settle); }
.drop-zone:hover { transform: translateY(-1px); }

/* toast 动效曲线 */
.toast { animation: slideIn 0.38s var(--ease-out-expo); }

/* 暗色切换过渡 —— 全站色彩柔和渐变 */
body, .card, .stat-card, .top-bar, .login-card, .modal, input, select, textarea {
    transition-property: background-color, border-color, box-shadow, transform;
}
body { transition: background-color 0.3s ease, color 0.3s ease; }

/* ============================================================
   设计统一补丁（2026-08-24）
   登录页设计语言 → 主系统：Inter 字体 / 侧栏顶栏玻璃深化 / 光扫 / 字阶
   内容区保持浅色（数据录入舒适度），纯追加覆盖
   ============================================================ */

/* --- Inter variable 自托管接入 --- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2212, U+25CF;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* --- 侧栏：深化玻璃 + 顶部高光线 --- */
.sidebar {
    background: rgba(22,22,26,0.82);
    backdrop-filter: blur(44px) saturate(200%);
    -webkit-backdrop-filter: blur(44px) saturate(200%);
}
.sidebar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    pointer-events: none;
}
.sidebar-header .wordmark { letter-spacing: -0.024em; }

/* --- 顶栏：更通透的玻璃 + 玻璃厚度高光 --- */
.top-bar {
    background: rgba(245,245,247,0.55);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 4px 16px rgba(0,0,0,0.03);
}
body.dark .top-bar {
    background: rgba(10,10,12,0.50);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* --- 主按钮光扫（克制：仅 primary） --- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: ''; position: absolute; top: 0; left: -80%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.30), transparent);
    transform: skewX(-18deg); transition: left .5s ease; pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

/* --- 数字排版：全站表格/统计启用等宽数字 --- */
.stat-card .stat-value, .mono, tbody td { font-feature-settings: 'tnum' 1, 'cv11' 1; }