/* Mixgo 仿真系统主界面样式：工具栏、布局、面板（原 mixgo_sowl_app.css，已统一到 common） */
:root {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --bg-panel: #1e2746;
    --text-primary: #eaeaea;
    --text-secondary: #a0a0a0;
    --accent-primary: #e94560;
    --accent-secondary: #0f4c75;
    --accent-success: #4caf50;
    --border-color: #2a3f5f;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    /* 原生 select 弹出层走深色，避免白底浅字；与整站暗色 UI 一致 */
    color-scheme: dark;
}

body {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100%;
    max-width: 100%;
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@supports (height: 1dvh) {
    body, .app-container {
        height: 100dvh;
    }
}

@supports not (height: 1dvh) {
    body, .app-container {
        height: 100vh;
    }
}

/* 工具栏：绝对定位，隐藏时不占流式布局空间，下面主区域可顶到顶端 */
.toolbar {
    --mixvm-toolbar-h: 36px;
    --mixvm-toolbar-control-h: 26px;
    --mixvm-toolbar-h-gap: 9.6px;
    --mixvm-toolbar-btn-pad-x: 10.8px;
    --mixvm-toolbar-btn-inner-gap: 5.4px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--mixvm-toolbar-h-gap, 9.6px);
    align-items: center;
    padding: 0 20px 0 28px;
    height: var(--mixvm-toolbar-h);
    min-height: var(--mixvm-toolbar-h);
    box-sizing: border-box;
    isolation: isolate;
    overflow: visible;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 200;
    /* 默认隐藏在顶部之外；显示时滑入，主区域同步留出顶部间距 */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.app-container.show-toolbar .toolbar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}

/* 主区域：横向铺满；工具栏显示时留出 36px 避免被遮挡 */
.main-content {
    padding-top: 0;
    transition: none;
    display: flex;
    flex: 1 1 0%;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
.app-container.show-toolbar .main-content {
    padding-top: var(--mixvm-toolbar-h, 36px);
    transition: padding-top 0.18s ease-out;
}

/* 左侧 Mixly + 右侧仿真；与「网络」全宽视图互斥 */
.workspace-split {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

/* MixCK：隐藏左侧 Mixly 与分割条，右侧电路仿真占满主工作区 */
.workspace-split.mixck-full-hardware .panel-left,
.workspace-split.mixck-full-hardware .resizer-horizontal {
    display: none !important;
}
.workspace-split.mixck-full-hardware .panel-right {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

/* 网络：工具栏下方整区嵌入 mixnt/index.html（相对 mixvm/） */
.network-view {
    display: none;
    flex: 1 1 0%;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}
.network-view iframe {
    flex: 1 1 0%;
    width: 100%;
    min-height: 0;
    border: none;
}
.app-container.network-mode .workspace-split {
    display: none;
}
.app-container.network-mode .network-view {
    display: flex;
}

/* 左上角半透明圆角竖条：贴边，仅显示竖排「仿真」文字 */
.toolbar-trigger {
    touch-action: manipulation;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 32px;
    border-radius: 8px;
    background: rgba(30, 39, 70, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    z-index: 201;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    overflow: visible;
}
.toolbar-trigger:hover {
    background: rgba(30, 39, 70, 0.55);
    transform: scale(1.05);
    color: #fff;
}
.toolbar-trigger:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-primary);
}
.toolbar-trigger-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.06em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
}
/* 右上角「切分」：与左上角「仿真」同 DOM 层级，镜像到右侧 */
.toolbar-trigger-mirror {
    left: auto;
    right: 0;
}
/* 双板卡切分：仿真/切分挂到 body，贴视口左右缘，不进入左右分栏 DOM */
body.mixvm-dual-edge-triggers #toolbar-trigger {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 210;
}
body.mixvm-dual-edge-triggers #split-trigger {
    position: fixed;
    right: 0;
    top: 0;
    left: auto;
    z-index: 220;
}
/* 右侧子 iframe：不重复显示仿真/切分（全页仅主窗口各一颗） */
html.mixvm-dual-child-doc #toolbar-trigger,
html.mixvm-dual-child-doc #split-trigger {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* 顶栏收起时隐藏右上角切分钮（左上角「仿真」仍可唤出顶栏） */
.app-container:not(.show-toolbar) #split-trigger,
body.mixvm-dual-edge-triggers:not(.mixvm-shell-toolbar-open) #split-trigger {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.app-container.show-toolbar .toolbar-trigger,
body.mixvm-shell-toolbar-open #toolbar-trigger,
body.mixvm-shell-toolbar-open #split-trigger {
    background: rgba(233, 69, 96, 0.2);
    border-color: rgba(233, 69, 96, 0.35);
    height: var(--mixvm-toolbar-h, 36px);
    min-height: var(--mixvm-toolbar-h, 36px);
}
.app-container.show-toolbar .toolbar-trigger-mirror,
.toolbar-trigger-mirror.active,
body.mixvm-shell-toolbar-open #split-trigger.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: rgba(233, 69, 96, 0.35);
}

