styles.css

/* ═══════════════════════════════════════════════════════════════
 *  styles.css — 全局样式表
 *
 *  字体策略：中文使用项目内的开源 Noto Sans SC；英文/数字沿用等宽字体。
 *    结构：
 *    1. CSS 变量（:root）
 *    2. 全局重置与布局
 *    3. 侧栏（sidebar、tab-bar、control-group）
 *    4. 主显示区（canvas-wrapper、plot-header、monitor-panel）
 *    5. 侧栏分隔条与监视台工作区
 *    6. 发送面板（send-panel）
 *    7. 滚动条样式
 * ═══════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Plotter CJK Sans';
    src: local('Noto Sans SC'), url('assets/fonts/noto-sans-sc.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+2E80-2FFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF,
        U+F900-FAFF, U+FE10-FE6F, U+FF00-FFEF, U+20000-323AF;
}

/* ── CSS 变量 ── */
:root {
    --sidebar-bg: #f3f4f6;
    --bg-main: #e8eaed;
    --border: #d1d5db;
    --primary: #0056b3;
    --primary-h: #004494;
    --secondary: #6c757d;
    --secondary-h: #5a6268;
    --danger: #dc3545;
    --danger-h: #c82333;
    --success: #198754;
    --success-h: #157347;
    --text: #212529;
    --text-sub: #495057;
    --sidebar-w: 268px;
    --channel-sidebar-w: 320px;
    --h-resizer-w: 5px;
    --ui-font: 'Plotter CJK Sans', 'Cascadia Mono', Consolas, 'Courier New',
        'Liberation Mono', 'DejaVu Sans Mono', 'Noto Sans Mono',
        'Noto Sans CJK SC', 'Source Han Sans SC', 'Microsoft YaHei', SimHei, sans-serif;
}

/* ── 全局重置 ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--ui-font);
}

/* ── 布局基础 ── */
body {
    background: var(--bg-main);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
}

/* ── 应用外壳 ── */
.app-container {
    display: flex;
    width: 100vw;
    min-width: 750px;
    height: 100vh;
    overflow: hidden;
}

/* ── 配置侧栏 ── */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    max-width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    flex: 1;
}
.sidebar-top .tab-content { min-height: 0; }
.format-status[data-state="invalid"] { color: #b42318; }
.export-metadata { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.export-panel { flex: 0 0 auto; }
.export-range-summary { margin: 8px 0; padding: 6px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; white-space: pre-line; }
.export-channels { margin-bottom: 8px; }
.export-channel-heading { color: var(--text-sub); margin-bottom: 6px; font-size: 0.66rem; font-weight: 500; }
.export-channel-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 3px 7px;
    margin: 6px 0;
}
.export-channel-choice { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 18px; font-size: 0.68rem; line-height: 1.4; cursor: pointer; }
.export-channel-choice input { flex-shrink: 0; width: 13px; height: 13px; accent-color: var(--primary); }
.export-channel-choice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.channel-sidebar {
    width: var(--channel-sidebar-w);
    min-width: var(--channel-sidebar-w);
    max-width: var(--channel-sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    border-left: 1px solid var(--border);
    overflow: hidden;
}
.channel-settings-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.channel-settings-content .tab-content { min-height: 0; }

.app-title {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.3px;
    flex-shrink: 0;
}

/* ── 水平分隔条（侧栏 ↔ 主区域）── */
.h-resizer {
    width: var(--h-resizer-w);
    background: var(--border);
    cursor: ew-resize;
    touch-action: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;       /* 为 ::before 手柄指示器提供定位基准 */
    transition: background .15s;
}

.h-resizer::before {
    content: '';
    width: 1px;
    height: 40px;
    background: #aaa;
    border-radius: 1px;
}

.h-resizer:hover {
    background: #bbc;
}

/* ── 侧栏 Tab 栏 ── */
.tab-bar {
    display: flex;
    border-bottom: 2px solid var(--border);
    flex-shrink: 0;
    background: #ebedf0;
}

.tab-btn {
    flex: 1;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-sub);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}

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

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--sidebar-bg);
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--sidebar-bg);
    border-bottom: 2px solid var(--primary);
}

