@charset "utf-8";

/* ==========================================================================
   数据结构可视化 — 算法演示页样式
   适用于所有 <body class="VisualizationMainPage"> 页面（canvas 动画页面）

   重要约束：画布 canvas 的尺寸由 JavaScript 根据 cookie / 输入框动态设置，
   且脚本中没有做鼠标坐标重映射。因此这里 **绝不** 给 canvas 设置
   width / max-width / transform 等会缩放画布的样式，否则点击坐标会错位。
   ========================================================================== */

:root {
	--brand: #146b52;
	--brand-dark: #0d4b39;
	--brand-darker: #093528;
	--brand-light: #e9f5f0;
	--brand-light-2: #f4faf7;
	--accent: #f0a92e;
	--accent-dark: #cf8b13;

	--text: #1f2933;
	--text-muted: #5b6b74;
	--line: #dfe6e3;
	--surface: #ffffff;
	--page-bg: #eef3f1;

	--radius: 10px;
	--radius-sm: 6px;
	--shadow-sm: 0 1px 2px rgba(16, 44, 34, .08);
	--shadow: 0 4px 14px rgba(16, 44, 34, .10);

	--sans: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
		"Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- 基础 ---------- */

* {
	box-sizing: border-box;
}

body.VisualizationMainPage {
	margin: 0;
	padding: 24px 16px 32px;
	background: var(--page-bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
	/* 页面容器居中；内容区在 #container 内恢复左对齐 */
	text-align: center;
}

EM {
	font-style: italic;
	font-weight: 700;
}

/* ---------- 容器 ---------- */

body.VisualizationMainPage #container {
	display: inline-block;
	max-width: 100%;
	margin: 0 auto;
	background: var(--surface);
	text-align: left;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}

/* ---------- 页头 ---------- */

body.VisualizationMainPage #header {
	padding: 0 22px;
	color: #fff;
	background: linear-gradient(135deg, var(--brand), var(--brand-dark));
	border-bottom: 3px solid var(--accent);
}

body.VisualizationMainPage #header h1 {
	margin: 0;
	padding: 16px 0 14px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .5px;
	color: #fff;
}

body.VisualizationMainPage #header a:link,
body.VisualizationMainPage #header a:visited {
	color: var(--accent);
	text-decoration: none;
}

body.VisualizationMainPage #header a:hover {
	text-decoration: underline;
}

/* ---------- 主内容 ---------- */

body.VisualizationMainPage #mainContent {
	background: var(--surface);
	padding: 18px 22px 22px;
	/* 画布为固定像素宽度，视口过窄时允许横向滚动，避免被容器裁掉 */
	overflow-x: auto;
}

body.VisualizationMainPage #mainContent h1,
body.VisualizationMainPage #mainContent h2,
body.VisualizationMainPage #mainContent h3 {
	margin: 0 0 10px;
	padding: 0;
	color: var(--brand-dark);
	background: transparent;
	font-weight: 600;
}

body.VisualizationMainPage #mainContent h1 {
	font-size: 19px;
}

body.VisualizationMainPage #mainContent h2 {
	font-size: 17px;
}

body.VisualizationMainPage #mainContent h3 {
	font-size: 15px;
}

/* ---------- 画布 ---------- */

/* 注意：不要设置 width / max-width / height / transform，画布尺寸由 JS 控制
   （JS 会把内联 width/height 设为逻辑像素值，并同步放大位图存储以适配高分屏）
   box-sizing 必须是 content-box，这样内联宽度 == 位图映射区域，避免 1px 边框
   把位图挤到 998px 造成轻微的二次缩放模糊。 */
body.VisualizationMainPage #canvas {
	display: block;
	box-sizing: content-box;
	margin: 14px 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
}

/* ---------- 控件区 ---------- */

body.VisualizationMainPage #algoControlSection,
body.VisualizationMainPage #generalAnimationControlSection {
	background: var(--brand-light-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	color: var(--text);
}

body.VisualizationMainPage #generalAnimationControlSection {
	margin-top: 10px;
}

body.VisualizationMainPage #algoControlSection table,
body.VisualizationMainPage #generalAnimationControlSection table {
	border-collapse: separate;
	border-spacing: 6px 4px;
	margin: -6px;
}

body.VisualizationMainPage #algoControlSection td,
body.VisualizationMainPage #generalAnimationControlSection td {
	padding: 0;
	vertical-align: middle;
	font-size: 13px;
	color: var(--text);
}

/* ---------- 按钮与输入控件 ---------- */

body.VisualizationMainPage input[type="Button"],
body.VisualizationMainPage input[type="button"],
body.VisualizationMainPage button {
	padding: 5px 12px;
	font-family: var(--sans);
	font-size: 13px;
	color: #fff;
	background: linear-gradient(180deg, #17835f, var(--brand));
	border: 1px solid var(--brand-dark);
	border-radius: var(--radius-sm);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, box-shadow .15s ease,
		transform .08s ease;
}

body.VisualizationMainPage input[type="Button"]:hover,
body.VisualizationMainPage input[type="button"]:hover,
body.VisualizationMainPage button:hover {
	background: linear-gradient(180deg, #1b9570, #0f5741);
}

body.VisualizationMainPage input[type="Button"]:active,
body.VisualizationMainPage input[type="button"]:active,
body.VisualizationMainPage button:active {
	transform: translateY(1px);
}

body.VisualizationMainPage input[type="Button"]:focus-visible,
body.VisualizationMainPage input[type="button"]:focus-visible,
body.VisualizationMainPage input[type="Text"]:focus-visible,
body.VisualizationMainPage input[type="text"]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

body.VisualizationMainPage input[type="Text"],
body.VisualizationMainPage input[type="text"],
body.VisualizationMainPage input[type="number"],
body.VisualizationMainPage select {
	padding: 4px 8px;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--text);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

body.VisualizationMainPage input[type="checkbox"],
body.VisualizationMainPage input[type="radio"] {
	accent-color: var(--brand);
	vertical-align: -1px;
}

/* ---------- 动画速度滑块（jQuery UI） ---------- */

body.VisualizationMainPage .ui-slider {
	background: #dde6e2;
	border: 1px solid var(--line);
	border-radius: 999px;
	height: 8px;
	margin-top: 4px;
}

body.VisualizationMainPage .ui-slider .ui-slider-handle {
	width: 16px;
	height: 16px;
	margin-top: -5px;
	margin-left: -8px;
	background: var(--accent);
	border: 1px solid var(--accent-dark);
	border-radius: 50%;
	cursor: pointer;
}

body.VisualizationMainPage .ui-slider .ui-slider-range {
	background: var(--brand);
	border-radius: 999px;
}

/* ---------- 页脚 ---------- */

body.VisualizationMainPage #footer {
	padding: 0 22px;
	color: var(--brand-light);
	background: var(--brand-darker);
}

body.VisualizationMainPage #footer p {
	margin: 0;
	padding: 12px 0;
}

body.VisualizationMainPage #footer a:link,
body.VisualizationMainPage #footer a:visited {
	color: var(--accent);
	text-decoration: none;
}

body.VisualizationMainPage #footer a:hover {
	text-decoration: underline;
}