/* ==========================================================================
   高中物理实验演示平台 —— 样式
   ========================================================================== */

:root {
        --bg: #f6f8fb;
        --bg-elev: #ffffff;
        --bg-sunken: #eef2f7;
        --border: #e2e8f0;
        --border-strong: #cbd5e1;
        --text: #0f172a;
        --text-soft: #475569;
        --text-muted: #94a3b8;
        --accent: #2563eb;
        --accent-soft: #dbeafe;
        --accent-ink: #1d4ed8;
        --ok: #059669;
        --ok-soft: #d1fae5;
        --warn: #d97706;
        --warn-soft: #fef3c7;
        --danger: #dc2626;
        --danger-soft: #fee2e2;
        --violet: #7c3aed;

        --stage-bg: #ffffff;
        --stage-fg: #1e293b;
        --stage-muted: #94a3b8;
        --plot-axis: #64748b;
        --plot-grid: #e8eef6;
        --plot-text: #334155;
        --plot-label: #64748b;
        --note-bg: rgba(248, 250, 252, 0.94);
        --note-border: #cbd5e1;

        --radius: 12px;
        --radius-sm: 8px;
        --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
        --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07);
        --sidebar-w: 286px;
        --topbar-h: 58px;
        --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

[data-theme="dark"] {
        --bg: #0b1220;
        --bg-elev: #111a2b;
        --bg-sunken: #0e1626;
        --border: #1e293b;
        --border-strong: #334155;
        --text: #e8eef8;
        --text-soft: #a8b6cc;
        --text-muted: #64748b;
        --accent: #60a5fa;
        --accent-soft: #1e3a8a;
        --accent-ink: #93c5fd;
        --ok: #34d399;
        --ok-soft: #064e3b;
        --warn: #fbbf24;
        --warn-soft: #78350f;
        --danger: #f87171;
        --danger-soft: #7f1d1d;
        --violet: #a78bfa;

        --stage-bg: #0f172a;
        --stage-fg: #e2e8f0;
        --stage-muted: #64748b;
        --plot-axis: #94a3b8;
        --plot-grid: #1c2740;
        --plot-text: #cbd5e1;
        --plot-label: #94a3b8;
        --note-bg: rgba(15, 23, 42, 0.94);
        --note-border: #334155;

        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
}

* {
        box-sizing: border-box;
}

html,
body {
        margin: 0;
        padding: 0;
        height: 100%;
}

body {
        background: var(--bg);
        color: var(--text);
        font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
}

a {
        color: inherit;
        text-decoration: none;
}

/* ---------------------------------------------------------------- 顶栏 */
.topbar {
        position: sticky;
        top: 0;
        z-index: 40;
        height: var(--topbar-h);
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
        background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
        backdrop-filter: saturate(180%) blur(12px);
        border-bottom: 1px solid var(--border);
}

.brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 700;
        letter-spacing: -0.01em;
        white-space: nowrap;
}

.brand-mark {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: linear-gradient(135deg, var(--accent), var(--violet));
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 16px;
        font-weight: 800;
        flex: none;
}

.brand-text {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
}

.brand-text b {
        font-size: 15px;
}

.brand-text span {
        font-size: 11px;
        color: var(--text-muted);
        font-weight: 500;
}

.brand-text .brand-dev {
        font-style: normal;
        font-weight: 800;
        color: var(--accent-ink);
}

[data-theme="dark"] .brand-text .brand-dev {
        color: var(--accent);
}

.search-wrap {
        position: relative;
        flex: 1;
        max-width: 420px;
        margin-left: 8px;
}

.search-wrap input {
        width: 100%;
        height: 36px;
        padding: 0 12px 0 34px;
        border-radius: 9px;
        border: 1px solid var(--border);
        background: var(--bg-sunken);
        color: var(--text);
        font-size: 14px;
        outline: none;
        transition: border-color 0.15s, box-shadow 0.15s;
}

.search-wrap input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.search-wrap::before {
        content: "⌕";
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 17px;
        pointer-events: none;
}

.topbar-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
}

.icon-btn {
        height: 36px;
        min-width: 36px;
        padding: 0 11px;
        border-radius: 9px;
        border: 1px solid var(--border);
        background: var(--bg-elev);
        color: var(--text-soft);
        font-size: 14px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.icon-btn:hover {
        background: var(--bg-sunken);
        border-color: var(--border-strong);
        color: var(--text);
}

#menu-toggle {
        display: none;
}

