:root {
/* =========================================
   1. ЦВЕТА ИНТЕРФЕЙСА
   ========================================= */
 --bg: #0a0a0f;
 --surface: #14141f;
 --uploadbg: #1e1e2e;
 --border: #404040;
 --text: #f0f0ff;
 --btn-text: #ffffff;
 --btext: #00e000;
 --na_button: #252535;
 --a_button: #2196F3;
 --flash: #028800;
 --verify: #ff8000;
 --save: #2196F3;
 --git: #a855f7;
 --unused: #7c3aed;
 --progress: #028800;
 --muted: #9a9ab8;
 --accent: #5b8cff;
 --success: #69d97a;
 --error: #ff6b85;
 --warn: #ffd866;
/* =========================================
   2. ЦВЕТА ГРАФИКА И ТРАСС
   ========================================= */
 --trace-m0-s11: #0000ff;
 --trace-m0-s21: #ffff00;
 --trace-m1-s11: #00cc88;
 --trace-m1-s21: #ff8800;
 --trace-m2-s11: #aa44ff;
 --trace-m2-s21: #ffdd00;
 --trace-m3-s11: #ff0088;
 --trace-m3-s21: #00ffcc;
 --trace-m4-s11: #ff6600;
 --trace-m4-s21: #44aaff;

 --plot-grid: #444444;
 --plot-border: #666666;
 --plot-axis-text: #ffffff;

 --marker-active: #c06666;
 --marker-inactive: #6666c0;
 --marker-label: #ffffff;

 --cursor-line: rgba(255, 255, 255, 0.3);
 --tooltip-bg: rgba(30, 30, 40, 0.95);
 --tooltip-border: #666666;
 --tooltip-text: #ffffff;

 --overlay-bg: #33FF6464;
 --overlay-text: #ffffff;

/* =========================================
   3. ШРИФТЫ ГРАФИКА (Canvas)
   ========================================= */
 --font-graph: 'Tahoma', Roboto, sans-serif;
 --font-header:     700 15px/1.0 var(--font-graph); /* Заголовок (под панелями) */
 --font-axis:       400 12px/1.0 var(--font-graph); /* Метки осей */
 --font-marker:     400 14px/1.0 var(--font-graph); /* Метки маркеров */
 --font-amarker:    600 14px/1.0 var(--font-graph); /* Выбранный маркер */
 --font-tooltip:    400 14px/1.0 var(--font-graph); /* Текст в тултипе */

/* =========================================
   4. ШРИФТЫ UI (Интерфейс)
   ========================================= */
 --font: 'Tahoma', Roboto, sans-serif;
 --font-ui:         400 14px/1.0 var(--font); /* Основной текст, лейблы, селекты */
 --font-ui-small:   400 13px/1.0 var(--font); /* Таблицы, контекстное меню */
 --font-ui-title:   700 15px/1.0 var(--font); /* Заголовки секций */
 --font-ui-btn:     700 14px/1.0 var(--font); /* Текст всех кнопок */
}

/* =========================================
   БАЗОВЫЕ СТИЛИ
   ========================================= */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 user-select: none;
 -webkit-user-select: none;
 -webkit-touch-callout: none;
}

body {
 font: var(--font-ui);
 background: var(--bg);
 color: var(--text);
 height: 100vh;
 width: 100vw;
 height: 100dvh;
 width: 100dvw;
 overflow: hidden;
 display: flex;
}

select {
 font: var(--font-ui-small);
 padding: 4px 10px;
 border: 1px solid var(--border);
 border-radius: 4px;
 background: var(--uploadbg);
 color: var(--text);
 cursor: pointer;
}
select:focus {
 outline: none;
 border-color: var(--accent);
}

/* =========================================
   МАКЕТ (LAYOUT)
   ========================================= */
.container {
 display: flex;
 width: 100%;
 height: 100%;
 padding: 5px;
 gap: 5px;
}

/* =========================================
   ЭЛЕМЕНТЫ УПРАВЛЕНИЯ (CONTROLS)
   ========================================= */
.flabel {
 min-width: 45px;
 text-align: right;
 padding-right: 5px;
}

.main-area {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 5px;
 min-height: 0;
}

.top-bar {
 flex-shrink: 0;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: var(--surface);
 font: var(--font-ui);
 padding: 4px 10px;
 border-radius: 5px;
 border: 1px solid var(--border);
 gap: 10px;
}

.top-bar label {
 font-weight: 700;
 color: var(--muted);
 white-space: nowrap;
}

.top-bar button {
 background: var(--na_button);
 color: var(--btn-text);
 font:  var(--font-ui);
 border: 1px solid var(--border);
 border-radius: 5px;
 cursor: pointer;
 padding: 4px 6px;
}
.top-bar button:hover { border-color: var(--accent); }

.graph-container {
 flex: 1;
 min-height: 0;
 background: var(--surface);
 border-radius: 5px;
 border: 1px solid var(--border);
 position: relative;
 display: flex;
}

canvas {
 width: 100%;
 height: 100%;
 display: block;
}

.bar-row { display: flex; gap: 4px; align-items: center; }
.bar-column { display: flex; flex-direction: column; gap: 4px; }

