/* 人文党建灯塔平台 - 主样式文件 */

/* ===== CSS层级和加载顺序（符合系统样式优化.md规范） ===== */
/* CSS Layers - 统一加载顺序，确保样式优先级清晰 */
/* 层级顺序（从低到高）：
   1. reset - 样式重置层（基础重置）
   2. tokens - 变量定义层（CSS变量）
   3. base - 基础样式层（全局基础样式）
   4. components - 组件样式层（按钮、表单、卡片等）
   5. modules - 模块样式层（页面特定样式）
   6. overrides - 覆盖层（特殊覆盖样式）
*/
@layer reset, tokens, base, components, modules, overrides;

/* 首屏门闸样式 - 防止权限元素闪现 */
/* 默认隐藏所有权限相关元素，等JS完整鉴权后再显示 */
.admin-only,
.secretary-only,
.member-only,
.role-specific {
    display: none !important;
}

/* 门闸移除后的正常显示 */
html.role-admin .admin-only,
html.role-secretary .secretary-only,
html.role-member .member-only,
html.role-guest .guest-only {
    display: block !important;
}

/* 内联权限元素 */
[data-role="admin"],
[data-role="secretary"],
[data-role="member"],
[data-role="guest"] {
    display: none !important;
}

html.role-admin [data-role="admin"],
html.role-secretary [data-role="secretary"],
html.role-member [data-role="member"],
html.role-guest [data-role="guest"] {
    display: block !important;
}

/* CSS变量定义 - 统一配色方案（符合系统样式优化规范） */
@layer tokens {
:root {
    /* ===== 统一色彩体系（符合党建主题配色方案） ===== */
    /* 主色系 - 党建红色主题，使用color-前缀，符合优化文档规范 */
    --color-primary: #A11616;           /* 主色（深红色，党建主题） */
    --color-primary-light: #C94841;     /* 主色浅色 */
    --color-primary-dark: #600B0B;      /* 主色深色 */
    --color-secondary: #D6A34A;         /* 次级色（党徽金色） */
    --color-secondary-light: #F5D9A6;   /* 次级色浅色 */
    --color-secondary-dark: #B3802D;    /* 次级色深色 */
    --color-accent: #059669;            /* 强调色（绿色，保留用于成功状态） */
    --color-accent-light: #6ee7b7;      /* 强调色浅色 */
    --color-accent-dark: #047857;       /* 强调色深色 */
    
    /* 功能色 */
    --color-warning: #d97706;           /* 警告色 */
    --color-danger: #dc2626;            /* 危险色 */
    --color-info: #A11616;               /* 信息色（改为党建红） */
    --color-success: #28a745;            /* 成功色（保持绿色） */
    
    /* 党建主题渐变 */
    --gradient-primary: linear-gradient(135deg, #A11616 0%, #D6A34A 100%);
    --gradient-primary-dark: linear-gradient(135deg, #991b1b 0%, #f59e0b 100%);
    --gradient-header: linear-gradient(135deg, #A11616 0%, #991b1b 50%, #600B0B 100%);
    
    /* 背景和文本色 */
    --color-background: #f8f9fa;         /* 背景色 */
    --color-text: #1f2937;              /* 主要文本颜色 */
    --color-text-secondary: #6b7280;    /* 次要文本颜色 */
    --color-border: #e5e7eb;            /* 边框颜色 */
    --color-text-on-primary: #ffffff;    /* 主色上的文本颜色（白色，高对比度） */
    
    /* ===== 兼容性变量（保留现有变量，向后兼容） ===== */
    /* 主题色彩 - 红色、金色、白色为主（更新为党建主题配色） */
    --primary-color: #A11616;      /* 主红色（党建主题深红） */
    --primary-light: #fef2f2;      /* 浅红色背景 */
    --primary-dark: #600B0B;       /* 深红色 */
    --secondary-color: #D6A34A;    /* 金色（党徽金色） */
    --secondary-light: #F5D9A6;    /* 浅金色背景 */
    --accent-color: #059669;       /* 绿色强调色（保留用于成功状态） */
    --warning-color: #d97706;      /* 警告色（保留原有值，向后兼容） */
    --danger-color: #dc2626;       /* 危险色（保留原有值，向后兼容） */
    --info-color: #A11616;         /* 信息色（改为党建红） */
    
    /* 中性色 */
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* 间距 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* 圆角 */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* ===== 统一字体系统（符合系统样式优化.md规范） ===== */
    /* 字体系列 - 统一所有模块使用相同的字体系列 */
    --font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    
    /* 字体大小 - 统一管理 */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    
    /* 行高 - 统一管理 */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* 字重 - 统一管理 */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ===== 统一响应式断点（符合系统样式优化.md规范） ===== */
    /* 响应式断点 - 所有模块使用相同的断点 */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1600px;
    
    /* 布局 */
    --header-height: 100px;
    --sidebar-width: 200px;
    --sidebar-collapsed-width: 64px;
    
    /* z-index 标尺 */
    --z-dropdown: 1000;
    --z-modal-overlay: 1010;
    --z-modal-content: 1020;
    --z-tooltip: 1030;
    --z-notification: 1040;
    
    /* 状态色系统 */
    --status-pending: #ffc107;
    --status-approved: #28a745;
    --status-rejected: #dc3545;
    --status-draft: #6c757d;
    --status-reviewing: #fd7e14;
    --status-completed: #20c997;
}
}

@layer reset {
/* ===== 统一字体应用（符合系统样式优化.md规范） ===== */
/* 全局字体设置 - 确保所有模块使用统一的字体系列 */
html, body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
}

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    line-height: 1.5;
}

body {
    font-family: var(--font-family);
    background-color: #ffffff;  /* 改为纯白色 */
    color: var(--gray-800);
}
}

@layer base {
/* 顶部导航栏 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--gradient-header);
    color: var(--white);
    z-index: 10000 !important;
    box-shadow: 0 4px 20px rgba(161, 22, 22, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--spacing-xl);
    gap: var(--spacing-xl);
    max-width: 100%;
    position: relative;
    z-index: 1;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--white);
    transition: all 0.2s ease;
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.2s ease;
}

.logo:hover::before {
    left: 100%;
}

.logo:hover {
    transform: translateY(-1px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.logo i {
    font-size: var(--font-size-2xl);
    color: var(--secondary-color);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.2s ease;
}

.logo:hover i {
    transform: scale(1.1) rotate(5deg);
    color: #fbbf24;
}

.logo-img {
    height: 85px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: all 0.2s ease;
    margin-right: var(--spacing-sm);
}

.logo:hover .logo-img {
    filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(45deg);
    transform: scale(1.05);
}

.header-center {
    flex: 1;
    max-width: 500px;
    margin: 0 var(--spacing-xl);
}

.search-bar {
    display: flex;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
    height: 50px;
}

.search-bar::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--primary-color));
    border-radius: var(--radius-lg);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.search-bar:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.search-bar:focus-within::before {
    opacity: 1;
}

.search-bar input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    outline: none;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    background: transparent;
    transition: all 0.2s ease;
}

.search-bar input::placeholder {
    color: var(--gray-400);
    transition: color 0.3s ease;
}

.search-bar input:focus::placeholder {
    color: var(--gray-300);
}

.search-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.search-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.2s ease;
}

.search-btn:hover::before {
    left: 100%;
}

.search-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), #991b1b);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.search-btn:active {
    transform: scale(0.95);
}

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

/* API状态指示器 */
.api-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 15px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.api-status::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.2s ease;
}

.api-status:hover::before {
    left: 100%;
}

.api-status.online {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.2), rgba(108, 117, 125, 0.1));
    color: #6c757d;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.api-status.online:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.2);
}

.api-status.offline {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
    color: #ffc107;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.api-status.offline:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.2);
}

.api-status i {
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.api-status:hover i {
    transform: scale(1.1);
}

.api-status.offline i {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

.user-info {
    position: relative;
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
.header .menu-toggle:hover,
.header-container .menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2); /* 确保悬停背景显示 */
    border-color: rgba(255, 255, 255, 0.4); /* 确保边框显示 */
    transform: translateY(-2px);
    /* 使用系统红色主题的阴影，与整体风格一致 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(220, 38, 38, 0.2);
    backdrop-filter: blur(15px);
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
.header .user-avatar,
.header-container .user-avatar,
.menu-toggle .user-avatar {
    width: 42px; /* 确保尺寸正确 */
    height: 42px; /* 确保尺寸正确 */
    border-radius: 50%; /* 确保圆形显示 */
    background: var(--gradient-primary); /* 党建主题渐变背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* 确保白色文字 */
    font-size: var(--font-size-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(161, 22, 22, 0.3), 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3); /* 确保边框显示 */
    flex-shrink: 0; /* 防止头像被压缩 */
}

/* 确保头像内的图片正确显示 */
.header .user-avatar img,
.header-container .user-avatar img,
.menu-toggle .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.user-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
.header .menu-toggle:hover .user-avatar,
.header-container .menu-toggle:hover .user-avatar {
    transform: scale(1.05);
    /* 使用系统红色主题的阴影，与整体风格一致 */
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.menu-toggle:hover .user-avatar::before {
    opacity: 1;
}

.user-profile > .user-info .user-name {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.user-profile > .user-info:hover .user-name {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.menu-toggle .fa-chevron-down {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: var(--spacing-xs);
    flex-shrink: 0; /* 防止箭头被压缩 */
    padding-left: 4px; /* 与用户信息保持间距 */
}

.menu-toggle:hover .fa-chevron-down {
    color: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

.menu-toggle.active {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(161, 22, 22, 0.3);
}

.menu-toggle.active .fa-chevron-down {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 1);
}

.user-profile > .user-info .user-role {
    font-size: var(--font-size-xs);
    color: #ffffff;
    background: none;
    padding: 0;
    border-radius: 0;
    transition: all 0.2s ease;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.2px;
    border: none;
    box-shadow: none;
}

.user-profile > .user-info:hover .user-role {
    color: #fbbf24;
    text-shadow: 0 1px 4px rgba(251, 191, 36, 0.3);
    transform: translateY(-1px);
}

.user-menu {
    position: relative;
}

.menu-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-xl);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.menu-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.menu-toggle:hover::before {
    opacity: 1;
}

.menu-toggle:hover {
    transform: translateY(-1px);
    color: #fbbf24;
    text-shadow: 0 1px 3px rgba(251, 191, 36, 0.3);
}

.menu-toggle i {
    transition: transform 0.3s ease;
}

.menu-toggle:hover i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
    min-width: 240px;
    padding: 0;
    display: none;
    z-index: 10002 !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.dropdown-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: dropdownFadeIn 0.3s ease-out;
}

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

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--gray-700);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.1), transparent);
    transition: left 0.2s ease;
}

.dropdown-item:hover::before {
    left: 100%;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, var(--primary-light), rgba(220, 38, 38, 0.05));
    color: var(--primary-color);
    transform: translateX(4px);
}

.dropdown-item i {
    transition: all 0.2s ease;
}

.dropdown-item:hover i {
    transform: scale(1.1);
    color: var(--primary-color);
}

.dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
    margin: var(--spacing-sm) var(--spacing-md);
}

/* 下拉菜单头部样式 */
.dropdown-header {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.user-info-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0; /* 允许flex子元素收缩 */
}

.user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: var(--font-size-lg);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* 防止头像被压缩 */
}

/* 确保下拉菜单头像内的图片正确显示 */
.user-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.user-details-header {
    flex: 1;
}

.user-name-header {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 2px;
}

.user-role-header {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
/* 退出登录项目特殊样式 */
.user-dropdown .logout-item,
.dropdown-menu .logout-item {
    color: #dc2626;
}

.user-dropdown .logout-item:hover,
.dropdown-menu .logout-item:hover {
    background: #fef2f2;
    color: #b91c1c;
}

/* 用户个人信息样式 */
.user-profile-info {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

/* 简化的用户资料区域样式 */
.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    position: relative;
    min-width: 40px;
    justify-content: center;
}

.user-profile:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 简单头像容器样式 */
.simple-avatar-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.simple-avatar {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.simple-avatar:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.simple-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* 下拉箭头样式 */
.dropdown-arrow {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    margin-left: 4px;
}

.user-profile:hover .dropdown-arrow {
    color: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}


/* ✅ 优化：移除!important，使用高特异性选择器 */
.user-dropdown .dropdown-user-details * {
    color: inherit;
}

/* 最终强制覆盖 - 确保文字颜色 */
.user-dropdown h3,
.user-dropdown .dropdown-user-details h3,
.dropdown-menu .user-dropdown h3 {
    color: #1e293b;
    text-shadow: none;
}

.user-dropdown p,
.user-dropdown .dropdown-user-details p,
.dropdown-menu .user-dropdown p {
    color: #64748b;
    text-shadow: none;
}

.profile-avatar {
    flex-shrink: 0;
}

.profile-details {
    flex: 1;
}

.profile-item {
    display: flex;
    margin-bottom: var(--spacing-md);
    align-items: center;
}

.profile-item label {
    font-weight: 600;
    color: var(--gray-700);
    min-width: 80px;
    margin-right: var(--spacing-md);
}

.profile-item span {
    color: var(--gray-600);
    flex: 1;
}

/* 用户设置表单样式 */
.user-settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ===== 统一表单样式（符合系统样式优化.md规范） ===== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.form-group label {
    font-weight: 500;
    color: var(--color-text);              /* 使用统一文本颜色变量 */
    font-size: var(--font-size-sm);
    font-family: var(--font-family);       /* 统一字体 */
    margin-bottom: var(--spacing-xs);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;                    /* 统一内边距 */
    border: 2px solid var(--color-border); /* 使用统一边框颜色变量 */
    border-radius: var(--radius-md);       /* 统一圆角 */
    font-size: var(--font-size-base);      /* 统一字体大小 */
    font-family: var(--font-family);       /* 统一字体 */
    background: var(--white);
    color: var(--color-text);              /* 使用统一文本颜色变量 */
    transition: all 0.3s ease;              /* 统一过渡效果 */
    width: 100%;
    box-sizing: border-box;
}

/* 可访问性：表单输入框焦点样式 - 符合WCAG 2.0标准 */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);     /* 使用统一主色变量 */
    box-shadow: 0 0 0 3px rgba(161, 22, 22, 0.1); /* 使用主色透明度 */
}

