/* 基础样式重置与变量定义 */
:root { --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); /* 全局样式变量定义 - 统一管理颜色、间距、阴影等基础样式 */ --primary-color: #4F46E5; /* 主渐变背景 - 用于按钮、标题等重点元素 */ --primary-light: #818CF8; /* 主色调 - 靛蓝色，用于主要按钮和关键交互元素 */ --secondary-color: #EC4899; /* 辅助色 - 粉色，用于强调和次要交互元素 */ --secondary-light: #F472B6; --neutral-50: #F9FAFB; --neutral-100: #F3F4F6; /* 中性色 - 超浅灰，用于背景色 */ --neutral-200: #E5E7EB; /* 中性色 - 浅灰色背景，用于卡片背景 */ --neutral-300: #D1D5DB; /* 中性色 - 边框和分割线颜色 */ --neutral-400: #9CA3AF; /* 中性色 - 用于禁用状态文本或图标 */ --neutral-500: #6B7280; /* 中性色 - 次要文本和辅助信息 */ --neutral-600: #4B5563; /* 中性色 - 常规文本颜色 */ --neutral-700: #374151; /* 中性色 - 强调文本和标题 */ --neutral-800: #1F2937; /* 中性色 - 主要标题和重要文本 */ --neutral-900: #111827; /* 中性色 - 深色背景文本 */ /* 中性色 - 最深色文本，用于高对比度场景 */ --primary-rgb: 79, 70, 229; --secondary-rgb: 236, 72, 153; --circle-size: 12rem; --stats-padding: 4rem 0; --stats-gap: 2rem; --assessments-padding: 5rem 0; --assessments-gap: 2rem; --card-border-radius: 12px; --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); --card-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12); --success: #00B42A; /* 成功状态色 - 用于成功提示和积极状态 */ --warning: #FF7D00; /* 警告状态色 - 用于警告提示和需要注意的信息 */ --danger: #F53F3F; /* 危险状态色 - 用于错误提示和危险操作 */ --transition-custom: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 标准过渡效果 - 用于统一动画时间曲线 */ --color-blue: #2191dc; /* 定义颜色：蓝色 */ --color-blue-dark: #4285b2; /* 定义颜色：深蓝色 */ --color-blue-light: #3498db; /* 定义颜色：浅蓝色 */ --color-green: #10b981; /* 定义颜色：深绿色 */ --color-green-dark: #059669; /* 定义颜色：深绿色 */ --color-green-light: #81c784; /* 定义颜色：浅绿色 */ --color-yellow: #facc15; /* 定义颜色：黄色 */ --color-yellow-dark: #d97706; /* 定义颜色：深黄色 */ --color-yellow-light: #fde047; /* 定义颜色：浅黄色 */ --color-red: #ef4444; /* 定义颜色：红色 */ --color-red-dark: #b91c1c; /* 定义颜色：深红色 */ --color-red-light: #f87171; /* 定义颜色：浅红色 */ --color-pink: #f472b6; /* 定义颜色：粉色 */ --color-pink-dark: #c53084; /* 定义颜色：深粉色 */ --color-pink-light: #f9a8d4; /* 定义颜色：浅粉色 */ --color-gray: #9ca3af; /* 定义颜色：灰色 */ --color-gray-dark: #6b7280; /* 定义颜色：深灰色 */ --color-gray-light: #d1d5db; /* 定义颜色：浅灰色 */ --color-purple: #9333ea; /* 定义颜色：紫色 */ --color-purple-dark: #7e22ce; /* 定义颜色：深紫色 */ --color-purple-light: #a855f7; /* 定义颜色：浅紫色 */ --color-orange: #f97316; /* 定义颜色：橙色 */ --color-orange-dark: #c2410c; /* 定义颜色：深橙色 */ --color-orange-light: #fb923c; /* 定义颜色：浅橙色 */ }

* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; }
/* i { margin-right: 6px; } */

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.link-list { list-style: none; }
.image-full { width: 100%; height: auto; border-radius: 1.5rem; }