/* =========================================
   Левая панель
   ========================================= */
.side-panel {
 width: 210px; 
 min-width: 210px; 
 background: var(--bg);
 display: flex;
 flex-direction: column;
 gap: 4px;
 overflow-y: auto;
}

.bar-panel {
 display: flex;
 background: var(--surface);
 flex-direction: column;
 gap: 4px;
 border: 1px solid var(--border);
 border-radius: 4px;
 padding: 6px 4px;
}

.bar-panel label {
 font: var(--font-ui-title);
 color: var(--muted);
 cursor: pointer;
 display: flex;
 width: 100%;
 padding: 0 5px 3px;
}

.bar-panel > label::before { content: '▸'; }
.bar-panel.collapsed > label::before { content: '▾'; }
.bar-panel.collapsed > :not(label) { display: none; }

.side-panel input, .velocity {
 width: 100%;
 padding: 3px 6px;
 background: var(--bg);
 color: var(--text);
 border: 1px solid var(--border);
 border-radius: 3px;
 font: var(--font-ui);
 text-align: right;
}
.side-panel input:focus {
 outline: none;
 border-color: var(--accent);
}

/* =========================================
   КНОПКИ (BUTTONS)
   ========================================= */
.btn-main, .trace-btn {
 flex: 1;
 padding: 6px;
 display: flex;
 font: var(--font-ui-btn);
 color: var(--btn-text);
 background: var(--na_button);
 border: 1px solid var(--border);
 border-radius: 4px;
 cursor: pointer;
 justify-content: center;
 gap: 3px;
}
.btn-main:disabled{
 opacity: 0.5;
 cursor: not-allowed;
 border-color: var(--border);
}
.btn-main:hover {
 border-color: var(--accent);
}
.btn-main svg {
 width: 16px;
 height: 16px;
}

.trace-btn {
 text-align: center;
 opacity: 0.5; 
}
.trace-btn.has-data {
 opacity: 1;
}
.trace-btn.active {
 opacity: 1;
 background: var(--btext);
 border-color: var(--btext);
 color: var(--bg);
}

/* =========================================
   Таблица боковой панели
   ========================================= */
.table-wrapper {
 width: 100%;
 height: auto;
 border-radius: 4px;
 overflow-y: auto;
 background: var(--surface);
}
.table-wrapper#marker {
 max-height: 171px;
}

.table {
 width: 100%;
 font: var(--font-ui-small);
 background: var(--surface);
 table-layout: fixed;
 border-collapse: collapse;
}

.table th {
 position: sticky;
 top: 0;
 background: var(--na_button);
 z-index: 2;
 border: 1px solid var(--border);
 padding: 4px;
}

.table td {
 border: 1px solid var(--border);
 text-align: center;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 padding: 4px;
}

.table tbody tr {
 cursor: pointer;
}

.table input {
 width: 100%;
 font: var(--font-ui);
 padding: 0;
}

.table tbody tr:hover { background: var(--uploadbg); }
.table tbody tr.selected { background: var(--accent); color: var(--bg); }

.table-wrapper::-webkit-scrollbar { width: 8px; }
.table-wrapper::-webkit-scrollbar-track { background: var(--surface); }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* =========================================
   КОНТЕКСТНОЕ МЕНЮ
   ========================================= */
.context-menu {
 display: none;
 margin: 3px 0;
 padding: 5px 0;
 position: absolute;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 4px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 z-index: 1000;
}
.context-menu-item {
 font: var(--font-ui);
 padding: 4px;
 cursor: pointer;
 color: var(--text);
 white-space: break-spaces;
 border-radius: 4px;
 align-items: baseline;
 height: 20px;
}
.context-menu-item.disabled {
 opacity: 0.4;
 cursor: not-allowed;
}
.context-menu-item:hover:not(.disabled) {
 background: var(--accent);
 color: var(--bg);
}
.context-menu-item.danger:hover:not(.disabled) {
 background: var(--error);
}
.menu-column { display: flex; flex-direction: column; }

.velocity {
 width: 60px;
 height: 20px;
}
.velocity:focus { outline: none; border-color: var(--accent); }

.area-panels {
 position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 pointer-events: none;
 z-index: 10;
}
.area-panel {
 position: absolute;
 display: flex;
 align-items: center;
 gap: 6px;
 background: var(--bg);
 color: var(--text);
 pointer-events: auto;
 height: 24px;
 font: var(--font-ui-small);
 padding-left: 20px;
}
.area-panel select {
 background: var(--uploadbg);
 border: 1px solid var(--border);
 padding: 2px 4px;
 border-radius: 3px;
 font-size: 11px;
}
.area-panel label {
 display: flex;
 align-items: center;
 gap: 2px;
 cursor: pointer;
}
.area-panel button {
 background: var(--uploadbg);
 color: var(--btn-text);
 border: 1px solid var(--border);
 padding: 1px 6px;
 border-radius: 3px;
 cursor: pointer;
 height: 20px;
 display: flex;
 align-items: center;
}

.area-panel .trace-type {
 min-width: 110px;
 text-align: left;
}
.area-panel button.active { background: var(--a_button); color: var(--bg); }
.area-panel button:hover { border-color: var(--accent); }