:root {
  /* Terminal colour controls: black work surfaces and chrome. */
  --terminal-bg: #000000;
  --terminal-panel: #000000;
  --terminal-panel-soft: #000000;
  --terminal-panel-hot: #000000;
  --terminal-text: #eef4f8;
  --terminal-muted: #9caab6;
  --terminal-faint: #6f7d89;
  --terminal-border: #364350;
  --terminal-border-strong: #637181;
  --terminal-red: #ff5f66;
  --terminal-green: #22d37d;
  --terminal-cyan: #42c7e8;
  --terminal-orange: #f29f3d;
  --terminal-yellow: #f5cf5b;
  --terminal-blue: #7db7ff;
  --terminal-header-bg: #000000;
  --terminal-header-shadow: #0c1118;
  --terminal-control-bg: #000000;
  --terminal-strip-bg: #000000;
  --terminal-item-bg: #000000;
  --terminal-item-hover-bg: #000000;
  --terminal-overlay-bg: #000000;
  --terminal-chart-bg: #000000;
  --terminal-active-text: #06130e;
  --terminal-avatar-border: #82cde5;
  --terminal-avatar-text: #0b5872;
  --terminal-avatar-bg: #c8effc;
  --terminal-inset-highlight: rgba(255, 255, 255, 0.035);
  --terminal-resize-border: rgba(93, 255, 178, 0.74);
  --terminal-focus-ring: rgba(66, 199, 232, 0.35);
  --terminal-red-border: rgba(255, 95, 102, 0.65);
  --terminal-red-soft: rgba(255, 95, 102, 0.08);
  --terminal-red-flash: rgba(255, 95, 102, 0.2);
  --terminal-green-border: rgba(34, 211, 125, 0.65);
  --terminal-green-soft: rgba(34, 211, 125, 0.08);
  --terminal-green-hover: rgba(34, 211, 125, 0.1);
  --terminal-green-flash: rgba(34, 211, 125, 0.2);
  --terminal-yellow-border: rgba(245, 207, 91, 0.65);
  --terminal-yellow-soft: rgba(245, 207, 91, 0.08);
  --terminal-yellow-hover: rgba(245, 207, 91, 0.1);
  --terminal-orange-glow: rgba(255, 159, 28, 0.8);
  --terminal-cyan-hover: rgba(66, 199, 232, 0.1);
  --terminal-cyan-menu-hover: rgba(66, 199, 232, 0.12);
  --terminal-divider-soft: rgba(54, 67, 80, 0.55);
  --terminal-divider: rgba(54, 67, 80, 0.72);
  --terminal-divider-strong: rgba(54, 67, 80, 0.85);
  --terminal-resize-line: rgba(99, 113, 129, 0.8);
  --terminal-price-up-flash: rgba(93, 255, 178, 0.18);
  --terminal-price-down-flash: rgba(255, 82, 119, 0.18);
  --terminal-selected-bg: rgba(34, 211, 125, 0.12);
  --terminal-active-inset-shadow: rgba(0, 0, 0, 0.18);
  --terminal-popup-shadow: rgba(0, 0, 0, 0.42);
  --terminal-footer-shadow: #263443;
  --terminal-chart-grid: rgba(99, 113, 129, 0.22);
  --terminal-chart-border: rgba(99, 113, 129, 0.45);
  --terminal-chart-crosshair: rgba(66, 199, 232, 0.52);
  --terminal-chart-area-top: rgba(66, 199, 232, 0.18);
  --terminal-chart-area-bottom: rgba(66, 199, 232, 0.03);
  --terminal-header-height: 46px;
  --terminal-footer-height: 28px;
  --terminal-scrollbar-track: #121923;
  --terminal-scrollbar-thumb: #526170;
  --terminal-scrollbar-thumb-hover: #7b8a9a;
  --terminal-search-clear: #fff;
  --terminal-font: "Inter", sans-serif;
  --terminal-panel-font-family: "Azeret Mono Thin", monospace;
}

/* Blue is reserved for active, selected, and expanded terminal controls. */
.terminal-body button.active,
.terminal-body button[aria-pressed="true"],
.terminal-body button[aria-selected="true"],
.terminal-body button[aria-checked="true"],
.terminal-body button[aria-expanded="true"],
.terminal-body button[aria-current="page"] {
  border-color: #009BFF !important;
  color: #000000 !important;
  background: #009BFF !important;
}

/* Terminal buttons use borders and fills only—never an underline shadow. */
.terminal-body button,
.terminal-body button:hover,
.terminal-body button:focus-visible,
.terminal-body button.active,
.terminal-body button[aria-pressed="true"],
.terminal-body button[aria-selected="true"],
.terminal-body button[aria-expanded="true"] {
  box-shadow: none !important;
}

/* Header navigation and layout controls retain their black terminal chrome. */
.terminal-header .terminal-tabs button.active,
.terminal-header .layout-lock-button,
.terminal-header .layout-lock-button.is-unlocked {
  border-color: var(--terminal-border) !important;
  background: #000000 !important;
  box-shadow: none !important;
}

.terminal-header .terminal-tabs button.active,
.terminal-header .layout-lock-button.is-unlocked {
  color: var(--terminal-text) !important;
}

.terminal-header .layout-lock-button:not(.is-unlocked) {
  color: var(--terminal-muted) !important;
}

.terminal-header .layout-lock-button:hover,
.terminal-header .layout-lock-button.is-unlocked {
  background: #000000 !important;
}

.terminal-header .layout-slot-button:hover,
.terminal-header .layout-slot-button.active {
  border-color: #009BFF !important;
  color: var(--terminal-text) !important;
  background: #000000 !important;
}

/* Screener selections are black with a blue border, without a blue fill. */
.screener-panel .screener-view-toggle button.active,
.screener-panel .market-type-toggle button.active,
.screener-settings-portal .orderbook-settings-buttons button.active,
[data-orderbook-settings-portal] .orderbook-settings-buttons button.active {
  border-color: #009BFF !important;
  color: var(--terminal-text) !important;
  background: #000000 !important;
}

/* Terminal Settings exchange cards use blue selection and grey hover borders only. */
.terminal-settings-modal .exchange-option[aria-checked="true"] {
  border-color: #009BFF !important;
  color: #ffffff !important;
  background: var(--terminal-panel-soft) !important;
}

.terminal-settings-modal .exchange-option:not([aria-checked="true"]):hover,
.terminal-settings-modal .exchange-option:not([aria-checked="true"]):focus-visible {
  border-color: var(--terminal-border-strong) !important;
  box-shadow: none;
}