/* 双板卡整页左右切分 */
.mixvm-dual-host {
    display: flex;
    flex-direction: row;
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.mixvm-dual-pane {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.mixvm-dual-pane-primary {
    flex: 1 1 50%;
    width: 50%;
}
.mixvm-dual-pane-secondary {
    flex: 1 1 50%;
    min-width: 0;
    position: relative;
}
.mixvm-dual-pane-secondary.mixvm-dual-child-loading .mixvm-dual-child-frame {
    opacity: 0;
    pointer-events: none;
}
.mixvm-dual-pane-secondary.mixvm-dual-child-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mixvm-bg, #1a1a2e);
    opacity: 0.35;
    pointer-events: none;
}
.mixvm-dual-pane .app-container {
    flex: 1 1 0%;
    height: 100% !important;
    min-height: 0;
    max-height: 100%;
}
.mixvm-dual-child-frame {
    flex: 1 1 0%;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
    display: block;
}
.mixvm-dual-resizer {
    width: 14px;
    min-width: 14px;
    flex-shrink: 0;
    z-index: 5000;
    touch-action: none;
    position: relative;
    cursor: col-resize;
    background: var(--border-color);
    transition: background 0.15s ease;
    pointer-events: auto;
}
.mixvm-dual-resizer-hit {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 48px;
    height: 100vh;
    z-index: 10050;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
    pointer-events: auto;
}
@supports (height: 1dvh) {
    .mixvm-dual-resizer-hit {
        height: 100dvh;
    }
}
.mixvm-dual-resizer-hit.active,
.mixvm-dual-resizer-hit:hover {
    background: rgba(15, 76, 117, 0.08);
}
.mixvm-dual-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20px;
    right: -20px;
    cursor: col-resize;
    z-index: 1;
    pointer-events: auto;
}
.mixvm-dual-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 56px;
    max-height: 40%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
}
.mixvm-dual-resizer:hover,
.mixvm-dual-resizer.active {
    background: var(--accent-primary);
}
.mixvm-dual-resizer:hover::after,
.mixvm-dual-resizer.active::after {
    background: rgba(255, 255, 255, 0.55);
}
body.mixvm-dual-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}
body.mixvm-dual-resizing iframe,
body.mixvm-dual-resizing .mixvm-dual-child-frame {
    pointer-events: none !important;
}
.mixvm-dual-host.is-resizing .mixvm-dual-child-frame,
.mixvm-dual-host.is-resizing iframe {
    pointer-events: none;
}
body.mixvm-dual-split-active > .app-container {
    /* 已迁入 primary pane */
}
body:not(.mixvm-dual-split-active) .mixvm-dual-host {
    display: none;
}
body.mixvm-dual-split-active {
    display: flex;
    flex-direction: row;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}