.form-group input[readonly] {
    background: var(--gray-100);
    color: var(--gray-500);
}

/* 主容器布局 */
.main-container {
    display: flex;
    margin-top: var(--header-height, 100px); /* 默认100px，防止member样式未加载时被header遮挡 */
    /* ✅ 修复页面底部空白问题 - 移除强制最小高度 */
    /* min-height: calc(100vh - var(--header-height)); */
}

/* 侧边栏 */
.sidebar {
    width: var(--sidebar-width);
    background: var(--white);
    border-right: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    transition: width 0.3s ease;
    z-index: 999;
}

.sidebar-nav {
    padding: var(--spacing-lg) 0;
}

.nav-list {
    list-style: none;
}

.nav-item {
    margin-bottom: var(--spacing-xs);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--gray-600);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all 0.2s;
    position: relative;
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
.sidebar .nav-link:hover,
.sidebar-nav .nav-link:hover {
    background: var(--primary-light); /* 确保悬停状态背景色正确显示 */
    color: var(--primary-color); /* 确保悬停状态文字颜色正确显示 */
}

.sidebar .nav-link.active,
.sidebar-nav .nav-link.active {
    background: var(--primary-color); /* 确保active状态背景色正确显示 */
    color: var(--white); /* 确保active状态文字颜色正确显示 */
}

.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--secondary-color);
}

.nav-link i {
    width: 20px;
    text-align: center;
    font-size: var(--font-size-lg);
}

/* 导航组（主版块和子版块）样式 */
.nav-group {
    position: relative;
}

.nav-group-header {
    cursor: pointer;
    user-select: none;
}

.nav-group-header .nav-group-icon {
    margin-left: auto;
    transition: transform 0.3s ease;
    font-size: 12px;
}

.nav-group.expanded .nav-group-header .nav-group-icon {
    transform: rotate(180deg);
}

.nav-group.collapsed .nav-sub-list {
    display: none;
}

.nav-sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f8f9fa;
    border-top: 1px solid #e5e7eb;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-group.expanded .nav-sub-list {
    max-height: 500px;
    padding: 8px 0;
}

.nav-sub-item {
    margin: 0;
}

.nav-sub-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) 48px;
    color: var(--gray-600);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 400;
    transition: all 0.2s;
    position: relative;
}

.nav-sub-link:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

.nav-sub-link.active {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 500;
}

.nav-sub-link.active::before {
    content: '';
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: var(--secondary-color);
    border-radius: 2px;
}

.nav-sub-link i {
    width: 18px;
    text-align: center;
    font-size: var(--font-size-md);
}

/* 内容区域 */
/* ✅ 优化：移除!important，使用高特异性选择器 */
.main-container .content-area,
body .content-area {
    flex: 1;
    padding: var(--spacing-md);
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;  /* 确保这里是白色 */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: auto;  /* 从内联样式迁移，确保高度自适应 */
}

/* 页面样式 */
.page {
    display: none;
}

.page.active {
    display: block;
}

/* ===== 统一标题栏样式规范（以首页概览为准） ===== */
/* ✅ 优化：使用高特异性选择器替代!important */
/* 标准标题栏容器样式 - 使用页面容器作用域提高特异性 */
.content-area .page-header,
.page.active .page-header,
.page .page-header,
#developmentPage .page-header,
#pointsPage .page-header,
#membersPage .page-header,
#reportsPage .page-header,
#materialsPage .page-header,
#archivesPage .page-header,
#violationsPage .page-header,
#statisticsPage .page-header,
#settingsPage .page-header,
#profilePage .page-header,
#govDocsPage .page-header,
#weekly-tasksPage .page-header,
#organization-lifePage .page-header {
    background: var(--gradient-primary);
    color: white;
    padding: 24px;
    margin: 0 0 24px 0;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: rgba(161, 22, 22, 0.3) 0px 8px 32px 0px;
}

/* 标准标题样式 - 使用页面容器作用域提高特异性 */
.content-area .page-header .page-title,
.page.active .page-header .page-title,
.page .page-header .page-title,
#developmentPage .page-header .page-title,
#pointsPage .page-header .page-title,
#membersPage .page-header .page-title,
#reportsPage .page-header .page-title,
#materialsPage .page-header .page-title,
#archivesPage .page-header .page-title,
#violationsPage .page-header .page-title,
#statisticsPage .page-header .page-title,
#settingsPage .page-header .page-title,
#profilePage .page-header .page-title,
#govDocsPage .page-header .page-title,
#weekly-tasksPage .page-header .page-title,
#organization-lifePage .page-header .page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* 标题图标样式 - 使用页面容器作用域提高特异性 */
.content-area .page-header .page-title i,
.page.active .page-header .page-title i,
.page .page-header .page-title i,
#developmentPage .page-header .page-title i,
#pointsPage .page-header .page-title i,
#membersPage .page-header .page-title i,
#reportsPage .page-header .page-title i,
#materialsPage .page-header .page-title i,
#archivesPage .page-header .page-title i,
#violationsPage .page-header .page-title i,
#statisticsPage .page-header .page-title i,
#settingsPage .page-header .page-title i,
#profilePage .page-header .page-title i,
#govDocsPage .page-header .page-title i,
#weekly-tasksPage .page-header .page-title i,
#organization-lifePage .page-header .page-title i {
    color: white;
    font-size: 28px;
}

.page-actions {
    display: flex;
    gap: var(--spacing-md);
}

@layer components {
/* Font Awesome 统一规则 */
.fas, .fa-solid {
    font-family: "Font Awesome 6 Free", sans-serif !important;
    font-weight: 900 !important;
}

.far, .fa-regular {
    font-family: "Font Awesome 6 Free", sans-serif !important;
    font-weight: 400 !important;
}

.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands", sans-serif !important;
    font-weight: 400 !important;
}

.fa {
    font-family: "Font Awesome 6 Free", sans-serif !important;
    font-weight: 900 !important;
}

/* 按钮样式 */
/* ===== 统一按钮样式（符合系统样式优化.md规范） ===== */
/* 基础按钮样式 - 统一大小、圆角、阴影、字体 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 12px 24px;                    /* 统一内边距 */
    background: var(--color-primary);      /* 使用统一颜色变量 */
    color: var(--white);
    text-decoration: none;
    border-radius: var(--radius-md);       /* 统一圆角 */
    font-weight: 500;
    font-size: var(--font-size-base);      /* 统一字体大小 */
    font-family: var(--font-family);       /* 统一字体 */
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;              /* 统一过渡效果 */
    white-space: nowrap;
    box-shadow: var(--shadow-sm);           /* 统一阴影 */
    min-width: 120px;                      /* 统一最小宽度 */
}

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

.btn:hover:not(:disabled) {
    background: var(--color-primary-dark);
    transform: translateY(-2px);           /* 统一悬停效果 */
    box-shadow: var(--shadow-md);
}

.btn:active:not(:disabled) {
    transform: translateY(0);              /* 统一点击效果 */
    box-shadow: var(--shadow-sm);
}

/* 可访问性：键盘焦点样式 - 符合WCAG 2.0标准 */
.btn:focus,
.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-md), 0 0 0 3px rgba(161, 22, 22, 0.3);
}

/* 按钮变体 - 使用统一颜色变量，确保颜色对比度符合WCAG 2.0标准 */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);   /* 高对比度文本，符合WCAG标准 */
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-text-on-primary);   /* 高对比度文本，符合WCAG标准 */
}

