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

:root {
    --primary: #667eea;
    --primary-dark: #5a6fd6;
    --secondary: #764ba2;
    --success: #43e97b;
    --warning: #f093fb;
    --danger: #f5576c;
    --info: #4facfe;
    --text-primary: #1a1a2e;
    --text-regular: #4a5568;
    --text-secondary: #718096;
    --text-light: #a0aec0;
    --border: #e2e8f0;
    --bg: #f7fafc;
    --white: #ffffff;
    --sidebar-bg: #0f0c29;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 40px rgba(102,126,234,0.3);
}

html, body {
    width: 100%;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==================== 登录页面 - 哇塞级别 ==================== */
.login-page {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.login-bg-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(102,126,234,0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(118,75,162,0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(67,233,123,0.1) 0%, transparent 60%);
    animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

#particlesCanvas {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.login-card {
    width: 460px;
    padding: 48px 44px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 10;
    animation: cardEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

.login-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(102,126,234,0.1), transparent, rgba(118,75,162,0.1), transparent);
    animation: rotate 10s linear infinite;
    z-index: -1;
}

.login-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(102,126,234,0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}

.login-card:hover::after {
    opacity: 1;
}

.login-header,
.login-form,
.login-footer {
    position: relative;
    z-index: 1;
}

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

@keyframes cardEntrance {
    from { 
        opacity: 0; 
        transform: translateY(40px) scale(0.96); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.logo-wrapper {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 24px;
}

.logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, #667eea, #5a6fd6, #764ba2, #667eea);
    background-size: 300% 300%;
    animation: gradientRotate 4s ease infinite;
    opacity: 0.8;
}

@keyframes gradientRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.logo-core {
    position: absolute;
    inset: 4px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1a1a3e 0%, #302b63 50%, #24243e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(15, 12, 41, 0.5);
    overflow: hidden;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 18px;
}

.login-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.login-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.login-form .form-item {
    position: relative;
    margin-bottom: 20px;
}

.form-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s;
    z-index: 2;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    font-size: 15px;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.3s;
    outline: none;
}

.login-form input:focus {
    border-color: rgba(102, 126, 234, 0.6);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

.login-form input:focus ~ .form-icon,
.login-form input:focus + .form-icon {
    color: #667eea;
}

.login-form input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-options {
    margin-bottom: 24px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: #667eea;
    cursor: pointer;
}

.login-btn {
    width: 100%;
    height: 54px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
}

.btn-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.login-btn:hover .btn-glow {
    transform: translateX(100%);
}

.login-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.5);
}

.login-btn:active {
    transform: translateY(-1px);
}

.btn-arrow {
    transition: transform 0.3s;
}

.login-btn:hover .btn-arrow {
    transform: translateX(6px);
}

.login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.login-footer .hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
}

/* ==================== 主布局 ==================== */
.main-page {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.layout {
    display: flex;
    height: 100%;
}

/* 侧边栏 */
.sidebar {
    width: 240px;
    background: linear-gradient(180deg, #0f0c29 0%, #1a1a3e 50%, #302b63 100%);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(102,126,234,0.3), transparent);
}

.sidebar.collapsed {
    width: 72px;
}

.sidebar-logo {
    height: 68px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.logo-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.logo-text {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    background: linear-gradient(90deg, #fff, #a8b4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-menu {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
}

.sidebar-menu::-webkit-scrollbar {
    width: 8px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.22);
    border-radius: 4px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.38);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    margin-bottom: 6px;
    border-radius: 12px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.menu-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s;
}

.menu-label {
    white-space: nowrap;
    overflow: hidden;
}

.menu-item:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
}

.menu-item:hover .menu-icon {
    transform: scale(1.1);
}

.menu-item.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.85), rgba(118, 75, 162, 0.85));
    color: #fff;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.35);
}

.menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 3px 3px 0;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.sidebar-footer-text {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    text-align: center;
    white-space: nowrap;
}

.sidebar.collapsed .logo-text,
.sidebar.collapsed .menu-label,
.sidebar.collapsed .sidebar-footer-text {
    display: none;
}

.sidebar.collapsed .sidebar-logo {
    justify-content: center;
    padding: 0;
}

.sidebar.collapsed .menu-item {
    justify-content: center;
    padding: 13px;
}

/* 菜单分组与子菜单 */
.menu-group {
    position: relative;
}

.menu-group-header {
    justify-content: flex-start;
    gap: 14px;
}

.menu-group-header .menu-label {
    flex: 1;
}

.menu-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
    opacity: 0.5;
    margin-left: auto;
}

.menu-group.open .menu-arrow {
    transform: rotate(90deg);
}

.menu-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(0,0,0,0.08);
}

.menu-group.open .menu-submenu {
    max-height: 200px;
}

.submenu-item {
    padding-left: 56px !important;
    font-size: 13px;
}

.menu-badge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    margin-left: 6px;
    flex-shrink: 0;
    animation: menuBadgePulse 1.2s ease-in-out infinite;
}

@keyframes menuBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.6); }
}

/* 部门数据更新页面 */
.update-info {
    padding: 20px 0;
}

.update-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.update-config {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
    background: var(--bg);
    padding: 20px 24px;
    border-radius: 12px;
}

.config-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.config-item label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.config-item span {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 600;
}

.update-actions {
    display: flex;
    gap: 12px;
}

.btn-lg {
    padding: 12px 32px;
    font-size: 15px;
    border-radius: 10px;
}

.update-progress {
    margin-top: 20px;
    background: rgba(255,255,255,0.9);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.progress-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.status-badge {
    margin-left: auto;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--info-light);
    color: var(--info);
}

.update-log {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.7;
    max-height: 400px;
    overflow-y: auto;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.update-log::-webkit-scrollbar {
    width: 6px;
}

.update-log::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

.spin-icon {
    animation: spin 1s linear infinite;
}

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

/* 统计网格（部门数据更新页） */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-blue { background: rgba(102,126,234,0.1); color: var(--primary); }
.stat-icon-green { background: rgba(103,194,58,0.1); color: var(--success); }
.stat-icon-purple { background: rgba(118,75,162,0.1); color: var(--info); }
.stat-icon-orange { background: rgba(255,165,0,0.1); color: #ff8c00; }

.stat-info { flex: 1; }

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-value-sm { font-size: 18px; }

.stat-card-action {
    display: flex;
    align-items: stretch;
}

.stat-card-action .btn {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

/* 选项卡 */
.tabs-container {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}

.tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
}

.tab {
    padding: 14px 20px;
    border: none;
    background: none;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: color 0.2s;
}

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

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

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
}

.tab-content {
    display: none;
    padding: 24px;
}

.tab-content.active {
    display: block;
}

/* 配置表单 */
.config-form { max-width: 900px; }

.form-section { margin-bottom: 24px; }

.form-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.section-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 20px;
    line-height: 1.6;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.required { color: var(--danger); }

/* 表单输入框样式 - 仅应用于配置页面，不覆盖全局 input */
.config-form .form-group input,
.config-form .form-group select,
.config-form .form-group textarea {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.config-form .form-group input:focus,
.config-form .form-group select:focus,
.config-form .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}

.form-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.form-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* 历史记录 */
.history-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.history-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.history-list {
    min-height: 200px;
}

.history-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s;
}

.history-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.history-status {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
}

.history-status.success { background: rgba(103,194,58,0.1); color: var(--success); }
.history-status.error { background: rgba(255,107,107,0.1); color: var(--danger); }
.history-status.running { background: rgba(102,126,234,0.1); color: var(--primary); }

.history-info-text { flex: 1; }

.history-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.history-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 16px;
}

.history-meta span { display: flex; align-items: center; gap: 4px; }

.history-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.history-actions .btn {
    font-size: 12px;
    padding: 4px 12px;
}

/* 绩效奖金页面布局 */
.perf-page {
    flex-direction: column;
    gap: 20px;
}

.perf-page.page-content:not(.active) {
    display: none !important;
}

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

.perf-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.perf-header-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

/* 统计网格 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* 操作按钮区 */
.table-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.table-actions-left,
.table-actions-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.file-upload-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 22px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    color: var(--text-regular);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.file-upload-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(102, 126, 234, 0.04);
}

/* 筛选栏 */
.filter-bar {
    background: var(--white);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 16px;
}

.filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-input {
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    background: var(--white);
    color: var(--text-primary);
    transition: all 0.3s;
    outline: none;
}

.filter-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

.filter-input::placeholder {
    color: var(--text-light);
}

/* 绩效选项卡切换 */
.perf-tabs {
    display: flex;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-bottom: 20px;
}

.perf-tab {
    flex: 1;
    padding: 14px 20px;
    border: none;
    background: none;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    transition: all 0.2s;
    font-weight: 500;
}

.perf-tab:hover {
    color: var(--text-primary);
    background: rgba(102, 126, 234, 0.04);
}

.perf-tab.active {
    color: var(--primary);
    font-weight: 600;
    background: rgba(102, 126, 234, 0.06);
}

.perf-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 3px 3px 0 0;
}

/* 空状态提示 */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
    font-size: 14px;
}

/* 响应式适配 */
@media (max-width: 1400px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .table-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .table-actions-left,
    .table-actions-right {
        justify-content: center;
    }
    
    .filter-row {
        flex-direction: column;
    }
    
    .filter-row .filter-select,
    .filter-row .filter-input,
    .filter-row .btn {
        width: 100%;
    }
}

/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background: var(--bg);
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

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

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1;
}

.modal-close:hover { color: var(--text-primary); }

/* Change summary styles */
.summary-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.summary-stat {
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    background: var(--bg-secondary);
}

.summary-stat .count {
    font-size: 24px;
    font-weight: 700;
}

.summary-stat .label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.summary-stat.added .count { color: var(--success); }
.summary-stat.removed .count { color: var(--danger); }
.summary-stat.modified .count { color: var(--warning); }

.change-list {
    max-height: 300px;
    overflow-y: auto;
}

.change-group {
    margin-bottom: 16px;
}

.change-group h4 {
    font-size: 14px;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.change-item {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

.change-item .dept-id {
    font-weight: 600;
    color: var(--primary);
}

.change-item .changes {
    color: var(--text-secondary);
    margin-top: 4px;
    font-size: 12px;
}

/* 统计卡片（部门数据更新页） */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* 主内容区 */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--bg);
}

/* 顶部栏 */
.header {
    height: 64px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    z-index: 100;
    flex-shrink: 0;
}

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

.collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
}

.collapse-btn:hover {
    background: rgba(0,0,0,0.05);
}

.collapse-icon {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar.collapsed .collapse-icon {
    transform: rotate(180deg);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb .separator {
    color: var(--text-light);
    font-size: 12px;
}

.breadcrumb .current {
    color: var(--text-primary);
    font-weight: 600;
}

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

.header-search {
    position: relative;
    display: flex;
    align-items: center;
}

.header-search svg {
    position: absolute;
    left: 12px;
    pointer-events: none;
    transition: color 0.3s;
}

.header-search input {
    padding: 10px 14px 10px 38px;
    border: 1px solid transparent;
    border-radius: 24px;
    font-size: 13px;
    width: 180px;
    transition: all 0.35s;
    background: rgba(0,0,0,0.04);
    color: var(--text-primary);
}

.header-search input:focus {
    outline: none;
    border-color: rgba(102, 126, 234, 0.4);
    width: 240px;
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.header-search input:focus + svg,
.header-search:focus-within svg {
    color: var(--primary);
}

.header-search input::placeholder {
    color: var(--text-light);
}

.notification {
    position: relative;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    transition: all 0.25s;
    display: flex;
    align-items: center;
}

.notification:hover {
    background: rgba(0,0,0,0.05);
}

.notification .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(135deg, #f5576c, #ff6b8a);
    color: #fff;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(245, 87, 108, 0.4);
}

.user-dropdown {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 12px 6px 6px;
    border-radius: 24px;
    transition: background 0.25s;
}

.user-dropdown:hover {
    background: rgba(0,0,0,0.05);
}

.user-dropdown {
    position: relative;
}

.user-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    border: 1px solid #e5e7eb;
    min-width: 160px;
    z-index: 1000;
    padding: 6px 0;
    animation: userMenuFadeIn 0.15s ease;
}

.user-menu.show {
    display: block;
}

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

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s;
}

.user-menu-item:hover {
    background: #f3f4f6;
}

.user-menu-item-danger {
    color: #ef4444;
}

.user-menu-item-danger:hover {
    background: #fef2f2;
}

.user-menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.username {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

/* 内容区 */
.content {
    flex: 1;
    overflow-y: auto;
    background: var(--bg);
    padding: 0;
    display: flex;
    flex-direction: column;
}

.content::-webkit-scrollbar {
    width: 6px;
}

.content::-webkit-scrollbar-track {
    background: transparent;
}

.content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
}

.content::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
}

.page-content {
    display: none !important;
    padding: 28px;
    animation: pageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-content.active {
    display: block !important;
}

.perf-page.page-content.active {
    display: flex !important;
}

/* 周报看板 iframe 页: 去掉内边距, iframe 撑满可视区 */
#weeklyPage {
    padding: 0 !important;
    height: calc(100vh - 110px);
}
#weeklyPage iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #f5f6fa;
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== 仪表盘 ==================== */
.welcome-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #43e97b 100%);
    background-size: 200% 200%;
    animation: bannerGradient 6s ease infinite;
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

@keyframes bannerGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.welcome-banner::after {
    content: '';
    position: absolute;
    bottom: -60%;
    left: 10%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}

.welcome-text {
    position: relative;
    z-index: 1;
}

.welcome-text h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.welcome-text p {
    font-size: 14px;
    opacity: 0.85;
}

.welcome-illustration {
    position: relative;
    z-index: 1;
}

.floating-shapes {
    position: relative;
    width: 80px;
    height: 80px;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    animation: float 4s ease-in-out infinite;
}

.shape1 {
    width: 40px;
    height: 40px;
    top: 0;
    left: 0;
}

.shape2 {
    width: 30px;
    height: 30px;
    top: 30px;
    left: 35px;
    animation-delay: 1s;
}

.shape3 {
    width: 20px;
    height: 20px;
    top: 10px;
    left: 55px;
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(180deg); }
}

/* 统计卡片 */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.04);
    animation: cardSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.stat-bg-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    opacity: 0.5;
    transform: rotate(-15deg);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s;
}

.stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(-5deg);
}

.stat-content {
    position: relative;
    z-index: 1;
}

.stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-trend {
    position: absolute;
    top: 28px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.stat-trend.up {
    color: var(--success);
    background: rgba(67, 233, 123, 0.1);
}

.stat-trend.down {
    color: var(--danger);
    background: rgba(245, 87, 108, 0.1);
}

/* 卡片 */
.card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
    transition: box-shadow 0.3s;
}

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

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px 0;
}

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

.card-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg);
    padding: 5px 14px;
    border-radius: 20px;
    font-weight: 500;
}

.chart-wrapper {
    padding: 12px 20px;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
}

.chart-wrapper canvas {
    width: 100% !important;
    display: block;
}

.chart-wrapper-dept {
    padding: 12px 16px;
    overflow: visible;
}

.chart-wrapper-dept canvas {
    width: 100% !important;
    display: block;
}

.chart-wrapper-fixed {
    padding: 24px 28px;
    height: 320px;
    overflow: hidden;
}

.chart-wrapper-fixed canvas {
    width: 100% !important;
    height: 100% !important;
}

/* 图表行 */
.charts-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

.charts-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

/* 底部行 */
.bottom-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

/* 表格包装 */
.table-wrapper {
    padding: 0 28px 24px;
    overflow-x: auto;
    position: relative;
}
.table-wrapper.bpm-refreshing::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.6);
    z-index: 5;
    animation: bpmRefreshPulse 1s ease-in-out infinite;
}
@keyframes bpmRefreshPulse {
    0%, 100% { background: rgba(255,255,255,0.5); }
    50% { background: rgba(255,255,255,0.75); }
}

/* 数据表格 */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    text-align: left;
    font-size: 13px;
    white-space: nowrap;
}

.data-table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

.data-table tbody tr {
    border-bottom: 1px solid #f5f7fa;
    transition: all 0.2s;
}

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

.data-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.03), transparent);
}

.data-table td {
    color: var(--text-regular);
}

