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

:root {
	--primary: #6366f1;
	--primary-light: #818cf8;
	--primary-dark: #4f46e5;
	--success: #10b981;
	--success-light: #34d399;
	--danger: #ef4444;
	--danger-light: #f87171;
	--warning: #f59e0b;
	--warning-light: #fbbf24;
	--gray: #6b7280;
	--gray-light: #9ca3af;
	--bg-primary: #f8fafc;
	--bg-white: #ffffff;
	--bg-card: #ffffff;
	--border: #e2e8f0;
	--text-primary: #1e293b;
	--text-secondary: #64748b;
	--text-muted: #94a3b8;
	--shadow: 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);
	--radius: 12px;
	--radius-sm: 8px;
	--p0-color: #dc2626;
	--p0-bg: #fef2f2;
	--p0-border: #fecaca;
	--p1-color: #ea580c;
	--p1-bg: #fff7ed;
	--p1-border: #fed7aa;
	--p2-color: #2563eb;
	--p2-bg: #eff6ff;
	--p2-border: #bfdbfe;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: var(--bg-primary);
	color: var(--text-primary);
	line-height: 1.6;
	min-height: 100vh;
}

/* 侧边导航 */
.sidebar {
	position: fixed;
	left: 0;
	top: 0;
	width: 220px;
	height: 100vh;
	/* 背景：从极淡的青绿色过渡到纯白，避免纯白的单调，增加质感 */
	background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);

	/* 文字：使用深青绿色，保证对比度且比纯黑更柔和 */
	color: #134e4a;

	/* 可选：添加右侧边框以区分内容区，颜色使用极淡的品牌色 */
	border-right: 1px solid #ccfbf1;

	padding: 24px 16px;
	z-index: 100;
	overflow-y: auto;
	transition: transform 0.3s ease;
}

.sidebar-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 32px;
	padding-bottom: 20px;
	/* 修改边框颜色以适配浅色背景 */
	border-bottom: 1px solid #ccfbf1;
}

.sidebar-logo-icon {
	width: 42px;
	height: 42px;
	/* 保持品牌主色渐变，或根据喜好调整为 Teal 系 */
	background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	/* 调整阴影颜色以匹配新图标色 */
	box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.sidebar-logo-text {
	/* 修改文字颜色为深色，确保在白色背景下可见 */
	color: #134e4a;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.sidebar-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-nav-item {
	margin-bottom: 4px;
}

.sidebar-nav-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	/* 修改默认文字颜色为深品牌色，降低透明度以避免刺眼 */
	color: #0f766e;
	text-decoration: none;
	border-radius: var(--radius-sm, 8px);
	transition: all 0.2s ease;
	font-size: 14px;
	font-weight: 500;
}

.sidebar-nav-link:hover {
	/* 悬停背景使用半透明品牌色 */
	background: rgba(20, 184, 166, 0.1);
	/* 悬停文字加深 */
	color: #115e59;
}

.sidebar-nav-link.active {
	/* 激活背景使用稍深的半透明品牌色 */
	background: rgba(20, 184, 166, 0.15);
	/* 激活文字使用最深品牌色 */
	color: #134e4a;
	font-weight: 600;
	/* 激活指示器颜色调整为品牌主色 */
	box-shadow: inset 3px 0 0 #14b8a6;
}

.sidebar-nav-icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	/* 确保图标颜色跟随文字颜色 */
	color: currentColor;
}


/* 主内容区 */
.main-content {
	margin-left: 220px;
	padding: 32px 40px;
	min-height: 100vh;
}

/* 页面标题 */
.page-header {
	margin-bottom: 32px;
}

.page-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.page-title-icon {
	width: 44px;
	height: 44px;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.page-subtitle {
	color: var(--text-secondary);
	font-size: 15px;
}

/* 顶部概览区 */
.overview-section {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 32px;
}

.overview-card {
	background: var(--bg-white);
	border-radius: var(--radius);
	padding: 24px;
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
	position: relative;
	overflow: hidden;
}

.overview-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}