.btn-secondary:hover:not(:disabled) {
    background: var(--color-secondary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-success {
    background: var(--color-success);
    color: var(--color-text-on-primary);   /* 高对比度文本，符合WCAG标准 */
}

.btn-success:hover:not(:disabled) {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-warning {
    background: var(--color-warning);
    color: var(--color-text-on-primary);   /* 高对比度文本，符合WCAG标准 */
}

.btn-warning:hover:not(:disabled) {
    background: var(--color-secondary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: var(--color-danger);
    color: var(--color-text-on-primary);   /* 高对比度文本，符合WCAG标准 */
}

.btn-danger:hover:not(:disabled) {
    background: var(--color-danger);
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 按钮尺寸变体 */
.btn-xs {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    min-width: 60px;
    border-radius: var(--radius-sm);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    min-width: 80px;
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
    min-width: 160px;
}

.btn-xl {
    padding: 20px 40px;
    font-size: var(--font-size-xl);
    min-width: 200px;
}

/* 按钮outline样式 - 统一边框按钮 */
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
}

.btn-outline:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
}

.btn-outline-primary:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-secondary {
    background: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    box-shadow: none;
}

.btn-outline-secondary:hover:not(:disabled) {
    background: var(--color-secondary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-success {
    background: transparent;
    color: var(--color-success);
    border: 2px solid var(--color-success);
    box-shadow: none;
}

.btn-outline-success:hover:not(:disabled) {
    background: var(--color-success);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-danger {
    background: transparent;
    color: var(--color-danger);
    border: 2px solid var(--color-danger);
    box-shadow: none;
}

.btn-outline-danger:hover:not(:disabled) {
    background: var(--color-danger);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-warning {
    background: transparent;
    color: var(--color-warning);
    border: 2px solid var(--color-warning);
    box-shadow: none;
}

.btn-outline-warning:hover:not(:disabled) {
    background: var(--color-warning);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 按钮组样式 - 统一按钮组布局 */
.btn-group {
    display: inline-flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.btn-group .btn {
    margin: 0;
}

.btn-group-vertical {
    display: inline-flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: stretch;
}

.btn-group-vertical .btn {
    width: 100%;
    margin: 0;
}
}

/* ------- 基础组件（components 层） ------- */
@layer components {
  /* 注意：--primary-color 等变量已在 @layer tokens 中定义，这里不再重复定义 */
  /* 避免变量覆盖导致导航栏样式失效 */
  :root{
    /* 移除重复的变量定义，使用 @layer tokens 中已定义的变量 */
    /* --primary-color: var(--primary-color, #6366f1); */ /* 已移除 - 避免覆盖 tokens 层中的定义 */
    /* --primary-dark: var(--primary-dark, #4f46e5); */ /* 已移除 - 避免覆盖 tokens 层中的定义 */
    --accent-color: var(--accent-color, #8b5cf6);
    --success-color: var(--success-color, #10b981);
    --warning-color: var(--warning-color, #f59e0b);
    --danger-color:  var(--danger-color,  #ef4444);
    --muted: #6b7280;
    --card-bg: #ffffff;
    --radius-xl: 14px;
    --shadow-1: 0 6px 18px rgba(0,0,0,.06);
  }

  /* 统一按钮 */
  .u-btn{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.5rem 1rem; border:0; border-radius: var(--radius-xl);
    background:#f3f4f6; color:#111827; cursor:pointer;
    transition:.2s ease; font-weight:600;
  }
  .u-btn:hover{ transform:translateY(-1px); filter:brightness(1.03); }
  .u-btn--primary{ color:#fff; background:linear-gradient(135deg,var(--primary-color),var(--primary-dark)); }
  .u-btn--danger{ color:#fff; background:linear-gradient(135deg,#f87171,var(--danger-color)); }
  .u-btn--warning{ color:#fff; background:linear-gradient(135deg,#fbbf24,var(--warning-color)); }
  .u-btn--success{ color:#fff; background:linear-gradient(135deg,#34d399,var(--success-color)); }
  .u-btn--icon{ width:40px; aspect-ratio:1/1; padding:0; justify-content:center; }

  /* 状态徽章 */
  .u-badge{ display:inline-flex; align-items:center; gap:.35rem;
    padding:.2rem .6rem; border-radius:999px; font-weight:600; font-size:.78rem; }
  .u-badge--ok{     background:rgba(16,185,129,.12); color:#059669; }
  .u-badge--warn{   background:rgba(245,158,11,.12); color:#b45309; }
  .u-badge--error{  background:rgba(239,68,68,.12); color:#b91c1c; }
  .u-badge--info{   background:rgba(99,102,241,.12); color:#4338ca; }

  /* 页头 Hero */
  .u-page-hero{
    background:linear-gradient(135deg,var(--primary-color),var(--accent-color));
    color:#fff; border-radius: var(--radius-xl); padding:1rem 1.25rem; box-shadow: var(--shadow-1);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }

  /* 统一 Page Header */
  .u-page-header{
    padding:24px 32px;
    border-radius: var(--radius-xl);
    background: var(--gradient-primary);
    color: #fff;
    margin-bottom: 24px;
    box-shadow: 0 12px 32px rgba(161,22,22,0.25);
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .u-page-header .title{
    font-size: 28px;
    font-weight: 700;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .u-page-header .subtitle{
    font-size: 16px;
    opacity:.9;
    font-weight:500;
  }

  /* 统一卡片 */
  .u-card{
    background:#fff;
    border-radius: var(--radius-xl);
    border:1px solid rgba(0,0,0,0.05);
    padding:24px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .u-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(0,0,0,0.08);
  }
  .u-card--party{
    border-left:4px solid var(--color-primary);
    padding-left:20px;
  }

  /* 统一 Toolbar */
  .u-toolbar{
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(10px);
    border-radius: var(--radius-xl);
    padding:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items:center;
    justify-content:space-between;
  }

  /* 统计卡片 */
  .u-stat-grid{ display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .u-stat-card{ background:var(--card-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-1);
    padding:1rem; display:flex; align-items:center; justify-content:space-between; }
  .u-stat-card .num{ font-size:1.75rem; font-weight:800; }

  /* 标签页 */
  .u-tabs{ display:flex; gap:.5rem; border-bottom:1px solid #eef2f7; }
  .u-tabs .tab{ padding:.6rem 1rem; border-radius: 10px 10px 0 0; font-weight:700; color:#6b7280;
    position:relative; }
  .u-tabs .tab.is-active{ color:var(--primary-dark); background:#fff; box-shadow:0 -2px 12px rgba(0,0,0,.05); }

  /* 表格：表头吸顶 + 行高一致 + 操作区等宽 */
  .u-table{ width:100%; border-collapse:separate; border-spacing:0; }
  .u-table thead th{
    position:sticky; top:0;
    background:#f3f4f6;
    z-index:2;
    font-weight:700;
    color:#374151;
    border-bottom:2px solid #e5e7eb;
  }
  .u-table th, .u-table td{
    padding:.9rem 1rem;
    border-bottom:1px solid #eef2f7;
    vertical-align:middle;
  }
  .u-table tbody tr:hover{
    background:#f9fafb;
    cursor:pointer;
  }
  .u-table td:first-child{
    font-weight:600;
    color:#111827;
  }
  .u-actions{ display:flex; gap:.5rem; }

  /* 党建特色元素 */
  .u-stripe-party{
    width:6px;
    border-radius:999px;
    background:linear-gradient(180deg,#a11616,#dc2626);
  }
  .u-icon-party{
    color:var(--color-primary);
    font-size:1.25rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .u-badge-party{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    padding:.2rem .6rem;
    border-radius:999px;
    background:#dc2626;
    color:#fff;
    font-weight:600;
    font-size:.78rem;
  }

  /* 统一按钮体系 */
  .u-btn-primary{
    background:var(--color-primary);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px 20px;
    font-weight:600;
    transition:.2s ease;
  }
  .u-btn-primary:hover{
    background:var(--color-primary-dark);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(161,22,22,0.25);
  }
  .u-btn-secondary{
    background:#fff;
    border:2px solid var(--color-primary);
    color:var(--color-primary);
    border-radius:10px;
    padding:10px 20px;
    font-weight:600;
    transition:.2s ease;
  }
  .u-btn-secondary:hover{
    background:var(--color-primary-light);
  }
  .u-btn-info{
    background:linear-gradient(135deg,#7c3aed,#4f46e5);
    color:#fff;
    border-radius:10px;
    padding:10px 20px;
    font-weight:600;
  }
  .u-btn-danger{
    background:#ef4444;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px 20px;
    font-weight:600;
  }
  .u-btn-icon{
    width:36px;
    height:36px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--color-primary-light);
    color:var(--color-primary);
    border:none;
  }

  /* 统一模态框 */
  .u-modal{
    background:#fff;
    border-radius: var(--radius-xl);
    box-shadow:0 30px 60px rgba(0,0,0,0.15);
    padding:32px;
    animation:fadeSlide .25s ease;
  }
  .u-modal-header{
    border-left:4px solid var(--color-primary);
    padding-left:16px;
    margin-bottom:20px;
    font-size:20px;
    font-weight:700;
  }
}
}

/* 状态通用类 */
.is-pending {
    background-color: var(--status-pending);
    color: #212529;
}

.is-approved {
    background-color: var(--status-approved);
    color: white;
}

.is-rejected {
    background-color: var(--status-rejected);
    color: white;
}

.is-draft {
    background-color: var(--status-draft);
    color: white;
}

.is-reviewing {
    background-color: var(--status-reviewing);
    color: white;
}

.is-completed {
    background-color: var(--status-completed);
    color: white;
}

/* 统计卡片 - 通用样式，具体页面样式由各页面CSS文件定义 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* ===== 统一卡片样式（符合系统样式优化.md规范） ===== */
/* 基础卡片样式 - 统一大小、圆角、阴影、内边距 */
.card,
.stat-card {
    background: var(--white);
    border-radius: var(--radius-lg);       /* 统一圆角 */
    padding: var(--spacing-lg);            /* 统一内边距 */
    box-shadow: var(--shadow-md);         /* 统一阴影 */
    border: 1px solid var(--color-border); /* 使用统一边框颜色变量 */
    transition: all 0.3s ease;             /* 统一过渡效果 */
    position: relative;
    overflow: hidden;
    font-family: var(--font-family);       /* 统一字体 */
}

/* 首页统计卡片网格 - 确保4个卡片铺满一行 */
#dashboardPage .stats-grid,
.content-area #dashboardPage .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* 首页统计卡片布局 - 使用flex垂直布局 */
#dashboardPage .stat-card,
.content-area #dashboardPage .stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* 卡片悬停效果 - 统一交互反馈 */
.card:hover,
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* 可访问性：可交互卡片的焦点样式 */
.card[tabindex]:focus,
.card[tabindex]:focus-visible,
.stat-card[tabindex]:focus,
.stat-card[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-lg), 0 0 0 3px rgba(161, 22, 22, 0.2);
}

/* 统计卡片顶部装饰条 - 通用样式 */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* 首页统计卡片顶部装饰条 - 使用蓝色主题 */
#dashboardPage .stat-card::before,
.content-area #dashboardPage .stat-card::before {
    background: var(--gradient-primary);
}

/* 统计卡片图标 - 通用样式 */
.stat-card .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: var(--primary-light);
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
    flex-shrink: 0;
}

/* 首页统计卡片图标 - 使用蓝色主题 */
#dashboardPage .stat-card .stat-icon,
.content-area #dashboardPage .stat-card .stat-icon {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
}

/* 统计卡片内容区域 */
.stat-content {
    flex: 1;
    width: 100%;
}

/* 首页统计卡片内容区域 - 确保正确布局 */
#dashboardPage .stat-card .stat-content,
.content-area #dashboardPage .stat-card .stat-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.stat-change {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* 统计变化指示器 - 通用样式 */
.stat-change.positive {
    color: var(--accent-color);
}

/* 首页统计变化指示器 - 使用蓝色主题 */
#dashboardPage .stat-card .stat-change.positive,
.content-area #dashboardPage .stat-card .stat-change.positive {
    color: var(--color-primary);
}

.stat-change.negative {
    color: var(--danger-color);
}

.stat-change.neutral {
    color: var(--gray-500);
}

/* 图表区域 - 通用样式，具体页面样式由各页面CSS文件定义 */
.charts-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* 首页图表网格 - 与charts-section功能相同 */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* 图表卡片样式 */
.chart-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

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

/* 基础图表容器样式 - 仅提供基础结构，具体样式由dashboard.css等页面样式覆盖 */
.chart-container {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--gray-200);
}

.chart-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.chart-controls {
    display: flex;
    gap: var(--spacing-sm);
}

.time-range {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    background: var(--white);
}

.chart-content {
    height: 300px;
    position: relative;
}

/* 最近更新记录 */
.recent-updates {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--gray-200);
}

.section-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.view-all {
    color: var(--primary-color);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.view-all:hover {
    text-decoration: underline;
}

.updates-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.update-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    transition: background-color 0.2s;
}

.update-item:hover {
    background: var(--primary-light);
}

.update-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
}

.update-content {
    flex: 1;
}

.update-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: var(--spacing-xs);
}

.update-time {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .sidebar {
        width: var(--sidebar-collapsed-width);
    }
    
    .nav-link span {
        display: none;
    }
    
    .nav-link {
        justify-content: center;
        padding: var(--spacing-md);
    }
    
    .header-center {
        max-width: 300px;
        margin: 0 var(--spacing-md);
    }
    
    .logo span {
        font-size: var(--font-size-lg);
    }
    
    .logo-img {
        height: 80px;
        max-width: 230px;
    }
    
    .user-details {
        display: none;
    }
    
    .user-info {
        gap: var(--spacing-sm);
    }
    
    /* 内容区域响应式优化 */
    .content-area {
        padding: var(--spacing-md);
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* 表格容器响应式 */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
    }
    
    /* 表格响应式 */
    table {
        min-width: 800px; /* 确保表格最小宽度 */
        width: 100%;
    }
    
    /* ✅ 优化：移除!important，响应式媒体查询已提供足够特异性 */
    /* 筛选器响应式 */
    .filters {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }
    
    /* 工具栏响应式 */
    .toolbar {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
}

@media (max-width: 768px) { /* --breakpoint-md */
    .header-container {
        padding: 0 var(--spacing-md);
    }
    
    .header-center {
        display: none;
    }
    
    .api-status {
        margin-right: 8px;
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .api-status .status-text {
        display: none;
    }
    
    .user-avatar {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-base);
    }
    
    .sidebar {
        position: fixed;
        left: -100%;
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        z-index: 998;
        transition: left 0.3s ease;
    }
    
    .sidebar.open {
        left: 0;
    }
    
    .content-area {
        padding: var(--spacing-md);
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .charts-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .page-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    
    /* 表格容器响应式 */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* 表格响应式 */
    table {
        min-width: 600px;
        width: 100%;
        font-size: 0.875rem;
    }
    
    table th,
    table td {
        padding: 0.5rem;
        white-space: nowrap;
    }
    
    /* ✅ 优化：移除!important，响应式媒体查询已提供足够特异性 */
    /* 筛选器响应式 */
    .filters {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    /* 工具栏响应式 */
    .toolbar {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        width: 100%;
    }
    
    .toolbar .btn {
        flex: 1;
        min-width: 100px;
    }
}

/* ===== 小屏幕设备响应式设计 ===== */
@media (max-width: 480px) { /* --breakpoint-xs */
    .header-container {
        padding: 0 var(--spacing-sm);
    }
    
    /* ===== 按钮小屏幕优化 ===== */
    .btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
        min-width: auto;
    }
    
    /* ===== 表单小屏幕优化 ===== */
    .form-group {
        margin-bottom: var(--spacing-sm);
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
    
    /* ===== 卡片小屏幕优化 ===== */
    .card,
    .stat-card {
        padding: var(--spacing-sm);
        border-radius: var(--radius-md);
    }
    
    /* ===== 表格小屏幕优化 ===== */
    table th,
    table td {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }
    
    .logo span {
        display: none;
    }
    
    .logo i {
        font-size: var(--font-size-xl);
    }
    
    .logo-img {
        height: 75px;
        max-width: 180px;
    }
    
    .user-details {
        display: none;
    }
    
    .api-status {
        padding: 4px 8px;
        margin-right: 4px;
    }
    
    .api-status i {
        font-size: 0.8rem;
    }
    
    .user-avatar {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-sm);
    }
    
    .dropdown-menu {
        min-width: 160px;
        right: -10px;
    }
    
    .content-area {
        padding: var(--spacing-sm);
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .stat-card {
        padding: var(--spacing-md);
    }
    
    .chart-container {
        padding: var(--spacing-md);
    }
    
    .recent-updates {
        padding: var(--spacing-md);
    }
    
    /* 表格容器响应式 */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* 表格响应式 */
    table {
        min-width: 500px;
        width: 100%;
        font-size: 0.75rem;
    }
    
    table th,
    table td {
        padding: 0.4rem;
        white-space: nowrap;
    }
    
    /* ✅ 优化：移除!important，响应式媒体查询已提供足够特异性 */
    /* 筛选器响应式 */
    .filters {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    /* 工具栏响应式 */
    .toolbar {
        flex-direction: column;
        width: 100%;
    }
    
    .toolbar .btn {
        width: 100%;
    }
    
    /* 页面头部响应式 */
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .page-actions .btn {
        width: 100%;
        margin-bottom: var(--spacing-xs);
    }
}

/* 数据预览错误详情样式 */
.error-details-container {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--primary-light);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
}

.error-details-header {
    margin-bottom: var(--spacing-md);
}

.error-details-header h4 {
    color: var(--primary-color);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
}

.error-details-header p {
    color: var(--text-secondary);
    margin: 0;
    font-size: var(--font-size-sm);
}

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

.error-detail-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.error-detail-item:last-child {
    margin-bottom: 0;
}

.error-row-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--gray-100);
}

.error-row-number {
    background: var(--primary-color);
    color: var(--white);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.error-row-name {
    font-weight: 500;
    color: var(--text-primary);
}

.error-messages {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.error-message {
    color: var(--danger-color);
    font-size: var(--font-size-sm);
    padding-left: var(--spacing-sm);
}

/* 可点击的错误状态徽章 */
.status-badge.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.status-badge.clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 错误详情模态框样式 */
.error-details-modal {
    max-width: 600px;
    width: 90%;
}

.error-row-summary {
    background: var(--primary-light);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
}

.error-row-summary h4 {
    color: var(--primary-color);
    margin: 0;
}

.error-list,
.error-suggestions {
    margin-bottom: var(--spacing-md);
}

.error-list h5,
.error-suggestions h5 {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-md);
}

.error-list ul,
.error-suggestions ul {
    margin: 0;
    padding-left: var(--spacing-lg);
}

.error-list li {
    color: var(--danger-color);
    margin-bottom: var(--spacing-xs);
}

.error-suggestions li {
    color: var(--info-color);
    margin-bottom: var(--spacing-xs);
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page.active {
    animation: fadeIn 0.3s ease-out;
}

/* 页面切换过渡效果 */
.page {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    opacity: 0;
    transform: translateY(10px);
}

.page.active {
    opacity: 1;
    transform: translateY(0);
    animation: fadeIn 0.3s ease-out;
}

/* 隐藏页面不占用空间 - 提高优先级 */
.page:not(.active),
#developmentPage:not(.active),
#membersPage:not(.active),
#pointsPage:not(.active),
#reportsPage:not(.active),
#materialsPage:not(.active),
#archivesPage:not(.active),
#violationsPage:not(.active),
#statisticsPage:not(.active),
#settingsPage:not(.active),
#profilePage:not(.active),
#govDocsPage:not(.active),
#weekly-tasksPage:not(.active),
#organization-lifePage:not(.active) {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* === GovDocs 固定内容宽度与居中（避免过宽） === */
#govDocsPage #tab-edit .editor-area,
#govDocsPage #docBody {
    max-width: 1080px; /* 放宽编辑区宽度 */
    width: 100%;
    margin: 0 auto; /* 居中 */
    box-sizing: border-box;
}

#govDocsPage .doc-preview-container {
    display: flex;
    justify-content: center; /* 预览整体居中 */
    overflow-x: auto; /* 允许横向滚动 */
}

#govDocsPage .doc-preview-page {
    /* A4预览区域固定大小，不随容器变化 */
    flex-shrink: 0;
}

/* 顶部工具栏在大屏不挤压：允许换行但不突破内容宽度 */
#govDocsPage #docToolbar {
    max-width: 1080px;
    margin: 0 auto 8px auto;
    flex-wrap: wrap;
}

/* 附件列表同样限制宽度并居中显示 */
#govDocsPage #attList,
#govDocsPage #uploadProgress,
#govDocsPage #fileInput {
    max-width: 1080px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* === GovDocs - 正文与附件 美化 === */
#govDocsPage #tab-editor .info-card{
    border: 1px solid #eef2f7;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(17,24,39,0.05);
}

#govDocsPage #tab-editor .form-grid .form-input,
#govDocsPage #tab-editor select.form-input{
    background:#fff;
    border:1.8px solid #e5e7eb;
    border-radius:10px;
    transition:.18s ease;
}
#govDocsPage #tab-editor .form-grid .form-input:focus,
#govDocsPage #tab-editor select.form-input:focus{
    border-color:#dc2626;
    box-shadow:0 0 0 4px rgba(220,38,38,.1);
}

/* 操作按钮行 */
#govDocsPage #tab-editor .info-card > div[style*="flex;flex-wrap:"] .btn{
    height:36px;
    padding:0 14px;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}
#govDocsPage #tab-editor .info-card > div[style*="flex;flex-wrap:"] .btn-primary{
    background:linear-gradient(135deg,#ef4444,#dc2626);
}
#govDocsPage #tab-editor .info-card > div[style*="flex;flex-wrap:"] .btn-secondary{
    background:linear-gradient(135deg,#6b7280,#4b5563);
}
#govDocsPage #tab-editor .info-card > div[style*="flex;flex-wrap:"] .btn-outline{
    background:#fff;color:#374151;border:1px solid #e5e7eb;
}
#govDocsPage #tab-editor .info-card > div[style*="flex;flex-wrap:"] .btn:hover{transform:translateY(-1px)}

/* 导入Word按钮定位与样式 */
#govDocsPage #btnImportWord{
    border:1px solid #e5e7eb;
    background:#fff;
    color:#374151;
    border-radius:10px;
}
#govDocsPage #btnImportWord:hover{
    border-color:#cbd5e1;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
}

/* 工具栏美化 */
#govDocsPage #docToolbar{
    display:flex;
    gap:8px;
    padding:10px;
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(17,24,39,0.05);
    position:sticky;
    top:0; /* 保持在可视区域顶部 */
    z-index:5;
    overflow-x:auto;
}
#govDocsPage #docToolbar .btn,
#govDocsPage #docToolbar select.form-input{
    height:34px;
    border-radius:8px;
}

/* 编辑器区域美化 */
#govDocsPage #docBody{
    min-height:380px;
    background:#fff;
    border:1.8px solid #e5e7eb;
    border-radius:12px;
    padding:18px;
    line-height:1.75;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.03);
}
#govDocsPage #docBody:focus{ outline:none; border-color:#dc2626; box-shadow:0 0 0 4px rgba(220,38,38,.08), inset 0 1px 3px rgba(0,0,0,.03); }

/* 预览卡片标题对齐与留白 */
#govDocsPage .doc-preview-container .doc-preview-page{
    padding:24px 28px;
    border:1px solid #eef2f7;
    border-radius:12px;
    background:#fff;
    box-shadow:0 6px 16px rgba(17,24,39,0.05);
}

/* 发文日期仅用于归档，不在正文预览中显示 */
/* ✅ 优化：移除!important，使用高特异性选择器 */
#govDocsPage .doc-preview-date{ 
    display:none; 
}

/* 防止页面切换时的闪烁 */
.page:not(.active) {
    pointer-events: none;
}

/* 页面切换动画 */
@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 统一加载和错误状态样式（符合系统样式优化.md规范） ===== */
/* 加载状态样式 - 统一设计 */
@layer modules {
    .loading-container,
    .loading-placeholder {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        background: var(--white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        padding: var(--spacing-2xl);
        gap: var(--spacing-md);
    }

    .loading-spinner {
        text-align: center;
        color: var(--color-text-secondary);
        font-family: var(--font-family);
    }

    .loading-spinner i,
    .loading-icon {
        font-size: var(--font-size-3xl);
        color: var(--color-primary);
        margin-bottom: var(--spacing-md);
        animation: spin 1s linear infinite;
    }

    .loading-spinner p {
        margin: 0;
        font-size: var(--font-size-base);
        color: var(--color-text-secondary);
    }
    
    /* 加载动画 */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* 按钮loading状态样式 */
    .btn-primary.loading {
        background: var(--gradient-primary);
        color: white;
        border: none;
        box-shadow: 0 4px 15px rgba(161, 22, 22, 0.3);
        transform: none;
    }

    .btn-primary.loading:hover {
        background: var(--gradient-primary);
        transform: none;
        box-shadow: 0 4px 15px rgba(161, 22, 22, 0.3);
    }

    /* 页面标题loading状态 */
    .header-title.loading,
    #dashboardPage .page-header .page-title.loading,
    .content-area #dashboardPage .page-header .page-title.loading {
        color: var(--color-primary);
        text-shadow: 0 0 10px rgba(161, 22, 22, 0.3);
    }

    /* 首页卡片loading状态 */
    #dashboardPage .stat-card.loading,
    .content-area #dashboardPage .stat-card.loading {
        border-top: 3px solid var(--color-primary);
        box-shadow: 0 4px 20px rgba(161, 22, 22, 0.2);
        position: relative;
        overflow: hidden;
        /* 确保loading状态不影响布局 */
        width: 100%;
        box-sizing: border-box;
    }

    #dashboardPage .stat-card.loading::after,
    .content-area #dashboardPage .stat-card.loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(161, 22, 22, 0.1), 
            transparent
        );
        animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
        0% {
            left: -100%;
        }
        100% {
            left: 100%;
        }
    }

    /* 首页响应式设计 */
    @media (max-width: 1024px) {
        #dashboardPage .stats-grid,
        .content-area #dashboardPage .stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-md);
        }
        
        #dashboardPage .stat-card,
        .content-area #dashboardPage .stat-card {
            padding: var(--spacing-md);
        }
        
        #dashboardPage .stat-card .stat-icon,
        .content-area #dashboardPage .stat-card .stat-icon {
            width: 50px;
            height: 50px;
            font-size: var(--font-size-xl);
        }
        
        #dashboardPage .stat-card .stat-number,
        .content-area #dashboardPage .stat-card .stat-number {
            font-size: var(--font-size-2xl);
        }
    }

    @media (max-width: 768px) {
        #dashboardPage .stats-grid,
        .content-area #dashboardPage .stats-grid {
            grid-template-columns: 1fr;
            gap: var(--spacing-sm);
        }
        
        #dashboardPage .stat-card,
        .content-area #dashboardPage .stat-card {
            padding: var(--spacing-sm);
        }
        
        #dashboardPage .stat-card .stat-icon,
        .content-area #dashboardPage .stat-card .stat-icon {
            width: 48px;
            height: 48px;
            font-size: var(--font-size-lg);
            margin-bottom: var(--spacing-sm);
        }
        
        #dashboardPage .stat-card .stat-number,
        .content-area #dashboardPage .stat-card .stat-number {
            font-size: var(--font-size-xl);
        }
        
        #dashboardPage .stat-card .stat-label,
        .content-area #dashboardPage .stat-card .stat-label {
            font-size: var(--font-size-xs);
        }
    }

    @media (max-width: 480px) {
        #dashboardPage .stat-card,
        .content-area #dashboardPage .stat-card {
            padding: var(--spacing-xs);
        }
        
        #dashboardPage .stat-card .stat-icon,
        .content-area #dashboardPage .stat-card .stat-icon {
            width: 40px;
            height: 40px;
            font-size: var(--font-size-base);
        }
    }

    /* 错误状态样式 - 统一设计 */
    .error-container,
    .error-message {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        background: var(--white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        padding: var(--spacing-2xl);
        gap: var(--spacing-md);
        text-align: center;
        max-width: 500px;
        margin: 0 auto;
        border: 1px solid var(--color-danger);
        background: rgba(239, 68, 68, 0.05);
    }

    .error-message i,
    .error-icon {
        font-size: var(--font-size-3xl);
        color: var(--color-danger);
        margin-bottom: var(--spacing-md);
    }

    .error-message h3,
    .error-title {
        margin: 0 0 var(--spacing-md) 0;
        color: var(--color-text);
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-bold);
        font-family: var(--font-family);
    }

    .error-message p,
    .error-description {
        margin: 0 0 var(--spacing-lg) 0;
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
        color: var(--color-text-secondary);
        font-family: var(--font-family);
    }
}