/* 用户单元格 */
.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.avatar-purple { background: linear-gradient(135deg, #667eea, #764ba2); }
.avatar-blue { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.avatar-green { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.avatar-orange { background: linear-gradient(135deg, #f093fb, #f5576c); }
.avatar-pink { background: linear-gradient(135deg, #fa709a, #fee140); }

/* 标签 */
.tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.tag-success {
    background: rgba(67, 233, 123, 0.1);
    color: #2d9f5c;
}

.tag-warning {
    background: rgba(240, 147, 251, 0.12);
    color: #c05abf;
}

.tag-danger {
    background: rgba(245, 87, 108, 0.1);
    color: #d94455;
}

.tag-info {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.tag-primary {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

/* 待办事项 */
.todo-card .card-header {
    padding: 24px 28px 0;
}

.todo-list {
    padding: 20px 28px 24px;
}

.todo-item {
    padding: 14px 0;
    border-bottom: 1px solid #f5f7fa;
}

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

.todo-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
}

.todo-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--primary);
}

.todo-text {
    flex: 1;
    color: var(--text-regular);
    font-weight: 500;
}

.todo-time {
    font-size: 12px;
    color: var(--text-light);
    white-space: nowrap;
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
    color: var(--text-light);
}

.badge-count {
    background: linear-gradient(135deg, #f5576c, #ff6b8a);
    color: #fff;
    font-size: 11px;
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(245, 87, 108, 0.3);
}

/* ==================== 工具栏 ==================== */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px 0;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-box {
    position: relative;
}

.search-box input {
    padding: 11px 14px 11px 40px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    width: 280px;
    transition: all 0.3s;
    background: var(--white);
    color: var(--text-primary);
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

.search-box input::placeholder {
    color: var(--text-light);
}

.search-box svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.filter-select {
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    background: var(--white);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
}

.filter-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

/* 按钮 */
.btn {
    padding: 11px 22px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.35);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.45);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline {
    background: var(--white);
    color: var(--text-regular);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(102, 126, 234, 0.04);
}

.btn-danger {
    background: #ef4444;
    color: white;
    border: 1px solid #ef4444;
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.btn-default {
    background: var(--white);
    color: var(--text-regular);
    border: 1px solid var(--border);
}

.btn-default:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-text {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-text:hover {
    background: rgba(102, 126, 234, 0.08);
}

.btn-sm {
    padding: 7px 12px;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--text-regular);
}

.btn-sm:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-sm.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-sm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-sm.btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: transparent;
}

.btn-sm.btn-primary:hover {
    color: #fff;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

.btn-sm.btn-outline {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-regular);
}

.btn-sm.btn-outline:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* 分页 */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px 24px;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.pagination-info strong {
    color: var(--text-primary);
    font-weight: 700;
}

.pagination-btns {
    display: flex;
    gap: 6px;
}

/* ==================== 标签页 ==================== */
.tabs {
    display: flex;
    background: var(--white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    border: 1px solid rgba(0,0,0,0.04);
    border-bottom: none;
}

.tab {
    padding: 18px 32px;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.3s;
}

.tab:hover {
    color: var(--primary);
    background: rgba(102, 126, 234, 0.04);
}

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

.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 3px 3px 0 0;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.35s ease;
}

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

.date-input {
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    width: 220px;
    transition: all 0.3s;
    color: var(--text-primary);
    background: var(--white);
}

.date-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

/* ==================== 弹窗 ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.show {
    display: flex;
    animation: fadeIn 0.25s ease;
}

.modal {
    width: 540px;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,0.15);
    animation: modalIn 0.35s cubic-bezier(0.16, 1, 0.3, 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;
    padding: 24px 28px;
    border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.close-btn:hover {
    background: rgba(0,0,0,0.05);
}

.modal-body {
    padding: 28px;
}

.form-group {
    margin-bottom: 22px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-regular);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.3s;
    font-family: inherit;
    background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
}

.form-group textarea {
    resize: vertical;
    min-height: 90px;
}

.radio-group {
    display: flex;
    gap: 28px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-regular);
    font-weight: 500;
}

.radio-label input[type="radio"] {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    padding: 20px 28px;
    border-top: 1px solid #f0f0f0;
    background: #fafbfc;
}

.modal-lg {
    width: 720px;
}

/* ==================== 部门管理 ==================== */
.dept-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    height: calc(100vh - 140px);
    align-items: start;
}

.dept-sidebar {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: calc(100vh - 140px);
    max-height: calc(100vh - 140px);
    position: sticky;
    top: 0;
}

.dept-sidebar-header {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(102,126,234,0.04), rgba(118,75,162,0.04));
    position: sticky;
    top: 0;
    z-index: 10;
}

.dept-tree {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.dept-tree::-webkit-scrollbar {
    width: 6px;
}

.dept-tree::-webkit-scrollbar-track {
    background: transparent;
}

.dept-tree::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

.dept-tree::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
}

.tree-node {
    margin: 0;
    padding: 0;
}

.tree-node-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: var(--text-regular);
    user-select: none;
}

.tree-node-item:hover {
    background: rgba(102, 126, 234, 0.06);
    color: var(--primary);
}

.tree-node-item.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.1));
    color: var(--primary);
    font-weight: 600;
}

.tree-toggle {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.tree-toggle.expanded {
    transform: rotate(90deg);
}

.tree-toggle.hidden {
    visibility: hidden;
}

.tree-icon {
    flex-shrink: 0;
    color: var(--primary);
}

.tree-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-count {
    font-size: 11px;
    color: var(--text-light);
    background: var(--bg);
    padding: 1px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.tree-children {
    padding-left: 20px;
    display: none;
}

.tree-children.expanded {
    display: block;
}

/* Department main panel */
.dept-main {
    height: calc(100vh - 140px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Department card */
.dept-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.dept-card .table-wrapper {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* Department info card (shown in table) */
.dept-info-card {
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05));
    border-bottom: 1px solid rgba(102,126,234,0.1);
}

.dept-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dept-info-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dept-info-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.dept-info-sub {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 2px;
}

.dept-info-actions {
    display: flex;
    gap: 10px;
}

.dept-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.dept-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dept-info-item .label {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dept-info-item .value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

/* Department list separator */
.dept-list-separator {
    text-align: center;
    padding: 10px !important;
    font-size: 12px;
    color: var(--text-light);
    background: var(--bg);
    border-top: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Department detail */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-label {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

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

.detail-value.empty {
    color: var(--text-light);
    font-style: italic;
}

.detail-divider {
    grid-column: 1 / -1;
    border-top: 1px solid #f0f0f0;
    margin: 8px 0;
}

.detail-section-title {
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(102,126,234,0.2);
    margin-bottom: 8px;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
}

.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text-light);
    font-size: 14px;
}

/* ==================== 算薪管理 v2 ==================== */

/* ---- 顶部头图 ---- */
.pay-hero {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #a78bfa 100%);
    padding: 28px 32px;
    border-radius: 16px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.pay-hero::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.pay-hero::after {
    content: '';
    position: absolute;
    bottom: -60px; right: 80px;
    width: 160px; height: 160px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}
.pay-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.pay-hero-text h1 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px 0;
}
.pay-hero-text p {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin: 0;
}
.pay-hero-actions {
    display: flex;
    gap: 10px;
}
.pay-btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: #fff;
    color: #5b21b6;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pay-btn-hero:hover { background: #f5f3ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.pay-btn-hero.outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.5);
}
.pay-btn-hero.outline:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* ---- 主体布局 ---- */
.pay-body {
    display: flex;
    gap: 20px;
    min-height: calc(100vh - 220px);
}

/* ---- 左侧边栏 ---- */
.pay-sidebar {
    width: 260px;
    min-width: 260px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 16px;
    overflow-y: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pay-sidebar-section { margin-bottom: 4px; }
.pay-sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding: 0 4px;
}
.pay-sidebar-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 16px 0;
}
.pay-icon-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: #f3f0ff;
    border: none;
    border-radius: 8px;
    color: #7c3aed;
    cursor: pointer;
    transition: all 0.2s;
}
.pay-icon-btn:hover { background: #ede9fe; }

/* 方案列表 */
.pay-scheme-list { display: flex; flex-direction: column; gap: 6px; }

.scheme-card {
    padding: 12px;
    background: #f9fafb;
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.scheme-card:hover { background: #f3f0ff; border-color: #ddd6fe; }
.scheme-card.active {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
}
.scheme-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.scheme-card-name { font-size: 14px; font-weight: 600; color: #111827; }
.scheme-card-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f3f4f6;
    color: #6b7280;
    font-weight: 500;
}
.scheme-card-status.active { background: #d1fae5; color: #059669; }
.scheme-card-group {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #ede9fe;
    color: #7c3aed;
    font-weight: 500;
}
.scheme-card-meta { font-size: 12px; color: #9ca3af; display: flex; align-items: center; gap: 8px; }
.scheme-card-time { font-size: 11px; color: #9ca3af; }
.scheme-card-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}
.scheme-card:hover .scheme-card-actions,
.scheme-card.active .scheme-card-actions { opacity: 1; }
.scheme-card-action-btn {
    font-size: 12px;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
}
.scheme-card-action-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.scheme-card-action-btn.danger:hover { border-color: #dc2626; color: #dc2626; }

/* 常量列表 */
.pay-constants-list { display: flex; flex-direction: column; gap: 2px; }
.constant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    transition: background 0.15s;
}
.constant-item.editable { cursor: pointer; }
.constant-item.editable:hover { background: #f3f0ff; }
.constant-name { color: #374151; font-weight: 500; }
.constant-value { color: #7c3aed; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- 右侧主区域 ---- */
.pay-main {
    flex: 1;
    min-width: 0;
}

/* 空状态 */
.pay-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    text-align: center;
}
.pay-empty-illust { margin-bottom: 20px; }
.pay-empty h3 { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 8px 0; }
.pay-empty p { font-size: 14px; color: #6b7280; margin: 0 0 24px 0; }
.pay-empty-btns { display: flex; gap: 12px; }

/* ---- 配置区 ---- */
.pay-config { display: flex; flex-direction: column; gap: 20px; }

.pay-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 16px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pay-config-title h2 { font-size: 20px; font-weight: 700; color: #111827; margin: 0; }
.pay-config-desc { font-size: 13px; color: #6b7280; margin-left: 12px; }
.pay-config-actions { display: flex; align-items: center; gap: 8px; }

/* 按钮体系 */
.pay-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(124,58,237,0.25);
}
.pay-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,58,237,0.35); }
.pay-btn-primary.sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.pay-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #fff;
    color: #7c3aed;
    border: 1.5px solid #c4b5fd;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pay-btn-outline:hover { background: #f5f3ff; border-color: #7c3aed; }
.pay-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: transparent;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.pay-btn-ghost:hover { background: #f9fafb; color: #374151; border-color: #d1d5db; }
.pay-btn-ghost svg { opacity: 0.6; }
.pay-btn-ghost:hover svg { opacity: 1; }

/* ---- 薪资项双栏 ---- */
.pay-items-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.pay-items-col {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pay-col-income { border-top: 3px solid #10b981; }
.pay-col-deduction { border-top: 3px solid #ef4444; }

.pay-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}
.pay-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}
.pay-col-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.pay-col-dot.green { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.pay-col-dot.red { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.pay-col-count {
    font-size: 12px;
    font-weight: 600;
    background: #f3f4f6;
    color: #6b7280;
    padding: 1px 8px;
    border-radius: 20px;
}
.pay-add-btn {
    font-size: 13px;
    font-weight: 600;
    color: #7c3aed;
    background: #f3f0ff;
    border: none;
    border-radius: 8px;
    padding: 5px 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.pay-add-btn:hover { background: #ede9fe; }
.pay-col-body {
    padding: 12px;
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
}
.pay-col-empty {
    text-align: center;
    padding: 30px 10px;
    color: #9ca3af;
    font-size: 13px;
}

/* ---- 薪资项卡片 ---- */
.payroll-item-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    margin-bottom: 6px;
    transition: all 0.2s;
}
.payroll-item-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 2px 8px rgba(124,58,237,0.08);
    background: #fcfbff;
}
.payroll-item-card.disabled {
    opacity: 0.45;
    background: #f9fafb;
}
.payroll-item-card.disabled .item-name {
    text-decoration: line-through;
    color: #9ca3af;
}

.item-category-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 2px; }
.item-formula { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-cond-tag {
    font-size: 11px;
    color: #7c3aed;
    background: #f5f3ff;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 3px;
    display: inline-block;
}
.item-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Toggle 开关 */
.item-toggle {
    position: relative;
    display: inline-block;
    width: 34px; height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.item-toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #d1d5db;
    border-radius: 18px;
    transition: 0.25s;
}
.toggle-slider:before {
    content: '';
    position: absolute;
    height: 14px; width: 14px;
    left: 2px; bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.item-toggle input:checked + .toggle-slider { background: #7c3aed; }
.item-toggle input:checked + .toggle-slider:before { transform: translateX(16px); }

/* 操作按钮 */
.item-action-btn {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.item-action-btn.edit:hover { background: #ede9fe; color: #7c3aed; }
.item-action-btn.delete:hover { background: #fee2e2; color: #dc2626; }

/* ---- 汇总栏 ---- */
.pay-summary {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pay-summary-card {
    flex: 1;
    padding: 20px 24px;
    text-align: center;
}
.pay-summary-card.income { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.pay-summary-card.deduction { background: linear-gradient(135deg, #fef2f2, #fee2e2); }
.pay-summary-card.net { background: linear-gradient(135deg, #f5f3ff, #ede9fe); }
.pay-summary-label { font-size: 12px; color: #6b7280; margin-bottom: 6px; font-weight: 500; }
.pay-summary-value {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pay-summary-card.income .pay-summary-value { color: #059669; }
.pay-summary-card.deduction .pay-summary-value { color: #dc2626; }
.pay-summary-card.net .pay-summary-value { color: #5b21b6; font-size: 28px; font-weight: 800; }
.pay-summary-op {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 300;
    color: #9ca3af;
    width: 40px;
    background: #fafafa;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
}

/* ---- 试算预览 ---- */
.pay-preview {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pay-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}
.pay-preview-title { font-size: 15px; font-weight: 700; color: #111827; }
.pay-preview-controls { display: flex; align-items: center; gap: 10px; }

.pay-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pay-search-icon {
    position: absolute;
    left: 10px;
    pointer-events: none;
}
.pay-search-wrap input {
    padding: 7px 12px 7px 32px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    width: 200px;
    outline: none;
    transition: border-color 0.2s;
}
.pay-search-wrap input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.08); }

.pay-emp-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}
.pay-emp-dropdown .emp-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
}
.pay-emp-dropdown .emp-item:hover { background: #f3f0ff; }

.pay-month-input {
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
}
.pay-month-input:focus { border-color: #7c3aed; }

.pay-preview-body { padding: 20px; }

/* 试算结果 */
.preview-slip {
    background: #fafafa;
    border-radius: 10px;
    padding: 20px;
}
.preview-slip h4 { font-size: 16px; font-weight: 700; color: #111827; margin: 0 0 16px 0; }
.preview-slip-table { width: 100%; border-collapse: collapse; }
.preview-slip-table th { text-align: left; font-size: 12px; color: #6b7280; font-weight: 500; padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
.preview-slip-table td { font-size: 13px; color: #374151; padding: 8px 12px; border-bottom: 1px solid #f3f4f6; }
.preview-slip-table .amount { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.preview-slip-table .amount.income { color: #059669; }
.preview-slip-table .amount.deduction { color: #dc2626; }
.preview-slip-table .total-row td { font-weight: 700; border-top: 2px solid #7c3aed; border-bottom: none; font-size: 14px; }

/* ---- 弹窗内样式 ---- */
.modal-flex { display: flex; gap: 16px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

.calc-config-area {
    background: #f9fafb;
    border-radius: 10px;
    padding: 16px;
    margin-top: 8px;
}
.calc-config-area .form-group { margin-bottom: 10px; }
.calc-config-area .form-group:last-child { margin-bottom: 0; }
.calc-config-area label { font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 4px; display: block; }
.calc-config-area input, .calc-config-area select.filter-select {
    font-size: 14px;
    padding: 8px 12px;
}

/* 条件编辑 */
.condition-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }

/* ==================== 公式构建器 ==================== */
.formula-builder {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    background: #fafbfc;
}

.formula-preview {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.formula-preview-placeholder {
    color: #9ca3af;
    font-size: 13px;
}

.formula-preview-text {
    font-size: 16px;
    font-weight: 600;
    color: #5b21b6;
    letter-spacing: 0.5px;
}

.formula-input-wrap {
    margin-bottom: 14px;
}

.formula-input {
    width: 100%;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 12px;
    color: #6b7280;
}

.formula-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    outline: none;
}

.formula-section {
    margin-bottom: 12px;
}

.formula-section:last-child {
    margin-bottom: 0;
}

.formula-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.formula-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.formula-var-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid #c4b5fd;
    border-radius: 16px;
    color: #7c3aed;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.formula-var-btn:hover {
    background: #ede9fe;
    border-color: #8b5cf6;
    transform: translateY(-1px);
}

.formula-var-btn:active {
    transform: translateY(0);
}

.formula-op-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #374151;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.formula-op-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.formula-num-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.formula-num-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.formula-template-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.formula-template-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.formula-template-btn:hover {
    background: #f5f3ff;
    border-color: #c4b5fd;
}

.formula-template-btn .ft-name {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.formula-template-btn .ft-desc {
    font-size: 12px;
    color: #9ca3af;
}

/* 模板弹窗 */
.template-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.template-card {
    padding: 16px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.template-card:hover { border-color: #c4b5fd; background: #f5f3ff; }
.template-card.selected { border-color: #7c3aed; background: #ede9fe; }
.template-card h5 { font-size: 14px; font-weight: 600; color: #111827; margin: 0 0 4px 0; }
.template-card p { font-size: 12px; color: #6b7280; margin: 0; }

/* 方案管理弹窗 */
.scheme-manage-list { max-height: 400px; overflow-y: auto; }
.scheme-manage-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.15s;
}
.scheme-manage-item:hover { background: #f9fafb; }

/* 批次历史 */
.batch-list { max-height: 400px; overflow-y: auto; }
.batch-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.batch-item:hover { background: #f3f0ff; border-color: #ddd6fe; }

/* 添加项弹窗 */
.item-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item-type-card {
    padding: 16px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.item-type-card:hover { border-color: #c4b5fd; background: #f5f3ff; transform: translateY(-1px); }
.item-type-card .type-icon { font-size: 28px; margin-bottom: 6px; }
.item-type-card .type-name { font-size: 14px; font-weight: 600; color: #111827; }
.item-type-card .type-desc { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* 加载动画 */
.loading-spinner {
    display: inline-block;
    width: 24px; height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 空项提示 */
.empty-items { text-align: center; padding: 20px; color: #9ca3af; font-size: 13px; }

/* ==================== 电子合同批量发起 ==================== */
.econtract-layout { display: flex; flex-direction: column; gap: 20px; }

/* 步骤指引 */
.econtract-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    gap: 0;
}
.econtract-step {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.4;
    transition: opacity 0.3s;
}
.econtract-step.active { opacity: 1; }
.step-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #d9e1f2;
    color: #667eea;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.econtract-step.active .step-num {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
}
.step-text { font-size: 14px; font-weight: 500; color: #606266; }
.econtract-step.active .step-text { color: #303133; font-weight: 600; }
.step-line {
    width: 80px; height: 2px;
    background: #d9e1f2;
    margin: 0 12px;
}

/* 操作卡片 */
.econtract-actions-row {
    display: flex;
    gap: 16px;
}
.econtract-action-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: #fff;
    border: 2px dashed #dcdfe6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.econtract-action-card:hover {
    border-color: #667eea;
    background: #f8f9ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}
.action-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.action-title { font-size: 15px; font-weight: 600; color: #303133; }
.action-desc { font-size: 12px; color: #909399; margin-top: 2px; }

/* 预览表格 */
.econtract-preview-table td,
.econtract-preview-table th {
    font-size: 12px;
    padding: 6px 8px;
}

/* 提交栏 */
.econtract-submit-bar {
    display: flex;
    align-items: center;
    padding-top: 16px;
    margin-top: 12px;
    border-top: 1px solid #ebeef5;
}

/* 进度条 */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1400px) {
    .dept-layout {
        grid-template-columns: 260px 1fr;
    }
}

@media (max-width: 1200px) {
    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        z-index: 999;
        height: 100%;
    }
    
    .sidebar.collapsed {
        width: 0;
    }
    
    .charts-row {
        grid-template-columns: 1fr;
    }
    
    .charts-row-split {
        grid-template-columns: 1fr;
    }
    
    .bottom-row {
        grid-template-columns: 1fr;
    }
    
    .stat-cards {
        grid-template-columns: 1fr;
    }
    
    .login-card {
        width: 92%;
        padding: 36px 28px;
        margin: 20px;
    }
    
    .page-content {
        padding: 20px;
    }
}

/* ==================== 人员数据更新页样式 ==================== */

#empUpdatePage {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.emp-hero {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25);
}

.emp-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.emp-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(67,233,123,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.emp-hero-left {
    position: relative;
    z-index: 2;
}

.emp-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255,255,255,0.95);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
}

.emp-hero-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.emp-hero-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    max-width: 400px;
}

.emp-hero-right {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.emp-sync-anim {
    position: relative;
    width: 100px;
    height: 100px;
}

.emp-sync-anim__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: empSyncSpin 12s linear infinite;
}

.emp-sync-anim__ring--inner {
    inset: 16px;
    border-color: rgba(255, 255, 255, 0.15);
    animation-duration: 8s;
    animation-direction: reverse;
}

@keyframes empSyncSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.emp-sync-anim__core {
    position: absolute;
    inset: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.2);
}

.emp-sync-anim__dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.emp-sync-anim__dot--1 {
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
    animation: empDotPulse 2.5s ease-in-out infinite;
}

.emp-sync-anim__dot--2 {
    bottom: 14px;
    left: 6px;
    background: rgba(67,233,123,0.9);
    box-shadow: 0 0 10px rgba(67,233,123,0.5);
    animation: empDotPulse 2.5s ease-in-out infinite 0.8s;
}

.emp-sync-anim__dot--3 {
    bottom: 14px;
    right: 6px;
    background: rgba(240,147,251,0.9);
    box-shadow: 0 0 10px rgba(240,147,251,0.5);
    animation: empDotPulse 2.5s ease-in-out infinite 1.6s;
}

@keyframes empDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.6); }
}

.emp-stat-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.emp-stat-bar.has-summary {
    grid-template-columns: repeat(4, 1fr);
}

.emp-stat-bar__item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.emp-stat-bar__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: rgba(102, 126, 234, 0.15);
}

.emp-stat-bar__icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emp-stat-bar__icon--purple {
    background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.08));
    color: #667eea;
}

.emp-stat-bar__icon--pink {
    background: linear-gradient(135deg, rgba(240,147,251,0.12), rgba(245,87,108,0.08));
    color: #d4688c;
}

.emp-stat-bar__icon--green {
    background: linear-gradient(135deg, rgba(67,233,123,0.12), rgba(56,249,215,0.08));
    color: #2ec46e;
}

.emp-stat-bar__icon--blue {
    background: linear-gradient(135deg, rgba(79,172,254,0.12), rgba(0,242,254,0.08));
    color: #3a9fea;
}

.emp-stat-bar__info {
    min-width: 0;
    flex: 1;
}

.emp-stat-bar__value {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-stat-bar__label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.emp-action-panel {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
}

.emp-action-panel__left,
.emp-action-panel__right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
}

.emp-action-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.emp-action-panel__icon-box {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.06));
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emp-action-panel__icon-box--green {
    background: linear-gradient(135deg, rgba(67,233,123,0.1), rgba(56,249,215,0.06));
    color: #2ec46e;
}

.emp-action-panel__text h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.emp-action-panel__text p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.emp-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 22px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: auto;
}

.emp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(102, 126, 234, 0.45);
}

.emp-btn-primary:active {
    transform: translateY(0);
}

.emp-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.emp-btn-primary svg {
    flex-shrink: 0;
}

.emp-btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}
.emp-btn-reset:hover {
    background: #fecaca;
    border-color: #f87171;
}

.emp-btn-log {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 6px;
}
.emp-btn-log:hover {
    background: #dbeafe;
    border-color: #60a5fa;
}

.emp-action-panel__divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--border), transparent);
    align-self: stretch;
    margin: 0 28px;
}

.emp-action-panel__right .emp-sched-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.emp-sched-prefix {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.emp-sched-input {
    width: 68px;
    padding: 9px 11px;
    border: 2px solid var(--border);
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg);
    transition: all 0.2s;
    outline: none;
}

.emp-sched-input:focus {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.emp-sched-select {
    padding: 9px 13px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg);
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}

.emp-sched-select:focus {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.emp-sched-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 14px;
    padding: 7px 12px;
    background: var(--bg);
    border-radius: 8px;
    width: fit-content;
}

.emp-sched-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a0aec0;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.emp-sched-status.active .emp-sched-status__dot {
    background: #43e97b;
    box-shadow: 0 0 8px rgba(67, 233, 123, 0.5);
    animation: empDotBlink 2s ease-in-out infinite;
}

@keyframes empDotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.emp-sched-status.active {
    color: #2ec46e;
    background: rgba(67, 233, 123, 0.08);
}

.emp-btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 20px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-regular);
    background: var(--white);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: auto;
}

.emp-btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(102, 126, 234, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.emp-btn-outline:active {
    transform: translateY(0);
}

.emp-btn-outline.btn-danger {
    border-color: #f5576c;
    color: #f5576c;
    background: rgba(245, 87, 108, 0.04);
}

.emp-btn-outline.btn-danger:hover {
    background: rgba(245, 87, 108, 0.08);
    border-color: #e84057;
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.1);
}

.emp-summary-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    animation: empSummaryFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.emp-history-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    margin-top: 16px;
}
.emp-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.emp-history-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.emp-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.emp-history-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}
.emp-history-item__left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.emp-history-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.emp-history-item__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.emp-history-item__meta {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.emp-history-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.emp-history-dot--ok { background: #22c55e; }
.emp-history-dot--err { background: #ef4444; }
.emp-history-status--ok { color: #16a34a; }
.emp-history-status--err { color: #dc2626; }

@keyframes empSummaryFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.emp-summary-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.emp-summary-card__header-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(67,233,123,0.12), rgba(56,249,215,0.08));
    color: #2ec46e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emp-summary-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.emp-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.emp-summary-item {
    text-align: center;
    padding: 18px 14px;
    border-radius: 13px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.emp-summary-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.emp-summary-item--purple {
    background: linear-gradient(135deg, rgba(102,126,234,0.06), rgba(118,75,162,0.04));
}
.emp-summary-item--purple:hover { border-color: rgba(102,126,234,0.15); }

.emp-summary-item--pink {
    background: linear-gradient(135deg, rgba(240,147,251,0.06), rgba(245,87,108,0.04));
}
.emp-summary-item--pink:hover { border-color: rgba(240,147,251,0.15); }

.emp-summary-item--green {
    background: linear-gradient(135deg, rgba(67,233,123,0.06), rgba(56,249,215,0.04));
}
.emp-summary-item--green:hover { border-color: rgba(67,233,123,0.15); }

.emp-summary-item--blue {
    background: linear-gradient(135deg, rgba(79,172,254,0.06), rgba(0,242,254,0.04));
}
.emp-summary-item--blue:hover { border-color: rgba(79,172,254,0.15); }

.emp-summary-item__value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.emp-summary-item--purple .emp-summary-item__value { color: #667eea; }
.emp-summary-item--pink .emp-summary-item__value { color: #d4688c; }
.emp-summary-item--green .emp-summary-item__value { color: #2ec46e; }
.emp-summary-item--blue .emp-summary-item__value { color: #3a9fea; }

.emp-summary-item__label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.emp-progress-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    animation: empSummaryFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.emp-progress-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.emp-progress-card__status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emp-progress-card__icon {
    font-size: 20px;
    line-height: 1;
}

.emp-progress-card__text {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.emp-progress-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.emp-progress-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(102, 126, 234, 0.08);
    color: #667eea;
    letter-spacing: 0.3px;
}

.emp-progress-badge.success {
    background: rgba(67, 233, 123, 0.1);
    color: #2ec46e;
}

.emp-progress-badge.error {
    background: rgba(245, 87, 108, 0.1);
    color: #f5576c;
}

.emp-progress-collapse {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.emp-progress-collapse:hover {
    background: var(--border);
    color: var(--text-primary);
}

.emp-progress-terminal {
    border-radius: 12px;
    overflow: hidden;
    background: #1e1e2e;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
}

.emp-terminal-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.emp-terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.emp-terminal-dot--red { background: #ff5f57; }
.emp-terminal-dot--yellow { background: #ffbd2e; }
.emp-terminal-dot--green { background: #28ca41; }

.emp-terminal-title {
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    margin-left: 8px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
}

.emp-terminal-body {
    padding: 16px 20px;
    color: #cdd6f4;
    font-size: 13px;
    line-height: 1.8;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.emp-terminal-body::-webkit-scrollbar {
    width: 6px;
}

.emp-terminal-body::-webkit-scrollbar-track {
    background: transparent;
}

.emp-terminal-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}

.emp-terminal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

@media (max-width: 1200px) {
    .emp-stat-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .emp-stat-bar.has-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    .emp-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #empUpdatePage {
        padding: 16px;
        gap: 16px;
    }
    .emp-stat-bar {
        grid-template-columns: 1fr;
    }
    .emp-action-panel {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    .emp-action-panel__left,
    .emp-action-panel__right {
        min-height: auto;
    }
    .emp-action-panel__divider {
        width: 100%;
        height: 1px;
        margin: 18px 0;
        background: linear-gradient(to right, transparent, var(--border), transparent);
    }
    .emp-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .emp-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }
    .emp-hero-desc {
        max-width: 100%;
    }
    .emp-hero-right {
        display: none;
    }
    .emp-main-card {
        padding: 14px;
    }
    .emp-sidebar-header {
        padding: 20px 16px 14px;
    }
    .emp-sidebar-avatar {
        width: 48px;
        height: 48px;
        font-size: 18px;
        border-radius: 12px;
    }
    .emp-sidebar-name {
        font-size: 15px;
    }
}

/* ==================== 员工详情页样式 ==================== */
#employeeDetailPage {
    padding: 0 !important;
    background: #f5f6fa;
}

.emp-detail-topbar {
    padding: 16px 24px;
    background: #fff;
    border-bottom: 1px solid #eef0f6;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.emp-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #eef0f6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.emp-detail-back:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(102,126,234,0.04);
}

.emp-detail-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    padding: 20px 24px;
    align-items: start;
}

/* 左侧悬浮面板 */
.emp-sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.emp-sidebar-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef0f6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.emp-sidebar-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}

.emp-sidebar-header {
    padding: 24px 20px 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
}

.emp-sidebar-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(102,126,234,0.3);
    flex-shrink: 0;
}

.emp-sidebar-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.emp-sidebar-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-sidebar-pos {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-sidebar-dept {
    font-size: 11px;
    color: #a0aec0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-sidebar-tags {
    padding: 0 20px 16px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.emp-sidebar-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #eef0f6, transparent);
    margin: 0 20px;
}

.emp-sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 20px 8px;
}

.emp-sidebar-info {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emp-sidebar-info-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: baseline;
    padding: 7px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.emp-sidebar-info-item:hover {
    background: #f8f9fc;
}

.emp-sidebar-info-label {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

.emp-sidebar-info-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 右侧主内容区 */
.emp-main {
    min-width: 0;
}

.emp-main-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef0f6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    padding: 20px;
    transition: box-shadow 0.3s ease;
}

.emp-main-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}

/* 统计摘要卡片 */
.emp-stats-card {
    margin-bottom: 16px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef0f6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    padding: 20px 24px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    transition: box-shadow 0.3s ease;
}

.emp-stats-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}

.emp-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fafbff 0%, #f5f6fa 100%);
    transition: all 0.2s ease;
}

.emp-stat-item:hover {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf5 100%);
    transform: translateY(-2px);
}

.emp-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(102,126,234,0.25);
}

.emp-stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.emp-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-stat-label {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

.emp-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.emp-tag--status {
    background: rgba(67,233,123,0.1);
    color: #2ec46e;
}

.emp-tag--status.is-inactive {
    background: rgba(245,87,108,0.1);
    color: #f5576c;
}

.emp-tag--grade {
    background: rgba(102,126,234,0.08);
    color: #667eea;
}

.emp-tag--concurrent {
    background: rgba(240,147,251,0.1);
    color: #d4688c;
}

/* 保留旧的emp-info-grid兼容 */
.emp-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: #eef0f6;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eef0f6;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.emp-info-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0;
    align-items: center;
    background: #fff;
    padding: 0;
}

.emp-info-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 10px 0 10px 16px;
}

.emp-info-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    padding: 10px 16px 10px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 4px;
    border: 1px solid #eef0f6;
}

.emp-tab {
    flex: 1;
    text-align: center;
    padding: 9px 20px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    user-select: none;
}

.emp-tab:hover {
    color: var(--text-primary);
    background: #f8f9fc;
}

.emp-tab.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    box-shadow: 0 2px 10px rgba(102,126,234,0.3);
}

.emp-tab-panel {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef0f6;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    margin-bottom: 0;
}

.emp-job-table-wrap {
    overflow-x: auto;
}

.emp-job-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.emp-job-table thead {
    background: #f8f9fc;
}

.emp-job-table th {
    padding: 11px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid #eef0f6;
    white-space: nowrap;
}

.emp-job-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f2f5;
    color: var(--text-primary);
}

.emp-job-table tbody tr:hover {
    background: #f8f9fc;
}

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

.emp-job-table .emp-job-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.emp-job-tag--active {
    background: rgba(67,233,123,0.1);
    color: #2ec46e;
}

.emp-job-tag--ended {
    background: rgba(245,87,108,0.08);
    color: #f5576c;
}

.emp-concurrent-row {
    cursor: pointer;
    transition: background 0.15s;
}

.emp-concurrent-row:hover {
    background: #f0f4ff;
}

.emp-expand-icon {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 11px;
    color: var(--text-secondary);
}

.emp-expand-icon.open {
    transform: rotate(90deg);
}

.emp-concurrent-sub-row td {
    padding: 8px 14px;
    background: #fafbfe;
}

.emp-job-table--sub {
    margin: 0;
}

.emp-job-table--sub th,
.emp-job-table--sub td {
    padding: 8px 12px;
    text-align: center;
    font-size: 12px;
}

.emp-job-table--sub th:first-child,
.emp-job-table--sub td:first-child {
    text-align: left;
    padding-left: 16px;
}

.emp-job-table--sub th:last-child,
.emp-job-table--sub td:last-child {
    padding-right: 16px;
}

@media (max-width: 900px) {
    .emp-detail-body {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    .emp-sidebar {
        position: static;
        max-height: none;
        order: -1;
    }
    .emp-sidebar-card {
        max-width: 100%;
    }
    .emp-stats-card {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 16px;
    }
}

@media (max-width: 600px) {
    .emp-tabs {
        flex-direction: column;
        gap: 4px;
    }
    .emp-job-table th,
    .emp-job-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* ==================== 通讯录双栏视图 ==================== */
.contacts-layout {
    display: flex;
    height: calc(100vh - 140px);
    gap: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.contacts-sidebar {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: #fafbfc;
}
.contacts-tree-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.contacts-tree-expand {
    margin-left: auto;
    font-size: 12px;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
}
.contacts-tree-expand:hover {
    background: rgba(102,126,234,0.08);
}
.contacts-tree-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.contacts-tree-search input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    outline: none;
    background: #fff;
}
.contacts-tree-search input:focus {
    border-color: var(--primary);
}
.contacts-tree {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.contacts-tree::-webkit-scrollbar { width: 4px; }
.contacts-tree::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 2px; }
.ctree-node { user-select: none; }
.ctree-children { display: none; }
.ctree-node.expanded > .ctree-children { display: block; }
.ctree-node-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.15s;
    border-left: 3px solid transparent;
}
.ctree-node-row:hover { background: rgba(102,126,234,0.06); }
.ctree-node-row.active {
    background: rgba(102,126,234,0.1);
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.ctree-toggle {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.ctree-node.expanded > .ctree-node-row > .ctree-toggle { transform: rotate(90deg); }
.ctree-toggle-empty { visibility: hidden; }
.ctree-node-name {
    flex: 1;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ctree-node-count {
    font-size: 11px;
    color: var(--text-light);
    background: #f0f0f5;
    padding: 1px 7px;
    border-radius: 8px;
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
}
.contacts-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    overflow: hidden;
}
.contact-current-dept {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(102,126,234,0.08);
    border: 1px solid rgba(102,126,234,0.2);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
}
.contact-dept-breadcrumb { display: flex; align-items: center; gap: 4px; }
.contact-bc-sep { color: var(--text-light); margin: 0 2px; }
.contact-bc-item { color: var(--primary); font-weight: 500; }
.contact-dept-clear {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 16px;
    padding: 0 2px;
    line-height: 1;
}
.contact-dept-clear:hover { color: var(--danger); }

.contacts-grid {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px;
}
.contacts-grid::-webkit-scrollbar { width: 4px; }
.contacts-grid::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 2px; }
.contact-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.contact-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(102,126,234,0.15);
    transform: translateY(-2px);
}
.contact-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.contact-card-body {
    flex: 1;
    min-width: 0;
}
.contact-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-card-position {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-card-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.contact-card-grade,
.contact-card-edu {
    font-size: 11px;
    color: var(--text-light);
    background: #f7f8fc;
    padding: 1px 8px;
    border-radius: 4px;
}
.contact-card-manager-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
}

.contact-card-manager {
    border-left: 3px solid var(--primary);
    background: linear-gradient(90deg, rgba(102,126,234,0.03) 0%, #fff 20%);
}

.contact-card-concurrent {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(90deg, rgba(245,158,11,0.04) 0%, #fff 20%);
}
.contact-card-concurrent-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #b45309;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: 1px 7px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: middle;
}

.org-group {
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fafbfc;
}
.org-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(102,126,234,0.06) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
}
.org-connector-line {
    width: 3px;
    height: 24px;
    background: var(--primary);
    border-radius: 2px;
    flex-shrink: 0;
}
.org-connector-dashed {
    background: repeating-linear-gradient(0deg, var(--text-light) 0, var(--text-light) 4px, transparent 4px, transparent 8px);
}
.org-supervisor-label {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}
.org-supervisor-label svg { color: var(--primary); }
.org-supervisor-label strong { color: var(--text-primary); }
.org-group-count {
    font-size: 12px;
    color: var(--text-light);
    margin-left: auto;
}
.org-unassigned-header {
    background: linear-gradient(90deg, rgba(245,87,108,0.04) 0%, transparent 100%);
}
.org-unassigned-header .org-connector-line { background: var(--danger); }
.org-unassigned-header .org-supervisor-label svg { color: var(--danger); }
.org-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    padding: 12px;
}

@media (max-width: 900px) {
    .org-cards { grid-template-columns: 1fr; }
}
.contact-card-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.contact-phone-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.contact-phone-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(102,126,234,0.05);
}
.contact-phone-btn.copied {
    border-color: var(--success);
    color: var(--success);
    background: rgba(67,233,123,0.08);
}
.contact-phone-btn.copied svg {
    animation: contactCopyPop 0.3s ease;
}
@keyframes contactCopyPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
@media (max-width: 900px) {
    .contacts-layout { flex-direction: column; height: auto; }
    .contacts-sidebar { width: 100%; min-width: 100%; max-height: 300px; border-right: none; border-bottom: 1px solid var(--border); }
    .contacts-main { padding: 12px; }
    .contacts-grid { grid-template-columns: 1fr; }
    .contact-card { padding: 12px; }
}

/* ==================== 员工管理-双栏+侧滑面板 ==================== */
.emp-layout {
    display: flex;
    height: calc(100vh - 140px);
    gap: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
}
.emp-sidebar-tree {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: #fafbfc;
}
.emp-tree-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.emp-tree-header .contacts-tree-expand { margin-left: auto; }
.emp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    overflow: hidden;
    min-width: 0;
}
.emp-current-dept {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(102,126,234,0.08);
    border: 1px solid rgba(102,126,234,0.2);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    max-width: 360px;
    overflow: hidden;
}
.emp-current-dept #empBreadcrumb {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emp-dept-clear {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.emp-dept-clear:hover { color: var(--danger); }
.emp-view-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.emp-toolbar {
    flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; padding: 0; overflow-x: auto;
}
.emp-toolbar .toolbar-left {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.emp-toolbar .toolbar-right {
    flex-shrink: 0; display: flex; align-items: center; gap: 6px; margin-left: auto;
}
.emp-toolbar .search-box { width: 180px; flex-shrink: 1; min-width: 120px; }
.emp-toolbar .search-box input { width: 100%; }
.emp-toolbar .filter-select { min-width: 110px; }
.emp-toolbar .btn-outline { white-space: nowrap; }
.emp-toolbar .emp-current-dept { max-width: 200px; }
.emp-view-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.emp-view-panel .table-wrapper { flex: 1; overflow-y: auto; }
.emp-view-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.emp-view-btn {
    padding: 7px 12px;
    border: none;
    background: #fff;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}
.emp-view-btn.active {
    background: var(--primary);
    color: #fff;
}
.emp-view-btn:hover:not(.active) { background: var(--bg); }

.emp-cards-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    align-content: start;
    padding: 2px;
}
.emp-cards-grid::-webkit-scrollbar { width: 4px; }
.emp-cards-grid::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 2px; }

.contact-card-dept-mini {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 侧滑详情面板 */
/* 全屏详情弹窗 */
.emp-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999;
    justify-content: center; align-items: center; padding: 12px;
}
.emp-modal-overlay.open { display: flex; }
.emp-modal {
    width: 100%; max-width: 1400px; max-height: 94vh; background: #fff; border-radius: 16px;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.emp-modal-topbar {
    display: flex; align-items: center; gap: 16px; padding: 14px 24px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.emp-modal-nav { display: flex; gap: 6px; }
.emp-modal-nav-btn {
    width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px;
    background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
}
.emp-modal-nav-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--bg); }
.emp-modal-index { font-size: 13px; color: var(--text-light); flex: 1; text-align: center; }
.emp-modal-close {
    width: 36px; height: 36px; border: none; border-radius: 10px; background: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-light);
}
.emp-modal-close:hover { background: #fef2f2; color: var(--danger); }
.emp-modal-body { flex: 1; overflow: hidden; padding: 0; }
.emp-modal-body::-webkit-scrollbar { width: 4px; }
.emp-modal-body::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 2px; }

/* 左右布局 */
.emp-modal-layout { display: flex; gap: 0; height: 100%; }
.emp-modal-sidebar {
    width: 260px; min-width: 260px; background: #fafbfc; border-right: 1px solid var(--border);
    padding: 24px 18px; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
}
.emp-modal-side-avatar {
    width: 80px; height: 80px; border-radius: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700;
    margin-bottom: 16px;
}
.emp-modal-side-name { font-size: 20px; font-weight: 700; margin: 0 0 4px; text-align: center; }
.emp-modal-side-pos { font-size: 13px; color: var(--text-secondary); margin: 0 0 2px; text-align: center; }
.emp-modal-side-dept { font-size: 12px; color: var(--text-light); margin: 0 0 4px; text-align: center; }
.emp-modal-side-sup { font-size: 12px; color: var(--primary); margin: 0 0 10px; display: flex; align-items: center; gap: 4px; font-weight: 500; }
.emp-modal-side-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.emp-modal-side-divider { width: 100%; height: 1px; background: var(--border); margin-bottom: 16px; }
.emp-modal-side-section { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; align-self: flex-start; }
.emp-modal-side-info { width: 100%; }
.emp-modal-info-item { display: flex; padding: 7px 0; font-size: 12px; border-bottom: 1px solid #f0f0f5; }
.emp-modal-info-l { color: var(--text-light); width: 80px; flex-shrink: 0; }
.emp-modal-info-v { color: var(--text-primary); font-weight: 500; flex: 1; word-break: break-all; }
.emp-modal-main { flex: 1; overflow-y: auto; padding: 24px 20px; min-width: 0; }
.emp-modal-main::-webkit-scrollbar { width: 4px; }
.emp-modal-main::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 2px; }

.emp-modal-section { margin-bottom: 24px; }

/* ====== 员工详情 · 个人全景（只读摘要卡） ====== */
.emp-modal-panorama { margin-bottom: 24px; }
.emp-pana-loading, .emp-pana-empty {
    display: flex; align-items: center; justify-content: center;
    padding: 22px; font-size: 12px; color: var(--text-secondary);
    border: 1px dashed var(--border); border-radius: 10px;
}
.emp-pana-spin {
    width: 14px; height: 14px; border: 2px solid var(--border);
    border-top-color: var(--primary); border-radius: 50%;
    animation: spin 0.8s linear infinite; margin-right: 8px;
}
.emp-pana-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.emp-pana-card {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; background: var(--bg, #fafafa);
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.emp-pana-card--empty { border-style: dashed; }
.emp-pana-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.emp-pana-card-title {
    font-size: 12px; font-weight: 700; color: var(--text-secondary);
    letter-spacing: 0.5px;
}
.emp-pana-card-main {
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: baseline;
}
.emp-pana-card-sub {
    font-size: 11px; color: var(--text-secondary); line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.emp-pana-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; min-height: 20px; margin-top: 2px;
}
.emp-pana-ok { color: #16a34a; }
.emp-pana-bad { color: #dc2626; }
.emp-pana-num { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.emp-pana-num-unit { font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
.emp-pana-card .btn-text { font-size: 11px; padding: 0; white-space: nowrap; }

.emp-modal-tabs {
    display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 16px;
}
.emp-modal-tab {
    padding: 8px 20px; font-size: 14px; font-weight: 600; color: var(--text-secondary);
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s;
}
.emp-modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.emp-modal-tab:hover:not(.active) { color: var(--text-primary); }
.emp-modal-tab-body { }
.emp-modal-table-wrap { overflow-x: auto; }
.emp-modal-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.emp-modal-table th {
    padding: 8px 10px; text-align: left; font-weight: 600; color: var(--text-secondary);
    background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.emp-modal-table td {
    padding: 7px 10px; border-bottom: 1px solid #f3f4f6; white-space: nowrap;
}
.emp-modal-table tbody tr:hover { background: rgba(102,126,234,0.03); }
.emp-conc-arrow { display: inline-block; transition: transform 0.2s; }
.emp-conc-arrow.open { transform: rotate(90deg); }
.emp-conc-toggle { cursor: pointer; }

/* 上下级关系样式 */
.emp-sup-cell { font-size: 12px; color: var(--text-secondary); }
.emp-head-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #b45309;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: 1px 7px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: middle;
}
.tr-leader { background: #fffdf5; }
.tr-leader td:first-child { border-left: 3px solid #f59e0b; }
.contact-card-supervisor {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
}
/* 部门负责人卡片 */
.contact-card-leader {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
    background: linear-gradient(135deg, #fffdf5 0%, #fff 100%);
}
.contact-card-leader-badge {
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: 3px 10px;
    border-radius: 6px;
    margin-top: 6px;
    display: inline-block;
}

@media (max-width: 900px) {
    .emp-layout { flex-direction: column; height: auto; }
    .emp-sidebar-tree { width: 100%; min-width: 100%; max-height: 250px; border-right: none; border-bottom: 1px solid var(--border); }
    .emp-main { padding: 10px; }
    .emp-modal { max-width: 100%; border-radius: 12px; }
    .emp-modal-body { padding: 0; overflow: hidden; }
    .emp-modal-layout { flex-direction: column; }
    .emp-modal-sidebar { width: 100%; min-width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 20px; }
    .emp-modal-main { padding: 16px; }
    .emp-pana-grid { grid-template-columns: 1fr; }
}

/* ==================== BPM待办页面样式 ==================== */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #f5f7fa;
    border-radius: 6px;
    font-size: 12px;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #909399;
}
.status-dot--connected {
    background: #67c23a;
    box-shadow: 0 0 6px rgba(103, 194, 58, 0.5);
}
.status-dot--disconnected {
    background: #f56c6c;
}
.status-text {
    color: var(--text-secondary);
}
.menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #f56c6c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    margin-left: 8px;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.card-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 10;
    border-radius: 8px;
}
.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.detail-section {
    margin-bottom: 20px;
    padding: 16px;
    background: #f5f7fa;
    border-radius: 8px;
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.detail-item {
    display: flex;
    gap: 8px;
}
.detail-label {
    color: var(--text-secondary);
    font-size: 13px;
    min-width: 80px;
}
.detail-value {
    color: var(--text-primary);
    font-size: 13px;
}
.btn-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #e6f7ff;
    color: #1890ff;
    border-radius: 4px;
    font-size: 12px;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: #f5f7fa;
}

/* BPM分类标签页 */
/* BPM待办分类标签 */
.bpm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 16px 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color, #eef0f3);
}
.bpm-tab {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    line-height: 1.5;
    margin-bottom: -1px;
}
.bpm-tab:hover {
    color: var(--primary);
    background: rgba(74, 144, 226, 0.05);
}
.bpm-tab.active {
    color: var(--primary);
    background: transparent;
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.bpm-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    background: #eef0f3;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    transition: all 0.18s ease;
}
.bpm-tab.active .bpm-tab-count {
    background: rgba(74, 144, 226, 0.12);
    color: var(--primary);
    font-weight: 600;
}

/* BPM子分类筛选条 */
.bpm-subcategory-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 10px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}
.bpm-subchip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.5;
}
.bpm-subchip:hover {
    color: var(--primary);
    background: rgba(74, 144, 226, 0.04);
}
.bpm-subchip.active {
    color: var(--primary);
    background: rgba(74, 144, 226, 0.08);
    border-color: rgba(74, 144, 226, 0.25);
    font-weight: 500;
}
.bpm-subchip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 3px;
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 400;
    color: inherit;
    opacity: 0.6;
}
.bpm-subchip.active .bpm-subchip-count {
    background: rgba(74, 144, 226, 0.12);
    opacity: 1;
}

/* BPM详情弹窗 */
.bpm-detail-modal {
    width: 1600px;
    max-width: 98vw;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
}
.bpm-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    background: #f9fafb;
}
.bpm-detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 80px 0;
    color: var(--text-secondary);
    font-size: 14px;
}
.bpm-detail-error {
    text-align: center;
    padding: 60px 0;
    color: #f56c6c;
    font-size: 14px;
}

/* 流程图区域 */
.bpm-flow-section {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
}
.bpm-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #f0f2f5;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}
.bpm-section-icon {
    color: var(--primary);
    display: flex;
    align-items: center;
}
.bpm-section-toggle {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 400;
}
.bpm-flow-body {
    padding: 16px;
    text-align: center;
    background: #fff;
}
.bpm-flow-iframe {
    width: 100%;
    min-height: 300px;
    border: none;
    display: block;
}
.bpm-flow-img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* 卡片布局 */
.bpm-detail-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.bpm-detail-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.bpm-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f5;
}
.bpm-card-title svg {
    color: var(--primary);
}
.bpm-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 4px 0;
    margin-bottom: 8px;
}
.bpm-card-row:last-child {
    margin-bottom: 0;
}
.bpm-card-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    flex: 1 1 45%;
    min-width: 0;
}
.bpm-card-label {
    font-size: 12px;
    color: #909399;
    min-width: 70px;
    flex-shrink: 0;
    white-space: nowrap;
    background: #f5f7fa;
    padding: 2px 8px;
    border-radius: 4px;
}
.bpm-card-value {
    font-size: 13px;
    color: #303133;
    word-break: break-all;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.bpm-data-table-wrap {
    overflow-x: auto;
    margin: 0;
    max-width: 100%;
}
.bpm-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.bpm-data-table th {
    background: #f5f7fa;
    color: #909399;
    font-weight: 500;
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #ebeef5;
    white-space: nowrap;
}
.bpm-data-table td {
    padding: 8px 12px;
    border: 1px solid #ebeef5;
    color: #303133;
}
.bpm-data-table tbody tr:hover {
    background: #f5f7fa;
}

/* datagrid卡片式布局（列数多时使用） */
.bpm-dg-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 8px 0 0;
    background: linear-gradient(135deg, #e8f0fe 0%, #f0e8fe 100%);
    border-radius: 10px 10px 0 0;
    border: 1px solid #d4e2f7;
    border-bottom: 2px solid #409eff;
}
.bpm-dg-role-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #409eff;
    border-radius: 3px;
    letter-spacing: 1px;
}
.bpm-dg-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
}
.bpm-dg-id {
    font-size: 13px;
    color: #7a8599;
    font-family: 'Consolas', 'Monaco', monospace;
}
.bpm-dg-card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0;
    padding: 10px 12px;
    background: #fff;
    border-radius: 0 0 10px 10px;
    border: 1px solid #e4e8ee;
    border-top: none;
}
.bpm-dg-field {
    display: flex;
    align-items: baseline;
    padding: 7px 10px;
    border-bottom: 1px solid #f2f4f7;
    gap: 8px;
}
.bpm-dg-label {
    flex-shrink: 0;
    min-width: 72px;
    max-width: 110px;
    font-size: 12px;
    color: #8c95a6;
    white-space: nowrap;
}
.bpm-dg-value {
    font-size: 13px;
    color: #2c3e50;
    word-break: break-all;
    font-weight: 500;
}

/* v119：图片用 flex 换行排布 + 固定尺寸方框。
   原先 inline-block + 图片原始比例不一（横图 1280×960 与竖图 960×1280 混排），
   基线对齐会让整片缩略图高低错落、看起来像"错位"，实际是排版问题不是数据问题。
   固定成 150×120 的方框后，横竖图都对齐，多图时横向整齐换行。 */
.bpm-proof-img-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 120px;
    margin: 4px 8px 4px 0;
    position: relative;
    vertical-align: top;
    background: #f6f7fa;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    overflow: hidden;
}
/* v119：一张字段里有多张图时，角标标 1/3、2/3，几张长得像的截图才分得清 */
.bpm-proof-idx {
    position: absolute;
    right: 6px;
    top: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(30, 27, 57, .62);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    pointer-events: none;
}
.bd3-materials-hint {
    font-size: 12px;
    color: #9a99ad;
    padding: 6px 0 0;
}
.bpm-file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    margin: 4px 4px 4px 0;
    background: #f0f7ff;
    border: 1px solid #d0e3f7;
    border-radius: 6px;
    color: #2e8ded;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}
.bpm-file-link:hover {
    background: #e1f0ff;
    border-color: #a8cff0;
}
.bpm-proof-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}
.bpm-proof-img:hover {
    transform: scale(1.04);
}

.bpm-proof-gen-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border: 1px solid #b8d8f0;
    border-radius: 10px;
    padding: 10px 18px;
    margin-bottom: 16px;
    animation: fadeInDown 0.3s ease;
}
.bpm-proof-gen-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2c6faa;
    font-weight: 600;
    font-size: 14px;
}
.bpm-proof-gen-bar-left svg {
    flex-shrink: 0;
}
.bpm-proof-gen-bar-right {
    display: flex;
    gap: 8px;
}
.bpm-proof-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.bpm-proof-btn-preview {
    background: #fff;
    color: #2c6faa;
    border: 1px solid #b8d8f0;
}
.bpm-proof-btn-preview:hover {
    background: #e1f0ff;
    border-color: #2c6faa;
}
.bpm-proof-btn-download {
    background: #2c6faa;
    color: #fff;
    border: 1px solid #2c6faa;
}
.bpm-proof-btn-download:hover {
    background: #1e5a8f;
    border-color: #1e5a8f;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.bpm-proof-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-right: 8px;
}
.bpm-proof-file-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #b8d8f0;
    border-radius: 6px;
    font-size: 12px;
    color: #2c6faa;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bpm-proof-file-item:hover {
    background: #e1f0ff;
    border-color: #2c6faa;
}
.bpm-proof-file-item svg {
    flex-shrink: 0;
}
.bpm-proof-file-item span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.bpm-proof-file-action {
    font-size: 11px;
    color: #fff;
    background: #2c6faa;
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.proof-editor-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 0.2s ease;
}
.proof-editor-container {
    width: 95vw;
    max-width: 1400px;
    height: 90vh;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.proof-editor-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
    gap: 12px;
}
.proof-editor-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}
.proof-editor-file {
    font-size: 12px;
    color: #909399;
    background: #ecf5ff;
    padding: 2px 8px;
    border-radius: 4px;
}
.proof-editor-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 22px;
    color: #909399;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.proof-editor-close:hover {
    color: #f56c6c;
}
.proof-editor-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.proof-editor-sidebar {
    width: 260px;
    border-right: 1px solid #e4e7ed;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    background: #fafbfc;
}
.proof-editor-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
}
.proof-field-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}
.proof-editor-hint {
    font-size: 11px;
    color: #909399;
    margin-top: 6px;
    line-height: 1.5;
}
.proof-field-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.proof-field-empty {
    color: #c0c4cc;
    font-size: 12px;
    text-align: center;
    padding: 12px;
}
.proof-field-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 12px;
}
.proof-field-item-name {
    font-weight: 500;
    color: #303133;
}
.proof-field-item-val {
    color: #606266;
    font-size: 11px;
    margin-left: 4px;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.proof-field-item-selected {
    background: #ecf5ff !important;
    border-color: #409eff !important;
}
.proof-field-item-match {
    color: #67c23a;
    font-size: 11px;
    margin-left: 4px;
}
.proof-field-item-score {
    color: #409eff;
    font-size: 10px;
    background: #ecf5ff;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
}
.proof-field-score {
    color: #409eff;
    font-size: 9px;
    background: rgba(64, 158, 255, 0.15);
    padding: 1px 3px;
    border-radius: 2px;
    margin-left: 3px;
}
.proof-field-item-pos {
    color: #909399;
    font-size: 11px;
    margin-left: auto;
    margin-right: 6px;
}
.proof-field-item-del {
    background: none;
    border: none;
    color: #c0c4cc;
    cursor: pointer;
    font-size: 16px;
    padding: 0 2px;
    line-height: 1;
}
.proof-field-item-del:hover {
    color: #f56c6c;
}
.proof-editor-actions {
    margin-top: auto;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.proof-editor-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.proof-editor-btn-clear {
    background: #f5f7fa;
    color: #606266;
    border: 1px solid #dcdfe6;
}
.proof-editor-btn-clear:hover {
    background: #ebeef5;
}
.proof-editor-btn-gen {
    background: #2c6faa;
    color: #fff;
}
.proof-editor-btn-gen:hover {
    background: #1e5a8f;
}
.proof-editor-canvas-wrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
    position: relative;
}
.proof-editor-canvas-wrap.grab-cursor {
    cursor: grab;
}
.proof-editor-canvas-wrap.grabbing-cursor {
    cursor: grabbing;
}
.proof-editor-loading {
    color: #909399;
    font-size: 14px;
}
.proof-editor-canvas-container {
    position: relative;
    display: inline-block;
    transform-origin: center center;
}
.proof-template-img {
    max-width: 100%;
    max-height: calc(90vh - 60px);
    display: block;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
#proofFieldOverlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#proofFieldOverlays .proof-field-overlay {
    pointer-events: auto;
}
.proof-field-overlay {
    position: absolute;
    background: transparent;
    z-index: 10;
    user-select: none;
    cursor: move;
}
.proof-field-overlay:hover .proof-field-value {
    background: rgba(64, 158, 255, 0.08);
    outline: 1px dashed rgba(64, 158, 255, 0.5);
}
.proof-field-overlay-selected .proof-field-value {
    background: rgba(64, 158, 255, 0.12);
    outline: 2px solid #409eff;
}
.proof-field-overlay:hover .proof-field-key,
.proof-field-overlay:hover .proof-field-score,
.proof-field-overlay:hover .proof-field-delete,
.proof-field-overlay-selected .proof-field-key,
.proof-field-overlay-selected .proof-field-score,
.proof-field-overlay-selected .proof-field-delete {
    opacity: 1;
}
.proof-field-value {
    color: #e6a23c;
    font-family: "SimSun", "宋体", serif;
    white-space: nowrap;
    text-shadow: 0 0 2px rgba(230, 162, 60, 0.3);
    padding: 0;
    margin: 0;
    line-height: 1;
    display: block;
    vertical-align: top;
}
.proof-field-key {
    position: absolute;
    top: -16px;
    left: 0;
    font-size: 10px;
    color: #409eff;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(64, 158, 255, 0.1);
    padding: 1px 4px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.proof-field-score {
    position: absolute;
    top: -16px;
    right: 0;
    color: #409eff;
    font-size: 9px;
    background: rgba(64, 158, 255, 0.15);
    padding: 1px 3px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.proof-field-delete {
    position: absolute;
    top: -8px;
    right: -8px;
    background: rgba(245, 108, 108, 0.8);
    border: none;
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
}
.proof-field-delete:hover {
    background: #f56c6c;
}
.proof-prop-group {
    margin-bottom: 10px;
}
.proof-prop-label {
    font-size: 11px;
    color: #909399;
    display: block;
    margin-bottom: 4px;
}
.proof-prop-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.proof-prop-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #dcdfe6;
    border-radius: 2px;
    outline: none;
}
.proof-prop-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #409eff;
    cursor: pointer;
}
.proof-prop-val {
    font-size: 12px;
    color: #303133;
    font-weight: 500;
    min-width: 22px;
    text-align: right;
}
.proof-prop-input {
    width: 60px;
    padding: 3px 6px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
}
.proof-prop-input:focus {
    border-color: #409eff;
    outline: none;
}
.proof-prop-btn {
    padding: 2px 6px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #f5f7fa;
    font-size: 11px;
    cursor: pointer;
    color: #606266;
    line-height: 1.4;
}
.proof-prop-btn:hover {
    background: #e8eaed;
}
.proof-prop-btn:active {
    background: #dcdfe6;
}
.proof-prop-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
}
.proof-prop-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.proof-prop-toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #dcdfe6;
    border-radius: 10px;
    transition: 0.2s;
}
.proof-prop-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}
.proof-prop-toggle input:checked + .proof-prop-toggle-slider {
    background: #409eff;
}
.proof-prop-toggle input:checked + .proof-prop-toggle-slider::before {
    transform: translateX(16px);
}
.proof-prop-text {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 12px;
}
.proof-prop-text:focus {
    border-color: #409eff;
    outline: none;
}
.proof-prop-preview {
    margin-top: 8px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    color: #303133;
    font-family: "SimSun", "宋体", serif;
    word-break: break-all;
    min-height: 24px;
    max-height: 60px;
    overflow: hidden;
}
.proof-editor-zoom-bar {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    z-index: 20;
}
.proof-zoom-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    color: #606266;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.proof-zoom-btn:hover {
    border-color: #409eff;
    color: #409eff;
}
.proof-zoom-btn:active {
    background: #ecf5ff;
}
.proof-zoom-level {
    min-width: 44px;
    text-align: center;
    font-size: 12px;
    color: #303133;
    font-weight: 500;
}
.proof-zoom-fit-btn {
    margin-left: 8px;
    padding: 0 10px;
    width: auto;
    font-size: 11px;
}

.proof-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: proofFadeIn 0.2s ease;
}
@keyframes proofFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.proof-viewer-toolbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 8px 16px;
    z-index: 1;
}
.proof-viewer-toolbar button {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.proof-viewer-toolbar button:hover {
    background: rgba(255,255,255,0.35);
}
.proof-viewer-counter {
    color: #fff;
    font-size: 13px;
    padding: 0 8px;
    min-width: 60px;
    text-align: center;
}
.proof-nav-btn {
    font-size: 18px;
    font-weight: bold;
}
.proof-viewer-close {
    position: fixed;
    top: 20px;
    right: 24px;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transition: background 0.2s;
}
.proof-viewer-close:hover {
    background: rgba(255,255,255,0.3);
}
.proof-viewer-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 80px 40px 40px;
    box-sizing: border-box;
}
.proof-viewer-body img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.3s ease;
    border-radius: 4px;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}
.proof-viewer-body img.proof-dragging {
    transition: none;
    cursor: grabbing;
}
.proof-zoom-pct {
    color: #fff;
    font-size: 12px;
    min-width: 44px;
    text-align: center;
}

/* 审批操作底部栏 */
.bpm-approval-footer {
    display: flex;
    padding: 0 !important;
    border-top: none !important;
    background: none !important;
    flex-shrink: 0;
}
.bpm-approval-footer-inner {
    width: 100%;
    background: #fafbfc;
    border-top: 1px solid #e8ecf0;
}
.bpm-approval-footer-top {
    padding: 10px 24px 0;
}
.bpm-approval-footer-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #e6a23c;
}
.bpm-approval-footer-title svg {
    color: #e6a23c;
}
.bpm-approval-info-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.bpm-approval-info-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #606266;
    background: #f0f2f5;
    padding: 2px 10px;
    border-radius: 4px;
}
.bpm-approval-info-tag b {
    color: #909399;
    font-weight: 500;
}
.bpm-approval-radios {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}
.bpm-approval-radio-label {
    font-size: 13px;
    font-weight: 500;
    color: #606266;
    white-space: nowrap;
}
.bpm-approval-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #606266;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    background: #fff;
    transition: all 0.2s;
}
.bpm-approval-radio:hover {
    border-color: #c0c4cc;
}
.bpm-approval-radio input[type="radio"] {
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.bpm-approval-radio:has(input:checked) {
    border-color: var(--primary);
    background: #ecf5ff;
    color: var(--primary);
}
.bpm-approval-footer-body {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 8px 24px 14px;
}
.bpm-approval-footer-body .bpm-approval-textarea {
    flex: 1;
    border: 1.5px solid #c0c4cc;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    resize: none;
    min-height: 56px;
    max-height: 100px;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
    background: #fff;
    line-height: 1.5;
}
.bpm-approval-footer-body .bpm-approval-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(64,158,255,0.12);
}
.bpm-approval-footer-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    padding-bottom: 2px;
}
.bpm-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}
.bpm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.bpm-btn-approve {
    background: #67c23a;
    color: #fff;
}
.bpm-btn-approve:hover:not(:disabled) {
    background: #5daf34;
}
.bpm-btn-reject {
    background: #f56c6c;
    color: #fff;
}
.bpm-btn-reject:hover:not(:disabled) {
    background: #e6473b;
}
.bpm-btn-other {
    background: #909399;
    color: #fff;
}
.bpm-btn-other:hover:not(:disabled) {
    background: #7b7e83;
}

