/*
 * 实验页面主题层（注入在页面自身样式之后）：把 108 个实验页面统一到平台定稿视觉（瑞士网格 × 孔版套印）。
 * 页面里的颜色、渐变、阴影、圆角由服务端逐条转换（ilab/theme.py）；这里只补“结构”：
 * 纸张底色、通用模板容器、标题、表单控件间距、按钮，以及部分页面用到却没有引入 Bootstrap 的工具类。
 * 工具类全部用 :where() 零优先级，页面自身的样式始终优先。
 */
:root {
  --t-paper: #ECECE8; --t-paper2: #F4F4F1; --t-blue: #0078BF; --t-pink: #FF48B0;
  --t-ink: #003A5E; --t-text: #00558A; --t-ink2: #2F5F86; --t-ink3: #436A8C;
  --t-pinkink: #C8006E; --t-line: #9DBBD1; --t-line2: #CBD8E0;
}
html body { background: var(--t-paper); color: var(--t-text); font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; padding: 20px; }
html body ::selection { background: var(--t-pink); color: #fff; }

/* ---------- 通用模板容器 ---------- */
.experiment-container { background: var(--t-paper2); border: 0; border-top: 3px solid var(--t-blue); border-radius: 0; box-shadow: none; padding: 28px 32px; }
.experiment-title { color: var(--t-ink); font-weight: 900; font-size: 26px; letter-spacing: .02em; text-align: left; margin-bottom: 6px; }
.experiment-subtitle { color: var(--t-ink3); font-size: 14px; text-align: left; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--t-line2); }
.main-layout { gap: 20px; }
.control-sidebar, .control-panel { background: var(--t-paper); border: 0; border-left: 3px solid var(--t-blue); border-radius: 0; box-shadow: none; padding: 18px; }
.control-section { margin-bottom: 18px; }
.control-section h3, .canvas-wrapper h3, .info-panel h3 { color: var(--t-ink); font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--t-line); padding-bottom: 6px; margin-bottom: 12px; text-shadow: none; }
.control-group { margin-bottom: 14px; }
.control-group label, .control-section > label, .control-section .mt-3 > label, .control-section .mt-4 > label { display: block; font-size: 14px; font-weight: 500; color: var(--t-ink2); margin: 0 0 6px; }
.canvas-wrapper, .info-card, .info-panel, .info-item, .info-box, .stat-card { background: var(--t-paper2); border: 1px solid var(--t-line2); border-radius: 0; box-shadow: none; }
.info-item:hover, .stat-card:hover, .hover-lift:hover { transform: none; box-shadow: none; }
/* 说明框：原模板正文是暖棕色，换色后变成整段粉字，读起来吃力；正文统一用墨蓝，粉色只留给左侧色条 */
html body .info-box { border-left: 3px solid var(--t-pink); }
html body .info-box p, html body .info-box li, html body .info-box span:not([class]) { color: var(--t-ink2); }
html body .info-box strong, html body .info-box h4, html body .info-box h5 { color: var(--t-ink); }
.value-display, .value-badge { color: var(--t-text); background: var(--t-paper2); border: 1px solid var(--t-line2); border-radius: 0; box-shadow: none; font-variant-numeric: tabular-nums; }
.stat-value, .info-value { color: var(--t-ink); font-variant-numeric: tabular-nums; }
.stat-label, .info-label { color: var(--t-ink3); }
.gradient-text { background: none; -webkit-text-fill-color: currentColor; color: var(--t-ink); }
.glass-effect { backdrop-filter: none; background: var(--t-paper2); }

/* ---------- 表单控件：统一高度、宽度和间距 ---------- */
:where(select, input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="url"], textarea, .form-control, .form-select) {
  font: inherit; font-size: 14px; line-height: 1.5; color: var(--t-ink); background-color: #fff;
  border: 1px solid var(--t-line); border-radius: 0; box-shadow: none; padding: 7px 10px;
}
:where(select, input[type="text"], input[type="number"], input[type="search"], .form-select) { min-height: 36px; }
:where(textarea, .form-control, .form-select) { display: block; width: 100%; }
:where(textarea) { min-height: 96px; resize: vertical; line-height: 1.6; }
:where(.control-sidebar, .control-panel, .control-section, .control-group) :where(select, input[type="text"], input[type="number"], textarea) { width: 100%; }
select:focus, input:focus, textarea:focus, .form-control:focus, .form-select:focus { outline: 0; border-color: var(--t-blue); box-shadow: inset 0 -2px 0 var(--t-blue); }
textarea::placeholder, input::placeholder { color: #7F9AB0; }
input[type="range"], :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--t-blue); }
label.row { flex-wrap: nowrap !important; margin-left: 0; margin-right: 0; align-items: center; }
label.row > input[type="checkbox"], label.row > input[type="radio"] { width: auto !important; max-width: none; flex: 0 0 auto; margin: 0 4px 0 0 !important; padding: 0; }
input[type="range"]::-webkit-slider-thumb { box-shadow: none; }

