/* =============================================================================
 * 源码安全检测报告 · 展示样式
 * 说明：本文件同时供两处使用——
 *   1. 客户端运行时插件组件（node/client/components/0/index.js）
 *   2. WordPress 服务端正文注入（wordpress/plugin.php 内联打印）
 * 因此类名与结构必须保持一致，改这里就等于同时改两边。
 * 尺寸统一用 em，随模块缩放设置联动；颜色优先取 element-plus / 瓜奇主题变量，
 * 并带固定色兜底，保证脱离主题也不花屏。不使用 color-mix 等新特性。
 * ========================================================================== */

.gqssr {
	--gqssr-primary: var(--el-color-primary, #00c29a);
	--gqssr-high: #e5484d;
	--gqssr-medium: #d98a00;
	--gqssr-low: #3b82f6;
	--gqssr-info: #8b8fa3;
	--gqssr-clean: #16a34a;
	--gqssr-line: var(--el-border-color, #e4e7ed);
	--gqssr-fg: var(--el-text-color-primary, #1f2329);
	--gqssr-fg-2: var(--el-text-color-regular, #4e5969);
	--gqssr-fg-3: var(--el-text-color-secondary, #86909c);
	--gqssr-bg: var(--el-bg-color, #ffffff);
	--gqssr-bg-2: var(--el-fill-color-light, #f7f8fa);
	--gqssr-code-bg: var(--el-fill-color, #f0f1f3);
	--gqssr-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	font-size: 1em;
	line-height: 1.6;
	color: var(--gqssr-fg);
}

.gqssr *,
.gqssr *::before,
.gqssr *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- 头部 */
.gqssr-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75em 1em;
	padding-bottom: 0.875em;
	border-bottom: 1px solid var(--gqssr-line);
}

.gqssr-head-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	flex: 1 1 16em;
	min-width: 0;
}

.gqssr-title {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.0625em;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gqssr-fg);
}

.gqssr-badge {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0.125em 0.5em;
	border-radius: 0.375em;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
	color: #fff;
	background: var(--gqssr-info);
}

.gqssr-badge--high { background: var(--gqssr-high); }
.gqssr-badge--medium { background: #d98a00; color: #fff; }
.gqssr-badge--low { background: var(--gqssr-low); }
.gqssr-badge--info { background: var(--gqssr-info); }
.gqssr-badge--clean { background: var(--gqssr-clean); }

.gqssr-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	flex: 0 0 auto;
	padding: 0.125em 0.5em;
	border-radius: 0.375em;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.7;
	color: var(--gqssr-primary);
	background: var(--el-color-primary-light-9, rgba(0, 194, 154, 0.12));
	border: 1px solid var(--el-color-primary-light-7, rgba(0, 194, 154, 0.34));
}

.gqssr-meta {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375em 1em;
	font-size: 0.8125em;
	color: var(--gqssr-fg-3);
	min-width: 0;
}

.gqssr-meta span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.gqssr-meta b {
	font-weight: 600;
	color: var(--gqssr-fg-2);
}

/* ---------------------------------------------------------------- 评分环 */
.gqssr-score {
	position: relative;
	flex: 0 0 auto;
	width: 4.5em;
	height: 4.5em;
}

.gqssr-score svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.gqssr-score .gqssr-ring-bg {
	fill: none;
	stroke: var(--el-fill-color, #eff0f1);
	stroke-width: 7;
}

.gqssr-score .gqssr-ring-fg {
	fill: none;
	stroke: var(--gqssr-info);
	stroke-width: 7;
	stroke-linecap: round;
}

.gqssr-score-inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.gqssr-score-num {
	font-size: 1.375em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--gqssr-fg);
}

.gqssr-score-unit {
	margin-top: 0.125em;
	font-size: 0.625em;
	color: var(--gqssr-fg-3);
}

.gqssr[data-level="high"] .gqssr-ring-fg { stroke: var(--gqssr-high); }
.gqssr[data-level="medium"] .gqssr-ring-fg { stroke: var(--gqssr-medium); }
.gqssr[data-level="low"] .gqssr-ring-fg { stroke: var(--gqssr-low); }
.gqssr[data-level="info"] .gqssr-ring-fg { stroke: var(--gqssr-info); }
.gqssr[data-level="clean"] .gqssr-ring-fg { stroke: var(--gqssr-clean); }

/* ---------------------------------------------------------------- 概览统计 */
.gqssr-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5em;
}

.gqssr-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125em;
	padding: 0.625em 0.25em;
	border-radius: 0.5em;
	background: var(--gqssr-bg-2);
	border: 1px solid var(--gqssr-line);
	min-width: 0;
}

.gqssr-stat-num {
	font-size: 1.125em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.gqssr-stat-label {
	font-size: 0.75em;
	color: var(--gqssr-fg-3);
	white-space: nowrap;
}

.gqssr-stat--high { border-color: rgba(229, 72, 77, 0.32); }
.gqssr-stat--high .gqssr-stat-num { color: var(--gqssr-high); }
.gqssr-stat--medium { border-color: rgba(217, 138, 0, 0.34); }
.gqssr-stat--medium .gqssr-stat-num { color: var(--gqssr-medium); }
.gqssr-stat--low { border-color: rgba(59, 130, 246, 0.32); }
.gqssr-stat--low .gqssr-stat-num { color: var(--gqssr-low); }
.gqssr-stat--info .gqssr-stat-num { color: var(--gqssr-info); }

.gqssr-struct {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375em 0.75em;
	font-size: 0.8125em;
	color: var(--gqssr-fg-3);
}

.gqssr-struct b {
	font-weight: 600;
	color: var(--gqssr-fg-2);
}

.gqssr-struct-label {
	font-weight: 600;
	color: var(--gqssr-fg-2);
}

/* ---------------------------------------------------------------- 命中明细 */
.gqssr-findings {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	min-width: 0;
}

.gqssr-findings-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em 0.625em;
	font-size: 0.875em;
	font-weight: 600;
	color: var(--gqssr-fg);
}

.gqssr-findings-head em {
	font-style: normal;
	font-weight: 400;
	font-size: 0.875em;
	color: var(--gqssr-fg-3);
}

/* 区块标题：命中明细与后门特征排查共用（.gqssr-findings-head 是旧类名，保留兼容） */
.gqssr-sec-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em 0.625em;
	font-size: 0.875em;
	font-weight: 600;
	color: var(--gqssr-fg);
}

.gqssr-sec-head em {
	font-style: normal;
	font-weight: 400;
	font-size: 0.875em;
	color: var(--gqssr-fg-3);
}

/* ---------------------------------------------------------------- 按类别 */
/* 把「风险项（参与评分）」与「加固建议 / 来源情报（不扣分）」分开摆，
   报告读起来才是客观的 —— 后者不是缺陷，混在一起会让人以为问题很多。 */
.gqssr-cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375em 0.625em;
	font-size: 0.8125em;
}

.gqssr-cats-label {
	font-weight: 600;
	color: var(--gqssr-fg-2);
}

.gqssr-cats-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375em;
	min-width: 0;
}