.bpm-pending-section {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 16px;
}
.bpm-pending-header {
    color: #e6a23c;
}
.bpm-pending-list {
    padding: 12px 24px 16px;
}
.bpm-pending-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}
.bpm-pending-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e6a23c;
    margin-top: 4px;
    flex-shrink: 0;
    animation: bpm-pulse 1.5s infinite;
}
@keyframes bpm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230,162,60,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(230,162,60,0); }
}
.bpm-pending-content {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    background: #fef9e7;
    border-radius: 8px;
    padding: 10px 14px;
    flex: 1;
}
.bpm-pending-field {
    font-size: 13px;
    color: #606266;
}
.bpm-pending-field b {
    color: #909399;
    font-weight: 400;
}

/* 审批历史时间线 */
.bpm-timeline-section {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
}
.bpm-timeline-section .bpm-section-header {
    cursor: default;
}
.bpm-timeline {
    padding: 8px 24px 20px 40px;
    position: relative;
}
.bpm-timeline::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 20px;
    bottom: 30px;
    width: 2px;
    background: #e8ecf1;
}
.bpm-timeline-item {
    position: relative;
    padding: 8px 0 8px 28px;
}
.bpm-timeline-dot {
    position: absolute;
    left: -14px;
    top: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--primary);
}
.bpm-timeline-item:first-child .bpm-timeline-dot {
    background: #67c23a;
    box-shadow: 0 0 0 2px #67c23a;
}
.bpm-timeline-dot.bpm-dot-start {
    background: #409eff;
    box-shadow: 0 0 0 2px #409eff;
}
.bpm-timeline-dot.bpm-dot-reject {
    background: #f56c6c;
    box-shadow: 0 0 0 2px #f56c6c;
}
.bpm-timeline-content {
    background: #f9fafb;
    border-radius: 8px;
    padding: 12px 16px;
}
.bpm-timeline-field {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
}
.bpm-timeline-label {
    font-size: 12px;
    color: #909399;
    min-width: 60px;
    flex-shrink: 0;
}
.bpm-timeline-value {
    font-size: 13px;
    color: #303133;
}

/* 旧样式兼容 */
.bpm-approval-wrapper, .bpm-workflow-wrapper, .bpm-info-table-wrapper,
.bpm-info-table, .bpm-info-label, .bpm-info-value, .bpm-workflow-table-wrapper,
.bpm-workflow-table, .bpm-section-title, .bpm-approval-header, .bpm-approval-text {
    display: none;
}

/* BPM待办分页样式 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background: #f5f7fa;
    border-radius: 8px;
    margin-top: 12px;
}
.pagination-info {
    color: var(--text-secondary);
    font-size: 13px;
    margin-right: 12px;
}
.pagination-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-primary);
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.pagination-btn:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pagination-current {
    padding: 6px 12px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    border-radius: 4px;
}

.bpm-dialog-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    animation: bpmDialogFadeIn 0.2s ease;
}
@keyframes bpmDialogFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.bpm-dialog-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    min-width: 360px;
    max-width: 480px;
    animation: bpmDialogSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
@keyframes bpmDialogSlideIn {
    from { opacity: 0; transform: scale(0.9) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.bpm-dialog-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 24px;
}
.bpm-dialog-icon.confirm {
    background: #e6f7ff;
    color: #1890ff;
}
.bpm-dialog-icon.success {
    background: #f0f9eb;
    color: #67c23a;
}
.bpm-dialog-icon.error {
    background: #fef0f0;
    color: #f56c6c;
}
.bpm-dialog-icon.warning {
    background: #fdf6ec;
    color: #e6a23c;
}
.bpm-dialog-body {
    padding: 28px 28px 16px;
    text-align: center;
}
.bpm-dialog-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
}
.bpm-dialog-message {
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
    white-space: pre-line;
}
.bpm-dialog-actions {
    display: flex;
    gap: 0;
    border-top: 1px solid #f0f0f0;
}
.bpm-dialog-actions button {
    flex: 1;
    padding: 14px 0;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    color: #606266;
}
.bpm-dialog-actions button:hover {
    background: #f5f7fa;
}
.bpm-dialog-actions button + button {
    border-left: 1px solid #f0f0f0;
}
.bpm-dialog-actions .bpm-dialog-btn-primary {
    color: var(--primary);
    font-weight: 600;
}
.bpm-dialog-actions .bpm-dialog-btn-primary:hover {
    background: #ecf5ff;
}
.bpm-dialog-actions .bpm-dialog-btn-danger {
    color: #f56c6c;
    font-weight: 600;
}
.bpm-dialog-actions .bpm-dialog-btn-danger:hover {
    background: #fef0f0;
}

/* ==================== 薪资单模块 ==================== */
.salary-slip-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}
.salary-slip-toolbar {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 0;
    position: relative;
}
.salary-toolbar-filters {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.salary-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.salary-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.salary-filter-label {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.salary-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
}
.salary-action-divider {
    width: 1px;
    height: 20px;
    background: #e8e8e8;
}
.salary-period-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.salary-period-sep {
    color: #ccc;
    font-size: 13px;
}
.salary-select {
    padding: 6px 28px 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    background: #fff;
    min-width: 110px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%23999'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.salary-select:focus {
    border-color: #1B2A4A;
}
.salary-search-wrap {
    position: relative;
}
.salary-search-input {
    padding: 6px 10px 6px 30px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    width: 200px;
    outline: none;
    transition: border-color 0.2s;
    color: #333;
}
.salary-search-input:focus {
    border-color: #1B2A4A;
}
.salary-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.salary-tab-group {
    display: flex;
    background: #F5F6FA;
    border-radius: 6px;
    padding: 2px;
}
.salary-tab {
    padding: 5px 14px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.salary-tab.active {
    background: #fff;
    color: #1B2A4A;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.salary-tab:hover:not(.active) {
    color: #555;
}

/* ===== 考勤管理 Tab ===== */
.att-tab-wrap {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 4px;
}
.att-tab {
    padding: 9px 22px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}
.att-tab:hover { color: #374151; background: rgba(255,255,255,0.5); }
.att-tab.active {
    color: #1e40af;
    background: #fff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.att-tab-panel { display: none; }
.att-tab-panel.active { display: block !important; }

/* 我的考勤 - 页面布局（已合并为考勤管理的第 6 个 tab） */
#attPanelMy.active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    padding: 0;
}
#attPanelMy.active > .att-banner { flex-shrink: 0; margin: 0 0 14px; }
#attPanelMy.active > .att-content-row {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 14px;
    flex: 1;
    min-height: 0;
}
#attPanelMy.active .att-calendar-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#attPanelMy.active .att-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    flex: 1;
    align-content: stretch;
}
#attPanelMy.active .att-detail-card {
    display: flex;
    flex-direction: column;
}
#attPanelMy.active .att-detail-area {
    flex: 1;
}

/* ===== 我的考勤 - Banner（紧凑版） ===== */
.att-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #334155 100%);
    border-radius: 12px;
    padding: 14px 20px 12px;
    margin-bottom: 14px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.att-banner::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.att-banner-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.att-banner-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.att-banner-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
}
.att-banner-select {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    padding: 6px 30px 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='white'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    transition: all 0.2s;
}
.att-banner-select:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.att-banner-select option { background: #1e293b; color: #fff; }
.att-banner-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
    z-index: 1;
}
.att-banner-stat {
    text-align: center;
    padding: 4px 4px;
    position: relative;
}
.att-banner-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255,255,255,0.08);
}
.att-banner-stat-val {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.att-banner-stat-lbl {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
    letter-spacing: 0.04em;
}
.att-banner-divider { display: none; }

/* ===== 内容区 ===== */
/* .att-content-row handled by #attPanelMy.active rules above */
.att-calendar-card,
.att-detail-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.03);
    border: none;
    padding: 16px;
}
.att-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.att-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
    font-weight: 500;
}
.att-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
.att-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.my-att-cal-cell,
.att-cal-cell {
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: all 0.15s ease;
    border: 2px solid transparent;
    min-height: 64px;
}
.my-att-cal-cell.normal,
.att-cal-cell.normal { background: #f0fdf4; }
.my-att-cal-cell.normal:hover,
.att-cal-cell.normal:hover { background: #dcfce7; cursor: pointer; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(22,163,74,0.15); }
.my-att-cal-cell.late,
.att-cal-cell.late { background: #fffbeb; }
.my-att-cal-cell.late:hover,
.att-cal-cell.late:hover { background: #fef3c7; cursor: pointer; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(245,158,11,0.15); }
.my-att-cal-cell.absent,
.att-cal-cell.absent { background: #fef2f2; }
.my-att-cal-cell.absent:hover,
.att-cal-cell.absent:hover { background: #fee2e2; cursor: pointer; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(239,68,68,0.15); }
.my-att-cal-cell.weekend,
.att-cal-cell.weekend { background: #f8fafc; }
.my-att-cal-cell.empty,
.att-cal-cell.empty { background: #f8fafc; }
.my-att-cal-cell.today,
.att-cal-cell.today { border-color: #6366f1; box-shadow: 0 0 0 1px rgba(99,102,241,0.15); }
.my-att-cal-cell.selected,
.att-cal-cell.selected { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 0 0 2px rgba(59,130,246,0.12); }
.my-att-cal-day,
.att-cal-day {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1;
}
.my-att-cal-cell.today .my-att-cal-day,
.att-cal-cell.today .my-att-cal-day { font-weight: 700; color: #4f46e5; }
.my-att-cal-cell.weekend .my-att-cal-day,
.att-cal-cell.weekend .my-att-cal-day { color: #cbd5e1; }
.my-att-cal-hours,
.att-cal-hours {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 5px;
    font-weight: 600;
}
.my-att-cal-cell.normal .my-att-cal-hours,
.att-cal-cell.normal .my-att-cal-hours { color: #16a34a; }
.my-att-cal-cell.late .my-att-cal-hours,
.att-cal-cell.late .my-att-cal-hours { color: #d97706; }
.my-att-cal-cell.absent .my-att-cal-hours,
.att-cal-cell.absent .my-att-cal-hours { color: #dc2626; }

/* 节假日 */
.my-att-cal-cell.holiday {
    background: #eff6ff;
}
.my-att-cal-cell.holiday .my-att-cal-day {
    color: #dc2626;
    font-weight: 700;
}
.my-att-cal-holiday {
    font-size: 10px;
    color: #dc2626;
    margin-top: 3px;
    font-weight: 600;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 调休上班 */
.my-att-cal-cell.extra-work {
    background: #ecfdf5;
}
.my-att-cal-cell.extra-work .my-att-cal-day {
    color: #047857;
    font-weight: 700;
}
.my-att-cal-extra {
    display: inline-block;
    font-size: 10px;
    color: #fff;
    background: #10b981;
    border-radius: 3px;
    padding: 1px 4px;
    margin-top: 3px;
    font-weight: 700;
    line-height: 1.3;
}

/* ===== 明细卡 ===== */
.att-detail-area {
    min-height: 280px;
}
.att-detail-empty {
    text-align: center;
    color: #cbd5e1;
    padding: 90px 0 80px;
    font-size: 14px;
}
.att-detail-empty::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: #f1f5f9;
    border-radius: 50%;
}
.att-detail-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 4px;
    gap: 16px;
    transition: background 0.15s;
}
.att-detail-row:hover { background: #f8fafc; }
.att-detail-row:last-child { margin-bottom: 0; }
.att-detail-label {
    font-size: 14px;
    color: #64748b;
    width: 68px;
    flex-shrink: 0;
    font-weight: 600;
}
.att-detail-val {
    font-size: 18px;
    color: #0f172a;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-weight: 600;
}
.att-detail-val.empty { color: #e2e8f0; }

/* ===== 月度汇总卡片 ===== */
.att-summary-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 14px;
}
.att-summary-title,
.att-abnormal-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
    background: #fff;
    border-radius: 14px 14px 0 0;
    padding: 18px 24px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.03);
}
.att-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #fff;
    border-radius: 0 0 14px 14px;
    padding: 12px 24px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.03);
}
.att-summary-item {
    text-align: center;
    padding: 8px 0;
    position: relative;
}
.att-summary-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: #e2e8f0;
}
.att-summary-val {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.att-summary-lbl {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
    font-weight: 500;
}

/* ===== 异常统计 ===== */
.att-abnormal-row {
    padding: 0 20px 20px;
}
.att-abnormal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #fff;
    border-radius: 0 0 14px 14px;
    padding: 12px 24px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.03);
}
.att-abnormal-item {
    text-align: center;
    padding: 8px 0;
    position: relative;
}
.att-abnormal-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: #e2e8f0;
}
.att-abnormal-val {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.att-abnormal-lbl {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
    font-weight: 500;
}
.att-abnormal-warning {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 16px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 8px;
}
.att-abnormal-warning-icon {
    font-size: 16px;
}
.att-abnormal-ok {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 16px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #16a34a;
    text-align: center;
}

/* ===== 日历请假标注 ===== */
/* 审批完成：绿色系 */
.my-att-cal-cell.leave-approved {
    background: #dcfce7;
    border: 1px solid #86efac;
}
.my-att-cal-cell.leave-approved .my-att-cal-day {
    color: #15803d;
    font-weight: 700;
}
/* 审批中：橙色系，与审批完成形成明显对比 */
.my-att-cal-cell.leave-pending {
    background: #ffedd5;
    border: 1px dashed #fdba74;
}
.my-att-cal-cell.leave-pending .my-att-cal-day {
    color: #c2410c;
    font-weight: 700;
}
.my-att-cal-leave {
    display: inline-block;
    font-size: 10px;
    color: #fff;
    background: #16a34a;
    border-radius: 3px;
    padding: 1px 4px;
    margin-top: 3px;
    font-weight: 700;
    line-height: 1.3;
}
.my-att-cal-leave-pending {
    display: inline-block;
    font-size: 10px;
    color: #fff;
    background: #ea580c;
    border-radius: 3px;
    padding: 1px 4px;
    margin-top: 3px;
    font-weight: 700;
    line-height: 1.3;
}

/* ===== 考勤看板统计卡片 ===== */
.att-dash-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.att-dash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
}
.att-dash-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.att-dash-card-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}
.att-dash-card-val {
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.03em;
}
.att-dash-card-sub {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 6px;
}

/* 搜索下拉选择器 */
.salary-search-select {
    position: relative;
}
.salary-search-select-input {
    width: 100%;
    cursor: text;
}
.salary-search-select-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.15s;
}
.salary-search-select.open .salary-search-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}
.salary-search-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 100;
}
.salary-search-select.open .salary-search-select-dropdown {
    display: block;
}
.salary-ss-item {
    padding: 8px 12px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}
.salary-ss-item:hover {
    background: #f5f6fa;
}
.salary-ss-item.active {
    background: #eef1f7;
    color: #1B2A4A;
    font-weight: 500;
}
.salary-ss-empty {
    padding: 16px;
    text-align: center;
    color: #bbb;
    font-size: 13px;
}
.salary-search-select-dropdown::-webkit-scrollbar {
    width: 4px;
}
.salary-search-select-dropdown::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 2px;
}
.salary-tab-content {
    display: none;
}
.salary-tab-content.active {
    display: block;
}
.salary-stats-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.salary-stat-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
}
.salary-stat-label {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 4px;
}
.salary-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
}
.salary-table-wrap {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
}
.salary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.salary-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.salary-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}
.salary-table tbody tr:hover {
    background: #f9fafb;
}
.salary-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    justify-content: center;
}
.salary-page-btn {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
    transition: all 0.2s;
}
.salary-page-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.salary-page-btn:hover:not(.active) {
    background: #f3f4f6;
}
.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

/* 员工历史 */
.salary-emp-search {
    max-width: 600px;
    margin: 0 auto;
}
.salary-emp-search-box {
    margin-bottom: 8px;
}
.salary-emp-search-box .salary-search-input {
    width: 100%;
    padding-left: 12px;
}
.salary-emp-search-results {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    max-height: 400px;
    overflow-y: auto;
}
.salary-emp-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.15s;
}
.salary-emp-result-item:hover {
    background: #f9fafb;
}
.salary-emp-result-item:last-child {
    border-bottom: none;
}
.salary-emp-result-name {
    font-weight: 500;
    color: #1f2937;
}
.salary-emp-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.salary-emp-info h3 {
    font-size: 18px;
    color: #1f2937;
}
.salary-emp-chart-wrap {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    margin-bottom: 16px;
    height: 360px;
}
.salary-emp-history-table-wrap {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
}

