/* ================================================================
   Smart Car Simulation — 训练/调试工具 样式
   Phase 13: 2D Canvas 骨架

   目标: 桌面端 Chrome/Edge 可用（不要求手机端适配）。
   布局: 五区 — 2D 仿真画面 | C 代码编辑 | 运行控制 | 控制台 | 状态面板
   ================================================================ */

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-primary:   #1e1e2e;
    --bg-secondary: #2a2a3e;
    --bg-tertiary:  #333350;
    --bg-input:     #1a1a2a;
    --text-primary: #e0e0f0;
    --text-secondary: #a0a0c0;
    --text-muted:   #707090;
    --border-color: #404060;
    --accent-green: #4caf50;
    --accent-red:   #f44336;
    --accent-yellow: #ff9800;
    --accent-blue:  #2196f3;
    --accent-cyan:  #00bcd4;
    --accent-orange: #e65100;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
}

/* ===== Header ===== */
#header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

#header-bar h1 {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-cyan);
    letter-spacing: 0.5px;
}

.mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-primary);
}

.mode-switch-label {
    padding: 0 5px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.mode-switch button {
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 4px 9px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.mode-switch button:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.mode-switch button.active,
.mode-switch button[aria-pressed="true"] {
    color: #fff;
    background: var(--accent-blue);
    border-color: var(--accent-cyan);
}

.mode-switch.compact {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mode-switch.compact button {
    min-width: 0;
    padding: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.build-status {
    font-size: 12px;
    color: var(--text-muted);
    padding: 2px 10px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

/* ===== Main Layout ===== */
body {
    display: flex;
    flex-direction: column;
}

#main-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* ===== Left Column: 2D Simulation + Controls ===== */
#left-column {
    flex: 3;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    min-width: 500px;
}

#sim-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #000;
    border-bottom: 1px solid var(--border-color);
    min-height: 350px;
    overflow: hidden;
}

/* 主 2D 赛道视图（占上部 65%） */
#track-view {
    flex: 65;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 200px;
    background: #000;
}

#canvas-track {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* 摄像头二值视图（占下部 35%） */
#camera-view {
    flex: 35;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 120px;
    background: #000;
}

#canvas-camera {
    display: block;
    image-rendering: pixelated;
    /* 摄像头根据容器短边等比例缩放，保持 4:3 宽高比 */
    max-width: 100%;
    max-height: 100%;
}

/* 摄像头视距调节控件 */
#camera-distance-control {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.75);
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 50;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

#camera-distance-control label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

#camera-distance-slider {
    width: 100px;
    height: 4px;
    cursor: pointer;
    accent-color: var(--accent-cyan);
}

#camera-distance-value {
    font-size: 11px;
    color: var(--accent-cyan);
    min-width: 60px;
    text-align: right;
    font-family: var(--font-mono);
}

/* 布局切换按钮 */
#layout-switch {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 100;
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px;
    border-radius: 4px;
}

.layout-btn {
    padding: 4px 8px;
    font-size: 11px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.layout-btn:hover {
    background: var(--accent-blue);
    color: #fff;
}

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

/* 左右布局模式 */
#sim-container.horizontal-layout {
    flex-direction: row;
}

#sim-container.horizontal-layout #track-view {
    flex: 65;
    border-bottom: none;
    border-right: 1px solid var(--border-color);
}

#sim-container.horizontal-layout #camera-view {
    flex: 35;
    min-width: 200px;
    /* 在左右布局中保持 4:3 宽高比 */
    aspect-ratio: 4 / 3;
    max-height: 100%;
}

/* 悬浮布局模式 */
#camera-view.floating-mode {
    position: fixed;
    width: 300px;
    min-width: 150px;
    max-width: 500px;
    background: #000;
    border: 2px solid var(--accent-cyan);
    /* 保持 4:3 宽高比 */
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    cursor: move;
    overflow: hidden;
}

#camera-view.floating-mode::before {
    content: '摄像头视图';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-secondary);
    font-size: 11px;
    text-align: center;
    z-index: 1;
}
body[data-smartcar-mode="electromagnetic"] #camera-view.floating-mode::before { content:'五路原始电感 ADC'; }

/* 悬浮窗口缩放控制柄 */
#camera-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: var(--accent-cyan);
    cursor: se-resize;
    border-radius: 0 0 8px 0;
    z-index: 10;
}

#camera-resize-handle::after {
    content: '';
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/* 占位提示（赛道和摄像头共用） */
.sim-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    pointer-events: none;
    z-index: 1;
}

.sim-placeholder strong {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.sim-placeholder .placeholder-hint {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 400px;
    line-height: 1.6;
}

/* ===== Control Bar ===== */
#control-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.ctrl-btn {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    transition: background 0.15s, border-color 0.15s;
}

.ctrl-btn:hover:not(:disabled) {
    border-color: var(--text-muted);
}

.ctrl-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-run       { border-left: 3px solid var(--accent-green); }
.btn-run-from-here { border-left: 3px solid #66bb6a; }
.btn-stop      { border-left: 3px solid var(--accent-yellow); }
.btn-estop     { border-left: 3px solid var(--accent-red); }
.btn-reset     { border-left: 3px solid var(--accent-blue); }
.btn-compile   { border-left: 3px solid var(--accent-cyan); }
.btn-motor-enable { border-left: 3px solid var(--accent-green); }
.btn-motor-enable.disabled { border-left-color: var(--accent-red); background: rgba(244,67,54,0.15); color: var(--accent-red); }
.btn-debug-pose { border-left: 3px solid var(--accent-yellow); }
.btn-debug-pose.active { background: rgba(255,152,0,0.25); border-left-color: var(--accent-yellow); color: var(--accent-yellow); }
.btn-set-origin { border-left: 3px solid var(--accent-cyan); }
.btn-restore-origin { border-left: 3px solid var(--accent-blue); }

.ctrl-status {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===== Developer Debug Mode Badge (Phase 11) ===== */
#dev-mode-badge {
    padding: 6px 16px;
    background: rgba(255, 152, 0, 0.12);
    color: var(--accent-yellow);
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid var(--accent-yellow);
}

/* ===== Manual Control Inputs (hidden by default, shown in dev mode) ===== */
#manual-control {
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.manual-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.manual-row label {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.manual-row input[type="number"] {
    width: 68px;
    padding: 3px 6px;
    font-size: 12px;
    font-family: var(--font-mono);
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    text-align: right;
}

.manual-row input[type="number"]:disabled {
    opacity: 0.4;
}

.manual-row select {
    padding: 3px 4px;
    font-size: 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.manual-row select:disabled {
    opacity: 0.4;
}

.btn-apply {
    border-left: 3px solid var(--accent-cyan) !important;
}

.btn-req-state {
    border-left: 3px solid var(--accent-cyan) !important;
}

/* ===== Debug LEDs ===== */
#debug-leds {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

#debug-leds h3 {
    font-size: 13px;
    color: var(--accent-cyan);
    margin-bottom: 8px;
}

#led-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.debug-led {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #333;
    border: 2px solid #555;
    transition: background-color 0.1s, box-shadow 0.1s;
}

.debug-led.on {
    box-shadow: 0 0 8px 2px currentColor;
}

/* ===== Right Column: Editor + Status ===== */
#right-column {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-width: 320px;
}

#editor-container {
    flex: 2;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-color);
    min-height: 0;
}

/* Phase 23: CodeMirror 深色主题覆盖 */
#ide-editor-container .CodeMirror {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    height: 100%;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    background: var(--bg-input);
    color: var(--text-primary);
    border: none;
}

#ide-editor-container .CodeMirror-gutters {
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    min-width: 36px;
}
#ide-editor-container .CodeMirror-gutter {
    min-width: 36px;
}

#ide-editor-container .CodeMirror-linenumber {
    color: var(--text-muted);
}

#ide-editor-container .CodeMirror-cursor {
    border-left-color: #e0e0f0;
}

#ide-editor-container .CodeMirror-selected {
    background: rgba(88, 166, 255, 0.3) !important;
}

#ide-editor-container .CodeMirror-activeline-background {
    background: rgba(255, 255, 255, 0.03);
}

/* C 语法高亮颜色 (CodeMirror cm-s-default) */
#ide-editor-container .cm-s-default .cm-keyword { color: #c678dd; }
#ide-editor-container .cm-s-default .cm-type { color: #e5c07b; }
#ide-editor-container .cm-s-default .cm-string { color: #98c379; }
#ide-editor-container .cm-s-default .cm-number { color: #d19a66; }
#ide-editor-container .cm-s-default .cm-comment { color: #5c6370; font-style: italic; }
#ide-editor-container .cm-s-default .cm-preprocessor { color: #c678dd; }
#ide-editor-container .cm-s-default .cm-builtin { color: #61afef; }
#ide-editor-container .cm-s-default .cm-def { color: #61afef; }
#ide-editor-container .cm-s-default .cm-operator { color: #56b6c2; }
#ide-editor-container .cm-s-default .cm-variable { color: #abb2bf; }
#ide-editor-container .cm-s-default .cm-variable-2 { color: #abb2bf; }
#ide-editor-container .cm-s-default .cm-meta { color: #abb2bf; }
#ide-editor-container .cm-s-default .cm-atom { color: #d19a66; }

/* 编译错误行标记 */
#ide-editor-container .CodeMirror .error-line-gutter {
    color: #e06c75 !important;
    background: rgba(224, 108, 117, 0.15);
}
#ide-editor-container .CodeMirror .error-line-text {
    background: rgba(224, 108, 117, 0.1);
}

/* CodeMirror 补全覆盖 — 匹配深色主题 */
.CodeMirror-hints {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.CodeMirror-hint {
    color: var(--text-primary);
    padding: 4px 8px;
}
.CodeMirror-hint-active {
    background: var(--bg-tertiary);
    color: var(--accent-cyan);
}

/* 全屏时 CodeMirror 也需要填充 */
#ide-editor-container.fullscreen .CodeMirror {
    height: 100%;
}

/* Phase 23: 文件栏 */
#file-bar {
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    height: 32px;
    flex-shrink: 0;
}

#file-bar-tabs {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

#file-bar-tabs::-webkit-scrollbar {
    display: none;
}

.file-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.file-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.file-tab.active {
    background: var(--bg-secondary);
    color: var(--accent-cyan);
    border-bottom: 2px solid var(--accent-cyan);
}

.file-tab .file-icon {
    font-size: 10px;
}

.file-tab .file-name {
    font-family: var(--font-mono);
}

.file-tab .file-modified {
    color: var(--accent-yellow);
    font-size: 10px;
}

/* Phase 34: 教程模式文件职责标签 */
.file-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--font-mono);
    line-height: 1.2;
    white-space: nowrap;
}
.file-badge-entry {
    background: var(--accent-green);
    color: #000;
}
.file-badge-decl {
    background: var(--accent-cyan);
    color: #000;
}
.file-badge-module {
    background: var(--accent-yellow);
    color: #000;
}
.file-badge-header {
    background: var(--accent-orange, #ff9800);
    color: #000;
}

#file-bar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
}

.file-bar-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.file-bar-btn:hover {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.file-bar-btn.btn-add {
    background: rgba(76, 175, 80, 0.2);
    border-color: var(--accent-green);
    color: var(--accent-green);
}
.file-bar-btn.btn-add:hover {
    background: var(--accent-green);
    color: #fff;
}

.file-bar-btn.btn-main {
    border-left: 2px solid var(--accent-yellow);
}

#editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    flex-shrink: 0;
}

#editor-lang {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 1px 8px;
    border-radius: 3px;
}

#editor-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.toolbar-btn:hover {
    background: var(--accent-blue);
    color: #fff;
}

/* Phase 23: 搜索/替换栏 */
#search-replace-bar {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.search-row:last-child {
    margin-bottom: 0;
}

#search-input, #replace-input {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    font-family: var(--font-mono);
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    outline: none;
}

#search-input:focus, #replace-input:focus {
    border-color: var(--accent-cyan);
}

.search-btn {
    padding: 4px 8px;
    font-size: 11px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
}

.search-btn:hover {
    background: var(--accent-blue);
    color: #fff;
}

.search-option {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.search-status {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Phase 7: 运行中编辑警告 */
#running-edit-warning {
    padding: 6px 12px;
    background: rgba(255, 152, 0, 0.15);
    border-bottom: 1px solid var(--accent-yellow);
    color: var(--accent-yellow);
    font-size: 12px;
    text-align: center;
    flex-shrink: 0;
}

/* Phase 23: IDE 编辑器容器 */
#ide-editor-container {
    flex: 1;
    display: flex;
    position: relative;
    min-height: 0;
    overflow: hidden;
}

/* Phase 23 二次返工: 错误列表面板 */
#error-list-panel {
    background: rgba(224, 108, 117, 0.08);
    border-bottom: 1px solid #e06c75;
    max-height: 160px;
    overflow-y: auto;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 12px;
}

#error-list-panel .error-list-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 12px;
    color: #e06c75;
    cursor: pointer;
    border-bottom: 1px solid rgba(224, 108, 117, 0.1);
    transition: background 0.12s;
}

#error-list-panel .error-list-item:hover {
    background: rgba(224, 108, 117, 0.15);
}

#error-list-panel .error-list-file {
    color: #61afef;
    font-weight: 500;
    white-space: nowrap;
}

#error-list-panel .error-list-line {
    color: #d19a66;
    min-width: 32px;
    text-align: right;
}

#error-list-panel .error-list-msg {
    color: #e0e0f0;
    flex: 1;
}

/* Phase 23: 全屏编辑模式 — IDE 布局 */
#ide-editor-container.fullscreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
}

/* Phase 32: 教程页全屏时右侧任务栏仍可见 */
body.tutorial-mode #ide-editor-container.fullscreen {
    right: 280px;
}

/* 教程页全屏时右侧任务栏浮于全屏编辑器之上 */
body.tutorial-mode #tutorial-task-panel {
    z-index: 10001;
    position: relative;
}

/* 全屏顶部栏 */
#fullscreen-topbar { display: none; }
#ide-editor-container.fullscreen #fullscreen-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
#btn-exit-fullscreen {
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 600;
    background: #e06c75;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#btn-exit-fullscreen:hover { background: #d05560; }
#fullscreen-title {
    font-size: 13px;
    color: var(--accent-cyan);
    font-weight: 500;
}

/* 全屏主体：左侧侧栏 + 右侧编辑器区 */
#fullscreen-body { display: none; }
#ide-editor-container.fullscreen #fullscreen-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* 左侧侧栏 */
#fullscreen-sidebar {
    display: flex;
    flex-direction: column;
    width: 180px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    overflow-y: auto;
    font-size: 14px;
}
#fullscreen-sidebar .sidebar-title {
    padding: 12px 14px 8px;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.fullscreen-mode-switch {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 10px 10px;
    color: var(--text-muted);
    font-size: 11px;
    border-bottom: 1px solid var(--border-color);
}

.fullscreen-mode-switch strong {
    color: var(--accent-cyan);
}

body[data-smartcar-mode="electromagnetic"] #camera-view {
    background: radial-gradient(circle at center, #2b2112, #080a0d 70%);
}

body[data-smartcar-mode="electromagnetic"] #camera-view #canvas-camera {
    display: none;
}