/* Calendar and News tabs signal selection with a border only. */
.macro-filters button:hover,
.macro-filters button.active,
.macro-filters button[aria-expanded="true"],
.news-tabs button:hover,
.news-tabs button.active {
  color: var(--terminal-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.macro-filters button.active,
.macro-filters button[aria-expanded="true"],
.news-tabs button.active {
  border-color: #009BFF !important;
}

/* Left-side chart controls use a blue active border; timeframes use a blue selection fill. */
.chart-type-picker-trigger:hover,
.chart-type-toggle button:hover,
.chart-view-toggle button:hover,
.chart-type-picker-trigger[aria-expanded="true"],
.chart-type-toggle button.active,
.chart-type-toggle button[aria-pressed="true"],
.chart-view-toggle button.active,
.chart-view-toggle button[aria-pressed="true"] {
  color: var(--terminal-text) !important;
  background: var(--terminal-control-bg) !important;
  box-shadow: none !important;
}

.chart-type-picker-trigger[aria-expanded="true"],
.chart-type-toggle button.active,
.chart-type-toggle button[aria-pressed="true"],
.chart-view-toggle button.active,
.chart-view-toggle button[aria-pressed="true"] {
  border-color: #009BFF !important;
}

.chart-timeframes button.active {
  border-color: #009BFF !important;
  color: #000000 !important;
  background: #009BFF !important;
}

.chart-type-picker-trigger:hover,
.chart-type-menu button:hover {
  border-color: #009BFF !important;
}

.chart-type-menu button:hover {
  color: #000000 !important;
  background: #009BFF !important;
}

.terminal-body[data-terminal-theme="light"] {
  /* Light-theme panels use pale grey surfaces with darker structural chrome. */
  --terminal-bg: #e3e3e3;
  --terminal-panel: #e3e3e3;
  --terminal-panel-soft: #adaaaa;
  --terminal-panel-hot: #adaaaa;
  --terminal-text: #000000;
  --terminal-muted: #000000;
  --terminal-faint: #000000;
  --terminal-border: #adaaaa;
  --terminal-border-strong: #adaaaa;
  --terminal-red: #c3313f;
  --terminal-green: #087a4b;
  --terminal-cyan: #047a99;
  --terminal-orange: #b86a10;
  --terminal-yellow: #8b6500;
  --terminal-blue: #1b66b1;
  --terminal-header-bg: #000000;
  --terminal-header-shadow: #0c1118;
  --terminal-control-bg: #e3e3e3;
  --terminal-strip-bg: #e3e3e3;
  --terminal-item-bg: #e3e3e3;
  --terminal-item-hover-bg: #e3e3e3;
  --terminal-overlay-bg: #e3e3e3;
  --terminal-chart-bg: #e3e3e3;
  --terminal-active-text: #000000;
  --terminal-avatar-border: #82cde5;
  --terminal-avatar-text: #0b5872;
  --terminal-avatar-bg: #c8effc;
  --terminal-inset-highlight: rgba(255, 255, 255, 0.78);
  --terminal-resize-border: rgba(8, 122, 75, 0.68);
  --terminal-focus-ring: rgba(4, 122, 153, 0.22);
  --terminal-red-border: rgba(195, 49, 63, 0.5);
  --terminal-red-soft: rgba(195, 49, 63, 0.08);
  --terminal-red-flash: rgba(195, 49, 63, 0.16);
  --terminal-green-border: rgba(8, 122, 75, 0.5);
  --terminal-green-soft: rgba(8, 122, 75, 0.08);
  --terminal-green-hover: rgba(8, 122, 75, 0.1);
  --terminal-green-flash: rgba(8, 122, 75, 0.16);
  --terminal-yellow-border: rgba(139, 101, 0, 0.48);
  --terminal-yellow-soft: rgba(139, 101, 0, 0.08);
  --terminal-yellow-hover: rgba(139, 101, 0, 0.1);
  --terminal-orange-glow: rgba(184, 106, 16, 0.58);
  --terminal-cyan-hover: rgba(4, 122, 153, 0.09);
  --terminal-cyan-menu-hover: rgba(4, 122, 153, 0.1);
  --terminal-divider-soft: rgba(39, 45, 52, 0.58);
  --terminal-divider: rgba(35, 41, 47, 0.72);
  --terminal-divider-strong: rgba(30, 35, 41, 0.82);
  --terminal-resize-line: rgba(83, 98, 115, 0.56);
  --terminal-price-up-flash: rgba(8, 122, 75, 0.14);
  --terminal-price-down-flash: rgba(195, 49, 63, 0.14);
  --terminal-selected-bg: rgba(8, 122, 75, 0.1);
  --terminal-active-inset-shadow: rgba(0, 0, 0, 0.16);
  --terminal-popup-shadow: rgba(30, 41, 59, 0.18);
  --terminal-footer-shadow: #263443;
  --terminal-chart-grid: rgba(135, 150, 168, 0.24);
  --terminal-chart-border: rgba(135, 150, 168, 0.55);
  --terminal-chart-crosshair: rgba(4, 122, 153, 0.5);
  --terminal-chart-area-top: rgba(4, 122, 153, 0.16);
  --terminal-chart-area-bottom: rgba(4, 122, 153, 0.03);
  --terminal-scrollbar-track: #adaaaa;
  --terminal-scrollbar-thumb: #686666;
  --terminal-scrollbar-thumb-hover: #3f3d3d;
  --terminal-search-clear: #000;
}

.terminal-body[data-terminal-theme="light"] .terminal-header,
.terminal-body[data-terminal-theme="light"] .terminal-statusbar {
  /* Lock terminal chrome to the dark-theme palette in every theme. */
  --terminal-bg: #000000;
  --terminal-panel: #000000;
  --terminal-panel-soft: #000000;
  --terminal-panel-hot: #000000;
  --terminal-text: #eef4f8;
  --terminal-muted: #9caab6;
  --terminal-faint: #6f7d89;
  --terminal-border: #364350;
  --terminal-border-strong: #637181;
  --terminal-red: #ff5f66;
  --terminal-green: #22d37d;
  --terminal-cyan: #42c7e8;
  --terminal-green-border: rgba(34, 211, 125, 0.65);
  --terminal-green-soft: rgba(34, 211, 125, 0.08);
  --terminal-green-hover: rgba(34, 211, 125, 0.1);
  --terminal-cyan-hover: rgba(66, 199, 232, 0.1);
  --terminal-cyan-menu-hover: rgba(66, 199, 232, 0.12);
  --terminal-header-bg: #000000;
  --terminal-header-shadow: #0c1118;
  --terminal-control-bg: #000000;
  --terminal-strip-bg: #000000;
  --terminal-item-bg: #000000;
  --terminal-item-hover-bg: #000000;
  --terminal-footer-shadow: #263443;
}

.terminal-body[data-terminal-theme="light"] .terminal-header {
  color: var(--terminal-text);
}

/* The global settings dialog stays dark; panel-local setting portals keep the active panel theme. */
.terminal-body[data-terminal-theme="light"] :is(.terminal-settings-modal, .terminal-exchange-selector-modal) {
  --terminal-bg: #000000;
  --terminal-panel: #000000;
  --terminal-panel-soft: #000000;
  --terminal-panel-hot: #000000;
  --terminal-text: #eef4f8;
  --terminal-muted: #9caab6;
  --terminal-faint: #6f7d89;
  --terminal-border: #364350;
  --terminal-border-strong: #637181;
  --terminal-red: #ff5f66;
  --terminal-green: #22d37d;
  --terminal-cyan: #42c7e8;
  --terminal-orange: #f29f3d;
  --terminal-yellow: #f5cf5b;
  --terminal-blue: #7db7ff;
  --terminal-control-bg: #000000;
  --terminal-strip-bg: #000000;
  --terminal-item-bg: #000000;
  --terminal-item-hover-bg: #000000;
  --terminal-overlay-bg: #000000;
  --terminal-chart-bg: #000000;
  --terminal-divider-soft: rgba(54, 67, 80, 0.55);
  --terminal-divider: rgba(54, 67, 80, 0.72);
  --terminal-divider-strong: rgba(54, 67, 80, 0.85);
}

/* Keep light-theme selection treatment consistent after the dark-theme rules above. */
.terminal-body[data-terminal-theme="light"] :is(.terminal-panel, .orderbook-settings-portal, .screener-settings-portal) button.active,
.terminal-body[data-terminal-theme="light"] :is(.terminal-panel, .orderbook-settings-portal, .screener-settings-portal) button[aria-pressed="true"],
.terminal-body[data-terminal-theme="light"] :is(.terminal-panel, .orderbook-settings-portal, .screener-settings-portal) button[aria-selected="true"],
.terminal-body[data-terminal-theme="light"] :is(.terminal-panel, .orderbook-settings-portal, .screener-settings-portal) button[aria-checked="true"],
.terminal-body[data-terminal-theme="light"] :is(.terminal-panel, .orderbook-settings-portal, .screener-settings-portal) button[aria-expanded="true"],
.terminal-body[data-terminal-theme="light"] :is(.terminal-panel, .orderbook-settings-portal, .screener-settings-portal) button[aria-current="page"] {
  border-color: #000000 !important;
  color: #000000 !important;
  background: #ACAAAA !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Light theme has no hover treatment for terminal controls. */
.terminal-body[data-terminal-theme="light"] :is(.terminal-panel, .orderbook-settings-portal, .screener-settings-portal) :is(button, .exchange-option, .macro-type-filter-option):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"]):not([aria-expanded="true"]):not([aria-current="page"]):hover {
  border-color: var(--terminal-border) !important;
  color: var(--terminal-muted) !important;
  background: var(--terminal-control-bg) !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

.terminal-body[data-terminal-theme="light"] :is(.terminal-panel, .orderbook-settings-portal, .screener-settings-portal) :is(button, .exchange-option, .macro-type-filter-option) {
  transition: none !important;
}

.terminal-body {
  min-height: 100vh;
  color: var(--terminal-text);
  background: var(--terminal-bg);
  font-family: var(--terminal-font);
  font-size: 12px;
  overflow: hidden;
}

.terminal-shell .terminal-panel,
.terminal-shell .terminal-panel * {
  font-family: var(--terminal-panel-font-family) !important;
  font-weight: 400 !important;
}

.terminal-scroll-area,
.table-wrap,
.macro-list,
.news-feed,
.order-book,
.order-rows,
.market-data-box,
.timezone-menu {
  scrollbar-color: var(--terminal-scrollbar-thumb) var(--terminal-scrollbar-track);
  scrollbar-width: thin;
}

.terminal-scroll-area::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.macro-list::-webkit-scrollbar,
.news-feed::-webkit-scrollbar,
.order-book::-webkit-scrollbar,
.order-rows::-webkit-scrollbar,
.market-data-box::-webkit-scrollbar,
.timezone-menu::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.terminal-scroll-area::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.macro-list::-webkit-scrollbar-track,
.news-feed::-webkit-scrollbar-track,
.order-book::-webkit-scrollbar-track,
.order-rows::-webkit-scrollbar-track,
.market-data-box::-webkit-scrollbar-track,
.timezone-menu::-webkit-scrollbar-track {
  background: var(--terminal-scrollbar-track);
  border-radius: 2px;
}

.terminal-scroll-area::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.macro-list::-webkit-scrollbar-thumb,
.news-feed::-webkit-scrollbar-thumb,
.order-book::-webkit-scrollbar-thumb,
.order-rows::-webkit-scrollbar-thumb,
.market-data-box::-webkit-scrollbar-thumb,
.timezone-menu::-webkit-scrollbar-thumb {
  border: 2px solid var(--terminal-scrollbar-track);
  border-radius: 2px;
  background: var(--terminal-scrollbar-thumb);
}

.terminal-scroll-area::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.macro-list::-webkit-scrollbar-thumb:hover,
.news-feed::-webkit-scrollbar-thumb:hover,
.order-book::-webkit-scrollbar-thumb:hover,
.order-rows::-webkit-scrollbar-thumb:hover,
.market-data-box::-webkit-scrollbar-thumb:hover,
.timezone-menu::-webkit-scrollbar-thumb:hover {
  background: var(--terminal-scrollbar-thumb-hover);
}

.terminal-scroll-area::-webkit-scrollbar-corner,
.table-wrap::-webkit-scrollbar-corner,
.macro-list::-webkit-scrollbar-corner,
.order-book::-webkit-scrollbar-corner,
.order-rows::-webkit-scrollbar-corner,
.market-data-box::-webkit-scrollbar-corner,
.timezone-menu::-webkit-scrollbar-corner {
  background: var(--terminal-scrollbar-track);
}

.terminal-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1fr) minmax(280px, 0.95fr);
  align-items: center;
  gap: 12px;
  min-height: var(--terminal-header-height);
  padding: 6px 12px;
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-header-bg);
  box-shadow: inset 0 -1px 0 var(--terminal-header-shadow);
}

.terminal-brand,
.account-area,
.terminal-tabs,
.status-left,
.status-right {
  display: flex;
  align-items: center;
}

.terminal-brand {
  gap: 10px;
}

.terminal-header .logo {
  min-height: 30px;
  font-size: 0.76rem;
}

.terminal-header .logo::before {
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
  box-shadow: none;
}

.terminal-header .logo.brand-logo-link {
  min-height: 0;
}

.terminal-header .brand-logo {
  width: 128px;
}

.terminal-tabs {
  justify-content: center;
  gap: 6px;
}