.error-message .btn {
    margin-top: 1rem;
}

/* 图表加载和错误状态样式 */
.chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #6b7280;
    font-size: 14px;
}

.chart-loading i {
    font-size: 2rem;
    color: #dc2626;
    margin-bottom: 1rem;
}

.chart-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #f59e0b;
    font-size: 14px;
}

.chart-error i {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* 分页控制样式 */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

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

.pagination-right {
    display: flex;
    align-items: center;
}

.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-size-selector label {
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    color: #6b7280;
    font-weight: 500;
}

.page-size-selector select {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    background: white;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 100px;
}

.page-size-selector select:hover {
    border-color: #9ca3af;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-size-selector select:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.pagination-info {
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    color: #6b7280;
}

/* 分页按钮样式 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.page-btn {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 40px;
    text-align: center;
}

.page-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

.page-btn.active {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.page-btn:disabled:hover {
    background: white;
    border-color: #d1d5db;
    transform: none;
}

/* 表格样式 */
.members-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

.members-table th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    color: #1f2937;
    border-bottom: 2px solid #e5e7eb;
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    position: relative;
}

.members-table th:first-child {
    border-top-left-radius: 12px;
}

.members-table th:last-child {
    border-top-right-radius: 12px;
}

.members-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    color: #4b5563;
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    font-weight: 400;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.members-table tr:hover {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.members-table tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.members-table tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* 表格内容统一样式 */
.members-table .member-name {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #1f2937;
}

.members-table .member-name strong {
    font-weight: 600;
    color: #111827;
}

.members-table .gender-badge {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: #6b7280;
    margin-left: 8px;
}

.members-table .work-id,
.members-table .id-card,
.members-table .phone,
.members-table .email,
.members-table .branch-name,
.members-table .birth-date,
.members-table .formal-date {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: #4b5563;
}

/* 表格容器样式 */
.table-container {
    background: white;
    border-radius: 12px;
    padding: 0;
    margin: 20px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 状态徽章样式 */
.status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-family: var(--font-family);
    font-weight: 500;
    text-align: center;
    min-width: 80px;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

.status-badge.formal {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.status-badge.prepare {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.status-badge.activist {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
}

.status-badge.default {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

/* 党员状态样式类 */
.status-badge.status-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.status-badge.status-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.status-badge.status-info {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
}

.status-badge.status-pending {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.status-badge.status-default {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

/* 表格头部样式 */
.table-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e5e7eb;
    border-radius: 12px 12px 0 0;
}

.batch-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.select-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    font-weight: 500;
}

.select-all-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 复选框样式 */
.member-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

#headerCheckbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 操作按钮样式 */
.action-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
.content-area .action-buttons .btn,
.page .action-buttons .btn,
.action-buttons .btn {
    padding: 0; /* 强制移除所有padding，确保正方形 */
    font-size: var(--font-size-xs);
    font-family: var(--font-family);
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    width: 32px;
    height: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.action-buttons .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.2s ease;
}

.action-buttons .btn:hover::before {
    left: 100%;
}

.action-buttons .btn i {
    font-size: var(--font-size-xs);
    z-index: 1;
    position: relative;
}

.action-buttons .btn-primary {
    background: var(--gradient-primary);
    color: white;
}

.action-buttons .btn-primary:hover {
    background: var(--gradient-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(161, 22, 22, 0.4);
}

.action-buttons .btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
}

.action-buttons .btn-info:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.action-buttons .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    position: relative;
    z-index: 1;
    will-change: background-color, box-shadow;
}

.action-buttons .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    /* 移除transform，改用阴影效果 */
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    z-index: 10;
}

.action-buttons .btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    position: relative;
    z-index: 1;
    will-change: background-color, box-shadow;
}

.action-buttons .btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    /* 移除transform，改用阴影效果 */
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    z-index: 10;
}

/* 打印模态框样式 */
.print-preview {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
}

.print-preview h4 {
    margin: 0 0 15px 0;
    color: #374151;
    font-size: 16px;
}

/* 打印预览页面样式 - 严格按照人文学院学生党员成长档案.htm的样式 */
.print-preview .print-page {
    margin: 0 auto;
    max-width: 800px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.print-preview .print-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 20px;
    background: #fafafa;
}

.print-preview .print-header h2 {
    margin: 0;
    font-family: '宋体', 'Times New Roman', Arial, sans-serif;
    font-size: 18pt;
    font-weight: normal;
    color: black;
}

.print-preview .member-basic-info {
    margin: 0;
    text-align: center;
    padding: 20px;
}

.print-preview table.MsoTableGrid {
    border-collapse: collapse;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border: 1pt solid #000;
}

.print-preview table.MsoTableGrid td {
    border: 1pt solid #000;
    padding: 2.8pt 4.8pt;
    text-align: center;
    vertical-align: center;
    font-family: '宋体', 'Times New Roman', Arial, sans-serif;
    font-size: 10.5pt;
    line-height: 1.0;
}

.print-preview table.MsoTableGrid span {
    font-family: '宋体', 'Times New Roman', Arial, sans-serif;
    font-size: 10.5pt;
    color: black;
}

/* 党员详情内容样式 */
.member-detail-modal .modal-content.member-detail-panel {
    width: min(760px, 90vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
}

.member-detail-header {
    background: linear-gradient(135deg, #b3141b, #d82a2a);
    color: #fff;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

.member-detail-header .header-title {
    display: flex;
    gap: 16px;
    align-items: center;
}

.member-detail-header .title-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.member-detail-header .title-label {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.85;
}

.member-detail-header h3 {
    margin: 2px 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.member-detail-header .title-sub {
    margin: 4px 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.detail-close-btn {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.detail-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.member-detail-body {
    padding: 24px 28px 16px;
    overflow-y: auto;
    background: #f8fafc;
    flex: 1;
}

.detail-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    margin-bottom: 18px;
    border: 1px solid #f1f5f9;
}

.detail-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.card-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.card-icon.basic { background: #f97316; }
.card-icon.contact { background: #14b8a6; }
.card-icon.org { background: #d946ef; }
.card-icon.study { background: #0ea5e9; }
.card-icon.points { background: #f59e0b; }
.card-icon.note { background: #6366f1; }

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
}

.detail-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.basic-info-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 24px;
    align-items: start;
}

.photo-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.photo-panel .photo-label {
    font-weight: 600;
    color: #475569;
    margin: 0;
}

.photo-panel .photo-wrapper {
    width: 160px;
    height: 200px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px dashed #cbd5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-placeholder {
    text-align: center;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.photo-placeholder i {
    font-size: 2.5rem;
}

.photo-upload-hint {
    border: none;
    background: transparent;
    color: #cbd5f5;
    cursor: not-allowed;
    font-size: 0.85rem;
}

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

.info-grid.two-column {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #eef2ff;
}

.info-label {
    font-size: 0.85rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value {
    font-size: 1rem;
    color: #0f172a;
    font-weight: 500;
    word-break: break-all;
}

.info-value.highlight {
    font-size: 1.4rem;
    color: #b91c1c;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.status-active {
    background: #dcfce7;
    color: #166534;
}

.status-warning {
    background: #fef3c7;
    color: #92400e;
}

.status-info {
    background: #dbeafe;
    color: #1e40af;
}

.points-value {
    font-weight: 600;
    color: #dc2626;
    font-size: 16px;
}

.points-level {
    font-weight: 500;
    color: #059669;
}

.notes-content {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    border-left: 4px solid #d62828;
    color: #0f172a;
    line-height: 1.6;
}

.member-detail-footer {
    padding: 18px 28px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.member-detail-footer .btn {
    min-width: 110px;
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.member-detail-footer .btn:active {
    transform: scale(0.97);
}

.member-primary-btn {
    background: linear-gradient(135deg, #c71c22, #f44336);
    color: #fff;
    border: none;
}

.member-primary-btn:hover {
    box-shadow: 0 10px 20px rgba(244, 67, 54, 0.3);
}

.member-outline-btn {
    background: transparent;
    color: #c71c22;
    border: 1px solid #f5b5b8;
}

.member-outline-btn:hover {
    background: rgba(199, 28, 34, 0.08);
}

.member-secondary-btn {
    background: #e2e8f0;
    color: #475569;
    border: none;
}

.member-secondary-btn:hover {
    background: #cbd5f5;
}

@media (max-width: 900px) {
    .basic-info-layout {
        grid-template-columns: 1fr;
    }
    
    .photo-panel .photo-wrapper {
        width: 140px;
        height: 180px;
    }
}

@media (max-width: 640px) {
    .member-detail-header,
    .member-detail-body,
    .member-detail-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
    
    .member-detail-header .header-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .member-detail-footer {
        flex-direction: column-reverse;
    }
    
    .member-detail-footer .btn {
        width: 100%;
    }
}

/* ✅ 统一模态框样式：使用components.css中的统一样式系统 */
/* 移除重复定义，统一使用components.css中的模态框样式 */
/* 如需特定模块样式，使用页面容器作用域，例如： */
/* .specific-container .modal-header { ... } */

/* 编辑表单样式 */
.edit-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.form-section {
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.form-section:last-child {
    border-bottom: none;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group label i {
    color: #dc2626;
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #374151;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
    transform: translateY(-1px);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* 表单验证样式 */
.form-group input:invalid,
.form-group select:invalid,
.form-group textarea:invalid {
    border-color: #ef4444;
}

.form-group input:valid,
.form-group select:valid,
.form-group textarea:valid {
    border-color: #10b981;
}

/* 必填字段标识 */
.form-group label[for*="Name"]::after {
    content: ' *';
    color: #ef4444;
}

/* ============================================
   编辑党员信息模态框样式 - 根据改进建议优化
   ============================================ */

/* 1. 标题栏与内容部分的连接优化 - 减少间距 */
/* ✅ 编辑模态框内容容器 - 统一使用components.css中的.modal样式 */
/* 编辑模态框使用统一的模态框样式，但保持特定的尺寸 */
/* 使用高特异性选择器确保样式优先级（特异性：0,2,0） */
/* 参考批量导入模态框的尺寸样式 - 使用高优先级选择器 */
.modal-overlay .modal.edit-member-modal .modal-content,
.modal-overlay .modal-dialog.edit-member-modal .modal-content,
.modal-dialog .modal.edit-member-modal .modal-content,
.modal.edit-member-modal .modal-content,
.edit-member-modal .modal-content {
    max-width: 1200px !important; /* 参考批量导入模态框的尺寸 */
    width: 95vw !important; /* 参考批量导入模态框的尺寸 */
    max-height: 90vh !important; /* 参考批量导入模态框的尺寸 */
    height: auto; /* 自动高度，根据内容调整 */
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden !important; /* 参考批量导入模态框的overflow设置 */
    background: white !important; /* 参考批量导入模态框的白色背景 */
    border-radius: 8px !important; /* 参考批量导入模态框的圆角 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important; /* 参考批量导入模态框的阴影 */
    margin: 0 auto; /* 确保内容在模态框中居中 */
}

/* 3. 内容区分隔线优化 - 添加标题和内容之间的过渡线 */
.edit-member-modal .modal-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
}

.edit-member-modal .modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ✅ 编辑模态框容器 - 统一使用components.css中的.modal样式 */
/* 编辑模态框使用统一的圆角和阴影 */

/* 5. 内容对齐与排版优化 */
.edit-member-modal .modal-body {
    padding: 0; /* 移除padding，让表单占满整个区域 */
    max-height: calc(90vh - 200px); /* 最大高度限制，为按钮区域留出空间（90vh - 头部高度约80px - 按钮区域高度约100px） */
    overflow-y: auto; /* 内容超出时滚动 */
    flex: 1 1 auto; /* 允许拉伸，占据剩余空间 */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0; /* 移除gap，让表单紧贴 */
    height: auto; /* 自动高度，根据内容调整 */
    min-height: 0; /* 允许收缩 */
}

/* ✅ 编辑模态框样式 - 统一使用components.css中的模态框样式系统 */
/* 编辑模态框使用统一的模态框样式，但保持特定的尺寸和布局 */
/* 使用高特异性选择器确保覆盖components.css中的.modal样式（特异性：0,3,0 > 0,1,0） */
.modal-overlay .modal.edit-member-modal,
.modal-overlay .modal-dialog.edit-member-modal,
.modal-dialog .modal.edit-member-modal,
.modal.edit-member-modal {
    max-width: 1200px; /* 参考批量导入模态框的尺寸 */
    width: 95vw; /* 参考批量导入模态框的尺寸 */
    max-height: 90vh; /* 参考批量导入模态框的尺寸 */
    height: auto; /* 自动高度，根据内容调整 */
    overflow: hidden; /* 参考批量导入模态框的overflow设置 */
    display: flex;
    flex-direction: column;
    background: transparent; /* 移除白色背景，避免出现多余的白色空白 */
    box-shadow: none; /* 移除阴影，因为内容部分会自己处理 */
    margin: 0 auto; /* 确保模态框在容器中居中 */
    box-sizing: border-box; /* 确保padding和border包含在宽度内 */
    position: relative; /* 为拖拽功能添加相对定位 */
}

/* modal-overlay样式 - 参考批量导入模态框 */
.modal-overlay:has(.edit-member-modal),
#editMemberModalOverlay {
    padding: 20px; /* 参考批量导入模态框的padding */
    overflow: visible; /* 允许内容超出视口 */
    justify-content: center; /* 确保模态框在overlay中水平居中 */
    align-items: center; /* 确保模态框在overlay中垂直居中 */
}

/* 编辑模态框头部 - 使用统一的渐变样式 */
.edit-member-modal .modal-header {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move; /* 添加拖动光标 */
    user-select: none; /* 防止拖动时选中文本 */
}

.edit-member-modal .modal-header .header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-member-modal .modal-header .header-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.edit-member-modal .modal-header .header-text h3,
.edit-member-modal .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.edit-member-modal .modal-header .header-text p {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

/* ✅ 编辑模态框关闭按钮 - 参考批量导入样式 */
.edit-member-modal .modal-header .close-btn,
.edit-member-modal .modal-close {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
    width: auto;
    height: auto;
    position: static;
    border-radius: 0;
    transition: opacity 0.3s ease;
    display: inline-block;
}

.edit-member-modal .modal-header .close-btn:hover,
.edit-member-modal .modal-close:hover {
    opacity: 0.7;
    transform: none;
    background: none;
}

/* 关闭按钮内的图标不触发拖拽 */
.edit-member-modal .modal-header .close-btn * {
    pointer-events: none;
}

/* 关闭按钮不触发拖拽 */
.edit-member-modal .modal-header .close-btn {
    flex-shrink: 0; /* 防止按钮被压缩 */
    z-index: 10; /* 确保按钮在头部内容之上 */
}

.edit-member-modal .modal-body {
    background: transparent; /* 移除白色背景，让表单直接显示 */
    padding: 0; /* 移除padding，让表单占满整个区域 */
    border-radius: 0;
}

/* 表单内容样式优化 - 参考批量导入样式 */
.edit-member-modal .edit-form {
    background: white; /* 给表单添加白色背景 */
    padding: 20px; /* 给表单添加padding，参考批量导入的20px */
    padding-bottom: 0; /* 移除底部padding，按钮区域单独处理 */
    border-radius: 0; /* 移除圆角，按钮区域单独处理 */
    margin: 0; /* 移除外边距 */
    height: auto; /* 自动高度，根据内容调整 */
    min-height: auto; /* 移除最小高度限制 */
}

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

.edit-member-modal .section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f3f4f6;
}

.edit-member-modal .section-header .section-icon {
    width: 32px;
    height: 32px;
    background: #dc2626;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.edit-member-modal .section-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

.edit-member-modal .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.edit-member-modal .form-group {
    display: flex;
    flex-direction: column;
}

.edit-member-modal .form-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.edit-member-modal .form-group label i {
    color: #dc2626;
    font-size: 12px;
}

.edit-member-modal .form-group .required {
    color: #dc2626;
    font-weight: 600;
}

.edit-member-modal .form-group input,
.edit-member-modal .form-group select,
.edit-member-modal .form-group textarea {
    padding: 10px;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: all 0.2s ease;
    background: white;
    width: 100%;
}

.edit-member-modal .form-group input:focus,
.edit-member-modal .form-group select:focus,
.edit-member-modal .form-group textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    transform: translateY(-1px);
}

.edit-member-modal .form-group input:hover,
.edit-member-modal .form-group select:hover,
.edit-member-modal .form-group textarea:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 6. 按钮和操作区布局优化 - 参考批量导入样式 */
/* form-actions现在在modal-content内部，modal-body外部 */
.edit-member-modal .modal-content .form-actions,
.edit-member-modal .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    padding: 20px;
    margin-top: 0;
    border-top: 1px solid #e5e7eb;
    background: white;
    border-radius: 0 0 8px 8px;
    flex-shrink: 0;
    position: relative; /* 确保按钮区域正确定位 */
    z-index: 10; /* 确保按钮在最上层 */
}

.edit-member-modal .form-actions .btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    min-width: 100px;
    justify-content: center;
    border: none;
}

.edit-member-modal .form-actions .btn-secondary {
    background: #6c757d;
    color: white;
    border: none;
}

.edit-member-modal .form-actions .btn-secondary:hover {
    background: #5a6268;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.edit-member-modal .form-actions .btn-primary {
    background: #dc2626;
    color: white;
    border: none;
}

.edit-member-modal .form-actions .btn-primary:hover {
    background: #b91c1c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 确保按钮区域始终可见 - 合并所有form-actions样式定义 */
.edit-member-modal .form-actions {
    min-height: 60px; /* 减少最小高度，避免占用过多空间 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 20px; /* 使用padding代替伪元素，避免溢出问题 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影增强可见性 */
    background: #ffffff; /* 确保背景色不透明 */
    position: relative; /* 为伪元素提供定位上下文 */
}

/* 为按钮区域添加阴影，增强视觉效果 */
.edit-member-modal .form-actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    pointer-events: none; /* 防止伪元素阻挡点击事件 */
}

/* 批量修改模态框样式 */
#batchEditModal {
    max-width: 95vw;
    width: 95vw;
    max-height: 95vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#batchEditModal .modal-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#batchEditModal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

#batchEditModal .batch-edit-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
}

#batchEditModal .batch-edit-toolbar .btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

#batchEditModal .batch-edit-toolbar .btn-success {
    background: #10b981;
    color: white;
}

#batchEditModal .batch-edit-toolbar .btn-success:hover {
    background: #059669;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

#batchEditModal .batch-edit-toolbar .btn-secondary {
    background: #6b7280;
    color: white;
}

#batchEditModal .batch-edit-toolbar .btn-secondary:hover {
    background: #4b5563;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}

#batchEditModal .batch-edit-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

#batchEditModal .batch-edit-actions .btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

#batchEditModal .batch-edit-actions .btn-secondary {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

#batchEditModal .batch-edit-actions .btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

#batchEditModal .batch-edit-actions .btn-warning {
    background: #f59e0b;
    color: white;
}

#batchEditModal .batch-edit-actions .btn-warning:hover {
    background: #d97706;
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

#batchEditModal .batch-edit-actions .btn:disabled,
#batchEditModal .batch-edit-toolbar .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 分段标题样式 */
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 6px;
    border-left: 4px solid #dc2626;
    margin-bottom: 15px;
}

.section-header .section-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.section-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

/* 7. 响应式设计优化 - 参考批量导入模态框 */
@media (max-width: 768px) { /* --breakpoint-md */
    .edit-member-modal .modal-content {
        width: 95vw;
        max-width: 95vw;
        padding: 15px;
    }
    
    /* 小屏幕上模态框宽度调整 - 参考批量导入模态框 */
    .modal-overlay .modal.edit-member-modal,
    .modal.edit-member-modal {
        max-width: 95vw;
        width: 95vw;
    }

    .edit-member-modal .modal-header {
        font-size: 1.25rem;
        padding: 16px 20px;
    }

    .edit-member-modal .modal-body {
        padding: 15px;
        gap: 12px;
    }

    .edit-member-modal .form-actions {
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }

    .edit-member-modal .form-actions .btn {
        width: 100%;
    }

    .edit-member-modal .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1200px) {
    .form-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1600px) {
    .form-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.form-section:last-child {
    border-bottom: none;
}

.form-section h4 {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

/* 编辑表单美化样式 */
.edit-member-modal .form-group {
    position: relative;
    background: #fafbfc;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.edit-member-modal .form-group:hover {
    background: #f8fafc;
    border-color: #d1d5db;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.edit-member-modal .form-group label {
    color: #4b5563;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.edit-member-modal .form-group input,
.edit-member-modal .form-group select,
.edit-member-modal .form-group textarea {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: none;
}

.edit-member-modal .form-group input:focus,
.edit-member-modal .form-group select:focus,
.edit-member-modal .form-group textarea:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    background: #fefefe;
}

.edit-member-modal .form-group input:valid,
.edit-member-modal .form-group select:valid,
.edit-member-modal .form-group textarea:valid {
    border-color: #10b981;
}

.edit-member-modal .required {
    color: #ef4444;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h4 i {
    color: #dc2626;
}

/* 表单行布局 */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

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

/* 表单组样式 */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-group label.required::after {
    content: ' *';
    color: #ef4444;
    font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #374151;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
    transform: translateY(-1px);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

/* 响应式设计 */
@media (max-width: 768px) { /* --breakpoint-md */
    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .edit-member-modal .modal-content {
        width: 95%;
        margin: 5% auto;
    }
    
    .form-section {
        padding: 15px;
    }
    
    .form-section h4 {
        font-size: 15px;
    }
}

/* 表单组动画 */
.form-group {
    animation: slideInUp 0.3s ease-out;
    animation-fill-mode: both;
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-group:nth-child(4) { animation-delay: 0.4s; }
.form-group:nth-child(5) { animation-delay: 0.5s; }
.form-group:nth-child(6) { animation-delay: 0.6s; }
.form-group:nth-child(7) { animation-delay: 0.7s; }
.form-group:nth-child(8) { animation-delay: 0.8s; }
.form-group:nth-child(9) { animation-delay: 0.9s; }

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

/* 统一通知系统样式 */
#notificationContainer {
    position: fixed;
    top: calc(var(--header-height, 100px) + 20px) !important; /* 位于顶部导航栏下方，留20px间距 */
    right: 20px;
    z-index: 10003 !important; /* 确保通知在所有元素之上，包括顶部导航栏(10000)和下拉菜单(10002) */
    max-width: 400px;
    pointer-events: none;
    overflow: visible !important; /* 确保内容不被裁剪 */
}

/* 校验结果列表（轻量样式） */
.val-list { list-style: disc; padding-left: 20px; }
.val-list--error li { color: #b91c1c; }
.val-list--warn li  { color: #92400e; }

.unified-notification {
    margin-bottom: 12px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(100%);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 100%;
    word-wrap: break-word;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 20px;
}

.unified-notification.notification-success {
    background: #6c757d;
    color: #ffffff;
}

.unified-notification.notification-error {
    background: #dc3545;
    color: #ffffff;
}

.unified-notification.notification-warning {
    background: #ffc107;
    color: #212529;
}

.unified-notification.notification-info {
    background: #17a2b8;
    color: #ffffff;
}

.unified-notification .notification-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
    margin-left: 8px;
    padding: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: all 0.2s ease;
    border-radius: 4px;
    flex-shrink: 0;
}

.unified-notification .notification-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) { /* --breakpoint-md */
    #notificationContainer {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .unified-notification {
        padding: 14px 16px;
        font-size: 13px;
    }
}

/* 响应式设计 */
@media (max-width: 768px) { /* --breakpoint-md */
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
    
    .edit-form {
        grid-template-columns: 1fr;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* 谈话分配管理样式 */
.talk-assignment-section {
    margin-top: 2rem;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.talk-assignment-section .section-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.talk-assignment-section .section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.talk-assignment-content {
    padding: 1.5rem;
}

.assignment-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.assignment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.assignment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.assignment-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.assignment-info {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
}

.assignment-info > div {
    font-size: 0.875rem;
}

.assignment-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-assigned {
    background: var(--info-color);
    color: var(--white);
}

.status-in_progress {
    background: var(--warning-color);
    color: var(--white);
}

.status-completed {
    background: var(--accent-color);
    color: var(--white);
}

.status-cancelled {
    background: var(--gray-400);
    color: var(--white);
}

.no-data {
    text-align: center;
    padding: 2rem;
    color: var(--gray-500);
    font-style: italic;
}

/* 响应式设计 */
@media (max-width: 768px) { /* --breakpoint-md */
    .assignment-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .assignment-info {
        grid-template-columns: 1fr;
        margin-bottom: 1rem;
    }
    
    .assignment-actions {
        margin-left: 0;
        justify-content: center;
    }
    
    .assignment-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === 顶栏尺寸与响应式优化 === */
:root{
  --header-height: 72px; /* 桌面 */
}

@media (max-width: 1024px){
  :root{ --header-height: 60px; }
}
@media (max-width: 1024px) {
    .header-container {
        padding: 0 30px;
        gap: 30px;
    }
    
    .header-left {
        flex: 0 0 25%;
        padding-right: 15px;
    }
    
    .header-center {
        flex: 0 0 50%;
        padding: 0 15px;
    }
    
    .header-right {
        flex: 0 0 25%;
        gap: 20px;
        padding-left: 15px;
    }
    
    .search-bar {
        max-width: 500px;
    }
    
    .user-menu {
        min-width: 200px;
        max-width: 280px;
    }
}

@media (max-width: 768px) { /* --breakpoint-md */
    .header-container {
        padding: 0 20px;
        gap: 20px;
    }
    
    .header-left {
        flex: 0 0 30%;
        padding-right: 10px;
    }
    
    .header-center {
        flex: 0 0 40%;
        padding: 0 10px;
    }
    
    .header-right {
        flex: 0 0 30%;
        gap: 15px;
        padding-left: 10px;
    }
    
    .search-bar {
        max-width: 350px;
    }
    
    .user-menu {
        min-width: 180px;
        max-width: 220px;
        padding: 10px 15px;
    }
    
    .api-status {
        font-size: 13px;
        padding: 8px 15px;
        min-width: 100px;
    }
}

@media (max-width: 640px){
  :root{ --header-height: 56px; }
  .header-center{ display:none; }          /* 移动端隐藏搜索条 */
  .menu-toggle .user-info{ display:none; } /* 只保留头像 */
  .api-status{ display:none; }
  
  .header-container {
      padding: 0 8px;
      gap: 8px;
  }
  
  .header-left {
      flex: 1;
      min-width: 120px;
      max-width: 200px;
      justify-content: flex-start;
  }
  
  .header-right {
      flex: 1;
      min-width: 120px;
      max-width: 200px;
      gap: 8px;
      justify-content: flex-end;
  }
  
  .user-menu {
      min-width: 100px;
      max-width: 150px;
      padding: 6px 8px;
  }
}

/* 头像内文字缩放（展示姓名首字或头像首字母） */
.user-avatar, .user-avatar-large {
  text-transform: none; /* 中文无需强制大写 */
}

/* 通知按钮与状态的间距微调 */
.header-right { 
    gap: 16px; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* === 页面切换平滑过渡 === */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #ffffff; /* ✅ 改为纯白色 */
    transition: opacity 0.3s ease-in-out;
}

/* 防止页面切换时的闪烁 */
.page-content {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.page-content.loaded {
    opacity: 1;
}

/* 主要内容区域平滑过渡 */
.main-content {
    /* ✅ 修复页面底部空白问题 - 移除强制最小高度 */
    /* min-height: calc(100vh - var(--header-height, 72px)); */
    transition: all 0.3s ease-in-out;
    /* 注意：如需设置最小高度，请使用下面的定义，但避免重复定义 */
}

/* 页面切换时的淡入效果 */
.page-section {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
}

.page-section.active {
    opacity: 1;
    transform: translateY(0);
}

/* 防止布局闪烁 */
.container {
    will-change: auto;
}

/* 优化动画性能 */
* {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 页面初始状态 - 防止闪烁 */
body:not(.loaded) .page {
    opacity: 0;
    transform: translateY(10px);
}

body.loaded .page.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
}

/* 页面切换时的过渡效果 */
.page {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    position: relative;
}

/* 防止页面加载时的闪烁 - 隐藏页面不占用空间 */
.page:not(.active) {
    display: none !important;
    opacity: 0;
    transform: translateY(10px);
    min-height: 0 !important; /* 隐藏页面不占用空间 */
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* 确保页面切换时的正确显示 */
.page[style*="display: block"] {
    opacity: 1;
    transform: translateY(0);
}

/* 页面切换过程中的状态 */
.page.switching {
    pointer-events: none;
}

/* 确保页面内容正确显示 */
.page-content {
    width: 100%;
    min-height: 100%;
}

/* === 导航栏元素间距优化 === */
/* 注意：header-container的基础定义在第165行，这里只保留必要的优化 */

.header-left {
    flex: 0 0 30%;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-start;
    padding-right: 20px;
}

.header-center {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.header-right {
    flex: 0 0 30%;
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: flex-end;
    padding-left: 20px;
}

/* 搜索输入框高度与内边距微调，贴合 56–72px 顶栏 */
.search-bar{ 
    height: 44px; 
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.search-bar input{ 
    font-size: 15px; 
    padding: 0 24px;
    width: 100%;
}

/* === 状态指示器和通知按钮间距优化 === */
.api-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 120px;
    justify-content: center;
}

.api-status i {
    font-size: 8px;
}

.api-status.online i {
    color: #10b981;
}

.api-status.offline i {
    color: #ef4444;
}

.u-btn--icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.u-btn--icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* === 用户信息组件间距优化 === */
.user-menu {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    min-width: 250px;
    max-width: 350px;
    flex-shrink: 0;
}

.user-menu:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    width: 100%;
    justify-content: space-between;
    min-width: 0; /* 允许flex子元素收缩 */
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden; /* 确保文本溢出被裁剪 */
    margin-right: 8px; /* 与下拉箭头保持间距 */
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === 方案A：基础图标与用户信息Chip升级 === */
/* 注意：此处的.user-avatar样式与第498行的定义重复，已合并到第498行 */
/* 为避免冲突，此处样式已移除，统一使用第498行的定义 */

/* ✅ 优化：移除!important，使用高特异性选择器 */
.header .user-avatar:hover,
.user-menu .user-avatar:hover,
.user-avatar:hover {
    transform: scale(1.05);
    /* 使用系统红色主题的阴影，与整体风格一致 */
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

.user-avatar::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.user-avatar:hover::before {
    opacity: 1;
}

.status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.menu-toggle .fa-chevron-down {
    transition: transform 0.3s ease;
}

.menu-toggle.active .fa-chevron-down {
    transform: rotate(180deg);
}

/* === 方案B：玻璃态效果增强 === */
.user-avatar {
    backdrop-filter: blur(10px);
    background: rgba(161, 22, 22, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.user-avatar:hover {
    background: rgba(161, 22, 22, 0.9);
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(161, 22, 22, 0.3);
}

/* === 方案C：徽章样式优化 === */
.user-role {
    background: #ffffff;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === 下拉菜单文字颜色修复 === */
/* ✅ 优化：移除!important，使用高特异性选择器 */
.user-menu .dropdown-menu,
.user-dropdown .dropdown-menu {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 8px 0;
    min-width: 200px;
}

.user-menu .dropdown-header,
.user-dropdown .dropdown-header {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 16px;
    margin-bottom: 4px;
}

.user-menu .user-info-header,
.user-dropdown .user-info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0; /* 允许flex子元素收缩 */
}

.user-menu .user-avatar-large,
.user-dropdown .user-avatar-large {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* 防止头像被压缩 */
}

/* 确保下拉菜单头像内的图片正确显示 */
.user-menu .user-avatar-large img,
.user-dropdown .user-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.user-menu .user-details-header,
.user-dropdown .user-details-header {
    flex: 1;
    min-width: 0; /* 允许文本溢出被裁剪 */
    overflow: hidden; /* 确保文本溢出被裁剪 */
}

.user-menu .user-name-header,
.user-dropdown .user-name-header {
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu .user-role-header,
.user-dropdown .user-role-header {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
.user-menu .dropdown-item,
.user-dropdown .dropdown-item,
.dropdown-menu .dropdown-item {
    color: #1f2937;
    background: #ffffff;
    border: none;
    padding: 10px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 0;
    text-shadow: none;
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
.user-menu .dropdown-item:hover,
.user-dropdown .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
    background: #f3f4f6;
    color: #1f2937;
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
.user-menu .dropdown-item i,
.user-dropdown .dropdown-item i,
.dropdown-menu .dropdown-item i {
    color: #4b5563;
    width: 16px;
    text-align: center;
    font-size: 14px;
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
.user-menu .dropdown-item:hover i,
.user-dropdown .dropdown-item:hover i,
.dropdown-menu .dropdown-item:hover i {
    color: #374151;
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
.user-menu .dropdown-divider,
.dropdown-menu .dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

.user-menu .logout-item,
.dropdown-menu .logout-item {
    color: #dc2626;
}

.user-menu .logout-item:hover,
.dropdown-menu .logout-item:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.user-menu .logout-item i,
.dropdown-menu .logout-item i {
    color: #dc2626;
}

.user-menu .logout-item:hover i,
.dropdown-menu .logout-item:hover i {
    color: #b91c1c;
}

/* === 强制覆盖所有可能的样式冲突 === */
.user-menu .dropdown-menu *,
.dropdown-menu * {
    color: inherit;
}

.user-menu .dropdown-menu .user-name-header,
.user-menu .dropdown-menu .user-role-header,
.user-menu .dropdown-menu .dropdown-item,
.dropdown-menu .user-name-header,
.dropdown-menu .user-role-header,
.dropdown-menu .dropdown-item {
    text-shadow: none;
    background: none;
    border: none;
}

/* === 确保默认状态下所有文字都清晰可见 === */
.user-menu .dropdown-menu a,
.user-menu .dropdown-menu .dropdown-item,
.user-menu .dropdown-menu .user-name-header,
.user-menu .dropdown-menu .user-role-header,
.dropdown-menu a,
.dropdown-menu .dropdown-item,
.dropdown-menu .user-name-header,
.dropdown-menu .user-role-header {
    color: #1f2937;
    background: #ffffff;
    text-shadow: none;
    font-weight: 500;
}

.user-menu .dropdown-menu a:not(:hover),
.user-menu .dropdown-menu .dropdown-item:not(:hover),
.dropdown-menu a:not(:hover),
.dropdown-menu .dropdown-item:not(:hover) {
    color: #1f2937;
    background: #ffffff;
}

.user-menu .dropdown-menu .logout-item:not(:hover),
.dropdown-menu .logout-item:not(:hover) {
    color: #dc2626;
    background: #ffffff;
}

.user-menu .dropdown-menu .logout-item:not(:hover) i,
.dropdown-menu .logout-item:not(:hover) i {
    color: #dc2626;
}

/* === 确保下拉菜单在导航栏中正确显示 === */
.header .user-menu,
.user-menu {
    position: relative;
    z-index: 10001 !important;
}

/* 重要：.show类必须放在通用样式之后，以确保优先级 */
.user-menu .dropdown-menu.show,
.dropdown-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
/* 默认隐藏样式 */
.user-menu .dropdown-menu:not(.show),
.dropdown-menu:not(.show) {
    display: none;
}

.user-menu .dropdown-menu,
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10002 !important;
    margin-top: 8px;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #1f2937;
}

.user-menu .dropdown-menu *,
.dropdown-menu * {
    color: #1f2937;
    background: transparent;
    text-shadow: none;
}

.user-menu .dropdown-menu .user-name-header,
.dropdown-menu .user-name-header {
    color: #1f2937;
    font-weight: 600;
}

.user-menu .dropdown-menu .user-role-header,
.dropdown-menu .user-role-header {
    color: #6b7280;
    font-weight: 500;
}

.user-menu .dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item {
    color: #1f2937;
    background: #ffffff;
}

.user-menu .dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item i {
    color: #4b5563;
}

.user-menu .dropdown-menu .logout-item,
.dropdown-menu .logout-item {
    color: #dc2626;
    background: #ffffff;
}

.user-menu .dropdown-menu .logout-item i,
.dropdown-menu .logout-item i {
    color: #dc2626;
}

/* === 移动端适配 === */
@media (max-width: 640px) {
    .user-menu .dropdown-menu,
    .dropdown-menu {
        right: -10px;
        left: auto;
        min-width: 180px;
    }
    
    .user-menu .dropdown-header,
    .dropdown-header {
        padding: 10px 12px;
    }
    
    .user-menu .dropdown-item,
    .dropdown-item {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
/* === 关键修复：确保 show 类优先级最高 === */
/* 注意：此样式已在第4811行定义，这里移除重复定义 */

/* === 页面底部空白修复 === */
.page,
/* 注意：.main-content 的基础定义在第4024行，这里只保留特定场景的样式 */
.container,
.content-wrapper {
  min-height: calc(100vh - 150px); /* 根据顶部header高度调整 */
  box-sizing: border-box;
}
/* === 最终修复：内容高度自适应，去除底部灰色块 === */
/* 注意：html, body 和 main-container 的样式已合并，避免重复定义 */
/* 此样式同时覆盖index.html中原来的内联样式 */
/* ✅ 优化：移除!important，使用高特异性选择器 */
html, 
body {
  height: auto;
  min-height: 0;
  background: #ffffff;
  overflow-y: auto;
}

/* 彻底移除页面底部灰色背景 */
body::before {
  display: none;
}

/* 让主容器高度随内容变化 */
.main-container {
  align-items: flex-start; /* 不再强制拉伸子项 */
  height: auto;
  min-height: auto;
  background: #ffffff;
}

/* 确保main元素高度自适应内容 */
main {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  display: block !important;
}

/* 注意：.content-area 的基础定义在第953行，已包含背景色和min-height设置 */

/* ✅ 优化：移除!important，使用高特异性选择器 */
.page-content {
  box-shadow: none;
}

/* === 组织生活管理模块样式 === */
.organization-life-container {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  background: #ffffff;
}

#organization-lifePage .organization-life-container {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ✅ 修复：删除冲突的样式定义，使用统一样式系统 */
/* 组织生活页面使用统一的页面样式系统（main.css 第1097行） */
/* 如果需要特定样式，应在 organization_life.css 中定义（已有作用域保护） */
.organization-life-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 注意：page-header 样式已在 main.css 第1097行统一定义 */
/* 如果需要特定覆盖，应在 organization_life.css 中定义 */

.organization-life-page .page-actions {
  display: flex;
  gap: 10px;
}

.organization-life-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 统计卡片样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

/* 组织生活页面统计卡片 - 使用特定样式避免与dashboard.css冲突 */
.organization-life-page .stat-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.2s ease;
}

.organization-life-page .stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 组织生活页面统计图标 - 使用作用域避免全局污染 */
.organization-life-page .stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  background: var(--gradient-primary);
}

.stat-content h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
}

.stat-content p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

/* 活动列表样式 */
.activities-section,
.notes-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.section-header h3 {
  margin: 0;
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
}

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

.activities-list,
.notes-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 活动卡片样式 */
.activity-card,
.note-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s ease;
}

.activity-card:hover,
.note-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}

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

.activity-header h4 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
}

.activity-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-completed {
  background: #d1fae5;
  color: #065f46;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.activity-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6b7280;
  font-size: 14px;
}

.detail-item i {
  color: #9ca3af;
}

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

/* 笔记卡片样式 */
.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-header h4 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
}

.note-date {
  color: #6b7280;
  font-size: 12px;
}

.note-content {
  margin-bottom: 15px;
}

.note-content p {
  margin: 0;
  color: #4b5563;
  line-height: 1.5;
}

.note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.note-author {
  color: #6b7280;
  font-size: 12px;
}

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

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.empty-state i {
  font-size: 48px;
  color: #d1d5db;
  margin-bottom: 15px;
}

.empty-state p {
  margin: 0 0 20px 0;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) { /* --breakpoint-md */
  .organization-life-page {
    padding: 15px;
  }
  
  /* 注意：page-header 响应式样式已在统一样式系统中定义 */
  /* 如果需要特定响应式覆盖，应在 organization_life.css 中定义 */
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .activity-details {
    flex-direction: column;
    gap: 10px;
  }
  
  .activity-actions,
  .note-actions {
    flex-wrap: wrap;
  }
}

/* 公文编辑器样式 */
.editor-toolbar{display:flex;gap:6px;margin:6px 0}
.editor-area,
/* ✅ 优化：移除!important，使用高特异性选择器 */
#govDocsPage #docBody,
#docBody {
  min-height:360px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:12px;
  background:#fff;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  cursor: text;
  outline: none;
  position: relative;
  z-index: 1;
  display: block;
  visibility: visible;
  opacity: 1;
}
#govDocsPage .editor-area:focus,
#govDocsPage #docBody:focus,
.editor-area:focus,
#docBody:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(161, 22, 22, 0.1);
  outline: none;
}
#govDocsPage .editor-area *,
#govDocsPage #docBody *,
.editor-area *,
#docBody * {
  pointer-events: auto;
  user-select: text;
}
[contenteditable][data-placeholder]:empty:before{
  content: attr(data-placeholder);
  color:#9ca3af;
  pointer-events: none;
  position: absolute;
  top: 12px;
  left: 12px;
}
[contenteditable][data-placeholder]:not(:empty):before{
  display: none;
}
/* 确保页面激活时编辑器可编辑 */
/* ✅ 优化：移除!important，使用高特异性选择器 */
.page.active .editor-area,
.page.active #docBody {
  pointer-events: auto;
  user-select: text;
}

/* ===== 公文制作与发布页面美化样式 ===== */
#govDocsPage {
  padding: 24px;
  background: #f8fafc;
}

/* ✅ 优化：移除重复的#govDocsPage .page-header定义，已在上面统一定义 */
/* 注意：page-header的基础样式已在上面统一定义（第1064-1089行），这里不需要重复定义 */

/* 统一标题栏样式：字体大小28px，字体粗细700 */
/* ✅ 优化：移除!important，使用高特异性选择器（已在上面统一定义） */
/* 注意：page-title的基础样式已在上面统一定义（第1092-1117行），这里不需要重复定义 */

#govDocsPage .page-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

#govDocsPage .page-actions .btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#govDocsPage .page-actions .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#govDocsPage .page-actions .btn-primary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(10px);
}

#govDocsPage .page-actions .btn-primary:hover {
  background: rgba(255, 255, 255, 0.3);
}

#govDocsPage .page-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  backdrop-filter: blur(10px);
}

#govDocsPage .page-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
}

#govDocsPage .page-actions .btn-success {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

#govDocsPage .page-actions .btn-success:hover {
  background: rgba(34, 197, 94, 1);
}

#govDocsPage .page-actions .btn-warning {
  background: rgba(234, 179, 8, 0.9);
  color: white;
}

#govDocsPage .page-actions .btn-warning:hover {
  background: rgba(234, 179, 8, 1);
}

#govDocsPage .u-page-hero {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  padding: 16px 24px;
  border-radius: 8px;
  margin-bottom: 24px;
  border-left: 4px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
}

#govDocsPage .info-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}

#govDocsPage .info-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#govDocsPage .info-card h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  padding-bottom: 12px;
  border-bottom: 2px solid #e5e7eb;
}

#govDocsPage .info-card label {
  display: block;
  margin: 16px 0 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

#govDocsPage .info-card .form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;
  background: white;
}

#govDocsPage .info-card .form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(161, 22, 22, 0.1);
}

#govDocsPage .info-card .btn-outline {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

#govDocsPage .info-card .btn-outline:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

#govDocsPage .info-card .btn-primary {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

#govDocsPage .info-card .btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(161, 22, 22, 0.3);
}

/* 文头预览样式 */
/* 公文实时预览区域样式 */
.doc-preview-container {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-top: 16px;
}

.doc-preview-page {
  width: 210mm; /* A4宽度 */
  min-height: 297mm; /* A4高度 */
  margin: 0 auto;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-family: '宋体', 'SimSun', 'Microsoft YaHei', serif;
  line-height: 1.75;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 页眉区域 */
.doc-preview-header-area {
  height: 15mm; /* 页眉高度1.5cm */
  padding: 0 28mm 0 28mm; /* 左右边距 */
  box-sizing: border-box;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  font-size: 10pt;
  color: #666;
}

/* 正文内容区域 */
.doc-preview-content {
  flex: 1;
  padding: 37mm 26mm 35mm 28mm; /* 上3.7cm，右2.6cm，下3.5cm，左2.8cm */
  box-sizing: border-box;
  overflow-y: auto;
}

/* 页脚区域 */
.doc-preview-footer-area {
  height: 28mm; /* 页脚高度2.8cm */
  padding: 0 28mm 0 28mm; /* 左右边距 */
  box-sizing: border-box;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10pt;
  color: #666;
}

.doc-preview-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative; /* 为分层提供定位上下文 */
}

.doc-preview-issuer {
  font-size: 26pt; /* 一号字约26磅 */
  font-weight: normal; /* 标准字重，不加粗 */
  color: #FF0000;
  margin-bottom: 8pt; /* 发文机关与文号间距 */
  font-family: '方正小标宋简体', '小标宋体', 'SimSun', '宋体', serif;
  letter-spacing: normal; /* 正常字符间距 */
  line-height: 1.2;
}

.doc-preview-number {
  font-size: 16pt;
  color: #000000; /* 文号为黑色 */
  margin-bottom: 12pt; /* 文号与装饰线间距 */
  font-family: '小标宋体', 'SimSun', '宋体', serif;
  text-align: center;
  position: relative;
  z-index: 2; /* 确保显示在文头图片之上 */
}

.doc-preview-star-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20pt; /* 装饰线与标题间距 */
}

.doc-preview-star {
  color: #FF0000;
  font-size: 16pt;
  font-weight: bold;
  margin: 0 8px;
  line-height: 1;
}

.doc-preview-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background-color: #FF0000;
}

.doc-preview-title {
  font-size: 22pt;
  font-weight: bold;
  margin: 20px 0;
  line-height: 1.4;
  color: #000;
}

/* 文头图片强制居中与自适应 */
#previewHeaderImage {
  text-align: center;
}
#previewHeaderImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 98%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* ✅ 优化：移除!important，使用高特异性选择器 */
/* 强化正文编辑器可选中/可交互（覆盖任何上层样式）*/
#govDocsPage .editor-area,
#govDocsPage #docBody {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  cursor: text;
  position: relative;
  z-index: 10;
}
/* ✅ 优化：移除!important，使用高特异性选择器 */
/* ✅ 优化：移除!important，使用高特异性选择器 */
#govDocsPage .editor-area *,
#govDocsPage #docBody * {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* 编辑器表格基础样式 */
#govDocsPage .editor-area table.doc-table {
  border-collapse: collapse;
  width: 100%;
}
#govDocsPage .editor-area table.doc-table th,
#govDocsPage .editor-area table.doc-table td {
  border: 1px solid #000;
  padding: 4px 6px;
}