#inductor-view { display:none; position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box; padding:10px; color:var(--text-primary); overflow:hidden; }
body[data-smartcar-mode="electromagnetic"] #inductor-view { display:flex; flex-direction:column; gap:8px; }
body[data-smartcar-mode="electromagnetic"] #camera-placeholder { display:none !important; }
.inductor-heading { display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:11px; color:var(--text-muted); }
.inductor-heading strong { color:#e6a34a; font-size:13px; }
.inductor-relative { position:relative; flex:1; min-height:105px; border:1px solid rgba(230,163,74,.35); border-radius:8px; background:linear-gradient(180deg,rgba(230,163,74,.06),rgba(0,0,0,.22)); overflow:hidden; }
.inductor-rail { position:absolute; left:7%; right:7%; bottom:8px; height:76px; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; border-top:4px solid #87909a; padding-top:4px; }
.inductor-channel { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; }
.inductor-bar-shell { width:70%; flex:1; min-height:35px; display:flex; align-items:flex-end; background:rgba(0,0,0,.35); border:1px solid #4d5660; border-radius:3px; overflow:hidden; }
.inductor-bar { width:100%; height:0; background:linear-gradient(180deg,#ffd36a,#d97820); transition:height .1s linear; }
.inductor-value { font:700 11px var(--font-mono); color:#ffd36a; }
.inductor-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:var(--text-muted); }
.inductor-note { margin:0; font-size:9px; line-height:1.3; color:var(--text-muted); }

@media (max-width: 900px) {
    .inductor-heading { align-items:flex-start; flex-direction:column; gap:2px; }
    .inductor-note { display:none; }
    .inductor-rail { left:3%; right:3%; gap:2px; }
}

.tutorial-route-placeholder {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 6px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.tutorial-route-placeholder strong,
.tutorial-electromagnetic-placeholder h3 {
    color: var(--accent-cyan);
}

.tutorial-electromagnetic-placeholder {
    margin: 8px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    line-height: 1.55;
}
#fullscreen-file-list { flex: 1; }
.fullscreen-live-panels { padding:8px; display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--border-color); }
.fs-live-card { min-width:0; padding:7px; border:1px solid var(--border-color); border-radius:5px; background:var(--bg-primary); }
.fs-live-card>strong { display:block; margin-bottom:5px; color:var(--accent-cyan); font-size:10px; }
.fs-camera-preview { display:block; width:80px; height:60px; max-width:100%; margin:auto; image-rendering:pixelated; border:1px solid #46505a; }
.fs-inductor-preview { height:64px; display:grid; grid-template-columns:repeat(5,1fr); gap:3px; align-items:end; }
.fs-inductor-preview>span { position:relative; height:60px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; background:#15191d; overflow:hidden; }
.fs-inductor-preview i { position:absolute; left:2px; right:2px; bottom:14px; background:#d88932; opacity:.65; }
.fs-inductor-preview b,.fs-inductor-preview small { position:relative; z-index:1; font-size:8px; line-height:12px; color:#ffd08a; }
.fs-inductor-preview small { color:var(--text-muted); }
.fs-status-preview { display:flex; flex-direction:column; gap:2px; font-size:9px; }
.fs-status-preview div { display:flex; justify-content:space-between; gap:4px; }
.fs-status-preview span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); }
.fs-status-preview b { color:var(--text-primary); font-family:var(--font-mono); white-space:nowrap; }
#fullscreen-file-list .sidebar-file {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    font-size: 14px; font-family: var(--font-mono);
    color: var(--text-secondary); cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.12s;
}
#fullscreen-file-list .sidebar-file:hover {
    background: var(--bg-tertiary); color: var(--text-primary);
}
#fullscreen-file-list .sidebar-file.active {
    color: var(--accent-cyan);
    border-left-color: var(--accent-cyan);
    background: var(--bg-tertiary);
}
#fullscreen-sidebar-actions {
    padding: 10px;
    border-top: 1px solid var(--border-color);
    display: flex; flex-direction: column; gap: 5px;
}
.sidebar-action-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; font-size: 13px;
    background: var(--bg-tertiary); color: var(--text-secondary);
    border: 1px solid var(--border-color); border-radius: 4px;
    cursor: pointer; transition: all 0.12s; text-align: left;
}
.sidebar-action-btn:hover { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
.sidebar-action-btn.btn-main { border-left: 3px solid var(--accent-yellow); }

/* 右侧编辑器区 */
#fullscreen-editor-area {
    flex: 1; min-width: 0;
    position: relative;
}

/* ===== 全屏函数库面板 ===== */
#fs-func-lib-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.fs-lib-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.fs-lib-header .fs-lib-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-cyan);
}
.fs-lib-close-btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    background: #e06c75;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.fs-lib-close-btn:hover { background: #d05560; }

.fs-lib-search {
    padding: 8px 14px;
    flex-shrink: 0;
}
.fs-lib-search input {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    outline: none;
    font-family: var(--font-ui);
}
.fs-lib-search input:focus { border-color: var(--accent-cyan); }
.fs-lib-search input::placeholder { color: var(--text-muted); }

.fs-lib-categories {
    flex-shrink: 0;
    padding: 0 8px 8px;
}
.fs-lib-cat-btn {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px;
    font-size: 12px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s;
}
.fs-lib-cat-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.fs-lib-cat-btn.active { background: var(--accent-cyan); color: #fff; border-color: var(--accent-cyan); }

.fs-lib-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.6;
}
.fs-lib-content .fs-api-item {
    margin-bottom: 10px;
    padding: 8px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.fs-lib-content .fs-api-name {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent-green);
    font-weight: 600;
    margin-bottom: 4px;
}
.fs-lib-content .fs-api-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.fs-lib-content .fs-api-sig {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-input);
    padding: 4px 8px;
    border-radius: 3px;
}
.fs-lib-content .fs-api-params {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.fs-lib-content .fs-api-item:hover {
    border-color: var(--accent-cyan);
}

/* 全屏隐藏普通 UI */
#ide-editor-container.fullscreen ~ #file-bar,
#ide-editor-container.fullscreen #file-bar,
#ide-editor-container.fullscreen #editor-header { display: none; }

/* 全屏 CM 字体放大 */
#ide-editor-container.fullscreen .CodeMirror {
    height: 100% !important;
    font-size: 15px;
    line-height: 1.6;
}

/* 全屏侧栏函数库模式 */
#fs-func-lib-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#fs-func-lib-inner .sidebar-file {
    font-family: var(--font-ui);
    font-size: 12px;
}
#fs-func-lib-detail {
    font-family: var(--font-ui);
    line-height: 1.5;
}

/* ===== Status Panel ===== */
#status-panel {
    flex: 0 0 240px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    overflow-y: auto;
    min-height: 0;
}
.status-panel-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.status-config-btn { padding:3px 9px; border:1px solid var(--border-color); border-radius:4px; background:var(--bg-tertiary); color:var(--text-secondary); cursor:pointer; font-size:11px; }
.status-config-btn:hover { color:#fff; background:var(--accent-blue); }

#status-panel h3 {
    font-size: 13px;
    color: var(--accent-cyan);
    margin-bottom: 8px;
}

#status-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
#status-table tbody { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:6px; }

#status-table tr {
    border: 1px solid rgba(64, 64, 96, 0.55);
    border-radius:6px; padding:5px 8px; min-width:0; background:var(--bg-primary);
}

#status-table td {
    padding: 3px 0;
}

.s-label {
    color: var(--text-secondary);
    width: 55%;
}
.status-card .s-label,.status-card .s-value { display:block; width:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-card .s-value { text-align:left; margin-top:2px; }

#status-config-overlay { position:fixed; inset:0; z-index:9997; background:rgba(0,0,0,.48); }
#status-config-drawer { position:fixed; z-index:9998; top:0; right:0; bottom:0; width:min(390px,90vw); padding:14px; background:var(--bg-secondary); border-left:1px solid var(--border-color); flex-direction:column; overflow-y:auto; overflow-x:hidden; box-shadow:-8px 0 30px rgba(0,0,0,.35); }
.status-config-header { display:flex; align-items:center; justify-content:space-between; }
.status-config-header button { background:transparent; border:0; color:var(--text-secondary); cursor:pointer; font-size:16px; }
#status-config-drawer>p { color:var(--text-muted); font-size:11px; margin:5px 0 10px; }
#status-config-content section { margin-bottom:12px; }
#status-config-content h4 { color:var(--accent-cyan); margin:7px 0; }
.status-config-item { display:flex; align-items:center; gap:8px; padding:7px; margin:4px 0; border:1px solid var(--border-color); border-radius:5px; background:var(--bg-primary); color:var(--text-secondary); cursor:grab; }
.drag-handle { color:var(--text-muted); }

.s-value {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 500;
    text-align: right;
    width: 45%;
}

.s-value-error {
    color: var(--accent-red);
    font-size: 11px;
}

.status-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    font-style: italic;
}

/* ===== Console / Output Areas ===== */
#console-container {
    height: 180px;
    display: flex;
    flex-direction: column;
    background: var(--bg-input);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* 代码输出区 */
#code-output-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-color);
    min-height: 0;
}

#code-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    flex-shrink: 0;
}

#btn-clear-code-output {
    padding: 2px 12px;
    font-size: 11px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
}

#btn-clear-code-output:hover {
    color: var(--text-primary);
}

#code-output {
    flex: 1;
    padding: 8px 12px;
    margin: 0;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--accent-green);
    white-space: pre-wrap;
    word-break: break-all;
}

/* 系统日志/诊断区 */
#system-log-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#system-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    flex-shrink: 0;
}

#btn-clear-system-log {
    padding: 2px 12px;
    font-size: 11px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
}

#btn-clear-system-log:hover {
    color: var(--text-primary);
}

#system-log {
    flex: 1;
    padding: 8px 12px;
    margin: 0;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ===== Scrollbar styling ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* CodeMirror 滚动条贴边 */
.CodeMirror-vscrollbar {
    right: 0 !important;
}
.CodeMirror-hscrollbar {
    bottom: 0 !important;
}
.CodeMirror-scroll {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* ===== Phase 20 子步骤 3: 函数库面板 ===== */

/* 工具栏高亮按钮 */
.toolbar-btn-accent {
    background: var(--accent-cyan) !important;
    color: #fff !important;
    border-color: var(--accent-cyan) !important;
}

.toolbar-btn-accent:hover {
    background: #0097a7 !important;
    color: #fff !important;
}

/* 遮罩层 */
#func-lib-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

/* 弹窗面板（用户要求：大弹窗替代抽屉） */
#func-lib-drawer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 850px;
    max-width: 92vw;
    height: 85vh;
    max-height: 90vh;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

#func-lib-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

#func-lib-header strong {
    font-size: 14px;
    color: var(--accent-cyan);
}

#func-lib-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.func-lib-mode,.func-lib-all-toggle,.fs-lib-mode { font-size:11px; color:var(--text-muted); white-space:nowrap; }
.func-lib-mode strong,.fs-lib-mode strong { color:var(--accent-cyan); }
.fs-lib-mode { padding:7px 12px 0; display:flex; justify-content:space-between; gap:10px; }

#func-lib-search {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    font-family: var(--font-ui);
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    outline: none;
}

#func-lib-search:focus {
    border-color: var(--accent-cyan);
}

#func-lib-search::placeholder {
    color: var(--text-muted);
}

#btn-close-func-lib {
    padding: 4px 10px;
    font-size: 14px;
    font-weight: bold;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

#btn-close-func-lib:hover {
    background: var(--accent-red);
    color: #fff;
}

/* 主体：左侧导航 + 右侧内容 */
#func-lib-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* 左侧分类导航 */
#func-lib-nav {
    width: 140px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    padding: 8px 0;
    background: var(--bg-primary);
}

.func-nav-item {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    border-left: 3px solid transparent;
    white-space: nowrap;
}

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

.func-nav-item.active {
    background: var(--bg-tertiary);
    color: var(--accent-cyan);
    border-left-color: var(--accent-cyan);
    font-weight: 500;
}

/* 右侧内容区 */
#func-lib-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary);
}

/* 内容区标题 */
#func-lib-content h3 {
    font-size: 15px;
    color: var(--accent-cyan);
    margin: 16px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

#func-lib-content h3:first-child {
    margin-top: 0;
}

/* API 卡片 */
.func-api-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.func-api-card:hover {
    border-color: var(--accent-cyan);
}
.func-api-card.mode-unavailable { opacity:.68; border-style:dashed; }
.func-mode-badge { display:inline-block; padding:1px 5px; border-radius:9px; font:9px var(--font-ui); color:#fff; background:#69717a; vertical-align:middle; }
.func-mode-badge.camera { background:#2778b8; }.func-mode-badge.electromagnetic { background:#a76522; }
.func-mode-warning { color:var(--accent-yellow); font-size:10px; margin-bottom:4px; }
.func-api-insert { margin-top:7px; padding:4px 8px; font-size:10px; color:#fff; background:var(--accent-blue); border:0; border-radius:3px; cursor:pointer; }
.func-api-insert:disabled { cursor:not-allowed; background:#555; color:#aaa; }

.func-api-name {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-green);
    margin-bottom: 4px;
}

.func-api-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.func-api-sig {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-input);
    padding: 6px 10px;
    border-radius: 3px;
    margin-bottom: 6px;
    white-space: pre-wrap;
    word-break: break-all;
}

.func-api-detail {
    font-size: 12px;
    color: var(--text-secondary);
}

.func-api-detail table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 11px;
}

.func-api-detail th {
    text-align: left;
    padding: 3px 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.func-api-detail td {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 11px;
}

.func-api-example {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-green);
    background: var(--bg-input);
    padding: 6px 10px;
    border-radius: 3px;
    margin-top: 6px;
    white-space: pre-wrap;
    word-break: break-all;
    border-left: 3px solid var(--accent-cyan);
}

.func-api-note {
    font-size: 11px;
    color: var(--accent-yellow);
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid var(--accent-yellow);
}

/* 常量表格 */
.func-const-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
}

.func-const-table th {
    text-align: left;
    padding: 5px 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.func-const-table td {
    padding: 5px 8px;
    border: 1px solid var(--border-color);
}

.func-const-table td:first-child {
    font-family: var(--font-mono);
    color: var(--accent-green);
    font-weight: 500;
}

.func-const-table td:nth-child(2) {
    font-family: var(--font-mono);
    color: var(--accent-yellow);
}

/* 搜索隐藏 */
.func-api-card.hidden {
    display: none;
}

/* ===== Phase 21: 赛道编辑器面板 ===== */

/* 工具栏赛道编辑按钮 */
.btn-track-editor {
    border-left: 3px solid #ff9800 !important;
}

/* 遮罩层 */
#track-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
}

/* 抽屉面板 */
#track-editor-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 600px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

#track-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

#track-editor-header strong {
    font-size: 14px;
    color: #ff9800;
}

#track-editor-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

#btn-close-track-editor {
    padding: 4px 10px;
    font-size: 14px;
    font-weight: bold;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

#btn-close-track-editor:hover {
    background: var(--accent-red);
    color: #fff;
}

/* 主体：左侧模块选择 + 右侧模块列表 */
#track-editor-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* 左侧：模块选择 */
#track-editor-module-picker {
    width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    padding: 12px;
    background: var(--bg-primary);
}

#track-editor-module-picker h4 {
    font-size: 12px;
    color: var(--accent-cyan);
    margin-bottom: 8px;
    margin-top: 12px;
}

#track-editor-module-picker h4:first-child {
    margin-top: 0;
}

/* 模块类型选择卡片 */
.track-editor-module-type {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s;
    font-size: 13px;
    color: var(--text-primary);
}

.track-editor-module-type:hover {
    border-color: var(--accent-cyan);
    background: var(--bg-tertiary);
}

.track-editor-module-type.selected {
    border-color: #ff9800;
    background: rgba(255, 152, 0, 0.12);
    color: #ff9800;
}

.track-editor-module-type .module-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
}

.track-editor-module-type .module-name {
    font-weight: 500;
}