/* ── 侧栏 Tab 内容区 ── */
.tab-content {
    display: none;
    flex-direction: column;
    gap: 9px;
    padding: 9px;
    overflow-y: auto;
    flex: 1;
}

.tab-content.active {
    display: flex;
}

.channels-list-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.channels-display-panel {
    flex: 0 0 auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.monitor-settings-panel { flex: 0 0 auto; }
.channel-settings-content .tab-btn { line-height: 1.4; padding-inline: 4px; }
.settings-tabs {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 3px;
    padding: 4px;
    border-bottom: 1px solid var(--border);
}
.settings-tabs .tab-btn {
    flex: 1 0 auto;
    min-width: max-content;
    white-space: nowrap;
    height: 28px;
    padding: 3px 4px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: #f7f9fb;
}
.settings-tabs .tab-btn:hover { border-color: #94b6d8; background: #edf4fb; }
.settings-tabs .tab-btn.active { border-color: var(--primary); background: #e6f0fb; }
.settings-tabs .tab-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.sidebar-status { margin: 6px 9px 0; flex: 0 0 auto; }
.monitor-channel-options { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.monitor-channel-choice { display: flex; align-items: center; gap: 7px; padding: 4px 2px; cursor: pointer; }
.monitor-channel-choice span { min-width: 0; overflow-wrap: anywhere; font-size: 0.7rem; }
.monitor-channel-choice input[type="text"] { min-width: 0; flex: 1; height: 22px; padding: 2px 4px; font-size: .68rem; }
.monitor-options { display: flex; flex-direction: column; gap: 6px; }
.monitor-checkboxes { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.monitor-keywords {
    width: 100%;
    min-height: 70px;
    padding: 4px 6px;
    resize: vertical;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    font-size: 0.72rem;
    outline: none;
}
.monitor-keywords:focus { border-color: var(--primary); }
.monitor-color {
    padding: 1px 2px;
    background: #fff;
}
.monitor-display-status { color: #b42318; }
.monitor-color-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    gap: 4px 8px;
}
.monitor-color-grid label { margin: 0; font-size: 0.68rem; line-height: 1.4; color: var(--text-sub); }
.monitor-color-grid .monitor-color { min-width: 0; }

.channel-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.channel-toolbar-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.channel-toolbar-actions .btn {
    width: auto;
    flex: 1;
    min-width: 92px;
}

.channel-config-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

/* ── 侧栏控件组 ── */
.control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 7px 8px;
}

.section-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: .5px;
    border-left: 3px solid var(--primary);
    padding-left: 5px;
}

.row {
    display: flex;
    gap: 7px;
}

.row .input-group {
    flex: 1;
}

.buffer-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.axis-options {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.numeric-frame-settings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--text-sub);
}

.option-label {
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--text-sub);
}

input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    font-size: 0.72rem;
    outline: none;
    font-family: inherit;
}

input:focus,
select:focus {
    border-color: var(--primary);
}

button:disabled, select:disabled {
    opacity: 0.5;
    cursor: default;
}

.hint-text {
    font-size: 0.63rem;
    color: #9ca3af;
    line-height: 1.4;
}

code {
    background: #e2e8f0;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-family: var(--ui-font);
}

/* ── Checkbox ── */
.chk-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.chk-label input[type="checkbox"] {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}

/* ── Buttons ── */
.btn {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background .15s;
}

.btn:active {
    opacity: .8;
}

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

.btn-primary:hover {
    background: var(--primary-h);
}

.btn-secondary {
    background: var(--secondary);
    color: #fff;
}

.btn-secondary:hover {
    background: var(--secondary-h);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: var(--danger-h);
}

.btn-success {
    background: var(--success);
    color: #fff;
    font-weight: 700;
}

.btn-success:hover {
    background: var(--success-h);
}

.status-text {
    font-size: 0.65rem;
    color: var(--secondary);
    min-height: 1em;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, .2);
    flex-shrink: 0;
}

