/* ML Training - Chart Labeling Styles */
/* Light theme aligned with admin.css */

/* ==================== LOGIC-ONLY VIEW MODE (?view=logic) ==================== */

body.logic-view-mode .sidebar {
  display: none !important;
}

body.logic-view-mode .main-content {
  margin-left: 0 !important;
  padding: 0 !important;
}

body.logic-view-mode .section-header,
body.logic-view-mode .chart-controls,
body.logic-view-mode .tools-panel,
body.logic-view-mode .chart-wrapper,
body.logic-view-mode .chart-instructions,
body.logic-view-mode .text-input-popup,
body.logic-view-mode .tags-manager-popup,
body.logic-view-mode #section-training,
body.logic-view-mode #section-results,
body.logic-view-mode #section-predict,
body.logic-view-mode .my-examples-panel,
body.logic-view-mode .lines-panel .panel-actions {
  display: none !important;
}

body.logic-view-mode .section {
  display: block !important;
  max-width: 100%;
  padding: 0;
}

body.logic-view-mode .logic-chain-panel {
  margin: 0;
  border-radius: 0;
  border: none;
  min-height: 50vh;
}

body.logic-view-mode .logic-chain-body {
  max-height: none !important;
}

body.logic-view-mode .logic-chain-panel .panel-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 16px;
}

body.logic-view-mode .lines-panel {
  margin: 0;
  border-radius: 0;
  border-top: 2px solid #e2e8f0;
}

body.logic-view-mode .lines-panel .panel-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
}

body.logic-view-mode .scenario-note-section textarea,
body.logic-view-mode .step-note-input {
  min-height: 120px;
  font-size: 14px;
  line-height: 1.6;
}

body.logic-view-mode .chain-visual {
  max-height: none;
}

body.logic-view-mode .chain-nodes {
  max-height: none;
  overflow: visible;
}

body.logic-view-mode .chain-add-controls {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding: 10px;
  border-top: 1px solid #e2e8f0;
  z-index: 5;
}

body.logic-view-mode .shape-detail-section {
  border: 2px solid #E84E0F;
  border-radius: 8px;
  margin: 10px;
  background: #fff7ed;
}

body.logic-view-mode .shape-detail-body textarea,
body.logic-view-mode .shape-detail-body input {
  font-size: 14px;
}

/* Make stepper bigger in logic view */
body.logic-view-mode .logic-stepper {
  padding: 12px;
  gap: 4px;
}
body.logic-view-mode .step-dot {
  width: 34px;
  height: 34px;
  font-size: 14px;
}
body.logic-view-mode .step-label {
  font-size: 12px;
}

body.logic-view-mode .chain-tab {
  padding: 8px 16px;
  font-size: 14px;
}

/* Make panel actions row sticky at bottom in logic view */
body.logic-view-mode .panel-actions {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding: 10px;
  border-top: 1px solid #e2e8f0;
  z-index: 5;
}

/* Logic view header bar */
.logic-view-header {
  display: none;
}

body.logic-view-mode .logic-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, #E84E0F 0%, #f97316 100%);
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.logic-view-header .logic-view-ticker {
  font-size: 16px;
  font-weight: 700;
}

.logic-view-header .logic-view-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  opacity: 0.9;
}

.logic-view-header .logic-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: syncPulse 2s infinite;
}

@keyframes syncPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Detach button */
.btn-detach-logic {
  padding: 3px 10px;
  font-size: 11px;
  background: #f1f5f9;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #475569;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-detach-logic:hover {
  background: #e0e7ff;
  border-color: #6366f1;
  color: #4338ca;
}

/* ==================== TOOLS PANEL ==================== */