/* 参数控件 */
#track-editor-params {
    margin-top: 0;
}

.track-editor-param-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.track-editor-param-row label {
    color: var(--text-secondary);
    min-width: 50px;
    font-weight: 500;
}

.track-editor-param-row input[type="range"] {
    flex: 1;
    height: 6px;
    cursor: pointer;
    accent-color: #ff9800;
}

.track-editor-param-row .param-value-input {
    width: 70px;
    padding: 4px 6px;
    font-size: 13px;
    font-family: var(--font-mono);
    background: var(--bg-input);
    color: #ff9800;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    text-align: right;
    outline: none;
}

.track-editor-param-row .param-value-input:focus {
    border-color: #ff9800;
}

.track-editor-param-row .param-unit {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 24px;
}

/* 操作按钮 */
.track-editor-action-btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    transition: all 0.12s;
    text-align: center;
}

.track-editor-action-btn:hover:not(:disabled) {
    border-color: var(--text-muted);
}

.track-editor-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.track-editor-action-btn.btn-add {
    background: rgba(76, 175, 80, 0.15);
    border-color: var(--accent-green);
    color: var(--accent-green);
    margin-top: 12px;
}

.track-editor-action-btn.btn-add:hover:not(:disabled) {
    background: rgba(76, 175, 80, 0.3);
}

.track-editor-action-btn.btn-delete {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.track-editor-action-btn.btn-delete:hover:not(:disabled) {
    background: rgba(255, 152, 0, 0.15);
}

.track-editor-action-btn.btn-clear {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.track-editor-action-btn.btn-clear:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.15);
}

.track-editor-action-btn.btn-restore {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.track-editor-action-btn.btn-restore:hover:not(:disabled) {
    background: rgba(0, 188, 212, 0.15);
}

.track-editor-action-btn.btn-apply {
    background: rgba(255, 152, 0, 0.15);
    border-color: #ff9800;
    color: #ff9800;
    font-weight: 600;
}

.track-editor-action-btn.btn-apply:hover:not(:disabled) {
    background: rgba(255, 152, 0, 0.3);
}

/* ---- Phase 27: 赛道导入/导出按钮 ---- */
#track-editor-io {
    flex-shrink: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

#track-editor-io-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.track-editor-action-btn.btn-export {
    background: rgba(33, 150, 243, 0.1);
    border-color: #2196f3;
    color: #64b5f6;
    font-size: 11px;
}

.track-editor-action-btn.btn-export:hover:not(:disabled) {
    background: rgba(33, 150, 243, 0.25);
}

.track-editor-action-btn.btn-import {
    background: rgba(156, 39, 176, 0.1);
    border-color: #9c27b0;
    color: #ce93d8;
    font-size: 11px;
}

.track-editor-action-btn.btn-import:hover:not(:disabled) {
    background: rgba(156, 39, 176, 0.25);
}

/* 右侧：模块列表 */
#track-editor-module-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px;
    min-width: 0;
}

#track-editor-module-list h4 {
    font-size: 12px;
    color: var(--accent-cyan);
    margin-bottom: 8px;
    flex-shrink: 0;
}

/* 模块列表项 */
#track-editor-module-items {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.track-editor-module-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-primary);
}

.track-editor-module-item .item-index {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    min-width: 20px;
}

.track-editor-module-item .item-icon {
    font-size: 16px;
}

.track-editor-module-item .item-name {
    color: var(--accent-green);
    font-weight: 500;
}

.track-editor-module-item .item-summary {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
}

.track-editor-empty {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* 操作区 */
#track-editor-actions {
    flex-shrink: 0;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#track-editor-actions .track-editor-action-btn {
    flex: 1;
    min-width: 100px;
    margin-top: 0;
    padding: 6px 8px;
    font-size: 12px;
}

/* 校验状态 */
#track-editor-validation {
    flex-shrink: 0;
    margin-top: 8px;
    font-size: 12px;
}

.track-editor-validation-ok {
    color: var(--accent-green);
    padding: 6px 10px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
}

.track-editor-validation-error {
    color: var(--accent-red);
    padding: 6px 10px;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 4px;
}

.track-editor-validation-error p {
    margin: 2px 0;
}

/* Phase 21: 赛道状态显示 */
.track-editor-status-default {
    color: var(--text-secondary);
    padding: 6px 10px;
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: 4px;
}

.track-editor-status-preview {
    color: var(--accent-yellow);
    padding: 6px 10px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 4px;
}

.track-editor-status-applied {
    color: var(--accent-green);
    padding: 6px 10px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
}

.track-editor-status-invalid {
    color: var(--accent-red);
    padding: 6px 10px;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 4px;
}

/* ===== Phase 22: 调试摆车模式 ===== */

#canvas-track.debug-pose-mode {
    cursor: grab;
}

#canvas-track.debug-pose-mode:active {
    cursor: grabbing;
}

/* 调试摆车模式状态提示 */
#debug-pose-status {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(255, 152, 0, 0.85);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
    pointer-events: none;
}

/* ================================================================
   Phase 26: Debug UI 样式
   ================================================================ */

/* Debug 控制栏 */
#debug-control-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.btn-debug-pause,
.btn-debug-continue,
.btn-debug-step,
.btn-debug-clear {
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-debug-pause:hover,
.btn-debug-continue:hover,
.btn-debug-step:hover,
.btn-debug-clear:hover {
    background: var(--accent-blue);
    color: #fff;
}

.btn-debug-pause:disabled,
.btn-debug-continue:disabled,
.btn-debug-step:disabled,
.btn-debug-clear:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.debug-status-text {
    margin-left: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* Debug 信息面板容器 */
#debug-info-panels {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 250px;
    overflow-y: auto;
}

.debug-info-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px;
    font-size: 12px;
}

.debug-info-panel h3 {
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--accent-cyan);
}

.debug-info-panel h4 {
    font-size: 11px;
    margin: 4px 0 2px 0;
    color: var(--text-secondary);
}

/* 调用栈列表 */
#call-stack-list {
    font-family: var(--font-mono);
    font-size: 11px;
    max-height: 120px;
    overflow-y: auto;
}

.call-stack-frame {
    padding: 1px 4px;
    border-left: 2px solid var(--border-color);
    margin-bottom: 2px;
    color: var(--text-primary);
    cursor: pointer;
}

.call-stack-frame:hover {
    background: var(--bg-tertiary);
    border-left-color: var(--accent-blue);
}

.call-stack-frame .cs-func {
    color: var(--accent-yellow);
    font-weight: bold;
}

.call-stack-frame .cs-loc {
    color: var(--text-muted);
    margin-left: 6px;
}

/* 变量列表 */
#variables-global-list,
#variables-local-list {
    font-family: var(--font-mono);
    font-size: 11px;
    max-height: 80px;
    overflow-y: auto;
}

.var-item {
    padding: 1px 4px;
    border-bottom: 1px solid rgba(64,64,96,0.3);
    display: flex;
    gap: 6px;
}

.var-name {
    color: var(--accent-cyan);
    min-width: 60px;
}

.var-type {
    color: var(--text-muted);
    font-size: 10px;
    min-width: 40px;
}

.var-value {
    color: var(--text-primary);
    word-break: break-all;
    flex: 1;
}

.var-ptr {
    color: var(--accent-yellow);
}

/* CodeMirror 断点 gutter 样式 */
.breakpoint-gutter {
    width: 16px;
}

.breakpoint-marker {
    color: var(--accent-red);
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

/* CodeMirror 当前执行行高亮 */
.debug-current-line {
    background-color: rgba(255, 152, 0, 0.25) !important;
}

/* CodeMirror 断点行高亮 */
.debug-breakpoint-line {
    background-color: rgba(244, 67, 54, 0.15);
}

/* ================================================================
   Phase 29: 教程模式与使用说明面板骨架
   ================================================================ */

/* 教程按钮高亮 */
#btn-tutorial {
    background: var(--accent-green) !important;
    color: #fff !important;
    border-color: var(--accent-green) !important;
}

#btn-tutorial:hover {
    background: #388e3c !important;
}

/* 遮罩层 — z-index 必须高于全屏编辑器容器的 10000 */
#tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10010;
}

/* 抽屉面板 — z-index 必须高于全屏编辑器容器的 10000 */
#tutorial-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 600px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    z-index: 10011;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* 面板头部 — 标签切换 + 关闭按钮 */
#tutorial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

#tutorial-tabs {
    display: flex;
    gap: 4px;
}

.tutorial-tab {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.tutorial-tab:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.tutorial-tab.active {
    background: var(--bg-primary);
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

#tutorial-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

#btn-close-tutorial {
    padding: 4px 10px;
    font-size: 14px;
    font-weight: bold;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

#btn-close-tutorial:hover {
    background: var(--accent-red);
    color: #fff;
}

/* 面板主体视图 */
.tutorial-panel-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* 使用说明视图 - 允许滚动 */
#usage-view {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#usage-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary);
}

/* ===== 教程视图：左侧步骤导航 + 右侧内容 ===== */
#tutorial-step-nav {
    width: 180px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    padding: 8px 0;
    background: var(--bg-primary);
}

#tutorial-step-nav h4 {
    font-size: 12px;
    color: var(--accent-cyan);
    padding: 8px 12px;
    margin: 0;
}

.tutorial-step-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    border-left: 3px solid transparent;
    white-space: nowrap;
}

.tutorial-step-nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.tutorial-step-nav-item.active {
    background: var(--bg-tertiary);
    color: var(--accent-green);
    border-left-color: var(--accent-green);
    font-weight: 500;
}

.tutorial-step-nav-item .step-number {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    min-width: 20px;
}

/* 教程步骤内容区 */
#tutorial-step-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
}

#tutorial-step-content h3 {
    font-size: 15px;
    color: var(--accent-green);
    margin-bottom: 12px;
}

#tutorial-step-content h4 {
    font-size: 13px;
    color: var(--accent-cyan);
    margin: 12px 0 6px 0;
}

#tutorial-step-content p {
    margin-bottom: 8px;
    color: var(--text-secondary);
}

#tutorial-step-content ul {
    margin: 8px 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

#tutorial-step-content ul li {
    margin-bottom: 4px;
}

#tutorial-step-content strong {
    color: var(--text-primary);
}

/* 教程步骤操作按钮区 */
#tutorial-step-actions {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tutorial-action-btn {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    transition: all 0.12s;
    white-space: nowrap;
}

.tutorial-action-btn:hover:not(:disabled) {
    border-color: var(--text-muted);
}

.tutorial-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tutorial-action-btn.btn-insert {
    background: rgba(76, 175, 80, 0.15);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.tutorial-action-btn.btn-insert:hover:not(:disabled) {
    background: rgba(76, 175, 80, 0.3);
}

.tutorial-action-btn.btn-reset-step {
    background: rgba(255, 152, 0, 0.15);
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.tutorial-action-btn.btn-reset-step:hover:not(:disabled) {
    background: rgba(255, 152, 0, 0.3);
}

.tutorial-action-btn.btn-back {
    background: rgba(33, 150, 243, 0.15);
    border-color: var(--accent-blue);
    color: #64b5f6;
}

.tutorial-action-btn.btn-back:hover:not(:disabled) {
    background: rgba(33, 150, 243, 0.3);
}

/* 教程代码预览区 */
.tutorial-code-preview {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-input);
    color: var(--accent-green);
    padding: 10px 14px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin: 8px 0;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}

/* ===== 使用说明视图 ===== */
#usage-content {
    padding: 20px 24px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary);
}

#usage-content h3 {
    font-size: 18px;
    color: var(--accent-cyan);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

#usage-content > p {
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.usage-module-card {
    background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(42, 42, 62, 0.8) 100%);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.usage-module-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.1);
    transform: translateY(-1px);
}

.usage-module-card:last-child {
    margin-bottom: 0;
}

.usage-module-card h4 {
    font-size: 14px;
    color: var(--accent-cyan);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.usage-module-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
    line-height: 1.6;
}

.usage-module-card ul,
.usage-module-card ol {
    margin: 8px 0;
    padding-left: 20px;
}

.usage-module-card li {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    line-height: 1.5;
}

.usage-module-card li strong {
    color: var(--text-primary);
}

.usage-module-card code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-green);
}

/* 当教程面板打开时，确保不遮挡主赛道和摄像头关键区域 */
/* 抽屉面板在右侧 (right: 0)，自然不遮挡左侧的赛道/摄像头区域 */

/* ================================================================
   Phase 30: 教程内容区块样式
   ================================================================ */

/* 内容区块分隔 */
.tutorial-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(64, 64, 96, 0.4);
}

.tutorial-section h4 {
    font-size: 13px;
    color: var(--accent-cyan);
    margin: 0 0 6px 0;
}

.tutorial-section p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0;
    line-height: 1.6;
}

.tutorial-section ul {
    margin: 6px 0;
    padding-left: 18px;
}

.tutorial-section ul li {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 3px;
    line-height: 1.5;
}

.tutorial-follow-list {
    margin: 4px 0 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

.tutorial-follow-list li {
    margin-bottom: 5px;
    padding-left: 2px;
    font-size: 12px;
    line-height: 1.55;
}

.tutorial-follow-list li:last-child { margin-bottom: 0; }

.tutorial-follow-list li::marker {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 600;
}

.tutorial-pipeline-stage strong { color: var(--accent); }

.tutorial-info-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(128, 144, 176, 0.22);
    border-radius: 6px;
    padding: 10px 14px !important;
}

.tutorial-observation-table {
    display: grid;
    gap: 1px;
    min-width: 0;
    background: rgba(96, 112, 144, 0.22);
    border: 1px solid rgba(96, 112, 144, 0.28);
    border-radius: 6px;
    overflow: hidden;
}

.tutorial-observation-row {
    display: grid;
    grid-template-columns: minmax(82px, 0.38fr) minmax(0, 1fr);
    gap: 8px;
    padding: 7px 9px;
    min-width: 0;
    background: var(--bg-panel);
    font-size: 12px;
    line-height: 1.45;
}

.tutorial-observation-row strong { color: var(--accent-cyan); }
.tutorial-observation-row span { min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }

@media (max-width: 900px) {
    .tutorial-observation-row { grid-template-columns: 1fr; gap: 2px; }
}

/* API 引用分类点击样式 */
.api-ref-category {
    color: var(--accent-cyan);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    transition: color 0.15s;
}

.api-ref-category:hover {
    color: var(--accent-green);
    text-decoration-style: solid;
}

/* 仿真/现实差异区块 */
.tutorial-sim-vs-real {
    background: rgba(0, 188, 212, 0.06);
    border: 1px solid rgba(0, 188, 212, 0.2);
    border-radius: 6px;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
}

.tutorial-sim-vs-real h4 {
    color: var(--accent-cyan) !important;
}

.tutorial-sim-vs-real ul li {
    color: var(--text-primary) !important;
    font-size: 12px;
}

/* 警告声明区块（Step 4-8 的重要说明） */
.tutorial-warning {
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.25);
    border-radius: 6px;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
}

.tutorial-warning h4 {
    color: var(--accent-yellow) !important;
}

.tutorial-warning p {
    color: var(--text-primary) !important;
    font-size: 12px;
    line-height: 1.6;
}

/* 选择题区块 */
.tutorial-quiz-section {
    background: rgba(33, 150, 243, 0.06);
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 6px;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
}

.tutorial-quiz-section h4 {
    color: var(--accent-blue) !important;
}

.tutorial-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
}

.tutorial-quiz-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
    transition: background 0.12s;
}

.tutorial-quiz-option:hover {
    background: rgba(33, 150, 243, 0.1);
}

.tutorial-quiz-option input[type="radio"] {
    accent-color: var(--accent-blue);
}