/* 公文制作页 标签页样式 */
#govDocsPage .tabs {
  margin-top: 8px;
  margin-bottom: 20px;
}
#govDocsPage .tab-header {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0;
  background: #f5f5f5;
  padding: 8px 8px 0 8px;
  border-radius: 0;
}
#govDocsPage .tab-btn {
  padding: 12px 24px;
  border: none;
  border-bottom: 3px solid transparent;
  background: #ffffff;
  color: #6b7280;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap; /* 防止文字换行 */
  transition: all 0.2s ease;
  position: relative;
  min-width: 140px; /* 确保有足够宽度 */
  text-align: center;
  margin-bottom: -1px; /* 与底部边框重叠 */
}
#govDocsPage .tab-btn:hover {
  color: var(--color-primary);
  background: #ffffff;
}
#govDocsPage .tab-btn.active {
  background: #ffffff;
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 3px solid var(--color-primary);
  z-index: 1;
}
#govDocsPage .tab-btn.active::before {
  display: none; /* 移除顶部装饰线 */
}
#govDocsPage .tab-content {
  display: none;
}
#govDocsPage .tab-content.active {
  display: block;
}
#govDocsPage .editor-area table.doc-table.noborder th,
#govDocsPage .editor-area table.doc-table.noborder td {
  border: 1px solid transparent;
}