.terminal-tabs button,
.macro-filters button,
.news-tabs button,
.logout-button,
.layout-lock-button,
.theme-toggle-button,
.layout-slot-button,
.layout-save-button {
  min-height: 26px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.terminal-tabs button {
  padding: 0 10px;
}

.terminal-tabs button:hover,
.terminal-tabs button.active,
.macro-filters button:hover,
.macro-filters button.active,
.news-tabs button:hover,
.news-tabs button.active,
.layout-lock-button:hover,
.theme-toggle-button:hover,
.theme-toggle-button[aria-pressed="true"],
.layout-lock-button.is-unlocked,
.layout-slot-button:hover,
.layout-slot-button.active,
.layout-save-button:hover {
  color: var(--terminal-text);
  border-color: var(--terminal-border-strong);
  background: var(--terminal-panel-hot);
  box-shadow: inset 0 -2px 0 var(--terminal-cyan);
}

.account-area {
  justify-content: flex-end;
  gap: 10px;
}

.layout-slots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.layout-slots-label {
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.layout-slot-button,
.layout-save-button {
  padding: 0 7px;
  font-size: 0.62rem;
  white-space: nowrap;
}

.layout-slot-button.active {
  color: var(--terminal-green);
  border-color: var(--terminal-green);
}

.layout-slot-button {
  min-width: 24px;
  padding: 0 5px;
}

.layout-save-button {
  color: var(--terminal-text);
  background: var(--terminal-panel);
}

.layout-save-button.is-saved-confirmation {
  color: var(--terminal-green);
  border-color: var(--terminal-green);
  cursor: default;
}

.account-email {
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.7rem;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--terminal-avatar-border);
  border-radius: 3px;
  color: var(--terminal-avatar-text);
  background: var(--terminal-avatar-bg);
  box-shadow: none;
  font-weight: 950;
  padding: 0;
  cursor: pointer;
}

.avatar svg {
  width: 18px;
  height: 18px;
}

.avatar:hover,
.avatar:focus-visible {
  border-color: var(--terminal-text);
  outline: none;
}

.terminal-settings-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -5px;
  padding: 0;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
  cursor: pointer;
}

.terminal-settings-button:hover,
.terminal-settings-button:focus-visible {
  border-color: var(--terminal-border-strong);
  color: var(--terminal-text);
  outline: none;
}

.terminal-settings-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.logout-button,
.layout-lock-button,
.theme-toggle-button {
  padding: 0 12px;
  border-color: var(--terminal-border);
  background: var(--terminal-panel);
}

.theme-toggle-button {
  display: inline-grid;
  width: 28px;
  margin-left: 5px;
  padding: 0;
  place-items: center;
}

.theme-toggle-icon {
  width: 16px;
  height: 16px;
}

.theme-toggle-icon-sun {
  display: none;
}

.terminal-body[data-terminal-theme="light"] .theme-toggle-icon-moon {
  display: none;
}

.terminal-body[data-terminal-theme="light"] .theme-toggle-icon-sun {
  display: block;
}

.layout-lock-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin-left: 5px;
  white-space: nowrap;
}

.layout-lock-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.layout-lock-button.is-unlocked {
  color: var(--terminal-green);
  border-color: var(--terminal-green);
}

/* Keep layout locking on black; blue is a border-only unlocked indicator. */
.terminal-header button.layout-lock-button,
.terminal-header button.layout-lock-button:hover,
.terminal-header button.layout-lock-button:focus-visible {
  background: #000000 !important;
  box-shadow: none !important;
}

.terminal-header button.layout-lock-button:not(.is-unlocked) {
  border-color: var(--terminal-border) !important;
}

.terminal-header button.layout-lock-button:not(.is-unlocked):hover {
  border-color: var(--terminal-border-strong) !important;
}

.terminal-header button.layout-lock-button.is-unlocked,
.terminal-header button.layout-lock-button.is-unlocked:hover {
  border-color: #009BFF !important;
}

.logout-button:hover {
  color: var(--terminal-text);
  border-color: var(--terminal-red);
}

.auth-panel-placeholder {
  display: none;
}

.terminal-shell {
  --terminal-layout-gap: 6px;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: stretch;
  grid-template-columns:
    minmax(250px, 0.9fr)
    minmax(420px, 1.55fr)
    minmax(320px, 1.15fr)
    minmax(260px, 0.95fr);
  gap: var(--terminal-layout-gap);
  padding:
    calc(var(--terminal-header-height) + var(--terminal-layout-gap))
    var(--terminal-layout-gap)
    calc(var(--terminal-footer-height) + var(--terminal-layout-gap));
  overflow: hidden;
}

.terminal-settings-modal-layer {
  position: fixed;
  z-index: 2147483500;
  top: var(--terminal-header-height);
  right: 0;
  bottom: var(--terminal-footer-height);
  left: 0;
  display: grid;
  place-items: center;
  padding: 10px;
  background: rgba(5, 10, 16, 0.36);
  backdrop-filter: blur(7px);
}

.terminal-settings-modal-layer[hidden] {
  display: none;
}

.terminal-exchange-settings h4 {
  margin: 0;
}

.terminal-exchange-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.exchange-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--terminal-border);
  border-radius: 6px;
  color: var(--terminal-text);
  background: var(--terminal-panel-soft);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.exchange-option:hover,
.exchange-option:focus-visible {
  border-color: var(--terminal-cyan);
  outline: none;
  box-shadow: 0 0 0 3px var(--terminal-focus-ring);
}

.exchange-option[aria-checked="true"] {
  border-color: var(--terminal-green);
  background: var(--terminal-green-soft);
}

.exchange-option img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.terminal-body[data-terminal-theme="light"] .exchange-option img[src*="/okx.svg"] {
  filter: invert(1);
}

.exchange-selection-status {
  min-height: 18px;
  margin: 10px 0 0;
  color: var(--terminal-muted);
  font-size: 0.72rem;
}

.terminal-exchange-selector-modal {
  display: grid;
  gap: 24px;
  width: min(86vw, 940px);
  min-height: min(54vh, 520px);
  max-width: 100%;
  max-height: 100%;
  padding: 38px;
  overflow: auto;
  border: 1px solid var(--terminal-border-strong);
  border-radius: 6px;
  color: var(--terminal-text);
  background: var(--terminal-panel);
  box-shadow: 0 22px 70px var(--terminal-popup-shadow);
}

.terminal-exchange-selector-header {
  display: grid;
  gap: 8px;
  text-align: center;
}

.terminal-exchange-selector-header h2,
.terminal-exchange-selector-header p {
  margin: 0;
}

.terminal-exchange-selector-header h2 {
  font-size: 1.55rem;
}

.terminal-exchange-selector-header p {
  color: var(--terminal-muted);
  font-size: 0.9rem;
}

.exchange-selector-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.exchange-selector-options .exchange-option {
  flex-direction: column;
  justify-content: center;
  min-height: 188px;
  padding: 22px 18px;
  gap: 18px;
  font-size: 1.05rem;
  text-align: center;
}

.exchange-selector-options .exchange-option img {
  width: 92px;
  height: 92px;
}

.terminal-exchange-selector-modal .exchange-selection-status {
  margin: 0;
  min-height: 22px;
  text-align: center;
  font-size: 0.8rem;
}

.terminal-settings-modal {
  display: flex;
  flex-direction: column;
  width: min(70%, 980px);
  height: min(70%, 760px);
  min-width: min(520px, 100%);
  min-height: min(360px, 100%);
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--terminal-border-strong);
  border-radius: 6px;
  color: var(--terminal-text);
  background: var(--terminal-panel);
  box-shadow: 0 22px 70px var(--terminal-popup-shadow);
}

.terminal-settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-panel-soft);
}

.terminal-settings-modal-header h2,
.terminal-settings-content h3 {
  margin: 0;
}

.terminal-settings-modal-header h2 {
  font-size: 0.92rem;
}

.terminal-settings-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--terminal-muted);
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.terminal-settings-close:hover,
.terminal-settings-close:focus-visible {
  border-color: var(--terminal-border);
  color: var(--terminal-text);
  background: var(--terminal-control-bg);
  outline: none;
}

.terminal-settings-modal-body {
  display: grid;
  grid-template-columns: minmax(150px, 0.25fr) minmax(0, 1fr);
  min-height: 0;
  flex: 1;
}

.terminal-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  border-right: 1px solid var(--terminal-border);
  background: var(--terminal-strip-bg);
}

.terminal-settings-nav button {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--terminal-muted);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.terminal-settings-nav button:hover,
.terminal-settings-nav button:focus-visible {
  color: var(--terminal-text);
  background: var(--terminal-item-hover-bg);
  outline: none;
}

.terminal-settings-nav button.active {
  border-color: var(--terminal-green-border);
  color: var(--terminal-green);
  background: var(--terminal-green-soft);
}

.terminal-settings-content {
  overflow: auto;
  padding: 28px;
}

.terminal-settings-content h3 {
  font-size: 1.05rem;
}

.terminal-settings-content p {
  max-width: 560px;
  margin: 12px 0 0;
  color: var(--terminal-muted);
  font-size: 0.75rem;
  line-height: 1.55;
}

.terminal-settings-content strong {
  color: var(--terminal-text);
}

