* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Microsoft YaHei', 'Consolas', monospace; background: #1a1a2e; color: #e0e0e0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; user-select: none; }

/* === Top config bar === */
#config-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #16213e; border-bottom: 1px solid #0f3460; flex-shrink: 0; flex-wrap: wrap; }
#config-bar label { font-size: 12px; color: #a0a0c0; }
#config-bar select { background: #0f3460; color: #e0e0e0; border: 1px solid #1a4080; border-radius: 3px; padding: 3px 6px; font-size: 12px; font-family: inherit; cursor: pointer; }
#config-bar select:focus { outline: none; border-color: #4a90d9; }
.btn { padding: 4px 14px; border: none; border-radius: 3px; font-size: 12px; font-family: inherit; cursor: pointer; font-weight: bold; transition: opacity 0.15s; }
.btn:hover { opacity: 0.85; }
#btn-connect { background: #4a90d9; color: #fff; min-width: 80px; }
#btn-connect.connected { background: #e74c3c; }
#btn-export { background: #9b59b6; color: #fff; }
#btn-import { background: #e67e22; color: #fff; }
#btn-port { background: #2ecc71; color: #fff; }
#btn-port.has-port { background: #0f3460; color: #4a90d9; border: 1px solid #4a90d9; }
#btn-lang { background: #0f3460; color: #4a90d9; border: 1px solid #4a90d9; border-radius: 3px; padding: 3px 10px; font-size: 12px; font-family: inherit; cursor: pointer; font-weight: bold; min-width: 32px; }
#btn-lang:hover { background: #4a90d9; color: #fff; }
.separator { width: 1px; height: 20px; background: #0f3460; margin: 0 4px; }
#port-info { font-size: 12px; color: #4a90d9; font-weight: bold; min-width: 60px; }

/* === Main area === */
#main { display: flex; flex: 1; overflow: hidden; }

/* === Sidebar === */
#sidebar { width: 220px; min-width: 160px; background: #16213e; border-right: 1px solid #0f3460; display: flex; flex-direction: column; flex-shrink: 0; }
#sidebar-header { padding: 8px 10px; font-size: 13px; font-weight: bold; color: #4a90d9; border-bottom: 1px solid #0f3460; display: flex; justify-content: space-between; align-items: center; }
#sidebar-header .btns { display: flex; gap: 4px; }
#sidebar-header button { background: none; border: 1px solid #4a90d9; color: #4a90d9; border-radius: 3px; padding: 1px 8px; font-size: 11px; cursor: pointer; font-family: inherit; }
#sidebar-header button:hover { background: #4a90d9; color: #fff; }
#channel-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.channel-group { padding: 2px 10px; }
.channel-group-header { display: flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer; font-size: 12px; font-weight: bold; }
.channel-group-header .arrow { font-size: 10px; transition: transform 0.15s; width: 12px; text-align: center; }
.channel-group-header .arrow.collapsed { transform: rotate(-90deg); }
.channel-group-header .type-color { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.channel-item { display: flex; align-items: center; gap: 6px; padding: 2px 0 2px 24px; font-size: 11px; }
.channel-item .ch-color { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.channel-item .value-display { margin-left: auto; color: #888; font-size: 10px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, monospace; }
input[type="checkbox"] { accent-color: #4a90d9; cursor: pointer; }
#no-data-hint { padding: 20px 10px; color: #556; font-size: 12px; text-align: center; line-height: 1.8; }

/* === Waveform area === */
#waveform-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#canvas-container { flex: 1; position: relative; overflow: hidden; }
#waveform-canvas { display: block; width: 100%; height: 100%; }
#tooltip { position: absolute; display: none; background: rgba(22, 33, 62, 0.94); border: 1px solid #4a90d9; border-radius: 4px; padding: 6px 10px; font-size: 11px; pointer-events: none; z-index: 10; white-space: pre-line; max-height: 300px; overflow-y: auto; }

/* === Control bar === */
#control-bar { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: #16213e; border-top: 1px solid #0f3460; flex-shrink: 0; flex-wrap: wrap; }
#control-bar button { background: #0f3460; color: #e0e0e0; border: 1px solid #1a4080; border-radius: 3px; padding: 3px 10px; font-size: 11px; cursor: pointer; font-family: inherit; }
#control-bar button:hover { background: #1a4080; }
#control-bar button.active { background: #4a90d9; color: #fff; border-color: #4a90d9; }
#control-bar label { font-size: 11px; color: #a0a0c0; }
#control-bar input[type="number"] { background: #0f3460; color: #e0e0e0; border: 1px solid #1a4080; border-radius: 3px; padding: 2px 6px; font-size: 11px; font-family: inherit; width: 70px; }
#control-bar input[type="color"] { width: 28px; height: 22px; padding: 1px 2px; border: 1px solid #1a4080; border-radius: 3px; background: #0f3460; cursor: pointer; }

/* === Status bar === */
#status-bar { display: flex; align-items: center; gap: 16px; padding: 3px 12px; background: #0f1a35; border-top: 1px solid #0f3460; font-size: 11px; color: #888; flex-shrink: 0; }
.status-item { display: flex; align-items: center; gap: 4px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.off { background: #555; }
.dot.on { background: #2ecc71; }

/* === Tutorial hint === */
#hint-toggle { position: absolute; top: 10px; right: 10px; z-index: 20; width: 28px; height: 28px; border-radius: 50%; background: rgba(74,144,217,0.7); color: #fff; border: none; font-size: 14px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
#hint-toggle:hover { background: rgba(74,144,217,1); }
#hint-panel { position: absolute; top: 46px; right: 10px; z-index: 20; background: rgba(22,33,62,0.95); border: 1px solid #4a90d9; border-radius: 6px; padding: 0; min-width: 240px; display: none; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
#hint-panel.visible { display: block; }
#hint-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid #0f3460; font-size: 12px; font-weight: bold; color: #4a90d9; }
#hint-close { background: none; border: none; color: #888; font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1; }
#hint-close:hover { color: #e74c3c; }
#hint-body { padding: 8px 12px; }
.hint-item { font-size: 11px; color: #c0c0d0; padding: 3px 0; display: flex; align-items: center; gap: 8px; }
.hint-item kbd { background: #0f3460; border: 1px solid #1a4080; border-radius: 3px; padding: 1px 6px; font-size: 10px; font-family: Consolas, monospace; color: #4a90d9; min-width: 52px; text-align: center; flex-shrink: 0; }

/* === Minimap === */
#minimap-container { position: absolute; bottom: 8px; right: 8px; z-index: 15; border: 1px solid #1a4080; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
#minimap-canvas { display: block; }

/* === Data Panel === */
#data-panel { position: absolute; top: 8px; left: 68px; z-index: 15; background: rgba(13,20,40,0.92); border: 1px solid #1a4080; border-radius: 4px; padding: 6px 10px; min-width: 160px; max-width: 260px; max-height: 60%; overflow-y: auto; font-size: 11px; font-family: Consolas, monospace; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.data-panel-title { font-size: 11px; color: #4a90d9; font-weight: bold; padding-bottom: 4px; border-bottom: 1px solid #1a4080; margin-bottom: 4px; }
.data-panel-row { display: flex; align-items: center; gap: 5px; padding: 1px 0; white-space: nowrap; }
.data-panel-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.data-panel-name { color: #a0a0c0; flex-shrink: 0; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.data-panel-val { color: #e0e0e0; margin-left: auto; text-align: right; }

/* Undo/redo disabled */
#control-bar button:disabled { opacity: 0.35; cursor: default; }
#control-bar button:disabled:hover { background: #0f3460; }

/* scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #16213e; }
::-webkit-scrollbar-thumb { background: #0f3460; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #1a4080; }

/* === Type Names Editor Modal === */
#type-editor-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; }
#type-editor-modal { background: #16213e; border: 1px solid #1a4080; border-radius: 8px; padding: 20px; width: 520px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
#type-editor-modal h3 { margin: 0 0 12px; color: #4a90d9; font-size: 15px; }
#type-editor-rows { flex: 1; overflow-y: auto; margin-bottom: 12px; max-height: 50vh; }
.type-editor-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.type-editor-row input:first-child { width: 100px; flex-shrink: 0; background: #0f3460; border: 1px solid #1a4080; border-radius: 3px; color: #e0e0e0; padding: 4px 6px; font-size: 12px; font-family: Consolas, monospace; }
.type-editor-row input:last-of-type { flex: 1; background: #0a1628; border: 1px solid #1a4080; border-radius: 3px; color: #e0e0e0; padding: 4px 6px; font-size: 12px; font-family: Consolas, monospace; }
.type-editor-row button { background: #c0392b; border: none; border-radius: 3px; color: #fff; padding: 4px 8px; font-size: 11px; cursor: pointer; flex-shrink: 0; }
.type-editor-row button:hover { background: #e74c3c; }
#type-editor-btns { display: flex; gap: 6px; flex-wrap: wrap; }
#type-editor-btns button { background: #0f3460; border: 1px solid #1a4080; border-radius: 4px; color: #e0e0e0; padding: 6px 12px; font-size: 12px; cursor: pointer; }
#type-editor-btns button:hover { background: #1a4080; }
#type-editor-btns button.primary { background: #4a90d9; border-color: #4a90d9; }
#type-editor-btns button.primary:hover { background: #5da0e9; }
#type-editor-btns button.danger { background: #c0392b; border-color: #c0392b; }
#type-editor-btns button.danger:hover { background: #e74c3c; }