.doc-preview-date {
  font-size: 16pt;
  margin-top: 16px;
  color: #000;
}

.doc-preview-body {
  font-size: 16pt;
  line-height: 1.75;
  color: #000;
  text-align: left;
  margin-top: 30px;
  min-height: 200px;
}

.doc-preview-body p {
  margin: 0 0 12px 0;
  text-indent: 2em;
}

.doc-preview-body p:first-child {
  text-indent: 0;
}

/* 公文样式类 - 用于编辑器 */
#govDocsPage .editor-area .official-document,
#govDocsPage #docBody .official-document {
  font-family: "仿宋_GB2312", "FangSong", serif;
  font-size: 16pt; /* 三号字 */
  line-height: 28.5pt;
  text-indent: 2em;
}

#govDocsPage .editor-area .document-title,
#govDocsPage #docBody .document-title {
  font-family: "小标宋体", "XiaoBiaoSong", serif;
  font-size: 22pt; /* 二号字 */
  text-align: center;
  line-height: 1.5;
  margin: 20pt 0;
  display: block;
}

#govDocsPage .editor-area .heading-1,
#govDocsPage #docBody .heading-1 {
  font-family: "黑体", "SimHei", sans-serif;
  font-size: 16pt;
  font-weight: bold;
  margin: 14pt 0 7pt 0;
  display: block;
}

