/*
 * Shared visual system for all self-assessment scales.
 * Loaded after each page's legacy styles to keep behavior intact while aligning UI.
 */
:root {
	--scale-accent: #2f6f73;
	--scale-accent-2: #7c6db0;
	--scale-accent-dark: #214f52;
	--scale-ink: #24324a;
	--scale-muted: #64748b;
	--scale-bg: #f6f9fb;
	--scale-surface: #ffffff;
	--scale-tint: #eef8f6;
	--scale-tint-2: #f4f1fb;
	--scale-line: #dbe5ea;
	--scale-shadow: 0 8px 22px rgba(36, 50, 74, 0.08);
}

html {
	scroll-behavior: smooth;
}

body {
	background: linear-gradient(180deg, #f7fafb 0%, #f4f7fb 52%, #f8fafc 100%) !important;
	color: #263241 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif !important;
}

h1,
h2,
h3,
h4,
.question-title,
.basic-label {
	color: var(--scale-ink) !important;
}

h3 {
	border-bottom-color: var(--scale-accent) !important;
}

a {
	color: var(--scale-accent) !important;
}

.section,
.result,
.analysis-card,
.dimension-analysis {
	background-color: var(--scale-surface) !important;
	border: 1px solid rgba(47, 111, 115, 0.08) !important;
	border-radius: 16px !important;
	box-shadow: var(--scale-shadow) !important;
}

.section {
	padding: 25px !important;
	margin-bottom: 25px !important;
}

.scale-form {
	width: min(100%, 980px);
	margin: 0 auto;
}

.scale-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-top: 25px !important;
	align-items: center !important;
}

.scale-actions button {
	margin: 0 !important;
}

.scale-result {
	width: min(100%, 980px);
	margin-left: auto !important;
	margin-right: auto !important;
}

.intro,
.explanation,
.note-box,
.disclaimer {
	background: linear-gradient(135deg, var(--scale-tint) 0%, var(--scale-tint-2) 100%) !important;
	border-left: 6px solid var(--scale-accent) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(36, 50, 74, 0.03) !important;
	color: #334155 !important;
}

.explanation {
	border-left-color: var(--scale-accent-2) !important;
}

.explanation p {
	margin: 0 0 10px !important;
}

.explanation p:last-child {
	margin-bottom: 0 !important;
}

.question-title {
	border-radius: 12px !important;
}

.question-title:hover {
	background-color: var(--scale-tint-2) !important;
}

.q-number,
summary {
	color: var(--scale-accent) !important;
}

.question select,
.basic-select,
select {
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	background-color: #f9fbfd !important;
	color: #263241 !important;
}

button {
	background: linear-gradient(135deg, var(--scale-accent), var(--scale-accent-2)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 40px !important;
	box-shadow: 0 2px 8px rgba(47, 111, 115, 0.16) !important;
}

button:hover {
	background: linear-gradient(135deg, var(--scale-accent-dark), #645797) !important;
	box-shadow: 0 4px 12px rgba(47, 111, 115, 0.24) !important;
}

.global-progress {
	background: rgba(255, 255, 255, 0.94) !important;
	padding: 10px 15px !important;
	border-bottom: 1px solid var(--scale-line) !important;
	border-radius: 0 0 12px 12px !important;
	box-shadow: 0 2px 8px rgba(36, 50, 74, 0.05) !important;
	backdrop-filter: blur(12px);
}

.progress {
	color: var(--scale-muted) !important;
	font-size: 0.9em !important;
	font-weight: 400 !important;
	margin: 0 0 5px !important;
}

.progress-bar {
	background-color: #e2e8f0 !important;
	border-radius: 5px !important;
	height: 12px !important;
	margin-bottom: 8px !important;
	overflow: hidden !important;
}

.progress-bar-fill {
	background: linear-gradient(90deg, var(--scale-accent), var(--scale-accent-2)) !important;
	height: 12px !important;
	transition: width 0.3s ease !important;
}

.result {
	background: var(--scale-tint-2) !important;
	border-color: rgba(47, 111, 115, 0.14) !important;
}

.result th {
	background: linear-gradient(135deg, var(--scale-accent), var(--scale-accent-2)) !important;
	color: #fff !important;
}

.result td {
	border-color: var(--scale-line) !important;
}

.result tr:nth-child(even) {
	background-color: #f9fbfd !important;
}

.result-top-grid {
	gap: 24px !important;
}

.radar-container,
.insight-card,
.action-box,
.result [style*="background:linear-gradient"],
.result [style*="background:rgba"],
.result [style*="background:#"],
.result [style*="background: #"] {
	background: var(--scale-surface) !important;
	border-color: rgba(47, 111, 115, 0.14) !important;
	box-shadow: var(--scale-shadow) !important;
}

.radar-container,
.insight-card,
.action-box {
	border-radius: 16px !important;
}

.insight-card,
.action-box {
	border-left: 5px solid var(--scale-accent) !important;
}

.insight-card h3,
.action-box h3,
.result [style*="color:#"],
.result [style*="color: #"] {
	color: var(--scale-ink) !important;
}

.theory-tag,
.result span[style*="background:#"],
.result span[style*="background: #"] {
	background: var(--scale-tint) !important;
	color: var(--scale-accent-dark) !important;
	border: 1px solid rgba(47, 111, 115, 0.18) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

.result div[style*="border-top"] {
	border-top-color: var(--scale-line) !important;
}

.result div[style*="border-left"] {
	border-left-color: var(--scale-accent) !important;
}

.result ul[style*="color"] {
	color: #334155 !important;
}

.bar span {
	background: linear-gradient(90deg, var(--scale-accent), var(--scale-accent-2)) !important;
}

.prism-back-home {
	position: fixed !important;
	top: 16px !important;
	left: 16px !important;
	z-index: 9999 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 8px 12px !important;
	border: 1px solid rgba(24, 33, 47, 0.14) !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: #415469 !important;
	font: 600 13px/1.2 "Microsoft YaHei", "PingFang SC", Arial, sans-serif !important;
	text-decoration: none !important;
	box-shadow: 0 8px 24px rgba(24, 33, 47, 0.10) !important;
	backdrop-filter: blur(12px);
}

.prism-back-home:hover {
	color: #18212f !important;
	border-color: rgba(24, 33, 47, 0.26) !important;
}

@media (max-width: 650px) {
	.section,
	.result {
		padding: 18px !important;
	}

	.scale-actions {
		display: grid !important;
		grid-template-columns: 1fr !important;
	}

	button {
		width: 100% !important;
		margin-right: 0 !important;
	}
}

@media (max-width: 520px) {
	.prism-back-home {
		top: 10px !important;
		left: 10px !important;
		padding: 7px 10px !important;
		font-size: 12px !important;
	}
}