@supports (height: 1dvh) {
    body.mixvm-dual-split-active {
        height: 100dvh;
    }
}
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
body.mixvm-dual-split-active > .mixvm-dual-resizer {
    flex-shrink: 0;
    height: 100%;
    align-self: stretch;
}
/* 切分模式下 Mixly/仿真内部分栏：加大可拖区域 */
body.mixvm-dual-split-active #resizer-h,
html.mixvm-dual-child-doc #resizer-h {
    width: 10px;
    min-width: 10px;
    z-index: 30;
}
body.mixvm-dual-split-active #resizer-h::before,
html.mixvm-dual-child-doc #resizer-h::before {
    left: -10px;
    right: -10px;
}
body.mixvm-dual-split-active > .mixvm-dual-host {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
body.mixvm-dual-split-active > .app-container {
    /* 旧版迁入 primary pane 的兼容占位 */
}
/* 双板卡：左右各保留壳层顶栏，高度与主窗一致；切分钮仍仅挂 body 右上角 */
.mixvm-dual-pane .app-container.show-toolbar .toolbar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.mixvm-dual-pane .app-container.show-toolbar .main-content {
    padding-top: var(--mixvm-toolbar-h, 36px);
}
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app.show-toolbar .toolbar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app.show-toolbar .main-content {
    padding-top: var(--mixvm-toolbar-h, 36px);
}

/* 双板切分：MIXIO 仅左侧；语言仅右侧；顶栏按钮间距减半、按钮宽度约为默认的 49/64 */
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app #mixvm-lang-wrap,
body.mixvm-dual-split-active .mixvm-dual-pane-primary #mixvm-lang-wrap {
    display: none !important;
}
html.mixvm-dual-child-doc #btn-mixio-toolbar {
    display: none !important;
}
html.mixvm-dual-child-doc .app-container.show-toolbar .toolbar {
    pointer-events: auto;
}
body.mixvm-dual-split-active .mixvm-dual-pane .toolbar,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app .toolbar,
html.mixvm-dual-child-doc .toolbar {
    --mixvm-toolbar-h-gap: 4.8px;
    --mixvm-toolbar-btn-pad-x: 8.27px;
    --mixvm-toolbar-btn-inner-gap: 4.73px;
    /* 隐藏 toolbar-left 后须改为两列，否则 center/right 会落入第 1/2 列导致按钮靠左 */
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 12px;
    padding-right: 12px;
}
/* 右侧子窗：为父窗 fixed 右上角「切分」竖条（20px）留空，避免挡住板卡/示例下拉 */
html.mixvm-dual-child-doc .toolbar {
    padding-right: 28px;
}
body.mixvm-dual-split-active .mixvm-dual-pane .toolbar-center,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app .toolbar-center,
html.mixvm-dual-child-doc .toolbar-center {
    gap: 4px;
    grid-column: 1;
    justify-self: stretch;
    justify-content: center;
}
body.mixvm-dual-split-active .mixvm-dual-pane .toolbar-right,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app .toolbar-right,
html.mixvm-dual-child-doc .toolbar-right {
    gap: 4px;
    grid-column: 2;
    justify-self: end;
}
body.mixvm-dual-split-active .mixvm-dual-pane .toolbar .btn,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app .toolbar .btn,
html.mixvm-dual-child-doc .toolbar .btn {
    font-size: 12px;
}
body.mixvm-dual-split-active .mixvm-dual-pane #example-selector-wrap.example-combobox,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app #example-selector-wrap.example-combobox,
html.mixvm-dual-child-doc #example-selector-wrap.example-combobox {
    width: 128.16px;
    min-width: 100.34px;
}
body.mixvm-dual-split-active .mixvm-dual-pane .board-selector-combobox,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app .board-selector-combobox,
html.mixvm-dual-child-doc .board-selector-combobox {
    width: 120.25px;
    min-width: 92.69px;
}
body.mixvm-dual-split-active .mixvm-dual-pane .mixvm-lang-combobox,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app .mixvm-lang-combobox,
html.mixvm-dual-child-doc .mixvm-lang-combobox {
    width: 46.19px;
    min-width: 39.81px;
}
/* 双板切分：隐藏 Logo、网络、放大；合并切分后自动恢复 */
body.mixvm-dual-split-active .mixvm-dual-pane .toolbar-left,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app .toolbar-left,
html.mixvm-dual-child-doc .toolbar-left,
body.mixvm-dual-split-active .mixvm-dual-pane #btn-network,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app #btn-network,
html.mixvm-dual-child-doc #btn-network,
body.mixvm-dual-split-active .mixvm-dual-pane #btn-layout-zoom-toolbar,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app #btn-layout-zoom-toolbar,
html.mixvm-dual-child-doc #btn-layout-zoom-toolbar {
    display: none !important;
}