/* ---------------------------------------------------------------- 布局 */
.layout {
        display: grid;
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
        align-items: start;
        min-height: calc(100vh - var(--topbar-h));
}

.sidebar {
        position: sticky;
        top: var(--topbar-h);
        height: calc(100vh - var(--topbar-h));
        overflow-y: auto;
        padding: 14px 10px 40px;
        border-right: 1px solid var(--border);
        background: var(--bg-elev);
        scrollbar-width: thin;
}

.nav-group {
        margin-bottom: 14px;
}

.nav-group-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        padding: 6px 10px;
        text-transform: uppercase;
}

.nav-group-title em {
        font-style: normal;
        font-size: 10.5px;
        background: var(--bg-sunken);
        border: 1px solid var(--border);
        color: var(--text-muted);
        border-radius: 20px;
        padding: 0 6px;
        line-height: 15px;
}

.nav-items {
        display: flex;
        flex-direction: column;
        gap: 1px;
}

.nav-item {
        display: block;
        padding: 7px 10px;
        border-radius: var(--radius-sm);
        font-size: 13.5px;
        color: var(--text-soft);
        line-height: 1.4;
        transition: background 0.13s, color 0.13s;
        border-left: 2px solid transparent;
}

.nav-item:hover {
        background: var(--bg-sunken);
        color: var(--text);
}

.nav-item.active {
        background: var(--accent-soft);
        color: var(--accent-ink);
        font-weight: 650;
        border-left-color: var(--accent);
}

[data-theme="dark"] .nav-item.active {
        color: #dbeafe;
}

.nav-empty {
        padding: 20px 12px;
        color: var(--text-muted);
        font-size: 13px;
        text-align: center;
}

.content {
        min-width: 0;
}

.main {
        min-width: 0;
        padding: 22px 26px 30px;
        max-width: 1180px;
}

/* ---------------------------------------------------------------- 首页 */
.hero {
        padding: 22px 4px 8px;
}

.hero h1 {
        font-size: 30px;
        line-height: 1.25;
        margin: 0 0 10px;
        letter-spacing: -0.02em;
        background: linear-gradient(120deg, var(--accent), var(--violet));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
}

.hero-sub {
        color: var(--text-soft);
        margin: 0 0 18px;
        max-width: 720px;
        font-size: 14.5px;
}

/* 开发者署名 */
.hero-dev {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 8px 18px 8px 10px;
        margin: 0 0 18px;
        box-shadow: var(--shadow-sm);
}

.hero-dev-badge {
        background: linear-gradient(135deg, var(--accent), var(--violet));
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
        letter-spacing: 3px;
}

.hero-dev-name {
        font-size: 20px;
        letter-spacing: 0.08em;
        color: var(--text);
}

.hero-dev-suffix {
        font-size: 12.5px;
        color: var(--text-muted);
}

.hero-stats {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 14px;
}

.stat {
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 18px;
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-sm);
        min-width: 120px;
}

.stat b {
        font-size: 22px;
        line-height: 1.2;
        color: var(--accent-ink);
}

[data-theme="dark"] .stat b {
        color: var(--accent);
}

.stat span {
        font-size: 12px;
        color: var(--text-muted);
}

.hero-hint {
        color: var(--text-muted);
        font-size: 13px;
        margin-bottom: 10px;
}

.group-block {
        margin-top: 26px;
}

.group-title {
        font-size: 15px;
        margin: 0 0 12px;
        padding-left: 10px;
        border-left: 3px solid var(--accent);
        color: var(--text);
        letter-spacing: -0.01em;
}

.card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
        gap: 11px;
}

.card {
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 13px 15px 14px;
        transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
        box-shadow: var(--shadow-sm);
}

.card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.card-title {
        font-weight: 650;
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 3px;
}

.card-sub {
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 8px;
}

.card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
}

.tag {
        font-size: 11px;
        background: var(--bg-sunken);
        border: 1px solid var(--border);
        color: var(--text-soft);
        border-radius: 20px;
        padding: 1px 8px;
        line-height: 16px;
        font-weight: 500;
}

/* ---------------------------------------------------------------- 实验页 */
.exp-head {
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 4px;
}

.exp-group {
        display: inline-block;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: var(--accent-ink);
        background: var(--accent-soft);
        border-radius: 20px;
        padding: 2px 10px;
        margin-bottom: 8px;
}