.tools-panel {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.tools-section {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.tools-section.tools-right {
  margin-left: auto;
}

.tool-divider {
  width: 1px;
  height: 24px;
  background: var(--border, #e2e8f0);
  margin: 0 0.5rem;
}

.tool-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #475569);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tool-btn:hover {
  background: var(--bg-light, #f8fafc);
  color: var(--text-primary, #0f172a);
}

.tool-btn.active {
  background: rgba(232, 78, 15, 0.12);
  color: var(--primary, #E84E0F);
}

.tool-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  background: var(--primary, #E84E0F);
  border-radius: 2px;
}

.tool-btn svg {
  width: 20px;
  height: 20px;
}

.tool-btn.tool-danger:hover {
  background: #fef2f2;
  color: var(--red, #ef4444);
}

/* Color Picker */
.color-picker {
  display: flex;
  align-items: center;
}

.color-picker input[type="color"] {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}

.color-picker input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.color-picker input[type="color"]::-webkit-color-swatch {
  border-radius: 4px;
  border: none;
}

/* Line Width Picker */
.line-width-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

.line-width-picker input[type="range"] {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  background: var(--border, #e2e8f0);
  border-radius: 2px;
}

.line-width-picker input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--primary, #E84E0F);
  border-radius: 50%;
  cursor: pointer;
}

.line-width-picker span {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  min-width: 16px;
}

/* Line Properties */
.line-props {
  display: flex;
  gap: 0.5rem;
}

.line-props select {
  padding: 0.4rem 0.75rem;
  font-size: 12px;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
}

.line-props select:hover {
  border-color: var(--primary, #E84E0F);
}

/* ==================== ML LABEL GROUP ==================== */

.ml-label-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ml-label-group select {
  padding: 0.4rem 0.75rem;
  font-size: 12px;
  background: #ffffff;
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 6px;
  color: #1e293b;
  cursor: pointer;
  min-width: 160px;
  transition: border-color 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ml-label-group select:hover,
.ml-label-group select:focus {
  border-color: var(--primary, #E84E0F);
  outline: none;
}

.ml-label-group select option {
  background: #ffffff;
  color: #1e293b;
  padding: 6px 10px;
  font-weight: 500;
}

.ml-label-group select option:checked {
  background: #e0e7ff;
}

.ml-label-group select optgroup {
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  font-style: normal;
}

.ml-tags-manage-btn {
  width: 32px !important;
  height: 32px !important;
}

.ml-tags-manage-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* ML Badge in table */
.ml-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.ml-label-badge .badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ml-label-badge.no-label {
  color: var(--text-muted, #94a3b8);
  background: var(--bg-light, #f8fafc);
  border-color: var(--border, #e2e8f0);
  font-weight: 400;
}

/* Inline ML label select in table */
.ml-label-inline {
  padding: 2px 6px;
  font-size: 11px;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
  max-width: 130px;
}

.ml-label-inline:focus {
  border-color: var(--primary, #E84E0F);
  outline: none;
}

/* ==================== TAGS MANAGER POPUP ==================== */

.tags-manager-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1));
  z-index: 1001;
  min-width: 420px;
  max-width: 520px;
  animation: popupFadeIn 0.2s ease;
}

.tags-manager-popup.hidden {
  display: none;
}

.tags-manager-popup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  background: var(--bg-light, #f8fafc);
  border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
}

.tags-manager-popup .close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
}

.tags-manager-popup .close-btn:hover {
  color: var(--text-primary, #0f172a);
}

.tags-manager-popup .popup-body {
  padding: 1rem;
}

.tags-add-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.tags-add-form input[type="text"] {
  flex: 1;
  min-width: 100px;
  padding: 0.5rem 0.75rem;
  background: var(--bg-white, #ffffff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-primary, #0f172a);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.tags-add-form input[type="text"]:focus {
  border-color: var(--primary, #E84E0F);
}

.tags-add-form input[type="color"] {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.tags-add-form input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.tags-add-form input[type="color"]::-webkit-color-swatch {
  border-radius: 4px;
  border: none;
}

.tags-list {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  transition: all 0.15s ease;
}

.tag-item:hover {
  border-color: var(--primary, #E84E0F);
}

.tag-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0,0,0,0.1);
}

.tag-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tag-item-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #0f172a);
}

.tag-item-code {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-family: 'JetBrains Mono', monospace;
}

.tag-item-type {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-white, #ffffff);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border, #e2e8f0);
}

.tag-item .btn-delete-tag {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.tag-item .btn-delete-tag:hover {
  color: var(--red, #ef4444);
  background: #fef2f2;
}

.tag-item .btn-delete-tag.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ==================== CHART CONTAINER ==================== */

.chart-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
  /* Prevent horizontal overflow from chart resizing */
  overflow: hidden;
  max-width: 100%;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 550px;
  background: #131722;
  border-radius: var(--radius, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
}

/* Prevent main-content from expanding beyond viewport */
#section-labeling {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==================== FULLSCREEN MODE ==================== */

/* Chart Settings Button */
.chart-settings-btn {
  position: absolute;
  top: 8px;
  right: 52px;
  z-index: 30;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary, #475569);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.chart-settings-btn:hover {
  background: #ffffff;
  color: var(--primary, #E84E0F);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: scale(1.05);
}

.chart-settings-btn.active {
  background: var(--primary, #E84E0F);
  color: #fff;
  border-color: var(--primary, #E84E0F);
}

/* Chart Settings Panel */
.chart-settings-panel {
  position: absolute;
  top: 50px;
  right: 8px;
  z-index: 50;
  width: 280px;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  overflow: hidden;
}

.cs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-light, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #0f172a);
}

.cs-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
  padding: 0;
  line-height: 1;
}

.cs-close:hover {
  color: var(--primary, #E84E0F);
}

.cs-body {
  padding: 0.75rem 1rem;
}

.cs-group {
  margin-bottom: 0.75rem;
}

.cs-group:last-child {
  margin-bottom: 0;
}

.cs-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.cs-radio-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cs-radio {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 12px;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
}

.cs-radio input[type="radio"] {
  accent-color: var(--primary, #E84E0F);
}

.cs-color-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cs-color-row input[type="color"] {
  width: 36px;
  height: 28px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
}

.cs-color-preview {
  width: 50px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border, #e2e8f0);
}

.cs-toggle-row {
  display: flex;
  gap: 0.5rem;
}

.cs-check {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 12px;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
}

.cs-check input[type="checkbox"] {
  accent-color: var(--primary, #E84E0F);
}

.cs-range {
  width: 100%;
  accent-color: var(--primary, #E84E0F);
}

.cs-range-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #E84E0F);
}

.cs-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, #e2e8f0);
}

.cs-actions .btn-primary.btn-sm {
  background: var(--primary, #E84E0F);
  color: #fff;
  border-color: var(--primary, #E84E0F);
}

.cs-actions .btn-primary.btn-sm:hover {
  background: var(--primary-dark, #d14400);
}

.fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 30;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary, #475569);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.fullscreen-btn:hover {
  background: #ffffff;
  color: var(--primary, #E84E0F);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: scale(1.05);
}

/* Fullscreen chart wrapper */
.chart-wrapper.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  margin: 0;
  background: #131722;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.chart-wrapper.fullscreen .chart-container {
  flex: 1;
  height: 100% !important;
  border-radius: 0;
}

.chart-wrapper.fullscreen .chart-instructions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  border-radius: 0;
  margin: 0;
  background: rgba(232, 78, 15, 0.12);
}

/* Fullscreen overlay for tools */
.chart-wrapper.fullscreen .fullscreen-tools-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10000;
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Hide scrollbar in fullscreen */
body.chart-fullscreen-active {
  overflow: hidden;
}

/* ==================== FULLSCREEN FLOATING TOOLBAR ==================== */

.fs-toolbar {
  display: none; /* Hidden outside fullscreen */
}

.chart-wrapper.fullscreen .fs-toolbar {
  display: flex;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 60px; /* Leave space for fullscreen button */
  z-index: 10001;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  pointer-events: auto;
}

.fs-toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 3px 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.fs-tool-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #475569;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.fs-tool-btn svg {
  width: 18px;
  height: 18px;
}

.fs-tool-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.fs-tool-btn.active {
  background: var(--primary, #E84E0F);
  color: white;
  box-shadow: 0 0 8px rgba(232, 78, 15, 0.4);
}

.fs-tool-btn.fs-danger {
  color: #dc2626;
}

.fs-tool-btn.fs-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.fs-divider {
  width: 1px;
  height: 20px;
  background: #d1d5db;
  margin: 0 2px;
}

/* Color Picker */
.fs-color-picker {
  display: flex;
  align-items: center;
}

.fs-color-picker input[type="color"] {
  width: 28px;
  height: 28px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  padding: 1px;
  background: transparent;
}

.fs-color-picker input[type="color"]:hover {
  border-color: #9ca3af;
}

/* Width Picker */
.fs-width-picker {
  display: flex;
  align-items: center;
}

.fs-width-picker input[type="range"] {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
}

.fs-width-picker input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary, #E84E0F);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Selects */
.fs-select {
  padding: 4px 8px;
  font-size: 11px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #1e293b;
  cursor: pointer;
  outline: none;
  height: 30px;
  min-width: 80px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-weight: 500;
}

.fs-select:hover {
  border-color: #9ca3af;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.fs-select:focus {
  border-color: var(--primary, #E84E0F);
  box-shadow: 0 0 0 2px rgba(232, 78, 15, 0.15);
}

.fs-select option {
  background: #ffffff;
  color: #1e293b;
  padding: 6px 10px;
  font-weight: 500;
  text-shadow: none;
}

.fs-select option:checked {
  background: #e0e7ff;
  color: #1e293b;
}

.fs-select optgroup {
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  font-style: normal;
  padding: 4px 0;
}

.fs-ml-label {
  min-width: 160px;
}

/* ====== Fullscreen Logic Panel ====== */
.fs-logic-panel {
  display: none;
}

.chart-wrapper.fullscreen .fs-logic-panel {
  display: none;
  position: absolute;
  top: 50px;
  right: 12px;
  z-index: 10002;
  width: 320px;
  max-height: calc(100vh - 100px);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.chart-wrapper.fullscreen .fs-logic-panel.open {
  display: block;
}

.fs-logic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
}

.fs-logic-close {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
}

.fs-logic-close:hover {
  color: #1e293b;
  background: #f1f5f9;
}

.fs-logic-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.fs-scenario-note {
  width: 100%;
  padding: 0.5rem;
  background: #f8fafc;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #1e293b;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}

.fs-scenario-note::placeholder {
  color: #94a3b8;
}

.fs-scenario-note:focus {
  border-color: var(--primary, #E84E0F);
  background: #ffffff;
}

.fs-chain-nodes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.fs-chain-controls {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Adjust fullscreen button position when toolbar is visible */
.chart-wrapper.fullscreen .fullscreen-btn {
  top: 12px;
  right: 12px;
  z-index: 10002;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border: 1px solid #d1d5db;
  color: #475569;
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-wrapper.fullscreen .fullscreen-btn:hover {
  background: rgba(232, 78, 15, 0.8);
  color: white;
  border-color: var(--primary, #E84E0F);
}

/* Canvas Overlay for drawing */
.drawing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* Drawing Surface for mouse events */
.drawing-surface {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
  transition: cursor 0.1s ease;
}

.drawing-surface.drawing-active {
  pointer-events: auto;
  cursor: crosshair;
}

.drawing-surface.eraser-mode {
  pointer-events: auto;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ef4444" stroke-width="2"><path d="M20 20H9L4 15a1.5 1.5 0 0 1 0-2l10-10a1.5 1.5 0 0 1 2 0l6 6a1.5 1.5 0 0 1 0 2L14 19"/></svg>') 12 12, pointer;
}

.chart-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #64748b;
  text-align: center;
  z-index: 5;
}

.chart-placeholder svg {
  opacity: 0.5;
}

.chart-instructions {
  padding: 0.75rem 1rem;
  background: rgba(232, 78, 15, 0.08);
  border: 1px solid rgba(232, 78, 15, 0.2);
  border-radius: var(--radius-sm, 8px);
  color: var(--primary, #E84E0F);
  font-size: 13px;
}

.chart-instructions p {
  margin: 0.25rem 0;
}

.chart-instructions strong {
  color: #c2410c;
}

/* Drawing point indicator */
.drawing-point {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--primary, #E84E0F);
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(232, 78, 15, 0.6);
  pointer-events: none;
  z-index: 20;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
}

/* Cursor changes for different tools */
.chart-container[data-tool="trend"] .drawing-surface.drawing-active,
.chart-container[data-tool="ray"] .drawing-surface.drawing-active,
.chart-container[data-tool="fibonacci"] .drawing-surface.drawing-active,
.chart-container[data-tool="ruler"] .drawing-surface.drawing-active {
  cursor: crosshair;
}

.chart-container[data-tool="horizontal"] .drawing-surface.drawing-active {
  cursor: ew-resize;
}

.chart-container[data-tool="vertical"] .drawing-surface.drawing-active {
  cursor: ns-resize;
}

.chart-container[data-tool="text"] .drawing-surface.drawing-active {
  cursor: text;
}

.chart-container[data-tool="rectangle"] .drawing-surface.drawing-active,
.chart-container[data-tool="triangle"] .drawing-surface.drawing-active {
  cursor: crosshair;
}

/* Shape handles */
.shape-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(29, 233, 182, 0.35);
  border: 2px solid #1de9b6;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 25;
}

.shape-handle:hover {
  background: rgba(29, 233, 182, 0.6);
}

.shape-handle:active {
  cursor: grabbing;
}

/* ==================== TEXT INPUT POPUP ==================== */

.text-input-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1));
  z-index: 1000;
  min-width: 320px;
  animation: popupFadeIn 0.2s ease;
}

.text-input-popup.hidden {
  display: none;
}

.text-input-popup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  background: var(--bg-light, #f8fafc);
  border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
}

.text-input-popup .close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
}

.text-input-popup .close-btn:hover {
  color: var(--text-primary, #0f172a);
}

.text-input-popup .popup-body {
  padding: 1rem;
}

.text-input-popup input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  background: var(--bg-white, #ffffff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-primary, #0f172a);
  font-size: 14px;
  margin-bottom: 0.75rem;
  outline: none;
  transition: border-color 0.2s;
}

.text-input-popup input[type="text"]:focus {
  border-color: var(--primary, #E84E0F);
  box-shadow: 0 0 0 3px rgba(232, 78, 15, 0.15);
}

.text-input-popup .text-options {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.text-input-popup .popup-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ==================== LINES TABLE ==================== */

.lines-panel {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
  overflow: hidden;
}

.lines-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--bg-light, #f8fafc);
}

.lines-panel .panel-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}

.lines-count {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-light, #f8fafc);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
}

.lines-table-wrapper {
  max-height: 250px;
  overflow-y: auto;
}

.lines-table {
  width: 100%;
  border-collapse: collapse;
}

.lines-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-light, #f8fafc);
  font-weight: 600;
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.lines-table td {
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: var(--text-primary, #0f172a);
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.lines-table tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

.lines-table tr:hover {
  background: var(--bg-light, #f8fafc);
}

.lines-table .empty-row td {
  text-align: center;
  color: var(--text-muted, #94a3b8);
  padding: 2rem;
}

.lines-table .btn-delete {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.lines-table .btn-delete:hover {
  opacity: 1;
}

.lines-table tr.selected-row {
  background: rgba(232, 78, 15, 0.08);
  border-left: 3px solid var(--primary, #E84E0F);
}

.lines-table tr.selected-row td {
  background: transparent;
}

.panel-actions {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border, #e2e8f0);
  gap: 1rem;
}

/* ==================== MY EXAMPLES PANEL ==================== */

.my-examples-panel {
  border-top: 1px solid var(--border, #e2e8f0);
  background: var(--bg-white, #fff);
}

.my-examples-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.my-examples-panel .panel-header:hover {
  background: var(--bg-secondary, #f8fafc);
}

.my-examples-panel .panel-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.examples-ticker-badge {
  display: inline-block;
  background: var(--primary, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 9999px;
  letter-spacing: 0.3px;
}

.examples-count {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
}

.my-examples-body {
  padding: 0 0.75rem 0.75rem;
  max-height: 260px;
  overflow-y: auto;
}

.my-examples-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.empty-examples {
  padding: 1.2rem;
  text-align: center;
  color: var(--text-secondary, #94a3b8);
  font-size: 12px;
}

.example-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-secondary, #f8fafc);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.example-card:hover {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}

.example-card.active {
  border-color: var(--primary, #6366f1);
  background: rgba(99, 102, 241, 0.06);
}

.example-card-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.example-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.example-card-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.example-card-detail {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.example-card-detail .ex-badge {
  display: inline-block;
  padding: 0px 5px;
  border-radius: 4px;
  background: var(--border, #e2e8f0);
  font-size: 10px;
  font-weight: 600;
}

.example-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.example-card-actions button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  color: var(--text-secondary, #64748b);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s;
  padding: 0;
}

.example-card-actions button:hover {
  background: var(--primary, #6366f1);
  color: #fff;
  border-color: var(--primary, #6366f1);
}

.example-card-actions button.btn-delete:hover {
  background: #ef4444;
  border-color: #ef4444;
}

/* ==================== LEVEL PROPERTIES ==================== */

.level-props {
  display: none;
  align-items: center;
  gap: 6px;
}

.level-props select {
  padding: 4px 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-white, #fff);
  color: var(--text-primary, #0f172a);
  font-size: 12px;
  cursor: pointer;
}

.touches-input {
  display: flex;
  align-items: center;
  gap: 3px;
}

.touches-input label {
  font-size: 12px;
  cursor: default;
}

.touches-input input[type="number"] {
  width: 40px;
  padding: 4px 4px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-white, #fff);
  color: var(--text-primary, #0f172a);
  font-size: 12px;
  text-align: center;
}

.touches-input input[type="number"]::-webkit-inner-spin-button {
  opacity: 1;
}

.tool-toggle {
  position: relative;
  cursor: pointer;
}

.tool-toggle.active {
  background: var(--success, #22c55e) !important;
  color: white !important;
  border-color: var(--success, #22c55e) !important;
}

#mergeToCascadeBtn {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: var(--radius-sm, 8px);
  white-space: nowrap;
  cursor: pointer;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  color: var(--text-primary, #0f172a);
  transition: all 0.15s;
}

#mergeToCascadeBtn:hover {
  background: #7c3aed;
  color: white;
  border-color: #7c3aed;
}

/* Level info in table */
.level-info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s;
}

.level-info-badge:hover {
  background: rgba(0,0,0,0.05);
}

.level-info-badge.confirmed {
  /* just styled via emoji */
}

.level-type-label {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

/* ==================== LOGIC CHAIN PANEL ==================== */

.logic-chain-panel {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
  overflow: hidden;
  margin-top: 1rem;
}

.logic-chain-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--bg-light, #f8fafc);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.logic-chain-panel .panel-header:hover {
  background: #f1f5f9;
}

.logic-chain-panel .panel-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}

.panel-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chain-count {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-white, #ffffff);
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
}

.panel-chevron {
  transition: transform 0.2s ease;
  color: var(--text-muted, #94a3b8);
}

.panel-chevron.collapsed {
  transform: rotate(-90deg);
}

.logic-chain-body {
  padding: 1.25rem 1.5rem;
  transition: max-height 0.3s ease;
}

.logic-chain-body.collapsed {
  display: none;
}

/* Scenario Note */
.scenario-note-section {
  margin-bottom: 1.25rem;
}

.scenario-note-section label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  margin-bottom: 0.5rem;
}

.scenario-note-section textarea {
  width: 100%;
  padding: 0.75rem;
  background: var(--bg-white, #ffffff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-primary, #0f172a);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}

.scenario-note-section textarea:focus {
  border-color: var(--primary, #E84E0F);
  box-shadow: 0 0 0 3px rgba(232, 78, 15, 0.1);
}

/* Chain Visual */
.chain-visual {
  margin-bottom: 1.25rem;
  min-height: 60px;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  padding: 0.75rem;
  overflow-x: auto;
}

.chain-empty {
  text-align: center;
  color: var(--text-muted, #94a3b8);
  font-size: 13px;
  padding: 0.75rem;
}

.chain-empty p {
  margin: 0;
}

.chain-nodes {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.chain-node {
  display: flex;
  align-items: center;
  gap: 0;
}

.chain-node-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-white, #ffffff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  min-width: 80px;
}

.chain-node-card:hover {
  border-color: var(--primary, #E84E0F);
  box-shadow: 0 2px 8px rgba(232, 78, 15, 0.1);
}

.chain-node-card.selected {
  border-color: var(--primary, #E84E0F);
  background: rgba(232, 78, 15, 0.05);
  box-shadow: 0 0 0 3px rgba(232, 78, 15, 0.12);
}

.chain-node-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.chain-node-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chain-node-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chain-node-transition {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
}

.chain-node-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red, #ef4444);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  line-height: 1;
}

.chain-node-card:hover .chain-node-remove {
  opacity: 1;
}

/* Arrow between chain nodes */
.chain-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.35rem;
  color: var(--text-muted, #94a3b8);
}

.chain-arrow-line {
  font-size: 16px;
  line-height: 1;
}

.chain-arrow-label {
  font-size: 9px;
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary, #E84E0F);
  font-weight: 500;
}

/* Chain Add Controls */

/* ==================== LOGIC STEPPER ==================== */
.logic-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.25rem;
  padding: 0.75rem 0.5rem;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
}

.logic-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
  min-width: 70px;
}

.logic-step-indicator:hover {
  background: rgba(232, 78, 15, 0.06);
}

.logic-step-indicator.active .step-dot {
  background: var(--primary, #E84E0F);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(232, 78, 15, 0.18);
  transform: scale(1.15);
}

.logic-step-indicator.completed .step-dot {
  background: #22c55e;
  color: #fff;
}

.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: #e2e8f0;
  color: #64748b;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.step-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  transition: color 0.2s;
}

.logic-step-indicator.active .step-label {
  color: var(--primary, #E84E0F);
}

.logic-step-indicator.completed .step-label {
  color: #22c55e;
}

.step-badge {
  position: absolute;
  top: -2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #94a3b8;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.logic-step-indicator.active .step-badge,
.logic-step-indicator.completed .step-badge {
  background: var(--primary, #E84E0F);
}

.step-connector {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  min-width: 16px;
  max-width: 50px;
  margin: 0 2px;
  margin-bottom: 18px;
  border-radius: 1px;
  transition: background 0.3s;
}

.step-connector.done {
  background: #22c55e;
}

/* ==================== STEP PANELS ==================== */
.logic-step-panel {
  display: none;
  animation: fadeInStep 0.25s ease;
}

.logic-step-panel.active {
  display: block;
}

@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Step Guidance */
.step-guidance {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.step-guidance-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.step-guidance-hints {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hint-item {
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}

/* Step Note Section */
.step-note-section {
  margin-bottom: 1rem;
}

.step-note-section label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  margin-bottom: 0.4rem;
}

.step-note-input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  background: var(--bg-white, #ffffff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 8px;
  color: var(--text-primary, #0f172a);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.step-note-input:focus {
  border-color: var(--primary, #E84E0F);
  box-shadow: 0 0 0 3px rgba(232, 78, 15, 0.1);
}

.step-note-input::placeholder {
  color: #94a3b8;
  font-size: 12px;
}

/* Step Chain Section */
.step-chain-section {
  margin-bottom: 0.75rem;
}

.step-chain-title {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.4rem;
}

/* Step Summary (Step 4) */
.step-summary-section {
  margin-bottom: 1rem;
}

.step-summary-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.summary-stat {
  font-size: 13px;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.summary-stat b {
  color: #0f172a;
}

/* Checklist (Step 4) */
.step-checklist {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.checklist-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 0;
  font-size: 12px;
  color: #64748b;
  transition: color 0.2s;
}

.checklist-item.done {
  color: #22c55e;
}

.checklist-item.done .checklist-icon {
  color: #22c55e;
}

.checklist-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
}

/* Step Navigation */
.logic-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--border, #e2e8f0);
}

.step-nav-info {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

/* Keep old chain-tabs for backwards compat (hidden) */
.chain-tabs {
  display: none;
}

.chain-node-desc {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.3;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chain-add-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.chain-select {
  padding: 0.45rem 0.75rem;
  font-size: 12px;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.chain-select:focus {
  border-color: var(--primary, #E84E0F);
}

.btn-sm {
  padding: 0.4rem 0.8rem !important;
  font-size: 12px !important;
}

.btn-text {
  background: none !important;
  border: none !important;
  color: var(--text-muted, #94a3b8) !important;
  cursor: pointer;
  padding: 0.25rem !important;
}

.btn-text:hover {
  color: var(--text-primary, #0f172a) !important;
}

/* Shape Detail Section */
.shape-detail-section {
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}

.shape-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: var(--bg-white, #ffffff);
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #0f172a);
}

.shape-detail-body {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.shape-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.shape-detail-row label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #475569);
  min-width: 70px;
  padding-top: 6px;
}

.shape-detail-row input[type="text"] {
  flex: 1;
  padding: 0.4rem 0.6rem;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  color: var(--text-primary, #0f172a);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}

.shape-detail-row input[type="text"]:focus {
  border-color: var(--primary, #E84E0F);
}

.shape-detail-row select {
  flex: 1;
  padding: 0.4rem 0.6rem;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  color: var(--text-primary, #0f172a);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.shape-detail-row select:focus {
  border-color: var(--primary, #E84E0F);
}

.shape-detail-row textarea {
  flex: 1;
  padding: 0.4rem 0.6rem;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  color: var(--text-primary, #0f172a);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 40px;
  transition: border-color 0.2s;
}

.shape-detail-row textarea:focus {
  border-color: var(--primary, #E84E0F);
}

.shape-detail-row textarea::placeholder {
  color: #94a3b8;
}

/* ==================== CHART CONTROLS ==================== */

.chart-controls {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.control-group label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}

.control-group select,
.control-group input {
  padding: 0.5rem 0.65rem;
  background: var(--bg-white, #ffffff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-primary, #0f172a);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.control-group select:focus,
.control-group input:focus {
  border-color: var(--primary, #E84E0F);
}

.control-group input[type="date"] {
  width: 130px;
}

/* ====== Ticker Search ====== */
.ticker-search-group {
  position: relative;
  min-width: 180px;
}

.ticker-search-wrapper {
  position: relative;
}

.ticker-search-input {
  width: 100%;
  padding: 0.5rem 0.65rem 0.5rem 2.4rem !important;
  font-size: 13px !important;
  font-weight: 600;
  border: 1.5px solid var(--border, #e2e8f0) !important;
  border-radius: var(--radius-sm, 8px) !important;
  background: var(--bg-white, #fff) !important;
  color: var(--text-primary, #0f172a) !important;
  outline: none;
}

.ticker-search-input:focus {
  border-color: var(--primary, #E84E0F) !important;
  box-shadow: 0 0 0 3px rgba(232, 78, 15, 0.1);
}

.ticker-current {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #E84E0F);
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
}

.ticker-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-white, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  margin-top: -1px;
}

.ticker-dropdown.open {
  display: block;
}

.ticker-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 13px;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}

.ticker-dropdown-item:hover,
.ticker-dropdown-item.highlighted {
  background: rgba(232, 78, 15, 0.06);
}

.ticker-dropdown-item .ticker-code {
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary, #0f172a);
  font-size: 12px;
  min-width: 50px;
}

.ticker-dropdown-item .ticker-name {
  color: var(--text-secondary, #475569);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticker-dropdown-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
}

/* ====== Timeframe Buttons ====== */
.tf-btn-group {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}

.tf-btn {
  padding: 0.45rem 0.8rem;
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-white, #fff);
  border: none;
  border-right: 1px solid var(--border, #e2e8f0);
  color: var(--text-secondary, #475569);
  cursor: pointer;
  transition: all 0.15s;
}

.tf-btn:last-child {
  border-right: none;
}

.tf-btn:hover {
  background: var(--bg-light, #f8fafc);
}

.tf-btn.active {
  background: var(--primary, #E84E0F);
  color: white;
}

/* ====== Period Group ====== */
.period-group .period-inputs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.period-dash {
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
}

/* ====== Load Button ====== */
.btn-load {
  padding: 0.5rem 1rem !important;
  font-size: 13px !important;
  white-space: nowrap;
  gap: 0.35rem !important;
}

/* ====== Loading Indicator ====== */
.chart-loading-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--primary, #E84E0F);
  font-weight: 500;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border, #e2e8f0);
  border-top-color: var(--primary, #E84E0F);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==================== STATS ==================== */

.header-stats {
  display: flex;
  gap: 0.75rem;
}

/* ==================== BUTTONS ==================== */

.ml-training-buttons .btn-primary,
.panel-actions .btn-primary,
.chart-controls .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--primary, #E84E0F);
  color: white;
}

.ml-training-buttons .btn-primary:hover,
.panel-actions .btn-primary:hover,
.chart-controls .btn-primary:hover {
  background: var(--primary-hover, #D14509);
}

.panel-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  background: var(--bg-light, #f8fafc);
  color: var(--text-secondary, #475569);
  transition: all 0.2s ease;
}

.panel-actions .btn-secondary:hover {
  background: var(--border, #e2e8f0);
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  background: var(--green, #22c55e);
  color: white;
}

.btn-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  background: var(--yellow, #f59e0b);
  color: white;
}

.btn-large {
  padding: 0.9rem 2rem;
  font-size: 15px;
}

/* ==================== TRAINING SECTION ==================== */

.training-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

#section-training .stat-card,
#section-results .stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

.stat-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.stat-card-info {
  display: flex;
  flex-direction: column;
}

#section-training .stat-card-value,
#section-results .stat-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

#section-training .stat-card-label,
#section-results .stat-card-label {
  font-size: 12px;
  color: var(--text-secondary, #475569);
}

/* Progress */
.training-progress-section {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 14px;
  color: var(--text-secondary, #475569);
}

.progress-bar {
  height: 8px;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary, #E84E0F), var(--green, #22c55e));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-hint {
  margin-top: 0.75rem;
  font-size: 13px;
  color: var(--yellow, #f59e0b);
}

/* ==================== MODULE TRAINING ==================== */

.module-training-section {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.module-training-header h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: var(--text-primary, #0f172a);
}

.module-training-desc {
  margin: 0 0 1.25rem 0;
  font-size: 0.875rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.5;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.module-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-secondary, #64748b);
  padding: 2rem;
}

.module-card {
  background: var(--bg-light, #f8fafc);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}

.module-card:hover {
  border-color: var(--primary, #E84E0F);
  box-shadow: 0 2px 8px rgba(232, 78, 15, 0.1);
}

.module-card.trained {
  border-color: #22c55e;
  background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
}

.module-card.locked {
  opacity: 0.6;
  pointer-events: none;
}

.module-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.module-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.module-card-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary, #E84E0F);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.module-card.trained .module-card-order {
  background: #22c55e;
}

.module-card.locked .module-card-order {
  background: #94a3b8;
}

.module-card-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.module-card-badge.trained {
  background: #dcfce7;
  color: #166534;
}

.module-card-badge.ready {
  background: #dbeafe;
  color: #1e40af;
}

.module-card-badge.not-ready {
  background: #fef3c7;
  color: #92400e;
}

.module-card-badge.locked {
  background: #f1f5f9;
  color: #64748b;
}

.module-card-desc {
  font-size: 0.813rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

.module-card-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.module-stat {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
}

.module-stat-value {
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  font-size: 0.875rem;
}

.module-stat-label {
  color: var(--text-muted, #94a3b8);
}

.module-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.module-tag {
  font-size: 0.688rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #475569;
  font-weight: 500;
}

.module-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light, #f1f5f9);
}

.module-train-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.813rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.2s;
}

.module-train-btn.primary {
  background: var(--primary, #E84E0F);
  color: #fff;
}

.module-train-btn.primary:hover {
  background: #d44510;
  transform: translateY(-1px);
}

.module-train-btn.success {
  background: #22c55e;
  color: #fff;
}

.module-train-btn.success:hover {
  background: #16a34a;
}

.module-train-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.module-trained-info {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}

.module-trained-info .date {
  font-weight: 600;
}

.module-training-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.813rem;
  color: #1e40af;
}

.training-divider {
  border: none;
  border-top: 1px dashed var(--border, #e2e8f0);
  margin: 1.5rem 0;
}

/* Training params */
.training-params {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.training-params h3 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}

.params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.param-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.param-group label {
  font-size: 13px;
  color: var(--text-secondary, #475569);
  font-weight: 500;
}

.param-group input {
  padding: 0.6rem 0.75rem;
  background: var(--bg-white, #ffffff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-primary, #0f172a);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.param-group input:focus {
  border-color: var(--primary, #E84E0F);
}

.param-hint {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

/* Training controls */
.training-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Training log */
.training-log {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--bg-light, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.log-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}

.training-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
}

.training-status.running .status-indicator {
  background: var(--green, #22c55e);
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: var(--text-muted, #94a3b8);
  border-radius: 50%;
}

.log-content {
  padding: 1rem;
  max-height: 200px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-secondary, #475569);
  background: #f9fafb;
}

.log-line {
  padding: 0.25rem 0;
}

.log-line.log-success {
  color: var(--green, #22c55e);
}

.log-line.log-epoch {
  color: var(--blue, #3b82f6);
}

.log-line.log-error {
  color: var(--red, #ef4444);
}

.log-line.log-warning {
  color: var(--yellow, #f59e0b);
}

.training-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg-light, #f8fafc);
  border-top: 1px solid var(--border, #e2e8f0);
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}

.metric-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

/* Training history */
.training-history {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1.5rem;
}

.training-history h3 {
  margin: 0 0 1rem 0;
  color: var(--text-primary, #0f172a);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
}

.history-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-weight: 600;
}

.history-table td {
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: var(--text-primary, #0f172a);
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.history-table .status-active {
  color: var(--green, #22c55e);
}

.history-table .status-replaced {
  color: var(--text-muted, #94a3b8);
}

/* ==================== DATA BROWSER SECTION ==================== */

.data-browser-section {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.data-browser-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.data-browser-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}

.data-browser-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-light, #f8fafc);
  color: var(--text-secondary, #475569);
  transition: all 0.2s;
}

.btn-sm:hover {
  background: var(--bg-white, #ffffff);
  border-color: var(--primary, #E84E0F);
  color: var(--primary, #E84E0F);
}

.btn-danger {
  border-color: #fca5a5;
  color: #dc2626;
  background: #fef2f2;
}

.btn-danger:hover {
  background: #fee2e2;
  border-color: #dc2626;
}

/* Expanded Stats Grid */
.data-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.data-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 0.4rem;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
}

.data-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.data-stat-label {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tickers breakdown row */
.data-tickers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.ticker-chip .chip-count {
  background: #1e40af;
  color: #fff;
  padding: 0 0.35rem;
  border-radius: 10px;
  font-size: 10px;
  min-width: 16px;
  text-align: center;
}

/* Filter row */
.data-filter-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.data-filter-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-primary, #0f172a);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.data-filter-input:focus {
  border-color: var(--primary, #E84E0F);
}

.data-filter-select {
  padding: 0.5rem 0.75rem;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-secondary, #475569);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

/* Data browser table */
.data-browser-table-wrap {
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}

.data-browser-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-browser-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-light, #f8fafc);
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border, #e2e8f0);
  white-space: nowrap;
}

.data-browser-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  color: var(--text-primary, #0f172a);
  vertical-align: middle;
}

.data-browser-table tbody tr:hover {
  background: #f0f7ff;
}

.data-browser-table .empty-row td {
  text-align: center;
  color: var(--text-muted, #94a3b8);
  padding: 2rem;
}

.db-ticker {
  font-weight: 700;
  color: var(--primary, #E84E0F);
}

.db-tf {
  background: var(--bg-light, #f8fafc);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.db-period {
  font-size: 11px;
  color: var(--text-secondary, #475569);
  white-space: nowrap;
}

.db-type-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.db-type-badge {
  font-size: 10px;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.db-type-badge.trend { background: #dcfce7; color: #166534; }
.db-type-badge.horizontal { background: #fef3c7; color: #92400e; }
.db-type-badge.marker { background: #fce7f3; color: #9d174d; }
.db-type-badge.zone { background: #e0e7ff; color: #3730a3; }
.db-type-badge.ray { background: #f3e8ff; color: #6b21a8; }
.db-type-badge.rect { background: #ccfbf1; color: #115e59; }
.db-type-badge.other { background: #f1f5f9; color: #475569; }

.db-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  max-width: 120px;
}

.db-tag {
  font-size: 9px;
  padding: 0.1rem 0.3rem;
  background: #fef3c7;
  color: #92400e;
  border-radius: 3px;
  font-weight: 600;
}

.db-chain-info {
  font-size: 11px;
}

.db-chain-info .chain-yes {
  color: #22c55e;
  font-weight: 600;
}

.db-chain-info .chain-no {
  color: var(--text-muted, #94a3b8);
}

.db-date {
  font-size: 11px;
  color: var(--text-secondary, #475569);
  white-space: nowrap;
}

.db-actions {
  display: flex;
  gap: 0.3rem;
}

.db-actions button {
  padding: 0.25rem 0.5rem;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--border, #e2e8f0);
  cursor: pointer;
  background: var(--bg-white, #ffffff);
  color: var(--text-secondary, #475569);
  transition: all 0.15s;
  white-space: nowrap;
}

.db-actions button:hover {
  border-color: var(--primary, #E84E0F);
  color: var(--primary, #E84E0F);
}

.db-actions button.db-btn-delete:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: #fef2f2;
}

/* Detail Modal */
.data-detail-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-detail-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
}

.data-detail-content {
  position: relative;
  background: var(--bg-white, #ffffff);
  border-radius: var(--radius, 12px);
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.data-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.data-detail-header h3 {
  margin: 0;
  font-size: 1rem;
}

.data-detail-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.data-detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border, #e2e8f0);
}

/* Detail content elements */
.detail-section {
  margin-bottom: 1.25rem;
}

.detail-section h4 {
  margin: 0 0 0.5rem 0;
  font-size: 13px;
  color: var(--text-secondary, #475569);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}

.detail-info-item {
  padding: 0.5rem;
  background: var(--bg-light, #f8fafc);
  border-radius: 6px;
}

.detail-info-item .label {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
}

.detail-info-item .value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

.detail-lines-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
}

.detail-line-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-size: 12px;
}

.detail-line-item:last-child {
  border-bottom: none;
}

.detail-line-type {
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

.detail-line-tag {
  font-size: 10px;
  padding: 0.1rem 0.4rem;
  background: #fef3c7;
  color: #92400e;
  border-radius: 3px;
  font-weight: 600;
}

.detail-scenario {
  padding: 0.75rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 13px;
  color: #92400e;
  font-style: italic;
}

.detail-chain-visual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem;
}

.detail-chain-node {
  padding: 0.25rem 0.5rem;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.detail-chain-arrow {
  color: var(--text-muted, #94a3b8);
  font-size: 14px;
}

/* Cache Stats */
.cache-stats-section {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.cache-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.cache-stats-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}

.cache-stats-body {
  font-size: 13px;
}

.cache-loading {
  color: var(--text-muted, #94a3b8);
  text-align: center;
}

.cache-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.5rem;
}

.cache-file-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
}

.cache-file-info {
  display: flex;
  flex-direction: column;
}

.cache-file-name {
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.cache-file-meta {
  font-size: 11px;
  color: var(--text-secondary, #475569);
}

.cache-file-size {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}

.cache-total {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border, #e2e8f0);
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

.cache-empty {
  text-align: center;
  color: var(--text-muted, #94a3b8);
  padding: 1rem;
}

/* ==================== RESULTS SECTION ==================== */

.model-info {
  padding: 1.5rem;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  margin-bottom: 1.5rem;
}

.model-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 15px;
  color: var(--text-primary, #0f172a);
}

.model-status-icon {
  font-size: 1.25rem;
}

.test-section {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

/* --- Верхняя панель управления --- */
.test-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.test-controls-left {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.test-controls-right {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.control-group.compact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.control-group.compact label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.5px;
}
.control-group.compact.inline {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.control-group.compact.inline label {
  font-size: 11px;
  text-transform: none;
}
.period-inputs.compact {
  display: flex;
  gap: 4px;
  align-items: center;
}
.period-inputs.compact input[type="date"] {
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-white, #fff);
}
.ticker-search-wrap {
  position: relative;
}
.ticker-search-wrap .ticker-search-input {
  width: 100%;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  margin-bottom: 2px;
}

/* --- Панель инструментов рисования для теста --- */
.test-tools-panel {
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.5rem;
}
.tools-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.tools-divider {
  width: 1px;
  height: 20px;
  background: var(--border, #e2e8f0);
  margin: 0 4px;
}
.ml-tag-select {
  padding: 3px 6px;
  font-size: 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
}
.color-input-sm {
  width: 28px;
  height: 24px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  padding: 1px;
  cursor: pointer;
}
.num-input-sm {
  width: 42px;
  padding: 3px 4px;
  font-size: 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  text-align: center;
}
.test-tool-hint {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 350px;
}
.test-tools-panel .tool-btn.active {
  background: var(--primary, #6366f1) !important;
  color: #fff !important;
  border-color: var(--primary, #6366f1) !important;
}
.test-tools-panel .tool-btn.active svg {
  stroke: #fff !important;
}

/* --- График с overlay --- */
.test-chart-wrapper {
  position: relative;
  margin-bottom: 0.75rem;
}
.test-chart-wrapper .chart-container {
  height: 500px;
  background: #1a1a2e;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  border: 1px solid #334155;
}

/* --- Fullscreen button --- */
.test-fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 15;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  color: #334155;
  transition: all 0.2s;
}
.test-fullscreen-btn:hover {
  background: #fff;
  color: #6366f1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* --- Fullscreen mode --- */
.test-chart-wrapper.test-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  margin: 0;
  border-radius: 0;
  background: #131722;
  display: flex;
  flex-direction: column;
}
.test-chart-wrapper.test-fullscreen .chart-container {
  flex: 1;
  height: 100% !important;
  border-radius: 0;
  border: none;
}
.test-chart-wrapper.test-fullscreen .test-overlay-canvas {
  border-radius: 0;
}
.test-chart-wrapper.test-fullscreen .test-fullscreen-btn {
  top: 12px;
  right: 12px;
  z-index: 100002;
}
.test-chart-wrapper.test-fullscreen .test-loading {
  z-index: 100001;
}
body.test-fullscreen-active {
  overflow: hidden;
}

/* --- FS Toolbar --- */
.test-fs-toolbar {
  display: none;
}
.test-chart-wrapper.test-fullscreen .test-fs-toolbar {
  display: flex;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 50px;
  z-index: 100002;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.test-fs-toolbar-group {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(19, 23, 34, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.test-fs-toolbar-group .tool-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  background: transparent;
  color: #d1d5db;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.test-fs-toolbar-group .tool-btn:hover {
  background: rgba(255,255,255,0.1);
}
.test-fs-toolbar-group .tool-btn.active {
  background: #6366f1 !important;
  color: #fff !important;
  border-color: #6366f1 !important;
}
.test-fs-toolbar-group .tool-btn.active svg {
  stroke: #fff !important;
}
.test-fs-toolbar-group .ml-tag-select {
  background: rgba(30,30,50,0.9);
  color: #d1d5db;
  border-color: rgba(255,255,255,0.15);
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
}

/* --- FS Bottom Panel --- */
.test-fs-bottom-panel {
  display: none;
}
.test-chart-wrapper.test-fullscreen .test-fs-bottom-panel {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(19,23,34,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 8px;
  z-index: 100001;
  max-height: 220px;
  overflow-y: auto;
}
.test-fs-bottom-panel .predicted-lines-table {
  color: #d1d5db;
  font-size: 12px;
}
.test-fs-bottom-panel .predicted-lines-table th {
  background: rgba(30,30,50,0.8);
  color: #94a3b8;
  padding: 4px 8px;
}
.test-fs-bottom-panel .predicted-lines-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #d1d5db;
}

/* Inline tag select in correction table */
.tag-select-inline {
  padding: 2px 6px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  background: var(--bg-white, #fff);
  color: var(--text-primary, #0f172a);
  font-size: 11px;
  cursor: pointer;
}
.correction-table tr.selected {
  background: rgba(99, 102, 241, 0.08) !important;
  outline: 2px solid #6366f1;
}
.correction-table .btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
}
.correction-table .btn-icon:hover {
  opacity: 0.7;
}

/* Tag popup on double click */
.test-tag-popup {
  position: absolute;
  z-index: 100010;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(19, 23, 34, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 102, 241, 0.5);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -100%);
  margin-top: -10px;
}
.test-tag-popup select {
  background: rgba(30, 30, 50, 0.9);
  color: #d1d5db;
  border-color: rgba(255,255,255,0.2);
}
.test-overlay-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  border-radius: var(--radius-sm, 8px);
}
/* Перехватываем события ТОЛЬКО когда активен инструмент рисования */
.test-overlay-canvas.tool-drawing {
  pointer-events: auto;
  cursor: crosshair;
}
.test-overlay-canvas.tool-eraser {
  pointer-events: auto;
  cursor: not-allowed;
}
/* Pointer в режиме исправления — перехватываем для drag фигур */
.test-overlay-canvas.tool-pointer-edit {
  pointer-events: auto;
  cursor: grab;
}
.test-overlay-canvas.tool-pointer-edit:active {
  cursor: grabbing;
}
/* Pointer без режима исправления — прозрачен */
.test-overlay-canvas.tool-pointer {
  pointer-events: none;
  cursor: default;
}
.test-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 14px;
  z-index: 20;
}

/* --- Prediction Results --- */
.prediction-results {
  padding: 1rem;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 0.75rem;
}
.prediction-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.prediction-results h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}
.prediction-stats {
  display: flex;
  gap: 0.75rem;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}
.prediction-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.prediction-stats .stat-value {
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

/* --- Таблица предсказанных линий --- */
.predicted-lines-table-wrap {
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
}
.predicted-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.predicted-lines-table th {
  background: var(--bg-white, #ffffff);
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  border-bottom: 2px solid var(--border, #e2e8f0);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
/* Column widths */
.predicted-lines-table th:nth-child(1),
.predicted-lines-table td:nth-child(1) { width: 30px; text-align: center; }
.predicted-lines-table th:nth-child(2),
.predicted-lines-table td:nth-child(2) { width: 70px; }
.predicted-lines-table th:nth-child(3),
.predicted-lines-table td:nth-child(3) { width: 110px; }
.predicted-lines-table th:nth-child(7),
.predicted-lines-table td:nth-child(7) { width: 100px; text-align: center; }

.predicted-lines-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  color: var(--text-primary, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.predicted-lines-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.04);
}
.predicted-lines-table tbody tr.selected {
  background: rgba(99, 102, 241, 0.1);
  outline: 2px solid #6366f1;
}
.predicted-lines-table .tag-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.predicted-lines-table .tag-badge.tag-kut { background: #6366f1; }
.predicted-lines-table .tag-badge.tag-tu { background: #22c55e; }
.predicted-lines-table .tag-badge.tag-kt { background: #ef4444; }
.predicted-lines-table .tag-badge.tag-kut_sup { background: #0ea5e9; }
.predicted-lines-table .tag-badge.tag-kut_res { background: #f97316; }
.predicted-lines-table .tag-badge.tag-up { background: #14b8a6; }
.predicted-lines-table .tag-badge.tag-us { background: #e11d48; }
.predicted-lines-table .tag-badge.tag-cascade { background: #8b5cf6; }
.predicted-lines-table .tag-badge.tag-default { background: #64748b; }
.predicted-lines-table .confidence-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.predicted-lines-table .confidence-fill {
  height: 6px;
  border-radius: 3px;
  width: 60px;
  background: #e2e8f0;
  overflow: hidden;
}
.predicted-lines-table .confidence-fill-inner {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.predicted-lines-table .confidence-fill-inner.high { background: #22c55e; }
.predicted-lines-table .confidence-fill-inner.mid { background: #f59e0b; }
.predicted-lines-table .confidence-fill-inner.low { background: #ef4444; }
.predicted-lines-table .btn-icon {
  padding: 3px 6px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.predicted-lines-table .btn-icon:hover {
  background: var(--bg-light, #f8fafc);
}

.predicted-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.predicted-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
}

.line-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 16px;
}

.line-info {
  flex: 1;
}

.line-type {
  font-weight: 500;
  color: var(--text-primary, #0f172a);
}

.line-details {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

.line-confidence {
  font-size: 13px;
  font-weight: 600;
}
.line-confidence.high { color: #22c55e; }
.line-confidence.mid { color: #f59e0b; }
.line-confidence.low { color: #ef4444; }

.result-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --- Таблица исправлений --- */
.correction-results {
  padding: 1rem;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 0.75rem;
}
.correction-results .section-header.compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.correction-results .section-header.compact h3 {
  margin: 0;
  font-size: 0.9rem;
}
.correction-count {
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
}
.btn-danger {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 6px);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
}
.btn-danger:hover { background: #dc2626; }

/* Model metrics */
.model-metrics {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1.5rem;
}

.model-metrics h3 {
  margin: 0 0 1rem 0;
  color: var(--text-primary, #0f172a);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.metric-card {
  text-align: center;
  padding: 1.5rem;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
}

.metric-card-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--green, #22c55e);
}

.metric-card-label {
  font-size: 13px;
  color: var(--text-secondary, #475569);
  margin-top: 0.25rem;
}

/* ==================== SECTION LAYOUT ==================== */

.section-header h1 {
  color: var(--text-primary, #0f172a);
  font-size: 1.4rem;
  margin: 0;
}

.section-subtitle {
  color: var(--text-secondary, #475569);
  font-size: 13px;
  margin-top: 2px;
}

#section-labeling .section-header {
  margin-bottom: 0.75rem;
}

/* Prevent overall page horizontal scroll */
.main-content {
  overflow-x: hidden;
  max-width: calc(100vw - var(--sidebar-width, 250px));
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1024px) {
  .tools-panel {
    flex-wrap: wrap;
  }
  
  .tools-section.tools-right {
    margin-left: 0;
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .header-stats {
    flex-wrap: wrap;
  }

  .chart-controls {
    gap: 0.5rem;
  }
}

@media (max-width: 768px) {
  .chart-container {
    height: 400px;
  }
  
  .panel-actions {
    flex-direction: column;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .main-content {
    max-width: 100vw;
  }
}

/* ==================== TOAST NOTIFICATIONS ==================== */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 20px;
  background: var(--text-primary, #0f172a);
  color: white;
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
  font-size: 14px;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10000;
  max-width: 360px;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.info {
  border-left: 4px solid var(--blue, #3b82f6);
}

.toast.success {
  border-left: 4px solid var(--green, #22c55e);
  background: #166534;
}

.toast.error {
  border-left: 4px solid var(--red, #ef4444);
  background: #991b1b;
}

.toast.warning {
  border-left: 4px solid var(--yellow, #f59e0b);
}

/* ==================== KEYBOARD HINTS ==================== */

.keyboard-hints {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  margin-top: 0.5rem;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}

.keyboard-hints kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary, #475569);
  margin-right: 4px;
  box-shadow: 0 1px 0 var(--border, #e2e8f0);
}

/* ==================== IMPROVED SCROLLBAR ==================== */

.lines-table-wrapper::-webkit-scrollbar {
  width: 8px;
}

.lines-table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-light, #f8fafc);
  border-radius: 4px;
}

.lines-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border, #e2e8f0);
  border-radius: 4px;
}

.lines-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #94a3b8);
}

.log-content::-webkit-scrollbar {
  width: 6px;
}

.log-content::-webkit-scrollbar-track {
  background: transparent;
}

.log-content::-webkit-scrollbar-thumb {
  background: var(--border, #e2e8f0);
  border-radius: 3px;
}

/* ==================== BACK LINK ==================== */

.sidebar-footer .back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary, #475569);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 8px);
  transition: all 0.2s;
}

.sidebar-footer .back-link:hover {
  background: var(--bg-light, #f8fafc);
  color: var(--text-primary, #0f172a);
}

/* ==================== MODEL TYPE SELECTOR ==================== */

.model-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.model-type-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--bg-white, #ffffff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  text-align: left;
}

.model-type-btn:hover {
  border-color: var(--primary, #E84E0F);
  box-shadow: 0 2px 8px rgba(232, 78, 15, 0.08);
}

.model-type-btn.active {
  border-color: var(--primary, #E84E0F);
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
  box-shadow: 0 0 0 3px rgba(232, 78, 15, 0.10);
}

.model-type-icon {
  font-size: 1.75rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f1f5f9;
  flex-shrink: 0;
}

.model-type-btn.active .model-type-icon {
  background: #fed7aa;
}

.model-type-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.model-type-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary, #0f172a);
}

.model-type-desc {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
}

.model-type-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: #e2e8f0;
  color: #64748b;
  letter-spacing: 0.5px;
}

.model-type-badge-new {
  background: linear-gradient(135deg, #E84E0F, #f97316);
  color: white;
}

/* ==================== VISION ARCHITECTURE CARD ==================== */

.vision-arch-card {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.vision-arch-card h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}

.arch-diagram {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  overflow-x: auto;
}

.arch-block {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  text-align: center;
  min-width: 120px;
  flex-shrink: 0;
}

.arch-block-icon {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.arch-block-title {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary, #0f172a);
}

.arch-block-size {
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}

.arch-input {
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.arch-encoder {
  background: #f3e8ff;
  border: 1px solid #c4b5fd;
}

.arch-outputs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.arch-head1 {
  background: #dcfce7;
  border: 1px solid #86efac;
}

.arch-head2 {
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

.arch-arrow {
  font-size: 1.5rem;
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
}

/* Channels list */
.arch-channels {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #e2e8f0);
}

.arch-channel-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  margin-bottom: 0.5rem;
}

.arch-channels-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.arch-ch {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: #f1f5f9;
  color: var(--text-primary, #0f172a);
  border-left: 3px solid var(--ch-color, #888);
  font-weight: 500;
}

/* ==================== VISION TRAINING CONTROLS ==================== */

.training-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.btn-vision {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.btn-vision:hover {
  background: linear-gradient(135deg, #6d28d9, #9333ea);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
}

.btn-vision:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-large {
  padding: 0.875rem 2rem;
  font-size: 1rem;
}

.vision-training-hint {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
}

/* ==================== HEATMAP BARS ==================== */

.heatmap-summary-card {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.heatmap-summary-card h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.heatmap-bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.heatmap-bar-label {
  font-size: 0.8rem;
  color: var(--text-secondary, #475569);
  min-width: 120px;
  font-weight: 500;
}

.heatmap-bar-track {
  flex: 1;
  height: 10px;
  background: #f1f5f9;
  border-radius: 5px;
  overflow: hidden;
}

.heatmap-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
  min-width: 2px;
}

.heatmap-bar-value {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  font-family: 'JetBrains Mono', monospace;
  min-width: 36px;
  text-align: right;
}

/* ==================== VISION PREDICTION RESULT ==================== */

.vision-prediction-result {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.vision-pred-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.vision-tag {
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f3e8ff, #ede9fe);
  border: 1px solid #c4b5fd;
  color: #4c1d95;
  font-weight: 600;
  transition: opacity 0.2s;
}

.vision-pred-heatmap-bars {
  padding-top: 0.5rem;
}

/* ==================== PREDICT MODEL SELECT ==================== */

.predict-model-select {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
}

.predict-model-select label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  white-space: nowrap;
}

.predict-model-select select {
  padding: 0.5rem 1rem;
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  background: white;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.predict-model-select select:focus {
  border-color: var(--primary, #E84E0F);
}

/* ==================== TEXT ENCODER UI ==================== */

.arch-text-input {
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

.arch-text-encoder {
  background: #fef9c3;
  border: 1px solid #fde68a;
}

.arch-fusion {
  background: #ede9fe;
  border: 1px solid #c4b5fd;
}

.arch-inputs-col,
.arch-encoders-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Text sources info */
.text-sources {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #e2e8f0);
}

.text-sources-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  margin-bottom: 0.5rem;
}

.text-sources-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.text-src {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
  font-weight: 500;
}

.text-vocab-stats {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  padding: 6px 10px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid var(--border, #e2e8f0);
}

.text-vocab-stats span {
  font-weight: 600;
  color: var(--text-secondary, #475569);
}

/* Vision note input (prediction page) */
.vision-note-input {
  background: var(--bg-white, #ffffff);
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.vision-note-input label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  margin-bottom: 0.5rem;
}

.vision-note-input textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text-primary, #0f172a);
  background: white;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.vision-note-input textarea:focus {
  border-color: #f59e0b;
}

.vision-note-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
}

.vision-text-used {
  margin-top: 0.5rem;
  padding: 6px 12px;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #854d0e;
  font-weight: 500;
}

/* ==================== LOCAL TRAINING ==================== */

.local-training-card {
  margin-top: 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-radius: 12px;
}
.local-training-card h3 {
  margin: 0 0 8px;
  color: #e2e8f0;
  font-size: 1.05rem;
}
.local-desc {
  margin: 0 0 16px;
  color: #94a3b8;
  font-size: 0.85rem;
  line-height: 1.5;
}
.local-training-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #475569;
  border-radius: 8px;
  background: transparent;
  color: #cbd5e1;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline:hover {
  background: #1e293b;
  border-color: #60a5fa;
  color: #93c5fd;
}
.btn-local-upload {
  cursor: pointer;
}
.local-upload-status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
}
.local-upload-status.success {
  background: #052e16;
  color: #4ade80;
  border: 1px solid #166534;
}
.local-upload-status.error {
  background: #450a0a;
  color: #fca5a5;
  border: 1px solid #991b1b;
}
.local-upload-status.loading {
  background: #172554;
  color: #93c5fd;
  border: 1px solid #1e3a5f;
}
.local-instructions {
  margin-top: 16px;
  color: #94a3b8;
  font-size: 0.82rem;
}
.local-instructions summary {
  cursor: pointer;
  color: #60a5fa;
  font-weight: 500;
  margin-bottom: 8px;
}
.local-instructions ol {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}
.local-instructions code {
  background: #1e293b;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #7dd3fc;
}

/* ==================== ИИ Советник Мониторинг ==================== */

/* FAQ / How it works block */
.mon-faq-block {
  margin-bottom: 20px; border: 1px solid #e2e8f0;
  border-radius: 10px; overflow: hidden; background: #fff;
}
.mon-faq-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: #475569; transition: background 0.15s;
}
.mon-faq-toggle:hover { background: #f8fafc; }
.mon-faq-toggle svg { transition: transform 0.2s; }
.mon-faq-block.open .mon-faq-toggle svg { transform: rotate(180deg); }
.mon-faq-body {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s;
  padding: 0 18px; font-size: 12px; color: #64748b; line-height: 1.7;
}
.mon-faq-block.open .mon-faq-body { max-height: 600px; padding: 0 18px 16px; }
.mon-faq-body b { color: #0f172a; }
.mon-faq-body ul { padding-left: 18px; margin: 6px 0; }
.mon-faq-body li { margin-bottom: 4px; }

/* ── Monitoring: Admin-style design ──────────────────── */
.mon-summary {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 28px;
}
.mon-sum-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 16px 14px; text-align: center;
}
.mon-sum-value {
  display: block; font-size: 26px; font-weight: 700; color: #0f172a; line-height: 1.2;
}
.mon-sum-label {
  display: block; font-size: 11px; color: #94a3b8; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.3px;
}
.mon-sum-green .mon-sum-value { color: #16a34a; }
.mon-sum-red .mon-sum-value { color: #dc2626; }

.mon-group-title {
  font-size: 15px; font-weight: 600; color: #0f172a;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9;
}

.mon-machines-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.mon-machine-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 16px 18px; transition: box-shadow 0.15s;
}
.mon-machine-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.mon-machine-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.mon-machine-name { font-size: 14px; font-weight: 600; color: #0f172a; }
.mon-machine-port { font-weight: 400; color: #94a3b8; font-size: 11px; }
.mon-machine-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.mon-machine-dot.online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.mon-machine-dot.offline { background: #ef4444; }
.mon-machine-desc { font-size: 12px; color: #94a3b8; margin-bottom: 12px; }
.mon-machine-metrics { display: flex; flex-direction: column; gap: 0; }
.mon-m {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px;
}
.mon-m:last-child { border-bottom: none; }
.mon-m-label { color: #64748b; }
.mon-m-val { font-weight: 600; color: #0f172a; }

/* Journal stats row */
.mon-journal-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 28px;
}
.mon-j-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 14px; text-align: center;
}
.mon-j-val { display: block; font-size: 22px; font-weight: 700; color: #0f172a; }
.mon-j-lbl { display: block; font-size: 11px; color: #94a3b8; margin-top: 3px; }
.mon-j-green .mon-j-val { color: #16a34a; }
.mon-j-red .mon-j-val { color: #dc2626; }

.mon-winrate-chart-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px 8px;
  margin-bottom: 28px;
}
.mon-winrate-chart {
  width: 100%;
  max-height: 180px;
  display: block;
}

/* Profile info */
.mon-profile-info {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.mon-profile-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 6px 14px; border-radius: 6px;
  background: #6366f1; color: #fff; letter-spacing: 0.5px;
}
.mon-profile-label { font-size: 14px; font-weight: 600; color: #0f172a; }
.mon-assessments-count { font-size: 12px; color: #94a3b8; }

/* Refresh bar */
.mon-refresh-bar { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.mon-refresh-btn {
  background: #ef4444; color: #fff; border: none; border-radius: 8px;
  padding: 10px 24px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.mon-refresh-btn:hover { background: #dc2626; }
.mon-last-update { font-size: 11px; color: #94a3b8; }

.mon-strategies-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.mon-strat-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 16px 18px; transition: box-shadow 0.15s;
  border-top: 3px solid #6366f1;
}
.mon-strat-card:nth-child(1) { border-top-color: #a855f7; }
.mon-strat-card:nth-child(2) { border-top-color: #3b82f6; }
.mon-strat-card:nth-child(3) { border-top-color: #10b981; }
.mon-strat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.mon-strat-name { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.mon-strat-desc { font-size: 11px; color: #94a3b8; margin-bottom: 10px; }

/* News Triggers */
.mon-news-triggers-section { margin-bottom: 16px; }
.mon-news-triggers-summary { display: flex; gap: 16px; margin-bottom: 12px; }
.mon-triggers-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
  margin-bottom: 12px;
}
.mon-trig-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 12px 14px; border-left: 3px solid #f59e0b;
}
.mon-trig-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.mon-trig-name { font-size: 12px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
.mon-sub-title { font-size: 13px; font-weight: 600; color: #475569; margin: 0 0 8px; }
.mon-triggers-log {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 10px; max-height: 200px; overflow-y: auto;
}
.mon-trig-log-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 12px; border-bottom: 1px solid #f1f5f9;
}
.mon-trig-log-row:last-child { border-bottom: none; }
.mon-trig-log-time { color: #94a3b8; font-size: 11px; min-width: 40px; }
.mon-trig-log-ticker { font-weight: 700; color: #1e293b; min-width: 55px; }
.mon-trig-log-label { color: #475569; flex: 1; }
.mon-trig-log-conf { color: #6366f1; font-weight: 600; font-size: 11px; }

@media (max-width: 768px) {
  .mon-summary { grid-template-columns: repeat(3, 1fr); }
  .mon-machines-grid { grid-template-columns: 1fr; }
  .mon-strategies-grid { grid-template-columns: 1fr; }
  .mon-triggers-grid { grid-template-columns: 1fr; }
  .mon-journal-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ==================== ИИ Советник — Новости (v2) ==================== */

.na-active-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.na-active-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 14px 16px; border-left: 4px solid #6366f1;
  transition: box-shadow 0.15s;
}
.na-active-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.na-active-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.na-active-ticker { font-size: 15px; font-weight: 700; color: #0f172a; }
.na-active-conf { font-size: 11px; color: #6366f1; font-weight: 600; margin-left: auto; }
.na-active-label { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.na-active-headline { font-size: 11px; color: #94a3b8; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-active-levels {
  display: flex; gap: 12px; font-size: 12px; color: #475569; flex-wrap: wrap;
}
.na-active-age { font-size: 11px; color: #94a3b8; margin-top: 6px; }

.na-dir-long {
  background: #dcfce7; color: #15803d; font-weight: 700; font-size: 11px;
  padding: 2px 8px; border-radius: 4px;
}
.na-dir-short {
  background: #fee2e2; color: #b91c1c; font-weight: 700; font-size: 11px;
  padding: 2px 8px; border-radius: 4px;
}
.na-flow-badge {
  background: #dbeafe; color: #1d4ed8; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
}

.na-strategies-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.na-strat-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 14px 16px; border-top: 3px solid #6366f1;
  transition: box-shadow 0.15s;
}
.na-strat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.na-strat-card:nth-child(odd) { border-top-color: #a855f7; }
.na-strat-card:nth-child(even) { border-top-color: #3b82f6; }
.na-strat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.na-strat-name { font-size: 13px; font-weight: 700; color: #1e293b; }

.na-journal { margin-bottom: 28px; }
.na-journal-table {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  overflow: hidden;
}
.na-journal-header {
  display: grid; grid-template-columns: 100px 70px 1fr 70px 80px 80px 70px 70px;
  padding: 10px 14px; background: #f8fafc; font-size: 11px; font-weight: 600;
  color: #64748b; text-transform: uppercase; letter-spacing: 0.3px;
  border-bottom: 1px solid #e2e8f0;
}
.na-journal-row {
  display: grid; grid-template-columns: 100px 70px 1fr 70px 80px 80px 70px 70px;
  padding: 8px 14px; font-size: 12px; color: #334155;
  border-bottom: 1px solid #f1f5f9; align-items: center;
}
.na-journal-row:last-child { border-bottom: none; }
.na-journal-row:hover { background: #f8fafc; }

.na-definitions-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.na-def-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 14px 16px; transition: box-shadow 0.15s;
}
.na-def-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.na-def-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.na-def-name { font-size: 13px; font-weight: 700; color: #1e293b; }
.na-def-method {
  font-size: 12px; color: #475569; margin-bottom: 8px;
}
.na-def-method ol {
  margin: 0; padding-left: 18px;
}
.na-def-method li { margin-bottom: 2px; }
.na-def-params {
  display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #64748b;
}
.na-def-params span {
  background: #f1f5f9; padding: 2px 8px; border-radius: 4px;
}

@media (max-width: 768px) {
  .na-active-grid { grid-template-columns: 1fr; }
  .na-strategies-grid { grid-template-columns: 1fr; }
  .na-definitions-grid { grid-template-columns: 1fr; }
  .na-journal-header, .na-journal-row {
    grid-template-columns: 80px 60px 1fr 60px 70px 70px 60px;
  }
}

/* ── TA Signal Board (Learning) ────────────── */
.mon-signals-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.mon-sig-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 12px 14px; border-left: 4px solid #6366f1;
}
.mon-sig-card.mon-sig-bull { border-left-color: #16a34a; }
.mon-sig-card.mon-sig-bear { border-left-color: #dc2626; }
.mon-sig-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.mon-sig-dir { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.mon-sig-dir.mon-sig-bull { background: rgba(34,197,94,0.1); color: #16a34a; }
.mon-sig-dir.mon-sig-bear { background: rgba(239,68,68,0.1); color: #dc2626; }
.mon-sig-strat { font-size: 11px; color: #6366f1; font-weight: 600; margin-left: auto; }
.mon-sig-levels { display: flex; gap: 12px; font-size: 12px; color: #64748b; margin-bottom: 6px; }
.mon-sig-levels b { color: #1e293b; }
.mon-sig-live { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.mon-sig-pnl { font-size: 15px; font-weight: 800; }
.mon-sig-pnl.pnl-pos { color: #16a34a; }
.mon-sig-pnl.pnl-neg { color: #dc2626; }
.mon-sig-status { font-size: 11px; font-weight: 600; color: #6366f1; }
.mon-sig-age { font-size: 11px; color: #94a3b8; margin-top: 4px; }
.mon-empty { font-size: 13px; color: #94a3b8; padding: 16px 0; }

.mon-closed-tbl {
  width: 100%; border-collapse: collapse; font-size: 12px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden;
}
.mon-closed-tbl th {
  background: #f8fafc; padding: 8px 12px; text-align: left;
  font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb;
}
.mon-closed-tbl td {
  padding: 6px 12px; border-bottom: 1px solid #f0f0f5; color: #1e293b;
}
.mon-closed-tbl tr:last-child td { border-bottom: none; }
.mon-closed-tbl tr:hover td { background: #f8fafc; }

/* ==================== RESPONSIVE VISION ==================== */

@media (max-width: 900px) {
  .model-type-selector {
    grid-template-columns: 1fr;
  }

  .arch-diagram {
    flex-direction: column;
    align-items: stretch;
  }

  .arch-arrow {
    transform: rotate(90deg);
    text-align: center;
  }

  .arch-inputs-col,
  .arch-encoders-col {
    flex-direction: row;
    flex-wrap: wrap;
  }
}