.tutorial-quiz-result {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
}

.tutorial-quiz-correct {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: var(--accent-green);
}

.tutorial-quiz-incorrect {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.25);
    color: var(--accent-red);
}

.tutorial-quiz-pending {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.25);
    color: var(--accent-yellow);
}

/* 检查反馈区 */
.tutorial-check-feedback {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-top: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.tutorial-check-feedback.check-warning {
    border-color: var(--accent-yellow);
    background: rgba(255, 152, 0, 0.06);
}

/* ===== Phase 33: 非评分建议状态 ===== */
.suggestion-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}

.suggestion-badge.suggestion-unchecked {
    background: rgba(158, 158, 158, 0.15);
    color: #9e9e9e;
    border: 1px solid rgba(158, 158, 158, 0.3);
}

.suggestion-badge.suggestion-supplement {
    background: rgba(255, 152, 0, 0.12);
    color: #e68900;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.suggestion-badge.suggestion-done {
    background: rgba(76, 175, 80, 0.12);
    color: #388e3c;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

/* 教程步骤导航中的状态标签 */
.tutorial-step-nav-item .suggestion-badge {
    font-size: 9px;
    padding: 1px 5px;
    margin-left: 6px;
    flex-shrink: 0;
}

/* 建议状态设置按钮 */
.suggestion-set-btn {
    font-size: 11px;
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

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

/* 建议状态区 */
.tutorial-suggestion-status {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px 12px;
}

.check-group {
    margin-bottom: 10px;
}

.check-group p {
    margin: 4px 0;
}

.check-group ul {
    margin: 4px 0;
    padding-left: 16px;
    list-style: none;
}

.check-group ul li {
    margin-bottom: 2px;
    padding: 2px 0;
    font-size: 12px;
}

.check-pass {
    color: var(--accent-green) !important;
}

.check-fail {
    color: var(--accent-yellow) !important;
}

.check-info {
    color: var(--text-muted) !important;
    font-style: italic;
}

.check-uncertain {
    color: var(--text-muted) !important;
}

/* 检查按钮样式 */
.tutorial-action-btn.btn-check {
    background: rgba(0, 188, 212, 0.15);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.tutorial-action-btn.btn-check:hover:not(:disabled) {
    background: rgba(0, 188, 212, 0.3);
}

/* 全屏编辑时教程/使用说明面板置顶 — 基础 z-index 已在 #tutorial-overlay (10010) 和 #tutorial-drawer (10011) 上设置，
   确保始终高于全屏编辑器容器 (.fullscreen z-index: 10000) */
#tutorial-drawer #tutorial-step-actions {
    /* 步骤操作按钮继承父级 z-index，无需额外提升 */
}

/* ================================================================
   Phase 31: 独立教程页样式
   ================================================================ */

/* 教程模式页面级别样式 */
body.tutorial-mode #header-bar {
    border-bottom: 1px solid var(--accent-green);
}

body.tutorial-mode #header-bar h1 {
    color: var(--accent-green);
}

/* 教程模式状态面板提示 */
.tutorial-status-hint {
    color: var(--accent-yellow) !important;
    margin-top: 4px;
    font-size: 11px;
}

/* 教程页文件栏运行入口提示 */
#tutorial-main-file-hint {
    font-size: 11px;
    color: var(--accent-yellow);
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    border-left: 1px solid var(--border-color);
    margin-left: 4px;
}

/* 教程页按钮: "返回练习页" 链接样式 */
#btn-tutorial.tutorial-back-link {
    background: var(--accent-blue) !important;
    color: #fff !important;
    border-color: var(--accent-blue) !important;
}

#btn-tutorial.tutorial-back-link:hover {
    background: #1565c0 !important;
}

/* 教程模式抽屉面板强调独立状态 */
body.tutorial-mode #tutorial-drawer {
    border-left: 2px solid var(--accent-green);
}

body.tutorial-mode #btn-tutorial {
    /* 教程页中教程按钮变为返回练习页 */
    background: var(--accent-blue) !important;
    color: #fff !important;
    border-color: var(--accent-blue) !important;
}

body.tutorial-mode #btn-tutorial:hover {
    background: #1565c0 !important;
}

/* ================================================================
   Phase 32: 教程优先布局 — 四列：左栏 | 编辑器 | 观察列 | 任务栏
   ================================================================ */

/* 隐藏普通工具页的 main-content（教程页不使用） */
body.tutorial-mode #main-content {
    display: none !important;
}

/* 教程页保留 footer 中的 console-container（代码输出/系统日志必须可见） */
/* 注意：不再隐藏 #console-container，教程页的 console 在编辑器底部可见 */

/* ===== 教程工作区主容器 ===== */
#tutorial-workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* 四列布局行（左栏 + 编辑器 + 观察列 + 任务栏） */
#tutorial-columns {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
}

/* ===== 左侧窄栏（加宽） ===== */
#tutorial-left-rail {
    flex: 16 1 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    overflow-x: hidden;
}

/* 教程页左右栏折叠控制 */
.tutorial-panel-toggle {
    width: 100%;
    min-height: 32px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: rgba(97, 175, 239, 0.08);
    color: var(--text-secondary);
    font: 600 11px var(--font-sans);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tutorial-panel-toggle:hover {
    color: var(--accent-cyan);
    background: rgba(97, 175, 239, 0.16);
}

.tutorial-panel-toggle:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: -2px;
}

.tutorial-toggle-icon {
    color: var(--accent-cyan);
    font-size: 18px;
    line-height: 1;
}

/* 步骤导航 */
#tutorial-step-nav {
    width: 99%;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    padding: 4px 0;
}

#tutorial-step-nav h4 {
    font-size: 12px;
    color: var(--accent-cyan);
    padding: 4px 8px 4px;
    margin: 0;
}

.tutorial-step-nav-item {
    display: block;
    padding: 5px 8px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    border-left: 3px solid transparent;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-indent: -4em;
    padding-left: 4em;
}

.tutorial-step-nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.tutorial-step-nav-item.active {
    background: var(--bg-tertiary);
    color: var(--accent-green);
    border-left-color: var(--accent-green);
    font-weight: 500;
}

.tutorial-step-nav-item .step-number {
    display: none;
}

/* 文件列表区 */
#tutorial-file-section {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
}

#tutorial-file-section #file-bar {
    height: auto;
    flex-direction: column;
}

#tutorial-file-section #file-bar-tabs {
    flex-direction: column;
    overflow-x: hidden;
}

#tutorial-file-section .file-tab {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 5px 10px;
}

#tutorial-file-section #file-bar-actions {
    padding: 4px 6px;
    gap: 3px;
    flex-wrap: wrap;
}

#tutorial-file-section .file-bar-btn {
    padding: 2px 6px;
    font-size: 10px;
}

/* 函数库快速入口 */
#tutorial-func-lib-section {
    flex-shrink: 0;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

/* 高级工具区 */
#tutorial-advanced-section {
    flex-shrink: 0;
    padding: 6px 8px;
}

.rail-action-btn {
    display: block;
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    text-align: left;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s;
    margin-bottom: 4px;
}

.rail-action-btn:hover {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.rail-action-btn.rail-accent {
    background: rgba(0, 188, 212, 0.15);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.rail-action-btn.rail-accent:hover {
    background: var(--accent-cyan);
    color: #fff;
}

#tutorial-advanced-tools {
    margin-top: 4px;
}

/* ===== 中间编辑器区 ===== */
#editor-area {
    flex: 32 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid var(--border-color);
}

#editor-area #editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-bottom: none;
}

/* 编辑器底部的代码输出/系统日志 */
#editor-area #console-container {
    flex-shrink: 0;
    height: 200px;
    border-top: 1px solid var(--border-color);
}

#editor-area #code-output-container {
    height: 100%;
}

#editor-area #code-output {
    font-size: 11px;
    padding: 4px 8px;
}

#editor-area #editor-header {
    flex-shrink: 0;
}

#editor-area #ide-editor-container {
    flex: 1;
    min-height: 0;
}

#editor-area #fullscreen-topbar,
#editor-area #fullscreen-body {
    /* 全屏模式由 JS 控制显示 */
}

/* 隐藏编辑器区内的文件栏（文件栏在左侧窄栏中） */
#editor-area > #editor-container > #file-bar {
    display: none;
}

/* ===== 右侧任务栏 ===== */
#tutorial-task-panel {
    flex: 23 1 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    overflow: hidden;
}

#tutorial-left-rail,
#tutorial-task-panel {
    transition: flex-basis 0.2s ease, width 0.2s ease, min-width 0.2s ease;
}

#tutorial-step-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
}

#tutorial-step-content h3 {
    font-size: 14px;
    color: var(--accent-green);
    margin-bottom: 10px;
}

#tutorial-step-content h4 {
    font-size: 13px;
    color: var(--accent-cyan);
    margin: 10px 0 5px 0;
}

#tutorial-step-content p {
    margin-bottom: 6px;
    color: var(--text-secondary);
}

#tutorial-step-content ul {
    margin: 6px 0;
    padding-left: 18px;
    color: var(--text-secondary);
}

#tutorial-step-content ul li {
    margin-bottom: 3px;
    font-size: 12px;
}

#tutorial-step-content strong {
    color: var(--text-primary);
}

/* 教程步骤操作按钮 */
#tutorial-step-actions {
    margin-top: auto;
    padding: 8px 14px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

#tutorial-step-actions .tutorial-action-btn {
    padding: 6px 10px;
    font-size: 11px;
}

/* 检查反馈区 */
#tutorial-check-feedback {
    padding: 8px 14px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    max-height: 200px;
    overflow-y: auto;
}

/* ===== 观察列（编辑器右侧） ===== */
#tutorial-observation-column {
    flex: 29 1 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    overflow: hidden;
}

#tutorial-observation-column #sim-container {
    flex: 1;
    min-height: 0;
    border-bottom: 1px solid var(--border-color);
}

#tutorial-observation-column #track-view {
    flex: 55;
    min-height: 200px;
}

#tutorial-observation-column #camera-view {
    flex: 45;
    min-height: 150px;
}

#tutorial-observation-column #control-bar {
    flex-shrink: 0;
    padding: 4px 8px;
    gap: 4px;
    flex-wrap: wrap;
}

#tutorial-observation-column .ctrl-btn {
    padding: 3px 8px;
    font-size: 11px;
    white-space: nowrap;
}

#tutorial-observation-column #debug-control-bar {
    flex-shrink: 0;
    padding: 2px 6px;
}

#tutorial-observation-column #debug-control-bar .ctrl-btn {
    padding: 2px 6px;
    font-size: 10px;
}

/* 观察列状态面板 */
#tutorial-observation-column #status-panel {
    flex-shrink: 0;
    max-height: 120px;
    overflow-y: auto;
    padding: 4px 8px;
    font-size: 11px;
}
#tutorial-observation-column #status-table tbody { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }

#tutorial-observation-column #status-panel h3 {
    font-size: 11px;
    margin-bottom: 4px;
}

#tutorial-observation-column #status-table {
    font-size: 11px;
}

#tutorial-observation-column .s-label {
    width: auto;
    padding-right: 6px;
}

#tutorial-observation-column .s-value {
    width: auto;
}

#tutorial-observation-column #debug-leds {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 8px;
    padding-bottom: 0;
    border-bottom: none;
    vertical-align: top;
}

#tutorial-observation-column #debug-leds h3 {
    font-size: 11px;
}

#tutorial-observation-column .debug-led {
    width: 14px;
    height: 14px;
}

#tutorial-observation-column #system-log-container {
    font-size: 11px;
}

/* 隐藏观察列不需要的元素 */
#tutorial-observation-column #dev-mode-badge,
#tutorial-observation-column #manual-control,
#tutorial-observation-column #debug-info-panels {
    display: none !important;
}

/* ===== 全屏编辑适配 ===== */
body.tutorial-mode #ide-editor-container.fullscreen {
    z-index: 10000;
}

/* 全屏时右侧任务栏仍可见（通过全屏侧栏的教程按钮） */
body.tutorial-mode #fullscreen-sidebar {
    width: 200px;
}

body.tutorial-mode #fullscreen-sidebar .sidebar-title {
    color: var(--accent-green);
}

/* ===== 响应式约束 ===== */

/* 1366px 宽度 */
@media (max-width: 1366px) {
    #tutorial-left-rail {
        width: 220px;
    }

    #tutorial-observation-column {
        width: 340px;
    }

    #tutorial-task-panel {
        width: 240px;
    }
}

/* 1024px 宽度 */
@media (max-width: 1024px) {
    #tutorial-left-rail {
        width: 180px;
    }

    #tutorial-observation-column {
        width: 280px;
    }

    #tutorial-task-panel {
        width: 200px;
    }

    #tutorial-step-content {
        padding: 8px 10px;
        font-size: 12px;
    }

    #tutorial-observation-column .ctrl-btn {
        padding: 3px 6px;
        font-size: 10px;
    }

    #tutorial-observation-column #track-view {
        min-height: 140px;
    }

    #tutorial-observation-column #camera-view {
        min-height: 100px;
    }

    #editor-area #console-container {
        height: 100px;
    }
}

/* 800px 宽度 */
@media (max-width: 800px) {
    #tutorial-workspace {
        flex-direction: column;
    }

    #tutorial-columns {
        flex-direction: column;
        overflow-y: auto;
    }

    #tutorial-left-rail {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 80px;
    }

    #tutorial-step-nav {
        border-bottom: none;
        border-right: 1px solid var(--border-color);
        flex: 1;
        min-width: 150px;
    }

    #tutorial-file-section {
        border-bottom: none;
        border-right: 1px solid var(--border-color);
        flex: 0 0 auto;
    }

    #tutorial-func-lib-section {
        border-bottom: none;
        flex: 0 0 auto;
    }

    #tutorial-advanced-section {
        flex: 0 0 auto;
    }

    #editor-area {
        flex: none;
        width: 100%;
        min-height: 300px;
        border-right: none;
    }

    #tutorial-observation-column {
        width: 100%;
        height: 300px;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    #tutorial-task-panel {
        width: 100%;
        max-height: 250px;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    #tutorial-observation-column {
        height: 200px;
    }
}

/* ===== 横向滚动约束 ===== */
body.tutorial-mode {
    overflow-x: hidden;
}

body.tutorial-mode #tutorial-workspace {
    overflow-x: hidden;
}

body.tutorial-mode #tutorial-left-rail {
    overflow-x: hidden;
}

body.tutorial-mode #editor-area {
    overflow-x: hidden;
}

body.tutorial-mode #tutorial-task-panel {
    overflow-x: hidden;
}

/* 折叠后保留一条可随时展开的窄控制栏，中间工作区自动获得空间。 */
body.tutorial-mode.tutorial-left-collapsed #tutorial-left-rail,
body.tutorial-mode.tutorial-task-collapsed #tutorial-task-panel {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    overflow: hidden;
}

body.tutorial-mode.tutorial-left-collapsed #tutorial-left-rail > :not(.tutorial-panel-toggle),
body.tutorial-mode.tutorial-task-collapsed #tutorial-task-panel > :not(.tutorial-panel-toggle) {
    display: none !important;
}

body.tutorial-mode.tutorial-left-collapsed .tutorial-left-toggle,
body.tutorial-mode.tutorial-task-collapsed .tutorial-task-toggle {
    flex: 1;
    height: 100%;
    min-height: 0;
    padding: 10px 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 9px;
    border-bottom: 0;
}

body.tutorial-mode.tutorial-left-collapsed .tutorial-left-toggle .tutorial-toggle-label,
body.tutorial-mode.tutorial-task-collapsed .tutorial-task-toggle .tutorial-toggle-label {
    writing-mode: vertical-rl;
    letter-spacing: 2px;
}