/* Keep scrolling subdued and consistent in every terminal panel, menu, and modal. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--terminal-border-strong) var(--terminal-panel);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--terminal-panel);
}

*::-webkit-scrollbar-thumb {
  border: 2px solid var(--terminal-panel);
  border-radius: 999px;
  background: var(--terminal-border-strong);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--terminal-muted);
}

.terminal-settings-content .terminal-settings-note {
  color: var(--terminal-faint);
}

.chart-event-bubbles-settings {
  display: grid;
  gap: 9px;
  max-width: 560px;
  margin-top: 14px;
}

.terminal-exchange-settings {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--terminal-border);
  border-radius: 4px;
  background: var(--terminal-panel-soft);
}

.terminal-exchange-settings h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.terminal-font-settings {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--terminal-border);
  border-radius: 4px;
  background: var(--terminal-panel-soft);
}

.terminal-font-settings h4 {
  margin: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.terminal-font-settings > div > p {
  margin-top: 6px;
}

.terminal-font-weight-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.terminal-font-weight-options button {
  min-height: 29px;
  padding: 5px 10px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-control-bg);
  font: inherit;
  cursor: pointer;
}

.terminal-font-weight-options button:hover,
.terminal-font-weight-options button:focus-visible,
.terminal-font-weight-options button.active {
  border-color: var(--terminal-green-border);
  color: var(--terminal-green);
  background: var(--terminal-green-soft);
  outline: none;
}

.chart-event-bubbles-settings h4 {
  margin: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chart-event-bubble-group {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--terminal-border);
  border-radius: 4px;
  background: var(--terminal-panel-soft);
}

.chart-event-bubble-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chart-event-bubble-group h5 {
  margin: 0;
  color: var(--terminal-text);
  font-family: var(--terminal-font);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.chart-event-bubble-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--terminal-text);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 850;
}

.chart-event-bubble-toggle input {
  accent-color: var(--terminal-green);
}

.chart-event-bubble-threshold {
  display: grid;
  gap: 5px;
}

.chart-event-bubble-thresholds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}

.chart-event-bubble-thresholds .chart-event-bubble-threshold {
  gap: 3px;
}

.chart-event-bubble-threshold-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.67rem;
  font-weight: 900;
  text-transform: uppercase;
}

.chart-event-bubble-range {
  height: 22px;
  margin: 0 5px;
}

.screener-volume-range.chart-event-bubble-range::after {
  left: var(--volume-min-position);
  right: calc(100% - var(--volume-max-position));
}

.chart-event-bubble-slider-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 5px;
}

.chart-event-bubble-input {
  width: 100%;
  min-width: 0;
  min-height: 22px;
  box-sizing: border-box;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-control-bg);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 850;
  text-align: center;
}

.chart-event-bubble-input:focus {
  border-color: var(--terminal-cyan);
  outline: none;
  box-shadow: 0 0 0 1px var(--terminal-focus-ring);
}

.chart-event-bubble-input::-webkit-outer-spin-button,
.chart-event-bubble-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}


.chart-event-bubble-history {
  display: grid;
  min-width: 0;
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.67rem;
  font-weight: 900;
  text-transform: uppercase;
}

.terminal-settings-content .chart-event-bubble-band-help {
  margin: 0;
  color: var(--terminal-faint);
  font-size: 0.69rem;
  line-height: 1.4;
}

.chart-event-bubble-history-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.chart-event-bubble-history-option {
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-control-bg);
  font: inherit;
  text-transform: none;
  cursor: pointer;
}

.chart-event-bubble-history-option:hover,
.chart-event-bubble-history-option:focus-visible {
  border-color: var(--terminal-cyan);
  outline: none;
}

.chart-event-bubble-history-option.active {
  border-color: var(--terminal-cyan);
  color: var(--terminal-cyan);
  background: color-mix(in srgb, var(--terminal-cyan) 12%, var(--terminal-control-bg));
}

.subscription-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 620px;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  background: var(--terminal-control-bg);
}

.subscription-current-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.subscription-current-copy > span,
.subscription-date > span,
.subscription-benefits h4 {
  color: var(--terminal-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

.subscription-current output {
  color: var(--terminal-text);
  font-family: var(--terminal-font);
  font-size: 0.88rem;
  font-weight: 800;
}

.subscription-upgrade-button {
  min-height: 32px;
  padding: 7px 10px;
  flex: 0 0 auto;
  border: 1px solid var(--terminal-green-border);
  border-radius: 3px;
  color: #07150e;
  background: var(--terminal-green);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.subscription-upgrade-button:hover,
.subscription-upgrade-button:focus-visible {
  border-color: var(--terminal-text);
  background: #5be39f;
  outline: none;
}

.subscription-upgrade-button:active {
  transform: translateY(1px);
}

.subscription-upgrade-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.subscription-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 620px;
  margin-top: 10px;
}

.subscription-date {
  display: grid;
  gap: 4px;
}

.subscription-date strong {
  color: var(--terminal-text);
  font-family: var(--terminal-font);
  font-size: 0.78rem;
  font-weight: 700;
}

.subscription-cancel-button,
.subscription-retry-button {
  min-height: 30px;
  margin-top: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 95, 102, 0.65);
  border-radius: 3px;
  color: var(--terminal-red);
  background: rgba(255, 95, 102, 0.08);
  font: inherit;
  font-size: 0.73rem;
  font-weight: 800;
  cursor: pointer;
}

.subscription-cancel-button:hover,
.subscription-cancel-button:focus-visible {
  border-color: var(--terminal-red);
  color: var(--terminal-text);
  background: rgba(255, 95, 102, 0.16);
  outline: none;
}

.subscription-cancel-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.subscription-retry-button {
  margin-top: 0;
  border-color: var(--terminal-border);
  color: var(--terminal-text);
  background: var(--terminal-control-bg);
}

.subscription-retry-button:hover,
.subscription-retry-button:focus-visible {
  border-color: var(--terminal-border-strong);
  background: var(--terminal-item-hover-bg);
  outline: none;
}

.subscription-status {
  min-height: 1.3em;
  margin: 8px 0 0;
  color: var(--terminal-green);
  font-size: 0.75rem;
}

.subscription-status[data-status="error"] {
  color: var(--terminal-red);
}

.subscription-benefits {
  max-width: 740px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--terminal-border);
}

.subscription-benefits h4,
.subscription-plan-heading h5 {
  margin: 0;
}

.subscription-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.subscription-plan-card {
  display: flex;
  min-height: 270px;
  padding: 11px;
  flex-direction: column;
  border: 0.5px solid var(--terminal-border);
  border-radius: 1px;
  background: var(--terminal-panel);
}

.subscription-plan-card-premium {
  border-color: #009bff;
  background: var(--terminal-panel-soft);
}

.subscription-plan-card-ultra {
  border-color: rgba(212, 175, 55, 0.8);
  background: var(--terminal-panel-soft);
}

.subscription-card-upgrade-ultra {
  color: #000000;
  border-color: #d4af37;
  background: #d4af37;
}

.subscription-card-upgrade-ultra:hover,
.subscription-card-upgrade-ultra:focus-visible {
  color: #d4af37;
  background: #000000;
}

.chart-event-bubble-locked p {
  margin: 8px 0 0;
  color: var(--terminal-faint);
  font-size: 0.78rem;
}

.subscription-plan-card.is-current {
  box-shadow: inset 0 0 0 1px currentColor;
}

.subscription-plan-card[data-subscription-plan-card="free"].is-current {
  border-color: #ffffff;
  color: #ffffff;
}

.subscription-plan-card[data-subscription-plan-card="premium"].is-current {
  border-color: #009bff;
  color: #009bff;
}

.subscription-plan-card[data-subscription-plan-card="ultra"].is-current {
  border-color: #d4af37;
  color: #d4af37;
}

.subscription-plan-heading {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.subscription-plan-heading h5 {
  color: var(--terminal-text);
  font-size: 0.82rem;
}

.subscription-plan-heading span {
  padding: 3px 5px;
  border: 1px solid var(--terminal-green-border);
  border-radius: 3px;
  color: var(--terminal-green);
  background: var(--terminal-green-soft);
  font-size: 0.65rem;
  font-weight: 800;
  white-space: nowrap;
}

.subscription-feature-list {
  --subscription-benefit-row-height: 32px;
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: repeat(5, var(--subscription-benefit-row-height));
  height: calc(var(--subscription-benefit-row-height) * 5);
  margin: 10px 0 0;
  gap: 0;
  background: #000000;
}

.subscription-feature-list li {
  height: 32px;
  padding: 6px 8px;
  background: transparent;
  font-size: 0.74rem;
}

.subscription-plan-card .subscription-card-upgrade {
  width: 100%;
  margin-top: auto;
}

.subscription-card-upgrade[data-subscription-upgrade="premium"] {
  color: #000000;
  border-color: #009bff;
  background: #009bff;
}

.subscription-card-upgrade[data-subscription-upgrade="premium"]:hover,
.subscription-card-upgrade[data-subscription-upgrade="premium"]:focus-visible {
  color: #009bff;
  background: #000000;
}

.account-settings-section {
  max-width: 620px;
  margin-top: 18px;
}

.account-information-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-information-fields .account-settings-field {
  margin-top: 0;
}

.account-settings-field {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.account-settings-field span,
.account-settings-section h4 {
  margin: 0;
  color: var(--terminal-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

.account-settings-field output {
  display: block;
  overflow-wrap: anywhere;
  color: var(--terminal-text);
  font-family: var(--terminal-font);
  font-size: 0.75rem;
  line-height: 1.25;
}

.account-devices-section,
.account-delete-section {
  padding-top: 16px;
  border-top: 1px solid var(--terminal-border);
}

.account-settings-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.account-settings-status {
  min-height: 1em;
  margin: 0;
  color: var(--terminal-green);
  font-size: 0.72rem;
  text-align: right;
}

.account-settings-status[data-status="error"] {
  color: var(--terminal-red);
}

.account-device-list {
  display: grid;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.account-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--terminal-border);
}

.account-device:first-child {
  border-top: 0;
}

.account-device-details {
  min-width: 0;
}

.account-device-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--terminal-text);
  font-size: 0.78rem;
  font-weight: 800;
}

.account-device-current {
  padding: 2px 5px;
  border: 1px solid var(--terminal-green-border);
  border-radius: 2px;
  color: var(--terminal-green);
  background: var(--terminal-green-soft);
  font-size: 0.61rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.account-device-meta {
  margin-top: 3px;
  color: var(--terminal-faint);
  font-size: 0.68rem;
  line-height: 1.35;
}

.account-session-logout,
.account-delete-button,
.account-cancel-button {
  min-height: 28px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  font: inherit;
  font-size: 0.71rem;
  font-weight: 800;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.account-session-logout,
.account-delete-button {
  border-color: rgba(255, 95, 102, 0.65);
  color: #fff;
  background: #b83d45;
}

.account-session-logout {
  min-width: 58px;
  padding: 0 8px;
}

.account-delete-button {
  padding: 0 10px;
}

.account-cancel-button {
  padding: 0 10px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
}

.account-session-logout:hover,
.account-delete-button:hover,
.account-session-logout:focus-visible,
.account-delete-button:focus-visible {
  border-color: var(--terminal-red);
  background: var(--terminal-red);
  outline: none;
}

.account-cancel-button:hover,
.account-cancel-button:focus-visible {
  border-color: var(--terminal-border-strong);
  color: var(--terminal-text);
  background: var(--terminal-panel-hot);
  outline: none;
}

.account-session-logout:disabled,
.account-delete-button:disabled,
.account-cancel-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.account-delete-section p {
  margin-top: 6px;
}

.account-delete-section .account-delete-button {
  margin-top: 10px;
}

.terminal-settings-confirm-layer {
  position: fixed;
  z-index: 2147483501;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(5, 10, 16, 0.58);
  backdrop-filter: blur(5px);
}

.terminal-settings-confirm-layer[hidden] {
  display: none;
}

.terminal-settings-confirm-dialog {
  width: min(460px, 100%);
  padding: 18px;
  border: 1px solid var(--terminal-border-strong);
  border-radius: 5px;
  color: var(--terminal-text);
  background: var(--terminal-panel);
  box-shadow: 0 22px 70px var(--terminal-popup-shadow);
}

.terminal-settings-confirm-dialog h2 {
  margin: 0;
  font-size: 0.96rem;
}

.account-delete-dialog-copy p {
  margin: 10px 0 0;
  color: var(--terminal-muted);
  font-size: 0.78rem;
  line-height: 1.48;
}

.terminal-settings-confirm-dialog > .account-settings-status {
  margin-top: 10px;
  text-align: left;
}

.account-delete-dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.terminal-body.auth-required .terminal-shell,
.terminal-body.auth-required .terminal-statusbar {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

.terminal-shell.is-layout-managed {
  position: relative;
  display: block;
}

.terminal-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--terminal-border);
  border-radius: 4px;
  background: var(--terminal-panel);
  box-shadow: inset 0 1px 0 var(--terminal-inset-highlight);
}

.terminal-shell.is-layout-managed .terminal-panel {
  position: absolute;
}

.terminal-shell.is-layout-unlocked .terminal-panel {
  cursor: move;
}

.terminal-shell.is-layout-unlocked .panel-header button,
.terminal-shell.is-layout-unlocked .panel-header select,
.terminal-shell.is-layout-unlocked .chart-topbar button,
.terminal-shell.is-layout-unlocked .terminal-panel a {
  cursor: pointer;
}

.terminal-shell.is-layout-unlocked .terminal-panel input,
.terminal-shell.is-layout-unlocked .terminal-panel textarea {
  cursor: text;
}

.terminal-panel.is-panel-dragging {
  z-index: 16;
  will-change: transform;
}

.data-panel-stack {
  display: grid;
  grid-template-rows: minmax(0, 2.25fr) minmax(136px, 0.6fr);
  min-height: 0;
  gap: var(--terminal-layout-gap);
}

.macro-news-stack {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
  gap: var(--terminal-layout-gap);
}

.terminal-shell.is-layout-managed .data-panel-stack {
  display: contents;
}

.terminal-shell.is-layout-managed .macro-news-stack {
  display: contents;
}

.panel-resize-corner {
  position: absolute;
  z-index: 18;
  display: none;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.terminal-shell.is-layout-unlocked .panel-resize-corner {
  display: block;
  pointer-events: auto;
}

.panel-resize-corner::before,
.panel-resize-corner::after {
  position: absolute;
  border-width: 1px;
  border-color: var(--terminal-resize-border);
  content: "";
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.panel-resize-corner::before {
  width: 12px;
  height: 1px;
}

.panel-resize-corner::after {
  width: 1px;
  height: 12px;
}

.panel-resize-corner:hover::before,
.panel-resize-corner:hover::after,
.panel-resize-corner.is-dragging::before,
.panel-resize-corner.is-dragging::after {
  border-color: var(--terminal-cyan);
  box-shadow: 0 0 0 1px var(--terminal-focus-ring);
}

.panel-resize-corner[data-corner="nw"] {
  top: 6px;
  left: 6px;
  cursor: nwse-resize;
}

.panel-resize-corner[data-corner="ne"] {
  top: 6px;
  right: 6px;
  cursor: nesw-resize;
}

.panel-resize-corner[data-corner="sw"] {
  bottom: 6px;
  left: 6px;
  cursor: nesw-resize;
}

.panel-resize-corner[data-corner="se"] {
  right: 6px;
  bottom: 6px;
  cursor: nwse-resize;
}

.panel-resize-corner[data-corner="nw"]::before,
.panel-resize-corner[data-corner="nw"]::after {
  top: 0;
  left: 0;
  border-top-style: solid;
}

.panel-resize-corner[data-corner="ne"]::before,
.panel-resize-corner[data-corner="ne"]::after {
  top: 0;
  right: 0;
  border-top-style: solid;
}

.panel-resize-corner[data-corner="sw"]::before,
.panel-resize-corner[data-corner="sw"]::after {
  bottom: 0;
  left: 0;
  border-bottom-style: solid;
}

.panel-resize-corner[data-corner="se"]::before,
.panel-resize-corner[data-corner="se"]::after {
  right: 0;
  bottom: 0;
  border-bottom-style: solid;
}

.panel-resize-corner[data-corner="nw"]::after,
.panel-resize-corner[data-corner="sw"]::after {
  left: 0;
  border-left-style: solid;
}

.panel-resize-corner[data-corner="ne"]::after,
.panel-resize-corner[data-corner="se"]::after {
  right: 0;
  border-right-style: solid;
}

.panel-resizing,
.panel-resizing *,
.panel-dragging,
.panel-dragging * {
  cursor: inherit !important;
  user-select: none !important;
}

.screener-panel,
.macro-panel,
.news-panel {
  display: flex;
  flex-direction: column;
}

.screener-panel {
  --pair-col-width: 130px;
  --price-col-width: 100px;
  --change-col-width: 70px;
  --volume-col-width: 110px;
}

.table-wrap,
.macro-list {
  min-height: 0;
}

.panel-header,
.chart-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-panel-soft);
}

.panel-header h1,
.chart-topbar h1 {
  margin: 0;
  color: var(--terminal-text);
  font-size: 0.76rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 900;
  white-space: nowrap;
}

.status-pill.disconnected {
  color: var(--terminal-red);
  border-color: var(--terminal-red-border);
  background: var(--terminal-red-soft);
}

.status-pill.connecting {
  color: var(--terminal-yellow);
  border-color: var(--terminal-yellow-border);
  background: var(--terminal-yellow-soft);
}

.status-pill.connected {
  color: var(--terminal-green);
  border-color: var(--terminal-green-border);
  background: var(--terminal-green-soft);
}

.macro-list {
  height: calc(100% - 35px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
}

.news-content {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.hidden {
  display: none !important;
}

.impact-pin-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.impact-pin-control select {
  max-width: 104px;
  padding: 4px 6px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-panel-soft);
  font: inherit;
}

.news-watchlist-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  padding: 7px;
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-strip-bg);
}

.news-watchlist-form input {
  min-width: 0;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-control-bg);
  font: inherit;
  outline: none;
}

.news-watchlist-form input:focus {
  border-color: var(--terminal-cyan);
  box-shadow: 0 0 0 1px var(--terminal-focus-ring);
}

.news-watchlist-form button,
.news-chip button {
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
  cursor: pointer;
  font-family: var(--terminal-font);
  font-size: 0.64rem;
  font-weight: 900;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.news-watchlist-form button {
  min-height: 26px;
  padding: 0 8px;
  text-transform: uppercase;
}

.news-watchlist-form button:hover,
.news-chip button:hover {
  border-color: var(--terminal-border-strong);
  color: var(--terminal-text);
}

.news-watchlist {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 4px;
  min-height: 31px;
  overflow: hidden;
  padding: 6px 7px;
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-item-bg);
}

.news-watchlist-empty {
  align-self: center;
  color: var(--terminal-faint);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.news-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 20px;
  padding-left: 6px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-green);
  background: var(--terminal-green-soft);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 900;
}

.news-handles-overflow-button {
  flex: 0 0 auto;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-cyan);
  background: var(--terminal-control-bg);
  cursor: pointer;
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 900;
  white-space: nowrap;
}

.news-overflow-measure {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.news-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-chip button {
  display: inline-grid;
  width: 20px;
  min-height: 20px;
  place-items: center;
  padding: 0;
  border-width: 0 0 0 1px;
  border-radius: 0 2px 2px 0;
  color: var(--terminal-muted);
}

.news-message {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 7px;
  border-bottom: 1px solid var(--terminal-border);
  color: var(--terminal-yellow);
  background: var(--terminal-yellow-soft);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1.35;
}

.news-message.error {
  color: var(--terminal-yellow);
}

.news-message.hidden {
  display: none;
}

.news-feed {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
}

.news-post {
  position: relative;
  padding: 8px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  background: var(--terminal-item-bg);
  transition: border-color 120ms ease, background 120ms ease;
}

.news-post + .news-post {
  margin-top: 5px;
}

.news-post:hover {
  border-color: var(--terminal-border-strong);
  background: var(--terminal-item-hover-bg);
}

.news-post.high-impact,
.macro-event.high-impact {
  border-color: rgba(255, 95, 102, 0.65);
  padding-bottom: 30px;
}

.news-post.is-pinned,
.macro-event.is-pinned {
  border-color: var(--terminal-red);
  background: rgba(255, 95, 102, 0.13);
  box-shadow: inset 2px 0 0 var(--terminal-red);
}

.news-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 850;
}

.news-post-meta span:first-child {
  color: var(--terminal-text);
}

.news-post p {
  margin: 6px 0;
  color: var(--terminal-text);
  font-size: 0.7rem;
  line-height: 1.45;
}

.news-post a {
  color: var(--terminal-cyan);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.news-post a:hover {
  color: var(--terminal-text);
}

.impact-unpin-button {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  padding: 3px 6px;
  border: 1px solid rgba(255, 95, 102, 0.65);
  border-radius: 3px;
  color: var(--terminal-red);
  background: rgba(17, 23, 34, 0.86);
  font-family: var(--terminal-font);
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.impact-labels {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: calc(100% - 12px);
  padding-left: 36px;
}

.impact-label,
.impact-info-button {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 5px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: rgba(17, 23, 34, 0.9);
  font-family: var(--terminal-font);
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

button.impact-label,
.impact-info-button,
.impact-market-button {
  cursor: pointer;
}

.impact-label.positive,
.impact-market-button .positive {
  color: var(--terminal-green);
}

.impact-label.negative,
.impact-market-button .negative {
  color: var(--terminal-red);
}

.impact-label-multiple,
.impact-info-button {
  border-color: var(--terminal-red);
  color: var(--terminal-red);
}

.impact-info-button {
  justify-content: center;
  width: 18px;
  padding: 0;
  border-radius: 50%;
}

.impact-popup-portal,
.news-handles-popup-portal,
.orderbook-settings-portal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  display: grid;
  gap: 3px;
  width: min(250px, calc(100vw - 32px));
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--terminal-red);
  border-radius: 4px;
  background: var(--terminal-panel);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.news-handles-popup-portal {
  width: min(230px, calc(100vw - 32px));
  border-color: var(--terminal-border);
  background: var(--terminal-item-bg);
}

.news-impact-source-popup {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  width: min(360px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.economic-calendar-impact-source-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.economic-calendar-impact-source-header h2 {
  margin: 0;
  color: var(--terminal-text);
  font-size: 0.78rem;
  line-height: 1.35;
}

.economic-calendar-impact-source-header span {
  flex: 0 1 auto;
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1.35;
  text-align: right;
}

.economic-calendar-impact-source-details {
  display: grid;
  gap: 5px;
  margin: 0;
}

.economic-calendar-impact-source-details div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--terminal-font);
  font-size: 0.62rem;
}

.economic-calendar-impact-source-details dt {
  color: var(--terminal-muted);
}

.economic-calendar-impact-source-details dd {
  margin: 0;
  color: var(--terminal-text);
  text-align: right;
}

.orderbook-settings-portal {
  gap: 13px;
  width: min(260px, calc(100vw - 32px));
  max-height: min(420px, calc(100vh - 32px));
  border-color: var(--terminal-border-strong);
  background: var(--terminal-panel);
}

.screener-settings-portal {
  width: min(340px, calc(100vw - 32px));
  overflow-x: hidden;
}

.orderbook-settings-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.orderbook-settings-label {
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.orderbook-settings-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.orderbook-settings-buttons button {
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
  cursor: pointer;
  font-family: var(--terminal-font);
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
}

.orderbook-settings-buttons button:hover {
  border-color: var(--terminal-border-strong);
  color: var(--terminal-text);
}

.orderbook-settings-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--terminal-text);
  font-family: var(--terminal-font);
  font-size: 0.68rem;
  font-weight: 850;
}

.orderbook-settings-check input {
  accent-color: var(--terminal-green);
}

.orderbook-settings-portal select {
  width: 100%;
  min-height: 28px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-control-bg);
  font-family: var(--terminal-font);
  font-size: 0.68rem;
  font-weight: 850;
}

.screener-volume-settings {
  gap: 8px;
}

.screener-volume-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.screener-volume-inputs label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.screener-volume-inputs input {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-control-bg);
  font-family: var(--terminal-font);
  font-size: 0.68rem;
  font-weight: 850;
}

.screener-volume-inputs input:focus {
  border-color: var(--terminal-cyan);
  outline: none;
  box-shadow: 0 0 0 1px var(--terminal-focus-ring);
}

.screener-volume-range {
  position: relative;
  height: 32px;
  margin: 0 8px;
  --volume-min-position: 0%;
  --volume-max-position: 100%;
}

.screener-volume-range::before,
.screener-volume-range::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  content: "";
  transform: translateY(-50%);
  pointer-events: none;
}

.screener-volume-range::before {
  background: var(--terminal-control-bg);
  border: 1px solid var(--terminal-border);
}

.screener-volume-range::after {
  left: var(--volume-min-position);
  right: calc(100% - var(--volume-max-position));
  background: var(--terminal-green);
}

.screener-volume-handle {
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--terminal-panel);
  border-radius: 50%;
  background: var(--terminal-green);
  box-shadow: 0 0 0 1px var(--terminal-border-strong);
  cursor: grab;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.screener-volume-handle:active {
  cursor: grabbing;
}

.screener-volume-handle:focus-visible {
  outline: 2px solid var(--terminal-cyan);
  outline-offset: 2px;
}

.impact-market-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-panel-soft);
  font-family: var(--terminal-font);
  font-size: 0.6rem;
  font-weight: 850;
  text-align: left;
}

.impact-detail-grid,
.impact-market-list {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.impact-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.impact-market-list {
  padding-bottom: 4px;
}

.news-state h2 {
  margin: 0 0 5px;
  color: var(--terminal-text);
  font-size: 0.72rem;
  line-height: 1.3;
}

.news-state p {
  margin: 0;
  color: var(--terminal-muted);
}

.macro-event {
  position: relative;
  padding: 8px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  background: var(--terminal-item-bg);
  transition: border-color 120ms ease, background 120ms ease;
}

.macro-event + .macro-event {
  margin-top: 5px;
}

.macro-event:hover {
  border-color: var(--terminal-border-strong);
  background: var(--terminal-item-hover-bg);
}

.macro-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.62rem;
}

.macro-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.macro-status.active::before,
.macro-status.released::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.macro-status.active::before {
  background: var(--terminal-orange);
}

.macro-status.released::before {
  background: var(--terminal-green);
}

.macro-event h2 {
  margin: 6px 0 4px;
  color: var(--terminal-text);
  font-size: 0.74rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.macro-values {
  margin: 0;
  color: var(--terminal-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.search-field {
  flex: 0 0 auto;
  display: block;
  padding: 7px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.search-field input {
  width: 100%;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-control-bg);
  font: inherit;
  outline: none;
}

.search-field input:focus {
  border-color: var(--terminal-cyan);
  box-shadow: 0 0 0 1px var(--terminal-focus-ring);
}

/* Replace the browser's tinted search cancel control with a high-contrast icon. */
.search-field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  cursor: pointer;
  background-color: var(--terminal-search-clear);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 4.3 12 10.6 5.7 4.3 4.3 5.7l6.3 6.3-6.3 6.3 1.4 1.4 6.3-6.3 6.3 6.3 1.4-1.4-6.3-6.3 6.3-6.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 4.3 12 10.6 5.7 4.3 4.3 5.7l6.3 6.3-6.3 6.3 1.4 1.4 6.3-6.3 6.3 6.3 1.4-1.4-6.3-6.3 6.3-6.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.table-wrap {
  height: calc(100% - 113px);
  overflow: auto;
  overscroll-behavior: contain;
}