[data-theme="dark"] .exp-group {
        color: #dbeafe;
}

.exp-title {
        font-size: 24px;
        margin: 0 0 6px;
        letter-spacing: -0.015em;
        line-height: 1.3;
}

.exp-sub {
        margin: 0 0 10px;
        color: var(--text-soft);
        font-size: 14px;
}

.tabs {
        display: flex;
        gap: 2px;
        margin: 14px 0 18px;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
        display: none;
}

.tab {
        border: none;
        background: transparent;
        color: var(--text-soft);
        font-size: 14px;
        font-family: inherit;
        font-weight: 550;
        padding: 9px 14px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
        transition: color 0.14s, border-color 0.14s;
        margin-bottom: -1px;
}

.tab:hover {
        color: var(--text);
}

.tab.active {
        color: var(--accent-ink);
        border-bottom-color: var(--accent);
        font-weight: 700;
}

[data-theme="dark"] .tab.active {
        color: var(--accent);
}

.pane-info {
        animation: fade 0.18s ease;
}

@keyframes fade {
        from {
                opacity: 0;
                transform: translateY(3px);
        }
        to {
                opacity: 1;
                transform: none;
        }
}

/* ---------------------------------------------------------------- 面板 */
.panel {
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 14px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
}

.panel-title {
        margin: 0;
        font-size: 14px;
        padding: 11px 16px;
        background: var(--bg-sunken);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        letter-spacing: -0.01em;
}

.panel-body {
        padding: 15px 16px;
}

.panel-body > *:first-child {
        margin-top: 0;
}

.panel-body > *:last-child {
        margin-bottom: 0;
}

.panel-body p {
        margin: 0 0 10px;
        color: var(--text-soft);
        font-size: 14px;
}

.panel-body ul,
.panel-body ol {
        margin: 0 0 10px;
        padding-left: 22px;
        color: var(--text-soft);
        font-size: 14px;
}

.panel-body li {
        margin-bottom: 5px;
}

.panel-body b,
.panel-body strong {
        color: var(--text);
        font-weight: 650;
}

.grid-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 14px;
        align-items: start;
}

/* ---------------------------------------------------------------- 公式 */
.formula {
        font-family: "Cambria Math", "Times New Roman", Georgia, serif;
        font-size: 16.5px;
        background: var(--bg-sunken);
        border: 1px solid var(--border);
        border-left: 3px solid var(--accent);
        border-radius: var(--radius-sm);
        padding: 10px 14px;
        margin: 10px 0;
        color: var(--text);
        overflow-x: auto;
        line-height: 1.9;
}

.formula i {
        font-style: italic;
        font-family: "Cambria Math", "Times New Roman", Georgia, serif;
}

.formula .cond {
        font-size: 12.5px;
        color: var(--text-muted);
        font-family: system-ui, sans-serif;
        font-style: normal;
        display: block;
        margin-top: 2px;
        line-height: 1.5;
}

sub,
sup {
        font-size: 0.72em;
}

/* ---------------------------------------------------------------- 提示块 */
.callout {
        border-radius: var(--radius-sm);
        padding: 11px 14px;
        margin: 12px 0;
        border: 1px solid;
        font-size: 13.5px;
        line-height: 1.7;
}

.callout-title {
        font-weight: 700;
        margin-bottom: 4px;
        font-size: 13.5px;
}

.callout-body > *:first-child {
        margin-top: 0;
}

.callout-body > *:last-child {
        margin-bottom: 0;
}

.callout-body ul {
        margin: 0;
        padding-left: 20px;
}

.callout-info {
        background: var(--accent-soft);
        border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        color: var(--text);
}

[data-theme="dark"] .callout-info {
        color: #dbeafe;
}