body.tutorial-mode.tutorial-task-collapsed #ide-editor-container.fullscreen {
    right: 38px;
}

@media (max-width: 800px) {
    body.tutorial-mode.tutorial-left-collapsed #tutorial-left-rail,
    body.tutorial-mode.tutorial-task-collapsed #tutorial-task-panel {
        flex: 0 0 36px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 36px;
    }

    body.tutorial-mode.tutorial-left-collapsed .tutorial-left-toggle,
    body.tutorial-mode.tutorial-task-collapsed .tutorial-task-toggle {
        flex-direction: row;
        padding: 5px 10px;
    }

    body.tutorial-mode.tutorial-left-collapsed .tutorial-left-toggle .tutorial-toggle-label,
    body.tutorial-mode.tutorial-task-collapsed .tutorial-task-toggle .tutorial-toggle-label {
        writing-mode: horizontal-tb;
        letter-spacing: 0;
    }
}

/* 任务栏文本换行约束 */
#tutorial-step-content {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 文件名换行约束 */
.file-tab .file-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 按钮文本不换行但可截断 */
.rail-action-btn {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 检查反馈文本换行 */
#tutorial-check-feedback {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ==================================================================
   Tutorial Workbench V3 — VS Code Dark Modern
   Figma source: SmartCar Simulation / Tutorial Workbench V3 (32:928)
   ================================================================== */
body.tutorial-mode {
    --bg-primary: #181818;
    --bg-secondary: #1f1f1f;
    --bg-tertiary: #2a2d2e;
    --bg-input: #1e1e1e;
    --text-primary: #cccccc;
    --text-secondary: #b3b3b3;
    --text-muted: #858585;
    --border-color: #37373d;
    --accent-green: #89d185;
    --accent-red: #f14c4c;
    --accent-yellow: #cca700;
    --accent-blue: #007acc;
    --accent-cyan: #4fc1ff;
    --accent-orange: #ce9178;
    background: #181818;
    color: var(--text-primary);
}

body.tutorial-mode #header-bar {
    position: relative;
    height: 40px;
    padding: 0 10px;
    justify-content: flex-start;
    gap: 12px;
    background: #181818;
    border-bottom-color: #2b2b2b;
    color: #cccccc;
}

body.tutorial-mode .workbench-brand {
    width: 236px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

body.tutorial-mode .workbench-brand-mark {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #007acc;
    color: #fff;
    font: 700 10px/1 var(--font-ui);
    letter-spacing: -.3px;
}

body.tutorial-mode #header-bar h1 {
    color: #e7e7e7;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

body.tutorial-mode .workbench-command-center {
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    min-width: 330px;
    height: 28px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    background: #242424;
    color: #a6a6a6;
    font-size: 12px;
}

body.tutorial-mode .workbench-command-center strong { color: #d7d7d7; font-weight: 500; }
body.tutorial-mode .workbench-breadcrumb-separator { color: #6f6f6f; }

body.tutorial-mode .tutorial-route-switch {
    height: 28px;
    margin-left: auto;
    padding: 2px;
    border-color: #3a3a3a;
    border-radius: 5px;
    background: #242424;
}

body.tutorial-mode .tutorial-route-switch .mode-switch-label { display: none; }

body.tutorial-mode .tutorial-route-switch button {
    min-height: 22px;
    padding: 2px 9px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #a7a7a7;
    font-size: 11px;
}

body.tutorial-mode .tutorial-route-switch button[aria-pressed="true"] {
    background: #3a3d41;
    color: #fff;
}

body.tutorial-mode #build-status {
    width: auto;
    margin: 0;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(137, 209, 133, .1);
    color: #89d185;
    font-size: 11px;
    white-space: nowrap;
}

body.tutorial-mode #tutorial-workspace {
    height: calc(100vh - 40px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) 22px;
    background: #181818;
}

body.tutorial-mode #tutorial-columns {
    --tutorial-left-width: 380px;
    --tutorial-task-width: 320px;
    --tutorial-lower-height: 46%;
    --tutorial-console-height: 220px;
    min-width: 0;
    position: relative;
    display: grid;
    grid-template-columns: 48px var(--tutorial-left-width) minmax(0, 1fr) var(--tutorial-task-width);
    grid-template-rows: minmax(300px, 1fr) var(--tutorial-lower-height);
    overflow: hidden;
}

/* Activity bar */
body.tutorial-mode #workbench-activity-bar {
    grid-column: 1;
    grid-row: 1 / 3;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #181818;
    border-right: 1px solid #2b2b2b;
}

body.tutorial-mode .workbench-activity-main { display: flex; flex-direction: column; }

body.tutorial-mode .workbench-activity-btn {
    position: relative;
    width: 47px;
    height: 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #858585;
    font: 400 23px/1 var(--font-ui);
    cursor: pointer;
}

body.tutorial-mode .workbench-activity-btn:hover { color: #d4d4d4; background: #222; }
body.tutorial-mode .workbench-activity-btn.active { color: #fff; }
body.tutorial-mode .workbench-activity-btn.active::before {
    content: '';
    position: absolute;
    inset: 6px auto 6px 0;
    width: 2px;
    background: #007acc;
}

/* Left composite: simulation above, tutorial explorer below */
body.tutorial-mode #tutorial-observation-column {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    border: 0;
    border-right: 1px solid #2b2b2b;
    border-bottom: 1px solid #2b2b2b;
    background: #111;
    overflow: visible;
}

body.tutorial-mode #tutorial-observation-column::before {
    content: '仿真视图';
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #1f1f1f;
    border-bottom: 1px solid #2b2b2b;
    color: #bbbbbb;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

body.tutorial-mode #tutorial-observation-column #sim-container {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 58% 42%;
    border-bottom: 1px solid #2b2b2b;
    background: #090909;
}

body.tutorial-mode #tutorial-observation-column #track-view,
body.tutorial-mode #tutorial-observation-column #camera-view {
    min-width: 0;
    min-height: 0;
    height: auto;
    border: 0;
    background: #090909;
}

body.tutorial-mode #tutorial-observation-column #track-view { border-right: 1px solid #2b2b2b; }
body.tutorial-mode #tutorial-observation-column #track-view canvas,
body.tutorial-mode #tutorial-observation-column #camera-view canvas { max-width: 100%; max-height: 100%; }

body.tutorial-mode #camera-distance-control {
    left: 8px;
    right: 8px;
    bottom: 5px;
    width: auto;
    padding: 3px 5px;
    background: rgba(24,24,24,.86);
    border-radius: 3px;
    font-size: 9px;
}

body.tutorial-mode #camera-distance-control input { min-width: 50px; }
body.tutorial-mode #inductor-view { overflow: auto; }

body.tutorial-mode #tutorial-observation-column #control-bar {
    position: relative;
    flex: 0 0 72px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, auto));
    grid-template-rows: 32px 24px;
    align-content: center;
    justify-content: start;
    gap: 4px;
    padding: 6px 8px 5px;
    background: #1f1f1f;
    border: 0;
    overflow: visible;
}

body.tutorial-mode #tutorial-observation-column #control-bar > .ctrl-btn,
body.tutorial-mode #btn-more-runtime-controls {
    height: 28px;
    padding: 0 9px;
    border: 1px solid #454545;
    border-radius: 3px;
    background: #2d2d30;
    color: #cccccc;
    font: 12px/26px var(--font-ui);
}

body.tutorial-mode #control-bar > #btn-run:not(:disabled) { background: #176f2c; border-color: #238636; color: #fff; }
body.tutorial-mode #control-bar > #btn-compile:not(:disabled) { background: #0e639c; border-color: #1177bb; color: #fff; }
body.tutorial-mode #control-bar > #btn-estop { border-color: #8d3434; color: #ffb3b3; }
body.tutorial-mode #control-bar > #btn-estop:not(:disabled) { background: #a1260d; color: #fff; }

body.tutorial-mode #runtime-controls-menu-wrap { position: relative; height: 28px; }

body.tutorial-mode #ctrl-status {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 2px 0 0;
    color: #858585;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.tutorial-mode #tutorial-left-rail {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    width: auto;
    min-width: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-right: 1px solid #2b2b2b;
    background: #181818;
}

body.tutorial-mode #tutorial-left-tabs {
    height: 35px;
    display: flex;
    align-items: end;
    gap: 16px;
    padding: 0 42px 0 12px;
    background: #1f1f1f;
    border-bottom: 1px solid #2b2b2b;
}

body.tutorial-mode #tutorial-left-tabs button {
    position: relative;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #969696;
    font: 11px/34px var(--font-ui);
    cursor: pointer;
}

body.tutorial-mode #tutorial-left-tabs button.active { color: #fff; }
body.tutorial-mode #tutorial-left-tabs button.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #007acc;
}

body.tutorial-mode #tutorial-left-rail .tutorial-panel-toggle {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    width: 30px;
    min-height: 35px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #1f1f1f;
}

body.tutorial-mode #tutorial-left-rail .tutorial-toggle-label { display: none; }
body.tutorial-mode #tutorial-step-nav,
body.tutorial-mode #tutorial-file-section,
body.tutorial-mode #tutorial-func-lib-section,
body.tutorial-mode #tutorial-advanced-section { flex: 1 1 auto; min-height: 0; }

body.tutorial-mode #tutorial-step-nav {
    width: 100%;
    padding: 5px 0;
    overflow-y: auto;
    border: 0;
}

body.tutorial-mode #tutorial-step-nav h4 {
    padding: 7px 12px;
    color: #bbbbbb;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

body.tutorial-mode .tutorial-step-nav-item {
    min-height: 30px;
    padding: 6px 12px 6px 30px;
    border-left: 2px solid transparent;
    color: #b7b7b7;
    font-size: 11px;
    line-height: 17px;
    text-indent: -18px;
}

body.tutorial-mode .tutorial-step-nav-item.active {
    background: #37373d;
    border-left-color: #007acc;
    color: #fff;
    font-weight: 400;
}

body.tutorial-mode #tutorial-file-section,
body.tutorial-mode #tutorial-func-lib-section,
body.tutorial-mode #tutorial-advanced-section { display: none; }
body.tutorial-mode #tutorial-left-rail.workbench-left-view-files #tutorial-step-nav,
body.tutorial-mode #tutorial-left-rail.workbench-left-view-functions #tutorial-step-nav,
body.tutorial-mode #tutorial-left-rail.workbench-left-view-tools #tutorial-step-nav { display: none; }
body.tutorial-mode #tutorial-left-rail.workbench-left-view-files #tutorial-file-section,
body.tutorial-mode #tutorial-left-rail.workbench-left-view-functions #tutorial-func-lib-section,
body.tutorial-mode #tutorial-left-rail.workbench-left-view-tools #tutorial-advanced-section { display: block; }

body.tutorial-mode #tutorial-file-section #file-bar { height: 100%; background: #181818; }
body.tutorial-mode #tutorial-file-section #file-bar-tabs { flex: 1; overflow-y: auto; }
body.tutorial-mode #tutorial-file-section .file-tab { min-height: 30px; background: transparent; }
body.tutorial-mode #tutorial-func-lib-section,
body.tutorial-mode #tutorial-advanced-section { padding: 12px; }

/* Central editor */
body.tutorial-mode #editor-area {
    grid-column: 3;
    grid-row: 1 / 3;
    width: auto;
    min-width: 0;
    border: 0;
    border-right: 1px solid #2b2b2b;
    background: #1e1e1e;
}

body.tutorial-mode #editor-area #editor-container { min-height: 260px; background: #1e1e1e; }
body.tutorial-mode #editor-area #editor-header {
    height: 44px;
    min-height: 44px;
    padding: 0 8px 0 12px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #2b2b2b;
    background: #252526;
}

body.tutorial-mode #editor-header > label {
    min-width: 155px;
    color: #969696;
    font-size: 11px;
    white-space: nowrap;
}
body.tutorial-mode #editor-header > label strong { color: #d7d7d7; font-weight: 500; }
body.tutorial-mode #editor-toolbar { margin-left: auto; display: flex; align-items: center; gap: 3px; }

body.tutorial-mode #editor-toolbar .toolbar-btn,
body.tutorial-mode #btn-editor-file-menu {
    height: 28px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #bcbcbc;
    font: 11px/26px var(--font-ui);
}
body.tutorial-mode #editor-toolbar .toolbar-btn:hover,
body.tutorial-mode #btn-editor-file-menu[aria-expanded="true"] { background: #37373d; border-color: #454545; color: #fff; }
body.tutorial-mode #editor-lang { margin-left: 4px; background: #37373d; color: #aaa; }