.status-dot.disconnected {
    background: var(--danger);
}

.status-dot.connected {
    background: var(--success);
}

/* ── 通道配置列表 ── */
.channel-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 3px 0;
    border-bottom: 1px solid #f0f0f0;
}

.channel-row-main {
    display: grid;
    grid-template-columns: 40px 22px minmax(0, 1fr) 13px;
    align-items: center;
    gap: 5px;
}

.channel-transform-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 1px 0 1px 45px;
}

.channel-transform-options[hidden] {
    display: none;
}

.channel-transform-option {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}

.channel-transform-option input[type="number"] {
    width: 100%;
    padding: 2px 4px;
    height: 22px;
}

.channel-row:last-child {
    border-bottom: none;
}

.channel-row-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-sub);
    min-width: 26px;
}

.channel-expand-toggle {
    min-width: 40px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    padding: 2px 0;
    white-space: nowrap;
}

.channel-expand-toggle::after {
    content: '▸';
    padding-left: 3px;
}

.channel-expand-toggle[aria-expanded="true"]::after {
    content: '▾';
}

.channel-color-swatch,
.monitor-color {
    width: 22px;
    height: 17px;
    border-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    flex-shrink: 0;
}

.channel-vis-chk {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}

input.channel-name-input {
    min-width: 0;
    height: 22px;
    padding: 2px 5px;
    font-size: 0.68rem;
    line-height: 1.4;
    border: 1px solid var(--border);
    border-radius: 3px;
}

/* ── 主显示区（中央）── */
.main-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    overflow-y: auto;
}

.box-border {
    background: #111;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, .5);
    border-radius: 3px;
}