#govDocsPage .editor-area .heading-2,
#govDocsPage #docBody .heading-2 {
  font-family: "楷体_GB2312", "KaiTi", serif;
  font-size: 16pt;
  font-weight: bold;
  margin: 8pt 0 4pt 0;
  display: block;
}

/* 预览区域也应用相同样式 */
.doc-preview-body .official-document {
  font-family: "仿宋_GB2312", "FangSong", serif;
  font-size: 16pt;
  line-height: 28.5pt;
  text-indent: 2em;
}

.doc-preview-body .document-title {
  font-family: "小标宋体", "XiaoBiaoSong", serif;
  font-size: 22pt;
  text-align: center;
  line-height: 1.5;
  margin: 20pt 0;
}

.doc-preview-body .heading-1 {
  font-family: "黑体", "SimHei", sans-serif;
  font-size: 16pt;
  font-weight: bold;
  margin: 14pt 0 7pt 0;
}

.doc-preview-body .heading-2 {
  font-family: "楷体_GB2312", "KaiTi", serif;
  font-size: 16pt;
  font-weight: bold;
  margin: 8pt 0 4pt 0;
}

/* 公文预览区域 - 小预览框样式 */
#govDocsPage .issuer,
#govDocsPage .number,
#govDocsPage .title,
#govDocsPage .date {
  padding: 8px 12px;
  margin: 4px 0;
  background: #f9fafb;
  border-radius: 6px;
  border-left: 3px solid var(--color-primary);
  font-size: 14px;
  color: #374151;
}