.gqssr-cat {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25em;
	padding: 0.125em 0.5em;
	border-radius: 0.375em;
	background: var(--gqssr-bg-2);
	border: 1px solid var(--gqssr-line);
	color: var(--gqssr-fg-2);
	white-space: nowrap;
}

.gqssr-cat b {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.gqssr-cat i {
	font-style: normal;
	font-size: 0.875em;
	color: var(--gqssr-fg-3);
}

.gqssr-cat--risk { border-color: rgba(229, 72, 77, 0.32); }
.gqssr-cat--risk b { color: var(--gqssr-high); }
.gqssr-cat--harden { border-color: rgba(217, 138, 0, 0.34); }
.gqssr-cat--harden b { color: var(--gqssr-medium); }
.gqssr-cat--intel { border-color: rgba(139, 143, 163, 0.34); }
.gqssr-cat--intel b { color: var(--gqssr-info); }

.gqssr-cat-groups {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	min-width: 0;
}

.gqssr-cat-group {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
	min-width: 0;
}

.gqssr-cat-group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em 0.5em;
	font-size: 0.8125em;
	font-weight: 600;
	color: var(--gqssr-fg-2);
}

.gqssr-cat-group-head i {
	font-style: normal;
	font-weight: 400;
	font-size: 0.875em;
	color: var(--gqssr-fg-3);
}

.gqssr-cat-group--risk .gqssr-cat-group-head span { color: var(--gqssr-high); }
.gqssr-cat-group--harden .gqssr-cat-group-head span { color: var(--gqssr-medium); }
.gqssr-cat-group--intel .gqssr-cat-group-head span { color: var(--gqssr-info); }

/* ---------------------------------------------------------------- 后门特征排查 */
/* 未命中项也要逐条写出来：只列命中项的报告，读的人无法分辨
   是「查过没发现」还是「压根没查」。 */
.gqssr-backdoor {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	min-width: 0;
}