/* ---------- 按钮 ---------- */
.btn { border-radius: 0; box-shadow: none; font-weight: 700; letter-spacing: .02em; text-shadow: none; }
.btn:hover { box-shadow: none; transform: none; filter: none; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-success, .btn-info, .btn-dark { background: var(--t-text); border-color: var(--t-text); color: #fff; }
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-dark:hover { background: var(--t-ink); border-color: var(--t-ink); color: #fff; }
.btn-danger, .btn-warning, .btn-pink, .btn-orange, .btn-yellow { background: #E0007A; border-color: #E0007A; color: #fff; }
.btn-danger:hover, .btn-warning:hover, .btn-pink:hover, .btn-orange:hover, .btn-yellow:hover { background: #B00062; border-color: #B00062; color: #fff; }
.btn-secondary, .btn-outline-primary, .btn-outline-secondary { background: transparent; border: 1px solid var(--t-text); color: var(--t-text); }
.btn-secondary:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover { background: var(--t-text); color: #fff; }
.btn-outline-danger { background: transparent; border: 1px solid #E0007A; color: var(--t-pinkink); }
.btn-outline-danger:hover { background: #E0007A; color: #fff; }
.btn-purple, .btn-cyan, .btn-green { background: var(--t-blue); border-color: var(--t-blue); color: #fff; }
.btn:disabled, .btn.disabled { opacity: .45; }

/* ---------- 文字色、徽标、提示 ---------- */
.text-primary, .text-success, .text-info { color: var(--t-text) !important; }
.text-danger, .text-warning { color: var(--t-pinkink) !important; }
.text-muted { color: var(--t-ink3) !important; }
.badge { border-radius: 0; font-weight: 700; }
.alert { border-radius: 0; box-shadow: none; border: 0; border-left: 3px solid var(--t-blue); background: var(--t-paper); color: var(--t-ink); }
.alert-warning, .alert-danger { border-left-color: var(--t-pink); }
.progress-bar, .progress-fill { border-radius: 0; }
table th { background: var(--t-paper); color: var(--t-ink); }
table th, table td { border-color: var(--t-line2); }

/* ---------- Bootstrap 组件：主色统一 ---------- */
.btn-primary { --bs-btn-bg: #00558A; --bs-btn-border-color: #00558A; --bs-btn-hover-bg: #003A5E; --bs-btn-hover-border-color: #003A5E; --bs-btn-active-bg: #003A5E; }
.bg-info, .card-header.bg-info, .bg-primary, .bg-dark { background-color: var(--t-text) !important; color: #fff !important; }
.bg-light { background-color: var(--t-paper) !important; }
.card { border-radius: 0; border-color: var(--t-line2); box-shadow: none; background: var(--t-paper2); }
.form-range::-webkit-slider-thumb { background: var(--t-blue); }
.form-range::-moz-range-thumb { background: var(--t-blue); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0,120,191,.3); }
.nav-tabs .nav-link, .nav-pills .nav-link { border-radius: 0; }
.nav-pills .nav-link.active { background: var(--t-text); }
.modal-content, .dropdown-menu, .toast, .popover, .list-group-item, .input-group-text { border-radius: 0; box-shadow: none; }

/* 第1章页面内嵌的旧版平台导航与外层导航重复，隐藏 */
body > nav.navbar { display: none !important; }

/* ---------- 未引入 Bootstrap 的页面所用工具类（零优先级兜底） ---------- */
:where(.row) { display: flex; flex-wrap: wrap; margin-left: calc(var(--lab-gx, 0px) / -2); margin-right: calc(var(--lab-gx, 0px) / -2); row-gap: var(--lab-gy, 0px); }
:where(.row > *) { box-sizing: border-box; flex-shrink: 0; width: 100%; max-width: 100%; padding-left: calc(var(--lab-gx, 0px) / 2); padding-right: calc(var(--lab-gx, 0px) / 2); }
:where(.g-2) { --lab-gx: .5rem; --lab-gy: .5rem; }
:where(.g-3) { --lab-gx: 1rem; --lab-gy: 1rem; }
:where(.g-4) { --lab-gx: 1.5rem; --lab-gy: 1.5rem; }
:where(.col) { flex: 1 0 0%; }
:where(.col-3) { flex: 0 0 auto; width: 25%; }
:where(.col-4) { flex: 0 0 auto; width: 33.3333%; }
:where(.col-5) { flex: 0 0 auto; width: 41.6667%; }
:where(.col-6) { flex: 0 0 auto; width: 50%; }
:where(.col-7) { flex: 0 0 auto; width: 58.3333%; }
:where(.col-8) { flex: 0 0 auto; width: 66.6667%; }
:where(.col-12) { flex: 0 0 auto; width: 100%; }
@media (max-width: 760px) { :where(.row > [class*="col-"]) { width: 100%; } }
:where(.mt-2) { margin-top: .5rem; } :where(.mt-3) { margin-top: 1rem; } :where(.mt-4) { margin-top: 1.5rem; }
:where(.mb-2) { margin-bottom: .5rem; } :where(.mb-3) { margin-bottom: 1rem; } :where(.mb-4) { margin-bottom: 1.5rem; }
:where(.me-2) { margin-right: .5rem; } :where(.me-3) { margin-right: 1rem; } :where(.ms-2) { margin-left: .5rem; }
:where(.p-2) { padding: .5rem; } :where(.p-3) { padding: 1rem; } :where(.p-4) { padding: 1.5rem; }
:where(.w-100) { width: 100%; }
:where(.d-flex) { display: flex; } :where(.justify-content-between) { justify-content: space-between; } :where(.align-items-center) { align-items: center; }
:where(.text-center) { text-align: center; } :where(.small, small) { font-size: .875em; } :where(.fw-bold) { font-weight: 700; }
:where(.text-white) { color: #fff; }
:where(.position-relative) { position: relative; } :where(.position-absolute) { position: absolute; } :where(.overflow-hidden) { overflow: hidden; }
:where(.btn-block) { display: block; width: 100%; }
:where(.btn-sm) { padding: 4px 10px; font-size: 13px; }
:where(.button-group) { display: flex; flex-direction: column; gap: 8px; }
:where(.button-group > .btn.mb-2) { margin-bottom: 0; }
:where(.form-check) { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
:where(.input-group) { display: flex; } :where(.input-group > .form-control) { flex: 1 1 auto; width: 1%; }
:where(.card-body) { padding: 1rem; }
:where(.card-title) { font-weight: 700; color: var(--t-ink); margin-bottom: .5rem; }
:where(.btn-group-vertical) { display: flex; flex-direction: column; gap: 6px; }
.control-sidebar .info-grid, .control-panel .info-grid { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
/* 滑块：细轨道 + 实心方块滑钮（页面自己的样式若设置了高度，以页面为准） */
:where(input[type="range"]:not(.form-range)) { accent-color: #0078BF; }
.card-header, .card > :first-child, .card > :last-child { border-radius: 0 !important; }
/* 叠在其他画布上方的透明图层（标记层、HUD 等）不能带底色，否则会挡住下面的画面 */
.overlay-canvas, canvas[class*="overlay"], canvas[id*="overlay"], canvas[id*="Overlay"] { background: transparent !important; }

/* ---------- 页头下的操作步骤条（16-2、16-3、16-5、17-2 等原“实验简介+操作说明”大框改成一行步骤） ---------- */
html body ol.lab-steps { list-style: none; counter-reset: labstep; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 0 0 22px; padding: 0; }
html body ol.lab-steps > li { counter-increment: labstep; position: relative; margin: 0; padding: 8px 10px 8px 34px; background: var(--t-paper); border-left: 2px solid var(--t-blue); font-size: 13px; line-height: 1.55; color: var(--t-ink2); }
html body ol.lab-steps > li::before { content: counter(labstep); position: absolute; left: 11px; top: 7px; font-weight: 900; font-size: 15px; color: var(--t-blue); font-variant-numeric: tabular-nums; }

/* 2026-10-31：与平台新风格（首页设计稿）靠拢——浅色底、白色圆角面板、轻阴影、圆角按钮；画面里的绘图配色不变 */
:root { --t-paper: #F7F9FC; --t-paper2: #FFFFFF; --t-line: #DCE3EE; --t-line2: #E6EAF2; }
html body { background: var(--t-paper); }
.experiment-container { border-top: 0; border: 1px solid var(--t-line2); border-radius: 18px; box-shadow: 0 4px 16px -10px rgba(15, 23, 42, .12); }
.control-sidebar, .control-panel { background: #F8FAFF; border-left: 0; border: 1px solid var(--t-line2); border-radius: 14px; }
.canvas-wrapper, .info-card, .info-panel, .info-item, .info-box, .stat-card { border-radius: 14px; }
.value-display, .value-badge { border-radius: 8px; }
:where(select, input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="url"], textarea, .form-control, .form-select) { border-radius: 10px; border-color: #CBD5E1; }
.btn { border-radius: 10px; }