.screener-view-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.market-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.screener-view-toggle {
  padding: 0 7px 7px;
}

.screener-view-toggle button {
  min-height: 26px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
  cursor: pointer;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease,
    box-shadow 160ms ease;
}

.market-type-toggle button {
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.screener-view-toggle button.active {
  color: var(--terminal-active-text);
  border-color: var(--terminal-green);
  background: var(--terminal-green);
  box-shadow: inset 0 -1px 0 var(--terminal-active-inset-shadow);
}

.screener-view-toggle button:hover {
  color: var(--terminal-text);
  border-color: var(--terminal-border-strong);
}

.market-type-toggle button:hover {
  color: var(--terminal-text);
  border-color: var(--terminal-border-strong);
}

.screener-view-toggle button.active:hover,
.market-type-toggle button.active:hover {
  color: var(--terminal-active-text);
}

.market-type-toggle button.active {
  color: var(--terminal-active-text);
  border-color: var(--terminal-green);
  background: var(--terminal-green);
}

.screener-sections {
  padding: 0 0 10px;
}

.saved-section {
  margin: 0 6px;
}

.all-pairs-section {
  margin: 0 6px;
}

.saved-section.hidden,
.all-pairs-section.hidden {
  display: none;
}

.screener-section-title {
  box-sizing: border-box;
  margin: 0;
  padding: 7px 0 5px;
  color: var(--terminal-green);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.saved-empty-state,
.market-empty-state {
  padding: 9px 8px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: var(--terminal-item-bg);
  font-size: 0.68rem;
  line-height: 1.5;
}

.saved-empty-state p,
.market-empty-state p {
  margin: 0;
}

.saved-empty-state p + p,
.market-empty-state p + p {
  margin-top: 2px;
}

.saved-empty-state.hidden,
.market-empty-state.hidden,
.saved-table.hidden,
.screener-table.hidden {
  display: none;
}

.screener-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: var(--terminal-font);
  font-size: 0.68rem;
}

.screener-col-pair {
  width: var(--pair-col-width);
}

.screener-col-price {
  width: var(--price-col-width);
}

.screener-col-change {
  width: var(--change-col-width);
}

.screener-col-volume {
  width: var(--volume-col-width);
}

.screener-table th,
.screener-table td {
  position: relative;
  overflow: hidden;
  padding: 5px 7px;
  border-bottom: 1px solid var(--terminal-divider);
  border-right: 1px solid var(--terminal-divider-strong);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screener-table th:last-child,
.screener-table td:last-child {
  border-right: 0;
}

.screener-table th:first-child,
.screener-table td:first-child {
  text-align: left;
}

.screener-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  color: var(--terminal-muted);
  background: var(--terminal-panel-soft);
  font-size: 0.6rem;
  text-transform: uppercase;
  user-select: none;
}

.screener-table th button {
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-overflow: ellipsis;
  text-transform: inherit;
  white-space: nowrap;
}

.screener-col-resize-handle {
  position: absolute;
  top: 5px;
  right: 0;
  bottom: 5px;
  z-index: 20;
  width: 8px;
  cursor: col-resize;
}

.screener-col-resize-handle::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  border-radius: 2px;
  background: var(--terminal-resize-line);
  content: "";
  transition: background 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.screener-col-resize-handle:hover::before,
.screener-col-resize-handle.is-dragging::before {
  background: var(--terminal-cyan);
  box-shadow: none;
}

.screener-column-resizing,
.screener-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.screener-table tbody tr {
  cursor: pointer;
  transition: color 100ms ease;
}

.screener-table tbody tr.price-up-flash,
.screener-table tbody tr.price-up-flash:hover,
.screener-table tbody tr.price-up-flash.selected {
  background: var(--terminal-price-up-flash) !important;
  box-shadow: inset 3px 0 0 var(--terminal-green);
  transition: none;
}

.screener-table tbody tr.price-down-flash,
.screener-table tbody tr.price-down-flash:hover,
.screener-table tbody tr.price-down-flash.selected {
  background: var(--terminal-price-down-flash) !important;
  box-shadow: inset 3px 0 0 var(--terminal-red);
  transition: none;
}

.screener-table tbody tr:hover,
.screener-table tbody tr.selected {
  background: var(--terminal-cyan-hover);
}

.screener-table tbody tr.selected {
  background: var(--terminal-selected-bg);
  box-shadow: inset 3px 0 0 var(--terminal-green);
}

.pair-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.pair-cell > span:first-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-button {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 3px;
  color: var(--terminal-faint);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1;
  transition: color 150ms ease, transform 150ms ease, text-shadow 150ms ease,
    background 150ms ease;
}

.star-button:hover {
  color: var(--terminal-yellow);
  background: var(--terminal-yellow-hover);
  text-shadow: none;
}

.star-button:active {
  transform: scale(0.92);
}

.star-button.is-saved {
  color: var(--terminal-yellow);
  text-shadow: none;
}

.market-type-badge {
  padding: 1px 4px;
  border: 1px solid var(--terminal-border);
  border-radius: 2px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
  font-size: 0.55rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hot-pair-marker {
  flex: 0 0 auto;
  line-height: 1;
}

.num {
  font-family: var(--terminal-font);
  font-variant-numeric: tabular-nums;
}

.positive {
  color: var(--terminal-green);
}

.negative {
  color: var(--terminal-red);
}

.chart-panel {
  display: flex;
  flex-direction: column;
}

.chart-topbar {
  align-items: center;
}

.chart-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.chart-timeframes {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}

.chart-timeframes button {
  min-height: 22px;
  min-width: 30px;
  padding: 0 6px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
  cursor: pointer;
  font-family: var(--terminal-font);
  font-size: 0.66rem;
  font-weight: 900;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.chart-timeframes button:hover {
  border-color: var(--terminal-border-strong);
}

.chart-timeframes button.active {
  border-color: var(--terminal-green);
  color: var(--terminal-active-text);
  background: var(--terminal-green);
}

.chart-settings {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 5px 7px;
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-strip-bg);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--terminal-scrollbar-thumb) var(--terminal-scrollbar-track);
  scrollbar-width: thin;
}

.chart-settings > * {
  flex: 0 0 auto;
}

/* The toolbar normally scrolls horizontally, which clips dropdowns on its
   vertical axis. Temporarily let the open chart-type menu layer above the
   chart instead. */
.chart-settings.chart-type-menu-open {
  position: relative;
  z-index: 10;
  overflow: visible;
}

.chart-settings::-webkit-scrollbar {
  height: 8px;
}

.chart-settings::-webkit-scrollbar-track {
  background: var(--terminal-scrollbar-track);
}

.chart-settings::-webkit-scrollbar-thumb {
  border: 2px solid var(--terminal-scrollbar-track);
  border-radius: 2px;
  background: var(--terminal-scrollbar-thumb);
}

.chart-type-toggle,
.chart-view-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.chart-type-picker {
  position: relative;
  z-index: 9;
  flex: 0 0 auto;
  font-family: var(--terminal-font);
}

.chart-type-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 26px;
  padding: 0 5px 0 8px;
  border: 1px solid var(--terminal-border-strong);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-overlay-bg);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
}

