.chart-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; margin-top: 16px; border: 1px solid #40525e; border-radius: 12px 12px 0 0; background: #101b24; color: #d5e9f6; }
.chart-navigation[hidden] { display: none; }
.chart-navigation-copy { flex: 1 1 240px; font-size: .85rem; line-height: 1.5; }
.chart-navigation-copy strong { display: block; color: #fff; }
.chart-navigation button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #617b8b; border-radius: 8px; background: #1b2a35; color: #fff; cursor: pointer; font: inherit; }
.chart-navigation button:hover:not(:disabled) { border-color: var(--accent, #36b9ef); background: #294253; }
.chart-navigation button:disabled { opacity: .3; cursor: default; }
.chart-navigation button:focus-visible { outline: 2px solid var(--accent, #36b9ef); outline-offset: 2px; }
.chart-pan-ready { max-height: 72vh; max-height: 72svh; overflow: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #7397ac #101b24; border: 1px solid #40525e; border-radius: 0 0 12px 12px; }
.chart-pan-ready.chart-overflow { cursor: grab; }
.chart-pan-ready.chart-overflow img { -webkit-user-drag: none; }
.chart-pan-ready.chart-dragging, .chart-pan-ready.chart-dragging * { cursor: grabbing !important; user-select: none !important; }
.chart-pan-ready.chart-more-left { border-left: 3px solid var(--accent, #36b9ef); }
.chart-pan-ready.chart-more-right { border-right: 3px solid var(--accent, #36b9ef); }