/* 双板切分：禁止 mixvm-sim-unavailable 收起顶栏/仿真（打开示例时 Mixly  reconcile 可能误加该类） */
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app.mixvm-sim-unavailable .toolbar,
html.mixvm-dual-child-doc .app-container.mixvm-sim-unavailable .toolbar {
    display: flex !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app.mixvm-sim-unavailable .panel-right,
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app.mixvm-sim-unavailable #resizer-h,
html.mixvm-dual-child-doc .app-container.mixvm-sim-unavailable .panel-right,
html.mixvm-dual-child-doc .app-container.mixvm-sim-unavailable #resizer-h {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}
body.mixvm-dual-split-active > .app-container.mixvm-dual-primary-app.mixvm-sim-unavailable #panel-mixly,
html.mixvm-dual-child-doc .app-container.mixvm-sim-unavailable #panel-mixly {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
}

/* Mixly 当前主控不在仿真支持列表：收起右侧仿真区与壳层顶栏（Mixly iframe 内仍有板卡/文件操作） */
.app-container.mixvm-sim-unavailable .toolbar {
    display: none !important;
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.app-container.mixvm-sim-unavailable .main-content {
    padding-top: 0 !important;
    transition: none;
}
.app-container.mixvm-sim-unavailable .panel-right,
.app-container.mixvm-sim-unavailable #resizer-h {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.app-container.mixvm-sim-unavailable #panel-mixly {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}
.app-container.mixvm-sim-unavailable.show-toolbar .main-content {
    padding-top: 0 !important;
    transition: none;
}
.app-container.mixvm-sim-unavailable .toolbar-trigger {
    display: none !important;
    pointer-events: none !important;
}
.app-container.mixvm-sim-unavailable #btn-simulation-toggle,
.app-container.mixvm-sim-unavailable #btn-layout-zoom-toolbar {
    display: none !important;
    pointer-events: none !important;
}
.toolbar-trigger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 顶栏整块接住指针，避免间隙/禁用控件把点击漏到下方 iframe */
.toolbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: auto;
}
.toolbar > * {
    position: relative;
    z-index: 1;
}

.toolbar-left, .toolbar-center, .toolbar-right {
    display: flex;
    align-items: center;
    align-self: center;
    min-height: 0;
}
.toolbar-left {
    justify-self: start;
    flex-shrink: 0;
}
.toolbar-center {
    gap: 10px;
    justify-self: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.toolbar-center::-webkit-scrollbar {
    display: none;
}
.toolbar-center .btn {
    flex-shrink: 0;
}
/* 板卡 / 示例 / 语言 三个下拉：水平间距（原 5px 的 2 倍） */
.toolbar-right {
    gap: 8px;
    justify-self: end;
    flex-shrink: 0;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-icon { height: calc(var(--mixvm-toolbar-control-h, 28px) - 2px); width: auto; object-fit: contain; display: block; }

.toolbar .btn {
    gap: var(--mixvm-toolbar-btn-inner-gap, 5.4px);
    padding: 0 var(--mixvm-toolbar-btn-pad-x, 10.8px);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--mixvm-toolbar-control-h, 28px);
    min-height: var(--mixvm-toolbar-control-h, 28px);
    padding: 0 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px var(--shadow-color);
    touch-action: manipulation;
}
.btn-icon { font-size: 12px; }
.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover:not(:disabled) { background: var(--border-color); }
.btn-secondary:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
    background: var(--bg-primary);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-run-stop-toolbar.running { background: #e74c3c; color: #fff; }
.btn-mixio-toolbar.running { background: #e74c3c; color: #fff; }
/* 仿真按钮：默认抬起（隐藏右侧），按下时显示右侧并保持按下样式 */
#btn-simulation-toggle.active {
    background: var(--accent-secondary);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
    border-color: var(--accent-primary);
}
/* 上传状态仅输出到控制台，工具栏不显示，保证界面固定 */
.upload-status-wrap {
    display: none !important;
}
.upload-status {
    font-size: 12px;
    color: var(--text-secondary);
}
.upload-status.uploading { color: var(--accent-primary); }
.upload-status.success { color: var(--accent-success); }
.upload-status.error { color: #e74c3c; }
.upload-progress {
    width: 100px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    display: none;
}
.upload-progress.visible {
    display: block;
}
.upload-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.12s ease-out;
}
/* 主界面「放大布局」：仿真 iframe 铺满视口，盖住左侧 Mixly（工具栏 z-index 更高仍可操作） */
#mixgo-frame.mixvm-layout-zoom-fullscreen {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    flex: none !important;
    z-index: 90 !important;
    border: none !important;
}
/* MixCK 放大：iframe 贴在工具栏下方，避免子页再 padding 导致左侧栏闪动 */
.app-container.show-toolbar #mixgo-frame.mixvm-layout-zoom-fullscreen.mixvm-layout-zoom-fullscreen-mixck {
    top: var(--mixvm-toolbar-h, 36px) !important;
    height: calc(100vh - var(--mixvm-toolbar-h, 36px)) !important;
    bottom: auto !important;
}
/* 布线放大：仿真 iframe 全屏铺底；左侧 Mixly 与分割条隐藏，避免挡住子页放大模态 */
body.mixvm-layout-zoom-active #panel-mixly,
body.mixvm-layout-zoom-active #resizer-h {
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
}
/* 双板切分：左侧布线放大勿用 fixed 铺满视口，否则会盖住右侧子窗 */
body.mixvm-dual-split-active.mixvm-layout-zoom-active > .app-container.mixvm-dual-primary-app #mixgo-frame.mixvm-layout-zoom-fullscreen,
body.mixvm-dual-split-active.mixvm-layout-zoom-active #mixvm-dual-pane-primary #mixgo-frame.mixvm-layout-zoom-fullscreen {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

