* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #1c1c1e; color: #e0e0e0; font-family: 'Segoe UI', sans-serif; }
header { background: #262629; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #0f3460; }
h1 { font-size: 18px; color: #00d4ff; }
.live-price { font-size: 16px; font-family: 'Consolas', monospace; font-weight: bold; letter-spacing: 1px; }
.utc-clock { font-size: 14px; color: #ff9800; font-family: 'Consolas', monospace; letter-spacing: 1px; }
.controls { display: flex; gap: 16px; align-items: center; }
select { background: #0f3460; color: #e0e0e0; border: 1px solid #00d4ff; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.tabs { display: flex; gap: 4px; }
.tab { background: #0f3460; color: #888; border: none; padding: 8px 16px; cursor: pointer; border-radius: 4px 4px 0 0; }
.tab.active { background: #1c1c1e; color: #00d4ff; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.timeframe-buttons { padding: 8px 20px; display: flex; gap: 4px; }
.tf-btn { background: #0f3460; color: #888; border: none; padding: 6px 14px; cursor: pointer; border-radius: 4px; font-size: 13px; }
.tf-btn.active { background: #00d4ff; color: #1a1a2e; font-weight: bold; }
.event-panels.collapsed { display: none; }
.panel-toolbar { position: sticky; top: 0; z-index: 20; background: #1c1c1e; }
.bar-controls { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #888; }
.bar-controls input { background: #0f3460; color: #ddd; border: none; padding: 5px 8px; border-radius: 4px; font-size: 13px; }
.bar-controls input[type="number"] { width: 90px; }
.chart-container { width: 100%; height: 500px; }
.chart-container-small { width: 100%; height: 150px; }
.stats-bar { padding: 10px 20px; background: #262629; font-size: 13px; color: #888; display: flex; gap: 24px; }
.stats-bar .value { color: #00d4ff; }
.stats-bar .up { color: #26a69a; }
.stats-bar .down { color: #ef5350; }
.ohlcv-overlay { position: absolute; top: 8px; right: 80px; z-index: 10; display: flex; gap: 12px; font-size: 13px; font-family: 'Consolas', monospace; pointer-events: none; }
/* Bar readout (Imbalance/Run charts) — holds an SVG tooltip. Right side, clear of the price axis. */
.chart-overlay { position: absolute; top: 8px; right: 80px; z-index: 10; pointer-events: none; }
.range-picker { padding: 8px 20px; display: flex; gap: 8px; align-items: center; background: #262629; border-top: 1px solid #0f3460; font-size: 13px; color: #888; }
.range-picker label { color: #888; }
.range-picker input[type="date"] { background: #0f3460; color: #e0e0e0; border: 1px solid #333; padding: 4px 8px; border-radius: 4px; font-size: 13px; }
.range-picker button { font-size: 13px; }
.range-picker input[type="date"] { cursor: pointer; }
.range-picker input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(0.7); }
.tf-separator { width: 1px; height: 20px; background: #0f3460; margin: 0 4px; }
.measure-btn.active, .measure-btn.measured { background: #ff9800; color: #1a1a2e; font-weight: bold; }
.measure-btn.measured { background: #ff980099; }
.measure-status { font-size: 12px; color: #ff9800; font-family: 'Consolas', monospace; align-self: center; }
.measure-info { padding: 6px 20px; background: #0f3460; display: flex; gap: 16px; align-items: center; font-size: 13px; font-family: 'Consolas', monospace; color: #e0e0e0; border-bottom: 1px solid #ff980044; }
.measure-info small { font-size: 11px; }
.measure-info .measure-result { font-size: 15px; letter-spacing: 0.5px; }
.labeling-panel { background: #262629; border-top: 1px solid #0f3460; }
.labeling-header { padding: 8px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #00d4ff; user-select: none; }
.labeling-header:hover { background: #0f3460; }
.labeling-body { padding: 0 20px 12px; display: none; }
.labeling-body.open { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-top: 8px; }
.labeling-row { display: flex; align-items: center; gap: 6px; }
.labeling-row label { color: #888; font-size: 12px; white-space: nowrap; min-width: 70px; }
.labeling-row input { background: #0f3460; color: #e0e0e0; border: 1px solid #333; padding: 4px 8px; border-radius: 4px; font-size: 12px; width: 80px; }
.labeling-section { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 4px 0; border-bottom: 1px solid #0f3460; }
.labeling-section:last-child { border-bottom: none; }
.labeling-section-title { color: #00d4ff; font-size: 12px; font-weight: bold; min-width: 80px; }
.labeling-section button { margin-left: auto; }
.labeling-section button:disabled { opacity: 0.5; cursor: not-allowed; }
#labeling-status { font-size: 12px; color: #ff9800; }
.labeling-row input[type="color"] { width: 32px; height: 24px; padding: 0; border: 1px solid #333; border-radius: 4px; cursor: pointer; background: transparent; }
.labeling-row input[type="range"] { width: 80px; cursor: pointer; accent-color: #00d4ff; }
.labeling-docs { background: #262629; border-top: 1px solid #0f3460; }
.labeling-docs-toggle { padding: 6px 20px; cursor: pointer; font-size: 12px; color: #888; user-select: none; }
.labeling-docs-toggle:hover { color: #00d4ff; }
.labeling-docs-body { display: none; padding: 8px 20px 12px; font-size: 12px; color: #aaa; line-height: 1.6; }
.labeling-docs-body.open { display: block; }
.labeling-docs-body table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.labeling-docs-body th { text-align: left; color: #00d4ff; padding: 4px 8px; border-bottom: 1px solid #0f3460; font-size: 12px; }
.labeling-docs-body td { padding: 4px 8px; border-bottom: 1px solid #0f346033; vertical-align: top; }
.labeling-docs-body td:first-child { white-space: nowrap; color: #ff9800; }
.labeling-docs-body td:nth-child(2) { white-space: nowrap; color: #888; }
.labeling-docs-body code { background: #0f3460; padding: 1px 4px; border-radius: 3px; color: #00d4ff; }
.labeling-docs-body p { color: #888; margin-top: 4px; }