/* 部门汇总 */
.salary-dept-totals {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

/* 薪资单导入按钮 */
.salary-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.salary-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.salary-btn-outline:hover {
    border-color: #1B2A4A;
    color: #1B2A4A;
}
.salary-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: #1B2A4A;
    color: #fff;
    border: 1px solid #1B2A4A;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.salary-btn-primary:hover {
    background: #243656;
}
.salary-import-btn {
    padding: 6px 16px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.salary-import-btn:hover {
    background: linear-gradient(135deg, #6d28d9, #5b21b6);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}
.salary-download-btn {
    padding: 6px 16px;
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.salary-download-btn:hover {
    background: linear-gradient(135deg, #047857, #065f46);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(5,150,105,0.3);
}

/* 薪资单导入弹窗 */
.salary-import-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.salary-import-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.salary-import-dialog {
    position: relative;
    width: 480px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    overflow: hidden;
}
.salary-import-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.salary-import-header h3 {
    margin: 0;
    font-size: 16px;
    color: #1f2937;
}
.salary-import-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0 4px;
}
.salary-import-close:hover { color: #374151; }
.salary-import-body {
    padding: 20px;
}
.salary-import-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.salary-import-dropzone:hover,
.salary-import-dropzone.dragover {
    border-color: #7c3aed;
    background: #f5f3ff;
}
.salary-import-dropzone p {
    margin: 8px 0 0;
    color: #6b7280;
    font-size: 14px;
}
.salary-import-hint {
    font-size: 12px !important;
    color: #9ca3af !important;
}
.salary-import-file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    font-size: 13px;
    color: #166534;
}
.salary-import-file-list {
    margin-top: 12px;
    max-height: 200px;
    overflow-y: auto;
}
.salary-import-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 4px;
}
.salary-import-file-name {
    flex: 1;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.salary-import-file-size {
    color: #9ca3af;
    font-size: 12px;
    white-space: nowrap;
}
.salary-import-file-status {
    min-width: 40px;
    text-align: center;
    font-size: 12px;
}
.salary-import-remove {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 12px;
    cursor: pointer;
}
.salary-import-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.salary-import-status {
    flex: 1;
    font-size: 13px;
    color: #6b7280;
}
.salary-import-status.importing { color: #2563eb; }
.salary-import-status.success { color: #059669; font-weight: 500; }
.salary-import-status.error { color: #dc2626; }
.salary-import-cancel {
    padding: 6px 16px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
}
.salary-import-submit {
    padding: 6px 20px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.salary-import-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 薪资明细弹窗 */
.salary-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.salary-detail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}
.salary-detail-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.salary-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    z-index: 1;
}
.salary-detail-header h2 {
    font-size: 18px;
    color: #1f2937;
}
.salary-detail-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.salary-detail-close:hover {
    background: #e5e7eb;
    color: #374151;
}
.salary-detail-body {
    padding: 24px;
}
.salary-detail-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 10px;
    margin-bottom: 20px;
}
.salary-detail-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
.salary-detail-info-row span:first-child {
    color: #6b7280;
}
.salary-detail-info-row span:last-child {
    color: #1f2937;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}
.salary-detail-section {
    margin-bottom: 16px;
}
.salary-detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
}
.salary-detail-section-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 0;
}
.salary-detail-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 16px;
    font-size: 13px;
    color: #4b5563;
    border-radius: 4px;
}
.salary-detail-item:hover {
    background: #f9fafb;
}
.salary-detail-item span:first-child {
    color: #6b7280;
}
.salary-detail-net {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #059669, #10b981);
    border-radius: 12px;
    margin-top: 20px;
    color: #fff;
}
.salary-detail-net span:first-child {
    font-size: 16px;
    font-weight: 500;
}
.salary-detail-net-amount {
    font-size: 28px;
    font-weight: 700;
}

/* BPM可编辑控件样式 */
.bpm-edit-text,
.bpm-edit-date {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    color: #303133;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.bpm-edit-text:focus,
.bpm-edit-date:focus {
    border-color: #409eff;
}
.bpm-edit-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    color: #303133;
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    box-sizing: border-box;
    appearance: auto;
}
.bpm-edit-select:focus {
    border-color: #409eff;
}
.bpm-edit-search-wrap {
    position: relative;
    width: 100%;
}
.bpm-edit-search {
    width: 100%;
    padding: 6px 30px 6px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    color: #303133;
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.bpm-edit-search:focus {
    border-color: #409eff;
}
.bpm-edit-search-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #909399;
    pointer-events: none;
}

/* ===== BPM 待办页 UI 升级（2026-08-19） ===== */
.bpm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 18px;
}
.bpm-header-left {
    display: flex;
    align-items: center;
    gap: 4px;
}
.bpm-total-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: rgba(74, 144, 226, 0.1);
    color: var(--primary, #4a90e2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.bpm-stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 4px 16px 12px;
}
.bpm-stat-card {
    background: #f8fafc;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    padding: 12px 16px;
}
.bpm-stat-label {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 6px;
}
.bpm-stat-value {
    font-size: 22px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
}
.bpm-stat-danger .bpm-stat-value {
    color: #ef4444;
}
.bpm-data-table thead th {
    background: #f8fafc;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-transform: none;
}
.bpm-data-table tbody tr {
    transition: background 0.15s ease;
}
.bpm-data-table tbody tr:hover {
    background: #f1f5f9;
}
.bpm-data-table tbody td {
    font-size: 13px;
}
.bpm-data-table .link {
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
}
.bpm-data-table .link:hover {
    text-decoration: underline;
}

/* 待办列表卡片化升级（2026-08-19 v2） */
.bpm-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
}
.bpm-todo-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.bpm-cat-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}
.bpm-todo-title-wrap {
    min-width: 0;
}
.bpm-todo-title {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}
.bpm-todo-title:hover {
    color: #2563eb;
    text-decoration: none !important;
}
.bpm-todo-sub {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}
.bpm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 500;
    margin-right: 6px;
    vertical-align: middle;
}
.bpm-submitter {
    font-size: 13px;
    color: #334155;
}
.bpm-node {
    display: inline-block;
    padding: 3px 10px;
    background: #f8fafc;
    border: 1px solid #eef0f3;
    border-radius: 999px;
    font-size: 12px;
    color: #475569;
}
.bpm-time {
    font-size: 12px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.bpm-duration {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.bpm-act-btn {
    border-radius: 8px;
}
.bpm-todo-row {
    transition: background 0.15s ease;
}
.bpm-todo-row:hover {
    background: #f8fafc !important;
}
.bpm-todo-row td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* BPM弹出选择窗口 */
.bpm-select-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}
.bpm-select-dialog {
    background: #fff;
    border-radius: 8px;
    width: 480px;
    max-width: 90vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.bpm-select-dialog-wide {
    width: 680px;
}
.bpm-select-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #ebeef5;
}
.bpm-select-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}
.bpm-select-close {
    font-size: 22px;
    color: #909399;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
}
.bpm-select-close:hover {
    color: #303133;
}
.bpm-select-search {
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    gap: 8px;
}
.bpm-select-search input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
}
.bpm-select-search-btn {
    padding: 8px 16px;
    background: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}
.bpm-select-search-btn:hover {
    background: #66b1ff;
}
.bpm-select-search input:focus {
    border-color: #409eff;
}
.bpm-select-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    max-height: 400px;
}
.bpm-select-group-title {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #909399;
    background: #fafafa;
}
.bpm-select-item {
    padding: 10px 20px;
    font-size: 14px;
    color: #303133;
    cursor: pointer;
    transition: background 0.15s;
}
.bpm-select-item:hover {
    background: #f5f7fa;
}
.bpm-select-item.selected {
    background: #ecf5ff;
    color: #409eff;
    font-weight: 500;
}
.bpm-select-empty {
    padding: 40px 20px;
    text-align: center;
    color: #909399;
    font-size: 14px;
}
.bpm-select-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid #ebeef5;
}
.bpm-select-btn {
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #606266;
    transition: all 0.15s;
}
.bpm-select-btn:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background: #ecf5ff;
}
.bpm-select-btn-ok {
    background: #409eff;
    border-color: #409eff;
    color: #fff;
}
.bpm-select-btn-ok:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
}