.callout-warn {
        background: var(--warn-soft);
        border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

[data-theme="dark"] .callout-warn {
        color: #fde68a;
}

.callout-ok {
        background: var(--ok-soft);
        border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}

[data-theme="dark"] .callout-ok {
        color: #a7f3d0;
}

.callout-danger {
        background: var(--danger-soft);
        border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

[data-theme="dark"] .callout-danger {
        color: #fecaca;
}

/* ---------------------------------------------------------------- 画布 */
.stage-box {
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        margin-bottom: 14px;
        box-shadow: var(--shadow-sm);
}

.canvas-holder {
        background: var(--stage-bg);
        line-height: 0;
}

.stage-canvas {
        display: block;
        width: 100%;
        height: auto;
        /* 宽高比由 JS 通过 --aspect 传入；媒体查询里用 !important 覆盖内联值 */
        aspect-ratio: var(--aspect, 1.6);
        /* 兜底：任何画面都不超过视口高度的 74%，避免需要大量滚动 */
        max-height: 74vh;
        touch-action: none;
}

.stage-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        background: var(--bg-elev);
        align-items: center;
}

.legend {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 16px;
        padding: 9px 14px;
        border-top: 1px solid var(--border);
        background: var(--bg-sunken);
        font-size: 12px;
        color: var(--text-soft);
}

.legend-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
}

.legend-swatch {
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 2px;
        flex: none;
}

/* ---------------------------------------------------------------- 控件 */
.ctrl {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 13px;
        color: var(--text-soft);
        min-width: 0;
}

.ctrl-name {
        white-space: nowrap;
        font-weight: 550;
}

.ctrl-val {
        font-family: var(--mono);
        font-size: 12.5px;
        color: var(--accent-ink);
        min-width: 62px;
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
}

[data-theme="dark"] .ctrl-val {
        color: var(--accent);
}

input[type="range"].range {
        -webkit-appearance: none;
        appearance: none;
        width: 128px;
        height: 4px;
        border-radius: 4px;
        background: var(--border-strong);
        outline: none;
        cursor: pointer;
        flex: none;
}

input[type="range"].range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--accent);
        border: 2px solid var(--bg-elev);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        cursor: pointer;
}

input[type="range"].range::-moz-range-thumb {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: var(--accent);
        border: 2px solid var(--bg-elev);
        cursor: pointer;
}

.btn {
        height: 32px;
        padding: 0 14px;
        border-radius: 8px;
        border: 1px solid var(--border-strong);
        background: var(--bg-elev);
        color: var(--text);
        font-size: 13px;
        font-family: inherit;
        font-weight: 550;
        cursor: pointer;
        transition: background 0.14s, border-color 0.14s, opacity 0.14s;
        white-space: nowrap;
}

.btn:hover {
        background: var(--bg-sunken);
        border-color: var(--accent);
}

.btn:active {
        transform: translateY(1px);
}

.btn-primary {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
}

.btn-primary:hover {
        background: var(--accent-ink);
        border-color: var(--accent-ink);
        color: #fff;
}

[data-theme="dark"] .btn-primary {
        color: #0b1220;
}

[data-theme="dark"] .btn-primary:hover {
        color: #0b1220;
}

.btn-ghost {
        background: transparent;
        border-color: transparent;
        color: var(--text-soft);
}

.btn-ghost:hover {
        background: var(--bg-sunken);
        border-color: var(--border);
}

.select {
        height: 32px;
        border-radius: 8px;
        border: 1px solid var(--border-strong);
        background: var(--bg-elev);
        color: var(--text);
        font-size: 13px;
        font-family: inherit;
        padding: 0 8px;
        outline: none;
        cursor: pointer;
}

.select:focus {
        border-color: var(--accent);
}

.ctrl-select {
        gap: 8px;
}

.switch {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 13px;
        color: var(--text-soft);
        user-select: none;
}

.switch-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
}

.switch-track {
        width: 34px;
        height: 19px;
        border-radius: 20px;
        background: var(--border-strong);
        position: relative;
        transition: background 0.17s;
        flex: none;
}

.switch-dot {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #fff;
        transition: transform 0.17s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.switch-input:checked + .switch-track {
        background: var(--accent);
}

.switch-input:checked + .switch-track .switch-dot {
        transform: translateX(15px);
}

.switch-label {
        font-weight: 550;
}

/* ---------------------------------------------------------------- 读数 */
.readouts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
        gap: 8px;
}

.ro {
        background: var(--bg-sunken);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 7px 11px;
        display: flex;
        flex-direction: column;
        gap: 1px;
        overflow: hidden;
}

.ro-label {
        font-size: 11px;
        color: var(--text-muted);
        font-weight: 550;
        white-space: nowrap;
}

.ro-val {
        font-family: var(--mono);
        font-size: 14px;
        font-weight: 650;
        color: var(--text);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.ro-val.hl {
        color: var(--accent-ink);
}

[data-theme="dark"] .ro-val.hl {
        color: var(--accent);
}

/* ---------------------------------------------------------------- 表格 */
.table-wrap {
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-elev);
}