.arduino-toolbar-group { display: inline-flex; align-items: center; gap: 6px; }

.toolbar-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}
.example-select {
    height: var(--mixvm-toolbar-control-h, 28px);
    min-height: var(--mixvm-toolbar-control-h, 28px);
    padding: 0 12px;
    box-sizing: border-box;
    background: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    width: 144px;
    touch-action: manipulation;
}
.example-select:focus { outline: none; border-color: var(--accent-primary); }
/* 整框一条边线：焦点/展开时描边在外层，避免输入框主题色边框与箭头按钮错位 */
.example-combobox {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    box-sizing: border-box;
    height: var(--mixvm-toolbar-control-h, 28px);
    min-height: var(--mixvm-toolbar-control-h, 28px);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-panel);
}
/* 仿真运行中：勿用 disabled（pointer-events:none 会让点击穿透顶栏落到 iframe） */
.example-combobox.mixvm-shell-combobox-locked {
    pointer-events: auto;
    cursor: not-allowed;
    opacity: 0.55;
}
.example-combobox.mixvm-shell-combobox-locked .mixvm-dd-face,
.example-combobox.mixvm-shell-combobox-locked .example-combobox-toggle,
.example-combobox.mixvm-shell-combobox-locked .example-combobox-input {
    pointer-events: none;
    cursor: not-allowed;
}
/* 示例代码 combobox 宽度（板卡 / 语言见各自 wrapper） */
#example-selector-wrap.example-combobox {
    width: 164px;
    min-width: 128px;
}
/* 板卡 / 语言：与示例代码相同外框（内为无边框 select + 右侧装饰 ▾，点击穿透至 select） */
.board-selector-combobox {
    width: 154px;
    min-width: 118px;
}
.mixvm-lang-combobox {
    width: 60px;
    min-width: 52px;
}
.mixvm-lang-combobox .mixvm-dd-face {
    padding: 0 2px 0 6px;
    font-size: 12px;
}
.mixvm-lang-combobox .example-combobox-toggle {
    width: 24px;
    padding: 0 2px;
}
/* 顶栏板卡 / 语言：隐藏 backing <select>，由自定义列表与示例下拉同色 */
select.mixvm-toolbar-dd-backing {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
button.mixvm-dd-face {
    touch-action: manipulation;
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    border: none;
    border-radius: 5px 0 0 5px;
    box-shadow: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    padding: 0 8px 0 12px;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
button.mixvm-dd-face:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* 载入早期 face 尚无文本时占住一行高度，避免工具栏下拉高度塌陷 */
button.mixvm-dd-face:empty::before {
    content: "\00a0";
}
.example-combobox.example-combobox-native > select.example-select {
    flex: 1;
    min-width: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
    border: none;
    border-radius: 5px 0 0 5px;
    box-shadow: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 6px 30px 6px 12px;
}
.example-combobox.example-combobox-native > select.example-select:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.example-combobox.example-combobox-native > select.example-select::-ms-expand {
    display: none;
}
.example-combobox.example-combobox-native::after {
    content: '▾';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border-color);
    border-radius: 0 5px 5px 0;
    font-size: 12px;
    line-height: 1;
    color: var(--text-primary);
    pointer-events: none;
    background: transparent;
}
.example-combobox.example-combobox-native:focus-within::after {
    border-left-color: var(--accent-primary);
}
.example-combobox:focus-within,
.example-combobox.example-combobox-open {
    border-color: var(--accent-primary);
}
/* 未选板卡时，#board-selector-wrap[data-empty="1"]：边框/焦点高亮使用与画布同色（--bg-primary #1a1a2e），不要红色提示色 */
.board-selector-combobox[data-empty="1"],
.board-selector-combobox[data-empty="1"]:focus-within,
.board-selector-combobox[data-empty="1"].example-combobox-open {
    border-color: var(--bg-primary);
}
.board-selector-combobox[data-empty="1"]:focus-within .example-combobox-toggle,
.board-selector-combobox[data-empty="1"].example-combobox-open .example-combobox-toggle {
    border-left-color: var(--bg-primary);
}
.example-combobox .example-combobox-input.example-select {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 100%;
    margin: 0;
    cursor: text;
    border: none;
    border-radius: 5px 0 0 5px;
    box-shadow: none;
    background: transparent;
    line-height: 1.2;
}
.example-combobox .example-combobox-input.example-select:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.example-combobox-toggle {
    touch-action: manipulation;
    flex-shrink: 0;
    align-self: stretch;
    width: 30px;
    min-height: 100%;
    padding: 0 4px;
    margin: 0;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-left: 1px solid var(--border-color);
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.example-combobox:focus-within .example-combobox-toggle,
.example-combobox.example-combobox-open .example-combobox-toggle {
    border-left-color: var(--accent-primary);
}
/* 展开时箭头向上（▾ 旋转 180°），收起时向下 */
.example-combobox.example-combobox-open .example-combobox-toggle {
    transform: rotate(180deg);
}
.example-combobox-toggle:hover:not(:disabled) {
    background: var(--bg-secondary, #2a2f3a);
}
.example-combobox-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.example-combobox-list {
    position: absolute;
    left: 0;
    right: auto;
    /* 下拉层宽度为触发框的 1.3 倍（仅展开列表，不改动 .example-combobox / 输入框宽度） */
    width: calc(100% * 1.3);
    min-width: calc(100% * 1.3);
    box-sizing: border-box;
    top: calc(100% + 2px);
    margin: 0;
    padding: 4px 0;
    list-style: none;
    max-height: min(50vh, 320px);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 2000;
    background: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.example-combobox-option {
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.example-combobox-option:hover,
.example-combobox-option:focus {
    background: var(--accent-primary, #3d5afe);
    color: #fff;
    outline: none;
}
.example-combobox-option.example-combobox-option-active {
    background: var(--accent-primary, #3d5afe);
    color: #fff;
    outline: none;
}
.example-combobox-option.example-combobox-option-active:hover {
    background: var(--accent-primary, #3d5afe);
    color: #fff;
}
.example-combobox-empty {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary, #888);
    cursor: default;
}

.panel { display: flex; flex-direction: column; background: var(--bg-panel); overflow: hidden; }

/* 与右侧 Mixgo SOWL 标题区齐平：固定高度 40px */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    min-height: 40px;
    padding: 0 15px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
    flex-shrink: 0;
}

.panel-title { display: flex; align-items: center; gap: 8px; }
.panel-info { color: var(--text-secondary); font-size: 12px; }
.panel-content { flex: 1; overflow: auto; }

.panel-left { flex: 1 1 66%; min-width: 0px; min-height: 0px; display: flex; flex-direction: column; }
/* 展开仿真分栏：允许拖到最左（右侧仿真占满），窄宽时裁切左侧 iframe */
body.mixvm-sim-split-active #panel-mixly {
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}
#mixly-frame {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    border: none;
    display: block;
}
/* 左侧 Mixly 须高于右侧仿真 iframe 叠层，避免分栏边界/全屏放大时误点到仿真内「运行/停止」 */
#panel-mixly {
    padding: 0;
    position: relative;
    z-index: 30;
}
#panel-mixly .load-error { flex-shrink: 0; }
.panel-left .panel-content { padding: 0; min-height: 260px; }

/* 移动端：允许左侧面板随分割条缩小，避免固定 min-width 把右侧仿真区域挤没 */
@media (max-width: 600px) {
    .panel-left {
        min-width: 0;
    }
    .panel-right {
        max-width: none;
    }
}
.load-error {
    padding: 12px 16px;
    margin: 8px 12px;
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid var(--accent-primary);
    border-radius: 8px;
    color: #ff8a9e;
    font-size: 13px;
    line-height: 1.5;
}
.load-error a { color: #0f4c75; text-decoration: underline; }

/* 左侧为 Mixly iframe，不再使用 CodeMirror */

/* 右侧仿真区占满主区域剩余宽度，右缘与浏览器内容区对齐；勿设 max-width，否则左侧较窄时会出现右侧大块留白 */
.panel-right {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
/* 壳层切板：Mixly/design 加载期间勿显示 about:blank 白底，用与 design-canvas 一致的网格底 */
body.mixvm-board-switch-pending .main-content,
body.mixvm-board-switch-pending .workspace-split {
    background: transparent;
}
body.mixvm-board-switch-pending #panel-mixly {
    background: transparent;
}
.panel-right.mixgo-switch-pending {
    background: #1a1a2e;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}
.panel-right.mixgo-switch-pending #mixgo-frame {
    /* 须保留 layout 尺寸以便子页 centerMainBoard；勿 display:none（会导致 clientWidth=0 居中后闪到左上角） */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* 未选板卡时（mixgo-frame 设为 about:blank 会显示浏览器默认白底）：
 * 隐藏 iframe，并把 .panel-right 渲染成与 .design-canvas 相同的深蓝紫 + 网格背景。
 * 选定板卡后 data-no-board 被移除，iframe 恢复显示、面板背景透明，不影响正常状态。 */
body[data-no-board="1"] #mixgo-frame {
    display: none !important;
}
body[data-no-board="1"] .panel-right {
    background: #1a1a2e;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.resizer-horizontal {
    width: 10px;
    min-width: 10px;
    background: var(--border-color);
    cursor: col-resize;
    transition: background 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
    touch-action: none; /* 触摸设备：避免拖拽手势被浏览器滚动/缩放接管 */
}
body.mixvm-sim-split-active #resizer-h {
    z-index: 40;
}
.resizer-horizontal::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    right: -6px;
    cursor: col-resize;
}
.resizer-horizontal:hover, .resizer-horizontal.active { background: var(--accent-primary); }

.editor-disabled { opacity: 0.6; pointer-events: none; }

/* 切板后暂隐右侧设计 iframe，子页首帧布局完成后再显示（见 js/main.js mixgoDesignInitialLayoutReady） */
iframe#mixgo-frame.mixgo-frame-layout-pending {
    visibility: hidden;
    pointer-events: none;
}

/* 放大布局：壳层全屏后暂隐 iframe，子页放大模态布局就绪后再显示，避免中间态闪现 */
iframe#mixgo-frame.mixvm-layout-zoom-shell-pending {
    visibility: hidden;
    pointer-events: none;
}

@media (hover: none) and (pointer: coarse) {
    .app-container.show-toolbar .toolbar {
        --mixvm-toolbar-h: 44px;
        height: 44px;
        min-height: 44px;
        padding-top: max(6px, env(safe-area-inset-top, 0px));
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }

    .app-container.show-toolbar .main-content {
        padding-top: calc(44px + env(safe-area-inset-top, 0px));
    }

    .toolbar-trigger {
        width: 28px;
        height: 44px;
        min-height: 44px;
    }

    .app-container.show-toolbar .toolbar-trigger {
        height: 44px;
        min-height: 44px;
    }

    .toolbar .btn {
        min-height: 44px;
        height: 44px;
        padding: 0 var(--mixvm-toolbar-btn-pad-x, 10.8px);
    }

    .example-combobox {
        height: 44px;
        min-height: 44px;
    }

    .example-combobox-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    .example-combobox .example-combobox-input.example-select {
        min-height: 44px;
        height: 44px;
    }

    .example-combobox-option {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .resizer-horizontal {
        min-width: 16px;
    }

    .resizer-horizontal::before {
        width: 6px;
    }

    .mixvm-dual-resizer {
        width: 20px;
        min-width: 20px;
    }

    .resizer-vertical {
        height: 16px;
    }

    .btn-run-stop,
    .btn-tool,
    .library-toggle-btn {
        min-height: 44px;
    }

    .device-icon {
        min-height: 44px;
        box-sizing: border-box;
    }
}