:root {
--indent: 8px; --indent2: calc(var(--indent) * 2); --indent3: calc(var(--indent) * 3); --indent-one-half: calc(var(--indent) * 1.5); --indent-half: calc(var(--indent) * 0.5); --font-family: Trebuchet MS,Roboto,Ubuntu,sans-serif; --font-size: 14px; --font-big: 16px; --font-small: 13px; --font-tiny: 12px; --button-radius: 3px; --button-font-size: 15px; --menu-shadow: 0px 3px 8px 2px rgba(0, 0, 0, 0.1); --popup-shadow: 0px 16px 46px 8px rgba(0, 0, 0, 0.12); --bot-bar-height: calc(var(--indent) * 7 + 1px + env(safe-area-inset-bottom) / 2); --m-screen-header-height: calc(var(--indent) * 6 + 1px); --history-custom-period-height-mobile: calc(var(--indent) * 6.5); --history-custom-period-height-desktop: calc(var(--indent) * 4); --save-left: env(safe-area-inset-left); --save-right: env(safe-area-inset-right); --screen-width: calc(100% - var(--save-left) - var(--save-right)); --zIndex-base: 1; --zIndex-mainScreen: 1; --zIndex-screenHeader: 30; --zIndex-popupScreen: 100; --zIndex-contextMenu: 150; --color-background: #ffffff; --color-bottomPanel: #f7f7f7; --color-border: #e8e8e8; --color-card: #ffffff; --color-icon-default: #554c49; --color-icon-disabled: #d1d1d1; --color-fill-blue: #3183ff; --color-fill-blueHover: #4b93ff; --color-fill-blueActive: #2e79eb; --color-fill-red: #ea4c4c; --color-fill-red-rgb: 234,76,76; --color-fill-green: #36b34b; --color-fill-green-rgb: 54,179,75; --color-fill-greenHover: #41be56; --color-fill-greenActive: #2e9d41; --color-fill-redHover: #f45959; --color-fill-redActive: #f54b4b; --color-fill-lightBlue: #f1f9ff; --color-fill-lightBlueHover: #e5f4ff; --color-fill-lightBlueActive: #d9e9f4; --color-fill-lightRed: #fdf1f1; --color-fill-lightRedHover: #fae8e8; --color-fill-lightRedActive: #f9e3e3; --color-fill-orange: #ec7017; --color-fill-orangeHover: #ff8933; --color-fill-orangeActive: #e06d1a; --color-fill-lightYellow: #fdfaf1; --color-fill-total: #f0f5f9; --color-text-default: #000000; --color-text-secondary: #808080; --color-text-inverted: #ffffff; --color-text-red: #d80000; --color-text-blue: #0b71f3; --color-text-green: #219334; --color-text-orange: #bd571e; --color-text-disabled: #a7b0b8; --color-input-fill-disabled: #f4f5f6; --color-input-border-default: #dddddd; --color-input-border-hover: #87cafe; --color-input-border-invalid: #b82424; --color-button-disabled: #d1d1d1; --color-scroll: #9f9f9f; --color-dark: 0; --theme-mode: light; --color-chart-title: #000000; --color-chart-indicator-title: #808080;

/* Bridge variables expected by the existing terminal CSS */
--indent4: calc(var(--indent) * 4);
--font-size-small: var(--font-small);

--color-fill-border: var(--color-border);
--color-background-menu: var(--color-bottomPanel);
--color-background-modal-header: var(--color-background);
--color-background-search-field: var(--color-fill-total);
--color-chart-line: var(--color-text-secondary);
--color-icon-menu: var(--color-icon-default);
--color-symbol-text-blue: var(--color-text-blue);
--color-symbol-text-red: var(--color-text-red);

/* Chart candlestick colors for LWCharts bridge */
--color-chart-barup: #26a69a;
--color-chart-bardown: #ef5350;

--zIndex-bottomMenu: var(--zIndex-screenHeader);
--index: 0;
}

/* When LWCharts bridge is active, hide Highcharts-only tool chrome */
html[data-chart-engine="lw"] .highcharts-bindings-wrapper,
html[data-chart-engine="lw"] .highcharts-stocktools-wrapper,
html[data-chart-engine="lw"] .highcharts-annotation-toolbar,
html[data-chart-engine="lw"] .highcharts-popup {
	display: none !important;
}

/* Currencies panel (symbols list) typography */
.name.wtwhite-8x60ip,
.price.wtwhite-8x60ip,
.value.wtwhite-8x60ip,
.text.wtwhite-8x60ip {
	font-size: var(--font-size);
	line-height: calc(var(--indent) * 4.5);
}

.text.wtwhite-8x60ip {
	font-weight: 600;
}