.overview-card.overall::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.overview-card.pass::before { background: linear-gradient(90deg, #10b981, #34d399); }
.overview-card.database::before { background: linear-gradient(90deg, #ec4899, #f472b6); }
.overview-card.priority::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

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

.overview-card-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.overview-card-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.overview-card.overall .overview-card-icon { background: #eef2ff; color: #6366f1; }
.overview-card.pass .overview-card-icon { background: #ecfdf5; color: #10b981; }
.overview-card.database .overview-card-icon { background: #fdf2f8; color: #ec4899; }
.overview-card.priority .overview-card-icon { background: #fffbeb; color: #f59e0b; }



/* 当前测试数据库 */
.database-databases {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.database-db-tag {
	padding: 6px 14px;
	background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
	border: 1px solid #f9a8d4;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	color: #db2777;
	display: flex;
	align-items: center;
	gap: 6px;
}

.database-db-tag .pulse {
	width: 8px;
	height: 8px;
	background: #ec4899;
	border-radius: 50%;
	animation: pulse 1.5s infinite;
}


.overview-card-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 4px;
	line-height: 1.2;
}

.overview-card-sub {
	font-size: 13px;
	color: var(--text-muted);
}

.overview-card-bar {
	height: 8px;
	background: var(--bg-primary);
	border-radius: 4px;
	margin-top: 16px;
	overflow: hidden;
}

.overview-card-bar-fill {
	height: 100%;
	border-radius: 4px;
	width: 0;
	transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.overview-card.overall .overview-card-bar-fill { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.overview-card.pass .overview-card-bar-fill { background: linear-gradient(90deg, #10b981, #34d399); }

/* 优先级概览 */
.priority-overview {
	display: flex;
	gap: 16px;
	margin-top: 12px;
}

.priority-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
}

.priority-badge.p0 {
	background: var(--p0-bg);
	color: var(--p0-color);
	border: 1px solid var(--p0-border);
}

.priority-badge.p1 {
	background: var(--p1-bg);
	color: var(--p1-color);
	border: 1px solid var(--p1-border);
}

.priority-badge.p2 {
	background: var(--p2-bg);
	color: var(--p2-color);
	border: 1px solid var(--p2-border);
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(1.2); }
}

/* 分类进度区 */
.section-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.section-title::after {
	content: '';
	flex: 1;
	height: 2px;
	background: linear-gradient(90deg, var(--border), transparent);
}

.category-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 32px;
}

.category-card {
	background: var(--bg-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
}

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

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

.category-card.ddl .category-card-header { background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); }
.category-card.dml .category-card-header { background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); }
.category-card.dql .category-card-header { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); }
.category-card.meta .category-card-header { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); }
.category-card.auth .category-card-header { background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%); }
.category-card.datasource .category-card-header { background: linear-gradient(135deg, #E0F7FA 0%, #B2EBF2 100%); }
.category-card.cross .category-card-header { background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%); }




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

.category-card-badge {
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
}

.category-card.ddl .category-card-badge { background: #FFB74D; color: #FFF; }
.category-card.dml .category-card-badge { background: #64B5F6; color: #FFF; }
.category-card.dql .category-card-badge { background: #81C784; color: #FFF; }
.category-card.meta .category-card-badge { background: #BA68C8; color: #FFF; }
.category-card.auth .category-card-badge { background: #E57373; color: #FFF; }
.category-card.datasource .category-card-badge { background: #4DB6AC; color: #FFF; }
.category-card.cross .category-card-badge { background: #8b5cf6; color: #FFF; }

.category-card-body {
	padding: 20px 24px;
}

.category-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}

.category-stat {
	text-align: center;
}

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

.category-stat-label {
	font-size: 11px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 2px;
}

.category-stat-value.success { color: var(--success); }
.category-stat-value.danger { color: var(--danger); }
.category-stat-value.warning { color: var(--warning); }
.category-stat-value.muted { color: var(--gray); }

.category-progress {
	margin-top: 16px;
}

.category-progress-bar {
	height: 10px;
	background: var(--bg-primary);
	border-radius: 5px;
	overflow: hidden;
	display: flex;
}

.category-progress-segment {
	height: 100%;
	transition: width 1s ease;
}

.category-progress-segment.passed { background: var(--success); }
.category-progress-segment.failed { background: var(--danger); }
.category-progress-segment.skipped { background: var(--gray-light); }
.category-progress-segment.untested { background: #e5e7eb; }

.category-progress-legend {
	display: flex;
	gap: 16px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text-secondary);
}

.legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

.legend-dot.passed { background: var(--success); }
.legend-dot.failed { background: var(--danger); }
.legend-dot.skipped { background: var(--gray-light); }
.legend-dot.untested { background: #e5e7eb; }

.category-card-expand {
	padding: 0 24px 20px;
	display: none;
}

.category-card.expanded .category-card-expand {
	display: block;
}

.expand-content {
	background: var(--bg-primary);
	border-radius: var(--radius-sm);
	padding: 16px;
}

.expand-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px dashed var(--border);
	font-size: 13px;
}

.expand-row:last-child {
	border-bottom: none;
}

.expand-label {
	color: var(--text-secondary);
}

.expand-value {
	font-weight: 600;
	color: var(--text-primary);
}

/* 两列布局 */
.two-column-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 32px;
	margin-bottom: 32px;
}

/* 数据库进度矩阵 */
.matrix-section {
	background: var(--bg-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
	overflow: hidden;
}

.matrix-header {
	padding: 20px 24px;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

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

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

.btn {
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.btn-primary {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	color: white;
}

.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
	background: var(--bg-primary);
	color: var(--text-secondary);
	border: 1px solid var(--border);
}

.btn-secondary:hover {
	background: var(--border);
}

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

.btn-success:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

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

.btn-warning:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* 筛选器 */
.filter-bar {
	padding: 16px 24px;
	background: var(--bg-primary);
	border-bottom: 1px solid var(--border);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.filter-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
}

.filter-select {
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 13px;
	background: white;
	cursor: pointer;
	transition: border-color 0.2s;
}

.filter-select:focus {
	outline: none;
	border-color: var(--primary);
}

.search-input {
	padding: 6px 12px;
	padding-left: 32px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 13px;
	width: 200px;
	background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 8px center;
	transition: border-color 0.2s, box-shadow 0.2s;
}

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

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

.matrix-table th,
.matrix-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.matrix-table th {
	background: var(--bg-primary);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: sticky;
	top: 0;
}

.matrix-table tbody tr {
	transition: background-color 0.15s ease;
}

.matrix-table tbody tr:hover {
	background: #f8faff;
}

.matrix-table td {
	font-size: 14px;
}

.db-name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}

.db-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.db-icon.db-a { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.db-icon.db-b { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.db-icon.db-c { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
.db-icon.db-d { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
.db-icon.db-e { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
.db-icon.db-f { background: linear-gradient(135deg, #fef9c3, #fef08a); }
.db-icon.db-g { background: linear-gradient(135deg, #ffedd5, #fed7aa); }
.db-icon.db-h { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); }

.cell-progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 140px;
}

.cell-progress-bar {
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
}

.cell-progress-segment {
	height: 100%;
	transition: width 0.8s ease;
}

.cell-progress-segment.passed { background: var(--success); }
.cell-progress-segment.failed { background: var(--danger); }

.cell-progress-info {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}

.cell-pass-rate {
	font-weight: 600;
	color: var(--text-primary);
}

.cell-count {
	color: var(--text-muted);
}

.sort-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 12px;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 4px;
}

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

.sort-btn.active {
	color: var(--primary);
}

/* 饼图区域 */
.pie-section {
	background: var(--bg-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
	padding: 24px;
}

.pie-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 24px;
}

.pie-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

/* 纯CSS饼图 */
.pie-chart {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: conic-gradient(
			var(--success) 0deg 0deg,
			var(--danger) 0deg 0deg,
			var(--gray-light) 0deg 0deg,
			#e5e7eb 0deg 0deg
	);
	position: relative;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pie-chart::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
	height: 100px;
	background: white;
	border-radius: 50%;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pie-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 1;
}

.pie-center-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
}

.pie-center-label {
	font-size: 12px;
	color: var(--text-muted);
}

.pie-legend {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	width: 100%;
}

.pie-legend-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--bg-primary);
	border-radius: var(--radius-sm);
}

.pie-legend-color {
	width: 16px;
	height: 16px;
	border-radius: 4px;
}

.pie-legend-text {
	flex: 1;
}

.pie-legend-label {
	font-size: 12px;
	color: var(--text-secondary);
}

.pie-legend-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}

/* 失败用例区域 */
.failed-section {
	background: var(--bg-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
	margin-bottom: 32px;
}

.failed-header {
	padding: 20px 24px;
	background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
	border-bottom: 1px solid #fecaca;
	display: flex;
	align-items: center;
	gap: 12px;
}

.failed-header-icon {
	width: 36px;
	height: 36px;
	background: var(--danger);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 18px;
}

.failed-header-title {
	font-size: 16px;
	font-weight: 700;
	color: #991b1b;
}

.failed-header-count {
	margin-left: auto;
	padding: 4px 12px;
	background: var(--danger);
	color: white;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
}

.failed-list {
	padding: 16px 24px;
}

.failed-item {
	display: grid;
	grid-template-columns: 120px 1fr 140px 1fr;
	gap: 16px;
	padding: 14px 16px;
	background: var(--bg-primary);
	border-radius: var(--radius-sm);
	margin-bottom: 12px;
	border-left: 4px solid var(--danger);
	transition: transform 0.2s, box-shadow 0.2s;
}

.failed-item:hover {
	transform: translateX(4px);
	box-shadow: var(--shadow);
}

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

.failed-case-id {
	font-weight: 700;
	color: var(--primary);
	font-size: 14px;
}

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

.failed-db {
	display: flex;
	align-items: center;
	gap: 8px;
}

.failed-db-tag {
	padding: 2px 8px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 4px;
	font-size: 12px;
	color: var(--danger);
	font-weight: 600;
}

.failed-reason {
	color: var(--text-secondary);
	font-size: 13px;
	display: flex;
	align-items: center;
}

/* ==================== 用例明细区域 ==================== */
.details-section {
	background: var(--bg-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
	margin-bottom: 32px;
	overflow: hidden;
}

.details-header {
	padding: 20px 24px;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border-bottom: 1px solid #bbf7d0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

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

.details-header-icon {
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: white;
}

.details-header-title {
	font-size: 18px;
	font-weight: 700;
	color: #166534;
}

.details-header-subtitle {
	font-size: 13px;
	color: #15803d;
}

.details-header-actions {
	display: flex;
	gap: 8px;
}

.details-stats {
	display: flex;
	gap: 24px;
	padding: 16px 24px;
	background: #f0fdf4;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}

.details-stat {
	display: flex;
	align-items: center;
	gap: 8px;
}

.details-stat-icon {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.details-stat-icon.pass { background: #dcfce7; color: #15803d; }
.details-stat-icon.fail { background: #fef2f2; color: #dc2626; }
.details-stat-icon.skip { background: #f3f4f6; color: #6b7280; }
.details-stat-icon.untest { background: #f9fafb; color: #9ca3af; }

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

.details-stat-label {
	font-size: 12px;
	color: var(--text-secondary);
}

.details-filter-bar {
	padding: 16px 24px;
	background: var(--bg-primary);
	border-bottom: 1px solid var(--border);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.details-category-blocks {
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.category-block {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}

.category-block-header {
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: background 0.2s;
}

.category-block-header:hover {
	background: var(--bg-primary);
}

.category-block.dql .category-block-header { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 50%); }
.category-block.dml .category-block-header { background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%); }
.category-block.ddl .category-block-header { background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 50%); }
.category-block.meta .category-block-header { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 50%); }
.category-block.auth .category-block-header { background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 50%); }
.category-block.datasource .category-block-header { background: linear-gradient(135deg, #E0F7FA 0%, #B2EBF2 50%); }
.category-block.cross .category-block-header { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%); }


.category-block-title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.category-block-icon {
	font-size: 24px;
}

.category-block-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
}

.category-block-summary {
	display: flex;
	gap: 16px;
	font-size: 13px;
	color: var(--text-secondary);
}

.category-block-summary span {
	display: flex;
	align-items: center;
	gap: 4px;
}

.category-block-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.expand-btn {
	padding: 6px 12px;
	background: white;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.2s;
}

.expand-btn:hover {
	background: var(--bg-primary);
	color: var(--text-primary);
}

.category-block-body {
	max-height: 600px;
	overflow: auto;
}

.category-block.expanded .category-block-body {
	display: block;
}

.category-block.expanded .expand-btn .arrow {
	transform: rotate(180deg);
}

.expand-btn .arrow {
	display: inline-block;
	transition: transform 0.2s;
	margin-left: 4px;
}

/* 用例明细矩阵 */
.case-matrix-wrapper {
	overflow-x: auto;
}

.case-matrix {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.case-matrix th,
.case-matrix td {
	padding: 10px 12px;
	text-align: center;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}

.case-matrix th {
	background: var(--bg-primary);
	font-size: 11px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	position: sticky;
	top: 0;
	z-index: 10;
}

.case-matrix th:first-child,
.case-matrix td:first-child {
	position: sticky;
	left: 0;
	background: white;
	z-index: 5;
	text-align: left;
	min-width: 200px;
	border-right: 2px solid var(--border);
}

.case-matrix th:first-child {
	z-index: 15;
	background: var(--bg-primary);
}

.case-matrix th:last-child,
.case-matrix td:last-child {
	background: #f8fafc;
	font-weight: 600;
	border-left: 2px solid var(--border);
}

.case-matrix tbody tr:hover td {
	background: #f8faff;
}

.case-matrix tbody tr:hover td:first-child {
	background: #f0fdf4;
}

.case-matrix tbody tr:hover td:last-child {
	background: #ecfdf5;
}

.case-id {
	font-weight: 700;
	color: var(--primary);
	font-size: 12px;
}

.case-target {
	color: var(--text-secondary);
	font-size: 12px;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.case-priority {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
}

.case-priority.p0 { background: var(--p0-bg); color: var(--p0-color); }
.case-priority.p1 { background: var(--p1-bg); color: var(--p1-color); }
.case-priority.p2 { background: var(--p2-bg); color: var(--p2-color); }

.status-cell {
	width: 36px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 16px;
	cursor: default;
	position: relative;
}

.status-cell.pass { background: #dcfce7; }
.status-cell.fail { background: #fef2f2; }
.status-cell.skip { background: #f3f4f6; }
.status-cell.untest { background: #f9fafb; color: #d1d5db; }

.status-cell.fail:hover {
	transform: scale(1.1);
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: #1e293b;
	color: white;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 11px;
	white-space: nowrap;
	max-width: 250px;
	white-space: normal;
	text-align: left;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s;
	pointer-events: none;
	margin-bottom: 8px;
}

.tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1e293b;
}

.status-cell.fail:hover .tooltip {
	opacity: 1;
	visibility: visible;
}

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

.case-summary .pass-count {
	color: var(--success);
	font-weight: 600;
}

.case-summary .total-count {
	color: var(--text-primary);
	font-weight: 600;
}

/* 数据库列底部统计 */
.db-footer {
	background: #f1f5f9;
	font-weight: 600;
}

.db-footer td {
	font-size: 11px;
	color: var(--text-secondary);
}

/* 回到顶部按钮 */
.back-to-top {
	position: fixed;
	bottom: 32px;
	right: 32px;
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	border: none;
	border-radius: 50%;
	color: white;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s ease;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.5);
}

/* 模态框 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.modal-overlay.active {
	opacity: 1;
	visibility: visible;
}

.modal {
	background: white;
	border-radius: var(--radius);
	width: 90%;
	max-width: 600px;
	max-height: 80vh;
	overflow: hidden;
	transform: translateY(20px);
	transition: transform 0.3s ease;
}

.modal-overlay.active .modal {
	transform: translateY(0);
}

.modal-header {
	padding: 20px 24px;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal-title {
	font-size: 18px;
	font-weight: 700;
}

.modal-close {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: white;
	cursor: pointer;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.modal-body {
	padding: 24px;
	max-height: 60vh;
	overflow-y: auto;
}

.report-content {
	background: var(--bg-primary);
	border-radius: var(--radius-sm);
	padding: 20px;
	font-family: "Consolas", "Monaco", monospace;
	font-size: 13px;
	white-space: pre-wrap;
	color: var(--text-primary);
	line-height: 1.8;
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.two-column-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1024px) {
	.sidebar {
		transform: translateX(-100%);
	}

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

	.main-content {
		margin-left: 0;
		padding: 24px;
	}

	.overview-section {
		grid-template-columns: repeat(2, 1fr);
	}

	.category-cards {
		grid-template-columns: 1fr;
	}

	.failed-item {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.matrix-table {
		font-size: 12px;
	}

	.matrix-table th,
	.matrix-table td {
		padding: 10px 8px;
	}

	.details-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.details-stats {
		flex-wrap: wrap;
	}

	.details-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.details-filter-bar .filter-group {
		width: 100%;
	}

	.details-filter-bar .filter-select,
	.details-filter-bar .search-input {
		width: 100%;
	}

	.case-matrix th:first-child,
	.case-matrix td:first-child {
		min-width: 150px;
	}

	.category-block-summary {
		display: none;
	}
}

@media (max-width: 640px) {
	.overview-section {
		grid-template-columns: 1fr;
	}

	.page-title {
		font-size: 22px;
	}

	.priority-overview {
		flex-direction: column;
	}

	.filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-group {
		width: 100%;
	}

	.filter-select,
	.search-input {
		width: 100%;
	}

	.pie-legend {
		grid-template-columns: 1fr;
	}

	.matrix-actions {
		flex-wrap: wrap;
	}
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
	display: none;
	position: fixed;
	top: 20px;
	left: 20px;
	width: 44px;
	height: 44px;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	border: none;
	border-radius: 10px;
	color: white;
	font-size: 20px;
	cursor: pointer;
	z-index: 101;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

@media (max-width: 1024px) {
	.mobile-menu-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 48px 24px;
	color: var(--text-muted);
}

.empty-state-icon {
	font-size: 20px;
	margin-bottom: 16px;
	opacity: 0.5;
}

.empty-state-text {
	font-size: 15px;
}

/* 加载动画 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-in {
	animation: fadeInUp 0.6s ease forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* 筛选标签 */
.filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
	border: 1px solid #fecaca;
	border-radius: 20px;
	font-size: 12px;
	color: #dc2626;
	cursor: pointer;
	transition: all 0.2s;
}

.filter-tag:hover {
	background: #fee2e2;
}

.filter-tag .close {
	font-size: 14px;
	line-height: 1;
}