.chart-type-picker-trigger:hover {
  border-color: var(--terminal-green);
}

.chart-type-picker-trigger svg {
  width: 16px;
  height: 16px;
}

.chart-type-picker-trigger [data-chart-type-icon-open] {
  display: none;
}

.chart-type-picker.open .chart-type-picker-trigger [data-chart-type-icon-closed] {
  display: none;
}

.chart-type-picker.open .chart-type-picker-trigger [data-chart-type-icon-open] {
  display: block;
}

.chart-type-menu {
  position: absolute;
  z-index: 1;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  width: max-content;
  min-width: 132px;
  padding: 5px;
  border: 1px solid var(--terminal-border-strong);
  border-radius: 4px;
  background: var(--terminal-overlay-bg);
  box-shadow: 0 18px 40px var(--terminal-popup-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  visibility: hidden;
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

.chart-type-picker.open .chart-type-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.chart-type-menu button {
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  color: var(--terminal-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 850;
  text-align: left;
}

.chart-type-menu button:hover,
.chart-type-menu button.active {
  color: var(--terminal-green);
  background: var(--terminal-green-hover);
}

.chart-type-toggle button,
.chart-view-toggle button {
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
  cursor: pointer;
  font-family: var(--terminal-font);
  font-size: 0.64rem;
  font-weight: 900;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease,
    box-shadow 160ms ease;
}

.chart-type-toggle button:hover,
.chart-view-toggle button:hover {
  border-color: var(--terminal-border-strong);
}

.chart-type-toggle button.active,
.chart-view-toggle button.active {
  border-color: var(--terminal-green);
  color: var(--terminal-active-text);
  background: var(--terminal-green);
  box-shadow: none;
}

.chart-container {
  position: relative;
  flex: 1;
  /* Keep Lightweight Charts' right price scale and bottom time scale visible. */
  min-height: 180px;
  border-top: 1px solid var(--terminal-border);
  background: var(--terminal-chart-bg);
}

.chart-container.is-measuring {
  cursor: crosshair;
}

.news-impact-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Keep bubbles above Lightweight Charts' canvas and every in-chart layer. */
  z-index: 2147482000;
}

.news-impact-bubble {
  position: absolute;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  border-radius: 50%;
  background-color: #00e5ff;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}

.news-impact-bubble-hit-target {
  position: absolute;
  /* Keep stacked bubbles individually targetable. */
  width: 20px;
  height: 20px;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}

.chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--terminal-muted);
  font-family: var(--terminal-font);
  font-size: 0.82rem;
  font-weight: 800;
  pointer-events: none;
}

.chart-empty.hidden {
  display: none;
}

.chart-measure-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  pointer-events: none;
}