/* 渐变文本工具类 - 用于标题等需要强调的文本 */
.text-gradient { background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(135deg, #165DFF 0%, #722ED1 100%); }

.meta-label { /* 元数据标签 - 用于显示测评卡片中的辅助信息标签 */ color: var(--neutral-400); font-size: 0.75rem; }

.meta-value { /* 元数据值 - 用于显示测评卡片中的具体数据值 */ color: var(--neutral-700); font-weight: bold; font-size: 0.875rem; }


/*====B:margin padding=============================*/
.mar { margin: 30px !important }
.mar-10 { margin: 10px !important; }
.mar-20 { margin: 20px !important; }
.mar-30 { margin: 30px !important; }
.mar-l10 { margin-left: 10px !important }
.mar-l20 { margin-left: 20px !important }
.mar-l30 { margin-left: 30px !important }
.mar-r10 { margin-right: 10px !important }
.mar-r20 { margin-right: 20px !important }
.mar-r30 { margin-right: 30px !important }
.mar-b10 { margin-bottom: 10px !important }
.mar-b20 { margin-bottom: 20px !important }
.mar-b30 { margin-bottom: 30px !important }
.mar-t10 { margin-top: 10px !important }
.mar-t20 { margin-top: 20px !important }
.mar-t30 { margin-top: 30px !important }
.mar-none { margin: 0 !important }
.mar-l-none { margin-left: 0 !important }
.mar-r-none { margin-right: 0 !important }
.mar-t-none { margin-top: 0 !important }
.mar-b-none { margin-bottom: 0 !important }
/**/
.pad { padding: 30px !important }
.pad-10 { padding: 10px !important; }
.pad-20 { padding: 20px !important; }
.pad-30 { padding: 30px !important; }
.pad-l10 { padding-left: 10px !important }
.pad-l20 { padding-left: 20px !important }
.pad-l30 { padding-left: 30px !important }
.pad-r10 { padding-right: 10px !important }
.pad-r20 { padding-right: 20px !important }
.pad-r30 { padding-right: 30px !important }
.pad-t10 { padding-top: 10px !important }
.pad-t20 { padding-top: 20px !important }
.pad-t30 { padding-top: 30px !important }
.pad-b10 { padding-bottom: 10px !important }
.pad-b20 { padding-bottom: 20px !important }
.pad-b30 { padding-bottom: 30px !important }
.pad-none { padding: 0 !important }
.pad-l-none { padding-left: 0 !important }
.pad-r-none { padding-right: 0 !important }
.pad-t-none { padding-top: 0 !important }
.pad-b-none { padding-bottom: 0 !important }
/*====E:margin padding=============================*/

/*====B:radius 圆角================================*/
.rad-0 { border-radius: 0px !important; }
.rad-5 { border-radius: 5px !important; }
.rad-10 { border-radius: 10px !important; }
.rad-20 { border-radius: 20px !important; }
.rad-50 { border-radius: 50px !important; }
.rad-t-5 { border-top-left-radius: 5px; border-top-right-radius: 5px; }
.rad-b-5 { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.rad-l-5 { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.rad-r-5 { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.rad-bl-5 { border-bottom-left-radius: 5px; }
.rad-br-5 { border-bottom-right-radius: 5px; }

.rad-t-10 { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.rad-b-10 { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.rad-l-10 { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.rad-r-10 { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
/*====E:radius 圆角================================*/

/*====B:标签=============================*/
.tag { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 500; transition: var(--transition-custom); }
.tag-small { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; transition: var(--transition-custom); }

.tag-primary { background-color: rgba(var(--primary-rgb), 0.1); color: var(--primary-color); }
.tag-orange { background-color: rgba(255, 125, 0, 0.1); color: var(--warning); }
.tag-red { background-color: #f8d7da; color: #DB4437; }
.tag-green { background-color: rgba(0, 180, 42, 0.1); color: var(--success); }
.tag-grey { background-color: var(--neutral-200); color: var(--neutral-600); }
.tag-yellow { background-color: #fff3cd; color: #ad8100; }
.tag-blue { background-color: #e3f2fd; color: #1976d2; }
.tag-cyan { background-color: #cbfffc; color: #19a39b; }
.tag-purple { background-color: #F3E8FF; color: #8E24AA; }
.tag-teal { background-color: #E0F2F1; color: #00897B; }
/*====E:标签=============================*/

/*====B:背景颜色=============================*/
.bg-main { background: linear-gradient(135deg, var(--primary-color) 0%, #4a94e0 100%); color: white; }
.bg-green { background: linear-gradient(135deg, var(--success) 0%, #2ecc71 100%); color: white; }
.bg-orange { background: linear-gradient(135deg, var(--warning) 0%, #f39c12 100%); color: white; }
.bg-red { background: var(--danger); color: white; }
.bg-blue { background: #12B7F5; color: white; }
.bg-color { background: var(--gradient-primary); color: white; }
.bg-outline { background: linear-gradient(135deg, var(--secondary-color) 0%, #3498db 100%); color: white; }
/*====E:背景颜色=============================*/

/*按钮区（开始）*/
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem 1.5rem; font-weight: 500; font-size: 1rem; color: white; background-color: var(--primary-color); border: none; border-radius: 0.75rem; cursor: pointer; box-shadow: 0 10px 15px -3px rgba(22, 93, 255, 0.2); transition: var(--transition-custom); }
.btn-primary:hover { background-color: rgba(22, 93, 255, 0.9); transform: translateY(-2px); }
.btn-primary i { transition: transform 0.3s ease; }
.btn-primary:hover i { transform: translateX(3px); }

/* 主题变化渐变按钮 */
.btn-primary-color { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem 1.5rem; font-weight: 500; font-size: 1rem; color: white; background-color: var(--primary-color); border: none; border-radius: 0.75rem; cursor: pointer; box-shadow: 0 10px 15px -3px rgba(22, 93, 255, 0.2); transition: var(--transition-custom); }
.btn-primary-color:hover { background: var(--gradient-primary); transform: translateY(-2px); }
.btn-primary-color i { transition: transform 0.3s ease; }
.btn-primary-color:hover i { transform: translateX(3px); }

/* 粉色渐变按钮 */
.btn-pink-color { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 600; font-size: 1rem; color: white; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(22, 93, 255, 0.25); background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.btn-pink-color:hover { transform: translateY(-3px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 16px rgba(22, 93, 255, 0.3); background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); }
.btn-pink-color i { transition: transform 0.3s ease; }
.btn-pink-color:hover i { transform: translateX(3px); }

/* 绿色渐变按钮 */
.btn-green-color { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem 1.5rem; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3); border: none; cursor: pointer; color: white; background: linear-gradient(135deg, var(--primary-color), #10b981); border-radius: 0.75rem; }
.btn-green-color:hover { transform: translateY(-3px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 22px rgba(34, 197, 94, 0.4); background: linear-gradient(90deg, #10b981 0%, var(--primary-color) 100%); }
.btn-green-color i { transition: transform 0.3s ease; }
.btn-green-color:hover i { transform: translateX(3px); }

/* 紫色渐变按钮 */
.btn-purple-color { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem 1.5rem; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(147, 51, 234, 0.3); border: none; cursor: pointer; color: white; background: linear-gradient(135deg, var(--primary-color), #8b5cf6); border-radius: 0.75rem; }
.btn-purple-color:hover { transform: translateY(-3px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 22px rgba(147, 51, 234, 0.4); background: linear-gradient(90deg, #8b5cf6 0%, var(--primary-color) 100%); }
.btn-purple-color i { transition: transform 0.3s ease; }
.btn-purple-color:hover i { transform: translateX(3px); }

/* 灰色渐变按钮 */
.btn-grey-color { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem 1.5rem; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(128, 128, 128, 0.3); border: none; cursor: pointer; color: white; background: linear-gradient(135deg, var(--neutral-400), var(--neutral-500)); border-radius: 0.75rem; }
.btn-grey-color:hover { transform: translateY(-3px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 22px rgba(128, 128, 128, 0.4); background: linear-gradient(90deg, var(--neutral-500) 0%, var(--neutral-400) 100%); }
.btn-grey-color i { transition: transform 0.3s ease; }
.btn-grey-color:hover i { transform: translateX(3px); }

/* 白底按钮 */
.btn-white { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--primary-color); font-weight: 600; font-size: 1rem; padding: 0.75rem 1.5rem; transition: all 0.3s ease; border: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); background: white; cursor: pointer; border-radius: 0.75rem; }
.btn-white:hover { transform: translateY(-3px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1); }

/* 透明按钮 */
.btn-Transparent { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: white; font-weight: 600; font-size: 1rem; padding: 0.75rem 1.5rem; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 0.75rem; }
.btn-Transparent:hover { transform: translateY(-3px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1); */ background: rgba(255, 255, 255, 0.3); }

.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem 2rem; font-weight: 500; font-size: 1rem; color: var(--neutral-700); background-color: transparent; border: 1px solid var(--neutral-300); cursor: pointer; transition: var(--transition-custom); border-radius: 0.75rem; }
.btn-outline:hover { border-color: var(--primary-color); color: var(--primary-color); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }


/* 登录按钮悬停效果 - 轻微背景色变化和上浮阴影增强交互感 */
.btn-blank { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--primary-color); color: var(--primary-color); background: transparent; padding: 0.75rem 1.5rem; font-weight: 500; cursor: pointer; transition: var(--transition-custom); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); border-radius: 0.75rem; }
.btn-blank:hover { background-color: rgba(var(--primary-rgb), 0.05); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }

/** 在section 右上角，更多按钮 */
.btn-section-more { display: inline-flex; align-items: center; gap: 10px; color: var(--primary-color); font-weight: 600; font-size: .9rem; transition: all 0.3s ease; text-decoration: none; }
.btn-section-more:hover { color: var(--secondary-color); transform: translateX(5px); }
.btn-section-more i { transition: transform 0.3s ease; }
.btn-section-more:hover i { transform: translateX(3px); }



.btn-min { padding: 6px 20px; font-size: .9rem; }
.btn-full { width: 100%; }



/* 按钮区域-分享（有图标） */
.buttons-share { display: flex; align-items: center; gap: 0.75rem; }
.buttons-share .share-text { font-size: 0.875rem; color: var(--text-secondary); }
.buttons-share .share-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: all 0.3s ease; }
.buttons-share .share-btn:hover { transform: scale(1.1); }

/* 按钮区域-交互（有图标） */
.buttons-interaction { display: flex; gap: 1rem; }
.buttons-interaction .interaction-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border: 1px solid #ddd; color: #666; border-radius: 25px; font-size: .95rem; cursor: pointer; text-decoration: none; transition: all 0.3s ease; }
.buttons-interaction .interaction-btn:hover { transform: scale(1.05); border-color: #667eea; color: #667eea; background-color: #f0f4ff; }



/*按钮区（结束）*/


/*表单（开始）*/

.form-column { display: flex; flex-direction: column; gap: 1.5rem; }
.form-row { display: flex; gap: 1.5rem; }
.form-hint { margin-top: 0.5rem; font-size: 0.85rem; color: var(--neutral-500); }

.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; margin-bottom: 0.625rem; font-weight: 500; color: var(--neutral-700); }

.form-group label { display: block; font-weight: 500; color: var(--neutral-700); margin-bottom: 0.625rem; font-size: 1rem; }
.form-group.required label::after { content: ' *'; color: var(--danger); }

.form-group input[type="text"],
.form-group input[type="date"],
.form-group select,
.form-group textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--neutral-300); border-radius: 0.5rem; font-size: 1rem; color: var(--neutral-700); background-color: #fff; transition: border-color var(--transition-custom); }

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

.form-group textarea { min-height: 120px; resize: vertical; font-family: inherit; line-height: 1.6; }
.form-group textarea.large { min-height: 200px; }

.form-input { width: 100%; padding: 0.75rem 0.75rem 0.75rem 2.5rem !important; border: 1px solid var(--neutral-300); border-radius: 0.5rem; font-size: 1rem; transition: var(--transition-custom); }
.form-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1); }


.form-control { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--neutral-300); border-radius: 0.5rem; font-size: 1rem; transition: border-color 0.3s ease; }
.form-control:focus { outline: none; border-color: var(--primary-color); }

.input-group { position: relative; }
.input-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--neutral-400); }

.form-actions { display: flex; justify-content: center; align-items: center; margin-top: 0.5rem; gap: 1rem; }
.checkbox-label { display: flex; align-items: center; color: var(--neutral-600); font-size: 0.875rem; cursor: pointer; }
.form-checkbox { margin-right: 0.5rem; width: 1rem; height: 1rem; accent-color: var(--primary-color); }

.form-select { padding: 0.65rem 1rem; border-radius: 8px; border: 1px solid var(--neutral-300); background-color: #ffffff; color: var(--neutral-700); font-size: 0.95rem; transition: all 0.3s ease; width: 100%; max-width: 200px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1em; min-width: 160px; }
.form-select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1); }
.form-select:hover:not(:disabled) { border-color: var(--primary-light); }

.radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; }
.radio-item { display: flex; align-items: center; cursor: pointer; }
.radio-item input[type="radio"] { margin-right: 0.5rem; width: 16px; height: 16px; }
.radio-item label { cursor: pointer; padding: 0.2rem 0; }

/* 工作台-查询栏 */
.form-filters { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; background-color: #fff; padding: 20px; }
.form-filters .form-search-input { position: relative; flex: 1; }
.form-filters .form-search-input > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--neutral-400); }

/*表单（结束）*/

/* 表格 begin */
.table-container { overflow: auto !important; }
table.default { width: 100%; border-collapse: collapse; }
table.default th,
table.default td { padding: 12px 15px; text-align: left; }

table.default th { font-weight: 600; color: var(--neutral-700); border-bottom: 2px solid var(--neutral-200); }
table.default td { color: var(--neutral-600); border-bottom: 1px solid var(--neutral-100); font-size: .9rem; }
table.default tr:last-child td { border-bottom: none; }
table.default tr:hover td { background-color: var(--neutral-50); }

table.default .td-center { text-align: center }

/* 表格 end */
/* 面包屑导航 */
.breadcrumb-section { background-color: #f5f7fa; padding: 20px 0; border-bottom: 1px solid var(--neutral-200); }
.breadcrumb { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.breadcrumb li { position: relative; margin-right: 12px; }
.breadcrumb li:not(:last-child)::after { content: ">"; position: absolute; right: -10px; top: 1px; color: #999; font-size: 12px; }
.breadcrumb li a { color: #666; text-decoration: none; transition: color 0.3s ease; }
.breadcrumb li a:hover { color: var(--primary-color); }
.breadcrumb li.active { color: var(--primary-color); }

/* 页面标题区域 */
.page-title-section { padding: 3rem 0; background-color: var(--neutral-50); }
.page-title-section > .container { display: flex; flex-direction: column; align-items: center; }
.page-title { text-align: center; font-size: 2.5rem; margin-bottom: 1rem; color: var(--neutral-800); }
.page-description { text-align: center; margin: 0 auto 1rem; font-size: 1.1rem; line-height: 1.6; color: var(--neutral-600); }

.page-search-bar { width: 100%; max-width: 600px; position: relative; }
.search-input { width: 100%; padding: 15px 50px 15px 20px; border: none; border-radius: 30px; font-size: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; }
.search-input:focus { outline: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.search-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: var(--primary-color); color: white; border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; transition: background-color 0.3s ease; }
.search-btn:hover { background: var(--gradient-primary); }
.search-btn i { margin-right: 0; }
/* 项目主体颜色 */
.page-title-section.primary { background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%); }
.page-title-section.primary .page-title { color: white; }
.page-title-section.primary .page-description { color: var(--neutral-100); }
/* 透明背景 */
.page-title-section.transparent { background: transparent; }
/* 蓝色背景 */
.page-title-section.blue { background: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-blue-dark) 100%); }
.page-title-section.blue .page-title { color: white; }
.page-title-section.blue .page-description { color: var(--neutral-100); }
.page-title-section.blue .search-btn { background: var(--color-blue); }
/* 粉色背景 */
.page-title-section.pink { background: linear-gradient(135deg, var(--color-pink-light) 0%, var(--color-pink-dark) 100%); }
.page-title-section.pink .page-title { color: white; }
.page-title-section.pink .page-description { color: var(--neutral-100); }
.page-title-section.pink .search-btn { background: var(--color-pink); }
/* 紫色背景 */
.page-title-section.purple { background: linear-gradient(135deg, var(--color-purple-light) 0%, var(--color-purple-dark) 100%); }
.page-title-section.purple .page-title { color: white; }
.page-title-section.purple .page-description { color: var(--neutral-100); }
.page-title-section.purple .search-btn { background: var(--color-purple); }
/* 绿色背景 */
.page-title-section.green { background: linear-gradient(135deg, var(--color-green-light) 0%, var(--color-green-dark) 100%); }
.page-title-section.green .page-title { color: white; }
.page-title-section.green .page-description { color: var(--neutral-100); }
.page-title-section.green .search-btn { background: var(--color-green); }
/* 橙色背景 */
.page-title-section.orange { background: linear-gradient(135deg, var(--color-orange-light) 0%, var(--color-orange-dark) 100%); }
.page-title-section.orange .page-title { color: white; }
.page-title-section.orange .page-description { color: var(--neutral-100); }
.page-title-section.orange .search-btn { background: var(--color-orange); }


/* 页面二级菜单导航 */
/* 默认主题 */
.page-nav-section { padding: 20px 0; background: #fff; border-bottom: 1px solid #eee; }
.page-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }
.page-nav-item { display: flex; flex-direction: column; align-items: center; padding: 15px 20px; border-radius: 8px; background: var(--neutral-100); color: var(--neutral-700); text-decoration: none; transition: all 0.3s ease; min-width: 100px; }
.page-nav-item span { font-size: 0.9rem; text-align: center; }
.page-nav-item i { font-size: 24px; margin-bottom: 8px; margin-right: 0; }
.page-nav-item:hover { background: var(--primary-light); color: #fff; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); }
.page-nav-item:hover i { color: #fff; }
.page-nav-item.active { background: var(--primary-color); color: #fff; box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); }
.page-nav-item.active i { color: #fff; }

/* 透明主题 */
.page-nav-section.transparent { background: transparent; }

/* 粉色主题 */
.page-nav-section.pink .page-nav-item:hover { background: var(--color-pink-light); }
.page-nav-section.pink .page-nav-item.active { background: var(--color-pink); }

/* 蓝色背景 */
.page-nav-section.blue .page-nav-item:hover { background: var(--color-blue-light); }
.page-nav-section.blue .page-nav-item.active { background: var(--color-blue); }

/* 紫色背景 */
.page-nav-section.purple .page-nav-item:hover { background: var(--color-purple-light); }
.page-nav-section.purple .page-nav-item.active { background: var(--color-purple); }

/* 绿色背景 */
.page-nav-section.green .page-nav-item:hover { background: var(--color-green-light); }
.page-nav-section.green .page-nav-item.active { background: var(--color-green); }

/* 橙色背景 */
.page-nav-section.orange .page-nav-item:hover { background: var(--color-orange-light); }
.page-nav-section.orange .page-nav-item.active { background: var(--color-orange); }

/* 页面内，模块标题头 */
.section-title-container { text-align: center; margin-bottom: 30px; }
.section-title { text-align: center; font-size: 2.4rem; margin-bottom: 1rem; color: var(--neutral-800); }
.section-description { text-align: center; max-width: 800px; margin: 0 auto 1rem; color: var(--neutral-600); font-size: 1.1rem; line-height: 1.6; }

/* 页面内，模块头，左右对齐 */
.section-header-container { display: flex; justify-content: space-between; align-items: center; }
.section-actions { display: flex; gap: 0.5rem; }

/* 页面列表区域 */
.page-list-section { margin: 2rem 0; }

/* 页面筛选区域 */
.page-filter-section { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0; padding: 1.5rem; background-color: var(--neutral-50); border-radius: var(--card-border-radius); flex-wrap: wrap; gap: 1rem; }
.page-filter-section .filter-group { display: flex; align-items: center; gap: 0.75rem; }
.page-filter-section .filter-group label { font-size: 0.95rem; color: var(--neutral-700); font-weight: 500; white-space: nowrap; }




/* 卡片组件 begin */
.card-section { border-radius: var(--card-border-radius); overflow: hidden; }
.card-section.white { background-color: white; }
.card-header { padding: 1rem; border-bottom: 1px solid var(--neutral-200); color: var(--neutral-600); }
.card-header.grey { background-color: var(--neutral-50); }
.card-header.primary { background-color: var(--primary-color); color: var(--neutral-100); }
.card-header.actions { display: flex; justify-content: space-between; align-items: center; }

/* 标题大字体，有下边框 */
.card-section-title { font-size: 1.25rem; font-weight: 600; color: var(--neutral-800); padding-bottom: .8rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--primary-color); }

.card-content { color: var(--neutral-700); padding: 1rem; line-height: 1.8; }


/*组合 这个不用 */
/* .card-actions { background-color: white; padding: 1.5rem 2rem; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.card-actions i { margin-right: 0; } */


.card-shadow { box-shadow: var(--shadow-card); }
.card-shadow:hover { box-shadow: var(--shadow-card-hover); transition: box-shadow 0.3s ease; }

/* 卡片组件 End */




/*总体布局 Begin*/
.app-body { font-family: 'Inter', sans-serif; overflow-x: hidden; background-color: var(--neutral-100); color: var(--neutral-700); min-height: 100vh; display: flex; flex-direction: column; }
main.flex-grow { padding-top: 64px; }

/* 左右布局 */
.content-row { display: flex; gap: 30px; }
.content-left { flex: 3; }
.content-right { flex: 1; }

/*总体布局 end*/



/* 头部菜单-Begin （导航栏样式 - 网站顶部导航，包含logo、菜单和登录按钮） */
/* 导航栏容器 - 固定在顶部，包含响应式菜单 */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all 0.3s ease; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.navbar-container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.navbar-content { display: flex; justify-content: space-between; align-items: center; height: 4rem; }

.logo-container { display: flex; flex: 1; align-items: center; }
.logo-link { display: flex; align-items: center; text-decoration: none; }
.logo-icon { color: var(--primary); font-size: 1.5rem; margin-right: 0.5rem; }
.logo-text { font-size: 1.25rem; font-weight: 600; color: var(--neutral-700); }
.main-nav { display: none; flex: 1; justify-content: center; }

.nav-link { color: var(--neutral-700); text-decoration: none; padding: 0.75rem 0.5rem; font-size: 0.875rem; font-weight: 500; transition: var(--transition-custom); }
.nav-link:hover { color: var(--primary); }

.desktop-buttons { display: none; align-items: center; gap: 1rem; }

/* 头部菜单-end （导航栏样式 - 网站顶部导航，包含logo、菜单和登录按钮） */


/* 页脚样式-Begin - 网站底部信息展示，包含导航链接和联系方式 */
.footer-section { background-color: #374151; color: #ffffff; padding: 3rem 0; }
.footer-content { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.footer-bottom { border-top: 1px solid #4b5563; margin-top: 3rem; padding-top: 2rem; text-align: center; color: #9ca3af; }

.footer-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem; }

.footer-link { color: #d1d5db; text-decoration: none; transition: color 0.3s ease; line-height: 1.8; }
.footer-link:hover { color: #3b82f6; }

.brand-logo { display: flex; align-items: center; margin-bottom: 1.5rem; }
.brand-name { font-size: 1.5rem; font-weight: 600; margin-left: 0.5rem; }
.brand-description { color: #d1d5db; margin-bottom: 1.5rem; line-height: 1.6; }

.social-links { display: flex; gap: 1rem; }
.social-link { color: #d1d5db; transition: color 0.3s ease; }
.social-link:hover { color: #3b82f6; }

.contact-item { display: flex; margin-bottom: 1rem; }
.contact-icon { color: #3b82f6; margin-right: 0.75rem; margin-top: 0.25rem; }
.contact-text { color: #d1d5db; }
/* 页脚样式-End - 网站底部信息展示，包含导航链接和联系方式 */


/*分页页码-Begin*/
.pagination-container { display: flex; justify-content: space-between; }
.pagination-container .info { line-height: 2.2rem; }

.pagination { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.5rem; }

.page-item { display: inline-block; }

.page-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--neutral-300); background: #ffffff; color: var(--neutral-600); text-decoration: none; transition: var(--transition-custom); }
.page-link i { margin: 0; }
.page-link:hover:not(.disabled) { border-color: var(--primary-light); color: var(--primary-color); }
.page-link.active { background: var(--primary-color); color: #ffffff; border-color: var(--primary-color); }
.page-link.disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--neutral-300); color: var(--neutral-400); }
.pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--neutral-500); }
/*分页页码-End*/


/* 移动端菜单样式（开始） （导航栏样式 - 网站顶部导航，包含logo、菜单和登录按钮）  */
.mobile-menu { background-color: #ffffff; border-top: 1px solid #e5e6eb; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; position: relative; z-index: 90; }
/* 移动端菜单 - 通过max-height实现展开/收起动画 */
.mobile-menu.active { max-height: 80vh; overflow-y: auto; }
.mobile-menu.active { display: block; }

.mobile-menu-btn-container { display: flex; align-items: center; }
.mobile-menu-btn { display: block; background: none; border: none; font-size: 1.5rem; color: #4e5969; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s ease; z-index: 100; }
.mobile-menu-btn:hover,
.mobile-menu-btn.active { background-color: #f2f3f5; color: #165dff; }

.mobile-menu-items { padding: 0.5rem 0; }
.mobile-menu-item { display: block; padding: 0.75rem 1rem; color: #4e5969; text-decoration: none; border-radius: 0.375rem; transition: all 0.3s ease; font-size: 1rem; font-weight: 500; }
.mobile-menu-item:hover { background-color: #f2f3f5; color: #165dff; }

.mobile-menu-buttons { border-top: 1px solid #e5e6eb; padding: 1rem 0.5rem; }
.mobile-menu-button-group { margin-bottom: 0.75rem; }

.mobile-menu-btn-menu { display: block; width: 100%; padding: 0.75rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; transition: all 0.3s ease; text-align: center; }

/* 移动端菜单样式（结束） （导航栏样式 - 网站顶部导航，包含logo、菜单和登录按钮） */


/* tiger组件：tigerDatePicker 适应性调整 （开始）*/
.tiger-datepicker-wrapper input.datepicker { border: 1px solid #9e9e9e !important; box-shadow: none !important; }
.tiger-datepicker-wrapper input.datepicker:focus { border: 2px solid #1E88E5 !important; }
.datepicker-icon { left: 10px !important; }
/* tiger组件：tigerDatePicker 适应性调整 （结束）*/


/* 响应式基础样式（移动端响应式调整 - 屏幕宽度<=640px时应用） */
@media (max-width: 480px) {
    /* 小屏设备适配 */
    .section-header-container { flex-direction: column; gap: 1rem; }
    .form-row { flex-direction: column; gap: 0; }

    .card-header.actions { flex-direction: column; gap: 1rem; font-size: 1.2rem; }


    .form-actions { flex-direction: column; }
    .form-actions button { width: 100%; }
    .form-actions a { width: 100%; }
}

/* 响应式基础样式（移动端响应式调整 - 屏幕宽度<=768px时应用） */
@media (max-width: 768px) {
    :root { --circle-size: 8rem; }

    .container { padding: 0 1rem; }
    .content-row { display: inherit; }

    /* 页面内，模块标题头 */
    .section-title { font-size: 1.8rem; }

    .footer-section { padding: 2rem 0; }
    .footer-title { margin-bottom: 1rem; font-size: 1rem; }
    .footer-bottom { margin-top: 2rem; padding-top: 1.5rem; font-size: 0.875rem; }
    .brand-description { font-size: 0.875rem; }

    /* 分页页码*/
    .pagination-container { justify-content: center; }
    .pagination-container .info { display: none; }
    /* 默认隐藏所有分页项 */
    .pagination .page-item { display: none; }
    /* 显示当前激活的页码（active 类） */
    .pagination .page-item:has(> a.page-link.active) { display: list-item; }
    /* 选中包含 i 的 <li> */
    .pagination .page-item:has(> a > i) { display: list-item; }


    /* 前端：过滤查询*/
    .page-filter-section { flex-direction: column; align-items: flex-start; padding: 1rem; }
    .page-filter-section .filter-group { width: 100%; }
    .page-filter-section .filter-group select { flex-grow: 1; }
    .form-filters { flex-direction: column; }

    /* 前端：按钮区域（交互） */
    .buttons-share { justify-content: center; }
    .buttons-interaction { justify-content: center; flex-wrap: wrap; }

    /* 移动端容器适配 - 修复右侧留白问题 */
    .container, .hero-container, .assessments-container, .stats-container { max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; }

    .mobile-hidden { display: none !important; }
    .mobile-fullwidth { width: 100% !important; }

    /*表格，自适应*/
    /* 隐藏表格头 */
    table.default thead { display: none; }
    /* 将行转换为卡片 */
    table.default tbody tr { display: block; margin-bottom: 1rem; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1rem; }
    /* 将单元格转换为块级元素 */
    table.default td { display: block; text-align: right; padding: 0.5rem 0; border-bottom: 1px solid #f5f5f5; }
    /* 使用伪元素或data属性显示列标题 */
    table.default td::before { content: attr(data-label); float: left; font-weight: bold; color: #333; }
    /* 最后一行取消底部边框 */
    table.default td:last-child { border-bottom: none; }

}

/* 响应式基础样式（开始） */
@media (min-width: 640px) {

    /* 小屏设备适配 - 屏幕宽度≥640px时应用，如大屏手机 */
    .navbar-container { padding: 0 1.5rem; }
}

@media (min-width: 769px) {

    /* 桌面设备适配 - 屏幕宽度≥769px时应用 */
    .main-nav { display: flex; gap: 1rem; }
    .desktop-buttons { display: flex; }
    .footer-content { grid-template-columns: repeat(4, 1fr); gap: 4rem; }

    .mobile-menu-btn-container { display: none; }
}

@media (min-width: 1024px) {

    /* 大屏设备适配 - 屏幕宽度≥1024px时应用，如桌面端 */
    .navbar-container { padding: 0 2rem; }
}
/* 响应式基础样式（结束） */