@vninvestcharts/widget 0.0.0-stage → 0.2.0

package/dist/combined.css

@@ -0,0 +1,3068 @@
+.advisory_panel_panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 260px;
+  height: 100%;
+  z-index: 50;
+  background: var(--vnsc-bg-primary);
+  border-left: 1px solid var(--vnsc-border-primary);
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  color: var(--vnsc-text-primary);
+  overflow: hidden;
+}
+.advisory_panel_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid var(--vnsc-border-primary);
+  background: var(--vnsc-bg-secondary);
+}
+.advisory_panel_title {
+  font-weight: 700;
+  font-size: 13px;
+}
+.advisory_panel_headerActions {
+  display: flex;
+  gap: 6px;
+}
+.advisory_panel_refreshBtn {
+  background: none;
+  border: 1px solid var(--vnsc-border-secondary);
+  color: var(--vnsc-text-secondary);
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 2px 6px;
+  font-size: 11px;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+.advisory_panel_refreshBtn:hover:not(:disabled) {
+  background: var(--vnsc-bg-hover);
+  color: var(--vnsc-text-primary);
+  border-color: var(--vnsc-text-disabled);
+}
+.advisory_panel_refreshBtn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.advisory_panel_closeBtn {
+  background: none;
+  border: none;
+  color: var(--vnsc-text-tertiary);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 4px;
+  transition: color 0.15s ease;
+}
+.advisory_panel_closeBtn:hover {
+  color: var(--vnsc-text-primary);
+}
+.advisory_panel_body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+.advisory_panel_skeletonRow {
+  height: 40px;
+  background: var(--vnsc-bg-tertiary);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  animation: advisory_panel_pulse 1.2s ease-in-out infinite;
+}
+@keyframes advisory_panel_pulse {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+.advisory_panel_decisionBadge {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.advisory_panel_decisionLabel {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-weight: 700;
+  font-size: 14px;
+  text-align: center;
+  letter-spacing: 0.5px;
+}
+.advisory_panel_decisionStrongBuy {
+  background: var(--vnsc-color-success-hover);
+  color: var(--vnsc-text-on-primary);
+}
+.advisory_panel_decisionBuy {
+  background: var(--vnsc-color-success);
+  color: var(--vnsc-text-on-primary);
+}
+.advisory_panel_decisionHold {
+  background: var(--vnsc-color-neutral);
+  color: var(--vnsc-text-on-primary);
+}
+.advisory_panel_decisionSell {
+  background: var(--vnsc-color-warning);
+  color: var(--vnsc-text-on-primary);
+}
+.advisory_panel_decisionStrongSell {
+  background: var(--vnsc-color-error);
+  color: var(--vnsc-text-on-primary);
+}
+.advisory_panel_confidence {
+  text-align: center;
+}
+.advisory_panel_confidenceLabel {
+  color: var(--vnsc-text-tertiary);
+  font-size: 10px;
+}
+.advisory_panel_confidenceValue {
+  font-weight: 700;
+  font-size: 13px;
+}
+.advisory_panel_agentRows {
+  margin-bottom: 8px;
+}
+.advisory_panel_agentRow {
+  border-bottom: 1px solid var(--vnsc-border-primary);
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+}
+.advisory_panel_agentHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+.advisory_panel_agentName {
+  flex: 1;
+  font-size: 12px;
+  color: var(--vnsc-text-primary);
+  font-weight: 500;
+}
+.advisory_panel_agentWeight {
+  color: var(--vnsc-text-tertiary);
+  font-size: 11px;
+  margin-left: 4px;
+}
+.advisory_panel_agentSignal {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--vnsc-color-neutral);
+  color: var(--vnsc-text-on-primary);
+  letter-spacing: 0.5px;
+}
+.advisory_panel_agentSignalBuy {
+  background: var(--vnsc-color-success);
+}
+.advisory_panel_agentSignalSell {
+  background: var(--vnsc-color-error);
+}
+.advisory_panel_agentSignalHold {
+  background: var(--vnsc-color-neutral);
+}
+.advisory_panel_agentExpand {
+  color: var(--vnsc-text-tertiary);
+  font-size: 10px;
+}
+.advisory_panel_agentScoreBar {
+  height: 4px;
+  background: var(--vnsc-border-primary);
+  border-radius: 2px;
+  margin-top: 6px;
+  overflow: hidden;
+}
+.advisory_panel_agentScoreFill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+.advisory_panel_agentExplanation {
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--vnsc-text-secondary);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.advisory_panel_explanationToggle {
+  background: none;
+  border: none;
+  color: var(--vnsc-text-link);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 0;
+  text-decoration: underline;
+  transition: color 0.15s ease;
+}
+.advisory_panel_explanationToggle:hover {
+  color: var(--vnsc-text-link-hover);
+}
+.advisory_panel_explanationContent {
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--vnsc-text-secondary);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.advisory_panel_timestamp {
+  margin-top: 10px;
+  font-size: 10px;
+  color: var(--vnsc-text-tertiary);
+  text-align: right;
+}
+.advisory_panel_emptyState {
+  text-align: center;
+  color: var(--vnsc-text-placeholder);
+  padding-top: 24px;
+  font-size: 12px;
+}
+.advisory_panel_emptyIcon {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+@media (max-width: 480px) {
+  .advisory_panel_panel {
+    width: 100%;
+    height: auto;
+    max-height: 50%;
+    bottom: 0;
+    top: auto;
+    border-left: none;
+    border-top: 1px solid var(--vnsc-border-primary);
+  }
+}
+
+.drawing_dock_dock {
+  position: absolute;
+  z-index: 50;
+  width: 360px;
+  min-height: 200px;
+  max-height: 500px;
+  background: var(--vnsc-bg-secondary, #111820);
+  border: 1px solid var(--vnsc-border, #2a2a2a);
+  border-radius: var(--vnsc-radius-lg, 6px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--gc-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  font-size: var(--vnsc-font-sm, 11px);
+  color: var(--vnsc-text-primary, #e0e0e0);
+}
+.drawing_dock_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--vnsc-border, #2a2a2a);
+  background: var(--vnsc-bg-primary, #0a0e14);
+  border-radius: var(--vnsc-radius-lg, 6px) var(--vnsc-radius-lg, 6px) 0 0;
+}
+.drawing_dock_titleBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.drawing_dock_titleBlock strong {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vnsc-text-primary);
+}
+.drawing_dock_titleBlock span {
+  font-size: 10px;
+  color: var(--vnsc-text-secondary);
+}
+.drawing_dock_headerActions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.drawing_dock_icon {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vnsc-text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.drawing_dock_icon:hover {
+  background-color: var(--vnsc-bg-tertiary, #f1f5f9);
+  color: var(--vnsc-text-primary);
+}
+.drawing_dock_tabs {
+  display: flex;
+  border-bottom: 1px solid var(--vnsc-border, #2a2a2a);
+  background: var(--vnsc-bg-primary, #0a0e14);
+}
+.drawing_dock_tab {
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: var(--vnsc-text-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.drawing_dock_tab:hover {
+  color: var(--vnsc-text-primary);
+  background-color: var(--vnsc-bg-tertiary, #f1f5f9);
+}
+.drawing_dock_tabActive {
+  color: var(--vnsc-accent, #2962ff);
+  border-bottom-color: var(--vnsc-accent, #2962ff);
+}
+.drawing_dock_body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+.drawing_dock_empty {
+  color: var(--vnsc-text-secondary);
+  font-style: italic;
+  text-align: center;
+  padding: 20px;
+}
+.drawing_dock_resizeHandle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 18px;
+  height: 18px;
+  cursor: nwse-resize;
+  background:
+    linear-gradient(
+      135deg,
+      transparent 0%,
+      transparent 40%,
+      var(--vnsc-text-secondary, #888) 40%,
+      var(--vnsc-text-secondary, #888) 44%,
+      transparent 44%,
+      transparent 56%,
+      var(--vnsc-text-secondary, #888) 56%,
+      var(--vnsc-text-secondary, #888) 60%,
+      transparent 60%);
+  opacity: 0.4;
+  transition: opacity 0.15s ease;
+  border-radius: 0 0 var(--vnsc-radius-lg, 6px) 0;
+  z-index: 1;
+}
+.drawing_dock_resizeHandle:hover {
+  opacity: 0.8;
+}
+@media (max-width: 480px) {
+  .drawing_dock_dock {
+    width: calc(100vw - 32px);
+    max-width: 360px;
+  }
+}
+.drawing_dock_templateManager {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.drawing_dock_templateGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.drawing_dock_templateLabel {
+  font-size: 11px;
+  font-weight: bold;
+  color: var(--vnsc-text-secondary, #888);
+}
+.drawing_dock_templateRow {
+  display: flex;
+  gap: 6px;
+}
+.drawing_dock_templateSelect,
+.drawing_dock_templateInput {
+  flex: 0 1 200px;
+  min-width: 120px;
+  background: var(--vnsc-surface-raised, rgba(30, 41, 59, 0.9));
+  border: 1px solid var(--vnsc-border, rgba(255, 255, 255, 0.1));
+  border-radius: 4px;
+  padding: 6px 8px;
+  color: var(--vnsc-text-primary, #fff);
+  font-size: 12px;
+}
+.drawing_dock_templateButton {
+  background: var(--vnsc-accent, #0891b2);
+  border: none;
+  border-radius: 4px;
+  padding: 6px 12px;
+  color: var(--vnsc-text-primary, #fff);
+  font-size: 12px;
+  cursor: pointer;
+}
+.drawing_dock_templateButtonDanger {
+  background: var(--vnsc-danger, #ef5350);
+}
+.drawing_dock_templateButton:disabled,
+.drawing_dock_templateButtonDanger:disabled {
+  background: var(--vnsc-surface-muted, rgba(255, 255, 255, 0.05));
+  color: var(--vnsc-text-disabled, #666);
+  cursor: default;
+}
+.drawing_dock_templateDivider {
+  height: 1px;
+  background: var(--vnsc-border-subtle, rgba(255, 255, 255, 0.08));
+  margin: 4px 0;
+}
+
+.floating_chart_bar_bar {
+  position: absolute;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 50;
+  max-width: 320px;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition:
+    max-width 0.2s ease,
+    height 0.2s ease,
+    opacity 0.2s ease,
+    border-radius 0.2s ease,
+    padding 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  background: var(--vnsc-bg-secondary, #111820);
+  border: 1px solid var(--vnsc-border, #2a2a2a);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  font-family:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
+  user-select: none;
+  white-space: nowrap;
+}
+.floating_chart_bar_btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vnsc-text-secondary, #a0a0a0);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.floating_chart_bar_btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--vnsc-text-primary, #e0e0e0);
+}
+.floating_chart_bar_btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.floating_chart_bar_btnActive {
+  color: var(--vnsc-primary, #2962ff);
+}
+.floating_chart_bar_separator {
+  width: 1px;
+  height: 18px;
+  background: var(--vnsc-border, #2a2a2a);
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+.floating_chart_bar_grip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 24px;
+  color: var(--vnsc-text-secondary, #a0a0a0);
+  flex-shrink: 0;
+}
+@media (hover: hover) {
+  .floating_chart_bar_bar:not(:hover):not(:focus-within) {
+    max-width: 40px;
+    height: 18px;
+    padding: 1px 8px;
+    border-radius: 13px;
+    opacity: 0.85;
+  }
+  .floating_chart_bar_bar:not(:hover):not(:focus-within) > :not(.floating_chart_bar_grip) {
+    opacity: 0;
+  }
+  .floating_chart_bar_bar:not(:hover):not(:focus-within) > .floating_chart_bar_grip {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    height: 14px;
+  }
+  .floating_chart_bar_bar:not(:hover):not(:focus-within) > .floating_chart_bar_grip svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.fork_overlays_forkXAxisOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 32;
+  pointer-events: none;
+}
+.fork_overlays_forkXAxisTick {
+  position: absolute;
+  transform: translateX(-50%);
+  z-index: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.fork_overlays_forkXAxisTickLeftEdge {
+  transform: translateX(0);
+}
+.fork_overlays_forkXAxisTickRightEdge {
+  transform: translateX(-100%);
+}
+.fork_overlays_forkXAxisTickLine {
+  width: 1px;
+  height: 6px;
+  margin: 0 auto 2px;
+}
+.fork_overlays_forkXAxisTickLabel {
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 14px;
+  white-space: nowrap;
+  padding: 0;
+  background: none;
+  border: none;
+}
+.fork_overlays_forkXAxisHoverLabel {
+  position: absolute;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+.fork_overlays_forkXAxisHoverLine {
+  width: 1px;
+  height: 8px;
+  margin: 0 auto 2px;
+}
+.fork_overlays_forkXAxisHoverLabelText {
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 14px;
+  white-space: nowrap;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background: var(--vnsc-bg-secondary);
+  border: none;
+  color: var(--vnsc-text-primary);
+}
+.fork_overlays_forkPaneTooltip {
+  position: absolute;
+  left: 8px;
+  z-index: 18;
+  pointer-events: none;
+  font-family: var(--gc-mono, monospace);
+  font-size: 11px;
+  line-height: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 8px;
+}
+.fork_overlays_forkPaneTooltipDark {
+  background: none;
+  border: none;
+}
+.fork_overlays_forkPaneTooltipLight {
+  background: none;
+  border: none;
+}
+.fork_overlays_forkPaneTooltipLabel {
+  color: var(--vnsc-text-secondary, #64748b);
+}
+.fork_overlays_forkPaneTooltipValue {
+  color: var(--vnsc-text-primary, #1e2a3b);
+}
+.fork_overlays_forkPaneTooltipDark .fork_overlays_forkPaneTooltipLabel {
+  color: var(--vnsc-text-primary);
+}
+.fork_overlays_forkPaneTooltipDark .fork_overlays_forkPaneTooltipValue {
+  color: var(--vnsc-text-on-primary);
+}
+.fork_overlays_forkYAxisLabel {
+  position: absolute;
+  z-index: 22;
+  pointer-events: none;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    monospace;
+  font-size: 9px;
+  font-weight: 500;
+  line-height: 12px;
+  white-space: nowrap;
+  padding: 1px 3px;
+  border-radius: 3px;
+  transform: translateY(-50%);
+}
+.fork_overlays_forkPaneSeparator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--vnsc-border, rgba(255, 255, 255, 0.08));
+  z-index: 15;
+  pointer-events: none;
+}
+.fork_overlays_forkYAxisLabelIndicator {
+  background: var(--vnsc-bg-secondary, rgba(17, 24, 32, 0.85));
+}
+.fork_overlays_forkRubberBand {
+  position: absolute;
+  border: 1px dashed var(--vnsc-accent, rgba(56, 189, 248, 0.9));
+  background: color-mix(in srgb, var(--vnsc-accent, rgba(56, 189, 248, 1)) 12%, transparent);
+  pointer-events: none;
+  z-index: 21;
+}
+.fork_overlays_forkLoadingOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vnsc-bg-overlay, rgba(10, 14, 20, 0.85));
+}
+.fork_overlays_forkBottomPanel {
+  height: var(--vnsc-bottom-panel-height, 260px);
+  max-height: 60dvh;
+  border-top: 1px solid var(--vnsc-border, #2a2a2a);
+  background: var(--vnsc-bg-secondary, #111820);
+  position: relative;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+@media (max-width: 480px) {
+  .fork_overlays_forkXAxisTickLabel,
+  .fork_overlays_forkXAxisHoverLabelText {
+    font-size: 9px;
+    padding: 0 2px;
+  }
+  .fork_overlays_forkPaneTooltip {
+    font-size: 10px;
+    left: 4px;
+    padding: 3px 6px;
+  }
+}
+
+.multicharts_layout_multichartsLayout {
+  display: grid;
+  grid-template-rows: 40px 1fr 32px;
+  grid-template-columns: 1fr;
+  grid-template-areas: "header" "charts" "footer";
+  height: 100%;
+  height: 100dvh;
+  width: 100%;
+  overflow: hidden;
+  background: var(--vnsc-bg-primary, #131722);
+  color: var(--vnsc-text-primary, #d1d4dc);
+  font-family: var(--vnsc-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+}
+.multicharts_layout_header {
+  grid-area: header;
+  z-index: 100;
+  flex-shrink: 0;
+}
+.multicharts_layout_headerWorkspaceMode {
+  cursor: pointer;
+}
+.multicharts_layout_toolbar {
+  position: absolute;
+  left: 0;
+  top: 40px;
+  bottom: 32px;
+  width: 0px;
+  z-index: 500;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  pointer-events: none;
+}
+.multicharts_layout_toolbarLocked .multicharts_layout_toolbar {
+  width: 44px;
+  pointer-events: auto;
+}
+.multicharts_layout_toolbarLocked .multicharts_layout_charts {
+  margin-left: 44px;
+}
+.multicharts_layout_toolbarLocked [data-vnsc-bottom-panel=host] {
+  margin-left: 44px;
+}
+.multicharts_layout_charts {
+  grid-area: charts;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+.multicharts_layout_workspaceDock {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 10px;
+  z-index: 20;
+  pointer-events: auto;
+}
+.multicharts_layout_workspaceDock::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 3px;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--vnsc-text-secondary);
+  box-shadow: 0 -6px 0 var(--vnsc-text-secondary), 0 6px 0 var(--vnsc-text-secondary);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.multicharts_layout_workspaceDockFlyout {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  transform: translateX(100%);
+  visibility: hidden;
+  transition: transform 0.2s ease, visibility 0s linear 0.2s;
+}
+.multicharts_layout_workspaceDock:hover .multicharts_layout_workspaceDockFlyout,
+.multicharts_layout_workspaceDock:focus-within .multicharts_layout_workspaceDockFlyout,
+.multicharts_layout_workspaceDockOpen .multicharts_layout_workspaceDockFlyout {
+  transform: translateX(0);
+  visibility: visible;
+  transition: transform 0.2s ease, visibility 0s;
+}
+.multicharts_layout_workspaceDock * {
+  pointer-events: auto;
+}
+.multicharts_layout_workspaceBody {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  position: relative;
+  z-index: 10;
+}
+.multicharts_layout_workspaceMainCol {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+.multicharts_layout_workspaceBody .multicharts_layout_charts {
+  flex: 1;
+  min-height: 0;
+}
+.multicharts_layout_workspaceDockPinned {
+  position: static;
+  width: auto;
+  flex-shrink: 0;
+  display: flex;
+}
+.multicharts_layout_workspaceDockPinned::before {
+  display: none;
+}
+.multicharts_layout_workspaceDockPinned .multicharts_layout_workspaceDockFlyout {
+  display: contents;
+  visibility: visible;
+}
+@media (max-width: 767px) {
+  .multicharts_layout_workspaceDock {
+    left: 0;
+    right: 0;
+    top: auto;
+    bottom: 0;
+    width: auto;
+  }
+  .multicharts_layout_workspaceDock::before {
+    display: none;
+  }
+  .multicharts_layout_workspaceDockFlyout {
+    position: static;
+    transform: none;
+    visibility: visible;
+  }
+}
+.multicharts_layout_footer {
+  grid-area: footer;
+  z-index: 100;
+  flex-shrink: 0;
+  transition:
+    height 0.2s ease,
+    opacity 0.2s ease,
+    padding 0.2s ease;
+}
+.multicharts_layout_footer.multicharts_layout_hidden {
+  height: 0;
+  padding: 0 16px;
+  opacity: 0;
+  pointer-events: none;
+  border-top: none;
+}
+@media (min-width: 769px) {
+  .multicharts_layout_toolbar {
+    display: flex;
+  }
+}
+@media (max-width: 768px) {
+  .multicharts_layout_multichartsLayout {
+    grid-template-columns: 1fr;
+    grid-template-rows: 40px 1fr 0px;
+    grid-template-areas: "header" "charts" "footer";
+  }
+  .multicharts_layout_toolbar {
+    display: none;
+  }
+  .multicharts_layout_toolbar.multicharts_layout_mobileVisible {
+    display: flex;
+    position: fixed;
+    top: 40px;
+    left: 0;
+    bottom: 32px;
+    width: 280px;
+    max-width: 85vw;
+    height: auto;
+    max-height: calc(100vh - 72px);
+    z-index: 1000;
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
+    border-right: 1px solid var(--vnsc-border, #2a2e39);
+    min-width: 280px;
+    max-width: 280px;
+    width: 280px;
+  }
+  .multicharts_layout_footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 0px;
+    min-height: 0px;
+    padding: 0;
+    border-top: none;
+    overflow: visible;
+    pointer-events: none;
+    background: transparent;
+    z-index: 100;
+  }
+}
+.multicharts_layout_toolbar .unifiedDrawingToolbar {
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.multicharts_layout_toolbar.multicharts_layout_expanded .unifiedDrawingToolbar {
+  overflow-y: auto;
+}
+.multicharts_layout_toolbar.multicharts_layout_collapsed .toolbarContent {
+  display: none;
+}
+.multicharts_layout_toolbar.multicharts_layout_collapsed .toolbarHeader {
+  padding: 8px;
+  justify-content: center;
+}
+.multicharts_layout_toolbar.multicharts_layout_collapsed .toolbarHeader .toolbarTitle,
+.multicharts_layout_toolbar.multicharts_layout_collapsed .toolbarHeader .lockToggle,
+.multicharts_layout_toolbar.multicharts_layout_collapsed .toolbarHeader .collapseToggle {
+  display: none;
+}
+.multicharts_layout_toolbar.multicharts_layout_collapsed .toolbarHeader .expandToggle {
+  display: flex;
+}
+.multicharts_layout_chartsContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+.multicharts_layout_gridContainer {
+  flex: 1;
+  display: grid;
+  gap: 8px;
+  padding: 8px;
+  min-height: 0;
+  overflow: auto;
+}
+.multicharts_layout_gridContainer[data-layout="1x1"] {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+.multicharts_layout_gridContainer[data-layout="1x2"] {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+}
+.multicharts_layout_gridContainer[data-layout="2x1"] {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+.multicharts_layout_gridContainer[data-layout="2x2"] {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+.multicharts_layout_gridContainer[data-layout="1x4"] {
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: 1fr;
+}
+.multicharts_layout_gridContainer[data-layout="4x1"] {
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(4, 1fr);
+}
+.multicharts_layout_gridContainer[data-layout="2x4"] {
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: 1fr 1fr;
+}
+.multicharts_layout_gridContainer[data-layout="3x3"] {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+.multicharts_layout_chartSlot {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--vnsc-border, #2a2e39);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--vnsc-bg-primary, #131722);
+  position: relative;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.multicharts_layout_chartSlot:hover {
+  border-color: var(--vnsc-border-hover, #3a3e49);
+}
+.multicharts_layout_chartSlot.multicharts_layout_active {
+  border: 1px solid var(--vnsc-primary, #2962ff);
+}
+.multicharts_layout_chartSlot.multicharts_layout_empty {
+  border: 2px dashed var(--vnsc-border, #2a2e39);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vnsc-bg-secondary, #1e222d);
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+.multicharts_layout_chartSlot.multicharts_layout_empty:hover {
+  background: var(--vnsc-bg-tertiary, #262b36);
+  border-color: var(--vnsc-primary, #2962ff);
+}
+.multicharts_layout_chartSlot.multicharts_layout_empty:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--vnsc-primary, #2962ff);
+}
+.multicharts_layout_chartSlot.multicharts_layout_empty span {
+  color: var(--vnsc-text-muted, #787b86);
+  font-size: 14px;
+  pointer-events: none;
+}
+.multicharts_layout_slotHeader {
+  position: absolute;
+  top: 4px;
+  left: 8px;
+  right: 8px;
+  display: flex;
+  justify-content: space-between;
+  z-index: 10;
+  pointer-events: none;
+}
+.multicharts_layout_slotHeader > * {
+  pointer-events: auto;
+}
+.multicharts_layout_symbolBadge {
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.multicharts_layout_groupBadge {
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.multicharts_layout_groupBadgeA {
+  background-color: #e74c3c;
+}
+.multicharts_layout_groupBadgeB {
+  background-color: #3498db;
+}
+.multicharts_layout_groupBadgeC {
+  background-color: #2ecc71;
+}
+.multicharts_layout_groupBadgeD {
+  background-color: #f39c12;
+}
+.multicharts_layout_charts .ohlcTooltip {
+  pointer-events: none;
+  z-index: 200;
+}
+.multicharts_layout_header .menu,
+.multicharts_layout_toolbar .menu {
+  z-index: 1000;
+}
+@media (prefers-contrast: high) {
+  .multicharts_layout_multichartsLayout {
+    border: 2px solid currentColor;
+  }
+  .multicharts_layout_toolbar {
+    border-right-width: 2px;
+  }
+  .multicharts_layout_chartSlot {
+    border-width: 2px;
+  }
+  .multicharts_layout_chartSlot.multicharts_layout_active {
+    border-width: 3px;
+  }
+  .multicharts_layout_footer {
+    border-top-width: 2px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .multicharts_layout_multichartsLayout,
+  .multicharts_layout_toolbar,
+  .multicharts_layout_footer,
+  .multicharts_layout_chartSlot,
+  .multicharts_layout_slotHeader,
+  .multicharts_layout_toolbar .unifiedDrawingToolbar {
+    transition: none;
+  }
+}
+@media print {
+  .multicharts_layout_toolbar,
+  .multicharts_layout_footer,
+  .multicharts_layout_slotHeader,
+  .multicharts_layout_header .menu {
+    display: none !important;
+  }
+  .multicharts_layout_multichartsLayout {
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+    grid-template-areas: "header" "charts" "footer";
+  }
+  .multicharts_layout_chartSlot {
+    break-inside: avoid;
+    border: 1px solid #000 !important;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .vnsc-root {
+    --vnsc-bg-primary: #131722;
+    --vnsc-bg-secondary: #1e222d;
+    --vnsc-bg-tertiary: #262b36;
+    --vnsc-bg-hover: #232838;
+    --vnsc-bg-input: #0d1117;
+    --vnsc-border: #2a2e39;
+    --vnsc-border-hover: #3a3e49;
+    --vnsc-text-primary: #d1d4dc;
+    --vnsc-text-secondary: #787b86;
+    --vnsc-text-muted: #787b86;
+    --vnsc-primary: #2962ff;
+    --vnsc-primary-hover: #1a52e0;
+    --vnsc-success: #0ecb81;
+    --vnsc-danger-bg: #2a1a1a;
+    --vnsc-danger-border: #442222;
+    --vnsc-danger-text: #f87171;
+    --vnsc-danger-hover: #3a2a2a;
+    --vnsc-accent: #2962ff;
+    --vnsc-accent-hover: #1a52e0;
+    --vnsc-accent-subtle: rgba(41, 98, 255, 0.15);
+    --vnsc-font-family:
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      sans-serif;
+    --vnsc-font-mono:
+      ui-monospace,
+      SFMono-Regular,
+      monospace;
+  }
+}
+@media (max-width: 768px) {
+  .multicharts_layout_multichartsLayout [role=menuitem],
+  .multicharts_layout_multichartsLayout [role=option] {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+  }
+  .multicharts_layout_multichartsLayout footer button {
+    min-height: 44px;
+    padding: 0 16px;
+  }
+  .multicharts_layout_multichartsLayout .multicharts_layout_vnsc-symbol-search-dropdown-container li {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.ohlc_header_ohlcHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  background: var(--vnsc-bg-secondary, #111820);
+  border-bottom: 1px solid var(--vnsc-border, #2a2a2a);
+  font-family: var(--vnsc-font-family-base);
+  font-size: 12px;
+  color: var(--vnsc-text-primary, #e0e0e0);
+  z-index: 30;
+  min-height: 32px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.ohlc_header_ohlcHeader::-webkit-scrollbar {
+  display: none;
+}
+.ohlc_header_leftGroup {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ohlc_header_symbol {
+  font-size: 14px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.ohlc_header_timeframe {
+  background: var(--vnsc-accent-strong, #2563eb);
+  color: #fff;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.ohlc_header_timeframeGroup {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+}
+.ohlc_header_timeframeBtn {
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--vnsc-text-secondary, #787b86);
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.ohlc_header_timeframeBtn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--vnsc-text-primary, #e0e0e0);
+}
+.ohlc_header_timeframeBtnActive {
+  background: var(--vnsc-accent-strong, #2563eb);
+  color: #fff;
+  font-weight: 600;
+}
+.ohlc_header_selectorGroup {
+  position: relative;
+}
+.ohlc_header_selectorBtn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  border: 1px solid var(--vnsc-border, #2a2a2a);
+  border-radius: 4px;
+  color: var(--vnsc-text-secondary, #787b86);
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+.ohlc_header_selectorBtn:hover,
+.ohlc_header_selectorBtnOpen {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--vnsc-text-primary, #e0e0e0);
+  border-color: var(--vnsc-accent, #2962ff);
+}
+.ohlc_header_selectorArrow {
+  font-size: 8px;
+  margin-left: 2px;
+}
+.ohlc_header_dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background: var(--vnsc-bg-primary, #1e293b);
+  border: 1px solid var(--vnsc-border, #2a2a2a);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  list-style: none;
+  padding: 4px;
+  z-index: 100;
+  min-width: 120px;
+}
+.ohlc_header_dropdownFloating {
+  position: fixed;
+  top: auto;
+  left: auto;
+  margin-top: 0;
+  z-index: 9999;
+}
+.ohlc_header_dropdownItem {
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--vnsc-text-secondary, #787b86);
+  transition: background 0.15s ease;
+}
+.ohlc_header_dropdownItem:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--vnsc-text-primary, #e0e0e0);
+}
+.ohlc_header_dropdownItemSelected {
+  background: rgba(41, 98, 255, 0.15);
+  color: var(--vnsc-primary, #2962ff);
+  font-weight: 600;
+}
+.ohlc_header_dropdownItemDisabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.ohlc_header_dropdownItemDisabled:hover {
+  background: transparent;
+  color: var(--vnsc-text-secondary, #787b86);
+}
+.ohlc_header_comingSoonBadge {
+  margin-left: 8px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--vnsc-primary, #2962ff);
+  background: rgba(41, 98, 255, 0.15);
+  white-space: nowrap;
+}
+.ohlc_header_replayControl {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.ohlc_header_replayToggleBtn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  border: 1px solid var(--vnsc-border, #2a2a2a);
+  border-radius: 4px;
+  color: var(--vnsc-text-secondary, #787b86);
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  line-height: 1;
+}
+.ohlc_header_replayToggleBtn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--vnsc-text-primary, #e0e0e0);
+  border-color: var(--vnsc-accent, #2962ff);
+}
+.ohlc_header_replayToggleBtnActive {
+  background: rgba(41, 98, 255, 0.2);
+  color: var(--vnsc-primary, #2962ff);
+  font-weight: 600;
+  border-color: var(--vnsc-primary, #2962ff);
+}
+.ohlc_header_replayBar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 4px;
+}
+.ohlc_header_replayBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vnsc-text-secondary, #787b86);
+  cursor: pointer;
+  font-size: 10px;
+  transition: all 0.15s ease;
+}
+.ohlc_header_replayBtn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--vnsc-text-primary, #e0e0e0);
+}
+.ohlc_header_replayBtnActive {
+  color: var(--vnsc-primary, #2962ff);
+}
+.ohlc_header_replaySlider {
+  width: 80px;
+  height: 4px;
+  accent-color: var(--vnsc-accent, #2962ff);
+  cursor: pointer;
+}
+.ohlc_header_replayProgress {
+  font-size: 10px;
+  color: var(--vnsc-text-secondary, #787b86);
+  white-space: nowrap;
+  min-width: 50px;
+}
+.ohlc_header_replayPnl {
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  margin: 0 4px;
+}
+.ohlc_header_replayPnl[data-pnl-positive=true] {
+  color: #22bb5c;
+}
+.ohlc_header_replayPnl[data-pnl-positive=false] {
+  color: #d7324b;
+}
+.ohlc_header_replayAnalytics {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 10px;
+  white-space: nowrap;
+  margin: 0 4px;
+}
+.ohlc_header_replayAnalyticsItem {
+  padding: 0 4px;
+  color: var(--vnsc-text-secondary, #787b86);
+  border-right: 1px solid var(--vnsc-border, rgba(148,163,184,0.2));
+}
+.ohlc_header_replayAnalyticsItem:last-child {
+  border-right: none;
+}
+.ohlc_header_replayAnalyticsItem[data-positive=true] {
+  color: #22bb5c;
+}
+.ohlc_header_replayAnalyticsItem[data-positive=false] {
+  color: #d7324b;
+}
+.ohlc_header_replaySpeed {
+  background: transparent;
+  border: 1px solid var(--vnsc-border, #2a2a2a);
+  border-radius: 4px;
+  color: var(--vnsc-text-secondary, #787b86);
+  font-size: 10px;
+  padding: 1px 4px;
+  cursor: pointer;
+}
+.ohlc_header_menu {
+  display: flex;
+  gap: 2px;
+  margin-left: auto;
+}
+.ohlc_header_menuBtn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vnsc-text-secondary, #787b86);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.ohlc_header_menuBtn:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: var(--vnsc-text-primary);
+}
+.ohlc_header_menuBtnActive {
+  background-color: var(--vnsc-accent, #2962ff);
+  color: #fff;
+}
+.ohlc_header_menuBtnActive:hover {
+  background-color: #1a52d6;
+  color: #fff;
+}
+.ohlc_header_upgradeBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid rgba(41, 98, 255, 0.45);
+  border-radius: 4px;
+  background: rgba(41, 98, 255, 0.14);
+  color: #dbe4ff;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  box-shadow: none;
+}
+.ohlc_header_upgradeBtn:hover {
+  background: rgba(41, 98, 255, 0.24);
+  box-shadow: none;
+}
+.ohlc_header_logoBadge {
+  background:
+    linear-gradient(
+      135deg,
+      #3b82f6,
+      #1d4ed8);
+  color: #ffffff;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-weight: bold;
+  font-size: 11px;
+  letter-spacing: 0.5px;
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+}
+.ohlc_header_logoBadgeMobile {
+  background:
+    linear-gradient(
+      135deg,
+      var(--vnsc-accent, #22d3ee),
+      #0891b2);
+  color: #0a0e17;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 800;
+  font-size: 11px;
+  letter-spacing: 0.5px;
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+}
+.ohlc_header_rightGroupMobile {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ohlc_header_dropdownContainerMobile {
+  position: relative;
+}
+.ohlc_header_mobileChartSystemMenu {
+  position: absolute;
+  top: 32px;
+  right: 0;
+  min-width: 220px;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+  padding: 8px;
+  background-color: var(--vnsc-bg-secondary, #0f172a);
+  border: 1px solid var(--vnsc-border, rgba(148, 163, 184, 0.18));
+  border-radius: 8px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  z-index: 250;
+  scrollbar-width: thin;
+}
+.ohlc_header_menuActionBtn {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--vnsc-text-secondary, #94a3b8);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  transition: all 0.12s ease;
+}
+.ohlc_header_menuActionBtn:hover,
+.ohlc_header_menuActionBtn.ohlc_header_active {
+  background-color: var(--vnsc-bg-hover, rgba(255, 255, 255, 0.05));
+  color: var(--vnsc-text-primary, #e2e8f0);
+}
+.ohlc_header_replayBarMobile {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--vnsc-bg-secondary, #111820);
+  border: 1px solid var(--vnsc-border, #2a2a2a);
+  border-radius: 6px;
+  padding: 6px 10px;
+  position: absolute;
+  top: 36px;
+  left: 6px;
+  right: 6px;
+  z-index: 220;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
+}
+.ohlc_header_ohlcCluster {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 8px;
+  font-size: 11px;
+  font-family: var(--vnsc-font-mono, monospace);
+  white-space: nowrap;
+}
+.ohlc_header_ohlcItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.ohlc_header_ohlcLabel {
+  color: inherit;
+  opacity: 0.75;
+  font-weight: 600;
+}
+.ohlc_header_ohlcValue {
+  color: inherit;
+}
+.ohlc_header_ohlcChange {
+  font-weight: 600;
+  margin-left: 4px;
+}
+.ohlc_header_ohlcUp {
+  color: var(--vnsc-color-bullish, #26a69a);
+}
+.ohlc_header_ohlcDown {
+  color: var(--vnsc-color-bearish, #ef5350);
+}
+@media (max-width: 640px) {
+  .ohlc_header_ohlcHeader {
+    padding: 3px 6px;
+    gap: 4px;
+  }
+  .ohlc_header_symbol {
+    font-size: 12px;
+  }
+  .ohlc_header_replaySlider {
+    width: 60px;
+    flex: 1;
+  }
+  .ohlc_header_menuBtn {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.pine_editor_panel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  font-family: Inter, sans-serif;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--vnsc-text-primary, #e0e0e0);
+  background: var(--vnsc-bg-primary, #0c1017);
+}
+.pine_editor_toolbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  border-bottom: 1px solid var(--vnsc-border-divider, #202b3c);
+  padding: 8px 12px;
+  flex-shrink: 0;
+}
+.pine_editor_title {
+  font-weight: bold;
+  margin-right: 4px;
+}
+.pine_editor_body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.pine_editor_sidebar {
+  width: 220px;
+  border-right: 1px solid var(--vnsc-border-divider, #202b3c);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.pine_editor_sidebarHeader {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px;
+  font-weight: 600;
+  font-size: 11px;
+  color: var(--vnsc-text-secondary, #9aa3b8);
+  border-bottom: 1px solid var(--vnsc-border-divider, #202b3c);
+}
+.pine_editor_scriptList {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.pine_editor_scriptItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: background 0.15s;
+  gap: 4px;
+}
+.pine_editor_scriptItem:hover {
+  background: var(--vnsc-bg-hover, #1a2030);
+}
+.pine_editor_scriptItemActive {
+  background: var(--vnsc-bg-selected, #1a2744);
+  border-left-color: var(--vnsc-accent, #6366f1);
+}
+.pine_editor_scriptName {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+.pine_editor_renameInput {
+  flex: 1;
+  background: var(--vnsc-bg-input, #090d14);
+  border: 1px solid var(--vnsc-accent, #6366f1);
+  border-radius: 3px;
+  color: var(--vnsc-text-primary, #e0e0e0);
+  font-size: 12px;
+  padding: 2px 6px;
+  outline: none;
+}
+.pine_editor_scriptActions {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.pine_editor_compileBtn {
+  padding: 5px 12px;
+  background: var(--vnsc-color-success, #089981);
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+  margin-left: auto;
+  transition: background-color 0.2s ease;
+}
+.pine_editor_compileBtn:hover {
+  background: var(--vnsc-color-success-hover, #067a68);
+}
+.pine_editor_toolBtn {
+  padding: 4px 10px;
+  background: var(--vnsc-bg-input, #1e2a3a);
+  border: 1px solid var(--vnsc-border-input, #2a3a4e);
+  border-radius: 4px;
+  color: var(--vnsc-text-primary, #c0c8d8);
+  font-size: 11px;
+  cursor: pointer;
+  transition: background 0.15s;
+  white-space: nowrap;
+}
+.pine_editor_toolBtn:hover {
+  background: var(--vnsc-bg-input-hover, #2a3a4e);
+}
+.pine_editor_smallBtn {
+  padding: 2px 6px;
+  background: transparent;
+  border: 1px solid var(--vnsc-border-input, #2a3a4e);
+  border-radius: 3px;
+  color: var(--vnsc-text-secondary, #9aa3b8);
+  font-size: 10px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.pine_editor_smallBtn:hover {
+  background: var(--vnsc-bg-input-hover, #1e2a3a);
+  color: var(--vnsc-text-primary, #c0c8d8);
+}
+.pine_editor_smallBtnDanger {
+  padding: 2px 6px;
+  background: transparent;
+  border: 1px solid var(--vnsc-border-error, #4a1a1a);
+  border-radius: 3px;
+  color: var(--vnsc-color-bearish, #f23645);
+  font-size: 10px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.pine_editor_smallBtnDanger:hover {
+  background: var(--vnsc-bg-hover, #2a1010);
+}
+.pine_editor_editorContainer {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.pine_editor_errorBox {
+  padding: 8px 12px;
+  background: rgba(242, 54, 69, 0.1);
+  border-top: 1px solid #f23645;
+  color: #f23645;
+  flex-shrink: 0;
+}
+.pine_editor_successBox {
+  padding: 8px 12px;
+  background: rgba(8, 153, 129, 0.1);
+  border-top: 1px solid #089981;
+  color: #089981;
+  flex-shrink: 0;
+}
+@media (max-width: 768px) {
+  .pine_editor_sidebar {
+    width: 160px;
+  }
+  .pine_editor_scriptActions {
+    flex-direction: column;
+  }
+}
+@media (max-width: 480px) {
+  .pine_editor_toolbar {
+    flex-wrap: wrap;
+  }
+  .pine_editor_sidebar {
+    display: none;
+  }
+  .pine_editor_compileBtn {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
+.right_sidebar_dock_dock {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+  border-left: 1px solid var(--vnsc-border, #2a2a2a);
+  background: var(--vnsc-bg-secondary, #111820);
+  position: relative;
+  z-index: 48;
+  min-width: 150px;
+  overflow: hidden;
+  transition: width 0.18s ease;
+}
+.right_sidebar_dock_dockClosed {
+  min-width: 40px;
+}
+@media (max-width: 767px) {
+  .right_sidebar_dock_dock {
+    transition: none;
+  }
+  .right_sidebar_dock_dockClosed {
+    height: auto;
+    min-height: 0;
+    border-top: none;
+  }
+}
+.right_sidebar_dock_splitter {
+  width: 4px;
+  cursor: col-resize;
+  z-index: 49;
+  background: transparent;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+.right_sidebar_dock_splitterActive {
+  background: var(--vnsc-accent, #2962ff);
+}
+.right_sidebar_dock_stacked {
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+.right_sidebar_dock_body {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 0;
+}
+.right_sidebar_dock_panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.right_sidebar_dock_panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--vnsc-border-divider, #2a2a2a);
+  flex-shrink: 0;
+}
+.right_sidebar_dock_panelTitle {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vnsc-text-secondary, #787b86);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.right_sidebar_dock_panelActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.right_sidebar_dock_panelClose {
+  background: transparent;
+  border: none;
+  color: var(--vnsc-text-secondary, #787b86);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  border-radius: 4px;
+}
+.right_sidebar_dock_panelClose:hover {
+  background: var(--vnsc-bg-hover, rgba(255, 255, 255, 0.04));
+  color: var(--vnsc-text-primary, #d1d4dc);
+}
+.right_sidebar_dock_panelBody {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.right_sidebar_dock_strip {
+  width: 40px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 0;
+  border-left: 1px solid var(--vnsc-border-divider, #2a2a2a);
+  background: var(--vnsc-bg-primary, #131722);
+  overflow-y: auto;
+}
+.right_sidebar_dock_stripBtn {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--vnsc-text-secondary, #787b86);
+  cursor: pointer;
+}
+.right_sidebar_dock_stripBtn:hover {
+  background: var(--vnsc-bg-hover, rgba(255, 255, 255, 0.04));
+  color: var(--vnsc-text-primary, #d1d4dc);
+}
+.right_sidebar_dock_stripBtnDisabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.right_sidebar_dock_stripBtn:focus {
+  outline: none;
+}
+.right_sidebar_dock_stripBtn:focus-visible {
+  outline: 2px solid var(--vnsc-accent-strong, #2563eb);
+  outline-offset: -2px;
+}
+.right_sidebar_dock_stripBtnActive {
+  background: var(--vnsc-bg-selected, rgba(59, 130, 246, 0.15));
+  color: var(--vnsc-accent, #2962ff);
+}
+@media (max-width: 767px) {
+  .right_sidebar_dock_splitter {
+    display: none;
+  }
+  .right_sidebar_dock_dock {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: auto;
+    height: 45%;
+    min-height: 220px;
+    min-width: 0;
+    width: auto !important;
+    border-left: none;
+    border-top: 1px solid var(--vnsc-border, #2a2a2a);
+    z-index: 20;
+  }
+  .right_sidebar_dock_stripBtn {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .right_sidebar_dock_panelClose {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+.right_sidebar_dock_dw {
+  padding: 8px 10px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.right_sidebar_dock_dwHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.right_sidebar_dock_dwSymbol {
+  font-weight: 700;
+  font-size: 13px;
+  color: var(--vnsc-text-primary, #d1d4dc);
+}
+.right_sidebar_dock_dwTime {
+  font-size: 10px;
+  color: var(--vnsc-text-secondary, #787b86);
+}
+.right_sidebar_dock_dwRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 0;
+  border-bottom: 1px solid var(--vnsc-border-divider, #2a2a2a);
+}
+.right_sidebar_dock_dwRow:last-child {
+  border-bottom: none;
+}
+.right_sidebar_dock_dwLabel {
+  color: var(--vnsc-text-secondary, #787b86);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+}
+.right_sidebar_dock_dwValue {
+  font-weight: 600;
+  color: var(--vnsc-text-primary, #d1d4dc);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.right_sidebar_dock_dwUp {
+  color: var(--vnsc-color-bullish, rgb(38, 166, 154));
+}
+.right_sidebar_dock_dwDown {
+  color: var(--vnsc-color-bearish, rgb(239, 83, 80));
+}
+.right_sidebar_dock_dwSection {
+  margin-top: 8px;
+  padding-top: 6px;
+  border-top: 1px solid var(--vnsc-border-divider, #2a2a2a);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vnsc-text-secondary, #787b86);
+}
+.right_sidebar_dock_dwEmpty {
+  padding: 16px 12px;
+  font-size: 12px;
+  color: var(--vnsc-text-secondary, #787b86);
+  text-align: center;
+}
+
+.strategy_tester_panel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: 12px;
+  gap: 12px;
+  font-family: Inter, sans-serif;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--vnsc-text-primary, #e0e0e0);
+  background: var(--vnsc-bg-primary, #0c1017);
+}
+.strategy_tester_header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  border-bottom: 1px solid var(--vnsc-border-divider, #202b3c);
+  padding-bottom: 10px;
+}
+.strategy_tester_title {
+  font-weight: bold;
+}
+.strategy_tester_select {
+  padding: 4px 8px;
+  background: var(--vnsc-bg-input, #131b26);
+  border: 1px solid var(--vnsc-border-input, #202b3c);
+  border-radius: 4px;
+  color: var(--vnsc-text-primary, #fff);
+}
+.strategy_tester_runBtn {
+  padding: 5px 12px;
+  background: var(--vnsc-accent, #2962ff);
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+  margin-left: auto;
+  transition: background-color 0.2s ease;
+}
+.strategy_tester_runBtn:hover {
+  background: var(--vnsc-accent-hover, #1a52d6);
+}
+.strategy_tester_statsGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+.strategy_tester_statCard {
+  padding: 10px;
+  background: var(--vnsc-bg-secondary, #131b26);
+  border-radius: 4px;
+  border: 1px solid var(--vnsc-border-divider, #202b3c);
+}
+.strategy_tester_statLabel {
+  color: var(--vnsc-text-secondary, #888);
+  font-size: 11px;
+  margin-bottom: 4px;
+}
+.strategy_tester_statValue {
+  font-size: 16px;
+  font-weight: bold;
+}
+.strategy_tester_statValuePositive {
+  color: var(--vnsc-color-bullish, #089981);
+}
+.strategy_tester_statValueNegative {
+  color: var(--vnsc-color-bearish, #f23645);
+}
+.strategy_tester_tradeLog {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid var(--vnsc-border-divider, #202b3c);
+  border-radius: 4px;
+}
+.strategy_tester_tradeTable {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+.strategy_tester_tradeTable th {
+  padding: 8px;
+  border-bottom: 1px solid var(--vnsc-border-divider, #202b3c);
+  color: var(--vnsc-text-secondary, #888);
+  background: var(--vnsc-bg-secondary, #131b26);
+  position: sticky;
+  top: 0;
+}
+.strategy_tester_tradeTable td {
+  padding: 8px;
+  border-bottom: 1px solid var(--vnsc-border-divider, #1c2430);
+}
+.strategy_tester_tradeTypeLong {
+  text-transform: uppercase;
+  color: var(--vnsc-accent, #2962ff);
+  font-weight: bold;
+}
+.strategy_tester_tradeTypeShort {
+  text-transform: uppercase;
+  color: var(--vnsc-color-warning, #ff6d00);
+  font-weight: bold;
+}
+.strategy_tester_tradePnlPositive {
+  color: var(--vnsc-color-bullish, #089981);
+  font-weight: bold;
+}
+.strategy_tester_tradePnlNegative {
+  color: var(--vnsc-color-bearish, #f23645);
+  font-weight: bold;
+}
+.strategy_tester_tradeDate {
+  color: var(--vnsc-text-secondary, #888);
+}
+.strategy_tester_emptyState {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--vnsc-text-muted, #555);
+  font-style: italic;
+}
+@media (max-width: 480px) {
+  .strategy_tester_panel {
+    padding: 8px;
+    gap: 8px;
+  }
+  .strategy_tester_statsGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .strategy_tester_header {
+    flex-wrap: wrap;
+  }
+  .strategy_tester_runBtn {
+    margin-left: 0;
+    margin-top: 8px;
+    width: 100%;
+  }
+}
+
+.symbol_search_wrapper {
+  position: relative;
+  min-width: min(380px, 100%);
+  flex: 1 1 380px;
+}
+.symbol_search_input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1.5px solid var(--vnsc-border, #3a3e49);
+  background: var(--vnsc-surface, #1e222d);
+  color: var(--vnsc-text, #f8fafc);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.4;
+  padding: 8px 10px;
+  border-radius: 6px;
+  outline: none;
+  transition: border-color 100ms ease, box-shadow 100ms ease;
+}
+.symbol_search_input::placeholder {
+  color: var(--vnsc-text-secondary, #787b86);
+  opacity: 0.85;
+}
+.symbol_search_input:focus {
+  border-color: var(--vnsc-accent, #6366f1);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+.symbol_search_dropdown {
+  position: absolute;
+  z-index: 1000;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid var(--vnsc-accent, #6366f1);
+  border-radius: 10px;
+  background: var(--vnsc-bg-primary, #1e222d);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(99, 102, 241, 0.15);
+  max-height: min(60vh, 600px);
+  overflow: auto;
+}
+.symbol_search_dropdown ul {
+  margin: 0;
+  padding: 6px;
+  list-style: none;
+}
+.symbol_search_item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--vnsc-text-secondary);
+  font-size: 12px;
+  transition: background 100ms ease, color 100ms ease;
+}
+.symbol_search_item:hover,
+.symbol_search_itemHighlighted {
+  background: var(--vnsc-bg-tertiary);
+  color: var(--vnsc-text-primary);
+}
+.symbol_search_itemDisabled,
+.symbol_search_itemDisabled:hover {
+  opacity: 0.45;
+  cursor: not-allowed;
+  background: transparent;
+}
+.symbol_search_currentBadge {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--vnsc-border, #3a3e49);
+  color: var(--vnsc-text-secondary);
+  white-space: nowrap;
+}
+.symbol_search_symbol {
+  font-weight: 700;
+  color: inherit;
+}
+.symbol_search_name {
+  font-size: 11px;
+  color: inherit;
+}
+.symbol_search_exchangeBar {
+  display: flex;
+  gap: 4px;
+  padding: 6px 8px 4px;
+  border-bottom: 1px solid var(--vnsc-border);
+}
+.symbol_search_exBtn {
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--vnsc-border);
+  background: transparent;
+  color: var(--vnsc-text-secondary);
+  font-size: 11px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.symbol_search_exBtn:hover {
+  background: var(--vnsc-bg-tertiary);
+  color: var(--vnsc-text-primary);
+}
+.symbol_search_exBtnActive {
+  background: var(--vnsc-accent, #2962ff);
+  border-color: var(--vnsc-accent, #2962ff);
+  color: #fff;
+}
+.symbol_search_exBadge {
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--vnsc-bg-tertiary);
+  color: var(--vnsc-text-secondary);
+  flex-shrink: 0;
+}
+.symbol_search_exBadgeHose {
+  background: color-mix(in srgb, var(--vnsc-color-success) 18%, transparent);
+  color: var(--vnsc-color-success);
+}
+.symbol_search_exBadgeHnx {
+  background: color-mix(in srgb, var(--vnsc-color-info) 18%, transparent);
+  color: var(--vnsc-color-info);
+}
+.symbol_search_exBadgeUpcom {
+  background: color-mix(in srgb, var(--vnsc-color-warning) 18%, transparent);
+  color: var(--vnsc-color-warning);
+}
+.symbol_search_section {
+  padding: 6px 8px 4px;
+}
+.symbol_search_section + .symbol_search_section {
+  border-top: 1px solid var(--vnsc-border);
+}
+.symbol_search_sectionLabel {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--vnsc-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 5px;
+}
+.symbol_search_chipRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+.symbol_search_chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid var(--vnsc-border);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--vnsc-text-primary);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.symbol_search_chip:hover {
+  background: var(--vnsc-bg-tertiary);
+}
+.symbol_search_chipVn30 {
+  border-color: color-mix(in srgb, var(--vnsc-color-success) 35%, transparent);
+  color: var(--vnsc-color-success);
+}
+.symbol_search_chipVn30:hover {
+  background: color-mix(in srgb, var(--vnsc-color-success) 12%, transparent);
+}
+.symbol_search_chipFutures {
+  border-color: color-mix(in srgb, var(--vnsc-color-info) 35%, transparent);
+  color: var(--vnsc-color-info);
+}
+.symbol_search_chipFutures:hover {
+  background: color-mix(in srgb, var(--vnsc-color-info) 12%, transparent);
+}
+.symbol_search_chipCrypto {
+  border-color: color-mix(in srgb, var(--vnsc-color-warning) 35%, transparent);
+  color: var(--vnsc-color-warning);
+}
+.symbol_search_chipCrypto:hover {
+  background: color-mix(in srgb, var(--vnsc-color-warning) 12%, transparent);
+}
+.symbol_search_vn30Grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 6px;
+  margin-top: 4px;
+}
+.symbol_search_emptyState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 12px;
+}
+.symbol_search_emptyText,
+.symbol_search_loadingText {
+  font-size: 12px;
+  color: var(--vnsc-text-secondary);
+}
+.symbol_search_colorDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.symbol_search_overlayRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0;
+}
+.symbol_search_overlayRowLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.symbol_search_addBtn {
+  padding: 2px 8px;
+  border: 1px solid color-mix(in srgb, var(--vnsc-color-success) 40%, transparent);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vnsc-color-success);
+  font-size: 11px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.symbol_search_addBtn:hover {
+  background: color-mix(in srgb, var(--vnsc-color-success) 10%, transparent);
+}
+.symbol_search_removeBtn {
+  padding: 2px 8px;
+  border: 1px solid color-mix(in srgb, var(--vnsc-color-bearish) 40%, transparent);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vnsc-color-bearish);
+  font-size: 11px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.symbol_search_removeBtn:hover {
+  background: color-mix(in srgb, var(--vnsc-color-bearish) 10%, transparent);
+}
+.symbol_search_divider {
+  margin: 0;
+  border: none;
+  border-top: 1px solid var(--vnsc-border, #3a3e49);
+}
+@media (max-width: 480px) {
+  .symbol_search_wrapper {
+    min-width: 100%;
+  }
+  .symbol_search_dropdown {
+    left: 0;
+    right: 0;
+    max-height: 50vh;
+  }
+}
+.symbol_search_modalBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 5000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 12vh 16px 16px;
+  background: var(--vnsc-bg-overlay, rgba(10, 14, 20, 0.85));
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+.symbol_search_modalPanel {
+  width: min(640px, 100%);
+  max-height: 70vh;
+  overflow: auto;
+  border: 1px solid var(--vnsc-accent, #6366f1);
+  border-radius: 12px;
+  background: var(--vnsc-bg-modal, #1e222d);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(99, 102, 241, 0.15);
+}
+.symbol_search_dropdownFlat {
+  position: static;
+  z-index: auto;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  max-height: none;
+  overflow: visible;
+}
+.symbol_search_dropdownFlat ul {
+  margin: 0;
+  padding: 6px 0 0;
+  list-style: none;
+}
+.symbol_search_unifiedRowActions {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.symbol_search_switchBtn {
+  color: #fff;
+  border-color: var(--vnsc-accent, #6366f1);
+  background: rgba(99, 102, 241, 0.15);
+}
+.symbol_search_switchBtn:hover {
+  background: rgba(99, 102, 241, 0.3);
+}
+
+.tape_panel_panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 240px;
+  z-index: var(--vnsc-z-dock, 51);
+  background: var(--vnsc-bg-primary);
+  border-left: 1px solid var(--vnsc-border-primary);
+  display: flex;
+  flex-direction: column;
+  font-size: var(--vnsc-font-size-xs);
+  color: var(--vnsc-text-primary);
+  overflow: hidden;
+}
+.tape_panel_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--vnsc-space-2);
+  border-bottom: 1px solid var(--vnsc-border-divider);
+  background: var(--vnsc-bg-secondary);
+  flex-shrink: 0;
+}
+.tape_panel_title {
+  font-weight: 700;
+  font-size: var(--vnsc-font-size-sm);
+}
+.tape_panel_closeBtn {
+  background: none;
+  border: none;
+  color: var(--vnsc-text-secondary);
+  cursor: pointer;
+  font-size: var(--vnsc-font-size-md);
+  padding: 0 4px;
+  transition: color 0.15s ease;
+}
+.tape_panel_closeBtn:hover {
+  color: var(--vnsc-text-primary);
+}
+.tape_panel_filterBar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--vnsc-border-divider);
+  flex-shrink: 0;
+}
+.tape_panel_filterLabel {
+  color: var(--vnsc-text-secondary);
+  white-space: nowrap;
+}
+.tape_panel_filterSlider {
+  flex: 1;
+  cursor: pointer;
+}
+.tape_panel_filterValue {
+  width: 38px;
+  text-align: right;
+  color: var(--vnsc-text-primary);
+  flex-shrink: 0;
+}
+.tape_panel_columnHeaders {
+  display: grid;
+  grid-template-columns: 52px 70px 52px 44px 22px;
+  padding: 2px 4px;
+  color: var(--vnsc-text-secondary);
+  font-size: var(--vnsc-font-size-2xs);
+  border-bottom: 1px solid var(--vnsc-border-divider);
+  flex-shrink: 0;
+}
+.tape_panel_entriesList {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.tape_panel_loading,
+.tape_panel_empty {
+  text-align: center;
+  color: var(--vnsc-text-secondary);
+  padding-top: 20px;
+}
+.tape_panel_row {
+  display: grid;
+  grid-template-columns: 52px 70px 52px 44px 22px;
+  height: 22px;
+  align-items: center;
+  padding: 0 4px;
+  background: transparent;
+  border-bottom: 1px solid var(--vnsc-border-divider);
+}
+.tape_panel_rowWhale {
+  background: color-mix(in srgb, var(--vnsc-color-warning) 15%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--vnsc-color-warning) 60%, transparent);
+}
+.tape_panel_rowTime {
+  color: var(--vnsc-text-secondary);
+  font-size: var(--vnsc-font-size-2xs);
+}
+.tape_panel_rowPrice {
+  text-align: right;
+  font-weight: 400;
+}
+.tape_panel_rowPriceBuy {
+  color: var(--vnsc-color-bullish);
+}
+.tape_panel_rowPriceSell {
+  color: var(--vnsc-color-bearish);
+}
+.tape_panel_rowPriceWhale {
+  font-weight: 700;
+}
+.tape_panel_rowVolume {
+  text-align: right;
+  color: var(--vnsc-text-secondary);
+}
+.tape_panel_rowValue {
+  text-align: right;
+  color: var(--vnsc-text-secondary);
+}
+.tape_panel_rowValueWhale {
+  color: var(--vnsc-color-warning);
+}
+.tape_panel_rowSide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  width: 16px;
+  border-radius: 2px;
+  font-size: var(--vnsc-font-size-2xs);
+  font-weight: 700;
+}
+.tape_panel_rowSideBuy {
+  background: color-mix(in srgb, var(--vnsc-color-bullish) 35%, transparent);
+  color: var(--vnsc-text-on-primary);
+}
+.tape_panel_rowSideSell {
+  background: var(--vnsc-color-bearish);
+  color: var(--vnsc-text-on-primary);
+}
+.tape_panel_rowSideUnknown {
+  background: color-mix(in srgb, var(--vnsc-text-secondary) 30%, transparent);
+  color: var(--vnsc-text-primary);
+}
+.tape_panel_footer {
+  padding: 4px 8px;
+  border-top: 1px solid var(--vnsc-border-divider);
+  color: var(--vnsc-text-secondary);
+  font-size: var(--vnsc-font-size-2xs);
+  flex-shrink: 0;
+}
+@media (max-width: 480px) {
+  .tape_panel_panel {
+    width: 100%;
+    height: auto;
+    max-height: 40%;
+    bottom: 0;
+    top: auto;
+    right: 0;
+    border-left: none;
+    border-top: 1px solid var(--vnsc-border-primary);
+  }
+}
+
+.timeframe_footer_timeframeFooter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 8px;
+  background: var(--vnsc-bg-secondary, transparent);
+  border-top: 1px solid var(--vnsc-border, rgba(255, 255, 255, 0.08));
+  z-index: 30;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+  font-family: var(--vnsc-font-family-base, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--vnsc-text-secondary, #787b86);
+}
+.timeframe_footer_timeframeChips {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.timeframe_footer_tfChip {
+  padding: 2px 6px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vnsc-text-secondary, #787b86);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: inherit;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+.timeframe_footer_tfChip:hover {
+  color: var(--vnsc-text-primary, #d1d4dc);
+  border-color: var(--vnsc-border-secondary, rgba(255, 255, 255, 0.12));
+  background: var(--vnsc-bg-hover, rgba(255, 255, 255, 0.04));
+}
+.timeframe_footer_tfChipActive {
+  background: var(--vnsc-accent-strong, #2563eb);
+  color: #fff;
+  font-weight: 600;
+  border-color: var(--vnsc-accent-strong, #2563eb);
+  box-shadow: none;
+}
+.timeframe_footer_tfChipActive:hover {
+  background: var(--vnsc-accent-strong, #2563eb);
+  color: #fff;
+  border-color: var(--vnsc-accent-hover, #1e4bd8);
+}
+.timeframe_footer_separator {
+  width: 1px;
+  height: 14px;
+  background: var(--vnsc-border, rgba(255, 255, 255, 0.08));
+}
+.timeframe_footer_rangeChips {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.timeframe_footer_rangeChip {
+  padding: 2px 6px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vnsc-text-secondary, #787b86);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: inherit;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+.timeframe_footer_rangeChip:hover {
+  color: var(--vnsc-text-primary, #d1d4dc);
+  border-color: var(--vnsc-border-secondary, rgba(255, 255, 255, 0.12));
+  background: var(--vnsc-bg-hover, rgba(255, 255, 255, 0.04));
+}
+.timeframe_footer_rangeChipActive {
+  background: var(--vnsc-accent-strong, #2563eb);
+  color: #fff;
+  font-weight: 600;
+  border-color: var(--vnsc-accent-strong, #2563eb);
+  box-shadow: none;
+}
+.timeframe_footer_rangeChipActive:hover {
+  background: var(--vnsc-accent-strong, #2563eb);
+  color: #fff;
+  border-color: var(--vnsc-accent-hover, #1e4bd8);
+}
+.timeframe_footer_footerChildren {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.timeframe_footer_groupCaption {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--vnsc-text-muted, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  align-self: center;
+  margin-right: 2px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+@media (max-width: 1280px) {
+  .timeframe_footer_groupCaption {
+    display: none;
+  }
+}
+.timeframe_footer_rightCluster {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+}
+.timeframe_footer_footerChildren + .timeframe_footer_rightCluster {
+  margin-left: 0;
+}
+.timeframe_footer_scaleGroup {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--vnsc-border, rgba(255, 255, 255, 0.08));
+  border-radius: 6px;
+  background: transparent;
+}
+.timeframe_footer_scaleBtn {
+  padding: 2px 6px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vnsc-text-secondary, #787b86);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: inherit;
+  font-variant-numeric: tabular-nums;
+}
+.timeframe_footer_scaleBtn:hover {
+  color: var(--vnsc-text-primary, #d1d4dc);
+  background: var(--vnsc-bg-hover, rgba(255, 255, 255, 0.04));
+}
+.timeframe_footer_scaleBtnActive {
+  background: var(--vnsc-accent-strong, #2563eb);
+  color: var(--vnsc-text-on-primary, #ffffff);
+  font-weight: 600;
+}
+.timeframe_footer_tzBadge {
+  padding: 2px 6px;
+  border: 1px solid var(--vnsc-border, rgba(255, 255, 255, 0.08));
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--vnsc-text-secondary, #787b86);
+  background: var(--vnsc-bg-hover, transparent);
+  white-space: nowrap;
+}
+.timeframe_footer_clockText {
+  font-size: 11px;
+  font-weight: 500;
+  font-family: var(--vnsc-font-family-mono, ui-monospace, monospace);
+  color: var(--vnsc-text-primary, #d1d4dc);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.timeframe_footer_countdownText {
+  font-variant-numeric: tabular-nums;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: var(--vnsc-font-family-mono, ui-monospace, monospace);
+  color: var(--vnsc-accent, #2962ff);
+  white-space: nowrap;
+}
+.timeframe_footer_countdownGlyph {
+  font-size: 10px;
+  opacity: 0.7;
+}
+.timeframe_footer_trademark {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--vnsc-text-muted, #6b7280);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  opacity: 0.9;
+}
+.timeframe_footer_trademark:hover {
+  color: var(--vnsc-text-secondary, #787b86);
+  opacity: 1;
+}
+.timeframe_footer_trademarkIcon {
+  font-size: 11px;
+  color: var(--vnsc-accent, #2962ff);
+  opacity: 0.7;
+}
+.timeframe_footer_trademarkIcon:hover {
+  color: var(--vnsc-accent, #2962ff);
+  opacity: 1;
+}
+@media (max-width: 480px) {
+  .timeframe_footer_timeframeFooter {
+    padding: 4px 8px;
+    gap: 8px;
+  }
+  .timeframe_footer_tfChip,
+  .timeframe_footer_rangeChip {
+    padding: 2px 6px;
+    font-size: 10px;
+  }
+  .timeframe_footer_separator {
+    height: 12px;
+  }
+}
+
+.watchlist_panel_list {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 4px 12px;
+  gap: 1px;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--vnsc-border, #2a3550) transparent;
+}
+.watchlist_panel_list::-webkit-scrollbar {
+  width: 8px;
+}
+.watchlist_panel_list::-webkit-scrollbar-thumb {
+  background: var(--vnsc-border, #2a3550);
+  border-radius: 8px;
+}
+.watchlist_panel_list::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.watchlist_panel_row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 34px;
+  padding: 3px 8px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--vnsc-border-divider, rgba(42, 42, 42, 0.6));
+  border-radius: 0;
+  cursor: pointer;
+  text-align: left;
+  font-variant-numeric: tabular-nums;
+}
+.watchlist_panel_row:last-child {
+  border-bottom: none;
+}
+.watchlist_panel_row:hover {
+  background: var(--vnsc-bg-hover, rgba(255, 255, 255, 0.04));
+}
+.watchlist_panel_row:focus {
+  outline: none;
+}
+.watchlist_panel_row:focus-visible {
+  outline: 2px solid var(--vnsc-accent-strong, #2563eb);
+  outline-offset: -2px;
+  background: var(--vnsc-bg-hover, rgba(255, 255, 255, 0.04));
+}
+.watchlist_panel_rowActive {
+  background: var(--vnsc-bg-selected, rgba(59, 130, 246, 0.15));
+}
+.watchlist_panel_symBlock {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+.watchlist_panel_sym {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--vnsc-text-primary, #d1d4dc);
+  white-space: nowrap;
+}
+.watchlist_panel_name {
+  font-size: 10px;
+  color: var(--vnsc-text-secondary, #787b86);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.watchlist_panel_spark {
+  flex-shrink: 0;
+  color: var(--vnsc-text-secondary, #787b86);
+}
+.watchlist_panel_quote {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+.watchlist_panel_price {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vnsc-text-primary, #d1d4dc);
+}
+.watchlist_panel_pct {
+  font-size: 10px;
+  color: var(--vnsc-text-secondary, #787b86);
+}
+.watchlist_panel_up {
+  color: var(--vnsc-color-bullish, rgb(38, 166, 154));
+}
+.watchlist_panel_down {
+  color: var(--vnsc-color-bearish, rgb(239, 83, 80));
+}
+.watchlist_panel_empty {
+  padding: 16px 12px;
+  font-size: 12px;
+  color: var(--vnsc-text-secondary, #787b86);
+  text-align: center;
+}
+
+.whale_panel_panel {
+}
+.whale_panel_title {
+}
+.whale_panel_net {
+}
+.whale_panel_netPositive {
+}
+.whale_panel_netNegative {
+}
+.whale_panel_table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.whale_panel_table th {
+  padding: 8px;
+  text-align: left;
+  color: var(--vnsc-text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--vnsc-border);
+}
+.whale_panel_table td {
+  padding: 8px;
+  border-bottom: 1px solid var(--vnsc-border);
+}
+.whale_panel_rowLabel {
+  font-weight: 500;
+  color: var(--vnsc-text-primary);
+}
+.whale_panel_buy {
+  color: #089981;
+  font-weight: 600;
+  text-align: right;
+}
+.whale_panel_sell {
+  color: #f23645;
+  font-weight: 600;
+  text-align: right;
+}
+@media (max-width: 480px) {
+  .whale_panel_panel {
+  }
+}