.chart-measure-overlay.is-visible {
  display: block;
}

.chart-measure-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-measure-line {
  stroke: var(--terminal-cyan);
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
}

.chart-measure-area {
  fill: var(--terminal-cyan);
  fill-opacity: 0.1;
  stroke: var(--terminal-cyan);
  stroke-opacity: 0.34;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-measure-area.is-hidden {
  display: none;
}

.chart-measure-guide {
  stroke: var(--terminal-cyan);
  stroke-dasharray: 4 4;
  stroke-opacity: 0.44;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-measure-point {
  fill: var(--terminal-chart-bg);
  stroke: var(--terminal-cyan);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.chart-measure-label {
  position: absolute;
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 146px;
  min-height: 58px;
  padding: 6px 8px;
  border: 1px solid var(--terminal-border-strong);
  border-radius: 4px;
  color: var(--terminal-text);
  background: var(--terminal-overlay-bg);
  box-shadow: 0 12px 28px var(--terminal-popup-shadow);
  font-family: var(--terminal-font);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}

.chart-measure-label .is-up {
  color: var(--terminal-green);
}

.chart-measure-label .is-down {
  color: var(--terminal-red);
}

.chart-context-menu {
  position: absolute;
  z-index: 8;
  display: grid;
  width: 190px;
  padding: 6px;
  border: 1px solid var(--terminal-border-strong);
  border-radius: 4px;
  background: var(--terminal-overlay-bg);
  box-shadow: 0 18px 40px var(--terminal-popup-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  visibility: hidden;
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

.chart-context-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.chart-context-menu button {
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  color: var(--terminal-muted);
  background: transparent;
  cursor: pointer;
  font-family: var(--terminal-font);
  font-size: 0.68rem;
  font-weight: 850;
  text-align: left;
}

.chart-context-menu button:hover,
.chart-context-menu button.active {
  color: var(--terminal-green);
  background: var(--terminal-green-hover);
}

.order-panel,
.market-panel {
  display: flex;
  flex-direction: column;
}

.order-book,
.market-data-box {
  padding: 7px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.order-book {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto var(--order-ask-rows-height, max-content) auto var(--order-bid-rows-height, max-content);
  align-content: space-between;
  flex: 1 1 auto;
  overflow: hidden;
}

.order-rows {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.order-panel .panel-header {
  align-items: center;
}

.orderbook-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 0 0 auto;
  min-width: max-content;
}

.orderbook-title-block h1 {
  white-space: nowrap;
}

.orderbook-settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-muted);
  background: var(--terminal-control-bg);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.orderbook-settings-button:hover,
.orderbook-settings-button[aria-expanded="true"] {
  border-color: var(--terminal-border-strong);
  color: var(--terminal-text);
}

.orderbook-settings-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.orderbook-settings-buttons button.active {
  border-color: var(--terminal-green);
  color: var(--terminal-active-text);
  background: var(--terminal-green);
}

.market-data-box {
  height: calc(100% - 35px);
}

.order-head,
.order-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, minmax(0, 0.78fr));
  gap: 6px;
  align-items: center;
  font-family: var(--terminal-font);
  font-size: 0.66rem;
}

.order-head.history-hidden,
.order-row.history-hidden {
  grid-template-columns: repeat(3, 1fr);
}

.order-row.history-hidden .order-history-value,
.order-head.history-hidden .order-history-head {
  display: none;
}

.order-head {
  margin-top: 4px;
  padding-bottom: 5px;
  color: var(--terminal-muted);
  border-bottom: 1px solid var(--terminal-border);
}

.order-head > span,
.order-row > span {
  text-align: right;
}

.order-row {
  position: relative;
  min-height: 17px;
  padding: 2px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--terminal-divider-soft);
}

.order-depth-bar {
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: stretch;
  justify-self: end;
  width: var(--depth);
  border-radius: 2px 0 0 2px;
  opacity: 0.18;
  pointer-events: none;
}

.order-row > span {
  position: relative;
  z-index: 1;
}

.order-row > .order-depth-bar {
  z-index: 0;
}

.order-price-cell {
  grid-column: 1;
  justify-self: start;
  text-align: left;
}

.order-head .order-size-cell,
.order-row .order-size-cell {
  grid-column: 2;
  text-align: center;
}

.order-total-cell {
  grid-column: 3;
  text-align: right;
}

.order-history-added,
.order-history-added-head {
  grid-column: 4;
}

.order-history-removed,
.order-history-removed-head {
  grid-column: 5;
}

.order-history-delta {
  grid-column: 6;
}

.order-history-delta-head {
  grid-column: 6;
}

.order-price-cell,
.order-size-cell,
.order-total-cell,
.order-history-value {
  grid-row: 1;
}

.order-history-head,
.order-history-value {
  min-width: 0;
}

.order-history-value {
  color: var(--terminal-text);
  overflow: hidden;
  font-size: 0.58rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-history-delta.positive {
  color: var(--terminal-green);
}

.order-history-delta.negative {
  color: var(--terminal-red);
}

.order-history-added,
.order-history-added-head {
  position: relative;
  padding-left: 6px;
}

.order-history-added::before,
.order-history-added-head::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  content: "";
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-50%);
}

.terminal-body[data-terminal-theme="light"] .order-history-added::before,
.terminal-body[data-terminal-theme="light"] .order-history-added-head::before {
  background: var(--terminal-divider-soft);
}

.asks .order-row {
  color: var(--terminal-red);
}

.bids .order-row {
  color: var(--terminal-green);
}

.asks .order-depth-bar {
  background: var(--terminal-red);
}

.bids .order-depth-bar {
  background: var(--terminal-green);
}

.order-row.order-ask-flash {
  background: var(--terminal-red-flash) !important;
}

.order-row.order-bid-flash {
  background: var(--terminal-green-flash) !important;
}

.mid-price {
  margin: 5px 0;
  padding: 5px;
  border: 1px solid var(--terminal-green-border);
  border-radius: 3px;
  color: var(--terminal-green);
  background: var(--terminal-green-soft);
  font-family: var(--terminal-font);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
}

.market-data-box dl {
  display: grid;
  gap: 5px;
  margin: 4px 0 0;
}

.market-data-box div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--terminal-divider);
}