.dtable {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        font-variant-numeric: tabular-nums;
}

.dtable th,
.dtable td {
        padding: 7px 11px;
        text-align: center;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
}

.dtable th {
        background: var(--bg-sunken);
        font-weight: 650;
        color: var(--text-soft);
        font-size: 12px;
        position: sticky;
        top: 0;
}

.dtable td {
        font-family: var(--mono);
        color: var(--text);
}

.dtable tbody tr:last-child td {
        border-bottom: none;
}

.dtable tbody tr:hover td {
        background: var(--bg-sunken);
}

/* ---------------------------------------------------------------- 其它 */
.sim-root {
        display: flex;
        flex-direction: column;
        gap: 14px;
}

/* ---------- 实验布局：画布与图像/读数并排，交互与图形同屏 ---------- */
.sim-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.42fr) minmax(292px, 1fr);
        gap: 14px;
        align-items: start;
}

.sim-grid--single {
        grid-template-columns: minmax(0, 1fr);
}

.sim-col-main,
.sim-col-side,
.sim-rest {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
}

.sim-col-side .panel,
.sim-col-main .panel,
.sim-rest .panel,
.sim-col-main .stage-box {
        margin-bottom: 0;
}

/* 侧栏里的图像画布不要拉得太高 */
.sim-col-side .mini-plot canvas {
        max-height: 46vh;
}

@media (max-width: 1080px) {
        .sim-grid,
        .sim-grid--single {
                grid-template-columns: minmax(0, 1fr);
        }
}

.sim-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 22px;
        align-items: center;
        padding: 12px 14px;
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
}

.sim-controls .sep {
        width: 1px;
        align-self: stretch;
        background: var(--border);
        margin: 0 2px;
}

.hint {
        font-size: 12.5px;
        color: var(--text-muted);
        margin: 6px 0 0;
}

.kbd {
        font-family: var(--mono);
        font-size: 11.5px;
        background: var(--bg-sunken);
        border: 1px solid var(--border-strong);
        border-bottom-width: 2px;
        border-radius: 5px;
        padding: 1px 6px;
        color: var(--text-soft);
}

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

.check-list li {
        position: relative;
        padding-left: 24px;
        margin-bottom: 7px;
        font-size: 14px;
        color: var(--text-soft);
}

.check-list li::before {
        content: "✓";
        position: absolute;
        left: 2px;
        top: 0;
        color: var(--ok);
        font-weight: 800;
        font-size: 13px;
}

.warn-list li::before {
        content: "!";
        color: var(--warn);
}

.cross-list li::before {
        content: "✕";
        color: var(--danger);
}

.steps {
        counter-reset: step;
        list-style: none;
        padding: 0;
        margin: 0;
}

.steps li {
        position: relative;
        padding-left: 34px;
        margin-bottom: 9px;
        font-size: 14px;
        color: var(--text-soft);
        counter-increment: step;
}

.steps li::before {
        content: counter(step);
        position: absolute;
        left: 0;
        top: 1px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent-ink);
        display: grid;
        place-items: center;
        font-size: 12px;
        font-weight: 700;
}

[data-theme="dark"] .steps li::before {
        color: #dbeafe;
}

.apparatus {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
}

.apparatus span {
        font-size: 12.5px;
        background: var(--bg-sunken);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 3px 10px;
        color: var(--text-soft);
}

.footer {
        padding: 20px 26px 64px;
        max-width: 1180px;
        border-top: 1px solid var(--border);
        color: var(--text-muted);
        font-size: 12.5px;
        line-height: 1.8;
}

.footer code {
        font-family: var(--mono);
        font-size: 11.5px;
        background: var(--bg-sunken);
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 0 4px;
}

.footer-dev {
        margin-top: 4px;
        font-size: 13px;
        color: var(--text-soft);
}

.footer-dev b {
        color: var(--accent-ink);
        font-size: 14px;
        letter-spacing: 0.06em;
}

[data-theme="dark"] .footer-dev b {
        color: var(--accent);
}

/* 实验记录表（侧栏紧凑版） */
.table-wrap.rec-compact table {
        font-size: 12px;
}

.table-wrap.rec-compact th,
.table-wrap.rec-compact td {
        padding: 6px 5px;
        white-space: nowrap;
}