body.tutorial-mode .workbench-menu-wrap { position: relative; }
body.tutorial-mode .workbench-popover-menu {
    position: absolute;
    z-index: 200;
    top: calc(100% + 4px);
    right: 0;
    min-width: 210px;
    padding: 4px;
    border: 1px solid #454545;
    border-radius: 4px;
    background: #252526;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
body.tutorial-mode .workbench-popover-menu[hidden] { display: none !important; }
body.tutorial-mode .workbench-menu-item,
body.tutorial-mode .runtime-controls-menu .workbench-menu-item {
    width: 100%;
    min-height: 28px;
    margin: 0;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #cccccc;
    font: 11px/18px var(--font-ui);
    text-align: left;
}
body.tutorial-mode .workbench-menu-item:hover:not(:disabled) { background: #094771; color: #fff; }
body.tutorial-mode .workbench-menu-item:disabled { color: #656565; }
body.tutorial-mode .workbench-menu-item kbd { color: #8f8f8f; font: 10px var(--font-ui); }
body.tutorial-mode .workbench-menu-separator,
body.practice-mode .workbench-menu-separator { height: 1px; margin: 4px 6px; background: #454545; }
body.tutorial-mode .workbench-menu-item-danger,
body.practice-mode .workbench-menu-item.workbench-menu-item-danger { color: #f48771; }
body.tutorial-mode .workbench-menu-item-danger:hover:not(:disabled),
body.practice-mode .workbench-menu-item-danger:hover:not(:disabled) { background: #5a1d1d; color: #fff; }
body.tutorial-mode .runtime-controls-menu { left: 0; right: auto; top: auto; bottom: calc(100% + 4px); min-width: 190px; }

body.tutorial-mode #ide-editor-container { background: #1e1e1e; }
body.tutorial-mode .CodeMirror { background: #1e1e1e; color: #d4d4d4; }
body.tutorial-mode .CodeMirror-gutters { background: #1e1e1e; border-right: 0; }
body.tutorial-mode .CodeMirror-linenumber { color: #858585; }
body.tutorial-mode .CodeMirror-activeline-background { background: #2a2d2e; }

/* Bottom panel */
body.tutorial-mode #editor-area #console-container {
    position: relative;
    flex: 0 0 var(--tutorial-console-height);
    height: var(--tutorial-console-height);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #2b2b2b;
    background: #181818;
}

body.tutorial-mode #workbench-panel-tabs {
    flex: 0 0 35px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 12px;
    border-bottom: 1px solid #2b2b2b;
    background: #181818;
}
body.tutorial-mode #workbench-panel-tabs button {
    position: relative;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #969696;
    font: 11px/34px var(--font-ui);
    cursor: pointer;
}
body.tutorial-mode #workbench-panel-tabs button.active { color: #fff; }
body.tutorial-mode #workbench-panel-tabs button.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #007acc;
}
body.tutorial-mode #workbench-problem-count { color: #858585; }
body.tutorial-mode .workbench-panel-connection {
    margin-left: auto;
    color: #8f8f8f;
    font-size: 10px;
}
body.tutorial-mode .workbench-panel-connection i {
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 50%;
    background: #89d185;
}
body.tutorial-mode #code-output-container,
body.tutorial-mode #system-log-container,
body.tutorial-mode #status-panel,
body.tutorial-mode #workbench-panel-placeholder { flex: 1 1 auto; min-height: 0; height: auto; }
body.tutorial-mode #code-output-header,
body.tutorial-mode #system-log-header { height: 28px; padding: 0 10px; background: #1f1f1f; }
body.tutorial-mode #code-output-header > strong,
body.tutorial-mode #system-log-header > strong,
body.tutorial-mode #btn-toggle-system-log,
body.tutorial-mode #btn-close-system-log { display: none; }
body.tutorial-mode #code-output,
body.tutorial-mode #system-log { color: #b5cea8; background: #181818; font-size: 11px; line-height: 1.55; }
body.tutorial-mode .workbench-panel-empty { padding: 18px; color: #858585; font-size: 11px; }

body.tutorial-mode #console-container > #status-panel {
    display: none;
    max-height: none;
    padding: 10px 12px;
    overflow: auto;
    border: 0;
    background: #181818;
}
body.tutorial-mode #console-container > #status-panel #debug-leds { margin: 0; padding: 0; border: 0; }
body.tutorial-mode #console-container > #status-panel .status-panel-header { margin-bottom: 8px; }
body.tutorial-mode #console-container > #status-panel #status-table tbody { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 6px; }
body.tutorial-mode #console-container > #status-panel #status-table tr { min-height: 44px; padding: 7px 9px; background: #202020; border: 1px solid #303030; border-radius: 3px; }

/* Right task/intro panel */
body.tutorial-mode #tutorial-task-panel {
    grid-column: 4;
    grid-row: 1 / 3;
    width: auto;
    min-width: 0;
    height: auto;
    border: 0;
    background: #1f1f1f;
}
body.tutorial-mode #tutorial-task-panel::before {
    content: '当前任务';
    flex: 0 0 35px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid #2b2b2b;
    color: #bcbcbc;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
body.tutorial-mode #tutorial-task-panel .tutorial-panel-toggle {
    position: absolute;
    z-index: 5;
    right: 0;
    top: 0;
    width: 30px;
    min-height: 35px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #1f1f1f;
}
body.tutorial-mode #tutorial-task-panel .tutorial-toggle-label { display: none; }
body.tutorial-mode #tutorial-step-content { padding: 0; background: #1f1f1f; font-size: 12px; line-height: 1.55; }
body.tutorial-mode #tutorial-step-detail { padding: 12px 14px 88px; }
body.tutorial-mode #tutorial-step-detail > h3 {
    padding-bottom: 12px;
    margin: 0 0 8px;
    border-bottom: 1px solid #333;
    color: #e7e7e7;
    font-size: 14px;
    line-height: 1.45;
}
body.tutorial-mode #tutorial-step-content .tutorial-section {
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #303030;
    background: transparent;
}
body.tutorial-mode #tutorial-step-content .tutorial-objective-card { padding: 12px 0 14px; }
body.tutorial-mode #tutorial-step-content .tutorial-objective-card h4 { color: #4fc1ff; }
body.tutorial-mode #tutorial-step-content h4 { margin: 0 0 7px; color: #cccccc; font-size: 12px; }
body.tutorial-mode #tutorial-step-content p,
body.tutorial-mode #tutorial-step-content li { color: #adadad; font-size: 11px; }

body.tutorial-mode details.tutorial-section-disclosure { padding: 0 !important; }
body.tutorial-mode details.tutorial-section-disclosure > summary {
    min-height: 38px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #c8c8c8;
    font-size: 11px;
    cursor: pointer;
    list-style: none;
}
body.tutorial-mode details.tutorial-section-disclosure > summary::-webkit-details-marker { display: none; }
body.tutorial-mode details.tutorial-section-disclosure > summary::after { content: '›'; color: #858585; font-size: 16px; transform: rotate(0); transition: transform .12s; }
body.tutorial-mode details.tutorial-section-disclosure[open] > summary::after { transform: rotate(90deg); }
body.tutorial-mode .tutorial-disclosure-body { padding: 0 2px 12px; }
body.tutorial-mode details.tutorial-section-disclosure.is-code-task > summary { color: #4fc1ff; }
body.tutorial-mode #tutorial-check-feedback-section:empty { display: none; }

body.tutorial-mode #tutorial-step-actions {
    position: sticky;
    z-index: 2;
    bottom: 0;
    margin-top: auto;
    padding: 9px 12px;
    border-top: 1px solid #37373d;
    background: rgba(31,31,31,.97);
    box-shadow: 0 -6px 18px rgba(0,0,0,.2);
}
body.tutorial-mode #tutorial-step-actions .tutorial-action-btn {
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid #454545;
    border-radius: 3px;
    background: #2d2d30;
    color: #cccccc;
    font-size: 10px;
}
body.tutorial-mode #tutorial-step-actions .btn-check { background: #0e639c; border-color: #1177bb; color: #fff; }

/* Collapsed composite bars retain one precise restore affordance. */
body.tutorial-mode.tutorial-left-collapsed #tutorial-columns {
    grid-template-columns: 48px 34px minmax(0, 1fr) var(--tutorial-task-width);
}
body.tutorial-mode.tutorial-task-collapsed #tutorial-columns {
    grid-template-columns: 48px var(--tutorial-left-width) minmax(0, 1fr) 34px;
}
body.tutorial-mode.tutorial-left-collapsed.tutorial-task-collapsed #tutorial-columns {
    grid-template-columns: 48px 34px minmax(0, 1fr) 34px;
}
body.tutorial-mode.tutorial-left-collapsed #tutorial-left-rail,
body.tutorial-mode.tutorial-task-collapsed #tutorial-task-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden;
}
body.tutorial-mode.tutorial-left-collapsed #tutorial-left-rail .tutorial-panel-toggle,
body.tutorial-mode.tutorial-task-collapsed #tutorial-task-panel .tutorial-panel-toggle {
    position: static;
    width: 34px;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
}
body.tutorial-mode.tutorial-left-collapsed #tutorial-left-rail .tutorial-toggle-icon,
body.tutorial-mode.tutorial-task-collapsed #tutorial-task-panel .tutorial-toggle-icon { display: block; }

/* Status bar */
body.tutorial-mode #workbench-statusbar {
    height: 22px;
    padding: 0 9px 0 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #007acc;
    color: #fff;
    font-size: 10px;
    line-height: 22px;
}
body.tutorial-mode #workbench-statusbar > div { display: flex; align-items: center; gap: 14px; }

@media (max-width: 1240px) {
    body.tutorial-mode #tutorial-columns { --tutorial-left-width: 330px; --tutorial-task-width: 290px; }
    body.tutorial-mode #tutorial-observation-column #sim-container { grid-template-columns: 1fr 1fr; }
    body.tutorial-mode .workbench-command-center { min-width: 280px; }
}

/* ==================================================================
   Practice Workbench — aligned with Tutorial Workbench V3
   Layout: activity bar | simulation composite | editor + status
                                  bottom output panel
   ================================================================== */
body.practice-mode {
    --bg-primary: #181818;
    --bg-secondary: #1f1f1f;
    --bg-tertiary: #2a2d2e;
    --bg-input: #1e1e1e;
    --text-primary: #cccccc;
    --text-secondary: #b3b3b3;
    --text-muted: #858585;
    --border-color: #37373d;
    --accent-green: #89d185;
    --accent-red: #f14c4c;
    --accent-yellow: #cca700;
    --accent-blue: #007acc;
    --accent-cyan: #4fc1ff;
    --accent-orange: #ce9178;
    background: #181818;
    color: var(--text-primary);
}