.market-data-box dt {
  color: var(--terminal-muted);
}

.market-data-box dd {
  margin: 0;
  color: var(--terminal-text);
  font-family: var(--terminal-font);
  font-variant-numeric: tabular-nums;
}

.funding-rate.positive {
  color: var(--terminal-red);
}

.funding-rate.negative {
  color: var(--terminal-green);
}

.funding-separator,
.funding-interval {
  color: var(--terminal-muted);
}

.macro-filters,
.news-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px;
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-strip-bg);
}

.macro-filters {
  align-items: center;
  flex-wrap: nowrap;
}

.macro-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.macro-type-filter {
  position: relative;
  margin-left: auto;
}

.macro-filters .macro-type-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  line-height: 0;
}

.macro-type-filter-button svg {
  display: block;
  width: 14px;
  height: 14px;
}

.macro-type-filter-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 5px;
  width: min(280px, calc(100vw - 32px));
  max-height: min(360px, calc(100vh - 32px));
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--terminal-border-strong);
  border-radius: 4px;
  background: var(--terminal-panel);
  box-shadow: 0 10px 24px var(--terminal-popup-shadow);
}

.macro-type-filter-menu.hidden {
  display: none;
}

.macro-type-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 27px;
  padding: 3px 5px;
  color: var(--terminal-text);
  cursor: pointer;
  font-family: var(--terminal-font);
  font-size: 0.68rem;
  font-weight: 850;
}

.macro-type-filter-option:hover {
  background: var(--terminal-cyan-menu-hover);
}

.macro-type-filter-option input {
  margin: 0;
  accent-color: var(--terminal-green);
}

/* Keep the calendar filter's selection visible without adding a light-theme hover effect. */
.terminal-body[data-terminal-theme="light"] .macro-type-filter-option {
  border: 1px solid #ACAAAA !important;
  border-radius: 3px !important;
  color: #000000 !important;
  background: #e3e3e3 !important;
}

.terminal-body[data-terminal-theme="light"] .macro-type-filter-option:hover {
  border-color: #ACAAAA !important;
  color: #000000 !important;
  background: #e3e3e3 !important;
}

.terminal-body[data-terminal-theme="light"] .macro-type-filter-option[aria-checked="true"],
.terminal-body[data-terminal-theme="light"] .macro-type-filter-option:has(input:checked) {
  border-color: #000000 !important;
  color: #000000 !important;
  background: #ACAAAA !important;
  box-shadow: none !important;
  outline: none !important;
}

.macro-filters button,
.news-tabs button {
  min-height: 23px;
  padding: 0 8px;
  border-color: var(--terminal-border);
  background: var(--terminal-control-bg);
  font-size: 0.64rem;
}

.macro-list {
  height: calc(100% - 79px);
}

.macro-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
  font-family: var(--terminal-font);
}

.macro-event.released,
.macro-event.revised {
  border-color: var(--terminal-green-border);
}

.macro-event.polling {
  border-color: var(--terminal-yellow-border);
}

.terminal-statusbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--terminal-footer-height);
  padding: 3px 10px;
  border-top: 1px solid var(--terminal-border);
  color: var(--terminal-muted);
  background: var(--terminal-header-bg);
  font-family: var(--terminal-font);
  font-size: 0.66rem;
  box-shadow: inset 0 1px 0 var(--terminal-footer-shadow);
}

.terminal-footer-version {
  top: 50%;
  transform: translate(-50%, -50%);
}

.status-left,
.status-right {
  gap: 8px;
}

.terminal-statusbar span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
}

.terminal-statusbar strong {
  color: var(--terminal-text);
  font-weight: 850;
}

.status-right {
  justify-content: flex-end;
}

.timezone-control {
  position: relative;
}

.timezone-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 21px;
  padding: 0 7px;
  border: 1px solid var(--terminal-border);
  border-radius: 3px;
  color: var(--terminal-text);
  background: var(--terminal-control-bg);
  cursor: pointer;
  font: inherit;
}

.timezone-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 5px);
  width: 320px;
  max-height: 330px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  border: 1px solid var(--terminal-border-strong);
  border-radius: 4px;
  background: var(--terminal-overlay-bg);
  box-shadow: 0 18px 38px var(--terminal-popup-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  visibility: hidden;
  contain: layout paint;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms,
    border-color 160ms ease;
}

.timezone-menu.open {
  border-color: var(--terminal-border-strong);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.timezone-menu button {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  color: var(--terminal-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.timezone-menu button:hover,
.timezone-menu button.active {
  color: var(--terminal-text);
  background: var(--terminal-cyan-menu-hover);
}

@media (max-width: 1340px) {
  .terminal-shell {
    /* Keep every panel on the fixed terminal canvas at laptop widths. */
    grid-template-columns:
      minmax(0, 0.85fr)
      minmax(0, 1.45fr)
      minmax(0, 0.9fr)
      minmax(0, 0.95fr);
  }

  .data-panel-stack {
    grid-template-rows: minmax(0, 2.25fr) minmax(0, 0.6fr);
  }

}

@media (max-width: 1180px) {
  .terminal-body {
    overflow: hidden;
  }

  .terminal-shell {
    height: 100vh;
    min-height: 0;
    grid-template-columns:
      minmax(0, 0.75fr)
      minmax(0, 1.35fr)
      minmax(0, 0.85fr)
      minmax(0, 0.9fr);
    padding:
      calc(var(--terminal-header-height) + var(--terminal-layout-gap))
      var(--terminal-layout-gap)
      calc(var(--terminal-footer-height) + var(--terminal-layout-gap));
    overflow: hidden;
  }
}

@media (max-width: 760px) {
  .terminal-exchange-options {
    grid-template-columns: 1fr;
  }

  .exchange-selector-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .terminal-settings-modal-layer {
    top: 0;
    bottom: 0;
    padding: 6px;
  }

  .terminal-settings-modal {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }

  .terminal-settings-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .terminal-settings-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--terminal-border);
  }

  .terminal-settings-nav button {
    width: auto;
    flex: 0 0 auto;
  }

  .terminal-settings-content {
    padding: 18px;
  }

  .terminal-exchange-selector-modal {
    width: 100%;
    min-height: 0;
    padding: 22px;
  }

  .exchange-selector-options .exchange-option {
    min-height: 148px;
    padding: 16px 12px;
  }

  .exchange-selector-options .exchange-option img {
    width: 72px;
    height: 72px;
  }

  .subscription-current {
    align-items: flex-start;
  }

  .subscription-dates,
  .account-information-fields,
  .subscription-plan-grid {
    grid-template-columns: 1fr;
  }

  .account-device {
    align-items: flex-start;
  }

  .account-session-logout {
    flex: 0 0 auto;
  }

  .terminal-shell {
    grid-template-columns:
      minmax(0, 0.75fr)
      minmax(0, 1.35fr)
      minmax(0, 0.85fr)
      minmax(0, 0.9fr);
    padding:
      calc(var(--terminal-header-height) + var(--terminal-layout-gap))
      var(--terminal-layout-gap)
      calc(var(--terminal-footer-height) + var(--terminal-layout-gap));
  }

  .terminal-header {
    padding: 8px;
  }

  .terminal-tabs {
    justify-content: flex-start;
  }

  .terminal-tabs button {
    padding: 0 11px;
  }

  .account-area {
    flex-wrap: wrap;
  }

  .terminal-panel,
  .pricing-card {
    border-radius: 4px;
  }

  .data-panel-stack {
    display: grid;
  }

  .market-panel {
    margin-top: 0;
  }

  .chart-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .chart-tools {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .chart-timeframes {
    max-width: 100%;
    overflow-x: auto;
  }

  .terminal-statusbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 8px 10px;
  }

  .terminal-footer-version {
    position: static;
    transform: none;
  }

  .status-left,
  .status-right {
    flex-wrap: wrap;
  }

  .timezone-menu {
    right: auto;
    left: 0;
  }
}