#govDocsPage .title {
  font-weight: 600;
  color: #1f2937;
  font-size: 16px;
}

/* 编辑器工具栏美化 */
#govDocsPage .editor-toolbar {
  background: #f9fafb;
  padding: 8px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #e5e7eb;
  border-bottom: none;
}

#govDocsPage .editor-toolbar .btn {
  padding: 6px 12px;
  min-width: 40px;
}

/* 编辑器区域美化 */
#govDocsPage .editor-area,
/* ✅ 优化：移除!important，使用高特异性选择器 */
#govDocsPage #docBody {
  background: white;
  border-radius: 0 0 8px 8px;
  border-top: none;
  min-height: 400px;
  line-height: 1.75;
  font-size: 15px;
  /* 强制确保可编辑 */
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  cursor: text;
  position: relative;
  z-index: 10;
  display: block;
  visibility: visible;
  opacity: 1;
}

/* 确保编辑器在页面激活时完全可编辑 */
#govDocsPage.active .editor-area,
#govDocsPage.active #docBody,
.page.active #govDocsPage .editor-area,
.page.active #govDocsPage #docBody {
  pointer-events: auto;
  user-select: text;
  cursor: text;
}

/* 确保编辑器及其内部元素始终可交互 */
#govDocsPage .editor-area *,
#govDocsPage #docBody * {
  pointer-events: auto;
  user-select: text;
}

/* 确保所有表单元素和按钮可交互 */
#govDocsPage .btn,
#govDocsPage .form-input,
#govDocsPage select,
#govDocsPage input:not([type="hidden"]),
#govDocsPage button,
/* ✅ 优化：移除!important，使用高特异性选择器 */
#govDocsPage a,
#govDocsPage table,
#govDocsPage table * {
  pointer-events: auto;
}

/* 表格美化 */
#govDocsPage .u-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

#govDocsPage .u-table thead {
  background: var(--gradient-primary);
  color: white;
}

#govDocsPage .u-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
}

#govDocsPage .u-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  color: #374151;
}

#govDocsPage .u-table tbody tr {
  transition: background 0.2s;
}

#govDocsPage .u-table tbody tr:hover {
  background: #f9fafb;
}

/* 校验结果样式 */
#govDocsPage #validateBox {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
}

#govDocsPage .val-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}

#govDocsPage .val-list li {
  padding: 6px 12px;
  margin: 4px 0;
  border-radius: 4px;
  font-size: 13px;
}

#govDocsPage .val-list--error li {
  background: #fee2e2;
  color: #991b1b;
}

#govDocsPage .val-list--warn li {
  background: #fef3c7;
  color: #92400e;
}

/* ✅ 优化：移除!important，响应式媒体查询已提供足够特异性 */
/* 响应式布局 */
@media (max-width: 1024px) {
  #govDocsPage [style*="grid-template-columns:380px 1fr"] {
    grid-template-columns: 1fr;
  }
  
  #govDocsPage .page-actions {
    flex-direction: column;
  }
  
  #govDocsPage .page-actions .btn {
    width: 100%;
  }
}