.table-wrap.rec-compact td {
        font-family: var(--mono);
        font-size: 11.5px;
}

.mini-plot {
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
}

.mini-plot canvas {
        display: block;
        width: 100%;
        height: auto;
        background: var(--stage-bg);
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1080px) {
        /* 侧栏里的图像在单列布局下不再限制高度 */
        .sim-col-side .mini-plot canvas {
                max-height: none;
        }
}

@media (max-width: 900px) {
        #menu-toggle {
                display: inline-flex;
        }

        .layout {
                grid-template-columns: minmax(0, 1fr);
        }

        .sidebar {
                position: fixed;
                top: var(--topbar-h);
                left: 0;
                bottom: 0;
                width: 282px;
                z-index: 39;
                transform: translateX(-100%);
                transition: transform 0.22s ease;
                box-shadow: var(--shadow);
                height: auto;
        }

        body.nav-open .sidebar {
                transform: none;
        }

        .main {
                padding: 16px 13px 30px;
        }

        .footer {
                padding: 18px 13px 56px;
        }

        .brand-text span {
                display: none;
        }

        .search-wrap {
                max-width: none;
        }

        .hero h1 {
                font-size: 24px;
        }

        .exp-title {
                font-size: 20px;
        }

        /* 控件在窄屏上换行排列，且触控目标足够大 */
        .stage-controls,
        .sim-controls {
                gap: 10px 14px;
                padding: 11px 12px;
        }

        .ctrl {
                flex: 1 1 auto;
                min-width: 0;
        }

        .ctrl-name {
                flex: 1 1 auto;
        }

        input[type="range"].range {
                flex: 1 1 120px;
                width: auto;
                min-width: 96px;
                height: 6px;
        }

        input[type="range"].range::-webkit-slider-thumb {
                width: 20px;
                height: 20px;
        }

        input[type="range"].range::-moz-range-thumb {
                width: 18px;
                height: 18px;
        }

        .btn {
                height: 38px;
                padding: 0 15px;
        }

        .select {
                height: 38px;
        }

        .sim-controls .sep {
                display: none;
        }

        .readouts {
                grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        }

        .dtable th,
        .dtable td {
                padding: 6px 8px;
                font-size: 12px;
        }

        .panel-body {
                padding: 13px 13px;
        }

        .formula {
                font-size: 15.5px;
                padding: 9px 11px;
        }
}

/* 窄屏下把画布压扁一些，减少上下滚动（--aspect 由 JS 内联设置，故需 !important） */
@media (max-width: 760px) {
        .stage-canvas:not(.stage-canvas--wide) {
                --aspect: 1.12 !important;
        }

        /* 横向细节密集的画面（刻度尺、游标卡尺等）不压扁，改为保持宽度 + 横向滚动 */
        .stage-canvas--wide {
                min-width: 620px;
        }

        .canvas-holder {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
        }

        .scroll-hint {
                display: block;
        }

        .tabs {
                margin-bottom: 13px;
        }

        .tab {
                padding: 9px 11px;
                font-size: 13.5px;
        }
}

.scroll-hint {
        display: none;
        font-size: 12px;
        color: var(--text-muted);
        text-align: center;
        padding: 6px 10px;
        background: var(--bg-sunken);
        border-top: 1px solid var(--border);
}

@media (max-width: 560px) {
        .topbar {
                gap: 8px;
                padding: 0 10px;
        }

        .brand-text {
                display: none;
        }

        .hero-stats {
                gap: 8px;
        }

        .stat {
                flex: 1 1 92px;
                min-width: 92px;
                padding: 10px 12px;
        }

        .stat b {
                font-size: 19px;
        }

        .card-grid {
                grid-template-columns: minmax(0, 1fr);
        }

        .readouts {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .stage-controls,
        .sim-controls {
                flex-direction: column;
                align-items: stretch;
        }

        .ctrl {
                width: 100%;
                justify-content: space-between;
        }

        .ctrl-val {
                min-width: 56px;
        }

        .btn {
                width: 100%;
        }
}

/* 触摸设备：悬停效果关闭，避免"粘住" */
@media (hover: none) {
        .card:hover {
                transform: none;
        }

        .nav-item:hover {
                background: transparent;
        }
}

@media print {
        .topbar,
        .sidebar,
        .tabs,
        .stage-controls {
                display: none !important;
        }

        .layout {
                grid-template-columns: 1fr;
        }
}