/* ── 可移动、按网格步进调整大小的监视台工作区 ── */
.monitor-workspace { display: flex; flex-direction: column; flex: 1 1 0; min-height: 150px; min-width: 0; }
.workspace-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    padding: 3px 8px;
    min-height: 30px;
    background: #18212a;
    color: #bcc9d6;
    border: 1px solid #354351;
    font-size: 0.7rem;
}
.workspace-label { margin-right: auto; color: #dce6ef; font-weight: 700; }
.widget-delete-dialog { position: fixed; inset: 0; margin: auto; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 18px; border: 1px solid #536374; border-radius: 6px; background: #18212a; color: #e0e9f1; }
.widget-delete-dialog::backdrop { background: #0009; }
.widget-delete-dialog h2 { margin: 0 0 12px; font-size: 1rem; }
.widget-delete-dialog p { margin: 0 0 18px; overflow-wrap: anywhere; font-size: .85rem; }
.widget-delete-actions { display: flex; justify-content: flex-end; gap: 8px; }
.widget-delete-actions .btn { width: auto; }
.workspace-toolbar label { margin: 0; white-space: nowrap; }
.workspace-toolbar select, .workspace-toolbar button {
    width: auto;
    min-height: 24px;
    padding: 2px 6px;
    border: 1px solid #465869;
    border-radius: 3px;
    background: #22303d;
    color: #e0e9f1;
    font-size: inherit;
}
.workspace-toolbar button { cursor: pointer; }
.workspace-toolbar button:hover { background: #304557; }
.workspace-zoom-input { display: inline-flex; align-items: center; gap: 3px; }
#workspace-zoom-percent { width: 64px; padding: 3px 5px; color: #ddd; background: #202a34; border: 1px solid #465567; border-radius: 3px; font-size: inherit; }
.workspace-selection-box { position: absolute; pointer-events: none; border: 1px solid #79b5e6; background: #79b5e622; z-index: 1000; }
.workspace-surface > .workspace-panel-selected { outline: 2px solid #79b5e6; outline-offset: -2px; }
.workspace-toolbar :is(button, select):focus-visible { outline: 2px solid #79b5e6; outline-offset: 1px; }
.workspace-viewport { flex: 1 1 0; min-height: 120px; min-width: 0; overflow: auto; background: #0c1117; }
.workspace-surface {
    --workspace-step: 10px;
    position: relative;
    background-image: radial-gradient(#35414d 0.7px, transparent 0.7px);
    background-size: var(--workspace-step) var(--workspace-step);
}
.workspace-surface > .workspace-panel { position: absolute; border-color: #536374; padding: 5px; }
.workspace-surface > .workspace-panel-active { border-color: #79b5e6; }
.workspace-drag-handle { cursor: grab; touch-action: none; }
.workspace-drag-handle:active { cursor: grabbing; }
.workspace-drag-handle:focus-visible { outline: 2px solid #79b5e6; outline-offset: -2px; }
.workspace-resize-handle { position: absolute; z-index: 4; touch-action: none; }
.workspace-resize-n, .workspace-resize-s { left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.workspace-resize-n { top: 0; }
.workspace-resize-s { bottom: 0; }
.workspace-resize-e, .workspace-resize-w { top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.workspace-resize-e { right: 0; }
.workspace-resize-w { left: 0; }
.workspace-resize-ne, .workspace-resize-se, .workspace-resize-sw, .workspace-resize-nw { width: 10px; height: 10px; }
.workspace-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
.workspace-resize-se { bottom: 0; right: 0; cursor: nwse-resize; }
.workspace-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.workspace-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
.workspace-resize-se::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 5px;
    height: 5px;
    border-right: 1px solid #8294a5;
    border-bottom: 1px solid #8294a5;
}
.workspace-panel .plot-y-scrollbar-wrap { right: 7px; }
.workspace-panel .plot-scrollbar-wrap { flex-shrink: 0; }

.pose-panel { display: flex; flex-direction: column; overflow: hidden; }
.pose-header { flex: 0 0 auto; background: #1a1a1a; color: #eee; border-bottom: 1px solid #333; }
.pose-header [data-role="stat-plot-fps"] { margin-left: auto; font-size: .7rem; }
.pose-panel canvas { display: block; width: 100%; flex: 1 1 0; min-height: 0; min-width: 0; touch-action: none; }
.pose-status { flex: 0 0 auto; padding: 4px 6px; color: #a8c7dc; font-size: .65rem; overflow-wrap: anywhere; border-top: 1px solid #333; }
.pose-status[data-valid="false"] { color: #ffd078; }
.pose-matrix-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pose-component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 4px; }
.pose-overlay-component { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 6px; align-items: start; }
.pose-input-group { min-width: 0; }
.pose-input-group input[type="checkbox"] { width: 14px; height: 14px; }
.pose-error { color: #c33232; font-size: .7rem; overflow-wrap: anywhere; margin: 4px 0; }

/* ── 波形绘图区 ── */
.canvas-wrapper {
    --monitor-title-bg: #1a1a1a;
    --monitor-bar-bg: #151515;
    --monitor-divider: #333;
    --monitor-fg: #e6e6e6;
    --monitor-accent: #a8c8e8;
    container: monitor / inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 60px;
    overflow: hidden;
}

canvas {
    flex: 1;
    display: block;
    width: 100%;
    min-height: 0;
}

[data-role="waveform-canvas"] {
    cursor: crosshair;
    touch-action: none;
}

/* Instance controls keep the compact monitor visual language. */
.workspace-empty { padding: 42px 24px; color: #9bacbd; text-align: center; font-size: .8rem; pointer-events: none; }
.widget-library-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px;
    padding: 12px 10px; margin-bottom: 10px; border: 1px solid var(--border);
    border-radius: 4px; background: #f7fafc; cursor: grab; touch-action: none;
}
.widget-library-item > span { font-size: .8rem; font-weight: 700; }
.widget-library-item > small { grid-column: 1; color: var(--text-sub); font-size: .65rem; }
.widget-library-item > button { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 5px 8px; cursor: pointer; }
.widget-drop-preview { position: absolute; z-index: 10; border: 2px dashed #79b5e6; border-radius: 3px; background: #79b5e61a; pointer-events: none; }
.widget-close { border: none; background: transparent; color: #aab6c2; font: inherit; font-size: 1rem; cursor: pointer; padding: 0 4px; }
.widget-close:hover { color: #ff7272; }
.workspace-widget .monitor-title-row { flex-wrap: nowrap; min-height: 28px; padding: 3px 7px; gap: 8px; }
.workspace-widget .monitor-title-row > :first-child { margin-right: auto; overflow: hidden; text-overflow: ellipsis; }
.workspace-widget [data-role="stat-plot-fps"] { flex: 0 0 auto; color: #bbc8d5; font-size: .65rem; font-variant-numeric: tabular-nums; }
.widget-selection-prompt { padding: 20px 14px; color: var(--text-sub); font-size: .75rem; }
.widget-title-tools { display: flex; padding: 8px 10px; gap: 6px; border-bottom: 1px solid var(--border); }
.widget-title-tools > input { min-width: 0; flex: 1; font-size: .75rem; padding: 3px 5px; }
.widget-title-tools > button { width: auto; }
.channel-config-row { padding: 3px 0; border-bottom: 1px solid #eceff2; }
.channel-config-main { display: grid; grid-template-columns: 48px 22px minmax(0, 1fr) 13px; align-items: center; gap: 5px; }
.channel-config-main :is(.channel-toggle, .channel-label) { padding: 1px 0; border: 0; background: transparent; font-size: .65rem; text-align: left; white-space: nowrap; }
.channel-config-main .channel-toggle { cursor: pointer; }
.channel-config-main .channel-toggle[draggable="true"] { cursor: grab; }
.channel-config-main.channel-dragging { opacity: .5; }
.channel-config-main.channel-drop-target { box-shadow: inset 0 2px #007bff, inset 0 -2px #007bff; background: #eef6ff; }
.channel-config-main input[type="color"] { width: 22px; height: 17px; padding: 0; border: 1px solid #ccc; }
.channel-config-main input[type="text"] { min-width: 0; height: 22px; padding: 2px 4px; font-size: .68rem; }
.channel-definition, .channel-definition-error { grid-column: 1 / -1; min-width: 0; }
.channel-definition { display: grid; gap: 6px; padding: 5px 0 3px; }
.channel-definition[hidden], .channel-definition-error[hidden] { display: none; }
.channel-definition label { display: grid; gap: 3px; margin: 0; font-size: .7rem; }
.channel-definition textarea { width: 100%; min-width: 0; padding: 4px; resize: vertical; font: inherit; }
.channel-definition-error { color: #b42318; font-size: .7rem; overflow-wrap: anywhere; }
.channel-delete { justify-self: start; padding: 3px 7px; font-size: .7rem; }
.channel-definition-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.channel-definition-actions .btn { width: auto; padding: 3px 7px; font-size: .7rem; white-space: nowrap; }
.channel-create { display: flex; gap: 5px; margin: 6px 0; align-items: center; }
.channel-create select { min-width: 0; flex: 1; font-size: .72rem; }
.channel-create .btn { width: auto; flex: 0 0 auto; padding: 5px 7px; font-size: .72rem; white-space: nowrap; }
.channel-help { margin: 4px 0 8px; line-height: 1.5; }
.channel-help p { margin: 2px 0; }
.channel-definition .channel-delete { width: auto; }
.channel-transform-row { display: grid; grid-template-columns: 13px 76px minmax(0, 1fr); align-items: center; gap: 5px; font-size: .68rem; }
.channel-transform-row input[type="number"] { min-width: 0; height: 22px; padding: 2px 4px; }
.global-send { flex: 0 0 auto; margin-top: 5px; color: #d4dfeb; }
.global-send-title { margin: 0; background: #18212a; padding: 5px 10px; font-size: .7rem; }
.send-resizer {
    height: 7px;
    background: #26313d;
    cursor: ns-resize;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.send-resizer::before { content: ''; width: 36px; height: 2px; background: #8b9bad; border-radius: 1px; }
.send-resizer:hover, .send-resizer:focus-visible { background: #3c5065; }
#monitor-search-origin { width: 170px; }

.plot-header {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: var(--monitor-bar-bg);
}

.monitor-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-height: 30px;
    padding: 4px 10px;
    background: var(--monitor-title-bg);
    border-bottom: 1px solid var(--monitor-divider);
    color: #fff;
}

.plot-title, .monitor-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .2px;
    white-space: nowrap;
}

.jump-toolbar, .monitor-search-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 6px;
    padding: 3px 6px;
    font-size: 0.7rem;
    color: var(--monitor-fg);
}

.monitor-tool-row {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    min-width: 0;
    background: var(--monitor-bar-bg);
    border-bottom: 1px solid var(--monitor-divider);
}
.tool-label {
    flex: 0 0 72px;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 3px 0 3px 10px;
    color: var(--monitor-accent);
    font-size: 0.7rem;
    white-space: nowrap;
}
.monitor-tool-row.tools-disabled { opacity: 0.55; }
.monitor-tool-row .jump-toolbar,
.monitor-tool-row .monitor-search-toolbar {
    flex: 1 1 auto;
    min-width: 0;
}
.navigation-panel :is(input[type="text"], input[type="number"], input[type="datetime-local"]) {
    height: 24px;
    padding: 3px 6px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    font: inherit;
    font-size: 0.7rem;
    color-scheme: light;
}
.navigation-panel :is(input[type="text"], input[type="number"], input[type="datetime-local"]):focus { border-color: var(--primary); }

.jump-selection-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 4px; flex: 1 1 auto; min-width: 0; }
#nav-jump-mode { flex: 0 0 94px; width: 94px; }
.jump-time-value { display: flex; align-items: center; gap: 4px; flex: 0 1 250px; min-width: 250px; max-width: 250px; }
.jump-time-value input { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; }
#nav-jump-relative-unit { flex: 0 0 auto; color: var(--monitor-fg); }
.jump-selection-row button { flex: 0 0 auto; }
.jump-status { flex: 1 1 80px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.jump-status:empty { display: none; }
.jump-toolbar button, .monitor-search-toolbar button {
    padding: 3px 8px;
    min-height: 24px;
    border: 1px solid #505050;
    border-radius: 3px;
    color: #f0f0f0;
    background: #303030;
    cursor: pointer;
}
.jump-toolbar button:hover, .monitor-search-toolbar button:hover { background: #454545; }
.monitor-search-toolbar button { padding-inline: 6px; }
.jump-status, #monitor-search-status { color: #a5c9f0; }
.monitor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.7rem;
}
.monitor-search-toolbar { align-items: center; }
.search-fields { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.search-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; white-space: nowrap; }
.search-origin-group { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; max-width: 100%; color: #ddd; }
.search-case-option { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 4px; margin: 0; color: var(--monitor-fg); white-space: nowrap; }
.search-case-option input { accent-color: var(--primary); }
#monitor-search-origin { width: 162px; max-width: 100%; }
#monitor-search-query { flex: 0 1 180px; width: 180px; min-width: 100px; }
#monitor-search-tolerance { flex: 0 0 75px; width: 75px; }
#monitor-search-channel { position: relative; flex: 0 0 105px; width: 105px; }
#monitor-search-channel-toggle {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.search-channel-options {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    z-index: 5;
    width: max-content;
    min-width: 150px;
    max-width: min(320px, calc(100vw - 32px));
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #666;
    border-radius: 4px;
    background: #242424;
    box-shadow: 0 4px 12px #0008;
}
.search-channel-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 5px;
    color: #eee;
    white-space: nowrap;
    cursor: pointer;
}
.search-channel-options label:hover { background: #383838; }
.search-channel-options input { margin: 0; flex-shrink: 0; }
.search-channel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container monitor (max-width: 600px) {
    .search-fields:has(#monitor-search-channel:not([hidden])) { flex: 0 0 100%; }
    .search-fields:has(#monitor-search-channel:not([hidden])) #monitor-search-query {
        flex: 1 1 70px;
        width: auto;
        min-width: 50px;
    }
    .search-fields:has(#monitor-search-channel:not([hidden])) #monitor-search-tolerance {
        flex: 0 0 65px;
        width: 65px;
    }
    .search-fields:has(#monitor-search-channel:not([hidden])) #monitor-search-channel {
        flex: 0 0 90px;
        width: 90px;
    }
}
#monitor-search-status {
    flex: 0 0 150px;
    min-width: 0;
    min-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[hidden] { display: none !important; }

.history-rebuild-progress {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid #3d4652;
    background: #19232e;
    color: #d5eaff;
    font-size: 12px;
}

#stat-fail { flex-basis: auto; }
#stat-fail-value { min-width: 8ch; width: auto; }

#stat-plot-fps {
    font-size: 0.68rem;
    color: #ffffff;
    white-space: nowrap;
    min-width: 20ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 两个监视台共用统计栏的间距和分隔线。 */
.monitor-stats-row {
    background: var(--monitor-bar-bg);
    border-bottom: 1px solid var(--monitor-divider);
    padding: 4px 10px;
    font-size: 0.72rem;
    color: var(--monitor-fg);
    font-family: var(--ui-font);
    font-variant-numeric: tabular-nums;
}

.monitor-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 12px;
    align-items: start;
    width: 100%;
}

.monitor-stat-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5ch;
    min-width: 0;
    color: var(--monitor-fg);
}

.monitor-stat-label { flex: 0 0 auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.monitor-stat-value { min-width: 0; overflow-wrap: anywhere; }

@container monitor (max-width: 700px) {
    .monitor-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 波形滚动条 ── */
.plot-scrollbar-wrap {
    height: 11px;
    background: #1c1c1c;
    border-top: 1px solid #333;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.plot-scrollbar-thumb {
    position: absolute;
    top: 2px;
    height: 7px;
    background: #4a4a4a;
    border-radius: 4px;
    cursor: grab;
    min-width: 20px;
    transition: background .1s;
}

.plot-scrollbar-thumb:hover {
    background: #6a6a6a;
}

.plot-scrollbar-thumb:active {
    background: #8a8a8a;
    cursor: grabbing;
}

.plot-y-scrollbar-wrap {
    position: absolute;
    right: 2px;
    width: 11px;
    background: #1c1c1c;
    border-left: 1px solid #333;
    cursor: pointer;
}

.plot-y-scrollbar-wrap[hidden] { display: none; }

.plot-y-scrollbar-thumb {
    position: absolute;
    left: 2px;
    width: 7px;
    background: #4a4a4a;
    border-radius: 4px;
    cursor: grab;
    min-height: 20px;
}

.plot-y-scrollbar-thumb:hover { background: #6a6a6a; }
.plot-y-scrollbar-thumb:active { background: #8a8a8a; cursor: grabbing; }

.navigation-panel {
    --monitor-title-bg: #1a1a1a;
    --monitor-bar-bg: #151515;
    --monitor-divider: #333;
    --monitor-fg: #e6e6e6;
    --monitor-accent: #a8c8e8;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    overflow: visible;
    container: monitor / inline-size;
    margin-top: 6px;
}

.navigation-panel .monitor-tool-row:last-child { border-bottom: 0; }

@container monitor (max-width: 400px) {
    .navigation-panel .monitor-tool-row { flex-wrap: wrap; }
    .navigation-panel .tool-label { flex-basis: 100%; height: 24px; }
    .navigation-panel .jump-toolbar,
    .navigation-panel .monitor-search-toolbar { flex-basis: 100%; }
    .navigation-panel .jump-time-value { flex-basis: 240px; min-width: 240px; max-width: 240px; }
}

/* ── 字节流监视台 ── */
.monitor-panel {
    --monitor-title-bg: #1a1a1a;
    --monitor-bar-bg: #151515;
    --monitor-divider: #333;
    --monitor-fg: #e6e6e6;
    --monitor-accent: #a8c8e8;
    display: flex;
    flex-direction: column;
    min-height: 100px;
    overflow: hidden;
    container: monitor / inline-size;
}

.monitor-header {
    flex-shrink: 0;
}

.monitor-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 14px;
    margin-left: auto;
    min-width: 0;
}

.monitor-format-row { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 0.7rem; }
.monitor-format-choices { padding: 0; gap: 3px 8px; }
.monitor-format-choices label { color: #ddd; font-weight: 400; }
.navigation-panel .monitor-format-row { min-height: 30px; padding: 3px 6px; }

/* ── 字节流监视台统计 ── */
.stats-bar-row {
    min-height: 18px;
    flex-shrink: 0;
}

.log-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 92px;
    font-family: var(--ui-font);
    font-size: 0.7rem;
    line-height: 1.45;
    color: #00e676;
    padding: 6px 10px;
    white-space: normal;
}

.monitor-spacer { position: relative; width: 100%; }
.monitor-measure { position: absolute; visibility: hidden; white-space: pre; }
.monitor-row {
    position: absolute;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    line-height: 20px;
}
.monitor-prefix, .monitor-data { white-space: pre; }
.monitor-data { min-width: 0; }
.monitor-fold-toggle {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    height: 20px;
    margin: 0;
    padding: 0 4px;
    border: 1px solid #42647c;
    border-radius: 3px;
    background: #18232f;
    color: #aad7ff;
    font: inherit;
    font-size: 0.65rem;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    cursor: pointer;
}
.monitor-fold-toggle:hover { background: #23384a; }
.monitor-fold-toggle:focus-visible { outline: 2px solid #a5d6ff; outline-offset: -2px; }
.monitor-keyword { background: rgba(188, 143, 255, .16); font-weight: normal; border-radius: 2px; }
.monitor-search-match { background: #745a00; color: #fff; border-radius: 2px; }
.monitor-search-current { background: #ff8c00; color: #111; border-radius: 2px; }
.monitor-cursor { outline: 1px solid #5c90be; outline-offset: -1px; }

/* ── 日志颜色（蓝=接收成功，黄=接收错误，绿=发送成功，红=发送失败）── */
.log-content .log-rx-ok {
    color: #50b4ff;
}

.log-content .log-rx-error {
    color: #ffcc02;
}

.log-content .log-tx-ok {
    color: #63ff9a;
}

.log-content .log-tx-error {
    color: #ff5a5a;
}

/* Vertical resizer between log and send panel */
/* .v-resizer-inner {
    height: 4px;
    background: #2a2a2a;
    cursor: ns-resize;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.v-resizer-inner::before {
    content: '';
    width: 30px;
    height: 2px;
    background: #777;
    border-radius: 2px;
}

.v-resizer-inner:hover {
    background: #3a3a3a;
} */

/* ── 发送面板 ── */
.send-panel {
    border-top: 1px solid var(--monitor-divider);
    background: var(--monitor-bar-bg);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 8px 5px;
    min-height: 0;
}

.send-toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.send-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.send-mode-row { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.send-mode-row > label { color: #aaa; font-size: 0.68rem; }
#send-mode { width: 70px; }
#send-interval-unit { width: 60px; }

.navigation-panel select, .send-panel select {
    min-height: 24px;
    background: #2a2a2a;
    border-color: #505050;
    color: #eee;
    font-size: 0.7rem;
    color-scheme: dark;
}

.send-toolbar .interval-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    flex: 1;
    min-width: 210px;
}

.send-toolbar .interval-wrap label {
    font-size: 0.63rem;
    color: #888;
    white-space: nowrap;
}

.send-toolbar .interval-wrap input[type="number"] {
    width: 72px;
    background: #2a2a2a;
    border: 1px solid #444;
    color: #ddd;
    border-radius: 3px;
    font-size: 0.68rem;
    padding: 3px 5px;
}

.send-toolbar .btn {
    font-size: 0.68rem;
    padding: 3px 8px;
    width: auto;
    flex-shrink: 0;
}

#send-input {
    width: 100%;
    flex: 0 0 auto;
    height: calc(4 * 1.2em + 6px);
    min-height: calc(4 * 1.2em + 6px);
    background: #1e1e1e;
    border: 1px solid #333;
    color: #ddd;
    font-family: var(--ui-font);
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 3px;
    resize: none;
    outline: none;
    line-height: 1.2;
}

#send-input:focus {
    border-color: #555;
}

/* ── 全局滚动条 ── */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

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

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}