.gqssr-bd-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.375em 0.625em;
}

.gqssr-bd-item {
	display: flex;
	align-items: center;
	gap: 0.375em;
	padding: 0.375em 0.5em;
	border-radius: 0.375em;
	background: var(--gqssr-bg-2);
	border: 1px solid transparent;
	font-size: 0.8125em;
	min-width: 0;
}

.gqssr-bd-item--clear { border-color: rgba(22, 163, 74, 0.22); }
.gqssr-bd-item--hit {
	border-color: rgba(229, 72, 77, 0.38);
	background: rgba(229, 72, 77, 0.07);
}

.gqssr-bd-mark {
	flex: 0 0 auto;
	width: 1.125em;
	height: 1.125em;
	fill: none;
	stroke: var(--gqssr-clean);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gqssr-bd-mark path:first-child { fill: rgba(22, 163, 74, 0.14); }
.gqssr-bd-item--hit .gqssr-bd-mark { stroke: var(--gqssr-high); }
.gqssr-bd-item--hit .gqssr-bd-mark path:first-child { fill: rgba(229, 72, 77, 0.14); }

.gqssr-bd-title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--gqssr-fg-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gqssr-bd-state {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 0.875em;
	color: var(--gqssr-clean);
}

.gqssr-bd-item--hit .gqssr-bd-state {
	color: var(--gqssr-high);
	font-weight: 600;
}

/* 评分口径说明 */
.gqssr-basis {
	margin: 0;
	font-size: 0.75em;
	line-height: 1.6;
	color: var(--gqssr-fg-3);
}

.gqssr-hit-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.gqssr-hit {
	position: relative;
	margin: 0;
	padding: 0.625em 0.75em 0.625em 1.125em;
	border-radius: 0.5em;
	background: var(--gqssr-bg-2);
	list-style: none;
	min-width: 0;
	overflow: hidden;
}

.gqssr-hit::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--gqssr-info);
}

.gqssr-hit--high::before { background: var(--gqssr-high); }
.gqssr-hit--medium::before { background: var(--gqssr-medium); }
.gqssr-hit--low::before { background: var(--gqssr-low); }
.gqssr-hit--info::before { background: var(--gqssr-info); }

.gqssr-hit-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 0.5em;
	min-width: 0;
}

.gqssr-hit-head strong {
	font-size: 0.875em;
	font-weight: 600;
	color: var(--gqssr-fg);
}

.gqssr-hit-head code {
	font-family: var(--gqssr-mono);
	font-size: 0.75em;
	padding: 0.0625em 0.375em;
	border-radius: 0.25em;
	color: var(--gqssr-fg-2);
	background: var(--gqssr-code-bg);
	word-break: break-all;
}

.gqssr-tag {
	font-size: 0.6875em;
	font-weight: 600;
	padding: 0.0625em 0.375em;
	border-radius: 0.25em;
	color: var(--gqssr-high);
	background: rgba(229, 72, 77, 0.12);
}

.gqssr-hit-desc {
	margin: 0.25em 0 0;
	font-size: 0.8125em;
	color: var(--gqssr-fg-2);
}

.gqssr-hit-code {
	display: block;
	margin: 0.375em 0 0;
	padding: 0.375em 0.5em;
	border-radius: 0.375em;
	background: var(--gqssr-code-bg);
	font-family: var(--gqssr-mono);
	font-size: 0.75em;
	line-height: 1.5;
	color: var(--gqssr-fg-2);
	white-space: pre-wrap;
	word-break: break-all;
	overflow-x: auto;
	max-width: 100%;
}

.gqssr-hit-fix {
	margin: 0.375em 0 0;
	font-size: 0.8125em;
	color: var(--gqssr-fg-2);
}

.gqssr-hit-fix b {
	font-weight: 600;
	color: var(--gqssr-primary);
}

/* ---------------------------------------------------------------- 页脚 */
.gqssr-foot {
	font-size: 0.75em;
	line-height: 1.6;
	color: var(--gqssr-fg-3);
	padding-top: 0.75em;
	border-top: 1px dashed var(--gqssr-line);
}

/* ---------------------------------------------------------------- 窄屏 */
@media (max-width: 767px) {
	.gqssr-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gqssr-head {
		flex-direction: column;
	}

	.gqssr-score {
		align-self: flex-start;
	}

	/* 窄屏下后门排查改成单列，8 项不至于挤成两行小字 */
	.gqssr-bd-list {
		grid-template-columns: minmax(0, 1fr);
	}
}