/* 专项附加扣除页面 - 全新设计 */
.sd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25);
}
.sd-toolbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.sd-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sd-select {
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    background: rgba(255,255,255,0.95);
    cursor: pointer;
    min-width: 160px;
    font-weight: 500;
    color: #374151;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.sd-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}
.sd-btn-primary {
    background: #fff;
    color: #667eea;
    border: none;
    border-radius: 10px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sd-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.sd-btn-primary:active {
    transform: translateY(0);
}
.sd-btn-secondary {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
}
.sd-btn-secondary:hover {
    background: rgba(255,255,255,0.25);
}
.sd-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.sd-stat-item {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.sd-stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.sd-stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
}
.sd-stat-item:nth-child(1)::before {
    background: linear-gradient(90deg, #667eea, #764ba2);
}
.sd-stat-item:nth-child(2)::before {
    background: linear-gradient(90deg, #f093fb, #f5576c);
}
.sd-stat-item:nth-child(3)::before {
    background: linear-gradient(90deg, #4facfe, #00f2fe);
}
.sd-stat-item:nth-child(4)::before {
    background: linear-gradient(90deg, #43e97b, #38f9d7);
}
.sd-stat-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sd-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
.sd-stat-diff {
    color: #ef4444;
}
.sd-compare-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: #fff;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    width: fit-content;
}
.sd-tab {
    padding: 12px 28px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.sd-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.sd-tab-content {
    background: #fff;
    border-radius: 16px;
    border: none;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.sd-search-bar {
    padding: 16px 24px;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}
.sd-search-bar input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    transition: border-color 0.2s;
    background: #fff;
}
.sd-search-bar input:focus {
    outline: none;
    border-color: #667eea;
}
.sd-table {
    width: 100%;
    border-collapse: collapse;
}
.sd-table th, .sd-table td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}
.sd-table th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sd-table td {
    color: #374151;
}
.sd-table tr:hover {
    background: #f8fafc;
}
.sd-pagination {
    padding: 16px 20px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
}
.sd-pagination button {
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}
.sd-pagination button:hover {
    border-color: #667eea;
    color: #667eea;
}
.sd-pagination button.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: transparent;
}

/* 专项附加扣除对比 - 卡片布局全新设计 */
.sd-card-list {
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 20px;
    padding: 16px;
}
.sd-card {
    background: #fff;
    border-radius: 16px;
    border: none;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sd-card:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}
.sd-card-diff {
    border-left: 4px solid #ef4444;
}
.sd-card-match {
    border-left: 4px solid #10b981;
}
.sd-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fafafa;
}
.sd-card-diff .sd-card-header {
    background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
}
.sd-card-match .sd-card-header {
    background: linear-gradient(135deg, #ecfdf5 0%, #fff 100%);
}
.sd-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.sd-card-diff .sd-card-avatar {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.sd-card-match .sd-card-avatar {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.sd-card-info {
    flex: 1;
    min-width: 0;
}
.sd-card-name {
    font-weight: 700;
    font-size: 16px;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.sd-card-emp-id-inline {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
    font-weight: 500;
    color: #667eea;
    background: #eef2ff;
    padding: 2px 10px;
    border-radius: 12px;
}
.sd-card-id-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
}
.sd-card-emp-id {
    font-family: 'SF Mono', Monaco, monospace;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 4px;
}
.sd-card-id-card {
    font-family: 'SF Mono', Monaco, monospace;
}
.sd-card-badges {
    display: flex;
    gap: 8px;
}
.sd-card-badge {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.sd-badge-diff {
    background: #fee2e2;
    color: #dc2626;
}
.sd-badge-match {
    background: #d1fae5;
    color: #059669;
}
.sd-badge-est {
    background: #fef3c7;
    color: #d97706;
}
.sd-card-body {
    padding: 0;
}
.sd-item {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 1fr;
    gap: 12px;
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
}
.sd-item:last-child {
    border-bottom: none;
}
.sd-item-header {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    padding: 12px 20px;
    background: #f8fafc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sd-item-label {
    color: #374151;
    font-weight: 600;
}
.sd-item-val {
    text-align: right;
    color: #374151;
    font-family: 'SF Mono', Monaco, monospace;
    font-weight: 500;
}
.sd-item-val.text-red {
    color: #ef4444;
    font-weight: 700;
}
.sd-item-val.text-green {
    color: #10b981;
    font-weight: 600;
}
.sd-item-diff {
    background: #fff5f5;
}
.sd-item-total {
    background: #f8fafc;
    font-weight: 700;
    padding: 12px 20px;
    margin-top: 0;
    border-top: 2px solid #e5e7eb;
}
.sd-item-total .sd-item-label {
    color: #111827;
}
.sd-item-total .sd-item-val {
    color: #111827;
    font-size: 15px;
}
.sd-est-detail {
    font-size: 11px;
    color: #d97706;
    margin-top: 2px;
}
.sd-stat-match {
    color: #10b981;
}
.sd-filter-btn {
    padding: 6px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.sd-filter-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
.sd-filter-btn.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}
.sd-btn-export {
    padding: 6px 14px;
    border: 1px solid #059669;
    border-radius: 6px;
    background: #fff;
    color: #059669;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.sd-btn-export:hover {
    background: #059669;
    color: #fff;
}

/* 专项附加扣除导入弹窗 */
.sd-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sd-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}
.sd-modal-dialog {
    position: relative;
    width: 500px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    overflow: hidden;
}
.sd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.sd-modal-header h3 {
    font-size: 16px;
    color: #1a1a2e;
}
.sd-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
}
.sd-modal-body {
    padding: 24px;
}
.sd-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.sd-modal-status {
    flex: 1;
    font-size: 13px;
    color: #6b7280;
}
.sd-modal-status.success { color: #059669; font-weight: 500; }
.sd-modal-status.error { color: #dc2626; }
.sd-modal-status.importing { color: #2563eb; }
.sd-modal-cancel {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #4b5563;
    font-size: 14px;
    cursor: pointer;
}
.sd-modal-submit {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: #7c3aed;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.sd-modal-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sd-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}
.sd-dropzone:hover, .sd-dropzone.dragover {
    border-color: #7c3aed;
    background: #faf5ff;
}
.sd-dropzone p {
    margin: 8px 0;
    font-size: 14px;
    color: #374151;
}
.sd-dropzone-hint {
    color: #9ca3af !important;
    font-size: 12px !important;
}

/* 差异明细弹窗样式 */
.sd-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.sd-detail-modal-content {
    background: #fff;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.sd-detail-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}
.sd-detail-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}
.sd-detail-close {
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
.sd-detail-close:hover {
    color: #374151;
    background: #e5e7eb;
}
.sd-detail-modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
}
.sd-detail-summary {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}
.sd-detail-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
}
.sd-detail-row:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}
.sd-detail-label {
    color: #6b7280;
    font-size: 13px;
    width: 120px;
}
.sd-detail-value {
    color: #374151;
    font-size: 14px;
    font-weight: 500;
}
.sd-detail-total {
    background: #fef3c7;
    margin: 12px -16px -16px;
    padding: 12px 16px;
    border-radius: 0 0 12px 12px;
}
.sd-detail-section {
    margin-bottom: 20px;
}
.sd-detail-section h4 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    padding-bottom: 8px;
    border-bottom: 2px solid #7c3aed;
}
.sd-detail-table {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.sd-detail-table table {
    width: 100%;
    border-collapse: collapse;
}
.sd-detail-table th {
    background: #f9fafb;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}
.sd-detail-table td {
    padding: 10px 12px;
    font-size: 13px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
}
.sd-detail-table-total {
    background: #f3f4f6;
    font-weight: 600;
}
.sd-detail-table-total td {
    border-bottom: none;
}
.sd-detail-months {
    margin-top: 12px;
    padding: 12px;
    background: #f0fdf4;
    border-radius: 8px;
}
.sd-detail-months-label {
    color: #6b7280;
    font-size: 12px;
    margin-right: 8px;
}
.sd-detail-month {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin: 2px;
}
.sd-detail-estimated {
    margin-top: 12px;
    padding: 12px;
    background: #fef3c7;
    border-radius: 8px;
    font-size: 13px;
}
.sd-item {
    cursor: pointer;
    transition: background 0.2s;
}
.sd-item:hover {
    background: #f3f4f6 !important;
}

/* ==================== 批量删除一次性页面 ==================== */
.ern-del-container {
    padding: 24px 32px;
    max-width: 1600px;
    margin: 0 auto;
}
.ern-del-header h2 {
    font-size: 22px;
    color: #1e293b;
    margin-bottom: 4px;
}
.ern-del-subtitle {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 20px;
}
.ern-del-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ern-del-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ern-del-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ern-del-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.ern-del-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ern-del-btn-primary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.ern-del-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
.ern-del-btn-danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.ern-del-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}
.ern-del-btn-danger:disabled {
    background: #f87171;
    border-color: #f87171;
    opacity: 0.6;
}
.ern-del-file-label {
    font-size: 13px;
    color: #64748b;
}
.ern-del-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.ern-del-stat {
    flex: 1;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ern-del-stat-num {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
}
.ern-del-stat-label {
    font-size: 12px;
    color: #64748b;
}
.ern-del-table-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: auto;
    max-height: 500px;
}
.ern-del-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ern-del-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.ern-del-table th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.ern-del-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    white-space: nowrap;
}
.ern-del-table tbody tr:hover {
    background: #f8fafc;
}

/* 进度遮罩 */
.ern-del-progress-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.ern-del-progress-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    width: 640px;
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.ern-del-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.ern-del-progress-header h3 {
    font-size: 18px;
    color: #1e293b;
}
.ern-del-progress-close {
    padding: 6px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #475569;
}
.ern-del-progress-close:hover {
    background: #f1f5f9;
}
.ern-del-progress-bar-wrap {
    width: 100%;
    height: 10px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}
.ern-del-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 5px;
    transition: width 0.3s ease;
}
.ern-del-progress-pct {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}
.ern-del-progress-stage {
    font-size: 13px;
    color: #475569;
    margin-bottom: 16px;
    min-height: 20px;
}
.ern-del-progress-results {
    max-height: 300px;
    overflow-y: auto;
    font-size: 13px;
}
.ern-del-result {
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
}
.ern-del-result.ok {
    background: #f0fdf4;
    color: #15803d;
    border-left: 3px solid #22c55e;
}
.ern-del-result.err {
    background: #fef2f2;
    color: #b91c1c;
    border-left: 3px solid #ef4444;
}

/* ===== 首页「待办事项」卡片精工化 ===== */
.todo-card .card-header {
    padding: 22px 26px 0;
}
.todo-card .badge-count {
    background: var(--bpm-accent-weak);
    color: var(--bpm-accent);
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.todo-list {
    padding: 14px 26px 20px;
}
.todo-item {
    padding: 12px 0;
    border-bottom-color: #f4f6f8;
    transition: padding-left 0.18s ease;
}
.todo-item:hover {
    padding-left: 4px;
}
.todo-item:last-child {
    border-bottom: none;
}
.todo-check {
    width: 17px;
    height: 17px;
    accent-color: var(--bpm-accent);
    border-radius: 4px;
}
.todo-text {
    font-weight: 400;
    transition: color 0.18s ease;
}
.todo-item:hover .todo-text {
    color: #111827;
}
.todo-item.completed .todo-text {
    color: #c1c9d4;
}
.todo-time {
    color: var(--bpm-text-faint);
    font-variant-numeric: tabular-nums;
}

/* 详情弹窗：去掉渐变 header 与灰块标签，统一中性 */
.bpm-dg-header {
    background: #fafbfc;
    border: 1px solid var(--bpm-line);
    border-bottom: 1px solid #dbe1e8;
    border-radius: 10px 10px 0 0;
}
.bpm-card-label {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--bpm-text-soft);
}
.bpm-detail-body {
    background: #f7f8fa;
}
.bpm-detail-card,
.bpm-flow-section {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .bpm-stat-card { animation: none !important; }
    .bpm-btn-ico { transition: none !important; }
    .bpm-data-table tbody tr { transition: none !important; }
    .todo-item { transition: none !important; }
    .bpm-todo-row { transition: none !important; }
}


/* ==================== 部门数据更新 - 配置折叠面板（2026-09-09 重做） ==================== */
.dept-config-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-top: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.dept-config-card > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    list-style: none;
    user-select: none;
    transition: background 0.15s ease;
}

.dept-config-card > summary::-webkit-details-marker {
    display: none;
}

.dept-config-card > summary:hover {
    background: #f8fafc;
}

.dept-config-card > summary svg {
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.dept-config-card[open] > summary svg {
    transform: rotate(90deg);
}

.dept-config-card__hint {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: #94a3b8;
}

.dept-config-card .config-form {
    padding: 0 18px 18px;
    border-top: 1px solid #f1f5f9;
}

/* ==================== BPM 待办 - 审批决策辅助 + 批量审批（2026-09-09） ==================== */

/* 审批决策条（详情弹窗顶部） */
.bpm-context-bar {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-left: 4px solid #0ea5e9;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

.bpm-context-bar .bpm-context-title {
    font-size: 13px;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 8px;
}

.bpm-context-bar.bpm-context-warn {
    background: #fef2f2;
    border-color: #fecaca;
    border-left-color: #dc2626;
}

.bpm-context-bar.bpm-context-warn .bpm-context-title {
    color: #b91c1c;
}

.bpm-context-bar.bpm-context-leave {
    background: #fffbeb;
    border-color: #fde68a;
    border-left-color: #d97706;
}

.bpm-context-bar.bpm-context-leave .bpm-context-body {
    color: #92400e;
}

.bpm-context-bar .bpm-context-ok {
    color: #16a34a;
}

.bpm-context-bar .bpm-context-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 12.5px;
    color: #475569;
}

.bpm-context-bar .bpm-context-body b {
    color: #0f172a;
}

.bpm-context-bar .bpm-context-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

/* AI 审批意见卡 */
.bpm-ai-card {
    background: #f8fafc;
    border-color: #e2e8f0;
    border-left-color: #6366f1;
}
.bpm-ai-card .bpm-context-title { color: #4338ca; }
.bpm-ai-card.bpm-ai-approve { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; }
.bpm-ai-card.bpm-ai-approve .bpm-context-title { color: #15803d; }
.bpm-ai-card.bpm-ai-reject { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; }
.bpm-ai-card.bpm-ai-reject .bpm-context-title { color: #b91c1c; }
.bpm-ai-card.bpm-ai-material { background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; }
.bpm-ai-card.bpm-ai-material .bpm-context-title { color: #b45309; }
.bpm-ai-card.bpm-ai-unknown { background: #f8fafc; border-color: #e2e8f0; border-left-color: #64748b; }
.bpm-ai-card.bpm-ai-unknown .bpm-context-title { color: #475569; }
.bpm-ai-summary {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    margin: 4px 0 8px;
}
.bpm-ai-reasons {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: #475569;
}
.bpm-ai-reasons li { margin: 3px 0; }
.bpm-ai-findings {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bpm-ai-finding {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
}
.bpm-ai-finding b { color: #0f172a; flex: none; }
.bpm-ai-finding-icon { flex: none; }
.bpm-ai-cached { font-weight: 400; font-size: 11px; opacity: 0.65; }

/* 附件缩略图 */
.bpm-attach-thumb-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin: 4px 6px 4px 0;
    vertical-align: top;
}

.bpm-attach-thumb {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    cursor: zoom-in;
    background: #f8fafc;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bpm-attach-thumb:hover {
    border-color: #94a3b8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bpm-attach-name {
    font-size: 10px;
    color: #94a3b8;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 批量操作栏 */
.bpm-batch-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #475569;
}

.bpm-batch-bar .bpm-batch-count b {
    color: #0f172a;
}

.bpm-batch-bar .bpm-batch-hint {
    font-size: 11.5px;
    color: #94a3b8;
}

.bpm-batch-bar .bpm-batch-errors {
    flex-basis: 100%;
    font-size: 12px;
    color: #dc2626;
    background: #fef2f2;
    border-radius: 6px;
    padding: 6px 10px;
}

/* 通用标记徽章（v112 起只剩列表里的「🧪 测试」复用它；「📎 待材料」已移除） */
.bpm-flag-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: 1px;
}

/* 勾选列 */
.bpm-row-check {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #4f46e5;
}

/* ==================== BPM待办 - 搜索栏 + 假种徽章（2026-09-09） ==================== */
.bpm-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 12px;
}
.bpm-search-bar svg {
    color: var(--text-tertiary, #94a3b8);
    flex-shrink: 0;
}
.bpm-search-bar input {
    flex: 1;
    max-width: 320px;
    padding: 7px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1e293b);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bpm-search-bar input:focus {
    border-color: var(--accent-color, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.bpm-search-bar .btn-sm {
    padding: 6px 14px;
    white-space: nowrap;
}
.bpm-leave-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #15803d;
    background: rgba(34, 197, 94, 0.14);
    vertical-align: middle;
}

/* 打卡申诉类型标签：微信打卡需催收材料，用醒目琥珀色区分 */
.bpm-appeal-chip-warn {
    color: #b45309;
    background: rgba(245, 158, 11, 0.16);
}

/* ==================== BPM待办 - 对齐 emp 设计语言（2026-09-09） ==================== */
#bpmTodoPage { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
#bpmTodoPage .card { margin: 0; }
.bpm-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.bpm-hero-status { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px); }
.bpm-hero-status .status-text { color: #fff; font-weight: 600; }
.bpm-hero-total { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: rgba(67,233,123,0.25); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; }
.bpm-hero-refresh { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.94); color: #5b50c8; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: inherit; }
.bpm-hero-refresh:hover { background: #fff; transform: translateY(-1px); }
.bpm-hero-refresh.bpm-spin svg { animation: bpmSpin 0.8s linear infinite; }
@keyframes bpmSpin { to { transform: rotate(360deg); } }
.bpm-list-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bpm-list-toolbar .bpm-tabs { padding-top: 4px; }
.bpm-list-toolbar .bpm-search-bar { margin-left: auto; order: 2; }
.bpm-list-toolbar .bpm-subcategory-tabs { flex-basis: 100%; order: 3; }
@media (max-width: 900px) {
    #bpmTodoPage { padding: 16px; gap: 14px; }
    .bpm-hero-right { align-items: flex-start; }
}

/* ==================== BPM待办头部压缩条（2026-09-10） ==================== */
.bpm-compact-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bpm-compact-bar h3 { margin: 0; font-size: 17px; font-weight: 600; color: #1e293b; }
.bpm-compact-spacer { flex: 1; }
.bpm-urgent-badge { display: none; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(244, 63, 94, 0.12); color: #e11d48; font-size: 12px; font-weight: 600; }
.bpm-renudge-cfg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #64748b; white-space: nowrap; }
.bpm-renudge-input { width: 48px; padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; text-align: center; font-family: inherit; }
.bpm-renudge-input:focus { outline: none; border-color: #667eea; }
.bpm-renudge-saved { display: none; color: #16a34a; font-size: 12px; font-weight: 600; }

/* 已交打卡照片徽章（上传链接通道） */
.bpm-photo-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(22, 163, 74, 0.12); color: #15803d; font-size: 11px; font-weight: 600; cursor: pointer; vertical-align: 1px; white-space: nowrap; }
.bpm-photo-badge:hover { background: rgba(22, 163, 74, 0.2); }

/* 催收标签（v103）：已催过钉消息的打卡申诉单 —— 催了几遍 · 距最近一次多久 */
.bpm-ding-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(100, 116, 139, 0.14); color: #475569; font-size: 11px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
/* 已满"再催间隔"：再次批量同意会重发，用琥珀色提示可操作 */
.bpm-ding-badge.due { background: rgba(224, 162, 63, 0.2); color: #b45309; }
#bpmTodoPage .bpm-ding-badge { flex: none; }

/* 照片查看器底部说明（姓名/日期/上传时间） */
.proof-viewer-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px; text-align: center; color: #fff; font-size: 13px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.proof-del-btn { display: inline-block; margin-left: 12px; padding: 3px 12px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; color: #fff; font-size: 12px; cursor: pointer; pointer-events: auto; text-shadow: none; transition: background 0.15s, border-color 0.15s; }
.proof-del-btn:hover { background: rgba(220, 38, 38, 0.85); border-color: #dc2626; }

/* ============================================================
   BPM 待办中心 v2（2026-09-11 定稿：main_v4 居中网格版）
   渐变 Hero + 玻璃统计卡 + 分类导航 + 居中网格表格 + 悬浮批量条
   ============================================================ */
#bpmTodoPage { padding: 20px 24px 40px; }

/* ---- Hero ---- */
#bpmTodoPage .bt-hero { position: relative; background: linear-gradient(118deg, #667eea 0%, #764ba2 100%); padding: 30px 0 28px; overflow: hidden; border-radius: 16px; box-shadow: 0 10px 30px rgba(83,63,168,.12); }
#bpmTodoPage .bt-hero::before, #bpmTodoPage .bt-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
#bpmTodoPage .bt-hero::before { width: 420px; height: 420px; top: -260px; left: -120px; }
#bpmTodoPage .bt-hero::after { width: 300px; height: 300px; bottom: -180px; right: 8%; background: rgba(255,255,255,.06); }
#bpmTodoPage .bt-hero-in { position: relative; max-width: none; margin: 0 auto; padding: 0 28px; }
#bpmTodoPage .bt-hero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
#bpmTodoPage .bt-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 12px; padding: 5px 14px; border-radius: 999px; backdrop-filter: blur(6px); }
#bpmTodoPage .bt-pill .bt-dot { width: 6px; height: 6px; border-radius: 50%; background: #7dffb2; box-shadow: 0 0 6px #7dffb2; }
#bpmTodoPage .bt-title { color: #fff; font-size: 26px; font-weight: 700; margin: 12px 0 0; letter-spacing: .01em; }
#bpmTodoPage .bt-sub { color: rgba(255,255,255,.8); font-size: 13px; margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#bpmTodoPage .bt-sub b { color: #fff; }
#bpmTodoPage .bt-sub .bpm-total-badge, #bpmTodoPage .bt-sub .bpm-urgent-badge { margin: 0; }
#bpmTodoPage .bt-stats { display: flex; gap: 12px; }
#bpmTodoPage .bt-stat { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); border-radius: 14px; padding: 11px 18px; min-width: 104px; text-align: left; }
#bpmTodoPage .bt-stat .v { color: #fff; font-size: 23px; font-weight: 700; line-height: 1.1; }
#bpmTodoPage .bt-stat .v.warn { color: #ffd88a; }
#bpmTodoPage .bt-stat .k { color: rgba(255,255,255,.72); font-size: 12px; margin-top: 3px; }

/* ---- 主体 ---- */
#bpmTodoPage .bt-main { max-width: none; margin: 16px auto 0; padding: 0; position: relative; }

/* 分类导航 */
#bpmTodoPage .bt-cardhead { padding: 2px 18px 14px; border-bottom: 1px solid #f0f1f7; }
#bpmTodoPage .bt-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
#bpmTodoPage .bt-tab { position: relative; background: none; border: none; cursor: pointer; font-size: 14px; color: #6b6f80; padding: 13px 14px; display: inline-flex; align-items: center; gap: 7px; transition: color .15s; }
#bpmTodoPage .bt-tab .bt-tab-dot { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
#bpmTodoPage .bt-tab .bt-tab-n { font-size: 12px; background: #f1f2f8; color: #8b8fa3; border-radius: 999px; padding: 1px 8px; transition: all .15s; }
#bpmTodoPage .bt-tab:hover { color: #2a2d3a; }
#bpmTodoPage .bt-tab.active { color: #5b3fd4; font-weight: 600; }
#bpmTodoPage .bt-tab.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, #667eea, #9b6cf0); }
#bpmTodoPage .bt-tab.active .bt-tab-n { background: #ede9ff; color: #6d4fe0; }
#bpmTodoPage .bt-subrow { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 11px; align-items: center; }
#bpmTodoPage .bt-subpill { border: 1px solid #e6e3f5; background: #faf9ff; color: #6b6f80; font-size: 12.5px; border-radius: 999px; padding: 5px 13px; cursor: pointer; transition: all .15s; }
#bpmTodoPage .bt-subpill .bpm-subchip-count { opacity: .65; margin-left: 3px; }
#bpmTodoPage .bt-subpill:hover { border-color: #c9bcf2; color: #4a3aa0; }
#bpmTodoPage .bt-subpill.active { background: linear-gradient(118deg, #667eea, #8a63d2); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(102,126,234,.35); }
#bpmTodoPage .bt-subpill.active .bpm-subchip-count { opacity: .9; }

/* 工具行 */
#bpmTodoPage .bt-tools { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 0; gap: 14px; flex-wrap: wrap; }
#bpmTodoPage .bt-search { position: relative; flex: 0 0 300px; display: flex; align-items: center; background: #fff; border: 1px solid #e3e5ef; border-radius: 10px; padding: 4px 6px 4px 12px; gap: 6px; transition: border .15s, box-shadow .15s; }
#bpmTodoPage .bt-search:focus-within { border-color: #9b8cf0; box-shadow: 0 0 0 3px rgba(102,126,234,.14); }
#bpmTodoPage .bt-search input { border: none !important; outline: none; flex: 1; min-width: 0; background: transparent; font-size: 13px; padding: 6px 0; color: #2a2d3a; }
#bpmTodoPage .bt-search svg { color: #a0a4b5; flex: none; }
#bpmTodoPage .bt-tools-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* 表格卡（居中网格） */
#bpmTodoPage .bt-tablecard { background: #fff; border-radius: 16px; border: 1px solid #eceef6; box-shadow: 0 10px 30px rgba(83,63,168,.08); overflow: hidden; }
#bpmTodoPage .bt-grid { display: grid; grid-template-columns: 34px 168px minmax(0, 1fr) 128px 96px 96px; align-items: center; gap: 10px; padding: 0 18px; }
#bpmTodoPage .bt-thead { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f1f7; background: #fcfcfe; color: #8b8fa3; font-size: 12px; }
#bpmTodoPage .bt-thead .bt-h, #bpmTodoPage .bt-thead > div { text-align: center; }
#bpmTodoPage .bt-tbody { min-height: 60px; }
#bpmTodoPage .bt-empty { padding: 46px 0; text-align: center; color: #a0a4b5; font-size: 13px; }
#bpmTodoPage .bt-row { padding-top: 13px; padding-bottom: 13px; border-bottom: 1px solid #f4f5fa; cursor: pointer; transition: background .15s; animation: btRowIn .38s cubic-bezier(.22,1,.36,1) both; }
@keyframes btRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#bpmTodoPage .bt-row:last-child { border-bottom: none; }
#bpmTodoPage .bt-row:hover { background: #f8f7ff; }
#bpmTodoPage .bt-row.sel { background: #f1eeff; }
#bpmTodoPage .bt-row > div { text-align: center; }

/* 勾选框 */
#bpmTodoPage .bt-ckcell { display: flex; justify-content: center; }
#bpmTodoPage .bt-row .bpm-row-check { width: 16px; height: 16px; accent-color: #6d4fe0; cursor: pointer; }

/* 申请人 */
#bpmTodoPage .bt-who { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
#bpmTodoPage .bt-ava { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #ede9ff, #dcd2ff); color: #6d4fe0; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }
#bpmTodoPage .bt-nm { font-size: 13.5px; font-weight: 600; color: #2a2d3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 事项 */
#bpmTodoPage .bt-tt { min-width: 0; text-align: center; }
#bpmTodoPage .bt-t-line { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; overflow: hidden; }
#bpmTodoPage .bt-link { color: #2a2d3a; font-size: 13.5px; font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
#bpmTodoPage .bt-link:hover { color: #6d4fe0; }
#bpmTodoPage .bt-t-sub { justify-content: center; margin-top: 4px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
#bpmTodoPage .bt-node-chip { display: inline-flex; font-size: 11px; background: #f1f2f8; color: #8b8fa3; border-radius: 999px; padding: 1.5px 8px; flex: none; }
#bpmTodoPage .bt-date { font-size: 12px; color: #a0a4b5; flex: none; }
#bpmTodoPage .bpm-photo-badge { cursor: pointer; flex: none; }

/* 分类 / 等待 */
#bpmTodoPage .bt-cat { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: #6b6f80; }
#bpmTodoPage .bt-cat i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
#bpmTodoPage .bt-wait { font-size: 13px; color: #6b6f80; }
#bpmTodoPage .bt-wait b { font-size: 15px; font-weight: 700; color: #2a2d3a; }
#bpmTodoPage .bt-wait.old b { color: #d98a1f; }
#bpmTodoPage .bt-wait.veryold b { color: #d84f4f; }

/* 操作 */
#bpmTodoPage .bt-act { display: flex; align-items: center; justify-content: center; gap: 6px; }
#bpmTodoPage .bt-go { opacity: 0; transform: translateX(4px); transition: all .18s; border: 1px solid #d8cffa; background: #fff; color: #6d4fe0; font-size: 12.5px; padding: 5px 14px; border-radius: 999px; cursor: pointer; }
#bpmTodoPage .bt-row:hover .bt-go { opacity: 1; transform: none; }
#bpmTodoPage .bt-go:hover { background: linear-gradient(118deg, #667eea, #8a63d2); color: #fff; border-color: transparent; }
#bpmTodoPage .bt-ext { opacity: 0; transition: opacity .18s; border: none; background: none; color: #a0a4b5; cursor: pointer; padding: 4px; display: flex; }
#bpmTodoPage .bt-row:hover .bt-ext { opacity: 1; }
#bpmTodoPage .bt-ext:hover { color: #6d4fe0; }

/* 分页 */
#bpmTodoPage .bt-pagination { padding: 12px 18px; border-top: 1px solid #f0f1f7; }

/* 悬浮批量条 */
#bpmBatchBar { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 100px); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s; z-index: 96; }
#bpmBatchBar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
#bpmBatchBar .bpm-batch-bar { display: flex; align-items: center; gap: 14px; background: #23263a; color: #fff; border-radius: 999px; padding: 10px 12px 10px 22px; box-shadow: 0 16px 44px rgba(35,30,80,.4); }
#bpmBatchBar .bpm-batch-count { font-size: 13.5px; white-space: nowrap; }
#bpmBatchBar .bpm-batch-count b { color: #b9a8ff; font-size: 16px; }
#bpmBatchBar .bpm-batch-warn { font-size: 12px; background: rgba(255,196,90,.16); color: #ffd88a; border: 1px solid rgba(255,196,90,.35); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
#bpmBatchBar .bpm-btn-approve { background: linear-gradient(118deg, #667eea, #9b6cf0); border: none; color: #fff; font-size: 13.5px; font-weight: 600; padding: 9px 22px; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 18px rgba(102,126,234,.45); transition: transform .15s; }
#bpmBatchBar .bpm-btn-approve:hover { transform: translateY(-1px); }
#bpmBatchBar .bpm-btn-cancel { background: none; border: none; color: rgba(255,255,255,.6); font-size: 13px; cursor: pointer; padding: 6px 10px; }
#bpmBatchBar .bpm-btn-cancel:hover { color: #fff; }

/* ============================================================
   BPM 详情弹窗 v2（2026-09-11 定稿：detail_v4 同源风格）
   渐变 Hero + 白卡片 + 审批操作右侧粘性栏
   ============================================================ */
#bpmTodoDetailModal .modal.bpm-detail-modal { max-width: 1120px; width: 94%; border-radius: 18px; overflow: hidden; }
#bpmTodoDetailModal.bd-v2 .modal-header { background: transparent; border-bottom: none; position: absolute; top: 10px; right: 12px; z-index: 5; padding: 0; width: auto; }
#bpmTodoDetailModal.bd-v2 .modal-header h3 { display: none; }
#bpmTodoDetailModal.bd-v2 .modal-close { background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35); color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 1; }
#bpmTodoDetailModal.bd-v2 .modal-close:hover { background: rgba(255,255,255,.35); }

/* Hero */
#bpmTodoDetailModal .bd-hero { position: relative; background: linear-gradient(118deg, #667eea 0%, #764ba2 100%); padding: 26px 26px 24px; overflow: hidden; }
#bpmTodoDetailModal .bd-hero::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.08); top: -200px; left: -100px; pointer-events: none; }
#bpmTodoDetailModal .bd-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 12px; padding: 4px 13px; border-radius: 999px; }
#bpmTodoDetailModal .bd-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #7dffb2; box-shadow: 0 0 6px #7dffb2; }
#bpmTodoDetailModal .bd-title { color: #fff; font-size: 20px; font-weight: 700; margin-top: 10px; line-height: 1.4; }
#bpmTodoDetailModal .bd-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#bpmTodoDetailModal .bd-meta span { font-size: 12px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 3px 11px; }

/* 双栏：左内容 + 右审批栏 */
#bpmTodoDetailModal .bpm-detail-body.has-rail { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; padding: 18px; background: #f3f4fa; }
#bpmTodoDetailModal .bpm-detail-body.has-rail #bpmTodoDetailContent { min-width: 0; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .modal-footer { position: sticky; top: 0; margin: 0; border: 1px solid #eceef6; border-radius: 14px; background: #fff; box-shadow: 0 8px 26px rgba(83,63,168,.1); padding: 14px; }

/* 审批栏内容（v2 视觉） */
#bpmTodoDetailModal .modal-footer .bpm-approval-footer-inner { display: block; }
#bpmTodoDetailModal .modal-footer .bpm-approval-footer-top { border-bottom: 1px dashed #e6e3f5; padding-bottom: 10px; margin-bottom: 10px; }
#bpmTodoDetailModal .modal-footer .bpm-approval-footer-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #5b3fd4; }
#bpmTodoDetailModal .modal-footer .bpm-approval-textarea { width: 100%; border: 1px solid #e3e5ef; border-radius: 10px; padding: 9px 11px; font-size: 13px; resize: vertical; background: #fafaff; }
#bpmTodoDetailModal .modal-footer .bpm-approval-textarea:focus { outline: none; border-color: #9b8cf0; box-shadow: 0 0 0 3px rgba(102,126,234,.14); }
#bpmTodoDetailModal .modal-footer .bpm-approval-footer-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#bpmTodoDetailModal .modal-footer .bpm-btn-approve { background: linear-gradient(118deg, #667eea, #9b6cf0); border: none; color: #fff; font-weight: 600; box-shadow: 0 5px 14px rgba(102,126,234,.4); }
#bpmTodoDetailModal .modal-footer .bpm-btn-approve:hover { filter: brightness(1.06); }
#bpmTodoDetailModal .modal-footer .bpm-btn-reject { border: 1px solid #f3c1c1; color: #d84f4f; background: #fff; }
#bpmTodoDetailModal .modal-footer .bpm-btn-reject:hover { background: #fef2f2; }

/* 内容卡片翻新 */
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-detail-card { border-radius: 14px; border: 1px solid #eceef6; box-shadow: 0 6px 20px rgba(83,63,168,.06); }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-card-title { display: flex; align-items: center; gap: 8px; color: #4a3aa0; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-card-title::before { content: ''; width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(180deg, #667eea, #9b6cf0); }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-timeline-dot { background: linear-gradient(135deg, #667eea, #9b6cf0) !important; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-section-header { color: #4a3aa0; font-weight: 600; }

/* ============================================================
   BPM 详情 v4 完整版（2026-09-14）：流程轨道 + v4 卡片 + 时间线
   ============================================================ */
/* Hero 内全宽流程进度轨道 */
#bpmTodoDetailModal .bd-hero { padding-bottom: 0; }
#bpmTodoDetailModal .bd-track { position: relative; z-index: 2; display: flex; margin-top: 20px; padding-bottom: 22px; }
#bpmTodoDetailModal .bd-track .tnode { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; min-width: 0; }
#bpmTodoDetailModal .bd-track .tnode::before, #bpmTodoDetailModal .bd-track .tnode::after { content: ''; position: absolute; top: 12px; height: 2.5px; width: 50%; background: rgba(255,255,255,.25); }
#bpmTodoDetailModal .bd-track .tnode::before { left: 0; }
#bpmTodoDetailModal .bd-track .tnode::after { right: 0; }
#bpmTodoDetailModal .bd-track .tnode:first-child::before, #bpmTodoDetailModal .bd-track .tnode:last-child::after { display: none; }
#bpmTodoDetailModal .bd-track .tnode.done::before, #bpmTodoDetailModal .bd-track .tnode.done::after, #bpmTodoDetailModal .bd-track .tnode.cur::before { background: rgba(255,255,255,.92); }
#bpmTodoDetailModal .bd-track .tdot { width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.2); color: rgba(255,255,255,.75); border: 2px solid rgba(255,255,255,.35); z-index: 1; position: relative; }
#bpmTodoDetailModal .bd-track .tnode.done .tdot { background: #fff; color: #667eea; border-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
#bpmTodoDetailModal .bd-track .tnode.cur .tdot { background: #fff; color: #764ba2; border-color: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.25); }
#bpmTodoDetailModal .bd-track .tlbl { font-size: 12px; color: rgba(255,255,255,.72); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bpmTodoDetailModal .bd-track .tnode.done .tlbl { color: rgba(255,255,255,.95); }
#bpmTodoDetailModal .bd-track .tnode.cur .tlbl { color: #fff; font-weight: 700; }
#bpmTodoDetailModal .bd-track .tsub { font-size: 10.5px; color: rgba(255,255,255,.55); margin-top: -3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 主栏 v4 卡片 */
#bpmTodoDetailModal .bd-cards { display: flex; flex-direction: column; gap: 16px; }
#bpmTodoDetailModal .bd-card { background: #fff; border: 1px solid #eceef6; border-radius: 14px; padding: 20px 22px; box-shadow: 0 6px 20px rgba(83,63,168,.06); }
#bpmTodoDetailModal .bd-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
#bpmTodoDetailModal .bd-card-h h3 { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; color: #1e293b; }
#bpmTodoDetailModal .bd-card-h h3::before { content: ''; width: 4px; height: 15px; border-radius: 3px; background: linear-gradient(180deg, #667eea, #9b6cf0); }
#bpmTodoDetailModal .bd-tag { font-size: 11px; color: #94a3b8; white-space: nowrap; }
/* 大块字段卡：首字段渐变高亮 */
#bpmTodoDetailModal .bd-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#bpmTodoDetailModal .bd-stat { border: 1px solid #f0f2f8; background: linear-gradient(180deg, #fbfbff, #fff); border-radius: 12px; padding: 12px 14px; min-width: 0; transition: border-color .15s, box-shadow .15s, transform .15s; }
#bpmTodoDetailModal .bd-stat:hover { border-color: #d5d9f0; box-shadow: 0 3px 12px rgba(102,126,234,.1); transform: translateY(-1px); }
#bpmTodoDetailModal .bd-stat .sk { font-size: 11px; color: #94a3b8; margin-bottom: 6px; }
#bpmTodoDetailModal .bd-stat .sv { font-size: 14px; font-weight: 700; color: #1e293b; line-height: 1.5; word-break: break-all; }
#bpmTodoDetailModal .bd-stat .sv .bpm-edit-select, #bpmTodoDetailModal .bd-stat .sv .bpm-edit-text, #bpmTodoDetailModal .bd-stat .sv .bpm-edit-date { font-size: 13px; font-weight: 500; }
#bpmTodoDetailModal .bd-stat.hl { background: linear-gradient(135deg, #667eea, #764ba2); border: none; box-shadow: 0 6px 18px rgba(102,126,234,.3); }
#bpmTodoDetailModal .bd-stat.hl .sk { color: rgba(255,255,255,.75); }
#bpmTodoDetailModal .bd-stat.hl .sv { color: #fff; }
#bpmTodoDetailModal .bd-stat.hl .sv .bpm-edit-select, #bpmTodoDetailModal .bd-stat.hl .sv .bpm-edit-text { color: #fff; }
/* 长文本字段：整行 key-value */
#bpmTodoDetailModal .bd-kv { grid-column: 1 / -1; padding: 12px 2px 2px; border-top: 1px dashed #e8eaf2; }
#bpmTodoDetailModal .bd-kv .k { font-size: 11px; color: #94a3b8; margin-bottom: 3px; }
#bpmTodoDetailModal .bd-kv .k .req, #bpmTodoDetailModal .bd-kv .v a { color: #5a67d8; }
#bpmTodoDetailModal .bd-kv .v { font-size: 12.5px; font-weight: 600; color: #334155; line-height: 1.7; word-break: break-all; }

/* 审批历史 v4 竖向时间线 */
#bpmTodoDetailModal .bd-tl { position: relative; padding-left: 22px; }
#bpmTodoDetailModal .bd-tl::before { content: ''; position: absolute; left: 6px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #c7cff5, #e8eaf2); }
#bpmTodoDetailModal .bd-tl-item { position: relative; padding-bottom: 16px; }
#bpmTodoDetailModal .bd-tl-item:last-child { padding-bottom: 2px; }
#bpmTodoDetailModal .bd-tl-dot { position: absolute; left: -22px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid #c7cff5; }
#bpmTodoDetailModal .bd-tl-item.ok .bd-tl-dot, #bpmTodoDetailModal .bd-tl-item .bd-tl-dot { border-color: #c7cff5; }
#bpmTodoDetailModal .bd-tl-item:first-child .bd-tl-dot { border-color: transparent; background: linear-gradient(135deg, #667eea, #9b6cf0); box-shadow: 0 2px 8px rgba(102,126,234,.4); }
#bpmTodoDetailModal .bd-tl-item.rej .bd-tl-dot { border-color: #fff; background: #e5484d; box-shadow: 0 0 0 4px rgba(229,72,77,.18); }
#bpmTodoDetailModal .bd-tt { font-size: 13.5px; font-weight: 600; color: #1e293b; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
#bpmTodoDetailModal .bd-who2 { color: #475569; font-weight: 500; font-size: 12.5px; }
#bpmTodoDetailModal .bd-tm { font-size: 11.5px; color: #94a3b8; margin-top: 3px; }
#bpmTodoDetailModal .bd-memo { font-size: 12.5px; color: #334155; background: #f6f7fd; border: 1px solid #f0f2f8; border-radius: 10px; padding: 8px 12px; margin-top: 8px; line-height: 1.65; }
#bpmTodoDetailModal .bd-chip { font-size: 11px; padding: 2.5px 10px; border-radius: 20px; font-weight: 600; }
#bpmTodoDetailModal .bd-chip.ok { background: rgba(22,163,74,.12); color: #15803d; }
#bpmTodoDetailModal .bd-chip.cur2 { background: rgba(217,119,6,.12); color: #b45309; }

/* 右栏：快捷意见 + 辅助行 */
#bpmTodoDetailModal .bd-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#bpmTodoDetailModal .bd-quick button { font-size: 11.5px; color: #5a67d8; background: rgba(102,126,234,.1); border: none; border-radius: 999px; padding: 4.5px 12px; cursor: pointer; transition: all .15s; font-weight: 500; }
#bpmTodoDetailModal .bd-quick button:hover { background: rgba(102,126,234,.2); transform: translateY(-1px); }
#bpmTodoDetailModal .bd-side-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px 0; margin-top: 9px; border-top: 1px dashed #e8eaf2; font-size: 12.5px; color: #475569; }
#bpmTodoDetailModal .bd-side-row .link { color: #5a67d8; cursor: pointer; background: none; border: none; font-size: 12.5px; font-weight: 600; padding: 0; }
#bpmTodoDetailModal .bd-side-row .link:hover { text-decoration: underline; }

/* 窄屏回退 */
@media (max-width: 900px) {
    #bpmTodoDetailModal .bpm-detail-body.has-rail { grid-template-columns: 1fr; }
    #bpmTodoDetailModal .bd-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #bpmTodoDetailModal .bd-track .tsub { display: none; }
}

/* ============================================================
   BPM 详情 v4 补完（2026-09-14b）：右栏审批面板 / 老表格 / AI卡 / 申请人卡
   ============================================================ */
/* Hero 顶部双栏 + 申请人玻璃卡 */
#bpmTodoDetailModal .bd-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; position: relative; z-index: 2; }
#bpmTodoDetailModal .bd-hero-left { min-width: 0; }
#bpmTodoDetailModal .bd-who { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); border-radius: 14px; padding: 11px 16px; flex: none; max-width: 280px; }
#bpmTodoDetailModal .bd-who-ava { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.25); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; border: 2px solid rgba(255,255,255,.4); flex: none; }
#bpmTodoDetailModal .bd-who-in { min-width: 0; }
#bpmTodoDetailModal .bd-who-n { color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bpmTodoDetailModal .bd-who-n span { font-weight: 500; color: rgba(255,255,255,.7); font-size: 12px; }
#bpmTodoDetailModal .bd-who-d { color: rgba(255,255,255,.72); font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { #bpmTodoDetailModal .bd-hero-top { flex-direction: column; } #bpmTodoDetailModal .bd-who { max-width: none; } }

/* 右栏审批面板：纵排布局（修复 radio 竖排/textarea 被挤压） */
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-footer-inner { padding: 2px 4px; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-footer-top { display: block; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-info-row { display: block; margin-bottom: 8px; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-info-tag { display: flex; gap: 6px; align-items: center; margin: 4px 0; font-size: 12px; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-info-tag input { flex: 1; min-width: 0; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-radios { flex-wrap: wrap; row-gap: 8px; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-radio { flex-shrink: 0; white-space: nowrap; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-radio-label { white-space: normal; width: 100%; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-footer-body { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 0; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-textarea { width: 100%; flex: none; min-height: 64px; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-approval-footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0 0; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bpm-btn { justify-content: center; padding: 9px 0; }

/* 老式数据表（全表头型）v4 化 */
#bpmTodoDetailModal .bpm-data-table-wrap { border: 1px solid #eceef6; border-radius: 12px; overflow: auto; background: #fff; }
#bpmTodoDetailModal .bpm-data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#bpmTodoDetailModal .bpm-data-table th { background: #f6f5fd; color: #4a3aa0; font-weight: 600; padding: 9px 13px; text-align: left; white-space: nowrap; border: none; }
#bpmTodoDetailModal .bpm-data-table td { padding: 9px 13px; border: none; border-top: 1px solid #f0f2f8; color: #334155; }
#bpmTodoDetailModal .bpm-data-table tr:hover td { background: #fafbff; }

/* AI 审批意见卡 v4 化 */
#bpmTodoDetailModal .bpm-ai-card { background: linear-gradient(135deg, rgba(102,126,234,.09), rgba(118,75,162,.07)); border: 1px solid #dde2f5; border-radius: 14px; padding: 15px 17px; box-shadow: 0 6px 20px rgba(83,63,168,.06); }
#bpmTodoDetailModal .bpm-ai-card .bpm-context-title { font-size: 12.5px; font-weight: 700; color: #5a67d8; }
#bpmTodoDetailModal .bpm-ai-card .bpm-ai-summary { font-size: 12.5px; color: #334155; line-height: 1.75; }
#bpmTodoDetailModal .bpm-ai-card .bpm-context-body { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#bpmTodoDetailModal .bpm-ai-card .bpm-context-body span { font-size: 11.5px; color: #475569; background: rgba(255,255,255,.7); border: 1px solid #e8eaf2; border-radius: 999px; padding: 3px 11px; }
#bpmTodoDetailModal .bpm-ai-card .bpm-ai-reasons { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: #334155; line-height: 1.7; }
#bpmTodoDetailModal .bpm-ai-card .bpm-ai-finding { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #334155; background: rgba(255,255,255,.7); border: 1px solid #e8eaf2; border-radius: 10px; padding: 7px 11px; margin-top: 6px; }

/* ============================================================
   BPM 详情 v4 补完2（2026-09-14c）：rail 容器 / 辅助面板 / 申请人卡 / Hero 呼吸感
   ============================================================ */
#bpmTodoDetailModal .bpm-detail-body.has-rail .bd-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; min-width: 0; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .modal-footer { position: static; }
#bpmTodoDetailModal .bd-panel { background: #fff; border: 1px solid #eceef6; border-radius: 14px; padding: 15px 16px 17px; box-shadow: 0 6px 20px rgba(83,63,168,.06); }
#bpmTodoDetailModal .bd-panel h4 { font-size: 11.5px; font-weight: 700; color: #94a3b8; letter-spacing: .1em; margin: 0 0 4px; }
#bpmTodoDetailModal .bd-panel .bd-side-row { border-top: none; padding: 9px 0 2px; margin-top: 0; }
#bpmTodoDetailModal .bd-panel .bd-side-row + .bd-side-row { border-top: 1px dashed #f0f2f8; }
/* v112：.bd-switch 假开关随"标记待材料"一并移除（全站仅此一处使用） */
#bpmTodoDetailModal .bd-who-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#bpmTodoDetailModal .bd-who-ava2 { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; box-shadow: 0 4px 12px rgba(102,126,234,.3); flex: none; }
#bpmTodoDetailModal .bd-who-main { min-width: 0; flex: 1; }
#bpmTodoDetailModal .bd-who-nm { font-size: 15.5px; font-weight: 700; color: #1e293b; }
#bpmTodoDetailModal .bd-who-nm span { font-weight: 500; color: #94a3b8; font-size: 12.5px; }
#bpmTodoDetailModal .bd-who-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
#bpmTodoDetailModal .bd-wchip { font-size: 11.5px; color: #64748b; background: #f6f7fd; border: 1px solid #f0f2f8; border-radius: 999px; padding: 3px 11px; }
#bpmTodoDetailModal .bd-linkbtn { background: none; border: none; color: #5a67d8; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 10px; border-radius: 8px; margin-left: auto; }
#bpmTodoDetailModal .bd-linkbtn:hover { background: rgba(102,126,234,.08); }
#bpmTodoDetailModal .bd-who-more { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px dashed #e8eaf2; }
#bpmTodoDetailModal .bd-wkv .k { font-size: 11px; color: #94a3b8; margin-bottom: 2px; }
#bpmTodoDetailModal .bd-wkv .v { font-size: 12.5px; font-weight: 600; color: #334155; }
#bpmTodoDetailModal .bd-hero { padding: 28px 30px 0; }
#bpmTodoDetailModal .bd-title { font-size: 21px; }
#bpmTodoDetailModal .bd-track { gap: 6px; }
#bpmTodoDetailModal .bd-track .tlbl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }

/* ============================================================
   BPM 详情 v4 最终对齐（2026-09-14d）：逐项对齐 detail_v4 模板精确数值
   ============================================================ */
/* Hero：18px 圆角 / 28-34 内边距 / 右上光晕 / 23px 标题 */
#bpmTodoDetailModal .bd-hero { padding: 28px 34px 0; box-shadow: 0 8px 32px rgba(102,126,234,.25); }
#bpmTodoDetailModal .bd-hero::before { content: ''; position: absolute; top: -55%; right: -8%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); border-radius: 50%; pointer-events: none; }
#bpmTodoDetailModal .bd-pill { padding: 5px 14px; margin-bottom: 12px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 600; letter-spacing: .5px; backdrop-filter: blur(8px); }
#bpmTodoDetailModal .bd-pill .bd-pill-dot { width: 7px; height: 7px; background: #43e97b; box-shadow: 0 0 0 3px rgba(67,233,123,.3); }
#bpmTodoDetailModal .bd-title { font-size: 23px; font-weight: 800; letter-spacing: -.3px; }
#bpmTodoDetailModal .bd-meta { font-size: 12.5px; gap: 14px; color: rgba(255,255,255,.75); }
#bpmTodoDetailModal .bd-who { padding: 12px 18px; }
#bpmTodoDetailModal .bd-who-ava { width: 42px; height: 42px; font-size: 17px; }
#bpmTodoDetailModal .bd-who-n { font-size: 14.5px; }
#bpmTodoDetailModal .bd-track { margin-top: 24px; padding-bottom: 22px; }
#bpmTodoDetailModal .bd-track .tnode { gap: 8px; }
#bpmTodoDetailModal .bd-track .tlbl { white-space: normal; display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; overflow: visible; line-height: 1.4; text-align: center; font-size: 12px; }
/* 双栏：320px 右栏 / 20px 间距 / 20px 上边距 */
#bpmTodoDetailModal .bpm-detail-body.has-rail { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
#bpmTodoDetailModal .bpm-detail-body.has-rail .bd-rail { gap: 16px; top: 20px; }
/* 主栏卡片：16px 圆角 / 22-24 内边距 */
#bpmTodoDetailModal .bd-card { border-radius: 16px; padding: 22px 24px; border-color: #e8eaf2; box-shadow: 0 2px 10px rgba(80,90,180,.05); }
#bpmTodoDetailModal .bd-card-h { margin-bottom: 16px; }
#bpmTodoDetailModal .bd-stat-row { gap: 10px; }
#bpmTodoDetailModal .bd-stat { border-radius: 13px; padding: 14px 15px; }
#bpmTodoDetailModal .bd-stat .sk { margin-bottom: 7px; }
#bpmTodoDetailModal .bd-stat .sv { font-size: 14.5px; }
#bpmTodoDetailModal .bd-kv { margin-top: 14px; padding: 13px 2px 0; }
/* 时间线 */
#bpmTodoDetailModal .bd-tl-item { padding-bottom: 18px; }
/* 右栏面板：16px 圆角 / 17-19 内边距 */
#bpmTodoDetailModal .bd-panel { border-radius: 16px; padding: 17px 17px 19px; border-color: #e8eaf2; box-shadow: 0 2px 10px rgba(80,90,180,.05); }
#bpmTodoDetailModal .bd-panel h4 { margin: 0 0 12px; }
#bpmTodoDetailModal .bd-panel .ai-card, #bpmTodoDetailModal .bpm-ai-card { border-radius: 13px; padding: 13px 14px; }
/* 审批操作：86px 意见框 / 11px 圆角输入 / 模板按钮规格 */
#bpmTodoDetailModal .bpm-approval-textarea { min-height: 86px; border-radius: 11px; padding: 11px 13px; font-size: 13px; background: #fafbff; border-color: #e8eaf2; resize: vertical; }
#bpmTodoDetailModal .bpm-approval-textarea:focus { border-color: #a5b0e8; box-shadow: 0 0 0 3px rgba(102,126,234,.12); background: #fff; outline: none; }
#bpmTodoDetailModal .bpm-approval-footer-actions { gap: 9px; margin-top: 13px; padding: 0; }
#bpmTodoDetailModal .bpm-btn { padding: 10px 0; border-radius: 11px; font-size: 13px; font-weight: 700; }
#bpmTodoDetailModal .bpm-btn-approve { box-shadow: 0 4px 14px rgba(102,126,234,.35); }
#bpmTodoDetailModal .bpm-btn-approve:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(102,126,234,.45); }
#bpmTodoDetailModal .bd-hero { position: relative; overflow: hidden; }

/* ============================================================
   BPM 详情 v4 结构对齐（2026-09-14e）：申请人竖排卡 / stat 图标 / kv横排 / 三面板
   ============================================================ */
/* 申请人卡：头像竖排在上，更多信息右下 */
#bpmTodoDetailModal .bd-card .bd-who-ava2 { margin-bottom: 12px; }
#bpmTodoDetailModal .bd-card .bd-who-nm { margin: 0 0 6px; }
#bpmTodoDetailModal .bd-card .bd-who-chips { margin-top: 0; }
#bpmTodoDetailModal .bd-who-ft { display: flex; justify-content: flex-end; margin-top: 12px; }
/* 申请内容 stat：图标方块 */
#bpmTodoDetailModal .bd-stat .sk { display: flex; align-items: center; gap: 5px; }
#bpmTodoDetailModal .bd-stat .sk .ic { width: 20px; height: 20px; border-radius: 6px; background: rgba(102,126,234,.12); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex: none; color: #5a67d8; font-weight: 700; }
#bpmTodoDetailModal .bd-stat.hl .sk .ic { background: rgba(255,255,255,.2); color: #fff; }
/* 横排 kv 行 */
#bpmTodoDetailModal .bd-kvline { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px dashed #e8eaf2; }
#bpmTodoDetailModal .bd-kvline .bd-kv { grid-column: auto; border-top: none; padding: 0; margin: 0; }
/* Hero meta：纯文本 + 加粗值 */
#bpmTodoDetailModal .bd-meta span { background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
#bpmTodoDetailModal .bd-meta b { color: rgba(255,255,255,.95); font-weight: 600; }
/* 右栏面板嵌审批 footer：去掉内层标题与厚底样式 */
#bpmTodoDetailModal .bd-panel .modal-footer { padding: 0; box-shadow: none; background: transparent; border: none; }
#bpmTodoDetailModal .bd-panel-op .bpm-approval-footer-top { display: none; }
#bpmTodoDetailModal .bd-panel-op .bpm-approval-footer-inner { padding: 0; }

/* ============================================================
   BPM 详情 v4 布局修正（2026-09-14f）：Hero 全宽跨双栏；主栏回退原版合并卡
   ============================================================ */
#bpmTodoDetailModal .bpm-detail-body.has-rail .bd-hero { grid-column: 1 / -1; }
#bpmTodoDetailModal .bpm-detail-body .bd-hero { margin-bottom: 0; }
/* 回退竖排申请人卡覆盖（恢复横排 who-line 原样） */
#bpmTodoDetailModal .bd-card .bd-who-ava2 { margin-bottom: 0; }
#bpmTodoDetailModal .bd-card .bd-who-nm { margin: 0; }
#bpmTodoDetailModal .bd-card .bd-who-chips { margin-top: 5px; }

/* ============================================================
   BPM 详情 v4 布局修正2（2026-09-14g）：模板同构 hero > cols(main+rail)
   ============================================================ */
#bpmTodoDetailModal .bpm-detail-body.has-rail { display: block; grid-template-columns: none; gap: 0; }
#bpmTodoDetailModal .bd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-top: 20px; }
#bpmTodoDetailModal .bd-cols #bpmTodoDetailContent { min-width: 0; }
#bpmTodoDetailModal .bd-cols:not(:has(.bd-rail)) { display: block; margin-top: 0; }

/* 流程轨道省略节点：紧凑圆点 */
#bpmTodoDetailModal .bd-track .tnode.tskip { flex: 0 0 34px; }
#bpmTodoDetailModal .bd-track .tnode.tskip::before, #bpmTodoDetailModal .bd-track .tnode.tskip::after { background: rgba(255,255,255,.25); }
#bpmTodoDetailModal .bd-track .tnode.tskip .tdot { width: 22px; height: 22px; font-size: 10px; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }
#bpmTodoDetailModal .bd-track .tnode.tskip { flex: 0 0 46px; }
#bpmTodoDetailModal .bd-track .tnode.tskip .tlbl { font-size: 10.5px; color: rgba(255,255,255,.65); }

/* ============================================================
   发起人信息卡重做（2026-09-14h）：左 profile 面板 + 右信息网格
   ============================================================ */
#bpmTodoDetailModal .bd-profile { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 18px; align-items: stretch; }
#bpmTodoDetailModal .bd-profile-side { position: relative; overflow: hidden; background: linear-gradient(160deg, #667eea, #764ba2); border-radius: 14px; padding: 24px 18px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 8px 22px rgba(102,126,234,.26); }
#bpmTodoDetailModal .bd-profile-side::before { content: ''; position: absolute; top: -46px; right: -46px; width: 130px; height: 130px; background: rgba(255,255,255,.12); border-radius: 50%; }
#bpmTodoDetailModal .bd-profile-side::after { content: ''; position: absolute; bottom: -56px; left: -30px; width: 110px; height: 110px; background: rgba(255,255,255,.08); border-radius: 50%; }
#bpmTodoDetailModal .bd-profile-ava { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.45); color: #fff; font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
#bpmTodoDetailModal .bd-profile-nm { position: relative; z-index: 1; color: #fff; font-size: 16.5px; font-weight: 800; margin-top: 9px; letter-spacing: .02em; }
#bpmTodoDetailModal .bd-profile-id { position: relative; z-index: 1; color: rgba(255,255,255,.78); font-size: 12px; margin-top: 2px; }
#bpmTodoDetailModal .bd-profile-tag { position: relative; z-index: 1; margin-top: 11px; font-size: 10.5px; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 2.5px 13px; letter-spacing: .1em; }
#bpmTodoDetailModal .bd-profile-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-content: start; min-width: 0; }
#bpmTodoDetailModal .bd-pitem { background: #f9faff; border: 1px solid #eef0f8; border-radius: 11px; padding: 10px 13px; min-width: 0; transition: border-color .15s, background .15s; }
#bpmTodoDetailModal .bd-pitem:hover { border-color: #dfe3f3; background: #f5f7ff; }
#bpmTodoDetailModal .bd-pitem .k { font-size: 11px; color: #94a3b8; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
#bpmTodoDetailModal .bd-pitem .k::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #9b6cf0); flex: none; }
#bpmTodoDetailModal .bd-pitem .v { font-size: 12.5px; font-weight: 600; color: #334155; line-height: 1.6; word-break: break-all; }
#bpmTodoDetailModal .bd-pitem.full { grid-column: 1 / -1; }
@media (max-width: 860px) {
    #bpmTodoDetailModal .bd-profile { grid-template-columns: 1fr; }
    #bpmTodoDetailModal .bd-profile-side { flex-direction: row; text-align: left; gap: 12px; padding: 16px 18px; }
    #bpmTodoDetailModal .bd-profile-ava { width: 46px; height: 46px; font-size: 19px; flex: none; }
    #bpmTodoDetailModal .bd-profile-nm { margin-top: 0; }
    #bpmTodoDetailModal .bd-profile-tag { margin-top: 0; margin-left: auto; }
    #bpmTodoDetailModal .bd-profile-main { grid-template-columns: 1fr; }
}

/* 剩余字段安静网格：跟随一行式申请人卡 */
#bpmTodoDetailModal .bd-kvgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 14px; padding-top: 13px; border-top: 1px dashed #e8eaf2; }
#bpmTodoDetailModal .bd-kvgrid .bd-pitem { background: #fbfbff; }
@media (max-width: 640px) { #bpmTodoDetailModal .bd-kvgrid { grid-template-columns: 1fr; } }

/* ============================================================
   详情页整页节奏统一（2026-09-14i）：遗留区块 v4 化 + 统一间距
   ============================================================ */
/* 左栏所有直接子块统一 16px 纵向节奏 */
#bpmTodoDetailModal #bpmTodoDetailContent > * + * { margin-top: 16px; }
/* 当前待处理 / 流程图：与 bd-card 同风格 */
#bpmTodoDetailModal .bpm-pending-section, #bpmTodoDetailModal .bpm-flow-section { background: #fff; border: 1px solid #e8eaf2; border-radius: 16px; padding: 20px 24px; box-shadow: 0 2px 10px rgba(80,90,180,.05); }
#bpmTodoDetailModal .bpm-pending-section .bpm-section-header, #bpmTodoDetailModal .bpm-flow-section .bpm-section-header { margin-bottom: 12px; }

/* 详情页层级（2026-09-14j）：审批历史默认折叠，弱化卡头 */
#bpmTodoDetailModal .bd-tl.collapsed .bd-tl-item:nth-child(n+3) { display: none; }
#bpmTodoDetailModal .bd-tl.collapsed { padding-bottom: 0; }
#bpmTodoDetailModal .bd-card-h .bd-linkbtn { flex: none; }

/* v70（2026-09-14k）：hero 一句话重点摘要条 —— 布局零改动，纯增量，可随时移除 */
#bpmTodoDetailModal .bd-lead {
    margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px; padding: 10px 16px;
    color: #fff; font-size: 14.5px; line-height: 1.6; text-shadow: none;
}
#bpmTodoDetailModal .bd-lead b { font-weight: 800; }
#bpmTodoDetailModal .bd-lead-tag {
    flex: none; background: #fff; color: #667eea;
    font-size: 11px; font-weight: 800; letter-spacing: .08em;
    border-radius: 99px; padding: 2px 10px;
}

/* v71（2026-09-14l）减乱：meta 行已删（与摘要条重复），摘要条升级为 hero 副标题；处理意见卡成为全页唯一强调块 */
#bpmTodoDetailModal .bd-lead { margin-top: 12px; font-size: 15px; padding: 12px 18px; }
/* 右栏：处理意见 = 全页视觉锚点（唯一彩色卡），AI 预审/辅助操作退为灰阶陪衬 */
#bpmTodoDetailModal .bd-panel-op { background: linear-gradient(180deg,#f7f8ff,#f2f4ff); border: 1.5px solid #c9cdf5; box-shadow: 0 6px 18px rgba(102,126,234,.12); }
#bpmTodoDetailModal .bd-panel-op h4 { color: #667eea; }
#bpmTodoDetailModal .bd-panel-ai h4, #bpmTodoDetailModal .bd-panel:not(.bd-panel-op):not(.bd-panel-ai) h4 { color: #9a97ab; font-weight: 600; }

/* v72（2026-09-14m）左栏文档化：拆掉卡片壳，N 个盒子合成一份连续文档（内容不折叠、不减量） */
#bpmTodoDetailModal .bd-cards { gap: 0; background: #fff; border: 1px solid #e8eaf2; border-radius: 16px; padding: 2px 26px 10px; box-shadow: 0 2px 10px rgba(80,90,180,.05); }
#bpmTodoDetailModal .bd-cards > * { background: none !important; border: none; border-radius: 0; box-shadow: none !important; padding: 18px 0; }
#bpmTodoDetailModal .bd-cards > * + * { border-top: 1px solid #eef0f6; }
#bpmTodoDetailModal .bd-cards > *:last-child { padding-bottom: 8px; }

/* ===== v73（2026-09-14n）一屏减乱：依据 DOM 实测（内容总高1435 vs 视口720，8个平权块）做减法 ===== */
/* 1) hero 减高：标题带收紧，轨道节点单行化、去副标 */
#bpmTodoDetailModal .bd-hero { padding-top: 20px !important; }
#bpmTodoDetailModal .bd-track { margin-top: 12px !important; padding-bottom: 12px !important; }
#bpmTodoDetailModal .bd-track .tdot { width: 20px; height: 20px; font-size: 11px; }
#bpmTodoDetailModal .bd-track .tnode { gap: 5px; }
#bpmTodoDetailModal .bd-track .tlbl { white-space: nowrap !important; display: block; overflow: hidden; text-overflow: ellipsis; }
#bpmTodoDetailModal .bd-track .tsub { display: none !important; }
/* 2) 摘要条紧凑 */
#bpmTodoDetailModal .bd-lead { margin-top: 10px !important; padding: 9px 14px !important; font-size: 14px !important; }
/* 3) 处理意见卡吸顶：滚到任何位置，同意/退回永远可见 */
#bpmTodoDetailModal .bd-rail { align-self: start; }
#bpmTodoDetailModal .bd-panel-op { position: sticky; top: 12px; z-index: 5; }
/* 4) 隐藏"当前待处理"执行人信息卡（审批人视角的噪音，207px） */
#bpmTodoDetailModal .bpm-pending-section { display: none !important; }
/* 5) 表格行距压缩（申请内容卡 447px→目标 ~300） */
#bpmTodoDetailModal .bd-cards td, #bpmTodoDetailModal .bd-cards th { padding-top: 8px !important; padding-bottom: 8px !important; }
/* 6) 流程图折叠条压矮 */
#bpmTodoDetailModal .bpm-flow-section { padding: 12px 18px !important; }
/* v73 补充：kv 网格两列改四列、stat 行压矮 —— 申请内容卡 447 → 目标 ~300 */
#bpmTodoDetailModal .bd-kvgrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px 14px !important; margin-top: 10px !important; padding-top: 10px !important; }
#bpmTodoDetailModal .bd-kvgrid .bd-kv { padding: 0 !important; border-top: none !important; }
#bpmTodoDetailModal .bd-kvgrid .bd-kv .v { line-height: 1.5 !important; }
#bpmTodoDetailModal .bd-stat-row { gap: 8px !important; }
#bpmTodoDetailModal .bd-stat-row .hl { padding: 8px 12px !important; }
@media(max-width:900px){ #bpmTodoDetailModal .bd-kvgrid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }

/* ===== v78（2026-09-14o）待办列表去别扭：标题/子行左对齐（原为居中，长短不齐） ===== */
#bpmTodoPage .bt-tt { text-align: left; }
#bpmTodoPage .bt-t-line { justify-content: flex-start; }
#bpmTodoPage .bt-t-sub { justify-content: flex-start; }

/* ===== v79（2026-09-14p）待办列表整体重设计：5 列、全左对齐、等待徽章化 ===== */
#bpmTodoPage .bt-grid { grid-template-columns: 40px 140px minmax(0,1fr) 96px 128px; gap: 14px; padding: 0 20px; }
#bpmTodoPage .bt-thead { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #e8eaf2; }
#bpmTodoPage .bt-h { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: #9a9eaf; text-align: left; }
#bpmTodoPage .bt-h-r, #bpmTodoPage .bt-act { text-align: right; }
#bpmTodoPage .bt-act { justify-content: flex-end; }
#bpmTodoPage .bt-who { justify-content: flex-start; }
#bpmTodoPage .bt-row { padding: 12px 20px; }
/* 分类 → 色点并入事项列（hover 看全名） */
#bpmTodoPage .bt-catdot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
#bpmTodoPage .bt-t-line a.bt-link { font-size: 14px; font-weight: 600; }
/* 等待天数 → 胶囊徽章 */
#bpmTodoPage .bt-wait { justify-self: start; display: inline-flex; align-items: baseline; gap: 3px; background: #f4f5fa; border-radius: 10px; padding: 5px 12px; font-size: 12px; color: #8b8fa3; }
#bpmTodoPage .bt-wait .num { font-size: 16px; font-weight: 800; color: #2a2d3a; }
#bpmTodoPage .bt-wait.old { background: #fdf3e3; }
#bpmTodoPage .bt-wait.old .num { color: #d98a1f; }
#bpmTodoPage .bt-wait.veryold { background: #fdeaea; }
#bpmTodoPage .bt-wait.veryold .num { color: #d84f4f; }

/* ===== v80（2026-09-14q）待办列表卡片化重构：砍表头砍列，行→独立卡片流 ===== */
#bpmTodoPage .bt-thead { display: flex; align-items: center; gap: 12px; padding: 2px 22px 12px; border-bottom: none; background: transparent; }
#bpmTodoPage .bt-thead .bt-h { font-size: 12px; font-weight: 500; color: #a2a6b5; letter-spacing: 0; }
#bpmTodoPage .bt-tbody { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; background: transparent; }
#bpmTodoPage .bt-tbody .bt-empty { padding: 48px 0; text-align: center; color: #a2a6b5; }
#bpmTodoPage .bt-row.bt-card { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 0 14px; align-items: center; background: #fff; border: 1px solid #e9ebf3; border-bottom: 1px solid #e9ebf3; border-radius: 14px; padding: 13px 18px; box-shadow: 0 1px 2px rgba(31, 35, 65, .04); transition: border-color .18s, box-shadow .18s, transform .18s; }
#bpmTodoPage .bt-row.bt-card:hover { border-color: #c7c0f4; box-shadow: 0 8px 22px rgba(102, 118, 234, .13); transform: translateY(-1px); }
#bpmTodoPage .bt-row.bt-card.sel { border-color: #667eea; background: #f7f6ff; box-shadow: 0 4px 14px rgba(102, 118, 234, .10); }
#bpmTodoPage .bt-ckcell { display: flex; align-items: center; justify-content: center; }
#bpmTodoPage .bt-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#bpmTodoPage .bt-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#bpmTodoPage .bt-l1 .bt-ava { width: 30px; height: 30px; border-radius: 50%; font-size: 12.5px; }
#bpmTodoPage .bt-l1 .bt-nm { font-size: 15px; font-weight: 700; color: #262a3c; margin-right: 2px; }
#bpmTodoPage .bt-l2 { display: flex; align-items: center; gap: 8px; padding-left: 38px; min-width: 0; }
#bpmTodoPage .bt-l2 .bt-catdot { flex: none; }
#bpmTodoPage .bt-l2 .bt-link { font-size: 13px; font-weight: 500; color: #828698; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bpmTodoPage .bt-l2 .bt-link:hover { color: #667eea; }
#bpmTodoPage .bt-l2 .bt-date { font-size: 12px; color: #a7abb8; flex: none; }
#bpmTodoPage .bt-side { display: flex; align-items: center; gap: 12px; flex: none; }
#bpmTodoPage .bt-side .bt-wait { justify-self: auto; }

/* ===== v81（2026-09-14r）卡片压成单行紧凑：消灭中部大片空白 ===== */
#bpmTodoPage .bt-row.bt-card { padding: 10px 16px; }
#bpmTodoPage .bt-info { flex-direction: row; align-items: center; gap: 14px; }
#bpmTodoPage .bt-l1 { flex-wrap: nowrap; flex: none; max-width: 60%; }
#bpmTodoPage .bt-l2 { flex: 1 1 auto; min-width: 0; padding-left: 0; }
#bpmTodoPage .bt-l2 .bt-link { flex: 0 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: #6b7085; }
#bpmTodoPage .bt-l2 .bt-link:hover { color: #667eea; }

/* ===== v82（2026-09-14s）双列卡片网格：按内容量定卡宽，根治大段空白 ===== */
#bpmTodoPage .bt-tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 10px; align-items: stretch; }
#bpmTodoPage .bt-tbody .bt-empty { grid-column: 1 / -1; }
#bpmTodoPage .bt-row.bt-card { grid-template-columns: 22px minmax(0, 1fr) auto; padding: 11px 14px; gap: 0 10px; }
#bpmTodoPage .bt-info { flex-direction: column; gap: 5px; justify-content: center; }
#bpmTodoPage .bt-l1 { flex-wrap: wrap; max-width: none; gap: 6px; }
#bpmTodoPage .bt-l1 .bt-ava { width: 24px; height: 24px; border-radius: 50%; font-size: 11px; }
#bpmTodoPage .bt-l1 .bt-nm { font-size: 14px; }
#bpmTodoPage .bt-l2 { padding-left: 30px; }
#bpmTodoPage .bt-l2 .bt-link { font-size: 12.5px; }
#bpmTodoPage .bt-side { flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
#bpmTodoPage .bt-side .bt-wait { padding: 3px 10px; }
#bpmTodoPage .bt-side .bt-wait .num { font-size: 14px; }

/* ============================================================
   BPM 待办列表 - v89 表格式（替换卡片流）
   一行一单、固定列宽、细分隔线，扫读优先；无卡片阴影/圆角
   ============================================================ */
#bpmTodoPage .bt-thead,
#bpmTodoPage .bt-tbody .bt-row {
    --bt-cols: 30px 108px minmax(0, 1.3fr) minmax(150px, 1.2fr) minmax(110px, .8fr) 52px 54px 112px;
}
#bpmTodoPage .bt-tbody {
    display: block;
    padding: 0 18px 10px;
    background: transparent;
    min-height: 60px;
}
#bpmTodoPage .bt-tbody .bt-empty { grid-column: auto; }
#bpmTodoPage .bt-thead {
    display: grid;
    grid-template-columns: var(--bt-cols);
    gap: 0 12px;
    align-items: center;
    padding: 2px 18px 10px;
    border-bottom: 1px solid #eceef5;
    background: transparent;
}
#bpmTodoPage .bt-thead .bt-h,
#bpmTodoPage .bt-thead > div { text-align: left; }
#bpmTodoPage .bt-thead .bt-h { font-size: 12px; font-weight: 600; color: #9a9eaf; letter-spacing: 0; }
#bpmTodoPage .bt-thead .bt-h-r { text-align: right; }
#bpmTodoPage .bt-thead .bt-ckcell { display: flex; justify-content: center; }
#bpmTodoPage .bt-row {
    display: grid;
    grid-template-columns: var(--bt-cols);
    gap: 0 12px;
    align-items: center;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f2f3f8;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
    transition: background .15s;
    animation: btRowIn .3s cubic-bezier(.22,1,.36,1) both;
}
#bpmTodoPage .bt-row > div { text-align: left; }
#bpmTodoPage .bt-row:last-child { border-bottom: 1px solid #f2f3f8; }
#bpmTodoPage .bt-row:hover { background: #f8f7ff; }
#bpmTodoPage .bt-row.sel { background: #f1eeff; }
#bpmTodoPage .bt-ckcell { display: flex; align-items: center; justify-content: center; }
#bpmTodoPage .bt-row .bpm-row-check { width: 16px; height: 16px; accent-color: #6d4fe0; cursor: pointer; }
/* 提交人 */
#bpmTodoPage .bt-c-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
#bpmTodoPage .bt-c-person .bt-ava { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #ede9ff, #dcd2ff); color: #6d4fe0; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }
#bpmTodoPage .bt-c-person .bt-nm { font-size: 13.5px; font-weight: 600; color: #2a2d3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 标题 */
#bpmTodoPage .bt-c-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
#bpmTodoPage .bt-catdot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
#bpmTodoPage .bt-c-title .bt-link { min-width: 0; font-size: 13.5px; font-weight: 600; color: #3a3e4f; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bpmTodoPage .bt-c-title .bt-link:hover { color: #6d4fe0; text-decoration: underline; }
/* 类型/标记徽章列 */
#bpmTodoPage .bt-c-type { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
#bpmTodoPage .bt-c-type .bpm-leave-chip { flex: none; }
/* 当前节点 */
#bpmTodoPage .bt-c-node { font-size: 12.5px; color: #6b7085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 提交日期 / 等待天数 */
#bpmTodoPage .bt-c-date { font-size: 12px; color: #a0a4b5; white-space: nowrap; }
#bpmTodoPage .bt-c-wait { font-size: 12px; color: #8b8fa3; white-space: nowrap; }
#bpmTodoPage .bt-c-wait b { font-size: 14px; font-weight: 700; color: #2a2d3a; margin-right: 1px; }
#bpmTodoPage .bt-c-wait.old b { color: #d98a1f; }
#bpmTodoPage .bt-c-wait.veryold b { color: #d84f4f; }
/* 操作列 */
#bpmTodoPage .bt-c-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
#bpmTodoPage .bt-go { border: 1px solid #d8cffa; background: #fff; color: #6d4fe0; font-size: 12.5px; padding: 4px 13px; border-radius: 999px; cursor: pointer; transition: all .15s; }
#bpmTodoPage .bt-go:hover { background: linear-gradient(118deg, #667eea, #8a63d2); color: #fff; border-color: transparent; }
#bpmTodoPage .bt-ext { border: none; background: none; color: #a0a4b5; cursor: pointer; padding: 4px; display: flex; transition: color .15s; }
#bpmTodoPage .bt-ext:hover { color: #6d4fe0; }

/* ============================================================
   BPM 待办列表 - v91 真表格布局（列间距严格等距）
   列宽贴合内容，所有列间距由统一 border-spacing 控制
   ============================================================ */
#bpmTodoPage #bpmTodoListWrap {
    display: table;
    width: 100%;
    table-layout: auto;
    border-spacing: 14px 0;
    padding: 0 12px 14px;
    overflow-x: visible;
}
#bpmTodoPage .bt-thead { display: table-header-group; padding: 0; border-bottom: none; }
#bpmTodoPage .bt-tbody { display: table-row-group; padding: 0; }
/* 空态/加载态退回块级布局 */
#bpmTodoPage .bt-tbody:has(.bt-empty) { display: block; padding: 0 4px 10px; }
#bpmTodoPage .bt-row { display: table-row; padding: 0; gap: 0; border-bottom: none; }
#bpmTodoPage .bt-thead > div,
#bpmTodoPage .bt-row > div { display: table-cell; vertical-align: middle; text-align: left; }
#bpmTodoPage .bt-thead > div { padding: 4px 0 9px; border-bottom: 1px solid #eceef5; }
#bpmTodoPage .bt-row > div { padding: 10px 0; border-bottom: 1px solid #f2f3f8; }
#bpmTodoPage .bt-ckcell { text-align: center; }
/* 列宽意图：标题/类型/节点占大头，其余列贴内容 */
#bpmTodoPage .bt-thead > div:nth-child(3) { width: 30%; }
#bpmTodoPage .bt-thead > div:nth-child(4) { width: 22%; }
#bpmTodoPage .bt-thead > div:nth-child(5) { width: 16%; }
/* 单元格内的行内元素适配 */
#bpmTodoPage .bt-c-person .bt-ava { display: inline-flex; vertical-align: middle; margin-right: 8px; }
#bpmTodoPage .bt-c-person .bt-nm { display: inline-block; vertical-align: middle; max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
#bpmTodoPage .bt-c-title { max-width: 300px; }
#bpmTodoPage .bt-c-title .bt-link { display: inline-block; vertical-align: middle; max-width: 100%; }
#bpmTodoPage .bt-c-type { white-space: nowrap; }
#bpmTodoPage .bt-c-type > * { margin-right: 6px; }
#bpmTodoPage .bt-c-type > *:last-child { margin-right: 0; }
#bpmTodoPage .bt-c-node { max-width: 220px; }
#bpmTodoPage .bt-node-txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bpmTodoPage .bt-c-date, #bpmTodoPage .bt-c-wait { white-space: nowrap; }
#bpmTodoPage .bt-c-act { text-align: right; white-space: nowrap; }
#bpmTodoPage .bt-ext { display: inline-flex; vertical-align: middle; }

/* ============================================================
   BPM 待办列表 - v92 表格收缩到内容宽（内容贴边，间隙全等距）
   ============================================================ */
#bpmTodoPage #bpmTodoListWrap {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    table-layout: auto;
}
/* 撤销 v91 的列宽意图，让所有列贴合内容 */
#bpmTodoPage .bt-thead > div:nth-child(3),
#bpmTodoPage .bt-thead > div:nth-child(4),
#bpmTodoPage .bt-thead > div:nth-child(5) { width: auto; }

/* ============================================================
   BPM 待办列表 - v93 标准通栏表格（铺满、无列间缝隙、均匀内边距）
   ============================================================ */
#bpmTodoPage #bpmTodoListWrap {
    width: 100%;
    max-width: none;
    margin: 0;
    border-spacing: 0;
    table-layout: fixed;
    padding: 0 14px 12px;
}
/* 各列按比例铺满：4+10+24+16+20+8+7+11 = 100 */
#bpmTodoPage .bt-thead > div:nth-child(1) { width: 4%; }
#bpmTodoPage .bt-thead > div:nth-child(2) { width: 10%; }
#bpmTodoPage .bt-thead > div:nth-child(3) { width: 24%; }
#bpmTodoPage .bt-thead > div:nth-child(4) { width: 16%; }
#bpmTodoPage .bt-thead > div:nth-child(5) { width: 20%; }
#bpmTodoPage .bt-thead > div:nth-child(6) { width: 8%; }
#bpmTodoPage .bt-thead > div:nth-child(7) { width: 7%; }
#bpmTodoPage .bt-thead > div:nth-child(8) { width: 11%; }
#bpmTodoPage .bt-thead > div { padding: 4px 8px 9px; }
#bpmTodoPage .bt-row > div { padding: 10px 8px; }
#bpmTodoPage .bt-c-person .bt-nm { max-width: 100%; }
#bpmTodoPage .bt-c-title, #bpmTodoPage .bt-c-node, #bpmTodoPage .bt-c-type { overflow: hidden; }

/* ============================================================
   BPM 待办列表 - v94 空态/加载态修复
   表格布局下 bt-empty 会被匿名单元格挤进第一列 → 容器整体退回块级
   ============================================================ */
#bpmTodoPage #bpmTodoListWrap:has(.bt-empty) { display: block; }
#bpmTodoPage #bpmTodoListWrap:has(.bt-empty) .bt-thead { display: none; }
#bpmTodoPage .bt-tbody:has(.bt-empty) { display: block; padding: 46px 0; }
#bpmTodoPage .bt-tbody .bt-empty { display: block; width: 100%; text-align: center; }

/* ============================================================
   BPM 待办列表 - v95 表头勾选列布局修复
   旧迭代遗留 `#bpmTodoPage .bt-thead .bt-ckcell { display:flex }`（优先级 1-2-0）
   压过 v91 的 `.bt-thead > div { display:table-cell }`（1-1-1），
   表头首格脱离 table 布局 → table-layout:fixed 列网格错算，
   表头相对数据行整体右移 48px（"类型/标记"等列肉眼可见错位）。
   恢复 table-cell 并用文本居中代替 flex 居中。
   ============================================================ */
#bpmTodoPage .bt-thead .bt-ckcell { display: table-cell; vertical-align: middle; text-align: center; }

/* ============================================================
   BPM 批量栏 - v96 "重发已催过"开关按钮
   ============================================================ */
#bpmBatchBar .bpm-btn-resend {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35);
    color: rgba(255,255,255,.75); font-size: 12.5px; padding: 7px 14px;
    border-radius: 999px; cursor: pointer; transition: all .15s;
}
#bpmBatchBar .bpm-btn-resend:hover { background: rgba(255,255,255,.2); color: #fff; }
#bpmBatchBar .bpm-btn-resend.on {
    background: #e0a23f; border-color: #e0a23f; color: #fff; font-weight: 600;
    box-shadow: 0 4px 12px rgba(224,162,63,.4);
}

/* ============================================================
   BPM 审批 - v100 乐观提交
   点"同意/退回"后该行立即进入"提交中"，不再等 BPM 返回才解锁界面
   （BPM 服务端处理审批本身要数秒，原先会卡住弹窗和按钮）
   ============================================================ */
#bpmTodoPage .bt-row.submitting { opacity: .55; }
#bpmTodoPage .bt-row.submitting .bt-link { pointer-events: none; }
#bpmTodoPage .bt-submitting {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #8a7fd0; white-space: nowrap;
}
#bpmTodoPage .bt-submitting::before {
    content: ''; width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid #d8cffa; border-top-color: #6d4fe0;
    animation: bpmSubSpin .7s linear infinite;
}
@keyframes bpmSubSpin { to { transform: rotate(360deg); } }

/* 轻提示：乐观提交的即时反馈（右下角浮出，2.2 秒自动消失） */
#bpmToast {
    position: fixed; right: 26px; bottom: 30px; z-index: 99999;
    background: #23263a; color: #fff; font-size: 13.5px;
    padding: 11px 20px; border-radius: 999px;
    box-shadow: 0 14px 36px rgba(35,30,80,.35);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
#bpmToast.show { opacity: 1; transform: none; }

/* ============================================================
   v104 待办详情弹窗重做：静态双栏 + 顶部决策带 + 分区替卡片
   背景：原来靠 JS 运行时把 hero/内容/审批栏互相搬 DOM 拼布局，
        六张平权白卡堆叠、BPM 长标题撑爆卡头 —— 结果"乱糟糟找不到重点"。
        现在改为声明式结构：标题(跨列) / 决策带(跨列) / 左内容 / 右操作。
   作用域全部限定在 #bpmTodoDetailModal.bd3 内，不影响其它页面。
   ============================================================ */
#bpmTodoDetailModal .bpm-detail-modal.bd3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 306px;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(1320px, 96vw);
    max-width: none;
    height: min(900px, 92vh);
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
}
#bpmTodoDetailModal .bd3 .modal-header { grid-area: 1 / 1 / 2 / 3; margin: 0; padding: 13px 20px; border-bottom: 1px solid #eef0f7; }
#bpmTodoDetailModal .bd3 .modal-header h3 { margin: 0; font-size: 15px; font-weight: 600; color: #0f172a; }
#bpmTodoDetailModal .bd3 .modal-close { position: static; }
#bpmTodoDetailModal .bd3 .bd3-dec { grid-area: 2 / 1 / 3 / 3; }
#bpmTodoDetailModal .bd3 .bd3-dec:empty { display: none; }
#bpmTodoDetailModal .bd3 .bpm-detail-body { grid-area: 3 / 1 / 4 / 2; margin: 0; padding: 16px 20px 28px; overflow-y: auto; background: #f4f5fa; display: block; }
#bpmTodoDetailModal .bd3 #bpmTodoDetailContent { width: 100%; min-width: 0; }
#bpmTodoDetailModal .bd3 .modal-footer {
    grid-area: 3 / 2 / 4 / 3; margin: 0; padding: 0; overflow-y: auto;
    background: #fbfbfe; border-left: 1px solid #eef0f7;
    display: block; border-top: none;
}
/* 操作栏内部：原来是一整条横排 footer，现在竖排成一个操作面板 */
#bpmTodoDetailModal .bd3 .bpm-approval-footer-inner { display: block; padding: 16px 16px 22px; }
#bpmTodoDetailModal .bd3 .bpm-approval-footer-top { display: block; }
#bpmTodoDetailModal .bd3 .bpm-approval-footer-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0f172a; margin-bottom: 12px; }
#bpmTodoDetailModal .bd3 .bpm-approval-info-row { display: block; margin-bottom: 10px; }
#bpmTodoDetailModal .bd3 .bpm-approval-info-tag { display: flex; gap: 6px; align-items: center; margin: 5px 0; font-size: 12px; }
#bpmTodoDetailModal .bd3 .bpm-approval-info-tag input { flex: 1; min-width: 0; }
#bpmTodoDetailModal .bd3 .bpm-approval-radios { flex-wrap: wrap; row-gap: 8px; }
#bpmTodoDetailModal .bd3 .bpm-approval-radio { flex: none; white-space: nowrap; }
#bpmTodoDetailModal .bd3 .bpm-approval-radio-label { width: 100%; white-space: normal; }
#bpmTodoDetailModal .bd3 .bpm-approval-footer-body { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 0; }
#bpmTodoDetailModal .bd3 .bpm-approval-textarea { width: 100%; flex: none; min-height: 84px; }
#bpmTodoDetailModal .bd3 .bpm-approval-footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0 0; }
#bpmTodoDetailModal .bd3 .bpm-approval-footer-actions .bpm-btn { justify-content: center; padding: 10px 0; }
/* 辅助操作：从"平权面板"降级为操作卡底部一行小链接 */
#bpmTodoDetailModal .bd3 .bd3-side-aux { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef0f7; font-size: 12px; color: #8a8aa3; line-height: 2; }
#bpmTodoDetailModal .bd3 .bd3-side-aux .bd-side-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#bpmTodoDetailModal .bd3 .bd3-side-aux button.link { border: none; background: none; padding: 0; color: #6d5bd0; cursor: pointer; font-size: 12px; text-decoration: underline; }
/* v113：单条催收按钮 —— 扁平实心，与链接式的「打开」明确区分主次；
   不用渐变/发光（本项目一贯的审美：细边框 + 单一强调色）。 */
#bpmTodoDetailModal .bd3 .bd-nudge-btn {
    border: none; border-radius: 7px; padding: 4px 11px;
    background: var(--bd-accent-2); color: #fff;
    font-size: 12px; font-weight: 500; line-height: 1.45; cursor: pointer;
    white-space: nowrap; transition: background .15s;
}
#bpmTodoDetailModal .bd3 .bd-nudge-btn:hover { background: #5b49bd; }
#bpmTodoDetailModal .bd3 .bd-nudge-btn:disabled { background: #bcb5e4; cursor: default; }

/* ---------- 顶部决策带 ---------- */
#bpmTodoDetailModal .bd3-dec { padding: 15px 20px; background: #f6f4ff; border-bottom: 1px solid #e8e4fb; }
#bpmTodoDetailModal .bd3-dec-row { display: flex; align-items: flex-start; gap: 14px; }
#bpmTodoDetailModal .bd3-ava { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #ddd6fb; color: #5340c9; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; }
#bpmTodoDetailModal .bd3-who { flex: 1; min-width: 0; }
#bpmTodoDetailModal .bd3-who-nm { font-size: 16px; font-weight: 600; color: #1e1b39; line-height: 1.35; }
#bpmTodoDetailModal .bd3-who-nm em { margin-left: 7px; font-size: 12px; font-weight: 400; font-style: normal; color: #7d7a99; }
#bpmTodoDetailModal .bd3-who-sub { margin-top: 3px; font-size: 12px; color: #6d6a8a; }
#bpmTodoDetailModal .bd3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#bpmTodoDetailModal .bd3-chip { padding: 2px 9px; border-radius: 999px; background: #fff; border: 1px solid #e2ddf8; color: #4b4a63; font-size: 12px; white-space: nowrap; }
#bpmTodoDetailModal .bd3-chip-warn { background: #fdf3e2; border-color: #f0cf95; color: #8a5a12; }
#bpmTodoDetailModal .bd3-chip-key { background: #f0ecff; border-color: #d3c9fa; color: #4c3fa8; font-weight: 600; }
#bpmTodoDetailModal .bd3-chip-due { background: #fdf0e0; border-color: #e9b96a; color: #9a5b0a; font-weight: 600; }
#bpmTodoDetailModal .bd3-ai-slot { flex: none; width: 330px; max-width: 330px; }
#bpmTodoDetailModal .bd3-extra { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2ddf8; font-size: 12px; color: #6d6a8a; display: none; gap: 18px; flex-wrap: wrap; }
#bpmTodoDetailModal .bd3-extra.open { display: flex; }
#bpmTodoDetailModal .bd3-extra b { color: #3f3d5c; font-weight: 600; }
#bpmTodoDetailModal .bd3-morelink { margin-top: 8px; font-size: 12px; color: #6d5bd0; cursor: pointer; display: inline-block; }

/* ---------- 卡片流 → 一个白面 + 细线分区 ---------- */
#bpmTodoDetailModal .bd3 .bd-cards { display: block; background: #fff; border: 1px solid #eceef6; border-radius: 14px; padding: 2px 20px; box-shadow: 0 6px 20px rgba(83, 63, 168, .05); }
#bpmTodoDetailModal .bd3 .bd-card { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 17px 0; }
#bpmTodoDetailModal .bd3 .bd-card + .bd-card { border-top: 1px solid #f1f2f8; }
#bpmTodoDetailModal .bd3 .bd-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#bpmTodoDetailModal .bd3 .bd-card-h h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: #0f172a; }
/* 其他类别的独立卡（datagrid 数据列表、证明等）保持白面外观 */
#bpmTodoDetailModal .bd3 .bpm-detail-card { background: #fff; border: 1px solid #eceef6; border-radius: 14px; box-shadow: 0 6px 20px rgba(83, 63, 168, .05); margin-bottom: 14px; }
/* 分区内的字段网格收紧一点，减少空白 */
#bpmTodoDetailModal .bd3 .bd-stat-row { gap: 10px; }
#bpmTodoDetailModal .bd3 .bd-kvgrid { gap: 10px; }

/* ---------- 材料与核对 ---------- */
#bpmTodoDetailModal .bd3-photos { display: flex; flex-wrap: wrap; gap: 10px; }
#bpmTodoDetailModal .bd3-thumb { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; border: 1px solid #e6e7f0; background: #f7f8fc; cursor: pointer; }
#bpmTodoDetailModal .bd3-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bpmTodoDetailModal .bd3-thumb-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-size: 11px; color: #fff; background: rgba(30, 27, 57, .62); text-align: center; }
#bpmTodoDetailModal .bd3-none { font-size: 12px; color: #9a99ad; padding: 10px 0; }
#bpmTodoDetailModal .bd3-checks { margin-top: 12px; font-size: 12.5px; line-height: 1.85; color: #4b4a63; }
#bpmTodoDetailModal .bd3-checks i { font-style: normal; color: #16a34a; margin-right: 5px; }
#bpmTodoDetailModal .bd3-checks i.warn { color: #d97706; }

/* ---------- AI 结论：塞进决策带右侧，结论先行 ---------- */
#bpmTodoDetailModal .bd3 .bpm-context-bar { margin: 0; padding: 11px 13px; border-radius: 12px; border: 1px solid #e6e7f0; border-left-width: 3px; background: #fff; }
#bpmTodoDetailModal .bd3 .bpm-context-bar .bpm-context-title { font-size: 13px; font-weight: 600; }
#bpmTodoDetailModal .bd3 .bpm-ai-summary { font-size: 12.5px; line-height: 1.65; margin-top: 5px; }
#bpmTodoDetailModal .bd3 .bpm-ai-toggle { margin-top: 8px; font-size: 12px; color: #6d5bd0; cursor: pointer; display: inline-block; }
#bpmTodoDetailModal .bd3 .bpm-ai-detail { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e6e7f0; }
#bpmTodoDetailModal .bd3 .bpm-ai-detail.open { display: block; }
#bpmTodoDetailModal .bd3 .bpm-context-bar .bpm-context-body { font-size: 12px; }
#bpmTodoDetailModal .bd3 .bpm-ai-reasons { font-size: 12px; margin-top: 6px; }
#bpmTodoDetailModal .bd3 .bpm-ai-finding { font-size: 12px; }
#bpmTodoDetailModal .bd3 .bpm-context-actions { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
#bpmTodoDetailModal .bd3 .bpm-context-actions .bpm-btn { font-size: 12px; padding: 5px 9px; }

/* ---------- 窄屏回退：单栏 ---------- */
@media (max-width: 1080px) {
    #bpmTodoDetailModal .bpm-detail-modal.bd3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; height: min(880px, 92vh); }
    #bpmTodoDetailModal .bd3 .bpm-detail-body { grid-area: 3 / 1 / 4 / 2; }
    #bpmTodoDetailModal .bd3 .modal-footer { grid-area: 4 / 1 / 5 / 2; border-left: none; border-top: 1px solid #eef0f7; max-height: 46vh; }
    #bpmTodoDetailModal .bd3-dec-row { flex-wrap: wrap; }
    #bpmTodoDetailModal .bd3-ai-slot { width: 100%; max-width: none; }
}

/* v104 补充：两行表单表的紧凑「标签 值」清单（替代 7 列稀疏表格） */
#bpmTodoDetailModal .bd3 .bd3-kv { display: block; }
#bpmTodoDetailModal .bd3 .bd3-kv-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px dashed #f1f2f8; }
#bpmTodoDetailModal .bd3 .bd3-kv-row:last-child { border-bottom: none; }
#bpmTodoDetailModal .bd3 .bd3-kv-row .k { font-size: 12.5px; color: #8a8aa3; }
#bpmTodoDetailModal .bd3 .bd3-kv-row .v { font-size: 13px; color: #1e1b39; word-break: break-all; }
#bpmTodoDetailModal .bd3 .bd3-kv-empty { margin-top: 8px; font-size: 12px; color: #a3a2b5; }
/* 白面里的分区：块与块之间只留一条细线（比原来每块一张白卡干净得多） */
#bpmTodoDetailModal .bd3 .bd-cards > * + * { border-top: 1px solid #f1f2f8; }
#bpmTodoDetailModal .bd3 .bd-cards .bpm-flow-section,
#bpmTodoDetailModal .bd3 .bd-cards .bpm-pending-section {
    background: transparent; border: none; border-radius: 0; box-shadow: none;
    margin: 0; padding: 17px 0; overflow: visible;
}
#bpmTodoDetailModal .bd3 .bd-cards .bpm-flow-section .bpm-section-header {
    padding: 0 0 10px; background: transparent; border-bottom: none;
    font-size: 13.5px; font-weight: 600; color: #0f172a; cursor: pointer;
}
#bpmTodoDetailModal .bd3 .bd-cards .bpm-flow-section .bpm-section-icon { color: #7c5cff; }
#bpmTodoDetailModal .bd3 .bd-cards .bpm-flow-section .bpm-flow-body { padding: 0; }
#bpmTodoDetailModal .bd3 .bd-cards .bpm-flow-section .bpm-flow-img { max-width: 100%; border-radius: 10px; border: 1px solid #eceef6; }
#bpmTodoDetailModal .bd3 .bd-cards .bpm-flow-hint { font-size: 12.5px; color: #8a8aa3; padding: 14px 0; }

/* ============================================================
   v105 详情弹窗打磨（用真实 Chromium 量几何后逐条修）
   诊断出的事实（1440x900 / 弹窗 1120x760）：
     · 决策带文字左边界 180px，白卡内文字 201px → 差 21px，视觉上"没对齐"
     · 决策带高 189px（AI 卡 158 撑的），身份区只 96.6px → 左下方 62px 空白
     · 字段网格每行各自 4 等分，某行只有 2 个字段时右侧空一半（证明申请 2 处 50% 空白）
   对策：左列改"通栏分区"（内容统一 22px 缩进）、AI 卡挪去右栏、字段网格改 flex 自动填满。
   ============================================================ */
/* ---------- 1. 对齐：所有内容的左边界统一到 22px ---------- */
#bpmTodoDetailModal .bd3 .bpm-detail-body { padding: 0; background: #fff; }
/* ⚠️ v105 把 body padding 归零、改由各内容块自带 22px 缩进。但"流程信息带 / 自动核对结论带"
   这两块没被收编（见下方的 .bpm-flow-band / .bd-issues），加上 v147+ 的 .fx 专属容器也漏了
   → 这些块会从弹窗最左沿铺到滚动条（用户报"太靠边/快溢出"的根因）。
   ⚠️ DOM 是 body > div(无名容器) > 各块，不是 body 直接子元素，必须用后代选择器。
   `.fx` 自己已有 16px 22px padding，这里用 :not(.fx 内嵌) 语义排除——它不受影响因为选择器只匹配 band/issues。
   排除左侧已由 padding 撑开的情况：仅给没有 padding 的块补 margin。 */
#bpmTodoDetailModal .bd3 .bpm-detail-body .bpm-flow-band,
#bpmTodoDetailModal .bd3 .bpm-detail-body .bd-issues { margin-left: 22px; margin-right: 22px; box-sizing: border-box; }
#bpmTodoDetailModal .bd3 .bd-cards {
    background: #fff; border: none; border-radius: 0; box-shadow: none; padding: 0;
}
#bpmTodoDetailModal .bd3 .bd-card { padding: 18px 22px; }
#bpmTodoDetailModal .bd3 .bd-card + .bd-card { border-top: 1px solid #eef0f7; }
#bpmTodoDetailModal .bd3 .bd-cards > * + * { border-top: 1px solid #eef0f7; }
#bpmTodoDetailModal .bd3 .bd-cards .bpm-flow-section,
#bpmTodoDetailModal .bd3 .bd-cards .bpm-pending-section { padding: 18px 22px; }
#bpmTodoDetailModal .bd3-dec { padding: 14px 22px; }
/* 白面之外的独立块（数据列表卡 / 电子证明生成条 / 报错）同样吃 22px 缩进 */
#bpmTodoDetailModal .bd3 .bpm-detail-card { margin: 16px 22px; }
#bpmTodoDetailModal .bd3 .bpm-proof-gen-bar { margin: 16px 22px 0; }
#bpmTodoDetailModal .bd3 .bpm-detail-error { margin: 24px 22px; }
/* v147 专属版式（.fx 容器）不在 .bd-card 缩进名单里 → 单独补留白，否则卡片贴死弹窗左右边沿。
   DOM: .bpm-detail-body > #bpmTodoDetailContent > .fx（注意 .fx 不是 body 直接子元素）。
   上下沿用通用版式的 16px（对齐 .bpm-detail-card），左右 22px（对齐 v105 定的统一左边界）。 */
#bpmTodoDetailModal .bd3 .bpm-detail-body .fx { padding: 16px 22px; box-sizing: border-box; }

/* ---------- 2. 字段网格：合并容器 + flex 自动填满，消除行尾空白 ---------- */
#bpmTodoDetailModal .bd3 .bd-stat-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
#bpmTodoDetailModal .bd3 .bd-stat { flex: 1 1 160px; min-width: 0; }
#bpmTodoDetailModal .bd3 .bd-kv { flex: 1 1 100%; min-width: 0; }
/* 卡片降噪：去掉渐变底与悬浮位移（十来个渐变卡片的"碎"是粗糙感来源） */
#bpmTodoDetailModal .bd3 .bd-stat {
    background: #fcfcfe; border: 1px solid #eef0f6; border-radius: 10px;
    padding: 11px 13px; box-shadow: none;
}
#bpmTodoDetailModal .bd3 .bd-stat:hover { border-color: #dcdff0; box-shadow: none; transform: none; }
#bpmTodoDetailModal .bd3 .bd-stat.hl { box-shadow: none; }
#bpmTodoDetailModal .bd3 .bd-stat .sk { font-size: 11px; margin-bottom: 5px; }
#bpmTodoDetailModal .bd3 .bd-stat .sv { font-size: 13.5px; line-height: 1.45; }

/* ---------- 3. AI 结论卡：改为右栏顶部（审批依据与操作同栏） ---------- */
#bpmTodoDetailModal .bd3 .bd3-ai-slot { width: auto; max-width: none; margin: 0 0 14px; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot:empty { display: none; margin: 0; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-bar {
    width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px;
}
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-title { font-size: 12.5px; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-ai-summary { font-size: 12px; line-height: 1.6; margin-top: 5px; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-body span { font-size: 11.5px; padding: 2px 8px; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-actions { margin-top: 8px; gap: 6px; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-actions .bpm-btn { font-size: 11.5px; padding: 5px 9px; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-ai-reasons li { font-size: 11.5px; }
/* 右栏顶部与 AI 卡之间加一条分割，让「建议」和「操作」两层分明 */
#bpmTodoDetailModal .bd3 .bpm-approval-footer-title { margin-bottom: 12px; padding-top: 2px; }

/* ---------- 4. 决策带：AI 卡挪走后收紧，身份信息一行读完 ---------- */
#bpmTodoDetailModal .bd3 .bd3-chips { margin-top: 8px; }
#bpmTodoDetailModal .bd3 .bd3-morelink { margin-top: 6px; }

/* ---------- 5. v105 补：AI 卡头部一行 + 分区细线补漏 + 次要按钮降级 ---------- */
/* 结论行左标题右「展开依据」，省掉一整行 */
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-ai-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-ai-head .bpm-context-title { min-width: 0; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-ai-head .bpm-ai-toggle { margin: 0; flex: none; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-ai-summary {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 右栏窄，动作按钮占整行、小一号 */
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-ai-detail { margin-top: 8px; }

/* IMPORTANT：v104 给 flow/pending 分区写了 border:none，把「块间细线」整条覆盖掉了
   （选择器特异性更高）→ 流程图与上一个分区之间原本没有分隔线。这里补回来。 */
#bpmTodoDetailModal .bd3 .bd-cards > .bpm-flow-section,
#bpmTodoDetailModal .bd3 .bd-cards > .bpm-pending-section { border-top: 1px solid #eef0f7; }
#bpmTodoDetailModal .bd3 .bd-cards > .bpm-flow-section:first-child,
#bpmTodoDetailModal .bd3 .bd-cards > .bpm-pending-section:first-child { border-top: none; }

/* 「返回」不该和「同意/退回」同权重：单独占一行、中性灰 */
#bpmTodoDetailModal .bd3 .bpm-approval-footer-actions .bpm-btn-cancel {
    grid-column: 1 / -1; background: #fff; border: 1px solid #e6e8f0;
    color: #8a8aa3; font-weight: 500; box-shadow: none;
}
#bpmTodoDetailModal .bd3 .bpm-approval-footer-actions .bpm-btn-cancel:hover {
    background: #f7f8fc; color: #4b4a63;
}

/* ============================================================
   v105 末段：设计令牌收敛
   实测证据（证明单，1440x900）：弹窗内并存 3 代设计体系的颜色 ——
     Element UI 的 #606266 / #909399、Tailwind slate 的 #94a3b8 / #1e293b / #475569、
     v104 紫调的 #6d6a8a / #8a8aa3；另有 14 种字号、10 种圆角、8 种边框灰。
   这就是"还很粗糙"的真正来源 —— 不是布局错，是像素级标准不统一。
   ============================================================ */
#bpmTodoDetailModal {
    --bd-ink: #1b1b33;      /* 主文字：分区标题 / 字段值 */
    --bd-ink-2: #4b4a63;    /* 次要文字：正文段落 / 时间线 */
    --bd-mute: #8a8aa3;     /* 弱化文字：标签 / 时间 / 辅助说明 */
    --bd-line: #eceef5;     /* 分区细线 */
    --bd-line-2: #e6e8f2;   /* 卡片 / 控件边框 */
    --bd-accent-2: #6d5bd0;
}
/* --- 主文字：slate-900(#0f172a) / slate-800(#1e293b) 统一 --- */
#bpmTodoDetailModal .bd3 .bd-card-h h3,
#bpmTodoDetailModal .bd3 .bd-tt,
#bpmTodoDetailModal .bd3 .bpm-section-header,
#bpmTodoDetailModal .bd3 .bpm-approval-footer-title,
#bpmTodoDetailModal .bd3 .bd-stat .sv,
#bpmTodoDetailModal .bd3 .bd3-kv-row .v,
#bpmTodoDetailModal .bd3 .bd-kv .v { color: var(--bd-ink); }
/* --- 次要文字：slate-700/600 + Element #606266 统一 --- */
#bpmTodoDetailModal .bd3 .bd-memo,
#bpmTodoDetailModal .bd3 .bd-who2,
#bpmTodoDetailModal .bd3 .bd-side-row,
#bpmTodoDetailModal .bd3 .bd3-checks,
#bpmTodoDetailModal .bd3 .bpm-ai-summary,
#bpmTodoDetailModal .bd3 .bpm-ai-reasons,
#bpmTodoDetailModal .bd3 .bpm-ai-finding,
#bpmTodoDetailModal .bd3 .bpm-pending-field,
#bpmTodoDetailModal .bd3 .bpm-approval-info-tag { color: var(--bd-ink-2); }
/* --- 弱化文字：slate-400 + Element #909399 统一 --- */
#bpmTodoDetailModal .bd3 .bd-stat .sk,
#bpmTodoDetailModal .bd3 .bd-kv .k,
#bpmTodoDetailModal .bd3 .bd3-kv-row .k,
#bpmTodoDetailModal .bd3 .bd-tm,
#bpmTodoDetailModal .bd3 .bd-tag,
#bpmTodoDetailModal .bd3 .bd3-kv-empty,
#bpmTodoDetailModal .bd3 .bd3-none,
#bpmTodoDetailModal .bd3 .bpm-flow-hint { color: var(--bd-mute); }
/* --- 链接/强调：#5a67d8 收敛到 v104 紫 --- */
#bpmTodoDetailModal .bd3 .bd-side-row .link { color: var(--bd-accent-2); }
/* --- 边框灰：8 种 → 2 种 --- */
#bpmTodoDetailModal .bd3 .bd-stat,
#bpmTodoDetailModal .bd3 .bd3-thumb,
#bpmTodoDetailModal .bd3 .bpm-data-table-wrap { border-color: var(--bd-line-2); }
#bpmTodoDetailModal .bd3 .bd-cards .bd-card + .bd-card,
#bpmTodoDetailModal .bd3 .bd-cards > * + * { border-top-color: var(--bd-line); }
#bpmTodoDetailModal .bd3 .bd-cards > .bpm-flow-section,
#bpmTodoDetailModal .bd3 .bd-cards > .bpm-pending-section { border-top-color: var(--bd-line); }
/* --- 字号：14 种 → 6 档（11 微标签 / 12 辅助 / 12.5 小正文 / 13 正文 / 14 分区标题 / 16 姓名）--- */
#bpmTodoDetailModal .bd3 .bd-card-h h3 { font-size: 14px; }
#bpmTodoDetailModal .bd3 .bpm-section-header { font-size: 14px; }
#bpmTodoDetailModal .bd3 .bd-tt { font-size: 13px; }
#bpmTodoDetailModal .bd3 .bd-memo { font-size: 12px; }
#bpmTodoDetailModal .bd3 .bd-who2 { font-size: 12.5px; }
#bpmTodoDetailModal .bd3 .bd-tm { font-size: 11px; }
#bpmTodoDetailModal .bd3 .bd3-kv-row .k { font-size: 12px; }
#bpmTodoDetailModal .bd3 .bd3-checks { font-size: 12px; }
#bpmTodoDetailModal .bd3 .bd-quick button { font-size: 12px; }
#bpmTodoDetailModal .bd3 .bpm-pending-field { font-size: 12.5px; }
/* --- 圆角：10 种 → 4 种（10 小 / 12 中 / 14 大 / 999 胶囊）--- */
#bpmTodoDetailModal .bd3 .bd-chip { border-radius: 999px; }
#bpmTodoDetailModal .bd3 .bpm-data-table-wrap { border-radius: 12px; }
#bpmTodoDetailModal .bd3 .bpm-attach-thumb { border-radius: 8px; }
#bpmTodoDetailModal .bd3 .bd-tl-dot { border-radius: 50%; }
/* --- 恢复 AI 判决色：v104 的 .bpm-context-bar{background:#fff} 特异性更高，
       把「建议同意=绿 / 需补材料=黄 / 建议退回=红」的底色整条覆盖掉了，一眼看不出结论。--- */
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-bar.bpm-ai-approve { background: #f1fbf4; border-color: #c5ebd1; border-left-color: #16a34a; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-bar.bpm-ai-reject { background: #fef4f4; border-color: #f6cfcf; border-left-color: #dc2626; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-bar.bpm-ai-material { background: #fffcf2; border-color: #f3e2b8; border-left-color: #d97706; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-bar.bpm-ai-unknown { background: #f9fafc; border-color: #e4e7ee; border-left-color: #64748b; }

/* ---------- v105 收尾：把全局遗留调色板在本弹窗内直接重映射 ----------
   全局 :root 是第 4 套体系（--text-primary:#1a1a2e / --text-secondary:#718096 /
   --text-light:#a0aec0 / --border:#e2e8f0）。与其一处处覆盖，不如在弹窗作用域里
   把这些变量本身改掉，凡是用 var(--text-*) 的遗留规则会自动落到 v104 的紫调灰阶上。 */
#bpmTodoDetailModal {
    --text-primary: #1b1b33;
    --text-regular: #4b4a63;
    --text-secondary: #8a8aa3;
    --text-light: #9a99ad;
    --border: #e6e8f2;
    --radius: 10px;
    --radius-lg: 12px;
}
#bpmTodoDetailModal .bd3 .bd-stat .sv { font-size: 13px; }
#bpmTodoDetailModal .bd3 .bd3-who-nm { color: var(--bd-ink); }
#bpmTodoDetailModal .bd3 .bd-kv .v a,
#bpmTodoDetailModal .bd3 .bd-linkbtn { color: var(--bd-accent-2); }
#bpmTodoDetailModal .bd3 .bd-quick button { color: var(--bd-accent-2); background: rgba(124, 92, 255, .09); }
#bpmTodoDetailModal .bd3 .bd-quick button:hover { background: rgba(124, 92, 255, .17); }
/* 控件圆角也收敛到 10px（原来 textarea/button 用 11px） */
#bpmTodoDetailModal .bd3 .bpm-approval-textarea,
#bpmTodoDetailModal .bd3 .bpm-approval-footer-actions .bpm-btn,
#bpmTodoDetailModal .bd3 .bpm-edit-text,
#bpmTodoDetailModal .bd3 .bpm-edit-select,
#bpmTodoDetailModal .bd3 .bpm-edit-date { border-radius: 10px; }
#bpmTodoDetailModal .bd3 .bpm-attach-name { font-size: 11px; }
/* 审批意见输入的底色与卡片一致 */
#bpmTodoDetailModal .bd3 .bpm-approval-textarea { background: #fcfcfe; }
/* 弹窗自身的继承色也从全局 --text-primary(#1a1a2e) 拉到 v104 的 --bd-ink */
#bpmTodoDetailModal { color: #1b1b33; }
/* ---------- v105 最终三处：特异性不够被旧规则压住的漏网值 ---------- */
/* 1) .bpm-section-header 被 v104 的 (1,4,0) 规则压回 13.5px/#0f172a */
#bpmTodoDetailModal .bd3 .bd-cards .bpm-flow-section .bpm-section-header,
#bpmTodoDetailModal .bd3 .bd-cards .bpm-pending-section .bpm-section-header {
    font-size: 14px; color: var(--bd-ink);
}
/* 2) AI 结论标题：旧规则带 ID (#bpmTodoDetailModal .bpm-ai-card .bpm-context-title, 1,2,0)
      压过了不带 ID 的判决色 (0,3,0) → 三种结论全变成同一个紫，看不出建议。 */
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-bar.bpm-ai-approve .bpm-context-title { color: #15803d; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-bar.bpm-ai-reject .bpm-context-title { color: #b91c1c; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-bar.bpm-ai-material .bpm-context-title { color: #b45309; }
#bpmTodoDetailModal .bd3 .bd3-ai-slot .bpm-context-bar.bpm-ai-unknown .bpm-context-title { color: #475569; }
/* 3) 审批信息行的标签值（<b> 自带 Element 灰）*/
#bpmTodoDetailModal .bd3 .bpm-approval-info-tag b { color: var(--bd-ink); font-weight: 600; }
/* 弹窗标题统一到 --bd-ink */
#bpmTodoDetailModal .bd3 .modal-header h3 { color: var(--bd-ink); }
/* ---------- v105：电子证明生成条统一到紫调（原为浅蓝渐变，在紫色弹窗里显"跳"）---------- */
#bpmTodoDetailModal .bd3 .bpm-proof-gen-bar {
    background: #fafaff; border: 1px solid var(--bd-line-2);
    border-left: 3px solid #7c5cff; border-radius: 10px; padding: 11px 16px;
}
#bpmTodoDetailModal .bd3 .bpm-proof-gen-bar-left { color: var(--bd-ink-2); font-size: 13px; font-weight: 600; }
#bpmTodoDetailModal .bd3 .bpm-proof-gen-bar-left svg { color: #7c5cff; }
#bpmTodoDetailModal .bd3 .bpm-proof-file-item { background: #fff; border: 1px solid var(--bd-line-2); border-radius: 8px; }
#bpmTodoDetailModal .bd3 .bpm-proof-file-item:hover { border-color: #d5d0f5; background: #fdfcff; }
#bpmTodoDetailModal .bd3 .bpm-proof-file-item span { color: var(--bd-ink-2); }
#bpmTodoDetailModal .bd3 .bpm-proof-btn { border-radius: 999px; font-size: 12px; padding: 6px 14px; border: 1px solid transparent; }
#bpmTodoDetailModal .bd3 .bpm-proof-btn-download { background: #7c5cff; color: #fff; border-color: #7c5cff; }
#bpmTodoDetailModal .bd3 .bpm-proof-btn-download:hover { background: #6d4fe0; }

/* ============================================================
   BPM 待办列表 - v106 "类型 / 标记"列徽章不再被截断
   现象：📷 N张 / 🔔已催N次 / 📎待材料 这类徽章，被紧邻的"当前节点"列切掉尾巴。
   根因：① 列宽写死 16%，而徽章的数量与文案长度是动态的（📷 36张 比 📷 3张 宽得多）；
        ② 列内 v91 的 white-space:nowrap 强行单行 + v93 的 overflow:hidden 硬裁，
           一旦总宽超出就整块切掉。1440 下最坏行需 207px，列内只有 184px。
   解法：① 列宽 16% → 23%，从标题(-4%)、节点(-2%)、提交(-1%) 各借一点
            （标题实际仅需 ~135px 却占 24%，是全场最富余的一列）
        ② 列内改 flex + flex-wrap：宽屏仍是一行、观感不变；
            只有真的放不下时才折到第二行 —— 任何宽度下都不再丢信息
        ③ 统一 gap，撤销各徽章自带的 margin-left，避免折行后第二行莫名缩进
   ============================================================ */
/* 列宽重分配（4+10+20+23+18+7+7+11 = 100） */
#bpmTodoPage .bt-thead > div:nth-child(1) { width: 4%; }
#bpmTodoPage .bt-thead > div:nth-child(2) { width: 10%; }
#bpmTodoPage .bt-thead > div:nth-child(3) { width: 20%; }
#bpmTodoPage .bt-thead > div:nth-child(4) { width: 23%; }
#bpmTodoPage .bt-thead > div:nth-child(5) { width: 18%; }
#bpmTodoPage .bt-thead > div:nth-child(6) { width: 7%; }
#bpmTodoPage .bt-thead > div:nth-child(7) { width: 7%; }
#bpmTodoPage .bt-thead > div:nth-child(8) { width: 11%; }

/* 列内保持 table-cell（v107 修正：v106 曾把本格改 display:flex，
   flex 盒在表格行内不是合法单元格、高度随内容收缩（空徽章行更矮），
   → 本列下划线整体高于其他列）。
   折行改由徽章之间的空格承担（api.js 渲染时空格连接徽章）：
   宽屏仍一行，放不下才在徽章间折行，不再丢信息 */
#bpmTodoPage .bt-row > .bt-c-type {
    vertical-align: middle;
    white-space: normal;
    overflow: visible;
}
/* 徽章宽度固定（不压缩、不缩字），折行只发生在徽章之间 */
#bpmTodoPage .bt-row > .bt-c-type > * { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 6px 4px 0 !important; }
#bpmTodoPage .bt-row > .bt-c-type > *:last-child { margin: 0 0 4px 0 !important; }

/* ============================================================
   v107 布局修复（2026-09-16）：孤儿页面顶部大空白
   现象：电子合同页顶部一大片空白；考勤管理-数据查询点查询后（结果少、页面变矮时）
         顶部也顶出一大片空白。
   根因：main.main-content 是"纵向 flex + overflow:hidden + 高度锁定视口"，
        .content(flex:1) 是页面滚动容器，但 HTML 里只有 dashboard/employees/
        departments/bpmTodo 四个页面真正装在 #content 里；其余页面
        （econtract/attendance/performance/payroll/...）是 main-content 的
        直接子元素（"孤儿页面"）。当孤儿页内容矮于视口时，空的 #content
        靠 flex-grow:1 把全部剩余空间吃掉——它在 DOM 里排在孤儿页前面，
        于是在页面顶部顶出 (视口高 - 页面高) 的空白。
   解法：① #content 里没有可见的激活页时把它压为 0 高（:has 选择器）；
        ② 孤儿激活页自己接管滚动（flex:1 + overflow-y:auto），
          同时顺带修复了孤儿页内容超高被 overflow:hidden 裁掉、无法滚动的问题。
   ============================================================ */
.main-content > #content:not(:has(> .page-content.active)) {
    flex: 0 0 auto;
    height: 0;
    min-height: 0;
    overflow: hidden;
}
.main-content > .page-content.active {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* =======================================================
   已办列表视图（BPM『我已处理』） v108  2026-09-16
   ======================================================= */
/* 待办/已办 视图切换（分段控件） */
#bpmTodoPage .bt-viewswitch { display: inline-flex; background: #f1f2f8; border-radius: 10px; padding: 3px; gap: 2px; align-self: center; margin-right: 10px; }
#bpmTodoPage .bt-viewswitch .vs-btn { border: none; background: transparent; cursor: pointer; font-size: 13px; color: #6b6f80; padding: 6px 18px; border-radius: 8px; transition: all .18s; font-weight: 500; }
#bpmTodoPage .bt-viewswitch .vs-btn:hover { color: #2a2d3a; }
#bpmTodoPage .bt-viewswitch .vs-btn.active { background: linear-gradient(118deg, #667eea, #8a63d2); color: #fff; box-shadow: 0 3px 10px rgba(102,126,234,.35); font-weight: 600; }

/* 已办工具行（筛选） */
#bpmTodoPage .bt-done-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 22px 4px; }
#bpmTodoPage .bt-done-toolbar .filter-select { width: auto; min-width: 108px; }
#bpmTodoPage .bt-done-date { border: 1px solid #e3e5ef; border-radius: 10px; padding: 7px 10px; font-size: 12.5px; color: #2a2d3a; background: #fff; outline: none; transition: border .15s, box-shadow .15s; }
#bpmTodoPage .bt-done-date:focus { border-color: #9b8cf0; box-shadow: 0 0 0 3px rgba(102,126,234,.14); }
#bpmTodoPage .bt-done-sep { color: #a0a4b5; font-size: 12.5px; }
#bpmTodoPage .bt-done-search { flex: 1 1 260px; max-width: 340px; margin-left: auto; }

/* 已办列表容器（独立类名，不与 .bt-rows-wrap/.bt-tbody 的历史规则纠缠） */
#bpmTodoPage .bt-done-list { overflow-x: auto; }
#bpmTodoPage .bt-done-tbody { min-height: 60px; }

/* 已办表头/行（grid 固定列模板，表头与行共用，保证对齐） */
#bpmTodoPage .bt-done-thead,
#bpmTodoPage .bt-done-row {
    display: grid;
    grid-template-columns: minmax(0, 3.5fr) minmax(0, 1.1fr) minmax(0, 1.7fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.3fr);
    gap: 10px;
    align-items: center;
    padding-left: 22px;
    padding-right: 22px;
}
#bpmTodoPage .bt-done-thead { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f1f7; background: #fcfcfe; color: #8b8fa3; font-size: 12px; }
#bpmTodoPage .bt-done-thead .bt-h { text-align: center; white-space: nowrap; }
#bpmTodoPage .bt-done-thead .bd-c-title { text-align: left; }
#bpmTodoPage .bt-done-row { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #f4f5fa; font-size: 13.5px; color: #2a2d3a; transition: background .15s; animation: btRowIn .38s cubic-bezier(.22,1,.36,1) both; }
#bpmTodoPage .bt-done-row:last-child { border-bottom: none; }
#bpmTodoPage .bt-done-row:hover { background: #f8f7ff; }
#bpmTodoPage .bt-done-row .bd-c { text-align: center; font-size: 12.8px; color: #565b6e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bpmTodoPage .bt-done-row .bd-c-title { text-align: left; font-size: 13.5px; color: #2a2d3a; cursor: default; }

/* 状态徽章 */
#bpmTodoPage .bd-st { display: inline-block; font-size: 11.8px; font-weight: 600; border-radius: 999px; padding: 3px 10px; line-height: 1.4; white-space: nowrap; }
#bpmTodoPage .bd-st.st-done { background: #e8f8ee; color: #16874d; }
#bpmTodoPage .bd-st.st-running { background: #e9efff; color: #3b62d6; }
#bpmTodoPage .bd-st.st-reject { background: #fdf0e7; color: #c2620c; }
#bpmTodoPage .bd-st.st-cancel { background: #f0f1f5; color: #8b8fa3; }
#bpmTodoPage .bd-st.st-other { background: #f1eeff; color: #6d4fe0; }

/* 窄屏兜底：标题列收窄，时间列允许折行 */
@media (max-width: 1100px) {
    #bpmTodoPage .bt-done-row, #bpmTodoPage .bt-done-thead { gap: 6px; padding-left: 14px; padding-right: 14px; }
    #bpmTodoPage .bt-done-row .bd-c { white-space: normal; word-break: break-all; }
}

/* ===== 已办详情（v114：复用待办详情 bd3 弹窗只读渲染） =====
   右栏流程信息 + 左栏流程图容器；卡片/决策带/表格全部复用 #bpmTodoDetailModal 的 bd3 样式 */
#bpmTodoDetailModal .bdd-rail-kv { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
#bpmTodoDetailModal .bdd-rail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; color: #8b8fa3; }
#bpmTodoDetailModal .bdd-rail-row b { font-size: 12.5px; color: #2a2d3a; font-weight: 600; text-align: right; word-break: break-all; }
#bpmTodoDetailModal .bdd-rail-row .bd-st { flex: none; }
#bpmTodoDetailModal .bdd-flowbox { border: 1px solid #eef0f6; border-radius: 10px; background: #fcfcfe; overflow: hidden; }
#bpmTodoDetailModal .bdd-flowbox .bdd-flow-loading { padding: 24px 0; text-align: center; color: #8b8fa3; font-size: 12.5px; }
#bpmTodoDetailModal .bdd-flowbox img { display: block; max-width: 100%; margin: 0 auto; padding: 10px; }


/* ===== v126 审核台：首屏给结论，证据按需展开 ===== */
.bd-fold { border: 1px solid #eceef6; border-radius: 14px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.bd-fold > summary { display: flex; align-items: center; gap: 8px; padding: 13px 20px; cursor: pointer; list-style: none; user-select: none; }
.bd-fold > summary::-webkit-details-marker { display: none; }
.bd-fold > summary:hover { background: #fbfcff; }
.bd-fold-t { font-size: 13.5px; font-weight: 500; color: #1a1a2e; }
.bd-fold-c { font-size: 12px; color: #a0aec0; background: #f4f6fb; border-radius: 9px; padding: 1px 8px; }
.bd-fold-h { font-size: 12px; color: #a0aec0; margin-left: auto; }
.bd-fold-x { font-size: 11px; color: #a0aec0; transition: transform .18s ease; margin-left: 2px; }
.bd-fold[open] .bd-fold-x { transform: rotate(90deg); }
.bd-fold[open] > summary { border-bottom: 1px solid #f1f3f9; }
.bd-fold-b { padding: 16px 20px 18px; background: #fff; }
.bd-fold-b .bd-card { border: 0; box-shadow: none; padding: 0 0 4px; border-radius: 0; background: transparent; }
.bd-fold-b .bd-card + .bd-card { border-top: 1px solid #f2f4fa; padding-top: 16px; margin-top: 14px; }
.bd-fold-b .bd-cards { border: 0; padding: 0; }

.bd-issues { border: 1px solid #e7f0ea; border-radius: 14px; padding: 14px 20px; margin-bottom: 12px; }
.bd-issues-h { font-size: 13px; color: #1a1a2e; display: flex; align-items: center; gap: 8px; }
.bd-issue-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0 0; font-size: 13px; color: #4a5568; line-height: 1.6; }
.bd-issue-row b { color: #1a1a2e; font-weight: 500; }

.bd-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; background: #cbd5e0; }
.bd-dot.ok { background: #38a169; }
.bd-dot.warn { background: #d69e2e; }
.bd-dot.fail { background: #e53e3e; }

.bd-verdict { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 9px; border-top: 1px dashed #e8eaf2; font-size: 13px; }
.bd-verdict-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; }
.bd-vchip { font-size: 12px; color: #5f5e5a; background: #f4f6fb; border-radius: 9px; padding: 1px 8px; }

/* ===== v134（2026-09-23）员工关系角色：电子合同单标题结构化 =====
   背景：031201 的待办 50 条里 35 条是电子合同，标题格式固定为
   「X发起的姓名(工号)人事电子合同申请(类型)」，长度 29-32 字；标题列宽有限时
   末尾的合同类型（入职员工合同/保密协议/续签）恰好被省略号截掉 —— 而那是唯一的区分信息。
   做法：标题列只渲染「姓名 · 工号」，合同类型移到「类型/标记」列成徽章。
   保留完整原标题在 a 的 title 属性里（hover 可见），不丢信息。 */
#bpmTodoPage .bt-c-title .bt-empcode { margin-left: 6px; font-size: 12px; color: #8a8aa3; font-variant-numeric: tabular-nums; }
#bpmTodoPage .bpm-contract-chip { background: #eef2ff; color: #4f46e5; border: 1px solid #dde3ff; }
/* 分类圆点与标题错位的真身：.bt-c-title 本身是 table-cell（v91 为修表头错位而恢复的，
   不能改成 flex），单元格内部按行内盒排布 —— 标题稍长（宽 240px 量级）就换到第二行，
   圆点留在上一行 → 视觉上「红点跑上面去」，行高也从 47px 涨到 60px。
   解法：table-cell 内再套一层 flex，两全其美。 */
#bpmTodoPage .bt-c-title-in { display: flex; align-items: center; gap: 7px; min-width: 0; }
#bpmTodoPage .bt-c-title-in .bt-catdot { flex: none; position: static; margin-top: 1px; }
#bpmTodoPage .bt-c-title-in .bt-link { min-width: 0; display: block; }

/* ===== v136（2026-09-23）待办列表列宽真正可控 =====
   背景：v107 把列表改成 display:table + table-layout:auto，于是 v89 写的
   grid-template-columns: var(--bt-cols) 成了死代码 —— 列宽完全由内容决定：
   标题长就把标题列撑宽、其余列被挤，且无法按角色调整。
   实测（1600 视口）声明 30px 的第 1 列实际 51px、声明 1.9fr 的标题列只有 256px。
   修法：保留 table 布局（表头天然与数据行对齐、行高稳定），改 table-layout:fixed
   + 表头单元格百分比宽度 —— 实测列宽严格等于百分比、表头零错位。
   注：不要给单元格加 padding-right（原布局实测列间无实际间距，cells 宽度和 = 行宽），
   否则内容区被吃窄，「操作」列按钮会换行、行高从 47px 涨到 67px。 */
#bpmTodoPage #bpmTodoListWrap { table-layout: fixed; border-spacing: 0; }
#bpmTodoPage .bt-thead > div, #bpmTodoPage .bt-row > div { box-sizing: border-box; min-width: 0; overflow: hidden; }
#bpmTodoPage .bt-thead > div:nth-child(1), #bpmTodoPage .bt-row > div:nth-child(1) { width: 3%; }
#bpmTodoPage .bt-thead > div:nth-child(2), #bpmTodoPage .bt-row > div:nth-child(2) { width: 9%; }
#bpmTodoPage .bt-thead > div:nth-child(3), #bpmTodoPage .bt-row > div:nth-child(3) { width: 26%; }
#bpmTodoPage .bt-thead > div:nth-child(4), #bpmTodoPage .bt-row > div:nth-child(4) { width: 21%; }
#bpmTodoPage .bt-thead > div:nth-child(5), #bpmTodoPage .bt-row > div:nth-child(5) { width: 18%; }
#bpmTodoPage .bt-thead > div:nth-child(6), #bpmTodoPage .bt-row > div:nth-child(6) { width: 6%; }
#bpmTodoPage .bt-thead > div:nth-child(7), #bpmTodoPage .bt-row > div:nth-child(7) { width: 6%; }
#bpmTodoPage .bt-thead > div:nth-child(8), #bpmTodoPage .bt-row > div:nth-child(8) { width: 11%; }

/* 员工关系角色（.bpm-role-er，JS 按 getCurrentUser().role 打标）：
   提交人恒为同一人、合同类型只有一个短徽章 —— 这两列的宽度让给单据标题列，
   否则非合同单的长标题（如「吴晓斌发起的离职申请(人力业务伙伴部)」，
   没有工号/类型段可结构化）会被省略号吃掉。 */
#bpmTodoPage.bpm-role-er .bt-thead > div:nth-child(2),
#bpmTodoPage.bpm-role-er .bt-row > div:nth-child(2) { width: 8%; }
#bpmTodoPage.bpm-role-er .bt-thead > div:nth-child(3),
#bpmTodoPage.bpm-role-er .bt-row > div:nth-child(3) { width: 33%; }
#bpmTodoPage.bpm-role-er .bt-thead > div:nth-child(4),
#bpmTodoPage.bpm-role-er .bt-row > div:nth-child(4) { width: 15%; }

/* ===== v139（2026-09-24）合同期 / 保密期起止日对照 =====
   起因：一次签约会派生两条独立待办（「入职员工合同」+「保密协议」），
   要核对的是两份的起止日是否一致。
   做法：v137 曾在待办列表标题下直接显示两行起止日，信息外露过多；v139 把它移进
   单据详情页（结论带下方 .bd-ecpair）：一行一致性结论 + 两条等宽数字的起止日，
   需要核对时点开单据即可；列表只保留 v138 合并后的「保密协议 ›」徽章。 */
.bd-ecpair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bd-ecpair-h { flex: 0 0 100%; font-size: 12.5px; }
.bd-ecpair .bd-vchip { font-variant-numeric: tabular-nums; }

/* ===== v138（2026-09-24）保密协议并入合同主单那一行 =====
   配对成功（同一人 1 条合同类 + 1 条保密协议）时，保密协议不再单独成行，
   类型列给一个可点徽章直开该保密协议单据。 */
#bpmTodoPage .bt-c-type .bpm-secret-chip { cursor: pointer; border-style: dashed; }
#bpmTodoPage .bt-c-type .bpm-secret-chip:hover { background: #e3e8ff; }

/* ==========================================================================
   入职进度台账（员工关系角色专用）· v822
   在「我的待办」新增第三个视图（待办 / 已办 / 入职进度），替代线下 Excel 跟踪表。
   六个环节列刻意对齐同事原 Excel（到岗流程 / 入职信息填写 / 完成进入 PS /
   发起合同 / 签字环节 / 入职完毕）；每格状态由 BPM 真实节点流水推出，
   悬停可看该环节在 BPM 里的节点名 —— 不猜、不编。
   ========================================================================== */
.ep-wrap { display: block; }
.ep-tool-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ep-env-stat { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #6b6f80; }
.ep-env-stat b { color: #2a2d3a; font-weight: 600; }
.ep-env-stat .ep-warn { color: #b45309; }

.ep-legend { display: flex; align-items: center; gap: 16px; padding: 8px 14px 10px; font-size: 12px; color: #6b6f80; }
.ep-legend i.ep-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.ep-legend-hint { margin-left: auto; color: #9aa0b0; }

.ep-dot.ep-done, .ep-st.done i { background: #2fbf8f; }
.ep-dot.ep-doing, .ep-st.doing i { background: #4a9df0; }
.ep-dot.ep-pending, .ep-st.pending i { background: #d5d8e2; }
.ep-dot.ep-term, .ep-st.term i { background: #e06a6a; }

.ep-thead, .ep-row {
    display: grid;
    /* 🔴 12 列：序号 42 / 姓名 132 / 7 个环节 / 当前环节 / 状态 84 / 操作 132+。
       操作列从 54px 加宽到 132px：这一列现在要放「去审批」「催办」两个按钮（用户 2026-09-29）。
       环节列与「当前环节」用 minmax(x, Nfr) —— **fr 会自动吃掉容器剩余宽度**。
       历史坑：原先 12 列全写死 px（合计约 1092px），而内容区宽约 1600px，
       于是在 1920 屏上右侧空出一大块（用户 2026-09-28 截图反馈）。
       min 值保证窄屏下不塌陷；窄到装不下时由外层 .ep-scroll 横向滚动。 */
    grid-template-columns:
        42px minmax(132px, 1.1fr)
        repeat(7, minmax(86px, 1fr))
        minmax(210px, 2.5fr)
        84px minmax(132px, 0.6fr);
    align-items: center;
}
.ep-thead {
    background: #fafbfe; border-bottom: 1px solid #eceef5;
    font-size: 12px; color: #8b8fa3; font-weight: 500;
}
.ep-h { padding: 10px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-h.ep-c-idx, .ep-h.ep-c-act, .ep-h.ep-c-st { text-align: center; }
.ep-h.ep-c-stg { text-align: center; padding-left: 2px; padding-right: 2px; }

/* 表头与表体**必须共用一个横向滚动容器**，否则窄屏时行会滚动而表头不动 → 列错位。
   （渲染函数原先只把行包进 .ep-body-scroll，表头在外面，属于历史缺陷。） */
.ep-scroll { overflow-x: auto; min-width: 0; }

/* 「在职 / 含离职」切换：与同排的 .filter-select 同高同圆角，视觉上是一组控件 */
#bpmTodoPage .ep-svc {
    display: inline-flex; align-items: stretch; flex: none;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--white); overflow: hidden;
}
#bpmTodoPage .ep-svc-btn {
    padding: 11px 15px; font-size: 14px; line-height: 1.2; font-family: inherit;
    color: var(--text-secondary); background: transparent; border: none; cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
#bpmTodoPage .ep-svc-btn + .ep-svc-btn { border-left: 1px solid var(--border); }
#bpmTodoPage .ep-svc-btn:hover { background: #f6f7fb; }
#bpmTodoPage .ep-svc-btn.active { background: #efecfb; color: #6b46c1; font-weight: 600; }
.ep-row { border-bottom: 1px solid #f2f4f9; font-size: 13px; color: #2a2d3a; transition: background .15s; }
.ep-row:hover { background: #f7f9ff; }
.ep-row:last-child { border-bottom: none; }
.ep-cell { padding: 9px 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-cell.ep-c-idx, .ep-cell.ep-c-act, .ep-cell.ep-c-st { text-align: center; color: #9aa0b0; font-size: 12px; }
.ep-cell.ep-c-stg { text-align: center; padding-left: 2px; padding-right: 2px; }

/* 七个环节各自的状态芯片（写成字，不用光点） */
.ep-stg {
    display: inline-block; padding: 2px 7px; border-radius: 6px;
    font-size: 11.5px; line-height: 1.65; white-space: nowrap; cursor: help;
}
.ep-stg.done    { background: rgba(47,191,143,.14); color: #1f7d5c; }
.ep-stg.current { background: rgba(74,157,240,.16); color: #2b6cb0; box-shadow: 0 0 0 1px rgba(74,157,240,.28) inset; }
.ep-stg.pending { background: #f3f4f8; color: #a8aebd; }
.ep-stg.term    { background: rgba(224,106,106,.12); color: #a33; }
.ep-stg.warn    { background: rgba(224,162,63,.18); color: #8a5a10; }
.ep-stg.na      { background: transparent; color: #c9ced6; }

.ep-name { display: flex; align-items: baseline; gap: 5px; }
.ep-name b { font-weight: 600; }
.ep-code { color: #8b8fa3; font-size: 11.5px; font-family: ui-monospace, Consolas, monospace; }
.ep-code.ep-nocode { color: #a8aebd; border-bottom: 1px dotted #c9ced6; cursor: help; font-family: inherit; }

.ep-now { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; white-space: normal; }
.ep-now .ep-node { color: #2a2d3a; font-size: 12.5px; }
.ep-now .ep-who { color: #8b8fa3; font-size: 11.5px; }
.ep-now .ep-who.warn { color: #b45309; }

.ep-badge {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 11.5px; line-height: 1.6; white-space: nowrap;
}
.ep-badge.doing { background: rgba(74,157,240,.12); color: #2b6cb0; }
.ep-badge.done { background: rgba(47,191,143,.12); color: #1f7d5c; }
.ep-badge.terminated { background: rgba(224,106,106,.12); color: #a33; }
.ep-badge.ec_only { background: #f1f2f6; color: #8b8fa3; }
.ep-2nd { color: #b45309; font-weight: 600; font-size: 12px; }

.ep-view {
    border: 1px solid #e3e6f0; background: #fff; border-radius: 7px;
    padding: 3px 9px; font-size: 12px; color: #4a5568; cursor: pointer; transition: all .15s;
}
.ep-view:hover { border-color: #8a63d2; color: #6b46c1; background: #faf8ff; }

.ep-tbody .bt-empty { padding: 40px 0; text-align: center; color: #9aa0b0; font-size: 13px; }

/* 节点弹层 */
.ep-flow-modal .modal-body { max-height: 64vh; overflow-y: auto; }
.ep-flow-head { font-size: 12.5px; color: #6b6f80; margin-bottom: 10px; line-height: 1.9; }
.ep-flow-head b { color: #2a2d3a; }
.ep-flow-group { margin-bottom: 18px; }
.ep-flow-group h4 { font-size: 13px; color: #2a2d3a; font-weight: 500; margin: 0 0 6px; }
.ep-sub { font-size: 12px; color: #9aa0b0; margin: 10px 0 7px; }
.ep-nodes { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 7px; font-size: 12px; line-height: 1.5;
}
.ep-chip em { font-style: normal; font-size: 10.5px; opacity: .75; }
.ep-chip.done { background: rgba(47,191,143,.12); color: #1f7d5c; }
.ep-chip.current { background: rgba(74,157,240,.14); color: #2b6cb0; box-shadow: 0 0 0 1px rgba(74,157,240,.3) inset; }
.ep-chip.pending { background: #f3f4f8; color: #a8aebd; }
.ep-flow-list { border-left: 2px solid #eceef5; margin-left: 5px; padding-left: 14px; }
.ep-flow-item { position: relative; padding: 6px 0; font-size: 12.5px; color: #4a5568; }
.ep-flow-item::before {
    content: ''; position: absolute; left: -19px; top: 12px;
    width: 7px; height: 7px; border-radius: 50%; background: #d5d8e2;
}
.ep-flow-item.ok::before { background: #2fbf8f; }
.ep-flow-item.back::before { background: #e0a23f; }
.ep-flow-item .ep-t { color: #9aa0b0; margin-right: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; }
.ep-flow-item .ep-n { color: #2a2d3a; font-weight: 500; }
.ep-flow-item .ep-op { margin-left: 6px; font-size: 11.5px; }
.ep-flow-item .ep-op.back { color: #b45309; }
.ep-flow-empty { color: #9aa0b0; font-size: 12.5px; padding: 8px 0; }
.ep-now .ep-stage {
    display: inline-block; font-style: normal; font-size: 10.5px;
    color: #8a63d2; background: rgba(138,99,210,.10);
    border-radius: 4px; padding: 0 4px; margin-right: 4px; vertical-align: 1px;
}
.ep-none { color: #a8aebd; font-size: 12px; }

/* ============================================================
   矮窗口自适应（2026-09-29）
   侧边栏菜单内容总高固定 707px，可用高度 = 窗口高 - 116px，
   窗口可视高 < 823px 时最后一组「系统配置」被裁到视口外、点不到。
   仅在窗口矮时收紧内边距；>=860px 视口外观完全不变。
   （移动端 max-width:768px 走 off-canvas，不参与，故加 min-width 限定）
   ============================================================ */
@media (max-height: 860px) and (min-width: 769px) {
    .sidebar-logo { height: 60px; }
    .sidebar-menu { padding: 10px 12px; }
    .sidebar-footer { padding: 10px 20px; }
    .menu-item { padding: 10px 16px; margin-bottom: 4px; }
    .sidebar.collapsed .menu-item { padding: 10px; }
}

@media (max-height: 700px) and (min-width: 769px) {
    .sidebar-logo { height: 52px; }
    .sidebar-menu { padding: 8px 12px; }
    .sidebar-footer { padding: 8px 20px; }
    .menu-item { padding: 8px 14px; margin-bottom: 3px; font-size: 13px; }
    .sidebar.collapsed .menu-item { padding: 8px; }
}
/* ---------- 当前环节的动作按钮（去审批 / 催办 / 催不了） ----------
   只有**当前环节**给动作：在"我"待办里 → 去审批；在别人那儿 → 催办；
   无处理人（挂起）→ 催不了（给理由）；已完成/未开始 → 只有「节点」。 */
.ep-act {
    border: 1px solid #e3e6f0; background: #fff; border-radius: 7px;
    padding: 3px 8px; font-size: 12px; cursor: pointer; transition: all .15s;
    line-height: 1.7; white-space: nowrap;
}
.ep-act-go { border-color: #8a63d2; color: #6b46c1; background: #faf8ff; }
.ep-act-go:hover { background: #6b46c1; color: #fff; }
.ep-act-urge { border-color: #d9a13c; color: #96631a; background: #fffaf0; }
.ep-act-urge:hover { background: #d9a13c; color: #fff; }
.ep-act-off {
    color: #a8aebd; border: 1px dashed #dfe3ec; border-radius: 7px;
    padding: 3px 7px; font-size: 11.5px; cursor: help;
}
.ep-cell.ep-c-act { display: flex; align-items: center; justify-content: center; gap: 5px; }

/* 催办确认框：把"发给谁、发什么"原文摆出来，确认后才发 */
.ep-urge-modal .modal-body { padding: 4px 2px 0; }
.ep-urge-box { font-size: 13px; color: #2a2d3a; }
.ep-urge-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f2f4f9; }
.ep-urge-row:last-of-type { border-bottom: none; }
.ep-urge-row > span { flex: none; width: 42px; color: #8b8fa3; font-size: 12.5px; }
.ep-urge-row > b { font-weight: 500; }
.ep-urge-row > b.ep-urge-txt { font-weight: 400; color: #4a5568; line-height: 1.7; }
.ep-urge-row em { color: #8b8fa3; font-style: normal; font-family: ui-monospace, Consolas, monospace; }
.ep-urge-note { margin-top: 10px; color: #9aa0b0; font-size: 11.5px; }
/* 废流程标记：人已离职却还留着在办单 —— 不给催办，只提示去 BPM 终止 */
.ep-act-dead {
    border: 1px dashed #d9b3b3; color: #a56a6a; background: #fdf7f7;
    border-radius: 7px; padding: 3px 8px; font-size: 11.5px; cursor: help;
}
.ep-now .ep-orphan {
    display: inline-block; font-style: normal; font-size: 10.5px;
    color: #a56a10; background: rgba(224,162,63,.14);
    border-radius: 4px; padding: 0 4px; margin-left: 5px; vertical-align: 1px;
    cursor: help;
}

/* 统计条里可点击跳档的项（如「疑似废单 N」） */
#bpmTodoPage .ep-env-stat .ep-jump {
    cursor: pointer; border-bottom: 1px dashed currentColor;
}
#bpmTodoPage .ep-env-stat .ep-jump:hover { opacity: .78; }

/* 「这个节点的 BPM 页面不是标准审核页」兜底提示（见 api.js 里 _approvalBtns 判断） */
.bpm-no-approval {
    border: 1px dashed #e2c9a0; background: #fffaf1; border-radius: 8px;
    padding: 10px 12px; margin-bottom: 8px;
}
.bpm-no-approval .bpm-na-t { font-size: 13px; font-weight: 600; color: #8a5a10; margin-bottom: 4px; }
.bpm-no-approval .bpm-na-d { font-size: 12px; color: #8a7a5c; line-height: 1.7; margin-bottom: 8px; }

/* 「到岗信息查询」办理台（入职流程 · 员工关系组审核节点）。
   前缀 eg- ：`.bpm-dg-card` 已被折叠区的 datagrid 卡片布局占用（display:grid），
   同名会把这张表打散成网格（上一版就踩过），所以另起一个前缀。 */
.eg-card { border: 1px solid #e6e8f2; border-radius: 12px; background: #fff; overflow: hidden; }
.eg-empty { padding: 26px 18px; font-size: 13px; color: #8b8fa3; text-align: center; line-height: 1.9; }
.eg-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; background: #fcfcff; border-bottom: 1px solid #f0f1f7; }
.eg-title { font-size: 13.5px; font-weight: 600; color: #1a1d29; }
.eg-n { font-size: 12px; color: #8b8fa3; }
.eg-n b { color: #4c3fa8; font-weight: 600; }
.eg-hint { margin-left: auto; font-size: 12px; color: #a2a5b6; }
/* 本单 / 同批 标记：BPM 把同一批人放在同一张到岗页上，不标出来会被当成"两个人的流程跑到一起了" */
.eg-selftag, .eg-othertag { flex: none; padding: 1px 6px; border-radius: 999px;
    font-size: 11px; font-weight: 500; white-space: nowrap; }
.eg-selftag { background: #f0ecff; border: 1px solid #d3c9fa; color: #4c3fa8; }
.eg-othertag { background: #f5f6fa; border: 1px solid #e6e8f2; color: #9295a8; }
thead .eg-th-top { display: flex; align-items: center; gap: 6px; }
thead .eg-th-top .eg-pick { flex: none; }
.eg-pickrow.is-self span:first-of-type { font-weight: 600; }
.eg-pickrow.is-self .eg-code { color: #6d5bd0; }
.eg-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 9px 16px; font-size: 12px; color: #5a5f74; border-bottom: 1px solid #f4f5fa; }
.eg-meta b { color: #1a1d29; font-weight: 500; }
.eg-scroll { overflow: auto; }
/* 字段为行、人员为列：一屏之内逐字段横向对照，不用左右拖 */
table.eg-mx { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; table-layout: fixed; }
.eg-mx th, .eg-mx td { padding: 4px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid #f2f3f9; }
.eg-mx tbody tr:last-child th, .eg-mx tbody tr:last-child td { border-bottom: none; }
.eg-th-f { width: 152px; font-weight: 500; color: #6b7080; background: #fff; white-space: nowrap; }
thead .eg-th-f { background: #fcfcff; border-bottom: 1px solid #e9ebf4; color: #9295a8; }
.eg-td { min-width: 200px; }
.eg-mx tbody tr:hover .eg-th-f { background: #fafbff; }
.eg-mx tbody tr:hover .eg-td { background: #fafbff; }
thead .eg-th-p { background: #fbfbfe; border-bottom: 1px solid #e9ebf4; padding: 7px 10px; }
.eg-pick { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #1a1d29; cursor: pointer; }
.eg-pick input { margin: 0; flex: none; }
.eg-th-p em { display: block; margin: 3px 0 0 21px; font-size: 11.5px; font-style: normal; color: #b08a4a; }
.eg-th-p em.ok { color: #6f9a6f; }
.eg-grp th { background: #f7f8fc; font-size: 11.5px; font-weight: 600; color: #7b8098; letter-spacing: .5px; padding: 5px 10px; }
.eg-req { margin-left: 3px; font-style: normal; color: #d05a5a; }
.eg-req-soft { color: #c9a86a; }
.eg-ro { color: #9a9db0; }
/* 可编辑格：默认"没有边框"，悬停/聚焦才显形 —— 一屏 20+ 个输入框全描边会吵 */
.eg-in, .eg-sel { width: 100%; box-sizing: border-box; font: inherit; color: #1f2333;
    background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px;
    transition: border-color .12s, background .12s; }
.eg-td:hover .eg-in, .eg-td:hover .eg-sel { border-color: #dfe2ee; background: #fff; }
.eg-in:focus, .eg-sel:focus { outline: none; border-color: #b9b0ec; background: #fff; box-shadow: 0 0 0 3px rgba(109, 91, 208, .09); }
.eg-in.eg-bad, .eg-sel.eg-bad { border-color: #e8b0b0; background: #fffafa; }
/* 空着的必填格：一眼能扫出来（细虚线框 + 极浅暖底，不用红黄警报色） */
.eg-in.eg-todo, .eg-sel.eg-todo { border-style: dashed; border-color: #e6d3ae; background: #fffdf8; }
.eg-td:hover .eg-in.eg-todo, .eg-td:hover .eg-sel.eg-todo { border-color: #d8bd86; }
.eg-goto { display: inline-block; border: none; background: none; padding: 0; margin: 0;
    font: inherit; color: #8a5a12; cursor: pointer; text-align: left; text-decoration: underline;
    text-decoration-style: dotted; text-underline-offset: 3px; }
.eg-goto:hover { color: #6d4a0c; text-decoration-style: solid; }
.eg-foot { padding: 8px 16px 10px; font-size: 11.5px; color: #9a9db0; line-height: 1.8; background: #fcfcff; border-top: 1px solid #f2f3f9; }
.eg-foot i { font-style: normal; color: #d05a5a; }

/* 右栏：办理栏（办理对象 / 校验 / 三个动作 / 意见） */
.eg-rail-t { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0f172a; margin-bottom: 12px; }
.eg-rail-sec { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #eef0f7; }
.eg-rail-cmt { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.eg-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px;
    font-size: 12px; font-weight: 600; color: #3f4459; }
.eg-sec-h em { font-style: normal; font-weight: 400; font-size: 11.5px; color: #a2a5b6; }
.eg-picklist { display: flex; flex-direction: column; gap: 5px; }
.eg-pickrow { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #2a2d3a; cursor: pointer; }
.eg-pickrow input { margin: 0; flex: none; }
.eg-pickrow .eg-code { color: #a2a5b6; font-size: 11.5px; letter-spacing: -.2px; }
.eg-pickrow .eg-tag { margin-left: auto; font-size: 11px; color: #b08a4a; }
.eg-pickrow .eg-tag.ok { color: #6f9a6f; }
.eg-state { font-size: 12px; line-height: 1.85; color: #5a5f74; }
.eg-state.warn { color: #8a5a12; background: #fffaf1; border: 1px dashed #e2c9a0; border-radius: 7px; padding: 8px 10px; }
.eg-state.ok { color: #4a6b4a; background: #f7fbf7; border: 1px dashed #bcd9bc; border-radius: 7px; padding: 8px 10px; }
.eg-btns { display: flex; flex-direction: column; gap: 8px; }
.eg-btns .bpm-btn { justify-content: center; padding: 10px 0; }
.eg-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eg-btn-row .bpm-btn { padding: 9px 0; font-size: 12.5px; }
.eg-savebtn { border: 1px solid #dfe2ee; background: #fff; color: #3f4459; border-radius: 8px;
    padding: 9px 0; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color .12s, color .12s; }
.eg-savebtn:hover { border-color: #c6cbe0; color: #4c3fa8; }
.eg-savebtn:disabled { color: #c2c5d1; border-color: #edeef5; background: #fafafc; cursor: default; }
.eg-rail .bpm-approval-textarea { min-height: 70px; }

/* picker 格：点击弹出 BPM 同款选择（职务/导师），选中同时写名字+编码 */
.eg-pickcell { display: block; width: 100%; box-sizing: border-box; font: inherit; color: #1f2333;
    background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px;
    cursor: pointer; transition: border-color .12s, background .12s; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.eg-td:hover .eg-pickcell { border-color: #dfe2ee; background: #fff; }
.eg-pickcell i { float: right; color: #9a9db0; font-style: normal; margin-left: 4px; }
.eg-pickcell:hover { background: #f6f4fd; }

/* ===== 同步体检卡（2026-10-14 PS 同步规划第1步） ===== */
.sync-health-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
    overflow: hidden;
}
.sync-health-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px;
    border-bottom: 1px solid var(--border);
}
.sync-health-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.sync-health-refresh {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.sync-health-refresh:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}
.sync-health-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sync-health-table th {
    text-align: left;
    padding: 9px 22px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.015);
}
.sync-health-table td {
    padding: 11px 22px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}
.sync-health-table tr:last-child td { border-bottom: none; }
.sync-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.sync-dot--ok { background: #22a06b; }
.sync-dot--fail { background: #d64545; }
.sync-dot--none { background: #c0c4cc; }
.sync-health-foot {
    padding: 9px 22px;
    font-size: 12px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
}
.sync-health-loading {
    padding: 18px 22px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ===== 数据同步合并页（2026-10-15 部门+人员两页合一） ===== */
.onekey-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 22px;
    margin-bottom: 22px;
}
.onekey-bar__text {
    flex: 1;
    min-width: 0;
}
.onekey-bar__text h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 3px;
}
.onekey-bar__text p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}
.onekey-bar .emp-btn-primary {
    width: auto;          /* 覆盖 .emp-btn-primary 的 width:100% */
    flex: 0 0 auto;
    white-space: nowrap;
}
.sync-sec-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    margin: 18px 2px 8px;
}
.emp-sched-note {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 8px 0 0;
    line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════
   PS 数据同步页 v2（2026-10-28 重排）
   目标：一列到底；进度只有一处；日志默认收起
   ══════════════════════════════════════════════════════════════ */
.sync2-top { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin:0 0 18px; }
.sync2-top__title { margin:0 0 6px; font-size:20px; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; }
.sync2-top__desc { margin:0; max-width:760px; font-size:13px; line-height:1.65; color:var(--text-secondary); }
.sync2-top__btn { width:auto !important; flex:0 0 auto; height:42px; padding:0 22px; margin-top:2px; }

.sync2-card { background:var(--white); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); padding:20px 24px; margin-bottom:16px; }
.sync2-card__title { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:14px; font-weight:600; color:var(--text-primary); }

/* ── 进度卡 ── */
.sync2-progress__head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.sync2-progress__label { font-size:14px; font-weight:600; color:var(--text-primary); }
.sync2-progress__pct { font-size:13px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.sync2-bar { height:8px; border-radius:999px; background:#eef0f6; overflow:hidden; }
.sync2-bar__fill { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#667eea,#8b6ee8); transition:width .45s cubic-bezier(.16,1,.3,1); }
.sync2-progress.is-done .sync2-bar__fill { background:linear-gradient(90deg,#34c759,#2ea052); }
.sync2-progress.is-fail .sync2-bar__fill { background:linear-gradient(90deg,#f5576c,#d93a52); }
.sync2-progress__step { margin:9px 0 16px; min-height:18px; font-size:12px; line-height:1.5; color:var(--text-secondary); }

.sync2-phase { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid transparent; border-radius:10px; background:#fafbfd; transition:background .2s ease, border-color .2s ease; }
.sync2-phase + .sync2-phase { margin-top:8px; }
.sync2-phase__dot { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:#c9cfdd; }
.sync2-phase__main { flex:1; min-width:0; }
.sync2-phase__name { font-size:13px; font-weight:600; color:var(--text-primary); }
.sync2-phase__meta { margin-top:2px; font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sync2-phase__state { flex:0 0 auto; font-size:12px; color:var(--text-light); }
.sync2-phase__meta:empty { display:none; }
.sync2-phase[data-state="running"] { background:#f4f6ff; border-color:#e0e5ff; }
.sync2-phase[data-state="running"] .sync2-phase__dot { background:var(--primary); animation:sync2pulse 1.6s ease-out infinite; }
.sync2-phase[data-state="running"] .sync2-phase__state { color:var(--primary); font-weight:600; }
.sync2-phase[data-state="ok"] .sync2-phase__dot { background:#2ea052; }
.sync2-phase[data-state="ok"] .sync2-phase__state { color:#2ea052; }
.sync2-phase[data-state="fail"] { background:#fff5f6; border-color:#ffe0e4; }
.sync2-phase[data-state="fail"] .sync2-phase__dot { background:#e0414f; }
.sync2-phase[data-state="fail"] .sync2-phase__state { color:#e0414f; font-weight:600; }
@keyframes sync2pulse {
    0% { box-shadow:0 0 0 0 rgba(102,126,234,.35); }
    70% { box-shadow:0 0 0 7px rgba(102,126,234,0); }
    100% { box-shadow:0 0 0 0 rgba(102,126,234,0); }
}

/* ── 日志（默认收起）── */
.sync2-logtoggle { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); }
.sync2-logtoggle button { border:1px solid var(--border); background:#fff; color:var(--text-regular); font-size:12px; padding:5px 14px; border-radius:7px; cursor:pointer; transition:all .18s ease; }
.sync2-logtoggle button:hover { border-color:#c7cdfa; color:var(--primary); }
.sync2-logtoggle__hint { font-size:12px; color:var(--text-light); }
.sync2-logs { display:grid; gap:12px; margin-top:12px; }
.sync2-log__head { margin-bottom:6px; font-size:12px; color:var(--text-secondary); }
.sync2-log__body { margin:0; max-height:220px; overflow:auto; background:#f7f8fb; border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.6; color:var(--text-regular); white-space:pre-wrap; word-break:break-all; }

/* ── 两栏概况 ── */
.sync2-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.sync2-grid2 .sync2-card { display:flex; flex-direction:column; margin-bottom:0; }
.sync2-rows { flex:1; display:grid; gap:2px; margin-bottom:16px; }
.sync2-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid #f2f4f8; font-size:13px; }
.sync2-row:last-child { border-bottom:none; }
.sync2-row > span { color:var(--text-secondary); }
.sync2-row > b { font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.sync2-actions { display:flex; flex-wrap:wrap; gap:8px; }
.sync2-btn { border:1px solid var(--border); background:#fff; color:var(--text-regular); font-size:13px; padding:8px 16px; border-radius:9px; cursor:pointer; transition:all .18s ease; }
.sync2-btn:hover { border-color:#c7cdfa; color:var(--primary); }
.sync2-btn--primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.sync2-btn--primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; }
.sync2-btn--primary:disabled { opacity:.6; cursor:not-allowed; }
.sync2-btn--danger { border-color:#ffd9de; color:#e0414f; }
.sync2-btn--sm { padding:5px 12px; font-size:12px; border-radius:7px; }

/* ── 自动调度 ── */
.sync2-sched__row { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; color:var(--text-regular); }
.sync2-sched__dot { flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:#b7c0d8; }
.sync2-sched__hint { margin-top:10px; font-size:12px; color:var(--text-light); }

/* ── 更新历史 ── */
.sync2-history__tools { display:flex; align-items:center; gap:8px; margin-left:auto; }
.sync2-history__tools select { border:1px solid var(--border); border-radius:7px; padding:5px 10px; font-size:12px; color:var(--text-regular); background:#fff; }

/* ── 折叠块（配置 / 体检）── */
.sync2-details { background:var(--white); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); margin-bottom:16px; overflow:hidden; }
.sync2-details > summary { display:flex; align-items:center; gap:10px; padding:16px 24px; cursor:pointer; list-style:none; }
.sync2-details > summary::-webkit-details-marker { display:none; }
.sync2-details > summary::after { content:'展开'; margin-left:auto; font-size:12px; color:var(--text-light); }
.sync2-details[open] > summary::after { content:'收起'; }
.sync2-details__hint { font-size:12px; color:var(--text-light); }
.sync2-details .sync-health-body { padding:0 24px 20px; }
.sync2-details > summary .sync-health-refresh { margin-left:8px; }
.sync2-legacy { display:none !important; }

@media (max-width: 1100px) {
    .sync2-grid2 { grid-template-columns:1fr; }
    .sync2-top { flex-direction:column; gap:14px; }
}