body.practice-mode #header-bar {
    position: relative;
    height: 40px;
    padding: 0 10px;
    justify-content: flex-start;
    gap: 12px;
    background: #181818;
    border-bottom-color: #2b2b2b;
}
body.practice-mode .workbench-brand {
    width: 236px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
}
body.practice-mode .workbench-brand-mark {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #007acc;
    color: #fff;
    font: 700 10px/1 var(--font-ui);
}
body.practice-mode #header-bar h1 { color: #e7e7e7; font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
body.practice-mode .workbench-command-center {
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    min-width: 330px;
    height: 28px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    background: #242424;
    color: #a6a6a6;
    font-size: 12px;
}
body.practice-mode .workbench-command-center strong { color: #d7d7d7; font-weight: 500; }
body.practice-mode .workbench-breadcrumb-separator { color: #6f6f6f; }
body.practice-mode .practice-route-switch { height: 28px; margin-left: auto; padding: 2px; border-color: #3a3a3a; border-radius: 5px; background: #242424; }
body.practice-mode .practice-route-switch button { min-height: 22px; padding: 2px 9px; border: 0; border-radius: 3px; background: transparent; color: #a7a7a7; font-size: 11px; }
body.practice-mode .practice-route-switch button[aria-pressed="true"] { background: #3a3d41; color: #fff; }
body.practice-mode #build-status { width: auto; margin: 0; padding: 3px 8px; border-radius: 3px; background: rgba(137,209,133,.1); color: #89d185; font-size: 11px; white-space: nowrap; }

body.practice-mode #practice-workspace { height: calc(100vh - 40px); display: grid; grid-template-rows: minmax(0,1fr) 22px; background: #181818; }
body.practice-mode #practice-columns { --practice-left-width:390px; --practice-bottom-height:220px; --practice-resource-height:238px; min-width: 0; position: relative; display: grid; grid-template-columns: 48px var(--practice-left-width) minmax(0,1fr); grid-template-rows: minmax(320px,1fr) var(--practice-bottom-height); overflow: hidden; }
body.practice-mode #main-content { display: contents; }

body.practice-mode #practice-activity-bar {
    grid-column: 1;
    grid-row: 1 / 3;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #181818;
    border-right: 1px solid #2b2b2b;
}
body.practice-mode .practice-activity-main { display: flex; flex-direction: column; }
body.practice-mode .practice-activity-btn {
    position: relative;
    width: 47px;
    height: 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #858585;
    font: 400 23px/1 var(--font-ui);
    cursor: pointer;
}
body.practice-mode .practice-activity-btn:hover { color: #d4d4d4; background: #222; }
body.practice-mode .practice-activity-btn.active { color: #fff; }
body.practice-mode .practice-activity-btn.active::before { content: ''; position: absolute; inset: 6px auto 6px 0; width: 2px; background: #007acc; }

body.practice-mode #left-column {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 3;
    width: auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-right: 1px solid #2b2b2b;
    background: #111;
    overflow: hidden;
}
body.practice-mode #left-column::before {
    content: '仿真视图';
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #1f1f1f;
    border-bottom: 1px solid #2b2b2b;
    color: #bbbbbb;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}
body.practice-mode #sim-container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-bottom: 1px solid #2b2b2b; background: #090909; }
body.practice-mode #track-view { flex: 61 1 0; min-height: 0; border-bottom: 1px solid #2b2b2b; background: #090909; }
body.practice-mode #camera-view { flex: 39 1 0; min-height: 0; background: #090909; }
body.practice-mode #track-view canvas,
body.practice-mode #camera-view canvas { max-width: 100%; max-height: 100%; }
body.practice-mode #layout-switch { top: 7px; right: 7px; }
body.practice-mode #layout-switch .layout-btn { padding: 3px 6px; border-color: #3c3c3c; background: rgba(31,31,31,.9); color: #9d9d9d; font-size: 10px; }
body.practice-mode #camera-distance-control { left: 8px; right: 8px; bottom: 5px; width: auto; transform: none; justify-content: center; padding: 3px 6px; background: rgba(24,24,24,.88); border-radius: 3px; font-size: 9px; }
body.practice-mode #camera-distance-control input { min-width: 70px; }

body.practice-mode #control-bar {
    position: relative;
    flex: 0 0 76px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0,auto));
    grid-template-rows: 30px 22px;
    align-content: center;
    justify-content: start;
    gap: 4px;
    padding: 7px 8px 5px;
    background: #1f1f1f;
    border: 0;
    overflow: visible;
}
body.practice-mode #control-bar > .ctrl-btn,
body.practice-mode #btn-more-runtime-controls { height: 28px; padding: 0 9px; border: 1px solid #454545; border-left-width: 1px; border-radius: 3px; background: #2d2d30; color: #cccccc; font: 11px/26px var(--font-ui); }
body.practice-mode #control-bar > #btn-run:not(:disabled) { background: #176f2c; border-color: #238636; color: #fff; }
body.practice-mode #control-bar > #btn-compile:not(:disabled) { background: #0e639c; border-color: #1177bb; color: #fff; }
body.practice-mode #control-bar > #btn-estop { border-color: #8d3434; color: #ffb3b3; }
body.practice-mode #control-bar > #btn-estop:not(:disabled) { background: #a1260d; color: #fff; }
body.practice-mode #runtime-controls-menu-wrap { position: relative; height: 28px; }
body.practice-mode #ctrl-status { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 1px 0 0; color: #858585; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.practice-mode #debug-control-bar,
body.practice-mode #manual-control,
body.practice-mode #dev-mode-badge { z-index: 10; flex: 0 0 auto; }

body.practice-mode #practice-resource-explorer {
    flex: 0 0 var(--practice-resource-height);
    min-height: 160px;
    max-height: 55%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid #2b2b2b;
    background: #181818;
}
body.practice-mode #practice-resource-tabs {
    position: relative;
    flex: 0 0 35px;
    display: flex;
    align-items: end;
    gap: 16px;
    padding: 0 92px 0 12px;
    border-bottom: 1px solid #2b2b2b;
    background: #1f1f1f;
}
body.practice-mode #practice-resource-tabs > button {
    position: relative;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #969696;
    font: 11px/34px var(--font-ui);
    cursor: pointer;
    white-space: nowrap;
}
body.practice-mode #practice-resource-tabs > button.active { color: #fff; }
body.practice-mode #practice-resource-tabs > button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #007acc; }
body.practice-mode .practice-resource-actions { position: absolute; top: 4px; right: 7px; display: flex; align-items: center; gap: 2px; }
body.practice-mode .practice-resource-actions button { width: 25px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #aaa; font: 14px/24px var(--font-ui); cursor: pointer; }
body.practice-mode .practice-resource-actions button:hover { border-color: #454545; background: #37373d; color: #fff; }
body.practice-mode .practice-resource-panel { flex: 1 1 auto; min-height: 0; overflow: hidden; }
body.practice-mode .practice-resource-panel[hidden] { display: none !important; }
body.practice-mode .practice-resource-panel.active { display: flex; flex-direction: column; }
body.practice-mode .practice-tree-root { flex: 0 0 28px; display: flex; align-items: center; padding: 0 12px; color: #bbbbbb; font-size: 10px; font-weight: 600; letter-spacing: .45px; }
body.practice-mode .practice-tree-root::before { content: '⌄'; margin-right: 6px; color: #858585; font-size: 12px; }
body.practice-mode .practice-resource-tree { flex: 1 1 auto; min-height: 0; padding: 2px 0 8px; overflow-y: auto; }
body.practice-mode .practice-tree-item { width: 100%; min-height: 28px; padding: 4px 10px 4px 28px; display: flex; align-items: center; gap: 7px; border: 0; border-left: 2px solid transparent; background: transparent; color: #b7b7b7; font: 11px/18px var(--font-ui); text-align: left; cursor: pointer; }
body.practice-mode .practice-tree-item:hover { background: #2a2d2e; color: #fff; }
body.practice-mode .practice-tree-item.active { border-left-color: #007acc; background: #37373d; color: #fff; }
body.practice-mode .practice-tree-file-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; background: rgba(0,122,204,.16); color: #75c8ff; font: 700 9px/1 var(--font-ui); }
body.practice-mode .practice-tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.practice-mode .practice-library-item { padding-left: 29px; }
body.practice-mode .practice-tree-empty { padding: 8px 28px; color: #6f6f6f; font-size: 10px; }

/* Shared left-sidebar tools: track editing and vehicle origin controls live here,
   while the runtime menu remains reserved for run/status actions. */
body.tutorial-mode #tutorial-tools-section,
body.practice-mode #practice-tools-panel {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 8px;
    overflow-y: auto;
    background: #181818;
}

body.tutorial-mode #tutorial-tools-section { display: none; }

body.tutorial-mode #tutorial-tools-section[hidden],
body.practice-mode #practice-tools-panel[hidden] { display: none !important; }

body.tutorial-mode #tutorial-left-rail.workbench-left-view-tools #tutorial-step-nav,
body.tutorial-mode #tutorial-left-rail.workbench-left-view-tools #tutorial-file-section,
body.tutorial-mode #tutorial-left-rail.workbench-left-view-tools #tutorial-func-lib-section,
body.tutorial-mode #tutorial-left-rail.workbench-left-view-tools #tutorial-advanced-section { display: none; }

body.tutorial-mode #tutorial-left-rail.workbench-left-view-tools #tutorial-tools-section { display: flex; flex-direction: column; }

.workbench-tool-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 8px;
    border-bottom: 1px solid #2b2b2b;
}

.workbench-tool-section-header strong { color: #d7d7d7; font-size: 12px; font-weight: 600; }
.workbench-tool-section-header span { color: #858585; font-size: 10px; }
.workbench-tool-section-hint { margin: 10px 4px 12px; color: #858585; font-size: 10px; line-height: 1.55; }

.workbench-tool-btn {
    width: 100%;
    min-height: 34px;
    margin: 3px 0;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #37373d;
    border-left: 2px solid #3c3c3c;
    border-radius: 3px;
    background: #252526;
    color: #c8c8c8;
    font: 11px/18px var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.workbench-tool-btn:hover:not(:disabled) { border-color: #007acc; background: #2a2d2e; color: #fff; }
.workbench-tool-btn:disabled { opacity: .48; cursor: not-allowed; }
.workbench-tool-btn.btn-track-editor { border-left-color: #f0a000; }
.workbench-tool-btn.btn-debug-pose { border-left-color: #4fc1ff; }
.workbench-tool-btn.btn-set-origin,
.workbench-tool-btn.btn-restore-origin { border-left-color: #89d185; }
.workbench-tool-divider { height: 1px; margin: 12px 2px; background: #2b2b2b; }

body.practice-mode #practice-tools-panel {
    flex: 1 1 auto;
    border-top: 1px solid #2b2b2b;
}

body.practice-mode #practice-tools-panel:not([hidden]) { display: flex !important; flex-direction: column; }
body.practice-mode.practice-tools-open #practice-resource-explorer { display: none !important; }

/* Project explorer refresh: both workbenches use the same compact VS Code-like tree. */
.file-tree-root,
.file-tree-folder,
.file-tree-file {
    box-sizing: border-box;
    width: 100%;
    min-height: 28px;
}

.file-tree-root {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    color: #bdbdbd;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.file-tree-chevron,
.practice-tree-chevron { width: 12px; flex: 0 0 12px; color: #858585; text-align: center; }
.file-tree-folder-icon { color: #d7ba7d; font-size: 13px; }

.file-tree-folder {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    color: #c5c5c5;
    font: 11px/18px var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.file-tree-folder:hover { background: #2a2d2e; color: #fff; }
.file-tree-folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file-tree-file {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 28px;
    border: 0;
    border-left: 2px solid transparent;
    border-bottom: 0;
    background: transparent;
    color: #b7b7b7;
    font: 11px/18px var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.file-tree-file:hover { background: #2a2d2e; color: #fff; }
.file-tree-file.active { border-left-color: #007acc; background: #37373d; color: #fff; }
.file-tree-file.file-tree-nested { padding-left: 48px; }
.file-tree-file .file-icon { width: 16px; flex: 0 0 16px; font-size: 12px; text-align: center; }
.file-tree-file .file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.file-tree-entry { margin-left: auto; color: #89d185; font-size: 9px; }
.file-main-mark { margin-left: auto; color: #d7ba7d; font-size: 10px; }
.file-tree-hidden-action { display: none !important; }

body.tutorial-mode #tutorial-file-section #file-bar {
    height: 100%;
    align-items: stretch;
    background: #181818;
}
body.tutorial-mode #tutorial-file-section #file-bar-tabs {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
body.tutorial-mode #tutorial-file-section #file-bar-actions {
    order: 1;
    flex: 0 0 auto;
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    gap: 4px;
    border-bottom: 1px solid #2b2b2b;
    background: #1f1f1f;
}
body.tutorial-mode #tutorial-file-section #file-bar-actions .file-bar-btn {
    min-height: 25px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #aaa;
    font: 10px/20px var(--font-ui);
}
body.tutorial-mode #tutorial-file-section #file-bar-actions .file-bar-btn:hover { border-color: #454545; background: #37373d; color: #fff; }
body.tutorial-mode #tutorial-file-section #file-bar-actions #btn-add-file { color: #89d185; }
body.tutorial-mode #tutorial-file-section #file-bar-actions #btn-add-folder { color: #d7ba7d; }
body.tutorial-mode #tutorial-file-section #file-bar-actions #btn-collapse-files { color: #9cdcfe; }
body.tutorial-mode #tutorial-file-section .file-badge { display: none; }

body.practice-mode #right-column #file-bar-actions { display: none; }
body.practice-mode .practice-tree-folder { padding-left: 10px; color: #c5c5c5; }
body.practice-mode .practice-tree-folder:hover { background: #2a2d2e; color: #fff; }
body.practice-mode .practice-tree-item { min-height: 28px; padding: 4px 10px 4px 28px; border-left: 2px solid transparent; }
body.practice-mode .practice-tree-item.practice-tree-nested { padding-left: 46px; }
body.practice-mode .practice-tree-item.active { border-left-color: #007acc; background: #37373d; }
body.practice-mode .practice-tree-file-icon { background: transparent; color: #75c8ff; }
body.practice-mode .practice-resource-actions button[data-practice-file-action="add-folder"] { color: #d7ba7d; }
body.practice-mode .practice-resource-actions button[data-practice-file-action="collapse"] { color: #9cdcfe; }

.project-file-context-menu {
    position: fixed;
    z-index: 1000;
    min-width: 176px;
    padding: 4px;
    border: 1px solid #454545;
    border-radius: 4px;
    background: #252526;
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.project-file-context-menu[hidden] { display: none !important; }
.project-file-context-title { padding: 5px 8px 6px; color: #858585; font-size: 10px; border-bottom: 1px solid #37373d; }
.project-file-context-menu button { width: 100%; min-height: 28px; padding: 5px 8px; border: 0; border-radius: 2px; background: transparent; color: #ccc; font: 11px/18px var(--font-ui); text-align: left; cursor: pointer; }
.project-file-context-menu button:hover { background: #094771; color: #fff; }

body.practice-mode #right-column {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    width: auto;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr);
    overflow: hidden;
    background: #1e1e1e;
}
body.practice-mode #editor-container { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; border: 0; background: #1e1e1e; }
body.practice-mode #file-bar { height: 35px; background: #181818; border-bottom-color: #2b2b2b; }
body.practice-mode .file-tab { min-height: 34px; padding: 4px 10px; border-right-color: #2b2b2b; color: #a9a9a9; }
body.practice-mode .file-tab.active { background: #1e1e1e; border-bottom: 1px solid #007acc; color: #fff; }
body.practice-mode #file-bar-actions { gap: 2px; padding: 0 6px; }
body.practice-mode .file-bar-btn { width: 27px; height: 27px; justify-content: center; padding: 0; border-color: transparent; border-left-width: 1px; background: transparent; color: #bcbcbc; font-size: 0; }
body.practice-mode .file-bar-btn:hover { border-color: #454545; background: #37373d; color: #fff; }
body.practice-mode #btn-add-file::before { content: '+'; font-size: 17px; }
body.practice-mode #btn-rename-file::before { content: '✎'; font-size: 14px; }
body.practice-mode #btn-set-main::before { content: '★'; font-size: 12px; }
body.practice-mode #btn-delete-file::before { content: '×'; font-size: 17px; }
body.practice-mode #editor-header { height: 40px; min-height: 40px; padding: 0 8px 0 12px; border-bottom: 1px solid #2b2b2b; background: #252526; }
body.practice-mode #editor-header > label { min-width: 145px; color: #969696; font-size: 11px; white-space: nowrap; }
body.practice-mode #editor-header > label strong { color: #d7d7d7; font-weight: 500; }
body.practice-mode #editor-toolbar { margin-left: auto; gap: 3px; }
body.practice-mode #editor-toolbar .toolbar-btn,
body.practice-mode #btn-editor-file-menu { height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #bcbcbc; font: 11px/26px var(--font-ui); }
body.practice-mode #editor-toolbar .toolbar-btn:hover,
body.practice-mode #btn-editor-file-menu[aria-expanded="true"] { background: #37373d; border-color: #454545; color: #fff; }
body.practice-mode #editor-lang { margin-left: 4px; background: #37373d; color: #aaa; }
body.practice-mode #ide-editor-container,
body.practice-mode .CodeMirror { background: #1e1e1e; color: #d4d4d4; }
body.practice-mode .CodeMirror-gutters { background: #1e1e1e; border-right: 0; }
body.practice-mode .CodeMirror-linenumber { color: #858585; }
body.practice-mode .CodeMirror-activeline-background { background: #2a2d2e; }

body.practice-mode .workbench-menu-wrap { position: relative; }
body.practice-mode .workbench-popover-menu { position: absolute; z-index: 200; top: calc(100% + 4px); right: 0; min-width: 210px; padding: 4px; border: 1px solid #454545; border-radius: 4px; background: #252526; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
body.practice-mode .workbench-popover-menu[hidden] { display: none !important; }
body.practice-mode .workbench-menu-item { width: 100%; min-height: 28px; margin: 0; padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 2px; background: transparent; color: #cccccc; font: 11px/18px var(--font-ui); text-align: left; }
body.practice-mode .workbench-menu-item:hover:not(:disabled) { background: #094771; color: #fff; }
body.practice-mode .workbench-menu-item:disabled { color: #656565; }
body.practice-mode .workbench-menu-item kbd { color: #8f8f8f; font: 10px var(--font-ui); }
body.practice-mode .runtime-controls-menu { left: 0; right: auto; top: auto; bottom: calc(100% + 4px); min-width: 190px; }

body.practice-mode #debug-info-panels { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: 300px; min-height: 0; overflow: auto; border-left: 1px solid #2b2b2b; background: #181818; }

body.practice-mode #console-container {
    position: relative;
    grid-column: 3;
    grid-row: 2;
    width: auto;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-top: 1px solid #2b2b2b;
    background: #181818;
}
body.practice-mode #practice-panel-tabs { flex: 0 0 35px; display: flex; align-items: center; gap: 18px; padding: 0 12px; border-bottom: 1px solid #2b2b2b; background: #181818; }
body.practice-mode #practice-panel-tabs button { position: relative; height: 34px; padding: 0; border: 0; background: transparent; color: #969696; font: 11px/34px var(--font-ui); cursor: pointer; }
body.practice-mode #practice-panel-tabs button.active { color: #fff; }
body.practice-mode #practice-panel-tabs button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #007acc; }
body.practice-mode #workbench-problem-count { color: #858585; }
body.practice-mode .practice-panel-connection { margin-left: auto; color: #8f8f8f; font-size: 10px; }
body.practice-mode .practice-panel-connection i { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; background: #89d185; }
body.practice-mode #code-output-container,
body.practice-mode #system-log-container,
body.practice-mode #status-panel,
body.practice-mode #workbench-panel-placeholder { flex: 1 1 auto; min-height: 0; height: auto; border: 0; }
body.practice-mode .workbench-panel-empty { padding: 18px; color: #858585; font-size: 11px; }
body.practice-mode #code-output-header,
body.practice-mode #system-log-header { height: 28px; padding: 0 10px; background: #1f1f1f; }
body.practice-mode #code-output-header > strong,
body.practice-mode #system-log-header > strong,
body.practice-mode #btn-toggle-system-log,
body.practice-mode #btn-close-system-log { display: none; }
body.practice-mode #btn-clear-code-output,
body.practice-mode #btn-clear-system-log { height: 23px; padding: 0 8px; border-color: #3c3c3c; background: #2d2d30; }
body.practice-mode #code-output,
body.practice-mode #system-log { color: #b5cea8; background: #181818; font-size: 11px; line-height: 1.55; }

/* Keep runtime information identical to the tutorial bottom panel. */
body.practice-mode #console-container > #status-panel {
    display: none;
    max-height: none;
    padding: 10px 12px;
    overflow: auto;
    background: #181818;
}
body.practice-mode #console-container > #status-panel #debug-leds { margin: 0; padding: 0; border: 0; background: transparent; }
body.practice-mode #console-container > #status-panel .status-panel-header { margin-bottom: 8px; }
body.practice-mode #console-container > #status-panel #status-table tbody { display: grid; grid-template-columns: repeat(3,minmax(150px,1fr)); gap: 6px; }
body.practice-mode #console-container > #status-panel #status-table tr { min-height: 44px; padding: 7px 9px; border: 1px solid #303030; border-radius: 3px; background: #202020; }
body.practice-mode #console-container > #status-panel #status-table td { padding: 3px 0; }
body.practice-mode #console-container > #status-panel h3 { color: #cccccc; font-size: 11px; font-weight: 600; }
body.practice-mode #console-container > #status-panel .status-config-btn { height: 25px; padding: 0 7px; border-color: #454545; border-radius: 3px; background: #2d2d30; color: #aaa; font-size: 10px; }
body.practice-mode #console-container > #status-panel .status-hint { color: #6f6f6f; font-size: 9px; line-height: 1.5; }

body.practice-mode #practice-statusbar { height: 22px; padding: 0 9px 0 54px; display: flex; align-items: center; justify-content: space-between; background: #007acc; color: #fff; font-size: 10px; line-height: 22px; }
body.practice-mode #practice-statusbar > div { display: flex; align-items: center; gap: 14px; }

@media (max-width: 1240px) {
    body.practice-mode #practice-columns { --practice-left-width:320px; }
    body.practice-mode .workbench-command-center { min-width: 280px; }
}

/* VS Code-style splitters shared by tutorial and practice workbenches. */
.workbench-resizer {
    z-index: 10002;
    padding: 0;
    border: 0;
    background: transparent;
    touch-action: none;
    outline: none;
}
.workbench-resizer::after {
    content: '';
    position: absolute;
    background: rgba(127, 127, 127, .14);
    transition: background-color 90ms ease;
}
.workbench-resizer-column {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
}
.workbench-resizer-column::after { inset: 0 2px; }
.workbench-resizer-row {
    position: absolute;
    height: 6px;
    cursor: row-resize;
}
.workbench-resizer-row::after { inset: 2px 0; }
.workbench-resizer-flow {
    position: relative;
    flex: 0 0 5px;
    width: 100%;
    cursor: row-resize;
}
.workbench-resizer-flow::after { inset: 2px 0; }
.workbench-resizer:hover::after,
.workbench-resizer:focus-visible::after,
.workbench-resizer.is-dragging::after { background: #007acc; }
body.workbench-is-resizing { user-select: none; }
body.workbench-is-resizing-vertical { cursor: col-resize; }
body.workbench-is-resizing-horizontal { cursor: row-resize; }
body.workbench-is-resizing * { cursor: inherit !important; }

/* Fullscreen editor sits above the workbench; hide underlying split handles. */
body.workbench-editor-fullscreen .workbench-resizer { display: none !important; }

body.practice-mode [data-workbench-resize="practice-left"] {
    left: calc(48px + var(--practice-left-width) - 3px);
}
body.practice-mode [data-workbench-resize="practice-bottom"] {
    left: calc(48px + var(--practice-left-width));
    right: 0;
    bottom: calc(var(--practice-bottom-height) - 3px);
}

body.tutorial-mode [data-workbench-resize="tutorial-left"] {
    left: calc(48px + var(--tutorial-left-width) - 3px);
}
body.tutorial-mode [data-workbench-resize="tutorial-task"] {
    right: calc(var(--tutorial-task-width) - 3px);
}
body.tutorial-mode [data-workbench-resize="tutorial-lower"] {
    left: 48px;
    width: var(--tutorial-left-width);
    bottom: calc(var(--tutorial-lower-height) - 3px);
}
body.tutorial-mode.tutorial-left-collapsed [data-workbench-resize="tutorial-left"],
body.tutorial-mode.tutorial-left-collapsed [data-workbench-resize="tutorial-lower"],
body.tutorial-mode.tutorial-task-collapsed [data-workbench-resize="tutorial-task"] { display: none; }

/* Compact bottom panels and reusable layout actions. */
.workbench-panel-actions { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.workbench-panel-actions .workbench-panel-action {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #a9a9a9;
    font: 14px/24px var(--font-ui);
}
.workbench-panel-actions .workbench-panel-action:hover,
.workbench-panel-actions .workbench-panel-action:focus-visible { border-color: #454545; background: #37373d; color: #fff; outline: none; }

body.practice-mode.practice-bottom-collapsed #practice-columns { grid-template-rows: minmax(0,1fr) 35px; }
body.practice-mode.practice-bottom-collapsed #console-container > :not(#practice-panel-tabs),
body.tutorial-mode.tutorial-bottom-collapsed #editor-area #console-container > :not(#workbench-panel-tabs) { display: none !important; }
body.practice-mode.practice-bottom-collapsed [data-workbench-resize="practice-bottom"],
body.tutorial-mode.tutorial-bottom-collapsed [data-workbench-resize="tutorial-console"] { display: none; }
body.tutorial-mode.tutorial-bottom-collapsed #editor-area #console-container {
    flex: 0 0 35px;
    height: 35px;
    min-height: 35px;
}

body.practice-mode #code-output:empty::before,
body.tutorial-mode #code-output:empty::before {
    content: '编译或运行代码后，输出结果会显示在这里。';
    color: #777;
    font: 11px/1.6 var(--font-ui);
}

@media (max-width: 1100px) {
    body.practice-mode #practice-columns { --practice-left-width:300px; --practice-bottom-height:180px; }
    body.tutorial-mode #tutorial-columns { --tutorial-left-width:300px; --tutorial-task-width:280px; --tutorial-console-height:180px; }
    body.practice-mode .workbench-command-center,
    body.tutorial-mode .workbench-command-center { display: none; }
    body.practice-mode #header-bar,
    body.tutorial-mode #header-bar { padding-inline: 8px; }
    body.practice-mode .practice-panel-connection,
    body.tutorial-mode .workbench-panel-connection { display: none; }
    body.practice-mode #practice-statusbar > div,
    body.tutorial-mode #workbench-statusbar > div { gap: 8px; }
}

/* Tutorial navigation progress and compact task drawer. */
body.tutorial-mode #tutorial-progress {
    position: sticky;
    z-index: 4;
    top: 0;
    min-height: 72px;
    padding: 8px 9px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 7px;
    border-top: 1px solid #2b2b2b;
    border-bottom: 1px solid #2b2b2b;
    background: #1f1f1f;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
body.tutorial-mode .tutorial-progress-nav {
    width: 28px;
    height: 32px;
    padding: 0;
    border: 1px solid #454545;
    border-radius: 3px;
    background: #2d2d30;
    color: #d7d7d7;
    font: 18px/28px var(--font-ui);
    cursor: pointer;
}
body.tutorial-mode .tutorial-progress-nav:hover:not(:disabled),
body.tutorial-mode .tutorial-progress-nav:focus-visible { border-color: #007acc; background: #094771; color: #fff; outline: none; }
body.tutorial-mode .tutorial-progress-nav:disabled { opacity: .34; cursor: default; }
body.tutorial-mode .tutorial-progress-summary { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
body.tutorial-mode .tutorial-progress-summary > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.tutorial-mode .tutorial-progress-summary strong { color: #f0f0f0; font-size: 10px; font-weight: 600; }
body.tutorial-mode #tutorial-progress-complete { color: #89d185; font-size: 9px; white-space: nowrap; }
body.tutorial-mode #tutorial-progress-title { overflow: hidden; color: #969696; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
body.tutorial-mode .tutorial-progress-track { position: relative; height: 3px; overflow: hidden; border-radius: 3px; background: #3a3a3a; }
body.tutorial-mode #tutorial-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #007acc; transition: width .16s ease; }

body.tutorial-mode #tutorial-step-list { padding: 3px 0 10px; }
body.tutorial-mode #tutorial-step-list .tutorial-step-nav-item {
    width: 100%;
    min-height: 32px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 5px;
    padding: 6px 10px 6px 12px;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 2px solid transparent;
    background: transparent;
    text-align: left;
    text-indent: 0;
    cursor: pointer;
}
body.tutorial-mode #tutorial-step-list .tutorial-step-nav-item:hover { background: #2a2d2e; color: #fff; }
body.tutorial-mode #tutorial-step-list .tutorial-step-nav-item.active { background: #37373d; border-left-color: #007acc; }
body.tutorial-mode #tutorial-step-list .step-number { width: 20px; display: block; color: #858585; font-variant-numeric: tabular-nums; text-align: right; }
body.tutorial-mode #tutorial-step-list .step-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tutorial-mode #tutorial-step-list .step-status {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #505050;
    border-radius: 50%;
    color: transparent;
    font: 700 9px/13px var(--font-ui);
}
body.tutorial-mode #tutorial-step-list .step-complete .step-status { border-color: #2d8a46; background: #238636; color: #fff; }
body.tutorial-mode #tutorial-step-list .step-supplement .step-status { border-color: #cca700; background: rgba(204, 167, 0, .14); color: #e2c14d; }

body.tutorial-mode #tutorial-task-backdrop {
    display: none;
    position: absolute;
    z-index: 10000;
    inset: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .42);
    cursor: default;
}

@media (max-width: 1365px) {
    body.tutorial-mode #tutorial-columns {
        grid-template-columns: 48px var(--tutorial-left-width) minmax(0, 1fr) 34px;
    }
    body.tutorial-mode.tutorial-left-collapsed #tutorial-columns,
    body.tutorial-mode.tutorial-left-collapsed.tutorial-task-collapsed #tutorial-columns {
        grid-template-columns: 48px 34px minmax(0, 1fr) 34px;
    }
    body.tutorial-mode:not(.tutorial-task-collapsed) #tutorial-task-panel {
        position: absolute;
        z-index: 10001;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(var(--tutorial-task-width), 380px);
        min-width: 280px;
        height: auto;
        border-left: 1px solid #454545;
        box-shadow: -14px 0 32px rgba(0, 0, 0, .42);
    }
    body.tutorial-mode:not(.tutorial-task-collapsed) #tutorial-task-backdrop { display: block; }
    body.tutorial-mode.tutorial-task-collapsed #tutorial-task-panel {
        position: relative;
        z-index: 2;
        grid-column: 4;
        grid-row: 1 / 3;
        width: auto !important;
        min-width: 0 !important;
        height: auto;
        box-shadow: none;
    }
body.tutorial-mode [data-workbench-resize="tutorial-task"] { display: none; }
}

/* Final specificity pass for the unified project tree. */
body.tutorial-mode #tutorial-file-section #file-bar-tabs .file-tree-file {
    min-height: 28px;
    padding: 5px 10px 5px 28px;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    color: #b7b7b7;
}
body.tutorial-mode #tutorial-file-section #file-bar-tabs .file-tree-file:hover { background: #2a2d2e; color: #fff; }
body.tutorial-mode #tutorial-file-section #file-bar-tabs .file-tree-file.active { border-left-color: #007acc; background: #37373d; color: #fff; }
body.practice-mode #right-column #file-bar-actions { display: none !important; }
body.practice-mode #practice-project-tree .practice-tree-item { min-height: 28px; padding: 4px 10px 4px 28px; border-left: 2px solid transparent; background: transparent; }
body.practice-mode #practice-project-tree .practice-tree-item:hover { background: #2a2d2e; color: #fff; }
body.practice-mode #practice-project-tree .practice-tree-item.active { border-left-color: #007acc; background: #37373d; color: #fff; }

/* ===== Runtime feedback pass: one status language for tutorial + practice ===== */
#control-bar[data-runtime-state] #ctrl-status {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    min-height: 22px;
    margin-left: 0;
    padding: 0 9px 0 7px;
    gap: 6px;
    border: 1px solid #3c3c3c;
    border-radius: 999px;
    background: #252526;
    color: #a7a7a7;
    font-size: 10px;
    line-height: 20px;
    box-sizing: border-box;
}
#control-bar[data-runtime-state] #ctrl-status::before {
    content: '';
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #858585;
    box-shadow: 0 0 0 2px rgba(133,133,133,.12);
}
#control-bar[data-runtime-state="idle"] #ctrl-status::before,
#control-bar[data-runtime-state="stopped"] #ctrl-status::before { background: #89d185; box-shadow: 0 0 0 2px rgba(137,209,133,.13); }
#control-bar[data-runtime-state="running"] #ctrl-status { border-color: #27683b; color: #b6e3b3; background: rgba(35,134,54,.14); }
#control-bar[data-runtime-state="running"] #ctrl-status::before { background: #3fb950; box-shadow: 0 0 0 2px rgba(63,185,80,.16); }
#control-bar[data-runtime-state="stopped"] #ctrl-status { color: #c9e7c6; }
#control-bar[data-runtime-state="estopped"] #ctrl-status,
#control-bar[data-runtime-state="error"] #ctrl-status { border-color: #7b3434; color: #ffb4b4; background: rgba(161,38,13,.16); }
#control-bar[data-runtime-state="estopped"] #ctrl-status::before,
#control-bar[data-runtime-state="error"] #ctrl-status::before { background: #f85149; box-shadow: 0 0 0 2px rgba(248,81,73,.16); }
#control-bar[data-runtime-state="debugPose"] #ctrl-status { border-color: #7a5c2b; color: #e5c98a; background: rgba(187,128,9,.13); }
#control-bar[data-runtime-state="debugPose"] #ctrl-status::before { background: #d29922; box-shadow: 0 0 0 2px rgba(210,153,34,.16); }

/* LED is a diagnostic signal, not a second status panel. Keep it compact and inline. */
#debug-leds {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    margin-bottom: 8px;
    padding: 4px 0 7px;
}
#debug-leds h3 {
    flex: 0 0 auto;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    letter-spacing: .2px;
}
#led-container { gap: 7px; }
#led-container .debug-led {
    width: 17px;
    height: 17px;
    border-width: 2px;
}
#led-container .debug-led.on { box-shadow: 0 0 7px 1px currentColor; }

/* Bottom panels share the same compact tab rhythm on both workbenches. */
#workbench-panel-tabs,
#practice-panel-tabs { min-height: 35px; }
#workbench-panel-tabs button,
#practice-panel-tabs button { white-space: nowrap; }
#workbench-panel-tabs button.active,
#practice-panel-tabs button.active { color: #ffffff; }

@media (max-width: 600px) {
    #control-bar[data-runtime-state] #ctrl-status {
        max-width: calc(100vw - 24px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #debug-leds { gap: 8px; }
    #led-container { gap: 5px; }
}

/* Runtime field tones: keep the label/value layout intact while surfacing risk. */
#status-table .s-value[data-status-tone="success"] { color: #89d185; }
#status-table .s-value[data-status-tone="active"] { color: #4fc1ff; }
#status-table .s-value[data-status-tone="warning"] { color: #e2c14d; }
#status-table .s-value[data-status-tone="danger"] { color: #f48771; }
#status-table .s-value[data-status-tone="success"],
#status-table .s-value[data-status-tone="active"],
#status-table .s-value[data-status-tone="warning"],
#status-table .s-value[data-status-tone="danger"] { font-weight: 700; }

/* Runtime tools menu: separate execution actions from track and pose tools. */
.workbench-menu-section-label {
    padding: 6px 8px 3px;
    color: #858585;
    font: 10px/16px var(--font-ui);
    letter-spacing: .04em;
    text-transform: uppercase;
    pointer-events: none;
}
.workbench-menu-section-label + .workbench-menu-item { margin-top: 1px; }

/* The left rail selects workbench views; the API library lives beside the editor. */
#tutorial-left-tabs { display: none !important; }
body.practice-mode #practice-resource-tabs [data-practice-resource="library"] { display: none; }

/* Enlarged pose workspace. The existing track canvas is moved here temporarily, so
   all edits use the same renderer and state as the main simulation. */
#debug-pose-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .68);
}
#debug-pose-overlay[hidden] { display: none !important; }
#debug-pose-dialog {
    width: min(900px, 92vw);
    height: min(720px, 88vh);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #4b4b4b;
    border-radius: 8px;
    background: #1e1e1e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
#debug-pose-header {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border-bottom: 1px solid #383838;
    background: #252526;
}
#debug-pose-header > div { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
#debug-pose-header strong { color: #e2c14d; font-size: 14px; white-space: nowrap; }
#debug-pose-header span { min-width: 0; overflow: hidden; color: #969696; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
#btn-debug-pose-close {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid #454545;
    border-radius: 4px;
    background: transparent;
    color: #bcbcbc;
    cursor: pointer;
}
#btn-debug-pose-close:hover { border-color: #e06c75; background: #4a2528; color: #fff; }
#debug-pose-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #090909;
}
#debug-pose-stage #canvas-track {
    width: min(100%, 860px);
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
#debug-pose-controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 12px 7px;
    border-top: 1px solid #383838;
    background: #252526;
}
#debug-pose-controls label { display: inline-flex; align-items: center; gap: 4px; color: #bcbcbc; font-size: 11px; }
#debug-pose-controls input { width: 72px; height: 26px; padding: 0 6px; border: 1px solid #454545; border-radius: 3px; background: #1e1e1e; color: #e6e6e6; font: 12px var(--font-mono); }
#debug-pose-controls button { min-height: 26px; padding: 3px 8px; border: 1px solid #454545; border-radius: 3px; background: #2d2d30; color: #cfcfcf; font-size: 11px; cursor: pointer; }
#debug-pose-controls button:hover { border-color: #75c8ff; background: #094771; color: #fff; }
#debug-pose-controls #btn-debug-pose-origin { border-color: #7a5c2b; color: #e5c98a; }
#debug-pose-hint { flex: 0 0 auto; margin: 0; padding: 0 12px 10px; color: #858585; font-size: 10px; }
body.debug-pose-overlay-open { overflow: hidden; }

@media (max-width: 620px) {
    #debug-pose-overlay { padding: 8px; }
    #debug-pose-dialog { width: 100%; height: 94vh; min-height: 360px; }
    #debug-pose-header > div { display: block; }
    #debug-pose-header span { display: block; margin-top: 2px; }
    #debug-pose-controls input { width: 62px; }
}