th.wtwhite-qgvtdg {
	font-size: var(--font-size);
	font-weight: 600;
	color: var(--color-text-secondary);
}

/*
	Market watch (currencies/symbols) panel
	Use stable structural selectors instead of hashed classnames.
*/
.current-symbols {
	font-family: var(--font-family);
	font-size: var(--font-size);
	color: var(--color-text-default);
	--mw-row-height: 56px;
	--mw-header-height: 44px;
}

/* Header row (desktop grid header + mobile table header) */
.current-symbols-list th,
.current-symbols .current-symbols-list .th {
	color: var(--color-text-secondary);
	font-weight: 500;
	font-size: var(--font-small);
}



/* Header typography (match reference) */
.current-symbols .head.title,
.current-symbols .head.value,
.current-symbols-list thead .head {
	font-weight: 500;
	font-size: var(--font-small);
	color: var(--color-text-default);
}

/* Column header alignment (Symbol left, others centered) */
.current-symbols-list thead th {
	text-align: left;
}

.current-symbols-list thead th:nth-child(n+2) {
	text-align: center;
}

.current-symbols .tr.current-symbols-list .th {
	text-align: left;
}

.current-symbols .tr.current-symbols-list .th:nth-child(n+2) {
	text-align: center;
}

/* Desktop rows injected after .current-symbols-list */
.current-symbols .tr.change-current-tick {
	border-bottom: 1px solid var(--color-border);
}

.desktop .current-symbols .tr.change-current-tick:hover {
	background-color: var(--color-fill-lightBlue);
}

.current-symbols .tr.change-current-tick.active {
	background-color: var(--color-fill-lightBlue);
}

.current-symbols .tr.change-current-tick .td {
	padding-top: 0;
	padding-bottom: 0;
}

.current-symbols .tr.change-current-tick .name,
.current-symbols .tr.change-current-tick .text,
.current-symbols .tr.change-current-tick .price,
.current-symbols .tr.change-current-tick .value {
	font-size: var(--font-big);
	line-height: var(--mw-row-height);
}

.current-symbols .tr.change-current-tick .text {
	font-weight: 400;
	color: var(--color-text-default);
}

.current-symbols .tr.change-current-tick .price,
.current-symbols .tr.change-current-tick .value {
	font-variant-numeric: tabular-nums;
}

/* Match reference: Bid/Ask in blue by default */
/* Match reference: Bid/Ask default black; only color on up/down state */
.current-symbols .tr.change-current-tick .price.bid,
.current-symbols .tr.change-current-tick .price.ask,
.current-symbols-list tbody tr.change-current-tick .price.bid,
.current-symbols-list tbody tr.change-current-tick .price.ask {
	color: var(--color-text-default);
	font-weight: 500;
}

.current-symbols .tr.change-current-tick .price.bid.up,
.current-symbols .tr.change-current-tick .price.ask.up,
.current-symbols-list tbody tr.change-current-tick .price.bid.up,
.current-symbols-list tbody tr.change-current-tick .price.ask.up {
	color: var(--color-text-blue);
}

.current-symbols .tr.change-current-tick .price.bid.down,
.current-symbols .tr.change-current-tick .price.ask.down,
.current-symbols-list tbody tr.change-current-tick .price.bid.down,
.current-symbols-list tbody tr.change-current-tick .price.ask.down {
	color: var(--color-text-red);
}

.current-symbols .tr.change-current-tick .price.spread {
	color: var(--color-text-secondary);
	font-weight: 400;
}

/* Header + cell sizing for the airy layout */
.current-symbols-list thead th {
	height: var(--mw-header-height);
}

.current-symbols-list thead th .head {
	line-height: var(--mw-header-height);
}

.current-symbols-list tbody td {
	height: var(--mw-row-height);
}

.current-symbols-list tbody td .name,
.current-symbols-list tbody td .price,
.current-symbols-list tbody td .value,
.current-symbols-list tbody td .text {
	line-height: var(--mw-row-height);
}

/* Arrow sizing closer to the reference */
.current-symbols .trend .arrow,
.current-symbols-list .trend .arrow {
	border-width: 4px;
	border-top-width: 5px;
	border-bottom-width: 5px;
}

.current-symbols .trend-middle .arrow,
.current-symbols-list .trend-middle .arrow {
	width: 6px;
	height: 6px;
	border-radius: 3px;
}

/* Mobile table body rows */
.current-symbols-list tbody tr.change-current-tick {
	border-bottom: 1px solid var(--color-border);
}

.current-symbols-list tbody tr.change-current-tick:active,
.current-symbols-list tbody tr.change-current-tick.active {
	background-color: var(--color-fill-lightBlue);
}